/* =====================================================================
   NSG — спільна база для концептів головної.
   Локальні шрифти (Rubik variable + IBM Plex Mono) і дизайн-токени.
   Кожен концепт додає власні стилі поверх цього.
   ===================================================================== */

/* ---- Fonts ---- */
picture{display:contents}
@font-face{font-family:"Rubik";src:url("../fonts/Rubik-VariableFont_wght.ttf") format("truetype");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"Rubik";src:url("../fonts/Rubik-Italic-VariableFont_wght.ttf") format("truetype");font-weight:300 900;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/IBMPlexMono-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/IBMPlexMono-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/IBMPlexMono-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}

:root{
  /* Brand */
  --cyan-light:#7BD7F7; --cyan:#4AC6F1; --cyan-mid:#169AC4; --cyan-deep:#0F7DA0;
  --teal:#007299; --teal-deep:#005855; --ink:#001824; --white:#fff;
  --yellow:#FFDB2E; --orange:#F38B45; --coral:#F05F64;
  --g50:#FAFBFB; --g100:#F1F2F2; --g200:#E4E6E7; --g300:#C8CCCE;
  --g500:#7B8285; --g700:#3F4548; --g900:#1A1D1F;
  /* Type */
  --font:"Rubik",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --ease:cubic-bezier(.2,0,.2,1);
  --maxw:1200px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--font);margin:0;text-wrap:balance}
p{text-wrap:pretty}

/* ---- Concept switcher (top bar, shared) ---- */
.cswitch{position:fixed;left:0;right:0;top:0;z-index:200;height:46px;
  display:flex;align-items:center;gap:0;background:#000c12;
  border-bottom:1px solid rgba(255,255,255,.1);font-family:var(--mono);
  padding:0 14px}
.cswitch .cs-label{font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.42);margin-right:6px;white-space:nowrap}
.cswitch .cs-links{display:flex;gap:2px;align-items:center}
.cswitch a{font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.6);padding:7px 13px;border-radius:2px;
  text-decoration:none;transition:.18s var(--ease);white-space:nowrap;line-height:1}
.cswitch a:hover{color:#fff;background:rgba(255,255,255,.07)}
.cswitch a.on{color:var(--ink);background:var(--cyan)}
.cswitch .cs-num{opacity:.55;margin-right:6px}
.cswitch a.on .cs-num{opacity:.8}
.cswitch .cs-spacer{flex:1}
.cswitch .cs-note{font-size:10px;letter-spacing:.1em;color:rgba(255,255,255,.32);
  text-transform:uppercase;white-space:nowrap}
@media(max-width:760px){
  .cswitch .cs-label,.cswitch .cs-note{display:none}
  .cswitch a{padding:7px 10px}
}
/* концепти зміщені вниз під свитчер */
body.has-cswitch{padding-top:46px}