/* Self-hosted Inter + JetBrains Mono (cyrillic/latin subsets only).
   Served from the bucket so first render never waits on fonts.googleapis.com. */
/* Metrics-matched fallbacks, one per weight. size-adjust was calibrated by
   measuring real page copy in Inter vs Arial in the browser — a glyph-average
   model was ~3% too narrow at 700 and left the heading reflow (and its CLS) in
   place. Keeps the fallback occupying exactly the space Inter will take. */
@font-face {
  font-family: 'Inter Fallback';
  font-weight: 400;
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 106.00%;
  ascent-override: 91.39%;
  descent-override: 22.76%;
  line-gap-override: 0.00%;
}
@font-face {
  font-family: 'Inter Fallback';
  font-weight: 500;
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 107.34%;
  ascent-override: 90.25%;
  descent-override: 22.47%;
  line-gap-override: 0.00%;
}
@font-face {
  font-family: 'Inter Fallback';
  font-weight: 600;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold');
  size-adjust: 100.83%;
  ascent-override: 96.08%;
  descent-override: 23.92%;
  line-gap-override: 0.00%;
}
@font-face {
  font-family: 'Inter Fallback';
  font-weight: 700;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold');
  size-adjust: 102.07%;
  ascent-override: 94.91%;
  descent-override: 23.63%;
  line-gap-override: 0.00%;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Inter-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Inter-400-cyrillic.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(fonts/Inter-400-latin-ext.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-weight: 400;
  font-display: swap;
  src: url(fonts/Inter-400-latin.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-weight: 500;
  font-display: swap;
  src: url(fonts/Inter-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/Inter-500-cyrillic.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(fonts/Inter-500-latin-ext.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-weight: 500;
  font-display: swap;
  src: url(fonts/Inter-500-latin.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-weight: 600;
  font-display: swap;
  src: url(fonts/Inter-600-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/Inter-600-cyrillic.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(fonts/Inter-600-latin-ext.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-weight: 600;
  font-display: swap;
  src: url(fonts/Inter-600-latin.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-weight: 700;
  font-display: swap;
  src: url(fonts/Inter-700-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/Inter-700-cyrillic.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: 700;
  font-display: swap;
  src: url(fonts/Inter-700-latin-ext.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-weight: 700;
  font-display: swap;
  src: url(fonts/Inter-700-latin.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/JetBrainsMono-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/JetBrainsMono-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/JetBrainsMono-400-latin-ext.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/JetBrainsMono-400-latin.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/JetBrainsMono-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/JetBrainsMono-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/JetBrainsMono-500-latin-ext.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/JetBrainsMono-500-latin.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;
}

/* ============================================================
   Experta - сайт на дизайн-системе Experta v1.0.0
   Токены: expertatokens.json (light/dark semantic scopes)
   ============================================================ */

/* ---------- primitives ---------- */
:root{
  --ex-blue-50:#EDF0FF;  --ex-blue-100:#DBE2FF; --ex-blue-200:#B7C4FF; --ex-blue-300:#8BA0FF;
  --ex-blue-400:#5574FF; --ex-blue-500:#1F48FF; --ex-blue-600:#1D40DF; --ex-blue-700:#1A38B9;
  --ex-blue-800:#182F94; --ex-blue-900:#15266F;
  --ex-purple-50:#F2ECFD;--ex-purple-100:#E5DAFC;--ex-purple-200:#CBB5F9;--ex-purple-300:#AB86F5;
  --ex-purple-400:#854FF0;--ex-purple-500:#5E17EB;--ex-purple-600:#5316CD;--ex-purple-700:#4615AB;
  --ex-gray-0:#FFFFFF;   --ex-gray-50:#F7F8FA;  --ex-gray-100:#EEF0F4; --ex-gray-200:#DDE1E9;
  --ex-gray-300:#C3C9D4; --ex-gray-400:#9AA2B2; --ex-gray-500:#6C7486; --ex-gray-600:#4B5262;
  --ex-gray-700:#343A47; --ex-gray-800:#20242E; --ex-gray-900:#141821; --ex-gray-950:#0B0D12;
  --ex-gradient-brand:linear-gradient(135deg,#5E17EB 0%,#1F48FF 100%);
  --ex-gradient-soft:linear-gradient(135deg,#854FF0 0%,#5574FF 100%);

  /* space */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:40px; --space-8:48px; --space-9:64px; --space-10:96px;
  /* radius */
  --radius-xs:4px; --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:20px; --radius-full:9999px;
  /* type scale */
  --text-xs:12px;  --lh-xs:18px;
  --text-sm:14px;  --lh-sm:22px;
  --text-base:16px;--lh-base:26px;
  --text-lg:18px;  --lh-lg:28px;
  --text-xl:22px;  --lh-xl:30px;
  --text-2xl:28px; --lh-2xl:35px;
  --text-3xl:36px; --lh-3xl:42px;
  --text-4xl:48px; --lh-4xl:53px;
  --font-sans:Inter,"Inter Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PT Sans",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,"Roboto Mono",Menlo,Consolas,monospace;
  --tracking-tight:-0.02em; --tracking-wide:0.04em;
  /* motion */
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms; --ease:cubic-bezier(.2,0,0,1);
  /* z */
  --z-sticky:100; --z-dropdown:500;
  --wrap:1200px;
}

/* ---------- semantic: LIGHT (page default) ---------- */
:root{
  --bg:#F7F8FA; --surface:#FFFFFF; --surface-raised:#FFFFFF; --surface-sunken:#EEF0F4;
  --border:#DDE1E9; --border-strong:#C3C9D4; --divider:#EEF0F4;
  --text:#141821; --text-2:#4B5262; --text-muted:#6C7486; --text-inverse:#FFFFFF; --link:#1D40DF;
  --primary:#1F48FF; --primary-hover:#1D40DF; --primary-active:#1A38B9; --primary-subtle:#EDF0FF; --on-primary:#FFFFFF;
  --accent:#5E17EB; --accent-hover:#5316CD; --accent-subtle:#F2ECFD; --on-accent:#FFFFFF;
  --focus:#1F48FF;
  --success:#178A54; --success-subtle:#E9F7EF;
  --shadow-xs:0 1px 2px rgba(17,20,28,.06);
  --shadow-sm:0 1px 3px rgba(17,20,28,.08),0 1px 2px rgba(17,20,28,.06);
  --shadow-md:0 4px 12px rgba(17,20,28,.10),0 2px 4px rgba(17,20,28,.06);
  --shadow-lg:0 12px 28px rgba(17,20,28,.14),0 6px 12px rgba(17,20,28,.08);
}
/* ---------- semantic: DARK (scoped to dark surfaces) ---------- */
.hdr,.ftr,.hero,.sec.dark,.cta-band{
  --bg:#000000; --surface:#141821; --surface-raised:#20242E; --surface-sunken:#0B0D12;
  --border:#20242E; --border-strong:#343A47; --divider:#20242E;
  --text:#F7F8FA; --text-2:#C3C9D4; --text-muted:#9AA2B2; --text-inverse:#141821; --link:#8BA0FF;
  --primary:#5574FF; --primary-hover:#8BA0FF; --primary-active:#B7C4FF; --primary-subtle:rgba(85,116,255,.18); --on-primary:#141821;
  --accent:#AB86F5; --accent-hover:#CBB5F9; --accent-subtle:rgba(171,134,245,.20); --on-accent:#141821;
  --focus:#5574FF;
  --shadow-xs:0 1px 2px rgba(0,0,0,.5);
  --shadow-sm:0 1px 3px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.5);
  --shadow-md:0 4px 14px rgba(0,0,0,.6);
  --shadow-lg:0 14px 34px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);
  font-size:var(--text-base);line-height:var(--lh-base);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{font-family:var(--font-sans);font-weight:700;letter-spacing:var(--tracking-tight);margin:0 0 var(--space-3);color:var(--text)}
h1{font-size:clamp(32px,5vw,var(--text-4xl));line-height:1.06}
h2{font-size:clamp(26px,3.6vw,var(--text-3xl));line-height:1.15}
h3{font-size:var(--text-xl);line-height:var(--lh-xl)}
h4{font-size:var(--text-lg);line-height:var(--lh-lg)}
p{margin:0 0 var(--space-4);color:var(--text-2)}
a{color:var(--link);text-decoration:none;transition:color var(--dur-fast) var(--ease)}
a:hover{text-decoration:underline}
p a:not(.btn),.ticks li a{text-decoration:underline}
img{max-width:100%}
strong{color:var(--text)}
:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 45%,transparent);border-radius:var(--radius-xs)}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--space-5)}
.mono{font-family:var(--font-mono)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:var(--z-sticky);background:var(--bg);color:var(--text);border-bottom:1px solid var(--border)}
.hdr .wrap{display:flex;align-items:center;gap:var(--space-5);padding-block:var(--space-3)}
.logo{display:flex;align-items:center;flex:0 0 auto}
.logo:hover{text-decoration:none;opacity:.85}
.logo img{height:32px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:2px;margin:0;padding:0;flex-wrap:wrap}
.nav>li{position:relative;list-style:none}
.nav a,.nav .top{display:block;padding:var(--space-2) var(--space-3);color:var(--text);font-size:var(--text-sm);
  font-weight:500;border-radius:var(--radius-sm);background:none;border:0;font-family:inherit;cursor:pointer;white-space:nowrap}
.nav a:hover,.nav .top:hover{background:var(--surface-raised);text-decoration:none}
.nav ul{position:absolute;top:100%;margin-top:var(--space-2);left:0;min-width:280px;background:var(--surface);
  border:1px solid var(--border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
  padding:var(--space-2);margin-inline:0;margin-bottom:0;display:none;z-index:var(--z-dropdown)}
/* invisible bridge across the gap: keeps :hover alive while the cursor travels down */
.nav li>ul::before{content:"";position:absolute;left:0;right:0;top:calc(-1 * var(--space-2) - 2px);
  height:calc(var(--space-2) + 2px);background:transparent}
.nav li:hover>ul,.nav li:focus-within>ul{display:block}
.nav ul li{list-style:none}
.nav ul a{color:var(--text-2);font-size:var(--text-sm);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm)}
.nav ul a:hover{background:var(--primary-subtle);color:var(--text)}
.hdr-cta{margin-left:auto;display:flex;align-items:center;gap:var(--space-2)}
.lang{border:1px solid var(--border-strong);border-radius:var(--radius-full);padding:6px 14px;
  font-size:var(--text-sm);font-weight:600;color:var(--text-2);background:none}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--border-strong);color:var(--text);
  border-radius:var(--radius-sm);padding:0 14px;min-height:44px;min-width:44px;font-size:20px;line-height:1;
  cursor:pointer;align-items:center;justify-content:center}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font:inherit;font-weight:600;font-size:var(--text-sm);line-height:1.2;
  padding:var(--space-3) var(--space-5);border-radius:var(--radius-sm);
  border:1px solid transparent;cursor:pointer;transition:all var(--dur-fast) var(--ease);text-align:center}
.btn:hover{text-decoration:none}
a.btn.btn-primary{background:var(--ex-gradient-brand);color:#fff;border-color:transparent;box-shadow:var(--shadow-sm)}
a.btn.btn-primary:hover{background:linear-gradient(135deg,#5316CD 0%,#1D40DF 100%);color:#fff;box-shadow:var(--shadow-md)}
a.btn.btn-outline,a.btn.btn-dark{background:transparent;color:var(--text);border-color:var(--border-strong)}
a.btn.btn-outline:hover,a.btn.btn-dark:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-subtle)}
.btn-sm{padding:var(--space-2) var(--space-4);font-size:var(--text-sm)}
.btns{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-5)}

/* ---------- sections ---------- */
.sec{padding-block:var(--space-10);background:var(--bg)}
.sec.tint{background:var(--surface)}
.sec.tint2{background:var(--surface-sunken)}
.sec.dark{background:var(--bg)}
.hero{background:
   radial-gradient(900px 480px at 50% -20%,rgba(94,23,235,.42),transparent 65%),
   radial-gradient(700px 380px at 85% 10%,rgba(31,72,255,.26),transparent 65%),
   var(--bg);
  color:var(--text);padding-block:var(--space-10) var(--space-10);text-align:center;
  border-bottom:1px solid var(--border)}
.hero .lead{max-width:820px;margin-inline:auto}
.hero .btns{justify-content:center}
.hero h1 em{font-style:normal;background:var(--ex-gradient-soft);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--ex-purple-300)}
.eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.14em;font-size:var(--text-xs);
  line-height:var(--lh-xs);font-weight:700;color:var(--accent);margin-bottom:var(--space-3)}
.lead{font-size:var(--text-lg);line-height:var(--lh-lg);color:var(--text-2);max-width:66ch}
.center{text-align:center}
.center .lead{margin-inline:auto}
.sec-head{max-width:920px;margin-bottom:var(--space-8)}
.center .sec-head{margin-inline:auto}

/* ---------- grid & cards ---------- */
.grid{display:grid;gap:var(--space-5)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--space-5);box-shadow:var(--shadow-sm);transition:box-shadow var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)}
.card:hover{border-color:var(--primary);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card h3{font-size:var(--text-lg);line-height:var(--lh-lg);margin-bottom:var(--space-2)}
.card p{font-size:var(--text-sm);line-height:var(--lh-sm);color:var(--text-2)}
.card p:last-child{margin-bottom:0}
.card .ico{width:40px;height:40px;border-radius:var(--radius-md);background:var(--accent-subtle);
  display:grid;place-items:center;margin-bottom:var(--space-3);font-size:19px;color:var(--text);line-height:1}
.sec.tint .card{background:var(--bg)}
.card.plain{box-shadow:none;background:transparent;border:0;padding:0}
.card.plain:hover{transform:none;box-shadow:none;border-color:transparent}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--space-5);margin-top:var(--space-7)}
.stat{text-align:center;padding:var(--space-5) var(--space-4);border-radius:var(--radius-lg);
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.sec.tint .stat{background:var(--bg)}
.stat .num{font-size:var(--text-3xl);line-height:1;font-weight:700;letter-spacing:var(--tracking-tight);
  display:block;margin-bottom:var(--space-2);
  background:var(--ex-gradient-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--primary)}
.hero .stat .num,.sec.dark .stat .num,.cta-band .stat .num{
  background:var(--ex-gradient-soft);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--ex-blue-300)}
