/* ============================================================
   QANOT — technical design system
   Instrument panel, not brochure. Mono is the primary voice;
   the sans exists only to carry running prose.

   Accent discipline: cyan is THE accent. Amber / green / magenta
   appear ONLY as data-series encodings inside charts, never as
   decoration — so the page has one loud colour, not four.
   ============================================================ */

:root{
  color-scheme: dark;

  /* ground */
  --void:      #04060B;
  --panel:     #080C14;
  --panel-2:   #0C1220;
  --panel-3:   #121A2B;

  /* structure */
  --line:      rgba(112,134,166,.16);
  --line-2:    rgba(112,134,166,.28);
  --grid:      rgba(0,217,255,.055);

  /* accent */
  --cyan:      #00D9FF;
  --cyan-2:    #7BE9FF;
  --cyan-dim:  rgba(0,217,255,.14);
  --cyan-edge: rgba(0,217,255,.42);

  /* data-series only */
  --amber:     #FFA23D;
  --green:     #35F5A8;
  --magenta:   #FF4D8F;
  --violet:    #9D7BFF;

  /* type colour */
  --text:      #DCE6F2;
  --text-2:    #9FB0C6;
  --muted:     #66788F;
  --dim:       #43536A;

  --mono: ui-monospace, "Cascadia Mono", "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: "Segoe UI Variable Text", "SF Pro Text", system-ui, -apple-system, Roboto, sans-serif;

  --gut: clamp(16px, 3.4vw, 52px);
  --rail: 232px;
  --max: 1560px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:96px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--void);
  color:var(--text);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Ambient field: the drifting grid + particles canvas sits behind everything. */
#field{
  position:fixed; inset:0; z-index:0;
  pointer-events:none;
  opacity:.9;
}

/* Scanlines — very low amplitude. Enough to read as a screen, not a costume. */
body::before{
  content:""; position:fixed; inset:0; z-index:98; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.22) 2px 3px);
  opacity:.32;
  mix-blend-mode:multiply;
}

/* ---------- HUD frame ---------- */
.hud-corner{
  position:fixed; z-index:97; width:18px; height:18px;
  border:1px solid var(--cyan-edge); pointer-events:none;
}
.hud-corner.tl{ top:10px; left:10px; border-right:0; border-bottom:0; }
.hud-corner.tr{ top:10px; right:10px; border-left:0;  border-bottom:0; }
.hud-corner.bl{ bottom:10px; left:10px; border-right:0; border-top:0; }
.hud-corner.br{ bottom:10px; right:10px; border-left:0; border-top:0; }
@media (max-width:760px){ .hud-corner{ display:none; } }

/* ---------- top bar ---------- */
.bar{
  position:fixed; inset:0 0 auto 0; z-index:90;
  height:52px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:0 var(--gut);
  background:rgba(4,6,11,.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  font-family:var(--mono);
}
.bar-l,.bar-r{ display:flex; align-items:center; gap:18px; min-width:0; }
.mark{
  display:flex; align-items:center; gap:9px;
  text-decoration:none; color:var(--text); flex:none;
  font-size:.82rem; letter-spacing:.26em; text-transform:uppercase;
}
.mark svg{ width:24px; height:18px; flex:none; }
.mark b{ font-weight:600; }
.mark i{ font-style:normal; color:var(--cyan); letter-spacing:.14em; }

.telemetry{
  display:flex; gap:16px; font-size:.62rem; letter-spacing:.13em;
  color:var(--dim); text-transform:uppercase; white-space:nowrap;
}
.telemetry b{ color:var(--muted); font-weight:400; }
.telemetry .live{ color:var(--green); }
.telemetry .live::before{
  content:"●"; margin-right:5px; font-size:.7em; vertical-align:1px;
  animation:blip 2.4s steps(1,end) infinite;
}
@keyframes blip{ 0%,70%{opacity:1} 71%,100%{opacity:.25} }
@media (max-width:1180px){ .telemetry{ display:none; } }

.bar-nav{ display:flex; gap:20px; }
.bar-nav a{
  font-size:.66rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; padding:4px 0;
  border-bottom:1px solid transparent;
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
.bar-nav a:hover,.bar-nav a[aria-current="page"]{ color:var(--cyan); border-color:var(--cyan-edge); }
@media (max-width:900px){ .bar-nav{ display:none; } }

.bar-cta{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--void); background:var(--cyan); text-decoration:none;
  padding:8px 15px; white-space:nowrap;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  transition:background .18s var(--ease);
}
.bar-cta:hover{ background:var(--cyan-2); }

/* ---------- section index rail ---------- */
.rail{
  position:fixed; left:var(--gut); top:50%; transform:translateY(-50%);
  z-index:88; margin:0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:3px;
  font-family:var(--mono);
}
.rail a{
  display:flex; align-items:center; gap:9px;
  font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); text-decoration:none; padding:3px 0;
  transition:color .2s var(--ease);
}
.rail .n{ color:inherit; opacity:.6; font-variant-numeric:tabular-nums; }
.rail .b{
  width:0; height:1px; background:currentColor;
  transition:width .28s var(--ease);
}
.rail a:hover{ color:var(--text-2); }
.rail a[aria-current="true"]{ color:var(--cyan); }
.rail a[aria-current="true"] .b{ width:16px; }
@media (max-width:1400px){ .rail{ display:none; } }

