/* ───────────────────────────────────────────────────
   YNNOVATIVE: DESIGN SYSTEM
   Brand Gradient: #1875CC → #00C2C7 (Option B)
   Display Font:   Montserrat
   Body Font:      DM Sans
   ─────────────────────────────────────────────────── */

/*: : : TOKENS: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : */
:root {
  /* Page width: change these three to resize the whole site (all pages).
     --page-max-width  widest the content gets: navbar, heroes, sections, jump nav
     --page-gutter     side padding inside that width (small on phones, larger on big screens)
     --page-scale-max  how far text and spacing grow on screens wider than 1440px
                       (100% = no growth; 112.5% = up to an 18px root at 1620px wide)
     Previous values: 90rem / clamp(1.25rem, 4vw, 4rem) / 112.5%. */
  --page-max-width: 1800px;
  --page-gutter:    clamp(1.25rem, 4vw, 2rem);
  --page-scale-max: 100%;

  /* Type scale: the default size of each kind of text (all pages).
     Components use these unless they need a different size on purpose:
     any font-size NOT written as var(--fs-…) is a deliberate custom size.
     Page-specific <style> blocks may also set their own sizes. */
  --fs-h1:       clamp(2.34rem, 4.55vw, 54px);   /* hero title: 50px from 1100px wide, 54px from 1187px, never more */
  --fs-h2:       clamp(1.6rem, 2.8vw, 2.5rem);
  --fs-h3:       1.5rem;
  --fs-h4:       1rem;
  --fs-lead:     1.5rem;
  --fs-body:     1.2rem;
  --fs-card:     .98rem;
  --fs-card-sm:  .88rem;
  --fs-card-body: 1.2rem;   /* body text inside offer cards */
  --fs-small:    .8rem;

  /* Gap between a section heading and the intro paragraph right under it */
  --head-gap:    1.25rem;

  /* Brand Gradients */
  --grad:          linear-gradient(90deg, #1875CC, #00C2C7);
  --grad-diag:     linear-gradient(135deg, #1875CC, #00C2C7);
  --grad-tg:       linear-gradient(90deg, #00C2C7, #3ECC6A);

  /* Brand Colors */
  --blue:          #1875CC;
  --cyan:          #00C2C7;
  --green:         #3ECC6A;
  --navy:          #1A3A7C;
  --dark:          #0B1E3F;

  /* Surfaces */
  --bg:            #FFFFFF;
  --bg-soft:       #F2F7FD;
  --bg-blue:       #EBF3FD;
  --border:        #D9E6F5;
  --border-soft:   #EBF0F8;

  /* Text */
  --txt-head:      #0B1E3F;
  --txt-body:      #3D5070;
  --txt-muted:     #7A90B0;

  /* Typography */
  --font-display:  'Montserrat', sans-serif;
  --font-body:     'DM Sans', sans-serif;

  /* Radius */
  --r-sm:          8px;
  --r-md:          12px;
  --r-lg:          .75rem;
  --r-xl:          .75rem;
  --r-pill:        999px;

  /* Shadows */
  --sh-xs:         0 1px 6px rgba(24, 117, 204, .06);
  --sh-sm:         0 2px 18px rgba(24, 117, 204, .09);
  --sh-md:         0 8px 36px rgba(24, 117, 204, .13);
  --sh-lg:         0 24px 64px rgba(24, 117, 204, .16);
  --sh-glow:       0 4px 28px rgba(0, 194, 199, .30);

  /* Spacing */
  --sp-xs:         0.5rem;
  --sp-sm:         1rem;
  --sp-md:         2rem;
  --sp-lg:         4rem;
  --sp-xl:         5.5rem;

  /* Hero Inner Spacing: shared across all hero variants */
  --hero-breadcrumb-gap: 1.5rem;   /* breadcrumb / kicker  → eyebrow / h1 */
  --hero-eyebrow-gap:    .85rem;   /* eyebrow              → h1 */
  --hero-h1-gap:         1.25rem;  /* h1                   → subtitle */
  --hero-sub-gap:        2rem;     /* subtitle             → CTA buttons */
  --hero-btn-gap:        2.75rem;  /* CTA buttons          → proof/KPI strip */
}

/*: : : RESET: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--txt-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

/*: : : LAYOUT: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : */
.wrap  { max-width: var(--page-max-width); margin: 0 auto; padding: 0 2.5rem; }
.section       { padding: var(--sp-xl) 0; }
.section-alt   { background: var(--bg-soft); }

/* Prevent fixed navbar overlap when navigating to anchored sections */
:target { scroll-margin-top: 88px; }
section[id] { scroll-margin-top: 88px; }

.section-dark  {
  background: var(--dark);
  position: relative;
  overflow: hidden;
}
.section-dark::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 18% 50%, rgba(24,117,204,.18) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 30%, rgba(0,194,199,.12) 0%, transparent 55%);
  /* Fade the glow in below the wave join so wave + section share one visual surface */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 64px, rgba(0,0,0,.88) 150px, #000 230px);
  mask-image: linear-gradient(to bottom, transparent 0, transparent 64px, rgba(0,0,0,.88) 150px, #000 230px);
  pointer-events: none;
}

/*: : : DARK SECTION TEXT DEFAULTS: : : : : : : : : : : : : : : : : : : */
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4 { color: #fff; }
.section-dark p   { color: rgba(255,255,255,.8); }
.section-dark .cs-card h3,
.section-dark .cs-card p { color: var(--txt-head); }

/*: : : TYPOGRAPHY: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--txt-head);
  line-height: 1.1;
}
h1 { font-size: var(--fs-h1);  font-weight: 900; letter-spacing: -.02em; }
h2 { font-size: var(--fs-h2); letter-spacing: -.01em; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p  { font-size: var(--fs-body); line-height: 1.78; max-width: 65ch; }

.text-grad {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blue);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--hero-eyebrow-gap);
}
.eyebrow-line {
  width: 22px; height: 2px;
  background: var(--grad);
  border-radius: 999px;
  flex-shrink: 0;
  display: block;
}
.eyebrow-center { justify-content: center; }
.eyebrow-line-green { background: var(--grad-tg); height: 3px; }

/*: : : SECTION WAVE DIVIDER: : : : : : : : : : : : : : : : : : : : : : : : : */
.section-wave {
  height: 92px;
  overflow: hidden;
  margin-top: -1px;
  line-height: 0;
  pointer-events: none;
  background: var(--wave-from, var(--bg));
}
/* Hero -> wave transition: overlap the first wave onto hero so glow ends on the curve edge. */
.hero + .section-wave {
  margin-top: -34px;
  position: relative;
  z-index: 2;
  --wave-from: transparent;
  background: transparent;
  overflow: visible;
}
.page-hero + .section-wave {
  margin-top: 0;
  position: relative;
  z-index: 2;
  --wave-from: transparent;
  background: transparent;
  overflow: visible;
}
.section + .section-wave {
  margin-top: -50px;
  position: relative;
  z-index: 2;
  --wave-from: transparent;
  background: transparent;
  overflow: visible;
}
.section-wave svg { display: block; width: 100%; height: 100%; }
.section-wave-fill { fill: var(--wave-to, var(--bg)); }
.section-wave-stroke { fill: none; stroke-width: 3px; opacity: .65; }
/* Eliminate 1px anti-alias seams between wave SVG and next section background */
.section-wave + .section { margin-top: -1px; }
.section-wave + .final-cta { margin-top: -1px; }
/* Dark joins can show a stronger seam; use slightly deeper overlap */
.section-wave + .section-dark { margin-top: -2px; }

/* Wave style variants */
.section-wave-type-1 { height: 72px; }
.section-wave-type-2 { height: 58px; }
.section-wave-type-2 .section-wave-stroke { opacity: .48; stroke-width: 3px; }
.section-wave-type-3 { height: 88px; }
.section-wave-layer-a { fill: url(#wave-layer-a); opacity: .32; }
.section-wave-layer-b { fill: url(#wave-layer-b); opacity: .22; }

/* Explicit transition mapping: previous section (from) -> next section (to) */
.section-wave-from-bg   { --wave-from: var(--bg); }
.section-wave-from-soft { --wave-from: var(--bg-soft); }
.section-wave-from-dark { --wave-from: var(--dark); }

.section-wave-to-bg     { --wave-to: var(--bg); }
.section-wave-to-soft   { --wave-to: var(--bg-soft); }
.section-wave-to-dark   { --wave-to: var(--dark); }

/* Subtle section glow + blob accents (use sparingly) */
.section-glow-soft {
  position: relative;
  overflow: hidden;
}
.section-glow-soft::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 25%, rgba(24,117,204,.09) 0%, transparent 52%),
    radial-gradient(ellipse at 88% 76%, rgba(62,204,106,.08) 0%, transparent 50%);
  /* Keep wave join clean: delay glow so top of section matches wave fill */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 64px, rgba(0,0,0,.85) 140px, #000 220px);
  mask-image: linear-gradient(to bottom, transparent 0, transparent 64px, rgba(0,0,0,.85) 140px, #000 220px);
  pointer-events: none;
}
.section-glow-soft > .wrap { position: relative; z-index: 1; }

.section-blob {
  position: absolute;
  width: clamp(10rem, 20vw, 20rem);
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, rgba(24,117,204,.18), rgba(0,194,199,.14), rgba(62,204,106,.12));
  border-radius: 56% 44% 62% 38% / 42% 58% 46% 54%;
  filter: blur(1px);
  z-index: 0;
  pointer-events: none;
}
.section-blob-left  { left: clamp(.75rem, 2vw, 2rem); top: clamp(1.5rem, 4vw, 3rem); opacity: .42; }
.section-blob-right { right: clamp(.75rem, 2vw, 2rem); top: clamp(1.5rem, 4vw, 3rem); opacity: .4; }

/*: : : BUTTONS: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .84rem;
  padding: .72rem 1.65rem;
  border: none;
  cursor: pointer;
  transition: all .22s;
  white-space: nowrap;
  text-decoration: none;
}
.btn-primary {
  background: var(--grad);
  color: #fff;
  box-shadow: var(--sh-glow);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 194, 199, .42);
}
.btn-secondary {
  background-image: linear-gradient(var(--bg), var(--bg)), var(--grad);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 2px solid transparent;
  color: var(--blue);
}
.btn-secondary:hover {
  background-image: var(--grad);
  color: #fff;
  transform: translateY(-2px);
}
.btn-ghost {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.85);
  border: 1.5px solid rgba(255,255,255,.25);
}
.btn-ghost:hover { background: rgba(255,255,255,.18); color: #fff; }
.btn-sm  { padding: .44rem 1.1rem;   font-size: .74rem; }
.btn-lg  { padding: .92rem 2.1rem;   font-size: .9rem; }
.btn-xl  { padding: 1.05rem 2.6rem;  font-size: .95rem; }
.btn-full { width: 100%; justify-content: center; }

/*: : : NAVBAR: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  transition: background .35s, box-shadow .35s, border-color .35s;
  border-bottom: 1px solid transparent;
}
.navbar.mode-light {
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: var(--border);
  box-shadow: var(--sh-sm);
}
.navbar.mode-dark {
  background: rgba(11,30,63,.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: rgba(255,255,255,.07);
  box-shadow: 0 2px 24px rgba(0,0,0,.3);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 2.5rem;
  gap: 2rem;
}
.nav-logo img {
  height: 34px;
  width: auto;
  transition: filter .3s;
}
.navbar.mode-light .nav-logo img {
  filter: none;
}
.navbar.mode-dark .nav-logo img {
  filter: none;
}
.nav-menu {
  display: flex;
  align-items: center;
  gap: .1rem;
  list-style: none;
  flex: 1;
  justify-content: center;
}
.nav-menu > li { position: relative; }
.nav-menu > li > a {
  font-family: var(--font-display);
  font-size: 15px;   /* fixed, same as the language names (was .77rem ≈ 12.3px); smaller below 1100px, see LANGUAGE SWITCHER block */
  font-weight: 600;
  padding: .46rem .74rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all .18s;
  white-space: nowrap;
}
/* Light mode links */
.navbar.mode-light .nav-menu > li > a { color: var(--txt-head); }
.navbar.mode-light .nav-menu > li > a:hover,
.navbar.mode-light .nav-menu > li:hover > a { color: var(--blue); background: var(--bg-blue); }
/* Dark mode links */
.navbar.mode-dark .nav-menu > li > a { color: rgba(255,255,255,.82); }
.navbar.mode-dark .nav-menu > li > a:hover,
.navbar.mode-dark .nav-menu > li:hover > a { color: #fff; background: rgba(255,255,255,.1); }

.nav-chevron {
  display: inline-block;
  width: 10px; height: 10px;
  transition: transform .22s;
  opacity: .6;
}
.nav-menu > li:hover .nav-chevron { transform: rotate(180deg); }

/* Mega Dropdown */
.dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  padding: 1.4rem 1.5rem 1.2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 200;
  min-width: 220px;
}
.nav-menu > li:hover .dropdown {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}
.nav-menu > li:focus-within .dropdown,
.nav-menu > li.is-open .dropdown {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}
.dropdown.wide-3 { min-width: 700px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1.5rem; }
.dropdown.wide-2 { min-width: 460px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 1.5rem; }
.dropdown-title {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-display);
  font-size: 10px;   /* was .58rem ≈ 9.3px */
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #1B4F9C;
  padding-bottom: .4rem;
  margin-bottom: .4rem;
  border-bottom: 1px solid rgba(24,117,204,.22);
  margin-top: .8rem;
}
.menu-head-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  color: #1875CC;
  flex: 0 0 14px;
}
.menu-head-icon svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
.dropdown-title:first-child { margin-top: 0; }
.dropdown a {
  display: block;
  /* same type as the language menu items (.lang-menu a): Montserrat 600, 15px */
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--txt-body);
  padding: .3rem .42rem;
  border-radius: 6px;
  transition: all .15s;
  font-weight: 600;
  white-space: nowrap;
}
.dropdown a:hover { background: var(--bg-soft); color: var(--blue); }

/*: : : HERO: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : */
.hero {
  min-height: 100vh;
  background: var(--bg);
  position: relative;
  overflow: hidden;
  padding-top: 70px;
  display: flex;
  align-items: center;
}
.hero-mesh {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 900px 700px at 75% 40%, rgba(24,117,204,.055) 0%, transparent 70%),
    radial-gradient(ellipse 500px 400px at -5% 65%,  rgba(24,117,204,.04)  0%, transparent 60%),
    radial-gradient(ellipse 600px 500px at 88% 90%,  rgba(62,204,106,.07)  0%, transparent 50%);
}
.hero-watermark {
  position: absolute;
  right: 12%; top: 50%;
  transform: translateY(-52%);
  width: clamp(11rem, 24vw, 32rem);
  height: auto;
  opacity: .08;
  pointer-events: none;
  user-select: none;
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 6fr 5fr;
  max-width: var(--page-max-width);
  padding: 5rem 2.5rem 5.5rem;
  margin: 0 auto;
  width: 100%;
}
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-blue);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 5px 14px;
  font-family: var(--font-display);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1.4rem;
}
.pulse-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0,194,199,.22);
  animation: pulse-anim 2.2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse-anim {
  0%, 100% { box-shadow: 0 0 0 3px rgba(0,194,199,.22); }
  50%       { box-shadow: 0 0 0 8px rgba(0,194,199,.07); }
}
.hero-subtitle {
  font-size: var(--fs-lead);
  line-height: 1.82;
  color: var(--txt-body);
  max-width: 54ch;
  margin-bottom: 2rem;
}
.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-bottom: 2.75rem;
}
.hero-proof {
  display: flex;
  align-items: center;
  gap: .85rem;
  flex-wrap: wrap;
  padding-top: 2rem;
  border-top: 1px solid var(--border-soft);
}
.hero-proof > div {
  display: flex;
  align-items: center;
  gap: .55rem;
}
.proof-number {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2rem;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  flex-shrink: 0;
}
.proof-label {
  font-size: .95rem;
  color: var(--txt-muted);
  line-height: 1.3;
  font-weight: 500;
}
.proof-sep { width: 1px; height: 34px; background: rgba(255,255,255,.8); }

