/* Tanasa Teb Technology — the website.
   The kit's tokens (design/tokens/tokens.css) are the ground truth. The site adds a
   layout system for a brand rather than a dashboard: sections that alternate in tone,
   large type, one strong visual per idea (the product scene with the AIBox Omnix),
   hairline lists instead of grids of boxes, and glass only where something floats.
   Motion is kept to what tells the story; reduced motion stills all of it. */

@font-face { font-family: "Vazirmatn"; src: url("../fonts/Vazirmatn-arabic.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Vazirmatn"; src: url("../fonts/Vazirmatn-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; src: url("../fonts/Manrope-latin.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

/* ---------- tokens (kit, dark first) ---------- */
:root {
  color-scheme: dark;
  --bg-deep: #0a1424;
  --text: #f6f8fd; --text-2: #cbd6e8; --text-3: #9bb0d0; --text-4: #7a90b4;
  --accent: #4d9bff; --accent-hover: #6fafff; --accent-text: #8dc0ff; --accent-ink: #06182e;
  --accent-soft: rgba(77, 155, 255, .16); --accent-soft-border: rgba(77, 155, 255, .42);
  --good: #4fd9a8; --good-soft: rgba(79, 217, 168, .15); --good-border: rgba(79, 217, 168, .4);
  --warn: #ffc66b; --warn-soft: rgba(255, 198, 107, .15); --warn-border: rgba(255, 198, 107, .42);
  --bad: #ff7b7b; --bad-soft: rgba(255, 123, 123, .15); --bad-border: rgba(255, 123, 123, .45);
  --ai: #37d6b4; --ai-soft: rgba(55, 214, 180, .14); --ai-border: rgba(55, 214, 180, .4);

  /* surfaces — site additions, still by role */
  --band: rgba(15, 27, 45, .78);
  --band-accent: linear-gradient(135deg, #10305c 0%, #0c1f3b 55%, #0a1a31 100%);
  --glass-bg: rgba(24, 42, 68, .5);
  --glass-bg-strong: rgba(15, 27, 45, .82);
  --glass-edge: rgba(141, 192, 255, .16);
  --glass-hi: rgba(255, 255, 255, .07);
  --glass-shadow: 0 30px 70px -30px rgba(2, 8, 20, .8);
  --bloom-1: rgba(77, 155, 255, .28);
  --bloom-2: rgba(55, 214, 180, .16);
  --bloom-3: rgba(72, 106, 153, .34);
  --sector-line: rgba(141, 192, 255, .1);

  --font: "Vazirmatn", "Manrope", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --latin: "Manrope", "Vazirmatn", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r-sm: 8px; --r: 12px; --r-card: 16px; --r-panel: 28px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-fast: 140ms; --t: 220ms;
  --wrap: 1240px;
  --gutter: clamp(18px, 4vw, 44px);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg-deep: #e9eef7;
  --text: #0f1b2d; --text-2: #34465f; --text-3: #556686; --text-4: #59677e; /* text tones: 4.5:1 or more on every light surface */
  --accent: #1f6fe5; --accent-hover: #1a5fc7; --accent-text: #1b5fcc; --accent-ink: #ffffff;
  --accent-soft: rgba(31, 111, 229, .1); --accent-soft-border: rgba(31, 111, 229, .32);
  --good: #178a63; --good-soft: rgba(23, 138, 99, .12); --good-border: rgba(23, 138, 99, .35);
  --warn: #a86400; --warn-soft: rgba(240, 160, 40, .16); --warn-border: rgba(200, 130, 20, .4);
  --bad: #c93b3b; --bad-soft: rgba(220, 70, 70, .11); --bad-border: rgba(220, 70, 70, .38);
  --ai: #0b745d; --ai-soft: rgba(15, 159, 128, .1); --ai-border: rgba(15, 159, 128, .34);

  --band: rgba(255, 255, 255, .62);
  --band-accent: linear-gradient(135deg, #dce8fc 0%, #eaf1fb 55%, #f2f6fc 100%);
  --glass-bg: rgba(255, 255, 255, .6);
  --glass-bg-strong: rgba(255, 255, 255, .86);
  --glass-edge: rgba(15, 27, 45, .1);
  --glass-hi: rgba(255, 255, 255, .9);
  --glass-shadow: 0 30px 70px -34px rgba(15, 27, 45, .3);
  --bloom-1: rgba(31, 111, 229, .18);
  --bloom-2: rgba(15, 159, 128, .1);
  --bloom-3: rgba(152, 169, 199, .4);
  --sector-line: rgba(15, 27, 45, .07);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 100px; }
body {
  margin: 0; min-height: 100vh; min-height: 100svh; overflow-x: clip;
  display: flex; flex-direction: column;
  font: 400 16.5px/1.9 var(--font); color: var(--text-2);
  background: var(--bg-deep);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
[lang="en"] { font-family: var(--latin); }
:root[lang="en"] { --font: var(--latin); }
:root[lang="en"] body { line-height: 1.65; }
h1, h2, h3 { color: var(--text); margin: 0; font-weight: 800; line-height: 1.4; text-wrap: balance; }
:root[lang="en"] h1, :root[lang="en"] h2 { letter-spacing: -0.03em; line-height: 1.12; }
:root[lang="en"] h3 { letter-spacing: -0.01em; line-height: 1.3; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent-soft-border); color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.skip { position: fixed; inset-inline-start: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--r); background: var(--accent); color: var(--accent-ink); font-weight: 700; transition: top var(--t) var(--ease); }
.skip:focus { top: 16px; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
main { flex: 1 0 auto; overflow: clip; }
i[data-i] { display: inline-flex; width: 20px; height: 20px; flex: none; }
.nw { white-space: nowrap; }
.ln { display: block; } /* one designed line of a heading; each balances on its own */
i[data-i] svg { width: 100%; height: 100%; }

/* ---------- atmosphere: still light behind the glass ---------- */
.atmos { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.atmos::after {
  content: ""; position: absolute; inset: 0; opacity: .45; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* soft circles drawn as gradients, not blurred with a filter: a filter this large is
   re-applied wherever the page repaints (every frame of the scan drawing) */
.bloom { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, var(--c) 30%, transparent); }
.b1 { --c: var(--bloom-1); width: 76vmax; height: 76vmax; top: -32vmax; inset-inline-end: -22vmax; }
.b2 { --c: var(--bloom-2); width: 56vmax; height: 56vmax; top: calc(30vh - 8vmax); inset-inline-start: -24vmax; }
.b3 { --c: var(--bloom-3); width: 66vmax; height: 66vmax; bottom: -34vmax; inset-inline-end: calc(10vw - 8vmax); }

/* ---------- glass: only for what floats ---------- */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--glass-bg-strong); }
}

/* ---------- verdicts (soft-square) ---------- */
.badge { display: inline-block; padding: 3px 10px; border-radius: var(--r-sm); font: 700 12.5px/1.6 var(--latin); border: 1px solid; white-space: nowrap; }
.badge.good { color: var(--good); background: var(--good-soft); border-color: var(--good-border); }
.badge.warn { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-border); }
.badge.bad { color: var(--bad); background: var(--bad-soft); border-color: var(--bad-border); }

/* ---------- actions ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 11px 20px; border-radius: var(--r); border: 1px solid transparent;
  font-weight: 700; font-size: 15px; line-height: 1.4; cursor: pointer; white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease);
}
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 12px 32px -12px var(--accent); }
.btn.primary:hover { background: var(--accent-hover); }
.btn.ghost { background: var(--glass-bg); border-color: var(--glass-edge); color: var(--text); }
.btn.ghost:hover { border-color: var(--accent-soft-border); background: var(--accent-soft); }
.btn.sm { padding: 8px 15px; font-size: 14px; }
.btn.lg { padding: 15px 26px; font-size: 16px; border-radius: 14px; }
.btn i[data-i] { width: 18px; height: 18px; transition: transform var(--t) var(--ease); }
.btn:hover i[data-i="chevronLeft"], .link:hover i[data-i="chevronLeft"] { transform: translateX(-4px); }
[dir="ltr"] .btn:hover i[data-i="chevronLeft"], [dir="ltr"] .link:hover i[data-i="chevronLeft"] { transform: translateX(4px); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.link { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-text); font-weight: 700; justify-self: start; }
.link i[data-i] { width: 18px; height: 18px; transition: transform var(--t) var(--ease); }
.link:hover { color: var(--text); }
.links-row { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.icon-btn {
  position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--r); border: 1px solid var(--glass-edge); background: transparent; color: var(--text-2); cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.icon-btn:hover { background: var(--accent-soft); color: var(--text); }
.icon-btn:active { transform: scale(.94); }
.icon-btn[data-tip]:hover::after {
  content: attr(data-tip); position: absolute; top: calc(100% + 8px); inset-inline-end: 0; padding: 4px 10px; border-radius: var(--r-sm);
  background: var(--glass-bg-strong); border: 1px solid var(--glass-edge); color: var(--text-2); font-size: 12.5px; white-space: nowrap;
}
:root[data-theme="dark"] .only-light, :root[data-theme="light"] .only-dark { display: none; }
#themeBtn i { animation: spin-in 420ms var(--ease); }
@keyframes spin-in { from { transform: rotate(-90deg) scale(.6); opacity: 0; } }
.lang-btn { display: inline-grid; place-items: center; height: 40px; padding: 0 12px; border-radius: var(--r); border: 1px solid var(--glass-edge); color: var(--text-2); font-size: 13.5px; font-weight: 700; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.lang-btn:hover { background: var(--accent-soft); color: var(--text); }

/* ---------- the scroll line and the navigation ---------- */
.progress { position: fixed; inset-inline: 0; top: 0; height: 2px; z-index: 60; transform-origin: right; background: linear-gradient(90deg, var(--ai), var(--accent)); transform: scaleX(0); }
[dir="ltr"] .progress { transform-origin: left; }
.nav { position: fixed; inset-inline: 0; top: 0; z-index: 50; padding: 14px var(--gutter) 0; pointer-events: none; }
.nav-in {
  pointer-events: auto; max-width: var(--wrap); margin-inline: auto;
  display: flex; align-items: center; gap: 24px; padding: 10px 12px; padding-inline-start: 18px;
  border-radius: 18px; transition: background-color var(--t) var(--ease);
}
.nav.scrolled .nav-in { background: var(--glass-bg-strong); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand .mark { width: 22px; height: 32px; }
.brand-text { display: grid; line-height: 1.25; }
.brand-text b { color: var(--text); font-size: 15.5px; font-weight: 800; }
.brand-text small { font: 700 10.5px/1.3 var(--latin); color: var(--text-4); letter-spacing: .08em; white-space: nowrap; }
.links { display: flex; gap: 2px; margin-inline: auto; }
.links a { position: relative; white-space: nowrap; padding: 8px 14px; border-radius: 999px; color: var(--text-3); font-size: 15px; font-weight: 500; transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.links a:hover { color: var(--text); background: var(--accent-soft); }
.links a[aria-current="page"] { color: var(--text); }
.links a[aria-current="page"]::after { content: ""; position: absolute; bottom: 2px; inset-inline: 40%; height: 2px; border-radius: 2px; background: var(--accent); }
.nav-end { display: flex; align-items: center; gap: 8px; }

/* ---------- the first screen rises in by CSS alone: visible from the first paint ---------- */
.enter { animation: enter 800ms var(--ease) both; animation-delay: calc(var(--d, 0) * 70ms); }
@keyframes enter { from { opacity: .35; transform: translateY(16px); } }

/* ---------- reveal on scroll: a short rise, once ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); transition-delay: calc(var(--d, 0) * 80ms); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- type ---------- */
.kicker { display: inline-flex; align-items: center; gap: 10px; text-wrap: balance; color: var(--ai); font-weight: 700; font-size: 15px; justify-self: start; }
.kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ai); box-shadow: 0 0 0 4px var(--ai-soft); }
.kicker i[data-i] { width: 18px; height: 18px; color: var(--warn); }
a.kicker { color: var(--warn); }
a.kicker:hover { color: var(--text); }
.display { font-size: clamp(44px, 6vw, 92px); line-height: 1.16; }
.display.sm { font-size: clamp(32px, 3.6vw, 54px); line-height: 1.34; }
:root[lang="en"] .display { line-height: 1.02; letter-spacing: -0.04em; }
:root[lang="en"] .display.sm { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.08; }
.hl { background: linear-gradient(100deg, var(--accent-text), var(--ai)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { font-size: clamp(17px, 1.3vw, 19.5px); color: var(--text-2); line-height: 2; max-width: 36em; }
:root[lang="en"] .lede { line-height: 1.6; }
h2 { font-size: clamp(30px, 3.3vw, 48px); }
h3 { font-size: 19px; }

/* ---------- bands: the rhythm of the page ---------- */
.band { position: relative; padding: clamp(84px, 9vw, 132px) 0; }
.band.raised { background: var(--band); border-block: 1px solid var(--glass-edge); }
.band.accent { background: var(--band-accent); border-block: 1px solid var(--glass-edge); }
.band.last { padding-bottom: clamp(96px, 10vw, 144px); }
.band:not(.raised):not(.accent) + .band.last { padding-top: 0; } /* two plain bands read as one */
.sec-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.sec-head p { color: var(--text-3); font-size: 18px; }
.sec-head.center { margin-inline: auto; text-align: center; justify-items: center; }
.fineprint { margin-top: 28px; color: var(--text-4); font-size: 14px; }

/* ---------- hero: the words beside the product ---------- */
.hero { position: relative; min-height: min(100svh, 1000px); display: grid; align-items: center; padding: 132px 0 80px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.hero-copy { display: grid; gap: 26px; justify-items: start; }
.hero-visual { position: relative; min-width: 0; }
.trust { list-style: none; margin: 10px 0 0; padding: 24px 0 0; display: flex; flex-wrap: wrap; gap: 16px 26px; border-top: 1px solid var(--glass-edge); align-self: stretch; }
.trust li { display: flex; align-items: center; gap: 14px; }
.trust i[data-i] { width: 40px; height: 40px; padding: 10px; border-radius: 14px; color: var(--accent-text); background: var(--accent-soft); }
.trust li:first-child i[data-i="award"] { color: var(--warn); background: var(--warn-soft); }
.trust span { display: grid; line-height: 1.5; font-size: 13.5px; color: var(--text-3); }
.trust b { color: var(--text); font-size: 15.5px; }

/* the product scene: the AI's view on a screen, the AIBox Omnix in front of it */
.scene { position: relative; aspect-ratio: 1 / .9; }
.scene::after { /* the light the device throws on the desk */
  content: ""; position: absolute; z-index: -1; left: 50%; bottom: 2%; width: 70%; height: 18%; transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--ai-soft), transparent); filter: blur(10px);
}
.screen { position: absolute; inset: 0 0 17% 0; margin: 0; border-radius: 26px; padding: 10px; display: flex; flex-direction: column; }
.screen-bar { display: flex; align-items: center; justify-content: space-between; padding: 4px 10px 10px; font: 600 12px/1 var(--latin); color: var(--text-4); direction: ltr; }
.rec { display: inline-flex; align-items: center; gap: 7px; color: var(--bad); font: 700 12.5px/1 var(--font); }
.rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--bad); animation: blink 1.6s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: .25; } }
.screen-view { position: relative; flex: 1; min-height: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--glass-edge);
  background: radial-gradient(110% 80% at 50% 0%, var(--accent-soft), transparent 62%), var(--bg-deep); }
