@font-face{font-family:Michroma;src:url(/assets/Michroma.ttf) format('truetype');font-display:swap}
:root{--bg:#020305;--fg:#e8eef2;--muted:#8a9aa4;--teal:#2a8aa6;--glow:#7fd3f0;--card:#0a1014;--line:#16242c}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.65 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
background-image:radial-gradient(1px 1px at 12% 18%,#fff8 50%,transparent 51%),radial-gradient(1px 1px at 73% 9%,#fff6 50%,transparent 51%),radial-gradient(1px 1px at 41% 63%,#fff5 50%,transparent 51%),radial-gradient(1px 1px at 88% 71%,#fff7 50%,transparent 51%),radial-gradient(1px 1px at 27% 88%,#fff5 50%,transparent 51%),radial-gradient(1px 1px at 58% 33%,#fff4 50%,transparent 51%);background-size:700px 700px}
a{color:var(--glow)}
.wrap{max-width:62rem;margin:0 auto;padding:0 1.25rem}
header.top{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 0}
.mini{text-decoration:none;display:inline-block}
nav a{color:var(--muted);text-decoration:none;margin-left:1.5rem;font-size:.95rem}
nav a:hover{color:var(--glow)}
.hero{position:relative;padding:5rem 0 4.5rem;overflow:hidden}
.hero svg.const{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mark{--m:clamp(2.6rem,9.5vw,6.6rem);position:relative;width:max-content;max-width:100%;margin:0 auto;text-align:left;font-family:Michroma,"Segoe UI",sans-serif;font-size:var(--m);line-height:1}
.mini .mark{--m:1.35rem;margin:0}
.mark .top{display:flex;align-items:center;gap:1.2em;font-size:.4em;letter-spacing:.85em;color:var(--fg)}
.mark .top::after{content:"";flex:1;min-width:1em;height:1px;background:var(--teal)}
.mark b{display:block;margin:.22em 0 0 -.037em;font-size:1em;line-height:1;letter-spacing:.01em;font-weight:400;color:#fff;-webkit-text-stroke:.03em currentColor;white-space:nowrap}
.mark b i{font-style:normal;color:var(--teal)}
.tag{position:relative;margin:2.5rem auto 0;max-width:34rem;text-align:center;color:var(--muted);font-size:1.15rem}
.pulse{height:34px;margin:3.5rem auto 0;max-width:100%;background:repeating-linear-gradient(90deg,var(--teal) 0 1px,transparent 1px 16px);-webkit-mask:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);mask:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);opacity:.7;border-bottom:1px solid var(--teal)}
h2{font-size:.85rem;letter-spacing:.35em;text-transform:uppercase;color:var(--teal);font-weight:600;margin:0 0 1.5rem}
section{padding:3.5rem 0}
.grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.5rem;display:flex;flex-direction:column;gap:.5rem}
.card img{width:64px;height:64px;border-radius:14px}
.card h3{margin:.5rem 0 0;font-size:1.3rem}
.card p{margin:0;color:var(--muted);font-size:.98rem}
.card .links{margin-top:auto;padding-top:1rem;font-size:.95rem}
.card .links a{margin-right:1rem}
.badge{display:inline-block;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;border:1px solid var(--teal);color:var(--glow);border-radius:99px;padding:.15rem .7rem;align-self:flex-start}
.ph{width:64px;height:64px;border-radius:14px;border:1px dashed var(--teal);display:grid;place-items:center;color:var(--teal);font-size:1.6rem}
.about p{max-width:42rem;color:var(--muted)}
footer{border-top:1px solid var(--line);padding:2rem 0 3rem;color:var(--muted);font-size:.9rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}

/* Project Aether easter egg */
.egg{width:64px;height:64px;border-radius:14px;border:1px solid var(--line);background:#050a0d;display:grid;place-items:center}
.egg svg{width:44px;height:44px;opacity:.55;transition:opacity .6s}
.egg .leaf{transform-origin:32px 26px;animation:bob 6s ease-in-out infinite;transition:transform .8s,fill .8s}
.egg .rip{opacity:0;transition:opacity .6s}
.card:hover .egg svg{opacity:1}
.card:hover .egg .rip{opacity:.9;animation:rip 2.4s ease-out infinite}
.card:hover .egg .leaf{fill:var(--glow);transform:rotate(18deg) translate(2px,-1px)}
@keyframes bob{50%{transform:translateY(1.5px) rotate(-5deg)}}
@keyframes rip{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.15);opacity:0}}
.egg .rip{transform-origin:32px 26px}
@media(prefers-reduced-motion:reduce){.egg *{animation:none!important}}