/* ── Custom properties ───────────────────────────────────────────────────── */
:root {
  --sh-bg:        #0a0b09;
  --sh-card:      #0c0d0a;
  --sh-text:      #cfcabb;
  --sh-cream:     #e9e4d6;
  --sh-lime:      #aee04b;
  --sh-rust:      #d4682c;
  --sh-muted:     #868a78;
  --sh-dim:       #7d8270;
  --sh-faint:     #565a4d;
  --sh-border:    rgba(233,228,214,0.12);
  --sh-border-md: rgba(233,228,214,0.22);
}

/* ── Base ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--sh-bg);
  color: var(--sh-text);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--sh-lime); color: var(--sh-bg); }

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--sh-bg); }
::-webkit-scrollbar-thumb { background: #23261d; border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: #3a3f2d; }

/* ── Keyframes ───────────────────────────────────────────────────────────── */
@keyframes blink     { 0%,49%{opacity:1;} 50%,100%{opacity:0;} }
@keyframes scan      { 0%{transform:translateY(-100%);} 100%{transform:translateY(2200%);} }
@keyframes heroZoom  { 0%{transform:scale(1.05) translate(0,0);} 100%{transform:scale(1.14) translate(-1.6%,-1.2%);} }
@keyframes fadeUp    { from{opacity:0;transform:translateY(26px);} to{opacity:1;transform:translateY(0);} }
@keyframes plIn      { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} }
@keyframes revealUp  { from{opacity:0;transform:translateY(30px);} to{opacity:1;transform:translateY(0);} }

/* ── Preloader — hide instantly on return visits (sessionStorage flag) ────── */
html.sh-booted #preloader { display: none !important; }

/* ── Preloader ───────────────────────────────────────────────────────────── */
#preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--sh-bg);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
#preloader.lift {
  transform: translateY(-100%);
  transition: transform 0.9s cubic-bezier(0.76,0,0.24,1);
}
.pl-line { animation: plIn 0.4s both; }
.pl-line:nth-child(1) { animation-delay: 0.15s; }
.pl-line:nth-child(2) { animation-delay: 0.45s; }
.pl-line:nth-child(3) { animation-delay: 0.80s; }
.pl-line:nth-child(4) { animation-delay: 1.15s; }
.pl-line:nth-child(5) { animation-delay: 1.50s; }
#pl-bar { transition: width 0.22s ease; }

/* ── Grain + scanline ────────────────────────────────────────────────────── */
#grain {
  position: fixed; inset: 0; z-index: 60;
  pointer-events: none; opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#scanline {
  position: fixed; left: 0; right: 0; top: 0;
  height: 14px; z-index: 61; pointer-events: none;
  background: linear-gradient(180deg,rgba(174,224,75,0.10),transparent);
  animation: scan 9s linear infinite;
}

/* ── Navigation ──────────────────────────────────────────────────────────── */
#site-nav {
  position: sticky; top: 0; z-index: 90;
  background: rgba(10,11,9,0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--sh-border);
}
.nav-link {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: #9a9e8a;
  padding: 8px 12px;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s;
}
.nav-link:hover, .nav-link.active { color: var(--sh-lime); }
.nav-num { color: var(--sh-faint); }

/* ── Cursor blink ────────────────────────────────────────────────────────── */
.cursor-blink {
  display: inline-block;
  width: 8px; height: 15px;
  background: var(--sh-lime);
  animation: blink 1.1s step-end infinite;
  vertical-align: middle;
  margin-left: 6px;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
#hero { position: relative; overflow: hidden; min-height: calc(100vh - 52px); display: flex; flex-direction: column; }
#hero-bg {
  position: absolute; inset: -7%;
  background: url('../images/desktop_background.png') center center / cover no-repeat;
  animation: heroZoom 30s ease-in-out infinite alternate;
  will-change: transform;
}
/* Mobile video: hidden by default, shown only on mobile */
#hero-video-mobile {
  display: none;
}
@media (max-width: 767px) {
  #hero-bg {
    background-image: url('../images/mobile_background.png');
    background-position: center 55%;
    background-size: cover;
    inset: 0;
    animation: none;
  }
  #hero-video-mobile {
    display: block !important;
  }
  #hero-bg.video-active {
    background-image: none;
  }
}
#hero-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0.18;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* ── Section borders ─────────────────────────────────────────────────────── */
.section-border { border-bottom: 1px solid var(--sh-border); }

