/* ================= TOKENS (Figma LP - Hub) ================= */
  :root{
    --bg:#04081F;
    --bg-2:#050923;
    --card:#0A0F26;
    --card-2:#0D1330;
    --line:rgba(255,255,255,.08);
    --line-2:rgba(255,255,255,.05);

    --blue:#3972FD;
    --teal:#5BC0BE;
    --slate:#3A506B;
    --purple:#A364FF;
    --purple-soft:#C8ADFF;
    --green:#34D399;
    --orange:#FA9800;
    --orange-soft:#FFBC7C;
    --pink:#F472B6;

    --white:#F9F9F9;
    --muted:#7E84A6;
    --muted-2:#868C94;

    --chat-bg:#1F2128;
    --chat-line:#31363F;

    --hub-gradient:linear-gradient(92deg,var(--blue),var(--purple),var(--orange),var(--green),var(--teal));
    --maxw:1180px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:'Maven Pro',sans-serif;
    background:var(--bg);
    color:var(--white);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    position:relative;
  }
  /* luzes globais de fundo — página fluida, sem quebras de seção */
  .bg-lights{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
  .bg-lights span{
    position:absolute;width:1100px;height:860px;
    background:radial-gradient(closest-side, var(--c, rgba(57,114,253,.06)), transparent 72%);
    animation:bgFloat 24s ease-in-out infinite alternate;
  }
  .bg-lights span:nth-child(2n){animation-duration:30s;animation-delay:-8s}
  .bg-lights span:nth-child(3n){animation-duration:36s;animation-delay:-16s}
  @keyframes bgFloat{to{transform:translate3d(70px,50px,0)}}
  section, nav, footer{position:relative;z-index:1}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  h1,h2,h3,h4{font-family:'Maven Pro',sans-serif;font-weight:600;line-height:1.08;letter-spacing:-.03em;color:var(--white)}
  a{color:inherit;text-decoration:none}

  /* ===== Badge eyebrow (glow azul/roxo suave) ===== */
  .badge-pill{
    display:inline-flex;align-items:center;gap:9px;
    padding:9px 27px;border-radius:64px;
    background:linear-gradient(180deg,rgba(57,114,253,.07),rgba(163,100,255,.05));
    border:1px solid rgba(163,100,255,.18);
    box-shadow:0 0 22px rgba(57,114,253,.1), 0 0 30px rgba(163,100,255,.07), inset 0 1px 0 rgba(255,255,255,.04);
    font-size:13.5px;font-weight:400;color:var(--white);letter-spacing:-.03em;
  }
  .badge-pill svg{width:18px;height:10px;flex:none}

  /* ===== Botões ===== */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    font-family:'Inter',sans-serif;font-weight:500;
    font-size:15.5px;line-height:1.2;
    padding:13px 26px;border-radius:64px;cursor:pointer;
    color:#fff;position:relative;isolation:isolate;
    min-height:46px;letter-spacing:-.005em;
    transition:transform .25s ease, box-shadow .25s ease;
    border:none;background:transparent;
  }
  /* primário: traçado gradiente animado (todas as cores do Hub) */
  .btn-grad{
    background:
      linear-gradient(var(--bg),var(--bg)) padding-box,
      linear-gradient(92deg,#3972FD,#A364FF,#FA9800,#34D399,#5BC0BE,#3972FD) border-box;
    border:1.7px solid transparent;
    background-size:100% 100%, 300% 100%;
    animation:gradSlide 5s linear infinite;
    box-shadow:0 0 26px -10px rgba(123,92,255,.35);
  }
  @keyframes gradSlide{
    0%{background-position:0 0, 0% 50%}
    100%{background-position:0 0, 300% 50%}
  }
  .btn-grad::before{
    content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
    background:linear-gradient(92deg,#3972FD,#A364FF,#FA9800,#34D399,#5BC0BE,#3972FD);
    background-size:300% 100%;
    animation:gradSlide 5s linear infinite;
    opacity:0;transition:opacity .25s ease;
  }
  .btn-grad:hover{transform:translateY(-2px);box-shadow:0 14px 40px -12px rgba(123,92,255,.5)}
  .btn-grad:hover::before{opacity:1}
  /* secundário: slate → hover branco */
  .btn-slate{border:1.5px solid var(--slate);opacity:.92;background:transparent}
  .btn-slate:hover{
    border-color:rgba(255,255,255,.5);
    background:rgba(255,255,255,.18);
    opacity:1;transform:translateY(-2px);
  }
  .btn-sm{font-size:13.5px;padding:9px 18px;min-height:38px;border-radius:48px}
  .btn-arrow{transition:transform .2s ease}
  .btn:hover .btn-arrow{transform:translateX(4px)}

  /* ================= NAV ================= */
  nav{
    position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
    background:rgba(4,8,31,.8);border-bottom:1px solid var(--line-2);
  }
  .nav-in{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;max-width:1480px;margin:0 auto}
  .logo{display:flex;align-items:center;gap:9px}
  .logo .wordmark{font-family:'Maven Pro';font-size:21px;font-weight:700;letter-spacing:-.02em;color:#fff}
  .logo .hub{font-weight:400;color:var(--muted)}
  .nav-links{display:flex;gap:38px;font-size:15px;font-weight:500}
  .nav-links a{opacity:.75;transition:opacity .15s}
  .nav-links a:hover{opacity:1}
  @media(max-width:900px){.nav-links{display:none}}

  /* ================= HERO ================= */
  .hero{position:relative;padding:64px 0 0;overflow:hidden;text-align:center}
  .hero::before{
    content:"";position:absolute;inset:0;z-index:0;
    background:
      radial-gradient(900px 420px at 42% -8%, rgba(57,114,253,.14), transparent 60%),
      radial-gradient(800px 420px at 62% 0%, rgba(163,100,255,.1), transparent 60%);
  }
  .hero-in{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 24px}
  .hero h1{
    font-size:clamp(36px,4.3vw,60px);font-weight:600;margin:40px auto 0;
    letter-spacing:-.032em;line-height:1.14;color:var(--white);max-width:1020px;
  }
  .hero h1 .chip{
    display:inline-grid;place-items:center;
    width:1.3em;height:1.3em;border-radius:.24em;vertical-align:-.28em;
    border:1.7px solid var(--blue);
    background:linear-gradient(-45deg, rgba(11,15,38,.5) 35%, rgba(57,114,253,.5) 122%);
    transform:rotate(8.6deg);margin:0 .14em;
    box-shadow:0 10px 30px -6px rgba(57,114,253,.55);
  }
  .hero h1 .chip img{width:68%;height:auto}
  .hero .sub{
    font-size:clamp(18px,2vw,28px);color:var(--white);margin:38px auto 0;max-width:940px;
    line-height:1.4;letter-spacing:-.03em;font-weight:400;
  }
  .hero .sub b{font-weight:600}
  .hero-cta{display:flex;gap:14px;margin-top:52px;justify-content:center;flex-wrap:nowrap}
  .trust{display:flex;align-items:center;gap:14px;margin-top:56px;font-size:17px;color:var(--muted);justify-content:center;flex-wrap:wrap;letter-spacing:-.03em}
  .trust .av{display:flex}
  .trust .av img{width:40px;height:40px;border-radius:50%;border:2px solid var(--bg);margin-left:-13px;object-fit:cover}
  .trust .av img:first-child{margin-left:0}
  .trust .t-short{display:none}

  /* Composição: chat sobrepondo o print (como no Figma) */
  .hero-stage{position:relative;margin-top:56px}
  /* luz azul contornando o chat e a tela */
  .hero-light{
    position:absolute;left:50%;top:-70px;transform:translateX(-50%);
    width:min(1240px,108vw);height:calc(100% + 90px);
    pointer-events:none;z-index:0;
  }
  .hero-light .haze{
    position:absolute;inset:0;
    background:radial-gradient(56% 62% at 50% 44%, rgba(57,114,253,.22), transparent 72%);
    filter:blur(14px);
    animation:hazeBreathe 9s ease-in-out infinite;
  }
  @keyframes hazeBreathe{0%,100%{opacity:.8}50%{opacity:1}}
  .hero-chat{
    position:relative;z-index:5;max-width:959px;margin:0 auto -96px;
    background:var(--chat-bg);border:1.5px solid var(--chat-line);
    border-radius:22px;padding:26px 28px 20px;text-align:left;
    box-shadow:0 40px 90px -20px rgba(0,0,0,.85), 0 0 90px -14px rgba(57,114,253,.5);
  }
  .hero-chat .q{font-family:'Inter',sans-serif;font-size:21px;color:var(--muted-2);min-height:28px;letter-spacing:-.01em}
  .hero-chat .q .cursor{display:inline-block;width:2px;height:1.1em;background:var(--muted-2);vertical-align:text-bottom;animation:cursorBlink 1s steps(1) infinite}
  @keyframes cursorBlink{50%{opacity:0}}
  .hero-chat .row{display:flex;align-items:center;justify-content:space-between;margin-top:22px}
  .hero-chat .icons{display:flex;gap:16px}
  .hero-chat .right{display:flex;align-items:center;gap:14px}
  .hero-chat .hint{font-family:'Inter',sans-serif;font-size:14px;color:var(--muted-2)}
  .hero-chat .send{
    width:36px;height:36px;border-radius:7px;background:#fff;border:none;cursor:pointer;
    display:grid;place-items:center;color:#04081F;transition:.15s;
  }
  .hero-chat .send:hover{transform:scale(1.06)}
  .hero-chat .send svg{width:18px;height:18px}

  .hero-mock{
    position:relative;z-index:1;max-width:1060px;margin:0 auto;
    border-radius:10px 10px 0 0;overflow:hidden;
    border:.6px solid #5C5D5E;border-bottom:none;
    max-height:420px;
    box-shadow:0 0 110px -16px rgba(57,114,253,.4);
  }
  .hero-mock::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(4,8,31,0) 18%,var(--bg) 78%);
  }
  .mock-toolbar{
    display:flex;align-items:center;gap:14px;height:44px;padding:0 18px;
    background:rgba(35,37,38,.85);backdrop-filter:blur(12px);
    box-shadow:0 .5px 0 0 #585858;position:relative;z-index:2;
  }
  .mock-dots{display:flex;gap:8px}
  .mock-dots span{width:12px;height:12px;border-radius:50%}
  .mock-dots span:nth-child(1){background:#FF5F57}
  .mock-dots span:nth-child(2){background:#FEBC2E}
  .mock-dots span:nth-child(3){background:#28C840}
  .mock-tab{
    flex:1;max-width:460px;height:28px;border-radius:6px;background:rgba(255,255,255,.14);
    display:flex;align-items:center;gap:7px;padding:0 10px;
    font-family:'Inter';font-size:12.5px;color:#fff;margin-left:14px;
  }
  .mock-tab svg{width:13px;height:13px;flex:none}
  .hero-mock .screen{display:block;width:100%;height:auto}

  /* ================= GLOW CARDS (borda que segue o mouse) ================= */
  .glow-card{position:relative}
  .glow-card::after{
    content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
    border:1.6px solid transparent;
    background:linear-gradient(calc(var(--start,0) * 1deg),
      #3972FD, #A364FF, #FA9800, #34D399, #5BC0BE) border-box;
    -webkit-mask:
      linear-gradient(#0000,#0000),
      conic-gradient(from calc((var(--start,0) - 60) * 1deg),
        #0000 0deg, #fff 60deg, #fff 100deg, #0000 160deg);
    -webkit-mask-clip:padding-box, border-box;
    -webkit-mask-composite:source-in;
    mask:
      linear-gradient(#0000,#0000) padding-box,
      conic-gradient(from calc((var(--start,0) - 60) * 1deg),
        #0000 0deg, #fff 60deg, #fff 100deg, #0000 160deg) border-box;
    mask-composite:intersect;
    opacity:var(--active,0);
    transition:opacity .45s ease;
  }

  /* ================= SEÇÕES ================= */
  section{position:relative}
  .pad{padding:88px 0}
  .center{text-align:center}
  .h2{font-size:clamp(30px,3.4vw,46px);margin-top:24px;font-weight:600;letter-spacing:-.03em;line-height:1.18;color:#E8ECF8}
  .lede{font-size:clamp(16px,1.6vw,21px);max-width:880px;margin:20px auto 0;color:var(--muted);line-height:1.65;letter-spacing:-.02em}


  /* stats — azul e roxo */
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
  .stat{text-align:center;position:relative}
  /* traço vertical azul esmaecido entre os números (desktop) */
  .stat + .stat::before{
    content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);
    width:2px;height:58px;border-radius:2px;background:rgba(57,114,253,.28);
  }
  .stat .n{
    font-family:'Maven Pro';font-size:clamp(56px,6.4vw,84px);font-weight:500;line-height:1;
    letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:#fff;
    text-shadow:0 0 56px rgba(123,92,255,.3);
  }
  .stat .l{font-size:14.5px;color:var(--muted);margin-top:14px;font-weight:500;max-width:220px;margin-left:auto;margin-right:auto;line-height:1.45}

  /* pain cards */
  .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:56px}
  .pain{
    background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
    border:1px solid var(--line-2);border-radius:18px;
    padding:24px 20px;text-align:left;transition:transform .25s;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  }
  .pain:hover{transform:translateY(-4px)}
  .pain .ic{
    width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:17px;
    background:rgba(57,114,253,.06);border:1px solid var(--line-2);
    margin-bottom:24px;color:#5E72A8;
    transition:color .3s ease, background .3s ease;
  }
  .pain:hover .ic{color:var(--pain-c,var(--blue));background:rgba(57,114,253,.1)}
  .pain h3{font-size:16px;font-weight:600;margin-bottom:8px;letter-spacing:-.02em;line-height:1.3}
  .pain p{font-size:13.5px;color:var(--muted);line-height:1.55}

  /* ================= A VIRADA ================= */
  .virada-stage{
    position:relative;margin:56px auto 0;max-width:820px;height:500px;
    display:grid;place-items:center;
  }
  .virada-stage::before{
    content:"";position:absolute;inset:50% auto auto 50%;
    width:660px;height:660px;transform:translate(-50%,-50%);
    background:radial-gradient(circle, rgba(57,114,253,.13) 0%, rgba(163,100,255,.07) 40%, transparent 70%);
    pointer-events:none;
  }
  .v-core{
    position:relative;width:176px;height:176px;border-radius:50%;
    background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.14), rgba(57,114,253,.14) 35%, var(--bg) 76%);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 0 90px rgba(57,114,253,.4), 0 0 60px rgba(163,100,255,.2), inset 0 0 50px rgba(57,114,253,.2);
    display:grid;place-items:center;z-index:5;
    animation:coreBreathe 5s ease-in-out infinite;
  }
  @keyframes coreBreathe{
    0%,100%{box-shadow:0 0 90px rgba(57,114,253,.4), 0 0 60px rgba(163,100,255,.2), inset 0 0 50px rgba(57,114,253,.2)}
    50%{box-shadow:0 0 130px rgba(57,114,253,.6), 0 0 90px rgba(163,100,255,.35), inset 0 0 70px rgba(57,114,253,.35)}
  }
  .v-core-inner{width:96px;height:96px;display:grid;place-items:center}
  .v-core-inner img{width:92px;height:auto;filter:drop-shadow(0 6px 24px rgba(0,0,0,.5))}
  .v-ring{position:absolute;border-radius:50%;pointer-events:none}
  .v-ring.r1{width:360px;height:360px;border:1px dashed rgba(255,255,255,.15);animation:vRot 28s linear infinite}
  .v-ring.r2{width:520px;height:520px;border:1px solid rgba(57,114,253,.1)}
  .v-ring.r3{width:680px;height:680px;border:1px solid rgba(163,100,255,.08)}
  @keyframes vRot{to{transform:rotate(360deg)}}
  .v-orbit{position:absolute;width:360px;height:360px;animation:vRot 28s linear infinite;z-index:4}
  .v-tool{
    position:absolute;width:88px;height:88px;border-radius:24px;
    background:linear-gradient(135deg,#101736,#080D24);
    border:1px solid rgba(255,255,255,.13);
    display:grid;place-items:center;
    box-shadow:0 14px 36px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.07);
    animation:vToolCounter 28s linear infinite;cursor:pointer;transition:border-color .25s;
  }
  .v-tool:hover{border-color:rgba(163,100,255,.6)}
  @keyframes vToolCounter{to{transform:rotate(-360deg)}}
  .v-tool img{width:44px;height:44px;object-fit:contain}
  .v-tool.t1{top:0;left:50%;margin-left:-44px;margin-top:-44px}
  .v-tool.t2{bottom:0;left:0;margin-left:-44px;margin-bottom:-44px}
  .v-tool.t3{bottom:0;right:0;margin-right:-44px;margin-bottom:-44px}
  /* satélites externos — apps menores ao redor do ecossistema */
  .v-orbit2{position:absolute;width:520px;height:520px;animation:vRotR 52s linear infinite;z-index:2}
  @keyframes vRotR{to{transform:rotate(-360deg)}}
  .v-sat{
    position:absolute;width:54px;height:54px;border-radius:16px;
    background:linear-gradient(135deg,#0F1633,#070C20);
    border:1px solid rgba(255,255,255,.1);
    display:grid;place-items:center;
    box-shadow:0 10px 26px rgba(0,0,0,.45);
    animation:vSatC 52s linear infinite;
  }
  @keyframes vSatC{to{transform:rotate(360deg)}}
  .v-sat img,.v-sat svg{width:26px;height:26px;object-fit:contain}
  .v-sat.s1{left:417px;top:49px}
  .v-sat.s2{left:417px;top:417px}
  .v-sat.s3{left:49px;top:417px}
  .v-sat.s4{left:49px;top:49px}
  .v-sat.s5{left:233px;top:21px}   /* topo, meio */
  .v-sat.s6{left:233px;top:445px}  /* base, meio */
  .virada-tag{
    margin-top:64px;font-family:'Maven Pro';font-size:clamp(30px,3.8vw,48px);
    color:var(--white);font-weight:500;letter-spacing:-.03em;
    display:flex;align-items:center;justify-content:center;gap:22px;
  }
  .virada-tag b{font-weight:700}
  .vt-item{white-space:nowrap}
  /* linha animada conectando MDC → Brain → Marvin (fluxo de dados) */
  .vt-line{position:relative;flex:0 0 auto;width:clamp(44px,6vw,84px);height:2px;border-radius:2px;overflow:hidden;
    background:color-mix(in srgb, var(--purple) 24%, transparent)}
  .vt-line i{position:absolute;inset:0;border-radius:2px;
    background:linear-gradient(90deg, transparent, var(--blue), var(--purple), transparent);
    transform:translateX(-100%);animation:vtFlow 2.8s ease-in-out infinite}
  .vt-line:nth-of-type(4) i{animation-delay:1.4s}
  @keyframes vtFlow{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
  @keyframes vtFlowV{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}

  /* ================= TRÊS CAMADAS ================= */
  .layers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
  .layer-card{
    border-radius:22px;padding:0 0 30px;position:relative;overflow:hidden;
    background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
    border:1px solid var(--line-2);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 30px 60px -40px rgba(0,0,0,.7);
    transition:transform .3s ease;text-align:left;
    display:flex;flex-direction:column;
  }
  .layer-card:hover{transform:translateY(-6px)}
  .layer-card .accent{position:absolute;top:0;left:0;right:0;height:3px;z-index:2}
  .layer-card.l-mdc .accent,.layer-card.l-brain .accent{background:linear-gradient(90deg,transparent,rgba(163,100,255,.55),transparent)}
  .layer-card.l-marvin .accent{background:var(--hub-gradient);opacity:.8}
  .layer-card .stage{
    margin:18px 18px 24px;height:250px;border-radius:14px;
    background:#070B1E;border:1px solid var(--line-2);
    position:relative;overflow:hidden;
  }
  .layer-card .body{padding:0 28px;display:flex;flex-direction:column;flex:1}
  .layer-card h3{font-size:25px;font-weight:600;letter-spacing:-.025em;margin-bottom:14px;line-height:1.25}
  .layer-card p{font-size:15px;color:var(--muted);line-height:1.6;flex:1}
  .layer-pill{
    display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
    margin-top:22px;padding:7px 16px;border-radius:99px;
    font-family:'Inter';font-size:12.5px;font-weight:600;
    background:rgba(163,100,255,.1);border:1px solid rgba(163,100,255,.35);color:var(--purple-soft);
  }
  .layer-pill img{width:15px;height:15px;object-fit:contain}
  .layer-pill.marvin{
    color:#fff;border:1px solid transparent;
    background:
      linear-gradient(var(--card),var(--card)) padding-box,
      var(--hub-gradient) border-box;
  }

  /* MDC — print de tela (janela com chrome) */
  .mdc-window{position:absolute;inset:14px;display:flex;flex-direction:column;border-radius:10px;overflow:hidden;border:1px solid rgba(163,100,255,.2);background:#0A0E22;box-shadow:0 18px 40px rgba(0,0,0,.5)}
  .mdc-wbar{display:flex;align-items:center;gap:7px;height:30px;padding:0 11px;background:rgba(255,255,255,.04);border-bottom:1px solid var(--line-2);flex:none}
  .mdc-wbar .d{width:8px;height:8px;border-radius:50%}
  .mdc-wbar .d:nth-child(1){background:#FF5F57}.mdc-wbar .d:nth-child(2){background:#FEBC2E}.mdc-wbar .d:nth-child(3){background:#28C840}
  .mdc-wbar .t{font-family:'Inter';font-size:10px;color:var(--muted-2);margin-left:6px}
  .mdc-wbody{flex:1;padding:11px;display:flex;flex-direction:column;gap:7px;overflow:hidden}
  .mdc-conn{
    display:flex;align-items:center;gap:9px;padding:7px 10px;
    background:rgba(255,255,255,.03);border:1px solid var(--line-2);border-radius:8px;
    opacity:0;transform:translateY(8px);
    transition:opacity .4s ease-out, transform .4s ease-out, border-color .4s;
  }
  .mdc-conn.show{opacity:1;transform:none}
  .mdc-conn.done{border-color:rgba(52,211,153,.25)}
  .mdc-conn .lg{
    width:24px;height:24px;border-radius:6px;display:grid;place-items:center;flex:none;
    font-family:'Inter';font-size:9px;font-weight:700;color:#fff;
  }
  .mdc-conn .nm{font-family:'Inter';font-size:11px;font-weight:600;color:#fff}
  .mdc-conn .tp{font-size:9.5px;color:var(--muted);margin-top:1px}
  .mdc-conn .st{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-family:'Inter';font-size:9px;font-weight:600;color:var(--muted-2);transition:color .3s}
  .mdc-conn .st svg{width:11px;height:11px;flex:none}
  .mdc-conn .ic-spin{animation:mdcSpin 1s linear infinite;color:var(--purple-soft)}
  .mdc-conn .ic-ok{display:none;color:var(--green)}
  .mdc-conn.done .st{color:var(--green)}
  .mdc-conn.done .ic-spin{display:none}
  .mdc-conn.done .ic-ok{display:block;animation:okPop .35s cubic-bezier(.34,1.56,.64,1)}
  @keyframes mdcSpin{to{transform:rotate(360deg)}}
  @keyframes okPop{from{transform:scale(0)}to{transform:scale(1)}}
  @keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.35}}
  .mdc-sync{display:flex;align-items:center;gap:7px;margin-top:auto;padding:2px 4px;font-family:'Inter';font-size:9.5px;color:var(--purple-soft);font-weight:600}
  .mdc-sync .bar{flex:1;height:3px;border-radius:3px;background:rgba(163,100,255,.15);overflow:hidden}
  .mdc-sync .bar i{display:block;height:100%;width:40%;border-radius:3px;background:var(--purple);animation:syncMove 2.4s ease-in-out infinite}
  @keyframes syncMove{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}

  /* Brain — grafo de conhecimento vivo (canvas com simulação de força) */
  .brain-net{width:100%;height:100%;display:block}
  .l-brain .stage{transition:transform .5s ease;cursor:pointer}
  .l-brain .stage:hover{transform:scale(1.02)}
  .brain-cap{
    position:absolute;left:14px;bottom:10px;
    font-family:'Inter',monospace;font-size:9px;letter-spacing:.08em;
    color:var(--muted);opacity:.8;
  }

  /* Marvin mini chat */
  .marvin-chat{padding:14px;display:flex;flex-direction:column;gap:9px;height:100%;overflow:hidden}
  .mc-row{display:flex;gap:8px;align-items:flex-end;max-width:92%;opacity:0;animation:mcIn .5s forwards}
  .mc-row.user{align-self:flex-end;animation-delay:.3s}
  .mc-row.bot{align-self:flex-start;animation-delay:1.2s}
  .mc-row.user2{align-self:flex-end;animation-delay:3.2s}
  .mc-ava{width:24px;height:24px;flex:none;display:grid;place-items:center}
  .mc-ava img{width:22px;height:auto}
  .mc-msg{font-family:'Inter';font-size:11.5px;line-height:1.45;padding:8px 12px;border-radius:13px}
  .mc-row.user .mc-msg,.mc-row.user2 .mc-msg{background:#2A2D36;color:#fff;border-bottom-right-radius:4px;font-weight:500}
  .mc-row.bot .mc-msg{background:rgba(255,255,255,.05);border:1px solid var(--line-2);border-bottom-left-radius:4px;color:rgba(255,255,255,.85)}
  .mc-row.bot .mc-msg b{color:var(--purple-soft)}
  .mc-typing{align-self:flex-start;display:flex;gap:8px;align-items:flex-end;opacity:0;animation:mcType 1s forwards;animation-delay:4s}
  .mc-typing .bub{display:flex;gap:3px;padding:9px 12px;background:rgba(255,255,255,.05);border:1px solid var(--line-2);border-radius:13px;border-bottom-left-radius:4px}
  .mc-typing .bub span{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.6);animation:blink 1.2s infinite}
  .mc-typing .bub span:nth-child(2){animation-delay:.2s}.mc-typing .bub span:nth-child(3){animation-delay:.4s}
  @keyframes mcIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  @keyframes mcType{from{opacity:0}to{opacity:1}}
  @keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}

  /* ================= MARVIN EM AÇÃO — telas gravadas ================= */
  .demo{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:60px}
  .demo-card{
    background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
    border:1px solid var(--line-2);border-radius:22px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
    padding:28px;display:flex;flex-direction:column;gap:16px;text-align:left;
  }
  .demo-head h3{font-size:20px;font-weight:600;letter-spacing:-.02em;margin-bottom:6px}
  .demo-head p{font-size:14px;color:var(--muted);line-height:1.5}
  .demo-tagline{
    display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
    font-family:'Inter';font-size:10.5px;color:var(--orange);font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;
    padding:4px 11px;border-radius:99px;background:rgba(250,152,0,.08);border:1px solid rgba(250,152,0,.3);
  }
  /* janela "tela gravada" */
  .demo-screen{
    border-radius:12px;overflow:hidden;border:1px solid var(--line);
    background:#0A0E22;
    box-shadow:0 20px 50px rgba(0,0,0,.5), 0 0 70px -24px rgba(57,114,253,.3);
  }
  .demo-card:nth-child(2) .demo-screen{box-shadow:0 20px 50px rgba(0,0,0,.5), 0 0 70px -24px rgba(163,100,255,.3)}
  .demo-screen .wbar{display:flex;align-items:center;gap:7px;height:32px;padding:0 12px;background:rgba(255,255,255,.04);border-bottom:1px solid var(--line-2)}
  .demo-screen .wbar .d{width:8px;height:8px;border-radius:50%}
  .demo-screen .wbar .d:nth-child(1){background:#FF5F57}.demo-screen .wbar .d:nth-child(2){background:#FEBC2E}.demo-screen .wbar .d:nth-child(3){background:#28C840}
  .demo-screen .wbar .t{font-family:'Inter';font-size:10.5px;color:var(--muted-2);margin-left:6px}
  .demo-screen .rec{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-family:'Inter';font-size:9.5px;font-weight:700;color:#FF5F57;letter-spacing:.1em}
  .demo-screen .rec::before{content:"";width:7px;height:7px;border-radius:50%;background:#FF5F57;animation:pulseDot 1.2s ease-in-out infinite}
  .demo-screen .sbody{
    padding:20px;display:flex;flex-direction:column;gap:13px;min-height:230px;
    justify-content:center;
    transform:scale(1);transform-origin:60% 40%;
  }
  .demo-card.in .demo-screen .sbody{animation:slowZoom 9s ease-in-out forwards}
  @keyframes slowZoom{0%{transform:scale(1)}35%{transform:scale(1.06)}75%{transform:scale(1.06)}100%{transform:scale(1)}}
  .ds-q{
    align-self:flex-end;background:var(--blue);color:#fff;
    padding:11px 16px;border-radius:14px;border-bottom-right-radius:5px;
    font-family:'Inter';font-size:13.5px;font-weight:500;max-width:85%;
    opacity:0;min-height:20px;
  }
  .demo-card.in .ds-q{opacity:1}
  .ds-q .tcursor{display:inline-block;width:1.5px;height:1em;background:rgba(255,255,255,.8);vertical-align:text-bottom;animation:cursorBlink .8s steps(1) infinite}
  .ds-a{display:flex;gap:10px;align-self:flex-start;max-width:94%;opacity:0;transform:translateY(8px)}
  .demo-card.in .ds-a{animation:dmIn .6s forwards;animation-delay:var(--ad,3s)}
  .ds-a .mava{flex:none;width:32px;height:32px;display:grid;place-items:center}
  .ds-a .mava img{width:30px;height:auto}
  .ds-a .txt{
    background:rgba(255,255,255,.04);border:1px solid var(--line);
    padding:13px 16px;border-radius:14px;border-bottom-left-radius:5px;
    font-family:'Inter';font-size:13px;color:rgba(255,255,255,.85);line-height:1.6;
  }
  .ds-a .txt b{color:#fff;font-weight:600}
  .ds-typing{display:flex;gap:10px;align-self:flex-start;align-items:flex-end;opacity:0;margin-left:0}
  .demo-card.in .ds-typing{animation:typingShow 0s forwards, typingHide 0s forwards;animation-delay:var(--ts,2.2s), var(--th,3s)}
  .ds-typing .mava{flex:none;width:32px;height:32px;display:grid;place-items:center}
  .ds-typing .mava img{width:30px;height:auto}
  .ds-typing .bub{display:flex;gap:5px;padding:13px 16px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;border-bottom-left-radius:5px}
  .ds-typing .bub span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);animation:blink 1.2s infinite}
  .ds-typing .bub span:nth-child(2){animation-delay:.2s}.ds-typing .bub span:nth-child(3){animation-delay:.4s}
  @keyframes dmIn{to{opacity:1;transform:none}}
  @keyframes typingShow{to{opacity:1}}
  @keyframes typingHide{to{opacity:0;visibility:hidden}}

  /* ================= APPS ================= */
  /* desktop: grid multi-linha; vira carrossel (peek + snap) só ≤900px */
  .hscroll{padding:8px 0 14px;margin-top:56px}
  .htrack{display:grid;gap:16px;padding:4px}
  #appsScroll .htrack{grid-template-columns:repeat(4,1fr)}
  #whyScroll .htrack{grid-template-columns:repeat(3,1fr)}
  .htrack > *{scroll-snap-align:start}
  /* dots de paginação (carrosséis mobile) */
  .cdots{display:none;justify-content:center;align-items:center;gap:9px;margin-top:20px}
  .cdots button{
    width:9px;height:9px;border-radius:99px;border:none;padding:0;cursor:pointer;
    background:rgba(255,255,255,.25);transition:width .3s ease, background .3s ease;
  }
  .cdots button.on{
    width:26px;
    background:linear-gradient(90deg,var(--blue),var(--purple));
    box-shadow:0 0 12px rgba(123,92,255,.5);
  }
  .app{
    position:relative;
    background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
    border:1px solid var(--line-2);border-radius:18px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
    padding:24px 22px;transition:transform .25s;display:flex;flex-direction:column;gap:11px;text-align:left;overflow:hidden;
  }
  .app:hover{transform:translateY(-5px)}
  .app .ic{
    width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:19px;
    background:rgba(57,114,253,.06);
    border:1px solid var(--line);color:#5E72A8;
    transition:color .3s ease, background .3s ease;
  }
  .app:hover .ic{
    color:var(--app-c);
    background:linear-gradient(135deg,var(--app-bg1,rgba(57,114,253,.18)),rgba(255,255,255,.03));
  }
  .app .ic img{width:25px;height:25px;object-fit:contain}
  .app h3{font-size:16.5px;font-weight:600;letter-spacing:-.02em}
  .app p{font-size:13.5px;color:var(--muted);line-height:1.6;flex:1}
  .app .cta{
    display:inline-flex;align-items:center;gap:5px;margin-top:6px;
    font-family:'Inter';font-weight:600;font-size:12.5px;color:#5E72A8;
    transition:color .3s ease;
  }
  .app:hover .cta{color:var(--app-c,var(--blue))}
  .app .cta .arr{transition:transform .2s ease}
  .app:hover .cta .arr{transform:translateX(4px)}
  .app-fin{--app-c:var(--teal);--app-bg1:rgba(91,192,190,.16)}
  .app-crm{--app-c:var(--blue);--app-bg1:rgba(57,114,253,.18)}
  .app-cs{--app-c:var(--purple);--app-bg1:rgba(163,100,255,.18)}
  .app-tar{--app-c:var(--orange);--app-bg1:rgba(250,152,0,.15)}
  .app-gen{--app-c:var(--green);--app-bg1:rgba(52,211,153,.15)}
  .app-reu{--app-c:#C084FC;--app-bg1:rgba(192,132,252,.15)}
  .app-wpp{--app-c:#4ADE80;--app-bg1:rgba(74,222,128,.15)}
  .app-ref{--app-c:var(--pink);--app-bg1:rgba(244,114,182,.15)}
  .apps-note{text-align:center;margin-top:44px;font-size:15px;color:var(--muted)}
  .apps-note b{color:rgba(255,255,255,.9)}

  /* ================= CASOS DE USO — grid desktop / carrossel mobile ================= */
  .cases-scroll{padding:18px 0 8px;margin-top:48px}
  .case-track{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:4px}
  .case-card{
    scroll-snap-align:start;
    background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
    border:1px solid var(--line-2);border-radius:20px;padding:24px;
    display:flex;flex-direction:column;gap:12px;min-height:286px;text-align:left;
    transition:transform .25s;
  }
  .case-card:hover{transform:translateY(-4px)}
  .cc-top{display:flex;align-items:center;justify-content:space-between}
  .cc-ic{width:40px;height:40px;border-radius:11px;background:rgba(57,114,253,.06);border:1px solid var(--line-2);display:grid;place-items:center;color:#5E72A8;transition:color .3s ease}
  .case-card:hover .cc-ic{color:var(--blue)}
  .cc-ic svg{width:20px;height:20px}
  .cc-cat{font-family:'Inter';font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
  .case-card h3{font-size:18.5px;font-weight:600;letter-spacing:-.02em;line-height:1.3}
  .case-card p{font-size:14px;color:var(--muted);line-height:1.6;flex:1}
  /* horas economizadas (count-up one-shot) + % de impacto pequena ao lado */
  .cc-hours{margin-top:4px;padding-top:16px;border-top:1px solid var(--line-2)}
  .cc-hours .hrow{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
  .cc-hours .hh{
    font-family:'Maven Pro';font-size:36px;font-weight:700;line-height:1;color:#fff;
    letter-spacing:-.03em;font-variant-numeric:tabular-nums;
    text-shadow:0 0 36px rgba(123,92,255,.35);
  }
  .cc-hours .hpct{
    font-family:'Inter';font-size:10px;font-weight:700;white-space:nowrap;
    color:var(--purple-soft);background:rgba(163,100,255,.1);
    border:1px solid rgba(163,100,255,.3);padding:3px 9px;border-radius:99px;
  }
  .cc-hours .hlbl{
    font-family:'Inter';font-size:10px;font-weight:600;letter-spacing:.08em;
    text-transform:uppercase;color:var(--muted);margin-top:6px;
  }
  .cases-foot{text-align:center;margin-top:26px;font-size:13px;color:var(--muted)}

  /* ================= LEAD AO LUCRO — jornada conectada ================= */
  .journey{
    display:flex;justify-content:center;align-items:flex-start;
    gap:0;margin-top:64px;position:relative;flex-wrap:nowrap;overflow-x:auto;
    padding:10px 4px 4px;scrollbar-width:none;
  }
  .journey::-webkit-scrollbar{display:none}
  .j-step{--jc:var(--blue);display:flex;flex-direction:column;align-items:center;gap:13px;flex:0 0 auto;width:138px;position:relative}
  .j-step .box{
    width:92px;height:92px;border-radius:22px;
    background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
    border:1px solid var(--line);display:grid;place-items:center;
    transition:border-color .5s, opacity .5s;
    opacity:.4;
  }
  .j-step .box svg{width:40px;height:40px;color:var(--jc);transition:filter .6s;filter:grayscale(1) brightness(.5)}
  .j-step h4{font-size:16px;font-weight:600;opacity:.4;transition:opacity .5s}
  .j-step small{font-size:13px;color:var(--muted);text-align:center;line-height:1.4;margin-top:-6px;opacity:.4;transition:opacity .5s}
  .j-step.lit .box{
    opacity:1;
    border-color:rgba(255,255,255,.18);
    animation:jPop .55s ease;
  }
  @keyframes jPop{0%{transform:scale(.94)}55%{transform:scale(1.06)}100%{transform:scale(1)}}
  .j-step.lit .box svg{filter:none}
  .j-step.lit h4,.j-step.lit small{opacity:1}
  /* conector */
  .j-link{
    flex:0 0 52px;height:2px;margin-top:45px;position:relative;
    background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;
  }
  .j-link i{
    position:absolute;inset:0;border-radius:3px;
    background:linear-gradient(90deg, color-mix(in srgb, var(--jc1,var(--blue)) 55%, transparent), color-mix(in srgb, var(--jc2,var(--purple)) 55%, transparent));
    transform:scaleX(0);transform-origin:left;
    transition:transform .55s ease;
  }
  .j-link.lit i{transform:scaleX(1)}
  .j-link::after{
    content:"";position:absolute;top:50%;left:0;width:8px;height:8px;border-radius:50%;
    background:#fff;box-shadow:0 0 14px var(--jc2,var(--purple));
    transform:translate(-10px,-50%);opacity:0;
  }
  .j-link.pulse::after{animation:linkPulse 0.55s ease forwards}
  @keyframes linkPulse{0%{opacity:.9;transform:translate(0,-50%)}100%{opacity:0;transform:translate(52px,-50%)}}
  @keyframes linkPulseV{0%{opacity:.9;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,44px)}}

  .qgrid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
    max-width:1180px;margin:64px auto 0;text-align:left;
  }
  .q-item{
    display:flex;flex-direction:column;gap:12px;align-items:flex-start;
    background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
    border:1px solid var(--line-2);border-radius:18px;padding:22px 18px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
    transition:transform .25s ease;
  }
  .q-item:hover{transform:translateY(-4px)}
  .q-item .qic{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:rgba(57,114,253,.06);border:1px solid var(--line-2);color:#5E72A8;transition:color .3s ease}
  .q-item:hover .qic{color:var(--blue)}
  .q-item .qic svg{width:19px;height:19px}
  .q-item p{font-size:13.5px;color:var(--muted);line-height:1.55;letter-spacing:-.01em}
  .q-item p b{color:rgba(255,255,255,.85);font-weight:600}
  .journey-note{margin-top:64px;font-size:clamp(15px,1.6vw,19px);color:var(--muted);max-width:780px;margin-left:auto;margin-right:auto;line-height:1.6}

  /* ================= POR QUE MARVEE ================= */
  .why-head{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;text-align:left}
  .why-head .h2{margin-top:24px}
  .why-head .lede{margin:0;text-align:left}
  .why-card{
    --wc:var(--teal);
    background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
    border:1px solid var(--line-2);border-radius:18px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
    padding:28px 24px;text-align:left;transition:transform .25s;
  }
  .why-card:hover{transform:translateY(-4px)}
  .why-card .ic{
    width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
    background:rgba(57,114,253,.06);
    border:1px solid var(--line-2);
    color:#5E72A8;margin-bottom:32px;
    transition:color .3s ease, background .3s ease, border-color .3s ease;
  }
  .why-card:hover .ic{
    color:var(--wc);
    background:color-mix(in srgb, var(--wc) 12%, transparent);
    border-color:color-mix(in srgb, var(--wc) 25%, transparent);
  }
  .why-card .ic svg{width:20px;height:20px}
  .why-card h3{font-size:17px;font-weight:600;margin-bottom:10px;letter-spacing:-.02em}
  .why-card p{font-size:14px;color:var(--muted);line-height:1.6}

  /* ================= PRICING ================= */
  .price-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:880px;margin:56px auto 0;align-items:stretch}
  .price-card{
    position:relative;border-radius:18px;padding:26px 26px 24px;text-align:left;
    background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
    border:1px solid var(--line);
    box-shadow:0 40px 90px -40px rgba(0,0,0,.6);
    display:flex;flex-direction:column;transition:transform .25s;
  }
  .price-card:hover{transform:translateY(-4px)}
  .price-card.featured{
    border-color:rgba(163,100,255,.45);
    background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.02)) !important;
    box-shadow:0 0 0 1px rgba(163,100,255,.18), 0 40px 90px -40px rgba(163,100,255,.25) !important;
  }
  .price-card:not(.featured){opacity:.8}
  .price-card:not(.featured):hover{opacity:1}
  .pc-tag{
    align-self:flex-start;
    font-family:'Inter';font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    padding:5px 12px;border-radius:99px;background:linear-gradient(92deg,var(--blue),var(--purple));color:#fff;white-space:nowrap;
    margin-bottom:16px;
  }
  .pc-tag.ghost{background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--muted-2)}
  .pc-price{display:flex;align-items:baseline;justify-content:flex-start;gap:5px;flex-wrap:wrap}
  .pc-cur{font-family:'Maven Pro';font-size:16px;font-weight:600;color:rgba(255,255,255,.8)}
  .pc-val{font-family:'Maven Pro';font-size:38px;font-weight:700;line-height:1;color:#fff;letter-spacing:-.03em}
  .pc-old{font-family:'Maven Pro';font-size:15px;color:var(--muted);text-decoration:line-through;font-weight:500;margin-right:6px}
  .pc-per{font-family:'Maven Pro';font-size:13.5px;color:var(--muted);font-weight:500}
  .pc-name{font-family:'Maven Pro';font-size:22px;font-weight:700;color:#fff;letter-spacing:-.02em;margin-bottom:6px}
  .pc-desc{font-size:13.5px;color:var(--muted);line-height:1.5;margin-bottom:18px}
  .ph-flag{font-size:9.5px !important;
    display:inline-block;font-family:'Inter';font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    color:var(--orange);border:1px solid rgba(250,152,0,.4);background:rgba(250,152,0,.07);
    padding:3px 9px;border-radius:6px;margin-top:14px;
  }
  .pc-list{margin:20px 0 0;display:grid;gap:13px;flex:1;text-align:left}
  .pc-list li{display:flex;gap:11px;align-items:flex-start;list-style:none;font-size:14px;color:var(--muted);line-height:1.5;text-wrap:pretty}
  .pc-list .ck{
    flex:none;width:19px;height:19px;border-radius:50%;
    border:1.5px solid rgba(255,255,255,.16);
    display:grid;place-items:center;font-size:10px;font-weight:800;margin-top:1px;
    color:#5E72A8;transition:color .3s ease, border-color .3s ease;
  }
  .price-card:hover .ck{color:var(--purple);border-color:rgba(163,100,255,.4)}
  .price-card .btn{margin-top:24px;width:100%;font-size:15px;padding:13px}
  .pc-foot{font-size:11.5px;color:var(--muted);margin-top:12px;text-align:left}

  /* ----- Toggle Standard | Pro ----- */
  .plan-toggle{
    position:relative;display:inline-flex;gap:4px;margin:48px auto 0;padding:5px;
    background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:99px;
  }
  .plan-toggle-thumb{
    position:absolute;top:5px;left:5px;bottom:5px;width:calc(50% - 5px);border-radius:99px;
    background:linear-gradient(92deg,var(--blue),var(--purple));
    box-shadow:0 8px 24px -8px rgba(163,100,255,.5);
    transition:transform .32s cubic-bezier(.4,0,.2,1);z-index:0;
  }
  .plan-toggle[data-plan="standard"] .plan-toggle-thumb{transform:translateX(100%)}
  .plan-toggle-btn{
    position:relative;z-index:1;border:0;background:none;cursor:pointer;
    font-family:'Maven Pro';font-size:14.5px;font-weight:600;letter-spacing:.01em;
    color:var(--muted);padding:9px 30px;border-radius:99px;transition:color .25s;min-width:118px;
  }
  .plan-toggle-btn.on{color:#fff}

  /* ----- Stage de card único (crossfade) ----- */
  .plan-stage{position:relative;max-width:440px;margin:28px auto 0}
  .plan-pane{
    width:100%;opacity:0;transform:translateY(10px) scale(.985);
    pointer-events:none;transition:opacity .3s ease,transform .3s ease;
  }
  .plan-pane:not(.is-active){position:absolute;inset:0;height:100%}
  .plan-pane.is-active{position:relative;opacity:1;transform:none;pointer-events:auto}

  /* ----- Topo do card centralizado + maior ----- */
  .plan-pane .pc-tag{
    align-self:center;margin:0 0 18px;
    display:inline-flex;align-items:center;gap:7px;
    background:rgba(255,255,255,.05);border:1px solid var(--line);color:rgba(255,255,255,.82);
  }
  .plan-pane .pc-tag::before{
    content:"";width:6px;height:6px;border-radius:50%;background:var(--purple);
  }
  .plan-pane[data-plan="standard"] .pc-tag::before{background:var(--blue)}
  .plan-pane .pc-name{text-align:center;font-size:30px;margin-bottom:8px}
  .plan-pane .pc-desc{text-align:center;max-width:340px;margin-left:auto;margin-right:auto;margin-bottom:20px;text-wrap:balance}
  .plan-pane .pc-price{justify-content:center;align-items:baseline;margin-bottom:4px}
  .plan-pane .pc-cur{font-size:20px}
  .plan-pane .pc-val{font-size:54px}
  .plan-pane .pc-per{font-size:15px}

  /* ----- Caixa de destaque do Pro ----- */
  .pc-hl{
    display:flex;align-items:center;gap:12px;margin:22px 0 4px;padding:14px 16px;border-radius:14px;
    background:linear-gradient(92deg,rgba(57,114,253,.16),rgba(163,100,255,.16));
    border:1px solid rgba(163,100,255,.4);
    box-shadow:0 0 0 1px rgba(163,100,255,.08),0 18px 40px -28px rgba(163,100,255,.6);
  }
  .pc-hl-ic{
    flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
    background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff;
  }
  .pc-hl-ic svg{width:18px;height:18px}
  .pc-hl-text{font-family:'Maven Pro';font-size:14px;font-weight:600;line-height:1.35;color:#fff;text-align:left;text-wrap:balance}

  /* ----- CTA mais estreita e centralizada ----- */
  .plan-pane .btn{width:auto;align-self:center;min-width:230px;padding:13px 30px}
  .plan-pane .pc-foot{text-align:center}

  /* ================= FAQ ================= */
  .faq{max-width:960px;margin:56px auto 0;border-top:1px solid var(--line)}
  .faq-item{border-bottom:1px solid var(--line)}
  .faq-q{
    width:100%;text-align:left;background:none;border:none;
    padding:34px 4px;font-family:'Maven Pro';font-weight:400;font-size:clamp(18px,2vw,23px);
    color:var(--white);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;
    letter-spacing:-.02em;
  }
  .faq-q .pm{
    flex:none;font-size:26px;font-weight:300;line-height:1;color:#5E72A8;
    transition:transform .25s, color .3s ease;
  }
  .faq-item:hover .pm,.faq-item.open .pm{color:var(--purple)}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;color:var(--muted);font-size:16px}
  .faq-a p{padding:0 4px 30px;line-height:1.6;max-width:820px}
  .faq-item.open .faq-a{max-height:280px}
  .faq-item.open .pm{transform:rotate(45deg)}

  /* ================= FINAL ================= */
  .final{text-align:center;padding:120px 0 0;position:relative;overflow:hidden}
  .final::before{
    content:"";position:absolute;inset:0;
    background:radial-gradient(700px 420px at 44% 60%,rgba(57,114,253,.12),transparent 60%),
               radial-gradient(600px 380px at 60% 50%,rgba(163,100,255,.1),transparent 60%);
  }
  .final h2{font-size:clamp(34px,4.4vw,56px);max-width:840px;margin:0 auto;font-weight:600;letter-spacing:-.03em;line-height:1.15;position:relative}
  .final .btn{margin-top:44px;position:relative}

  /* carrossel de ferramentas em chips glass */
  .final-content{position:relative;z-index:2}
  .tools-marquee{
    position:relative;max-width:920px;margin:84px auto 0;overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  }
  .tm-track{display:flex;width:max-content;animation:tmMove 30s linear infinite}
  @keyframes tmMove{to{transform:translateX(-50%)}}
  .tm-group{display:flex;align-items:center;gap:56px;padding-right:56px}
  .tm-item{display:grid;place-items:center}
  .tm-item .chipi{
    width:72px;height:72px;border-radius:20px;display:grid;place-items:center;
    background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 14px 34px rgba(0,0,0,.45);
    transition:transform .25s ease, border-color .25s ease;
  }
  .tm-item .chipi:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.25)}
  .tm-item img,.tm-item svg{width:36px;height:36px;object-fit:contain}
  .f-star{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.3;animation:starTw 3s ease-in-out infinite;pointer-events:none}
  @keyframes starTw{0%,100%{opacity:.1}50%{opacity:.75}}
  /* arco/horizonte com brilho (modelo sparkles) */
  .final-arc{
    position:relative;height:300px;margin-top:-10px;pointer-events:none;
    -webkit-mask-image:radial-gradient(58% 60% at 50% 40%, #000 35%, transparent 80%);
            mask-image:radial-gradient(58% 60% at 50% 40%, #000 35%, transparent 80%);
  }
  .final-arc .aglow{
    position:absolute;inset:0;
    background:radial-gradient(circle at 50% 105%, rgba(131,80,232,.55), transparent 68%);
    opacity:.5;
  }
  .final-arc .planet{
    position:absolute;left:-50%;top:52%;width:200%;aspect-ratio:1/0.7;
    border-radius:100%;
    border-top:1px solid rgba(255,255,255,.25);
    background:var(--bg);
    box-shadow:0 -30px 80px -20px rgba(131,80,232,.25);
  }

  footer{border-top:1px solid var(--line-2);padding:38px 0;color:var(--muted);font-size:14px}
  .foot-in{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}

  .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:none}

  /* quebras de linha responsivas: .br-m só no mobile, .br-d só no desktop */
  .br-m{display:none}

  /* animações pausadas fora da viewport */
  section:not(.in-view) *{animation-play-state:paused !important}

  /* palavra destacada com cor ciclando (cores do Hub) */
  .hl-anim{animation:hlFade 18s ease-in-out infinite}
  @keyframes hlFade{
    0%,100%{color:inherit}
    8%{color:#3972FD}
    18%{color:inherit}
    28%{color:#A364FF}
    38%{color:inherit}
    48%{color:#FA9800}
    58%{color:inherit}
    68%{color:#34D399}
    78%{color:inherit}
    88%{color:#5BC0BE}
  }

  /* glass (fusionai) */
  .pain,.app,.why-card,.layer-card,.demo-card,.price-card,.case-card{
    backdrop-filter:blur(20px) saturate(150%);
    -webkit-backdrop-filter:blur(20px) saturate(150%);
    border-color:rgba(255,255,255,.1);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 24px 60px -36px rgba(0,0,0,.7);
  }
  .pain:hover,.app:hover,.why-card:hover,.layer-card:hover,.demo-card:hover,.price-card:hover,.case-card:hover{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 24px 60px -36px rgba(0,0,0,.7),
               0 0 38px -12px rgba(123,92,255,.3);
  }

  /* acessibilidade */
  a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
    outline:2px solid rgba(255,255,255,.85);outline-offset:3px;border-radius:10px;
  }
  ::selection{background:rgba(163,100,255,.4);color:#fff}
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation-duration:.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.01ms !important;
      scroll-behavior:auto !important;
    }
  }

  /* ================= RESPONSIVE ================= */
  @media(max-width:1100px) and (min-width:901px){
    #appsScroll .htrack,.case-track{grid-template-columns:repeat(3,1fr)}
    #whyScroll .htrack{grid-template-columns:repeat(2,1fr)}
  }
  /* carrosséis: comportamento exclusivo de mobile/tablet */
  @media(max-width:900px){
    .hscroll,.cases-scroll{
      overflow-x:auto;scroll-snap-type:x mandatory;
      cursor:grab;scrollbar-width:none;user-select:none;-webkit-overflow-scrolling:touch;
    }
    .hscroll::-webkit-scrollbar,.cases-scroll::-webkit-scrollbar{display:none}
    .hscroll.drag,.cases-scroll.drag{cursor:grabbing}
    .htrack,.case-track{display:flex;width:max-content}
    .htrack .app{flex:0 0 272px}
    .htrack .why-card{flex:0 0 332px}
    .case-card{flex:0 0 300px}
    .cdots:not(.cdots-price){display:flex}
  }
  @media(max-width:1000px){
    .layers{grid-template-columns:1fr;gap:18px}
    .price-grid{grid-template-columns:1fr;gap:36px}
    .why-head{grid-template-columns:1fr}
    .qgrid{grid-template-columns:repeat(2,1fr);gap:12px}
  }
  @media(max-width:880px){
    .grid4{grid-template-columns:repeat(2,1fr)}
    .demo{grid-template-columns:1fr}
    .stats{grid-template-columns:1fr;gap:38px}
    .pad{padding:80px 0}
    .virada-stage{height:430px}
    .v-ring.r3{width:500px;height:500px}
    .v-ring.r2{width:400px;height:400px}
    .v-ring.r1,.v-orbit{width:290px;height:290px}
    .v-tool{width:72px;height:72px;border-radius:18px}
    .v-tool img{width:36px;height:36px}
    .v-tool.t1{margin-left:-36px;margin-top:-36px}
    .v-tool.t2{margin-left:-36px;margin-bottom:-36px}
    .v-tool.t3{margin-right:-36px;margin-bottom:-36px}
    .v-orbit2{width:400px;height:400px}
    .v-sat{width:46px;height:46px;border-radius:13px}
    .v-sat img,.v-sat svg{width:22px;height:22px}
    .v-sat.s1{left:318px;top:36px}
    .v-sat.s2{left:318px;top:318px}
    .v-sat.s3{left:36px;top:318px}
    .v-sat.s4{left:36px;top:36px}
    .v-sat.s5{left:177px;top:14px}
    .v-sat.s6{left:177px;top:340px}
    .hero-chat{margin-bottom:-60px}
    .journey{justify-content:flex-start}
    .tools-marquee{margin-top:60px}
    .tm-group{gap:36px;padding-right:36px}
    .tm-item .chipi{width:60px;height:60px;border-radius:16px}
    .tm-item img,.tm-item svg{width:30px;height:30px}
  }

  /* ================= MOBILE ================= */
  @media(max-width:640px){
    .pad{padding:60px 0}
    .wrap{padding:0 18px}
    .hero{padding-top:36px}
    /* problema: número centralizado em cima, texto menor abaixo */
    .stat{display:block;text-align:center}
    .stat .n{font-size:54px}
    .stat .l{margin:10px auto 0;max-width:260px;font-size:13.5px;line-height:1.5}
    .hero h1{font-size:clamp(30px,8vw,38px);margin-top:30px;text-wrap:balance}
    .hero .sub{font-size:16px;margin-top:24px}
    .hero-cta{margin-top:34px;gap:10px;justify-content:center}
    .hero-cta .btn{font-size:13.5px;padding:13px 15px;white-space:nowrap}
    .trust{font-size:11.5px;margin-top:30px;gap:10px;flex-wrap:nowrap;white-space:nowrap;justify-content:center}
    .trust .av img{width:30px;height:30px;margin-left:-11px}
    .trust .t-long{display:none}
    .trust .t-short{display:inline}
    /* sem print no mobile: só chat + luz */
    .hero-mock{display:none}
    .hero-chat{margin-bottom:0;padding:20px 18px 16px}
    .hero-chat .q{font-size:15px;min-height:46px;line-height:1.5}
    .hero-chat .row{margin-top:14px}
    .hero-chat .hint{font-size:12px}
    .hero-stage{margin-top:40px;padding:0 18px 16px}
    .hero-light{top:-40px;height:calc(100% + 70px)}
    .badge-pill{font-size:11.5px;padding:8px 16px;text-align:center}
    .h2{font-size:26px;text-wrap:balance}
    .br-m{display:inline}
    .br-d{display:none}
    .lede{font-size:15px}
    .stats{gap:0;margin-top:36px}
    /* traço azul esmaecido separando cada número (somente mobile) */
    .stat{padding:28px 0}
    .stat + .stat{position:relative}
    .stat + .stat::before{
      content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
      width:72px;height:2px;border-radius:2px;background:rgba(57,114,253,.35);
    }
    .grid4{grid-template-columns:1fr;gap:12px}
    .pain .ic{margin-bottom:20px}
    .virada-stage{height:340px;margin-top:40px}
    .virada-stage::before{width:340px;height:340px}
    .v-ring.r3{display:none}
    .v-ring.r2,.v-orbit2{width:300px;height:300px}
    .v-ring.r1,.v-orbit{width:210px;height:210px}
    .v-core{width:120px;height:120px}
    .v-core-inner img{width:62px}
    .v-tool{width:58px;height:58px;border-radius:15px}
    .v-tool img{width:28px;height:28px}
    .v-tool.t1{margin-left:-29px;margin-top:-29px}
    .v-tool.t2{margin-left:-29px;margin-bottom:-29px}
    .v-tool.t3{margin-right:-29px;margin-bottom:-29px}
    .v-sat{width:38px;height:38px;border-radius:11px}
    .v-sat img,.v-sat svg{width:18px;height:18px}
    .v-sat.s1{left:243px;top:23px}
    .v-sat.s2{left:243px;top:243px}
    .v-sat.s3{left:23px;top:243px}
    .v-sat.s4{left:23px;top:23px}
    .v-sat.s5{left:133px;top:5px}
    .v-sat.s6{left:133px;top:262px}
    /* virada: frase em coluna, linha vertical animada conectando */
    .virada-tag{font-size:26px;margin-top:40px;flex-direction:column;gap:12px}
    .vt-line{width:2px;height:28px}
    .vt-line i{background:linear-gradient(180deg, transparent, var(--blue), var(--purple), transparent);animation-name:vtFlowV}
    .layer-card .stage{height:210px}
    .layer-card h3{font-size:21px}
    .demo-screen .sbody{min-height:190px;padding:14px}
    .htrack .app{flex:0 0 74vw}
    .htrack .why-card{flex:0 0 80vw}
    .case-card{flex:0 0 80vw}
    .qgrid{grid-template-columns:1fr;gap:12px}
    .q-item{padding:26px 24px;gap:16px}
    .q-item p{font-size:15px}
    /* jornada vertical no mobile: ícone grande centralizado, texto abaixo */
    .journey{flex-direction:column;align-items:center;justify-content:flex-start;overflow:visible;margin-top:48px;padding:0;gap:0}
    .j-step{display:flex;flex-direction:column;align-items:center;width:min(100%,300px);text-align:center;gap:14px}
    .j-step .box{width:104px;height:104px;border-radius:24px}
    .j-step .box svg{width:48px;height:48px}
    .j-step h4{font-size:20px;font-weight:600;margin-top:2px}
    .j-step small{font-size:15px;line-height:1.5;text-align:center;margin-top:0}
    .j-step small br{display:none}
    .j-link{flex:0 0 52px;width:2px;height:52px;margin:14px 0}
    .j-link i{background:linear-gradient(180deg, color-mix(in srgb, var(--jc1,var(--blue)) 55%, transparent), color-mix(in srgb, var(--jc2,var(--purple)) 55%, transparent));transform:scaleY(0);transform-origin:top}
    .j-link.lit i{transform:scaleY(1)}
    .j-link::after{top:0;left:50%;transform:translate(-50%,-8px)}
    .j-link.pulse::after{animation:linkPulseV .55s ease forwards}
    /* preço: card único no mobile */
    .plan-toggle{margin-top:36px;width:100%;max-width:340px}
    .plan-toggle-btn{flex:1;min-width:0;padding:10px 0}
    .plan-stage{margin-top:22px;max-width:100%}
    .faq-q{font-size:16.5px;padding:24px 4px}
    .final h2{font-size:clamp(26px,7.4vw,32px)}
    .final-arc{height:220px}
    .tm-item .chipi{width:52px;height:52px;border-radius:14px}
    .tm-item img,.tm-item svg{width:26px;height:26px}
  }

/* ===================== PÁGINAS DE APP (landing por produto) ===================== */
.app-hero{position:relative;padding:88px 0 56px;text-align:center;overflow:hidden}
.app-hero::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(820px 380px at 50% -12%, color-mix(in srgb, var(--app,#3972FD) 20%, transparent), transparent 62%);}
.app-hero .wrap{position:relative;z-index:1}
.app-ic{width:104px;height:104px;border-radius:28px;display:grid;place-items:center;margin:0 auto 28px;
  background:linear-gradient(160deg, color-mix(in srgb, var(--app,#3972FD) 16%, #0A0F26), #0A0F26);
  border:1px solid color-mix(in srgb, var(--app,#3972FD) 38%, var(--line));
  box-shadow:0 24px 64px -18px color-mix(in srgb, var(--app,#3972FD) 60%, transparent), inset 0 1px 0 rgba(255,255,255,.06);}
.app-ic img{width:64px;height:64px;object-fit:contain}

/* ===== Hero coverflow: ícone do app atual no centro + vizinhos esmaecidos =====
   Renderizado por assets/app-switcher.js a partir de SITE_APPS. */
.app-hero-stage{
  position:relative;margin:0 auto 28px;max-width:560px;height:172px;
  display:flex;align-items:center;justify-content:center;user-select:none;-webkit-tap-highlight-color:transparent;
}
.hs-track{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.hs-item{
  position:absolute;display:grid;place-items:center;transition:all .55s cubic-bezier(.22,1,.36,1);
  background:linear-gradient(160deg, color-mix(in srgb, var(--app,#3972FD) 14%, #0A0F26), #0A0F26);
  border:1px solid color-mix(in srgb, var(--app,#3972FD) 30%, var(--line));
  text-decoration:none;will-change:transform,opacity;
}
.hs-item img{width:60%;height:60%;object-fit:contain;pointer-events:none}
/* posição central — destaque */
.hs-item.is-active{
  width:120px;height:120px;border-radius:30px;opacity:1;transform:translateX(0) scale(1);
  z-index:5;cursor:default;
  border-color:color-mix(in srgb, var(--app,#3972FD) 55%, transparent);
  box-shadow:0 26px 64px -20px color-mix(in srgb, var(--app,#3972FD) 65%, transparent), inset 0 1px 0 rgba(255,255,255,.06);
}
/* posições vizinhas (clique muda de página) */
.hs-item.is-prev,.hs-item.is-next{
  width:78px;height:78px;border-radius:22px;opacity:.55;z-index:3;cursor:pointer;
  filter:saturate(.6);
}
.hs-item.is-prev{transform:translateX(-118px) scale(1)}
.hs-item.is-next{transform:translateX( 118px) scale(1)}
.hs-item.is-prev2,.hs-item.is-next2{
  width:60px;height:60px;border-radius:18px;opacity:.28;z-index:2;cursor:pointer;
  filter:saturate(.4) blur(.2px);
}
.hs-item.is-prev2{transform:translateX(-208px) scale(1)}
.hs-item.is-next2{transform:translateX( 208px) scale(1)}
.hs-item.is-prev:hover,.hs-item.is-next:hover{opacity:.85;filter:none}
.hs-item.is-prev2:hover,.hs-item.is-next2:hover{opacity:.55;filter:saturate(.7)}
/* setas */
.hs-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:rgba(10,15,38,.7);backdrop-filter:blur(8px);
  color:#fff;display:grid;place-items:center;cursor:pointer;opacity:.72;transition:.18s;
}
.hs-arrow:hover{opacity:1;border-color:color-mix(in srgb, var(--app,#3972FD) 60%, transparent)}
.hs-arrow svg{width:18px;height:18px}
.hs-arrow.hs-prev{left:8px}
.hs-arrow.hs-next{right:8px}
@media(max-width:640px){
  .app-hero-stage{height:148px;max-width:none}
  .hs-item.is-active{width:104px;height:104px;border-radius:26px}
  .hs-item.is-prev,.hs-item.is-next{width:64px;height:64px;border-radius:18px}
  .hs-item.is-prev{transform:translateX(-92px)}
  .hs-item.is-next{transform:translateX( 92px)}
  .hs-item.is-prev2,.hs-item.is-next2{width:48px;height:48px;border-radius:14px}
  .hs-item.is-prev2{transform:translateX(-160px)}
  .hs-item.is-next2{transform:translateX( 160px)}
  .hs-arrow{width:34px;height:34px}
  .hs-arrow.hs-prev{left:2px}
  .hs-arrow.hs-next{right:2px}
}
.app-eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 17px;border-radius:64px;font-size:13px;font-weight:500;color:#fff;
  background:color-mix(in srgb, var(--app,#3972FD) 12%, transparent);border:1px solid color-mix(in srgb, var(--app,#3972FD) 38%, transparent)}
.app-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--app,#3972FD)}
.app-hero h1{font-size:clamp(34px,4.3vw,54px);font-weight:600;letter-spacing:-.035em;margin:32px auto 0;max-width:24ch;line-height:1.12;color:#fff;text-wrap:balance}
.app-hero .app-sub{font-size:clamp(16px,1.7vw,20px);color:var(--muted);max-width:680px;margin:28px auto 0;line-height:1.55;letter-spacing:-.02em;text-wrap:pretty}
.app-hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:nowrap;margin-top:36px}
@media(max-width:640px){.app-hero-cta{gap:10px}.app-hero-cta .btn{font-size:13.5px;padding:13px 15px;white-space:nowrap}}

.app-pain:hover .ic{color:var(--app,#3972FD);background:color-mix(in srgb, var(--app,#3972FD) 12%, transparent)}

.cases-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:52px;text-align:left}
@media(max-width:820px){.cases-grid{grid-template-columns:1fr}}
.usecase{position:relative;border-radius:20px;padding:30px 28px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
  border:1px solid var(--line-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.usecase .num{font-family:'Maven Pro';font-size:13px;font-weight:700;color:var(--app,#3972FD);letter-spacing:.06em;text-transform:uppercase}
.usecase h3{font-size:21px;font-weight:600;letter-spacing:-.025em;margin:10px 0 12px;line-height:1.22;color:#fff}
.usecase p{font-size:14.5px;color:var(--muted);line-height:1.62}
.usecase .marvin-says{margin-top:18px;display:flex;gap:11px;align-items:flex-start;padding:14px 16px;border-radius:14px;
  background:color-mix(in srgb, var(--app,#3972FD) 8%, rgba(255,255,255,.02));border:1px solid color-mix(in srgb, var(--app,#3972FD) 22%, var(--line-2))}
.usecase .marvin-says img{width:22px;height:22px;flex:none;margin-top:1px}
.usecase .marvin-says span{font-size:13.5px;color:#D7DCEC;line-height:1.5}
.usecase .marvin-says b{color:#fff;font-weight:600}

/* faixa de ícones de apps na navbar — escondida: o switcher agora vive no hero (coverflow) */
.app-switch{display:none !important}

.apps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:46px}
@media(max-width:820px){.apps-grid{grid-template-columns:1fr}}
.appcard{display:flex;gap:14px;align-items:center;border-radius:16px;padding:18px;text-align:left;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));border:1px solid var(--line-2);transition:transform .25s}
.appcard:hover{transform:translateY(-3px)}
.appcard img{width:40px;height:40px;object-fit:contain;flex:none}
.appcard-name{font-size:15.5px;font-weight:600;color:#fff;letter-spacing:-.02em}
.appcard-tag{font-size:12.5px;color:var(--muted);line-height:1.42;margin-top:3px}

/* ===================== Acessibilidade ===================== */
/* Skip link — vira visível ao focar pelo teclado */
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;padding:10px 16px;border-radius:0 0 12px 0;
  background:var(--blue);color:#fff;font-weight:600;font-size:14px;text-decoration:none}
.skip-link:focus{left:0;outline:2px solid #fff;outline-offset:2px}

/* Focus ring visível em todos os interativos (substitui o outline padrão fininho) */
a:focus-visible,button:focus-visible,
.btn:focus-visible,.appsw:focus-visible,
.hs-arrow:focus-visible,.hs-item:focus-visible,
.appcard:focus-visible,.faq-q:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--purple-soft);
  outline-offset:3px;
  border-radius:8px;
}
/* Remove o outline default (substituído pelo focus-visible acima) sem prejudicar mouse */
a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}

/* Touch targets ≥ 44px nas setas do coverflow — área clicável invisível via padding */
.hs-arrow{padding:3px}
@media(max-width:640px){.hs-arrow{padding:5px}}

/* Respeita prefers-reduced-motion — desliga animações decorativas */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  /* Mantém visível o estado final dos elementos animados */
  .reveal{opacity:1 !important;transform:none !important}
  .vt-line i{transform:translateX(0) !important;opacity:.6}
}

/* ===================== Ajustes de boxes/pílulas apertadas (páginas de app) ===================== */
/* Pílula "junto de você em todos os apps" e similares — texto pode quebrar em 2 linhas no mobile */
.moat-same{
  display:inline-block !important;
  font-size:13.5px !important;line-height:1.55 !important;
  padding:14px 22px !important;border-radius:20px !important;
  max-width:520px;text-align:left;white-space:normal;
}
.moat-same > span:first-child{
  display:inline-block;vertical-align:1px;margin-right:8px;
}
/* Nós do fluxo MDC → Marvin → apps */
.moat-node{
  font-size:13.5px !important;padding:11px 16px !important;gap:10px;
}
/* Exemplo de funcionalidade (caixa tracejada) */
.feat-eg{font-size:12.5px !important;line-height:1.55 !important}

/* ===================== Mockups (.bwin / .mock) — não comprimir no mobile ===================== */
@media(max-width:640px){
  /* Containers viram scrollers horizontais, com largura natural do mockup preservada */
  .bwin,.mock{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .bwin .bwin-app{min-width:760px}     /* janela cheia: layout desktop garantido */
  .mock .mock-body{min-width:560px}    /* mockups menores */
}

/* ===================== Mobile: títulos e textos sempre centralizados ===================== */
@media(max-width:640px){
  /* Cobre seções cujo container não é .wrap.center (ex.: "Por que Marvee", FAQ) */
  section .h2,
  section .lede,
  section .sub{
    text-align:center;
  }
  /* .why-head era 2 colunas com alinhamento à esquerda — forçar centralização */
  .why-head{text-align:center}
  .why-head .lede{margin-left:auto;margin-right:auto;text-align:center}
}

/* ===================== Aurora canvas no hero das páginas de apps ===================== */
.app-hero{position:relative;isolation:isolate}
canvas.aurora-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
  opacity:.55;filter:blur(40px) saturate(1.15);
  mix-blend-mode:screen;
}
/* Overlay escuro suave por cima do canvas — preserva contraste do texto e botões */
.app-hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(680px 360px at 50% 64%, transparent 0%, color-mix(in srgb, var(--bg) 50%, transparent) 60%, color-mix(in srgb, var(--bg) 85%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 35%, transparent) 0%, transparent 38%, transparent 62%, color-mix(in srgb, var(--bg) 60%, transparent) 100%);
}
/* Conteúdo do hero acima do canvas + overlay */
.app-hero > .wrap{position:relative;z-index:2}
/* Mantém o radial blue/purple original do hero, agora um pouco mais sutil */
.app-hero::before{z-index:0;opacity:.5}
@media (prefers-reduced-motion: reduce){
  canvas.aurora-canvas{opacity:.35}
}