/* =============================================
   ElektrikerHjelp AS - Main Stylesheet
   Theme: Electrician Services Oslo
   Color Scheme: Blue/Orange (technology & energy)
   ============================================= */

/* ----- CSS Variables ----- */
:root {
  /* Primary colors - Blue tech theme */
  --color-primary: #1565c0;
  --color-primary-dark: #0d47a1;
  --color-primary-light: #1976d2;
  --color-accent: #ff6d00;

  /* Dark theme colors */
  --color-dark: #0a1628;
  --color-dark-light: #102a43;
  --color-dark-accent: #243b53;

  /* Neutral colors */
  --color-white: #ffffff;
  --color-light: #f8f9fa;
  --color-gray-100: #f1f3f5;
  --color-gray-200: #e9ecef;
  --color-gray-300: #dee2e6;
  --color-gray-400: #ced4da;
  --color-gray-500: #adb5bd;
  --color-gray-600: #868e96;
  --color-gray-700: #495057;
  --color-gray-800: #343a40;
  --color-gray-900: #212529;

  /* Semantic colors */
  --color-success: #2e7d32;
  --color-warning: #f57c00;
  --color-error: #c62828;
  --color-info: #0277bd;

  /* Typography */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Montserrat', var(--font-primary);

  /* Font sizes */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.875rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 3rem;
  --fs-5xl: 3.75rem;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  --shadow-glow: 0 0 20px rgba(21, 101, 192, 0.3);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;

  /* Z-index layers */
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-fixed: 1000;
  --z-modal: 2000;
  --z-tooltip: 3000;
}

/* ----- CSS Reset ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-primary);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--color-gray-800);
  background: var(--color-white);
  max-width: 1920px;
  min-width: 375px;
  margin: 0 auto;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--transition-fast); }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; color: var(--color-dark); }

/* =============================================
   HEADER - Unique Two-Level Design with Top Bar
   ============================================= */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-fixed);
  transition: transform var(--transition-base);
}
.header.header-hidden { transform: translateY(-100%); }
.header.scrolled .header__topbar { display: none; }

/* Top Bar */
.header__topbar {
  background: var(--color-dark);
  padding: var(--space-xs) 0;
}
.header__topbar-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header__topbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.header__topbar-status {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-xs);
  color: var(--color-white);
  font-weight: 500;
}
.header__status-dot {
  width: 8px;
  height: 8px;
  background: #4caf50;
  border-radius: 50%;
  animation: status-pulse 2s infinite;
}
@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.6); }
  50% { box-shadow: 0 0 0 6px rgba(76, 175, 80, 0); }
}
.header__topbar-sep {
  color: var(--color-gray-600);
  font-size: var(--fs-xs);
}
.header__topbar-info {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--fs-xs);
  color: var(--color-gray-400);
}
.header__topbar-info img {
  width: 14px;
  height: 14px;
  filter: brightness(0) invert(0.6);
}
.header__topbar-right {
  display: flex;
  align-items: center;
}
.header__topbar-phone {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-accent);
  transition: color var(--transition-fast);
}
.header__topbar-phone:hover { color: var(--color-white); }
.header__topbar-phone img {
  width: 14px;
  height: 14px;
  filter: invert(50%) sepia(98%) saturate(1500%) hue-rotate(360deg) brightness(103%) contrast(106%);
}

/* Main Navigation Bar */
.header__main {
  background: var(--color-white);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
  padding: var(--space-sm) 0;
}
.header__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
}

/* Logo */
.header__logo {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.header__logo-bolt {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(21, 101, 192, 0.35);
  position: relative;
  overflow: hidden;
}
.header__logo-bolt::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.15) 50%, transparent 60%);
}
.header__logo-bolt img {
  width: 28px;
  height: 28px;
  filter: brightness(0) invert(1);
  position: relative;
  z-index: 1;
}
.header__logo-content {
  display: flex;
  flex-direction: column;
}
.header__logo-name {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--color-dark);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.header__logo-name strong {
  color: var(--color-primary);
  font-weight: 800;
}
.header__logo-slogan {
  font-size: 11px;
  color: var(--color-gray-500);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 2px;
}

/* Navigation */
.header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}
.header__nav-group {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs);
  background: var(--color-gray-100);
  border-radius: var(--radius-full);
}
.header__nav-link {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-gray-700);
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
  position: relative;
}
.header__nav-link:hover {
  color: var(--color-primary);
  background: var(--color-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.header__nav-blog {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: all var(--transition-fast);
}
.header__nav-blog:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}
.header__nav-blog img {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
}

/* CTA Buttons */
.header__cta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.header__cta-call {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-accent);
  color: var(--color-white);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(255, 109, 0, 0.35);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}
.header__cta-call:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 109, 0, 0.45);
}
.header__cta-pulse {
  position: absolute;
  left: 12px;
  width: 8px;
  height: 8px;
  background: var(--color-white);
  border-radius: 50%;
  animation: cta-pulse 2s infinite;
}
@keyframes cta-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}
.header__cta-call img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
  margin-left: var(--space-sm);
}
.header__cta-text { margin-left: var(--space-xs); }
.header__cta-book {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-dark);
  color: var(--color-white);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: all var(--transition-fast);
}
.header__cta-book:hover {
  background: var(--color-dark-light);
}
.header__cta-book img {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
}

/* Mobile Toggle */
.header__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 48px;
  height: 48px;
  padding: 12px;
  background: var(--color-gray-100);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.header__toggle:hover { background: var(--color-gray-200); }
.header__toggle-line {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-dark);
  border-radius: 2px;
  transition: all var(--transition-base);
  transform-origin: center;
}
.header__toggle.active .header__toggle-line:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}
.header__toggle.active .header__toggle-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.header__toggle.active .header__toggle-line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Menu */
.header__mobile {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 360px;
  max-width: 90vw;
  background: var(--color-white);
  z-index: var(--z-modal);
  transform: translateX(100%);
  transition: transform var(--transition-base);
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 50px rgba(0, 0, 0, 0.2);
}
.header__mobile.active { transform: translateX(0); }

/* Mobile Header */
.header__mobile-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg);
  border-bottom: 1px solid var(--color-gray-200);
}
.header__mobile-logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--color-dark);
}
.header__mobile-logo img { width: 24px; height: 24px; }
.header__mobile-close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-100);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}
.header__mobile-close:hover {
  background: var(--color-gray-200);
  transform: rotate(90deg);
}
.header__mobile-close img { width: 22px; height: 22px; }

/* Emergency Banner */
.header__mobile-emergency {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-md);
  padding: var(--space-md);
  background: linear-gradient(135deg, var(--color-accent) 0%, #e65100 100%);
  border-radius: var(--radius-lg);
  color: var(--color-white);
  box-shadow: 0 4px 20px rgba(255, 109, 0, 0.4);
}
.header__mobile-emergency-icon {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.header__mobile-emergency-pulse {
  position: absolute;
  inset: 0;
  border: 2px solid var(--color-white);
  border-radius: var(--radius-md);
  animation: emergency-pulse 2s infinite;
}
@keyframes emergency-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0; transform: scale(1.2); }
}
.header__mobile-emergency-icon img {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}
.header__mobile-emergency-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.header__mobile-emergency-text span {
  font-size: var(--fs-xs);
  opacity: 0.9;
}
.header__mobile-emergency-text strong {
  font-size: var(--fs-lg);
  font-weight: 700;
}
.header__mobile-emergency > img:last-child {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
  opacity: 0.7;
}

/* Mobile Navigation */
.header__mobile-nav {
  flex: 1;
  padding: var(--space-sm) 0;
  overflow-y: auto;
}
.header__mobile-link {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  font-weight: 500;
  color: var(--color-gray-700);
  transition: all var(--transition-fast);
}
.header__mobile-link:hover {
  background: var(--color-gray-100);
  color: var(--color-primary);
}
.header__mobile-link-icon {
  width: 36px;
  height: 36px;
  background: var(--color-gray-100);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}
.header__mobile-link:hover .header__mobile-link-icon {
  background: var(--color-primary);
}
.header__mobile-link-icon img {
  width: 18px;
  height: 18px;
  opacity: 0.7;
  transition: all var(--transition-fast);
}
.header__mobile-link:hover .header__mobile-link-icon img {
  filter: brightness(0) invert(1);
  opacity: 1;
}
.header__mobile-link > span { flex: 1; }
.header__mobile-link > img:last-child {
  width: 16px;
  height: 16px;
  opacity: 0.4;
}
.header__mobile-link--blog {
  color: var(--color-primary);
  font-weight: 600;
}
.header__mobile-link--blog .header__mobile-link-icon {
  background: rgba(21, 101, 192, 0.1);
}

/* Mobile Trust Badges */
.header__mobile-trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--color-gray-100);
  border-top: 1px solid var(--color-gray-200);
}
.header__mobile-badge {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.header__mobile-badge img {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
}
.header__mobile-badge div {
  display: flex;
  flex-direction: column;
}
.header__mobile-badge strong {
  font-size: var(--fs-sm);
  color: var(--color-dark);
}
.header__mobile-badge span {
  font-size: var(--fs-xs);
  color: var(--color-gray-500);
}

/* Mobile CTA */
.header__mobile-cta {
  padding: var(--space-lg);
  background: var(--color-dark);
}
.header__mobile-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-md) var(--space-xl);
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: var(--fs-md);
  box-shadow: 0 4px 15px rgba(21, 101, 192, 0.4);
  transition: all var(--transition-fast);
}
.header__mobile-btn:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
}
.header__mobile-btn img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
}

/* Overlay */
.header__overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 22, 40, 0.7);
  z-index: calc(var(--z-modal) - 1);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
  backdrop-filter: blur(4px);
}
.header__overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Header Responsive */
@media (max-width: 1200px) {
  .header__nav-group { gap: 0; }
  .header__nav-link { padding: var(--space-sm) var(--space-sm); font-size: 13px; }
  .header__cta-call, .header__cta-book { padding: var(--space-sm) var(--space-md); }
}
@media (max-width: 1024px) {
  .header__nav { display: none; }
  .header__cta { display: none; }
  .header__toggle { display: flex; }
  .header__topbar-info { display: none; }
  .header__topbar-sep { display: none; }
}
@media (max-width: 768px) {
  .header__topbar { display: none; }
  .header__cta-book { display: none; }
  .header__logo-slogan { display: none; }
  .header__mobile-trust { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .header__cta-text { display: none; }
  .header__cta-call { padding: var(--space-sm); }
  .header__logo-bolt { width: 40px; height: 40px; }
  .header__logo-bolt img { width: 22px; height: 22px; }
  .header__logo-name { font-size: var(--fs-base); }
}

/* =============================================
   INTRO SECTION - Split Screen Design
   ============================================= */
.intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  position: relative;
}

/* Left panel - Light blue gradient */
.intro__left {
  background: linear-gradient(145deg, #1565c0 0%, #1976d2 50%, #2196f3 100%);
  display: flex;
  align-items: center;
  padding: 120px var(--space-2xl) 60px;
  position: relative;
  overflow: hidden;
}
.intro__left::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  border-radius: 50%;
}
.intro__left::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255, 109, 0, 0.2) 0%, transparent 70%);
  border-radius: 50%;
}

.intro__content {
  position: relative;
  z-index: 1;
  max-width: 520px;
  margin-left: auto;
  color: var(--color-white);
}

/* Eyebrow */
.intro__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.intro__eyebrow-line {
  width: 40px;
  height: 2px;
  background: rgba(255, 255, 255, 0.6);
}
.intro__eyebrow span:last-child {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Title */
.intro__title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: var(--space-lg);
  letter-spacing: -0.02em;
  color: var(--color-white);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}
.intro__title span {
  display: block;
  color: #ffb74d;
  font-size: 1.1em;
  text-shadow: 0 2px 15px rgba(255, 109, 0, 0.3);
}

/* Subtitle */
.intro__subtitle {
  font-size: var(--fs-lg);
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.6;
  margin-bottom: var(--space-2xl);
}

/* Facts */
.intro__facts {
  display: flex;
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
  padding: var(--space-lg) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.intro__fact {
  text-align: center;
}
.intro__fact-num {
  display: block;
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--color-white);
  line-height: 1;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.15);
}
.intro__fact-text {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Actions */
.intro__actions {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}
.intro__cta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: var(--color-accent);
  padding: var(--space-sm) var(--space-lg) var(--space-sm) var(--space-sm);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: all var(--transition-base);
}
.intro__cta:hover {
  background: #e65100;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(255, 109, 0, 0.4);
}
.intro__cta-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.intro__cta-icon img {
  filter: brightness(0) invert(1);
}
.intro__cta-text {
  display: flex;
  flex-direction: column;
  color: var(--color-white);
}
.intro__cta-text small {
  font-size: var(--fs-xs);
  opacity: 0.9;
}
.intro__cta-text strong {
  font-size: var(--fs-lg);
  font-weight: 700;
}
.intro__link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-white);
  font-weight: 600;
  text-decoration: none;
  padding: var(--space-md) 0;
  border-bottom: 2px solid transparent;
  transition: all var(--transition-fast);
}
.intro__link:hover {
  border-color: var(--color-accent);
}
.intro__link img {
  filter: brightness(0) invert(1);
  transition: transform var(--transition-fast);
}
.intro__link:hover img {
  transform: translateX(4px);
}

/* Badges */
.intro__badges {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.intro__badge {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  color: var(--color-white);
  font-weight: 500;
}
.intro__badge img {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* Right panel - Image */
.intro__right {
  position: relative;
  overflow: hidden;
}
.intro__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Floating status card */
.intro__float {
  position: absolute;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-md);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.intro__float--status {
  top: 140px;
  left: var(--space-xl);
  animation: float-bob 3s ease-in-out infinite;
}
@keyframes float-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.intro__float-dot {
  width: 10px;
  height: 10px;
  background: #4caf50;
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.5); }
  50% { box-shadow: 0 0 0 8px rgba(76, 175, 80, 0); }
}
.intro__float--status span:last-child {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-dark);
}

/* Floating rating card */
.intro__float--rating {
  bottom: 140px;
  right: var(--space-xl);
  flex-direction: column;
  padding: var(--space-md) var(--space-lg);
  animation: float-bob 3s ease-in-out infinite 1.5s;
}
.intro__rating-stars {
  color: #ffc107;
  font-size: var(--fs-lg);
  letter-spacing: 2px;
  margin-bottom: var(--space-xs);
}
.intro__rating-text {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
}
.intro__rating-text strong {
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--color-dark);
}
.intro__rating-text span {
  font-size: var(--fs-xs);
  color: var(--color-gray-500);
}

/* Floating services */
.intro__services {
  position: absolute;
  bottom: var(--space-2xl);
  left: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.intro__service {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-lg);
  text-decoration: none;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  transition: all var(--transition-fast);
  transform: translateX(0);
}
.intro__service:hover {
  transform: translateX(8px);
  background: var(--color-white);
}
.intro__service-icon {
  width: 40px;
  height: 40px;
  background: var(--color-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.intro__service-icon img {
  filter: brightness(0) invert(1);
}
.intro__service-info strong {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-dark);
}
.intro__service-info span {
  font-size: var(--fs-xs);
  color: var(--color-accent);
  font-weight: 600;
}

/* Scroll indicator */
.intro__scroll {
  position: absolute;
  bottom: var(--space-xl);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}
.intro__scroll span {
  display: block;
  width: 24px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  position: relative;
}
.intro__scroll span::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  width: 4px;
  height: 8px;
  background: var(--color-accent);
  border-radius: 2px;
  transform: translateX(-50%);
  animation: scroll-bounce 2s ease-in-out infinite;
}
@keyframes scroll-bounce {
  0%, 100% { top: 6px; opacity: 1; }
  50% { top: 20px; opacity: 0.3; }
}

/* Intro Responsive */
@media (max-width: 1200px) {
  .intro__content { max-width: 460px; }
  .intro__float--rating { right: var(--space-md); }
  .intro__services { left: var(--space-md); right: auto; }
}

@media (max-width: 1024px) {
  .intro {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: auto;
  }
  .intro__left {
    padding: 100px var(--space-lg) var(--space-2xl);
    order: 1;
  }
  .intro__content {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
  }
  .intro__eyebrow { justify-content: center; }
  .intro__eyebrow-line { display: none; }
  .intro__title { font-size: 3rem; }
  .intro__title span { display: inline; }
  .intro__facts { justify-content: center; gap: var(--space-2xl); }
  .intro__actions { justify-content: center; flex-wrap: wrap; gap: var(--space-md); }
  .intro__badges { justify-content: center; flex-wrap: wrap; }
  .intro__right {
    order: 2;
    height: 450px;
    position: relative;
  }
  .intro__float--status { top: var(--space-lg); left: var(--space-lg); }
  .intro__float--rating { bottom: auto; top: var(--space-lg); right: var(--space-lg); }
  .intro__services {
    position: absolute;
    bottom: var(--space-lg);
    left: var(--space-lg);
    right: var(--space-lg);
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
  }
  .intro__service { background: rgba(255,255,255,0.95); }
  .intro__scroll { display: none; }
}

@media (max-width: 768px) {
  .intro__left { padding: 90px var(--space-md) var(--space-xl); }
  .intro__title { font-size: 2.5rem; }
  .intro__subtitle { font-size: var(--fs-md); margin-bottom: var(--space-xl); }
  .intro__facts { gap: var(--space-xl); }
  .intro__fact-num { font-size: var(--fs-xl); }
  .intro__actions { flex-direction: column; align-items: stretch; max-width: 320px; margin: 0 auto var(--space-2xl); }
  .intro__cta { width: 100%; justify-content: center; padding: var(--space-sm) var(--space-md); }
  .intro__link { justify-content: center; padding: var(--space-sm) var(--space-md); background: rgba(255,255,255,0.1); border-radius: var(--radius-md); }
  .intro__right { height: 380px; }
  .intro__float--rating { display: none; }
  .intro__services { gap: var(--space-xs); }
  .intro__service { padding: var(--space-xs) var(--space-sm); }
  .intro__service-icon { width: 32px; height: 32px; }
  .intro__service-info strong { font-size: var(--fs-sm); }
  .intro__service-info span { font-size: 10px; }
}

@media (max-width: 480px) {
  .intro__left { padding: 80px var(--space-md) var(--space-lg); }
  .intro__title { font-size: 2rem; line-height: 1.1; }
  .intro__subtitle { font-size: var(--fs-sm); }
  .intro__facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
    padding: var(--space-md) 0;
  }
  .intro__fact { padding: var(--space-sm); background: rgba(255,255,255,0.1); border-radius: var(--radius-md); }
  .intro__fact-num { font-size: var(--fs-lg); }
  .intro__fact-text { font-size: 9px; }
  .intro__cta-icon { width: 40px; height: 40px; }
  .intro__cta-icon img { width: 20px; height: 20px; }
  .intro__cta-text strong { font-size: var(--fs-sm); }
  .intro__cta-text small { font-size: 10px; }
  .intro__badges { gap: var(--space-xs); }
  .intro__badge { font-size: 9px; padding: 4px 8px; gap: 4px; }
  .intro__badge img { width: 14px; height: 14px; }
  .intro__right { height: 300px; }
  .intro__services { display: none; }
  .intro__float--status {
    top: auto;
    bottom: var(--space-md);
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-xs) var(--space-md);
    font-size: var(--fs-xs);
  }
}

@media (max-width: 375px) {
  .intro__left { padding: 75px var(--space-sm) var(--space-md); }
  .intro__title { font-size: 1.6rem; }
  .intro__subtitle { font-size: var(--fs-xs); margin-bottom: var(--space-md); }
  .intro__facts { padding: var(--space-sm) 0; gap: var(--space-xs); }
  .intro__fact { padding: var(--space-xs); }
  .intro__fact-num { font-size: var(--fs-md); }
  .intro__fact-text { font-size: 8px; }
  .intro__actions { max-width: 280px; }
  .intro__cta { padding: var(--space-xs) var(--space-sm); }
  .intro__cta-icon { width: 36px; height: 36px; }
  .intro__link { padding: var(--space-xs) var(--space-sm); font-size: var(--fs-sm); }
  .intro__badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xs); }
  .intro__badge { justify-content: center; }
  .intro__right { height: 220px; }
  .intro__float--status { font-size: 10px; padding: 4px var(--space-sm); }
}

/* OLD HERO - kept for reference, remove later */
.hero {
  display: none;
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-dark);
  overflow: hidden;
}

/* Background */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(10, 25, 47, 0.95) 0%,
    rgba(21, 101, 192, 0.7) 50%,
    rgba(10, 25, 47, 0.9) 100%
  );
}

/* Decorative accent lines */
.hero__accents {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.hero__accent {
  position: absolute;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  opacity: 0.15;
}
.hero__accent--1 {
  width: 100%;
  height: 1px;
  top: 25%;
  animation: accent-move 20s linear infinite;
}
.hero__accent--2 {
  width: 1px;
  height: 100%;
  right: 30%;
  animation: accent-move-v 25s linear infinite;
}
.hero__accent--3 {
  width: 60%;
  height: 1px;
  bottom: 35%;
  right: 0;
  animation: accent-move 18s linear infinite reverse;
}
@keyframes accent-move {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@keyframes accent-move-v {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* Main wrapper */
.hero__wrapper {
  position: relative;
  z-index: 2;
  flex: 1;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: 140px var(--space-xl) 40px;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: var(--space-4xl);
  align-items: center;
}

/* Left content */
.hero__content {
  color: var(--color-white);
}

/* Badge */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: rgba(76, 175, 80, 0.12);
  border: 1px solid rgba(76, 175, 80, 0.4);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-lg);
}
.hero__badge-pulse {
  width: 8px;
  height: 8px;
  background: #4caf50;
  border-radius: 50%;
  animation: hero-pulse 2s ease-in-out infinite;
}
@keyframes hero-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.6); }
  50% { box-shadow: 0 0 0 6px rgba(76, 175, 80, 0); }
}
.hero__badge span:last-child {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #4caf50;
}

/* Title */
.hero__title {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-lg);
}

/* Description */
.hero__desc {
  font-size: var(--fs-lg);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: var(--space-xl);
  max-width: 520px;
}

/* List */
.hero__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}
.hero__list li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-md);
  color: rgba(255, 255, 255, 0.9);
}
.hero__list img {
  filter: brightness(0) saturate(100%) invert(70%) sepia(50%) saturate(500%) hue-rotate(70deg);
}

/* Buttons */
.hero__buttons {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
  flex-wrap: wrap;
}
.hero__btn {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: var(--fs-md);
  transition: all var(--transition-base);
  text-decoration: none;
}
.hero__btn--call {
  background: linear-gradient(135deg, var(--color-accent) 0%, #e65100 100%);
  color: var(--color-white);
  box-shadow: 0 8px 25px rgba(255, 109, 0, 0.4);
}
.hero__btn--call:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(255, 109, 0, 0.5);
}
.hero__btn-icon {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__btn-icon img {
  filter: brightness(0) invert(1);
}
.hero__btn-content {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.hero__btn-content span {
  font-size: var(--fs-xs);
  opacity: 0.9;
}
.hero__btn-content strong {
  font-size: var(--fs-lg);
}
.hero__btn--quote {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.25);
  color: var(--color-white);
  backdrop-filter: blur(10px);
}
.hero__btn--quote:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
}
.hero__btn--quote img {
  filter: brightness(0) invert(1);
}

