/* Volnex — site styles. Fonts: Archivo, IBM Plex Sans, IBM Plex Mono (SIL Open Font License 1.1), served from this site. */

/* Archivo · latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(fonts/archivo-latin-ext-k3kQo8UD.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Archivo · latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(fonts/archivo-latin-k3kQo8UD.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono · latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-ext--F63fjpt.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono · latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-latin--F63fjpt.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono · latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-ext--F6qfjpt.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono · latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-latin--F6qfjpt.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans · latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-latin-ext-zYXzKVEl.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Sans · latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-latin-zYXzKVEl.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans · latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-latin-ext-zYXzKVEl.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Sans · latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-latin-zYXzKVEl.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans · latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-latin-ext-zYXzKVEl.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Sans · latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-latin-zYXzKVEl.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  /* brand: the two arrows of the X */
  --field: #4fb34a;          /* logo green: field / source */
  --biz: #0a9be6;            /* logo blue: business / target */
  --field-text: #74cf6e;     /* green readable on dark */
  --biz-text: #4cb8f2;       /* blue readable on dark */
  --mid-1: #2fae8e;          /* steps of the data journey */
  --mid-2: #1aa5bf;

  /* control-room ink */
  --ink-950: #070d13;
  --ink-900: #0b1520;
  --ink-850: #0f1b27;
  --ink-800: #13212e;
  --line: rgba(150, 185, 210, .13);
  --line-strong: rgba(150, 185, 210, .24);
  --text: #e7eef3;
  --text-muted: #93a4b2;
  --text-faint: #62788a;

  /* light section */
  --paper: #e9eff3;
  --paper-2: #dfe7ed;
  --paper-ink: #12202b;
  --paper-muted: #536677;
  --paper-line: rgba(18, 32, 43, .12);

  --warn: #e9a23b;

  --f-display: "Archivo", "Arial Narrow", sans-serif;
  --f-body: "IBM Plex Sans", "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "Consolas", monospace;

  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink-950);
  color: var(--text);
  font: 400 1.0625rem/1.65 var(--f-body);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--f-display); font-weight: 650; font-stretch: 84%; letter-spacing: -.018em; line-height: 1.06; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.mono { font-family: var(--f-mono); font-feature-settings: "zero" 1; }
.muted { color: var(--text-faint); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

:focus-visible { outline: 2px solid var(--biz-text); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--text); color: var(--ink-950); padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .82em 1.3em; border-radius: 10px;
  font: 600 .98rem/1 var(--f-body); text-decoration: none;
  transition: background-color .2s, border-color .2s, color .2s;
}
.btn-primary { color: var(--ink-950); background: var(--text); }
.btn-primary:hover { background: #fff; }
.btn-ghost { color: var(--text); border: 1px solid var(--line-strong); }
.btn-ghost:hover { border-color: var(--text-muted); }
.btn-sm { padding: .62em 1em; font-size: .9rem; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--ink-950);
  border-bottom: 1px solid var(--line);
}
.header-row { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand img { width: 150px; height: auto; }
.main-nav { margin-left: auto; }
.main-nav ul { display: flex; gap: 26px; }
.main-nav a { color: var(--text-muted); text-decoration: none; font-size: .95rem; }
.main-nav a:hover { color: var(--text); }
.nav-toggle { display: none; }
.main-nav a[aria-current="page"] { color: var(--text); }
.main-nav .has-sub { position: relative; }
.main-nav .sub {
  display: none; position: absolute; top: 100%; left: -18px; z-index: 30; width: 340px; margin-top: 14px; padding: 10px;
  flex-direction: column; gap: 0; border-radius: 8px;
  background: var(--ink-850); border: 1px solid var(--line-strong);
}
.main-nav .sub::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.main-nav .has-sub:hover > .sub, .main-nav .has-sub:focus-within > .sub { display: flex; }
.main-nav .sub a { display: block; padding: 8px 10px; border-radius: 4px; font-size: .9rem; line-height: 1.35; }
.main-nav .sub a:hover { background: rgba(150, 185, 210, .08); }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(44px, 6vw, 76px) 0 clamp(32px, 4vw, 48px);
}
.hero .wrap { position: relative; }
.hero-text { max-width: 1160px; }
.hero h1 {
  font-size: clamp(2.3rem, 5vw, 4.3rem);
  font-weight: 640; font-stretch: 78%;
  line-height: 1.02; letter-spacing: -.022em;
  color: var(--text-muted);
}
.hero h1 .t-field { color: var(--field-text); }
.hero h1 .t-biz { color: var(--biz-text); }
.hero h1 .t-strong { display: block; color: var(--text); }
.hero-lead { margin-top: 22px; max-width: 780px; color: var(--text-muted); font-size: 1.08rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- junction (signature) ---------- */
.junction {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.12fr) 170px minmax(0, 1fr);
  align-items: start; gap: 0;
  margin-top: clamp(40px, 5vw, 56px);
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--ink-900);
}
.junction-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.junction-wires path { fill: none; stroke-width: 1; }
.junction-wires .w-field { stroke: rgba(79,179,74,.22); }
.junction-wires .w-biz { stroke: rgba(10,155,230,.24); }
.junction-wires .pkt-field { fill: var(--field-text); }
.junction-wires .pkt-biz { fill: var(--biz-text); }

.jz { position: relative; z-index: 1; }
.jz-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font: 600 .92rem/1 var(--f-body); color: var(--text);
}

.tags { width: 100%; border-collapse: collapse; font-size: .86rem; }
.tags tr { border-top: 1px solid var(--line); transition: background-color .6s; }
.tags tr:first-child { border-top: 0; }
.tags th, .tags td { padding: 9px 8px; text-align: left; white-space: nowrap; }
.tags th { font: 500 .8rem/1.2 var(--f-mono); color: var(--field-text); }
.tags .tag-desc { color: var(--text-muted); white-space: normal; }
.tags .tag-val { font-family: var(--f-mono); text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.tags .tag-unit { font-family: var(--f-mono); color: var(--text-faint); font-size: .76rem; width: 3.6em; }
.tags tr.is-hot { background: rgba(79,179,74,.10); transition: none; }

.jz-x { position: relative; z-index: 1; display: grid; place-items: center; align-self: center; }
.xmark { width: 112px; height: auto; overflow: visible; }
.xmark path { fill: none; stroke-width: 15; stroke-linejoin: round; }
.xmark .x-field { stroke: var(--field); }
.xmark .x-biz { stroke: var(--biz); mix-blend-mode: screen; }

.jz-biz { display: grid; gap: 10px; }
.jz-biz .jz-head { margin-bottom: 2px; }
.dest {
  padding: 12px 14px; border-radius: 6px;
  background: var(--ink-950);
  border: 1px solid var(--line);
  transition: border-color .6s;
}
.dest.is-hot { border-color: rgba(76,184,242,.7); transition: none; }
.dest-name { font-size: .86rem; font-weight: 600; color: var(--text); }
.dest-name span { margin-left: 6px; font-weight: 400; color: var(--text-faint); }
.dest-big { margin-top: 4px; font-size: 1.3rem; font-weight: 500; color: var(--biz-text); font-variant-numeric: tabular-nums; }
.dest-big small { font-size: .74rem; color: var(--text-faint); font-weight: 400; }
.dest-line { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; font-size: .76rem; color: var(--text-muted); }
.spark { width: 100%; height: 40px; margin: 6px 0 2px; }
.spark polyline { fill: none; stroke: var(--biz-text); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.spark circle { fill: var(--biz-text); }

/* ---------- intro ---------- */
.intro { padding: clamp(48px, 6vw, 80px) 0 clamp(56px, 7vw, 96px); }
.intro-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 6vw, 88px); align-items: start; }
.intro h2 { font-size: clamp(1.8rem, 3.4vw, 2.85rem); }
.intro p { color: var(--text-muted); padding-top: .4em; }

