/* ── RESET ─────────────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }

    /* ── TOKENS ────────────────────────────────────────────────────── */
    :root {
      --bg:       #0b0b0b;
      --surface:  #111111;
      --rule:     #1c1c1c;
      --muted:    #3a3a3a;
      --dim:      #6b6560;
      --body:     #a8a29c;
      --text:     #d4cfc9;
      --bright:   #ede8e0;
      --accent:   #a8917a;
      --accent-d: #7a6a58;

      --font-serif: 'Playfair Display', Georgia, serif;
      --font-mono:  'Fragment Mono', 'Courier New', monospace;

      --max: 1100px;
      --gutter: clamp(1.5rem, 5vw, 4rem);
    }

    /* ── BASE ──────────────────────────────────────────────────────── */
    body {
      background: var(--bg);
      color: var(--body);
      font-family: var(--font-mono);
      font-size: 13px;
      line-height: 1.75;
      -webkit-font-smoothing: antialiased;
      cursor: default;
    }

    ::selection { background: var(--accent-d); color: var(--bright); }

    /* ── GRAIN OVERLAY ─────────────────────────────────────────────── */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
      pointer-events: none;
      z-index: 500;
      opacity: 0.4;
    }

    /* ── LAYOUT ────────────────────────────────────────────────────── */
    .container {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 var(--gutter);
    }

    .rule { border: none; border-top: 1px solid var(--rule); }

    /* ── LABELS ────────────────────────────────────────────────────── */
    .label {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted);
    }

    /* ── NAV ───────────────────────────────────────────────────────── */
    nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      transition: background 0.5s;
    }
    nav.solid {
      background: rgba(11,11,11,0.96);
      border-bottom: 1px solid var(--rule);
      backdrop-filter: blur(12px);
    }

    .nav-inner {
      max-width: var(--max);
      margin: 0 auto;
      padding: 1.6rem var(--gutter);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
    }

    .nav-logo {
      font-family: var(--font-serif);
      font-size: 1rem;
      font-weight: 400;
      letter-spacing: 0.06em;
      color: var(--bright);
      text-decoration: none;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .nav-link {
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--dim);
      text-decoration: none;
      white-space: nowrap;
      transition: color 0.2s;
    }
    .nav-link:hover { color: var(--text); }

    .nav-right {
      display: flex;
      align-items: center;
      gap: 2.5rem;
      flex-shrink: 0;
    }

    .nav-cta {
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--accent);
      text-decoration: none;
      white-space: nowrap;
      transition: opacity 0.2s;
    }
    .nav-cta:hover { opacity: 0.65; }

    /* ── HERO ──────────────────────────────────────────────────────── */
    .hero {
      min-height: 100svh;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 0 var(--gutter) 5rem;
      position: relative;
      overflow: hidden;
    }

    /* Faint radial glow */
    .hero::after {
      content: '';
      position: absolute;
      bottom: -10%;
      left: 50%;
      transform: translateX(-50%);
      width: 70vw;
      height: 50vw;
      background: radial-gradient(ellipse, rgba(168,145,122,0.055) 0%, transparent 65%);
      pointer-events: none;
    }

    .hero-inner { max-width: var(--max); width: 100%; margin: 0 auto; }

    .hero-label {
      display: inline-block;
      margin-bottom: 2.5rem;
      opacity: 0;
      animation: up 0.9s 0.1s cubic-bezier(.16,1,.3,1) forwards;
    }

    .hero-title {
      font-family: var(--font-serif);
      font-size: clamp(3.2rem, 9.5vw, 9rem);
      font-weight: 400;
      line-height: 0.96;
      letter-spacing: -0.01em;
      color: var(--bright);
      margin-bottom: 3rem;
      opacity: 0;
      animation: up 0.9s 0.25s cubic-bezier(.16,1,.3,1) forwards;
    }

    .hero-title em {
      font-style: italic;
      color: var(--accent);
    }

    .hero-foot {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 2rem;
      flex-wrap: wrap;
      opacity: 0;
      animation: up 0.9s 0.45s cubic-bezier(.16,1,.3,1) forwards;
    }

    .hero-sub {
      max-width: 380px;
      color: var(--dim);
      font-size: 12px;
      line-height: 1.8;
    }

    .hero-action {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 0.8rem;
    }

    .btn-enter {
      display: inline-block;
      padding: 0.85rem 2.2rem;
      background: transparent;
      border: 1px solid var(--accent-d);
      color: var(--accent);
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      text-decoration: none;
      transition: background 0.25s, border-color 0.25s, color 0.25s;
      cursor: pointer;
    }
    .btn-enter:hover {
      background: var(--accent-d);
      border-color: var(--accent-d);
      color: var(--bright);
    }

    .hero-note {
      font-size: 10px;
      color: var(--muted);
      letter-spacing: 0.06em;
    }

    /* ── SECTION BASE ──────────────────────────────────────────────── */
    section { padding: clamp(5rem, 10vw, 10rem) 0; }

    /* ── WHAT IS IT ────────────────────────────────────────────────── */
    .what .container {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 4rem;
      align-items: start;
    }

    .what-left { padding-top: 0.25rem; }

    .what-n {
      font-size: 10px;
      color: var(--muted);
      letter-spacing: 0.1em;
      margin-bottom: 0.5rem;
    }

    .what-right {}

    .what-headline {
      font-family: var(--font-serif);
      font-size: clamp(1.5rem, 3vw, 2.4rem);
      font-weight: 400;
      color: var(--text);
      line-height: 1.3;
      margin-bottom: 2rem;
    }

    .what-headline em {
      font-style: italic;
      color: var(--accent);
    }

    .what-body {
      color: var(--dim);
      font-size: 12px;
      line-height: 1.9;
      max-width: 540px;
    }

    .what-body p + p { margin-top: 1.2rem; }

    /* ── HOW IT WORKS ──────────────────────────────────────────────── */
    .how { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

    .how .container {}

    .how-header {
      display: flex;
      align-items: baseline;
      gap: 1.5rem;
      margin-bottom: 4rem;
    }

    .how-title {
      font-family: var(--font-serif);
      font-size: clamp(1.2rem, 2.5vw, 1.8rem);
      font-weight: 400;
      color: var(--text);
    }

    .steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
    }

    .step {
      padding: 2.5rem 2rem 2.5rem 0;
      border-right: 1px solid var(--rule);
      padding-right: 2rem;
    }
    .step:last-child { border-right: none; padding-right: 0; }
    .step:not(:first-child) { padding-left: 2rem; }

    .step-n {
      font-size: 10px;
      color: var(--muted);
      letter-spacing: 0.12em;
      margin-bottom: 1.5rem;
    }

    .step-title {
      font-family: var(--font-serif);
      font-size: 1rem;
      font-weight: 400;
      font-style: italic;
      color: var(--text);
      margin-bottom: 0.8rem;
      line-height: 1.3;
    }

    .step-body {
      font-size: 11px;
      color: var(--dim);
      line-height: 1.8;
    }

    /* ── WHY IT WORKS ──────────────────────────────────────────────── */
    .why .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6rem;
      align-items: start;
    }

    .why-left {}

    .why-headline {
      font-family: var(--font-serif);
      font-size: clamp(1.5rem, 3vw, 2.4rem);
      font-weight: 400;
      color: var(--text);
      line-height: 1.25;
      margin-bottom: 2rem;
    }

    .why-headline em { font-style: italic; color: var(--accent); }

    .why-body {
      color: var(--dim);
      font-size: 12px;
      line-height: 1.9;
    }

    .why-body p + p { margin-top: 1.2rem; }

    .why-right {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .insight {
      padding: 1.8rem 0;
      border-top: 1px solid var(--rule);
    }
    .insight:last-child { border-bottom: 1px solid var(--rule); }

    .insight-label {
      font-size: 9px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 0.6rem;
    }

    .insight-text {
      font-family: var(--font-serif);
      font-size: clamp(0.95rem, 1.5vw, 1.1rem);
      font-weight: 400;
      color: var(--text);
      line-height: 1.4;
    }

    /* ── PHILOSOPHY ────────────────────────────────────────────────── */
    .philosophy {
      border-top: 1px solid var(--rule);
      border-bottom: 1px solid var(--rule);
      background: var(--surface);
    }

    .philosophy .container {
      max-width: 720px;
      text-align: center;
    }

    .phil-label { margin-bottom: 3rem; display: inline-block; }

    .phil-quote {
      font-family: var(--font-serif);
      font-size: clamp(1.4rem, 3.5vw, 2.6rem);
      font-weight: 400;
      font-style: italic;
      color: var(--bright);
      line-height: 1.35;
      margin-bottom: 3rem;
    }

    .phil-quote strong {
      font-style: normal;
      font-weight: 500;
      color: var(--accent);
    }

    .phil-body {
      font-size: 12px;
      color: var(--dim);
      line-height: 1.9;
      max-width: 480px;
      margin: 0 auto;
    }

    .phil-body p + p { margin-top: 1rem; }

    /* ── CTA ───────────────────────────────────────────────────────── */
    .cta .container {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: end;
      gap: 4rem;
    }

    .cta-headline {
      font-family: var(--font-serif);
      font-size: clamp(2rem, 5vw, 4.5rem);
      font-weight: 400;
      color: var(--bright);
      line-height: 1.1;
    }

    .cta-headline em { font-style: italic; color: var(--accent); }

    .cta-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 1.2rem;
      padding-bottom: 0.5rem;
    }

    .cta-note {
      font-size: 10px;
      color: var(--muted);
      letter-spacing: 0.06em;
      text-align: right;
      line-height: 1.7;
    }

    /* ── FOOTER ────────────────────────────────────────────────────── */
    footer {
      border-top: 1px solid var(--rule);
      padding: 3rem 0;
    }

    footer .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
      flex-wrap: wrap;
    }

    .footer-logo {
      font-family: var(--font-serif);
      font-size: 0.9rem;
      font-weight: 400;
      color: var(--muted);
      text-decoration: none;
    }

    .footer-copy {
      font-size: 10px;
      color: var(--muted);
      letter-spacing: 0.06em;
    }

    .footer-links {
      display: flex;
      gap: 2rem;
    }

    .footer-link {
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
      text-decoration: none;
      transition: color 0.2s;
    }
    .footer-link:hover { color: var(--body); }

    /* ── SCROLL REVEAL ─────────────────────────────────────────────── */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.85s cubic-bezier(.16,1,.3,1),
                  transform 0.85s cubic-bezier(.16,1,.3,1);
    }
    .reveal.visible {
      opacity: 1;
      transform: none;
    }
    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }
    .reveal-delay-4 { transition-delay: 0.45s; }

    /* ── ANIMATIONS ────────────────────────────────────────────────── */
    @keyframes up {
      from { opacity: 0; transform: translateY(30px); }
      to   { opacity: 1; transform: none; }
    }

    /* ── RESPONSIVE ────────────────────────────────────────────────── */
    @media (max-width: 800px) {
      .what .container { grid-template-columns: 1fr; gap: 2rem; }
      .steps            { grid-template-columns: 1fr 1fr; }
      .step             { border-right: none; border-bottom: 1px solid var(--rule); padding: 2rem 0; }
      .step:last-child  { border-bottom: none; }
      .step:not(:first-child) { padding-left: 0; }
      .why .container   { grid-template-columns: 1fr; gap: 3rem; }
      .cta .container   { grid-template-columns: 1fr; }
      .cta-right        { align-items: flex-start; }
      .cta-note         { text-align: left; }
      footer .container { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
    }

    @media (max-width: 640px) {
      .nav-right .nav-link { display: none; }
    }

    @media (max-width: 520px) {
      .steps { grid-template-columns: 1fr; }
      .nav-right { gap: 1.2rem; }
    }