/* vnay.com — concept E · Explore */
:root{
  --bg:#0E0A13; --bg2:#120C18; --card:#18121F; --card2:#1E1727; --card3:#261D31;
  --line:rgba(240,232,245,.07); --line2:rgba(240,232,245,.13); --line3:rgba(240,232,245,.22);
  --text:#F4EEF8; --mut:#AC9FB8; --dim:#7A6D86;
  --deep:#35134F; --ink:#2F1047; --purple:#7447A6; --purple2:#9A6FD0;
  --orange:#FF6B2C; --orange2:#FF7A3D; --lav:#F0E8F5; --peach:#FFF1E5;
  --r:14px; --r-sm:10px; --gap:14px; --gut:20px;
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --disp:"Anton","Impact","Arial Narrow",sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 14px/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
svg{flex:none}
h1,h2,h3,h4,p,ul,figure{margin:0;padding:0}
ul{list-style:none}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:6px}
.wrap{max-width:1760px;margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.disp{font-family:var(--disp);font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:.95}

/* ---------- buttons & chips ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:10px;font:700 14px/1 var(--sans);white-space:nowrap;transition:transform .2s var(--ease),background .2s,box-shadow .2s,color .2s}
.btn-o{background:var(--orange);color:#1A0B03;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18),0 0 0 0 rgba(255,107,44,0)}
.btn-o:hover{background:#FF8247;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18),0 10px 30px -10px rgba(255,107,44,.7);transform:translateY(-1px)}
.btn-g{background:rgba(240,232,245,.06);box-shadow:inset 0 0 0 1px var(--line2)}
.btn-g:hover{background:rgba(240,232,245,.1)}
.btn-l{background:var(--lav);color:#1B0E26;box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}
.btn-l:hover{background:#fff;transform:translateY(-1px)}
.btn-lg{height:50px;padding:0 24px;font-size:15px;border-radius:12px}
.chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:7px;font:600 11px/1 var(--sans);letter-spacing:.01em;background:rgba(240,232,245,.08);color:var(--lav);box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap}
.chip svg{width:12px;height:12px}
.chip-p{background:rgba(116,71,166,.28);color:#E2D2F4;box-shadow:inset 0 0 0 1px rgba(154,111,208,.35)}
.badge{display:inline-flex;align-items:center;height:17px;padding:0 6px;border-radius:5px;font:800 9.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;font-style:italic}
.b-top{background:var(--orange);color:#1A0B03}
.b-new{background:var(--purple);color:#fff}
.b-live{background:var(--orange);color:#1A0B03;font-style:normal;gap:4px}
.b-live::before{content:"";width:5px;height:5px;border-radius:50%;background:#1A0B03;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.25}}

/* ---------- announcement ---------- */
.ann{position:relative;display:flex;align-items:center;justify-content:center;gap:14px;min-height:40px;padding:6px 48px;background:linear-gradient(90deg,#2A0F40,#4A1C6E 50%,#2A0F40);color:var(--lav);font:600 13.5px/1.3 var(--sans);text-align:center}
.ann::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,107,44,.55),transparent)}
.ann svg{color:var(--orange2)}
.ann .ann-t{display:inline-flex;align-items:center;gap:8px}
.ann b{color:#fff;font-weight:700}
.ann .btn{height:26px;padding:0 11px;border-radius:7px;font-size:12px}
.ann-x{position:absolute;right:12px;top:50%;translate:0 -50%;width:28px;height:28px;display:grid;place-items:center;border-radius:8px;color:var(--lav);opacity:.75}
.ann-x:hover{opacity:1;background:rgba(255,255,255,.08)}
.ann[hidden]{display:none}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(14,10,19,.82);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:22px;height:60px}
.brand{display:inline-flex;align-items:center;gap:9px;flex:none}
.mark{width:28px;height:28px;border-radius:8px;background:var(--deep);display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.mark::after{content:"";width:11px;height:11px;border-radius:3.5px;background:var(--orange)}
.wm{font:600 21px/1 "Fredoka",var(--sans);letter-spacing:-.01em;color:#fff}
.wm b{font-weight:500;color:var(--orange2)}
.links{display:flex;align-items:center;gap:2px;flex:1;min-width:0}
.links a{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 11px;border-radius:9px;font:600 14px/1 var(--sans);color:var(--mut);white-space:nowrap;transition:color .15s,background .15s}
.links a:hover{color:var(--text);background:rgba(240,232,245,.06)}
.links a.on{color:var(--text)}
.links a.on::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--orange)}
.links .sep{width:1px;height:18px;background:var(--line2);margin:0 6px}
.links .badge{height:15px;font-size:8.5px;padding:0 5px}
.nav-r{display:flex;align-items:center;gap:8px;flex:none}
.nav-r .btn{height:36px;padding:0 15px;font-size:13.5px}

/* ---------- section heads ---------- */
.sec{margin-top:56px}
.sh{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px}
.sh h2{font:400 clamp(26px,2.6vw,36px)/1 var(--disp);text-transform:uppercase;letter-spacing:.005em}
.sh h2 em{font-style:normal;color:var(--orange2)}
.sh .sub{margin-top:6px;color:var(--mut);font-size:14px}
.sh-r{display:flex;align-items:center;gap:8px;flex:none}
.see{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:9px;font:600 13px/1 var(--sans);color:var(--lav);background:rgba(240,232,245,.05);box-shadow:inset 0 0 0 1px var(--line)}
.see:hover{background:rgba(240,232,245,.1)}
.arw{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:rgba(240,232,245,.05);box-shadow:inset 0 0 0 1px var(--line);transition:background .15s,opacity .2s}
.arw:hover{background:rgba(240,232,245,.12)}
.arw:disabled{opacity:.3;cursor:default}
.count{font:600 12px/1 var(--sans);color:var(--dim);margin-left:10px;letter-spacing:.02em;vertical-align:.45em;font-family:var(--sans)}

/* ---------- media primitive ---------- */
.m{position:relative;overflow:hidden;background:#1a1322}
.m>img,.m>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.m>video{opacity:0;transition:opacity .5s}
.m.on>video{opacity:1}
.m::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);border-radius:inherit}

/* ---------- scrollers ---------- */
.rail{position:relative}
.scroller{display:flex;gap:var(--gap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px;cursor:grab}
.scroller::-webkit-scrollbar{display:none}
.scroller.drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.scroller.drag *{pointer-events:none}
.scroller>*{scroll-snap-align:start;flex:none}
.fade-r{position:absolute;top:0;right:calc(-1 * var(--gut));bottom:0;width:90px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--bg) 85%);transition:opacity .3s}
.rail.end .fade-r{opacity:0}
.next{position:absolute;right:6px;top:var(--arrow-top,50%);translate:0 -50%;z-index:3;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(24,18,31,.88);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px var(--line3),0 8px 24px rgba(0,0,0,.5);transition:transform .2s var(--ease),opacity .2s}
.next:hover{transform:scale(1.07)}
.next.prev{right:auto;left:6px}
.rail.start .next.prev,.rail.end .next:not(.prev){opacity:0;pointer-events:none}

/* ---------- feature carousel ---------- */
.feat{padding-top:18px}
.fcard{width:calc((100% - 3 * var(--gap)) / 3.45);min-width:300px}
.fmedia{position:relative;aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;background:var(--card);transition:transform .35s var(--ease)}
.fcard:hover .fmedia{transform:translateY(-3px)}
.fcard h3{margin-top:14px;font:400 20px/1.05 var(--disp);text-transform:uppercase;letter-spacing:.01em}
.fcard h3 .hl{color:var(--orange2)}
.fcard p{margin-top:5px;color:var(--mut);font-size:14px;line-height:1.4}
.fmedia>.m{position:absolute;inset:0}
.ftag{position:absolute;left:12px;top:12px;z-index:2;display:flex;gap:6px}
.ftag .chip{background:rgba(14,10,19,.62);backdrop-filter:blur(8px)}
.fshade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,10,19,0) 45%,rgba(14,10,19,.8));pointer-events:none}
.fbig{position:absolute;left:16px;bottom:14px;right:16px;z-index:2;font:400 clamp(34px,3.3vw,52px)/.9 var(--disp);text-transform:uppercase;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.4)}
.fbig small{display:block;font:700 12px/1 var(--sans);letter-spacing:.14em;color:var(--orange2);margin-bottom:8px;text-shadow:none}

/* ask-for-anything live grid */
.ask{position:absolute;inset:0;background:radial-gradient(120% 90% at 20% 0%,#2A1540,#150E1C 65%);padding:12px;display:flex;flex-direction:column;gap:9px}
.ask-bar{display:flex;align-items:center;gap:8px;height:34px;padding:0 6px 0 12px;border-radius:10px;background:rgba(240,232,245,.07);box-shadow:inset 0 0 0 1px var(--line2);font:500 12.5px/1 var(--sans);color:var(--lav);white-space:nowrap;overflow:hidden}
.ask-bar .typed{overflow:hidden;text-overflow:ellipsis;flex:1}
.ask-bar .caret{display:inline-block;width:1.5px;height:14px;background:var(--orange);vertical-align:-2px;margin-left:1px;animation:blink 1s steps(1) infinite}
.ask-bar .go{width:24px;height:24px;border-radius:7px;background:var(--orange);display:grid;place-items:center;color:#1A0B03;flex:none}
.ask-meta{display:flex;align-items:center;justify-content:space-between;font:600 11px/1 var(--sans);color:var(--mut)}
.ask-meta b{color:var(--text);font-weight:700}
.ask-grid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 1fr;gap:6px;min-height:0}
.take{position:relative;border-radius:7px;overflow:hidden;background:#221930}
.take img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .6s,transform .9s var(--ease)}
.take.done img{opacity:1;transform:none}
.take .st{position:absolute;left:5px;bottom:5px;z-index:2;font:700 9.5px/1 var(--sans);font-variant-numeric:tabular-nums;padding:3px 5px;border-radius:5px;background:rgba(14,10,19,.7);color:var(--lav)}
.take.done .st{opacity:0;transition:opacity .4s .6s}
.take:not(.done)::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(154,111,208,.22) 50%,transparent 70%);background-size:220% 100%;animation:shim 1.4s linear infinite}
.take.q::before{animation:none;background:none}
.take.q .st{color:var(--dim)}
@keyframes shim{from{background-position:120% 0}to{background-position:-100% 0}}

