@font-face {
  font-family: "Comfortaa";
  src: url("../fonts/conforta/Comfortaa-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Comfortaa";
  src: url("../fonts/conforta/Comfortaa-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Comfortaa";
  src: url("../fonts/conforta/Comfortaa-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Comfortaa";
  src: url("../fonts/conforta/Comfortaa-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Comfortaa";
  src: url("../fonts/conforta/Comfortaa-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bakbak One";
  src: url("../fonts/bakbakOne/BakbakOne-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/*@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/InterVariable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}*/

/*@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/InterVariable-Italic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}*/

/* ============================================================
   Global design tokens
   ============================================================ */
:root {
  /* Typography */
  --font-base: "Comfortaa", "Helvetica Neue", sans-serif, Arial;
  --font-heading: var(--font-base);
  --font-logo: "Bakbak One", var(--font-heading);
  --tracking-tight: -0.015em;
  --tracking-normal: -0.005em;

  /* Palette: light */
  --clr-surface: #FEFFFF;
  --clr-surface-2: #E7EDF4;

  --clr-ink: #04111F;
  --clr-heading: #03182C;
  --clr-muted: #5E7488;

  --clr-brand: #0E5CC5;
  --clr-brand-strong: #0A4BA3;
  --clr-accent: var(--clr-brand);
  --clr-light: #F8FAFC;
  --clr-white: #FFFFFF;

  /* Palette RGB helpers */
  --clr-surface-rgb: 243, 247, 250;
  --clr-surface-2-rgb: 231, 237, 244;
  --clr-ink-rgb: 4, 17, 31;
  --clr-heading-rgb: 3, 24, 44;
  --clr-muted-rgb: 94, 116, 136;
  --clr-brand-rgb: 14, 92, 197;
  --clr-brand-strong-rgb: 10, 75, 163;
  --clr-light-rgb: 248, 250, 252;
  --clr-white-rgb: 255, 255, 255;

  /* Derived surfaces & text */
  --color-bg: var(--clr-surface);
  --color-bg-alt: var(--clr-surface-2);
  --color-surface: var(--clr-white);
  --color-surface-raised: var(--clr-surface-2);
  --color-contrast: #04111F;
  --color-contrast-soft: #0A1F34;
  --color-contrast-rgb: 4, 17, 31;
  --color-contrast-soft-rgb: 10, 31, 52;

  --color-text: var(--clr-ink);
  --color-text-muted: var(--clr-muted);
  --color-text-light: var(--clr-white);
  --color-heading: var(--clr-heading);

  --color-border-light: rgba(var(--clr-heading-rgb), 0.08);
  --color-border-strong: rgba(var(--clr-heading-rgb), 0.18);

  --color-footer-bg: color-mix(in srgb, var(--clr-surface) 82%, white 18%);
  --color-footer-text: var(--clr-ink);

  --shadow-soft: 0 14px 40px rgba(var(--color-contrast-rgb), 0.08);
  --shadow-strong: 0 24px 65px rgba(var(--color-contrast-rgb), 0.12);

  /* Layout */
  --nav-height-desktop: 4.25rem;
  --nav-height-mobile: 2.2rem;

  /* Hero accent palette (outside brand) */
  --hero-gradient-1: #c9a7ff; /* lilac */
  --hero-gradient-2: #7ae7d7; /* mint */
  --hero-gradient-3: #8ac7ff; /* sky */
  --hero-gradient-4: #f0f5ff; /* soft fog */

  --color-primary: var(--clr-brand);
  --color-primary-strong: var(--clr-brand-strong);
  --color-primary-dark: color-mix(in srgb, var(--clr-brand) 32%, black);
  --color-primary-soft: color-mix(in srgb, var(--clr-brand) 22%, white);
  --color-primary-light: color-mix(in srgb, var(--clr-brand) 14%, white);
  --color-primary-contrast: var(--clr-white);
  --color-text-light-muted: color-mix(in srgb, var(--clr-white) 60%, transparent);

  /* Soft overlays for hero and cards over images */
  --overlay-1: linear-gradient(135deg, rgba(var(--clr-brand-rgb), 0.68), rgba(var(--clr-brand-strong-rgb), 0.78));
  --overlay-navy: linear-gradient(135deg, rgba(var(--color-contrast-rgb), 0.72), rgba(var(--clr-brand-strong-rgb), 0.7));
  --overlay-sapphire: linear-gradient(135deg, rgba(var(--color-contrast-soft-rgb), 0.7), rgba(var(--color-contrast-rgb), 0.8));
  --overlay-teal: linear-gradient(135deg, rgba(var(--clr-brand-rgb), 0.55), rgba(var(--clr-brand-strong-rgb), 0.65));

  /* Subtle motion anchors */
  --hero-pan-start: 50% 50%;
  --hero-pan-end: 53% 48%;

  /* Responsive spacing */
  --gutter-mobile: clamp(16px, 5vw, 24px);

  /* Bootstrap overrides */
  --bs-primary: var(--color-primary);
  --bs-primary-rgb: var(--clr-brand-rgb);
  --bs-primary-bg-subtle: var(--color-primary-light);
  --bs-primary-border-subtle: var(--color-primary-soft);
  --bs-primary-text-emphasis: var(--color-primary-dark);
  --bs-link-color: var(--color-primary);
  --bs-link-hover-color: var(--color-primary-strong);
  --bs-body-color: var(--color-text);
  --bs-body-bg: var(--color-bg);
  --bs-heading-color: var(--color-heading);
  --bs-border-color: var(--color-border-light);
  --bs-secondary-color: var(--color-text-muted);
  --bs-btn-border-radius: 0.375rem;

  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --clr-surface: #04111F;
  --clr-surface-2: #0A1C2C;

  --clr-ink: #F3F7FA;
  --clr-heading: #DCE7F0;
  --clr-muted: #4C5D6A;

  --clr-brand: #27C0F3;
  --clr-brand-strong: #99DFF7;
  --clr-accent: var(--clr-brand);
  --clr-light: #0A1C2C;
  --clr-white: #FFFFFF;

  /* Palette RGB helpers */
  --clr-surface-rgb: 4, 17, 31;
  --clr-surface-2-rgb: 10, 28, 44;
  --clr-ink-rgb: 243, 247, 250;
  --clr-heading-rgb: 220, 231, 240;
  --clr-muted-rgb: 76, 93, 106;
  --clr-brand-rgb: 39, 192, 243;
  --clr-brand-strong-rgb: 153, 223, 247;
  --clr-light-rgb: 10, 28, 44;
  --clr-white-rgb: 255, 255, 255;

  --color-bg: var(--clr-surface);
  --color-bg-alt: var(--clr-surface-2);
  --color-surface: #0A1C2C;
  --color-surface-raised: #0E2538;
  --color-contrast: #0A1C2C;
  --color-contrast-soft: #0E2638;
  --color-contrast-rgb: 10, 28, 44;
  --color-contrast-soft-rgb: 14, 38, 56;

  --color-text: var(--clr-ink);
  --color-text-muted: color-mix(in srgb, var(--clr-ink) 82%, transparent);
  --color-text-light: var(--clr-white);
  --color-heading: var(--clr-heading);

  --color-border-light: rgba(var(--clr-heading-rgb), 0.16);
  --color-border-strong: rgba(var(--clr-heading-rgb), 0.32);

  --color-footer-bg: #0A1C2C;
  --color-footer-text: var(--clr-ink);

  --shadow-soft: 0 14px 40px rgba(var(--color-contrast-rgb), 0.35);
  --shadow-strong: 0 24px 65px rgba(var(--color-contrast-rgb), 0.5);

  --color-primary: var(--clr-brand);
  --color-primary-strong: var(--clr-brand-strong);
  --color-primary-dark: color-mix(in srgb, var(--clr-brand) 28%, black);
  --color-primary-soft: color-mix(in srgb, var(--clr-brand) 28%, var(--clr-surface));
  --color-primary-light: color-mix(in srgb, var(--clr-brand) 18%, var(--clr-surface));
  --color-primary-contrast: #04111F;
  --color-text-light-muted: color-mix(in srgb, var(--clr-ink) 60%, transparent);

  /* Hero accent palette (dark) */
  --hero-gradient-1: #5f4fa8;
  --hero-gradient-2: #2c8c7b;
  --hero-gradient-3: #2c6ca8;
  --hero-gradient-4: #0b1624;

  --bs-primary: var(--color-primary);
  --bs-primary-rgb: var(--clr-brand-rgb);
  --bs-link-color: var(--color-primary);
  --bs-link-hover-color: var(--color-primary-strong);
  --bs-body-color: var(--color-text);
  --bs-body-bg: var(--color-bg);
  --bs-heading-color: var(--color-heading);
  --bs-border-color: var(--color-border-light);
  --bs-secondary-color: var(--color-text-muted);
}

html {
  font-family: var(--font-base);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-base);
  padding-top: var(--nav-height-desktop);
  background: var(--color-bg);
  color: var(--color-text);
  transition: background-color 0.25s ease, color 0.25s ease;
  overflow-x: hidden;
}

h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.2rem, 4vw + 1rem, 4.2rem);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--clr-heading);
}

h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.8rem, 2vw + 1rem, 3rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--clr-heading);
}

p {
  font-size: 1.1rem;
  line-height: 1.55;
  letter-spacing: var(--tracking-normal);
  color: var(--color-text-muted);
}

.text-dark { color: var(--color-heading) !important; }
.text-body { color: var(--color-text) !important; }
.text-muted { color: var(--color-text-muted) !important; }
.bg-body { background-color: var(--color-bg) !important; }
.bg-surface { background-color: var(--color-surface) !important; }

/* ============================================================
   Bootstrap component overrides
   ============================================================ */

.btn-primary {
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary-strong);
  --bs-btn-hover-border-color: var(--color-primary-strong);
  --bs-btn-color: var(--color-text-light);
  --bs-btn-hover-color: var(--color-text-light);
}

