/* ::::: one — minimal, geometric, unusual ::::: */

:root {
  --bg: #0c0c0e;
  --surface: #101116;
  --fg: #f5f7ff;
  --muted: #a5adbf;
  --line: #1a1b22;
  /* Brand-aligned purple palette (from logo) */
  --accent: #6b5bff;    /* primary violet */
  --accentB: #8a7dff;   /* lighter violet */
  --accentC: #b7b0ff;   /* soft lavender */
  --shadow: 0 10px 30px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.25);

  --radius: 16px;
  --radius-sm: 12px;
  --radius-lg: 28px;
  --container: 1160px;

  --space-1: clamp(8px, 1.2vw, 12px);
  --space-2: clamp(12px, 1.6vw, 16px);
  --space-3: clamp(16px, 2.1vw, 24px);
  --space-4: clamp(20px, 3vw, 36px);
  --space-5: clamp(28px, 4vw, 56px);
  --space-6: clamp(36px, 6vw, 84px);

  --title: clamp(36px, 6.4vw, 96px);
  --h2: clamp(24px, 3.8vw, 42px);
  --h3: clamp(18px, 2.2vw, 24px);
  --lede: clamp(16px, 2vw, 20px);

  --grid-size: 36px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --marquee-gap: min(8vw, 64px);

  --ring-cyan: color-mix(in oklab, var(--accent) 60%, transparent);
  --ring-magenta: color-mix(in oklab, var(--accentB) 40%, transparent);

  /* Highlight glow controls */
  --hlx: 50%;
  --hly: 34%;
  --hlsizeX: 720px;
  --hlsizeY: 520px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--fg);
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  line-height: 1.45;
  letter-spacing: 0.15px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Layered glow field */
  background:
    /* subtle static white highlight behind hero (tunable via --hl*) */
    radial-gradient(var(--hlsizeX) var(--hlsizeY) at var(--hlx) var(--hly), rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.05) 28%, transparent 60%),
    radial-gradient(900px 900px at var(--mx, 50%) var(--my, 30%), color-mix(in oklab, var(--accent) 16%, transparent) 0%, transparent 45%),
    radial-gradient(900px 900px at 10% -10%, color-mix(in oklab, var(--accentB) 14%, transparent) 0%, transparent 55%),
    radial-gradient(900px 900px at 110% 10%, color-mix(in oklab, var(--accentC) 10%, transparent) 0%, transparent 50%),
    var(--bg);
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  position: fixed;
  z-index: 9999;
  left: 16px;
  top: 16px;
  background: #000;
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
}

.container {
  width: min(100% - 2*var(--space-4), var(--container));
  margin-inline: auto;
}

.section {
  padding-block: var(--space-6);
  position: relative;
}

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(8px);
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px clamp(16px, 4vw, 28px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fg);
  text-decoration: none;
  padding: 6px 10px; /* give the logo more breathing room */
}
.brand-word {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: 18px;
}
.brand-mark {
  border-radius: 0;       /* no rounded frame */
  box-shadow: none;       /* remove border/glow to blend in */
}

.btn {
  appearance: none;
  border: 0;
  background: #fff;
  color: #000;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  will-change: transform;
  box-shadow: 0 10px 18px color-mix(in oklab, var(--accent) 20%, transparent), inset 0 0 0 1px rgba(255,255,255,0.04);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accentB) 55%, var(--accentC) 100%);
  color: #0b0720;
  box-shadow: 0 10px 28px color-mix(in oklab, var(--accent) 35%, transparent);
}
.btn.ghost {
  background: color-mix(in oklab, var(--surface) 70%, transparent);
  color: var(--fg);
  border: 1px solid var(--line);
}

