:root{--ink:#1f2430;--bg:#fff;--soft:#f3f1ec;--accent:#e8638c;--teal:#2f9e9e;--muted:#6b7280}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.5}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
img{max-width:100%;display:block}

/* nav (chrome — should NOT be editable) */
.nav-shell{position:sticky;top:0;z-index:50;background:var(--ink)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;max-width:1080px;margin:0 auto}
.brand{color:#fff;font-weight:800;font-size:20px;text-decoration:none}
.brand .dot{color:var(--accent)}
.nav-links a{color:#cfd3da;text-decoration:none;margin-left:18px;font-size:15px}
.nav-links a:hover{color:#fff}
.menu-btn{display:none}

/* hero */
.hero{padding:64px 0;text-align:center;background:var(--soft)}
.hero h1{font-size:46px;line-height:1.05;margin-bottom:14px}
.hero p{font-size:18px;color:var(--muted);max-width:620px;margin:0 auto 22px}
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;padding:12px 22px;border-radius:999px}
.portrait{width:300px;height:300px;border-radius:24px;object-fit:cover;margin:26px auto 0;border:6px solid #fff;box-shadow:0 20px 50px rgba(0,0,0,.15)}

/* ticker */
.marquee{background:var(--teal);color:#08363a;overflow:hidden;white-space:nowrap;padding:14px 0;font-weight:700}
.marquee .track{display:inline-block;animation:scroll 22s linear infinite}
.marquee .track span{padding:0 28px}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* feature w/ background image */
.feature{min-height:340px;display:grid;place-items:center;color:#fff;text-align:center;
  background:#444 url('https://images.unsplash.com/photo-1509440159596-0249088772ff?w=1200&q=60') center/cover no-repeat}
.feature .card{background:rgba(20,22,26,.55);padding:28px 32px;border-radius:16px;max-width:560px}
.feature h2{font-size:34px;margin-bottom:8px}

/* simple cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:56px 0}
.card-x{background:var(--soft);border-radius:16px;padding:24px}
.card-x h3{font-size:20px;margin-bottom:6px}
.card-x p{color:var(--muted);font-size:15px}

/* footer (chrome) */
footer{background:var(--ink);color:#cfd3da;text-align:center;padding:48px 24px}
.foot-brand{color:#fff;font-weight:800;font-size:22px;margin-bottom:8px}
.foot-brand .dot{color:var(--accent)}
.foot-links a{color:#cfd3da;text-decoration:none;margin:0 10px;font-size:14px}

/* exit popup (runtime state — must NOT bake open) */
.pop-overlay{position:fixed;inset:0;background:rgba(20,22,26,.6);display:none;align-items:center;justify-content:center;z-index:200;padding:20px}
.pop-overlay.show{display:flex}
.pop{background:#fff;color:var(--ink);border-radius:18px;max-width:420px;padding:32px;text-align:center}
.pop .x{position:absolute;top:18px;right:20px;background:none;border:0;color:#fff;font-size:26px;cursor:pointer}
@media(max-width:720px){.cards{grid-template-columns:1fr}.hero h1{font-size:34px}}