:root{
    /* Core tokens */
    --bg:#0B1020;              /* fundo charcoal */
    --bg-2:#0E1530;
    --surface:#0E1222;         /* cartões escuros */
    --glass:rgba(255,255,255,.06);

    --text:#E6E9F2;            /* texto principal */
    --muted:#93A0B8;           /* texto secundário */

    /* Paleta atualizada (sem roxo) */
    --brand:#1E66F5;           /* azul real */
    --brand-2:#0B3B8F;         /* azul escuro */
    --accent:#00E0FF;          /* ciano frio sutil */

    --danger:#DC2626;
    --ok:#22c55e;

    --radius:18px;
    --radius-lg:22px;
    --blur:14px;
    --shadow:0 10px 30px rgba(0,0,0,.35);

    /* Gradientes principais */
    --grad-primary: linear-gradient(90deg, #0B132B 0%, #1E66F5 100%);
    --grad-glass:   linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    }

    *{box-sizing:border-box}
    html,body{
    margin:0;padding:0;background:var(--bg);color:var(--text);
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji';
    }
    img{max-width:100%;display:block}
    a{color:inherit;text-decoration:none}
    button{font:inherit}

    /* Background aura + animated beams (tons de azul) */
    body::before, body::after{
    content:"";position:fixed;inset:-20%;z-index:-2;filter:blur(60px);opacity:.7;pointer-events:none;
    background:
        radial-gradient(60% 60% at 20% 20%, rgba(30,102,245,.14) 0%, transparent 60%),
        radial-gradient(40% 50% at 80% 30%, rgba(11,59,143,.12) 0%, transparent 60%),
        radial-gradient(50% 60% at 50% 80%, rgba(0,224,255,.08) 0%, transparent 60%);
    }
    .beams{position:fixed;inset:0;pointer-events:none;z-index:-1;mix-blend-mode:screen;opacity:.35}
    .beam{
    position:absolute;inset:auto;top:-30vh;left:0;right:0;height:80vh;filter:blur(20px);
    background:linear-gradient(180deg, transparent, rgba(30,102,245,.18), transparent);
    transform:skewX(-12deg) translateX(-40%);animation:beam 12s linear infinite;
    }
    .beam.b2{left:40%;background:linear-gradient(180deg, transparent, rgba(0,224,255,.16), transparent);animation-duration:16s;animation-delay:-4s}
    .beam.b3{left:70%;background:linear-gradient(180deg, transparent, rgba(11,59,143,.22), transparent);animation-duration:20s;animation-delay:-8s}
    @keyframes beam{to{transform:skewX(-12deg) translateX(120%)}}

    /* Container */
    .wrap{width:min(1200px,92%);margin:0 auto}

    /* Glass navbar centrada */
    .nav-shell{
    position: sticky; top: 14px; z-index: 1000; display: flex; justify-content: center;
    }
    .nav{
    backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
    background: var(--grad-glass);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: var(--shadow);
    border-radius: 999px;
    display: flex; align-items: center; gap: 14px;
    padding: 8px 20px; height: 64px;
    transition: all .3s ease;
    }
    /* Logo */
    .nav .brand{display:flex;align-items:center;gap:10px;padding:4px 10px;border-radius:999px}
    .nav .brand img{height:36px;width:auto;object-fit:contain}
    /* Links */
    .nav a{
    padding:8px 14px;border-radius:999px;color:var(--muted);
    font-weight:500;font-size:.95rem;transition: color .3s, background .3s;
    }
    .nav a:hover{background:rgba(255,255,255,.06);color:var(--text)}


    .nav .cta{
    --ring:#1E66F5;
    background-size: 200% 100%;
    color:#fff; font-weight:800; padding:12px 20px; border-radius:999px;
    border:1px solid rgba(160,190,255,.35);
    position:relative; isolation:isolate; overflow:hidden;
    box-shadow:0 6px 20px rgba(30,102,245,.28);
    transition:transform .2s ease, box-shadow .2s ease, background-position .4s ease;
    }
    .nav .cta::after{
    content:""; position:absolute; inset:-1px; z-index:-1;
    background:
        radial-gradient(120% 180% at -10% 50%, rgba(255,255,255,.18), transparent 40%),
        linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
    mix-blend-mode:screen; transform:translateX(-120%); transition:transform .6s cubic-bezier(.22,.61,.36,1);
    }
    .nav .cta:hover, .btn-primary:hover{
    background-position:100% 0;
    transform:translateY(-1px) scale(1.02);
    box-shadow:0 10px 28px rgba(30,102,245,.38);
    }
    .nav .cta:hover::after{ transform:translateX(120%); }
    .nav .cta:active, .btn-primary:active{
    transform:translateY(0) scale(.99);
    box-shadow:0 4px 12px rgba(30,102,245,.25);
    }
    .nav .cta:focus-visible{
    outline:none;
    box-shadow:
        0 0 0 2px #0B132B,
        0 0 0 4px rgba(30,102,245,.65),
        0 10px 28px rgba(30,102,245,.38);
    }

    /* Respeita redução de movimento */
    @media (prefers-reduced-motion: reduce){
    .nav .cta{ transition:none; }
    .nav .cta::after{ display:none; }
    }


    /* Hero */
    .hero{padding:120px 0 72px;position:relative}
    .hero .kicker{color:var(--accent);letter-spacing:.18em;font-weight:700;text-transform:uppercase}
    .hero h1{
    font-family:Montserrat,Inter,sans-serif;font-size:clamp(40px,5vw,64px);line-height:1.05;margin:12px 0 16px;
    background: linear-gradient(120deg,#EAF2FF 0%,#BBD4FF 35%,#8DB7FF 65%,#EAF2FF 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    }
    .hero p{font-size:clamp(18px,2.2vw,22px);color:var(--muted);max-width:800px}
    .hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
    .btn{
    padding:14px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.12);
    cursor:pointer;transition:.2s;
    }


    .btn-primary{
    color:#fff; font-weight:800; padding:12px 20px; border-radius:999px;
    position:relative;  overflow:hidden;
    box-shadow:0 6px 5px rgba(30,102,245,.20);
    transition:transform .2s ease, box-shadow .2s ease, background-position .4s ease;

    }
    .btn-primary:hover{transform:translateY(-1px)}
    .btn-ghost{background:rgba(12,22,45,.5);color:#EAF6FF}
    .btn-ghost:hover{background:rgba(12,22,45,.7)}

    /* Seções e grids */
    section{padding:72px 0}
    .grid{display:grid;gap:22px}
    .grid.cols-2{grid-template-columns:repeat(2,1fr)}
    .grid.cols-3{grid-template-columns:repeat(3,1fr)}
    @media(max-width:980px){.grid.cols-2,.grid.cols-3{grid-template-columns:1fr}}

    /* Cards */
    .card{
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);
    padding:24px;position:relative;overflow:hidden;
    }
    .card::after{
    content:"";position:absolute;inset:-1px;pointer-events:none;border-radius:inherit;
    background:linear-gradient(180deg, rgba(30,102,245,.16), rgba(0,224,255,.12), transparent);opacity:.25;
    }
    .card h3{font-family:Montserrat,Inter,sans-serif;margin:8px 0 6px}
    .card p{color:var(--muted);line-height:1.6}

    /* Ícone circular */
    .ic{
    display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
    box-shadow:inset 0 0 30px rgba(30,102,245,.22)
    }
    .ic svg{width:22px;height:22px}

    /* Badges */
    .badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
    .badge{
    display:inline-flex;align-items:center;gap:8px;
    background:rgba(18,33,66,.55); border:1px solid rgba(160,190,255,.25);
    padding:8px 10px;border-radius:12px;color:#DCE6F9
    }
    .badge .logo{width:12px;height:12px;display:block}

    /* Títulos de seção / subtítulo */
    .section-title{
    font-family:Montserrat,Inter,sans-serif;text-align:center;
    font-size:clamp(28px,3.6vw,40px);margin:0 0 8px
    }
    .section-sub{color:var(--muted);text-align:center;margin:0 0 32px}

    /* Pricing */
    .price{display:flex;align-items:baseline;gap:6px;margin:12px 0 18px}
    .price .v{font-size:42px;font-weight:800}
    .features{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
    .features li{display:flex;gap:10px;align-items:flex-start;color:#CFE4FF}
    .features svg{flex:0 0 auto;margin-top:2px}
    .card.pop{border:1px solid rgba(0,224,255,.45);position:relative}
    .card.pop::before{
    content:"Mais Popular";position:absolute;top:10px;right:12px;font-size:12px;color:#001214;
    background:linear-gradient(90deg,#00E0FF,#74F0FF);padding:6px 10px;border-radius:999px;font-weight:800
    }

    /* About & FAQ */
    .cols{display:grid;grid-template-columns:1.2fr .8fr;gap:28px}
    @media(max-width:980px){.cols{grid-template-columns:1fr}}
    details{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:16px}
    summary{cursor:pointer;font-weight:700}
    details p{color:var(--muted)}

    /* Footer */
    footer{padding:36px 0;color:#AEBBD6;border-top:1px solid rgba(255,255,255,.08)}

    /* Modal Typeform-like */
    .modal{position:fixed;inset:0;display:none;z-index:2000}
    .modal.open{display:block}
    .backdrop{position:absolute;inset:0;background:rgba(5,8,15,.6);backdrop-filter:blur(6px)}
    .dialog{
    position:relative;margin:6vh auto 0;width:min(820px,92%);
    background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.16);border-radius:22px;box-shadow:var(--shadow);overflow:hidden
    }
    .dialog header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
    .dialog header .tag{font-weight:500;color:white;background:var(--grad-primary);padding:6px 10px;border-radius:10px}
    .close{appearance:none;border:none;background:transparent;color:#D6E8FF;font-size:24px;cursor:pointer}
    .dialog .body{padding:18px}
    .form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
    .form .full{grid-column:1/-1}
    @media(max-width:720px){.form{grid-template-columns:1fr}}
    .f{position:relative}
    .f input{
    width:100%;padding:18px 14px 14px;border-radius:14px;background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.16);color:#F2F6FF;outline:0
    }
    .f input:focus{border-color:var(--brand)}
    .f label{
    position:absolute;left:12px;top:12px;color:#BBD2FF;transition:.15s;background:transparent;padding:0 6px
    }
    .f input:focus + label, .f input:not(:placeholder-shown)+label{top:-8px;font-size:12px;background:var(--surface);border-radius:8px}
    .terms{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:#CFE4FF}
    .terms a{color:#A2EFFF;text-decoration:underline}
    .actions{display:flex;justify-content:flex-end;gap:10px;margin-top:10px}
    .error{color:var(--danger);font-weight:700;display:none}
    .error.show{display:block}
    .success{display:none;padding:28px;text-align:center}
    .success.show{display:block}

    /* Reveal on scroll */
    .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
    .reveal.visible{opacity:1;transform:none}


    /* Banner de teste gratuito */
    .trial-banner{
    text-align:center; margin:0 0 22px;
    background:rgba(18,33,66,.55);
    border:1px solid rgba(160,190,255,.25);
    padding:14px 16px; border-radius:14px;
    }
    .trial-banner .pill{
    display:inline-block; margin-right:10px;
    font-weight:800; color: white;
    background:var(--grad-primary);
    padding:6px 10px; border-radius:999px;
    }

    /* Learn360: imagem menor como no showcase */
    #learn360 .device-frame{ margin:0; padding:8px; border-radius:18px;
    background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    border:1px solid rgba(160,190,255,.22); box-shadow:var(--shadow);
    }
    #learn360 .device-frame img{
    width:100%; height:auto; max-height:48vh; aspect-ratio:16/9;
    object-fit:cover; border-radius:14px; background:#0B1320;
    }


    /* ===== Cards: hover sem “cara de clique” ===== */
    .card{ cursor: default; }
    .card:hover{
    transform:none;                               /* sem levantar */
    box-shadow:0 10px 28px rgba(30,102,245,.12);  /* brilho sutil */
    border-color:rgba(160,190,255,.28);
    background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
    }
    .card:active{ transform:none; }
    /* Caso algum card precise ser clicável no futuro */
    .card.is-action{ cursor:pointer; }
    .card.is-action:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(30,102,245,.18); }

    /* ===== Benefícios: tipografia maior e mais respiro ===== */
    #beneficios .features{ gap:16px; }                     /* mais espaço entre itens */
    #beneficios .features li{
    font-size:1.08rem;                                   /* ligeiramente maior */
    line-height:1.7;
    padding:6px 0;                                       /* volume vertical */
    }
    #beneficios .features svg{
    width:20px; height:20px; margin-top:2px; flex:0 0 auto;
    }







    /* === Calculadora de planos === */
    .calc-card{
    background: radial-gradient(120% 180% at 20% 0%, rgba(39,89,255,.12), transparent 60%),
                linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    border:1px solid rgba(160,190,255,.22);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow);
    }
    .calc-body{display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:center}
    @media (max-width:980px){.calc-body{grid-template-columns:1fr}}

    .plan-switch{display:flex; gap:10px; justify-content:center; margin:12px 0 18px}
    .chip{
    background: rgba(255,255,255,.06);
    border:1px solid rgba(160,190,255,.25);
    color:#E6E9F2; padding:10px 14px; border-radius:999px; cursor:pointer;
    transition:background .2s ease, border-color .2s ease, transform .15s ease;
    font-weight:600;
    }
    .chip:hover{background: rgba(255,255,255,.09)}

    .chip.selected{
    color:#fff; border-color:transparent; box-shadow:0 8px 26px rgba(30,102,245,.88);
    }

    .calc-label{font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:#AFC4FF}
    .calc-counter{display:flex; gap:10px; align-items:center; margin:8px 0 10px}
    .calc-counter input{
    width: 180px; max-width: 50vw; text-align:center;
    background: rgba(255,255,255,.06); color:#fff;
    border:1px solid rgba(160,190,255,.25); border-radius:12px; padding:10px 12px;
    }
    .step{
    background: rgba(255,255,255,.06);
    border:1px solid rgba(160,190,255,.25);
    color:#E6E9F2; border-radius:10px; padding:10px 12px; cursor:pointer;
    }
    .step:hover{background: rgba(255,255,255,.1)}

    .calc-range{
    width:100%; height:8px; border-radius:999px; margin:10px 0 6px;
    background: linear-gradient(90deg, rgba(160,190,255,.35) 0%, rgba(160,190,255,.15) 100%);
    outline:none; position:relative;
    }
    .calc-range::-webkit-slider-thumb{
    -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
    background:#fff; border:2px solid #1E66F5; box-shadow:0 6px 18px rgba(30,102,245,.4);
    }
    .calc-range::-moz-range-thumb{
    width:20px; height:20px; border-radius:50%;
    background:#fff; border:2px solid #1E66F5; box-shadow:0 6px 18px rgba(30,102,245,.4);
    }

    .hint{display:block; color:#AFC4FF; margin-top:6px}

    .calc-right{ background: rgba(255,255,255,.04); border:1px solid rgba(160,190,255,.18);
    border-radius:16px; padding:16px 18px}
    .est-label{color:#CFE4FF; text-transform:uppercase; letter-spacing:.08em; font-weight:800}
    .price-xl{ display:flex; align-items:flex-end; gap:6px; margin:6px 0 10px }
    .price-xl .currency{ font-size:28px; opacity:.9 }
    #calcTotal{ font-size: clamp(40px, 6vw, 56px); font-weight:900; letter-spacing:-.02em }

    .breakdown{ list-style:none; margin:10px 0 0; padding:0; display:grid; gap:8px }
    .breakdown li{ display:flex; justify-content:space-between; align-items:center; color:#DDE8FF }
    .breakdown li.sep{ height:1px; background:rgba(160,190,255,.22); margin:4px 0 }
    .breakdown li.muted{ color:#AFC4FF }
    .breakdown span b{ font-weight:800 }

    /* cards não clicáveis continuam sem cara de botão */
    .card{ cursor: default; }
    .card:hover{ transform:none; box-shadow:0 10px 28px rgba(30,102,245,.12); border-color:rgba(160,190,255,.28) }

.grid.cols-3 { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 24px; 
  align-items: stretch;
}

.card{
  display: flex;
  flex-direction: column;
  padding: 24px;
}

.card .features{ margin-bottom: 16px; }
.card .hero-ctas{ margin-top: auto; } 







.nav { position: relative; z-index: 1001; }
.nav-links { display:flex; align-items:center; gap:14px; }
.nav .nav-toggle { display:none; appearance:none; border:0; background:transparent; color:#E6E9F2; }

/* --- MOBILE --- */
@media (max-width:860px){
  .nav { justify-content:space-between; }
  .nav .nav-toggle{ display:block; padding:8px; border-radius:10px; }


  .nav-links{
    position:absolute;
    top: calc(100% + 10px);
    left:50%; transform:translateX(-50%);
    width:min(92vw,720px);
    display:none; 
    flex-direction:column; gap:8px; align-items:stretch;
    padding:12px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    box-shadow: var(--shadow);
    z-index:1000;
  }
  .nav a{
    color: white;
  }

  

  .nav-links a{ width:100%; padding:12px 14px; border-radius:10px; }
  .nav-links a:hover{ background:rgba(255,255,255,.06); color:var(--text); }

  /* quando aberto */
  .nav.open .nav-links{ display:flex; }
}



.grid.cols-3{ display:grid; gap:24px; }

/* mobile: empilha */
@media (max-width:980px){
  .grid.cols-3{ grid-template-columns: 1fr; }
}

@media (min-width:981px){
  .grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
}

.grid.cols-3 > .card{ min-width:0; }