:root {
  --ink: #060817;
  --bone: #e6e9ef;
  --steel: #b9c1cc;
  --accent: #8e96ff;
  --indigo: #4f46e5;
  --line: rgba(185, 193, 204, 0.13);
  --dim: 0.25;
  --steel-grad: linear-gradient(135deg, #f4f6f9 0%, #c3cad4 42%, #eef1f5 68%, #a9b1bd 100%);
}

html { background: var(--ink); scroll-behavior: auto; }
body { background: var(--ink); color: var(--bone); overflow-x: hidden; }
::selection { background: var(--indigo); color: #fff; }

/* ---------- 3D stage ---------- */
#stage-wrap {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  contain: strict;
}
body[data-page="home"] #stage-wrap { clip-path: inset(15% 21% 15% 21% round 28px); }
@media (max-width: 767px) {
  body[data-page="home"] #stage-wrap { clip-path: inset(24% 6% 30% 6% round 20px); }
}
#stage, .stage-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease;
}
#stage.is-ready, .stage-video.is-ready { opacity: 1; }
.stage-fallback {
  opacity: 1 !important;
  background:
    radial-gradient(ellipse 40% 30% at 50% 45%, rgba(79, 70, 229, 0.28), transparent 70%),
    radial-gradient(ellipse at center, #121633, var(--ink) 70%);
}
.stage-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 45%, rgba(6, 8, 23, 0.85) 100%),
    linear-gradient(to bottom, rgba(6, 8, 23, 0.55), transparent 22%, transparent 72%, rgba(6, 8, 23, 0.75));
}
.stage-vignette::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 23, var(--dim));
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

main { position: relative; z-index: 10; }

/* utility display classes (e.g. .flex) would otherwise override the hidden attribute */
[hidden] { display: none !important; }

/* ---------- Page-exit curtain; parked below the viewport until a link is clicked ---------- */
#curtain {
  position: fixed;
  inset: 0;
  z-index: 100;
  transform: translateY(100%);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.25rem;
  background: var(--ink);
}
html:not(.js) #curtain { display: none; }

/* ---------- Header ---------- */
#site-header { transition: transform 0.6s cubic-bezier(.2,.7,.2,1), background-color 0.4s ease; }
#site-header.is-hidden { transform: translateY(-110%); }
#site-header.is-scrolled { background: linear-gradient(to bottom, rgba(6, 8, 23, 0.88), rgba(6, 8, 23, 0)); }
.nav-link { position: relative; transition: color 0.3s ease; }
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--bone); }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

#progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 60;
  background: linear-gradient(90deg, var(--indigo), var(--accent) 60%, var(--steel));
  transform: scaleX(0);
  transform-origin: left;
}

/* ---------- Type & primitives ---------- */
.eyebrow {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(185, 193, 204, 0.62);
}
.hairline { border-color: var(--line); }
.text-stroke { color: transparent; -webkit-text-stroke: 1px rgba(185, 193, 204, 0.4); }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.wi { display: inline-block; }
.shadow-text { text-shadow: 0 2px 40px rgba(0, 0, 0, 0.6); }

.btn-primary, .btn-ghost {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.95rem 1.6rem;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
/* Brushed stainless pill */
.btn-primary {
  background: var(--steel-grad);
  color: #0a0d20;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 8px 30px -12px rgba(142, 150, 255, 0.5);
}
.btn-primary:hover { background: var(--indigo); color: #fff; box-shadow: 0 10px 40px -10px rgba(79, 70, 229, 0.8); }
.btn-ghost { border: 1px solid rgba(185, 193, 204, 0.3); color: var(--bone); background: rgba(6, 8, 23, 0.4); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-primary:focus-visible, .btn-ghost:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}

/* Cards: opaque gradients instead of backdrop-filter — keeps compositing cheap over the WebGL canvas */
.card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(20, 24, 48, 0.9), rgba(8, 10, 24, 0.95));
  box-shadow: inset 0 1px 0 rgba(230, 233, 239, 0.05);
  transition: border-color 0.5s ease;
}
.card:hover { border-color: rgba(142, 150, 255, 0.45); }
.card-featured {
  border-color: rgba(142, 150, 255, 0.5);
  background: linear-gradient(160deg, rgba(42, 44, 120, 0.92), rgba(10, 11, 32, 0.96));
}

/* Social links */
.social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(185, 193, 204, 0.28);
  color: var(--steel);
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease, transform 0.35s ease;
}
.social svg { width: 18px; height: 18px; fill: currentColor; }
.social:hover { background: var(--indigo); border-color: var(--indigo); color: #fff; transform: translateY(-2px); }
.social-lg { display: flex; align-items: center; gap: 1rem; }
.social-lg .social { width: 52px; height: 52px; }

.arrow { display: inline-block; transition: transform 0.4s cubic-bezier(.2,.7,.2,1); }
a:hover .arrow, .card:hover .arrow { transform: translateX(6px); }

.scroll-line { display: block; width: 48px; height: 1px; background: rgba(185,193,204,.25); position: relative; overflow: hidden; }
.scroll-line::after { content: ''; position: absolute; inset: 0; background: var(--accent); animation: scrollLine 2.2s cubic-bezier(.6,0,.2,1) infinite; }
@keyframes scrollLine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* Marquee */
.marquee { overflow: hidden; mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* HUD */
#hud { position: fixed; left: 1.5rem; bottom: 1.5rem; z-index: 40; pointer-events: none; }
@media (min-width: 768px) { #hud { left: 2.5rem; bottom: 2rem; } }

/* Forms */
.field {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(185, 193, 204, 0.22);
  padding: 0.9rem 0;
  color: var(--bone);
  font-size: 1rem;
  border-radius: 0;
  transition: border-color 0.3s ease;
  color-scheme: dark;
}
.field::placeholder { color: rgba(185, 193, 204, 0.35); }
.field:focus { outline: none; border-color: var(--accent); }
.form-error { color: #fca5a5; line-height: 1.6; }
button[disabled] { opacity: 0.6; cursor: progress; }
select.field option { background: #0c1024; }

.map-dark { filter: grayscale(1) invert(0.92) contrast(0.9) sepia(0.2) hue-rotate(190deg) saturate(1.6); border: 0; }

details summary { list-style: none; cursor: pointer; }
details summary::-webkit-details-marker { display: none; }
details[open] .plus { transform: rotate(45deg); }
.plus { transition: transform 0.4s ease; }

/* Reveal initial states (only when JS + GSAP run) */
.js [data-reveal] { opacity: 0; transform: translateY(56px); }
.no-gsap [data-reveal] { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .marquee-track, .scroll-line::after { animation: none; }
  #stage, .stage-video { transition: none; }
}