/* ============================================================================
   D4VE — LOCKED DESIGN SYSTEM
   Every variant imports this. It is the single source of visual truth:
   pure-white paper, black ink, dot-particle art, Helvetica Neue caps + SF Mono.
   Do not introduce colour, gradients-as-decoration, or new typefaces.
   ============================================================================ */

:root, :root[data-theme="dark"], :root[data-theme="light"] {
  color-scheme: light;

  /* ---- ink ---- */
  --paper:   #ffffff;   /* background, always */
  --ink:     #0a0a0a;   /* primary text + dots */
  --ink-2:   #545454;   /* secondary text */
  --faint:   #b9b9b9;   /* tertiary / labels */
  --hair:    #e7e7e7;   /* hairline rules */
  --hair-2:  #d3d3d3;   /* slightly stronger rule */
  --fill:    #f4f4f4;   /* whisper-grey block fill (use sparingly) */

  /* ---- type ---- */
  --display: "Helvetica Neue","Helvetica","Segoe UI",sans-serif;
  --mono:    ui-monospace,"SF Mono","SFMono-Regular","Menlo","Consolas",monospace;

  /* fluid display scale */
  --d1: clamp(2.6rem, 8.5vw, 7.5rem);   /* hero / manifesto */
  --d2: clamp(1.9rem, 5.2vw, 3.9rem);   /* section headline */
  --d3: clamp(1.25rem, 3vw, 2.1rem);    /* sub-headline */
  --body: clamp(.95rem, 1.35vw, 1.08rem);
  --small: clamp(.8rem, 1.05vw, .9rem);
  --label: clamp(.66rem, .9vw, .74rem); /* mono uppercase labels */

  /* rhythm */
  --gutter: clamp(22px, 6vw, 120px);
  --stack:  clamp(64px, 12vh, 180px);   /* vertical section padding */
  --maxw:   1240px;

  --track-wide: .3em;   /* wordmark tracking */
  --track-mid:  .16em;
  --track-lbl:  .22em;

  --ease: cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--mono); font-size: var(--body); line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: var(--ink); color: var(--paper); }

/* ---- the fixed dot-particle canvas (hero backdrop) ---- */
#stage {
  position: fixed; inset: 0; width: 100vw; height: 100svh; z-index: 0;
  pointer-events: none; opacity: 0; transition: opacity 1s var(--ease);
}
#stage.show { opacity: 1; }

/* ---- display type ---- */
.wordmark, .d1, .d2, .d3, .kicker {
  font-family: var(--display); font-weight: 500; text-transform: uppercase;
  text-wrap: balance; line-height: 1; margin: 0;
}
.wordmark { font-size: var(--d1); letter-spacing: var(--track-wide); }
.d1 { font-size: var(--d1); letter-spacing: .04em; line-height: .98; }
.d2 { font-size: var(--d2); letter-spacing: .05em; line-height: 1.02; }
.d3 { font-size: var(--d3); letter-spacing: .06em; line-height: 1.08; }

/* ---- mono utilities ---- */
.label, .kicker-mono {
  font-family: var(--mono); font-size: var(--label); text-transform: uppercase;
  letter-spacing: var(--track-lbl); color: var(--faint); font-weight: 400;
}
.tagline { font-family: var(--mono); font-size: clamp(.82rem,2.2vw,1.04rem); letter-spacing: .04em; color: var(--ink); }
.lede { font-family: var(--mono); font-size: clamp(1rem, 1.7vw, 1.28rem); line-height: 1.55; color: var(--ink); max-width: 52ch; }
p { color: var(--ink-2); }
.muted { color: var(--ink-2); }
.faint { color: var(--faint); }
a { color: inherit; }

/* ---- layout ---- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; z-index: 2; padding-block: var(--stack); }
.screen { position: relative; z-index: 2; min-height: 100svh; display: grid; place-items: center; padding: 8vh var(--gutter); text-align: center; }
.hr { height: 1px; background: var(--hair); border: 0; margin: 0; }
.hr-ink { height: 1px; background: var(--ink); border: 0; }

/* index number tag, e.g. 01 / */
.idx { font-family: var(--mono); font-size: var(--label); letter-spacing: var(--track-lbl); color: var(--faint); }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--mono); font-size: var(--small); text-transform: uppercase;
  letter-spacing: var(--track-mid); text-decoration: none; cursor: pointer;
  padding: .95em 1.7em; border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  border-radius: 0; transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
  pointer-events: auto;
}
.btn:hover { background: var(--paper); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* ---- waitlist form ---- */
.waitlist { display: flex; gap: 10px; flex-wrap: wrap; max-width: 480px; pointer-events: auto; }
.waitlist input[type=email] {
  flex: 1 1 220px; min-width: 0; font-family: var(--mono); font-size: var(--small);
  padding: .95em 1.1em; color: var(--ink); background: var(--paper);
  border: 1px solid var(--hair-2); border-radius: 0; outline: none;
  transition: border-color .2s var(--ease);
}
.waitlist input[type=email]:focus { border-color: var(--ink); }
.waitlist input::placeholder { color: var(--faint); letter-spacing: .02em; }
.waitlist button { flex: 0 0 auto; }
.waitlist.is-done input, .waitlist.is-done button { display: none; }
.wl-done { display: none; font-family: var(--mono); font-size: var(--small); letter-spacing: .04em; }
.waitlist.is-done + .wl-done, .wl-done.show { display: block; }
.wl-msg { font-family: var(--mono); font-size: var(--label); letter-spacing: .04em; color: var(--faint); margin-top: 10px; }

/* ---- footer ---- */
.footer {
  position: relative; z-index: 2; font-family: var(--mono); font-size: 11px;
  letter-spacing: .06em; color: var(--faint); line-height: 1.5;
  padding: clamp(28px,5vh,56px) var(--gutter); border-top: 1px solid var(--hair);
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.footer.fixed { position: fixed; left: 0; bottom: 0; border: 0; padding: clamp(18px,4vh,40px) var(--gutter); }

/* ---- dot motif helpers (static decorative dot grids) ---- */
.dotfield {
  background-image: radial-gradient(var(--faint) 1px, transparent 1.4px);
  background-size: 22px 22px;
}
.dotfield-tight { background-image: radial-gradient(var(--faint) 1px, transparent 1.3px); background-size: 14px 14px; }

/* ---- generic reveal-on-scroll ---- */
.rise { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { opacity: 1; transform: none; transition: none; }
  #stage { transition: none; }
}

/* ---- small screens ---- */
@media (max-width: 560px) {
  .wordmark { letter-spacing: .16em; }
  .footer { flex-direction: column; gap: 6px; }
}