:root {
  --bg: #141618;
  --bg-offset: #1e2024;
  --text: #f0f2f5;
  --text-muted: rgba(240, 242, 245, 0.5);
  --accent: #c0c0c0;
  --silver: #a0a0a0;
  --error: #e07a6b;
  --radius: 8px;
  --font-display: 'Syne', sans-serif;
  --font-sans: 'Outfit', sans-serif;
}

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

html {
  scroll-behavior: smooth;
  height: 100%;
  overflow-x: hidden;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.5;
  min-height: 100vh;
  min-height: 100dvh; /* Mobile: avoid address-bar overflow */
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Typography */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.big-text {
  font-size: clamp(2.5rem, 10vw, 5.5rem);
  line-height: 0.95;
  margin-bottom: 1.25rem;
  text-align: center;
  text-shadow:
    0 0 40px rgba(192, 192, 192, 0.25),
    0 0 80px rgba(192, 192, 192, 0.15),
    0 0 120px rgba(192, 192, 192, 0.08);
}

/* From Uiverse.io by chase2k25 */
.container {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #000000 0%, #0d0d0d 50%, #111 100%);
  overflow: hidden;
  box-shadow:
    100px 200px 1px rgba(255, 255, 255, 0.35),
    300px 150px 2px rgba(255, 255, 255, 0.28),
    500px 300px 1px rgba(255, 255, 255, 0.38),
    700px 100px 3px rgba(255, 255, 255, 0.32),
    200px 400px 2px rgba(255, 255, 255, 0.35),
    400px 600px 1px rgba(255, 255, 255, 0.28),
    600px 500px 3px rgba(255, 255, 255, 0.38),
    800px 300px 2px rgba(255, 255, 255, 0.32);
}

.container::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(
      circle at 20% 30%,
      rgba(255, 255, 255, 0.045) 0%,
      transparent 50%
    ),
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      rgba(255, 255, 255, 0.022) 0deg,
      rgba(255, 255, 255, 0.022) 10deg,
      transparent 10deg,
      transparent 30deg
    );
  box-shadow:
    50px 50px 2px rgba(255, 255, 255, 0.32),
    250px 300px 1px rgba(255, 255, 255, 0.35),
    450px 150px 3px rgba(255, 255, 255, 0.28),
    650px 400px 2px rgba(255, 255, 255, 0.38),
    850px 600px 1px rgba(255, 255, 255, 0.32),
    150px 450px 3px rgba(255, 255, 255, 0.35);
}

.container::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(
      circle at 80% 70%,
      rgba(255, 255, 255, 0.04) 0%,
      transparent 40%
    );
  box-shadow:
    75px 125px 1px rgba(255, 255, 255, 0.28),
    275px 225px 2px rgba(255, 255, 255, 0.35),
    475px 325px 3px rgba(255, 255, 255, 0.32),
    675px 175px 1px rgba(255, 255, 255, 0.38),
    875px 275px 2px rgba(255, 255, 255, 0.28),
    125px 375px 3px rgba(255, 255, 255, 0.35);
}

/* Layout - centered hero, no header */
main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  width: 100%;
  max-width: 560px;
}

.hero {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.subheadline {
  font-size: clamp(0.95rem, 2.5vw, 1.15rem);
  color: rgba(240, 242, 245, 0.85);
  text-align: center;
  margin-bottom: 2rem;
  font-weight: 400;
  line-height: 1.6;
}

/* Form */
.waitlist-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.input-group {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.email-wrap {
  position: relative;
}

.email-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-35%);
  color: var(--silver);
  opacity: 0.7;
  pointer-events: none;
  z-index: 1;
}

.email-wrap input[type="email"] {
  padding-left: 2.75rem;
}

input[type="email"] {
  background: var(--bg-offset);
  border: 2px solid rgba(192, 192, 192, 0.4);
  color: var(--text);
  padding: 0.9rem 1.2rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  border-radius: var(--radius);
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
}

