/* CupeLoodles — landing. Tokens fluidos (320→1440) + cores do app (src/styles/tokens.css). */
@font-face{font-family:"Inter Variable";src:url(/fonts/inter-var.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --font:"Inter Variable","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"JetBrains Mono","Cascadia Code",Menlo,monospace;
  --bg:#141416; --bg-2:#1b1b1e;
  --panel-a:#39393c; --panel-b:#2b2c2e;
  --ink:#f7f7f9; --ink-2:rgba(247,247,249,.74); --ink-3:rgba(247,247,249,.56); --ink-4:rgba(247,247,249,.34); --ink-5:rgba(247,247,249,.14);
  --surface:rgba(255,255,255,.055); --surface-2:rgba(255,255,255,.085); --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --live:#ff3d55; --ok:#38d16b; --idle:#eabc32; --accent:#b783ff;
  --r-lg:20px; --r-md:14px; --r-sm:10px;
  --fs-small:clamp(13px,12.71px + .0893vw,14px);
  --fs-body:clamp(15px,14.43px + .1786vw,17px);
  --fs-lead:clamp(16px,15.31px + .2143vw,18.4px);
  --fs-eyebrow:clamp(10.6px,10.2px + .125vw,12px);
  --fs-h3:clamp(17px,14.54px + .7679vw,25.6px);
  --fs-h2:clamp(26px,19.71px + 1.964vw,48px);
  --fs-hero:min(clamp(34px,23.14px + 3.393vw,72px),8.2svh + 12px);
  --gutter:clamp(20px,14.29px + 1.786vw,40px);
  --section:clamp(56px,40px + 5vw,112px);
  --stack:clamp(12px,9.71px + .714vw,20px);
  --card:clamp(20px,16.57px + 1.071vw,32px);
  --btn-h:clamp(46px,44.29px + .536vw,52px);
  --btn-fs:clamp(13.5px,13.2px + .1vw,14.5px);
  --header:clamp(56px,51.43px + 1.429vw,72px);
  --maxw:1200px;
}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 12px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;font-family:var(--font);font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;overflow-x:clip;-webkit-tap-highlight-color:transparent;
  background:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) 0 0/48px 48px,
    radial-gradient(1200px 600px at 50% -10%,#2a2a2e 0%,transparent 70%),var(--bg)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;line-height:1.08;letter-spacing:-.025em;font-weight:750;text-wrap:balance}
p{margin:0;text-wrap:pretty}
.wrap{width:100%;max-width:calc(var(--maxw) + 2*var(--gutter));margin:0 auto;padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right))}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;z-index:99;background:#fff;color:#111;padding:8px 12px;border-radius:8px}

/* header */
.top{position:sticky;top:0;z-index:50;padding-top:env(safe-area-inset-top);background:rgba(20,20,22,.72);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.top .wrap{height:var(--header);display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-height:44px}
.brand img.mark{width:30px;height:30px;border-radius:9px}
.brand img.word{height:clamp(20px,17px + .9vw,26px);width:auto}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{font-size:var(--fs-small);color:var(--ink-2);text-decoration:none;padding:10px 12px;border-radius:999px;min-height:44px;display:inline-flex;align-items:center}
.nav a:hover{color:var(--ink);background:var(--surface)}
@media (max-width:820px){.nav{display:none}.top .btn{margin-left:auto}}

/* botões — pílula branca do app (btn-solid) e contorno (btn-outline) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:var(--btn-h);padding:10px clamp(18px,15px + 1vw,26px);border-radius:999px;font:600 var(--btn-fs)/1.25 var(--font);text-decoration:none;text-align:center;text-wrap:balance;border:1px solid transparent;cursor:pointer;transition:transform .15s ease,background .15s ease,border-color .15s ease}
.btn svg{flex:none;width:17px;height:17px}
.btn-solid{background:var(--ink);color:#141416}
.btn-solid:hover{background:#fff;transform:translateY(-1px)}
.btn-outline{background:var(--surface);color:var(--ink);border-color:var(--line-2)}
.btn-outline:hover{background:var(--surface-2)}
.btn:active{transform:scale(.98)}
.btn-sm{min-height:40px;padding:8px 16px;font-size:13px;position:relative}
.btn-sm::after{content:"";position:absolute;inset:-4px}

.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(56,209,107,.15)}
.eyebrow.live::before{background:var(--live);box-shadow:0 0 0 4px rgba(255,61,85,.16)}

/* hero */
.hero{padding-top:clamp(36px,20px + 4vw,84px);text-align:center}
.hero h1{font-size:var(--fs-hero);margin:var(--stack) auto 0;max-width:22ch}
.hero h1 .ln{display:inline-block;white-space:nowrap}
.hero h1 .dim{color:var(--ink-3)}
.hero .lead{font-size:var(--fs-lead);color:var(--ink-2);max-width:60ch;margin:var(--stack) auto 0}
.ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:calc(var(--stack)*1.6)}
.hero .note{margin-top:14px;font-size:var(--fs-small);color:var(--ink-3)}
.hero .note b{color:var(--ink-2);font-weight:600}
@media (max-width:639px){.ctas{flex-direction:column;align-items:stretch;max-width:360px;margin-left:auto;margin-right:auto}}