.stat .lbl{font-size:var(--text-sm);line-height:var(--lh-sm);color:var(--text-2);display:block}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:center}
.split.rev .split-txt{order:2}
.media{border-radius:var(--radius-xl);background:var(--surface-sunken);border:1px solid var(--border);
  min-height:280px;display:grid;place-items:center;padding:var(--space-5);text-align:center;
  color:var(--text-2);font-size:var(--text-sm);line-height:var(--lh-sm);position:relative;overflow:hidden}
.media::before{content:"";position:absolute;inset:0;background:var(--ex-gradient-brand);opacity:.07}
.media>*{position:relative}
.media .mock{width:100%;max-width:400px}
.media.has-img{padding:0;background:none;border:0;min-height:0;overflow:hidden;display:block}
.media.has-img::before{display:none}
.media.has-img img{display:block;width:100%;height:auto;border-radius:var(--radius-xl)}
@media(max-width:640px){.media.has-img{border-radius:var(--radius-lg)}}


/* ---------- tick list ---------- */
.ticks{list-style:none;padding:0;margin:0}
.ticks li{position:relative;padding-left:34px;margin-bottom:var(--space-3);color:var(--text-2)}
.ticks li::before{content:"";position:absolute;left:0;top:5px;width:20px;height:20px;border-radius:var(--radius-full);
  background:var(--ex-gradient-brand);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/13px no-repeat, linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/13px no-repeat, linear-gradient(#000,#000);}

/* ---------- steps ---------- */
.steps{counter-reset:s;display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.step{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--space-6) var(--space-5) var(--space-5);box-shadow:var(--shadow-sm)}
.sec.tint .step{background:var(--bg)}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:-16px;left:var(--space-5);
  width:34px;height:34px;border-radius:var(--radius-full);background:var(--ex-gradient-brand);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:var(--text-sm)}
.step h3{font-size:var(--text-lg)}
.step p{font-size:var(--text-sm);line-height:var(--lh-sm);color:var(--text-2)}

/* ---------- quote ---------- */
.quote{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--space-6);box-shadow:var(--shadow-sm);max-width:900px;margin-inline:auto;position:relative;overflow:hidden}
.quote::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ex-gradient-brand)}
.sec.tint .quote{background:var(--bg)}
.quote p{font-size:var(--text-lg);line-height:var(--lh-lg);color:var(--text-2)}
.quote .who{font-weight:700;color:var(--text);font-size:var(--text-sm);margin:0}
.quote .who span{display:block;font-weight:500;color:var(--text-2);font-size:var(--text-sm)}

