/* ============================================
   Solvior — Design tokens
   ============================================ */
:root {
  --color-primary: #0075ff;
  --color-primary-dark: #005fd1;
  --color-dark: #051229;
  --color-hero-bg: #e1e8f0;
  --color-white: #ffffff;
  --color-text-muted: #4c5872;
  --color-border: rgba(5, 18, 41, 0.08);

  --font-base: "Libre Franklin", "Libre Franklin Fallback", -apple-system, BlinkMacSystemFont, sans-serif;

  --container-w: 1280px;
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-base);
  color: var(--color-dark);
  background: var(--color-hero-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

/* ============================================
   Buttons
   ============================================ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-base);
  font-weight: 600;
  border-radius: 999px;
  border: 1.5px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.6s var(--ease-premium), box-shadow 0.6s var(--ease-premium),
    color 0.7s var(--ease-premium), border-color 0.6s var(--ease-premium);
  will-change: transform;
}

/* sliding fill layer — swept in from the left on hover */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: translateX(-100%);
  transition: transform 0.85s var(--ease-premium);
}

.btn:hover::before {
  transform: translateX(0);
}

.btn-icon,
.btn-label {
  position: relative;
  z-index: 1;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
  transition: background-color 0.6s var(--ease-premium);
}

/* Every variant keeps a border at all times (not just on
   hover) — its fill sweeps to a color that, on some
   sections, is nearly identical to that section's own
   background (e.g. .btn-white sweeps to --color-hero-bg,
   which several sections use directly), so without a
   border the button can all but disappear into the page
   on hover. The border color is chosen to contrast with
   BOTH of a variant's own fill states, not just its
   surroundings, so it stays visible everywhere. */
.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.45);
}
.btn-primary .btn-icon {
  background: var(--color-dark);
}
.btn-primary::before {
  background: var(--color-dark);
}
.btn-primary:hover .btn-icon {
  background: var(--color-primary);
}

.btn-dark {
  background: var(--color-dark);
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.45);
}
.btn-dark .btn-icon {
  background: var(--color-primary);
}
.btn-dark::before {
  background: var(--color-primary);
}
.btn-dark:hover .btn-icon {
  background: var(--color-dark);
}

.btn-white {
  background: var(--color-white);
  color: var(--color-dark);
  border-color: rgba(5, 18, 41, 0.35);
}
.btn-white .btn-icon {
  background: var(--color-dark);
}
.btn-white::before {
  background: var(--color-hero-bg);
}
.btn-white:hover .btn-icon {
  background: var(--color-primary);
}

.btn-small {
  padding: 8px 22px 8px 8px;
  font-size: 14px;
}
.btn-small .btn-icon {
  width: 30px;
  height: 30px;
}

.btn-large {
  padding: 10px 30px 10px 10px;
  font-size: 15px;
}
.btn-large .btn-icon {
  width: 34px;
  height: 34px;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -12px rgba(5, 18, 41, 0.35);
}

.btn-primary:hover {
  box-shadow: 0 14px 28px -10px rgba(5, 18, 41, 0.45);
}

/* ============================================
   Header
   ============================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(225, 232, 240, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
  gap: 24px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-dark);
  flex-shrink: 0;
}

.logo-img {
  display: block;
  height: 38px;
  width: auto;
}

.side-menu-logo .logo-img {
  height: 32px;
}

.logo-text em {
  font-style: italic;
  font-weight: 500;
}

.main-nav ul {
  display: flex;
  align-items: center;
  gap: 34px;
}

.main-nav a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-dark);
  opacity: 0.75;
  transition: opacity 0.25s ease, color 0.25s ease;
}

.main-nav li.active a,
.main-nav a:hover {
  opacity: 1;
  color: var(--color-primary);
}

.chev {
  width: 7px;
  height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  opacity: 0.7;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.action-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-dark);
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

.action-divider {
  width: 1px;
  height: 20px;
  background: var(--color-border);
}

@media (max-width: 1200px) {
  .main-nav,
  .action-link,
  .action-divider {
    display: none;
  }
}

/* icon-only stand-in for the "Explore" search button once its
   text label is hidden — same trigger, same overlay, same
   functionality (see [data-search-trigger] in main.js), just
   compact enough to sit next to the hamburger without the gap
   the full text+icon button would need */
.mobile-search-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.3s var(--ease-premium);
}

.mobile-search-toggle:hover {
  background: var(--color-border);
}

@media (max-width: 1200px) {
  .mobile-search-toggle {
    display: inline-flex;
  }
}

/* ============================================
   "Pages" mega menu — full container-width panel
   anchored to the header (not to the trigger link,
   which sits off-center), opened on hover or click.
   Only relevant at the desktop breakpoint, since
   .main-nav itself is hidden below 1200px in favor
   of the hamburger menu.
   ============================================ */
.has-mega {
  position: relative;
}

.nav-mega-trigger[aria-expanded="true"] {
  opacity: 1;
  color: var(--color-primary);
}

.nav-mega-trigger[aria-expanded="true"] .chev {
  transform: rotate(225deg);
  margin-top: 3px;
}

.nav-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 120;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 40px 70px -35px rgba(5, 18, 41, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.35s var(--ease-premium), transform 0.35s var(--ease-premium), visibility 0s linear 0.35s;
}

.nav-mega.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.35s var(--ease-premium), transform 0.35s var(--ease-premium);
}

.nav-mega-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.1fr;
  gap: 40px;
  padding-block: 44px;
}

@media (max-width: 1180px) {
  .nav-mega-inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .nav-mega-promo {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: flex-end;
    min-height: 200px;
  }
}

.nav-mega-col h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 20px;
}

.nav-mega-rule {
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-primary);
  margin-top: -14px;
  margin-bottom: 20px;
}

.nav-mega-col ul {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.nav-mega-col a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  transition: color 0.3s var(--ease-premium), transform 0.3s var(--ease-premium);
}

.nav-mega-col a:hover {
  color: var(--color-primary);
  transform: translateX(3px);
}

.nav-mega-tag {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nav-mega-promo {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 280px;
  border-radius: 18px;
  overflow: hidden;
  padding: 28px;
  color: var(--color-white);
}

.nav-mega-promo img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-premium);
}

.nav-mega-promo:hover img {
  transform: scale(1.06);
}

.nav-mega-promo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(200deg, rgba(0, 117, 255, 0.9) 0%, rgba(5, 18, 41, 0.88) 100%);
}

.nav-mega-promo-icon {
  display: inline-flex;
  margin-bottom: 18px;
}

.nav-mega-promo-text strong {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 10px;
}

.nav-mega-promo-text span {
  display: block;
  max-width: 260px;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
  margin-bottom: 22px;
}

.nav-mega-promo-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  flex-shrink: 0;
  padding: 8px 18px 8px 8px;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 0.88rem;
  font-weight: 700;
  transition: background-color 0.35s var(--ease-premium), color 0.35s var(--ease-premium);
}

.nav-mega-promo:hover .nav-mega-promo-cta {
  background: var(--color-white);
  color: var(--color-dark);
}

.nav-mega-promo-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-dark);
  color: var(--color-white);
  flex-shrink: 0;
}

/* ============================================
   Simple nav dropdowns — Services / Portfolios /
   Blog. Narrower and left-aligned to their own
   trigger (unlike the full-width "Pages" mega menu),
   so each lives inside its own <li> rather than as
   a header-level sibling.
   ============================================ */
.has-dropdown {
  position: relative;
}

.nav-dropdown-trigger[aria-expanded="true"] {
  opacity: 1;
  color: var(--color-primary);
}

.nav-dropdown-trigger[aria-expanded="true"] .chev {
  transform: rotate(225deg);
  margin-top: 3px;
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + 22px);
  left: 0;
  z-index: 120;
  width: 260px;
  background: var(--color-white);
  border-top: 3px solid var(--color-primary);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 30px 55px -28px rgba(5, 18, 41, 0.35);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.3s var(--ease-premium), transform 0.3s var(--ease-premium), visibility 0s linear 0.3s;
}

.nav-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.3s var(--ease-premium), transform 0.3s var(--ease-premium);
}

/* scoped under .main-nav so these out-specificity
   the generic ".main-nav a { display: inline-flex }"
   rule — without it, these links stay inline-flex
   and only "stack" by accidental text-wrap, which
   breaks the instant two short links fit on one line */
.main-nav .nav-dropdown-link {
  display: block;
  padding: 11px 14px;
  border-radius: 8px;
  color: var(--color-dark);
  font-size: 0.92rem;
  font-weight: 500;
  transition: background-color 0.3s var(--ease-premium), color 0.3s var(--ease-premium), padding-left 0.3s var(--ease-premium);
}

.nav-dropdown-link:hover {
  background: var(--color-hero-bg);
  color: var(--color-primary);
  padding-left: 18px;
}

.nav-dropdown--services {
  width: 340px;
}

.main-nav .nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border-radius: 10px;
  color: var(--color-dark);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
  transition: background-color 0.3s var(--ease-premium);
}

.nav-dropdown-item:hover {
  background: var(--color-hero-bg);
}

.nav-dropdown-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 117, 255, 0.1);
  color: var(--color-primary);
  flex-shrink: 0;
  transition: background-color 0.3s var(--ease-premium), color 0.3s var(--ease-premium), transform 0.3s var(--ease-premium);
}

.nav-dropdown-item:hover .nav-dropdown-icon {
  background: var(--color-primary);
  color: var(--color-white);
  transform: scale(1.06);
}

/* ---- Mobile nav toggle + panel ---- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-dark);
  transition: transform 0.35s var(--ease-premium), opacity 0.25s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* positioned relative to .site-header (already a positioned
   ancestor via position:sticky), so this floats as an overlay
   below the header instead of pushing the page content down —
   it's taken out of normal flow entirely */
.mobile-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 150;
  max-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 30px 50px -25px rgba(5, 18, 41, 0.35);
  opacity: 0;
  visibility: hidden;
  transition: max-height 0.45s var(--ease-premium), opacity 0.35s var(--ease-premium),
    visibility 0s linear 0.45s;
}

.mobile-nav.open {
  max-height: min(80vh, 640px);
  opacity: 1;
  visibility: visible;
  transition: max-height 0.45s var(--ease-premium), opacity 0.35s var(--ease-premium);
}

.mobile-nav ul {
  display: flex;
  flex-direction: column;
  padding: 8px clamp(20px, 5vw, 40px) 16px;
}

.mobile-nav a {
  display: block;
  padding: 13px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-dark);
  border-bottom: 1px solid var(--color-border);
}

/* ---- accordion sub-menus (Pages/Services/Portfolios/Blog) ---- */
.mobile-nav-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-dark);
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  text-align: left;
}

.mobile-nav-chev {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform 0.3s var(--ease-premium);
}

.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-chev {
  transform: rotate(180deg);
}

.mobile-nav-sub {
  height: 0;
  overflow: hidden;
}

.mobile-nav-sub-label {
  display: block;
  padding: 14px 0 6px 16px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.mobile-nav-sub a {
  display: block;
  padding: 11px 0 11px 16px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  transition: color 0.3s var(--ease-premium), padding-left 0.3s var(--ease-premium);
}

.mobile-nav-sub a:hover {
  color: var(--color-primary);
  padding-left: 22px;
}

@media (max-width: 1200px) {
  .nav-toggle {
    display: inline-flex;
  }
  .mobile-nav {
    display: block;
  }
}

/* mobile — drop the header CTA so the logo and hamburger
   have room to breathe without crowding */
@media (max-width: 768px) {
  .header-actions .btn {
    display: none;
  }
}

/* ============================================
   Hero
   ============================================ */
.hero {
  position: relative;
  padding-block: clamp(48px, 8vw, 100px) clamp(72px, 13vw, 150px);
  overflow: hidden;
  isolation: isolate;
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 1100px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 8px;
  border-radius: 999px;
  background: var(--color-white);
  box-shadow: 0 1px 2px rgba(5, 18, 41, 0.06);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-dark);
  margin-bottom: clamp(24px, 4vw, 34px);
}

.hero-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
}

.hero-heading {
  font-family: var(--font-base);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  font-size: clamp(2.1rem, 5.4vw, 4.5rem); /* fluid up to 72px */
  color: var(--color-dark);
  margin-bottom: clamp(20px, 3vw, 28px);
  max-width: 1100px;
}

.hero-line {
  display: block;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .hero-line {
    white-space: normal;
  }
}

.text-accent {
  color: var(--color-primary);
}

