/* ============================================================
   INEEDO — LANDING STYLES

   Active palette: B  (Veld — terracotta + deep teal on cream)

   TO SWITCH PALETTES:
   1. Comment out the active :root block below.
   2. Uncomment ONE alternative :root block (A, C, or D).
   3. (If switching to D, also change <meta name="theme-color"> in
      index.html to "#2D1339" so mobile browser chrome matches.)
   Only one :root block should be uncommented at a time.
   ============================================================ */


/* ===========================================
   PALETTE B — VELD  (active)
   Terracotta + deep teal on cream. Earthy SA landscape.
   =========================================== */
:root {
  /* Surface */
  --bg: #FAF4EC;

  /* Text */
  --text: #0D3B40;
  --text-soft: #2F5A60;

  /* Brand identity */
  --wordmark: #C8553D;
  --italic: #C8553D;

  /* CTA button */
  --btn-bg: #C8553D;
  --btn-bg-hover: #A8442F;
  --btn-fg: #FAF4EC;
  --btn-shadow: rgba(200,85,61,0.20);
  --btn-shadow-hover: rgba(200,85,61,0.30);

  /* Form */
  --input-bg: rgba(255,255,255,0.7);
  --input-bg-focus: #FFFFFF;
  --input-border: rgba(13,59,64,0.16);
  --input-focus-border: #C8553D;
  --input-focus-ring: rgba(200,85,61,0.14);

  /* Structure */
  --rule: rgba(13,59,64,0.10);
  --error: #B83A26;

  /* Atmospheric washes */
  --wash-1: rgba(200,85,61,0.12);
  --wash-2: rgba(229,184,149,0.22);

  /* Decorative circles */
  --decor-warm: #E07B5F;
  --decor-soft-1: #E5B895;
  --decor-soft-2: #F0D4BC;
  --decor-contrast: #0D3B40;

  /* Always */
  --gold: #F5B82E;
  --gold-deep: #D99F1F;
}


/* ===========================================
   PALETTE A — SUNSET  (alternative)
   Warm coral + ink navy on cream. Energetic.
   =========================================== */
/*
:root {
  --bg: #FFFCF7;
  --text: #1A1F3A;
  --text-soft: #4A4F6A;
  --wordmark: #E5573A;
  --italic: #E5573A;
  --btn-bg: #1A1F3A;
  --btn-bg-hover: #E5573A;
  --btn-fg: #FFFCF7;
  --btn-shadow: rgba(26,31,58,0.18);
  --btn-shadow-hover: rgba(229,87,58,0.28);
  --input-bg: #FFFFFF;
  --input-bg-focus: #FFFFFF;
  --input-border: rgba(26,31,58,0.12);
  --input-focus-border: #E5573A;
  --input-focus-ring: rgba(229,87,58,0.12);
  --rule: rgba(26,31,58,0.08);
  --error: #B83A26;
  --wash-1: rgba(255,107,71,0.12);
  --wash-2: rgba(251,201,184,0.18);
  --decor-warm: #FF6B47;
  --decor-soft-1: #FBC9B8;
  --decor-soft-2: #FDE3D9;
  --decor-contrast: #1A1F3A;
  --gold: #F5B82E;
  --gold-deep: #D99F1F;
}
*/


/* ===========================================
   PALETTE C — MZANSI LIGHT  (alternative)
   Pastel lavender + aubergine + gold. Premium light.
   =========================================== */
/*
:root {
  --bg: #E5D7EF;
  --text: #2D1339;
  --text-soft: #6B4E80;
  --wordmark: #2D1339;
  --italic: #4B2C5F;
  --btn-bg: #F5B82E;
  --btn-bg-hover: #D99F1F;
  --btn-fg: #2D1339;
  --btn-shadow: rgba(245,184,46,0.32);
  --btn-shadow-hover: rgba(245,184,46,0.42);
  --input-bg: rgba(255,255,255,0.6);
  --input-bg-focus: #FFFFFF;
  --input-border: rgba(45,19,57,0.18);
  --input-focus-border: #D99F1F;
  --input-focus-ring: rgba(245,184,46,0.20);
  --rule: rgba(45,19,57,0.12);
  --error: #8B1F1F;
  --wash-1: rgba(245,184,46,0.20);
  --wash-2: rgba(201,180,217,0.55);
  --decor-warm: #FBE4A7;
  --decor-soft-1: #C9B4D9;
  --decor-soft-2: #EFE4F5;
  --decor-contrast: #2D1339;
  --gold: #F5B82E;
  --gold-deep: #D99F1F;
}
*/


/* ===========================================
   PALETTE D — MZANSI DARK  (alternative)
   Deep aubergine + cream + gold. Premium dark.
   Don't forget: change <meta name="theme-color"> in index.html to "#2D1339"
   =========================================== */