/* ---------- table ---------- */
.tbl-wrap{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--border);
  background:var(--surface);box-shadow:var(--shadow-sm);-webkit-overflow-scrolling:touch}
.sec.tint .tbl-wrap{background:var(--bg)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:var(--text-sm);line-height:var(--lh-sm)}
th,td{padding:var(--space-3) var(--space-4);text-align:left;border-bottom:1px solid var(--border);vertical-align:top;color:var(--text-2)}
thead th{background:var(--ex-gradient-brand);color:#fff;font-weight:600;font-size:var(--text-sm)}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:var(--surface-sunken)}

/* ---------- faq ---------- */
.faq{max-width:880px;margin-inline:auto}
.faq details{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
  margin-bottom:var(--space-3);box-shadow:var(--shadow-xs);transition:border-color var(--dur-fast) var(--ease)}
.sec.tint .faq details{background:var(--bg)}
.faq details[open]{border-color:var(--primary)}
.faq summary{cursor:pointer;padding:var(--space-4) var(--space-5);font-weight:600;font-size:var(--text-base);
  color:var(--text);list-style:none;display:flex;justify-content:space-between;gap:var(--space-4);align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;color:var(--accent);font-weight:400;line-height:1;flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq .ans{padding:0 var(--space-5) var(--space-4);color:var(--text-2);font-size:var(--text-sm);line-height:var(--lh-sm)}
.faq .ans p:last-child{margin-bottom:0}

/* ---------- badges & chips ---------- */
.badges{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center;margin-top:var(--space-6)}
.badge{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border-strong);background:var(--surface);
  border-radius:var(--radius-full);padding:6px 16px;font-weight:600;font-size:var(--text-xs);color:var(--text-2)}
.sec.tint .badge{background:var(--bg)}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-2)}
.chip{background:var(--primary-subtle);border:1px solid transparent;border-radius:var(--radius-full);
  padding:6px 14px;font-size:var(--text-sm);font-weight:500;color:var(--text)}