.hero-desc {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.65;
  color: var(--color-text-muted);
  font-weight: 400;
  max-width: 620px;
  margin-bottom: clamp(32px, 5vw, 44px);
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* ---- Decorative dot-pattern "images" ---- */
.hero-dots {
  --dot-size: 3.5px;
  --dot-gap: 22px;
  --pattern-size: clamp(220px, 22vw, 340px);
  position: absolute;
  top: 50%;
  width: var(--pattern-size);
  height: var(--pattern-size);
  margin-top: calc(var(--pattern-size) / -2);
  transform: rotate(45deg);
  background-image: radial-gradient(circle, rgba(0, 117, 255, 0.55) var(--dot-size), transparent var(--dot-size));
  background-size: var(--dot-gap) var(--dot-gap);
  -webkit-mask-image: radial-gradient(circle at center, #000 0%, #000 35%, transparent 72%);
  mask-image: radial-gradient(circle at center, #000 0%, #000 35%, transparent 72%);
  pointer-events: none;
  z-index: 1;
}

.hero-dots-left {
  left: clamp(-90px, -4vw, -20px);
}

.hero-dots-right {
  right: clamp(-90px, -4vw, -20px);
}

@media (max-width: 768px) {
  .hero-dots {
    --pattern-size: 180px;
  }
  .hero-dots-left {
    left: -70px;
  }
  .hero-dots-right {
    right: -70px;
  }
}

.desc-break {
  display: inline;
}

@media (max-width: 560px) {
  .desc-break {
    display: none;
  }
}

/* ============================================
   Utilities (mobile-first)
   Base rules = mobile. Breakpoint-suffixed
   classes (-md 640px+, -lg 1024px+) override
   upward as the viewport grows.
   ============================================ */
.u-pt-16 { padding-top: 4rem; }
.u-pb-16 { padding-bottom: 4rem; }

@media (min-width: 640px) {
  .u-pt-md-20 { padding-top: 5rem; }
  .u-pb-md-20 { padding-bottom: 5rem; }
}

@media (min-width: 1024px) {
  .u-pt-lg-24 { padding-top: 6rem; }
  .u-pb-lg-24 { padding-bottom: 6rem; }
}

/* ============================================
   Carousel — 3D cylinder / globe-arc ticker
   ============================================ */
.carousel-section {
  position: relative;
  background: var(--color-white);
  overflow: hidden;
}

.carousel-viewport {
  --carousel-item-w: 190px;
  --carousel-item-h: 250px;
  --carousel-gap: 14px;
  --carousel-max-angle: 30;
  --carousel-depth: 90;
  --carousel-speed: 40;
  position: relative;
  width: 100%;
  height: var(--carousel-item-h);
  overflow: hidden;
  perspective: 1400px;
  perspective-origin: 50% 50%;
}

@media (min-width: 640px) {
  .carousel-viewport {
    --carousel-item-w: 250px;
    --carousel-item-h: 320px;
    --carousel-gap: 18px;
    --carousel-max-angle: 40;
    --carousel-depth: 150;
    --carousel-speed: 50;
  }
}

@media (min-width: 1024px) {
  .carousel-viewport {
    --carousel-item-w: 320px;
    --carousel-item-h: 430px;
    --carousel-gap: 24px;
    --carousel-max-angle: 50;
    --carousel-depth: 220;
    --carousel-speed: 60;
  }
}

.carousel-track {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--carousel-gap);
  transform-style: preserve-3d;
  will-change: transform;
}

.carousel-item {
  position: relative;
  flex: 0 0 auto;
  width: var(--carousel-item-w);
  height: var(--carousel-item-h);
  border-radius: 14px;
  overflow: hidden;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  box-shadow: 0 24px 50px -20px rgba(5, 18, 41, 0.35);
  will-change: transform, filter;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
}

/* ============================================
   Features — Bento Grid
   Mobile-first: 1 column stack -> 2 columns at
   640px+ -> 3 columns at 1024px+
   ============================================ */
.features-section {
  position: relative;
  background: var(--color-hero-bg);
}

.bento-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "cta"
    "award"
    "team"
    "support"
    "innovate"
    "stat";
  gap: clamp(24px, 4vw, 36px);
  align-items: stretch;
}

@media (min-width: 640px) {
  .bento-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "cta cta"
      "award team"
      "support innovate"
      "stat stat";
  }
}

@media (min-width: 1024px) {
  .bento-grid {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
      "award cta team"
      "support innovate stat";
  }
}

.bento-award { grid-area: award; }
.bento-cta { grid-area: cta; }
.bento-team { grid-area: team; }
.bento-support { grid-area: support; }
.bento-innovate { grid-area: innovate; }
.bento-stat { grid-area: stat; }

.bento-card {
  position: relative;
  background: var(--color-white);
  border-radius: 20px;
  padding: clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  text-align: left;
  box-shadow: 0 2px 20px rgba(5, 18, 41, 0.06);
  transition: transform 0.7s var(--ease-premium), box-shadow 0.7s var(--ease-premium);
}

.bento-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 56px -24px rgba(5, 18, 41, 0.45);
}

.bento-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: 76px;
  height: 76px;
}

.bento-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 50%;
  background: rgba(0, 117, 255, 0.12);
  transform: scale(0);
  transition: transform 0.7s var(--ease-premium);
}

.bento-card:hover .bento-icon::before {
  transform: scale(1);
}

.bento-icon svg {
  position: relative;
  z-index: 1;
  width: 38px;
  height: 38px;
  transition: transform 0.7s var(--ease-premium);
}

.bento-card:hover .bento-icon svg {
  transform: scale(1.12) rotate(-8deg);
}

.bento-card h3 {
  font-size: clamp(1.15rem, 1.6vw, 1.375rem);
  font-weight: 700;
  color: var(--color-dark);
}

.bento-card p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

.bento-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 18px;
  padding: clamp(24px, 4vw, 40px);
}

.bento-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border: 1px dashed var(--color-primary);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.bento-badge-icon {
  display: inline-flex;
}

.bento-heading {
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-dark);
  max-width: 320px;
}

.bento-stat {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  min-height: 260px;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(28px, 3vw, 40px);
  box-shadow: 0 2px 20px rgba(5, 18, 41, 0.06);
  isolation: isolate;
}

.bento-stat::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(0deg, rgba(5, 18, 41, 0.8) 0%, rgba(5, 18, 41, 0.35) 55%, rgba(5, 18, 41, 0.12) 100%);
}

.bento-stat-icon {
  position: absolute;
  top: clamp(28px, 3vw, 40px);
  left: clamp(28px, 3vw, 40px);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-primary);
}

.bento-stat-label {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  font-weight: 500;
  margin-bottom: 6px;
}

.bento-stat-value {
  position: relative;
  z-index: 1;
  color: var(--color-white);
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
}

/* ============================================
   Logo Marquee — infinite ticker with a central
   masking "lens". Mobile-first: --lens-size is one
   fluid clamp() driving both the visible circle and
   the mask radius that fades logos as they pass
   underneath it.
   ============================================ */
.logo-marquee-section {
  --lens-size: clamp(150px, 26vw, 260px);
  --edge-fade: clamp(40px, 8vw, 110px);
  position: relative;
  background: var(--color-hero-bg);
  padding-block: clamp(48px, 8vw, 88px);
  overflow-x: hidden;
}

.marquee-outer {
  position: relative;
  width: 100%;
  min-height: var(--lens-size);
  display: flex;
  align-items: center;
}

/* Graduated blur at the left/right edges — strongest right
   at the edge, fading to none toward the center, so logos
   visibly defocus as they slide in/out rather than just
   fading in opacity. */
.marquee-outer::before,
.marquee-outer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--edge-fade);
  z-index: 3;
  pointer-events: none;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.marquee-outer::before {
  left: 0;
  -webkit-mask-image: linear-gradient(to right, black 0%, transparent 100%);
  mask-image: linear-gradient(to right, black 0%, transparent 100%);
}

.marquee-outer::after {
  right: 0;
  -webkit-mask-image: linear-gradient(to left, black 0%, transparent 100%);
  mask-image: linear-gradient(to left, black 0%, transparent 100%);
}

.marquee-mask-layer {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    black var(--edge-fade),
    black calc(100% - var(--edge-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    black var(--edge-fade),
    black calc(100% - var(--edge-fade)),
    transparent 100%
  );
}

.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: clamp(14px, 2vw, 24px);
  animation: marquee-scroll 34s linear infinite;
  will-change: transform;
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.logo-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(150px, 16vw, 190px);
  height: clamp(88px, 9vw, 108px);
  background: var(--color-white);
  border-radius: 12px;
  padding: clamp(14px, 2vw, 22px) clamp(20px, 2.6vw, 30px);
  box-shadow: 0 2px 20px rgba(5, 18, 41, 0.06);
}

.logo-item img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Artisan Villa's badge is a circular emblem baked onto a
   black square canvas — clip it back to a circle so it reads
   as an intentional badge rather than a stray black tile
   next to the other logos' plain white backgrounds. */
.logo-item--badge img {
  height: 100%;
  width: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

.logo-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 700;
  color: var(--color-dark);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.logo-mark sup {
  font-size: 0.55em;
}

.logo-mark-paren {
  font-weight: 400;
  opacity: 0.5;
}

.logo-mark--light {
  font-weight: 400;
}

.logo-mark--medium {
  font-weight: 500;
}

.logo-mark--bold {
  font-weight: 800;
}

.logo-mark--wide {
  letter-spacing: 0.06em;
}

.logo-mark--icon i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
}

.marquee-lens {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: var(--lens-size);
  height: var(--lens-size);
  border-radius: 50%;
  border: 1px dashed rgba(5, 18, 41, 0.22);
  background: rgba(225, 232, 240, 0.38);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 45px -20px rgba(5, 18, 41, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  padding: clamp(14px, 3vw, 24px);
}

.lens-line {
  color: var(--color-text-muted);
  font-size: clamp(0.72rem, 1.6vw, 0.95rem);
  font-weight: 500;
  line-height: 1.4;
  text-shadow: 0 1px 14px rgba(225, 232, 240, 0.9), 0 1px 3px rgba(225, 232, 240, 0.9);
}

.lens-line--brand {
  color: var(--color-dark);
  font-weight: 700;
}

.lens-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 11px;
  margin: 0 1px;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 700;
  font-size: 0.92em;
}

@media (max-width: 480px) {
  .logo-marquee-section {
    --lens-size: clamp(130px, 40vw, 170px);
  }
  .lens-line {
    font-size: 0.68rem;
  }
}


/* ============================================
   About — asymmetric bento with floating stat,
   testimonial, and a video-modal trigger.
   Mobile-first: 1 column -> 2 columns at 640px+
   -> offset 3-column grid at 1024px+
   ============================================ */
.about-section {
  position: relative;
  background: var(--color-hero-bg);
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "img"
    "top"
    "testimonial"
    "video";
  gap: clamp(20px, 3vw, 28px);
}

@media (min-width: 640px) {
  .about-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "img img"
      "top top"
      "testimonial video";
  }
}

@media (min-width: 1024px) {
  .about-grid {
    grid-template-columns: 1.05fr 0.85fr 0.55fr;
    grid-template-areas:
      "img top top"
      "img testimonial video";
  }
}

.about-image {
  grid-area: img;
  position: relative;
}

.about-top {
  grid-area: top;
}

.about-testimonial {
  grid-area: testimonial;
}

.about-image-inner {
  width: 100%;
  height: 100%;
  min-height: clamp(280px, 45vw, 420px);
  border-radius: 24px;
  overflow: hidden;
}

.about-image-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-stat {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 5;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--color-white);
  border-radius: 16px;
  padding: clamp(18px, 2.5vw, 26px);
  box-shadow: 0 20px 45px -20px rgba(5, 18, 41, 0.28);
}

/* Layered backing peeking out behind the white card, in the
   section's own background color, for that premium "stacked
   card" depth — sits behind the white card, in front of the
   image, only visible on the sides it extends past. The card
   itself stays flush with the image (no negative offset); only
   this backing layer breaks past the edge. */
.about-stat::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-hero-bg);
  border-radius: 0 16px 0 0;
}

@media (max-width: 640px) {
  .about-stat {
    max-width: calc(100% - 32px);
  }
}

.about-stat-label {
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.85rem;
}

.about-stat-value {
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 800;
  color: var(--color-dark);
  line-height: 1;
}

.about-stat-desc {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.about-card {
  background: var(--color-white);
  border-radius: 20px;
  padding: clamp(28px, 3vw, 40px);
  box-shadow: 0 2px 20px rgba(5, 18, 41, 0.06);
}

.about-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 22px;
}

