:root{
    --bg: #FFFFFF;
    --bg-alt: #F7F8FC;
    --panel: #F0F2F9;
    --grid-line: rgba(20,22,50,0.055);
    --grid-line-strong: rgba(20,22,50,0.11);
    --gold: #B45309;
    --gold-bright: #F0B429;
    --gold-soft: #92400E;
    --ink: #14162B;
    --ink-dim: #565A78;
    --ink-faint: #9295B0;
    --sudoku: #3F6FD9;
    --mine: #D6455A;
    --block: #7449E0;
    --match: #128A6E;
    --radius: 14px;
  }
  *{ box-sizing: border-box; margin:0; padding:0; }
  html{ scroll-behavior: smooth; }
  body{
    background: var(--bg);
    color: var(--ink);
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
    overflow-x: hidden;
    background-image:
      linear-gradient(var(--grid-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 42px 42px;
  }
  h1,h2,h3{ font-family: 'Space Grotesk', sans-serif; font-weight: 600; letter-spacing: -0.02em; }
  .mono{ font-family: 'JetBrains Mono', monospace; }
  a{ color: inherit; text-decoration: none; }
  .wrap{ max-width: 1160px; margin: 0 auto; padding: 0 32px; }
  img{ max-width:100%; display:block; }

  /* ---------- Nav ---------- */
  header{
    position: sticky; top:0; z-index: 50;
    background: rgba(255,255,255,0.86);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--grid-line-strong);
  }
  nav{ display:flex; align-items:center; justify-content:space-between; padding: 18px 32px; max-width: 1160px; margin:0 auto; }
  .logo{ display:flex; align-items:center; gap:10px; font-family:'Space Grotesk'; font-weight:700; font-size: 19px; }
  .logo-mark{ width: 30px; height:30px; position:relative; object-fit: contain; }
  .nav-links{ display:flex; gap: 34px; font-size: 14px; color: var(--ink-dim); }
  .nav-links a:hover{ color: var(--gold); }
  .nav-cta{
    border:1px solid var(--gold); color: var(--gold); padding: 9px 18px;
    border-radius: 100px; font-size: 13px; font-weight:600; letter-spacing:.02em;
    transition: all .2s ease;
  }
  .nav-cta:hover{ background: var(--gold-bright); color: #14162B; border-color: var(--gold-bright); }
  .nav-toggle{ display:none; }

  /* ---------- Hero ---------- */
  .hero{
    position: relative;
    padding: 96px 0 84px;
    overflow: hidden;
  }
  .hero-grid-canvas{
    position:absolute; inset:0; z-index:0; opacity: 0.9;
    mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, black 40%, transparent 85%);
  }
  .hero-inner{ position: relative; z-index: 2; text-align:center; }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'JetBrains Mono'; font-size: 12px; color: var(--gold);
    border: 1px solid var(--grid-line-strong); padding: 6px 14px; border-radius: 100px;
    margin-bottom: 26px; letter-spacing: .04em;
  }
  .eyebrow .dot{ width:6px; height:6px; border-radius:50%; background: var(--gold-bright); box-shadow: 0 0 8px var(--gold-bright); }
  .hero h1{
    font-size: clamp(38px, 6vw, 72px);
    line-height: 1.03;
    max-width: 880px; margin: 0 auto 22px;
  }
  .hero h1 .accent{ color: var(--gold); }
  .hero p.sub{
    max-width: 540px; margin: 0 auto 38px; color: var(--ink-dim); font-size: 17px;
  }
  .hero-ctas{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
  .btn-primary{
    background: var(--gold-bright); color: #14162B; font-weight: 700; font-size: 15px;
    padding: 14px 26px; border-radius: 10px; display:inline-flex; align-items:center; gap:10px;
    transition: transform .18s ease, box-shadow .18s ease;
    box-shadow: 0 0 0 rgba(240,180,41,0);
  }
  .btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 10px 30px rgba(240,180,41,0.25); }
  .btn-secondary{
    border: 1px solid var(--ink-faint); color: var(--ink); font-weight:600; font-size:15px;
    padding: 14px 26px; border-radius: 10px; transition: border-color .18s ease, color .18s ease;
  }
  .btn-secondary:hover{ border-color: var(--gold); color: var(--gold); }
  .badge-link{ display:inline-flex; align-items:center; transition: transform .18s ease; }
  .badge-link:hover{ transform: translateY(-2px); }
  .badge-link img{ height: 46px; width:auto; }

  /* stats strip */
  .stats{
    display:grid; grid-template-columns: repeat(4,1fr);
    border-top: 1px solid var(--grid-line-strong);
    border-bottom: 1px solid var(--grid-line-strong);
  }
  .stat{
    padding: 26px 20px; text-align:center; border-right: 1px solid var(--grid-line-strong);
  }
  .stat:last-child{ border-right:none; }
  .stat .num{ font-family:'JetBrains Mono'; font-size: 26px; color: var(--gold); font-weight:600; }
  .stat .label{ font-size: 12px; color: var(--ink-faint); margin-top:4px; text-transform:uppercase; letter-spacing:.06em; }

  /* ---------- Section shared ---------- */
  section{ padding: 96px 0; }
  .section-head{ max-width: 620px; margin-bottom: 56px; }
  .section-head .eyebrow{ margin-bottom: 16px; }
  .section-head h2{ font-size: clamp(28px,4vw,42px); margin-bottom: 14px; }
  .section-head p{ color: var(--ink-dim); font-size: 16px; }

  /* ---------- Games grid (the board) ---------- */
  .board{
    display:grid; grid-template-columns: 1fr 1fr; gap: 2px;
    background: var(--grid-line-strong);
    border: 2px solid var(--grid-line-strong);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .tile{
    background: var(--bg-alt);
    padding: 40px 36px;
    position: relative;
    min-height: 280px;
    display:flex; flex-direction:column; justify-content:flex-end;
    cursor: default;
    isolation: isolate;
    overflow:hidden;
  }
  .tile::before{
    content:''; position:absolute; inset:0; z-index:-1;
    opacity: 0; transition: opacity .35s ease;
    background: radial-gradient(circle at 30% 20%, var(--tile-color) 0%, transparent 60%);
  }
  .tile:hover::before{ opacity: .14; }
  .tile-icon{ width: 68px; height:68px; margin-bottom: 22px; transition: transform .3s ease; border-radius: 16px; object-fit: cover; box-shadow: 0 6px 18px rgba(20,22,50,0.16); }
  .tile:hover .tile-icon{ transform: translateY(-4px) rotate(-4deg); }
  .tile h3{ font-size: 22px; margin-bottom: 8px; }
  .tile p{ color: var(--ink-dim); font-size: 14.5px; margin-bottom: 18px; }
  .reward-tag{
    display:inline-flex; align-self:flex-start; align-items:center; gap:7px;
    font-family:'JetBrains Mono'; font-size: 11.5px; color: var(--tile-color);
    border: 1px solid currentColor; padding: 6px 12px; border-radius: 100px;
    letter-spacing: .03em;
  }
  .tile[data-game="sudoku"]{ --tile-color: var(--sudoku); }
  .tile[data-game="mine"]{ --tile-color: var(--mine); }
  .tile[data-game="block"]{ --tile-color: var(--block); }
  .tile[data-game="match"]{ --tile-color: var(--match); }

  /* ---------- How it works ---------- */
  .how-grid{ display:grid; grid-template-columns: 1.3fr 0.7fr; gap: 48px; align-items: center; }
  .steps-stacked{ display:flex; flex-direction:column; gap: 18px; }
  .step{ border: 1px solid var(--grid-line-strong); border-radius: var(--radius); padding: 26px 26px; background: var(--bg-alt); }
  .step .step-num{ font-family:'JetBrains Mono'; color: var(--gold); font-size: 13px; margin-bottom: 14px; display:block; }
  .step h3{ font-size: 19px; margin-bottom: 8px; }
  .step p{ color: var(--ink-dim); font-size: 14.5px; }
  .phone-mock{
    justify-self:center; max-width: 280px; border-radius: 28px; overflow:hidden;
    border: 1px solid var(--grid-line-strong);
    box-shadow: 0 24px 50px rgba(20,22,50,0.18);
  }
  .phone-mock img{ display:block; width:100%; }

  /* ---------- Pillars ---------- */
  .pillars{ display:grid; grid-template-columns: repeat(3,1fr); gap: 2px; background: var(--grid-line-strong); border:2px solid var(--grid-line-strong); border-radius: var(--radius); overflow:hidden; }
  .pillar{ background: var(--bg-alt); padding: 34px 30px; }
  .pillar h3{ font-size: 18px; margin-bottom: 10px; color: var(--gold-soft); }
  .pillar p{ color: var(--ink-dim); font-size: 14.5px; }

  /* ---------- CTA banner ---------- */
  .cta-banner{
    text-align:center; border-radius: 20px; padding: 64px 32px;
    background: linear-gradient(160deg, var(--panel), var(--bg-alt));
    border: 1px solid var(--grid-line-strong);
    position: relative; overflow:hidden;
  }
  .cta-banner h2{ font-size: clamp(26px,4vw,38px); margin-bottom: 14px; }
  .cta-banner p{ color: var(--ink-dim); max-width: 480px; margin: 0 auto 30px; }

  /* ---------- Footer ---------- */
  footer{ border-top: 1px solid var(--grid-line-strong); padding: 48px 0 30px; }
  .foot-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap: 20px; margin-bottom: 30px; }
  .foot-links{ display:flex; gap: 26px; font-size: 13.5px; color: var(--ink-dim); }
  .foot-links a:hover{ color: var(--gold); }
  .foot-bottom{ font-size: 12.5px; color: var(--ink-faint); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; border-top:1px solid var(--grid-line); padding-top:22px; }

  /* ---------- Legal page ---------- */
  .legal-hero{ padding: 64px 0 40px; border-bottom: 1px solid var(--grid-line-strong); }
  .legal-hero h1{ font-size: clamp(32px,5vw,52px); margin-bottom: 12px; }
  .legal-hero p{ color: var(--ink-dim); font-size: 15.5px; max-width: 560px; }
  .legal-notice{
    margin-top: 22px; font-size: 13px; color: var(--gold);
    background: rgba(180,83,9,0.07); border: 1px solid rgba(180,83,9,0.22);
    border-radius: 10px; padding: 14px 16px; max-width: 720px; line-height: 1.55;
  }
  .legal-body{ padding: 56px 0 100px; }
  .legal-layout{ display:grid; grid-template-columns: 220px 1fr; gap: 48px; align-items:start; }
  .legal-tabs{
    position: sticky; top: 88px; display:flex; flex-direction:column; gap: 4px;
  }
  .legal-tab{
    text-align:left; padding: 11px 14px; border-radius: 8px; font-size: 14px;
    color: var(--ink-dim); border: 1px solid transparent; transition: all .15s ease;
  }
  .legal-tab:hover{ color: var(--ink); background: var(--bg-alt); }
  .legal-tab.active{ color: var(--gold); background: var(--bg-alt); border-color: var(--grid-line-strong); font-weight: 600; }
  .legal-panel{ display:none; }
  .legal-panel.active{ display:block; }
  .legal-panel h2{ font-size: 26px; margin-bottom: 8px; }
  .legal-updated{ font-family:'JetBrains Mono'; font-size: 12px; color: var(--ink-faint); margin-bottom: 28px; display:block; }
  .legal-panel h3{ font-size: 16.5px; margin: 28px 0 10px; color: var(--ink); }
  .legal-panel h3:first-of-type{ margin-top: 6px; }
  .legal-panel p{ color: var(--ink-dim); font-size: 14.5px; line-height: 1.7; margin-bottom: 12px; }
  .legal-panel ul{ margin: 0 0 12px 18px; color: var(--ink-dim); font-size: 14.5px; line-height: 1.7; }
  .legal-panel li{ margin-bottom: 6px; }
  .legal-panel a.inline-link{ color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
  .legal-panel strong{ color: var(--ink); }
  .legal-contact{
    margin-top: 32px; padding: 20px 22px; border-radius: var(--radius);
    background: var(--bg-alt); border: 1px solid var(--grid-line-strong); font-size: 14px; color: var(--ink-dim);
  }
  .legal-contact strong{ color: var(--ink); }
  .legal-table{ width:100%; border-collapse: collapse; margin: 6px 0 22px; font-size: 13.5px; }
  .legal-table th, .legal-table td{ text-align:left; padding: 10px 12px; border-bottom: 1px solid var(--grid-line-strong); vertical-align: top; color: var(--ink-dim); }
  .legal-table th{ color: var(--ink); font-family:'JetBrains Mono'; font-weight:600; font-size: 11.5px; text-transform:uppercase; letter-spacing:.03em; }
  .legal-table tr:last-child td{ border-bottom:none; }

  @media (max-width: 860px){
    .legal-layout{ grid-template-columns: 1fr; }
    .legal-tabs{ position: static; flex-direction: row; overflow-x: auto; padding-bottom: 4px; gap: 8px; }
    .legal-tab{ white-space: nowrap; }
  }

  @media (max-width: 860px){
    .stats{ grid-template-columns: 1fr 1fr; }
    .stat:nth-child(2){ border-right:none; }
    .board{ grid-template-columns: 1fr; }
    .how-grid{ grid-template-columns: 1fr; }
    .phone-mock{ order: -1; max-width: 220px; }
    .pillars{ grid-template-columns: 1fr; }
  }
  @media (max-width: 640px){
    .nav-links{ display:none; }
    nav{ padding: 16px 20px; }
    .wrap{ padding: 0 20px; }
    section{ padding: 64px 0; }
    .foot-row{ flex-direction:column; align-items:flex-start; }
  }
  @media (prefers-reduced-motion: reduce){
    *{ animation: none !important; transition: none !important; }
    html{ scroll-behavior:auto; }
  }