:root{
  --ink:#0D131A; --ink-2:#111922; --ink-3:#1D1E20;
  --gold-d:#916639; --gold:#BF9C73; --gold-l:#FFDD99;
  --text:#EDEDED; --muted:#B8C0CC; --steel:#1B395A;
  --line:rgba(191,156,115,.22);
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --display:"Syne",system-ui,sans-serif;
  --name:"Cinzel",Palatino,"Palatino Linotype",Times,serif;
  --body:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--ink)}
body{font-family:var(--body);color:var(--text);background:radial-gradient(1200px 700px at 70% -10%,rgba(27,57,90,.55),transparent 60%),radial-gradient(900px 600px at 0% 110%,rgba(145,102,57,.18),transparent 60%),var(--ink);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;line-height:1.65}
a{color:inherit;text-decoration:none}
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.grid{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(184,192,204,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(184,192,204,.05) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 30%,transparent 80%)}
.vignette{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55))}
main,.topbar,.foot{position:relative;z-index:2}
.gold{background:linear-gradient(100deg,var(--gold-d),var(--gold-l) 45%,var(--gold) 75%,var(--gold-d));-webkit-background-clip:text;background-clip:text;color:transparent}
.label{font-family:var(--mono);font-size:.72rem;font-weight:400;letter-spacing:.22em;color:var(--gold);text-transform:uppercase;margin:0}
.dim{color:rgba(237,237,237,.45)}

/* top bar */
.topbar{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:18px clamp(18px,4vw,48px);z-index:10;
  background:linear-gradient(rgba(13,19,26,.85),rgba(13,19,26,0));backdrop-filter:blur(2px)}
