/* ChessVS marketing site — shared design system. Linked by every page. */
:root{
  --bg:#05070a; --bg2:#0a0d12; --bg3:#0f1420; --wire:rgba(96,165,250,0.10);
  --cyan:#60A5FA; --mag:#C840EB; --gold:#FBBF24; --green:#4ADE80; --orange:#FB923C; --ethblue:#7DA2FF;
  --text:#DDE8FF; --dim:rgba(221,232,255,0.56); --ghost:rgba(221,232,255,0.30);
  --mono:'JetBrains Mono',monospace; --sans:'Barlow',system-ui,sans-serif; --cond:'Barlow Condensed',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;min-height:100vh}
body::after{content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.05) 2px,rgba(0,0,0,0.05) 4px)}
#board-canvas{position:fixed;inset:0;z-index:0;opacity:0.16}
.glow{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(900px 520px at 22% 80%,rgba(96,165,250,0.08),transparent 62%),radial-gradient(700px 480px at 82% 18%,rgba(200,64,235,0.07),transparent 58%)}
.glow.mag{background:radial-gradient(800px 520px at 50% 30%,rgba(200,64,235,0.10),transparent 62%)}
.wrap{position:relative;z-index:10;max-width:1000px;margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:780px}
a{color:inherit}

/* topbar */
.topbar{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:15px 32px;background:#05070a;border-bottom:1px solid var(--wire)}
.brand{font-family:var(--cond);font-weight:900;font-size:24px;letter-spacing:0.02em;text-transform:uppercase;text-decoration:none;color:#fff}
.brand b{color:var(--orange);font-weight:900}
.tb-right{display:flex;align-items:center;gap:22px}
.tb-links{display:flex;gap:16px}
.tb-links a{font-family:var(--mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ghost);text-decoration:none;transition:color .15s}
.tb-links a:hover{color:var(--cyan)}
.tb-status{font-family:var(--mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ghost);display:flex;align-items:center;gap:8px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}

/* buttons */
.btn{font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;padding:15px 32px;border-radius:6px;text-decoration:none;display:inline-block;border:none;cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--green);color:#05070a;box-shadow:0 0 32px rgba(74,222,128,0.28)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--wire)}

/* hero (home) */
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 0 80px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:0.26em;text-transform:uppercase;color:var(--cyan)}
h1.head{font-family:var(--cond);font-weight:900;font-style:italic;font-size:clamp(60px,11vw,124px);line-height:.86;text-transform:uppercase;margin-top:26px}
h1.head .c{color:var(--cyan)} h1.head .g{color:var(--gold)}
.sub{font-size:clamp(16px,2.2vw,20px);font-weight:300;color:var(--dim);max-width:600px;margin:26px auto 0;line-height:1.7}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:38px}
.hero-note{font-family:var(--mono);font-size:11px;letter-spacing:0.06em;color:var(--ghost);margin-top:18px}
.js .hero .eyebrow,.js .hero .head,.js .hero .sub,.js .hero .cta-row,.js .hero .hero-note{opacity:0;animation:fadeUp .7s ease forwards}
.js .hero .eyebrow{animation-delay:.15s}.js .hero .head{animation-delay:.3s}.js .hero .sub{animation-delay:.45s}.js .hero .cta-row{animation-delay:.6s}.js .hero .hero-note{animation-delay:.75s}

/* page hero (sub-pages) */
.page-hero{padding:150px 0 50px;text-align:center}
.page-hero .eyebrow{display:block;margin-bottom:18px}
.page-hero h1{font-family:var(--cond);font-weight:900;font-style:italic;font-size:clamp(44px,8vw,84px);text-transform:uppercase;line-height:.9}
.page-hero h1 .c{color:var(--cyan)} .page-hero h1 .g{color:var(--gold)}
.page-hero p{color:var(--dim);font-weight:300;max-width:560px;margin:20px auto 0;line-height:1.7}

/* sections */
.section{padding:92px 0;text-align:center;border-top:1px solid var(--wire)}
.sec-eye{font-family:var(--mono);font-size:10px;letter-spacing:0.3em;text-transform:uppercase;color:var(--cyan);margin-bottom:16px}
.sec-title{font-family:var(--cond);font-weight:900;font-style:italic;font-size:clamp(40px,6vw,72px);text-transform:uppercase;line-height:.94;margin-bottom:18px}
.sec-title .c{color:var(--cyan)} .sec-title .g{color:var(--gold)}
.sec-lead{font-size:17px;font-weight:300;color:var(--dim);max-width:560px;margin:0 auto 52px;line-height:1.8}

/* reveal (crawler/no-JS safe: hidden only when JS present) */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.vis{opacity:1;transform:none}