.about-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-dark);
}

.about-heading {
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-dark);
  max-width: 560px;
}

.about-testimonial {
  position: relative;
  background: var(--color-primary);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
}

.about-stars {
  display: flex;
  gap: 4px;
  position: relative;
  z-index: 1;
}

.about-testimonial blockquote {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 500;
}

.about-testimonial-meta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.about-testimonial-meta strong {
  font-size: 0.95rem;
  font-weight: 700;
}

.about-testimonial-meta span {
  font-size: 0.82rem;
  opacity: 0.75;
}

.about-quote-icon {
  position: absolute;
  right: 20px;
  bottom: 16px;
  z-index: 0;
}

.about-video {
  position: relative;
  grid-area: video;
  border-radius: 20px;
  overflow: hidden;
  border: none;
  padding: 0;
  cursor: pointer;
  min-height: 200px;
  display: block;
}

.about-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-premium);
}

.about-video::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(5, 18, 41, 0.35);
  transition: background-color 0.4s ease;
}

.about-video:hover::before {
  background: rgba(5, 18, 41, 0.5);
}

.about-video:hover img {
  transform: scale(1.06);
}

.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s var(--ease-premium);
}

.video-play svg {
  transform: translateX(1px);
}

.about-video:hover .video-play {
  transform: translate(-50%, -50%) scale(1.1);
}

/* ---- Video modal ---- */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.video-modal.open {
  opacity: 1;
  visibility: visible;
}

.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 18, 41, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.video-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(900px, 100%);
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  transform: scale(0.92);
  transition: transform 0.4s var(--ease-premium);
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.5);
}

.video-modal.open .video-modal-dialog {
  transform: scale(1);
}

.video-modal-dialog video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(5, 18, 41, 0.6);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.video-modal-close:hover {
  background: rgba(5, 18, 41, 0.85);
}

body.video-modal-locked {
  overflow: hidden;
}

/* ============================================
   Solutions — sticky stacking cards. Each card
   is position:sticky within a tall wrapper; GSAP
   ScrollTrigger scrubs the previous card's scale/
   opacity down as the next wrapper scrolls into
   place, so it visibly shrinks away underneath.
   ============================================ */
.solutions-section {
  position: relative;
  background: var(--color-hero-bg);
}

.solutions-intro {
  max-width: 640px;
  margin: 0 auto clamp(40px, 6vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}

.solutions-heading {
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-dark);
}

.solutions-stack {
  position: relative;
}

/* Each wrap gets pinned (JS: ScrollTrigger pin, pinSpacing: false) for
   a set scroll distance (see main.js), holding its card fixed in
   place — a true fixed position, not position: sticky, so there's no
   "unstick and drift with the page" phase for the user to see.
   pinSpacing: false means pinning a wrap does NOT push the next one
   further down the document, so the next wrap's natural position
   already sits right behind this one; when it later gets pinned in
   turn, it's later in the DOM (so painted on top) and fully covers
   this wrap without any negative-margin math needed to make the
   timing line up.

   The wrap is sized to fit the card exactly (no min-height: 100vh) —
   while pinned, a wrap taller than its card renders as a visible
   gap of empty (background-colored) space below the card, since the
   pin fixes the *whole wrap* in place, not just the card inside it.
   Hold duration is controlled independently, via the pin's own
   `end` in JS, not by inflating the wrap's box. */
.solution-wrap {
  padding-top: clamp(80px, 12vh, 110px);
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}

/* On mobile the cards aren't pinned (see main.js matchMedia), so this
   padding-top — sized to clear the previous pinned card — just stacks
   up as oversized empty gaps between the title and each plain-flow
   card. A plain, modest gap replaces it there instead. */
@media (max-width: 768px) {
  .solution-wrap {
    padding-top: 28px;
  }

  .solution-wrap:first-child {
    padding-top: 0;
  }
}

/* The card itself (frame, size, rounded corners, dark background)
   never animates — only its two children do (see main.js). That
   keeps a single, stable, always-fully-opaque boundary throughout:
   whatever gap the children's scale-down exposes, or softening their
   own blurred edges causes, just reveals more of this same solid
   background via overflow: hidden, instead of a second/separate
   backdrop layer that can show through as a faint double outline. */
.solution-card {
  width: 100%;
  height: clamp(480px, 72vh, 640px);
  border-radius: 24px;
  overflow: hidden;
  background: var(--color-dark);
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .solution-card {
    grid-template-columns: 1fr 1fr;
  }
}

.solution-content,
.solution-image {
  transform-origin: top center;
  will-change: transform, filter;
}

.solution-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(28px, 4vw, 56px);
  min-height: 0;
}

.solution-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(0, 117, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.solution-text {
  margin-top: auto;
}

.solution-number {
  display: block;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.solution-text h3 {
  color: var(--color-white);
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 12px;
}

.solution-text p {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 360px;
  margin-bottom: 22px;
}

.solution-image {
  position: relative;
  min-height: 200px;
}

.solution-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.solutions-footer {
  margin-top: clamp(32px, 5vw, 48px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.solutions-footer svg {
  flex-shrink: 0;
}

.solutions-footer a {
  margin-left: 4px;
  color: var(--color-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* the fixed clamp(480px, 72vh, 640px) card height exists to make the
   desktop pinned-stack effect work — with pinning off on mobile (see
   main.js matchMedia) it just squeezes content + image into too
   short a box, clipping the button under the image. Let the card
   size to its content instead, and drop the step numbers. */
@media (max-width: 768px) {
  .solution-card {
    height: auto;
  }

  .solution-image {
    min-height: 220px;
  }

  .solution-number {
    display: none;
  }
}

/* ============================================
   Fun Facts — stat cards with dot-matrix backdrop,
   an animated progress ring, and hover-lift cards
   ============================================ */
.funfacts-section {
  position: relative;
  background: var(--color-hero-bg);
  overflow: hidden;
}

/* Decorative dot-matrix patches, mirroring the hero's
   dot treatment, tucked into the section's corners */
.funfacts-section::before,
.funfacts-section::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: clamp(220px, 30vw, 380px);
  height: clamp(220px, 30vw, 380px);
  background-image: radial-gradient(circle, rgba(5, 18, 41, 0.16) 1.6px, transparent 1.6px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(circle at center, #000 0%, #000 35%, transparent 72%);
  mask-image: radial-gradient(circle at center, #000 0%, #000 35%, transparent 72%);
  pointer-events: none;
}

.funfacts-section::before {
  top: -70px;
  left: -90px;
}

.funfacts-section::after {
  bottom: -90px;
  right: -80px;
}

.funfacts-top {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-bottom: clamp(32px, 5vw, 52px);
}

@media (min-width: 768px) {
  .funfacts-top {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
}

.funfacts-intro {
  max-width: 560px;
}

.funfacts-heading {
  margin-top: 16px;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-dark);
}

.funfacts-ring {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.ring-visual {
  position: relative;
  width: 96px;
  height: 96px;
  flex-shrink: 0;
}

.ring-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ring-track {
  fill: none;
  stroke: rgba(5, 18, 41, 0.08);
  stroke-width: 8;
}

.ring-progress {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 8;
  stroke-linecap: round;
}

.ring-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-dark);
}

.ring-caption {
  max-width: 170px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.funfacts-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

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

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

.funfact-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: 20px;
  padding: clamp(24px, 3vw, 32px);
  box-shadow: 0 2px 20px rgba(5, 18, 41, 0.06);
  transition: transform 0.5s var(--ease-premium), box-shadow 0.5s var(--ease-premium);
}

/* fill layer sweeps up from below on hover, like the
   button fill pattern used elsewhere on the page */
.funfact-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-primary);
  border-radius: inherit;
  transform: translateY(100%);
  transition: transform 0.55s var(--ease-premium);
}

.funfact-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 50px -20px rgba(5, 18, 41, 0.3);
}

.funfact-card:hover::before {
  transform: translateY(0);
}

.funfact-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: clamp(28px, 6vw, 46px);
}

.funfact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-hero-bg);
  color: var(--color-primary);
  transition: background-color 0.5s var(--ease-premium), color 0.5s var(--ease-premium), transform 0.5s var(--ease-premium);
}

.funfact-card:hover .funfact-icon {
  background: rgba(255, 255, 255, 0.18);
  color: var(--color-white);
  transform: rotate(-8deg) scale(1.08);
}

.funfact-index {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-muted);
  transition: color 0.5s var(--ease-premium);
}

.funfact-card:hover .funfact-index {
  color: rgba(255, 255, 255, 0.7);
}

.funfact-label {
  margin-top: auto;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: 6px;
  transition: color 0.5s var(--ease-premium);
}

.funfact-card:hover .funfact-label {
  color: rgba(255, 255, 255, 0.75);
}

.funfact-value {
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 800;
  color: var(--color-dark);
  line-height: 1;
  transition: color 0.5s var(--ease-premium);
}

.funfact-card:hover .funfact-value {
  color: var(--color-white);
}

/* ============================================
   Portfolio — dark premium project grid.
   Card gap starts wide (luxury spacing) and
   scrubs tight as the section crosses viewport
   center; see the matchMedia block in main.js.
   ============================================ */
.portfolio-section {
  position: relative;
  background: var(--color-dark);
  overflow: hidden;
}

.portfolio-section::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -120px;
  right: -100px;
  width: clamp(260px, 34vw, 460px);
  height: clamp(260px, 34vw, 460px);
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.14) 1.6px, transparent 1.6px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(circle at center, #000 0%, #000 35%, transparent 72%);
  mask-image: radial-gradient(circle at center, #000 0%, #000 35%, transparent 72%);
  pointer-events: none;
}

.portfolio-section .container {
  position: relative;
  z-index: 1;
}

.portfolio-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: clamp(36px, 5vw, 56px);
}

.portfolio-intro {
  max-width: 520px;
}

.about-badge.badge-on-dark {
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--color-white);
}

.portfolio-heading {
  margin-top: 16px;
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  font-weight: 700;
  line-height: 1.18;
  color: var(--color-white);
}

.portfolio-desc {
  flex: 0 1 260px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.95rem;
  line-height: 1.65;
}

.portfolio-cta {
  flex-shrink: 0;
  align-self: center;
}

.portfolio-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 769px) {
  .portfolio-grid {
    /* left column (odd cards) wider, right column (even
       cards) narrower — repeats automatically per row */
    grid-template-columns: 1.4fr 0.8fr;
    align-items: start;
  }
}

.portfolio-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 24px;
  aspect-ratio: 5 / 4;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
  will-change: transform;
}

@media (min-width: 769px) {
  .portfolio-card {
    /* fixed, identical height for every card — the grid's
       asymmetric fr widths are what vary, not the height */
    height: clamp(360px, 34vw, 480px);
    aspect-ratio: auto;
  }
}

.portfolio-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s var(--ease-premium);
}

.portfolio-card:hover img {
  transform: scale(1.06);
}

.portfolio-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* full-image wash so every card reads as part of the dark
     section, darkest toward the bottom for the text overlay */
  background: linear-gradient(0deg, rgba(2, 8, 20, 0.92) 0%, rgba(2, 8, 20, 0.5) 45%, rgba(2, 8, 20, 0.22) 100%);
}

.portfolio-card-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: clamp(20px, 3vw, 28px);
  transition: transform 0.5s var(--ease-premium);
}

.portfolio-card:hover .portfolio-card-info {
  transform: translateY(-4px);
}

.portfolio-tag {
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--color-white);
  font-size: 0.78rem;
  font-weight: 600;
}

.portfolio-card-info h3 {
  color: var(--color-white);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-weight: 700;
  line-height: 1.3;
}

/* ============================================
   Process — 3-step cards with a ghost-gradient
   number and connector arrows sitting in the gaps
   between cards.
   ============================================ */
.process-section {
  position: relative;
  background: var(--color-hero-bg);
}

.process-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(32px, 5vw, 48px);
}

.process-intro {
  max-width: 480px;
}

.process-badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 8px;
  background: var(--color-white);
  box-shadow: 0 6px 18px -8px rgba(5, 18, 41, 0.18);
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.process-heading {
  margin-top: 14px;
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-dark);
}

/* the "linear" faded-text effect — solid at the
   start, fading toward transparent */
