/* Songumentary — shared design system */
:root {
  --bg:       #0a0a0f;
  --bg2:      #111118;
  --bg3:      #18181f;
  --accent:   #7c5cfc;
  --accent2:  #b085f5;
  --gold:     #e8b86d;
  --text:     #e8e8f0;
  --muted:    #8888a8;
  --border:   #2a2a3a;
  --radius:   12px;
  --warn:     #e85c5c;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--text);
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.6; overflow-x:hidden;
}

/* ── NAV ───────────────────────────────────────────────── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(10,10,15,.88); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  padding:0 5%; display:flex; align-items:center;
  justify-content:space-between; height:64px;
}
.logo {
  font-size:1.25rem; font-weight:700; letter-spacing:-.02em;
  background:linear-gradient(120deg,var(--accent2),var(--gold));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  text-decoration:none;
}
.logo span { -webkit-text-fill-color:var(--muted); font-weight:300; font-size:.85em; }
nav ul { list-style:none; display:flex; gap:2rem; }
nav ul a { color:var(--muted); text-decoration:none; font-size:.9rem; transition:color .2s; }
nav ul a:hover { color:var(--text); }
nav ul a.active { color:var(--text); }
.nav-cta {
  background:var(--accent); color:#fff;
  padding:.5rem 1.25rem; border-radius:8px;
  font-size:.875rem; font-weight:600; text-decoration:none;
  transition:background .2s,transform .1s;
}
.nav-cta:hover { background:#6a4de8; transform:translateY(-1px); }

/* ── PAGE HERO (inner pages) ────────────────────────────── */
.page-hero {
  padding:9rem 5% 5rem; text-align:center;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%,rgba(124,92,252,.18) 0%,transparent 70%),
    var(--bg);
}
.page-hero .family-tag {
  display:inline-block; color:var(--gold);
  font-size:.75rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; margin-bottom:.75rem;
}
.page-hero h1 {
  font-size:clamp(2rem,5vw,3.75rem); font-weight:800;
  letter-spacing:-.03em; line-height:1.08; margin-bottom:1.25rem;
  max-width:800px; margin-left:auto; margin-right:auto;
}
.page-hero h1 .grad {
  background:linear-gradient(120deg,var(--accent2) 0%,var(--gold) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.page-hero p {
  color:var(--muted); font-size:clamp(.95rem,1.8vw,1.15rem);
  max-width:620px; margin:0 auto 2rem;
}

/* ── SECTION COMMONS ────────────────────────────────────── */
section { padding:5rem 5%; }
.section-label {
  font-size:.75rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent2); margin-bottom:.75rem;
}
h2 {
  font-size:clamp(1.6rem,3.5vw,2.5rem); font-weight:800;
  letter-spacing:-.03em; margin-bottom:1rem;
}
.section-intro { color:var(--muted); max-width:620px; font-size:1rem; }

/* ── BUTTONS ────────────────────────────────────────────── */
.btn-primary {
  background:linear-gradient(135deg,var(--accent),#5c3fcf);
  color:#fff; padding:.875rem 2rem; border-radius:10px;
  font-weight:600; font-size:1rem; text-decoration:none;
  display:inline-block;
  box-shadow:0 4px 24px rgba(124,92,252,.35);
  transition:transform .15s,box-shadow .15s;
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 6px 30px rgba(124,92,252,.5); }
.btn-secondary {
  background:transparent; border:1px solid var(--border); color:var(--text);
  padding:.875rem 2rem; border-radius:10px;
  font-weight:500; font-size:1rem; text-decoration:none;
  transition:border-color .2s,background .2s;
}
.btn-secondary:hover { border-color:var(--accent2); background:rgba(124,92,252,.06); }

/* ── HOW IT WORKS (3-step) ──────────────────────────────── */
.how-steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.5rem; margin-top:2.5rem; }
.how-step {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.75rem;
  transition:border-color .2s,transform .2s;
}
.how-step:hover { border-color:var(--accent); transform:translateY(-2px); }
.how-num {
  font-size:2.5rem; font-weight:900; line-height:1;
  background:linear-gradient(135deg,var(--accent),var(--gold));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  margin-bottom:.75rem;
}
.how-step h3 { font-size:1rem; font-weight:700; margin-bottom:.4rem; }
.how-step p { color:var(--muted); font-size:.875rem; }

/* ── PRICING BAND (offer pages) ─────────────────────────── */
.pricing-band {
  background:var(--bg2); border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:3rem 5%; display:flex; align-items:center;
  justify-content:space-between; gap:2rem; flex-wrap:wrap;
}
.pricing-band .price-display { }
.price-display .amount {
  font-size:2.25rem; font-weight:800; letter-spacing:-.03em;
  background:linear-gradient(120deg,var(--accent2),var(--gold));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.price-display p { color:var(--muted); font-size:.875rem; margin-top:.25rem; }

/* ── FAMILY INTRO BAND ──────────────────────────────────── */
.family-intro {
  background:linear-gradient(135deg,rgba(232,184,109,.08),rgba(124,92,252,.06));
  border-bottom:1px solid var(--border);
  padding:2rem 5%; display:flex; gap:1rem; align-items:center;
}
.family-intro .spirit-line {
  font-size:.7rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold); margin-bottom:.35rem;
}
.family-intro p { color:var(--muted); font-size:.9rem; max-width:600px; }

/* ── CONTACT FORM ───────────────────────────────────────── */
.contact-form-section { background:var(--bg2); }
.contact-inner { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.contact-copy h2 { margin-bottom:1rem; }
.contact-copy p { color:var(--muted); margin-bottom:1.25rem; font-size:.95rem; }
.contact-form {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--radius); padding:2rem;
}
.form-group { margin-bottom:1.25rem; }
.form-group label {
  display:block; font-size:.75rem; font-weight:600;
  letter-spacing:.04em; color:var(--muted); text-transform:uppercase;
  margin-bottom:.4rem;
}
.form-group input, .form-group select, .form-group textarea {
  width:100%; background:var(--bg2); border:1px solid var(--border);
  border-radius:8px; color:var(--text); font-size:.9rem;
  font-family:inherit; padding:.7rem 1rem; outline:none;
  transition:border-color .2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--accent2); }