.hero .chip,.sec.dark .chip,.cta-band .chip{background:var(--primary-subtle);color:var(--text-2);border-color:var(--border-strong)}

/* ---------- cta band ---------- */
.cta-band{background:
   radial-gradient(800px 400px at 20% 0%,rgba(94,23,235,.40),transparent 62%),
   radial-gradient(800px 400px at 80% 100%,rgba(31,72,255,.34),transparent 62%),
   var(--bg);
  color:var(--text);text-align:center;padding-block:var(--space-10);border-top:1px solid var(--border)}
.cta-band p{color:var(--text-2);max-width:660px;margin-inline:auto}
.cta-band .btns{justify-content:center}
.cta-band a.btn.btn-outline,.cta-band a.btn.btn-dark,.hero a.btn.btn-outline,.hero a.btn.btn-dark,
.sec.dark a.btn.btn-outline,.sec.dark a.btn.btn-dark{color:var(--text);border-color:var(--border-strong)}
.cta-band a.btn.btn-outline:hover,.cta-band a.btn.btn-dark:hover,.hero a.btn.btn-outline:hover,
.hero a.btn.btn-dark:hover,.sec.dark a.btn.btn-outline:hover,.sec.dark a.btn.btn-dark:hover{
  color:var(--primary-hover);border-color:var(--primary);background:var(--primary-subtle)}