.us { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene .device { position: absolute; left: 50%; bottom: 0; width: 60%; transform: translateX(-50%); filter: drop-shadow(0 26px 34px rgba(2, 8, 20, .45)); --mark-ink: #e3eaf5; --mark-bars: #7f91ad; }
.live-card { position: absolute; z-index: 2; width: max-content; padding: 14px 16px; border-radius: var(--r-card); display: grid; gap: 10px; }
.scene .live-card { top: 9%; inset-inline-end: -5%; }
.lc-label { font-size: 12.5px; color: var(--text-3); font-weight: 600; }
.lc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lc-size { font: 700 13px var(--mono); color: var(--ai); white-space: nowrap; }
/* stage-driven: the result appears when the AI has finished (stage 4) */
.reel .live-card, .story-demo .live-card, .story-demo .report-card { opacity: 0; translate: 0 10px; transition: opacity 500ms var(--ease), translate 500ms var(--ease); }
.reel[data-stage="4"] .live-card, .story-demo[data-stage="4"] .live-card, .story-demo[data-stage="4"] .report-card { opacity: 1; translate: 0 0; }
.scene.flat { aspect-ratio: 4 / 3.3; }
.scene.flat::after { display: none; }
.scene.flat .screen { inset: 0; }
.scene.flat .live-card { top: auto; bottom: 8%; inset-inline-end: auto; inset-inline-start: -5%; }
.report-card { position: absolute; z-index: 2; top: 14%; inset-inline-end: -5%; width: 250px; padding: 14px 16px; border-radius: var(--r-card); display: grid; gap: 8px; font-size: 13px; }
.report-card b { color: var(--text); font-size: 13.5px; }
.report-card span { color: var(--text-3); line-height: 1.7; }
.report-card .rc-line { height: 6px; border-radius: 3px; background: var(--glass-edge); }
.report-card .rc-line.s { width: 60%; }

/* ---------- split: words on one side, a list or a visual on the other ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 104px); align-items: center; }
.split-copy { display: grid; gap: 20px; justify-items: start; }
.split-visual { min-width: 0; }
.steps-list, .points { list-style: none; margin: 0; padding: 0; }
.steps-list li, .points li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 20px; padding: 26px 0; border-top: 1px solid var(--glass-edge); }
.steps-list li:last-child, .points li:last-child { border-bottom: 1px solid var(--glass-edge); }
.steps-list .n { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; font: 800 19px var(--font); color: var(--ai); background: var(--ai-soft); border: 1px solid var(--ai-border); }
.steps-list h3, .points h3 { font-size: 20px; margin-bottom: 4px; }
.steps-list p, .points p { color: var(--text-3); font-size: 15.5px; }
.points i[data-i] { width: 48px; height: 48px; padding: 12px; border-radius: 14px; color: var(--ai); background: var(--ai-soft); border: 1px solid var(--ai-border); }

/* ---------- figures: a few numbers, large ---------- */
.figures { list-style: none; margin: clamp(56px, 6vw, 88px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--glass-edge); }
.figures li { display: grid; gap: 8px; align-content: start; padding: 30px 28px 6px; }
.figures li:first-child { padding-inline-start: 0; }
.figures li + li { border-inline-start: 1px solid var(--glass-edge); }
.figures b { font: 800 clamp(32px, 3.3vw, 50px)/1.15 var(--font); color: var(--text); text-wrap: balance; }
.figures b small { font-size: .4em; font-weight: 700; color: var(--text-3); }
.figures span { color: var(--text-3); font-size: 15px; font-weight: 600; }
.figures p { color: var(--text-3); font-size: 15px; line-height: 1.9; margin-top: 6px; }
.figures.big { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.figures.big li:nth-child(3) { padding-inline-start: 0; border-inline-start: 0; }
.figures.big li:nth-child(n + 3) { border-top: 1px solid var(--glass-edge); }
.figures.big b { font-size: clamp(44px, 5vw, 76px); }
.figures.big span { color: var(--text); font-size: 18px; }

/* ---------- who it is for ---------- */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.aud { border-radius: var(--r-panel); padding: clamp(28px, 3.4vw, 48px); display: grid; gap: 18px; align-content: start; }
.aud-ic { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--accent-soft-border); }
.aud-ic.warm { color: var(--ai); background: var(--ai-soft); border-color: var(--ai-border); }
.aud-ic i[data-i] { width: 28px; height: 28px; }
.aud h3 { font-size: clamp(24px, 2.2vw, 30px); }
.aud-lead { color: var(--text); font-size: 18px; font-weight: 700; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-inline-start: 30px; }
.ticks li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .62em; width: 13px; height: 7px; border-left: 2px solid var(--ai); border-bottom: 2px solid var(--ai); transform: rotate(-45deg); }
.source { color: var(--text-4); font-size: 14px; padding-top: 16px; border-top: 1px solid var(--glass-edge); }

/* ---------- the system: three parts in a line ---------- */
.system { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.system::before { content: ""; position: absolute; top: 90px; inset-inline: 12%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-soft-border), var(--ai-border), transparent); }
.part { position: relative; display: grid; gap: 8px; align-content: start; }
.part-ic { display: grid; place-items: center; height: 180px; margin-bottom: 14px; border-radius: var(--r-panel); background: var(--glass-bg-strong); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-hi); }
.part-ic .device { width: 82%; --mark-ink: #e3eaf5; --mark-bars: #7f91ad; filter: drop-shadow(0 16px 22px rgba(2, 8, 20, .35)); }
.part-ic i[data-i] { width: 64px; height: 64px; color: var(--accent-text); }
.part-n { font: 800 13px var(--latin); color: var(--ai); }
.part h3 { font-size: 22px; }
.part-where { color: var(--accent-text); font-weight: 700; font-size: 14.5px; }
.part p:last-child { color: var(--text-3); font-size: 15.5px; }

/* ---------- recognition ---------- */
.award { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(28px, 4vw, 64px); align-items: center; }
.medal { position: relative; display: grid; place-items: center; width: clamp(96px, 10vw, 132px); aspect-ratio: 1; border-radius: 50%; color: var(--warn);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--warn) 30%, transparent), var(--warn-soft) 62%); border: 1px solid var(--warn-border);
  box-shadow: 0 0 70px -12px color-mix(in srgb, var(--warn) 50%, transparent); }
