/* GENERATED by tools/build/css-bundles.php from assets/css/metusoft.css — do not edit. Bundle "services": sections 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 13, 14, 15, 17, 20, 23. */
/* ==========================================================================
   MetuSoft Design System — V2 (public site)
   Tokens: assets/css/tokens.css (loaded first). Documentation: docs/design/DESIGN_SYSTEM.md.
   All components use the "ms-" prefix so they can coexist with the legacy Bootstrap/theme CSS
   on pages that have not been migrated yet (strangler approach).
   ========================================================================== */

/* ---------- 1. Compatibility aliases --------------------------------------
   V1 token names used by page sections written before V2. They resolve to V2 semantic tokens,
   so every page picks up the V2 palette and scale. New code uses the V2 names directly. */
:root {
  --ms-brand-50: var(--ms-color-primary-subtle);
  --ms-brand-100: var(--ms-blue-100);
  --ms-brand-500: var(--ms-blue-500);
  --ms-brand-600: var(--ms-color-primary);
  --ms-brand-700: var(--ms-color-primary-text);
  --ms-brand-800: var(--ms-blue-800);
  --ms-accent-500: var(--ms-color-accent);
  --ms-ink-900: var(--ms-color-text);
  --ms-ink-700: var(--ms-color-text-body);
  --ms-ink-500: var(--ms-color-text-secondary);
  --ms-ink-300: var(--ms-color-text-placeholder);
  --ms-line: var(--ms-color-border);
  --ms-line-strong: var(--ms-color-border-strong);
  --ms-surface: var(--ms-color-surface);
  --ms-canvas: var(--ms-color-bg-subtle);
  --ms-night: var(--ms-color-surface-inverse);
  --ms-night-2: var(--ms-color-surface-inverse-2);
  --ms-success-600: var(--ms-color-success);
  --ms-success-50: var(--ms-color-success-subtle);
  --ms-warning-600: var(--ms-color-warning);
  --ms-warning-50: var(--ms-color-warning-subtle);
  --ms-danger-600: var(--ms-color-danger);
  --ms-danger-50: var(--ms-color-danger-subtle);
  --ms-gradient-brand: linear-gradient(135deg, var(--ms-blue-600), var(--ms-cyan-500));
  --ms-text-display: var(--ms-font-size-6xl);
  --ms-text-h1: var(--ms-font-size-5xl);
  --ms-text-h2: var(--ms-font-size-4xl);
  --ms-text-h3: var(--ms-font-size-xl);
  --ms-text-body-lg: var(--ms-font-size-lg);
  --ms-text-body: var(--ms-font-size-md);
  --ms-text-sm: var(--ms-font-size-sm);
  --ms-text-xs: var(--ms-font-size-2xs);
  --ms-radius-pill: var(--ms-radius-full);
  --ms-shadow-1: var(--ms-shadow-xs);
  --ms-shadow-2: var(--ms-shadow-md);
  --ms-shadow-3: var(--ms-shadow-xl);
  --ms-focus: var(--ms-ring-focus);
  --ms-ease: var(--ms-ease-out);
  --ms-dur-fast: var(--ms-duration-fast);
  --ms-dur: var(--ms-duration-base);
}

/* ---------- 2. Base ------------------------------------------------------ */
/* The legacy theme made <body> a second scroll container (height:100% + overflow:auto) and hid
   its scrollbar. That breaks position:sticky, scroll restoration and keyboard/AT scrolling.
   Restore a single document scroller. */
html,
body {
  height: auto !important;
}

body {
  overflow: visible !important;
  min-height: 100vh;
  scrollbar-width: auto !important;
}

html {
  overflow-x: clip !important;
  scroll-padding-top: calc(var(--ms-header-h) + 16px);
}

body {
  font-family: var(--ms-font-sans);
  color: var(--ms-color-text-body);
  background: var(--ms-color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

:where(.ms-scope) *,
:where(.ms-scope) *::before,
:where(.ms-scope) *::after {
  box-sizing: border-box;
}

.ms-scope {
  font-family: var(--ms-font-sans);
  font-size: var(--ms-font-size-md);
  line-height: var(--ms-line-height-body);
  color: var(--ms-color-text-body);
}

.ms-scope :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--ms-font-sans);
  font-weight: var(--ms-font-weight-semibold);
  color: var(--ms-color-text);
  margin: 0;
  letter-spacing: var(--ms-tracking-tight);
  text-wrap: balance;
}

.ms-scope :where(p) {
  margin: 0;
  text-wrap: pretty;
}

.ms-scope :where(ul, ol) {
  margin: 0;
  padding: 0;
}

.ms-scope :where(a) {
  color: inherit;
  text-decoration: none;
}

.ms-scope :where(figure, blockquote) {
  margin: 0;
}

.ms-scope :where(img) {
  max-width: 100%;
  height: auto;
  display: block;
}

.ms-scope :where(strong, b) {
  font-weight: var(--ms-font-weight-semibold);
}

/* Default icon size; components below override it with more specific rules. */
.ms-scope svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.ms-eyebrow svg {
  width: 14px;
  height: 14px;
}

.ms-scope :where(a, button, summary, input, select, textarea):focus-visible {
  outline: none;
  box-shadow: var(--ms-ring-focus);
  border-radius: var(--ms-radius-sm);
}

.ms-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.ms-skip-link {
  position: absolute;
  left: var(--ms-space-4);
  top: -100px;
  z-index: var(--ms-z-toast);
  padding: var(--ms-space-3) var(--ms-space-5);
  background: var(--ms-color-text);
  color: var(--ms-color-text-inverse) !important;
  border-radius: var(--ms-radius-md);
  font-weight: var(--ms-font-weight-semibold);
  transition: top var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-skip-link:focus {
  top: var(--ms-space-3);
}

@media (prefers-reduced-motion: reduce) {
  .ms-scope *,
  .ms-scope *::before,
  .ms-scope *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 3. Layout & type --------------------------------------------- */
.ms-container {
  width: 100%;
  max-width: calc(var(--ms-container) + 2 * var(--ms-gutter));
  margin-inline: auto;
  padding-inline: var(--ms-gutter);
}

.ms-container--wide {
  max-width: calc(var(--ms-container-wide) + 2 * var(--ms-gutter));
}

.ms-section {
  padding-block: var(--ms-section-y);
}

.ms-section--canvas {
  background: var(--ms-color-bg-subtle);
  border-block: 1px solid var(--ms-color-border);
}

.ms-section--night {
  background: var(--ms-color-surface-inverse);
  color: var(--ms-color-text-inverse-secondary);
}

.ms-section--night :where(h1, h2, h3) {
  color: var(--ms-color-text-inverse);
}

.ms-section-head {
  max-width: 680px;
  margin-bottom: var(--ms-space-7);
}

.ms-section-head--center {
  margin-inline: auto;
  text-align: center;
}

.ms-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-2);
  margin-bottom: var(--ms-space-4);
  font-size: var(--ms-font-size-sm);
  font-weight: var(--ms-font-weight-medium);
  line-height: var(--ms-line-height-snug);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ms-color-primary-text);
}

.ms-section--night .ms-eyebrow {
  color: var(--ms-color-link-inverse);
}

.ms-h1 {
  font-size: var(--ms-font-size-5xl);
  line-height: var(--ms-line-height-heading);
  font-weight: var(--ms-font-weight-semibold);
  letter-spacing: var(--ms-tracking-display);
}

.ms-h2 {
  font-size: var(--ms-font-size-4xl);
  line-height: var(--ms-line-height-heading);
  font-weight: var(--ms-font-weight-semibold);
  letter-spacing: var(--ms-tracking-heading);
}

.ms-h3 {
  font-size: var(--ms-font-size-xl);
  line-height: 1.35;
  font-weight: var(--ms-font-weight-semibold);
  letter-spacing: var(--ms-tracking-tight);
}

.ms-lead {
  margin-top: var(--ms-space-4);
  font-size: var(--ms-font-size-lg);
  line-height: var(--ms-line-height-body);
  color: var(--ms-color-text-secondary);
}

.ms-section--night .ms-lead {
  color: var(--ms-color-text-inverse-secondary);
}

.ms-muted {
  color: var(--ms-color-text-secondary);
}

.ms-grid {
  display: grid;
  gap: var(--ms-space-6);
}

@media (min-width: 640px) {
  .ms-grid--2,
  .ms-grid--3,
  .ms-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .ms-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ms-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Scroll reveal (UI refresh 2026-10): metusoft.js adds .ms-reveal-on to <html> only when IntersectionObserver
   exists and the visitor has not asked for reduced motion; elements already on screen are marked revealed
   first, so nothing above the fold ever blinks. Without JavaScript everything is simply visible. */
@media (prefers-reduced-motion: no-preference) {
  .ms-reveal-on [data-ms-reveal] {
    transition: opacity 520ms var(--ms-ease-out), transform 520ms var(--ms-ease-out),
      box-shadow var(--ms-duration-base) var(--ms-ease-out), border-color var(--ms-duration-base) var(--ms-ease-out);
  }

  .ms-reveal-on [data-ms-reveal]:not(.is-revealed) {
    opacity: 0;
    transform: translateY(16px);
  }
}

/* ---------- 4. Buttons --------------------------------------------------- */
/* One button family: primary (one per view), secondary (outlined), ghost (tertiary), and two
   variants for dark surfaces. Sizes sm 36 / md 44 / lg 52; icons 16–18px. */
.ms-btn {
  --_bg: var(--ms-color-primary);
  --_fg: var(--ms-color-on-primary);
  --_bd: var(--ms-color-primary);
  --_shadow: var(--ms-shadow-primary), inset 0 1px 0 rgb(255 255 255 / 0.16);
  /* UI refresh 2026-10: the primary action carries a faint top light so it reads first on every page */
  --_sheen: linear-gradient(180deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ms-space-2);
  min-height: var(--ms-control-md);
  padding: 0 var(--ms-space-5);
  border: 1px solid var(--_bd);
  border-radius: var(--ms-radius-md);
  background: var(--_sheen, none), var(--_bg) !important; /* legacy theme forces .btn backgrounds */
  color: var(--_fg) !important;
  box-shadow: var(--_shadow);
  font-family: var(--ms-font-sans);
  font-size: var(--ms-font-size-sm);
  font-weight: var(--ms-font-weight-semibold);
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none !important;
  transition: background-color var(--ms-duration-fast) var(--ms-ease-out), border-color var(--ms-duration-fast) var(--ms-ease-out),
    color var(--ms-duration-fast) var(--ms-ease-out), box-shadow var(--ms-duration-fast) var(--ms-ease-out),
    transform var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-btn:hover {
  --_bg: var(--ms-color-primary-hover);
  --_bd: var(--ms-color-primary-hover);
  transform: translateY(-1px);
}

.ms-btn:active {
  --_bg: var(--ms-color-primary-active);
  --_bd: var(--ms-color-primary-active);
  transform: none;
}

.ms-btn:focus-visible {
  outline: none;
  box-shadow: var(--_shadow), var(--ms-ring-focus);
}

.ms-btn[disabled],
.ms-btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

.ms-btn--secondary {
  --_bg: var(--ms-color-surface);
  --_fg: var(--ms-color-text);
  --_bd: var(--ms-color-border-strong);
  --_shadow: var(--ms-shadow-xs);
  --_sheen: none;
}

.ms-btn--secondary:hover,
.ms-btn--ghost:hover,
.ms-btn--on-dark:hover,
.ms-btn--outline-dark:hover {
  transform: none;
}

/* WhatsApp order (product page): the recognisable green, kept to one button per view */
.ms-btn--whatsapp {
  --_bg: var(--ms-color-whatsapp);
  --_bd: var(--ms-color-whatsapp);
  --_shadow: 0 1px 2px rgb(11 97 57 / 0.3), 0 6px 16px -6px rgb(14 122 74 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.16);
}

.ms-btn--whatsapp:hover {
  --_bg: var(--ms-color-whatsapp-hover);
  --_bd: var(--ms-color-whatsapp-hover);
}

.ms-btn--whatsapp:active {
  --_bg: var(--ms-green-700);
  --_bd: var(--ms-green-700);
}

.ms-btn--secondary:hover {
  --_bg: var(--ms-color-bg-subtle);
  --_bd: var(--ms-gray-400);
}

.ms-btn--secondary:active {
  --_bg: var(--ms-color-bg-muted);
  --_bd: var(--ms-gray-400);
}

.ms-btn--ghost {
  --_bg: transparent;
  --_fg: var(--ms-color-text);
  --_bd: transparent;
  --_shadow: none;
  --_sheen: none;
}

.ms-btn--ghost:hover,
.ms-btn--ghost:active {
  --_bg: var(--ms-color-bg-muted);
  --_bd: transparent;
}

.ms-btn--on-dark {
  --_bg: var(--ms-gray-0);
  --_fg: var(--ms-color-text);
  --_bd: var(--ms-gray-0);
  --_shadow: none;
  --_sheen: none;
}

.ms-btn--on-dark:hover,
.ms-btn--on-dark:active {
  --_bg: var(--ms-blue-50);
  --_bd: var(--ms-blue-50);
}

.ms-btn--outline-dark {
  --_bg: transparent;
  --_fg: var(--ms-color-text-inverse);
  --_bd: rgb(255 255 255 / 0.28);
  --_shadow: none;
  --_sheen: none;
}

.ms-btn--outline-dark:hover,
.ms-btn--outline-dark:active {
  --_bg: rgb(255 255 255 / 0.08);
  --_bd: rgb(255 255 255 / 0.5);
}

.ms-btn--sm {
  min-height: var(--ms-control-sm);
  padding: 0 var(--ms-space-3);
  font-size: var(--ms-font-size-sm);
}

.ms-btn--lg {
  min-height: var(--ms-control-lg);
  padding: 0 var(--ms-space-6);
  font-size: var(--ms-font-size-md);
}

.ms-btn--block {
  width: 100%;
}

.ms-btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.ms-btn--lg svg {
  width: 18px;
  height: 18px;
}

.ms-link {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-1);
  color: var(--ms-color-primary-text) !important;
  font-weight: var(--ms-font-weight-medium);
  text-decoration: none;
}

.ms-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.ms-link svg {
  width: 16px;
  height: 16px;
  transition: transform var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-link:hover svg {
  transform: translateX(2px);
}

/* ---------- 5. Forms ----------------------------------------------------- */
.ms-field {
  display: grid;
  gap: var(--ms-space-1-5);
}

.ms-label {
  font-size: var(--ms-font-size-sm);
  font-weight: var(--ms-font-weight-medium);
  line-height: var(--ms-line-height-snug);
  color: var(--ms-color-text);
}

.ms-label .ms-required {
  color: var(--ms-color-danger);
  margin-left: 2px;
}

.ms-optional {
  color: var(--ms-color-text-tertiary);
  font-weight: var(--ms-font-weight-regular);
}

.ms-scope .ms-input,
.ms-scope input.ms-input,
.ms-scope select.ms-input,
.ms-scope textarea.ms-input {
  width: 100%;
  height: var(--ms-control-md) !important; /* legacy CSS forces 50px on inputs */
  padding: 0 var(--ms-space-3) !important;
  border: 1px solid var(--ms-color-border-strong);
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-surface);
  color: var(--ms-color-text);
  box-shadow: var(--ms-shadow-xs);
  font: var(--ms-font-weight-regular) var(--ms-font-size-md) / 1.4 var(--ms-font-sans);
  transition: border-color var(--ms-duration-fast) var(--ms-ease-out), box-shadow var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-scope select.ms-input {
  appearance: none;
  padding-right: 40px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23525a6d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

.ms-scope textarea.ms-input {
  height: auto !important;
  min-height: 132px;
  padding: var(--ms-space-3) !important;
  resize: vertical;
}

.ms-scope .ms-input::placeholder {
  color: var(--ms-color-text-placeholder);
}

.ms-scope .ms-input:hover {
  border-color: var(--ms-gray-400);
}

.ms-scope .ms-input:focus {
  outline: none;
  border-color: var(--ms-color-primary);
  box-shadow: var(--ms-ring-focus);
}

.ms-scope .ms-input[aria-invalid="true"] {
  border-color: var(--ms-color-danger);
}

.ms-scope .ms-input[aria-invalid="true"]:focus {
  box-shadow: var(--ms-ring-danger);
}

.ms-scope .ms-input:disabled {
  background: var(--ms-color-bg-subtle);
  color: var(--ms-color-text-tertiary);
  cursor: not-allowed;
}

.ms-help {
  font-size: var(--ms-font-size-sm);
  line-height: var(--ms-line-height-snug);
  color: var(--ms-color-text-secondary);
}

.ms-error {
  font-size: var(--ms-font-size-sm);
  line-height: var(--ms-line-height-snug);
  color: var(--ms-color-danger);
  font-weight: var(--ms-font-weight-medium);
}

.ms-input-group {
  display: flex;
  gap: var(--ms-space-2);
}

.ms-input-group .ms-input {
  flex: 1;
  min-width: 0;
}

@media (max-width: 639px) {
  .ms-input-group {
    flex-direction: column;
  }

  /* UI V4 fix: in a column, flex: 1 (basis 0) squeezed the input to ~20px (footer newsletter on phones) */
  .ms-input-group .ms-input {
    flex: none;
  }
}

.ms-check {
  display: flex;
  gap: var(--ms-space-3);
  align-items: flex-start;
  font-size: var(--ms-font-size-sm);
}

.ms-check input {
  width: 18px !important;
  height: 18px !important;
  margin-top: 2px;
  accent-color: var(--ms-color-primary);
}

/* ---------- 6. Badges & alerts ------------------------------------------- */
.ms-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-1);
  min-height: 24px;
  padding: 0 var(--ms-space-2);
  border: 1px solid var(--ms-color-primary-border);
  border-radius: var(--ms-radius-sm);
  background: var(--ms-color-primary-subtle);
  color: var(--ms-blue-800);
  font-size: var(--ms-font-size-2xs);
  font-weight: var(--ms-font-weight-medium);
  line-height: 1;
  white-space: nowrap;
}

.ms-badge--neutral {
  border-color: var(--ms-color-border);
  background: var(--ms-color-bg-subtle);
  color: var(--ms-color-text-body);
}

.ms-badge--success {
  border-color: var(--ms-color-success-border);
  background: var(--ms-color-success-subtle);
  color: var(--ms-green-700);
}

.ms-badge--warning {
  border-color: var(--ms-color-warning-border);
  background: var(--ms-color-warning-subtle);
  color: var(--ms-amber-700);
}

.ms-badge--danger {
  border-color: var(--ms-color-danger-border);
  background: var(--ms-color-danger-subtle);
  color: var(--ms-red-700);
}

.ms-alert {
  display: flex;
  gap: var(--ms-space-3);
  padding: var(--ms-space-3) var(--ms-space-4);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-bg-subtle);
  color: var(--ms-color-text-body);
  font-size: var(--ms-font-size-sm);
  line-height: var(--ms-line-height-snug);
}

