/* ============================================================
   NEXUS — Design System das Landing Pages
   Paleta extraida dos pixels da logo oficial.
   Especificacao: /srv/brain/nexus-landing-page-guide.md
   ============================================================ */

:root{
  /* ---- COR ---- */
  --bg:            #0A0E1A;
  --bg-1:          #0C1220;
  --bg-2:          #101828;
  --bg-3:          #16203247;

  --accent:        #2DDAEB;
  --accent-dim:    #1FA8B8;
  --accent-deep:   #348FA1;

  --warn:          #FFB020;
  --ok:            #3DDC97;

  --text:          #EAF1F7;
  --text-2:        rgba(234,241,247,.72);
  --text-3:        rgba(234,241,247,.52);
  --text-mono:     rgba(45,218,235,.85);

  --line:          rgba(255,255,255,.08);
  --line-strong:   rgba(255,255,255,.14);
  --line-accent:   rgba(45,218,235,.32);

  /* ---- TIPOGRAFIA ---- */
  --f-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --f-body:    'Inter', system-ui, -apple-system, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --t-hero:  clamp(2.75rem, 1.6rem + 4.2vw, 4.5rem);
  --t-h2:    clamp(2rem, 1.4rem + 2.2vw, 3rem);
  --t-h3:    1.5rem;
  --t-lead:  1.1875rem;
  --t-body:  1rem;
  --t-sm:    .875rem;
  --t-kicker:.75rem;

  /* ---- ESPACO (8pt) ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  /* ---- LAYOUT ---- */
  --container:1200px;
  --narrow:760px;
  --gutter:24px;
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-pill:999px;

  --ease:cubic-bezier(.16,1,.3,1);
  --t-fast:140ms; --t-norm:240ms; --t-slow:520ms;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:400 var(--t-body)/1.65 var(--f-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}

/* ---- TIPOGRAFIA ---- */
h1{font:700 var(--t-hero)/1.04 var(--f-display); letter-spacing:-.03em;
   text-wrap:balance; max-width:16ch; margin:0;}
h2{font:600 var(--t-h2)/1.12 var(--f-display); letter-spacing:-.022em;
   max-width:22ch; margin:0; text-wrap:balance;}
h3{font:600 var(--t-h3)/1.28 var(--f-display); letter-spacing:-.012em; margin:0;}
p{margin:0; color:var(--text-2); max-width:64ch;}
.lead{font-size:var(--t-lead); line-height:1.55; color:var(--text-2); max-width:52ch;}
.kicker{font:500 var(--t-kicker)/1 var(--f-mono); letter-spacing:.14em;
        text-transform:uppercase; color:var(--text-mono); display:block;}
.num{font-family:var(--f-mono); font-variant-numeric:tabular-nums;}
.accent{color:var(--accent);}
em{font-style:normal; color:var(--accent);}

/* ---- LAYOUT ---- */
.container{max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter);}
.narrow{max-width:var(--narrow);}
.section{padding-block:var(--s-10);}
.section--tight{padding-block:var(--s-9);}
.section--alt{background:var(--bg-1);}
.section-head{margin-bottom:var(--s-8);}
.kicker + h2{margin-top:var(--s-3);}
h2 + .lead{margin-top:var(--s-5);}

/* ---- NAV ---- */
.nav{position:sticky; top:0; z-index:50; background:rgba(10,14,26,.82);
     backdrop-filter:blur(12px); border-bottom:1px solid var(--line);}
.nav__in{display:flex; align-items:center; justify-content:space-between;
         height:64px; max-width:var(--container); margin-inline:auto;
         padding-inline:var(--gutter);}
.nav__brand{display:flex; align-items:center; gap:12px; font:600 1rem var(--f-display);
            letter-spacing:-.01em;}
.nav__brand img{width:40px; height:40px; object-fit:contain;}
.nav__sub{font:500 .9375rem var(--f-body); color:var(--text-2); letter-spacing:-.01em;}
.foot__brand img{width:56px; height:56px;}
.nav__links{display:flex; gap:var(--s-6); align-items:center;}
.nav__links a{font-size:var(--t-sm); color:var(--text-2);
              transition:color var(--t-fast) var(--ease);}
