:root {
  --red: #ac0200;
  --red-deep: #7a0100;
  --cream: #F5EBD8;
  --cream-warm: #EFE3CC;
  --ink: #110A0A;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--red);
  color: var(--cream);
  font-family: 'Familjen Grotesk', system-ui, sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Mic cursor */
html, body, a, button, input, textarea, label, .vibe-cursor, .vibe-cursor * {
  cursor: url(assets/cursor.png) 8 4, auto;
}

input, textarea, button { font-family: inherit; }

::selection { background: var(--cream); color: var(--red); }

/* Marquee */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}
.marquee-track {
  display: inline-flex;
  gap: 60px;
  animation: marquee 38s linear infinite;
  will-change: transform;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Inputs */
.vibe-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid currentColor;
  padding: 14px 2px;
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: inherit;
  outline: none;
  transition: border-color 0.2s, border-width 0.2s;
}
.vibe-input:focus {
  border-bottom-width: 2.5px;
}
.vibe-input::placeholder {
  opacity: 0.5;
  font-weight: 400;
}

/* Native date input — keep the calendar icon visible on cream bg */
input.vibe-input[type="date"] {
  font-family: 'Familjen Grotesk', sans-serif;
  color: inherit;
  min-height: 50px;
}
input.vibe-input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.65;
  filter: invert(8%) sepia(95%) saturate(7500%) hue-rotate(358deg) brightness(85%) contrast(120%);
  margin-left: 8px;
}
input.vibe-input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}
/* Empty date input shows the format hint in placeholder color */
input.vibe-input[type="date"]:not(:focus):invalid,
input.vibe-input[type="date"]:not(:focus):placeholder-shown {
  color: inherit;
}

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 20px 32px;
  background: var(--cream);
  color: var(--red);
  border: none;
  border-radius: 999px;
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.005em;
  transition: transform 0.2s ease, background 0.2s ease;
}
.btn-primary:hover { transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 20px 32px;
  background: transparent;
  color: var(--cream);
  border: 1.5px solid var(--cream);
  border-radius: 999px;
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.005em;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.btn-ghost:hover { background: var(--cream); color: var(--red); transform: translateY(-2px); }
.btn-ghost:active { transform: translateY(0); }

/* Vibe-pill (small chip) */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* The brand mark — used via CSS mask so we can recolor */
.logo-mark {
  background-color: var(--cream);
  -webkit-mask: url(assets/logo.svg) no-repeat center / contain;
          mask: url(assets/logo.svg) no-repeat center / contain;
  display: inline-block;
}
.logo-mark-red {
  background-color: var(--red);
  -webkit-mask: url(assets/logo.svg) no-repeat center / contain;
          mask: url(assets/logo.svg) no-repeat center / contain;
  display: inline-block;
}

/* Page layout helpers */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
}

/* Section dividers — thin cream line */
.hr-cream {
  border: none;
  border-top: 1px solid rgba(245, 235, 216, 0.25);
  margin: 0;
}

/* Page width responsive baseline */
@media (max-width: 760px) {
  .container { padding: 0; }
  .btn-primary { padding: 16px 24px; font-size: 16px; }
  .btn-ghost { padding: 16px 24px; font-size: 16px; }
  .vibe-input { font-size: 16px; padding: 12px 2px; }
  .pill { font-size: 10px; padding: 6px 12px; }
}

/* Floating star drift for specs section */
@keyframes starDrift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(20px, -15px); }
  50%  { transform: translate(-10px, 25px); }
  75%  { transform: translate(-25px, -10px); }
  100% { transform: translate(0, 0); }
}
@keyframes starSpin {
  to { transform: rotate(360deg); }
}

/* Combine drift + spin via wrapper trick — using single animation with rotate inside drift via composite */
/* Browsers can run both animations on the same element; the latter wins for transform.
   So we instead nest: outer drift, inner spin. But we're using a single SVG.
   Simplify: use only drift (the rotation creates jitter against drift anyway). */