.logo{display:block;line-height:0}
.brand{height:56px;width:auto;border-radius:16px;box-shadow:0 6px 22px var(--glow);animation:wob 5s ease-in-out infinite;transition:transform .3s}.logo:hover .brand{transform:scale(1.1) rotate(-3deg)}
@keyframes wob{0%,100%{transform:rotate(-2deg) scale(1)}50%{transform:rotate(2deg) scale(1.05)}}
nav .w{height:76px}
.hlogo{display:block;width:min(430px,78vw);height:auto;border-radius:36px;margin-bottom:30px;box-shadow:0 30px 90px var(--glow),0 0 0 1px var(--line);animation:hfloat 6s ease-in-out infinite;transform-origin:50% 60%}
@keyframes hfloat{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-16px) rotate(1.5deg) scale(1.03)}}
.hero .w{position:relative}
.hlogo{position:relative}
@media(min-width:1000px){.hero .w{display:grid;grid-template-columns:1.15fr .85fr;column-gap:30px;align-items:center}.hero .w>*{grid-column:1}.hero .hlogo{grid-column:2;grid-row:1/span 6;justify-self:end;margin:0}}
@media(prefers-reduced-motion:reduce){.brand,.hlogo{animation:none}}
.card.big.wide{grid-column:span 6}
.trailer{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;background:linear-gradient(135deg,rgba(139,92,255,.2),rgba(34,227,255,.08),rgba(255,61,154,.12));border:1px solid var(--line);border-radius:36px;padding:44px}
.short{aspect-ratio:9/16;width:min(100%,330px);justify-self:center;border-radius:26px;overflow:hidden;border:1px solid var(--line);background:#000;box-shadow:0 30px 80px var(--glow)}
.short iframe{width:100%;height:100%;border:0;display:block}
.vid.tall .short{width:min(100%,340px)}
@media(max-width:800px){.trailer{grid-template-columns:1fr;padding:26px}}
/* vibrant theme */
:root{--bg:#0b0524;--card:rgba(255,255,255,.065);--line:rgba(255,255,255,.14);--text:#fffaf0;--dim:#c4b8ee;--a:#00f0ff;--b:#b44dff;--c:#ffe14d;--d:#ff3d9a;--e:#ff8a1f;--glow:rgba(180,77,255,.5)}
:root[data-theme=light]{--bg:#fff6ff;--bg2:#fff;--card:rgba(255,255,255,.85);--line:rgba(120,40,200,.18);--text:#1d0b4a;--dim:#5a3f96;--a:#0087c9;--b:#8a2be2;--c:#e08a00;--d:#e0187c;--e:#e8590c;--glow:rgba(180,77,255,.28)}
body:before{background:radial-gradient(900px 620px at 8% -8%,rgba(255,61,154,.38),transparent 62%),radial-gradient(900px 640px at 100% 6%,rgba(0,240,255,.26),transparent 62%),radial-gradient(900px 700px at 55% 108%,rgba(255,138,31,.22),transparent 62%),radial-gradient(700px 500px at 0% 60%,rgba(180,77,255,.3),transparent 62%)}
:root[data-theme=light] body:before{background:radial-gradient(900px 620px at 8% -8%,rgba(255,61,154,.22),transparent 62%),radial-gradient(900px 640px at 100% 6%,rgba(0,200,255,.2),transparent 62%),radial-gradient(900px 700px at 55% 108%,rgba(255,200,40,.25),transparent 62%)}
h1 em,.hero h1 em{background-image:linear-gradient(90deg,var(--c),var(--e),var(--d),var(--b),var(--a),var(--c));background-size:300%}
.primary{background:linear-gradient(135deg,var(--c),var(--e) 45%,var(--d));color:#2a0a3a;box-shadow:0 8px 26px rgba(255,138,31,.35)}.primary:hover{box-shadow:0 16px 40px rgba(255,61,154,.5)}
.stat:nth-child(1) b{color:var(--c)}.stat:nth-child(2) b{color:var(--d)}.stat:nth-child(3) b{color:var(--a)}.stat:nth-child(4) b{color:var(--e)}
.stat{border-top:3px solid var(--c)}.stat:nth-child(2){border-top-color:var(--d)}.stat:nth-child(3){border-top-color:var(--a)}.stat:nth-child(4){border-top-color:var(--e)}
.card{border-top:3px solid var(--k,var(--b))}.bento .card:nth-child(6n+1){--k:#ff3d9a}.bento .card:nth-child(6n+2){--k:#ffe14d}.bento .card:nth-child(6n+3){--k:#00f0ff}.bento .card:nth-child(6n+4){--k:#ff8a1f}.bento .card:nth-child(6n+5){--k:#b44dff}.bento .card:nth-child(6n){--k:#3dff9a}
.card:hover{border-color:var(--k,var(--a));box-shadow:0 22px 60px color-mix(in srgb,var(--k,var(--b)) 38%,transparent)}
.card.big{background:linear-gradient(155deg,color-mix(in srgb,var(--k) 22%,transparent),rgba(0,240,255,.08))}
.badge.live{background:rgba(61,255,154,.18);color:#3dff9a}
.marq div{-webkit-text-stroke:1px var(--a)}.marq span:nth-child(3n+1){color:var(--c);-webkit-text-stroke:0}.marq span:nth-child(3n+2){color:var(--d);-webkit-text-stroke:0}
.pill{border-color:rgba(255,225,77,.5);color:var(--c)}
.links a:hover{border-color:var(--d);color:var(--d)}
h2{background:linear-gradient(90deg,var(--text),var(--c));-webkit-background-clip:text;background-clip:text;color:transparent}
.cta{background:linear-gradient(135deg,rgba(255,61,154,.35),rgba(180,77,255,.3),rgba(0,240,255,.2))}
/* logo: transparent neon cut-out */
.brand{height:60px;width:auto;border-radius:0;box-shadow:none;filter:drop-shadow(0 0 10px rgba(255,255,255,.45))}
.hlogo{border-radius:0;box-shadow:none;width:min(560px,86vw);filter:drop-shadow(0 0 22px rgba(255,255,255,.35)) drop-shadow(0 20px 40px var(--glow))}
/* testers group banner (top) and call-to-action (bottom) */
.topbar{background:linear-gradient(90deg,var(--d),var(--e),var(--c),var(--a),var(--b));background-size:200%;animation:flow 10s linear infinite;position:relative;z-index:21}
.topbar a{display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:center;align-items:center;padding:9px 16px;text-decoration:none;color:#1d0b3a;text-align:center;font-size:14px;line-height:1.35}
.topbar b{font-family:Unbounded;font-size:13px;letter-spacing:.02em}
.topbar span{font-weight:500}
.topbar a:hover b{text-decoration:underline}
.joinwrap{padding:50px 0 10px}
.join{display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap;border:1px solid var(--line);border-radius:30px;padding:38px 40px;background:linear-gradient(135deg,rgba(255,61,154,.28),rgba(255,138,31,.2),rgba(0,240,255,.16));box-shadow:0 20px 60px var(--glow)}
.join h2{font-size:clamp(24px,3.4vw,38px);margin-bottom:8px}.join p{color:var(--dim);max-width:560px}
@media(max-width:700px){.topbar span{display:none}.join{padding:26px}}
/* testers group: professional banner + CTA card */
.topbar{background:linear-gradient(100deg,#2a0a5e,#5a1a8f 40%,#b0206f 75%,#ff7a1a);animation:none;border-bottom:1px solid rgba(255,255,255,.18);box-shadow:0 6px 24px rgba(0,0,0,.25)}
.tb-in{max-width:1200px;margin:0 auto;padding:9px 24px;display:flex;align-items:center;gap:14px}
.tb-ic{flex:0 0 auto;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32)}
.tb-tx{flex:1;display:flex;flex-direction:column;min-width:0;color:#fff;line-height:1.25}
.tb-tx b{font-family:Unbounded;font-size:14px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-tx small{font-size:12.5px;opacity:.88;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-btn{flex:0 0 auto;display:inline-flex;gap:8px;align-items:center;padding:9px 18px;border-radius:99px;background:#fff;color:#3a0f7a;font-weight:700;font-size:14px;text-decoration:none;transition:.25s;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.tb-btn i{font-style:normal;transition:transform .25s}.tb-btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.35)}.tb-btn:hover i{transform:translateX(4px)}
.topbar a{padding:0}
.join2{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:36px;align-items:center;padding:40px 46px;border-radius:34px;overflow:hidden;border:1px solid var(--line);background:radial-gradient(500px 260px at 0 0,rgba(255,61,154,.4),transparent 70%),radial-gradient(500px 280px at 100% 100%,rgba(0,240,255,.28),transparent 70%),linear-gradient(135deg,rgba(90,26,143,.55),rgba(255,138,31,.18));box-shadow:0 24px 70px var(--glow)}
.j-art{position:relative;width:190px;height:150px}.j-art img{position:absolute;width:92px;height:92px;border-radius:24px;box-shadow:0 14px 30px rgba(0,0,0,.45);border:2px solid rgba(255,255,255,.55);animation:bob 5s ease-in-out infinite}
.j-art img:nth-child(1){left:0;top:30px;transform:rotate(-10deg)}.j-art img:nth-child(2){left:50px;top:0;animation-delay:-1.6s;z-index:2}.j-art img:nth-child(3){left:98px;top:40px;transform:rotate(9deg);animation-delay:-3s}
@keyframes bob{50%{translate:0 -10px}}
.j-k{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c);margin-bottom:6px}
.j-tx h2{font-size:clamp(24px,3vw,36px);margin-bottom:8px;color:#fff;-webkit-text-fill-color:#fff;background:none}.j-tx p{color:var(--dim);max-width:560px}
.j-ch{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:16px 0 0}.j-ch li{padding:6px 14px;border-radius:99px;font-size:13px;font-weight:600;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff}
.j-btn{white-space:nowrap}.j-btn i{font-style:normal}
@media(max-width:900px){.join2{grid-template-columns:1fr;padding:28px;text-align:left}.j-art{display:none}}
@media(max-width:560px){.tb-tx small{display:none}.tb-tx b{font-size:12.5px}.tb-in{padding:8px 14px}}
/* testers banner v2 */
.topbar{position:relative;overflow:hidden;background:linear-gradient(100deg,#1c0646 0%,#4a1590 30%,#c01f78 68%,#ff7a1a 100%);background-size:100% 100%;border-bottom:1px solid rgba(255,255,255,.25);box-shadow:0 8px 30px rgba(120,20,160,.45)}
.topbar:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);transform:translateX(-100%);animation:tbshine 5.5s ease-in-out infinite}
.topbar:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 12% 120%,rgba(0,240,255,.35),transparent 40%),radial-gradient(circle at 90% -40%,rgba(255,225,77,.35),transparent 45%)}
@keyframes tbshine{0%,55%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.tb-in{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:18px}
.tb-stack{display:flex;flex:0 0 auto;padding-left:10px}
.tb-stack img{width:42px;height:42px;border-radius:13px;border:2px solid #fff;margin-left:-12px;box-shadow:0 6px 14px rgba(0,0,0,.4);animation:tbbob 3.6s ease-in-out infinite}
.tb-stack img:nth-child(2){animation-delay:-1.2s}.tb-stack img:nth-child(3){animation-delay:-2.4s}
@keyframes tbbob{50%{transform:translateY(-4px) rotate(-3deg)}}
.tb-tx{flex:1;min-width:0;display:flex;flex-direction:column;color:#fff;line-height:1.25}
.tb-tx em{font-style:normal;align-self:flex-start;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#2b0a50;background:linear-gradient(90deg,#ffe14d,#ffb02e);padding:2px 9px;border-radius:99px;margin-bottom:3px}
.tb-tx b{font-family:Unbounded;font-size:clamp(14px,1.6vw,19px);letter-spacing:-.02em;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.tb-tx b u{text-decoration:none;color:#ffe14d}
.tb-tx small{font-size:13px;opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .tb-btn{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;padding:13px 26px;border-radius:99px;background:linear-gradient(135deg,#ffe14d,#ff9a1f);color:#2b0a50;font-weight:800;font-size:15px;text-decoration:none;overflow:hidden;box-shadow:0 0 0 0 rgba(255,225,77,.7),0 8px 22px rgba(0,0,0,.35);animation:tbpulse 2.4s infinite;transition:transform .25s}
.topbar .tb-btn i{font-style:normal;font-size:18px;transition:transform .25s}
.topbar .tb-btn:hover{transform:translateY(-2px) scale(1.04)}.topbar .tb-btn:hover i{transform:translateX(5px)}
@keyframes tbpulse{70%{box-shadow:0 0 0 14px rgba(255,225,77,0),0 8px 22px rgba(0,0,0,.35)}100%{box-shadow:0 0 0 0 rgba(255,225,77,0),0 8px 22px rgba(0,0,0,.35)}}
@media(max-width:640px){.tb-stack{display:none}.tb-in{padding:10px 14px;gap:12px}.tb-tx small{display:none}.tb-tx b{font-size:13.5px}.topbar .tb-btn{padding:10px 16px;font-size:14px}}
@media(prefers-reduced-motion:reduce){.topbar:before,.tb-stack img,.topbar .tb-btn{animation:none}}
/* first screen: headline visible without scrolling */
.hero{padding:34px 0 26px}
.hero h1,h1{font-size:clamp(34px,4.7vw,72px);line-height:1.04;letter-spacing:-.04em}
.hero .pill{justify-self:start;margin-bottom:18px}
.hero .lead{margin:16px 0 22px;font-size:clamp(16px,1.35vw,19px);max-width:560px}
.hlogo{width:min(400px,60vw);margin-bottom:18px}
@media(min-width:1000px){.hero .w{grid-template-columns:1.35fr .65fr;column-gap:24px}.hero .hlogo{width:min(420px,100%)}}
@media(max-width:999px){.hero{padding:22px 0 18px}.hero .hlogo{width:min(260px,62vw)}}
nav .w{height:68px}.brand{height:52px}
.hero{padding-top:6px}
.hero .w{align-items:start}
.hero .hlogo{margin-top:4px}
@media(max-width:999px){.hero{padding-top:4px}}

/* visitor counter */
.vrow{flex:1 0 100%;display:flex;justify-content:center;margin-bottom:6px}
.vc{display:inline-flex;align-items:center;gap:10px;padding:9px 20px;border-radius:99px;border:1px solid var(--line);background:linear-gradient(135deg,rgba(255,61,154,.18),rgba(0,240,255,.14));color:var(--dim);font-size:14px;font-weight:600}
.vc i{width:9px;height:9px;border-radius:50%;background:#3dff9a;box-shadow:0 0 10px #3dff9a;animation:pulse 1.8s infinite}
.vc b{font-family:Unbounded;font-size:16px;color:var(--c);min-width:2ch;text-align:right}

.vrow{gap:12px;flex-wrap:wrap}
.vc i.gold{background:var(--c);box-shadow:0 0 10px var(--c);animation:none}

.short video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
#promo .trailer{grid-template-columns:.8fr 1.2fr}
@media(max-width:800px){#promo .trailer{grid-template-columns:1fr}}

/* hero video */
.herovid{position:relative;width:min(300px,64vw);aspect-ratio:9/16;max-height:min(530px,64vh);justify-self:end;border-radius:28px;border:2px solid rgba(255,255,255,.4);background:#000;box-shadow:0 30px 80px var(--glow),0 0 0 6px rgba(255,255,255,.06);margin:6px 0 26px}
.herovid video{width:100%;height:100%;object-fit:cover;display:block;border-radius:26px}
.hbadge{position:absolute;left:-26px;top:-22px;width:110px;height:auto;filter:drop-shadow(0 0 10px rgba(255,255,255,.5)) drop-shadow(0 8px 14px rgba(0,0,0,.4));animation:hfloat 6s ease-in-out infinite;pointer-events:none}
.hsnd{position:absolute;right:12px;bottom:12px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(10,5,36,.6);color:#fff;font-size:20px;cursor:pointer;backdrop-filter:blur(6px);display:grid;place-items:center}
.hsnd:hover{background:rgba(255,61,154,.7)}
.hyt{position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);white-space:nowrap;font-size:13px;font-weight:600;color:var(--dim);text-decoration:none}
.hyt:hover{color:var(--c)}
@media(min-width:1000px){.hero .herovid{grid-column:2;grid-row:1/span 6;justify-self:end;margin:6px 24px 0 0}.hero .w{align-items:center}}
@media(max-width:999px){.herovid{justify-self:start;margin:20px 0 38px 22px;width:min(250px,62vw)}.hbadge{width:90px;left:-18px;top:-18px}}
@media(prefers-reduced-motion:reduce){.hbadge{animation:none}}
.brand{height:64px}
/* mobile fixes */
@media(max-width:999px){
 .hero .w{display:flex;flex-direction:column;align-items:flex-start}
 .hero .w>*{order:1}
 .hero .herovid{order:9;align-self:center;margin:26px 0 42px}
}
@media(max-width:700px){
 .topbar .tb-tx{display:flex}
 .topbar .tb-btn span{display:inline}
}