input[type="email"]:focus {
  border-color: rgba(192, 192, 192, 0.7);
  box-shadow: 0 0 0 1px rgba(192, 192, 192, 0.2);
}

/* Referral - intuitive pill options */
.referral-group {
  position: relative;
  margin-bottom: 0.25rem;
}

.referral-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
  display: block;
  text-align: center;
}

.lang-switcher-above {
  align-self: center;
  flex-shrink: 0;
  margin-bottom: 0.5rem;
  justify-content: center;
}

.referral-label .optional {
  font-weight: 400;
  opacity: 0.7;
}

.referral-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  width: 100%;
}

.referral-option {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0.5rem 1rem;
  background: var(--bg-offset);
  border: none;
  border-radius: var(--radius);
  font-size: 0.9rem;
  text-align: center;
  transition: background 0.2s, color 0.2s;
}

.referral-option input {
  display: none;
}

.referral-option:has(input:checked) {
  background: #3a3e44;
  color: var(--text);
}

.referral-group.referral-error .referral-label {
  color: var(--error);
}

/* Validation anchor for native browser popup (same as email) - positioned in referral area for tooltip placement */
.referral-validation-anchor {
  position: absolute;
  left: 50%;
  top: 0.5rem;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* Form footer: CTA + lang switcher */
.form-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.btn {
  background: #c9a84c;
  color: #141618;
  border: none;
  padding: 0.85rem 1.75rem;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  border-radius: var(--radius);
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
}

.btn:hover {
  opacity: 0.92;
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.lang-switcher {
  display: flex;
  gap: 0.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 0.3rem;
  background: var(--bg-offset);
  border-radius: var(--radius);
}

.lang-switcher span {
  cursor: pointer;
  padding: 0.3rem 0.6rem;
  transition: background 0.2s, color 0.2s;
  border-radius: 6px;
}

.lang-switcher span:not(.active) {
  color: rgba(240, 242, 245, 0.7);
}

.lang-switcher span:not(.active):hover {
  color: rgba(240, 242, 245, 0.9);
}

.lang-switcher span.active {
  background: rgba(192, 192, 192, 0.2);
  color: var(--text);
}

/* 3 Value Statements - compact inline */
.values {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-top: 2rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.value-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.value-num {
  font-family: var(--font-display);
  font-weight: 600;
  opacity: 0.8;
}

.value-sep {
  opacity: 0.3;
  font-weight: 300;
}

/* Honeypot */
.hp {
  position: absolute;
  left: -5000px;
  visibility: hidden;
}

/* Limit copy below CTA */
.limit-copy {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-align: center;
}

/* Messages */
.message {
  font-size: 0.85rem;
  margin-top: 0.5rem;
  min-height: 1.3em;
  text-align: center;
}

.error-msg { color: var(--error); }
.success-msg { color: var(--text); }

/* Lang content visibility - body[lang] must be set by server (en/et) */
[data-lang-content] {
  display: none;
}

body[lang="en"] [data-lang-content="en"],
body[lang="et"] [data-lang-content="et"] {
  display: inline;
}

body[lang="en"] [data-lang-content="en"].optional,
body[lang="et"] [data-lang-content="et"].optional {
  display: inline;
}

/* Fallback: if body lang is missing (e.g. static file served), show English */
body:not([lang="en"]):not([lang="et"]) [data-lang-content="en"] {
  display: inline;
}

/* Thanks page */
.thanks-container {
  text-align: center;
  max-width: 500px;
}

.thanks-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
}

.back-link {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.back-link:hover {
  opacity: 1;
}

/* Mobile */
@media (max-width: 480px) {
  main { padding: 1.25rem; max-width: 100%; }
  .big-text { font-size: 2rem; }
  .waitlist-form { width: 100%; }
  .referral-options { flex-direction: column; }
  .referral-option { justify-content: center; width: 100%; }
  .form-footer { flex-direction: column; gap: 1rem; width: 100%; }
  .btn { width: 100%; }
}