/* FinBot Home Landing — estilos base (modo oscuro) */
:root{
  --bg: #0b0d12;
  --bg-alt: #0f1218;
  --text: #e8ecf3;
  --muted: #9aa4b2;
  --brand: #7c3aed;
  --brand-2: #22d3ee;
  --card: #121620;
  --border: #1b2230;
  --ok: #12b981;
  --bad: #ef4444;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --glass-bg: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  --glass-border: linear-gradient(180deg, rgba(124,58,237,.35), rgba(34,211,238,.15));
  --accent-grad: linear-gradient(90deg, var(--brand), var(--brand-2));
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 600px at 80% -10%, rgba(124,58,237,.25), transparent 60%),
              radial-gradient(900px 500px at -10% 10%, rgba(34,211,238,.15), transparent 55%),
              var(--bg);
  color: var(--text);
  line-height: 1.6;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

.site-header{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--border);
  background: rgba(11,13,18,.7); backdrop-filter: blur(8px);
}

.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand img{filter: drop-shadow(0 3px 10px rgba(124,58,237,.45));}

.nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0;align-items:center}
.menu-toggle{display:none}

.btn{display:inline-block;padding:10px 16px;border-radius:12px;background:var(--accent-grad);color:#05060a;font-weight:700;border:0;cursor:pointer;box-shadow: var(--shadow)}
.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn.small{padding:6px 10px;font-size:.9rem}
.btn.full{display:block;text-align:center;width:100%}

.hero{position:relative;isolation:isolate;display:grid;grid-template-columns: 1.15fr .85fr;gap:40px;padding:72px 22px 32px;max-width:1120px;margin:0 auto}
.hero h1{font-size: clamp(2rem, 3.6vw, 3.2rem);line-height:1.05;margin:0 0 12px}
.hero p{font-size:1.05rem;color:var(--muted);margin:0 0 18px}
.pill-list{display:none}
.pill-list.hidden{display:none!important}
.cta{display:flex;gap:12px;align-items:center;margin:10px 0 0}

.hero::before,.hero::after{content:"";position:absolute;z-index:-1;filter:blur(40px);opacity:.5}
.hero::before{width:360px;height:360px;border-radius:50%;background: radial-gradient(closest-side, rgba(124,58,237,.45), transparent);top:-40px;left:-80px}
.hero::after{width:320px;height:320px;border-radius:50%;background: radial-gradient(closest-side, rgba(34,211,238,.35), transparent);bottom:-40px;right:20%}

h1.gradient{background: var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 2px 24px rgba(124,58,237,.15)}
h1 .sub{color: var(--text);opacity:.85;font-weight:800}
.accent-underline{position:relative;display:inline-block}
.accent-underline::after{content:"";position:absolute;left:0;bottom:-6px;width:100%;height:6px;background: linear-gradient(90deg, rgba(124,58,237,.6), rgba(34,211,238,.6));border-radius:6px;filter: blur(6px);opacity:.6}

.hero-art{position:relative;min-height:240px}
.glass-card{position:relative;margin:18px 0;padding:18px 18px 18px 58px;border-radius:18px;background: var(--glass-bg);border:1px solid var(--border);box-shadow: var(--shadow)}
.glass-card::before{content:"";position:absolute;inset:0;border-radius:18px;padding:1px;background: var(--glass-border);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.glass-card .big{font-size:1.8rem;font-weight:800}
.glass-card .muted{color:var(--muted);font-size:.9rem}
.glass-card .positive{color:var(--ok)}
.glass-card .icon{position:absolute;left:16px;top:16px;width:28px;height:28px;border-radius:10px;background: var(--accent-grad);box-shadow:0 8px 22px rgba(0,0,0,.35);display:grid;place-items:center}
.glass-card .icon svg{width:18px;height:18px;fill:#06070b}
.glass-card:hover{transform: translateY(-3px);transition: transform .25s ease, box-shadow .25s ease;box-shadow: 0 16px 40px rgba(0,0,0,.45)}

@keyframes riseFade{from{opacity:0; transform: translateY(10px)} to{opacity:1; transform: translateY(0)}}
.hero-content, .hero-art .glass-card{animation: riseFade .5s ease both}
.hero-art .glass-card:nth-child(1){animation-delay:.05s}
.hero-art .glass-card:nth-child(2){animation-delay:.12s}
.hero-art .glass-card:nth-child(3){animation-delay:.18s}

.section{padding:56px 22px}
.section.alt{background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 60%), var(--bg-alt)}
.container{max-width:1120px;margin:0 auto}
.two-col{display:grid;grid-template-columns: 1.1fr .9fr;gap:24px;align-items:start}

.grid.gallery{display:grid;grid-template-columns: repeat(3, 1fr);gap:16px}
.screenshot{margin:0}
.screenshot figcaption{color:var(--muted);font-size:.9rem;margin-top:6px}

.features.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feature.card{background: var(--glass-bg);position:relative;border-radius:18px;padding:18px 18px 18px 58px;overflow:hidden}
.feature.card::before{content:"";position:absolute;inset:0;border-radius:18px;padding:1px;background: var(--glass-border);-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.feature.card .icon{position:absolute;left:16px;top:16px;width:28px;height:28px;border-radius:10px;background:var(--accent-grad);display:grid;place-items:center;box-shadow:0 8px 22px rgba(0,0,0,.35)}
.feature.card .icon svg{width:18px;height:18px;fill:#06070b}
.feature.card h3{margin:4px 0 6px}
.feature.card p{color:var(--muted)}
.feature.card:hover{transform:translateY(-3px);transition:transform .25s ease, box-shadow .25s ease;box-shadow:0 16px 40px rgba(0,0,0,.45)}

.timeline{list-style:none;padding:0;margin-top:10px}
.timeline li{position:relative;margin:16px 0 16px 28px;padding-left:12px}
.timeline li::before{content:"";position:absolute;left:-28px;top:6px;width:10px;height:10px;border-radius:50%;background:linear-gradient(90deg,var(--brand),var(--brand-2));box-shadow:0 0 0 4px rgba(124,58,237,.12)}
.timeline li strong{display:block;margin-bottom:4px}
.roadmap-note{color:var(--muted);font-size:.95rem;margin-top:8px}

.site-footer{display:flex;align-items:center;justify-content:space-between;padding:24px 22px;border-top:1px solid var(--border);color:var(--muted);gap:12px;flex-wrap:wrap}
.footer-links{display:flex;gap:16px;align-items:center}
.footer-links a{border:1px solid var(--border);padding:8px 12px;border-radius:10px}
.footer-legal{opacity:.8}

@media (max-width: 980px){
  .hero{grid-template-columns:1fr;gap:24px}
  .two-col{grid-template-columns:1fr}
  .features.cards, .grid.gallery{grid-template-columns:1fr 1fr}
}

@media (max-width: 640px){
  .nav ul{display:none}
  .menu-toggle{display:inline-block;border:1px solid var(--border);background:transparent;
    padding:8px 10px;border-radius:12px;color:var(--text)}
  .features.cards, .grid.gallery{grid-template-columns:1fr}
}