.btn-outline-primary {
  --bs-btn-color: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary);
  --bs-btn-hover-color: var(--color-text-light);
  --bs-btn-hover-border-color: var(--color-primary);
}

.alert-primary {
  --bs-alert-bg: var(--color-primary-light);
  --bs-alert-border-color: var(--color-primary-soft);
  --bs-alert-color: var(--color-primary-dark);
}

.badge.bg-primary {
  background: var(--color-primary) !important;
}

.text-primary-emphasis {
  color: var(--color-primary-dark) !important;
}

.bg-primary-subtle {
  background-color: var(--color-primary-light) !important;
}

.border-primary-subtle {
  border-color: var(--color-primary-soft) !important;
}

:root[data-theme="dark"] .text-primary-emphasis {
  color: var(--color-primary-strong) !important;
}

:root[data-theme="dark"] .bg-primary-subtle {
  background-color: color-mix(in srgb, var(--color-primary) 22%, var(--color-surface)) !important;
}

/* ============================================================
   General styles
   ============================================================ */

.btn {
  --bs-btn-font-weight: 600;
  border-radius: var(--bs-btn-border-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.btn-lg {
  --bs-btn-padding-y: 0.78rem;
  --bs-btn-padding-x: 1.3rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 600;
  min-height: 48px;
}

/* ============================================================
   Hero section
   ============================================================ */

.hero {
  --hero-space-top: clamp(3rem, 8vw, 6rem);
  --hero-space-bottom: clamp(3rem, 9vw, 7rem);

  padding: var(--hero-space-top) 0 var(--hero-space-bottom);
  background: var(--color-contrast);
  color: var(--color-text-light);
}

.hero-visual {
  --hero-image: none;
  --hero-overlay: var(--overlay-1);
  --hero-bg-size: 110%;
  --hero-bg-position: var(--hero-pan-start);

  position: relative;
  overflow: hidden;
  background-color: var(--color-contrast);
  background-image: var(--hero-overlay);
  background-size: var(--hero-bg-size);
  background-position: var(--hero-bg-position);
  background-repeat: no-repeat;
  color: var(--color-text-light);
}

.hero-bg-ready { background-image: var(--hero-overlay); }
.hero-bg-loaded {
  background-image: var(--hero-overlay), var(--hero-image);
  background-position: var(--hero-pan-start), var(--hero-pan-start);
  animation: hero-pan 19.6s ease-in-out infinite alternate;
  will-change: background-position;
}

.hero-bg-cover { --hero-bg-size: cover; --hero-bg-position: center; }
.hero-bg-zoom { --hero-bg-size: 115%; --hero-bg-position: 50% 50%; }

.hero-overlay-navy { --hero-overlay: var(--overlay-navy); }
.hero-overlay-sapphire { --hero-overlay: var(--overlay-sapphire); }
.hero-overlay-teal { --hero-overlay: var(--overlay-teal); }

.hero-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.05), transparent 38%);
  pointer-events: none;
}

