/* =====================================
   Variables
   ===================================== */
:root {
  /* Color palette */
  --background: #ffffff;
  --surface: #f7fafc;
  --text: #0f172a; /* slate-900 */
  --muted: #334155; /* slate-700 */
  --primary: #0ea5e9; /* sky-500 */
  --primary-600: #0284c7;
  --primary-700: #0369a1;
  --success: #16a34a; /* green-600 */
  --warning: #d97706; /* amber-600 */
  --danger: #dc2626;  /* red-600 */

  /* Neutral gray scale (50-950) */
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1f2937;
  --gray-900: #0f172a;
  --gray-950: #0b1220;

  /* Typography */
  --ff-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --ff-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --ff-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  --fs-xs: 0.75rem;   /* 12px */
  --fs-sm: 0.875rem;  /* 14px */
  --fs-base: 1rem;    /* 16px */
  --fs-lg: 1.125rem;  /* 18px */
  --fs-xl: 1.25rem;   /* 20px */
  --fs-2xl: clamp(1.25rem, 0.5vw + 1.1rem, 1.5rem);
  --fs-3xl: clamp(1.5rem, 1vw + 1.2rem, 2rem);
  --fs-4xl: clamp(2rem, 2vw + 1rem, 2.5rem);
  --fs-5xl: clamp(2.5rem, 3vw + 1rem, 3rem);

  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.6;
  --lh-loose: 1.8;

  /* Spacing scale (px) */
  --space-0: 0px;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;
  --space-80: 80px;
  --space-96: 96px;

  /* Radii */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 1px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 2px 6px rgba(16, 24, 40, 0.08), 0 4px 10px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 8px 24px rgba(16, 24, 40, 0.12);
  --shadow-xl: 0 12px 32px rgba(16, 24, 40, 0.14);

  /* Transitions */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.8, 0.16, 1);
  --transition-fast: 120ms var(--ease-standard);
  --transition-base: 200ms var(--ease-standard);
  --transition-slow: 320ms var(--ease-emphasized);

  /* Focus ring */
  --ring-color: rgb(14 165 233 / 0.35);
  --ring: 0 0 0 4px var(--ring-color);

  /* Layout */
  --container-max: 1200px;
  --container-pad: clamp(16px, 3vw, 32px);
  --header-height: 64px;

  /* Grid defaults */
  --cols: 12;
  --gap: 16px;
}

/* Dark theme hook (optional) */
[data-theme='dark'] {
  --background: #0b1220;
  --surface: #0f172a;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --primary: #38bdf8;
  --primary-600: #0ea5e9;
  --primary-700: #0284c7;
}

/* Breakpoints */
@media (min-width: 480px) { :root { --bp: 480px; } }
@media (min-width: 768px) { :root { --bp: 768px; } }
@media (min-width: 1024px) { :root { --bp: 1024px; } }
@media (min-width: 1280px) { :root { --bp: 1280px; } }


/* =====================================
   Reset / Normalize
   ===================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body { height: 100%; }

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }

ul[role='list'], ol[role='list'] { list-style: none; margin: 0; padding: 0; }

body { line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: none; padding: 0; }

/* Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

/* Smooth focus outlines only when using keyboard */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }


/* =====================================
   Base Styles
   ===================================== */
body {
  font-family: var(--ff-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  line-height: var(--lh-normal);
  color: var(--text);
  background-color: var(--background);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--text);
}

h1 { font-size: var(--fs-5xl); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-4xl); letter-spacing: -0.02em; }
h3 { font-size: var(--fs-3xl); }
h4 { font-size: var(--fs-2xl); }
h5 { font-size: var(--fs-xl); }
h6 { font-size: var(--fs-lg); }

p { color: var(--muted); }

/* Consistent vertical spacing */
h1 + p, h2 + p, h3 + p, h4 + p { margin-top: var(--space-8); }

/* Links */
a { color: var(--primary); text-decoration: none; transition: color var(--transition-base); }
a:hover { color: var(--primary-600); text-decoration: underline; }
a:focus-visible { box-shadow: var(--ring); border-radius: 4px; }