.text-fade {
  background-image: linear-gradient(90deg, var(--color-dark) 0%, rgba(5, 18, 41, 0.22) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.process-desc {
  flex: 0 1 280px;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.65;
}

.process-cta {
  flex-shrink: 0;
  align-self: center;
}

.process-grid {
  --gap: 32px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 20px;
}

@media (min-width: 820px) {
  .process-grid {
    /* a real gap between the 3 card columns — this is what
       narrows the cards and actually separates them; the
       connectors don't consume grid tracks at all, they're
       positioned absolutely on top, centered in this gap */
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--gap);
  }
}

.process-card {
  position: relative;
  isolation: isolate;
  background: var(--color-white);
  border-radius: 20px;
  padding: clamp(28px, 3vw, 40px);
  box-shadow: 0 30px 55px -32px rgba(5, 18, 41, 0.22);
  transition: transform 0.5s var(--ease-premium), box-shadow 0.5s var(--ease-premium);
}

.process-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 60px -26px rgba(5, 18, 41, 0.3);
}

.process-number {
  display: block;
  font-size: clamp(3.2rem, 6vw, 4.4rem);
  font-weight: 800;
  line-height: 1;
  margin-bottom: 22px;
  /* the "linear" ghost-number effect — solid accent
     fading to near-transparent */
  background-image: linear-gradient(150deg, var(--color-primary) 0%, rgba(0, 117, 255, 0.12) 85%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.process-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 12px;
}

.process-card p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.65;
}

/* the connector sits as a plain grid sibling — never a
   descendant of either card — so it can never get trapped
   inside a card's own stacking context (that nesting was
   what caused it to render underneath the next card) */
.process-connector {
  position: relative;
  z-index: 3;
  justify-self: center;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  /* new halo layer, in the section's own background color,
     sitting behind the existing icon circle below — additive,
     doesn't replace it */
  background: var(--color-hero-bg);
}

@media (min-width: 820px) {
  .process-connector {
    /* taken out of grid flow entirely and centered in the
       gap it sits over — it never competes with the cards
       for column width, so card width is controlled purely
       by --gap, not by how big the connector is */
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .process-connector-1 {
    left: calc((100% - 2 * var(--gap)) / 3 + var(--gap) / 2);
  }

  .process-connector-2 {
    left: calc(2 * (100% - 2 * var(--gap)) / 3 + 1.5 * var(--gap));
  }
}

.process-connector-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  box-shadow: 0 10px 24px -14px rgba(5, 18, 41, 0.25);
}

@media (max-width: 819px) {
  .process-connector {
    display: none;
  }
}

/* ============================================
   Testimonials — 2-up crossfade carousel with a
   custom "inverted corner cutout" avatar socket,
   cut from the card via mask-image (a real
   geometric boolean subtraction, so the concave
   fillets where the circle meets the card's edges
   are automatic, not hand-drawn).
   ============================================ */
.testimonials-section {
  position: relative;
  background: var(--color-white);
}

.testimonials-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-primary);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.eyebrow-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-primary);
}

.testimonials-heading {
  margin-top: 10px;
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  font-weight: 800;
  color: var(--color-dark);
}

.testimonials-nav {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.testimonial-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-dark);
  cursor: pointer;
  transition: background-color 0.4s var(--ease-premium), border-color 0.4s var(--ease-premium),
    color 0.4s var(--ease-premium), transform 0.4s var(--ease-premium);
}

.testimonial-arrow:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-3px);
}

.testimonial-arrow:active {
  transform: translateY(-1px);
}

.testimonials-viewport {
  margin-top: clamp(32px, 5vw, 48px);
}

.testimonials-track {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 32px);
}

@media (min-width: 820px) {
  .testimonials-track {
    grid-template-columns: 1fr 1fr;
  }
}

.testimonial-card {
  --card-pad: clamp(24px, 3vw, 40px);
  --avatar-size: 84px;
  position: relative;
  isolation: isolate;
  border-radius: 24px;
  padding: var(--card-pad);
  transition: transform 0.5s var(--ease-premium), box-shadow 0.5s var(--ease-premium);
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 44px -26px rgba(5, 18, 41, 0.22);
}

/* the card's own background lives here (not on the card
   itself) so the mask can punch a hole without touching
   the text content layered on top of it */
.testimonial-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-hero-bg);
  border-radius: inherit;
  -webkit-mask-image: radial-gradient(
    circle 50px at calc(var(--card-pad) + var(--avatar-size) / 2) calc(100% - 18px),
    transparent 99%,
    black 100%
  );
  mask-image: radial-gradient(
    circle 50px at calc(var(--card-pad) + var(--avatar-size) / 2) calc(100% - 18px),
    transparent 99%,
    black 100%
  );
}

.testimonial-quote-icon {
  display: block;
  color: var(--color-primary);
  margin-bottom: 20px;
}

.testimonial-text {
  color: var(--color-dark);
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 28px;
  min-height: 8.75em;
}

.testimonial-divider {
  height: 1px;
  background: var(--color-border);
  margin-bottom: 26px;
}

.testimonial-avatar {
  position: absolute;
  left: var(--card-pad);
  bottom: -24px;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid var(--color-white);
  background: var(--color-white);
  box-shadow: 0 10px 24px -12px rgba(5, 18, 41, 0.28);
}

.testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
}

.testimonial-person {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--avatar-size);
  margin-left: calc(var(--avatar-size) + 24px);
}

.testimonial-stars {
  display: flex;
  gap: 3px;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.testimonial-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-dark);
}

.testimonial-role {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

@media (max-width: 819px) {
  .testimonial-card[data-slot="1"] {
    display: none;
  }
}

/* ============================================
   Pricing — single-open accordion of plan cards
   (GSAP-animated height/fade in main.js) beside a
   sticky-feeling intro sidebar.
   ============================================ */
.pricing-section {
  position: relative;
  background: var(--color-hero-bg);
}

.pricing-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 960px) {
  .pricing-layout {
    grid-template-columns: 1.6fr 1fr;
    gap: 60px;
  }
}

/* ---- accordion ---- */
.pricing-accordion {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pricing-item {
  border-radius: 20px;
  background: var(--color-white);
  box-shadow: 0 20px 40px -28px rgba(5, 18, 41, 0.18);
  overflow: hidden;
  transition: background-color 0.45s var(--ease-premium), box-shadow 0.45s var(--ease-premium);
}

.pricing-item.is-active {
  background: var(--color-primary);
  box-shadow: 0 30px 55px -25px rgba(0, 117, 255, 0.35);
}

.pricing-item-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(20px, 3vw, 28px);
  background: none;
  border: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.pricing-item-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-dark);
  transition: color 0.4s var(--ease-premium);
}

.pricing-item.is-active .pricing-item-title {
  color: var(--color-white);
}

.pricing-item-toggle {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
  transition: background-color 0.4s var(--ease-premium), border-color 0.4s var(--ease-premium),
    transform 0.4s var(--ease-premium);
}

.pricing-item-header:hover .pricing-item-toggle {
  transform: scale(1.08);
}

.pricing-item.is-active .pricing-item-toggle {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-dark);
}

.pricing-item-toggle svg {
  position: absolute;
  transition: opacity 0.35s var(--ease-premium), transform 0.35s var(--ease-premium);
}

.pricing-item-toggle .icon-minus {
  opacity: 0;
  transform: rotate(-90deg) scale(0.6);
}

.pricing-item-toggle .icon-plus {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.pricing-item.is-active .pricing-item-toggle .icon-plus {
  opacity: 0;
  transform: rotate(90deg) scale(0.6);
}

.pricing-item.is-active .pricing-item-toggle .icon-minus {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* height is driven by GSAP; start collapsed so there's
   no flash of open content before JS runs */
.pricing-item-panel {
  height: 0;
  overflow: hidden;
}

.pricing-item-panel-inner {
  padding: 0 clamp(20px, 3vw, 28px) clamp(24px, 3vw, 32px);
}

.pricing-item-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  margin-bottom: clamp(20px, 3vw, 28px);
}

.pricing-item-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

@media (min-width: 640px) {
  .pricing-item-body {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

.pricing-item-tagline {
  display: block;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.85rem;
  margin-bottom: 14px;
}

.pricing-item-price {
  display: flex;
  align-items: flex-start;
  gap: 3px;
  color: var(--color-white);
  margin-bottom: clamp(20px, 3vw, 28px);
}

.price-currency {
  font-size: 1.4rem;
  font-weight: 800;
  margin-top: 8px;
}

.price-value {
  font-size: clamp(2.6rem, 5vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
}

.price-period {
  align-self: flex-end;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 8px;
}

.pricing-item-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pricing-item-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-white);
  font-size: 0.92rem;
}

.pricing-item-features svg {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.85);
}

/* ---- sidebar ---- */
.pricing-heading {
  margin-top: 16px;
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-dark);
}

.pricing-desc {
  margin-top: 16px;
  margin-bottom: 28px;
  max-width: 360px;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.65;
}

/* ============================================
   News — latest-articles grid with a slashed
   eyebrow, a date-stamp overlay on each image, and
   a corner dot-matrix reused from the hero pattern.
   ============================================ */
.news-section {
  position: relative;
  background: var(--color-white);
  overflow: hidden;
}

.news-dots {
  --dot-size: 3px;
  --dot-gap: 20px;
  --pattern-size: clamp(200px, 20vw, 300px);
  position: absolute;
  left: clamp(-70px, -4vw, -10px);
  bottom: clamp(-70px, -4vw, -10px);
  width: var(--pattern-size);
  height: var(--pattern-size);
  background-image: radial-gradient(circle, rgba(0, 117, 255, 0.45) var(--dot-size), transparent var(--dot-size));
  background-size: var(--dot-gap) var(--dot-gap);
  -webkit-mask-image: radial-gradient(circle at bottom left, #000 0%, #000 35%, transparent 72%);
  mask-image: radial-gradient(circle at bottom left, #000 0%, #000 35%, transparent 72%);
  pointer-events: none;
}

.news-header {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto clamp(36px, 5vw, 56px);
  text-align: center;
}

.news-eyebrow {
  display: inline-block;
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.news-heading {
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 800;
  color: var(--color-dark);
}

.news-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 32px);
}

@media (min-width: 860px) {
  .news-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.news-card {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.5s var(--ease-premium), box-shadow 0.5s var(--ease-premium), border-color 0.5s var(--ease-premium);
}

@media (min-width: 520px) {
  .news-card {
    grid-template-columns: 0.85fr 1fr;
  }
}

.news-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 55px -32px rgba(5, 18, 41, 0.28);
  border-color: transparent;
}

.news-card-image {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 220px;
  display: block;
}

.news-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s var(--ease-premium);
}

.news-card:hover .news-card-image img {
  transform: scale(1.08);
}

.news-date {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 16px;
  background: rgba(5, 18, 41, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 4px;
  color: var(--color-white);
  line-height: 1.1;
}

.news-date-day {
  font-size: 1.4rem;
  font-weight: 800;
}

.news-date-month {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 2px;
}

.news-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(24px, 3vw, 32px);
}

.news-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.news-category {
  padding: 5px 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-dark);
}

.news-comments {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.news-card-body h3 {
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-dark);
  margin-bottom: 14px;
  transition: color 0.4s var(--ease-premium);
}

.news-card:hover .news-card-body h3 {
  color: var(--color-primary);
}

.news-card-body h3 a {
  color: inherit;
}

.news-card-body p {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.65;
  margin-bottom: 24px;
}

.news-cta {
  margin-top: auto;
}

/* ============================================
   FAQ — image + "call us" card beside a single-open
   accordion (GSAP-animated, same height/fade
   technique as the pricing accordion).
   ============================================ */
.faq-section {
  position: relative;
  background: var(--color-hero-bg);
}

.faq-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 960px) {
  .faq-layout {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 48px;
  }
}

.faq-image {
  position: relative;
  isolation: isolate;
  border-radius: 20px;
  overflow: hidden;
  min-height: 420px;
}

.faq-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
}

.faq-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(5, 18, 41, 0.6) 0%, rgba(5, 18, 41, 0.15) 38%, rgba(5, 18, 41, 0) 58%);
}

.faq-image-caption {
  position: absolute;
  top: clamp(20px, 3vw, 28px);
  left: clamp(20px, 3vw, 28px);
  right: 20px;
  z-index: 2;
  color: var(--color-white);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800;
  line-height: 1.2;
  max-width: 260px;
}

.faq-call-card {
  position: absolute;
  right: clamp(16px, 2.5vw, 24px);
  bottom: clamp(16px, 2.5vw, 24px);
  z-index: 2;
  width: min(210px, 58%);
  background: var(--color-primary);
  border-radius: 16px;
  padding: clamp(18px, 2.5vw, 22px);
  box-shadow: 0 24px 45px -20px rgba(0, 117, 255, 0.55);
}