/* ---------- posts ---------- */
.posts{display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.post{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:var(--space-5);box-shadow:var(--shadow-xs);display:flex;flex-direction:column;
  transition:box-shadow var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.sec.tint .post{background:var(--bg)}
.post:hover{border-color:var(--primary);box-shadow:var(--shadow-md)}
.post .meta{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--accent);margin-bottom:var(--space-2)}
.post h3{font-size:var(--text-base);line-height:var(--lh-base);margin-bottom:var(--space-2)}
.post p{color:var(--text-2);font-size:var(--text-sm);line-height:var(--lh-sm);flex:1}
.post .more{font-weight:600;color:var(--link);font-size:var(--text-sm)}

/* ---------- form ---------- */
.form{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--space-6);box-shadow:var(--shadow-sm)}
.sec.tint .form{background:var(--bg)}
.field{margin-bottom:var(--space-4);display:flex;flex-direction:column;gap:6px}
.field label{font-weight:600;font-size:var(--text-sm);color:var(--text)}
.field input,.field textarea,.field select{width:100%;font:inherit;font-size:var(--text-sm);
  padding:var(--space-3);border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--text)}
.sec.tint .field input,.sec.tint .field textarea,.sec.tint .field select{background:var(--bg)}
.field input::placeholder,.field textarea::placeholder{color:var(--text-muted)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 30%,transparent)}
.field textarea{min-height:130px;resize:vertical}
.field input[type=checkbox]{width:auto;margin-right:var(--space-2)}
.form .hint{font-size:var(--text-xs);line-height:var(--lh-xs);color:var(--text-2)}

