:root {
      --bg: #07080b;
      --bg-soft: #0d1016;
      --panel: rgba(18, 22, 30, 0.82);
      --panel-strong: #11151d;
      --line: rgba(255,255,255,.10);
      --line-strong: rgba(255,255,255,.18);
      --text: #f4f6f8;
      --muted: #aeb7c3;
      --subtle: #768191;
      --accent: #f0c15b;
      --accent-2: #eb7e45;
      --blue: #77a8ff;
      --green: #78d7a6;
      --danger: #ff8c8c;
      --shadow: 0 30px 100px rgba(0,0,0,.45);
      --radius-xl: 32px;
      --radius-lg: 22px;
      --radius-md: 16px;
      --max: 1180px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--text);
      background:
        radial-gradient(circle at 15% 0%, rgba(119,168,255,.13), transparent 28rem),
        radial-gradient(circle at 85% 8%, rgba(240,193,91,.12), transparent 26rem),
        linear-gradient(180deg, #07080b 0%, #090b10 45%, #06070a 100%);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.55;
      overflow-x: hidden;
    }

    a { color: inherit; }
    img { max-width: 100%; display: block; }
    button, input, textarea { font: inherit; }

    .shell { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
    .section { padding: 108px 0; position: relative; }
    .section.compact { padding: 72px 0; }
    .section-rule { border-top: 1px solid var(--line); }

    .eyebrow {
      margin: 0 0 14px;
      color: var(--accent);
      font-size: .78rem;
      font-weight: 800;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    h1, h2, h3, p { margin-top: 0; }
    h1 {
      margin-bottom: 24px;
      max-width: 860px;
      font-size: clamp(3.3rem, 8vw, 7.2rem);
      line-height: .94;
      letter-spacing: -.065em;
      font-weight: 800;
    }
    h2 {
      margin-bottom: 20px;
      max-width: 820px;
      font-size: clamp(2.2rem, 5vw, 4.6rem);
      line-height: 1;
      letter-spacing: -.045em;
    }
    h3 { font-size: 1.22rem; letter-spacing: -.015em; }
    .lede { max-width: 790px; color: #d6dce4; font-size: clamp(1.08rem, 2vw, 1.34rem); }
    .muted { color: var(--muted); }
    .fine { color: var(--subtle); font-size: .86rem; }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      border-bottom: 1px solid rgba(255,255,255,.07);
      background: rgba(7,8,11,.76);
      backdrop-filter: blur(18px);
    }
    .nav {
      min-height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 800; }
    .brand small { display: block; color: var(--subtle); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; }
    .nav-links { display: flex; align-items: center; gap: 22px; }
    .nav-links a { color: var(--muted); text-decoration: none; font-size: .9rem; }
    .nav-links a:hover { color: var(--text); }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 0 20px;
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      color: var(--text);
      background: rgba(255,255,255,.045);
      text-decoration: none;
      font-weight: 750;
      cursor: pointer;
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
    }
    .button:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.33); background: rgba(255,255,255,.08); }
    .button.primary { color: #0a0b0e; border-color: transparent; background: linear-gradient(135deg, var(--accent), #f4dc8e); }
    .button.blue { border-color: rgba(119,168,255,.45); background: rgba(119,168,255,.11); }
    .button.ghost { background: transparent; }
    .button.small { min-height: 40px; padding-inline: 16px; font-size: .86rem; }

    .hero { padding: 104px 0 56px; min-height: 760px; display: grid; align-items: center; }
    .hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); gap: 64px; align-items: center; }
    .hero-copy { position: relative; z-index: 2; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
    .hero-note { margin: 18px 0 0; color: var(--muted); font-size: .92rem; }

    .artifact-stage {
      position: relative;
      min-height: 590px;
      display: grid;
      place-items: center;
      isolation: isolate;
    }
    .artifact-stage::before {
      content: "";
      position: absolute;
      width: 510px; height: 510px; border-radius: 50%;
      background: radial-gradient(circle, rgba(119,168,255,.18), transparent 62%);
      filter: blur(8px);
      z-index: -2;
    }
    .artifact-card {
      width: min(100%, 365px);
      aspect-ratio: 9/16;
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.21);
      border-radius: 28px;
      background: #090b10;
      box-shadow: var(--shadow);
    }
    .floating-note {
      position: absolute;
      right: -18px; bottom: 60px;
      width: 220px; padding: 16px;
      border: 1px solid var(--line-strong);
      border-radius: 16px;
      background: rgba(13,16,22,.93);
      box-shadow: 0 18px 60px rgba(0,0,0,.35);
      transform: rotate(-3deg);
    }
    .floating-note strong { display: block; margin-bottom: 4px; }
    .floating-note span { color: var(--muted); font-size: .82rem; }

    .offer-strip {
      padding: 22px 0;
      border-block: 1px solid rgba(240,193,91,.22);
      background: linear-gradient(90deg, rgba(240,193,91,.07), rgba(235,126,69,.08), rgba(240,193,91,.07));
    }
    .offer-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
    .offer-inner strong { font-size: 1.05rem; }
    .offer-inner p { margin: 4px 0 0; color: var(--muted); }

    .intro-grid, .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 58px; align-items: start; }
    .cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .card {
      position: relative;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
      padding: 28px;
      overflow: hidden;
    }
    .card::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent); opacity: .5; }
    .card-number { color: var(--accent); font-size: .74rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
    .card p { color: var(--muted); margin-bottom: 0; }

    .demo-frame {
      min-height: 520px;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-xl);
      background: linear-gradient(135deg, rgba(119,168,255,.13), rgba(240,193,91,.06) 44%, rgba(255,255,255,.02));
      box-shadow: var(--shadow);
      padding: 18px;
    }
    .demo-window { min-height: 482px; border-radius: 22px; border: 1px solid rgba(255,255,255,.11); background: #090c12; overflow: hidden; }
    .window-bar { height: 44px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 7px; padding: 0 14px; }
    .window-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.18); }

    .practice-panel {
      border: 1px solid rgba(119,168,255,.35);
      border-radius: var(--radius-xl);
      background: radial-gradient(circle at 82% 18%, rgba(119,168,255,.17), transparent 24rem), linear-gradient(135deg, rgba(119,168,255,.095), rgba(255,255,255,.025));
      padding: clamp(30px, 6vw, 68px);
      box-shadow: 0 30px 100px rgba(0,0,0,.25);
    }
    .practice-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: center; }
    .checklist { display: grid; gap: 13px; margin: 26px 0 30px; }
    .check { display: flex; gap: 11px; color: #d9e1ea; }
    .check::before { content: "✓"; color: var(--green); font-weight: 900; }
    .practice-card { padding: 24px; border: 1px solid rgba(255,255,255,.14); border-radius: 20px; background: rgba(6,8,12,.52); }
    .mode-label { display: inline-flex; padding: 7px 10px; margin-bottom: 18px; border-radius: 999px; color: #cfe0ff; background: rgba(119,168,255,.12); border: 1px solid rgba(119,168,255,.28); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
    .practice-card hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }

    .layer-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
    .layer { min-height: 270px; display: flex; flex-direction: column; justify-content: flex-end; }
    .layer-visual { min-height: 170px; margin-bottom: 26px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); position: relative; overflow: hidden; }

    .pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; align-items: stretch; }
    .price-card { padding: 30px; display: flex; flex-direction: column; }
    .price-card.featured { border-color: rgba(240,193,91,.42); background: linear-gradient(180deg, rgba(240,193,91,.10), rgba(255,255,255,.025)); transform: translateY(-10px); }
    .price-label { color: var(--muted); font-size: .82rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
    .price { margin: 16px 0 6px; font-size: 2.65rem; font-weight: 850; letter-spacing: -.04em; }
    .price small { color: var(--muted); font-size: .95rem; font-weight: 600; letter-spacing: 0; }
    .price-list { list-style: none; padding: 0; margin: 24px 0 28px; display: grid; gap: 10px; color: #d1d8e0; }
    .price-list li { display: flex; gap: 10px; }
    .price-list li::before { content: "•"; color: var(--accent); }
    .price-card .button { margin-top: auto; }

    .advanced-row { margin-top: 24px; padding: 24px 28px; display: flex; align-items: center; justify-content: space-between; gap: 28px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.02); }

    .club {
      border: 1px solid rgba(240,193,91,.34);
      border-radius: var(--radius-xl);
      background: radial-gradient(circle at 15% 20%, rgba(240,193,91,.13), transparent 22rem), linear-gradient(135deg, rgba(240,193,91,.06), rgba(255,255,255,.018));
      overflow: hidden;
    }
    .club-grid { display: grid; grid-template-columns: .88fr 1.12fr; }
    .club-copy { padding: clamp(32px, 6vw, 68px); border-right: 1px solid var(--line); }
    .club-form { padding: clamp(32px, 6vw, 68px); }
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    label { display: grid; gap: 8px; color: #ccd3dc; font-size: .84rem; font-weight: 700; }
    label.full { grid-column: 1 / -1; }
    input, textarea { width: 100%; color: var(--text); border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(0,0,0,.25); padding: 13px 14px; outline: none; }
    input:focus, textarea:focus { border-color: rgba(240,193,91,.55); box-shadow: 0 0 0 3px rgba(240,193,91,.08); }
    textarea { min-height: 120px; resize: vertical; }

    .final-cta { text-align: center; }
    .final-cta h2 { margin-inline: auto; max-width: 900px; }
    .final-cta .lede { margin-inline: auto; }
    .final-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

    footer { padding: 34px 0 48px; border-top: 1px solid var(--line); color: var(--subtle); }
    .footer-row { display: flex; justify-content: space-between; gap: 24px; }

    @media (max-width: 980px) {
      .hero-grid, .intro-grid, .two-col, .practice-grid, .club-grid { grid-template-columns: 1fr; }
      .hero { padding-top: 76px; }
      .artifact-stage { min-height: 530px; }
      .floating-note { right: 4%; }
      .cards-3, .layer-grid, .pricing-grid { grid-template-columns: 1fr; }
      .price-card.featured { transform: none; }
      .club-copy { border-right: 0; border-bottom: 1px solid var(--line); }
    }

    @media (max-width: 720px) {
      .shell { width: min(calc(100% - 26px), var(--max)); }
      .section { padding: 78px 0; }
      .nav-links a:not(.button) { display: none; }
      .hero { min-height: auto; }
      h1 { font-size: clamp(3.05rem, 17vw, 5.2rem); }
      .hero-actions .button { width: 100%; }
      .offer-inner, .advanced-row, .footer-row { align-items: stretch; flex-direction: column; }
      .offer-inner .button, .advanced-row .button { width: 100%; }
      .form-grid { grid-template-columns: 1fr; }
      .form-grid label { grid-column: auto; }
      .artifact-card { width: 310px; }
      .floating-note { right: 0; bottom: 30px; width: 195px; }
      .demo-frame { padding: 10px; min-height: 420px; }
      .demo-window { min-height: 400px; }
    }