.hero-visual.hero-bg-loaded::before {
  animation: hero-pan 22.4s ease-in-out infinite alternate;
}

.hero-visual > * { position: relative; }

.hero-title {
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-text-light);
}

.hero-highlight {
  color: var(--color-primary) !important;
  font-weight: 800;
}

.hero-lead { max-width: 720px; }
.hero-sub { max-width: 520px; }

/* Light hero variant */
.hero.hero-clean {
  background: radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--color-primary) 12%, var(--color-bg)), transparent 32%),
              radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-alt)), transparent 35%),
              linear-gradient(135deg, color-mix(in srgb, var(--color-bg) 80%, var(--color-primary) 6%) 0%, color-mix(in srgb, var(--color-bg-alt) 90%, var(--color-primary) 5%) 100%);
  color: var(--color-text);
  min-height: 70vh;
}

.hero.hero-clean.hero-illustrated {
  background:
    radial-gradient(circle at 18% 24%, color-mix(in srgb, var(--hero-gradient-1) 38%, var(--color-bg)) 0%, transparent 46%),
    radial-gradient(circle at 76% 12%, color-mix(in srgb, var(--hero-gradient-2) 42%, var(--color-bg-alt)) 0%, transparent 44%),
    linear-gradient(125deg, color-mix(in srgb, var(--color-bg) 55%, var(--hero-gradient-3) 45%) 0%, color-mix(in srgb, var(--color-bg-alt) 60%, var(--hero-gradient-4) 40%) 100%);
}

