*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --color-void:#000;
  --color-white:#fff;
  --color-graphite:#4d4d4d;
  --color-steel:#808080;
  --color-fog:#999;
  --color-ash:#c6c6c6;
  --color-violet:#343755;
  --color-surface:#111;
  --color-card:#181818;
  --font-mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  --font-serif:Georgia,'Times New Roman',Times,serif;
  --font-sans:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --text-xs:10px;
  --text-sm:12px;
  --text-base:14px;
  --text-lg:16px;
  --text-xl:20px;
  --text-2xl:28px;
  --text-3xl:36px;
  --leading-tight:1.2;
  --leading-normal:1.5;
  --leading-loose:1.88;
  --sp-2:2px;
  --sp-4:4px;
  --sp-6:6px;
  --sp-8:8px;
  --sp-12:12px;
  --sp-13:13px;
  --sp-14:14px;
  --sp-16:16px;
  --sp-18:18px;
  --sp-20:20px;
  --sp-24:24px;
  --sp-28:28px;
  --sp-32:32px;
  --sp-40:40px;
  --sp-48:48px;
  --sp-56:56px;
  --sp-64:64px;
  --sp-80:80px;
  --sp-96:96px;
  --sp-128:128px;
  --radius-sm:5px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-xl:16px;
  --radius-full:500px;
  --ease-out:cubic-bezier(0.22,1,0.36,1);
}
html{scroll-behavior:smooth;background:var(--color-void)}
body{
  font-family:var(--font-mono);
  background:var(--color-void);
  color:var(--color-white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
::selection{background:var(--color-violet);color:var(--color-white)}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--color-void)}
::-webkit-scrollbar-thumb{background:var(--color-graphite);border-radius:3px}
a{color:inherit;text-decoration:none}

/* === Shared Nav === */
.page-nav{
  position:fixed;top:0;left:0;width:100%;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-14) var(--sp-20);
  background:rgba(0,0,0,.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--color-graphite);
}
.page-nav .nav-logo{
  font-family:var(--font-mono);font-size:var(--text-sm);
  font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--color-white);
}
.page-nav .nav-links{
  display:flex;align-items:center;gap:var(--sp-16);
}
.page-nav .nav-links a{
  font-family:var(--font-mono);font-size:var(--text-xs);
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--color-ash);transition:color .2s;
}
.page-nav .nav-links a:hover{color:var(--color-white)}

/* === Shared Footer === */
.site-footer{
  border-top:1px solid var(--color-graphite);
  padding:var(--sp-32) var(--sp-24);
  text-align:center;
}
.footer-inner{
  max-width:960px;margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:var(--sp-16);
}
@media(max-width:480px){.footer-inner{flex-direction:column;text-align:center}}
.footer-inner span,.footer-inner a{
  font-family:var(--font-mono);font-size:var(--text-xs);
  color:var(--color-steel);
  text-transform:uppercase;letter-spacing:.08em;
}
.footer-inner a:hover{color:var(--color-white)}
.footer-links{display:flex;gap:var(--sp-16)}

/* === Shared Labels === */
.label-tag{
  font-family:var(--font-mono);font-size:var(--text-xs);
  font-weight:400;text-transform:uppercase;
  letter-spacing:.1em;color:var(--color-ash);
  display:inline-block;
}
.page-title{
  font-family:var(--font-sans);font-weight:300;
  font-size:var(--text-3xl);line-height:1.1;
  letter-spacing:-.02em;
  color:var(--color-white);
  margin-bottom:var(--sp-12);
}
.page-subtitle{
  font-family:var(--font-serif);font-size:var(--text-lg);
  line-height:var(--leading-loose);
  color:var(--color-ash);
  margin-bottom:var(--sp-40);
}
.page-main{
  padding:var(--sp-96) var(--sp-24) var(--sp-48);
  max-width:960px;margin:0 auto;
}
@media(max-width:640px){
  .page-main{padding:var(--sp-80) var(--sp-16) var(--sp-32)}
}
.section-title{
  font-family:var(--font-sans);font-weight:300;
  font-size:var(--text-2xl);line-height:1.1;
  letter-spacing:-.02em;
  color:var(--color-white);
  margin-bottom:var(--sp-24);
}

/* === Loading / Error === */
.loading-text{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-graphite);text-align:center;padding:var(--sp-24)}
.error-text{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-steel);text-align:center;padding:var(--sp-24)}

/* === Ghost Button === */
.ghost-btn{
  display:inline-block;
  font-family:var(--font-mono);font-size:var(--text-sm);
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--color-white);
  border:1px solid var(--color-graphite);
  border-radius:var(--radius-sm);
  padding:var(--sp-8) var(--sp-18);
  transition:border-color .2s ease,color .2s ease;
  cursor:pointer;
}
.ghost-btn:hover{border-color:var(--color-white)}