/* ============================================================
   KRESK — Design System
   Light, clinical, clean.
   Kresk identity: graphite + lime. VIDAcare pages: teal accent
   (add class "theme-vidacare" to <body>).
   ============================================================ */

/* Self-hosted fonts (GDPR: no requests to Google). SIL Open Font License — see assets/fonts/ */
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('../fonts/hanken-grotesk-latin-wght-normal.woff2') format('woff2-variations'), url('../fonts/hanken-grotesk-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('../fonts/hanken-grotesk-latin-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-style: italic; font-display: swap; font-weight: 100 900; src: url('../fonts/hanken-grotesk-latin-wght-italic.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 400; src: url('../fonts/inter-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 500; src: url('../fonts/inter-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 600; src: url('../fonts/inter-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  /* Kresk accent: lime green (text-safe dark variant for type) */
  --acc-600: #557F17;
  --acc-500: #8DC63F;
  --acc-400: #A6D464;
  --acc-100: #E5F2CC;
  --acc-50:  #F4FAE9;
  --acc-rgb: 141,198,63;
  /* Buttons / strong surfaces: Kresk graphite */
  --btn-bg: #13191D;
  --btn-bg-hover: #2A363D;
  --btn-shadow: rgba(19,25,29,.22);
  --cta-grad: linear-gradient(120deg, #0E1316, #1C2620 55%, #2C3A22);
  /* Neutrals: warm graphite greys */
  --ink-900: #13191D;
  --ink-700: #39444B;
  --ink-500: #66737B;
  --ink-300: #A2ACB2;
  --line: #E6EAEC;
  --bg: #FFFFFF;
  --bg-soft: #F7F9F9;
  --bg-tint: #F0F4F1;

  /* Type */
  --font-head: 'Hanken Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', 'Inter', system-ui, sans-serif;
  /* house signature accent (the VIDAcare lime) — used as a recurring "spark" across the whole group */
  --spark: #8DC63F;

  /* Layout */
  --container: 1180px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(14,43,41,.05), 0 2px 8px rgba(14,43,41,.04);
  --shadow-md: 0 2px 6px rgba(14,43,41,.06), 0 12px 32px rgba(14,43,41,.08);
  --shadow-lg: 0 4px 12px rgba(14,43,41,.07), 0 24px 64px rgba(14,43,41,.12);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.23,1,.32,1);
}

/* VIDAcare product pages: teal accent system */
body.theme-vidacare {
  --acc-600: #008C84;
  --acc-500: #00A79D;
  --acc-400: #2BBCB2;
  --acc-100: #D5F1EF;
  --acc-50:  #EDF9F8;
  --acc-rgb: 0,167,157;
  --btn-bg: #00A79D;
  --btn-bg-hover: #008C84;
  --btn-shadow: rgba(0,167,157,0);
  --cta-grad: linear-gradient(120deg, #0E2B29, #14524D 55%, #008C84);
  --bg-soft: #F6FAFA;
  --bg-tint: #EFF7F6;
  --line: #E3EDEC;
}

/* Kresk corporate identity — sober black & white (the Kresk logo is black).
   Colour belongs to the product: VIDAcare keeps its teal on its own pages,
   and the lime "spark" (#8DC63F) is the only accent here. */
body.theme-kresk {
  --acc-600: #0D0D0D;
  --acc-500: #2B2B2B;
  --acc-400: #5E5E5E;
  --acc-100: #EAEAEA;
  --acc-50:  #F5F5F5;
  --acc-rgb: 13,13,13;
  --btn-bg: #0D0D0D;
  --btn-bg-hover: #2B2B2B;
  --btn-shadow: rgba(13,13,13,0);
  --cta-grad: linear-gradient(120deg, #0D0D0D, #1A1A1A);
  --ink-900: #0D0D0D;
  --ink-700: #333333;
  --ink-500: #5E5E5E;
  --ink-300: #9A9A9A;
  --line: #EAEAEA;
  --bg: #FFFFFF;
  --bg-soft: #F7F7F7;
  --bg-tint: #F3F3F3;
}
/* black links need an underline inside running text to stay recognisable */
body.theme-kresk main p a:not(.btn):not(.hero-link):not(.link-arrow) { text-decoration: underline; text-decoration-color: rgba(13,13,13,.28); text-underline-offset: 3px; }
body.theme-kresk main p a:not(.btn):not(.hero-link):not(.link-arrow):hover { text-decoration-color: currentColor; }
/* VIDAcare content shown on Kresk pages keeps the product's own teal */
.vc-scope { --acc-600: #008C84; --acc-500: #00A79D; --acc-400: #2BBCB2; --acc-100: #D5F1EF; --acc-50: #EDF9F8; --acc-rgb: 0,167,157; --btn-bg: #00A79D; --btn-bg-hover: #008C84; --btn-shadow: rgba(0,167,157,0); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-700);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink-900);
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: -.015em;
}
h1 { font-size: clamp(2.4rem, 5.2vw, 3.9rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 700; }
h4 { font-size: 1.05rem; font-weight: 600; }
p { margin: 0 0 1em; }
a { color: var(--acc-600); text-decoration: none; }
a:hover { color: var(--acc-500); }
:focus-visible { outline: 3px solid var(--acc-400); outline-offset: 3px; border-radius: 4px; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--acc-600); color: #fff; padding: 10px 18px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; left: 0; right: 0; top: 0; z-index: 100;
  background: transparent;
  padding-top: 14px;
  transition: padding-top .25s var(--ease);
}
/* The nav is a floating, rounded "pill" bar — distinct from a full-width header. */
.site-header .nav {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 6px 22px rgba(15,21,48,.06);
  padding: 0 10px 0 18px;
  transition: background .25s var(--ease), box-shadow .25s var(--ease);
}
.site-header.scrolled { padding-top: 8px; }
.site-header.scrolled .nav { background: rgba(255,255,255,.9); box-shadow: 0 10px 30px rgba(15,21,48,.1); }
/* Nav adapts to the zone underneath: it turns into a dark pill over dark sections (the footer) */
.nav-logo img { transition: filter .3s var(--ease); }
.site-header.nav-dark .nav { background: rgba(26,26,26,.7); border-color: rgba(255,255,255,.1); box-shadow: 0 12px 32px rgba(0,0,0,.35); }
.site-header.nav-dark .nav-logo img { filter: invert(1); }
.site-header.nav-dark .nav-toggle svg { color: #fff; }
@media (min-width: 921px) {
  .site-header.nav-dark .nav-menu > li > a,
  .site-header.nav-dark .nav-menu > li > button.nav-link { color: rgba(255,255,255,.78); }
  .site-header.nav-dark .nav-menu > li > a:hover,
  .site-header.nav-dark .nav-menu > li > button.nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
  .site-header.nav-dark .nav-menu > li > a.active { color: #fff; }
}
/* Fixed header is out of flow, so give the page hero room to clear it, and a
   richer tinted band so the transparent menu reads as grounded, not floating. */
body.hero-overlay .page-hero {
  padding-top: 132px;
  background:
    radial-gradient(900px 460px at 82% -8%, rgba(var(--acc-rgb), .18), transparent 62%),
    linear-gradient(180deg, var(--acc-100) 0%, var(--bg-tint) 36%, #fff 84%);
}
/* The grid/visual hero (vidacare) already carries its own tinted background;
   it just needs clearance for the now-fixed header. */
body.hero-overlay .hero { padding-top: 128px; }
/* Kresk pages: no tinted wash — white, like the rest of the sober identity */
body.theme-kresk.hero-overlay .page-hero { background: linear-gradient(180deg, var(--bg-soft) 0%, #fff 78%); }
/* Slimmer header CTA when it floats over the hero. */
/* Compact nav CTA — a soft rounded-rect button (NOT a pill); .btn.nav-cta beats .btn's 999px radius */
.btn.nav-cta { padding: 9px 16px; min-height: 38px; font-size: .86rem; border-radius: 10px; box-shadow: none; transition: background .3s var(--ease), color .3s var(--ease), transform .16s var(--ease-out); }
.btn.nav-cta:active { transform: scale(.97); }
.site-header.nav-dark .btn.nav-cta,
.site-header.nav-dark .btn.nav-cta:hover { background: #fff; color: var(--ink-900); }

.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; gap: 16px;
}
.nav-logo img { height: 26px; width: auto; }
.nav-menu { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-menu > li { position: relative; }
.nav-menu a, .nav-menu button.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: .95rem; font-weight: 500;
  color: var(--ink-700); padding: 10px 14px; border-radius: 10px;
  background: none; border: 0; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.nav-menu a:hover, .nav-menu button.nav-link:hover { background: var(--bg-tint); color: var(--ink-900); }
.nav-menu a.active { color: var(--acc-600); font-weight: 600; }
.nav-menu .caret { width: 14px; height: 14px; transition: transform .2s var(--ease); }
li.has-dropdown:hover .caret, li.has-dropdown:focus-within .caret { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 250px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: 8px; margin: 0; list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(6px) scale(.98); transform-origin: top left;
  transition: opacity .14s var(--ease), transform .14s var(--ease), visibility .14s;
}
li.has-dropdown:hover .dropdown, li.has-dropdown:focus-within .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
  transition-duration: .2s;
}
.dropdown a { display: block; padding: 10px 14px; border-radius: 10px; width: 100%; }
.dropdown .dd-label { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-300); padding: 10px 14px 4px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-head); font-weight: 600; font-size: .98rem;
  padding: 13px 24px; border-radius: 10px; border: 0; cursor: pointer;
  min-height: 44px;
  transition: transform .16s var(--ease-out), box-shadow .18s var(--ease), background .18s var(--ease);
}
.btn-primary { background: var(--btn-bg); color: #fff; box-shadow: 0 8px 20px var(--btn-shadow); }
.btn-secondary { background: var(--bg-tint); color: var(--ink-900); }
.btn-ghost { background: transparent; color: var(--acc-600); padding: 13px 18px; }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--btn-bg-hover); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px var(--btn-shadow); }
  .btn-secondary:hover { background: var(--acc-100); color: var(--ink-900); transform: translateY(-2px); }
  .btn-ghost:hover { background: var(--acc-50); }
}
.btn:active { transform: scale(.97); }
.btn svg { width: 17px; height: 17px; }

.nav-toggle { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.nav-toggle svg { width: 26px; height: 26px; color: var(--ink-900); }

/* Mobile nav */
@media (max-width: 920px) {
  .nav-toggle { display: block; }
  .nav-cta { display: none; }
  .nav-menu {
    position: fixed; inset: 76px 0 auto 0; max-height: calc(100dvh - 76px); overflow-y: auto;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 12px 16px 24px; box-shadow: var(--shadow-lg);
    display: none;
  }
  .nav-menu.open { display: flex; }
  .nav-menu a, .nav-menu button.nav-link { width: 100%; padding: 14px; font-size: 1.05rem; }
  .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; padding: 0 0 0 14px; min-width: 0; display: none;
  }
  li.has-dropdown.open .dropdown { display: block; }
  .nav-menu .caret { margin-left: auto; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: 96px 0 72px;
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(var(--acc-rgb),.12), transparent 60%),
    radial-gradient(700px 420px at -10% 30%, rgba(141,198,63,.08), transparent 55%),
    linear-gradient(180deg, var(--bg-soft), #fff 70%);
}
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }

/* ---------- Centered hero with animated aurora (home) ---------- */
.hero-center { position: relative; overflow: hidden; text-align: center; padding: 172px 0 96px; background: var(--bg); }
.hero-center .container { position: relative; z-index: 2; }
.hero-center-inner { max-width: 800px; margin-inline: auto; }
.hero-center .eyebrow { margin-inline: auto; }
.hero-center h1 { font-size: clamp(2.4rem, 5.2vw, 3.7rem); line-height: 1.06; letter-spacing: -.02em; }
.hero-center .lead { margin: 18px auto 0; }
.hero-actions-center { justify-content: center; }

/* Typographic home hero — no product image: one strong sentence, then the clients.
   Two-weight headline (bold line + light line) is the same device as the footer CTA. */
.hero-type { padding: 150px 0 52px; background: var(--bg); }
.hero-type .container { position: relative; z-index: 2; }
.hero-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 28px; font-size: .9rem; font-weight: 500; color: var(--ink-500); letter-spacing: .005em; }
.hero-kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--spark); box-shadow: 0 0 0 4px rgba(141,198,63,.18); }
.hero-title { font-size: clamp(2.4rem, 5.4vw, 4.5rem); line-height: .98; letter-spacing: -.045em; margin: 0; color: var(--ink-900); text-wrap: balance; }
.hero-title .ht-b { display: block; font-weight: 700; }
.hero-title .ht-l { display: block; font-weight: 300; letter-spacing: -.04em; }
.hero-title .ht-dot { color: var(--spark); font-weight: 700; }
.hero-foot { display: grid; grid-template-columns: minmax(0, 54ch) auto; justify-content: space-between; align-items: end; gap: 28px 56px; margin-top: 34px; }
.hero-foot .lead { margin: 0; font-size: 1.12rem; line-height: 1.65; }
.hero-foot .hero-actions .btn { white-space: nowrap; }
.hero-actions .link-arrow { min-height: 44px; }
.hero-foot .hero-actions { margin: 0; align-items: center; gap: 22px; flex-wrap: nowrap; }
.hero-link, .link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .98rem; color: var(--ink-900); white-space: nowrap; }
.hero-link svg, .link-arrow svg { width: 16px; height: 16px; transition: transform .25s var(--ease-out); }
/* CTA hierarchy: filled button = the one main action; everything else = text link with an arrow (↓ when it scrolls within the page) */
@media (hover: hover) and (pointer: fine) { .hero-link:hover, .link-arrow:hover { color: var(--acc-600); } .hero-link:hover svg, .link-arrow:hover svg { transform: translateX(3px); } .link-arrow.down:hover svg { transform: translateY(3px); } }
/* clients follow straight on, editorial row: label left, logos right */
.hero-type .hero-trust { max-width: none; margin: 88px 0 0; padding-top: 28px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; gap: 32px; }
.hero-type .hero-trust-label { text-align: left; margin: 0; font-size: .74rem; line-height: 1.5; }
@media (max-width: 860px) {
  .hero.hero-type { padding: 128px 0 48px; }
  .hero-foot { grid-template-columns: 1fr; align-items: start; }
  .hero-foot .hero-actions { flex-wrap: wrap; }
  .hero-type .hero-trust { grid-template-columns: 1fr; gap: 18px; margin-top: 64px; }
}
/* fade the aurora into the page bg at the bottom → smooth hand-off to clients */
.hero-center::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 220px; background: linear-gradient(to bottom, rgba(255,255,255,0), var(--bg)); z-index: 1; pointer-events: none; }
/* client logos inside the hero */
.hero-trust { position: relative; z-index: 2; max-width: 1000px; margin: 88px auto 0; }
.hero-trust-label { text-align: center; font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-300); margin: 0 0 24px; }
/* Section labels — an editorial index ("01 —— Label"), numbered automatically per page.
   Replaces the pill "eyebrows" every template uses. */
main { counter-reset: sec; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: .88rem; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--ink-500); margin-bottom: 20px;
  counter-increment: sec;
}
.eyebrow::before { content: counter(sec, decimal-leading-zero); font-size: .8rem; font-weight: 700; letter-spacing: .02em; color: var(--spark); font-variant-numeric: tabular-nums; }
.eyebrow .dot { width: 32px; height: 1px; background: currentColor; opacity: .35; flex: none; }
/* in a page header it's a plain kicker instead: lime spark + text, no number */
.page-hero .eyebrow, .hero .eyebrow { counter-increment: none; gap: 10px; }
.page-hero .eyebrow::before, .hero .eyebrow::before { content: none; }
.page-hero .eyebrow .dot, .hero .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--spark); opacity: 1; box-shadow: 0 0 0 4px rgba(141,198,63,.18); }
.hero p.lead, .lead { font-size: 1.18rem; line-height: 1.7; color: var(--ink-500); max-width: 56ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.hero-visual { position: relative; }
.hero-visual .glow {
  position: absolute; inset: 10% -5% -5% 10%;
  background: radial-gradient(closest-side, rgba(var(--acc-rgb),.16), transparent);
  filter: blur(20px); z-index: 0;
}
.hero-visual > img, .hero-visual .browser { position: relative; z-index: 1; }

/* ---------- Home hero: real-time 3D "connected care" emblem ---------- */
.home3d { position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 600px; margin-inline: auto; }
.home3d-aura {
  position: absolute; inset: 6%; z-index: 0;
  background:
    radial-gradient(closest-side, rgba(0,167,157,.18), transparent 70%),
    radial-gradient(closest-side at 62% 66%, rgba(141,198,63,.16), transparent 72%);
  filter: blur(32px);
  animation: home3dAura 7s var(--ease) infinite;
}
.home3d-canvas { position: relative; z-index: 1; width: 100%; height: 100%; display: block; }
@keyframes home3dAura { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.07); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .home3d-aura { animation: none; } }