.faq-call-label {
  display: block;
  color: var(--color-white);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  margin-bottom: 18px;
}

.faq-call-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-dark);
  color: var(--color-white);
  margin-bottom: 14px;
  transition: background-color 0.4s var(--ease-premium), color 0.4s var(--ease-premium), transform 0.4s var(--ease-premium);
}

.faq-call-icon:hover {
  background: var(--color-white);
  color: var(--color-dark);
  transform: scale(1.08);
}

.faq-call-number {
  display: block;
  color: var(--color-white);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- accordion ---- */
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  background: var(--color-white);
  border-radius: 16px;
  box-shadow: 0 16px 34px -26px rgba(5, 18, 41, 0.16);
  overflow: hidden;
  transition: box-shadow 0.4s var(--ease-premium);
}

.faq-item.is-active {
  box-shadow: 0 22px 44px -22px rgba(5, 18, 41, 0.22);
}

.faq-item-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(18px, 2.4vw, 24px);
  background: none;
  border: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.faq-item-question {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-dark);
}

.faq-item-toggle {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
  transition: background-color 0.4s var(--ease-premium), border-color 0.4s var(--ease-premium),
    color 0.4s var(--ease-premium), transform 0.4s var(--ease-premium);
}

.faq-item-header:hover .faq-item-toggle {
  transform: scale(1.08);
}

.faq-item.is-active .faq-item-toggle {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-white);
}

.faq-item-toggle svg {
  position: absolute;
  transition: opacity 0.35s var(--ease-premium), transform 0.35s var(--ease-premium);
}

.faq-item-toggle .icon-minus {
  opacity: 0;
  transform: rotate(-90deg) scale(0.6);
}

.faq-item-toggle .icon-plus {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.faq-item.is-active .faq-item-toggle .icon-plus {
  opacity: 0;
  transform: rotate(90deg) scale(0.6);
}

.faq-item.is-active .faq-item-toggle .icon-minus {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.faq-item-panel {
  height: 0;
  overflow: hidden;
}

.faq-item-panel-inner {
  padding: 0 clamp(18px, 2.4vw, 24px) clamp(20px, 2.4vw, 26px);
}

.faq-item-divider {
  border-top: 1px dashed var(--color-border);
  margin-bottom: 16px;
}

.faq-item-panel-inner p {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.7;
}

/* ============================================
   CTA banner — sits in its own section, but pulls
   itself down via negative margin so it visually
   overlaps the footer that follows. The overlap only
   reads correctly because the banner gets an explicit
   z-index; without one the footer (painted later)
   would cover it, same pitfall as the process-section
   connector fixed earlier.
   ============================================ */
.cta-section {
  position: relative;
  background: var(--color-hero-bg);
  padding-top: clamp(40px, 6vw, 64px);
}

.cta-banner {
  position: relative;
  z-index: 2;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 32px;
  background: var(--color-primary);
  border-radius: 24px;
  padding: clamp(32px, 5vw, 56px);
  margin-bottom: -60px;
  box-shadow: 0 40px 70px -30px rgba(0, 117, 255, 0.45);
  overflow: hidden;
}

@media (min-width: 768px) {
  .cta-banner {
    grid-template-columns: 1.2fr 1fr;
  }

  .cta-banner {
    margin-bottom: -90px;
  }
}

.cta-banner-content h2 {
  color: var(--color-white);
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: clamp(24px, 3vw, 34px);
}

.cta-banner-btn.btn-dark .btn-icon {
  background: var(--color-white);
  color: var(--color-dark);
}

/* this button's hover departs from the shared .btn-dark
   sweep (which fills to primary blue, keeping white text)
   — here the fill goes white and the text/icon invert to
   dark, so the whole pill reads as a clean white button
   on hover instead of just swapping its accent color */
.cta-banner-btn.btn-dark::before {
  background: var(--color-white);
}

.cta-banner-btn.btn-dark:hover {
  color: var(--color-dark);
}

.cta-banner-btn.btn-dark:hover .btn-icon {
  background: var(--color-dark);
  color: var(--color-white);
}

.cta-banner-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}

.cta-banner-visual::before {
  content: "";
  position: absolute;
  inset: 6% 4%;
  z-index: 0;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
}

.cta-banner-blob {
  position: relative;
  z-index: 1;
  width: 82%;
  aspect-ratio: 4 / 3;
  border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
  overflow: hidden;
}

.cta-banner-blob img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================
   Footer
   ============================================ */
.site-footer {
  position: relative;
  background: var(--color-hero-bg);
  padding-top: clamp(120px, 14vw, 160px);
  padding-bottom: clamp(28px, 4vw, 40px);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-bottom: clamp(36px, 5vw, 52px);
}

@media (min-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1.3fr 0.85fr 0.85fr 1.1fr;
  }
}

.footer-brand p {
  margin-top: 18px;
  max-width: 320px;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.65;
}

.footer-badges {
  display: flex;
  gap: 20px;
  margin-top: 22px;
}

.footer-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.footer-badge strong {
  color: var(--color-dark);
  font-size: 1.05rem;
}

.footer-links h3,
.footer-newsletter h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 20px;
}

.footer-links ul {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  transition: color 0.35s var(--ease-premium);
}

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

.footer-tag-new {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.footer-newsletter h3 {
  max-width: 260px;
  line-height: 1.3;
}

.newsletter-form {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-white);
  border-radius: 999px;
  padding: 6px 6px 6px 20px;
  box-shadow: 0 16px 34px -26px rgba(5, 18, 41, 0.25);
}

.newsletter-form input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font-family: var(--font-base);
  font-size: 0.92rem;
  color: var(--color-dark);
}

.newsletter-form input:focus {
  outline: none;
}

.newsletter-form input::placeholder {
  color: var(--color-text-muted);
}

.newsletter-form button {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--color-primary);
  color: var(--color-white);
  cursor: pointer;
  transition: background-color 0.35s var(--ease-premium), transform 0.35s var(--ease-premium);
}

.newsletter-form button:hover {
  background: var(--color-dark);
  transform: scale(1.06);
}

.footer-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  cursor: pointer;
}

.footer-check input {
  margin-top: 3px;
  accent-color: var(--color-primary);
}

.footer-check a {
  color: var(--color-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--color-border);
}

.footer-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-dark);
  font-size: 0.9rem;
  font-weight: 600;
  transition: color 0.35s var(--ease-premium);
}

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

.footer-social {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  transition: background-color 0.35s var(--ease-premium), color 0.35s var(--ease-premium), border-color 0.35s var(--ease-premium);
}

.footer-social a:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.footer-copyright {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* ---- scroll-to-top ---- */
.scroll-top {
  position: fixed;
  right: clamp(18px, 3vw, 28px);
  bottom: clamp(18px, 3vw, 28px);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--color-white);
  color: var(--color-dark);
  box-shadow: 0 16px 34px -18px rgba(5, 18, 41, 0.4);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.4s var(--ease-premium), transform 0.4s var(--ease-premium),
    background-color 0.35s var(--ease-premium), color 0.35s var(--ease-premium),
    visibility 0s linear 0.4s;
}

.scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.4s var(--ease-premium), transform 0.4s var(--ease-premium),
    background-color 0.35s var(--ease-premium), color 0.35s var(--ease-premium);
}

.scroll-top:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* ============================================
   Search overlay — opened from the header's
   Explore button. Slides down over the whole
   viewport width (covering the header too, since
   its own z-index sits above it); the rest of the
   page gets blurred and made inert behind it.
   ============================================ */
body.search-open,
body.menu-open {
  overflow: hidden;
}

body.search-open .site-header,
body.search-open main,
body.search-open .site-footer,
body.search-open .scroll-top,
body.menu-open .site-header,
body.menu-open main,
body.menu-open .site-footer,
body.menu-open .scroll-top {
  filter: blur(6px);
  pointer-events: none;
  user-select: none;
  transition: filter 0.4s var(--ease-premium);
}

.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--color-dark);
  padding: clamp(28px, 4vw, 44px) 0;
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.5s var(--ease-premium), opacity 0.4s var(--ease-premium), visibility 0s linear 0.5s;
}

body.search-open .search-overlay {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform 0.5s var(--ease-premium), opacity 0.4s var(--ease-premium);
}

.search-overlay-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(24px, 3vw, 36px);
}

.search-overlay-title {
  max-width: 640px;
  color: var(--color-white);
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  font-weight: 700;
  line-height: 1.3;
}

.search-overlay-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--color-white);
  cursor: pointer;
  transition: background-color 0.35s var(--ease-premium), transform 0.5s var(--ease-premium);
}

.search-overlay-close:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: rotate(90deg);
}

.search-form {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  padding-bottom: 14px;
  transition: border-color 0.35s var(--ease-premium);
}

.search-form:focus-within {
  border-color: var(--color-primary);
}

.search-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  color: var(--color-white);
  font-family: var(--font-base);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
}

.search-input:focus {
  outline: none;
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.search-form button[type="submit"] {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: none;
  color: var(--color-white);
  cursor: pointer;
  transition: background-color 0.35s var(--ease-premium), border-color 0.35s var(--ease-premium);
}

.search-form button[type="submit"]:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.search-results {
  margin-top: 20px;
  max-height: 46vh;
  overflow-y: auto;
}

.search-result {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 4px;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: none;
  color: var(--color-white);
  text-align: left;
  font-family: var(--font-base);
  cursor: pointer;
  transition: padding-left 0.3s var(--ease-premium), color 0.3s var(--ease-premium);
}

.search-result:hover {
  padding-left: 12px;
  color: var(--color-primary);
}

.search-result-title {
  font-size: 0.95rem;
  font-weight: 600;
}

.search-result-title mark {
  background: none;
  color: var(--color-primary);
  font-weight: 700;
}

.search-result:hover .search-result-title mark {
  color: inherit;
}

.search-result-category {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.search-hint,
.search-empty {
  padding: 13px 4px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.5);
}

/* ============================================
   Side menu — opened from the header's Menu
   button. Slides in from the right (the search
   overlay drops from the top, so the two read as
   distinct panels); shares the same page-blur
   mechanism as search (body.menu-open).
   ============================================ */
.side-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 210;
  width: min(440px, 100vw);
  overflow-y: auto;
  background: var(--color-dark);
  padding: clamp(24px, 3vw, 36px);
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  box-shadow: -30px 0 70px -30px rgba(0, 0, 0, 0.5);
  transition: transform 0.5s var(--ease-premium), opacity 0.4s var(--ease-premium), visibility 0s linear 0.5s;
}

body.menu-open .side-menu {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  transition: transform 0.5s var(--ease-premium), opacity 0.4s var(--ease-premium);
}

.side-menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(24px, 3vw, 36px);
}

/* The logo image has dark navy text, so on the side menu's dark
   background it needs a light chip behind it to stay legible. */
.side-menu-logo {
  background: var(--color-white);
  padding: 8px 14px;
  border-radius: 10px;
}

.side-menu-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--color-white);
  cursor: pointer;
  transition: background-color 0.35s var(--ease-premium), transform 0.5s var(--ease-premium);
}

.side-menu-close:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: rotate(90deg);
}

.side-menu-search {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  transition: border-color 0.35s var(--ease-premium);
}

.side-menu-search:focus-within {
  border-color: var(--color-primary);
}

.side-menu-search-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  color: var(--color-white);
  font-family: var(--font-base);
  font-size: 0.95rem;
}

.side-menu-search-input:focus {
  outline: none;
}

.side-menu-search-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.side-menu-search button[type="submit"] {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: background-color 0.35s var(--ease-premium), color 0.35s var(--ease-premium);
}

.side-menu-search button[type="submit"]:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.side-menu-search-results {
  margin-bottom: clamp(20px, 3vw, 32px);
  max-height: 30vh;
  overflow-y: auto;
}

.side-menu-search-results:empty {
  margin-bottom: 0;
}

.side-menu-section {
  margin-top: clamp(28px, 4vw, 40px);
}

.side-menu-section h3 {
  color: var(--color-white);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.side-menu-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin-bottom: 20px;
}

.side-menu-contact {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.side-menu-contact dt {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 4px;
}

.side-menu-contact dd a,
.side-menu-contact dd {
  color: var(--color-white);
  font-size: 1rem;
  font-weight: 600;
}

.side-menu-contact dd a {
  transition: color 0.3s var(--ease-premium);
}

.side-menu-contact dd a:hover {
  color: var(--color-primary);
}

.side-menu-social {
  display: flex;
  align-items: center;
  gap: 12px;
}

.side-menu-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
  transition: background-color 0.35s var(--ease-premium), transform 0.35s var(--ease-premium);
}

