/* ==========================================================================
   BulPays design system
   Brand: red #E3242B · green #00A651 · white · ink #0B1220
   ========================================================================== */

:root {
  /* brand */
  --red: #E3242B;
  --red-dark: #B81C22;
  --red-soft: #FDECEC;
  --green: #00A651;
  --green-dark: #008542;
  --green-soft: #E6F6EE;

  /* neutrals */
  --ink: #0B1220;
  --ink-2: #1D2739;
  --muted: #5B6779;
  --muted-2: #8894A6;
  --line: #E4E8EF;
  --line-2: #EEF1F6;
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --header-bg: rgba(255,255,255,.88);
  --accent-text: var(--green-dark);
  --danger-text: var(--red-dark);
  --plate: #F7F9FC;
  --bg-soft: #F7F9FC;
  --bg-dark: #0B1220;

  /* type */
  --font: 'Plus Jakarta Sans', 'Manrope', -apple-system, BlinkMacSystemFont,
          'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* shape */
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --shadow-sm: 0 1px 2px rgba(11,18,32,.06), 0 1px 3px rgba(11,18,32,.05);
  --shadow: 0 4px 14px rgba(11,18,32,.07), 0 1px 3px rgba(11,18,32,.04);
  --shadow-lg: 0 18px 48px rgba(11,18,32,.12), 0 4px 12px rgba(11,18,32,.05);

  --wrap: 1180px;
  --gutter: 24px;
}

/* ------------------------------- reset --------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.18; margin: 0 0 .5em; letter-spacing: -.02em; font-weight: 800; }
h1 { font-size: clamp(2.1rem, 1.35rem + 2.6vw, 3.5rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.65rem, 1.25rem + 1.5vw, 2.4rem); letter-spacing: -.03em; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }
li { margin-bottom: .4rem; }
strong { font-weight: 700; color: var(--ink); }
small { font-size: .85rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 4px; }

/* ------------------------------ layout --------------------------------- */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
/* Large displays get a wider column instead of two empty margins. */
@media (min-width: 1400px) { :root { --wrap: 1320px; --gutter: 32px; } }
@media (min-width: 1800px) { :root { --wrap: 1440px; } }
.section { padding: clamp(56px, 7vw, 96px) 0; }
.section--soft { background: var(--bg-soft); }
.section--dark { background: var(--bg-dark); color: #C7D0DE; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section-head { max-width: 720px; margin-bottom: 44px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--muted); font-size: 1.08rem; margin-bottom: 0; }
.section--dark .section-head p { color: #9AA7BA; }

.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-2f { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 880px) { .grid-2f { grid-template-columns: 1fr; } }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent-text); background: var(--green-soft);
  padding: 7px 14px; border-radius: 999px; margin-bottom: 18px;
}
.eyebrow--red { color: var(--danger-text); background: var(--red-soft); }
.section--dark .eyebrow { background: rgba(0,166,81,.16); color: #46D08B; }

/* ------------------------------ buttons -------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: inherit; font-weight: 700; font-size: 1rem;
  padding: 14px 26px; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--green); color: #fff; box-shadow: 0 6px 18px rgba(0,166,81,.28); }
.btn-primary:hover { background: var(--green-dark); box-shadow: 0 10px 26px rgba(0,166,81,.34); color: #fff; }
.btn-red { background: var(--red); color: #fff; box-shadow: 0 6px 18px rgba(227,36,43,.26); }
.btn-red:hover { background: var(--red-dark); color: #fff; }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.32); }
.btn-outline-light:hover { background: rgba(255,255,255,.1); color: #fff; }
.btn-sm { padding: 10px 18px; font-size: .92rem; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ------------------------------- header -------------------------------- */
.site-header {
  --header-h: 76px;
  position: sticky; top: 0; z-index: 100;
  background: var(--header-bg); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-2);
  transition: box-shadow .25s ease;
}
.site-header[data-scrolled] { --header-h: 64px; box-shadow: 0 6px 26px rgba(11,18,32,.08); }
:root[data-theme="dark"] .site-header[data-scrolled] { box-shadow: 0 6px 26px rgba(0,0,0,.45); }

/* Full-bleed three-zone row: brand left, nav centred, actions right.
   The side tracks are at least as wide as their content and share whatever
   is left over equally, so the nav sits on the page's centre line while
   there is slack and simply centres in the remaining space when there
   is not. */
.header-inner {
  display: grid; align-items: center;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  max-width: none; margin-inline: 0;
  gap: clamp(14px, 1.7vw, 30px);
  padding-inline: clamp(16px, 2.6vw, 56px);
  height: var(--header-h);
  transition: height .25s cubic-bezier(.22,.7,.3,1);
}
/* With the burger the nav becomes a fixed panel. A fixed child of a grid is
   confined to its grid area in Chrome, so the compact bar goes back to flex
   and the panel spans the full width of the header again. */
