/*
  styles.css — Cresamor landing page.

  Brand tokens deliberately reuse the exact gold/text values already
  live in client/index.css (--gold: #d4af37, --text: #f3f0e8) for visual
  consistency between the marketing site and the app. Deep navy and
  black-marble are new to this page specifically.

  "Realistic black marble" here is a CSS-only approximation (layered
  radial-gradients + a small inline SVG turbulence texture for grain) --
  there is no photographed marble asset in this repo to use instead, and
  guessing/fabricating one wasn't appropriate. If a real marble texture
  image is ever supplied, swap it in as the .marble-bg background-image
  and this fallback becomes unnecessary.

  Contrast is deliberate throughout: body copy uses --text (near-white)
  on near-black backgrounds, never a mid-gray-on-dark combination. Gold
  buttons use dark text on the gold fill (matching the app's own
  #login-btn convention), not gold-on-gold or gold text on a light
  background.
*/

:root {
  --marble-black: #0a0a0c;
  --marble-black-2: #151517;
  --navy: #0d1b2e;
  --navy-2: #14283f;

  --gold: #d4af37;
  --gold-soft: #f0d98c;
  --gold-dim: rgba(212, 175, 55, 0.18);

  --text: #f3f0e8;
  --text-strong: #ffffff;
  --muted: #c7d0da;

  --panel: rgba(255, 255, 255, 0.04);
  --panel-border: rgba(212, 175, 55, 0.28);

  --max-width: 1120px;
  --radius: 14px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background-color: var(--marble-black);
  background-image:
    radial-gradient(ellipse 60% 40% at 15% 10%, rgba(255, 255, 255, 0.05), transparent 60%),
    radial-gradient(ellipse 50% 35% at 85% 25%, rgba(255, 255, 255, 0.035), transparent 55%),
    radial-gradient(ellipse 70% 50% at 50% 90%, rgba(212, 175, 55, 0.05), transparent 60%),
    linear-gradient(135deg, var(--marble-black) 0%, var(--marble-black-2) 45%, var(--marble-black) 100%);
  background-attachment: fixed;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Subtle grain, matching real marble's fine texture -- an inline SVG
   feTurbulence filter, no external image request. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  z-index: 0;
}

h1, h2, h3 {
  color: var(--text-strong);
  line-height: 1.2;
  margin: 0 0 0.5em;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--gold-soft);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--gold-soft);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: #1a1405;
  padding: 0.75rem 1.25rem;
  z-index: 100;
  font-weight: 700;
  border-radius: 0 0 8px 0;
}

.skip-link:focus {
  left: 0;
}

/* ---------- Header ---------- */

.site-header {
  /* Higher than .section/.hero/.site-footer's z-index: 1 -- without
     this, a sticky-positioned header at the same z-index as later
     sections loses ties to DOM order during scroll, letting section
     content visibly bleed on top of the header instead of staying
     underneath it. Confirmed live in local preview, not theoretical. */
  z-index: 10;
  border-bottom: 1px solid var(--panel-border);
  background: rgba(10, 10, 12, 0.85);
  backdrop-filter: blur(6px);
  position: sticky;
  top: 0;
}

.site-header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wordmark {
  font-weight: 800;
  letter-spacing: 0.12em;
  font-size: 1.15rem;
  color: var(--gold-soft);
}

.header-login-link {
  color: var(--text-strong);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--gold);
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  white-space: nowrap;
}

.header-login-link:hover {
  background: var(--gold-dim);
}

/* ---------- Layout helpers ---------- */

.section {
  position: relative;
  z-index: 1;
  padding: 3.5rem 1.25rem;
}

