/* Dating by Design — V1 minimal design system */
:root{
  --bg:#0d0e12;
  --bg-soft:#141721;
  --panel:#10131a;
  --text:#e6eaf2;
  --muted:#9aa3b2;
  --accent:#66f;
  --accent-2:#79ffe1;
  --ring: rgba(102,102,255,.5);
}
:root.light{
  --bg:#fbfbfe; --bg-soft:#f3f4f8; --panel:#fff;
  --text:#0a0b0f; --muted:#4b5565;
  --accent:#3b5bff; --accent-2:#00c2a8; --ring: rgba(59,91,255,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background:var(--bg); color:var(--text);
  line-height:1.55;
}
img{max-width:100%; height:auto}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px clamp(16px,4vw,28px); position:sticky; top:0; backdrop-filter:saturate(180%) blur(8px);
  background:color-mix(in oklab, var(--bg) 90%, transparent);
  border-bottom:1px solid color-mix(in oklab, var(--text) 7%, transparent);
  z-index:10;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; color:var(--text)}
.nav{display:flex; gap:18px; align-items:center}
.nav a{color:var(--text); opacity:.9}
.hamburger{display:none; background:none; border:0; padding:8px; cursor:pointer}
.hamburger span{display:block; width:22px; height:2px; background:var(--text); margin:5px 0; transition:.2s}
.mode-toggle{margin-left:8px; background:var(--panel); border:1px solid color-mix(in oklab, var(--text) 10%, transparent); color:var(--text); padding:8px 10px; border-radius:8px; cursor:pointer}

.hero{display:grid; grid-template-columns: 1.1fr .9fr; gap:36px; align-items:center; padding: clamp(28px,6vw,56px)}
.hero-copy h1{font-size: clamp(28px, 5vw, 48px); margin: 0 0 8px}
.accent-underline{background: linear-gradient(120deg, var(--accent-2), var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent}
.cta{display:flex; gap:12px; margin:16px 0 8px}
.btn{display:inline-block; padding:12px 16px; border-radius:12px; border:1px solid transparent; text-decoration:none; cursor:pointer; font-weight:600}
.btn.primary{background:var(--accent); color:#fff}
.btn.secondary{background:var(--panel); color:var(--text); border-color: color-mix(in oklab, var(--text) 10%, transparent)}
.btn.outline{background:transparent; color:var(--text); border-color: color-mix(in oklab, var(--text) 15%, transparent)}
.waitlist{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}
.waitlist input{flex:1; min-width:220px; padding:12px 14px; border-radius:10px; border:1px solid color-mix(in oklab, var(--text) 15%, transparent); background:var(--panel); color:var(--text)}
.trust-badges{display:flex; gap:14px; flex-wrap:wrap; margin:12px 0 0; color:var(--muted)}
.hero-art svg{width:100%; height:auto}
.hero-art rect{fill: color-mix(in oklab, var(--accent) 20%, var(--panel))}
.hero-art circle{fill: color-mix(in oklab, var(--accent-2) 70%, var(--panel))}

.section{padding: clamp(24px,5vw,48px)}
.grid.features{display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:18px}
.grid.features article{background:var(--panel); padding:16px; border-radius:14px; border:1px solid color-mix(in oklab, var(--text) 8%, transparent)}
.steps{display:grid; gap:10px; counter-reset:step}
.steps li{background:var(--panel); padding:12px 14px; border-radius:12px; border:1px solid color-mix(in oklab, var(--text) 8%, transparent)}

.faq details{background:var(--panel); padding:12px 14px; border-radius:12px; margin-bottom:10px; border:1px solid color-mix(in oklab, var(--text) 8%, transparent)}

.site-footer{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px clamp(16px,4vw,28px); border-top:1px solid color-mix(in oklab, var(--text) 7%, transparent); color:var(--muted)}
.site-footer nav{display:flex; gap:16px}

.auth{max-width:520px; margin:40px auto; padding:0 16px}
.card{background:var(--panel); padding:18px; border-radius:14px; border:1px solid color-mix(in oklab, var(--text) 8%, transparent)}
.card label{display:block; margin:10px 0; color:var(--muted)}
.card input, .card select{width:100%; padding:12px 14px; border-radius:10px; border:1px solid color-mix(in oklab, var(--text) 15%, transparent); background:var(--bg-soft); color:var(--text)}

.grid.cards{display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:16px}
.person .photo{background:linear-gradient(135deg, color-mix(in oklab, var(--accent) 20%, var(--panel)), color-mix(in oklab, var(--accent-2) 30%, var(--panel))); height:260px; border-radius:12px}
.person .actions{display:flex; gap:10px; margin-top:12px}
.match{color:var(--muted); margin-top:6px}

.prose{max-width:880px; margin:24px auto; padding:0 16px}
.ph{animation:ph 1.2s linear infinite alternate}
@keyframes ph{to{filter:brightness(1.15)}}

@media (max-width: 860px){
  .hero{grid-template-columns: 1fr; padding-top:18px}
  .nav{position:fixed; inset:60px 0 auto 0; background:var(--bg); padding:14px 18px; flex-direction:column; transform:translateY(-130%); transition:.2s; border-bottom:1px solid color-mix(in oklab, var(--text) 7%, transparent)}
  .nav.open{transform:translateY(0)}
  .hamburger{display:block}
}