.side-menu-social a:hover {
  background: var(--color-primary);
  transform: translateY(-3px);
}

@media (max-width: 480px) {
  .side-menu {
    width: 100vw;
  }
}

/* ============================================
   Contact page — banner, info cards, form + map
   ============================================ */
.page-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: clamp(260px, 34vw, 400px);
  padding: 40px 20px;
}

.page-banner img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}

.page-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, rgba(0, 117, 255, 0.72) 0%, rgba(5, 18, 41, 0.92) 100%);
  mix-blend-mode: multiply;
}

.page-banner-content {
  position: relative;
}

.page-banner-heading {
  color: var(--color-white);
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
}

.page-banner-crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(5, 18, 41, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.85rem;
  font-weight: 600;
}

.page-banner-crumb svg {
  flex-shrink: 0;
}

.page-banner-crumb a {
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.3s var(--ease-premium);
}

.page-banner-crumb a:hover {
  color: var(--color-white);
}

.page-banner-crumb .crumb-sep {
  opacity: 0.5;
}

.page-banner-crumb strong {
  color: var(--color-white);
  font-weight: 700;
}

/* ---- contact info cards ---- */
.contact-info-section {
  position: relative;
  background: var(--color-hero-bg);
}

.contact-info-header {
  max-width: 560px;
  margin: 0 auto clamp(32px, 5vw, 48px);
  text-align: center;
}

.contact-info-heading {
  margin-top: 14px;
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  font-weight: 800;
  color: var(--color-dark);
}

.contact-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 640px) {
  .contact-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .contact-info-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.contact-info-card {
  background: var(--color-white);
  border-radius: 20px;
  padding: clamp(28px, 3vw, 36px) 24px;
  text-align: center;
  box-shadow: 0 20px 40px -30px rgba(5, 18, 41, 0.2);
  transition: transform 0.5s var(--ease-premium), box-shadow 0.5s var(--ease-premium);
}

.contact-info-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 55px -25px rgba(5, 18, 41, 0.28);
}

.contact-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-hero-bg);
  color: var(--color-primary);
  margin-bottom: 18px;
  transition: background-color 0.4s var(--ease-premium), color 0.4s var(--ease-premium), transform 0.4s var(--ease-premium);
}

.contact-info-card:hover .contact-info-icon {
  background: var(--color-primary);
  color: var(--color-white);
  transform: scale(1.08) rotate(-6deg);
}

.contact-info-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 10px;
}

.contact-info-card p {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.contact-info-card a {
  color: var(--color-text-muted);
  transition: color 0.3s var(--ease-premium);
}

.contact-info-card a:hover {
  color: var(--color-primary);
}

.contact-info-link {
  display: inline-block;
  margin-top: 2px;
  color: var(--color-primary) !important;
  font-weight: 700;
}

/* ---- contact form + map ---- */
.contact-form-section {
  position: relative;
  background: var(--color-white);
}

.contact-form-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 960px) {
  .contact-form-layout {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}

.contact-form-card {
  background: var(--color-hero-bg);
  border-radius: 24px;
  padding: clamp(28px, 4vw, 44px);
}

.contact-form-card h2 {
  max-width: 420px;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-dark);
  margin-bottom: clamp(24px, 3vw, 32px);
}

.contact-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px 28px;
  margin-bottom: 28px;
}

@media (min-width: 560px) {
  .contact-form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-field {
  position: relative;
}

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

.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: none;
  padding: 8px 20px 12px 0;
  font-family: var(--font-base);
  font-size: 0.95rem;
  color: var(--color-dark);
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.3s var(--ease-premium);
}

.contact-field textarea {
  resize: none;
  min-height: 64px;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: var(--color-text-muted);
}

.contact-field select {
  cursor: pointer;
  color: var(--color-text-muted);
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.contact-field-icon {
  position: absolute;
  right: 4px;
  bottom: 14px;
  pointer-events: none;
  color: var(--color-text-muted);
}

.contact-form-note {
  margin-top: 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s var(--ease-premium), transform 0.4s var(--ease-premium);
}

.contact-form-note.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.contact-map {
  position: relative;
  isolation: isolate;
  border-radius: 24px;
  overflow: hidden;
  min-height: 340px;
}

.contact-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.15);
}

.contact-map-open {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-dark);
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: 0 14px 30px -18px rgba(5, 18, 41, 0.4);
  transition: background-color 0.3s var(--ease-premium), color 0.3s var(--ease-premium);
}

.contact-map-open:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* ============================================
   Blog listing page — post grid (2 pages swapped
   via JS, see js/blog.js) beside a sidebar.
   ============================================ */
.blog-section {
  position: relative;
  /* light bg behind pure-white cards for contrast — matching
     process/pricing/contact-info sections elsewhere on the
     site; this was previously white-on-white, so cards had
     no visible boundary beyond a faint shadow */
  background: var(--color-hero-bg);
}

.blog-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}

@media (min-width: 960px) {
  .blog-layout {
    grid-template-columns: 2fr 1fr;
  }
}

.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

/* [hidden] and .blog-grid are equal specificity and this
   class rule loads later, so without this it silently wins
   and the hidden attribute gets ignored — toggled via JS
   when switching pagination pages */
.blog-grid[hidden] {
  display: none;
}

@media (min-width: 640px) {
  .blog-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.blog-empty {
  grid-column: 1 / -1;
  padding: 40px 20px;
  text-align: center;
  color: var(--color-text-muted);
}

.blog-card {
  background: var(--color-white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 40px -30px rgba(5, 18, 41, 0.22);
  transition: transform 0.5s var(--ease-premium), box-shadow 0.5s var(--ease-premium);
}

.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 55px -25px rgba(5, 18, 41, 0.28);
}

.blog-card-image {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: block;
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s var(--ease-premium);
}

.blog-card:hover .blog-card-image img {
  transform: scale(1.08);
}

.blog-card-body {
  padding: clamp(20px, 2.5vw, 26px);
}

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.blog-card-category {
  padding: 5px 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-dark);
}

.blog-card-author {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.blog-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-dark);
  margin-bottom: 20px;
  transition: color 0.3s var(--ease-premium);
}

.blog-card:hover .blog-card-title {
  color: var(--color-primary);
}

.blog-card-title a {
  color: inherit;
}

.blog-card-readmore {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--color-dark);
}

.blog-card-readmore-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-dark);
  color: var(--color-white);
  transition: background-color 0.3s var(--ease-premium), transform 0.3s var(--ease-premium);
}

.blog-card-readmore:hover .blog-card-readmore-icon {
  background: var(--color-primary);
  transform: rotate(45deg);
}

/* ---- pagination ---- */
.blog-pagination {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(32px, 4vw, 48px);
}

.blog-page-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-dark);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.3s var(--ease-premium), color 0.3s var(--ease-premium), border-color 0.3s var(--ease-premium);
}

.blog-page-btn:hover:not(.is-active) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.blog-page-btn.is-active {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-white);
}

.blog-page-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: none;
  color: var(--color-dark);
  cursor: pointer;
  transition: background-color 0.3s var(--ease-premium), color 0.3s var(--ease-premium), border-color 0.3s var(--ease-premium);
}

.blog-page-next:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* ---- sidebar ---- */
.blog-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sidebar-widget {
  /* white, matching the cards — the section itself now
     carries the hero-bg tint, so this needs to contrast
     against THAT, same reasoning as the card fix above */
  background: var(--color-white);
  border-radius: 20px;
  padding: clamp(24px, 3vw, 28px);
  box-shadow: 0 20px 40px -30px rgba(5, 18, 41, 0.18);
}

.sidebar-widget h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 20px;
}

.sidebar-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-hero-bg);
  border-radius: 12px;
  padding: 6px 6px 6px 18px;
}

.sidebar-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font-family: var(--font-base);
  font-size: 0.92rem;
  color: var(--color-dark);
}

.sidebar-search input:focus {
  outline: none;
}

.sidebar-search input::placeholder {
  color: var(--color-text-muted);
}

.sidebar-search button {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: none;
  background: var(--color-primary);
  color: var(--color-white);
  cursor: pointer;
  transition: background-color 0.3s var(--ease-premium);
}

.sidebar-search button:hover {
  background: var(--color-dark);
}

.related-post-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.related-post-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.related-post-item img {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
}

.related-post-item strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.4;
  margin-bottom: 4px;
  transition: color 0.3s var(--ease-premium);
}

.related-post-item:hover strong {
  color: var(--color-primary);
}

.related-post-item em {
  display: block;
  font-style: normal;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.category-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.category-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-hero-bg);
  border-radius: 12px;
  padding: 14px 18px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-dark);
}

.category-item span:last-child {
  color: var(--color-text-muted);
  font-weight: 600;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag-pill {
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--color-hero-bg);
  color: var(--color-dark);
  font-size: 0.85rem;
  font-weight: 600;
  transition: background-color 0.3s var(--ease-premium), color 0.3s var(--ease-premium);
}

.tag-pill:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* ---- breadcrumb long-title truncation (blog details) ---- */
.page-banner-crumb .crumb-current {
  max-width: clamp(120px, 40vw, 320px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: bottom;
}

/* ---- blog details ---- */
.blog-details-section {
  position: relative;
  background: var(--color-hero-bg);
}

.blog-details-article {
  display: flex;
  flex-direction: column;
}

.blog-details-image {
  border-radius: 24px;
  overflow: hidden;
}

.blog-details-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.blog-details-title {
  margin-top: 28px;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--color-dark);
}

.blog-details-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 24px;
  padding: 18px 24px;
  border: 1px dashed var(--color-border);
  border-radius: 16px;
}

.blog-details-meta-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 20px;
  border-right: 1px dashed var(--color-border);
}

.blog-details-meta-item:last-child {
  border-right: none;
  padding-right: 0;
}

@media (max-width: 640px) {
  .blog-details-meta-item {
    width: 100%;
    padding-right: 0;
    padding-bottom: 16px;
    border-right: none;
    border-bottom: 1px dashed var(--color-border);
  }

  .blog-details-meta-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }
}

.blog-details-author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.blog-details-meta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  flex-shrink: 0;
}

.blog-details-meta-item span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.blog-details-meta-item em {
  font-style: normal;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.blog-details-meta-item strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-dark);
}

/* ---- rich text body ---- */
.rich-text {
  margin-top: 28px;
  color: var(--color-text-muted);
  font-size: 0.98rem;
  line-height: 1.85;
}

.rich-text > * + * {
  margin-top: 22px;
}

.rich-text h2,
.rich-text h3 {
  color: var(--color-dark);
  font-weight: 700;
  line-height: 1.3;
}

.rich-text h2 {
  font-size: clamp(1.4rem, 2.2vw, 1.7rem);
  margin-top: 36px;
}

.rich-text h3 {
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
  margin-top: 32px;
}

.rich-text strong {
  color: var(--color-dark);
  font-weight: 700;
}

.rich-text ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
}

.rich-text ul li {
  position: relative;
  padding-left: 26px;
}

.rich-text ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}

.rich-text-quote {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: clamp(24px, 3vw, 32px);
  color: var(--color-dark);
}

.rich-text-quote svg {
  color: var(--color-primary);
  margin-bottom: 14px;
}

.rich-text-quote p {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: 14px;
}

.rich-text-quote cite {
  display: block;
  position: relative;
  padding-left: 26px;
  font-style: normal;
  font-weight: 600;
  color: var(--color-text-muted);
}

.rich-text-quote cite::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 16px;
  height: 1px;
  background: var(--color-text-muted);
}

.rich-text-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 560px) {
  .rich-text-gallery {
    grid-template-columns: 1fr 1fr;
  }
}

.rich-text-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

/* ---- tags + share row ---- */
.blog-details-footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 24px;
  margin-top: 36px;
  border-top: 1px dashed var(--color-border);
  border-bottom: 1px dashed var(--color-border);
}

.blog-details-tags,
.blog-details-share {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.blog-details-tags > span:first-child,
.blog-details-share > span:first-child {
  font-weight: 700;
  color: var(--color-dark);
  font-size: 0.92rem;
}

.blog-details-share a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-dark);
  transition: background-color 0.3s var(--ease-premium), color 0.3s var(--ease-premium);
}

.blog-details-share a:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* ---- prev/next pager ---- */
.blog-details-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
  padding: 16px 24px;
  background: var(--color-white);
  border-radius: 16px;
  box-shadow: 0 20px 40px -30px rgba(5, 18, 41, 0.2);
}