/* Hero Trust Card */
.hero-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 1.75rem;
  box-shadow: var(--sh-md);
}
.hero-card-header {
  font-family: var(--font-display);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--txt-muted);
  margin-bottom: 1.2rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--border-soft);
}
.hero-card-row {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: .82rem 0;
  border-bottom: 1px solid var(--border-soft);
}
.hero-card-row:last-child { border-bottom: none; padding-bottom: 0; }
.card-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}
.ci-blue   { background: var(--bg-blue); border: 1px solid var(--border); }
.ci-cyan   { background: #E0F6F7; border: 1px solid #B0E8EA; }
.ci-green  { background: #E4F8EC; border: 1px solid #B0E8C4; }
.ci-purple { background: #F0EEFF; border: 1px solid #D5CCFF; }
.card-icon-text h4 {
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 700;
  color: var(--txt-head);
  margin-bottom: 2px;
}
.card-icon-text p {
  font-size: .73rem;
  color: var(--txt-muted);
  max-width: none;
  line-height: 1.5;
}

/*: : : ROUTER CARDS: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : */
.router-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.router-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  cursor: pointer;
  transition: all .26s;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  position: relative;
  overflow: hidden;
}
.router-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .38s;
}
.router-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: rgba(24,117,204,.2); }
.router-card:hover::after { transform: scaleX(1); }
/* Information-only cards (no link inside): no click affordance */
.router-card:not(:has(a)) { cursor: default; }
.router-card:not(:has(a)):hover { transform: none; box-shadow: none; border-color: var(--border); background: #fff; }
.router-card:not(:has(a)):hover::after { transform: scaleX(0); }
.router-icon {
  width: 42px; height: 42px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
}
.router-question {
  font-family: var(--font-display);
  font-size: 1.14rem;
  font-weight: 700;
  color: var(--txt-head);
  line-height: 1.35;
}
.router-desc { font-size: var(--fs-card-body); max-width: none; line-height: 1.68; }
.router-link {
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: .2rem;
}
.router-link:hover { color: var(--cyan); }
.router-arrow { display: inline-block; transition: transform .2s; }
.router-card:hover .router-arrow { transform: translateX(4px); }

/*: : : DIFF CARDS: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : */
.diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.diff-cards { display: flex; flex-direction: column; gap: 1rem; }
.diff-card {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.5rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  transition: all .25s;
}
.diff-card:hover { background: #fff; box-shadow: var(--sh-md); transform: translateX(5px); }
.diff-icon {
  width: 40px; height: 40px;
  border-radius: 9px;
  background: var(--bg-blue);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.diff-card h4 { font-family: var(--font-display); font-size: .83rem; font-weight: 700; color: var(--txt-head); margin-bottom: 3px; }
.diff-card p  { font-size: var(--fs-card-sm); max-width: none; line-height: 1.6; }

/*: : : STATS GRID: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : */
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.stat-card {
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  text-align: center;
  backdrop-filter: blur(8px);
}
.stat-number {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.4rem;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: .5rem;
}
.stat-label { font-size: .95rem; color: rgba(255,255,255,.86); font-family: var(--font-display); font-weight: 700; line-height: 1.42; }
.stat-sub   { font-size: var(--fs-card-sm); color: rgba(255,255,255,.8); margin-top: .36rem; }

/*: : : PROOF BAR (light sections only): : : : : : : : : : : : : */
.proof-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 1.5rem 0;
  margin: 1.5rem 0 2rem;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.proof-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  flex: 1;
  min-width: 7rem;
  position: relative;
}
.proof-bar-item + .proof-bar-item::before {
  content: '';
  position: absolute;
  left: 0; top: 10%; bottom: 10%;
  width: 1px;
  background: linear-gradient(180deg, var(--blue), var(--cyan));
}
.proof-bar-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.2rem;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.proof-bar-label {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--txt-muted);
  text-align: center;
  line-height: 1.4;
  max-width: 12ch;
}
/* proof-bar on dark backgrounds */
.proof-bar-dark .proof-bar-num {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 1;
  filter: brightness(1.4);
}
.proof-bar-dark .proof-bar-label {
  color: rgba(255,255,255,.7);
}
.proof-bar-dark .proof-bar-item + .proof-bar-item::before {
  background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.15));
}
@media (max-width: 600px) {
  .proof-bar { justify-content: flex-start; gap: 1.5rem 0; }
  .proof-bar-item { flex: 0 0 50%; align-items: flex-start; }
  .proof-bar-item + .proof-bar-item::before { display: none; }
}

/*: : : INDUSTRY CARDS: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : */
.industry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.5rem; }
.industry-card {
  background: #fff;
  border: 1px solid #c8d7ea;
  border-radius: var(--r-lg);
  padding: 1.5rem;
  text-align: left;
  transition: all .25s;
}
.industry-card:hover { box-shadow: var(--sh-md); transform: translateY(-3px); border-color: rgba(24,117,204,.3); }
.industry-icon  { font-size: 1.7rem; margin-bottom: .7rem; }
.industry-name  { font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; line-height: 1.3; color: var(--txt-head); margin-bottom: .45rem; }
.industry-tag   { font-size: .82rem; line-height: 1.5; color: #4a6388; margin-bottom: .65rem; }
.industry-card p { margin: 0; font-size: var(--fs-card); line-height: 1.65; color: #243b63; }

.compliance-tags { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 2.25rem; }
.comp-tag {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg-blue); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 5px 13px;
  font-family: var(--font-display); font-size: .67rem; font-weight: 700; color: var(--blue);
}

/*: : : LEAD MAGNET: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : */
.magnet-wrap {
  background: var(--dark);
  border-radius: var(--r-xl);
  padding: 3.5rem 3rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.magnet-wrap::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 85% 50%, rgba(0,194,199,.14) 0%, transparent 55%);
  pointer-events: none;
}
.magnet-wrap::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--grad);
}
.magnet-content { position: relative; z-index: 1; }
.magnet-content h2  { color: #fff; margin-bottom: 1rem; }
.magnet-content p   { color: rgba(255,255,255,.8); max-width: 55ch; margin-bottom: 1.5rem; }
.magnet-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; }
.magnet-tag {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-pill); padding: 4px 12px;
  font-family: var(--font-display); font-size: .65rem; font-weight: 700;
  color: rgba(255,255,255,.7);
}
.magnet-doc {
  position: relative; z-index: 1;
  width: 210px;
  text-align: center;
}
.magnet-doc-icon  { font-size: 2.2rem; margin-bottom: .6rem; }
.magnet-doc-bar   { height: 3px; background: var(--grad); border-radius: 999px; margin: .65rem 0; }
.magnet-doc-title { font-family: var(--font-display); font-size: .7rem; font-weight: 700; color: #fff; line-height: 1.4; margin-bottom: .35rem; }
.magnet-doc-sub   { font-size: .62rem; color: rgba(255,255,255,.32); }

/* Resource gate + booklet */
.resource-hero {
  padding: 9rem 0 4rem;
  background:
    radial-gradient(ellipse at 85% 18%, rgba(0,194,199,.09) 0%, transparent 52%),
    radial-gradient(ellipse at 10% 80%, rgba(24,117,204,.08) 0%, transparent 50%),
    var(--bg-soft);
  position: relative;
  overflow: hidden;
}
.resource-hero .wrap { position: relative; z-index: 1; }
.resource-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: 2rem;
  align-items: start;
}
.resource-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 2rem;
  box-shadow: var(--sh-sm);
}
.resource-panel h1 { font-size: clamp(1.8rem, 3.4vw, 3rem); margin-bottom: 1rem; }
.resource-panel p { margin-bottom: 1.25rem; max-width: 62ch; }
.resource-tag-row { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.25rem; }
.resource-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-blue);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .66rem;
  color: var(--blue);
}
.resource-gate-form { margin-top: 1.25rem; }
.resource-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
}
.resource-field { display: flex; flex-direction: column; gap: .38rem; }
.resource-field label {
  font-family: var(--font-display);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--txt-head);
}
.resource-field input,
.resource-field select {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: .62rem .78rem;
  font-family: var(--font-body);
  font-size: .86rem;
  color: var(--txt-head);
}
.resource-field input:focus,
.resource-field select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(24,117,204,.12);
}
.resource-field-full { grid-column: 1 / -1; }
.resource-meta { font-size: .68rem; color: var(--txt-muted); margin-top: .8rem; }
.resource-preview-card {
  background: var(--dark);
  border-radius: var(--r-xl);
  border: 1px solid rgba(255,255,255,.12);
  padding: 1.5rem;
  position: sticky;
  top: 7rem;
  overflow: hidden;
}
.resource-preview-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 90% 10%, rgba(0,194,199,.16) 0%, transparent 55%);
  pointer-events: none;
}
.resource-preview-card > * { position: relative; z-index: 1; }
.resource-preview-card h3 { color: #fff; margin-bottom: .85rem; }
.resource-preview-card p { color: rgba(255,255,255,.66); font-size: var(--fs-card-sm); max-width: none; margin-bottom: .85rem; }
.resource-preview-list { list-style: none; display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1rem; }
.resource-preview-list li { color: rgba(255,255,255,.74); font-size: var(--fs-small); }
.resource-success {
  margin-top: 1rem;
  background: #EAF8F0;
  border: 1px solid #B0E8C4;
  border-radius: var(--r-md);
  padding: 1rem;
}
.resource-success h4 { font-size: .92rem; color: #145A2C; margin-bottom: .4rem; }
.resource-success p { font-size: var(--fs-small); color: #1C6A36; margin-bottom: .7rem; max-width: none; }
.resource-success-links { display: flex; flex-wrap: wrap; gap: .7rem; }
.booklet-shell {
  padding: 8.5rem 0 4rem;
  background: var(--bg-soft);
}
.booklet-head {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 2rem;
  box-shadow: var(--sh-sm);
  margin-bottom: 1.5rem;
}
.booklet-head h1 { font-size: clamp(1.7rem, 3.2vw, 2.8rem); margin-bottom: .8rem; }
.booklet-head p { max-width: 70ch; margin-bottom: 1rem; }
.booklet-pages { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.booklet-page {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  box-shadow: var(--sh-xs);
}
.booklet-page-kicker {
  font-family: var(--font-display);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: .7rem;
}
.booklet-page h2 { font-size: clamp(1.2rem, 2.2vw, 1.8rem); margin-bottom: .65rem; }
.booklet-page p { max-width: 72ch; margin-bottom: .75rem; }
.booklet-list { padding-left: 1rem; margin-top: .4rem; }
.booklet-list li { margin-bottom: .35rem; font-size: var(--fs-card-sm); color: var(--txt-body); }
.booklet-hook {
  margin-top: .8rem;
  padding: .75rem .9rem;
  border-left: 3px solid var(--cyan);
  background: var(--bg-blue);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .82rem;
}
.booklet-citation { font-size: .72rem; color: var(--txt-muted); margin-top: .5rem; }

/*: : : FINAL CTA: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : */
.final-cta {
  padding: 8rem 0;
  text-align: center;
  background: var(--bg-soft);
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 800px 500px at 50% 50%, rgba(24,117,204,.055) 0%, transparent 65%);
  pointer-events: none;
}
.final-cta-inner  { position: relative; z-index: 1; }
.final-cta h2     { font-size: clamp(1.8rem, 4vw, 3.2rem); margin-bottom: 1rem; }
.final-cta p      { font-size: var(--fs-lead); margin: 0 auto 2.75rem; max-width: 46ch; text-align: center; }
.final-cta-buttons { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; }

/*: : : FOOTER: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : */
.footer {
  background: var(--dark);
  padding: 4rem 0 2rem;
  position: relative;
}
.footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--grad);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.15fr 1fr 1.1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}
.footer-brand-desc {
  font-size: 1rem;
  color: rgba(255,255,255,.65);
  line-height: 1.7;
  max-width: 38ch;
  margin: 0 0 1.5rem;
}
/* Microsoft Solutions Partner logo under the button (light logo, the footer is dark) */
.footer-ms-partner { display: block; width: 160px; height: auto; margin-top: 1.75rem; }
.footer-brand-tagline {
  font-size: 1rem;
  color: rgba(255,255,255,.65);
  margin: .4rem 0 .4rem;
}
.footer-col h4 {
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 1rem;
}
.footer-col ul  { list-style: none; display: flex; flex-direction: column; gap: .65rem; }
.footer-col a   { font-size: 1rem; line-height: 1.4; color: rgba(255,255,255,.72); transition: color .18s; }
.footer-col a:hover { color: var(--cyan); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.07);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-bottom p { font-size: .875rem; color: rgba(255,255,255,.55); max-width: none; }
.footer-links   { display: flex; gap: 1.25rem; }
.footer-links a { font-size: .875rem; color: rgba(255,255,255,.55); transition: color .18s; }
.footer-links a:hover { color: var(--cyan); }
.footer-logo    { height: 32px; width: auto; filter: brightness(0) invert(1); opacity: .9; }

/*: : : OFFER GRID: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 3rem;
}
.offer-grid-2x2 {
  grid-template-columns: repeat(2, 1fr);
}
.offer-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  transition: all .26s;
}
.offer-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: rgba(24,117,204,.25);
}
.offer-card:nth-child(even):hover { border-color: rgba(62,204,106,.4); }
.offer-icon {
  font-size: 1.55rem;
  margin-bottom: .2rem;
}
.offer-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--txt-head);
  line-height: 1.3;
  margin: 0 0 .55rem;
}
.offer-card h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--txt-head);
  line-height: 1.3;
  margin: 0 0 .55rem;
}
.offer-card p {
  font-size: var(--fs-card-body);
  color: var(--txt-body);
  max-width: none;
  line-height: 1.68;
  flex: 1;
}
.offer-link {
  font-family: var(--font-display);
  font-size: .76rem;
  font-weight: 700;
  color: var(--blue);
  transition: color .18s;
  margin-top: .3rem;
}
.offer-link:hover { color: var(--cyan); }

/*: : : D365 SECTION: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : */
.d365-head { max-width: 68ch; margin-bottom: 3rem; }
.d365-modules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.d365-module {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  transition: all .25s;
}
.d365-module:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(0,194,199,.35);
  transform: translateY(-2px);
}
.d365-module-icon { font-size: 1.4rem; margin-bottom: .6rem; }
.d365-module-name {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: #fff;
  margin-bottom: .3rem;
}
.d365-module-desc { font-size: var(--fs-card-sm); color: rgba(255,255,255,.7); }
.d365-cta { display: flex; gap: 1rem; flex-wrap: wrap; }