/* grid + cells */
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--wire);border:1px solid var(--wire);text-align:left}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--wire);border:1px solid var(--wire);text-align:left}
.cell{background:var(--bg2);padding:32px 28px;transition:background .2s}
.cell:hover{background:var(--bg3)}
.cell .n{font-family:var(--cond);font-size:40px;font-weight:900;color:rgba(96,165,250,0.16);line-height:1}
.cell .lbl{font-family:var(--mono);font-size:9px;letter-spacing:0.22em;text-transform:uppercase;color:var(--cyan);margin-bottom:10px}
.cell h3{font-family:var(--cond);font-size:23px;font-weight:900;text-transform:uppercase;letter-spacing:0.02em;margin:6px 0 8px}
.cell p{font-size:14px;color:var(--dim);line-height:1.7}
.cell p strong{color:var(--text);font-weight:600}
.cell.gold .lbl{color:var(--gold)} .cell.mag .lbl{color:var(--mag)}

/* clubs */
.club-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.club{flex:1;min-width:230px;max-width:320px;border-radius:12px;padding:30px 26px;border:1px solid;text-align:center}
.club.btc{border-color:rgba(251,146,60,0.35);background:linear-gradient(160deg,rgba(251,146,60,0.10),transparent)}
.club.eth{border-color:rgba(125,162,255,0.35);background:linear-gradient(160deg,rgba(125,162,255,0.10),transparent)}
.club.soon{border-color:var(--wire);background:transparent;opacity:.7}
.club .sig{font-family:var(--cond);font-size:46px;font-weight:900;line-height:1}
.club.btc .sig{color:var(--orange)} .club.eth .sig{color:var(--ethblue)} .club.soon .sig{color:var(--ghost)}
.club .nm{font-family:var(--cond);font-size:24px;font-weight:900;text-transform:uppercase;letter-spacing:0.03em;margin:8px 0 4px}
.club .ds{font-size:13px;color:var(--dim);line-height:1.6}

/* promise list */
.promise{list-style:none;max-width:660px;margin:0 auto;text-align:left}
.promise li{position:relative;padding:20px 0 20px 40px;border-bottom:1px solid var(--wire);font-size:15px;color:var(--dim);line-height:1.7}
.promise li:last-child{border-bottom:none}
.promise li::before{content:'✓';position:absolute;left:0;top:22px;font-family:var(--mono);font-size:12px;color:var(--green)}
.promise li strong{color:var(--text);font-weight:600}

/* final cta */
.final{position:relative;text-align:center;padding:108px 0;border-top:1px solid var(--wire);overflow:hidden}
.final-glow{position:absolute;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(96,165,250,0.06),transparent 65%);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.final h2{font-family:var(--cond);font-weight:900;font-style:italic;font-size:clamp(46px,7vw,88px);text-transform:uppercase;line-height:.9;position:relative}
.final h2 .c{color:var(--cyan)}
.final p{color:var(--dim);font-weight:300;max-width:460px;margin:18px auto 34px;position:relative}

/* prose (legal / text pages) */
.prose{max-width:780px;margin:0 auto;text-align:left;padding:24px 0 80px}
.prose h2{font-family:var(--cond);font-size:28px;font-weight:900;text-transform:uppercase;letter-spacing:0.02em;color:var(--text);margin:40px 0 12px;padding-top:24px;border-top:1px solid var(--wire)}
.prose h2:first-child{border-top:none;padding-top:0}
.prose h3{font-family:var(--cond);font-size:19px;font-weight:700;text-transform:uppercase;color:var(--cyan);margin:24px 0 8px}
.prose p,.prose li{font-size:15px;color:var(--dim);line-height:1.8;margin-bottom:12px}
.prose ul{padding-left:22px;margin-bottom:12px}
.prose strong{color:var(--text);font-weight:600}
.prose a{color:var(--cyan);text-decoration:underline}
.prose .updated{font-family:var(--mono);font-size:11px;letter-spacing:0.08em;color:var(--ghost);margin-bottom:8px}

/* form (register / contact) */
.form{max-width:440px;margin:0 auto;text-align:left;background:var(--bg2);border:1px solid var(--wire);border-radius:12px;padding:32px 28px}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--cyan);margin-bottom:8px}
.field input{width:100%;background:var(--bg);border:1px solid var(--wire);border-radius:6px;padding:13px 14px;color:var(--text);font-family:var(--sans);font-size:15px;outline:none;transition:border-color .15s}
.field input:focus{border-color:var(--cyan)}
.field .hint{font-size:12px;color:var(--ghost);margin-top:6px}
.form .btn{width:100%;text-align:center;margin-top:6px}
.form-msg{margin-top:14px;font-size:13px;text-align:center;min-height:18px}
.form-msg.ok{color:var(--green)} .form-msg.err{color:var(--mag)}

/* footer */
footer{position:relative;z-index:10;border-top:1px solid var(--wire);background:rgba(5,7,10,0.9);padding:28px 0 44px;margin-top:40px}
.foot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.foot .cp{font-family:var(--mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ghost)}
.foot .fl{display:flex;gap:16px;flex-wrap:wrap}
.foot .fl a{font-family:var(--mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ghost);text-decoration:none}
.foot .fl a:hover{color:var(--cyan)}

@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){
  .grid2,.grid3,.club-row{grid-template-columns:1fr}
  .tb-links,.tb-status{display:none}
  .hero{padding:100px 0 64px;min-height:auto}
  .page-hero{padding:120px 0 40px}
  .section{padding:64px 0}
}