.medal i[data-i] { width: 54%; height: 54%; }
.award-copy { display: grid; gap: 12px; }
.award-copy h2 { font-size: clamp(28px, 3vw, 44px); }
.award-copy p { color: var(--text-2); max-width: 44em; }
.award-copy .press { color: var(--text-3); font-size: 14.5px; }
.press a { color: var(--accent-text); font-weight: 700; }
.press a:hover { color: var(--text); }
.award-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; min-width: 210px; }
.award-facts li { display: grid; padding-inline-start: 16px; border-inline-start: 2px solid var(--accent-soft-border); line-height: 1.6; }
.award-facts b { color: var(--text); font-size: 16px; }
.award-facts span { color: var(--text-3); font-size: 13.5px; }

/* ---------- the way in ---------- */
.cta-panel { position: relative; overflow: hidden; isolation: isolate; border-radius: 34px; padding: clamp(44px, 6vw, 88px) clamp(24px, 5vw, 64px); display: grid; justify-items: center; gap: 18px; text-align: center;
  background: var(--band-accent); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); }
.cta-panel::before { /* the kit's signature: the ultrasound sector, from the top */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: repeating-radial-gradient(circle at 50% -30%, transparent 0 70px, var(--sector-line) 70px 71px);
  -webkit-mask: linear-gradient(#000, transparent 85%); mask: linear-gradient(#000, transparent 85%);
}
.cta-panel h2 { font-size: clamp(28px, 3.4vw, 50px); max-width: 18em; }
.cta-panel p { color: var(--text-2); font-size: 18px; max-width: 36em; }
.cta-panel .cta { justify-content: center; margin-top: 8px; }

/* ---------- how it works: the demo stays pinned while the steps pass ---------- */
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.story-steps { list-style: none; margin: 0; padding: 0; order: -1; } /* the words lead, the demo follows */
.story-demo { position: sticky; top: 112px; display: grid; gap: 16px; }
.story-step { min-height: 42vh; display: grid; align-content: center; gap: 14px; transition: opacity 400ms var(--ease); }
.js .story-step { opacity: .3; }
.story-step:first-child { min-height: 34vh; align-content: start; padding-top: 4vh; }
.story-step:last-child { min-height: 48vh; }
.js .story-step.on { opacity: 1; }
.story-n { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; font: 800 19px var(--font); color: var(--ai); background: var(--ai-soft); border: 1px solid var(--ai-border); }
.story-step h3 { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.4; }
.story-step p { color: var(--text-3); font-size: 17px; max-width: 40ch; }
.stage-dots { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.stage-dots button { border: 1px solid var(--glass-edge); background: var(--glass-bg); color: var(--text-3); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; transition: color var(--t) var(--ease), background-color var(--t) var(--ease), border-color var(--t) var(--ease); }
.stage-dots button[aria-current="step"] { color: var(--text); background: var(--accent-soft); border-color: var(--accent-soft-border); }

/* ---------- before / after ---------- */
.compare { border-radius: var(--r-panel); border: 1px solid var(--glass-edge); background: var(--glass-bg-strong); overflow: hidden; }
.cmp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: 20px; align-items: center; padding: 20px 28px; }
.cmp-row + .cmp-row { border-top: 1px solid var(--glass-edge); }
.cmp-head { color: var(--text-4); font-size: 14px; font-weight: 700; padding-block: 16px; }
.cmp-head .with { color: var(--ai); }
.cmp-row > b { color: var(--text); font-size: 17px; }
.without, .with { position: relative; padding-inline-start: 30px; } /* plain text flow; the mark sits beside it */
.without { color: var(--text-4); }
.cmp-row:not(.cmp-head) .without::before { content: ""; position: absolute; inset-inline-start: 4px; top: calc(.5lh - 1px); width: 10px; height: 2px; border-radius: 2px; background: currentColor; opacity: .6; }
.with { color: var(--text); font-weight: 600; }
.with i[data-i] { position: absolute; inset-inline-start: 0; top: calc(.5lh - 10px); color: var(--ai); }

/* ---------- common questions ---------- */
.faq { display: grid; max-width: 940px; border-top: 1px solid var(--glass-edge); }
.faq-item { border-bottom: 1px solid var(--glass-edge); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 4px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { font-size: 18px; font-weight: 700; transition: color var(--t) var(--ease); }
.faq-item summary:hover h3 { color: var(--accent-text); }
.faq-ic { width: 24px !important; height: 24px !important; color: var(--accent-text); transition: transform var(--t) var(--ease); }
.faq-item[open] .faq-ic { transform: rotate(45deg); }
.faq-item p { padding: 0 4px 26px; color: var(--text-2); max-width: 72ch; }

/* ---------- the fibrosis gauge ---------- */
.gauge-card { border-radius: var(--r-panel); padding: clamp(26px, 3vw, 40px); display: grid; gap: 18px; }
.gc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.gc-label { display: block; font-size: 13px; color: var(--text-3); }
.gc-value { color: var(--text); font: 800 clamp(44px, 4.6vw, 64px)/1.1 var(--font); font-variant-numeric: tabular-nums; }
.gc-value small { font: 600 15px var(--latin); color: var(--text-4); }
.gc-stage { font-size: 18px; padding: 7px 16px; transition: color var(--t) var(--ease), background-color var(--t) var(--ease), border-color var(--t) var(--ease); }
.gc-desc { color: var(--text-2); font-weight: 600; font-size: 17px; }
.gauge { position: relative; container-type: inline-size; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; height: 16px; direction: ltr; }
.seg { border-radius: 6px; opacity: .3; transition: opacity var(--t) var(--ease); }
.seg.good { background: var(--good); } .seg.warn { background: color-mix(in srgb, var(--warn) 70%, var(--good)); }
.seg.warn2 { background: var(--warn); } .seg.bad { background: var(--bad); }
.seg.on { opacity: 1; }
/* --x is the position in % of the gauge; 1cqw is 1% of the gauge's width */
.needle { position: absolute; top: -8px; bottom: -8px; left: -1.5px; width: 3px; border-radius: 3px; background: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bg-deep) 70%, transparent); transform: translateX(calc(var(--x, 20) * 1cqw)); transition: transform 900ms var(--ease); }
.gauge-scale { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; font: 700 12.5px var(--latin); color: var(--text-4); direction: ltr; }