/* Trust row */
.hero__trust {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  flex-wrap: wrap;
}
.hero__stars {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.hero__stars span:first-child {
  color: #ffc107;
  font-size: var(--fs-lg);
  letter-spacing: 2px;
}
.hero__stars span:last-child {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.7);
}
.hero__certs {
  display: flex;
  gap: var(--space-sm);
  opacity: 0.8;
}
.hero__certs img {
  filter: brightness(0) invert(1);
}

/* Right card */
.hero__card {
  background: var(--color-white);
  border-radius: var(--radius-2xl);
  padding: var(--space-xl);
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
}
.hero__card-head {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-gray-200);
  margin-bottom: var(--space-lg);
}
.hero__card-icon {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__card-icon img {
  filter: brightness(0) invert(1);
}
.hero__card-titles {
  display: flex;
  flex-direction: column;
}
.hero__card-titles span {
  font-size: var(--fs-xs);
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.hero__card-titles strong {
  font-size: var(--fs-lg);
  color: var(--color-dark);
}

/* Card items */
.hero__card-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.hero__card-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: all var(--transition-fast);
}
.hero__card-item:hover {
  background: var(--color-primary);
  transform: translateX(4px);
}
.hero__card-item-icon {
  width: 44px;
  height: 44px;
  background: var(--color-white);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}
.hero__card-item:hover .hero__card-item-icon {
  background: rgba(255, 255, 255, 0.2);
}
.hero__card-item:hover .hero__card-item-icon img {
  filter: brightness(0) invert(1);
}
.hero__card-item-text {
  flex: 1;
  min-width: 0;
}
.hero__card-item-text strong {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-dark);
  transition: color var(--transition-fast);
}
.hero__card-item:hover .hero__card-item-text strong {
  color: var(--color-white);
}
.hero__card-item-text span {
  font-size: var(--fs-xs);
  color: var(--color-gray-500);
  transition: color var(--transition-fast);
}
.hero__card-item:hover .hero__card-item-text span {
  color: rgba(255, 255, 255, 0.8);
}
.hero__card-item-price {
  text-align: right;
  flex-shrink: 0;
}
.hero__card-item-price span {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-gray-400);
  transition: color var(--transition-fast);
}
.hero__card-item:hover .hero__card-item-price span {
  color: rgba(255, 255, 255, 0.7);
}
.hero__card-item-price strong {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-accent);
  transition: color var(--transition-fast);
}
.hero__card-item:hover .hero__card-item-price strong {
  color: var(--color-white);
}

/* Card footer */
.hero__card-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--color-gray-100);
  border-radius: var(--radius-lg);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  transition: all var(--transition-fast);
}
.hero__card-footer:hover {
  background: var(--color-primary);
  color: var(--color-white);
}
.hero__card-footer:hover img {
  filter: brightness(0) invert(1);
  transform: translateX(4px);
}
.hero__card-footer img {
  transition: all var(--transition-fast);
}

/* Bottom stats */
.hero__stats {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-xl);
  padding: var(--space-lg) var(--space-xl);
  background: rgba(255, 255, 255, 0.05);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}
.hero__stat {
  text-align: center;
  color: var(--color-white);
}
.hero__stat strong {
  display: block;
  font-size: var(--fs-2xl);
  font-weight: 800;
  line-height: 1;
  margin-bottom: 2px;
}
.hero__stat span {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.hero__stat-divider {
  width: 1px;
  height: 32px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

/* Hero Responsive */
@media (max-width: 1200px) {
  .hero__wrapper {
    grid-template-columns: 1fr 380px;
    gap: var(--space-2xl);
  }
}

@media (max-width: 1024px) {
  .hero__wrapper {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    padding-top: 120px;
  }
  .hero__card {
    max-width: 480px;
    margin: 0 auto;
  }
  .hero__accents { display: none; }
}

@media (max-width: 768px) {
  .hero { min-height: auto; }
  .hero__wrapper { padding: 110px var(--space-md) 30px; }
  .hero__title { font-size: 2rem; }
  .hero__desc { font-size: var(--fs-md); }
  .hero__buttons { flex-direction: column; }
  .hero__btn { width: 100%; justify-content: center; }
  .hero__trust { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
  .hero__card { padding: var(--space-lg); }
  .hero__stats {
    flex-wrap: wrap;
    gap: var(--space-lg);
    padding: var(--space-md);
  }
  .hero__stat-divider { display: none; }
}

@media (max-width: 480px) {
  .hero__wrapper { padding: 100px var(--space-sm) 20px; }
  .hero__title { font-size: 1.75rem; }
  .hero__list li { font-size: var(--fs-sm); }
  .hero__btn { padding: var(--space-md); font-size: var(--fs-sm); }
  .hero__btn-icon { width: 40px; height: 40px; }
  .hero__card-item { padding: var(--space-sm); }
  .hero__card-item-icon { width: 38px; height: 38px; }
  .hero__stats { gap: var(--space-md); }
  .hero__stat strong { font-size: var(--fs-xl); }
}

@media (max-width: 375px) {
  .hero__title { font-size: 1.5rem; }
  .hero__card { padding: var(--space-md); }
  .hero__card-item-text strong { font-size: var(--fs-xs); }
  .hero__card-item-price strong { font-size: var(--fs-sm); }
}

/* =============================================
   PROOF SECTION - Social Proof with Ticker
   ============================================= */
.proof {
  position: relative;
  background: linear-gradient(180deg, #0d1b2a 0%, #1b263b 100%);
  overflow: hidden;
}

/* Scrolling Ticker */
.proof__ticker {
  background: var(--color-accent);
  padding: var(--space-sm) 0;
  overflow: hidden;
  position: relative;
}
.proof__ticker::before,
.proof__ticker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.proof__ticker::before {
  left: 0;
  background: linear-gradient(90deg, var(--color-accent), transparent);
}
.proof__ticker::after {
  right: 0;
  background: linear-gradient(-90deg, var(--color-accent), transparent);
}
.proof__ticker-track {
  display: flex;
  gap: var(--space-3xl);
  animation: ticker-scroll 30s linear infinite;
  width: max-content;
}
.proof__ticker-item {
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
@keyframes ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Main Content */
.proof__main {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: var(--space-2xl);
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-lg);
  align-items: center;
}

/* Big Stat Highlight */
.proof__highlight {
  text-align: center;
  padding: var(--space-xl);
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}
.proof__highlight-number {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  line-height: 1;
  margin-bottom: var(--space-md);
}
.proof__highlight-value {
  font-size: clamp(4rem, 8vw, 6rem);
  font-weight: 900;
  background: linear-gradient(135deg, var(--color-accent) 0%, #ffc107 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.proof__highlight-symbol {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--color-accent);
  margin-top: 0.5rem;
}
.proof__highlight-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.proof__highlight-text strong {
  font-size: var(--fs-lg);
  color: var(--color-white);
  font-weight: 700;
}
.proof__highlight-text span {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.6);
}

/* Certifications Grid */
.proof__certs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}
.proof__cert {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all var(--transition-base);
}
.proof__cert:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}
.proof__cert-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.proof__cert-icon img {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.proof__cert span {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-white);
}

/* Mini Stats */
.proof__stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.proof__stat {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all var(--transition-base);
}
.proof__stat:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(5px);
}
.proof__stat-icon {
  font-size: 1.75rem;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255, 109, 0, 0.2) 0%, rgba(255, 193, 7, 0.2) 100%);
  border-radius: var(--radius-md);
}
.proof__stat-content {
  display: flex;
  flex-direction: column;
}
.proof__stat-content strong {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-white);
}
.proof__stat-content span {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Proof Section Responsive */
@media (max-width: 1024px) {
  .proof__main {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }
  .proof__highlight {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xl);
    text-align: left;
  }
  .proof__highlight-number { margin-bottom: 0; }
}

@media (max-width: 768px) {
  .proof__main {
    grid-template-columns: 1fr;
    padding: var(--space-2xl) var(--space-md);
  }
  .proof__highlight {
    flex-direction: column;
    text-align: center;
    gap: var(--space-md);
  }
  .proof__highlight-number { margin-bottom: var(--space-sm); }
  .proof__certs {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
  }
  .proof__cert { padding: var(--space-md); }
  .proof__cert-icon { width: 40px; height: 40px; }
  .proof__stats {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .proof__stat { flex: 1 1 45%; min-width: 140px; }
}

@media (max-width: 480px) {
  .proof__ticker-track { gap: var(--space-xl); }
  .proof__ticker-item { font-size: var(--fs-xs); }
  .proof__main { padding: var(--space-xl) var(--space-md); }
  .proof__highlight-value { font-size: 3.5rem; }
  .proof__certs { grid-template-columns: 1fr; }
  .proof__cert { padding: var(--space-sm) var(--space-md); }
  .proof__cert-icon { width: 36px; height: 36px; }
  .proof__cert span { font-size: var(--fs-xs); }
  .proof__stats { flex-direction: column; }
  .proof__stat { flex: 1 1 100%; }
}

@media (max-width: 375px) {
  .proof__highlight-value { font-size: 3rem; }
  .proof__highlight-text strong { font-size: var(--fs-base); }
}

/* =============================================
   SERVICES SECTION
   ============================================= */
.werk {
  padding: var(--space-4xl) 0;
  background: var(--color-white);
}
.werk__wrap {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-3xl);
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* Sidebar */
.werk__side { position: relative; }
.werk__side-sticky {
  position: sticky;
  top: 100px;
  padding: var(--space-xl);
  background: var(--color-dark);
  border-radius: var(--radius-xl);
  color: var(--color-white);
}
.werk__counter {
  display: block;
  font-size: 5rem;
  font-weight: 900;
  line-height: 1;
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}
.werk__side-label {
  font-size: var(--fs-sm);
  color: var(--color-gray-400);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.werk__side-line {
  width: 40px;
  height: 3px;
  background: var(--color-primary);
  margin: var(--space-lg) 0;
}
.werk__side-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: var(--space-sm);
  color: var(--color-white);
}
.werk__side-title em {
  color: var(--color-primary);
  font-style: normal;
}
.werk__side-desc {
  font-size: var(--fs-sm);
  color: var(--color-gray-400);
  line-height: 1.6;
  margin-bottom: var(--space-xl);
}
.werk__side-cta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: var(--fs-sm);
  transition: all var(--transition-base);
  position: relative;
}
.werk__side-cta:hover {
  background: var(--color-primary-light);
  transform: translateY(-2px);
}
.werk__side-cta-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  background: var(--color-success);
  border: 2px solid var(--color-dark);
  border-radius: var(--radius-full);
  animation: pulse-dot 2s infinite;
}
.werk__side-cta img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
}

/* Main content */
.werk__main { display: flex; flex-direction: column; gap: var(--space-xl); }

/* Banner */
.werk__banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-xl);
  background: linear-gradient(135deg, var(--color-primary) 0%, #c43c00 100%);
  padding: var(--space-xl) var(--space-2xl);
  border-radius: var(--radius-xl);
  color: var(--color-white);
}
.werk__banner-tag {
  display: inline-block;
  background: rgba(255, 255, 255, 0.2);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-sm);
}
.werk__banner-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  margin-bottom: var(--space-md);
  color: var(--color-white);
}
.werk__banner-perks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}
.werk__banner-perks li {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--fs-sm);
  opacity: 0.95;
}
.werk__banner-perks img {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
}
.werk__banner-action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-sm);
  flex-shrink: 0;
}
.werk__banner-price {
  font-size: var(--fs-sm);
  opacity: 0.9;
}
.werk__banner-price strong {
  font-size: var(--fs-2xl);
  font-weight: 800;
}
.werk__banner-btn {
  background: var(--color-white);
  color: var(--color-primary);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-lg);
  font-weight: 700;
  transition: all var(--transition-base);
}
.werk__banner-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Grid */
.werk__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.werk__card {
  background: var(--color-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  border: 2px solid transparent;
  transition: all var(--transition-base);
  position: relative;
}
.werk__card:hover {
  border-color: var(--color-primary);
  background: var(--color-white);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.werk__card--hot {
  background: linear-gradient(135deg, rgba(230, 81, 0, 0.08) 0%, var(--color-light) 100%);
}
.werk__card-ribbon {
  position: absolute;
  top: 0;
  right: var(--space-md);
  background: var(--color-primary);
  color: var(--color-white);
  padding: 2px var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
}
.werk__card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-md);
}
.werk__card-head img {
  width: 40px;
  height: 40px;
  padding: var(--space-sm);
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.werk__card:hover .werk__card-head img {
  background: rgba(230, 81, 0, 0.1);
}
.werk__card-price {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-white);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
}
.werk__card-title {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: var(--space-xs);
}
.werk__card-text {
  font-size: var(--fs-sm);
  color: var(--color-gray-500);
  line-height: 1.5;
}

/* Footer */
.werk__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-lg);
  background: var(--color-dark);
  padding: var(--space-lg) var(--space-2xl);
  border-radius: var(--radius-lg);
  color: var(--color-white);
}
.werk__foot p {
  font-size: var(--fs-md);
  color: var(--color-gray-300);
}
.werk__foot p strong {
  color: var(--color-white);
}
.werk__foot-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-lg);
  font-weight: 600;
  white-space: nowrap;
  transition: all var(--transition-base);
}
.werk__foot-btn:hover {
  background: var(--color-primary-light);
  transform: translateY(-2px);
}
.werk__foot-btn img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
}

/* Services Responsive */
@media (max-width: 1200px) {
  .werk__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .werk__wrap {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
  .werk__side-sticky {
    position: static;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-lg);
    align-items: center;
    padding: var(--space-lg) var(--space-xl);
  }
  .werk__counter { font-size: 3rem; margin: 0; }
  .werk__side-label { margin: 0; }
  .werk__side-line { display: none; }
  .werk__side-title { font-size: var(--fs-lg); margin: 0; }
  .werk__side-desc { display: none; }
  .werk__side-cta { margin: 0; }
}
@media (max-width: 768px) {
  .werk { padding: var(--space-2xl) 0; }
  .werk__side-sticky {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-md);
  }
  .werk__side-cta { justify-content: center; }
  .werk__banner {
    flex-direction: column;
    text-align: center;
    padding: var(--space-lg);
  }
  .werk__banner-action { align-items: center; }
  .werk__banner-perks { justify-content: center; }
  .werk__grid { grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
  .werk__card { padding: var(--space-md); }
  .werk__foot {
    flex-direction: column;
    text-align: center;
    padding: var(--space-lg);
  }
}
@media (max-width: 480px) {
  .werk__grid { grid-template-columns: 1fr; }
  .werk__card-head img { width: 36px; height: 36px; }
  .werk__banner-title { font-size: var(--fs-lg); }
}

/* =============================================
   SOLUTIONS SECTION
   ============================================= */
.pick {
  padding: var(--space-4xl) 0;
  background: var(--color-light);
  position: relative;
  overflow: hidden;
}
.pick::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-primary) 100%);
}
.pick__container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* Header */
.pick__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-2xl);
  margin-bottom: var(--space-3xl);
  flex-wrap: wrap;
}
.pick__head-left { max-width: 550px; }
.pick__label {
  display: inline-block;
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-md);
}
.pick__title {
  font-size: var(--fs-3xl);
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-dark);
}
.pick__title em {
  color: var(--color-primary);
  font-style: normal;
}
.pick__head-right {
  max-width: 400px;
  font-size: var(--fs-md);
  color: var(--color-gray-600);
  line-height: 1.6;
  text-align: right;
}

/* Timeline */
.pick__timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
  position: relative;
}
.pick__timeline::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 40px;
  right: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-gray-300) 100%);
  z-index: 0;
}

/* Card */
.pick__card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  position: relative;
  z-index: 1;
  border: 2px solid var(--color-gray-200);
  transition: all var(--transition-base);
}
.pick__card:hover {
  border-color: var(--color-primary);
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}
.pick__card--featured {
  background: var(--color-dark);
  border-color: var(--color-primary);
  color: var(--color-white);
}
.pick__card--featured:hover {
  border-color: var(--color-primary-light);
}
.pick__card-num {
  width: 56px;
  height: 56px;
  background: var(--color-light);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);
  font-weight: 900;
  color: var(--color-primary);
  margin-bottom: var(--space-lg);
  border: 3px solid var(--color-white);
  box-shadow: var(--shadow-md);
}
.pick__card--featured .pick__card-num {
  background: var(--color-primary);
  color: var(--color-white);
}
.pick__card-badge {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background: var(--color-primary);
  color: var(--color-white);
  padding: 4px var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
}
.pick__card-icon {
  width: 60px;
  height: 60px;
  background: rgba(230, 81, 0, 0.1);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
}
.pick__card--featured .pick__card-icon {
  background: rgba(230, 81, 0, 0.25);
}
.pick__card-icon img {
  width: 32px;
  height: 32px;
}
.pick__card--featured .pick__card-icon img {
  filter: brightness(0) invert(1);
}
.pick__card-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  margin-bottom: var(--space-sm);
  color: var(--color-dark);
}
.pick__card--featured .pick__card-title {
  color: var(--color-white);
}
.pick__card-desc {
  font-size: var(--fs-sm);
  color: var(--color-gray-500);
  line-height: 1.6;
  margin-bottom: var(--space-lg);
}
.pick__card--featured .pick__card-desc {
  color: var(--color-gray-400);
}
.pick__card-perks {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}
.pick__card-perks li {
  font-size: var(--fs-sm);
  color: var(--color-gray-600);
  padding-left: var(--space-lg);
  position: relative;
}
.pick__card-perks li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 700;
}
.pick__card--featured .pick__card-perks li {
  color: var(--color-gray-300);
}
.pick__card--featured .pick__card-perks li::before {
  color: var(--color-accent);
}
.pick__card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-gray-200);
}
.pick__card--featured .pick__card-bottom {
  border-color: rgba(255, 255, 255, 0.1);
}
.pick__card-price {
  font-size: var(--fs-sm);
  color: var(--color-gray-500);
}
.pick__card-price strong {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--color-primary);
}
.pick__card--featured .pick__card-price {
  color: var(--color-gray-400);
}
.pick__card--featured .pick__card-price strong {
  color: var(--color-accent);
}
.pick__card-tag {
  font-size: var(--fs-xs);
  color: var(--color-gray-500);
  background: var(--color-light);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
}
.pick__card--featured .pick__card-tag {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-gray-300);
}

/* CTA */
.pick__cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-lg);
  background: var(--color-white);
  padding: var(--space-lg) var(--space-2xl);
  border-radius: var(--radius-lg);
  border: 2px dashed var(--color-gray-300);
}
.pick__cta-content {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.pick__cta-content img {
  width: 24px;
  height: 24px;
  opacity: 0.6;
}
.pick__cta-content p {
  font-size: var(--fs-md);
  color: var(--color-gray-600);
}
.pick__cta-content strong {
  color: var(--color-dark);
}
.pick__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-lg);
  font-weight: 600;
  white-space: nowrap;
  transition: all var(--transition-base);
}
.pick__cta-btn:hover {
  background: var(--color-primary-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}
.pick__cta-btn img {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}

/* Solutions Responsive */
@media (max-width: 1200px) {
  .pick__timeline { grid-template-columns: repeat(2, 1fr); }
  .pick__timeline::before { display: none; }
}
@media (max-width: 768px) {
  .pick { padding: var(--space-2xl) 0; }
  .pick__head {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .pick__head-right {
    text-align: left;
    max-width: 100%;
  }
  .pick__title { font-size: var(--fs-2xl); }
  .pick__timeline { grid-template-columns: 1fr; gap: var(--space-md); }
  .pick__card { padding: var(--space-lg); }
  .pick__card-num {
    width: 44px;
    height: 44px;
    font-size: var(--fs-md);
  }
  .pick__cta {
    flex-direction: column;
    text-align: center;
    padding: var(--space-lg);
  }
  .pick__cta-content {
    flex-direction: column;
    text-align: center;
  }
}
@media (max-width: 480px) {
  .pick__card-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }
}

/* =============================================
   ADVANTAGES SECTION
   ============================================= */
.advantages { padding: var(--space-4xl) 0; background: var(--color-light); }
.advantages__container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}
.advantages__visual { position: relative; }
.advantages__image { border-radius: var(--radius-xl); overflow: hidden; }
.advantages__image img { width: 100%; height: auto; }
.advantages__float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: var(--color-white);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.advantages__float--top { top: var(--space-xl); right: -var(--space-xl); }
.advantages__float--bottom { bottom: var(--space-xl); left: -var(--space-xl); }
.advantages__float-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.advantages__float-icon img { width: 24px; height: 24px; filter: brightness(0) invert(1); }
.advantages__float-data { display: flex; flex-direction: column; }
.advantages__float-num { font-size: var(--fs-xl); font-weight: 800; color: var(--color-dark); }
.advantages__float-text { font-size: var(--fs-sm); color: var(--color-gray-600); }
.advantages__content { }
.advantages__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: rgba(230, 81, 0, 0.1);
  color: var(--color-primary);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: var(--space-md);
}
.advantages__label img { width: 14px; height: 14px; }
.advantages__title { font-size: var(--fs-3xl); margin-bottom: var(--space-md); }
.advantages__title span { color: var(--color-primary); }
.advantages__desc { font-size: var(--fs-md); color: var(--color-gray-600); margin-bottom: var(--space-xl); line-height: 1.7; }
.advantages__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); margin-bottom: var(--space-xl); }
.advantages__item {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
}
.advantages__item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.advantages__item-num {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-weight: 700;
  font-size: var(--fs-sm);
  flex-shrink: 0;
}
.advantages__item-info h3 { font-size: var(--fs-sm); margin-bottom: 2px; }
.advantages__item-info p { font-size: var(--fs-xs); color: var(--color-gray-600); line-height: 1.5; }
.advantages__cta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-white);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
}
.advantages__cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); }
.advantages__cta-icon {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.advantages__cta-icon img { width: 22px; height: 22px; filter: brightness(0) invert(1); }
.advantages__cta-content { display: flex; flex-direction: column; }
.advantages__cta-content span { font-size: var(--fs-sm); opacity: 0.9; }
.advantages__cta-content strong { font-size: var(--fs-lg); }

/* =============================================
   GALLERY SECTION (Before/After)
   ============================================= */
.gallery {
  padding: var(--space-4xl) 0;
  background: var(--color-white);
}
.gallery__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* Header */
.gallery__head {
  text-align: center;
  margin-bottom: var(--space-3xl);
}
.gallery__badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  color: var(--color-white);
  padding: var(--space-xs) var(--space-lg);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: var(--space-md);
}
.gallery__title {
  font-size: var(--fs-3xl);
  font-weight: 800;
  color: var(--color-dark);
  margin-bottom: var(--space-sm);
}
.gallery__title em {
  color: var(--color-primary);
  font-style: normal;
}
.gallery__desc {
  font-size: var(--fs-lg);
  color: var(--color-gray-500);
}

/* Row */
.gallery__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

/* Project card */
.gallery__project {
  background: var(--color-light);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all var(--transition-base);
}
.gallery__project:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}