/* moldura de janela */
.window{position:relative;margin:clamp(36px,24px + 3vw,72px) auto 0;max-width:1180px;border-radius:clamp(12px,8px + 1vw,22px);padding:clamp(4px,2px + .5vw,8px);background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.03));box-shadow:0 40px 120px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.06)}
.window::before{content:"";position:absolute;inset:-10% 0 30%;z-index:-1;background:radial-gradient(closest-side,rgba(183,131,255,.18),transparent 70%);filter:blur(10px)}
.window picture,.window img{border-radius:clamp(9px,6px + .8vw,16px);overflow:hidden;background:#222326}
.shot{aspect-ratio:16/10;width:100%;object-fit:cover}
@media (max-width:640px){.shot{aspect-ratio:1000/780}}
.caption{margin-top:12px;font-size:var(--fs-small);color:var(--ink-4);text-align:center}

/* faixa de números */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:var(--section);background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.fact{background:var(--bg-2);padding:var(--card);text-align:left}
.fact b{display:block;font-size:var(--fs-h3);letter-spacing:-.02em;line-height:1.15}
.fact span{display:block;margin-top:6px;font-size:var(--fs-small);color:var(--ink-3)}
@media (max-width:900px){.facts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.facts{grid-template-columns:1fr}}

section{padding-top:var(--section)}
.head{max-width:720px}
.head.center{margin:0 auto;text-align:center}
.head h2{font-size:var(--fs-h2);margin-top:12px}
.head p{margin-top:var(--stack);color:var(--ink-2);font-size:var(--fs-lead)}

/* como funciona */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--stack);margin-top:calc(var(--stack)*2);counter-reset:s}
.step{position:relative;padding:var(--card);border-radius:var(--r-lg);background:linear-gradient(180deg,var(--panel-a),var(--panel-b));border:1px solid var(--line)}
.step::before{counter-increment:s;content:"0" counter(s);font:600 12px/1 var(--mono);color:var(--ink-3);display:inline-flex;padding:7px 9px;border-radius:8px;background:rgba(0,0,0,.25)}
.step h3{font-size:var(--fs-h3);margin-top:16px}
.step p{margin-top:10px;color:var(--ink-2);font-size:var(--fs-small)}
.step code,.faq code{font:500 .92em var(--mono);background:rgba(0,0,0,.3);padding:2px 6px;border-radius:6px;color:var(--ink);word-break:break-word}
@media (max-width:900px){.steps{grid-template-columns:1fr}}
.how-shot{margin-top:var(--stack);display:grid;grid-template-columns:1.15fr .85fr;gap:var(--stack);align-items:center}
.how-shot .frame{border-radius:var(--r-lg);border:1px solid var(--line-2);overflow:hidden;background:#252628}
.how-shot .side{padding:var(--card)}
.how-shot .side p{color:var(--ink-2);font-size:var(--fs-small)}
.how-shot .side p+p{margin-top:12px}
@media (max-width:900px){.how-shot{grid-template-columns:1fr}.how-shot .side{padding:4px 2px 0}}

/* recursos */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--stack);margin-top:calc(var(--stack)*2)}
.card{grid-column:span 6;border-radius:var(--r-lg);background:linear-gradient(180deg,#2e2f32,#232427);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column}
.card.wide{grid-column:span 12;display:grid;grid-template-columns:1fr 1.25fr;align-items:center}
.card.third{grid-column:span 4}
.card .txt{padding:var(--card)}
.card h3{font-size:var(--fs-h3)}
.card p{margin-top:10px;color:var(--ink-2);font-size:var(--fs-small)}
.card ul{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:8px;font-size:var(--fs-small);color:var(--ink-2)}
.card li{display:flex;gap:10px;align-items:flex-start}
.card li::before{content:"";flex:none;width:6px;height:6px;margin-top:.62em;border-radius:50%;background:var(--ink-3)}
.card .media{margin-top:auto;padding:0 var(--card) var(--card)}
.card .media img{border-radius:var(--r-md);border:1px solid var(--line-2);width:100%;background:#1f2022}
.card.wide .media{padding:var(--card) var(--card) var(--card) 0;margin:0}
.ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);margin-bottom:14px}
.ic svg{width:20px;height:20px}
@media (max-width:900px){.card,.card.third{grid-column:span 12}.card.wide{grid-template-columns:1fr}.card.wide .media{padding:0 var(--card) var(--card)}}
@media (min-width:901px) and (max-width:1100px){.card.third{grid-column:span 6}}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);margin-bottom:12px}
.pill.live{background:rgba(255,61,85,.16);color:#ff8a9a}

/* privacidade */
.own{display:grid;grid-template-columns:1fr 1fr;gap:var(--stack);margin-top:calc(var(--stack)*2)}
.own .box{padding:var(--card);border-radius:var(--r-lg);border:1px solid var(--line);background:var(--bg-2)}
.own .box h3{font-size:var(--fs-h3)}
.own .box p{margin-top:10px;color:var(--ink-2);font-size:var(--fs-small)}
.own .big{grid-row:span 2;background:linear-gradient(160deg,#2f3033,#1d1e21)}
.own .big .n{font-size:clamp(56px,40px + 5vw,112px);font-weight:800;letter-spacing:-.05em;line-height:1}
.own .big .n small{font-size:.32em;letter-spacing:-.01em;color:var(--ink-3);font-weight:600}
@media (max-width:900px){.own{grid-template-columns:1fr}.own .big{grid-row:auto}}

/* em aberto */
.soon{margin-top:calc(var(--stack)*2);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--stack)}
.soon div{padding:18px;border-radius:var(--r-md);border:1px dashed var(--line-2);color:var(--ink-2);font-size:var(--fs-small)}
.soon b{display:block;color:var(--ink);font-weight:650;margin-bottom:4px}
@media (max-width:900px){.soon{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.soon{grid-template-columns:1fr}}

/* faq */
.faq{margin-top:calc(var(--stack)*2);max-width:820px;margin-left:auto;margin-right:auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 2px;min-height:56px;font-weight:620;font-size:var(--fs-body)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--ink-2);font-weight:500;transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 2px 20px;color:var(--ink-2);font-size:var(--fs-small);max-width:68ch}

/* cta final */
.final{margin-top:var(--section);margin-bottom:var(--section);text-align:center;padding:clamp(36px,24px + 4vw,80px) var(--card);border-radius:clamp(20px,16px + 1vw,28px);border:1px solid var(--line-2);background:radial-gradient(600px 300px at 50% 0%,rgba(183,131,255,.16),transparent 70%),linear-gradient(180deg,#26272a,#1a1b1e)}
.final img.word{height:clamp(34px,26px + 2.4vw,60px);width:auto;margin:0 auto}
.final h2{font-size:var(--fs-h2);margin-top:18px}
.final p{margin:var(--stack) auto 0;color:var(--ink-2);max-width:56ch;font-size:var(--fs-lead)}

footer{border-top:1px solid var(--line);padding:28px 0 calc(28px + env(safe-area-inset-bottom));color:var(--ink-3);font-size:var(--fs-small)}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center}
footer .links{display:flex;flex-wrap:wrap;gap:4px 20px;align-items:center}
footer a{color:var(--ink-2);text-decoration:none;padding:10px 0}
footer a:hover{color:var(--ink)}

/* imagens lazy com fade */
img[loading=lazy]{opacity:0;transition:opacity .5s ease}
img[loading=lazy].in{opacity:1}
.no-js img[loading=lazy]{opacity:1}

.card .media img.fade-b{max-height:440px;object-fit:cover;object-position:top;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}

/* apoie / doação por Pix */
[hidden]{display:none!important}
.donate{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,16px + 2.5vw,56px);align-items:center;padding:clamp(24px,16px + 2.5vw,56px);border-radius:clamp(20px,16px + 1vw,28px);border:1px solid var(--line-2);background:radial-gradient(520px 320px at 85% 10%,rgba(56,209,107,.11),transparent 70%),radial-gradient(600px 360px at 0% 100%,rgba(183,131,255,.13),transparent 70%),linear-gradient(180deg,#232427,#1a1b1e)}
.donate-txt h2{font-size:var(--fs-h2);margin-top:12px;max-width:18ch}
.donate-txt>p{margin-top:var(--stack);color:var(--ink-2);font-size:var(--fs-lead);max-width:52ch}
.donate-points{margin:calc(var(--stack)*1.3) 0 0;padding:0;list-style:none;display:grid;gap:10px;font-size:var(--fs-small);color:var(--ink-2)}
.donate-points li{display:flex;gap:12px;align-items:flex-start}
.donate-points li::before{content:"";flex:none;width:18px;height:18px;margin-top:.15em;border-radius:50%;background:rgba(56,209,107,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338d16b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/11px no-repeat}
.donate-points b{color:var(--ink);font-weight:620}
.donate-card{padding:var(--card);border-radius:var(--r-lg);background:rgba(10,10,12,.42);border:1px solid var(--line);box-shadow:0 30px 80px -40px rgba(0,0,0,.9);display:grid;gap:14px}
.amounts{border:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.amounts legend{padding:0;margin-bottom:12px;font-weight:650;font-size:var(--fs-body)}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip span{display:flex;align-items:center;justify-content:center;min-height:48px;padding:6px 4px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--surface);font-weight:650;font-size:var(--fs-small);white-space:nowrap;transition:background .15s ease,border-color .15s ease,color .15s ease}
.chip:hover span{background:var(--surface-2)}
.chip input:checked+span{background:var(--ink);color:#141416;border-color:var(--ink)}
.chip input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.custom label{display:block;font-size:var(--fs-small);color:var(--ink-3);margin-bottom:6px}
.money{display:flex;align-items:center;gap:8px;min-height:50px;padding:0 14px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--surface)}
.money:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(183,131,255,.18)}
.money span{color:var(--ink-3);font-weight:600}
.money input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--ink);font:600 17px/1 var(--font)}
.donate-go{width:100%}
.donate-go.busy{opacity:.7;cursor:progress}
.donate-msg{font-size:var(--fs-small);color:var(--ink-3);min-height:0}
.donate-msg:empty{display:none}
.donate-msg.err{color:#ff8a9a}
.donate-card.done .amounts,.donate-card.done .custom,.donate-card.done .donate-go{display:none}
.pix{display:grid;gap:14px;text-align:center;animation:pixin .35s ease}
@keyframes pixin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pix .qr{justify-self:center;padding:12px;border-radius:var(--r-md);background:#fff;box-shadow:0 0 0 6px rgba(56,209,107,.12)}
.pix .qr img{width:clamp(180px,160px + 6vw,220px);height:auto;aspect-ratio:1;border-radius:6px}
.pix-hint{font-size:var(--fs-small);color:var(--ink-2)}
.pix-hint b{color:var(--ink)}
.copy{display:flex;gap:8px}
.copy input{flex:1;min-width:0;min-height:var(--btn-h);padding:0 14px;border-radius:999px;border:1px solid var(--line-2);background:rgba(0,0,0,.3);color:var(--ink-2);font:500 13px/1 var(--mono);text-overflow:ellipsis}
.copy .btn{flex:none}
.pix-exp{font-size:var(--fs-small);color:var(--ink-3)}
.linkish{background:none;border:0;color:var(--ink-2);font:500 var(--fs-small) var(--font);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:8px;justify-self:center}
.linkish:hover{color:var(--ink)}
.donate-foot{font-size:12px;color:var(--ink-4);text-align:center}
.faq details p a{color:var(--ink)}
@media (max-width:900px){.donate{grid-template-columns:1fr}.donate-txt h2{max-width:none}}
@media (max-width:420px){.amounts{grid-template-columns:repeat(2,1fr)}.copy{flex-direction:column}}

/* páginas legais */
.nav a[aria-current="page"]{color:var(--ink);background:var(--surface)}
.legal{padding:clamp(36px,20px + 4vw,72px) 0 var(--section);max-width:760px}
.legal h1{font-size:var(--fs-h2);margin:0}
.legal .updated{margin-top:14px;font-size:var(--fs-small);color:var(--ink-3)}
.legal h2{font-size:clamp(18px,16.3px + .5vw,22px);letter-spacing:-.02em;margin:calc(var(--stack)*2.2) 0 10px;font-weight:700}
.legal p,.legal li{color:var(--ink-2);max-width:68ch}
.legal p+p{margin-top:12px}
.legal ul{margin:12px 0 0;padding:0 0 0 1.15em;display:grid;gap:8px}
.legal a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:#fff}
.legal .lead-legal{margin-top:var(--stack);color:var(--ink-2);font-size:var(--fs-lead);max-width:62ch}