@import url('/css/tokens.css');
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(1200px 600px at 70% -10%, var(--phase-tint), transparent),var(--phase-bg);color:var(--text);font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, Helvetica, sans-serif;line-height:1.5}
a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0;position:sticky;top:0;background:linear-gradient(180deg, rgba(10,12,18,.92), rgba(10,12,18,.6));backdrop-filter: blur(6px);z-index:10;border-bottom:1px solid rgba(255,255,255,.06)}
.nav .brand{display:flex;gap:12px;align-items:center}
.nav img{height:40px}
.nav ul{list-style:none;display:flex;gap:12px;margin:0;padding:0}
.button,button{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--stroke);padding:10px 14px;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.1));color:var(--text);cursor:pointer;transition:.2s}
.button:hover,button:hover{transform:translateY(-1px);border-color:var(--brand)}

/* HERO — oscillating overlay + refraction */
@keyframes heroOsc {
  0%   { background-position: -160px 0px, center left; }
  50%  { background-position:  160px 0px, center left; }
  100% { background-position: -160px 0px, center left; }
}
.hero{filter: brightness(1) saturate(1.02); animation: heroOsc 18s ease-in-out infinite;
  padding: clamp(60px, 9vw, 120px) 0 30px; position:relative; overflow:hidden;
  background-image: var(--hero-overlay), var(--hero-base);
  background-size: 1400px auto, cover;
  background-repeat: repeat, no-repeat;
  animation: heroOsc 18s ease-in-out infinite;
  isolation:isolate;
}
.hero::before{ /* refraction layer */
  content:""; position:absolute; inset:-10% -10% -10% -10%;
  background: radial-gradient(60% 40% at 25% 35%, rgba(160,200,255,.18), transparent 70%);
  filter: blur(18px);
  mix-blend-mode: screen; opacity:.78; pointer-events:none; animation: breathe 12s ease-in-out infinite;
}
.hero::after{ /* readable gradient */
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(11,13,18,.96) 0%, rgba(11,13,18,.72) 40%, rgba(11,13,18,.38) 70%, rgba(11,13,18,0) 100%);
  pointer-events:none;
}
.hero > .container{ position:relative; z-index:1; }
.badge{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--stroke);border-radius:999px;padding:6px 10px;color:#cfd6e6;background:rgba(255,255,255,.02)}
.badge .dot{width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 18px var(--brand)}
h1{font-size: clamp(36px, 6vw, 64px);margin:12px 0 8px;letter-spacing:.5px;line-height:1.05}
.sub{font-size: clamp(16px, 2.4vw, 21px);color:#dbe3f6;max-width:900px}
.eyebrow{color:#9fb0d6;text-transform:uppercase;letter-spacing:2px;font-weight:700;font-size:12px}
.kpis{display:grid;width:100%;overflow:hidden;grid-template-columns: repeat(4, minmax(0,1fr));gap:14px;margin:28px 0 8px}
.kpi{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:16px 14px}
.kpi .big{font-size:24px;font-weight:800;color:#fff;overflow-wrap:normal;word-break:normal;hyphens:none;line-height:1.15}

/* Interstitial koans */
.koan{padding:18px 0; text-align:center}
.koan .phrase{display:inline-block; padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02); color:#dfe8ff; font-size:14px}
.fade-in{animation: fadeIn 900ms ease both}
@keyframes fadeIn{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)} }

.grid{display:grid;grid-template-columns: repeat(3, minmax(0,1fr));gap:16px;margin:28px 0}
.card{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:18px;box-shadow: var(--stroke-inset), var(--shadow-1); position:relative}
.card h3{margin:8px 0 6px}
.card p{color:#d7e0f2}

/* Animated connections between branch cards */
#branch-connections{position:absolute; inset:0; pointer-events:none; opacity:.6}

.pill{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(100,150,255,.08);border:1px solid rgba(100,150,255,.25);color:#e6f0ff;font-size:12px}
.cta{display:flex;gap:14px;margin-top:12px;flex-wrap:wrap}

.section{padding:42px 0;border-top:1px solid rgba(255,255,255,.06); position:relative}
.section--dark{
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(100,150,255,.05), transparent),
    linear-gradient(180deg, #0e1118 0%, #0b0d12 100%);
}
.section--dark .container{position:relative}
.section--dark .card{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.08)}
.section--dark h2{color:#fff}
.section--dark p,.section--dark li,.section--dark .small{color:#e6eaf6}
.section--dark figcaption.small{color:#dbe5ff}
.section--dark .list li{border-color: rgba(255,255,255,.1)}
.list{display:grid;grid-template-columns: repeat(2, minmax(0,1fr));gap:12px}
.list li{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:12px}
.small{font-size:13px;color:#aab4c6}

/* Glossary drawer */
.glossary{position:fixed; right:16px; bottom:16px; z-index:20}
.glossary__panel{position:fixed; right:16px; top:16px; width:min(380px,92vw); max-height:88vh; overflow:auto; background:rgba(9,12,18,.9); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:16px; display:none; backdrop-filter: blur(8px)}
.glossary__panel.open{display:block}
.glossary__badge{display:inline-flex; gap:8px; align-items:center; border:1px solid rgba(255,255,255,.08); padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.02); cursor:pointer}
.glossary__panel h3{margin:6px 0 10px}
.glossary__panel dl{margin:0}
.glossary__panel dt{font-weight:700; margin-top:10px}
.glossary__panel dd{margin:4px 0 10px; color:#d3ddf2}

/* Footer pulse */
.footer { background-color: #1E2433; color: #E6EBF5; border-top: 1px solid rgba(255,255,255,0.1); }
.footer { background-color: #1E2433; color: #E6EBF5; border-top: 1px solid rgba(255,255,255,0.1); }
.footer { background-color: #1E2433; color: #E6EBF5; border-top: 1px solid rgba(255,255,255,0.1); }
@keyframes pulse{0%,100%{opacity:.75}50%{opacity:1}}
.footer { background-color: #1E2433; color: #E6EBF5; border-top: 1px solid rgba(255,255,255,0.1); }
@media (min-width:800px){.footer { background-color: #1E2433; color: #E6EBF5; border-top: 1px solid rgba(255,255,255,0.1); }}

img{max-width:100%;height:auto;display:block;border-radius:12px}
.section::before{content:""; position:absolute; inset:0; background-image: var(--fieldlines); background-size:cover;background-position:center; opacity:.06; pointer-events:none}

@media (max-width:900px){
  .grid{grid-template-columns:1fr 1fr}
  .kpis{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width:640px){
  .grid{grid-template-columns:1fr}
  .list{grid-template-columns:1fr}
  .nav{padding:12px 0}
  h1{margin-top:6px}
  .sub{font-size:16px}
  .button,button{padding:10px 12px}
}
@media (max-width:380px){
  .kpi{padding:14px 12px}
  .kpi .big{font-size:20px}
}
@media (prefers-reduced-motion: reduce){
  .hero{filter: brightness(1) saturate(1.02); animation: heroOsc 18s ease-in-out infinite;animation:none}
  .footer { background-color: #1E2433; color: #E6EBF5; border-top: 1px solid rgba(255,255,255,0.1); }
}

@keyframes breathe {
  0%,100% { transform: scale(0.98); opacity:.65 }
  50% { transform: scale(1.02); opacity:.85 }
}

/* Accent serif fallback for warmth (swap to custom when available) */
h1, .koan .phrase { font-family: ui-serif, Georgia, 'Times New Roman', serif; }

/* Glyph placement helpers (optional use) */
.glyph { width:48px; height:48px; opacity:.85; vertical-align:middle }

.koan{padding:22px 0; text-align:center; background: linear-gradient(180deg, rgba(10,12,18,.85), rgba(10,12,18,.9)); border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06)}
.koan .phrase{color:#eef3ff; background: rgba(120,160,255,.10); border-color: rgba(120,160,255,.35)}

footer a { color: #B9C3D6; } footer a:hover { color: #88A8FF; }