html[data-nav="compact"] .header-inner { display: flex; grid-template-columns: none; }
html[data-nav="compact"] .nav-toggle { margin-inline-start: auto; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; justify-self: start; flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.brand img {
  width: 38px; height: 38px;
  transition: width .25s ease, height .25s ease, transform .3s cubic-bezier(.22,.7,.3,1);
}
.brand:hover img { transform: rotate(-7deg) scale(1.07); }
.site-header[data-scrolled] .brand img { width: 32px; height: 32px; }
.brand span { font-size: 1.3rem; font-weight: 800; color: var(--ink); letter-spacing: -.03em; }

.nav {
  display: flex; align-items: center; min-width: 0; justify-self: center;
  gap: clamp(0px, .18vw, 4px);
}
.nav a {
  color: var(--ink-2); font-weight: 600; white-space: nowrap;
  font-size: clamp(.86rem, .8rem + .1vw, .93rem);
  padding: 9px clamp(7px, .68vw, 12px); border-radius: 10px; text-decoration: none;
  transition: background-color .16s ease, color .16s ease;
}
.nav a:hover { background: var(--bg-soft); color: var(--ink); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--accent-text); background: var(--green-soft); }

.header-actions { display: flex; align-items: center; gap: 10px; justify-self: end; flex-shrink: 0; }

/* The call to action lives on the right of the bar on a wide screen and
   inside the panel once the nav collapses. Exactly one of the two is
   hidden, never both. */
.header-cta { display: none; }
html:not([data-nav="compact"]) .header-cta { display: inline-flex; }
html:not([data-nav="compact"]) .nav .btn { display: none; }
.lang-switch { display: flex; align-items: center; gap: 2px; background: var(--bg-soft); border-radius: 999px; padding: 3px; }
.lang-switch a {
  font-size: .82rem; font-weight: 700; padding: 5px 11px; border-radius: 999px;
  color: var(--muted); text-decoration: none; text-transform: uppercase; letter-spacing: .04em;
}
.lang-switch a[aria-current="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.lang-switch a:hover { text-decoration: none; color: var(--ink); }

.nav-toggle {
  display: none; justify-self: end;
  background: none; border: 1px solid var(--line); border-radius: 10px;
  width: 44px; height: 44px; cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ''; display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s;
}
.nav-toggle span::before { transform: translateY(-6px); }
.nav-toggle span::after { transform: translateY(4px); }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-2px) rotate(-45deg); }

/* Compact (burger) navigation. [data-nav] lives on <html>: the inline head
   script sets it from the viewport, then main.js corrects it by measuring
   whether the links actually fit. So a longer label set (EN, or a new menu
   item) collapses to the burger instead of colliding with the buttons. */
