/* page CSS shared by index.html and en.html (moved out of the pages; new layer visuals appended below) */
/* the strata hero: seven layers stacked like a stepped mountain, the widest (firmware) at the foot, each
     one stepping in towards the summit (the complete, documented system). They build up from the foot on
     load, one after another (about 2.2 s), and hold; the words stay legible throughout. */
  .hero--strata { position: relative; overflow: clip; --sh: calc(clamp(196px, 100svh - 470px, 560px) / 7.3); --sx: 9.2%; }
  .hero--strata .hero__in { position: relative; z-index: 1; }
  .hero--strata h1 { font-size: clamp(40px, 7vw, 108px); line-height: 1.0; letter-spacing: var(--display-tracking-xl); max-width: none; }
  .hero--strata h1 .h1-line { display: block; }
  .hero--strata .hero__lead { max-width: 54ch; font-size: var(--t-lead); line-height: 1.5; margin-top: var(--s-6); }
  .strata { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--sh) * 7); pointer-events: none; }
  .strata__band { position: absolute; right: 0; left: calc(var(--i) * var(--sx)); bottom: calc(var(--i) * var(--sh)); height: var(--sh);
    display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-5); box-sizing: border-box;
    background: color-mix(in oklab, var(--ink) calc(3% + var(--i) * 2.1%), var(--bg));
    border-top: 1px solid color-mix(in oklab, var(--ink) calc(14% + var(--i) * 3%), transparent);
    border-left: 1px solid color-mix(in oklab, var(--ink) calc(14% + var(--i) * 3%), transparent);
    opacity: .28; transform: translateY(14px);
    animation: strata-in .6s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(.25s + var(--i) * .26s); }
  .strata__band--top { border-top-color: var(--accent); border-left-color: var(--accent); }
  .strata__band--top::before { content: ""; position: absolute; left: -5px; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
  .strata__band--top::after { content: ""; position: absolute; left: -14px; top: -14px; width: 27px; height: 27px; border-radius: 50%; border: 1px solid var(--accent); opacity: 0;
    animation: strata-ring 1.6s ease-out forwards; animation-delay: calc(.4s + 6 * .26s + .4s); }
  .strata__n { font: 500 13px/1 var(--font-mono); color: var(--muted); min-width: 2ch; }
  .strata__name { font: 500 min(clamp(16px, 1.45vw, 22px), calc(var(--sh) * .5))/1.2 var(--font-display); letter-spacing: -0.015em; white-space: nowrap; }
  .strata__icons { display: inline-flex; gap: 6px; align-items: center; }
  .strata__icons .ic-tile { --tile: min(28px, calc(var(--sh) - 8px)); }
  .strata__glyph { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }
  .strata__sub { font: 400 13px/1.2 var(--font-mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .strata__band--top .strata__name { color: var(--accent); }
  @keyframes strata-in { to { opacity: 1; transform: none; } }
  @keyframes strata-ring { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.8); } }
  @media (prefers-reduced-motion: reduce) { .strata__band { animation: none; opacity: 1; transform: none; } .strata__band--top::after { animation: none; } }
  @media (max-width: 1023px) { .hero--strata { --sh: calc(min(40svh, 420px) / 7.2); --sx: 7%; } .strata__sub { display: none; } }
  @media (max-width: 639px) {
    .hero--strata { --sh: calc(32svh / 7); --sx: 5%; }
    .hero--strata h1 { font-size: 40px; line-height: 1.04; }
    .hero--strata h1 .h1-line { display: inline; }
    #allitas .mo-la__type { font-size: clamp(36px, 12.4vw, 56px); }
    .strata__band { padding: 0 var(--s-3); gap: var(--s-2); }
    .strata__icons { display: none; }
    .strata__name { font-size: 13px; }
  }
  /* app-frame (sections-library.md, app-frame) */
  .app.ui { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: var(--s-7); background: var(--u-bg); border: 1px solid var(--u-border); border-radius: var(--u-r); box-shadow: var(--u-shadow); }
  .app > .app__pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
  .app > .app__pane + .app__pane { border-left: 1px solid var(--u-line); }
  .app > .app__pane > .ui-panel { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
  .app > .app__pane::after { content: ""; position: absolute; inset: auto 0 0 0; height: 64px; background: linear-gradient(transparent, var(--u-bg)); pointer-events: none; }
  @media (min-width: 1024px) and (max-width: 1279px) { .app.ui { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
  @media (max-width: 1023px) {
    .app.ui { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .app > .app__pane--list { max-height: 252px; }
    .app > .app__pane--list::after { display: none; }
    .app .ui-win__side { display: none; }
    .app .ui-win__body { grid-template-columns: minmax(0, 1fr); }
    .app > .app__pane + .app__pane { border-left: 0; border-top: 1px solid var(--u-line); }
  }
  @media (max-width: 639px) {
    .app.ui { grid-template-rows: minmax(0, 1fr); }
    .app > .app__pane--list { display: none; }
    .app > .app__pane + .app__pane { border-top: 0; }
  }
  #nyilt-forras .frame--split { --ratio: 100%; }
  #allitas .wrap { display: flex; flex-direction: column; height: 100%; }
  .stack-row { list-style: none; margin: auto 0 0; padding: var(--s-6) 0 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-5) var(--s-4); border-top: 1px solid var(--line); }
  .stack-row li { display: grid; justify-items: center; gap: var(--s-2); font: 500 13px/1.3 var(--font-mono); color: var(--muted); }
  @media (max-width: 639px) { .stack-row { justify-content: flex-start; gap: var(--s-4); } .stack-row li { width: calc((100% - 3 * var(--s-4)) / 4); } .stack-row .ic-tile--wide { width: var(--tile); } .stack-row .ic-tile--wide > .ic { width: 82%; } }
  @media (max-width: 639px) { #nyilt-forras .frame--split { --ratio: 130%; } }
  @media (min-width: 640px) and (max-width: 1023px) { #nyilt-forras .frame--split { --ratio: 62%; } }
  /* the phone in the mobile split */
  .device { width: 300px; border-radius: 44px; background: #0b0f0d; padding: 10px; box-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 30px 60px -30px rgb(0 0 0 / .55); }
  .device__screen { border-radius: 34px; background: #f1f0e9; color: #161c1a; padding: 44px 22px 28px; display: grid; gap: 14px; font: 400 14px/1.4 var(--font-text); min-height: 560px; align-content: start; }
  .device__top { display: flex; justify-content: space-between; align-items: baseline; }
  .device__top b { font: 500 20px/1.2 var(--font-display); letter-spacing: -0.02em; }
  .device__chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: #2c6448; }
  .device__chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2c6448; }
  .device__temp { font: 500 56px/1 var(--font-display); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
  .device__temp small { font-size: 24px; letter-spacing: -0.02em; }
  .device__muted { color: #555a55; font-size: 13px; }
  .device svg { width: 100%; height: auto; display: block; }
  .device__row { display: flex; justify-content: space-between; padding-top: 10px; border-top: 1px solid rgb(22 28 26 / .12); font-variant-numeric: tabular-nums; }
  .device__row b { font-weight: 500; }
  .device__btn { margin-top: 4px; height: 44px; border-radius: 99px; background: #161c1a; color: #f1f0e9; display: grid; place-items: center; font-weight: 500; }
  .facts-list { list-style: none; padding: 0; margin: var(--s-5) 0 0; display: grid; gap: var(--s-3); }
  .facts-list li { padding-top: var(--s-3); border-top: 1px solid var(--line); }
  .lang-link { font-variant: normal; }

/* ===== the climb: the layer sections ===== */
/* the gauge: a small copy of the hero's staircase, the current layer lit */
.layer-head { align-items: start; }
.layer-head__side { display: grid; gap: var(--s-4); }
.layer-head__side > p { margin: 0; font-size: var(--t-lead); line-height: 1.5; }
.gauge { display: flex; align-items: flex-end; gap: var(--s-4); }
.gauge svg { width: 126px; height: 33px; flex: none; }
.gauge .g-lo { fill: color-mix(in oklab, var(--ink) 34%, transparent); }
.gauge .g-on { fill: var(--accent); }
.gauge .g-hi { fill: none; stroke: color-mix(in oklab, var(--ink) 26%, transparent); stroke-width: 1.5; }
.gauge__label { font: 500 13px/1.2 var(--font-mono); color: var(--muted); }
.gauge__label b { color: var(--ink); font-weight: 500; margin-right: 6px; }

/* the datasheet: mono labels, plain values, hairlines */
.spec { margin: 0; display: grid; }
.spec > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: var(--s-4); padding: 10px 0; border-top: 1px solid var(--line); }
.spec > div:last-child { border-bottom: 1px solid var(--line); }
.spec dt { font: 500 13px/1.6 var(--font-mono); color: var(--muted); }
.spec dd { margin: 0; font-size: 16px; line-height: 1.5; }
.spec--row { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s-5); }
.spec--row > div { grid-template-columns: minmax(0, 1fr); gap: 2px; border-bottom: 0; }
.spec--row > div:last-child { border-bottom: 0; }

/* every moving visual: runs only on screen, holds when paused, rests under reduced motion */
[data-loop]:is([data-paused], :not([data-visible])) *, [data-loop]:is([data-paused], :not([data-visible])) *::before, [data-loop]:is([data-paused], :not([data-visible])) *::after { animation-play-state: paused !important; }
[data-loop] > .loop-pause { position: absolute; right: 12px; bottom: 12px; z-index: 5; }

/* 01 the byte lab */
.bytelab { display: block; position: relative; overflow: hidden; padding: var(--s-6) var(--s-7) 0; background: #0d1210; color: #d6d9d1;
  border-color: color-mix(in oklab, #e3e2da 10%, transparent); --line: rgb(227 226 218 / .12); --muted: #8e948d; --ink: #e3e2da; }
.bytelab__tabs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-5); }
.bytelab__tabs button { font: 500 13px/1 var(--font-mono); padding: 11px 14px; border-radius: 99px; border: 1px solid rgb(227 226 218 / .16); background: transparent; color: #a9aea7; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
@media (hover: hover) and (pointer: fine) { .bytelab__tabs button:hover { border-color: rgb(227 226 218 / .4); color: #e3e2da; } }
.bytelab__tabs button[aria-selected="true"] { background: #9fc7b8; color: #161c1a; border-color: transparent; }
.bytelab__phase { display: none; gap: 10px; }
.bytelab__phase[data-on] { display: grid; }
.bl-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: var(--s-4); }
.bl-k { font: 500 13px/1 var(--font-mono); color: #8e948d; }
.bl-cells { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bl-cell { width: 52px; height: 42px; display: grid; place-items: center; font: 500 18px/1 var(--font-mono); border-radius: 8px; border: 1px solid rgb(227 226 218 / .14); background: rgb(227 226 218 / .04); }
.bl-out .bl-cell { opacity: .12; transform: translateY(6px); }
.bytelab__phase[data-on] .bl-out .bl-cell { animation: bl-in .35s ease forwards; animation-delay: calc(.5s + var(--k) * .18s); }
.bytelab__phase[data-on] .bl-row--wire .bl-cell { animation-delay: calc(1.5s + var(--k) * .12s); }
.bl-bad .bl-cell { border-color: rgb(224 122 106 / .7); color: #f2b3a8; background: rgb(224 122 106 / .12); }
.bl-mark { margin-left: 6px; font: 500 13px/1 var(--font-mono); padding: 10px 12px; border-radius: 8px; opacity: 0; }
.bytelab__phase[data-on] .bl-mark { animation: bl-in .35s ease 2.2s forwards; }
.bl-mark--ok { color: #9fd1a8; border: 1px solid rgb(159 209 168 / .4); }
.bl-mark--bad { color: #f2b3a8; border: 1px solid rgb(224 122 106 / .55); }
.bl-status { margin: var(--s-2) 0 0; font-size: 16px; line-height: 1.5; opacity: 0; }
.bytelab__phase[data-on] .bl-status { animation: bl-in .4s ease 2.6s forwards; }
.bl-status--ok::before { content: "✓  "; color: #9fd1a8; }
.bl-status--bad::before { content: "✕  "; color: #f2b3a8; }
@keyframes bl-in { to { opacity: 1; transform: none; } }
.bytelab .spec--row { position: absolute; left: var(--s-7); right: 64px; bottom: var(--s-4); }
.bytelab .spec--row dd { color: #e3e2da; }

/* 02 desktop: a measuring window over the lit ground, a floor plan card at its foot */
.desk { --ratio: 100%; padding: 0; display: block; }
.desk__win { position: absolute; left: 32px; top: 32px; right: -40px; height: 58%; border-radius: 12px; overflow: hidden; background: #0d1210; color: #d6d9d1;
  box-shadow: 0 1px 2px rgb(0 0 0 / .2), 0 24px 48px -24px rgb(0 0 0 / .5); display: grid; grid-template-rows: auto 1fr; }
.desk__bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgb(227 226 218 / .1); font: 500 13px/1 var(--font-mono); color: #a9aea7; }
.desk__bar b { color: #e3e2da; font-weight: 500; }
.desk__rec { color: #f2b3a8; animation: rec 1.2s steps(2, jump-none) infinite; }
@keyframes rec { 50% { opacity: .35; } }
.desk__traces { display: grid; grid-template-rows: repeat(3, 1fr); padding: 6px 0; }
.desk__ch { position: relative; overflow: hidden; border-bottom: 1px dashed rgb(227 226 218 / .08); }
.desk__ch span { position: absolute; left: 16px; top: 8px; font: 500 12px/1 var(--font-mono); color: #8e948d; z-index: 1; }
.desk__ch svg { position: absolute; left: 0; top: 0; width: 200%; height: 100%; animation: trace 7s linear infinite; }
.desk__ch path { fill: none; stroke: #d6d9d1; stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.desk__ch--gsr path { stroke: #9fc7b8; stroke-width: 2; }
.desk__ch--gsr svg { animation-duration: 14s; }
@keyframes trace { to { transform: translateX(-50%); } }
.desk__plan { position: absolute; left: 32px; bottom: 32px; width: 58%; border-radius: 12px; background: #f4f3ee; color: #161c1a; padding: 14px 16px 12px;
  box-shadow: 0 1px 2px rgb(0 0 0 / .15), 0 24px 48px -24px rgb(0 0 0 / .45); }
.desk__planbar { display: flex; justify-content: space-between; gap: 12px; font: 500 13px/1 var(--font-mono); margin-bottom: 10px; }
.desk__planbar span { color: #a0402f; }
.desk__plan svg { width: 100%; height: auto; display: block; }
.pl-wall { fill: none; stroke: #161c1a; stroke-opacity: .5; stroke-width: 2; }
.pl-room { fill: #f4f3ee; stroke: #161c1a; stroke-opacity: .28; }
.pl-room--alarm { animation: alarm 1.4s ease-in-out infinite; }
@keyframes alarm { 50% { fill: #f2c4b8; } }
.desk__plan text { font: 500 12px/1 var(--font-mono); fill: #555a55; text-anchor: middle; }
.pl-cam { fill: #2c6448; } .pl-fov { fill: #2c6448; fill-opacity: .14; }

/* 04 web: the migration lanes between the old and the new database */
.mig { --ratio: 100%; padding: var(--s-6); display: grid; grid-template-columns: 124px minmax(0, 1fr) 124px; grid-template-rows: 1fr auto; gap: var(--s-4); align-items: center; }
.mig::before { display: none; }
.mig__db { display: grid; gap: 6px; align-content: center; padding: 16px 14px; border-radius: 12px; background: #161c1a; color: #e3e2da; min-height: 168px; text-align: left; }
.mig__db b { font: 500 16px/1.2 var(--font-display); }
.mig__eng, .mig__n { font: 500 12px/1.3 var(--font-mono); color: #a9aea7; }
.mig__db--new { background: #23302b; box-shadow: inset 0 0 0 1px #9fc7b8; }
.mig__db--new .ic-tile { --tile: 28px; margin-bottom: 4px; }
.mig__lanes { display: grid; gap: 6px; }
.mig__row { display: grid; grid-template-columns: 78px minmax(0, 1fr) 16px; align-items: center; gap: 8px; height: 32px; }
.mig__name { font: 500 13px/1 var(--font-mono); color: #2a2622; white-space: nowrap; }
.mig__track { position: relative; height: 10px; border-bottom: 1px dashed rgb(42 38 34 / .3); }
.mig__track i { position: absolute; left: 0; bottom: -4px; width: 14px; height: 8px; border-radius: 3px; background: #2a2622; opacity: 0;
  animation: chip 2.7s linear infinite; animation-delay: calc(var(--k) * -.34s); }
.mig__track i:nth-child(2) { animation-delay: calc(var(--k) * -.34s - .9s); }
.mig__track i:nth-child(3) { animation-delay: calc(var(--k) * -.34s - 1.8s); }
@keyframes chip { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 14px); opacity: 0; } }
.mig__ok { width: 16px; height: 16px; fill: none; stroke: #2c6448; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mig__nav { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; background: rgb(42 38 34 / .06); font: 500 13px/1 var(--font-mono); color: #2a2622; }
.mig__nav .ic-tile { --tile: 24px; }
.mig__nav i { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: #2c6448; animation: rec 1.6s steps(2, jump-none) infinite; }

/* 05 mobile: probe, phone, server in one wide frame on the effect ground */
.mob { display: grid; grid-template-columns: minmax(0, 1fr) 72px auto 72px minmax(0, 1fr); align-items: center; gap: var(--s-4); padding: var(--s-6) var(--s-7) 0; overflow: hidden; }
.mob > * { position: relative; z-index: 1; }
.mob__probe, .mob__srv { display: grid; gap: 4px; padding: 16px 18px; border-radius: 12px; background: #f4f3ee; color: #161c1a; align-self: center; box-shadow: 0 1px 2px rgb(0 0 0 / .12), 0 18px 36px -20px rgb(0 0 0 / .35); }
.mob__probe b, .mob__srv b { font: 500 16px/1.2 var(--font-display); }
.mob__probe span:last-child, .mob__srv span:last-child { font: 500 12px/1.35 var(--font-mono); color: #555a55; }
.mob__ico .strata__glyph { color: #2c6448; width: 22px; height: 22px; }
.mob__srv .ic-tile { --tile: 28px; }
.mob__link { display: flex; justify-content: space-between; align-items: center; height: 12px; }
.mob__link i { width: 8px; height: 8px; border-radius: 50%; background: #161c1a; opacity: .15; animation: hop 1.5s ease-in-out infinite; }
.mob__link i:nth-child(2) { animation-delay: .2s; } .mob__link i:nth-child(3) { animation-delay: .4s; }
.mob__link--sync i { background: #2c6448; }
@keyframes hop { 30% { opacity: .9; transform: scale(1.35); } 60% { opacity: .15; transform: none; } }
.mob .device { width: 236px; align-self: end; margin-bottom: -40px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.mob .device__screen { min-height: 0; padding: 30px 18px 56px; gap: 10px; }
.mob .device__temp { font-size: 44px; }
.device__curve { stroke-dasharray: 1; stroke-dashoffset: 1; animation: curve 4s ease-in-out infinite; }
@keyframes curve { 0% { stroke-dashoffset: 1; } 60%, 100% { stroke-dashoffset: 0; } }
.mob__spec { grid-column: 1 / -1; align-self: end; }
.mob .spec--row { display: none; }

/* 06 infrastructure topology */
.topo { --ratio: 100%; padding: var(--s-5); display: block; }
.topo__svg { position: absolute; inset: 20px; width: calc(100% - 40px); height: calc(100% - 40px); }
.tp-link { fill: none; stroke: #2a2622; stroke-opacity: .28; stroke-width: 1.5; }
.tp-edge rect { fill: #161c1a; }
.tp-edge__t { font: 500 16px/1 var(--font-display); fill: #e3e2da; }
.tp-edge__s { font: 500 11px/1 var(--font-mono); fill: #a9aea7; }
.tp-node rect { fill: #f4f3ee; stroke: #2a2622; stroke-opacity: .3; }
.tp-ix { font: 500 12px/1 var(--font-mono); fill: #2a2622; text-anchor: middle; }
.tp-label { font: 500 12px/1 var(--font-mono); fill: #2a2622; text-anchor: middle; }
.tp-code rect { fill: #2a2622; fill-opacity: .07; stroke: #2a2622; stroke-opacity: .2; }
.tp-code text { font: 500 13px/1 var(--font-mono); fill: #2a2622; text-anchor: middle; }
.tp-pulse { fill: #2c6448; } .tp-pulse--down { fill: #a8794a; }

/* 07 documents stacking up like the hero's layers */
.docs { display: block; padding: 0; --dh: clamp(44px, 7.6svh, 68px); }
.docs__stack { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; right: 42%; bottom: 0; top: 0; }
.docs__sheet { position: absolute; left: calc(28px + var(--i) * 4.6%); bottom: calc(28px + var(--i) * var(--dh) * .9); width: 64%; height: var(--dh);
  display: flex; align-items: center; gap: 14px; padding: 0 16px; border-radius: 8px; background: #fbfaf6; color: #161c1a;
  box-shadow: 0 1px 1px rgb(0 0 0 / .08), 0 10px 24px -14px rgb(0 0 0 / .35); border: 1px solid rgb(22 28 26 / .1);
  opacity: 0; transform: translateY(-16px); animation: sheet 8s cubic-bezier(.2, .7, .2, 1) infinite; animation-delay: calc(var(--i) * .34s); }
@keyframes sheet { 0% { opacity: 0; transform: translateY(-16px); } 7% { opacity: 1; transform: none; } 84% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
.docs__code { font: 500 12px/1 var(--font-mono); color: #555a55; min-width: 64px; }
.docs__name { font: 500 16px/1.2 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docs__ext { margin-left: auto; font: 500 11px/1 var(--font-mono); color: #2b5797; }
.docs__sheet--top { box-shadow: 0 0 0 1.5px #2c6448, 0 10px 24px -14px rgb(0 0 0 / .35); }
.docs__stamp { font: 500 12px/1 var(--font-mono); color: #f4f3ee; background: #2c6448; padding: 6px 8px; border-radius: 6px; }
.docs__grants { position: absolute; right: 32px; top: 32px; width: calc(42% - 64px); }
.docs__grants dd { color: #2a2622; }

/* open source: the branch graph */
.git { --ratio: 110%; padding: var(--s-5); display: block; }
.git__svg { position: absolute; inset: 24px; width: calc(100% - 48px); height: calc(100% - 48px); }
.gt-main { stroke: #2a2622; stroke-width: 3; stroke-linecap: round; }
.gt-ref { font: 500 13px/1 var(--font-mono); fill: #555a55; }
.gt-branch { fill: none; stroke: #2c6448; stroke-width: 2; }
.gt-commit { fill: #f4f3ee; stroke: #2c6448; stroke-width: 2; }
.gt-merge { fill: #2a2622; stroke: #f4f3ee; stroke-width: 2; }
.gt-n { font: 500 14px/1 var(--font-mono); fill: #2a2622; }
.gt-t { font: 400 14px/1 var(--font-text); fill: #555a55; }
.gt-pulse { fill: #9fc7b8; stroke: #2c6448; stroke-width: 1.5; }

/* reduced motion: every visual at its finished picture */
@media (prefers-reduced-motion: reduce) {
  .bl-out .bl-cell, .bl-mark, .bl-status, .docs__sheet { animation: none !important; opacity: 1; transform: none; }
  .desk__ch svg, .mig__track i, .mob__link i, .device__curve, .desk__rec, .pl-room--alarm, .mig__nav i { animation: none !important; }
  .device__curve { stroke-dashoffset: 0; }
  .mig__track i:first-child { opacity: 1; left: 45%; }
}

/* tablet and phone */
@media (max-width: 1279px) {
  .bl-cell { width: 44px; height: 38px; font-size: 16px; }
}
@media (max-width: 1023px) {
  .desk, .mig, .topo { --ratio: 80%; }
  .git { --ratio: 90%; }
  .mob { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .mob__link { display: none; }
  .docs__stack { position: relative; right: auto; height: calc(7 * var(--dh) * .9 + var(--dh) + 56px); }
  .docs__grants { position: static; width: auto; margin: 0 28px 28px; }
  .docs__sheet { width: 64%; }
}
@media (max-width: 639px) {
  .bytelab { padding: var(--s-5) var(--s-4) 0; }
  .bl-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .bl-cell { width: 36px; height: 34px; font-size: 14px; }
  .bl-mark { margin-left: 0; }
  .bytelab .spec--row { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: var(--s-5) 0 var(--s-6); }
  .spec > div { grid-template-columns: 7.5em minmax(0, 1fr); }
  .desk, .mig, .topo, .git { --ratio: 118%; }
  .desk__plan { width: calc(100% - 48px); left: 24px; bottom: 24px; }
  .desk__win { left: 16px; top: 16px; height: 46%; }
  .mig { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; padding: var(--s-4); }
  .mig__db { min-height: 0; }
  .mob { grid-template-columns: minmax(0, 1fr); padding: var(--s-5) var(--s-4) 0; justify-items: center; }
  .mob__probe, .mob__srv { display: none; }
  .docs__sheet { width: calc(100% - 64px); left: calc(16px + var(--i) * 2%); }
  .gauge svg { width: 98px; height: 26px; }
}

/* frames laid out as blocks keep their ratio through a block ::before */
.desk::before, .topo::before, .git::before { display: block; }
/* the byte lab fills its frame: larger cells, more air */
.bytelab__phase { gap: 14px; }
.bl-row { grid-template-columns: 128px minmax(0, 1fr); }
.bl-cell { width: 74px; height: 60px; font-size: 26px; border-radius: 10px; }
.bl-cells { gap: 10px; }
.bl-k { font-size: 14px; }
.bl-mark { font-size: 14px; padding: 12px 14px; }
.bl-status { font-size: 18px; margin-top: var(--s-3); }
@media (max-width: 1279px) { .bl-cell { width: 58px; height: 50px; font-size: 21px; } }
@media (max-width: 639px) { .bl-cell { width: 40px; height: 36px; font-size: 15px; } .bl-row { grid-template-columns: minmax(0, 1fr); } }

/* system.css positions a frame's children relatively; these visuals place their parts themselves */
.frame > :is(.desk__win, .desk__plan, .topo__svg, .git__svg, .docs__stack, .docs__grants, .spec--row) { position: absolute; }
.frame > .loop-pause { position: absolute; }
@media (max-width: 1023px) { .frame > :is(.docs__stack, .docs__grants) { position: relative; } }
@media (max-width: 639px) { .frame.bytelab > .spec--row { position: static; } }
.mig { min-height: clamp(440px, 64svh, 620px); }
.mig__lanes { gap: 12px; }
.mig__row { height: 40px; }
/* the mobile frame: every part on its own cell (the effect's canvas must not take one) */
.mob > .mob__probe { grid-area: 1 / 1; } .mob > .mob__link--ble { grid-area: 1 / 2; } .mob > .device { grid-area: 1 / 3; }
.mob > .mob__link--sync { grid-area: 1 / 4; } .mob > .mob__srv { grid-area: 1 / 5; }
.mob > :is(canvas, .frame__fx) { position: absolute; inset: 0; }
@media (max-width: 1023px) { .mob > .mob__probe { grid-area: 1 / 1; } .mob > .device { grid-area: 1 / 2; } .mob > .mob__srv { grid-area: 1 / 3; } }
@media (max-width: 639px) { .mob > .device { grid-area: 1 / 1; } }

@media (max-width: 639px) { .desk { --ratio: 150%; } .desk__win { height: 50%; } }
@media (max-width: 639px) { .desk__gain { display: none; } .desk__bar { gap: 10px; } }

/* phone and tablet: the layers stand in the flow under the words, so a larger text size (a phone's
   text-scaling setting) pushes them down instead of sliding them under the buttons; the hero then grows */
@media (max-width: 1023px) {
  main > section.hero--strata { height: auto; min-height: 100svh; display: flex; flex-direction: column; overflow: visible; }
  .hero--strata > .wrap { order: 0; flex: none; }
  .hero--strata > .strata { order: 1; position: relative; left: auto; right: auto; bottom: auto; top: auto; height: auto;
    margin-top: var(--s-7); display: flex; flex-direction: column-reverse; flex: none; }
  .hero--strata .strata__band { position: relative; left: auto; right: auto; bottom: auto; flex: none; height: var(--bh, 46px);
    margin-left: calc(var(--i) * var(--sx)); }
}
@media (max-width: 639px) {
  .hero--strata { --bh: 38px; --sx: 5.5%; }
  .hero--strata > .strata { margin-top: var(--s-6); }
  .hero--strata .btn-row { gap: var(--s-3); }
}

/* phones: sections follow their content, so a larger text size never runs one section into the next */
@media (max-width: 639px) {
  main > :is(section, .section):not(.hero) { height: auto; min-height: 0; }
  main > :is(section, .section):not(.hero) > .wrap > .fill, main > :is(section, .section):not(.hero) .frame.fill { flex: none; }
  .bytelab.fill, .mob.fill { min-height: 0; }
}
/* the topology: the wide drawing from 640px, the two-column one on a phone */
.topo__svg--phone { display: none; }
@media (max-width: 639px) {
  .topo { --ratio: 0px; }
  .topo::before { display: none; }
  .topo__svg--wide { display: none; }
  .frame > .topo__svg--phone { display: block; position: relative; inset: auto; width: 100%; height: auto; }
  .tp-label--side { text-anchor: start; font-size: 14px; }
}
/* the documents keep their whole stack below 1024px, and their names on a phone */
@media (max-width: 1023px) {
  .docs.fill { flex: none; height: auto; }
}
@media (max-width: 639px) {
  .docs { --dh: 46px; }
  .docs__sheet { gap: 10px; padding: 0 12px; width: calc(100% - 24px - 7 * 3%); left: calc(12px + var(--i) * 3%); }
  .docs__code { min-width: 0; }
  .docs__ext { display: none; }
  .docs__stamp { padding: 5px 6px; }
}
/* the language and tool row: three to a line on a phone so long names keep their space */
@media (max-width: 639px) {
  .stack-row li { width: calc((100% - 2 * var(--s-4)) / 3); }
}

@media (max-width: 1023px) { .frame > .docs__grants { right: auto; top: auto; width: auto; } }
@media (max-width: 639px) { #allitas .mo-la__type { font-size: clamp(32px, 10vw, 52px); } .tp-label--side { font-size: 13px; } }

/* ===== break-ui pass: phones at 320-412px with enlarged text (Android text scaling) =====
   The datasheet row: each item is one column (label over value); the phone .spec > div rule must not reach it */
.spec.spec--row > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.spec dt, .spec dd { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 639px) {
  .spec > div { grid-template-columns: minmax(6.5em, 38%) minmax(0, 1fr); }
  .spec.spec--row > div { grid-template-columns: minmax(0, 1fr); }
  .spec.spec--row { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-4); }
}
/* the header on a narrow phone: the name may shorten, the menu button never leaves */
.nav__logo { min-width: 0; }
.nav__actions, .nav__toggle { flex-shrink: 0; }
/* the byte lab: labels never squeeze the cells, cells keep their square */
.bl-cell { flex-shrink: 0; }
/* migration lanes: the name column is sized in em, so it grows with enlarged text and every bar starts on one line */
.mig__row { grid-template-columns: 5.4em minmax(24px, 1fr) 16px; }
@media (max-width: 639px) { .mig__row { height: auto; min-height: 36px; } }
/* the phone mock: its rows wrap instead of running past the screen */
.device__screen > * { min-width: 0; }
.device__row, .device__top { gap: 8px; flex-wrap: wrap; }
.device__muted, .device__row span { overflow-wrap: anywhere; }
/* the desktop window bar wraps on a phone */
@media (max-width: 639px) { .desk__bar { flex-wrap: wrap; row-gap: 4px; } .desk__planbar { flex-wrap: wrap; } }
/* gauge label can wrap beside its bars */
.gauge__label { min-width: 0; }
/* FAQ and lead text: long words (URLs, compound Hungarian words) break only when they must */
.faq__item p, .t-lead, .hero__lead, .layer-head__side > p, .mo-la__sub { overflow-wrap: break-word; }

/* ===== break-ui pass 2: what the scan at 320-412px with text at 130-150% found ===== */
/* header: the name may shorten, the mail button turns into a 44px icon on a phone, the menu button never leaves the screen */
.nav__mail-ic { display: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nav .nav__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 639px) {
  .nav .nav__logo { flex: 0 1 auto; min-width: 0; }
  .nav:not(.is-open) .nav__actions .nav__mail { width: 44px; padding: 0; justify-content: center; }
  .nav:not(.is-open) .nav__mail .nav__mail-ic { display: block; }
  .nav:not(.is-open) .nav__mail .nav__mail-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* the terminal on a phone is a still picture (ui.js holds every fragment under 640px), so its lines wrap
   instead of ending in an ellipsis: the commands are the point of the picture */
@media (max-width: 639px) {
  .ui-term__track { line-height: 1.55; }
  .ui-term__ln { height: auto; min-height: 20px; flex-wrap: wrap; white-space: normal; column-gap: 8px; }
  .ui-term__ln > * { flex: 0 1 auto; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .ui-term__cmd { column-gap: 0; }
  .ui-term__path { flex: 1 1 auto; }
  .ui-term__t { width: auto; margin-left: auto; }
  .ui-term__key { width: auto; min-width: 5.5em; }
  .ui-term__gap { min-height: 10px; }
  .ui-term__head { height: auto; min-height: 40px; }
  .ui-term__title { line-height: 1.25; }
}
/* the document stack on a phone: in flow, the first sheet at the bottom, each name whole (wrapping when it must) */
@media (max-width: 639px) {
  .frame > .docs__stack, .docs__stack { position: relative; display: flex; flex-direction: column-reverse; gap: 6px; height: auto; padding: 16px 12px; right: auto; }
  .docs__sheet { position: relative; left: auto; bottom: auto; width: auto; height: auto; min-height: 46px; margin-left: calc(var(--i) * 5px); padding: 8px 12px; flex-wrap: wrap; row-gap: 4px; }
  .docs__name { flex: 1 1 8em; min-width: 0; white-space: normal; overflow: visible; overflow-wrap: anywhere; }
  .docs__stamp { margin-left: auto; }
}
/* the language and tool row on a phone: as many columns as the names fit (three at normal text, two when it is enlarged) */
@media (max-width: 639px) {
  .stack-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.4em, 1fr)); font-size: 13px; justify-content: stretch; }
  .stack-row li { width: auto; min-width: 0; text-align: center; }
  .stack-row li > span { overflow-wrap: anywhere; }
}
/* footer links never run into the next column */
.footer__col { min-width: 0; }
.footer__col a { overflow-wrap: anywhere; }
/* buttons on a phone: a long label (enlarged text, the English words) wraps inside the button instead of widening the page */
@media (max-width: 639px) {
  .btn { white-space: normal; text-align: center; height: auto; min-height: var(--btn-h); padding-block: 10px; line-height: 1.2; }
  .btn--xl, .btn--xl.btn--wide { height: auto; min-height: 48px; line-height: 1.2; }
  #allitas .mo-la__type { overflow-wrap: break-word; hyphens: auto; }
}
/* the icon mail button carries no arrow; the terminal's shell name gives its room to the title */
@media (max-width: 639px) {
  html[data-buttons] .nav:not(.is-open) .nav__mail::after { display: none; }
  .ui-term__head .ui-meta { display: none; }
}
/* the desktop mock: the floor plan sits above the channel window, channel labels read over their traces */
.desk__plan { z-index: 2; }
.desk__ch span { background: rgb(17 21 20 / .78); padding: 2px 5px; border-radius: 4px; }

/* mobile-native baseline: no grey flash on tap, no double-tap delay on controls, hover effects only where a mouse hovers */
html { -webkit-tap-highlight-color: transparent; }
a, button, summary, [role="button"], .btn { touch-action: manipulation; }
button, .btn, .nav__toggle, .loop-pause, [data-seq-go] { -webkit-user-select: none; user-select: none; }
/* the narrowest case (a 360px phone with page zoom and large text, about 260px of CSS width): nothing may widen the page */
@media (max-width: 639px) {
  .gauge { flex-wrap: wrap; row-gap: 8px; }
  .gauge__label { white-space: normal; overflow-wrap: anywhere; }
  .link { display: inline; overflow-wrap: anywhere; }
  .link::after { margin-left: .4em; }
  .hero--strata .strata__band { height: auto; min-height: var(--bh, 38px); }
  .hero--strata .strata__name { white-space: normal; min-width: 0; overflow-wrap: anywhere; line-height: 1.1; }
  .spec > div, .spec.spec--row > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
/* headings: a word too long for a phone line is hyphenated by the language's rules, never cut at a random letter */
@media (max-width: 639px) { h1, h2, h3 { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 5 5; } }

/* ===================================================================================================
   v2: the plain page. Situations, the competence network, three cases, AI and analytics, the two own sites.
   These sections follow their content at every width (.flow), so no text size can overrun a screen. */
main > section.section.flow { height: auto; min-height: 0; }
.flow > .wrap > h2 { margin-bottom: var(--s-7); max-width: 18ch; }
.flow .layer-head { margin-bottom: var(--s-7); }

/* situations */
.sit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s-6); }
.sit__item { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5) 0 var(--s-6); border-top: 1px solid var(--line); }
.sit__n { font: 500 13px/1 var(--font-mono); color: var(--accent); }
.sit__q { margin: 0; font: var(--display-weight) clamp(20px, 1.5vw, 24px)/1.25 var(--font-display); letter-spacing: var(--display-tracking); color: var(--ink); }
.sit__a { margin: 0; color: var(--muted); line-height: 1.5; }

/* the competence network */
.net { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7); align-items: start; }
.net__map { display: grid; grid-template-columns: minmax(0, 1fr) clamp(36px, 18%, 150px) minmax(0, 1fr); grid-template-rows: auto 1fr; row-gap: var(--s-3); }
.net__cap { margin: 0; font: 500 13px/1.2 var(--font-mono); color: var(--muted); }
.net__col { display: grid; grid-auto-rows: 1fr; margin: 0; padding: 0; list-style: none; min-width: 0; }
.net__edges { width: 100%; height: 100%; min-height: 0; align-self: stretch; overflow: visible; }
.net__e { fill: none; stroke: color-mix(in oklab, var(--ink) 13%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke .25s ease; }
.net__e[data-lit] { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 7; animation: netflow 1s linear infinite; }
@keyframes netflow { to { stroke-dashoffset: -12; } }
.net:not([data-visible]) .net__e, .net[data-paused] .net__e { animation-play-state: paused; }
.net__a, .net__f { display: flex; align-items: center; min-width: 0; min-height: 2.9em; margin: 4px 0; padding: 6px 14px; border-radius: var(--r-md);
  border: 1px solid var(--line); font: 500 15px/1.2 var(--font-text); color: var(--muted); background: transparent; text-align: left;
  -webkit-hyphens: manual; hyphens: manual; overflow-wrap: anywhere; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.net__a { cursor: pointer; }
.net__a[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
@media (hover: hover) and (pointer: fine) { .net__a:hover:not([aria-selected="true"]) { border-color: var(--line-strong); color: var(--ink); } }
.net__a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.net__f { border-style: dashed; opacity: .6; }
.net__f[data-lit] { opacity: 1; border-style: solid; border-color: var(--accent); color: var(--ink); background: color-mix(in oklab, var(--accent) 12%, transparent); }
.net__panel { display: grid; }
.net__card { grid-area: 1 / 1; display: grid; gap: var(--s-3); align-content: start; padding: var(--s-6) var(--s-6) calc(var(--s-6) + 36px); border-radius: var(--r-lg);
  background: color-mix(in oklab, var(--ink) 5%, transparent); border: 1px solid var(--line); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
.net__card[data-on] { opacity: 1; visibility: visible; transition-delay: 0s; }
.net__card h3 { margin: 0; font-size: clamp(24px, 2vw, 32px); line-height: 1.15; }
.net__card p { margin: 0; line-height: 1.5; }
.net__card .net__tl { margin-top: var(--s-3); font: 500 13px/1.2 var(--font-mono); color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips li { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line-strong); font: 500 13px/1.2 var(--font-mono); color: var(--ink); }

/* three cases */
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.case { display: grid; gap: var(--s-4); align-content: start; padding: var(--s-6); border-radius: var(--r-lg); border: 1px solid var(--line); background: color-mix(in oklab, var(--ink) 4%, transparent); }
.case__tag { margin: 0; font: var(--display-weight) clamp(22px, 1.7vw, 28px)/1.15 var(--font-display); letter-spacing: var(--display-tracking); color: var(--ink); }
.case dl { display: grid; gap: var(--s-4); margin: 0; }
.case dt, .ai__col h3 { margin: 0 0 4px; font: 500 13px/1.2 var(--font-mono); letter-spacing: 0; color: var(--muted); }
.case dd { margin: 0; line-height: 1.5; color: color-mix(in oklab, var(--ink) 82%, transparent); }
.case__res { padding-top: var(--s-4); border-top: 1px solid var(--line); }
.case__res dt { color: var(--accent); }
.case__res dd { color: var(--ink); font-weight: 500; }

/* AI and analytics */
.ai { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3.5fr) minmax(0, 3.5fr); gap: var(--s-7); align-items: start; }
.aiviz { position: relative; display: grid; gap: var(--s-5); padding: var(--s-6) var(--s-6) calc(var(--s-6) + 28px); border-radius: var(--r-lg); background: #0f1413; border: 1px solid var(--line); overflow: hidden; }
.aiviz__sig { height: 72px; overflow: hidden; }
.aiviz__sig svg { display: block; width: 200%; height: 100%; animation: trace 9s linear infinite; }
.aiviz__sig path { fill: none; stroke: #d6d9d1; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.aiviz__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.aiviz__tags li { padding: 6px 12px; border-radius: 999px; border: 1px solid rgb(227 226 218 / .18); font: 500 13px/1.2 var(--font-mono); color: #a9aea7; animation: tagon 4.5s linear infinite; animation-delay: calc(var(--k) * 1.5s); }
@keyframes tagon { 0%, 30% { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } 34%, 100% { background: transparent; border-color: rgb(227 226 218 / .18); color: #a9aea7; } }
.aiviz__bars { display: flex; align-items: flex-end; gap: 6px; height: 120px; }
.aiviz__bars i { flex: 1 1 0; height: calc(var(--v) * 100%); border-radius: 4px 4px 0 0; background: color-mix(in oklab, var(--accent) 70%, transparent); transform-origin: bottom;
  animation: bargrow 4.5s cubic-bezier(.2, .7, .2, 1) infinite; animation-delay: calc(var(--k) * .07s); }
.aiviz__bars i:last-child { background: var(--accent); }
@keyframes bargrow { 0% { transform: scaleY(.08); } 22%, 88% { transform: scaleY(1); } 100% { transform: scaleY(.08); } }
.aiviz:not([data-visible]) :is(svg, li, i), .aiviz[data-paused] :is(svg, li, i) { animation-play-state: paused; }
.ai__list { display: grid; margin: 0; }
.ai__list > div { padding: var(--s-4) 0; border-top: 1px solid var(--line); }
.ai__list dt { font: 500 17px/1.3 var(--font-text); color: var(--ink); margin-bottom: 4px; }
.ai__list dd { margin: 0; color: var(--muted); line-height: 1.5; }
.ai__col h3 { margin-bottom: var(--s-3); }

/* the two own sites */
.own { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.own__card { display: grid; gap: var(--s-4); align-content: start; padding: var(--s-7); border-radius: var(--r-lg); border: 1px solid var(--line); background: color-mix(in oklab, var(--ink) 4%, transparent);
  transition: border-color .2s ease, transform .2s ease; }
.own__name { font: var(--display-weight) clamp(34px, 4vw, 60px)/1 var(--font-display); letter-spacing: var(--display-tracking); color: var(--ink); }
.own__text { color: color-mix(in oklab, var(--ink) 78%, transparent); line-height: 1.5; font-size: var(--t-lead); }
.own__go { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s-3); font: 500 15px/1.2 var(--font-mono); color: var(--accent); overflow-wrap: anywhere; }
.own__go svg { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .own__card:hover { border-color: var(--accent); transform: translateY(-2px); } }
.own__card:active { transform: scale(.99); }

@media (prefers-reduced-motion: reduce) {
  .net__e[data-lit], .aiviz__sig svg, .aiviz__tags li, .aiviz__bars i { animation: none !important; }
  .aiviz__bars i { transform: none; }
}
@media (max-width: 1023px) {
  .sit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .net, .cases { grid-template-columns: minmax(0, 1fr); }
  .ai { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aiviz { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .flow > .wrap > h2, .flow .layer-head { margin-bottom: var(--s-6); }
  .sit, .ai, .own { grid-template-columns: minmax(0, 1fr); }
  .net { gap: var(--s-5); }
  .net__map { grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); }
  .net__a, .net__f { padding: 6px 10px; font-size: 14px; }
  .net__card, .case, .aiviz { padding: var(--s-5); }
  .net__card { padding-bottom: calc(var(--s-5) + 40px); }
  .aiviz { padding-bottom: calc(var(--s-5) + 32px); }
  .own__card { padding: var(--s-6) var(--s-5); }
}
/* v2 on the narrowest phones with enlarged text: grid children may shrink, long words hyphenate or break inside their card */
.sit__item, .case, .case dl > div, .own__card, .net__card, .ai__col, .ai__list > div { min-width: 0; }
.sit__q, .sit__a, .case__tag, .case dd, .own__name, .own__text, .net__card h3, .net__card p, .ai__list dt, .ai__list dd { min-width: 0; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
@media (max-width: 639px) { .own__name { font-size: clamp(28px, 10vw, 44px); } }
/* a small laptop: five words in the bar, so the middle column takes what the name and the actions leave */
@media (min-width: 1024px) and (max-width: 1279px) { .nav--centre .nav__bar { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-4); } .nav__actions { gap: var(--s-2); } }
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav .nav__link { font-size: 14px; padding: 0 6px; }
  .nav .nav__link::before { left: 6px; right: 6px; }
  .nav .nav__logo { font-size: 19px; }
  .nav .nav__actions .btn { padding-inline: var(--s-3); font-size: 14px; }
}
/* below 1024px the hero is as tall as its words and layers: on a tall screen (a phone in "desktop site" mode,
   a tablet upright) filling the whole screen left an empty band under the layers */
@media (max-width: 1023px) { main > section.hero--strata { min-height: 0; } }

/* ===================================================================================================
   colour pass (feedback: "a bit grey, too pastel, the teal could be brighter"). The palette tokens live in
   template.html; here the lines and the card grounds take a little of the teal instead of grey ink, so the
   dark page reads as deep green-blue rather than grey. */
:root { --line: color-mix(in oklab, var(--accent) 17%, transparent); --line-strong: color-mix(in oklab, var(--accent) 34%, transparent); }
.strata__band { background: color-mix(in oklab, var(--accent) calc(5% + var(--i) * 2.6%), var(--bg));
  border-top-color: color-mix(in oklab, var(--accent) calc(22% + var(--i) * 6%), transparent);
  border-left-color: color-mix(in oklab, var(--accent) calc(22% + var(--i) * 6%), transparent); }
.strata__band--top { border-top-color: var(--accent); border-left-color: var(--accent); }
.case, .own__card, .net__card { background: color-mix(in oklab, var(--accent) 7%, var(--bg)); }
.net__f[data-lit] { background: color-mix(in oklab, var(--accent) 18%, transparent); }
.net__e { stroke: color-mix(in oklab, var(--accent) 22%, transparent); }
.sit__item { border-top-color: color-mix(in oklab, var(--accent) 30%, transparent); }
.aiviz { background: #061110; border-color: color-mix(in oklab, var(--accent) 22%, transparent); }
.aiviz__sig path { stroke: color-mix(in oklab, var(--accent) 55%, #f1f5f2); }
.aiviz__tags li { border-color: color-mix(in oklab, var(--accent) 30%, transparent); color: #b9c9c3; }
@keyframes tagon { 0%, 30% { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  34%, 100% { background: transparent; border-color: color-mix(in oklab, var(--accent) 30%, transparent); color: #b9c9c3; } }
.aiviz__bars i { background: color-mix(in oklab, var(--accent) 55%, transparent); }
.hero--strata h1 .muted { color: color-mix(in oklab, var(--accent) 50%, var(--ink)); }
.btn--secondary { background: color-mix(in oklab, var(--accent) 12%, var(--bg)); }
@media (hover: hover) and (pointer: fine) { .btn--secondary:hover { background: color-mix(in oklab, var(--accent) 20%, var(--bg)); } }