.hero.hero-clean * {
  color: inherit;
}

.hero.hero-clean .badge {
  background: color-mix(in srgb, var(--color-primary) 12%, white);
  color: var(--color-primary);
}

.hero.hero-clean .btn-outline-primary {
  --bs-btn-border-color: rgba(var(--clr-brand-rgb), 0.35);
  --bs-btn-hover-bg: var(--color-primary);
  --bs-btn-hover-color: var(--color-text-light);
  --bs-btn-color: var(--color-primary);
}

.hero.hero-clean .btn-primary {
  color: var(--color-text-light) !important;
}

.hero.hero-clean .lead,
.hero.hero-clean .text-muted {
  color: var(--color-text-muted) !important;
}

.hero-illustrated {
  position: relative;
  overflow: hidden;
}

.hero-illustrated::after {
  content: none;
}

.hero.hero-clean .chip-soft {
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
  border: 1px solid var(--color-border-light);
}

.hero.hero-clean .chip-soft i {
  color: var(--color-primary);
}

.chip-soft {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
  color: var(--color-text);
  border: 1px solid var(--color-border-light);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
}

.hero-mockup {
  background: var(--color-surface);
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--color-border-light);
  position: relative;
}

.hero-mockup__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: color-mix(in srgb, var(--color-contrast) 82%, var(--color-primary) 18%);
  color: var(--color-text-light) !important;
  padding: 0.35rem 0.7rem;
  border-radius: 10px;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.hero-mockup__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.9rem;
  border-top: 1px solid var(--color-border-light);
  background: color-mix(in srgb, var(--color-bg) 88%, var(--color-text) 4%);
}

.hero .btn-outline-light {
  --bs-btn-color: var(--color-text-light);
  --bs-btn-border-color: rgba(255, 255, 255, 0.75);
  --bs-btn-hover-bg: var(--color-text-light);
  --bs-btn-hover-color: var(--color-contrast);
  --bs-btn-hover-border-color: var(--color-text-light);
  --bs-btn-active-bg: var(--color-text-light);
  --bs-btn-active-color: var(--color-contrast);
  --bs-btn-active-border-color: var(--color-text-light);
}

