@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/sora-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/sora-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/sora-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;
  src:url('../fonts/sora-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
:root{
  --midnight:#0E2A47;--depth:#17517E;--signal:#1F6FB5;--aurora:#5FC9A4;
  --ink:#12233B;--slate:#5B6B7E;--rule:#E4EAF1;--paper:#FFFFFF;--tile:#E9F1F8;
  --display:'Sora',-apple-system,sans-serif;--text:'Inter',-apple-system,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--text);color:var(--ink);background:var(--paper);line-height:1.65;font-size:16px}
.wrap{max-width:1060px;margin:0 auto;padding:0 32px}
a{color:inherit}
h1,h2{font-family:var(--display);color:var(--midnight);letter-spacing:-.02em;font-weight:700}
.num{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--slate)}
.i{width:20px;height:20px;stroke:var(--depth);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s var(--ease)}
.tile{width:44px;height:44px;border-radius:11px;background:var(--tile);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .25s var(--ease),transform .25s var(--ease)}
.btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 24px;border-radius:8px;font-family:var(--display);font-weight:600;font-size:15px;text-decoration:none;transition:background .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.btn.pri{background:var(--midnight);color:#fff}
.btn.pri .i{stroke:#fff;width:17px;height:17px;transition:transform .25s var(--ease)}
.btn.pri:hover{background:#123B63;transform:translateY(-1px);box-shadow:0 6px 18px rgba(14,42,71,.18)}
.btn.pri:hover .i{transform:translateX(3px)}
/* nav */
nav{border-bottom:1px solid var(--rule);background:rgba(255,255,255,.96);position:sticky;top:0;z-index:5}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand svg{transition:transform .6s var(--ease)}
.brand:hover svg{transform:rotate(90deg)}
.brand .wm{font-family:var(--display);font-weight:800;letter-spacing:.1em;font-size:16px;color:var(--midnight)}
.brand .sub{font-family:var(--display);font-weight:600;letter-spacing:.28em;font-size:8px;color:var(--signal)}
.links{display:flex;gap:32px;align-items:center;font-size:15px}
.links a{text-decoration:none;color:var(--slate);position:relative;padding:4px 0;transition:color .2s}
.links a:not(.mail):after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--signal);transition:width .25s var(--ease)}
.links a:not(.mail):hover:after,.links a.active:after{width:100%}
.links a:hover,.links a.active{color:var(--midnight)}
.links a.mail{color:var(--midnight);font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--signal);text-decoration-thickness:2px;transition:text-underline-offset .2s var(--ease)}
.links a.mail:hover{text-underline-offset:7px}
@media(max-width:760px){.links a:not(.mail){display:none}}
/* hero */
.hero{padding:120px 0 100px;border-bottom:1px solid var(--rule)}
.hero h1{font-size:clamp(38px,5.6vw,60px);line-height:1.08;max-width:820px;font-weight:800}
.hero .sub{margin-top:28px;font-size:18.5px;color:var(--slate);max-width:640px}
.hero .sub b{color:var(--ink);font-weight:600}
.hero .row{margin-top:44px;display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.hero .quiet{font-size:14.5px;color:var(--slate)}
/* load-in */
.rise{opacity:0;transform:translateY(16px);animation:rise .7s var(--ease) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.18s}.d3{animation-delay:.32s}
/* scroll reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
/* sections */
section{padding:96px 0;border-bottom:1px solid var(--rule)}
.sec{display:grid;grid-template-columns:240px 1fr;gap:48px}
@media(max-width:760px){.sec{grid-template-columns:1fr;gap:20px}}
.sec h2{font-size:26px}
.sec .intro{color:var(--slate);margin-top:10px;font-size:15.5px;max-width:280px}
/* rows */
.rows{display:flex;flex-direction:column}
.row-i{display:grid;grid-template-columns:64px 250px 1fr;gap:22px;padding:26px 0;border-top:1px solid var(--rule);align-items:start;border-radius:10px;transition:background .25s var(--ease)}
.row-i:first-child{border-top:0;padding-top:4px}
.row-i:hover{background:#FAFCFE}
.row-i:hover .tile{background:var(--signal);transform:translateY(-2px)}
.row-i:hover .tile .i{stroke:#fff}
@media(max-width:760px){.row-i{grid-template-columns:56px 1fr}.row-i p{grid-column:2}}
.row-i h3{font-family:var(--display);font-size:18px;color:var(--midnight);font-weight:700;padding-top:8px}
.row-i p{color:var(--slate);font-size:15px;max-width:480px;padding-top:8px}
.work .row-i{grid-template-columns:64px 200px 1fr auto}
.tag{font-size:13px;color:var(--slate);padding-top:10px}
.live{color:#177A5B;font-weight:600;font-size:13.5px;display:flex;align-items:center;gap:8px;padding-top:10px}
.live i{width:8px;height:8px;border-radius:4px;background:#22A06B;position:relative}
.live i:after{content:"";position:absolute;inset:-4px;border-radius:8px;border:2px solid #22A06B;opacity:0;animation:ping 2.2s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.5);opacity:.7}70%{transform:scale(1.15);opacity:0}100%{opacity:0}}
/* governance list */
.plist{columns:2;column-gap:48px;max-width:820px}
@media(max-width:760px){.plist{columns:1}}
.plist li{list-style:none;padding:16px 0;border-bottom:1px solid var(--rule);font-size:15.5px;break-inside:avoid;display:flex;gap:14px}
.plist .tile{width:38px;height:38px;border-radius:10px}
.plist .i{width:17px;height:17px}
.plist li b{font-family:var(--display);color:var(--midnight);display:block;font-size:15px;margin-bottom:2px}
.plist li span{color:var(--slate);font-size:14px}
.plist li:hover .tile{background:var(--signal)}
.plist li:hover .i{stroke:#fff}
/* contact */
.contact{padding:120px 0;border-bottom:0}
.contact h2{font-size:clamp(30px,4.5vw,44px);max-width:700px}
.contact .mailto{display:inline-block;margin-top:30px;font-family:var(--display);font-weight:700;font-size:clamp(20px,3vw,28px);color:var(--signal);text-decoration:none;border-bottom:3px solid var(--signal);padding-bottom:4px;transition:color .2s,border-color .2s,letter-spacing .3s var(--ease)}
.contact .mailto:hover{color:var(--depth);border-color:var(--depth);letter-spacing:.01em}
.contact p{color:var(--slate);margin-top:22px;max-width:560px;font-size:15.5px}
/* footer */
footer{background:var(--midnight);color:#8FA6C4;padding:52px 0;font-size:14px}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
footer .fbrand{display:flex;align-items:center;gap:12px}
footer .fbrand span{font-family:var(--display);font-weight:800;letter-spacing:.1em;color:#fff;font-size:14px}
footer a{color:#C7D6EA;text-decoration:none;margin-left:26px}
footer a:hover{color:#fff}
/* Background layer. Each diagram is a constellation map drawn like a
   network diagram: nodes joined by lines, with one solid Aurora-Mint
   node marking Alnilam itself and one caption set like a chart label.
   Nothing here animates. The Live ping is the only ambient motion. */
.mural{position:absolute;pointer-events:none;user-select:none;z-index:0;font-family:var(--display);font-weight:800;line-height:1;white-space:nowrap}
.g-line{color:transparent;-webkit-text-stroke:2px #BFD6EA}
@supports not (-webkit-text-stroke:1px black){.g-line{color:#E4EEF7;-webkit-text-stroke:0}}
.g-fill{color:#E8F1F9}
.g-num{font-size:clamp(140px,24vw,300px);letter-spacing:-.02em;top:22px;right:-14px}
.g-vert{writing-mode:vertical-rl;font-size:clamp(48px,6vw,76px);letter-spacing:.2em;top:-8px;left:-8px}
.g-star{top:50%;right:-170px;transform:translateY(-50%)}
.g-star svg{width:clamp(340px,54vw,640px);height:auto;display:block}
.g-star.sm{top:auto;bottom:-70px;left:-70px;right:auto;transform:rotate(12deg)}
.g-star.sm svg{width:210px}
/* Constellation motifs used as background decoration. */
.g-orion{top:50%;right:-60px;transform:translateY(-50%)}
.g-orion svg{width:clamp(300px,36vw,500px);height:auto;display:block}
.g-orbit{border:2px dashed #D7E6F2;border-radius:50%;width:520px;height:520px;bottom:-280px;right:-220px}
.g-orbit.tl{right:auto;bottom:auto;left:-240px;top:-280px;width:460px;height:460px}
.g-code{font-size:clamp(110px,15vw,190px);top:14px;left:-24px;letter-spacing:-.06em}
.g-net{bottom:-30px;left:-40px}
.g-net svg{width:310px;height:auto;display:block}
.g-sig{bottom:-150px;left:-150px}
.g-sig svg{width:350px;height:350px;display:block}
.hero,section{position:relative;overflow:hidden}
.hero .wrap,section .wrap{position:relative;z-index:1}
footer{position:relative;overflow:hidden}
footer .wrap{position:relative;z-index:1}
.mural.foot{bottom:-64px;left:-10px;font-size:clamp(110px,18vw,200px);color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.10)}
.g-star.foot-star{top:auto;bottom:-20px;right:40px;left:auto;transform:rotate(-6deg)}
.g-star.foot-star svg{width:300px}
/* Baseline statement set along the hero bottom edge. */
.g-base{bottom:-16px;left:50%;transform:translateX(-50%);font-size:clamp(58px,8.6vw,118px);letter-spacing:.02em}
/* Section illustrations that accompany the copy blocks. Captions inside
   each SVG are brand messages set as chart labels. */
.g-git{bottom:-24px;right:-36px}
.g-git svg{width:380px;height:auto;display:block}
.g-planet{bottom:-26px;left:-12px}
.g-planet svg{width:330px;height:auto;display:block}
.g-moons{bottom:-6px;right:-10px}
.g-moons svg{width:400px;height:auto;display:block}
.g-tel{bottom:-18px;right:-8px}
.g-tel svg{width:360px;height:auto;display:block}
.g-comet{top:-24px;left:110px}
.g-comet svg{width:260px;height:auto;display:block}
@media(max-width:900px){
  .g-line{-webkit-text-stroke-width:1.5px}
  .g-star{right:-120px}
  .g-orion{right:-100px}
  .g-vert,.g-star.sm,.g-net,.g-sig,.g-code,.g-git,.g-planet,.g-moons,.g-tel,.g-comet{display:none}
  .g-orbit{width:320px;height:320px;bottom:-180px;right:-160px}
  .g-orbit.tl{width:300px;height:300px;left:-160px;top:-180px}
}
/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .rise,.reveal{opacity:1 !important;transform:none !important;animation:none !important;transition:none !important}
  .live i:after{animation:none}
  html{scroll-behavior:auto}
}