/* ── Grid dividers ───────────────────────────────────────────────────────── */
.grid-divided {
  display: grid;
  gap: 1px;
  background: var(--sh-border);
  border: 1px solid var(--sh-border);
}
.grid-cell { background: var(--sh-card); }
.grid-cell-bg { background: var(--sh-bg); }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card-hover { transition: background 0.2s; }
.card-hover:hover { background: #0e110b !important; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sh-lime); color: var(--sh-bg);
  border: none; cursor: pointer;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600; font-size: 13px;
  letter-spacing: 0.06em; padding: 14px 22px;
  text-decoration: none;
  transition: background 0.15s;
  white-space: nowrap;
}
.btn-primary:hover { background: #c8f25a; }

.btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(8,9,7,0.45);
  border: 1px solid rgba(233,228,214,0.30);
  color: var(--sh-cream);
  cursor: pointer;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px; letter-spacing: 0.06em;
  padding: 14px 22px;
  text-decoration: none;
  backdrop-filter: blur(6px);
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.btn-outline:hover { border-color: var(--sh-lime); color: var(--sh-lime); }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  background: none;
  border: 1px solid rgba(233,228,214,0.25);
  color: var(--sh-lime);
  cursor: pointer;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px; letter-spacing: 0.06em;
  padding: 12px 18px;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.btn-ghost:hover { border-color: var(--sh-lime); background: rgba(174,224,75,0.08); }

.btn-nav-cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: none;
  border: 1px solid var(--sh-border-md);
  color: var(--sh-lime);
  cursor: pointer;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; letter-spacing: 0.08em;
  padding: 8px 14px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.btn-nav-cta:hover { background: var(--sh-lime); color: var(--sh-bg); border-color: var(--sh-lime); }

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.sh-input, .sh-textarea {
  width: 100%;
  background: var(--sh-bg);
  border: 1px solid rgba(233,228,214,0.16);
  color: var(--sh-cream);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  padding: 11px 12px;
  outline: none;
  transition: border-color 0.15s;
  display: block;
  margin-top: 7px;
}
.sh-input:focus, .sh-textarea:focus { border-color: var(--sh-lime); }
.sh-textarea { resize: vertical; }
.sh-label { font-size: 11px; color: var(--sh-dim); letter-spacing: 0.08em; display: block; }

/* ── Compliance strip ────────────────────────────────────────────────────── */
.compliance-item { font-size: 11px; letter-spacing: 0.08em; color: var(--sh-dim); }
.compliance-item span { color: var(--sh-lime); }

/* ── Reveal animations ───────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1),
              transform 0.8s cubic-bezier(0.22,1,0.36,1);
  will-change: opacity, transform;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-child {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s cubic-bezier(0.22,1,0.36,1),
              transform 0.65s cubic-bezier(0.22,1,0.36,1);
  will-change: opacity, transform;
}
.reveal-child.visible { opacity: 1; transform: translateY(0); }

/* ── Mobile menu ─────────────────────────────────────────────────────────── */
#mobile-menu {
  display: none;
  border-top: 1px solid var(--sh-border);
  background: #0c0d0a;
  flex-direction: column;
}
#mobile-menu.open { display: flex; }
.mobile-nav-link {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px; letter-spacing: 0.06em;
  color: var(--sh-text);
  padding: 14px 26px;
  border: none; background: none;
  border-bottom: 1px solid var(--sh-border);
  text-align: left; cursor: pointer;
  text-decoration: none; display: block;
  transition: color 0.15s;
}
.mobile-nav-link:last-child { border-bottom: none; }
.mobile-nav-link:hover { color: var(--sh-lime); }

/* ── Footer links ────────────────────────────────────────────────────────── */
.footer-link {
  color: #9a9e8a; font-size: 13px;
  background: none; border: none;
  text-align: left; cursor: pointer; padding: 0;
  text-decoration: none; display: block;
  transition: color 0.15s;
}
.footer-link:hover { color: var(--sh-lime); }

/* ── Tag chips ───────────────────────────────────────────────────────────── */
.tag-chip {
  font-size: 11px; color: #9a9e8a; letter-spacing: 0.04em;
  border: 1px solid rgba(233,228,214,0.16);
  padding: 5px 10px;
}

/* ── Map widget ──────────────────────────────────────────────────────────── */
.map-grid {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 13px, rgba(233,228,214,0.04) 13px, rgba(233,228,214,0.04) 14px),
    repeating-linear-gradient(90deg, transparent, transparent 13px, rgba(233,228,214,0.04) 13px, rgba(233,228,214,0.04) 14px);
}
.map-dot {
  position: absolute; width: 10px; height: 10px;
  background: var(--sh-lime); border-radius: 50%;
  left: 38%; top: 42%;
  box-shadow: 0 0 0 6px rgba(174,224,75,0.18), 0 0 18px rgba(174,224,75,0.7);
}

/* ── Left rail (hero) ────────────────────────────────────────────────────── */
#hero-rail {
  position: absolute; left: 14px; top: 90px; bottom: 80px;
  width: 54px; z-index: 3;
  display: flex; flex-direction: column; justify-content: space-between;
  align-items: center;
  font-size: 10px; color: var(--sh-faint); letter-spacing: 0.1em;
}

/* ── Typography helpers ──────────────────────────────────────────────────── */
.font-display  { font-family: 'Anton', sans-serif; font-weight: 400; }
.font-sub      { font-family: 'Oswald', sans-serif; }
.font-mono     { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.text-lime     { color: var(--sh-lime); }
.text-rust     { color: var(--sh-rust); }
.text-cream    { color: var(--sh-cream); }
.text-muted    { color: var(--sh-muted); }
.text-dim      { color: var(--sh-dim); }
.text-faint    { color: var(--sh-faint); }
.text-label    { font-size: 11px; letter-spacing: 0.12em; }
.text-eyebrow  { font-size: 12px; letter-spacing: 0.14em; }
.border-sh     { border-color: var(--sh-border); }

/* ── Responsive hidden utilities ─────────────────────────────────────────── */
@media (max-width: 1100px) { #hero-rail { display: none !important; } }

/* ── Section padding ─────────────────────────────────────────────────────── */
.section-pad   { padding: 80px 32px; }
.section-pad-lg { padding: 96px 32px; }

@media (max-width: 768px) {
  .section-pad   { padding: 60px 20px; }
  .section-pad-lg { padding: 72px 20px; }
}

@media (max-width: 640px) {
  .section-pad   { padding: 48px 16px; }
  .section-pad-lg { padding: 56px 16px; }
}