@keyframes hero-pan {
  from { background-position: var(--hero-pan-start), var(--hero-pan-start); }
  to { background-position: var(--hero-pan-end), var(--hero-pan-end); }
}

/* ============================================================
   Areas
   ============================================================ */

.areas-band {
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border-light);
}

.areas-band-inner {
  padding: 1.2rem 0;
}

.areas-item {
  font-size: 0.95rem;
  line-height: 1.35rem;
  padding: 0.5rem 0;
  color: var(--color-text-muted);
}

.areas-item strong {
  font-weight: 600;
  color: var(--color-text);
}

@media (min-width: 992px) {
  .areas-band-inner { padding: 1.8rem 0; }

  .areas-item {
    padding-right: 1rem;
    border-right: 1px solid var(--color-border-light);
  }

  .areas-item:last-child {
    border-right: none;
  }
}




/* ============================================================
   Secciones
   ============================================================ */

.section-title {
  font-size: 1.25rem;
  font-weight: 600;
}

.section-subtitle {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

.practice-card h3 {
  font-size: 1.05rem;
}

/* ============================================================
   Contacto
   ============================================================ */

.contact-section {
  --contact-bg: color-mix(in srgb, var(--color-contrast) 88%, var(--color-primary) 12%);
  --contact-border: color-mix(in srgb, var(--color-text-light) 18%, transparent);
  background: var(--contact-bg);
  color: var(--color-text-light);
}

.contact-section .form-control,
.contact-section .form-select {
  background-color: color-mix(in srgb, var(--color-contrast) 82%, transparent);
  border-color: var(--contact-border);
  color: var(--color-text-light);
}

.contact-section .form-control::placeholder {
  color: var(--color-text-muted);
}

.contact-section .form-control:focus {
  background-color: color-mix(in srgb, var(--color-contrast) 78%, var(--color-primary) 8%);
  border-color: var(--color-primary);
}

/* ============================================================
   Footer
   ============================================================ */

footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  font-size: 0.95rem;
  border-top: 1px solid var(--color-border-light);
}

.footer-brand-block {
  line-height: 1;
}

footer h6 {
  color: var(--clr-heading);
}

footer .text-secondary,
footer a.text-secondary {
  color: var(--color-text-muted) !important;
}

footer a {
  color: var(--color-heading);
}

footer a:hover {
  color: var(--color-primary-strong);
}

.footer-brand-title {
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: 1.4rem;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  color: var(--clr-brand-strong);
}

/* Mejora la superficie de toque en móviles */
@media (max-width: 575.98px) {
  footer a {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 0.2rem;
    line-height: 1.35;
    min-height: 48px;
  }

  footer .list-unstyled li {
    margin-bottom: 0.25rem;
  }

  footer .list-unstyled li:last-child {
    margin-bottom: 0;
  }

  footer .theme-toggle {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }

  footer .theme-toggle__label {
    white-space: normal;
    text-align: center;
  }
}

/* ============================================================
   Theme toggle
   ============================================================ */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--color-border-light);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.theme-toggle:hover {
  color: var(--color-primary);
  border-color: var(--color-primary-soft);
  box-shadow: var(--shadow-strong);
}

.theme-toggle__track {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-bg-alt) 70%, transparent);
  border: 1px solid var(--color-border-light);
  display: inline-flex;
  align-items: center;
  padding: 0 3px;
  transition: background-color 0.22s ease, border-color 0.22s ease;
}

.theme-toggle__thumb {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
  transform: translateX(0);
  transition: transform 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease;
}

.theme-toggle[data-mode="dark"] .theme-toggle__thumb {
  transform: translateX(18px);
}

.theme-toggle[data-mode="dark"] .theme-toggle__track {
  background: color-mix(in srgb, var(--color-primary) 25%, var(--color-contrast-soft));
  border-color: var(--color-primary-soft);
}

.theme-toggle__label {
  font-size: 0.95rem;
  white-space: nowrap;
}

/* ============================================================
   WhatsApp float
   ============================================================ */

.whatsapp-float {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 999;
}

/* ============================================================
   Testimonials rotator
   ============================================================ */