.ms-alert--success {
  background: var(--ms-color-success-subtle);
  border-color: var(--ms-color-success-border);
  color: var(--ms-green-700);
}

.ms-alert--warning {
  background: var(--ms-color-warning-subtle);
  border-color: var(--ms-color-warning-border);
  color: var(--ms-amber-700);
}

.ms-alert--danger {
  background: var(--ms-color-danger-subtle);
  border-color: var(--ms-color-danger-border);
  color: var(--ms-red-700);
}

/* ---------- 7. Header & navigation --------------------------------------- */
.ms-header {
  position: sticky;
  top: 0;
  z-index: var(--ms-z-header);
  background: rgb(255 255 255 / 0.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--ms-color-border);
  transition: box-shadow var(--ms-duration-base) var(--ms-ease-out);
}

.ms-header.is-scrolled {
  box-shadow: 0 1px 0 rgb(11 16 51 / 0.02), 0 8px 24px -16px rgb(11 16 51 / 0.18);
}

.ms-header__bar {
  display: flex;
  align-items: center;
  gap: var(--ms-space-8);
  height: var(--ms-header-h);
}

.ms-header__logo {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.ms-header__logo img {
  width: auto;
  height: 34px;
  object-fit: contain;
}

.ms-nav {
  display: none;
  flex: 1;
}

.ms-nav__list {
  display: flex;
  align-items: center;
  gap: var(--ms-space-0-5);
  list-style: none;
}

.ms-nav__item {
  position: relative;
}

.ms-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-1);
  height: 36px;
  padding: 0 var(--ms-space-3);
  border: 0;
  border-radius: var(--ms-radius-md);
  background: transparent;
  color: var(--ms-color-text-body) !important;
  font: var(--ms-font-weight-medium) var(--ms-font-size-sm) / 1 var(--ms-font-sans);
  cursor: pointer;
  transition: background-color var(--ms-duration-fast) var(--ms-ease-out), color var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-nav__link:hover,
.ms-nav__item.is-open > .ms-nav__link {
  background: var(--ms-color-bg-muted);
  color: var(--ms-color-text) !important;
}

.ms-nav__link[aria-current="page"] {
  color: var(--ms-color-text) !important;
  box-shadow: inset 0 -2px 0 var(--ms-color-primary);
  border-radius: 0;
}

.ms-nav__link svg {
  width: 14px;
  height: 14px;
  color: var(--ms-color-text-tertiary);
  transition: transform var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-nav__item.is-open > .ms-nav__link svg {
  transform: rotate(180deg);
}

.ms-mega {
  position: absolute;
  top: calc(100% + 12px);
  left: 0; /* aligned with the trigger; widths stay inside the viewport from 1024px up */
  width: min(760px, calc(100vw - 2 * var(--ms-gutter)));
  padding: var(--ms-space-3);
  background: var(--ms-color-surface);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--ms-duration-fast) var(--ms-ease-out), transform var(--ms-duration-fast) var(--ms-ease-out),
    visibility 0s linear var(--ms-duration-fast);
}

.ms-mega::before {
  /* hover bridge between trigger and panel */
  content: "";
  position: absolute;
  inset: -14px 0 auto;
  height: 14px;
}

.ms-nav__item.is-open > .ms-mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.ms-mega--narrow {
  width: min(400px, calc(100vw - 2 * var(--ms-gutter)));
}

.ms-mega__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 236px;
  gap: 0 var(--ms-space-2);
}

.ms-mega--narrow .ms-mega__grid {
  grid-template-columns: 1fr;
}

.ms-mega__title {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ms-space-2) var(--ms-space-3) var(--ms-space-3);
  margin-bottom: var(--ms-space-2);
  border-bottom: 1px solid var(--ms-color-border);
  font-size: var(--ms-font-size-2xs);
  font-weight: var(--ms-font-weight-medium);
  letter-spacing: var(--ms-tracking-caps);
  text-transform: uppercase;
  color: var(--ms-color-text-tertiary);
}

.ms-mega__list {
  display: grid;
  gap: 1px;
  list-style: none;
  align-content: start;
}

.ms-mega__link {
  display: flex;
  align-items: center;
  gap: var(--ms-space-3);
  padding: var(--ms-space-2) var(--ms-space-3);
  min-height: 40px;
  border-radius: var(--ms-radius-md);
  color: var(--ms-color-text-body) !important;
  font-size: var(--ms-font-size-sm);
  font-weight: var(--ms-font-weight-medium);
  transition: background-color var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-mega__link:hover {
  background: var(--ms-color-bg-muted);
  color: var(--ms-color-text) !important;
}

.ms-mega__link small {
  display: block;
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-xs);
  font-weight: var(--ms-font-weight-regular);
  margin-top: 2px;
  line-height: var(--ms-line-height-snug);
}

.ms-mega__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-surface);
  color: var(--ms-color-primary);
  box-shadow: var(--ms-shadow-xs);
}

.ms-mega__icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.ms-mega__icon svg {
  width: 18px;
  height: 18px;
}

.ms-mega__feature {
  grid-row: 2;
  grid-column: 3;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-2);
  padding: var(--ms-space-5);
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-surface-inverse);
  color: var(--ms-color-text-inverse-secondary);
  font-size: var(--ms-font-size-sm);
  line-height: var(--ms-line-height-snug);
}

.ms-mega__feature strong {
  color: var(--ms-color-text-inverse);
  font-size: var(--ms-font-size-md);
  font-weight: var(--ms-font-weight-semibold);
}

.ms-mega__feature .ms-btn {
  margin-top: auto;
  align-self: flex-start;
}

.ms-mega__title .ms-mega__all {
  color: var(--ms-color-primary-text) !important;
  font-size: var(--ms-font-size-xs);
  letter-spacing: 0;
  text-transform: none;
  font-weight: var(--ms-font-weight-medium);
}

.ms-header__actions {
  display: flex;
  align-items: center;
  gap: var(--ms-space-1);
  margin-left: auto;
}

.ms-icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--ms-radius-md);
  background: transparent;
  color: var(--ms-color-text-body) !important;
  cursor: pointer;
  transition: background-color var(--ms-duration-fast) var(--ms-ease-out), color var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-icon-btn:hover {
  background: var(--ms-color-bg-muted);
  color: var(--ms-color-text) !important;
}

.ms-icon-btn svg {
  width: 20px;
  height: 20px;
}

.ms-icon-btn__count {
  position: absolute;
  top: 5px;
  right: 3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid var(--ms-color-surface);
  border-radius: var(--ms-radius-full);
  background: var(--ms-color-primary);
  color: var(--ms-color-on-primary);
  font-size: 10px;
  font-weight: var(--ms-font-weight-semibold);
  line-height: 14px;
  text-align: center;
  box-sizing: border-box;
}

.ms-header__account-label {
  display: none;
}

.ms-header__cta {
  display: none;
}

@media (min-width: 1024px) {
  .ms-nav {
    display: block;
  }

  .ms-header__cta {
    display: inline-flex;
    min-height: var(--ms-control-sm);
    margin-left: var(--ms-space-2);
  }

  .ms-header__burger {
    display: none !important;
  }

  .ms-header__actions {
    margin-left: 0;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .ms-header__bar {
    gap: var(--ms-space-5);
  }
}

@media (min-width: 1280px) {
  .ms-header__account-label {
    display: inline;
  }

  .ms-header__account {
    width: auto;
    padding: 0 var(--ms-space-3);
    gap: var(--ms-space-2);
    display: inline-flex;
    align-items: center;
    font-size: var(--ms-font-size-sm);
    font-weight: var(--ms-font-weight-medium);
  }

  .ms-header__account svg {
    width: 18px;
    height: 18px;
  }
}

/* Member avatar (UI V4): initials on the brand gradient; an icon when the record has no name */
.ms-avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--ms-radius-full);
  background: linear-gradient(135deg, var(--ms-blue-500), var(--ms-navy-800));
  color: #fff;
  font-size: 12px;
  font-weight: var(--ms-font-weight-semibold);
  letter-spacing: 0.02em;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--ms-color-surface), 0 0 0 3px var(--ms-color-primary-border);
}

.ms-avatar svg {
  width: 16px;
  height: 16px;
}

.ms-avatar--lg {
  width: 44px;
  height: 44px;
  font-size: 15px;
}

/* Header user menu (UI V4): name + avatar button, click-to-open panel with the member pages and sign-out */
.ms-usermenu {
  position: relative;
}

.ms-usermenu__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-2);
  height: 44px;
  padding: 0 var(--ms-space-1-5, 6px);
  border: 1px solid transparent;
  border-radius: var(--ms-radius-full);
  background: transparent;
  color: var(--ms-color-text) !important;
  font: var(--ms-font-weight-medium) var(--ms-font-size-sm) / 1 var(--ms-font-sans);
  cursor: pointer;
  transition: background-color var(--ms-duration-fast) var(--ms-ease-out), border-color var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-usermenu__trigger:hover,
