/* assets/site.css — the Magic eSIM design system, shared by the Russian and the
 * English storefront so the two cannot drift apart: tokens, type, buttons,
 * chips, fields, the header and its mobile menu, the footer and the shared page
 * parts. Each storefront adds only its own layer on top (en/en.css: the GLOBAL
 * payment-status bar). Locale-neutral: no copy, no currency, no market logic.
 * Versioned by seo/stamp-assets.mjs like every other asset.
 *
 * The palette is the Russian landing's light theme (--bg #F7F9FC, --ink #111827,
 * --line #E6EAF2, --grad #8A16C7 → #3866D9 → #00C7DF, buttons #4267E8).
 *
 * Inter, self-hosted (the English pages' CSP allows font-src 'self' only).
 * Variable weight; latin + latin-ext + cyrillic, @fontsource-variable/inter 5.3.0
 * (the latin files are byte-identical to the ones /en/ shipped since #35);
 * SIL Open Font License — assets/fonts/OFL.txt. */
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fonts/inter-latin-wght-normal.woff2) format("woff2-variations"),url(/assets/fonts/inter-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations"),url(/assets/fonts/inter-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fonts/inter-cyrillic-wght-normal.woff2) format("woff2-variations"),url(/assets/fonts/inter-cyrillic-wght-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

:root{--bg:#f7f9fc;--surface:#ffffff;--card:#ffffff;--text:#111827;--muted:#5b6478;--faint:#687186;--border:#e6eaf2;--border-strong:#d6def0;--accent:#4267e8;--accent-btn:#4267e8;--accent-hover:#3557d6;--accent-soft:#eef2ff;--violet:#8a16c7;--cyan:#00c7df;--grad:linear-gradient(135deg,#8a16c7 0%,#3866d9 52%,#00c7df 100%);--grad-text:linear-gradient(90deg,#8a16c7 0%,#3866d9 55%,#0e7fa0 100%);--grad-deep:linear-gradient(135deg,#7a14b3 0%,#3156cf 55%,#0d6f8f 100%);--warn-bg:#fff7e6;--warn-line:#f2d08a;--warn-ink:#7a4b00;--ok:#1f9d57;--err:#c5372b;--r-s:10px;--r-m:14px;--r-l:20px;--r-xl:28px;--shadow-1:0 1px 2px rgba(17,24,39,.05),0 4px 14px rgba(17,24,39,.05);--shadow-2:0 18px 44px rgba(17,24,39,.10);--max:1180px;--font:"Inter",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
/* --accent-btn: white text on it is 4.84:1 (WCAG AA 4.5:1) and the button
   against the page is 4.59:1 (non-text 3:1); --muted on the page is 5.63:1.
   seo/test-en-hardening.mjs pins all three. */
*{box-sizing:border-box}
/* The `hidden` attribute must win over every display rule below. Without this,
   `.btn{display:inline-flex}` and `.results{display:grid}` kept hidden elements
   on screen: the checkout's «Get a new price» showed while a price was still
   held (live on #30), and a click on it wrote a needless quote. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{max-width:100%}
a{color:inherit}
a:hover{color:var(--accent)}
:focus-visible{outline:3px solid rgba(66,103,232,.55);outline-offset:2px;border-radius:6px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 16px}
@media (min-width:720px){.wrap{padding:0 24px}}

/* ---------- type ---------- */
h1,h2,h3,h4{color:var(--text);margin:0 0 .5em;font-weight:800;letter-spacing:-.025em;line-height:1.12}
h1{font-size:clamp(30px,5.2vw,48px);margin:28px 0 12px}
h2{font-size:clamp(24px,3.4vw,34px)}
h3{font-size:18px;letter-spacing:-.015em;line-height:1.3;font-weight:700}
h4{font-size:16px;letter-spacing:-.01em;font-weight:700}
p{margin:0 0 1em}
.lead{color:var(--muted);font-size:clamp(16px,1.9vw,19px);line-height:1.55;max-width:62ch;margin:0 0 26px}
.note{color:var(--muted);font-size:14px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:6px 12px;border-radius:999px;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-1);color:var(--text);font-size:13px;font-weight:650}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--grad);flex:none}
.grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.kicker{display:block;margin:0 0 8px;color:var(--accent);font-size:13px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}

