:root{ --bg:#060a0c; --ink:#e7f1f2; --muted:#93abae; --sig:#2dd4bf; --sig-dim:#0d9488; --deep:#032722; --line:rgba(255,255,255,.10); --card:rgba(255,255,255,.03); --pad:clamp(16px,4vw,24px); }
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column;position:relative;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(720px 520px at 50% 4%, rgba(45,212,191,.16), transparent 70%),radial-gradient(620px 620px at 82% 112%, rgba(13,148,136,.12), transparent 70%),var(--bg)}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--sig);outline-offset:3px;border-radius:8px}
/* nav */
nav{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1000px;margin:0 auto;width:100%;padding:22px var(--pad)}
.brand{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:800;letter-spacing:-.02em}
.brandmark{width:30px;height:30px;border-radius:9px;background:linear-gradient(140deg,var(--sig),var(--sig-dim));display:flex;align-items:center;justify-content:center;box-shadow:0 0 22px rgba(45,212,191,.35);flex:none}
.brandmark::after{content:"";width:13px;height:13px;border-radius:13px 0 13px 0;background:var(--deep)}
.menu{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
.menu a{padding:8px 12px;border-radius:9px;font-size:14.5px;font-weight:600;color:var(--muted);transition:.15s}
.menu a:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.menu a.active{color:var(--sig)}
/* layout */
main{position:relative;z-index:1;flex:1;width:100%;max-width:1000px;margin:0 auto;padding:var(--pad) var(--pad) 80px}
/* hero */
.hero{text-align:center;padding:34px 0 8px}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sig)}
h1{margin-top:14px;font-size:clamp(34px,6.6vw,62px);font-weight:800;letter-spacing:-.03em;line-height:1.05}
.tag{margin:18px auto 0;max-width:62ch;font-size:clamp(16px,2.4vw,20px);color:var(--muted);line-height:1.55}
.heroctas{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.cta{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:11px;font-size:15.5px;font-weight:700;color:var(--deep);background:linear-gradient(140deg,var(--sig),var(--sig-dim));box-shadow:0 0 26px rgba(45,212,191,.28);transition:.15s}
.cta:hover{transform:translateY(-1px);box-shadow:0 0 34px rgba(45,212,191,.42)}
.cta.ghost{background:none;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.cta.ghost:hover{border-color:var(--sig-dim);background:rgba(13,148,136,.08)}
/* sections */
section{margin-top:64px;scroll-margin-top:16px}
h2{font-size:clamp(23px,3.4vw,32px);font-weight:800;letter-spacing:-.02em}
.lead{margin-top:12px;max-width:72ch;font-size:16px;line-height:1.6;color:var(--muted)}
/* cards */
.cards{margin-top:26px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px 22px;transition:.15s}
.card:hover{border-color:var(--sig-dim);background:rgba(13,148,136,.06)}
.card .n{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--muted)}
.card h3{margin-top:10px;font-size:19px;font-weight:700;color:var(--sig);letter-spacing:-.01em;line-height:1.3}
.card p{margin-top:9px;font-size:14.5px;line-height:1.6;color:var(--muted)}
/* steps */
.steps{margin-top:26px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px}
.step{background:rgba(13,148,136,.07);border:1px solid rgba(45,212,191,.24);border-radius:16px;padding:22px 20px}
.step .n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;background:linear-gradient(140deg,var(--sig),var(--sig-dim));color:var(--deep);font-size:13px;font-weight:800}
.step h3{margin-top:12px;font-size:17.5px;font-weight:700}
.step p{margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--muted)}
/* rows */
.rows{margin-top:24px;display:grid;gap:12px}
.row{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.row b{display:block;font-size:15.5px}
.row span{display:block;margin-top:6px;font-size:14.5px;line-height:1.6;color:var(--muted)}
/* closing strip */
.join{margin-top:64px;background:rgba(13,148,136,.08);border:1px solid rgba(45,212,191,.28);border-radius:20px;padding:30px var(--pad);text-align:center}
.join p{margin:12px auto 0;max-width:62ch;font-size:15.5px;line-height:1.6;color:var(--muted)}
.join .heroctas{margin-top:22px}
footer{position:relative;z-index:1;text-align:center;padding:10px var(--pad) 36px;color:var(--muted);font-size:13px;line-height:1.9}
footer a{color:var(--sig);font-weight:500}
/* split layout: copy beside a tall device shot */
.split{margin-top:26px;display:grid;grid-template-columns:1fr minmax(min(100%,240px),320px);gap:clamp(16px,3vw,32px);align-items:center}
.split .lead{margin-top:0}
.split .figure{margin-top:0}
.split .figure img{background:#0b1214;max-height:560px;object-fit:contain;margin:0 auto}
@media (max-width:760px){ .split{grid-template-columns:1fr} }

/* figures + lightbox */
figure{margin:0}
.figure{margin-top:22px;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.figure img{display:block;width:100%;height:auto;cursor:zoom-in}
.figure img:focus-visible{outline:2px solid var(--sig);outline-offset:-2px}
.figure figcaption{padding:12px 16px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.5;color:var(--muted)}
.subhead{margin-top:46px;font-size:clamp(18px,2.8vw,23px);font-weight:700;letter-spacing:-.01em;color:var(--sig)}
.gear{margin-top:26px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:16px}
.gear .figure{margin-top:0}
.gear .figure img{background:#0b1214;object-fit:contain;aspect-ratio:4/3}
#lb{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:clamp(16px,4vw,40px);background:rgba(3,10,10,.94);cursor:zoom-out}
#lb.open{display:flex}
#lb img{max-width:100%;max-height:100%;border-radius:12px;box-shadow:0 30px 90px rgba(0,0,0,.65)}
#lb .hint{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:13px;color:var(--muted)}
@media (max-width:520px){ .menu a{padding:7px 9px;font-size:13.5px} .wordmark{display:none} }