/* Compare */
.gallery__compare {
  display: flex;
  align-items: stretch;
  position: relative;
  background: var(--color-gray-200);
}
.gallery__fig {
  flex: 1;
  position: relative;
  margin: 0;
}
.gallery__fig img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}
.gallery__project:hover .gallery__fig img {
  transform: scale(1.05);
}
.gallery__fig figcaption {
  position: absolute;
  bottom: var(--space-sm);
  left: var(--space-sm);
  padding: 4px var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
}
.gallery__fig--before figcaption {
  background: #d32f2f;
  color: var(--color-white);
}
.gallery__fig--after figcaption {
  background: #388e3c;
  color: var(--color-white);
}

/* Arrow */
.gallery__arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(230, 81, 0, 0.4);
}
.gallery__arrow img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
}

/* Info */
.gallery__info {
  padding: var(--space-lg);
}
.gallery__info h3 {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: var(--space-sm);
}
.gallery__info p {
  font-size: var(--fs-sm);
  color: var(--color-gray-600);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

/* Meta */
.gallery__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-gray-200);
}
.gallery__meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  color: var(--color-gray-500);
}
.gallery__meta span img {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}
.gallery__status {
  margin-left: auto;
  color: #388e3c !important;
  font-weight: 600;
}
.gallery__status img {
  opacity: 1 !important;
}

/* Gallery Responsive */
@media (max-width: 1024px) {
  .gallery__row { grid-template-columns: 1fr 1fr; }
  .gallery__row .gallery__project:last-child { grid-column: span 2; }
  .gallery__row .gallery__project:last-child .gallery__compare { max-height: 200px; overflow: hidden; }
}
@media (max-width: 768px) {
  .gallery { padding: var(--space-2xl) 0; }
  .gallery__title { font-size: var(--fs-2xl); }
  .gallery__row { grid-template-columns: 1fr; }
  .gallery__row .gallery__project:last-child { grid-column: span 1; }
  .gallery__row .gallery__project:last-child .gallery__compare { max-height: none; }
  .gallery__fig img { height: 150px; }
}
@media (max-width: 480px) {
  .gallery__container { padding: 0 var(--space-md); }
  .gallery__head { margin-bottom: var(--space-xl); }
  .gallery__badge { padding: var(--space-xs) var(--space-md); font-size: var(--fs-xs); }
  .gallery__title { font-size: var(--fs-xl); }
  .gallery__desc { font-size: var(--fs-sm); }
  .gallery__row { gap: var(--space-lg); }
  .gallery__compare { flex-direction: column; }
  .gallery__arrow { display: none; }
  .gallery__fig img { height: 140px; }
  .gallery__info { padding: var(--space-md); }
  .gallery__info h3 { font-size: var(--fs-base); }
  .gallery__info p { font-size: var(--fs-sm); }
  .gallery__meta { flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); }
}
@media (max-width: 375px) {
  .gallery { padding: var(--space-xl) 0; }
  .gallery__fig img { height: 120px; }
  .gallery__info { padding: var(--space-sm); }
  .gallery__info h3 { font-size: var(--fs-sm); }
  .gallery__meta span { font-size: var(--fs-xs); }
}

/* =============================================
   GEO SECTION (Geography - Norway regions)
   ============================================= */
.geo {
  padding: var(--space-4xl) 0;
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-light) 100%);
}
.geo__container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* Header with stats */
.geo__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-xl);
  margin-bottom: var(--space-3xl);
  padding-bottom: var(--space-xl);
  border-bottom: 2px solid var(--color-gray-200);
}
.geo__header-content { max-width: 600px; }
.geo__tag {
  display: inline-block;
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-md);
}
.geo__title {
  font-size: var(--fs-3xl);
  line-height: 1.2;
  margin-bottom: var(--space-sm);
}
.geo__title em {
  font-style: normal;
  color: var(--color-primary);
}
.geo__desc {
  font-size: var(--fs-md);
  color: var(--color-gray-600);
  line-height: 1.6;
}
.geo__stats {
  display: flex;
  gap: var(--space-xl);
}
.geo__stat {
  text-align: center;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  min-width: 100px;
}
.geo__stat-num {
  display: block;
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--space-xs);
}
.geo__stat-label {
  font-size: var(--fs-xs);
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Regions grid */
.geo__regions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}
.geo__region {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-200);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}
.geo__region:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.geo__region--highlight {
  background: linear-gradient(135deg, var(--color-dark) 0%, #1a2a3a 100%);
  border-color: transparent;
}
.geo__region--highlight .geo__region-head h3,
.geo__region--highlight .geo__cities li {
  color: var(--color-white);
}
.geo__region--highlight .geo__region-head img {
  filter: brightness(0) invert(1);
}
.geo__region--highlight .geo__region-tag {
  background: rgba(255,255,255,0.15);
  color: var(--color-gray-300);
}
.geo__region--large {
  grid-column: span 2;
}
.geo__region-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 2px solid var(--color-gray-100);
}
.geo__region--highlight .geo__region-head {
  border-bottom-color: rgba(255,255,255,0.1);
}
.geo__region-head img {
  width: 24px;
  height: 24px;
  filter: brightness(0) saturate(100%) invert(45%) sepia(99%) saturate(1500%) hue-rotate(360deg) brightness(97%) contrast(104%);
}
.geo__region-head h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-dark);
  margin: 0;
}
.geo__cities {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-lg) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.geo__cities--grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}
.geo__cities li {
  font-size: var(--fs-sm);
  color: var(--color-gray-700);
  padding-left: var(--space-md);
  position: relative;
}
.geo__cities li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: var(--color-primary);
  border-radius: 50%;
}
.geo__region-tag {
  display: inline-block;
  background: var(--color-gray-100);
  color: var(--color-gray-600);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
}

/* Bottom banner */
.geo__banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-xl) var(--space-2xl);
  color: var(--color-white);
}
.geo__banner-content {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}
.geo__banner-content img {
  width: 48px;
  height: 48px;
  filter: brightness(0) invert(1);
  flex-shrink: 0;
}
.geo__banner-text strong {
  display: block;
  font-size: var(--fs-lg);
  margin-bottom: var(--space-xs);
}
.geo__banner-text span {
  font-size: var(--fs-sm);
  opacity: 0.9;
}
.geo__banner-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-white);
  color: var(--color-primary);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-lg);
  font-weight: 700;
  transition: all var(--transition-base);
  flex-shrink: 0;
}
.geo__banner-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.geo__banner-btn img {
  width: 20px;
  height: 20px;
  filter: brightness(0) saturate(100%) invert(45%) sepia(99%) saturate(1500%) hue-rotate(360deg) brightness(97%) contrast(104%);
}

/* =============================================
   WORKFLOW SECTION (Process)
   ============================================= */
.workflow { padding: var(--space-4xl) 0; background: var(--color-white); }
.workflow__container { max-width: 1400px; margin: 0 auto; padding: 0 var(--space-lg); }
.workflow__header { text-align: center; margin-bottom: var(--space-3xl); }
.workflow__label { display: inline-flex; align-items: center; gap: var(--space-sm); background: rgba(230, 81, 0, 0.1); color: var(--color-primary); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-full); font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--space-md); }
.workflow__label img { width: 14px; height: 14px; }
.workflow__title { font-size: var(--fs-3xl); margin-bottom: var(--space-sm); }
.workflow__subtitle { font-size: var(--fs-lg); color: var(--color-gray-600); }
.workflow__timeline { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-lg); margin-bottom: var(--space-2xl); position: relative; }
.workflow__timeline::before { content: ''; position: absolute; top: 40px; left: 8%; right: 8%; height: 3px; background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 100%); z-index: 0; }
.workflow__step { text-align: center; position: relative; z-index: 1; }
.workflow__step-header { display: flex; flex-direction: column; align-items: center; margin-bottom: var(--space-md); }
.workflow__step-icon { width: 60px; height: 60px; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-sm); box-shadow: 0 0 20px rgba(230, 81, 0, 0.3); }
.workflow__step-icon img { width: 24px; height: 24px; filter: brightness(0) invert(1); }
.workflow__step-num { font-size: var(--fs-xs); font-weight: 700; color: var(--color-primary); }
.workflow__step-title { font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--space-xs); color: var(--color-dark); }
.workflow__step-text { font-size: var(--fs-xs); color: var(--color-gray-600); line-height: 1.5; }
.workflow__step-note { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); margin-top: var(--space-sm); font-size: var(--fs-xs); color: var(--color-gray-500); }
.workflow__step-note img { width: 14px; height: 14px; opacity: 0.7; }
.workflow__step--final { }
.workflow__step-badge { display: inline-flex; align-items: center; gap: var(--space-xs); background: rgba(46, 125, 50, 0.1); color: var(--color-success); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: 600; margin-top: var(--space-sm); }
.workflow__step-badge img { width: 16px; height: 16px; }
.workflow__cta { text-align: center; }
.workflow__cta-btn { display: inline-flex; align-items: center; gap: var(--space-sm); background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); color: var(--color-white); padding: var(--space-md) var(--space-xl); border-radius: var(--radius-lg); font-weight: 600; transition: all var(--transition-base); }
.workflow__cta-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); }
.workflow__cta-btn img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
.workflow__cta-text { margin-top: var(--space-sm); font-size: var(--fs-sm); color: var(--color-gray-600); }

/* =============================================
   FOLIO SECTION (Portfolio)
   ============================================= */
.folio { padding: var(--space-4xl) 0; background: var(--color-light); }
.folio__container { max-width: 1400px; margin: 0 auto; padding: 0 var(--space-lg); }
.folio__header { text-align: center; margin-bottom: var(--space-3xl); }
.folio__label { display: inline-flex; align-items: center; gap: var(--space-sm); background: rgba(230, 81, 0, 0.1); color: var(--color-primary); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-full); font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--space-md); }
.folio__label img { width: 14px; height: 14px; }
.folio__title { font-size: var(--fs-3xl); margin-bottom: var(--space-sm); }
.folio__subtitle { font-size: var(--fs-lg); color: var(--color-gray-600); }
.folio__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
.folio__card { background: var(--color-white); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); transition: all var(--transition-base); }
.folio__card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); }
.folio__image { aspect-ratio: 16/10; overflow: hidden; }
.folio__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.folio__card:hover .folio__image img { transform: scale(1.05); }
.folio__content { padding: var(--space-xl); }
.folio__content h3 { font-size: var(--fs-lg); margin-bottom: var(--space-sm); color: var(--color-dark); }
.folio__content p { font-size: var(--fs-sm); color: var(--color-gray-600); margin-bottom: var(--space-md); line-height: 1.6; }
.folio__meta { display: flex; gap: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-gray-200); }
.folio__meta span { font-size: var(--fs-xs); color: var(--color-gray-500); padding: var(--space-xs) var(--space-sm); background: var(--color-gray-100); border-radius: var(--radius-full); }

/* =============================================
   PRICING SECTION
   ============================================= */
.pricing { padding: var(--space-4xl) 0; background: var(--color-white); }
.pricing__container { max-width: 1000px; margin: 0 auto; padding: 0 var(--space-lg); }
.pricing__header { text-align: center; margin-bottom: var(--space-3xl); }
.pricing__label { display: inline-flex; align-items: center; gap: var(--space-sm); background: rgba(230, 81, 0, 0.1); color: var(--color-primary); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-full); font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--space-md); }
.pricing__label img { width: 14px; height: 14px; }
.pricing__title { font-size: var(--fs-3xl); margin-bottom: var(--space-sm); }
.pricing__subtitle { font-size: var(--fs-lg); color: var(--color-gray-600); }
.pricing__table { background: var(--color-white); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); margin-bottom: var(--space-xl); }
.pricing__row { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-gray-200); transition: background var(--transition-fast); }
.pricing__row:last-child { border-bottom: none; }
.pricing__row:hover { background: var(--color-gray-100); }
.pricing__row--header { background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-light) 100%); color: var(--color-white); }
.pricing__row--header:hover { background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-light) 100%); }
.pricing__row--header span { font-weight: 600; }
.pricing__service { display: flex; flex-direction: column; }
.pricing__service strong { font-weight: 600; color: var(--color-dark); margin-bottom: 2px; }
.pricing__row--header .pricing__service strong { color: var(--color-white); }
.pricing__service span { font-size: var(--fs-sm); color: var(--color-gray-600); }
.pricing__row--header .pricing__service span { color: var(--color-gray-300); }
.pricing__price { font-size: var(--fs-lg); font-weight: 700; color: var(--color-primary); }
.pricing__row--header .pricing__price { color: var(--color-accent); }
.pricing__note { padding: var(--space-lg); background: rgba(230, 81, 0, 0.05); border-radius: var(--radius-lg); border-left: 4px solid var(--color-primary); margin-bottom: var(--space-xl); }
.pricing__note p { font-size: var(--fs-sm); color: var(--color-gray-700); }
.pricing__cta { text-align: center; }
.pricing__cta-btn { display: inline-flex; align-items: center; gap: var(--space-sm); background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); color: var(--color-white); padding: var(--space-md) var(--space-xl); border-radius: var(--radius-lg); font-weight: 600; transition: all var(--transition-base); }
.pricing__cta-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); }
.pricing__cta-btn img { width: 20px; height: 20px; filter: brightness(0) invert(1); }

/* =============================================
   PLEDGE SECTION (Warranty)
   ============================================= */
.pledge {
  padding: var(--space-4xl) 0 0;
  background: var(--color-white);
}
.pledge__container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
}

/* Hero (left side) */
.pledge__hero {
  position: relative;
  background: linear-gradient(135deg, var(--color-dark) 0%, #1a2a3a 100%);
  border-radius: var(--radius-2xl);
  padding: var(--space-3xl);
  color: var(--color-white);
  overflow: hidden;
}
.pledge__hero-inner { position: relative; z-index: 1; }
.pledge__hero-bg {
  position: absolute;
  top: -100px;
  right: -100px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(230, 81, 0, 0.3) 0%, transparent 70%);
  border-radius: 50%;
}
.pledge__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: var(--space-xl);
  border: 1px solid rgba(255,255,255,0.2);
}
.pledge__badge img {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}
.pledge__title {
  font-size: var(--fs-4xl);
  line-height: 1.1;
  margin-bottom: var(--space-lg);
}
.pledge__title em {
  font-style: normal;
  color: var(--color-primary);
  display: block;
}
.pledge__desc {
  font-size: var(--fs-md);
  color: var(--color-gray-300);
  line-height: 1.7;
  margin-bottom: var(--space-xl);
}
.pledge__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.pledge__feature {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: var(--fs-sm);
  color: var(--color-gray-200);
}
.pledge__feature-icon {
  width: 28px;
  height: 28px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pledge__feature-icon img {
  width: 14px;
  height: 14px;
  filter: brightness(0) invert(1);
}
.pledge__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-lg);
  font-weight: 700;
  transition: all var(--transition-base);
}
.pledge__cta:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}
.pledge__cta img {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}

/* Grid (right side) */
.pledge__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}
.pledge__card {
  background: var(--color-light);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  position: relative;
  transition: all var(--transition-base);
  border: 1px solid transparent;
}
.pledge__card:hover {
  background: var(--color-white);
  border-color: var(--color-gray-200);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.pledge__card-num {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--color-gray-300);
}
.pledge__card-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
}
.pledge__card-icon img { width: 28px; height: 28px; }
.pledge__card-icon--blue {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
}
.pledge__card-icon--blue img {
  filter: brightness(0) saturate(100%) invert(28%) sepia(98%) saturate(1500%) hue-rotate(190deg) brightness(95%) contrast(101%);
}
.pledge__card-icon--green {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
}
.pledge__card-icon--green img {
  filter: brightness(0) saturate(100%) invert(35%) sepia(60%) saturate(600%) hue-rotate(85deg) brightness(95%) contrast(95%);
}
.pledge__card-icon--orange {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
}
.pledge__card-icon--orange img {
  filter: brightness(0) saturate(100%) invert(45%) sepia(99%) saturate(1500%) hue-rotate(360deg) brightness(97%) contrast(104%);
}
.pledge__card-icon--purple {
  background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
}
.pledge__card-icon--purple img {
  filter: brightness(0) saturate(100%) invert(30%) sepia(50%) saturate(1500%) hue-rotate(260deg) brightness(95%) contrast(95%);
}
.pledge__card h3 {
  font-size: var(--fs-md);
  font-weight: 700;
  margin-bottom: var(--space-sm);
  color: var(--color-dark);
}
.pledge__card p {
  font-size: var(--fs-sm);
  color: var(--color-gray-600);
  line-height: 1.6;
}

/* Bottom stats bar */
.pledge__stats {
  background: var(--color-light);
  margin-top: var(--space-3xl);
}
.pledge__stats-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  justify-content: space-between;
  gap: var(--space-lg);
}
.pledge__stat {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.pledge__stat img {
  width: 40px;
  height: 40px;
  padding: var(--space-sm);
  background: var(--color-white);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.pledge__stat-text strong {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-dark);
}
.pledge__stat-text span {
  font-size: var(--fs-xs);
  color: var(--color-gray-500);
}

/* =============================================
   ISSUES SECTION (Common Problems)
   ============================================= */
.issues { padding: var(--space-4xl) 0; background: var(--color-white); }
.issues__container { max-width: 1400px; margin: 0 auto; padding: 0 var(--space-lg); }
.issues__header { text-align: center; margin-bottom: var(--space-3xl); }
.issues__label { display: inline-flex; align-items: center; gap: var(--space-sm); background: rgba(230, 81, 0, 0.1); color: var(--color-primary); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-full); font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--space-md); }
.issues__label img { width: 14px; height: 14px; }
.issues__title { font-size: var(--fs-3xl); margin-bottom: var(--space-sm); }
.issues__subtitle { font-size: var(--fs-lg); color: var(--color-gray-600); }
.issues__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); margin-bottom: var(--space-2xl); }
.issues__card { background: var(--color-light); border-radius: var(--radius-xl); padding: var(--space-xl); position: relative; transition: all var(--transition-base); border: 1px solid transparent; }
.issues__card:hover { background: var(--color-white); box-shadow: var(--shadow-lg); border-color: var(--color-primary); transform: translateY(-5px); }
.issues__num { position: absolute; top: var(--space-md); right: var(--space-md); font-size: var(--fs-3xl); font-weight: 800; color: var(--color-gray-200); }
.issues__icon { width: 60px; height: 60px; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-md); }
.issues__icon img { width: 32px; height: 32px; filter: brightness(0) invert(1); }
.issues__card h3 { font-size: var(--fs-lg); margin-bottom: var(--space-md); color: var(--color-dark); }
.issues__cause { font-size: var(--fs-sm); color: var(--color-gray-600); margin-bottom: var(--space-sm); }
.issues__cause strong { color: var(--color-error); }
.issues__solution { font-size: var(--fs-sm); color: var(--color-gray-600); margin-bottom: var(--space-md); }
.issues__solution strong { color: var(--color-success); }
.issues__btn { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-primary); font-size: var(--fs-sm); font-weight: 600; transition: gap var(--transition-base); }
.issues__btn:hover { gap: var(--space-sm); }
.issues__cta { text-align: center; background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-light) 100%); padding: var(--space-2xl); border-radius: var(--radius-xl); color: var(--color-white); }
.issues__cta h3 { font-size: var(--fs-xl); color: var(--color-white); margin-bottom: var(--space-sm); }
.issues__cta p { color: var(--color-gray-300); margin-bottom: var(--space-lg); }
.issues__cta-btn { display: inline-flex; align-items: center; gap: var(--space-sm); background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%); color: var(--color-white); padding: var(--space-md) var(--space-xl); border-radius: var(--radius-lg); font-weight: 600; transition: all var(--transition-base); }
.issues__cta-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); }
.issues__cta-btn img { width: 20px; height: 20px; filter: brightness(0) invert(1); }

/* =============================================
   COMPANY SECTION (About)
   ============================================= */
.company { padding: var(--space-4xl) 0; background: var(--color-light); }
.company__container { max-width: 1400px; margin: 0 auto; padding: 0 var(--space-lg); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: center; }
.company__image { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.company__image img { width: 100%; height: auto; }
.company__content { }
.company__label { display: inline-flex; align-items: center; gap: var(--space-sm); background: rgba(230, 81, 0, 0.1); color: var(--color-primary); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-full); font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--space-md); }
.company__label img { width: 14px; height: 14px; }
.company__title { font-size: var(--fs-3xl); margin-bottom: var(--space-md); }
.company__lead { font-size: var(--fs-lg); color: var(--color-gray-700); margin-bottom: var(--space-md); line-height: 1.7; font-weight: 500; }
.company__content p { font-size: var(--fs-base); color: var(--color-gray-600); margin-bottom: var(--space-md); line-height: 1.7; }
.company__features { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); margin-top: var(--space-xl); }
.company__feature { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md); background: var(--color-white); border-radius: var(--radius-md); }
.company__feature img { width: 24px; height: 24px; }
.company__feature span { font-weight: 600; color: var(--color-dark); font-size: var(--fs-sm); }

/* =============================================
   TESTIMONIALS SECTION (Reviews)
   ============================================= */
.testimonials { padding: var(--space-4xl) 0; background: var(--color-white); }
.testimonials__container { max-width: 1400px; margin: 0 auto; padding: 0 var(--space-lg); }
.testimonials__header { text-align: center; margin-bottom: var(--space-3xl); }
.testimonials__label { display: inline-flex; align-items: center; gap: var(--space-sm); background: rgba(230, 81, 0, 0.1); color: var(--color-primary); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-full); font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--space-md); }
.testimonials__label img { width: 14px; height: 14px; }
.testimonials__title { font-size: var(--fs-3xl); margin-bottom: var(--space-sm); }
.testimonials__subtitle { font-size: var(--fs-lg); color: var(--color-gray-600); }
.testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); margin-bottom: var(--space-2xl); }
.testimonials__card { background: var(--color-light); border-radius: var(--radius-xl); padding: var(--space-xl); position: relative; transition: all var(--transition-base); }
.testimonials__card::before { content: '"'; position: absolute; top: var(--space-md); right: var(--space-lg); font-size: 80px; font-family: Georgia, serif; color: var(--color-gray-200); line-height: 1; }
.testimonials__card:hover { background: var(--color-white); box-shadow: var(--shadow-lg); transform: translateY(-5px); }
.testimonials__card-header { margin-bottom: var(--space-md); }
.testimonials__name { font-size: var(--fs-md); color: var(--color-dark); margin-bottom: 2px; }
.testimonials__service { font-size: var(--fs-sm); color: var(--color-gray-500); }
.testimonials__comment { font-size: var(--fs-sm); color: var(--color-gray-600); line-height: 1.7; margin-bottom: var(--space-md); position: relative; z-index: 1; }
.testimonials__card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-md); border-top: 1px solid var(--color-gray-200); }
.testimonials__rating { color: #ffc107; font-size: var(--fs-md); letter-spacing: 2px; }
.testimonials__date { font-size: var(--fs-xs); color: var(--color-gray-500); }
.testimonials__cta { text-align: center; }
.testimonials__cta-btn { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--color-primary); font-weight: 600; transition: gap var(--transition-base); }
.testimonials__cta-btn:hover { gap: var(--space-md); }
.testimonials__cta-btn img { width: 16px; height: 16px; }

/* =============================================
   ARTICLES SECTION (Blog)
   ============================================= */
