/* Direção visual herdada do Manual do Cliente VEDUC: noite violeta, lima de destaque,
   Archivo larga e itálica nos títulos, Covered By Your Grace nos rabiscos, JetBrains Mono nos rótulos. */
:root{
  color-scheme: dark;
  --ink:#0A0614;
  --panel:#130C24;
  --panel-2:#1B1233;
  --line:rgba(167,139,250,.16);
  --violet:#7C3AED;
  --lavender:#B9A2FF;
  --lime:#C8F542;
  --text:#F4F1FB;
  --muted:#A69CC0;
  --dim:#5E5478;
  --display:"Archivo", "Arial Black", system-ui, sans-serif;
  --script:"Covered By Your Grace", "Segoe Print", "Bradley Hand", cursive;
  --body:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}
*{box-sizing:border-box}
html{background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.loading{overflow:hidden}
::selection{background:var(--lime);color:var(--ink)}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:4px}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
h1,h2,h3{font-family:var(--display);font-variation-settings:"wdth" 112;text-wrap:balance;margin:0;line-height:.98;letter-spacing:-.02em}
h2{font-size:clamp(36px,5vw,68px);font-weight:800}
p{margin:0}
.lede{font-size:clamp(17px,1.5vw,20px);color:var(--muted);max-width:52ch}
.grad{background:linear-gradient(100deg,var(--lavender) 0%,var(--violet) 75%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lime{color:var(--lime)}
.chap{display:flex;align-items:center;flex-wrap:wrap;gap:14px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.chap span{font-family:var(--script);font-size:24px;line-height:1;letter-spacing:0;text-transform:none;color:var(--c,var(--lime));border:1.5px solid currentColor;border-radius:999px;padding:6px 16px 2px;transform:rotate(-4deg);display:inline-block}
.wo{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.wi{display:inline-block;will-change:transform}
.mark{display:inline-block;width:22px;height:22px;border-radius:50%;border:3px solid var(--lime);position:relative;flex-shrink:0}
.mark::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--violet)}

/* ---------- Loader ---------- */
.loader{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:radial-gradient(60% 50% at 50% 50%,#1E0F45,var(--ink));transition:opacity .8s,visibility .8s}
.loader.done{opacity:0;visibility:hidden}
.loader-in{display:grid;justify-items:center;gap:10px}
.loader-ring{width:96px;height:96px}
.loader-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.loader-ring circle{fill:none;stroke-width:5}
.loader-ring .bg{stroke:var(--line)}
.loader-ring .fg{stroke:var(--lime);stroke-linecap:round;transition:stroke-dashoffset .3s}
.loader-pct{font-family:var(--display);font-style:italic;font-weight:900;font-variation-settings:"wdth" 125;font-size:44px;line-height:1;letter-spacing:-.03em}
.loader-txt{font-family:var(--script);font-size:24px;color:var(--lavender);transform:rotate(-3deg)}

/* ---------- Camadas fixas: aura, cena 3D e rótulos ---------- */
.aura{position:fixed;left:0;top:0;width:min(80vw,900px);aspect-ratio:1;margin:calc(min(80vw,900px)/-2) 0 0 calc(min(80vw,900px)/-2);border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.38) 0%,rgba(124,58,237,.12) 38%,transparent 66%);pointer-events:none;z-index:0;will-change:transform}
.aura::after{content:"";position:absolute;inset:30%;border-radius:50%;background:radial-gradient(circle,rgba(200,245,66,.12),transparent 70%)}
.scene{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:1;pointer-events:none}
.labels{position:fixed;inset:0;z-index:3;pointer-events:none}
.lbl{position:absolute;left:0;top:0;display:flex;align-items:center;gap:0;opacity:0;will-change:transform,opacity}
.lbl .dot{width:12px;height:12px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px rgba(200,245,66,.22),0 0 18px rgba(200,245,66,.8);flex-shrink:0;margin:-6px}
.lbl .ln{height:1.5px;width:var(--len,60px);background:linear-gradient(90deg,var(--lime),rgba(200,245,66,.2));transform-origin:0 50%}
.lbl .tx{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;background:rgba(10,6,20,.82);border:1px solid rgba(200,245,66,.35);padding:6px 10px;border-radius:8px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lbl .tx b{display:block;font-family:var(--display);font-variation-settings:"wdth" 110;font-size:15px;letter-spacing:-.01em;text-transform:none}
.lbl.flip{flex-direction:row-reverse}
.lbl.flip .ln{background:linear-gradient(270deg,var(--lime),rgba(200,245,66,.2))}

/* ---------- Cursor ---------- */
.cursor{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid var(--lime);border-radius:50%;pointer-events:none;z-index:190;opacity:0;transition:width .25s,height .25s,margin .25s,background .25s,opacity .3s}
.cursor.on{opacity:.9}
.cursor.big{width:70px;height:70px;margin:-35px 0 0 -35px;background:rgba(200,245,66,.1)}
@media (pointer:coarse){.cursor{display:none}}

/* ---------- Barra fixa ---------- */
.top{position:fixed;inset:0 0 auto 0;z-index:50;padding-top:env(safe-area-inset-top,0px);transform:translateY(-110%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.top.show{transform:none}
.bar{display:flex;align-items:center;gap:24px;padding:12px clamp(16px,4vw,40px);background:rgba(10,6,20,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 118;letter-spacing:.04em;font-size:17px;flex-shrink:0}
.links{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin-left:auto;min-width:0}
.links::-webkit-scrollbar{display:none}
.links a{font-size:14px;color:var(--muted);text-decoration:none;padding:6px 12px;border-radius:999px;white-space:nowrap;transition:color .2s,background .2s}
.links a:hover,.links a.on{color:var(--text);background:rgba(124,58,237,.22)}
.buy-mini{flex-shrink:0;font-weight:700;font-size:14px;text-decoration:none;background:var(--lime);color:var(--ink);padding:7px 16px;border-radius:999px;transition:transform .15s}
.buy-mini:hover{transform:translateY(-2px)}
.progress{height:2px;background:linear-gradient(90deg,var(--violet),var(--lime));transform-origin:0 50%;transform:scaleX(0)}

/* ---------- Capa ---------- */
.hero{position:relative;min-height:max(720px,100svh);display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(180deg,#140A2E 0%,#1E0F45 38%,#2A1458 62%,#0A0614 100%)}
.sky{position:absolute;inset:0;pointer-events:none}
.glow{position:absolute;left:50%;top:52%;width:clamp(420px,56vw,860px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(200,245,66,.16) 0%,rgba(124,58,237,.34) 28%,transparent 64%)}
.cloud{position:absolute;height:40px;border-radius:50%;background:rgba(185,162,255,.13);filter:blur(10px);animation:drift linear infinite alternate}
.cloud.c1{width:260px;top:14%;left:8%;animation-duration:70s}
.cloud.c2{width:180px;top:26%;left:68%;animation-duration:90s}
.cloud.c3{width:320px;top:8%;left:38%;animation-duration:110s;opacity:.7}
@keyframes drift{from{transform:translateX(-60px)}to{transform:translateX(60px)}}
.grid-floor{position:absolute;left:-20%;right:-20%;bottom:-6%;height:46%;background:linear-gradient(rgba(185,162,255,.22) 1px,transparent 1px) 0 0/100% 46px,linear-gradient(90deg,rgba(185,162,255,.22) 1px,transparent 1px) 0 0/66px 100%;transform:perspective(500px) rotateX(62deg);transform-origin:50% 100%;-webkit-mask:linear-gradient(180deg,transparent,#000 60%);mask:linear-gradient(180deg,transparent,#000 60%)}
.fog{position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(180deg,transparent,rgba(10,6,20,.55) 50%,var(--ink))}
.hero-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:16px;padding:calc(18px + env(safe-area-inset-top,0px)) clamp(16px,2.5vw,32px) 0;position:relative;z-index:5}
.hero-top .tag{font-weight:600;font-size:15px;padding-top:8px}
.hero-logo{justify-self:center;display:flex;align-items:center;gap:10px;background:#000;padding:24px 18px 12px;margin-top:-18px;text-decoration:none;font-family:var(--display);font-weight:850;font-variation-settings:"wdth" 120;letter-spacing:.05em;font-size:18px}
.hero-nav{justify-self:end;display:flex;align-items:center;gap:22px;font-family:var(--display);font-variation-settings:"wdth" 90;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.02em}
.hero-nav a{text-decoration:none;opacity:.9}
.hero-nav a:hover{opacity:1;color:var(--lime)}
.hero-nav .pillb{border:1.5px solid var(--text);border-radius:999px;padding:8px 16px;opacity:1}
.hero-nav .pillb:hover{background:var(--lime);border-color:var(--lime);color:var(--ink)}
/* o título fica ATRÁS do canvas (sem z-index): o controle passa na frente das letras */
.title{position:relative;text-align:center;margin-top:clamp(20px,6vh,70px);font-style:italic;font-weight:900;font-variation-settings:"wdth" 125;line-height:.8;letter-spacing:-.035em;user-select:none;will-change:transform}
.title .t1,.title .t3{display:block;font-size:clamp(70px,15vw,232px);background:linear-gradient(180deg,#C9B8FF,#8E6CF5);-webkit-background-clip:text;background-clip:text;color:transparent}
.title .t1{transform:translateX(-12%)}
.title .t3{transform:translateX(14%)}
.title .t2{display:block;position:relative;z-index:2;font-family:var(--script);font-style:normal;font-weight:400;font-size:clamp(48px,7.4vw,118px);letter-spacing:0;color:#fff;margin-block:-.32em -.26em;transform:rotate(-8deg) translateX(-16%);text-shadow:0 6px 30px rgba(10,6,20,.55)}
.title .t2 i{font-style:normal;display:inline-block}
.hero-foot{position:relative;z-index:5;margin-top:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:16px;padding:0 clamp(16px,2.5vw,32px) clamp(20px,4vh,40px)}
.hero-price{display:grid;gap:2px}
.hero-price small{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.hero-price b{font-family:var(--display);font-style:italic;font-variation-settings:"wdth" 125;font-weight:900;font-size:clamp(30px,3vw,44px);line-height:1;letter-spacing:-.03em}
.scroll-hint{display:grid;justify-items:center;gap:8px;font-family:var(--script);font-size:22px;color:var(--lavender)}
.scroll-hint i{width:24px;height:38px;border:1.5px solid var(--lavender);border-radius:999px;position:relative}
.scroll-hint i::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--lime);animation:wheel 1.6s ease-in-out infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{opacity:0}}
.hero-badges{justify-self:end;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.hero-badges span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(10,6,20,.5)}

/* ---------- Faixas ---------- */
.tapes{position:relative;z-index:2;height:150px;overflow:hidden;margin-top:-10px;pointer-events:none}
.tape{position:absolute;left:-5%;right:-5%;white-space:nowrap;overflow:hidden;padding:12px 0;font-family:var(--display);font-style:italic;font-weight:900;font-variation-settings:"wdth" 125;font-size:clamp(22px,3vw,36px);text-transform:uppercase;letter-spacing:-.01em}
.tape .mq{display:inline-flex;animation:mq 38s linear infinite}
.tape .mq span{padding-right:.6em}
.tape.a{top:28px;background:var(--lime);color:var(--ink);transform:rotate(-2.4deg);z-index:2}
.tape.b{top:50px;background:var(--violet);color:#fff;transform:rotate(2deg)}
.tape.b .mq{animation-direction:reverse;animation-duration:46s}
.tape em{font-style:normal;font-family:var(--script);font-weight:400;text-transform:none;font-size:1.1em;letter-spacing:0}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Seções de recurso (o 3D ocupa o lado oposto ao texto) ---------- */
.feat{position:relative;min-height:100vh}
.feat.tall{min-height:180vh}
.feat.xtall{min-height:240vh}
.feat-in{position:sticky;top:0;z-index:2;min-height:100vh;display:flex;align-items:center;padding:96px clamp(16px,5vw,72px) 48px;max-width:1440px;margin-inline:auto}
.feat.left .feat-in{justify-content:flex-start}
.feat.right .feat-in{justify-content:flex-end}
.feat.center .feat-in{justify-content:center;align-items:flex-start;text-align:center}
.feat.center .chap{justify-content:center}
.feat.center .lede{margin-inline:auto}
.feat-txt{display:grid;gap:22px;max-width:480px;min-width:0}
.feat-txt.narrow{max-width:760px}
.feat-txt.wide{max-width:min(620px,48vw)}
.panel{background:linear-gradient(170deg,rgba(19,12,36,.72),rgba(10,6,20,.55));border:1px solid var(--line);border-radius:24px;padding:clamp(24px,3vw,40px);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ticks{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.ticks li{display:flex;gap:12px;font-size:15.5px;color:var(--muted);align-items:baseline}
.ticks li::before{content:"✓";font-family:var(--mono);color:var(--lime);flex-shrink:0}
.ticks b{color:var(--text)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{font-size:13px;padding:5px 11px;border-radius:999px;border:1px solid var(--line);color:var(--text);background:var(--ink)}
.note{font-size:14px;color:var(--dim)}

/* analógicos */
.stick-meter{display:flex;gap:22px;align-items:center;padding:18px;border:1px solid var(--line);border-radius:18px;background:rgba(10,6,20,.6)}
.stick-pad{width:96px;height:96px;flex-shrink:0;border-radius:50%;border:1.5px solid rgba(94,225,240,.5);position:relative;background:radial-gradient(circle,rgba(94,225,240,.12),transparent 70%)}
.stick-pad::before,.stick-pad::after{content:"";position:absolute;background:var(--line)}
.stick-pad::before{left:50%;top:6px;bottom:6px;width:1px}
.stick-pad::after{top:50%;left:6px;right:6px;height:1px}
.stick-pad i{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px;border-radius:50%;background:#5EE1F0;box-shadow:0 0 16px #5EE1F0;z-index:1}
.stick-data{display:grid;gap:6px;font-variant-numeric:tabular-nums}
.stick-data p{display:flex;gap:14px;align-items:baseline;justify-content:space-between;min-width:150px}
.stick-data small{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.stick-data b{font-family:var(--mono);font-size:16px}

/* botões */
.keys{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.key{display:grid;grid-template-columns:auto 1fr;gap:0 12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:rgba(10,6,20,.6);transition:border-color .25s,background .25s,transform .25s}
.key .sym{grid-row:span 2;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:18px;color:var(--k);border:1.5px solid var(--k);transition:background .25s,color .25s,box-shadow .25s}
.key b{font-size:15px;line-height:1.2}
.key small{font-size:12.5px;color:var(--muted);line-height:1.3}
.key.on{border-color:var(--k);background:color-mix(in srgb,var(--k) 14%,rgba(10,6,20,.6));transform:translateY(-3px)}
.key.on .sym{background:var(--k);color:var(--ink);box-shadow:0 0 22px var(--k)}

/* gatilhos */
.resist{display:grid;gap:10px;padding:18px;border:1px solid var(--line);border-radius:18px;background:rgba(10,6,20,.6)}
.resist-h{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.resist-h b{color:#FFB547}
.resist-bars{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;align-items:end;height:54px}
.resist-bars i{display:block;border-radius:6px;background:var(--line);transition:background .2s,box-shadow .2s}
.resist-bars i:nth-child(1){height:20%}.resist-bars i:nth-child(2){height:34%}.resist-bars i:nth-child(3){height:48%}
.resist-bars i:nth-child(4){height:64%}.resist-bars i:nth-child(5){height:80%}.resist-bars i:nth-child(6){height:100%}
.resist-bars i.on{background:linear-gradient(180deg,#FFB547,#FF7A3D);box-shadow:0 0 14px rgba(255,181,71,.5)}

/* por dentro */
.feat-in.sticky{flex-direction:column;align-items:center;height:100vh}
.callouts{position:absolute;inset:0;pointer-events:none}
.callout{position:absolute;left:var(--x);top:var(--y);width:min(230px,40vw);padding:16px 18px;border-radius:16px;border:1px solid rgba(200,245,66,.3);background:rgba(10,6,20,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-align:left;display:grid;gap:2px;opacity:0}
.callout small{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}
.callout b{font-family:var(--display);font-variation-settings:"wdth" 110;font-size:20px;letter-spacing:-.01em;line-height:1.15}
.callout p{font-size:14px;color:var(--muted);line-height:1.4}

/* specs */
.facts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fact{background:rgba(19,12,36,.78);border:1px solid var(--line);border-radius:18px;padding:20px;display:grid;gap:6px;align-content:start;min-width:0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.fact .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.fact .v{font-family:var(--display);font-variation-settings:"wdth" 112;font-weight:800;font-size:clamp(26px,2.6vw,34px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fact p{color:var(--muted);font-size:14.5px;line-height:1.45}
[data-tilt]{transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s;position:relative}
[data-tilt]::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.09),transparent 50%);opacity:0;transition:opacity .3s;pointer-events:none}
[data-tilt]:hover::after{opacity:1}
[data-tilt]:hover{border-color:rgba(185,162,255,.45)}

/* edições */
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.sw{display:grid;justify-items:center;gap:6px;background:none;border:0;padding:0;cursor:pointer}
.sw i{width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--s) 60%,#fff),var(--s) 55%,color-mix(in srgb,var(--s) 60%,#000));border:2px solid var(--line);transition:transform .25s,box-shadow .25s,border-color .25s}
.sw span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sw:hover i{transform:scale(1.08)}
.sw.on i{border-color:var(--lime);box-shadow:0 0 0 4px rgba(200,245,66,.18)}
.sw.on span{color:var(--text)}
.ed-name{font-family:var(--script);font-size:28px;color:var(--lavender);transform:rotate(-3deg);transform-origin:0 50%}
.ed-name b{font-weight:400;color:var(--lime)}

/* ---------- Comprar ---------- */
.close{position:relative;text-align:center;min-height:100vh;display:flex;align-items:flex-end;padding-block:120px 80px}
.close .wrap{position:relative;z-index:2;display:grid;justify-items:center;gap:24px;width:100%}
.close h2{font-size:clamp(40px,6vw,88px);max-width:14ch}
.close .sig{font-family:var(--script);font-size:clamp(28px,3vw,40px);color:var(--lime);transform:rotate(-4deg)}
.buy{display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:center;padding:18px 18px 18px 28px;border-radius:24px;background:rgba(19,12,36,.8);border:1px solid rgba(200,245,66,.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.buy-price{display:grid;text-align:left}
.buy-price small{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}
.buy-price b{font-family:var(--display);font-style:italic;font-variation-settings:"wdth" 125;font-weight:900;font-size:clamp(44px,5vw,64px);line-height:.95;letter-spacing:-.04em}
.buy-price span{font-size:14px;color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:8px;font:700 15px var(--body);border-radius:999px;padding:10px 18px;border:0;cursor:pointer;background:var(--lime);color:var(--ink);transition:transform .15s,box-shadow .2s}
.btn:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 14px 40px -12px rgba(200,245,66,.7)}
.btn.big{font-size:18px;padding:18px 30px}
.contacts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.contacts div{background:rgba(19,12,36,.8);border:1px solid var(--line);border-radius:14px;padding:14px 20px;text-align:left;min-width:0}
.contacts small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.contacts b{font-weight:600}
footer{position:relative;z-index:2;border-top:1px solid var(--line);padding-block:28px;color:var(--dim);font-size:13px;background:var(--ink)}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--lime);color:var(--ink);font-weight:700;font-size:14px;padding:10px 18px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:195}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Responsivo: no celular o controle fica em cima e o texto embaixo ---------- */
@media (max-width:900px){
  .hero-top{grid-template-columns:auto 1fr}
  .hero-top .tag{display:none}
  .hero-logo{justify-self:start}
  .hero-nav a:not(.pillb){display:none}
  .title{margin-top:12vh}
  .hero-foot{grid-template-columns:1fr auto}
  .hero-badges{display:none}
  .links{display:none}
  .bar{justify-content:space-between}
  .feat.left .feat-in,.feat.right .feat-in{justify-content:center;align-items:flex-end;padding-bottom:24px}
  .feat-txt,.feat-txt.wide{max-width:560px;width:100%}
  .feat-txt.wide{align-self:flex-end}
  .panel{background:rgba(10,6,20,.82)}
  .facts{grid-template-columns:1fr 1fr}
  .fact{padding:14px}
  .fact p{display:none}
  .callout{width:44vw;padding:10px 12px}
  .callout b{font-size:16px}
  .callout p{display:none}
  .callout:nth-child(odd){left:3%}
  .callout:nth-child(even){left:auto;right:3%}
  .callout:nth-child(1),.callout:nth-child(2){top:auto;bottom:24%}
  .callout:nth-child(3),.callout:nth-child(4){top:auto;bottom:6%}
  .lbl .tx{font-size:10px;padding:4px 7px}
  .lbl .tx b{font-size:12px}
  .close{align-items:flex-end}
}
@media (max-width:520px){
  body{font-size:16px}
  .lede{font-size:16px}
  .feat-txt{gap:16px}
  .keys{grid-template-columns:1fr 1fr;gap:8px}
  .key{padding:10px;grid-template-columns:1fr;justify-items:start;gap:6px}
  .key .sym{grid-row:auto;width:32px;height:32px}
  .key small{display:none}
  .stick-meter{gap:14px;padding:14px}
  .stick-pad{width:72px;height:72px}
  .stick-data p{min-width:120px}
  .buy{padding:18px;flex-direction:column}
  .buy-price{text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .cloud,.tape .mq,.scroll-hint i::after{animation:none}
  *{transition:none!important}
}