/* ---------- layout ---------- */
.wrap{
  position:relative; z-index:1;
  max-width:var(--max); margin-inline:auto;
  padding-inline:var(--gut);
}
.sec{
  position:relative; z-index:1;
  padding-block:clamp(56px,7vw,116px);
  border-top:1px solid var(--line);
}
.sec:first-of-type{ border-top:0; }

.sec-head{
  display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
  margin-bottom:clamp(22px,3vw,40px);
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.sec-id{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--cyan); white-space:nowrap;
}
.sec-note{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--dim); margin-left:auto;
}

/* ---------- type ---------- */
h1,h2,h3,h4{ margin:0; font-weight:600; text-wrap:balance; }
h1{
  font-size:clamp(2.3rem,5.4vw,4.3rem); line-height:1.02;
  letter-spacing:-.028em;
}
h2{
  font-size:clamp(1.55rem,3vw,2.5rem); line-height:1.08;
  letter-spacing:-.022em;
}
h3{ font-size:1.02rem; letter-spacing:-.008em; }
h4{
  font-family:var(--mono); font-size:.66rem; font-weight:500;
  letter-spacing:.19em; text-transform:uppercase; color:var(--cyan);
}
p{ margin:0; }
.lede{
  font-size:clamp(1rem,1.3vw,1.16rem); line-height:1.66;
  color:var(--text-2); max-width:62ch;
}
.prose{ color:var(--text-2); max-width:70ch; display:flex; flex-direction:column; gap:15px; }
.prose strong{ color:var(--text); font-weight:600; }
.kbd{
  font-family:var(--mono); font-size:.88em; color:var(--cyan);
  background:var(--cyan-dim); padding:1px 6px; border:1px solid var(--cyan-edge);
}
a{ color:var(--cyan); text-decoration-color:var(--cyan-edge); text-underline-offset:3px; }
a:hover{ color:var(--cyan-2); }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }

.mono{ font-family:var(--mono); }
.num{ font-variant-numeric:tabular-nums; }

/* ---------- panels ---------- */
.panel{
  position:relative;
  background:linear-gradient(180deg, rgba(12,18,32,.72), rgba(8,12,20,.72));
  border:1px solid var(--line);
  padding:clamp(16px,1.8vw,24px);
}
.panel::before,.panel::after{
  content:""; position:absolute; width:7px; height:7px;
  border-color:var(--cyan-edge); border-style:solid;
}
.panel::before{ top:-1px; left:-1px; border-width:1px 0 0 1px; }
.panel::after{ bottom:-1px; right:-1px; border-width:0 1px 1px 0; }

