/* ============================================================
   landing.css — public one-pager + legal pages
   Brand variables injected by layouts/landing.php:
     --gold  --ink  --bg
   Mobile-first: base styles target phones, media queries scale up.
   ============================================================ */

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

html { font-size: 16px; scroll-behavior: smooth; }

body.landing-body {
  background: var(--bg, #04060A);
  color: #e2e8f0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }

.container { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 1.25rem; }
.container--narrow { max-width: 760px; }

a { color: var(--gold, #C9A24B); }

/* ---- Header ---- */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--bg, #04060A) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.site-header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 60px; gap: 1rem; }
.site-brand { display: flex; align-items: center; text-decoration: none; }
.site-brand img { max-height: 34px; width: auto; }
.site-brand-name { font-size: 1.15rem; font-weight: 800; color: var(--gold, #C9A24B); letter-spacing: .04em; }
.site-nav { display: flex; align-items: center; gap: .9rem; }
.nav-link { color: #94a3b8; text-decoration: none; font-size: .9rem; font-weight: 600; }
.nav-link:hover { color: #f1f5f9; }

/* ---- Buttons ---- */
.btn-cta {
  display: inline-block; background: var(--gold, #C9A24B); color: var(--ink, #0A0F16);
  font-weight: 800; text-decoration: none; border: none; cursor: pointer;
  padding: .85rem 1.9rem; border-radius: 9px; font-size: 1rem;
  transition: opacity .15s, transform .15s;
}
.btn-cta:hover { opacity: .9; transform: translateY(-1px); }
.btn-cta--sm { padding: .5rem 1rem; font-size: .85rem; border-radius: 7px; }
.btn-ghost {
  display: inline-block; background: transparent; color: #e2e8f0;
  border: 1px solid rgba(255,255,255,.22); text-decoration: none;
  padding: .85rem 1.6rem; border-radius: 9px; font-size: 1rem; font-weight: 600;
  transition: border-color .15s, color .15s;
}
.btn-ghost:hover { border-color: var(--gold, #C9A24B); color: var(--gold, #C9A24B); }

/* ---- Hero ---- */
.hero { text-align: center; padding: 4rem 0 3.5rem; }
.hero-title {
  font-size: clamp(1.9rem, 5.5vw, 3.2rem);
  font-weight: 800; line-height: 1.15; color: #f8fafc;
  max-width: 800px; margin: 0 auto .9rem;
}
.hero-sub { font-size: clamp(1rem, 2.6vw, 1.2rem); color: #94a3b8; max-width: 640px; margin: 0 auto 1.8rem; }
.hero-actions { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }
.hero-note { margin-top: 1rem; font-size: .82rem; color: #475569; }

/* ---- Sections ---- */
.section { padding: 3.5rem 0; }
.section--alt { background: rgba(255,255,255,.025); border-top: 1px solid rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.05); }
.section-title { text-align: center; font-size: clamp(1.4rem, 3.6vw, 2rem); font-weight: 800; color: #f8fafc; margin-bottom: .6rem; }
.section-sub   { text-align: center; color: #94a3b8; max-width: 620px; margin: 0 auto 2.25rem; }

/* ---- Features ---- */
.feature-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px)  { .feature-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px)  { .feature-grid { grid-template-columns: repeat(3, 1fr); } }
.feature-card {
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px; padding: 1.4rem 1.5rem;
}
.feature-icon { font-size: 1.6rem; margin-bottom: .6rem; }
.feature-card h3 { font-size: 1.02rem; color: #f1f5f9; margin-bottom: .35rem; }
.feature-card p  { font-size: .9rem; color: #94a3b8; }

/* ---- Steps ---- */
.steps { display: grid; grid-template-columns: 1fr; gap: 1.25rem; max-width: 900px; margin: 0 auto; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { text-align: center; padding: 0 1rem; }
.step-num {
  width: 44px; height: 44px; border-radius: 50%; margin: 0 auto .7rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold, #C9A24B); color: var(--ink, #0A0F16); font-weight: 800; font-size: 1.15rem;
}
.step h3 { font-size: 1rem; color: #f1f5f9; margin-bottom: .3rem; }
.step p  { font-size: .88rem; color: #94a3b8; }

/* ---- Pricing ---- */
.plan-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: stretch; }
@media (min-width: 720px) { .plan-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-width: 980px; margin: 0 auto; } }
.plan-card {
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px; padding: 1.6rem 1.5rem; display: flex; flex-direction: column;
}
.plan-card--featured { border-color: var(--gold, #C9A24B); box-shadow: 0 0 34px color-mix(in srgb, var(--gold, #C9A24B) 18%, transparent); }
.plan-name  { font-size: 1.05rem; font-weight: 800; color: #f1f5f9; margin-bottom: .35rem; }
.plan-price { margin-bottom: 1.1rem; color: #f8fafc; }
.plan-amount { font-size: 1.9rem; font-weight: 800; }
.plan-cycle  { color: #64748b; font-size: .88rem; margin-left: .2rem; }
.plan-features { list-style: none; flex: 1; margin-bottom: 1.25rem; }
.plan-features li {
  font-size: .88rem; color: #cbd5e1; padding: .32rem 0 .32rem 1.4rem; position: relative;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.plan-features li:last-child { border-bottom: none; }
.plan-features li::before { content: '✓'; position: absolute; left: 0; color: var(--gold, #C9A24B); font-weight: 700; }
.plan-features li.plan-feature-off { color: #475569; text-decoration: line-through; }
.plan-features li.plan-feature-off::before { content: '—'; color: #334155; }
.plan-btn { text-align: center; }
.pricing-note { text-align: center; color: #475569; font-size: .82rem; margin-top: 1.5rem; }

/* ---- FAQ ---- */
.faq-item {
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; margin-bottom: .7rem; padding: 0;
}
.faq-item summary {
  cursor: pointer; list-style: none; padding: .95rem 1.2rem;
  font-weight: 600; color: #e2e8f0; font-size: .95rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; float: right; color: var(--gold, #C9A24B); font-weight: 700; }
.faq-item[open] summary::after { content: '–'; }
.faq-item p { padding: 0 1.2rem 1rem; color: #94a3b8; font-size: .9rem; }

/* ---- Final CTA ---- */
.final-cta { text-align: center; }
.final-cta .section-title { margin-bottom: 1.4rem; }

/* ---- Footer ---- */
.site-footer { border-top: 1px solid rgba(255,255,255,.07); padding: 1.8rem 0 2.2rem; text-align: center; }
.footer-legal { display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem 1.4rem; margin-bottom: .8rem; }
.footer-legal a { color: #64748b; text-decoration: none; font-size: .82rem; }
.footer-legal a:hover { color: var(--gold, #C9A24B); }
.footer-note { color: #475569; font-size: .78rem; }

/* ---- Legal document body (page + dialog) ---- */
.legal-body h1 { font-size: 1.5rem; color: #f8fafc; margin-bottom: .35rem; }
.legal-body h2 { font-size: 1.05rem; color: #f1f5f9; margin: 1.4rem 0 .45rem; }
.legal-body p, .legal-body li { font-size: .92rem; color: #cbd5e1; margin-bottom: .6rem; }
.legal-body ul { padding-left: 1.3rem; margin-bottom: .6rem; }
.legal-updated { color: #475569 !important; font-size: .8rem !important; margin-bottom: 1.2rem !important; }

/* ---- Legal dialog ---- */
.legal-dialog {
  width: min(92vw, 720px); max-height: 84dvh;
  background: #0d1524; color: #e2e8f0;
  border: 1px solid rgba(255,255,255,.12); border-radius: 14px;
  padding: 1.8rem 1.9rem 1.6rem;
  overflow-y: auto;
}
.legal-dialog::backdrop { background: rgba(0,0,0,.65); backdrop-filter: blur(3px); }
.legal-dialog-close {
  position: sticky; top: 0; float: right; margin: -0.6rem -0.6rem 0 0;
  background: rgba(255,255,255,.08); border: none; color: #94a3b8;
  width: 34px; height: 34px; border-radius: 50%; font-size: 1.15rem; cursor: pointer;
}
.legal-dialog-close:hover { color: #fff; }

/* ---- Cookie notice ---- */
.cookie-notice {
  position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%);
  z-index: 40; width: min(94vw, 560px);
  background: #0d1524; border: 1px solid rgba(255,255,255,.14); border-radius: 12px;
  padding: .85rem 1.1rem; font-size: .84rem; color: #cbd5e1;
  display: flex; align-items: center; gap: 1rem; justify-content: space-between;
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
}
.cookie-notice[hidden] { display: none; }
@media (max-width: 480px) { .cookie-notice { flex-direction: column; align-items: stretch; text-align: center; } }