.articles { padding: var(--space-4xl) 0; background: var(--color-light); }
.articles__container { max-width: 1400px; margin: 0 auto; padding: 0 var(--space-lg); }
.articles__header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-xl); margin-bottom: var(--space-3xl); flex-wrap: wrap; }
.articles__label { display: inline-flex; align-items: center; gap: var(--space-sm); background: rgba(230, 81, 0, 0.1); color: var(--color-primary); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-full); font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--space-md); }
.articles__label img { width: 14px; height: 14px; }
.articles__title { font-size: var(--fs-3xl); margin-bottom: var(--space-sm); }
.articles__subtitle { font-size: var(--fs-lg); color: var(--color-gray-600); }
.articles__all { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--color-primary); font-weight: 600; transition: gap var(--transition-base); }
.articles__all:hover { gap: var(--space-md); }
.articles__all img { width: 16px; height: 16px; }
.articles__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); margin-bottom: var(--space-2xl); }
.articles__card { background: var(--color-white); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-sm); transition: all var(--transition-base); }
.articles__card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.articles__image { position: relative; aspect-ratio: 16/10; overflow: hidden; display: block; }
.articles__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.articles__card:hover .articles__image img { transform: scale(1.05); }
.articles__category { position: absolute; top: var(--space-md); left: var(--space-md); background: var(--color-primary); color: var(--color-white); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: 600; }
.articles__content { padding: var(--space-lg); }
.articles__date { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--fs-xs); color: var(--color-gray-500); margin-bottom: var(--space-sm); }
.articles__date img { width: 14px; height: 14px; opacity: 0.7; }
.articles__content h3 { font-size: var(--fs-md); margin-bottom: var(--space-sm); line-height: 1.4; }
.articles__content h3 a { color: var(--color-dark); transition: color var(--transition-fast); }
.articles__content h3 a:hover { color: var(--color-primary); }
.articles__content p { font-size: var(--fs-sm); color: var(--color-gray-600); margin-bottom: var(--space-md); line-height: 1.6; }
.articles__link { color: var(--color-primary); font-size: var(--fs-sm); font-weight: 600; }
.articles__cta { display: flex; align-items: center; gap: var(--space-xl); background: var(--color-white); padding: var(--space-lg) var(--space-xl); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }
.articles__cta-icon { width: 60px; height: 60px; background: rgba(230, 81, 0, 0.1); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.articles__cta-icon img { width: 28px; height: 28px; }
.articles__cta-text { flex: 1; }
.articles__cta-text strong { display: block; font-size: var(--fs-md); color: var(--color-dark); margin-bottom: 2px; }
.articles__cta-text span { font-size: var(--fs-sm); color: var(--color-gray-600); }
.articles__cta-btn { display: flex; align-items: center; gap: var(--space-sm); background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); color: var(--color-white); padding: var(--space-md) var(--space-xl); border-radius: var(--radius-lg); font-weight: 600; white-space: nowrap; transition: all var(--transition-base); }
.articles__cta-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); }
.articles__cta-btn img { width: 20px; height: 20px; filter: brightness(0) invert(1); }

/* =============================================
   FAQ SECTION
   ============================================= */
.faq { padding: var(--space-4xl) 0; background: var(--color-white); }
.faq__container { max-width: 900px; margin: 0 auto; padding: 0 var(--space-lg); }
.faq__header { text-align: center; margin-bottom: var(--space-3xl); }
.faq__label { display: inline-flex; align-items: center; gap: var(--space-sm); background: rgba(230, 81, 0, 0.1); color: var(--color-primary); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-full); font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--space-md); }
.faq__label img { width: 14px; height: 14px; }
.faq__title { font-size: var(--fs-3xl); margin-bottom: var(--space-sm); }
.faq__subtitle { font-size: var(--fs-lg); color: var(--color-gray-600); }
.faq__list { display: flex; flex-direction: column; gap: var(--space-md); }
.faq__item { background: var(--color-light); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-gray-200); transition: all var(--transition-base); }
.faq__item:hover { border-color: var(--color-primary); }
.faq__item.active { background: var(--color-white); box-shadow: var(--shadow-md); border-color: var(--color-primary); }
.faq__question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-lg); text-align: left; font-size: var(--fs-md); font-weight: 600; color: var(--color-dark); cursor: pointer; }
.faq__question span { flex: 1; }
.faq__question:hover { color: var(--color-primary); }
.faq__question img { width: 20px; height: 20px; transition: transform var(--transition-base); flex-shrink: 0; }
.faq__item.active .faq__question img { transform: rotate(45deg); }
.faq__answer { max-height: 0; overflow: hidden; transition: max-height var(--transition-base); }
.faq__item.active .faq__answer { max-height: 500px; }
.faq__answer p { padding: 0 var(--space-lg) var(--space-lg); font-size: var(--fs-sm); color: var(--color-gray-600); line-height: 1.7; }

/* =============================================
   CONTACT SECTION
   ============================================= */
.contact { padding: var(--space-4xl) 0; background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-light) 100%); color: var(--color-white); }
.contact__container { max-width: 1400px; margin: 0 auto; padding: 0 var(--space-lg); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); }
.contact__info { }
.contact__label { display: inline-flex; align-items: center; gap: var(--space-sm); background: rgba(230, 81, 0, 0.2); color: var(--color-accent); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-full); font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--space-md); }
.contact__label img { width: 14px; height: 14px; }
.contact__title { font-size: var(--fs-3xl); margin-bottom: var(--space-md); color: var(--color-white); }
.contact__desc { font-size: var(--fs-md); color: var(--color-gray-300); margin-bottom: var(--space-xl); line-height: 1.7; }
.contact__details { display: flex; flex-direction: column; gap: var(--space-md); margin-bottom: var(--space-xl); }
.contact__detail { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md); background: rgba(255, 255, 255, 0.05); border-radius: var(--radius-lg); border: 1px solid rgba(255, 255, 255, 0.1); transition: all var(--transition-base); }
.contact__detail:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--color-primary); }
.contact__detail-icon { width: 50px; height: 50px; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact__detail-icon img { width: 24px; height: 24px; filter: brightness(0) invert(1); }
.contact__detail-text { display: flex; flex-direction: column; }
.contact__detail-text span { font-size: var(--fs-sm); color: var(--color-gray-400); }
.contact__detail-text strong { font-size: var(--fs-md); color: var(--color-white); }
.contact__badges { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.contact__badge { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); background: rgba(255, 255, 255, 0.05); border-radius: var(--radius-full); font-size: var(--fs-sm); color: var(--color-gray-300); }
.contact__badge img { width: 20px; height: 20px; filter: brightness(0) invert(1); opacity: 0.7; }
.contact__form-wrap { background: var(--color-white); border-radius: var(--radius-xl); padding: var(--space-2xl); }

/* Inquiry Form */
.inquiry__form { display: flex; flex-direction: column; gap: var(--space-md); }
.inquiry__form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.inquiry__form-group { display: flex; flex-direction: column; }
.inquiry__input, .inquiry__textarea { padding: var(--space-md); border: 1px solid var(--color-gray-300); border-radius: var(--radius-md); font-size: var(--fs-base); font-family: inherit; transition: all var(--transition-fast); }
.inquiry__input:focus, .inquiry__textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(230, 81, 0, 0.1); }
.inquiry__textarea { resize: vertical; min-height: 120px; }
.inquiry__error { display: none; font-size: var(--fs-xs); color: var(--color-error); margin-top: var(--space-xs); }
.inquiry__submit { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); color: var(--color-white); padding: var(--space-md) var(--space-xl); border-radius: var(--radius-md); font-size: var(--fs-md); font-weight: 600; cursor: pointer; border: none; transition: all var(--transition-base); }
.inquiry__submit:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); }
.inquiry__submit img { width: 18px; height: 18px; filter: brightness(0) invert(1); }
.inquiry__success { display: none; align-items: center; justify-content: center; gap: var(--space-sm); padding: var(--space-md); background: rgba(46, 125, 50, 0.1); border-radius: var(--radius-md); color: var(--color-success); font-weight: 500; }
.inquiry__success img { width: 20px; height: 20px; }

/* =============================================
   GUIDE SECTION (SEO Text - Magazine style)
   ============================================= */
.guide {
  background: var(--color-light);
  padding: var(--space-4xl) 0;
}

/* Sticky sidebar */
.guide__aside {
  background: var(--color-light);
  border-right: 1px solid var(--color-gray-200);
  position: relative;
}
.guide__aside-inner {
  position: sticky;
  top: 80px;
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

/* Quick stats */
.guide__stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.guide__stat {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--color-white);
  border-radius: var(--radius-md);
}
.guide__stat-val {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--color-primary);
}
.guide__stat-label {
  font-size: var(--fs-xs);
  color: var(--color-gray-500);
}

/* Table of contents */
.guide__toc-title {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-gray-500);
  margin-bottom: var(--space-md);
}
.guide__toc-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.guide__toc-list li { list-style: none; }
.guide__toc-list a {
  display: block;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--fs-sm);
  color: var(--color-gray-600);
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
  border-left: 2px solid transparent;
}
.guide__toc-list a:hover {
  background: var(--color-white);
  color: var(--color-primary);
  border-left-color: var(--color-primary);
}

/* Sidebar CTA */
.guide__aside-cta {
  padding: var(--space-lg);
  background: linear-gradient(135deg, var(--color-dark) 0%, #1a2a3a 100%);
  border-radius: var(--radius-lg);
  text-align: center;
}
.guide__aside-cta-label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--color-gray-300);
  margin-bottom: var(--space-sm);
}
.guide__aside-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  font-weight: 700;
  transition: all var(--transition-base);
}
.guide__aside-cta-btn:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
}
.guide__aside-cta-btn img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
}

/* Main content area */
.guide__main {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}
.guide__container {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-lg);
}

/* Header */
.guide__header {
  margin-bottom: var(--space-3xl);
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--color-gray-200);
}
.guide__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-xs);
  color: var(--color-gray-500);
  margin-bottom: var(--space-lg);
}
.guide__breadcrumb span:last-child { color: var(--color-primary); }
.guide__title {
  font-size: var(--fs-3xl);
  line-height: 1.2;
  margin-bottom: var(--space-md);
}
.guide__title em {
  font-style: normal;
  color: var(--color-primary);
}
.guide__intro {
  font-size: var(--fs-lg);
  color: var(--color-gray-600);
  line-height: 1.7;
  margin-bottom: var(--space-lg);
}
.guide__meta {
  display: flex;
  gap: var(--space-lg);
}
.guide__meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--fs-sm);
  color: var(--color-gray-500);
}
.guide__meta-item img { width: 14px; height: 14px; opacity: 0.6; }

/* Article content */
.guide__content {
  font-size: var(--fs-base);
  color: var(--color-gray-700);
  line-height: 1.9;
}
.guide__section {
  margin-bottom: var(--space-2xl);
  scroll-margin-top: 100px;
}
.guide__section h3 {
  font-size: var(--fs-xl);
  color: var(--color-dark);
  margin-bottom: var(--space-md);
  padding-left: var(--space-md);
  border-left: 3px solid var(--color-primary);
}
.guide__section p {
  margin-bottom: var(--space-md);
}
.guide__section strong {
  color: var(--color-dark);
}

/* Alert box */
.guide__alert {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-xl);
  background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
  border-radius: var(--radius-lg);
  margin: var(--space-2xl) 0;
  border: 1px solid #ffe082;
}
.guide__alert-icon {
  width: 48px;
  height: 48px;
  background: #ff8f00;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.guide__alert-icon img {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}
.guide__alert-body h4 {
  font-size: var(--fs-md);
  color: #e65100;
  margin-bottom: var(--space-sm);
}
.guide__alert-body ul {
  padding-left: var(--space-lg);
}
.guide__alert-body li {
  list-style: disc;
  font-size: var(--fs-sm);
  color: #bf360c;
  margin-bottom: var(--space-xs);
}

/* Bottom CTA */
.guide__bottom-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-xl);
  padding: var(--space-xl);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: var(--radius-xl);
  margin-top: var(--space-3xl);
}
.guide__bottom-cta-content h4 {
  font-size: var(--fs-lg);
  color: var(--color-white);
  margin-bottom: var(--space-xs);
}
.guide__bottom-cta-content p {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.8);
  margin: 0;
}
.guide__bottom-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-white);
  color: var(--color-primary);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-lg);
  font-weight: 700;
  white-space: nowrap;
  transition: all var(--transition-base);
}
.guide__bottom-cta-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.guide__bottom-cta-btn img {
  width: 20px;
  height: 20px;
}

/* Services grid */
.guide__services {
  margin-top: var(--space-3xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--color-gray-200);
}
.guide__services-title {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-gray-500);
  margin-bottom: var(--space-lg);
}
.guide__services-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.guide__services-grid span {
  padding: var(--space-sm) var(--space-md);
  background: var(--color-light);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  color: var(--color-gray-700);
  transition: all var(--transition-base);
}
.guide__services-grid span:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* =============================================
   SITE FOOTER - Unique Electric Theme
   ============================================= */

/* Top CTA Band */
.site-footer__cta {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  padding: var(--space-xl) 0;
}
.site-footer__cta-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-xl);
  flex-wrap: wrap;
}
.site-footer__cta-content { }
.site-footer__cta-badge {
  display: inline-block;
  background: rgba(255,255,255,0.2);
  color: var(--color-white);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-sm);
}
.site-footer__cta-title {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: var(--space-xs);
}
.site-footer__cta-text {
  font-size: var(--fs-md);
  color: rgba(255,255,255,0.85);
}
.site-footer__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-white);
  color: var(--color-primary);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-lg);
  font-size: var(--fs-lg);
  font-weight: 700;
  text-decoration: none;
  transition: all var(--transition-base);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.site-footer__cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}
.site-footer__cta-btn img {
  width: 24px;
  height: 24px;
  filter: invert(40%) sepia(98%) saturate(1500%) hue-rotate(160deg) brightness(90%) contrast(101%);
}

/* Main Footer */
.site-footer__main {
  background: #0f172a;
  padding: var(--space-4xl) 0 var(--space-2xl);
}
.site-footer__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}
/* CTA Band */
.site-footer__cta {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  padding: var(--space-lg) var(--space-xl);
}
.site-footer__cta-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
}
.site-footer__cta-content { }
.site-footer__cta-badge {
  display: inline-block;
  background: rgba(255,255,255,0.2);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-sm);
}
.site-footer__cta-title {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--color-white);
  margin: 0 0 var(--space-xs);
}
.site-footer__cta-text {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.9);
  margin: 0;
}
.site-footer__cta-btn {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-white);
  color: var(--color-primary-dark);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: var(--fs-lg);
  text-decoration: none;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}
.site-footer__cta-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.site-footer__cta-btn img {
  width: 24px;
  height: 24px;
  filter: brightness(0);
}

/* Grid Layout */
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr 1.2fr;
  gap: var(--space-2xl);
}

/* Company Column */
.site-footer__company { }
.site-footer__logo {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  text-decoration: none;
  margin-bottom: var(--space-lg);
}
.site-footer__logo-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-footer__logo-icon img {
  width: 28px;
  height: 28px;
  filter: brightness(0) invert(1);
}
.site-footer__logo-text {
  display: flex;
  flex-direction: column;
}
.site-footer__logo-text strong {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-white);
}
.site-footer__logo-text span {
  font-size: var(--fs-xs);
  color: var(--color-gray-400);
}
.site-footer__about {
  font-size: var(--fs-sm);
  color: var(--color-gray-400);
  line-height: 1.7;
  margin-bottom: var(--space-lg);
}
.site-footer__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}
.site-footer__badge {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  background: rgba(255,255,255,0.05);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  color: var(--color-gray-300);
}
.site-footer__badge img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
  opacity: 0.7;
}

/* Links Columns */
.site-footer__links { }
.site-footer__heading {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--space-lg);
  position: relative;
  padding-left: var(--space-md);
}
.site-footer__heading::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-primary);
  border-radius: 2px;
}
.site-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.site-footer__list a {
  font-size: var(--fs-sm);
  color: var(--color-gray-400);
  text-decoration: none;
  transition: all var(--transition-fast);
  display: inline-block;
}
.site-footer__list a:hover {
  color: var(--color-white);
  transform: translateX(4px);
}

/* Contact Card */
.site-footer__contact { }
.site-footer__contact-card {
  background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
}
.site-footer__contact-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-sm);
  color: #22c55e;
  margin-bottom: var(--space-md);
}
.site-footer__contact-dot {
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: var(--radius-full);
  animation: dot-pulse 2s infinite;
}
@keyframes dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.site-footer__phone {
  display: block;
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--color-white);
  text-decoration: none;
  margin-bottom: var(--space-lg);
  transition: color var(--transition-fast);
}
.site-footer__phone:hover {
  color: var(--color-primary);
}
.site-footer__contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: var(--space-md);
}
.site-footer__contact-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-sm);
  color: var(--color-gray-400);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.site-footer__contact-row:hover {
  color: var(--color-white);
}
.site-footer__contact-row img {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
  opacity: 0.5;
}
.site-footer__hours { }
.site-footer__hours-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-sm);
  color: var(--color-gray-400);
  padding: var(--space-xs) 0;
}
.site-footer__hours-row span:last-child {
  color: var(--color-gray-300);
}

/* Related Pages */
.site-footer__related {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding-top: var(--space-xl);
  margin-top: var(--space-xl);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.site-footer__related-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-sm);
  color: var(--color-gray-500);
  white-space: nowrap;
}
.site-footer__related-title img {
  width: 14px;
  height: 14px;
  filter: brightness(0) invert(1);
  opacity: 0.5;
}
.site-footer__related-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.site-footer__related-links a {
  padding: var(--space-xs) var(--space-md);
  background: rgba(255,255,255,0.05);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  color: var(--color-gray-400);
  text-decoration: none;
  transition: all var(--transition-fast);
}
.site-footer__related-links a:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* Bottom Bar */
.site-footer__bottom {
  background: #0a1120;
  padding: var(--space-lg) 0;
}
.site-footer__bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
}
.site-footer__copy {
  font-size: var(--fs-sm);
  color: var(--color-gray-500);
}
.site-footer__legal {
  display: flex;
  gap: var(--space-lg);
}
.site-footer__legal a {
  font-size: var(--fs-sm);
  color: var(--color-gray-500);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.site-footer__legal a:hover {
  color: var(--color-white);
}

/* Back to top button */
.back-to-top {
  position: fixed;
  bottom: 110px;
  right: 30px;
  width: 44px;
  height: 44px;
  background: var(--color-dark);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all var(--transition-base);
  z-index: 999;
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.back-to-top img {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
  transform: rotate(180deg);
}

/* Fixed call button */
.fixed-call {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(230, 81, 0, 0.4);
  z-index: var(--z-fixed);
  transition: all var(--transition-base);
}
.fixed-call:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 40px rgba(230, 81, 0, 0.5);
}
.fixed-call img {
  width: 28px;
  height: 28px;
  filter: brightness(0) invert(1);
}
.fixed-call__pulse {
  position: absolute;
  inset: -4px;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-full);
  animation: pulse-ring 2s ease-out infinite;
}
@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}
.fixed-call__badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #2e7d32;
  color: var(--color-white);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius-full);
}

/* =============================================
   FIXED CALL BUTTON
   ============================================= */
.fixed-call-btn { position: fixed; bottom: 30px; right: 30px; z-index: var(--z-fixed); }
.fixed-call-btn__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 65px;
  height: 65px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  border-radius: var(--radius-full);
  box-shadow: 0 4px 20px rgba(230, 81, 0, 0.4);
  animation: pulse-call 2s infinite;
  transition: transform var(--transition-fast);
}
.fixed-call-btn__link:hover { transform: scale(1.1); }
.fixed-call-btn__link img { width: 28px; height: 28px; filter: brightness(0) invert(1); }
@keyframes pulse-call {
  0% { box-shadow: 0 0 0 0 rgba(230, 81, 0, 0.7); }
  70% { box-shadow: 0 0 0 20px rgba(230, 81, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(230, 81, 0, 0); }
}

/* =============================================
   RESPONSIVE - 1200px
   ============================================= */
@media (max-width: 1200px) {
  :root { --fs-5xl: 3rem; --fs-4xl: 2.5rem; --fs-3xl: 2rem; }
  .hero__container { grid-template-columns: 1fr 360px; gap: var(--space-xl); }
  .hero__card { padding: var(--space-lg); }
  .services__grid { grid-template-columns: repeat(3, 1fr); }
  .solutions__grid { grid-template-columns: repeat(2, 1fr); }
  .workflow__timeline { grid-template-columns: repeat(3, 1fr); }
  .workflow__timeline::before { display: none; }
  .geo__header { flex-direction: column; align-items: flex-start; }
  .geo__stats { width: 100%; justify-content: flex-start; }
  .geo__regions { grid-template-columns: repeat(3, 1fr); }
  .geo__region--large { grid-column: span 3; }
  .pledge__container { gap: var(--space-xl); }
  .pledge__hero { padding: var(--space-2xl); }
  .pledge__stats-inner { flex-wrap: wrap; justify-content: center; }
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); }
  .site-footer__company { grid-column: 1 / -1; }
  .site-footer__contact { grid-column: 1 / -1; }
}

/* =============================================
   RESPONSIVE - 1024px
   ============================================= */
