/* Exarh Landing — design tokens */
:root {
  --brand-blue: #1B3A5C;
  --brand-blue-2: #24476F;
  --brand-blue-deep: #0D1B2A;
  --brand-gold: #C4933F;
  --brand-gold-2: #D9B06B;
  --brand-gold-soft: rgba(196, 147, 63, 0.12);
  --brand-gold-line: rgba(196, 147, 63, 0.22);
  --brand-cream: #FAF7F0;
  --brand-cream-2: #F3EDDE;
  --brand-bordo: #8B3A3A;
  --surface-navy: #1B3A5C;
  --surface-navy-fg: #FAF7F0;
  --text-primary: #1B3A5C;
  --text-muted: rgba(27, 58, 92, 0.68);
  --text-faint: rgba(27, 58, 92, 0.4);
  --glass: rgba(255, 255, 255, 0.62);
  --glass-strong: rgba(255, 255, 255, 0.82);
  --shadow-soft: 0 4px 16px rgba(27, 58, 92, 0.06), 0 1px 4px rgba(196, 147, 63, 0.06);
  --shadow-lift: 0 16px 48px rgba(27, 58, 92, 0.12), 0 4px 16px rgba(196, 147, 63, 0.1);
  --shadow-deep: 0 32px 80px rgba(27, 58, 92, 0.18), 0 8px 24px rgba(196, 147, 63, 0.08);
  --glow-gold: 0 0 32px rgba(196, 147, 63, 0.28), 0 0 8px rgba(196, 147, 63, 0.15);
  --footer-bg: #1B3A5C;
}

[data-theme="dark"] {
  --brand-cream: #0F1823;
  --brand-cream-2: #152232;
  --text-primary: #F0E6D2;
  --text-muted: rgba(240, 230, 210, 0.68);
  --text-faint: rgba(240, 230, 210, 0.4);
  --glass: rgba(27, 42, 62, 0.52);
  --glass-strong: rgba(27, 42, 62, 0.80);
  --brand-blue: #F0E6D2;
  --brand-gold: #E3B765;
  --brand-gold-soft: rgba(227, 183, 101, 0.14);
  --brand-gold-line: rgba(227, 183, 101, 0.22);
  --shadow-soft: 0 4px 20px rgba(0,0,0,0.4), 0 1px 6px rgba(227, 183, 101, 0.06);
  --shadow-lift: 0 16px 52px rgba(0,0,0,0.5), 0 4px 16px rgba(227, 183, 101, 0.1);
  --shadow-deep: 0 32px 80px rgba(0,0,0,0.6), 0 8px 24px rgba(227, 183, 101, 0.08);
  --glow-gold: 0 0 32px rgba(227, 183, 101, 0.22), 0 0 8px rgba(227, 183, 101, 0.1);
  --footer-bg: #060F1A;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--brand-cream);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'cv11';
  overflow-x: hidden;
  transition: background 0.4s ease, color 0.4s ease;
}

/* Grain/parchment texture — Byzantine manuscript feel */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.022;
  pointer-events: none;
  z-index: 9990;
}
[data-theme="dark"] body::before { opacity: 0.035; }

h1, h2, h3, h4 {
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}
h1 { font-size: clamp(44px, 6.2vw, 84px); letter-spacing: -0.025em; }
h2 { font-size: clamp(34px, 4.2vw, 56px); letter-spacing: -0.02em; }
h3 { font-size: clamp(22px, 2.2vw, 30px); }

.serif-italic { font-family: 'Crimson Pro', serif; font-style: italic; font-weight: 400; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: -0.01em; }
.caps { text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; font-weight: 600; }

/* Layout */
.container { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
@media (min-width: 900px) { .container { padding: 0 48px; } }
section { padding: 96px 0; position: relative; }

/* Glass card */
.glass {
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid var(--brand-gold-line);
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.glass:hover {
  box-shadow: var(--shadow-lift);
  border-color: rgba(196, 147, 63, 0.45);
  transform: translateY(-2px);
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px;
  font-family: 'Crimson Pro', serif; font-weight: 500; font-size: 16px;
  cursor: pointer; border: 1px solid transparent;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s, background 0.2s, border-color 0.2s;
  text-decoration: none; white-space: nowrap;
  -webkit-font-smoothing: antialiased;
}
.btn:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 3px; }
.btn-primary {
  background: var(--brand-blue); color: var(--brand-cream);
  box-shadow: 0 4px 18px rgba(27,58,92,0.22), inset 0 1px 0 rgba(255,255,255,0.12);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(27,58,92,0.3), inset 0 1px 0 rgba(255,255,255,0.16); }
.btn-gold {
  background: var(--brand-gold); color: #1B3A5C;
  box-shadow: 0 4px 18px rgba(196,147,63,0.3), inset 0 1px 0 rgba(255,255,255,0.25);
  font-weight: 600;
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(196,147,63,0.45), inset 0 1px 0 rgba(255,255,255,0.3); }
.btn-ghost {
  background: transparent; color: var(--text-primary);
  border-color: var(--brand-gold-line);
}
.btn-ghost:hover { border-color: var(--brand-gold); background: var(--brand-gold-soft); transform: translateY(-1px); }

/* Pill */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--brand-gold-line);
  font-size: 13px; font-weight: 500; color: var(--text-muted);
  backdrop-filter: blur(10px);
}
.pill-gold { background: var(--brand-gold-soft); border-color: var(--brand-gold); color: var(--brand-blue); }