/*: : : PAGE HERO (inner pages): : : : : : : : : : : : : : : : : : : : : : */
.page-hero {
  background: var(--bg);
  padding: 8.5rem 0 5rem;
  margin-bottom: -45px;
  min-height: 105vh;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
}
.page-hero-double-glow {
  background:
    radial-gradient(ellipse at 10% 18%, rgba(24,117,204,.16) 0%, transparent 46%),
    radial-gradient(ellipse at 92% 70%, rgba(0,194,199,.12) 0%, transparent 48%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 68%);
}
.page-hero::before {
  content: '';
  position: absolute;
  top: 70px; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #1875CC 0%, #1875CC 13%, #00C2C7 50%, #3ECC6A 85%, #3ECC6A 100%);
}
.page-hero-inner {
  max-width: var(--page-max-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 2.5rem;
  position: relative;
  z-index: 1;
}
.page-breadcrumb {
  font-family: var(--font-display);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--txt-muted);
  margin-bottom: var(--hero-breadcrumb-gap);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.page-breadcrumb a { color: var(--blue); }
.page-breadcrumb span { opacity: .45; }
.page-hero h1 {
  font-size: var(--fs-h1);
  max-width: 22ch;
  margin-bottom: var(--hero-h1-gap);
}
.page-hero-sub {
  font-size: var(--fs-lead);
  color: var(--txt-body);
  max-width: 52ch;
  line-height: 1.78;
  margin-bottom: var(--hero-sub-gap);
}
.page-hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-bottom: var(--hero-btn-gap);
}

/*: : : JUMP NAV: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : */
.jump-nav {
  position: sticky;
  top: 70px;
  z-index: 900;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 12px rgba(24,117,204,.05);
}
.jump-nav-inner {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 2.5rem;
  display: flex;
  gap: 0;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.jump-nav-inner::-webkit-scrollbar { display: none; }
.jump-link {
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--txt-muted);
  padding: .88rem 1.25rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: all .18s;
  display: block;
}
.jump-link:hover { color: var(--blue); border-color: var(--blue); }

/*: : : FIRST 30 DAYS BLOCK: : : : : : : : : : : : : : : : : : : : : : : : : */
.first-30 { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-soft); }
.first-30-heading { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--txt-muted); margin-bottom: .55rem; }
.first-30 ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.first-30 ul li { font-size: var(--fs-card-sm); color: var(--txt-body); line-height: 1.4; }
.first-30 ul li::before { display: none; }
.milestone-tag { font-weight: 700; color: var(--txt-muted); margin-right: .3rem; font-size: .78rem; }

/*: : : OFFER CARD BULLETS: : : : : : : : : : : : : : : : : : : : : : : : : : : */
.offer-card ul {
  list-style: none;
  padding: 0;
  margin: .1rem 0;
  display: flex;
  flex-direction: column;
  gap: .42rem;
  flex: 1;
}
.offer-card ul li {
  font-size: var(--fs-card);
  color: var(--txt-body);
  line-height: 1.62;
  padding-left: 1.1rem;
  position: relative;
}
.offer-card ul li::before {
  content: '◆';
  position: absolute;
  left: 0;
  background: var(--grad-tg);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: .45rem;
  font-weight: 700;
  top: .45em;
}

/*: : : CASE STUDY FILTER BAR: : : : : : : : : : : : : : : : : : : : : : : */
.cs-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 2rem 0 0;
  justify-content: center;
}
.cs-filter-btn {
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .45rem 1rem;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--txt-muted);
  cursor: pointer;
  transition: all .18s;
}
.cs-filter-btn:hover { border-color: var(--blue); color: var(--blue); }
.cs-filter-btn.is-active { background: var(--blue); border-color: var(--blue); color: #fff; }

/*: : : CASE STUDY CARDS: : : : : : : : : : : : : : : : : : : : : : : : : : : : : */
.cs-grid {
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
  margin-top: 3rem;
}
.cs-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  display: grid;
  grid-template-columns: 1fr 300px;
  overflow: hidden;
  transition: box-shadow .26s, border-color .26s;
  position: relative;
}
.cs-card:hover { box-shadow: var(--sh-md); border-color: rgba(24,117,204,.25); }

/* Left content pane */
.cs-card-body {
  padding: 2.5rem 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* Right stats pane */
.cs-card-stats {
  background: #fbfcfe;
  border-left: 1.5px solid var(--border);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
}

.cs-badges { display: flex; gap: .4rem; flex-wrap: wrap; }
.cs-badge {
  font-family: var(--font-display);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--r-pill);
}
.cs-badge-industry { background: var(--bg-blue); color: var(--blue); border: 1px solid var(--border); }
.cs-badge-tech     { background: #E0F6F7; color: #007E83; border: 1px solid #B0E8EA; }
.cs-rescue         { background: #FFF0E6; color: #B85C00; border: 1px solid #FFD5B0; }

.cs-card h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--txt-head);
  line-height: 1.3;
  margin: 0;
}
.cs-challenge {
  font-size: .92rem;
  color: var(--txt-body);
  line-height: 1.72;
  max-width: none;
  flex: 1;
}
.cs-quote {
  background: var(--bg-blue);
  border-left: 3px solid var(--cyan);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 1.1rem 1.4rem;
  font-size: .92rem;
  font-style: italic;
  color: var(--txt-body);
  line-height: 1.65;
  max-width: none;
  margin: 0;
}
.cs-quote cite {
  display: block;
  font-style: normal;
  font-size: .72rem;
  color: var(--txt-muted);
  font-family: var(--font-display);
  font-weight: 600;
  margin-top: .5rem;
}
.cs-link {
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
  transition: color .18s;
  align-self: flex-start;
}
.cs-link:hover { color: var(--cyan); }

/* Stats panel items */
.cs-outcomes {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  flex: 1;
}
.cs-outcome {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.cs-outcome:last-child { border-bottom: none; padding-bottom: 0; }
.cs-outcome-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.6rem;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.cs-outcome-label {
  font-size: var(--fs-small);
  color: var(--txt-body);
  line-height: 1.4;
  max-width: none;
}

/*: : : PROCESS STEPS: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
.step-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  transition: all .25s;
}
.step-card:hover { box-shadow: var(--sh-md); transform: translateY(-3px); border-color: rgba(24,117,204,.25); }
.step-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 3.1rem;
  background-image: var(--grad);
  background-repeat: no-repeat;
  background-size: 400% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: .95;
  margin: -0.15rem 0 .55rem;
}
.steps-grid .step-card:nth-child(1) .step-num { background-position: 0% 50%; }
.steps-grid .step-card:nth-child(2) .step-num { background-position: 33% 50%; }
.steps-grid .step-card:nth-child(3) .step-num { background-position: 66% 50%; }
.steps-grid .step-card:nth-child(4) .step-num { background-position: 100% 50%; }
.steps-grid:has(.step-card:nth-child(5)) .step-card:nth-child(2) .step-num { background-position: 25% 50%; }
.steps-grid:has(.step-card:nth-child(5)) .step-card:nth-child(3) .step-num { background-position: 50% 50%; }
.steps-grid:has(.step-card:nth-child(5)) .step-card:nth-child(4) .step-num { background-position: 75% 50%; }
.steps-grid:has(.step-card:nth-child(5)) .step-card:nth-child(5) .step-num { background-position: 100% 50%; }
.steps-grid:has(.step-card:nth-child(6)) .step-card:nth-child(2) .step-num { background-position: 20% 50%; }
.steps-grid:has(.step-card:nth-child(6)) .step-card:nth-child(3) .step-num { background-position: 40% 50%; }
.steps-grid:has(.step-card:nth-child(6)) .step-card:nth-child(4) .step-num { background-position: 60% 50%; }
.steps-grid:has(.step-card:nth-child(6)) .step-card:nth-child(5) .step-num { background-position: 80% 50%; }
.steps-grid:has(.step-card:nth-child(6)) .step-card:nth-child(6) .step-num { background-position: 100% 50%; }
.step-card h4 { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 700; color: var(--txt-head); margin-bottom: .5rem; line-height: 1.35; }
.step-card p  { font-size: var(--fs-card); max-width: none; line-height: 1.68; }

/*: : : RESCUE LIST (dark section checklist): : : : : : : : : */
.rescue-list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 2rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.rescue-list li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: var(--fs-card-sm);
  color: rgba(255,255,255,.7);
  line-height: 1.55;
}
.rescue-list li::before {
  content: '\2713';
  color: var(--cyan);
  font-weight: 700;
  font-size: .85rem;
  flex-shrink: 0;
  margin-top: 1px;
}