/* HERO */
.hero {
  padding-block: calc(var(--space-6) + 4vh) var(--space-6);
  overflow: clip;
  min-height: calc(100svh - var(--nav-h, 64px));
  display: grid;
  align-items: center;
}
.bg-lattice {
  pointer-events: none;
  position: absolute;
  inset: -20vh 0 0 0;
  opacity: 0.25;
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent calc(var(--grid-size) - 1px), rgba(255,255,255,0.04) calc(var(--grid-size) - 1px), rgba(255,255,255,0.04) var(--grid-size)),
    repeating-linear-gradient(0deg, transparent 0, transparent calc(var(--grid-size) - 1px), rgba(255,255,255,0.04) calc(var(--grid-size) - 1px), rgba(255,255,255,0.04) var(--grid-size));
  mask-image: radial-gradient(1200px 600px at 50% 30%, black 20%, transparent 70%);
  transform: perspective(1000px) rotateX(40deg) translateY(-10%);
  transform-origin: 50% 0%;
}
.shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.shape {
  position: absolute;
  filter: blur(0.35px);
  mix-blend-mode: screen;
  opacity: 0.9;
  transform: translate3d(0,0,0);
  will-change: transform;
}
.shape::before {
  content: "";
  display: block;
  width: var(--w, 22vmin);
  height: var(--h, 22vmin);
  border-radius: var(--r, 24%);
  background: var(--b, var(--accent));
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--b) 20%, transparent) inset,
    0 0 80px color-mix(in oklab, var(--b) 70%, transparent);
  clip-path: var(--clip, none);
  transform: rotate(var(--rot, 0deg)) scale(var(--s, 1));
}
.s1 { --w:22vmin; --h:22vmin; --b: var(--accent);   --rot: 12deg; --r: 10% 30% 60% 30%/40% 40% 60% 20%; left:10%; top:22%; --s:1.05; }
.s2 { --w:26vmin; --h:8vmin;  --b: var(--accentB);  --rot:-18deg; --r: 8px; left:54%; top:18%; --clip: polygon(0 0, 100% 10%, 88% 100%, 8% 88%); }
.s3 { --w:10vmin; --h:10vmin; --b: var(--accentC);  --rot: 45deg; --r: 18%; right:14%; top:30%; --clip: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.s4 { --w:32vmin; --h:12vmin; --b: var(--accent);   --rot:-6deg;  --r: 14px; left:18%; bottom:14%; --clip: polygon(0 30%, 100% 0, 100% 70%, 0 100%); opacity: 0.7; }
.s5 { --w:12vmin; --h:28vmin; --b: var(--accentB);  --rot: 8deg;  --r: 22px; right:18%; bottom:18%; --clip: polygon(30% 0, 100% 0, 70% 100%, 0 100%); opacity: .65; }
.s6 { --w:14vmin; --h:14vmin; --b: var(--accentC);  --rot:-14deg; --r: 24%; left:44%; top:54%; --clip: polygon(0 0, 100% 0, 100% 60%, 60% 60%, 60% 100%, 0 100%); opacity: .55; }

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  align-items: center;
  min-height: 0; /* allow hero to fully fit in viewport */
}

/* Performance fallbacks for small screens/heights */
@media (width <= 1024px), (height <= 740px) {
  body { background-attachment: scroll; }
}
@media (width <= 820px), (height <= 680px) {
  .shape { mix-blend-mode: normal; opacity: .7; }
  :root {
    --hlx: 50%;
    --hly: 46%;
    --hlsizeX: 560px;
    --hlsizeY: 440px;
  }
}
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--surface) 60%, transparent);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.brand-lockup-mark {
  width: auto;
  height: 24px;
  border-radius: 6px;
}
.brand-lockup-word {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.headline {
  margin: var(--space-4) 0 var(--space-3);
  font-size: var(--title);
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-family: "Space Grotesk", Inter, sans-serif;
  background: linear-gradient(180deg, #fff 0%, #dfe6ff 30%, #b4c0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 12px rgba(255,255,255,0.07);
}
.headline .accent {
  background: linear-gradient(90deg, var(--accent), var(--accentB), var(--accentC));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lede {
  color: var(--muted);
  font-size: var(--lede);
  max-width: 60ch;
}
.lede.small { max-width: 42ch; }
.hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: var(--space-3);
}
.microcopy { color: #9aa3b7; margin-top: 8px; }

/* Mic button */
.btn.mic {
  position: relative;
  background: color-mix(in oklab, var(--surface) 70%, transparent);
  color: #dbe6ff;
  border: 1px solid var(--line);
  padding-left: 14px;
  padding-right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 18px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,0.04);
}
.btn.mic .icon {
  display: inline-grid;
  place-items: center;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 40%, #d1ccff, var(--accentB) 60%, var(--accent) 100%);
  box-shadow: 0 0 18px color-mix(in oklab, var(--accent) 45%, transparent), 0 0 0 1px color-mix(in oklab, var(--accentB) 45%, transparent) inset;
  line-height: 1;
  color: transparent;
}
.btn.mic .rings {
  position: absolute;
  inset: -10px;
  border-radius: 999px;
  pointer-events: none;
  background:
    radial-gradient(40% 40% at 50% 50%, var(--ring-cyan), transparent 55%),
    radial-gradient(60% 60% at 50% 50%, var(--ring-magenta), transparent 70%);
  opacity: 0;
  transition: opacity .25s ease;
  filter: blur(14px);
}
.btn.mic[aria-pressed="true"] .rings { opacity: 1; animation: rings 1.8s ease-out infinite; }
@keyframes rings {
  0% { transform: scale(0.92); opacity: .8; }
  60% { transform: scale(1.12); opacity: .25; }
  100% { transform: scale(1.18); opacity: 0; }
}
.mic-label { opacity: .9; }

/* FEATURES */
.grid {
  display: grid;
  gap: var(--space-3);
}
.feat-grid {
  grid-template-columns: repeat(12, 1fr);
}
.feat-grid .feat {
  grid-column: span 6;
}
@media (width <= 860px) {
  .feat-grid .feat {
    grid-column: 1 / -1;
  }
}
.card {
  position: relative;
  background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 80%, transparent), color-mix(in oklab, var(--surface) 40%, transparent));
  border: 1px solid var(--line);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: clip;
}
.card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: conic-gradient(from 0deg at 30% 10%, color-mix(in oklab, var(--accent) 15%, transparent), transparent 20%, color-mix(in oklab, var(--accentB) 15%, transparent) 45%, transparent 60%, color-mix(in oklab, var(--accentC) 15%, transparent) 80%, transparent 100%);
  filter: blur(22px);
  opacity: .25;
  z-index: -1;
}
.feat::before {
  content: attr(data-icon);
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--surface) 60%, transparent);
  border: 1px solid var(--line);
  margin-bottom: 12px;
  font-size: 20px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.35);
}
.feat h3 {
  font-size: var(--h3);
  margin: 0 0 6px 0;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.feat p {
  margin: 0;
  color: var(--muted);
}

/* HOW IT WORKS */
.section-title {
  font-size: var(--h2);
  font-weight: 700;
  margin: 0 0 var(--space-4) 0;
  font-family: "Space Grotesk", Inter, sans-serif;
}
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
@media (width <= 860px) {
  .steps {
    grid-template-columns: 1fr;
  }
}
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 80%, transparent), color-mix(in oklab, var(--surface) 50%, transparent));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
  box-shadow: var(--shadow);
  clip-path: polygon(0 0, 100% 6%, 100% 100%, 0 94%);
}
.num {
  font-size: 22px;
  font-weight: 800;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: inline-grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accentB));
  color: #031016;
  box-shadow: 0 8px 18px color-mix(in oklab, var(--accent) 30%, transparent);
}
.step h3 {
  margin: 0 0 4px 0;
  font-size: 18px;
}
.step p {
  margin: 0;
  color: var(--muted);
}

