@font-face {
  font-family: 'Righteous';
  src: url('assets/fonts/Righteous-Regular.ttf') format('truetype');
  font-display: swap;
}
/* Minimal hero-only page (no header), Numbers Game gradient, mobile-safe footer */
:root{
  --bg:#0B0D10;--text:#EEEAF7;--muted:#C8C4DC;
  --accentA:#00E6FF; /* cyan from logo */ 
  --accentB:#FF00C8; /* magenta from logo */
  --accentAdark:#007C90; /* darker cyan */
  --accentBdark:#7A0070; /* darker magenta */
  --gold:#FFC52E;
  --border:#1C2129;--shadow:0 12px 40px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 600px at 85% 80%, rgba(255,0,200,.15), transparent 60%),linear-gradient(180deg,#0B0D10 0%,#0A0C0F 100%);color:var(--text);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.container{max-width:1280px;margin:0 auto;padding:0 24px}

/* Hero (single column full width) */
.hero{position:relative;padding:120px 0 128px}
.hero:before,.hero:after{content:"";position:absolute;border-radius:50%;filter:blur(60px);opacity:.18;pointer-events:none}
.hero:before{width:340px;height:340px;background:var(--accentA);left:-120px;top:-80px}
.hero:after{width:380px;height:380px;background:var(--accentB);right:-120px;bottom:-80px}

.hero-single-inner{max-width:1100px;margin:0 auto}
.hero-title{font-size:108px;line-height:.92;margin:0 0 36px;letter-spacing:-1.5px;color:var(--text);text-align:center}
.hero-logo-inline{height:86px;vertical-align:-12px;margin-left:12px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35));transform-origin:center}
.subtitle{font-size:22px;color:#C9D0DB;margin:0 0 36px;text-align:center}
.top-sub{margin-bottom:18px}
.cta-row{display:flex;gap:12px;margin:34px 0}
.cta-row--center{justify-content:center}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:26px 40px;border-radius:9999px;border:1px solid var(--border);text-decoration:none;font-weight:900;cursor:pointer;font-size:26px;line-height:1;}
.btn-primary{background:linear-gradient(90deg,var(--accentA),var(--accentB));color:var(--text);border:0;box-shadow:var(--shadow)}
.btn-primary:hover{background:linear-gradient(90deg,var(--accentAdark),var(--accentBdark));box-shadow: var(--shadow), inset 0 6px 16px rgba(0,0,0,.35), inset 0 -10px 28px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.08);}

/* Pulse animation for inline logo */
@keyframes soft-pulse{0%{transform:scale(1)}50%{transform:scale(1.06)}100%{transform:scale(1)}}
.hero-logo-inline.pulsing{animation:soft-pulse 1.6s ease-in-out infinite}

/* Fixed footer bottom-left (mobile safe-area aware) */
.site-footer-fixed{position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom, 0px));z-index:40}
.footer-left{display:flex;align-items:center;gap:10px;background:rgba(12,14,18,.55);padding:6px 10px;border:1px solid var(--border);border-radius:10px}
.x-icon{width:18px;height:18px;opacity:.88}
.copyright{font-size:12px;color:#AEB6C4}

/* Responsiveness */
@media (max-width: 1200px){
  .hero-title{font-size:88px}
  .hero-logo-inline{height:70px;vertical-align:-10px}
}
@media (max-width: 900px){
  .btn{font-size:22px; padding:20px 30px}
  .hero{padding:88px 0 100px}

  .hero{padding:96px 0 112px}
  .hero-title{font-size:64px}
  .hero-logo-inline{height:52px;vertical-align:-7px}
}
@media (max-width: 640px){
  .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:26px 40px;border-radius:9999px;border:1px solid var(--border);text-decoration:none;font-weight:900;cursor:pointer;font-size:26px;line-height:1;}
  .hero-title{font-size:42px}
  .hero-logo-inline{height:36px;vertical-align:-5px}
  .subtitle{font-size:18px}
}

/* Button text swap without layout shift */
.btn .btn-text{transition:opacity .18s ease; white-space:nowrap}
.btn .btn-text.hover{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); opacity:0}
.btn:hover .btn-text.default{opacity:0}
.btn:hover .btn-text.hover{opacity:1}
.gold-dot{color:var(--gold)}

.brand-word{ font-family: 'Righteous', system-ui, sans-serif; letter-spacing: .2px }

@media (max-width: 400px){
  .btn{ font-size:16px; padding:12px 18px }
  .brand-word{ font-size:.95em }
  .hero-title{ font-size:38px }
}