/* ads light card */
.ads{position:absolute;inset:0;background:linear-gradient(160deg,#F6EFF9,#E9DDF1);display:flex;align-items:center;justify-content:center;gap:3.5%;padding:5% 6%}
.phone{position:relative;height:100%;aspect-ratio:9/16;border-radius:12px;overflow:hidden;box-shadow:0 14px 30px -12px rgba(53,19,79,.55),0 0 0 3px #fff}
.phone .m{position:absolute;inset:0}
.phone .pc{position:absolute;left:0;right:0;bottom:10%;z-index:2;text-align:center;font:800 9.5px/1.15 var(--sans);text-transform:uppercase;color:#fff;letter-spacing:.02em;padding:0 8%;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.phone .pc span{background:rgba(0,0,0,.45);padding:2px 4px;border-radius:3px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.phone .rb{position:absolute;right:5px;bottom:24%;z-index:2;display:flex;flex-direction:column;gap:7px}
.phone .rb i{display:block;width:13px;height:13px;border-radius:50%;background:rgba(255,255,255,.85)}
.phone .tl{position:absolute;left:6px;top:6px;z-index:2;font:700 8px/1 var(--sans);color:#fff;background:rgba(0,0,0,.4);padding:3px 5px;border-radius:4px;letter-spacing:.04em}

/* voice card */
.vcard-ui{position:absolute;left:12px;right:12px;bottom:12px;z-index:3;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:rgba(14,10,19,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px var(--line2)}
.pbtn{width:40px;height:40px;border-radius:50%;background:var(--orange);color:#1A0B03;display:grid;place-items:center;flex:none;transition:transform .2s var(--ease)}
.pbtn:hover{transform:scale(1.07)}
.pbtn svg+svg,.playing .pbtn svg:first-child{display:none}
.playing .pbtn svg+svg{display:block}
.vmeta{flex:1;min-width:0}
.vmeta b{display:block;font:700 12.5px/1.2 var(--sans)}
.vmeta span{font-size:11.5px;color:var(--mut)}
.wave{display:flex;align-items:center;gap:2px;height:28px;margin-top:6px}
.wave i{flex:1;min-width:1.5px;border-radius:2px;background:rgba(240,232,245,.28);height:var(--h);transform-origin:center;transition:background .15s}
.wave i.p{background:var(--orange2)}
.playing .wave i{animation:wv .9s ease-in-out infinite alternate;animation-delay:var(--d)}
@keyframes wv{from{transform:scaleY(.45)}to{transform:scaleY(1.1)}}
.vtags{position:absolute;left:12px;top:12px;z-index:3;display:flex;gap:6px;flex-wrap:wrap}
.tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:7px;font:600 11px/1 ui-monospace,"SF Mono",Menlo,monospace;background:rgba(53,19,79,.8);color:#E9D9F7;box-shadow:inset 0 0 0 1px rgba(154,111,208,.4);backdrop-filter:blur(6px)}

/* edit split */
.split{position:absolute;inset:0;display:grid;grid-template-columns:1fr auto;gap:8px;padding:10px;background:#130D19}
.split .wide{position:relative;border-radius:9px;overflow:hidden;aspect-ratio:21/9;width:100%}
.split .tall{position:relative;height:100%;aspect-ratio:9/16;border-radius:9px;overflow:hidden;box-shadow:0 0 0 2px var(--orange)}
.split .m{position:absolute;inset:0}
.split .lbl{position:absolute;left:6px;top:6px;z-index:2;font:700 9.5px/1 var(--sans);padding:4px 6px;border-radius:5px;background:rgba(14,10,19,.72);letter-spacing:.04em}
.split .tall .lbl{background:var(--orange);color:#1A0B03}
.split .cap{position:absolute;left:8%;right:8%;bottom:14%;z-index:2;text-align:center;font:800 11px/1.15 var(--sans);text-transform:uppercase;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.9)}
.split .cap span{color:#FFD04A}
.split .wcol{display:flex;flex-direction:column;gap:8px;justify-content:center;min-width:0}
.tline{display:flex;gap:3px;height:22px}
.tline i{border-radius:4px;background:linear-gradient(180deg,#4A2A6A,#35134F);box-shadow:inset 0 0 0 1px rgba(154,111,208,.35)}
.tline i:nth-child(2){background:linear-gradient(180deg,#FF8A55,#E85A1E)}
.ops{display:flex;flex-wrap:wrap;gap:5px}
.ops .chip{height:20px;font-size:10px;padding:0 6px}

/* ---------- promo + tools ---------- */
.pt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--gap);margin-top:44px}
.promo{position:relative;border-radius:var(--r);overflow:hidden;min-height:320px;display:flex;flex-direction:column;justify-content:flex-end;padding:26px}
.promo .m{position:absolute;inset:0}
.promo::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(14,10,19,.92) 0%,rgba(14,10,19,.55) 55%,rgba(14,10,19,.1)),linear-gradient(0deg,rgba(14,10,19,.6),transparent 60%)}
.promo>*:not(.m){position:relative;z-index:2}
.promo h2{font:400 clamp(36px,3.2vw,50px)/.92 var(--disp);text-transform:uppercase}
.promo h2 span{display:block;color:var(--orange2)}
.checks{margin:16px 0 20px;display:grid;gap:7px}
.checks li{display:flex;align-items:center;gap:9px;color:#E4DAEC;font-size:14px}
.checks svg{color:var(--orange2)}
.tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr 1fr;gap:var(--gap)}
.tool{position:relative;border-radius:var(--r);overflow:hidden;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);padding:18px;display:flex;flex-direction:column;justify-content:space-between;min-height:150px;isolation:isolate;transition:transform .25s var(--ease),box-shadow .25s}
.tool:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--line3)}
.tool .m{position:absolute;inset:0;z-index:-2;opacity:0;transition:opacity .45s;background:transparent}
.tool::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(24,18,31,.35),rgba(24,18,31,.92) 80%);opacity:0;transition:opacity .45s}
.tool:hover .m,.tool:hover::before,.tool:focus-visible .m,.tool:focus-visible::before{opacity:1}
.tool-top{display:flex;justify-content:space-between;align-items:flex-start}
.ticon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:rgba(240,232,245,.05);box-shadow:inset 0 0 0 1px var(--line2);color:var(--lav)}
.tool h3{display:flex;align-items:center;gap:8px;font:700 16px/1.2 var(--sans);letter-spacing:-.01em}
.tool p{margin-top:5px;color:var(--mut);font-size:13px;line-height:1.35}
.tool .go{position:absolute;right:16px;bottom:18px;opacity:0;transform:translateX(-4px);transition:.25s var(--ease);color:var(--orange2)}
.tool:hover .go{opacity:1;transform:none}

/* ---------- claude banner ---------- */
.opus{position:relative;margin-top:56px;border-radius:18px;overflow:hidden;padding:64px 24px 58px;text-align:center;background:#0C0811;isolation:isolate;box-shadow:inset 0 0 0 1px var(--line)}
.opus::before{content:"";position:absolute;inset:0;z-index:-2;background:
  radial-gradient(60% 34% at 50% 78%,rgba(255,107,44,.95),rgba(255,107,44,0) 70%),
  radial-gradient(90% 55% at 50% 84%,rgba(203,77,48,.55),rgba(116,71,166,.35) 45%,transparent 75%),
  radial-gradient(120% 70% at 50% 100%,rgba(53,19,79,.9),transparent 70%),
  linear-gradient(180deg,#0C0811 0%,#150C1E 55%,#2A1233 100%)}
.opus::after{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--grain);opacity:.18;mix-blend-mode:overlay}
.opus .horizon{position:absolute;left:-10%;right:-10%;top:72%;height:2px;z-index:-1;background:linear-gradient(90deg,transparent,rgba(255,196,160,.9) 30%,#fff 50%,rgba(255,196,160,.9) 70%,transparent);filter:blur(1px);box-shadow:0 0 30px 6px rgba(255,120,60,.55)}
.opus .stars{position:absolute;inset:0 0 40% 0;z-index:-1;background-image:radial-gradient(1px 1px at 12% 22%,#fff8,transparent),radial-gradient(1px 1px at 28% 60%,#fff6,transparent),radial-gradient(1.5px 1.5px at 41% 18%,#fff9,transparent),radial-gradient(1px 1px at 63% 35%,#fff7,transparent),radial-gradient(1px 1px at 77% 14%,#fff8,transparent),radial-gradient(1.5px 1.5px at 88% 48%,#fff6,transparent),radial-gradient(1px 1px at 54% 70%,#fff5,transparent),radial-gradient(1px 1px at 6% 66%,#fff6,transparent),radial-gradient(1px 1px at 95% 26%,#fff7,transparent)}
.opus .kick{font:600 clamp(16px,1.6vw,22px)/1.2 var(--sans);color:var(--lav);letter-spacing:-.005em}
.opus h2{margin-top:10px;font:400 clamp(58px,10.5vw,156px)/.88 var(--disp);text-transform:uppercase;letter-spacing:.005em;background:linear-gradient(180deg,#FFE6D6 0%,#FF9A62 45%,#FF6B2C 80%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 30px rgba(255,107,44,.25))}
.opus h2 .nb{white-space:nowrap}
.opus p{max-width:560px;margin:18px auto 26px;color:#E7DCEF;font-size:16px;line-height:1.5}
.opus .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ---------- showcase rows ---------- */
.shelf{--rh:250px}
.shelf.tallrow{--rh:420px}
.sc{position:relative;height:var(--rh);width:calc(var(--rh) * var(--ar));border-radius:var(--r);overflow:hidden;background:var(--card);transition:transform .3s var(--ease)}
.sc .m{position:absolute;inset:0}
.sc:hover{transform:translateY(-3px)}
.sc .m>img,.sc .m>video{transition:transform .8s var(--ease),opacity .5s}
.sc:hover .m>img,.sc:hover .m>video{transform:scale(1.035)}
.cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:12px;display:flex;flex-direction:column-reverse;gap:0}
.cap::before{content:"";position:absolute;inset:-60px 0 0;z-index:-1;background:linear-gradient(180deg,transparent,rgba(10,7,14,.9) 60%);opacity:0;transition:opacity .35s}
.sc:hover .cap::before,.sc:focus-visible .cap::before{opacity:1}
.cap .chips{display:flex;gap:5px;flex-wrap:wrap;min-width:0}
.cap .chips .chip{max-width:100%;overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:22px}
.cap .chips .chip{background:rgba(14,10,19,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cap p{font-size:12.5px;line-height:1.4;color:#EDE4F3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;max-height:0;opacity:0;transition:max-height .4s var(--ease),opacity .3s,margin .4s var(--ease)}
.sc:hover .cap p,.sc:focus-visible .cap p{max-height:7.2em;opacity:1;margin-bottom:9px}
.sc .kind{position:absolute;right:10px;top:10px;z-index:2;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:rgba(14,10,19,.55);backdrop-filter:blur(6px);color:var(--lav)}
.tallrow .cap p{-webkit-line-clamp:5}
.tallrow .sc:hover .cap p{max-height:10em}

/* ---------- wall ---------- */
.wall{--cw:calc((min(100vw,1760px) - 2 * var(--gut) - 7 * 8px) / 8);display:grid;grid-template-columns:repeat(8,1fr);grid-auto-rows:var(--cw);gap:8px;position:relative}
.wt{position:relative;border-radius:12px;overflow:hidden;grid-column:var(--c);grid-row:var(--r);background:var(--card)}
.wt .m{position:absolute;inset:0}
.wt:hover .m>img,.wt:hover .m>video{transform:scale(1.04)}
.wt .m>img,.wt .m>video{transition:transform .8s var(--ease),opacity .5s}
.wlabel{grid-column:4/6;grid-row:2/4;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:16px;background:radial-gradient(120% 90% at 50% 110%,rgba(255,107,44,.45),transparent 60%),radial-gradient(100% 80% at 50% 0%,#3B1858,#1B1224 70%);box-shadow:inset 0 0 0 1px var(--line2);position:relative;overflow:hidden}
.wlabel::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.12;mix-blend-mode:overlay;pointer-events:none}
.wlabel small{font:700 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.wlabel .wm{font-size:clamp(30px,3.4vw,50px)}
.wlabel p{color:#DCCFE6;font-size:13px;max-width:240px}

/* ---------- how it works ---------- */
.how{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.step{position:relative;border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--line);padding:16px;display:flex;flex-direction:column;gap:12px;min-height:300px}
.step .n{display:flex;align-items:center;gap:10px;font:700 13px/1 var(--sans)}
.step .n i{font:400 15px/1 var(--disp);font-style:normal;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--deep);color:var(--orange2)}
.step .n span{color:var(--mut);font-weight:600;margin-left:auto;font-size:11.5px}
.step .n .badge{color:#1A0B03;font-size:9.5px;font-weight:800}
.step .body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:8px;min-height:0}
.step .foot{font-size:13px;color:var(--mut);line-height:1.4}
.composer{border-radius:12px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line2);padding:12px;display:flex;flex-direction:column;gap:12px}
.composer .txt{font-size:14px;line-height:1.45;min-height:62px;color:var(--text)}
.composer .bar{display:flex;align-items:center;gap:6px}
.seg{display:inline-flex;padding:2px;border-radius:8px;background:rgba(240,232,245,.06)}
.seg b{font:600 11px/1 var(--sans);padding:5px 8px;border-radius:6px;color:var(--mut)}
.seg b.on{background:var(--deep);color:#fff}
.composer .go{margin-left:auto;width:28px;height:28px;border-radius:8px;background:var(--orange);display:grid;place-items:center;color:#1A0B03}
.plan li{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line);font-size:12.5px;font-weight:600;opacity:.35;transition:opacity .4s}
.plan li.ok{opacity:1}
.plan li .ck{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line3);display:grid;place-items:center;flex:none;color:transparent;transition:.3s}
.plan li.ok .ck{background:var(--orange);box-shadow:none;color:#1A0B03}
.plan li em{margin-left:auto;font-style:normal;color:var(--mut);font-weight:500;font-size:11px;white-space:nowrap}
.plan{display:grid;gap:6px}
.lv{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.lv .take{aspect-ratio:4/5}
.lv-h{display:flex;align-items:center;justify-content:space-between;font:600 12px/1 var(--sans);color:var(--mut)}
.lv-h b{color:var(--text)}
.share{display:flex;flex-direction:column;gap:8px}
.link{display:flex;align-items:center;gap:8px;height:38px;padding:0 6px 0 10px;border-radius:10px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line2);font:600 12.5px/1 var(--sans);color:var(--lav)}
.link svg{color:var(--orange2)}
.link .cp{margin-left:auto;height:26px;padding:0 9px;border-radius:7px;background:rgba(240,232,245,.08);display:grid;place-items:center;font-size:11px}
.cmt{display:flex;gap:9px;align-items:flex-start;padding:9px 10px;border-radius:10px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line)}
.cmt .av{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;font:700 10.5px/1 var(--sans);color:#fff}
.cmt p{font-size:12.5px;line-height:1.4;color:#E6DCEE}
.cmt p b{display:block;font-size:11.5px;color:var(--mut);font-weight:600;margin-bottom:2px}
.cmt p i{font-style:normal;color:var(--orange2);font-weight:700}
.minithumb{display:flex;gap:6px}
.minithumb .m{width:44px;height:44px;border-radius:8px}

/* ---------- edit ---------- */
.edit{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:var(--gap)}
.ed-main{position:relative;border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--line);padding:14px;display:flex;flex-direction:column;gap:12px}
.ed-view{position:relative;aspect-ratio:21/9;border-radius:10px;overflow:hidden}
.ed-view .m{position:absolute;inset:0}
.ed-view .frame{position:absolute;top:0;bottom:0;left:50%;width:calc(100% * 9 / 16 * 9 / 21);translate:-50% 0;box-shadow:0 0 0 2px var(--orange),0 0 0 9999px rgba(14,10,19,.55);border-radius:4px;z-index:2;animation:pan 9s var(--ease) infinite alternate}
@keyframes pan{0%{left:32%}100%{left:62%}}
.ed-view .frame span{position:absolute;left:50%;top:8px;translate:-50% 0;font:700 10px/1 var(--sans);background:var(--orange);color:#1A0B03;padding:4px 7px;border-radius:5px;white-space:nowrap}
.ed-view .lbl{position:absolute;left:10px;top:10px;z-index:3;font:700 10px/1 var(--sans);padding:5px 7px;border-radius:6px;background:rgba(14,10,19,.75);letter-spacing:.04em}
.track{display:grid;gap:6px}
.trow{display:grid;grid-template-columns:78px 1fr;align-items:center;gap:10px;font:600 11px/1 var(--sans);color:var(--mut)}
.tbar{position:relative;display:flex;gap:3px;height:26px;min-width:0;overflow:hidden}
.tbar i{min-width:0}
.tbar i{position:relative;border-radius:5px;overflow:hidden;background:#2A1F36;box-shadow:inset 0 0 0 1px var(--line2)}
.tbar.v i{background-size:cover;background-position:center}
.tbar.a i{background:linear-gradient(180deg,rgba(116,71,166,.55),rgba(53,19,79,.8));}
.tbar.a i::after{content:"";position:absolute;inset:6px 4px;background:repeating-linear-gradient(90deg,rgba(240,232,245,.55) 0 1.5px,transparent 1.5px 4px);mask:linear-gradient(0deg,transparent,#000 30%,#000 70%,transparent);opacity:.8}
.tbar.c i{background:rgba(255,107,44,.16);box-shadow:inset 0 0 0 1px rgba(255,107,44,.45);font:700 9px/26px var(--sans);color:#FFB08A;padding:0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.playhead{position:absolute;top:-4px;bottom:-4px;left:38%;width:2px;background:var(--orange);border-radius:2px;box-shadow:0 0 10px rgba(255,107,44,.8);animation:ph 7s linear infinite}
@keyframes ph{from{left:0}to{left:100%}}
.ed-side{display:grid;grid-template-rows:auto 1fr;gap:var(--gap)}
.reel{position:relative;border-radius:var(--r);overflow:hidden;background:var(--card);min-height:380px}
.reel .m{position:absolute;inset:0}
.reel .m>video,.reel .m>img{object-position:55% 50%}
.reel .cap2{position:absolute;left:10%;right:10%;bottom:16%;z-index:2;text-align:center;font:800 17px/1.15 var(--sans);text-transform:uppercase;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.9)}
.reel .cap2 span{color:#FFD04A}
.reel .lbl{position:absolute;left:10px;top:10px;z-index:2;font:700 10px/1 var(--sans);padding:5px 7px;border-radius:6px;background:var(--orange);color:#1A0B03;letter-spacing:.04em}
.edit-r{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.opslist{display:flex;flex-wrap:wrap;gap:6px}
.opslist .chip{height:28px;padding:0 10px;font-size:12px;border-radius:9px}
.opslist .chip svg{width:14px;height:14px;color:var(--orange2)}
.ed-col{display:flex;flex-direction:column;gap:var(--gap)}
.ed-note{border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--line);padding:16px;display:flex;flex-direction:column;gap:12px}
.ed-note h3{font:400 22px/1 var(--disp);text-transform:uppercase}
.ed-note p{color:var(--mut);font-size:13.5px;line-height:1.45}

/* ---------- voices ---------- */
.voices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.voice{position:relative;border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--line);padding:18px;display:flex;flex-direction:column;gap:14px;overflow:hidden;isolation:isolate;transition:box-shadow .3s}
.voice::before{content:"";position:absolute;inset:-40% -20% auto auto;width:70%;aspect-ratio:1;border-radius:50%;z-index:-1;background:radial-gradient(circle,rgba(116,71,166,.35),transparent 65%);transition:opacity .4s}
.voice.playing{box-shadow:inset 0 0 0 1px rgba(255,107,44,.5)}
.voice.playing::before{background:radial-gradient(circle,rgba(255,107,44,.28),transparent 65%)}
.vh{display:flex;align-items:center;gap:12px}
.vh .av{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font:400 20px/1 var(--disp);color:#fff;flex:none}
.vh h3{font:700 16px/1.2 var(--sans)}
.vh span{font-size:12.5px;color:var(--mut)}
.vh .t{margin-left:auto;font:600 12px/1 var(--sans);color:var(--mut);font-variant-numeric:tabular-nums}
.voice .wave{height:52px;gap:3px;margin:0;cursor:pointer}
.script{font-size:13.5px;line-height:1.7;color:#E1D6EA}
.script .tag{height:20px;font-size:10.5px;padding:0 6px;vertical-align:1px;margin:0 1px;backdrop-filter:none}
.script .sp{color:var(--mut);font-weight:600}
.script .dir{color:var(--purple2);font-style:italic}
.vfoot{display:flex;align-items:center;gap:10px;margin-top:auto}
.vfoot .pbtn{width:44px;height:44px}
.vfoot .chips{display:flex;gap:5px;flex-wrap:wrap}
.vstrip{margin-top:var(--gap);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.vfeat{border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--line);padding:14px 16px;display:flex;align-items:center;gap:12px}
.vfeat .ticon{flex:none}
.vfeat b{display:block;font-size:14px}
.vfeat span{font-size:12.5px;color:var(--mut)}

/* ---------- teams / pricing ---------- */
.tp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.3fr);gap:var(--gap)}
.tcard{border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--line);padding:18px;display:flex;flex-direction:column;gap:14px;min-height:280px}
.tcard h3{font:400 22px/1 var(--disp);text-transform:uppercase}
.tcard p{color:var(--mut);font-size:13.5px;line-height:1.45}
.tcard .viz{margin-top:auto}
.pool{display:flex;flex-direction:column;gap:8px}
.pool .big{font:400 44px/1 var(--disp);letter-spacing:.01em}
.pool .big small{font:600 13px/1 var(--sans);color:var(--mut);margin-left:6px;letter-spacing:0}
.meter{height:8px;border-radius:5px;background:rgba(240,232,245,.08);overflow:hidden;display:flex;gap:2px}
.meter i{height:100%}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--mut)}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend span::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--c)}
.members{display:grid;gap:9px}
.mem{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:10px;font-size:12.5px;font-weight:600}
.mem .av{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:700 10px/1 var(--sans);color:#fff}
.mem .bar{grid-column:2/4;height:5px;border-radius:3px;background:rgba(240,232,245,.08);margin-top:-4px;overflow:hidden}
.mem .bar i{display:block;height:100%;border-radius:3px;background:var(--purple2)}
.mem em{font-style:normal;color:var(--mut);font-weight:500;font-size:11.5px;font-variant-numeric:tabular-nums}
.conn{display:flex;flex-direction:column;gap:8px}
.conn .row{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line)}
.conn .row .ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:#1C2B55;color:#9DB8FF;flex:none}
.conn .row b{font-size:13px;display:block}
.conn .row span{font-size:11.5px;color:var(--mut)}
.conn .ok{margin-left:auto;font:700 10.5px/1 var(--sans);color:#8FE3B0;display:inline-flex;align-items:center;gap:5px}
.conn .ok::before{content:"";width:6px;height:6px;border-radius:50%;background:#4ED48A}
.pricing{position:relative;border-radius:var(--r);overflow:hidden;padding:24px;display:flex;flex-direction:column;gap:14px;background:radial-gradient(90% 70% at 100% 100%,rgba(255,107,44,.35),transparent 60%),radial-gradient(90% 90% at 0% 0%,#3E1A5C,#1C1226 70%);box-shadow:inset 0 0 0 1px var(--line2);isolation:isolate}
.pricing::after{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--grain);opacity:.12;mix-blend-mode:overlay}
.pricing .kick{font:700 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--orange2)}
.pricing h2{font:400 clamp(44px,4.4vw,68px)/.9 var(--disp);text-transform:uppercase}
.pricing h2 span{color:var(--orange2);display:block}
.pfacts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pfacts div{border-radius:10px;background:rgba(14,10,19,.4);box-shadow:inset 0 0 0 1px var(--line);padding:10px 12px}
.pfacts b{display:block;font:400 22px/1 var(--disp);letter-spacing:.01em}
.pfacts span{font-size:11.5px;color:var(--mut)}
.gbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;border-radius:12px;background:#fff;color:#1F1F1F;font:700 15px/1 var(--sans);box-shadow:inset 0 -2px 0 rgba(0,0,0,.1);transition:transform .2s var(--ease)}
.gbtn:hover{transform:translateY(-1px)}
.pricing .fine{font-size:12px;color:var(--mut)}

/* ---------- final cta + footer ---------- */
.final{position:relative;margin-top:56px;border-radius:18px;overflow:hidden;min-height:340px;display:flex;align-items:center;justify-content:center;text-align:center;padding:40px 20px;isolation:isolate}
.final .m{position:absolute;inset:0;z-index:-2}
.final::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 90% at 50% 50%,rgba(14,10,19,.55),rgba(14,10,19,.88))}
.final h2{font:400 clamp(44px,6.4vw,96px)/.9 var(--disp);text-transform:uppercase}
.final h2 span{color:var(--orange2)}
.final p{margin:14px auto 24px;color:#E7DCEF;font-size:16px;max-width:520px}
.final .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
footer{margin-top:64px;border-top:1px solid var(--line);background:linear-gradient(180deg,var(--bg),#0A070E)}
.footg{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:32px;padding-block:48px 36px}
.footg .about p{margin-top:14px;color:var(--mut);font-size:13.5px;line-height:1.55;max-width:320px}
.footg h4{font:700 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:14px}
.footg li{margin-bottom:9px}
.footg li a{font-size:13.5px;color:#D9CDE3;transition:color .15s}
.footg li a:hover{color:var(--orange2)}
.giant{font:600 clamp(80px,19vw,340px)/1.2 "Fredoka",var(--sans);letter-spacing:-.03em;text-align:center;color:transparent;background:linear-gradient(180deg,rgba(240,232,245,.16) 20%,rgba(240,232,245,0) 88%);-webkit-background-clip:text;background-clip:text;user-select:none;margin-top:-.32em;margin-bottom:-.18em;white-space:nowrap}
.legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:18px 28px;border-top:1px solid var(--line);font-size:12.5px;color:var(--dim)}

/* ---------- reveal ---------- */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1280px){
  .links .hide-md{display:none}
  .links .sep{display:none}
  .tp{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pricing{grid-column:1/-1}
}
@media (max-width:1100px){
  .pt{grid-template-columns:1fr}
  .how{grid-template-columns:repeat(2,minmax(0,1fr))}
  .edit{grid-template-columns:minmax(0,1fr)}
  .reel{min-height:0;aspect-ratio:9/16}
  .vstrip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footg{grid-template-columns:repeat(3,1fr)}
  .footg .about{grid-column:1/-1}
}
@media (max-width:960px){
  .links{display:none}
  .nav-in{justify-content:space-between}
  .mlinks{display:flex!important}
  .voices{grid-template-columns:1fr}
  .tp{grid-template-columns:1fr 1fr}
  .wall{--cw:calc((100vw - 2 * var(--gut) - 3 * 8px) / 4);grid-template-columns:repeat(4,1fr)}
  .wt{grid-column:span var(--w);grid-row:span var(--h)}
  .wt.xs{display:none}
  .wlabel{grid-column:1/-1;grid-row:span 2}
  .wall{grid-auto-flow:dense}
}
.mlinks{display:none;gap:4px;overflow-x:auto;scrollbar-width:none;padding:0 var(--gut) 10px;margin-top:-4px}
.mlinks::-webkit-scrollbar{display:none}
.mlinks a{flex:none;height:30px;padding:0 12px;border-radius:8px;display:inline-flex;align-items:center;font:600 13px/1 var(--sans);color:var(--mut);background:rgba(240,232,245,.05);box-shadow:inset 0 0 0 1px var(--line)}
.mlinks a.on{color:#fff;background:var(--deep)}
@media (max-width:640px){
  :root{--gut:16px;--gap:10px}
  body{font-size:14px}
  .ann{font-size:12.5px;padding:7px 42px 7px 14px;justify-content:flex-start;text-align:left;gap:10px}
  .ann .ann-t svg{display:none}
  .nav-r .btn-g{display:none}
  .fcard{width:78vw;min-width:0}
  .fcard h3{font-size:19px}
  .fcard p{font-size:13px}
  .next{display:none}
  .fade-r{width:40px}
  .pt{margin-top:32px}
  .tools{grid-template-columns:1fr 1fr;grid-template-rows:none}
  .tool{min-height:132px;padding:14px}
  .tool h3{font-size:14.5px;flex-wrap:wrap;gap:5px}
  .tool p{font-size:12px}
  .tool .chip.kind-chip{display:none}
  .ticon{width:32px;height:32px}
  .promo{padding:20px;min-height:0;padding-top:120px}
  .sec{margin-top:44px}
  .sh{align-items:flex-start;flex-direction:row}
  .sh .arw,.count{display:none}
  .sh .sub{font-size:13px}
  .shelf{--rh:190px}
  .shelf.tallrow{--rh:330px}
  .cap{padding:9px}
  .cap .chips .chip:nth-child(n+2){display:none}
  .opus{padding:44px 18px 44px}
  .opus p{font-size:14.5px}
  .how{grid-template-columns:1fr}
  .step{min-height:0}
  .edit-r{grid-template-columns:1fr 1fr}
  .vstrip{grid-template-columns:1fr 1fr}
  .vfeat{flex-direction:column;align-items:flex-start;gap:8px;padding:12px}
  .vfeat b{font-size:13px}.vfeat span{font-size:12px}
  .trow{grid-template-columns:62px 1fr;gap:6px;font-size:10px}
  .reel .cap2{font-size:13px}
  .tp{grid-template-columns:1fr}
  .tcard{min-height:0}
  .pfacts b{font-size:19px}
  .footg{grid-template-columns:1fr 1fr;gap:26px}
  .final{min-height:300px}
  .split .cap{font-size:9px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
}

/* =================== v2: feature-led =================== */
/* feature tiles (replace model tiles) */
.tools.feat8{grid-template-columns:repeat(4,minmax(0,1fr))}
.pt.v2{grid-template-columns:minmax(0,1fr) minmax(0,2.25fr)}
.ft{position:relative;border-radius:var(--r);overflow:hidden;background:var(--card);min-height:168px;padding:14px;display:flex;flex-direction:column;justify-content:space-between;isolation:isolate;box-shadow:inset 0 0 0 1px var(--line);transition:transform .25s var(--ease),box-shadow .25s}
.ft .m{position:absolute;inset:0;z-index:-2}
.ft .m>img,.ft .m>video{transition:transform .8s var(--ease),opacity .5s;opacity:.72}
.ft.on-v .m>video{opacity:1}
.ft .m:not(.on)>video{opacity:0}
.ft::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,10,19,.15) 0%,rgba(14,10,19,.2) 35%,rgba(14,10,19,.92) 100%);transition:opacity .3s}
.ft:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--line3)}
.ft:hover .m>img,.ft:hover .m>video{transform:scale(1.05);opacity:1}
.ft .ticon{background:rgba(14,10,19,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ft h3{font:400 20px/1 var(--disp);text-transform:uppercase;letter-spacing:.01em;display:flex;align-items:center;gap:8px}
.ft p{margin-top:5px;color:#DCD0E6;font-size:12.5px;line-height:1.35}
.ft .go{position:absolute;right:14px;top:16px;color:#fff;opacity:0;transform:translateX(-4px);transition:.25s var(--ease)}
.ft:hover .go{opacity:1;transform:none}
.powered{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px;padding:12px 16px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line);font-size:12.5px;color:var(--dim)}
.powered b{font:700 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.powered span{color:#9C8FA8}
.powered i{font-style:normal;color:#4A3F55}

/* feature section head */
.fh{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}
.fh .kick{display:inline-flex;align-items:center;gap:8px;font:700 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--orange2);margin-bottom:10px}
.fh h2{font:400 clamp(40px,5vw,76px)/.9 var(--disp);text-transform:uppercase;letter-spacing:.005em}
.fh h2 em{font-style:normal;color:var(--orange2)}
.fh p{margin-top:12px;color:#CFC3DA;font-size:16px;line-height:1.5;max-width:620px}
.fh .btn{flex:none}
.stepl{display:flex;align-items:center;gap:8px;font:700 12px/1 var(--sans);color:var(--mut);margin-bottom:10px}
.stepl i{font:400 13px/1 var(--disp);font-style:normal;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:var(--deep);color:var(--orange2)}
.panel{border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--line);padding:16px}

/* clone a channel */
.clone{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--gap)}
.chan{padding:0;overflow:hidden}
.chan-ban{position:relative;height:96px;overflow:hidden}
.chan-ban .m{position:absolute;inset:0}
.chan-ban .m>img{filter:saturate(1.2) brightness(.8)}
.chan-ban::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(24,18,31,.9))}
.chan-hd{display:flex;align-items:center;gap:14px;padding:0 18px;margin-top:-26px;position:relative;z-index:2}
.chan-av{width:64px;height:64px;border-radius:50%;flex:none;overflow:hidden;box-shadow:0 0 0 3px var(--card)}
.chan-av .m{width:100%;height:100%}
.chan-hd b{display:block;font:800 18px/1.2 var(--sans);margin-top:22px}
.chan-hd span{font-size:12.5px;color:var(--mut)}
.chan-hd .btn{margin-left:auto;margin-top:22px;height:32px;padding:0 14px;font-size:12.5px;border-radius:999px}
.chan-tabs{display:flex;gap:18px;padding:14px 18px 0;border-bottom:1px solid var(--line);font:600 13px/1 var(--sans);color:var(--mut)}
.chan-tabs span{padding-bottom:11px}
.chan-tabs .on{color:var(--text);box-shadow:inset 0 -2px 0 var(--text)}
.chan-sort{display:flex;gap:6px;padding:12px 18px 0}
.chan-sort .chip{height:26px;padding:0 10px;border-radius:8px;font-size:12px}
.chan-sort .chip.on{background:var(--lav);color:#1B0E26}
.vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:12px 18px 18px}
.yv .th{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden}
.yv .th .m{position:absolute;inset:0}
.dur{position:absolute;right:6px;bottom:6px;z-index:2;font:700 11px/1 var(--sans);padding:3px 5px;border-radius:5px;background:rgba(0,0,0,.8);color:#fff;font-variant-numeric:tabular-nums}
.yv b{display:block;margin-top:8px;font:700 13px/1.3 var(--sans);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.yv span{font-size:11.5px;color:var(--mut)}
.ana{display:flex;flex-direction:column;gap:12px}
.bub{align-self:flex-end;max-width:92%;padding:10px 13px;border-radius:14px 14px 4px 14px;background:var(--deep);color:#F3EAFB;font-size:13.5px;line-height:1.45;box-shadow:inset 0 0 0 1px rgba(154,111,208,.35)}
.bub.a{align-self:flex-start;border-radius:14px 14px 14px 4px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line2);color:#E6DCEE}
.who{display:flex;align-items:center;gap:7px;font:700 11.5px/1 var(--sans);color:var(--mut)}
.who i{width:18px;height:18px;border-radius:6px;background:var(--orange);display:grid;place-items:center;color:#1A0B03}
.traits{display:grid;gap:7px}
.trait{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:10px;padding:9px 11px;border-radius:11px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line);opacity:.35;transform:translateY(4px);transition:opacity .5s,transform .5s var(--ease)}
.trait.ok{opacity:1;transform:none}
.trait .ti{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(255,107,44,.12);color:var(--orange2)}
.trait b{display:block;font-size:13px}
.trait span{font-size:12px;color:var(--mut)}
.trait em{font-style:normal;font:700 11px/1 var(--sans);color:#8FE3B0;white-space:nowrap}
.outs{margin-top:var(--gap);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gap)}
.outs-h{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px}
.outs .big{grid-column:span 3}
.outs .yv{grid-column:span 2}
.outs .yv .th{box-shadow:0 0 0 1.5px rgba(255,107,44,.55)}
.vclip{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--card)}
.vclip .m{position:absolute;inset:0}
.vclip .lbl2{position:absolute;left:12px;top:12px;z-index:2;display:flex;gap:6px}
.vclip .lbl2 .chip{background:rgba(14,10,19,.6);backdrop-filter:blur(8px)}
.vclip .ttl{position:absolute;left:14px;bottom:12px;right:70px;z-index:2;font:800 15px/1.25 var(--sans);text-shadow:0 1px 12px rgba(0,0,0,.8)}
.vclip::after{content:"";position:absolute;inset:50% 0 0;background:linear-gradient(transparent,rgba(10,7,14,.75));pointer-events:none}

/* sound toggle */
.snd{position:absolute;right:12px;bottom:12px;z-index:4;height:36px;padding:0 12px 0 10px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;background:rgba(14,10,19,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px var(--line3);font:700 12px/1 var(--sans);color:#fff;transition:background .2s,transform .2s var(--ease)}
.snd:hover{transform:scale(1.04)}
.snd .on-i,.snd[aria-pressed="true"] .off-i{display:none}
.snd[aria-pressed="true"] .on-i{display:block}
.snd[aria-pressed="true"]{background:var(--orange);color:#1A0B03;box-shadow:none}
.snd .lab-on,.snd[aria-pressed="true"] .lab-off{display:none}
.snd[aria-pressed="true"] .lab-on{display:inline}

/* ads -> meta */
.adsx{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--gap)}
.adstage{position:relative;border-radius:18px;overflow:hidden;min-height:620px;background:var(--card)}
.adstage>.m{position:absolute;inset:0}
.adstage::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,10,19,.82) 0%,rgba(14,10,19,.45) 45%,rgba(14,10,19,0) 70%);pointer-events:none}
.chatp{position:absolute;left:18px;top:18px;bottom:18px;z-index:2;width:min(470px,58%);display:flex;flex-direction:column;justify-content:flex-end;gap:10px}
.glass{background:rgba(18,12,24,.72);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:inset 0 0 0 1px var(--line2),0 20px 50px -20px rgba(0,0,0,.6);border-radius:16px}
.chatp .glass{padding:12px}
.adgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin-top:9px}
.adgrid .m{aspect-ratio:9/16;border-radius:6px}
.adgrid .m .n{position:absolute;left:3px;top:3px;z-index:2;font:800 8.5px/1 var(--sans);background:rgba(0,0,0,.55);color:#fff;border-radius:4px;padding:2px 3px}
.adgrid .m .n.u{background:var(--orange);color:#1A0B03}
.chatp .row2{display:flex;justify-content:space-between;align-items:center;margin-top:9px;font-size:12px;color:var(--mut)}
.metac{display:flex;flex-direction:column;gap:12px}
.mhead{display:flex;align-items:center;gap:10px}
.mhead .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#1C2B55;color:#9DB8FF;flex:none}
.mhead b{display:block;font-size:14.5px}
.mhead span{font-size:12px;color:var(--mut)}
.mhead .conn{margin-left:auto}
.confirm{border-radius:12px;background:var(--bg2);box-shadow:inset 0 0 0 1px rgba(255,107,44,.35);padding:12px;display:flex;flex-direction:column;gap:10px}
.confirm p{font-size:13px;line-height:1.45;color:#E6DCEE}
.confirm p b{color:#fff}
.confirm .btns{display:flex;gap:8px}
.confirm .btn{height:34px;font-size:12.5px;padding:0 12px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:12.5px;align-items:center}
.kv dt{color:var(--mut)}
.kv dd{margin:0;display:flex;gap:5px;flex-wrap:wrap;font-weight:600}
.camp{display:grid;gap:7px}
.crow{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;padding:8px 10px 8px 8px;border-radius:11px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line)}
.crow .thumbs{display:flex}
.crow .thumbs .m{width:40px;height:40px;border-radius:8px}
.crow b{display:block;font-size:13px}
.crow span{font-size:11.5px;color:var(--mut)}
.status{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;font:700 11px/1 var(--sans);background:rgba(255,196,80,.12);color:#FFD27A;box-shadow:inset 0 0 0 1px rgba(255,196,80,.3);white-space:nowrap;transition:background .4s,color .4s}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.status.live{background:rgba(78,212,138,.12);color:#8FE3B0;box-shadow:inset 0 0 0 1px rgba(78,212,138,.35)}
.founders{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;background:var(--card)}
.founders .m{position:absolute;inset:0}
.founders .glass{position:absolute;left:12px;bottom:12px;z-index:2;padding:9px 12px;display:flex;align-items:center;gap:10px;font-size:12.5px;border-radius:12px}
.founders .glass b{font-size:13px}

/* comparison slider */
.cmp{position:relative;overflow:hidden;border-radius:var(--r);background:var(--card);touch-action:pan-y;cursor:ew-resize;user-select:none;--x:50%}
.cmp .m{position:absolute;inset:0}
.cmp .before{clip-path:inset(0 calc(100% - var(--x)) 0 0);z-index:1}
.cmp .bar{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:#fff;z-index:3;box-shadow:0 0 12px rgba(0,0,0,.5)}
.cmp .knob{position:absolute;top:50%;left:var(--x);z-index:4;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:#fff;color:#1B0E26;display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.45)}
.cmp .tl,.cmp .tr{position:absolute;top:12px;z-index:3;font:700 11px/1 var(--sans);padding:5px 8px;border-radius:7px;letter-spacing:.02em;pointer-events:none}
.cmp .tl{left:12px;background:rgba(14,10,19,.7);color:#fff}
.cmp .tr{right:12px;background:var(--orange);color:#1A0B03}
.anim{display:flex;flex-direction:column;gap:var(--gap)}
.arow{display:flex;gap:var(--gap);height:clamp(300px,30vw,440px)}
.arow .cmp{flex:none;height:100%;width:auto;aspect-ratio:var(--ar)}
.acard{flex:1;min-width:0;border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--line);padding:20px;display:flex;flex-direction:column;justify-content:space-between;gap:14px;position:relative;overflow:hidden;isolation:isolate}
.acard::before{content:"";position:absolute;inset:auto -30% -40% auto;width:90%;aspect-ratio:1;border-radius:50%;z-index:-1;background:radial-gradient(circle,rgba(116,71,166,.4),transparent 65%)}
.acard h3{font:400 30px/.95 var(--disp);text-transform:uppercase}
.acard p{color:var(--mut);font-size:13.5px;line-height:1.5}
.styles{display:flex;flex-wrap:wrap;gap:6px}
.styles .chip{height:28px;padding:0 11px;border-radius:9px;font-size:12px}
.styles .chip.on{background:var(--orange);color:#1A0B03;box-shadow:none}

/* stunts full bleed */
.stunts{margin-top:64px}
.shero{position:relative;height:min(78vh,760px);min-height:460px;overflow:hidden;isolation:isolate}
.shero>.m{position:absolute;inset:0;z-index:-2}
.shero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,var(--bg) 0%,rgba(14,10,19,.55) 28%,rgba(14,10,19,0) 55%),linear-gradient(90deg,rgba(14,10,19,.7),rgba(14,10,19,0) 55%)}
.shero .wrap{height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:40px}
.shero .kick{font:700 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--orange2)}
.shero h2{margin-top:12px;font:400 clamp(56px,10vw,168px)/.84 var(--disp);text-transform:uppercase;letter-spacing:.005em;text-shadow:0 4px 40px rgba(0,0,0,.35)}
.shero h2 span{color:var(--orange2)}
.shero p{margin-top:14px;max-width:560px;font-size:17px;line-height:1.5;color:#EDE4F3}
.shero .prm{margin-top:18px;display:inline-flex;align-items:center;gap:10px;max-width:min(640px,100%);padding:10px 12px 10px 14px;font-size:13px;line-height:1.4;color:#EDE4F3}
.shero .prm svg{color:var(--orange2)}
.shero .tagr{position:absolute;right:var(--gut);bottom:44px;display:flex;gap:6px}
.smos{display:grid;grid-template-columns:.64fr 1fr 1fr 1fr;grid-template-rows:auto auto;gap:var(--gap);margin-top:var(--gap)}
.smos .sc{width:auto;height:auto;aspect-ratio:16/9}
.smos .sc.tall{grid-row:1/3;aspect-ratio:auto}
.flabel{position:absolute;left:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:8px;background:rgba(14,10,19,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font:700 12px/1 var(--sans);color:#fff;max-width:calc(100% - 24px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flabel em{font-style:normal;color:var(--orange2)}
.sc .cap .mdl{font-size:11px;color:var(--mut);margin-top:6px}

/* ugc */
.ugc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.uph{position:relative;aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:var(--card);box-shadow:inset 0 0 0 1px var(--line2);isolation:isolate}
.uph .m{position:absolute;inset:0;z-index:-1}
.uph::after{content:"";position:absolute;inset:55% 0 0;z-index:-1;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.uph .top{position:absolute;left:12px;right:12px;top:12px;display:flex;justify-content:space-between;align-items:center}
.uph .top .chip{background:rgba(14,10,19,.55);backdrop-filter:blur(8px)}
.uph .rec{font:700 10.5px/1 var(--sans);display:inline-flex;align-items:center;gap:5px;color:#fff;background:rgba(0,0,0,.4);padding:4px 7px;border-radius:6px}
.uph .rec::before{content:"";width:6px;height:6px;border-radius:50%;background:#FF4747}
.ucap{position:absolute;left:10%;right:10%;bottom:70px;text-align:center;font:800 17px/1.25 var(--sans);color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.9)}
.ucap w{opacity:.45;transition:opacity .15s,color .15s}
.ucap w.s{opacity:1}
.ucap w.c{color:#FFD04A;opacity:1}
.uph .snd{left:50%;right:auto;translate:-50% 0;bottom:16px}
.ugc-foot{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--gap)}
.ugc-foot .chip{height:30px;padding:0 12px;border-radius:9px;font-size:12.5px}
.ugc-foot .chip svg{width:14px;height:14px;color:var(--orange2)}

/* carousel card extras */
.cl{position:absolute;inset:0;background:radial-gradient(120% 90% at 80% 0%,#2E1640,#130D19 65%);padding:12px;display:grid;grid-template-columns:1fr 1.5fr;grid-template-rows:auto 1fr;gap:8px}
.cl .ask-bar{grid-column:1/-1}
.cl .src{display:grid;gap:5px;align-content:start}
.cl .src .m{aspect-ratio:16/9;border-radius:6px;opacity:.75}
.cl .dst{position:relative;border-radius:9px;overflow:hidden;box-shadow:0 0 0 2px var(--orange);align-self:center;aspect-ratio:16/9}
.cl .dst .m{position:absolute;inset:0}
.cl .dst .lbl{position:absolute;left:6px;top:6px;z-index:2;font:800 9.5px/1 var(--sans);padding:4px 6px;border-radius:5px;background:var(--orange);color:#1A0B03;letter-spacing:.03em}
.cl .src small{font:700 9.5px/1 var(--sans);color:var(--mut);letter-spacing:.06em;text-transform:uppercase}
.mini-meta{position:absolute;right:12px;bottom:12px;z-index:3;width:min(230px,62%);padding:10px;display:flex;flex-direction:column;gap:7px;border-radius:12px}
.mini-meta .r{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11.5px}
.mini-meta .r b{font-size:12px}
.mini-meta .status{height:20px;font-size:10px;padding:0 7px}
.fmedia .cmp{position:absolute;inset:0;border-radius:0}
.fmedia .cmp .knob{width:32px;height:32px;margin:-16px 0 0 -16px}
.ugc3{position:absolute;inset:0;background:linear-gradient(160deg,#FFF1E5,#F3E4F4);display:flex;align-items:center;justify-content:center;gap:3.5%;padding:5% 6%}
.ugc3 .phone .snd{height:26px;padding:0 8px;font-size:10px;right:auto;left:50%;translate:-50% 0;bottom:8px}
.ugc3 .phone .snd svg{width:12px;height:12px}

@media (max-width:1280px){
  .pt.v2{grid-template-columns:1fr}
  .adsx{grid-template-columns:1fr}
  .adstage{min-height:560px}
}
@media (max-width:1100px){
  .clone{grid-template-columns:1fr}
  .anim{flex-direction:row;flex-wrap:wrap}
  .arow{display:contents}
  .arow .cmp{height:auto}
  .arow .cmp.w{width:100%}
  .arow .cmp.t{width:calc(50% - var(--gap) / 2)}
  .arow .acard{flex:1 1 100%}
  .ugc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .smos{grid-template-columns:1fr 1fr}
  .smos .sc.tall{grid-row:span 2;aspect-ratio:auto}
}
@media (max-width:640px){
  .tools.feat8{grid-template-columns:1fr 1fr}
  .ft{min-height:150px;padding:12px}
  .ft h3{font-size:17px}
  .ft p{font-size:11.5px}
  .powered{font-size:11.5px;gap:8px 10px}
  .fh{flex-direction:column;align-items:flex-start}
  .fh p{font-size:14.5px}
  .vgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px 12px 14px}
  .yv b{font-size:11px}
  .yv span{display:none}
  .chan-hd .btn{display:none}
  .outs{grid-template-columns:1fr 1fr}
  .outs .big{grid-column:1/-1}
  .outs .yv{grid-column:span 1}
  .outs .yv:last-child{display:none}
  .adstage{min-height:0;display:flex;flex-direction:column}
  .adstage>.m{position:relative;aspect-ratio:16/10;inset:auto}
  .adstage::after{display:none}
  .chatp{position:relative;inset:auto;width:auto;padding:10px;background:var(--card)}
  .shero{height:78vh;min-height:520px}
  .shero p{font-size:15px}
  .shero .tagr{display:none}
  .shero .prm{font-size:12px}
  .smos{grid-template-columns:1fr 1fr}
  .ugc{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut)}
  .ugc::-webkit-scrollbar{display:none}
  .uph{flex:none;width:72vw;scroll-snap-align:center}
  .ucap{font-size:15px}
  .vclip .snd .lab-off,.vclip .snd .lab-on{display:none}
  .vclip .snd{width:36px;padding:0;justify-content:center}
  .vclip .ttl{font-size:13px;right:56px}
  .acard h3{font-size:24px}
  .acard{padding:14px}
  .acard p{font-size:12.5px}
}

.cap .flabel{position:static;align-self:flex-start;max-width:100%}
.cap .mdl{color:var(--orange2);font-weight:600;font-size:11.5px}
.ugc3 .phone .snd .lab-off,.ugc3 .phone .snd .lab-on{display:none}
.ugc3 .phone .snd{width:28px;height:28px;padding:0;justify-content:center}
.snd span{display:inline-flex}
.snd .on-i,.snd[aria-pressed="true"] .off-i,.snd .lab-on,.snd[aria-pressed="true"] .lab-off{display:none}
.snd[aria-pressed="true"] .on-i,.snd[aria-pressed="true"] .lab-on{display:inline-flex}
.cl .src .m{position:relative}
@media (max-width:640px){.flabel .pre{display:none}}
.cl{grid-template-columns:.5fr 1.6fr}
.cl .src{gap:5px}
.mini-meta{width:min(250px,66%)}
.mini-meta .r span{white-space:nowrap}
.flabel .pre{margin-right:5px}.flabel em{margin:0 3px}

/* v3: sketch -> thumbnail */
.sk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--gap)}
.sk .cmp{aspect-ratio:16/9;width:100%}
.sk .cmp .flabel{bottom:12px;left:12px;font-family:var(--disp);font-weight:400;font-size:14px;letter-spacing:.03em;height:28px}
.sk .skbig .flabel{font-size:17px;height:32px;padding:0 12px}
.sk .cmp .tl{background:#fff;color:#1B0E26}
.sk-row{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.sk-steps{display:flex;flex-direction:column;gap:14px;background:radial-gradient(120% 80% at 0% 0%,#2A1540,var(--card) 60%)}
.sk-steps h3{font:400 34px/.95 var(--disp);text-transform:uppercase}
.sk-steps h3 span{color:var(--orange2)}
.sk-list{list-style:none;display:grid;gap:12px;margin:0;padding:0}
.sk-list li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start}
.sk-list i{font:400 15px/1 var(--disp);font-style:normal;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--orange);color:#1A0B03}
.sk-list b{display:block;font-size:14px;line-height:1.3}
.sk-list span{font-size:13px;color:var(--mut);line-height:1.45}
.sk-parts{display:flex;flex-wrap:wrap;gap:6px}
.sk-parts .chip{height:26px;padding:0 9px;border-radius:8px;font-size:11.5px;background:rgba(255,255,255,.92);color:#1B0E26;box-shadow:none;font-weight:700}
.sk-steps .bub{font-size:13px;margin-top:auto}
.sk-steps .bub.a{margin-top:0}
.outs{grid-template-columns:minmax(0,1.5fr) minmax(0,1.5fr) minmax(0,1fr)}
.nlist{display:flex;flex-direction:column;gap:10px;padding:14px}
.nl-h{font:700 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.nrow{display:grid;grid-template-columns:44% 1fr;gap:10px;align-items:center}
.nrow .th{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;display:block}
.nrow .th .m{position:absolute;inset:0}
.nrow .dur{font-size:9.5px;right:4px;bottom:4px}
.nrow b{display:block;font-size:13px;line-height:1.3}
.nrow span{font-size:11.5px;color:var(--mut)}
.mini-meta{right:auto;left:12px}
.cl .dst .cmp{position:absolute;inset:0;border-radius:0}
.cl .dst .cmp .tl,.cl .dst .cmp .tr{top:6px;font-size:9.5px;padding:4px 6px}
.cl .dst .cmp .tl{left:6px;background:#fff;color:#1B0E26}
.cl .dst .cmp .tr{right:6px}
.cl .dst .cmp .knob{width:26px;height:26px;margin:-13px 0 0 -13px}
.cl .dst .cmp .knob svg{width:14px;height:14px}
@media (max-width:1100px){
  .sk{grid-template-columns:1fr}
  .outs{grid-template-columns:1fr 1fr}
  .outs .nlist{grid-column:1/-1}
}
@media (max-width:640px){
  .sk-row{grid-template-columns:1fr;}
  .sk-row .cmp:nth-child(3){display:none}
  .sk-steps h3{font-size:28px}
  .outs{grid-template-columns:1fr}
  .outs .nlist{grid-column:auto}
  .sk .cmp .flabel{font-size:12px;height:24px}
}
@media (max-width:640px){
  .founders{aspect-ratio:auto;display:flex;flex-direction:column}
  .founders .m{position:relative;inset:auto;aspect-ratio:16/9}
  .founders .glass{position:static;border-radius:0;background:var(--card);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;padding:12px 14px}
}

/* v4: what's new rail */
.nsh{margin-bottom:12px}
.nsh h2{display:flex;align-items:center;gap:12px;font-size:clamp(30px,3vw,42px)}
.nsh .nb2{font-size:10px;height:20px;padding:0 8px;letter-spacing:.06em}
.ncard{display:flex;flex-direction:column}
.ncard .fmedia{box-shadow:inset 0 0 0 1px var(--line)}
.nmeta{display:flex;align-items:center;gap:8px;margin-top:12px}
.nmeta .badge{height:18px;font-size:9.5px}
.ndate{font:600 11.5px/1 var(--sans);color:var(--dim);letter-spacing:.02em}
.ncard h3{margin-top:8px}
.ncard p{flex:1}
.try{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font:700 13px/1 var(--sans);color:var(--orange2);align-self:flex-start;padding:4px 0}
.try svg{transition:transform .2s var(--ease)}
.try:hover svg{transform:translateX(3px)}
@media (max-width:1380px){.links a[href="#ugc"]{display:none}}
@media (max-width:640px){
  .nsh .sh-r{display:none}
  .nsh h2{font-size:30px}
}
.split .cap{display:block;padding:0}
.fcard h3 .fb{margin-left:8px;vertical-align:3px;height:16px;font-size:9px;padding:0 5px}

/* ---------- mobile polish (touch targets, readable body text, safe areas) ---------- */
.wrap{padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
@media (max-width:960px){
  html{scroll-padding-top:120px}
  .mlinks{padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px));scroll-padding-inline:var(--gut)}
  .mlinks a{height:36px;padding:0 14px}
}
@media (pointer:coarse){
  .ann .btn{height:34px;padding:0 13px;font-size:13px}
  .ann-x{width:40px;height:40px;right:4px}
  .see{height:40px;padding:0 14px}
  .nav-r .btn{height:40px}
  .footg li{margin-bottom:0}
  .footg li a{display:inline-flex;align-items:center;min-height:40px}
  .brand{min-height:40px}
  .try{min-height:40px}
}
@media (max-width:640px){
  .fcard p,.sh .sub{font-size:14px}
  .tool p,.ft p,.acard p{font-size:13px}
  .footg li a{font-size:14px}
  .legal{font-size:13px}
}
/* landscape phones: the sticky header would eat a quarter of the screen */
@media (max-height:500px) and (orientation:landscape){
  .nav{position:relative}
  html{scroll-padding-top:12px}
}

/* ===================== WORKFLOWS preview v2 — plain ===================== */
.snd.ico{width:44px;height:44px;padding:0;justify-content:center;border-radius:50%}
.snd.ico span{display:none}
.snd.ico .off-i{display:inline-flex}
.snd.ico[aria-pressed="true"] .off-i{display:none}
.snd.ico[aria-pressed="true"] .on-i{display:inline-flex}
.links a{font-size:14.5px}

.hero{padding-top:44px;text-align:center}
.hh h1{font:400 clamp(48px,6.4vw,104px)/.9 var(--disp);text-transform:uppercase;letter-spacing:.005em}
.hh h1 em{font-style:normal;color:var(--orange2);display:block}
.hh p{margin:18px auto 0;max-width:620px;color:#DCD0E6;font-size:19px;line-height:1.5}
.hh .row{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:22px}
.free{font:600 14px/1 var(--sans);color:var(--mut)}
.hcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:36px;text-align:left}
.hc{display:flex;flex-direction:column;border-radius:18px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);padding:10px;transition:transform .3s var(--ease),box-shadow .3s}
.hc:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(255,107,44,.55)}
.hm{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#1a1322}
.hm>.m,.hm>.cmp{position:absolute;inset:0;border-radius:0}
.hm .ads{border-radius:0}
.hq{padding:14px 8px 4px}
.yl{display:inline-flex;align-items:center;gap:6px;font:700 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.yl svg{color:var(--orange2)}
.hq p{margin-top:8px;font:600 17px/1.4 var(--sans);color:#fff}
.hb{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding:12px 8px 6px}
.hb b{font:400 22px/1 var(--disp);text-transform:uppercase;letter-spacing:.01em}
.hb span{display:inline-flex;align-items:center;gap:6px;font:700 14px/1 var(--sans);color:var(--orange2)}

.flow{margin-top:72px;scroll-margin-top:80px}
.fl-h{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:22px}
.fl-h .kick{display:block;font:700 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--orange2);margin-bottom:12px}
.fl-h h2{font:400 clamp(40px,5vw,78px)/.9 var(--disp);text-transform:uppercase}
.fl-h h2 em{font-style:normal;color:var(--orange2)}
.fl-h p{margin-top:12px;color:#D4C8DE;font-size:17px;line-height:1.5;max-width:620px}
.fl-h .btn{flex:none}
.fl-b{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2fr);gap:28px;align-items:start;border-radius:22px;background:linear-gradient(180deg,#150E1C,#110C17);box-shadow:inset 0 0 0 1px var(--line);padding:26px}
.fl-l{display:flex;flex-direction:column;gap:22px;position:sticky;top:90px}
.bubble{margin-top:10px;padding:20px 22px;border-radius:22px 22px 22px 6px;background:var(--deep);box-shadow:inset 0 0 0 1px rgba(154,111,208,.45),0 20px 50px -24px rgba(116,71,166,.8);font:600 clamp(20px,1.8vw,26px)/1.35 var(--sans);color:#fff}
.does{display:flex;flex-direction:column;gap:14px}
.does .arrow{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--orange);color:#1A0B03;transform:rotate(0deg);box-shadow:0 10px 30px -10px rgba(255,107,44,.8)}
.does ul{display:grid;gap:10px}
.does li{display:flex;align-items:center;gap:12px;font:600 16px/1.3 var(--sans);color:#E8DEF0}
.does li span{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(240,232,245,.06);box-shadow:inset 0 0 0 1px var(--line2);color:var(--orange2);flex:none}
.fl-r{display:flex;flex-direction:column;gap:12px;min-width:0}
.yl.got svg{color:#4ED48A}
.hint{display:flex;align-items:center;gap:8px;font:600 15px/1.3 var(--sans);color:var(--mut)}
.hint svg{color:var(--orange2)}
.phones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.phones .uph{border-radius:20px}
.phones .ucap{font-size:clamp(13px,1.1vw,16px);bottom:74px}
.phones .snd{left:50%;right:auto;translate:-50% 0;bottom:16px}
.cmp.big{aspect-ratio:16/9;width:100%}
.cmp .tl,.cmp .tr{font-size:13px;padding:6px 10px}
.cmp .knob{width:48px;height:48px;margin:-24px 0 0 -24px}
.moreex{margin-top:18px}
.mx{display:flex;gap:var(--gap);height:340px;margin-top:10px}
.mx figure{margin:0;display:flex;flex-direction:column;gap:8px;height:100%;min-width:0}
.mx figure:nth-child(2){flex:1}
.mx .cmp{flex:1;min-height:0;aspect-ratio:var(--ar);height:auto;width:auto}
.mx figure:nth-child(2) .cmp{aspect-ratio:auto;width:100%}
.mx .cmp .tl,.mx .cmp .tr{font-size:11px;padding:4px 7px}
.mx .cmp .knob{width:40px;height:40px;margin:-20px 0 0 -20px}
.mx figcaption{font:600 15px/1.3 var(--sans);color:#E8DEF0}
.thg{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:12px}
.thg .th{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:16/9}
.thg .th.big{grid-row:1/3;aspect-ratio:auto}
.thg .th .m{position:absolute;inset:0}
.howsk{display:grid;grid-template-columns:1fr 1.2fr;gap:16px;align-items:center;margin-top:6px;padding:14px;border-radius:16px;background:rgba(240,232,245,.03);box-shadow:inset 0 0 0 1px var(--line)}
.hs-t b{font:400 22px/1 var(--disp);text-transform:uppercase}
.hs-t p{margin-top:8px;color:var(--mut);font-size:15px;line-height:1.5}
.cmp.sm{aspect-ratio:16/9;width:100%}
.cmp.sm .tl{background:#fff;color:#1B0E26}

.ocs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.oc{border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;transition:transform .3s var(--ease)}
.oc:hover{transform:translateY(-3px)}
.om{position:relative;aspect-ratio:16/10}
.om>.m{position:absolute;inset:0}
.ot{padding:16px}
.ot h3{font:400 24px/1 var(--disp);text-transform:uppercase}
.ot .oq{margin-top:10px;font:600 15px/1.4 var(--sans);color:#fff;padding:10px 12px;border-radius:14px 14px 14px 4px;background:var(--deep)}
.ot p:not(.oq){margin-top:10px;color:var(--mut);font-size:14px}
.oplay{position:absolute;left:10px;right:10px;bottom:10px;z-index:3;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:rgba(14,10,19,.7);backdrop-filter:blur(10px)}
.oplay .wave{flex:1;height:26px;margin:0}
.oplay .pbtn{width:40px;height:40px}
.pband{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:var(--gap)}
.pband .final{margin-top:0;min-height:0}
.pband .final h2{font-size:clamp(40px,4.6vw,72px)}

@media (max-width:1100px){
  .fl-b{grid-template-columns:1fr;padding:20px}
  .fl-l{position:static;display:grid;grid-template-columns:1.2fr 1fr;align-items:center}
  .hcs{grid-template-columns:1fr 1fr}
  .ocs{grid-template-columns:1fr 1fr}
  .pband{grid-template-columns:1fr}
}
@media (max-width:640px){
  .hero{padding-top:26px}
  .hh h1{font-size:46px}
  .hh p{font-size:16px}
  .hcs{grid-template-columns:1fr;gap:12px}
  .hq p{font-size:16px}
  .flow{margin-top:52px}
  .fl-h{flex-direction:column;align-items:flex-start;gap:14px}
  .fl-h h2{font-size:42px}
  .fl-h p{font-size:15.5px}
  .fl-b{padding:14px;gap:18px;margin-inline:calc(-1 * var(--gut) + 6px);border-radius:18px}
  .fl-l{display:flex;gap:14px}
  .bubble{font-size:19px;padding:16px 18px}
  .does{flex-direction:row;align-items:center;gap:12px}
  .does .arrow{width:44px;height:44px;transform:rotate(90deg);flex:none}
  .does ul{gap:6px}
  .does li{font-size:15px}
  .does li span{width:30px;height:30px}
  .phones{grid-template-columns:1fr 1fr;gap:10px}
  .phones .ucap{font-size:14px;bottom:70px}
  .mx{flex-wrap:wrap;height:auto}
  .mx figure{width:calc(50% - var(--gap) / 2);height:auto}
  .mx figure:nth-child(2){order:-1;width:100%;flex:none}
  .mx .cmp{width:100%;flex:none}
  .mx figure:nth-child(2) .cmp{aspect-ratio:16/9}
  .thg{grid-template-columns:1fr;grid-template-rows:none}
  .thg .th.big{grid-row:auto;aspect-ratio:16/9}
  .howsk{grid-template-columns:1fr}
  .ocs{grid-template-columns:1fr}
  .om{aspect-ratio:16/9}
  .ann .btn{height:36px}
  .ann-x{width:40px;height:40px;right:4px}
  .nav-r .btn{height:40px}
  .mlinks a{height:40px}
}
.hero{padding-top:30px}
.hh h1{font-size:clamp(46px,5.4vw,88px)}
.hh p{margin-top:14px;font-size:18px}
.hh .row{margin-top:18px}
.hcs{margin-top:28px}
.hm{aspect-ratio:16/9}
.hq{padding:12px 8px 2px}
.hq p{font-size:16px;margin-top:6px}
.hb{padding:10px 8px 4px}
@media (max-width:640px){.phones .uph{width:auto;flex:initial;border-radius:16px}.phones .ucap{font-size:12.5px;bottom:62px;left:6%;right:6%}.phones .snd{bottom:12px}}
/* v3: equal example cards */
.mx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));height:auto}
.mx figure,.mx figure:nth-child(2){flex:none;width:auto;height:auto;order:0}
.mx .cmp,.mx .cmp.eq,.mx figure:nth-child(2) .cmp{aspect-ratio:3/4;width:100%;height:auto;flex:none}
@media (max-width:640px){
  .mx{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .mx figure,.mx figure:nth-child(2){width:auto}
  .mx figure:nth-child(2) .cmp{aspect-ratio:3/4}
  .mx figcaption{font-size:13px}
  .mx .cmp .tl,.mx .cmp .tr{font-size:9.5px;padding:3px 5px;top:6px}
  .mx .cmp .tl{left:6px}.mx .cmp .tr{right:6px}
  .mx .cmp .knob{width:34px;height:34px;margin:-17px 0 0 -17px}
}
.mx .cmp,.mx .cmp.eq,.mx figure:nth-child(2) .cmp{aspect-ratio:1/1}
@media (max-width:640px){.mx figure:nth-child(2) .cmp{aspect-ratio:1/1}.mx{grid-template-columns:1fr}.mx .cmp,.mx .cmp.eq{aspect-ratio:4/3}.mx figure:nth-child(2) .cmp{aspect-ratio:4/3}.mx .cmp .tl,.mx .cmp .tr{font-size:11px;padding:4px 7px;top:8px}.mx .cmp .knob{width:40px;height:40px;margin:-20px 0 0 -20px}}
.mx{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}@media (max-width:640px){.mx{grid-template-columns:1fr}}
/* v4: episodes + 4 hero cards */
.hcs{grid-template-columns:repeat(4,minmax(0,1fr))}
.hq p{font-size:15.5px}
.hb b{font-size:20px}
.ocs{grid-template-columns:repeat(3,minmax(0,1fr))}
.theirs{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tvs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;flex:1;min-width:0}
.tv{display:grid;grid-template-columns:44% 1fr;gap:8px;align-items:center;opacity:.8}
.tv .m{aspect-ratio:16/9;border-radius:7px}
.tv b{font-size:13px;line-height:1.3;color:var(--mut);font-weight:600}
.eps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ep{cursor:pointer;outline:none}
.ev{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#221930;box-shadow:inset 0 0 0 1px var(--line)}
.ev>.m{position:absolute;inset:0}
.ev .ucap{bottom:22px;left:5%;right:5%;font-size:clamp(12px,1vw,15px);z-index:2}
.thumb{position:absolute;inset:0;z-index:3;transition:opacity .45s var(--ease)}
.thumb .m{position:absolute;inset:0}
.thumb .pl{position:absolute;left:50%;top:50%;translate:-50% -50%;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:rgba(14,10,19,.72);color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.7);transition:transform .25s var(--ease)}
.ep:hover .thumb .pl{transform:scale(1.08)}
.ep.show .thumb{opacity:0;pointer-events:none}
.ev .snd{z-index:4;right:10px;bottom:10px;left:auto;translate:none;opacity:0;transition:opacity .3s}
.ep.show .ev .snd,.ev .snd[aria-pressed="true"]{opacity:1}
.ev .dur{position:absolute;right:8px;bottom:8px;z-index:4;font:700 11px/1 var(--sans);padding:3px 5px;border-radius:5px;background:rgba(0,0,0,.8);color:#fff;transition:opacity .3s}
.ep.show .dur{opacity:0}
.ep>b{display:block;margin-top:10px;font-size:16px}
.ep>span{font-size:13.5px;color:var(--mut)}
@media (max-width:1280px){.hcs{grid-template-columns:1fr 1fr}}
@media (max-width:1100px){.eps{grid-template-columns:1fr 1fr 1fr}.tvs{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:640px){
  .hcs{grid-template-columns:1fr}
  .eps{grid-template-columns:1fr}
  .tvs{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .tv{grid-template-columns:1fr}
  .tv b{font-size:11.5px}
  .ev .ucap{font-size:14px}
  .ev .snd{opacity:1}
  .ocs{grid-template-columns:1fr}
}
.ev .ucap{bottom:54px;left:6%;right:6%}
.ev .ucap{pointer-events:none;z-index:2;opacity:0;transition:opacity .3s}.ep.show .ev .ucap{opacity:1}.ev .thumb{z-index:3}

/* pricing: what each plan buys */
.pplans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0 16px}
.pplans .pp{display:flex;flex-direction:column;gap:3px;padding:14px;border-radius:14px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.pplans .pp b{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:20px;letter-spacing:.02em;text-transform:uppercase}
.pplans .pp em{font-style:normal;font-weight:800;font-size:22px;color:#FF7A3D}
.pplans .pp em small{font-size:12px;font-weight:600;color:#B6A8C3;margin-left:2px}
.pplans .pp span{font-size:14px;color:#F4EEF8;font-weight:600}
.pplans .pp i{font-style:normal;font-size:13.5px;line-height:1.4;color:#C9BDD6}
.pnote{margin-top:10px}

@media (max-width:420px){.pplans{grid-template-columns:1fr}}