/* Dots (section decoration) */
.hairline {
  height: 1px; background: linear-gradient(90deg, transparent, var(--brand-gold-line) 20%, var(--brand-gold-line) 80%, transparent);
}

/* Gold trefoil dot (Brâncovenesc motif) */
.trefoil { width: 14px; height: 14px; color: var(--brand-gold); flex-shrink: 0; }

/* Scrollbar hide for carousels */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* Fade-up on scroll — stagger via inline transitionDelay set by IntersectionObserver JS */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s cubic-bezier(0.22,1,0.36,1), transform 0.75s cubic-bezier(0.22,1,0.36,1);
}
.reveal.in { opacity: 1; transform: none; }

/* Body text width constraint — max 65ch per skill guidelines */
.body-text { max-width: 65ch; }

/* Plain card — non-glass surface for variety (redesign-skill: break glass default) */
.card-plain {
  background: var(--brand-cream);
  border: 1px solid var(--brand-gold-line);
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.3s cubic-bezier(0.22,1,0.36,1);
}
.card-plain:hover { box-shadow: var(--shadow-lift); }

/* Editorial list item dividers (NotForYou, TechCredibility redesign) */
.editorial-list { display: flex; flex-direction: column; }
.editorial-item {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 22px;
  padding: 28px 0;
  align-items: start;
}
.editorial-item + .editorial-item { border-top: 1px solid var(--brand-gold-line); }
.editorial-n {
  font-family: 'Crimson Pro', serif;
  font-size: 40px;
  color: rgba(196,147,63,0.25);
  line-height: 1;
  font-weight: 500;
  padding-top: 2px;
}

/* Double-bezel card (high-end-visual-design: nested architecture) */
.bezel-outer {
  background: rgba(250,247,240,0.55);
  border: 1px solid var(--brand-gold-line);
  border-radius: 28px;
  padding: 6px;
  box-shadow: var(--shadow-soft);
}
.bezel-inner {
  background: var(--brand-cream);
  border-radius: 23px;
  padding: 28px 30px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -1px 0 rgba(196,147,63,0.06);
}

/* Marquee */
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { display: flex; animation: marquee-scroll 40s linear infinite; gap: 56px; width: max-content; }

/* Tweaks panel */
.tweaks-panel {
  position: fixed; right: 20px; bottom: 20px; z-index: 100;
  width: 320px; padding: 20px;
  background: var(--glass-strong); backdrop-filter: blur(24px);
  border: 1px solid var(--brand-gold-line); border-radius: 20px;
  box-shadow: var(--shadow-lift);
  font-size: 13px; display: none;
}
.tweaks-panel.open { display: block; }
.tweak-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--brand-gold-line); }
.tweak-row:last-child { border-bottom: none; }
.tweak-row label { color: var(--text-muted); }
.tweak-row .opts { display: flex; gap: 4px; }
.tweak-row button {
  background: transparent; border: 1px solid var(--brand-gold-line);
  padding: 5px 10px; border-radius: 8px; cursor: pointer; font-size: 11px;
  color: var(--text-primary); font-family: inherit;
}
.tweak-row button.active { background: var(--brand-blue); color: var(--brand-cream); border-color: var(--brand-blue); }

/* Ornamental interlace border (Brâncovenesc cue) */
.interlace {
  position: relative;
}
.interlace::before, .interlace::after {
  content: ''; position: absolute; pointer-events: none;
  width: 44px; height: 44px;
  border: 1.5px solid var(--brand-gold);
  opacity: 0.9;
}
.interlace::before { top: -1px; left: -1px; border-right: none; border-bottom: none; border-top-left-radius: 20px; }
.interlace::after { bottom: -1px; right: -1px; border-left: none; border-top: none; border-bottom-right-radius: 20px; }

/* Focus rings */
:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 3px; border-radius: 4px; }