.reviews-rotator .review-card {
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.reviews-rotator .review-card.is-leaving {
  opacity: 0;
  transform: translateY(6px);
}

.reviews-rotator .review-card.is-entering {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   Responsive
   ============================================================ */

@media (min-width: 768px) {
  .hero {
    --hero-space-top: clamp(4rem, 6vw, 7rem);
    --hero-space-bottom: clamp(4rem, 7vw, 8rem);
  }

  .hero-title { font-size: 2.6rem; }
}

@media (max-width: 767.98px) {
  .hero {
    min-height: calc(100vh - 72px);
    max-height: calc(100vh - 72px);
    display: flex;
    align-items: center;
  }

  .hero .row { width: 100%; }

  .hero-illustrated::after {
    display: none;
  }
}

.hero-aifos h1 {
  font-size: clamp(2.3rem, 4vw + 1rem, 3.6rem);
}

.hero-aifos .lead {
  font-size: clamp(1.02rem, 2.2vw + 0.5rem, 1.3rem);
}

/* Feature strip */
.feature-strip {
  background: var(--color-bg-alt);
  padding: 1.5rem 0;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border-light);
}

.feature-strip .fw-semibold {
  line-height: 1.35;
  color: var(--color-heading);
}

.feature-strip .text-muted {
  color: var(--color-text-muted) !important;
}

.feature-strip i {
  color: var(--color-primary);
}

.feature-pill {
  background: var(--color-surface);
  border-radius: 14px;
  padding: 0.9rem 1.2rem;
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-soft);
}

.illustration-shell {
  background: linear-gradient(145deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-bg)), color-mix(in srgb, var(--color-contrast) 10%, var(--color-bg-alt)));
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid var(--color-border-light);
}

.service-list-wrap {
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  border: 1px solid var(--color-border-light);
  border-radius: 18px;
  padding: 1.5rem 1.65rem;
  box-shadow: var(--shadow-soft);
}

.staggered-list {
  display: grid;
  gap: 1.05rem;
}

.staggered-list > li {
  opacity: 0;
  transform: translateY(10px);
  animation: stagger-fade 0.5s ease forwards;
  gap: 0.65rem;
}

.staggered-list > li:nth-child(1) { animation-delay: 0.05s; }
.staggered-list > li:nth-child(2) { animation-delay: 0.12s; }
.staggered-list > li:nth-child(3) { animation-delay: 0.19s; }
.staggered-list > li:nth-child(4) { animation-delay: 0.26s; }
.staggered-list > li:nth-child(5) { animation-delay: 0.33s; }
.staggered-list > li:nth-child(6) { animation-delay: 0.4s; }

.emoji-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--clr-brand) 16%, var(--color-surface));
  color: var(--color-contrast);
  font-size: 1.1rem;
  box-shadow: 0 10px 24px rgba(var(--color-contrast-rgb), 0.08);
  flex-shrink: 0;
}

@keyframes stagger-fade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cta-banner {
  background: var(--overlay-navy);
  color: var(--color-text-light);
}

.cta-banner__bg {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(135deg, rgba(var(--color-contrast-rgb), 0.9), rgba(var(--clr-brand-rgb), 0.8)), url('../img/home/general.webp');
  background-size: cover;
  background-position: center;
  filter: saturate(0.95) brightness(1.05);
  transform: scale(1.02);
}

.letter-spacing-1 {
  letter-spacing: 0.18em;
}

.cta-banner h3 {
  color: var(--color-text-light);
}

.cta-banner p,
.cta-banner .text-white-75 {
  color: rgba(255, 255, 255, 0.92) !important;
}

.glass-nav {
  background: color-mix(in srgb, var(--color-surface) 95%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-soft);
  border: none;
  border-radius: 0;
  padding-block: 0.8rem;
}

.glass-nav .nav-link {
  color: var(--color-text) !important;
}

.glass-nav .nav-link:hover {
  color: var(--color-primary) !important;
}

.glass-nav .navbar-brand-logo {
  height: 2em;
}

:root[data-theme="dark"] .glass-nav {
  background: color-mix(in srgb, var(--color-contrast) 68%, transparent 32%);
  border-color: color-mix(in srgb, var(--color-border-strong, var(--color-contrast)) 45%, transparent);
  box-shadow: var(--shadow-strong);
}

