:root{
  --ink:#0B0E14; --ink2:#0F141D; --surf:#141A24; --surf2:#1A2230;
  --line:#243042; --line2:#2E3C50;
  --txt:#EEF3F8; --mut:#8595AB; --mut2:#5E6C82;
  --gold:#FFB627; --gold-deep:#F59300; --cyan:#38D6F5; --live:#FF4D5E;
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--txt);font-family:Inter,system-ui,Arial,sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1200px 600px at 80% -10%,rgba(56,214,245,.06),transparent 60%),radial-gradient(900px 500px at -10% 10%,rgba(255,182,39,.05),transparent 55%)}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.mono,.tnum{font-family:"Space Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut2);font-weight:700}

/* header */
header.bar{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);background:rgba(11,14,20,.8);border-bottom:1px solid var(--line)}
.bar-in{max-width:var(--maxw);margin:0 auto;padding:13px 22px;display:flex;align-items:center;gap:22px}
.logo{display:flex;align-items:center;gap:9px;font-family:Archivo,sans-serif;font-weight:900;font-size:21px;letter-spacing:-.03em}
.logo .dot{width:11px;height:11px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(255,182,39,.18);position:relative;top:1px}
.logo b{color:var(--gold)}
nav.main{display:flex;gap:4px;margin-left:4px}
nav.main a{font-weight:600;font-size:14px;color:var(--mut);padding:8px 13px;border-radius:9px;transition:.15s}
nav.main a:hover{color:var(--txt);background:var(--surf)}
nav.main a.on{color:var(--ink);background:var(--gold)}
.bar-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.ghost{font:inherit;font-weight:600;font-size:14px;color:var(--txt);background:none;border:1px solid var(--line2);padding:8px 15px;border-radius:9px;cursor:pointer;transition:.15s;display:inline-block}
.ghost:hover{border-color:var(--gold);color:var(--gold)}
.cta{font:inherit;font-weight:700;font-size:14px;color:var(--ink);background:var(--gold);border:none;padding:9px 17px;border-radius:9px;cursor:pointer;transition:.15s;display:inline-block}
.cta:hover{background:#ffc34d;transform:translateY(-1px)}

/* ticker */
.pm-band{border-bottom:1px solid var(--line);background:var(--ink2);overflow:hidden}
.pm-track{display:flex;gap:38px;white-space:nowrap;padding:9px 0;animation:marq 30s linear infinite;width:max-content}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.pm-item{font-size:13px;color:var(--mut)}.pm-item .u{color:var(--txt);font-weight:600}

/* hero */
.hero{padding:54px 0 30px}
.ticker-strip{display:inline-flex;align-items:center;gap:10px;padding:7px 14px;border:1px solid var(--line2);border-radius:999px;background:var(--surf);font-size:13px;color:var(--mut);margin-bottom:26px}
.ticker-strip .live{display:inline-flex;align-items:center;gap:6px;color:var(--cyan);font-weight:600}
.ticker-strip .ldot{width:7px;height:7px;border-radius:50%;background:var(--cyan);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
h1.hero-h{font-family:Archivo,sans-serif;font-weight:900;letter-spacing:-.035em;line-height:.98;font-size:clamp(38px,7vw,78px);margin:0 0 18px}
h1.hero-h em{font-style:normal;color:var(--gold)}
.hero-sub{font-size:clamp(16px,2.2vw,20px);color:var(--mut);max-width:560px;margin:0 0 26px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* featured + cards */
.feature-clip{cursor:pointer}
.fc-tag{position:absolute;top:10px;left:10px;font-size:11px;font-weight:700;background:rgba(0,0,0,.55);color:var(--gold);padding:4px 9px;border-radius:6px;z-index:2}
.fc-meta{display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:10px}
.fc-t{font-weight:600;font-size:15px}.fc-v{color:var(--mut);font-size:13px}
.stage{background:#06080c;border:1px solid var(--line);border-radius:14px;aspect-ratio:16/9;position:relative;overflow:hidden;display:grid;place-items:center}
.stage img,.stage video{width:100%;height:100%;object-fit:cover}
.rc-play{position:absolute;inset:0;margin:auto;width:54px;height:54px;border-radius:50%;background:rgba(0,0,0,.55);display:grid;place-items:center;border:2px solid rgba(255,255,255,.85);z-index:2}
.rc-play:after{content:"";border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}

.grid-head{display:flex;align-items:flex-end;justify-content:space-between;margin:40px 0 18px;gap:16px;flex-wrap:wrap}
.grid-head h2{font-family:Archivo,sans-serif;font-weight:900;font-size:28px;letter-spacing:-.02em;margin:0}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--surf);transition:.16s;display:block}
.card:hover{transform:translateY(-3px);border-color:var(--line2)}
.card .th{aspect-ratio:16/9;position:relative;overflow:hidden;background:var(--surf2)}
.card .th .dur{position:absolute;bottom:7px;right:7px;font-size:11px;font-weight:700;background:rgba(0,0,0,.72);padding:2px 6px;border-radius:5px}
.card .b{padding:11px 12px}
.card .b .t{font-weight:600;font-size:14px;line-height:1.3;margin-bottom:7px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px}
.card .b .m{display:flex;justify-content:space-between;font-size:12px;color:var(--mut)}
.empty{border:1px dashed var(--line2);border-radius:14px;padding:48px;text-align:center;color:var(--mut)}

/* drop / chips / forms */
.drop{border:1.5px dashed var(--line2);border-radius:16px;background:var(--ink2);padding:30px 24px;text-align:center;cursor:pointer;transition:.18s;display:block}
.drop:hover,.drop.over{border-color:var(--gold);background:rgba(255,182,39,.05)}
.drop h3{margin:6px 0 4px;font-family:Archivo,sans-serif;font-weight:800;font-size:18px}
.drop p{margin:0;color:var(--mut);font-size:13.5px}
.fmt{margin-top:12px;display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.chip{font-size:11px;font-weight:600;color:var(--mut);background:var(--surf);border:1px solid var(--line);padding:3px 9px;border-radius:6px}
.chip.cap{color:var(--gold);border-color:rgba(255,182,39,.35)}
label{display:block;font-size:13px;color:var(--mut);font-weight:600;margin:14px 0 6px}
input[type=text],input[type=email],input[type=password],input[type=url]{width:100%;font:inherit;color:var(--txt);background:var(--ink2);border:1px solid var(--line);border-radius:10px;padding:11px 13px}
input:focus{outline:none;border-color:var(--gold)}
.muted{color:var(--mut);font-size:13.5px}

/* counter card */
.counter-card{background:linear-gradient(180deg,var(--surf),var(--ink2));border:1px solid var(--line);border-radius:18px;padding:24px 26px}
.cc-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut2);font-weight:600;margin-bottom:6px}
.cc-amount{font-family:"Space Mono",monospace;font-weight:700;font-size:clamp(34px,6vw,54px);letter-spacing:-.03em;line-height:1}
.cc-amount .cur{color:var(--gold)}
.cc-row{display:flex;gap:26px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.cc-stat .n{font-family:"Space Mono",monospace;font-weight:700;font-size:22px}.cc-stat .k{font-size:12px;color:var(--mut);margin-top:2px}

/* steps / compare / calc / embed (earn page) */
.panel{background:var(--surf);border:1px solid var(--line);border-radius:18px;padding:24px;margin-top:30px}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.step{background:var(--surf);border:1px solid var(--line);border-radius:14px;padding:22px}
.step .no{font-family:"Space Mono",monospace;font-weight:700;color:var(--gold);font-size:13px;margin-bottom:14px}
.step h4{font-family:Archivo,sans-serif;font-weight:800;font-size:18px;margin:0 0 6px}.step p{margin:0;color:var(--mut);font-size:14px}
.calc-band{margin-top:30px;background:linear-gradient(160deg,var(--surf),var(--ink2));border:1px solid var(--line2);border-radius:20px;padding:32px;display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.calc-band h3{font-family:Archivo,sans-serif;font-weight:900;font-size:26px;margin:0 0 8px}
.calc-views{font-family:"Space Mono",monospace;font-weight:700;font-size:22px;color:var(--cyan);margin-bottom:4px}
.calc-out{font-family:"Space Mono",monospace;font-weight:700;font-size:clamp(38px,6vw,58px);letter-spacing:-.03em;line-height:1}.calc-out .cur{color:var(--gold)}
.slider{width:100%;-webkit-appearance:none;height:8px;border-radius:5px;background:var(--surf2);outline:none;margin:18px 0 8px}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--gold);cursor:pointer;border:4px solid var(--ink)}
.slider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--gold);cursor:pointer;border:4px solid var(--ink)}
.calc-scale{display:flex;justify-content:space-between;font-size:12px;color:var(--mut2)}
.reddit-card{max-width:560px;background:#0d1117;border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:8px}
.rc-top{display:flex;align-items:center;gap:9px;padding:13px 15px;font-size:13px;color:var(--mut)}
.rc-sub{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#ff5414,#ff8a4d);display:grid;place-items:center;font-weight:800;color:#fff;font-size:12px}
.rc-title{padding:0 15px 12px;font-weight:600;font-size:16px}
.rc-player{position:relative;aspect-ratio:16/9;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:#06080c}
.rc-actions{display:flex;gap:20px;padding:11px 15px;font-size:13px;color:var(--mut);font-weight:600}
.compare{margin-top:30px;background:var(--surf);border:1px solid var(--line);border-radius:18px;padding:28px}
.compare h3{font-family:Archivo,sans-serif;font-weight:900;font-size:24px;margin:0 0 14px}
.ftable{width:100%;border-collapse:collapse;font-size:14px}
.ftable td{padding:9px 0;border-bottom:1px solid var(--line)}.ftable td:first-child{color:var(--mut)}.ftable td:last-child{text-align:right;font-weight:600;color:var(--cyan)}

/* watch */
.watch-grid{display:grid;grid-template-columns:1.55fr .9fr;gap:26px;margin-top:26px}
.player{background:#06080c;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.player video{width:100%;display:block;aspect-ratio:16/9;background:#000;object-fit:contain}
.vtitle{font-family:Archivo,sans-serif;font-weight:800;font-size:22px;margin:18px 0 10px}
.vmeta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--mut);font-size:13.5px}
.vmeta .views{color:var(--cyan);font-weight:700}
.share-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.sbtn{font:inherit;font-weight:600;font-size:13px;color:var(--txt);background:var(--surf);border:1px solid var(--line);padding:9px 13px;border-radius:9px;cursor:pointer;transition:.15s;display:inline-flex;gap:7px;align-items:center}
.sbtn:hover{border-color:var(--line2);transform:translateY(-1px)}.sbtn.reddit:hover{border-color:#ff5414;color:#ff7a4d}
.anon-row{margin-top:16px;display:flex;align-items:center;gap:14px;color:var(--mut);font-size:13px}
.side-h{font-family:Archivo,sans-serif;font-weight:800;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);margin:0 0 14px}
.mini{display:flex;gap:11px;margin-bottom:13px}
.mini-th{width:120px;aspect-ratio:16/9;border-radius:8px;flex:none;overflow:hidden;border:1px solid var(--line);background:var(--surf2)}
.mini-info .t{font-weight:600;font-size:13.5px;line-height:1.3;margin-bottom:4px}.mini-info .v{font-size:12px;color:var(--mut)}
.adslot{margin-top:22px;border:1px dashed var(--line2);border-radius:12px;padding:16px;text-align:center;background:var(--ink2)}
.adslot .lbl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut2);font-weight:700;margin-bottom:8px}