/*: : : UTILITIES: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : */
.two-col   { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.sec-head  { margin-bottom: 3rem; }
.sec-head-center { text-align: center; margin-bottom: 3rem; }
.sec-head-center p { margin: 0 auto; }
/* Section heading → intro paragraph: same gap on every page (--head-gap in :root) */
.sec-head h2 + p,
.sec-head-center h2 + p { margin-top: var(--head-gap); }

/*: : : ANIMATIONS: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : */
.fade-up { opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }

/*: : : RESPONSIVE: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : */
@media (max-width: 1000px) {
  .hero-inner      { grid-template-columns: 1fr; padding: 4rem 2rem 5rem; }
  .diff-grid       { grid-template-columns: 1fr; gap: 2.5rem; }
  .two-col         { grid-template-columns: 1fr; gap: 2.5rem; }
  .magnet-wrap     { grid-template-columns: 1fr; }
  .magnet-doc      { display: none; }
  .resource-layout { grid-template-columns: 1fr; }
  .resource-preview-card { position: relative; top: auto; }
  .resource-form-grid { grid-template-columns: 1fr; }
  .footer-grid     { grid-template-columns: 1fr 1fr 1fr; }
  .offer-grid      { grid-template-columns: repeat(2, 1fr); }
  .d365-modules    { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .router-grid     { grid-template-columns: repeat(2, 1fr); }
  .steps-grid      { grid-template-columns: repeat(2, 1fr); }
  .footer-grid     { grid-template-columns: 1fr 1fr; }
}
/* ─── MOBILE DRAWER ──────────────────────────────────────────── */
.nav-hamburger {
  display: none;
  width: 2.25rem;
  height: 2.25rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--txt-head);
  cursor: pointer;
  padding: 0;
  margin-left: .75rem;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav-hamburger-icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-hamburger .line {
  transform-origin: 50% 50%;
  transition: transform .25s, opacity .2s;
}
.nav-hamburger[aria-expanded="true"] .line-1 { transform: translateY(5px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] .line-2 { opacity: 0; }
.nav-hamburger[aria-expanded="true"] .line-3 { transform: translateY(-5px) rotate(-45deg); }

.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1998;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.nav-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.nav-drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(320px, 88vw);
  height: 100dvh;
  background: #fff;
  z-index: 1999;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.nav-drawer.is-open { transform: translateX(0); }

.nav-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
}
.nav-drawer-close {
  background: none;
  border: none;
  cursor: pointer;
  width: 2rem;
  height: 2rem;
  color: var(--txt-head);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 3;
}
.nav-drawer-close svg { width: 1.25rem; height: 1.25rem; pointer-events: none; }

.nav-drawer-nav { flex: 1; }
.nav-drawer-nav > ul { list-style: none; margin: 0; padding: 0; }
.nav-drawer-nav > ul > li { border-bottom: 1px solid var(--border); }

.drawer-item-row {
  display: flex;
  align-items: center;
  border-bottom: none;
}
.drawer-item-link {
  flex: 1;
  padding: .9rem 0 .9rem 1.25rem;
  font-size: .95rem;
  font-weight: 600;
  color: var(--txt-head);
  text-decoration: none;
}
.drawer-item-link:hover { color: var(--blue); }
.drawer-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--txt-head);
  flex-shrink: 0;
}
.drawer-chevron {
  width: .75rem;
  height: .75rem;
  flex-shrink: 0;
  transition: transform .25s;
}
.drawer-has-sub.is-open .drawer-chevron { transform: rotate(180deg); }

/* Mobile menu: a full-width panel (as stan.vision), nothing wider than the screen */
.nav-drawer .nav-drawer-cta { display: block; width: auto; margin: 1.5rem 1.25rem 1.75rem; text-align: center; }
@media (max-width: 860px) {
  .nav-drawer { width: 100%; max-width: 100vw; overflow-x: hidden; }
}

.drawer-link {
  display: block;
  padding: .9rem 1.25rem;
  font-size: .95rem;
  font-weight: 600;
  color: var(--txt-head);
  text-decoration: none;
}

.drawer-sub {
  list-style: none;
  margin: 0;
  padding: 0 0 .5rem;
  display: none;
  background: var(--bg-blue);
}
.drawer-has-sub.is-open .drawer-sub { display: block; }

.drawer-sub li a {
  display: block;
  padding: .55rem 1.5rem;
  font-size: .88rem;
  color: var(--txt-body);
  text-decoration: none;
}
.drawer-sub li a:hover { color: var(--blue); }

.drawer-sub-heading {
  padding: .7rem 1.5rem .2rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue);
}

@media (max-width: 860px) {
  .nav-menu        { display: none !important; }
  .nav-cta-desktop { display: none !important; }
  .nav-hamburger   { display: flex !important; }
  .nav-overlay     { display: block !important; }
  .nav-inner       { padding: 0 1.25rem; gap: .5rem; }
}
@media (max-width: 600px) {
  html, body       { max-width: 100%; overflow-x: clip; }
  .hero, .section, .final-cta, .section-wave { max-width: 100vw; }
  .hero-proof > div, .offer-card, .industry-card { min-width: 0; }
  .industry-name   { overflow-wrap: anywhere; word-break: break-word; hyphens: auto; }
  .offer-link      { overflow-wrap: anywhere; word-break: break-word; }
  .router-grid     { grid-template-columns: 1fr; }
  .steps-grid      { grid-template-columns: 1fr; }
  .cs-card         { grid-template-columns: 1fr; }
  .cs-card-stats   { border-left: none; border-top: 1.5px solid var(--border); }
  .cs-outcomes     { flex-direction: column; align-items: center; gap: 1rem; }
  .cs-outcome      { border-bottom: none; padding-bottom: 0; border-right: none; padding-right: 0; text-align: center; width: 100%; }
  .cs-outcome:last-child { border-right: none; padding-right: 0; }
  .industry-grid   { grid-template-columns: 1fr 1fr !important; }
  .stats-grid      { grid-template-columns: 1fr 1fr; }
  .offer-grid      { grid-template-columns: 1fr; }
  .d365-modules    { grid-template-columns: 1fr; }
  .wrap            { padding: 0 1.25rem; }
  .page-hero-inner { padding: 0 1.25rem; }
  .hero-inner      { padding: 3rem 1.25rem 4rem; grid-template-columns: 1fr !important; }
  .footer-grid     { grid-template-columns: 1fr 1fr; gap: 2rem 1.25rem; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .hero-watermark  { display: none; }
  .hero-proof      { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; justify-items: center; align-items: start; gap: 1.5rem 1rem !important; margin-top: 3.5rem !important; justify-content: unset !important; }
  .hero-proof > div { flex-direction: column; align-items: center; text-align: center; gap: .25rem; width: 100%; }
  .hero-proof.proof-3 { grid-template-columns: repeat(3, 1fr) !important; }
  .proof-number    { font-size: 1.75rem; }
  .proof-label     { text-align: center; }
  .proof-sep       { display: none !important; }
  .section-wave svg { width: 100%; }
}

/*: : : BRAND NAME GRADIENT: : : : : : : : : : : : : : : : : : : : : : : : : : */
/* SWITCHED OFF (owner request): the name is plain text again. js/main.js (BRAND_GRADIENT) no longer
   wraps it; the old gradient is kept below, commented out, to switch back on. */
.brand-grad { /* intentionally plain */ }
/* .brand-grad {
  background: linear-gradient(90deg, #1875CC, #00C2C7, #3ECC6A);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
} */

/*: : : APPROACH PAGE: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : */
.track-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 3rem;
}
.track-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  position: relative;
  overflow: hidden;
}
.track-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--grad);
}
.track-icon { font-size: 2rem; }
.track-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--txt-head);
  line-height: 1.15;
}
.track-meta { display: flex; gap: .45rem; flex-wrap: wrap; }
.track-badge {
  font-family: var(--font-display);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--bg-blue);
  color: var(--blue);
  border: 1px solid var(--border);
}
.track-desc {
  font-size: var(--fs-card-sm);
  color: var(--txt-body);
  line-height: 1.72;
  max-width: none;
}
.track-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .85rem;
  border-top: 1px solid var(--border-soft);
  padding-top: 1rem;
}
.track-spec-label {
  font-family: var(--font-display);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--txt-muted);
  margin-bottom: 3px;
}
.track-spec-value {
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: 700;
  color: var(--txt-head);
}
.track-outro {
  font-size: .8rem;
  color: var(--txt-muted);
  line-height: 1.72;
  border-top: 1px solid var(--border-soft);
  padding-top: 1rem;
  margin-top: .25rem;
}
.track-bullets {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  border-top: 1px solid var(--border-soft);
  padding-top: 1rem;
}
.track-bullets li {
  font-size: var(--fs-small);
  color: var(--txt-body);
  padding-left: 1.1rem;
  position: relative;
  line-height: 1.5;
}
.track-bullets li::before {
  content: '◆';
  position: absolute;
  left: 0;
  background: var(--grad-tg);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
  font-size: .45rem;
  top: .45em;
}

/* Failure reason cards */
.fail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.fail-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--r-lg);
  padding: 1.75rem;
}
.fail-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.5rem;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: .55rem;
  opacity: .35;
}
.fail-card h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: rgba(255,255,255,.95);
  margin-bottom: .5rem;
  line-height: 1.3;
  min-height: 2.6em;
}
.fail-card p {
  font-size: var(--fs-card-sm);
  color: rgba(255,255,255,.68);
  line-height: 1.68;
  max-width: none;
}

/* 5-phase step grid */
.steps-grid-5 { grid-template-columns: repeat(5, 1fr); }
.steps-grid-5 .step-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.steps-grid-5 .step-card h4 {
  min-height: 2.45em; /* reserve two lines for title alignment */
  line-height: 1.22;
}
.steps-grid-5 .step-card > p {
  min-height: 4.9em;
}
.steps-grid-5 .phase-detail {
  flex: 1 1 auto;
}
.steps-grid-5 .phase-duration {
  margin-top: auto;
}

/* Dark step card variant */
.step-card-dark {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
}
.step-card-dark h4 { color: rgba(255,255,255,.92); }
.step-card-dark p  { color: rgba(255,255,255,.76); }

/* Phase detail bullets */
.phase-detail {
  list-style: none;
  padding: 0;
  margin: .35rem 0 0;
  display: flex;
  flex-direction: column;
  gap: .28rem;
}
.phase-detail li {
  font-size: var(--fs-small);
  color: var(--txt-muted);
  padding-left: .85rem;
  position: relative;
  line-height: 1.45;
}
.phase-detail li::before {
  content: '\00B7';
  position: absolute;
  left: 0;
  color: var(--blue);
  font-weight: 900;
  font-size: .85rem;
  line-height: 1.2;
}
.phase-detail .phase-spacer {
  visibility: hidden;
}
.phase-detail .phase-spacer::before {
  content: '';
}
.phase-duration {
  font-family: var(--font-display);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-top: .7rem;
  padding-top: .7rem;
  border-top: 1px solid var(--border-soft);
}
.phase-duration::before {
  content: '◆';
  margin-right: .35em;
  background: var(--grad-tg);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: .55rem;
}
.step-card-dark .phase-detail li { color: rgba(255,255,255,.35); }
.step-card-dark .phase-detail li::before { color: var(--cyan); }
.step-card-dark .phase-duration { color: var(--cyan); border-top-color: rgba(255,255,255,.1); }

/* 4-col offer grid */
.offer-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Approach page responsive */
@media (max-width: 1000px) {
  .track-grid   { grid-template-columns: 1fr; }
  .steps-grid-5 { grid-template-columns: repeat(3, 1fr); }
  .offer-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .steps-grid-5 { grid-template-columns: repeat(2, 1fr); }
  .fail-grid    { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .steps-grid-5 { grid-template-columns: 1fr; }
  .offer-grid-4 { grid-template-columns: 1fr; }
  .track-specs  { grid-template-columns: 1fr; }
}

/*: : : CHALLENGES PAGE: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : */
.challenge-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 4rem;
  align-items: start;
}
.challenge-lead {
  font-size: var(--fs-lead);
  color: var(--txt-body);
  line-height: 1.78;
  max-width: 58ch;
  margin-bottom: 1.25rem;
}

/* Pain point list: “ marker */
.pain-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.pain-list li {
  font-size: var(--fs-card-sm);
  color: var(--txt-body);
  padding-left: 1.45rem;
  position: relative;
  line-height: 1.6;
}
.pain-list li::before {
  content: '\2717';
  position: absolute;
  left: 0;
  color: #D95050;
  font-weight: 700;
  font-size: .72rem;
  margin-top: 2px;
}
/* Dark section variant */
.pain-list-dark li           { color: rgba(255,255,255,.8); }
.pain-list-dark li::before   { color: #E07070; }

/* Solution panel (right card) */
.solution-panel {
  background: var(--bg-soft);
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: sticky;
  top: 140px;
}
.solution-panel-dark {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.1);
}
.solution-panel-title {
  font-family: var(--font-display);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--txt-muted);
}
.solution-panel-desc {
  font-size: var(--fs-small);
  color: var(--txt-body);
  line-height: 1.72;
  max-width: none;
}

/* Solution product tags */
.solution-tags { display: flex; flex-wrap: wrap; gap: .45rem; }
.solution-tag {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  font-family: var(--font-display);
  font-size: .65rem;
  font-weight: 700;
  color: var(--blue);
  transition: all .18s;
  white-space: nowrap;
}
.solution-tag:hover { background: var(--bg-blue); border-color: var(--blue); }
.solution-tag-dark {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.15);
  color: rgba(255,255,255,.72);
}
.solution-tag-dark:hover { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.3); }