@media (max-width: 1024px) {
  .site-header__nav { display: none; }
  .site-header__actions { display: none; }
  .site-header__burger { display: flex; }
  .hero { min-height: auto; padding: 100px 0 var(--space-3xl); }
  .hero__container { grid-template-columns: 1fr; text-align: center; }
  .hero__content { order: 1; }
  .hero__live { justify-content: center; }
  .hero__card { order: 2; max-width: 450px; margin: var(--space-2xl) auto 0; }
  .hero__text { margin: 0 auto var(--space-xl); max-width: 600px; }
  .hero__actions { justify-content: center; flex-wrap: wrap; }
  .hero__trust { justify-content: center; flex-wrap: wrap; }
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .services__featured { grid-template-columns: 1fr; }
  .services__featured-visual { display: none; }
  .advantages__container { grid-template-columns: 1fr; }
  .advantages__visual { max-width: 500px; margin: 0 auto; }
  .advantages__float { display: none; }
  .showcase__grid { grid-template-columns: repeat(2, 1fr); }
  .geo__regions { grid-template-columns: repeat(2, 1fr); }
  .geo__region--large { grid-column: span 2; }
  .geo__cities--grid { grid-template-columns: repeat(2, 1fr); }
  .cases__grid { grid-template-columns: repeat(2, 1fr); }
  .issues__grid { grid-template-columns: repeat(2, 1fr); }
  .folio__grid { grid-template-columns: repeat(2, 1fr); }
  .folio__grid .folio__card:last-child { grid-column: span 2; }
  .folio__grid .folio__card:last-child .folio__image { aspect-ratio: 21/9; }
  .pledge__container { grid-template-columns: 1fr; }
  .pledge__hero { max-width: 600px; margin: 0 auto; }
  .pledge__grid { grid-template-columns: repeat(4, 1fr); }
  .company__container { grid-template-columns: 1fr; }
  .company__image { max-width: 500px; margin: 0 auto; }
  .testimonials__grid { grid-template-columns: repeat(2, 1fr); }
  .articles__grid { grid-template-columns: repeat(2, 1fr); }
  .contact__container { grid-template-columns: 1fr; }
  .guide__container { padding: var(--space-xl); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__company { grid-column: 1 / -1; }
  .site-footer__contact { grid-column: 1 / -1; }
  .site-footer__cta-inner { flex-direction: column; text-align: center; }
}

/* =============================================
   RESPONSIVE - 768px
   ============================================= */
@media (max-width: 768px) {
  :root { --fs-5xl: 2.5rem; --fs-4xl: 2rem; --fs-3xl: 1.75rem; --fs-2xl: 1.5rem; --space-4xl: 4rem; --space-3xl: 3rem; }
  .site-header__main .site-header__container { padding: var(--space-xs) var(--space-md); }
  .hero { padding: 90px 0 var(--space-2xl); }
  .hero__card { padding: var(--space-lg); max-width: 100%; }
  .hero__card-services { grid-template-columns: 1fr 1fr; gap: var(--space-xs); }
  .hero__card-service { padding: var(--space-xs) var(--space-sm); font-size: var(--fs-xs); }
  .hero__cta--phone { flex: 1; min-width: 280px; }
  .services__header { flex-direction: column; }
  .services__grid { grid-template-columns: 1fr; }
  .services__cta { flex-direction: column; text-align: center; gap: var(--space-md); }
  .solutions__grid { grid-template-columns: 1fr; }
  .advantages__grid { grid-template-columns: 1fr; }
  .showcase__grid { grid-template-columns: 1fr; }
  .showcase__images { grid-template-columns: 1fr 1fr; }
  .showcase__arrow { display: none; }
  .geo__regions { grid-template-columns: 1fr; }
  .geo__region--large { grid-column: span 1; }
  .geo__cities--grid { grid-template-columns: repeat(3, 1fr); }
  .geo__banner { flex-direction: column; gap: var(--space-lg); text-align: center; }
  .geo__banner-content { flex-direction: column; }
  .pledge__grid { grid-template-columns: repeat(2, 1fr); }
  .pledge__stats-inner { flex-direction: column; align-items: center; gap: var(--space-md); }
  .pledge__stat { width: 100%; max-width: 300px; }
  .workflow__timeline { grid-template-columns: repeat(2, 1fr); }
  .cases__grid { grid-template-columns: 1fr; }
  .issues__grid { grid-template-columns: 1fr; }
  .folio { padding: var(--space-2xl) 0; }
  .folio__header { margin-bottom: var(--space-xl); }
  .folio__title { font-size: var(--fs-2xl); }
  .folio__subtitle { font-size: var(--fs-base); }
  .folio__grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .folio__grid .folio__card:last-child { grid-column: span 1; }
  .folio__grid .folio__card:last-child .folio__image { aspect-ratio: 16/10; }
  .folio__content { padding: var(--space-lg); }
  .folio__meta { flex-wrap: wrap; gap: var(--space-sm); }
  .company__features { grid-template-columns: 1fr; }
  .testimonials__grid { grid-template-columns: 1fr; }
  .articles__header { flex-direction: column; align-items: flex-start; }
  .articles__grid { grid-template-columns: 1fr; }
  .articles__cta { flex-direction: column; text-align: center; }
  .faq__question { font-size: var(--fs-base); padding: var(--space-md); }
  .inquiry__form-row { grid-template-columns: 1fr; }
  .footer__content { padding: var(--space-2xl) 0; }
  .footer__container { padding: 10px var(--space-md); }
  .footer__layout { grid-template-columns: 1fr; gap: var(--space-xl); }
  .footer__brand-col { text-align: center; }
  .footer__logo { justify-content: center; }
  .footer__logo-box { width: 48px; height: 48px; }
  .footer__logo-box img { width: 24px; height: 24px; }
  .footer__logo-title { font-size: var(--fs-base); }
  .footer__logo-sub { font-size: var(--fs-xs); }
  .footer__desc { max-width: 100%; text-align: center; font-size: var(--fs-sm); }
  .footer__trust-row { justify-content: center; flex-wrap: wrap; gap: var(--space-md); }
  .footer__trust-item { font-size: var(--fs-xs); }
  .footer__nav-cols { grid-template-columns: 1fr 1fr; justify-items: center; gap: var(--space-lg); }
  .footer__nav-title { font-size: var(--fs-xs); }
  .footer__nav-list a { font-size: var(--fs-xs); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__company { grid-column: 1 / -1; }
  .site-footer__contact { grid-column: 1 / -1; }
  .site-footer__cta-title { font-size: var(--fs-xl); }
  .site-footer__related { flex-direction: column; align-items: center; text-align: center; }
  .site-footer__bottom-inner { flex-direction: column; text-align: center; }
  .site-footer__legal { flex-wrap: wrap; justify-content: center; }
  .back-to-top { right: 20px; bottom: 100px; }
  .fixed-call { right: 20px; bottom: 20px; width: 55px; height: 55px; }
  .fixed-call img { width: 24px; height: 24px; }
  .fixed-call-btn { bottom: 20px; right: 20px; }
  .fixed-call-btn__link { width: 55px; height: 55px; }
  .fixed-call-btn__link img { width: 24px; height: 24px; }
}

/* =============================================
   RESPONSIVE - 480px
   ============================================= */
@media (max-width: 480px) {
  :root { --fs-5xl: 2rem; --fs-4xl: 1.75rem; --fs-3xl: 1.5rem; --fs-2xl: 1.25rem; --fs-xl: 1.125rem; --space-4xl: 3rem; --space-3xl: 2rem; }
  .site-header__logo-icon { width: 40px; height: 40px; }
  .site-header__logo-icon img { width: 24px; height: 24px; }
  .site-header__brand { font-size: var(--fs-lg); }
  .site-header__tagline { display: none; }
  .hero__live { flex-wrap: wrap; justify-content: center; padding: var(--space-sm); }
  .hero__live-sep { display: none; }
  .hero__live-info { width: 100%; text-align: center; margin-top: var(--space-xs); }
  .hero__actions { flex-direction: column; gap: var(--space-sm); }
  .hero__cta { width: 100%; justify-content: center; }
  .hero__cta--phone { min-width: auto; padding: var(--space-md); }
  .hero__cta-value { font-size: var(--fs-base); }
  .hero__trust { flex-direction: column; gap: var(--space-sm); align-items: center; }
  .hero__card { padding: var(--space-md); }
  .hero__card-services { grid-template-columns: 1fr 1fr; }
  .hero__card-service { padding: var(--space-xs); font-size: 11px; }
  .hero__card-service img { width: 16px; height: 16px; }
  .geo { padding: var(--space-2xl) 0; }
  .geo__container { padding: 0 var(--space-md); }
  .geo__header { margin-bottom: var(--space-xl); padding-bottom: var(--space-md); }
  .geo__title { font-size: var(--fs-xl); }
  .geo__desc { font-size: var(--fs-sm); }
  .geo__stats { flex-wrap: wrap; gap: var(--space-sm); justify-content: center; }
  .geo__stat { flex: 0 0 auto; min-width: 80px; padding: var(--space-sm); }
  .geo__stat-num { font-size: var(--fs-lg); }
  .geo__regions { gap: var(--space-md); }
  .geo__region { padding: var(--space-md); }
  .geo__region-head { margin-bottom: var(--space-md); padding-bottom: var(--space-sm); }
  .geo__cities { gap: var(--space-xs); }
  .geo__cities li { font-size: var(--fs-sm); }
  .geo__cities--grid { grid-template-columns: repeat(2, 1fr); }
  .geo__region-tag { font-size: 10px; padding: var(--space-xs) var(--space-sm); }
  .geo__banner { padding: var(--space-lg); }
  .geo__banner-content img { width: 28px; height: 28px; }
  .geo__banner-text strong { font-size: var(--fs-sm); }
  .geo__banner-text span { font-size: var(--fs-xs); }
  .geo__banner-btn { padding: var(--space-sm) var(--space-lg); font-size: var(--fs-sm); }
  .pledge__hero { padding: var(--space-xl); }
  .pledge__grid { grid-template-columns: 1fr; }
  .pledge__cta { width: 100%; justify-content: center; }
  .workflow { padding: var(--space-2xl) 0; }
  .workflow__container { padding: 0 var(--space-md); }
  .workflow__header { margin-bottom: var(--space-xl); }
  .workflow__title { font-size: var(--fs-xl); }
  .workflow__subtitle { font-size: var(--fs-sm); }
  .workflow__timeline { grid-template-columns: 1fr; gap: var(--space-md); }
  .workflow__step { display: block; text-align: center; padding: var(--space-lg); background: var(--color-light); border-radius: var(--radius-lg); }
  .workflow__step-header { flex-direction: column; margin-bottom: var(--space-md); }
  .workflow__step-icon { width: 56px; height: 56px; margin: 0 auto var(--space-sm); }
  .workflow__step-icon img { width: 24px; height: 24px; }
  .workflow__step-num { font-size: var(--fs-xs); }
  .workflow__step-title { font-size: var(--fs-base); margin-bottom: var(--space-xs); }
  .workflow__step-text { font-size: var(--fs-sm); }
  .workflow__step-note { justify-content: center; }
  .workflow__cta-btn { width: 100%; justify-content: center; padding: var(--space-md); }
  .workflow__cta-text { font-size: var(--fs-xs); }
  .folio__container { padding: 0 var(--space-md); }
  .folio__label { padding: var(--space-xs) var(--space-md); font-size: var(--fs-xs); }
  .folio__title { font-size: var(--fs-xl); }
  .folio__subtitle { font-size: var(--fs-sm); }
  .folio__content { padding: var(--space-md); }
  .folio__content h3 { font-size: var(--fs-base); }
  .folio__content p { font-size: var(--fs-xs); }
  .folio__meta span { font-size: 10px; padding: 4px var(--space-xs); }
  .guide__alert { flex-direction: column; }
  .guide__bottom-cta { flex-direction: column; text-align: center; }
  .guide__bottom-cta-btn { width: 100%; justify-content: center; }
  .site-footer__cta-title { font-size: var(--fs-lg); }
  .site-footer__cta-btn { padding: var(--space-sm) var(--space-lg); font-size: var(--fs-base); }
  .site-footer__phone { font-size: var(--fs-xl); }
  .site-footer__related-links a { padding: var(--space-xs) var(--space-sm); font-size: var(--fs-xs); }
}

/* =============================================
   RESPONSIVE - 375px
   ============================================= */
@media (max-width: 375px) {
  :root { --fs-5xl: 1.75rem; --fs-4xl: 1.5rem; --fs-3xl: 1.35rem; --fs-2xl: 1.15rem; --fs-xl: 1rem; --fs-lg: 0.95rem; --space-4xl: 2.5rem; --space-3xl: 1.5rem; --space-2xl: 1.25rem; }
  .hero { padding: 80px 0 var(--space-xl); }
  .hero__container { padding: 0 var(--space-md); }
  .hero__title { font-size: var(--fs-4xl); }
  .hero__slogan { font-size: var(--fs-base); }
  .hero__card { padding: var(--space-sm); }
  .hero__card-head { flex-wrap: wrap; gap: var(--space-sm); }
  .hero__card-logo { width: 40px; height: 40px; }
  .hero__card-logo img { width: 20px; height: 20px; }
  .hero__card-brand strong { font-size: var(--fs-sm); }
  .hero__card-services { gap: var(--space-xs); }
  .hero__card-rating { padding: var(--space-sm); }
  .contact__form-wrap { padding: var(--space-lg); }
  .geo__stat { min-width: 70px; padding: var(--space-xs) var(--space-sm); }
  .geo__stat-num { font-size: var(--fs-base); }
  .geo__region { padding: var(--space-sm); }
  .geo__region-head h3 { font-size: var(--fs-sm); }
  .geo__cities li { font-size: var(--fs-xs); }
  .geo__banner { padding: var(--space-md); border-radius: var(--radius-lg); }
  .workflow__step { padding: var(--space-md); }
  .workflow__step-icon { width: 48px; height: 48px; }
  .workflow__step-icon img { width: 20px; height: 20px; }
  .workflow__step-title { font-size: var(--fs-sm); }
  .workflow__step-text { font-size: var(--fs-xs); }
  .workflow__step-note { font-size: var(--fs-xs); }
  .workflow__step-badge { font-size: var(--fs-xs); }
  .folio__image { aspect-ratio: 4/3; }
  .folio__content { padding: var(--space-sm); }
  .folio__content h3 { font-size: var(--fs-sm); margin-bottom: var(--space-xs); }
  .folio__content p { font-size: 11px; margin-bottom: var(--space-sm); }
  .folio__meta { padding-top: var(--space-sm); gap: var(--space-xs); }
  .fixed-call-btn { bottom: 15px; right: 15px; }
  .fixed-call-btn__link { width: 50px; height: 50px; }
  .fixed-call-btn__link img { width: 22px; height: 22px; }
  .site-footer__main { padding: var(--space-2xl) 0; }
  .site-footer__container { padding: 0 var(--space-md); }
  .site-footer__logo-text strong { font-size: var(--fs-base); }
  .site-footer__phone { font-size: var(--fs-lg); }
  .site-footer__cta { padding: var(--space-md) 0; }
  .site-footer__cta-title { font-size: var(--fs-base); }
  .site-footer__cta-text { font-size: var(--fs-sm); }
  .site-footer__cta-btn { width: 100%; justify-content: center; }
  .site-footer__related-links { gap: var(--space-xs); }
  .back-to-top { right: 15px; bottom: 85px; width: 40px; height: 40px; }
  .fixed-call { right: 15px; bottom: 15px; width: 50px; height: 50px; }
  .fixed-call img { width: 22px; height: 22px; }
}

/* =============================================
   ACCESSIBILITY & PRINT
   ============================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
@media print {
  .site-header, .fixed-call-btn { display: none !important; }
  body { font-size: 12pt; color: #000; background: #fff; }
  .hero { min-height: auto; padding: 20pt 0; background: #fff; color: #000; }
}

/* =============================================
   ELEKTRIKER OSLO - ADDITIONAL SECTIONS
   ============================================= */

/* ----- Services Section ----- */
.services { padding: var(--space-4xl) 0; background: var(--color-white); }
.services__container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-lg); }
.services__head { text-align: center; margin-bottom: var(--space-3xl); }
.services__tag { display: inline-block; background: var(--color-primary); color: var(--color-white); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-full); font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--space-md); }
.services__title { font-size: var(--fs-3xl); font-weight: 700; color: var(--color-dark); margin-bottom: var(--space-md); }
.services__lead { font-size: var(--fs-md); color: var(--color-gray-600); max-width: 700px; margin: 0 auto; }
.services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-xl); }
.services__card { background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); transition: transform var(--transition-base), box-shadow var(--transition-base); }
.services__card:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); }
.services__card--featured { border: 2px solid var(--color-accent); }
.services__card--highlight { border: 2px solid var(--color-primary); }
.services__card-image { position: relative; height: 200px; overflow: hidden; }
.services__card-image img { width: 100%; height: 100%; object-fit: cover; }
.services__card-badge { position: absolute; top: var(--space-md); right: var(--space-md); background: var(--color-primary); color: var(--color-white); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: 600; }
.services__card-badge--urgent { background: var(--color-accent); }
.services__card-body { padding: var(--space-lg); }
.services__card-title { font-size: var(--fs-lg); font-weight: 700; color: var(--color-dark); margin-bottom: var(--space-sm); }
.services__card-text { font-size: var(--fs-sm); color: var(--color-gray-600); margin-bottom: var(--space-md); line-height: 1.6; }
.services__card-price { display: flex; align-items: baseline; gap: var(--space-xs); margin-bottom: var(--space-md); }
.services__card-from { font-size: var(--fs-sm); color: var(--color-gray-500); }
.services__card-amount { font-size: var(--fs-xl); font-weight: 700; color: var(--color-primary); }
.services__card-unit { font-size: var(--fs-sm); color: var(--color-gray-500); }
.services__card-btn { display: inline-flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-lg); background: var(--color-gray-100); color: var(--color-dark); border-radius: var(--radius-md); font-weight: 600; text-decoration: none; transition: background var(--transition-base); }
.services__card-btn:hover { background: var(--color-gray-200); }
.services__card-btn--primary { background: var(--color-accent); color: var(--color-white); }
.services__card-btn--primary:hover { background: var(--color-primary); }
.services__card-btn--primary img { filter: brightness(0) invert(1); }
.services__footer { text-align: center; margin-top: var(--space-3xl); }
.services__note { font-size: var(--fs-sm); color: var(--color-gray-500); margin-bottom: var(--space-lg); }
.services__footer-btn { display: inline-flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-xl); background: var(--color-primary); color: var(--color-white); border-radius: var(--radius-md); font-weight: 600; text-decoration: none; transition: background var(--transition-base); }
.services__footer-btn:hover { background: var(--color-primary-dark); }
.services__footer-btn img { filter: brightness(0) invert(1); }

/* ----- Materials Section ----- */
.materials { padding: var(--space-4xl) 0; background: var(--color-gray-100); }
.materials__container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-lg); }
.materials__head { text-align: center; margin-bottom: var(--space-3xl); }
.materials__tag { display: inline-block; background: var(--color-primary); color: var(--color-white); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-full); font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--space-md); }
.materials__title { font-size: var(--fs-3xl); font-weight: 700; color: var(--color-dark); margin-bottom: var(--space-md); }
.materials__lead { font-size: var(--fs-md); color: var(--color-gray-600); max-width: 700px; margin: 0 auto; }
.materials__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-xl); }
.materials__card { background: var(--color-white); border-radius: var(--radius-lg); padding: var(--space-xl); text-align: center; box-shadow: var(--shadow-md); }
.materials__card-icon { width: 80px; height: 80px; background: var(--color-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-lg); }
.materials__card-icon img { filter: brightness(0) invert(1); }
.materials__card-title { font-size: var(--fs-lg); font-weight: 700; color: var(--color-dark); margin-bottom: var(--space-sm); }
.materials__card-desc { font-size: var(--fs-sm); color: var(--color-gray-600); margin-bottom: var(--space-md); line-height: 1.6; }
.materials__card-specs { list-style: none; text-align: left; }
.materials__card-specs li { font-size: var(--fs-sm); color: var(--color-gray-700); padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-gray-200); }
.materials__card-specs li:last-child { border-bottom: none; }

/* ----- Benefits Section (Split Layout) ----- */
.benefits {
  display: grid;
  grid-template-columns: 420px 1fr;
  min-height: 100vh;
}

/* Left Showcase Panel */
.benefits__showcase {
  background: linear-gradient(145deg, #0d1b2a 0%, #1b263b 100%);
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
}
.benefits__showcase-inner {
  max-width: 340px;
}
.benefits__badge {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-white);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-lg);
}
.benefits__title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  color: var(--color-white);
  line-height: 1.2;
  margin-bottom: var(--space-lg);
}
.benefits__title span {
  color: var(--color-accent);
}
.benefits__desc {
  font-size: var(--fs-base);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
  margin-bottom: var(--space-2xl);
}

/* Metrics Grid */
.benefits__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
}
.benefits__metric {
  text-align: center;
  padding: var(--space-md);
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.benefits__metric-value {
  display: block;
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--color-white);
  line-height: 1;
}
.benefits__metric-value small {
  font-size: 0.5em;
  color: var(--color-accent);
  margin-left: 2px;
}
.benefits__metric-label {
  display: block;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.5);
  margin-top: var(--space-xs);
}

/* CTA Button */
.benefits__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-accent);
  color: var(--color-white);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-full);
  font-weight: 700;
  text-decoration: none;
  transition: all var(--transition-base);
}
.benefits__cta:hover {
  background: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 109, 0, 0.3);
}
.benefits__cta img {
  filter: brightness(0) invert(1);
}

/* Right Cards Panel */
.benefits__cards {
  background: var(--color-gray-100);
  padding: var(--space-3xl);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  align-content: start;
}

/* Individual Card */
.benefits__card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  position: relative;
  transition: all var(--transition-base);
  border: 2px solid transparent;
}
.benefits__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  border-color: var(--color-primary);
}
.benefits__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}
.benefits__card-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.benefits__card-icon img {
  filter: brightness(0) invert(1);
}
.benefits__card-num {
  font-size: var(--fs-3xl);
  font-weight: 800;
  color: var(--color-gray-200);
  font-family: var(--font-heading);
}
.benefits__card-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: var(--space-sm);
}
.benefits__card-text {
  font-size: var(--fs-sm);
  color: var(--color-gray-600);
  line-height: 1.7;
  margin-bottom: var(--space-md);
}
.benefits__card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.benefits__card-tags span {
  display: inline-block;
  padding: 4px 10px;
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* Benefits Section Responsive */
@media (max-width: 1200px) {
  .benefits { grid-template-columns: 360px 1fr; }
  .benefits__showcase { padding: var(--space-xl); }
}

@media (max-width: 1024px) {
  .benefits {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .benefits__showcase {
    position: relative;
    height: auto;
    padding: var(--space-3xl) var(--space-lg);
  }
  .benefits__showcase-inner {
    max-width: 600px;
    text-align: center;
  }
  .benefits__metrics { justify-content: center; }
  .benefits__cta { justify-content: center; }
  .benefits__cards {
    padding: var(--space-2xl) var(--space-lg);
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .benefits__cards { grid-template-columns: 1fr; }
  .benefits__metrics { grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
  .benefits__metric { padding: var(--space-sm); }
  .benefits__metric-value { font-size: var(--fs-xl); }
}

@media (max-width: 480px) {
  .benefits__showcase { padding: var(--space-xl) var(--space-md); }
  .benefits__title { font-size: 1.75rem; }
  .benefits__metrics { grid-template-columns: 1fr; gap: var(--space-sm); }
  .benefits__metric { flex-direction: row; justify-content: space-between; text-align: left; display: flex; align-items: center; }
  .benefits__metric-label { margin-top: 0; margin-left: var(--space-sm); }
  .benefits__cards { padding: var(--space-lg) var(--space-md); }
  .benefits__card { padding: var(--space-lg); }
  .benefits__card-icon { width: 48px; height: 48px; }
}

@media (max-width: 375px) {
  .benefits__title { font-size: 1.5rem; }
  .benefits__metric-value { font-size: var(--fs-lg); }
  .benefits__card-title { font-size: var(--fs-base); }
}

/* ----- Transform Section (Before/After Gallery) ----- */
.transform {
  padding: var(--space-4xl) 0;
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-gray-100) 100%);
}
.transform__container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* Header */
.transform__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--space-3xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-gray-200);
}
.transform__header-content { max-width: 600px; }
.transform__eyebrow {
  display: inline-block;
  color: var(--color-accent);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-sm);
}
.transform__title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  color: var(--color-dark);
  line-height: 1.2;
  margin-bottom: var(--space-md);
}
.transform__title span {
  color: var(--color-primary);
}
.transform__lead {
  font-size: var(--fs-md);
  color: var(--color-gray-600);
  line-height: 1.7;
}
.transform__header-stats {
  display: flex;
  gap: var(--space-xl);
}
.transform__stat {
  text-align: center;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.transform__stat-num {
  display: block;
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
}
.transform__stat-label {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-gray-500);
  margin-top: var(--space-xs);
}

/* Projects Showcase */
.transform__showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

/* Individual Project */
.transform__project {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transition: all var(--transition-base);
}
.transform__project:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.transform__project--featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
}
.transform__project--featured .transform__images { height: 100%; min-height: 350px; }
.transform__project--featured .transform__details { display: flex; flex-direction: column; justify-content: center; }