/* ---------- numbered steps and a feature list (Fibrosis, Contact) ---------- */
.steps3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.steps3 li { border-radius: var(--r-panel); padding: 30px 28px; display: grid; gap: 10px; align-content: start; }
.steps3 .n { font: 800 48px/1 var(--font); background: linear-gradient(120deg, var(--accent-text), var(--ai)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.steps3 h3 { font-size: 20px; }
.steps3 p { color: var(--text-3); font-size: 15.5px; }
.flist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
.flist li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; padding: 26px 0; border-top: 1px solid var(--glass-edge); }
.flist i[data-i] { width: 48px; height: 48px; padding: 12px; border-radius: 14px; color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--accent-soft-border); }
.flist h3 { font-size: 19px; }
.flist p { color: var(--text-3); font-size: 15.5px; margin-top: 2px; }

/* ---------- contact ---------- */
.contact-hero { position: relative; min-height: min(100svh, 980px); display: grid; align-content: center; padding: 140px 0 96px; }
.contact-head { display: grid; gap: 18px; max-width: 860px; margin-bottom: clamp(36px, 5vw, 56px); }
.contact-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 440px)); gap: 18px; max-width: 898px; }
.c-card { border-radius: var(--r-panel); padding: 26px 28px; display: flex; align-items: center; gap: 20px; transition: transform var(--t) var(--ease), border-color var(--t) var(--ease); }
.c-card:hover { transform: translateY(-3px); border-color: var(--accent-soft-border); }
.c-card.wide { grid-column: 1 / -1; }
.c-card > i[data-i] { width: 56px; height: 56px; padding: 14px; border-radius: 16px; color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--accent-soft-border); }
.c-card span { display: grid; gap: 4px; min-width: 0; }
.c-card small { color: var(--text-4); font-size: 14px; }
.c-card b { color: var(--text); font: 800 clamp(20px, 2vw, 26px)/1.3 var(--font); overflow-wrap: anywhere; }
.c-card b[lang="en"] { font-family: var(--latin); font-size: clamp(18px, 1.8vw, 22px); }
.c-card b.addr { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.6; }
.after { margin-top: clamp(48px, 6vw, 80px); display: grid; gap: 24px; }
.after h2 { font-size: clamp(22px, 2.4vw, 32px); }

