/* UAGenius website styles (moved out of index.html) */
:root{
  --blue:#CAF41C;--blue-h:#A9D11F;--blue-t:#D9FF6B;--blue-soft:rgba(202,244,28,.14);--blue-line:rgba(202,244,28,.45);
  --glow:none;--glow-lg:0 0 0 1px rgba(202,244,28,.6),0 20px 60px rgba(202,244,28,.28);
  --bg:#0A0A0A;--navy:#0B0D07;--s1:#121214;--s2:#1A1A1E;--s3:#2A2A31;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.14);
  --text:#FFFFFF;--muted:#A3A3AE;--subtle:#7C7C88;
  /* legacy aliases so ported blocks inherit the new accent */
  --lime:var(--blue);--lime-h:var(--blue-h);--on-lime:#FFFFFF;--lime-deep:var(--blue-soft);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--blue-t);text-decoration:none}a:hover{color:#7FB2FF}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px;position:relative}
.sec{position:relative;padding:120px 0;border-top:1px solid var(--line);overflow:clip}
.hero{position:relative;padding:104px 0 120px;overflow:clip}
.label{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-t);margin:0 0 20px}
.label::before{content:"";width:20px;height:2px;background:var(--blue);display:block}
.h1{margin:0;font-size:64px;font-weight:800;letter-spacing:-.035em;line-height:1.05}
.h2{margin:0;font-size:52px;font-weight:800;letter-spacing:-.03em;line-height:1.08;max-width:880px}
.h3{margin:0;font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.25}
.sub{margin:20px 0 0;font-size:18px;line-height:1.65;color:var(--muted);max-width:660px}
.acc,.lime{color:var(--blue)}
.muted{color:var(--muted)}.subtle{color:var(--subtle)}
.mono{font-family:Inter,sans-serif}
.num{font-family:Inter,sans-serif;font-size:13px;color:var(--blue-t)}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--subtle)}
.eyebrow.lime,.eyebrow.acc{color:var(--blue-t)}
.card{background:var(--s1);border:1px solid var(--line);border-radius:20px}
.panel{background:var(--s2);border:1px solid var(--line);border-radius:14px}
.pad{padding:32px}
.glow{display:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:14px 28px;border-radius:100px;font-size:15px;font-weight:600;letter-spacing:-.01em;font-family:inherit;cursor:pointer;border:none;transition:background .2s,transform .2s,box-shadow .2s}
.btn-p{background:var(--blue);color:#fff;box-shadow:var(--glow)}.btn-p:hover{background:var(--blue-h);color:#fff;transform:translateY(-2px);box-shadow:none}
.btn-s{background:transparent;color:var(--text);border:1.5px solid var(--line2)}.btn-s:hover{border-color:var(--subtle);color:var(--text);transform:translateY(-1px);background:rgba(255,255,255,.03)}
.btns{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:100px;background:var(--s2);border:1px solid var(--line2);font-size:12px;font-weight:600;color:var(--text);white-space:nowrap}
.chip-on{background:var(--blue-soft);border-color:var(--blue-line);color:#EFFFC4}
.g2,.g3,.g4,.g5{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:80px;align-items:center}
.mt56{margin-top:56px}.mt40{margin-top:40px}.mt20{margin-top:20px}
.pills{display:flex;gap:6px;padding:6px;background:var(--s1);border:1px solid var(--line);border-radius:100px;flex-wrap:wrap}
.pill{min-height:44px;padding:10px 20px;border-radius:100px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;background:transparent;color:var(--muted);border:none}
.pill.on{background:var(--blue);color:#fff}
.row-between{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.link-card{display:flex;flex-direction:column;gap:14px;padding:32px;background:var(--s1);border:1px solid var(--line);border-radius:20px;color:var(--text);transition:border-color .25s,transform .25s,box-shadow .25s}
.link-card:hover{border-color:var(--blue-line);color:var(--text);transform:translateY(-4px);box-shadow:none}
a.go{color:var(--blue-t);font-weight:600;font-size:15px}
.cta{position:relative;overflow:hidden;border-radius:32px;border:2px solid var(--blue);background:var(--s1);padding:96px 48px;text-align:center;box-shadow:none}
.cta .h2{margin:0 auto;position:relative}.cta .sub{margin:20px auto 0;position:relative}.cta .btns{justify-content:center;position:relative}
ul.clean{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.qa{width:100%;background:transparent;border:none;color:var(--text);font-family:inherit;text-align:left;cursor:pointer;padding:24px 0;display:flex;justify-content:space-between;align-items:center;gap:24px;font-size:20px;font-weight:700}
.qa span{color:var(--blue-t);font-size:26px;font-weight:400}
.step-btn{width:44px;height:44px;border-radius:100px;background:var(--s2);border:1px solid var(--line2);color:var(--text);font-size:20px;font-weight:600;cursor:pointer;font-family:inherit}
.step-btn:hover{border-color:var(--blue)}
.toggle{position:relative;width:52px;height:30px;border-radius:100px;cursor:pointer;flex-shrink:0;padding:0;border:1px solid var(--blue);background:var(--blue)}
.toggle i{position:absolute;top:3px;left:26px;width:22px;height:22px;border-radius:50%;background:#fff;transition:left .2s}
.toggle.off{background:var(--s1);border-color:var(--s3)}.toggle.off i{left:3px;background:var(--subtle)}
.input{min-height:48px;padding:12px 16px;border-radius:14px;background:var(--s2);border:1px solid var(--line2);color:var(--text);font-family:inherit;font-size:15px;width:100%}
.input:focus{outline:2px solid var(--blue);outline-offset:1px}
.field{display:flex;flex-direction:column;gap:8px}.field label{font-size:14px;font-weight:600}
.mrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;background:var(--s2);border:1px solid var(--line);border-radius:12px;font-size:14px;font-weight:600}
.mbar{height:6px;border-radius:6px;background:var(--s3);overflow:hidden;flex:1}.mbar i{display:block;height:100%;background:var(--blue);box-shadow:none}
.mini-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px}
.mini-grid span{aspect-ratio:9/16;border-radius:4px;background:var(--blue-soft);border:1px solid var(--blue-line)}

/* frames + faux ad art */
.frame{position:relative;border-radius:18px;border:1px solid var(--line2);background:var(--s2);overflow:hidden;display:flex;align-items:flex-end}
.frame.made{border:2px solid var(--blue);box-shadow:none}
.tag{position:absolute;top:12px;left:12px;z-index:2;padding:4px 10px;border-radius:100px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:rgba(10,10,10,.75);color:var(--muted);border:1px solid var(--line2)}
.made .tag{background:var(--blue);color:#fff;border-color:var(--blue)}
.ph{position:relative;z-index:2;padding:14px;font-size:12px;line-height:1.5;color:var(--subtle)}
.made .ph{color:#EEF6D2}
.art{position:absolute;inset:0;background:
  radial-gradient(circle at 50% 36%,rgba(255,255,255,.16) 0 13%,transparent 13.5%),
  radial-gradient(ellipse at 50% 58%,rgba(255,255,255,.07) 0 22%,transparent 23%),
  repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 26px),
  repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 26px),
  linear-gradient(180deg,#26262d,#121214)}
.art::after{content:"";position:absolute;left:14%;right:14%;bottom:14%;height:9%;border-radius:8px;background:rgba(255,255,255,.12)}
.art.yours{background:
  radial-gradient(circle at 50% 36%,#D9FF6B 0 13%,transparent 13.5%),
  radial-gradient(ellipse at 50% 58%,rgba(202,244,28,.25) 0 22%,transparent 23%),
  repeating-linear-gradient(0deg,rgba(202,244,28,.16) 0 1px,transparent 1px 26px),
  repeating-linear-gradient(90deg,rgba(202,244,28,.16) 0 1px,transparent 1px 26px),
  linear-gradient(180deg,#1E2A0A,#0B0F05)}
.art.yours::after{background:#CAF41C;box-shadow:none}

/* navy depth circles (Dark UAG) */
.orbbg{position:absolute;border-radius:50%;background:var(--navy);pointer-events:none;z-index:0}
.orbbg.ring{background:transparent;border:1px solid rgba(202,244,28,.08)}
.sec>.wrap,.hero>.wrap{z-index:1}

/* reveal */
.rv{opacity:0;transform:translate3d(0,28px,0);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}
[data-depth]{will-change:transform}

/* 3D hero stack */
.stack3d{position:relative;height:520px;perspective:1400px}
.stack3d .tilt{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .25s ease-out}
.stack3d .c{position:absolute;top:50%;left:50%;width:236px;height:420px;margin:-210px 0 0 -118px;border-radius:22px;overflow:hidden;transform-style:preserve-3d}
.stack3d .c.back{transform:translate3d(-150px,-24px,-140px) rotateY(24deg);border:1px solid var(--line2);filter:saturate(.6) brightness(.8)}
.stack3d .c.front{transform:translate3d(70px,10px,40px) rotateY(-14deg);border:2px solid var(--blue);box-shadow:none}
.floaty{animation:floaty 7s ease-in-out infinite}
.floaty.f2{animation-duration:9s;animation-delay:-2s}.floaty.f3{animation-duration:8s;animation-delay:-4s}
@keyframes floaty{50%{transform:translate3d(0,-14px,0)}}
.beam{position:absolute;top:50%;left:50%;width:180px;height:2px;margin:-1px 0 0 -110px;background:linear-gradient(90deg,transparent,var(--blue),transparent);transform:translateZ(-40px) rotateY(-8deg);box-shadow:none}
.beam::after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:none;animation:beamrun 2.2s linear infinite}
@keyframes beamrun{to{left:100%}}
.fchip{position:absolute;z-index:5;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;background:rgba(18,18,20,.85);border:1px solid var(--line2);backdrop-filter:blur(10px);font-size:13px;font-weight:700;white-space:nowrap;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.fchip i{width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:none}

/* PRODUCT MEGA MENU / NAV */
.nav{position:sticky;top:0;z-index:50;background:rgba(10,10,10,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{height:72px;display:flex;align-items:center;justify-content:space-between;gap:32px}
.logo{font-size:22px;font-weight:800;letter-spacing:-.04em;color:var(--text);display:flex;align-items:center;gap:10px}
.logo:hover{color:var(--text)}
.logo i{width:30px;height:30px;border-radius:9px;background:var(--blue);display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:17px;font-weight:800;color:#fff;letter-spacing:0;box-shadow:none}
.menu{display:flex;gap:4px;align-items:center}
.mi{position:relative}
.mi>button,.mi>a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:10px 14px;border-radius:100px;border:none;background:transparent;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;color:var(--muted)}
.mi>button:hover,.mi>a:hover,.mi.active>button,.mi.active>a{color:var(--text)}
.mi.open>button{background:var(--s1);color:var(--text)}
.dd{display:none;position:absolute;top:56px;left:-8px;width:440px;padding:10px;background:var(--s1);border:1px solid var(--line2);border-radius:20px;flex-direction:column;gap:2px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.dd::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.mi.open .dd{display:flex}
.mi.open .dd.dd2{display:grid}
.dd.dd2{width:800px;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:0;padding:0;overflow:hidden}
.dd2 .col{padding:12px 10px;display:flex;flex-direction:column;gap:2px}
.dd2 .col+.col{border-left:1px solid var(--line)}
.dd-h{padding:10px 14px 6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--subtle)}
.dd a{display:flex;gap:14px;align-items:flex-start;padding:12px 14px;border-radius:14px;color:var(--text)}
.dd a:hover{background:var(--s2);color:var(--text)}
.dd b{width:38px;height:38px;border-radius:10px;background:var(--s2);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--blue-t);font-family:Inter,sans-serif;font-size:12px;font-weight:500}
.dd strong{display:block;font-size:15px}.dd small{display:block;font-size:13px;line-height:1.5;color:var(--muted);margin-top:3px}
.dd .verb{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:100px;background:var(--blue-soft);color:#EFFFC4;font-size:11px;font-weight:700;letter-spacing:.04em;vertical-align:2px}
.dd2 .feat b{width:58px;height:58px;border-radius:16px;background:var(--blue);border-color:var(--blue);box-shadow:var(--glow)}
.dd2 .feat strong{font-size:17px}
.dd .dd-cta{margin:auto 4px 4px;padding:16px 18px;border-radius:14px;background:var(--blue);color:#fff;font-weight:700;justify-content:space-between;align-items:center;box-shadow:var(--glow)}
.dd .dd-cta:hover{background:var(--blue-h);color:#fff}
.burger{display:none;width:44px;height:44px;border-radius:100px;background:var(--s1);border:1px solid var(--line);color:var(--text);cursor:pointer}
.page{display:none}.page.show{display:block}
footer{border-top:1px solid var(--line);padding:56px 0 40px;font-size:14px;position:relative;overflow:hidden}
footer .cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;position:relative}
footer .col{display:flex;flex-direction:column;gap:10px}
footer .col a{color:var(--muted)}footer .col a:hover{color:var(--text)}

/* comparison table */
.mx{overflow:hidden}
.mx-row{display:grid;grid-template-columns:1.4fr repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line)}
.mx-row>div{padding:18px 20px;text-align:center;font-size:15px;color:var(--subtle)}
.mx-row>div:first-child{text-align:left;color:var(--text);font-weight:600}
.mx-row>div:nth-child(2){color:var(--blue-t);font-weight:800;background:rgba(202,244,28,.07)}
.mx-head>div{font-size:14px;font-weight:700;color:var(--muted)}
.mx-head>div:nth-child(2){background:var(--blue);color:#fff}

/* scroll flows */
.flow-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:80px;margin-top:40px;align-items:start}
.fstep{min-height:62vh;display:flex;flex-direction:column;justify-content:center;padding-left:28px;border-left:2px solid var(--s3);opacity:.3;transition:opacity .35s,border-color .35s;cursor:pointer}
.fstep.on{opacity:1;border-color:var(--blue)}
.fstep .k{font-family:Inter,sans-serif;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-t)}
.fstep h3{margin:14px 0 0;font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1.12}
.fstep p{margin:14px 0 0;font-size:17px;line-height:1.65;color:var(--muted);max-width:460px}
.flow-stage{position:sticky;top:110px;height:min(580px,calc(100vh - 150px))}
.stage-card{position:relative;height:100%;background:var(--s1);border:2px solid var(--blue);border-radius:24px;overflow:hidden;box-shadow:none}
.segs{position:absolute;top:22px;left:28px;right:28px;display:flex;gap:6px;z-index:2}
.segs i{flex:1;height:3px;border-radius:3px;background:var(--s3);transition:background .35s}
.segs i.on{background:var(--blue)}
.fvis{position:absolute;inset:0;padding:60px 32px 32px;display:flex;flex-direction:column;justify-content:center;gap:12px;opacity:0;transform:translateY(18px) scale(.98);transition:opacity .45s,transform .45s;pointer-events:none}
.fvis.on{opacity:1;transform:none}
.vis-title{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--subtle)}

/* HOW IT WORKS — 3D LOOP */
.loop-wrap{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:40px;align-items:center;margin-top:56px}
.stage3d{position:relative;height:500px;border-radius:28px;background:var(--s1);border:2px solid var(--blue);overflow:hidden;box-shadow:none}
.floor{position:absolute;left:-50%;right:-50%;bottom:-30%;height:110%;background-image:linear-gradient(rgba(202,244,28,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(202,244,28,.09) 1px,transparent 1px);background-size:56px 56px;transform:perspective(560px) rotateX(72deg);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(to top,#000 15%,transparent 80%);mask-image:linear-gradient(to top,#000 15%,transparent 80%);animation:floorMove 5s linear infinite}
@keyframes floorMove{to{background-position:0 56px}}
.orbit-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.core{position:absolute;left:0;top:0;width:150px;height:150px;transform-style:preserve-3d;perspective:600px;z-index:60}
.core > i{position:absolute;inset:0;border-radius:50%;border:1.5px dashed rgba(202,244,28,.6);animation:spinA 9s linear infinite}
.core > i:nth-child(2){inset:16px;border-style:solid;border-color:rgba(202,244,28,.35);animation:spinB 7s linear infinite}
.core > i:nth-child(3){inset:32px;border-color:rgba(255,255,255,.25);animation:spinC 12s linear infinite}
@keyframes spinA{from{transform:rotateX(68deg) rotateZ(0)}to{transform:rotateX(68deg) rotateZ(360deg)}}
@keyframes spinB{from{transform:rotateY(62deg) rotateZ(0)}to{transform:rotateY(62deg) rotateZ(-360deg)}}
@keyframes spinC{from{transform:rotateX(-48deg) rotateY(28deg) rotateZ(0)}to{transform:rotateX(-48deg) rotateY(28deg) rotateZ(360deg)}}
.core > b{position:absolute;inset:52px;border-radius:50%;background:radial-gradient(circle,#D9FF6B 0%,rgba(202,244,28,.45) 45%,transparent 70%);animation:breathe 2.6s ease-in-out infinite}
.core.pulse > b{animation:breathe 2.6s ease-in-out infinite,flash .9s ease-out}
@keyframes breathe{50%{transform:scale(1.2);opacity:.85}}
@keyframes flash{0%{box-shadow:0 0 0 0 rgba(202,244,28,.8)}100%{box-shadow:none}}
.core span{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:6px;text-align:center;white-space:nowrap}
.core span strong{display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-t)}
.core span em{display:block;font-style:normal;font-family:Inter,sans-serif;font-size:11px;color:var(--subtle);margin-top:2px}
.node{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:10px;will-change:transform,opacity;cursor:pointer;background:none;border:none;color:var(--text);font-family:inherit;padding:0}
.node .orb{width:78px;height:78px;border-radius:24px;background:var(--s2);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;color:var(--muted);transition:background .4s,border-color .4s,color .4s,box-shadow .4s}
.node.on .orb{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:none}
.node .nl{font-size:13px;font-weight:700;white-space:nowrap;padding:6px 12px;border-radius:100px;background:rgba(10,10,10,.8);border:1px solid var(--line2);transition:color .4s,border-color .4s}
.node.on .nl{border-color:var(--blue);color:#EFFFC4}
.loop-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.loop-steps button{position:relative;overflow:hidden;min-height:48px;padding:12px 14px;border-radius:100px;background:var(--s1);border:1px solid var(--line);color:var(--muted);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer}
.loop-steps button span{position:relative;z-index:1}
.loop-steps button i{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(202,244,28,.22)}
.loop-steps button.on{color:var(--text);border-color:var(--blue)}
.loop-steps button.on i{animation:fillbar var(--hold,3800ms) linear forwards}
@keyframes fillbar{to{width:100%}}
.loop-cap{min-height:460px;display:flex;flex-direction:column;justify-content:center}
.cap-in{animation:capIn .5s ease both}
@keyframes capIn{from{opacity:0;transform:translateY(14px)}}
.cap-in h3{margin:14px 0 0;font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.cap-in p{margin:12px 0 0;font-size:16px;line-height:1.6;color:var(--muted)}
.ya-list{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.ya{display:grid;grid-template-columns:86px 1fr;gap:12px;align-items:center;padding:12px 16px;background:var(--s1);border:1px solid var(--line);border-radius:14px;font-size:14px;line-height:1.5}
.ya b{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle)}
.ya.on{border-color:var(--blue-line);background:var(--blue-soft)}
.ya.on b{color:var(--blue-t)}
.mv{margin-top:18px;height:150px;border-radius:16px;background:var(--bg);border:1px solid var(--line);position:relative;overflow:hidden;padding:16px}
.typed{display:inline-block;font-family:Inter,sans-serif;font-size:12px;white-space:nowrap;overflow:hidden;border-right:2px solid var(--blue);width:0;animation:typeIn 1.4s steps(36) .2s forwards,caret .7s step-end infinite;vertical-align:bottom}
@keyframes typeIn{to{width:36ch}}
@keyframes caret{50%{border-color:transparent}}
.mv-cards{display:flex;gap:8px;margin-top:14px}
.mv-cards span{flex:1;height:72px;border-radius:8px;background:var(--s2);border:1px solid var(--line2);opacity:0;animation:popUp .4s ease forwards}
.mv-cards span.win{animation:popUp .4s ease forwards,winGlow .5s ease 2.4s forwards}
@keyframes popUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes winGlow{to{border-color:#CAF41C;background:rgba(202,244,28,.2);box-shadow:none}}
.mv-prod{display:flex;align-items:center;justify-content:space-between;gap:10px;height:100%}
.mv-prod .c{width:64px;height:112px;border-radius:10px;background:var(--s2);border:1px solid var(--line2);position:relative;overflow:hidden;flex-shrink:0}
.mv-prod .c.scan::after{content:"";position:absolute;left:0;right:0;height:2px;background:#D9FF6B;box-shadow:none;top:0;animation:scan 1.4s ease-in-out infinite alternate}
@keyframes scan{to{top:calc(100% - 2px)}}
.mv-prod .c.out{border:2px solid #CAF41C;background:linear-gradient(160deg,#1E2A0A,#0B0F05);opacity:0;animation:popUp .5s ease 1.8s forwards}
.mv-prod .chips{display:flex;flex-direction:column;gap:6px}
.mv-prod .chips span{opacity:0;animation:popUp .35s ease forwards;font-size:11px;padding:4px 10px}
.mv-mult{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px}
.mv-mult span{aspect-ratio:9/16;border-radius:3px;background:rgba(202,244,28,.25);border:1px solid rgba(202,244,28,.5);opacity:0;transform:scale(.4);animation:pop .3s ease forwards}
@keyframes pop{to{opacity:1;transform:none}}
.mv-count{position:absolute;right:14px;bottom:10px;font-family:Inter,sans-serif;font-size:22px;color:var(--blue-t)}

#how-grid,#mult-grid{grid-template-columns:repeat(20,minmax(0,1fr));gap:4px}
/* IDEATION — research console */
.wall3d{position:relative;height:540px;perspective:1600px}
.wall3d .plane{position:absolute;inset:-10px -40px;transform-style:preserve-3d;transform:rotateX(18deg) rotateY(-22deg) rotateZ(2deg);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;align-content:center}
.wall3d .tile{aspect-ratio:9/16;border-radius:14px;overflow:hidden;position:relative;border:1px solid var(--line2);transform:translateZ(0);transition:transform .6s cubic-bezier(.2,.7,.2,1),border-color .4s,box-shadow .4s}
.wall3d .tile.hot{transform:translateZ(70px);border:2px solid var(--blue);box-shadow:none}
.wall3d .tile .meta{position:absolute;left:8px;right:8px;bottom:8px;z-index:2;display:flex;justify-content:space-between;font-family:Inter,sans-serif;font-size:10px;color:#EEF6D2}
.prompt{display:flex;align-items:center;gap:12px;padding:14px 16px 14px 20px;border-radius:100px;background:var(--blue);color:#fff;font-weight:600;font-size:15px;box-shadow:none}
.prompt .caret{width:2px;height:18px;background:#fff;animation:caret .8s step-end infinite}
.console{background:var(--s1);border:2px solid var(--blue);border-radius:24px;padding:24px;box-shadow:none}
.fgroup{display:flex;align-items:flex-start;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.fgroup:last-child{border-bottom:none}
.fgroup .fl{width:112px;flex-shrink:0;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--subtle);padding-top:9px}
.fgroup .fo{display:flex;flex-wrap:wrap;gap:6px}
.fbtn{min-height:36px;padding:7px 13px;border-radius:100px;background:var(--s2);border:1px solid var(--line2);color:var(--muted);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}
.fbtn:hover{color:var(--text);border-color:var(--subtle)}
.fbtn.on{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:none}
.results{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:16px}
.res{aspect-ratio:9/16;border-radius:12px;overflow:hidden;position:relative;border:1px solid var(--line2);animation:resIn .5s cubic-bezier(.2,.7,.2,1) both}
.res .meta{position:absolute;left:6px;right:6px;bottom:6px;z-index:2;display:flex;flex-direction:column;gap:2px;font-family:Inter,sans-serif;font-size:9.5px;color:#EEF6D2}
.res.top{border:2px solid var(--blue);box-shadow:none}
@keyframes resIn{from{opacity:0;transform:translateY(16px) scale(.96)}}
.metric{display:flex;flex-direction:column;gap:6px;padding:24px;border-radius:18px;background:var(--s1);border:1px solid var(--line)}
.metric strong{font-size:22px;font-weight:800;letter-spacing:-.02em}

/* PRODUCTION — hook morph + exploded template */
.morph{position:relative;height:520px;perspective:1400px}
.morph .card3d{position:absolute;top:50%;left:50%;width:250px;height:444px;margin:-222px 0 0 -125px;transform-style:preserve-3d;animation:flip 7s ease-in-out infinite}
.morph .face{position:absolute;inset:0;border-radius:22px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.morph .face.b{transform:rotateY(180deg);border:2px solid var(--blue);box-shadow:none}
.morph .face.a{border:1px solid var(--line2)}
@keyframes flip{0%,30%{transform:rotateY(-14deg)}50%,80%{transform:rotateY(166deg)}100%{transform:rotateY(346deg)}}
.brandrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.layers3d{position:relative;height:620px;perspective:1600px}
.layers3d .stack{position:absolute;left:50%;top:68%;width:300px;height:420px;margin:-210px 0 0 -150px;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-38deg);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.layers3d .ly{position:absolute;inset:0;border-radius:18px;border:1px solid rgba(255,255,255,.18);transition:transform .9s cubic-bezier(.2,.7,.2,1),background .6s;box-shadow:0 20px 40px rgba(0,0,0,.35)}
.layers3d .ly em{position:absolute;right:-118px;top:8px;width:110px;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);transform:rotateZ(38deg) rotateX(-58deg);transform-origin:left top}
.layers3d .l0{background:var(--t-bg)}
.layers3d .l1{background:repeating-linear-gradient(0deg,var(--t-grid) 0 2px,transparent 2px 60px),repeating-linear-gradient(90deg,var(--t-grid) 0 2px,transparent 2px 60px);background-color:transparent}
.layers3d .l2{background:radial-gradient(circle,var(--t-piece) 0 16px,transparent 17px) 0 0/60px 60px;background-color:transparent}
.layers3d .l3{background:radial-gradient(circle at 30% 70%,var(--t-char) 0 34px,transparent 35px),radial-gradient(circle at 74% 30%,var(--t-char) 0 22px,transparent 23px);background-color:transparent}
.layers3d .l4{background:linear-gradient(var(--t-ui),var(--t-ui)) 50% 8%/70% 30px no-repeat,linear-gradient(var(--t-ui),var(--t-ui)) 50% 92%/50% 34px no-repeat;background-color:transparent;border-style:dashed}
.layers3d.open .l0{transform:translateZ(0)}.layers3d.open .l1{transform:translateZ(48px)}.layers3d.open .l2{transform:translateZ(96px)}.layers3d.open .l3{transform:translateZ(144px)}.layers3d.open .l4{transform:translateZ(192px)}
.layers3d.shut .ly{transform:translateZ(0)}
.layers3d.shut .ly em{opacity:0}
.theme-original{--t-bg:linear-gradient(160deg,#1E2A0A,#0B0F05);--t-grid:rgba(202,244,28,.4);--t-piece:#D9FF6B;--t-char:#EFFFC4;--t-ui:rgba(255,255,255,.55)}
.theme-xmas{--t-bg:linear-gradient(160deg,#0E3B2C,#071A14);--t-grid:rgba(255,255,255,.35);--t-piece:#C8323B;--t-char:#F2F2F2;--t-ui:rgba(232,196,104,.85)}
.theme-halloween{--t-bg:linear-gradient(160deg,#2A1240,#0F0618);--t-grid:rgba(233,128,36,.45);--t-piece:#E98024;--t-char:#C9B6E8;--t-ui:rgba(233,128,36,.8)}
.theme-summer{--t-bg:linear-gradient(160deg,#0B5363,#06232B);--t-grid:rgba(255,226,140,.45);--t-piece:#FFD25E;--t-char:#FFF4D6;--t-ui:rgba(255,255,255,.7)}

/* MULTIPLICATION — matrix + audio */
.matrix3d{position:relative;height:560px;perspective:1500px}
.matrix3d .hooks{position:absolute;left:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;z-index:3}
.matrix3d .hk{width:96px;height:62px;border-radius:12px;overflow:hidden;position:relative;border:1px solid var(--line2)}
.matrix3d .hk span{position:absolute;left:8px;bottom:6px;z-index:2;font-size:10px;font-weight:700;color:#EEF6D2}
.matrix3d .concept{position:absolute;left:30%;top:50%;width:150px;height:266px;margin-top:-133px;border-radius:18px;overflow:hidden;border:2px solid var(--blue);box-shadow:none;z-index:3}
.matrix3d svg.wires{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.matrix3d .wall{position:absolute;right:0;top:50%;width:46%;margin-top:-210px;height:420px;transform-style:preserve-3d;transform-origin:left center;transform:rotateY(22deg) rotateX(4deg);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;align-content:center}
.matrix3d .wall span{aspect-ratio:9/16;border-radius:7px;background:linear-gradient(180deg,#1E2A0A,#0B0F05);border:1px solid rgba(202,244,28,.45);opacity:0;transform:translateZ(-80px);transition:opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1)}
.matrix3d.go .wall span{opacity:1;transform:translateZ(0)}
.wire{stroke:var(--blue);stroke-width:1.5;fill:none;stroke-dasharray:6 8;animation:dash 1.6s linear infinite;opacity:.8}
@keyframes dash{to{stroke-dashoffset:-28}}
.lanes{background:var(--s1);border:2px solid var(--blue);border-radius:24px;padding:24px;box-shadow:none}
.lane{display:grid;grid-template-columns:120px 1fr auto;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.lane:last-of-type{border-bottom:none}
.lane .nm{font-size:13px;font-weight:700}
.lane .nm small{display:block;font-weight:500;color:var(--subtle);margin-top:2px}
.wave{height:44px;display:flex;align-items:center;gap:3px;overflow:hidden}
.wave i{flex:1;min-width:2px;border-radius:2px;background:var(--subtle);transform-origin:center;animation:wv 1.2s ease-in-out infinite}
.wave.sfx i{background:#7C7C88}
.wave.mus i{background:var(--blue);box-shadow:none}
@keyframes wv{50%{transform:scaleY(.35)}}
.tracks{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.trk{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:var(--s2);border:1px solid var(--line2);color:var(--text);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;min-height:44px}
.trk small{font-size:11px;color:var(--subtle);font-weight:600}
.trk.on{border-color:var(--blue);background:var(--blue-soft)}
.trk .hot{font-size:10px;padding:2px 7px;border-radius:100px;background:var(--blue);color:#fff;font-weight:700;letter-spacing:.04em}

@media (prefers-reduced-motion:reduce){
  .floor,.core > i,.core > b,.loop-steps button.on i,.mv-prod .c.scan::after,.floaty,.beam::after,.morph .card3d,.wave i,.wire{animation:none!important}
  .typed{width:auto;animation:none;border:none}
  .mv-cards span,.mv-mult span,.mv-prod .chips span,.mv-prod .c.out{opacity:1;transform:none;animation:none}
  .rv{opacity:1;transform:none;transition:none}
}
@media (max-width:960px){
  .h1{font-size:42px}.h2{font-size:34px}
  .g2,.g3,.g4,.g5,.split,footer .cols{grid-template-columns:minmax(0,1fr)}
  .split{gap:40px}
  .menu{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--bg);border-bottom:1px solid var(--line);padding:12px 24px 24px;max-height:calc(100vh - 72px);overflow:auto}
  .menu.mob{display:flex}
  .dd{position:static;width:auto;box-shadow:none}
  .dd.dd2{width:auto;grid-template-columns:1fr}
  .dd2 .col+.col{border-left:none;border-top:1px solid var(--line)}
  .burger{display:inline-flex;align-items:center;justify-content:center}
  .nav-book{display:none}
  .mx{overflow-x:auto}.mx-row{min-width:760px}
  .sec{padding:80px 0}.hero{padding:56px 0 80px}
  .cta{padding:56px 24px}
  .hide-m{display:none!important}
  .flow-grid{grid-template-columns:1fr;gap:24px}
  .flow-stage{order:-1;top:80px;height:380px;z-index:5}
  .fstep{min-height:55vh}.fstep h3{font-size:26px}
  .fvis{padding:52px 18px 18px}
  .loop-wrap{grid-template-columns:1fr;gap:24px}
  .stage3d{height:420px}
  .node .orb{width:58px;height:58px;border-radius:18px}
  .core{width:110px;height:110px}.core > b{inset:38px}.core > i:nth-child(2){inset:12px}.core > i:nth-child(3){inset:24px}
  .loop-cap{min-height:0}
  .loop-steps button{font-size:11px;padding:10px 6px}
  .stack3d{height:440px}.stack3d .c{width:190px;height:338px;margin:-169px 0 0 -95px}
  .stack3d .c.back{transform:translate3d(-80px,-20px,-120px) rotateY(24deg)}
  .stack3d .c.front{transform:translate3d(40px,10px,40px) rotateY(-14deg)}
  .wall3d{height:380px}.wall3d .plane{grid-template-columns:repeat(4,minmax(0,1fr));inset:-10px -60px}
  .results{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fgroup{flex-direction:column;gap:8px}.fgroup .fl{width:auto;padding-top:0}
  .morph{height:460px}
  .layers3d{height:440px}.layers3d .stack{width:200px;height:300px;margin:-150px 0 0 -100px}
  .layers3d .ly em{display:none}
  .matrix3d{height:auto;display:flex;flex-direction:column;gap:20px;perspective:none}
  .matrix3d .hooks{position:static;transform:none;flex-direction:row;flex-wrap:wrap}
  .matrix3d .concept{position:relative;left:auto;top:auto;margin:16px auto 20px;width:120px;height:213px}
  .matrix3d .hooks{justify-content:center}.matrix3d .hk{width:60px;height:44px}
  .lane .g5{grid-template-columns:repeat(5,minmax(0,1fr))!important}
  .matrix3d svg.wires{display:none}
  .matrix3d .wall{position:static;width:100%;margin:0;height:auto;transform:none;grid-template-columns:repeat(8,minmax(0,1fr))}
  .lane{grid-template-columns:90px 1fr;}.lane>:last-child{grid-column:1/-1}
}

@media (max-width:600px){.swapcard{flex-wrap:wrap}.swapcard>.frame{width:46%!important;height:auto!important;aspect-ratio:9/16}.swapcard>div:not(.frame){order:3;flex-direction:row!important;flex-wrap:wrap;justify-content:center;width:100%}.swapcard>div:not(.frame) svg{display:none}}
/* ===== v8 · Examples: use cases ===== */
.uc-legend{display:flex;gap:22px;flex-wrap:wrap;margin-top:36px;font-size:14px;color:var(--muted)}
.uc-legend span{display:inline-flex;align-items:center;gap:10px}
.stg{font-style:normal;font-family:Inter,sans-serif;font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;display:inline-flex;align-items:center;justify-content:center;min-width:86px;padding:5px 10px;border-radius:100px;border:1px solid var(--blue-line);background:#0C1626;color:var(--blue-t);white-space:nowrap}
.stg.s-recreate{background:#0B1F42;color:#BFD7FF;border-color:rgba(202,244,28,.6)}
.stg.s-scale{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:none}

.uc-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:56px;align-items:start;position:relative}
.uc-index{position:sticky;top:104px;display:flex;flex-direction:column;gap:2px}
.uc-index .ih{font-family:Inter,sans-serif;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);margin:0 0 12px 12px}
.uc-index button{appearance:none;border:0;background:transparent;font:inherit;text-align:left;cursor:pointer;display:grid;grid-template-columns:28px 1fr;gap:8px;padding:11px 12px;border-radius:12px;font-size:14px;line-height:1.4;color:var(--muted);transition:background .25s,color .25s;position:relative}
.uc-index button b{font-family:Inter,sans-serif;font-size:12px;font-weight:500;color:var(--subtle);padding-top:1px}
.uc-index button:hover{color:var(--text);background:var(--s1)}
.uc-index button.on{color:#fff;background:var(--blue-soft)}
.uc-index button.on::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;border-radius:2px;background:var(--blue);box-shadow:none}
.uc-index button.on b{color:var(--blue-t)}
.uc-index button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.uc-list{display:flex;flex-direction:column;gap:32px}
.uc{position:relative;background:var(--s1);border:1px solid var(--line);border-radius:28px;padding:40px;overflow:hidden;scroll-margin-top:100px}
.uc::before{content:"";position:absolute;width:520px;height:520px;right:-240px;top:-260px;border-radius:50%;background:none;pointer-events:none}
.uc-head h2{font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:1.12;margin:10px 0 0;max-width:640px}
.uc-sit{color:var(--muted);font-size:16px;line-height:1.6;margin:12px 0 0;max-width:620px}
.uc-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:18px}
.uc-tags span{font-family:Inter,sans-serif;font-size:11px;padding:5px 10px;border-radius:100px;border:1px solid var(--line2);color:var(--muted)}
.uc-body{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px;margin-top:32px;align-items:center}

.uc-stage{position:relative;height:380px;perspective:1100px;display:flex;align-items:center;justify-content:center;border-radius:20px;border:1px solid var(--line);overflow:hidden;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 32px),repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 32px),var(--bg)}
.uc-tilt{transform-style:preserve-3d;transition:transform .3s ease-out;display:flex;align-items:center;justify-content:center}
.uc-tilt .frame .tag{font-size:10px;top:10px;left:10px}
.uc-arrow{flex:none}

/* pair */
.v-pair{display:flex;align-items:center;gap:16px;transform-style:preserve-3d}
.v-pair .frame{width:118px;height:210px}
.v-pair .f-pick{transform:translateZ(-30px) rotateY(14deg);opacity:.92}
.v-pair .f-yours{transform:translateZ(40px) rotateY(-12deg)}
.v-mid{display:flex;flex-direction:column;align-items:center;gap:8px;transform:translateZ(20px)}
.v-mid .chip{font-size:11px}
.uc .v-pair .f-yours{transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .9s}
.uc:not(.play) .v-pair .f-yours{transform:translateZ(-60px) rotateY(-50deg);opacity:0}

/* refresh */
.v-refresh{display:flex;align-items:center;gap:18px;transform-style:preserve-3d}
.v-hooks{display:flex;flex-direction:column;gap:8px;transform-style:preserve-3d}
.v-refresh .v-hooks{display:grid;grid-template-columns:repeat(2,80px);gap:8px}
.v-refresh .uhk{width:80px;height:48px}
.uhk{position:relative;width:96px;height:56px;border-radius:10px;overflow:hidden;border:1px solid var(--blue-line);transform:translateZ(30px);transition:transform .7s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*.08s),opacity .7s calc(var(--i,0)*.08s)}
.uhk b{position:absolute;left:8px;bottom:6px;font-size:10px;font-weight:700;z-index:2}
.uhk.sm{width:78px;height:42px}
.uc:not(.play) .uhk{transform:translateZ(120px) translateX(-30px);opacity:0}
.v-refresh .f-body{width:116px;height:206px;transform:rotateY(-14deg)}

/* themes */
.v-themes{display:flex;gap:10px;transform-style:preserve-3d}
.tb{width:84px;height:150px;background:var(--t-bg)!important;border-color:rgba(255,255,255,.18);transition:transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--i)*.1s),opacity .9s calc(var(--i)*.1s);transform:translateZ(calc(var(--i)*14px)) rotateY(-16deg)}
.uc:not(.play) .tb{transform:translateZ(-80px) rotateY(50deg);opacity:0}
.tb .tb-grid{position:absolute;left:12%;right:12%;top:28%;height:44%;border-radius:8px;background:repeating-linear-gradient(0deg,var(--t-grid) 0 1px,transparent 1px 16px),repeating-linear-gradient(90deg,var(--t-grid) 0 1px,transparent 1px 16px);transform:perspective(200px) rotateX(38deg)}
.tb .tb-piece{position:absolute;width:18px;height:18px;border-radius:50%;left:42%;top:44%;background:var(--t-piece);box-shadow:0 0 14px var(--t-piece)}
.tb .tb-char{position:absolute;left:14%;right:14%;bottom:10%;height:8%;border-radius:6px;background:var(--t-ui)}

/* matrix */
.v-matrix{display:flex;align-items:center;gap:12px;transform-style:preserve-3d}
.v-x{font-size:22px;font-weight:800;color:var(--blue-t)}
.v-matrix .f-concept{width:96px;height:171px;transform:translateZ(40px)}
.v-wall{display:grid;grid-template-columns:repeat(5,22px);gap:5px;transform:rotateY(-24deg);transform-style:preserve-3d}
.v-wall span{height:39px;border-radius:5px;border:1px solid rgba(202,244,28,.5);background:linear-gradient(180deg,#1E2A0A,#0B0F05);transition:transform .5s cubic-bezier(.2,.7,.2,1) calc(var(--i)*.03s),opacity .5s calc(var(--i)*.03s)}
.uc:not(.play) .v-wall span{transform:translateZ(80px) scale(.4);opacity:0}

/* music */
.v-music{width:min(420px,88%);display:flex;flex-direction:column;gap:12px;background:var(--s1);border:2px solid var(--blue);border-radius:18px;padding:18px;box-shadow:none;transform:rotateX(10deg)}
.ml{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center}
.ml .nm{font-size:12px;font-weight:700}
.ml .nm em{display:block;font-style:normal;font-family:Inter,sans-serif;font-size:10px;color:var(--subtle);font-weight:500;margin-top:2px}
.ml .nm em.sw{color:var(--blue-t)}
.ml-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.ml-strip .art{position:relative;height:44px;border-radius:6px}
.ml-strip .art::after{display:none}
.uwave{height:30px;border-radius:6px;background:repeating-linear-gradient(90deg,var(--subtle) 0 2px,transparent 2px 5px);-webkit-mask:linear-gradient(0deg,#000 0,#000 100%);mask-image:radial-gradient(ellipse 100% 60% at 50% 50%,#000 40%,transparent 100%)}
.uwave.on{background:repeating-linear-gradient(90deg,#8FB8FF 0 2px,transparent 2px 6px)}
.uwave.mus{background:repeating-linear-gradient(90deg,var(--blue) 0 3px,transparent 3px 5px);animation:waveMove 1.6s linear infinite}
@keyframes waveMove{to{background-position:40px 0}}
.ml-tracks{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.ml-tracks .chip{font-size:10.5px;transition:background .3s,border-color .3s,color .3s;color:var(--muted)}
.ml-tracks .chip.on{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:none}

/* research */
.v-research{width:min(420px,90%);display:flex;flex-direction:column;gap:10px;transform:rotateX(8deg);transform-style:preserve-3d}
.rq{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 10px 10px 16px;border-radius:100px;background:var(--s1);border:2px solid var(--blue);box-shadow:none;font-size:13px;transform:translateZ(30px)}
.rq b{background:var(--blue);color:#fff;font-size:12px;padding:6px 12px;border-radius:100px}
.rf{display:flex;gap:6px;flex-wrap:wrap}
.rf span{font-family:Inter,sans-serif;font-size:10px;padding:4px 9px;border-radius:100px;background:var(--blue-soft);border:1px solid var(--blue-line);color:var(--blue-t)}
.rg{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.rt{position:relative;height:120px;border-radius:9px;overflow:hidden;border:1px solid var(--line2);transition:transform .6s cubic-bezier(.2,.7,.2,1) calc(var(--i)*.07s),opacity .6s calc(var(--i)*.07s)}
.rt.picked{border:2px solid var(--blue);transform:translateZ(24px);box-shadow:none}
.uc:not(.play) .rt{opacity:0;transform:translateY(16px)}
.rt .art::after{display:none}
.rm{position:absolute;left:4px;right:4px;bottom:4px;font-family:Inter,sans-serif;font-size:8px;color:#fff;background:rgba(0,0,0,.6);border-radius:4px;padding:2px 3px;text-align:center}
.rp{position:absolute;top:4px;left:4px;font-size:8px;font-weight:700;background:var(--blue);color:#fff;border-radius:100px;padding:2px 6px;text-transform:uppercase;letter-spacing:.04em}

/* recipe */
.uc-rh{display:block;font-family:Inter,sans-serif;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);margin-bottom:6px}
.uc-steps{list-style:none;margin:10px 0 0;padding:0;position:relative}
.uc-steps::before{content:"";position:absolute;left:43px;top:18px;bottom:18px;width:1px;background:linear-gradient(180deg,var(--blue-line),rgba(202,244,28,.1))}
.uc-steps li{position:relative;display:grid;grid-template-columns:86px 1fr;gap:16px;align-items:start;padding:10px 0;transition:opacity .6s calc(.15s + var(--i)*.12s),transform .6s cubic-bezier(.2,.7,.2,1) calc(.15s + var(--i)*.12s)}
.uc:not(.play) .uc-steps li{opacity:0;transform:translate3d(16px,0,0)}
.uc-steps li .stg{position:relative;z-index:1}
.uc-steps li div{font-size:15px;line-height:1.55;color:var(--text)}
.uc-steps li div b{display:block;font-family:Inter,sans-serif;font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin-bottom:2px}
.who-you{color:var(--muted)}
.who-ag{color:var(--blue-t)}
.uc-result{margin-top:18px;padding:16px 18px;border-radius:16px;border:1px solid var(--blue-line);background:var(--blue-soft);display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px}
.uc-result .big{font-size:40px;font-weight:800;letter-spacing:-.04em;line-height:1;color:#fff;text-shadow:none;min-width:56px}
.uc-result strong{display:block;font-size:15px;margin-top:2px}
.uc-result .ck{margin-top:10px;font-size:11px;color:var(--blue-t);border-color:var(--blue-line);background:transparent}

.uc-tilt .tb .tag{font-size:8.5px;padding:3px 7px;letter-spacing:.03em;left:7px;top:7px}
@media (max-width:960px){
  .uc-layout{grid-template-columns:minmax(0,1fr)}
  .uc-index{display:none}
  .uc-body{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .uc{padding:24px 20px;border-radius:22px}
  .uc-head h2{font-size:24px}
  .uc-stage{height:300px}
  .v-pair{gap:10px}.v-pair .frame{width:100px;height:178px}.v-mid .chip{display:none}
  .v-refresh .v-hooks{grid-template-columns:repeat(2,72px)}.v-refresh .uhk{width:72px;height:44px}.v-refresh .f-body{width:96px;height:171px}
  .v-themes{gap:6px}.tb{width:70px;height:124px}
  .v-matrix{gap:6px}.v-matrix .uhk.sm{width:52px;height:30px}.uhk b{font-size:8px;left:5px;bottom:3px}.v-matrix .f-concept{width:64px;height:114px}.v-wall{grid-template-columns:repeat(5,14px);gap:3px}.v-wall span{height:25px}.v-x{font-size:16px}
  .rt{height:84px}.rm{display:none}
  .ml{grid-template-columns:70px 1fr}
  .uc-steps li{grid-template-columns:78px 1fr;gap:12px}.stg{min-width:78px;font-size:10px;padding:4px 8px}.uc-steps::before{left:39px}
}
@media (prefers-reduced-motion:reduce){.uc *{transition:none!important;animation:none!important}}
/* ===== v9 · Multiplication: two routes + gameplay versions ===== */
.rx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.rx{position:relative;background:var(--s1);border:1px solid var(--line);border-radius:28px;padding:36px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .3s,box-shadow .3s}
.rx:hover{border-color:var(--blue-line);box-shadow:0 0 0 1px rgba(202,244,28,.25)}
.rx::before{content:"";position:absolute;width:420px;height:420px;right:-200px;top:-220px;border-radius:50%;background:none;pointer-events:none}
.rx-top h3{font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1.15;margin:12px 0 0}
.rx-top p{color:var(--muted);font-size:16px;line-height:1.6;margin:10px 0 0;max-width:460px}
.rx-stage{position:relative;height:300px;margin-top:28px;perspective:1000px;display:flex;align-items:center;justify-content:center;border-radius:20px;border:1px solid var(--line);overflow:hidden;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 30px),repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 30px),var(--bg)}
.rx-tilt{display:flex;align-items:center;gap:12px;transform-style:preserve-3d;transition:transform .35s ease-out;transform:rotateX(8deg) rotateY(-10deg)}
.rx-plus{font-size:22px;font-weight:800;color:var(--blue-t);transform:translateZ(20px)}
.rx-col{display:flex;flex-direction:column;gap:7px;transform:translateZ(30px)}
.rx-hk{position:relative;width:78px;height:44px;border-radius:9px;overflow:hidden;border:1px solid var(--blue-line);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.rx-hk .art::after{display:none}
.rx-hk b{position:absolute;left:7px;bottom:5px;font-size:9.5px;font-weight:700;z-index:2}
.rx-base{width:104px;height:185px;transform:translateZ(46px)}
.rx-base .tag{font-size:9.5px;top:9px;left:9px;padding:3px 8px}
.rx-out{display:grid;grid-template-columns:repeat(3,26px);gap:5px;transform:rotateY(-20deg) translateZ(10px);transform-style:preserve-3d}
.rx-out span{height:46px;border-radius:6px;border:1px solid rgba(202,244,28,.5);background:linear-gradient(180deg,#1E2A0A,#0B0F05);animation:rxPulse 3.2s ease-in-out infinite;animation-delay:calc(var(--n,0)*.12s)}
.rx-out span:nth-child(3n+1){--n:1}.rx-out span:nth-child(3n+2){--n:3}.rx-out span:nth-child(3n){--n:5}
@keyframes rxPulse{0%,100%{box-shadow:none;border-color:rgba(202,244,28,.35)}50%{box-shadow:none;border-color:var(--blue)}}
.rx:hover .rx-hk:nth-child(1){transform:translateX(6px)}.rx:hover .rx-hk:nth-child(2){transform:translateX(10px)}.rx:hover .rx-hk:nth-child(3){transform:translateX(10px)}.rx:hover .rx-hk:nth-child(4){transform:translateX(6px)}

/* themed gameplay frames */
.tbx{background:var(--t-bg)!important}
.tbx .tb-grid{position:absolute;left:12%;right:12%;top:30%;height:42%;border-radius:8px;background:repeating-linear-gradient(0deg,var(--t-grid) 0 1px,transparent 1px 14px),repeating-linear-gradient(90deg,var(--t-grid) 0 1px,transparent 1px 14px);transform:perspective(200px) rotateX(38deg)}
.tbx .tb-piece{position:absolute;width:16px;height:16px;border-radius:50%;left:42%;top:45%;background:var(--t-piece);box-shadow:0 0 14px var(--t-piece)}
.tbx .tb-char{position:absolute;left:14%;right:14%;bottom:10%;height:8%;border-radius:6px;background:var(--t-ui)}
.tbx.alt .tb-piece{border-radius:4px;transform:rotate(45deg);background:#EFFFC4;box-shadow:0 0 14px #EFFFC4}
.rx-skins .rx-base{width:96px;height:171px}
.rx-fan{display:grid;grid-template-columns:repeat(2,80px);gap:8px;transform-style:preserve-3d}
.rx-fan .frame{height:124px;border-color:rgba(255,255,255,.18);transform:translateZ(calc(var(--i)*10px));transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.rx-fan .tag{font-size:7.5px;padding:2px 6px;top:6px;left:6px;letter-spacing:.02em}
.rx:hover .rx-fan .frame{transform:translateZ(calc(20px + var(--i)*14px))}
.rx-list{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.rx-list li{display:flex;gap:10px;font-size:15px;line-height:1.5;color:var(--text)}
.rx-list li::before{content:"✓";color:var(--blue-t);font-weight:800}
.rx-both{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:28px;font-size:16px;color:var(--muted);text-align:center}

/* gameplay versions wall */
.vx-ctl{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.vx-ctl button{appearance:none;font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:100px;border:1px solid var(--line2);background:var(--s2);color:var(--muted);font-size:14px;font-weight:700;transition:background .25s,border-color .25s,color .25s,box-shadow .25s}
.vx-ctl button::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--subtle);transition:background .25s,box-shadow .25s}
.vx-ctl button.on{background:var(--blue-soft);border-color:var(--blue-line);color:#fff}
.vx-ctl button.on::before{background:var(--blue);box-shadow:none}
.vx-ctl button:hover{border-color:var(--blue-line)}
.vx-ctl button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.vx-stage{position:relative;height:520px;perspective:1300px;display:flex;align-items:center;justify-content:center}
.vx-tilt{transform-style:preserve-3d;transition:transform .35s ease-out}
.vx-wall{display:grid;grid-template-columns:repeat(4,92px);gap:12px;transform:rotateY(-20deg) rotateX(10deg);transform-style:preserve-3d}
.vx{position:relative;height:164px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.16);background:var(--vbg);transform:translateZ(calc(var(--z,0)*1px));transition:background .6s,transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .6s}
.vx.flip{animation:vxFlip .6s cubic-bezier(.2,.7,.2,1)}
@keyframes vxFlip{0%{transform:translateZ(calc(var(--z,0)*1px)) rotateY(0)}50%{transform:translateZ(calc(var(--z,0)*1px + 30px)) rotateY(90deg)}100%{transform:translateZ(calc(var(--z,0)*1px)) rotateY(0)}}
.vx.base{border:2px solid var(--blue);box-shadow:none;--z:40}
.vx i{position:absolute;display:block}
.vx .g{left:12%;right:12%;top:30%;height:42%;border-radius:8px;background:repeating-linear-gradient(0deg,var(--vgrid) 0 1px,transparent 1px 14px),repeating-linear-gradient(90deg,var(--vgrid) 0 1px,transparent 1px 14px);transform:perspective(200px) rotateX(38deg);transition:background .6s}
.vx .p{width:16px;height:16px;left:42%;top:45%;border-radius:50%;background:var(--vpc);box-shadow:0 0 14px var(--vpc);transition:background .6s,border-radius .6s,box-shadow .6s}
.vx .p.sq{border-radius:4px;transform:rotate(45deg)}
.vx .p.tri{border-radius:50% 50% 4px 4px}
.vx .u{left:14%;right:14%;bottom:10%;height:8%;border-radius:6px;background:var(--vui);transition:background .6s}
.vx .t{top:8%;right:9%;width:14px;height:14px;border-radius:50%;border:2px solid var(--vth);opacity:var(--vtho);transition:border-color .6s,opacity .6s}
.vx b{position:absolute;top:8px;left:8px;font-size:8.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--blue);color:#fff;border-radius:100px;padding:2px 7px}

@media (max-width:960px){
  .rx-grid{grid-template-columns:minmax(0,1fr)}
  .vx-stage{height:440px}
}
@media (max-width:600px){
  .rx{padding:24px 20px;border-radius:22px}
  .rx-top h3{font-size:23px}
  .rx-stage{height:250px}
  .rx-tilt{gap:7px;transform:none}
  .rx-hk{width:58px;height:34px}.rx-hk b{font-size:8px;left:5px;bottom:3px}
  .rx-base{width:74px;height:132px}.rx-skins .rx-base{width:74px;height:132px}
  .rx-out{grid-template-columns:repeat(3,17px);gap:3px}.rx-out span{height:30px;border-radius:4px}
  .rx-fan{grid-template-columns:repeat(2,52px);gap:6px}.rx-fan .frame{height:92px}.rx-fan .tag{font-size:6.5px;padding:2px 4px}
  .rx-plus{font-size:16px}
  .vx-stage{height:340px}
  .vx-wall{grid-template-columns:repeat(4,64px);gap:8px;transform:rotateY(-12deg) rotateX(8deg)}
  .vx{height:114px;border-radius:10px}
  .vx-stage .fchip{display:none}
}
@media (prefers-reduced-motion:reduce){.rx-out span,.vx.flip{animation:none!important}}

/* ===== v10 · Production hero: one click, zero prompts ===== */
.h1.loud{font-size:84px;line-height:1;letter-spacing:-.045em}
.h1.loud .acc{white-space:nowrap}
.h1.loud .acc{text-shadow:none}
.lead{margin:22px 0 0;font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.3;color:var(--text);max-width:560px}
.morph.pro{height:600px}
.morph.pro .fchip{position:relative}
.morph.pro .card3d{top:43%}
.cmdbar{position:absolute;left:50%;bottom:0;width:min(400px,100%);margin-left:max(-200px,-50%);z-index:7;display:flex;gap:8px;align-items:center;padding:8px;border-radius:100px;background:rgba(18,18,20,.9);border:1px solid var(--line2);backdrop-filter:blur(12px);box-shadow:0 24px 60px rgba(0,0,0,.55)}
.pbox{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 6px 0 14px;font-size:13px}
.pbox .ph{color:var(--subtle);text-decoration:line-through;text-decoration-color:var(--blue-t);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbox .nn{flex:none;font-family:Inter,sans-serif;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-t);padding:3px 8px;border-radius:100px;border:1px solid var(--blue-line)}
.rbtn{position:relative;flex:none;padding:12px 22px;border-radius:100px;background:var(--blue);color:#fff;font-size:15px;font-weight:800;box-shadow:0 0 0 0 rgba(202,244,28,.6),var(--glow);animation:rPress 7s ease-in-out infinite}
.rbtn .cur{position:absolute;right:-6px;bottom:-14px;animation:rCur 7s ease-in-out infinite;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
@keyframes rCur{0%,12%{transform:translate(60px,50px);opacity:0}20%{opacity:1}24%{transform:translate(-30px,-10px)}26%{transform:translate(-30px,-10px) scale(.85)}29%{transform:translate(-30px,-10px) scale(1)}42%{transform:translate(40px,40px);opacity:0}100%{transform:translate(60px,50px);opacity:0}}
@keyframes rPress{0%,25%{transform:scale(1);box-shadow:0 0 0 0 rgba(202,244,28,.6),var(--glow)}26.5%{transform:scale(.93)}29%{transform:scale(1);box-shadow:none}40%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(202,244,28,0),var(--glow)}}
@media (max-width:960px){.h1.loud{font-size:72px}}
@media (max-width:600px){.h1.loud .acc{white-space:normal}}
@media (max-width:600px){.h1.loud{font-size:54px}.lead{font-size:21px}.morph.pro{height:520px}.morph.pro .card3d{top:42%}.pbox .ph{font-size:12px}.rbtn{padding:11px 16px;font-size:14px}}
@media (prefers-reduced-motion:reduce){.rbtn,.rbtn .cur{animation:none!important}.rbtn .cur{display:none}}

/* ===== Creative fatigue: live-style performance chart ===== */
.cf-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:center}
.cf-head .sub{max-width:560px}
.cf-viz{padding:20px 20px 16px;display:flex;flex-direction:column;gap:14px;background:var(--s1);box-shadow:none}
.cf-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cf-live{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:100px;background:var(--blue-soft);border:1px solid var(--blue-line);color:var(--blue-t);font:600 10px Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.cf-live i{width:6px;height:6px;border-radius:50%;background:var(--blue-t);animation:cfPing 1.6s ease-out infinite}
@keyframes cfPing{0%{box-shadow:0 0 0 0 rgba(202,244,28,.7)}100%{box-shadow:none}}
.cf-title{font-size:13px;font-weight:700;color:var(--text)}
.cf-key{margin-left:auto;display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px}
.cf-key i{display:inline-block;width:14px;height:3px;border-radius:2px}
.cf-key .k1{background:#62666d}.cf-key .k2{background:var(--blue-t);margin-left:10px}
.cf-stats{display:flex;align-items:flex-end;gap:28px}
.cf-stats>div{display:flex;flex-direction:column;gap:2px}
.cf-lab{font:500 10px Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--subtle)}
.cf-num{font-size:34px;font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.cf-num.hi{color:var(--blue-t)}.cf-num.dim{color:var(--muted)}
.cf-delta{margin-left:auto;padding:5px 10px;border-radius:8px;background:var(--blue-soft);color:var(--blue-t);font:600 13px Inter,sans-serif;font-variant-numeric:tabular-nums}
.cf-plot svg{width:100%;height:170px;display:block;overflow:visible}
.cf-grid line{stroke:rgba(255,255,255,.06);stroke-width:1}
.cf-scan{stroke:rgba(202,244,28,.5);stroke-width:1;stroke-dasharray:3 4}
.cf-mark text{font:700 9px Inter,sans-serif;fill:#fff}
.cf-mark rect{fill:var(--blue)}
.cf-mark .ring{fill:none;stroke:var(--blue-t);stroke-width:1.5;opacity:0}
.cf-mark.pop .ring{animation:cfRing 1.2s ease-out}
.cf-mark{opacity:0;transition:opacity .3s}.cf-mark.on{opacity:1}
@keyframes cfRing{0%{opacity:.9;r:4}100%{opacity:0;r:18}}
.cf-foot{display:flex;justify-content:space-between;font:500 10px Inter,sans-serif;color:var(--subtle);margin-top:-4px}
.cf-note{font-size:11px;color:var(--subtle)}
@media (max-width:960px){.cf-head{grid-template-columns:1fr;gap:0}}
@media (prefers-reduced-motion:reduce){.cf-live i{animation:none}}

/* ===== Examples: real clips inside the use-case visuals ===== */
.has-v{position:relative;overflow:hidden}
.has-v video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}
.has-v .tag,.has-v b{z-index:2}
.frame.has-v .tag{background:rgba(10,10,10,.75);backdrop-filter:blur(6px)}
.uhk.has-v b{text-shadow:0 1px 4px rgba(0,0,0,.9)}
.uhk.has-v::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 60%);z-index:1}
.v-themes .tb-v{width:84px;height:150px;transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .9s;transform:rotateY(-16deg)}
.v-themes .tb-soon{opacity:.55}
.uc.play .v-themes .tb-soon{opacity:.55}
.v-wall-img span{background-size:cover!important;background-position:center 30%!important}
.ml-video{position:relative;height:70px;border-radius:8px;overflow:hidden;border:1px solid var(--blue-line)}
.ml-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 70%}
@media (max-width:560px){.v-themes .tb-v{width:66px;height:118px}}
.v-themes .frame .tag{font-size:8px;padding:3px 6px;left:6px;top:6px;letter-spacing:.02em;white-space:nowrap}

/* ===== Brand name ===== */
.logo .logo-ai{color:var(--blue-t);margin-left:calc(.28em - 10px)}

/* ===== Founders: photos + LinkedIn ===== */
.founder{display:flex;gap:24px;align-items:flex-start}
.founder-ava{position:relative;flex-shrink:0;width:96px;height:96px;border-radius:50%;overflow:visible;display:block;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.founder-ava img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;border:2px solid var(--line2);box-shadow:none;transition:filter .3s,border-color .3s}
.founder-hover{position:absolute;inset:0;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:rgba(10,102,194,.82);color:#fff;opacity:0;transform:scale(.92);transition:opacity .25s,transform .25s}
.founder-hover b{font-size:10px;font-weight:700;letter-spacing:.02em}
.founder-li{position:absolute;right:-2px;bottom:-2px;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#0a66c2;color:#fff;border:3px solid var(--s1)}
.founder-li svg{width:13px;height:13px}
.founder-ava:hover,.founder-ava:focus-visible{transform:scale(1.05)}
.founder-ava:hover img,.founder-ava:focus-visible img{border-color:#0a66c2}
.founder-ava:hover .founder-hover,.founder-ava:focus-visible .founder-hover{opacity:1;transform:none}
.founder-name{font-size:22px;font-weight:800;color:var(--text)}
.founder-name:hover{color:var(--blue-t)}
.li-btn{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:8px 14px;border-radius:100px;font-size:13px;font-weight:700;color:var(--text);background:rgba(10,102,194,.16);border:1px solid rgba(10,102,194,.55);transition:background .2s,border-color .2s,transform .2s}
.li-btn svg{color:#4a9bea}
.li-btn:hover{background:#0a66c2;border-color:#0a66c2;color:#fff;transform:translateY(-1px)}
.li-btn:hover svg{color:#fff}
.li-co{margin-top:24px}
@media (max-width:560px){.founder{flex-direction:column}}

/* ===== Footer: socials + big wordmark ===== */
.socials{display:flex;gap:10px;margin-top:18px}
.socials a{width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--muted);background:var(--s1);border:1px solid var(--line2);transition:color .2s,background .2s,border-color .2s,transform .2s}
.socials a:hover{color:#fff;background:var(--blue);border-color:var(--blue);transform:translateY(-2px);box-shadow:var(--glow)}
.foot-mark{position:relative;display:block;margin-top:56px;padding-bottom:.08em;text-align:center;white-space:nowrap;font-weight:800;letter-spacing:-.055em;line-height:.85;font-size:clamp(52px,13.5vw,190px);background:linear-gradient(180deg,rgba(202,244,28,.42) 0%,rgba(202,244,28,.16) 55%,rgba(202,244,28,.02) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;user-select:none;pointer-events:none}

/* ===== Book page: smart booking card ===== */
.book-card{background:var(--s1);border:1px solid var(--line);border-radius:24px;position:relative;overflow:hidden;box-shadow:none}
.book-note{font-size:13px;color:var(--subtle)}
.book-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px 28px;border-radius:14px;background:var(--blue);color:#fff;font-size:16px;font-weight:700;box-shadow:var(--glow);transition:transform .25s,background .25s}
.book-cta:hover{background:var(--blue-h);color:#fff;transform:translateY(-2px)}
/* ===== Book page: inline scheduler ===== */
.book-embed .sub{margin-bottom:28px}
.book-embed-h{font-size:clamp(28px,3.4vw,40px)}
.calendly-inline-widget{min-width:280px;height:720px;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.09);background:var(--s1)}
@media (max-width:960px){.calendly-inline-widget{height:760px}}

/* ===== Mobile sticky CTA ===== */
.m-cta{display:none}
@media (max-width:960px){
  .m-cta{display:flex;gap:8px;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom, 0px));z-index:60;padding:8px;border-radius:100px;background:rgba(15,16,17,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.1);box-shadow:0 18px 40px -12px rgba(0,0,0,.7);transform:translateY(140%);opacity:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s}
  .m-cta.on{transform:none;opacity:1}
  .m-cta .btn{min-height:44px;padding:10px 18px;font-size:14px}
  .m-cta .btn-p{flex:1}
  footer{padding-bottom:90px}
}
@media (prefers-reduced-motion:reduce){.m-cta{transition:none}}

/* ===== Smart demo booking ===== */
.qa-card{padding:22px;text-align:left;display:flex;flex-direction:column;gap:14px}
.qa-top{display:flex;align-items:center;gap:12px}
.qa-ava{width:44px;height:44px;border-radius:50%;overflow:hidden;border:2px solid #CAF41C;flex-shrink:0}
.qa-ava img{width:100%;height:100%;object-fit:cover;display:block}
.qa-who{display:flex;flex-direction:column;min-width:0}
.qa-who strong{font-size:16px;color:var(--text)}
.qa-who small{font-size:12px;color:var(--muted);line-height:1.4}
.qa-meta{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.qa-meta span{padding:5px 10px;border-radius:100px;border:1px solid var(--s3);font-size:12px;font-weight:600;color:var(--text);white-space:nowrap}
.qa-progress{height:3px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.qa-progress i{display:block;height:100%;width:0;background:#CAF41C;transition:width .4s cubic-bezier(.2,.8,.2,1)}
.qa-thread{display:flex;flex-direction:column;gap:8px;min-height:220px;max-height:360px;overflow-y:auto;padding:4px 2px;scroll-behavior:smooth}
.qa-msg{max-width:88%;padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.5;animation:qaIn .3s cubic-bezier(.2,.8,.2,1)}
.qa-msg.bot{align-self:flex-start;background:var(--s2);border:1px solid rgba(255,255,255,.06);color:var(--text);border-bottom-left-radius:4px}
.qa-msg.me{align-self:flex-end;background:#CAF41C;color:#fff;font-weight:600;border-bottom-right-radius:4px}
.qa-typing{display:inline-flex;gap:4px;padding:12px 14px}
.qa-typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:qaDot 1s infinite}
.qa-typing i:nth-child(2){animation-delay:.15s}.qa-typing i:nth-child(3){animation-delay:.3s}
@keyframes qaDot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
@keyframes qaIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.qa-summary{align-self:stretch;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px;border-radius:14px;border:1px solid rgba(202,244,28,.3);background:rgba(202,244,28,.06);animation:qaIn .3s}
.qa-summary div{display:flex;flex-direction:column;gap:2px;min-width:0}
.qa-summary span{font:500 10px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle)}
.qa-summary b{font-size:13px;color:var(--text);overflow-wrap:anywhere}
.qa-input:empty{display:none}
.qa-chips{display:flex;flex-wrap:wrap;gap:8px}
.qa-chip{padding:9px 14px;border-radius:100px;border:1px solid rgba(202,244,28,.4);background:rgba(202,244,28,.08);color:var(--text);font-weight:600;font-size:14px;font-family:inherit;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.qa-chip:hover,.qa-chip:focus-visible{background:#CAF41C;color:#fff;transform:translateY(-1px);outline:none}
.qa-form{display:flex;gap:8px}
.qa-form .input{flex:1;min-width:0;border-radius:100px;padding:11px 16px}
.qa-form .btn{min-height:44px;padding:10px 20px}
.qa-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.qa-foot .book-note{margin:0;font-size:12px}
.qa-skip{background:none;border:none;padding:0;color:var(--muted);font-weight:500;font-size:13px;font-family:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.qa-skip:hover{color:var(--text)}
.qa-cta{margin-top:2px}
@media (max-width:960px){.qa-card{padding:18px}.qa-meta{display:none}.qa-thread{min-height:180px}}
@media (prefers-reduced-motion:reduce){.qa-msg,.qa-summary{animation:none}.qa-typing i{animation:none}}
.qa-cta[hidden],.book-embed[hidden]{display:none!important}

/* ===== Assistant avatar + message rows ===== */
.qa-bot-ava{position:relative;width:46px;height:46px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,#7FB2FF 0%,#CAF41C 55%,#A9D11F 100%);box-shadow:0 0 0 1px rgba(202,244,28,.5)}
.qa-bot-ava svg{animation:qaSpin 6s linear infinite}
.qa-sid{position:absolute;right:-6px;bottom:-6px;width:22px;height:22px;border-radius:50%;overflow:hidden;border:2px solid var(--s1)}
.qa-sid img{width:100%;height:100%;object-fit:cover;display:block}
.qa-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#CAF41C;margin-right:6px;vertical-align:1px;box-shadow:none}
@keyframes qaSpin{0%,80%{transform:rotate(0)}100%{transform:rotate(180deg)}}
.qa-row{display:flex;align-items:flex-end;gap:8px}
.qa-row.me{justify-content:flex-end}
.qa-row .qa-msg{max-width:84%}
.qa-bav{width:26px;height:26px;border-radius:9px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,#7FB2FF,#CAF41C 55%,#A9D11F);box-shadow:none}
.qa-bav svg{width:13px;height:13px}
.qa-row.bot:has(+ .qa-row.bot) .qa-bav{visibility:hidden}
.qa-summary{margin-left:34px}
@media (prefers-reduced-motion:reduce){.qa-bot-ava svg{animation:none}}


/* ===== UX: page transition, scroll progress, compact nav, back to top ===== */
.page.show{animation:pageIn .45s cubic-bezier(.2,.8,.2,1)}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.nav{transition:background .3s,box-shadow .3s}
.nav.scrolled{background:rgba(10,10,10,.92);box-shadow:0 10px 30px -12px rgba(0,0,0,.8)}
.nav .scroll-prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--blue),#7FB2FF);transform-origin:left;transform:scaleX(0);pointer-events:none}
.to-top{position:fixed;right:20px;bottom:calc(24px + env(safe-area-inset-bottom, 0px));z-index:55;width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);background:rgba(18,18,20,.9);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s,transform .3s,background .2s}
.to-top.on{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--blue);border-color:var(--blue)}
@media (max-width:960px){.to-top{bottom:calc(84px + env(safe-area-inset-bottom, 0px))}}
@media (prefers-reduced-motion:reduce){.page.show{animation:none}.to-top{transition:none}}

/* ===== Founders: dynamic cards ===== */
.founder.fx{position:relative;overflow:hidden;transform-style:preserve-3d;opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.8,.2,1) var(--d,0s),transform .7s cubic-bezier(.2,.8,.2,1) var(--d,0s),border-color .3s,box-shadow .3s}
.founder.fx.in{opacity:1;transform:none}
.founder.fx::before{content:"";position:absolute;inset:0;border-radius:inherit;background:none;opacity:0;transition:opacity .3s;pointer-events:none}
.founder.fx:hover{border-color:var(--blue-line);box-shadow:none}
.founder.fx:hover::before{opacity:1}
.founder.fx>*{position:relative}
.founder .ava-ring{position:absolute;inset:-5px;border-radius:50%;background:conic-gradient(from 0deg,var(--blue),#7FB2FF,transparent 40%,var(--blue) 70%,#7FB2FF);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));animation:avaSpin 6s linear infinite;opacity:.85}
.founder.fx:hover .ava-ring{animation-duration:1.6s;opacity:1}
@keyframes avaSpin{to{transform:rotate(360deg)}}
.founder-li{animation:liPulse 2.4s ease-in-out infinite}
@keyframes liPulse{0%,100%{box-shadow:0 0 0 0 rgba(10,102,194,.55)}50%{box-shadow:0 0 0 7px rgba(10,102,194,0)}}
.f-stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.f-stats span{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:12px;background:var(--s2);border:1px solid var(--line);transition:border-color .3s,transform .3s}
.founder.fx:hover .f-stats span{border-color:var(--blue-line)}
.f-stats span:hover{transform:translateY(-2px)}
.f-stats b{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--blue-t);font-variant-numeric:tabular-nums}
.f-stats small{font-size:11px;color:var(--subtle)}
.li-btn .li-arrow{display:inline-block;transition:transform .25s;margin-left:2px}
.li-btn:hover .li-arrow{transform:translate(3px,-3px)}
@media (prefers-reduced-motion:reduce){.founder.fx{opacity:1;transform:none;transition:none}.founder .ava-ring,.founder-li{animation:none}}

/* ===== Home hero: real Inspiration / Yours videos ===== */
.stack3d .c .hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#0c0e08}
.stack3d .c .tag{z-index:2}
.stack3d .c.back{filter:saturate(.85) brightness(.9)}

/* production hero videos */
.morph .face .hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#0c0e08}
.morph .face .tag{z-index:2}

/* hooks section videos */
.frame.hk{height:260px!important}
.frame.hk .hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#0c0e08}
.frame.hk .tag{z-index:2}
@media (max-width:600px){.frame.hk{height:220px!important}}

/* ideation: real ad thumbnails in the boxes */
.art.has-img{background-size:cover!important;background-position:center 30%!important;background-repeat:no-repeat!important}
.art.has-img::after{display:none}
.art.has-img.yours{box-shadow:inset 0 0 0 2px rgba(202,244,28,.55)}
.art.has-img{animation:artIn .5s ease both}
@keyframes artIn{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
.wall3d .fchip{position:relative}

.art .art-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block;pointer-events:none;border-radius:inherit}

/* ===== HOW IT WORKS: real product visuals + motion ===== */
.rs-screen{margin-top:14px;border-radius:14px;overflow:hidden;border:1px solid var(--blue-line,rgba(202,244,28,.35));background:#090a06;box-shadow:0 24px 60px rgba(0,0,0,.5);transform:perspective(1200px) rotateX(4deg);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.rs-card:hover .rs-screen{transform:perspective(1200px) rotateX(0) translateY(-4px)}
.rs-screen .sbar{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#11140a;border-bottom:1px solid var(--line2);font:600 11px Inter,sans-serif;color:#B9C49A}
.rs-screen .sbar i{width:8px;height:8px;border-radius:50%;background:#2a3446}.rs-screen .sbar i:first-child{background:#D9FF6B}
.rs-screen .sbar span{margin-left:8px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-screen .sbar b{color:#D9FF6B;font-size:10px;letter-spacing:.08em;display:flex;align-items:center;gap:5px}
.rs-screen .sbar b::before{content:"";width:6px;height:6px;border-radius:50%;background:#D9FF6B;animation:liPulse 1.6s infinite}
.rs-view{position:relative;aspect-ratio:1806/898}
.rs-view .hero-vid,.swapcard .frame .hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#090a06}
.swapcard .frame .tag{z-index:2}
.rs-tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.rs-tags .chip{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.rs-card.in .rs-tags .chip{opacity:1;transform:none}
.rs-card.in .rs-tags .chip:nth-child(2){transition-delay:.15s}.rs-card.in .rs-tags .chip:nth-child(3){transition-delay:.3s}
.rs-count{margin-left:auto;font-size:11px}

/* loop caption mini visuals with real ads */
.thumb-bg{background-size:cover!important;background-position:center 30%!important}
.mv-cards span.thumb-bg{height:96px;margin-top:-6px}
.mv-cards span.win.thumb-bg{border:2px solid var(--blue);animation:popUp .4s ease forwards,winRing .6s ease 2.4s forwards}
@keyframes winRing{to{box-shadow:0 0 0 3px rgba(202,244,28,.35);transform:translateY(-4px)}}
.mv-prod .c.thumb-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.45))}
.mv-mult span.thumb-bg{border-color:rgba(202,244,28,.6)}

/* thumbnails riding with each orbit node */
.node .nthumbs{position:absolute;bottom:calc(100% - 4px);left:50%;width:0;height:0;pointer-events:none}
.node .nthumbs i{position:absolute;bottom:0;width:34px;height:60px;border-radius:7px;background-size:cover;background-position:center 30%;border:1px solid rgba(255,255,255,.18);box-shadow:0 8px 20px rgba(0,0,0,.5);transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .6s;opacity:.0}
.node .nthumbs i:nth-child(1){transform:translate(-62px,8px) rotate(-14deg)}
.node .nthumbs i:nth-child(2){transform:translate(-17px,-2px)}
.node .nthumbs i:nth-child(3){transform:translate(28px,8px) rotate(14deg)}
.node.on .nthumbs i{opacity:1}
.node.on .nthumbs i:nth-child(1){transform:translate(-70px,-6px) rotate(-16deg)}
.node.on .nthumbs i:nth-child(2){transform:translate(-17px,-18px);border:2px solid var(--blue);box-shadow:none}
.node.on .nthumbs i:nth-child(3){transform:translate(36px,-6px) rotate(16deg)}

/* memory ring: the ads it remembers, orbiting the core */
.mem-ring{position:absolute;inset:-40px;border-radius:50%;pointer-events:none}
.mem-ring i{position:absolute;left:50%;top:50%;width:26px;height:44px;margin:-22px 0 0 -13px;border-radius:6px;background-size:cover;background-position:center 30%;border:1px solid rgba(202,244,28,.55);box-shadow:none;animation:memBob 4s ease-in-out infinite}
.mem-ring i:nth-child(even){animation-delay:-2s}
@keyframes memBob{50%{translate:0 -5px}}
@keyframes memSpin{to{transform:rotate(360deg)}}
.mem-ring i.learn{animation:memBob 4s ease-in-out infinite,learnPop .9s ease}
@keyframes learnPop{0%{box-shadow:0 0 0 0 rgba(202,244,28,.9)}100%{box-shadow:none}}

/* variations grid lights up with real variations */
#how-grid span{position:relative;overflow:hidden;background-size:cover;background-position:center 30%;transition:border-color .4s,transform .4s,box-shadow .4s,filter .4s}
#how-grid span.filled{filter:saturate(.75) brightness(.8)}
#how-grid span.live{filter:none;border-color:#D9FF6B;transform:scale(1.08);box-shadow:none;z-index:2}
#how-grid span video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;animation:artIn .5s ease both}

/* memory card */
.mem-card .mrow{opacity:0;transform:translateX(-12px);transition:opacity .5s,transform .5s}
.mem-card.in .mrow{opacity:1;transform:none}
.mem-card.in .mrow:nth-child(2){transition-delay:.25s}.mem-card.in .mrow:nth-child(3){transition-delay:.5s}
.mem-card #memBar{width:0!important;transition:width 1.6s cubic-bezier(.2,.7,.2,1) .7s}
.mem-card.in #memBar{width:88%!important}
.mem-card .mrow .mthumbs{display:inline-flex;margin-left:10px;vertical-align:middle}
.mem-card .mrow .mthumbs i{width:18px;height:30px;border-radius:4px;background-size:cover;background-position:center 30%;border:1px solid var(--line2);margin-left:-6px}
.mem-card .mrow .mthumbs i:first-child{margin-left:0}
@media (prefers-reduced-motion: reduce){.mem-ring,.mem-ring i{animation:none}.rs-tags .chip,.mem-card .mrow{opacity:1;transform:none}}
@media (max-width:600px){.node .nthumbs i{width:26px;height:46px}.mem-ring{inset:-24px}.mem-ring i{width:20px;height:34px;margin:-17px 0 0 -10px}}

/* ===== How it works: overview box + product film ===== */
.how-head{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:40px;align-items:end}
.ov-box{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:var(--s1);border:1px solid var(--blue-line,rgba(202,244,28,.35));box-shadow:0 20px 60px rgba(0,0,0,.45);text-decoration:none;color:var(--text);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s;margin-bottom:6px}
.ov-box:hover{transform:translateY(-4px);border-color:var(--blue);box-shadow:0 26px 70px rgba(0,0,0,.5)}
.ov-thumb{position:relative;display:block;aspect-ratio:16/9;background:#05070a;overflow:hidden}
.ov-thumb .hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ov-play{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;box-shadow:none;animation:ovPulse 2.2s ease-in-out infinite}
.ov-play svg{margin-left:3px}
@keyframes ovPulse{50%{box-shadow:none}}
.ov-dur{position:absolute;right:10px;bottom:10px;font:600 11px Inter,sans-serif;padding:4px 8px;border-radius:8px;background:rgba(0,0,0,.65);color:#fff}
.ov-txt{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px}
.ov-k{font:600 11px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-t)}
.ov-txt strong{font-size:17px;line-height:1.35}
.ov-go{font-size:14px;font-weight:700;color:var(--blue-t)}
.ov-player{position:relative;max-width:1040px;margin:48px auto 0;border-radius:24px;overflow:hidden;border:2px solid var(--blue);background:#000;aspect-ratio:16/9;box-shadow:0 40px 120px rgba(0,0,0,.6)}
.ov-player video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:#000}
.ov-big{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:14px;padding:16px 26px 16px 20px;border-radius:100px;border:none;background:var(--blue);color:#fff;font:700 16px Inter,sans-serif;cursor:pointer;box-shadow:none;transition:transform .25s,opacity .3s}
.ov-big:hover{transform:translate(-50%,-50%) scale(1.05)}
.ov-player.playing .ov-big{opacity:0;pointer-events:none}
.ov-chaps{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
.ov-chaps button{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:100px;background:var(--s1);border:1px solid var(--line2);color:var(--muted);font:600 13px Inter,sans-serif;cursor:pointer;transition:border-color .3s,color .3s,background .3s}
.ov-chaps button b{font:600 11px Inter,sans-serif;color:var(--blue-t)}
.ov-chaps button:hover,.ov-chaps button.on{border-color:var(--blue);color:var(--text);background:rgba(202,244,28,.14)}
@media (max-width:900px){.how-head{grid-template-columns:1fr;gap:24px}.ov-box{flex-direction:row;align-items:center;margin:0}.ov-thumb{width:46%;flex-shrink:0}.ov-txt{padding:12px 14px}.ov-txt strong{font-size:15px}.ov-play{width:44px;height:44px;margin:-22px 0 0 -22px}}
@media (max-width:600px){.ov-big{padding:12px 18px 12px 14px;font-size:14px}.ov-big svg{width:24px;height:24px}.ov-player{border-radius:16px;margin-top:32px}}
#home-ex .frame.made.has-v .tag{background:var(--blue);color:#fff;border-color:var(--blue)}

/* ===== "Checked three ways" visuals ===== */
.qm{position:relative;height:220px;border-radius:14px;overflow:hidden;background:var(--s2);border:1px solid var(--line2)}
.qm video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* 1. scan */
.qm-scan video{object-position:center 35%;filter:saturate(1.05)}
.qm-scan::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(202,244,28,.0),rgba(8,10,20,.35))}
.qm-line{position:absolute;left:0;right:0;height:3px;top:0;z-index:2;background:#D9FF6B;box-shadow:none;animation:qmScan 4s ease-in-out infinite}
@keyframes qmScan{0%{top:0}45%{top:calc(100% - 3px)}55%,100%{top:calc(100% - 3px);opacity:0}}
.qm-checks{position:absolute;left:12px;top:12px;z-index:3;display:flex;flex-direction:column;gap:6px}
.qm-checks span{font:600 11px Inter,sans-serif;padding:5px 9px;border-radius:8px;background:rgba(10,12,20,.82);border:1px solid rgba(202,244,28,.5);color:#EFFFC4;opacity:0;animation:qmTick 4s ease infinite}
.qm-checks span:nth-child(2){animation-delay:.35s}.qm-checks span:nth-child(3){animation-delay:.7s}.qm-checks span:nth-child(4){animation-delay:1.05s}
@keyframes qmTick{0%,8%{opacity:0;transform:translateX(-8px)}14%,88%{opacity:1;transform:none}100%{opacity:0}}
.qm-stamp{position:absolute;right:14px;bottom:14px;z-index:3;font:800 13px Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;padding:8px 14px;border-radius:10px;border:2px solid #D9FF6B;color:#fff;background:rgba(202,244,28,.85);box-shadow:none;opacity:0;transform:rotate(-8deg) scale(1.6);animation:qmStamp 4s ease infinite}
@keyframes qmStamp{0%,48%{opacity:0;transform:rotate(-8deg) scale(1.6)}56%,90%{opacity:1;transform:rotate(-8deg) scale(1)}100%{opacity:0}}
/* 2. identity */
.qm-id{display:flex;flex-direction:column;gap:10px;padding:12px}
.qm-kit{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line2)}
.qm-face{width:30px;height:30px;border-radius:50%;background-size:cover;background-position:center;border:2px solid var(--blue)}
.qm-sw{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.25);animation:qmSw 3.6s ease-in-out infinite}
.qm-sw:nth-of-type(3){animation-delay:.3s}.qm-sw:nth-of-type(4){animation-delay:.6s}.qm-sw:nth-of-type(5){animation-delay:.9s}
@keyframes qmSw{0%,70%,100%{transform:none}80%{transform:scale(1.3)}}
.qm-aa{font-weight:800;font-size:16px;margin-left:4px}
.qm-kl{margin-left:auto;font:600 10px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-t)}
.qm-frames{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.qm-f{position:relative;border-radius:10px;overflow:hidden;border:2px solid var(--line2);animation:qmHi 3.6s ease-in-out infinite;animation-delay:calc(var(--d) * 1.2s)}
.qm-f span{position:absolute;left:6px;bottom:6px;z-index:2;font:600 9px Inter,sans-serif;padding:3px 6px;border-radius:6px;background:rgba(10,12,20,.8);color:#EFFFC4}
@keyframes qmHi{0%,40%,100%{border-color:var(--line2);box-shadow:none}10%,30%{border-color:#D9FF6B;box-shadow:none}}
/* 3. story */
.qm-story{padding:12px 12px 12px 74px;display:flex;flex-direction:column;gap:8px}
.qm-beats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.qm-beats span{font:600 10px Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;text-align:center;color:var(--blue-t)}
.qm-strip{position:relative;flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.qm-strip em{position:absolute;left:-64px;top:50%;transform:translateY(-50%);font:600 10px Inter,sans-serif;font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--subtle)}
.qm-strip.yours em{color:var(--blue-t)}
.qm-strip i{border-radius:8px;background-size:cover;background-position:center 30%;border:1px solid var(--line2)}
.qm-strip.yours i{border:2px solid var(--blue)}
.qm-head{position:absolute;top:28px;bottom:10px;left:74px;width:2px;background:#fff;box-shadow:none;animation:qmHead 4.5s linear infinite;z-index:2}
@keyframes qmHead{from{left:74px}to{left:calc(100% - 14px)}}
@media (prefers-reduced-motion: reduce){.qm-line,.qm-checks span,.qm-stamp,.qm-sw,.qm-f,.qm-head{animation:none}.qm-checks span,.qm-stamp{opacity:1}}

/* ===== Creative multiplication: real media ===== */
[data-page="multiplication"] video.mxv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}
[data-page="multiplication"] .hk span,[data-page="multiplication"] .rx-hk b,[data-page="multiplication"] .frame .tag,[data-page="multiplication"] .concept .tag{z-index:2}
.matrix3d .concept .tag{position:absolute;top:10px;left:10px}
.matrix3d .wall span.mx-img,.rx-out span.mx-img{background-size:cover;background-position:center 30%}
.matrix3d .wall span.mx-img{border-color:rgba(202,244,28,.55)}
.mx-count{position:absolute;right:2%;bottom:-6px;z-index:4;display:flex;align-items:baseline;gap:10px;padding:10px 18px;border-radius:16px;background:rgba(10,12,20,.85);border:1px solid var(--blue-line);box-shadow:none}
.mx-count b{font-size:34px;font-weight:800;letter-spacing:-.03em;color:var(--blue-t)}
.mx-count span{font:600 11px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rx-skins .frame.has-v{background:#000!important}
.rx-fan .frame.has-v .tag{z-index:2}
.vx.vxr{background:#0c0e08}
.vx.vxr .vxi{position:absolute;inset:0;background-size:cover;background-position:center 30%;transition:filter .4s}
.vx.vxr .vxl{position:absolute;top:auto;bottom:8px;left:8px;z-index:2;font-size:8.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:rgba(10,12,20,.8);color:#fff;border-radius:100px;padding:3px 8px;border:1px solid rgba(202,244,28,.5)}
.vx.vxr.base .vxl{background:var(--blue);border-color:var(--blue)}
.vx.vxr.off .vxi{filter:grayscale(.6) brightness(.6)}
.vx.vxr.off .vxl{color:var(--muted);border-color:var(--line2)}
#mult-grid span.mx-img{background-size:cover;background-position:center 30%;filter:saturate(.8) brightness(.85);transition:transform .35s,filter .35s,box-shadow .35s,border-color .35s}
#mult-grid span.mx-img.hot{filter:none;transform:scale(1.12);border-color:#D9FF6B;box-shadow:none;position:relative;z-index:2}
@media (max-width:960px){.mx-count{position:relative;right:auto;bottom:auto;margin:14px auto 0;width:max-content}}
/* production flow: picked -> your style pairs */
.pr-pairs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pr-row{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center}
.pr-ar{color:var(--blue-t);font-weight:800;font-size:20px}
[data-page="production"] .flow-stage .frame.has-v .tag{z-index:2}
[data-page="production"] .flow-stage .frame.made.has-v .tag{background:var(--blue);color:#fff;border-color:var(--blue)}
@media (max-width:600px){.pr-pairs{grid-template-columns:1fr}}

/* ===== Editable template with the real gameplay in 3D layers ===== */
.layers3d.tpl{height:700px}
.layers3d.tpl .stack{top:62%;width:300px;height:541px;margin:-270px 0 0 -150px}
.layers3d.tpl .ly{background:transparent!important;overflow:visible}
.layers3d.tpl .l0{background:#05070c!important}
.layers3d.tpl .tpl-cv{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;display:block}
.layers3d.tpl .l1 .tpl-cv,.layers3d.tpl .l2 .tpl-cv,.layers3d.tpl .l3 .tpl-cv,.layers3d.tpl .l4 .tpl-cv{filter:drop-shadow(0 10px 18px rgba(0,0,0,.55))}
.layers3d.tpl.open .l0 .tpl-cv{opacity:.55}
.layers3d.tpl.shut .l0 .tpl-cv{opacity:1}
.layers3d.tpl .l2{border-color:rgba(202,244,28,.35)}
.layers3d.tpl.open .ly{border-color:rgba(202,244,28,.35)}
.layers3d.tpl.shut .ly:not(.l0){border-color:transparent;box-shadow:none}
.layers3d.tpl .l4{border-style:dashed}
.tpl-src{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;left:0;top:0}
@media (max-width:600px){.layers3d.tpl{height:500px}.layers3d.tpl .stack{width:200px;height:361px;margin:-180px 0 0 -100px}}
.frame.tplf .tag{z-index:2}.frame.tplf video{object-position:center 45%}

/* ===== LEAN COPY: media-heavy additions ===== */
.mq-sec{padding:8px 0 40px;overflow:hidden}
.mq{display:flex;flex-direction:column;gap:14px;transform:rotate(-2deg);margin:0 -40px}
.mq-row{overflow:hidden}
.mq-track{display:flex;gap:14px;width:max-content;animation:mqMove 60s linear infinite}
.mq-row.r2 .mq-track{animation-duration:80s;animation-direction:reverse}
.mq:hover .mq-track{animation-play-state:paused}
@keyframes mqMove{to{transform:translateX(-50%)}}
.mq-t{position:relative;width:170px;height:302px;border-radius:18px;overflow:hidden;flex-shrink:0;background:#0c0e08 center 30%/cover;border:1px solid var(--line2);box-shadow:0 20px 50px rgba(0,0,0,.45)}
.mq-row.r2 .mq-t{width:130px;height:231px;opacity:.85}
.mq-t video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mq-cap{text-align:center;margin:26px 0 0;font-size:14px;color:var(--subtle)}
.hfilm{position:relative;max-width:1080px;margin:40px auto 0;aspect-ratio:16/9;border-radius:24px;overflow:hidden;border:2px solid var(--blue);background:#000;box-shadow:0 40px 120px rgba(0,0,0,.6)}
.hfilm video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.hfilm-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;padding:16px 26px 16px 20px;border:none;border-radius:100px;background:var(--blue);color:#fff;font:700 16px Inter,sans-serif;cursor:pointer;box-shadow:none}
.hfilm.playing .hfilm-play{opacity:0;pointer-events:none}
.gf-m,.lc-m{position:relative;border-radius:14px;overflow:hidden;background:#0c0e08;margin-bottom:16px}
.gf-m{aspect-ratio:4/5}
.lc-m{aspect-ratio:16/10;margin:-4px -4px 8px}
.gf-m video,.lc-m video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gf-m .tag{z-index:2}
.bw-m{position:relative;aspect-ratio:16/10;border-radius:14px;margin:-8px -8px 18px;background:#0c0e08 center 30%/cover;filter:grayscale(.7) brightness(.6)}
.bw-x{position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:50%;background:#e5484d;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;filter:none}
.bw-m .tag{bottom:12px;top:auto;left:12px}
@media (max-width:600px){.mq-t{width:120px;height:213px}.mq-row.r2 .mq-t{width:96px;height:171px}}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}}
/* lean pass 2 */
.quote-ava{width:84px;height:84px;border-radius:50%;object-fit:cover;border:2px solid var(--blue);margin-bottom:18px;display:block}
.mrow .mthumbs{display:inline-flex;margin-left:10px;vertical-align:middle}
.mrow .mthumbs i{width:18px;height:30px;border-radius:4px;background-size:cover;background-position:center 30%;border:1px solid var(--line2);margin-left:-6px}
.mrow .mthumbs i:first-child{margin-left:0}
.mt-m{position:relative;aspect-ratio:16/10;border-radius:12px;margin:-8px -8px 16px;background:#0c0e08 center 30%/cover}
.mt-m b{position:absolute;left:10px;bottom:10px;font:700 13px Inter,sans-serif;padding:6px 10px;border-radius:8px;background:rgba(202,244,28,.9);color:#fff}
.uc-sit{display:none}
.uc-steps li:nth-child(n+4){display:none}
[data-page="how"] section:nth-of-type(2) .ya-list{display:none}
.fstep p{display:none}.fstep h3{margin-bottom:0}

/* ===== black + green (lime) theme ===== */
:root{--on-lime:#0A0A0A}
.btn-p,.btn.btn-p{color:#0A0A0A!important}
.made .tag,.tag[style*="var(--blue)"],.frame.made .tag,.vx.vxr.base .vxl,.vx b,.mt-m b,.ov-play,.hfilm-play,.ov-big,.pill.on,.pills .on,.chip-on,.li-btn,.qa-bot-ava,.book-cta,.qa-cta,.rbtn,.loop-steps button.on,.node.on .orb,.logo i,.m-cta a:first-child{color:#0A0A0A}
.hfilm-play svg,.ov-play svg,.ov-big svg{fill:#0A0A0A}
.made .tag,.frame.made.has-v .tag,#home-ex .frame.made.has-v .tag,[data-page="production"] .flow-stage .frame.made.has-v .tag{color:#0A0A0A!important}

/* =====================================================================
   UI UPGRADE · design system (tokens, buttons, icons, cards, motion)
   ===================================================================== */
:root{
  --bg:#0A0A0A; --surface-1:#121214; --surface-2:#18181B; --surface-3:#232327;
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.14);
  --text:#FAFAFA; --muted:#A1A1AA; --subtle:#8B8B94;
  --primary:#CAF41C; --primary-hover:#D6F76A; --on-primary:#0A0A0A; --primary-soft:rgba(202,244,28,.12); --primary-line:rgba(202,244,28,.38);
  --success:#4ADE80; --error:#F87171;
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(0,0,0,.3); --sh-md:0 8px 24px rgba(0,0,0,.4);
  --sh-glow:0 0 0 1px rgba(202,244,28,.5);
  --ease:cubic-bezier(.2,.7,.2,1); --t-fast:180ms; --t-med:250ms; --t-slow:500ms;
}
/* ---------- buttons ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;gap:10px;border-radius:var(--r-pill);font-weight:700;letter-spacing:-.01em;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background-color var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.btn svg{width:18px;height:18px;flex-shrink:0;stroke-width:1.75}
.btn .ic-arrow{transition:transform var(--t-fast) var(--ease)}
.btn:hover .ic-arrow{transform:translateX(3px)}
.btn:active{transform:scale(.97)!important}
.btn[disabled],.btn.is-disabled{opacity:.4;pointer-events:none}
.btn.is-loading .ic-arrow{display:none}
.btn.is-loading::before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite;order:2}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-p{background:var(--primary);color:var(--on-primary)!important;box-shadow:var(--sh-glow)}
.btn-p:hover{background:var(--primary-hover);transform:translateY(-2px);box-shadow:0 0 0 1px rgba(202,244,28,.7)}
.btn-p::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);animation:shine 6s var(--ease) infinite}
@keyframes shine{0%,82%{transform:translateX(-120%)}97%,100%{transform:translateX(120%)}}
.btn-s{background:transparent;color:var(--text);border:1px solid var(--line-strong)}
.btn-s:hover{border-color:var(--muted);background:rgba(255,255,255,.04);transform:translateY(-1px)}
.btn-lg{min-height:56px;padding:0 30px;font-size:16px}
.nav-book{min-height:44px;padding:0 20px;font-size:14px}
.nav-book svg{width:16px;height:16px}
.btns{gap:12px;flex-wrap:wrap}
.trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin:18px 0 0;font-size:13px;color:var(--subtle)}
.trust span{display:inline-flex;align-items:center;gap:6px}
.trust span::before{content:"";width:14px;height:14px;background:var(--primary);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%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 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
.cta .trust{justify-content:center}
.sec-cta{display:flex;justify-content:center;margin-top:40px}
/* tertiary links */
a.go{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--primary);font-weight:700;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 10px)/0 1.5px no-repeat;transition:background-size var(--t-med) var(--ease)}
a.go:hover{background-size:calc(100% - 22px) 1.5px}
a.go svg{width:16px;height:16px;stroke-width:2;transition:transform var(--t-fast) var(--ease)}
a.go:hover svg{transform:translateX(3px)}
/* ---------- focus + tap targets ---------- */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,.pill:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:inherit}
.btn:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.fbtn{min-height:44px;display:inline-flex;align-items:center;gap:6px}
.fbtn svg,.pill svg{width:16px;height:16px;stroke-width:1.75}
.pill{display:inline-flex;align-items:center;gap:8px}
.toggle{position:relative}.toggle::before{content:"";position:absolute;inset:-8px -4px}
.li-btn{min-height:44px}
/* ---------- icon tiles ---------- */
.ic-tile{width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:var(--primary-soft);color:var(--primary);border:1px solid rgba(202,244,28,.18);margin-bottom:14px;transition:transform var(--t-med) var(--ease)}
.ic-tile svg{width:20px;height:20px;stroke-width:1.75}
.card:hover .ic-tile,.link-card:hover .ic-tile,.metric:hover .ic-tile{transform:rotate(-8deg) scale(1.06)}
.ic-li{display:inline-flex;color:var(--primary);flex-shrink:0;margin-top:2px}.ic-li svg{width:20px;height:20px;stroke-width:1.75}
/* ---------- cards ---------- */
.card,.link-card,.metric{border-radius:var(--r-lg);border-color:var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);transition:transform var(--t-med) var(--ease),border-color var(--t-med),box-shadow var(--t-med)}
.link-card:hover,.gf-card:hover,.bw-card:hover,#home-ex .card:hover,.metric:hover,.rx:hover{transform:translateY(-4px);border-color:var(--primary-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 50px rgba(0,0,0,.45),0 0 0 1px rgba(202,244,28,.12)}
.frame,.gf-m,.lc-m,.bw-m,.mt-m{border-radius:var(--r-md)}
.frame video,.gf-m video,.lc-m video{transition:transform 600ms var(--ease)}
.card:hover .frame video,.gf-card:hover .gf-m video,.link-card:hover .lc-m video{transform:scale(1.03)}
/* ---------- table + faq icons ---------- */
.ic-ok,.ic-no{display:inline-block;width:18px;height:18px;vertical-align:middle;background:currentColor}
.ic-ok{color:var(--primary);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%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 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
.ic-no{color:var(--subtle);opacity:.6;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%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 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center/contain no-repeat}
.mx .mx-head>div:nth-child(2){box-shadow:inset 0 3px 0 var(--primary)}
.qa{min-height:56px}
.qa-ic{position:relative;width:20px;height:20px;flex-shrink:0;color:var(--primary)}
.qa-ic::before,.qa-ic::after{content:"";position:absolute;left:3px;right:3px;top:9px;height:2px;border-radius:2px;background:currentColor;transition:transform var(--t-med) var(--ease)}
.qa-ic::after{transform:rotate(90deg)}
.qa[aria-expanded="true"] .qa-ic::after{transform:rotate(0)}
/* ---------- navbar ---------- */
.nav{transition:background-color 300ms,border-color 300ms,backdrop-filter 300ms}
.nav:not(.scrolled){background:rgba(10,10,10,.25);border-bottom-color:transparent;backdrop-filter:blur(6px)}
.nav.scrolled{background:rgba(10,10,10,.72);backdrop-filter:blur(16px) saturate(140%);border-bottom-color:var(--line)}
.menu .mi{position:relative}
.menu .mi.active>a,.menu .mi.active>button{color:var(--text)}
.menu .mi.active::after{content:"";position:absolute;left:50%;bottom:2px;width:4px;height:4px;border-radius:50%;background:var(--primary);transform:translateX(-50%)}
.mi>button svg{transition:transform var(--t-fast)}
.mi:hover>button svg,.mi.open>button svg{transform:rotate(180deg)}
.mob-cta{display:none}
@media (max-width:960px){.menu.mob .mob-cta{display:inline-flex;width:100%;margin-top:16px}}
/* ---------- hero + final CTA atmosphere ---------- */
[data-page="home"] .hero{position:relative}
[data-page="home"] .hero::before{content:"";position:absolute;right:6%;top:8%;width:620px;height:620px;border-radius:50%;background:none;filter:blur(10px);animation:heroGlow 9s ease-in-out infinite alternate;pointer-events:none}
@keyframes heroGlow{to{transform:translate(-40px,30px) scale(1.12);opacity:.75}}
.cta{position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:-40%;background:none;animation:mesh 18s linear infinite;pointer-events:none}
@keyframes mesh{to{transform:rotate(360deg)}}
/* ---------- staggered reveal ---------- */
.g3>.rv:nth-child(2),.g4>.rv:nth-child(2),.g2>.rv:nth-child(2){transition-delay:80ms}
.g3>.rv:nth-child(3),.g4>.rv:nth-child(3){transition-delay:160ms}
.g4>.rv:nth-child(4){transition-delay:240ms}
.rv{transition-duration:500ms!important}
/* ---------- booking chat inputs ---------- */
.qa-input input,.qa-input textarea,#qaInput input{min-height:48px;border-radius:var(--r-sm)}
.qa-input input:focus,#qaInput input:focus{outline:none;border-color:var(--primary)!important;box-shadow:none}
/* ---------- mobile ---------- */
@media (max-width:480px){
  .hero .btns .btn,.cta .btns .btn,.sec-cta .btn{width:100%}
  .trust{gap:6px 14px}
}
@media (prefers-reduced-motion:reduce){
  .btn-p::after,[data-page="home"] .hero::before,.cta::before{animation:none}
  .btn,.card,.link-card,.ic-tile,a.go svg{transition:none!important}
}

/* ===== Home examples: moving row, right to left ===== */
.ex-marquee{width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;padding:12px 0 20px;-webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
#home-ex{display:flex!important;width:max-content;gap:20px;margin:0;animation:exMove 48s linear infinite}
.ex-marquee:hover #home-ex{animation-play-state:paused}
#home-ex>.card{flex:0 0 clamp(300px,24vw,440px)}
#home-ex .frame{height:auto!important;aspect-ratio:9/16}
@keyframes exMove{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 10px))}}
@media (max-width:600px){#home-ex>.card{flex-basis:78vw}#home-ex{animation-duration:36s}}
@media (prefers-reduced-motion:reduce){#home-ex{animation:none}.ex-marquee{overflow-x:auto}}
.m-cta .btn{white-space:nowrap;gap:8px}.m-cta .btn svg{width:16px;height:16px}

/* ===== Problem cards: visuals that show each failure ===== */
.bw-v{position:relative;aspect-ratio:16/10;border-radius:14px;margin:-8px -8px 18px;overflow:hidden;background:radial-gradient(ellipse at 50% 0%,rgba(248,113,113,.10),transparent 60%),var(--surface-2);border:1px solid var(--line)}
.bw-v .bw-x{position:absolute;right:10px;top:10px;z-index:5;width:30px;height:30px;font-size:14px;background:#dc2626;box-shadow:0 0 0 4px rgba(220,38,38,.18)}
/* 1 · weeks of production */
.pv1{display:flex;flex-direction:column;padding:16px 18px 14px;gap:8px}
.pv1-cal{display:flex;flex-direction:column;gap:6px}
.pv1-row{display:grid;grid-template-columns:56px 1fr;align-items:center;gap:10px;font-size:13px;color:var(--muted);opacity:.25;animation:pvRow 7s ease infinite;animation-delay:calc(var(--i) * .9s)}
.pv1-row b{font:600 11px Inter,sans-serif;color:var(--subtle);letter-spacing:.04em}
.pv1-row span{padding:5px 10px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
@keyframes pvRow{0%{opacity:.25}8%,88%{opacity:1}100%{opacity:.25}}
.pv1-bar{height:4px;border-radius:4px;background:rgba(255,255,255,.06);overflow:hidden;margin-top:2px}
.pv1-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#a1a1aa,#f87171);transform-origin:left;transform:scaleX(0);animation:pvBar 7s ease infinite}
@keyframes pvBar{0%{transform:scaleX(0)}55%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.pv1-out{display:flex;align-items:center;gap:10px;margin-top:auto;opacity:0;animation:pvOut 7s ease infinite}
.pv1-ad{width:22px;height:38px;border-radius:5px;background:url(assets/ideation/h12.jpg) center/cover;border:1px solid var(--line-strong)}
.pv1-out em{font:700 12px Inter,sans-serif;font-style:normal;color:#fca5a5;padding:5px 10px;border-radius:999px;background:rgba(220,38,38,.16);border:1px solid rgba(248,113,113,.4)}
@keyframes pvOut{0%,55%{opacity:0;transform:translateY(6px)}62%,92%{opacity:1;transform:none}100%{opacity:0}}
/* 2 · copy the competitor */
.pv2{display:flex;align-items:center;justify-content:center;gap:14px;padding:14px}
.pv2-ph{position:relative;height:100%;aspect-ratio:9/16;border-radius:12px;overflow:hidden;border:1px solid var(--line-strong);background:#000}
.pv2-ph video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pv2-l{position:absolute;left:6px;top:6px;z-index:2;font:600 9px Inter,sans-serif;letter-spacing:.05em;text-transform:uppercase;padding:3px 7px;border-radius:6px;background:rgba(10,10,10,.75);color:#fff}
.pv2-eq{font-size:26px;font-weight:800;color:var(--subtle)}
.pv2-ph.copy{border-color:rgba(248,113,113,.6)}
.pv2-logo{position:absolute;left:50%;bottom:26%;transform:translateX(-50%);z-index:2;font:800 10px Inter,sans-serif;letter-spacing:.06em;white-space:nowrap;padding:3px 7px;border-radius:5px;background:#1e40af;color:#fff;box-shadow:0 0 0 2px rgba(248,113,113,.0);animation:pvLogo 4s ease infinite}
@keyframes pvLogo{0%,40%{box-shadow:0 0 0 0 rgba(248,113,113,0)}55%,85%{box-shadow:0 0 0 3px #f87171}100%{box-shadow:0 0 0 0 rgba(248,113,113,0)}}
.pv2-stamp{position:absolute;left:50%;top:50%;z-index:3;font:800 10px Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:#fecaca;padding:5px 8px;border:2px solid #f87171;border-radius:6px;background:rgba(127,29,29,.75);transform:translate(-50%,-50%) rotate(-12deg) scale(1.6);opacity:0;animation:pvStamp 4s ease infinite}
@keyframes pvStamp{0%,30%{opacity:0;transform:translate(-50%,-50%) rotate(-12deg) scale(1.6)}40%,90%{opacity:1;transform:translate(-50%,-50%) rotate(-12deg) scale(1)}100%{opacity:0}}
/* 3 · generic AI */
.pv3{display:flex;flex-direction:column;gap:10px;padding:14px 16px}
.pv3-prompt{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--line-strong);font-size:12px;color:var(--text);min-width:0}
.pv3-n{flex-shrink:0;font:700 10px Inter,sans-serif;color:#fca5a5;padding:3px 6px;border-radius:5px;background:rgba(220,38,38,.16)}
.pv3-t{white-space:nowrap;overflow:hidden;max-width:0;animation:pvType 6s steps(34) infinite}
@keyframes pvType{0%{max-width:0}40%,92%{max-width:100%}100%{max-width:0}}
.pv3-caret{width:2px;height:14px;background:var(--primary);flex-shrink:0;animation:pvBlink .8s steps(1) infinite}
@keyframes pvBlink{50%{opacity:0}}
.pv3-outs{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;min-height:0}
.pv3-o{position:relative;border-radius:10px;background-size:cover;background-position:center 30%;border:1px solid rgba(248,113,113,.45);overflow:hidden;opacity:0;animation:pvOutp 6s ease infinite}
.pv3-o.o1{filter:hue-rotate(140deg) saturate(1.4) contrast(1.1);transform:skewX(-6deg);animation-delay:0s}
.pv3-o.o2{filter:hue-rotate(260deg) saturate(2) blur(.6px);animation-delay:.25s}
.pv3-o.o3{filter:grayscale(.3) contrast(1.6) blur(1px);animation-delay:.5s}
.pv3-o b{position:absolute;right:5px;top:5px;width:18px;height:18px;border-radius:50%;background:#dc2626;color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;filter:none}
.pv3-o em{position:absolute;left:4px;right:4px;bottom:5px;font:600 9px Inter,sans-serif;font-style:normal;text-align:center;color:#fff;background:rgba(10,10,10,.8);border-radius:5px;padding:2px 0}
@keyframes pvOutp{0%,42%{opacity:0}50%,92%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.pv1-row,.pv1-bar i,.pv1-out,.pv2-logo,.pv2-stamp,.pv3-t,.pv3-o,.pv3-caret{animation:none;opacity:1;max-width:100%;transform:none}.pv1-bar i{transform:scaleX(1)}.pv2-stamp{transform:translate(-50%,-50%) rotate(-12deg)}}
.pv1{padding:12px 16px 12px;gap:6px}.pv1-cal{gap:4px}.pv1-row{font-size:12px}.pv1-row span{padding:3px 9px}
.pv1-out{margin-top:2px}.pv1-ad{width:18px;height:30px}
.pv2-l{font-size:8px;white-space:nowrap;padding:3px 5px}
.pv2-stamp{font-size:8px;padding:4px 6px}
.pv2-logo{font-size:9px}
.pv3-o{min-height:90px}
.pv3-o{background-size:0 0!important;filter:none!important}
.pv3-o::before{content:"";position:absolute;inset:0;background-image:inherit;background-size:cover;background-position:center 30%}
.pv3-o.o1::before{filter:hue-rotate(140deg) saturate(1.4) contrast(1.1)}
.pv3-o.o2::before{filter:hue-rotate(260deg) saturate(2) blur(.6px)}
.pv3-o.o3::before{filter:grayscale(.3) contrast(1.6) blur(1px)}
.pv3-o b,.pv3-o em{z-index:1}

/* ===== Recreate + Scale link-card visuals ===== */
.lc-rc,.lc-sc{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px;background:var(--surface-2)}
.rc-ph,.sc-base{position:relative;height:100%;aspect-ratio:9/16;border-radius:10px;overflow:hidden;border:1px solid var(--line-strong);background:#000;flex-shrink:0}
.rc-ph video,.sc-base video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rc-ph.b,.sc-base{border:2px solid var(--primary);box-shadow:none}
.rc-l{position:absolute;left:5px;top:5px;z-index:2;font:700 8px Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:3px 6px;border-radius:5px;background:rgba(10,10,10,.78);color:#fff}
.rc-l.y{background:var(--primary);color:#0A0A0A}
.rc-mid{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;width:84px}
.rc-btn{display:inline-flex;align-items:center;gap:5px;font:700 11px Inter,sans-serif;padding:6px 10px;border-radius:999px;background:var(--primary);color:#0A0A0A;box-shadow:0 0 0 0 rgba(202,244,28,.5);animation:rcPulse 3s ease infinite;white-space:nowrap}
.rc-btn svg{width:12px;height:12px}
@keyframes rcPulse{0%,20%{box-shadow:0 0 0 0 rgba(202,244,28,.55);transform:scale(1)}28%{transform:scale(.92)}45%{box-shadow:none;transform:scale(1)}100%{box-shadow:0 0 0 0 rgba(202,244,28,0)}}
.rc-beam{display:block;width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--primary),transparent);background-size:200% 100%;animation:rcBeam 1.4s linear infinite}
@keyframes rcBeam{from{background-position:100% 0}to{background-position:-100% 0}}
.rc-scan{position:absolute;left:0;right:0;height:2px;top:0;z-index:2;background:var(--primary);box-shadow:none;animation:rcScan 3s ease-in-out infinite}
@keyframes rcScan{0%{top:0;opacity:1}60%{top:calc(100% - 2px);opacity:1}61%,100%{opacity:0}}
.sc-arrow{font-weight:800;color:var(--primary);font-size:18px}
.sc-grid{position:relative;height:100%;flex:1;display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:1fr;gap:4px;min-width:0}
.sc-grid i{border-radius:4px;background-size:cover;background-position:center 30%;border:1px solid rgba(202,244,28,.35);opacity:0;transform:scale(.4);animation:scPop 4.5s var(--ease) infinite;animation-delay:calc(var(--i) * 70ms)}
@keyframes scPop{0%{opacity:0;transform:scale(.4)}12%,85%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.9)}}
.sc-count{position:absolute;right:14px;bottom:12px;font:800 20px Inter,sans-serif;color:var(--primary);padding:2px 10px;border-radius:10px;background:rgba(10,10,10,.8);border:1px solid var(--primary-line)}
.lc-sc{position:relative}
@media (prefers-reduced-motion:reduce){.rc-btn,.rc-beam,.rc-scan,.sc-grid i{animation:none;opacity:1;transform:none}}

/* ===== Production · How recreation works (3 steps) ===== */
.rw1-row{display:grid;grid-template-columns:1fr auto 190px;align-items:center;gap:14px}
.rw1-drop{position:relative;height:338px;border-radius:16px;border:1.5px dashed var(--primary-line);background:var(--primary-soft);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:16px}
.rw1-ic{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(202,244,28,.18);color:var(--primary);animation:rwBob 2.4s ease-in-out infinite}
.rw1-ic svg{width:26px;height:26px}
@keyframes rwBob{50%{transform:translateY(-5px)}}
.rw1-drop b{font-size:16px}.rw1-drop small{color:var(--subtle);font-size:12px}
.rw1-file{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font:600 12px Inter,sans-serif;padding:6px 10px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line-strong)}
.rw1-file i{width:8px;height:8px;border-radius:50%;background:var(--primary)}
.rw1-bar{width:70%;height:4px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.rw1-bar i{display:block;height:100%;background:var(--primary);transform-origin:left;animation:rwUp 3.2s ease infinite}
@keyframes rwUp{0%{transform:scaleX(0)}70%,100%{transform:scaleX(1)}}
.rw1-or{font:600 12px Inter,sans-serif;color:var(--subtle);text-transform:uppercase}
.rw1-pick{height:338px!important;border:2px solid var(--primary)!important}
.rw1-ok{position:absolute;right:8px;top:8px;z-index:2;width:26px;height:26px;border-radius:50%;background:var(--primary);color:#0A0A0A;font-weight:800;display:flex;align-items:center;justify-content:center}
.rw2-row{display:grid;grid-template-columns:190px 1fr;gap:18px;align-items:stretch}
.rw2-ph{height:338px!important}
.rw2-scan{position:absolute;left:0;right:0;height:3px;z-index:2;background:var(--primary);box-shadow:none;animation:rcScan 2.6s ease-in-out infinite}
.rw2-chip{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:2;white-space:nowrap;font:700 11px Inter,sans-serif;padding:5px 10px;border-radius:999px;background:var(--primary);color:#0A0A0A}
.rw2-opts{display:flex;flex-direction:column;gap:14px;justify-content:center}
.rw2-g>span{display:block;font:600 11px Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--subtle);margin-bottom:8px}
.rw2-pills{display:flex;gap:8px}
.rw2-pills b{width:44px;height:44px;border-radius:50%;background-size:cover;background-position:center 25%;border:2px solid var(--line-strong)}
.rw2-pills b.on{border-color:var(--primary);box-shadow:none}
.rw2-tags{display:flex;flex-wrap:wrap;gap:8px}
.rw2-tags em{font-style:normal;font-size:13px;font-weight:600;padding:8px 12px;border-radius:999px;border:1px solid var(--line-strong);color:var(--muted)}
.rw2-tags em.on{background:var(--primary-soft);border-color:var(--primary-line);color:var(--text)}
.rw2-go{align-self:flex-start;min-height:44px;padding:0 20px;font-size:14px}
.ba{position:relative;width:min(100%,340px);aspect-ratio:9/16;max-height:520px;margin:0 auto;border-radius:16px;overflow:hidden;border:2px solid var(--primary);box-shadow:none;cursor:ew-resize;--p:50%;touch-action:pan-y}
.ba-l{position:absolute;inset:0}
.ba-l video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-l.before{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba-t{position:absolute;top:12px;left:12px;z-index:2}
.ba-t.r{left:auto;right:12px;background:var(--primary)!important;color:#0A0A0A!important}
.ba-h{position:absolute;top:0;bottom:0;left:var(--p);width:3px;margin-left:-1.5px;background:#fff;box-shadow:none;z-index:3}
.ba-h span{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:var(--primary);color:#0A0A0A;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.45)}
.ba-note{text-align:center;margin:12px 0 0;font-size:13px;color:var(--subtle)}
@media (max-width:700px){.rw1-row{grid-template-columns:1fr auto 112px;gap:8px}.rw1-drop,.rw1-pick{height:220px!important}.rw1-drop{padding:10px;gap:6px}.rw1-ic{width:40px;height:40px}.rw1-drop b{font-size:13px}.rw1-drop small{font-size:10px}.rw1-file{font-size:9px;padding:5px 7px;gap:5px}.rw1-or{font-size:10px}.rw1-ok{width:22px;height:22px;font-size:12px}
.rw2-row{grid-template-columns:112px 1fr;gap:12px}.rw2-ph{height:220px!important}.rw2-chip{font-size:9px;padding:4px 7px;bottom:8px}.rw2-opts{gap:9px}.rw2-g>span{font-size:9px;margin-bottom:5px}.rw2-pills b{width:32px;height:32px}.rw2-tags{gap:5px}.rw2-tags em{font-size:11px;padding:5px 8px}.rw2-go{min-height:36px;padding:0 14px;font-size:12px}
.ba{width:min(100%,300px)}}
@media (prefers-reduced-motion:reduce){.rw1-ic,.rw1-bar i,.rw2-scan{animation:none}}
.v-themes .frame.made .tag{background:var(--primary)!important;color:#0A0A0A!important;border-color:transparent!important}
.ab-sign{display:flex;align-items:center;gap:14px;margin-top:12px}
.ab-sign img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid var(--primary);box-shadow:none}
.ab-sign b{display:block;font-size:16px}.ab-sign small{color:var(--subtle);font-size:14px}
@media (max-width:700px){[data-page="about"] .hero .wrap>div[style*="font-size:20px"]{font-size:17px!important}}
/* product menu: How it works feature row */
.dd2 .feat{align-items:center}
.dd2 .feat b{width:52px;height:52px;border-radius:14px;background:var(--primary)!important;border-color:var(--primary)!important;color:#0A0A0A!important;box-shadow:none!important;flex-shrink:0}
.dd2 .feat b svg{stroke:#0A0A0A}
.dd2 .feat strong{display:inline-flex;align-items:center;gap:8px}
.feat-go{display:inline-flex;color:var(--primary);transition:transform .2s}
.dd2 .feat:hover .feat-go{transform:translateX(4px)}
.dd-cta{color:#0A0A0A!important;font-weight:800}
.dd-cta span:first-child{display:inline-flex;align-items:center;gap:8px}
.dd-cta .feat-go{color:#0A0A0A}
.dd-cta:hover .feat-go{transform:translateX(4px)}
/* How it works: mini product-film thumbnail instead of an icon */
.dd2 .feat b.feat-vid{position:relative;width:96px!important;height:60px!important;border-radius:12px;overflow:hidden;padding:0;background:#000!important;border:1.5px solid var(--primary)!important;box-shadow:none!important;display:block}
.feat-vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.feat-play{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--primary);color:#0A0A0A;display:flex;align-items:center;justify-content:center;padding-left:2px;box-shadow:0 4px 12px rgba(0,0,0,.45);transition:transform .2s}
.feat-vid em{position:absolute;right:5px;bottom:4px;font:600 9px Inter,sans-serif;font-style:normal;color:#fff;background:rgba(0,0,0,.6);padding:1px 4px;border-radius:4px}
.dd2 .feat:hover .feat-play{transform:scale(1.12)}
/* ===== Variations cards: base -> versions ===== */
.vc-row{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vc-base{border:2px solid var(--primary-line)!important}
.vc-go{position:absolute;left:50%;top:50%;z-index:4;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;background:var(--primary);color:#0A0A0A;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 4px var(--bg,#0A0A0A)}
.vc-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:6px}
.vc-m{position:relative;border-radius:10px;overflow:hidden;background:#0c0e08;border:1.5px solid var(--primary)}
.vc-m video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vc-m i{position:absolute;left:5px;bottom:5px;z-index:2;font:700 9px Inter,sans-serif;font-style:normal;padding:3px 6px;border-radius:999px;background:var(--primary);color:#0A0A0A;white-space:nowrap}
.vc-txt{position:absolute;left:0;right:0;top:0;z-index:2;padding:6px 5px;background:#fff;color:#0A0A0A;font:800 8.5px/1.25 Inter,sans-serif;text-align:center}
.vc-more{display:flex;align-items:center;justify-content:center;border-style:dashed;border-color:var(--primary-line);background:var(--primary-soft)}
.vc-more span{font-size:11px;font-weight:700;color:var(--primary);text-align:center;padding:4px}
.vc-wall{position:relative;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:4px}
.vc-wall span{border-radius:5px;background-size:cover;background-position:center 30%;border:1px solid rgba(202,244,28,.5);animation:vcPop 3.2s ease-in-out infinite}
.vc-wall span:nth-child(4n+2){animation-delay:.2s}.vc-wall span:nth-child(4n+3){animation-delay:.4s}.vc-wall span:nth-child(4n+4){animation-delay:.6s}
@keyframes vcPop{0%,70%,100%{filter:none}80%{filter:brightness(1.35)}}
.vc-count{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);z-index:2;font:800 12px Inter,sans-serif;padding:5px 10px;border-radius:999px;background:var(--primary);color:#0A0A0A;box-shadow:0 6px 18px rgba(0,0,0,.5);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.vc-wall span{animation:none}}
.vcard .chip-on{background:var(--primary)!important;border-color:var(--primary)!important;color:#0A0A0A!important;font-weight:800}

/* =====================================================================
   DESIGN FIXES (dark): compact step cards, hero chips kept on screen
   ===================================================================== */
[data-flow] .flow-grid>div:first-child{counter-reset:fstep;position:relative}
[data-flow] .fstep{min-height:0!important;position:relative;justify-content:center;border-left:0;opacity:.45;padding:26px 28px 26px 84px!important;margin:0 0 15vh!important;border-radius:20px;border:1px solid transparent;background:transparent;transition:opacity .35s,background .35s,border-color .35s,box-shadow .35s}
[data-flow] .fstep:first-child{margin-top:8vh!important}[data-flow] .fstep:last-child{margin-bottom:14vh!important}
[data-flow] .fstep::before{counter-increment:fstep;content:counter(fstep,decimal-leading-zero);position:absolute;left:24px;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;font:700 14px Inter,sans-serif;color:var(--subtle);background:var(--surface-2);border:1px solid var(--line-strong);transition:all .35s}
[data-flow] .fstep.on{opacity:1;background:var(--surface-1);border-color:var(--primary-line);box-shadow:none}
[data-flow] .fstep.on::before{color:#0A0A0A;background:var(--primary);border-color:transparent;box-shadow:none}
[data-flow] .fstep h3{font-size:28px;margin-top:8px}
[data-flow] .fstep p{display:block!important;margin:8px 0 0;font-size:15.5px;line-height:1.55;color:var(--muted);max-width:440px}
[data-flow] .fstep .k{font-size:11px}
@media (max-width:960px){[data-flow] .fstep{margin-bottom:34vh!important;padding:20px 18px 20px 70px!important;background:var(--bg)}[data-flow] .fstep:first-child{margin-top:46vh!important}[data-flow] .fstep::before{left:16px;width:38px;height:38px}[data-flow] .fstep h3{font-size:22px}}
.stack3d>[data-depth]{width:max-content}
.stack3d>[data-depth]>.fchip{position:relative}
/* gameplay-version tiles hold real clips now */
.frame.gv{background:#0c0e08}
.frame.gv .tag{z-index:2}
.flow-stage .frame.made .tag{background:var(--primary)!important;color:#0A0A0A!important;border-color:transparent!important}

/* =====================================================================
   8+ PASS · one type system for labels, consistent tags, trimmed pages
   ===================================================================== */
section.cut{display:none!important}
/* every small label: same family, weight, tracking */
.mono,.k,.vis-title,.num,.stg,.uc-index .ih,.label,.eyebrow,.ov-chaps b,.rs-count{font-family:Inter,sans-serif!important;font-variant-numeric:tabular-nums}
.k,.vis-title,.num,.stg,.uc-index .ih,.label,.eyebrow{font-weight:700!important;letter-spacing:.08em!important;text-transform:uppercase}
.mono{font-weight:600;letter-spacing:.01em}
.fstep .k,.vis-title,.num{font-size:11px!important}
/* tags on media: one size, one look */
.tag{font-family:Inter,sans-serif!important;font-weight:800!important;letter-spacing:.06em!important;text-transform:uppercase}
.frame .tag,.vc-m i,.vxl,.ba-t{font-size:10px!important}
/* chips: one size */
.chip{font-size:12px;font-weight:700}
[data-flow] .fstep::before{font-family:Inter,sans-serif;font-weight:800}
/* ideation flow · step 1 "Ask": suggestions + first answer so the panel isn't empty */
.ask-sug{display:flex;flex-wrap:wrap;gap:8px}
.ask-sug span{font-size:12px;font-weight:600;padding:6px 11px;border-radius:999px;border:1px solid var(--line-strong);color:var(--muted);background:var(--surface-2)}
.ask-ans{display:flex;gap:10px;align-items:flex-start;padding:14px;border-radius:16px;background:var(--surface-2);border:1px solid var(--line)}
.ask-ava{flex-shrink:0;width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--primary);color:#0A0A0A;font-size:13px}
.ask-ans p{margin:2px 0 10px;font-size:14px;line-height:1.45;color:var(--text)}
.ask-th{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.ask-th i{aspect-ratio:9/14;border-radius:8px;background-size:cover;background-position:center;border:1px solid var(--line-strong)}
.ask-th em{display:flex;align-items:center;justify-content:center;border-radius:8px;font-style:normal;font-weight:800;font-size:13px;color:var(--primary);background:var(--primary-soft);border:1px dashed var(--primary-line)}
.loop-steps button.on{background:var(--primary)!important;border-color:var(--primary)!important;color:#0A0A0A!important}
@media (max-width:960px){.ask-sug{display:none}}

/* =====================================================================
   LAYOUT RHYTHM · break the "text left, visual right" repeat
   ===================================================================== */
/* mirrored splits: visual left, text right */
.split.flip>*:first-child{order:2}
/* stacked: centred heading, wide visual below */
.split.stack{grid-template-columns:1fr;gap:40px;justify-items:center;text-align:center}
.split.stack>.rv:first-child{max-width:760px;display:flex;flex-direction:column;align-items:center}
.split.stack ul.clean{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:10px 28px}
.split.stack>.card{width:min(100%,1040px);display:grid!important;grid-template-columns:1fr 1fr;gap:18px 28px!important;text-align:left}
.split.stack>.card>:last-child{grid-column:1/-1}
/* mirrored sticky flow: preview left, steps right */
.flow-grid.flip{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.flow-grid.flip>div:first-child{order:2}
@media (max-width:960px){
  .split.flip>*:first-child{order:0}
  .split.stack>.card{grid-template-columns:1fr}
  .flow-grid.flip{grid-template-columns:1fr}.flow-grid.flip>div:first-child{order:0}
}
.chip-on{background:var(--primary)!important;color:#0A0A0A!important;border-color:var(--primary)!important}
/* ===== music section: playhead, frames, equaliser, swap ===== */
.lanes{position:relative}
.lane .gl-f{background-size:cover;background-position:center 40%;border:1px solid var(--line-strong)}
.mus-ph{position:absolute;z-index:3;pointer-events:none;left:var(--ph-l,140px);top:var(--ph-t,24px);height:var(--ph-h,150px);width:2px;border-radius:2px;background:var(--primary);box-shadow:none;animation:phMove 6s linear infinite}
.mus-ph::before{content:"";position:absolute;left:-5px;top:-6px;width:12px;height:12px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 4px var(--primary-soft)}
@keyframes phMove{from{transform:translateX(0)}to{transform:translateX(var(--ph-w,300px))}}
.lane.swapping .wave.mus i{animation:wv 1.2s ease-in-out infinite,musIn .55s cubic-bezier(.2,.7,.2,1) both}
.lane.swapping .chip{animation:chipPop .6s cubic-bezier(.2,.7,.2,1)}
@keyframes musIn{from{opacity:0;transform:scaleY(.1)}to{opacity:1}}
@keyframes chipPop{0%{transform:scale(.8)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.trk{position:relative;transition:border-color .3s,background .3s,transform .3s}
.trk.on{transform:translateY(-2px)}
.trk .eq{display:inline-flex;align-items:flex-end;gap:2px;height:14px;margin-right:2px}
.trk .eq b{width:3px;border-radius:2px;background:var(--primary);animation:eqB .9s ease-in-out infinite}
.trk .eq b:nth-child(2){animation-delay:-.3s}.trk .eq b:nth-child(3){animation-delay:-.6s}.trk .eq b:nth-child(4){animation-delay:-.15s}
@keyframes eqB{0%,100%{height:30%}50%{height:100%}}
@media (prefers-reduced-motion:reduce){.mus-ph,.trk .eq b{animation:none}}
.trk .hot{color:#0A0A0A!important}

/* =====================================================================
   PRODUCT MATCH · console.uagenius.ai
   Inter everywhere · lime #CAF41C · CTAs are 8px-radius flat buttons,
   dark text, medium weight, no pill / glow / shine (same as the app)
   ===================================================================== */
:root{--primary:#CAF41C;--primary-hover:#D7F94F;--blue:#CAF41C;--blue-h:#D7F94F;--on-primary:#171717;--r-btn:8px}
body,button,input,textarea,select{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.h1,.h2,.h3,h1,h2,h3{letter-spacing:-.025em}
.btn{border-radius:var(--r-btn)!important;font-weight:600!important;letter-spacing:0!important;min-height:44px;padding:0 20px;font-size:15px}
.btn-lg{min-height:52px!important;padding:0 26px!important;font-size:16px!important}
.btn-p,.btn.btn-p{background:var(--primary)!important;color:#171717!important;box-shadow:0 1px 3px rgba(0,0,0,.1)!important}
.btn-p::after{display:none!important}
.btn-p:hover{background:var(--primary-hover)!important;transform:translateY(-1px);box-shadow:none!important}
.btn-s{border-radius:var(--r-btn)!important;background:#171717;border:1px solid #262626;color:#FAFAFA}
.btn-s:hover{background:#262626;border-color:#3F3F46}
.nav .btn-p{animation:none!important;min-height:40px!important;padding:0 16px!important;font-size:14px!important}
.dd .dd-cta,.book-cta,.qa-cta,.rbtn,.m-cta .btn{border-radius:var(--r-btn)!important}
.dd .dd-cta,.book-cta{box-shadow:0 1px 3px rgba(0,0,0,.1)!important;color:#171717!important}
.m-cta .btn{min-height:44px}
.magnet{transform:none!important}

/*DARKFX-START*/
/* =====================================================================
   BLACK · UX EFFECTS
   ===================================================================== */
/* 1. neon highlighter behind accent words (draws in when seen) */
.acc{color:#CAF41C!important;-webkit-text-fill-color:#CAF41C!important;background:linear-gradient(rgba(202,244,28,.55),rgba(202,244,28,.55)) no-repeat 0 96%/0% .12em!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;animation:none!important;transition:background-size .9s cubic-bezier(.2,.7,.2,1) .15s;border-radius:4px;padding:0 .06em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.acc.hl{background-size:100% .12em!important}
.cta .acc{background-size:100% .12em!important}

/* 2. hero headline: words rise in one by one */
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(6px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1),filter .6s;transition-delay:calc(var(--i)*55ms)}
.page.show .hero h1.split-on .w{opacity:1;transform:none;filter:none}

/* 3. softer, blur-in reveals with a stagger for grids */
.rv{filter:blur(4px)}
.rv.in{filter:none}
.g2>.rv:nth-child(2),.g3>.rv:nth-child(2),.g4>.rv:nth-child(2){transition-delay:.08s}
.g3>.rv:nth-child(3),.g4>.rv:nth-child(3){transition-delay:.16s}
.g4>.rv:nth-child(4){transition-delay:.24s}

/* 4. cursor glow (desktop) */
.cur-glow{position:fixed;left:0;top:0;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;pointer-events:none;z-index:1;background:none;opacity:0;transition:opacity .4s;will-change:transform}
body.has-cur .cur-glow{opacity:1}
main,.page{position:relative;z-index:2}

/* 5. button press ripple + arrow nudge */
.btn{position:relative;overflow:hidden}
.btn .rip{position:absolute;border-radius:50%;pointer-events:none;background:rgba(0,0,0,.18);transform:scale(0);animation:rip .6s ease-out forwards}
@keyframes rip{to{transform:scale(1);opacity:0}}

/* 6. nav links: neon underline sweep */
.mi>a,.mi>button{position:relative}
.mi>a::after,.mi>button::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;border-radius:2px;background:#CAF41C;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.mi>a:hover::after,.mi>button:hover::after,.mi>a.active::after{transform:scaleX(1)}

/* 7. media tilt on hover */
.tilt-h{transition:transform .35s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d;will-change:transform}

/* 8. scroll progress + back-to-top ring in neon */
.nav .scroll-prog{background:linear-gradient(90deg,#CAF41C,#9BD40F)!important;height:3px!important}
.to-top{background:#171717!important;border:1px solid #2A2A2E!important;color:#FAFAFA!important}
.to-top svg.ring{position:absolute;inset:-3px;width:50px;height:50px;transform:rotate(-90deg);pointer-events:none}
.to-top svg.ring circle{fill:none;stroke:#CAF41C;stroke-width:3;stroke-linecap:round;stroke-dasharray:144.5;stroke-dashoffset:var(--off,144.5);transition:stroke-dashoffset .15s linear}
.to-top:hover{background:#CAF41C!important;border-color:#CAF41C!important;color:#0A0A0A!important}

/* 9. section entrance: thin neon line draws under section labels */
.label::before{background:#CAF41C!important;width:0!important;transition:width .7s cubic-bezier(.2,.7,.2,1) .1s}
.label.hl-l::before,.hero .label::before{width:24px!important}

/* 10. soft floating background blobs on white sections */
.sec{position:relative;overflow:clip}
.sec::after{content:"";position:absolute;z-index:0;width:520px;height:520px;right:-180px;top:10%;border-radius:50%;background:none;filter:blur(10px);animation:blob 18s ease-in-out infinite alternate;pointer-events:none}
.sec:nth-of-type(even)::after{right:auto;left:-200px;top:40%;animation-duration:22s}
.sec>.wrap{position:relative;z-index:1}
@keyframes blob{to{transform:translate3d(-60px,40px,0) scale(1.12)}}

@media (prefers-reduced-motion:reduce){
  .acc{transition:none}.hero h1 .w{opacity:1;transform:none;filter:none;transition:none}
  .rv{filter:none}.cur-glow{display:none}.sec::after{animation:none}.btn .rip{display:none}
}
/*DARKFX-END*/
/* examples marquee: two big cards on screen, same right-to-left loop */
#home-ex{gap:28px!important;animation-duration:70s!important}
#home-ex>.card{flex:0 0 min(47vw,900px)!important;padding:18px!important;gap:16px!important}
#home-ex>.card .g2{gap:14px!important}
#home-ex .frame .tag{font-size:12px!important;padding:6px 12px!important}
#home-ex>.card div[style*="font-size:15px"]{font-size:20px!important}
#home-ex>.card .mono{font-size:14px!important}
#home-ex .vc-m i{font-size:11px!important}
#home-ex .vc-txt{font-size:11px!important}
@media (max-width:600px){#home-ex>.card{flex-basis:86vw!important;padding:12px!important}#home-ex{animation-duration:40s!important}#home-ex>.card div[style*="font-size:15px"]{font-size:16px!important}}
/* examples: shorter cards (less vertical) */
#home-ex .frame{aspect-ratio:4/5!important}
#home-ex .frame video,#home-ex .frame .exv{object-fit:cover;object-position:center 35%}
#home-ex .vc-row{aspect-ratio:auto}
#home-ex .vc-base{aspect-ratio:4/5!important;height:auto!important}
#home-ex>.card .g2{grid-template-columns:1fr 1fr!important}
/* brand logo mark (geometric U) */
.logo i.logo-m{width:30px!important;height:30px!important;background:none!important;box-shadow:none!important;border-radius:0!important;display:inline-flex;align-items:center;justify-content:center;filter:none}
.logo i.logo-m svg{width:100%;height:100%;display:block}
.logo:hover i.logo-m{transform:rotate(-6deg);transition:transform .3s}
.foot-mark .fm-logo{display:inline-block;height:.74em;width:auto;margin-right:.1em;vertical-align:-.02em}

/* =====================================================================
   TYPE · Poolday-style: Inter everywhere, regular-weight display type,
   tight tracking, calm medium-weight UI text
   ===================================================================== */
body{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-weight:400}
h1,h2,h3,h4,.h1,.h2,.h3,.fstep h3,.uc h3,.rx h3,.link-card h3,.qa,.founder-name{font-weight:400!important;letter-spacing:-.025em!important}
.h1,h1{line-height:1.04!important}
.h2,h2{line-height:1.1!important}
.hero-c .h1{font-size:clamp(46px,6.2vw,88px)!important;letter-spacing:-.03em!important}
.sub,p{font-weight:400}
.sub strong,p strong,b,strong{font-weight:500}
.btn,.btn-lg,.mi>a,.mi>button,.dd-cta,.book-cta,.chip,.pill,.tag,.trk,.vx-ctl button,.loop-steps button,.fbtn{font-weight:500!important;letter-spacing:0!important}
.label,.eyebrow,.k,.vis-title,.num,.stg,.uc-index .ih{font-weight:500!important;letter-spacing:.06em!important}
.logo{font-weight:500!important;letter-spacing:-.01em}
.mono{font-weight:500}
.metric .big,.uc-result .big,.mx-count b,.f-stats b,.cf-head b{font-weight:500!important;letter-spacing:-.02em}
p[style*="font-weight:700"],p[style*="font-weight:800"],div[style*="font-weight:700"],div[style*="font-weight:800"],span[style*="font-weight:700"],h3[style]{font-weight:500!important}
.sub[style*="font-size:22px"],.lead{font-weight:400!important}

/* ===== VISIBILITY PASS (Oct): no dark-on-dark boxes ===== */
/* LinkedIn buttons: text was black on navy */
.li-btn,.li-btn *,.li-btn .li-arrow{color:#fff!important}
.li-btn{background:rgba(10,102,194,.22)!important;border:1px solid rgba(80,150,230,.6)!important}
.li-btn:hover{background:rgba(10,102,194,.38)!important}
/* Lime surfaces always get dark ink */
.fbtn.on,.prompt,.stg.s-scale,.chip.on,.qm-stamp,.mx-head>div:nth-child(2),.console span[style*="--blue"]{color:#0A0A0A!important}
.stg.s-recreate{background:rgba(255,255,255,.08)!important;color:#fff!important;border-color:rgba(255,255,255,.35)!important}
/* "Made / Yours" tags: were black text on black pill */
.frame.made .tag,.made .tag,.frame.made.has-v .tag{background:var(--primary)!important;color:#0A0A0A!important;border-color:transparent!important;backdrop-filter:none!important}
/* Tags readable + never overflow their frame */
.frame .tag{color:#fff;background:rgba(10,10,10,.82);border-color:rgba(255,255,255,.22);white-space:nowrap;max-width:calc(100% - 14px);overflow:hidden;text-overflow:ellipsis}
.rx-fan .tag,.rx-base .tag{font-size:8px!important;padding:3px 7px!important;letter-spacing:.02em!important;top:7px!important;left:7px!important}
/* Editable-template 3D layers: brighter base, visible planes, readable labels */
.layers3d.tpl.open .l0 .tpl-cv{opacity:.9}
.layers3d.tpl.open .ly:not(.l0){background:rgba(202,244,28,.035)!important;border-color:rgba(202,244,28,.55)!important}
.layers3d .ly em{color:#0A0A0A!important;background:var(--primary);padding:3px 8px;border-radius:999px;width:auto!important;white-space:nowrap;font-size:10px!important;letter-spacing:.04em}
.layers3d .stack{left:56%}
/* How-it-works mini production chips */
.mv-prod .chips span{color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25)}
/* Problem card stamp */
.pv1-out em{color:#fecaca;background:rgba(220,38,38,.28);border-color:rgba(248,113,113,.7)}
.rx-fan .tag,.rx-base .tag{text-transform:none!important;font-size:9px!important;letter-spacing:0!important;padding:3px 7px!important;max-width:calc(100% - 10px)}
.layers3d .ly em{font-size:14px!important;padding:4px 10px;right:-128px;width:auto!important}
@media (max-width:600px){.layers3d .stack{left:50%}}
.layers3d .ly{transform-style:preserve-3d}.layers3d .ly em{font-size:12px!important}
.v-themes .frame .tag{font-size:8.5px!important;padding:3px 7px!important;letter-spacing:0!important;text-transform:none!important}
#mx-wall span{position:relative;overflow:hidden}#mx-wall span video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}#mx-wall span.live{box-shadow:0 0 0 1.5px var(--primary)}
/* Text variations section */
.txv{display:flex;gap:22px;align-items:center;justify-content:center}
.txv-ph{width:230px;height:410px;flex-shrink:0;position:relative}
.txv-line{position:absolute;left:10px;right:10px;top:44px;z-index:3;padding:10px 12px;border-radius:12px;background:rgba(10,10,10,.78);color:#fff;font:700 16px/1.25 Inter,sans-serif;text-align:center;backdrop-filter:blur(4px)}
.txv-line.swap{animation:txvIn .45s cubic-bezier(.2,.7,.2,1)}
@keyframes txvIn{from{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:none}}
.txv-list{display:flex;flex-direction:column;gap:8px;min-width:0}
.txv-list span{padding:9px 14px;border-radius:999px;border:1px solid var(--line2);color:var(--muted);font-size:13px;white-space:nowrap;transition:all .3s}
.txv-list span.on{background:var(--primary);color:#0A0A0A;border-color:transparent;font-weight:600}
@media (max-width:760px){.txv{flex-direction:column}.txv-ph{width:200px;height:356px}.txv-list{flex-direction:row;flex-wrap:wrap;justify-content:center}.txv-list span{font-size:12px;padding:7px 11px}}
.txl{flex:1;min-width:0;height:34px;display:flex;align-items:center;padding:0 12px;border-radius:10px;border:1px dashed rgba(202,244,28,.45);background:rgba(202,244,28,.06);overflow:hidden}
.txl span{font:600 13px Inter,sans-serif;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.txl span.swap{animation:txvIn .4s cubic-bezier(.2,.7,.2,1)}
/* Scroll steps: more room per step so they change at a calm pace */
[data-flow] .fstep{margin-bottom:34vh!important;cursor:pointer;transition:opacity .35s,background .35s,border-color .35s,box-shadow .35s}
[data-flow] .fstep:first-child{margin-top:22vh!important}
[data-flow] .fstep:last-child{margin-bottom:30vh!important}
[data-flow] .fstep:not(.on):hover{opacity:.8;border-color:var(--line2)}
[data-flow] .fstep:focus-visible{outline:2px solid var(--primary);outline-offset:4px}
@media (max-width:960px){[data-flow] .fstep{margin-bottom:42vh!important}}
/* ===== Examples: one detailed case at a time ===== */
.ucx{padding:44px}
.ucx[hidden]{display:none!important}
.ucx.in{animation:ucxIn .5s cubic-bezier(.2,.7,.2,1)}
@keyframes ucxIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ucx-head h2{font-size:clamp(28px,3.4vw,42px);line-height:1.1;margin:10px 0 0}
.ucx-sum{margin-top:28px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;align-items:center;padding:20px 22px;border-radius:18px;border:1px solid var(--blue-line);background:var(--blue-soft)}
.ucx-sum .big{font-size:52px;font-weight:500;line-height:1;color:#fff;text-shadow:none;min-width:64px}
.ucx-sum strong{display:block;font-size:18px;margin-top:2px}
.ucx-eff{display:grid;grid-template-columns:repeat(4,auto);gap:8px}
.ucx-eff span{display:flex;flex-direction:column;align-items:center;padding:8px 12px;border-radius:12px;background:rgba(10,10,10,.55);border:1px solid var(--line2);font-size:11px;color:var(--muted);min-width:64px;text-align:center}
.ucx-eff b{font-size:20px;color:#fff;font-weight:600}
.ucx-prob{margin-top:40px;padding:28px;border-radius:20px;background:rgba(248,113,113,.05);border:1px solid rgba(248,113,113,.22)}
.ucx-prob p{font-size:19px;line-height:1.6;margin:8px 0 0;color:var(--text);max-width:760px}
.ucx-old{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;align-items:center}
.ucx-old .lbl,.ucx-cmp .lbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);margin-right:4px}
.ucx-old span:not(.lbl){font-size:13px;padding:7px 12px;border-radius:999px;border:1px solid rgba(248,113,113,.35);color:#fecaca;background:rgba(248,113,113,.08)}
.ucx-flow{margin-top:44px;position:relative}
.ucx-step{display:grid;grid-template-columns:52px minmax(0,1fr);gap:20px;position:relative;padding-bottom:36px}
.ucx-step::before{content:"";position:absolute;left:25px;top:52px;bottom:0;width:2px;background:linear-gradient(180deg,var(--blue-line),rgba(202,244,28,.06))}
.ucx-step:last-child::before{display:none}
.ucx-sn b{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:16px;background:var(--primary);color:#0A0A0A;font-size:20px;font-weight:700;box-shadow:none}
.ucx-meta{display:flex;gap:10px;align-items:center}
.ucx-meta b{font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.ucx-sc h3{font-size:24px;margin:10px 0 0;line-height:1.25}
.ucx-sc>p{margin:6px 0 0;color:var(--muted);font-size:15.5px;line-height:1.55;max-width:620px}
.ucx-vis{margin-top:16px}
.xs-stage{height:400px}
.xs-ask,.xs-check,.xs-tracks,.xs-themes,.xs-formula,.xs-tired,.xs-layers{padding:20px;border-radius:18px;background:var(--s2);border:1px solid var(--line2)}
.xs-q{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:#0A0A0A;border:1px solid var(--blue-line)}
.xs-q .xs-ico{color:var(--primary);font-size:18px}
.xs-typed{flex:1;font-size:16px;color:#fff}
.xs-q b{padding:7px 14px;border-radius:10px;background:var(--primary);color:#0A0A0A;font-size:13px;font-weight:600}
.xs-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.xs-chips span{font-size:12px;padding:6px 11px;border-radius:999px;background:rgba(202,244,28,.1);border:1px solid var(--blue-line);color:#fff}
.xs-count{margin-top:12px;font-size:13px;color:var(--muted)}
.xs-count b{color:var(--primary);font-size:16px;margin-right:4px}
.xs-pick{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;padding:16px;border-radius:18px;background:var(--s2);border:1px solid var(--line2)}
.xs-th{display:block;aspect-ratio:9/16;border-radius:10px;background:#111 center/cover no-repeat;position:relative;opacity:.42;filter:saturate(.6);border:1px solid var(--line2);transition:all .3s}
.xs-th.on{opacity:1;filter:none;border:2px solid var(--primary);box-shadow:none;transform:translateY(-4px)}
.xs-th i{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:var(--primary);color:#0A0A0A;font-style:normal;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.xs-th.big{width:120px;flex-shrink:0;opacity:1;filter:none}
.xs-check div{display:grid;grid-template-columns:30px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.xs-check div:last-child{border-bottom:0}
.xs-check i{width:28px;height:28px;border-radius:50%;background:var(--primary);color:#0A0A0A;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center}
.xs-check span{font-size:14px;color:var(--muted)}.xs-check span b{display:block;color:#fff;font-size:15px;font-weight:600}
.xs-check em{font-style:normal;font-size:12px;color:var(--primary);border:1px solid var(--blue-line);padding:4px 10px;border-radius:999px}
.xs-tired,.xs-layers{display:flex;gap:20px;align-items:center}
.xs-spark{flex:1;display:flex;flex-direction:column;gap:10px}
.xs-spark .lbl{font-size:12px;color:var(--muted)}
.xs-spark svg{width:100%;height:90px;background:rgba(248,113,113,.06);border-radius:10px}
.xs-spark .tag-d,.xs-spark .tag-ok{align-self:flex-start;font-size:12px;padding:5px 10px;border-radius:999px}
.xs-spark .tag-d{color:#fecaca;background:rgba(248,113,113,.15);border:1px solid rgba(248,113,113,.4)}
.xs-spark .tag-ok{color:#0A0A0A;background:var(--primary)}
.xs-ll{flex:1;display:flex;flex-direction:column;gap:6px}
.xs-ll span{display:flex;justify-content:space-between;padding:10px 14px;border-radius:10px;background:#0A0A0A;border:1px solid var(--blue-line);font-size:14px;transform:translateX(calc(var(--i,0)*6px))}
.xs-ll span em{font-style:normal;font-size:12px;color:var(--primary)}
.xs-ll span.lock{border-color:var(--line2)}.xs-ll span.lock em{color:var(--muted)}
.xs-themes{display:flex;flex-wrap:wrap;gap:8px}
.xs-themes span{padding:10px 16px;border-radius:999px;border:1px solid var(--line2);color:var(--muted);font-size:14px}
.xs-themes span.on{background:var(--primary);color:#0A0A0A;border-color:transparent;font-weight:600}
.xs-formula{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.xs-formula div{display:flex;flex-direction:column;align-items:center;padding:14px 18px;border-radius:14px;background:#0A0A0A;border:1px solid var(--line2);min-width:90px}
.xs-formula div b{font-size:32px;color:#fff;font-weight:500}.xs-formula div span{font-size:12px;color:var(--muted)}
.xs-formula em{font-style:normal;font-size:24px;color:var(--primary)}
.xs-formula .tot{background:var(--primary);border-color:transparent}.xs-formula .tot b,.xs-formula .tot span{color:#0A0A0A}
.xs-tracks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.xs-tracks div{display:grid;grid-template-columns:26px 1fr;gap:2px 8px;padding:12px;border-radius:12px;border:1px solid var(--line2);background:#0A0A0A;opacity:.55}
.xs-tracks div.on{opacity:1;border-color:var(--blue-line);background:var(--blue-soft)}
.xs-tracks i{grid-row:span 2;width:24px;height:24px;border-radius:50%;background:var(--s3);font-style:normal;font-size:12px;display:flex;align-items:center;justify-content:center}
.xs-tracks div.on i{background:var(--primary);color:#0A0A0A}
.xs-tracks b{font-size:14px;font-weight:600}.xs-tracks span{font-size:12px;color:var(--muted)}
.ucx-end{margin-top:12px}
.ucx-cmp{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ucx-cmp>div{padding:22px;border-radius:18px;display:flex;flex-direction:column;gap:10px}
.ucx-cmp .old{border:1px solid rgba(248,113,113,.25);background:rgba(248,113,113,.05)}
.ucx-cmp .old span:not(.lbl){font-size:15px;color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(248,113,113,.6)}
.ucx-cmp .new{border:1px solid var(--blue-line);background:var(--blue-soft)}
.ucx-cmp .new span:not(.lbl){font-size:16px;color:#fff}.ucx-cmp .new b{color:var(--primary);font-size:20px;margin-right:4px}
.ucx-take{margin-top:16px;padding:30px;border-radius:20px;background:#0A0A0A;border:1px solid var(--blue-line);text-align:center}
.ucx-take strong{display:block;font-size:26px;font-weight:400}
.ucx-take>span{display:block;color:var(--primary);margin-top:6px;font-size:16px}
.ucx-take .btns{justify-content:center;margin-top:20px;flex-wrap:wrap}
.ucx-next{cursor:pointer;font:inherit}
@media (max-width:960px){
  .uc-layout{grid-template-columns:minmax(0,1fr);gap:20px}.uc-layout>*{min-width:0}
  .uc-index{display:flex!important;position:sticky;top:64px;z-index:20;flex-direction:row;overflow-x:auto;gap:6px;padding:10px 2px;background:var(--bg);scrollbar-width:none}
  .uc-index::-webkit-scrollbar{display:none}
  .uc-index .ih{display:none}
  .uc-index button{flex:0 0 auto;max-width:220px;white-space:nowrap;border:1px solid var(--line2);border-radius:999px;padding:8px 14px!important;grid-template-columns:auto auto!important}
  .uc-index button span{overflow:hidden;text-overflow:ellipsis}
  .uc-index button.on::before{display:none}
  .ucx{padding:22px}
  .ucx-sum{grid-template-columns:auto 1fr}.ucx-eff{grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr))}.ucx-eff span{min-width:0;padding:8px 4px}
  .ucx-prob{padding:20px}.ucx-prob p{font-size:16px}
  .ucx-step{grid-template-columns:38px minmax(0,1fr);gap:12px}.ucx-sn b{width:38px;height:38px;font-size:16px;border-radius:12px}.ucx-step::before{left:18px;top:40px}
  .ucx-sc h3{font-size:20px}
  .xs-pick{grid-template-columns:repeat(4,minmax(0,1fr))}
  .xs-tracks{grid-template-columns:1fr 1fr}
  .xs-tired,.xs-layers{flex-direction:column;align-items:stretch}.xs-th.big{width:100px;align-self:center}
  .xs-stage{height:320px}
  .ucx-cmp{grid-template-columns:1fr}
  .xs-q .xs-typed{font-size:14px}
}
.ava-init{position:absolute;inset:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--s2);color:var(--primary);font-size:34px;font-weight:600;letter-spacing:.02em}
/* Examples v2: progress rail, step reveal, cursor picks */
.ucx-rail{position:sticky;top:76px;z-index:15;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:28px -10px 0;padding:10px;background:rgba(18,18,20,.92);backdrop-filter:blur(10px);border:1px solid var(--line2);border-radius:999px}
.ucx-rail::-webkit-scrollbar{display:none}
.ucx-rail span{flex:0 0 auto;font-size:12px;padding:7px 12px;border-radius:999px;color:var(--muted);cursor:pointer;white-space:nowrap;transition:all .25s}
.ucx-rail span:hover{color:#fff}
.ucx-rail span.on{background:var(--primary);color:#0A0A0A;font-weight:600}
.ucx-time{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 14px;border-radius:12px;background:rgba(10,10,10,.55);border:1px solid var(--line2);font-size:13px}
.ucx-time s{color:#fca5a5}.ucx-time b{color:var(--primary);font-size:18px}
.ucx-sum{grid-template-columns:auto minmax(0,1fr) auto auto}
.ucx-step .ucx-sc,.ucx-prob,.ucx-end{transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.ucx-step:not(.seen) .ucx-sc,.ucx-prob:not(.seen),.ucx-end:not(.seen){opacity:0;transform:translateY(22px)}
.ucx-step:not(.seen) .ucx-sn b{transform:scale(.6);opacity:.3}
.ucx-sn b{transition:transform .5s cubic-bezier(.3,1.4,.4,1),opacity .4s}
.ucx-step.seen .xs-typed{display:inline-block;overflow:hidden;white-space:nowrap;border-right:2px solid var(--primary);animation:xsType 1.4s steps(36) .3s both,xsCaret .8s step-end 1.7s 3}
@keyframes xsType{from{max-width:0}to{max-width:100%}}
@keyframes xsCaret{50%{border-color:transparent}}
.ucx-step.seen .xs-chips span{animation:xsPop .35s cubic-bezier(.3,1.4,.4,1) both}
.xs-chips span:nth-child(1){animation-delay:1.5s!important}.xs-chips span:nth-child(2){animation-delay:1.6s!important}.xs-chips span:nth-child(3){animation-delay:1.7s!important}.xs-chips span:nth-child(4){animation-delay:1.8s!important}.xs-chips span:nth-child(5){animation-delay:1.9s!important}.xs-chips span:nth-child(6){animation-delay:2s!important}
.ucx-step.seen .xs-count{animation:xsPop .4s ease 2.1s both}
@keyframes xsPop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.ucx-step.seen .xs-th{animation:xsPop .35s ease both}
.ucx-step.seen .xs-th.on{animation:xsPop .35s ease both,xsSel .5s ease 1.2s both}
@keyframes xsSel{from{opacity:.42;filter:saturate(.6);transform:none;border-color:var(--line2);box-shadow:none}to{opacity:1;filter:none;transform:translateY(-4px)}}
.xs-th.on i{animation:xsPop .3s cubic-bezier(.3,1.4,.4,1) 1.5s both}
.xs-th .cur{position:absolute;left:55%;top:55%;width:22px;height:22px;opacity:0;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 9-6.5 1.5L9.5 19z' fill='%23fff' stroke='%230A0A0A' stroke-width='1.4'/%3E%3C/svg%3E")}
.ucx-step.seen .xs-th .cur{animation:xsCur 1.6s ease .5s both}
@keyframes xsCur{0%{opacity:0;transform:translate(30px,30px)}40%{opacity:1;transform:none}55%{transform:scale(.85)}65%{transform:none}100%{opacity:0}}
.ucx-step.seen .xs-check div{animation:xsPop .4s ease both}
.xs-check div:nth-child(2){animation-delay:.35s!important}.xs-check div:nth-child(3){animation-delay:.7s!important}
.ucx-step.seen .xs-themes span,.ucx-step.seen .xs-tracks div,.ucx-step.seen .xs-formula>*{animation:xsPop .35s ease both}
.xs-themes span:nth-child(2),.xs-tracks div:nth-child(2),.xs-formula>*:nth-child(2){animation-delay:.15s!important}
.xs-themes span:nth-child(3),.xs-tracks div:nth-child(3),.xs-formula>*:nth-child(3){animation-delay:.3s!important}
.xs-themes span:nth-child(4),.xs-tracks div:nth-child(4),.xs-formula>*:nth-child(4){animation-delay:.45s!important}
.xs-themes span:nth-child(5),.xs-tracks div:nth-child(5),.xs-formula>*:nth-child(5){animation-delay:.6s!important}
.xs-themes span:nth-child(6),.xs-tracks div:nth-child(6),.xs-formula>*:nth-child(6){animation-delay:.75s!important}
.xs-formula>*:nth-child(7){animation-delay:1s!important}
@media (max-width:960px){.ucx-rail{top:118px;margin:20px -6px 0}.ucx-sum{grid-template-columns:auto 1fr}.ucx-time{grid-column:1/-1;flex-direction:row;gap:10px;justify-content:center}}
@media (prefers-reduced-motion:reduce){.ucx-step .ucx-sc,.ucx-prob,.ucx-end{opacity:1!important;transform:none!important}.ucx *{animation:none!important}}
@media (max-width:960px){.ucx-rail{display:none}.ucx-step.seen .xs-typed{white-space:normal;border-right:0;animation:xsPop .4s ease .2s both}}
/* Examples v3: video first */
.ucx-hero{margin-top:28px;display:grid;grid-template-columns:minmax(0,.8fr) auto minmax(0,1.6fr);gap:20px;align-items:center;padding:24px;border-radius:24px;background:var(--s2);border:1px solid var(--line2)}
.xh-f{position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#000;border:1px solid var(--line2)}
.xh-f.made{border:2px solid var(--primary);box-shadow:none}
.xh-f video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.xh-f .tag{z-index:2;font-size:11px!important}
.xh-a{max-width:240px;justify-self:center;width:100%}
.xh-go{display:flex;flex-direction:column;align-items:center;gap:6px}
.xh-go span{font-size:12px;padding:5px 10px;border-radius:999px;background:var(--primary);color:#0A0A0A;font-weight:600;white-space:nowrap}
.xh-b{display:grid;gap:12px;align-items:center}
.xh-b.n1{grid-template-columns:minmax(0,240px);justify-content:center}
.xh-b.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.xh-b.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.xs-th video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.xs-th i,.xs-th .cur{z-index:2}
.ucx-prob{margin-top:22px;padding:20px 24px}
.ucx-prob p{font-size:17px;margin-top:4px}
.ucx-step{padding-bottom:28px}
.xs-stage{height:420px}
@media (max-width:960px){
  .ucx-hero{grid-template-columns:1fr;padding:16px;gap:12px}
  .xh-a{max-width:150px}
  .xh-go{flex-direction:row}.xh-go svg{transform:rotate(90deg)}
  .xh-b.n1{grid-template-columns:minmax(0,170px)}
  .xh-b.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xh-b.n3{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
}

/* r9: fatigue final ads + 2-theme visual */
.v-ads{display:grid;grid-template-columns:repeat(4,120px);gap:12px}
.v-ads .f-ad{width:120px;height:213px}
.v-ads .f-ad .tag{font-size:9px!important;white-space:nowrap;max-width:92%;overflow:hidden;text-overflow:ellipsis}
.v-themes .tb-v{width:128px;height:228px}
@media(max-width:640px){.v-ads{grid-template-columns:repeat(2,70px);gap:8px}.v-ads .f-ad{width:70px;height:124px}.v-ads .f-ad .tag{font-size:7.5px!important;left:4px!important;top:4px!important;padding:2px 4px}
.v-themes{gap:6px}.v-themes .tb-v{width:74px;height:132px}}

/* ===== no glow / no decorative gradient / no cursor effects ===== */
.cur-glow,.uc::before,.rx::before,[data-page="home"] .hero::before,.cta::before,.sec::after,.founder.fx::before{display:none!important}
.rbtn .cur,.xs-th .cur{display:none!important}
.orbbg{display:none!important}
.core > b{background:#D9FF6B!important}

/* ===== r10: no underlines, no strike in examples, stacked examples, chart labels, footer ===== */
a,a:hover,a:focus,.qa-skip,u,ins{text-decoration:none!important}
.acc,.acc.hl,.cta .acc{background:none!important;background-size:0 0!important;padding-bottom:0}
.ucx-cmp .old span:not(.lbl){text-decoration:none!important}
.ucx-time span{color:#fca5a5}
.ucx + .ucx{margin-top:48px}
.cf-mark text{fill:#000!important}
@media (min-width:961px){
  footer .cols{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:48px}
  footer .cols>.col:last-child{justify-self:end;min-width:180px}
}

/* ===== r11: manual examples scroller, aligned layer list, next button ===== */
#home-ex{animation:none!important;width:max-content;padding:0 max(24px,calc(50vw - 640px))}
.ex-marquee{overflow-x:auto!important;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--s3) transparent;cursor:grab;-webkit-overflow-scrolling:touch;scroll-padding:0 max(24px,calc(50vw - 640px))}
.ex-marquee.drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}
.ex-marquee::-webkit-scrollbar{height:6px}.ex-marquee::-webkit-scrollbar-thumb{background:var(--s3);border-radius:6px}
#home-ex>.card{scroll-snap-align:start}
.ex-marquee:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.ex-ctl{margin-top:24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.ex-arrows{display:flex;gap:10px}
.ex-arr{width:48px;height:48px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--s1);border:1px solid var(--line2);color:var(--text);cursor:pointer;transition:background .2s,border-color .2s,opacity .2s}
.ex-arr:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}
.ex-arr:disabled{opacity:.35;cursor:default}
.xs-ll span{transform:none!important}
.ucx-next{appearance:none;display:inline-flex;align-items:center;gap:16px;max-width:100%;padding:14px 20px 14px 22px;border-radius:14px;background:var(--s2);border:1px solid var(--line2);color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:border-color .2s,background .2s}
.ucx-next:hover{border-color:var(--primary)}
.ucx-next .nx-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.ucx-next small{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--primary);font-weight:600}
.ucx-next b{font-size:16px;font-weight:600;line-height:1.3}
.ucx-next svg{flex:0 0 auto;color:var(--primary)}
@media (max-width:600px){.ex-arrows{display:none}.ex-ctl{justify-content:flex-end}.ucx-next{width:100%;justify-content:space-between}#home-ex{padding:0 16px}.ex-marquee{scroll-padding:0 16px}}
@media (max-width:600px){.ucx-take .btns{width:100%;display:flex}.ucx-take .btns .ucx-next{flex:1}}
/* r12: auto + manual scroll for home examples */
.ex-marquee{scroll-snap-type:none!important;scroll-behavior:auto!important}
.ex-arr:disabled{opacity:1}