.brand{display:flex;align-items:center;gap:10px}
.mono-sm{width:46px;height:auto;display:block;filter:drop-shadow(0 0 6px rgba(255,221,153,.25))}
.s-logo{display:flex;align-items:center;height:40px;flex:0 0 auto;line-height:0}
.s-logo img,.s-logo svg,.s-logo-svg{height:40px;width:auto;display:block;overflow:visible;filter:drop-shadow(0 0 6px rgba(255,221,153,.25))}
.brand-txt{font-family:var(--display);font-weight:700;letter-spacing:.18em;font-size:.85rem}
.telemetry{display:flex;gap:22px;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:var(--muted)}
.telemetry b{color:var(--text);font-weight:500}
.telemetry .ok{color:#7ee0a8}
.telemetry .ok::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#7ee0a8;margin-right:6px;box-shadow:0 0 8px #7ee0a8;animation:pulse 2s infinite;vertical-align:1px}
@keyframes pulse{50%{opacity:.35}}

/* hero */
.hero{position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:120px 24px 140px;overflow:hidden}
.hero-core{text-align:center;max-width:900px;position:relative;z-index:2}
.emblem{position:relative;width:min(400px,78vw);margin:0 auto 14px;aspect-ratio:556/273}
.mark{width:100%;height:100%;object-fit:contain;display:block;position:relative;z-index:1;filter:drop-shadow(0 0 24px rgba(255,221,153,.28))}
.mono{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 24px rgba(255,221,153,.22))}
.mono-txt{font-family:var(--display);font-weight:700;font-size:44px;letter-spacing:.08em;fill:url(#gold)}
.ring{position:absolute;left:50%;top:50%;border:1px solid var(--line);border-radius:50%;transform:translate(-50%,-50%)}
.r1{width:118%;aspect-ratio:1;border-style:dashed;animation:spin 80s linear infinite}
.r2{width:148%;aspect-ratio:1;border-color:rgba(184,192,204,.08)}
.r2::before,.r2::after{content:"";position:absolute;left:50%;width:1px;height:14px;background:var(--gold);opacity:.6}
.r2::before{top:-7px}.r2::after{bottom:-7px}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.name{font-family:var(--name);font-weight:600;font-size:clamp(2.5rem,8vw,5.6rem);line-height:1.08;letter-spacing:.08em;margin:.2em 0 .3em;
  background:linear-gradient(180deg,#fff 30%,#b8c0cc);-webkit-background-clip:text;background-clip:text;color:transparent}
.tagline{font-family:var(--display);font-weight:500;font-size:clamp(1.05rem,2.6vw,1.6rem);color:var(--text);opacity:.92}
.cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:38px}
.btn{font-family:var(--mono);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;padding:15px 26px;border-radius:2px;transition:all .3s ease;display:inline-flex;gap:10px;align-items:center;min-height:48px}
.btn.primary{background:linear-gradient(100deg,var(--gold-d),var(--gold-l) 50%,var(--gold));color:#110902;font-weight:500;box-shadow:0 0 0 rgba(255,221,153,0)}
.btn.primary:hover{box-shadow:0 0 28px rgba(255,221,153,.35);transform:translateY(-2px)}
.btn.ghost{border:1px solid var(--line);color:var(--text);background:rgba(13,19,26,.85)}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold-l)}

/* heading tape */
.tape{position:absolute;top:78px;left:50%;transform:translateX(-50%);width:min(560px,86vw);height:34px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)}
.tape-inner{position:absolute;top:0;left:0;height:100%;display:flex;will-change:transform}
.tape-inner span{flex:0 0 40px;position:relative;font-family:var(--mono);font-size:.62rem;color:var(--muted);text-align:center;padding-top:16px}
.tape-inner span::before{content:"";position:absolute;top:0;left:50%;width:1px;height:6px;background:rgba(184,192,204,.4)}
.tape-inner span.maj::before{height:11px;background:var(--gold)}
.tape-mark{position:absolute;top:0;left:50%;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid var(--gold-l);transform:translateX(-50%);filter:drop-shadow(0 0 6px var(--gold-l))}

/* altimeter */
.alt{position:absolute;right:clamp(16px,3vw,44px);top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:8px}
.alt-track{width:40px;height:260px;overflow:hidden;position:relative;border-left:1px solid var(--line);
  -webkit-mask-image:linear-gradient(transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(transparent,#000 20%,#000 80%,transparent)}
.alt-inner{position:absolute;left:0;top:0;width:100%;will-change:transform}
.alt-inner span{display:block;height:26px;position:relative;font-family:var(--mono);font-size:.58rem;color:var(--muted);padding-left:14px;line-height:26px}
.alt-inner span::before{content:"";position:absolute;left:0;top:50%;width:6px;height:1px;background:rgba(184,192,204,.45)}
.alt-inner span.maj::before{width:10px;background:var(--gold)}
.alt-read{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--muted);border:1px solid var(--line);padding:6px 8px;background:rgba(13,19,26,.7)}
.alt-read b{color:var(--gold-l);font-weight:500;margin-left:2px}

.flightpath-wrap{position:absolute;left:0;right:0;bottom:70px;width:100%;height:220px;z-index:1;pointer-events:none}
.flightpath{width:100%;height:100%;display:block}
.plane{position:absolute;top:0;left:0;width:22px;height:22px;overflow:visible;transform-origin:center center;z-index:3;pointer-events:none;
  filter:drop-shadow(0 0 5px rgba(255,221,153,.9)) drop-shadow(0 0 12px rgba(191,156,115,.45));
  will-change:transform}
.scroll{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--mono);font-size:.6rem;letter-spacing:.3em;color:var(--muted);z-index:2}
.scroll i{width:1px;height:34px;background:linear-gradient(var(--gold),transparent);animation:drop 2.4s infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* panels */
.panel{max-width:1120px;margin:0 auto;padding:40px clamp(20px,5vw,48px) 40px}
.panel-head{display:flex;align-items:center;gap:16px;margin:40px 0 26px}
.idx{font-family:var(--display);font-weight:700;font-size:1.6rem;color:var(--gold)}
.rule{flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.profile-row{display:grid;grid-template-columns:260px 1fr;gap:36px;align-items:center}
.portrait{position:relative;width:min(260px,70vw);margin:0 auto;aspect-ratio:1}
.portrait picture,.portrait img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;position:relative;z-index:1}
.portrait-bezel{position:absolute;inset:-16px;width:calc(100% + 32px);height:calc(100% + 32px);z-index:2;pointer-events:none;overflow:visible;filter:drop-shadow(0 0 10px rgba(255,221,153,.28))}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.profile-row .cards{grid-template-columns:1fr}
.card{position:relative;padding:34px 32px;background:linear-gradient(160deg,rgba(29,30,32,.72),rgba(13,19,26,.6));border:1px solid rgba(184,192,204,.09);backdrop-filter:blur(6px);transition:border-color .4s,transform .4s}
.card:hover{border-color:var(--line);transform:translateY(-3px)}
.card p:not(.card-tag){font-size:1.04rem;color:rgba(237,237,237,.86);font-weight:300}
.card-tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.24em;color:var(--gold);margin-bottom:14px}
.corner{position:absolute;width:14px;height:14px;border-color:var(--gold);border-style:solid;opacity:.8}
.corner.tl{top:-1px;left:-1px;border-width:1px 0 0 1px}
.corner.br{bottom:-1px;right:-1px;border-width:0 1px 1px 0}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:12px}
.chips li{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;padding:11px 16px;border:1px solid rgba(184,192,204,.14);background:rgba(13,19,26,.55);display:flex;align-items:center;gap:10px;transition:all .3s}
.chips li:hover{border-color:var(--gold);color:var(--gold-l)}
.chips i{width:6px;height:6px;transform:rotate(45deg);background:var(--gold)}

/* closing */
.closing{position:relative;text-align:center;padding:120px clamp(20px,6vw,60px) 120px;max-width:1100px;margin:40px auto 0}
.horizon{position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,221,153,.25),transparent);z-index:-1}
.horizon::after{content:"";position:absolute;left:50%;top:-60px;width:min(600px,80vw);height:120px;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(191,156,115,.14),transparent 70%)}
.quote{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,5.4vw,4rem);line-height:1.12;margin:22px auto 10px;max-width:16ch;letter-spacing:-.01em}
.quote::before,.quote::after{color:var(--gold);opacity:.6}
.quote::before{content:"“"}.quote::after{content:"”"}
.cta.center{margin-top:44px}