/* ---------- partner logos: silhouettes on dark, their own colours on light ---------- */
.plogo { display: block; flex: none; height: calc(26px * var(--k, 1)); width: auto; max-width: none; filter: brightness(0) invert(1); opacity: .72; transition: opacity var(--t) var(--ease); }
:root[data-theme="light"] .plogo { filter: none; opacity: .92; }

/* ---------- footer: solid, so it reads the same on every page ---------- */
.foot { flex: none; position: relative; border-top: 1px solid var(--glass-edge); background: var(--bg-deep); }
.foot-brands { padding: 34px 0 30px; border-bottom: 1px solid var(--glass-edge); }
.strip-cap { text-align: center; color: var(--text-4); font-size: 14px; font-weight: 500; margin-bottom: 22px; }
.marquee { direction: ltr; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { --gap: 96px; display: flex; align-items: center; gap: var(--gap); width: max-content; padding-inline: calc(var(--gap) / 2); animation: marquee 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee .plogo:hover { opacity: 1; }
@keyframes marquee { to { transform: translateX(-50%); } }
.foot-in { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px 40px; padding: 34px 0 26px; }
.foot-brand { display: flex; align-items: flex-start; gap: 14px; }
.foot-brand .mark { width: 26px; height: 38px; flex: none; }
.foot-brand > span { display: grid; line-height: 1.7; }
.foot-brand b { color: var(--text); }
.foot-brand small { color: var(--text-4); font-size: 13px; }
.foot-parent { margin-top: 6px; color: var(--accent-text); font-size: 13.5px; }
.foot-parent:hover { color: var(--text); }
.foot-col { display: grid; gap: 8px; align-content: start; font-style: normal; font-size: 14.5px; color: var(--text-3); }
.foot-col b { color: var(--text); font-size: 14px; margin-bottom: 4px; }
.foot-col a { transition: color var(--t-fast) var(--ease); justify-self: start; }
.foot-col a:hover { color: var(--text); }
.copy { grid-column: 1 / -1; color: var(--text-4); font-size: 13px; padding-top: 18px; border-top: 1px solid var(--glass-edge); }

/* ---------- sample runs (js/demo.js): a real scan, the AI run on it, beside the report ---------- */
.dm { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 18px; align-items: start; }
.dm-viewer, .dm-result, .dm-pick { border-radius: var(--r-panel); }
.dm-viewer { padding: 12px; display: grid; gap: 12px; }
.dm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-inline: 4px; }
.dm-case { color: var(--text); font-size: 16px; }
.dm-src { color: var(--text-4); font-size: 13px; }
.dm-stage { position: relative; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: #000; border: 1px solid var(--glass-edge); }
.dm-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity var(--t) var(--ease); }
.dm-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* js/demo.js fits it to the image */
.dm-sweep { position: absolute; inset-inline: 0; top: 0; height: 2px; display: none; background: linear-gradient(90deg, transparent, var(--ai), transparent); box-shadow: 0 0 18px var(--ai); }
.dm-busy .dm-sweep { display: block; animation: dm-sweep 1.3s linear infinite; }
@keyframes dm-sweep { to { transform: translateY(var(--h, 300px)); } }
.dm-stage { --h: 100cqh; container-type: size; }
.dm-arrow { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(6, 24, 46, .55); color: #fff; cursor: pointer; transform: translateY(-50%); opacity: .85; transition: opacity var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.dm-arrow:hover { opacity: 1; background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.dm-arrow i[data-i] { width: 22px; height: 22px; }
.dm-next { inset-inline-end: 10px; }
.dm-prev { inset-inline-start: 10px; }
.dm-prev i[data-i] { transform: scaleX(-1); }
.dm-busy .dm-arrow { opacity: .3; pointer-events: none; }
.dm-status { position: absolute; inset-inline: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 12px 14px; color: #fff; font-size: 14px; font-weight: 600;
  background: linear-gradient(transparent, rgba(4, 10, 22, .85)); opacity: 0; transition: opacity var(--t) var(--ease); }
.dm-busy .dm-status { opacity: 1; }
.dm-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: var(--ai); animation: dm-spin .8s linear infinite; }
@keyframes dm-spin { to { transform: rotate(360deg); } }
.dm-run i[data-i] { width: 16px; height: 16px; }
.dm-run:disabled { opacity: .6; cursor: default; }
.dm-layers { display: flex; flex-wrap: wrap; gap: 6px; margin-inline-start: auto; }
.dm-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 10px; border: 1px solid var(--glass-edge); background: var(--glass-bg);
  color: var(--text-2); font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; }
