@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=DM+Mono:wght@400;500&display=swap&font-display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:'Outfit',system-ui,sans-serif;font-size:15px;line-height:1.6;overflow-x:hidden;background:#0e0f11;color:#f4f4f5}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:inherit}

:root{
  --bg:#0e0f11;--bg2:#141518;--bg3:#1a1b1f;--bg4:#202126;--bg5:#27282e;
  --ac:#f59e0b;--ac2:#fbbf24;--ac3:#fcd34d;--acd:#2a1f05;--acr:rgba(245,158,11,.25);
  --bl:#3b82f6;--bld:#1e3a5f;
  --t1:#f4f4f5;--t2:#a1a1aa;--t3:#52525b;--t4:#3f3f46;
  --b1:rgba(255,255,255,.07);--b2:rgba(255,255,255,.13);--b3:rgba(245,158,11,.28);
  --green:#22c55e;--red:#ef4444;
  --r:8px;--rl:12px;--rxl:16px;--r2xl:20px;
}

::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bg5);border-radius:2px}

h1,h2,h3,h4,h5{font-weight:700;line-height:1.15;letter-spacing:-.02em;color:var(--t1)}
.mono{font-family:'DM Mono',monospace}
.grad{background:linear-gradient(135deg,#f59e0b,#fb923c,#fbbf24);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.muted{color:var(--t2)}

/* Layout */
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.wrap-sm{max-width:760px;margin:0 auto;padding:0 20px}
.section{padding:60px 0}
.section-sm{padding:40px 0}

/* Nav */
.topnav{position:sticky;top:0;z-index:200;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:#0e0f11;border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 1px 0 rgba(255,255,255,.05)}
.brandmark{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brandmark img{width:42px;height:42px;object-fit:contain}
.logo{font-weight:800;font-size:17px;letter-spacing:.06em;color:#f4f4f5}
.tagline-mini{font-size:9px;color:#71717a;letter-spacing:.06em;text-transform:uppercase;margin-top:1px}
.nav-pills{display:flex;gap:1px;align-items:center}
.pill{padding:5px 12px;border-radius:6px;font-size:13px;font-weight:700;color:#a1a1aa;transition:all .12s;white-space:nowrap;letter-spacing:.01em}
.pill:hover{color:#f4f4f5;background:rgba(255,255,255,.08)}
.pill.active{color:var(--ac);background:var(--acd)}
.nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.nav-right .btn-ghost{color:#a1a1aa;border-color:rgba(255,255,255,.15)}
.nav-right .btn-ghost:hover{color:#f4f4f5;border-color:var(--acr)}
.nav-ham{display:none;flex-direction:column;gap:4px;padding:7px;cursor:pointer;border-radius:6px;background:none;transition:background .12s}
.nav-ham:hover{background:rgba(255,255,255,.08)}
.nav-ham span{width:20px;height:2px;background:#a1a1aa;border-radius:1px;display:block}
.nav-mobile{display:none;position:fixed;inset:64px 0 0 0;background:#0e0f11;z-index:190;padding:14px 16px;flex-direction:column;gap:3px;border-top:1px solid rgba(255,255,255,.08);overflow-y:auto}
.nav-mobile.open{display:flex}
.nav-mobile .pill{font-size:14px;padding:10px 12px;border-radius:var(--r);color:#a1a1aa;font-weight:700}
.nav-mobile .pill:hover{background:rgba(255,255,255,.08);color:#f4f4f5}
.nav-mobile .pill.active{color:var(--ac);background:var(--acd)}
.nav-mob-btns{display:flex;flex-direction:column;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08)}

/* Buttons */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 20px;background:var(--ac);color:#0e0f11;font-size:13px;font-weight:700;border-radius:var(--r);transition:background .12s,transform .1s;white-space:nowrap}
.btn-primary:hover{background:var(--ac2);transform:translateY(-1px)}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 20px;background:transparent;color:var(--t2);font-size:13px;font-weight:500;border:1px solid var(--b2);border-radius:var(--r);transition:all .12s;white-space:nowrap}
.btn-ghost:hover{color:var(--t1);border-color:var(--b3)}
.btn-sm{padding:7px 15px;font-size:12px}
.btn-lg{padding:12px 24px;font-size:14px}
.btn-full{width:100%;display:flex;justify-content:center}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;letter-spacing:.04em;background:var(--bg4);color:var(--t2);border:1px solid var(--b1)}
.badge.live{background:rgba(239,68,68,.1);color:#f87171;border-color:rgba(239,68,68,.22)}
.badge.green{background:rgba(34,197,94,.1);color:var(--green);border-color:rgba(34,197,94,.2)}
.badge.amber{background:var(--acd);color:var(--ac);border-color:var(--acr)}
.badge.blue{background:rgba(59,130,246,.1);color:#60a5fa;border-color:rgba(59,130,246,.2)}

.live-dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0;animation:blink 2s ease infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

.hero-tag{display:inline-flex;align-items:center;gap:7px;background:var(--acd);border:1px solid var(--acr);border-radius:20px;padding:4px 12px;font-size:11px;font-weight:600;color:var(--ac);letter-spacing:.06em;text-transform:uppercase}

/* Cards */
.card{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--rxl);padding:20px;transition:border-color .15s}
.card:hover{border-color:var(--b2)}
.feat-card{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--rxl);padding:20px;transition:border-color .15s,transform .18s}
.feat-card:hover{border-color:var(--b3);transform:translateY(-2px)}
.feat-icon{width:38px;height:38px;border-radius:9px;background:var(--acd);border:1px solid var(--acr);display:flex;align-items:center;justify-content:center;font-size:17px;margin-bottom:12px}
.feat-card h3{font-size:14px;font-weight:700;margin-bottom:5px}
.feat-card p{font-size:13px;color:var(--t2);line-height:1.6}
.content-card{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--rxl);padding:22px;transition:border-color .15s}
.content-card:hover{border-color:var(--b2)}
.content-card h3{font-size:15px;font-weight:700;margin-bottom:7px}
.content-card p{font-size:13px;color:var(--t2);line-height:1.65}
.nav-card{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--rxl);padding:20px;display:flex;flex-direction:column;gap:7px;transition:border-color .15s,transform .18s}
.nav-card:hover{border-color:var(--b3);transform:translateY(-2px)}
.nav-card h3{font-size:14px;font-weight:700}
.nav-card p{font-size:12px;color:var(--t2);flex:1;line-height:1.6}
.info-card{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--rl);padding:18px}
.info-card h3{font-size:14px;font-weight:700;margin-bottom:5px}
.info-card p{font-size:13px;color:var(--t2);line-height:1.6}
.step-card{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--rxl);padding:22px}
.step-card h3{font-size:14px;font-weight:700;margin-bottom:7px}
.step-card p{font-size:13px;color:var(--t2);line-height:1.6}
.step-num{width:34px;height:34px;border-radius:8px;background:var(--ac);color:#0e0f11;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}

/* Grids */
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ga2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.ga3{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.ga4{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}

/* Stats row */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:18px}
.stat-box{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--rl);padding:16px}
.stat-box .lbl{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.6px;font-weight:600;margin-bottom:5px}
.stat-box .val{font-size:24px;font-weight:800;letter-spacing:-.03em}
.stat-box .sub{font-size:11px;color:var(--t3);margin-top:2px}

/* CTA strip */
.cta-strip{background:linear-gradient(135deg,var(--bg3),var(--bg4));border:1px solid var(--b2);border-radius:var(--r2xl);padding:32px 36px;display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.cta-strip h3{font-size:clamp(17px,2.5vw,22px);margin-bottom:6px}
.cta-strip p{font-size:13px;color:var(--t2);max-width:480px;line-height:1.65}

/* Stats bar */
.stats-bar{border-top:1px solid var(--b1);border-bottom:1px solid var(--b1);background:var(--bg2)}
.stats-bar-inner{display:grid;grid-template-columns:repeat(4,1fr);text-align:center}
.sbi{padding:18px 14px;border-right:1px solid var(--b1)}
.sbi:last-child{border-right:none}
.sbi .num{font-size:24px;font-weight:800;letter-spacing:-.03em;color:var(--ac)}
.sbi .lbl{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;margin-top:3px}

/* Hero */
.hero-split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:56px 0 44px}
.hero-h1{font-size:clamp(30px,4.5vw,52px);font-weight:800;letter-spacing:-.04em;line-height:1.06;margin-bottom:12px}
.hero-sub{font-size:15px;color:var(--t2);line-height:1.7;max-width:420px;margin-bottom:20px}
.hero-actions{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
.trust-chips{display:flex;flex-wrap:wrap;gap:6px}
.trust-chip{font-size:11px;color:var(--t3);background:var(--bg3);border:1px solid var(--b1);padding:4px 10px;border-radius:20px}
.hero-preview{background:var(--bg2);border:1px solid var(--b2);border-radius:var(--r2xl);overflow:hidden}
.hero-preview-video{background:#000;aspect-ratio:16/9;position:relative;display:flex;align-items:center;justify-content:center}
.vp-center{text-align:center}
.vp-center .vp-icon{font-size:32px;display:block;opacity:.4;margin-bottom:6px}
.vp-center .vp-lbl{font-size:12px;color:#666}
.vp-tag{position:absolute;top:10px;left:10px;background:rgba(220,30,60,.92);color:#fff;font-size:10px;font-weight:700;padding:4px 9px;border-radius:5px;display:flex;align-items:center;gap:5px}
.vp-viewers{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.7);color:#fff;font-size:11px;padding:4px 9px;border-radius:5px}
.hp-meta{padding:12px 16px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--b1)}
.hp-meta-title{font-size:13px;font-weight:600}
.hp-meta-sub{font-size:10px;color:var(--t3);margin-top:1px}
.hp-badges{display:flex;gap:7px;padding:0 16px 12px;flex-wrap:wrap}

/* Page hero */
.page-hero{padding:44px 0 32px;border-bottom:1px solid var(--b1)}
.page-hero h1{font-size:clamp(24px,3.5vw,38px);font-weight:800;letter-spacing:-.03em;margin:10px 0 9px}
.page-hero p{font-size:14px;color:var(--t2);max-width:540px;line-height:1.7}

/* Dashboard */
.dash-layout{display:grid;grid-template-columns:196px 1fr;gap:22px;align-items:start}
.sidebar{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--rxl);padding:12px;position:sticky;top:78px}
.side-link{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r);font-size:13px;font-weight:500;color:var(--t2);transition:all .1s;margin-bottom:2px}
.side-link:hover{color:var(--t1);background:var(--bg3)}
.side-link.active{color:var(--ac);background:var(--acd);font-weight:600}
.dash-highlight{background:var(--bg2);border:1px solid var(--b2);border-radius:var(--rxl);overflow:hidden;margin-bottom:16px}
.dash-live-inner{padding:20px;border-bottom:1px solid var(--b1)}
.dash-live-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.dsm{background:var(--bg3);border:1px solid var(--b1);border-radius:var(--rl);padding:12px 16px;text-align:center;min-width:108px}
.dsm .k{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}
.dsm .v{font-size:20px;font-weight:800;color:var(--ac);letter-spacing:-.03em}
.mini-item{display:flex;align-items:center;justify-content:space-between;padding:11px 20px;border-bottom:1px solid var(--b1)}
.mini-item:last-child{border-bottom:none}
.mini-item strong{font-size:13px}
.mini-item .muted{font-size:11px;color:var(--t3)}
.dash-actions{display:flex;gap:8px;flex-wrap:wrap}
.event-row{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--rl);padding:11px 15px;display:flex;align-items:center;gap:12px;margin-bottom:8px;cursor:pointer;transition:border-color .12s}
.event-row:hover{border-color:var(--b2)}
.event-thumb{width:42px;height:30px;border-radius:6px;background:var(--bg4);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.event-info{flex:1;min-width:0}
.event-info .title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.event-info .meta{font-size:11px;color:var(--t3);margin-top:2px}
.s-live{background:rgba(239,68,68,.1);color:#f87171;border:1px solid rgba(239,68,68,.2);font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap;flex-shrink:0}
.s-scheduled{background:rgba(59,130,246,.1);color:#60a5fa;border:1px solid rgba(59,130,246,.2);font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap;flex-shrink:0}
.s-ended{background:var(--bg4);color:var(--t3);border:1px solid var(--b1);font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap;flex-shrink:0}
.s-draft{background:var(--acd);color:var(--ac);border:1px solid var(--acr);font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap;flex-shrink:0}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}

/* Watch */
.watch-shell{display:grid;grid-template-columns:1fr 320px;height:calc(100vh - 64px);overflow:hidden}
.video-col{display:flex;flex-direction:column;background:#000}
.video-area{flex:1;background:#000;position:relative;display:flex;align-items:center;justify-content:center;min-height:0}
.video-placeholder{text-align:center}
.video-placeholder .icon{font-size:42px;display:block;margin-bottom:8px}
.video-placeholder p{font-size:13px;color:#666}
.video-placeholder small{font-size:11px;color:#444;display:block;margin-top:2px}
.live-tag{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:5px;background:rgba(220,30,60,.92);color:#fff;font-size:10px;font-weight:700;padding:4px 9px;border-radius:5px}
.viewers-tag{position:absolute;top:12px;right:12px;background:rgba(0,0,0,.7);color:#fff;font-size:11px;padding:4px 9px;border-radius:5px}
.video-bar{padding:12px 18px;border-top:1px solid rgba(255,255,255,.05);background:#0c0d0f;flex-shrink:0}
.v-title{font-size:14px;font-weight:700;margin-bottom:2px;color:var(--t1)}
.v-org{font-size:11px;color:var(--t3)}
.chat-col{display:flex;flex-direction:column;border-left:1px solid var(--b1);background:var(--bg2);overflow:hidden}
.chat-hd{padding:11px 15px;border-bottom:1px solid var(--b1);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.chat-hd strong{font-size:13px}
.chat-msgs{flex:1;overflow-y:auto;padding:11px 13px;display:flex;flex-direction:column;gap:10px;min-height:0}
.msg{display:flex;flex-direction:column;gap:2px}
.msg-sender{font-size:11px;font-weight:600;color:var(--t2)}
.msg-sender.host{color:var(--ac)}
.msg-text{font-size:13px;color:var(--t1);line-height:1.45}
.msg-time{font-size:10px;color:var(--t3)}
.chat-input-area{padding:10px 13px;border-top:1px solid var(--b1);flex-shrink:0}
.chat-input-row{display:flex;gap:7px}
.chat-inp{flex:1;background:var(--bg3);border:1px solid var(--b1);border-radius:7px;padding:8px 11px;font-size:13px;color:var(--t1);outline:none;transition:border .12s}
.chat-inp:focus{border-color:var(--ac)}
.chat-inp::placeholder{color:var(--t3)}
.send-btn{background:var(--ac);border:none;color:#0e0f11;padding:8px 13px;border-radius:7px;cursor:pointer;font-size:13px;font-weight:700;transition:background .12s}
.send-btn:hover{background:var(--ac2)}
.watch-info-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px;padding:18px 20px;max-width:1100px;margin:0 auto}
.watch-meta-card{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--rxl);padding:22px}
.watch-meta-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.watch-meta-list>div{display:flex;gap:10px;font-size:13px}
.watch-meta-list strong{color:var(--t2);min-width:88px;font-weight:500;flex-shrink:0}

/* Studio */
.studio-shell{display:grid;grid-template-columns:1fr 274px;gap:20px;align-items:start}
.studio-preview{background:#000;border-radius:var(--rxl);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:16px;overflow:hidden;border:1px solid var(--b1)}
.metrics-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.metric{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--rl);padding:13px}
.metric .m-label{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-bottom:4px}
.metric .m-val{font-size:17px;font-weight:700}
.metric .m-val.good{color:var(--green)}
.field-row{margin-bottom:10px}
.field-lbl{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-bottom:4px}
.field-val{display:flex;align-items:center;gap:9px;background:var(--bg3);border:1px solid var(--b1);border-radius:7px;padding:8px 11px}
.field-val code{flex:1;font-size:11px;color:var(--ac);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'DM Mono',monospace}
.copy-btn{font-size:10px;padding:3px 8px;border:1px solid var(--b2);border-radius:4px;color:var(--t2);cursor:pointer;transition:all .1s;background:none;flex-shrink:0}
.copy-btn:hover{color:var(--t1);background:var(--bg4)}
.go-live{width:100%;padding:12px;background:var(--green);color:#001a0a;font-size:14px;font-weight:800;border-radius:var(--r);cursor:pointer;margin-bottom:11px;transition:filter .12s}
.go-live:hover{filter:brightness(1.08)}
.go-live.ending{background:var(--red);color:#fff}
.preview-list{display:flex;flex-direction:column}
.preview-item{padding:11px 0;border-bottom:1px solid var(--b1)}
.preview-item:last-child{border-bottom:none;padding-bottom:0}
.preview-item h4{font-size:12px;font-weight:600;margin-bottom:3px}
.preview-item p{font-size:12px;color:var(--t3);line-height:1.5}

/* Forms */
.form-section{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--rxl);padding:22px;margin-bottom:14px}
.form-section h3{font-size:15px;font-weight:700;margin-bottom:15px}
.form-field{display:flex;flex-direction:column;gap:5px;margin-bottom:13px}
.form-field:last-child{margin-bottom:0}
.form-field label{font-size:11px;font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:.5px}
.form-field input,.form-field select,.form-field textarea{background:var(--bg3);border:1px solid var(--b1);border-radius:var(--r);padding:9px 12px;font-size:13px;color:var(--t1);outline:none;transition:border .12s}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--ac)}
.form-field input::placeholder,.form-field textarea::placeholder{color:var(--t3)}
.form-field select option{background:var(--bg3)}
.form-field textarea{resize:vertical;min-height:88px;line-height:1.6}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.form-hint{font-size:11px;color:var(--t3)}
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--b1)}
.toggle-row:last-child{border-bottom:none;padding-bottom:0}
.toggle-row strong{font-size:13px;font-weight:600}
.sw-track{width:40px;height:22px;border-radius:11px;background:var(--bg4);border:1px solid var(--b2);position:relative;cursor:pointer;transition:background .15s;flex-shrink:0}
.sw-track.on{background:var(--ac);border-color:var(--ac)}
.sw-thumb{width:16px;height:16px;border-radius:50%;background:#fff;position:absolute;top:2px;left:2px;transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.sw-track.on .sw-thumb{transform:translateX(18px)}

/* Auth */
.auth-wrap{min-height:calc(100vh - 64px);display:flex;align-items:center;justify-content:center;padding:28px 20px}
.auth-card{display:grid;grid-template-columns:1fr 1fr;max-width:800px;width:100%;background:var(--bg2);border:1px solid var(--b1);border-radius:var(--r2xl);overflow:hidden}
.auth-visual{background:linear-gradient(150deg,var(--bg3),var(--bg4));border-right:1px solid var(--b1);padding:36px 30px}
.auth-visual h1{font-size:clamp(19px,3vw,26px);margin:12px 0 9px}
.auth-visual p{font-size:13px;color:var(--t2);line-height:1.7}
.auth-form{padding:36px 30px}
.auth-form h2{font-size:21px;font-weight:800;margin-bottom:3px}
.auth-form>.muted{font-size:13px;color:var(--t3);display:block;margin-bottom:18px}
.preview-item{padding:11px 0;border-bottom:1px solid var(--b1)}
.preview-item:last-child{border-bottom:none;padding-bottom:0}
.preview-item h4{font-size:12px;font-weight:600;margin-bottom:3px}
.preview-item p{font-size:12px;color:var(--t3)}

/* Pricing */
.billing-toggle{display:flex;gap:3px;padding:3px;background:var(--bg3);border:1px solid var(--b1);border-radius:9px}
.toggle-opt{padding:6px 16px;border-radius:7px;font-size:12px;font-weight:600;color:var(--t2);cursor:pointer;transition:all .12s;font-family:inherit;background:none;border:none}
.toggle-opt.active{background:var(--ac);color:#0e0f11}
.save-pill{background:rgba(34,197,94,.15);color:var(--green);font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;vertical-align:middle;margin-left:4px}
.plans-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:32px}
.plan{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--r2xl);padding:24px;display:flex;flex-direction:column;position:relative}
.plan.featured{border-color:var(--acr);background:linear-gradient(155deg,var(--acd) 0%,var(--bg2) 50%)}
.plan-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--ac);color:#0e0f11;font-size:10px;font-weight:800;padding:3px 12px;border-radius:20px;white-space:nowrap;letter-spacing:.04em}
.plan-name{font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.8px;margin-bottom:9px}
.plan-price{font-size:42px;font-weight:800;letter-spacing:-.05em;line-height:1;margin-bottom:2px}
.plan-price sup{font-size:17px;vertical-align:top;margin-top:9px;font-weight:500}
.plan-cadence{font-size:12px;color:var(--t3);margin-bottom:18px}
.plan-features{list-style:none;flex:1;margin-bottom:20px;display:flex;flex-direction:column;gap:7px}
.plan-features li{font-size:12px;color:var(--t2);display:flex;align-items:flex-start;gap:6px;line-height:1.45}

/* Gate */
.gate-wrap{min-height:calc(100vh - 64px);display:flex;align-items:center;justify-content:center;padding:28px 20px}
.gate-card{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--r2xl);padding:38px 34px;width:100%;max-width:400px;text-align:center}
.gate-lock{font-size:44px;display:block;margin-bottom:16px}
.gate-card h1{font-size:22px;font-weight:800;margin-bottom:7px}
.gate-card>p{font-size:13px;color:var(--t2);line-height:1.65;margin-bottom:22px}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;align-items:start}
.contact-list{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--rxl);padding:22px;display:flex;flex-direction:column}
.contact-item{padding:13px 0;border-bottom:1px solid var(--b1)}
.contact-item:first-child{padding-top:0}
.contact-item:last-child{border-bottom:none;padding-bottom:0}
.contact-item h3{font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px}
.contact-item a{font-size:13px;color:var(--ac)}
.contact-item p{font-size:13px;color:var(--t1)}

/* Use tags */
.use-tag{font-size:12px;color:var(--t2);background:var(--bg3);border:1px solid var(--b1);padding:4px 11px;border-radius:20px}
.use-cases{display:flex;flex-wrap:wrap;gap:7px}

/* Footer */
.footer{border-top:1px solid rgba(255,255,255,.08);background:#0e0f11;padding:32px 0}
.footer-inner{max-width:1100px;margin:0 auto;padding:0 20px;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer-inner small{font-size:13px;color:#a1a1aa;line-height:2}
.footer-inner a{color:#f4f4f5;font-weight:700;transition:color .12s}
.footer-inner a:hover{color:var(--ac)}
.footer .logo{color:#f4f4f5}
.footer .tagline-mini{color:#52525b}

/* Animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeUp .45s ease both}
.d1{animation-delay:.05s}.d2{animation-delay:.12s}.d3{animation-delay:.2s}.d4{animation-delay:.28s}

/* Responsive */
@media(max-width:1024px){
  .hero-split{grid-template-columns:1fr;gap:28px;padding:40px 0 32px}
  .hero-preview{max-width:440px}
  .dash-layout{grid-template-columns:1fr}
  .sidebar{position:static}
  .studio-shell{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .watch-info-grid{grid-template-columns:1fr;padding:16px 20px}
  .g2,.g3,.g4{grid-template-columns:1fr}
}
@media(max-width:768px){
  .topnav{padding:0 16px}
  .nav-pills{display:none}
  .nav-right{display:none}
  .nav-ham{display:flex}
  .wrap,.wrap-sm{padding:0 16px}
  .section{padding:40px 0}
  .section-sm{padding:28px 0}
  .hero-h1{font-size:clamp(26px,8vw,38px)}
  .auth-card{grid-template-columns:1fr}
  .auth-visual{display:none}
  .watch-shell{grid-template-columns:1fr;height:auto}
  .chat-col{height:300px}
  .stats-bar-inner{grid-template-columns:repeat(2,1fr)}
  .sbi:nth-child(2){border-right:none}
  .plans-grid{grid-template-columns:1fr}
  .cta-strip{flex-direction:column;padding:24px 22px}
  .form-grid{grid-template-columns:1fr}
  .gate-card{padding:28px 20px}
  .metrics-row{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .hero-actions{flex-direction:column}
  .hero-actions a{width:100%;justify-content:center}
  .ga2,.ga3,.ga4{grid-template-columns:1fr}
  .sbi .num{font-size:20px}
}

/* ═══════════════════════════════════════════════════════
   ENHANCEMENTS v2
═══════════════════════════════════════════════════════ */

/* ── Hamburger → X animation ───────────────────────── */
.nav-ham span{transition:transform .22s ease,opacity .22s ease}
.nav-ham.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-ham.is-open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-ham.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ── Hero animated glow ────────────────────────────── */
.hero-bg{position:relative;overflow:hidden}
.hero-bg::before{
  content:'';position:absolute;
  top:-20%;left:40%;
  width:520px;height:520px;
  background:radial-gradient(ellipse,rgba(245,158,11,.07) 0%,transparent 70%);
  pointer-events:none;z-index:0;
  animation:glowPulse 6s ease-in-out infinite;
}
.hero-bg::after{
  content:'';position:absolute;
  top:10%;left:-5%;
  width:360px;height:360px;
  background:radial-gradient(ellipse,rgba(59,130,246,.05) 0%,transparent 70%);
  pointer-events:none;z-index:0;
  animation:glowPulse 8s ease-in-out infinite reverse;
}
.hero-bg>*{position:relative;z-index:1}
@keyframes glowPulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}

/* ── Enhanced card hovers ──────────────────────────── */
.feat-card{transition:border-color .2s,transform .2s,box-shadow .2s}
.feat-card:hover{border-color:var(--acr);transform:translateY(-4px);box-shadow:0 8px 32px rgba(245,158,11,.08)}
.content-card{transition:border-color .2s,transform .2s,box-shadow .2s}
.content-card:hover{border-color:var(--acr);transform:translateY(-3px);box-shadow:0 6px 24px rgba(245,158,11,.06)}
.nav-card{transition:border-color .2s,transform .2s,box-shadow .2s}
.nav-card:hover{border-color:var(--acr);transform:translateY(-3px);box-shadow:0 6px 24px rgba(245,158,11,.06)}

/* ── How it works (visual steps) ──────────────────── */
.steps-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative}
.steps-strip::before{
  content:'';position:absolute;
  top:28px;left:calc(16.67% + 20px);
  width:calc(66.67% - 40px);height:2px;
  background:linear-gradient(90deg,var(--acr),rgba(245,158,11,.1));
  z-index:0;
}
.step-block{text-align:center;padding:0 20px;position:relative;z-index:1}
.step-circle{
  width:56px;height:56px;border-radius:50%;
  background:var(--bg2);border:2px solid var(--acr);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:800;color:var(--ac);
  margin:0 auto 18px;
  font-family:'Outfit',sans-serif;
}
.step-block h3{font-size:15px;font-weight:700;margin-bottom:7px}
.step-block p{font-size:13px;color:var(--t2);line-height:1.6}

/* ── Testimonials ──────────────────────────────────── */
.testimonials{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.tcard{
  background:var(--bg2);border:1px solid var(--b1);
  border-radius:var(--r2xl);padding:26px;
  position:relative;transition:border-color .2s,transform .2s;
}
.tcard:hover{border-color:var(--acr);transform:translateY(-3px)}
.tcard::before{
  content:'\201C';position:absolute;
  top:14px;right:20px;
  font-size:52px;color:var(--acr);
  font-family:Georgia,serif;line-height:1;
}
.tcard-text{font-size:14px;color:var(--t2);line-height:1.75;margin-bottom:20px;font-style:italic}
.tcard-author{display:flex;align-items:center;gap:12px}
.tcard-avatar{
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,var(--ac),#fb923c);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:800;color:#0e0f11;flex-shrink:0;
}
.tcard-name{font-size:13px;font-weight:700;color:var(--t1)}
.tcard-role{font-size:11px;color:var(--t3);margin-top:1px}
.stars{color:var(--ac);font-size:13px;margin-bottom:12px;letter-spacing:2px}

/* ── FAQ accordion ─────────────────────────────────── */
.faq-list{display:flex;flex-direction:column;gap:8px}
.faq-item{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--rl);overflow:hidden;transition:border-color .15s}
.faq-item.open{border-color:var(--acr)}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;cursor:pointer;
  font-size:14px;font-weight:600;color:var(--t1);
  transition:color .12s;user-select:none;
}
.faq-q:hover{color:var(--ac)}
.faq-icon{
  width:22px;height:22px;border-radius:50%;
  background:var(--bg4);border:1px solid var(--b2);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--t2);flex-shrink:0;
  transition:transform .25s,background .15s,color .15s;
}
.faq-item.open .faq-icon{transform:rotate(45deg);background:var(--ac);color:#0e0f11;border-color:var(--ac)}
.faq-a{
  max-height:0;overflow:hidden;
  transition:max-height .35s ease,padding .25s ease;
  padding:0 20px;
}
.faq-item.open .faq-a{max-height:200px;padding:0 20px 18px}
.faq-a p{font-size:13px;color:var(--t2);line-height:1.7}

/* ── Cookie banner ─────────────────────────────────── */
.cookie-banner{
  position:fixed;bottom:-100px;left:50%;transform:translateX(-50%);
  z-index:999;
  background:var(--bg2);border:1px solid var(--b2);
  border-radius:var(--r2xl);padding:16px 22px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  max-width:640px;width:calc(100% - 32px);
  box-shadow:0 8px 40px rgba(0,0,0,.5);
  transition:bottom .4s cubic-bezier(.34,1.56,.64,1);
}
.cookie-banner.show{bottom:24px}
.cookie-banner p{font-size:13px;color:var(--t2);flex:1;min-width:200px;line-height:1.5}
.cookie-banner a{color:var(--ac);font-weight:600}
.cookie-btns{display:flex;gap:8px;flex-shrink:0}
.cookie-accept{background:var(--ac);color:#0e0f11;border:none;padding:8px 18px;border-radius:var(--r);font-size:12px;font-weight:700;cursor:pointer;transition:background .12s;font-family:inherit}
.cookie-accept:hover{background:var(--ac2)}
.cookie-decline{background:none;border:1px solid var(--b2);color:var(--t2);padding:8px 14px;border-radius:var(--r);font-size:12px;font-weight:500;cursor:pointer;transition:all .12s;font-family:inherit}
.cookie-decline:hover{color:var(--t1);border-color:var(--b3)}

/* ── About page ────────────────────────────────────── */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:48px 0}
.about-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:28px}
.about-stat{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--rl);padding:18px;text-align:center}
.about-stat .n{font-size:28px;font-weight:800;color:var(--ac);letter-spacing:-.03em}
.about-stat .l{font-size:12px;color:var(--t3);margin-top:3px;text-transform:uppercase;letter-spacing:.5px}
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.team-card{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--rxl);padding:24px;text-align:center;transition:border-color .2s,transform .2s}
.team-card:hover{border-color:var(--acr);transform:translateY(-3px)}
.team-avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--ac),#3b82f6);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;color:#0e0f11;margin:0 auto 14px}
.team-card h3{font-size:15px;font-weight:700;margin-bottom:3px}
.team-card p{font-size:12px;color:var(--t3)}

/* ── Legal pages ───────────────────────────────────── */
.legal-content{max-width:760px;margin:0 auto;padding:40px 20px 60px}
.legal-content h2{font-size:18px;font-weight:700;margin:32px 0 10px;color:var(--t1)}
.legal-content h2:first-child{margin-top:0}
.legal-content p{font-size:14px;color:var(--t2);line-height:1.8;margin-bottom:14px}
.legal-content ul{font-size:14px;color:var(--t2);line-height:1.8;margin:0 0 14px 20px}
.legal-content li{margin-bottom:4px}
.legal-content a{color:var(--ac);font-weight:600}
.legal-date{font-size:12px;color:var(--t3);margin-bottom:32px;padding-bottom:20px;border-bottom:1px solid var(--b1)}

/* ── Section header centred ────────────────────────── */
.section-center{text-align:center;margin-bottom:40px}
.section-center .hero-tag{display:inline-flex}
.section-center h2{font-size:clamp(22px,3vw,32px);margin:12px 0 10px}
.section-center p{font-size:14px;color:var(--t2);max-width:520px;margin:0 auto;line-height:1.7}

/* ── Responsive additions ──────────────────────────── */
@media(max-width:768px){
  .steps-strip{grid-template-columns:1fr;gap:28px}
  .steps-strip::before{display:none}
  .about-grid{grid-template-columns:1fr;gap:28px}
  .about-stat-grid{grid-template-columns:repeat(2,1fr)}
}

/* ═══════════════════════════════════════════════════════════════
   ENHANCEMENTS — animations, new sections, polish
═══════════════════════════════════════════════════════════════ */


/* ── Hero animated background mesh ────────────────────────── */
.hero-bg{position:relative;overflow:hidden}
.hero-bg::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 60% 50% at 70% 40%, rgba(59,130,246,.09) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 20% 80%, rgba(245,158,11,.06) 0%, transparent 60%);
  animation:meshMove 12s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes meshMove{
  0%{transform:scale(1) translate(0,0)}
  100%{transform:scale(1.08) translate(-2%,2%)}
}
.hero-bg > *{position:relative;z-index:1}

/* ── Hamburger → X animation ───────────────────────────────── */
.nav-ham span{transition:transform .22s ease,opacity .22s ease}
.nav-ham.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-ham.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-ham.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ── Card hover glow ───────────────────────────────────────── */
.feat-card{position:relative;overflow:hidden}
.feat-card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(245,158,11,.07), transparent 70%);
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.feat-card:hover::after{opacity:1}
.feat-card:hover .feat-icon{background:rgba(245,158,11,.18);border-color:rgba(245,158,11,.4);transform:scale(1.08);transition:all .2s}
.feat-icon{transition:all .2s}
.content-card{transition:border-color .2s,transform .2s,box-shadow .2s}
.content-card:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,.35)}
.nav-card{transition:border-color .2s,transform .2s,box-shadow .2s}
.nav-card:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,.35)}

/* ── How it works strip ────────────────────────────────────── */
.how-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative}
.how-strip::before{
  content:'';position:absolute;top:22px;left:calc(16.66% + 16px);right:calc(16.66% + 16px);
  height:1px;background:linear-gradient(90deg,var(--acr),rgba(245,158,11,.08));
  pointer-events:none;
}
.how-step{padding:0 24px;text-align:center;position:relative}
.how-step:first-child{padding-left:0}
.how-step:last-child{padding-right:0}
.how-num{
  width:44px;height:44px;border-radius:50%;
  background:var(--ac);color:#0e0f11;
  font-weight:800;font-size:18px;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;
  box-shadow:0 0 0 6px rgba(245,158,11,.12);
}
.how-step h3{font-size:16px;font-weight:700;margin-bottom:8px}
.how-step p{font-size:13px;color:var(--t2);line-height:1.65}

/* ── Testimonials ──────────────────────────────────────────── */
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.testi-card{
  background:var(--bg2);border:1px solid var(--b1);
  border-radius:var(--rxl);padding:24px;
  display:flex;flex-direction:column;gap:16px;
  transition:border-color .2s,transform .2s;
}
.testi-card:hover{border-color:var(--b3);transform:translateY(-2px)}
.testi-stars{color:var(--ac);font-size:13px;letter-spacing:2px}
.testi-quote{font-size:14px;color:var(--t1);line-height:1.7;flex:1;font-style:italic}
.testi-quote::before{content:'\201C';font-size:28px;color:var(--ac);line-height:0;vertical-align:-.5em;margin-right:2px;font-style:normal}
.testi-author{display:flex;align-items:center;gap:11px;border-top:1px solid var(--b1);padding-top:14px}
.testi-avatar{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,var(--ac),#fb923c);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;color:#0e0f11;flex-shrink:0;
}
.testi-name{font-size:13px;font-weight:700;color:var(--t1)}
.testi-role{font-size:11px;color:var(--t3);margin-top:1px}

/* ── Section label ─────────────────────────────────────────── */
.section-label{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.section-label::after{content:'';flex:1;height:1px;background:var(--b1)}

/* ── FAQ accordion ─────────────────────────────────────────── */
.faq-list{display:flex;flex-direction:column;gap:4px}
.faq-item{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--rl);overflow:hidden;transition:border-color .2s}
.faq-item.open{border-color:var(--b3)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;text-align:left;cursor:pointer;
  font-size:14px;font-weight:600;color:var(--t1);
  background:none;border:none;font-family:inherit;
  transition:color .15s;gap:12px;
}
.faq-q:hover{color:var(--ac)}
.faq-icon{
  width:22px;height:22px;border-radius:50%;
  background:var(--bg4);border:1px solid var(--b2);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:14px;color:var(--t2);
  transition:transform .25s,background .2s;
}
.faq-item.open .faq-icon{transform:rotate(45deg);background:var(--acd);border-color:var(--acr);color:var(--ac)}
.faq-a{
  max-height:0;overflow:hidden;
  transition:max-height .35s ease,padding .25s ease;
  padding:0 20px;
}
.faq-item.open .faq-a{max-height:300px;padding:0 20px 16px}
.faq-a p{font-size:13px;color:var(--t2);line-height:1.7}

/* ── Cookie banner ─────────────────────────────────────────── */
.cookie-banner{
  position:fixed;bottom:0;left:0;right:0;z-index:500;
  background:#1a1b1f;border-top:1px solid var(--b2);
  padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  transform:translateY(0);transition:transform .4s ease;
}
.cookie-banner.hidden{transform:translateY(110%)}
.cookie-banner p{font-size:13px;color:var(--t2);max-width:640px;line-height:1.6}
.cookie-banner a{color:var(--ac);font-weight:600}
.cookie-btns{display:flex;gap:9px;flex-shrink:0}
.cookie-accept{padding:7px 18px;background:var(--ac);color:#0e0f11;font-size:12px;font-weight:700;border-radius:var(--r);cursor:pointer;border:none;font-family:inherit;transition:background .12s}
.cookie-accept:hover{background:var(--ac2)}
.cookie-decline{padding:7px 16px;background:none;color:var(--t3);font-size:12px;border:1px solid var(--b2);border-radius:var(--r);cursor:pointer;font-family:inherit;transition:all .12s}
.cookie-decline:hover{color:var(--t2)}

/* ── About page ────────────────────────────────────────────── */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-bottom:48px}
.about-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:48px}
.about-stat{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--rxl);padding:24px;text-align:center}
.about-stat .num{font-size:36px;font-weight:800;color:var(--ac);letter-spacing:-.04em;line-height:1}
.about-stat .lbl{font-size:13px;color:var(--t2);margin-top:6px}
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.team-card{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--rxl);padding:24px;text-align:center;transition:border-color .2s,transform .2s}
.team-card:hover{border-color:var(--b3);transform:translateY(-2px)}
.team-avatar{width:64px;height:64px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;color:#0e0f11}
.team-card h3{font-size:15px;font-weight:700;margin-bottom:4px}
.team-card p{font-size:12px;color:var(--t3)}

/* ── Legal pages ───────────────────────────────────────────── */
.legal-wrap{max-width:760px;margin:0 auto;padding:40px 20px 80px}
.legal-wrap h1{font-size:32px;font-weight:800;margin-bottom:8px}
.legal-wrap .last-updated{font-size:12px;color:var(--t3);margin-bottom:40px}
.legal-wrap h2{font-size:18px;font-weight:700;margin:32px 0 12px;padding-top:16px;border-top:1px solid var(--b1)}
.legal-wrap h2:first-of-type{border-top:none;margin-top:0}
.legal-wrap p{font-size:14px;color:var(--t2);line-height:1.8;margin-bottom:14px}
.legal-wrap ul{padding-left:20px;margin-bottom:14px}
.legal-wrap ul li{font-size:14px;color:var(--t2);line-height:1.8;margin-bottom:6px}
.legal-wrap a{color:var(--ac)}

/* ── Responsive additions ──────────────────────────────────── */
@media(max-width:900px){
  .how-strip{grid-template-columns:1fr}
  .how-strip::before{display:none}
  .how-step{padding:20px 0;text-align:left;display:flex;gap:16px;align-items:flex-start}
  .how-num{margin:0;flex-shrink:0;width:36px;height:36px;font-size:15px}
  .testimonials-grid{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
  .about-stat-row{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:600px){
  .testimonials-grid{grid-template-columns:1fr}
  .about-stat-row{grid-template-columns:repeat(2,1fr)}
  .cookie-banner{flex-direction:column;align-items:flex-start}
}

/* ═══════════════════════════════════════════════════
   IMPROVEMENTS BATCH — Blog, 404, Compare Table,
   Countdown, Referral, Status, SEO Performance
═══════════════════════════════════════════════════ */

/* ── Pricing comparison table ─────────────────────── */
.compare-wrap{overflow-x:auto;margin:40px 0;border-radius:var(--rxl);border:1px solid var(--b1)}
.compare-table{width:100%;border-collapse:collapse;min-width:560px}
.compare-table th{padding:16px 20px;text-align:center;font-size:12px;font-weight:700;color:var(--t2);background:var(--bg2);border-bottom:1px solid var(--b1);letter-spacing:.04em;text-transform:uppercase}
.compare-table th:first-child{text-align:left;width:36%}
.compare-table th.featured-col{background:linear-gradient(160deg,var(--acd),var(--bg2));color:var(--ac);border-bottom:1px solid var(--acr)}
.compare-table td{padding:13px 20px;text-align:center;font-size:13px;color:var(--t2);border-bottom:1px solid var(--b1)}
.compare-table td:first-child{text-align:left;font-weight:600;color:var(--t1)}
.compare-table tr:last-child td{border-bottom:none}
.compare-table tr:hover td{background:rgba(255,255,255,.02)}
.compare-table td.featured-col{background:rgba(245,158,11,.03)}
.compare-table .section-row td{background:var(--bg3);font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.6px;padding:9px 20px}
.compare-table .section-row td:first-child{text-align:left}
.ct-check{color:var(--green);font-size:16px}
.ct-cross{color:var(--t3);font-size:16px}
.ct-limit{color:var(--ac);font-weight:700;font-size:13px}

/* ── Blog page ────────────────────────────────────── */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:32px}
.blog-card{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--r2xl);overflow:hidden;transition:border-color .2s,transform .18s;display:flex;flex-direction:column}
.blog-card:hover{border-color:var(--acr);transform:translateY(-3px)}
.blog-thumb{height:160px;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:44px;border-bottom:1px solid var(--b1);position:relative;overflow:hidden}
.blog-thumb-bg{position:absolute;inset:0;background:var(--grad,linear-gradient(135deg,var(--bg3),var(--bg4)));opacity:.7}
.blog-thumb-icon{position:relative;z-index:1;font-size:44px}
.blog-body{padding:22px;flex:1;display:flex;flex-direction:column;gap:10px}
.blog-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.blog-tag{background:var(--acd);border:1px solid var(--acr);color:var(--ac);font-size:10px;font-weight:700;padding:2px 9px;border-radius:20px;text-transform:uppercase;letter-spacing:.04em}
.blog-date{font-size:11px;color:var(--t3)}
.blog-card h3{font-size:16px;font-weight:700;line-height:1.3;flex:1}
.blog-card p{font-size:13px;color:var(--t2);line-height:1.65}
.blog-footer{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
.blog-author{font-size:12px;color:var(--t3)}
.blog-read{font-size:12px;color:var(--ac);font-weight:600}
.blog-featured{grid-column:1/-1}
.blog-featured .blog-thumb{height:220px}

/* ── 404 page ─────────────────────────────────────── */
.notfound-wrap{min-height:calc(100vh - 64px);display:flex;align-items:center;justify-content:center;padding:40px 20px;text-align:center}
.notfound-inner{max-width:520px}
.notfound-num{font-size:clamp(80px,15vw,140px);font-weight:900;letter-spacing:-.06em;line-height:1;background:linear-gradient(135deg,var(--ac),#fb923c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:block;margin-bottom:4px}
.notfound-inner h1{font-size:clamp(20px,3vw,28px);font-weight:800;margin-bottom:12px}
.notfound-inner p{font-size:15px;color:var(--t2);line-height:1.7;margin-bottom:28px}
.notfound-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:28px}
.notfound-link{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--rxl);padding:14px 18px;font-size:13px;color:var(--t2);transition:all .15s;display:flex;align-items:center;gap:8px}
.notfound-link:hover{border-color:var(--acr);color:var(--t1)}
.notfound-link span{font-size:18px}

/* ── Countdown page ───────────────────────────────── */
.countdown-hero{min-height:calc(100vh - 64px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px;position:relative;overflow:hidden}
.countdown-hero::before{content:'';position:absolute;top:-20%;left:50%;transform:translateX(-50%);width:700px;height:700px;background:radial-gradient(ellipse,rgba(245,158,11,.06) 0%,transparent 65%);pointer-events:none}
.countdown-event-name{font-size:clamp(28px,5vw,52px);font-weight:900;letter-spacing:-.04em;margin-bottom:8px}
.countdown-org{font-size:15px;color:var(--t2);margin-bottom:8px}
.countdown-date-str{font-size:13px;color:var(--t3);margin-bottom:44px}
.countdown-timer{display:flex;gap:16px;justify-content:center;margin-bottom:44px;flex-wrap:wrap}
.cd-unit{background:var(--bg2);border:1px solid var(--b2);border-radius:var(--rxl);padding:22px 28px;min-width:90px;text-align:center}
.cd-num{font-size:clamp(32px,5vw,52px);font-weight:900;letter-spacing:-.04em;color:var(--ac);line-height:1;display:block;font-family:'Outfit',sans-serif}
.cd-lbl{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.7px;font-weight:700;margin-top:6px}
.countdown-desc{font-size:15px;color:var(--t2);max-width:500px;line-height:1.7;margin-bottom:32px}
.countdown-reg{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--r2xl);padding:28px;max-width:400px;width:100%;margin:0 auto}
.countdown-reg h3{font-size:16px;font-weight:700;margin-bottom:6px}
.countdown-reg p{font-size:13px;color:var(--t2);margin-bottom:18px}
.reg-row{display:flex;gap:8px}
.reg-inp{flex:1;background:var(--bg3);border:1px solid var(--b1);border-radius:var(--r);padding:10px 13px;font-size:13px;color:var(--t1);outline:none;transition:border .12s;font-family:inherit}
.reg-inp:focus{border-color:var(--ac)}
.reg-inp::placeholder{color:var(--t3)}
.powered-by{margin-top:32px;font-size:12px;color:var(--t3)}
.powered-by a{color:var(--ac);font-weight:600}

/* ── Referral / affiliate page ────────────────────── */
.referral-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:60px 0 48px}
.earn-steps{display:flex;flex-direction:column;gap:0;margin:24px 0}
.earn-step{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--b1)}
.earn-step:last-child{border-bottom:none}
.earn-icon{width:38px;height:38px;border-radius:9px;background:var(--acd);border:1px solid var(--acr);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;margin-top:2px}
.earn-step h3{font-size:14px;font-weight:700;margin-bottom:4px}
.earn-step p{font-size:13px;color:var(--t2);line-height:1.6}
.commission-box{background:linear-gradient(135deg,var(--bg2),var(--bg3));border:2px solid var(--acr);border-radius:var(--r2xl);padding:32px;text-align:center}
.commission-pct{font-size:clamp(52px,8vw,80px);font-weight:900;letter-spacing:-.05em;line-height:1;background:linear-gradient(135deg,var(--ac),#fb923c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.commission-label{font-size:16px;font-weight:700;color:var(--t1);margin-top:6px}
.commission-sub{font-size:13px;color:var(--t2);margin-top:8px;line-height:1.65}
.commission-eg{margin-top:20px;background:var(--bg3);border:1px solid var(--b1);border-radius:var(--rl);padding:14px;font-size:13px;color:var(--t2)}
.commission-eg strong{color:var(--ac)}
.payout-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:24px 0}
.payout-card{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--rxl);padding:20px;text-align:center}
.payout-card .pc-num{font-size:26px;font-weight:800;color:var(--ac);letter-spacing:-.03em;margin-bottom:4px}
.payout-card .pc-lbl{font-size:12px;color:var(--t3);text-transform:uppercase;letter-spacing:.5px}
.ref-form{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--r2xl);padding:28px;margin-top:24px}
.ref-form h3{font-size:17px;font-weight:700;margin-bottom:6px}
.ref-form p{font-size:13px;color:var(--t2);margin-bottom:20px;line-height:1.65}