/* Foundational stack section */
.foundation-section {
  padding-top: 96px;
  padding-bottom: 96px;
}
.foundation-shell {
  position: relative;
  overflow: hidden;
  /* Full viewport width — escape container, leave only thin gold rule top+bottom */
  border: none;
  border-top: 1px solid var(--brand-gold);
  border-bottom: 1px solid var(--brand-gold);
  border-radius: 0;
  padding: clamp(48px, 8vw, 90px) 0;
  background:
    radial-gradient(circle at 86% 18%, rgba(196,147,63,0.22), transparent 34%),
    radial-gradient(circle at 8% 92%, rgba(27,58,92,0.12), transparent 42%),
    linear-gradient(135deg, #1B3A5C 0%, #24476F 52%, #102942 100%);
  /* Hardcoded light text — foundation always has dark blue bg regardless of theme */
  color: #FAF7F0;
  box-shadow: 0 30px 90px rgba(27,58,92,0.18);
}
.foundation-shell > .container {
  padding-left: clamp(20px, 4vw, 40px);
  padding-right: clamp(20px, 4vw, 40px);
}
.foundation-shell h2,
.foundation-shell h3,
.foundation-shell strong {
  color: #FAF7F0;
}
/* Foundation is full-width — disable .interlace decorative L-corners */
.foundation-shell.interlace::before,
.foundation-shell.interlace::after { display: none !important; content: none !important; }
.foundation-shell .serif-italic {
  color: #E3B765;
}
@media (max-width: 900px) {
  .foundation-shell > .container { padding-left: 14px; padding-right: 14px; }
  .foundation-section { padding-top: 60px; padding-bottom: 60px; }
  .engine-grid { grid-template-columns: 1fr !important; gap: 14px; }
  .engine-bento { grid-template-columns: 1fr !important; gap: 14px; }
  .engine-card { padding: 22px; }
  .tech-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .tech-pillars-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .editorial-item { grid-template-columns: 36px 1fr; gap: 14px; padding: 22px 0; }
  .editorial-n { font-size: 30px; }
}
.foundation-shell::before {
  content: 'EXARH';
  position: absolute;
  right: -24px;
  top: -46px;
  font-family: 'Crimson Pro', serif;
  font-size: clamp(96px, 16vw, 220px);
  letter-spacing: -0.08em;
  line-height: 1;
  color: rgba(250,247,240,0.045);
  pointer-events: none;
}
.foundation-kicker,
.foundation-head,
.foundation-stack,
.engine-grid,
.foundation-proof {
  position: relative;
  z-index: 1;
}
.foundation-kicker {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 30px;
  color: var(--brand-gold-2);
}
.foundation-kicker .mono {
  color: rgba(250,247,240,0.56);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.foundation-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 44px;
  align-items: end;
  margin-bottom: 34px;
}
.foundation-head p {
  color: rgba(250,247,240,0.76);
  font-size: 17px;
  line-height: 1.65;
}
.foundation-head .serif-italic {
  color: var(--brand-gold-2);
}
.foundation-stack {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 26px;
}
.foundation-stack-item {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 8px;
  border: 1px solid rgba(217,176,107,0.24);
  border-radius: 14px;
  background: rgba(250,247,240,0.06);
  color: rgba(250,247,240,0.86);
  font-size: 12px;
  text-align: center;
}
.foundation-stack-item b {
  color: var(--brand-gold-2);
  font-size: 14px;
}
.engine-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.engine-card {
  padding: 24px;
  border: 1px solid rgba(217,176,107,0.28);
  border-radius: 20px;
  background: rgba(250,247,240,0.08);
  backdrop-filter: blur(16px);
}
.engine-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.engine-icon {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(217,176,107,0.16);
  color: var(--brand-gold-2);
}
.engine-card-top .mono {
  color: rgba(250,247,240,0.42);
  font-size: 12px;
}
.engine-card h3 {
  margin-bottom: 8px;
  font-size: 26px;
}
.engine-card .caps {
  color: var(--brand-gold-2);
  font-size: 10px;
  margin-bottom: 16px;
}
.engine-card p {
  min-height: 116px;
  color: rgba(250,247,240,0.72);
  font-size: 14px;
  line-height: 1.58;
}
.engine-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.engine-points span {
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(217,176,107,0.28);
  color: rgba(250,247,240,0.76);
  font-size: 11px;
}
.foundation-proof {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  margin-top: 24px;
  padding: 20px 22px;
  border: 1px solid rgba(217,176,107,0.34);
  border-radius: 18px;
  background: rgba(16,41,66,0.45);
}
.foundation-proof .caps {
  display: block;
  color: var(--brand-gold-2);
  font-size: 10px;
  margin-bottom: 4px;
}
.foundation-proof strong {
  color: #FAF7F0;
  font-family: 'Crimson Pro', serif;
  font-size: 24px;
  font-weight: 500;
}
@media (max-width: 1000px) {
  .foundation-head,
  .engine-grid {
    grid-template-columns: 1fr;
  }
  .foundation-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .engine-card p {
    min-height: 0;
  }
  .foundation-proof {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 560px) {
  .foundation-stack {
    grid-template-columns: 1fr;
  }
  .foundation-stack-item b {
    transform: rotate(0deg);
  }
}

/* RO flag stripes (tiny) */
.ro-flag { display: inline-flex; width: 14px; height: 10px; border-radius: 2px; overflow: hidden; border: 1px solid rgba(0,0,0,0.06); }
.ro-flag span { flex: 1; }
.ro-flag .b { background: #002B7F; }
.ro-flag .y { background: #FCD116; }
.ro-flag .r { background: #CE1126; }