:root {
  --color-dark-void:   #151419;
  --color-gluon-grey:  #1B1B1E;
  --color-slate-grey:  #262626;
  --color-dusty-grey:  #878787;
  --color-snow:        #FBFBFB;
  --color-liquid-lava: #F56E0F;
  --color-gold:        #F2C200;

   --bg:            var(--color-dark-void);
  --bg-elevated:   var(--color-gluon-grey);
  --bg-surface:    var(--color-slate-grey);
  --fg:            var(--color-snow);
  --fg-muted:      var(--color-dusty-grey);
  --accent:        var(--color-liquid-lava);
  --brand:         var(--color-gold);     
  --border:        rgba(251, 251, 251, 0.08);
  --border-strong: rgba(251, 251, 251, 0.16);
  --overlay:       rgba(21, 20, 25, 0.78);  

  --font-display: "Anton", "Archivo Black", "Helvetica Neue", Impact, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-xs:    11px;
  --fs-sm:    13px;
  --fs-base:  15px;
  --fs-md:    18px;
  --fs-lg:    22px;
  --fs-xl:    32px;
  --fs-2xl:   48px;
  --fs-3xl:   72px;
  --fs-4xl:   112px;
  --fs-hero:  clamp(64px, 11vw, 168px);

  --lh-tight: 0.92;
  --lh-snug:  1.1;
  --lh-base:  1.5;

  --ls-tight:    -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.08em;
  --ls-widest:   0.24em;

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  --gutter:       clamp(20px, 3vw, 48px);
  --nav-height:   72px;
  --content-max:  1440px;

  --br-sharp: 0;      
  --br-soft:  2px;  
  --bw:       1px;
  --bw-bold:  2px;
  --bw-stamp: 4px;

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --dur-fast:  160ms;
  --dur-base:  280ms;
  --dur-slow:  600ms;
  --dur-cycle: 7000ms;

  --z-bg:    0;
  --z-base:  1;
  --z-nav:   50;
  --z-modal: 100;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }

::selection { background: var(--accent); color: var(--color-dark-void); }

.t-display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.t-muted { color: var(--fg-muted); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px 22px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  font-weight: 600;
  border: var(--bw-bold) solid currentColor;
  border-radius: var(--br-sharp);
  background: transparent;
  color: var(--fg);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--fg); color: var(--bg); }
.btn:active { transform: translateY(1px); }

.btn--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--color-dark-void);
}
.btn--accent:hover {
  background: var(--color-dark-void);
  color: var(--accent);
}

.btn--brand {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--color-dark-void);
}
.btn--brand:hover {
  background: var(--color-dark-void);
  color: var(--brand);
}

.btn--ghost { color: var(--fg); }

.btn__arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 var(--gutter);
  background: linear-gradient(to bottom, rgba(21,20,25,0.85), rgba(21,20,25,0));
  z-index: var(--z-nav);
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}
.nav__brand img { width: 36px; height: 36px; }
.nav__brand-text { line-height: 1; }
.nav__brand-text small {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--ls-widest);
  color: var(--fg-muted);
  margin-top: 3px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
  border: var(--bw) solid transparent;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.nav__link:hover { color: var(--fg); border-color: var(--border-strong); }
.nav__link.is-active {
  color: var(--color-dark-void);
  background: var(--brand);
  border-color: var(--brand);
}
.nav__link[data-external]::after {
  content: "↗";
  font-size: 10px;
  margin-left: 2px;
  opacity: 0.7;
}

@media (max-width: 720px) {
  .nav__brand small { display: none; }
  .nav__link { padding: 8px 10px; font-size: 10px; }
  .nav__links { gap: 0; }
}

.page {
  min-height: 100vh;
  padding-top: var(--nav-height);
  position: relative;
}
.page--fixed {
  height: 100vh;
  overflow: hidden;
}

.footer-mark {
  position: fixed;
  bottom: var(--space-4);
  left: var(--gutter);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
  z-index: var(--z-base);
  pointer-events: none;
  background: rgba(21, 20, 25, 0.85);
  padding: 6px 10px;
  border: var(--bw) solid var(--border);
  backdrop-filter: blur(4px);
}
.footer-mark span { color: var(--brand); }

.status-mark {
  position: fixed;
  bottom: var(--space-4);
  right: var(--gutter);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  z-index: var(--z-base);
  background: rgba(21, 20, 25, 0.85);
  padding: 6px 10px;
  border: var(--bw) solid var(--border);
  backdrop-filter: blur(4px);
}
.status-mark::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.2); }
}

.stamp {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 10px;
  border: var(--bw) solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.stamp--accent { border-color: var(--accent); color: var(--accent); }
.stamp--brand  { border-color: var(--brand);  color: var(--brand); }
.stamp__dot {
  width: 6px; height: 6px; background: currentColor; display: inline-block;
}

.card {
  background: var(--bg-elevated);
  border: var(--bw) solid var(--border);
  padding: var(--space-6);
  position: relative;
}
.card--surface { background: var(--bg-surface); }
.card--bordered-strong { border: var(--bw-bold) solid var(--border-strong); }