/* Media */
img, video { border-radius: var(--radius-sm); }

hr { border: 0; height: 1px; background: var(--gray-200); margin: var(--space-24) 0; }


/* =====================================
   Layout & Sections
   ===================================== */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }
.container--narrow {
  max-width: 1200px;
  width: 100%;
}
.container--wide { max-width: 1440px; }

.section { padding-block: clamp(48px, 6vw, 96px); background: transparent; }
.section--light { background: var(--surface); }
.section--dark { background: var(--gray-900); color: #ffffff; }
.section--brand { background: linear-gradient(180deg, rgb(14 165 233 / 0.08), transparent 60%); }

/* Vertical rhythm helper (stack) */
.stack > * + * { margin-top: var(--space-16); }
.stack--sm > * + * { margin-top: var(--space-8); }
.stack--lg > * + * { margin-top: var(--space-24); }

/* Cluster (horizontal group) */
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); }
.cluster--center { justify-content: center; }
.cluster--between { justify-content: space-between; }

/* Sticky header scaffold */
.header { position: relative; z-index: 100; background: var(--background); border-bottom: 1px solid var(--gray-200); }
.header--sticky { position: sticky; top: 0; backdrop-filter: saturate(180%) blur(8px); background: rgb(255 255 255 / 0.85); }

/* =====================================
   Header & Footer styles
   (shared, copied from home.css)
   ===================================== */
/* Header elevatie bij scroll */
.header.elevated { box-shadow: var(--shadow-sm); }

/* Desktop nav – mobiel verbergen via media query */
.nav--desktop { display: none; }
@media (min-width: 768px) {
  .nav--desktop { display: flex; }
  #nav-toggle { display: none; }
}
p {}
/* Mobiele navigatie panel */
#site-nav.open { display: block; }
#site-nav {
  position: absolute;
  top: var(--header-height);
  right: var(--container-pad);
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 8px;
  min-width: 220px;
}
#site-nav a { display: block; }
@media (min-width: 768px) {
  #site-nav { position: static; border: 0; box-shadow: none; padding: 0; min-width: auto; background: transparent; }
  #site-nav a { display: inline-flex; }
}

/* Cookie banner */
.cookie-banner { position: sticky; bottom: 0; left: 0; width: 100%; background: #ffffff; border-top: 1px solid var(--gray-200); box-shadow: 0 -6px 16px rgb(0 0 0 / 0.06); padding-block: 12px; }
.cookie-banner.hidden { display: none; }


/* =====================================
   Spacing utilities
   ===================================== */
.mt-0 { margin-top: var(--space-0); }
.mt-8 { margin-top: var(--space-8); }
.mt-16 { margin-top: var(--space-16); }
.mt-24 { margin-top: var(--space-24); }
.mt-32 { margin-top: var(--space-32); }
.mt-48 { margin-top: var(--space-48); }
.mt-64 { margin-top: var(--space-64); }
.mt-96 { margin-top: var(--space-96); }
.mb-0 { margin-bottom: var(--space-0); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-16 { margin-bottom: var(--space-16); }
.mb-24 { margin-bottom: var(--space-24); }
.mb-32 { margin-bottom: var(--space-32); }
.mb-48 { margin-bottom: var(--space-48); }
.mb-64 { margin-bottom: var(--space-64); }
.mb-96 { margin-bottom: var(--space-96); }
.p-0 { padding: var(--space-0); }
.p-8 { padding: var(--space-8); }
.p-16 { padding: var(--space-16); }
.p-24 { padding: var(--space-24); }
.p-32 { padding: var(--space-32); }
.p-48 { padding: var(--space-48); }
.p-64 { padding: var(--space-64); }
.px-16 { padding-inline: var(--space-16); }
.py-24 { padding-block: var(--space-24); }
.py-48 { padding-block: var(--space-48); }


/* =====================================
   Grid System
   ===================================== */
.grid { display: grid; gap: var(--gap); grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); }

/* Column count utilities (mobile-first) */
.cols-1 { --cols: 1; }
.cols-2 { --cols: 2; }
.cols-3 { --cols: 3; }
.cols-4 { --cols: 4; }
.cols-6 { --cols: 6; }

/* Responsive column utilities */
@media (min-width: 768px) {
  .md-cols-2 { --cols: 2; }
  .md-cols-3 { --cols: 3; }
  .md-cols-4 { --cols: 4; }
  .md-cols-6 { --cols: 6; }
}
@media (min-width: 1024px) {
  .lg-cols-2 { --cols: 2; }
  .lg-cols-3 { --cols: 3; }
  .lg-cols-4 { --cols: 4; }
  .lg-cols-6 { --cols: 6; }
}

/* Gap utilities */
.gap-0 { gap: 0; }
.gap-4 { gap: var(--space-4); }
.gap-8 { gap: var(--space-8); }
.gap-12 { gap: var(--space-12); }
.gap-16 { gap: var(--space-16); }
.gap-24 { gap: var(--space-24); }
.gap-32 { gap: var(--space-32); }
.gap-48 { gap: var(--space-48); }

/* Column width utilities for flex layouts */
.cols { display: flex; flex-wrap: wrap; gap: var(--gap); }
.col { flex: 1 1 0; }
.col-2 { flex: 0 0 calc(50% - var(--gap)); max-width: calc(50% - var(--gap)); }
.col-3 { flex: 0 0 calc(33.333% - var(--gap)); max-width: calc(33.333% - var(--gap)); }
.col-4 { flex: 0 0 calc(25% - var(--gap)); max-width: calc(25% - var(--gap)); }

@media (max-width: 767.98px) {
  .col-2, .col-3, .col-4 { flex-basis: 100%; max-width: 100%; }
}


/* =====================================
   Components
   ===================================== */
/* Buttons */
.btn { 
  --btn-bg: var(--gray-800);
  --btn-text: #ffffff;
  --btn-border: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  font-weight: var(--fw-medium);
  line-height: 1;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-text);
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-base), background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[aria-disabled='true'] { opacity: 0.6; cursor: not-allowed; box-shadow: none; }

