/* ===== Clonnie: tema escuro e vibrante ===== */
:root{
  --deep:#120A33;
  --rose:#FF4F9A; --violet:#8B5CFF; --aqua:#22C7DA; --amber:#FFB23E; --mint:#5EF0B6;
  --g-rose:linear-gradient(140deg,#FF6AA8 0%,#E0307E 100%);
  --g-violet:linear-gradient(140deg,#9C74FF 0%,#5B32D9 100%);
  --g-aqua:linear-gradient(140deg,#36D9E8 0%,#1585A6 100%);
  --g-amber:linear-gradient(140deg,#FFC24F 0%,#F2683A 100%);
  --g-brand:linear-gradient(115deg,#FF4F9A 0%,#8B5CFF 50%,#22C7DA 100%);
  /* textos claros por padrão */
  --ink-2:rgba(255,255,255,.82); --muted:rgba(236,230,255,.66); --line:rgba(255,255,255,.14);
  --pearl:#120A33; --paper:rgba(255,255,255,.06); --mist:rgba(255,255,255,.1);
}
/* áreas que continuam claras (telas de produto) */
.screen,.dash,.chat,.float,.twin-label,.result-light{--ink-2:#3A3257;--muted:#6B6385;--line:#DDD4EF;--pearl:#F7F4FC;--paper:#fff;--mist:#EEE8F8;color:#1C1633}

body{background:var(--deep);color:#fff}
h1,h2,h3{color:#fff}
.screen h3,.dash h4,.chat h3{color:#1C1633}
.sec-head p,.lead{color:rgba(255,255,255,.8)}
.glass{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

/* header escuro em vidro */
.top{background:rgba(18,10,51,.72)}
.top.scrolled{border-color:rgba(255,255,255,.1)}
.brand text{fill:#fff}
.brand circle:first-of-type{fill:#fff}
.nav a{color:rgba(255,255,255,.82)}
.nav a:hover{color:#fff}
.menu-btn span{background:#fff}
@media (max-width:960px){.nav{background:#160C3E;border-color:rgba(255,255,255,.1)}.nav a{border-color:rgba(255,255,255,.1)}}

/* botões */
.btn-main{background:var(--g-brand);color:#fff;box-shadow:0 14px 34px -12px rgba(255,79,154,.6)}
.btn-main:hover{filter:brightness(1.08)}
.btn-ghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn-light{background:#fff;color:#2A1670;box-shadow:0 14px 36px -14px rgba(139,92,255,.9)}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;background:radial-gradient(90% 80% at 85% 15%,#3A1FA0 0%,transparent 60%),radial-gradient(70% 70% at 0% 100%,#5A1663 0%,transparent 60%),linear-gradient(160deg,#0F0830 0%,#1A0E52 100%);padding-top:clamp(56px,7vw,96px)}
.aurora{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.6;will-change:transform}
.aurora .a1{width:560px;height:560px;background:#FF3D8F;left:-140px;top:-180px;animation:drift1 22s ease-in-out infinite alternate}
.aurora .a2{width:600px;height:600px;background:#7A4DFF;right:-160px;top:5%;animation:drift2 26s ease-in-out infinite alternate}
.aurora .a3{width:500px;height:500px;background:#12C3D8;left:28%;bottom:-280px;opacity:.5;animation:drift3 30s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(170px,130px) scale(1.15)}}
@keyframes drift2{to{transform:translate(-150px,100px) scale(.9)}}
@keyframes drift3{to{transform:translate(-130px,-130px) scale(1.2)}}
.grain{position:absolute;inset:0;z-index:-1;opacity:.16;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.hero h1{background:linear-gradient(180deg,#fff 35%,#FFD6EA 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .btn-main{background:#fff;color:#2A1670;box-shadow:0 16px 44px -12px rgba(255,79,154,.7)}
.hero .btn-main:hover{background:#FFF0F7}
.hero-facts{color:rgba(255,255,255,.85)}
.hero-facts svg{color:var(--mint)!important}
.caption{color:rgba(236,230,255,.6)}
.stage::before{content:"";position:absolute;inset:6% -14% 2% -14%;background:radial-gradient(closest-side,rgba(139,92,255,.7),rgba(255,79,154,.35) 55%,transparent 75%);filter:blur(34px);z-index:0}
.twin{padding:3px;background:var(--g-brand);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:twin 7s ease-in-out infinite alternate}
.twin::after{display:none}
@keyframes twin{from{transform:translate(22px,16px) rotate(4deg)}to{transform:translate(30px,22px) rotate(5.5deg)}}
.phone{background:#0B0624;box-shadow:0 50px 100px -30px rgba(5,2,25,.9),0 0 0 1px rgba(255,255,255,.1)}
.float{position:absolute;z-index:4;display:flex;align-items:center;gap:11px;background:#fff;border-radius:16px;padding:11px 15px 11px 11px;box-shadow:0 18px 40px -16px rgba(5,2,25,.7);opacity:0;transform:translateY(12px) scale(.96);transition:opacity .6s,transform .6s}
.float.shown{opacity:1;transform:none;animation:bob 6s ease-in-out infinite}
.float b{display:block;font-size:13.5px;line-height:1.25}
.float small{font-size:12px;color:#6B6385}
.fi{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-weight:800;font-size:16px;flex:none}
.f1{left:-118px;top:16%}
.f2{left:-70px;bottom:21%;animation-delay:1.2s!important}
.f3{right:-70px;top:4%;animation-delay:2.1s!important}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (max-width:1180px){.f1{left:-60px}.f2{left:-40px}}
@media (max-width:960px){.f1{left:-30px}.f2{left:-24px}}
@media (max-width:560px){.f2{display:none}.f1{left:-6px;top:30%}.f3{right:-4px;top:-30px}}

/* ---------- faixa colorida ---------- */
.ribbon{background:var(--g-brand);padding:20px 0;overflow:hidden}
.ribbon-track{display:flex;gap:14px;width:max-content;animation:slide 48s linear infinite}
.ribbon:hover .ribbon-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.rp{white-space:nowrap;padding:10px 18px;border-radius:999px;font-size:15px;font-weight:600;color:#fff;background:rgba(18,10,51,.28);border:1px solid rgba(255,255,255,.28);display:inline-flex;align-items:center;gap:10px}
.rp::before{content:"";width:9px;height:9px;border-radius:50%;background:#fff}

/* ---------- experiências: cartões saturados ---------- */
#experiencias{background:radial-gradient(60% 60% at 100% 0%,rgba(255,79,154,.28),transparent 70%),radial-gradient(60% 60% at 0% 100%,rgba(34,199,218,.22),transparent 70%),#160B42}
.exp article{border:0;color:#fff;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);transition:transform .25s,box-shadow .25s;position:relative;overflow:hidden}
.exp article::after{content:"";position:absolute;width:220px;height:220px;right:-90px;top:-90px;border-radius:50%;background:rgba(255,255,255,.14)}
.exp article:hover{transform:translateY(-6px);box-shadow:0 40px 70px -30px rgba(0,0,0,.7)}
.exp article:nth-child(1){background:var(--g-rose)}
.exp article:nth-child(2){background:var(--g-violet)}
.exp article:nth-child(3){background:var(--g-aqua)}
.exp article:nth-child(4){background:var(--g-amber)}
.exp .ico{background:rgba(255,255,255,.22)}
.exp .ico svg{stroke:#fff}
.exp p{color:rgba(255,255,255,.92)}
.exp .price{border-top:1px solid rgba(255,255,255,.3);color:rgba(255,255,255,.9)}
.exp .price strong{color:#fff}

/* ---------- como funciona ---------- */
#como{background:radial-gradient(70% 60% at 100% 0%,rgba(34,199,218,.3),transparent 65%),linear-gradient(160deg,#0C1B4D 0%,#162060 100%);position:relative}
.steps{border-top:0;gap:14px}
.steps li{padding:26px 22px;border-radius:22px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px)}
.steps li::before{background:var(--g-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.steps li:nth-child(1){box-shadow:inset 0 3px 0 #FF4F9A}
.steps li:nth-child(2){box-shadow:inset 0 3px 0 #8B5CFF}
.steps li:nth-child(3){box-shadow:inset 0 3px 0 #22C7DA}
.steps li:nth-child(4){box-shadow:inset 0 3px 0 #FFB23E}
.steps li:nth-child(5){box-shadow:inset 0 3px 0 #5EF0B6}
.steps p{color:rgba(255,255,255,.8)}
.steps .time{background:rgba(255,255,255,.12);padding:3px 10px;border-radius:999px;color:#fff}

/* ---------- estúdio ---------- */
.studio{position:relative;background:radial-gradient(50% 45% at 0% 0%,rgba(255,79,154,.4),transparent 70%),radial-gradient(45% 45% at 100% 35%,rgba(139,92,255,.5),transparent 70%),radial-gradient(50% 40% at 50% 100%,rgba(34,199,218,.3),transparent 70%),#140A3C}
.st-shell{background:rgba(30,18,84,.75);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:rgba(156,124,255,.4);box-shadow:0 40px 90px -40px rgba(0,0,0,.7)}
.st-tab[aria-current="step"] .n{background:var(--g-brand);border-color:transparent;color:#fff}
.st-tab.done .n{background:#1FB980;border-color:#1FB980}
.chip-btn.on{background:var(--g-brand);border-color:transparent;color:#fff}
.tag{background:rgba(139,92,255,.35)}
.tag.block{background:rgba(255,79,154,.4)}
.timeline .talk{background:linear-gradient(90deg,rgba(255,79,154,.45),rgba(139,92,255,.5))}
.bar i{background:var(--g-brand)}

/* ---------- ganhos: magenta e violeta ---------- */
#ganhos{background:radial-gradient(60% 60% at 0% 0%,rgba(255,178,62,.25),transparent 70%),linear-gradient(135deg,#4A16A8 0%,#8A1F9E 55%,#C2266F 100%)}
#ganhos .sec-head p{color:rgba(255,255,255,.88)}
.calc,.split{background:rgba(16,8,48,.45);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 30px 70px -40px rgba(0,0,0,.6)}
.calc .row header span{color:#fff}
.calc input[type=range]{accent-color:#FF7DB8}
.calc .hint,.disclaim{color:rgba(255,255,255,.7)}
.result{background:#fff;color:#1C1633;position:relative;overflow:hidden}
.result small,.result .sub{color:#5B5378}
.result .val{background:var(--g-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.split>p,.legend span{color:rgba(255,255,255,.88)}
.legend strong{color:#fff}
.donut svg circle:first-child{stroke:rgba(255,255,255,.18)}
.donut svg text{fill:#fff}
.legend i[style*="ink"]{background:rgba(255,255,255,.3)!important}
.paylist{border-top-color:rgba(255,255,255,.2)}
.paylist li{color:rgba(255,255,255,.9)}
.paylist svg{color:var(--mint)!important}

/* ---------- planos ---------- */
#planos{background:radial-gradient(60% 60% at 50% 0%,rgba(139,92,255,.35),transparent 70%),#0F0930}
.plan{border:1px solid rgba(255,255,255,.14);color:#fff}
.plan:nth-child(1){background:rgba(255,255,255,.06)}
.plan:nth-child(2){background:var(--g-violet);border-color:transparent}
.plan .who{color:rgba(255,255,255,.75)}
.plan .amt small{color:rgba(255,255,255,.75)}
.plan:nth-child(1) svg{color:var(--aqua)!important}
.plan:nth-child(2) svg{color:#fff!important}
.plan.vip{background:linear-gradient(150deg,#FF5E9E 0%,#C02DB0 50%,#6A2BE0 100%);border-color:transparent;transform:translateY(-10px);box-shadow:0 34px 80px -30px rgba(255,79,154,.6)}
.plan.vip::before{display:none}
.plan.vip svg{color:#fff!important}
.plan.vip .who,.plan.vip .amt small{color:rgba(255,255,255,.85)}
@media (max-width:900px){.plan.vip{transform:none}}
.extra{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06)}
.extra p{color:rgba(255,255,255,.78)}
.extra:nth-child(1) strong{color:#FF7DB8}
.extra:nth-child(2) strong{color:#5BE3F0}
.plans-note{color:rgba(255,255,255,.75)}

/* ---------- custo zero: faixa vibrante ---------- */
#custos{background:linear-gradient(120deg,#FF4F9A 0%,#8B5CFF 50%,#1FB8D0 100%);position:relative;overflow:hidden}
#custos::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 70% at 20% 50%,rgba(255,255,255,.25),transparent 70%)}
#custos .wrap{position:relative}
.zero .big0{color:#fff;text-shadow:0 30px 60px rgba(40,10,90,.35)}
#custos .lead{color:rgba(255,255,255,.95)}
.inc{border-top-color:rgba(255,255,255,.35)}
.inc div{border-bottom-color:rgba(255,255,255,.3);color:rgba(255,255,255,.9)}
.inc strong{color:#fff}

/* ---------- painel ---------- */
#painel{background:radial-gradient(60% 60% at 100% 100%,rgba(34,199,218,.3),transparent 70%),radial-gradient(50% 50% at 0% 0%,rgba(255,79,154,.22),transparent 70%),#0E1440}
.dash{background:#fff;border:0;box-shadow:0 60px 120px -50px rgba(0,0,0,.8)}
.dash h4,.dash strong{color:#1C1633}
.dash-top{background:linear-gradient(90deg,#FFE5F1,#EEE6FF 50%,#DDF7FA)}
.kpi:nth-child(1) b{color:#6D3FD9}.kpi:nth-child(2) b{color:#D63B7A}.kpi:nth-child(3) b{color:#1597A6}.kpi:nth-child(4) b{color:#D9771A}
.kpi em{background:#E7FAF1;color:#14935F;padding:2px 8px;border-radius:999px;display:inline-block;margin-top:6px}
.chart i{background:linear-gradient(180deg,#B9A3FF,#E9E1FF)}
.chart i.hi{background:linear-gradient(180deg,#FF4F9A,#8B5CFF)}
.ctrls div:nth-child(1) strong{color:#6D3FD9}.ctrls div:nth-child(2) strong{color:#D63B7A}.ctrls div:nth-child(3) strong{color:#1597A6}.ctrls div:nth-child(4) strong{color:#D9771A}
.dash-note{color:rgba(255,255,255,.65)}

/* ---------- segurança ---------- */
#seguranca{background:radial-gradient(60% 60% at 0% 0%,rgba(139,92,255,.45),transparent 70%),linear-gradient(160deg,#2A0D5C 0%,#1A0A45 100%)}
.trust>div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:26px 24px}
.trust p{color:rgba(255,255,255,.8)}
.trust svg{width:54px;height:54px;padding:12px;border-radius:16px;margin-bottom:10px;stroke:#fff}
.trust>div:nth-child(1) svg{background:var(--g-violet)}
.trust>div:nth-child(2) svg{background:var(--g-rose)}
.trust>div:nth-child(3) svg{background:var(--g-aqua)}
.trust>div:nth-child(4) svg{background:var(--g-amber)}
.trust>div:nth-child(5) svg{background:var(--g-rose)}
.trust>div:nth-child(6) svg{background:var(--g-violet)}

/* ---------- dúvidas ---------- */
#duvidas{background:#120A33}
.faq details{border-bottom-color:rgba(255,255,255,.14)}
.faq summary{color:#fff}
.faq summary:hover,.faq details[open] summary{color:#FF8CC2}
.faq summary::after{border-color:#FF8CC2}
.faq details p,.faq .side p{color:rgba(255,255,255,.78)}

/* ---------- final ---------- */
.final{position:relative;overflow:hidden;background:radial-gradient(55% 90% at 0% 100%,rgba(255,79,154,.7),transparent 70%),radial-gradient(55% 90% at 100% 0%,rgba(34,199,218,.55),transparent 70%),linear-gradient(140deg,#3B1A9E,#6A22B8)}
.final p{color:rgba(255,255,255,.9)}
footer{background:#0B0624;border-top-color:rgba(255,255,255,.08)}

/* ---------- entradas suaves ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.vis{opacity:1;transform:none}
.plan.vip.rv.vis{transform:translateY(-10px)}
@media (max-width:900px){.plan.vip.rv.vis{transform:none}}
@media (prefers-reduced-motion:reduce){.aurora i,.ribbon-track,.twin,.float.shown{animation:none!important}.rv{opacity:1;transform:none}}

/* seletor de idioma */
.nav .lang{display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.nav .lang a{font-size:12px;font-weight:700;letter-spacing:.04em;padding:5px 8px;border-radius:999px;color:rgba(255,255,255,.72);text-decoration:none}
.nav .lang a:hover{color:#fff}
.nav .lang a[aria-current]{background:linear-gradient(90deg,#FF3D8F,#7A4DFF);color:#fff}
@media (max-width:900px){.nav .lang{align-self:flex-start;margin:6px 0}}