*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f5f7fb;--white:#fff;--ink:#0a0e17;--mid:#4a5568;--muted:#8a9ab5;
  --blue:#2563eb;--border:#e2e8f0;
}
html,body{height:100%;overflow:hidden}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);height:100vh;
  display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;
}
nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:7px 4vw;background:rgba(245,247,251,.55);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(226,232,240,.6);position:relative;z-index:10;
}
.logo{display:flex;align-items:center;gap:6px;font-size:.88rem;font-weight:700;color:var(--ink);text-decoration:none;letter-spacing:-.02em}
.logo img{width:20px;height:20px;object-fit:contain;filter:brightness(0)}
.nav-links{display:flex;gap:14px;list-style:none;flex-wrap:wrap}
.nav-links a{color:var(--mid);font-size:.72rem;text-decoration:none}
.nav-links a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;padding:5px 11px;border-radius:100px;background:var(--ink);color:#fff;font:500 .72rem Inter,sans-serif;text-decoration:none}
.btn:hover{background:#1a2035}
.about-stage{
  position:fixed;inset:0;z-index:0;
  overflow:hidden;
  display:grid;
  place-items:center;
}
.about-copy{
  position:relative;z-index:1;
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  padding:52px 5vw 48px;
  overflow:auto;
}
.about-copy p{
  max-width:min(38rem,84vw);
  margin:0;
  text-align:left;
  font-family:"Special Elite","Courier New",Courier,monospace;
  font-weight:400;
  font-size:clamp(1rem,1.9vw,1.2rem);
  line-height:1.55;
  letter-spacing:.03em;
  color:#171717;
  text-shadow:.4px .4px 0 rgba(0,0,0,.14);
}
.about-copy p::after{
  content:"█";
  margin-left:.08em;
  font-size:.85em;
  animation:caret .72s steps(1) infinite;
}
@keyframes caret{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .about-copy p::after{animation:none}
}
.glitch{
  position:absolute;inset:0;
  width:100%;height:100%;
  --shift:0px;
  --slice-y:18%;
  --slice-h:8%;
  --slice-x:0px;
}
.glitch img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  pointer-events:none;user-select:none;
}
.layer-base{
  opacity:.28;
  animation:base-jitter 3.6s steps(2,end) infinite;
}
.layer-red,.layer-cyan{
  opacity:.16;mix-blend-mode:multiply;
}
.layer-red{
  filter:url(#about-red);
  transform:translate(var(--shift),0);
  animation:rgb-left 2.4s steps(2,end) infinite;
}
.layer-cyan{
  filter:url(#about-cyan);
  transform:translate(calc(var(--shift) * -1),0);
  animation:rgb-right 2.1s steps(2,end) infinite;
}
.layer-slice{
  opacity:.34;
  clip-path:inset(var(--slice-y) 0 calc(100% - var(--slice-y) - var(--slice-h)) 0);
  transform:translateX(var(--slice-x));
  filter:contrast(1.35) saturate(1.4);
}
.scanlines{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    transparent 0 2px,
    rgba(255,255,255,.18) 2px 3px
  );
  opacity:.45;mix-blend-mode:soft-light;
}
.bars{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:
    linear-gradient(to bottom, transparent 22%, rgba(245,247,251,.85) 22% 24%, transparent 24% 61%, rgba(10,14,23,.35) 61% 63%, transparent 63%);
}
.glitch.is-burst .bars{opacity:1}
.glitch.is-burst .layer-base{opacity:.2;transform:translate(10px,-3px) skewX(-2deg)}
.glitch.is-burst .layer-red{opacity:.28;transform:translate(18px,2px)}
.glitch.is-burst .layer-cyan{opacity:.28;transform:translate(-16px,-2px)}
@keyframes base-jitter{
  0%,86%,100%{transform:translate(0,0)}
  88%{transform:translate(-5px,1px)}
  91%{transform:translate(7px,-2px)}
  94%{transform:translate(-2px,0)}
}
@keyframes rgb-left{
  0%,80%,100%{transform:translate(2px,0)}
  84%{transform:translate(-10px,1px)}
  90%{transform:translate(14px,-1px)}
}
@keyframes rgb-right{
  0%,78%,100%{transform:translate(-2px,0)}
  83%{transform:translate(12px,0)}
  89%{transform:translate(-15px,2px)}
}
@media (prefers-reduced-motion:reduce){
  .layer-base,.layer-red,.layer-cyan{animation:none}
  .layer-slice,.bars{display:none}
}
footer{
  margin-top:auto;
  border-top:1px solid rgba(226,232,240,.6);padding:7px 4vw;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;
  background:rgba(245,247,251,.55);backdrop-filter:blur(12px);
  position:relative;z-index:10;
}
.footer-links{display:flex;gap:12px;list-style:none;flex-wrap:wrap;align-items:center}
.footer-links a{font-size:.68rem;color:var(--muted);text-decoration:none;transition:color .15s}
.footer-links a:hover,.footer-links a[aria-current="page"]{color:var(--ink)}
.footer-meta{display:flex;flex-direction:row;align-items:center;gap:8px}
.footer-copy{font-size:.65rem;color:var(--muted)}
.footer-socials{display:flex;align-items:center;gap:4px}
.footer-social{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;color:var(--muted);transition:color .15s,background .15s}
.footer-social:hover{color:var(--ink);background:rgba(15,23,42,.05)}
.footer-social svg{width:13px;height:13px;display:block}
@media (max-width:640px){.footer-meta{align-items:flex-start}.nav-links{display:none}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}