.ms-usermenu.is-open .ms-usermenu__trigger {
  border-color: var(--ms-color-border);
  background: var(--ms-color-bg-muted);
}

.ms-usermenu__trigger > svg {
  display: none;
  width: 14px;
  height: 14px;
  color: var(--ms-color-text-tertiary);
  transition: transform var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-usermenu.is-open .ms-usermenu__trigger > svg {
  transform: rotate(180deg);
}

.ms-usermenu__name {
  display: none;
  max-width: 168px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-usermenu__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: calc(var(--ms-z-header) + 1);
  width: min(300px, calc(100vw - 2 * var(--ms-gutter)));
  padding: var(--ms-space-2);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-surface);
  box-shadow: var(--ms-shadow-lg);
  transform-origin: top right;
}

.ms-usermenu.is-open .ms-usermenu__panel {
  animation: ms-usermenu-in var(--ms-duration-fast) var(--ms-ease-out);
}

@keyframes ms-usermenu-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
}

.ms-usermenu__panel[hidden] {
  display: none;
}

/* phones/tablets: the avatar is not at the screen edge (cart and menu buttons follow it), so the panel is
   pinned to the viewport's right gutter under the header instead of the button */
@media (max-width: 1023px) {
  .ms-usermenu__panel {
    position: fixed;
    top: calc(var(--ms-header-h) + 6px);
    right: var(--ms-gutter);
    max-height: calc(100dvh - var(--ms-header-h) - 24px);
    overflow-y: auto;
  }
}

.ms-usermenu__head {
  display: flex;
  align-items: center;
  gap: var(--ms-space-3);
  margin-bottom: var(--ms-space-2);
  padding: var(--ms-space-3);
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-bg-subtle);
}

.ms-usermenu__who {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ms-usermenu__who strong,
.ms-usermenu__who small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-usermenu__who strong {
  color: var(--ms-color-text);
  font-size: var(--ms-font-size-sm);
}

.ms-usermenu__who small {
  color: var(--ms-color-text-secondary);
  font-size: 12px;
}

.ms-usermenu__list {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-usermenu .ms-usermenu__link { /* beats body.ms-lean :where(button) { font: inherit } */
  display: flex;
  align-items: center;
  gap: var(--ms-space-3);
  width: 100%;
  min-height: 40px;
  padding: 0 var(--ms-space-3);
  border: 0;
  border-radius: var(--ms-radius-md);
  background: transparent;
  color: var(--ms-color-text-body) !important;
  font: var(--ms-font-weight-medium) var(--ms-font-size-sm) / 1.2 var(--ms-font-sans);
  text-align: left;
  cursor: pointer;
}

.ms-usermenu__link svg {
  width: 18px;
  height: 18px;
  color: var(--ms-color-text-tertiary);
}

.ms-usermenu__link:hover,
.ms-usermenu__link:focus-visible {
  background: var(--ms-color-bg-muted);
  color: var(--ms-color-text) !important;
}

.ms-usermenu__link[aria-current="page"] {
  background: var(--ms-color-primary-subtle);
  color: var(--ms-color-primary-text) !important;
}

.ms-usermenu__link[aria-current="page"] svg {
  color: var(--ms-color-primary);
}

.ms-usermenu__foot {
  margin: var(--ms-space-2) 0 0;
  padding-top: var(--ms-space-2);
  border-top: 1px solid var(--ms-color-border);
}

.ms-usermenu__logout:hover,
.ms-usermenu__logout:focus-visible,
.ms-usermenu__logout:hover svg {
  background: var(--ms-color-danger-subtle);
  color: var(--ms-color-danger) !important;
}

@media (min-width: 1280px) {
  .ms-usermenu__trigger {
    padding: 0 var(--ms-space-3) 0 6px;
  }

  .ms-usermenu__name,
  .ms-usermenu__trigger > svg {
    display: inline-block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ms-usermenu.is-open .ms-usermenu__panel {
    animation: none;
  }
}

/* Mobile drawer */
.ms-drawer {
  position: fixed;
  inset: 0;
  z-index: 10000; /* above the legacy cookie banner (9999) */
  visibility: hidden;
}

.ms-drawer.is-open {
  visibility: visible;
}

.ms-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(7 10 34 / 0.48);
  opacity: 0;
  transition: opacity var(--ms-duration-base) var(--ms-ease-out);
}

.ms-drawer.is-open .ms-drawer__backdrop {
  opacity: 1;
}

.ms-drawer__panel {
  position: absolute;
  inset: 0 0 0 auto;
  display: flex;
  flex-direction: column;
  width: min(400px, 100%);
  background: var(--ms-color-surface);
  box-shadow: var(--ms-shadow-xl);
  transform: translateX(100%);
  transition: transform var(--ms-duration-slow) var(--ms-ease-out);
}

.ms-drawer.is-open .ms-drawer__panel {
  transform: translateX(0);
}

.ms-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--ms-header-h);
  padding: 0 var(--ms-space-3) 0 var(--ms-gutter);
  border-bottom: 1px solid var(--ms-color-border);
}

.ms-drawer__head img {
  height: 30px;
  width: auto;
}

.ms-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--ms-space-2) var(--ms-gutter) var(--ms-space-6);
  overscroll-behavior: contain;
}

.ms-drawer__group {
  border-bottom: 1px solid var(--ms-color-border);
}

.ms-drawer__group > summary,
.ms-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  font-weight: var(--ms-font-weight-medium);
  font-size: var(--ms-font-size-md);
  color: var(--ms-color-text) !important;
  cursor: pointer;
  list-style: none;
}

.ms-drawer__group > summary::-webkit-details-marker {
  display: none;
}

.ms-drawer__group > summary svg {
  width: 18px;
  height: 18px;
  color: var(--ms-color-text-tertiary);
  transition: transform var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-drawer__group[open] > summary svg {
  transform: rotate(180deg);
}

.ms-drawer__sub {
  display: grid;
  gap: 1px;
  padding-bottom: var(--ms-space-3);
  list-style: none;
}

.ms-drawer__sub a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--ms-space-3);
  border-radius: var(--ms-radius-md);
  color: var(--ms-color-text-body) !important;
  font-size: var(--ms-font-size-sm);
}

.ms-drawer__sub a:hover {
  background: var(--ms-color-bg-muted);
}

.ms-drawer__link {
  border-bottom: 1px solid var(--ms-color-border);
}

/* signed-in member in the drawer (UI V4): name + avatar, member pages, sign-out form */
.ms-drawer__who {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-3);
  min-width: 0;
}

.ms-drawer__who > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-drawer__account > summary .ms-avatar svg {
  width: 16px;
  height: 16px;
  color: #fff;
  transform: none !important;
}

.ms-drawer__sub form {
  margin: 0;
}

.ms-drawer .ms-drawer__logout {
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
  width: 100%;
  min-height: 44px;
  padding: 0 var(--ms-space-3);
  border: 0;
  border-radius: var(--ms-radius-md);
  background: transparent;
  color: var(--ms-color-danger);
  font: var(--ms-font-weight-medium) var(--ms-font-size-sm) / 1 var(--ms-font-sans);
  cursor: pointer;
}

.ms-drawer__logout svg {
  width: 18px;
  height: 18px;
}

.ms-drawer__logout:hover {
  background: var(--ms-color-danger-subtle);
}

.ms-drawer__foot {
  display: grid;
  gap: var(--ms-space-3);
  padding: var(--ms-space-4) var(--ms-gutter) calc(var(--ms-space-4) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--ms-color-border);
  background: var(--ms-color-bg-subtle);
}

.ms-drawer__contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-2) var(--ms-space-5);
  font-size: var(--ms-font-size-sm);
}

.ms-drawer__contact a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--ms-color-text-body) !important;
  font-weight: var(--ms-font-weight-medium);
}

body.ms-no-scroll {
  overflow: hidden !important;
}

/* ---------- 8. Cards ----------------------------------------------------- */
.ms-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ms-color-surface);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-xs);
  transition: border-color var(--ms-duration-base) var(--ms-ease-out), box-shadow var(--ms-duration-base) var(--ms-ease-out);
}

.ms-card:hover {
  border-color: var(--ms-color-border-strong);
  box-shadow: var(--ms-shadow-md);
}

/* Product card (UI refresh 2026-10, default/partials/product-card.php): one stretched title link, one
   primary action ("Satın Al"), a quiet link row (demo · details · quote). Compact: 2:1 screenshot (the real
   capture ratio, no side cropping), 16 px body padding, two-line title and summary. */
.ms-pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-surface);
  box-shadow: var(--ms-shadow-card);
  transition: transform var(--ms-duration-base) var(--ms-ease-out), box-shadow var(--ms-duration-base) var(--ms-ease-out),
    border-color var(--ms-duration-base) var(--ms-ease-out);
}

.ms-pcard:hover {
  transform: translateY(-3px);
  border-color: var(--ms-color-primary-border);
  box-shadow: var(--ms-shadow-card-hover);
}

.ms-pcard:focus-within {
  border-color: var(--ms-color-primary-border);
}

.ms-pcard__media {
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border-bottom: 1px solid var(--ms-color-border);
  background: var(--ms-color-bg-tint);
}

.ms-pcard__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 600ms var(--ms-ease-out);
}

.ms-pcard:hover .ms-pcard__media img {
  transform: scale(1.04);
}

.ms-pcard__media--empty {
  display: grid;
  place-items: center;
  color: var(--ms-color-text-placeholder);
}

.ms-scope .ms-pcard__media--empty > svg {
  width: 32px;
  height: 32px;
}

/* V3: real discount as a quiet tag beside the old price — the screenshot and the price lead, not the badge */
.ms-pcard__was {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
}

.ms-pcard__deal {
  padding: 1px 6px;
  border: 1px solid var(--ms-color-success-border);
  border-radius: var(--ms-radius-sm);
  background: var(--ms-color-success-subtle);
  color: var(--ms-color-savings);
  font-size: var(--ms-font-size-2xs);
  font-weight: var(--ms-font-weight-semibold);
  line-height: 1.4;
}

.ms-pcard__peek {
  position: absolute;
  right: var(--ms-space-2);
  bottom: var(--ms-space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-1);
  padding: 6px 10px;
  border-radius: var(--ms-radius-full);
  background: rgb(11 16 51 / 0.82);
  color: #fff;
  font-size: var(--ms-font-size-2xs);
  font-weight: var(--ms-font-weight-semibold);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--ms-duration-base) var(--ms-ease-out), transform var(--ms-duration-base) var(--ms-ease-out);
}

.ms-scope .ms-pcard__peek svg {
  width: 14px;
  height: 14px;
}

.ms-pcard:hover .ms-pcard__peek {
  opacity: 1;
  transform: none;
}

@media (hover: none) {
  .ms-pcard__peek {
    display: none;
  }
}

.ms-pcard__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--ms-space-1-5);
  padding: var(--ms-space-3) var(--ms-space-4) var(--ms-space-4);
}

.ms-pcard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--ms-space-2);
  font-size: var(--ms-font-size-2xs);
  line-height: 1.4;
  color: var(--ms-color-text-secondary);
}

.ms-pcard__cat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ms-color-primary-text);
  font-weight: var(--ms-font-weight-medium);
}

.ms-scope .ms-pcard__cat svg {
  width: 14px;
  height: 14px;
}

.ms-pcard__cat + .ms-pcard__lic::before {
  content: "·";
  margin-right: var(--ms-space-2);
  color: var(--ms-color-text-placeholder);
}

.ms-pcard__title {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--ms-font-size-md);
  font-weight: var(--ms-font-weight-semibold);
  line-height: 1.35;
  letter-spacing: var(--ms-tracking-tight);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ms-pcard__title a {
  color: var(--ms-color-text) !important;
}

.ms-pcard__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.ms-pcard__title a:focus-visible {
  box-shadow: none;
}

.ms-pcard__title a:focus-visible::after {
  box-shadow: inset 0 0 0 3px var(--ms-color-focus);
}

.ms-pcard__summary {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-sm);
  line-height: 1.5;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ms-pcard__buy {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ms-space-3);
  margin-top: auto;
  padding-top: var(--ms-space-3);
}

.ms-pcard .ms-price__now {
  font-size: var(--ms-font-size-xl);
}

.ms-pcard__action {
  position: relative;
  z-index: 2; /* above the stretched title link */
}

.ms-pcard__links {
  position: relative;
  z-index: 2;
  display: flex;
  border-top: 1px solid var(--ms-color-border);
  background: var(--ms-gray-25);
}

.ms-pcard__links a {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 42px;
  padding: 0 var(--ms-space-2);
  color: var(--ms-color-text-secondary) !important;
  font-size: var(--ms-font-size-2xs);
  font-weight: var(--ms-font-weight-medium);
  white-space: nowrap;
  transition: background-color var(--ms-duration-fast) var(--ms-ease-out), color var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-pcard__links a + a {
  border-left: 1px solid var(--ms-color-border);
}

.ms-pcard__links a:hover {
  background: var(--ms-color-primary-subtle);
  color: var(--ms-color-primary-text) !important;
}

.ms-pcard__links a:focus-visible {
  border-radius: 0;
  box-shadow: inset var(--ms-ring-focus);
}

.ms-scope .ms-pcard__links svg {
  width: 15px;
  height: 15px;
}

/* Price display — shared by cards, the showcase and the purchase box */
.ms-price {
  display: grid;
  gap: 2px;
}

.ms-price__old {
  color: var(--ms-color-text-tertiary);
  font-size: var(--ms-font-size-xs);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

.ms-price__now {
  color: var(--ms-color-text);
  font-size: var(--ms-font-size-xl);
  font-weight: var(--ms-font-weight-semibold);
  letter-spacing: var(--ms-tracking-tight);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.ms-price__note {
  color: var(--ms-color-text-secondary); /* also sits on gray-50 (total row): tertiary would be 4.4:1 */
  font-size: var(--ms-font-size-2xs);
}

/* Service card */
.ms-service {
  padding: var(--ms-space-6);
  gap: var(--ms-space-2);
}

.ms-service__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--ms-space-3);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-surface);
  color: var(--ms-color-primary);
  box-shadow: var(--ms-shadow-xs);
}

