.hn{--cyan:#00f5ff}
.hn-hero{position:relative;overflow:hidden;padding:80px 0 40px;background:linear-gradient(180deg,#02070ccc,#02070c),url('assets/hero-sky.webp') center/cover}
.hn-stars{position:absolute;inset:0;background:radial-gradient(ellipse 50% 60% at 70% 60%,rgba(0,245,255,.12),transparent 70%)}
.hn-hero-grid{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.hn h1{font-size:clamp(40px,6vw,84px);line-height:1;letter-spacing:-.04em;margin:10px 0 18px}.hn h1 span{color:var(--cyan);text-shadow:0 0 24px rgba(0,245,255,.45)}
.hn-lede{font-size:19px;color:#c1cdd6;max-width:520px;margin:0 0 26px}
.hn-figure{position:relative}.hn-figure img{width:min(440px,100%);height:auto;display:block;margin:auto;filter:drop-shadow(0 0 30px rgba(0,245,255,.25));animation:hnfloat 7s ease-in-out infinite}
@keyframes hnfloat{50%{transform:translateY(-12px)}}
.hn-story{max-width:860px;padding:60px 0;position:relative}
.hn-story::before{content:'';position:absolute;left:23px;top:70px;bottom:70px;width:2px;background:linear-gradient(var(--cyan),rgba(0,245,255,.1));box-shadow:0 0 12px var(--cyan)}
.hn-ch{display:grid;grid-template-columns:48px 1fr;gap:24px;margin:0 0 46px}
.hn-n{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#02121a;border:2px solid var(--cyan);color:var(--cyan);font:700 14px ui-monospace,monospace;box-shadow:0 0 16px rgba(0,245,255,.4);position:relative}
.hn-ch h2{margin:6px 0 10px;font-size:clamp(22px,2.4vw,32px)}.hn-ch p{color:#c9d6de;font-size:17px;line-height:1.7;margin:0}
.hn-motto{margin:10px 0 56px 72px;padding:30px;border-radius:20px;border:1px solid rgba(0,245,255,.35);background:linear-gradient(135deg,rgba(0,245,255,.08),rgba(3,12,18,.8))}
.hn-motto blockquote{margin:0;font-size:clamp(24px,3vw,38px);font-weight:700;line-height:1.25;letter-spacing:-.02em;background:linear-gradient(90deg,#fff,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.hn-trio{padding:30px 0 60px}.hn-trio h2{text-align:center;margin-bottom:26px}
.hn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hn-card{padding:28px;border-radius:18px;border:1px solid #1f3a48;background:#06192299;text-align:center;transition:.3s}.hn-card:hover{border-color:var(--cyan);box-shadow:0 0 30px rgba(0,245,255,.15);transform:translateY(-4px)}
.hn-card span{font-size:34px}.hn-card h3{margin:10px 0 6px;color:var(--cyan)}.hn-card p{margin:0;color:#afbfca}
.hn-cta{text-align:center;padding:40px 0 90px}.hn-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.hn .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s,transform .8s}.hn .reveal.visible{opacity:1;transform:none}
@media(max-width:900px){.hn-hero-grid{grid-template-columns:1fr}.hn-figure img{width:240px}.hn-grid{grid-template-columns:1fr}.hn-motto{margin-left:0}}
@media(prefers-reduced-motion:reduce){.hn .reveal{opacity:1;transform:none;transition:none}.hn-figure img{animation:none}}
.hn-motto figcaption{margin-top:14px;font:600 13px/1.4 ui-monospace,monospace;letter-spacing:.08em;color:#8fe9ef}
.hn-figure img{width:min(300px,100%)}
/* v10: Meet the crew (both Hackernauts side by side) */
.hn-crew{padding:20px 0 70px}
.hn-crew-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:36px;border-radius:24px;border:1px solid rgba(0,245,255,.22);background:radial-gradient(ellipse 60% 70% at 25% 70%,rgba(0,245,255,.10),transparent 70%),linear-gradient(160deg,rgba(6,25,34,.85),rgba(2,10,15,.9))}
.hn-crew-copy h2{margin:6px 0 14px;font-size:clamp(26px,3vw,40px)}.hn-crew-copy h2 span{color:var(--cyan);text-shadow:0 0 20px rgba(0,245,255,.4)}
.hn-crew-copy p{color:#c9d6de;font-size:17px;line-height:1.7;margin:0 0 12px}.hn-crew-copy .hn-crew-note{font-size:14px;color:#8fe9ef;font-family:ui-monospace,monospace;letter-spacing:.04em}
@media(max-width:900px){.hn-crew-grid{grid-template-columns:1fr;gap:24px;padding:24px}}
/* v11: "It Takes a Crew!" - male left, copy centered between, female right (pads never overlap) */
.hn-crew-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr) minmax(0,.85fr);gap:32px;background:radial-gradient(ellipse 45% 70% at 50% 75%,rgba(0,245,255,.10),transparent 70%),linear-gradient(160deg,rgba(6,25,34,.85),rgba(2,10,15,.9))}
.hn-crew-fig{margin:0}.hn-crew-fig img{width:100%;max-width:250px;height:auto;display:block;margin:0 auto;filter:drop-shadow(0 0 26px rgba(0,245,255,.22))}
.hn-crew-copy h2{text-align:center}.hn-crew-copy p{text-align:left}.hn-crew-cta{display:flex;justify-content:center;margin-top:18px}
/* v11: draft backstories */
.hn-bios{padding:10px 0 60px}.hn-bios-head{text-align:center;max-width:760px;margin:0 auto 28px}.hn-bios-head h2{margin:6px 0 10px;font-size:clamp(26px,3vw,40px)}.hn-bios-head p{color:#c1cdd6;font-size:17px;line-height:1.6;margin:0}
.hn-bios-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.hn-bio{position:relative;padding:28px;border-radius:20px;border:1px dashed rgba(0,245,255,.35);background:#06192299}
.hn-bio img{float:left;width:84px;height:auto;margin:0 18px 6px 0;filter:drop-shadow(0 0 14px rgba(0,245,255,.25))}
.hn-bio h3{margin:4px 0 4px;font-size:24px;color:#fff}.hn-bio-role{margin:0 0 14px;font:600 13px/1.4 ui-monospace,monospace;letter-spacing:.06em;color:var(--cyan)}
.hn-bio p:not(.hn-bio-role){color:#c9d6de;font-size:16px;line-height:1.7;margin:0 0 12px}
.hn-draft{position:absolute;top:14px;right:14px;padding:4px 9px;border-radius:999px;border:1px solid #f4ce54;color:#f4ce54;font:700 10px/1 ui-monospace,monospace;letter-spacing:.16em}
@media(max-width:900px){.hn-crew-grid{grid-template-columns:1fr 1fr;gap:20px}.hn-crew-copy{grid-column:1/-1;grid-row:1}.hn-crew-fig img{max-width:170px}.hn-bios-grid{grid-template-columns:1fr}}