.btn--primary { --btn-bg: var(--primary); }
.btn--primary:hover { background: var(--primary-600); }
.btn--secondary { --btn-bg: var(--gray-800); }
.btn--secondary:hover { background: #111827; }
.btn--outline { --btn-bg: transparent; --btn-text: var(--primary); --btn-border: var(--primary); background: transparent; }
.btn--outline:hover { background: rgb(14 165 233 / 0.08); }
.btn--subtle { --btn-bg: var(--gray-100); --btn-text: var(--text); --btn-border: var(--gray-200); }
.btn--subtle:hover { background: var(--gray-200); }
.btn--success { --btn-bg: var(--success); }
.btn--warning { --btn-bg: var(--warning); }
.btn--danger { --btn-bg: var(--danger); }
.btn--block { width: 100%; }
.btn--sm { padding: 8px 12px; font-size: var(--fs-sm); border-radius: var(--radius-sm); }
.btn--lg { padding: 14px 22px; font-size: var(--fs-lg); border-radius: var(--radius-lg); }

/* Inputs & Forms */
.label { display: inline-block; margin-bottom: var(--space-8); font-weight: var(--fw-medium); color: var(--text); }
.help-text { font-size: var(--fs-sm); color: var(--gray-600); margin-top: var(--space-8); }
.form-group { margin-bottom: var(--space-16); }

.input, .textarea, .select, input[type='text'], input[type='email'], input[type='tel'], input[type='url'], input[type='number'], input[type='date'], input[type='time'], input[type='password'], textarea, select {
  width: 100%;
  padding: 12px 14px;
  background: #ffffff;
  color: var(--text);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.02) inset;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base);
}
.input::placeholder, textarea::placeholder { color: var(--gray-500); }
.input:focus, .textarea:focus, .select:focus, input:focus, textarea:focus, select:focus { border-color: var(--primary); box-shadow: var(--ring); outline: none; }
.input[aria-invalid='true'], input:invalid { border-color: var(--danger); }

/* Checkbox & Radio */
input[type='checkbox'], input[type='radio'] { width: 16px; height: 16px; accent-color: var(--primary); }