.nav__links a:hover{color:var(--text);}
@media(max-width:820px){ .nav__links .hide-sm{display:none;} }

/* ---- BOTOES ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
     height:48px; padding-inline:24px; border-radius:var(--r-md);
     font:500 .9375rem var(--f-body); letter-spacing:-.01em; cursor:pointer;
     border:1px solid transparent; white-space:nowrap;
     transition:background var(--t-norm) var(--ease),
                border-color var(--t-norm) var(--ease),
                transform var(--t-fast) var(--ease);}
.btn:active{transform:translateY(1px);}
.btn--primary{background:var(--accent); color:#04252B; font-weight:600;}
.btn--primary:hover{background:var(--accent-dim);}
.btn--ghost{background:transparent; color:var(--text); border-color:var(--line-strong);}
.btn--ghost:hover{border-color:var(--line-accent); background:rgba(45,218,235,.06);}
.btn--sm{height:40px; padding-inline:18px; font-size:.875rem;}
.btn-row{display:flex; gap:var(--s-3); flex-wrap:wrap;}

/* ---- HERO ---- */
.hero{position:relative; padding-block:var(--s-10) var(--s-9); overflow:hidden;}
.hero::before{content:''; position:absolute; inset:-40% 20% 40% -10%;
  background:radial-gradient(ellipse at 30% 40%, rgba(45,218,235,.10), transparent 62%);
  pointer-events:none;}
.hero__in{position:relative; display:grid; gap:var(--s-9);
          grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center;}
@media(max-width:980px){ .hero__in{grid-template-columns:1fr;} }
.hero .lead{margin-top:var(--s-5);}
.hero .btn-row{margin-top:var(--s-7);}
.hero__note{margin-top:var(--s-4); font-size:var(--t-sm); color:var(--text-3);}

/* ---- CARDS ---- */
.card{background:var(--bg-2); border:1px solid var(--line);
      border-radius:var(--r-lg); padding:32px;
      transition:border-color var(--t-norm) var(--ease),
                 background var(--t-norm) var(--ease),
                 transform var(--t-norm) var(--ease);}
.card:hover{background:var(--bg-3); border-color:var(--line-accent);
            transform:translateY(-2px);}
.card h3{margin-bottom:var(--s-3);}
.card p{font-size:.9375rem;}
.grid{display:grid; gap:var(--s-5);}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}
@media(max-width:980px){ .grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:680px){ .grid--2,.grid--3,.grid--4{grid-template-columns:1fr;} }

/* ---- BARRA DE NUMEROS ---- */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5);
       border-block:1px solid var(--line); padding-block:var(--s-7);}
@media(max-width:760px){ .stats{grid-template-columns:1fr; gap:var(--s-6);} }
.stat__v{font:600 clamp(2rem,1.2rem+2.4vw,2.75rem)/1 var(--f-mono);
         font-variant-numeric:tabular-nums; color:var(--text); letter-spacing:-.02em;}
.stat__l{margin-top:var(--s-3); font-size:.9375rem; color:var(--text-2); max-width:34ch;}
.stat__s{margin-top:var(--s-2); font:400 var(--t-kicker) var(--f-mono);
         color:var(--text-3); letter-spacing:.04em;}

/* ---- MOCKUP ---- */
.mock{background:var(--bg-2); border:1px solid var(--line-strong);
      border-radius:var(--r-lg); overflow:hidden;
      box-shadow:0 24px 80px -32px rgba(0,0,0,.9);}
.mock__bar{display:flex; align-items:center; gap:6px; padding:12px 16px;
           border-bottom:1px solid var(--line); background:rgba(255,255,255,.02);}
