/* ==========================================================================
   Inovent Solutions Pte Ltd — Design System v4 · Light Glassmorphism
   Brand (from the logo artwork): #26A9E1 blue · #222222 charcoal
   Backdrop palette sampled from the supplied reference image:
     cyan #4CCBEA · sky #3E94D6 · periwinkle #7786CE · orchid #AF58CE
     deep indigo #232981
   Surfaces are white frosted glass; text is dark ink, so body copy stays
   readable on a bright gradient (white-on-light would not).
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand */
  --blue:      #26A9E1;
  --blue-dp:   #0F74A6;
  --blue-ink:  #0B5C87;
  --blue-lt:   #6FC9EC;
  --charcoal:  #222222;
  --gold:      #D98A00;
  --gold-dp:   #9A6200;

  /* Reference gradient stops */
  --g-cyan:    #4CCBEA;
  --g-sky:     #3E94D6;
  --g-peri:    #7786CE;
  --g-orchid:  #AF58CE;
  --g-indigo:  #232981;

  /* Ink — darkened so copy clears 4.5:1 even over the orchid end of the
     gradient, which is the darkest the backdrop gets. */
  --text:      #0E1829;   /* headings */
  --text-body: #1E2E49;   /* body copy */
  --text-mute: #32445E;   /* secondary */
  --text-dim:  #42536F;   /* small uppercase labels */

  /* Glass recipe — white tint over the gradient */
  --glass-1:   rgba(255, 255, 255, .42);   /* standard card */
  --glass-2:   rgba(255, 255, 255, .56);   /* reading surface */
  --glass-3:   rgba(255, 255, 255, .26);   /* light accent */
  --glass-hi:  rgba(255, 255, 255, .85);   /* bevel highlight */
  --glass-br:  rgba(255, 255, 255, .60);   /* border */
  --glass-br2: rgba(255, 255, 255, .85);
  --blur:      saturate(160%) blur(20px);
  --blur-lg:   saturate(170%) blur(30px);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --step--2: clamp(0.72rem, 0.70rem + 0.08vw, 0.78rem);
  --step--1: clamp(0.83rem, 0.81rem + 0.10vw, 0.89rem);
  --step-0:  clamp(1.00rem, 0.97rem + 0.16vw, 1.09rem);
  --step-1:  clamp(1.21rem, 1.13rem + 0.40vw, 1.44rem);
  --step-2:  clamp(1.48rem, 1.31rem + 0.82vw, 2.00rem);
  --step-3:  clamp(1.85rem, 1.50rem + 1.60vw, 2.80rem);
  --step-4:  clamp(2.30rem, 1.75rem + 2.70vw, 3.95rem);
  --step-5:  clamp(2.70rem, 1.85rem + 4.00vw, 5.10rem);

  --sp-1: .375rem; --sp-2: .75rem;  --sp-3: 1.125rem;
  --sp-4: 1.75rem; --sp-5: 2.5rem;  --sp-6: 3.5rem;
  --sp-7: 5rem;    --sp-8: 7.5rem;

  --r-sm: 12px; --r-md: 20px; --r-lg: 28px; --r-xl: 40px;

  --sh-sm: 0 2px 8px rgba(30,50,90,.08);
  --sh-md: 0 8px 30px rgba(30,50,90,.14);
  --sh-lg: 0 26px 70px rgba(30,50,90,.22);
  --ring:  0 0 0 3px rgba(15,116,166,.45);

  --wrap: 1220px;
  --nav-h: 80px;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 18px);
  overflow-x: clip;             /* clip, not hidden — hidden makes a scroll container */
}
body {
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.66;
  color: var(--text-body);
  background: #F4F7FB;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  position: relative;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { line-height: 1.1; letter-spacing: -.028em; font-weight: 760; text-wrap: balance; color: var(--text); }
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -.02em; }
p  { text-wrap: pretty; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
::selection { background: rgba(38,169,225,.32); color: var(--text); }

/* ---------- 3. Gradient backdrop ---------- */
.bg-aurora {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(180deg,
      #76DCF0 0%, #6FB2E4 22%, #9BA4DE 38%, #C98BDF 50%,
      #9BA4DE 62%, #6FB2E4 78%, #76DCF0 100%) 0 0 / 100% 1900px repeat-y;
}
/* A white wash over the whole gradient. Without it the orchid end sits around
   0.22 luminance and dark body copy drops under 4.5:1 there. */
.bg-aurora::before {
  content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.30);
}
.bg-aurora::after {               /* fine grain stops the gradient banding */
  content: ""; position: absolute; inset: 0; opacity: .40;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
/* the big soft blooms from the reference */
.bg-orbs { position: absolute; inset: 0; z-index: -1; pointer-events: none; filter: blur(80px); opacity: .85; }
.bg-orbs span { position: absolute; display: block; border-radius: 50%; animation: drift 36s ease-in-out infinite alternate; }
.bg-orbs span:nth-child(1) { width: 44vw; height: 44vw; left: -6%;  top: -8%;  background: radial-gradient(circle, #8FE4F5, transparent 68%); opacity: .70; }
.bg-orbs span:nth-child(2) { width: 50vw; height: 50vw; right: -8%; top: -4%;  background: radial-gradient(circle, #CDB4EC, transparent 68%); opacity: .60; animation-delay: -9s; }
.bg-orbs span:nth-child(3) { width: 40vw; height: 40vw; left: 22%;  top: 36%;  background: radial-gradient(circle, #FFFFFF, transparent 66%); opacity: .42; animation-delay: -17s; }
.bg-orbs span:nth-child(4) { width: 38vw; height: 38vw; right: 4%;  top: 60%;  background: radial-gradient(circle, #E59BE0, transparent 70%); opacity: .50; animation-delay: -25s; }
.bg-orbs span:nth-child(5) { width: 46vw; height: 46vw; left: -6%;  bottom: -10%; background: radial-gradient(circle, #7FB6EA, transparent 68%); opacity: .55; animation-delay: -4s; }
@keyframes drift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(4vw,-3vh,0) scale(1.12); }
  100% { transform: translate3d(-3vw,4vh,0) scale(.94); }
}

/* ---------- 4. Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.15rem, 4vw, 2.75rem); position: relative; z-index: 1; }
.section { padding-block: clamp(3.75rem, 8vw, var(--sp-8)); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 5vw, var(--sp-6)); position: relative; }
.grid { display: grid; gap: var(--sp-4); }
.grid > *, .split > *, .hero-inner > *, .foot-grid > * { min-width: 0; }
.panel, .card, .step, .kpi { min-width: 0; overflow-wrap: break-word; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.center { text-align: center; }
.stack > * + * { margin-top: var(--sp-3); }

/* Section veils: a light wash so bands separate without going dark */
.band-dark, .band-paper { position: relative; isolation: isolate; overflow: hidden; }
.band-dark::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.12));
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.band-paper::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,.20));
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.band-dark p, .band-paper p { color: var(--text-body); }

.lattice::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: url("../img/lattice.svg") repeat; background-size: 120px 120px; opacity: .45;
  -webkit-mask-image: radial-gradient(72% 62% at 50% 40%, #000 0%, transparent 78%);
          mask-image: radial-gradient(72% 62% at 50% 40%, #000 0%, transparent 78%);
}
.circuit-mark {
  position: absolute; pointer-events: none; z-index: -1; width: min(760px, 70vw); aspect-ratio: 1;
  background: url("../img/circuit.svg") center/300px repeat;
  opacity: .40; animation: trace-drift 90s linear infinite;
  -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000 0%, transparent 72%);
          mask-image: radial-gradient(60% 60% at 50% 50%, #000 0%, transparent 72%);
}
.circuit-mark--tr { top: -16%; right: -14%; }
.circuit-mark--bl { bottom: -20%; left: -16%; opacity: .30; animation-direction: reverse; }
@keyframes trace-drift { to { background-position: 300px 300px; } }

/* ---------- 5. Glass primitive ---------- */
.glass, .card, .panel, .chip, .acc, .tbl-wrap, .cta, .kpi, .step,
.field input, .field select, .field textarea {
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  background: var(--glass-1);
  border: 1px solid var(--glass-br);
}
.card, .panel, .cta, .acc, .tbl-wrap {
  position: relative; box-shadow: var(--sh-md), inset 0 1px 0 var(--glass-hi);
}
.panel::after, .cta::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(140deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 46%);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass, .card, .panel, .chip, .acc, .tbl-wrap, .cta, .kpi, .step,
  .field input, .field select, .field textarea { background: rgba(255,255,255,.92); }
  .site-head { background: rgba(255,255,255,.96); }
  .band-dark::before, .band-paper::before { background: rgba(255,255,255,.55); }
}

/* ---------- 6. Type helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: var(--step--1); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: #06456A;
}
.eyebrow::before {
  content: ""; width: 22px; height: 22px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 59 65'%3E%3Cpath d='M29.5 0 59 11v43L29.5 65 0 54V11Z'/%3E%3C/svg%3E") center/11px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 59 65'%3E%3Cpath d='M29.5 0 59 11v43L29.5 65 0 54V11Z'/%3E%3C/svg%3E") center/11px no-repeat;
}
.eyebrow--gold { color: var(--gold-dp); }
.lead { font-size: var(--step-1); color: var(--text-mute); line-height: 1.56; max-width: 64ch; font-weight: 440; }
.muted { color: var(--text-mute); }
.grad {
  background: linear-gradient(104deg, var(--blue-ink) 0%, #1E86BE 38%, #7B3FA0 96%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grad-gold {
  background: linear-gradient(104deg, var(--gold-dp), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sec-head { max-width: 780px; margin-bottom: var(--sp-5); }
.sec-head .lead { margin-top: var(--sp-3); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .lead { margin-inline: auto; }
.sec-head--center .eyebrow { justify-content: center; }

/* ---------- 7. Buttons ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .92rem 1.65rem; border-radius: 100px; border: 1px solid transparent;
  font-weight: 650; font-size: var(--step-0); letter-spacing: -.012em; cursor: pointer;
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.42) 50%, transparent 62%);
  transform: translateX(-120%); transition: transform .62s ease;
}
.btn:hover::after { transform: translateX(120%); }
/* deep-ocean fill so white label clears 4.5:1 */
.btn--primary {
  /* bright end capped at #0F74A6 — anything lighter drops the white label
     under 4.5:1 at the right-hand end of the gradient */
  background: linear-gradient(103deg, #084766 0%, #0B5C87 52%, #0F74A6 100%);
  color: #fff; box-shadow: 0 10px 26px -10px rgba(11,92,135,.75), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn--primary:hover { box-shadow: 0 18px 40px -12px rgba(11,92,135,.9), inset 0 1px 0 rgba(255,255,255,.34); }
.btn--gold { background: linear-gradient(103deg, #74490A, #96600A); color: #fff; box-shadow: 0 10px 26px -10px rgba(154,98,0,.7); }
.btn--dark { background: rgba(22,35,60,.90); color: #fff; box-shadow: 0 10px 26px -12px rgba(22,35,60,.7); }
.btn--dark:hover { background: rgba(22,35,60,1); }
.btn--ghost {
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  background: rgba(255,255,255,.55); border-color: var(--glass-br2); color: var(--text);
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
.btn--ghost:hover { background: rgba(255,255,255,.78); border-color: #fff; color: var(--blue-ink); }
.btn--sm { padding: .62rem 1.15rem; font-size: var(--step--1); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.arrow { transition: transform .22s ease; }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- 8. Logo + header ---------- */
.brand { display: inline-flex; align-items: center; gap: .68rem; color: var(--charcoal); }
.brand-mark { width: 40px; height: 39px; flex: none; }
.brand-word { font-size: 1.44rem; font-weight: 800; letter-spacing: .01em; line-height: 1; text-transform: uppercase; }
.brand-sub { display: block; font-size: .56rem; font-weight: 680; letter-spacing: .26em; text-transform: uppercase; color: var(--text-dim); margin-top: 3px; }

.site-head {
  position: sticky; top: 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center;
  background: rgba(255,255,255,.42);
  -webkit-backdrop-filter: var(--blur-lg); backdrop-filter: var(--blur-lg);
  border-bottom: 1px solid transparent;
  transition: border-color .28s ease, box-shadow .28s ease, background .28s ease;
}
.site-head.is-stuck {
  background: rgba(255,255,255,.66);
  border-bottom-color: var(--glass-br);
  box-shadow: 0 8px 30px rgba(30,50,90,.14), inset 0 1px 0 var(--glass-hi);
}
.nav { display: flex; align-items: center; gap: var(--sp-4); width: 100%; }
.nav-links { display: flex; align-items: center; gap: .15rem; margin-left: auto; }
/* :not(.btn) — otherwise this (0-1-1) outranks .btn--primary (0-1-0) */
.nav-links a:not(.btn) {
  position: relative; padding: .55rem .85rem; border-radius: 100px;
  font-size: .95rem; font-weight: 600; color: var(--text-body);
  transition: color .16s ease, background .16s ease;
}
.nav-links a:not(.btn):hover { color: var(--text); background: rgba(255,255,255,.55); }
.nav-links a.is-active:not(.btn) { color: var(--text); font-weight: 680; }
.nav-links a.is-active:not(.btn)::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; width: 16px; height: 2px;
  transform: translateX(-50%); border-radius: 2px; background: linear-gradient(90deg, var(--blue-ink), var(--blue));
}
.nav-cta { margin-left: var(--sp-2); }
.burger {
  display: none; width: 46px; height: 46px; margin-left: auto; align-items: center; justify-content: center;
  background: rgba(255,255,255,.60); border: 1px solid var(--glass-br2); border-radius: 14px; cursor: pointer;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.burger span { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; position: relative; transition: .22s ease; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--text); border-radius: 2px; transition: .22s ease; }
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* ---------- 9. Hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(4rem, 9vw, 7rem); }
.hero-inner { display: grid; grid-template-columns: 1.04fr .96fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero h1 { margin-bottom: var(--sp-3); }
.hero .lead { margin-bottom: var(--sp-5); color: var(--text-body); }
.pill {
  display: inline-flex; align-items: center; gap: .6rem; padding: .4rem 1rem .4rem .42rem;
  border-radius: 100px; background: rgba(255,255,255,.58); border: 1px solid var(--glass-br2);
  font-size: var(--step--1); font-weight: 600; color: var(--text); margin-bottom: var(--sp-4);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
.pill b {
  background: linear-gradient(100deg, #8A5800, #B87400); color: #fff;
  padding: .18rem .6rem; border-radius: 100px; font-size: .68rem; font-weight: 780;
  letter-spacing: .07em; text-transform: uppercase;
}
.hero-stats { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid rgba(255,255,255,.65); }
.hero-stats div strong {
  display: block; font-size: var(--step-2); font-weight: 790; letter-spacing: -.04em; line-height: 1; margin-bottom: .3rem;
  background: linear-gradient(100deg, var(--blue-ink), #7B3FA0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-stats div span { font-size: var(--step--1); color: var(--text-mute); }

/* ---------- 10. Network topology ---------- */
/* width is pinned to the graphic so the % label positions track the nodes */
.mesh-wrap { position: relative; display: grid; place-items: center; width: 100%; max-width: 640px; margin-inline: auto; }
.mesh-wrap::before {           /* white bloom lifts the topology off the gradient */
  content: ""; position: absolute; inset: -6%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.60) 0%, rgba(255,255,255,.28) 46%, transparent 72%);
}
.mesh-wrap > * { position: relative; }
.mesh { width: 100%; max-width: 640px; height: auto; }
.mesh-sweep { transform-origin: 50% 50%; animation: sweep 11s linear infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }
/* pathLength="100" normalises every link so one dash pattern fits all */
.mesh .flow { stroke-dasharray: 7 93; stroke-dashoffset: 100; animation: flow 3.6s linear infinite; animation-delay: var(--d, 0s); }
@keyframes flow { to { stroke-dashoffset: 0; } }
.mesh .nd { animation: nodepulse 5s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes nodepulse { 0%, 100% { filter: none; } 50% { filter: brightness(1.25); } }
.mesh-core { position: absolute; width: clamp(60px, 9.5vw, 92px); filter: drop-shadow(0 4px 18px rgba(11,92,135,.45)); }

/* --- service labels orbiting the topology --------------------------------
   Ten frosted chips pinned around the mesh. Each fades in, holds, fades out;
   staggered delays keep two or three on screen at any moment. Pure CSS, so
   it runs with scripting disabled; under prefers-reduced-motion it fades only. */
.mesh-labels { position: absolute; inset: 0; pointer-events: none; }
.mlabel {
  position: absolute; left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
  padding: .42rem .85rem; border-radius: 100px;
  background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px);
  box-shadow: 0 6px 18px rgba(30,50,90,.16), inset 0 1px 0 rgba(255,255,255,.9);
  font-size: .78rem; font-weight: 650; letter-spacing: -.01em; color: var(--text);
  opacity: 0;
  animation: label-cycle 27s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.mlabel::before {                       /* hexagon bullet, same as the mark */
  content: ""; width: 9px; height: 10px; flex: none; background: var(--blue-dp);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 59 65'%3E%3Cpath d='M29.5 0 59 11v43L29.5 65 0 54V11Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 59 65'%3E%3Cpath d='M29.5 0 59 11v43L29.5 65 0 54V11Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
@keyframes label-cycle {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.88); }
  3%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  16%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  21%  { opacity: 0; transform: translate(-50%, -50%) scale(1.06); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.88); }
}

/* ---------- 11. Cards ---------- */
.card {
  padding: var(--sp-4); border-radius: var(--r-md);
  transition: transform .26s cubic-bezier(.22,1,.36,1), box-shadow .26s ease, border-color .26s ease, background .26s ease;
}
.card:hover { transform: translateY(-5px); background: rgba(255,255,255,.62); border-color: #fff; box-shadow: var(--sh-lg), inset 0 1px 0 var(--glass-hi); }
.card h3 { margin-bottom: .55rem; }
.card p { color: var(--text-body); font-size: .97rem; }
.card--flat:hover { transform: translateY(-3px); box-shadow: var(--sh-md), inset 0 1px 0 var(--glass-hi); }
.card--accent::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, var(--blue), #FFFFFF 42%, var(--g-orchid) 115%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .26s ease; pointer-events: none;
}
.card--accent:hover::before { opacity: 1; }
.card-num { font-family: var(--mono); font-size: .76rem; font-weight: 700; letter-spacing: .12em; color: var(--blue-ink); }

.ico {
  width: 50px; height: 54px; display: grid; place-items: center; margin-bottom: var(--sp-3); flex: none;
  background: linear-gradient(145deg, rgba(255,255,255,.85), rgba(38,169,225,.22));
  border: 1px solid rgba(255,255,255,.9); border-radius: 15px;
  box-shadow: 0 4px 12px rgba(30,50,90,.10);
}
.ico svg { width: 23px; height: 23px; stroke: var(--blue-ink); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico--gold, .ico--amber { background: linear-gradient(145deg, rgba(255,255,255,.85), rgba(217,138,0,.22)); }
.ico--gold svg, .ico--amber svg { stroke: var(--gold-dp); }
.ico--violet { background: linear-gradient(145deg, rgba(255,255,255,.85), rgba(175,88,206,.24)); }
.ico--violet svg { stroke: #6B2E92; }

/* ---------- 12. Lists ---------- */
.ticks { display: grid; gap: .72rem; }
/* NOT flex: a flex li makes <strong> and the text after it separate items,
   which wraps them into two ragged columns. */
.ticks li { position: relative; padding-left: 1.85rem; font-size: .97rem; color: var(--text-body); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .3em; width: 19px; height: 21px; background: var(--blue-dp);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 59 65'%3E%3Cpath d='M29.5 0 59 11v43L29.5 65 0 54V11Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 59 65'%3E%3Cpath d='M29.5 0 59 11v43L29.5 65 0 54V11Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.ticks li strong { color: var(--text); font-weight: 680; }

/* ---------- 13. Steppers ---------- */
.flow-steps { position: relative; display: grid; gap: var(--sp-3); counter-reset: s; }
.flow-steps::before {
  content: ""; position: absolute; left: 27px; top: 34px; bottom: 34px; width: 2px;
  background: linear-gradient(180deg, var(--blue-ink) 0%, rgba(15,116,166,.3) 50%, var(--gold) 100%);
  opacity: .55;
}
.steps { display: grid; gap: var(--sp-3); counter-reset: s; }
.step {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: start;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 var(--glass-hi);
  transition: transform .24s ease, border-color .24s ease, background .24s ease;
}
.step:hover { transform: translateX(4px); background: rgba(255,255,255,.64); border-color: #fff; }
.step::before {
  counter-increment: s; content: counter(s, decimal-leading-zero);
  font-family: var(--mono); font-size: .78rem; font-weight: 700; color: #fff;
  width: 38px; height: 42px; display: grid; place-items: center; flex: none; z-index: 1;
  background: linear-gradient(145deg, var(--blue-ink), var(--blue-dp));
  -webkit-clip-path: polygon(50% 0, 100% 17%, 100% 83%, 50% 100%, 0 83%, 0 17%);
          clip-path: polygon(50% 0, 100% 17%, 100% 83%, 50% 100%, 0 83%, 0 17%);
}
.step h3 { font-size: var(--step-0); font-weight: 700; margin-bottom: .2rem; }
.step p { font-size: .93rem; color: var(--text-body); }

/* ---------- 14. Chips ---------- */
.strip { display: flex; flex-wrap: wrap; gap: .55rem; }
.chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem 1.05rem; border-radius: 100px;
  font-size: .88rem; font-weight: 600; color: var(--text-body);
  box-shadow: inset 0 1px 0 var(--glass-hi);
  transition: border-color .18s ease, color .18s ease, transform .18s ease, background .18s ease;
}
.chip:hover { color: var(--blue-ink); border-color: #fff; transform: translateY(-2px); background: rgba(255,255,255,.72); }
.chip--on { background: rgba(22,35,60,.88); border-color: rgba(22,35,60,.9); color: #fff; }
.chip--on:hover { color: #fff; background: rgba(22,35,60,1); }

/* ---------- 15. Split / panel / kpi ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.75rem); align-items: center; }
.split--wide { grid-template-columns: 1.14fr .86fr; }

/* Panels are the frosted windows — they carry title-bar chrome */
.panel {
  padding: calc(var(--sp-5) + 18px) var(--sp-5) var(--sp-5);
  border-radius: var(--r-lg); background: var(--glass-2);
}
.panel::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  border-bottom: 1px solid rgba(255,255,255,.75);
  background:
    radial-gradient(circle 4px at 20px 20px, rgba(255,255,255,.95) 98%, transparent),
    radial-gradient(circle 4px at 38px 20px, rgba(255,255,255,.72) 98%, transparent),
    radial-gradient(circle 4px at 56px 20px, rgba(255,255,255,.52) 98%, transparent);
  pointer-events: none;
}
.panel > * { position: relative; z-index: 1; }

.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
.kpi { padding: var(--sp-3); border-radius: var(--r-sm); box-shadow: inset 0 1px 0 var(--glass-hi); }
.kpi strong {
  display: block; font-size: var(--step-2); font-weight: 800; letter-spacing: -.04em; line-height: 1.05;
  overflow-wrap: anywhere; margin-bottom: .2rem;
  background: linear-gradient(100deg, var(--blue-ink), #7B3FA0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kpi span { font-size: .84rem; color: var(--text-mute); }

/* ---------- 16. CTA ---------- */
.cta {
  overflow: hidden; border-radius: var(--r-xl); isolation: isolate;
  padding: clamp(2.75rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem);
  background: linear-gradient(152deg, rgba(255,255,255,.66), rgba(255,255,255,.40) 55%, rgba(255,255,255,.58));
  text-align: center; box-shadow: var(--sh-lg), inset 0 1px 0 var(--glass-hi);
}
.cta h2 { margin-bottom: var(--sp-2); }
.cta p { color: var(--text-body); max-width: 58ch; margin-inline: auto; margin-bottom: var(--sp-4); }
.cta .btn-row { justify-content: center; }

/* ---------- 17. Forms ---------- */
.form { display: grid; gap: var(--sp-3); }
.field { display: grid; gap: .4rem; }
.field label { font-size: .86rem; font-weight: 680; color: var(--text); }
.field .req { color: #C62828; }
.field input, .field select, .field textarea {
  width: 100%; padding: .85rem 1rem; border-radius: var(--r-sm); color: var(--text);
  background: rgba(255,255,255,.62);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-dim); }
.field select option { background: #fff; color: var(--text); }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue-dp); box-shadow: var(--ring); outline: none; background: rgba(255,255,255,.88); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.form-note { font-size: .83rem; color: var(--text-mute); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.alert { padding: var(--sp-3); border-radius: var(--r-sm); font-size: .92rem; border: 1px solid; }
.alert--ok  { background: rgba(255,255,255,.7); border-color: rgba(15,116,166,.45); color: var(--blue-ink); }
.alert--err { background: rgba(255,255,255,.75); border-color: rgba(198,40,40,.45); color: #A3281F; }

/* ---------- 18. Contact rows ---------- */
.info-row { display: flex; gap: var(--sp-3); align-items: flex-start; padding-block: var(--sp-3); border-bottom: 1px solid rgba(255,255,255,.7); }
.info-row:last-of-type { border-bottom: none; }
.info-row .ico { margin-bottom: 0; width: 42px; height: 46px; }
.info-row .ico svg { width: 19px; height: 19px; }
.info-row b { display: block; font-size: .76rem; text-transform: uppercase; letter-spacing: .13em; color: var(--text-dim); font-weight: 700; margin-bottom: .25rem; }
.info-row a, .info-row p { font-size: 1rem; color: var(--text); font-weight: 580; }
.info-row a:hover { color: var(--blue-ink); }

/* ---------- 19. Footer ---------- */
.site-foot {
  position: relative; overflow: hidden; color: var(--text-body); padding-block: var(--sp-7) var(--sp-4);
  background: rgba(255,255,255,.52);
  -webkit-backdrop-filter: var(--blur-lg); backdrop-filter: var(--blur-lg);
  border-top: 1px solid var(--glass-br);
}
.site-foot::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("../img/lattice.svg") repeat; background-size: 120px 120px; opacity: .35;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%);
          mask-image: linear-gradient(180deg, #000, transparent 70%);
}
.foot-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.1fr; gap: var(--sp-5); margin-bottom: var(--sp-5); }
.site-foot .brand { margin-bottom: var(--sp-3); }
.site-foot h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--text); margin-bottom: var(--sp-3); font-weight: 700; }
.site-foot li + li { margin-top: .6rem; }
.site-foot a { font-size: .93rem; transition: color .16s ease; }
.site-foot a:hover { color: var(--blue-ink); }
.site-foot p { font-size: .93rem; max-width: 42ch; }
.foot-bot {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); justify-content: space-between; align-items: center;
  padding-top: var(--sp-4); border-top: 1px solid rgba(255,255,255,.65); font-size: .85rem; color: var(--text-mute);
}
.foot-bot nav { display: flex; gap: var(--sp-3); }

/* ---------- 20. Reveal ---------- */
.js .rv { opacity: 0; transform: translate(var(--rx, 0), var(--ry, 28px)) scale(var(--rs, 1)); transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
.js .rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .08s } .rv-d2 { transition-delay: .16s } .rv-d3 { transition-delay: .24s } .rv-d4 { transition-delay: .32s }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* reveal still plays, as a slow fade with no travel */
  .js .rv { transform: none; transition: opacity 1s ease; }
  .mesh .nd, .circuit-mark, .bg-orbs span { animation: none !important; }
  /* hero graphic: keep it alive with slow fades only (no movement/scale) */
  .mesh-sweep, .mesh .flow { animation: revive-fade 6s ease-in-out infinite !important; }
  .mlabel { animation: label-fade 27s ease-in-out infinite !important; animation-delay: var(--d, 0s) !important; }
  .btn:hover, .card:hover, .chip:hover, .step:hover { transform: none; }
  .btn::after { display: none; }
}

@keyframes label-fade { 0%{opacity:0} 4%,16%{opacity:1} 21%,100%{opacity:0} }
@keyframes revive-fade { 0%,100%{opacity:.55} 50%{opacity:1} }

/* ---------- 21. Page head ---------- */
.page-head { position: relative; overflow: hidden; padding-block: clamp(3.25rem, 7vw, 5.5rem) clamp(2.75rem, 6vw, 4.5rem); }
.crumbs { display: flex; gap: .5rem; align-items: center; font-size: .84rem; color: var(--text-mute); margin-bottom: var(--sp-3); }
.crumbs a:hover { color: var(--blue-ink); }
.crumbs span { opacity: .5; }

/* ---------- 22. Accordion ---------- */
.acc { border-radius: var(--r-md); overflow: hidden; transition: border-color .2s ease, background .2s ease; }
.acc + .acc { margin-top: var(--sp-2); }
.acc[open] { border-color: #fff; background: rgba(255,255,255,.64); }
.acc summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); cursor: pointer; font-weight: 660; list-style: none; color: var(--text); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-size: 1.35rem; font-weight: 300; color: var(--blue-dp); flex: none; transition: transform .24s ease; }
.acc[open] summary::after { transform: rotate(45deg); }
.acc .acc-body { padding: 0 var(--sp-4) var(--sp-4); color: var(--text-body); font-size: .96rem; }

/* ---------- 23. Table ---------- */
.tbl-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-md); }
table { width: 100%; border-collapse: collapse; font-size: .94rem; min-width: 460px; }
th, td { text-align: left; padding: .9rem 1.15rem; border-bottom: 1px solid rgba(255,255,255,.7); color: var(--text-body); }
th { background: rgba(255,255,255,.4); font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-mute); font-weight: 700; }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background .16s ease; }
tbody tr:hover { background: rgba(255,255,255,.4); }
td strong { font-weight: 660; color: var(--text); }

/* ---------- 24. Responsive ---------- */
@media (max-width: 1024px) {
  .g-4 { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
}
@media (max-width: 900px) {
  .hero-inner, .split, .split--wide { grid-template-columns: 1fr; }
  .g-3 { grid-template-columns: repeat(2, 1fr); }
  .burger { display: flex; }
  .mesh-wrap { order: -1; }
  .mesh { max-width: 420px; }
  .nav-links {
    position: fixed; inset: var(--nav-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--sp-3) clamp(1.15rem, 4vw, 2.75rem) var(--sp-4);
    background: rgba(255,255,255,.92);
    -webkit-backdrop-filter: var(--blur-lg); backdrop-filter: var(--blur-lg);
    border-bottom: 1px solid var(--glass-br); box-shadow: var(--sh-md);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: opacity .22s ease, transform .22s ease; max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
  }
  .nav-links.open { opacity: 1; transform: none; pointer-events: auto; }
  .nav-links a { padding: .88rem .65rem; border-radius: var(--r-sm); font-size: 1.02rem; }
  .nav-links a.is-active::after { display: none; }
  .nav-cta { margin: var(--sp-2) 0 0; }
  .nav-cta .btn { width: 100%; }
  :root { --blur: saturate(150%) blur(14px); --blur-lg: saturate(160%) blur(20px); }
  .bg-orbs { filter: blur(64px); }
}
@media (max-width: 620px) {
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .hero-stats { gap: var(--sp-4); }
  .step { padding: var(--sp-3); }
  .flow-steps::before { left: 22px; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-bot { flex-direction: column; align-items: flex-start; }
  .brand-word { font-size: 1.24rem; }
  .panel { padding: calc(var(--sp-4) + 18px) var(--sp-4) var(--sp-4); }
  /* chips get cramped on a 420px mesh — show alternate ones, slightly smaller */
  .mlabel { font-size: .7rem; padding: .34rem .68rem; }
  .mlabel:nth-child(even) { display: none; }
}

/* ---------- 25. Print ---------- */
@media print {
  .site-head, .burger, .cta, .site-foot, .mesh-wrap, .circuit-mark, .bg-aurora, .bg-orbs { display: none; }
  body { color: #000; background: #fff; }
  h1, h2, h3, h4, .lead, .muted, p, li, td, th { color: #000 !important; }
  .card, .panel, .step, .kpi, .acc, .tbl-wrap { background: #fff !important; border-color: #CCC !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .panel::before { display: none; }
}

/* ---------- 30. Page art: small animated, topic-specific graphic per page ----------
   Each page head carries a frosted window with an SVG that illustrates what the page
   is about. Movement is parameterised through custom properties so that, under
   prefers-reduced-motion, the same animations keep running as slow fades only. */
.page-art {
  --dx: 0px; --dy: 0px; --lift: -14px; --spin: 360deg; --pop: .4; --sc: 2.6; --scan: 176px;
  position: relative; width: 100%; max-width: 380px; margin-top: var(--sp-5); margin-inline: auto;
  border-radius: var(--r-md); overflow: hidden;
  background: var(--glass-1); border: 1px solid rgba(255,255,255,.85);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--sh-md), inset 0 1px 0 var(--glass-hi);
}
.page-art svg { display: block; width: 100%; height: auto; }
.pa-bar { display: flex; align-items: center; gap: .35rem; padding: .55rem .8rem; border-bottom: 1px solid rgba(255,255,255,.7); background: rgba(255,255,255,.35); }
.pa-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(30,46,73,.28); }
.pa-bar i:first-child { background: #E5736B; } .pa-bar i:nth-child(2) { background: #E8B84A; } .pa-bar i:nth-child(3) { background: #5BBF8C; }
.pa-bar span { margin-left: .5rem; font: 600 .72rem/1 ui-monospace, Menlo, monospace; color: var(--text-mute); letter-spacing: .02em; }
.page-art-inline { display: block; width: min(280px, 70%); height: auto; margin: 0 auto var(--sp-4); }
.page-art-inline--ok { width: 130px; margin-bottom: var(--sp-3); }
@media (min-width: 1000px) {
  .page-head--art > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
  .page-head--art > .wrap > * { grid-column: 1; }
  .page-head--art > .wrap > .page-art { grid-column: 2; grid-row: 1 / span 30; margin: 0; align-self: center; }
}
.pa-g { transform-box: fill-box; transform-origin: center; }
.pa-pop   { opacity: 0; animation: pa-pop 10s ease-in-out infinite; }
.pa-fade  { animation: pa-glow 10s ease-in-out infinite; }
.pa-glow  { opacity: 0; animation: pa-glow 4.5s ease-in-out infinite; }
.pa-num   { animation: pa-numc 9s ease-in-out infinite; }
.pa-fly   { opacity: 0; animation: pa-fly 4.5s ease-in-out infinite; }
.pa-ping  { opacity: 0; animation: pa-ping 3s ease-out infinite; }
.pa-lift  { animation: pa-lift 6.4s ease-in-out infinite; }
.pa-spin  { animation: pa-spin 9s linear infinite; }
.pa-scan  { opacity: 0; animation: pa-scan 4.5s ease-in-out infinite; }
.pa-blink { animation: pa-blink 2s ease-in-out infinite; }
.pa-bar2  { animation: pa-barw 2.8s ease-in-out infinite; }
.pa-dash  { animation: pa-dashm 14s linear infinite; }
.pa-draw  { stroke-dasharray: 100; animation: pa-draw 3.6s ease-in-out infinite; }
@keyframes pa-pop  { 0% { opacity: 0; transform: scale(var(--pop)); } 7% { opacity: 1; transform: scale(1); } 76% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes pa-glow { 0%, 100% { opacity: 0; } 12%, 30% { opacity: 1; } 48% { opacity: 0; } }
@keyframes pa-numc { 0%, 100% { fill: #0B5C87; } 12%, 30% { fill: #fff; } 48% { fill: #0B5C87; } }
@keyframes pa-fly  { 0% { opacity: 0; transform: translate(0,0); } 12% { opacity: 1; } 62% { opacity: 1; transform: translate(var(--dx), var(--dy)); } 78%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); } }
@keyframes pa-ping { 0% { opacity: .75; transform: scale(1); } 100% { opacity: 0; transform: scale(var(--sc)); } }
@keyframes pa-lift { 0%, 28%, 100% { transform: translateY(0); } 12% { transform: translateY(var(--lift)); } }
@keyframes pa-spin { to { transform: rotate(var(--spin)); } }
@keyframes pa-scan { 0% { opacity: 0; transform: translateY(0); } 10%, 85% { opacity: 1; } 90% { transform: translateY(var(--scan)); } 100% { opacity: 0; transform: translateY(var(--scan)); } }
@keyframes pa-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes pa-barw { 0%, 100% { transform: scaleX(.25); } 50% { transform: scaleX(1); } }
@keyframes pa-dashm { to { stroke-dashoffset: -100; } }
@keyframes pa-draw { 0% { stroke-dashoffset: 100; } 35%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  /* decorative page art stays alive, but as slow fades: nothing travels, scales or spins */
  .page-art, .page-art-inline { --dx: 0px; --dy: 0px; --lift: 0px; --spin: 0deg; --pop: 1; --sc: 1; --scan: 0px; }
  .pa-dash { animation: none; } .pa-bar2 { animation-name: pa-blink; }
}
.pa-spin, .pa-ping { transform-box: view-box; }

/* ---------- 31. Scroll cues: progress bar, back-to-top ---------- */
.scroll-prog { position: fixed; z-index: 200; top: 0; left: 0; right: 0; height: 3px; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, #26A9E1, #6F7FDB 60%, #B07BD8); box-shadow: 0 0 10px rgba(38,169,225,.6); pointer-events: none; }
.to-top { position: fixed; z-index: 150; right: clamp(.9rem, 2.5vw, 1.75rem); bottom: clamp(.9rem, 2.5vw, 1.75rem); width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 14px; border: 1px solid rgba(255,255,255,.9); cursor: pointer; color: var(--blue-ink);
  background: var(--glass-2); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--sh-md), inset 0 1px 0 var(--glass-hi); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .3s ease, transform .3s ease; }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { transform: translateY(-3px); }
.to-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bg-orbs { will-change: transform; }
@media print { .scroll-prog, .to-top { display: none; } }

/* ---------- 31. Floating back / top buttons ---------- */
.fab-wrap { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; display: flex; flex-direction: column; gap: .6rem; align-items: flex-end;
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
.fab-wrap.is-on { opacity: 1; transform: none; pointer-events: auto; }
.fab {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 1rem 0 .8rem; border-radius: 100px;
  font: 700 .84rem/1 var(--font, Inter, system-ui, sans-serif); color: var(--text); cursor: pointer; text-decoration: none;
  background: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.95);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 8px 24px rgba(30,50,90,.22), inset 0 1px 0 #fff;
  transition: transform .2s ease, background .2s ease;
}
.fab svg { width: 18px; height: 18px; fill: none; stroke: var(--blue-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fab:hover { background: #fff; transform: translateY(-2px); }
.fab--up { background: linear-gradient(103deg, #084766, #0B5C87 55%, #0F74A6); color: #fff; border-color: rgba(255,255,255,.4); }
.fab--up svg { stroke: #fff; }
.fab--up:hover { background: linear-gradient(103deg, #084766, #0B5C87 55%, #0F74A6); }
.fab:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
@media (max-width: 620px) { .fab span { display: none; } .fab { padding: 0 .8rem; } }
@media print { .fab-wrap { display: none; } }

/* ---------- 32. Window frames: every card is a frosted window, like the reference ----------
   Three-dot title controls on each card, a brighter 1.5px rim, and on wide screens the card
   grids are staggered so the page reads as a collage of overlapping windows, not a flat table. */
.card::after {
  content: ""; position: absolute; top: 12px; right: 14px; width: 40px; height: 8px; pointer-events: none;
  background:
    radial-gradient(circle 3.5px at 4px 4px, rgba(255,255,255,.95) 98%, transparent),
    radial-gradient(circle 3.5px at 20px 4px, rgba(255,255,255,.75) 98%, transparent),
    radial-gradient(circle 3.5px at 36px 4px, rgba(255,255,255,.55) 98%, transparent);
  filter: drop-shadow(0 0 1px rgba(30,50,90,.45));
}
.card, .panel, .cta { border-width: 1.5px; border-color: rgba(255,255,255,.92); }
/* floating mini-windows overlapping the hero topology */
.float-win { position: absolute; z-index: 3; width: 168px; border-radius: 14px; overflow: hidden; pointer-events: none;
  background: rgba(255,255,255,.62); border: 1.5px solid rgba(255,255,255,.92);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: 0 12px 34px rgba(30,50,90,.22), inset 0 1px 0 var(--glass-hi); animation: fw-float 7s ease-in-out infinite; }
.float-win--a { left: -2%; bottom: 9%; }
.float-win--b { right: -2%; top: 5%; width: 188px; animation-delay: -3.5s; }
.fw-bar { display: flex; align-items: center; gap: 4px; padding: .38rem .6rem; background: rgba(255,255,255,.4); border-bottom: 1px solid rgba(255,255,255,.7); }
.fw-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(30,46,73,.3); }
.fw-bar span { margin-left: auto; font: 600 .62rem/1 ui-monospace, Menlo, monospace; color: var(--text-mute); }
.fw-body { padding: .55rem .7rem .65rem; font-size: .78rem; font-weight: 650; color: var(--text); display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.fw-body small { flex-basis: 100%; font-size: .68rem; font-weight: 500; color: var(--text-mute); }
.fw-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--g-ok, #1F8A5F); box-shadow: 0 0 0 0 rgba(31,138,95,.5); animation: fw-pulse 2.2s ease-out infinite; }
.fw-dot--amber { background: #B7791F; box-shadow: 0 0 0 0 rgba(183,121,31,.5); }
@keyframes fw-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes fw-pulse { 0% { box-shadow: 0 0 0 0 rgba(31,138,95,.5); } 100% { box-shadow: 0 0 0 9px rgba(31,138,95,0); } }
@media (max-width: 820px) { .float-win { display: none; } }
@media (prefers-reduced-motion: reduce) { .float-win { animation: none; } .fw-dot { animation: none; } }
@media print { .float-win { display: none; } }


/* ---------- 33. The page as one big frosted window on a white backdrop ----------
   The gradient lives inside a rounded frame, as in the reference; the area around it is
   plain off-white. Every sub-box in a grid is forced to the same width and height. */
.frame {
  position: relative; isolation: isolate; overflow: clip; max-width: 1360px;
  margin: clamp(8px, 1.8vw, 26px) auto; border-radius: clamp(18px, 2.4vw, 30px);
  border: 1.5px solid rgba(255,255,255,.95);
  box-shadow: 0 30px 80px rgba(30,50,90,.20), 0 2px 8px rgba(30,50,90,.08);
}
.grid { grid-auto-rows: 1fr; align-items: stretch; }
.kpis { grid-auto-rows: 1fr; }
.split { align-items: stretch !important; }
.grid > .card, .grid > .card--flat { height: 100%; }
@media (max-width: 620px) { .grid { grid-auto-rows: auto; } }