.ms-service__icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.ms-service__icon svg {
  width: 20px;
  height: 20px;
}

.ms-service h3 {
  font-size: var(--ms-font-size-lg);
}

.ms-service p {
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-sm);
  line-height: 1.6;
}

.ms-service .ms-link {
  margin-top: auto;
  padding-top: var(--ms-space-3);
  font-size: var(--ms-font-size-sm);
}

.ms-service--cta {
  background: var(--ms-color-surface-inverse);
  border-color: var(--ms-color-surface-inverse);
  color: var(--ms-color-text-inverse-secondary);
}

.ms-service--cta .ms-service__icon {
  border-color: var(--ms-color-border-inverse);
  background: rgb(255 255 255 / 0.06);
  color: var(--ms-color-link-inverse);
  box-shadow: none;
}

.ms-service--cta h3 {
  color: var(--ms-color-text-inverse);
}

.ms-service--cta p {
  color: var(--ms-color-text-inverse-secondary);
}

.ms-service--cta .ms-btn {
  margin-top: auto;
  align-self: flex-start;
}

/* ---------- 9. Footer ---------------------------------------------------- */
.ms-footer {
  background: var(--ms-navy-950);
  color: var(--ms-color-text-inverse-secondary);
  font-size: var(--ms-font-size-sm);
}

.ms-footer a {
  color: var(--ms-color-text-inverse-secondary) !important;
  transition: color var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-footer a:hover {
  color: var(--ms-color-text-inverse) !important;
}

.ms-footer__newsletter {
  display: grid;
  gap: var(--ms-space-5);
  padding-block: var(--ms-space-9);
  border-bottom: 1px solid var(--ms-color-border-inverse);
}

@media (min-width: 1024px) {
  .ms-footer__newsletter {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

.ms-footer__newsletter h2 {
  color: var(--ms-color-text-inverse);
  font-size: var(--ms-font-size-xl);
  font-weight: var(--ms-font-weight-semibold);
  letter-spacing: var(--ms-tracking-tight);
}

.ms-footer__newsletter p {
  margin-top: var(--ms-space-2);
}

.ms-footer.ms-scope .ms-input {
  background: rgb(255 255 255 / 0.04);
  border-color: rgb(255 255 255 / 0.16);
  color: var(--ms-color-text-inverse);
  box-shadow: none;
}

.ms-footer.ms-scope .ms-input:hover {
  border-color: rgb(255 255 255 / 0.3);
}

.ms-footer.ms-scope .ms-input::placeholder {
  color: #8a94b4;
}

.ms-footer__consent {
  margin-top: var(--ms-space-2);
  font-size: var(--ms-font-size-2xs);
  color: #8a94b4; /* 5.6:1 on navy-950 */
}

.ms-footer__consent a {
  text-decoration: underline;
}

/* newsletter result after the Post/Redirect/Get (dark footer: light text, coloured left rule) */
.ms-footer__notice {
  margin-top: var(--ms-space-3);
  padding: var(--ms-space-2) var(--ms-space-3);
  border-left: 3px solid #4ade80;
  background: rgb(255 255 255 / 0.06);
  border-radius: var(--ms-radius-sm);
  color: var(--ms-color-text-inverse);
  font-size: var(--ms-font-size-sm);
}

.ms-footer__notice--error {
  border-left-color: #f87171;
}

.ms-footer__main {
  display: grid;
  gap: var(--ms-space-8);
  padding-block: var(--ms-space-10);
}

@media (min-width: 768px) {
  .ms-footer__main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .ms-footer__main {
    grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
  }
}

.ms-footer__brand img {
  /* The uploaded logo is a non-transparent PNG, so it sits on a light plate instead of being inverted.
     Replace with an SVG/transparent logo when available (DESIGN_SYSTEM §1). */
  height: 44px;
  width: auto;
  padding: 6px 10px;
  border-radius: var(--ms-radius-md);
  background: var(--ms-gray-0);
}

.ms-footer__brand p {
  margin-top: var(--ms-space-5);
  max-width: 340px;
  line-height: var(--ms-line-height-body);
}

.ms-footer__contact {
  display: grid;
  gap: var(--ms-space-1);
  margin-top: var(--ms-space-5);
  list-style: none;
}

.ms-footer__contact li {
  display: flex;
  gap: var(--ms-space-2);
  align-items: center;
}

.ms-footer__contact svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--ms-color-link-inverse);
}

.ms-footer__heading {
  color: var(--ms-color-text-inverse) !important;
  font-size: var(--ms-font-size-sm) !important;
  font-weight: var(--ms-font-weight-semibold) !important;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: var(--ms-space-4) !important;
}

.ms-footer__list {
  display: grid;
  gap: var(--ms-space-0-5);
  list-style: none;
}

/* WCAG 2.5.8: list links get at least a 24px tall target */
.ms-footer__list a,
.ms-footer__legal a,
.ms-footer__consent a,
.ms-footer__contact a {
  display: inline-block;
  min-height: 24px;
  padding-block: 4px;
}

.ms-footer__social {
  display: flex;
  gap: var(--ms-space-2);
  margin-top: var(--ms-space-5);
}

.ms-footer__social a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--ms-color-border-inverse);
  border-radius: var(--ms-radius-md);
}

.ms-footer__social a:hover {
  border-color: rgb(255 255 255 / 0.32);
}

.ms-footer__social svg {
  width: 16px;
  height: 16px;
}

.ms-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-4) var(--ms-space-7);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--ms-space-6);
  border-top: 1px solid var(--ms-color-border-inverse);
  font-size: var(--ms-font-size-xs);
}

.ms-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-1) var(--ms-space-5);
  list-style: none;
}

.ms-footer__payments {
  height: 24px;
  width: auto;
  opacity: 0.8;
}

/* Floating WhatsApp */
.ms-fab {
  position: fixed;
  right: var(--ms-space-5);
  bottom: calc(var(--ms-space-5) + env(safe-area-inset-bottom));
  z-index: 890;
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-2);
  height: 48px;
  padding: 0 var(--ms-space-5) 0 var(--ms-space-4);
  border-radius: var(--ms-radius-full);
  background: #0f7a41; /* WhatsApp green darkened to 5.4:1 with white text */
  color: #fff !important;
  font-size: var(--ms-font-size-sm);
  font-weight: var(--ms-font-weight-semibold);
  box-shadow: var(--ms-shadow-lg);
  transition: transform var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-fab:hover {
  transform: translateY(-1px);
}

.ms-fab svg {
  width: 22px;
  height: 22px;
}

@media (max-width: 767px) {
  .ms-fab {
    width: 52px;
    height: 52px;
    padding: 0;
    justify-content: center;
  }

  .ms-fab span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
}

/* Non-modal promo card (replaces the blocking pop-up) */
.ms-promo {
  position: fixed;
  left: var(--ms-space-5);
  bottom: var(--ms-space-5);
  z-index: 890;
  width: 300px;
  border-radius: var(--ms-radius-lg);
  overflow: hidden;
  background: var(--ms-color-surface);
  box-shadow: var(--ms-shadow-xl);
  border: 1px solid var(--ms-color-border);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--ms-duration-base) var(--ms-ease-out), transform var(--ms-duration-base) var(--ms-ease-out);
}

.ms-promo.is-visible {
  opacity: 1;
  transform: none;
}

.ms-promo[hidden] {
  display: none;
}

.ms-promo img {
  display: block;
  width: 100%;
  height: auto;
}

.ms-promo__close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--ms-radius-full);
  background: rgb(7 10 34 / 0.65);
  color: #fff;
  cursor: pointer;
}

@media (max-width: 767px) {
  .ms-promo {
    display: none;
  }
}

/* Legacy cookie consent banner: keep it clear of the floating button */
.cc-window.cc-floating {
  max-width: 360px !important;
  bottom: calc(88px + env(safe-area-inset-bottom)) !important;
}

/* UI V4: the banner speaks the site's language — white card, border, card shadow, Inter, primary button
   (colours come from the palette in index.php; the library sets them inline-class) */
.cc-window.cc-floating.cc-theme-classic {
  gap: var(--ms-space-3);
  padding: var(--ms-space-5);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-xl);
  font-family: var(--ms-font-sans);
  font-size: var(--ms-font-size-sm);
  line-height: 1.55;
}

.cc-window.cc-floating .cc-message {
  margin: 0 !important;
}

.cc-window .cc-link {
  padding: 0;
  font-weight: var(--ms-font-weight-semibold);
  text-underline-offset: 2px;
  opacity: 1;
}

.cc-window.cc-theme-classic .cc-btn {
  min-height: 40px;
  padding: 0 var(--ms-space-5);
  border: 0;
  border-radius: var(--ms-radius-md);
  font: var(--ms-font-weight-semibold) var(--ms-font-size-sm) / 40px var(--ms-font-sans);
  box-shadow: var(--ms-shadow-primary);
}

.cc-window.cc-theme-classic .cc-btn:hover {
  filter: brightness(0.94);
}

@media (max-width: 414px) {
  .cc-window.cc-floating {
    right: var(--ms-gutter) !important;
    left: var(--ms-gutter) !important;
    max-width: none !important;
  }
}

/* ---------- 10. Home page + shared section components ----------------------- */
/* UI refresh 2026-10. Hero: message on the left, a product showcase on the right — real screenshots in
   browser windows stacked as a deck (front = active), rotating slowly with pause/prev/next/dots and swipe
   (metusoft.js). Without JS the first slide simply stands in front. Decoration is limited to a hairline
   grid and two soft azure lights behind the deck (no gradient text, no moving backgrounds). */
.ms-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(36px, 4.5vw, 72px) clamp(56px, 6vw, 96px);
  background: linear-gradient(180deg, #f4f8ff 0%, var(--ms-color-bg) 78%);
}

.ms-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgb(26 102 229 / 0.06) 1px, transparent 1px), linear-gradient(90deg, rgb(26 102 229 / 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center top;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 0%, #000 25%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 0%, #000 25%, transparent 72%);
  pointer-events: none;
}

.ms-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(38% 46% at 76% 46%, rgb(47 120 240 / 0.16), transparent 70%),
    radial-gradient(26% 34% at 96% 8%, rgb(15 176 236 / 0.14), transparent 70%);
  pointer-events: none;
}

.ms-hero__inner {
  position: relative;
  display: grid;
  gap: var(--ms-space-9);
  align-items: center;
}

@media (min-width: 1024px) {
  .ms-hero__inner {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(40px, 4vw, 72px);
  }
}

.ms-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-2);
  min-height: 30px;
  margin-bottom: var(--ms-space-5);
  padding: 0 var(--ms-space-3) 0 var(--ms-space-1);
  border: 1px solid var(--ms-color-primary-border);
  border-radius: var(--ms-radius-full);
  background: rgb(255 255 255 / 0.8);
  box-shadow: var(--ms-shadow-xs);
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-xs);
  font-weight: var(--ms-font-weight-medium);
}

.ms-hero__badge b {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 var(--ms-space-2);
  border-radius: var(--ms-radius-full);
  background: var(--ms-color-primary);
  color: var(--ms-color-on-primary);
  font-weight: var(--ms-font-weight-semibold);
  white-space: nowrap;
}

@media (max-width: 479px) {
  .ms-hero__badge {
    padding-left: var(--ms-space-3);
  }

  .ms-hero__badge b {
    display: none !important;
  }
}

.ms-hero__title {
  font-size: clamp(2.25rem, 1.15rem + 3.5vw, 3.625rem);
  line-height: 1.06;
  font-weight: var(--ms-font-weight-semibold);
  letter-spacing: var(--ms-tracking-display);
  color: var(--ms-color-text);
}

.ms-hero__title em {
  font-style: normal;
  color: var(--ms-color-primary);
}

.ms-hero__lead {
  max-width: 540px;
  margin-top: var(--ms-space-5);
  font-size: var(--ms-font-size-lg);
  line-height: var(--ms-line-height-body);
  color: var(--ms-color-text-secondary);
}

.ms-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-3);
  margin-top: var(--ms-space-7);
}

@media (max-width: 479px) {
  .ms-hero__actions .ms-btn {
    flex: 1 1 100%;
  }
}

.ms-hero__points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-2) var(--ms-space-5);
  margin-top: var(--ms-space-6);
  list-style: none;
  font-size: var(--ms-font-size-sm);
  color: var(--ms-color-text-secondary);
}

.ms-hero__points li {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-2);
}

.ms-scope .ms-hero__points svg {
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 50%;
  background: var(--ms-color-primary-subtle);
  color: var(--ms-color-primary);
}

/* Product showcase */
.ms-showcase {
  position: relative;
  min-width: 0;
}

.ms-showcase__deck {
  position: relative;
  display: grid;
}

.ms-showcase--deck .ms-showcase__deck {
  padding: 7% 8% 0 0; /* room for the windows stacked behind (up-right) */
}

.ms-showcase__slide {
  grid-area: 1 / 1;
  margin: 0;
  transform-origin: 100% 0;
  transition: transform 700ms var(--ms-ease-out), opacity 700ms var(--ms-ease-out);
}

.ms-showcase__slide[data-pos="0"] {
  z-index: 4;
}

.ms-showcase__slide[data-pos="1"] {
  z-index: 3;
  transform: translate(4.5%, -6%) scale(0.93);
  opacity: 0.92;
}

.ms-showcase__slide[data-pos="2"] {
  z-index: 2;
  transform: translate(9%, -12%) scale(0.86);
  opacity: 0.6;
}

.ms-showcase__slide:not([data-pos="0"]):not([data-pos="1"]):not([data-pos="2"]) {
  z-index: 1;
  transform: translate(13%, -18%) scale(0.8);
  opacity: 0;
}

/* a window whose screenshot is not loaded yet stays invisible (no empty frames; without JS only the front shows) */
.ms-showcase__slide:has(img[data-ms-src]) {
  visibility: hidden;
  opacity: 0;
}