/* section 03 compass rose */
.rose-wrap{width:176px;margin:0 auto 22px;position:relative;z-index:1}
.rose{width:176px;height:176px;display:block;overflow:visible;filter:drop-shadow(0 0 14px rgba(255,221,153,.16))}
.rose-hdg{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;color:var(--muted);margin-top:8px}
.rose-hdg b{color:var(--gold-l);font-weight:500}
#rose-card{transform-box:view-box;transform-origin:100px 100px;will-change:transform;transform:rotate(-270deg)}
@media (prefers-reduced-motion:reduce){#rose-card{will-change:auto}}

@media (max-width:480px){
  .rose-wrap,.rose{width:148px}
  .rose{height:148px}
}

.foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:26px clamp(20px,4vw,48px) 34px;border-top:1px solid rgba(184,192,204,.08);font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;color:var(--muted)}

/* reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}

@media (max-width:820px){
  .profile-row{grid-template-columns:1fr;gap:28px}
  .portrait{width:min(220px,64vw);margin:4px auto 8px}
  .cards{grid-template-columns:1fr}
  .alt{display:none}
  .hide-sm{display:none}
  .telemetry{gap:14px}
}
@media (max-width:480px){
  .hero{padding:110px 20px 130px}
  .tape{top:70px}
  .card{padding:26px 22px}
  .btn{flex:1 1 100%;justify-content:center}
  .cta{max-width:340px;margin-left:auto;margin-right:auto}
  .chips li{font-size:.72rem;padding:10px 13px}
  .telemetry span:first-child{display:none}
  .closing{padding:90px 22px}
  .foot{justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}
@media (max-width:600px){ .tagline .gold{display:block;margin-top:.2em} }