.mock__dot{width:9px; height:9px; border-radius:50%; background:var(--line-strong);}
.mock__t{margin-left:8px; font:400 var(--t-kicker) var(--f-mono); color:var(--text-3);}
.mock__body{padding:24px;}
.row{display:flex; justify-content:space-between; align-items:baseline;
     padding-block:14px; border-bottom:1px solid var(--line);}
.row:last-child{border-bottom:0;}
.row__k{font-size:.875rem; color:var(--text-3);}
.row__v{font-family:var(--f-mono); font-variant-numeric:tabular-nums;
        font-size:1.0625rem; color:var(--text);}
.row--hi .row__v{color:var(--accent); font-size:1.5rem; font-weight:600;}

/* ---- PRECO ---- */
.plans{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-5);
       align-items:start;}
@media(max-width:980px){ .plans{grid-template-columns:1fr;} }
.plan{background:var(--bg-2); border:1px solid var(--line);
      border-radius:var(--r-lg); padding:32px; display:flex; flex-direction:column;}
.plan--hi{border-color:var(--line-accent); background:var(--bg-3); position:relative;}
.plan__tag{position:absolute; top:-11px; left:32px; background:var(--accent);
           color:#04252B; font:600 var(--t-kicker) var(--f-mono); letter-spacing:.1em;
           text-transform:uppercase; padding:5px 12px; border-radius:var(--r-pill);}
.plan__n{font:600 1.125rem var(--f-display); letter-spacing:-.01em;}
.plan__for{margin-top:var(--s-2); font-size:.875rem; color:var(--text-3);}
.plan__p{margin-top:var(--s-5); font:600 2.5rem/1 var(--f-mono);
         font-variant-numeric:tabular-nums; letter-spacing:-.02em;}
.plan__p span{font-size:1rem; font-weight:400; color:var(--text-3);}
.plan__list{list-style:none; margin:var(--s-6) 0 var(--s-7); padding:0;
            display:grid; gap:12px; font-size:.9375rem; color:var(--text-2);}
.plan__list li{display:flex; gap:10px; align-items:flex-start;}
.plan__list li::before{content:'—'; color:var(--accent); flex-shrink:0;
                       font-family:var(--f-mono);}
.plan .btn{margin-top:auto; width:100%;}

/* ---- FAQ ---- */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{cursor:pointer; list-style:none; padding-block:var(--s-5);
             font:500 1.0625rem var(--f-body); display:flex;
             justify-content:space-between; gap:var(--s-5);
             transition:color var(--t-fast) var(--ease);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+'; color:var(--accent); font-family:var(--f-mono);
                    font-size:1.25rem; flex-shrink:0;}
.faq details[open] summary::after{content:'−';}
.faq summary:hover{color:var(--accent);}
.faq p{padding-bottom:var(--s-5); font-size:.9375rem;}

/* ---- CTA FINAL ---- */
.cta{position:relative; text-align:center; overflow:hidden;}
.cta::before{content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 120%, rgba(45,218,235,.14), transparent 60%);
  pointer-events:none;}
.cta__in{position:relative;}
.cta h2{margin-inline:auto;}
.cta .lead{margin-inline:auto; margin-top:var(--s-5);}
.cta .btn-row{justify-content:center; margin-top:var(--s-7);}

/* ---- RODAPE ---- */
.foot{border-top:1px solid var(--line); padding-block:var(--s-8);
      font-size:var(--t-sm); color:var(--text-3);}
.foot__in{display:flex; justify-content:space-between; gap:var(--s-6); flex-wrap:wrap;}
.foot a{color:var(--text-2);}
.foot a:hover{color:var(--accent);}

/* ---- HONESTIDADE (bloco de transparencia) ---- */
.note{border-left:2px solid var(--line-accent); padding:var(--s-5) 0 var(--s-5) var(--s-5);
      background:linear-gradient(90deg, rgba(45,218,235,.04), transparent 70%);}
.note p{font-size:.9375rem;}

/* ---- REVEAL ---- */
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0; transform:translateY(18px);
          transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);}
  .reveal.in{opacity:1; transform:none;}
}