/* Images Container */
.transform__images {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 220px;
}
.transform__image {
  position: relative;
  overflow: hidden;
}
.transform__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.transform__project:hover .transform__image img {
  transform: scale(1.05);
}
.transform__tag {
  position: absolute;
  bottom: var(--space-md);
  padding: 6px 14px;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-full);
  z-index: 2;
}
.transform__tag--before {
  left: var(--space-md);
  background: rgba(0, 0, 0, 0.7);
  color: var(--color-white);
}
.transform__tag--after {
  right: var(--space-md);
  background: var(--color-primary);
  color: var(--color-white);
}
.transform__arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  background: var(--color-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  box-shadow: 0 4px 15px rgba(255, 109, 0, 0.4);
}
.transform__arrow img {
  filter: brightness(0) invert(1);
}

/* Details */
.transform__details {
  padding: var(--space-xl);
}
.transform__badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-white);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 600;
  margin-bottom: var(--space-sm);
}
.transform__project-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: var(--space-sm);
  line-height: 1.3;
}
.transform__project-desc {
  font-size: var(--fs-sm);
  color: var(--color-gray-600);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}
.transform__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}
.transform__meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--color-gray-500);
}
.transform__meta img {
  opacity: 0.6;
}

/* CTA */
.transform__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  margin-top: var(--space-3xl);
  padding: var(--space-xl);
  background: var(--color-dark);
  border-radius: var(--radius-xl);
}
.transform__cta p {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--color-white);
  margin: 0;
}
.transform__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-accent);
  color: var(--color-white);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-full);
  font-weight: 700;
  text-decoration: none;
  transition: all var(--transition-base);
}
.transform__cta-btn:hover {
  background: var(--color-primary);
  transform: translateX(4px);
}
.transform__cta-btn img {
  filter: brightness(0) invert(1);
}

/* Transform Section Responsive */
@media (max-width: 1024px) {
  .transform__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xl);
  }
  .transform__project--featured {
    grid-template-columns: 1fr;
  }
  .transform__project--featured .transform__images { min-height: 280px; }
}

@media (max-width: 768px) {
  .transform__showcase { grid-template-columns: 1fr; }
  .transform__header-stats { width: 100%; justify-content: flex-start; }
  .transform__cta { flex-direction: column; text-align: center; gap: var(--space-md); }
}

@media (max-width: 480px) {
  .transform { padding: var(--space-2xl) 0; }
  .transform__container { padding: 0 var(--space-md); }
  .transform__title { font-size: 1.5rem; }
  .transform__images { height: 180px; }
  .transform__arrow { width: 36px; height: 36px; }
  .transform__arrow img { width: 18px; height: 18px; }
  .transform__details { padding: var(--space-lg); }
  .transform__project-title { font-size: var(--fs-base); }
  .transform__cta { padding: var(--space-lg); border-radius: var(--radius-lg); }
  .transform__cta p { font-size: var(--fs-base); }
}

@media (max-width: 375px) {
  .transform__stat { padding: var(--space-sm) var(--space-md); }
  .transform__stat-num { font-size: var(--fs-xl); }
}

/* ----- Coverage Section (Nationwide) ----- */
.coverage {
  background: var(--color-gray-100);
  overflow: hidden;
}

/* Hero Banner */
.coverage__hero {
  background: linear-gradient(135deg, var(--color-dark) 0%, #1b263b 50%, var(--color-primary-dark) 100%);
  padding: var(--space-3xl) var(--space-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.coverage__hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
  pointer-events: none;
}
.coverage__hero-content {
  position: relative;
  z-index: 1;
}
.coverage__badge {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-white);
  padding: 6px 16px;
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-md);
}
.coverage__title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  color: var(--color-white);
  line-height: 1.2;
  margin-bottom: var(--space-sm);
}
.coverage__title span {
  background: linear-gradient(135deg, var(--color-accent) 0%, #ffc107 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.coverage__subtitle {
  font-size: var(--fs-md);
  color: rgba(255, 255, 255, 0.7);
}
.coverage__hero-stats {
  display: flex;
  gap: var(--space-lg);
  position: relative;
  z-index: 1;
}
.coverage__hero-stat {
  text-align: center;
  padding: var(--space-md) var(--space-lg);
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.coverage__hero-num {
  display: block;
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--color-white);
  line-height: 1;
}
.coverage__hero-label {
  display: block;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.6);
  margin-top: var(--space-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Container */
.coverage__container {
  max-width: 1300px;
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-lg);
}

/* Main Layout: Map + Primary Region */
.coverage__main {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
  align-items: start;
}

/* Map */
.coverage__map {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: linear-gradient(180deg, #e3f2fd 0%, #bbdefb 100%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.coverage__map img {
  width: 100%;
  height: auto;
  display: block;
  filter: saturate(0.8) brightness(1.05);
}
.coverage__map-pins {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.coverage__pin {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
}
.coverage__pin-dot {
  width: 12px;
  height: 12px;
  background: var(--color-primary);
  border-radius: 50%;
  border: 2px solid var(--color-white);
  box-shadow: 0 2px 8px rgba(21, 101, 192, 0.4);
  animation: pin-pulse 2s ease-in-out infinite;
}
.coverage__pin--oslo .coverage__pin-dot {
  width: 18px;
  height: 18px;
  background: var(--color-accent);
  box-shadow: 0 2px 12px rgba(255, 109, 0, 0.5);
}
.coverage__pin-label {
  background: var(--color-accent);
  color: var(--color-white);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
@keyframes pin-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

/* Primary Region (Oslo) */
.coverage__region--primary {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  border: 2px solid var(--color-primary);
  position: relative;
}
.coverage__region--primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.coverage__region-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.coverage__region-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.coverage__region-icon img {
  filter: brightness(0) invert(1);
}
.coverage__region-info h3 {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--color-dark);
  margin: 0;
}
.coverage__region-tag {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-white);
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 600;
  margin-top: 4px;
}
.coverage__areas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.coverage__areas span {
  display: inline-block;
  padding: 8px 16px;
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: all var(--transition-fast);
}
.coverage__areas span:hover {
  background: var(--color-primary);
  color: var(--color-white);
}
.coverage__areas span:last-child {
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 600;
}
.coverage__region-meta {
  display: flex;
  gap: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-gray-200);
}
.coverage__region-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--color-gray-600);
}
.coverage__region-meta img {
  opacity: 0.6;
}

/* Regions Grid */
.coverage__regions-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.coverage__region {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: all var(--transition-base);
}
.coverage__region:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}
.coverage__region .coverage__region-header {
  margin-bottom: var(--space-md);
}
.coverage__region .coverage__region-header h3 {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--color-dark);
  margin: 0;
}
.coverage__region .coverage__areas {
  margin-bottom: 0;
}
.coverage__region .coverage__areas span {
  padding: 4px 10px;
  font-size: var(--fs-xs);
  background: var(--color-gray-50);
}
.coverage__region .coverage__areas span:hover {
  background: var(--color-primary-light);
}
.coverage__region .coverage__areas span:last-child {
  background: var(--color-gray-50);
  color: var(--color-gray-700);
  font-weight: 500;
}

/* CTA Banner */
.coverage__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-dark);
  border-radius: var(--radius-xl);
  padding: var(--space-xl) var(--space-2xl);
  gap: var(--space-xl);
}
.coverage__cta-content h3 {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--color-white);
  margin: 0 0 var(--space-xs);
}
.coverage__cta-content p {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  max-width: 500px;
}
.coverage__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-accent);
  color: var(--color-white);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-full);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--transition-base);
}
.coverage__cta-btn:hover {
  background: var(--color-primary);
  transform: translateX(4px);
}
.coverage__cta-btn img {
  filter: brightness(0) invert(1);
}

/* Coverage Section Responsive */
@media (max-width: 1200px) {
  .coverage__main { grid-template-columns: 350px 1fr; }
  .coverage__regions-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1024px) {
  .coverage__hero {
    flex-direction: column;
    text-align: center;
    gap: var(--space-xl);
  }
  .coverage__hero-stats { justify-content: center; }
  .coverage__main { grid-template-columns: 1fr; }
  .coverage__map { max-width: 400px; margin: 0 auto; }
  .coverage__regions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .coverage__hero { padding: var(--space-2xl) var(--space-md); }
  .coverage__hero-stats { flex-wrap: wrap; }
  .coverage__container { padding: var(--space-2xl) var(--space-md); }
  .coverage__map { max-width: 320px; }
  .coverage__region--primary { padding: var(--space-lg); }
  .coverage__regions-grid { grid-template-columns: 1fr 1fr; }
  .coverage__cta {
    flex-direction: column;
    text-align: center;
    padding: var(--space-xl);
  }
  .coverage__cta-content p { max-width: 100%; }
}

@media (max-width: 480px) {
  .coverage__title { font-size: 1.5rem; }
  .coverage__hero-stat { padding: var(--space-sm) var(--space-md); }
  .coverage__hero-num { font-size: var(--fs-xl); }
  .coverage__map { max-width: 280px; }
  .coverage__pin-label { display: none; }
  .coverage__regions-grid { grid-template-columns: 1fr; }
  .coverage__region { padding: var(--space-md); }
  .coverage__areas span { padding: 6px 12px; }
  .coverage__region-meta { flex-direction: column; gap: var(--space-sm); }
}

@media (max-width: 375px) {
  .coverage__hero-stats { gap: var(--space-sm); }
  .coverage__hero-stat { flex: 1; min-width: 80px; }
  .coverage__map { max-width: 260px; }
}

/* ----- Workflow Section ----- */
.workflow {
  padding: var(--space-4xl) 0;
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-gray-100) 100%);
  position: relative;
  overflow: hidden;
}
.workflow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent), var(--color-primary));
}
.workflow__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* Header */
.workflow__header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}
.workflow__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-xs) var(--space-lg);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: var(--space-md);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.workflow__title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  color: var(--color-dark);
  margin-bottom: var(--space-sm);
  line-height: 1.2;
}
.workflow__title span {
  color: var(--color-primary);
  position: relative;
}
.workflow__title span::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--color-accent);
  border-radius: 2px;
}
.workflow__subtitle {
  font-size: var(--fs-lg);
  color: var(--color-gray-600);
}

/* Progress bar */
.workflow__progress {
  position: relative;
  margin-bottom: var(--space-3xl);
  padding: 0 var(--space-xl);
}
.workflow__progress-line {
  position: absolute;
  top: 50%;
  left: var(--space-xl);
  right: var(--space-xl);
  height: 4px;
  background: var(--color-gray-200);
  border-radius: 2px;
  transform: translateY(-50%);
}
.workflow__progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  border-radius: 2px;
  animation: progressFill 2s ease-out forwards;
}
@keyframes progressFill {
  from { width: 0; }
  to { width: 100%; }
}
.workflow__progress-dots {
  position: relative;
  display: flex;
  justify-content: space-between;
  z-index: 1;
}
.workflow__dot {
  width: 20px;
  height: 20px;
  background: var(--color-white);
  border: 3px solid var(--color-gray-300);
  border-radius: 50%;
  transition: all 0.3s ease;
}
.workflow__dot--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.2);
}

/* Steps grid */
.workflow__steps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-3xl);
}
.workflow__step {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
  box-shadow: var(--shadow-md);
  position: relative;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}
.workflow__step:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary);
}
.workflow__step-num {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.3);
}
.workflow__step-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--color-gray-100), var(--color-gray-200));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--space-md) auto var(--space-md);
}
.workflow__step-icon img {
  width: 28px;
  height: 28px;
  filter: brightness(0) saturate(100%);
  opacity: 0.7;
}
.workflow__step-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: var(--space-xs);
  line-height: 1.3;
}
.workflow__step-desc {
  font-size: var(--fs-xs);
  color: var(--color-gray-600);
  line-height: 1.5;
  margin-bottom: var(--space-sm);
}
.workflow__step-time {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--fs-xs);
  color: var(--color-dark);
  background: var(--color-gray-200);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  font-weight: 600;
}
.workflow__step-time img {
  width: 14px;
  height: 14px;
  opacity: 0.6;
}

/* Highlight step */
.workflow__step--highlight {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  border-color: transparent;
}
.workflow__step--highlight:hover {
  border-color: transparent;
}
.workflow__step--highlight .workflow__step-num {
  background: var(--color-white);
  color: var(--color-primary);
}
.workflow__step--highlight .workflow__step-icon {
  background: rgba(255,255,255,0.2);
}
.workflow__step--highlight .workflow__step-icon img {
  filter: brightness(0) invert(1);
  opacity: 1;
}
.workflow__step--highlight .workflow__step-title,
.workflow__step--highlight .workflow__step-desc {
  color: var(--color-white);
}
.workflow__step-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: rgba(255,255,255,0.25);
  color: var(--color-white);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.workflow__step-badge img {
  width: 14px;
  height: 14px;
  filter: brightness(0) invert(1);
}

/* CTA */
.workflow__cta {
  text-align: center;
}
.workflow__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-accent);
  color: var(--color-white);
  padding: var(--space-md) var(--space-2xl);
  border-radius: var(--radius-md);
  font-size: var(--fs-md);
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(var(--color-accent-rgb), 0.3);
}
.workflow__cta-btn:hover {
  background: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), 0.3);
}
.workflow__cta-btn img {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}
.workflow__cta-note {
  display: block;
  margin-top: var(--space-sm);
  font-size: var(--fs-sm);
  color: var(--color-gray-500);
}

/* Responsive */
@media (max-width: 1200px) {
  .workflow__steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
  }
  .workflow__progress {
    display: none;
  }
}

@media (max-width: 768px) {
  .workflow__steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .workflow__step {
    padding: var(--space-md);
  }
  .workflow__step-icon {
    width: 48px;
    height: 48px;
  }
  .workflow__step-icon img {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 480px) {
  .workflow {
    padding: var(--space-3xl) 0;
  }
  .workflow__steps {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .workflow__step {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    gap: 0 var(--space-md);
    text-align: left;
    padding: var(--space-lg);
  }
  .workflow__step-num {
    position: static;
    transform: none;
    grid-row: 1 / 3;
    align-self: center;
    width: 40px;
    height: 40px;
    font-size: var(--fs-md);
  }
  .workflow__step-icon {
    display: none;
  }
  .workflow__step-title {
    grid-column: 2;
    margin-bottom: var(--space-xs);
  }
  .workflow__step-desc {
    grid-column: 2;
    margin-bottom: var(--space-sm);
  }
  .workflow__step-time,
  .workflow__step-badge {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .workflow__cta-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 375px) {
  .workflow__title { font-size: 1.5rem; }
  .workflow__subtitle { font-size: var(--fs-md); }
}

/* ----- Cases Section ----- */
.cases {
  padding: var(--space-4xl) 0;
  background: var(--color-dark);
  position: relative;
  overflow: hidden;
}
.cases::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(var(--color-primary-rgb), 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(var(--color-accent-rgb), 0.1) 0%, transparent 50%);
  pointer-events: none;
}
.cases__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  position: relative;
  z-index: 1;
}

/* Header */
.cases__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--space-3xl);
  gap: var(--space-xl);
}
.cases__header-left { flex: 1; }
.cases__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: rgba(var(--color-primary-rgb), 0.2);
  color: var(--color-primary);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: var(--space-md);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cases__badge img {
  filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(1200%) hue-rotate(200deg);
}
.cases__title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  color: var(--color-white);
  margin-bottom: var(--space-sm);
  line-height: 1.2;
}
.cases__title span { color: var(--color-accent); }
.cases__subtitle {
  font-size: var(--fs-md);
  color: var(--color-gray-400);
}
.cases__counter {
  text-align: right;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
}
.cases__counter-num {
  display: block;
  font-size: var(--fs-3xl);
  font-weight: 800;
  color: var(--color-accent);
  line-height: 1;
}
.cases__counter-text {
  font-size: var(--fs-sm);
  color: var(--color-gray-400);
}

/* Showcase grid */
.cases__showcase {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-3xl);
}

/* Featured project */
.cases__featured {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cases__featured-media {
  position: relative;
  height: 280px;
  overflow: hidden;
}
.cases__featured-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.cases__featured:hover .cases__featured-media img {
  transform: scale(1.05);
}
.cases__featured-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-lg);
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
}
.cases__featured-category {
  display: inline-block;
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.cases__featured-content {
  padding: var(--space-xl);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.cases__featured-meta {
  display: flex;
  gap: var(--space-lg);
  margin-bottom: var(--space-md);
}
.cases__meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--fs-sm);
  color: var(--color-gray-500);
}
.cases__meta-item img {
  opacity: 0.6;
}
.cases__featured-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: var(--space-sm);
}
.cases__featured-desc {
  font-size: var(--fs-md);
  color: var(--color-gray-600);
  line-height: 1.6;
  margin-bottom: var(--space-lg);
  flex: 1;
}
.cases__featured-specs {
  display: flex;
  gap: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-gray-200);
  list-style: none;
}
.cases__featured-specs li {
  text-align: center;
}
.cases__featured-specs li strong {
  display: block;
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
}
.cases__featured-specs li span {
  font-size: var(--fs-sm);
  color: var(--color-gray-500);
}

/* Side cards */
.cases__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
.cases__card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.3s ease;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.cases__card:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.2);
  transform: translateY(-5px);
}
.cases__card-image {
  position: relative;
  height: 140px;
  overflow: hidden;
}
.cases__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.cases__card:hover .cases__card-image img {
  transform: scale(1.1);
}
.cases__card-tag {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  background: var(--color-accent);
  color: var(--color-white);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.cases__card-body {
  padding: var(--space-lg);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.cases__card-location {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--fs-xs);
  color: var(--color-gray-400);
  margin-bottom: var(--space-sm);
}
.cases__card-location img {
  opacity: 0.6;
  filter: brightness(0) invert(1);
}
.cases__card-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: var(--space-xs);
  line-height: 1.3;
}
.cases__card-desc {
  font-size: var(--fs-sm);
  color: var(--color-gray-400);
  line-height: 1.5;
  flex: 1;
}
.cases__card-stats {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.1);
}
.cases__card-stats span {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--fs-xs);
  color: var(--color-gray-400);
}
.cases__card-stats img {
  opacity: 0.6;
  filter: brightness(0) invert(1);
}

/* CTA Banner */
.cases__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  border-radius: var(--radius-xl);
  padding: var(--space-xl) var(--space-2xl);
  gap: var(--space-xl);
}
.cases__cta-content h3 {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: var(--space-xs);
}
.cases__cta-content p {
  font-size: var(--fs-md);
  color: rgba(255,255,255,0.9);
}
.cases__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-white);
  color: var(--color-primary);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-md);
  font-size: var(--fs-md);
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  white-space: nowrap;
}
.cases__cta-btn:hover {
  background: var(--color-dark);
  color: var(--color-white);
  transform: translateY(-2px);
}
.cases__cta-btn img {
  filter: brightness(0) saturate(100%) invert(25%) sepia(98%) saturate(1500%) hue-rotate(200deg);
  transition: filter 0.3s ease;
}
.cases__cta-btn:hover img {
  filter: brightness(0) invert(1);
}

/* Responsive */
@media (max-width: 1024px) {
  .cases__showcase {
    grid-template-columns: 1fr;
  }
  .cases__side {
    flex-direction: row;
  }
  .cases__card-image { height: 120px; }
}

@media (max-width: 768px) {
  .cases__header {
    flex-direction: column;
    align-items: flex-start;
  }
  .cases__counter {
    text-align: left;
    width: 100%;
  }
  .cases__side {
    flex-direction: column;
  }
  .cases__featured-media { height: 220px; }
  .cases__cta {
    flex-direction: column;
    text-align: center;
    padding: var(--space-xl);
  }
}

@media (max-width: 480px) {
  .cases { padding: var(--space-3xl) 0; }
  .cases__featured-specs {
    gap: var(--space-lg);
  }
  .cases__featured-specs li strong {
    font-size: var(--fs-xl);
  }
  .cases__cta-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 375px) {
  .cases__title { font-size: 1.5rem; }
  .cases__featured-content { padding: var(--space-lg); }
  .cases__featured-meta { flex-direction: column; gap: var(--space-sm); }
}

/* ----- Rates Section ----- */
.rates {
  padding: var(--space-4xl) 0;
  background: linear-gradient(180deg, var(--color-gray-100) 0%, var(--color-white) 100%);
}
.rates__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* Header */
.rates__header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}
.rates__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-xs) var(--space-lg);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: var(--space-md);
}
.rates__badge img {
  filter: brightness(0) invert(1);
}
.rates__title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  color: var(--color-dark);
  margin-bottom: var(--space-sm);
}
.rates__title span {
  color: var(--color-primary);
}
.rates__subtitle {
  font-size: var(--fs-md);
  color: var(--color-gray-600);
}

/* Categories tabs */
.rates__categories {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
  flex-wrap: wrap;
}
.rates__category {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-white);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 120px;
}
.rates__category:hover {
  border-color: var(--color-primary);
}
.rates__category--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.rates__category-icon {
  width: 48px;
  height: 48px;
  background: var(--color-gray-100);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.rates__category--active .rates__category-icon {
  background: rgba(255,255,255,0.2);
}
.rates__category--active .rates__category-icon img {
  filter: brightness(0) invert(1);
}
.rates__category span {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-dark);
}
.rates__category--active span {
  color: var(--color-white);
}

/* Price cards grid */
.rates__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-3xl);
}
.rates__card {
  background: var(--color-white);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  position: relative;
  transition: all 0.3s ease;
}
.rates__card:hover {
  border-color: var(--color-primary);
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}
.rates__card--featured {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  border-color: transparent;
}
.rates__card--featured:hover {
  border-color: transparent;
}
.rates__card-badge {
  position: absolute;
  top: -12px;
  right: var(--space-lg);
  background: var(--color-accent);
  color: var(--color-white);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
}
.rates__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}
.rates__card-icon {
  width: 48px;
  height: 48px;
  background: var(--color-gray-100);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rates__card--featured .rates__card-icon {
  background: rgba(255,255,255,0.2);
}
.rates__card--featured .rates__card-icon img {
  filter: brightness(0) invert(1);
}
.rates__card-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-gray-500);
  background: var(--color-gray-100);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
}
.rates__card--featured .rates__card-label {
  background: rgba(255,255,255,0.2);
  color: var(--color-white);
}
.rates__card-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: var(--space-xs);
}
.rates__card--featured .rates__card-title {
  color: var(--color-white);
}
.rates__card-desc {
  font-size: var(--fs-sm);
  color: var(--color-gray-600);
  margin-bottom: var(--space-lg);
  line-height: 1.5;
}
.rates__card--featured .rates__card-desc {
  color: rgba(255,255,255,0.85);
}
.rates__card-price {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-gray-200);
}
.rates__card--featured .rates__card-price {
  border-color: rgba(255,255,255,0.2);
}
.rates__price-from {
  font-size: var(--fs-sm);
  color: var(--color-gray-500);
  display: block;
}
.rates__card--featured .rates__price-from {
  color: rgba(255,255,255,0.7);
}
.rates__price-amount {
  font-size: var(--fs-3xl);
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
}
.rates__card--featured .rates__price-amount {
  color: var(--color-white);
}
.rates__price-currency {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--color-gray-600);
  margin-left: var(--space-xs);
}
.rates__card--featured .rates__price-currency {
  color: rgba(255,255,255,0.85);
}
.rates__card-features {
  list-style: none;
}
.rates__card-features li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-sm);
  color: var(--color-gray-700);
  padding: var(--space-xs) 0;
}
.rates__card--featured .rates__card-features li {
  color: rgba(255,255,255,0.9);
}
.rates__card-features img {
  filter: brightness(0) saturate(100%) invert(35%) sepia(85%) saturate(1500%) hue-rotate(85deg);
}
.rates__card--featured .rates__card-features img {
  filter: brightness(0) invert(1);
}