/* ---------- flow (light) ---------- */
.flow {
  position: relative;
  margin: 0 clamp(8px, 1.2vw, 16px);
  padding: clamp(56px, 7vw, 96px) 0 clamp(56px, 7vw, 88px);
  border-radius: 10px;
  background: var(--paper);
  color: var(--paper-ink);
}
.flow-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 40px; margin-bottom: 44px; }
.flow-head h2 { font-size: clamp(2rem, 4vw, 3.1rem); }
.flow-head p { max-width: 380px; color: var(--paper-muted); }

.flow-stages { position: relative; display: grid; grid-template-columns: repeat(var(--stages, 4), minmax(0, 1fr)); gap: 0; }
.flow-stages::before { /* the data line running through the stages */
  content: ""; position: absolute; left: 0; right: 0; top: 34px; height: 2px;
  background: linear-gradient(90deg, var(--field), var(--mid-1), var(--mid-2), var(--biz));
}
.stage { position: relative; padding: 0 22px 8px; border-left: 1px solid var(--paper-line); }
.stage:first-child { border-left: 0; padding-left: 0; }
.stage::before { /* node on the data line */
  content: ""; position: absolute; top: 29px; left: -6px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--c);
}
.stage:first-child::before { left: 0; }
.stage:last-child::after { /* arrow head at the end of the line */
  content: ""; position: absolute; right: -2px; top: 29px;
  border: 6px solid transparent; border-left: 9px solid var(--biz); border-right: 0;
}
.stage-name { margin-top: 6px; font-size: 1.35rem; font-weight: 640; color: var(--paper-ink); }
.flow-art { display: block; width: 240px; max-width: 100%; height: auto; margin: 30px 0 4px; overflow: visible; }
.fa-plate { fill: #f5f8fa; stroke: #9eadb9; stroke-width: 1; stroke-linejoin: round; }
.fa-top { fill: #fff; stroke: #657888; stroke-width: 1; stroke-linejoin: round; }
.fa-left { fill: #e4ebf0; stroke: #657888; stroke-width: 1; stroke-linejoin: round; }
.fa-right { fill: #d2dce4; stroke: #657888; stroke-width: 1; stroke-linejoin: round; }
.fa-accent { fill: var(--c); stroke: #657888; stroke-width: 1; stroke-linejoin: round; }
.fa-l { fill: none; stroke: #657888; stroke-width: 1; }
.fa-thin { stroke-width: .8; opacity: .7; }
.fa-dash { stroke-dasharray: 3 3; }
.fa-wire { fill: none; stroke: var(--c); stroke-width: 1.3; stroke-dasharray: 4 3; }
.fa-hot { fill: none; stroke: #d6393e; stroke-width: 2; }
.fa-acc-line { fill: none; stroke: var(--c); stroke-width: 1.8; stroke-linejoin: round; }
.fa-acc-dot { fill: var(--c); stroke: #fff; stroke-width: 1.2; }
.sol-list { margin-top: 18px; }
.sol-list li { padding: 14px 0; border-top: 1px solid var(--paper-line); }
.sol-list li:first-child { border-top: 0; }
.sol-list a {
  display: inline; font-weight: 600; font-size: 1rem; line-height: 1.35; color: var(--paper-ink);
  text-decoration: none; background-image: linear-gradient(var(--c, var(--biz)), var(--c, var(--biz)));
  background-size: 0 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .25s;
}
.sol-list a:hover { background-size: 100% 2px; }
.sol-list p { margin-top: 6px; font-size: .9rem; line-height: 1.5; color: var(--paper-muted); }


/* ---------- approach ---------- */
.approach { padding: clamp(72px, 9vw, 120px) 0; }
.approach-grid { display: grid; grid-template-columns: minmax(0, .74fr) minmax(0, 1.36fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.approach h2 { font-size: clamp(2rem, 4vw, 3.1rem); margin-bottom: 28px; }
.steps { position: relative; }
.steps::before { content: ""; position: absolute; left: 15px; top: 18px; bottom: 18px; width: 1px; background: var(--line-strong); }
.steps li { position: relative; padding: 4px 0; }
.steps button {
  display: flex; align-items: center; gap: 16px; width: 100%; padding: 10px 0;
  border: 0; background: none; color: var(--text-muted); text-align: left; cursor: pointer;
  font: 600 1.12rem/1.3 var(--f-display); font-stretch: 90%;
}
.step-n {
  position: relative; display: grid; place-items: center; flex: none;
  width: 31px; height: 31px; border-radius: 50%; font-size: .82rem; font-weight: 500;
  background: var(--ink-900); border: 1px solid var(--line-strong); color: var(--text-muted);
}
.steps button:hover { color: var(--text); }
.steps button[aria-pressed="true"] { color: var(--text); }
.steps button[aria-pressed="true"] .step-n { background: var(--text); border-color: var(--text); color: var(--ink-950); }
.steps li p { display: none; margin: 0 0 8px 47px; color: var(--text-muted); font-size: .95rem; max-width: 420px; }
.approach .text-link { display: inline-block; margin: 22px 0 0 47px; }
.steps li:has(button[aria-pressed="true"]) p { display: block; }

.pointlist {
  margin: 0; padding: 18px 18px 14px; border-radius: 10px;
  background: var(--ink-900);
  border: 1px solid var(--line);
}
.pl-head { display: flex; justify-content: space-between; padding: 0 4px 12px; font-size: .78rem; color: var(--text-muted); border-bottom: 1px solid var(--line); }
.pl-rev { color: var(--text-faint); }
.pl-scroll { overflow-x: auto; }
.pointlist table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.pointlist th { padding: 12px 7px 8px; text-align: left; font: 500 .78rem/1 var(--f-body); color: var(--text-faint); white-space: nowrap; }
.pointlist td { padding: 11px 7px; border-top: 1px solid var(--line); white-space: nowrap; color: var(--text); }
.pointlist .c-desc { color: var(--text-muted); }
.pointlist .u { color: var(--text-faint); font-size: .74rem; }
.pointlist[data-stage="3"] .c-unit, .pointlist[data-stage="4"] .c-unit, .pointlist[data-stage="5"] .c-unit { display: none; }
.pointlist td.mono { font-size: .8rem; }
.pointlist .s2, .pointlist .s3, .pointlist .s4 { display: none; }
.pointlist[data-stage="2"] .s2, .pointlist[data-stage="3"] .s2, .pointlist[data-stage="4"] .s2, .pointlist[data-stage="5"] .s2,
.pointlist[data-stage="3"] .s3, .pointlist[data-stage="4"] .s3, .pointlist[data-stage="5"] .s3,
.pointlist[data-stage="4"] .s4, .pointlist[data-stage="5"] .s4 { display: table-cell; animation: colin .45s ease-out; }
@keyframes colin { from { opacity: 0; } to { opacity: 1; } }
.pointlist .s2 { color: var(--text-muted); }
.pointlist td.s3 { color: var(--biz-text); font-variant-numeric: tabular-nums; }
.ok { display: inline-flex; align-items: center; gap: 6px; color: var(--field-text); font-size: .8rem; }
.ok::before { content: ""; width: 9px; height: 5px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translateY(-2px); }
.pl-foot { margin-top: 12px; padding: 10px 4px 0; border-top: 1px solid var(--line); font-size: .74rem; color: var(--text-faint); visibility: hidden; }
.pointlist[data-stage="5"] .pl-foot { visibility: visible; color: var(--text-muted); }
.pointlist[data-stage="5"] .pl-rev { color: var(--field-text); }

/* ---------- sectors ---------- */
.sectors { padding: 0 0 clamp(72px, 9vw, 120px); }
.sectors-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: 20px clamp(32px, 5vw, 72px); padding-top: clamp(48px, 6vw, 72px); border-top: 1px solid var(--line); }
.sectors h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.sector-list { columns: 2; column-gap: 40px; }
.sector-list li { break-inside: avoid; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--text); font-size: .98rem; }
.text-link { grid-column: 2; justify-self: start; color: var(--biz-text); text-decoration: none; font-weight: 600; font-size: .95rem; }
.text-link::after { content: " →"; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- CTA ---------- */
.cta { padding: 0 0 clamp(56px, 8vw, 96px); }
.cta-panel {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px clamp(32px, 5vw, 72px); align-items: end;
  padding: clamp(36px, 5vw, 64px) clamp(22px, 4vw, 56px);
  border-radius: 10px;
  background: var(--paper); color: var(--paper-ink);
}
.cta h2 { grid-row: span 2; font-size: clamp(1.75rem, 3.4vw, 2.6rem); color: var(--paper-ink); }
.cta p { color: var(--paper-muted); }
.cta .btn { justify-self: start; }
.cta .btn-primary, .flow .btn-primary { color: #fff; background: var(--paper-ink); }
.cta .btn-primary:hover, .flow .btn-primary:hover { background: #000; }

/* ---------- footer ---------- */
.site-footer { padding: 64px 0 28px; background: var(--ink-950); border-top: 1px solid var(--line); font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1.4fr .8fr; gap: 40px; }
.footer-brand img { width: 140px; height: auto; }
.footer-brand p { margin-top: 16px; max-width: 340px; color: var(--text-muted); }
.footer-mail { display: inline-block; margin-top: 16px; color: var(--text); text-decoration: none; font-size: .86rem; }
.footer-mail:hover { color: var(--biz-text); }
.footer-h { margin-bottom: 12px; font-weight: 600; color: var(--text); }
.site-footer ul a { color: var(--text-muted); text-decoration: none; line-height: 2; }
.site-footer ul a:hover { color: var(--text); }
.footer-cols { columns: 2; column-gap: 24px; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--text-faint); font-size: .84rem; }
.footer-bottom a { color: var(--text-muted); text-decoration: none; }
.footer-bottom a:hover { color: var(--text); }
.signature { margin-left: auto; }

/* ---------- inner pages ---------- */
.page-head {
  position: relative;
  padding: clamp(36px, 5vw, 64px) 0 clamp(40px, 6vw, 72px);
  border-bottom: 1px solid var(--line);
}
.page-head .wrap { position: relative; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin-bottom: 28px; font-size: .76rem; color: var(--text-faint); }
.crumbs li + li::before { content: "›"; margin: 0 10px; color: var(--text-faint); }
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current] { color: var(--text-muted); }
.page-head-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 56px; align-items: end; }
.page-head-grid.has-aside { grid-template-columns: minmax(0, 1fr) auto; }
.page-head h1 { max-width: 980px; font-size: clamp(2.1rem, 4.6vw, 3.9rem); font-stretch: 80%; font-weight: 640; line-height: 1.04; }
.page-lead { margin-top: 20px; max-width: 760px; font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.45; color: var(--text); }
.page-intro { margin-top: 16px; max-width: 760px; color: var(--text-muted); }
.page-hero-img { margin-top: 36px; border-radius: var(--radius); }

.block { padding: clamp(48px, 6vw, 80px) 0 0; }
.block + .block, .flow + .block { padding-top: clamp(40px, 5vw, 64px); }
.block-grid { display: grid; grid-template-columns: minmax(0, .74fr) minmax(0, 1.36fr); gap: 20px clamp(32px, 5vw, 72px); align-items: start; }
.block-grid > h2, .block-title { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
.block-grid > :only-child { grid-column: 1 / -1; }
.block-text { margin: 12px 0 0; max-width: 680px; color: var(--text-muted); }
.prose { max-width: 720px; color: var(--text-muted); }
.prose-wide { grid-column: 1 / -1; max-width: 860px; }
.prose p + p { margin-top: 1.05em; }
.prose h2, .prose h3 { margin: 1.6em 0 .5em; color: var(--text); font-size: 1.35rem; }
.prose a { color: var(--biz-text); }
.prose ul { margin: 1em 0; padding-left: 1.2em; list-style: disc; }

.defs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 56px); margin-top: 28px; }
.defs li { padding: 20px 0; border-top: 1px solid var(--line); }
.defs h3 { font: 600 1.06rem/1.35 var(--f-body); color: var(--text); }
.defs h3 a { color: inherit; text-decoration: none; }
.defs h3 a:hover { color: var(--biz-text); }
.defs p { margin-top: 8px; color: var(--text-muted); font-size: .96rem; }

.steps-static::before { top: 16px; }
.steps-static li { padding: 0 0 18px; }
.step-head { display: flex; align-items: center; gap: 16px; padding: 4px 0; font: 600 1.12rem/1.3 var(--f-display); font-stretch: 90%; color: var(--text); }
.steps-static .step-n { background: var(--ink-900); color: var(--text); border-color: var(--line-strong); }
.steps-static li p:not(.step-head) { display: block; margin: 4px 0 0 47px; color: var(--text-muted); font-size: .98rem; max-width: 560px; }

.solution-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.solution-grid > :only-child { grid-column: 1 / -1; }
.scope {
  position: sticky; top: 92px;
  padding: 22px 22px 14px; border-radius: 10px;
  background: var(--ink-900);
  border: 1px solid var(--line);
}
.scope h2 { font-size: 1.15rem; font-stretch: 90%; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.scope li { position: relative; padding: 10px 0 10px 20px; border-top: 1px solid var(--line); font-size: .93rem; line-height: 1.45; color: var(--text); }
.scope li:first-child { border-top: 0; }
.scope li::before { content: ""; position: absolute; left: 0; top: 17px; width: 8px; height: 8px; border-radius: 2px; background: var(--c); opacity: .9; }

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  position: relative; padding: 18px 40px 18px 0; cursor: pointer; list-style: none;
  font: 600 1.04rem/1.4 var(--f-body); color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font: 400 1.4rem/1 var(--f-mono); color: var(--text-faint); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 0 18px; color: var(--text-muted); max-width: 700px; }
.faq .faq-link { padding-top: 0; }

.sector-rows { border-top: 1px solid var(--line); }
.sector-row { display: grid; grid-template-columns: minmax(0, .74fr) minmax(0, 1.36fr); gap: 10px clamp(32px, 5vw, 72px); padding: 26px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 90px; }
.sector-row h2 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
.sector-row p { color: var(--text-muted); }
.related { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 12px; font-size: .92rem; }
.related .lbl { font-size: .72rem; color: var(--text-faint); }
.related a { color: var(--biz-text); text-decoration: none; }
.related a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sector-list a { color: inherit; text-decoration: none; }
.sector-list a:hover { color: var(--biz-text); }

.contact-call { padding: clamp(48px, 6vw, 80px) 0; }
.contact-call-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px;
  padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line);
}
.contact-call p { max-width: 720px; font: 640 clamp(1.4rem, 2.6vw, 2rem)/1.15 var(--f-display); font-stretch: 84%; letter-spacing: -.015em; }
.cta-inner { padding: clamp(48px, 6vw, 80px) 0; }

.contact-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 64px); align-items: start; padding-bottom: clamp(56px, 7vw, 96px); }
.form-panel { padding: clamp(22px, 3vw, 32px); border-radius: 10px; background: var(--ink-900); border: 1px solid var(--line); }
.form-help { margin-bottom: 20px; color: var(--text-muted); }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.field { display: grid; gap: 6px; }
.field-wide { grid-column: 1 / -1; }
.field label { font-size: .86rem; font-weight: 500; color: var(--text-muted); }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 13px; border-radius: 10px;
  background: rgba(7, 13, 19, .7); border: 1px solid var(--line-strong); color: var(--text);
  font: 400 1rem/1.4 var(--f-body);
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--biz-text); box-shadow: 0 0 0 3px rgba(76,184,242,.18); }
.field [aria-invalid="true"] { border-color: #e5484d; }
.field-error { font-size: .84rem; color: #ff8a8d; }
.field-check label { display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; }
.field-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--biz); }
.field-check a { color: var(--biz-text); }
.form-alert { margin-bottom: 18px; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(229,72,77,.5); background: rgba(229,72,77,.08); color: #ffb3b5; }
.form-sent { padding: 18px; border-radius: 12px; border: 1px solid rgba(116,207,110,.45); background: rgba(79,179,74,.08); color: var(--text); }
.contact-details { display: grid; gap: 12px; margin-bottom: 28px; font-style: normal; }
.contact-details p { display: grid; gap: 2px; }
.contact-details .lbl { font-size: .72rem; color: var(--text-faint); }
.contact-details a { color: var(--text); text-decoration: none; font-size: 1.05rem; }
.contact-details a:hover { color: var(--biz-text); }
.page-head-error { min-height: 52vh; }
.page-head-error .btn { margin-top: 24px; }
.footer-h a { color: inherit; text-decoration: none; }
.footer-address { margin-top: 10px; }
main > .block:last-child { padding-bottom: clamp(56px, 7vw, 96px); }

/* ---------- solution motifs ---------- */
.motif-band { padding: clamp(28px, 4vw, 48px) 0 0; }
.motif {
  margin: 0; padding: 18px clamp(14px, 2vw, 22px) 16px; border-radius: 10px;
  background: var(--ink-900);
  border: 1px solid var(--line);
}
.motif-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: .78rem; color: var(--text-muted); }
.motif-clock { color: var(--text-faint); }
.motif-stats { display: flex; flex-wrap: wrap; gap: 10px 36px; padding: 14px 2px 6px; }
.motif-stats p { display: grid; gap: 2px; }
.motif-stats .lbl { font-size: .7rem; color: var(--text-faint); }
.motif-stats b { font: 500 1.15rem/1.2 var(--f-mono); color: var(--text); font-variant-numeric: tabular-nums; }
.m-plot { position: relative; height: 280px; margin-top: 6px; }
.m-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.m-grid { stroke: var(--line); stroke-width: 1; }
.m-axis { fill: var(--text-faint); font: 400 11px var(--f-mono); }
.m-raw { fill: var(--field-text); opacity: .45; }
.m-arch { fill: var(--biz-text); stroke: var(--ink-900); stroke-width: 1.5; }
.m-arch-line { fill: none; stroke: var(--biz-text); stroke-width: 1.6; }
.m-dashed { stroke-dasharray: 4 4; opacity: .7; }
.m-door { fill: rgba(79,179,74,.08); stroke: rgba(116,207,110,.45); stroke-width: 1; stroke-dasharray: 3 3; }
.m-now { fill: var(--ink-900); stroke: var(--field-text); stroke-width: 2; }
.motif-legend { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 10px 2px 0; font-size: .8rem; color: var(--text-muted); }
.motif-legend li { display: inline-flex; align-items: center; gap: 8px; }
.lg { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.lg-raw { width: 6px; height: 6px; background: var(--field-text); opacity: .6; }
.lg-arch { background: var(--biz-text); }
.lg-door { width: 18px; height: 10px; border-radius: 2px; background: rgba(79,179,74,.12); border: 1px dashed rgba(116,207,110,.6); }
.lg-warn { width: 18px; height: 0; border-radius: 0; border-top: 2px dashed var(--warn); }
.lg-alarm { width: 18px; height: 0; border-radius: 0; border-top: 2px solid #e5484d; }
.lg-line { width: 18px; height: 2px; border-radius: 1px; background: var(--biz-text); }
.motif-note { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .86rem; line-height: 1.55; color: var(--text-faint); max-width: 900px; }

.m-scroll { overflow-x: auto; }
.m-scroll.has-more { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
.m-scroll-hint { display: none; margin-top: 8px; font-size: .8rem; color: var(--text-muted); }
.m-scroll-hint.is-on { display: block; }
.m-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.m-table th { padding: 10px 10px 8px; text-align: left; font: 500 .78rem/1 var(--f-body); color: var(--text-faint); white-space: nowrap; border-bottom: 1px solid var(--line); }
.m-table td { padding: 10px; border-bottom: 1px solid var(--line); color: var(--text); white-space: nowrap; }
.m-table td.mono { font-size: .8rem; }
.prio { display: inline-block; min-width: 58px; padding: 2px 8px; border-radius: 4px; font: 600 .72rem/1.5 var(--f-body); text-align: center; color: #0b1520; }
.prio-1 { background: #e5484d; color: #fff; }
.prio-2 { background: var(--warn); }
.prio-3 { background: #d9c552; }
.prio-4 { background: #8fb3cf; }
.m-alarms tr.st-UA td.st { color: #ff9a9d; animation: blink 1s steps(2, start) infinite; }
.m-alarms tr.st-RU td.st { color: var(--text-muted); animation: blink 2s steps(2, start) infinite; }
.m-alarms tr.st-A td.st { color: var(--text); }
.m-alarms tr.is-rtn td { color: var(--text-faint); }
.m-alarms tr.is-rtn td.st { color: var(--field-text); animation: none; }
.m-alarms tr.st-UA { background: rgba(229,72,77,.06); }
@keyframes blink { to { visibility: hidden; } }

.m-split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 12px; }
.m-log { padding: 12px 14px; border-radius: 6px; background: rgba(7,13,19,.5); border: 1px solid var(--line); min-height: 100%; }
.m-log li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); font-size: .84rem; color: var(--text-muted); }
.m-log li:first-child { color: var(--text); border-top: 0; }
.m-log li .mono { font-size: .76rem; color: var(--text-faint); }

.m-sld { width: 100%; min-width: 560px; height: auto; }
.m-sld text { fill: var(--text-muted); font: 500 12px var(--f-body); }
.m-sld .sld-tag { fill: var(--text-faint); font: 400 11px var(--f-mono); }
.m-sld .sld-v { fill: var(--biz-text); }
.m-sld .sld-g { fill: var(--text); font: 600 13px var(--f-mono); }
.m-sld .sld-l1 { fill: var(--text); font-weight: 600; }
.m-sld .sld-l2 { fill: var(--text-muted); font: 400 11px var(--f-body); }
.m-sld .sld-ats-t { fill: var(--text); font: 600 12px var(--f-body); }
.sld-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s; }
.sld-line.is-dead { stroke: #34485a; }
.sld-line.is-live { stroke: var(--biz-text); stroke-dasharray: 10 6; animation: flow 1.2s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -16; } }
.sld-cb { stroke-width: 2; transition: fill .3s, stroke .3s; }
.sld-cb.is-closed { fill: var(--biz-text); stroke: var(--biz-text); }
.sld-cb.is-open { fill: var(--ink-900); stroke: var(--text-muted); }
.sld-cb.is-trip { stroke: #e5484d; }
.sld-ats { fill: rgba(19,33,46,.9); stroke: var(--line-strong); }
.sld-src circle { fill: var(--ink-900); stroke-width: 2.5; transition: stroke .3s; }
.sld-src path { fill: none; stroke: var(--text-muted); stroke-width: 1.6; }
.sld-src.is-live circle { stroke: var(--field-text); }
.sld-src.is-fail circle { stroke: #e5484d; }
.sld-src.is-start circle { stroke: var(--warn); animation: blink .8s steps(2, start) infinite; }
.sld-src.is-dead circle { stroke: #34485a; }
.sld-load { stroke-width: 1.5; transition: fill .3s, stroke .3s; }
.sld-load.is-live { fill: rgba(10,155,230,.08); stroke: rgba(76,184,242,.5); }
.sld-load.is-dead { fill: rgba(7,13,19,.6); stroke: #34485a; }

.motif .pkt-field { fill: var(--field-text); }
.motif .pkt-biz { fill: var(--biz-text); }
.m-side { display: grid; gap: 14px; align-content: start; }
.m-log li.is-alarm span:last-child { color: #ff9a9d; }
.m-log li.is-warn span:last-child { color: var(--warn); }
.m-log-inline { margin-top: 12px; min-height: 0; }
.is-alarm-t { color: #ff9a9d !important; }
.is-ok-t { color: var(--field-text) !important; }
.m-table tr { transition: background-color .6s; }
.m-table tr.is-hot { background: rgba(76,184,242,.10); transition: none; }
.m-table tr.is-ok td.st { color: var(--field-text); }
.m-table tr.is-warn td.st { color: var(--warn); }
.m-table tr.is-warn td:nth-child(4) { color: var(--warn); }

/* gray space */
.m-plan { width: 100%; min-width: 560px; height: auto; }
.gs-room { fill: rgba(7,13,19,.55); stroke: var(--line-strong); }
.gs-room-t { fill: var(--text-muted); font: 600 12px var(--f-body); }
.gs-eq { fill: rgba(19,33,46,.9); stroke: var(--line); }
.gs-eq-t { fill: var(--text-faint); font: 500 11px var(--f-body); }
.gs-pipe { fill: none; stroke: rgba(76,184,242,.25); stroke-width: 4; }
.gs-dot { fill: var(--field-text); }
.gs-halo { fill: rgba(79,179,74,.12); }
.gs-id { fill: var(--text); font: 500 11px var(--f-mono); }
.gs-val { fill: var(--text-muted); font: 400 11px var(--f-mono); }
.gs-wl .gs-dot { fill: var(--biz-text); }
.gs-wl .gs-halo { fill: rgba(10,155,230,.12); }
.gs-ds .gs-dot { fill: var(--text-muted); }
.gs-s.is-warn .gs-dot { fill: var(--warn); }
.gs-s.is-warn .gs-val { fill: var(--warn); }
.gs-s.is-alarm .gs-dot { fill: #e5484d; }
.gs-s.is-alarm .gs-halo { fill: rgba(229,72,77,.25); animation: pulse 1s ease-out infinite; transform-origin: center; transform-box: fill-box; }
.gs-s.is-alarm .gs-val { fill: #ff9a9d; }
.gs-s.is-comm .gs-dot { fill: #34485a; }
.gs-s.is-comm .gs-val { fill: var(--text-faint); }
@keyframes pulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.pue { padding: 12px 14px; border-radius: 6px; background: rgba(7,13,19,.5); border: 1px solid var(--line); }
.pue-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); font-size: .84rem; color: var(--text-muted); }
.pue-row b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.pue-row small { color: var(--text-faint); font-size: .72rem; }
.pue-res { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line-strong); }
.pue-res .lbl { font-size: .72rem; color: var(--text-faint); }
.pue-res b { font: 500 1.6rem/1 var(--f-mono); color: var(--biz-text); }

/* SPC and thresholds */
.m-spec { stroke: #e5484d; stroke-width: 1.4; }
.m-ctl { stroke: var(--warn); stroke-width: 1.2; stroke-dasharray: 6 4; }
.m-cl { stroke: var(--text-faint); stroke-width: 1; }
.m-lim-t { font-size: 10px; }
.m-out { fill: #e5484d; stroke: var(--ink-900); stroke-width: 1.5; }

/* RFID */
.m-plot-sm { height: 150px; margin-bottom: 8px; }
.m-plot-sm .m-svg { overflow: hidden; }
.rf-belt { fill: rgba(7,13,19,.6); stroke: var(--line); }
.rf-zone { fill: rgba(79,179,74,.07); stroke: rgba(116,207,110,.45); stroke-dasharray: 4 4; }
.rf-ant { fill: var(--field); }
.rf-pal { fill: rgba(19,33,46,.95); stroke: var(--line-strong); }
.rf-pal.is-read { stroke: var(--field-text); fill: rgba(79,179,74,.16); }
.rf-pal.is-done { stroke: rgba(76,184,242,.6); }
.rf-epc { fill: var(--text); font: 500 10px var(--f-mono); }

/* PSA */
.m-psa { width: 100%; min-width: 620px; height: auto; margin-top: 12px; }
.psa-wire { fill: none; stroke: rgba(116,207,110,.35); stroke-width: 1.6; }
.psa-wire-biz { stroke: rgba(76,184,242,.4); }
.psa-core { fill: rgba(10,155,230,.08); stroke: var(--biz-text); stroke-width: 1.5; }
.psa-core-t { fill: var(--text); font: 650 16px var(--f-display); }
.psa-sub { fill: var(--text-faint); font: 400 11px var(--f-mono); }
.psa-node { fill: rgba(19,33,46,.95); stroke: var(--line-strong); }
.psa-node-biz { stroke: rgba(76,184,242,.55); }
.psa-node-field { stroke: rgba(116,207,110,.55); }
.psa-t { fill: var(--text); font: 600 12px var(--f-body); }
.psa-note { fill: var(--text-muted); font: 400 11px var(--f-body); }
.psa-gate { fill: rgba(233,162,59,.08); stroke: var(--warn); stroke-width: 1.5; transition: fill .3s; }
.psa-gate.is-hot { fill: rgba(233,162,59,.3); }
.psa-gate-t { fill: var(--warn); font: 700 13px var(--f-mono); }
.psa-int { fill: rgba(19,33,46,.95); stroke: var(--line-strong); }
.psa-ok { fill: var(--field-text); font: 600 11px var(--f-body); }
.psa-need { fill: var(--warn); font: 600 11px var(--f-body); }

/* OT ring */
.m-ring { width: 100%; min-width: 600px; height: auto; }
.ot-zone { fill: rgba(7,13,19,.45); stroke: var(--line); stroke-dasharray: 2 4; }
.ot-zone-t { fill: var(--text-faint); font: 500 11px var(--f-body); }
.ot-link { stroke: rgba(76,184,242,.45); stroke-width: 3; }
.ot-link.is-broken { stroke: #e5484d; stroke-dasharray: 4 6; }
.ot-edge { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.ot-sw rect { fill: rgba(19,33,46,.98); stroke: var(--biz-text); }
.ot-sw text { fill: var(--text); font: 500 11px var(--f-mono); }
.ot-dev rect, .ot-fw rect { fill: rgba(19,33,46,.95); stroke: var(--line-strong); }
.ot-fw rect { stroke: var(--warn); }
.ot-dev text, .ot-fw text { fill: var(--text-muted); font: 500 11px var(--f-body); }

/* process P&ID */
.m-pid { width: 100%; min-width: 560px; height: auto; }
.pid-pipe { fill: none; stroke: #34485a; stroke-width: 5; stroke-linejoin: round; }
.pid-pipe.is-flow { stroke: rgba(76,184,242,.55); stroke-dasharray: 10 6; animation: flow 1s linear infinite; }
.pid-tank { fill: rgba(7,13,19,.6); stroke: var(--text-muted); stroke-width: 2; }
.pid-fill { fill: rgba(10,155,230,.35); transition: y .45s linear, height .45s linear; }
.pid-lim { stroke: var(--warn); stroke-dasharray: 4 4; }
.pid-lim-t { fill: var(--text-faint); font: 400 11px var(--f-mono); }
.pid-tank-t { fill: var(--text); font: 600 13px var(--f-mono); }
.pid-t { fill: var(--text-muted); font: 500 11px var(--f-body); }
.pid-inst circle { fill: var(--ink-900); stroke: var(--field-text); stroke-width: 1.5; }
.pid-inst text { fill: var(--text); font: 600 9px var(--f-mono); }
.pid-valve path { fill: var(--ink-900); stroke: var(--text-muted); stroke-width: 1.5; }
.pid-valve text { fill: var(--text-faint); font: 400 10px var(--f-mono); }
.pid-pump circle { fill: var(--ink-900); stroke: #34485a; stroke-width: 2.5; }
.pid-pump path { fill: #34485a; }
.pid-pump text { fill: var(--text-muted); font: 500 11px var(--f-mono); }
.pid-pump.is-run circle { stroke: var(--field-text); }
.pid-pump.is-run path { fill: var(--field-text); }
.m-readout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; padding: 12px 14px; border-radius: 6px; background: rgba(7,13,19,.5); border: 1px solid var(--line); }
.m-readout p { display: grid; gap: 2px; }
.m-readout .lbl { font-size: .7rem; color: var(--text-faint); }
.m-readout b { font: 500 1.05rem/1.2 var(--f-mono); color: var(--text); }

/* PLC rack */
.m-rack { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding: 12px; border-radius: 6px; background: rgba(7,13,19,.55); border: 1px solid var(--line); }
.rk-mod { display: flex; flex-direction: column; gap: 6px; min-height: 230px; padding: 8px 6px; border-radius: 6px; background: var(--ink-850); border: 1px solid var(--line-strong); }
.rk-id { font-size: .8rem; font-weight: 500; color: var(--text); }
.rk-l { font-size: .66rem; line-height: 1.3; color: var(--text-faint); min-height: 2.6em; }
.rk-ch { display: grid; gap: 4px; }
.rk-ch li { display: flex; align-items: center; gap: 5px; font-size: .6rem; color: var(--text-faint); }
.rk-ch i { width: 7px; height: 7px; border-radius: 50%; background: #23384a; flex: none; }
.rk-ch li.is-on i { background: var(--field-text); }
[data-mod="DO"] li.is-on i { background: var(--warn); }
[data-mod="AI"] li i { width: 24px; height: 6px; border-radius: 2px; background: linear-gradient(90deg, var(--biz-text) calc(var(--lvl, .3) * 100%), #23384a 0); }
.rk-ch { grid-template-columns: 1fr; }
[data-mod="DI"], [data-mod="DO"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.m-points td.m-val { color: var(--biz-text); }

/* report */
.rp-filters { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; }
.rp-filters p { display: grid; gap: 2px; padding: 8px 12px; border-radius: 8px; background: rgba(7,13,19,.5); border: 1px solid var(--line); min-width: 140px; }
.rp-filters .lbl { font-size: .66rem; color: var(--text-faint); }
.rp-filters b { font-size: .88rem; font-weight: 600; color: var(--text); }
.rp-prev { fill: rgba(79,179,74,.06); stroke: rgba(116,207,110,.45); stroke-dasharray: 3 3; }
.rp-cur { fill: var(--biz-text); opacity: .85; }

/* migration */
.mg-progress { display: grid; gap: 8px; padding: 14px 2px 12px; }
.mg-progress p { display: flex; align-items: baseline; gap: 8px; }
.mg-progress .lbl { font-size: .72rem; color: var(--text-faint); }
.mg-progress b { font: 500 1.3rem/1 var(--f-mono); color: var(--text); }
.mg-bar { height: 6px; border-radius: 3px; background: #1a2b3a; overflow: hidden; }
.mg-bar i { display: block; height: 100%; background: var(--biz); transition: width .6s; }

/* historian: PI Server chain */
.pi-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.9fr) minmax(0, .95fr); gap: 18px; margin-top: 14px; align-items: start; }
.pi-col { min-width: 0; }
.pi-trend .m-plot { height: 220px; }
.pi-trend .motif-legend { padding-bottom: 14px; }
.af-tree li { position: relative; padding: 3px 0 3px 14px; font-size: .86rem; color: var(--text-muted); }
.af-tree li::before { content: ""; position: absolute; left: 3px; top: 0; bottom: 50%; width: 7px; border-left: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.af-tree .af-l1 { margin-left: 14px; }
.af-tree .af-l2 { margin-left: 28px; }
.af-tree .af-el { color: var(--text); font-weight: 600; }
.af-tree .af-el .lbl { display: block; font-weight: 400; }
.af-attrs { margin: 12px 0 0; }
.af-attrs > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.af-attrs dt { font-size: .84rem; color: var(--text); }
.af-attrs dt span { display: block; font-size: .72rem; color: var(--text-faint); }
.af-attrs dd { margin: 0; font-size: .82rem; color: var(--text-muted); white-space: nowrap; }
.af-attrs dd b { font-weight: 500; color: var(--field-text); }
.af-attrs .af-calc dd b { color: var(--biz-text); }
.af-attrs .af-static dd { color: var(--text-faint); }
.m-band { fill: rgba(233,162,59,.12); }
.lg-band { width: 18px; height: 10px; border-radius: 2px; background: rgba(233,162,59,.25); }
.m-ef tr.is-open td { color: var(--warn); }
.m-ef td:nth-child(5) { white-space: normal; min-width: 120px; }
.m-ef th, .m-ef td { padding-left: 7px; padding-right: 7px; }
.pi-notes li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); font-size: .84rem; color: var(--text-muted); }
.pi-notes li:first-child { border-top: 0; color: var(--text); }
.pi-notes li .mono { font-size: .76rem; color: var(--text-faint); }
.pi-notes li.is-warn span:last-child { color: var(--warn); }
.pi-notes li.is-alarm span:last-child { color: #ff9a9d; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .pi-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); }
  .pi-notify { grid-column: 1 / -1; }
  .junction { grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); }
  .xmark { width: 84px; }
  .tags .tag-desc { display: none; }
  .flow-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .flow-stages::before { display: none; }
  .stage, .stage:first-child { border-left: 0; padding: 0 22px 0 0; }
  .stage::before, .stage:last-child::after { display: none; }
  .stage-name { margin-top: 8px; }
}

@media (max-width: 860px) {
  .header-row { gap: 16px; }
  .header-cta { display: none; }
  .nav-toggle {
    display: inline-flex; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line-strong);
    background: none; color: var(--text); font: 500 .9rem/1 var(--f-body); cursor: pointer;
  }
  .main-nav ul {
    display: none; position: absolute; left: 0; right: 0; top: 68px; flex-direction: column; gap: 0;
    padding: 8px var(--gutter) 18px; background: var(--ink-950); border-bottom: 1px solid var(--line);
  }
  .main-nav.is-open ul { display: flex; }
  .main-nav ul a { display: block; padding: 12px 0; font-size: 1.05rem; color: var(--text); }

  .junction { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .junction-wires { display: none; }
  .jz-x { padding: 14px 0; }
  .jz-x::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--line-strong); }
  .xmark { position: relative; width: 64px; transform: rotate(90deg); background: transparent; }
  .tags .tag-desc { display: table-cell; }

  .intro-grid, .approach-grid, .sectors-grid { grid-template-columns: minmax(0, 1fr); }
  .text-link { grid-column: 1; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .signature { margin-left: 0; }
}

@media (max-width: 560px) {
  .flow-stages { grid-template-columns: minmax(0, 1fr); }
  .stage { padding-right: 0; }
  .sector-list { columns: 1; }
  .tags .tag-desc { display: none; }
  .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 860px) {
  /* phone: each step shows only what it adds, no sideways scrolling */
  .pointlist:not([data-stage="1"]) .c-desc, .pointlist:not([data-stage="1"]) .c-unit { display: none; }
  .pointlist[data-stage="3"] .c-src, .pointlist[data-stage="3"] .c-proto,
  .pointlist[data-stage="4"] .s2, .pointlist[data-stage="5"] .s2 { display: none; }
}

@media (max-width: 860px) {
  .main-nav .sub { display: none !important; }
  .cta-panel { grid-template-columns: minmax(0, 1fr); }
  .cta h2 { grid-row: auto; }
  .page-head-grid.has-aside, .block-grid, .solution-grid, .contact-grid, .sector-row { grid-template-columns: minmax(0, 1fr); }
    .scope { position: static; }
  .defs { grid-template-columns: minmax(0, 1fr); }
  .approach .text-link { margin-left: 0; }
}
@media (max-width: 560px) {
  .form { grid-template-columns: minmax(0, 1fr); }
  .contact-call-row .btn { width: 100%; justify-content: center; }
}

@media (max-width: 860px) {
  .m-split { grid-template-columns: minmax(0, 1fr); }
  .pi-grid { grid-template-columns: minmax(0, 1fr); }
  .m-plot { height: 230px; }
}
@media (max-width: 560px) {
  .m-hide-sm { display: none; }
  .m-rack { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rk-mod { min-height: 0; }
  .m-readout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .motif-stats { gap: 10px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Labels are set in the body face; monospace is kept for data only (tags, values, units, times). */
.lbl { font-family: var(--f-body); font-size: .78rem; color: var(--text-faint); }

/* =====================================================================
   Surfaces v2 (Mecit, 8 October): a lighter blue atmosphere, real glass
   (blur + saturation + top-edge light + shadow) over colour that is worth
   blurring, cursor light on hover, proper titles instead of label strips.
   Visual properties only; layout stays with the rules above.
   ===================================================================== */
:root {
  --ink-950: #0b1b2e;
  --ink-900: #0f2236;
  --ink-850: #132a42;
  --text-muted: #a3b5c6;
  --text-faint: #7590a6;
  --glass-fill: linear-gradient(160deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.05) 38%, rgba(255,255,255,.035) 100%);
  --glass-line: rgba(255,255,255,.13);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.04), 0 30px 60px -32px rgba(2,10,24,.8);
  --tile-fill: rgba(255,255,255,.045);
  --tile-line: rgba(255,255,255,.075);
}
body { background: var(--ink-950); }

/* atmosphere: light from above, one continuous sky from the hero into the introduction */
.hero {
  background:
    radial-gradient(110% 80% at 50% -10%, rgba(120,186,238,.30), rgba(120,186,238,0) 60%),
    linear-gradient(180deg, #0a1829 0%, #0f2a47 58%, #12345a 100%);
}
.hero-light { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-light svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: blur(48px); opacity: .62; }
.ribbon { fill: none; stroke-width: 150; stroke-linecap: round; animation: drift 22s ease-in-out infinite alternate; }
.ribbon-field { stroke: #3f9f63; }
.ribbon-biz { stroke: #2f8fd8; animation-delay: -11s; }
@keyframes drift { from { transform: translate3d(-24px, 10px, 0); } to { transform: translate3d(24px, -14px, 0); } }
.intro { background: linear-gradient(180deg, #12345a 0%, #0e2742 45%, var(--ink-950) 100%); }
.approach {
  background:
    radial-gradient(70% 60% at 85% 0%, rgba(120,186,238,.22), rgba(120,186,238,0) 70%),
    linear-gradient(180deg, #10304f 0%, #0d243d 55%, var(--ink-950) 100%);
}
.sectors { background: linear-gradient(180deg, var(--ink-950) 0%, #0e2742 100%); }
.sectors-grid { border-top-color: rgba(255,255,255,.08); }
.sector-list li { border-bottom-color: rgba(255,255,255,.08); transition: background-color .25s; }
.sector-list li:hover { background: rgba(255,255,255,.04); }
.cta {
  background:
    radial-gradient(60% 75% at 50% 45%, rgba(120,186,238,.28), rgba(120,186,238,0) 70%),
    linear-gradient(180deg, #0e2742 0%, #0b1d31 100%);
  padding-top: clamp(56px, 8vw, 96px);
}
.contact-call { background: radial-gradient(70% 90% at 50% 100%, rgba(120,186,238,.16), rgba(120,186,238,0) 70%); }
.block { background: transparent; }
.page-head {
  background:
    radial-gradient(90% 130% at 75% -20%, rgba(110,178,236,.30), rgba(110,178,236,0) 62%),
    linear-gradient(180deg, #0a1829 0%, #0f2944 100%);
  border-bottom: 0;
}
.motif-band { background: linear-gradient(180deg, #0f2944 0%, var(--ink-950) 100%); }
.site-footer { background: #091626; border-top-color: rgba(255,255,255,.06); }

/* header and its menu: glass over the page */
.site-header {
  background: rgba(11,27,46,.55);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.main-nav .sub {
  background: rgba(16,36,58,.72);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--glass-line); border-radius: 16px;
  box-shadow: var(--glass-shadow);
}

/* buttons */
.btn { border-radius: 12px; }
.btn-ghost {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.btn-ghost:hover { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.28); }

/* glass panels with cursor light (site.js sets --mx / --my) */
.junction, .motif, .pointlist, .scope, .form-panel, .flow-track {
  position: relative; isolation: isolate;
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--glass-line);
  border-radius: 22px;
  box-shadow: var(--glass-shadow);
  transition: border-color .35s;
}
.junction::before, .motif::before, .pointlist::before, .scope::before, .form-panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 0%), rgba(170,220,255,.10), rgba(170,220,255,0) 45%);
  opacity: 0; transition: opacity .35s;
}
.junction::after, .motif::after, .pointlist::after, .scope::after, .form-panel::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; padding: 1px;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(190,230,255,.55), rgba(190,230,255,0) 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .35s;
}
.junction:hover::before, .motif:hover::before, .pointlist:hover::before, .scope:hover::before, .form-panel:hover::before,
.junction:hover::after, .motif:hover::after, .pointlist:hover::after, .scope:hover::after, .form-panel:hover::after { opacity: 1; }
.junction:hover, .motif:hover, .pointlist:hover, .scope:hover, .form-panel:hover { border-color: rgba(255,255,255,.2); }

/* tiles inside glass: lighter layers, no blur of their own */
.dest, .pi-col, .m-log, .pue, .m-readout, .m-rack, .rp-filters p {
  background: var(--tile-fill); border: 1px solid var(--tile-line); border-radius: 14px;
  transition: background-color .3s, border-color .3s;
}
.dest:hover, .pi-col:hover, .m-log:hover, .pue:hover, .m-readout:hover { background: rgba(255,255,255,.07); }
.dest.is-hot { border-color: rgba(120,200,255,.6); }
.pi-col { padding: 14px; }
.rk-mod { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); border-radius: 8px; }

/* titles instead of label strips */
.motif-head { display: block; padding: 2px 4px 18px; border-bottom: 0; }
.motif-title { margin: 0; font: 650 1.3rem/1.15 var(--f-display); font-stretch: 86%; letter-spacing: -.01em; color: var(--text); }
.motif-sub { margin-top: 5px; font-size: .9rem; color: var(--text-muted); }
.motif-sub .sim { margin-left: 10px; font: 500 .8rem var(--f-mono); color: var(--biz-text); }
.tile-title { margin: 0 0 10px; font: 600 .95rem/1.3 var(--f-body); color: var(--text); }
.tile-title span { margin-left: 6px; font-weight: 400; font-size: .8rem; color: var(--text-faint); }
.motif-note { border-top: 0; padding-top: 4px; color: var(--text-muted); }
.motif-stats { padding-top: 4px; }
.jz-head { margin-bottom: 12px; font: 600 1rem/1.2 var(--f-body); color: var(--text); }
.pl-head { display: block; padding: 2px 4px 12px; border-bottom: 1px solid var(--line); }
.pl-head .motif-title { font-size: 1.15rem; }
.pointlist[data-stage="5"] .pl-rev { color: var(--field-text); }

/* solution page: place on the data flow */
.scope { --c: var(--biz-text); position: sticky; }   /* the glass rule above set relative; keep the sticky aside */
.flow-track { min-width: 280px; padding: 18px 20px 16px; border-radius: 18px; }
.flow-track ol { display: flex; }
.flow-track li { position: relative; flex: 1 1 0; padding-top: 20px; font-size: .78rem; color: var(--text-faint); }
.flow-track li::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: rgba(255,255,255,.14); }
.flow-track li::after { content: ""; position: absolute; left: 0; top: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink-950); border: 2px solid rgba(255,255,255,.3); }
.flow-track li:last-child::before { right: auto; width: 12px; }
.flow-track .ft-field { --c: var(--field); } .flow-track .ft-monitor { --c: var(--mid-1); }
.flow-track .ft-historian { --c: var(--mid-2); } .flow-track .ft-enterprise { --c: var(--biz); }
.flow-track li.is-here::after, .flow-track.is-all li::after { background: var(--c); border-color: var(--c); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 25%, transparent); }
.flow-track li.is-here, .flow-track.is-all li { color: var(--text); font-weight: 600; }
.flow-track p { margin-top: 12px; font: 600 1rem/1.3 var(--f-body); color: var(--text); }

/* the light sheet: cool gradient, rows that become cards on hover */
.flow { background: linear-gradient(180deg, #f4f8fb 0%, #e5edf4 100%); border-radius: 22px; }
.sol-list li { position: relative; margin: 0 -12px; padding: 14px 12px; border-top: 0; border-radius: 14px; transition: background-color .25s, box-shadow .25s; }
.sol-list li:hover { background: rgba(255,255,255,.92); box-shadow: 0 14px 34px -22px rgba(18,32,43,.45); }
.sol-list a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.sol-list a { background: none; }
.sol-list li:hover a { color: #0b4f7c; }
.lifecycle {
  --c: var(--biz);
  display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; align-items: center; gap: 8px 28px;
  margin-top: 40px; padding: 16px 28px 16px 16px; border: 0; border-radius: 18px;
  background: rgba(255,255,255,.75); color: var(--paper-ink); text-decoration: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 18px 40px -28px rgba(18,32,43,.5);
  transition: background-color .25s, box-shadow .25s;
}
.lifecycle:hover { background: #fff; box-shadow: 0 1px 0 #fff inset, 0 24px 50px -26px rgba(18,32,43,.55); }
.lifecycle .flow-art { width: 200px; margin: 0; }
.lifecycle-body { display: grid; gap: 6px; }
.lifecycle-title { font: 650 1.25rem/1.2 var(--f-display); font-stretch: 86%; color: var(--paper-ink); }
.lifecycle-text { font-size: .95rem; color: var(--paper-muted); }
.lifecycle-go { font-size: 1.4rem; color: var(--paper-muted); transition: transform .25s, color .25s; }
.lifecycle:hover .lifecycle-go { transform: translateX(4px); color: var(--biz); }

.cta-panel { background: linear-gradient(160deg, #f4f8fb 0%, #e2ebf3 100%); border-radius: 22px; }
.contact-call-row { border-top-color: rgba(255,255,255,.1); }

@media (max-width: 860px) {
  .lifecycle { grid-template-columns: minmax(0, 1fr); padding: 16px 20px 20px; }
  .lifecycle .flow-art { width: 200px; }
  .lifecycle-go { display: none; }
  .flow { border-radius: 16px; }
  .flow-track { min-width: 0; }
  .scope { position: relative; top: auto; }
}

/* ---------- inner pages, surfaces v2 ---------- */
/* the head's sky carries on into the first section instead of stopping at a seam */
.page-head + section:not(.motif-band, .flow, .cta) { background: linear-gradient(180deg, #0f2944 0, var(--ink-950) 640px); }

/* definition lists become cards: a lighter layer with its own light on hover */
.defs { gap: 14px; }
.defs li {
  padding: 22px 24px 24px; border: 1px solid var(--tile-line); border-radius: 18px;
  background: linear-gradient(160deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.03) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  transition: background-color .3s, border-color .3s, transform .3s;
}
.defs li:hover { background-color: rgba(255,255,255,.04); border-color: rgba(255,255,255,.16); }
.defs li:has(a) { position: relative; }
.defs li:has(a):hover { transform: translateY(-2px); }
.defs h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

/* sectors: rows that become cards on hover, related solutions as links you can press */
.sector-rows { border-top: 0; display: grid; gap: 6px; }
.sector-row { margin: 0 -24px; padding: 26px 24px; border-bottom: 0; border-radius: 18px; transition: background-color .3s, box-shadow .3s; }
.sector-row:hover, .sector-row:target { background: rgba(255,255,255,.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.07); }
.related { gap: 8px; margin-top: 16px; }
.related .lbl { flex-basis: 100%; font-size: .86rem; color: var(--text-muted); }
.related a {
  padding: 6px 12px; border: 1px solid rgba(76,184,242,.28); border-radius: 999px;
  background: rgba(76,184,242,.08); font-size: .86rem; line-height: 1.3;
  transition: background-color .25s, border-color .25s, color .25s;
}
.related a:hover { text-decoration: none; background: rgba(76,184,242,.18); border-color: rgba(76,184,242,.5); color: var(--text); }

/* questions without a category use the full width instead of an empty column */
.block-grid > div:empty { display: none; }
.block-grid > div:empty + .faq { grid-column: 1 / -1; max-width: 900px; }

@media (max-width: 860px) {
  .defs { grid-template-columns: minmax(0, 1fr); }
  .sector-row { margin: 0 -16px; padding: 22px 16px; }
}