.blog-details-pager-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  color: var(--color-dark);
  transition: color 0.3s var(--ease-premium);
}

.blog-details-pager-link:hover {
  color: var(--color-primary);
}

.blog-details-pager-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  transition: background-color 0.3s var(--ease-premium), color 0.3s var(--ease-premium), border-color 0.3s var(--ease-premium);
}

.blog-details-pager-link:hover .blog-details-pager-icon {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.blog-details-pager-grid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--color-dark);
  color: var(--color-white);
  transition: background-color 0.3s var(--ease-premium);
}

.blog-details-pager-grid:hover {
  background: var(--color-primary);
}

/* ---- comments ---- */
.blog-comments {
  margin-top: 48px;
}

.blog-comments-heading {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 24px;
}

.comment-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.comment-item {
  display: flex;
  gap: 16px;
  background: var(--color-white);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 16px 34px -28px rgba(5, 18, 41, 0.18);
}

.comment-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.comment-body {
  flex: 1;
  min-width: 0;
}

.comment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.comment-head strong {
  font-size: 0.98rem;
  color: var(--color-dark);
}

.comment-reply {
  border: none;
  background: none;
  padding: 0;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.85rem;
  font-family: var(--font-base);
  cursor: pointer;
  flex-shrink: 0;
}

.comment-date {
  display: block;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}

.comment-body > p {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.7;
}

.comment-item--reply {
  margin-top: 18px;
  background: var(--color-hero-bg);
  box-shadow: none;
}

/* ---- comment form ---- */
.comment-form {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.comment-form textarea,
.comment-form input {
  width: 100%;
  border: none;
  border-radius: 14px;
  padding: 16px 18px;
  background: var(--color-white);
  box-shadow: 0 16px 34px -30px rgba(5, 18, 41, 0.2);
  font-family: var(--font-base);
  font-size: 0.92rem;
  color: var(--color-dark);
}

.comment-form textarea {
  min-height: 130px;
  resize: vertical;
}

.comment-form input:focus,
.comment-form textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.comment-form input::placeholder,
.comment-form textarea::placeholder {
  color: var(--color-text-muted);
}

.comment-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 640px) {
  .comment-form-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.comment-form .btn {
  align-self: flex-start;
}

/* ============================================
   About page — feature cards, mission/vision
   and team sections
   ============================================ */
.about-features-section {
  position: relative;
  background: var(--color-hero-bg);
}

.about-features-top {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: clamp(32px, 5vw, 48px);
}

@media (min-width: 768px) {
  .about-features-top {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
  }
}

.about-features-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: 560px;
}

.about-intro-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(48px, 7vw, 64px);
  align-items: center;
}

@media (min-width: 960px) {
  .about-intro-grid {
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(40px, 6vw, 70px);
  }
}

.about-intro-image {
  position: relative;
}

.about-intro-image-inner {
  border-radius: 24px;
  overflow: hidden;
  min-height: clamp(320px, 42vw, 460px);
}

.about-intro-image-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-intro-stat {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 5;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--color-white);
  border-radius: 16px;
  padding: clamp(18px, 2.5vw, 26px);
  box-shadow: 0 20px 45px -20px rgba(5, 18, 41, 0.28);
}

@media (max-width: 640px) {
  .about-intro-stat {
    max-width: calc(100% - 32px);
  }
}

.about-intro-stat-value {
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 800;
  color: var(--color-dark);
  line-height: 1;
}

.about-intro-stat-label {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.about-intro-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.about-intro-content .about-features-heading {
  margin-top: 2px;
}

.about-intro-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.about-intro-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--color-hero-bg);
  color: var(--color-dark);
  font-size: 0.85rem;
  font-weight: 600;
}

.about-intro-chip svg {
  color: var(--color-primary);
  flex-shrink: 0;
}

.about-features-heading {
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-dark);
}

.about-features-cta {
  flex-shrink: 0;
}

.about-features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

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

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

.feature-card {
  background: var(--color-white);
  border-radius: 20px;
  padding: clamp(28px, 3vw, 36px);
  box-shadow: 0 20px 40px -30px rgba(5, 18, 41, 0.2);
  transition: transform 0.5s var(--ease-premium), box-shadow 0.5s var(--ease-premium);
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 55px -25px rgba(5, 18, 41, 0.28);
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: var(--color-hero-bg);
  color: var(--color-primary);
  margin-bottom: 20px;
  transition: background-color 0.4s var(--ease-premium), color 0.4s var(--ease-premium),
    transform 0.4s var(--ease-premium);
}

.feature-card:hover .feature-icon {
  background: var(--color-primary);
  color: var(--color-white);
  transform: scale(1.08) rotate(-6deg);
}

.feature-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 10px;
}

.feature-card p {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.7;
}

/* ---- mission / vision ---- */
.mv-section {
  position: relative;
  background: var(--color-white);
  overflow: hidden;
}

.mv-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(56px, 8vw, 64px);
  align-items: center;
}

@media (min-width: 960px) {
  .mv-grid {
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(40px, 6vw, 70px);
  }
}

.mv-image {
  position: relative;
}

.mv-image-inner {
  border-radius: 24px;
  overflow: hidden;
  min-height: clamp(320px, 42vw, 460px);
}

.mv-image-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mv-progress-card {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 5;
  width: min(250px, calc(100% - 40px));
  background: rgba(5, 18, 41, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: clamp(18px, 2.4vw, 22px);
  box-shadow: 0 20px 40px -22px rgba(5, 18, 41, 0.55);
}

.mv-progress-title {
  color: var(--color-white);
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 16px;
}

.mv-progress-row {
  margin-bottom: 14px;
}

.mv-progress-row:last-child {
  margin-bottom: 0;
}

.mv-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 0.8rem;
}

.mv-progress-label {
  color: rgba(255, 255, 255, 0.75);
}

.mv-progress-value {
  color: var(--color-white);
  font-weight: 700;
}

.mv-progress-track {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}

.mv-progress-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: 999px;
  background: var(--color-primary);
}

.mv-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mv-heading {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-dark);
}

.mv-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 560px) {
  .mv-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.mv-card {
  background: var(--color-hero-bg);
  border-radius: 18px;
  padding: clamp(20px, 2.6vw, 26px);
}

.mv-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 10px;
}

.mv-card p {
  color: var(--color-text-muted);
  font-size: 0.88rem;
  line-height: 1.6;
  margin-bottom: 16px;
}

.mv-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mv-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-dark);
}

.mv-list svg {
  flex-shrink: 0;
  color: var(--color-primary);
}

.mv-cta {
  width: 100%;
  justify-content: center;
}

/* ---- team ---- */
.team-section {
  position: relative;
  background: var(--color-hero-bg);
}

.team-header {
  max-width: 620px;
  margin: 0 auto clamp(36px, 5vw, 56px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.team-heading {
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-dark);
}

.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

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

@media (min-width: 1024px) {
  .team-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.team-card {
  background: var(--color-white);
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 20px 40px -30px rgba(5, 18, 41, 0.2);
  transition: transform 0.5s var(--ease-premium), box-shadow 0.5s var(--ease-premium);
}

.team-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 55px -25px rgba(5, 18, 41, 0.28);
}

.team-photo {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 3 / 3.4;
  isolation: isolate;
  background: var(--color-dark);
}

.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease-premium);
}

.team-card:hover .team-photo img {
  transform: scale(1.08);
}

.team-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(5, 18, 41, 0.85) 0%, rgba(5, 18, 41, 0) 55%);
  opacity: 0;
  transition: opacity 0.45s var(--ease-premium);
}

.team-card:hover .team-photo::after {
  opacity: 1;
}

.team-social {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 22px 16px;
}

.team-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-dark);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s var(--ease-premium), transform 0.4s var(--ease-premium),
    background-color 0.3s var(--ease-premium), color 0.3s var(--ease-premium);
}

.team-card:hover .team-social a {
  opacity: 1;
  transform: translateY(0);
}

.team-social a:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.team-social a:nth-child(1) {
  transition-delay: 0.03s;
}
.team-social a:nth-child(2) {
  transition-delay: 0.08s;
}
.team-social a:nth-child(3) {
  transition-delay: 0.13s;
}
.team-social a:nth-child(4) {
  transition-delay: 0.18s;
}

.team-info {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-top: 18px;
}

.team-name {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-dark);
}

.team-role {
  display: block;
  margin-top: 2px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.team-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-primary);
  flex-shrink: 0;
  box-shadow: 0 10px 20px -14px rgba(5, 18, 41, 0.3);
  transition: background-color 0.3s var(--ease-premium), color 0.3s var(--ease-premium),
    transform 0.3s var(--ease-premium);
}

.team-contact:hover {
  background: var(--color-primary);
  color: var(--color-white);
  transform: scale(1.1);
}

/* ============================================
   Portfolio page — full project grid + pagination
   ============================================ */
.portfolio-page-section {
  position: relative;
  background: var(--color-hero-bg);
}

.portfolio-page-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: 620px;
  margin-bottom: clamp(32px, 5vw, 48px);
}

.portfolio-page-heading {
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-dark);
}

.portfolio-page-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 640px) {
  .portfolio-page-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.portfolio-page-grid[hidden] {
  display: none;
}

.portfolio-page-card {
  background: var(--color-white);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px -30px rgba(5, 18, 41, 0.22);
  transition: transform 0.5s var(--ease-premium), box-shadow 0.5s var(--ease-premium);
}

.portfolio-page-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 55px -25px rgba(5, 18, 41, 0.28);
}

.portfolio-page-image {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 4 / 3.3;
  display: block;
}

.portfolio-page-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s var(--ease-premium);
}

.portfolio-page-card:hover .portfolio-page-image img {
  transform: scale(1.08);
}

.portfolio-page-arrow {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  opacity: 0;
  transform: scale(0.5) translateY(8px);
  transition: opacity 0.4s var(--ease-premium), transform 0.4s var(--ease-premium);
}

.portfolio-page-card:hover .portfolio-page-arrow {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* touch devices can "stick" the :hover state after a tap, leaving
   the arrow visibly stuck over the image — hide it outright on
   mobile instead */
@media (max-width: 768px) {
  .portfolio-page-arrow {
    display: none;
  }
}

.portfolio-page-body {
  padding: clamp(20px, 2.5vw, 26px);
}

.portfolio-page-tag {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--color-hero-bg);
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 14px;
}

.portfolio-page-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-dark);
  transition: color 0.3s var(--ease-premium);
}

.portfolio-page-card:hover h3 {
  color: var(--color-primary);
}

/* ---- pagination (mirrors the blog listing widget) ---- */
.portfolio-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(36px, 5vw, 56px);
}

.portfolio-page-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-dark);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.3s var(--ease-premium), color 0.3s var(--ease-premium),
    border-color 0.3s var(--ease-premium);
}

.portfolio-page-btn:hover:not(.is-active) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.portfolio-page-btn.is-active {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-white);
}

.portfolio-page-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: none;
  color: var(--color-dark);
  cursor: pointer;
  transition: background-color 0.3s var(--ease-premium), color 0.3s var(--ease-premium),
    border-color 0.3s var(--ease-premium);
}

.portfolio-page-next:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* ============================================
   Portfolio details page — reuses .blog-layout,
   .blog-details-article/-image, .rich-text(-gallery)
   and .blog-details-pager* from the blog details
   template; only the checklist and sidebar cards
   below are page-specific.
   ============================================ */
.rich-text .portfolio-checklist {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px 28px;
  list-style: none;
}

@media (min-width: 560px) {
  .rich-text .portfolio-checklist {
    grid-template-columns: 1fr 1fr;
  }
}

.rich-text .portfolio-checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 0;
  font-weight: 600;
  color: var(--color-dark);
  font-size: 0.95rem;
}

.rich-text .portfolio-checklist li::before {
  content: none;
}

.portfolio-checklist svg {
  flex-shrink: 0;
  color: var(--color-white);
  background: var(--color-primary);
  border-radius: 50%;
  padding: 4px;
}

.portfolio-details-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.portfolio-info-card {
  background: var(--color-white);
  border-radius: 20px;
  padding: clamp(22px, 2.6vw, 28px);
  box-shadow: 0 20px 40px -30px rgba(5, 18, 41, 0.22);
}

.portfolio-info-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 20px;
}

.portfolio-info-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.portfolio-info-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.portfolio-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  flex-shrink: 0;
}

.portfolio-info-row span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.portfolio-info-row em {
  font-style: normal;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.portfolio-info-row strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-dark);
}

.portfolio-cta-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-dark);
  border-radius: 20px;
  padding: clamp(24px, 2.8vw, 30px) clamp(24px, 2.8vw, 30px) 0;
}