.ms-showcase__slide[data-pos="out"] {
  z-index: 5;
  transform: translate(-5%, 5%) scale(0.97);
  opacity: 0;
}

.ms-showcase__window {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid rgb(11 16 51 / 0.08);
  border-radius: var(--ms-radius-xl);
  background: var(--ms-color-surface);
  box-shadow: var(--ms-shadow-media);
  text-decoration: none !important;
}

.ms-showcase__slide:not([data-pos="0"]) .ms-showcase__window {
  cursor: pointer;
}

.ms-showcase__slide:not([data-pos="0"]) .ms-showcase__window::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(11 16 51 / 0.06);
}

.ms-showcase__window img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: top center;
  transition: transform 900ms var(--ms-ease-out);
}

.ms-showcase__slide[data-pos="0"] .ms-showcase__window:hover img {
  transform: scale(1.02);
}

.ms-showcase__window:focus-visible {
  outline: none;
  box-shadow: var(--ms-shadow-media), var(--ms-ring-focus);
}

.ms-showcase__panel {
  position: relative;
  z-index: 6;
  margin-top: calc(var(--ms-space-6) * -1);
  margin-left: 4%;
  width: 92%;
}

.ms-showcase__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-space-3) var(--ms-space-4);
  padding: var(--ms-space-3) var(--ms-space-3) var(--ms-space-3) var(--ms-space-4);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  background: rgb(255 255 255 / 0.94);
  box-shadow: var(--ms-shadow-lg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: ms-fade-up 420ms var(--ms-ease-out);
}

.ms-showcase__caption[hidden] {
  display: none;
}

.ms-showcase__text {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1 1 200px;
}

.ms-showcase__cat {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-1-5);
  color: var(--ms-color-primary-text);
  font-size: var(--ms-font-size-2xs);
  font-weight: var(--ms-font-weight-medium);
}

.ms-scope .ms-showcase__cat svg {
  width: 14px;
  height: 14px;
}

.ms-showcase__name {
  overflow: hidden;
  color: var(--ms-color-text) !important;
  font-size: var(--ms-font-size-md);
  font-weight: var(--ms-font-weight-semibold);
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ms-showcase__name:hover {
  color: var(--ms-color-primary-text) !important;
}

.ms-showcase__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-space-2);
}

.ms-showcase__price {
  display: grid;
  margin-right: var(--ms-space-2);
  line-height: 1.15;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ms-showcase__price s {
  color: var(--ms-color-text-tertiary);
  font-size: var(--ms-font-size-2xs);
}

.ms-showcase__price strong {
  color: var(--ms-color-text);
  font-size: var(--ms-font-size-lg);
}

.ms-showcase__controls {
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
  margin-top: var(--ms-space-3);
}

.ms-showcase__controls[hidden] {
  display: none;
}

.ms-showcase__ctrl {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-full);
  background: var(--ms-color-surface);
  color: var(--ms-color-text);
  box-shadow: var(--ms-shadow-xs);
  cursor: pointer;
  transition: border-color var(--ms-duration-fast) var(--ms-ease-out), background-color var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-showcase__ctrl:hover {
  border-color: var(--ms-color-primary-border);
  background: var(--ms-color-primary-subtle);
}

.ms-scope .ms-showcase__ctrl svg {
  width: 16px;
  height: 16px;
}

.ms-showcase__pause {
  margin-left: auto;
}

.ms-showcase__pause svg:last-child,
.ms-showcase__pause[aria-pressed="true"] svg:first-child {
  display: none;
}

.ms-showcase__pause[aria-pressed="true"] svg:last-child {
  display: block;
}

.ms-showcase__dots {
  display: flex;
  align-items: center;
}

.ms-showcase__dot {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.ms-showcase__dot span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: var(--ms-radius-full);
  background: var(--ms-gray-300);
  transition: width var(--ms-duration-base) var(--ms-ease-out), background-color var(--ms-duration-base) var(--ms-ease-out);
}

.ms-showcase__dot:hover span {
  background: var(--ms-gray-400);
}

.ms-showcase__dot[aria-current="true"] span {
  width: 22px;
  background: var(--ms-color-primary);
}

@media (max-width: 639px) {
  .ms-showcase--deck .ms-showcase__deck {
    padding: 6% 6% 0 0;
  }

  .ms-showcase__panel {
    width: 100%;
    margin-left: 0;
    margin-top: calc(var(--ms-space-3) * -1);
  }

  .ms-showcase__buy {
    width: 100%;
  }

  .ms-showcase__price {
    margin-right: auto;
    text-align: left;
  }
}

@keyframes ms-fade-up {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.ms-browser__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 var(--ms-space-3);
  background: var(--ms-gray-50);
  border-bottom: 1px solid var(--ms-color-border);
}

.ms-browser__bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ms-gray-300);
}

.ms-browser__bar i:nth-child(1) {
  background: #ff6159;
}

.ms-browser__bar i:nth-child(2) {
  background: #ffbd2e;
}

.ms-browser__bar i:nth-child(3) {
  background: #28c941;
}

.ms-browser__url {
  flex: 1;
  max-width: 300px;
  height: 20px;
  margin-inline: auto;
  padding: 0 var(--ms-space-3);
  border-radius: var(--ms-radius-sm);
  background: var(--ms-color-surface);
  border: 1px solid var(--ms-color-border);
  color: var(--ms-color-text-tertiary);
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* What we offer: three compact entry cards overlapping the hero's lower edge */
.ms-offer {
  position: relative;
  z-index: 1;
  padding-bottom: var(--ms-section-y-tight);
}

@media (min-width: 1024px) {
  .ms-offer {
    margin-top: calc(var(--ms-space-7) * -1);
  }
}

.ms-offer__list {
  display: grid;
  gap: var(--ms-space-4);
  list-style: none;
}

@media (min-width: 900px) {
  .ms-offer__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ms-space-5);
  }
}

.ms-offer__item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--ms-space-4);
  align-items: start;
  padding: var(--ms-space-5);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-surface);
  box-shadow: var(--ms-shadow-card);
  transition: transform var(--ms-duration-base) var(--ms-ease-out), box-shadow var(--ms-duration-base) var(--ms-ease-out), border-color var(--ms-duration-base) var(--ms-ease-out);
}

.ms-offer__item:hover {
  transform: translateY(-2px);
  border-color: var(--ms-color-primary-border);
  box-shadow: var(--ms-shadow-card-hover);
}

.ms-offer__item:focus-within {
  box-shadow: var(--ms-shadow-card-hover), var(--ms-ring-focus);
}

.ms-offer__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--ms-radius-md);
  background: linear-gradient(135deg, var(--ms-blue-600), var(--ms-blue-500));
  color: #fff;
  box-shadow: var(--ms-shadow-primary);
}

.ms-offer__icon--navy {
  background: linear-gradient(135deg, var(--ms-navy-800), var(--ms-navy-700));
  box-shadow: 0 6px 16px -6px rgb(11 16 51 / 0.5);
}

.ms-offer__icon--cyan {
  background: linear-gradient(135deg, #0c8fc4, var(--ms-cyan-500));
  box-shadow: 0 6px 16px -6px rgb(15 176 236 / 0.55);
}

.ms-scope .ms-offer__icon svg {
  width: 22px;
  height: 22px;
}

.ms-offer__item h3 {
  font-size: var(--ms-font-size-md);
  line-height: 1.35;
}

.ms-offer__item h3 a {
  color: var(--ms-color-text) !important;
}

.ms-offer__item h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.ms-offer__item h3 a:focus-visible {
  box-shadow: none;
}

.ms-offer__item p {
  margin-top: var(--ms-space-1);
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-sm);
  line-height: 1.55;
}

.ms-offer__stat {
  display: inline-block;
  margin-top: var(--ms-space-2);
  color: var(--ms-color-primary-text);
  font-size: var(--ms-font-size-2xs);
  font-weight: var(--ms-font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.ms-scope .ms-offer__item > svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--ms-color-text-tertiary);
  transition: transform var(--ms-duration-base) var(--ms-ease-out), color var(--ms-duration-base) var(--ms-ease-out);
}

.ms-offer__item:hover > svg {
  transform: translateX(3px);
  color: var(--ms-color-primary);
}

/* Section with the heading on the left and content on the right (≥1024px) */
.ms-section-split {
  display: grid;
  gap: var(--ms-space-8);
}

@media (min-width: 1024px) {
  .ms-section-split {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
    gap: var(--ms-space-11);
    align-items: start;
  }

  .ms-section-split__head {
    position: sticky;
    top: calc(var(--ms-header-h) + var(--ms-space-7));
    margin-bottom: 0;
  }
}

.ms-section-split__action {
  margin-top: var(--ms-space-6);
}

/* Services: a 2-column grid of quiet cells; the whole cell is the link */
.ms-service-grid {
  display: grid;
  gap: var(--ms-space-4);
  list-style: none;
}

@media (min-width: 640px) {
  .ms-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ms-service-grid > .ms-service {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--ms-space-5) var(--ms-space-6);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-surface);
  box-shadow: var(--ms-shadow-card);
  transition: transform var(--ms-duration-base) var(--ms-ease-out), box-shadow var(--ms-duration-base) var(--ms-ease-out), border-color var(--ms-duration-base) var(--ms-ease-out);
}

.ms-service-grid > .ms-service:hover {
  transform: translateY(-2px);
  border-color: var(--ms-color-primary-border);
  box-shadow: var(--ms-shadow-card-hover);
}

.ms-service-grid > .ms-service:focus-within {
  box-shadow: var(--ms-shadow-card-hover), var(--ms-ring-focus);
}

.ms-service-grid .ms-service h3 a {
  color: var(--ms-color-text) !important;
}

.ms-service-grid .ms-service h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.ms-service-grid .ms-service h3 a:focus-visible {
  box-shadow: none;
}

.ms-service-grid .ms-service:hover .ms-link svg {
  transform: translateX(3px);
}

@media (min-width: 640px) {
  .ms-service-grid > .ms-service:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* Section header with actions */
.ms-section-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ms-space-4) var(--ms-space-5);
  margin-bottom: var(--ms-space-7);
}

.ms-section-bar .ms-section-head {
  margin-bottom: 0;
}

.ms-section-bar__link {
  padding-bottom: var(--ms-space-1);
  font-size: var(--ms-font-size-sm);
}

.ms-section--tint {
  background: linear-gradient(180deg, var(--ms-color-bg-tint) 0%, var(--ms-color-bg) 100%);
  border-top: 1px solid var(--ms-color-border);
}

.ms-search {
  display: flex;
  gap: var(--ms-space-2);
  width: min(100%, 360px);
}

.ms-search--center {
  width: min(100%, 460px);
  margin-top: var(--ms-space-3);
}

/* Chips — one family for sector/category navigation and filters (home, catalogue, enterprise solutions).
   Links carry aria-current="page" for the active one; buttons use aria-pressed. */
.ms-chipset {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-1-5);
  min-height: 36px;
  padding: 0 var(--ms-space-3);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-full);
  background: var(--ms-color-surface);
  color: var(--ms-color-text-body) !important;
  font: var(--ms-font-weight-medium) var(--ms-font-size-sm) / 1 var(--ms-font-sans);
  white-space: nowrap;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color var(--ms-duration-fast) var(--ms-ease-out), color var(--ms-duration-fast) var(--ms-ease-out),
    border-color var(--ms-duration-fast) var(--ms-ease-out), box-shadow var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-scope .ms-chip svg {
  width: 16px;
  height: 16px;
  color: var(--ms-color-primary);
  transition: color var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-chip:hover {
  border-color: var(--ms-color-primary-border);
  background: var(--ms-color-primary-subtle);
  color: var(--ms-color-text) !important;
}

.ms-chip[aria-pressed="true"],
.ms-chip[aria-current="page"] {
  border-color: var(--ms-color-text);
  background: var(--ms-color-text);
  color: var(--ms-color-text-inverse) !important;
  box-shadow: 0 4px 12px -4px rgb(11 16 51 / 0.45);
}

.ms-scope .ms-chip[aria-pressed="true"] svg,
.ms-scope .ms-chip[aria-current="page"] svg {
  color: var(--ms-color-link-inverse);
}

.ms-chip:focus-visible {
  outline: none;
  box-shadow: var(--ms-ring-focus);
}

.ms-chip__count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--ms-radius-full);
  background: var(--ms-color-bg-muted);
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-2xs);
  font-weight: var(--ms-font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.ms-chip[aria-pressed="true"] .ms-chip__count,
.ms-chip[aria-current="page"] .ms-chip__count {
  background: rgb(255 255 255 / 0.16);
  color: var(--ms-color-text-inverse);
}

/* A chip row that scrolls sideways instead of wrapping (phones; long sector lists) */
.ms-chipset--scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
}

.ms-chipset--scroll::-webkit-scrollbar {
  display: none;
}

.ms-chipset--scroll > li {
  flex: none;
  scroll-snap-align: start;
}

/* Home: sector chips + search in one bar */
.ms-catbar {
  display: grid;
  gap: var(--ms-space-3);
  margin-bottom: var(--ms-space-6);
}

@media (min-width: 900px) {
  .ms-catbar {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
    align-items: start;
  }
}

.ms-catbar__nav {
  min-width: 0;
}

