/* ── Reset ─────────────────────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:           #1c2627;
      --bg-mid:       #253233;
      --bg-card:      #2d3d3f;
      --bg-elevated:  #374e50;
      --nav-bg:       #141b1c;
      --white:        #f8f8f8;
      --white-dim:    #c8c2c2;
      --white-soft:   #8a9898;
      --text:         #f8f8f8;
      --text-soft:    #c8c2c2;
      --text-muted:   #576567;
      --border:       rgba(255,255,255,0.08);
      --border-soft:  rgba(255,255,255,0.05);
      --gold:         #D4AF37;
      --gold-dim:     #b8962e;
      --gold-light:   #e6cc6b;
      --font:         'Inter', system-ui, sans-serif;
    }

    html { scroll-behavior: smooth; background: var(--bg); }
    body {
      font-family: var(--font);
      background: transparent;
      color: var(--text);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }

    /* ── Animated dot grid ──────────────────────────────────────────────────── */
    #dot-grid-canvas {
      position: fixed;
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      pointer-events: none;
      z-index: -1;
    }

    /* ── Nav ─────────────────────────────────────────────────────────────────── */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      background: rgba(17,24,25,0.92);
      backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--border);
    }
    .nav-inner {
      display: flex; align-items: center; justify-content: space-between;
      height: 64px; max-width: 1140px; margin: 0 auto; padding: 0 28px;
    }
    .nav-logo {
      display: flex; align-items: center; gap: 10px;
      text-decoration: none; flex-shrink: 0;
    }
    .nav-logo img { height: 36px; width: auto; display: block; }
    .nav-back {
      font-size: 13px; font-weight: 500; color: var(--text-muted);
      letter-spacing: 0.04em; text-decoration: none; transition: color 0.2s;
      display: flex; align-items: center; gap: 5px;
    }
    .nav-back:hover { color: var(--text-soft); }
    .nav-back-arrow { font-size: 15px; line-height: 1; }

    /* ── Page layout ─────────────────────────────────────────────────────────── */
    .page-wrap {
      flex: 1;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 104px 24px 72px;
    }

    /* ── Card ────────────────────────────────────────────────────────────────── */
    .waitlist-card {
      width: 100%;
      max-width: 540px;
      background: var(--bg-mid);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 38px 40px 34px;
      box-shadow: 0 32px 80px rgba(0,0,0,0.45);
    }

    /* ── Wizard brand + stepper ──────────────────────────────────────────────── */
    .wiz-brand {
      font-size: 10px; font-weight: 700; letter-spacing: 0.22em;
      text-transform: uppercase; color: var(--text-muted);
      text-align: center; margin-bottom: 18px;
    }
    .stepper { display: flex; gap: 6px; margin-bottom: 26px; }
    .stepper-cell {
      flex: 1; height: 3px; border-radius: 2px;
      background: rgba(255,255,255,0.08); transition: background 0.3s;
    }
    .stepper-cell.done   { background: var(--gold-dim); }
    .stepper-cell.active { background: var(--gold); }

    /* ── Steps ───────────────────────────────────────────────────────────────── */
    .step { display: none; }
    .step.active { display: block; animation: stepIn 0.35s ease; }
    @keyframes stepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

    .step-eyebrow {
      font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
      text-transform: uppercase; color: var(--gold); margin-bottom: 9px;
    }
    .step-title {
      font-size: 24px; font-weight: 800; letter-spacing: -0.025em;
      color: var(--white); margin-bottom: 8px; line-height: 1.2;
    }
    .step-sub {
      font-size: 13.5px; font-weight: 400; color: var(--text-soft);
      line-height: 1.65; margin-bottom: 26px;
    }

    /* ── Form ────────────────────────────────────────────────────────────────── */
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .form-group { margin-bottom: 18px; }
    .form-group:last-child { margin-bottom: 0; }
    .form-group.full { grid-column: 1 / -1; }

    label {
      display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--text-soft); margin-bottom: 7px;
    }
    label .opt {
      font-weight: 400; color: var(--text-muted); letter-spacing: 0;
      text-transform: none; font-size: 10px;
    }

    input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
    select, textarea {
      width: 100%; background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 8px; padding: 12px 14px; font-family: var(--font);
      font-size: 14px; color: var(--text); outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
      appearance: none; -webkit-appearance: none;
    }
    input:focus, select:focus, textarea:focus {
      border-color: rgba(212,175,55,0.5);
      box-shadow: 0 0 0 3px rgba(212,175,55,0.08);
    }
    input::placeholder, textarea::placeholder { color: var(--text-muted); }

    select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23576567' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 14px center;
      padding-right: 36px; cursor: pointer;
    }
    select option { background: #253233; color: var(--text); }

    textarea { resize: vertical; min-height: 90px; line-height: 1.6; }

    /* ── Checkboxes ──────────────────────────────────────────────────────────── */
    .checkbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 2px; }
    .checkbox-item {
      display: flex; align-items: center; gap: 10px; cursor: pointer;
      padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border);
      background: var(--bg-card); transition: border-color 0.18s, background 0.18s; user-select: none;
    }
    .checkbox-item:hover { border-color: rgba(212,175,55,0.3); background: rgba(212,175,55,0.04); }
    .checkbox-item input[type="checkbox"] { display: none; }
    .checkbox-box {
      width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border);
      background: var(--bg-mid); flex-shrink: 0; display: flex; align-items: center;
      justify-content: center; transition: border-color 0.18s, background 0.18s;
    }
    .checkbox-box svg { opacity: 0; transition: opacity 0.15s; }
    .checkbox-item input[type="checkbox"]:checked ~ .checkbox-box { border-color: var(--gold); background: rgba(212,175,55,0.15); }
    .checkbox-item input[type="checkbox"]:checked ~ .checkbox-box svg { opacity: 1; }
    .checkbox-item:has(input:checked) { border-color: rgba(212,175,55,0.45); background: rgba(212,175,55,0.06); }
    .checkbox-label { font-size: 13px; font-weight: 500; color: var(--text-soft); line-height: 1.3; }

    /* ── Footer (Back / Continue) ────────────────────────────────────────────── */
    .footer { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
    .btn-back {
      background: none; border: 1px solid var(--border); color: var(--text-soft);
      border-radius: 8px; padding: 13px 20px; font-family: var(--font);
      font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s;
    }
    .btn-back:hover { border-color: rgba(255,255,255,0.2); color: var(--white); }
    .btn-cont {
      margin-left: auto; background: var(--gold); color: #111a1b; border: none;
      border-radius: 8px; padding: 14px 26px; font-family: var(--font);
      font-size: 14px; font-weight: 700; letter-spacing: 0.04em; cursor: pointer;
      transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    }
    .btn-cont:hover { background: var(--gold-light); transform: translateY(-1px); box-shadow: 0 8px 28px rgba(212,175,55,0.25); }
    .btn-cont:active { transform: translateY(0); box-shadow: none; }
    .btn-cont:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; }

    /* ── Below card links ────────────────────────────────────────────────────── */
    .card-footer-link { margin-top: 22px; text-align: center; font-size: 13px; color: var(--text-muted); }
    .card-footer-link a { color: var(--gold-dim-text, var(--gold-dim)); text-decoration: none; font-weight: 500; transition: color 0.2s; }
    .card-footer-link a:hover { color: var(--gold); }

    /* ── Success state ───────────────────────────────────────────────────────── */
    .success-state { display: none; text-align: center; padding: 20px 0 8px; }
    .success-icon { font-size: 48px; line-height: 1; margin-bottom: 20px; }
    .success-heading { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--gold); margin-bottom: 12px; }
    .success-sub { font-size: 14px; color: var(--text-soft); line-height: 1.7; }

    /* ── Responsive ──────────────────────────────────────────────────────────── */
    @media (max-width: 580px) {
      .waitlist-card { padding: 30px 22px 28px; }
      .form-row { grid-template-columns: 1fr; gap: 0; }
      .form-row .form-group { margin-bottom: 18px; }
      .checkbox-grid { grid-template-columns: 1fr; }
      .step-title { font-size: 22px; }
    }