.portfolio-cta-card-heading {
  font-size: clamp(2.1rem, 3.6vw, 2.6rem);
  font-weight: 800;
  line-height: 1;
  color: var(--color-white);
}

.portfolio-cta-card-sub {
  display: block;
  margin-top: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

.portfolio-cta-card-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 700;
  font-size: 0.9rem;
  transition: background-color 0.3s var(--ease-premium);
}

.portfolio-cta-card-phone:hover {
  background: var(--color-primary-dark);
}

.portfolio-cta-card-photo {
  display: block;
  width: 100%;
  margin-top: 24px;
}

.portfolio-cta-card-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-top-left-radius: 90px;
  border: 2px solid var(--color-primary);
  border-bottom: none;
}

/* ============================================
   Services page — full catalog grid + pagination
   ============================================ */
.services-page-section {
  position: relative;
  background: var(--color-hero-bg);
}

.services-page-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: 620px;
  margin: 0 auto clamp(32px, 5vw, 48px);
  text-align: left;
}

@media (min-width: 768px) {
  .services-page-header {
    align-items: center;
    text-align: center;
    margin-inline: auto;
  }
}

.services-page-heading {
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-dark);
}

.service-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

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

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

.service-cards-grid[hidden] {
  display: none;
}

.service-card {
  background: var(--color-white);
  border-radius: 20px;
  padding: clamp(28px, 3vw, 36px);
  box-shadow: 0 20px 40px -30px rgba(5, 18, 41, 0.2);
  transition: transform 0.5s var(--ease-premium), box-shadow 0.5s var(--ease-premium);
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 55px -25px rgba(5, 18, 41, 0.28);
}

.service-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-hero-bg);
  color: var(--color-primary);
  margin-bottom: 26px;
  transition: background-color 0.4s var(--ease-premium), transform 0.4s var(--ease-premium);
}

.service-card:hover .service-card-icon {
  background: var(--color-primary);
  color: var(--color-white);
  transform: scale(1.08) rotate(-6deg);
}

.service-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 12px;
}

.service-card p {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.7;
  margin-bottom: 24px;
}

/* ---- pagination (mirrors the portfolio listing widget) ---- */
.service-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(36px, 5vw, 56px);
}

.service-page-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-dark);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.3s var(--ease-premium), color 0.3s var(--ease-premium),
    border-color 0.3s var(--ease-premium);
}

.service-page-btn:hover:not(.is-active) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.service-page-btn.is-active {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-white);
}

.service-page-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: none;
  color: var(--color-dark);
  cursor: pointer;
  transition: background-color 0.3s var(--ease-premium), color 0.3s var(--ease-premium),
    border-color 0.3s var(--ease-premium);
}

.service-page-next:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* ============================================
   Service details page — reuses .blog-layout,
   .blog-details-article/-image, .rich-text,
   .portfolio-checklist, .faq-accordion/.faq-item
   and .blog-details-pager* from the other detail
   templates; only the benefit cards and sidebar
   nav below are page-specific.
   ============================================ */
.service-benefits-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 640px) {
  .service-benefits-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.service-benefit-card {
  background: var(--color-white);
  border-radius: 16px;
  padding: clamp(20px, 2.4vw, 26px);
  box-shadow: 0 16px 34px -26px rgba(5, 18, 41, 0.16);
}

.service-benefit-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 16px;
}

.service-benefit-card h4 {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-dark);
  margin-bottom: 10px;
}

.service-benefit-card p {
  color: var(--color-text-muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

.service-details-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.service-nav-card {
  background: var(--color-white);
  border-radius: 20px;
  padding: clamp(22px, 2.6vw, 28px);
  box-shadow: 0 20px 40px -30px rgba(5, 18, 41, 0.22);
}

.service-nav-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 18px;
}

.service-nav-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.service-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
  border-radius: 12px;
  background: var(--color-hero-bg);
  color: var(--color-dark);
  font-weight: 600;
  font-size: 0.92rem;
  transition: background-color 0.3s var(--ease-premium), color 0.3s var(--ease-premium);
}

.service-nav-item svg {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: color 0.3s var(--ease-premium);
}

.service-nav-item:hover,
.service-nav-item.is-active {
  background: var(--color-primary);
  color: var(--color-white);
}

.service-nav-item:hover svg,
.service-nav-item.is-active svg {
  color: var(--color-white);
}

/* ============================================
   404 page
   ============================================ */
.error-404-section {
  position: relative;
  background: var(--color-hero-bg);
}

.error-content {
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.error-illustration {
  position: relative;
  display: inline-block;
  margin-bottom: clamp(20px, 4vw, 32px);
}

.error-number {
  position: relative;
  z-index: 1;
  display: block;
  font-size: clamp(5.5rem, 16vw, 10rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-primary);
}

.error-clouds {
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: -4%;
  z-index: 2;
  width: 108%;
  height: 32%;
  fill: var(--color-hero-bg);
}

.error-birds {
  position: absolute;
  top: -10%;
  right: 4%;
  z-index: 1;
  width: 18%;
  height: auto;
  color: var(--color-primary);
}

.error-heading {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 800;
  color: var(--color-dark);
  margin-bottom: 14px;
}

.error-desc {
  color: var(--color-text-muted);
  font-size: 0.98rem;
  line-height: 1.7;
  max-width: 480px;
  margin-bottom: clamp(28px, 4vw, 36px);
}

/* ============================================
   Legal pages (Terms & Conditions / Privacy
   Policy) — long-form content reusing .rich-text
   ============================================ */
.rich-text a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.3s var(--ease-premium);
}

.rich-text a:hover {
  color: var(--color-primary-dark);
}

.legal-section {
  position: relative;
  background: var(--color-hero-bg);
}

.legal-article {
  max-width: 800px;
  margin: 0 auto;
}

.legal-title {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--color-dark);
  margin-bottom: 12px;
}

.legal-updated {
  color: var(--color-text-muted);
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 28px;
}

.legal-toc {
  background: var(--color-white);
  border-radius: 20px;
  padding: clamp(22px, 2.8vw, 30px);
  margin-top: 28px;
  box-shadow: 0 20px 40px -30px rgba(5, 18, 41, 0.2);
}

.legal-toc h2 {
  margin-top: 0 !important;
  font-size: 1.05rem !important;
}

.legal-toc ol {
  list-style: none;
  counter-reset: toc;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.legal-toc li {
  counter-increment: toc;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.legal-toc li::before {
  content: counter(toc) ".";
  flex-shrink: 0;
  font-weight: 700;
  color: var(--color-primary);
  font-size: 0.9rem;
}

.legal-toc a {
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}

.legal-toc a:hover {
  text-decoration: underline;
}

/* ============================================
   Pricing plans page — one 3-tier grid per
   service category, with a quick-jump chip nav
   so 11 categories stay navigable instead of an
   endless scroll.
   ============================================ */
.pricing-page-section {
  position: relative;
  background: var(--color-hero-bg);
}

.pricing-page-header {
  max-width: 640px;
  margin: 0 auto clamp(32px, 5vw, 44px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.pricing-page-heading {
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-dark);
}

.pricing-page-desc {
  color: var(--color-text-muted);
  font-size: 0.98rem;
  line-height: 1.7;
  max-width: 560px;
}

/* ---- quick-jump chip nav ---- */
.pricing-jump-nav {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 4px clamp(40px, 6vw, 64px);
  scrollbar-width: none;
}

.pricing-jump-nav::-webkit-scrollbar {
  display: none;
}

.pricing-jump-item {
  flex-shrink: 0;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-dark);
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
  border: 1.5px solid var(--color-border);
  transition: background-color 0.3s var(--ease-premium), color 0.3s var(--ease-premium),
    border-color 0.3s var(--ease-premium);
}

.pricing-jump-item:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.pricing-jump-item.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* ---- per-service category ---- */
.pricing-category {
  scroll-margin-top: 110px;
  margin-bottom: clamp(56px, 7vw, 80px);
}

.pricing-category:last-child {
  margin-bottom: 0;
}

.pricing-category-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(24px, 3vw, 32px);
}

/* mobile/tablet (below the 860px 3-col breakpoint): the cards stack
   in a single column, so the "Most Popular" badge — which pokes up
   -14px above its card — ends up almost touching the card above it
   at the grid's 24px gap. Give stacked cards more breathing room,
   and tighten the title-to-grid gap to compensate so the section
   doesn't read as uniformly loose. */
@media (max-width: 859px) {
  .pricing-category-head {
    margin-bottom: 16px;
  }
}

.pricing-category-index {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-primary);
  font-weight: 800;
  font-size: 0.9rem;
  box-shadow: 0 10px 24px -16px rgba(5, 18, 41, 0.25);
}

.pricing-category-heading {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 800;
  color: var(--color-dark);
}

/* ---- 3-tier grid ---- */
.pricing-tier-grid {
  display: grid;
  grid-template-columns: 1fr;
  /* extra room for the "Most Popular" badge, which pokes -14px above
     its card and would otherwise sit almost flush against the card
     stacked above it in this single-column mobile/tablet layout */
  gap: 48px;
  align-items: stretch;
}

@media (min-width: 860px) {
  .pricing-tier-grid {
    grid-template-columns: repeat(3, 1fr);
    /* side-by-side here, so the popular card's badge has nothing
       stacked above it to crowd — back to the tighter gap */
    gap: 24px;
  }
}

.pricing-tier-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: 22px;
  padding: clamp(28px, 3vw, 34px);
  box-shadow: 0 20px 40px -30px rgba(5, 18, 41, 0.2);
  transition: transform 0.5s var(--ease-premium), box-shadow 0.5s var(--ease-premium);
}

.pricing-tier-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 55px -25px rgba(5, 18, 41, 0.28);
}

.pricing-tier-card--popular {
  background: var(--color-primary);
  color: var(--color-white);
}

@media (min-width: 860px) {
  .pricing-tier-card--popular {
    transform: scale(1.03);
  }

  .pricing-tier-card--popular:hover {
    transform: scale(1.03) translateY(-6px);
  }
}

.pricing-tier-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  background: var(--color-dark);
  color: var(--color-white);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 999px;
  box-shadow: 0 10px 20px -10px rgba(5, 18, 41, 0.5);
  white-space: nowrap;
}

.pricing-tier-name {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 6px;
}

.pricing-tier-desc {
  font-size: 0.85rem;
  line-height: 1.5;
  margin-bottom: 22px;
  color: var(--color-text-muted);
}

.pricing-tier-card--popular .pricing-tier-desc {
  color: rgba(255, 255, 255, 0.75);
}

.pricing-tier-price {
  display: flex;
  align-items: flex-start;
  gap: 3px;
  margin-bottom: 22px;
}

.pricing-tier-currency {
  font-size: 1.15rem;
  font-weight: 800;
  margin-top: 6px;
}

.pricing-tier-value {
  font-size: clamp(2rem, 3.6vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
}

.pricing-tier-period {
  align-self: flex-end;
  font-size: 0.78rem;
  margin-bottom: 6px;
  color: var(--color-text-muted);
}

.pricing-tier-card--popular .pricing-tier-period {
  color: rgba(255, 255, 255, 0.7);
}

.pricing-tier-cta {
  width: 100%;
  justify-content: center;
  margin-bottom: 24px;
}

.pricing-tier-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
}

.pricing-tier-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
  color: var(--color-dark);
}

.pricing-tier-features svg {
  flex-shrink: 0;
  color: var(--color-primary);
}

.pricing-tier-card--popular .pricing-tier-features li {
  color: var(--color-white);
}

.pricing-tier-card--popular .pricing-tier-features svg {
  color: rgba(255, 255, 255, 0.85);
}

/* ============================================
   Team page — reuses .team-grid/.team-card/
   .team-photo/.team-social/.team-info from the
   about page; only pagination is page-specific.
   ============================================ */
.team-page-section {
  position: relative;
  background: var(--color-hero-bg);
}

.team-grid[hidden] {
  display: none;
}

.team-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(36px, 5vw, 56px);
}

.team-page-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-dark);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.3s var(--ease-premium), color 0.3s var(--ease-premium),
    border-color 0.3s var(--ease-premium);
}

.team-page-btn:hover:not(.is-active) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.team-page-btn.is-active {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-white);
}

.team-page-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: none;
  color: var(--color-dark);
  cursor: pointer;
  transition: background-color 0.3s var(--ease-premium), color 0.3s var(--ease-premium),
    border-color 0.3s var(--ease-premium);
}

.team-page-next:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}