:root {
    --ink:#1f003d;
    --muted:#5e4f79;
    --accent:#1f003d;
    --radius:999px;
  }
  
  /* --------- GLOBAL --------- */
  * { box-sizing:border-box; margin:0; padding:0; }
  
  body {
    font-family:'DM Sans', system-ui, sans-serif;
    color:var(--ink);
    background:url('media/bg.png') center/cover no-repeat fixed;
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    overflow:hidden;
  }
  
  h2 {
    font-size:clamp(20px,2.5vw,28px);
    font-weight:700;
    margin-bottom:16px;
  }
  
  p {
    color:var(--muted);
    font-size:clamp(15px,1.2vw,17px);
    margin-bottom:32px;
    line-height:1.6;
  }
  
  /* --------- INDEX PAGE (landing hero) --------- */
  .hero {
    max-width:740px;
    width:88%;
    animation:fadeIn 1.4s ease forwards;
  }
  
  .wordmark-img {
    width:100%;
    max-width:100px;
    margin:0 auto 30px auto;
    display:block;
    filter:drop-shadow(0 0 3px rgba(31,0,61,0.08))
            drop-shadow(0 0 8px rgba(255,255,255,0.18));
  }
  
  .subtitle {
    font-size:clamp(21px,1.8vw,19px);
    color:var(--muted);
    line-height:1.5;
    max-width:550px;
    margin:0 auto 28px;
  }
  
  .waitlist-btn {
    display:inline-block;
    padding:14px 24px;
    background:var(--accent);
    color:#fff;
    border:none;
    border-radius:var(--radius);
    font-size:15px;
    font-weight:500;
    text-decoration:none;
    transition:transform .15s ease, background .2s ease;
  }
  
  .waitlist-btn:hover {
    transform:translateY(-1px);
    background:#320061;
  }
  
  @keyframes fadeIn {
    from {opacity:0; transform:translateY(10px);}
    to {opacity:1; transform:translateY(0);}
  }
  
  /* --------- MOBILE RESPONSIVE --------- */
  @media (max-width: 480px) {
    .hero h2 {
      font-size: 0.9rem;
      line-height: 1.32;
      max-width: 90%;
      margin: 0.5rem auto 0;
      text-align: center;
      word-break: normal;
    }
  
    .subtitle {
      font-size: 1.2rem;
      line-height: 1.38;
      max-width: 90%;
      margin: 0.75rem auto 1rem;
      text-align: center;
    }
  
    .hero .subtitle {
      font-size: 0.75rem;
      line-height: 1.35;
      margin: 0.75rem auto 1rem;
      max-width: 90%;
    }
  
    .hero {
      padding: 0 1rem;
    }
  }