/* Services list */
.rates__services {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-2xl);
}
.rates__services-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-md);
  border-bottom: 2px solid var(--color-gray-200);
}
.rates__services-title img {
  opacity: 0.6;
}
.rates__services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}
.rates__service {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-gray-100);
  border-radius: var(--radius-md);
  transition: all 0.3s ease;
}
.rates__service:hover {
  background: var(--color-gray-200);
}
.rates__service--highlight {
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.1), rgba(var(--color-accent-rgb), 0.1));
  border: 1px solid rgba(var(--color-primary-rgb), 0.2);
}
.rates__service--highlight:hover {
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.15), rgba(var(--color-accent-rgb), 0.15));
}
.rates__service-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.rates__service-name {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--color-dark);
}
.rates__service-desc {
  font-size: var(--fs-sm);
  color: var(--color-gray-500);
}
.rates__service-price {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
}

/* Footer */
.rates__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  background: var(--color-gray-100);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
}
.rates__footer-info {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex: 1;
}
.rates__footer-icon {
  width: 40px;
  height: 40px;
  background: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rates__footer-info p {
  font-size: var(--fs-sm);
  color: var(--color-gray-600);
  line-height: 1.5;
}
.rates__footer-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-md);
  font-size: var(--fs-md);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  white-space: nowrap;
}
.rates__footer-btn:hover {
  background: var(--color-accent);
  transform: translateY(-2px);
}
.rates__footer-btn img {
  filter: brightness(0) invert(1);
}

/* Responsive */
@media (max-width: 1024px) {
  .rates__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .rates__services-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .rates__categories {
    gap: var(--space-sm);
  }
  .rates__category {
    padding: var(--space-sm) var(--space-md);
    min-width: auto;
    flex: 1;
  }
  .rates__category-icon {
    width: 40px;
    height: 40px;
  }
  .rates__grid {
    grid-template-columns: 1fr;
  }
  .rates__footer {
    flex-direction: column;
    text-align: center;
  }
  .rates__footer-info {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .rates { padding: var(--space-3xl) 0; }
  .rates__categories {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: var(--space-sm);
    -webkit-overflow-scrolling: touch;
  }
  .rates__category {
    flex: 0 0 auto;
  }
  .rates__service {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }
  .rates__footer-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 375px) {
  .rates__title { font-size: 1.5rem; }
  .rates__card { padding: var(--space-lg); }
  .rates__services { padding: var(--space-lg); }
}

/* ----- Guarantee Section ----- */
.guarantee {
  padding: var(--space-4xl) 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}
.guarantee__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.guarantee__bg-pattern {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.1) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.08) 0%, transparent 40%);
}
.guarantee__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  position: relative;
  z-index: 1;
}

/* Hero block */
.guarantee__hero {
  display: flex;
  align-items: center;
  gap: var(--space-3xl);
  margin-bottom: var(--space-3xl);
}
.guarantee__hero-badge {
  position: relative;
  width: 180px;
  height: 180px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.guarantee__hero-years {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  background: var(--color-white);
  border-radius: 50%;
  z-index: 2;
  position: relative;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
.guarantee__years-num {
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1;
  color: var(--color-primary);
}
.guarantee__years-text {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--color-accent);
}
.guarantee__hero-ring {
  position: absolute;
  width: 150px;
  height: 150px;
  border: 3px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  animation: ringPulse 3s ease-in-out infinite;
}
.guarantee__hero-ring--outer {
  width: 180px;
  height: 180px;
  border-color: rgba(255,255,255,0.25);
  animation-delay: 0.5s;
}
@keyframes ringPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.6; }
}
.guarantee__hero-content { flex: 1; }
.guarantee__eyebrow {
  display: inline-block;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: var(--space-md);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.guarantee__title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: var(--space-md);
}
.guarantee__title span {
  color: var(--color-accent);
}
.guarantee__desc {
  font-size: var(--fs-lg);
  color: rgba(255,255,255,0.8);
  line-height: 1.6;
  max-width: 500px;
}

/* Features */
.guarantee__features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-3xl);
}
.guarantee__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--radius-lg);
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}
.guarantee__feature:hover {
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.5);
  transform: translateY(-3px);
}
.guarantee__feature-icon {
  width: 56px;
  height: 56px;
  background: var(--color-white);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.guarantee__feature-icon img {
  filter: brightness(0) saturate(100%);
  opacity: 0.8;
}
.guarantee__feature-content h3 {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: var(--space-xs);
}
.guarantee__feature-content p {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.85);
}

/* Certifications */
.guarantee__certs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}
.guarantee__cert {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  transition: all 0.3s ease;
}
.guarantee__cert:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.guarantee__cert-logo {
  width: 64px;
  height: 64px;
  background: var(--color-gray-100);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.guarantee__cert-info {
  flex: 1;
}
.guarantee__cert-info h4 {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: var(--space-xs);
}
.guarantee__cert-info p {
  font-size: var(--fs-sm);
  color: var(--color-gray-500);
}
.guarantee__cert-status {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: var(--color-white);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* CTA */
.guarantee__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  padding: var(--space-xl);
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(10px);
}
.guarantee__cta p {
  font-size: var(--fs-lg);
  color: var(--color-white);
  font-weight: 500;
}
.guarantee__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-white);
  color: var(--color-primary);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-md);
  font-size: var(--fs-md);
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
.guarantee__cta-btn:hover {
  background: var(--color-dark);
  color: var(--color-white);
  transform: translateY(-2px);
}
.guarantee__cta-btn img {
  filter: brightness(0) saturate(100%) invert(25%) sepia(98%) saturate(1500%) hue-rotate(200deg);
  transition: filter 0.3s ease;
}
.guarantee__cta-btn:hover img {
  filter: brightness(0) invert(1);
}

/* Responsive */
@media (max-width: 1024px) {
  .guarantee__features {
    grid-template-columns: repeat(2, 1fr);
  }
  .guarantee__certs {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .guarantee__hero {
    flex-direction: column;
    text-align: center;
    gap: var(--space-xl);
  }
  .guarantee__hero-badge {
    width: 150px;
    height: 150px;
  }
  .guarantee__hero-years {
    width: 100px;
    height: 100px;
  }
  .guarantee__years-num { font-size: 2.5rem; }
  .guarantee__hero-ring { width: 125px; height: 125px; }
  .guarantee__hero-ring--outer { width: 150px; height: 150px; }
  .guarantee__desc { max-width: none; }
  .guarantee__features {
    grid-template-columns: 1fr;
  }
  .guarantee__feature {
    text-align: left;
  }
  .guarantee__cta {
    flex-direction: column;
    text-align: center;
    gap: var(--space-md);
  }
}

@media (max-width: 480px) {
  .guarantee { padding: var(--space-3xl) 0; }
  .guarantee__title { font-size: 1.75rem; }
  .guarantee__cert {
    flex-direction: column;
    text-align: center;
  }
  .guarantee__cert-status {
    margin-top: var(--space-sm);
  }
  .guarantee__cta-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 375px) {
  .guarantee__hero-badge {
    width: 130px;
    height: 130px;
  }
  .guarantee__hero-years {
    width: 85px;
    height: 85px;
  }
  .guarantee__years-num { font-size: 2rem; }
  .guarantee__hero-ring { width: 105px; height: 105px; }
  .guarantee__hero-ring--outer { width: 130px; height: 130px; }
}

/* ----- Issues Section ----- */
.issues {
  padding: var(--space-4xl) 0;
  background: var(--color-white);
}
.issues__container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* Header */
.issues__header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}
.issues__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-error);
  color: var(--color-white);
  padding: var(--space-xs) var(--space-lg);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: var(--space-md);
}
.issues__badge img {
  filter: brightness(0) invert(1);
}
.issues__title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  color: var(--color-dark);
  margin-bottom: var(--space-sm);
}
.issues__title span {
  color: var(--color-error);
}
.issues__subtitle {
  font-size: var(--fs-md);
  color: var(--color-gray-600);
}

/* Accordion list */
.issues__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-3xl);
}
.issues__item {
  background: var(--color-gray-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.3s ease;
}
.issues__item:hover {
  box-shadow: var(--shadow-md);
}
.issues__item--urgent {
  background: linear-gradient(135deg, rgba(var(--color-error-rgb), 0.08), rgba(var(--color-error-rgb), 0.03));
  border: 1px solid rgba(var(--color-error-rgb), 0.2);
}
.issues__item-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  cursor: pointer;
}
.issues__item-icon {
  width: 56px;
  height: 56px;
  background: var(--color-white);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}
.issues__item--urgent .issues__item-icon {
  background: var(--color-error);
}
.issues__item--urgent .issues__item-icon img {
  filter: brightness(0) invert(1);
}
.issues__item-info {
  flex: 1;
}
.issues__item-label {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-xs);
}
.issues__item--urgent .issues__item-label {
  color: var(--color-error);
}
.issues__item-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-dark);
}
.issues__item-toggle {
  width: 40px;
  height: 40px;
  background: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}
.issues__item.active .issues__item-toggle {
  transform: rotate(180deg);
}
.issues__item-toggle img {
  opacity: 0.5;
}

/* Content */
.issues__item-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.issues__item.active .issues__item-content {
  max-height: 200px;
}
.issues__item-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  padding: 0 var(--space-lg) var(--space-lg);
}
.issues__item-symptom,
.issues__item-solution {
  padding: var(--space-md);
  border-radius: var(--radius-md);
}
.issues__item-symptom {
  background: rgba(var(--color-error-rgb), 0.08);
}
.issues__item-solution {
  background: rgba(34, 197, 94, 0.08);
}
.issues__label {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-xs);
}
.issues__label--red {
  color: var(--color-error);
}
.issues__label--green {
  color: #22c55e;
}
.issues__item-symptom p,
.issues__item-solution p {
  font-size: var(--fs-sm);
  color: var(--color-gray-700);
  line-height: 1.5;
}

/* Emergency CTA */
.issues__emergency {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  background: linear-gradient(135deg, var(--color-error), #b91c1c);
  border-radius: var(--radius-xl);
  padding: var(--space-xl) var(--space-2xl);
  color: var(--color-white);
}
.issues__emergency-icon {
  width: 64px;
  height: 64px;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: pulse-emergency 2s ease-in-out infinite;
}
@keyframes pulse-emergency {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.issues__emergency-icon img {
  filter: brightness(0) invert(1);
}
.issues__emergency-content {
  flex: 1;
}
.issues__emergency-content h3 {
  font-size: var(--fs-xl);
  font-weight: 700;
  margin-bottom: var(--space-xs);
  color: var(--color-white);
}
.issues__emergency-content p {
  font-size: var(--fs-md);
  opacity: 0.9;
}
.issues__emergency-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  color: var(--color-error);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-md);
  font-size: var(--fs-lg);
  font-weight: 800;
  text-decoration: none;
  transition: all 0.3s ease;
  white-space: nowrap;
}
.issues__emergency-btn:hover {
  background: var(--color-dark);
  color: var(--color-white);
  transform: scale(1.02);
}

/* Responsive */
@media (max-width: 768px) {
  .issues__item-row {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .issues__item.active .issues__item-content {
    max-height: 350px;
  }
  .issues__emergency {
    flex-direction: column;
    text-align: center;
    padding: var(--space-xl);
  }
}

@media (max-width: 480px) {
  .issues { padding: var(--space-3xl) 0; }
  .issues__item-header {
    padding: var(--space-md);
  }
  .issues__item-icon {
    width: 48px;
    height: 48px;
  }
  .issues__item-title {
    font-size: var(--fs-md);
  }
  .issues__emergency-btn {
    width: 100%;
  }
}

@media (max-width: 375px) {
  .issues__title { font-size: 1.5rem; }
  .issues__item-toggle { display: none; }
}

/* ----- Smart Home Section ----- */
.smart-home { padding: var(--space-4xl) 0; background: var(--color-gray-100); }
.smart-home__container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-lg); }
.smart-home__head { text-align: center; margin-bottom: var(--space-3xl); }
.smart-home__tag { display: inline-block; background: var(--color-primary); color: var(--color-white); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-full); font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--space-md); }
.smart-home__title { font-size: var(--fs-3xl); font-weight: 700; color: var(--color-dark); margin-bottom: var(--space-md); }
.smart-home__lead { font-size: var(--fs-md); color: var(--color-gray-600); max-width: 700px; margin: 0 auto; }
.smart-home__content { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: start; margin-bottom: var(--space-3xl); }
.smart-home__image { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.smart-home__image img { width: 100%; height: auto; display: block; }
.smart-home__image-badge { position: absolute; bottom: var(--space-lg); right: var(--space-lg); background: var(--color-white); border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg); box-shadow: var(--shadow-lg); text-align: center; }
.smart-home__image-badge-num { display: block; font-size: var(--fs-2xl); font-weight: 800; color: var(--color-primary); }
.smart-home__image-badge-text { display: block; font-size: var(--fs-sm); color: var(--color-gray-600); }
.smart-home__features { display: flex; flex-direction: column; gap: var(--space-lg); }
.smart-home__feature { display: flex; gap: var(--space-lg); background: var(--color-white); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-sm); transition: all var(--transition-base); }
.smart-home__feature:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.smart-home__feature-icon { width: 56px; height: 56px; background: var(--color-primary); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.smart-home__feature-icon img { filter: brightness(0) invert(1); }
.smart-home__feature-content { flex: 1; }
.smart-home__feature-content h3 { font-size: var(--fs-lg); font-weight: 700; color: var(--color-dark); margin-bottom: var(--space-xs); }
.smart-home__feature-content p { font-size: var(--fs-sm); color: var(--color-gray-600); line-height: 1.6; margin-bottom: var(--space-sm); }
.smart-home__feature-brands { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.smart-home__feature-brands span { display: inline-block; background: var(--color-gray-100); color: var(--color-gray-700); padding: 2px var(--space-sm); border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: 500; }
.smart-home__cta { display: flex; align-items: center; justify-content: space-between; background: var(--color-primary); border-radius: var(--radius-lg); padding: var(--space-xl); flex-wrap: wrap; gap: var(--space-lg); }
.smart-home__cta-content h3 { font-size: var(--fs-xl); font-weight: 700; color: var(--color-white); margin-bottom: var(--space-xs); }
.smart-home__cta-content p { font-size: var(--fs-md); color: rgba(255, 255, 255, 0.9); }
.smart-home__cta-btn { display: inline-flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-xl); background: var(--color-white); color: var(--color-primary); border-radius: var(--radius-md); font-weight: 600; text-decoration: none; transition: all var(--transition-base); }
.smart-home__cta-btn:hover { background: var(--color-dark); color: var(--color-white); }
.smart-home__cta-btn img { width: 20px; height: 20px; transition: filter var(--transition-base); }
.smart-home__cta-btn:hover img { filter: brightness(0) invert(1); }

/* Smart Home Responsive */
@media (max-width: 1024px) {
  .smart-home__content { grid-template-columns: 1fr; }
  .smart-home__image { order: -1; }
}
@media (max-width: 768px) {
  .smart-home__cta { flex-direction: column; text-align: center; }
  .smart-home__cta-content { text-align: center; }
}
@media (max-width: 480px) {
  .smart-home__title { font-size: var(--fs-2xl); }
  .smart-home__feature { flex-direction: column; text-align: center; }
  .smart-home__feature-icon { margin: 0 auto; }
  .smart-home__feature-brands { justify-content: center; }
}
@media (max-width: 375px) {
  .smart-home__image-badge { padding: var(--space-sm) var(--space-md); }
  .smart-home__image-badge-num { font-size: var(--fs-xl); }
}

/* ----- Protection Section ----- */
.protection { padding: var(--space-4xl) 0; background: var(--color-white); }
.protection__container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-lg); }
.protection__layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-3xl); align-items: start; }
.protection__main { }
.protection__tag { display: inline-flex; align-items: center; gap: var(--space-xs); background: var(--color-error); color: var(--color-white); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-full); font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--space-md); }
.protection__title { font-size: var(--fs-3xl); font-weight: 700; color: var(--color-dark); margin-bottom: var(--space-md); }
.protection__lead { font-size: var(--fs-md); color: var(--color-gray-600); line-height: 1.7; margin-bottom: var(--space-2xl); }
.protection__lead strong { color: var(--color-dark); }
.protection__services { display: flex; flex-direction: column; gap: var(--space-md); }
.protection__service { display: flex; gap: var(--space-lg); padding: var(--space-lg); background: var(--color-gray-100); border-radius: var(--radius-lg); transition: all var(--transition-base); }
.protection__service:hover { background: var(--color-gray-200); }
.protection__service-num { font-size: var(--fs-2xl); font-weight: 800; color: var(--color-primary); opacity: 0.3; line-height: 1; min-width: 40px; }
.protection__service-content { flex: 1; }
.protection__service-header { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-xs); }
.protection__service-header img { opacity: 0.7; }
.protection__service-header h3 { font-size: var(--fs-md); font-weight: 700; color: var(--color-dark); }
.protection__service-content p { font-size: var(--fs-sm); color: var(--color-gray-600); line-height: 1.6; }
.protection__side { position: sticky; top: 100px; }
.protection__stats { display: flex; flex-direction: column; gap: var(--space-md); margin-bottom: var(--space-xl); }
.protection__stat { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg); background: var(--color-gray-100); border-radius: var(--radius-lg); border-left: 4px solid var(--color-error); }
.protection__stat-icon { width: 48px; height: 48px; background: rgba(239, 68, 68, 0.1); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.protection__stat-icon img { filter: invert(27%) sepia(94%) saturate(4013%) hue-rotate(349deg) brightness(91%) contrast(97%); }
.protection__stat-content { display: flex; flex-direction: column; }
.protection__stat-num { font-size: var(--fs-xl); font-weight: 800; color: var(--color-dark); }
.protection__stat-text { font-size: var(--fs-sm); color: var(--color-gray-600); }
.protection__cta { background: linear-gradient(135deg, var(--color-error) 0%, #b91c1c 100%); border-radius: var(--radius-lg); padding: var(--space-xl); text-align: center; }
.protection__cta-badge { display: inline-block; background: rgba(255, 255, 255, 0.2); color: var(--color-white); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: 600; margin-bottom: var(--space-md); text-transform: uppercase; letter-spacing: 0.5px; }
.protection__cta-title { font-size: var(--fs-xl); font-weight: 700; color: var(--color-white); margin-bottom: var(--space-sm); }
.protection__cta-text { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.9); margin-bottom: var(--space-lg); line-height: 1.6; }
.protection__cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); width: 100%; padding: var(--space-md) var(--space-xl); background: var(--color-white); color: var(--color-error); border-radius: var(--radius-md); font-weight: 600; text-decoration: none; transition: all var(--transition-base); }
.protection__cta-btn:hover { background: var(--color-dark); color: var(--color-white); }
.protection__cta-btn img { width: 18px; height: 18px; transition: filter var(--transition-base); }
.protection__cta-btn:hover img { filter: brightness(0) invert(1); }