.dm-toggle[hidden] { display: none; }
.dm-toggle input { appearance: none; margin: 0; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--text-4); display: grid; place-items: center; cursor: pointer; }
.dm-toggle input:checked { border-color: transparent; }
.dm-box input:checked { background: var(--ai); }
.dm-line input:checked { background: var(--accent-text); }
.dm-exp input:checked { background: #f5c451; }
.dm-toggle input:checked::after { content: ""; width: 7px; height: 4px; border: 2px solid #06182e; border-top: 0; border-inline-end: 0; transform: translateY(-1px) rotate(-45deg); }
.dm-toggle:hover { border-color: var(--accent-soft-border); }
.dm-result { padding: 20px; display: grid; gap: 14px; align-content: start; }
.dm-result h3 { font-size: 19px; }
.dm-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: dm; }
.dm-steps li { counter-increment: dm; display: flex; align-items: center; gap: 10px; color: var(--text-4); font-size: 14px; }
.dm-steps li::before { content: counter(dm); display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--glass-edge);
  font: 800 11px/1 var(--font); }
.dm-steps li.dm-on { color: var(--text); }
.dm-steps li.dm-on::before { border-color: var(--ai); color: var(--ai); }
.dm-steps li.dm-done { color: var(--text-2); }
.dm-steps li.dm-done::before { content: "✓"; background: var(--ai); border-color: var(--ai); color: #06182e; }
.dm-muted { color: var(--text-3); font-size: 14.5px; }
.dm-lesion { display: grid; gap: 14px; padding: 14px; border-radius: var(--r-card); border: 1px solid var(--glass-edge); background: var(--band); animation: enter 520ms var(--ease) both; }
.dm-lesion header { display: flex; align-items: center; gap: 10px; }
.dm-lesion header b { color: var(--text); }
.dm-num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--ai); color: #06182e; font-weight: 800; font-size: 13px; }
.dm-cat { margin-inline-start: auto; padding: 3px 10px; border-radius: 999px; border: 1px solid; font: 800 13px/1.5 var(--latin); white-space: nowrap; }
.dm-cat.dm-low { color: var(--ai); background: var(--ai-soft); border-color: var(--ai-border); }
.dm-cat.dm-mid { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-border); }
.dm-cat.dm-high { color: var(--bad); background: var(--bad-soft); border-color: var(--bad-border); }
.dm-meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dm-meter { display: grid; gap: 3px; align-content: end; min-width: 0; }
.dm-meter span { color: var(--text-4); font-size: 12px; font-weight: 600; line-height: 1.4; }
.dm-meter b { color: var(--text); font-size: 18px; line-height: 1.2; }
.dm-meter i { display: block; height: 4px; border-radius: 4px; background: var(--glass-edge); overflow: hidden; }
.dm-meter i::after { content: ""; display: block; height: 100%; width: calc(var(--v, 0) * 100%); border-radius: inherit; background: var(--ai); }
.dm-meter.dm-risk i::after { background: var(--warn); }
.dm-compare { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: var(--glass-bg); border: 1px solid var(--glass-edge); }
.dm-chead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.dm-chead h4 { margin: 0; color: var(--text-3); font-size: 13px; font-weight: 700; }
.dm-score { padding: 2px 10px; border-radius: 999px; color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--accent-soft-border); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.dm-lexicon { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; line-height: 1.5; }
.dm-lexicon th, .dm-lexicon td { padding: 6px 4px; text-align: start; vertical-align: top; border-top: 1px solid var(--glass-edge); overflow-wrap: break-word; }
.dm-lexicon thead th { border-top: 0; padding-top: 0; color: var(--text-4); font-size: 12px; font-weight: 700; }
.dm-lexicon tbody th { width: 27%; color: var(--text-4); font-weight: 600; }
.dm-lexicon td { color: var(--text-2); }
.dm-lexicon td b { color: var(--text); }
.dm-lexicon small { color: var(--text-4); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.dm-firm { color: var(--text); font-weight: 700; }
.dm-tentative { opacity: .62; }
.dm-nr { color: var(--text-4); }
.dm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dm-ag { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-inline-start: 6px; border-radius: 50%; vertical-align: -3px; font: 900 10px/1 var(--latin); font-style: normal; color: #06182e; }
.dm-ag.dm-match { background: var(--ai); } .dm-ag.dm-match::after { content: "\2713"; }
.dm-ag.dm-near { background: var(--warn); } .dm-ag.dm-near::after { content: "\2248"; }
.dm-ag.dm-miss { background: var(--bad); color: #fff; } .dm-ag.dm-miss::after { content: "\2715"; }
.dm-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--text-4); font-size: 12px; }
.dm-legend span { display: inline-flex; align-items: center; gap: 5px; }
.dm-legend .dm-ag { margin: 0; }
.dm-fine { color: var(--text-4); font-size: 12.5px; }
.dm-pick { grid-column: 1 / -1; padding: 16px; display: grid; gap: 12px; }
.dm-phead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; }
.dm-phead h3 { font-size: 17px; }
.dm-phead small { color: var(--text-4); font-size: 13px; }
.dm-gallery { display: grid; grid-auto-flow: column; grid-auto-columns: 132px; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.dm-thumb { position: relative; aspect-ratio: 4 / 3; padding: 0; border-radius: 12px; overflow: hidden; background: #000; border: 2px solid var(--glass-edge); cursor: pointer; scroll-snap-align: start;
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.dm-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .88; }
.dm-thumb:hover { border-color: var(--accent-soft-border); transform: translateY(-2px); }
.dm-thumb[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dm-thumb[aria-pressed="true"] img { opacity: 1; }
.dm-n { position: absolute; bottom: 6px; inset-inline-start: 6px; padding: 1px 8px; border-radius: 8px; background: rgba(6, 24, 46, .78); color: #fff; font-size: 12px; font-weight: 800; }
.dm-rb { position: absolute; top: 6px; inset-inline-end: 6px; padding: 1px 7px; border-radius: 999px; color: #06182e; font: 800 11px/1.5 var(--latin); }
.dm-rb.dm-low { background: #37d6b4; } .dm-rb.dm-mid { background: #ffc66b; } .dm-rb.dm-high { background: #ff8f8f; }
.dm-credit { color: var(--text-4); font-size: 12.5px; }
.dm-credit a { color: var(--text-3); text-decoration: underline; text-underline-offset: 2px; }
.dm-credit a:hover { color: var(--text); }
@media (max-width: 1000px) { .dm { grid-template-columns: minmax(0, 1fr); } }
/* a narrow result panel: each row's label on top, the AI and the report side by side under it */
.dm-compare { container-type: inline-size; }
@container (max-width: 380px) {
  .dm-lexicon, .dm-lexicon thead, .dm-lexicon tbody { display: block; }
  .dm-lexicon tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; padding: 7px 0; border-top: 1px solid var(--glass-edge); }
  .dm-lexicon thead tr { border-top: 0; padding-top: 0; }
  .dm-lexicon th, .dm-lexicon td { padding: 0; border-top: 0; width: auto !important; }
  .dm-lexicon tbody th { grid-column: 1 / -1; margin-bottom: 2px; font-size: 12px; }
  .dm-lexicon thead th:first-child { display: none; }
}
@media (max-width: 560px) {
  .dm-viewer { padding: 8px; }
  .dm-stage { border-radius: 14px; }
  .dm-arrow { width: 38px; height: 38px; }
  .dm-run { flex: 1 1 100%; }
  .dm-layers { margin: 0; width: 100%; }
  .dm-toggle { flex: 1 1 auto; justify-content: center; }
  .dm-result { padding: 14px; }
  .dm-meters { gap: 8px; }
  .dm-gallery { grid-auto-columns: 112px; }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figures li:nth-child(3) { padding-inline-start: 0; border-inline-start: 0; }
  .figures li:nth-child(n + 3) { border-top: 1px solid var(--glass-edge); }
  .award { grid-template-columns: auto minmax(0, 1fr); }
  .award-facts { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1000px) {
  .hero { min-height: 0; padding-top: 120px; }
  .hero-grid, .split, .duo, .story { grid-template-columns: minmax(0, 1fr); }
  .hero-visual { max-width: 620px; width: 100%; justify-self: center; }
  .split.rev .split-visual { order: 1; }
  .system { grid-template-columns: minmax(0, 1fr); }
  .system::before { display: none; }
  .part { grid-template-columns: 160px minmax(0, 1fr); column-gap: 24px; }
  .part-ic { grid-row: span 4; height: 130px; margin: 0; }
  .figures.big { grid-template-columns: minmax(0, 1fr); }
  .figures.big li, .figures.big li:nth-child(3) { padding-inline-start: 0; border-inline-start: 0; }
  .figures.big li + li, .figures.big li:nth-child(3) { border-top: 1px solid var(--glass-edge); }
  .steps3 { grid-template-columns: minmax(0, 1fr); }
  /* the story: the demo cycles on its own above the steps */
  .story { gap: 28px; }
  .story-steps { order: 0; }
  .story-demo { position: relative; top: 0; max-width: 620px; width: 100%; justify-self: center; }
  .story-step, .story-step:first-child, .story-step:last-child { min-height: 0; padding: 18px 0; align-content: start; }
  .js .story-step { opacity: 1; }
  .story-step.on h3 { color: var(--accent-text); }
}
@media (max-width: 900px) { /* the page links move to a second row */
  .nav-in { flex-wrap: wrap; row-gap: 6px; }
  .links { order: 3; width: 100%; margin: 0; justify-content: space-between; border-top: 1px solid var(--glass-edge); padding-top: 6px; }
  .nav-end { margin-inline-start: auto; }
  .hero, .contact-hero { padding-top: 150px; }
}
@media (max-width: 720px) {
  .flist { grid-template-columns: minmax(0, 1fr); }
  .award { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .award-facts { grid-template-columns: minmax(0, 1fr); }
  .cmp-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 16px 18px; }
  .cmp-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* read aloud, not shown */
  .part { grid-template-columns: minmax(0, 1fr); }
  .part-ic { grid-row: auto; height: 150px; margin-bottom: 10px; }
  .part + .part .part-ic { width: 64px; height: 64px; border-radius: 18px; } /* only the device needs room */
  .part + .part .part-ic i[data-i] { width: 30px; height: 30px; }
  .scene .live-card { inset-inline-end: 2%; top: 12%; } /* below the screen's title bar */
  .scene.flat .live-card { inset-inline-start: 2%; }
  .report-card { inset-inline-end: 2%; top: 6%; width: 200px; }
}
@media (max-width: 560px) {
  body { font-size: 15.5px; }
  .band { padding: 64px 0; }
  .band.last { padding-bottom: 72px; }
  .nav { padding-top: 10px; }
  .brand-text small { display: none; }
  .links a { padding: 6px 8px; font-size: 14px; }
  .lang-btn { height: 36px; padding: 0 9px; }
  .nav-end .btn.sm { display: none; } /* the Contact link sits in the row below */
  .figures { grid-template-columns: minmax(0, 1fr); }
  .figures li, .figures li + li { padding: 22px 0 4px; border-inline-start: 0; }
  .figures li + li { border-top: 1px solid var(--glass-edge); }
  .contact-cards, .foot-in { grid-template-columns: minmax(0, 1fr); }
  .cta .btn { flex: 1 1 auto; }
  .report-card { display: none; }
  /* the story's result goes under the screen, not over the lesion */
  .scene.flat { aspect-ratio: 4 / 4.3; }
  .scene.flat .screen { inset: 0 0 23% 0; }
  .scene.flat .live-card { inset-inline: 0; bottom: 0; width: auto; }
  .live-card { padding: 10px 12px; gap: 8px; }
  .reel .lc-label { display: none; } /* the hero's card: just the result, clear of the AI's own label */
  .marquee-track { --gap: 64px; }
}

@media (max-width: 380px) { /* the narrowest phones: the brand and its two buttons on one row */
  .nav-in { gap: 10px; padding-inline-start: 12px; }
  .brand { gap: 8px; }
  .brand-text b { font-size: 14px; }
  .nav-end { gap: 6px; }
  .lang-btn { padding: 0 8px; }
}

/* ---------- print: every section shown, the moving parts left out ---------- */
@media print {
  .js .reveal, .js .story-step { opacity: 1; transform: none; transition: none; }
  .atmos, .progress, .nav, .marquee, .stage-dots { display: none; }
}

/* ---------- reduced motion: everything still, nothing lost ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; row-gap: 32px; }
  .marquee-track [aria-hidden="true"] { display: none; }
}