/* Layout: dark instrument-panel brand bar + hero with a live gauge register; sections alternate plain ground and raised panels. */
:root{
  --navy:#02060F;           /* logo ground, header/footer always */
  --bg:#F5F6F8; --surface:#FFFFFF; --raise:#ECEEF2;
  --fg:#0B1220; --muted:#566074; --line:#D8DCE3;
  --gold:#F4B91E; --gold-ink:#8A6200; --red:#E3161B;
  --ok:#1C9A55; --warn:#E08A00; --bad:#D92D2D;
  --f-display:"Montserrat",system-ui,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#070C17; --surface:#0E1524; --raise:#131C2E; --fg:#E9EDF4; --muted:#95A0B5; --line:#223049;
  --gold-ink:#F4B91E; --ok:#35C177; --warn:#F2A33A; --bad:#F05252; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#070C17; --surface:#0E1524; --raise:#131C2E; --fg:#E9EDF4; --muted:#95A0B5; --line:#223049;
  --gold-ink:#F4B91E; --ok:#35C177; --warn:#F2A33A; --bad:#F05252; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{background:var(--bg);color:var(--fg);font:16px/1.6 var(--f-body);margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.wrap{max-width:1160px;margin:0 auto;padding-inline:clamp(16px,4vw,32px)}
h1,h2,h3{font-family:var(--f-display);line-height:1.15;text-wrap:balance;margin:0}
h2{font-size:clamp(1.7rem,3.2vw,2.4rem);font-weight:700;letter-spacing:-.01em}
h3{font-size:1.1rem;font-weight:700}
p{margin:0}
.eyebrow{font:600 .75rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.lede{color:var(--muted);max-width:62ch;font-size:1.05rem}
section{padding-block:clamp(56px,8vw,96px)}
.sec-head{display:grid;gap:14px;margin-bottom:40px}

/* header — always brand navy */
header.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--navy);color:#fff;border-bottom:1px solid #1a2233}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{height:50px;width:auto;display:block}
nav.main{display:flex;gap:26px;align-items:center;font:500 .92rem var(--f-body)}
nav.main a{text-decoration:none;color:#C9D1DF}
nav.main a:hover{color:#fff}
.btn{display:inline-flex;align-items:center;gap:8px;font:600 .95rem var(--f-body);padding:12px 20px;border-radius:8px;text-decoration:none;border:1px solid transparent;cursor:pointer}
.btn-gold{background:var(--gold);color:#1B1400}
.btn-gold:hover{background:#FFCB3D}
.btn-ghost{border-color:#3a4660;color:#fff}
.btn-ghost:hover{border-color:#6c7a96}
.menu-btn{display:none;background:none;border:1px solid #3a4660;color:#fff;border-radius:8px;padding:8px 12px;font:600 .85rem var(--f-body)}
@media (max-width:860px){
  nav.main{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--navy);padding:8px 16px 16px;border-bottom:1px solid #1a2233}
  nav.main.open{display:flex}
  nav.main a{padding:12px 0;border-bottom:1px solid #1a2233}
  nav.main .btn{margin-top:12px;justify-content:center}
  .menu-btn{display:block}
}

/* hero — navy band */
.hero{background:var(--navy);color:#fff;padding-block:clamp(48px,7vw,88px) clamp(56px,8vw,96px);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;right:-180px;top:-220px;width:620px;height:620px;border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 100%,transparent 0 38px,rgba(244,185,30,.07) 38px 60px);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center;position:relative}
.hero-grid > *{min-width:0}
.hero .eyebrow{color:var(--gold)}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.5rem);font-weight:800;letter-spacing:-.02em;margin-block:18px 20px}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero h1 .m{color:var(--red)}
.hero p.lede{color:#AFB9CB}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.proof{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:34px;font:500 .8rem var(--f-mono);color:#8D98AE}
.proof span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-right:8px;vertical-align:middle}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}

/* gauge register mock */
.panel{background:#0B1322;border:1px solid #1f2b42;border-radius:14px;box-shadow:0 30px 60px -30px rgba(0,0,0,.8);overflow:hidden}
.panel-top{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #1f2b42;font:500 .78rem var(--f-mono);color:#8D98AE}
.dots{display:flex;gap:6px}.dots i{width:9px;height:9px;border-radius:50%;background:#2a3650;display:block}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid #1f2b42}
.kpi{padding:14px 16px;border-right:1px solid #1f2b42}.kpi:last-child{border-right:0}
.kpi b{display:block;font:600 1.5rem var(--f-display);font-variant-numeric:tabular-nums}
.kpi small{font:500 .7rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#8D98AE}
.kpi.ok b{color:#35C177}.kpi.warn b{color:#F2A33A}.kpi.bad b{color:#F05252}
.tbl-wrap{overflow-x:auto}
table.reg{width:100%;border-collapse:collapse;font:400 .8rem var(--f-mono);font-variant-numeric:tabular-nums;min-width:440px}
.reg th{text-align:left;font-weight:500;color:#6F7B93;padding:10px 16px;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}
.reg td{padding:10px 16px;border-top:1px solid #172238;color:#D3DAE6;white-space:nowrap}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:99px;font-size:.7rem;font-weight:500}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.p-ok{color:#35C177;background:rgba(53,193,119,.12)}
.p-warn{color:#F2A33A;background:rgba(242,163,58,.12)}
.p-bad{color:#F05252;background:rgba(240,82,82,.13)}
.panel-foot{padding:10px 16px;border-top:1px solid #1f2b42;font:400 .72rem var(--f-mono);color:#6F7B93;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.pillar{background:var(--surface);padding:28px 24px;display:grid;gap:10px;align-content:start}
.pillar .n{font:700 2rem var(--f-display);color:var(--gold-ink)}
.pillar p{color:var(--muted);font-size:.95rem}
@media (max-width:900px){.pillars{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.pillars{grid-template-columns:1fr}}

/* features */
.alt{background:var(--raise)}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 32px}
.feat{display:grid;gap:8px;align-content:start;padding-top:18px;border-top:2px solid var(--line)}
.feat p{color:var(--muted);font-size:.95rem}
.feat .tag{font:500 .7rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
@media (max-width:900px){.feat-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.feat-grid{grid-template-columns:1fr}}
.legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.legend .pill{font-family:var(--f-mono)}
.l-ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 13%,transparent)}
.l-warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent)}
.l-bad{color:var(--bad);background:color-mix(in srgb,var(--bad) 13%,transparent)}

/* MSA */
.msa-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,56px);align-items:start}
.msa-grid > *{min-width:0}
.studies{display:grid;gap:0;border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.study{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:18px 20px;border-top:1px solid var(--line)}
.study:first-child{border-top:0}
.study b{font:700 .95rem var(--f-display)}
.study span.sub{display:block;font:400 .72rem var(--f-mono);color:var(--muted);margin-top:2px}
.study p{color:var(--muted);font-size:.93rem}
@media (max-width:900px){.msa-grid{grid-template-columns:1fr}}
@media (max-width:480px){.study{grid-template-columns:1fr;gap:6px}}
.grr{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;margin-top:28px}
.grr h3{margin-bottom:6px}
.grr .cap{color:var(--muted);font-size:.88rem;margin-bottom:22px}
.scale{position:relative;height:14px;border-radius:7px;display:grid;grid-template-columns:10fr 20fr 20fr;overflow:hidden}
.scale i{display:block}
.scale i:nth-child(1){background:var(--ok)}.scale i:nth-child(2){background:var(--warn)}.scale i:nth-child(3){background:var(--bad)}
.ticks{position:relative;height:22px;font:500 .72rem var(--f-mono);color:var(--muted);margin-top:6px}
.ticks span{position:absolute;transform:translateX(-50%)}
.ticks span:first-child{transform:none}.ticks span:last-child{transform:translateX(-100%)}
.zones{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px;font-size:.85rem}
.zones b{display:block;font:600 .8rem var(--f-mono)}
.zones div:nth-child(1) b{color:var(--ok)}.zones div:nth-child(2) b{color:var(--warn)}.zones div:nth-child(3) b{color:var(--bad)}
.zones span{color:var(--muted)}
.marker{position:absolute;top:-8px;left:14%;width:2px;height:30px;background:var(--fg)}
.marker::after{content:"GRR 7.1%";position:absolute;bottom:34px;left:50%;transform:translateX(-50%);font:600 .7rem var(--f-mono);white-space:nowrap;background:var(--fg);color:var(--bg);padding:2px 6px;border-radius:4px}
.scale-box{position:relative;margin-top:36px}

/* standards strip */
.standards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.std{padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.std code{font:600 .95rem var(--f-mono);color:var(--fg);display:block;margin-bottom:6px}
.std p{color:var(--muted);font-size:.88rem}
@media (max-width:900px){.standards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.standards{grid-template-columns:1fr}}

/* about */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,64px);align-items:start}
.about-grid > *{min-width:0}
.about-copy{display:grid;gap:18px}
.about-copy p{color:var(--muted);max-width:62ch}
.quote{font:600 1.35rem/1.35 var(--f-display);color:var(--fg);border-left:3px solid var(--gold);padding-left:18px}
.facts{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--line);gap:1px}
.fact{background:var(--surface);padding:22px}
.fact b{display:block;font:700 1.7rem var(--f-display);font-variant-numeric:tabular-nums}
.fact span{color:var(--muted);font-size:.86rem}
@media (max-width:900px){.about-grid{grid-template-columns:1fr}}

/* cta + contact */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,64px)}
.contact-grid > *{min-width:0}
.addr{display:grid;gap:18px;margin-top:28px}
.addr div{display:grid;gap:4px}
.addr small{font:500 .7rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
form.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:clamp(20px,3vw,32px);display:grid;gap:16px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.row2{grid-template-columns:1fr}}
label{display:grid;gap:6px;font:500 .85rem var(--f-body)}
input,select,textarea{font:400 .95rem var(--f-body);color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:11px 12px;width:100%}
textarea{min-height:110px;resize:vertical}
.note{font-size:.85rem;color:var(--ok)}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}

footer{background:var(--navy);color:#AFB9CB;padding-block:48px 28px}
.foot{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center}
.foot img{height:92px;width:auto}
.foot .tagline{font:500 1rem var(--f-display);color:#fff}
.foot .tagline em{font-style:normal;color:var(--gold)}
.foot nav{display:flex;gap:18px;flex-wrap:wrap;font-size:.9rem}
.foot nav a{text-decoration:none}
.legal{border-top:1px solid #1a2233;margin-top:32px;padding-top:20px;font:400 .78rem var(--f-mono);color:#6F7B93;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media (max-width:760px){.foot{grid-template-columns:1fr}}

/* form messages added for the PHP version */
.note.err{color:var(--bad)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}