:root{
    --bg:      #fafaf9;
    --surface: #ffffff;
    --ink:     #131313;
    --ink-70:  #56534d;
    --ink-40:  #9c988f;
    --line:    #e6e3dd;
    --accent:  #d13b2f;
    --radius:  6px;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:960px; margin:0 auto; padding:0 32px;}
  .label{
    font-family:'JetBrains Mono',monospace;
    font-size:0.72rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--ink-40);
  }

  /* NAV */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(250,250,249,0.85);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  nav{
    width:100%; padding:20px 48px;
    display:flex; align-items:center; justify-content:space-between;
  }
  .brand{display:flex; align-items:center; gap:10px;}
  .brand img{width:26px; height:26px; flex-shrink:0; border-radius:6px; object-fit:cover;}
  .brand span{font-weight:600; font-size:0.98rem; letter-spacing:-0.01em;}
  .navlinks{display:flex; gap:8px; align-items:center;}
  .navlinks a{
    font-size:0.88rem; color:var(--ink-70); padding:8px 14px; border-radius:var(--radius);
    transition:color 0.15s, background 0.15s;
  }
  .navlinks a:hover, .navlinks a:focus-visible{color:var(--ink); background:var(--line);}
  .navtoggle{display:none; background:none; border:none; color:var(--ink); font-size:1.4rem; cursor:pointer;}

  /* HERO */
  .hero{padding:120px 32px 88px;}
  .hero .label{margin-bottom:20px; display:inline-block;}
  .hero h1{
    font-size:clamp(2.4rem, 6vw, 4rem);
    font-weight:600;
    letter-spacing:-0.03em;
    line-height:1.08;
    max-width:14ch;
  }
  .hero p{
    max-width:480px; margin-top:22px;
    color:var(--ink-70); font-size:1.05rem;
  }
  .hero-cta{display:flex; gap:12px; margin-top:36px; flex-wrap:wrap;}
  .btn{
    font-size:0.9rem; font-weight:500;
    padding:12px 22px; border-radius:var(--radius); border:1px solid transparent; cursor:pointer;
    transition:opacity 0.15s, border-color 0.15s, background 0.15s;
    display:inline-block;
  }
  .btn-solid{background:var(--ink); color:var(--surface);}
  .btn-solid:hover{opacity:0.82;}
  .btn-ghost{border-color:var(--line); color:var(--ink);}
  .btn-ghost:hover{border-color:var(--ink-40);}
  .btn-sm{font-size:0.8rem; padding:9px 16px;}

  /* COUNTDOWN */
  .countdown-section{border-top:1px solid var(--line); padding:80px 32px;}
  .cd-head{display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:32px;}
  .cd-head h2{font-size:1.3rem; font-weight:600; letter-spacing:-0.01em;}
  .cd-status{font-family:'JetBrains Mono',monospace; font-size:0.75rem; color:var(--accent); letter-spacing:0.04em; display:flex; align-items:center;}
  .cd-status .dot{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); margin-right:8px; animation:pulse 1.8s infinite;}
  @keyframes pulse{0%,100%{opacity:1;} 50%{opacity:0.3;}}
  .countdown{display:flex; gap:48px; flex-wrap:wrap; justify-content:center; text-align:center;}
  .cd-unit .num{
    font-family:'JetBrains Mono',monospace; font-weight:600; font-size:clamp(1.8rem,5vw,2.6rem);
    font-variant-numeric:tabular-nums; letter-spacing:-0.02em;
  }
  .cd-unit .lbl{font-family:'JetBrains Mono',monospace; font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-40); margin-top:4px;}
  .cd-note{margin-top:28px; color:var(--ink-40); font-size:0.82rem; font-family:'JetBrains Mono',monospace;}

  /* SECTIONS */
  section{border-top:1px solid var(--line);}
  #games, #about, #contact{padding:120px 32px;}
  .sec-head{margin-bottom:48px;}
  .sec-head h2{font-size:1.9rem; font-weight:600; letter-spacing:-0.02em; margin-top:8px;}
  .sec-head p{color:var(--ink-70); max-width:480px; margin-top:10px;}

  /* GAME CARD */
  .game-card{
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    padding:40px; display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px;
  }
  .game-tag{font-family:'JetBrains Mono',monospace; font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent);}
  .game-card h3{font-size:2rem; font-weight:600; letter-spacing:-0.02em; margin-top:8px;}
  .game-sub{color:var(--ink-40); font-family:'JetBrains Mono',monospace; font-size:0.8rem; margin-top:4px;}
  .game-card p.desc{color:var(--ink-70); margin-top:16px;}
  .chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px;}
  .chip{
    font-family:'JetBrains Mono',monospace; font-size:0.7rem; padding:5px 11px;
    background:var(--bg); border:1px solid var(--line); border-radius:20px; color:var(--ink-70);
  }
  .feat-list{list-style:none; display:flex; flex-direction:column; gap:12px; align-self:center;}
  .feat-list li{padding-left:18px; position:relative; color:var(--ink-70); font-size:0.92rem;}
  .feat-list li::before{content:"—"; position:absolute; left:0; color:var(--ink-40);}

  .video-block{margin-top:40px; text-align:center;}
  .video-block .label{display:block; margin-bottom:16px;}
  .video-embed{
    width:260px; aspect-ratio:9/16; margin:0 auto;
    border-radius:12px; overflow:hidden; border:1px solid var(--line); background:var(--surface);
  }
  .video-embed iframe{width:100%; height:100%; display:block;}

  /* ABOUT */
  .about-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
  .about-copy p{color:var(--ink-70); margin-bottom:14px;}
  .about-facts{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
  .fact .label{margin-bottom:5px; display:block;}
  .fact div.val{font-weight:500; font-size:0.98rem;}

  .team-heading{margin-top:72px;}
  .team-heading h3{font-size:1.3rem; font-weight:600; margin-bottom:4px;}
  .team-heading p{color:var(--ink-40); font-size:0.82rem; font-family:'JetBrains Mono',monospace;}
  .team-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; margin-top:24px;}
  .team-card{
    background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:26px;
  }
  .team-avatar{
    width:44px; height:44px; border-radius:50%; background:var(--bg); border:1px solid var(--line);
    object-fit:cover;
    margin-bottom:16px;
  }
  .team-card h4{font-weight:600; font-size:1rem;}
  .team-card .role{font-family:'JetBrains Mono',monospace; font-size:0.7rem; color:var(--accent); letter-spacing:0.05em; text-transform:uppercase; margin-top:3px;}
  .team-card .bio{color:var(--ink-40); font-size:0.85rem; margin-top:12px;}
  .team-card .btn{margin-top:16px;}

  /* CONTACT */
  .contact-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px;}
  .contact-info h2{font-size:1.9rem; font-weight:600; letter-spacing:-0.02em; margin-top:8px;}
  .contact-info p{color:var(--ink-70); margin-top:12px; max-width:360px;}
  .contact-links{margin-top:28px;}
  .contact-links a{
    font-size:0.92rem; color:var(--ink-70); display:inline-flex; align-items:center; gap:8px;
    transition:color 0.15s;
  }
  .contact-links a:hover{color:var(--accent);}
  form{display:flex; flex-direction:column; gap:16px;}
  .field label{display:block; font-family:'JetBrains Mono',monospace; font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-40); margin-bottom:7px;}
  .field input, .field textarea{
    width:100%; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    padding:12px 14px; color:var(--ink); font-family:'Inter',sans-serif; font-size:0.94rem;
    transition:border-color 0.15s;
  }
  .field input:focus, .field textarea:focus{outline:none; border-color:var(--ink-40);}
  .field textarea{resize:vertical; min-height:110px;}
  .form-status{font-family:'JetBrains Mono',monospace; font-size:0.8rem; color:var(--accent); min-height:1.2em;}

  footer{
    border-top:1px solid var(--line); padding:28px 0;
    color:var(--ink-40); font-family:'JetBrains Mono',monospace; font-size:0.76rem;
  }
  .footer-inner{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
  }
  .social-links{display:flex; gap:16px;}
  .social-links a{color:var(--ink-40); transition:color 0.15s;}
  .social-links a:hover{color:var(--ink);}
  .social-links svg{width:18px; height:18px;}

  @media (max-width:820px){
    .navlinks{
      position:fixed; top:64px; right:0; left:0; background:var(--bg);
      flex-direction:column; gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
      max-height:0; overflow:hidden; transition:max-height 0.3s ease; align-items:stretch;
    }
    .navlinks.open{max-height:260px;}
    .navlinks a{padding:16px 32px; border-bottom:1px solid var(--line); border-radius:0;}
    .navtoggle{display:block;}
    .game-card{grid-template-columns:1fr;}
    .about-grid, .contact-grid{grid-template-columns:1fr;}
    .countdown{gap:32px;}
  }
  :focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
  @media (prefers-reduced-motion:reduce){
    *{animation:none !important; transition:none !important;}
  }