/* ---------- legal ---------- */
.legal{max-width:820px;margin-inline:auto}
.legal h2{font-size:var(--text-xl);line-height:var(--lh-xl);margin-top:var(--space-7)}
.legal .upd{color:var(--text-2);font-size:var(--text-sm)}
.legal .note{background:var(--accent-subtle);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:var(--space-4) var(--space-5);font-size:var(--text-sm);line-height:var(--lh-sm);color:var(--text-2)}

/* ---------- footer ---------- */
.ftr{background:var(--bg);color:var(--text-2);padding-block:var(--space-9) var(--space-5);
  font-size:var(--text-sm);line-height:var(--lh-sm);border-top:1px solid var(--border)}
.ftr .cols{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:var(--space-6)}
.ftr h3{color:var(--text);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);
  text-transform:uppercase;margin-bottom:var(--space-4);font-weight:700}
.ftr ul{list-style:none;padding:0;margin:0}
.ftr li{margin-bottom:var(--space-2)}
.ftr a{color:var(--text-2)}
.ftr a:hover{color:var(--primary-hover);text-decoration:none}
.ftr .about p{color:var(--text-2);font-size:var(--text-sm);max-width:34ch}
.ftr .about .logo img{height:30px;margin-bottom:var(--space-4)}
.ftr .bottom{border-top:1px solid var(--border);margin-top:var(--space-7);padding-top:var(--space-5);
  display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:space-between;color:var(--text-muted);font-size:var(--text-xs)}


/* ---------- cookie consent ---------- */
.cookie{position:fixed;left:var(--space-4);right:var(--space-4);bottom:var(--space-4);z-index:900;
  background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);max-width:var(--wrap);margin-inline:auto;
  animation:cookie-in var(--dur-slow) var(--ease) both}