/* ---------- 3D heart emblem (VIDAcare hero) ---------- */
.heart3d {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 560px;
  margin-inline: auto;
}
.heart3d-aura {
  position: absolute; inset: 6%;
  background:
    radial-gradient(closest-side, rgba(0,167,157,.18), transparent 72%),
    radial-gradient(closest-side at 38% 42%, rgba(141,198,63,.16), transparent 70%);
  filter: blur(26px);
  z-index: 0;
  animation: heartAura 7s var(--ease) infinite;
}
.heart3d-canvas {
  position: relative; z-index: 2;
  width: 100%; height: 100%;
  display: block;
  opacity: 0;
  transition: opacity .6s var(--ease);
}
.heart3d-fallback {
  position: absolute; inset: 0; z-index: 1;
  width: 86%; height: 86%; margin: 7%;
  object-fit: contain;
  transition: opacity .6s var(--ease);
}
@keyframes heartAura {
  0%, 100% { transform: scale(1); opacity: .85; }
  50%      { transform: scale(1.06); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .heart3d-aura { animation: none; }
}

/* ---------- Ecosystem illustration band ---------- */
.ecosystem-media { max-width: 880px; margin: 8px auto 0; }
.ecosystem-media img { width: 100%; height: auto; display: block; }

/* Animated ecosystem diagram (SVG + GSAP) */
.eco-wrap { max-width: 1060px; margin: 4px auto 0; }
/* The ecosystem video / image are left UNTOUCHED (components intact); the
   surfaces behind them are tinted to the asset's own near-white background so
   they blend seamlessly. */
body.theme-vidacare .hero { background: #ededf0; }   /* matches the hero video bg */
/* VIDAcare surface consistency: grey hero on the product pages too, with a soft fade into the next section */
body.theme-vidacare.hero-overlay .page-hero { background: #ededf0; }
body.theme-vidacare .page-hero { position: relative; }
body.theme-vidacare .page-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -70px; height: 70px; background: linear-gradient(#ededf0, rgba(237,237,240,0)); pointer-events: none; z-index: 2; }
/* VIDAcare overview: smooth the grey hero into the modules section (no abrupt seam) */
body.theme-vidacare #modules { background: linear-gradient(180deg, #ededf0 0%, var(--bg-soft) 200px); }
/* Home VIDAcare section: white, with a larger, edge-feathered isometric image
   so its near-white background dissolves into the white section (no grey band). */
#work { background: #f0f3f7; }                        /* matches the isometric image's cool bg → seamless */
#work .split { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.eco-still {
  width: 100%; height: auto; display: block;
  --eco-feather: 7%;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 var(--eco-feather), #000 calc(100% - var(--eco-feather)), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--eco-feather), #000 calc(100% - var(--eco-feather)), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 var(--eco-feather), #000 calc(100% - var(--eco-feather)), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--eco-feather), #000 calc(100% - var(--eco-feather)), transparent 100%);
  mask-composite: intersect;
}
@media (max-width: 860px) { #work .split { grid-template-columns: 1fr; } }
.eco-video { width: 100%; height: auto; display: block; }
/* Soft edge feather as insurance against the video's faint vignette at the boundary. */
.eco-video {
  --eco-feather: 2.5%;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 var(--eco-feather), #000 calc(100% - var(--eco-feather)), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--eco-feather), #000 calc(100% - var(--eco-feather)), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 var(--eco-feather), #000 calc(100% - var(--eco-feather)), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--eco-feather), #000 calc(100% - var(--eco-feather)), transparent 100%);
  mask-composite: intersect;
}
.eco-video[hidden] { display: none; }
.eco-svg { width: 100%; height: auto; display: block; overflow: visible; }
.eco-svg .eco-node, .eco-svg #eco-hub { transform-box: fill-box; transform-origin: center; }
.eco-svg a { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.eco-svg a .eco-node rect[stroke-opacity] { transition: stroke-opacity .2s var(--ease), stroke .2s var(--ease); }
.eco-svg a:hover .eco-node { /* subtle lift handled by GSAP-safe scale via CSS */ }
.eco-svg a:hover .eco-label { fill: var(--acc-600); }
.eco-pulse { pointer-events: none; }
/* Pre-hide so the choreography can play without a flash; reduced-motion keeps it visible. */
html.gsap-on .eco-svg .eco-cable { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.gsap-on .eco-svg .eco-node,
html.gsap-on .eco-svg #eco-hub { opacity: 0; }

/* Browser frame for screenshots */
.browser {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.browser-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; background: var(--bg-soft); border-bottom: 1px solid var(--line);
}
.browser-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.browser-bar span:nth-child(1) { background: #F2B8B5; }
.browser-bar span:nth-child(2) { background: #F2DCA6; }
.browser-bar span:nth-child(3) { background: #B5E0C2; }
.browser-bar .url {
  flex: 1; max-width: 320px; margin-left: 10px;
  font-size: .72rem; color: var(--ink-300); background: #fff;
  border: 1px solid var(--line); border-radius: 6px; padding: 3px 10px;
  width: auto; height: auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.browser img { width: 100%; }

/* ---------- Workflow timeline (RIS) — growing curved path on scroll ---------- */
.flow { position: relative; padding-left: 58px; }
.flow-svg { position: absolute; left: 0; top: 0; width: 58px; height: 100%; overflow: visible; pointer-events: none; }
.flow-path { fill: none; stroke: var(--acc-500); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.flow-steps { display: flex; flex-direction: column; gap: 26px; }
.flow-step { position: relative; }
.flow-node {
  position: absolute; left: -43px; top: 5px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 3px solid var(--acc-500);
  box-shadow: 0 0 0 4px rgba(var(--acc-rgb), .12);
}
.flow-card h3 { margin: 0 0 4px; }
.flow-card p { margin: 0; color: var(--ink-500); font-size: .98rem; }
@media (max-width: 560px) { .flow { padding-left: 44px; } .flow-svg { width: 44px; } .flow-node { left: -34px; } }

/* ---------- RIS: deployment cards, integration diagram, flow badges ---------- */
.deploy-grid { gap: 30px; align-items: stretch; }
.deploy-card { position: relative; padding-top: 32px; }
.deploy-card.featured { border-color: var(--acc-100); box-shadow: var(--shadow-md); }
.deploy-tag { position: absolute; top: -13px; left: 24px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--acc-500); padding: 6px 13px; border-radius: 999px; }
.deploy-tag.alt { background: var(--ink-700); }
.deploy-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .85rem; color: var(--ink-500); font-weight: 600; }

.int-diagram { max-width: 980px; margin: 0 auto; }
.int-diagram > svg { width: 100%; height: auto; display: block; }
.intt-title { font-family: var(--font-head); font-size: 19px; font-weight: 700; fill: var(--ink-900); }
.intt-title.acc { fill: var(--acc-600); }
.intt-sub { font-family: var(--font-body); font-size: 12px; fill: var(--ink-500); }
.intt-step { font-family: var(--font-body); font-size: 12.5px; fill: var(--ink-700); }
.intt-lbl { font-family: var(--font-body); font-size: 11px; fill: var(--ink-500); }
.int-protocols { justify-content: center; margin-top: 30px; }

.flow-legend { display: flex; gap: 22px; flex-wrap: wrap; font-size: .82rem; color: var(--ink-500); margin-top: 12px; }
.flow-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.flow-legend .dot-core { background: var(--acc-500); }
.flow-legend .dot-admin { background: #fff; border: 2px solid var(--acc-400); }
.flow-node.core { background: var(--acc-500); }
.flow-card h3 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.flow-tag { font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
.flow-tag.core { color: #fff; background: var(--acc-500); }
.flow-tag.admin { color: var(--ink-500); background: var(--bg-tint); border: 1px solid var(--line); }

/* ---------- VIDAcare product lockup (hero brand mark + solution) ---------- */
.product-lockup { display: inline-flex; align-items: center; gap: 18px; margin-bottom: 26px; }
.product-lockup .pl-mark { height: 46px; width: auto; display: block; }
.product-lockup .pl-sep { width: 1.5px; height: 32px; background: var(--line); }
.product-lockup .pl-name {
  font-family: var(--font-head); font-weight: 600; font-size: 1.05rem;
  color: var(--ink-500); letter-spacing: .16em;
  text-transform: uppercase; line-height: 1;
}

/* ---------- Animated integration diagram (RIS) ---------- */
.int2-wrap { max-width: 1000px; margin: 0 auto; }
.int2 { width: 100%; height: auto; display: block; overflow: visible; }
.int2 .int2-node { transform-box: fill-box; transform-origin: center center; }
.int2-box { fill: #fff; stroke: var(--line); stroke-width: 1.5; }
.int2-box-main { fill: var(--acc-50); stroke: var(--acc-500); stroke-width: 1.8; }
.int2-title { font-family: var(--font-head); font-size: 18px; font-weight: 700; fill: var(--ink-900); }
.int2-title.acc { fill: var(--acc-600); }
.int2-sub { font-family: var(--font-body); font-size: 12px; fill: var(--ink-500); }
.int2-step { font-family: var(--font-body); font-size: 13px; fill: var(--ink-700); }
.int2-flow { fill: none; stroke: var(--acc-400); stroke-width: 2.4; stroke-linecap: round; }
.int2-label { font-family: var(--font-body); font-size: 12px; font-weight: 600; fill: var(--acc-600); }
.int2-packet { fill: var(--acc-500); }
.int2-foot { text-align: center; color: var(--ink-300); font-size: .85rem; margin-top: 26px; }

/* ---------- Product screenshot collage ---------- */
/* Product showcase — tab switcher + framed screen, click to open lightbox */
/* Workflow (RIS) — all steps visible; each step is a button that shows its screen on the right */
.wf-screen { position: relative; margin: 0; padding: 0; }
.wf-imgwrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #f3f6f8; cursor: zoom-in; }
.wf-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transition: opacity .5s var(--ease); }
.wf-img.active { opacity: 1; }
.wfp .container.wfp-grid { max-width: 1300px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.wfp .section-head { margin-bottom: 28px; max-width: 560px; }
.wfp-right { position: sticky; top: 110px; }
.wfp-right .shot-stage { padding: 0 5% 6%; }
.wfp-list { position: relative; }
.wfp-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wfp-btn { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; width: 100%; padding: 16px 18px 16px 54px;
  border: 1px solid transparent; border-radius: 14px; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); }
.wfp-title { grid-column: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--font-head); font-weight: 700; font-size: 1.08rem; color: var(--ink-900); }
.wfp-desc { grid-column: 1; display: block; margin-top: 4px; color: var(--ink-500); font-size: .97rem; line-height: 1.55; }
.wfp-cue { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); background: #fff; color: var(--ink-500); transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); }
.wfp-cue svg { width: 18px; height: 18px; }
.wfp-node { position: absolute; left: 19px; top: 21px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--line); transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); }
.wfp-step.core .wfp-node { border-color: rgba(var(--acc-rgb), .45); }
.wfp-step.lit .wfp-node { border-color: var(--acc-500); }
.wfp-step.core.lit .wfp-node { background: var(--acc-500); }
.wfp-step.is-active .wfp-node { box-shadow: 0 0 0 5px rgba(var(--acc-rgb), .14); }
.wfp-line { position: absolute; left: 26px; width: 2px; top: var(--line-top, 30px); height: var(--line-h, 0px); background: var(--line); border-radius: 2px; pointer-events: none; }
.wfp-fill { position: absolute; left: 0; top: 0; width: 100%; height: var(--fill-h, 0px); background: var(--acc-500); border-radius: 2px; transition: height .4s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .wfp-btn:hover { background: rgba(255,255,255,.75); border-color: var(--line); }
  .wfp-btn:hover .wfp-cue { border-color: var(--acc-400); color: var(--acc-600); }
}
.wfp-step.is-active .wfp-btn { background: #fff; border-color: rgba(var(--acc-rgb), .35); box-shadow: 0 1px 2px rgba(13,13,13,.04), 0 12px 30px rgba(13,13,13,.07); }
.wfp-step.is-active .wfp-cue { background: var(--acc-500); border-color: var(--acc-500); color: #fff; }
.wfp-btn:focus-visible { outline: 2px solid var(--spark); outline-offset: 2px; }
@media (max-width: 900px) {
  .wfp .container.wfp-grid { grid-template-columns: 1fr; gap: 24px; }
  .wfp-left { display: contents; }
  .wfp .section-head { order: 0; margin-bottom: 0; }
  .wfp-right { order: 1; position: static; }
  .wfp-list { order: 2; }
  .wfp-btn { padding: 14px 12px 14px 46px; column-gap: 10px; }
  .wfp-node { left: 15px; top: 19px; }
  .wfp-line { left: 22px; }
  .wfp-cue { width: 32px; height: 32px; }
  .wfp-cue svg { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) { .wf-img, .wfp-fill, .wfp-node, .wfp-btn, .wfp-cue { transition: none; } }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 4vh 4vw; background: rgba(10, 18, 28, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .15s var(--ease); }
.lightbox[hidden] { display: none; }
.lightbox.open { opacity: 1; transition: opacity .24s var(--ease-out); }
.lb-frame { margin: 0; max-width: 94vw; max-height: 90vh; display: flex; flex-direction: column; align-items: center; }
.lb-frame.zoom { overflow: auto; align-items: flex-start; }
.lb-img { max-width: 94vw; max-height: 84vh; width: auto; height: auto; border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.5); background: #fff; cursor: zoom-in; transform: scale(.97); transition: transform .24s var(--ease-out); }
.lightbox.open .lb-img { transform: scale(1); }
.lb-img.zoomed { max-width: none; max-height: none; cursor: zoom-out; }
.lb-cap { color: #e8eef2; font-size: .9rem; margin-top: 14px; text-align: center; }
.lb-close { position: fixed; top: 18px; right: 22px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .2s var(--ease); }
.lb-close svg { width: 20px; height: 20px; }
.lb-close:hover { background: rgba(255,255,255,.26); }

/* ---------- Sections ---------- */
.section { padding: 88px 0; }
.section.soft { background: var(--bg-soft); }
.section.tint { background: linear-gradient(180deg, var(--bg-tint), var(--bg-soft)); }
.section-head { max-width: 720px; margin-bottom: 52px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head .eyebrow { margin-bottom: 16px; }
.section-head p { color: var(--ink-500); font-size: 1.08rem; }

/* Cards */
.grid { display: grid; gap: 24px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px; box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
a.card { display: block; color: inherit; }
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--acc-100); }
  .card:hover .card-link svg { transform: translateX(4px); }
}
.card .icon { display: flex; margin-bottom: 18px; color: var(--ink-900); }
.card .icon svg { width: 34px; height: 34px; }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--ink-500); font-size: .96rem; margin: 0; }
.card .card-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 18px; font-weight: 600; font-size: .92rem; color: var(--acc-600);
}
.card .card-link svg { width: 15px; height: 15px; transition: transform .2s var(--ease-out); }

/* Feature list (checkmarks) */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-700); }
.check-list li svg { width: 21px; height: 21px; flex: none; color: var(--acc-500); margin-top: 2px; }
.check-list li strong { color: var(--ink-900); }

/* Split layout */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split.reverse > .split-media { order: 2; }
.split h2 { margin-bottom: 16px; }
.split p { color: var(--ink-500); }

/* Stats */
/* Key figures — one dark block (echoes the footer), all white: no lines, no boxes */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; background: #0D0D0D; color: #fff; border-radius: 24px; padding: 48px 52px; }
.stat { text-align: left; }
.stat .num { font-family: var(--font-head); font-size: clamp(2.4rem, 4.4vw, 3.4rem); font-weight: 700; color: #fff; line-height: 1; letter-spacing: -.04em; }
.stat .label { margin-top: 12px; color: rgba(255,255,255,.62); font-size: .95rem; }
@media (max-width: 600px) { .stats { grid-template-columns: 1fr; gap: 28px; } }
/* Home: VIDAcare figures as quiet supporting facts — no background, teal numbers, grey labels */
.stats.vc-stats { background: none; color: var(--ink-900); padding: 0; border-radius: 0; gap: 24px 48px; margin-top: 64px; }
.vc-stats .stat .num { color: #008C84; font-size: clamp(2rem, 3.4vw, 2.6rem); }
.vc-stats .stat .label { color: var(--ink-500); margin-top: 8px; }

/* Logo strips */
.logo-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 40px 56px; }
/* Uniform visual mass: fixed display height, contained, grayscale — logos are trimmed so heights read consistently. */
.logo-strip img { height: 38px; width: auto; max-width: 168px; object-fit: contain; filter: none; opacity: 1; transition: filter .25s var(--ease), opacity .25s var(--ease); }
.logo-strip img:hover { filter: none; opacity: 1; }

/* Infinite client logo carousel (home hero) */
.logo-marquee {
  overflow: hidden; width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.logo-track { display: flex; align-items: center; width: max-content; animation: logoMarquee 44s linear infinite; will-change: transform; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
.logo-track img { height: 40px; width: auto; margin-right: 64px; object-fit: contain; filter: none; opacity: 1; flex: 0 0 auto; transition: filter .25s var(--ease), opacity .25s var(--ease); }
.logo-track img:hover { filter: none; opacity: 1; }
@keyframes logoMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .logo-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; row-gap: 28px; } }

/* Pills / badges */
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
  font-size: .85rem; font-weight: 500; color: var(--ink-700);
  background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px;
}
.pill.teal { background: var(--acc-50); border-color: var(--acc-100); color: var(--acc-600); font-weight: 600; }

/* Module table */
.module-row {
  display: grid; grid-template-columns: 220px 1fr; gap: 28px;
  padding: 28px 0; border-bottom: 1px solid var(--line); align-items: start;
}
.module-row:last-child { border-bottom: 0; }
.module-row h3 { display: flex; align-items: center; gap: 12px; font-size: 1.1rem; margin: 0; }
.module-row h3 svg { width: 22px; height: 22px; color: var(--acc-500); }
.module-row p { margin: 0; color: var(--ink-500); }

/* CTA band */
.cta-band {
  position: relative; overflow: hidden; border-radius: 24px;
  background: var(--acc-50); border: 1px solid var(--acc-100);
  color: var(--ink-900); padding: 60px 56px; text-align: center;
}
.cta-band::before {
  content: ""; position: absolute; top: 22px; right: 24px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--spark);
}
.cta-band > * { position: relative; }
.cta-band h2 { color: var(--ink-900); font-size: clamp(2rem, 3.6vw, 2.75rem); letter-spacing: -.02em; }
.cta-band p { color: var(--ink-500); max-width: 54ch; margin: 14px auto 30px; }

/* White pill button used on dark surfaces (footer CTA) */
.cta-btn { background: #fff; color: var(--ink-900); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
@media (hover: hover) and (pointer: fine) { .cta-btn:hover { background: #fff; color: var(--ink-900); transform: translateY(-2px); } }

/* Footer */
/* ---------- Footer: one single dark piece (CTA + links) with curved top corners ---------- */
/* It overlaps the last section by the radius, so the curved corners reveal that section's own background. */
main > section:last-of-type { padding-bottom: 144px !important; }
.site-footer {
  position: relative; z-index: 2; isolation: isolate; overflow: hidden;
  margin-top: -56px; border-radius: 56px 56px 0 0;
  background: #0D0D0D; color: rgba(255,255,255,.66);
  padding: 72px 0 34px;
}
/* flat black, with only a very fine film grain for texture */
.site-footer::after {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.site-footer .container { position: relative; z-index: 1; }

/* CTA living inside the footer — two-weight headline */
.footer-cta { text-align: center; padding: 56px 0 104px; }
.footer-cta h2 { color: #fff; font-size: clamp(2.5rem, 5.4vw, 4.4rem); line-height: 1.04; letter-spacing: -.035em; margin: 0; }
.footer-cta h2 .ft-b { display: block; font-weight: 700; }
.footer-cta h2 .ft-l { display: block; font-weight: 300; }
.footer-cta h2.ft-inline .ft-b, .footer-cta h2.ft-inline .ft-l { display: inline; }
.footer-cta h2 + .cta-btn { margin-top: 36px; }
.footer-cta p { color: rgba(255,255,255,.68); max-width: 50ch; margin: 22px auto 34px; font-size: 1.05rem; line-height: 1.7; }
.site-footer .cta-btn { background: #fff; color: var(--ink-900); }
.site-footer .cta-btn:hover { color: var(--ink-900); }

.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 8px; }
.site-footer .f-logo img { height: 26px; margin-bottom: 18px; }
.site-footer p { font-size: .92rem; line-height: 1.7; }
.site-footer h4 { color: #fff; font-size: .95rem; font-weight: 600; letter-spacing: 0; text-transform: none; margin-bottom: 16px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer a { color: rgba(255,255,255,.62); font-size: .95rem; transition: color .2s var(--ease); }
.site-footer a:hover { color: #fff; }


.footer-bottom { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center; margin-top: 64px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.09); font-size: .82rem; color: rgba(255,255,255,.45); }
.fb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
/* Language switch — a quiet segmented control in the footer, languages named in their own language */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.lang-opt { font: inherit; font-size: .8rem; font-weight: 500; letter-spacing: .01em; color: rgba(255,255,255,.48); background: transparent; border: 0; border-radius: 7px; padding: 6px 12px; cursor: pointer; transition: color .2s var(--ease), background-color .2s var(--ease), transform .16s var(--ease-out); }
.lang-opt[aria-pressed="true"] { color: #fff; background: rgba(255,255,255,.1); cursor: default; }
.lang-opt:active { transform: scale(.97); }
.lang-opt:focus-visible { outline: 2px solid rgba(255,255,255,.6); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) { .lang-opt:not([aria-pressed="true"]):hover { color: rgba(255,255,255,.85); } }
.made-pt { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: rgba(255,255,255,.45); letter-spacing: .01em; }
.pt-flag { display: block; width: 9px; height: 9px; border-radius: 50%; flex: none; background: linear-gradient(90deg, #046A38 0 40%, #DA291C 40%); box-shadow: 0 0 0 2px rgba(255,255,255,.06); }
@media (max-width: 560px) { .footer-bottom, .fb-meta { justify-content: center; text-align: center; } }
@media (max-width: 760px) {
  main > section:last-of-type { padding-bottom: 112px !important; }
  .site-footer { margin-top: -32px; border-radius: 32px 32px 0 0; }
  .footer-cta { padding: 36px 0 72px; }
}

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(20px); }
/* CSS transition only powers the no-GSAP fallback; when GSAP is active it
   tweens inline and we must NOT add a competing transition here (it would
   smear the reveal and break per-element hovers like .card). */
html:not(.gsap-on) .reveal { transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* Pre-hide hero content under GSAP to avoid a flash before the intro runs. */
html.gsap-on .hero .eyebrow,
html.gsap-on .hero .hero-kicker,
html.gsap-on .hero h1,
html.gsap-on .hero p.lead,
html.gsap-on .hero .hero-actions,
html.gsap-on .hero-visual,
html.gsap-on .page-hero .breadcrumbs,
html.gsap-on .page-hero .eyebrow,
html.gsap-on .page-hero h1,
html.gsap-on .page-hero .lead,
html.gsap-on .page-hero .hero-actions { opacity: 0; }

/* Page hero (interior pages) */
.page-hero { padding: 80px 0 56px; background: linear-gradient(180deg, var(--bg-tint), #fff); }
.page-hero .lead { font-size: 1.15rem; color: var(--ink-500); max-width: 62ch; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .85rem; color: var(--ink-300); margin-bottom: 24px; }
.breadcrumbs a { color: var(--ink-500); }
.breadcrumbs svg { width: 13px; height: 13px; }
/* VIDAcare pages: the breadcrumb IS the kicker — lime spark + path, one line */
.breadcrumbs.bc-kicker { font-size: .88rem; font-weight: 500; color: var(--ink-500); gap: 10px; margin-bottom: 22px; }
.breadcrumbs.bc-kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--spark); box-shadow: 0 0 0 4px rgba(141,198,63,.18); margin-right: 2px; }
.breadcrumbs.bc-kicker a { color: var(--ink-500); }
.breadcrumbs.bc-kicker a:hover { color: var(--ink-900); }
.breadcrumbs.bc-kicker span:last-child { color: var(--ink-900); }

/* Forms */
.form-grid { display: grid; gap: 20px; }
.form-grid .row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
label { display: block; font-weight: 600; font-size: .9rem; color: var(--ink-900); margin-bottom: 8px; }
input, select, textarea {
  width: 100%; font: inherit; color: var(--ink-900);
  border: 1px solid var(--line); border-radius: 12px; padding: 13px 16px;
  background: #fff; min-height: 48px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
textarea { min-height: 140px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acc-500); box-shadow: 0 0 0 4px rgba(var(--acc-rgb),.14); }
.helper { font-size: .82rem; color: var(--ink-300); margin-top: 6px; }
.req { color: var(--acc-600); }
label .opt { font-weight: 400; color: var(--ink-300); }
.field-error, .split p.field-error { font-size: .82rem; font-weight: 500; color: #B42318; margin: 6px 0 0; }
input[aria-invalid], textarea[aria-invalid] { border-color: #D92D20; }
/* attachment: the real <input type=file> covers the zone, so click and drag-and-drop are native */
.file-drop { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 14px 16px; border: 1px dashed var(--ink-300); border-radius: 12px; background: var(--bg-soft); color: var(--ink-500); font-size: .92rem; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.file-drop > svg { width: 20px; height: 20px; flex: none; color: var(--acc-600); }
.file-drop strong { color: var(--ink-900); font-weight: 600; }
.file-drop input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; border: 0; min-height: 0; }
.file-drop:hover, .file-drop.dragging { border-color: var(--acc-500); background: var(--acc-50); }
.file-drop:focus-within { border-color: var(--acc-500); box-shadow: 0 0 0 4px rgba(var(--acc-rgb), .12); }
.file-drop.has-file { border-style: solid; background: #fff; }
.file-name { color: var(--ink-900); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.file-clear { position: relative; z-index: 1; margin-left: auto; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-500); cursor: pointer; }
.file-clear:hover { background: var(--bg-tint); color: var(--ink-900); }
.file-clear svg { width: 16px; height: 16px; }
.file-drop [hidden] { display: none !important; }
/* careers: the conversation starts right below the open positions */
.split-media .grid:has(.info-tile) { gap: 28px !important; }
input[type=hidden] { display: none !important; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.turnstile-slot[hidden] { display: none; }
.turnstile-slot { margin-top: -20px; }            /* invisible most of the time: don't leave an empty grid gap */
.turnstile-slot.is-visible { margin-top: 0; }
.careers-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); }
.careers-cta p { margin: 0; max-width: 56ch; color: var(--ink-700); font-size: 1.02rem; }

/* Contact info blocks */
.info-tile { display: flex; gap: 14px; align-items: flex-start; padding: 0; }
.info-tile svg { width: 22px; height: 22px; color: var(--acc-600); flex: none; margin-top: 2px; }
.info-tile h4 { margin: 0 0 4px; }
.info-tile p, .info-tile a { margin: 0; font-size: .95rem; color: var(--ink-500); }

/* Numbered steps */
.steps { counter-reset: step; display: grid; gap: 0; }
.step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 22px; padding: 26px 0; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--font-head); font-weight: 800; font-size: 1.15rem;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--acc-50); color: var(--acc-600); border: 1px solid var(--acc-100);
}
.step:not(:last-child)::after {
  content: ""; position: absolute; left: 27.5px; top: 84px; bottom: -2px;
  width: 1px; background: var(--line);
}
.step h3 { margin-bottom: 6px; }
.step p { margin: 0; color: var(--ink-500); }

/* Product screen frame — used for every app screenshot (no fake browser chrome) */
.shot { margin: 0; border: 1px solid rgba(13,13,13,.10); border-radius: 12px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 2px rgba(13,13,13,.06), 0 22px 46px rgba(13,13,13,.16); }
.shot > img { display: block; width: 100%; height: auto; }
.wf-imgwrap:focus-visible { outline: 2px solid var(--spark); outline-offset: -2px; }

/* Overlapping pair of dark app screenshots (teleradiology) — each opens in the lightbox */
.shot-stack { position: relative; aspect-ratio: 1 / .9; }
.ss { position: absolute; width: 86%; padding: 0; margin: 0; border: 1px solid rgba(13,13,13,.10); border-radius: 12px; overflow: hidden; background: #121212; cursor: zoom-in;
  box-shadow: 0 1px 2px rgba(13,13,13,.06), 0 22px 46px rgba(13,13,13,.16); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.ss img { display: block; width: 100%; height: auto; }
.ss-back { top: 0; left: 0; }
.ss-front { top: 45%; right: 0; }
.ss:focus-visible { outline: 2px solid var(--spark); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .ss:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(13,13,13,.06), 0 30px 60px rgba(13,13,13,.2); } }
/* Background "stage" behind product screenshots (Iterable/Sword-like): the screens break out of a soft brand panel.
   Rounded brand panel (chosen 2026-10-06) */
.shot-stage { position: relative; isolation: isolate; padding: 0 8% 8%; }
.shot-stage > .browser, .shot-stage > figure { margin: 0; }
.shot-stage::before { content: ""; position: absolute; z-index: -1; top: 12%; right: 0; bottom: 0; left: 0; border-radius: 28px;
  background:
    radial-gradient(80% 70% at 100% 100%, rgba(141,198,63,.42), rgba(141,198,63,0) 62%),
    radial-gradient(70% 60% at 0% 0%, rgba(255,255,255,.7), rgba(255,255,255,0) 70%),
    linear-gradient(160deg, #DDF3F0 0%, #8ED6CD 50%, #1FA99F 100%); }
.ss { translate: 0 var(--py, 0px); }
.shot-stage:has(> [hidden]) { display: none; }                 /* explorer modules without a screenshot */
.mx-detail .shot-stage { margin-top: 22px; padding: 0 6% 7%; }
.mx-detail .shot-stage::before { top: 16%; border-radius: 18px; }
.shot-stage > .phone { position: relative; }

/* Tabs (screenshots showcase) */
.tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 36px; }
.tab-btn {
  font: inherit; font-weight: 600; font-size: .93rem; color: var(--ink-500);
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 11px 22px; cursor: pointer; min-height: 44px;
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.tab-btn:hover { border-color: var(--acc-400); color: var(--acc-600); }
.tab-btn.active { background: var(--btn-bg); border-color: var(--btn-bg); color: #fff; box-shadow: 0 8px 20px var(--btn-shadow); }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn .4s var(--ease); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Phone frame */
.phone {
  width: min(300px, 80vw); margin: 0 auto; background: #fff;
  border: 1px solid var(--line); border-radius: 36px; padding: 12px;
  box-shadow: var(--shadow-lg);
}
.phone img { border-radius: 26px; }

/* Notice */
.notice {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--acc-50); border: 1px solid var(--acc-100);
  border-radius: var(--radius); padding: 20px 22px; font-size: .95rem; color: var(--ink-700);
}
.notice svg { width: 20px; height: 20px; color: var(--acc-600); flex: none; margin-top: 2px; }

/* Funding strip (EU projects) */
.funding { font-size: .85rem; color: var(--ink-500); background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; }

/* ---------- Interactive diagrams ---------- */
.dgm-wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: start; }
.dgm-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px; box-shadow: var(--shadow-sm);
}
.dgm-svg { width: 100%; height: auto; display: block; }

.dgm-band { fill: var(--bg-soft); stroke: var(--line); rx: 14; }
.dgm-band-label { font-family: var(--font-body); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; fill: var(--ink-300); }
.dgm-node-box { fill: #fff; stroke: var(--line); stroke-width: 1.5; rx: 10; transition: stroke .25s var(--ease), fill .25s var(--ease); }
.dgm-node-label { font-family: var(--font-body); font-size: 13px; font-weight: 600; fill: var(--ink-900); }
.dgm-node-sub { font-family: var(--font-body); font-size: 10.5px; fill: var(--ink-500); }
.dgm-node { cursor: default; }
.dgm-edge { stroke: var(--ink-300); stroke-width: 1.6; fill: none; transition: stroke .25s var(--ease), opacity .25s var(--ease); }
.dgm-edge.flow { stroke-dasharray: 6 7; animation: dgmFlow 1.1s linear infinite; }
@keyframes dgmFlow { to { stroke-dashoffset: -13; } }
@media (prefers-reduced-motion: reduce) { .dgm-edge.flow { animation: none; } }
.dgm-tag { font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: .06em; fill: var(--acc-600); }
.dgm-tag-box { fill: var(--acc-50); stroke: var(--acc-100); rx: 8; }
.dgm-num circle { fill: var(--acc-500); }
.dgm-num text { font-family: var(--font-head); font-size: 11px; font-weight: 700; fill: #fff; text-anchor: middle; }
.dgm-rv { fill: var(--acc-500); stroke: #fff; stroke-width: 2; }
.dgm-rv-t { font-family: var(--font-head); font-size: 12px; font-weight: 700; fill: #fff; }

/* step highlighting: container gets data-active="n"; elements carry data-steps="1 4" */
.dgm [data-steps] { transition: opacity .3s var(--ease); }
.dgm.focused [data-steps] { opacity: .22; }
.dgm.focused [data-steps].on { opacity: 1; }
.dgm.focused .dgm-node-box.on-box { stroke: var(--acc-500); stroke-width: 2; fill: var(--acc-50); }

/* steps list */
.dgm-steps { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: dstep; }
.dgm-steps li {
  display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start;
  padding: 13px 16px; border-radius: 14px; border: 1px solid transparent;
  cursor: pointer; transition: background .2s var(--ease), border-color .2s var(--ease);
  font-size: .93rem; color: var(--ink-500);
}
.dgm-steps li::before {
  counter-increment: dstep; content: counter(dstep);
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 700; font-size: .85rem;
  background: var(--bg-tint); color: var(--acc-600);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.dgm-steps li:hover, .dgm-steps li.active { background: var(--acc-50); border-color: var(--acc-100); color: var(--ink-700); }
.dgm-steps li.active::before { background: var(--acc-500); color: #fff; }

/* mode switch (portal) */
.dgm-switch { display: inline-flex; gap: 6px; background: var(--bg-tint); border: 1px solid var(--line); border-radius: 999px; padding: 5px; margin-bottom: 22px; }
.dgm-switch button {
  font: inherit; font-weight: 600; font-size: .88rem; color: var(--ink-500);
  border: 0; background: transparent; border-radius: 999px; padding: 9px 18px;
  cursor: pointer; min-height: 40px; transition: color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.dgm-switch button.active { background: #fff; color: var(--acc-600); box-shadow: var(--shadow-sm); }
.dgm[data-mode] [data-mode-show] { transition: opacity .35s var(--ease); }
.dgm[data-mode="api"] [data-mode-show~="connector"]:not([data-mode-show~="api"]) { opacity: .18; }
.dgm[data-mode="connector"] [data-mode-show~="api"]:not([data-mode-show~="connector"]) { opacity: .18; }

@media (max-width: 920px) {
  .dgm-wrap { grid-template-columns: 1fr; }
}

/* ---------- Module explorer ---------- */
/* ---------- Module explorer: a light index of modules + one detail panel ---------- */
.mx-grid-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
.mx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mx-chip {
  display: flex; align-items: center; gap: 12px; text-align: left;
  font: inherit; cursor: pointer; min-height: 52px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .16s var(--ease-out);
}
.mx-chip svg { width: 22px; height: 22px; flex: none; color: var(--acc-600); }
.mx-chip .mx-name { font-family: var(--font-head); font-weight: 600; font-size: .92rem; line-height: 1.25; color: var(--ink-900); }
.mx-chip:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .mx-chip:hover { border-color: var(--acc-400); } }
.mx-chip.active { border-color: var(--acc-500); background: var(--acc-50); }
/* VIDAcare AI — new, platform-wide: full row, VIDAcare's own teal→lime instead of a borrowed colour */
.mx-chip.mx-ai { grid-column: 1 / -1; border: 1.5px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #00A79D, #8DC63F) border-box; }

.mx-chip.mx-ai.active { background: linear-gradient(90deg, #EDF9F8, #F2F9E8) padding-box, linear-gradient(90deg, #00A79D, #8DC63F) border-box; }
.mx-new { margin-left: auto; font-size: .7rem; font-weight: 700; letter-spacing: .02em; color: #3F6212; background: #EEF7E2; border-radius: 6px; padding: 3px 8px; }
.mx-detail {
  position: sticky; top: 100px; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px; min-height: 240px;
}
.mx-detail.is-ai::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #00A79D, #8DC63F); }
.mx-detail-new { display: inline-block; margin: 0 0 12px; }
.mx-detail h3 { font-size: 1.4rem; margin-bottom: 10px; }
.mx-detail p { color: var(--ink-500); font-size: .98rem; }
.mx-feats { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.mx-feats li { position: relative; padding-left: 18px; font-size: .92rem; color: var(--ink-700); }
.mx-feats li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--spark); }
.mx-detail .mx-detail-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; margin-top: 16px; }
.mx-detail .mx-detail-link svg { width: 15px; height: 15px; }
.mx-shot { margin: 22px 0 0; }
.mx-shot .browser-bar { position: relative; }
.mx-shot-wrap { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #f3f6f8; cursor: zoom-in; }
.mx-shot-img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.mx-shot[hidden], .mx-feats[hidden], .mx-detail-new[hidden] { display: none !important; }
@media (max-width: 1020px) {
  .mx-grid-wrap { grid-template-columns: 1fr; }
  .mx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mx-detail { position: static; min-height: 0; }
}
@media (max-width: 560px) { .mx-grid { grid-template-columns: 1fr; } }

/* ---------- Solutions: an editorial list, not another card grid ---------- */
.sol-list { border-top: 1px solid var(--line); }
.sol-row { display: grid; grid-template-columns: 40px minmax(0, 280px) minmax(0, 1fr) 24px; gap: 28px; align-items: center; padding: 26px 8px; border-bottom: 1px solid var(--line); color: inherit; transition: background-color .2s var(--ease); }
.sol-row:hover { color: inherit; }
.sol-ic svg { width: 28px; height: 28px; color: var(--acc-600); display: block; }
.sol-row h3 { margin: 0; font-size: 1.15rem; }
.sol-row p { margin: 0; color: var(--ink-500); font-size: .98rem; }
.sol-go svg { width: 18px; height: 18px; color: var(--ink-300); display: block; transition: transform .25s var(--ease-out), color .2s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .sol-row:hover { background: var(--acc-50); }
  .sol-row:hover .sol-go svg { transform: translateX(4px); color: var(--acc-600); }
}
@media (max-width: 760px) {
  .sol-row { grid-template-columns: 32px minmax(0, 1fr) 20px; gap: 6px 16px; align-items: start; }
  .sol-row p { grid-column: 2; grid-row: 2; }
  .sol-row .sol-go { grid-column: 3; grid-row: 1; }
}

/* ---------- Pillars: plain columns divided by hairlines ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pillar { padding: 4px 32px; border-left: 1px solid var(--line); }
.pillar:first-child { padding-left: 0; border-left: 0; }
.pillar svg { width: 32px; height: 32px; color: var(--acc-600); margin-bottom: 16px; display: block; }
.pillar h3 { font-size: 1.1rem; margin: 0 0 8px; }
.pillar p { margin: 0; color: var(--ink-500); font-size: .96rem; }
.pillars.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pillars.two .pillar { padding-right: 40px; }
.pillars.two .pillar + .pillar { padding-left: 40px; }
.job-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; font-size: .86rem; font-weight: 500; color: var(--ink-500); }
.job-meta span { display: inline-flex; align-items: center; gap: 6px; }
.job-meta svg { width: 15px; height: 15px; color: var(--acc-600); flex: none; }
.pillar-tag { display: block; font-size: .82rem; font-weight: 600; color: var(--acc-600); margin-bottom: 10px; }
.pillar .dot-list { margin-top: 18px; }
.dot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dot-list li { position: relative; padding-left: 18px; font-size: .95rem; color: var(--ink-700); }
.dot-list li::before { content: ""; position: absolute; left: 2px; top: .58em; width: 7px; height: 7px; border-radius: 50%; background: var(--spark); }
@media (max-width: 860px) {
  .pillars { grid-template-columns: 1fr; }
  .pillars.two { grid-template-columns: 1fr; }
  .pillar, .pillar:first-child, .pillars.two .pillar + .pillar { padding: 22px 0; border-left: 0; border-top: 1px solid var(--line); }
}

/* Hero media (generated imagery) */
.hero-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.hero-media img, .hero-media video { width: 100%; display: block; }

/* Responsive */
@media (max-width: 1020px) {
  .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .section { padding: 64px 0; }
  .hero { padding: 64px 0 56px; }
  .hero-grid, .split, .split.reverse { grid-template-columns: 1fr; gap: 40px; }
  .split.reverse > .split-media { order: 0; }
  .grid.cols-3 { grid-template-columns: 1fr; }
  .grid.cols-2 { grid-template-columns: 1fr; }
  .grid.cols-4 { grid-template-columns: 1fr; }
  .stats { gap: 24px; padding: 36px 30px; border-radius: 20px; }
  .module-row { grid-template-columns: 1fr; gap: 10px; }
  .cta-band { padding: 56px 28px; }
  .form-grid .row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---------- Icons: Phosphor (MIT), one family site-wide ----------
   Single-tone line icons in graphite: light weight at large sizes (cards, pillars, solutions), regular when small;
   UI glyphs (arrows, carets, close) use regular/bold. */
svg.ph { display: inline-block; flex: none; }
svg.ph.ph-ico { color: var(--ink-700); }

/* ---------- Integration flow map (Radiology) ----------
   Dashed routes; the active step sends a soft beam of light along its routes (data flowing). */
.fm { --fm: #00A79D; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.fm-canvas { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 22px; padding: 20px 18px; }
.fm-svg { width: 100%; height: auto; display: block; overflow: visible; }
.fm-base { fill: none; stroke: #C9D2D8; stroke-width: 1.5; stroke-dasharray: 4 5; transition: stroke .35s var(--ease), opacity .35s var(--ease); }
.fm-glow, .fm-tail, .fm-head { fill: none; stroke: var(--fm); stroke-linecap: round; opacity: 0; }
.fm-glow { stroke-width: 9; stroke-dasharray: 22 300; }
.fm-tail { stroke-width: 4; stroke-dasharray: 22 300; }
.fm-head { stroke-width: 4; stroke: #8DEBD9; stroke-dasharray: 5 300; }
.fm-edge.on .fm-base { stroke: var(--fm); stroke-dasharray: none; opacity: .35; }
.fm-edge.on .fm-glow { opacity: .45; animation: fmTail 1.7s cubic-bezier(.45,0,.25,1) var(--d, 0s) infinite both; }
.fm-edge.on .fm-tail { opacity: .9; animation: fmTail 1.7s cubic-bezier(.45,0,.25,1) var(--d, 0s) infinite both; }
.fm-edge.on .fm-head { opacity: 1; animation: fmHead 1.7s cubic-bezier(.45,0,.25,1) var(--d, 0s) infinite both; }
@keyframes fmTail { from { stroke-dashoffset: 22; } to { stroke-dashoffset: -100; } }
@keyframes fmHead { from { stroke-dashoffset: 5; } to { stroke-dashoffset: -117; } }
.fm-box { fill: #fff; stroke: var(--line); stroke-width: 1.5; transition: stroke .35s var(--ease), fill .35s var(--ease); }
.fm-hub .fm-box { stroke: #9FDCD6; }
.fm-ic { color: var(--ink-700); transition: color .35s var(--ease); }
.fm-label { font-family: var(--font-head); font-size: 16px; font-weight: 600; fill: var(--ink-900); }
.fm-sub { font-family: var(--font-body); font-size: 12.5px; fill: var(--ink-500); }
.fm-tag rect { fill: #fff; stroke: #CFEDEA; }
.fm-tag text { font-family: var(--font-body); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; fill: #008C84; }
.fm-badge circle { fill: var(--ink-900); }
.fm-badge text { font-family: var(--font-head); font-size: 11.5px; font-weight: 700; fill: #fff; }
.fm-node, .fm-tag, .fm-badge, .fm-edge { transition: opacity .35s var(--ease); }
.fm [data-steps]:not(.on), .fm .fm-edge:not(.on) { opacity: .45; }
.fm .fm-node.on .fm-box { stroke: var(--fm); fill: #F2FBFA; }
.fm .fm-node.on .fm-ic { color: #008C84; }
.fm .fm-badge.on circle { fill: var(--fm); }
/* VIDAcare hub: in step 4 the light runs around its border (reporting happens inside VIDAcare) */
.fm-oglow, .fm-oline { fill: none; stroke: var(--fm); stroke-linecap: round; opacity: 0; stroke-dasharray: 16 34; }
.fm-oglow { stroke-width: 8; }
.fm-oline { stroke-width: 3; }
.fm-orbit.on .fm-oglow { opacity: .45; animation: fmOrbit 2.6s linear infinite; }
.fm-orbit.on .fm-oline { opacity: 1; animation: fmOrbit 2.6s linear infinite; }
@keyframes fmOrbit { to { stroke-dashoffset: -100; } }
/* steps: vertical list, the active one shows its description */
.fm-steps { display: grid; gap: 8px; }
.fm-step { position: relative; overflow: hidden; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 2px 12px; align-items: center; text-align: left; font: inherit; color: var(--ink-700); cursor: pointer; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 13px 16px; transition: border-color .25s var(--ease), background-color .25s var(--ease); }
.fm-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-head); font-size: .78rem; font-weight: 700; color: var(--ink-500); background: var(--bg-soft); border: 1px solid var(--line); transition: all .25s var(--ease); }
.fm-t { font-family: var(--font-head); font-weight: 600; font-size: 1rem; color: var(--ink-900); }
.fm-d { grid-column: 2; display: none; padding-top: 4px; font-size: .94rem; line-height: 1.6; color: var(--ink-500); }
.fm-step.active { border-color: #9FDCD6; background: #F7FCFC; }
.fm-step.active .fm-n { background: var(--fm); border-color: var(--fm); color: #fff; }
.fm-step.active .fm-d { display: block; }
@media (hover: hover) and (pointer: fine) { .fm-step:not(.active):hover { border-color: var(--ink-300); } }
.fm-step:focus-visible { outline: 2px solid var(--fm); outline-offset: 2px; }
.fm-prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--fm); transform: scaleX(0); transform-origin: left; opacity: 0; }
.fm.autoplay .fm-step.active .fm-prog { opacity: .7; animation: fmProg var(--fm-t, 5s) linear forwards; }
@keyframes fmProg { to { transform: scaleX(1); } }
@media (max-width: 980px) { .fm { grid-template-columns: 1fr; } .fm-canvas { padding: 14px 10px; } }
@media (prefers-reduced-motion: reduce) {
  .fm-edge.on .fm-glow, .fm-edge.on .fm-tail, .fm-edge.on .fm-head, .fm-orbit.on .fm-oglow { animation: none; opacity: 0; }
  .fm-orbit.on .fm-oline { animation: none; stroke-dasharray: none; opacity: .8; }
  .fm-edge.on .fm-base { opacity: .8; }
}

/* ---------- Page hero with a photo (Radiology): photo bleeds off the right edge, white melts into the page ---------- */
.page-hero.has-photo { position: relative; overflow: hidden; min-height: 640px; padding-bottom: 72px; }
.page-hero.has-photo .container { position: relative; z-index: 1; }
.page-hero.has-photo h1 { max-width: 500px; font-size: clamp(2.1rem, 3.2vw, 3rem); }
.page-hero.has-photo .lead { max-width: 460px; }
.hero-photo { position: absolute; right: 0; top: 104px; width: min(52vw, 860px); pointer-events: none; mix-blend-mode: multiply; }
.hero-photo img { display: block; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 99%), linear-gradient(to right, transparent 0, #000 8%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 76%, transparent 99%), linear-gradient(to right, transparent 0, #000 8%);
  mask-composite: intersect; }
@media (max-width: 1180px) {
  .page-hero.has-photo { min-height: 0; }
  .page-hero.has-photo h1, .page-hero.has-photo .lead { max-width: none; }
  .hero-photo { position: relative; top: auto; width: 100%; margin-top: 28px; }
}
.hero-photo { animation: heroPhotoIn 1s var(--ease-out) .2s both; }
@keyframes heroPhotoIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }

/* ---------- Home: solution cards — text on top, photo below with a curved edge, one staggered row ---------- */
.sol-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; align-items: start; padding-bottom: 48px; }
.sol-card { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 30px; overflow: hidden; color: inherit;
  box-shadow: 0 1px 2px rgba(13,13,13,.04), 0 14px 34px rgba(13,13,13,.07); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.sol-card:nth-child(2), .sol-card:nth-child(4) { margin-top: 32px; }
.sol-card:nth-child(3) { margin-top: 48px; }
.sol-card:hover { color: inherit; }
.sol-card-body { padding: 24px 22px 18px; min-height: 172px; }
.sol-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sol-card-body h3 { margin: 0; font-size: 1.08rem; font-weight: 500; line-height: 1.3; }
.sol-card-body p { margin: 10px 0 0; font-size: .92rem; line-height: 1.5; color: var(--ink-500); }
.sol-card-go { flex: none; color: var(--ink-900); margin-top: 1px; }
.sol-card-go svg { width: 20px; height: 20px; display: block; transition: transform .25s var(--ease-out); }
.sol-card-media { position: relative; height: 210px; overflow: hidden; background: #15171a; margin-top: auto;
  clip-path: ellipse(115% 100% at 50% 100%); }
.sol-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease-out); }
.sol-card-media.is-placeholder { display: grid; place-items: center; background: radial-gradient(120% 90% at 70% 30%, #24272c 0%, #121417 70%); }
.sol-card-ph { width: 56px; height: 56px; color: rgba(255,255,255,.28); }
@media (hover: hover) and (pointer: fine) {
  .sol-card:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(13,13,13,.05), 0 22px 44px rgba(13,13,13,.11); }
  .sol-card:hover .sol-card-media img { transform: scale(1.05); }
  .sol-card:hover .sol-card-go svg { transform: translateX(3px); }
}
/* narrower screens: one swipeable row */
@media (max-width: 1100px) {
  .sol-cards { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 36px; margin: 0 -4px; scrollbar-width: none; }
  .sol-cards::-webkit-scrollbar { display: none; }
  .sol-card { flex: 0 0 250px; scroll-snap-align: start; }
  .sol-card:nth-child(n) { margin-top: 0; }
}

/* ---------- Overview hero: dark product photo + floating glass UI chips (Iterable-like) ---------- */
.hv { position: relative; padding: 30px 0 44px; }
.hero-grid:has(> .hv) { grid-template-columns: .95fr 1.05fr; gap: 64px; }
.hv-card { position: relative; border-radius: 26px; overflow: hidden; background: #0b0d10;
  box-shadow: 0 2px 6px rgba(13,13,13,.08), 0 34px 70px rgba(13,13,13,.22); }
.hv-card img { display: block; width: 100%; height: auto; }
.glass { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 11px 16px 11px 11px; border-radius: 16px;
  color: #fff; font-size: .9rem; line-height: 1.25; white-space: nowrap;
  background: rgba(16,19,23,.62); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,.16); box-shadow: 0 18px 40px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.12); }
.gl-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; color: #fff; }
.gl-ic svg { width: 18px; height: 18px; }
.gl-rec { background: #E5484D; box-shadow: 0 0 0 4px rgba(229,72,77,.18); }
.gl-spark { background: linear-gradient(135deg, #00A79D, #8DC63F); }
.gl-ok { display: grid; place-items: center; width: 22px; height: 22px; color: #A6D464; flex: none; }
.gl-ok svg { width: 22px; height: 22px; }
.gl-sent { padding: 10px 16px 10px 12px; gap: 9px; border-radius: 999px; }
.gl-txt { display: flex; flex-direction: column; gap: 4px; }
.gl-k { font-size: .68rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.66); }
.gl-v { font-weight: 600; }
.gl-wave { display: flex; align-items: center; gap: 3px; height: 16px; }
.gl-wave i { width: 3px; height: 100%; border-radius: 2px; background: rgba(255,255,255,.9); transform: scaleY(.35); animation: glWave 1.2s ease-in-out infinite; }
.gl-wave i:nth-child(2n) { animation-delay: -.3s; } .gl-wave i:nth-child(3n) { animation-delay: -.6s; } .gl-wave i:nth-child(5n) { animation-delay: -.9s; }
.gl-time { margin-left: 4px; padding: 5px 9px; border-radius: 8px; background: rgba(255,255,255,.1); font-weight: 600; font-variant-numeric: tabular-nums; }
.gl-voice { left: -34px; bottom: 21%; }
.gl-ai { right: -22px; top: 0; }
.gl-sent { right: 9%; bottom: 14px; }
@keyframes glWave { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@keyframes glIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes glFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.glass { animation: glIn .8s var(--ease-out) both, glFloat 6s ease-in-out 1.6s infinite; }
.gl-ai { animation-delay: .55s, 1.8s; } .gl-voice { animation-delay: .8s, 2.4s; } .gl-sent { animation-delay: 1.05s, 3s; }
@media (max-width: 1100px) { .gl-voice { left: -12px; } .gl-ai { right: -8px; } }
@media (max-width: 900px) {
  .hero-grid:has(> .hv) { grid-template-columns: 1fr; gap: 32px; }
  .hv { padding: 22px 0 34px; }
  .gl-voice { left: 10px; bottom: 18%; } .gl-ai { right: 10px; top: 0; } .gl-sent { right: 10px; bottom: 10px; }
}
@media (max-width: 520px) {
  .glass { font-size: .8rem; padding: 8px 12px 8px 8px; gap: 9px; } .gl-ic { width: 30px; height: 30px; }
  .gl-wave { display: none; } .gl-sent { display: none; }
}
@media (prefers-reduced-motion: reduce) { .glass, .gl-wave i { animation: none; } }

/* Radiology hero: transparent cut-out of the reporting scene + light glass chips */
.hero-cut { mix-blend-mode: normal; top: var(--hero-pt, 128px); bottom: var(--hero-pb, 56px); right: max(24px, calc((100vw - 1280px) / 2)); width: min(44vw, 660px);
  display: flex; align-items: center; }
.hc-inner > img { display: block; width: 100%; height: auto; }
.hc-inner { position: relative; width: 100%; }
.hero-cut { --hero-pt: 132px; }
@media (max-width: 1180px) { .hero-cut { position: relative; top: auto; right: auto; bottom: auto; display: block; width: auto; max-width: 720px; margin: 24px auto 0; padding: 30px 24px 0; } }
.page-hero.has-cut { min-height: 0; }
.hero-cut .glass { font-size: .78rem; padding: 7px 12px 7px 7px; gap: 9px; border-radius: 13px; }
.hero-cut .gl-ic { width: 28px; height: 28px; border-radius: 9px; }
.hero-cut .gl-ic svg { width: 15px; height: 15px; }
.hero-cut .gl-k { font-size: .6rem; }
.hero-cut .gl-wave { height: 12px; } .hero-cut .gl-wave i { width: 2px; }
.hero-cut .gl-time { padding: 3px 7px; }
.hero-cut .gl-sent { padding: 7px 12px 7px 9px; } .hero-cut .gl-ok, .hero-cut .gl-ok svg { width: 18px; height: 18px; }
.hero-cut img { -webkit-mask-image: none; mask-image: none; filter: none; }
.glass.glass-light { color: var(--ink-900); background: rgba(255,255,255,.62); border-color: rgba(255,255,255,.75);
  box-shadow: 0 18px 40px rgba(13,13,13,.16), inset 0 1px 0 rgba(255,255,255,.8); }
.glass-light .gl-k { color: var(--ink-500); }
.glass-light .gl-time { background: rgba(13,13,13,.06); }
.glass-light .gl-wave i { background: var(--ink-700); }
.glass-light .gl-ok { color: #6E9E2E; }
.hero-cut .gl-voice { left: 4%; bottom: 20%; }
.hero-cut .gl-ai { left: 2%; top: -2%; right: auto; }
.hero-cut .gl-sent { right: 16%; bottom: 3%; }
@media (max-width: 1180px) { .hero-cut .gl-voice { left: 2%; } .hero-cut .gl-ai { right: 2%; top: 2%; } .hero-cut .gl-sent { right: 4%; bottom: 0; } }

/* Patient portal: floating glass notifications around the phone + OS note */
.pc-stage { position: relative; }
.pc-stage .glass { font-size: .8rem; padding: 8px 13px 8px 8px; gap: 10px; border-radius: 14px; }
.pc-stage .gl-ic { width: 30px; height: 30px; border-radius: 10px; }
.pc-stage .gl-ic svg { width: 16px; height: 16px; }
.pc-stage .gl-k { font-size: .6rem; }
.gl-amber { background: linear-gradient(135deg, #F5B33D, #E8892B); }
.gl-dark { background: #2B2E33; }
.pc-1 { left: -4%; top: 16%; }
.pc-2 { right: -6%; top: 46%; }
.pc-3 { left: 2%; bottom: 18%; }
@media (max-width: 860px) { .pc-1 { left: 2%; } .pc-2 { right: 2%; } }
.os-note { display: flex; align-items: center; gap: 10px; margin: 22px 0 0; color: var(--ink-500); font-size: .88rem; }
.os-note svg { width: 18px; height: 18px; color: var(--ink-700); }
.os-note span { margin-left: 2px; }
.pc-1 { animation-delay: .5s, 1.8s; } .pc-2 { animation-delay: .8s, 2.4s; } .pc-3 { animation-delay: 1.1s, 3s; }
@media (max-width: 600px) { .pc-stage .glass { font-size: .72rem; } .pc-1 { left: 0; } .pc-2 { right: 0; } .pc-3 { left: 0; } }

/* Home · VIDAcare: logo above the headline + numbers as rising arches (data-viz, not cards) */
.vc-title { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.vc-title-logo { height: clamp(34px, 3.2vw, 44px); width: auto; display: block; }
.vc-bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: end; height: 400px; }
.vbar { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 22px 20px 24px; border-radius: 200px 200px 28px 28px;
  transform-origin: bottom; transform: scaleY(.08); opacity: 0; transition: transform 1.1s cubic-bezier(.2,.8,.2,1), opacity .5s ease; }
.vc-bars.in .vbar { transform: none; opacity: 1; }
.vc-bars.in .vbar-2 { transition-delay: .12s; } .vc-bars.in .vbar-3 { transition-delay: .24s; }
.vbar-1 { height: 62%; background: #DDF3F1; color: var(--ink-900); }
.vbar-2 { height: 80%; background: linear-gradient(180deg, #7FD3CB 0%, #2BBCB2 100%); color: #06312E; }
.vbar-3 { height: 100%; background: linear-gradient(180deg, #A6D464 0%, #00A79D 70%); color: #fff; }
.vbar-ic { align-self: center; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.65); color: #008C84; margin-top: 6px; }
.vbar-3 .vbar-ic { background: rgba(255,255,255,.25); color: #fff; }
.vbar-ic svg { width: 22px; height: 22px; }
.vbar .num { font-family: var(--font-head); font-weight: 700; font-size: clamp(2rem, 3.2vw, 2.7rem); line-height: 1; letter-spacing: -.02em; }
.vbar .label { margin-top: 8px; font-size: .88rem; line-height: 1.35; opacity: .85; }
.vbar-txt { opacity: 0; transition: opacity .5s ease .7s; }
.vc-bars.in .vbar-txt { opacity: 1; }
@media (max-width: 860px) { .vc-bars { height: 360px; } }
@media (max-width: 520px) { .vc-bars { height: 330px; gap: 8px; } .vbar { padding: 16px 12px 18px; } .vbar .label { font-size: .76rem; } .vbar-ic { width: 38px; height: 38px; } }
@media (prefers-reduced-motion: reduce) { .vbar, .vbar-txt { transition: none; transform: none; opacity: 1; } }

/* Teleradiology flow map: client systems vs. the provider (VIDAcare modules + provider PACS) */
.fm-zone { stroke-width: 1.2; }
.fm-zone-client { fill: #EEF0F3; stroke: #D3D9DF; stroke-dasharray: 5 5; }
.fm-zone-prov { fill: rgba(0,167,157,.045); stroke: rgba(0,167,157,.28); }
.fm-zlabel { font-family: var(--font-body); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; fill: #7A858F; }
.fm-zlabel-prov { fill: #008C84; }
.fm-ext .fm-box { stroke: #C6CDD4; stroke-dasharray: 4 3; }
.fm-ext .fm-ic { color: #6B7682; }
.fm .fm-ext.on .fm-box { stroke: #6B7682; fill: #F6F7F9; stroke-dasharray: none; }
.fm .fm-ext.on .fm-ic { color: #3E4650; }
.fm-vc .fm-box { stroke: #BFE6E2; fill: #FBFEFE; }
.fm-over { font-family: var(--font-body); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; fill: #008C84; }
.fm-hubsub { font-family: var(--font-head); font-size: 15px; font-weight: 600; fill: var(--ink-700); }
.fm-zone, .fm-zlabel, .fm-zlogo { opacity: 1 !important; }

.pc-stage .phone { width: min(236px, 70vw); border-radius: 30px; padding: 9px; }
.pc-stage .phone img { border-radius: 22px; }
.pc-stage { max-width: 440px; margin-inline: auto; }

.pt-row + .pt-row { margin-top: 88px; }
.pt-h { font-size: clamp(1.4rem, 2.2vw, 1.75rem); margin-bottom: 10px; }

/* Floating notifications over images — Coverflex-like: frosted white card, soft shadow, white icon tile with a tinted glow.
   Applies site-wide to every .glass.glass-light (Radiology hero, Patient Portal phone). */
.glass.glass-light { background: rgba(255,255,255,.84); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 0; border-radius: 18px; box-shadow: 2px 3px 18px rgba(13,13,13,.14); color: var(--ink-900); padding: 12px 18px 12px 12px; gap: 12px; }
.glass-light .gl-ic { background: #fff; border-radius: 13px; box-shadow: 1px 2px 9px -3px var(--glow, rgba(0,167,157,.7)); }
.glass-light .gl-ic.gl-rec   { color: #E5484D; --glow: rgba(229,72,77,.75); }
.glass-light .gl-ic.gl-spark { color: #00A79D; --glow: rgba(0,167,157,.75); }
.glass-light .gl-ic.gl-amber { color: #E8892B; --glow: rgba(232,137,43,.75); }
.glass-light .gl-ic.gl-dark  { color: var(--ink-900); --glow: rgba(13,13,13,.45); }
.glass-light .gl-k { font-size: .72rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-500); }
.glass-light .gl-v { font-weight: 500; }
.glass-light .gl-time { background: #F1F4F6; color: var(--ink-900); }
.glass-light.gl-sent { border-radius: 18px; padding: 11px 18px 11px 13px; }
.glass-light .gl-ok { color: #00A79D; }
.hero-cut .glass.glass-light, .pc-stage .glass.glass-light { padding: 10px 16px 10px 10px; border-radius: 16px; }
.hero-cut .glass-light .gl-ic, .pc-stage .glass-light .gl-ic { width: 32px; height: 32px; border-radius: 11px; }

/* Layered scenes (Sword-like): chips enter one after another from the side, then follow the pointer with depth */
@media (prefers-reduced-motion: no-preference) {
  .layered .glass { animation: glFloat 6s ease-in-out 2.4s infinite; opacity: 0;
    transform: translate3d(calc(var(--from, 1) * 64px), 0, 0);
    transition: opacity .7s ease-out var(--delay, 0s), transform 1s cubic-bezier(.2,.8,.2,1) var(--delay, 0s); }
  .layered.in .glass { opacity: 1; transform: none; }
  .layered.settled .glass { transition: opacity .3s ease-out, transform .35s ease-out; }
}

/* Home: one continuous white canvas; sections separated by space, not colour */
body.home-overlay main > section, body.home-overlay #work { background: #fff !important; }
body.home-overlay #solutions { padding-top: 128px; }
body.home-overlay #solutions .section-head { margin-bottom: 64px; }

/* ===== Section backgrounds — ONE rule site-wide (2026-10-13) =====
   Every page is a continuous white canvas: heroes and sections are white, separated by space.
   Colour lives only inside components (cards, diagram canvases, screenshot stages, the dark stats block, the footer).
   No tinted/green section backgrounds, no gradients behind sections. */
.hero, .page-hero, body.hero-overlay .page-hero, body.theme-kresk.hero-overlay .page-hero,
.section, .section.soft, .section.tint, body.theme-vidacare #modules, #work { background: #fff !important; }
.eco-still { mix-blend-mode: multiply; }
/* The old grey hero "fade" strip under every VIDAcare page hero — drew a visible band on the white canvas. */
body.theme-vidacare .page-hero::after { content: none !important; display: none !important; }

/* ── Screenshots v3 (2026-10-13): minimal browser window on the white canvas ─────────────
   No coloured stage panel. Each screen gets a slim browser bar (https://vida.care/) and a
   thin VIDAcare gradient ring (teal → lime) that draws itself around the frame once, when
   the screen first comes into view (.bw.in, set by main.js). */
.shot-stage::before { display: none !important; }
.shot-stage, .wfp-right .shot-stage, .mx-detail .shot-stage { padding: 0; }
.shot.bw, .ss.bw { border-radius: 14px; box-shadow: 0 1px 2px rgba(13,13,13,.05), 0 18px 44px -12px rgba(13,13,13,.18); }

.bw { position: relative; }
.bw-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: #F7F8F8; border-bottom: 1px solid rgba(13,13,13,.07); position: relative; }
.bw-bar i { width: 9px; height: 9px; border-radius: 50%; background: #DDE0E3; flex: none; }
.bw-url { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 14px; border-radius: 999px; background: #fff; border: 1px solid rgba(13,13,13,.06);
  font: 500 11.5px/1 var(--font-body); color: var(--ink-700); letter-spacing: .01em; white-space: nowrap; }
.bw-url b { font-weight: 500; color: var(--ink-400, #9AA0A6); }
.bw-url svg { width: 10px; height: 10px; color: #00A79D; }
.bw-dark .bw-bar { background: #1B1D1F; border-bottom-color: rgba(255,255,255,.06); }
.bw-dark .bw-bar i { background: #3A3D41; }
.bw-dark .bw-url { background: #26292C; border-color: rgba(255,255,255,.06); color: #D7DADD; }
.bw-dark .bw-url b { color: #7D8389; }
@media (max-width: 600px) { .bw-bar { height: 26px; padding: 0 10px; gap: 5px; } .bw-bar i { width: 7px; height: 7px; } .bw-url { height: 17px; font-size: 9.5px; padding: 0 10px; } }

@property --bw-p { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.bw::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; padding: 2px;
  background: conic-gradient(from 210deg, #00A79D 0%, #2BBCB2 calc(var(--bw-p) * .35), #8DC63F calc(var(--bw-p) * .7), #00A79D var(--bw-p), transparent var(--bw-p));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; }
.bw.in::after { animation: bwDraw 1.6s cubic-bezier(.45,.05,.25,1) .25s both; }
@keyframes bwDraw { 0% { --bw-p: 0%; opacity: 1; } 100% { --bw-p: 100%; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bw::after { --bw-p: 100%; opacity: 1; } .bw.in::after { animation: none; } }
.bw-phone::after { padding: 2px; }
.bw-url b { margin-right: -6px; }
.ss.bw { position: absolute; }
/* Browser bar = the 06-Oct style (.browser-bar: pastel dots + left URL pill) on every screenshot frame */
.bw .browser-bar { padding: 10px 14px; }
.ss .browser-bar { padding: 8px 12px; }
.ss .browser-bar span:not(.url) { width: 8px; height: 8px; }
.ss .browser-bar .url { font-size: .66rem; padding: 2px 9px; }
@media (max-width: 600px) { .bw .browser-bar { padding: 7px 10px; gap: 5px; } .bw .browser-bar span:not(.url) { width: 8px; height: 8px; } .bw .browser-bar .url { font-size: .62rem; padding: 2px 8px; } }
.ss .browser-bar { text-align: left; } .ss .browser-bar .url { text-align: left; }

/* ── VIDAcare hero composition (2026-10-13): three solution windows that cycle + portal phone ── */
.hx { position: relative; aspect-ratio: 1 / .78; }
.hx-stack { position: absolute; inset: 0 12% 6% 0; }
.hx-win { position: absolute; left: 0; top: 0; width: 100%; margin: 0; border-radius: 12px; overflow: hidden; background: #fff;
  border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(13,13,13,.05), 0 24px 50px -16px rgba(13,13,13,.22);
  transform-origin: 50% 0; will-change: transform, opacity;
  transition: transform 1.1s cubic-bezier(.2,.8,.2,1), opacity .9s ease, filter .9s ease; }
.hx-win img { display: block; width: 100%; height: auto; }
.hx-win .browser-bar { padding: 8px 12px; }
.hx-win .browser-bar span:not(.url) { width: 8px; height: 8px; }
.hx-win .browser-bar .url { font-size: .66rem; padding: 2px 9px; }
/* positions: p0 = front, p1 = middle, p2 = back */
.hx-win.p2 { transform: translate3d(16%, 0, 0) scale(.84); opacity: .55; z-index: 1; filter: saturate(.8); }
.hx-win.p1 { transform: translate3d(8%, 14%, 0) scale(.92); opacity: .85; z-index: 2; }
.hx-win.p0 { transform: translate3d(0, 28%, 0) scale(1); opacity: 1; z-index: 3; }
.hx-win.out { transform: translate3d(-4%, 38%, 0) scale(1.02); opacity: 0; z-index: 4; }
.hx-win.snap { transition: none !important; }
.hx-phone { position: absolute; right: 0; bottom: 0; width: 25%; z-index: 5; background: #fff; border: 1px solid var(--line);
  border-radius: 24px; padding: 6px; box-shadow: 0 1px 2px rgba(13,13,13,.06), 0 26px 50px -14px rgba(13,13,13,.28); }
.hx-phone img { display: block; width: 100%; height: auto; border-radius: 18px; }
.hx .glass { position: absolute; z-index: 6; font-size: .8rem; padding: 8px 14px 8px 8px; gap: 10px; border-radius: 14px; }
.hx .gl-ic { width: 30px; height: 30px; border-radius: 10px; }
.hx .gl-ic svg { width: 16px; height: 16px; }
.hx .gl-k { font-size: .6rem; }
.hx-chip { left: -4%; top: 22%; }
.hx-note { right: 14%; bottom: 3%; }
.hx-labels { display: grid; }
.hx-labels > span { grid-area: 1 / 1; opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease; }
.hx-labels > span.on { opacity: 1; transform: none; }
/* entrance */
@media (prefers-reduced-motion: no-preference) {
  .hx:not(.in) .hx-win { opacity: 0; transform: translate3d(0, 40%, 0) scale(.96); }
  .hx:not(.in) .hx-phone { opacity: 0; transform: translate3d(0, 24px, 0); }
  .hx:not(.in) .glass { opacity: 0; transform: translate3d(0, 10px, 0); }
  .hx-win.p1 { transition-delay: var(--d, 0s); } .hx-win.p2 { transition-delay: var(--d, 0s); }
  .hx-phone { transition: opacity .8s ease .7s, transform 1s cubic-bezier(.2,.8,.2,1) .7s; }
  .hx .glass { transition: opacity .6s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
  .hx .hx-chip { transition-delay: 1.1s; } .hx .hx-note { transition-delay: 1.5s; }
  .hx.in .hx-note { animation: glFloat 6s ease-in-out 2.4s infinite; }
}
@media (max-width: 1100px) { .hx { max-width: 620px; margin-inline: auto; width: 100%; } .hx-chip { left: 0; } }
@media (max-width: 600px) { .hx .glass { font-size: .7rem; padding: 6px 10px 6px 6px; } .hx .gl-ic { width: 24px; height: 24px; } .hx-note { right: 6%; } }
.hero-grid:has(> .hx) { grid-template-columns: .85fr 1.15fr; gap: 56px; }
.hx-stack { inset: 0 16% 4% 0; }
.hx-win.p2 { transform: translate3d(22%, 0, 0) scale(.86); }
.hx-win.p1 { transform: translate3d(11%, 13%, 0) scale(.93); }
.hx-win.p0 { transform: translate3d(0, 26%, 0) scale(1); }
.hx-phone { width: 23%; }

/* Home: centred, larger "Solutions for each area." with a lime underline that draws in */
.sol-head { max-width: 760px; }
.sol-head h2 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); line-height: 1.08; letter-spacing: -.02em; }
.sol-head p { margin-inline: auto; max-width: 560px; }
.hl-under { background: linear-gradient(var(--spark), var(--spark)) 0 92% / 0% .14em no-repeat; padding-bottom: .04em;
  transition: background-size .9s cubic-bezier(.2,.8,.2,1) .2s; }
.hl-under.in { background-size: 100% .14em; }
@media (prefers-reduced-motion: reduce) { .hl-under { background-size: 100% .14em; transition: none; } }
.hl-in .hl-under { background-size: 100% .14em; }

/* Breathing room between the screenshot and the browser frame (Tiago, 2026-10-13) */
.shot.bw, .ss.bw, .hx-win { background: var(--bg-soft); }
.shot.bw > img, .shot.bw .wf-imgwrap, .ss.bw > img, .hx-win > img {
  width: calc(100% - 28px); margin: 14px; border-radius: 8px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(13,13,13,.07), 0 2px 8px -2px rgba(13,13,13,.08); }
.ss.bw > img, .hx-win > img { width: calc(100% - 20px); margin: 10px; border-radius: 6px; }
@media (max-width: 600px) { .shot.bw > img, .shot.bw .wf-imgwrap { width: calc(100% - 16px); margin: 8px; border-radius: 6px; } }
/* v2: half the margin, and the frame body takes the screenshot's own edge colour so the margin disappears into it */
.shot.bw, .hx-win { background: #F2F2F3; }
.ss.bw, .hx-win.hx-dark { background: #121212; }
.shot.bw .wf-imgwrap { background: #F2F2F3; }
.shot.bw > img, .shot.bw .wf-imgwrap, .ss.bw > img, .hx-win > img { width: calc(100% - 14px); margin: 7px; border-radius: 4px; box-shadow: none; }
.ss.bw > img, .hx-win > img { width: calc(100% - 10px); margin: 5px; border-radius: 3px; }
@media (max-width: 600px) { .shot.bw > img, .shot.bw .wf-imgwrap { width: calc(100% - 8px); margin: 4px; } }

/* Teleradiology: dark "Key advantages" section so the night-desk photo blends into it (2026-10-13) */
body .section.tele-dark { background: #000 !important; color: #fff; overflow: hidden; padding: 120px 0; }
.tele-dark h2 { color: #fff; }
.tele-dark .eyebrow { color: rgba(255,255,255,.62); }
.tele-dark .check-list li { color: rgba(255,255,255,.66); }
.tele-dark .check-list li strong { color: #fff; }
.tele-dark .check-list li svg { color: #2BBCB2; }
.tele-dark .split { grid-template-columns: .82fr 1.18fr; align-items: center; }
.tele-imac { display: block; padding: 0; margin: 0 -14% 0 -4%; border: 0; background: none; cursor: zoom-in; width: 118%; }
.tele-imac img { display: block; width: 100%; height: auto;
  -webkit-mask-image: radial-gradient(120% 115% at 40% 40%, #000 62%, transparent 100%);
          mask-image: radial-gradient(120% 115% at 40% 40%, #000 62%, transparent 100%); }
.tele-imac:focus-visible { outline: 2px solid #2BBCB2; outline-offset: 4px; }
@media (max-width: 1100px) { .tele-dark .split { grid-template-columns: 1fr; } .tele-imac { width: 112%; margin: 0 -6%; } body .section.tele-dark { padding: 88px 0; } }
@media (min-width: 1101px) { .tele-imac { width: 140%; margin: 0 0 0 -10%; } .tele-dark .split { gap: 24px; } }
.tele-dark .split > div:first-child { position: relative; z-index: 2; }
@media (min-width: 1101px) { .tele-imac { width: 132%; margin: 0; } .tele-dark .split { gap: 40px; } }
/* No green/lime on black (Tiago): everything white */
.tele-dark .eyebrow::before { color: #fff; }
.tele-dark .check-list li svg { color: #fff; }
.tele-imac:focus-visible { outline-color: #fff; }
/* Photo edges: the photo is already pure black on top/left/right, so no radial fade (it was dimming the lamp halo
   and drawing a visible edge). Only the cut-off desk at the bottom and the faint right edge fade into the section. */
.tele-imac img {
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%), linear-gradient(to right, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to bottom, #000 80%, transparent 100%), linear-gradient(to right, #000 93%, transparent 100%);
          mask-composite: intersect; }
/* VIDAcare gradient ring removed from every screenshot (Tiago, 2026-10-13: tiring, spoils some shots) */
.bw::after { content: none !important; display: none !important; animation: none !important; }
/* Radiology hero (2026-10-13): studio "card" instead of a cut-out. The photo's backdrop is lifted to white at the
   top so monitors and head rise out of the page, and the grey studio floor below is cropped by rounded corners —
   the desk and chair now end on a deliberate edge instead of a fade. */
.hero-cut img.hc-card { border-radius: 0 0 28px 28px; }
/* Client logos back to monochrome (Tiago, 2026-10-13) */
.logo-strip img, .logo-track img { filter: grayscale(1) contrast(1.05); opacity: .55; }
.logo-strip img:hover, .logo-track img:hover { filter: grayscale(1) contrast(1.05); opacity: .9; }
/* Nav glass (Tiago, 2026-10-13): keep it see-through when scrolled; it turns into a dark glass pill over black sections */
.site-header .nav, .site-header.scrolled .nav { background: rgba(255,255,255,.58); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); }
.site-header.nav-dark .nav, .site-header.scrolled.nav-dark .nav { background: rgba(20,20,20,.5); border-color: rgba(255,255,255,.12); }

/* ── VIDAcare overview hero: 3 candidate versions + review picker (2026-10-13) ─────────────── */
.hero-grid:has(> .hv-switch) { grid-template-columns: .85fr 1.15fr; gap: 56px; }
.hv-switch { position: relative; }
.hv-switch > .hv-var { display: none; }
.hv-switch[data-hero="puzzle"]  > [data-var="puzzle"],
.hv-switch[data-hero="photos"]  > [data-var="photos"],
.hv-switch[data-hero="windows"] > [data-var="windows"] { display: block; }
.hv-picker { position: fixed; left: 16px; bottom: 16px; z-index: 120; display: flex; align-items: center; gap: 4px; padding: 5px;
  background: rgba(13,13,13,.86); color: #fff; border-radius: 12px; font: 500 12px/1 var(--font-body); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.hv-picker span { padding: 0 8px 0 6px; opacity: .6; text-transform: uppercase; letter-spacing: .08em; font-size: 10px; }
.hv-picker button { border: 0; background: transparent; color: rgba(255,255,255,.75); padding: 7px 10px; border-radius: 8px; font: inherit; cursor: pointer; }
.hv-picker button:hover { color: #fff; background: rgba(255,255,255,.08); }
.hv-picker button[aria-pressed="true"] { background: #fff; color: #0D0D0D; }

/* 1 · puzzle */
.hz { aspect-ratio: 480 / 440; }
.hz-svg { width: 100%; height: 100%; overflow: visible; display: block; }
.hz-piece { transform-box: view-box; transform-origin: 0 0;
  transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.hz-piece { transform-box: fill-box; transform-origin: center; }
.hz-bg { fill: #fff; transition: fill-opacity .8s ease; }
.hz-frag { opacity: .14; transition: opacity .8s ease; }
.hz-edge { fill: none; stroke: #D3DDDC; stroke-width: 1.2; transition: opacity .8s ease, stroke .6s ease; filter: drop-shadow(0 4px 8px rgba(13,13,13,.08)); }
.hz-ic { color: #00A79D; transition: opacity .6s ease; }
.hz-name { font: 600 8.6px var(--font-body); fill: var(--ink-700); transition: opacity .6s ease; }
.hz-heart { opacity: 0; transition: opacity 1.1s ease; }
.hz-svg.built .hz-edge { stroke: #E6ECEB; filter: none; }
.hz-svg.done .hz-ic, .hz-svg.done .hz-name, .hz-svg.done .hz-edge { opacity: 0; }
.hz-svg.done .hz-bg { fill-opacity: 0; }
.hz-svg.done .hz-frag { opacity: 0; }
.hz-svg.done .hz-heart { opacity: 1; }

/* 2 · photos around the heart */
.hsol { position: relative; aspect-ratio: 100 / 86; }
.hp-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hp-line { stroke: #9FD9D3; stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 100; fill: none; }
.hp-dot { fill: #00A79D; opacity: 0; filter: drop-shadow(0 0 1.2px rgba(0,167,157,.9)); }
.hp-hub { position: absolute; left: 50%; top: 51.16%; width: 24%; aspect-ratio: 1; transform: translate(-50%,-50%) scale(.6); opacity: 0;
  border-radius: 50%; background: #fff; display: grid; place-items: center;
  box-shadow: 0 0 0 10px rgba(0,167,157,.06), 0 0 0 22px rgba(0,167,157,.035), 0 20px 50px -10px rgba(13,13,13,.2);
  transition: transform .9s cubic-bezier(.2,.8,.2,1), opacity .6s ease; }
.hp-hub img { width: 58%; height: auto; }
.hp-tile { --w: 31%; position: absolute; width: var(--w); aspect-ratio: 4 / 3; left: calc(var(--x) * 1%); top: calc(var(--y) / .86 * 1%);
  transform: translate(-50%,-50%) scale(.85); opacity: 0; border-radius: 16px; overflow: hidden; display: block;
  box-shadow: 0 1px 2px rgba(13,13,13,.06), 0 18px 40px -14px rgba(13,13,13,.3);
  transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .6s ease, box-shadow .4s ease; transition-delay: calc(.9s + var(--i) * .14s); }
.hp-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s ease; }
.hp-label { position: absolute; left: 8px; bottom: 8px; padding: 5px 9px; border-radius: 8px; background: rgba(255,255,255,.88);
  backdrop-filter: blur(6px); font: 600 11px/1.1 var(--font-body); color: var(--ink-900); }
.hp-t0 { --x: 19; --y: 15; } .hp-t1 { --x: 81; --y: 13; } .hp-t2 { --x: 86; --y: 58; } .hp-t3 { --x: 50; --y: 74; --w: 29%; } .hp-t4 { --x: 14; --y: 60; }
.hsol.in .hp-hub { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.hsol.in .hp-tile { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.hsol.in .hp-line { stroke-dashoffset: 0; transition: stroke-dashoffset 1s ease; }
.hsol.in .hp-line:nth-of-type(1) { transition-delay: .5s; } .hsol.in .hp-line:nth-of-type(2) { transition-delay: .62s; }
.hsol.in .hp-line:nth-of-type(3) { transition-delay: .74s; } .hsol.in .hp-line:nth-of-type(4) { transition-delay: .86s; } .hsol.in .hp-line:nth-of-type(5) { transition-delay: .98s; }
.hsol.in .hp-tile.on { transform: translate(-50%,-50%) scale(1.04); box-shadow: 0 0 0 2px #00A79D, 0 24px 50px -14px rgba(0,167,157,.45); transition-delay: 0s; }
.hp-tile.on img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .hsol .hp-hub, .hsol .hp-tile { opacity: 1; transform: translate(-50%,-50%); } .hp-line { stroke-dashoffset: 0; } }
.hz-board { fill: none; stroke: #CFE3E1; stroke-width: 1.2; stroke-dasharray: 5 6; transition: opacity .8s ease; }
.hz-svg.built .hz-board, .hz-svg.done .hz-board { opacity: 0; }

/* Diagnostics & Therapy page (2026-10-13) */
.spec-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.spec { padding: 24px 22px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.spec-ic { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--acc-50, #EDF9F8); color: var(--acc-600, #008C84); margin-bottom: 18px; }
.spec-ic svg { width: 24px; height: 24px; }
.spec h3 { font-size: 1.05rem; margin: 0 0 8px; }
.spec p { margin: 0; font-size: .9rem; color: var(--ink-500); line-height: 1.5; }
.spec-more { margin: 22px 0 0; color: var(--ink-500); font-size: .95rem; }
.spec-more a { color: var(--acc-600); font-weight: 600; }
@media (max-width: 1100px) { .spec-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .spec-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .spec-grid { grid-template-columns: 1fr; } }
button.shot-zoom { display: block; width: 100%; padding: 0; margin: 0; font: inherit; text-align: left; cursor: zoom-in; }

/* MCDTs specialties v2 (2026-10-13): bigger cards, icons draw in, each icon has its own motion on hover */
.spec-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
.spec { position: relative; padding: 30px 28px 28px; border-radius: 22px; background: #fff; border: 1px solid var(--line);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .3s ease; }
.spec:hover { transform: translateY(-4px); border-color: rgba(0,167,157,.35); box-shadow: 0 22px 44px -22px rgba(0,140,132,.35); }
.spec-ic { width: 72px; height: 72px; border-radius: 20px; margin-bottom: 24px;
  background: radial-gradient(120% 120% at 20% 10%, #fff 0%, #E3F5F3 55%, #CDEDEA 100%); color: #00877F;
  box-shadow: inset 0 0 0 1px rgba(0,167,157,.14); }
.spec-ic svg { width: 38px; height: 38px; overflow: visible; }
.spec h3 { font-size: 1.2rem; margin: 0 0 10px; }
.spec p { font-size: .95rem; }
.spec-other { grid-column: span 2; border-style: dashed; border-color: #BFDCD9; background: linear-gradient(135deg, #fff, #F4FBFA); }
.spec-other .spec-ic { background: #fff; }
.spec-other p a { color: var(--acc-600); font-weight: 600; }
@media (max-width: 1100px) { .spec-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .spec-grid { grid-template-columns: 1fr; } .spec-other { grid-column: auto; } }
/* draw-in */
@media (prefers-reduced-motion: no-preference) {
  .spec-ic svg > * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s cubic-bezier(.45,.05,.25,1) var(--d, 0s); }
  .spec.drawn .spec-ic svg > * { stroke-dashoffset: 0; }
  .spec-ic svg, .spec-ic svg > * { transform-box: fill-box; transform-origin: center; }
  .spec:hover[data-anim="cardio"] .a-heart { animation: specBeat 1s ease-in-out infinite; }
  .spec:hover[data-anim="cardio"] .a-pulse { stroke-dasharray: .35 .65; animation: specFlow 1s linear infinite; }
  .spec:hover[data-anim="pneumo"] .a-lung { animation: specBreath 2.4s ease-in-out infinite; }
  .spec:hover[data-anim="oftal"] svg { animation: specBlink 2.2s ease-in-out infinite; }
  .spec:hover[data-anim="oftal"] .a-pupil { animation: specLook 2.2s ease-in-out infinite; }
  .spec:hover[data-anim="neuro"] .a-wave { stroke-dasharray: .5 .1; animation: specFlow 1.4s linear infinite; }
  .spec:hover[data-anim="gastro"] svg { animation: specWobble 1.6s ease-in-out infinite; }
  .spec:hover[data-anim="gyn"] svg { animation: specBob 1.8s ease-in-out infinite; }
  .spec:hover[data-anim="more"] svg { animation: specSpin 1.2s cubic-bezier(.6,0,.3,1) 1; }
}
@keyframes specBeat { 0%,100% { transform: scale(1); } 15% { transform: scale(1.1); } 30% { transform: scale(.97); } 45% { transform: scale(1.06); } }
@keyframes specFlow { to { stroke-dashoffset: -1; } }
@keyframes specBreath { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes specBlink { 0%,42%,52%,100% { transform: scaleY(1); } 47% { transform: scaleY(.12); } }
@keyframes specLook { 0%,20% { transform: translateX(0); } 30%,40% { transform: translateX(-2px); } 60%,70% { transform: translateX(2px); } 85%,100% { transform: translateX(0); } }
@keyframes specWobble { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-6deg); } 65% { transform: rotate(5deg); } }
@keyframes specBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes specSpin { from { transform: rotate(0); } to { transform: rotate(180deg); } }
.feat-note { margin: 56px auto 0; max-width: 760px; text-align: center; color: var(--ink-500); font-size: .98rem; padding: 18px 24px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }

/* 4 · Cards — VIDAcare heart + mini product cards (Coverflex-like) — 2026-10-13 */
.hc4 { position: relative; aspect-ratio: 1 / .86; font-family: var(--font-body); }
.hc4-arc { position: absolute; border-radius: 50%; pointer-events: none; }
.hc4-arc1 { left: 24%; top: 12%; width: 44%; aspect-ratio: 1; background: radial-gradient(circle at 30% 30%, #DDF3F0, #BDE5E0 70%); border-radius: 50% 50% 50% 8%; opacity: .9; }
.hc4-arc2 { left: 46%; top: 36%; width: 30%; aspect-ratio: 1; background: radial-gradient(circle at 70% 70%, #E4F3CF, #CFE9AE 75%); border-radius: 8% 50% 50% 50%; opacity: .75; }
.hc4-heart { position: absolute; left: 50%; top: 48%; width: 27%; aspect-ratio: 1; transform: translate(-50%,-50%); border-radius: 50%; background: #fff; display: grid; place-items: center;
  box-shadow: 0 24px 50px -18px rgba(0,120,112,.35), 0 0 0 10px rgba(255,255,255,.5); z-index: 2; }
.hc4-heart img { width: 60%; height: auto; }
.hc4-card { position: absolute; z-index: 3; padding: 14px 15px; border-radius: 18px; background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 2px 3px 18px rgba(13,13,13,.14); color: var(--ink-900); font-size: 11px; line-height: 1.25;
  transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .55s ease, box-shadow .5s ease; }
.hc4-wl { left: 0; top: 5%; width: 46%; }
.hc4-dict { right: 0; top: 0; width: 46%; }
.hc4-sr { right: 1%; bottom: 7%; width: 46%; }
.hc4-ag { left: 3%; bottom: 0; width: 41%; }
.hc4-chip { position: absolute; left: 50%; bottom: -3%; transform: translateX(-50%); z-index: 4; white-space: nowrap; transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.hc4-h { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 12px; margin-bottom: 10px; }
.hc4-count { font-size: 10px; font-weight: 700; color: #00877F; background: #E3F5F3; border-radius: 999px; padding: 2px 8px; }
.hc4-sub { font-size: 10px; font-weight: 500; color: var(--ink-500); }
.hc4-k { display: block; font-size: 10px; color: var(--ink-500); }
.hc4-v { display: block; font-weight: 600; font-size: 11.5px; }
/* worklist */
.wl-row { display: grid; grid-template-columns: 8px 1fr auto auto; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid rgba(13,13,13,.06); transition: opacity .4s ease, transform .4s ease; }
.wl-dot { width: 7px; height: 7px; border-radius: 50%; }
.wl-name b { display: block; height: 5px; border-radius: 3px; background: #D9DEE0; }
.wl-name b + b { margin-top: 4px; height: 4px; background: #ECEFF0; }
.wl-tag { font-size: 9px; font-weight: 700; color: var(--ink-500); background: #F1F3F4; border-radius: 5px; padding: 2px 5px; }
.wl-sla { font-size: 9.5px; font-weight: 700; border-radius: 6px; padding: 2px 6px; font-variant-numeric: tabular-nums; min-width: 44px; text-align: center; }
.sla-r { color: #C8343A; background: #FDE8E8; } .sla-a { color: #A86A00; background: #FFF2D9; } .sla-g { color: #00776F; background: #E3F5F3; }
/* dictation + AI */
.dc-row { display: flex; align-items: center; gap: 10px; }
.dc-mic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: #E5484D; background: #fff; box-shadow: 1px 2px 9px -3px rgba(229,72,77,.7); flex: none; }
.dc-mic svg { width: 15px; height: 15px; }
.dc-txt { flex: 1; min-width: 0; }
.dc-wave { display: flex; align-items: center; gap: 2px; height: 14px; margin-top: 3px; }
.dc-wave i { width: 2px; height: 30%; border-radius: 1px; background: var(--ink-700); animation: dcWave 1s ease-in-out infinite; }
.dc-wave i:nth-child(3n) { animation-delay: -.3s; } .dc-wave i:nth-child(3n+1) { animation-delay: -.6s; } .dc-wave i:nth-child(4n) { animation-duration: .8s; }
@keyframes dcWave { 0%,100% { height: 25%; } 50% { height: 100%; } }
.dc-time { font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: 7px; background: #F1F3F4; font-variant-numeric: tabular-nums; }
.dc-ai { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(13,13,13,.07); }
.dc-spark { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: #00A79D; background: #fff; box-shadow: 1px 2px 9px -3px rgba(0,167,157,.7); flex: none; }
.dc-spark svg { width: 15px; height: 15px; }
.dc-lines { margin-top: 10px; display: grid; gap: 5px; }
.dc-lines b { display: block; height: 5px; border-radius: 3px; background: linear-gradient(90deg, #E2E6E8 0%, #E2E6E8 40%, #9FD9D3 50%, #E2E6E8 60%, #E2E6E8 100%); background-size: 250% 100%; animation: dcShine 2.6s linear infinite; }
.dc-lines b:nth-child(2) { animation-delay: .25s; } .dc-lines b:nth-child(3) { animation-delay: .5s; }
@keyframes dcShine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
/* structured report */
.sr-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.sr-tabs span { font-size: 9.5px; padding: 4px 8px; border-radius: 999px; color: var(--ink-500); white-space: nowrap; }
.sr-tabs .on { background: #00A79D; color: #fff; font-weight: 600; }
.sr-l { font-size: 8.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); margin: 8px 0 5px; }
.sr-seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(13,13,13,.1); border-radius: 8px; overflow: hidden; }
.sr-seg span { font-size: 9.5px; text-align: center; padding: 5px 2px; border-left: 1px solid rgba(13,13,13,.08); transition: background .35s ease, color .35s ease; white-space: nowrap; }
.sr-seg span:first-child { border-left: 0; }
.sr-seg .on { background: #E3F5F3; color: #00776F; font-weight: 700; }
/* agenda */
.ag-grid { display: grid; grid-template-columns: 18px repeat(4, 1fr); grid-template-rows: 14px repeat(5, 15px); gap: 3px 4px; }
.ag-d { grid-row: 1; font-size: 8.5px; font-weight: 700; color: var(--ink-500); text-align: center; }
.ag-h { grid-column: 1; font-size: 8px; color: var(--ink-500); align-self: start; }
.ag-pill { display: block; border-radius: 5px; opacity: .95; }
.ag-new { grid-column: 4 !important; transform: scale(.4); opacity: 0; transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .4s ease; }
.hc4.ag-on .ag-new { transform: none; opacity: 1; }
/* cycle states */
.hc4-card.out { opacity: 0; transform: scale(.84); }
.hc4-card.focus { transform: scale(1.045); box-shadow: 4px 8px 30px rgba(13,13,13,.18); z-index: 5; }
.hc4-chip.out { opacity: 0; transform: translate(-50%, 10px); }
@media (prefers-reduced-motion: no-preference) {
  .hc4:not(.in) .hc4-card { opacity: 0; transform: translateY(16px) scale(.94); }
  .hc4:not(.in) .hc4-chip { opacity: 0; }
  .hc4:not(.in) .hc4-heart { opacity: 0; transform: translate(-50%,-50%) scale(.7); }
  .hc4 .hc4-heart { transition: opacity .7s ease, transform 1s cubic-bezier(.2,.8,.2,1); }
  .hc4.in .hc4-card { transition-delay: calc(.35s + var(--i) * .15s); }
  .hc4.in.cycling .hc4-card { transition-delay: 0s; }
  .hc4.in .hc4-heart { animation: hcBeat 3.2s ease-in-out 1.6s infinite; }
}
@keyframes hcBeat { 0%,100% { transform: translate(-50%,-50%) scale(1); } 8% { transform: translate(-50%,-50%) scale(1.05); } 16% { transform: translate(-50%,-50%) scale(1); } 24% { transform: translate(-50%,-50%) scale(1.03); } 34% { transform: translate(-50%,-50%) scale(1); } }
@media (max-width: 600px) { .hc4-card { font-size: 9.5px; padding: 10px 11px; border-radius: 14px; } .hc4-chip { display: none; } }
.hv-switch[data-hero="cards"] > [data-var="cards"] { display: block; }
/* cleaner Coverflex-like shapes: a teal half-disc and a lime quarter-disc behind the heart */
.hc4-arc1 { left: 32%; top: 10%; width: 22%; height: auto; aspect-ratio: 1 / 2; border-radius: 999px 0 0 999px; background: linear-gradient(180deg, #CDEDEA, #A9DDD7); opacity: .85; }
.hc4-arc2 { left: 50%; top: 31%; width: 26%; aspect-ratio: 1; border-radius: 0 100% 0 0; background: linear-gradient(200deg, #E3F2CC, #C5E59E); opacity: .8; }

/* MCDTs features (v3): one block — clickable feature list + a deck of the three screenshots */
.fx { display: grid; grid-template-columns: .9fr 1.25fr; gap: 56px; align-items: center; }
.fx-list { display: grid; gap: 10px; }
.fx-item { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 14px; text-align: left; padding: 20px 22px; border-radius: 18px; border: 1px solid transparent;
  background: transparent; font: inherit; color: inherit; cursor: pointer; overflow: hidden; transition: background .35s ease, border-color .35s ease, box-shadow .35s ease; }
.fx-item:hover { background: rgba(255,255,255,.6); }
.fx-item.on { background: #fff; border-color: var(--line); box-shadow: 0 16px 34px -22px rgba(13,13,13,.25); }
.fx-n { font: 700 .82rem/1.6 var(--font-body); color: var(--ink-400, #9AA0A6); font-variant-numeric: tabular-nums; }
.fx-item.on .fx-n { color: #00A79D; }
.fx-t { display: block; font-family: var(--font-head); font-weight: 600; font-size: 1.12rem; color: var(--ink-900); }
.fx-d { display: grid; grid-template-rows: 0fr; opacity: 0; color: var(--ink-500); font-size: .95rem; line-height: 1.55; transition: grid-template-rows .45s ease, opacity .4s ease, margin .45s ease; }
.fx-d { overflow: hidden; }
.fx-item.on .fx-d { grid-template-rows: 1fr; opacity: 1; margin-top: 8px; }
.fx-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .45s ease, opacity .4s ease, margin .45s ease; }
.fx-item.on .fx-tags { max-height: 80px; opacity: 1; margin-top: 12px; }
.fx-tags span { font-size: .78rem; font-weight: 600; color: #00776F; background: #E3F5F3; border-radius: 999px; padding: 4px 10px; }
.fx-bar { position: absolute; left: 22px; right: 22px; bottom: 0; height: 2px; background: transparent; }
.fx-bar i { display: block; height: 100%; width: 0; background: #00A79D; border-radius: 2px; }
.fx-item.on.run .fx-bar i { width: 100%; transition: width var(--dur, 6s) linear; }
.fx-deck { position: relative; aspect-ratio: 1706 / 920; }
.fx-shot { position: absolute; left: 0; top: 0; width: 88%; transform-origin: 100% 0;
  transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .6s ease, filter .6s ease, box-shadow .6s ease; }
.fx-shot.p0 { transform: translate(0, 12%) scale(1); z-index: 3; opacity: 1; }
.fx-shot.p1 { transform: translate(8%, 5%) scale(.93); z-index: 2; opacity: .75; filter: saturate(.7); }
.fx-shot.p2 { transform: translate(14%, -1%) scale(.86); z-index: 1; opacity: .5; filter: saturate(.5); }
.fx-shot:not(.p0) { cursor: pointer; }
@media (max-width: 980px) { .fx { grid-template-columns: 1fr; gap: 28px; } .fx-deck { order: -1; } }
.fx-d { display: block; max-height: 0; transition: max-height .45s ease, opacity .4s ease, margin .45s ease; }
.fx-item.on .fx-d { max-height: 140px; }
.fx-deck { aspect-ratio: 1706 / 1010; }
.fx-shot { width: 86%; }
.fx-shot.p1 { transform: translate(7%, 5%) scale(.94); }
.fx-shot.p2 { transform: translate(13%, -1%) scale(.88); }
.fx-shot.p0 { transform: translate(0, 13%) scale(1); }
/* Specialty icons v3 (Tiago: no gradient) — plain line icon inside a hairline circle; the circle fills teal on hover */
.spec-ic { width: 64px; height: 64px; border-radius: 50%; background: none; box-shadow: none; border: 1px solid #CFE3E1; color: #00877F;
  transition: background .35s ease, color .35s ease, border-color .35s ease; }
.spec-ic svg { width: 32px; height: 32px; }
.spec:hover .spec-ic { background: #00A79D; border-color: #00A79D; color: #fff; }
.spec-other .spec-ic { background: none; border-style: dashed; }
.spec-other:hover .spec-ic { background: #00A79D; border-style: solid; }
.spec-other { background: #fff; }

/* 4 · Cards v2 (2026-10-13): no Coverflex shapes, smaller, real glass, 8 cards in 4 slots that swap */
.hc4 { max-width: 540px; margin-inline: auto; aspect-ratio: 1 / .9; }
.hc4-arc, .hc4-chip { display: none !important; }
.hc4-heart { width: 34%; background: none; box-shadow: none; border-radius: 0; }
.hc4-heart img { width: 100%; filter: drop-shadow(0 18px 30px rgba(0,120,112,.18)); }
.hc4-card { background: rgba(255,255,255,.52); -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.8); box-shadow: 0 12px 32px -12px rgba(13,13,13,.22), inset 0 1px 0 rgba(255,255,255,.9);
  opacity: 0; transform: scale(.86); pointer-events: none; }
.hc4-card[data-on] { opacity: 1; transform: none; }
.hc4-card.focus { transform: scale(1.04); }
.hc4-card[data-slot="tl"] { left: 0; top: 3%; right: auto; bottom: auto; width: 50%; }
.hc4-card[data-slot="tr"] { right: 0; top: 0; left: auto; bottom: auto; width: 47%; }
.hc4-card[data-slot="bl"] { left: 1%; bottom: 1%; top: auto; right: auto; width: 45%; }
.hc4-card[data-slot="br"] { right: 0; bottom: 5%; top: auto; left: auto; width: 48%; }
@media (prefers-reduced-motion: no-preference) {
  .hc4:not(.in) .hc4-card[data-on] { opacity: 0; transform: translateY(14px) scale(.94); }
}
/* slot map */
.sm-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; }
.sm-grid i { display: block; aspect-ratio: 1.4; border-radius: 3px; }
.sm-leg { display: flex; gap: 10px; margin-top: 8px; font-size: 9px; color: var(--ink-500); }
.sm-leg i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
/* konsent */
.kon-ok { font-size: 10px; font-weight: 700; color: #177A5B; background: #DDF3E8; border-radius: 999px; padding: 2px 8px; opacity: 0; transition: opacity .4s ease 1.6s; }
.hc4-kon[data-on] .kon-ok { opacity: 1; }
.kon-doc { display: grid; gap: 5px; margin-bottom: 8px; }
.kon-doc b { display: block; height: 5px; border-radius: 3px; background: #DCE1E3; }
.kon-sign { position: relative; padding-top: 2px; }
.kon-sign svg { display: block; width: 62%; height: 30px; fill: none; stroke: #1F3A5F; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kon-sign path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.hc4-kon[data-on] .kon-sign path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s ease .35s; }
.kon-line { display: block; height: 1px; background: rgba(13,13,13,.25); margin: 2px 0 4px; width: 70%; }
/* dashboards */
.kpi-row { display: flex; gap: 22px; margin-bottom: 10px; }
.kpi-n { display: block; font: 700 18px/1.1 var(--font-head); color: var(--ink-900); }
.kpi-bars { display: flex; align-items: flex-end; gap: 5px; height: 46px; }
.kpi-bars i { flex: 1; height: var(--h); border-radius: 4px 4px 2px 2px; background: #179890; opacity: .85; transform-origin: bottom; }
.kpi-bars i:nth-child(odd) { background: #97CEB5; }
.hc4-kpi[data-on] .kpi-bars i { animation: kpiGrow .9s cubic-bezier(.2,.8,.2,1) both; }
.hc4-kpi[data-on] .kpi-bars i:nth-child(2) { animation-delay: .06s; } .hc4-kpi[data-on] .kpi-bars i:nth-child(3) { animation-delay: .12s; }
.hc4-kpi[data-on] .kpi-bars i:nth-child(4) { animation-delay: .18s; } .hc4-kpi[data-on] .kpi-bars i:nth-child(5) { animation-delay: .24s; }
.hc4-kpi[data-on] .kpi-bars i:nth-child(6) { animation-delay: .3s; } .hc4-kpi[data-on] .kpi-bars i:nth-child(7) { animation-delay: .36s; } .hc4-kpi[data-on] .kpi-bars i:nth-child(8) { animation-delay: .42s; }
@keyframes kpiGrow { from { transform: scaleY(.1); } to { transform: none; } }
/* teleradiology (dark, like the real screens) */
.hc4-tele { background: rgba(18,18,18,.82); border-color: rgba(255,255,255,.12); color: #E9ECEC; box-shadow: 0 16px 36px -14px rgba(0,0,0,.45); }
.hc4-tele .hc4-h { color: #fff; }
.tele-live { font-size: 9.5px; font-weight: 600; color: #7FD3CC; display: inline-flex; align-items: center; gap: 5px; }
.tele-live i { width: 6px; height: 6px; border-radius: 50%; background: #4AA39D; animation: telePulse 1.4s ease-in-out infinite; }
@keyframes telePulse { 50% { box-shadow: 0 0 0 4px rgba(74,163,157,.25); } }
.tele-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid rgba(255,255,255,.08); }
.tele-c { font-size: 10.5px; color: #D7DADD; }
.tele-to { font-size: 10px; color: #9AA3A8; }
.hc4-tele .wl-tag { background: rgba(255,255,255,.08); color: #C9CED1; }
.hc4-tele .sla-r { background: rgba(229,72,77,.18); color: #FF8A8E; } .hc4-tele .sla-a { background: rgba(245,165,36,.18); color: #F7C068; } .hc4-tele .sla-g { background: rgba(74,163,157,.2); color: #7FD3CC; }

/* Home hero type-on (2026-10-13) */
.hero-title.typing .tc { visibility: hidden; }
.hero-title.typing .tc.on { visibility: visible; }
.hero-title .tc.cur { position: relative; }
.hero-title .tc.cur::after { content: ""; position: absolute; right: -.08em; top: .14em; bottom: .06em; width: .07em; border-radius: 2px;
  background: var(--spark); animation: tcBlink 1s steps(1) infinite; }
.hero-title.typed .tc.cur::after { animation: none; opacity: 0; transition: opacity .6s ease; }
@keyframes tcBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* 4 · Cards v3 (2026-10-13): smaller overall, varied card sizes/positions, light teleradiology, portal card */
.hc4 { max-width: 470px; aspect-ratio: 1 / .96; }
.hc4-heart { width: 30%; left: 50%; top: 47%; }
.hc4-card { font-size: 10px; padding: 11px 12px; border-radius: 15px; }
.hc4-h { font-size: 11px; margin-bottom: 7px; }
.hc4-card[data-slot="tl"] { left: 0; top: 0; width: 52%; right: auto; bottom: auto; }
.hc4-card[data-slot="tr"] { right: 0; top: 9%; width: 40%; left: auto; bottom: auto; }
.hc4-card[data-slot="mr"] { right: -3%; top: 47%; width: 30%; left: auto; bottom: auto; }
.hc4-card[data-slot="bl"] { left: 6%; bottom: 0; width: 36%; top: auto; right: auto; }
.hc4-card[data-slot="br"] { right: 6%; bottom: 3%; width: 44%; top: auto; left: auto; }
.hc4-card[data-slot="bl"] { z-index: 4; }
.wl-row { padding: 5px 0; gap: 6px; }
.dc-mic, .dc-spark { width: 26px; height: 26px; border-radius: 9px; }
.dc-mic svg, .dc-spark svg { width: 13px; height: 13px; }
.dc-ai { margin-top: 9px; padding-top: 8px; }
.ag-grid { grid-template-rows: 12px repeat(5, 11px); gap: 3px 3px; }
.kpi-n { font-size: 16px; }
.kpi-bars { height: 36px; }
/* teleradiology: light like the rest */
.hc4-tele { background: rgba(255,255,255,.52); border-color: rgba(255,255,255,.8); color: var(--ink-900); box-shadow: 0 12px 32px -12px rgba(13,13,13,.22), inset 0 1px 0 rgba(255,255,255,.9); }
.hc4-tele .hc4-h { color: var(--ink-900); }
.tele-live { color: #00877F; }
.tele-live i { background: #00A79D; }
.tele-row { border-top-color: rgba(13,13,13,.06); padding: 5px 0; gap: 6px; }
.tele-c { color: var(--ink-700); }
.tele-to { color: var(--ink-500); }
.hc4-tele .wl-tag { background: #F1F3F4; color: var(--ink-500); }
.hc4-tele .sla-r { color: #C8343A; background: #FDE8E8; } .hc4-tele .sla-a { color: #A86A00; background: #FFF2D9; } .hc4-tele .sla-g { color: #00776F; background: #E3F5F3; }
/* patient portal (small) */
.pt-note { display: flex; align-items: center; gap: 8px; }
.pt-bell { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: #fff; color: #00A79D; box-shadow: 1px 2px 9px -3px rgba(0,167,157,.7); flex: none; }
.pt-bell svg { width: 12px; height: 12px; }
.pt-note .hc4-v { font-size: 10.5px; }
.pt-btn { display: block; margin-top: 9px; text-align: center; font-size: 10px; font-weight: 700; color: #fff; background: #8DC63F; border-radius: 8px; padding: 5px 0; }
.hc4-portal[data-on] .pt-bell { animation: ptRing 1.2s ease .5s 2; }
@keyframes ptRing { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(4deg); } }
/* konsent in the small slot */
.hc4-kon .kon-sign svg { width: 90%; height: 24px; }
.hc4-kon .kon-line { width: 90%; }
.hc4-card[data-slot="tr"] { top: 7%; width: 45%; }
.hc4-card[data-slot="mr"] { top: 39%; right: -2%; width: 29%; }
.hc4-card[data-slot="bl"] { left: 0; bottom: 9%; width: 35%; }
.hc4-card[data-slot="br"] { right: 9%; bottom: 0; width: 46%; }

/* 4 · Cards v4 (2026-10-13): not only squares — capsule (teleradiology), phone (portal), round gauge (dashboards),
   tilted photos (images in the report), paper sheet (Konsent) */
/* capsule */
.hc4-card.hc4-pillshape[data-slot] { width: 58%; top: 2%; border-radius: 999px; padding: 9px 16px 9px 10px; display: flex; align-items: center; gap: 0; }
.tr-sites { display: grid; gap: 4px; flex: none; }
.tr-site { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #179890; box-shadow: 1px 2px 8px -3px rgba(0,120,112,.6); }
.tr-site svg { width: 12px; height: 12px; }
.tr-links { width: 54px; height: 80px; flex: none; margin: 0 4px; overflow: visible; }
.tr-links path { fill: none; stroke: #9FD9D3; stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-dasharray: 3 4; animation: trFlow 1.2s linear infinite; }
@keyframes trFlow { to { stroke-dashoffset: -14; } }
.tr-rad { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tr-av { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; background: #179890; box-shadow: 0 0 0 4px rgba(23,152,144,.15); }
.tr-av svg { width: 17px; height: 17px; }
.tr-txt .hc4-v { font-size: 11px; }
/* phone */
.hc4-card.hc4-phone[data-slot] { width: 25%; right: 1%; top: 30%; padding: 18px 9px 12px; border-radius: 24px; background: #fff; border: 1px solid rgba(13,13,13,.1);
  box-shadow: 0 18px 40px -16px rgba(13,13,13,.35), inset 0 0 0 4px #F4F6F6; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ph-notch { position: absolute; left: 50%; top: 7px; width: 30%; height: 5px; border-radius: 4px; background: #E3E7E8; transform: translateX(-50%); }
.ph-bar { display: flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 700; color: #179890; margin-bottom: 8px; }
.ph-bar img { width: 14px; height: auto; }
.hc4-phone .pt-note { gap: 6px; padding: 7px; border-radius: 10px; background: #F4F8F8; }
.hc4-phone .pt-note .hc4-v { font-size: 9.5px; }
.hc4-phone .pt-bell { width: 20px; height: 20px; border-radius: 7px; }
.ph-lines { display: grid; gap: 4px; margin: 9px 2px 0; }
.ph-lines b { height: 4px; border-radius: 3px; background: #E5E9EA; } .ph-lines b + b { width: 70%; }
/* round gauge */
.hc4-card.hc4-round[data-slot] { width: 29%; right: 3%; top: 4%; aspect-ratio: 1; border-radius: 50%; padding: 0; display: grid; place-items: center; }
.kd { position: absolute; inset: 9%; width: 82%; height: 82%; transform: rotate(-90deg); }
.kd circle { fill: none; stroke-width: 9; }
.kd-bg { stroke: rgba(13,13,13,.07); }
.kd-v { stroke: #179890; stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray 1.4s cubic-bezier(.2,.8,.2,1) .25s; }
.hc4-round[data-on] .kd-v { stroke-dasharray: 97 100; }
.kd-c { position: relative; text-align: center; }
.kd-c .kpi-n { font-size: 19px; }
/* tilted photos */
.hc4-card.hc4-imgs[data-slot] { width: 44%; right: 7%; bottom: 0; aspect-ratio: 1.35; padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.im-ph { position: absolute; margin: 0; width: 56%; aspect-ratio: 1; padding: 5px; background: #fff; border-radius: 12px; box-shadow: 0 14px 30px -12px rgba(13,13,13,.35); }
.im-ph img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.im-a { left: 2%; top: 6%; transform: rotate(-7deg); }
.im-b { right: 2%; top: 0; transform: rotate(5deg); }
.im-mark { position: absolute; inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); fill: none; stroke: #8DC63F; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.im-mark * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.hc4-imgs[data-on] .im-mark * { stroke-dashoffset: 0; transition: stroke-dashoffset .9s ease .5s; }
.im-chip { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); white-space: nowrap; font-size: 10px; padding: 6px 11px; border-radius: 999px;
  background: rgba(255,255,255,.7); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.85); box-shadow: 0 10px 24px -10px rgba(13,13,13,.3); }
.im-chip b { color: #179890; }
/* paper sheet */
.hc4-card.hc4-paper[data-slot] { width: 30%; right: 0; top: 34%; border-radius: 4px; background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid rgba(13,13,13,.08);
  box-shadow: 0 16px 34px -14px rgba(13,13,13,.3); clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
.hc4-paper::after { content: ""; position: absolute; right: 0; top: 0; width: 16px; height: 16px; background: linear-gradient(225deg, transparent 50%, #E6EAEB 50%); }
.hc4-card.hc4-paper[data-on] { transform: rotate(3deg); }
.hc4-paper .hc4-h { padding-right: 10px; }
.hc4-card.hc4-phone[data-slot] { top: 41%; }
.hc4-card.hc4-phone[data-slot] { width: 28%; } .hc4-phone .pt-note .hc4-k { display: none; }

/* 4 · Cards v5 (2026-10-13): calmer — 3 cards on screen at a time (3 slots × 3 cards), smaller, more glass */
.hc4 { max-width: 420px; aspect-ratio: 1 / .92; }
.hc4-heart { width: 34%; left: 52%; top: 46%; }
.hc4-card { background: rgba(255,255,255,.34); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8);
  border: 1px solid rgba(255,255,255,.9); box-shadow: 0 14px 34px -16px rgba(13,13,13,.25), inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.25); }
.hc4-card[data-slot="a"] { left: 0; top: 4%; width: 54%; right: auto; bottom: auto; }
.hc4-card[data-slot="b"] { right: 0; top: 26%; width: 46%; left: auto; bottom: auto; }
.hc4-card[data-slot="c"] { left: 10%; bottom: 0; width: 46%; top: auto; right: auto; }
.hc4-card.hc4-phone[data-slot] { width: 30%; right: 4%; top: 22%; }
.hc4-card.hc4-paper[data-slot] { width: 38%; left: 14%; right: auto; top: auto; bottom: 2%; }
.hc4-tele { background: rgba(255,255,255,.34); }
.hc4-card, .hc4-tele { background: rgba(255,255,255,.48); }
.hc4-heart { top: 50%; width: 32%; }
.hc4-card[data-slot="a"] { width: 50%; top: 0; }
.hc4-card[data-slot="b"] { top: 24%; width: 44%; }
.hc4-card[data-slot="c"] { left: 6%; width: 44%; }
/* bigger heart; Konsent back to its first (glass card) version */
.hc4-heart { width: 44%; top: 50%; left: 52%; }
.hc4-kon .kon-sign svg { width: 62%; height: 30px; }
.hc4-kon .kon-line { width: 70%; }

/* 4 · Cards v6: cards sit around the heart (less overlap), soft glow behind so the glass reads, cleaner structured report */
.hc4 { overflow: visible; }
.hc4::before { content: ""; position: absolute; left: 8%; top: 6%; width: 84%; height: 88%; z-index: 0; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side at 40% 40%, rgba(141,198,63,.28), transparent 70%), radial-gradient(closest-side at 62% 62%, rgba(0,167,157,.24), transparent 72%);
  filter: blur(18px); }
.hc4-heart { width: 40%; left: 50%; top: 50%; z-index: 1; }
.hc4-card { background: linear-gradient(140deg, rgba(255,255,255,.72), rgba(255,255,255,.38)); }
.hc4-card[data-slot="a"] { left: -10%; top: 0; width: 46%; }
.hc4-card[data-slot="b"] { right: -14%; top: 30%; width: 42%; }
.hc4-card[data-slot="c"] { left: -4%; bottom: -2%; width: 42%; }
.hc4-card.hc4-phone[data-slot] { right: -8%; top: 24%; width: 28%; }
.hc4-sr .sr-seg span { font-size: 9px; }

/* Home VIDAcare section (2026-10-13): text + cards composition, sober counters below */
.vc-split { align-items: center; }
.vc-visual { position: relative; }
.vc-visual .hc4 { max-width: 400px; }
.vc-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); margin-top: 72px; border-top: 1px solid var(--line); }
.vc-stat { padding: 28px 24px 0 0; }
.vc-stat + .vc-stat { padding-left: 24px; border-left: 1px solid var(--line); }
.vc-stat .num { font: 600 clamp(2rem, 3.4vw, 2.8rem)/1 var(--font-head); color: var(--ink-900); letter-spacing: -.02em; }
.vc-stat .label { margin-top: 10px; font-size: .92rem; color: var(--ink-500); max-width: 200px; }
@media (max-width: 860px) { .vc-stats { grid-template-columns: 1fr 1fr; } .vc-stat:nth-child(3) { border-left: 0; padding-left: 0; } .vc-stat { padding-bottom: 20px; } }
/* stats blocks now have 4 numbers */
.stats:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px) { .stats:has(> :nth-child(4)) { grid-template-columns: 1fr 1fr; } }
/* phone: proper portrait proportions */
.hc4-card.hc4-phone[data-slot] { width: 25%; aspect-ratio: 9 / 17; display: flex; flex-direction: column; padding: 20px 9px 12px; }
.hc4-phone .pt-btn { margin-top: auto; }
.hc4-phone .ph-lines { margin-bottom: 10px; }
.hc4-phone .ph-lines b + b + b { width: 50%; }
/* Kresk logos (2026-10-13): the black logo's built-in padding was removed (tight viewBox) → bigger in the nav;
   width:auto so the footer logo isn't letterboxed inside its 120px width attribute (it sat a few px to the right) */
.nav-logo img { height: 26px; width: auto; }
.site-footer .f-logo img { width: auto; height: 26px; display: block; }
.hc4-card.hc4-tele[data-slot] { width: 56%; }
.hc4-tele .tele-c { white-space: nowrap; }
.hc4-phone .ph-bar span { white-space: nowrap; font-size: 8.5px; }
/* phone: just the notification — bell + dummy text (Tiago: too many elements for the space) */
.hc4-card.hc4-phone[data-slot] { justify-content: center; align-items: center; padding: 22px 12px 16px; gap: 14px; }
.ph-bell { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: #fff; color: #00A79D; box-shadow: 1px 3px 14px -4px rgba(0,167,157,.7); }
.ph-bell svg { width: 22px; height: 22px; }
.hc4-phone[data-on] .ph-bell { animation: ptRing 1.2s ease .5s 2; }
.hc4-phone .ph-lines { width: 100%; margin: 0; justify-items: center; gap: 6px; }
.hc4-phone .ph-lines b { width: 80%; height: 5px; }
.hc4-phone .ph-lines b + b { width: 62%; }
.hc4-phone .ph-lines b + b + b { width: 44%; }
/* Dropdown flicker fix (2026-10-13): an invisible bridge covers the 8px gap between the menu item and the box,
   and closing waits a moment, so crossing the gap no longer drops :hover */
.dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
li.has-dropdown .dropdown { transition: opacity .14s var(--ease) .12s, transform .14s var(--ease) .12s, visibility 0s linear .26s; }
li.has-dropdown:hover .dropdown, li.has-dropdown:focus-within .dropdown { transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s; }
/* 404 */
.nf-hero { min-height: 70vh; display: flex; align-items: center; }
.nf-code { display: block; font: 700 clamp(4rem, 12vw, 8rem)/1 var(--font-head); color: var(--spark); letter-spacing: -.04em; margin-bottom: 12px; }
.nf-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; margin-top: 28px; }

/* Privacy policy page + footer link + form note (2026-10-13) */
.pv { max-width: 780px; }
.pv-sec { padding: 34px 0; border-top: 1px solid var(--line); }
.pv-sec:first-child { border-top: 0; padding-top: 8px; }
.pv-sec h2 { font-size: 1.4rem; display: flex; align-items: baseline; gap: 14px; margin: 0 0 14px; }
.pv-n { font: 700 .82rem/1 var(--font-body); color: var(--spark); font-variant-numeric: tabular-nums; }
.pv-body { color: var(--ink-700); line-height: 1.7; }
.pv-body p { margin: 0 0 12px; }
.pv-body ul { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.pv-body a, .form-privacy a { color: var(--acc-600, #008C84); text-decoration: underline; text-underline-offset: 2px; }
.pv-date { color: var(--ink-500); font-size: .9rem; }
.fb-link { color: inherit; opacity: .75; text-decoration: none; }
.fb-link:hover { opacity: 1; text-decoration: underline; }
.form-privacy { margin: 14px 0 0; font-size: .82rem; color: var(--ink-500); line-height: 1.5; max-width: 520px; }
/* copyright + Made in Portugal under the footer description (2026-10-13) */
.f-legal { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; font-size: .85rem; opacity: .7; }
.f-legal .made-pt { display: inline-flex; align-items: center; gap: 8px; }
/* client & partner logos: monochrome at rest, original colours on hover (2026-10-14) */
.logo-strip img, .logo-track img { transition: filter .35s ease, opacity .35s ease; }
.logo-strip img:hover, .logo-track img:hover { filter: none; opacity: 1; }
/* Home: VIDAcare wordmark inline in the section title (2026-10-14) */
.vc-h .vc-wordmark { display: inline-block; height: .84em; width: auto; vertical-align: -0.06em; margin-right: .04em; }

/* Language switch in the nav (2026-10-16): compact PT | EN, next to the demo button */
.lang-switch.lang-compact { gap: 0; padding: 2px; border-radius: 9px; background: transparent; border: 1px solid var(--line); margin-left: auto; }
.lang-compact .lang-opt { font-size: .74rem; font-weight: 600; letter-spacing: .04em; padding: 5px 8px; border-radius: 7px; color: var(--ink-500); }
.lang-compact .lang-opt[aria-pressed="true"] { color: var(--ink-900); background: var(--bg-tint, #F1F3F4); }
.lang-compact .lang-opt:focus-visible { outline-color: var(--acc-500, #00A79D); }
@media (hover: hover) and (pointer: fine) { .lang-compact .lang-opt:not([aria-pressed="true"]):hover { color: var(--ink-900); } }
.site-header.nav-dark .lang-compact { border-color: rgba(255,255,255,.18); }
.site-header.nav-dark .lang-compact .lang-opt { color: rgba(255,255,255,.6); }
.site-header.nav-dark .lang-compact .lang-opt[aria-pressed="true"] { color: #fff; background: rgba(255,255,255,.14); }
.nav-menu + .lang-compact { margin-left: 0; }
@media (max-width: 920px) { .lang-switch.lang-compact { margin-left: auto; order: 2; } .nav-toggle { order: 3; } }
@media (min-width: 921px) { .nav-menu { margin-inline: auto; } .lang-switch.lang-compact { margin-left: 0; margin-right: -6px; } }

/* Project pages (PRO-RAD, Buddy4All) — hero with product visual, results, quiet funding strip (2026-10-16) */
.proj-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.proj-visual img { display: block; width: 100%; height: auto; }
.proj-phone { display: flex; justify-content: center; }
.proj-phone .phone { width: min(260px, 70vw); margin: 0; border-radius: 34px; padding: 10px; box-shadow: 0 30px 60px -24px rgba(13,13,13,.35); }
.proj-phone .phone img { border-radius: 24px; }
@media (max-width: 980px) { .proj-grid { grid-template-columns: 1fr; gap: 36px; } }
.pr-practice { display: grid; grid-template-columns: 1.25fr .9fr; gap: 28px; align-items: start; }
.pr-cases { display: grid; gap: 18px; }
.pr-case, .pr-report { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px; box-shadow: 0 18px 40px -26px rgba(13,13,13,.25); }
.pr-case img { display: block; width: 100%; height: auto; border-radius: 10px; }
.pr-case figcaption { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 10px; font-size: .8rem; color: var(--ink-500); text-align: center; }
.pr-report img { display: block; width: 100%; height: auto; border-radius: 6px; }
.pr-report figcaption { margin-top: 12px; font-size: .85rem; color: var(--ink-500); }
@media (max-width: 860px) { .pr-practice { grid-template-columns: 1fr; } }
.funding { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 56px; padding: 18px 22px; background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.funding-logos { display: flex; align-items: center; gap: 22px; flex: none; opacity: .8; }
.funding-logos img { height: 26px; width: auto; }
.funding-logos img[src*="fct"] { height: 30px; }
.funding p { flex: 1; min-width: 260px; margin: 0; font-size: .8rem; line-height: 1.55; color: var(--ink-500); }

/* PRO-RAD hero composition (2026-10-16): laptop + glass cards (AI findings, MRI sequences, structured report) */
.prx { position: relative; padding: 40px 0 70px; }
.prx-laptop { display: block; width: 100%; height: auto; }
.prx-card { position: absolute; z-index: 2; border-radius: 16px; padding: 12px 13px; font-size: 10.5px; line-height: 1.25; color: var(--ink-900);
  background: linear-gradient(140deg, rgba(255,255,255,.82), rgba(255,255,255,.55)); -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.9); box-shadow: 0 16px 36px -14px rgba(13,13,13,.3), inset 0 1px 0 rgba(255,255,255,.95); }
.prx-ai { left: -6%; top: 6%; display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; }
.prx-ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: #00A79D; background: #fff; box-shadow: 1px 2px 9px -3px rgba(0,167,157,.7); flex: none; }
.prx-ic svg { width: 15px; height: 15px; }
.prx-k { display: block; font-size: 9.5px; color: var(--ink-500); }
.prx-v { display: block; font-size: 11.5px; font-weight: 700; }
.prx-seq { left: -4%; bottom: 0; width: 46%; }
.prx-h { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 11px; margin-bottom: 8px; gap: 8px; }
.prx-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.prx-thumbs figure { margin: 0; }
.prx-thumbs img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.prx-thumbs figcaption { margin-top: 4px; text-align: center; font-size: 9px; font-weight: 600; color: var(--ink-500); }
.prx-pi { font-size: 9px; font-weight: 700; border-radius: 6px; padding: 2px 6px; white-space: nowrap; }
.pi-5 { color: #B54708; background: #FDE7D4; } .pi-4 { color: #8A6A00; background: #FFF3C2; } .pi-3 { color: #2A48B8; background: #E3E9FD; }
.prx-rep { right: -7%; top: 18%; width: 38%; }
.prx-ok { font-size: 9px; font-weight: 700; color: #177A5B; background: #DDF3E8; border-radius: 999px; padding: 2px 8px; }
.prx-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 6px; margin: 4px 0; }
.prx-l { font-size: 9px; color: var(--ink-500); white-space: nowrap; }
.prx-row b, .prx-fd b { display: block; height: 5px; border-radius: 3px; background: #DCE1E3; }
.prx-fd { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 6px; margin: 6px 0; }
.prx-fd i { width: 8px; height: 8px; border-radius: 50%; }
.prx-fd .d5 { background: #F08A3C; } .prx-fd .d4 { background: #F2D23C; } .prx-fd .d3 { background: #3E63DD; }
.prx-map { display: block; width: 100%; height: auto; margin-top: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .prx-card { animation: prxIn .8s cubic-bezier(.2,.8,.2,1) both; }
  .prx-ai { animation-delay: .9s; } .prx-rep { animation-delay: 1.2s; } .prx-seq { animation-delay: 1.5s; }
  .prx-ai .prx-ic { animation: prxPulse 2.8s ease-in-out 2.4s infinite; }
}
@keyframes prxIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes prxPulse { 0%,100% { box-shadow: 1px 2px 9px -3px rgba(0,167,157,.7); } 50% { box-shadow: 0 0 0 6px rgba(0,167,157,.12), 1px 2px 9px -3px rgba(0,167,157,.7); } }
@media (max-width: 980px) { .prx-ai { left: 0; } .prx-seq { left: 0; } .prx-rep { right: 0; } }
@media (max-width: 600px) { .prx-card { font-size: 9px; padding: 8px 9px; } .prx-rep { width: 46%; } .prx-seq { width: 58%; } }
/* PRO-RAD: dummy viewer window instead of the prototype laptop screenshot */
.prx-win { position: relative; z-index: 1; border-radius: 16px; overflow: hidden; background: #15181B; border: 1px solid rgba(13,13,13,.12);
  box-shadow: 0 30px 70px -30px rgba(13,13,13,.55); }
.prx-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: #1D2125; border-bottom: 1px solid rgba(255,255,255,.06); }
.prx-brand { font-size: 12px; color: #E7EAEC; letter-spacing: .01em; }
.prx-brand b { font-weight: 300; margin-right: 2px; }
.prx-tabs { display: flex; gap: 4px; }
.prx-tabs span { font-size: 9.5px; color: #8E979E; padding: 4px 8px; border-radius: 6px; white-space: nowrap; }
.prx-tabs .on { color: #fff; background: rgba(255,255,255,.1); }
.prx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; }
.prx-tile { display: block; width: 100%; height: auto; border-radius: 6px; }
.prx-tl { font: 600 9px var(--font-body); fill: #AEB6BC; }
.prx-ctrl { border-radius: 6px; background: #1A1E21; padding: 12px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.prx-sl span, .prx-nod span { font-size: 9px; color: #AEB6BC; }
.prx-sl i { display: block; height: 3px; margin-top: 5px; border-radius: 3px; background: linear-gradient(90deg, #00A79D var(--v), rgba(255,255,255,.12) var(--v)); }
.prx-nod { display: flex; justify-content: space-between; align-items: center; padding: 5px 7px; border-radius: 6px; background: rgba(255,255,255,.05); }
.prx-nod em { font-style: normal; font-size: 8.5px; font-weight: 700; border-radius: 5px; padding: 2px 5px; }
@media (max-width: 600px) { .prx-tabs span:not(.on) { display: none; } }
.prx-tile { position: relative; border-radius: 6px; overflow: hidden; background: #000; aspect-ratio: 200 / 150; }
.prx-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.prx-tile .prx-tl { position: absolute; left: 7px; top: 5px; font: 600 9px var(--font-body); color: #D7DCE0; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
/* smaller viewer window (Tiago 2026-10-16) */
.prx-win { width: 78%; margin-inline: auto; }
.prx-rep { right: -2%; width: 34%; }
.prx-seq { left: 0; width: 42%; }
.prx-ai { left: 2%; }

/* ---------- Mobile fixes (2026-10-18) ---------- */
/* Module explorer, stacked layout: the detail opens inline under the tapped module (accordion, see main.js) */
@media (max-width: 1020px) {
  .mx-grid > .mx-detail { grid-column: 1 / -1; margin: 2px 0 6px; padding: 22px 20px; }
  .mx-detail.mx-open { animation: mxOpen .32s var(--ease-out, ease-out) both; }
  .mx-chip:not(.mx-ai)::after { content: ""; margin-left: auto; flex: none; width: 7px; height: 7px; border-right: 1.75px solid var(--ink-400, #9AA1A6);
    border-bottom: 1.75px solid var(--ink-400, #9AA1A6); transform: translateY(-2px) rotate(45deg); transition: transform .25s var(--ease-out, ease-out); }
  .mx-chip.mx-ai .mx-new { margin-right: 0; }
  .mx-chip.active::after { transform: translateY(1px) rotate(-135deg); }
  .mx-detail h3 { font-size: 1.2rem; }
  .mx-grid > .mx-detail p { margin-bottom: 0; }
  .mx { overflow-anchor: none; }   /* main.js keeps the tapped module in place itself */
}
@keyframes mxOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* VIDAcare cards hero: on desktop the glass cards overhang the composition; on phones keep them inside the screen */
@media (max-width: 600px) {
  .hc4-card[data-slot="a"] { left: -3%; }
  .hc4-card[data-slot="b"] { right: -4%; }
  .hc4-card[data-slot="c"] { left: -2%; bottom: -1%; }
  .hc4-card.hc4-phone[data-slot] { right: -3%; }
  .hc4-card.hc4-tele[data-slot] { width: 54%; }
}