:root { color-scheme:dark; --bg:#061725; --panel:#0a2032; --ink:#f1f6f8; --muted:#91a8b8; --line:rgba(163,199,219,.18); --accent:#82c8f5; --signal:#69ddb1; --warn:#f1bd68; }
* { box-sizing:border-box; }
html { background:var(--bg); scroll-behavior:smooth; }
body { min-width:320px; margin:0; background:radial-gradient(circle at 78% 18%,rgba(130,200,245,.11),transparent 30%),var(--bg); color:var(--ink); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
.demo-header { min-height:5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem clamp(1.2rem,5vw,5rem); border-bottom:1px solid var(--line); background:rgba(6,23,37,.88); }
.demo-brand { display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.demo-brand img { width:2.25rem; height:2.25rem; object-fit:contain; }
.demo-brand span { display:grid; gap:.15rem; }
.demo-brand strong { font:900 .7rem "Arial Narrow",sans-serif; letter-spacing:.18em; }
.demo-brand small { color:var(--muted); font-size:.58rem; }
.demo-nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.5rem; }
.demo-nav a { padding:.55rem .7rem; border:1px solid var(--line); color:var(--muted); font-size:.58rem; font-weight:800; text-decoration:none; text-transform:uppercase; }
.demo-nav a:hover,.demo-nav a[aria-current="page"] { border-color:var(--accent); color:var(--ink); }
main { width:min(100% - 2rem,78rem); margin:auto; }
.demo-hero { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(18rem,.9fr); gap:clamp(2rem,7vw,7rem); align-items:end; padding:clamp(4rem,9vw,8rem) 0 clamp(2.5rem,6vw,5rem); }
.eyebrow { margin:0; color:var(--accent); font:900 .65rem "Arial Narrow",sans-serif; letter-spacing:.15em; text-transform:uppercase; }
.demo-hero h1 { max-width:49rem; margin:1rem 0 0; font:900 clamp(3rem,7vw,6.7rem)/.92 "Arial Narrow",sans-serif; letter-spacing:-.045em; }
.demo-hero-copy { color:var(--muted); font-size:clamp(.9rem,1.4vw,1.05rem); line-height:1.8; }
.demo-hero-copy strong { display:block; margin-bottom:1rem; color:var(--ink); font-size:1.05rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.5rem; }
.hero-actions a { padding:.8rem 1rem; border:1px solid var(--accent); color:var(--accent); font-size:.65rem; font-weight:900; letter-spacing:.07em; text-decoration:none; text-transform:uppercase; }
.hero-actions a:first-child { background:var(--accent); color:var(--bg); }
.video-panel { padding:clamp(1rem,2vw,1.5rem); border:1px solid var(--line); background:rgba(10,32,50,.82); box-shadow:0 30px 90px rgba(0,0,0,.28); }
.video-panel-head { display:flex; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.video-panel-head strong { font:900 .75rem "Arial Narrow",sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.video-panel-head span { color:var(--warn); font-size:.58rem; text-transform:uppercase; }
video { width:100%; display:block; border:1px solid var(--line); background:#03101a; aspect-ratio:16/9; }
.video-caption { margin:.9rem 0 0; color:var(--muted); font-size:.7rem; line-height:1.6; }
.metric-row { display:grid; grid-template-columns:repeat(5,1fr); margin:1rem 0 0; border:1px solid var(--line); }
.metric-row div { min-height:7rem; display:grid; align-content:center; gap:.5rem; padding:1rem; border-right:1px solid var(--line); background:rgba(10,32,50,.62); }
.metric-row div:last-child { border-right:0; }
.metric-row span { color:var(--muted); font-size:.56rem; letter-spacing:.08em; text-transform:uppercase; }
.metric-row strong { font:900 1.7rem "Arial Narrow",sans-serif; }
.framework { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,6vw,6rem); padding:clamp(4rem,8vw,7rem) 0; }
.framework h2 { margin:1rem 0 0; font:900 clamp(2.2rem,5vw,4.7rem)/.95 "Arial Narrow",sans-serif; letter-spacing:-.04em; }
.framework-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.framework-grid article { min-height:11rem; padding:1.4rem; background:var(--panel); }
.framework-grid span { color:var(--accent); font-size:.6rem; font-weight:900; letter-spacing:.1em; }
.framework-grid h3 { margin:.8rem 0; font:900 1rem "Arial Narrow",sans-serif; text-transform:uppercase; }
.framework-grid p { margin:0; color:var(--muted); font-size:.75rem; line-height:1.65; }
.demo-footer { display:flex; justify-content:space-between; gap:1rem; padding:1.3rem clamp(1.2rem,5vw,5rem); border-top:1px solid var(--line); color:var(--muted); font-size:.6rem; }
@media(max-width:850px){.demo-hero,.framework{grid-template-columns:1fr}.metric-row{grid-template-columns:1fr 1fr}.metric-row div{border-bottom:1px solid var(--line)}.demo-nav{display:none}}
@media(max-width:540px){.metric-row,.framework-grid{grid-template-columns:1fr}.demo-hero h1{font-size:3rem}.demo-footer{display:grid}}

/* Institutional-light category pages */
:root { color-scheme:light; --bg:#f2f5f6; --panel:#ffffff; --ink:#10283c; --muted:#607483; --line:rgba(29,64,87,.16); --accent:#17699a; --signal:#168768; --warn:#9a6814; }
html { background:var(--bg); }
body { background:linear-gradient(145deg,#f8fafb 0%,#edf2f4 100%); color:var(--ink); }
.demo-header { position:sticky; top:0; z-index:10; min-height:5.5rem; border-bottom-color:rgba(184,212,228,.18); background:rgba(7,27,43,.97); color:#f1f6f8; box-shadow:0 8px 28px rgba(25,57,76,.09); }
.demo-brand small { color:#a5b7c3; }
.demo-nav a { border-color:rgba(184,212,228,.2); color:#a9bbc7; border-radius:2rem; }
.demo-nav a:hover,.demo-nav a[aria-current="page"] { border-color:#82c8f5; color:#f4f8fa; background:#102b40; }
.demo-hero { align-items:center; }
.demo-hero h1 { color:var(--ink); }
.demo-hero-copy strong { color:var(--ink); }
.hero-actions a { border-radius:.3rem; }
.hero-actions a:first-child { background:#17699a; color:#fff; }
.video-panel { border-radius:.55rem; background:#fff; box-shadow:0 24px 60px rgba(29,64,87,.09); }
.video-panel-head strong { color:var(--ink); }
video { border-radius:.35rem; border-color:rgba(29,64,87,.24); }
.metric-row { border-radius:.5rem; overflow:hidden; box-shadow:0 16px 45px rgba(29,64,87,.05); }
.metric-row div { background:#fff; }
.framework-grid { border-radius:.5rem; overflow:hidden; }
.framework-grid article { background:#fff; }
.framework-grid p { color:var(--muted); }
.demo-footer { background:#eaf0f2; }