/* ── Status page ──────────────────────────────────── */
.status-overall{background:linear-gradient(135deg,rgba(34,197,94,.08),rgba(34,197,94,.04));border:1px solid rgba(34,197,94,.2);border-radius:var(--r2xl);padding:28px 32px;display:flex;align-items:center;gap:20px;margin-bottom:28px;flex-wrap:wrap}
.status-overall.degraded{background:rgba(245,158,11,.06);border-color:rgba(245,158,11,.2)}
.status-overall.outage{background:rgba(239,68,68,.06);border-color:rgba(239,68,68,.2)}
.status-indicator{width:48px;height:48px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;box-shadow:0 0 0 8px rgba(34,197,94,.12)}
.status-overall h2{font-size:20px;font-weight:800;margin-bottom:4px}
.status-overall p{font-size:14px;color:var(--t2)}
.status-updated{font-size:12px;color:var(--t3);margin-left:auto}
.services-list{display:flex;flex-direction:column;gap:10px;margin-bottom:32px}
.svc-row{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--rl);padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.svc-info h4{font-size:14px;font-weight:600;margin-bottom:2px}
.svc-info p{font-size:12px;color:var(--t3)}
.svc-status{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700}
.svc-status.operational{color:var(--green)}
.svc-status.degraded{color:var(--ac)}
.svc-status.outage{color:var(--red)}
.svc-dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0}
.uptime-bar{flex:1;min-width:120px;max-width:200px}
.uptime-track{height:6px;background:var(--bg4);border-radius:3px;overflow:hidden}
.uptime-fill{height:100%;background:var(--green);border-radius:3px}
.uptime-pct{font-size:11px;color:var(--t3);margin-top:3px;text-align:right}
.incident-card{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--rl);padding:18px 20px;margin-bottom:10px}
.incident-card h4{font-size:14px;font-weight:700;margin-bottom:6px}
.incident-card p{font-size:13px;color:var(--t2);line-height:1.65}
.incident-meta{font-size:11px;color:var(--t3);margin-top:8px}
.status-badge-op{background:rgba(34,197,94,.1);color:var(--green);border:1px solid rgba(34,197,94,.2);font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px}

