/* 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 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)}