/* Protection Responsive */
@media (max-width: 1024px) {
  .protection__layout { grid-template-columns: 1fr; }
  .protection__side { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
  .protection__stats { margin-bottom: 0; }
}
@media (max-width: 768px) {
  .protection__side { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .protection__title { font-size: var(--fs-2xl); }
  .protection__service { flex-direction: column; gap: var(--space-sm); }
  .protection__service-num { min-width: auto; }
  .protection__stat { flex-direction: column; text-align: center; border-left: none; border-top: 4px solid var(--color-error); }
}
@media (max-width: 375px) {
  .protection__cta { padding: var(--space-lg); }
}

/* ----- Crisis Section ----- */
.crisis { padding: var(--space-4xl) 0; background: var(--color-gray-100); }
.crisis__container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-lg); }
.crisis__alert { display: flex; align-items: center; justify-content: center; gap: var(--space-md); background: var(--color-error); color: var(--color-white); padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-full); margin-bottom: var(--space-2xl); flex-wrap: wrap; }
.crisis__alert-pulse { width: 10px; height: 10px; background: var(--color-white); border-radius: 50%; animation: crisisPulse 1.5s ease-in-out infinite; }
@keyframes crisisPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } }
.crisis__alert-text { font-size: var(--fs-sm); font-weight: 600; }
.crisis__alert-phone { background: var(--color-white); color: var(--color-error); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-full); font-weight: 700; text-decoration: none; font-size: var(--fs-sm); }
.crisis__alert-phone:hover { background: var(--color-gray-100); }
.crisis__header { text-align: center; margin-bottom: var(--space-2xl); }
.crisis__title { font-size: var(--fs-3xl); font-weight: 700; color: var(--color-dark); margin-bottom: var(--space-sm); }
.crisis__lead { font-size: var(--fs-md); color: var(--color-gray-600); max-width: 600px; margin: 0 auto; }
.crisis__scenarios { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); margin-bottom: var(--space-2xl); }
.crisis__scenario { background: var(--color-white); border-radius: var(--radius-lg); padding: var(--space-xl); border: 2px solid transparent; transition: all var(--transition-base); }
.crisis__scenario:hover { border-color: var(--color-gray-300); transform: translateY(-2px); }
.crisis__scenario--critical { border-color: var(--color-error); background: linear-gradient(to bottom, rgba(239, 68, 68, 0.03) 0%, var(--color-white) 100%); }
.crisis__scenario-header { display: flex; align-items: flex-start; gap: var(--space-md); margin-bottom: var(--space-lg); padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-gray-200); }
.crisis__scenario-icon { width: 48px; height: 48px; background: var(--color-gray-100); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.crisis__scenario--critical .crisis__scenario-icon { background: rgba(239, 68, 68, 0.1); }
.crisis__scenario--critical .crisis__scenario-icon img { filter: invert(27%) sepia(94%) saturate(4013%) hue-rotate(349deg) brightness(91%) contrast(97%); }
.crisis__scenario-meta { flex: 1; }
.crisis__scenario-severity { display: inline-block; background: var(--color-error); color: var(--color-white); padding: 2px var(--space-sm); border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--space-xs); }
.crisis__scenario-severity--medium { background: var(--color-accent); }
.crisis__scenario-meta h3 { font-size: var(--fs-md); font-weight: 700; color: var(--color-dark); }
.crisis__scenario-steps { display: flex; flex-direction: column; gap: var(--space-sm); }
.crisis__step { display: flex; align-items: flex-start; gap: var(--space-md); }
.crisis__step-num { width: 24px; height: 24px; background: var(--color-primary); color: var(--color-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: 700; flex-shrink: 0; }
.crisis__scenario--critical .crisis__step-num { background: var(--color-error); }
.crisis__step p { font-size: var(--fs-sm); color: var(--color-gray-700); line-height: 1.5; padding-top: 2px; }
.crisis__cta { display: flex; align-items: center; justify-content: space-between; background: var(--color-primary); border-radius: var(--radius-lg); padding: var(--space-xl); flex-wrap: wrap; gap: var(--space-lg); }
.crisis__cta-content { color: var(--color-white); }
.crisis__cta-badge { display: inline-flex; align-items: center; gap: var(--space-xs); background: rgba(255, 255, 255, 0.2); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: 600; margin-bottom: var(--space-sm); }
.crisis__cta-dot { width: 8px; height: 8px; background: #22c55e; border-radius: 50%; animation: crisisPulse 1.5s ease-in-out infinite; }
.crisis__cta-content h3 { font-size: var(--fs-xl); font-weight: 700; margin-bottom: var(--space-xs); color: var(--color-white); }
.crisis__cta-content p { font-size: var(--fs-md); opacity: 0.9; }
.crisis__cta-btn { display: inline-flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-2xl); background: var(--color-white); color: var(--color-primary); border-radius: var(--radius-md); font-size: var(--fs-lg); font-weight: 700; text-decoration: none; transition: all var(--transition-base); }
.crisis__cta-btn:hover { background: var(--color-dark); color: var(--color-white); }
.crisis__cta-btn img { transition: filter var(--transition-base); }
.crisis__cta-btn:hover img { filter: brightness(0) invert(1); }

/* Crisis Responsive */
@media (max-width: 1024px) {
  .crisis__scenarios { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .crisis__alert { padding: var(--space-sm); gap: var(--space-sm); }
  .crisis__cta { flex-direction: column; text-align: center; }
  .crisis__cta-content { text-align: center; }
}
@media (max-width: 480px) {
  .crisis__title { font-size: var(--fs-2xl); }
  .crisis__scenario { padding: var(--space-lg); }
  .crisis__cta-btn { width: 100%; justify-content: center; }
}
@media (max-width: 375px) {
  .crisis__alert-text { display: none; }
}

/* ----- Team Section ----- */
.team { padding: var(--space-4xl) 0; background: var(--color-white); }
.team__container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-lg); }
.team__intro { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-2xl); margin-bottom: var(--space-3xl); padding-bottom: var(--space-2xl); border-bottom: 1px solid var(--color-gray-200); flex-wrap: wrap; }
.team__intro-content { max-width: 500px; }
.team__badge { display: inline-flex; align-items: center; gap: var(--space-sm); background: var(--color-gray-100); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-full); font-size: var(--fs-sm); font-weight: 600; color: var(--color-gray-700); margin-bottom: var(--space-md); }
.team__badge-dot { width: 8px; height: 8px; background: var(--color-primary); border-radius: 50%; }
.team__title { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 800; color: var(--color-dark); margin-bottom: var(--space-sm); }
.team__title span { color: var(--color-primary); }
.team__lead { font-size: var(--fs-md); color: var(--color-gray-600); line-height: 1.7; }
.team__intro-stats { display: flex; gap: var(--space-xl); }
.team__stat { text-align: center; padding: var(--space-md) var(--space-lg); background: var(--color-gray-100); border-radius: var(--radius-lg); }
.team__stat-num { display: block; font-size: var(--fs-2xl); font-weight: 800; color: var(--color-primary); margin-bottom: var(--space-xs); }
.team__stat-text { font-size: var(--fs-xs); color: var(--color-gray-600); text-transform: uppercase; letter-spacing: 0.5px; }
.team__main { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: center; }
.team__visual { position: relative; }
.team__image-wrapper { position: relative; border-radius: var(--radius-xl); overflow: hidden; }
.team__image-wrapper img { width: 100%; height: auto; display: block; }
.team__image-frame { position: absolute; inset: var(--space-md); border: 2px solid rgba(255, 255, 255, 0.3); border-radius: var(--radius-lg); pointer-events: none; }
.team__float { position: absolute; background: var(--color-white); border-radius: var(--radius-lg); padding: var(--space-md) var(--space-lg); box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: var(--space-md); }
.team__float--cert { bottom: var(--space-xl); left: calc(var(--space-xl) * -1); }
.team__float--cert img { filter: invert(45%) sepia(95%) saturate(1500%) hue-rotate(200deg) brightness(95%) contrast(95%); }
.team__float--cert strong { display: block; font-size: var(--fs-md); color: var(--color-dark); }
.team__float--cert span { font-size: var(--fs-xs); color: var(--color-gray-500); }
.team__float--rating { top: var(--space-xl); right: calc(var(--space-xl) * -1); flex-direction: column; text-align: center; padding: var(--space-md); }
.team__float-stars { color: #fbbf24; font-size: var(--fs-lg); letter-spacing: 2px; }
.team__float--rating span:last-child { font-size: var(--fs-xs); color: var(--color-gray-600); margin-top: var(--space-xs); }
.team__content { }
.team__text { margin-bottom: var(--space-xl); }
.team__text p { font-size: var(--fs-md); color: var(--color-gray-600); line-height: 1.8; margin-bottom: var(--space-md); }
.team__text p:last-child { margin-bottom: 0; }
.team__text strong { color: var(--color-dark); }
.team__pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-bottom: var(--space-xl); }
.team__pillar { text-align: center; padding: var(--space-lg); background: var(--color-gray-100); border-radius: var(--radius-lg); }
.team__pillar-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-sm); }
.team__pillar-icon--blue { background: rgba(59, 130, 246, 0.15); }
.team__pillar-icon--blue img { filter: invert(45%) sepia(95%) saturate(1500%) hue-rotate(200deg) brightness(95%) contrast(95%); }
.team__pillar-icon--green { background: rgba(16, 185, 129, 0.15); }
.team__pillar-icon--green img { filter: invert(60%) sepia(60%) saturate(500%) hue-rotate(100deg) brightness(95%) contrast(95%); }
.team__pillar-icon--orange { background: rgba(249, 115, 22, 0.15); }
.team__pillar-icon--orange img { filter: invert(60%) sepia(80%) saturate(1500%) hue-rotate(360deg) brightness(100%) contrast(95%); }
.team__pillar strong { display: block; font-size: var(--fs-md); color: var(--color-dark); margin-bottom: var(--space-xs); }
.team__pillar span { font-size: var(--fs-sm); color: var(--color-gray-500); }
.team__cta { display: inline-flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-xl); background: var(--color-primary); color: var(--color-white); border-radius: var(--radius-md); font-weight: 600; text-decoration: none; transition: all var(--transition-base); }
.team__cta:hover { background: var(--color-primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.team__cta img { filter: brightness(0) invert(1); }

/* Team Responsive */
@media (max-width: 1024px) {
  .team__main { grid-template-columns: 1fr; }
  .team__visual { order: -1; max-width: 600px; margin: 0 auto; }
  .team__float--cert { left: var(--space-lg); bottom: var(--space-lg); }
  .team__float--rating { right: var(--space-lg); top: var(--space-lg); }
}
@media (max-width: 768px) {
  .team__intro { flex-direction: column; align-items: flex-start; }
  .team__intro-stats { width: 100%; justify-content: space-between; }
  .team__float { display: none; }
}
@media (max-width: 480px) {
  .team__title { font-size: 1.5rem; }
  .team__intro-stats { flex-direction: column; gap: var(--space-md); }
  .team__stat { width: 100%; }
  .team__pillars { grid-template-columns: 1fr; }
  .team__cta { width: 100%; justify-content: center; }
}
@media (max-width: 375px) {
  .team__stat { padding: var(--space-sm) var(--space-md); }
}

/* ----- Reviews Section ----- */
.reviews { padding: var(--space-4xl) 0; background: var(--color-gray-100); }
.reviews__container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-lg); }
.reviews__head { text-align: center; margin-bottom: var(--space-3xl); }
.reviews__tag { display: inline-block; background: var(--color-primary); color: var(--color-white); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-full); font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--space-md); }
.reviews__title { font-size: var(--fs-3xl); font-weight: 700; color: var(--color-dark); margin-bottom: var(--space-md); }
.reviews__lead { font-size: var(--fs-md); color: var(--color-gray-600); max-width: 700px; margin: 0 auto; }
.reviews__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-xl); margin-bottom: var(--space-2xl); }
.reviews__card { background: var(--color-white); border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-md); }
.reviews__card-header { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-md); }
.reviews__card-avatar { width: 50px; height: 50px; background: var(--color-primary); color: var(--color-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--fs-lg); font-weight: 700; }
.reviews__card-info { flex: 1; }
.reviews__card-name { display: block; font-weight: 700; color: var(--color-dark); }
.reviews__card-service { font-size: var(--fs-sm); color: var(--color-gray-500); }
.reviews__card-rating { margin-bottom: var(--space-md); }
.reviews__card-stars { color: var(--color-accent); font-size: var(--fs-lg); }
.reviews__card-text { font-size: var(--fs-sm); color: var(--color-gray-600); line-height: 1.6; margin-bottom: var(--space-md); }
.reviews__card-date { font-size: var(--fs-xs); color: var(--color-gray-400); }
.reviews__footer { display: flex; align-items: center; justify-content: space-between; }
.reviews__rating-summary { display: flex; align-items: center; gap: var(--space-md); }
.reviews__rating-score { font-size: var(--fs-3xl); font-weight: 700; color: var(--color-dark); }
.reviews__rating-stars { color: var(--color-accent); font-size: var(--fs-lg); }
.reviews__rating-count { font-size: var(--fs-sm); color: var(--color-gray-500); }
.reviews__footer-link { display: flex; align-items: center; gap: var(--space-sm); color: var(--color-primary); font-weight: 600; text-decoration: none; }
.reviews__footer-link:hover { text-decoration: underline; }

/* ----- Blog Preview Section ----- */
.blog-preview { padding: var(--space-4xl) 0; background: var(--color-white); }
.blog-preview__container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-lg); }
.blog-preview__head { text-align: center; margin-bottom: var(--space-3xl); }
.blog-preview__tag { display: inline-block; background: var(--color-primary); color: var(--color-white); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-full); font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--space-md); }
.blog-preview__title { font-size: var(--fs-3xl); font-weight: 700; color: var(--color-dark); margin-bottom: var(--space-md); }
.blog-preview__lead { font-size: var(--fs-md); color: var(--color-gray-600); max-width: 700px; margin: 0 auto; }
.blog-preview__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-xl); margin-bottom: var(--space-2xl); }
.blog-preview__card { background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); transition: transform var(--transition-base); max-width: 450px; }
.blog-preview__card:only-child { margin: 0 auto; }
.blog-preview__card:hover { transform: translateY(-5px); }
.blog-preview__card-link { text-decoration: none; color: inherit; display: block; }
.blog-preview__card-image { height: 180px; overflow: hidden; background: var(--color-gray-200); }
.blog-preview__card-image img { width: 100%; height: 100%; object-fit: cover; }
.blog-preview__card-placeholder { height: 100%; display: flex; align-items: center; justify-content: center; background: var(--color-gray-100); }
.blog-preview__card-content { padding: var(--space-lg); }
.blog-preview__card-title { font-size: var(--fs-lg); font-weight: 700; color: var(--color-dark); margin-bottom: var(--space-sm); }
.blog-preview__card-excerpt { font-size: var(--fs-sm); color: var(--color-gray-600); margin-bottom: var(--space-md); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-preview__card-more { font-size: var(--fs-sm); color: var(--color-primary); font-weight: 600; }
.blog-preview__footer { text-align: center; }
.blog-preview__footer-btn { display: inline-flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-xl); background: var(--color-primary); color: var(--color-white); border-radius: var(--radius-md); font-weight: 600; text-decoration: none; }
.blog-preview__footer-btn:hover { background: var(--color-primary-dark); }
.blog-preview__footer-btn img { filter: brightness(0) invert(1); }

/* ----- Questions Section ----- */
.questions { padding: var(--space-4xl) 0; background: linear-gradient(135deg, var(--color-gray-100) 0%, var(--color-white) 100%); }
.questions__container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-lg); }
.questions__layout { display: grid; grid-template-columns: 320px 1fr; gap: var(--space-3xl); align-items: start; }
.questions__sidebar { position: sticky; top: 100px; }
.questions__header { margin-bottom: var(--space-2xl); }
.questions__badge { display: inline-block; background: var(--color-primary); color: var(--color-white); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-full); font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--space-md); letter-spacing: 0.5px; }
.questions__title { font-size: var(--fs-3xl); font-weight: 700; color: var(--color-dark); margin-bottom: var(--space-md); line-height: 1.2; }
.questions__lead { font-size: var(--fs-md); color: var(--color-gray-600); line-height: 1.6; }
.questions__contact { background: var(--color-dark); border-radius: var(--radius-lg); padding: var(--space-xl); }
.questions__contact p { color: var(--color-gray-400); font-size: var(--fs-sm); margin-bottom: var(--space-md); }
.questions__contact-btn { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); width: 100%; padding: var(--space-md) var(--space-lg); background: var(--color-primary); color: var(--color-white); border-radius: var(--radius-md); font-weight: 600; text-decoration: none; transition: all var(--transition-base); }
.questions__contact-btn:hover { background: var(--color-primary-dark); transform: translateY(-2px); }
.questions__contact-btn img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
.questions__list { display: flex; flex-direction: column; gap: var(--space-md); }
.questions__item { background: var(--color-white); border-radius: var(--radius-lg); box-shadow: 0 2px 8px rgba(0,0,0,0.06); overflow: hidden; transition: box-shadow var(--transition-base); }
.questions__item:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
.questions__trigger { width: 100%; display: flex; align-items: center; gap: var(--space-md); padding: var(--space-lg); background: none; border: none; cursor: pointer; text-align: left; }
.questions__num { flex-shrink: 0; width: 40px; height: 40px; background: var(--color-gray-100); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: 700; color: var(--color-primary); transition: all var(--transition-base); }
.questions__item.active .questions__num { background: var(--color-primary); color: var(--color-white); }
.questions__text { flex: 1; font-size: var(--fs-md); font-weight: 600; color: var(--color-dark); line-height: 1.4; }
.questions__icon { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; transition: transform var(--transition-base); }
.questions__icon img { width: 20px; height: 20px; opacity: 0.5; }
.questions__item.active .questions__icon { transform: rotate(45deg); }
.questions__content { display: none; padding: 0 var(--space-lg) var(--space-lg) calc(40px + var(--space-md) + var(--space-lg)); }
.questions__item.active .questions__content { display: block; }
.questions__content p { font-size: var(--fs-md); color: var(--color-gray-600); line-height: 1.7; }

/* ----- Contact Section ----- */
.contact__tag { display: inline-block; background: var(--color-primary); color: var(--color-white); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-full); font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--space-md); }
.contact__text { font-size: var(--fs-md); color: var(--color-gray-600); margin-bottom: var(--space-xl); }
.contact__methods { display: flex; flex-direction: column; gap: var(--space-md); }
.contact__method { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md); background: var(--color-gray-100); border-radius: var(--radius-md); text-decoration: none; color: inherit; }
.contact__method-icon { width: 50px; height: 50px; background: var(--color-primary); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; }
.contact__method-icon img { filter: brightness(0) invert(1); }
.contact__method-info { display: flex; flex-direction: column; }
.contact__method-info strong { color: var(--color-dark); }
.contact__method-info span { font-size: var(--fs-sm); color: var(--color-gray-600); }
.contact__form-wrapper { background: var(--color-white); border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-lg); }

/* ----- Article Section (Magazine Style) ----- */
.article { padding: var(--space-4xl) 0; background: var(--color-white); }
.article__container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-lg); display: grid; grid-template-columns: 220px 1fr; gap: var(--space-3xl); }
.article__nav { position: relative; }
.article__nav-inner { position: sticky; top: 100px; }
.article__nav-label { display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--color-gray-500); text-transform: uppercase; letter-spacing: 1px; margin-bottom: var(--space-md); }
.article__nav-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.article__nav-link { display: block; padding: var(--space-sm) var(--space-md); font-size: var(--fs-sm); color: var(--color-gray-600); text-decoration: none; border-left: 2px solid var(--color-gray-200); transition: all var(--transition-base); }
.article__nav-link:hover { color: var(--color-primary); border-left-color: var(--color-primary); }
.article__nav-link.active { color: var(--color-primary); border-left-color: var(--color-primary); font-weight: 600; background: rgba(0, 150, 136, 0.05); }
.article__content { max-width: 800px; }
.article__header { margin-bottom: var(--space-2xl); padding-bottom: var(--space-xl); border-bottom: 1px solid var(--color-gray-200); }
.article__badge { display: inline-block; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); color: var(--color-white); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--space-md); }
.article__title { font-size: var(--fs-3xl); font-weight: 700; color: var(--color-dark); line-height: 1.2; margin-bottom: var(--space-md); }
.article__meta { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.article__meta-item { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--fs-sm); color: var(--color-gray-500); }
.article__meta-item img { opacity: 0.6; }
.article__section { margin-bottom: var(--space-2xl); scroll-margin-top: 100px; }
.article__lead { font-size: var(--fs-lg); color: var(--color-gray-700); line-height: 1.8; font-weight: 400; }
.article__subtitle { display: flex; align-items: flex-start; gap: var(--space-md); font-size: var(--fs-xl); font-weight: 700; color: var(--color-dark); margin-bottom: var(--space-md); }
.article__subtitle-num { flex-shrink: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--color-primary); opacity: 0.6; padding-top: 4px; }
.article__section p { font-size: var(--fs-md); color: var(--color-gray-700); line-height: 1.8; margin-bottom: var(--space-md); }
.article__section p strong { color: var(--color-dark); }
.article__quote { display: flex; gap: var(--space-md); padding: var(--space-lg); background: var(--color-gray-100); border-radius: var(--radius-lg); border-left: 4px solid var(--color-primary); margin: var(--space-lg) 0; }
.article__quote img { flex-shrink: 0; width: 24px; height: 24px; opacity: 0.7; }
.article__quote p { margin: 0; font-size: var(--fs-md); color: var(--color-gray-700); font-style: italic; }
.article__quote--warning { background: #FEF3C7; border-left-color: #F59E0B; }
.article__quote--warning img { filter: invert(62%) sepia(98%) saturate(538%) hue-rotate(359deg) brightness(100%) contrast(96%); }
.article__highlight { display: flex; align-items: center; gap: var(--space-lg); padding: var(--space-lg); background: var(--color-dark); border-radius: var(--radius-lg); margin: var(--space-lg) 0; }
.article__highlight-icon { flex-shrink: 0; width: 56px; height: 56px; background: var(--color-primary); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; }
.article__highlight-icon img { filter: brightness(0) invert(1); }
.article__highlight-content { color: var(--color-white); }
.article__highlight-content strong { display: block; font-size: var(--fs-lg); margin-bottom: var(--space-xs); }
.article__highlight-content p { margin: 0; font-size: var(--fs-md); color: var(--color-white); }
.article__highlight-content a { color: var(--color-white); text-decoration: underline; opacity: 1; font-weight: 600; }
.article__fact { text-align: center; padding: var(--space-xl); background: linear-gradient(135deg, var(--color-gray-100), var(--color-white)); border: 2px dashed var(--color-gray-300); border-radius: var(--radius-lg); margin: var(--space-lg) 0; }
.article__fact-label { display: block; font-size: var(--fs-sm); color: var(--color-gray-500); text-transform: uppercase; letter-spacing: 1px; margin-bottom: var(--space-xs); }
.article__fact-value { display: block; font-size: var(--fs-3xl); font-weight: 700; color: var(--color-primary); margin-bottom: var(--space-xs); }
.article__fact-desc { display: block; font-size: var(--fs-sm); color: var(--color-gray-600); }
.article__prices { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); margin: var(--space-lg) 0; }
.article__price-item { padding: var(--space-md); background: var(--color-gray-100); border-radius: var(--radius-md); }
.article__price-label { display: block; font-size: var(--fs-sm); color: var(--color-gray-600); margin-bottom: var(--space-xs); }
.article__price-value { display: block; font-size: var(--fs-lg); font-weight: 700; color: var(--color-dark); }
.article__footer { margin-top: var(--space-3xl); padding: var(--space-xl); background: linear-gradient(135deg, var(--color-gray-100), var(--color-white)); border-radius: var(--radius-lg); text-align: center; }
.article__footer p { font-size: var(--fs-lg); color: var(--color-gray-700); margin-bottom: var(--space-lg); }
.article__footer-btns { display: flex; justify-content: center; gap: var(--space-md); flex-wrap: wrap; }
.article__footer-btn { display: inline-flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-xl); border-radius: var(--radius-md); font-weight: 600; text-decoration: none; transition: all var(--transition-base); }
.article__footer-btn--primary { background: var(--color-primary); color: var(--color-white); }
.article__footer-btn--primary:hover { background: var(--color-primary-dark); transform: translateY(-2px); }
.article__footer-btn--secondary { background: var(--color-white); color: var(--color-dark); border: 2px solid var(--color-gray-300); }
.article__footer-btn--secondary:hover { border-color: var(--color-primary); color: var(--color-primary); }
.article__footer-btn--secondary img { filter: brightness(0); transition: filter var(--transition-base); }


/* =============================================
   RESPONSIVE - NEW SECTIONS
   ============================================= */
@media (max-width: 1024px) {
  .warranty__container,
  .about__container { grid-template-columns: 1fr; }
  .safety__cta { flex-direction: column; text-align: center; gap: var(--space-lg); }
  .emergency__cta { flex-direction: column; text-align: center; }
  .questions__layout { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .questions__sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: start; }
  .questions__header { margin-bottom: 0; }
  .article__container { grid-template-columns: 1fr; }
  .article__nav { display: none; }
}

@media (max-width: 768px) {
  .services__grid,
  .materials__grid,
  .portfolio__grid,
  .problems__grid,
  .safety__grid,
  .emergency__grid,
  .reviews__grid,
  .blog-preview__grid { grid-template-columns: 1fr; }

  .reviews__footer { flex-direction: column; gap: var(--space-lg); text-align: center; }
  .about__values { justify-content: center; }
  .process__step { flex-direction: column; }
  .process__step-line { display: none; }
  .questions__sidebar { grid-template-columns: 1fr; }
  .questions__contact { order: -1; }
  .article__prices { grid-template-columns: 1fr; }
  .article__highlight { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
  .services__title,
  .materials__title,
  .process__title,
  .portfolio__title,
  .problems__title,
  .safety__title,
  .emergency__title,
  .about__title,
  .reviews__title,
  .blog-preview__title,
  .questions__title,
  .article__title { font-size: var(--fs-2xl); }
  .questions__trigger { padding: var(--space-md); gap: var(--space-sm); }
  .questions__num { width: 32px; height: 32px; font-size: var(--fs-xs); }
  .questions__text { font-size: var(--fs-sm); }
  .questions__content { padding: 0 var(--space-md) var(--space-md) calc(32px + var(--space-sm) + var(--space-md)); }
  .article__subtitle { flex-direction: column; gap: var(--space-sm); }
  .article__subtitle-num { padding-top: 0; }
  .article__quote { flex-direction: column; }
  .article__footer-btns { flex-direction: column; }
  .article__footer-btn { width: 100%; justify-content: center; }
}

@media (max-width: 375px) {
  .questions__trigger { padding: var(--space-sm); }
  .questions__num { width: 28px; height: 28px; }
  .questions__icon { width: 24px; height: 24px; }
  .questions__contact { padding: var(--space-md); }
  .article__fact-value { font-size: var(--fs-2xl); }
  .article__price-item { padding: var(--space-sm); }
  .article__footer { padding: var(--space-lg); }
}