:root{
  --bg: #0E0F12;         /* Charcoal */
  --surface: #11131A;
  --surface2: #0F1117;
  --text: #F3EDE2;       /* Cream */
  --muted: rgba(243, 237, 226, .78);
  --border: rgba(243, 237, 226, .14);
  --accent: #B08D57;     /* Brass */
  --accent2: #0F3D2E;    /* Deep green */
  --focus: rgba(176, 141, 87, .55);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(1100px 600px at 10% 0%, rgba(176,141,87,.18) 0%, var(--bg) 55%) no-repeat;
  color: var(--text);
  line-height:1.5;
}

a{ color:inherit; text-underline-offset: 3px; }
a:hover{ opacity:.9; }
.container{ width:min(1100px, 92%); margin:0 auto; }

.muted{ color: var(--muted); }

.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:1rem; top:1rem; width:auto; height:auto;
  background: var(--surface);
  padding:.75rem 1rem;
  border:1px solid var(--border);
  border-radius:.75rem;
}

.site-header{
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(10px);
  background: rgba(14,15,18,.65);
  border-bottom:1px solid var(--border);
}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  padding: .9rem 0;
}

.brand{ display:flex; gap:.6rem; align-items:center; font-weight:800; letter-spacing:.2px; }
.brand-mark{
  width:14px; height:14px; border-radius:999px; background: var(--accent);
  display:inline-block;
}

.nav{ display:flex; gap:1rem; align-items:center; }
.nav a{ font-size:.95rem; color: var(--muted); text-decoration:none; }
.nav a:hover{ color: var(--text); }

.hero{ padding: 3.5rem 0 2rem; }
.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:2rem;
  align-items:stretch;
}
.eyebrow{ color: var(--muted); margin:0 0 .5rem; }
h1{ font-size: clamp(2rem, 4vw, 3rem); line-height:1.1; margin:.25rem 0 1rem; }
h2{ font-size:1.6rem; margin:0 0 1rem; }
.lead{ color: var(--muted); font-size:1.1rem; margin:0 0 1.25rem; }

.hero-card{
  border:1px solid var(--border);
  border-radius: 1.25rem;
  background: linear-gradient(180deg, rgba(243,237,226,.06), rgba(243,237,226,.02));
  padding:1rem;
}
.mock{
  height: 100%;
  min-height: 260px;
  border-radius: 1rem;
  border:1px dashed rgba(243,237,226,.25);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  color: rgba(243,237,226,.75);
  text-align:center;
  padding:1rem;
}
.mock-title{ margin:0; font-weight:800; }
.mock-sub{ margin:.25rem 0 0; font-size:.95rem; }

.cta-row{ display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; margin:1.25rem 0 1rem; }
.micro-bullets{
  margin:0; padding-left:1.2rem; color: var(--muted);
  display:grid; gap:.35rem;
}

.section{ padding: 2.75rem 0; }
.section-alt{
  background: rgba(243,237,226,.03);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

.steps, .grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:1rem;
}
.grid{ grid-template-columns: repeat(2, 1fr); }

.card{
  border:1px solid var(--border);
  border-radius: 1.25rem;
  background: rgba(17,19,26,.72);
  padding: 1.1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.card h3{ margin:.1rem 0 .35rem; font-size:1.1rem; }
.card p{ margin:0; color: var(--muted); }

.founders-card{ text-align:left; }
.signup{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:1.5rem;
  align-items:start;
}

form{
  border:1px solid var(--border);
  border-radius: 1.25rem;
  background: rgba(17,19,26,.72);
  padding:1.25rem;
}

.field{ display:grid; gap:.35rem; margin-bottom: .85rem; }
label{ color: var(--muted); font-size:.95rem; }
input{
  width:100%;
  padding:.75rem .8rem;
  border-radius:.9rem;
  border:1px solid rgba(243,237,226,.18);
  background: rgba(15,17,23,.9);
  color: var(--text);
  outline:none;
}
input:focus{
  border-color: rgba(176,141,87,.7);
  box-shadow: 0 0 0 3px rgba(176,141,87,.2);
}

.checkbox{ grid-template-columns: 18px 1fr; align-items:start; }
.checkbox input{ width:18px; height:18px; margin-top:.25rem; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.75rem 1rem;
  border-radius: 999px;
  border:1px solid rgba(243,237,226,.18);
  text-decoration:none;
  font-weight:800;
  cursor:pointer;
}

.btn-primary{
  background: linear-gradient(180deg, rgba(176,141,87,.95), rgba(150,118,70,.92));
  color: #0E0F12;
  border-color: rgba(176,141,87,.75);
}
.btn-secondary{
  background: rgba(243,237,226,.06);
  color: var(--text);
}
.btn-link{
  border-color: transparent;
  color: var(--muted);
  background: transparent;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0px); }

.fineprint{ color: rgba(243,237,226,.78); font-size:.9rem; margin:.75rem 0 0; }

.faq{ display:grid; gap: .75rem; }
details summary{ cursor:pointer; font-weight:800; }
details p{ margin-top:.6rem; }

.footer{ padding: 2.25rem 0; }
.footer-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:1rem;
  border-top:1px solid var(--border);
  padding-top:1.25rem;
}

/* Age Gate */
.age-gate{
  position: fixed;
  inset: 0;
  background: rgba(14,15,18,.86);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  z-index: 9999;
}
.age-card{
  width: min(560px, 100%);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  background: rgba(17,19,26,.92);
  padding: 1.25rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.age-actions{ display:flex; gap:.75rem; flex-wrap:wrap; margin-top: 1rem; }
.age-denied{ margin-top: 1rem; padding: .75rem; border: 1px solid rgba(176,141,87,.35); border-radius: 1rem; }

@media (max-width: 900px){
  .hero-grid, .signup{ grid-template-columns: 1fr; }
  .steps{ grid-template-columns: 1fr; }
  .grid{ grid-template-columns: 1fr; }
  .nav{ display:none; }
}