/* ShortsFinder — marketing site. Tokens mirror design/tokens.json (+ electric blue for web). */
:root{
  --bg:#07070C; --bg-navy:#0A0B1A; --surface:#12121A; --elevated:#1B1B26;
  --card:rgba(255,255,255,.035); --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.16);
  --text:#fff; --text-2:rgba(255,255,255,.7); --text-3:rgba(255,255,255,.45);
  --brand:#7C5CFF; --brand-soft:rgba(124,92,255,.16); --accent:#E040FB; --blue:#3B82F6; --cyan:#22D3EE; --hl:#FFD60A;
  --grad:linear-gradient(135deg,#7C5CFF 0%,#A24BFF 55%,#E040FB 100%);
  --grad-blue:linear-gradient(135deg,#3B82F6,#7C5CFF);
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --max:1240px; --r-card:24px;
  --glow:0 10px 30px rgba(124,92,255,.45);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{background:var(--bg);color:var(--text);font:400 16px/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.i{width:24px;height:24px;flex:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
section{position:relative;padding:112px 0}
main,footer{overflow-x:clip}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:700 12px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
.eyebrow.pill{padding:8px 14px;border-radius:999px;border:1px solid var(--border-strong);background:var(--card);color:var(--text)}
.eyebrow.pill .i{width:16px;height:16px;color:var(--brand)}
h1,h2,h3{font-family:var(--font);letter-spacing:-.03em}
h2{font:800 clamp(32px,4.6vw,52px)/1.08 var(--font);letter-spacing:-.035em;margin:14px 0 16px}
h3{font:700 18px/1.3 var(--font);letter-spacing:-.01em}
.lead{font:400 clamp(16px,1.5vw,18px)/1.6 var(--font);color:var(--text-2);max-width:560px}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.muted{color:var(--text-3)}
.center{text-align:center}.center .lead{margin-inline:auto}
.sec-head{max-width:720px;margin-bottom:56px}
.sec-head.center{margin-inline:auto}

/* ---------- buttons / store badges ---------- */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;border-radius:14px;font:600 15px/1 var(--font);transition:transform .2s,box-shadow .2s,background .2s}
.btn-primary{background:var(--grad);box-shadow:var(--glow),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(124,92,255,.6),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-ghost{border:1px solid var(--border-strong);background:var(--card)}
.btn-ghost:hover{background:rgba(255,255,255,.07)}
.stores{display:flex;flex-wrap:wrap;gap:14px}
.store{display:inline-flex;align-items:center;gap:14px;height:64px;padding:0 26px 0 20px;border-radius:18px;transition:transform .2s,box-shadow .2s,background .2s}
.store .i{width:30px;height:30px}
.store small{display:block;font:500 12px/1.2 var(--font);opacity:.8}
.store b{display:block;font:700 20px/1.15 var(--font);letter-spacing:-.01em}
.store.apple{border:1px solid var(--border-strong);background:rgba(0,0,0,.4)}
.store.apple:hover{background:rgba(255,255,255,.06);transform:translateY(-2px)}
.store.play{background:var(--grad);box-shadow:var(--glow),inset 0 1px 0 rgba(255,255,255,.25)}
.store.play:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(124,92,255,.6)}

/* ---------- language switcher ---------- */
.lang{position:relative;display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 10px 0 12px;border-radius:12px;border:1px solid var(--border);color:var(--text-2);cursor:pointer;transition:border-color .2s,color .2s}
.lang:hover,.lang:focus-within{border-color:var(--border-strong);color:#fff}
.lang .i{width:18px;height:18px}
.lang select{appearance:none;-webkit-appearance:none;background:transparent;border:0;color:inherit;font:600 14px var(--font);cursor:pointer;padding-right:16px;outline:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:right 5px center,right 0 center;background-size:5px 5px;background-repeat:no-repeat}
.lang select option{background:#12121A;color:#fff}
.mobile-menu .lang{margin-top:16px;height:52px;align-self:flex-start}
.mobile-menu .lang select{font-size:16px}
/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(7,7,12,.75);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-color:var(--border)}
.nav .wrap{display:flex;align-items:center;gap:32px;height:76px}
.logo{display:flex;align-items:center;gap:10px;flex:none;white-space:nowrap;font:800 20px/1 var(--font);letter-spacing:-.02em}
.logo svg{width:34px;height:34px}
.nav-links{display:flex;gap:28px;margin-left:auto;white-space:nowrap;font:500 14px var(--font);color:var(--text-2)}
.nav-links a:hover{color:#fff}
.nav .btn{height:44px}
.menu-btn{display:none;width:44px;height:44px;border-radius:12px;place-items:center;border:1px solid var(--border)}
.mobile-menu{display:none}

/* ---------- background fx ---------- */
.glow{position:absolute;border-radius:50%;filter:blur(110px);pointer-events:none;z-index:0}
.waves{position:absolute;left:0;right:0;pointer-events:none;z-index:0;opacity:.9}
.waves path{animation:drift 14s ease-in-out infinite alternate}
@keyframes drift{to{transform:translateX(-40px)}}
.rel{position:relative;z-index:1}

/* ---------- hero ---------- */
.hero{padding:56px 0 96px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero h1{font:800 clamp(44px,5.6vw,76px)/1.02 var(--font);letter-spacing:-.045em;margin:22px 0 22px}
.hero .lead{margin-bottom:34px}
.proof{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:28px;font:500 14px var(--font);color:var(--text-3)}
.proof span{display:inline-flex;align-items:center;gap:6px}
.proof .i{width:16px;height:16px;color:var(--brand)}
.hero-visual{position:relative;height:640px}
.phone{--w:300px;position:absolute;width:var(--w);aspect-ratio:393/852;border-radius:calc(var(--w)*.15);padding:calc(var(--w)*.03);background:linear-gradient(160deg,#2b2b36,#121218 40%,#1d1d27);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 90px rgba(0,0,0,.6),0 0 80px rgba(124,92,255,.25)}
.phone img{width:100%;height:100%;object-fit:cover;border-radius:calc(var(--w)*.125)}
.hero .p1{--w:300px;left:4%;top:24px;z-index:2;transform:rotate(-6deg);animation:float 7s ease-in-out infinite}
.hero .p2{--w:270px;right:2%;top:96px;z-index:1;transform:rotate(7deg);animation:float 7s ease-in-out -3.5s infinite;opacity:.95}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -14px}}
.chip-float{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;background:rgba(18,18,26,.8);backdrop-filter:blur(14px);border:1px solid var(--border-strong);font:600 13px var(--font);box-shadow:0 20px 40px rgba(0,0,0,.4);animation:float 6s ease-in-out -1s infinite}
.chip-float .i{width:16px;height:16px;color:var(--hl)}
.chip-float em{font-style:normal;color:var(--hl)}

/* ---------- media primitives (shared with app) ---------- */
.c-podcast{--a:#2E1065;--b:#F97316}.c-fight{--a:#1A0505;--b:#E11D48}.c-racing{--a:#0B1220;--b:#0EA5E9}.c-football{--a:#03140C;--b:#16A34A}.c-gaming{--a:#140B2E;--b:#A855F7}.c-cars{--a:#120F0A;--b:#F59E0B}.c-events{--a:#1E0B2E;--b:#EC4899}.c-edu{--a:#04161C;--b:#14B8A6}.c-interview{--a:#0F0F1F;--b:#6366F1}.c-react{--a:#1F0A0A;--b:#FB7185}
.media{background:radial-gradient(circle at 65% 30%,rgba(255,255,255,.22),transparent 55%),linear-gradient(145deg,var(--a),var(--b))}
/* Gemini photos (assets/photos) replace gradient + glyph for categories that have one; override per element with style="--img:url(...)" */
.c-podcast{--img:url(assets/photos/podcast.webp)}.c-fight{--img:url(assets/photos/fight-ko.webp)}.c-racing{--img:url(assets/photos/race.webp)}.c-football{--img:url(assets/photos/football.webp)}.c-events{--img:url(assets/photos/crowd.webp)}
.media:is(.c-podcast,.c-fight,.c-racing,.c-football,.c-events){background:linear-gradient(rgba(0,0,0,.12),rgba(0,0,0,.05) 35%,rgba(0,0,0,.55)),var(--img) center/cover}
.media:is(.c-podcast,.c-fight,.c-racing,.c-football,.c-events)>.glyph{display:none}
.short{--w:180px;width:var(--w);aspect-ratio:9/16;border-radius:calc(var(--w)*.09);position:relative;overflow:hidden;flex:none;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.short::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.78))}
.short .glyph{position:absolute;left:50%;top:24%;transform:translateX(-50%);color:rgba(255,255,255,.28);width:calc(var(--w)*.4);height:calc(var(--w)*.4)}
.short .cap{position:absolute;z-index:2;left:7%;right:7%;bottom:14%;text-align:center;font:800 calc(var(--w)*.112)/1.05 Montserrat,sans-serif;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.short .cap b{color:var(--hl);font-weight:inherit}
.short .tag{position:absolute;z-index:2;top:calc(var(--w)*.055);display:flex;align-items:center;gap:4px;padding:calc(var(--w)*.022) calc(var(--w)*.05);border-radius:999px;background:rgba(0,0,0,.5);backdrop-filter:blur(10px);font:600 calc(var(--w)*.065)/1.3 var(--font)}
.short .tag.l{left:calc(var(--w)*.055)} .short .tag.r{right:calc(var(--w)*.055)}
.short .tag .i{width:1em;height:1em;color:var(--hl)}
.cap.minimal{font:600 calc(var(--w)*.09)/1.25 var(--font)!important;text-shadow:none}
.cap.minimal b{color:#fff!important;font-weight:700}
.cap.highlight b{background:var(--hl);color:#0b0b10!important;padding:0 .12em;border-radius:.12em}
.cap.karaoke b{background:var(--brand);color:#fff!important;padding:0 .12em;border-radius:.12em}
.cap.modern{font-family:Anton,sans-serif!important;font-weight:400!important;text-transform:uppercase;font-size:calc(var(--w)*.13)!important;letter-spacing:.01em}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-card)}

/* ---------- what it does ---------- */
.flow{display:grid;grid-template-columns:1.3fr auto 1fr;gap:28px;align-items:center}
.player{border-radius:22px;overflow:hidden;position:relative;aspect-ratio:16/9;box-shadow:0 30px 80px rgba(0,0,0,.5);border:1px solid var(--border-strong)}
.player .glyph{position:absolute;inset:0;margin:auto;width:22%;height:22%;color:rgba(255,255,255,.3)}
.player .bar{position:absolute;left:0;right:0;bottom:0;padding:18px 18px 14px;background:linear-gradient(transparent,rgba(0,0,0,.7));display:flex;align-items:center;gap:14px;font:600 12px var(--font)}
.player .track{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.25);position:relative}
.player .track i{position:absolute;top:-4px;width:12px;height:12px;border-radius:50%;background:var(--hl);box-shadow:0 0 0 3px rgba(0,0,0,.5)}
.player .track b{position:absolute;left:0;top:0;bottom:0;width:38%;background:#FF0033;border-radius:2px}
.player .scan{position:absolute;top:0;bottom:0;width:22%;background:linear-gradient(90deg,rgba(124,92,255,0),rgba(124,92,255,.45) 90%,#fff);animation:scan 4s linear infinite}
@keyframes scan{from{left:-22%}to{left:100%}}
.ai-node{display:flex;flex-direction:column;align-items:center;gap:10px;font:700 12px var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.ai-node .core{width:72px;height:72px;border-radius:22px;background:var(--grad);display:grid;place-items:center;box-shadow:0 0 0 10px rgba(124,92,255,.1),0 0 60px rgba(124,92,255,.6)}
.ai-node .core .i{width:32px;height:32px}
.ai-node .arrow{color:var(--text-3)}
.shorts-row{display:flex;gap:14px;justify-content:center}
.shorts-row .short:nth-child(2){transform:translateY(-18px)}
.pipeline{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:48px}
.pipeline span{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;border:1px solid var(--border);background:var(--card);font:600 13px var(--font);color:var(--text-2)}
.pipeline .i{width:16px;height:16px;color:var(--text-3)}

/* ---------- how it works ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{min-width:0;padding:24px;display:flex;flex-direction:column;gap:12px}
.step .num{width:36px;height:36px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font:700 15px var(--font);box-shadow:var(--glow)}
.step p{font-size:14px;color:var(--text-2);line-height:1.55}
.step .viz{margin-top:auto;height:132px;border-radius:16px;background:rgba(0,0,0,.35);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;overflow:hidden}
.viz .url{display:flex;align-items:center;gap:8px;width:100%;height:44px;padding:0 12px;border-radius:12px;background:#fff;color:#888;font:500 12px var(--font);white-space:nowrap;overflow:hidden}
.viz .url .i{width:20px;height:20px}
.viz .frame{width:44px;aspect-ratio:9/16;border-radius:8px;flex:none;position:relative;opacity:.55}
.viz .frame.on{opacity:1;outline:2px solid var(--brand);outline-offset:2px;transform:scale(1.08)}
.viz .social{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--elevated);border:1px solid var(--border)}
.viz .social .i{width:22px;height:22px}

/* ---------- detection ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split.rev .split-visual{order:-1}
.split-visual{position:relative;display:flex;justify-content:center;min-height:560px}
.split-visual .phone{position:relative;--w:290px}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;max-width:520px}
.tags span{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid var(--border);background:var(--card);font:600 14px var(--font);color:var(--text-2);transition:all .4s}
.tags span .i{width:16px;height:16px;color:var(--text-3);transition:color .4s}
.tags span.on{border-color:var(--brand);background:var(--brand-soft);color:#fff;box-shadow:0 0 30px rgba(124,92,255,.35)}
.tags span.on .i{color:var(--hl)}
.score-card{position:absolute;z-index:3;padding:14px 16px;border-radius:18px;background:rgba(18,18,26,.85);backdrop-filter:blur(14px);border:1px solid var(--border-strong);box-shadow:0 20px 50px rgba(0,0,0,.45);display:flex;align-items:center;gap:12px}
.score-card .big{font:800 30px/1 var(--font);color:var(--hl);letter-spacing:-.03em}
.score-card small{display:block;font:500 12px/1.4 var(--font);color:var(--text-3)}
.score-card b{font:700 14px var(--font)}

/* ---------- categories ---------- */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cat{position:relative;aspect-ratio:1/1.08;border-radius:22px;overflow:hidden;padding:18px;display:flex;flex-direction:column;justify-content:flex-end;border:1px solid var(--border);transition:transform .3s}
.cat:hover{transform:translateY(-4px)}
.cat::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(0,0,0,.7))}
.cat>*{position:relative;z-index:1}
.cat .glyph{position:absolute;z-index:0;top:22%;left:50%;transform:translateX(-50%);width:34%;height:auto;aspect-ratio:1;color:rgba(255,255,255,.3)}
.cat h3{font-size:19px}
.cat .det{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-bottom:10px;padding:5px 10px;border-radius:999px;background:rgba(0,0,0,.5);backdrop-filter:blur(10px);font:600 11px var(--font);letter-spacing:.06em;text-transform:uppercase}
.cat .det .i{width:12px;height:12px;color:var(--hl)}

/* ---------- captions ---------- */
.cap-row{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
.cap-item{display:flex;flex-direction:column;align-items:center;gap:14px;font:600 14px var(--font);color:var(--text-2)}
.cap-item .short{--w:196px}

/* ---------- editing ---------- */
.tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:28px;max-width:520px}
.tools span{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid var(--border);background:var(--card);font:600 14px var(--font)}
.tools .ib{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);flex:none}
.tools .ib .i{width:18px;height:18px}
.note{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font:500 13px var(--font);color:var(--text-3)}
.note .i{width:16px;height:16px}

/* ---------- before / after ---------- */
.ba{border-radius:32px;padding:48px;background:radial-gradient(120% 120% at 0% 0%,rgba(124,92,255,.35),transparent 60%),radial-gradient(100% 100% at 100% 100%,rgba(59,130,246,.25),transparent 60%),#0E0B22;border:1px solid rgba(124,92,255,.35);display:grid;grid-template-columns:1.25fr auto 1.15fr;gap:32px;align-items:center;overflow:hidden}
.ba-label{font:700 15px var(--font);color:#C4B5FD;margin-bottom:18px;text-align:center}
.ba .arrow{color:var(--accent);width:72px;height:auto}
.ba .shorts-row{padding-top:18px}.ba .shorts-row .short{--w:150px}
.ba .player .glyph{color:rgba(255,255,255,.28)}
.reveal-ba .shorts-row .short{opacity:0;transform:translateY(24px) scale(.96);transition:opacity .6s,transform .6s}
.reveal-ba.in .shorts-row .short{opacity:1;transform:none}
.reveal-ba.in .shorts-row .short:nth-child(2){transition-delay:.15s;transform:translateY(-18px)}
.reveal-ba.in .shorts-row .short:nth-child(3){transition-delay:.3s}

/* ---------- features ---------- */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature{padding:28px;display:flex;flex-direction:column;gap:10px;transition:border-color .3s,transform .3s}
.feature:hover{border-color:rgba(124,92,255,.5);transform:translateY(-3px)}
.feature .ib{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--brand-soft);color:#B9A8FF;margin-bottom:8px;box-shadow:inset 0 0 0 1px rgba(124,92,255,.3)}
.feature p{color:var(--text-2);font-size:15px}

/* ---------- screenshots ---------- */
.shots-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.shots-nav{display:flex;gap:10px}
.shots-nav button{width:48px;height:48px;border-radius:14px;border:1px solid var(--border-strong);display:grid;place-items:center;transition:background .2s}
.shots-nav button:hover{background:rgba(255,255,255,.07)}
.shots{display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;padding:24px max(24px,calc((100vw - var(--max))/2 + 24px)) 40px;scrollbar-width:none}
.shots::-webkit-scrollbar{display:none}
.shot{scroll-snap-align:center;flex:none;display:flex;flex-direction:column;align-items:center;gap:18px}
.shot .phone{position:relative;--w:250px}
.shot span{font:600 13px var(--font);color:var(--text-3);letter-spacing:.08em;text-transform:uppercase}
.shot span b{color:var(--text);margin-right:6px}

/* ---------- cta ---------- */
.cta{border-radius:36px;overflow:hidden;position:relative;padding:72px 64px;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;background:radial-gradient(90% 140% at 100% 0%,rgba(224,64,251,.35),transparent 55%),radial-gradient(90% 140% at 0% 100%,rgba(59,130,246,.3),transparent 55%),#100C26;border:1px solid rgba(124,92,255,.35)}
.cta h2{font-size:clamp(34px,4.4vw,56px)}
.cta .lead{margin-bottom:32px}
.cta-visual{position:relative;height:420px}
.cta-visual .phone{--w:240px;left:50%;top:0;transform:translateX(-50%) rotate(6deg);animation:float 7s ease-in-out infinite}

/* ---------- faq ---------- */
.faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq details{border:1px solid var(--border);background:var(--card);border-radius:18px;transition:border-color .3s}
.faq details[open]{border-color:rgba(124,92,255,.45)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:22px 24px;font:600 17px var(--font)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .i{margin-left:auto;transition:transform .3s;color:var(--text-3)}
.faq details[open] summary .i{transform:rotate(45deg);color:var(--brand)}
.faq details p{padding:0 24px 22px;color:var(--text-2);max-width:680px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--border);padding:64px 0 40px;margin-top:40px}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.foot p{color:var(--text-3);margin-top:12px;font-size:15px}
.foot h4{font:600 13px var(--font);color:var(--text-3);text-transform:uppercase;letter-spacing:.1em;margin-bottom:16px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:15px;color:var(--text-2)}
.foot ul a:hover{color:#fff}
.socials{display:flex;gap:10px;margin-top:24px}
.socials a{width:44px;height:44px;border-radius:12px;border:1px solid var(--border);display:grid;place-items:center;color:var(--text-2);transition:all .2s}
.socials a:hover{color:#fff;border-color:var(--border-strong);background:var(--card)}
.socials .i{width:20px;height:20px}
.foot .stores .store{height:52px;padding:0 18px 0 14px;border-radius:14px}
.foot .stores .store .i{width:24px;height:24px}
.foot .stores .store b{font-size:16px}
.copy{margin-top:48px;padding-top:24px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--text-3);font-size:14px}

/* ---------- legal pages ---------- */
.legal{max-width:760px;margin:0 auto;padding:64px 24px 96px}
.legal h1{font:800 clamp(36px,5vw,52px)/1.1 var(--font);margin-bottom:8px}
.legal h2{font:700 22px/1.3 var(--font);margin:40px 0 10px;letter-spacing:-.01em}
.legal p,.legal li{color:var(--text-2);margin-bottom:12px}
.legal ul,.legal ol{padding-left:20px}
.legal h3{font:700 17px/1.4 var(--font);margin:24px 0 6px}
.guide .lead{font-size:18px;margin:16px 0 8px}
.guide-cta{margin:48px 0 32px;padding:32px;border-radius:24px;background:var(--card);border:1px solid var(--border)}
.guide-cta h2{margin-top:0}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal,.reveal-ba .short{opacity:1!important;transform:none!important}html{scroll-behavior:auto}}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  section{padding:88px 0}
  .hero .wrap{grid-template-columns:1fr;text-align:center}
  .hero .lead{margin-inline:auto}
  .hero .stores,.proof{justify-content:center}
  .hero-visual{height:560px;max-width:560px;margin:0 auto;width:100%}
  .flow{grid-template-columns:1fr;justify-items:center}
  .flow .player{width:100%;max-width:640px}
  .ai-node .arrow{transform:rotate(90deg)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:40px}
  .split.rev .split-visual{order:0}
  .split-visual{min-height:0}
  .cats{grid-template-columns:repeat(2,1fr)}
  .features{grid-template-columns:repeat(2,1fr)}
  .ba{grid-template-columns:1fr;padding:32px}
  .ba .arrow{transform:rotate(90deg);margin:0 auto;width:56px}
  .cta{grid-template-columns:1fr;padding:56px 32px 0;text-align:center}
  .cta .lead{margin-inline:auto}.cta .stores{justify-content:center}
  .cta-visual{height:340px;overflow:hidden}
  .foot{grid-template-columns:1fr 1fr}
  .foot>div:first-child{grid-column:1/-1}
}
@media (max-width:1024px){
  .nav-links,.nav .btn-primary.desk,.nav .lang.desk{display:none}
  .menu-btn{display:grid}
  .nav .wrap{gap:12px}
  .nav .btn-primary.mob{margin-left:auto;height:40px;padding:0 16px;font-size:14px}
  .mobile-menu{position:fixed;inset:76px 0 auto;z-index:49;background:rgba(7,7,12,.96);backdrop-filter:blur(18px);border-bottom:1px solid var(--border);padding:12px 24px 24px;display:flex;flex-direction:column;transform:translateY(-8px);opacity:0;pointer-events:none;transition:all .25s}
  .mobile-menu.open{transform:none;opacity:1;pointer-events:auto}
  .mobile-menu a{padding:16px 4px;font:600 18px var(--font);border-bottom:1px solid var(--border)}
  .mobile-menu .stores{margin-top:20px}
}
@media (min-width:1025px){.nav .btn-primary.mob{display:none}}
@media (max-width:640px){
  .wrap{padding:0 16px}
  section{padding:72px 0}
  .hero{padding:24px 0 56px}
  .hero h1{font-size:44px}
  .stores{flex-direction:column;align-items:stretch}
  .store{justify-content:center;height:60px}
  .hero-visual{height:470px}
  .hero .p1{--w:220px;left:2%}
  .hero .p2{--w:200px;right:0;top:70px}
  .chip-float{font-size:12px;padding:8px 12px}
  .shorts-row .short{--w:100px!important}
  .shorts-row{gap:10px}
  .steps,.features{grid-template-columns:1fr}
  .step .viz{height:120px}
  .split-visual .phone{--w:250px}
  .cats{grid-template-columns:repeat(2,1fr);gap:12px}
  .cat{padding:14px;border-radius:18px}
  .cat h3{font-size:16px}
  .cap-row{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 8px;scrollbar-width:none}
  .cap-item{scroll-snap-align:center}
  .cap-item .short{--w:170px}
  .tools{grid-template-columns:1fr 1fr}
  .tools span{font-size:13px;padding:10px}
  .ba{padding:24px 16px;border-radius:24px}
  .shots-nav{display:none}
  .shot .phone{--w:220px}
  .shots{gap:18px;padding:16px 16px 32px}
  .cta{padding:44px 20px 0;border-radius:28px}
  .foot{grid-template-columns:1fr}
  .score-card{transform:scale(.85)}
}