@keyframes cookie-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.cookie{animation:none}}
.cookie-in{display:flex;align-items:center;gap:var(--space-5);padding:var(--space-4) var(--space-5);flex-wrap:wrap}
.cookie-h{font-weight:700;font-size:var(--text-base);color:var(--text);margin:0 0 4px}
.cookie-t{font-size:var(--text-sm);line-height:var(--lh-sm);color:var(--text-2);margin:0;max-width:70ch}
.cookie-t a{color:var(--link);text-decoration:underline}
.cookie-btns{display:flex;gap:var(--space-2);margin-left:auto;flex-shrink:0}
.cookie-btns .btn{white-space:nowrap}
/* buttons in the banner are <button>, so mirror the anchor rules */
button.btn.btn-primary{background:var(--ex-gradient-brand);color:#fff;border-color:transparent;box-shadow:var(--shadow-sm)}
button.btn.btn-primary:hover{background:linear-gradient(135deg,#5316CD 0%,#1D40DF 100%);color:#fff;box-shadow:var(--shadow-md)}
button.btn.btn-outline{background:transparent;color:var(--text);border-color:var(--border-strong)}
button.btn.btn-outline:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-subtle)}
.ftr .bottom a[data-cookie-settings]{color:var(--text-muted);text-decoration:underline}
.ftr .bottom a[data-cookie-settings]:hover{color:var(--primary-hover)}
@media(max-width:860px){
  .cookie-in{gap:var(--space-3);padding:var(--space-4)}
  .cookie-btns{margin-left:0;width:100%}
  .cookie-btns .btn{flex:1}
}
@media(max-width:480px){
  .cookie{left:var(--space-2);right:var(--space-2);bottom:var(--space-2)}
}

/* ---------- responsive ---------- */
@media(max-width:1040px){
  .cols-4{grid-template-columns:repeat(2,1fr)}
  .cols-3{grid-template-columns:repeat(2,1fr)}
  .ftr .cols{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:var(--space-6)}
  .split.rev .split-txt{order:0}
}
@media(max-width:860px){
  .burger{display:inline-flex}
  .hdr .wrap{flex-wrap:wrap;position:relative;gap:var(--space-3)}
  .nav{display:none;width:100%;order:3;flex-direction:column;align-items:stretch;gap:0;
    padding:var(--space-2) 0 var(--space-3);border-top:1px solid var(--border);margin-top:var(--space-2)}
  .nav.open{display:flex}
  .nav a,.nav .top{width:100%;text-align:left;font-size:var(--text-base);padding:var(--space-3)}
  .nav ul{position:static;display:none;background:none;border:0;box-shadow:none;
    padding:0 0 var(--space-2) var(--space-4);min-width:0}
  .nav li:hover>ul,.nav li:focus-within>ul{display:none}
  .nav li>ul.open,.nav li:hover>ul.open,.nav li:focus-within>ul.open{display:block}
  .hdr-cta{width:100%;order:4;margin-left:0;display:none;gap:var(--space-2);padding-bottom:var(--space-3)}
  .hdr-cta.open{display:flex}
  .hdr-cta .btn{flex:1}
}
@media(max-width:860px){
  .btn{min-height:44px}
  .nav a,.nav .top{min-height:44px;display:flex;align-items:center}
  .faq summary{min-height:44px}
  .lang{min-height:36px;display:inline-flex;align-items:center}
}
@media(max-width:640px){
  :root{--space-10:64px;--text-4xl:34px;--text-3xl:27px;--text-2xl:22px;--text-xl:19px;--text-lg:17px}
  .wrap{padding-inline:var(--space-4)}
  .cols-2,.cols-3,.cols-4{grid-template-columns:1fr}
  .posts{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr;gap:var(--space-3)}
  .btns .btn{width:100%}
  .quote{padding:var(--space-5)}
  .form{padding:var(--space-4)}
  .ftr .cols{grid-template-columns:1fr;gap:var(--space-5)}
  .media{min-height:200px}
  .hero{padding-block:var(--space-5) var(--space-4)}
}

/* Compact consent banner on phones. Must stay after the general .cookie rules
   above: equal specificity means source order decides, and an earlier
   @media block loses to a later unconditional one. At 375x812 the full-size
   banner was 260px (32% of the viewport) and buried both hero CTAs. */
@media(max-width:640px){
  .cookie{left:var(--space-2);right:var(--space-2);bottom:var(--space-2)}
  .cookie-in{gap:var(--space-2);padding:var(--space-3);flex-wrap:nowrap;
    flex-direction:column;align-items:stretch}
  /* The heading is decorative next to the body text on a phone; hiding it here
     (not removing it from the DOM) keeps the dialog's aria-labelledby intact. */
  .cookie-h{display:none}
  .cookie-t{font-size:var(--text-xs);line-height:1.3;max-width:none}
  .cookie-btns{margin-left:0;width:100%;display:grid;grid-template-columns:1fr 1fr;
    gap:var(--space-2);flex-direction:row}
  .cookie-btns .btn{width:100%;justify-content:center;text-align:center;
    padding-block:6px;font-size:var(--text-xs)}
  /* Put the hero CTAs on one row so both clear the banner on a 812px phone.
     flex:1 1 0 means a hero with a single CTA still gets a full-width button. */
  .hero .btns{margin-top:var(--space-3);gap:var(--space-2);flex-wrap:nowrap}
  .hero .btns .btn{flex:1 1 0;min-width:0;justify-content:center;text-align:center;
    padding-inline:var(--space-3);font-size:var(--text-sm)}
  .hero .lead{margin-bottom:0}
  /* The hero chip list wraps to ~4 rows at 375px and pushes the CTA off-screen.
     One scrollable row instead; overflow is contained so the page never scrolls
     sideways. */
  .hero .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    justify-content:flex-start;padding-bottom:2px}
  .hero .chips::-webkit-scrollbar{display:none}
  .hero .chip{flex:0 0 auto}
  /* Compact the hero type on phones so the CTA stays above the fold even on the
     pages with the longest headline + lead (platform-overview is the worst case). */
  .hero h1{font-size:28px;line-height:1.12}
  .hero .lead{font-size:var(--text-base);line-height:var(--lh-base)}
  .hero .eyebrow{margin-bottom:var(--space-1)}
}

