/* MR1 / BMR design system. Owned by MR1-002. Page tasks add assets/css/page-NAME.css, never edit this file. */

/* ---------- 1a. Fonts (self-hosted, swap) ---------- */
@font-face{font-family:Manrope;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/manrope-latin-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Manrope;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/manrope-cyrillic-700.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/manrope-latin-800.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Manrope;font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/manrope-cyrillic-800.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-cyrillic-400.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-latin-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-cyrillic-500.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-latin-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-cyrillic-600.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

/* Metric-adjusted fallbacks (limit CLS on font swap): size-adjust = web/Arial width per script, measured; ascent/descent from the font files.
   Manrope values are measured letters-only with 'locl' OFF (see 1g2: the standard Cyrillic forms are ~5% narrower than the lang=bg localized ones), spaces separately. Re-measure if that rule changes. */
@font-face{font-family:"Inter Fallback";font-weight:400 500;src:local(Arial),local("Liberation Sans");size-adjust:106.1%;ascent-override:91.3%;descent-override:22.7%;line-gap-override:0%;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter Fallback";font-weight:400 500;src:local(Arial),local("Liberation Sans");size-adjust:107.0%;ascent-override:90.5%;descent-override:22.5%;line-gap-override:0%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Fallback";font-weight:600;src:local("Arial Bold"),local(Arial-BoldMT),local("Liberation Sans Bold");size-adjust:100.9%;ascent-override:96.0%;descent-override:23.9%;line-gap-override:0%;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter Fallback";font-weight:600;src:local("Arial Bold"),local(Arial-BoldMT),local("Liberation Sans Bold");size-adjust:101.6%;ascent-override:95.4%;descent-override:23.7%;line-gap-override:0%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope Fallback";font-weight:800;src:local("Arial Bold"),local(Arial-BoldMT),local("Liberation Sans Bold");size-adjust:103.5%;ascent-override:103.0%;descent-override:29.0%;line-gap-override:0%;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Manrope Fallback";font-weight:800;src:local("Arial Bold"),local(Arial-BoldMT),local("Liberation Sans Bold");size-adjust:104.6%;ascent-override:101.9%;descent-override:28.6%;line-gap-override:0%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope Fallback";font-weight:700;src:local("Arial Bold"),local(Arial-BoldMT),local("Liberation Sans Bold");size-adjust:100.9%;ascent-override:105.7%;descent-override:29.7%;line-gap-override:0%;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Manrope Fallback";font-weight:700;src:local("Arial Bold"),local(Arial-BoldMT),local("Liberation Sans Bold");size-adjust:102.9%;ascent-override:103.6%;descent-override:29.1%;line-gap-override:0%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Space gets its own faces (declared last, so they win for U+0020): Manrope's space is 0.20em, Arial Bold's 0.278em (ratio 0.72), so one size-adjust per script cannot fit both letters and spaces. Without this, the cyrillic and latin web files arrive at different times and the in-between state wraps differently from both ends. */
@font-face{font-family:"Manrope Fallback";font-weight:800;src:local("Arial Bold"),local(Arial-BoldMT),local("Liberation Sans Bold");size-adjust:72%;ascent-override:148.1%;descent-override:41.6%;line-gap-override:0%;unicode-range:U+0020,U+00A0}
@font-face{font-family:"Manrope Fallback";font-weight:700;src:local("Arial Bold"),local(Arial-BoldMT),local("Liberation Sans Bold");size-adjust:72%;ascent-override:148.0%;descent-override:41.6%;line-gap-override:0%;unicode-range:U+0020,U+00A0}

/* ---------- 1b / 1f. Tokens (BRIEF 5.1 exact + 5.5 motion tokens) ---------- */
:root{
  --c-navy-900:#0B1F3A;   /* headings, footer background */
  --c-navy-700:#1B3358;   /* body text */
  --c-slate-500:#5B6B82;  /* secondary text, captions */
  --c-blue-600:#1559C7;   /* primary brand blue: buttons, links (matches the blue waste containers) */
  --c-blue-700:#0F46A0;   /* button hover */
  --c-blue-50:#EEF4FD;    /* light blue section background */
  --c-green-600:#2F9E5B;  /* eco accent: check icons, "eco" badges (matches the logo hill) */
  --c-green-50:#EAF6EF;
  --c-sun-400:#F4B400;    /* tiny accents only: logo sun, 1 highlight per page max */
  --c-white:#FFFFFF;
  --c-gray-50:#F6F8FB;    /* alternate section background */
  --c-gray-200:#E2E8F0;   /* borders, dividers */
  --radius-sm:8px; --radius-md:14px; --radius-lg:24px;
  --shadow-card:0 1px 2px rgba(11,31,58,.06),0 8px 24px rgba(11,31,58,.08);
  --container:1200px;
}
:root{
  --c-navy-950:#060F1F; --c-glow:#3B82F6;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-1:200ms; --dur-2:450ms; --dur-3:900ms;
  --header-h:72px;
  --c-green-700:#1E7B45;  /* text-safe green (green-600 is 3.5:1 on white) */
  --f-body:Inter,"Inter Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-head:Manrope,"Manrope Fallback",Inter,"Inter Fallback",system-ui,sans-serif;
  --c-error:#B42318; --c-field:#8190A6; --c-sky:#8DB8FF; /* sky = text-safe blue on dark */
  --ring-inner:0 0 0 2px var(--c-navy-900); /* navy half of the two-colour focus ring; fills the 2px outline-offset gap */
}

/* ---------- 1c. Reset + base typography ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:88px;scrollbar-gutter:stable}
body{font:400 1.0625rem/1.65 var(--f-body);color:var(--c-navy-700);background:var(--c-white);text-align:left;-webkit-font-smoothing:antialiased}
img,picture,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
h1,h2,h3,h4{font-family:var(--f-head);color:var(--c-navy-900);letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(2.25rem,1.6rem + 2.6vw,3.75rem);font-weight:800;line-height:1.08}
h2{font-size:clamp(1.75rem,1.4rem + 1.4vw,2.5rem);font-weight:800;line-height:1.15}
h3{font-size:1.25rem;font-weight:700;line-height:1.3}
h4{font-size:1.0625rem;font-weight:700;line-height:1.35}
p{max-width:68ch;text-wrap:pretty}
p+p{margin-top:1em}
small,.small{font-size:.875rem}
strong,b{font-weight:600}
em,i,cite,address,dfn,var{font-style:normal}
ul,ol{padding-left:1.25em}
a{color:var(--c-blue-600);text-decoration:underline;text-underline-offset:3px}
a:hover{color:var(--c-blue-700)}
::selection{background:var(--c-blue-50)}
/* Focus ring (BRIEF 5.4 yellow ring + navy inner ring, WCAG 1.4.11 / 2.4.11 two-colour technique).
   Yellow alone is 1.85:1 on white. Navy inner ring: 16.5:1 on white, 15.5:1 on gray-50, 14.9:1 on blue-50.
   Yellow outer ring: 3.46:1 on blue-600, 8.95:1 on navy-900, 10.4:1 on navy-950. Ring vs ring is 8.95:1,
   so on every surface at least one ring is >= 3:1. Rules that set their own box-shadow must repeat var(--ring-inner). */
:focus-visible{outline:3px solid var(--c-sun-400);outline-offset:2px;box-shadow:var(--ring-inner)}
main:focus{outline:none;box-shadow:none}
.icon{display:inline-block;width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}

/* ---------- 1d. Layout utilities ---------- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:20px}
.section{padding-block:64px}
.section--gray{background:var(--c-gray-50)}
.section--blue{background:var(--c-blue-50)}
.grid-2{display:grid;gap:32px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.stack{display:flex;flex-direction:column;gap:16px}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:fixed;top:12px;left:12px;z-index:1000;padding:10px 20px;border-radius:999px;background:#fff;color:var(--c-navy-900);font-weight:600;text-decoration:none;box-shadow:0 8px 24px rgba(11,31,58,.25);transform:translateY(-200%)}
.skip-link:focus{transform:none}
.skip-link:focus-visible{box-shadow:var(--ring-inner),0 8px 24px rgba(11,31,58,.25)}
@media (min-width:768px){.container{padding-inline:32px}}
@media (min-width:1024px){.section{padding-block:104px}.grid-2{grid-template-columns:1fr 1fr;gap:48px;align-items:center}}

/* ---------- 1e. Components ---------- */
/* Buttons (+E12 shine / arrow nudge / press) */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border:2px solid transparent;border-radius:var(--radius-sm);font:600 1rem/1.2 var(--f-body);text-decoration:none;text-align:center;cursor:pointer;transition:background-color var(--dur-1),border-color var(--dur-1),color var(--dur-1),transform var(--dur-1) var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn .icon{width:1.125em;height:1.125em;transition:transform var(--dur-1) var(--ease-out)}
.btn:hover .icon{transform:translateX(4px)}
.btn--primary{background:var(--c-blue-600);color:#fff}
.btn--primary:hover{background:var(--c-blue-700);color:#fff}
.btn--primary::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgb(255 255 255/.4) 50%,transparent 70%);transform:translateX(-120%);transition:transform 700ms var(--ease-out)}
.btn--primary:hover::after{transform:translateX(120%)}
.btn--secondary{background:transparent;border-color:var(--c-navy-900);color:var(--c-navy-900)}
.btn--secondary:hover{background:var(--c-navy-900);color:#fff}
.btn--ghost{background:transparent;border-color:rgb(255 255 255/.35);color:#fff}
.btn--ghost:hover{background:rgb(255 255 255/.12);border-color:#fff;color:#fff}
.btn--lg{min-height:56px;padding:0 32px;font-size:1.0625rem}

/* Cards */
.card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:28px}
.card__icon,.tile__icon{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:var(--c-blue-50);color:var(--c-blue-600);margin-bottom:20px}
.card__title{font-size:1.25rem;margin-bottom:8px}
.card__text{color:var(--c-slate-500)}

/* Stats */
.stats-section{position:relative;z-index:2;padding-bottom:48px}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 16px;padding:28px 20px;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-card),0 30px 60px -30px rgba(11,31,58,.25)}
.stats--overlap{margin-top:-64px;position:relative;z-index:2}
.stat{text-align:left}
.stat__value{display:block;white-space:nowrap;font:800 clamp(1.5rem,.6rem + 2.6vw,2.5rem)/1.1 var(--f-head);color:var(--c-blue-600);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat__label{display:block;margin-top:6px;font-size:.875rem;line-height:1.4;color:var(--c-slate-500)}
@media (min-width:768px){.stats{padding:36px 40px}}
@media (min-width:1024px){.stats{grid-template-columns:repeat(4,1fr);gap:0}.stat{padding-inline:28px}.stat+.stat{border-left:1px solid var(--c-gray-200)}.stat:first-child{padding-left:0}}

/* Check list */
.check-list{list-style:none;padding:0;display:grid;gap:12px}
.check-list li{position:relative;padding-left:34px}
.check-list li::before{content:"";position:absolute;left:0;top:.2em;width:24px;height:24px;background:var(--c-green-600);-webkit-mask:url(/assets/icons/check.svg) center/contain no-repeat;mask:url(/assets/icons/check.svg) center/contain no-repeat}

/* Badges */
.badges{display:flex;flex-wrap:wrap;gap:8px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:var(--c-blue-50);color:var(--c-blue-700);font:600 .8125rem/1.3 var(--f-body)}
.badge--green{background:var(--c-green-50);color:var(--c-green-700)}
.badge--outline{background:transparent;border:1px solid var(--c-gray-200);color:var(--c-navy-700)}
.badge .icon{width:1em;height:1em}

/* Section head */
.section-head{max-width:720px;margin-bottom:48px}
.eyebrow{display:block;margin-bottom:12px;text-transform:uppercase;letter-spacing:.08em;font:600 .8125rem/1.3 var(--f-body);color:var(--c-blue-600)}
.lead{font-size:1.1875rem;line-height:1.6;color:var(--c-slate-500)}
.section-head .lead{margin-top:16px}

/* CTA band */
.cta-band{padding-block:56px;background:radial-gradient(120% 140% at 100% 0,var(--c-blue-700),transparent 60%),var(--c-blue-600);color:#fff}
.cta-band__inner{display:flex;flex-direction:column;gap:24px}
.cta-band h2{color:#fff}
.cta-band p{color:rgb(255 255 255/.88)}
.cta-band a:not(.btn){color:#fff}
.cta-band .btn--primary{background:#fff;color:var(--c-blue-700)}
.cta-band .btn--primary:hover{background:var(--c-blue-50);color:var(--c-blue-700)}
.cta-band .btn--primary::after{background:linear-gradient(105deg,transparent 30%,rgb(21 89 199/.18) 50%,transparent 70%)}
@media (min-width:768px){.cta-band__inner{flex-direction:row;align-items:center;justify-content:space-between;gap:48px}}
@media (min-width:1024px){.cta-band{padding-block:80px}}

/* Steps */
.steps{list-style:none;padding:0;display:grid;gap:36px}
.step{position:relative;padding-left:72px}
.step::before{content:"";position:absolute;left:23px;top:48px;bottom:-36px;width:2px;background:var(--c-gray-200)}
.step:last-child::before{display:none}
.step__num{position:absolute;left:0;top:0;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--c-blue-600);color:#fff;font:800 1.125rem/1 var(--f-head);box-shadow:0 0 0 6px var(--c-blue-50)}
.step h3{font-size:1.125rem;margin-bottom:6px}
.step p{color:var(--c-slate-500)}
@media (min-width:1024px){.steps{grid-template-columns:repeat(4,1fr);gap:32px}.step{padding:72px 0 0}.step::before{left:48px;right:-32px;top:23px;bottom:auto;width:auto;height:2px}}

/* Spec table */
.spec-table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-card)}
.spec-table th,.spec-table td{padding:14px 16px;text-align:left;vertical-align:top;overflow-wrap:anywhere}
@media (min-width:768px){.spec-table th,.spec-table td{padding:16px 20px}}
.spec-table th{width:42%;font-weight:600;color:var(--c-navy-900)}
.spec-table tr:nth-child(odd){background:var(--c-gray-50)}
.spec-table tr:nth-child(even){background:#fff}

/* Gallery + lightbox (native <dialog>, created/driven by main.js) */
.gallery{display:grid;grid-template-columns:1fr;gap:16px}
.gallery a{display:block;position:relative;overflow:hidden;border-radius:var(--radius-md);aspect-ratio:5/4;background:var(--c-gray-50)}
.gallery picture{display:block;height:100%}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease-out)}
.gallery a:hover img{transform:scale(1.03)}
@media (min-width:480px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.gallery{grid-template-columns:repeat(3,1fr);gap:24px}}
.lightbox{width:100%;height:100%;max-width:none;max-height:none;padding:0;border:0;background:transparent;color:#fff;overflow:hidden}
.lightbox[open]{display:grid;place-items:center}
.lightbox::backdrop{background:rgb(6 15 31/.92)}
.lightbox__fig{display:grid;justify-items:center;gap:12px;max-width:min(92vw,1200px);margin:0}
.lightbox__img{width:auto;max-width:100%;max-height:78vh;object-fit:contain;border-radius:var(--radius-md)}
.lightbox__cap{min-height:1.5em;font-size:.9375rem;color:rgb(255 255 255/.85);text-align:center}
.lightbox__btn{position:fixed;display:grid;place-items:center;width:48px;height:48px;border:1px solid rgb(255 255 255/.25);border-radius:50%;background:rgb(255 255 255/.12);color:#fff;cursor:pointer}
.lightbox__btn:hover{background:rgb(255 255 255/.25)}
.lightbox__close{top:16px;right:16px}
.lightbox__prev,.lightbox__next{top:50%;margin-top:-24px}
.lightbox__prev{left:16px}.lightbox__next{right:16px}

/* Header + E11 states */
.site-header{--hd-fg:var(--c-navy-900);--hd-fg2:var(--c-slate-500);--logo-ink:#0B1F3A;--logo-sub:#5B6B82;--logo-tile:#0B1F3A;--logo-tile-line:transparent;position:sticky;top:0;z-index:100;height:var(--header-h);border-bottom:1px solid transparent;background:transparent;color:var(--hd-fg);transition:transform 300ms var(--ease-in-out),background-color var(--dur-2),box-shadow var(--dur-2),border-color var(--dur-2)}
.site-header__inner{display:flex;align-items:center;gap:16px;height:100%}
.site-header .logo{display:block;height:40px;margin-right:auto;color:inherit}
.logo{display:block}
.logo svg{display:block;height:100%;width:auto}
.logo__tile{fill:var(--logo-tile,#0B1F3A);stroke:var(--logo-tile-line,transparent);stroke-width:1.4}
.logo__ink{fill:var(--logo-ink);font-family:var(--f-head)}.logo__sub{fill:var(--logo-sub);font-family:var(--f-body)}
.site-header .btn{display:none;min-height:44px;padding:0 20px;font-size:.9375rem}
.site-nav{display:var(--boot-nav-display,none)} /* var: only the boot fallback below sets it (an animation never starts on a display:none element) */
.site-nav ul{display:flex;gap:2px;list-style:none;padding:0}
.site-nav a{position:relative;display:block;padding:10px 12px;font-size:.9375rem;font-weight:500;color:var(--hd-fg);text-decoration:none}
.site-nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:2px;background:var(--c-blue-600);transform:scaleX(0);transition:transform var(--dur-2) var(--ease-out)}
.site-nav a:hover::after,.site-nav a[aria-current=page]::after{transform:scaleX(1)}
.site-nav a:hover{color:var(--hd-fg)}
.site-nav a[aria-current=page]{font-weight:600}
.lang-switch{display:flex;align-items:center;gap:6px;font-size:.875rem;color:var(--hd-fg2)}
.lang-switch strong{font-weight:800;color:var(--hd-fg)}
.lang-switch a{color:var(--hd-fg2);font-weight:500;text-decoration:none}
.lang-switch a:hover{color:var(--c-blue-600)}
.nav-toggle,.icon-btn{display:grid;flex:none;place-items:center;width:44px;height:44px;border:0;border-radius:10px;background:transparent;color:var(--hd-fg,var(--c-navy-900));cursor:pointer}
.nav-toggle .icon,.icon-btn .icon{width:26px;height:26px}
.site-header.is-scrolled{background:rgb(255 255 255/.92);border-bottom-color:var(--c-gray-200);box-shadow:0 4px 20px rgba(11,31,58,.06)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.site-header.is-scrolled{background:rgb(255 255 255/.7);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%)}}
.site-header.is-hidden{transform:translateY(-100%)}
body.has-dark-hero .site-header{margin-bottom:calc(var(--header-h)*-1)}
body.has-dark-hero .site-header:not(.is-scrolled){--hd-fg:#fff;--hd-fg2:rgb(255 255 255/.72);--logo-ink:#fff;--logo-sub:rgb(255 255 255/.72);--logo-tile:#1B3358;--logo-tile-line:rgb(255 255 255/.18)}
body.has-dark-hero .site-header:not(.is-scrolled) .site-nav a:hover,body.has-dark-hero .site-header:not(.is-scrolled) .lang-switch a:hover{color:#fff}
.mobile-panel{position:fixed;inset:0;z-index:200;visibility:hidden;background:rgb(6 15 31/0);transition:background-color var(--dur-2),visibility 0s var(--dur-2)}
.mobile-panel.is-open{visibility:visible;background:rgb(6 15 31/.55);transition:background-color var(--dur-2),visibility 0s}
.mobile-panel__inner{position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;gap:24px;width:min(88vw,380px);padding:14px 24px 32px;overflow-y:auto;background:#fff;transform:translateX(100%);transition:transform var(--dur-2) var(--ease-out)}
.mobile-panel.is-open .mobile-panel__inner{transform:none}
.mobile-panel__top{display:flex;align-items:center;justify-content:space-between;color:var(--c-navy-900)}
.mobile-panel nav a{display:block;padding:16px 0;border-bottom:1px solid var(--c-gray-200);font:700 1.25rem/1.2 var(--f-head);color:var(--c-navy-900);text-decoration:none}
.mobile-panel nav a[aria-current=page]{color:var(--c-blue-600)}
html.menu-open,html.lb-open{overflow:hidden}
.scroll-progress{position:fixed;top:0;left:0;right:0;z-index:101;height:3px;background:linear-gradient(90deg,var(--c-blue-600),var(--c-glow));transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
@supports (animation-timeline:scroll()){.scroll-progress{animation:scroll-progress linear both;animation-timeline:scroll(root block)}}
@keyframes scroll-progress{to{transform:scaleX(1)}}
@media (max-width:359.98px){.site-header__inner{gap:8px}.site-header .logo{height:34px}} /* 320px: logo + BG|EN + toggle must fit in 280px */
@media (min-width:768px){.site-header .btn{display:inline-flex}}
@media (min-width:1024px){.site-header__inner{gap:20px}.site-nav{display:block}.nav-toggle{display:none}}

/* No JS: static solid header at all widths; below 1024px also hide the dead toggle and wrap the nav. Never matches when scripts run. */
html:not(.js) .site-header{position:relative;background:#fff;border-bottom-color:var(--c-gray-200)}
html:not(.js) body.has-dark-hero .site-header{margin-bottom:0;background:var(--c-navy-950);border-bottom-color:rgb(255 255 255/.12)}
@media (max-width:1023.98px){
  html:not(.js) .nav-toggle{display:none}
  html:not(.js) .site-header{height:auto;padding-block:8px}
  html:not(.js) .site-header__inner{height:auto;flex-wrap:wrap;row-gap:4px}
  html:not(.js) .site-header .btn{display:inline-flex}
  html:not(.js) .site-nav{display:block;order:9;flex:1 0 100%}
  html:not(.js) .site-nav ul{flex-wrap:wrap}
  html:not(.js) .site-nav a{padding:8px 10px}
}

/* Boot fallback. /assets/js/js-flag.js, a one-line render-blocking head script, adds .js before first paint so the header
   never paints in its no-JS layout and then jumps (CLS 0.23). main.js adds .js again. If main.js then throws or fails to load,
   .js alone would leave the nav hidden, the toggle dead and the header transparent. main.js adds .js-ready once menu() and
   header() have run.
   Without it, 3s after style resolution (not after load) the header gets a solid background, the dead toggle is hidden and the
   nav is shown. The 3s timer can fire while a slow main.js is still downloading, and js-ready then removes it again, so the
   fallback must be layout-neutral (no size, margin or flow change): it changes the header background and toggle visibility,
   switches the header from position:sticky to relative (both are in flow with the same 72px box and the dark-hero overlap
   margin, so nothing moves) and takes the nav out of flow as a panel hanging below the header (position:absolute). Nothing
   moves when it appears or when a late js-ready cancels it. Visible side effects while the fallback is active: the header and
   its nav panel are no longer sticky, so they scroll out of view with the page (staying sticky would pin the panel over the
   content permanently), and the panel covers the top of the page until then. Elements that are display:none cannot run an animation, so html animates a custom
   property that .site-nav reads as its display. The property is registered (@property, keyword syntax) because WebKit does not
   animate unregistered custom properties. !important keeps the animations alive under the reduced-motion block, which
   sets animation:none on everything; they are instant state flips, not motion. */
html.js:not(.js-ready){animation:boot-vars 0s linear 3s forwards!important}
html.js:not(.js-ready) .site-header{animation:boot-hdr 0s linear 3s forwards!important}
html.js:not(.js-ready) body.has-dark-hero .site-header{animation-name:boot-hdr-dark!important}
@property --boot-nav-display{syntax:"none | block";inherits:true;initial-value:none}
@keyframes boot-vars{to{--boot-nav-display:block}}
@keyframes boot-hdr{to{position:relative;background-color:#fff;border-bottom-color:var(--c-gray-200)}}
@keyframes boot-hdr-dark{to{position:relative;background-color:var(--c-navy-950);border-bottom-color:rgb(255 255 255/.12)}}
@media (max-width:1023.98px){
  html.js:not(.js-ready) .nav-toggle{animation:boot-toggle 0s linear 3s forwards!important} /* visibility, not display: keeps its 44px so the BG|EN switch does not move */
  html.js:not(.js-ready) .site-nav{position:absolute;top:100%;left:0;right:0;padding:4px 12px 8px;background:#fff;border-bottom:1px solid var(--c-gray-200);box-shadow:0 8px 20px rgba(11,31,58,.08)} /* static: invisible until boot-vars unhides it */
  html.js:not(.js-ready) body.has-dark-hero .site-nav{background:var(--c-navy-950);border-bottom-color:rgb(255 255 255/.12)}
  html.js:not(.js-ready) .site-nav ul{flex-wrap:wrap}
  html.js:not(.js-ready) .site-nav a{padding:8px 10px}
}
@media (max-width:1023.98px) and (min-width:768px){html.js:not(.js-ready) .site-nav{padding-inline:20px}}
@keyframes boot-toggle{to{visibility:hidden}}

/* Footer */
.site-footer{padding-top:72px;background:var(--c-navy-900);color:rgb(255 255 255/.75);font-size:.9375rem}
.site-footer__grid{display:grid;grid-template-columns:1fr;gap:40px}
.site-footer__title{margin-bottom:16px;font:700 .8125rem/1.3 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:#fff}
.site-footer .logo{height:44px;margin-bottom:16px;--logo-ink:#fff;--logo-sub:rgb(255 255 255/.72);--logo-tile:#1B3358;--logo-tile-line:rgb(255 255 255/.18)}
.site-footer p{max-width:36ch}
.site-footer ul{list-style:none;padding:0;display:grid;gap:10px}
.site-footer a{color:rgb(255 255 255/.75);text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer__iso{margin-top:16px;font-weight:600;color:#fff;font-size:.875rem}
.site-footer__contact li{display:flex;gap:12px;align-items:flex-start}
.site-footer__contact .icon{margin-top:3px;color:var(--c-sky)}
.site-footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:56px;padding-block:24px;border-top:1px solid rgb(255 255 255/.12);font-size:.875rem;color:rgb(255 255 255/.65)}
@media (min-width:768px){.site-footer__grid{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.site-footer__grid{grid-template-columns:1.4fr 1fr 1.3fr 1.1fr;gap:48px}}

/* Hero (home) + page-hero (inner pages) + breadcrumb */
.hero,.page-hero,.has-mesh{position:relative;isolation:isolate;overflow:hidden}
.hero{padding:calc(var(--header-h) + 40px) 0 128px;background:var(--c-navy-950)}
.hero__inner{display:grid;gap:56px}
.hero__lead{margin-top:20px;font-size:1.1875rem;color:rgb(255 255 255/.75)}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin:32px 0 28px}
.hero__media{position:relative;width:100%;max-width:440px;margin-inline:auto}
.hero__frame{position:relative;overflow:hidden;border-radius:var(--radius-lg);background:radial-gradient(circle at 50% 38%,var(--c-blue-50),#fff 70%);border:1px solid rgb(255 255 255/.12);box-shadow:0 40px 120px -20px rgb(59 130 246/.55)}
.hero__frame img{width:100%;height:auto}
.hero__chip{position:absolute;left:-10px;bottom:28px;z-index:3;pointer-events:none}
.hero__chip--top{left:auto;right:-10px;bottom:auto;top:12%}
.hero__chip--side{left:auto;right:-10px;bottom:30%}
.page-hero{padding:calc(var(--header-h) + 40px) 0 56px;background:var(--c-navy-950)}
.page-hero .lead{margin-top:16px}
.breadcrumb{display:flex;flex-wrap:wrap;gap:6px 8px;list-style:none;padding:0;margin-bottom:20px;font-size:.875rem;color:rgb(255 255 255/.7)}
.breadcrumb li+li::before{content:"/";margin-right:8px;opacity:.5}
.breadcrumb a{color:rgb(255 255 255/.85);text-decoration:none}
.breadcrumb a:hover{color:#fff;text-decoration:underline}
.breadcrumb [aria-current=page]{color:#fff}
@media (min-width:1024px){.hero{display:grid;align-items:center;min-height:100svh;padding-bottom:160px}.hero__inner{grid-template-columns:1.1fr .9fr;align-items:center;gap:64px}.page-hero{padding:calc(var(--header-h) + 72px) 0 88px}}

/* Tiles */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:24px 20px;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-card);font:700 1.0625rem/1.3 var(--f-head);overflow-wrap:break-word;color:var(--c-navy-900);text-decoration:none;transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2)}
a.tile:hover{transform:translateY(-4px);color:var(--c-navy-900)}
.tile:focus-visible{box-shadow:var(--ring-inner),var(--shadow-card)}
/* 360-479px: 20px padding leaves 112px, the longest BG word (Лаборатории) is 113.5px. <360px: one column. */
@media (max-width:479.98px){.tile{padding:24px 16px}}
@media (max-width:359.98px){.tiles{grid-template-columns:1fr}}
@media (min-width:1024px){.tiles{grid-template-columns:repeat(4,1fr);gap:24px}.tile{padding:28px}}

/* Forms */
.form{display:grid;gap:20px}
.field{display:grid;gap:8px}
.field__label{font-size:.9375rem;font-weight:600;color:var(--c-navy-900)}
.field__label .req{color:var(--c-error)}
.field__input{width:100%;min-height:48px;padding:12px 16px;border:1.5px solid var(--c-field);border-radius:var(--radius-sm);background:#fff;color:var(--c-navy-900);transition:border-color var(--dur-1),box-shadow var(--dur-1)}
.field__input:hover{border-color:var(--c-navy-700)}
.field__input:focus-visible{border-color:var(--c-blue-600);box-shadow:var(--ring-inner)}
.field__input[aria-invalid=true]{border-color:var(--c-error)}
textarea.field__input{min-height:140px;resize:vertical}
select.field__input{appearance:none;-webkit-appearance:none;padding-right:44px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B3358' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center/20px no-repeat}
.field__hint{font-size:.875rem;color:var(--c-slate-500)}
.field__error{font-size:.875rem;font-weight:500;color:var(--c-error)}
.field--check{display:flex;align-items:flex-start;gap:12px}
.field--check input{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:24px;height:24px;margin:1px 0 0;border:1.5px solid var(--c-field);border-radius:6px;background:#fff;cursor:pointer;transition:background-color var(--dur-1),border-color var(--dur-1)}
.field--check input::after{content:"";position:absolute;inset:3px;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%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 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;transform:scale(0);transition:transform var(--dur-1) var(--ease-out)}
.field--check input:checked{background:var(--c-blue-600);border-color:var(--c-blue-600)}
.field--check input:checked::after{transform:scale(1)}
.field--check label{font-size:.9375rem}
.field--hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-alert{display:flex;gap:12px;align-items:flex-start;padding:16px 20px;border:1px solid;border-radius:var(--radius-md);font-weight:500}
.form-alert--success{background:var(--c-green-50);border-color:#9AD3B1;color:#17613A}
.form-alert--error{background:#FDECEA;border-color:#F4B4AE;color:#8A1C12}

/* ---------- 1f. Dark variant ---------- */
.section--dark{background:var(--c-navy-950);color:#fff}
:is(.section--dark,.hero,.page-hero) :is(h1,h2,h3,h4){color:#fff}
:is(.section--dark,.hero,.page-hero) :is(.lead,.card__text,.step p,.muted){color:rgb(255 255 255/.7)}
:is(.section--dark,.hero,.page-hero) .eyebrow{color:var(--c-sky)}
:is(.section--dark,.hero,.page-hero) a:not(.btn):not(.tile){color:var(--c-sky)}
:is(.section--dark,.hero,.page-hero) ::selection{background:rgb(59 130 246/.45);color:#fff}
.section--dark .card{background:rgb(255 255 255/.05);border:1px solid rgb(255 255 255/.1);box-shadow:none}
.section--dark .card__icon{background:rgb(59 130 246/.16);color:var(--c-sky)}
.section--dark .badge{background:rgb(255 255 255/.08);border:1px solid rgb(255 255 255/.14);color:#fff}
.section--dark .step::before{background:rgb(255 255 255/.15)}
.section--dark .step__num{box-shadow:0 0 0 6px rgb(59 130 246/.2)}
.section--dark .btn--secondary{border-color:rgb(255 255 255/.35);color:#fff}
.section--dark .btn--secondary:hover{background:rgb(255 255 255/.12);border-color:#fff;color:#fff}
.section--dark .stats .stat__label{color:var(--c-slate-500)}

/* ---------- 1g. Effects (CSS parts) ---------- */
/* E1 mesh */
.mesh{position:absolute;inset:-60px 0;z-index:-1;pointer-events:none}
/* Home hero only: the mesh box ends exactly at the hero's bottom edge (inset bottom 0), and its bottom 200px fades out, so the glow reaches the navy band
   below at full transparency whatever the hero height (short laptop viewports included). The blob offsets use --mh, a height that does NOT depend on
   the hero's own height, so the blobs do not move while the page streams in (CLS). --mh equals the old box height on desktop (hero min-height 100svh).
   Other .mesh uses (page-hero, has-mesh sections) keep the stretch-to-parent box above. */
.hero .mesh{--mh:calc(max(100svh,880px) + 120px);inset:-60px 0 0;-webkit-mask-image:linear-gradient(#000 calc(100% - 200px),transparent);mask-image:linear-gradient(#000 calc(100% - 200px),transparent)}
.hero .mesh__blob:nth-child(1){top:calc(var(--mh)*-.08)}
.hero .mesh__blob:nth-child(2){top:calc(var(--mh)*.18)}
.hero .mesh__blob:nth-child(3){--bw:clamp(280px,42vw,600px);bottom:auto;top:calc(var(--mh)*1.18 - var(--bw))}
.hero .mesh__blob:nth-child(4){top:calc(var(--mh)*-.14)}
.mesh::after{content:"";position:absolute;inset:0;background:url(/assets/img/noise.svg) 0 0/200px 200px}
.mesh__blob{position:absolute;aspect-ratio:1;width:clamp(280px,42vw,600px);border-radius:50%;background:var(--c-blue-600);filter:blur(80px);opacity:.38;animation:mesh-drift 24s ease-in-out infinite alternate}
.mesh__blob:nth-child(1){left:-12%;top:-8%}
.mesh__blob:nth-child(2){right:-10%;top:18%;background:var(--c-glow);opacity:.3;--dx:-70px;--dy:50px;animation-duration:28s}
.mesh__blob:nth-child(3){left:18%;bottom:-18%;background:var(--c-green-600);opacity:.26;--dx:80px;--dy:-30px;animation-duration:30s}
.mesh__blob:nth-child(4){right:24%;top:-14%;width:clamp(200px,28vw,380px);opacity:.3;--dx:-40px;--dy:60px;animation-duration:20s}
@keyframes mesh-drift{to{transform:translate(var(--dx,60px),var(--dy,-40px)) scale(1.12)}}
/* E2 pulse rings */
.pulse-rings{position:absolute;left:50%;top:50%;z-index:-1;width:150%;aspect-ratio:1;translate:-50% -50%;pointer-events:none}
.pulse-rings span{position:absolute;inset:0;border:1.5px solid rgb(59 130 246/.6);border-radius:50%;opacity:0;animation:pulse-ring 3.6s ease-out infinite}
.pulse-rings span:nth-child(2){animation-delay:1.2s}.pulse-rings span:nth-child(3){animation-delay:2.4s}
@keyframes pulse-ring{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.4);opacity:0}}
/* E3 split words */
/* Hidden until main.js adds .is-split; shown anyway after 3s if scripts never finish. */
html.js .split-words:not(.is-split){visibility:hidden;animation:split-safety 0s linear 3s forwards}
@keyframes split-safety{to{visibility:visible}}
.split-words .word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.split-words .word>span{display:inline-block;will-change:transform}
/* E4 tilt + glare */
.tilt{position:relative}
.tilt__glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgb(255 255 255/.45),transparent 55%);transition:opacity var(--dur-2)}
@media (hover:hover){.tilt{transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform var(--dur-2) var(--ease-out);will-change:transform}.tilt:hover .tilt__glare{opacity:1}}
/* E5 glass chips */
.glass-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid rgb(255 255 255/.6);border-radius:999px;background:rgb(255 255 255/.6);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);box-shadow:0 8px 24px rgba(11,31,58,.18);color:var(--c-navy-900);font:600 .875rem/1.2 var(--f-body);white-space:nowrap;animation:chip-float 6s ease-in-out infinite;animation-delay:var(--d,0s)}
.glass-chip:nth-of-type(2){--d:-2s}.glass-chip:nth-of-type(3){--d:-4s}
.glass-chip .icon{color:var(--c-blue-600)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass-chip{background:#fff}}
@keyframes chip-float{0%,100%{transform:translateY(-6px)}50%{transform:translateY(6px)}}
/* E7 reveals: hidden only under html.js (GSAP animates; else IO adds .is-visible) */
html.js .reveal:not(.is-revealed){opacity:0;transform:translateY(24px)}
html.js.has-gsap .reveal:not(.is-revealed){transition:none}
html.js:not(.has-gsap) .reveal:not(.is-revealed){transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
html.js:not(.has-gsap) .reveal.is-visible:not(.is-revealed){opacity:1;transform:none}
/* Safety net: if main.js never sets .reveal-ready (not loaded / threw), show everything after 3s */
html.js:not(.reveal-ready) :is(.reveal:not(.is-revealed),.reveal-img,.reveal-img img){animation:rv-safe 0s linear 3s forwards}
@keyframes rv-safe{to{opacity:1;transform:none;clip-path:none}}
/* .is-revealed (set after the entrance) retires the .reveal rules so .tile:hover works */
html.js .reveal-img{clip-path:inset(12% 12% 12% 12% round 24px)}
html.js .reveal-img img,html.js img.reveal-img{transform:scale(1.08)}
html.js:not(.has-gsap) .reveal-img.is-visible{clip-path:inset(0% 0% 0% 0% round 24px);transition:clip-path var(--dur-3) var(--ease-out)}
html.js:not(.has-gsap) .reveal-img.is-visible img,html.js:not(.has-gsap) img.reveal-img.is-visible{transform:none;transition:transform 1400ms var(--ease-out)}
/* E8 story: stacked by default; main.js adds .story--pinned at >=1024px */
.story__inner{display:grid;gap:40px}
.story__list{position:relative;padding-left:36px}
.story__list::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:rgb(255 255 255/.15)}
.story__line{position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(var(--c-sky),var(--c-glow));box-shadow:0 0 14px var(--c-glow);transform-origin:top}
.story__steps{list-style:none;padding:0;display:grid;gap:32px}
.story__step{position:relative;transition:opacity var(--dur-2)}
.story__step h3{margin-bottom:6px}
.story__media{display:grid;gap:16px;width:100%;max-width:440px;margin-inline:auto}
.story__img{overflow:hidden;border-radius:var(--radius-lg);border:1px solid rgb(255 255 255/.1);background:#fff;box-shadow:0 30px 100px -20px rgb(59 130 246/.45)}
.story__img img{width:100%;aspect-ratio:4/5;object-fit:cover}
@media (min-width:1024px){.story__inner{grid-template-columns:1fr 1fr;gap:80px;align-items:center}}
/* Stacked story at >=1024px (reduced motion, no JS, or viewport too short to pin): all images are in flow, so a single 440px column of them
   is ~2200px tall next to ~600px of steps. Lay them out as a 2x2 grid so both columns are about the same height (no empty dark column). */
@media (min-width:1024px){.story:not(.story--pinned) .story__media{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none;margin-inline:0}
  /* Every tile takes one cell and the same 4/5 ratio, whatever page CSS says (extra .story__media in the selector outranks page-level full-row spans), so the grid is always N/2 equal rows. */
  .story:not(.story--pinned) .story__media>.story__img{grid-column:auto}
  .story:not(.story--pinned) .story__media>.story__img img{aspect-ratio:4/5}}
.story .section-head{margin-bottom:32px}
.story--pinned{display:flex;align-items:center;min-height:100vh;padding-block:clamp(72px,12vh,112px) clamp(20px,5vh,56px)}
.story--pinned .story__inner{width:100%}
.story--pinned .story__line{transform:scaleY(var(--p,0))}
.story--pinned{--mk:14px}
/* Inactive steps at .8 opacity: white heading 12.3:1, 70%-white text 6.4:1 on navy-950 (was .35 = 3.2:1 / 2.14:1, AA needs 4.5:1).
   The active/inactive difference is carried by non-opacity cues: a filled glowing marker on the progress line vs a hollow ring,
   and the active text nudged 8px right. The pinned state only exists with JS and motion, so reduced-motion / no-JS stacked steps are plain. */
.story--pinned .story__step{opacity:.8}
.story--pinned .story__step.is-active{opacity:1}
.story--pinned .story__step>*{transition:transform var(--dur-2) var(--ease-out)}
.story--pinned .story__step.is-active>*{transform:translateX(8px)}
.story--pinned .story__step::before{content:"";position:absolute;left:calc(-36px + 1px - var(--mk) / 2);top:calc((1.25rem * 1.3 - var(--mk)) / 2);width:var(--mk);height:var(--mk);border:2px solid rgb(255 255 255/.55);border-radius:50%;background:var(--c-navy-950);transition:background-color var(--dur-2),border-color var(--dur-2),box-shadow var(--dur-2)}
.story--pinned .story__step.is-active::before{border-color:var(--c-sky);background:var(--c-sky);box-shadow:0 0 0 4px rgb(59 130 246/.35),0 0 14px var(--c-glow)}
.story--pinned .story__media{gap:0}
.story--pinned .story__img{grid-area:1/1;opacity:0;transition:opacity 600ms var(--ease-in-out)}
.story--pinned .story__img.is-active{opacity:1}
.story--pinned .story__img img{aspect-ratio:auto;height:clamp(280px,calc(100vh - 190px),550px)}
@media (max-height:780px){
  .story--pinned .section-head{margin-bottom:16px}
  .story--pinned .section-head h2{font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}
  .story--pinned .story__steps{gap:14px}
  .story--pinned .story__step h3{font-size:1.0625rem;margin-bottom:4px}
  .story--pinned .story__step::before{top:calc((1.0625rem * 1.3 - var(--mk)) / 2)}
  .story--pinned .story__step p{font-size:.9375rem;line-height:1.5}
}
/* E9 bento + spotlight */
.bento{display:grid;grid-template-columns:1fr;grid-auto-flow:dense;gap:16px}
.bento__item{position:relative;isolation:isolate;overflow:hidden;padding:28px;border-radius:var(--radius-md);background:#fff;box-shadow:var(--shadow-card)}
.bento__item::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgb(59 130 246/.15),transparent 40%);opacity:0;transition:opacity var(--dur-2)}
.bento__item::after{content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;pointer-events:none;background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgb(59 130 246/.85),transparent 60%);-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);mask-composite:exclude;opacity:0;transition:opacity var(--dur-2)}
.bento__item:hover::before,.bento__item:hover::after{opacity:1}
@media (min-width:768px){.bento{grid-template-columns:repeat(2,1fr);gap:20px}.bento__item--wide{grid-column:span 2}}
@media (min-width:1024px){.bento{grid-template-columns:repeat(4,1fr);gap:24px}.bento__item--tall{grid-row:span 2}}
/* Bento variants (combine with --wide / --tall): --tint = blue-50 wash with a hairline border; --dark = navy-950 glowing card.
   Card text uses .card__title/.card__text, so the dark variant re-colours those; both stay well above AA on navy-950. */
.bento__item--tint{background:linear-gradient(160deg,#E2EDFC,var(--c-blue-50) 50%,#fff 130%);box-shadow:inset 0 0 0 1px rgb(37 99 235/.3),inset 0 3px 0 var(--c-blue-600,#1E5FD0),var(--shadow-card)}
.bento__item--tint .card__icon{background:#fff;color:var(--c-blue-700);box-shadow:0 0 0 1px rgb(37 99 235/.22),0 4px 12px -4px rgb(37 99 235/.35)}
.bento__item--dark{background:radial-gradient(120% 90% at 100% 0%,rgb(59 130 246/.32),transparent 60%),var(--c-navy-950);box-shadow:inset 0 0 0 1px rgb(255 255 255/.1),var(--shadow-card)}
.bento__item--dark .card__title{color:#fff}
.bento__item--dark .card__text{color:rgb(255 255 255/.8)}
.bento__item--dark .card__icon{background:rgb(255 255 255/.1);color:var(--c-sky)}
/* E10 marquee */
.marquee{overflow:hidden;padding-block:20px;background:#fff;border-bottom:1px solid var(--c-gray-200);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;width:max-content;animation:marquee 40s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__list{display:flex;gap:48px;padding:0 48px 0 0;margin:0;list-style:none}
.marquee__item{display:inline-flex;align-items:center;gap:10px;font:600 .9375rem/1.2 var(--f-body);color:var(--c-navy-700);white-space:nowrap}
.marquee__item .icon{color:var(--c-green-600)}
@keyframes marquee{to{transform:translateX(-50%)}}
/* E14 parallax helpers (JS moves [data-parallax] by transform only) */
.parallax-frame{position:relative;overflow:hidden;height:clamp(240px,40vw,420px);border-radius:var(--radius-lg);border:1px solid rgb(255 255 255/.1);box-shadow:0 30px 100px -20px rgb(59 130 246/.4)}
.parallax-frame picture{position:absolute;left:0;top:0;display:block;width:100%;height:calc(100% + 60px)}
.parallax-frame img{width:100%;height:100%;object-fit:cover}
/* E13 page transitions (progressive enhancement) */
@view-transition{navigation:auto}
@keyframes vt-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}}
::view-transition-old(root){animation:vt-out 250ms var(--ease-in-out) both}
::view-transition-new(root){animation:vt-in 250ms var(--ease-in-out) both}

/* ---------- 1g2. Bulgarian letterforms ----------
   lang=bg makes Manrope substitute its localized (cursive-like) в г д ж з и й к л н п т ц ч ш щ ю я via 'locl'. The brand wants the
   standard Cyrillic forms, so switch the feature off everywhere. Applied to every element (not just headings) because the font
   shorthand used by .stat__value, .tile, .step__num, .mobile-panel nav a ... resets font-feature-settings, and !important so page CSS
   using that shorthand cannot bring the cursive forms back (only another !important declaration, e.g. an inline one, could: do not add any). Inter (body) has no bg locl forms in the shipped subset: output is identical. */
*,*::before,*::after{font-feature-settings:"locl" 0!important}

/* ---------- 1h. Reduced motion: the only such block; turns ALL motion off ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  html.js .reveal,html.js .reveal-img,html.js .reveal-img img,html.js img.reveal-img{opacity:1!important;transform:none!important;clip-path:none!important}
  .marquee{-webkit-mask-image:none;mask-image:none}
  .marquee__track{width:auto;flex-wrap:wrap;transform:none}
  .marquee__list{flex-wrap:wrap;justify-content:center;gap:12px 32px;padding:0}
  .marquee__list[aria-hidden=true]{display:none}
  .tilt{transform:none!important}.tilt__glare{display:none}
  .pulse-rings,.scroll-progress,.btn--primary::after{display:none}
  .split-words .word{overflow:visible}
  html.js .split-words{visibility:visible!important}
  @view-transition{navigation:none}
}