html[data-nav="compact"] .nav-toggle { display: flex; }
html[data-nav="compact"] .nav {
  /* justify-self would shrink-to-fit and centre the fixed panel, so reset it. */
  position: fixed; inset: var(--header-h, 76px) 0 auto 0; justify-self: auto;
  flex-direction: column; align-items: stretch;
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 12px var(--gutter) 22px;
  gap: 2px; margin: 0; max-height: calc(100dvh - var(--header-h, 76px)); overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
html[data-nav="compact"] .nav[hidden] { display: none; }
html[data-nav="compact"] .nav a { padding: 13px 12px; font-size: 1.05rem; }
html[data-nav="compact"] .nav .btn { margin-top: 10px; }

/* Without JavaScript nothing sets the attribute, so keep the inline nav from
   spilling out of the bar on a narrow screen. */
@media (max-width: 1240px) {
  html:not([data-nav]) .nav { flex-wrap: wrap; justify-content: flex-end; }
}

/* -------------------------------- hero --------------------------------- */
.hero { position: relative; overflow: hidden; padding: clamp(56px, 7vw, 92px) 0 clamp(48px, 6vw, 80px); }
.hero::before {
  content: ''; position: absolute; inset: -30% -10% auto auto; width: 720px; height: 720px;
  background: radial-gradient(circle at 30% 30%, rgba(0,166,81,.13), transparent 62%),
              radial-gradient(circle at 72% 62%, rgba(227,36,43,.11), transparent 62%);
  pointer-events: none; z-index: 0;
}
.hero .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } }
.hero p.lead { font-size: 1.16rem; color: var(--muted); max-width: 560px; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 20px 30px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.hero-stats div strong { display: block; font-size: 1.6rem; font-weight: 800; color: var(--ink); letter-spacing: -.03em; line-height: 1.2; }
.hero-stats div span { font-size: .88rem; color: var(--muted); }

/* --------------------------- checkout mockup --------------------------- */
.mock {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg); padding: 26px; max-width: 430px; margin-inline: auto;
}
.mock-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.mock-top .dots { display: flex; gap: 6px; }
.mock-top .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); display: block; }
.mock-amount { font-size: 2.1rem; font-weight: 800; color: var(--ink); letter-spacing: -.03em; }
.mock-label { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.mock-field { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
.mock-field span { color: var(--muted-2); font-size: .95rem; }
.mock-field b { color: var(--ink); font-weight: 600; font-size: .95rem; }
.mock-pay { background: var(--green); color: #fff; text-align: center; padding: 14px; border-radius: var(--r); font-weight: 700; margin-top: 16px; }
.mock-secure { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 14px; font-size: .8rem; color: var(--muted); text-align: center; }
.mock-secure svg { width: 15px; height: 15px; flex-shrink: 0; }

/* -------------------------------- cards -------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card h3 { margin-bottom: .45em; }
.card p { color: var(--muted); margin-bottom: 0; font-size: .98rem; }
.card p + .card-more { margin-top: 14px; }
.card-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .93rem; color: var(--accent-text); white-space: nowrap; }
.card-more svg { width: 16px; height: 16px; flex-shrink: 0; }
.section--dark .card { background: #131C2E; border-color: #1F2B41; }
.section--dark .card p { color: #9AA7BA; }

.ico {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: var(--green-soft); color: var(--accent-text); margin-bottom: 18px;
}
.ico svg { width: 23px; height: 23px; }
.ico--red { background: var(--red-soft); color: var(--danger-text); }
.section--dark .ico { background: rgba(0,166,81,.15); color: #46D08B; }

/* feature list with check marks */
.checks { list-style: none; padding: 0; margin: 0; }
.checks li { position: relative; padding-left: 30px; margin-bottom: .6rem; color: var(--muted); }
.checks li::before {
  content: ''; position: absolute; left: 0; top: .42em; width: 18px; height: 18px; border-radius: 50%;
  background: var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008542' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
}
.section--dark .checks li { color: #9AA7BA; }
.section--dark .checks li::before { background-color: rgba(0,166,81,.18); }

/* ------------------------------ calculator ----------------------------- */
.calc {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg); padding: clamp(24px, 3.4vw, 40px);
}
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 860px) { .calc-grid { grid-template-columns: 1fr; gap: 28px; } }
.calc label { display: block; font-weight: 700; color: var(--ink); margin-bottom: 8px; font-size: .95rem; }
.calc .hint { font-size: .85rem; color: var(--muted); font-weight: 500; }
.calc-input-wrap { position: relative; margin-bottom: 20px; }
.calc-input-wrap .cur {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-weight: 700; pointer-events: none;
}
.calc input[type="number"], .calc select, .form-control {
  width: 100%; font: inherit; font-weight: 600; color: var(--ink);
  padding: 14px 16px; border: 2px solid var(--line); border-radius: var(--r);
  background: var(--surface); color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease;
}
.calc input[type="number"] { padding-left: 38px; font-size: 1.15rem; }
.calc input:focus, .calc select:focus, .form-control:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(0,166,81,.13);
}
.calc input[type="range"] { width: 100%; accent-color: var(--green); margin-bottom: 22px; }
.calc-toggle { display: flex; gap: 6px; background: var(--bg-soft); padding: 4px; border-radius: 999px; margin-bottom: 22px; }
.calc-toggle button {
  flex: 1; font: inherit; font-weight: 700; font-size: .92rem; padding: 9px 8px;
  border: 0; background: transparent; color: var(--muted); border-radius: 999px; cursor: pointer;
}
.calc-toggle button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

.calc-out { background: var(--bg-soft); border-radius: var(--r-lg); padding: 26px; }
.calc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.calc-row:last-of-type { border-bottom: 0; }
.calc-row .k { color: var(--muted); font-size: .95rem; }
.calc-row .v { font-weight: 700; color: var(--ink); font-size: 1.1rem; white-space: nowrap; }
.calc-row.is-market .v { color: var(--danger-text); }
.calc-row.is-ours .v { color: var(--accent-text); }
.calc-save {
  margin-top: 18px; background: linear-gradient(135deg, #00A651, #059c56); color: #fff;
  border-radius: var(--r); padding: 20px 22px; text-align: center;
}
.calc-save .k { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; opacity: .9; }
.calc-save .v { font-size: 2.15rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; }
.calc-note { font-size: .82rem; color: var(--muted); margin: 16px 0 0; }

/* ------------------------------- tables -------------------------------- */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
/* Shadow on the edge that still has content to scroll to. Pure CSS, no markup. */
.table-scroll {
  background-image:
    linear-gradient(to right, var(--surface) 30%, transparent),
    linear-gradient(to left,  var(--surface) 30%, transparent),
    radial-gradient(farthest-side at 0 50%,   rgba(11,18,32,.16), rgba(11,18,32,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(11,18,32,.16), rgba(11,18,32,0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 44px 100%, 44px 100%, 15px 100%, 15px 100%;
  background-attachment: local, local, scroll, scroll;
}
table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 560px; }
.table-scroll--sm table { min-width: 420px; font-size: .9rem; }
.table-scroll--sm th, .table-scroll--sm td { padding: 11px 14px; }
caption { text-align: left; font-weight: 800; color: var(--ink); padding: 20px 22px 4px; font-size: 1.05rem; }
th, td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--line-2); }
thead th { background: var(--bg-soft); font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody th { font-weight: 700; color: var(--ink); }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ------------------------------ POS cards ------------------------------ */
.pos-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease; }
.pos-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.pos-media { background: var(--plate); padding: 26px; display: grid; place-items: center; min-height: 210px; border-bottom: 1px solid var(--line-2); }
.pos-media img, .pos-media svg { max-height: 170px; width: auto; }
.pos-body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.pos-body h3 { font-size: 1.08rem; margin-bottom: 4px; }
.pos-kind { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--accent-text); margin-bottom: 12px; }
.pos-body ul { list-style: none; padding: 0; margin: 0; font-size: .9rem; color: var(--muted); }
.pos-body li { position: relative; padding-left: 16px; margin-bottom: .3rem; }
.pos-body li::before { content: ''; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--green); }