/* --- Blog: article body, pagination, tag bar ------------------------------ */
.article{padding-block:var(--space-7)}
.article .wrap{max-width:50rem}
.article h1{margin-bottom:var(--space-3)}
.article h2{font-size:clamp(22px,2.4vw,28px);margin-top:var(--space-6)}
.article p{font-size:var(--text-base);line-height:var(--lh-lg)}
.article .lead{font-size:var(--text-lg);color:var(--text);margin-bottom:var(--space-5)}
.article .faq{margin-block:var(--space-4)}
.article .btns{margin-top:var(--space-7)}
.crumbs{font-size:var(--text-sm);margin-bottom:var(--space-3)}
.crumbs a{color:var(--text-2)}
.post-meta{color:var(--text-2);font-size:var(--text-sm);margin-bottom:var(--space-3)}
.post-meta time{color:var(--text-2)}
/* Tag chips are links here, so they need affordance the static chips lack. */
.tagbar{margin-bottom:var(--space-6)}
a.chip{text-decoration:none;transition:border-color var(--dur-fast) var(--ease)}
a.chip:hover{border-color:var(--primary);text-decoration:none}
a.chip.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.post h3 a{color:inherit;text-decoration:none}
.post h3 a:hover{color:var(--primary-hover)}
.pager{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-6);
  align-items:center;justify-content:center}
.pager a{min-width:40px;padding:var(--space-2) var(--space-3);border:1px solid var(--border);
  border-radius:var(--radius-md);text-align:center;color:var(--text-2);text-decoration:none}
.pager a:hover{border-color:var(--primary);color:var(--text);text-decoration:none}
.pager a.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.pager a.next{min-width:auto}
@media(max-width:640px){
  .article{padding-block:var(--space-5)}
  .article h2{margin-top:var(--space-5)}
}