/*
:root {
  --bg: #2D1339;
  --text: #F5EDD8;
  --text-soft: #D4C9AE;
  --wordmark: #F5EDD8;
  --italic: #F5B82E;
  --btn-bg: #F5B82E;
  --btn-bg-hover: #D99F1F;
  --btn-fg: #2D1339;
  --btn-shadow: rgba(245,184,46,0.25);
  --btn-shadow-hover: rgba(245,184,46,0.35);
  --input-bg: rgba(245,237,216,0.05);
  --input-bg-focus: rgba(245,237,216,0.08);
  --input-border: rgba(245,237,216,0.18);
  --input-focus-border: #F5B82E;
  --input-focus-ring: rgba(245,184,46,0.18);
  --rule: rgba(245,237,216,0.12);
  --error: #F08080;
  --wash-1: rgba(245,184,46,0.20);
  --wash-2: rgba(90,52,112,0.55);
  --decor-warm: #F5B82E;
  --decor-soft-1: #5A3470;
  --decor-soft-2: #3D1F4A;
  --decor-contrast: #F5EDD8;
  --gold: #F5B82E;
  --gold-deep: #D99F1F;
}
*/


/* ============================================================
   STRUCTURE & TYPOGRAPHY  (palette-agnostic — never edit per palette)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100vh; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* Atmospheric radial glows */
body::before, body::after {
  content: ''; position: fixed; pointer-events: none; z-index: 0;
  border-radius: 50%; filter: blur(80px);
}
body::before {
  top: -240px; right: -180px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, var(--wash-1), transparent 70%);
}
body::after {
  bottom: -300px; left: -240px;
  width: 560px; height: 560px;
  background: radial-gradient(circle, var(--wash-2), transparent 75%);
}

/* Decorative circles */
.shapes { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.circle {
  position: absolute;
  width: var(--s); height: var(--s);
  left: var(--x); top: var(--y);
  background: var(--c);
  opacity: var(--o);
  filter: blur(var(--b, 18px));
  border-radius: 50%;
}
.circle.drift { animation: drift 24s ease-in-out infinite alternate; }
.circle.drift-slow { animation: drift 36s ease-in-out infinite alternate-reverse; }
@keyframes drift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(15px, -22px); }
}
@media (prefers-reduced-motion: reduce) {
  .circle.drift, .circle.drift-slow { animation: none; }
}

/* Layout */
main {
  position: relative; z-index: 1;
  max-width: 560px;
  margin: 0 auto;
  padding: 36px 24px 32px;
  min-height: 100vh;
  display: flex; flex-direction: column;
}

/* Wordmark */
.wordmark {
  font-family: 'Quicksand', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 11vw, 50px);
  color: var(--wordmark);
  letter-spacing: -0.025em;
  line-height: 1;
  margin-bottom: clamp(60px, 14vh, 120px);
  display: inline-flex; align-items: baseline; gap: 8px;
}
.wordmark .dot {
  width: 14px; height: 14px;
  background: var(--gold);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 14px rgba(245, 184, 46, 0.55);
  flex-shrink: 0;
}

/* Hero */
.hero { margin-bottom: 40px; }

h1 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 500;
  font-variation-settings: "opsz" 96;
  font-size: clamp(2.5rem, 9vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin-bottom: 24px;
  color: var(--text);
}
h1 .accent {
  font-family: 'Caveat', cursive;
  font-weight: 600;
  color: var(--italic);
  font-size: 1.18em;
  letter-spacing: -0.005em;
  line-height: 0.85;
  display: inline-block;
  transform: translateY(0.05em);
}

.sub {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--text-soft);
  max-width: 460px;
}

/* Form */
.signup {
  display: flex; flex-direction: column;
  gap: 12px;
  margin: 36px 0 24px;
}
.signup input[type="email"] {
  padding: 16px 18px;
  border: 1.5px solid var(--input-border);
  border-radius: 14px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--input-bg);
  color: var(--text);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  -webkit-appearance: none; appearance: none;
}
.signup input[type="email"]::placeholder {
  color: var(--text-soft);
  opacity: 0.55;
}
.signup input[type="email"]:focus {
  outline: none;
  border-color: var(--input-focus-border);
  background: var(--input-bg-focus);
  box-shadow: 0 0 0 4px var(--input-focus-ring);
}
.cf-turnstile { margin: 4px 0; }

.signup button {
  padding: 16px 24px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: none;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, transform 0.08s, box-shadow 0.2s;
  min-height: 54px;
  letter-spacing: -0.005em;
  box-shadow: 0 4px 18px var(--btn-shadow);
}
.signup button:hover {
  background: var(--btn-bg-hover);
  box-shadow: 0 6px 24px var(--btn-shadow-hover);
}
.signup button:active { transform: scale(0.985); }
.signup button:disabled { opacity: 0.7; cursor: not-allowed; }

.form-message {
  font-size: 0.875rem;
  margin-top: 4px;
  min-height: 1.25em;
  line-height: 1.4;
}
.form-message.error { color: var(--error); }
.form-message.success { color: var(--italic); }

.success-message {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--text);
  padding: 20px 0;
}

.microcopy {
  font-size: 0.8125rem;
  color: var(--text-soft);
  margin-top: 6px;
  line-height: 1.4;
}

.trust {
  font-size: 0.9375rem;
  color: var(--text-soft);
  margin-top: auto;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}
.trust strong {
  color: var(--italic);
  font-weight: 600;
}

footer {
  position: relative; z-index: 1;
  padding: 20px 24px 28px;
  font-size: 0.8125rem;
  color: var(--text-soft);
  text-align: center;
}
footer a {
  color: var(--text-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: color 0.2s, border-color 0.2s;
}
footer a:hover {
  color: var(--italic);
  border-color: var(--italic);
}

/* a11y */
.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;
}

@media (min-width: 640px) {
  main { padding: 56px 32px 40px; }
}