/* MARQUEE */
.vibes {
  padding-block: var(--space-5);
  overflow: clip;
}
.marquee {
  position: relative;
  border-block: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 60%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden; /* ensure no overflow while looping */
}
.track {
  display: flex;                 /* two identical groups side-by-side */
  width: max-content;            /* shrink to content width */
  animation: marquee-scroll var(--marquee-duration, 18s) linear infinite;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
}
.track .group {
  flex-shrink: 0;                /* groups keep full width */
  display: inline-flex;
  gap: var(--marquee-gap);
  padding-block: 14px;
  padding-inline: var(--marquee-gap); /* guarantees spacing at the seam */
}
.track .group span {
  font-size: clamp(18px, 4vw, 28px);
  color: #cfcaff;
  text-transform: uppercase;
}
@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }  /* exactly one group width */
}

/* JOIN */
.join .join-form {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: var(--space-3);
}
.field {
  flex: 1 1 320px;
  min-width: 260px;
}
.field input[type="email"] {
  width: 100%;
  background: color-mix(in oklab, var(--surface) 70%, transparent);
  border: 1px solid var(--line);
  color: var(--fg);
  padding: 14px 16px;
  border-radius: 999px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.field input::placeholder { color: #9099af; }
.field input:focus {
  border-color: color-mix(in oklab, var(--accent) 60%, transparent);
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent) 16%, transparent);
}
.hint {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: #9099af;
}

/* FOOTER */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--space-4);
  background: color-mix(in oklab, var(--surface) 55%, transparent);
}
.foot-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-family: "Space Grotesk", Inter, sans-serif;
  letter-spacing: 0.4px;
  margin: 0 0 6px 0;
}
.foot-note {
  color: var(--muted);
  margin: 0;
}

/* Responsive */
@media (width <= 860px) {
  .headline { line-height: 1.02; }
  .hero { padding-block-start: calc(var(--space-6) + 4vh); }
}

/* Tilt containers (JS sets vars) */
[data-tilt-container] {
  transform-style: preserve-3d;
  perspective: 1000px;
}
[data-tilt-container] .bg-lattice,
[data-tilt-container] .shapes {
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
}

/* Motion reduction */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .btn.mic .rings { display: none; }
  .track { animation: none; }
}

/* Toast + a11y helpers */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
#toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(16px);
  background: color-mix(in oklab, var(--surface) 80%, transparent);
  border: 1px solid var(--line);
  color: var(--fg);
  padding: 10px 14px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
  z-index: 100;
}
#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}