@media (max-width: 899px) {
  .ms-catbar__nav .ms-chipset {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(var(--ms-gutter) * -1);
    padding: 2px var(--ms-gutter) var(--ms-space-1);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .ms-catbar__nav .ms-chipset::-webkit-scrollbar {
    display: none;
  }

  .ms-catbar__nav .ms-chipset > li {
    flex: none;
    scroll-snap-align: start;
  }
}

.ms-catbar__search {
  position: relative;
  display: flex;
  gap: var(--ms-space-2);
}

.ms-scope .ms-catbar__search > svg {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  color: var(--ms-color-text-tertiary);
  pointer-events: none;
}

.ms-scope .ms-catbar__search .ms-input {
  flex: 1;
  min-width: 0;
  height: 36px !important;
  padding-left: 36px !important;
  border-radius: var(--ms-radius-full);
  font-size: var(--ms-font-size-sm);
}

.ms-catbar__search .ms-btn {
  border-radius: var(--ms-radius-full);
}

/* Product grid — shared by the home page, the catalogue and "related software". Columns appear when each
   card keeps ≥ 264 px, never more than four (wide screens get larger cards, not a fifth narrow column). */
.ms-pgrid {
  --_gap: var(--ms-space-5);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(min(100%, 280px), calc((100% - 3 * var(--_gap)) / 4)), 1fr)); /* V3: 280px keeps names and prices readable; 4 columns only when they fit */
  gap: var(--_gap);
}

@media (max-width: 639px) {
  .ms-pgrid {
    --_gap: var(--ms-space-4);
  }
}

/* Process: a numbered timeline on the dark band */
.ms-section--night {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(50% 80% at 85% 0%, rgb(26 102 229 / 0.22), transparent 70%),
    var(--ms-color-surface-inverse);
}

.ms-steps {
  display: grid;
  gap: var(--ms-space-2);
  counter-reset: ms-step;
  list-style: none;
}

@media (min-width: 768px) {
  .ms-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ms-space-5);
  }
}

@media (min-width: 1024px) {
  .ms-steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
  }
}

.ms-step {
  position: relative;
  padding: var(--ms-space-4) 0 var(--ms-space-4) var(--ms-space-10);
}

.ms-step::before {
  counter-increment: ms-step;
  content: "0" counter(ms-step);
  position: absolute;
  left: 0;
  top: var(--ms-space-4);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgb(142 187 255 / 0.4);
  border-radius: var(--ms-radius-full);
  background: rgb(26 102 229 / 0.18);
  font: var(--ms-font-weight-semibold) var(--ms-font-size-xs) / 1 var(--ms-font-mono);
  color: var(--ms-color-link-inverse);
}

@media (min-width: 1024px) {
  .ms-step {
    padding: 0 var(--ms-space-6) 0 0;
  }

  .ms-step::before {
    position: relative;
    top: 0;
    margin-bottom: var(--ms-space-5);
  }

  .ms-step::after {
    content: "";
    position: absolute;
    top: 20px;
    left: 48px;
    right: 8px;
    height: 1px;
    background: linear-gradient(90deg, rgb(142 187 255 / 0.45), rgb(255 255 255 / 0.04));
  }

  .ms-step:last-child::after {
    display: none;
  }
}

.ms-step h3 {
  font-size: var(--ms-font-size-md);
  font-weight: var(--ms-font-weight-semibold);
}

.ms-step p {
  margin-top: var(--ms-space-2);
  font-size: var(--ms-font-size-sm);
  line-height: 1.6;
  color: var(--ms-color-text-inverse-secondary);
}

/* Feature list (why us): small cards with an icon tile */
.ms-features {
  display: grid;
  gap: var(--ms-space-3);
  list-style: none;
}

@media (min-width: 640px) {
  .ms-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ms-features--stacked {
  margin-top: var(--ms-space-7);
}

.ms-feature {
  display: flex;
  gap: var(--ms-space-3);
  padding: var(--ms-space-4);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-surface);
}

.ms-feature h3 {
  font-size: var(--ms-font-size-sm);
  line-height: 1.4;
}

.ms-feature p {
  margin-top: var(--ms-space-1);
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-xs);
  line-height: 1.55;
}

.ms-split {
  display: grid;
  gap: var(--ms-space-9);
}

@media (min-width: 1024px) {
  .ms-split {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: var(--ms-space-11);
    align-items: start;
  }

  .ms-split__sticky {
    position: sticky;
    top: calc(var(--ms-header-h) + var(--ms-space-7));
  }
}

/* FAQ accordion — one look on every page */
.ms-faq {
  display: grid;
  gap: var(--ms-space-2);
}

.ms-faq details {
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-surface);
  transition: border-color var(--ms-duration-fast) var(--ms-ease-out), box-shadow var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-faq details:hover {
  border-color: var(--ms-color-border-strong);
}

.ms-faq details[open] {
  border-color: var(--ms-color-primary-border);
  box-shadow: var(--ms-shadow-card);
}

.ms-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-space-4);
  min-height: 56px;
  padding: var(--ms-space-3) var(--ms-space-5);
  color: var(--ms-color-text);
  font-size: var(--ms-font-size-md);
  font-weight: var(--ms-font-weight-medium);
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
  border-radius: inherit;
}

.ms-faq summary::-webkit-details-marker {
  display: none;
}

.ms-faq summary:hover,
.ms-faq details[open] summary {
  color: var(--ms-color-primary-text);
}

.ms-faq summary svg {
  width: 28px;
  height: 28px;
  padding: 6px;
  flex: none;
  border-radius: var(--ms-radius-full);
  background: var(--ms-color-bg-subtle);
  color: var(--ms-color-text-secondary);
  transition: transform var(--ms-duration-base) var(--ms-ease-out), background-color var(--ms-duration-base) var(--ms-ease-out);
}

.ms-faq details[open] summary svg {
  transform: rotate(180deg);
  background: var(--ms-color-primary-subtle);
  color: var(--ms-color-primary);
}

.ms-faq__answer {
  padding: 0 var(--ms-space-5) var(--ms-space-5);
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-sm);
  line-height: 1.7;
}

.ms-faq__answer p + p {
  margin-top: var(--ms-space-3);
}

.ms-faq__title {
  margin-bottom: var(--ms-space-4);
}

.ms-faq__more {
  margin-top: var(--ms-space-5);
}

/* CTA band */
.ms-cta {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: var(--ms-space-6);
  padding: clamp(28px, 4.5vw, 56px);
  border-radius: var(--ms-radius-xl);
  background: linear-gradient(120deg, var(--ms-navy-900) 0%, var(--ms-navy-800) 55%, #13307a 100%);
  color: var(--ms-color-text-inverse-secondary);
  box-shadow: 0 24px 48px -24px rgb(11 16 51 / 0.5);
  isolation: isolate;
}

.ms-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 60% 100% at 100% 50%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 100% at 100% 50%, #000, transparent 70%);
}

.ms-cta::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -40% -10% auto 55%;
  height: 140%;
  background: radial-gradient(closest-side, rgb(47 120 240 / 0.45), transparent);
  pointer-events: none;
}

@media (min-width: 1024px) {
  .ms-cta {
    grid-template-columns: 1.4fr 1fr;
    align-items: center;
  }
}

.ms-cta h2 {
  color: var(--ms-color-text-inverse);
}

.ms-cta .ms-lead {
  color: var(--ms-color-text-inverse-secondary);
}

.ms-cta__actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-3);
}

@media (min-width: 1024px) {
  .ms-cta__actions {
    justify-content: flex-end;
  }
}

/* Empty state */
.ms-empty {
  display: grid;
  justify-items: center;
  gap: var(--ms-space-3);
  padding: var(--ms-space-10) var(--ms-space-5);
  border: 1px dashed var(--ms-color-border-strong);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-bg-subtle);
  text-align: center;
  color: var(--ms-color-text-secondary);
}

.ms-empty svg {
  width: 32px;
  height: 32px;
  color: var(--ms-color-text-placeholder);
}

/* UI V4 fix: icons inside buttons keep the button's size and colour (the 404 "Ara" glyph was 32px grey) */
.ms-scope .ms-empty .ms-btn svg {
  width: 18px;
  height: 18px;
  color: currentColor;
}

.ms-empty h1,
.ms-empty h2 {
  color: var(--ms-color-text);
}

.ms-empty p {
  max-width: 520px;
}

.ms-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ms-space-3);
  margin-top: var(--ms-space-3);
}

.ms-empty--page {
  padding-block: var(--ms-space-11);
}

/* UI V4: in-panel empty state (member lists): icon, message and the one useful action in a row */
.ms-scope .ms-empty--compact {
  justify-items: start;
  padding: var(--ms-space-5);
  text-align: left;
}

.ms-empty--compact h2 {
  margin: 0;
  font-size: var(--ms-text-body);
}

.ms-empty--compact p {
  margin: var(--ms-space-1) 0 0;
  font-size: var(--ms-text-sm);
}

@media (min-width: 640px) {
  .ms-scope .ms-empty--compact {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--ms-space-4);
  }

  .ms-empty--compact .ms-quote__done-icon {
    width: 48px;
    height: 48px;
  }
}

.ms-section-more {
  display: flex;
  justify-content: center;
  margin-top: var(--ms-space-8);
}

/* ---------- 11. Inner pages: hero, breadcrumb, sections ------------------- */
.ms-section--tight {
  padding-block: var(--ms-section-y-tight);
}

.ms-section--flush-top {
  padding-top: 0;
}

/* Page head (FAZ 1): every inner page uses the catalog head's language — white ground with the home
   page's fading hairline grid, a compact title and a short lead — instead of the old full-width grey
   band. Pages vary the composition (aside media, facts, actions), not the visual system. */
.ms-page-hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--ms-space-7) var(--ms-space-7);
  background: linear-gradient(180deg, #f4f8ff 0%, var(--ms-color-bg) 100%); /* UI refresh 2026-10: same light azure ground as the catalogue / product heads */
}

.ms-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgb(26 102 229 / 0.06) 1px, transparent 1px), linear-gradient(90deg, rgb(26 102 229 / 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: center top;
  mask-image: radial-gradient(ellipse 70% 90% at 15% 0%, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 15% 0%, #000 10%, transparent 70%);
  pointer-events: none;
}

.ms-page-hero > * {
  position: relative;
}

@media (min-width: 1024px) {
  .ms-page-hero {
    padding-block: var(--ms-space-9) var(--ms-space-8);
  }
}

.ms-page-hero__title {
  margin-top: var(--ms-space-5);
  max-width: 24ch;
  font-size: var(--ms-font-size-4xl);
  line-height: var(--ms-line-height-heading);
  font-weight: var(--ms-font-weight-semibold);
  letter-spacing: var(--ms-tracking-heading);
  color: var(--ms-color-text);
}

.ms-page-hero .ms-lead {
  max-width: 62ch;
  margin-top: var(--ms-space-3);
  font-size: var(--ms-font-size-md);
}

/* the first section after a page head continues it (no second band of empty space) */
.ms-page-hero + .ms-section,
.ms-page-hero + .ms-section--tight {
  padding-top: var(--ms-space-4);
}

@media (min-width: 1024px) {
  .ms-page-hero + .ms-section,
  .ms-page-hero + .ms-section--tight {
    padding-top: var(--ms-space-6);
  }
}

/* Breadcrumb — one component on every page (UI refresh 2026-10): 13 px, home glyph on the first link,
   chevron separators, underline on hover. On phones the trail stays on one line and only the current
   (last) item is shortened with an ellipsis; its full text is still read by assistive technology and the
   page title (h1) shows it in full. `.ms-breadcrumb--inverse` is the same trail on dark heads. */
.ms-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-space-1) var(--ms-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--ms-font-size-xs);
  line-height: 1.4;
  color: var(--ms-color-text-secondary);
}

.ms-breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-2);
  min-height: 24px;
  min-width: 0;
}

.ms-breadcrumb li + li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-right: 2px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  opacity: 0.55;
  transform: rotate(45deg);
}

.ms-breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  color: var(--ms-color-text-secondary) !important;
  text-decoration: none;
  border-radius: var(--ms-radius-xs);
  transition: color var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-breadcrumb li:first-child a::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 9-7 9 7'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 9-7 9 7'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ms-breadcrumb a:hover {
  color: var(--ms-color-primary-text) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.ms-breadcrumb [aria-current="page"] {
  color: var(--ms-color-text);
  font-weight: var(--ms-font-weight-medium);
}

@media (max-width: 639px) {
  .ms-breadcrumb ol {
    flex-wrap: nowrap;
  }

  .ms-breadcrumb li {
    flex: none;
  }

  .ms-breadcrumb li[aria-current="page"] {
    display: block;
    flex: 0 1 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .ms-breadcrumb li[aria-current="page"]::before {
    display: inline-block;
    margin-right: 10px;
    vertical-align: 1px;
  }
}

.ms-breadcrumb--inverse ol,
.ms-breadcrumb--inverse a {
  color: var(--ms-color-text-inverse-secondary) !important;
}

.ms-breadcrumb--inverse a:hover {
  color: var(--ms-color-text-inverse) !important;
}

.ms-breadcrumb--inverse [aria-current="page"] {
  color: var(--ms-color-text-inverse);
}

/* Pagination (catalogue, order history) — moved here from section 12 so every page type gets it */
.ms-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ms-space-2);
  margin-top: var(--ms-space-8);
}

.ms-pagination ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ms-space-1);
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--ms-space-3);
  border: 1px solid var(--ms-line-strong);
  border-radius: var(--ms-radius-md);
  background: var(--ms-surface);
  color: var(--ms-ink-900) !important;
  font-weight: var(--ms-font-weight-semibold);
  text-decoration: none !important;
}

.ms-pagination a:hover {
  background: var(--ms-canvas);
}

.ms-pagination a[aria-current="page"] {
  background: var(--ms-ink-900);
  border-color: var(--ms-ink-900);
  color: var(--ms-gray-0) !important;
}

.ms-pagination__gap {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ms-ink-500);
}



/* V5: administrator preview notice (product ?onizleme=1, solution drafts) — shown to signed-in admins only */
.ms-preview-note {
  border-bottom: 1px solid var(--ms-color-primary-border);
  background: var(--ms-color-primary-subtle);
  color: var(--ms-color-primary-text);
  font-size: var(--ms-font-size-sm);
}

.ms-preview-note p {
  display: flex;
  align-items: flex-start;
  gap: var(--ms-space-2);
  padding-block: var(--ms-space-3);
}

.ms-scope .ms-preview-note svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