.form-group select option { background:var(--bg3); }
.form-group textarea { resize:vertical; min-height:100px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-submit {
  width:100%; background:var(--accent); color:#fff; border:none;
  border-radius:8px; padding:.875rem; font-size:.95rem;
  font-weight:600; font-family:inherit; cursor:pointer;
  transition:background .2s,transform .1s;
}
.form-submit:hover { background:#6a4de8; transform:translateY(-1px); }
.form-note { color:var(--muted); font-size:.75rem; margin-top:.75rem; text-align:center; }

/* ── TODO BLOCKS ────────────────────────────────────────── */
.todo {
  border:2px dashed var(--gold); border-radius:var(--radius);
  padding:1.5rem 2rem; background:rgba(232,184,109,.05);
  color:var(--gold); font-size:.875rem; line-height:1.6;
  margin:1.5rem 0;
}
.todo strong { display:block; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:.4rem; opacity:.8; }
.todo-critical {
  border-color:var(--warn); background:rgba(232,92,92,.05); color:var(--warn);
}

/* ── FOOTER ─────────────────────────────────────────────── */
footer {
  background:var(--bg2); border-top:1px solid var(--border);
  padding:3rem 5%;
  display:flex; flex-wrap:wrap; gap:2rem;
  justify-content:space-between; align-items:flex-start;
}
.footer-brand .logo { font-size:1rem; }
.footer-brand p { color:var(--muted); font-size:.8rem; margin-top:.5rem; max-width:240px; }
.footer-links h4 { font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:.75rem; }
.footer-links ul { list-style:none; display:flex; flex-direction:column; gap:.5rem; }
.footer-links a { color:var(--muted); text-decoration:none; font-size:.85rem; transition:color .2s; }
.footer-links a:hover { color:var(--text); }
.footer-bottom {
  margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--border);
  color:var(--muted); font-size:.75rem; width:100%;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem;
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width:768px) {
  .contact-inner { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .pricing-band { flex-direction:column; align-items:flex-start; }
}
@media (max-width:600px) {
  nav ul { display:none; }
}