/* Layout: dark stage lit by a liquid WebGL gradient; one phone carries the story, pinned while copy scrolls past. */
:root{
  --ink:#06090d; --deep:#0b1219; --panel:#101a23; --line:rgba(150,205,225,.14);
  --text:#e9f4f8; --mute:#8ea5b1; --cyan:#52b8d3; --coral:#ff7a59; --sun:#ffc857; --mint:#7cf2c9;
  --display:"Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --skew:0deg; --gut-l:max(16px, env(safe-area-inset-left,0px)); --gut-r:max(16px, env(safe-area-inset-right,0px));
  color-scheme:dark;
}
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
html,body{overflow-x:clip}
body{background:var(--ink);color:var(--text);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--ink)}
a{color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
.wrap{max-width:1240px;margin:0 auto;padding-left:var(--gut-l);padding-right:var(--gut-r)}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;letter-spacing:-.02em}
h2{font-size:clamp(2.3rem,6vw,4.6rem);line-height:.98;font-weight:750;font-variation-settings:"wdth" 78}
.eyebrow{font:600 .74rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);display:inline-flex;gap:.6em;align-items:center}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;border-radius:2px}
p{margin:0}
.lede{color:var(--mute);max-width:58ch;font-size:1.08rem}

.ic{width:1em;height:1em;display:inline-block;flex:none;vertical-align:-.12em}
.arr{width:1.05em;height:1.05em;display:inline-block;transition:transform .3s}
.btn:hover .arr{transform:translateX(4px) rotate(-45deg)}
.btn:hover .arr.play-ic{transform:scale(1.2)}
.sig{display:inline-flex;gap:.3em;align-items:center}
.chip i .ic{width:16px;height:16px}
.svc .go .ic{width:20px;height:20px}
.shield .ic{width:1.6em;height:1.6em;color:var(--coral)}
.toast i .ic,.okc .ic{width:60%;height:60%}
.reel b .ic{width:1.1em;height:1.1em}
.burst .ic{width:1em;height:1em}
/* ---------- nav ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);background:color-mix(in oklab,var(--ink) 62%,transparent);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:24px;padding-block:12px}
.logo img{height:42px;width:auto;display:block}
.links{display:flex;gap:4px;margin-left:auto}
.links a{text-decoration:none;color:var(--mute);font-weight:500;font-size:.95rem;padding:8px 12px;border-radius:99px;position:relative;transition:color .25s}
.links a:hover,.links a[aria-current="page"]{color:var(--text)}
.links a[aria-current="page"]::after{transform:scaleX(1)}
.links a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;background:var(--cyan);transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.7,0,.2,1)}
.links a:hover::after{transform:scaleX(1);transform-origin:left}
.btn{--bg:var(--cyan);display:inline-flex;align-items:center;gap:.6em;border:0;cursor:pointer;font:600 .98rem/1 var(--body);color:var(--ink);background:var(--bg);padding:15px 22px;border-radius:99px;text-decoration:none;position:relative;overflow:hidden;isolation:isolate;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),var(--sun),transparent 70%);opacity:0;transition:opacity .3s}
.btn:hover::before{opacity:1}
.btn.ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.ghost::before{background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),rgba(82,184,211,.35),transparent 70%)}
.nav .btn{padding:12px 18px;font-size:.9rem}
.menu-btn{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;cursor:pointer;position:relative}
.menu-btn span{position:absolute;left:13px;right:13px;height:2px;background:var(--text);border-radius:2px;transition:transform .35s,top .35s}
.menu-btn span:first-child{top:17px}.menu-btn span:last-child{top:25px}
.menu-btn[aria-expanded="true"] span:first-child{top:21px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{top:21px;transform:rotate(-45deg)}
@media (max-width:1100px){
  .links{position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--deep);padding:12px var(--gut-r) 18px var(--gut-l);border-bottom:1px solid var(--line);clip-path:inset(0 0 100% 0);transition:clip-path .45s cubic-bezier(.7,0,.2,1)}
  .links.open{clip-path:inset(0 0 0 0)}
  .links a{font-size:1.4rem;font-family:var(--display);color:var(--text)}
  .menu-btn{display:block;margin-left:auto}
  .nav .btn{display:none}
  .logo img{height:36px}
}

/* ---------- hero ---------- */
.hero{position:relative;overflow:clip;isolation:isolate}
#liquid{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(6,9,13,.82) 0%,rgba(6,9,13,.45) 48%,rgba(6,9,13,.05) 100%),linear-gradient(0deg,var(--ink) 0%,transparent 22%)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:40px;align-items:center;padding-block:clamp(56px,9vw,120px) clamp(72px,9vw,120px)}
.hero-copy{display:grid;gap:26px;min-width:0}
.h1-stage{position:relative}
.hero h1{font-size:clamp(3rem,8.4vw,7.4rem);line-height:.9;font-weight:800;font-variation-settings:"wdth" 76,"opsz" 96;letter-spacing:-.035em}
.hero h1 .w{display:inline-block;transform:skewX(calc(var(--skew) * -1.4));transition:transform .2s}
.hero h1 em{font-style:normal;color:transparent;background:linear-gradient(100deg,var(--cyan),var(--mint) 45%,var(--sun) 70%,var(--coral));-webkit-background-clip:text;background-clip:text;background-size:220% 100%;animation:sheen 7s ease-in-out infinite alternate}
@keyframes sheen{to{background-position:100% 0}}
.lens-layer{position:absolute;inset:0;pointer-events:none;clip-path:circle(0px at 50% 50%);filter:url(#refract);transform:scale(1.08);transform-origin:var(--lx,50%) var(--ly,50%);text-shadow:-3px 0 rgba(255,122,89,.85),3px 0 rgba(82,184,211,.9);color:#fff}
.lens-layer em{color:#fff;background:none;-webkit-background-clip:initial;background-clip:initial}
.lens-ring{position:absolute;width:150px;height:150px;border-radius:50%;left:0;top:0;pointer-events:none;border:1px solid rgba(255,255,255,.35);box-shadow:inset 0 0 30px rgba(255,255,255,.12),0 10px 40px rgba(0,0,0,.4);opacity:0;transition:opacity .3s;translate:-50% -50%}
.h1-stage.lensing .lens-ring{opacity:1}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.proof{display:flex;flex-wrap:wrap;gap:22px;color:var(--mute);font:500 .78rem/1.3 var(--mono);letter-spacing:.04em}
.proof b{display:block;color:var(--text);font:700 1.5rem/1 var(--display);letter-spacing:-.01em;margin-bottom:4px}

.hero-device{position:relative;display:grid;place-items:center;perspective:1200px;min-width:0}
.chip{position:absolute;z-index:3;padding:10px 14px;border-radius:14px;background:rgba(12,20,28,.72);border:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font:600 .8rem/1.2 var(--body);white-space:nowrap;box-shadow:0 18px 40px rgba(0,0,0,.35);display:flex;gap:10px;align-items:center}
.chip i{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-style:normal;font-size:.8rem;color:var(--ink);font-weight:800}
.chip small{display:block;color:var(--mute);font:500 .68rem/1.2 var(--mono)}
.chip.a{top:8%;left:-6%}.chip.b{top:44%;right:-8%}.chip.c{bottom:8%;left:2%}
.float{animation:bob 6s ease-in-out infinite}
.chip.b.float{animation-delay:-2s}.chip.c.float{animation-delay:-4s}
@keyframes bob{50%{transform:translateY(-10px)}}

/* ---------- phone ---------- */
.phone{--pw:290px;width:var(--pw);max-width:100%;aspect-ratio:9/19;border-radius:calc(var(--pw)*.15);padding:calc(var(--pw)*.032);background:linear-gradient(145deg,#2b3540,#0b1016 40%,#1b232c);box-shadow:0 0 0 1.5px #3a4651 inset,0 40px 80px -20px rgba(0,0,0,.75),0 0 120px -30px rgba(82,184,211,.45);position:relative;transform-style:preserve-3d;font-size:calc(var(--pw)*.048);cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}
.phone::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.18) 0%,transparent 28%,transparent 70%,rgba(255,255,255,.06));mix-blend-mode:screen}
.screen{position:relative;height:100%;border-radius:calc(var(--pw)*.12);overflow:hidden;background:#0a1118;isolation:isolate}
.island{position:absolute;top:.7em;left:50%;translate:-50% 0;width:32%;height:1.6em;border-radius:1em;background:#000;z-index:20;transition:width .5s cubic-bezier(.2,.9,.2,1.2),height .5s cubic-bezier(.2,.9,.2,1.2);display:flex;align-items:center;justify-content:center;overflow:hidden;color:#fff;font:600 .62em/1 var(--body);gap:.5em}
.island span{opacity:0;transition:opacity .3s;white-space:nowrap}
.island.pop{width:78%;height:2.6em}
.island.pop span{opacity:1;transition-delay:.25s}
.island i{width:1.5em;height:1.5em;border-radius:.45em;background:var(--cyan);flex:none}
.status{position:absolute;top:.85em;left:1.6em;right:1.6em;display:flex;justify-content:space-between;font:600 .62em/1 var(--body);z-index:19;color:#fff}
.ripple{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.55),rgba(82,184,211,.25) 50%,transparent 70%);transform:translate(-50%,-50%) scale(0);animation:rip .7s ease-out forwards;z-index:30;width:8em;height:8em}
@keyframes rip{to{transform:translate(-50%,-50%) scale(2.2);opacity:0}}

/* hero phone screen: store listing */
.store{position:absolute;inset:0;padding:3.6em 1.2em 1.2em;display:flex;flex-direction:column;gap:1em;background:radial-gradient(120% 60% at 50% 0%,#14303b,#0a1118 60%)}
.store .top{display:flex;gap:.9em;align-items:center}
.appicon{width:4.4em;height:4.4em;flex:none;border-radius:1.2em;background:conic-gradient(from var(--ang),var(--cyan),var(--mint),var(--sun),var(--coral),var(--cyan));animation:spin 8s linear infinite,morph 9s ease-in-out infinite;box-shadow:0 .6em 1.6em rgba(82,184,211,.35)}
@keyframes spin{to{--ang:360deg}}
@keyframes morph{0%,100%{border-radius:1.2em}33%{border-radius:42% 58% 55% 45%/48% 42% 58% 52%}66%{border-radius:2.2em .8em 2.2em .8em}}
.store h4{margin:0;font:700 1.1em/1.15 var(--display)}
.store .meta{color:#9fb3be;font-size:.7em}
.store .row{display:flex;justify-content:space-between;text-align:center;font-size:.66em;color:#9fb3be;border-block:1px solid rgba(255,255,255,.08);padding-block:.8em}
.store .row b{display:block;color:#fff;font-size:1.25em}
.installbar{position:relative;height:2.6em;border-radius:1.3em;background:var(--cyan);color:var(--ink);font-weight:700;font-size:.8em;display:grid;place-items:center;overflow:hidden}
.installbar::before{content:"";position:absolute;inset:0;background:var(--mint);transform:scaleX(var(--p,0));transform-origin:left;transition:transform .2s}
.installbar span{position:relative}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:.5em;flex:1;min-height:0}
.shots div{border-radius:.8em;background:linear-gradient(170deg,rgba(255,255,255,.1),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.07);position:relative;overflow:hidden}
.shots div::before{content:"";position:absolute;left:12%;right:12%;top:12%;height:30%;border-radius:.5em;background:var(--c)}
.shots div::after{content:"";position:absolute;left:12%;right:30%;top:50%;height:.45em;border-radius:1em;background:rgba(255,255,255,.25);box-shadow:0 .9em 0 rgba(255,255,255,.14),0 1.8em 0 rgba(255,255,255,.1)}
.counter{font:700 .7em/1 var(--mono);color:var(--mint);text-align:center;letter-spacing:.04em}
.burst{position:absolute;pointer-events:none;z-index:40;font-size:1.2em;animation:fly 1.1s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes fly{to{transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(.4);opacity:0}}

/* ---------- marquee ---------- */
.marquee{border-block:1px solid var(--line);overflow:hidden;padding-block:22px;background:var(--deep)}
.mq-track{display:flex;width:max-content;gap:48px;animation:mq 32s linear infinite;transform:skewX(calc(var(--skew) * -2))}
.mq-track span{font:700 clamp(1.6rem,3.6vw,2.8rem)/1 var(--display);font-variation-settings:"wdth" 80;white-space:nowrap;display:flex;align-items:center;gap:48px;color:var(--text)}
.mq-track span:nth-child(even){color:transparent;-webkit-text-stroke:1.2px var(--cyan)}
.mq-track span::after{content:"";width:14px;height:14px;border-radius:50%;background:var(--coral)}
@keyframes mq{to{transform:translateX(-50%) skewX(calc(var(--skew) * -2))}}

/* ---------- story ---------- */
.story{position:relative;padding-block:clamp(80px,10vw,140px) 40px}
.story-head{display:grid;gap:18px;margin-bottom:40px}
.ghost-word{position:absolute;right:-2vw;top:60px;font:800 clamp(6rem,20vw,18rem)/1 var(--display);color:transparent;-webkit-text-stroke:1px rgba(82,184,211,.13);pointer-events:none;white-space:nowrap;z-index:-1;font-variation-settings:"wdth" 75}
.story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,6vw,90px)}
.sticky-phone{position:sticky;top:calc(env(safe-area-inset-top,0px) + 90px);height:calc(100vh - 120px);max-height:760px;display:flex;align-items:center;justify-content:center;gap:28px;perspective:1400px}
.sticky-phone .phone{--pw:min(300px,58vw);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.rail{display:flex;flex-direction:column;gap:10px}
.rail button{width:10px;height:10px;border-radius:99px;border:0;padding:0;background:rgba(150,205,225,.25);cursor:pointer;transition:height .4s cubic-bezier(.2,.9,.2,1.3),background .3s}
.rail button.on{height:34px;background:var(--cyan)}
.steps{display:grid;min-width:0}
.step{min-height:78vh;display:flex;flex-direction:column;justify-content:center;gap:16px;padding-block:20px;opacity:.28;transition:opacity .5s}
.step.on{opacity:1}
.step .num{font:600 .8rem/1 var(--mono);color:var(--cyan);letter-spacing:.12em}
.step h3{font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.02;font-weight:750;font-variation-settings:"wdth" 82}
.step p{color:var(--mute);max-width:46ch}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags span{font:500 .75rem/1 var(--mono);padding:8px 11px;border-radius:99px;border:1px solid var(--line);color:var(--text)}
.step.on .tags span{animation:pop .5s cubic-bezier(.2,.9,.2,1.4) backwards}
.step.on .tags span:nth-child(2){animation-delay:.06s}.step.on .tags span:nth-child(3){animation-delay:.12s}.step.on .tags span:nth-child(4){animation-delay:.18s}
@keyframes pop{from{transform:scale(.6);opacity:0}}

/* story screens */
.scr{position:absolute;inset:0;padding:3.4em 1.1em 1.1em;display:flex;flex-direction:column;gap:.9em;opacity:0;transform:translateY(1.4em) scale(.96);filter:blur(6px);transition:opacity .55s,transform .65s cubic-bezier(.2,.8,.2,1),filter .55s;pointer-events:none}
.scr.on{opacity:1;transform:none;filter:none;pointer-events:auto}
.scr h5{margin:0;font:700 1.05em/1.1 var(--display)}
.scr .sub{font:500 .62em/1.3 var(--mono);color:#8fa6b2;letter-spacing:.06em;text-transform:uppercase}
/* 1 strategy */
.radar{position:relative;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,rgba(82,184,211,.18) 0 1px,transparent 1px 18%);border:1px solid rgba(82,184,211,.3);overflow:hidden}
.radar::before{content:"";position:absolute;inset:0;background:conic-gradient(from 0deg,rgba(82,184,211,.45),transparent 25%);animation:spin2 3.2s linear infinite;border-radius:50%}
@keyframes spin2{to{transform:rotate(360deg)}}
.radar b{position:absolute;width:.6em;height:.6em;border-radius:50%;background:var(--c,var(--coral));box-shadow:0 0 0 .3em color-mix(in oklab,var(--c,var(--coral)) 30%,transparent);animation:blink 2.4s infinite var(--d,0s)}
@keyframes blink{50%{transform:scale(1.5)}}
.pills{display:flex;flex-wrap:wrap;gap:.4em}
.pills span{font-size:.62em;padding:.45em .8em;border-radius:1em;background:rgba(82,184,211,.14);color:#cfeaf2;border:1px solid rgba(82,184,211,.3)}
.kpi{margin-top:auto;display:flex;justify-content:space-between;align-items:end;background:rgba(255,255,255,.05);border-radius:.9em;padding:.8em}
.kpi b{font:700 1.2em/1 var(--display)}
.kpi small{font-size:.6em;color:#8fa6b2}
/* 2 brand */
.brandbig{display:grid;place-items:center;flex:1}
.brandbig .appicon{width:7em;height:7em;border-radius:2em}
.swatches{display:flex;gap:.4em;justify-content:center}
.swatches i{width:1.6em;height:1.6em;border-radius:50%;background:var(--c);transition:transform .3s}
.swatches i:hover{transform:translateY(-.3em)}
.type-spec{text-align:center;font:800 2.2em/1 var(--display);background:linear-gradient(90deg,var(--cyan),var(--sun));-webkit-background-clip:text;background-clip:text;color:transparent}
/* 3 ads */
.post{border-radius:1em;background:#0f1a22;border:1px solid rgba(255,255,255,.08);overflow:hidden;display:flex;flex-direction:column}
.post .hd{display:flex;align-items:center;gap:.5em;padding:.6em .7em;font-size:.66em}
.post .hd i{width:2em;height:2em;border-radius:50%;background:conic-gradient(var(--coral),var(--sun),var(--cyan),var(--coral))}
.post .hd small{display:block;color:#8fa6b2}
.post .media{aspect-ratio:1/1;background:radial-gradient(circle at 30% 30%,var(--sun),transparent 55%),radial-gradient(circle at 75% 70%,var(--coral),transparent 55%),linear-gradient(140deg,#174d5d,#0b1219);display:grid;place-items:center;text-align:center;padding:1em;font:800 1.35em/1.05 var(--display);text-shadow:0 .1em .6em rgba(0,0,0,.4);background-size:150% 150%;animation:drift 8s ease-in-out infinite alternate}
@keyframes drift{to{background-position:100% 100%}}
.post .cta{display:flex;justify-content:space-between;align-items:center;padding:.6em .7em;font-size:.68em;background:rgba(82,184,211,.12)}
.post .cta button{all:unset;cursor:pointer;background:var(--cyan);color:var(--ink);font-weight:700;padding:.5em 1em;border-radius:.6em;position:relative;overflow:hidden}
.post .cta button.done{background:var(--mint)}
.platforms{display:flex;gap:.4em;font-size:.6em}
.platforms span{padding:.35em .7em;border-radius:1em;border:1px solid rgba(255,255,255,.15)}
/* 4 OEM */
.home{display:grid;grid-template-columns:repeat(4,1fr);gap:.9em .6em;padding-top:2.6em}
.home i{aspect-ratio:1;border-radius:.8em;background:var(--c,#1d2a35);display:block}
.home i.hl{background:conic-gradient(from var(--ang),var(--cyan),var(--mint),var(--sun),var(--coral),var(--cyan));animation:spin 6s linear infinite;box-shadow:0 0 0 .2em rgba(124,242,201,.35),0 0 1.4em rgba(82,184,211,.7);position:relative}
.notif{position:absolute;left:.8em;right:.8em;top:3em;border-radius:1em;padding:.7em .8em;background:rgba(235,245,250,.92);color:#0b1219;display:flex;gap:.6em;align-items:center;font-size:.64em;box-shadow:0 1em 2em rgba(0,0,0,.4);transform:translateY(-140%);transition:transform .7s cubic-bezier(.2,.9,.2,1.15)}
.scr.on .notif{transform:none;transition-delay:.5s}
.notif i{width:2.6em;height:2.6em;border-radius:.8em;flex:none;background:conic-gradient(var(--cyan),var(--mint),var(--sun),var(--coral),var(--cyan))}
.notif b{display:block}
.dock{margin-top:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:.6em;padding:.6em;border-radius:1.2em;background:rgba(255,255,255,.08)}
.dock i{aspect-ratio:1;border-radius:.8em;background:var(--c)}
/* 5 audio */
.cover{aspect-ratio:1;border-radius:1em;background:radial-gradient(circle at 70% 25%,var(--mint),transparent 45%),radial-gradient(circle at 25% 80%,var(--coral),transparent 50%),linear-gradient(160deg,#1f5f70,#0b1219);display:flex;align-items:flex-end;padding:.8em;font:800 1.15em/1.05 var(--display);position:relative}
.cover small{position:absolute;top:.8em;left:.8em;font:600 .5em/1 var(--mono);background:rgba(0,0,0,.45);padding:.5em .7em;border-radius:1em;letter-spacing:.08em}
.wave{display:flex;align-items:center;gap:.18em;height:2.4em}
.wave i{flex:1;background:var(--cyan);border-radius:1em;height:30%;animation:eq 1s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.13s)}
.wave i:nth-child(n+14){background:rgba(150,205,225,.3)}
@keyframes eq{to{height:100%}}
.prog{height:.25em;border-radius:1em;background:rgba(255,255,255,.15);position:relative}
.prog::before{content:"";position:absolute;inset:0;width:60%;background:#fff;border-radius:inherit;animation:pg 30s linear infinite}
@keyframes pg{from{width:0}to{width:100%}}
.companion{display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.08);border-radius:.9em;padding:.6em .7em;font-size:.66em}
.companion b{background:var(--cyan);color:var(--ink);padding:.45em .9em;border-radius:.6em}
/* 6 affiliate */
.aff{display:flex;flex-direction:column;gap:.55em}
.aff div{display:grid;grid-template-columns:1fr auto;gap:.2em .6em;font-size:.66em;background:rgba(255,255,255,.04);border-radius:.8em;padding:.6em .7em}
.aff div i{grid-column:1/-1;height:.35em;border-radius:1em;background:rgba(255,255,255,.08);position:relative;overflow:hidden}
.aff div i::before{content:"";position:absolute;inset:0;width:var(--w);background:linear-gradient(90deg,var(--cyan),var(--mint));border-radius:inherit;transform-origin:left;transform:scaleX(0);transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.scr.on .aff div i::before{transform:scaleX(1)}
.aff em{font-style:normal;font:600 .9em/1 var(--mono);color:var(--mint)}
.aff em.bad{color:var(--coral)}
.shield{display:flex;gap:.6em;align-items:center;font-size:.64em;padding:.7em;border-radius:.9em;background:rgba(255,122,89,.12);border:1px solid rgba(255,122,89,.35);margin-top:auto}
/* 7 results */
.bignum{font:800 2.3em/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.chart{flex:1;min-height:0;border-radius:.9em;background:rgba(255,255,255,.04);padding:.6em}
.chart svg{width:100%;height:100%;display:block}
.chart path.l{fill:none;stroke:var(--cyan);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1) .2s}
.chart path.a{fill:url(#ga);opacity:0;transition:opacity 1s .9s}
.scr.on .chart path.l{stroke-dashoffset:0}.scr.on .chart path.a{opacity:1}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:.5em}
.duo div{background:rgba(255,255,255,.05);border-radius:.8em;padding:.6em .7em;font-size:.62em;color:#8fa6b2}
.duo b{display:block;font:700 1.6em/1.1 var(--display);color:#fff}
.duo .up{color:var(--mint)}


/* ---------- web growth ---------- */
.web{position:relative;overflow:clip;isolation:isolate;padding-block:clamp(80px,10vw,140px);border-top:1px solid var(--line)}
.web::before{content:"";position:absolute;width:70vw;height:70vw;max-width:900px;max-height:900px;right:-20vw;top:10%;z-index:-1;border-radius:42% 58% 63% 37%/45% 40% 60% 55%;background:conic-gradient(from var(--ang),var(--g1),var(--g2),var(--g3),var(--g1));filter:blur(90px);opacity:.28;animation:spin 18s linear infinite,morph 16s ease-in-out infinite;transition:--g1 .9s,--g2 .9s,--g3 .9s}
@property --g1{syntax:"<color>";initial-value:#52b8d3;inherits:true}
@property --g2{syntax:"<color>";initial-value:#7cf2c9;inherits:true}
@property --g3{syntax:"<color>";initial-value:#ffc857;inherits:true}
.web{--g1:#52b8d3;--g2:#7cf2c9;--g3:#ffc857;transition:--g1 .9s,--g2 .9s,--g3 .9s}
.web[data-mode="aware"]{--g1:#ff7a59;--g2:#ffc857;--g3:#52b8d3}
.web-head{display:grid;gap:18px;margin-bottom:34px}
.web-head h2 .alt{display:inline-block;color:transparent;-webkit-text-stroke:1.4px var(--cyan)}
.seg{position:relative;display:inline-flex;padding:5px;border-radius:99px;border:1px solid var(--line);background:rgba(255,255,255,.03);margin-bottom:34px;justify-self:start}
.seg button{position:relative;z-index:1;border:0;background:none;cursor:pointer;color:var(--mute);font:600 .95rem/1 var(--body);padding:13px 22px;border-radius:99px;transition:color .35s}
.seg button[aria-selected="true"]{color:var(--ink)}
.seg .pill{position:absolute;top:5px;bottom:5px;left:5px;border-radius:99px;background:linear-gradient(90deg,var(--g1),var(--g2));transition:transform .55s cubic-bezier(.2,.9,.2,1.15),width .55s cubic-bezier(.2,.9,.2,1.15)}
.web-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,5vw,70px);align-items:center}
.dstage{position:relative;perspective:1600px;padding-bottom:40px;min-width:0}
.browser{border-radius:18px;background:#0d161e;border:1px solid var(--line);box-shadow:0 50px 100px -30px rgba(0,0,0,.8),0 0 100px -40px var(--g1);overflow:hidden;transform:rotateX(var(--bx,0deg)) rotateY(-6deg);transform-origin:50% 100%;transition:box-shadow .9s}
.bbar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.03)}
.bbar i{width:10px;height:10px;border-radius:50%;background:#2a3640}
.bbar i:nth-child(1){background:#ff7a59}.bbar i:nth-child(2){background:#ffc857}.bbar i:nth-child(3){background:#7cf2c9}
.url{flex:1;margin-left:10px;min-width:0;font:500 .74rem/1 var(--mono);color:var(--mute);background:rgba(255,255,255,.05);border-radius:99px;padding:8px 12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.bview{display:grid}
.view{grid-area:1/1;padding:clamp(14px,2.4vw,24px);display:grid;gap:16px;transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1),filter .5s}
.view[aria-hidden="true"]{opacity:0;transform:translateY(16px) skewY(2deg);filter:blur(8px);pointer-events:none}
.v-sales{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}
.product{border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line);padding:12px;display:grid;gap:10px}
.pimg{aspect-ratio:4/3;border-radius:10px;background:radial-gradient(circle at 35% 40%,var(--sun),transparent 45%),radial-gradient(circle at 70% 65%,var(--coral),transparent 50%),linear-gradient(150deg,#1b4553,#0b1219);position:relative;overflow:hidden}
.pimg::after{content:"−20%";position:absolute;top:8px;left:8px;font:700 .68rem/1 var(--mono);background:var(--ink);color:var(--sun);padding:5px 7px;border-radius:6px}
.product b{font:700 1rem/1.2 var(--display)}
.product .pr{display:flex;justify-content:space-between;align-items:center;font:600 .9rem/1 var(--mono)}
.product .pr s{color:var(--mute);font-weight:400;margin-left:6px;font-size:.78rem}
.cartbtn{border:0;cursor:pointer;font:700 .88rem/1 var(--body);color:var(--ink);background:var(--cyan);padding:12px;border-radius:10px;display:flex;justify-content:center;gap:8px;align-items:center;transition:transform .15s,background .3s}
.cartbtn:active{transform:scale(.95)}
.cartbtn .n{background:var(--ink);color:var(--cyan);min-width:1.6em;height:1.6em;border-radius:99px;display:grid;place-items:center;font:700 .72rem/1 var(--mono);padding:0 .3em}
.cartbtn .n.bump{animation:bump .4s cubic-bezier(.2,.9,.2,1.6)}
@keyframes bump{50%{transform:scale(1.45)}}
.funnel{display:grid;gap:9px}
.funnel h4,.aw h4{margin:0 0 2px;font:600 .7rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.frow{display:grid;grid-template-columns:7.5em minmax(0,1fr) 4.6em;gap:10px;align-items:center;font-size:.8rem}
.frow span:first-child{color:var(--mute)}
.frow .trk{height:12px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}
.frow .trk i{display:block;height:100%;width:var(--w);min-width:4px;border-radius:inherit;background:linear-gradient(90deg,var(--cyan),var(--mint));transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.2,.8,.2,1) calc(var(--k)*.12s)}
.web.lit[data-mode="sales"] .frow .trk i{transform:scaleX(1)}
.frow b{font:600 .8rem/1 var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.roas{display:flex;justify-content:space-between;align-items:center;border-top:1px dashed var(--line);padding-top:10px;font-size:.8rem;color:var(--mute)}
.roas b{font:750 1.5rem/1 var(--display);color:var(--mint)}
.toast{position:absolute;right:14px;bottom:14px;z-index:4;display:flex;gap:10px;align-items:center;padding:10px 14px;border-radius:12px;background:rgba(235,245,250,.95);color:#0b1219;font:600 .78rem/1.25 var(--body);box-shadow:0 14px 30px rgba(0,0,0,.4);transform:translateY(140%);opacity:0;transition:transform .5s cubic-bezier(.2,.9,.2,1.2),opacity .3s}
.toast.show{transform:none;opacity:1}
.toast i{width:26px;height:26px;border-radius:8px;background:var(--mint);display:grid;place-items:center;font-style:normal}
.toast small{display:block;color:#4a5d68;font-weight:500}
.v-aware{grid-template-columns:repeat(2,minmax(0,1fr))}
.aw{border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line);padding:14px;display:grid;gap:8px;align-content:start}
.aw.wide{grid-column:1/-1;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px}
.aw .big{font:800 clamp(1.8rem,4vw,2.8rem)/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.aw p{font-size:.8rem;color:var(--mute)}
.ringwrap{display:flex;gap:12px;align-items:center}
.ring{width:66px;height:66px;flex:none}
.ring circle{fill:none;stroke-width:8}
.ring .bg{stroke:rgba(255,255,255,.08)}
.ring .fg{stroke:var(--coral);stroke-linecap:round;stroke-dasharray:176;stroke-dashoffset:176;transition:stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1) .2s;transform:rotate(-90deg);transform-origin:50% 50%}
.web.lit[data-mode="aware"] .ring .fg{stroke-dashoffset:49}
.spark{width:100%;height:56px;display:block}
.spark path{fill:none;stroke:var(--sun);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:300;stroke-dashoffset:300;transition:stroke-dashoffset 1.6s ease .3s}
.web.lit[data-mode="aware"] .spark path{stroke-dashoffset:0}
.spark line{stroke:rgba(255,255,255,.18);stroke-dasharray:3 4}
.sov{display:flex;height:14px;border-radius:99px;overflow:hidden;gap:2px}
.sov i{width:var(--w);background:var(--c);transform:scaleY(0);transition:transform .6s cubic-bezier(.2,.9,.2,1.3) calc(var(--k)*.1s + .2s)}
.web.lit[data-mode="aware"] .sov i{transform:none}
.sovl{display:flex;flex-wrap:wrap;gap:10px;font:500 .7rem/1 var(--mono);color:var(--mute)}
.sovl span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--c);margin-right:5px}
.mini{position:absolute;right:-10px;bottom:-6px;z-index:3}
.mini .phone{--pw:clamp(118px,15vw,150px);cursor:default}
.mini .msc{position:absolute;inset:0;padding:2.8em .8em .8em;display:flex;flex-direction:column;gap:.6em;transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1)}
.mini .msc[aria-hidden="true"]{opacity:0;transform:scale(.9)}
.okc{margin:auto;width:4em;height:4em;border-radius:50%;background:var(--mint);display:grid;place-items:center;color:var(--ink);font:800 1.8em/1 var(--body);box-shadow:0 0 0 .5em rgba(124,242,201,.2)}
.web.lit[data-mode="sales"] .okc{animation:pop .6s cubic-bezier(.2,.9,.2,1.5) .4s backwards}
.mini h6{margin:0;text-align:center;font:700 1em/1.15 var(--display)}
.mini small{text-align:center;font-size:.62em;color:#9fb3be}
.reel{flex:1;border-radius:.8em;background:radial-gradient(circle at 30% 30%,var(--sun),transparent 50%),radial-gradient(circle at 70% 75%,var(--coral),transparent 55%),linear-gradient(160deg,#1f5f70,#0b1219);display:grid;place-items:center;position:relative;overflow:hidden}
.reel b{width:2.6em;height:2.6em;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;color:var(--ink);font-size:.9em}
.reel::after{content:"";position:absolute;left:0;bottom:0;height:.25em;width:72%;background:#fff}
.web-copy{display:grid;min-width:0}
.panel{grid-area:1/1;display:grid;gap:18px;align-content:start;transition:opacity .45s,transform .55s cubic-bezier(.2,.8,.2,1)}
.panel[hidden]{display:grid!important;opacity:0;transform:translateX(24px);pointer-events:none;visibility:hidden}
.panel h3{font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.02;font-weight:750;font-variation-settings:"wdth" 82}
.panel p{color:var(--mute)}
.do{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.do li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;padding-block:12px;border-bottom:1px solid var(--line);font-size:.96rem}
.do li::before{content:"";width:18px;height:18px;margin-top:3px;border-radius:6px;background:linear-gradient(135deg,var(--g1),var(--g2));-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.5l3.2 3L14 5.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.5l3.2 3L14 5.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.do b{display:block;font-weight:650}
.do span{color:var(--mute);font-size:.9rem}
.measure{font:500 .75rem/1.5 var(--mono);color:var(--mute)}
.measure b{color:var(--text)}
@media (max-width:900px){.web-grid{grid-template-columns:minmax(0,1fr)}.mini{right:0}}
@media (max-width:560px){.v-sales,.v-aware{grid-template-columns:minmax(0,1fr)}.aw.wide{grid-template-columns:minmax(0,1fr)}.mini{display:none}.seg button{padding:12px 16px;font-size:.88rem}}

/* ---------- services ---------- */
.services{padding-block:clamp(80px,10vw,140px);position:relative}
.svc-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px;margin-bottom:40px}
.svc-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.svc{border-bottom:1px solid var(--line);position:relative;overflow:hidden;isolation:isolate}
.svc::before{content:"";position:absolute;width:420px;height:420px;left:var(--x,50%);top:var(--y,50%);translate:-50% -50%;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(82,184,211,.28),rgba(255,122,89,.12) 45%,transparent 70%);opacity:0;transition:opacity .4s;filter:blur(10px)}
.svc:hover::before{opacity:1}
.svc a{display:grid;grid-template-columns:3.2rem minmax(0,1.1fr) minmax(0,1fr) auto;gap:20px;align-items:center;padding-block:26px;text-decoration:none}
.svc .k{font:600 .78rem/1 var(--mono);color:var(--mute)}
.svc h3{font-size:clamp(1.6rem,3.4vw,2.6rem);font-weight:700;font-variation-settings:"wdth" 82;transition:transform .5s cubic-bezier(.2,.8,.2,1),font-variation-settings .5s,color .3s}
.svc:hover h3{transform:translateX(12px) skewX(-8deg);font-variation-settings:"wdth" 100;color:var(--cyan)}
.svc p{color:var(--mute);font-size:.95rem}
.svc .go{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:background .3s,transform .4s,border-color .3s}
.svc:hover .go{background:var(--cyan);border-color:var(--cyan);transform:rotate(-45deg);color:var(--ink)}
@media (max-width:760px){.svc a{grid-template-columns:2.2rem minmax(0,1fr) auto;gap:12px}.svc p{grid-column:2/3;grid-row:2}}

/* ---------- cases ---------- */
.cases{position:relative;background:var(--deep);border-block:1px solid var(--line)}
.cases-pin{position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-block:90px 50px}
.cases-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px;margin-bottom:34px}
.note{font:500 .72rem/1.3 var(--mono);color:var(--mute);border:1px dashed var(--line);padding:8px 12px;border-radius:10px}
.track{display:flex;gap:28px;will-change:transform;padding-left:max(var(--gut-l),calc((100vw - 1240px)/2 + 16px));padding-right:var(--gut-r)}
.case{flex:none;width:min(820px,86vw);display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center;padding:clamp(20px,3vw,36px);border-radius:28px;background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.01));border:1px solid var(--line);position:relative;overflow:hidden;transform-style:preserve-3d;transition:transform .2s ease-out}
.case::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--ang),transparent 0 70%,var(--ac) 82%,transparent 92%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 6s linear infinite;pointer-events:none}
.case::after{content:"";position:absolute;inset:0;background:radial-gradient(400px circle at var(--gx,50%) var(--gy,0%),color-mix(in oklab,var(--ac) 22%,transparent),transparent 60%);pointer-events:none;z-index:-1}
.case .phone{--pw:clamp(170px,22vw,230px)}
.case-body{display:grid;gap:16px;min-width:0}
.case .cat{font:600 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ac)}
.case h3{font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.02;font-weight:750;font-variation-settings:"wdth" 84}
.case p{color:var(--mute);font-size:.96rem}
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border-top:1px solid var(--line);padding-top:16px}
.metrics b{display:block;font:750 clamp(1.4rem,2.6vw,2rem)/1 var(--display);font-variant-numeric:tabular-nums;color:var(--text)}
.metrics span{font:500 .72rem/1.3 var(--mono);color:var(--mute)}
.play{justify-self:start}
@media (max-width:700px){.case{grid-template-columns:1fr;justify-items:center}.case-body{justify-items:start;width:100%}}
.cases.static .cases-pin{position:static;min-height:0}
.cases.static .track{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px}
.cases.static .case{scroll-snap-align:center}
/* case phone states */
.cs{position:absolute;inset:0;padding:3.2em 1em 1em;display:flex;flex-direction:column;gap:.8em;transition:opacity .45s,transform .55s cubic-bezier(.2,.8,.2,1)}
.cs-ad{background:linear-gradient(180deg,#0f1a22,#0a1118)}
.cs-ad .post .media{background:radial-gradient(circle at 30% 30%,var(--ac2),transparent 55%),radial-gradient(circle at 75% 75%,var(--ac),transparent 55%),linear-gradient(140deg,#13303a,#0b1219)}
.cs-ad .post .cta button{background:var(--ac)}
.cs-inst,.cs-open{opacity:0;transform:translateY(100%)}
.cs-inst{background:rgba(6,9,13,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);justify-content:flex-end;padding:0}
.sheet{background:#121e27;border-radius:1.6em 1.6em 0 0;padding:1.2em;display:grid;gap:.8em;font-size:.8em}
.sheet .top{display:flex;gap:.7em;align-items:center}
.sheet .top i{width:3em;height:3em;border-radius:.9em;background:linear-gradient(135deg,var(--ac),var(--ac2))}
.sheet .bar{height:.5em;border-radius:1em;background:rgba(255,255,255,.1);overflow:hidden}
.sheet .bar::before{content:"";display:block;height:100%;width:100%;background:var(--ac);transform:scaleX(0);transform-origin:left}
.cs-open{background:radial-gradient(circle at 50% 35%,color-mix(in oklab,var(--ac) 55%,#0a1118),#0a1118 70%);align-items:center;justify-content:center;text-align:center;gap:.4em}
.cs-open .bigm{font:800 2.4em/1 var(--display);font-variant-numeric:tabular-nums}
.cs-open small{font:500 .62em/1.3 var(--mono);color:#cfe3ea;letter-spacing:.06em;text-transform:uppercase}
.cs-open .appicon{width:3.6em;height:3.6em;margin-bottom:.6em;background:conic-gradient(from var(--ang),var(--ac),var(--ac2),var(--ac))}
.phone.s2 .tapdot{opacity:1;transform:translate(-50%,-50%) scale(1)}
.tapdot{position:absolute;width:2.6em;height:2.6em;border-radius:50%;border:2px solid #fff;background:rgba(255,255,255,.25);right:1.3em;bottom:var(--tb,8.2em);transform:translate(-50%,-50%) scale(1.8);opacity:0;transition:opacity .25s,transform .35s;z-index:5;translate:50% 50%}
.phone.s3 .cs-inst,.phone.s4 .cs-inst{opacity:1;transform:none}
.phone.s3 .sheet .bar::before{transform:scaleX(1);transition:transform 1.4s cubic-bezier(.5,0,.3,1)}
.phone.s4 .sheet .bar::before{transform:scaleX(1)}
.phone.s4 .cs-open{opacity:1;transform:none}

/* ---------- FAQ ---------- */
.faq{padding-block:clamp(80px,10vw,130px)}
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,6vw,80px)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding-block:22px;font:650 clamp(1.1rem,2vw,1.35rem)/1.25 var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);position:relative;transition:transform .4s,background .3s}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:var(--text);translate:-50% -50%;border-radius:2px}
.faq summary i::after{rotate:90deg;transition:rotate .4s}
.faq details[open] summary i{background:var(--cyan);border-color:var(--cyan)}
.faq details[open] summary i::before,.faq details[open] summary i::after{background:var(--ink)}
.faq details[open] summary i::after{rotate:0deg}
.faq details p{color:var(--mute);padding-bottom:22px;max-width:62ch}
.faq details[open] p{animation:drop .45s ease-out}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}}

/* ---------- contact ---------- */
.contact{position:relative;overflow:clip;isolation:isolate;border-top:1px solid var(--line);background:radial-gradient(60% 80% at 80% 40%,rgba(82,184,211,.12),transparent 70%),var(--ink)}
.contact .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,70px);align-items:center;padding-block:clamp(80px,10vw,130px)}
/* contact visual: live campaign card with orbiting channels */
.mk{position:relative;width:100%;max-width:520px;aspect-ratio:1;margin-inline:auto;perspective:1100px;min-width:0}
.mk-glow{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle at 50% 50%,color-mix(in oklab,var(--cyan) 30%,transparent),transparent 62%);filter:blur(20px);animation:mkBreathe 7s ease-in-out infinite}
@keyframes mkBreathe{50%{transform:scale(1.08);opacity:.75}}
.mk-path{position:absolute;left:calc(50% - var(--rx-px,200px));top:calc(50% - var(--ry-px,160px));width:calc(var(--rx-px,200px) * 2);height:calc(var(--ry-px,160px) * 2);box-sizing:border-box;border-radius:50%;border:1.5px dashed color-mix(in oklab,var(--cyan) 45%,transparent);transform:rotate(-7deg)}
.mk-ring{position:absolute;inset:0;transform:rotate(-7deg)}
.mk-chip{position:absolute;left:50%;top:50%;display:inline-flex;gap:8px;align-items:center;padding:9px 14px;border-radius:99px;background:var(--panel);border:1px solid var(--line);color:var(--text);font:650 .82rem/1 var(--body);white-space:nowrap;box-shadow:0 12px 26px -14px rgba(0,0,0,.55);will-change:transform,opacity;transition:border-color .35s,box-shadow .35s}
.mk-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.mk-chip.on{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in oklab,var(--c) 28%,transparent),0 12px 26px -14px rgba(0,0,0,.55)}
.mk-card{position:absolute;left:50%;top:50%;width:min(290px,58%);box-sizing:border-box;transform:translate(-50%,-50%) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));z-index:5;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:18px;display:grid;gap:14px;box-shadow:0 34px 70px -34px rgba(0,0,0,.6),0 0 90px -30px color-mix(in oklab,var(--cyan) 70%,transparent);transition:transform .25s ease-out}
.mk-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font:600 .66rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.mk-head #mkChan{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-live{display:inline-flex;gap:7px;align-items:center;color:var(--mint);flex:none}
.mk-live i{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 color-mix(in oklab,var(--mint) 60%,transparent);animation:mkPing 1.8s infinite}
@keyframes mkPing{70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.mk-kpi{display:grid;gap:4px}
.mk-kpi b{font:800 clamp(2.1rem,4.6vw,3rem)/1 var(--display);letter-spacing:-.03em;font-variation-settings:"wdth" 80;color:var(--text);font-variant-numeric:tabular-nums}
.mk-kpi small{font-size:.84rem;color:var(--mute)}
.mk-kpi em{font-style:normal;font:600 .7rem/1.2 var(--mono);color:var(--mint)}
.mk-kpi.swap>*{animation:mkIn .55s cubic-bezier(.2,.8,.2,1) backwards}
.mk-kpi.swap small{animation-delay:.06s}.mk-kpi.swap em{animation-delay:.12s}
@keyframes mkIn{from{opacity:0;transform:translateY(10px) skewX(-8deg)}}
.mk-bars{display:flex;align-items:flex-end;gap:5px;height:62px}
.mk-bars i{flex:1;height:var(--h,30%);border-radius:4px 4px 2px 2px;background:linear-gradient(var(--cyan),color-mix(in oklab,var(--cyan) 25%,transparent));transition:height .9s cubic-bezier(.2,.8,.2,1)}
.mk-bars i:last-child{background:linear-gradient(var(--sun),var(--coral))}
.mk-funnel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;border-top:1px solid var(--line);padding-top:12px;font:500 .62rem/1.3 var(--mono);color:var(--mute);text-transform:uppercase;letter-spacing:.04em}
.mk-funnel b{display:block;margin-top:3px;font:700 1rem/1.1 var(--display);letter-spacing:0;text-transform:none;color:var(--text);font-variant-numeric:tabular-nums}
.mk-pop{position:absolute;z-index:6;display:flex;gap:10px;align-items:center;padding:10px 13px;border-radius:14px;background:var(--panel);border:1px solid var(--line);color:var(--text);font:650 .78rem/1.2 var(--body);white-space:nowrap;box-shadow:0 16px 34px -16px rgba(0,0,0,.55);animation:bob 6s ease-in-out infinite}
.mk-pop small{display:block;color:var(--mute);font:500 .64rem/1.3 var(--mono)}
.mk-pop i{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;color:var(--ink);flex:none}
.mk-pop i .ic{width:15px;height:15px}
.mk-pop.p1{top:3%;left:0}.mk-pop.p1 i{background:var(--mint)}
.mk-pop.p2{top:9%;right:0;animation-delay:-2s}.mk-pop.p2 i{background:var(--cyan)}
.mk-pop.p3{bottom:2%;right:4%;animation-delay:-4s}.mk-pop.p3 i{background:var(--sun)}
.mk-pop.flash{animation:bob 6s ease-in-out infinite,mkFlash .7s ease-out}
@keyframes mkFlash{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--mint) 70%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
@media (max-width:640px){
  .mk{aspect-ratio:auto;max-width:440px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;perspective:none;padding-block:10px}
  .mk-path{display:none}
  .mk-card{position:relative;left:auto;top:auto;transform:none;width:100%;order:1}
  .mk-pop{position:relative;inset:auto;order:2;animation:none;font-size:.74rem;padding:8px 11px}
  .mk-pop.p1{order:0}
  .mk-pop i{width:24px;height:24px}
  .mk-ring{position:relative;inset:auto;transform:none;order:3;flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
  .mk-chip{position:relative;left:auto;top:auto;transform:none!important;opacity:1!important;font-size:.72rem;padding:7px 11px}
}
@media (prefers-reduced-motion:reduce){.mk-pop,.mk-glow{animation:none}}
.contact h2{font-size:clamp(2.6rem,6.4vw,5.4rem)}
form{display:grid;gap:14px;margin-top:28px}
.field{display:grid;gap:6px}
.field label{font:600 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.field input,.field select,.field textarea{font:500 1rem/1.4 var(--body);color:var(--text);background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:14px 16px;transition:border-color .25s,background .25s,box-shadow .25s;width:100%;box-sizing:border-box}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--cyan);background:rgba(82,184,211,.07);box-shadow:0 0 0 4px rgba(82,184,211,.15)}
.field select option{background:var(--deep)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.budget{display:flex;flex-wrap:wrap;gap:8px}
.budget input{position:absolute;opacity:0;pointer-events:none}
.budget label{cursor:pointer;font:500 .88rem/1 var(--body);text-transform:none;letter-spacing:0;color:var(--text);padding:11px 15px;border-radius:99px;border:1px solid var(--line);transition:background .25s,color .25s,transform .2s}
.budget label:active{transform:scale(.94)}
.budget input:checked+label{background:var(--cyan);color:var(--ink);border-color:var(--cyan)}
.budget input:focus-visible+label{outline:2px solid var(--cyan);outline-offset:2px}
.formmsg{font-size:.92rem;color:var(--mint);min-height:1.4em}
@media (max-width:900px){.contact .wrap,.faq-grid,.story-grid,.hero .wrap{grid-template-columns:minmax(0,1fr)}.two{grid-template-columns:1fr}}

footer{border-top:1px solid var(--line);padding-block:40px calc(30px + env(safe-area-inset-bottom,0px))}
footer .wrap{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start;color:var(--mute);font-size:.88rem}
.foot-base{flex-basis:100%;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;border-top:1px solid var(--line);padding-top:20px}
footer nav{display:flex;flex-wrap:wrap;gap:18px}
footer a{text-decoration:none}footer a:hover{color:var(--cyan)}


/* ---------- inner pages ---------- */
.page{padding-block:clamp(48px,7vw,96px) clamp(80px,9vw,120px);position:relative;isolation:isolate;min-height:70vh}
.page::before{content:"";position:absolute;inset:0 0 auto;height:520px;z-index:-1;background:radial-gradient(50% 70% at 85% 0%,rgba(82,184,211,.16),transparent 70%),radial-gradient(40% 60% at 10% 10%,rgba(255,122,89,.08),transparent 70%)}
.page-head{display:grid;gap:18px;margin-bottom:34px;max-width:860px}
.page-title{font-size:clamp(2.8rem,8vw,6rem);line-height:.92;font-weight:800;font-variation-settings:"wdth" 76,"opsz" 96;letter-spacing:-.035em}
.page-title em{font-style:normal;color:transparent;background:linear-gradient(100deg,var(--cyan),var(--mint) 45%,var(--sun) 70%,var(--coral));-webkit-background-clip:text;background-clip:text}
.narrow{max-width:820px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filters button{border:1px solid var(--line);background:transparent;color:var(--mute);font:600 .88rem/1 var(--body);padding:11px 16px;border-radius:99px;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .15s}
.filters button:hover{color:var(--text);border-color:rgba(82,184,211,.45)}
.filters button:active{transform:scale(.95)}
.filters button[aria-pressed="true"]{background:var(--text);color:var(--ink);border-color:var(--text)}
.empty{border:1px dashed var(--line);border-radius:22px;padding:40px 24px;text-align:center;color:var(--mute);display:grid;gap:8px;justify-items:center}
.empty b{color:var(--text);font:700 1.2rem/1.2 var(--display)}

/* image frame shared by events and posts */
.media-frame{position:relative;overflow:hidden;background:var(--panel);aspect-ratio:16/10;max-width:100%}
.media-frame img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.8,.2,1),filter .6s}
.media-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(6,9,13,.55));pointer-events:none}
.card-link:hover .media-frame img,.ev-card:hover .media-frame img{transform:scale(1.06)}

/* events */
.ev-feature{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);border-radius:28px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.01));margin-bottom:28px;position:relative}
.ev-feature .media-frame{aspect-ratio:auto;min-height:320px}
.ev-feature .ev-body{padding:clamp(22px,3.4vw,40px);gap:16px}
.ev-feature h2{font-size:clamp(1.8rem,3.4vw,2.8rem);font-variation-settings:"wdth" 82}
.ev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:22px}
.ev-card{border-radius:22px;overflow:hidden;border:1px solid var(--line);background:var(--deep);display:flex;flex-direction:column;transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .4s}
.ev-card:hover{transform:translateY(-6px);border-color:rgba(82,184,211,.4);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.ev-body{padding:20px;display:grid;gap:12px;align-content:start;flex:1;min-width:0}
.ev-body h3{font-size:1.35rem;line-height:1.15;font-weight:700}
.ev-body p{color:var(--mute);font-size:.95rem}
.ev-meta{display:flex;flex-wrap:wrap;gap:6px 16px;font:500 .78rem/1.3 var(--mono);color:var(--mute)}
.ev-meta span{display:inline-flex;gap:6px;align-items:center}
.ev-meta .ic{color:var(--cyan)}
.datebadge{position:absolute;top:14px;left:14px;z-index:2;display:grid;justify-items:center;min-width:58px;padding:8px 10px;border-radius:14px;background:rgba(6,9,13,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12)}
.datebadge b{font:800 1.6rem/1 var(--display)}
.datebadge small{font:600 .66rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);margin-top:3px}
.state{position:absolute;top:14px;right:14px;z-index:2;font:700 .66rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:7px 10px;border-radius:99px;background:var(--mint);color:var(--ink)}
.state.past{background:rgba(6,9,13,.78);color:var(--text);border:1px solid rgba(255,255,255,.15)}
.state.live{background:var(--sun)}
.extlink{display:inline-flex;gap:8px;align-items:center;font-weight:600;color:var(--cyan);text-decoration:none;font-size:.92rem}
.extlink:hover .ic{transform:translateX(3px) rotate(-45deg)}
.extlink .ic{transition:transform .3s}

/* blog */
.post-feature{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center;margin-bottom:44px;text-decoration:none;color:inherit}
.post-feature .media-frame{border-radius:24px;border:1px solid var(--line)}
.post-feature h2{font-size:clamp(1.9rem,3.8vw,3.1rem);transition:color .3s}
.post-feature:hover h2{color:var(--cyan)}
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:30px 24px}
.card-link{display:grid;gap:14px;text-decoration:none;color:inherit;align-content:start}
.card-link .media-frame{border-radius:20px;border:1px solid var(--line)}
.card-link h3{font-size:1.35rem;line-height:1.15;transition:color .3s}
.card-link:hover h3{color:var(--cyan)}
.card-link p,.post-feature p{color:var(--mute);font-size:.96rem}
.pmeta{display:flex;flex-wrap:wrap;gap:6px 14px;font:500 .76rem/1.3 var(--mono);color:var(--mute);align-items:center}
.pmeta span{display:inline-flex;gap:6px;align-items:center}
.tag{font:600 .7rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan)}
.readmore{display:inline-flex;gap:8px;align-items:center;font-weight:600;color:var(--text)}
.readmore .ic{transition:transform .3s;color:var(--cyan)}
.post-feature:hover .readmore .ic,.card-link:hover .readmore .ic{transform:translateX(5px)}

/* single post */
.backlink{display:inline-flex;gap:8px;align-items:center;color:var(--mute);text-decoration:none;font-weight:600;margin-bottom:28px}
.backlink:hover{color:var(--cyan)}
.backlink .ic{transition:transform .3s}.backlink:hover .ic{transform:translateX(-4px)}
.post-page h1{font-size:clamp(2.2rem,5.6vw,4rem);line-height:1;font-weight:800;font-variation-settings:"wdth" 80;margin-block:14px 18px}
.post-cover{border-radius:24px;border:1px solid var(--line);margin-block:30px}
.prose{font-size:1.08rem;line-height:1.75;max-width:68ch}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:clamp(1.5rem,3vw,2rem);line-height:1.15;margin-top:1.8em;font-variation-settings:"wdth" 86}
.prose h3{font-size:1.25rem;margin-top:1.5em}
.prose ul{padding-left:1.2em;display:grid;gap:.5em}
.prose li::marker{color:var(--cyan)}
.prose a{color:var(--cyan);text-underline-offset:3px}
.prose strong{color:var(--text)}
.prose p,.prose li{color:#c9d8df}
.post-cta{margin-top:56px;padding:clamp(22px,4vw,36px);border-radius:24px;border:1px solid var(--line);background:radial-gradient(80% 120% at 100% 0%,rgba(82,184,211,.18),transparent 60%),var(--deep);display:grid;gap:14px;justify-items:start}
.post-cta h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.more{margin-top:64px;display:grid;gap:22px}
.more h2{font-size:1.6rem}

/* privacy */
.pp-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:start}
.pp-side{position:sticky;top:calc(env(safe-area-inset-top,0px) + 96px);display:grid;gap:16px}
.pp-toc{list-style:none;margin:0;padding:0;display:grid;gap:2px;counter-reset:pp}
.pp-toc a{display:block;padding:7px 10px;border-radius:10px;color:var(--mute);text-decoration:none;font-size:.88rem;line-height:1.3;transition:background .2s,color .2s}
.pp-toc a:hover,.pp-toc a.on{background:rgba(82,184,211,.1);color:var(--text)}
.pp h2{display:flex;gap:14px;align-items:baseline;scroll-margin-top:100px}
.pp h2 span{font:600 .8rem/1 var(--mono);color:var(--cyan)}
.pp-updated{font:500 .8rem/1 var(--mono);color:var(--mute)}
@media (max-width:860px){.pp-layout{grid-template-columns:minmax(0,1fr)}.pp-side{position:static}.pp-toc{grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))}.ev-feature,.post-feature{grid-template-columns:minmax(0,1fr)}.ev-feature .media-frame{min-height:0;aspect-ratio:16/10}}

/* admin */
.gate{display:grid;place-items:center;min-height:56vh}
.gate-card{max-width:520px;width:100%;padding:clamp(26px,5vw,44px);border-radius:28px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.01));display:grid;gap:16px;justify-items:start}
.gate-card h1{font-size:clamp(2rem,5vw,2.8rem);font-weight:800;font-variation-settings:"wdth" 80}
.gate-card p{color:var(--mute)}
.gate-ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--cyan);color:var(--ink)}
.gate-ic .ic{width:24px;height:24px}
.gate-note{font-size:.85rem;border-top:1px solid var(--line);padding-top:14px}
.dash-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px;margin-bottom:26px}
.who{display:inline-flex;gap:8px;align-items:center;font:600 .78rem/1 var(--mono);color:var(--mint);border:1px solid rgba(124,242,201,.35);padding:9px 12px;border-radius:99px}
.dash-tabs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:12px}
.dash-tabs [role="tab"]{border:0;background:none;color:var(--mute);font:650 1rem/1 var(--body);padding:12px 14px;border-radius:12px;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.dash-tabs [role="tab"][aria-selected="true"]{color:var(--text);background:rgba(255,255,255,.06)}
.cnt{font:600 .72rem/1 var(--mono);background:rgba(82,184,211,.18);color:var(--cyan);padding:4px 7px;border-radius:99px}
.btn.sm{padding:11px 16px;font-size:.88rem;margin-left:auto}
.btn.sm .ic{width:16px;height:16px}
.savemsg{min-height:1.5em;font-size:.92rem;color:var(--mint)}
.savemsg.err{color:var(--coral)}
.rows{display:grid;gap:10px}
.row-item{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:16px;align-items:center;padding:10px;border-radius:16px;border:1px solid var(--line);background:var(--deep);transition:border-color .25s}
.row-item:hover{border-color:rgba(82,184,211,.35)}
.row-item .thumb{width:96px;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--panel)}
.row-item .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.row-item b{display:block;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-item small{font:500 .74rem/1.4 var(--mono);color:var(--mute);display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.pill{font:700 .64rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border-radius:99px;background:rgba(124,242,201,.16);color:var(--mint)}
.pill.draft{background:rgba(255,200,87,.16);color:var(--sun)}
.acts{display:flex;gap:6px}
.iconbtn{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;display:grid;place-items:center;transition:background .2s,color .2s,border-color .2s,width .3s}
.iconbtn:hover{background:rgba(255,255,255,.06)}
.iconbtn .ic{width:18px;height:18px}
.iconbtn.danger:hover{color:var(--coral);border-color:rgba(255,122,89,.5)}
.iconbtn.confirm{width:auto;padding:0 12px;background:var(--coral);color:var(--ink);border-color:var(--coral);font:700 .78rem/1 var(--body)}
@media (max-width:600px){.row-item{grid-template-columns:72px minmax(0,1fr)}.row-item .thumb{width:72px}.acts{grid-column:1/-1;justify-content:flex-end}}
.editor{margin-top:22px;padding:clamp(18px,3vw,30px);border-radius:24px;border:1px solid rgba(82,184,211,.35);background:var(--deep);display:grid;gap:18px;animation:drop .4s ease-out}
.ed-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ed-head h3{font-size:1.5rem}
.linkbtn{border:0;background:none;color:var(--mute);font:600 .92rem/1 var(--body);cursor:pointer;padding:8px}
.linkbtn:hover{color:var(--text)}
.ed-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.span2{grid-column:1/-1}
@media (max-width:640px){.ed-grid{grid-template-columns:minmax(0,1fr)}}
.editor[data-k="posts"] .for-event,.editor[data-k="events"] .for-post{display:none}
.drop{position:relative;border:1.5px dashed var(--line);border-radius:16px;min-height:140px;display:grid;place-items:center;overflow:hidden;transition:border-color .25s,background .25s;background:rgba(255,255,255,.02)}
.drop.over{border-color:var(--cyan);background:rgba(82,184,211,.08)}
.drop img{width:100%;max-height:300px;object-fit:cover;display:block}
.drop-txt{display:flex;gap:10px;align-items:center;color:var(--mute);font-size:.9rem;padding:16px;text-align:left}
.drop img:not([hidden])+.drop-txt{position:absolute;bottom:10px;left:10px;right:10px;background:rgba(6,9,13,.8);border-radius:10px;padding:8px 12px}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop:focus-within{outline:2px solid var(--cyan);outline-offset:2px}
.hint{font-size:.82rem;color:var(--mute)}
.hint code{font:500 .8rem/1 var(--mono);background:rgba(255,255,255,.07);padding:2px 5px;border-radius:5px;color:var(--text)}
.ed-foot{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.btn[disabled]{opacity:.6;pointer-events:none}
.contact-mail{display:inline-flex;gap:10px;align-items:center;margin-top:18px;font:600 1rem/1 var(--body)}
.contact-mail a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--line)}
.contact-mail a:hover{color:var(--cyan)}
.contact-mail .ic{color:var(--cyan)}
.copybtn{border:1px solid var(--line);background:none;color:var(--mute);border-radius:99px;padding:6px 10px;font:600 .74rem/1 var(--mono);cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.copybtn:hover{color:var(--text)}

/* ---------- cursor ---------- */
.cur,.cur-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:100;border-radius:50%;translate:-50% -50%}
.cur{width:6px;height:6px;background:var(--cyan)}
.cur-ring{width:36px;height:36px;border:1.5px solid rgba(82,184,211,.6);display:grid;place-items:center;font:700 .62rem/1 var(--mono);color:var(--ink);letter-spacing:.06em;transition:width .3s,height .3s,background .3s,border-color .3s}
.cur-ring.big{width:74px;height:74px;background:var(--cyan);border-color:var(--cyan)}
.cur-ring.link{width:54px;height:54px;background:rgba(82,184,211,.15)}
@media (hover:none),(pointer:coarse){.cur,.cur-ring{display:none}}

/* ---------- mobile story ---------- */
@media (max-width:900px){
  .sticky-phone{top:calc(env(safe-area-inset-top,0px) + 66px);height:auto;padding-block:10px;z-index:2;background:linear-gradient(var(--ink) 70%,transparent)}
  .sticky-phone .phone{--pw:min(200px,46vw)}
  .step{min-height:62vh}
  .chip.a{left:0}.chip.b{right:0}
  .hero-device{margin-top:10px}
}


.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ---------- publisher login ---------- */
.links a.pub-login{display:inline-flex;align-items:center;gap:7px;margin-left:8px;color:var(--text);border:1px solid var(--line);padding:8px 14px}
.links a.pub-login::after{display:none}
.links a.pub-login:hover{border-color:var(--cyan);color:var(--cyan)}
.links a.pub-login .ic{width:15px;height:15px}
@media (max-width:1100px){.links a.pub-login{margin:10px 0 0;align-self:flex-start;font:600 1.05rem/1 var(--body);padding:12px 16px}}
/* ---------- press ---------- */
.press{padding-block:clamp(80px,10vw,130px);position:relative}
.press-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px;margin-bottom:36px}
.press-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px}
.press-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:clamp(20px,2.4vw,28px);border-radius:24px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.01));text-decoration:none;color:inherit;overflow:hidden;isolation:isolate;transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .3s}
.press-card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(320px circle at var(--x,50%) var(--y,0%),rgba(82,184,211,.18),transparent 65%);opacity:0;transition:opacity .35s}
.press-card:hover{transform:translateY(-6px);border-color:rgba(82,184,211,.45)}
.press-card:hover::before{opacity:1}
.outlet{align-self:flex-start;font:800 clamp(1.3rem,2vw,1.6rem)/1 var(--display);font-variation-settings:"wdth" 80;letter-spacing:-.01em;padding-bottom:6px;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .45s cubic-bezier(.2,.8,.2,1)}
.press-logo .outlet{background:none;padding:0}
.press-logo{height:64px;border-radius:14px;background:#ffffff;display:flex;align-items:center;justify-content:flex-start;padding:10px 16px;box-sizing:border-box;overflow:hidden}
.press-logo img{max-height:40px;max-width:100%;width:auto;height:auto;object-fit:contain;display:block}
.press-logo .outlet{color:#0b1219}
.press-more{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-weight:650;color:var(--cyan);text-decoration:none;padding:10px 0 2px;margin-top:auto}
.press-more .ic{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.press-more:hover .ic,.press-card:hover .press-more .ic{transform:translateX(4px) rotate(-45deg)}
.press-date{font:500 .74rem/1.3 var(--mono);color:var(--mute)}
.press-card h3{font:650 1.08rem/1.35 var(--body);letter-spacing:0;color:var(--text)}
.press-card p{color:var(--mute);font-size:.94rem}
.press-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:14px;margin-top:auto;font:500 .74rem/1.3 var(--mono);color:var(--mute)}
.press-foot .go{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;flex:none;transition:background .3s,transform .4s,color .3s,border-color .3s}
.press-card:hover .go{background:var(--cyan);border-color:var(--cyan);color:var(--ink);transform:rotate(-45deg)}
/* ---------- form messages ---------- */
.formmsg{flex:1 1 260px;font-size:.92rem;line-height:1.5;min-height:1.4em;color:var(--mint)}
.formmsg.err{color:var(--coral)}.formmsg.ok{color:var(--mint)}.formmsg.warn{color:var(--text)}
.formmsg b{color:var(--cyan)}
.fm-acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:10px}
.fm-acts .btn.sm{margin-left:0}
/* ---------- SEO editor ---------- */
.seo{border:1px solid var(--line);border-radius:18px;padding:16px;margin:0;display:grid;gap:14px;min-width:0}
.seo legend{padding:0 8px;font:700 .74rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.seo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.seo-fields,.seo-side{display:grid;gap:12px;align-content:start;min-width:0}
.count{float:right;letter-spacing:0;text-transform:none;font-weight:600}
.count.good{color:var(--mint)}.count.warn{color:var(--sun)}.count.bad{color:var(--coral)}
.check{display:flex;gap:10px;align-items:center;font-size:.95rem;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--cyan)}
.serp{display:grid;gap:4px;padding:14px 16px;border-radius:14px;background:#ffffff;color:#202124;font-family:Arial,system-ui,sans-serif;min-width:0}
.serp-url{font-size:.78rem;color:#4d5156;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.serp-title{font-size:1.12rem;line-height:1.3;color:#1a0dab}
.serp-desc{font-size:.84rem;line-height:1.5;color:#4d5156}
.seo-score{display:flex;align-items:center;gap:12px}
.seo-bar{flex:1;height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.seo-bar i{display:block;height:100%;width:0;border-radius:inherit;background:var(--coral);transition:width .5s cubic-bezier(.2,.8,.2,1),background .3s}
.seo-score b{font:700 .78rem/1 var(--mono);white-space:nowrap}
.seo-checks{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.86rem;line-height:1.45}
.seo-checks li{display:grid;grid-template-columns:12px minmax(0,1fr);gap:10px;align-items:start;color:#c9d8df}
.seo-checks li::before{content:"";width:10px;height:10px;border-radius:50%;margin-top:5px;background:var(--c)}
.seo-checks li.good{--c:var(--mint)}.seo-checks li.warn{--c:var(--sun)}.seo-checks li.bad{--c:var(--coral)}
.pill.seo-good{background:rgba(124,242,201,.16);color:var(--mint)}.pill.seo-fair{background:rgba(255,200,87,.16);color:var(--sun)}.pill.seo-poor{background:rgba(255,122,89,.16);color:var(--coral)}
@media (max-width:760px){.seo-grid{grid-template-columns:minmax(0,1fr)}}
/* ---------- article extras ---------- */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font:500 .78rem/1.3 var(--mono);color:var(--mute);margin-bottom:8px}
.crumbs a{color:var(--mute);text-decoration:none}.crumbs a:hover{color:var(--cyan)}
.toc{border:1px solid var(--line);border-radius:18px;padding:18px 20px;margin-bottom:30px;max-width:68ch;background:rgba(255,255,255,.02)}
.toc b{font:600 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.toc ol{margin:12px 0 0;padding-left:1.3em;display:grid;gap:6px}
.toc li::marker{color:var(--mute)}
.toc button{all:unset;cursor:pointer;color:var(--text);font-size:.96rem;line-height:1.4}
.toc button:hover{color:var(--cyan)}
.toc button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:4px}

/* ---------- fit-to-screen sizing (all widths and heights) ---------- */
.hero .phone{--pw:clamp(210px, calc((100vh - 190px) * 9 / 19), 290px)}
.chip.b{right:-2%}
.sticky-phone{height:calc(100vh - 110px)}
.sticky-phone .phone{--pw:clamp(190px, calc((100vh - 170px) * 9 / 19), 300px)}
.cases-pin{padding-block:clamp(76px,11vh,96px) clamp(16px,3vh,32px)}
.cases-head{margin-bottom:clamp(14px,2.6vh,28px);align-items:center}
.cases-head h2{font-size:clamp(2rem, min(5vw, 7.2vh), 3.8rem)}
.case{box-sizing:border-box;width:min(760px,80vw);padding:clamp(16px,2.2vw,28px);gap:clamp(16px,3vw,36px);border-radius:24px}
.case .phone{--pw:clamp(130px, calc((100vh - 400px) * 9 / 19), 210px)}
.case-body{gap:clamp(10px,1.6vh,14px)}
.case h3{font-size:clamp(1.35rem, min(2.4vw, 4vh), 2.1rem)}
.case p{font-size:.93rem;line-height:1.5}
.metrics{padding-top:clamp(10px,1.6vh,14px)}
.metrics b{font-size:clamp(1.2rem, min(2.2vw, 3.6vh), 1.75rem)}
.case .btn.play{padding:12px 18px;font-size:.92rem}
.swipe-hint{display:none;align-items:center;gap:6px;font:600 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.swipe-hint .ic{animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(5px)}}
.cases.static .swipe-hint{display:inline-flex}
.cases.static .cases-pin{padding-block:clamp(64px,9vw,100px)}
.cases.static .case .phone{--pw:clamp(130px, 22vw, 190px)}
.cases.static .track{gap:16px}
@media (max-width:700px){
  .case{width:min(86vw,440px);grid-template-columns:104px minmax(0,1fr);align-items:start;justify-items:stretch;column-gap:14px;row-gap:12px;padding:16px}
  .case-body{display:contents}
  .case .phone,.cases.static .case .phone{--pw:104px;grid-column:1;grid-row:1/3;align-self:start}
  .case .cat{grid-column:2;grid-row:1;align-self:end;font-size:.66rem;line-height:1.35}
  .case h3{grid-column:2;grid-row:2;align-self:start;font-size:1.28rem;line-height:1.08}
  .case p,.case .metrics,.case .play{grid-column:1/-1}
  .metrics{gap:8px}.metrics span{font-size:.66rem}
  .case .btn.play{justify-self:stretch;justify-content:center}
}
@media (max-width:900px){
  .sticky-phone{top:calc(env(safe-area-inset-top,0px) + 64px);height:min(38vh,340px);max-height:none;padding-block:6px 14px;background:var(--ink);box-shadow:0 18px 22px -4px var(--ink);gap:18px}
  .sticky-phone .phone{--pw:calc((min(38vh,340px) - 26px) * 9 / 19)}
  .step{min-height:calc(100vh - 64px - min(38vh,340px));justify-content:center;padding-block:24px}
  .step h3{font-size:clamp(1.6rem,7vw,2.1rem)}
  .step p{font-size:.98rem}
  .hero .phone{--pw:min(250px,64vw)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  :root{--skew:0deg!important}
}

/* ---------- PHP site additions ---------- */
[hidden]{display:none!important}
body{margin:0}
img{max-width:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.subpage .page{min-height:60vh}
.filters a{border:1px solid var(--line);background:transparent;color:var(--mute);font:600 .88rem/1 var(--body);padding:11px 16px;border-radius:99px;text-decoration:none;transition:background .25s,color .25s,border-color .25s}
.filters a:hover{color:var(--text);border-color:rgba(82,184,211,.45)}
.filters a[aria-current="page"]{background:var(--text);color:var(--ink);border-color:var(--text)}
.toc a{color:var(--text);text-decoration:none;font-size:.96rem;line-height:1.4}
.toc a:hover{color:var(--cyan)}
.prose ol{padding-left:1.4em;display:grid;gap:.5em}
.prose ol li::marker{color:var(--cyan);font-weight:700}
.prose h2{scroll-margin-top:90px}
.draft-banner{display:flex;gap:10px;align-items:center;background:rgba(255,200,87,.12);border:1px solid rgba(255,200,87,.4);color:var(--sun);padding:12px 16px;border-radius:14px;margin-bottom:20px;font-size:.92rem}
.pager{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;margin-top:48px;color:var(--mute);font:500 .85rem/1 var(--mono)}
.latest{padding-block:clamp(70px,9vw,120px);border-top:1px solid var(--line)}
.latest .press-head{margin-bottom:36px}
.subpage .pp-layout{padding-block:0}