/* editor */
.editor-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:22px}
.tl-track{position:relative;height:54px;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:repeating-linear-gradient(90deg,var(--ink2) 0 3px,var(--surf2) 3px 6px);margin-top:14px}
.tl-sel{position:absolute;top:0;bottom:0;background:rgba(255,182,39,.16);border-left:3px solid var(--gold);border-right:3px solid var(--gold)}
.tl-handle{position:absolute;top:0;bottom:0;width:14px;cursor:ew-resize;background:var(--gold)}
.tl-h-in{border-radius:8px 0 0 8px}.tl-h-out{border-radius:0 8px 8px 0}
.tl-meta{display:flex;justify-content:space-between;margin-top:10px;font-size:13px;color:var(--mut)}
.tl-dur{font-family:"Space Mono",monospace;font-weight:700;color:var(--cyan)}.tl-dur.bad{color:var(--live)}
.aspect{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0 16px}
.aspect button{font:inherit;font-weight:600;font-size:13px;color:var(--mut);background:var(--ink2);border:1px solid var(--line);padding:9px 0;border-radius:9px;cursor:pointer}
.aspect button.on{color:var(--ink);background:var(--gold);border-color:var(--gold)}

/* dashboard */
.dash-top{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:16px;margin-top:18px}
.kpi{background:var(--surf);border:1px solid var(--line);border-radius:16px;padding:22px}
.kpi.bal{background:linear-gradient(160deg,#1d2433,var(--ink2));border-color:var(--line2)}
.kpi .k{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--mut2);font-weight:700;margin-bottom:10px}
.kpi .n{font-family:"Space Mono",monospace;font-weight:700;font-size:32px;line-height:1}.kpi .n .cur{color:var(--gold)}
.kpi .sub{font-size:12.5px;color:var(--mut);margin-top:8px}
.cashout{margin-top:14px;width:100%;font:inherit;font-weight:700;color:var(--ink);background:var(--gold);border:none;padding:12px;border-radius:10px;cursor:pointer}
.dash-table{margin-top:26px;background:var(--surf);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.dt-h{padding:18px 20px;font-family:Archivo,sans-serif;font-weight:800;font-size:17px;border-bottom:1px solid var(--line)}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
table.tbl th{text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut2);font-weight:700;padding:12px 20px;border-bottom:1px solid var(--line)}
table.tbl td{padding:13px 20px;border-bottom:1px solid var(--line)}table.tbl tr:last-child td{border-bottom:none}
table.tbl td.num{font-family:"Space Mono",monospace;text-align:right}
table.tbl td.earn{font-family:"Space Mono",monospace;text-align:right;color:var(--gold);font-weight:700}
.stbadge{font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px}
.stbadge.live{color:var(--cyan);background:rgba(56,214,245,.12)}
.stbadge.review{color:var(--gold);background:rgba(255,182,39,.12)}
.stbadge.removed{color:var(--live);background:rgba(255,77,94,.12)}

/* misc */
.flash{margin-top:18px;background:rgba(56,214,245,.1);border:1px solid rgba(56,214,245,.3);color:var(--cyan);padding:12px 16px;border-radius:10px;font-weight:600}
.center-card{max-width:420px;margin:60px auto;background:var(--surf);border:1px solid var(--line);border-radius:18px;padding:30px}
.center-card h1{font-family:Archivo,sans-serif;font-size:26px;margin:0 0 6px}
footer{margin-top:70px;border-top:1px solid var(--line);padding:30px 0;color:var(--mut2);font-size:13px}
.foot-in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;max-width:var(--maxw);margin:0 auto;padding:0 22px}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:6px}

@media(max-width:920px){
  .hero-grid,.editor-grid,.watch-grid,.calc-band{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .dash-top,.steps-grid{grid-template-columns:1fr}
  nav.main{display:none}
}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* language switcher */
.langsw{font-size:12px;color:var(--mut2);font-weight:600;display:inline-flex;gap:6px;align-items:center}
.langsw a{color:var(--mut);transition:.15s}
.langsw a:hover{color:var(--txt)}
@media(max-width:920px){ header .langsw{display:none} }