/* Mini proof stat inside solution panel */
.solution-proof-mini {
  border-top: 1px solid var(--border-soft);
  padding-top: .9rem;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.solution-proof-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.7rem;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.solution-proof-label {
  font-size: .7rem;
  color: var(--txt-muted);
  line-height: 1.45;
}

/* CRM Rescue outcome bar */
.rescue-outcome-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 1.5rem 0 .5rem;
  margin: 1rem 0 1.5rem;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.rescue-outcome-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  flex: 1;
  min-width: 7rem;
  position: relative;
}
.rescue-outcome-item + .rescue-outcome-item::before {
  content: '';
  position: absolute;
  left: 0; top: 10%; bottom: 10%;
  width: 1px;
  background: linear-gradient(180deg, var(--blue), var(--cyan));
}
.rescue-outcome-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2rem;
  color: rgba(255,255,255,.35);
  line-height: 1;
}
.rescue-outcome-num-bright {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.rescue-outcome-label {
  font-family: var(--font-display);
  font-size: .65rem;
  font-weight: 600;
  color: rgba(255,255,255,.45);
  text-align: center;
  line-height: 1.4;
  max-width: 12ch;
}
.rescue-outcome-zero { margin-left: 1rem; padding-left: 1rem; border-left: 1px solid rgba(255,255,255,.1); }
.rescue-outcome-arrow {
  font-size: 1.2rem;
  color: var(--cyan);
  font-weight: 700;
}

/* Rescue quote inside dark panel */
.rescue-quote {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 1rem;
}
.rescue-quote p {
  font-size: var(--fs-small);
  font-style: italic;
  color: rgba(255,255,255,.5);
  line-height: 1.65;
  max-width: none;
  margin-bottom: .5rem;
}
.rescue-quote cite {
  font-size: .68rem;
  font-style: normal;
  color: rgba(255,255,255,.28);
  font-family: var(--font-display);
  font-weight: 600;
}

/* Challenges responsive */
@media (max-width: 1000px) {
  .challenge-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .solution-panel { position: static; }
}
@media (max-width: 600px) {
  .rescue-outcome-bar { justify-content: flex-start; gap: 1.5rem 0; }
  .rescue-outcome-item { flex: 0 0 50%; align-items: flex-start; }
  .rescue-outcome-item + .rescue-outcome-item::before { display: none; }
  .rescue-outcome-arrow { transform: rotate(90deg); }
  .rescue-outcome-zero { margin-left: 0; padding-left: 0; border-left: none; border-top: 1px solid rgba(255,255,255,.1); padding-top: 1rem; }
  .challenge-grid { overflow: hidden; }
  .challenge-lead { max-width: 100%; }
  .challenge-left, .solution-panel { min-width: 0; max-width: 100%; box-sizing: border-box; }
  .btn { white-space: normal; text-align: center; width: 100%; box-sizing: border-box; }
}

/*: : : WHO WE HELP PAGE: : : : : : : : : : : : : : : : : : : : : : : : : : : : : */
.track-grid-3 { grid-template-columns: repeat(3, 1fr); }
/* Who-we-help: keep divider sections aligned across the 3 cards on desktop */
.track-grid-3 .track-card > .track-desc { min-height: 8.8rem; }
.track-grid-3 .track-bullets { min-height: 12.8rem; }
.track-grid-3 .track-specs { min-height: 8.2rem; align-content: start; }
.track-grid-3 .track-outro { min-height: 7.8rem; }
.track-grid-3 .track-card .btn { margin-top: auto; }
.track-explore { display: block; font-size: .8rem; font-weight: 600; color: var(--cyan); text-decoration: none; margin-bottom: .6rem; letter-spacing: .02em; }
.track-explore:hover { text-decoration: underline; }
@media (max-width: 1000px) { .track-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .track-grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 1000px) {
  .track-grid-3 .track-card > .track-desc,
  .track-grid-3 .track-bullets,
  .track-grid-3 .track-specs,
  .track-grid-3 .track-outro { min-height: 0; }
}
/* About page: mission-led identity */
.about-hero {
  position: relative;
  overflow: hidden;
  padding: 8.5rem 0 5.5rem;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(ellipse at 10% 18%, rgba(24,117,204,.16) 0%, transparent 46%),
    radial-gradient(ellipse at 92% 70%, rgba(0,194,199,.12) 0%, transparent 48%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 68%);
  border-bottom: 1px solid var(--border-soft);
}
.about-hero::before {
  content: '';
  position: absolute;
  top: 70px;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #1875CC 0%, #1875CC 13%, #00C2C7 50%, #3ECC6A 85%, #3ECC6A 100%);
}
.about-hero-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 72% 24%, rgba(62,204,106,.12) 0%, transparent 35%),
    radial-gradient(circle at 24% 80%, rgba(24,117,204,.12) 0%, transparent 30%);
  pointer-events: none;
}
.about-hero-mark {
  position: absolute;
  right: 12%;
  top: 50vh;
  width: clamp(11rem, 24vw, 32rem);
  opacity: .08;
  transform: translateY(-52%);
  pointer-events: none;
  user-select: none;
}
.about-hero-inner {
  max-width: var(--page-max-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 2.5rem;
  position: relative;
  z-index: 1;
}
.about-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.75);
  border-radius: var(--r-pill);
  padding: .36rem .85rem;
  font-family: var(--font-display);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 700;
  margin-bottom: var(--hero-breadcrumb-gap);
}
.about-hero h1 {
  max-width: 21ch;
  margin-bottom: var(--hero-h1-gap);
  font-size: var(--fs-h1);
}
.about-hero-sub {
  max-width: 52ch;
  font-size: var(--fs-lead);
  color: var(--txt-body);
  line-height: 1.78;
  margin-bottom: var(--hero-sub-gap);
}
.about-hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-bottom: var(--hero-btn-gap);
}
.about-proof-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.about-proof-card {
  background: rgba(255,255,255,.75);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.2rem;
  backdrop-filter: blur(7px);
}
.about-proof-num {
  font-family: var(--font-display);
  font-size: 1.8rem;
  line-height: 1;
  font-weight: 900;
  margin-bottom: .55rem;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.about-proof-card p {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--txt-body);
  max-width: none;
}

.about-core-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
}
.about-core-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  padding: 2rem;
  box-shadow: var(--sh-sm);
}
.about-core-card-alt {
  background: linear-gradient(180deg, #f6fbff 0%, #ffffff 100%);
}
.about-people {
  max-width: 780px;
}
.about-people h2 {
  margin-top: .75rem;
  margin-bottom: 1.5rem;
}
.about-people-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.about-people-body p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--txt-body);
  margin: 0;
}
.about-core-label {
  font-family: var(--font-display);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 700;
  margin-bottom: .8rem;
}
.about-core-card h2 {
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  margin-bottom: .9rem;
}
.about-core-card p {
  max-width: none;
  font-size: var(--fs-card-sm);
  line-height: 1.72;
}

.about-values-grid {
  margin-top: 2.75rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
.about-value-card {
  background: #f8fafc;
  border: 1.5px solid #c8d8ea;
  border-radius: var(--r-lg);
  padding: 1.35rem;
  transition: transform .24s, box-shadow .24s, border-color .24s;
}
.about-value-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: rgba(24,117,204,.34);
}
.about-value-index {
  font-family: var(--font-display);
  font-size: clamp(3rem, 3.8vw, 4rem);
  font-weight: 900;
  letter-spacing: .01em;
  line-height: .9;
  margin-bottom: .75rem;
  background: linear-gradient(90deg, #1875CC 0%, #00C2C7 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.about-value-card h3 {
  font-size: clamp(1.05rem, 1.2vw, 1.3rem);
  font-weight: 800;
  margin-bottom: .5rem;
  line-height: 1.15;
}
.about-values-grid .about-value-card:nth-child(1) .about-value-index { background-position: 0% 50%; }
.about-values-grid .about-value-card:nth-child(2) .about-value-index { background-position: 25% 50%; }
.about-values-grid .about-value-card:nth-child(3) .about-value-index { background-position: 50% 50%; }
.about-values-grid .about-value-card:nth-child(4) .about-value-index { background-position: 75% 50%; }
.about-values-grid .about-value-card:nth-child(5) .about-value-index { background-position: 100% 50%; }
.about-values-grid .about-value-card:nth-child(1) h3,
.about-values-grid .about-value-card:nth-child(2) h3,
.about-values-grid .about-value-card:nth-child(3) h3,
.about-values-grid .about-value-card:nth-child(4) h3,
.about-values-grid .about-value-card:nth-child(5) h3 {
  color: #0b1e3f;
}
.about-value-card p {
  max-width: none;
  font-size: var(--fs-card-sm);
  line-height: 1.58;
}
.about-proof-bar {
  margin-top: 1.35rem;
  margin-bottom: .25rem;
}
.about-proof-bar .proof-bar-label {
  font-size: var(--fs-small);
}

.about-philosophy {
  display: grid;
  grid-template-columns: 5fr 4fr;
  gap: 2rem;
  align-items: start;
}
.about-philosophy h2 {
  margin-bottom: 1rem;
  max-width: 21ch;
}
.about-philosophy p {
  max-width: 60ch;
}
.about-pillars {
  display: grid;
  gap: .95rem;
}
.about-pillar {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.2rem 1.25rem;
}
.about-pillar h3 {
  font-size: .85rem;
  margin-bottom: .45rem;
}
.about-pillar p {
  max-width: none;
  font-size: .76rem;
  line-height: 1.62;
}

.about-manifesto-head {
  max-width: 65ch;
  margin-bottom: 2rem;
}
.about-manifesto-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 1rem;
}
.about-manifesto-item {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1.5rem;
  align-items: start;
  padding: 1.75rem 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.about-manifesto-item:first-child { border-top: 1px solid rgba(255,255,255,.1); }
.about-manifesto-item-num {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 900;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  padding-top: .2rem;
}
.about-manifesto-item h3 {
  color: #fff;
  font-size: var(--fs-h3);
  font-weight: 700;
  margin-bottom: .35rem;
}
.about-manifesto-item p {
  max-width: none;
  font-size: var(--fs-card);
  line-height: 1.66;
  color: rgba(255,255,255,.7);
}

@media (max-width: 1100px) {
  .about-values-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 1000px) {
  .about-core-grid,
  .about-philosophy,
  .about-manifesto-grid,
  .about-proof-strip {
    grid-template-columns: 1fr;
  }
  .about-hero {
    min-height: auto;
    padding-bottom: 4.8rem;
  }
  .about-hero-mark {
    right: -1rem;
    top: 8rem;
    transform: none;
    width: clamp(8rem, 35vw, 14rem);
    opacity: .06;
  }
}
@media (max-width: 700px) {
  .about-values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .about-hero-inner {
    padding: 0 1.3rem;
  }
}
@media (max-width: 560px) {
  .about-values-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── TRUST STRIP ───────────────────────────────────── */
.trust-strip { margin-bottom: 2rem; text-align: center; }
.trust-strip-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--txt-muted); margin: 0 auto 1rem; text-align: center; display: block; width: 100%; }
.trust-strip-track-wrap { overflow: hidden; position: relative; }
.trust-strip-track-wrap::before,
.trust-strip-track-wrap::after { content: ''; position: absolute; top: 0; bottom: 0; width: 4rem; z-index: 2; pointer-events: none; }
.trust-strip-track-wrap::before { left: 0; background: linear-gradient(to right, var(--bg-soft, #F7F9FC), transparent); }
.trust-strip-track-wrap::after  { right: 0; background: linear-gradient(to left,  var(--bg-soft, #F7F9FC), transparent); }
.trust-strip-track { display: flex; align-items: center; gap: 4rem; width: max-content; min-height: 44px; animation: trust-scroll 55s linear infinite; }   /* 55s for 20 logos keeps the pace of the original 28s for 11 */
/* Client logos: each is trimmed to its artwork and given a height (--h) that keeps the visual weight even
   (generated, see _dev/tools/ or the build note in CHANGELOG). Shown as one calm tone; colour returns on hover. */
.trust-strip-track img { height: var(--h, 32px); width: auto; max-width: none; object-fit: contain; filter: brightness(0); opacity: .45; transition: opacity .25s, filter .25s; }
.trust-strip-track img:hover { filter: none; opacity: 1; }
/* logos with white lettering inside a shape (Küchen Quelle) stay in greyscale, not a flat silhouette */
.trust-strip-track img.keep-tone { filter: grayscale(1) brightness(.6); opacity: .6; }
.trust-strip-track img.keep-tone:hover { filter: none; opacity: 1; }
@keyframes trust-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  /* no scrolling loop: show every logo at once, wrapped and centred (the repeated set is hidden) */
  .trust-strip-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; gap: 1.75rem 3rem; }
  .trust-strip-track img[aria-hidden="true"] { display: none; }
  .trust-strip-track-wrap::before, .trust-strip-track-wrap::after { display: none; }
}

/* ─── CONTACT FORM ──────────────────────────────────── */

.contact-form-card {
  scroll-margin-top: 6.5625rem;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: .75rem;
  box-shadow: 0 8px 40px rgba(0,0,0,.08);
  overflow: hidden;
  max-width: 828px;
  margin: 0 auto;
  font-size: 1.15em;
}

/* Our offices (contact page): one card per office */
.offices { padding: var(--sp-xl) 0; scroll-margin-top: 6.5625rem; }
.offices-title { text-align: center; margin: 0 0 2rem; }
.offices-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; max-width: 828px; margin: 0 auto; }
.office-card { font-style: normal; background: #fff; border: 1px solid var(--border-soft); border-radius: .75rem; box-shadow: 0 8px 40px rgba(0,0,0,.08); padding: 1.75rem 2rem; }
.office-card h3 { margin: 0 0 .75rem; font-size: 1.2rem; color: var(--navy); }
.office-card p { margin: 0; line-height: 1.6; }
.office-map { display: inline-block; margin-top: 1rem; font-weight: 600; color: var(--blue); text-decoration: underline; text-underline-offset: .2em; }
.office-map:hover { color: var(--navy); }
@media (max-width: 640px) { .offices-grid { grid-template-columns: 1fr; } }

/* Progress bar */
.form-progress {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 5px;
}
.form-progress-seg {
  background: var(--border-soft);
  transition: background .3s;
}
.form-progress-seg.is-active,
.form-progress-seg.is-complete {
  background: var(--grad-tg);
}
.form-progress-labels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: .86rem 1.725rem 0;
  gap: .25rem;
}
.form-progress-label {
  font-family: var(--font-display);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--txt-muted);
  transition: color .2s;
}
.form-progress-label.is-active { color: var(--blue); }

/* Steps */
@keyframes stepIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.form-step {
  display: none;
  padding: 2.3rem 2.875rem 2.875rem;
  animation: stepIn .22s ease;
}
.form-step.is-active { display: block; }

.form-step-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--txt-head);
  margin-bottom: .25rem;
}
.form-step-subtitle {
  font-size: .85rem;
  color: var(--txt-muted);
  margin-bottom: 1.75rem;
}