/* Fieldset */
fieldset { border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: var(--space-16); }
legend { padding: 0 6px; font-weight: var(--fw-medium); }

/* Form progress (multi-step) */
.progress { height: 6px; background: var(--gray-200); border-radius: var(--radius-pill); overflow: hidden; }
.progress__bar { height: 100%; width: 0%; background: var(--primary); border-radius: inherit; transition: width var(--transition-slow); }

/* Cards */
.card { background: #ffffff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-24); }
.card--hoverable { transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); }
.card--hoverable:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--gray-300); }
.card__header { margin-bottom: var(--space-16); }
.card__footer { margin-top: var(--space-16); }

/* Navigation */
.nav { display: flex; gap: var(--space-16); align-items: center; }
.nav__link { color: var(--muted); font-weight: var(--fw-medium); padding: 10px 12px; border-radius: var(--radius-sm); transition: background-color var(--transition-fast), color var(--transition-fast); }
.nav__link:hover { color: var(--text); background: var(--gray-100); }
.nav__link[aria-current='page'] { color: var(--text); background: rgb(14 165 233 / 0.1); }

/* Breadcrumbs */
.breadcrumbs { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: center; font-size: var(--fs-sm); color: var(--gray-600); }
.breadcrumbs a { color: var(--gray-700); }
.breadcrumbs .sep { color: var(--gray-400); }

/* Badges & Tags */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: var(--fw-medium); background: var(--gray-100); color: var(--gray-700); }
.badge--primary { background: rgb(14 165 233 / 0.1); color: var(--primary-700); }
.badge--success { background: rgb(22 163 74 / 0.1); color: var(--success); }
.badge--warning { background: rgb(217 119 6 / 0.1); color: var(--warning); }
.badge--danger { background: rgb(220 38 38 / 0.1); color: var(--danger); }

.tag { display: inline-block; padding: 6px 10px; background: var(--gray-100); color: var(--gray-700); border-radius: var(--radius-pill); font-size: var(--fs-sm); }

/* Alerts */
.alert { display: grid; grid-template-columns: 24px 1fr; gap: var(--space-12); align-items: start; padding: var(--space-16); border-radius: var(--radius-md); border: 1px solid; }
.alert--info { background: rgb(14 165 233 / 0.08); border-color: rgb(14 165 233 / 0.3); color: var(--primary-700); }
.alert--success { background: rgb(22 163 74 / 0.08); border-color: rgb(22 163 74 / 0.3); color: var(--success); }
.alert--warning { background: rgb(217 119 6 / 0.08); border-color: rgb(217 119 6 / 0.3); color: var(--warning); }
.alert--danger { background: rgb(220 38 38 / 0.08); border-color: rgb(220 38 38 / 0.3); color: var(--danger); }

/* CTA Bar (for scheduling/quote) */
.cta-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); padding: 12px 16px; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); background: var(--surface); }

/* Map / Media aspect helpers */
.ratio-16x9 { aspect-ratio: 16 / 9; width: 100%; }
.ratio-4x3 { aspect-ratio: 4 / 3; width: 100%; }

/* Tables (for pricing/packages) */
table { width: 100%; border-collapse: collapse; border-spacing: 0; }
th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--gray-200); }
th { background: var(--gray-100); color: var(--text); font-weight: var(--fw-semibold); }


/* =====================================
   Visual Elements
   ===================================== */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }

.border { border: 1px solid var(--gray-200); }
.border-top { border-top: 1px solid var(--gray-200); }
.border-bottom { border-bottom: 1px solid var(--gray-200); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-pill { border-radius: var(--radius-pill); }

.transition { transition: all var(--transition-base); }

/* Gradients */
.bg-gradient-brand { background: linear-gradient(135deg, rgb(14 165 233 / 0.15), rgb(14 165 233 / 0)); }
.bg-gradient-clean { background: linear-gradient(180deg, #ffffff, var(--surface)); }

/* Icons & placeholders */
.icon { width: 1.25em; height: 1.25em; display: inline-block; vertical-align: -0.2em; }
.icon--sm { width: 1em; height: 1em; }
.icon--lg { width: 1.5em; height: 1.5em; }
.skeleton { background: linear-gradient(90deg, var(--gray-100), var(--gray-200), var(--gray-100)); background-size: 200% 100%; animation: shimmer 1.2s infinite linear; border-radius: var(--radius-sm); }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }


/* =====================================
   Utilities
   ===================================== */
/* Display */
.hidden { display: none !important; }
.d-block { display: block !important; }
d-inline { display: inline !important; }
d-inline-block { display: inline-block !important; }
d-flex { display: flex !important; }
d-grid { display: grid !important; }

/* Flex helpers */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }

/* Text helpers */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--gray-600); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }

/* Width helpers */
.w-100 { width: 100%; }
.max-w-sm { max-width: 480px; }
.max-w-md { max-width: 720px; }
.max-w-lg { max-width: 960px; }

/* Gap/space helpers already defined (gap-*) */

/* Responsive visibility */
@media (max-width: 767.98px) { .md-hidden { display: none !important; } }
@media (min-width: 768px) and (max-width: 1023.98px) { .lg-hidden { display: none !important; } }
@media (min-width: 1024px) { .sm-hidden { display: none !important; } }

/* Screen reader only */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Sticky helpers */
.sticky { position: sticky; top: 0; z-index: 1000; }

/* Z-index helpers */
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }
.z-100 { z-index: 100; }


/* =====================================
   Accessibility
   ===================================== */
/* Focus visible ring */
:where(a, button, input, textarea, select, summary, [role='button']):focus-visible { box-shadow: var(--ring); border-radius: var(--radius-sm); }

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* High-contrast link states */
a:hover, a:focus-visible { text-decoration-thickness: 2px; text-underline-offset: 2px; }

/* Ensure interactive target size */
button, .btn, [role='button'] { min-height: 44px; }

/* Color contrast for dark section */
.section--dark a { color: #93c5fd; }
.section--dark a:hover { color: #bfdbfe; }

/* Form error/accessibility helpers */
.error-text { color: var(--danger); font-size: var(--fs-sm); }


/* =====================================
   Site-specific touches for a cleaning brand
   ===================================== */
/* Clean divider line */
.divider { height: 1px; background: var(--gray-200); width: 100%; }

/* Hero headline emphasis */
.kicker { display: inline-block; font-size: var(--fs-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary-700); background: rgb(14 165 233 / 0.08); padding: 6px 10px; border-radius: var(--radius-pill); }

/* Trust indicators row (logos) */
.trust-logos { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-24); align-items: center; opacity: 0.9; }
@media (max-width: 767.98px) { .trust-logos { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); } }

/* Quote form shell */
.quote-form { background: #ffffff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-24); }

/* Live chat bubble base */
.chat-bubble { position: fixed; right: 16px; bottom: 16px; z-index: 999; background: var(--primary); color: #fff; padding: 12px 14px; border-radius: var(--radius-pill); box-shadow: var(--shadow-md); }

/* Footer helper */
.footer { background: var(--surface); border-top: 1px solid var(--gray-200); padding-block: clamp(32px, 6vw, 64px); color: var(--muted); }

/* ===== Responsive visibility ===== */
.only-mobile { display: inline-flex; }
.only-desktop { display: none; }
@media (min-width: 768px) {
  .only-mobile { display: none !important; }
  .only-desktop { display: flex; }
}

/* ===== Выпадающее мобильное меню ===== */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #fff;
  border-top: 1px solid var(--gray-200);
  box-shadow: var(--shadow-md);
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--transition-slow);
  z-index: 900;
}

.nav-dropdown a {
  display: block;
  padding: 12px 16px;
  color: var(--muted);
  border-radius: var(--radius-sm);
}
.nav-dropdown a:hover {
  background: var(--gray-100);
  color: var(--text);
}

/* состояние открыто */
.nav-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* корректировка sticky шапки */
.header { position: relative; z-index: 1000; }
.header.elevated { box-shadow: var(--shadow-sm); }

/* темная тема */
[data-theme='dark'] .nav-dropdown {
  background: var(--surface);
  border-top-color: var(--gray-800);
}