:root {
  --bg: #fafafa;
  --fg: #09090b;
  --muted: #71717a;
  --line: #e4e4e7;
  --card: rgba(255,255,255,.78);
  --ink: #18181b;
  --ink-2: #27272a;
  --soft: #f4f4f5;
  --green: #16a34a;
  --blue: #2563eb;
  --shadow: 0 24px 80px rgba(24,24,27,.12);
  --radius: 28px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--fg);
  background:
    radial-gradient(circle at 10% 10%, rgba(37,99,235,.12), transparent 30%),
    radial-gradient(circle at 90% 5%, rgba(22,163,74,.12), transparent 28%),
    linear-gradient(180deg, #fff 0%, var(--bg) 36%, #f5f5f5 100%);
  min-height: 100vh;
}

.noise {
  position: fixed; inset: 0; pointer-events: none; opacity: .035; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }

.nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: min(1180px, calc(100% - 32px)); margin: 18px auto 0; padding: 12px;
  border: 1px solid rgba(228,228,231,.8); border-radius: 999px;
  background: rgba(255,255,255,.72); backdrop-filter: blur(18px);
  box-shadow: 0 12px 40px rgba(24,24,27,.07);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--ink); color:white; box-shadow: inset 0 -8px 16px rgba(255,255,255,.08); }
