/* =========================================================
   SHELL — Vesper-style unification layer
   Loaded AFTER main.css. Sits on top of the Apple-dark theme
   and pulls every page into the landing page's language:
   pure black, hero video, grain, liquid-metal pills, glass UI.
   ========================================================= */

body{
  background:#000000 !important;
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* ---------- COLOR HARMONY for the blue video backdrop ----------
   Neutral grays read "abes" over the blue-tinted footage, and the
   electric cyan/blue accents fight with it. Shift every tone to a
   desaturated cool-slate family so text melts into one composition,
   and turn the headline gradient into luminous silver-white. */
:root{
  --text-primary:  #F2F5FA;
  --text-secondary:#BEC6D4;
  --text-tertiary: #8B94A3;

  /* desaturated accents that whisper instead of shouting */
  --accent-blue:   #9FB9E6;
  --accent-cyan:   #ACCBEE;
  --accent-violet: #C9BBEB;
  --accent-gradient: linear-gradient(90deg, #EFF4FF, #C3D6F3);
}

p{ color:var(--text-secondary); }
.lead{ color:#CBD3E0; white-space:pre-line; }
.gradient-text{
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 18px rgba(120,160,230,.25));
}
.hero-meta .num{ color:var(--text-primary); }

/* kill remaining electric-blue remnants and tune contrast */
:root{
  --stat:#CBD4E2;
  --line:#26292F;
}
.timeline-item::before{
  border-color:var(--accent-blue);
  box-shadow:0 0 12px rgba(159,185,230,.4);
}
.tag{ color:var(--text-secondary); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline-color:#C9D6EE;
}
.hero-meta .label,.form-status.ok{ letter-spacing:0; }
.form-status.ok{ color:#8FD4A8; }



/* ---------- GRAIN ---------- */
.grain{position:fixed;inset:-50%;z-index:100;pointer-events:none;opacity:.16;width:200%;height:200%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;}

/* ---------- FIXED HERO VIDEO (injected by shell.js) ---------- */
.hero-photo{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.hero-photo video{width:100%;height:100%;object-fit:cover;display:block;}
.hero-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.34) 42%,rgba(0,0,0,.82) 100%);}
body.no-video .hero-photo{display:none;}

/* ---------- NAV as liquid-metal pills ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:transparent !important;border-bottom:none !important;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.nav-inner{
  max-width:none;margin:0;padding:calc(var(--header-y, 22px)) 40px 10px;
}
.nav-logo{
  font-family:"Inter",system-ui,sans-serif;font-weight:600;font-size:15.5px;color:#fff;
  letter-spacing:-.03em;text-shadow:0 1px 8px rgba(0,0,0,.5);
}
.nav-logo .dot{width:8px;height:8px;background:linear-gradient(135deg,#fff,#bdbdbd);
  box-shadow:0 0 10px rgba(255,255,255,.55);}

.nav-links{gap:8px;}
.nav-links a{
  height:40px;display:inline-flex;align-items:center;padding:0 18px;
  border-radius:7px;overflow:hidden;position:relative;white-space:nowrap;
  border:1px solid rgba(198,198,198,.55);color:#f3f3f3;
  background:linear-gradient(105deg,#050505 0%,#2a2a2a 48%,#4a4a4a 100%);
  font-family:"Inter",system-ui,sans-serif;font-size:.86rem;font-weight:400;letter-spacing:-.01em;
  transition:background .35s ease,border-color .35s ease,box-shadow .35s ease,color .35s ease;
  text-shadow:0 1px 6px rgba(0,0,0,.45);
}
.nav-links a::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.16) 50%,transparent 70%);
  transform:translateX(-120%);
}
.nav-links a:hover,
.nav-links a.active{
  color:#fff;border-color:rgba(235,235,235,.9);
  background:linear-gradient(105deg,#111 0%,#3a3a3a 45%,#6a6a6a 100%);
  box-shadow:0 0 18px rgba(200,210,230,.18);
}
.nav-links a:hover::before,
.nav-links a.active::before{
  transform:translateX(120%);transition:transform .6s ease;
}
.nav-links a.active::after{display:none;}

/* ---------- BUTTONS → liquid glass ---------- */
.btn{
  background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(0,0,0,.5) 46%,rgba(150,170,200,.1));
  color:#fff;border:1px solid rgba(198,198,198,.55);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  font-family:"Inter",system-ui,sans-serif;font-weight:500;letter-spacing:-.02em;
  border-radius:6px;text-shadow:none;
}
.btn:hover{
  border-color:rgba(220,230,255,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 24px rgba(170,200,255,.28);
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.45) 48%,transparent 76%);
  transform:translateX(-130%);pointer-events:none;
}
.btn:hover::after{transform:translateX(130%);transition:transform .65s ease;}
/* solid CTAs become the bright white pill from the landing */
.btn-primary{
  background:linear-gradient(180deg,#ffffff 0%,#e7e7e7 48%,#cfcfcf 100%);
  color:#111;border:1px solid #fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95);
}
.btn-primary:hover{
  background:linear-gradient(180deg,#fff 0%,#f3f6ff 42%,#d5def2 100%);
  border-color:#f2f6ff;color:#111;
  box-shadow:inset 0 1px 0 #fff,0 0 22px rgba(186,208,255,.35),0 8px 18px rgba(255,255,255,.12);
}

/* ---------- TYPOGRAPHY ---------- */
h1,h2,h3{
  font-family:"Inter",system-ui,sans-serif !important;
  letter-spacing:-.03em;text-shadow:0 2px 24px rgba(0,0,0,.55);
}
.logo-suffix,.eyebrow{font-family:"Inter",system-ui,sans-serif;}

/* ---------- GLASS PANELS ---------- */
.card{
  background:rgba(14,14,16,.62);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-color:rgba(255,255,255,.13);border-radius:14px;
}
.card:hover{
  background:rgba(22,22,26,.72);
  border-color:rgba(235,235,235,.45);
  box-shadow:0 24px 48px -20px rgba(0,0,0,.85);
}
.tag{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.16);
  color:#d8d8d8;
}
.filter-pill{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.16);
}
.filter-pill.active{
  background:linear-gradient(180deg,#ffffff,#d5def2);color:#111;border-color:#fff;
}
.timeline-item::before{
  background:#000;border-color:#2997FF;box-shadow:0 0 14px rgba(41,151,255,.55);
}
input,textarea{
  background:rgba(10,10,12,.66);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-color:rgba(255,255,255,.18);
}
input:focus,textarea:focus{background:rgba(18,18,20,.75);}
.footer{border-top:1px solid rgba(255,255,255,.09);background:transparent;}
.section{border-top:none;}

/* ---------- MOBILE dropdown keeps glass language ---------- */
@media (max-width:800px){
  .nav-inner{padding:12px 20px;}
  .nav-links.open{
    top:56px;background:rgba(10,10,12,.92);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .nav-links a{width:auto;height:46px;border-radius:10px;padding:0 18px;}
}
@media (prefers-reduced-motion: reduce){
  .grain{display:none;}
}