.feature-strip-mono {
  background: transparent;
  border: none;
  padding: 1.5rem 0 0.5rem;
}

.feature-strip-mono .feature-pill {
  background: color-mix(in srgb, var(--color-surface) 90%, transparent);
  border: 1px solid var(--color-border-light);
  color: var(--color-text);
}

.cta-banner .text-accent {
  color: var(--color-primary) !important;
}

.reviews-carousel {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  overflow: visible;
  padding: 0 10px;
  position: relative;
}

.reviews-track {
  display: flex;
  gap: 1rem;
  padding: 0.25rem 0.75rem;
  overflow-x: auto;
  width: 100%;
  min-width: 100%;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  width: 100%;
}

.reviews-track::-webkit-scrollbar { display: none; }

.review-slide {
  flex: 0 0 auto;
  min-width: 280px;
  padding: 0.25rem;
  box-sizing: border-box;
  scroll-snap-align: start;
}

.reviews-carousel .review-card {
  background: var(--color-surface);
  min-height: 200px;
}

.reviews-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--color-border-light);
  background: color-mix(in srgb, var(--color-surface) 90%, transparent);
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.reviews-nav:hover {
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  color: var(--color-primary);
  border-color: var(--color-primary-soft);
  box-shadow: var(--shadow-strong);
}

.reviews-nav-prev { left: -18px; }
.reviews-nav-next { right: -18px; }

@media (max-width: 991.98px) {
  .reviews-nav {
    display: inline-flex;
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }
  .reviews-nav-prev { left: 6px; }
  .reviews-nav-next { right: 6px; }
}

.cta-u {
  background: linear-gradient(130deg, var(--color-primary), var(--color-contrast-soft));
  border: 1px solid color-mix(in srgb, var(--color-text-light) 12%, transparent);
  box-shadow: var(--shadow-strong);
}

.service-hero-img {
  object-fit: contain;
  object-position: center;
  /*background: color-mix(in srgb, var(--color-contrast) 6%, transparent);*/
}

.service-cta-panel {
  background: linear-gradient(135deg, rgba(var(--clr-brand-rgb), 0.08), rgba(var(--clr-brand-rgb), 0.02)), var(--color-surface);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-soft);
}

:root[data-theme="dark"] .service-cta-panel {
  background: linear-gradient(135deg, rgba(var(--clr-brand-rgb), 0.14), rgba(var(--clr-brand-rgb), 0.08)), var(--color-surface-raised);
  border-color: rgba(var(--clr-heading-rgb), 0.18);
  box-shadow: 0 20px 50px rgba(var(--color-contrast-rgb), 0.45);
}

@media (max-width: 767.98px) {
  body {
    padding-top: var(--nav-height-mobile);
  }

  .hero.hero-clean {
    min-height: auto;
    padding-top: 2.5rem;
    padding-bottom: 3rem;
  }

  .hero-mockup {
    display: none;
  }

  .chip-soft {
    width: 100%;
    justify-content: flex-start;
  }

  .hero-aifos h1,
  .hero-aifos .lead,
  .hero-aifos .vg-section-title {
    color: var(--color-text-light);
  }

  .hero-aifos a.btn {
    color: var(--color-text-light);
  }
}
/* ============================================================
   Mobile gutters
   ============================================================ */
@media (max-width: 991.98px) {
  body {
    padding-left: var(--gutter-mobile);
    padding-right: var(--gutter-mobile);
  }

  .hero,
  .areas-band,
  .contact-section,
  footer {
    margin-left: calc(-1 * var(--gutter-mobile));
    margin-right: calc(-1 * var(--gutter-mobile));
    padding-left: calc(var(--gutter-mobile) + 0.5rem);
    padding-right: calc(var(--gutter-mobile) + 0.5rem);
  }
}







/* Footer contact helpers */
.footer-contact-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.footer-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--color-heading);
  text-decoration: none;
}

footer .footer-contact-link:hover {
  color: var(--color-primary-strong);
}

.footer-contact-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
}

.footer-contact-sep {
  color: var(--color-text-muted);
  font-weight: 600;
}