/* Fields */
.form-row {
  display: flex;
  gap: 1rem;
}
.form-row .form-field { flex: 1; }

.form-field {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-bottom: 1.1rem;
}
.form-field label {
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--txt-body);
}
/* Required-field asterisk in the brand gradient */
.form-field label > span[aria-hidden="true"] {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: .85rem;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: .72rem 1rem;
  border: 1.5px solid var(--border-soft);
  border-radius: .5rem;
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--txt-head);
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
  outline: none;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}
.form-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B7280' stroke-width='1.6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.form-field textarea { resize: vertical; min-height: 100px; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(24,117,204,.1);
}
.form-field input.is-invalid,
.form-field select.is-invalid,
.form-field textarea.is-invalid {
  border-color: #D94040;
  box-shadow: 0 0 0 3px rgba(217,64,64,.08);
}
.form-error {
  font-size: .74rem;
  color: #D94040;
  display: none;
  margin-top: .1rem;
}
.form-error.visible { display: block; }

/* Pill selector */
.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .2rem;
}
.pill {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: .42rem .9rem;
  border-radius: 999px;
  border: 1.5px solid var(--border-soft);
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 700;
  color: var(--txt-body);
  background: #fff;
  transition: all .15s;
  user-select: none;
  letter-spacing: .04em;
}
.pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.pill:hover {
  border-color: var(--cyan);
  color: var(--blue);
}
.pill.selected {
  border-color: var(--cyan);
  background: rgba(0,194,199,.08);
  color: var(--blue);
  box-shadow: 0 0 0 1px var(--cyan);
}

/* Budget slider */
.budget-slider-wrap { margin-top: .25rem; }
.budget-slider-track {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: var(--border-soft);
  margin: .75rem 0 .4rem;
}
.budget-slider-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--grad-tg);
  transition: width .12s;
  pointer-events: none;
}
input[type="range"].budget-slider {
  position: absolute;
  inset: -8px 0;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}
input[type="range"].budget-slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--cyan);
  box-shadow: 0 1px 6px rgba(0,0,0,.15);
}
input[type="range"].budget-slider::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--cyan);
  box-shadow: 0 1px 6px rgba(0,0,0,.15);
}
.budget-label {
  display: block;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--blue);
  margin-top: .4rem;
}

/* Form summary (step 4) */
.form-summary {
  background: var(--bg-soft, #F7F9FC);
  border: 1px solid var(--border-soft);
  border-radius: .75rem;
  padding: 1.1rem 1.4rem;
  margin-bottom: 1.5rem;
}
.form-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: .4rem 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: .87rem;
}
.form-summary-row:last-child { border-bottom: none; }
.form-summary-key {
  font-family: var(--font-display);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--txt-muted);
  flex-shrink: 0;
  margin-right: 1rem;
}
.form-summary-val {
  font-weight: 500;
  color: var(--txt-head);
  text-align: right;
}

/* GDPR consents */
.consent-field {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  margin-bottom: .85rem;
}
.consent-field input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 3px;
  accent-color: var(--blue);
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.consent-field label {
  font-size: .82rem;
  color: var(--txt-body);
  line-height: 1.55;
  cursor: pointer;
}
.consent-optional { color: var(--txt-muted); }
.consent-note {
  display: block;
  font-size: .76rem;
  color: var(--txt-muted);
}
/* Privacy notice under the preferences (not a checkbox) */
.consent-notice {
  margin: .35rem 0 0;
  font-size: .78rem;
  line-height: 1.55;
  color: var(--txt-muted);
}
.consent-notice a { color: var(--blue); }
.consent-notice a:hover { text-decoration: underline; }

/* Form nav (Prev / Next row) */
.form-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-soft);
  margin-top: .5rem;
  gap: 1rem;
}

/* Thank you state */
.form-thankyou {
  display: none;
  padding: 4rem 2.5rem;
  text-align: center;
}
.form-thankyou h2 {
  font-size: 1.6rem;
  margin-top: 1.25rem;
}
.form-thankyou p {
  margin-top: .75rem;
  color: var(--txt-muted);
  max-width: 42ch;
  margin-left: auto;
  margin-right: auto;
}

/* intl-tel-input overrides */
.iti { width: 100%; }
.iti__flag-container { border-right: 1px solid var(--border-soft); }
/* Fallback only: js/contact.js sets the real padding from the width of the
   flag + dial code (no !important, so it can) */
.iti__tel-input { padding-left: 96px; }

.form-field-hint {
  font-size: .78rem;
  color: var(--txt-muted);
  margin: -.2rem 0 .5rem;
  line-height: 1.4;
}
.form-field-pills {
  margin-bottom: 0;
  padding-bottom: 1.5rem;
}
.form-pill-divider {
  border: none;
  border-top: 1px solid var(--border-soft);
  margin: 0 0 1.5rem;
}

/* Responsive */
@media (max-width: 600px) {
  .form-row { flex-direction: column; gap: 0; }
  .form-step { padding: 1.5rem 1.25rem 2rem; }
  .form-progress-labels { padding: .6rem .75rem 0; }
  .form-progress-label { font-size: .52rem; }
  .pill { font-size: .63rem; padding: .38rem .75rem; }
  .contact-form-card { border-radius: .75rem; }
}

/*: : : LANGUAGE SWITCHER (navbar + mobile drawer): : : : : : : : : : : : : : : : Markup + behaviour: js/components.js (setupLangSwitch). */
/* make room for the switcher */
.navbar .nav-inner:has(.lang-switch){gap:18px}
@media (max-width:1320px){
  .navbar .nav-inner:has(.lang-switch) .nav-menu > li > a{padding-left:clamp(6px,.75vw,11.84px);padding-right:clamp(6px,.75vw,11.84px)}
}

/* CLIENT PORTAL LINK: person icon in the top bar from 1180px (label from 1500px, shorter widths would crowd the menu), entry in the drawer and footer */
.nav-portal{display:inline-flex;align-items:center;gap:.4rem;flex:none;height:38px;padding:0 10px;border-radius:999px;font:600 14px/1 var(--font-display);white-space:nowrap;transition:color .2s,background .2s}
.nav-portal svg{width:20px;height:20px;flex:none}
.nav-portal span{display:none}
/* dark like the EN button and the other menu links: on the light bar, and on the scrolled white glass panel in either mode;
   white only on a dark, unscrolled bar (the same rule the menu links follow) */