/* ---------- 13. Product detail ------------------------------------------- */
.ms-options {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.ms-option {
  display: flex;
  align-items: center;
  gap: var(--ms-space-3);
  min-height: 48px;
  margin-top: var(--ms-space-2);
  padding: var(--ms-space-2) var(--ms-space-4);
  border: 1px solid var(--ms-color-border-strong);
  border-radius: var(--ms-radius-md);
  font-size: var(--ms-font-size-sm);
  cursor: pointer;
  transition: border-color var(--ms-duration-fast) var(--ms-ease-out), background-color var(--ms-duration-fast) var(--ms-ease-out);
}

.ms-option:hover {
  border-color: var(--ms-gray-400);
}

.ms-option input {
  width: 16px;
  height: 16px;
  accent-color: var(--ms-color-primary);
}

.ms-option:has(input:checked) {
  border-color: var(--ms-color-primary);
  background: var(--ms-color-primary-subtle);
  box-shadow: 0 0 0 1px var(--ms-color-primary);
}

.ms-option:has(input:focus-visible) {
  box-shadow: var(--ms-ring-focus);
}

.ms-option.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ms-option__price {
  margin-left: auto;
  font-weight: var(--ms-font-weight-medium);
  color: var(--ms-color-text);
  font-variant-numeric: tabular-nums;
}

/* Long-form content written in the admin editor */
.ms-prose {
  max-width: 72ch;
  color: var(--ms-color-text-body);
  font-size: var(--ms-font-size-md);
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.ms-prose > * + * {
  margin-top: var(--ms-space-4);
}

.ms-prose :where(h3, h4, h5) {
  margin-top: var(--ms-space-8);
  color: var(--ms-color-text);
  font-weight: var(--ms-font-weight-semibold);
  line-height: 1.35;
  letter-spacing: var(--ms-tracking-tight);
}

.ms-prose h3 {
  font-size: var(--ms-font-size-xl);
}

.ms-prose h4 {
  font-size: var(--ms-font-size-lg);
}

.ms-prose :where(ul, ol) {
  padding-left: 1.25rem;
}

.ms-prose ul {
  list-style: disc;
}

.ms-prose ol {
  list-style: decimal;
}

.ms-prose li::marker {
  color: var(--ms-color-text-tertiary);
}

.ms-prose li + li {
  margin-top: var(--ms-space-1);
}

.ms-prose li p {
  margin: 0;
}

.ms-prose a {
  color: var(--ms-color-primary-text) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ms-prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--ms-radius-md);
  border: 1px solid var(--ms-color-border);
}

.ms-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ms-font-size-sm);
}

.ms-prose :where(td, th) {
  padding: var(--ms-space-2) var(--ms-space-3);
  border: 1px solid var(--ms-color-border);
}

.ms-checklist {
  display: grid;
  gap: var(--ms-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .ms-checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ms-checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--ms-space-3);
  padding: var(--ms-space-3) var(--ms-space-4);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-surface);
  color: var(--ms-color-text-body);
  font-size: var(--ms-font-size-sm);
}

.ms-scope .ms-checklist svg {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--ms-color-success);
  flex: none;
}

.ms-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-surface);
}

.ms-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ms-font-size-sm);
}

.ms-table :where(th, td) {
  padding: var(--ms-space-3) var(--ms-space-4);
  border-bottom: 1px solid var(--ms-color-border);
  text-align: left;
  vertical-align: top;
}

.ms-table thead th {
  background: var(--ms-color-bg-subtle);
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-xs);
  font-weight: var(--ms-font-weight-medium);
}

.ms-table tbody th {
  color: var(--ms-color-text);
  font-weight: var(--ms-font-weight-medium);
}

.ms-table td {
  font-variant-numeric: tabular-nums;
}

.ms-table tbody tr:last-child :where(th, td) {
  border-bottom: 0;
}

.ms-disclosure {
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-surface);
}

.ms-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-space-3);
  min-height: 52px;
  padding: 0 var(--ms-space-5);
  font-size: var(--ms-font-size-sm);
  font-weight: var(--ms-font-weight-medium);
  color: var(--ms-color-text);
  cursor: pointer;
  list-style: none;
}

.ms-disclosure > summary::-webkit-details-marker {
  display: none;
}

.ms-scope .ms-disclosure > summary svg {
  width: 18px;
  height: 18px;
  color: var(--ms-color-text-tertiary);
  transition: transform var(--ms-duration-base) var(--ms-ease-out);
}

.ms-disclosure[open] > summary {
  border-bottom: 1px solid var(--ms-color-border);
  margin-bottom: var(--ms-space-5);
}

.ms-disclosure[open] > summary svg {
  transform: rotate(180deg);
}

.ms-disclosure > :not(summary) {
  padding: 0 var(--ms-space-5) var(--ms-space-5);
}

.ms-reviews {
  display: grid;
  gap: var(--ms-space-3);
  margin: 0 0 var(--ms-space-5);
  padding: 0;
  list-style: none;
}

.ms-review {
  padding: var(--ms-space-4) var(--ms-space-5);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  font-size: var(--ms-font-size-sm);
}

.ms-review__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-space-3);
  margin-bottom: var(--ms-space-2);
}

.ms-review__head strong {
  color: var(--ms-color-text);
}

.ms-review__date {
  color: var(--ms-color-text-tertiary);
  font-size: var(--ms-font-size-xs);
}

.ms-stars {
  color: var(--ms-amber-600);
  letter-spacing: 1px;
}

.ms-review__reply {
  margin-top: var(--ms-space-3);
  padding: var(--ms-space-3) var(--ms-space-4);
  border-left: 2px solid var(--ms-color-primary);
  border-radius: 0 var(--ms-radius-md) var(--ms-radius-md) 0;
  background: var(--ms-color-bg-subtle);
}

.ms-review-form {
  margin-top: var(--ms-space-5);
}

.ms-form-grid {
  display: grid;
  gap: var(--ms-space-5);
}

@media (min-width: 640px) {
  .ms-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ms-field--full {
    grid-column: 1 / -1;
  }
}

.ms-rating {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-2);
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.ms-rating legend {
  width: 100%;
  margin-bottom: var(--ms-space-2);
}

.ms-rating__item {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-2);
  min-height: var(--ms-control-md);
  padding: 0 var(--ms-space-4);
  border: 1px solid var(--ms-color-border-strong);
  border-radius: var(--ms-radius-md);
  font-size: var(--ms-font-size-sm);
  cursor: pointer;
}

.ms-rating__item:has(input:checked) {
  border-color: var(--ms-color-primary);
  background: var(--ms-color-primary-subtle);
}

.ms-rating__item input {
  accent-color: var(--ms-color-primary);
}

.ms-facts {
  padding: var(--ms-space-6);
}

.ms-facts h2 {
  font-size: var(--ms-font-size-md);
}

.ms-facts dl {
  display: grid;
  gap: 0;
  margin: var(--ms-space-3) 0 0;
}

.ms-facts dl > div {
  display: flex;
  justify-content: space-between;
  gap: var(--ms-space-4);
  padding-block: var(--ms-space-3);
  border-bottom: 1px solid var(--ms-color-border);
  font-size: var(--ms-font-size-sm);
}

.ms-facts dl > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.ms-facts dt {
  color: var(--ms-color-text-secondary);
}

.ms-facts dd {
  margin: 0;
  color: var(--ms-color-text);
  font-weight: var(--ms-font-weight-medium);
  text-align: right;
}

.ms-facts dd a {
  color: var(--ms-color-primary-text) !important;
}

@media (max-width: 1023px) {
  body:has(.ms-buybar:not([hidden])) .ms-fab {
    bottom: calc(88px + env(safe-area-inset-bottom));
  }
}
/* Legacy "added to cart" notice printed by func/global.php (markup unchanged, re-skinned). */
.notification-wrapper-center {
  background: rgb(7 10 34 / 0.45);
  pointer-events: auto;
  padding: var(--ms-gutter);
}

.notification-wrapper-center .notification.notification-cart {
  width: min(100%, 460px) !important;
  max-width: none !important;
  padding: var(--ms-space-6) !important;
  border: 1px solid var(--ms-line) !important;
  border-radius: var(--ms-radius-xl) !important;
  background: var(--ms-surface) !important;
  box-shadow: var(--ms-shadow-3) !important;
  font-family: var(--ms-font-sans);
  color: var(--ms-ink-700);
}

.notification-cart .notification-content {
  gap: var(--ms-space-4);
  align-items: flex-start;
}

.notification-cart .notification-content img {
  flex: none !important;
  width: 96px !important;
  border-radius: var(--ms-radius-md);
  border: 1px solid var(--ms-line);
}

.notification-cart .notification-title {
  padding-right: 40px;
  overflow-wrap: anywhere;
  color: var(--ms-ink-900);
  font-size: var(--ms-text-body);
  line-height: 1.4;
}

.notification-cart .notification-text {
  font-size: var(--ms-text-sm);
  color: var(--ms-success-600);
}

.notification-cart .notification-buttons {
  gap: var(--ms-space-3);
  margin-top: var(--ms-space-5);
}

.notification-cart .notification-buttons .btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--ms-space-4) !important;
  border-radius: var(--ms-radius-md) !important;
  font-weight: var(--ms-font-weight-semibold);
  font-size: var(--ms-text-sm);
  text-decoration: none !important;
}

.notification-wrapper .notification-cart .notification-buttons a.notification-view-cart {
  background: var(--ms-brand-600) !important;
  color: var(--ms-gray-0) !important;
}

.notification-wrapper .notification-cart .notification-buttons a.notification-checkout {
  background: var(--ms-surface) !important;
  color: var(--ms-ink-900) !important;
  border: 1px solid var(--ms-line-strong) !important;
}

.notification-cart .notification-close.btn {
  top: var(--ms-space-3) !important;
  right: var(--ms-space-3) !important;
  width: 36px;
  height: 36px;
  display: grid !important;
  place-items: center;
  padding: 0 !important;
  border-radius: var(--ms-radius-pill) !important;
  background: var(--ms-canvas) !important;
  color: var(--ms-ink-700) !important;
}

@media (max-width: 1023px) {
  body:has(.ms-buybar:not([hidden])) .cc-window.cc-floating {
    bottom: calc(160px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 767px) {
  .ms-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ms-toolbar__search {
    grid-column: 1 / -1;
  }

  .ms-toolbar__sort {
    min-width: 0;
  }

  .ms-toolbar__sort select {
    flex: 1;
    min-width: 0;
  }
}

/* ---------- 14. Quote request (WG-6) -------------------------------------- */
.ms-quote {
  display: grid;
  gap: var(--ms-space-7);
}

@media (min-width: 1024px) {
  .ms-quote {
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
  }

  .ms-quote__aside {
    position: sticky;
    top: calc(var(--ms-header-h) + var(--ms-space-5));
  }
}

.ms-quote__main,
.ms-quote__aside {
  display: grid;
  gap: var(--ms-space-5);
  min-width: 0;
}

.ms-quote__form {
  display: grid;
  gap: var(--ms-space-7);
  padding: var(--ms-space-7);
}

@media (max-width: 479px) {
  .ms-quote__form {
    padding: var(--ms-space-5) var(--ms-space-4);
  }
}

.ms-quote__group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ms-quote__group legend {
  margin-bottom: var(--ms-space-5);
}

.ms-optional {
  color: var(--ms-ink-500);
  font-weight: var(--ms-font-weight-regular);
}

.ms-quote__context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-space-3);
  padding: var(--ms-space-3) var(--ms-space-4);
  border-radius: var(--ms-radius-md);
  background: var(--ms-brand-50);
  color: var(--ms-brand-800);
  font-size: var(--ms-text-sm);
}

.ms-quote__context a {
  color: var(--ms-brand-800) !important;
  font-weight: var(--ms-font-weight-semibold);
}

.ms-quote__context-remove {
  margin-left: auto;
  font-weight: var(--ms-font-weight-medium) !important;
}

/* Honeypot: off-screen, not display:none (some bots skip hidden fields). */
.ms-hp {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ms-quote__consent {
  display: grid;
  gap: var(--ms-space-3);
  padding: var(--ms-space-4) var(--ms-space-5);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius-md);
  background: var(--ms-canvas);
}

.ms-quote__consent a {
  color: var(--ms-brand-700) !important;
  text-decoration: underline;
}

.ms-quote__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-space-4);
}

@media (max-width: 479px) {
  .ms-quote__submit .ms-btn {
    width: 100%;
  }
}

.ms-quote__summary ul {
  margin: var(--ms-space-2) 0 0;
  padding-left: 1.1rem;
  list-style: disc;
}

.ms-quote__summary a {
  color: var(--ms-danger-600) !important;
  text-decoration: underline;
}

.ms-quote__summary:focus {
  outline: none;
  box-shadow: var(--ms-focus);
}

.ms-quote__done {
  display: grid;
  justify-items: center;
  gap: var(--ms-space-3);
  padding: var(--ms-space-10) var(--ms-space-6);
  text-align: center;
}

.ms-quote__done-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ms-success-50);
  color: var(--ms-success-600);
}

.ms-scope .ms-quote__done-icon svg {
  width: 32px;
  height: 32px;
}

.ms-quote__ref {
  font-family: var(--ms-font-mono);
  font-size: var(--ms-text-body-lg);
  color: var(--ms-ink-900);
  letter-spacing: 0.04em;
}

.ms-quote__steps {
  display: grid;
  gap: var(--ms-space-4);
  margin: var(--ms-space-4) 0 0;
  padding-left: 1.25rem;
  list-style: decimal;
  font-size: var(--ms-text-sm);
  color: var(--ms-ink-700);
}

.ms-quote__steps strong {
  display: block;
  color: var(--ms-ink-900);
}

.ms-quote__contact {
  display: grid;
  gap: var(--ms-space-3);
  margin: var(--ms-space-4) 0 0;
  padding: 0;
  list-style: none;
}

.ms-quote__contact li {
  display: flex;
  align-items: center;
  gap: var(--ms-space-3);
}