.grid{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.grid > *{ background:var(--panel); padding:clamp(15px,1.7vw,22px); }
.g2{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.g3{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.g4{ grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); }

/* ---------- stat readouts ---------- */
.readout{ display:flex; flex-direction:column; gap:7px; }
.readout .v{
  font-family:var(--mono); font-size:clamp(1.5rem,2.7vw,2.3rem);
  line-height:1; color:var(--cyan); font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
.readout .v.amber{ color:var(--amber); }
.readout .v.green{ color:var(--green); }
.readout .v.magenta{ color:var(--magenta); }
.readout .k{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--muted);
}
.readout .sub{ font-size:.8rem; color:var(--dim); line-height:1.45; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  padding:12px 22px; text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
}
.btn-p{ background:var(--cyan); color:var(--void); }
.btn-p:hover{ background:var(--cyan-2); color:var(--void); }
.btn-g{ border-color:var(--line-2); color:var(--text); background:rgba(12,18,32,.5); }
.btn-g:hover{ border-color:var(--cyan); color:var(--cyan); }
.btns{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- tables ---------- */
.tbl-wrap{ overflow-x:auto; border:1px solid var(--line); }
table.data{
  width:100%; border-collapse:collapse;
  font-family:var(--mono); font-size:.78rem;
}
table.data th,table.data td{
  text-align:left; padding:10px 14px;
  border-bottom:1px solid var(--line); white-space:nowrap;
}
table.data thead th{
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cyan); font-weight:500;
  background:var(--panel-2); position:sticky; top:0;
}
table.data td{ color:var(--text-2); }
table.data td.n{ text-align:right; font-variant-numeric:tabular-nums; color:var(--text); }
table.data tbody tr:hover td{ background:rgba(0,217,255,.04); }
table.data td.w{ white-space:normal; min-width:230px; color:var(--muted); }

/* ---------- chart shell ---------- */
.chart{
  position:relative;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(12,18,32,.6),rgba(6,9,16,.6));
}
.chart-head{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  padding:13px 16px; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:.62rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--muted);
}
.chart-head b{ color:var(--text); font-weight:500; letter-spacing:.1em; }
.chart-head .src{ margin-left:auto; color:var(--dim); text-transform:none; letter-spacing:.04em; }
.chart canvas{ display:block; width:100%; }
.legend{
  display:flex; flex-wrap:wrap; gap:7px 20px;
  padding:11px 16px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.62rem; color:var(--muted);
  letter-spacing:.07em;
}
.legend i{ width:9px; height:9px; display:inline-block; margin-right:7px; vertical-align:-1px; }

/* ---------- callouts ---------- */
.note{
  border-left:2px solid var(--amber);
  background:rgba(255,162,61,.055);
  padding:13px 17px; font-size:.86rem; color:var(--text-2);
}
.note b{ color:var(--amber); }
.note.cy{ border-color:var(--cyan); background:var(--cyan-dim); }
.note.cy b{ color:var(--cyan); }

.tag{
  display:inline-block; font-family:var(--mono); font-size:.58rem;
  letter-spacing:.15em; text-transform:uppercase;
  padding:3px 8px; border:1px solid var(--line-2); color:var(--muted);
}
.tag.cy{ border-color:var(--cyan-edge); color:var(--cyan); }
.tag.am{ border-color:rgba(255,162,61,.4); color:var(--amber); }
.tag.gr{ border-color:rgba(53,245,168,.4); color:var(--green); }

/* ---------- scroll reveal ---------- */
[data-rise]{
  opacity:0; transform:translateY(16px);
  transition:opacity .62s var(--ease), transform .62s var(--ease);
}
[data-rise].in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  [data-rise]{ opacity:1 !important; transform:none !important; transition:none; }
  *,*::before,*::after{ animation-duration:.001ms !important; }
}

/* ---------- footer ---------- */
.foot{
  position:relative; z-index:1;
  border-top:1px solid var(--line);
  background:var(--panel);
  padding:clamp(40px,5vw,72px) var(--gut) 28px;
}
.foot-in{ max-width:var(--max); margin-inline:auto; }
.foot-grid{ display:grid; gap:clamp(24px,3.4vw,48px); grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.foot h4{ margin-bottom:13px; color:var(--muted); }
.foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.foot a{ color:var(--text-2); text-decoration:none; font-size:.86rem; }
.foot a:hover{ color:var(--cyan); }
.foot-base{
  margin-top:clamp(30px,4vw,52px); padding-top:20px;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:14px 30px; justify-content:space-between;
}
.disc{ font-size:.72rem; line-height:1.6; color:var(--dim); max-width:74ch; }
.foot-legal{ display:flex; gap:18px; flex-wrap:wrap; }
.foot-legal a{ font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

.skip{
  position:absolute; left:10px; top:-60px; z-index:200;
  background:var(--cyan); color:var(--void);
  padding:10px 16px; font:600 .8rem/1 var(--sans); text-decoration:none;
}
.skip:focus{ top:10px; }