/* ------------------------------- methods ------------------------------- */
/* --------------------------------- FAQ --------------------------------- */
.faq { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  cursor: pointer; padding: 20px 56px 20px 24px; font-weight: 700; color: var(--ink);
  position: relative; list-style: none; font-size: 1.02rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 24px; top: 50%; width: 11px; height: 11px;
  border-right: 2.5px solid var(--muted); border-bottom: 2.5px solid var(--muted);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq summary:hover { background: var(--bg-soft); }
.faq .faq-body { padding: 0 24px 22px; color: var(--muted); }
.faq .faq-body p:last-child { margin-bottom: 0; }

/* -------------------------------- steps -------------------------------- */
.steps { counter-reset: s; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.step { position: relative; padding-top: 56px; }
.step::before {
  counter-increment: s; content: counter(s);
  position: absolute; top: 0; left: 0; width: 42px; height: 42px; border-radius: 12px;
  background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.05rem;
}
.step h3 { font-size: 1.08rem; }
.step p { color: var(--muted); font-size: .97rem; margin-bottom: 0; }

/* --------------------------------- CTA --------------------------------- */
.cta-band {
  background: linear-gradient(120deg, #0B1220 0%, #10203A 55%, #0C2B1E 100%);
  border-radius: var(--r-xl); padding: clamp(34px, 5vw, 60px); text-align: center; color: #C7D0DE;
  position: relative; overflow: hidden;
}
.cta-band::after {
  content: ''; position: absolute; right: -80px; bottom: -120px; width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(0,166,81,.3), transparent 66%); pointer-events: none;
}
.cta-band h2 { color: #fff; }
.cta-band p { max-width: 560px; margin-inline: auto; color: #9AA7BA; }
.cta-band .btn-row { justify-content: center; margin-top: 26px; position: relative; z-index: 1; }

/* --------------------------------- form -------------------------------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; }
.field.full { grid-column: 1 / -1; }
.field label { font-weight: 700; color: var(--ink); font-size: .93rem; margin-bottom: 7px; }
.field label .req { color: var(--red); }
textarea.form-control { min-height: 130px; resize: vertical; font-weight: 500; }
select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6779' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 42px; }
.consent { display: flex; gap: 11px; align-items: flex-start; font-size: .9rem; color: var(--muted); }
.consent input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--green); flex-shrink: 0; }
.hp { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; width: 0; }
.form-msg { border-radius: var(--r); padding: 15px 18px; font-weight: 600; font-size: .95rem; margin-bottom: 18px; }
.form-msg.ok { background: var(--green-soft); color: var(--accent-text); }
.form-msg.err { background: var(--red-soft); color: var(--danger-text); }
.field-err { color: var(--danger-text); font-size: .84rem; font-weight: 600; margin-top: 5px; }
.form-control[aria-invalid="true"] { border-color: var(--red); }

/* -------------------------------- footer ------------------------------- */
.site-footer { background: var(--bg-dark); color: #8894A6; padding: 64px 0 28px; font-size: .93rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .09em; margin-bottom: 16px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .5rem; }
.site-footer a { color: #8894A6; display: inline-block; }
.site-footer a:hover { color: #fff; text-decoration: none; }
.footer-brand img { width: 40px; height: 40px; margin-bottom: 14px; }
.footer-brand p { max-width: 320px; }
.footer-bottom {
  margin-top: 48px; padding-top: 22px; border-top: 1px solid #1F2B41;
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; font-size: .85rem;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 18px; }
.badge-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.badge-pill { border: 1px solid #1F2B41; border-radius: 999px; padding: 6px 13px; font-size: .78rem; font-weight: 600; color: #C7D0DE; }

/* ------------------------------ utilities ------------------------------ */
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-3 { margin-top: 26px; } .mt-4 { margin-top: 36px; }
.muted { color: var(--muted); }
.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff;
  padding: 12px 20px; z-index: 200; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }
.prose { max-width: 760px; }
.prose h2 { font-size: 1.5rem; margin-top: 2.2em; }
.prose h3 { font-size: 1.12rem; margin-top: 1.8em; }
.prose ul { color: var(--muted); }
.breadcrumbs { font-size: .85rem; color: var(--muted-2); padding: 20px 0 0; }
.breadcrumbs a { color: var(--muted); }
.page-head { padding: clamp(40px, 5vw, 64px) 0 clamp(28px, 4vw, 44px); }
.page-head p.lead { font-size: 1.12rem; color: var(--muted); max-width: 680px; margin-bottom: 0; }

/* ------------------------- touch-target sizing ------------------------- */
/* Anything tappable gets a comfortable target on touch devices. */
@media (hover: none), (max-width: 760px) {
  .lang-switch a { padding: 13px 15px; }
  .site-footer li { margin-bottom: .15rem; }
  .site-footer a { padding: 9px 0; }
  .footer-legal a, .footer-legal span { padding: 6px 0; }
  .breadcrumbs a { padding: 6px 0; display: inline-block; }
  .faq summary { padding-block: 22px; }
}
/* The honeypot is off-screen, but keep it from ever triggering an iOS zoom. */
.hp input { font-size: 16px; }

/* ------------------------------ imagery -------------------------------- */
.figure {
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--bg-soft); border: 1px solid var(--line);
}
.figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.figure--43 img { aspect-ratio: 4 / 3; }
.figure--169 img { aspect-ratio: 16 / 9; }

.media-card {
  position: relative; display: flex; align-items: flex-end;
  min-height: 300px; border-radius: var(--r-lg); overflow: hidden;
  text-decoration: none; color: #fff; isolation: isolate;
}
.media-card img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2; transition: transform .45s ease;
}
.media-card::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(11,18,32,.88) 0%, rgba(11,18,32,.38) 46%, rgba(11,18,32,0) 76%);
}
.media-card .media-body { padding: 24px; }
.media-card h3 { color: #fff; margin-bottom: .3em; font-size: 1.12rem; }
.media-card p { color: rgba(255,255,255,.84); font-size: .95rem; margin: 0; }
.media-card:hover { text-decoration: none; }
.media-card:hover img { transform: scale(1.045); }

.banner { border-radius: var(--r-xl); overflow: hidden; }
.banner img { width: 100%; display: block; aspect-ratio: 21 / 9; object-fit: cover; }
@media (max-width: 700px) { .banner img { aspect-ratio: 16 / 10; } }

.section--dark .figure { border-color: #1F2B41; background: #131C2E; }

/* ----------------------------- nav dropdowns --------------------------- */
.has-menu { position: relative; }
.nav-parent {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-weight: 600; white-space: nowrap;
  font-size: clamp(.86rem, .8rem + .1vw, .93rem);
  padding: 9px clamp(7px, .68vw, 12px); border: 0; border-radius: 10px;
  background: none; color: var(--ink-2); cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.nav-parent svg { width: 14px; height: 14px; transition: transform .18s ease; }
.nav-parent:hover { background: var(--bg-soft); color: var(--ink); }
.nav-parent[aria-expanded="true"] svg { transform: rotate(180deg); }

.submenu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 120;
  min-width: 268px; padding: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 1px;
}
.submenu[hidden] { display: none; }
.submenu a {
  padding: 10px 13px; border-radius: 9px; font-size: .93rem; font-weight: 600;
  color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
.submenu a:hover { background: var(--bg-soft); color: var(--ink); text-decoration: none; }
.submenu a[aria-current="page"] { color: var(--accent-text); background: var(--green-soft); }
.submenu-all { color: var(--accent-text) !important; border-bottom: 1px solid var(--line-2);
  border-radius: 9px 9px 0 0; margin-bottom: 5px; padding-bottom: 12px !important; }

html[data-nav="compact"] .has-menu { width: 100%; }
html[data-nav="compact"] .nav-parent {
  width: 100%; justify-content: space-between; padding: 13px 12px; font-size: 1.05rem;
}
html[data-nav="compact"] .submenu {
  position: static; min-width: 0; box-shadow: none; border: 0;
  border-left: 2px solid var(--line); border-radius: 0;
  margin: 2px 0 8px 14px; padding: 2px 0 2px 10px;
  animation: none;
}
html[data-nav="compact"] .submenu a { padding: 11px 10px; }
html[data-nav="compact"] .submenu-all { border-bottom: 0; margin-bottom: 0; padding-bottom: 11px !important; }

/* Nothing in the bar is allowed to shrink: the measurement in main.js relies
   on the nav's natural width, and a squeezed CTA is what we are avoiding. */
.nav > * { flex-shrink: 0; }
.nav .btn { flex-shrink: 0; }

/* Bridge the gap between the nav item and its dropdown, so moving the mouse
   down onto the menu never crosses dead space and closes it. */
html:not([data-nav="compact"]) .submenu::before {
  content: ''; position: absolute;
  top: -14px; left: 0; right: 0; height: 14px;
}
html:not([data-nav="compact"]) .submenu {
  animation: bp-pop .18s cubic-bezier(.22,.7,.3,1) both; transform-origin: top left;
}

/* ==========================================================================
   Dark theme
   The palette is redefined at the token level; components follow along.
   ========================================================================== */
:root[data-theme="dark"] {
  --bg:        #0B1220;
  --bg-soft:   #0F1829;
  --bg-dark:   #060B14;
  --surface:   #141E31;
  --header-bg: rgba(11,18,32,.86);
  --plate:     #EEF2F7;

  --ink:     #F1F5FA;
  --ink-2:   #C9D3E1;
  --muted:   #93A1B5;
  --muted-2: #74829A;

  --line:   #223047;
  --line-2: #1A2436;

  --green-soft: rgba(0,166,81,.17);
  --red-soft:   rgba(227,36,43,.17);
  --accent-text: #46D08B;
  --danger-text: #FF8A8E;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 4px 14px rgba(0,0,0,.42), 0 1px 3px rgba(0,0,0,.3);
  --shadow-lg: 0 18px 48px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.35);

  color-scheme: dark;
}

/* Sections that are dark by design need to stay darker than the surface. */
:root[data-theme="dark"] .section--dark { background: var(--bg-dark); }
:root[data-theme="dark"] .section--dark .card,
:root[data-theme="dark"] .section--dark .figure { background: var(--surface); border-color: var(--line); }
:root[data-theme="dark"] .section--dark .method { background: var(--surface); border-color: var(--line); }
:root[data-theme="dark"] .site-footer { background: var(--bg-dark); }
:root[data-theme="dark"] .footer-bottom,
:root[data-theme="dark"] .badge-pill { border-color: var(--line); }

/* Form controls: a readable chevron and placeholder on a dark field. */
:root[data-theme="dark"] select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393A1B5' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] ::placeholder { color: var(--muted-2); }
:root[data-theme="dark"] .calc input[type="number"],
:root[data-theme="dark"] .calc select { color: var(--ink); }

/* Ghost buttons read better with a slightly lifted surface on dark. */
:root[data-theme="dark"] .btn-ghost { background: var(--surface); border-color: var(--line); }
:root[data-theme="dark"] .btn-ghost:hover { border-color: var(--muted); color: var(--ink); }

/* The step badge is ink-on-white in light mode; invert it here. */
:root[data-theme="dark"] .step::before { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }

/* Photographs are a touch bright against a dark page. */
:root[data-theme="dark"] .figure img,
:root[data-theme="dark"] .media-card img,
:root[data-theme="dark"] .banner img { filter: brightness(.92) contrast(1.02); }

/* ----------------------------- theme toggle ---------------------------- */
.theme-toggle {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--muted);
  cursor: pointer; padding: 0;
  transition: color .15s ease, border-color .15s ease;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--muted-2); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
@media (hover: none), (max-width: 760px) { .theme-toggle { width: 42px; height: 42px; } }


/* ==========================================================================
   Motion
   Transform/opacity only, so nothing here forces layout. Everything is off
   when the visitor asks for reduced motion.
   ========================================================================== */
@keyframes bp-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes bp-pop  { from { opacity: 0; transform: translateY(-6px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes bp-flip { from { opacity: .3; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@keyframes bp-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-26px, 20px, 0) scale(1.05); }
}

/* Reveal on scroll. The class is added by JS, so with no JS nothing is ever
   hidden in the first place. */
.reveal { opacity: 0; }
.reveal.is-in { animation: bp-rise .62s cubic-bezier(.22,.7,.3,1) both; animation-delay: var(--d, 0ms); }

/* The hero animates on load: no observer, no delay waiting for one. */
.hero .eyebrow, .hero h1, .hero p.lead, .hero .btn-row, .hero-stats, .hero .mock {
  animation: bp-rise .75s cubic-bezier(.22,.7,.3,1) both;
}
.hero h1       { animation-delay: .06s; }
.hero p.lead   { animation-delay: .12s; }
.hero .btn-row { animation-delay: .18s; }
.hero-stats    { animation-delay: .24s; }
.hero .mock    { animation-delay: .14s; }
.hero::before  { animation: bp-drift 22s ease-in-out infinite; }

/* Reading progress, on the top edge of the sticky bar. */
.scroll-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 200;
  background: linear-gradient(90deg, var(--red), var(--green));
  transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}

/* Micro-interactions. */
.pos-card { transition: transform .24s cubic-bezier(.22,.7,.3,1), box-shadow .24s ease, border-color .24s ease; }
.pos-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.pos-media img { transition: transform .55s cubic-bezier(.22,.7,.3,1); }
.pos-card:hover .pos-media img { transform: scale(1.06); }

.card { transition: transform .24s cubic-bezier(.22,.7,.3,1), box-shadow .24s ease, border-color .24s ease; }
.card-more svg { transition: transform .2s ease; }
.card--link:hover .card-more svg { transform: translateX(5px); }

.method { transition: transform .2s ease, border-color .2s ease; }
.method:hover { transform: translateY(-3px); border-color: var(--green); }

.figure img { transition: transform .6s cubic-bezier(.22,.7,.3,1); }
.figure:hover img { transform: scale(1.035); }

.badge-pill { transition: transform .2s ease, border-color .2s ease; }
.badge-pill:hover { transform: translateY(-2px); border-color: var(--green); }

.theme-toggle svg { transition: transform .35s cubic-bezier(.22,.7,.3,1); }
.theme-toggle:hover svg { transform: rotate(30deg); }

.step::before { transition: transform .25s cubic-bezier(.22,.7,.3,1); }
.step:hover::before { transform: scale(1.1); }

.faq summary { transition: background-color .16s ease; }
.site-footer a { transition: color .16s ease, opacity .16s ease; }

/* The calculator figures move a lot while the slider is dragged; flash them
   only when a value settles, never on every frame. */
.calc .is-upd { animation: bp-flip .3s ease both; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in { opacity: 1 !important; animation: none !important; }
  .hero .eyebrow, .hero h1, .hero p.lead, .hero .btn-row, .hero-stats, .hero .mock {
    animation: none !important; opacity: 1 !important;
  }
  .hero::before { animation: none !important; }
  .scroll-progress { display: none; }
}


/* ==========================================================================
   Hero media
   A dark band carrying the data-flow artwork. It stays dark in both themes:
   the artwork is the constant, the page around it changes.
   ========================================================================== */
.hero--media, .page-head--media {
  position: relative; isolation: isolate;
  background: #060B14; color: #E8EEF6;
  overflow: hidden;
}
.hero--media { padding-block: clamp(64px, 8vw, 104px) clamp(56px, 7vw, 92px); }
.hero--media::before { content: none; }        /* the old radial blobs */

.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%;
  transform: scale(1.06);
  animation: bp-flow 34s ease-in-out infinite alternate;
}
@keyframes bp-flow {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.13) translate3d(-2.2%, -1.2%, 0); }
}

/* Readability first: the copy sits over the darkest part of the frame. */
.hero-veil {
  position: absolute; inset: 0; display: block;
  background:
    linear-gradient(100deg, rgba(6,11,20,.95) 0%, rgba(6,11,20,.86) 34%,
                    rgba(6,11,20,.5) 62%, rgba(6,11,20,.35) 100%),
    linear-gradient(to bottom, rgba(6,11,20,.5), rgba(6,11,20,0) 28%,
                    rgba(6,11,20,0) 72%, rgba(6,11,20,.6));
}

/* A slow highlight drifting across, the only moving thing the eye catches. */
.hero-sheen {
  position: absolute; inset: -20% -35%; display: block; pointer-events: none;
  background: radial-gradient(42% 55% at 50% 50%, rgba(0,166,81,.20), transparent 70%);
  animation: bp-sheen 26s ease-in-out infinite alternate;
}
@keyframes bp-sheen {
  from { transform: translate3d(-18%, 6%, 0) scale(1); opacity: .55; }
  to   { transform: translate3d(22%, -8%, 0) scale(1.25); opacity: .9; }
}

.hero--media .eyebrow { background: rgba(0,166,81,.18); color: #5BDC9B; }
.hero--media h1 { color: #FFFFFF; }
.hero--media p.lead { color: #BCC9D9; }
.hero--media .hero-stats { border-top-color: rgba(255,255,255,.16); }
.hero--media .hero-stats div strong { color: #FFFFFF; }
.hero--media .hero-stats div span { color: #93A4B8; }
.hero--media .btn-ghost {
  background: rgba(255,255,255,.07); color: #FFFFFF; border-color: rgba(255,255,255,.28);
  backdrop-filter: blur(6px);
}
.hero--media .btn-ghost:hover { background: rgba(255,255,255,.14); border-color: #FFFFFF; color: #FFFFFF; }

/* The inner pages get the same band, shorter and calmer. */
.page-head--media { padding-block: clamp(52px, 6vw, 84px) clamp(40px, 5vw, 60px); }
.page-head--media .hero-media img { object-position: 50% 46%; animation-duration: 46s; }
.page-head--media .hero-veil {
  background:
    linear-gradient(100deg, rgba(6,11,20,.95) 0%, rgba(6,11,20,.88) 42%, rgba(6,11,20,.6) 100%),
    linear-gradient(to bottom, rgba(6,11,20,.45), rgba(6,11,20,0) 40%, rgba(6,11,20,.55));
}
.page-head--media h1 { color: #FFFFFF; }
.page-head--media p.lead { color: #BCC9D9; }
.page-head--media .eyebrow { background: rgba(0,166,81,.18); color: #5BDC9B; }
.page-head--media .btn-ghost {
  background: rgba(255,255,255,.07); color: #FFFFFF; border-color: rgba(255,255,255,.28);
}
.page-head--media .btn-ghost:hover { background: rgba(255,255,255,.14); border-color: #FFFFFF; color: #FFFFFF; }

/* The breadcrumb sits directly above the band, so keep it clear of it. */
.page-head--media + .section { padding-top: clamp(40px, 5vw, 64px); }

@media (max-width: 900px) {
  .hero-media img { object-position: 70% 50%; }
  .hero-veil {
    background:
      linear-gradient(180deg, rgba(6,11,20,.92) 0%, rgba(6,11,20,.8) 55%, rgba(6,11,20,.92) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-media img, .hero-sheen { animation: none !important; }
  .hero-media img { transform: scale(1.04); }
}


/* The header floats over the artwork until the page is scrolled. */
:root { --header-h0: 76px; }
.hero--media {
  margin-top: calc(-1 * var(--header-h0));
  padding-top: calc(var(--header-h0) + clamp(64px, 8vw, 104px));
}
.page-head--media {
  margin-top: calc(-1 * var(--header-h0));
  padding-top: calc(var(--header-h0) + clamp(40px, 5vw, 64px));
}
.site-header--over:not([data-scrolled]) {
  background: transparent; backdrop-filter: none; border-bottom-color: transparent;
}
.site-header--over:not([data-scrolled]) .brand span,
.site-header--over:not([data-scrolled]) .nav > a,
.site-header--over:not([data-scrolled]) .nav-parent { color: #E8EEF6; }
.site-header--over:not([data-scrolled]) .nav > a:hover,
.site-header--over:not([data-scrolled]) .nav-parent:hover { background: rgba(255,255,255,.12); color: #fff; }
.site-header--over:not([data-scrolled]) .nav > a[aria-current="page"] { background: rgba(0,166,81,.24); color: #7FE7B0; }
.site-header--over:not([data-scrolled]) .lang-switch { background: rgba(255,255,255,.12); }
.site-header--over:not([data-scrolled]) .lang-switch a { color: #C3CEDC; }
.site-header--over:not([data-scrolled]) .lang-switch a[aria-current="true"] { background: rgba(255,255,255,.9); color: #0B1220; }
.site-header--over:not([data-scrolled]) .theme-toggle {
  background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.24); color: #D6E0EC;
}
.site-header--over:not([data-scrolled]) .theme-toggle:hover { color: #fff; border-color: rgba(255,255,255,.5); }
.site-header--over:not([data-scrolled]) .nav-toggle { border-color: rgba(255,255,255,.28); }
.site-header--over:not([data-scrolled]) .nav-toggle span,
.site-header--over:not([data-scrolled]) .nav-toggle span::before,
.site-header--over:not([data-scrolled]) .nav-toggle span::after { background: #E8EEF6; }
/* Once the burger panel is open it needs the solid bar behind it. */
html[data-nav="compact"] .site-header--over:not([data-scrolled]) { background: var(--header-bg); backdrop-filter: saturate(180%) blur(14px); }
html[data-nav="compact"] .site-header--over:not([data-scrolled]) .brand span { color: var(--ink); }
html[data-nav="compact"] .site-header--over:not([data-scrolled]) .nav-toggle span,
html[data-nav="compact"] .site-header--over:not([data-scrolled]) .nav-toggle span::before,
html[data-nav="compact"] .site-header--over:not([data-scrolled]) .nav-toggle span::after { background: var(--ink); }
html[data-nav="compact"] .site-header--over:not([data-scrolled]) .lang-switch { background: var(--bg-soft); }
html[data-nav="compact"] .site-header--over:not([data-scrolled]) .lang-switch a { color: var(--muted); }
html[data-nav="compact"] .site-header--over:not([data-scrolled]) .theme-toggle {
  background: var(--surface); border-color: var(--line); color: var(--muted);
}

/* Breadcrumbs live inside the dark band on the detail pages. */
.page-head--media .breadcrumbs { padding: 0 0 18px; color: #8DA0B6; }
.page-head--media .breadcrumbs a { color: #B9C7D8; }
.page-head--media .breadcrumbs a:hover { color: #fff; }


/* ------------------------- long-form page body ------------------------- */
.prose-wide { max-width: 820px; }
.prose-block + .prose-block { margin-top: clamp(30px, 3.4vw, 46px); }
.prose-block h2 { font-size: clamp(1.4rem, 1.15rem + .9vw, 1.9rem); margin-bottom: .6em; }
.prose-block p { color: var(--muted); font-size: 1.05rem; }
.prose-block p + p { margin-top: .9rem; }
.prose-block strong { color: var(--ink); }

/* ----------------------- brand logo grid (methods) --------------------- */
/* Плочките са с еднаква височина, а логата се вписват вътре. Фонът остава
   светъл и в тъмната тема, защото повечето лога са рисувани за светъл фон. */
.brandgrid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(10px, 1vw, 14px);
}
.brandtile {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 124px; height: 62px; padding: 12px 18px;
  background: #FFFFFF; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(11,18,32,.04);
  transition: transform .25s cubic-bezier(.22,.7,.3,1), box-shadow .25s ease;
}
.brandtile:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(11,18,32,.09); }
.brandtile img {
  display: block; width: auto; height: auto; object-fit: contain;
  max-height: 27px; max-width: 92px;
}
/* Широките надписи стоят по-ниски, квадратните знаци по-високи: така и
   двете тежат еднакво за окото. */
.brandtile img.lg--wide   { max-height: 22px; max-width: 108px; }
.brandtile img.lg--mid    { max-height: 27px; max-width: 90px; }
.brandtile img.lg--square { max-height: 34px; max-width: 54px; }
/* Цветът е закован, защото плочката остава бяла и в тъмната тема: повечето
   лога са рисувани за светъл фон и иначе изчезват. */
.brandtile--text {
  font-size: .86rem; font-weight: 600; color: #1D2739;
  letter-spacing: .01em; text-align: center; line-height: 1.25;
}
:root[data-theme="dark"] .brandtile { border-color: #E4E8EF; box-shadow: none; }

@media (max-width: 640px) {
  .brandtile { min-width: 100px; height: 54px; padding: 10px 14px; }
  .brandtile img.lg--wide   { max-height: 18px; max-width: 86px; }
  .brandtile img.lg--mid    { max-height: 22px; max-width: 72px; }
  .brandtile img.lg--square { max-height: 28px; max-width: 44px; }
  .brandtile--text { font-size: .8rem; }
}

/* --------------------- long-form body, second pass --------------------- */
/* Центрирана колона за четене плюс редове, в които текстът стои до
   илюстрация. Редовете се редуват страните през един. */
.prose-wide { max-width: 820px; margin-inline: auto; }

.prose-row {
  display: grid; align-items: center;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
}
.prose-row + .prose-row,
.prose-row + .prose-solo,
.prose-solo + .prose-row,
.prose-solo + .prose-solo { margin-top: clamp(44px, 5vw, 82px); }
.prose-row--flip .prose-row-text { order: 2; }
.prose-row--flip .prose-row-art { order: 1; }
.prose-row-art {
  border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--line); background: var(--plate);
  box-shadow: var(--shadow);
}
.prose-row-art img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .7s cubic-bezier(.22,.7,.3,1);
}
.prose-row-art:hover img { transform: scale(1.04); }
.prose-solo { max-width: 780px; margin-inline: auto; }

.prose-block h2 { text-wrap: balance; }
.prose-block p { max-width: 66ch; }
.prose-solo .prose-block p { max-width: none; }

@media (max-width: 860px) {
  .prose-row { grid-template-columns: 1fr; gap: 26px; }
  .prose-row--flip .prose-row-text,
  .prose-row--flip .prose-row-art { order: 0; }
  .prose-row-art { order: 0; }
}

/* ------------------ breathing room under the dark band ----------------- */
.page-head--media + .section { padding-top: clamp(44px, 5.2vw, 78px); }