.nav nav { display: flex; align-items:center; gap: 6px; }
.nav nav a { padding: 10px 14px; color: #3f3f46; border-radius: 999px; font-weight: 700; font-size: 14px; transition: .2s ease; }
.nav nav a:hover, .nav nav a:focus-visible { background: var(--soft); color: var(--fg); outline: none; }
.nav-cta { background: var(--ink) !important; color: white !important; }

main, footer { position: relative; z-index: 1; }
.section, .hero { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.hero { min-height: 760px; padding: 92px 0 64px; display:grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 60px; }
.eyebrow { display:inline-flex; align-items:center; gap:10px; margin:0 0 16px; font-weight:800; color:#3f3f46; letter-spacing:.04em; text-transform:uppercase; font-size:12px; }
.eyebrow span { width: 8px; height: 8px; border-radius: 99px; background: var(--green); box-shadow:0 0 0 7px rgba(22,163,74,.12); }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(48px, 7vw, 92px); line-height: .88; letter-spacing: -.075em; margin-bottom: 24px; }
h2 { font-size: clamp(34px, 4vw, 58px); line-height: .95; letter-spacing: -.055em; margin-bottom: 16px; }
h3 { font-size: 22px; letter-spacing: -.03em; margin-bottom: 10px; }
.lead { color: #52525b; font-size: clamp(18px, 2vw, 22px); line-height: 1.6; max-width: 640px; }
.hero-actions, .controls { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin: 28px 0; }
.button { border:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding: 0 20px; border-radius:999px; font-weight:900; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button:focus-visible { outline: 3px solid rgba(37,99,235,.35); outline-offset: 3px; }
.primary { background: var(--ink); color: white; box-shadow: 0 18px 42px rgba(24,24,27,.25); }
.secondary { background: #e9f2ff; color: #174ea6; }
.ghost { background: white; color: var(--ink); border: 1px solid var(--line); }
.ghost.dark { background:#f4f4f5; }
.trust-row { display:flex; flex-wrap:wrap; gap:10px; margin-top: 28px; }
.trust-row span { padding: 8px 12px; border:1px solid var(--line); border-radius:999px; color:#3f3f46; background:rgba(255,255,255,.7); font-weight:700; font-size:13px; }

.hero-panel { position:relative; min-height: 640px; display:grid; place-items:center; }
.hero-panel:before { content:""; position:absolute; width:520px; height:520px; border-radius: 38% 62% 59% 41%; background: linear-gradient(135deg, rgba(24,24,27,.11), rgba(37,99,235,.16)); filter: blur(2px); animation: morph 9s ease-in-out infinite; }
.phone-shell { position:relative; width:min(420px, 100%); min-height: 620px; padding: 24px; border-radius: 46px; border: 1px solid rgba(255,255,255,.85); background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(245,245,245,.72)); box-shadow: var(--shadow); backdrop-filter: blur(20px); overflow:hidden; }
.phone-top { width:96px; height:7px; border-radius:999px; background:#d4d4d8; margin: 0 auto 28px; }
.match-card { display:flex; align-items:center; gap:14px; padding:14px; border-radius:24px; background:#fff; border:1px solid var(--line); box-shadow:0 14px 40px rgba(24,24,27,.08); }
.match-card small { display:block; color:var(--muted); margin-top:4px; }
.avatar-ring { width:64px; height:64px; border-radius:50%; padding:4px; background: conic-gradient(from 180deg, var(--green), var(--blue), #111, var(--green)); }
.avatar-face { width:100%; height:100%; border-radius:50%; background: radial-gradient(circle at 50% 36%, #fde7d7 0 22%, transparent 23%), linear-gradient(135deg,#111,#3f3f46); }
.pill { margin-left:auto; background:#dcfce7; color:#166534; font-weight:900; padding:8px 10px; border-radius:999px; }
.photo-stack { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:24px; }
.photo { aspect-ratio: 1; border-radius: 28px; box-shadow: inset 0 -42px 70px rgba(0,0,0,.22), 0 18px 40px rgba(24,24,27,.12); }
.p1 { background: linear-gradient(135deg,#111,#52525b 52%,#facc15); }
.p2 { background: linear-gradient(135deg,#0f766e,#22c55e 52%,#f8fafc); transform: translateY(18px); }
.p3 { background: linear-gradient(135deg,#1d4ed8,#93c5fd 52%,#0f172a); }
.p4 { background: linear-gradient(135deg,#be123c,#fb7185 52%,#111827); transform: translateY(18px); }
.progress-block { margin-top:46px; background:#fff; border:1px solid var(--line); border-radius:22px; padding:16px; }
.progress-meta { display:flex; justify-content:space-between; font-weight:800; color:#3f3f46; font-size:13px; margin-bottom:10px; }
.bar { height:10px; border-radius:999px; background:#e4e4e7; overflow:hidden; }
.bar span { display:block; width:78%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--ink),var(--blue)); animation: scan 2.6s ease-in-out infinite alternate; }

.section { padding: 74px 0; }
.section-head { max-width:780px; margin-bottom:28px; }
.steps, .privacy-cards { display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; }
.steps article, .privacy-cards article { background:var(--card); border:1px solid rgba(228,228,231,.8); border-radius:var(--radius); padding:28px; box-shadow: 0 12px 50px rgba(24,24,27,.06); backdrop-filter: blur(14px); }
.steps span { display:inline-flex; margin-bottom:28px; color:#71717a; font-weight:900; }
.steps p, .privacy-cards p, .demo-copy p, .cta p { color:#52525b; line-height:1.65; }

.demo-shell { display:grid; grid-template-columns: .82fr 1.18fr; gap:24px; align-items:stretch; padding:22px; border:1px solid var(--line); border-radius:36px; background:rgba(255,255,255,.72); box-shadow: var(--shadow); }
.demo-copy { padding:28px; }
.check-list { list-style:none; padding:0; margin:24px 0 0; display:grid; gap:12px; color:#3f3f46; font-weight:700; }
.check-list li { display:flex; gap:10px; align-items:flex-start; }
.check-list li:before { content:""; width:18px; height:18px; flex:0 0 auto; margin-top:2px; border-radius:50%; background: radial-gradient(circle at center, white 0 28%, transparent 30%), var(--green); }
.finder { background:#0b0b0f; color:white; border-radius:28px; padding:22px; min-height:560px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.upload-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.dropzone { position:relative; cursor:pointer; min-height:150px; border:1px dashed rgba(255,255,255,.28); border-radius:24px; padding:20px; display:flex; flex-direction:column; justify-content:flex-end; background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.03)); transition:.2s ease; overflow:hidden; }
.dropzone:hover { border-color:rgba(255,255,255,.62); transform: translateY(-2px); }
.dropzone:before { content:"+"; position:absolute; top:18px; right:18px; width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:white; color:#09090b; font-weight:900; }
.dropzone input { position:absolute; opacity:0; inset:0; cursor:pointer; }
.dropzone small { color:#a1a1aa; margin-top:6px; }
.status { min-height:42px; display:flex; align-items:center; color:#d4d4d8; border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); margin: 4px 0 18px; }
.preview-row { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.selfie-thumb { display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); padding:10px; border-radius:18px; }
.selfie-thumb img { width:54px; height:54px; object-fit:cover; border-radius:14px; }
.results-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.result-card { position:relative; min-height:160px; border-radius:20px; overflow:hidden; background:#18181b; border:1px solid rgba(255,255,255,.08); }
.result-card img, .sample-art { width:100%; height:100%; object-fit:cover; display:block; min-height:160px; }
.sample-art { background: var(--sample); }
.result-meta { position:absolute; inset:auto 10px 10px 10px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border-radius:999px; background:rgba(0,0,0,.58); backdrop-filter: blur(10px); font-weight:900; font-size:12px; }
.score { color:#bbf7d0; }
.empty { grid-column:1/-1; padding:36px; text-align:center; color:#a1a1aa; border:1px dashed rgba(255,255,255,.2); border-radius:22px; }

.privacy { display:grid; grid-template-columns:.75fr 1.25fr; gap:24px; align-items:start; }
.cta { text-align:center; padding-bottom: 96px; }
.cta h2 { max-width:760px; margin-left:auto; margin-right:auto; }
footer { width:min(1180px, calc(100% - 32px)); margin:0 auto 28px; padding:22px 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; color:#71717a; font-weight:700; }

@keyframes morph { 0%,100%{border-radius:38% 62% 59% 41%; transform:rotate(0deg)} 50%{border-radius:58% 42% 38% 62%; transform:rotate(8deg)} }
@keyframes scan { from{width:30%} to{width:92%} }

@media (prefers-reduced-motion: reduce) { *, *:before, *:after { animation: none !important; transition: none !important; scroll-behavior:auto !important; } }
@media (max-width: 920px) {
  .nav { border-radius:24px; align-items:flex-start; }
  .nav nav { display:none; }
  .hero, .demo-shell, .privacy { grid-template-columns:1fr; }
  .hero { min-height:auto; padding-top:64px; }
  .hero-panel { min-height:540px; }
  .steps, .privacy-cards { grid-template-columns:1fr; }
  .results-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px) {
  .section, .hero { width:min(100% - 22px, 1180px); }
  h1 { font-size: 52px; }
  .upload-grid { grid-template-columns:1fr; }
  .results-grid { grid-template-columns:1fr; }
  .demo-shell { padding:12px; border-radius:28px; }
  .demo-copy, .finder { padding:18px; }
  footer { flex-direction:column; }
}