.navbar .nav-portal,.navbar.mode-light .nav-portal,.navbar.mode-dark .nav-portal,.navbar.is-scrolled.mode-dark .nav-portal{color:#0B1E3F}
.navbar.mode-dark:not(.is-scrolled) .nav-portal{color:rgba(255,255,255,.9)}
.navbar .nav-portal:hover,.navbar.mode-light .nav-portal:hover,.navbar.mode-dark .nav-portal:hover{color:var(--blue);background:var(--bg-blue)}
.navbar.mode-dark:not(.is-scrolled) .nav-portal:hover{color:#fff;background:rgba(255,255,255,.1)}
.nav-portal:focus-visible{outline:2px solid #00C2C7;outline-offset:2px}
@media (min-width:1500px){.nav-portal span{display:inline}}
@media (max-width:1179px){.nav-portal{display:none !important}}
.nav-drawer .nav-drawer-portal{display:flex;align-items:center;gap:.6rem;margin:1.25rem 1.25rem 0;padding:.85rem 1rem;border:1px solid var(--border);border-radius:12px;font:600 1rem var(--font-display);color:var(--txt-head)}
.nav-drawer .nav-drawer-portal svg{width:22px;height:22px;color:var(--blue);flex:none}
.nav-drawer .nav-drawer-portal + .nav-drawer-cta{margin-top:.75rem}
.lang-switch{position:relative;flex:none}
.lang-btn{display:inline-flex;align-items:center;gap:5px;height:38px;padding:0 10px;border-radius:999px;
  border:1px solid rgba(11,30,63,.12);background:rgba(255,255,255,.35);color:#0B1E3F;
  font:700 12.5px/1 Montserrat,sans-serif;letter-spacing:.04em;cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.lang-btn:hover,.lang-switch.is-open .lang-btn{background:rgba(255,255,255,.75);border-color:rgba(24,117,204,.35);color:#1875CC}
.lang-btn:focus-visible{outline:2px solid #00C2C7;outline-offset:2px}
.lang-globe{width:17px;height:17px;transition:transform .6s cubic-bezier(.34,1.45,.5,1)}
.lang-btn:hover .lang-globe{transform:rotate(-25deg)}
.lang-caret{width:13px;height:13px;opacity:.7;transition:transform .3s}
.lang-switch.is-open .lang-caret{transform:rotate(180deg)}

.lang-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:170px;margin:0;padding:6px;list-style:none;border-radius:14px;
  background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(217,230,245,.9);box-shadow:0 18px 44px rgba(11,30,63,.18);z-index:10;
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.97);transform-origin:top right;
  transition:opacity .22s,transform .3s cubic-bezier(.34,1.45,.5,1),visibility 0s .3s}
.lang-switch.is-open .lang-menu{opacity:1;visibility:visible;transform:none;transition:opacity .22s,transform .3s cubic-bezier(.34,1.45,.5,1)}
/* invisible bridge over the 10px gap, so the menu stays open while the mouse moves down to it */
.lang-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.lang-menu a{display:flex;align-items:center;gap:6px;padding:10px 14px 10px 10px;border-radius:10px;text-decoration:none;
  color:#3D5070;font:600 15px/1.2 Montserrat,sans-serif;transition:background .2s,color .2s}   /* fixed 15px on every page and screen width */
.lang-menu a:hover,.lang-menu a:focus-visible{background:#EBF3FD;color:#1875CC;outline:none}
.lang-ptr{width:14px;height:14px;flex:none;color:#00C2C7;opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .25s}
.lang-menu a.is-current{color:#0B1E3F;font-weight:700}
.lang-menu a.is-current .lang-ptr{opacity:1;transform:none}
.lang-menu a:not(.is-current):hover .lang-ptr{opacity:.45;transform:none}

/* ─── MOBILE: back-to-top button and section dots (js/components.js, mobileScrollNav) ─── */
.m-top, .m-dots { display: none; position: fixed; z-index: 900; opacity: 0; visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
.m-top.is-on, .m-dots.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
.m-top { right: 14px; bottom: 18px; width: 46px; height: 46px; padding: 0; border-radius: 50%;
  border: 1px solid var(--border); background: rgba(255,255,255,.94); color: var(--blue);
  box-shadow: 0 6px 20px rgba(11,30,63,.2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  align-items: center; justify-content: center; cursor: pointer; transform: translateY(12px); }
.m-top.is-on { transform: none; }
.m-top svg { width: 22px; height: 22px; }
.m-dots { right: 6px; top: 50%; transform: translateY(-50%); flex-direction: column; align-items: center; touch-action: none; user-select: none; -webkit-user-select: none;
  padding: 6px 2px; border-radius: 999px; background: rgba(11,30,63,.62);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.m-dots::before { content: ''; position: absolute; top: -28px; bottom: -28px; left: -34px; right: -6px; }   /* invisible, larger touch area around the dots */
.m-dots button { display: grid; place-items: center; width: 30px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.m-dots button i { display: block; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.55); transition: transform .15s, background .15s; }
.m-dots button[aria-current="true"] i { background: #fff; transform: scale(1.6); }
.m-dots-label { position: absolute; right: calc(100% + 8px); transform: translateY(-50%); max-width: 62vw; padding: .3rem .65rem; border-radius: 999px;
  background: rgba(11,30,63,.88); color: #fff; font: 600 .78rem/1.3 var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
@media (max-width: 900px) { .m-top { display: flex; } .m-dots { display: flex; } }
@media (prefers-reduced-motion: reduce) { .m-top, .m-dots, .m-dots button i { transition: none; } }

/* small headings inside the Bulgarian contact form review step (bg/pages/contact.html) */
.form-subhead{margin:1.25rem 0 .5rem;font:600 .85rem var(--font-body);color:var(--txt-head)}
.form-subhead:first-child{margin-top:0}

/* ENGLISH-ONLY PAGE NOTICE (js/components.js: shown on /bg/ and /de/ before an English-only page opens) */
.lang-notice{margin:auto;border:1px solid var(--border);border-radius:16px;padding:1.6rem 1.75rem 1.2rem;width:calc(100% - 2.5rem);max-width:34rem;background:#fff;color:var(--txt-body);box-shadow:0 20px 60px rgba(11,30,63,.35)}
.lang-notice::backdrop{background:rgba(11,30,63,.55)}
.lang-notice-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.75rem}
.lang-notice-head svg{width:22px;height:22px;flex:none;color:var(--blue)}
.lang-notice h2{font-family:var(--font-display);font-size:1.25rem;font-weight:700;line-height:1.3;color:var(--txt-head);margin:0}
.lang-notice p{margin:0 0 1.25rem;font-size:1rem;line-height:1.55}
.lang-notice-actions{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.lang-notice-actions .btn{width:100%;justify-content:center;cursor:pointer}
.lang-notice p.lang-notice-ask{margin:1.1rem 0 0;padding-top:1rem;border-top:1px solid var(--border);text-align:center;font-size:.9rem;color:var(--txt-muted)}
.lang-notice-ask a{color:var(--blue);font-weight:600}
.lang-notice-check{display:flex;align-items:center;gap:.6rem;margin:0 0 1.25rem;font-size:.95rem;color:var(--txt-body);cursor:pointer}
.lang-notice-check input{width:18px;height:18px;flex:none;accent-color:var(--blue);cursor:pointer}
@media (max-width:480px){.lang-notice-actions{grid-template-columns:1fr}}

/* dark bar (links are white): the button follows */
.navbar.mode-dark .lang-btn,
body.mv-on-dark .navbar.is-scrolled .lang-btn{color:#fff;border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.08)}
.navbar.mode-dark .lang-btn:hover,
.navbar.mode-dark .lang-switch.is-open .lang-btn{color:#fff;border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.16)}

/* 861–1099px: the 15px menu items don't fit next to the logo, switcher and
   "Get in Touch", so they go back to the previous smaller size here */
@media (min-width:861px) and (max-width:1099px){
  .nav-menu > li > a{font-size:.77rem}
}

/* mobile: sits next to the hamburger */
@media (max-width:860px){
  .lang-btn{height:34px}
  .lang-switch{margin-left:auto}
}

/* mobile drawer: language list at the top */
.drawer-lang{list-style:none;margin:0;padding:.6rem 1.25rem;display:flex;gap:.25rem 1rem;flex-wrap:wrap;border-bottom:1px solid var(--border)}
.drawer-lang a{display:inline-flex;align-items:center;gap:4px;padding:.35rem 0;font:600 .9rem/1.2 Montserrat,sans-serif;color:var(--txt-body);text-decoration:none}
.drawer-lang a:hover{color:var(--blue)}
.drawer-lang a.is-current{color:var(--txt-head);font-weight:700}
.drawer-lang a.is-current .lang-ptr{opacity:1;transform:none}

/*: : : TECHNOLOGY STACK PAGE (pages/technology-stack.html): : : Group shortcuts (chips), then one block per group: heading + description
   on the left, logo cards on the right. Cards with a service page are links. */
.ts-chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:3rem}
.ts-chip{padding:.5rem 1rem;border-radius:999px;background:#fff;border:1px solid var(--border);
  font:600 .8rem/1.2 var(--font-display);color:var(--txt-head);text-decoration:none;transition:border-color .2s,color .2s}
.ts-chip:hover{border-color:var(--blue);color:var(--blue)}
.ts-group{display:grid;grid-template-columns:minmax(220px,1fr) 2.6fr;gap:2.5rem;align-items:start;
  padding:2.75rem 0;border-top:1px solid var(--border);scroll-margin-top:96px}
.ts-chips + .ts-group{border-top:0;padding-top:1rem}
.ts-group-head h2{font-size:clamp(1.35rem,2vw,1.7rem);line-height:1.25;margin-bottom:.6rem}
.ts-group-head p{font-size:var(--fs-body);line-height:1.65;color:var(--txt-body);max-width:34ch}
.ts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:1rem}
.ts-tile{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;padding:1.15rem 1.15rem 1.25rem;background:#fff;
  border:1px solid var(--border);border-radius:var(--r-lg);text-decoration:none;
  transition:transform .25s,box-shadow .25s,border-color .25s}
.ts-tile.is-link:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:rgba(24,117,204,.3)}
.ts-logo{display:grid;place-items:center;width:44px;height:44px;margin-bottom:.45rem}
.ts-logo img{width:40px;height:40px;object-fit:contain}
.ts-name{font:700 .95rem/1.3 var(--font-display);color:var(--txt-head)}
.ts-tile.is-link .ts-name{color:var(--blue)}
.ts-label{font-size:var(--fs-small);line-height:1.4;color:var(--txt-muted)}
@media (max-width:860px){
  .ts-group{grid-template-columns:1fr;gap:1.25rem;padding:2rem 0}
  .ts-group-head p{max-width:none}
  .ts-grid{grid-template-columns:repeat(2,1fr);gap:.75rem}
}

/*: : : NAVBAR WIDTH (all pages): : : The 15px menu, the language switcher and "Get in Touch" no longer fit in
   the old 1160px bar, which squeezed the logo. The bar now uses the same
   page width (--page-max-width, --page-gutter in :root), and the logo never shrinks. */
.nav-inner{max-width:var(--page-max-width);padding-left:var(--page-gutter);padding-right:var(--page-gutter)}
.nav-logo{flex-shrink:0}

/* 15px menu text only where it fits next to the logo, language switcher and
   "Get in Touch"; slightly smaller on mid-size laptops (measured). */
@media (min-width:1100px) and (max-width:1320px){
  .nav-menu > li > a{font-size:13.5px}
}

/*: : : NAVBAR → FLOATING PANEL ON SCROLL (all pages): : : : : : : : : : : : : : js/main.js adds .is-scrolled past 80px (same point main.js
   switches the bar to dark). Everything reverses when scrolling back up.
   Bounce: the 1.45 in --nav-spring (1.2 calmer, 1.7 springier).
   Speed: the .9s values. Y spin: remove rotate(-360deg) to keep only the shrink. */
.navbar {
  --nav-spring: cubic-bezier(.34,1.45,.5,1);   /* overshoot = the "bounce" */
  --nav-smooth: cubic-bezier(.65,0,.35,1);
  border: 1px solid transparent;
  transition: top .9s var(--nav-spring), left .9s var(--nav-spring), right .9s var(--nav-spring),
              border-radius .7s var(--nav-smooth), box-shadow .7s, background-color .6s, border-color .6s;
}
.navbar .nav-inner { transition: padding .9s var(--nav-spring), height .7s var(--nav-smooth); }
.navbar .nav-logo { transition: gap .7s var(--nav-smooth); }
.navbar .nav-logo img:first-child { transition: transform .9s var(--nav-spring); }
.navbar .nav-logo img + img {
  max-width: 200px; overflow: hidden;
  transition: max-width .7s var(--nav-smooth), opacity .45s, filter .45s, transform .7s var(--nav-smooth), margin .7s;
}
.navbar .nav-menu > li { transition: transform .8s var(--nav-spring); }

@media (min-width: 992px) {
  /* Scrolled menu: white clear glass, panel shape (12px corners).
     Chosen in ynnovative-menu-variants.html ("White" + "Clear glass" + panel).
     Same look in both modes: main.js switches the bar to .mode-dark at 80px,
     so the dark-mode colours are overridden here. */
  .navbar.is-scrolled,
  .navbar.is-scrolled.mode-dark {
    top: 12px;
    left: max(16px, calc(50% - 600px));
    right: max(16px, calc(50% - 600px));
    border-radius: 12px;
    border-color: rgba(11,30,63,.08);
    background: rgba(255,255,255,.25);
    -webkit-backdrop-filter: blur(6px) saturate(150%);
    backdrop-filter: blur(6px) saturate(150%);
    box-shadow: 0 10px 36px rgba(11,30,63,.14);
  }
  .navbar.is-scrolled.mode-dark .nav-menu > li > a { color: var(--txt-head); }
  /* language switcher follows the navy links on the white glass bar */
  .navbar.is-scrolled.mode-dark .lang-btn { color: #0B1E3F; border-color: rgba(11,30,63,.12); background: rgba(255,255,255,.35); }
  .navbar.is-scrolled.mode-dark .lang-btn:hover,
  .navbar.is-scrolled.mode-dark .lang-switch.is-open .lang-btn { color: #1875CC; border-color: rgba(24,117,204,.35); background: rgba(255,255,255,.75); }
  .navbar.is-scrolled.mode-dark .nav-menu > li > a:hover,
  .navbar.is-scrolled.mode-dark .nav-menu > li:hover > a { color: var(--blue); background: var(--bg-blue); }
  .navbar.is-scrolled .nav-inner { padding-left: 18px; padding-right: 10px; height: 58px; }
  /* The logo link has an inline gap; !important is the only way to close it */
  .navbar.is-scrolled .nav-logo { gap: 0 !important; }
  .navbar.is-scrolled .nav-logo img:first-child { transform: rotate(-360deg) scale(.92); }
  .navbar.is-scrolled .nav-logo img + img { max-width: 0; opacity: 0; filter: blur(6px); transform: translateX(-14px); margin: 0; }
  .navbar.is-scrolled .nav-menu > li { transform: scale(.96); }
  .navbar.is-scrolled .nav-menu > li:nth-child(1) { transition-delay: .02s; }
  .navbar.is-scrolled .nav-menu > li:nth-child(2) { transition-delay: .05s; }
  .navbar.is-scrolled .nav-menu > li:nth-child(3) { transition-delay: .08s; }
  .navbar.is-scrolled .nav-menu > li:nth-child(4) { transition-delay: .11s; }
  .navbar.is-scrolled .nav-menu > li:nth-child(5) { transition-delay: .14s; }
  .navbar.is-scrolled .nav-menu > li:nth-child(6) { transition-delay: .17s; }
}

@media (max-width: 860px) {
  /* Scrolled mobile bar: dark clear-glass panel (12px corners), inset from the screen edges.
     Chosen in ynnovative-menu-variants.html ("Dark" + "Panel" + "Clear glass"), mobile only;
     desktop keeps the white panel above. Same look in both modes (main.js sets .mode-dark/.mode-light). */
  .navbar.is-scrolled,
  .navbar.is-scrolled.mode-light,
  .navbar.is-scrolled.mode-dark {
    top: 8px;
    left: 10px;
    right: 10px;
    border-radius: 12px;
    border-color: rgba(255,255,255,.10);
    background: rgba(30,41,59,.25);
    -webkit-backdrop-filter: blur(6px) saturate(150%);
    backdrop-filter: blur(6px) saturate(150%);
    box-shadow: 0 12px 40px rgba(2,8,23,.35);
  }
  .navbar.is-scrolled .nav-inner { height: 56px; padding: 0 10px 0 14px; gap: .4rem; }
  /* the logo, language pill and hamburger together were wider than the panel (hamburger hung off the edge) */
  .navbar.is-scrolled .nav-logo img { height: 28px; }
  .navbar.is-scrolled .nav-hamburger { margin-left: .4rem; }
  .navbar.is-scrolled .nav-hamburger { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); color: #fff; }
  .navbar.is-scrolled .lang-btn { color: #fff; border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.08); }
}
@media (max-width: 340px) {
  /* very narrow phones: icon only, so the bar still fits */
  .navbar.is-scrolled .nav-logo { gap: 0 !important; }
  .navbar.is-scrolled .nav-logo img + img { display: none; }
}


/*: : : PAGE WIDTH (all pages, same as the homepage): : : Content, heroes and the in-page jump nav use up to --page-max-width with
   --page-gutter side padding (both set in :root at the top of this file). */
.wrap,
.page-hero-inner,
.about-hero-inner,
.hero-inner,
.jump-nav-inner{max-width:var(--page-max-width);padding-left:var(--page-gutter);padding-right:var(--page-gutter)}

/*: : : HERO TITLE (all pages, same as the homepage): : : Heading 30% larger than the original clamp(1.8rem, 3.5vw, 3rem), and the
   heading and subtitle may run up to 980px wide (61.25rem). In rem, so the
   limit grows with the large-screen scaling below: in px it stayed 980px
   while the text grew, and titles wrapped onto an extra line on big screens. */
.page-hero h1,
.about-hero h1{font-size:var(--fs-h1);max-width:61.25rem}
/* Bulgarian and German titles are longer than the English ones: a wider line keeps them to three lines at the same size */
html:lang(bg) .page-hero h1,
html:lang(bg) .about-hero h1,
html:lang(de) .page-hero h1,
html:lang(de) .about-hero h1{max-width:75rem}
.page-hero-sub{max-width:61.25rem}

/*: : : LARGE-SCREEN SCALING (all pages, same as the homepage): : : Above 1440px every rem-based size grows with the window, up to
   --page-scale-max (set in :root), so content, headings and spacing widen
   together on big monitors. Below 1440px the root stays at 16px. */
@media (min-width: 1440px) {
  html { font-size: clamp(100%, 1.1111vw, var(--page-scale-max)); }
}

/*: : : EXPANDING STEP PANELS (x-steps): : : : : : : : : : : : : : : : : : Numbered panels; hover, focus or tap opens one (js/main.js).
   Markup: <div class="x-steps" data-x-steps> <article class="x-step is-active" tabindex="0">
   <div><h3>…</h3><div class="x-step-body"><div><p>…</p></div></div></div></article> …
   Used on the homepage (#approach) and the product pages (#delivery).: : */
.x-steps {
  display: flex;
  gap: 1rem;
  counter-reset: x-step;
}
.x-step {
  counter-increment: x-step;
  flex: 1 1 0;
  min-width: 0;
  min-height: 19rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.75rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: #fff;
  cursor: pointer;
  transition:
    flex-grow .6s var(--x-ease, cubic-bezier(.77, 0, .175, 1)),
    background .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}
.x-step::before {
  content: counter(x-step, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.755rem, 2.6vw, 2.275rem);   /* same as the "What we do the best" numbers */
  line-height: 1.3;
  color: var(--blue);
  opacity: .5;
  transition: opacity .3s ease;
}
.x-step h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.3;
  color: var(--txt-head);
  margin-bottom: 0;
  transition: transform var(--x-dur, .35s) var(--x-ease, cubic-bezier(.77, 0, .175, 1));
}
.x-step-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--x-ease, cubic-bezier(.77, 0, .175, 1));
}
.x-step-body > div { overflow: hidden; }
.x-step p {
  font-size: var(--fs-card);
  line-height: 1.65;
  max-width: 42ch;
  padding-top: .75rem;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .15s ease, transform .15s ease-out;
}

/* Active panel */
.x-step.is-active {
  flex-grow: 2.4;
  background: var(--bg-soft);
  border-color: var(--green);           /* brand green, as in the logo */
  box-shadow: var(--sh-md);
}
.x-step.is-active::before { opacity: 1; }
.x-step.is-active .x-step-body { grid-template-rows: 1fr; }
.x-step.is-active p {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .35s ease .25s, transform .35s ease-out .25s;
}
@media (hover: hover) {
  .x-step:not(.is-active):hover h3 { transform: translateX(4px); }
}
.x-step:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* Tablet & mobile: stack, everything open */
@media (max-width: 990px) {
  .x-steps { flex-direction: column; }
  /* Stacked: natural height. The desktop "flex: 1 1 0" would collapse each
     panel's height to 0 here and make the text overlap the next panel. */
  .x-step,
  .x-step.is-active { flex: none; }
  .x-step {
    min-height: 0;
    gap: 1rem;
    cursor: default;
    background: var(--bg-soft);
    border-color: transparent;
  }
  .x-step.is-active { border-color: transparent; }   /* all panels open here, so no green */
  .x-step::before { opacity: 1; }
  .x-step .x-step-body { grid-template-rows: 1fr; }
  .x-step p { opacity: 1; transform: none; }
}

/*: : : INDUSTRIES MAP / CONNECTED SYSTEMS (shared ind-map component): : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : Six industry tiles connected to a central badge. Plays once when the
   map scrolls into view (js/main.js adds .is-in, then .is-done).
   Desktop: tiles placed on a 1040×520 grid. ≤900px: stacked grid, no lines.
   Intro timings are 70% of the original (30% faster); the ongoing float,
   breathing and pulse travel keep their original pace. */
.ind-map { position: relative; width: 100%; max-width: 1100px; margin: 48px auto 72px; aspect-ratio: 1040/520; }
.ind-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ind-path { fill: none; stroke-width: 1.6; stroke-linecap: round; }
.ind-map.is-in .ind-path {
  stroke-dashoffset: 0 !important;
  transition: stroke-dashoffset .77s cubic-bezier(.65,0,.35,1) calc(.315s + var(--i) * .056s);
}

/* centre halos */
.ind-halo { transform-box: fill-box; transform-origin: center; transform: scale(.4); opacity: 0; }
.ind-map.is-in .ind-halo { opacity: 1; animation: indPop .7s cubic-bezier(.34,1.56,.64,1) both, indBreath 4.5s ease-in-out .91s infinite; }
.ind-map.is-in .ind-halo.h2 { animation-delay: .056s, 1.26s; }
.ind-map.is-in .ind-halo.ring { animation-delay: .112s, 1.61s; }
@keyframes indPop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes indBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }

/* data pulses travelling into the centre */
.ind-pulse { fill: #00C2C7; opacity: 0; filter: drop-shadow(0 0 4px rgba(0,194,199,.9)); }
/* shown only once js/main.js sees the pulse start moving (otherwise it waits at 0,0) */
.ind-map.is-in .ind-pulse.is-moving { opacity: 1; }

/* centre badge (logo + pill; no wordmark title) */
.ind-core {
  position: absolute; left: 50%; top: 50%; width: calc(300 / 1040 * 100%); aspect-ratio: 1; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center;
  background: var(--grad-diag, linear-gradient(135deg,#1875CC,#00C2C7)); color: #fff;
  box-shadow: 0 20px 60px rgba(24,117,204,.30), inset 0 0 0 1px rgba(255,255,255,.18);
  transform: translate(-50%,-50%) scale(.5); opacity: 0;
  transition: transform .7s cubic-bezier(.34,1.56,.64,1) .07s, opacity .35s .07s;
}
.ind-map.is-in .ind-core { transform: translate(-50%,-50%) scale(1); opacity: 1; }
.ind-core-badge {
  width: 22%; aspect-ratio: 1; border-radius: 50%; background: #fff; display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(11,30,63,.18);
}
.ind-core-badge img { width: 62%; height: auto; }
.ind-core-pill {
  font: 600 clamp(10px,1vw,12.5px)/1 Montserrat, sans-serif; letter-spacing: .06em; text-transform: uppercase;
  padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35);
}

/* industry tiles */
.ind-tile {
  position: absolute; left: calc(var(--x) / 1040 * 100%); top: calc(var(--y) / 520 * 100%);
  width: calc(84 / 1040 * 100%); aspect-ratio: 1; transform: translate(-50%,-50%); z-index: 2;
}
.ind-tile-float { width: 100%; height: 100%; animation: indFloat 5s ease-in-out infinite; animation-delay: calc(var(--i) * -.85s); }
@keyframes indFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.ind-tile-box {
  width: 100%; height: 100%; display: grid; place-items: center; background: #fff;
  border: 1px solid rgba(0,194,199,.55); border-radius: 28%;
  box-shadow: 0 10px 28px rgba(24,117,204,.12);
  transform: rotate(calc(var(--r) - 35deg)) scale(.3); opacity: 0;
  transition: transform .63s cubic-bezier(.34,1.56,.64,1) calc(.735s + var(--i) * .07s),
              opacity .28s calc(.735s + var(--i) * .07s), box-shadow .3s, border-color .3s;
}
.ind-tile.is-round .ind-tile-box { border-radius: 50%; }
.ind-map.is-in .ind-tile-box { transform: rotate(var(--r)) scale(1); opacity: 1; }
.ind-tile-box svg {
  width: 46%; height: 46%; color: var(--c); transform: rotate(calc(var(--r) * -1));
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.ind-map.is-done .ind-tile-box { transition: transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, border-color .3s; }
.ind-tile:hover .ind-tile-box { transform: rotate(0deg) scale(1.1); border-color: var(--c); box-shadow: 0 14px 36px rgba(24,117,204,.22); }

.ind-tile-label {
  position: absolute; top: calc(100% + 14px); left: 50%; width: 210px; text-align: center;
  transform: translate(-50%,10px); opacity: 0;
  transition: transform .42s ease calc(.945s + var(--i) * .07s), opacity .42s calc(.945s + var(--i) * .07s);
}
.ind-map.is-in .ind-tile-label { transform: translate(-50%,0); opacity: 1; }
.ind-tile-label strong { display: block; font: 700 15px/1.3 Montserrat, sans-serif; color: var(--txt-head, #0B1E3F); }
.ind-tile-label span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--txt-muted, #7A90B0); }

/* tablet & mobile: stacked layout, no lines */
@media (max-width: 900px) {
  .ind-map { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 56px 20px; margin: 36px auto 48px; max-width: 560px; }
  .ind-lines { display: none; }
  .ind-core { position: relative; left: auto; top: auto; grid-column: 1 / -1; justify-self: center; width: min(260px,70vw); transform: scale(.6); }
  .ind-map.is-in .ind-core { transform: scale(1); }
  .ind-tile { position: relative; left: auto; top: auto; transform: none; width: 84px; justify-self: center; margin-bottom: 56px; }
  .ind-tile-label { width: min(210px, 42vw); }   /* two columns: keep labels from overlapping */
}
@media (prefers-reduced-motion: reduce) {
  .ind-map * { animation: none !important; transition: none !important; }
}

/*: : : MOBILE TYPE SCALE (phones, 600px and below): : : : : : : : : : : : : : : : : : : :
   Approved after an A/B test on 2026-10-11 (variant B). Measured at 390px, the old scale
   had h2 25.6px next to h3 24px, 19.2px body and 24px lead text, FAQ questions smaller
   than their answers, and labels down to 8-12px.
   Ladder: h1 ~33 > h2 28 > h3 22 > lead 18 > body 17 > card 16 > small 13px.
   Selectors use html:not(.type-a) only to keep the specificity the test was run with, so
   these rules also win over the page stylesheets (home, content, product) that load after
   this file. .type-a is never set. */
@media (max-width: 600px) {
  html:not(.type-a) {
    --fs-h1:        clamp(1.95rem, 8.4vw, 2.2rem);   /* 34px at 390 (was 37px) */
    --fs-h2:        1.75rem;                         /* 28px (was 25.6px) */
    --fs-h3:        1.375rem;                        /* 22px (was 24px) */
    --fs-h4:        1.125rem;                        /* 18px (was 16px = card body) */
    --fs-lead:      1.125rem;                        /* 18px (was 24px) */
    --fs-body:      1.0625rem;                       /* 17px (was 19.2px) */
    --fs-card:      .9375rem;                        /* 15px */
    --fs-card-body: 1rem;                            /* 16px (was 19.2px) */
    --fs-card-sm:   .875rem;                         /* 14px */
    --fs-small:     .8125rem;                        /* 13px (was 12.8px) */
  }

  /* FAQ: question larger and bolder than the answer */
  html:not(.type-a) .pp-faq summary,
  html:not(.type-a) .svc-faq summary { font-size: 1.0625rem; line-height: 1.4; }
  html:not(.type-a) .pp-faq details p,
  html:not(.type-a) .svc-faq details p { font-size: 1rem; line-height: 1.65; }

  /* footer: one link size, one legal size */
  html:not(.type-a) .footer-col a { font-size: .9375rem; }
  html:not(.type-a) .footer-col h4 { font-size: .8125rem; }
  html:not(.type-a) .footer-bottom p,
  html:not(.type-a) .footer-links a { font-size: .8125rem; }

  /* small labels never go below 13px */
  html:not(.type-a) .pp-tag,
  html:not(.type-a) .pp-chip,
  html:not(.type-a) .jump-link { font-size: .8125rem; }
  html:not(.type-a) label { font-size: .875rem; }
}

/* line heights and the hard-coded sizes that bypassed the tokens */
@media (max-width: 600px) {
  /* line heights: 1.78 / 1.82 suit 19-24px text, not 16-18px on a phone */
  html:not(.type-a) p { line-height: 1.62; }
  html:not(.type-a) .hero-subtitle,
  html:not(.type-a) .page-hero-sub,
  html:not(.type-a) .d3-sub { line-height: 1.6; }

  /* headings that set their own size (homepage) now follow the ladder */
  html:not(.type-a) h2,
  html:not(.type-a) .final-cta h2 { font-size: var(--fs-h2); }
  html:not(.type-a) .x-offer h3 { font-size: 1.375rem; }
  html:not(.type-a) .d3-panel h2 { font-size: 1.75rem; }

  /* small text: nothing below 12-13px */
  html:not(.type-a) .hero-card-header,
  html:not(.type-a) .eyebrow,
  html:not(.type-a) .page-breadcrumb,
  html:not(.type-a) .cp-body .cp-label,
  html:not(.type-a) .ind-map--systems .ind-core-pill,
  html:not(.type-a) .sv-page .nav-section-link,
  html:not(.type-a) .commit-step span { font-size: .8125rem; }
  html:not(.type-a) .form-progress-label,
  html:not(.type-a) .commit-stop,
  html:not(.type-a) .commit-keep { font-size: .75rem; }

  /* forms and buttons: 16px fields (no iOS zoom) and 44px touch targets */
  html:not(.type-a) .form-field input,
  html:not(.type-a) .form-field select,
  html:not(.type-a) .form-field textarea { font-size: 1rem; min-height: 44px; }
  html:not(.type-a) .btn-sm { font-size: .875rem; min-height: 44px; }
  html:not(.type-a) .pill { min-height: 44px; }
  html:not(.type-a) .sv-page .nav-section-link { min-height: 44px; }
}

/* touch targets (44px) and the text sizes still below 13px, found by measuring the live pages
   at 390px (2026-10-11). Diagram labels stay at 12px; everything else is 13px or more. */
@media (max-width: 600px) {
  html:not(.type-a) .nav-logo { display: inline-flex; align-items: center; min-height: 44px; }
  html:not(.type-a) .lang-btn,
  html:not(.type-a) .nav-hamburger,
  html:not(.type-a) .nav-drawer-close { min-width: 44px; min-height: 44px; }
  html:not(.type-a) .lang-code { font-size: .8125rem; }
  /* the 44px controls must still fit the bar (it overflowed below 380px before) */
  html:not(.type-a) .navbar .nav-inner:has(.lang-switch) { gap: 8px; }
  html:not(.type-a) .navbar .nav-logo img { height: 30px; }
  html:not(.type-a) .drawer-lang a { min-height: 44px; }
  html:not(.type-a) .nav-drawer-header > a { display: inline-flex; align-items: center; min-height: 44px; }
  html:not(.type-a) .offer-link,
  html:not(.type-a) .d3-more { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; }
  html:not(.type-a) .footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
  html:not(.type-a) .pp-switch button { min-height: 44px; font-size: .8125rem; }
  html:not(.type-a) .svc-scope summary { display: flex; align-items: center; min-height: 44px; }
  /* footnote reference: keep it inline, enlarge only the tap area */
  html:not(.type-a) .x-fn-ref { position: relative; }
  html:not(.type-a) .x-fn-ref::after { content: ""; position: absolute; inset: -14px -12px; }

  html:not(.type-a) .hero-proof-caption,
  html:not(.type-a) .trust-strip-label,
  html:not(.type-a) .x-footnote,
  html:not(.type-a) .commit-vs-mid,
  html:not(.type-a) .commit-vs-tag { font-size: .8125rem; }
  html:not(.type-a) .ind-core-pill,
  html:not(.type-a) .ind-tile-label span,
  html:not(.type-a) .commit-bar span,
  html:not(.type-a) .commit-bar b { font-size: .75rem; }
}

@media (max-width: 380px) {
  html:not(.type-a) .navbar .nav-inner:has(.lang-switch) { padding-left: 12px; padding-right: 12px; gap: 6px; }
  html:not(.type-a) .navbar .nav-logo img { height: 26px; }
  html:not(.type-a) .lang-btn { padding: 0 8px; }
}