/* ── GB Traffic — design system "Dark Fusion" (v11) compartilhado ──────────────
   Cada página define a paleta no :root: --acc (primária) e --acc2 (secundária).
   Inclua junto: lp-mock.css (mockups) + defina --m-acc/--m-acc2/etc. */
:root{
  --bg:#040409;--ink:#f2f1fb;--sub:#888aa8;--card:rgba(255,255,255,.035);--bd:rgba(255,255,255,.09);
  --acc:#a78bfa;--acc2:#22d3ee;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:Inter,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}

/* Fundo: aurora + grid + spotlight */
.aurora{position:fixed;inset:-30%;z-index:-3;background:
  radial-gradient(38% 38% at 18% 22%,color-mix(in srgb,var(--acc) 55%,transparent),transparent 60%),
  radial-gradient(40% 40% at 82% 16%,color-mix(in srgb,var(--acc2) 40%,transparent),transparent 60%),
  radial-gradient(42% 42% at 65% 85%,color-mix(in srgb,var(--acc) 35%,transparent),transparent 60%);
  filter:blur(70px);animation:auroraDrift 26s ease-in-out infinite}
@keyframes auroraDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-3%,3%) scale(1.08)}}
.grid-fx{position:fixed;inset:0;z-index:-2;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(ellipse 85% 70% at 50% 0,#000 25%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 85% 70% at 50% 0,#000 25%,transparent 80%)}
#spot{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(520px circle at var(--mx,50%) var(--my,18%),color-mix(in srgb,var(--acc) 16%,transparent),transparent 62%);transition:background .1s}

.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
.out{font-family:Outfit,sans-serif}
.mono{font-family:'JetBrains Mono',monospace}
.btn{display:inline-block;background:linear-gradient(120deg,var(--acc),var(--acc2));color:#06060d;font-weight:700;padding:14px 28px;border-radius:12px;font-size:15px;transition:transform .18s,box-shadow .18s;box-shadow:0 10px 40px color-mix(in srgb,var(--acc) 40%,transparent)}
.btn:hover{transform:translateY(-3px);box-shadow:0 18px 54px color-mix(in srgb,var(--acc) 60%,transparent)}
.btn-o{background:rgba(255,255,255,.04);color:var(--ink);border:1px solid var(--bd);box-shadow:none;backdrop-filter:blur(8px)}
.btn-o:hover{background:rgba(255,255,255,.08)}

/* Nav + menu de produtos (dropdown via <details>) */
nav{position:sticky;top:0;z-index:50;background:rgba(4,4,9,.6);backdrop-filter:blur(16px);border-bottom:1px solid var(--bd)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:14px}
.logo{font-family:Outfit;font-weight:800;font-size:19px;display:flex;align-items:center;gap:7px;flex-shrink:0}
.navlinks{display:flex;align-items:center;gap:6px}
.navlinks>a{font-size:14px;color:var(--sub);padding:8px 12px;border-radius:9px;transition:color .2s,background .2s}
.navlinks>a:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;font-size:14px;color:var(--sub);padding:8px 12px;border-radius:9px;display:flex;align-items:center;gap:6px;transition:color .2s,background .2s}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary,.menu summary:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.menu summary .caret{font-size:10px;transition:transform .2s}
.menu[open] summary .caret{transform:rotate(180deg)}
.menu .pop{position:absolute;top:130%;left:0;min-width:250px;background:rgba(10,10,18,.96);border:1px solid var(--bd);border-radius:14px;padding:7px;display:flex;flex-direction:column;gap:2px;backdrop-filter:blur(16px);box-shadow:0 24px 60px rgba(0,0,0,.6);z-index:60}
.menu .pop a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;font-size:14px;transition:background .15s}
.menu .pop a:hover{background:rgba(255,255,255,.07)}
.menu .pop a .pi{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:15px;flex-shrink:0;border:1px solid var(--bd)}
.menu .pop a small{display:block;color:var(--sub);font-size:11px}
.menu .pop .sep{height:1px;background:var(--bd);margin:5px 2px}
@media(max-width:820px){ .navlinks .hidem{display:none} .menu .pop{right:0;left:auto} }

section{padding:92px 0;position:relative}
.center{text-align:center}
.kick{font-family:'JetBrains Mono';font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--acc2);display:inline-flex;align-items:center;gap:8px;border:1px solid var(--bd);border-radius:999px;padding:7px 16px;background:rgba(255,255,255,.03)}
.cur{display:inline-block;width:8px;height:13px;background:var(--acc2);animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
h1{font-family:Outfit;font-size:clamp(44px,7.2vw,84px);font-weight:800;line-height:1.02;letter-spacing:-2.5px}
h2{font-family:Outfit;font-size:clamp(30px,4.4vw,48px);font-weight:800;letter-spacing:-1.2px}
.serif{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;letter-spacing:-.5px;background:linear-gradient(110deg,var(--acc),var(--acc2) 55%,var(--acc));-webkit-background-clip:text;background-clip:text;color:transparent}
.grad{background:linear-gradient(110deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--sub);font-size:19px;max-width:620px;margin:0 auto}
.glass{background:var(--card);border:1px solid var(--bd);border-radius:20px;backdrop-filter:blur(14px);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.tilt{transform-style:preserve-3d;transition:transform .14s ease-out,box-shadow .25s,border-color .25s;will-change:transform}
.tilt:hover{border-color:color-mix(in srgb,var(--acc) 50%,var(--bd));box-shadow:0 30px 70px color-mix(in srgb,var(--acc) 22%,transparent)}
.mod{padding:26px}
.mod .ic{font-size:26px;margin-bottom:12px;display:inline-block;transform:translateZ(38px)}
.mod h3{font-family:Outfit;font-size:20px;font-weight:700;transform:translateZ(24px)}
.mod h3 .ar{color:var(--acc2);font-size:14px}
.mod p{color:var(--sub);font-size:14px;margin-top:6px;transform:translateZ(14px)}
.feat{display:flex;gap:14px;align-items:flex-start;padding:22px}
.feat .fic{font-size:24px;flex-shrink:0}
.feat b{font-family:Outfit;font-size:16px}
.feat p{color:var(--sub);font-size:13.5px;margin-top:4px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.plan{padding:28px;display:flex;flex-direction:column}
.plan.hot{box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 55%,transparent),0 30px 70px color-mix(in srgb,var(--acc) 30%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 8%,transparent),var(--card))}
.ribbon{font-family:'JetBrains Mono';font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--acc2);align-self:flex-start;border:1px solid var(--bd);border-radius:999px;padding:4px 12px}
.price{font-family:Outfit;font-size:46px;font-weight:800;margin:10px 0;letter-spacing:-1px}.price small{font-size:14px;color:var(--sub);font-weight:500;font-family:Inter}
.plan ul,.flist{list-style:none;margin:14px 0;flex:1}
.plan li,.flist li{font-size:13px;color:var(--sub);padding:7px 0 7px 22px;position:relative}
.plan li:before,.flist li:before{content:"";position:absolute;left:2px;top:12px;width:10px;height:6px;border-left:2px solid var(--acc2);border-bottom:2px solid var(--acc2);transform:rotate(-45deg)}
.crosslink{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--sub);border:1px solid var(--bd);border-radius:999px;padding:7px 14px;margin:4px;transition:color .2s,border-color .2s}
.crosslink:hover{color:var(--ink);border-color:color-mix(in srgb,var(--acc) 50%,var(--bd))}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}.reveal.in{opacity:1;transform:none}
footer{border-top:1px solid var(--bd);padding:36px 0;color:var(--sub);font-size:12px}
@media(prefers-reduced-motion:reduce){.aurora{animation:none}.reveal{opacity:1;transform:none}}
@media(max-width:860px){.grid3,.grid2,.plans{grid-template-columns:1fr}}