/* ---------- buttons, chips, fields ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border:0;border-radius:999px;background:var(--accent-btn);color:#fff;font:inherit;font-weight:700;font-size:15px;line-height:1.2;cursor:pointer;text-decoration:none;box-shadow:0 6px 18px rgba(66,103,232,.28);transition:background-color .15s ease,box-shadow .15s ease,transform .15s ease}
.btn:hover{background:var(--accent-hover);color:#fff;box-shadow:0 8px 22px rgba(66,103,232,.34)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55;cursor:not-allowed;box-shadow:none;transform:none}
.btn-ghost{background:var(--surface);border:1px solid var(--border-strong);color:var(--text);box-shadow:none}
.btn-ghost:hover{background:var(--accent-soft);border-color:#c9d4f5;color:var(--text);box-shadow:none}
.btn-sm{min-height:40px;padding:0 16px;font-size:14px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;line-height:1.4;padding:3px 10px;border-radius:999px;border:1px solid var(--border);color:var(--text);background:var(--accent-soft)}
.flag{display:inline-block;width:28px;height:21px;border-radius:4px;object-fit:cover;box-shadow:0 0 0 1px rgba(17,24,39,.08);flex:none;background:#eef1f6}
label{display:block;font-size:14px;font-weight:600;color:var(--text);margin-bottom:6px}
input[type=text],input[type=email],select{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--border-strong);border-radius:var(--r-s);background:var(--surface);color:var(--text);font:inherit;font-size:16px}
input[type=text]:focus,input[type=email]:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(66,103,232,.16)}
::placeholder{color:var(--faint);opacity:1}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.88);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--border)}
.hdr{display:flex;align-items:center;gap:20px;min-height:68px}
.brand{display:flex;align-items:center;flex:none;text-decoration:none}
.brand img{display:block;height:44px;width:auto}
.nav{display:flex;gap:4px;margin-left:8px}
.nav a{padding:8px 12px;border-radius:999px;color:var(--muted);font-size:15px;font-weight:600;text-decoration:none}
.nav a:hover{color:var(--text);background:var(--accent-soft)}
.hdr-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.langsw{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border-radius:999px;color:var(--muted);font-size:14px;font-weight:600;text-decoration:none}
.langsw:hover{color:var(--text);background:var(--accent-soft)}
.langsw svg{width:16px;height:16px}
.mnav{display:none;position:relative;border:0;padding:0;margin:0;background:transparent;border-radius:0}
.mnav>summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--border-strong);background:var(--surface);cursor:pointer;color:var(--text)}
.mnav>summary::-webkit-details-marker{display:none}
.mnav>summary svg{width:20px;height:20px}
.mnav .ico-close{display:none}
.mnav[open] .ico-open{display:none}
.mnav[open] .ico-close{display:block}
.mnav-panel{position:absolute;right:0;top:calc(100% + 10px);width:min(300px,calc(100vw - 32px));padding:10px;border:1px solid var(--border);border-radius:var(--r-l);background:var(--surface);box-shadow:var(--shadow-2)}
.mnav-panel a{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:12px;font-weight:600;text-decoration:none;color:var(--text)}
.mnav-panel a:hover{background:var(--accent-soft)}
.mnav-panel hr{border:0;border-top:1px solid var(--border);margin:8px 6px}
@media (max-width:899px){
  .nav{display:none}
  .mnav{display:block}
  .hdr{gap:10px;min-height:64px}
  .brand img{height:40px}
  .hdr-actions .langsw{display:none}
}
@media (max-width:359px){.hdr-cta{display:none}}

/* ---------- footer ---------- */
.site-footer{margin-top:72px;background:#0f1424;color:#c7cede;font-size:14px}
.site-footer a{color:#e8ecf5;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.ft-grid{display:grid;gap:32px;grid-template-columns:1.4fr repeat(3,1fr);padding:56px 0 36px}
.ft-brand img{display:block;height:44px;width:auto;border-radius:10px;background:#fff;padding:4px 6px}
.ft-brand p{margin:14px 0 0;max-width:34ch;color:#aab3c7}
.ft-col h2{margin:0 0 12px;color:#fff;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.ft-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ft-bottom{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;padding:18px 0 32px;border-top:1px solid rgba(255,255,255,.1);color:#aab3c7}
.ft-bottom p{margin:0}
.site-footer .support a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media (max-width:899px){.ft-grid{grid-template-columns:1fr 1fr}.ft-brand{grid-column:1/-1}}
@media (max-width:479px){.ft-grid{grid-template-columns:1fr;gap:26px;padding:44px 0 28px}}

/* ---------- shared page parts (destination list, country pages, guides) ---------- */
.crumbs{font-size:14px;color:var(--muted);margin:24px 0 0}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--accent)}
.panel{border:1px solid var(--border);border-radius:var(--r-l);background:var(--surface);padding:20px;margin:0 0 22px;box-shadow:var(--shadow-1)}
.results{margin-top:10px;display:grid;gap:6px;max-height:340px;overflow:auto}
.res{display:flex;gap:12px;align-items:center;min-height:52px;padding:10px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface);cursor:pointer;text-align:left;color:var(--text);font:inherit;font-weight:600;width:100%;text-decoration:none}
.res:hover,.res:focus-visible{border-color:var(--accent);background:var(--accent-soft);color:var(--text)}
.res::after{content:"→";margin-left:auto;color:var(--faint);font-weight:500}
a.res{text-decoration:none}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{border:1px solid var(--border);border-radius:var(--r-l);background:var(--surface);padding:18px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-1)}
.card h3{margin:0;font-size:17px}
.meta{color:var(--muted);font-size:14px;display:flex;gap:6px 12px;flex-wrap:wrap}
.price{font-size:24px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.card .btn{margin-top:auto}
.block{margin:0 0 34px}
.block h2{font-size:22px;margin:0 0 4px;display:flex;gap:10px;align-items:baseline}
.block h2 .count{color:var(--muted);font-size:14px;font-weight:600}
.block>.note{margin:0 0 14px}
.dest{columns:3 200px;gap:24px;padding:0;list-style:none}
.dest li{break-inside:avoid;padding:4px 0}
.dest a{text-decoration:none}
.dest a:hover{text-decoration:underline}
.distinct{display:flex;gap:6px;flex-wrap:wrap}
details{border:1px solid var(--border);border-radius:var(--r-m);padding:14px 16px;background:var(--surface);margin-top:10px}
summary{cursor:pointer;font-weight:650}
.prose p{max-width:70ch}
.steps{padding-left:22px}
.steps li,.list li{margin:8px 0;max-width:70ch}
.list{padding-left:20px}
.guides{list-style:none;padding:0}
.guides li{margin:0 0 16px}
code{background:var(--accent-soft);border:1px solid var(--border);border-radius:6px;padding:1px 6px;font-size:.92em}
#faq details{margin-top:8px}
.err{color:var(--err)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* «Skip to main content» — the first Tab stop of every page that carries one. Off-screen
   until it has focus, then shown above the sticky header (z-index 40) in the
   primary-button colours (white on --accent-btn is 4.84:1). Moving it with a
   transform keeps it out of the layout, so it can never widen the page. <main>
   takes focus programmatically (tabindex="-1"): no ring on the whole content. */
.skip{position:fixed;top:12px;left:12px;z-index:100;display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border-radius:var(--r-s);background:var(--accent-btn);color:#fff;font-weight:700;font-size:15px;line-height:1.2;text-decoration:none;box-shadow:var(--shadow-2);transform:translateY(calc(-100% - 24px));transition:transform .15s ease}
.skip:focus,.skip:focus-visible{transform:none;color:#fff;outline:3px solid var(--text);outline-offset:2px}
.skip:hover{color:#fff}
@media (prefers-reduced-motion:reduce){.skip{transition:none}}
main[tabindex="-1"]:focus{outline:none}

/* ===== MOTION — «Expressive» (owner, 2026-10-20; prototyped in the motion lab). =====
 * Shared by the Russian and the English pages since 2026-10-21 (moved here from ru.css — one copy, no duplicate).
 * Active only where <html data-motion> is set before first paint: on RU by the header's inline script
 * (seo/site-chrome.mjs HEADER_MOTION_SCRIPT), on EN by assets/logo-once.js in <head> (the EN CSP refuses inline script).
 * Not on the ten SEO-experiment pages, whose header is static. Transform and opacity only (a shadow or a ring is a
 * pseudo-element whose OPACITY moves); no infinite loops, no rotation, no layout properties; entrances fill BACKWARDS so
 * they hold nothing after they end; nothing above the fold is hidden before first paint (LCP); plans render at once and
 * only their entrance moves (the request is never held). Everything sits in prefers-reduced-motion: no-preference; the
 * reduce rule below also stops every animation. 250–450 ms. Entrances and the picked term MOVE but never shrink: a 40 px
 * target stays 40 px while it animates. assets/motion.js adds reveal-on-scroll below the fold, the hero parallax and the
 * jump bar's spy (RU: every page; EN: the home and the country pages — the others have nothing for it to do). */
:root[data-motion]{--m-fast:250ms;--m-base:320ms;--m-slow:450ms;--m-ease:cubic-bezier(.2,.8,.2,1);--m-out:cubic-bezier(.16,1,.3,1);
  --m-in-o:0;--m-lift:-5px;--m-btn-lift:-2px;--m-press:.965;--m-ring:.55;--m-glow:.14;--m-in-y:14px;--m-in-s:1;--m-step:40ms;--m-icon:4px;--m-par:9px;--m-hero-y:22px}
@keyframes m-in{from{opacity:var(--m-in-o,0);transform:translate3d(0,var(--m-in-y),0) scale(var(--m-in-s))}}
@keyframes m-fade{from{opacity:0}}
@keyframes m-drop{from{opacity:0;transform:translate3d(0,-6px,0)}}
@keyframes m-rise{from{translate:0 var(--m-hero-y)}}
@keyframes m-glow-in{from{opacity:0;scale:.92}}
@keyframes m-settle{from{opacity:.55}}
@media (prefers-reduced-motion:no-preference){

/* ---------- plan cards (country page) ---------- */
[data-motion] .plan{transition:transform var(--m-base) var(--m-ease),border-color var(--m-base) var(--m-ease)}
[data-motion] .plan:hover{box-shadow:var(--shadow-1)}            /* the production shadow change → the pseudo-element below */
[data-motion] .plan::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;
  box-shadow:0 0 0 1px rgba(66,103,232,var(--m-ring)),0 16px 38px rgba(17,24,39,var(--m-glow)),0 3px 10px rgba(66,103,232,calc(var(--m-glow) * .8));
  transition:opacity var(--m-base) var(--m-ease)}
[data-motion] .plan:focus-within::after{opacity:.85}
@media (hover:hover) and (pointer:fine){
  [data-motion] .plan:hover{transform:translate3d(0,var(--m-lift),0)}
  [data-motion] .plan:hover::after{opacity:1}
  [data-motion] .plan:hover .package-buy{background:var(--accent-hover)}
}
/* entrance: a card is inserted by the render — the animation runs on its own, no JS, no hidden state before it */
[data-motion] :is(.plan-grid,.packages-grid,#dailyGrid)>.plan{animation:m-in var(--m-slow) var(--m-out) backwards;animation-delay:calc(var(--i,0) * var(--m-step))}
[data-motion] :is(.plan-grid,.packages-grid,#dailyGrid)>.plan:nth-child(2){--i:1}[data-motion] :is(.plan-grid,.packages-grid,#dailyGrid)>.plan:nth-child(3){--i:2}
[data-motion] :is(.plan-grid,.packages-grid,#dailyGrid)>.plan:nth-child(4){--i:3}[data-motion] :is(.plan-grid,.packages-grid,#dailyGrid)>.plan:nth-child(5){--i:4}
[data-motion] :is(.plan-grid,.packages-grid,#dailyGrid)>.plan:nth-child(n+6){--i:5}
/* «Покрытие и условия →»: the arrow moves, the text stays */
[data-motion] .plan-info::after{display:inline-block;transition:transform var(--m-fast) var(--m-ease)}
[data-motion] .plan-info:hover::after,[data-motion] .plan-info:focus-visible::after{transform:translate3d(var(--m-icon),0,0)}
/* per-day term tiles: a press, and the chosen one settles */
[data-motion] .daily-term{transition:transform var(--m-fast) var(--m-ease),background-color var(--m-fast) ease,border-color var(--m-fast) ease,color var(--m-fast) ease}
[data-motion] .daily-term:active{transform:scale(var(--m-press))}
[data-motion] .daily-term.is-selected{animation:m-settle var(--m-base) var(--m-out)}
/* the English per-day term picker (assets/page-country.css .days: a hidden radio over its span) — the same press and settle */
/* the press scales the whole LABEL (the control, as RU scales the whole .daily-term button): a transform on the span alone
   lifts it into its own layer above the invisible radio that takes the click */
[data-motion] .days label{transition:transform var(--m-fast) var(--m-ease)}
[data-motion] .days span{transition:background-color var(--m-fast) ease,border-color var(--m-fast) ease,color var(--m-fast) ease}
[data-motion] .days label:active{transform:scale(var(--m-press))}
[data-motion] .days input:checked+span{animation:m-settle var(--m-base) var(--m-out)}

/* ---------- buttons (buy, CTA) ---------- */
[data-motion] .btn{transition:transform var(--m-fast) var(--m-ease),background-color var(--m-base) ease,box-shadow var(--m-base) ease,color var(--m-base) ease}
@media (hover:hover) and (pointer:fine){[data-motion] .btn:hover{transform:translate3d(0,var(--m-btn-lift),0)}}
[data-motion] .btn:active{transform:scale(var(--m-press));transition-duration:90ms}
[data-motion] .btn[disabled],[data-motion] .btn[aria-disabled=true]{transform:none}

/* ---------- popular destinations (home) ---------- */
[data-motion] .dest-tile{position:relative;transition:transform var(--m-base) var(--m-ease),border-color var(--m-base) var(--m-ease)}
[data-motion] .dest-tile:hover{box-shadow:var(--shadow-1)}
[data-motion] .dest-tile::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;
  box-shadow:0 0 0 1px rgba(66,103,232,var(--m-ring)),0 14px 30px rgba(17,24,39,var(--m-glow));transition:opacity var(--m-base) var(--m-ease)}
@media (hover:hover) and (pointer:fine){[data-motion] .dest-tile:hover{transform:translate3d(0,var(--m-lift),0)}[data-motion] .dest-tile:hover::after{opacity:1}
  [data-motion] .dest-tile .flag{transition:transform var(--m-base) var(--m-ease)}[data-motion] .dest-tile:hover .flag{transform:scale(1.06)}}
[data-motion] .dest-tile:active{transform:scale(var(--m-press))}
/* revealed when scrolled into view (motion.js adds .m-pre only to what is BELOW the fold at load) */
[data-motion] .m-pre{opacity:0;transform:translate3d(0,var(--m-in-y),0)}
[data-motion] .m-show{transition:opacity var(--m-slow) var(--m-out),transform var(--m-slow) var(--m-out);transition-delay:calc(var(--i,0) * var(--m-step))}

/* ---------- search results ---------- */
[data-motion] .results>.res{animation:m-in var(--m-base) var(--m-out) backwards}
[data-motion] .results>.res:nth-child(2){animation-delay:calc(1 * var(--m-step))}[data-motion] .results>.res:nth-child(3){animation-delay:calc(2 * var(--m-step))}
[data-motion] .results>.res:nth-child(n+4){animation-delay:calc(3 * var(--m-step))}
[data-motion] .res::after{transition:transform var(--m-fast) var(--m-ease)}
[data-motion] .res:hover::after,[data-motion] .res:focus-visible::after{transform:translate3d(var(--m-icon),0,0)}

/* ---------- tabs: the country page's jump bar ---------- */
[data-motion] .cp-jump a{transition:transform var(--m-fast) var(--m-ease),background-color var(--m-base) ease,border-color var(--m-base) ease,color var(--m-base) ease}
[data-motion] .cp-jump a:active{transform:scale(var(--m-press))}
[data-motion] .cp-jump a .n{display:inline-block;transition:transform var(--m-fast) var(--m-ease)}
@media (hover:hover) and (pointer:fine){[data-motion] .cp-jump a:hover .n{transform:translate3d(0,-1px,0)}}
[data-motion] .cp-jump a.m-active{border-color:var(--accent);color:var(--accent)}

/* ---------- navigation ---------- */
[data-motion] .nav a{position:relative}
[data-motion] .nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform var(--m-base) var(--m-ease);opacity:.85}
[data-motion] .nav a:hover::after,[data-motion] .nav a:focus-visible::after{transform:scaleX(1)}
[data-motion] .mnav[open] .mnav-panel{animation:m-drop var(--m-base) var(--m-out)}
[data-motion] .langsw svg,[data-motion] .hdr-cta svg{transition:transform var(--m-fast) var(--m-ease)}
[data-motion] .langsw:hover svg{transform:scale(1.08)}

/* ---------- hero decoration (home) — transform/opacity on the drawing only, never on the headline (LCP) ---------- */
[data-motion] .dp-glow{animation:m-glow-in var(--m-slow) var(--m-out) backwards}
[data-motion] .dp-pass{animation:m-rise var(--m-slow) var(--m-out) backwards;animation-delay:40ms}
[data-motion] .dp-back{animation:m-rise var(--m-slow) var(--m-out) backwards;animation-delay:110ms}
[data-motion] .dp-pass,[data-motion] .dp-back{transition:translate 600ms cubic-bezier(.2,.7,.2,1)}
[data-motion] .hero-art.m-par .dp-pass{translate:calc(var(--px,0) * var(--m-par)) calc(var(--py,0) * var(--m-par))}
[data-motion] .hero-art.m-par .dp-back{translate:calc(var(--px,0) * var(--m-par) * -.6) calc(var(--py,0) * var(--m-par) * -.6)}
}
@media print{[data-motion] .m-pre{opacity:1!important;transform:none!important}}

/* THE HEADER LOGO — «Reveal + Wave» (owner, 2026-10-20), 1.44 s, ONCE per session, the same on the Russian and the
 * English pages (moved here from ru.css when EN got it). Started by .lm-play on the SVG (RU: the header's inline script)
 * or .lm-once on <html> (EN: assets/logo-once.js in <head> — the EN CSP refuses inline script). One sessionStorage key,
 * so a visit plays it once across both languages. The symbol settles in (520 ms), the lettering opens left to right
 * (300 → 940 ms), three soft rings leave the symbol (300 → 1440 ms) and fade out above the lettering. Static (no class,
 * reduced motion, the frozen ten's <img>) it is the plain logo. */
.brand .brand-logo{display:block;width:59px;height:44px;overflow:visible}
@media (max-width:899px){.brand .brand-logo{width:53.6px;height:40px}}
.brand-logo .lm-waves{opacity:0}
.brand-logo :is(.lm-symbol,.lm-word,.lm-ring){transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
:is(.brand-logo.lm-play,.lm-once .site-header .brand-logo) .lm-waves{opacity:1}
:is(.brand-logo.lm-play,.lm-once .site-header .brand-logo) .lm-ring{opacity:0;animation:lm-wave 900ms cubic-bezier(.2,.7,.3,1) 300ms forwards}
:is(.brand-logo.lm-play,.lm-once .site-header .brand-logo) .lm-ring2{animation-delay:420ms}:is(.brand-logo.lm-play,.lm-once .site-header .brand-logo) .lm-ring3{animation-delay:540ms}
:is(.brand-logo.lm-play,.lm-once .site-header .brand-logo) .lm-symbol{animation:lm-sym 520ms cubic-bezier(.16,1,.3,1) both}
:is(.brand-logo.lm-play,.lm-once .site-header .brand-logo) .lm-word{animation:lm-word 640ms cubic-bezier(.2,.7,.2,1) 300ms both}
@keyframes lm-wave{0%{opacity:0;transform:scale(.62)}18%{opacity:.55}100%{opacity:0;transform:scale(1.42)}}
@keyframes lm-sym{from{opacity:0;transform:scale(.88) translateY(10px)}}
@keyframes lm-word{from{opacity:0;clip-path:inset(0 100% 0 0)}30%{opacity:1}to{opacity:1;clip-path:inset(0 0 0 0)}}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}