/* ===== Ballmasta teaser — palette extracted from brandbook ===== */
:root {
  --black: #112115;
  --bg-deep: var(--black);
  --bg-deep-2: #295B26;
  --green: #295B26;
  --green-soft: #3E7A3A;
  --yellow: #FBD83D;
  --yellow-light: #FFF550;
  --gradient-yellow: linear-gradient(135deg, var(--yellow-light), var(--yellow));
  --gradient-green: linear-gradient(135deg, var(--green), var(--black));
  --text: #F4F6EF;
  --text-muted: #B9C9B4;
  --error: #FF8A80;

  --font-display: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-body: 'Poppins', system-ui, -apple-system, sans-serif;

  --mx: 50%;
  --my: 50%;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-deep);
  color: var(--text);
  font-family: var(--font-body);
  overflow-x: hidden;
  position: relative;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

a { color: var(--yellow); }

/* ===== Background atmosphere ===== */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 0%, var(--bg-deep-2) 0%, var(--bg-deep) 60%);
}

.bg__aurora {
  position: absolute;
  top: -30%;
  left: -30%;
  width: 160%;
  height: 160%;
  background: conic-gradient(
    from 0deg,
    rgba(41,91,38,0.55),
    rgba(251,216,61,0.18),
    rgba(12,24,16,0),
    rgba(41,91,38,0.5),
    rgba(251,216,61,0.15),
    rgba(12,24,16,0)
  );
  filter: blur(80px);
  opacity: 0.55;
  animation: aurora-rotate 40s linear infinite;
  will-change: transform;
}

@keyframes aurora-rotate {
  to { transform: rotate(360deg); }
}

.bg__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.35;
}

.bg__blob--1 {
  width: 45vw;
  height: 45vw;
  top: 5%;
  left: -10%;
  background: radial-gradient(circle, var(--yellow) 0%, transparent 70%);
  animation: drift-1 22s ease-in-out infinite;
}

.bg__blob--2 {
  width: 50vw;
  height: 50vw;
  bottom: -10%;
  right: -15%;
  background: radial-gradient(circle, var(--green-soft) 0%, transparent 70%);
  animation: drift-2 26s ease-in-out infinite;
}

@keyframes drift-1 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(6vw, 8vh); }
}

@keyframes drift-2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-5vw, -6vh); }
}

.bg__grain {
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.bg__spotlight {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle 320px at var(--mx) var(--my), rgba(255,245,80,0.10), transparent 70%);
  transition: opacity 0.4s ease;
}

@media (hover: hover) and (pointer: fine) {
  .bg__spotlight.is-active { opacity: 1; }
}

/* ===== Header ===== */
.site-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.5rem clamp(1.25rem, 5vw, 3rem);
}

.mark { display: block; }
.mark--header { width: 28px; height: auto; }
.mark--footer { width: 22px; height: auto; }

.brand-name {
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  font-size: 1.25rem;
  color: var(--text);
}

.privacy-header-link {
  display: block;
  line-height: 0;
}

.privacy-wordmark {
  display: block;
  width: clamp(150px, 28vw, 220px);
  height: auto;
}

/* ===== Hero ===== */
.hero {
  position: relative;
  z-index: 2;
  max-width: 860px;
  margin: 0 auto;
  padding: 2rem clamp(1.25rem, 5vw, 3rem) 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.wordmark-heading {
  margin: 0;
  line-height: 0;
}

.wordmark--hero {
  width: clamp(220px, 44vw, 360px);
  height: auto;
  margin-bottom: 3rem;
  filter: drop-shadow(0 0 24px rgba(251, 216, 61, 0.35));
  transform-style: preserve-3d;
  will-change: transform;
  animation: mark-fade-in 0.8s ease both;
}

@media (hover: hover) and (pointer: fine) {
  .wordmark--hero { transition: transform 0.15s ease-out; }
}

@keyframes mark-fade-in {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
  font-size: clamp(2.25rem, 7vw, 4.25rem);
}

.hero__title .line {
  display: block;
  opacity: 0;
  animation: rise-in 0.7s ease forwards;
}

.line--1 { animation-delay: 0.15s; color: var(--text); }

.line--accent {
  animation-delay: 0.35s;
  background: var(--gradient-yellow);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero__subtitle {
  max-width: 74ch;
  color: var(--text-muted);
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  line-height: 1.6;
  margin: 0 0 2rem;
  opacity: 0;
  animation: rise-in 0.7s ease 0.55s forwards;
}

.hero__intro {
  margin-bottom: 1.75rem;
  opacity: 0;
  animation: rise-in 0.7s ease 0.7s forwards;
}

.intro-line { margin: 0.15rem 0; color: var(--text-muted); font-weight: 400; }
.intro-line--strong { color: var(--yellow); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2rem); }

/* ===== Countdown ===== */
.countdown {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 2vw, 0.9rem);
  margin-bottom: 2.25rem;
  opacity: 0;
  animation: rise-in 0.7s ease 0.85s forwards;
}

.cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(251,216,61,0.25);
  border-radius: 12px;
  min-width: clamp(56px, 12vw, 84px);
  padding: 0.6rem 0.4rem 0.5rem;
  backdrop-filter: blur(6px);
}

.cd-value {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  line-height: 1;
  color: var(--text);
  display: inline-block;
}

.cd-value.glitch {
  animation: glitch-tick 0.28s steps(2, end);
}

@keyframes glitch-tick {
  0%   { transform: translate(0,0); opacity: 1; color: var(--text); }
  25%  { transform: translate(-2px, 1px); opacity: 0.6; color: var(--yellow); }
  50%  { transform: translate(2px, -1px); opacity: 1; color: var(--yellow-light); }
  75%  { transform: translate(-1px, 0); opacity: 0.8; color: var(--text); }
  100% { transform: translate(0,0); opacity: 1; color: var(--text); }
}

.cd-label {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.cd-sep {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4vw, 2rem);
  color: var(--yellow);
  transform: translateY(-4px);
}

/* ===== Form ===== */
.signup-form {
  width: 100%;
  max-width: 480px;
  opacity: 0;
  animation: rise-in 0.7s ease 1s forwards;
}

.field-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

#email {
  flex: 1 1 220px;
  min-width: 0;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(244,246,239,0.2);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
}

#email::placeholder { color: var(--text-muted); }

#email:focus, .consent input:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

.btn-submit {
  position: relative;
  flex: 0 0 auto;
  padding: 0.85rem 1.6rem;
  border: none;
  border-radius: 10px;
  background: var(--gradient-yellow);
  color: #14210F;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  will-change: transform;
}

.btn-submit:hover {
  box-shadow: 0 6px 24px rgba(251,216,61,0.35);
}

.btn-submit:active { transform: scale(0.97); }

.btn-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none !important;
}

.recaptcha-wrap {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
}

@media (max-width: 480px) {
  .recaptcha-wrap { transform: scale(0.92); transform-origin: center; }
}

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

#brevo-hidden-fields .input--hidden {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 1rem;
  text-align: left;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
  cursor: pointer;
}

.consent input {
  margin-top: 0.2rem;
  accent-color: var(--yellow);
  flex-shrink: 0;
}

.form-msg {
  min-height: 1.4em;
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
}

.form-msg[data-state="success"] { color: var(--yellow-light); }
.form-msg[data-state="error"] { color: var(--error); }

/* ===== Footer ===== */
.site-footer {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem 1.5rem 2.5rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  text-align: center;
}

.site-footer a { color: var(--text-muted); text-decoration: underline; }

/* ===== Legal page (privacy policy) ===== */
.legal {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  padding: 1rem clamp(1.25rem, 5vw, 3rem) 4rem;
  text-align: left;
}

.legal h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3rem);
  margin-bottom: 0.25rem;
}

.legal .legal-updated {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 2rem;
}

.legal h2 {
  font-family: var(--font-body);
  font-size: 1.15rem;
  color: var(--yellow);
  margin: 2rem 0 0.75rem;
}

.legal p, .legal li {
  color: var(--text-muted);
  line-height: 1.7;
  font-size: 0.98rem;
}

.legal ul { padding-left: 1.2rem; }

.legal strong { color: var(--text); }

.legal .callout {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(251,216,61,0.35);
  border-radius: 10px;
  background: rgba(251,216,61,0.06);
}

.legal .callout p { color: var(--text); margin: 0; }

.legal .back-link {
  display: inline-block;
  margin-bottom: 1.5rem;
  color: var(--yellow);
  text-decoration: none;
}

.legal .back-link:hover { text-decoration: underline; }

/* ===== Responsive ===== */
@media (max-width: 480px) {
  .countdown { gap: 0.35rem; }
  .cd-unit { padding: 0.5rem 0.3rem 0.4rem; min-width: 52px; }
  .field-row { flex-direction: column; }
  #email { flex: 1 1 auto; width: 100%; }
  .btn-submit { width: 100%; }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .bg__aurora, .bg__blob { animation: none !important; opacity: 0.25; }
  .hero__title .line, .hero__subtitle, .hero__intro, .countdown, .signup-form { opacity: 1; }
  .wordmark--hero { transform: none !important; }
}