.ms-quote__contact a {
  color: var(--ms-ink-900) !important;
  font-weight: var(--ms-font-weight-semibold);
}

.ms-scope .ms-quote__contact svg {
  width: 18px;
  height: 18px;
  color: var(--ms-brand-600);
}

.ms-quote__context {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.ms-quote__context-remove {
  margin-left: 0;
}

/* WCAG 2.5.8: at least 24×24px targets */
.ms-quote__context a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.ms-quote__consent .ms-check input {
  width: 24px !important;
  height: 24px !important;
  margin-top: 0;
  flex: none;
}

.ms-rating__item input {
  width: 24px;
  height: 24px;
  margin: 0;
}

/* The floating WhatsApp button lives inside the footer landmark; keep its own colours. */
.ms-footer a.ms-fab,
.ms-footer a.ms-fab:hover {
  color: var(--ms-gray-0) !important;
  text-decoration: none;
}

/* ---------- 15. Lean pages (no legacy theme CSS loaded) -------------------- */
body.ms-lean {
  margin: 0;
  background: var(--ms-surface);
  font-size: var(--ms-text-body);
  line-height: 1.6;
}

/* UI V4: zero specificity — the reset only replaces the browser default. At (0,1,1) it beat .ms-btn, so every
   <button class="ms-btn"> rendered 16px/400 while <a class="ms-btn"> rendered 14px/600 */
:where(body.ms-lean) :where(button, input, select, textarea) {
  font: inherit;
}

/* Base of the legacy add-to-cart notice (normally from default/style.css). */
body.ms-lean .notification-wrapper {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
}

body.ms-lean .notification-wrapper-center {
  align-items: center;
  justify-content: center;
}

body.ms-lean .notification {
  position: relative;
}

body.ms-lean .notification-content,
body.ms-lean .notification-buttons {
  display: flex;
}

body.ms-lean .notification-close.btn .fa,
body.ms-lean .notification-buttons .fa {
  display: none;
}

body.ms-lean .notification-close.btn::after {
  content: "\2715";
  font-size: var(--ms-font-size-sm);
  line-height: 1;
}

/* ---------- 17. Service detail (WG-7) --------------------------------------- */
.ms-service-hero {
  display: grid;
  gap: var(--ms-space-7);
  align-items: center;
}

@media (min-width: 1024px) {
  .ms-service-hero {
    grid-template-columns: minmax(0, 1fr) 520px;
  }
}

.ms-service-hero__text {
  min-width: 0;
}

.ms-service-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-3);
  margin-top: var(--ms-space-6);
}

@media (max-width: 479px) {
  .ms-service-hero__actions .ms-btn {
    width: 100%;
    justify-content: center;
  }
}

.ms-service-hero__media {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-surface);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}

.ms-service-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.ms-page-layout {
  display: grid;
  gap: var(--ms-space-7);
}

@media (min-width: 1024px) {
  .ms-page-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
  }

  .ms-page-layout__aside {
    position: sticky;
    top: calc(var(--ms-header-h) + var(--ms-space-5));
  }
}

.ms-page-layout__body {
  min-width: 0;
}

.ms-page-layout__body .ms-prose {
  max-width: 72ch;
}

.ms-page-layout__aside {
  display: grid;
  gap: var(--ms-space-4);
  min-width: 0;
}

.ms-side-links {
  padding: var(--ms-space-5);
}

.ms-side-links ul {
  display: grid;
  margin: var(--ms-space-3) 0 0;
  padding: 0;
  list-style: none;
}

.ms-side-links li + li {
  border-top: 1px solid var(--ms-line);
}

.ms-side-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-space-3);
  min-height: 44px;
  padding-block: var(--ms-space-2);
  color: var(--ms-ink-900);
  font-weight: var(--ms-font-weight-semibold);
}

.ms-scope .ms-side-links svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--ms-brand-600);
}

/* ---------- 20. Header navigation fit (WG-13) -------------------------------- */
/* (The enterprise-solution components that used to live here moved to section 33, UI refresh 2026-10.)
   WG-13: a fifth top-level item ("Kurumsal Çözümler") — keep every item on one line, and give
   buttons (menus) and links the same type (buttons used to inherit 16px/400 from the theme). */
.ms-scope .ms-nav .ms-nav__link {
  font: var(--ms-font-weight-medium) 15px/1 var(--ms-font-sans);
  white-space: nowrap;
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .ms-scope .ms-nav .ms-nav__link {
    padding: 0 var(--ms-space-2);
    font-size: var(--ms-font-size-sm);
  }
}

/* ---------- 23. Site-wide page heads + services (FAZ 1) ------------------------ */
/* Page head parts shared by every inner page (the head itself: section 11). */
.ms-page-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-2);
  margin: var(--ms-space-5) 0 0;
  color: var(--ms-color-primary-text);
  font-size: var(--ms-font-size-xs);
  font-weight: var(--ms-font-weight-semibold);
  letter-spacing: var(--ms-tracking-caps);
  text-transform: uppercase;
}

.ms-page-hero__eyebrow + .ms-page-hero__title {
  margin-top: var(--ms-space-2);
}

/* text left, actions or facts right (catalog-head composition for content pages) */
.ms-page-hero__split {
  display: grid;
  gap: var(--ms-space-6);
  align-items: end;
}

@media (min-width: 1024px) {
  .ms-page-hero__split {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--ms-space-10);
  }
}

.ms-page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-3);
}

@media (max-width: 479px) {
  .ms-page-hero__actions .ms-btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* Service detail head: text + (real image | scope panel built from the service's own items) */
.ms-page-hero--split .ms-service-hero {
  align-items: center;
}

@media (min-width: 1024px) {
  .ms-page-hero--split .ms-service-hero {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
    gap: var(--ms-space-10);
  }
}

.ms-service-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-2) var(--ms-space-5);
  margin: var(--ms-space-5) 0 0;
  padding: 0;
  list-style: none;
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-sm);
}

.ms-service-hero__facts li {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-1-5);
}

.ms-scope .ms-service-hero__facts svg {
  width: 16px;
  height: 16px;
  color: var(--ms-color-success);
}

.ms-service-panel {
  position: relative;
  padding: var(--ms-space-6);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-xl);
  background: linear-gradient(180deg, var(--ms-color-surface) 0%, var(--ms-gray-25) 100%);
  box-shadow: var(--ms-shadow-lg);
}

.ms-service-panel::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto;
  height: 4px;
  border-radius: var(--ms-radius-xl) var(--ms-radius-xl) 0 0;
  background: linear-gradient(90deg, var(--ms-blue-600), var(--ms-cyan-500));
}

.ms-service-panel__head {
  display: flex;
  align-items: center;
  gap: var(--ms-space-3);
  padding-bottom: var(--ms-space-4);
  border-bottom: 1px solid var(--ms-color-border);
  color: var(--ms-color-text);
  font-weight: var(--ms-font-weight-semibold);
}

.ms-service-panel__icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-primary-subtle);
  color: var(--ms-color-primary);
}

.ms-scope .ms-service-panel__icon svg,
.ms-service-panel__icon img {
  width: 28px;
  height: 28px;
}

.ms-service-panel ul {
  display: grid;
  gap: var(--ms-space-3);
  margin: var(--ms-space-4) 0 0;
  padding: 0;
  list-style: none;
}

.ms-service-panel li {
  display: flex;
  align-items: flex-start;
  gap: var(--ms-space-3);
  padding: var(--ms-space-3) var(--ms-space-4);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-surface);
  color: var(--ms-color-text-body);
  font-size: var(--ms-font-size-sm);
  font-weight: var(--ms-font-weight-medium);
}

.ms-scope .ms-service-panel li svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--ms-color-success);
}

.ms-service-panel > p {
  margin: var(--ms-space-3) 0 0;
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-xs);
}

@media (max-width: 1023px) {
  .ms-service-panel {
    display: none; /* on small screens the scope grid below carries the same items */
  }
}

.ms-service-intro__title {
  margin-bottom: var(--ms-space-5);
  font-size: var(--ms-font-size-3xl);
}

.ms-service-intro__sub {
  margin: var(--ms-space-8) 0 var(--ms-space-3);
}

.ms-prose--lead {
  font-size: var(--ms-font-size-md);
}

@media (min-width: 1024px) {
  .ms-prose--lead > p:first-child {
    color: var(--ms-color-text);
    font-size: var(--ms-font-size-lg);
  }
}

/* Quote card (aside) */
.ms-quote-card {
  padding: var(--ms-space-6);
  border-color: var(--ms-color-primary-border);
  background: linear-gradient(180deg, var(--ms-color-primary-subtle), var(--ms-color-surface) 70%);
}

.ms-quote-card p {
  margin: var(--ms-space-2) 0 var(--ms-space-5);
  color: var(--ms-color-text-body);
  font-size: var(--ms-font-size-sm);
}

.ms-quote-card .ms-quote-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-1-5);
  margin: 0 0 var(--ms-space-2);
  color: var(--ms-color-primary-text);
  font-size: var(--ms-font-size-xs);
  font-weight: var(--ms-font-weight-semibold);
  letter-spacing: var(--ms-tracking-caps);
  text-transform: uppercase;
}

.ms-scope .ms-quote-card__eyebrow svg {
  width: 16px;
  height: 16px;
}

.ms-quote-card__tel {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-2);
  min-height: 44px;
  margin-top: var(--ms-space-2);
  color: var(--ms-color-text) !important;
  font-weight: var(--ms-font-weight-semibold);
  text-decoration: none;
}

.ms-scope .ms-quote-card__tel svg {
  width: 18px;
  height: 18px;
  color: var(--ms-color-primary);
}

/* Scope grid: one cell per scope item */
.ms-scope-grid {
  display: grid;
  gap: var(--ms-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .ms-scope-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .ms-scope-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ms-space-4);
  }
}

@media (min-width: 1600px) {
  .ms-scope-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.ms-scope-grid__item {
  display: flex;
  align-items: center;
  gap: var(--ms-space-3);
  min-height: 64px;
  padding: var(--ms-space-4) var(--ms-space-5);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-surface);
  box-shadow: var(--ms-shadow-xs);
  color: var(--ms-color-text);
  font-weight: var(--ms-font-weight-medium);
  line-height: var(--ms-line-height-snug);
  transition: border-color var(--ms-duration-base) var(--ms-ease-out), box-shadow var(--ms-duration-base) var(--ms-ease-out);
}

.ms-scope-grid__item:hover {
  border-color: var(--ms-color-primary-border);
  box-shadow: var(--ms-shadow-sm);
}

.ms-scope-grid__icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-primary-subtle);
  color: var(--ms-color-primary);
}

.ms-scope .ms-scope-grid__icon svg {
  width: 18px;
  height: 18px;
}

/* Benefits: two-column check list */
.ms-benefits {
  display: grid;
  gap: var(--ms-space-4) var(--ms-space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .ms-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ms-benefits li {
  display: flex;
  align-items: flex-start;
  gap: var(--ms-space-3);
  padding-bottom: var(--ms-space-4);
  border-bottom: 1px solid var(--ms-color-border);
  color: var(--ms-color-text);
  font-size: var(--ms-font-size-md);
  font-weight: var(--ms-font-weight-medium);
  line-height: var(--ms-line-height-snug);
}

.ms-benefits__icon {
  flex: none;
  color: var(--ms-color-success);
}

.ms-scope .ms-benefits__icon svg {
  width: 22px;
  height: 22px;
}

/* Services index cards */
.ms-service-cards {
  display: grid;
  gap: var(--ms-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .ms-service-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ms-space-6);
  }
}

@media (min-width: 1280px) {
  .ms-service-cards {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

.ms-service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--ms-space-6);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-xl);
  background: var(--ms-color-surface);
  box-shadow: var(--ms-shadow-sm);
  transition: border-color var(--ms-duration-base) var(--ms-ease-out), box-shadow var(--ms-duration-base) var(--ms-ease-out), transform var(--ms-duration-base) var(--ms-ease-out);
}

.ms-service-card:hover {
  border-color: var(--ms-color-primary-border);
  box-shadow: var(--ms-shadow-lg);
  transform: translateY(-2px);
}

.ms-service-card:focus-within {
  box-shadow: var(--ms-shadow-lg), var(--ms-ring-focus);
}

.ms-service-card__icon {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-primary-subtle);
  color: var(--ms-color-primary);
}

.ms-scope .ms-service-card__icon svg,
.ms-service-card__icon img {
  width: 28px;
  height: 28px;
}

.ms-service-card__title {
  margin: var(--ms-space-5) 0 0;
  font-size: var(--ms-font-size-xl);
  font-weight: var(--ms-font-weight-semibold);
  line-height: 1.3;
  letter-spacing: var(--ms-tracking-tight);
}

.ms-service-card__title a {
  color: var(--ms-color-text) !important;
  text-decoration: none;
}

.ms-service-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.ms-service-card__title a:focus-visible {
  outline: none;
}

.ms-service-card__text {
  margin: var(--ms-space-2) 0 0;
  color: var(--ms-color-text-secondary);
  font-size: var(--ms-font-size-sm);
  line-height: var(--ms-line-height-body);
}

.ms-service-card__list {
  display: grid;
  gap: var(--ms-space-2);
  margin: var(--ms-space-5) 0 0;
  padding: var(--ms-space-4) 0 0;
  border-top: 1px solid var(--ms-color-border);
  list-style: none;
  color: var(--ms-color-text-body);
  font-size: var(--ms-font-size-sm);
}

.ms-service-card__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--ms-space-2);
}

.ms-scope .ms-service-card__list svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--ms-color-success);
}

.ms-service-card__more {
  margin: var(--ms-space-2) 0 0;
  color: var(--ms-color-text-tertiary);
  font-size: var(--ms-font-size-xs);
}

.ms-service-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-space-3);
  margin-top: auto;
  padding-top: var(--ms-space-6);
}

.ms-service-card__actions .ms-btn {
  position: relative;
  z-index: 1; /* above the card's stretched title link */
}