.section-alt {
  background: rgba(13, 27, 46, 0.35);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.section h2 {
  font-size: 1.75rem;
  margin-bottom: 1.5rem;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  z-index: 1;
  padding: 4.5rem 1.25rem 3.5rem;
  text-align: center;
}

.hero-inner {
  max-width: 760px;
  margin: 0 auto;
}

.hero h1 {
  font-size: 2.1rem;
  margin-bottom: 0.75rem;
}

.hero-subhead {
  font-size: 1.1rem;
  color: var(--text);
  max-width: 620px;
  margin: 0 auto 2rem;
}

.hero-ctas {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: stretch;
  max-width: 340px;
  margin: 0 auto;
}

.hero-note {
  margin-top: 1.5rem;
  color: var(--muted);
  font-size: 0.95rem;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font: inherit;
  font-weight: 700;
  padding: 0.9rem 1.5rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  min-height: 48px;
  line-height: 1.2;
}

.btn-primary {
  background: linear-gradient(180deg, var(--gold), #a9862a);
  color: #1a1405;
}

.btn-primary:hover {
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
}

.btn-secondary {
  background: transparent;
  color: var(--text-strong);
  border: 2px solid var(--gold);
}

.btn-secondary:hover {
  background: var(--gold-dim);
}

/* ---------- Cards ---------- */

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.card h3 {
  font-size: 1.15rem;
}

.card p {
  color: var(--text);
  margin-bottom: 0;
}

/* ---------- Benefit lists ---------- */

.benefit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.benefit-list li {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  padding-left: 2.75rem;
  position: relative;
  color: var(--text);
}

.benefit-list li::before {
  content: "✓";
  position: absolute;
  left: 1.1rem;
  top: 1.1rem;
  color: var(--gold);
  font-weight: 800;
}

/* ---------- How it works ---------- */

.steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

.steps-list li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.step-number {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold), #a9862a);
  color: #1a1405;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.steps-list h3 {
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}

.steps-list p {
  color: var(--text);
  margin-bottom: 0;
}

/* ---------- Early User / interest form ---------- */

.early-user-section {
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.08), transparent);
}

.early-user-offer {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gold-soft);
}

.early-user-detail {
  color: var(--text);
  max-width: 640px;
}

.interest-form {
  max-width: 560px;
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-row label {
  font-weight: 600;
  color: var(--text-strong);
}

.optional-label {
  font-weight: 400;
  color: var(--muted);
}

.form-row input,
.form-row select,
.form-row textarea {
  font: inherit;
  padding: 0.75rem 0.9rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text-strong);
  min-height: 48px;
}

.form-row textarea {
  min-height: 100px;
  resize: vertical;
}

.form-row input::placeholder,
.form-row textarea::placeholder {
  color: var(--muted);
}

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

.interest-submit-btn {
  margin-top: 0.5rem;
}

.form-status {
  min-height: 1.5em;
  font-weight: 600;
}

.form-status[data-state="success"] {
  color: var(--gold-soft);
}

.form-status[data-state="error"] {
  color: #ff9b9b;
}

/* ---------- Footer ---------- */

.site-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--panel-border);
  padding: 2.5rem 1.25rem 3rem;
  background: rgba(0, 0, 0, 0.3);
}

.site-footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: center;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.footer-contact a {
  color: var(--text-strong);
  text-decoration: none;
  font-weight: 600;
}

.footer-contact a:hover {
  color: var(--gold-soft);
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.footer-social a {
  color: var(--muted);
  font-weight: 600;
  text-decoration: none;
}

.footer-social a:hover {
  color: var(--gold-soft);
}

.footer-social .social-link-disabled {
  color: var(--muted);
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

.footer-copyright {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.footer-privacy {
  color: var(--muted);
  font-size: 0.85rem;
  max-width: 560px;
  margin: 0 auto;
}

/* ---------- Responsive: tablet and up ---------- */

@media (min-width: 640px) {
  .hero-ctas {
    flex-direction: row;
    justify-content: center;
    max-width: none;
  }

  .btn {
    min-width: 220px;
  }
}

@media (min-width: 768px) {
  .hero h1 {
    font-size: 2.75rem;
  }

  .hero-subhead {
    font-size: 1.25rem;
  }

  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .benefit-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .section h2 {
    font-size: 2.1rem;
  }
}

@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}