/* ── Responsive additions ─────────────────────────── */
@media(max-width:768px){
  .referral-hero-grid{grid-template-columns:1fr;gap:28px}
  .countdown-timer{gap:10px}
  .cd-unit{padding:16px 18px;min-width:72px}
}

/* ── Performance ──────────────────────────────────── */
.lazy{opacity:0;transition:opacity .3s}
.lazy.loaded{opacity:1}

/* ═══════════════════════════════════════════════════
   NAV V2 — Professional redesign
═══════════════════════════════════════════════════ */
.topnav{
  position:sticky;top:0;z-index:200;
  height:66px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 32px;
  background:rgba(14,15,17,.97);
  border-bottom:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(20px);
  gap:16px;
}
.brandmark{display:flex;align-items:center;gap:11px;flex-shrink:0;text-decoration:none}
.brandmark img{width:40px;height:40px;object-fit:contain}
.brand-text .logo{font-weight:800;font-size:16px;letter-spacing:.08em;color:#f4f4f5;line-height:1}
.brand-text .tagline-mini{font-size:9px;color:#52525b;letter-spacing:.08em;text-transform:uppercase;margin-top:2px}
.nav-center{display:flex;align-items:center;gap:2px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:4px}
.nav-pill{padding:6px 14px;border-radius:7px;font-size:12px;font-weight:600;color:#71717a;transition:all .15s;white-space:nowrap;letter-spacing:.01em;text-decoration:none}
.nav-pill:hover{color:#f4f4f5;background:rgba(255,255,255,.08)}
.nav-pill.active{color:var(--ac);background:var(--acd);font-weight:700}
.nav-pill.active:hover{background:var(--acd)}
.nav-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.nav-signin{padding:7px 16px;font-size:12px;font-weight:600;color:#a1a1aa;border:1px solid rgba(255,255,255,.12);border-radius:7px;transition:all .15s;text-decoration:none;white-space:nowrap}
.nav-signin:hover{color:#f4f4f5;border-color:rgba(255,255,255,.25)}
.nav-cta{padding:7px 18px;font-size:12px;font-weight:700;background:var(--ac);color:#0e0f11;border-radius:7px;transition:background .12s,transform .1s;text-decoration:none;white-space:nowrap}
.nav-cta:hover{background:var(--ac2);transform:translateY(-1px)}

/* Ham */
.nav-ham{display:none;flex-direction:column;gap:5px;padding:8px;cursor:pointer;border-radius:7px;background:none;border:1px solid transparent;transition:all .12s}
.nav-ham:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08)}
.nav-ham span{width:18px;height:1.5px;background:#a1a1aa;border-radius:1px;display:block;transition:all .22s}
.nav-ham.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-ham.is-open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-ham.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Mobile nav */
.nav-mobile{
  display:none;
  position:fixed;inset:66px 0 0 0;
  background:rgba(14,15,17,.98);
  z-index:190;
  padding:20px 24px;
  flex-direction:column;
  gap:2px;
  border-top:1px solid rgba(255,255,255,.06);
  overflow-y:auto;
  backdrop-filter:blur(20px);
}
.nav-mobile.open{display:flex}
.nav-mobile .nav-pill{font-size:14px;padding:11px 14px;border-radius:8px;color:#a1a1aa}
.nav-mobile-divider{height:1px;background:rgba(255,255,255,.06);margin:12px 0}
.nav-mobile-btns{display:flex;flex-direction:column;gap:8px}
.nav-mobile-btns .nav-signin{text-align:center;display:block;padding:11px;font-size:13px}
.nav-mobile-btns .nav-cta{text-align:center;display:block;padding:11px;font-size:13px}

/* ═══════════════════════════════════════════════════
   FOOTER V2 — Redesigned with columns
═══════════════════════════════════════════════════ */
.footer{
  background:#0a0b0f;
  border-top:1px solid rgba(255,255,255,.06);
  padding:52px 0 0;
  margin-top:auto;
}
.footer-grid{
  max-width:1100px;margin:0 auto;padding:0 32px;
  display:grid;
  grid-template-columns:1.8fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:40px;
}
.footer-brand{}
.footer-brand .brandmark{margin-bottom:14px}
.footer-brand p{font-size:13px;color:#52525b;line-height:1.75;max-width:240px}
.footer-brand .footer-social{display:flex;gap:8px;margin-top:18px}
.footer-social-link{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:14px;color:#52525b;transition:all .18s;text-decoration:none}
.footer-social-link:hover{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.2);color:var(--ac);transform:translateY(-2px)}
.footer-social-link[data-social="facebook"]:hover{background:rgba(24,119,242,.12);border-color:rgba(24,119,242,.3);color:#1877f2}
.footer-social-link[data-social="instagram"]:hover{background:rgba(225,48,108,.1);border-color:rgba(225,48,108,.25);color:#e1306c}
.footer-social-link[data-social="x-twitter"]:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#f0f1f8}
.footer-social-link[data-social="youtube"]:hover{background:rgba(255,0,0,.1);border-color:rgba(255,0,0,.25);color:#ff0000}
.footer-social-link[data-social="linkedin"]:hover{background:rgba(10,102,194,.12);border-color:rgba(10,102,194,.3);color:#0a66c2}
.footer-social-link[data-social="tiktok"]:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#f0f1f8}
.footer-col h4{font-size:11px;font-weight:700;color:#f4f4f5;text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:8px}
.footer-links a{font-size:13px;color:#52525b;transition:color .12s;text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.footer-links a:hover{color:var(--ac)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.05);
  padding:18px 32px;
  max-width:1100px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
}
.footer-bottom-left{font-size:12px;color:#3f3f46}
.footer-bottom-right{display:flex;gap:16px}
.footer-bottom-right a{font-size:12px;color:#3f3f46;transition:color .12s;text-decoration:none}
.footer-bottom-right a:hover{color:var(--ac)}
.footer-outer{background:#0a0b0f}

@media(max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .footer-brand{grid-column:1/-1}
}
@media(max-width:768px){
  .topnav{padding:0 20px;height:60px}
  .nav-center{display:none}
  .nav-actions .nav-signin,.nav-actions .nav-cta{display:none}
  .nav-ham{display:flex}
  .nav-mobile{inset:60px 0 0 0}
  .footer-grid{grid-template-columns:1fr;padding:0 24px;padding-bottom:32px}
  .footer-brand{grid-column:auto}
  .footer-bottom{padding:18px 24px;flex-direction:column;align-items:flex-start;gap:10px}
}
@media(max-width:480px){
  .topnav{padding:0 16px}
  .footer-grid{padding:0 16px;padding-bottom:28px}
}

.js-ready .js-ready .js-ready .reveal.delay-1,.reveal-left.delay-1,.reveal-right.delay-1{transition-delay:.07s}
.reveal.delay-2,.reveal-left.delay-2,.reveal-right.delay-2{transition-delay:.14s}
.reveal.delay-3,.reveal-left.delay-3,.reveal-right.delay-3{transition-delay:.21s}
.reveal.delay-4,.reveal-left.delay-4,.reveal-right.delay-4{transition-delay:.28s}
.reveal.delay-5,.reveal-left.delay-5,.reveal-right.delay-5{transition-delay:.35s}
.reveal.delay-6,.reveal-left.delay-6,.reveal-right.delay-6{transition-delay:.42s}
.reveal.delay-7,.reveal-left.delay-7,.reveal-right.delay-7{transition-delay:.49s}
.reveal.delay-8,.reveal-left.delay-8,.reveal-right.delay-8{transition-delay:.56s}
/* Fallback: if no JS, show everything */
@media (prefers-reduced-motion: reduce) {
  }

/* ═══════════════════════════════════════════════════
   REVEAL ANIMATIONS — Safe, JS-gated
   Elements are visible by default.
   When JS loads, .js-ready on body enables animation.
═══════════════════════════════════════════════════ */
.js-ready .reveal        { opacity:0; transform:translateY(20px); transition:opacity .5s ease, transform .5s ease }
.js-ready .reveal-left   { opacity:0; transform:translateX(-20px); transition:opacity .5s ease, transform .5s ease }
.js-ready .reveal-right  { opacity:0; transform:translateX(20px);  transition:opacity .5s ease, transform .5s ease }

.reveal.revealed,
.reveal-left.revealed,
.reveal-right.revealed   { opacity:1 !important; transform:none !important }

.js-ready .reveal.delay-1, .js-ready .reveal-left.delay-1, .js-ready .reveal-right.delay-1 { transition-delay:.07s }
.js-ready .reveal.delay-2, .js-ready .reveal-left.delay-2, .js-ready .reveal-right.delay-2 { transition-delay:.14s }
.js-ready .reveal.delay-3, .js-ready .reveal-left.delay-3, .js-ready .reveal-right.delay-3 { transition-delay:.21s }
.js-ready .reveal.delay-4, .js-ready .reveal-left.delay-4, .js-ready .reveal-right.delay-4 { transition-delay:.28s }
.js-ready .reveal.delay-5, .js-ready .reveal-left.delay-5, .js-ready .reveal-right.delay-5 { transition-delay:.35s }
.js-ready .reveal.delay-6, .js-ready .reveal-left.delay-6, .js-ready .reveal-right.delay-6 { transition-delay:.42s }
.js-ready .reveal.delay-7, .js-ready .reveal-left.delay-7, .js-ready .reveal-right.delay-7 { transition-delay:.49s }
.js-ready .reveal.delay-8, .js-ready .reveal-left.delay-8, .js-ready .reveal-right.delay-8 { transition-delay:.56s }

/* No-JS / reduced motion fallback — always show content */
@media (prefers-reduced-motion: reduce) {
  .js-ready .reveal, .js-ready .reveal-left, .js-ready .reveal-right { opacity:1; transform:none; transition:none }
}

/* ═══════════════════════════════════════════════════
   AD BANNER SYSTEM
═══════════════════════════════════════════════════ */

/* ── Solo plan — Strevalo ad banner ─────────────────── */
.ad-banner-strip{
  background:#0a0b0f;
  border-top:1px solid rgba(255,255,255,.06);
  padding:10px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-shrink:0;
}
.ad-label{
  font-size:9px;font-weight:700;color:#3f3f46;
  text-transform:uppercase;letter-spacing:.6px;
  white-space:nowrap;flex-shrink:0;
}
.ad-slot{
  flex:1;
  height:60px;
  background:var(--bg3);
  border:1px solid var(--b1);
  border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  position:relative;
}
.ad-slide{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:0 16px;
  opacity:0;
  transition:opacity .6s ease;
  text-align:center;
}
.ad-slide.active{opacity:1}
.ad-slide-content{display:flex;align-items:center;gap:12px}
.ad-slide-icon{font-size:22px;flex-shrink:0}
.ad-slide-text{}
.ad-slide-text strong{font-size:12px;font-weight:700;color:var(--t1);display:block;margin-bottom:2px}
.ad-slide-text span{font-size:11px;color:var(--t2)}
.ad-slide-cta{
  background:var(--ac);color:#0e0f11;
  font-size:10px;font-weight:800;
  padding:5px 12px;border-radius:5px;
  white-space:nowrap;flex-shrink:0;
  text-decoration:none;
  transition:background .12s;
}
.ad-slide-cta:hover{background:var(--ac2)}
.ad-upgrade-note{
  font-size:10px;color:#3f3f46;
  white-space:nowrap;flex-shrink:0;
  text-align:right;line-height:1.5;
}
.ad-upgrade-note a{color:#52525b;text-decoration:none;font-weight:600;transition:color .12s}
.ad-upgrade-note a:hover{color:var(--ac)}

/* ── Business plan — host banner ────────────────────── */
.host-banner-strip{
  background:#0a0b0f;
  border-top:1px solid rgba(255,255,255,.06);
  padding:10px 20px;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-shrink:0;
}
.host-banner-slot{
  flex:1;height:60px;
  background:linear-gradient(135deg,var(--bg3),var(--bg4));
  border:1px solid var(--b2);
  border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.host-banner-inner{display:flex;align-items:center;gap:14px;padding:0 20px}
.host-banner-logo{width:36px;height:36px;border-radius:8px;background:var(--acd);border:1px solid var(--acr);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.host-banner-text strong{font-size:13px;font-weight:700;color:var(--t1);display:block}
.host-banner-text span{font-size:11px;color:var(--t2)}
.host-banner-label{font-size:9px;font-weight:700;color:#3f3f46;text-transform:uppercase;letter-spacing:.6px;white-space:nowrap;flex-shrink:0}

/* ── Demo toggle (platform tour only) ───────────────── */
.ad-demo-toggle{
  display:flex;gap:8px;justify-content:center;
  padding:10px 20px;
  background:var(--bg2);
  border-top:1px solid var(--b1);
  flex-wrap:wrap;
}
.ad-demo-btn{
  font-size:11px;font-weight:600;padding:5px 14px;
  border-radius:20px;cursor:pointer;transition:all .15s;
  font-family:inherit;border:1px solid var(--b1);
  background:var(--bg3);color:var(--t2);
}
.ad-demo-btn.active{background:var(--acd);color:var(--ac);border-color:var(--acr)}

@media(max-width:768px){
  .ad-upgrade-note{display:none}
  .host-banner-label{display:none}
}

/* ── Ad banner improvements ─────────────────────────── */
.ad-slot{position:relative;overflow:hidden}
.ad-slide{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:0 16px;
  opacity:0;
  transition:opacity .8s ease;
  pointer-events:none;
}
.ad-slide.active{opacity:1;pointer-events:auto}

/* Pro banner — host-uploaded image slides */
.pro-banner-strip{
  background:#0a0b0f;
  border-top:1px solid rgba(255,255,255,.06);
  padding:10px 20px;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-shrink:0;
}
.pro-ad-slot{
  flex:1;height:64px;
  border-radius:var(--r);
  overflow:hidden;
  position:relative;
  background:var(--bg3);
  border:1px solid var(--b1);
}
.pro-ad-slide{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  opacity:0;
  transition:opacity .8s ease;
  pointer-events:none;
  cursor:pointer;
}
.pro-ad-slide.active{opacity:1;pointer-events:auto}
.pro-ad-slide img{width:100%;height:100%;object-fit:cover}
/* Fallback for demo (no real images yet) */
.pro-ad-slide-demo{
  width:100%;height:100%;
  display:flex;align-items:center;
  justify-content:center;
  gap:12px;padding:0 20px;
}
.pro-ad-slide-demo .icon{font-size:20px;flex-shrink:0}
.pro-ad-slide-demo .text strong{font-size:12px;font-weight:700;color:var(--t1);display:block;margin-bottom:2px}
.pro-ad-slide-demo .text span{font-size:11px;color:var(--t2)}
.pro-ad-slide-demo .cta{
  background:var(--ac);color:#0e0f11;
  font-size:10px;font-weight:800;
  padding:5px 12px;border-radius:5px;
  white-space:nowrap;flex-shrink:0;
  text-decoration:none;
}
.pro-ad-label{font-size:9px;font-weight:700;color:#3f3f46;text-transform:uppercase;letter-spacing:.6px;white-space:nowrap;flex-shrink:0}
.pro-ad-dots{display:flex;gap:5px;align-items:center;flex-shrink:0}
.pro-ad-dot{width:5px;height:5px;border-radius:50%;background:var(--t3);transition:background .3s}
.pro-ad-dot.active{background:var(--ac)}

/* ═══════════════════════════════════════════════════
   PROMO CODE FIELD
═══════════════════════════════════════════════════ */
.promo-field{position:relative;margin-bottom:14px}
.promo-field label{font-size:11px;font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:5px}
.promo-input-row{display:flex;gap:8px}
.promo-inp{
  flex:1;background:var(--bg3);border:1px solid var(--b1);
  border-radius:var(--r);padding:9px 12px;
  font-size:13px;color:var(--t1);outline:none;
  transition:border .15s;font-family:'Outfit',sans-serif;
  text-transform:uppercase;letter-spacing:.06em;
}
.promo-inp:focus{border-color:var(--ac)}
.promo-inp::placeholder{text-transform:none;letter-spacing:0;color:var(--t3)}
.promo-apply{
  background:var(--bg4);border:1px solid var(--b2);
  color:var(--t2);font-size:12px;font-weight:700;
  padding:9px 16px;border-radius:var(--r);cursor:pointer;
  transition:all .15s;font-family:inherit;white-space:nowrap;
}
.promo-apply:hover{background:var(--bg5);color:var(--t1);border-color:var(--b3)}

/* States */
.promo-msg{font-size:12px;margin-top:7px;min-height:16px;display:flex;align-items:center;gap:6px;font-weight:500}
.promo-msg.success{color:var(--green)}
.promo-msg.error{color:var(--red)}
.promo-msg.checking{color:var(--t3)}

/* Promo activated banner */
.promo-activated{
  background:linear-gradient(135deg,rgba(34,197,94,.1),rgba(34,197,94,.04));
  border:1px solid rgba(34,197,94,.25);
  border-radius:var(--rl);
  padding:14px 16px;
  margin-bottom:14px;
  display:none;
}
.promo-activated.show{display:flex;align-items:flex-start;gap:12px}
.promo-activated-icon{font-size:20px;flex-shrink:0;margin-top:1px}
.promo-activated-text{}
.promo-activated-title{font-size:13px;font-weight:700;color:var(--green);margin-bottom:3px}
.promo-activated-desc{font-size:12px;color:var(--t2);line-height:1.6}
.promo-activated-badge{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.25);
  color:var(--green);font-size:11px;font-weight:700;
  padding:2px 9px;border-radius:20px;margin-top:6px;
}

/* Promo toggle link */
.promo-toggle{
  font-size:12px;color:var(--t3);cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;
  transition:color .12s;background:none;border:none;
  font-family:inherit;padding:0;margin-bottom:14px;
}
.promo-toggle:hover{color:var(--ac)}
.promo-toggle-arrow{transition:transform .2s;display:inline-block}
.promo-toggle.open .promo-toggle-arrow{transform:rotate(180deg)}
.promo-field-wrap{display:none}
.promo-field-wrap.open{display:block}

/* ═══════════════════════════════════════════════════
   IMPROVEMENTS BATCH 2
   Welcome page · OBS guide · Discovery · Calculator
   Share button · Testimonial cards upgrade
═══════════════════════════════════════════════════ */

/* ── Welcome / thank you page ─────────────────────── */
.welcome-wrap{min-height:calc(100vh - 66px);display:flex;align-items:center;justify-content:center;padding:40px 20px;background:var(--bg)}
.welcome-card{max-width:640px;width:100%;text-align:center}
.welcome-icon{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--ac),#fb923c);display:flex;align-items:center;justify-content:center;font-size:32px;margin:0 auto 24px;box-shadow:0 0 0 12px rgba(245,158,11,.1)}
.welcome-card h1{font-size:clamp(24px,4vw,36px);font-weight:900;letter-spacing:-.03em;margin-bottom:10px}
.welcome-card .sub{font-size:15px;color:var(--t2);line-height:1.7;margin-bottom:32px;max-width:480px;margin-left:auto;margin-right:auto}
.welcome-steps{display:flex;flex-direction:column;gap:10px;margin-bottom:32px;text-align:left}
.welcome-step{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--rxl);padding:18px 20px;display:flex;align-items:center;gap:16px;transition:border-color .15s,transform .15s;cursor:pointer;text-decoration:none}
.welcome-step:hover{border-color:var(--acr);transform:translateX(4px)}
.ws-num{width:36px;height:36px;border-radius:9px;background:var(--acd);border:1px solid var(--acr);color:var(--ac);font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ws-body h3{font-size:14px;font-weight:700;margin-bottom:3px}
.ws-body p{font-size:12px;color:var(--t2);line-height:1.5}
.ws-arrow{font-size:16px;color:var(--t3);margin-left:auto;flex-shrink:0}
.welcome-founder{background:linear-gradient(135deg,rgba(34,197,94,.08),rgba(34,197,94,.03));border:1px solid rgba(34,197,94,.2);border-radius:var(--rxl);padding:20px;margin-bottom:28px;text-align:left}
.welcome-founder h3{font-size:14px;font-weight:700;color:var(--green);margin-bottom:6px;display:flex;align-items:center;gap:7px}
.welcome-founder p{font-size:13px;color:var(--t2);line-height:1.65}
.welcome-founder .code-display{font-family:'DM Mono',monospace;font-size:13px;color:var(--ac);background:var(--bg3);border:1px solid var(--b1);padding:8px 12px;border-radius:var(--r);margin-top:10px;display:inline-block}

/* ── OBS Guide page ───────────────────────────────── */
.guide-layout{display:grid;grid-template-columns:220px 1fr;gap:32px;align-items:start;padding:40px 0 60px}
.guide-toc{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--rxl);padding:16px;position:sticky;top:80px}
.guide-toc h4{font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.7px;margin-bottom:12px}
.toc-link{display:block;padding:7px 10px;border-radius:var(--r);font-size:13px;color:var(--t2);transition:all .12s;text-decoration:none;margin-bottom:2px}
.toc-link:hover{color:var(--t1);background:var(--bg3)}
.toc-link.active{color:var(--ac);background:var(--acd);font-weight:600}
.guide-step{margin-bottom:44px;padding-bottom:44px;border-bottom:1px solid var(--b1)}
.guide-step:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.guide-step-header{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.guide-step-num{width:40px;height:40px;border-radius:10px;background:var(--ac);color:#0e0f11;font-weight:900;font-size:17px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.guide-step h2{font-size:clamp(18px,2.5vw,24px);font-weight:800;letter-spacing:-.02em}
.guide-step p{font-size:14px;color:var(--t2);line-height:1.8;margin-bottom:12px}
.guide-step p:last-child{margin-bottom:0}
.guide-img-placeholder{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--rl);height:160px;display:flex;align-items:center;justify-content:center;margin:16px 0;flex-direction:column;gap:8px}
.guide-img-placeholder .icon{font-size:36px}
.guide-img-placeholder span{font-size:12px;color:var(--t3)}
.guide-callout{background:var(--acd);border:1px solid var(--acr);border-radius:var(--rl);padding:14px 16px;margin:14px 0;display:flex;gap:10px;align-items:flex-start}
.guide-callout .icon{font-size:16px;flex-shrink:0;margin-top:1px}
.guide-callout p{font-size:13px;color:var(--t2);line-height:1.65;margin:0}
.guide-callout p strong{color:var(--ac)}
.obs-setting{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--rl);padding:14px 16px;margin:10px 0;display:flex;align-items:center;gap:12px}
.obs-setting .lbl{font-size:12px;font-weight:700;color:var(--t2);min-width:140px}
.obs-setting .val{font-family:'DM Mono',monospace;font-size:12px;color:var(--ac);flex:1}
.obs-setting .copy-btn{font-size:10px;padding:3px 9px;border:1px solid var(--b2);border-radius:4px;color:var(--t2);cursor:pointer;background:none;font-family:inherit;transition:all .12s;flex-shrink:0}
.obs-setting .copy-btn:hover{color:var(--t1);background:var(--bg4)}
@media(max-width:768px){
  .guide-layout{grid-template-columns:1fr}
  .guide-toc{position:static;display:none}
}

/* ── Discovery / Live Now page ────────────────────── */
.discovery-hero{padding:44px 0 32px;text-align:center}
.live-now-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-bottom:40px}
.live-event-card{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--r2xl);overflow:hidden;transition:border-color .2s,transform .18s;cursor:pointer;text-decoration:none;display:flex;flex-direction:column}
.live-event-card:hover{border-color:var(--acr);transform:translateY(-3px)}
.lec-thumb{height:140px;background:var(--bg3);position:relative;display:flex;align-items:center;justify-content:center;font-size:44px}
.lec-thumb.live-border{border-bottom:2px solid var(--red)}
.lec-thumb.replay-border{border-bottom:2px solid var(--t3)}
.lec-status{position:absolute;top:10px;left:10px;font-size:10px;font-weight:700;padding:4px 10px;border-radius:5px;display:flex;align-items:center;gap:5px}
.lec-status.live{background:rgba(220,30,60,.9);color:#fff}
.lec-status.replay{background:rgba(0,0,0,.7);color:#a1a1aa}
.lec-status.upcoming{background:rgba(59,130,246,.9);color:#fff}
.lec-viewers{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.7);color:#fff;font-size:11px;padding:4px 9px;border-radius:5px}
.lec-body{padding:16px;flex:1;display:flex;flex-direction:column;gap:6px}
.lec-title{font-size:14px;font-weight:700;line-height:1.3;color:var(--t1)}
.lec-org{font-size:12px;color:var(--t2)}
.lec-meta{display:flex;align-items:center;gap:8px;margin-top:4px;flex-wrap:wrap}
.lec-type{font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;background:var(--acd);color:var(--ac);border:1px solid var(--acr)}
.lec-loc{font-size:11px;color:var(--t3)}
.discovery-filter{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap}
.filter-btn{font-size:12px;font-weight:600;padding:6px 14px;border-radius:20px;cursor:pointer;transition:all .15s;font-family:inherit;background:var(--bg2);border:1px solid var(--b1);color:var(--t2)}
.filter-btn.active{background:var(--acd);border-color:var(--acr);color:var(--ac)}
.filter-btn:hover{border-color:var(--b2);color:var(--t1)}
.discovery-empty{text-align:center;padding:60px 20px;color:var(--t3)}
.discovery-empty .icon{font-size:40px;margin-bottom:14px;display:block}

/* ── Pricing calculator ───────────────────────────── */
.calc-wrap{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--r2xl);padding:32px;margin:28px 0}
.calc-wrap h3{font-size:18px;font-weight:800;margin-bottom:6px}
.calc-wrap p{font-size:14px;color:var(--t2);margin-bottom:24px}
.calc-q{margin-bottom:20px}
.calc-q label{font-size:12px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:10px}
.calc-options{display:flex;gap:8px;flex-wrap:wrap}
.calc-opt{font-size:13px;font-weight:600;padding:8px 16px;border-radius:var(--r);cursor:pointer;transition:all .15s;font-family:inherit;background:var(--bg3);border:1px solid var(--b1);color:var(--t2)}
.calc-opt.active{background:var(--acd);border-color:var(--acr);color:var(--ac)}
.calc-opt:hover{border-color:var(--b2);color:var(--t1)}
.calc-result{background:linear-gradient(135deg,var(--bg3),var(--bg4));border:1px solid var(--acr);border-radius:var(--rxl);padding:24px;display:none;margin-top:8px}
.calc-result.show{display:block}
.calc-result-plan{font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.7px;margin-bottom:6px}
.calc-result h3{font-size:22px;font-weight:900;color:var(--ac);margin-bottom:6px}
.calc-result p{font-size:13px;color:var(--t2);line-height:1.65;margin-bottom:16px}
.calc-result-features{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.calc-result-features li{font-size:13px;color:var(--t2);list-style:none;display:flex;gap:7px}
.calc-result-features li::before{content:'✓';color:var(--green);font-weight:700}

/* ── Share button on watch page ───────────────────── */
.share-btn{display:flex;align-items:center;gap:7px;background:var(--bg3);border:1px solid var(--b1);color:var(--t2);font-size:12px;font-weight:600;padding:7px 14px;border-radius:var(--r);cursor:pointer;transition:all .15s;font-family:inherit}
.share-btn:hover{border-color:var(--acr);color:var(--ac)}
.share-popup{position:absolute;bottom:calc(100% + 8px);right:0;background:var(--bg2);border:1px solid var(--b2);border-radius:var(--rl);padding:14px 16px;width:280px;box-shadow:0 8px 32px rgba(0,0,0,.5);z-index:50;display:none}
.share-popup.show{display:block}
.share-popup h4{font-size:13px;font-weight:700;margin-bottom:10px}
.share-link-row{display:flex;gap:7px}
.share-link-inp{flex:1;background:var(--bg3);border:1px solid var(--b1);border-radius:var(--r);padding:8px 11px;font-size:11px;color:var(--t2);outline:none;font-family:'DM Mono',monospace}
.share-copy{background:var(--ac);color:#0e0f11;border:none;padding:8px 14px;border-radius:var(--r);font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .12s;white-space:nowrap}
.share-copy:hover{background:var(--ac2)}
.share-wrap{position:relative;display:inline-block}