:root {
  --bg: #0b0d12; /* Sets the --bg property */
  --bg-alt: #111520; /* Sets the --bg-alt property */
  --card: #161b29; /* Sets the --card property */
  --text: #f3f5f8; /* Sets the --text property */
  --muted: #b8c0d9; /* Sets the --muted property */
  --primary: #9b7cff; /* Sets the --primary property */
  --primary-2: #6f49ff; /* Sets the --primary-2 property */
  --border: rgba(255, 255, 255, 0.08); /* Sets the --border property */
}


 
/* Logos Carousel */
.logos-carousel {
  background: var(--bg-alt); /* Background color or image */
  padding: 2rem 0; /* Internal spacing inside element */
  overflow: hidden; /* What happens to content that overflows */
  position: relative; /* Positioning method (fixed, absolute, relative, sticky) */
}

.logos-carousel::before,
.logos-carousel::after {
  content: ''; /* Sets the content property */
  position: absolute; /* Positioning method (fixed, absolute, relative, sticky) */
  top: 0; /* Distance from top edge */
  bottom: 0; /* Distance from bottom edge */
  width: 100px; /* Element width size */
  z-index: 2; /* Stacking order (higher = on top) */
  pointer-events: none; /* Whether element responds to pointer events */
}

.logos-carousel::before {
  left: 0; /* Distance from left edge */
  background: linear-gradient(90deg, var(--bg-alt), transparent); /* Background color or image */
}

.logos-carousel::after {
  right: 0; /* Distance from right edge */
  background: linear-gradient(-90deg, var(--bg-alt), transparent); /* Background color or image */
}

.logos-track {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  animation: scroll-logos 25s linear infinite; /* Animation name and duration */
  width: max-content; /* Element width size */
}

.logos-slide {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  align-items: center; /* Vertical alignment in flex container */
  gap: 4rem; /* Space between flex or grid items */
  padding: 0 2rem; /* Internal spacing inside element */
}

.logos-slide img {
  height: 36px; /* Element height size */
  width: auto; /* Element width size */
  opacity: 1; /* Transparency level (0=invisible, 1=opaque) */
  filter: grayscale(0%); /* Visual filter effects */
  transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease; /* Animation duration and easing */
}

.logos-slide img:hover {
  opacity: 1; /* Transparency level (0=invisible, 1=opaque) */
  filter: grayscale(0%) brightness(1.1); /* Visual filter effects */
  transform: scale(1.05); /* CSS 2D/3D transformation (rotate, scale, translate) */
}

body.light .logos-slide img {
  filter: brightness(1); /* Visual filter effects */
}

body.light .logos-slide img:hover {
  filter: brightness(1.05); /* Visual filter effects */
}

/* Animation keyframes - defines animation steps */
@keyframes scroll-logos {
  0% {
    transform: translateX(0); /* CSS 2D/3D transformation (rotate, scale, translate) */
  }
  100% {
    transform: translateX(-33.333%); /* CSS 2D/3D transformation (rotate, scale, translate) */
  }
}

/* Testimonials Section */
.testimonials-section {
  padding: 1rem 0; /* Internal spacing inside element */
  background: var(--bg); /* Background color or image */
  overflow: hidden; /* What happens to content that overflows */
  position: relative; /* Positioning method (fixed, absolute, relative, sticky) */
}

.testimonials-section h2 {
  text-align: center; /* Text alignment (left, center, right) */
  margin-bottom: 0.5rem; /* Sets the margin-bottom property */
}

.testimonials-section .section-intro {
  text-align: center; /* Text alignment (left, center, right) */
  margin-bottom: 2rem; /* Sets the margin-bottom property */
}

.testimonials-wrapper {
  overflow: hidden; /* What happens to content that overflows */
  position: relative; /* Positioning method (fixed, absolute, relative, sticky) */
  padding: 1rem 0; /* Internal spacing inside element */
}

.testimonials-track {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  gap: 1.5rem; /* Space between flex or grid items */
  width: max-content; /* Element width size */
  cursor: grab; /* Mouse cursor style */
}

.testimonials-track:active {
  cursor: grabbing; /* Mouse cursor style */
}

.testimonial-card {
  background: linear-gradient(135deg, rgba(155, 124, 255, 0.08), rgba(111, 73, 255, 0.03)); /* Background color or image */
  border: 1px solid var(--border); /* Border around element */
  border-radius: 5px; /* Rounded corners of element */
  padding: 1.25rem 1.5rem; /* Internal spacing inside element */
  min-width: 340px; /* Minimum width constraint */
  max-width: 340px; /* Maximum width constraint */
  position: relative; /* Positioning method (fixed, absolute, relative, sticky) */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animation duration and easing */
  cursor: grab; /* Mouse cursor style */
}

.testimonial-card:active {
  cursor: grabbing; /* Mouse cursor style */
}

.testimonial-card:hover {
  transform: translateY(-5px); /* CSS 2D/3D transformation (rotate, scale, translate) */
  box-shadow: 0 10px 40px rgba(155, 124, 255, 0.15); /* Shadow effect around element */
}

.quote-icon {
  font-size: 2rem; /* Size of text */
  color: var(--primary); /* Text/foreground color */
  opacity: 0.5; /* Transparency level (0=invisible, 1=opaque) */
  font-family: Georgia, serif; /* Font family to use */
  line-height: 1; /* Height of text lines */
}

.quote-icon.open {
  position: absolute; /* Positioning method (fixed, absolute, relative, sticky) */
  top: 0.75rem; /* Distance from top edge */
  left: 1rem; /* Distance from left edge */
}

.quote-icon.close {
  position: absolute; /* Positioning method (fixed, absolute, relative, sticky) */
  bottom: 4rem; /* Distance from bottom edge */
  right: 1rem; /* Distance from right edge */
}

.testimonial-highlight {
  font-size: 0.95rem; /* Size of text */
  font-weight: 600; /* Thickness of text (400=normal, 700=bold) */
  color: var(--text); /* Text/foreground color */
  margin: 1rem 0 0.5rem; /* External spacing outside element */
  line-height: 1.4; /* Height of text lines */
}

.testimonial-detail {
  font-size: 0.85rem; /* Size of text */
  color: var(--muted); /* Text/foreground color */
  line-height: 1.5; /* Height of text lines */
  margin-bottom: 1rem; /* Sets the margin-bottom property */
  display: -webkit-box; /* Layout type (flex, grid, block, inline, etc) */
  /*-webkit-line-clamp: 4;*/
  -webkit-box-orient: vertical; /* Sets the -webkit-box-orient property */
  overflow: hidden; /* What happens to content that overflows */
}

.testimonial-info {
  border-top: 1px solid var(--border); /* Top border */
  padding-top: 1rem; /* Sets the padding-top property */
  text-align: center; /* Text alignment (left, center, right) */
}

.testimonial-info h4 {
  font-size: 1rem; /* Size of text */
  font-weight: 700; /* Thickness of text (400=normal, 700=bold) */
  color: var(--text); /* Text/foreground color */
  margin-bottom: 0.2rem; /* Sets the margin-bottom property */
}

.testimonial-info .author {
  font-size: 0.8rem; /* Size of text */
  color: var(--muted); /* Text/foreground color */
  margin-bottom: 0.3rem; /* Sets the margin-bottom property */
}

.testimonial-info .location {
  font-size: 0.75rem; /* Size of text */
  color: var(--muted); /* Text/foreground color */
  margin-bottom: 0.5rem; /* Sets the margin-bottom property */
}

.testimonial-info .rating {
  color: #fbbf24; /* Text/foreground color */
  font-size: 0.9rem; /* Size of text */
  letter-spacing: 2px; /* Space between characters */
}

.testimonial-info .rating .stars {
  color: #fbbf24; /* Text/foreground color */
}

.testimonial-info .rating .star-empty {
  color: #4b5563; /* Text/foreground color */
}

.testimonial-info .rating-num {
  color: var(--primary); /* Text/foreground color */
  font-weight: 700; /* Thickness of text (400=normal, 700=bold) */
  margin-right: 0.5rem; /* Sets the margin-right property */
}

.testimonial-controls {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  justify-content: center; /* Horizontal alignment in flex container */
  gap: 1rem; /* Space between flex or grid items */
  margin-top: 2rem; /* Sets the margin-top property */
}

.testimonial-btn {
  background: var(--card); /* Background color or image */
  border: 1px solid var(--border); /* Border around element */
  color: var(--text); /* Text/foreground color */
  width: 48px; /* Element width size */
  height: 48px; /* Element height size */
  border-radius: 50%; /* Rounded corners of element */
  cursor: pointer; /* Mouse cursor style */
  font-size: 1.2rem; /* Size of text */
  transition: all 0.3s ease; /* Animation duration and easing */
}

.testimonial-btn:hover {
  background: var(--primary); /* Background color or image */
  border-color: var(--primary); /* Sets the border-color property */
}

body.light .testimonial-card {
  background: linear-gradient(135deg, rgba(155, 124, 255, 0.1), rgba(111, 73, 255, 0.05)); /* Background color or image */
}

/* Animation keyframes - defines animation steps */
@keyframes scroll-testimonials {
  0% {
    transform: translateX(0); /* CSS 2D/3D transformation (rotate, scale, translate) */
  }
  100% {
    transform: translateX(-50%); /* CSS 2D/3D transformation (rotate, scale, translate) */
  }
}

/* Case Studies Section */
.case-studies-section {
  background: var(--bg); /* Background color or image */
  padding: 4rem 0; /* Internal spacing inside element */
  overflow: hidden; /* What happens to content that overflows */
}

.case-studies-section .container {
  max-width: 1120px; /* Maximum width constraint */
  margin: 0 auto; /* External spacing outside element */
  padding: 0 4%; /* Internal spacing inside element */
}

.case-studies-header {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  justify-content: space-between; /* Horizontal alignment in flex container */
  align-items: center; /* Vertical alignment in flex container */
  margin-bottom: 2rem; /* Sets the margin-bottom property */
}

.clutch-rating {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  align-items: center; /* Vertical alignment in flex container */
  gap: 0.5rem; /* Space between flex or grid items */
}

.clutch-logo {
  font-size: 1.5rem; /* Size of text */
  font-weight: 700; /* Thickness of text (400=normal, 700=bold) */
  color: var(--text); /* Text/foreground color */
}

.clutch-score {
  font-size: 1.2rem; /* Size of text */
  color: var(--muted); /* Text/foreground color */
}

.clutch-stars {
  color: #ff3d2e; /* Text/foreground color */
  font-size: 1rem; /* Size of text */
  letter-spacing: 2px; /* Space between characters */
}

.case-studies-slider {
  overflow: hidden; /* What happens to content that overflows */
  width: 100%; /* Element width size */
  position: relative; /* Positioning method (fixed, absolute, relative, sticky) */
}

.case-studies-track {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  transition: transform 0.5s ease; /* Animation duration and easing */
}

.case-study-card {
  display: grid; /* Layout type (flex, grid, block, inline, etc) */
  grid-template-columns: 1fr 1.2fr 1fr; /* Define grid column sizes */
  gap: 2rem; /* Space between flex or grid items */
  background: var(--bg-alt); /* Background color or image */
  border: 1px solid var(--border); /* Border around element */
  border-radius: 5px; /* Rounded corners of element */
  padding: 2.5rem; /* Internal spacing inside element */
  min-width: 100%; /* Minimum width constraint */
  width: 100%; /* Element width size */
  flex-shrink: 0; /* How much flex item shrinks */
  box-sizing: border-box; /* What width/height includes (content or border) */
}

.case-study-content {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  flex-direction: column; /* Direction of flex items (row, column) */
}

.case-category {
  color: var(--primary); /* Text/foreground color */
  font-size: 0.75rem; /* Size of text */
  font-weight: 600; /* Thickness of text (400=normal, 700=bold) */
  letter-spacing: 1px; /* Space between characters */
  text-transform: uppercase; /* Text transformation (uppercase, lowercase) */
  margin-bottom: 1rem; /* Sets the margin-bottom property */
}

.case-study-content h3 {
  font-size: 1.5rem; /* Size of text */
  font-weight: 700; /* Thickness of text (400=normal, 700=bold) */
  color: var(--text); /* Text/foreground color */
  margin-bottom: 1rem; /* Sets the margin-bottom property */
  line-height: 1.3; /* Height of text lines */
}

.case-study-content p {
  font-size: 0.95rem; /* Size of text */
  color: var(--muted); /* Text/foreground color */
  line-height: 1.6; /* Height of text lines */
  flex-grow: 1; /* How much flex item grows */
}

.case-link {
  color: var(--primary); /* Text/foreground color */
  font-size: 0.85rem; /* Size of text */
  font-weight: 600; /* Thickness of text (400=normal, 700=bold) */
  text-decoration: none; /* Text decoration (underline, etc) */
  margin-top: 1.5rem; /* Sets the margin-top property */
  display: inline-flex; /* Layout type (flex, grid, block, inline, etc) */
  align-items: center; /* Vertical alignment in flex container */
  gap: 0.5rem; /* Space between flex or grid items */
  transition: gap 0.3s ease; /* Animation duration and easing */
}

.case-link:hover {
  gap: 1rem; /* Space between flex or grid items */
}

.case-study-image {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  align-items: center; /* Vertical alignment in flex container */
  justify-content: center; /* Horizontal alignment in flex container */
}

.case-study-image img {
  width: 100%; /* Element width size */
  max-width: 11350px; /* Maximum width constraint */
  height: auto; /* Element height size */
  border-radius: 5px; /* Rounded corners of element */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); /* Shadow effect around element */
  transform: rotate(-5deg); /* CSS 2D/3D transformation (rotate, scale, translate) */
}

.case-study-quote {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  flex-direction: column; /* Direction of flex items (row, column) */
  justify-content: center; /* Horizontal alignment in flex container */
}

.case-study-quote .quote-mark {
  font-size: 3rem; /* Size of text */
  color: var(--primary); /* Text/foreground color */
  opacity: 0.5; /* Transparency level (0=invisible, 1=opaque) */
  line-height: 1; /* Height of text lines */
  margin-bottom: 1rem; /* Sets the margin-bottom property */
}

.case-study-quote p {
  font-size: 1rem; /* Size of text */
  font-weight: 600; /* Thickness of text (400=normal, 700=bold) */
  color: var(--text); /* Text/foreground color */
  line-height: 1.6; /* Height of text lines */
  margin-bottom: 1.5rem; /* Sets the margin-bottom property */
}

.quote-author h4 {
  font-size: 1rem; /* Size of text */
  font-weight: 700; /* Thickness of text (400=normal, 700=bold) */
  color: var(--text); /* Text/foreground color */
  margin-bottom: 0.25rem; /* Sets the margin-bottom property */
}

.quote-author span {
  font-size: 0.75rem; /* Size of text */
  color: var(--muted); /* Text/foreground color */
  letter-spacing: 0.5px; /* Space between characters */
}

.quote-location {
  margin-top: 1rem; /* Sets the margin-top property */
  font-size: 0.9rem; /* Size of text */
  color: var(--muted); /* Text/foreground color */
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  align-items: center; /* Vertical alignment in flex container */
  gap: 0.5rem; /* Space between flex or grid items */
}

.case-studies-footer {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  justify-content: space-between; /* Horizontal alignment in flex container */
  align-items: center; /* Vertical alignment in flex container */
  margin-top: 2rem; /* Sets the margin-top property */
  max-width: 1120px; /* Maximum width constraint */
  margin-left: auto; /* Sets the margin-left property */
  margin-right: auto; /* Sets the margin-right property */
  padding: 0 4%; /* Internal spacing inside element */
}

.case-pagination {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  align-items: center; /* Vertical alignment in flex container */
  gap: 0.75rem; /* Space between flex or grid items */
}

.page-dot {
  width: 32px; /* Element width size */
  height: 32px; /* Element height size */
  border-radius: 4px; /* Rounded corners of element */
  border: none; /* Border around element */
  background: transparent; /* Background color or image */
  color: var(--muted); /* Text/foreground color */
  font-size: 0.9rem; /* Size of text */
  cursor: pointer; /* Mouse cursor style */
  transition: all 0.3s ease; /* Animation duration and easing */
}

.page-dot.active {
  background: var(--text); /* Background color or image */
  color: var(--bg); /* Text/foreground color */
}

.page-dot:hover:not(.active) {
  color: var(--text); /* Text/foreground color */
}

/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 992px) {
  .case-study-card {
    grid-template-columns: 1fr; /* Define grid column sizes */
    gap: 1.5rem; /* Space between flex or grid items */
  }
  
  .case-study-image {
    order: -1; /* Order of flex item */
  }
  
  .case-study-image img {
    transform: none; /* CSS 2D/3D transformation (rotate, scale, translate) */
    max-width: 100%; /* Maximum width constraint */
  }
}

/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 768px) {
  .case-studies-header {
    flex-direction: row; /* Direction of flex items (row, column) */
    flex-wrap: wrap; /* Whether flex items wrap to next line */
    gap: 0.5rem; /* Space between flex or grid items */
    align-items: center; /* Vertical alignment in flex container */
  }
  
  .case-studies-header h2 {
    font-size: 1.3rem; /* Size of text */
    flex: 0 0 auto; /* Flex container - flexible box layout */
    white-space: nowrap; /* How whitespace is handled in text */
  }
  
  .clutch-rating {
    flex-direction: row; /* Direction of flex items (row, column) */
    gap: 0.4rem; /* Space between flex or grid items */
    align-items: center; /* Vertical alignment in flex container */
  }
  
  .clutch-logo {
    font-size: 1.1rem; /* Size of text */
  }
  
  .clutch-score {
    font-size: 1rem; /* Size of text */
  }
  
  .clutch-stars {
    font-size: 0.85rem; /* Size of text */
  }
}

/* Case Studies Page */
.page-hero {
  padding: 6rem 0 4rem; /* Internal spacing inside element */
  text-align: center; /* Text alignment (left, center, right) */
  background: linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%); /* Background color or image */
}

.page-hero h1 {
  font-size: 3rem; /* Size of text */
  font-weight: 800; /* Thickness of text (400=normal, 700=bold) */
  margin-bottom: 1rem; /* Sets the margin-bottom property */
}

.hero-subtitle {
  font-size: 1.1rem; /* Size of text */
  color: var(--muted); /* Text/foreground color */
  max-width: 600px; /* Maximum width constraint */
  margin: 0 auto 2rem; /* External spacing outside element */
}

.clutch-badge {
  display: inline-flex; /* Layout type (flex, grid, block, inline, etc) */
  align-items: center; /* Vertical alignment in flex container */
  gap: 0.75rem; /* Space between flex or grid items */
  padding: 0.75rem 1.5rem; /* Internal spacing inside element */
  background: var(--card); /* Background color or image */
  border-radius: 5px; /* Rounded corners of element */
  border: 1px solid var(--border); /* Border around element */
}

/* (Old .projects-* + .project-card + .filter-btn + .years-badge rules removed
    — the case-studies landing page now uses /assets/css/case-studies-landing.css
    with the reference tab-and-grid pattern. See case-studies-landing.css.) */

/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 576px) {
  .project-image img {
    height: 220px; /* Element height size */
  }
  
  .project-title {
    font-size: 1.15rem; /* Size of text */
  }
}

.case-studies-grid {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  flex-direction: column; /* Direction of flex items (row, column) */
  gap: 3rem; /* Space between flex or grid items */
}

.case-study-full {
  display: grid; /* Layout type (flex, grid, block, inline, etc) */
  grid-template-columns: 1fr 1.2fr 1fr; /* Define grid column sizes */
  gap: 2.5rem; /* Space between flex or grid items */
  background: var(--bg-alt); /* Background color or image */
  border: 1px solid var(--border); /* Border around element */
  border-radius: 5px; /* Rounded corners of element */
  padding: 3rem; /* Internal spacing inside element */
}

.case-study-full h2 {
  font-size: 1.75rem; /* Size of text */
  font-weight: 700; /* Thickness of text (400=normal, 700=bold) */
  margin-bottom: 1rem; /* Sets the margin-bottom property */
  line-height: 1.3; /* Height of text lines */
}

.case-meta {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  flex-wrap: wrap; /* Whether flex items wrap to next line */
  gap: 1.5rem; /* Space between flex or grid items */
  margin-top: 2rem; /* Sets the margin-top property */
  padding-top: 1.5rem; /* Sets the padding-top property */
  border-top: 1px solid var(--border); /* Top border */
}

.meta-item {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  flex-direction: column; /* Direction of flex items (row, column) */
  gap: 0.25rem; /* Space between flex or grid items */
}

.meta-label {
  font-size: 0.75rem; /* Size of text */
  color: var(--muted); /* Text/foreground color */
  text-transform: uppercase; /* Text transformation (uppercase, lowercase) */
  letter-spacing: 0.5px; /* Space between characters */
}

.meta-value {
  font-size: 0.95rem; /* Size of text */
  font-weight: 600; /* Thickness of text (400=normal, 700=bold) */
  color: var(--text); /* Text/foreground color */
}

.cta-section {
  padding: 5rem 0; /* Internal spacing inside element */
  text-align: center; /* Text alignment (left, center, right) */
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%); /* Background color or image */
  color: #fff; /* Text/foreground color */
}

.cta-section h2 {
  font-size: 2.5rem; /* Size of text */
  margin-bottom: 1rem; /* Sets the margin-bottom property */
}

.cta-section p {
  font-size: 1.1rem; /* Size of text */
  opacity: 0.9; /* Transparency level (0=invisible, 1=opaque) */
  margin-bottom: 2rem; /* Sets the margin-bottom property */
}

.btn-lg {
  padding: 1rem 2.5rem; /* Internal spacing inside element */
  font-size: 1.1rem; /* Size of text */
}

.cta-section .btn-primary {
  background: #fff; /* Background color or image */
  color: var(--primary); /* Text/foreground color */
}

.cta-section .btn-primary:hover {
  background: rgba(255,255,255,0.9); /* Background color or image */
}

/* Reasons Section - Top 9 Reasons */
.reasons-section {
  padding: 5rem 0; /* Internal spacing inside element */
  background: var(--bg); /* Background color or image */
}

.reasons-section h2 {
  text-align: center; /* Text alignment (left, center, right) */
  font-size: 2.5rem; /* Size of text */
  font-weight: 700; /* Thickness of text (400=normal, 700=bold) */
  margin: 0 0 3rem; /* External spacing outside element */
}

.reasons-grid {
  display: grid; /* Layout type (flex, grid, block, inline, etc) */
  grid-template-columns: repeat(3, 1fr); /* Define grid column sizes */
  gap: 2rem; /* Space between flex or grid items */
  max-width: 1000px; /* Maximum width constraint */
  margin: 0 auto; /* External spacing outside element */
}

.reason-card {
  text-align: center; /* Text alignment (left, center, right) */
  padding: 2rem 1.5rem; /* Internal spacing inside element */
}

.reason-number {
  display: block; /* Layout type (flex, grid, block, inline, etc) */
  font-size: 2.5rem; /* Size of text */
  font-weight: 700; /* Thickness of text (400=normal, 700=bold) */
  color: var(--primary); /* Text/foreground color */
  margin-bottom: 1rem; /* Sets the margin-bottom property */
  font-style: italic; /* Sets the font-style property */
}

.reason-card h3 {
  font-size: 1rem; /* Size of text */
  font-weight: 500; /* Thickness of text (400=normal, 700=bold) */
  color: var(--text); /* Text/foreground color */
  margin: 0; /* External spacing outside element */
  line-height: 1.5; /* Height of text lines */
}

/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 768px) {
  .reasons-grid {
    grid-template-columns: repeat(2, 1fr); /* Define grid column sizes */
    gap: 1.5rem; /* Space between flex or grid items */
  }
  
  .reasons-section h2 {
    font-size: 2rem; /* Size of text */
  }
  
  .reason-number {
    font-size: 2rem; /* Size of text */
  }
}

/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 480px) {
  .reasons-grid {
    grid-template-columns: 1fr; /* Define grid column sizes */
    gap: 1rem; /* Space between flex or grid items */
  }
  
  .reason-card {
    padding: 1.5rem 1rem; /* Internal spacing inside element */
  }
}

/* FAQ Section */
.faq-section {
  padding: 3rem 0 6rem; /* Internal spacing inside element */
  background: var(--bg-alt); /* Background color or image */
}

.faq-section h2 {
  text-align: center; /* Text alignment (left, center, right) */
  font-size: clamp(2rem, 4vw, 2.75rem); /* Size of text */
  font-weight: 800; /* Thickness of text (400=normal, 700=bold) */
  margin: 0 0 2.5rem; /* External spacing outside element */
  letter-spacing: -0.02em; /* Space between characters */
}

.faq-section h2 span {
  background: linear-gradient(135deg, #60a5fa, #a78bfa, #f472b6); /* Background color or image */
  -webkit-background-clip: text; /* Sets the -webkit-background-clip property */
  background-clip: text; /* Sets the background-clip property */
  color: transparent; /* Text/foreground color */
  font-style: italic; /* Sets the font-style property */
}

.faq-tabs {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  justify-content: center; /* Horizontal alignment in flex container */
  gap: 2rem; /* Space between flex or grid items */
  flex-wrap: wrap; /* Whether flex items wrap to next line */
  margin-bottom: 3rem; /* Sets the margin-bottom property */
  padding-bottom: 0; /* Sets the padding-bottom property */
  border-bottom: 1px solid var(--border); /* Bottom border */
}

.faq-tab {
  padding: 1rem 0.5rem; /* Internal spacing inside element */
  font-size: 1rem; /* Size of text */
  font-weight: 500; /* Thickness of text (400=normal, 700=bold) */
  color: var(--muted); /* Text/foreground color */
  background: transparent; /* Background color or image */
  border: none; /* Border around element */
  cursor: pointer; /* Mouse cursor style */
  transition: all 0.3s ease; /* Animation duration and easing */
  position: relative; /* Positioning method (fixed, absolute, relative, sticky) */
}

.faq-tab::after {
  content: ''; /* Sets the content property */
  position: absolute; /* Positioning method (fixed, absolute, relative, sticky) */
  bottom: -1px; /* Distance from bottom edge */
  left: 0; /* Distance from left edge */
  right: 0; /* Distance from right edge */
  height: 3px; /* Element height size */
  background: var(--primary); /* Background color or image */
  border-radius: 3px 3px 0 0; /* Rounded corners of element */
  transform: scaleX(0); /* CSS 2D/3D transformation (rotate, scale, translate) */
  transition: transform 0.3s ease; /* Animation duration and easing */
}

.faq-tab:hover {
  color: var(--text); /* Text/foreground color */
}

.faq-tab.active {
  color: var(--primary); /* Text/foreground color */
  font-weight: 600; /* Thickness of text (400=normal, 700=bold) */
}

.faq-tab.active::after {
  transform: scaleX(1); /* CSS 2D/3D transformation (rotate, scale, translate) */
}

.faq-content {
  max-width: 900px; /* Maximum width constraint */
  margin: 0 auto; /* External spacing outside element */
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  flex-direction: column; /* Direction of flex items (row, column) */
  gap: 1rem; /* Space between flex or grid items */
}

.faq-category {
  display: none; /* Layout type (flex, grid, block, inline, etc) */
  flex-direction: column; /* Direction of flex items (row, column) */
  gap: 1rem; /* Space between flex or grid items */
}

.faq-category.active {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
}

.faq-section .faq-item {
  background: var(--bg-alt); /* Background color or image */
  border: 1px solid transparent; /* Border around element */
  border-radius: 5px; /* Rounded corners of element */
  overflow: hidden; /* What happens to content that overflows */
  transition: all 0.3s ease; /* Animation duration and easing */
}

.faq-section .faq-item:hover {
  border-color: rgba(155, 124, 255, 0.2); /* Sets the border-color property */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* Shadow effect around element */
}

.faq-section .faq-item[open] {
  background: linear-gradient(145deg, var(--card), var(--bg-alt)); /* Background color or image */
  border-color: rgba(155, 124, 255, 0.3); /* Sets the border-color property */
  box-shadow: 0 8px 30px rgba(155, 124, 255, 0.1); /* Shadow effect around element */
}

body.light .faq-section .faq-item {
  background: #f8f9fc; /* Background color or image */
}

body.light .faq-section .faq-item:hover {
  background: #f3f4f8; /* Background color or image */
}

body.light .faq-section .faq-item[open] {
  background: #ffffff; /* Background color or image */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06); /* Shadow effect around element */
}

.faq-section .faq-item summary {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  justify-content: space-between; /* Horizontal alignment in flex container */
  align-items: center; /* Vertical alignment in flex container */
  padding: 1.5rem 1.75rem; /* Internal spacing inside element */
  font-size: 1.05rem; /* Size of text */
  font-weight: 600; /* Thickness of text (400=normal, 700=bold) */
  color: var(--text); /* Text/foreground color */
  cursor: pointer; /* Mouse cursor style */
  list-style: none; /* Sets the list-style property */
  transition: all 0.3s ease; /* Animation duration and easing */
  -webkit-tap-highlight-color: transparent; /* Sets the -webkit-tap-highlight-color property */
  user-select: none; /* Whether text can be selected */
}

.faq-section .faq-item summary::-webkit-details-marker {
  display: none; /* Layout type (flex, grid, block, inline, etc) */
}

.faq-section .faq-item summary:hover {
  color: var(--primary); /* Text/foreground color */
}

.faq-section .faq-item summary .faq-icon {
  width: 28px; /* Element width size */
  height: 28px; /* Element height size */
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  align-items: center; /* Vertical alignment in flex container */
  justify-content: center; /* Horizontal alignment in flex container */
  font-size: 2.25rem; /* Size of text */
  font-weight: 300; /* Thickness of text (400=normal, 700=bold) */
  color: var(--muted); /* Text/foreground color */
  transition: all 0.3s ease; /* Animation duration and easing */
  flex-shrink: 0; /* How much flex item shrinks */
  margin-left: 3rem; /* Sets the margin-left property */
  border-radius: 100%; /* Rounded corners of element */
  background: rgba(155, 124, 255, 0.1); /* Background color or image */
}

.faq-section .faq-item[open] summary .faq-icon {
  transform: rotate(90deg); /* CSS 2D/3D transformation (rotate, scale, translate) */
  background: var(--primary); /* Background color or image */
  color: #fff; /* Text/foreground color */
}

.faq-section .faq-answer {
  padding: 0 1.75rem 1.75rem; /* Internal spacing inside element */
  font-size: 1rem; /* Size of text */
  color: var(--muted); /* Text/foreground color */
  line-height: 1.8; /* Height of text lines */
  border-top: 1px solid var(--border); /* Top border */
  margin-top: -0.5rem; /* Sets the margin-top property */
  padding-top: 1.25rem; /* Sets the padding-top property */
  display: block; /* Layout type (flex, grid, block, inline, etc) */
  overflow: visible; /* What happens to content that overflows */
  max-height: none; /* Maximum height constraint */
}

.faq-section .faq-item[open] .faq-answer {
  display: block; /* Layout type (flex, grid, block, inline, etc) */
}

.faq-section .faq-answer p {
  margin-bottom: 1rem; /* Sets the margin-bottom property */
  display: block; /* Layout type (flex, grid, block, inline, etc) */
}

.faq-section .faq-answer p:last-child {
  margin-bottom: 0; /* Sets the margin-bottom property */
}

.faq-section .faq-answer ul {
  margin: 1rem 0; /* External spacing outside element */
  padding-left: 1.5rem; /* Sets the padding-left property */
  display: block; /* Layout type (flex, grid, block, inline, etc) */
}

.faq-section .faq-answer ul li {
  margin-bottom: 0.5rem; /* Sets the margin-bottom property */
  position: relative; /* Positioning method (fixed, absolute, relative, sticky) */
  display: list-item; /* Layout type (flex, grid, block, inline, etc) */
  color: var(--muted); /* Text/foreground color */
}

.faq-section .faq-answer ul li::marker {
  color: var(--primary); /* Text/foreground color */
}

.faq-section .faq-answer strong {
  color: var(--text); /* Text/foreground color */
  font-weight: 600; /* Thickness of text (400=normal, 700=bold) */
}

/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 768px) {
  .faq-section h2 {
    font-size: 2rem; /* Size of text */
  }

  .faq-tabs {
    gap: 1rem; /* Space between flex or grid items */
  }

  .faq-tab {
    padding: 0.75rem 0.5rem; /* Internal spacing inside element */
    font-size: 0.9rem; /* Size of text */
  }

  .faq-section .faq-item summary {
    font-size: 1rem; /* Size of text */
    padding: 1.25rem 1.25rem; /* Internal spacing inside element */
  }

  .faq-section .faq-answer {
    padding: 0 1.25rem 1.25rem; /* Internal spacing inside element */
  }

  .faq-section .faq-item summary .faq-icon {
    width: 24px; /* Element width size */
    height: 24px; /* Element height size */
    font-size: 1rem; /* Size of text */
  }
}

/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 480px) {
  .faq-tabs {
    justify-content: flex-start; /* Horizontal alignment in flex container */
    overflow-x: auto; /* Horizontal overflow behavior */
    flex-wrap: nowrap; /* Whether flex items wrap to next line */
    gap: 0.5rem; /* Space between flex or grid items */
    padding-bottom: 0; /* Sets the padding-bottom property */
    margin-left: -1rem; /* Sets the margin-left property */
    margin-right: -1rem; /* Sets the margin-right property */
    padding-left: 1rem; /* Sets the padding-left property */
    padding-right: 1rem; /* Sets the padding-right property */
    -webkit-overflow-scrolling: touch; /* Sets the -webkit-overflow-scrolling property */
    scrollbar-width: none; /* Sets the scrollbar-width property */
    -ms-overflow-style: none; /* Sets the -ms-overflow-style property */
  }

  .faq-tabs::-webkit-scrollbar {
    display: none; /* Layout type (flex, grid, block, inline, etc) */
  }

  .faq-tab {
    flex-shrink: 0; /* How much flex item shrinks */
    padding: 0.75rem 0.75rem; /* Internal spacing inside element */
    font-size: 0.85rem; /* Size of text */
  }

  .faq-section .faq-item {
    border-radius: 5px; /* Rounded corners of element */
  }

  .faq-section .faq-item summary {
    padding: 1rem; /* Internal spacing inside element */
    font-size: 0.95rem; /* Size of text */
  }

  .faq-section .faq-answer {
    padding: 0 1rem 1rem; /* Internal spacing inside element */
    font-size: 0.9rem; /* Size of text */
  }

  .faq-content {
    gap: 0.75rem; /* Space between flex or grid items */
  }
}

/* How We Make Things Differently Section */
.difference-section {
  padding: 5rem 0; /* Internal spacing inside element */
  background: var(--bg); /* Background color or image */
}

.difference-section h2 {
  text-align: center; /* Text alignment (left, center, right) */
  font-size: 2.5rem; /* Size of text */
  font-weight: 700; /* Thickness of text (400=normal, 700=bold) */
  margin: 0 0 1.5rem; /* External spacing outside element */
}

.difference-section h2 span {
  color: var(--primary); /* Text/foreground color */
}

.difference-intro {
  text-align: center; /* Text alignment (left, center, right) */
  max-width: 700px; /* Maximum width constraint */
  margin: 0 auto 3rem; /* External spacing outside element */
  color: var(--muted); /* Text/foreground color */
  font-size: 1.1rem; /* Size of text */
  line-height: 1.7; /* Height of text lines */
}

.comparison-table {
  max-width: 900px; /* Maximum width constraint */
  margin: 0 auto; /* External spacing outside element */
  border-radius: 5px; /* Rounded corners of element */
  overflow: hidden; /* What happens to content that overflows */
  border: 1px solid var(--border); /* Border around element */
  background: var(--card); /* Background color or image */
}

.comparison-header {
  display: grid; /* Layout type (flex, grid, block, inline, etc) */
  grid-template-columns: 1fr 1fr; /* Define grid column sizes */
  background: var(--bg-alt); /* Background color or image */
  border-bottom: 1px solid var(--border); /* Bottom border */
}

.comparison-header .comparison-col {
  padding: 1.25rem 2rem; /* Internal spacing inside element */
  font-size: 1rem; /* Size of text */
  font-weight: 700; /* Thickness of text (400=normal, 700=bold) */
  text-align: center; /* Text alignment (left, center, right) */
  text-transform: uppercase; /* Text transformation (uppercase, lowercase) */
  letter-spacing: 0.05em; /* Space between characters */
  color: var(--muted); /* Text/foreground color */
}

.comparison-header .comparison-col.highlight {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%); /* Background color or image */
  color: #fff; /* Text/foreground color */
}

.comparison-row {
  display: grid; /* Layout type (flex, grid, block, inline, etc) */
  grid-template-columns: 1fr 1fr; /* Define grid column sizes */
  border-bottom: 1px solid var(--border); /* Bottom border */
}

.comparison-row:last-child {
  border-bottom: none; /* Bottom border */
}

.comparison-row .comparison-col {
  padding: 1.5rem 2rem; /* Internal spacing inside element */
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  flex-direction: column; /* Direction of flex items (row, column) */
  gap: 0.5rem; /* Space between flex or grid items */
}

.comparison-row .comparison-col.others {
  background: var(--card); /* Background color or image */
}

.comparison-row .comparison-col.innerluxes {
  background: rgba(155, 124, 255, 0.05); /* Background color or image */
}

.comparison-icon {
  font-size: 1.5rem; /* Size of text */
  font-weight: 700; /* Thickness of text (400=normal, 700=bold) */
}

.comparison-icon.negative {
  color: #ef4444; /* Text/foreground color */
}

.comparison-icon.positive {
  color: #22c55e; /* Text/foreground color */
}

.comparison-label {
  font-size: 0.75rem; /* Size of text */
  font-weight: 600; /* Thickness of text (400=normal, 700=bold) */
  text-transform: uppercase; /* Text transformation (uppercase, lowercase) */
  letter-spacing: 0.05em; /* Space between characters */
  color: var(--muted); /* Text/foreground color */
}

.comparison-row .comparison-col p {
  margin: 0; /* External spacing outside element */
  font-size: 1rem; /* Size of text */
  color: var(--text); /* Text/foreground color */
  line-height: 1.5; /* Height of text lines */
}

/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 768px) {
  .difference-section h2 {
    font-size: 2rem; /* Size of text */
  }
  
  .difference-intro {
    font-size: 1rem; /* Size of text */
    padding: 0 1rem; /* Internal spacing inside element */
  }
  
  .comparison-header .comparison-col {
    padding: 1rem; /* Internal spacing inside element */
    font-size: 0.85rem; /* Size of text */
  }
  
  .comparison-row .comparison-col {
    padding: 1rem; /* Internal spacing inside element */
  }
  
  .comparison-row .comparison-col p {
    font-size: 0.9rem; /* Size of text */
  }
  
  .comparison-icon {
    font-size: 1.25rem; /* Size of text */
  }
}

/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 480px) {
  .comparison-table {
    border-radius: 5px; /* Rounded corners of element */
  }
  
  .comparison-header .comparison-col,
  .comparison-row .comparison-col {
    padding: 0.75rem; /* Internal spacing inside element */
  }
  
  .comparison-row .comparison-col p {
    font-size: 0.85rem; /* Size of text */
  }
  
  .comparison-label {
    font-size: 0.7rem; /* Size of text */
  }
}

/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 992px) {
  .case-study-full {
    grid-template-columns: 1fr; /* Define grid column sizes */
  }
  
  .page-hero h1 {
    font-size: 2rem; /* Size of text */
  }
}

body.light {
  --bg: #f8f9fc; /* Sets the --bg property */
  --bg-alt: #f1f3f9; /* Sets the --bg-alt property */
  --card: #eaecf4; /* Sets the --card property */
  --text: #0f1220; /* Sets the --text property */
  --muted: #4d5a73; /* Sets the --muted property */
  --primary: #6f49ff; /* Sets the --primary property */
  --primary-2: #4d33d6; /* Sets the --primary-2 property */
  --border: rgba(17, 21, 32, 0.10); /* Sets the --border property */
}

* {
  box-sizing: border-box; /* What width/height includes (content or border) */
}

html {
  overflow-x: clip;
  font-size: 80%;
}

/* Shrink layout on mobile (~80% zoom effect) */
/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 768px) {
  html {
    font-size: 80%; /* Size of text */
  }
}

body {
  margin: 0; /* External spacing outside element */
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; /* Font family to use */
  color: var(--text); /* Text/foreground color */
  background: var(--bg); /* Background color or image */
  line-height: 1.6; /* Height of text lines */
  padding-top: 0; /* Sets the padding-top property */
  overflow-x: clip; /* Horizontal overflow behavior */
  max-width: 100vw; /* Maximum width constraint */
}

main {
  padding-top: 84px; /* Mobile: slim topbar (~20px) + header-main row (64px) = ~84px */
}

/* ============================================================
   /about pages — shared design system (.ab-*)
   ============================================================ */
.ab-hero { background: #005EB8; padding: 60px 80px 60px; position: relative; overflow: hidden; color: #fff; }
.ab-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 50% at 30% 20%, rgba(255,255,255,0.08), transparent 60%), radial-gradient(ellipse 50% 40% at 80% 80%, rgba(0,0,0,0.18), transparent 60%); pointer-events: none; }
.ab-hero__inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
.ab-crumb { font-size: 12px; letter-spacing: 0.06em; color: rgba(255,255,255,0.65); margin: 0 0 14px; font-weight: 600; text-transform: uppercase; }
.ab-crumb a { color: rgba(255,255,255,0.85); text-decoration: none; }
.ab-crumb a:hover { color: #fff; text-decoration: underline; }
.ab-hero h1 { font-family: serif; font-size: clamp(34px, 4.2vw, 46px); font-weight: 700; color: #fff; line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 16px; }
.ab-hero__lead { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: clamp(15px, 1.4vw, 17px); color: rgba(220,235,255,0.92); line-height: 1.7; margin: 0; max-width: 720px; }

.ab-section { padding: 60px 24px 70px; background: #ffffff; }
.ab-section--alt { background: #f7faff; }
.ab-wrap { max-width: 1100px; margin: 0 auto; }
.ab-wrap--narrow { max-width: 840px; }
.ab-head { margin: 0 0 30px; }
.ab-title { font-family: serif; font-size: clamp(26px, 3vw, 36px); font-weight: 400; color: #005EB8; margin: 0 0 12px; line-height: 1.2; letter-spacing: 0.005em; }
.ab-sub { font-size: 15px; line-height: 1.7; color: #3a4a63; margin: 0 0 12px; }
.ab-prose { font-size: 15px; line-height: 1.75; color: #3a4a63; }
.ab-prose p { margin: 0 0 16px; }
.ab-prose strong { color: #0c2f56; font-weight: 700; }
.ab-prose h3 { font-family: serif; font-size: 22px; font-weight: 500; color: #0c2f56; margin: 28px 0 10px; }
.ab-prose h4 { font-size: 16px; font-weight: 700; color: #0c2f56; margin: 20px 0 6px; }
.ab-prose ul, .ab-prose ol { margin: 0 0 16px; padding-left: 22px; }
.ab-prose li { margin-bottom: 8px; }
.ab-prose a { color: #005EB8; text-decoration: underline; }
.ab-prose a:hover { color: #003e7e; }

.ab-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ab-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ab-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ab-card { background: #fff; border: 1px solid #e0eaf6; padding: 24px 22px; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 8px; }
.ab-card:hover { border-color: #c8dcef; box-shadow: 0 8px 20px rgba(0, 94, 184, 0.10); transform: translateY(-2px); }
.ab-card__icon { width: 42px; height: 42px; background: #eff5fb; color: #005EB8; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.ab-card__icon svg { width: 22px; height: 22px; }
.ab-card__name { font-family: serif; font-size: 18px; font-weight: 500; color: #0c2f56; margin: 0; line-height: 1.25; }
.ab-card__desc { font-size: 13.5px; line-height: 1.55; color: #5d6b80; margin: 0; }
.ab-card__cta { margin-top: auto; color: #005EB8; font-size: 13px; font-weight: 700; padding-top: 8px; }

.ab-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 0; }
.ab-stat { background: #fff; border-left: 3px solid #005EB8; padding: 18px 22px; }
.ab-stat__num { font-family: serif; font-size: 36px; font-weight: 700; color: #005EB8; line-height: 1; margin: 0 0 4px; }
.ab-stat__label { font-size: 12.5px; color: #3a4a63; line-height: 1.4; }

.ab-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.ab-list__item { display: flex; gap: 14px; align-items: flex-start; }
.ab-list__check { flex-shrink: 0; width: 24px; height: 24px; background: #005EB8; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.ab-list__name { font-family: serif; font-size: 16px; font-weight: 500; color: #0c2f56; margin: 0 0 4px; }
.ab-list__desc { font-size: 13.5px; line-height: 1.6; color: #3a4a63; margin: 0; }

.ab-cta { background: linear-gradient(180deg, #ffffff 0%, #f4f8fd 100%); border: 1px solid #e0eaf6; padding: 32px 40px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.ab-cta__title { font-family: serif; font-size: clamp(20px, 2.2vw, 26px); font-weight: 400; color: #0c2f56; line-height: 1.2; margin: 0 0 4px; }
.ab-cta__desc { font-size: 14px; color: #3a4a63; margin: 0; max-width: 520px; }
.ab-cta__btn { background: #005EB8; color: #fff; padding: 13px 26px; font-size: 14px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; border-radius: 6px; transition: background 0.2s, transform 0.15s; flex-shrink: 0; }
.ab-cta__btn:hover { background: #003e7e; transform: translateY(-1px); }

.ab-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ab-table th, .ab-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid #e5edf5; vertical-align: top; }
.ab-table thead { background: #f4f8fd; }
.ab-table th { font-family: serif; font-weight: 500; color: #0c2f56; font-size: 14.5px; }
.ab-table td { color: #3a4a63; line-height: 1.55; }

@media (max-width: 900px) {
  .ab-hero { padding: 50px 22px 50px; }
  .ab-section { padding: 44px 18px 50px; }
  .ab-grid, .ab-grid--2, .ab-grid--4, .ab-stats { grid-template-columns: 1fr !important; }
  .ab-cta { padding: 24px 20px; flex-direction: column; align-items: flex-start; }
  .ab-cta__btn { width: 100%; justify-content: center; }
}

/* Dark mode */
body:not(.light) .ab-section { background: #0b0d12; }
body:not(.light) .ab-section--alt { background: #0d1119; }
body:not(.light) .ab-title { color: #6cb1ff; }
body:not(.light) .ab-sub, body:not(.light) .ab-prose { color: #b8c0d9; }
body:not(.light) .ab-prose strong, body:not(.light) .ab-prose h3, body:not(.light) .ab-prose h4 { color: #f3f5f8; }
body:not(.light) .ab-prose a { color: #6cb1ff; }
body:not(.light) .ab-card, body:not(.light) .ab-stat, body:not(.light) .ab-cta { background: #161b29; border-color: rgba(255,255,255,0.08); }
body:not(.light) .ab-card__name, body:not(.light) .ab-list__name, body:not(.light) .ab-cta__title { color: #f3f5f8; }
body:not(.light) .ab-card__desc, body:not(.light) .ab-list__desc, body:not(.light) .ab-cta__desc { color: #b8c0d9; }
body:not(.light) .ab-card__icon { background: rgba(108,177,255,0.10); color: #6cb1ff; }
body:not(.light) .ab-card__cta, body:not(.light) .ab-stat__num { color: #6cb1ff; }
body:not(.light) .ab-stat { background: #161b29; border-left-color: #6cb1ff; }
body:not(.light) .ab-stat__label { color: #b8c0d9; }
body:not(.light) .ab-table th, body:not(.light) .ab-table td { border-bottom-color: rgba(255,255,255,0.08); }
body:not(.light) .ab-table thead { background: rgba(108,177,255,0.08); }
body:not(.light) .ab-table th { color: #f3f5f8; }
body:not(.light) .ab-table td { color: #b8c0d9; }

/* Dark mode: hero sections flip to dark (matches dark header/dropdown/footer behavior).
   Uses !important to defeat per-page inline styles that hardcode brand blue.
   Element-agnostic: matches section, div, article — services subpages use <div class="new-hero-wrap">. */
body:not(.light) [class*="-hero"]:not([class*="hero-h1"]):not([class*="hero-content"]):not([class*="hero-desc"]):not([class*="hero-breadcrumb"]):not([class*="hero-actions"]):not([class*="hero-image"]):not([class*="hero-glow"]):not([class*="hero-eb"]):not([class*="hero-lead"]):not([class*="hero-cta"]):not([class*="hero-grid"]):not([class*="hero-inner"]):not([class*="hero-bg"]):not([class*="hero-stats"]):not([class*="hero-particles"]):not([class*="hero-sub"]):not([class*="hero-badge"]),
body:not(.light) .new-hero-wrap,
body:not(.light) .innx-hero,
body:not(.light) .hc-hero,
body:not(.light) .srv-hero,
body:not(.light) .about-hero,
body:not(.light) .careers-hero,
body:not(.light) .founder-hero,
body:not(.light) .team-hero,
body:not(.light) .locations-hero,
body:not(.light) .projects-hero,
body:not(.light) .blog-hero,
body:not(.light) .faq-hero,
body:not(.light) .page-hero,
body:not(.light) .service-hero,
body:not(.light) .contact-section {
  background: rgba(17, 21, 32, 0.98) !important;
  background-image: none !important;
}

/* Mobile: stripe behind the fixed header so any sub-pixel gap between header
   bottom and hero top blends invisibly. Color flips with theme to match header. */
@media (max-width: 900px) {
  body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 84px; /* matches main padding-top — covers slim topbar + main row */
    background: rgba(17, 21, 32, 0.98); /* dark mode: dark stripe matches dark header */
    z-index: 999; /* below the fixed header (z-index 1000) */
    pointer-events: none;
  }
  body.light::before {
    background: #005EB8; /* light mode: blue stripe matches blue header */
  }
}

/* Desktop: push main content below the fixed header (topbar + main row) */
@media (min-width: 901px) {
  main {
    padding-top: 92px; /* slim topbar (~24px) + header-main row (68px) = 92px */
  }
}

/* For anchor link jumps — account for fixed header height on desktop and mobile */
html {
  scroll-padding-top: 84px;
}
@media (min-width: 901px) {
  html {
    scroll-padding-top: 92px;
  }
}

a {
  color: inherit; /* Text/foreground color */
  text-decoration: none; /* Text decoration (underline, etc) */
}

.container {
  width: min(1120px, 92vw); /* Element width size */
  margin: 0 auto; /* External spacing outside element */
}

/* UI chrome (header, nav, dropdowns, buttons, toggles) is interactive — not text to
   select/copy. Make it non-selectable so a click never drops a blinking text caret or
   accidental selection (also avoids the caret landing here in browser caret-browsing). */
.site-header,
.site-header *,
.btn,
button,
.theme-toggle,
.nav-toggle { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column; /* topbar + main row stacked */
  align-items: stretch;
  padding: 0; /* inner rows handle padding */
  z-index: 1000;
  background: rgba(17, 21, 32, 0.98);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
  transition: background 0.3s ease, border-color 0.3s ease;
}

/* Industry vertical topbar (above logo) — matches header bg, slim height */
.header-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 2px 40px;
  background: transparent; /* inherits header bg, no visual separation */
  border-bottom: none;
  font-size: 12px;
  letter-spacing: 0.03em;
  overflow-x: auto;          /* extra industries scroll within the bar, never overflow the page */
  scrollbar-width: none;     /* Firefox: hide scrollbar */
  -ms-overflow-style: none;  /* IE/Edge legacy */
}
.header-topbar::-webkit-scrollbar { display: none; } /* Chrome/Safari: hide scrollbar */
.header-topbar__link { flex: 0 0 auto; white-space: nowrap; }
.header-topbar__link {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  padding: 2px 14px;
  font-weight: 500;
  position: relative;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.header-topbar__link:hover {
  color: #ffffff;
  text-decoration-color: #ffffff;
}
.header-topbar__link.active {
  color: #ffffff;
  font-weight: 700;
  text-decoration-color: #ffffff;
}
.header-topbar__link + .header-topbar__link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 12px;
  width: 1px;
  background: rgba(255, 255, 255, 0.20);
}

/* INNERLUXES Global brand link — pinned, doesn't scroll */
.header-topbar__link--brand { flex-shrink: 0; }

/* Category links (Healthcare, Finance) with inline Lucide icons */
.header-topbar__link--cat { display: inline-flex; align-items: center; gap: 5px; }
.header-topbar__link--cat svg { width: 13px; height: 13px; flex: 0 0 auto; }

/* Topbar right-side contact (desktop) */
.header-topbar__contact { margin-left: auto; display: flex; align-items: center; gap: 22px; flex: 0 0 auto; }
.header-topbar__contact-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.1rem; white-space: nowrap; font-weight: 500;
  text-decoration: none; transition: color 0.15s ease;
}
.header-topbar__contact-link:hover { color: #ffffff; }
.header-topbar__contact-link svg { width: 17px; height: 17px; flex: 0 0 auto; }
.header-topbar__flag { width: 23px; height: 16px; border-radius: 2px; object-fit: cover; flex: 0 0 auto; display: block; }

/* Topbar categories: desktop only; mobile -> hidden, moved to BOTTOM of sidebar as simple links */
.nav-mobile-cats { display: none; }
@media (max-width: 1279px) {
  .header-topbar { display: none !important; }
  .nav-mobile-cats {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px 18px;
    padding: 14px 20px 6px;
    margin-top: 10px;
    border-top: 1px solid var(--border, rgba(255,255,255,0.12));
  }
  .nav-mobile-cat-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.8rem; font-weight: 500;
    color: #ffffff;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.55);
    text-underline-offset: 3px;
  }
  .nav-mobile-cat-link svg { width: 14px; height: 14px; flex: 0 0 auto; }
  .nav-mobile-cat-link:hover { color: #ffffff; }
  /* Light mode: full black text + underline (dark/night mode stays white) */
  body.light .nav-mobile-cat-link,
  body.light .nav-mobile-cat-link:hover {
    color: #000000;
    text-decoration-color: #000000;
  }
}

/* Mobile sidebar: contact (email + phone), theme-adaptive like the category links */
.nav-mobile-contact { display: none; }
@media (max-width: 1279px) {
  .nav-mobile-contact {
    display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
    padding: 0 20px 2px; margin-top: 28px; text-align: left; width: 100%;
  }
  .nav-mobile-contact-link {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 1.15rem; font-weight: 400;
    color: #ffffff !important; text-decoration: none;
  }
  .nav-mobile-contact-link svg { width: 20px; height: 20px; flex: 0 0 auto; }
  .nav-mobile-flag { width: 27px; height: 18px; border-radius: 2px; object-fit: cover; flex: 0 0 auto; display: block; }

/* When a mobile dropdown is open, hide bottom extras so the dropdown gets more space */
@media (max-width: 1279px) {
  .site-nav:has(.nav-item.has-dropdown.active) .nav-mobile-cats,
  .site-nav:has(.nav-item.has-dropdown.active) .nav-mobile-contact,
  .site-nav:has(.nav-item.has-dropdown.active) .mobile-nav-socials {
    display: none !important;
  }
}
}

/* Marquee container for the 6 industry tabs */
.header-topbar__marquee {
  display: inline-flex;
  align-items: center;
  flex: 1;
  justify-content: center;
  min-width: 0;
}
.header-topbar__track {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;        /* keep all items on ONE line (no top/bottom wrap) */
  white-space: nowrap;
}
/* Global keyframe — must live OUTSIDE any @media so it works on desktop too
   (it was previously nested inside @media(max-width:1100px), so the marquee
   only animated on mobile/tablet, never on desktop). */
@keyframes hd-topbar-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* hold-and-drag affordance for the top-bar strip */
.header-topbar__marquee { cursor: grab; touch-action: pan-y; }
.header-topbar__marquee.is-grabbing { cursor: grabbing; }
.header-topbar__marquee.is-grabbing .header-topbar__link { pointer-events: none; }

/* small left/right scroll arrows, sized to the top-bar height */
.header-topbar__arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  margin: 0 2px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.header-topbar__arrow:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }
.header-topbar__arrow svg { width: 11px; height: 11px; display: block; }
body.light .header-topbar__arrow { background: rgba(255, 255, 255, 0.18); color: #fff; }
body.light .header-topbar__arrow:hover { background: rgba(255, 255, 255, 0.32); }
.header-topbar__track > .header-topbar__link {
  white-space: nowrap;
  flex-shrink: 0;           /* don't squeeze links; let the track overflow + scroll */
}

/* Desktop: hide the duplicate set (only set #1 visible, no animation) */
@media (min-width: 1101px) {
  /* Desktop now also scrolls the marquee — with 20 verticals a static centered
     list no longer fits on one line, so animate it like tablet/mobile. Keep the
     aria-hidden duplicate set visible so the loop is seamless. */
  .header-topbar__marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    justify-content: flex-start;
  }
  .header-topbar__track {
    width: max-content;
    animation: hd-topbar-marquee 80s linear infinite;
    will-change: transform;
  }
  .header-topbar__marquee:hover .header-topbar__track,
  .header-topbar__marquee:focus-within .header-topbar__track {
    animation-play-state: paused;
  }
  /* Add separator before the first marquee link (since the brand link is now outside) */
  .header-topbar__marquee .header-topbar__track > .header-topbar__link:first-child::before {
    content: ''; position: absolute; left: 0; top: 50%;
    transform: translateY(-50%); height: 12px; width: 1px;
    background: rgba(255, 255, 255, 0.20);
  }
}

/* Tablet & mobile: enable the marquee animation, show duplicates for seamless loop */
@media (max-width: 1100px) {
  .header-topbar__marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    flex: 1; min-width: 0;
  }
  .header-topbar__track {
    width: max-content;
    animation: hd-topbar-marquee 80s linear infinite;
    will-change: transform;
  }
  .header-topbar__marquee:hover .header-topbar__track,
  .header-topbar__marquee:focus-within .header-topbar__track {
    animation-play-state: paused;
  }
  /* Restore separators inside the marquee */
  .header-topbar__track .header-topbar__link + .header-topbar__link::before {
    content: ''; position: absolute; left: 0; top: 50%;
    transform: translateY(-50%); height: 12px; width: 1px;
    background: rgba(255, 255, 255, 0.20);
  }
}

/* Main header row (logo + actions + nav) */
.header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px 0 6px;
  min-height: 68px;
}
@media (max-width: 900px) {
  .header-topbar {
    padding: 2px 8px;
    font-size: 10.5px;
    justify-content: flex-start;
    /* overflow-x removed — marquee handles horizontal scroll automatically */
    flex-wrap: nowrap;
  }
  .header-topbar__link {
    padding: 2px 8px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .header-main {
    padding: 0.75rem 1rem;
    min-height: 64px;
  }
}

/* Desktop-only premium overrides — mobile rules in styles-page.css stay untouched */
@media (min-width: 1280px) {
  .site-header {
    padding: 0;
    background: rgba(17, 21, 32, 0.98); /* dark mode: dark like mobile dark header */
    border-bottom: none;
  }
  body.light .site-header {
    background: #005EB8; /* light mode: brand blue like mobile light header */
    border-bottom: none;
    box-shadow: 0 4px 20px rgba(0, 94, 184, 0.15);
  }
}


.site-header.shrink {
  padding: 0rem 0.3rem; /* Internal spacing inside element */
  left: 300px; /* Distance from left edge */
  right: 300px; /* Distance from right edge */
  max-width: calc(100% - 600px); /* Maximum width constraint - keeps text contained in sticky state */
}

/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 1400px) {
  .site-header.shrink {
    left: 300px; /* Distance from left edge */
    right: 300px; /* Distance from right edge */
    max-width: calc(100% - 400px); /* Maximum width constraint */
  }
}

/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 1200px) {
  .site-header.shrink {
    left: 80px; /* Distance from left edge */
    right: 80px; /* Distance from right edge */
    max-width: calc(100% - 160px); /* Maximum width constraint */
  }
}

/* body.light .site-header — desktop overrides handled in @media (min-width: 901px) above; mobile in styles-page.css */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-family: serif; /* matches services-page H2 elegant serif */
  font-weight: 400;   /* matches services-page H2 light weight */
  font-size: 2.4rem !important;
  letter-spacing: 0.005em; /* matches services-page H2 spacing */
  transition: transform 0.2s ease;
}
.site-header .logo-text {
  font-size: 1.45rem !important; /* override mobile/desktop logo-text size */
  font-family: serif;
  font-weight: 400;
  line-height: 1;
}

/* Stacked brand: INNERLUXES + small vertical-name subtitle (e.g., "Healthcare") */
.site-header .logo-stack {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
}
.site-header .logo-sub {
  font-family: serif;
  font-size: 0.9rem;           /* compact sub-text so the logo doesn't crowd the nav */
  font-weight: 400;            /* not bold — just larger */
  letter-spacing: 0.03em;
  color: #ffffff;              /* dark mode default — white sub-text */
  padding-left: 3.2em;         /* aligns roughly under "LUXES" */
  margin-top: 4px;
  white-space: nowrap;
  transition: color 0.2s ease;
}
body.light .site-header .logo-sub {
  color: #000000;              /* light mode — black sub-text */
}
@media (max-width: 1279px) {
  .site-header .logo-sub {
    font-size: 0.85rem;        /* bigger sub-text on mobile too — not bold */
    padding-left: 2.8em;
    margin-top: 3px;
  }
}

.logo-icon {
  width: 38px;
  height: 38px;
}

.site-header .logo-icon {
  animation: logo-spin 14s linear infinite;
  transform-origin: 50% 50%;
  filter: none; /* dark mode: show the logo in its real colours (light mode overridden below) */
}

/* Desktop-only premium logo styling */
@media (min-width: 1280px) {
  .logo {
    gap: 0.5rem;
    font-weight: 600;
    font-size: 1.0625rem; /* 17px premium */
    letter-spacing: 0.06em;
    transition: opacity 0.2s ease, color 0.2s ease;
    text-decoration: none;
    color: #ffffff; /* dark mode default — white logo text */
  }
  body.light .logo {
    color: #000000; /* light mode — black logo text */
  }z
  .logo:hover {
    opacity: 0.85;
  }
  .logo-icon {
    width: 30px;
    height: 30px;
  }
  .site-header .logo-icon {
    animation: logo-spin 30s linear infinite;
    filter: none; /* show the logo in its real colours on the dark/blue header */
  }
}

.site-footer .logo-icon {
  animation: logo-spin 14s linear infinite; /* Animation name and duration */
  transform-origin: 50% 50%; /* Sets the transform-origin property */
}

.site-footer .logo-text {
  font-size: 1.8rem; /* Size of text */
  font-weight: 700; /* Thickness of text (400=normal, 700=bold) */
  letter-spacing: 0.04em; /* Space between characters */
}

.site-header.shrink .logo-text {
  display: none; /* Layout type (flex, grid, block, inline, etc) */
}

/* Light mode logo visibility */
body.light .logo-icon {
  filter: brightness(0) saturate(100%); /* Visual filter effects */
  opacity: 1 !important; /* Transparency level (0=invisible, 1=opaque) */
}

body.light .site-header .logo-icon {
  filter: brightness(0.1) saturate(0%); /* Visual filter effects */
}

body.light .site-footer .logo-icon {
  filter: brightness(0.1) saturate(0%); /* Visual filter effects */
}

/* Ensure logo icon is visible on mobile header */
/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 1279px) {
  .logo-icon {
    display: block !important; /* Layout type (flex, grid, block, inline, etc) */
    width: 40px !important; /* Element width size */
    height: 40px !important; /* Element height size */
    margin: 0 !important; /* External spacing outside element */
    padding: 0 !important; /* Internal spacing inside element */
  }

  .site-header .logo {
    gap: 0.6rem; /* Space between flex or grid items */
    display: inline-flex; /* Layout type (flex, grid, block, inline, etc) */
  }

  .site-header .logo-text {
    display: inline; /* Layout type (flex, grid, block, inline, etc) */
    font-size: 1rem; /* Size of text */
  }

  /* Mobile: smaller theme toggle next to hamburger */
  .theme-toggle {
    width: 32px;
    height: 32px;
    overflow: hidden;
  }
  .theme-toggle .moon,
  .theme-toggle .sun {
    width: 14px;
    height: 14px;
  }
}

.site-nav {
  display: flex;
  gap: 0.2rem;
  align-items: center;
  flex: 1;
  justify-content: center;
  flex-wrap: nowrap;
}

/* ─── Header search — the reference exact bar behaviour, scoped to .header-search
   only (no styles leak to the rest of the site). Icon → inline white input + close X
   that replaces the nav and submits to /search/. ───────────────────────────────── */
.header-search {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  /* sit in the header's right-side padding gap so the Contact button keeps its place
     (same technique as the reference .header-search{margin-right:-52px}) */
  margin-right: -14px;
}
.header-search-open-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  margin-left: 8px;
  background: transparent;
  border: none;
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.16s ease-in-out;
}
.header-search-open-btn:hover { opacity: 0.8; }
.header-search-open-btn svg { width: 19px; height: 19px; display: block; }

.header-search-form {
  display: none;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
  margin-left: 8px;
}
.header-search-form input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid #e7e7e7;
  background: #fff;
  color: #2b2826;
  font: inherit;
  font-size: 14px;
  line-height: 1.35;
  margin: 0 10px 0 0;
  padding: 9px 13px;
  outline: none;
}
.header-search-form input:focus { border-color: #b8c4d2; }
.header-search-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.16s ease-in-out;
}
.header-search-close-btn:hover { opacity: 0.8; }
.header-search-close-btn svg { width: 18px; height: 18px; display: block; }

/* active state — exactly like the reference .header.search-active */
.site-header.search-active .nav-actions { flex: 1 1 auto; }
.site-header.search-active .header-search { flex: 1 0 auto; margin-right: 0; }
.site-header.search-active .header-search-form { display: flex; }
.site-header.search-active .nav-links,
.site-header.search-active .nav-actions .theme-toggle,
.site-header.search-active .nav-actions .contact-btn,
.site-header.search-active .header-search-open-btn { display: none !important; }

/* desktop inline search hides once the nav collapses (<1280); the mobile/tablet
   header gets its own .hm-search icon instead */
@media (max-width: 1279px) {
  .header-search { display: none; }
}

/* ─── Mobile / tablet header actions — phone (tablet), search (mobile+tablet),
   Contact (tablet) — identical to the DESKTOP blue header pill + number.
   The collapsed header is BLUE (#005EB8) at the top in light mode and dark navy
   in dark mode, so the DEFAULT styling is white-on-colored (exactly like the
   desktop blue header). When the user scrolls and the header shrinks to WHITE
   in light mode (.site-header.shrink), the elements flip to dark/blue. ───────── */
.hm-phone, .hm-search, .hm-contact { display: none; text-decoration: none; }

/* search icon */
.hm-search {
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
}
.hm-search:hover { background: rgba(255, 255, 255, 0.14); }
.hm-search svg { width: 20px; height: 20px; display: block; }

/* phone number + US flag — same as desktop topbar */
.hm-phone {
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.hm-flag { width: 18px; height: 13px; border-radius: 2px; display: block; flex: 0 0 auto; }

/* Contact = IDENTICAL to the desktop button: a rectangular BOX (border-radius 2px),
   transparent fill, 1px white outline, white text + 15px phone icon. Hover = subtle
   translucent white (stays outlined — never fills/hides). Not a pill. */
.hm-contact {
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  padding: 9px 24px;
  border-radius: 2px;
  white-space: nowrap;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.hm-contact svg { width: 15px; height: 15px; flex: 0 0 auto; }
.hm-contact:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; color: #fff; }

/* Light mode, scrolled to white header (.shrink): flip to dark/blue box */
body.light .site-header.shrink .hm-search { color: var(--text); }
body.light .site-header.shrink .hm-search:hover { background: rgba(0, 94, 184, 0.08); }
body.light .site-header.shrink .hm-phone { color: var(--text); }
body.light .site-header.shrink .hm-contact { border-color: #005EB8; color: #005EB8; }
body.light .site-header.shrink .hm-contact:hover { background: rgba(0, 94, 184, 0.08); border-color: #005EB8; color: #005EB8; }

@media (max-width: 1279px) {
  .hm-search { display: inline-flex; }
  .hm-phone, .hm-contact { display: inline-flex; }
}
@media (max-width: 767px) {
  .hm-phone, .hm-contact { display: none; } /* mobile: search icon only */
}

/* Desktop-only layout: split nav-links to middle, nav-actions to right edge */
@media (min-width: 1280px) {
  .site-nav {
    justify-content: space-between;
    min-width: 0;
  }
  .nav-links {
    flex: 1;
  }
}

.logo-spin-section {
  padding: 48px 0 24px; /* Internal spacing inside element */
  position: relative; /* Positioning method (fixed, absolute, relative, sticky) */
  overflow: hidden; /* What happens to content that overflows */
}

/* Floating tech cards behind the logo */
.logo-spin-cards{position:absolute;inset:0;pointer-events:none;z-index:0} /* Sets the .logo-spin-cards{position property */
.ls-card{position:absolute;padding:10px 22px;border-radius:5px;font-size:.78rem;font-weight:700;letter-spacing:.05em;color:var(--muted);border:1px solid var(--border);background:var(--card);opacity:.45;box-shadow:0 4px 24px rgba(0,0,0,.06);animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-fill-mode:both} /* Sets the .ls-card{position property */
.ls-card span{display:block}
body.light .ls-card{background:#fff;border-color:rgba(0,0,0,.08);box-shadow:0 4px 20px rgba(0,0,0,.05)} /* Sets the body.light .ls-card{background property */

.ls-card-1{top:12%;left:6%;animation:lsFloat1 6s infinite} /* Sets the .ls-card-1{top property */
.ls-card-2{top:8%;right:8%;animation:lsFloat2 7s infinite} /* Sets the .ls-card-2{top property */
.ls-card-3{top:55%;left:3%;animation:lsFloat3 5.5s infinite} /* Sets the .ls-card-3{top property */
.ls-card-4{top:65%;right:5%;animation:lsFloat4 6.5s infinite} /* Sets the .ls-card-4{top property */
.ls-card-5{top:25%;left:18%;animation:lsFloat5 7.5s infinite} /* Sets the .ls-card-5{top property */
.ls-card-6{top:30%;right:16%;animation:lsFloat6 5s infinite} /* Sets the .ls-card-6{top property */
.ls-card-7{bottom:10%;left:14%;animation:lsFloat7 6.8s infinite} /* Sets the .ls-card-7{bottom property */
.ls-card-8{bottom:8%;right:14%;animation:lsFloat8 5.8s infinite} /* Sets the .ls-card-8{bottom property */

/* Animation keyframes - defines animation steps */
@keyframes lsFloat1{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-18px) rotate(2deg)}}
/* Animation keyframes - defines animation steps */
@keyframes lsFloat2{0%,100%{transform:translateY(0) rotate(3deg)}50%{transform:translateY(-22px) rotate(-2deg)}}
/* Animation keyframes - defines animation steps */
@keyframes lsFloat3{0%,100%{transform:translateY(0) rotate(1deg)}50%{transform:translateY(-16px) rotate(-3deg)}}
/* Animation keyframes - defines animation steps */
@keyframes lsFloat4{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-20px) rotate(1deg)}}
/* Animation keyframes - defines animation steps */
@keyframes lsFloat5{0%,100%{transform:translateY(0) rotate(2deg)}50%{transform:translateY(-14px) rotate(-2deg)}}
/* Animation keyframes - defines animation steps */
@keyframes lsFloat6{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-20px) rotate(3deg)}}
/* Animation keyframes - defines animation steps */
@keyframes lsFloat7{0%,100%{transform:translateY(0) rotate(3deg)}50%{transform:translateY(-16px) rotate(-1deg)}}
/* Animation keyframes - defines animation steps */
@keyframes lsFloat8{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-18px) rotate(2deg)}}

.logo-spin-container{position:relative;z-index:1} /* Sets the .logo-spin-container{position property */

/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 768px){
  .ls-card{font-size:.68rem;padding:7px 14px} /* Sets the .ls-card{font-size property */
  .ls-card-5,.ls-card-6{display:none}
}

.logo-spin-container {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  flex-direction: column; /* Direction of flex items (row, column) */
  justify-content: center; /* Horizontal alignment in flex container */
  align-items: center; /* Vertical alignment in flex container */
  gap: 12px; /* Space between flex or grid items */
}

.spinning-logo {
  width: 200px; /* Element width size */
  height: 200px; /* Element height size */
  animation: logo-spin 6s linear infinite; /* Animation name and duration */
}

.logo-spin-title {
  margin: 0; /* External spacing outside element */
  font-size: 1.25rem; /* Size of text */
  font-weight: 800; /* Thickness of text (400=normal, 700=bold) */
  letter-spacing: 0.1em; /* Space between characters */
  text-transform: uppercase; /* Text transformation (uppercase, lowercase) */
  color: #0FF3F1; /* Text/foreground color */
  text-align: center; /* Text alignment (left, center, right) */
}

body.light .logo-spin-title {
  color: #000000; /* Text/foreground color */
}

/* Animation keyframes - defines animation steps */
@keyframes logo-spin {
  from {
    transform: rotate(0deg); /* CSS 2D/3D transformation (rotate, scale, translate) */
  }
  to {
    transform: rotate(360deg); /* CSS 2D/3D transformation (rotate, scale, translate) */
  }
}

.nav-links {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* Desktop-only: gap between nav items — tightened so 8 items fit without
   overlapping the logo (left) or contact button (right) */
@media (min-width: 1280px) {
  .nav-links {
    gap: 13px;
  }
}
@media (min-width: 1500px) {
  .nav-links {
    gap: 22px;
  }
}

/* Responsive: at narrower desktops (901-1200px), slightly tighter but still readable */
/* Safeguard: never let nav-links push the right-side actions off-screen */
@media (min-width: 1280px) {
  .nav-actions {
    flex-shrink: 0;          /* keep theme toggle + contact button visible */
    white-space: nowrap;
  }
  .nav-links {
    min-width: 0;            /* allow nav-links to shrink before pushing actions out */
    flex-shrink: 1;
  }

  /* Wide mega-menu dropdowns: anchor to viewport center, MUCH wider now.
     Width formula: viewport - 200px (100px margin each side) for breathing room.
     Capped at 1600px on huge monitors so it doesn't span entire screen. */
  .nav-item.has-dropdown .dropdown.dropdown-wide,
  .nav-item.has-dropdown:hover .dropdown.dropdown-wide,
  .nav-item.has-dropdown:focus-within .dropdown.dropdown-wide,
  .nav-item.has-dropdown.active .dropdown.dropdown-wide,
  .nav-item.has-dropdown.hover-active .dropdown.dropdown-wide,
  .dropdown.dropdown-wide,
  .dropdown.dropdown-wide:hover {
    position: fixed !important;
    top: 95px !important;            /* touches header bottom — no gap */
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: auto !important;          /* stretch edge-to-edge (left:0/right:0) */
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;     /* full-bleed: square corners at edges */
    border-top: none !important;     /* no blue line where it meets the header */
    max-height: calc(100vh - 95px - 14px) !important;  /* small gap at bottom */
    z-index: 1200 !important;
  }
  .site-header.shrink .nav-item.has-dropdown .dropdown.dropdown-wide,
  .site-header.shrink .dropdown.dropdown-wide {
    top: 68px !important;            /* shrunk header without topbar */
    max-height: calc(100vh - 68px - 14px) !important;
  }
}

/* Close (X) button — top-right corner of an open wide mega-menu (desktop only).
   Injected by initDropdownClose() in components.js. Click force-closes the panel. */
.dropdown-close { display: none; }
@media (min-width: 1280px) {
  .dropdown.dropdown-wide .dropdown-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 12px;
    right: 16px;
    width: 34px;
    height: 34px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 9px;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    z-index: 6;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.25s ease;
  }
  .dropdown.dropdown-wide .dropdown-close svg { width: 17px; height: 17px; }
  .dropdown.dropdown-wide .dropdown-close:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
    transform: rotate(90deg);
  }
  body.light .dropdown.dropdown-wide .dropdown-close {
    border-color: rgba(0, 94, 184, 0.3);
    color: #005EB8;
  }
  body.light .dropdown.dropdown-wide .dropdown-close:hover {
    background: rgba(0, 94, 184, 0.08);
    border-color: #005EB8;
    color: #005EB8;
  }
}

/* Tighter spacing on 1500-1200px laptops (6-item nav-link headers like SaaS) */
@media (max-width: 1500px) and (min-width: 1201px) {
  .site-header { padding: 0 32px; }
  .nav-links { gap: 16px; }
  .nav-links > a,
  .nav-links > .nav-item > a {
    font-size: 14px;
    padding: 6px 3px;
  }
  .site-header .logo-sub { font-size: 0.92rem; padding-left: 3.4em; }
}

@media (max-width: 1200px) and (min-width: 901px) {
  .site-header { padding: 0 18px; }
  .nav-links { gap: 12px; }
  .nav-links > a,
  .nav-links > .nav-item > a {
    font-size: 12.5px;
    padding: 6px 3px;
  }
  /* Shrink logo + sub-text so they don't push the nav off */
  .site-header .logo-text { font-size: 1.3rem !important; }
  .site-header .logo-sub  { font-size: 0.78rem; padding-left: 3.0em; margin-top: 2px; }
  .nav-actions { gap: 8px; }
  /* Premium contact-btn already styled in main rule — keep size consistent only */
  .nav-actions .contact-btn .contact-text { display: none; }
}

@media (max-width: 1100px) and (min-width: 901px) {
  /* Tighter spacing for 7-item nav on tablet/small-laptop range */
  .site-header { padding: 0 18px; }
  .header-main { padding: 0 18px; }
  .nav-links { gap: 12px; }
  .nav-links > a,
  .nav-links > .nav-item > a {
    font-size: 12.5px;
    padding: 6px 2px;
  }
  .nav-actions { gap: 8px; }
  .theme-toggle { width: 34px; height: 34px; }
  /* contact-btn keeps its premium circle style — no font-size/padding override */
  .logo .logo-text { font-size: 1.25rem !important; }
  .logo .logo-sub { font-size: 0.82rem; padding-left: 2.6em; }
  /* Hide chevron after dropdown items at this width to save space */
  .nav-item.has-dropdown > a::after { margin-left: 2px; }
}
@media (max-width: 768px) and (min-width: 901px) {
  .site-header {
    padding: 0 14px;
  }
  .nav-links {
    gap: 10px;
  }
  .nav-links > a,
  .nav-links > .nav-item > a {
    font-size: 12px;
    padding: 6px 1px;
  }
  .nav-actions {
    gap: 6px;
  }
  /* contact-btn keeps its premium circle style — no padding override here */
  .logo {
    font-size: 1rem;
    letter-spacing: 0.05em;
  }
}

.site-header.shrink .site-nav {
  gap: 0.2em; /* Space between flex or grid items */
  min-width: 0; /* Minimum width constraint */
  flex-shrink: 1; /* How much flex item shrinks */
  overflow: hidden; /* What happens to content that overflows */
  justify-content: center; /* Horizontal alignment in flex container */
}

.site-header.shrink .nav-links {
  gap: 0.2rem; /* Space between flex or grid items */
  justify-content: center; /* Horizontal alignment in flex container */
  overflow: hidden; /* What happens to content that overflows */
}

.site-header.shrink .nav-links > a,
.site-header.shrink .nav-links > .nav-item > a {
  font-size: 0.7rem; /* Size of text */
  padding: 0.5rem 0.9rem; /* Internal spacing inside element */
  white-space: nowrap; /* How whitespace is handled in text */
}

.site-header.shrink .nav-item {
  padding-bottom: 3rem; /* Sets the padding-bottom property */
  margin-bottom: -3rem; /* Sets the margin-bottom property */
}

.site-header.shrink .dropdown {
  margin-top: 0; /* Sets the margin-top property */
  transition: opacity 0.15s ease, visibility 0.15s ease; /* Animation duration and easing */
}

.site-header.shrink .nav-item.has-dropdown:hover .dropdown,
.site-header.shrink .nav-item.has-dropdown.active .dropdown,
.site-header.shrink .nav-item.has-dropdown.hover-active .dropdown,
.site-header.shrink .dropdown:hover {
  transition: opacity 0.1s ease, visibility 0.1s ease; /* Animation duration and easing */
  transition-delay: 0s; /* Sets the transition-delay property */
}

.site-header.shrink .dropdown::before {
  top: -4rem; /* Distance from top edge */
  left: -3rem; /* Distance from left edge */
  right: -3rem; /* Distance from right edge */
  height: 4.5rem; /* Element height size */
}

.nav-actions {
  position: absolute;
  right: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Desktop-only: switch to flex flow for proper right-edge anchor */
@media (min-width: 1280px) {
  .nav-actions {
    position: relative;
    right: auto;
    gap: 10px;
    flex-shrink: 0;
  }
}

.contact-btn {
  position: relative;
  min-width: 44px;
  justify-content: center;
}

/* Hide contact text — icon-only button */
.contact-text {
  display: none !important;
}

/* Desktop premium contact button — same style as theme-toggle (transparent circle).
   Stronger specificity to beat .btn-primary purple gradient. */
@media (min-width: 1280px) {
  .btn-primary.contact-btn,
  .nav-actions .contact-btn,
  a.contact-btn,
  .contact-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    background: rgba(0, 94, 184, 0.08) !important;
    background-image: none !important;
    border: 1px solid rgba(0, 94, 184, 0.35) !important;
    border-radius: 999px !important;
    color: #005EB8 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    font-size: 0 !important;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
  }
  /* Phone icon via mask — inherits color from .contact-btn */
  .btn-primary.contact-btn::before,
  .nav-actions .contact-btn::before,
  a.contact-btn::before,
  .contact-btn::before {
    content: '' !important;
    width: 18px !important;
    height: 18px !important;
    display: inline-block !important;
    background-color: currentColor !important;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>") center/contain no-repeat !important;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>") center/contain no-repeat !important;
    transition: transform 0.25s ease;
  }
  .contact-btn:hover {
    background: rgba(0, 94, 184, 0.1);
    border-color: rgba(0, 94, 184, 0.4);
    box-shadow: 0 4px 12px rgba(0, 94, 184, 0.2);
    transform: translateY(-1px);
  }
  .contact-btn:hover::before {
    transform: scale(1.08);
  }
  .contact-btn:active {
    transform: translateY(0);
  }

  /* Dark mode — matches theme-toggle */
  body:not(.light) .contact-btn {
    border-color: rgba(96, 165, 250, 0.22);
    background: rgba(96, 165, 250, 0.06);
    color: #93c5fd;
  }
  body:not(.light) .contact-btn:hover {
    background: rgba(96, 165, 250, 0.14);
    border-color: rgba(96, 165, 250, 0.5);
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.25);
  }
}

.site-header.shrink .contact-text {
  display: none; /* Layout type (flex, grid, block, inline, etc) */
}

.site-header.shrink .nav-actions {
  gap: 0.35rem; /* Space between flex or grid items */
}

.site-header.shrink .theme-toggle {
  width: 30px; /* Element width size */
  height: 30px; /* Element height size */
}

.site-header.shrink .moon,
.site-header.shrink .sun {
  width: 14px; /* Element width size */
  height: 14px; /* Element height size */
}

.site-header.shrink .moon::after {
  width: 10px; /* Element width size */
  height: 10px; /* Element height size */
  top: 1px; /* Distance from top edge */
  left: 4px; /* Distance from left edge */
}

/* Shrink mode: contact-btn already icon-only — keep size consistent */
.site-header.shrink .contact-btn {
  width: 34px;
  height: 34px;
  min-width: 34px;
}
.site-header.shrink .contact-btn::before {
  width: 16px;
  height: 16px;
}

.theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(0, 94, 184, 0.18);
  background: rgba(0, 94, 184, 0.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #005EB8;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.theme-toggle:hover {
  background: rgba(0, 94, 184, 0.1);
  border-color: rgba(0, 94, 184, 0.4);
  box-shadow: 0 4px 12px rgba(0, 94, 184, 0.2);
  transform: translateY(-1px);
}

body:not(.light) .theme-toggle {
  border-color: rgba(96, 165, 250, 0.22);
  background: rgba(96, 165, 250, 0.06);
  color: #93c5fd;
}
body:not(.light) .theme-toggle:hover {
  background: rgba(96, 165, 250, 0.14);
  border-color: rgba(96, 165, 250, 0.5);
  box-shadow: 0 4px 12px rgba(96, 165, 250, 0.25);
}

/* Premium stroke icons via mask — inherit color from .theme-toggle */
.moon {
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/></svg>") center/contain no-repeat;
}

.sun {
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v2'/><path d='M12 20v2'/><path d='m4.93 4.93 1.41 1.41'/><path d='m17.66 17.66 1.41 1.41'/><path d='M2 12h2'/><path d='M20 12h2'/><path d='m6.34 17.66-1.41 1.41'/><path d='m19.07 4.93-1.41 1.41'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v2'/><path d='M12 20v2'/><path d='m4.93 4.93 1.41 1.41'/><path d='m17.66 17.66 1.41 1.41'/><path d='M2 12h2'/><path d='M20 12h2'/><path d='m6.34 17.66-1.41 1.41'/><path d='m19.07 4.93-1.41 1.41'/></svg>") center/contain no-repeat;
  display: none;
}

body.light .moon {
  display: block; /* Layout type (flex, grid, block, inline, etc) */
}

body.light .sun {
  display: none; /* Layout type (flex, grid, block, inline, etc) */
}

body:not(.light) .moon {
  display: none; /* Layout type (flex, grid, block, inline, etc) */
}

body:not(.light) .sun {
  display: block; /* Layout type (flex, grid, block, inline, etc) */
}

.nav-item {
  position: static; /* Positioning method (fixed, absolute, relative, sticky) */
  padding-bottom: 1rem; /* Sets the padding-bottom property */
  margin-bottom: -1rem; /* Sets the margin-bottom property */
}

.nav-item.has-dropdown > a {
  display: inline-flex; /* Layout type (flex, grid, block, inline, etc) */
  align-items: center; /* Vertical alignment in flex container */
  gap: 0.3rem; /* Space between flex or grid items */
}

.nav-item.has-dropdown > a::after {
  content: "\2304";
  font-size: 1.4rem;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  transform: scaleY(-1);
  margin-left: 0.001rem;
  line-height: 0;
  vertical-align: middle;
  position: relative;
  top: 0.5em; /* flipped state me thora adjust */
}

.nav-item.has-dropdown.active > a::after {
  transform: scaleY(1);
  color: var(--primary);
  top: 0.0001em; /* normal state me center */
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  width: min(960px, 92vw);
  background: rgba(17, 21, 32, 0.98);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1rem;
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1100;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  transform: translateX(-50%);
  margin-top: 0;
  transition: opacity 0.15s ease 0.08s, visibility 0.15s ease 0.08s;
  max-height: 82vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #3b82f6 rgba(0, 0, 0, 0.2);
}

/* Desktop dropdown — color flips with theme (matches header behavior) */
@media (min-width: 1280px) {
  .dropdown {
    background: rgba(17, 21, 32, 0.98); /* dark mode: dark like header */
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 1.25rem;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35),
                0 0 0 1px rgba(255, 255, 255, 0.04);
    transform: translateX(-50%) translateY(0);
    margin-top: 0; /* no gap — cursor moves smoothly from nav item to dropdown */
    transition: opacity 0.2s ease, visibility 0.2s ease;
    scrollbar-color: rgba(255, 255, 255, 0.4) rgba(0, 0, 0, 0.15);
  }
  /* Light mode: WHITE dropdown with blue border */
  body.light .dropdown {
    background: #ffffff;
    border: 1px solid #005EB8;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18),
                0 0 0 1px rgba(0, 94, 184, 0.15);
  }
  /* Dark mode: items white on blue (default) */
  .dropdown a,
  .dropdown .dropdown-item {
    color: rgba(255, 255, 255, 0.9);
  }
  .dropdown a:hover,
  .dropdown .dropdown-item:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
  }
  .dropdown h4,
  .dropdown .dropdown-section-title {
    color: rgba(255, 255, 255, 0.7);
  }
  /* Light mode: items DARK on white, hover blue tint */
  body.light .dropdown a,
  body.light .dropdown .dropdown-item {
    color: #1a1a1a;
  }
  body.light .dropdown a:hover,
  body.light .dropdown .dropdown-item:hover {
    color: #005EB8;
    background: rgba(0, 94, 184, 0.08);
  }
  body.light .dropdown h4,
  body.light .dropdown .dropdown-section-title {
    color: #005EB8;
  }
  /* Light mode: tabs sidebar — subtle gray to differentiate from white content */
  body.light .dropdown-wide.is-tabbed .dropdown-tabs {
    background: #f6f8fb;
    border-right-color: rgba(0, 0, 0, 0.08);
  }
  body.light .dropdown-tab {
    color: #1a2230;
  }
  body.light .dropdown-tab:hover {
    background: rgba(0, 94, 184, 0.07);
  }
  body.light .dropdown-tab.is-active {
    background: rgba(0, 94, 184, 0.10);
    color: #005EB8;
    box-shadow: inset 3px 0 0 #005EB8;
  }
  /* Removed top "All Services" text — keep only a THIN 3px blue accent strip */
  body.light .dropdown-wide .dropdown-header {
    background: #005EB8;
    border-bottom: none;
    color: transparent;
    height: 3px !important;
    min-height: 3px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 14px 14px 0 0;
  }
  body.light .dropdown-wide .dropdown-header > *,
  body.light .dropdown-wide .dropdown-header span {
    display: none !important;
  }
  /* Light mode: bottom "View All" footer strip — BLUE bg, white link */
  body.light .dropdown-wide .dropdown-footer {
    background: #005EB8;
    border-top: 1px solid #003e7e;
  }
  body.light .dropdown-footer .link {
    color: #ffffff;
  }
  body.light .dropdown-footer .link:hover {
    color: #ffffff;
  }
  body.light .dropdown-footer .link::after {
    border-top-color: #ffffff;
    border-right-color: #ffffff;
  }
}

/* Custom scrollbar for all dropdowns — THIN like horizontal scrollbar */
.dropdown::-webkit-scrollbar {
  width: 4px; /* THIN — was 10px */
  height: 4px;
}

.dropdown::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 2px;
}

.dropdown::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #3b82f6 0%, #1e40af 100%);
  border-radius: 2px;
  border: none; /* removed 1px border that was adding visual thickness */
  min-height: 30px;
}

.dropdown::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%); /* Background color or image */
}

body.light .dropdown {
  scrollbar-color: #3b82f6 rgba(0, 0, 0, 0.08); /* Sets the scrollbar-color property */
}

body.light .dropdown::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.08); /* Background color or image */
}

body.light .dropdown::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #3b82f6 0%, #1e3a8a 100%); /* Background color or image */
}

.dropdown::before {
  content: ''; /* Sets the content property */
  position: absolute; /* Positioning method (fixed, absolute, relative, sticky) */
  top: -5rem; /* Distance from top edge */
  left: -4rem; /* Distance from left edge */
  right: -4rem; /* Distance from right edge */
  height: 6rem; /* Element height size */
  pointer-events: auto; /* Whether element responds to pointer events */
}

/* body.light .dropdown background — desktop handled in @media (min-width: 901px); mobile in styles-page.css */

.dropdown-wide {
  width: min(1480px, 96vw); /* Element width size */
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  flex-wrap: wrap; /* Whether flex items wrap to next line */
  gap: 0.8rem; /* Space between flex or grid items */
  max-height: 82vh; /* Maximum height constraint */
  overflow-y: auto; /* Vertical overflow behavior */
  overflow-x: hidden; /* Horizontal overflow behavior */
  scrollbar-width: thin; /* Sets the scrollbar-width property */
  scrollbar-color: #3b82f6 rgba(0, 0, 0, 0.2); /* Sets the scrollbar-color property */
}

/* Custom scrollbar for wide dropdown — THIN like horizontal */
.dropdown-wide::-webkit-scrollbar {
  width: 4px; /* THIN — was 10px */
  height: 4px;
}

.dropdown-wide::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 2px;
}

.dropdown-wide::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #3b82f6 0%, #1e40af 100%);
  border-radius: 2px;
  border: none; /* removed 1px border that was adding visual thickness */
  min-height: 30px;
}

.dropdown-wide::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%); /* Background color or image */
}

body.light .dropdown-wide {
  scrollbar-color: #3b82f6 rgba(0, 0, 0, 0.08); /* Sets the scrollbar-color property */
}

body.light .dropdown-wide::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.08); /* Background color or image */
}

body.light .dropdown-wide::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #3b82f6 0%, #1e3a8a 100%); /* Background color or image */
}

.dropdown-wide .dropdown-header,
.dropdown-wide .dropdown-footer {
  flex: 0 0 100%; /* Flex container - flexible box layout */
}

.dropdown-wide .dropdown-header {
  order: 0; /* Order of flex item */
}

.dropdown-wide .dropdown-footer {
  order: 8; /* Order of flex item */
}

.dropdown-wide .dropdown-footer {
  text-align: center; /* Text alignment (left, center, right) */
  padding-top: 0.4rem; /* Sets the padding-top property */
  border-top: 1px solid var(--border); /* Top border */
}

.dropdown-section {
  margin-bottom: 0.6rem; /* Sets the margin-bottom property */
}

.dropdown-wide .dropdown-section {
  flex: 1 1 12.5%; /* Flex container - flexible box layout */
  margin-bottom: 0; /* Sets the margin-bottom property */
}

/* Reorder Technology sections: Frontend, Backend, Mobile, Desktop, DevOps, CMS/CRM, Database */
.dropdown-wide .dropdown-section:nth-of-type(1) { order: 1; } /* Sets the .dropdown-wide .dropdown-section property */
.dropdown-wide .dropdown-section:nth-of-type(2) { order: 2; } /* Sets the .dropdown-wide .dropdown-section property */
.dropdown-wide .dropdown-section:nth-of-type(3) { order: 3; } /* Sets the .dropdown-wide .dropdown-section property */
.dropdown-wide .dropdown-section:nth-of-type(4) { order: 4; } /* Sets the .dropdown-wide .dropdown-section property */
.dropdown-wide .dropdown-section:nth-of-type(5) { order: 5; } /* Sets the .dropdown-wide .dropdown-section property */
.dropdown-wide .dropdown-section:nth-of-type(6) { order: 6; } /* Sets the .dropdown-wide .dropdown-section property */
.dropdown-wide .dropdown-section:nth-of-type(7) { order: 7; } /* Sets the .dropdown-wide .dropdown-section property */
.dropdown-wide .dropdown-section:nth-of-type(8) { order: 8; }

/* Company dropdown: 5 cols row 1 (small sections), row 2 = Legal + HC/FN/ITO + SD-HWW(wide) */
.company-dropdown {
  align-items: flex-start;            /* Don't stretch sections to row height */
  align-content: flex-start;          /* Pack rows tightly */
}
.company-dropdown .dropdown-section {
  flex: 0 1 calc(20% - 0.64rem);
  max-width: calc(20% - 0.64rem);
  min-width: 0;
}
/* Row 1 (orders 1-5): small sections at 20% each = 100% */
.company-dropdown .dropdown-section:nth-of-type(1) { order: 1; }  /* About INNERLUXES (10) */
.company-dropdown .dropdown-section:nth-of-type(2) { order: 2; }  /* How We Work (6) */
.company-dropdown .dropdown-section:nth-of-type(3) { order: 3; }  /* Practice About (8) */
.company-dropdown .dropdown-section:nth-of-type(6) { order: 4; }  /* Practice Testimonials (4) */
.company-dropdown .dropdown-section:nth-of-type(7) { order: 5; }  /* Working With Us (8) */
/* Row 2 (orders 6-8): Legal 20% + HC/FN/ITO 20% + SD-HWW 60% = 100% */
.company-dropdown .dropdown-section:nth-of-type(8) { order: 6; }  /* Legal & Policies (5) */
.company-dropdown .dropdown-section:nth-of-type(5) { order: 7; }  /* HC/FN/ITO HWW (18) */
.company-dropdown .dropdown-section:nth-of-type(4) { order: 8; }  /* SD HWW (30) — 60% w/ 3 sub-cols */

/* SD How-We-Work has 30 items — 60% width, 3 internal sub-columns × 10 rows */
.company-dropdown .dropdown-section:nth-of-type(4) {
  flex: 0 1 calc(60% - 1.92rem);
  max-width: calc(60% - 1.92rem);
}
.company-dropdown .dropdown-section:nth-of-type(4) .dropdown-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(10, auto);
  grid-template-columns: repeat(3, 1fr);
  column-gap: 0.8rem;
  row-gap: 0.15rem;
}

/* HC/FN/ITO How-We-Work — keep single column (18 items × ~1rem = ~18rem tall) for readability */
/* Items like "ITO — Growth-Ready Infra" are too long for 2 sub-columns at 10% width each */

/* Line-height + word-wrap on dropdown items to prevent character overlap on wrapped lines */
.dropdown-wide .dropdown-item {
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}
.dropdown-wide .dropdown-item span {
  line-height: 1.35;
  display: inline-block;
  width: 100%;
}

/* ─── Tabbed dropdown layout ────────────────────────────────────────
   .is-tabbed is added by initTabbedDropdowns() in components.js (desktop only).
   Layout: [wide content area | 220px tabs sidebar on the right]
   Only the active section renders. Tabs switch on hover/click/focus.   */
@media (min-width: 1280px) {
  .dropdown-wide.is-tabbed {
    display: grid !important;
    grid-template-columns: 220px 1fr;
    gap: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
    align-content: stretch !important;
  }

  .dropdown-wide.is-tabbed .dropdown-header {
    grid-column: 1 / -1;
    padding: 0.9rem 1.4rem 0.6rem;
    border-bottom: 1px solid var(--border);
    margin: 0 !important;
    flex: none !important;
    max-width: none !important;
  }

  .dropdown-wide.is-tabbed .dropdown-footer {
    grid-column: 1 / -1;
    padding: 0.7rem 1.4rem;
    margin: 0 !important;
    flex: none !important;
    max-width: none !important;
    order: 999;
  }

  /* Sections live in the wide right content area; only .is-active shows */
  .dropdown-wide.is-tabbed .dropdown-section {
    grid-column: 2 !important;
    grid-row: 2;
    display: none !important;
    flex: none !important;
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 1.1rem 1.4rem !important;
    align-self: start;
    order: unset !important;
  }

  .dropdown-wide.is-tabbed .dropdown-section.is-active {
    display: block !important;
  }

  /* ── Premium category-switch reveal ──────────────────────────────
     On each tab switch the section re-enters the render tree, so these
     animations replay: the panel fades, the title slides in, and the
     links cascade in with a staggered ripple for a premium feel.       */
  .dropdown-wide.is-tabbed .dropdown-section.is-active {
    animation: ddPanelReveal 0.24s ease both;
  }
  @keyframes ddPanelReveal {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  .dropdown-wide.is-tabbed .dropdown-section.is-active .dropdown-section-title {
    animation: ddTitleReveal 0.34s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  @keyframes ddTitleReveal {
    from { opacity: 0; transform: translateX(-9px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  .dropdown-wide.is-tabbed .dropdown-section.is-active .dropdown-item {
    animation: ddItemReveal 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  @keyframes ddItemReveal {
    from { opacity: 0; transform: translateY(9px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  /* Staggered cascade for the first dozen links; the rest settle together
     so very long lists never feel slow. */
  .dropdown-wide.is-tabbed .dropdown-section.is-active .dropdown-item:nth-child(1)  { animation-delay: 0.04s; }
  .dropdown-wide.is-tabbed .dropdown-section.is-active .dropdown-item:nth-child(2)  { animation-delay: 0.06s; }
  .dropdown-wide.is-tabbed .dropdown-section.is-active .dropdown-item:nth-child(3)  { animation-delay: 0.08s; }
  .dropdown-wide.is-tabbed .dropdown-section.is-active .dropdown-item:nth-child(4)  { animation-delay: 0.10s; }
  .dropdown-wide.is-tabbed .dropdown-section.is-active .dropdown-item:nth-child(5)  { animation-delay: 0.12s; }
  .dropdown-wide.is-tabbed .dropdown-section.is-active .dropdown-item:nth-child(6)  { animation-delay: 0.135s; }
  .dropdown-wide.is-tabbed .dropdown-section.is-active .dropdown-item:nth-child(7)  { animation-delay: 0.15s; }
  .dropdown-wide.is-tabbed .dropdown-section.is-active .dropdown-item:nth-child(8)  { animation-delay: 0.165s; }
  .dropdown-wide.is-tabbed .dropdown-section.is-active .dropdown-item:nth-child(9)  { animation-delay: 0.18s; }
  .dropdown-wide.is-tabbed .dropdown-section.is-active .dropdown-item:nth-child(10) { animation-delay: 0.195s; }
  .dropdown-wide.is-tabbed .dropdown-section.is-active .dropdown-item:nth-child(11) { animation-delay: 0.21s; }
  .dropdown-wide.is-tabbed .dropdown-section.is-active .dropdown-item:nth-child(12) { animation-delay: 0.22s; }
  .dropdown-wide.is-tabbed .dropdown-section.is-active .dropdown-item:nth-child(n+13) { animation-delay: 0.23s; }

  .dropdown-wide.is-tabbed .dropdown-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 0.7rem;
    padding-bottom: 0.45rem;
    color: var(--text);
    opacity: 0.78;
    border-bottom: 1px solid var(--border);
  }

  /* Active section's grid uses auto-fill columns for clean wide layout */
  .dropdown-wide.is-tabbed .dropdown-section.is-active .dropdown-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)); /* max 5 columns — wider cells, readable text */
    grid-auto-flow: row;
    column-gap: 1rem;
    row-gap: 0.18rem;
    max-height: calc(100vh - 200px); /* fills toward bottom, leaving a small gap */
    overflow-y: auto;
    padding-right: 0.4rem;
    /* THIN vertical scrollbar — matches tabs sidebar style */
    scrollbar-width: thin;
    scrollbar-color: rgba(59, 130, 246, 0.5) transparent;
  }
  .dropdown-wide.is-tabbed .dropdown-section.is-active .dropdown-grid::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }
  .dropdown-wide.is-tabbed .dropdown-section.is-active .dropdown-grid::-webkit-scrollbar-track {
    background: transparent;
  }
  .dropdown-wide.is-tabbed .dropdown-section.is-active .dropdown-grid::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.5);
    border-radius: 2px;
    border: none;
  }
  .dropdown-wide.is-tabbed .dropdown-section.is-active .dropdown-grid::-webkit-scrollbar-thumb:hover {
    background: rgba(59, 130, 246, 0.75);
  }

  .dropdown-wide.is-tabbed .dropdown-item {
    font-size: 0.73rem !important;
    padding: 0.42rem 0.55rem !important;
    line-height: 1.35;
    border-radius: 4px;
  }

  /* Tabs sidebar on the LEFT */
  .dropdown-wide.is-tabbed .dropdown-tabs {
    grid-column: 1;
    grid-row: 2;
    align-self: stretch;             /* fill the row height down to the bottom */
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.04);
    padding: 0.5rem 0;
    max-height: calc(100vh - 110px); /* stretches with content instead of a fixed cap */
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(59, 130, 246, 0.5) transparent;
  }

  body:not(.light) .dropdown-wide.is-tabbed .dropdown-tabs {
    background: rgba(255, 255, 255, 0.03);
  }

  /* Quiet section label so the column clearly reads as a category nav */
  .dropdown-wide.is-tabbed .dropdown-tabs::before {
    content: "Categories";
    display: block;
    flex: none;
    padding: 0.3rem 1.1rem 0.65rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text);
    opacity: 0.4;
  }

  /* Premium vertical tabs — clean inset pills, no busy lines/borders */
  .dropdown-tab {
    position: relative;
    text-align: left;
    background: none;
    border: none;
    color: var(--text);
    opacity: 0.85;                                /* inactive sits back, but stays legible */
    margin: 1px 0.5rem;
    padding: 0.6rem 0.9rem;
    gap: 0.55rem;                                 /* keeps text clear of the chevron */
    font-size: 0.95rem;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.3;
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease, box-shadow 0.2s ease;
    width: auto;
    display: flex;
    align-items: center;
  }

  /* Label takes the remaining space and WRAPS — keeps the chevron inside the pill */
  .dropdown-tab__label {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Chevron is an in-flow flex item after the label — never overlaps or overflows */
  .dropdown-tab::after {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }

  .dropdown-tab:hover {
    background: rgba(0, 0, 0, 0.05);
    opacity: 1;
  }
  .dropdown-tab:hover::after { opacity: 0.45; transform: translateX(3px) rotate(45deg); }
  body:not(.light) .dropdown-tab:hover { background: rgba(255, 255, 255, 0.07); }

  /* Active = brand-tinted rounded pill + bold + inset left accent bar */
  .dropdown-tab.is-active {
    background: rgba(59, 130, 246, 0.14);
    color: #3b82f6;
    opacity: 1;
    font-weight: 700;
    box-shadow: inset 3px 0 0 #3b82f6;
  }
  .dropdown-tab.is-active::after { opacity: 1; }
  /* tactile press feedback on click */
  .dropdown-tab:active { transform: scale(0.985); }

  /* Respect reduced-motion: no reveal/cascade animations */
  @media (prefers-reduced-motion: reduce) {
    .dropdown-wide.is-tabbed .dropdown-section.is-active,
    .dropdown-wide.is-tabbed .dropdown-section.is-active .dropdown-section-title,
    .dropdown-wide.is-tabbed .dropdown-section.is-active .dropdown-item,
    .dropdown-tab.is-active {
      animation: none !important;
    }
    .dropdown-tab:active { transform: none; }
  }

  .dropdown-tabs::-webkit-scrollbar { width: 5px; }
  .dropdown-tabs::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.6);
    border-radius: 3px;
  }
}

/* Mobile: tabs are hidden, all sections show as before */
@media (max-width: 1279px) {
  .dropdown-wide.is-tabbed .dropdown-tabs {
    display: none !important;
  }
  .dropdown-wide.is-tabbed .dropdown-section {
    display: block !important;
  }

  /* Mobile light mode — header is blue, so toggle + contact need white treatment */
  body.light .theme-toggle {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
  }
  body.light .theme-toggle:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
  }
  body.light .contact-btn,
  body.light .btn-primary.contact-btn,
  body.light .nav-actions .contact-btn,
  body.light a.contact-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }
  body.light .contact-btn:hover,
  body.light .btn-primary.contact-btn:hover,
  body.light .nav-actions .contact-btn:hover,
  body.light a.contact-btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
  }
}

.dropdown-section-title {
  font-weight: 700; /* Thickness of text (400=normal, 700=bold) */
  font-size: 0.95rem; /* Size of text */
  color: var(--text); /* Text/foreground color */
  margin: 0 0 0.6rem; /* External spacing outside element */
  transition: color 0.3s ease, transform 0.3s ease; /* Animation duration and easing */
}

.dropdown-section-title.strong {
  font-weight: 700; /* Thickness of text (400=normal, 700=bold) */
  color: var(--text); /* Text/foreground color */
}

.dropdown-group-title {
  font-weight: 700; /* Thickness of text (400=normal, 700=bold) */
  font-size: 0.75rem; /* Size of text */
  letter-spacing: 0.14em; /* Space between characters */
  text-transform: uppercase; /* Text transformation (uppercase, lowercase) */
  color: var(--text); /* Text/foreground color */
  margin: 0 0 0.35rem; /* External spacing outside element */
}

.dropdown-wide:not(.no-tabs) .dropdown-section-title {
  font-size: 0.8rem; /* Size of text */
  margin-bottom: 0.75rem; /* Sets the margin-bottom property */
  padding-bottom: 0.2rem; /* Internal spacing inside element */
  border-bottom: 2px solid #60a5fa; /* Bottom border */
  display: block; /* Element display type */
  width: 25%; /* Element width size */
}
/* no-tabs dropdowns: never show the category title or its blue underline (all viewports) */
.dropdown-wide.no-tabs .dropdown-section-title,
.dropdown-wide.no-tabs h4 {
  display: none !important;
  border: 0 !important;
}

.dropdown-wide .dropdown-section:hover .dropdown-section-title {
  transform: translateX(4px); /* CSS 2D/3D transformation (rotate, scale, translate) */
}

.nav-item.has-dropdown.active .dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  transition-delay: 0s; /* open on click only (hover-open removed 2026-07-27) */
}

/* Force-hide a dropdown when JS marks it (overrides hover/active) — instant, no transition */
.dropdown.cc-suppress {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: none !important;
}

/* Disable wide hover-bridge on desktop — was extending over adjacent nav items
   causing previously-clicked dropdown to re-trigger on cursor exit. Nav-item's
   own padding-bottom already provides smooth hover continuity. */
@media (min-width: 1280px) {
  .dropdown::before {
    display: none;
  }
}

/* Desktop-only smooth slide-up animation */
@media (min-width: 1280px) {
  .nav-item.has-dropdown.active .dropdown,
  .nav-item.has-dropdown.hover-active .dropdown {
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
    transition-delay: 0s; /* open immediately, no delay */
  }

  /* Chevron SVG (angle/V style) — same as mobile sidebar, white stroke */
  .nav-item.has-dropdown > a::after {
    content: "";
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 2px;
    display: inline-block;
    flex-shrink: 0;
    transition: transform 0.25s ease;
    transform: rotate(0deg);
    top: 0;
    color: transparent;
    font-size: 0;
    line-height: 0;
  }
  .nav-item.has-dropdown.active > a::after {
    transform: rotate(180deg); /* flip up — dropdown is open (click toggles .active) */
    top: 0;
  }

  /* Theme toggle — white-tinted border/bg on blue header */
  .theme-toggle {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
  }
  .theme-toggle:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.3);
  }
  body.light .theme-toggle {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  /* Contact button — white-on-blue header (matches theme-toggle in light mode) */
  .contact-btn,
  .btn-primary.contact-btn,
  .nav-actions .contact-btn,
  a.contact-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }
  .contact-btn:hover,
  .btn-primary.contact-btn:hover,
  .nav-actions .contact-btn:hover,
  a.contact-btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-1px);
  }

  /* Empty space inside nav containers should show default arrow cursor.
     Only links/buttons (which already have cursor: pointer) should show the hand. */
  .site-header,
  .site-nav,
  .nav-links,
  .nav-actions {
    cursor: default;
  }

  /* Moon/sun spans were 180px × 180px — way bigger than the 38px toggle,
     extending click area ~70px in all directions. Constrain to fit inside toggle. */
  .theme-toggle {
    overflow: hidden;
  }
  .theme-toggle .moon,
  .theme-toggle .sun {
    width: 18px;
    height: 18px;
  }
}

/* === GLOBAL: collapse ALL dropdown headers AND footers to thin 3px blue accent strips === */
/* Hides the "All Services — Every Capability" header text + "View All Services" footer link */
.dropdown .dropdown-header,
.dropdown-wide .dropdown-header {
  height: 3px !important;
  min-height: 3px !important;
  max-height: 3px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #005EB8 !important;
  border: none !important;
  border-bottom: none !important;
  border-radius: 14px 14px 0 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
}
.dropdown .dropdown-footer,
.dropdown-wide .dropdown-footer {
  height: 1px !important;            /* hairline — matches side borders */
  min-height: 1px !important;
  max-height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #005EB8 !important;
  border: none !important;
  border-top: none !important;
  border-radius: 0 0 14px 14px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  text-align: left !important;
}
.dropdown .dropdown-header > *,
.dropdown-wide .dropdown-header > *,
.dropdown .dropdown-header span,
.dropdown-wide .dropdown-header span,
.dropdown .dropdown-footer > *,
.dropdown-wide .dropdown-footer > *,
.dropdown .dropdown-footer .link,
.dropdown-wide .dropdown-footer .link {
  display: none !important;
}

.dropdown-grid {
  display: grid; /* Layout type (flex, grid, block, inline, etc) */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Define grid column sizes */
  gap: 0.2rem; /* Space between flex or grid items */
}

.dropdown-wide .dropdown-grid {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  flex-direction: column; /* Direction of flex items (row, column) */
  gap: 0.2rem; /* Space between flex or grid items */
}

/* Flat Industries dropdown — multi-column grid (overrides the single-column flex above) */
.dropdown-wide .dropdown-grid.dropdown-grid--industries {
  flex: 1 1 100%;
  width: 100%;
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  column-gap: 1rem;
  row-gap: 0.15rem;
  padding: 0.2rem 1.6rem 0.4rem; /* breathing room from the left/right edges */
}

.dropdown.dropdown-wide.marketing-dropdown .dropdown-grid {
  display: grid; /* Layout type (flex, grid, block, inline, etc) */
  grid-auto-flow: column; /* Sets the grid-auto-flow property */
  grid-template-rows: repeat(8, auto); /* Define grid row sizes */
  column-gap: 1rem; /* Sets the column-gap property */
  row-gap: 0.35rem; /* Sets the row-gap property */
}

.dropdown-item {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  align-items: center; /* Vertical alignment in flex container */
  gap: 0.8rem; /* Space between flex or grid items */
  padding: 0.8rem 0.4em; /* Internal spacing inside element */
  border-radius: 5px; /* Rounded corners of element */
  border: 1px solid transparent; /* Border around element */
  color: var(--text); /* Text/foreground color */
  font-size: 0.92rem; /* Size of text */
  transition: all 0.2s ease; /* Animation duration and easing */
}

.dropdown-wide .dropdown-item {
  padding: 0.1rem 0.1rem; /* Internal spacing inside element */
  gap: 0.2rem; /* Space between flex or grid items */
  font-size: 0.7rem; /* Size of text */
}

.dropdown-item:hover {
  border-color: rgba(155, 124, 255, 0.4); /* Sets the border-color property */
  background: rgba(155, 124, 255, 0.1); /* Background color or image */
}

.dropdown-wide .dropdown-item:hover {
  background: rgba(155, 124, 255, 0.15); /* Background color or image */
  transform: translateX(3px); /* CSS 2D/3D transformation (rotate, scale, translate) */
}

.dropdown-item img {
  width: 22px; /* Element width size */
  height: 22px; /* Element height size */
}

.dropdown-item span {
  display: block; /* Layout type (flex, grid, block, inline, etc) */
  white-space: nowrap; /* How whitespace is handled in text */
  overflow: hidden; /* What happens to content that overflows */
  text-overflow: ellipsis; /* How text overflow is displayed (ellipsis) */
  max-width: 100%; /* Maximum width constraint */
}

/* ─── Services mega-menu (tabbed): let item labels WRAP instead of being
   cut with an ellipsis. At 100% zoom the 190px columns were truncating
   longer labels ("Application Security Consulting…"); allow wrapping so the
   full text shows the way it does at 80% zoom. ──────────────────────── */
.dropdown-wide.is-tabbed .dropdown-item {
  align-items: center !important;     /* 1-line labels: icon auto-centers; 2-line: stays balanced */
  font-size: 0.73rem !important;      /* readable — paired with the 5-column grid */
  padding: 0.42rem 0.55rem !important;
}
.dropdown-wide.is-tabbed .dropdown-item img {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.dropdown-wide.is-tabbed .dropdown-item span {
  white-space: normal !important;   /* allow wrapping */
  overflow: visible !important;      /* no clipping */
  text-overflow: clip !important;    /* no ellipsis */
  overflow-wrap: anywhere;           /* break very long single words */
  line-height: 1.3;
}

/* ─── NO-TABS dropdowns (Technology, Hire Developers, Pricing, Company):
   no category sidebar, no section titles — EVERY sub-page flows into ONE
   continuous 6-column grid so the items line up cleanly (like the active
   Services tab), not staggered per-section. Achieved with display:contents
   on the sections + grids so all items become children of one grid.
   JS skips these (class "no-tabs"), so .is-tabbed never gets added. ─── */
@media (min-width: 1280px) {
  .dropdown-wide.no-tabs {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important; /* max 5 columns */
    column-gap: 0.8rem;
    row-gap: 0.1rem;
    align-content: start;
    padding: 1rem 1.4rem 1.2rem !important;
    max-height: 78vh;
    overflow-y: auto;
  }
  /* header spans the full width above the grid */
  .dropdown-wide.no-tabs .dropdown-header {
    grid-column: 1 / -1;
    margin-bottom: 0.6rem;
  }
  /* dissolve section + grid wrappers so all items share ONE grid */
  .dropdown-wide.no-tabs .dropdown-section,
  .dropdown-wide.no-tabs .dropdown-grid {
    display: contents !important;
  }
  /* kill section titles AND any blue underline they carry, no matter the
     source selector's specificity */
  .dropdown-wide.no-tabs .dropdown-section-title,
  .dropdown-wide.no-tabs h4 {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    border: 0 !important;
    border-bottom: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  .dropdown-wide.no-tabs .dropdown-item {
    align-items: center !important;
    font-size: 0.73rem !important;
    padding: 0.42rem 0.55rem !important;
  }
  .dropdown-wide.no-tabs .dropdown-item img {
    width: 18px; height: 18px; flex: 0 0 auto;
  }
  .dropdown-wide.no-tabs .dropdown-item span {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
    line-height: 1.3;
  }
}

.dropdown-footer {
  margin-top: 0.4rem; /* Sets the margin-top property */
  text-align: center; /* Text alignment (left, center, right) */
}

.dropdown-footer .link {
  display: inline-flex; /* Layout type (flex, grid, block, inline, etc) */
  align-items: center; /* Vertical alignment in flex container */
  gap: 0.4rem; /* Space between flex or grid items */
}

.dropdown-footer .link::after {
  content: ""; /* Sets the content property */
  width: 8px; /* Element width size */
  height: 8px; /* Element height size */
  border-top: 2px solid var(--muted); /* Top border */
  border-right: 2px solid var(--muted); /* Sets the border-right property */
  transform: translateY(2px) rotate(45deg); /* CSS 2D/3D transformation (rotate, scale, translate) */
}

/* Default nav text — only top-level (not dropdown items) */
.site-nav a {
  color: var(--muted);
  font-weight: 500;
}

/* Dropdown triggers have no href (they only open the panel) — keep the pointer cursor */
.nav-links > .nav-item.has-dropdown > a { cursor: pointer; }

.site-nav a.active,
.site-nav a:hover {
  color: var(--text);
}

/* Desktop-only premium nav styling — animated underline (white on blue bg) */
@media (min-width: 1280px) {
  .nav-links > a,
  .nav-links > .nav-item > a {
    color: rgba(255, 255, 255, 0.85); /* slightly transparent white on blue */
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0;
    position: relative;
    padding: 6px 1px;
    transition: color 0.2s ease;
    text-decoration: none;
  }

  /* underline animation removed per user request — only chevron ▿ stays as indicator */

  .nav-links > a:hover,
  .nav-links > a.active,
  .nav-links > .nav-item > a:hover,
  .nav-links > .nav-item.active > a,
  .nav-links > .nav-item.is-current > a,
  .nav-links > .nav-item:hover > a {
    color: #ffffff; /* fully white on hover / current page */
  }

  /* Light mode: same colors since header is always blue */
  body.light .nav-links > a,
  body.light .nav-links > .nav-item > a {
    color: rgba(255, 255, 255, 0.85);
  }

  body.light .nav-links > a:hover,
  body.light .nav-links > a.active,
  body.light .nav-links > .nav-item:hover > a,
  body.light .nav-links > .nav-item.active > a,
  body.light .nav-links > .nav-item.is-current > a {
    color: #ffffff;
  }
}

/* Hide mobile header actions on desktop */
.header-actions-mobile {
  display: none; /* Layout type (flex, grid, block, inline, etc) */
}

.nav-toggle {
  display: none; /* Layout type (flex, grid, block, inline, etc) */
  background: transparent; /* Background color or image */
  border: 1px solid var(--border); /* Border around element */
  color: var(--text); /* Text/foreground color */
  padding: 0.5rem 0.8rem; /* Internal spacing inside element */
  border-radius: 5px; /* Rounded corners of element */
}

.btn {
  display: inline-flex; /* Layout type (flex, grid, block, inline, etc) */
  align-items: center; /* Vertical alignment in flex container */
  justify-content: center; /* Horizontal alignment in flex container */
  padding: 0.75rem 1.4rem; /* Internal spacing inside element */
  border-radius: 5px; /* Rounded corners of element */
  border: 0px solid transparent; /* Border around element */
  font-weight: 700; /* Thickness of text (400=normal, 700=bold) */
  transition: 0.2s ease; /* Animation duration and easing */
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-2)); /* Background color or image */
  color: #fff; /* Text/foreground color */
}

.btn-primary:hover {
  transform: translateY(-1px); /* CSS 2D/3D transformation (rotate, scale, translate) */
  box-shadow: 0 8px 24px rgba(155, 124, 255, 0.25); /* Shadow effect around element */
}

.btn-ghost {
  border-color: var(--border); /* Sets the border-color property */
  color: var(--text); /* Text/foreground color */
}

.hero {
  position: relative; /* Positioning method (fixed, absolute, relative, sticky) */
  padding: 6rem 0 4rem; /* Internal spacing inside element */
  background-color: var(--bg); /* Background color fill */
  overflow: hidden; /* What happens to content that overflows */
  min-height: 70vh; /* Minimum height constraint */
}

.hero::before {
  content: ""; /* Sets the content property */
  position: absolute; /* Positioning method (fixed, absolute, relative, sticky) */
  inset: 0; /* Sets the inset property */
  background-image: url("../icons/INNERLUXES-logo.svg"); /* Sets the background-image property */
  background-repeat: no-repeat; /* Sets the background-repeat property */
  background-position: center; /* Sets the background-position property */
  background-size: min(60vw, 520px); /* Sets the background-size property */
  animation: logo-spin 8s linear infinite; /* Animation name and duration */
  transform-origin: center; /* Sets the transform-origin property */
  opacity: 0.35; /* Transparency level (0=invisible, 1=opaque) */
  z-index: 0; /* Stacking order (higher = on top) */
}

.hero.has-video::before {
  display: none; /* Layout type (flex, grid, block, inline, etc) */
}

.hero-video {
  position: absolute; /* Positioning method (fixed, absolute, relative, sticky) */
  top: 0; /* Distance from top edge */
  left: 0; /* Distance from left edge */
  width: 100%; /* Element width size */
  height: 100%; /* Element height size */
  object-fit: cover; /* How image fills container */
  z-index: 0; /* Stacking order (higher = on top) */
  pointer-events: none; /* Whether element responds to pointer events */
  filter: brightness(1.2) contrast(0.105); /* Visual filter effects */
}

#hero-canvas {
  display: block; /* Layout type (flex, grid, block, inline, etc) */
  position: absolute; /* Positioning method (fixed, absolute, relative, sticky) */
  top: 0; /* Distance from top edge */
  left: 0; /* Distance from left edge */
  width: 100%; /* Element width size */
  height: 100%; /* Element height size */
  z-index: 0; /* Stacking order (higher = on top) */
}

/* Developers hero uses the same network canvas structure */
.developers-page .page-hero #hero-canvas {
  display: block; /* Layout type (flex, grid, block, inline, etc) */
}

.hero-overlay {
  position: absolute; /* Positioning method (fixed, absolute, relative, sticky) */
  top: 0; /* Distance from top edge */
  left: 0; /* Distance from left edge */
  width: 100%; /* Element width size */
  height: 100%; /* Element height size */
  background: linear-gradient(180deg, rgba(11, 13, 18, 0.3) 0%, rgba(11, 13, 18, 0.7) 100%); /* Background color or image */
  z-index: 1; /* Stacking order (higher = on top) */
}

.hero.has-video .hero-overlay {
  background: linear-gradient(180deg, rgba(11, 13, 18, 0.03) 0%, rgba(11, 13, 18, 0.12) 100%); /* Background color or image */
}

body.light .hero-overlay {
  background: linear-gradient(180deg, rgba(246, 247, 251, 0.4) 0%, rgba(246, 247, 251, 0.85) 100%); /* Background color or image */
}

body.light .hero.has-video .hero-overlay {
  background: linear-gradient(180deg, rgba(246, 247, 251, 0.03) 0%, rgba(246, 247, 251, 0.15) 100%); /* Background color or image */
}

body.light .hero {
  background-image: none; /* Sets the background-image property */
}

body.light .hero::before {
  background-image: url("../icons/innerluxes-logo-day.svg"); /* Sets the background-image property */
}

.hero .container {
  position: relative; /* Positioning method (fixed, absolute, relative, sticky) */
  z-index: 2; /* Stacking order (higher = on top) */
}

.hero h1 {
  font-size: clamp(2.4rem, 4vw, 3.4rem); /* Size of text */
  line-height: 1.15; /* Height of text lines */
  margin: 0 0 1rem; /* External spacing outside element */
}

.lead {
  font-size: 1.1rem; /* Size of text */
  color: var(--text); /* Text/foreground color */
  max-width: 640px; /* Maximum width constraint */
}

.hero-actions {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  right: 2.6rem; /* Distance from right edge */
  margin: 2rem 0; /* External spacing outside element */
  flex-wrap: wrap; /* Whether flex items wrap to next line */
}

.hero-stats {
  display: grid; /* Layout type (flex, grid, block, inline, etc) */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); /* Define grid column sizes */
  gap: 1rem; /* Space between flex or grid items */
  margin-top: 2rem; /* Sets the margin-top property */
}

.hero-stats div {
  padding: 1rem; /* Internal spacing inside element */
  border: 1px solid var(--border); /* Border around element */
  border-radius: 5px; /* Rounded corners of element */
  background: var(--bg-alt); /* Background color or image */
}

.hero-stats strong {
  display: block; /* Layout type (flex, grid, block, inline, etc) */
  font-size: 1.4rem; /* Size of text */
}

/* ==================================================
   CIRCUIT BOARD ANIMATED BACKGROUND (Global)
================================================== */
.hero.has-circuit {
  background: #060810; /* Background color or image */
}
.hero.has-circuit::before {
  display: none; /* Layout type (flex, grid, block, inline, etc) */
}
.hero.has-circuit .container {
  position: relative; /* Positioning method (fixed, absolute, relative, sticky) */
  z-index: 5; /* Stacking order (higher = on top) */
}

.circuit-board-bg {
  position: absolute; /* Positioning method (fixed, absolute, relative, sticky) */
  inset: 0; /* Sets the inset property */
  z-index: 0; /* Stacking order (higher = on top) */
  overflow: hidden; /* What happens to content that overflows */
  pointer-events: none; /* Whether element responds to pointer events */
  transform: translateZ(0); /* CSS 2D/3D transformation (rotate, scale, translate) */
  will-change: contents; /* Sets the will-change property */
}

.circuit-grid {
  position: absolute; /* Positioning method (fixed, absolute, relative, sticky) */
  inset: 0; /* Sets the inset property */
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 60px 60px; /* Sets the background-size property */
  opacity: 0.5; /* Transparency level (0=invisible, 1=opaque) */
}

.circuit-blue-glow {
  position: absolute; /* Positioning method (fixed, absolute, relative, sticky) */
  bottom: -20%; /* Distance from bottom edge */
  left: 50%; /* Distance from left edge */
  transform: translateX(-50%); /* CSS 2D/3D transformation (rotate, scale, translate) */
  width: 120%; /* Element width size */
  height: 70%; /* Element height size */
  background: radial-gradient(ellipse at center bottom, rgba(59, 130, 246, 0.25) 0%, rgba(59, 130, 246, 0.1) 30%, rgba(99, 102, 241, 0.05) 50%, transparent 70%); /* Background color or image */
  z-index: 1; /* Stacking order (higher = on top) */
}

.circuit-svg {
  position: absolute; /* Positioning method (fixed, absolute, relative, sticky) */
  inset: 0; /* Sets the inset property */
  width: 100%; /* Element width size */
  height: 100%; /* Element height size */
  transform: translateZ(0); /* CSS 2D/3D transformation (rotate, scale, translate) */
}

.circuit-trace {
  fill: none; /* Sets the fill property */
  stroke: rgba(255, 255, 255, 0.08); /* Sets the stroke property */
  stroke-width: 1.5; /* Sets the stroke-width property */
  stroke-linecap: round; /* Sets the stroke-linecap property */
  stroke-linejoin: round; /* Sets the stroke-linejoin property */
}

.circuit-trace-glow {
  fill: none; /* Sets the fill property */
  stroke-width: 1.5; /* Sets the stroke-width property */
  stroke-linecap: round; /* Sets the stroke-linecap property */
  stroke-linejoin: round; /* Sets the stroke-linejoin property */
  stroke-dasharray: 80 400; /* Sets the stroke-dasharray property */
  filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.8)) drop-shadow(0 0 12px rgba(59, 130, 246, 0.4)); /* Visual filter effects */
  will-change: stroke-dashoffset; /* Sets the will-change property */
}

.trace-glow-1 { stroke: rgba(59, 130, 246, 0.9); animation: traceFlowFwd 8s linear infinite; } /* Sets the .trace-glow-1 { stroke property */
.trace-glow-2 { stroke: rgba(99, 102, 241, 0.9); animation: traceFlowRev 10s linear infinite; } /* Sets the .trace-glow-2 { stroke property */
.trace-glow-3 { stroke: rgba(59, 130, 246, 0.8); animation: traceFlowFwd 9s linear infinite; } /* Sets the .trace-glow-3 { stroke property */
.trace-glow-4 { stroke: rgba(139, 92, 246, 0.9); animation: traceFlowRev 11s linear infinite; } /* Sets the .trace-glow-4 { stroke property */
.trace-glow-5 { stroke: rgba(59, 130, 246, 0.85); animation: traceFlowFwd 7s linear infinite; } /* Sets the .trace-glow-5 { stroke property */
.trace-glow-6 { stroke: rgba(99, 102, 241, 0.85); animation: traceFlowRev 9.5s linear infinite; } /* Sets the .trace-glow-6 { stroke property */

/* Animation keyframes - defines animation steps */
@keyframes traceFlowFwd {
  0% { stroke-dashoffset: 480; } /* Sets the 0% { stroke-dashoffset property */
  100% { stroke-dashoffset: 0; } /* Sets the 100% { stroke-dashoffset property */
}
/* Animation keyframes - defines animation steps */
@keyframes traceFlowRev {
  0% { stroke-dashoffset: 0; } /* Sets the 0% { stroke-dashoffset property */
  100% { stroke-dashoffset: -480; } /* Sets the 100% { stroke-dashoffset property */
}

.circuit-node {
  position: absolute; /* Positioning method (fixed, absolute, relative, sticky) */
  width: 6px; /* Element width size */
  height: 6px; /* Element height size */
  background: rgba(59, 130, 246, 0.6); /* Background color or image */
  border-radius: 50%; /* Rounded corners of element */
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.5), 0 0 16px rgba(59, 130, 246, 0.2); /* Shadow effect around element */
  will-change: transform, opacity; /* Sets the will-change property */
  transform: translateZ(0); /* CSS 2D/3D transformation (rotate, scale, translate) */
}

.circuit-node::after {
  content: ''; /* Sets the content property */
  position: absolute; /* Positioning method (fixed, absolute, relative, sticky) */
  inset: -3px; /* Sets the inset property */
  border: 1px solid rgba(59, 130, 246, 0.3); /* Border around element */
  border-radius: 50%; /* Rounded corners of element */
}

.circuit-node.pulse { animation: nodePulse 4s ease-in-out infinite; } /* Sets the .circuit-node.pulse { animation property */
.circuit-node.pulse-delay-1 { animation-delay: 0.6s; } /* Sets the .circuit-node.pulse-delay-1 { animation-delay property */
.circuit-node.pulse-delay-2 { animation-delay: 1.2s; } /* Sets the .circuit-node.pulse-delay-2 { animation-delay property */
.circuit-node.pulse-delay-3 { animation-delay: 1.8s; } /* Sets the .circuit-node.pulse-delay-3 { animation-delay property */
.circuit-node.pulse-delay-4 { animation-delay: 2.4s; } /* Sets the .circuit-node.pulse-delay-4 { animation-delay property */
.circuit-node.pulse-delay-5 { animation-delay: 3s; } /* Sets the .circuit-node.pulse-delay-5 { animation-delay property */

/* Animation keyframes - defines animation steps */
@keyframes nodePulse {
  0%, 100% { opacity: 0.4; transform: scale(1) translateZ(0); } /* Sets the 0%, 100% { opacity property */
  25% { opacity: 0.7; transform: scale(1.3) translateZ(0); } /* Sets the 25% { opacity property */
  50% { opacity: 1; transform: scale(1.8) translateZ(0); box-shadow: 0 0 12px rgba(59, 130, 246, 0.8), 0 0 24px rgba(59, 130, 246, 0.4); } /* Sets the 50% { opacity property */
  75% { opacity: 0.7; transform: scale(1.3) translateZ(0); } /* Sets the 75% { opacity property */
}

.circuit-chip {
  position: absolute; /* Positioning method (fixed, absolute, relative, sticky) */
  width: 28px; /* Element width size */
  height: 28px; /* Element height size */
  border: 1.5px solid rgba(255, 255, 255, 0.08); /* Border around element */
  border-radius: 4px; /* Rounded corners of element */
  background: rgba(59, 130, 246, 0.03); /* Background color or image */
  will-change: border-color, background, box-shadow; /* Sets the will-change property */
  transform: translateZ(0); /* CSS 2D/3D transformation (rotate, scale, translate) */
}

.circuit-chip::before {
  content: ''; /* Sets the content property */
  position: absolute; /* Positioning method (fixed, absolute, relative, sticky) */
  inset: 4px; /* Sets the inset property */
  border: 1px solid rgba(59, 130, 246, 0.15); /* Border around element */
  border-radius: 2px; /* Rounded corners of element */
}

.circuit-chip.glow { animation: chipGlow 5s ease-in-out infinite; } /* Sets the .circuit-chip.glow { animation property */
.circuit-chip.glow-delay { animation-delay: 2.5s; } /* Sets the .circuit-chip.glow-delay { animation-delay property */

/* Animation keyframes - defines animation steps */
@keyframes chipGlow {
  0%, 100% { border-color: rgba(255,255,255,0.08); background: rgba(59,130,246,0.03); box-shadow: none; } /* Sets the 0%, 100% { border-color property */
  25% { border-color: rgba(59,130,246,0.15); background: rgba(59,130,246,0.05); } /* Sets the 25% { border-color property */
  50% { border-color: rgba(59,130,246,0.3); background: rgba(59,130,246,0.08); box-shadow: 0 0 20px rgba(59,130,246,0.15); } /* Sets the 50% { border-color property */
  75% { border-color: rgba(59,130,246,0.15); background: rgba(59,130,246,0.05); } /* Sets the 75% { border-color property */
}

.circuit-chevrons {
  position: absolute; /* Positioning method (fixed, absolute, relative, sticky) */
  top: 50%; /* Distance from top edge */
  left: 50%; /* Distance from left edge */
  transform: translate(-50%, -55%) translateZ(0); /* CSS 2D/3D transformation (rotate, scale, translate) */
  z-index: 1; /* Stacking order (higher = on top) */
  will-change: transform; /* Sets the will-change property */
}

.chevron-line {
  fill: none; /* Sets the fill property */
  stroke: rgba(255, 255, 255, 0.06); /* Sets the stroke property */
  stroke-width: 2; /* Sets the stroke-width property */
  stroke-linecap: round; /* Sets the stroke-linecap property */
  stroke-linejoin: round; /* Sets the stroke-linejoin property */
}

.chevron-glow {
  fill: none; /* Sets the fill property */
  stroke-width: 2; /* Sets the stroke-width property */
  stroke-linecap: round; /* Sets the stroke-linecap property */
  stroke-linejoin: round; /* Sets the stroke-linejoin property */
  opacity: 0; /* Transparency level (0=invisible, 1=opaque) */
}

.chevron-glow-1 { stroke: rgba(255,255,255,0.15); animation: chevronPulse 5s ease-in-out infinite; } /* Sets the .chevron-glow-1 { stroke property */
.chevron-glow-2 { stroke: rgba(255,255,255,0.12); animation: chevronPulse 5s ease-in-out infinite 0.5s; } /* Sets the .chevron-glow-2 { stroke property */
.chevron-glow-3 { stroke: rgba(255,255,255,0.09); animation: chevronPulse 5s ease-in-out infinite 1s; } /* Sets the .chevron-glow-3 { stroke property */
.chevron-glow-4 { stroke: rgba(255,255,255,0.07); animation: chevronPulse 5s ease-in-out infinite 1.5s; } /* Sets the .chevron-glow-4 { stroke property */
.chevron-glow-5 { stroke: rgba(255,255,255,0.05); animation: chevronPulse 5s ease-in-out infinite 2s; } /* Sets the .chevron-glow-5 { stroke property */

/* Animation keyframes - defines animation steps */
@keyframes chevronPulse {
  0%, 100% { opacity: 0; } /* Sets the 0%, 100% { opacity property */
  15% { opacity: 0.3; } /* Sets the 15% { opacity property */
  35% { opacity: 1; } /* Sets the 35% { opacity property */
  65% { opacity: 1; } /* Sets the 65% { opacity property */
  85% { opacity: 0.3; } /* Sets the 85% { opacity property */
}

.circuit-particle {
  position: absolute; /* Positioning method (fixed, absolute, relative, sticky) */
  width: 2px; /* Element width size */
  height: 2px; /* Element height size */
  background: rgba(59, 130, 246, 0.6); /* Background color or image */
  border-radius: 50%; /* Rounded corners of element */
  box-shadow: 0 0 4px rgba(59, 130, 246, 0.4); /* Shadow effect around element */
  animation: particleFloat 8s ease-in-out infinite; /* Animation name and duration */
  will-change: transform, opacity; /* Sets the will-change property */
  transform: translateZ(0); /* CSS 2D/3D transformation (rotate, scale, translate) */
}

.circuit-particle:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; animation-duration: 7s; } /* Sets the .circuit-particle property */
.circuit-particle:nth-child(2) { top: 40%; left: 85%; animation-delay: 1s; animation-duration: 9s; } /* Sets the .circuit-particle property */
.circuit-particle:nth-child(3) { top: 70%; left: 30%; animation-delay: 2s; animation-duration: 6s; } /* Sets the .circuit-particle property */
.circuit-particle:nth-child(4) { top: 15%; left: 60%; animation-delay: 3s; animation-duration: 8s; } /* Sets the .circuit-particle property */
.circuit-particle:nth-child(5) { top: 80%; left: 70%; animation-delay: 0.5s; animation-duration: 10s; } /* Sets the .circuit-particle property */
.circuit-particle:nth-child(6) { top: 55%; left: 5%; animation-delay: 1.5s; animation-duration: 7.5s; } /* Sets the .circuit-particle property */
.circuit-particle:nth-child(7) { top: 30%; left: 95%; animation-delay: 2.5s; animation-duration: 6.5s; } /* Sets the .circuit-particle property */
.circuit-particle:nth-child(8) { top: 65%; left: 50%; animation-delay: 4s; animation-duration: 8.5s; } /* Sets the .circuit-particle property */

/* Animation keyframes - defines animation steps */
@keyframes particleFloat {
  0% { opacity: 0; transform: translateY(0) scale(1) translateZ(0); } /* Sets the 0% { opacity property */
  15% { opacity: 0.8; transform: translateY(-8px) scale(1.3) translateZ(0); } /* Sets the 15% { opacity property */
  35% { opacity: 1; transform: translateY(-18px) scale(1.5) translateZ(0); } /* Sets the 35% { opacity property */
  50% { opacity: 0.7; transform: translateY(-28px) scale(1.2) translateZ(0); } /* Sets the 50% { opacity property */
  65% { opacity: 0.9; transform: translateY(-18px) scale(1.4) translateZ(0); } /* Sets the 65% { opacity property */
  85% { opacity: 0.5; transform: translateY(-8px) scale(1.1) translateZ(0); } /* Sets the 85% { opacity property */
  100% { opacity: 0; transform: translateY(0) scale(1) translateZ(0); } /* Sets the 100% { opacity property */
}

.circuit-scanline {
  position: absolute; /* Positioning method (fixed, absolute, relative, sticky) */
  left: 0; /* Distance from left edge */
  top: 0; /* Distance from top edge */
  width: 100%; /* Element width size */
  height: 2px; /* Element height size */
  background: linear-gradient(90deg, transparent 0%, rgba(59, 130, 246, 0.12) 15%, rgba(59, 130, 246, 0.25) 50%, rgba(59, 130, 246, 0.12) 85%, transparent 100%); /* Background color or image */
  animation: scanDown 12s linear infinite; /* Animation name and duration */
  z-index: 2; /* Stacking order (higher = on top) */
  will-change: transform, opacity; /* Sets the will-change property */
  transform: translateY(-5%) translateZ(0); /* CSS 2D/3D transformation (rotate, scale, translate) */
}

/* Animation keyframes - defines animation steps */
@keyframes scanDown {
  0% { transform: translateY(-5%) translateZ(0); opacity: 0; } /* Sets the 0% { transform property */
  3% { opacity: 0.8; } /* Sets the 3% { opacity property */
  50% { opacity: 1; } /* Sets the 50% { opacity property */
  97% { opacity: 0.8; } /* Sets the 97% { opacity property */
  100% { transform: translateY(105%) translateZ(0); opacity: 0; } /* Sets the 100% { transform property */
}

.circuit-corner {
  position: absolute; /* Positioning method (fixed, absolute, relative, sticky) */
  width: 80px; /* Element width size */
  height: 80px; /* Element height size */
}
.circuit-corner svg { width: 100%; height: 100%; } /* Sets the .circuit-corner svg { width property */
.circuit-corner-tl { top: 20px; left: 20px; } /* Sets the .circuit-corner-tl { top property */
.circuit-corner-tr { top: 20px; right: 20px; transform: scaleX(-1); } /* Sets the .circuit-corner-tr { top property */
.circuit-corner-bl { bottom: 20px; left: 20px; transform: scaleY(-1); } /* Sets the .circuit-corner-bl { bottom property */
.circuit-corner-br { bottom: 20px; right: 20px; transform: scale(-1, -1); } /* Sets the .circuit-corner-br { bottom property */

.corner-line {
  fill: none; /* Sets the fill property */
  stroke: rgba(255, 255, 255, 0.06); /* Sets the stroke property */
  stroke-width: 1.5; /* Sets the stroke-width property */
  stroke-linecap: round; /* Sets the stroke-linecap property */
}

/* Circuit board hero text overrides for visibility */
.hero.has-circuit h1 { color: #ffffff; } /* Sets the .hero.has-circuit h1 { color property */
.hero.has-circuit .eyebrow { color: #9b7cff; } /* Sets the .hero.has-circuit .eyebrow { color property */
.hero.has-circuit .lead { color: #c0c7de; } /* Sets the .hero.has-circuit .lead { color property */
.hero.has-circuit .btn-ghost {
  border: 1.5px solid rgba(255, 255, 255, 0.25); /* Border around element */
  color: #ffffff; /* Text/foreground color */
  background: rgba(255, 255, 255, 0.05); /* Background color or image */
}
.hero.has-circuit .btn-ghost:hover {
  border-color: rgba(155, 124, 255, 0.5); /* Sets the border-color property */
  color: #ffffff; /* Text/foreground color */
  background: rgba(155, 124, 255, 0.1); /* Background color or image */
}

/* Light theme: force dark background for circuit hero */
body.light .hero.has-circuit {
  background: #060810; /* Background color or image */
}
body.light .hero.has-circuit h1 { color: #ffffff; } /* Sets the body.light .hero.has-circuit h1 { color property */
body.light .hero.has-circuit .eyebrow { color: #9b7cff; } /* Sets the body.light .hero.has-circuit .eyebrow { color property */
body.light .hero.has-circuit .lead { color: #c0c7de; } /* Sets the body.light .hero.has-circuit .lead { color property */
body.light .hero.has-circuit .btn-ghost {
  border: 1.5px solid rgba(255, 255, 255, 0.25); /* Border around element */
  color: #ffffff; /* Text/foreground color */
  background: rgba(255, 255, 255, 0.05); /* Background color or image */
}

/* Circuit responsive */
/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 768px) {
  .circuit-chevrons { transform: translate(-50%, -55%) scale(0.8) translateZ(0); } /* Sets the .circuit-chevrons { transform property */
  .circuit-corner { display: none; } /* Sets the .circuit-corner { display property */
}
/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 768px) {
  .hero.has-circuit {
    min-height: auto; /* Minimum height constraint */
    padding: 5rem 0 3rem; /* Internal spacing inside element */
  }
  .circuit-chevrons { transform: translate(-50%, -55%) scale(0.5) translateZ(0); } /* Sets the .circuit-chevrons { transform property */
  .circuit-chip { display: none; } /* Sets the .circuit-chip { display property */
  .circuit-corner { display: none; } /* Sets the .circuit-corner { display property */
  .circuit-grid { opacity: 0.3; } /* Sets the .circuit-grid { opacity property */
  .circuit-blue-glow { height: 80%; opacity: 0.8; } /* Sets the .circuit-blue-glow { height property */
  .circuit-scanline { display: none; } /* Sets the .circuit-scanline { display property */
  .circuit-node { width: 4px; height: 4px; } /* Sets the .circuit-node { width property */
  .circuit-particle:nth-child(n+5) { display: none; } /* Sets the .circuit-particle property */
}
/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 480px) {
  .hero.has-circuit {
    min-height: auto; /* Minimum height constraint */
    padding: 4.5rem 0 2.5rem; /* Internal spacing inside element */
  }
  .hero.has-circuit h1 {
    font-size: 1.65rem !important; /* Size of text */
    line-height: 1.2 !important; /* Height of text lines */
    margin-bottom: 0.75rem; /* Sets the margin-bottom property */
  }
  .hero.has-circuit .eyebrow {
    font-size: 0.75rem; /* Size of text */
    letter-spacing: 0.12em; /* Space between characters */
    margin-bottom: 0.5rem; /* Sets the margin-bottom property */
  }
  .hero.has-circuit .lead {
    font-size: 0.88rem !important; /* Size of text */
    line-height: 1.6; /* Height of text lines */
    margin-bottom: 0.5rem; /* Sets the margin-bottom property */
  }
  .hero.has-circuit .hero-actions {
    flex-direction: column !important; /* Direction of flex items (row, column) */
    gap: 0.6rem !important; /* Space between flex or grid items */
    margin: 1.25rem 0 0; /* External spacing outside element */
  }
  .hero.has-circuit .hero-actions .btn {
    width: 100%; /* Element width size */
    text-align: center; /* Text alignment (left, center, right) */
    padding: 0.85rem 1.5rem !important; /* Internal spacing inside element */
    font-size: 0.92rem !important; /* Size of text */
  }
  .circuit-chevrons { display: none; } /* Sets the .circuit-chevrons { display property */
  .circuit-node { width: 3px; height: 3px; } /* Sets the .circuit-node { width property */
  .circuit-node::after { display: none; } /* Sets the .circuit-node property */
  .circuit-particle:nth-child(n+4) { display: none; } /* Sets the .circuit-particle property */
  .circuit-svg { opacity: 0.5; } /* Sets the .circuit-svg { opacity property */
  .circuit-blue-glow { height: 90%; bottom: -30%; opacity: 0.6; } /* Sets the .circuit-blue-glow { height property */
}

/* ==================================================
   END CIRCUIT BOARD ANIMATED BACKGROUND
================================================== */

.section {
  padding: 4rem 0; /* Internal spacing inside element */
}

.section.alt {
  background: var(--bg-alt); /* Background color or image */
}

.section h2 {
  margin-top: 0; /* Sets the margin-top property */
  font-size: 2rem; /* Size of text */
}

.section-intro {
  color: var(--muted); /* Text/foreground color */
  max-width: 640px; /* Maximum width constraint */
}

.grid-3 {
  display: grid; /* Layout type (flex, grid, block, inline, etc) */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Define grid column sizes */
  gap: 1.5rem; /* Space between flex or grid items */
  margin-top: 2rem; /* Sets the margin-top property */
}

.services-showcase {
  padding: 4.5rem 0; /* Internal spacing inside element */
  background: var(--bg); /* Background color or image */
}

.services-showcase-header {
  text-align: center; /* Text alignment (left, center, right) */
  margin-bottom: 2.5rem; /* Sets the margin-bottom property */
}

.services-badge {
  display: inline-flex; /* Layout type (flex, grid, block, inline, etc) */
  align-items: center; /* Vertical alignment in flex container */
  justify-content: center; /* Horizontal alignment in flex container */
  padding: 0.4rem 1.1rem; /* Internal spacing inside element */
  border-radius: 999px; /* Rounded corners of element */
  border: 1px solid var(--border); /* Border around element */
  background: var(--bg-alt); /* Background color or image */
  font-weight: 600; /* Thickness of text (400=normal, 700=bold) */
  font-size: 0.85rem; /* Size of text */
  margin-bottom: 1rem; /* Sets the margin-bottom property */
  gap: 0.5rem; /* Space between flex or grid items */
}

.services-badge::before {
  content: ""; /* Sets the content property */
  width: 18px; /* Element width size */
  height: 20px; /* Element height size */
  border: 2px solid #3b82f6; /* Border around element */
  border-radius: 5px 5px 5px 5px; /* Rounded corners of element */
  background: transparent; /* Background color or image */
  clip-path: polygon(50% 0%, 88% 16%, 88% 62%, 50% 100%, 12% 62%, 12% 16%); /* Clip element to a shape */
}

.services-title {
  font-size: clamp(2rem, 4vw, 3rem); /* Size of text */
  margin: 0 0 1rem; /* External spacing outside element */
}

.services-title span {
  background: linear-gradient(90deg, #3b82f6, #8b5cf6); /* Background color or image */
  -webkit-background-clip: text; /* Sets the -webkit-background-clip property */
  background-clip: text; /* Sets the background-clip property */
  color: transparent; /* Text/foreground color */
}

.services-showcase-header .section-intro {
  margin: 0 auto; /* External spacing outside element */
}

.services-showcase-grid {
  display: grid; /* Layout type (flex, grid, block, inline, etc) */
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* Define grid column sizes */
  gap: 1.8rem; /* Space between flex or grid items */
}

.services-showcase-footer {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  justify-content: center; /* Horizontal alignment in flex container */
  margin-top: 2rem; /* Sets the margin-top property */
}

.difference-section {
  text-align: center; /* Text alignment (left, center, right) */
  --sticky-offset: 110px; /* Sets the --sticky-offset property */
  --sticky-stack-gap: 0px; /* Sets the --sticky-stack-gap property */
  --stack-top-offset: 220px; /* Sets the --stack-top-offset property */
  padding-top: 2.5rem; /* Sets the padding-top property */
}

.difference-section .section-intro {
  margin: 0 auto; /* External spacing outside element */
}

.difference-section h2 span {
  background: linear-gradient(90deg, #3b82f6, #8b5cf6); /* Background color or image */
  -webkit-background-clip: text; /* Sets the -webkit-background-clip property */
  background-clip: text; /* Sets the background-clip property */
  color: transparent; /* Text/foreground color */
}

.difference-sticky-header {
  position: sticky; /* Positioning method (fixed, absolute, relative, sticky) */
  top: var(--sticky-offset); /* Distance from top edge */
  z-index: 0; /* Stacking order (higher = on top) */
  padding: 0.0rem 0 0; /* Internal spacing inside element */
  background: var(--bg); /* Background color or image */
}

.difference-sticky-header .comparison-block {
  margin-top: 0.8rem; /* Sets the margin-top property */
  position: relative; /* Positioning method (fixed, absolute, relative, sticky) */
  top: auto; /* Distance from top edge */
  z-index: auto; /* Stacking order (higher = on top) */
}

.comparison-stack {
  position: relative; /* Positioning method (fixed, absolute, relative, sticky) */
}

.comparison-block {
  margin-top: 2rem; /* Sets the margin-top property */
  transition: opacity 0.35s ease, transform 0.35s ease; /* Animation duration and easing */
}

.comparison-block.is-covered {
  opacity: 0; /* Transparency level (0=invisible, 1=opaque) */
  transform: translateY(-16px); /* CSS 2D/3D transformation (rotate, scale, translate) */
  pointer-events: none; /* Whether element responds to pointer events */
}

.comparison-stack .comparison-block {
  position: sticky; /* Positioning method (fixed, absolute, relative, sticky) */
  top: calc(var(--sticky-offset) + var(--stack-top-offset)); /* Distance from top edge */
  z-index: calc(15 + var(--stack-index, 0)); /* Stacking order (higher = on top) */
  margin-top: 180px; /* Sets the margin-top property */
  background: var(--bg); /* Background color or image */
  box-shadow: none; /* Shadow effect around element */
}

.comparison-pill {
  display: inline-flex; /* Layout type (flex, grid, block, inline, etc) */
  align-items: center; /* Vertical alignment in flex container */
  gap: 0.5rem; /* Space between flex or grid items */
  padding: 0.45rem 1.1rem; /* Internal spacing inside element */
  border-radius: 999px; /* Rounded corners of element */
  font-weight: 700; /* Thickness of text (400=normal, 700=bold) */
  font-size: 0.85rem; /* Size of text */
  text-transform: uppercase; /* Text transformation (uppercase, lowercase) */
  letter-spacing: 0.06em; /* Space between characters */
  margin: -0.35rem 0.6rem 1.2rem; /* External spacing outside element */
}

.comparison-pill-others {
  background: rgba(245, 158, 11, 0.15); /* Background color or image */
  color: #d97706; /* Text/foreground color */
  border: 1px solid rgba(245, 158, 11, 0.35); /* Border around element */
}

.comparison-pill-entalogics {
  background: rgba(6, 182, 212, 0.15); /* Background color or image */
  color: #06b6d4; /* Text/foreground color */
  border: 1px solid rgba(6, 182, 212, 0.4); /* Border around element */
}

.comparison-cards {
  display: grid; /* Layout type (flex, grid, block, inline, etc) */
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* Define grid column sizes */
  gap: 0; /* Space between flex or grid items */
  border: 1px solid var(--border); /* Border around element */
  border-radius: 5px; /* Rounded corners of element */
  overflow: hidden; /* What happens to content that overflows */
  background: var(--bg-alt); /* Background color or image */
  box-shadow: none; /* Shadow effect around element */
}

.comparison-card {
  padding: 1.6rem 1.8rem; /* Internal spacing inside element */
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  gap: 1rem; /* Space between flex or grid items */
  align-items: center; /* Vertical alignment in flex container */
}

.comparison-card-others {
  background: rgba(245, 158, 11, 0.05); /* Background color or image */
  border-right: 1px solid var(--border); /* Sets the border-right property */
}

.comparison-card-entalogics {
  background: rgba(6, 182, 212, 0.06); /* Background color or image */
}

.comparison-icon {
  width: 44px; /* Element width size */
  height: 44px; /* Element height size */
  border-radius: 50%; /* Rounded corners of element */
  display: grid; /* Layout type (flex, grid, block, inline, etc) */
  place-items: center; /* Sets the place-items property */
  font-size: 1.1rem; /* Size of text */
  font-weight: 700; /* Thickness of text (400=normal, 700=bold) */
}

.comparison-card-others .comparison-icon {
  background: rgba(245, 158, 11, 0.15); /* Background color or image */
  color: #d97706; /* Text/foreground color */
}

.comparison-card-entalogics .comparison-icon {
  background: rgba(6, 182, 212, 0.18); /* Background color or image */
  color: #06b6d4; /* Text/foreground color */
}

.comparison-card h3 {
  margin: 0 0 0.35rem; /* External spacing outside element */
  font-size: 1.1rem; /* Size of text */
}

.comparison-card p {
  margin: 0; /* External spacing outside element */
  color: var(--muted); /* Text/foreground color */
}

/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 768px) {
  .difference-section {
    --sticky-offset: 72px; /* Sets the --sticky-offset property */
    --sticky-stack-gap: 0px; /* Sets the --sticky-stack-gap property */
    --stack-top-offset: 280px; /* Sets the --stack-top-offset property */
    padding: 1rem 1rem; /* Internal spacing inside element */
  }

  .difference-section h2 {
    font-size: 1.3rem; /* Size of text */
    margin-bottom: 0.6rem; /* Sets the margin-bottom property */
  }

  .difference-section .section-intro {
    font-size: 0.72rem; /* Size of text */
    margin-bottom: 0.5rem; /* Sets the margin-bottom property */
    line-height: 1.35; /* Height of text lines */
    padding: 0; /* Internal spacing inside element */
  }

  .difference-sticky-header {
    padding: 0.5rem 0 0.3rem; /* Internal spacing inside element */
  }

  .difference-sticky-header .comparison-block {
    margin-top: 0.5rem; /* Sets the margin-top property */
  }

  .comparison-stack .comparison-block {
    margin-top: 0.6rem; /* Sets the margin-top property */
  }

  .comparison-block {
    padding: 0; /* Internal spacing inside element */
  }

  .comparison-cards {
    grid-template-columns: 1fr; /* Define grid column sizes */
    gap: 0; /* Space between flex or grid items */
    width: 100%; /* Element width size */
    border-radius: 6px; /* Rounded corners of element */
    box-sizing: border-box; /* What width/height includes (content or border) */
    overflow: hidden; /* What happens to content that overflows */
    margin-bottom: 0rem; /* Sets the margin-bottom property */
  }

  .comparison-card {
    padding: 0.6rem 0.8rem; /* Internal spacing inside element */
    flex-direction: row; /* Direction of flex items (row, column) */
    text-align: left; /* Text alignment (left, center, right) */
    gap: 0.5rem; /* Space between flex or grid items */
    align-items: center; /* Vertical alignment in flex container */
    min-height: auto; /* Minimum height constraint */
    box-sizing: border-box; /* What width/height includes (content or border) */
  }

  .comparison-card > div {
    flex: 1; /* Flex container - flexible box layout */
    min-width: 0; /* Minimum width constraint */
  }

  .comparison-card h3 {
    font-size: 0.75rem; /* Size of text */
    margin-bottom: 0.05rem; /* Sets the margin-bottom property */
    font-weight: 600; /* Thickness of text (400=normal, 700=bold) */
  }

  .comparison-card p {
    font-size: 0.7rem; /* Size of text */
    line-height: 1.3; /* Height of text lines */
    margin: 0; /* External spacing outside element */
  }

  .comparison-icon {
    width: 26px !important; /* Element width size */
    height: 26px !important; /* Element height size */
    min-width: 26px !important; /* Minimum width constraint */
    max-width: 26px !important; /* Maximum width constraint */
    min-height: 26px !important; /* Minimum height constraint */
    max-height: 26px !important; /* Maximum height constraint */
    font-size: 0.75rem; /* Size of text */
    flex-shrink: 0; /* How much flex item shrinks */
    border-radius: 100% !important; /* Rounded corners of element */
    aspect-ratio: 1 / 1; /* Sets the aspect-ratio property */
    display: flex; /* Layout type (flex, grid, block, inline, etc) */
    align-items: center; /* Vertical alignment in flex container */
    justify-content: center; /* Horizontal alignment in flex container */
  }

  .comparison-pill {
    font-size: 0.7rem; /* Size of text */
    padding: 0.3rem 0.8rem; /* Internal spacing inside element */
    margin: 0 0.4rem 0.8rem; /* External spacing outside element */
  }

  .comparison-card-others {
    border-right: none; /* Sets the border-right property */
    border-bottom: 1px solid var(--border); /* Bottom border */
  }
  
  .difference-section .container {
    padding: 0; /* Internal spacing inside element */
    max-width: 100%; /* Maximum width constraint */
  }
}

/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 480px) {
  .comparison-cards {
    grid-template-columns: 1fr; /* Define grid column sizes */
  }
  
  .comparison-card {
    padding: 0.6rem 0.8rem; /* Internal spacing inside element */
    flex-direction: row; /* Direction of flex items (row, column) */
    text-align: left; /* Text alignment (left, center, right) */
    gap: 0.6rem; /* Space between flex or grid items */
  }

  .comparison-card h3 {
    font-size: 0.85rem; /* Size of text */
  }

  .comparison-card p {
    font-size: 0.75rem; /* Size of text */
    line-height: 1.3; /* Height of text lines */
  }

  .comparison-icon {
    width: 28px; /* Element width size */
    height: 28px; /* Element height size */
    font-size: 0.8rem; /* Size of text */
    flex-shrink: 0; /* How much flex item shrinks */
  }
  
  .comparison-card > div {
    width: 100%; /* Element width size */
  }
}

.service-showcase-card {
  background: var(--bg-alt); /* Background color or image */
  border: 1px solid var(--border); /* Border around element */
  border-radius: 5px; /* Rounded corners of element */
  padding: 1rem; /* Internal spacing inside element */
  box-shadow: 0 12px 28px rgba(15, 18, 32, 0.08); /* Shadow effect around element */
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  flex-direction: column; /* Direction of flex items (row, column) */
  gap: 0; /* Space between flex or grid items */
  min-height: 300px; /* Minimum height constraint */
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; /* Animation duration and easing */
  overflow: hidden; /* What happens to content that overflows */
  position: relative; /* Positioning method (fixed, absolute, relative, sticky) */
}

.service-showcase-card-link {
  position: absolute; /* Positioning method (fixed, absolute, relative, sticky) */
  inset: 0; /* Sets the inset property */
  z-index: 2; /* Stacking order (higher = on top) */
  cursor: pointer; /* Mouse cursor style */
}

.service-showcase-card:hover {
  transform: translateY(-4px); /* CSS 2D/3D transformation (rotate, scale, translate) */
  border-color: rgba(155, 124, 255, 0.35); /* Sets the border-color property */
  box-shadow: 0 18px 36px rgba(15, 18, 32, 0.15); /* Shadow effect around element */
}

.service-showcase-media {
  height: 190px; /* Element height size */
  margin: -1.6rem -1.6rem 0; /* External spacing outside element */
  border-radius: 5px 5px 0 0; /* Rounded corners of element */
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  align-items: center; /* Vertical alignment in flex container */
  justify-content: center; /* Horizontal alignment in flex container */
  overflow: hidden; /* What happens to content that overflows */
}

.service-showcase-media img {
  width: 100%; /* Element width size */
  height: 100%; /* Element height size */
  object-fit: cover; /* How image fills container */
  display: block; /* Layout type (flex, grid, block, inline, etc) */
}

.service-showcase-divider {
  display: block; /* Layout type (flex, grid, block, inline, etc) */
  height: 1px; /* Element height size */
  background: var(--border); /* Background color or image */
  margin: 0 -1.6rem 0.9rem; /* External spacing outside element */
}

.service-showcase-media + .service-showcase-divider {
  margin-top: 0; /* Sets the margin-top property */
}

.service-showcase-card h3 {
  margin: 0 0 0.6rem; /* External spacing outside element */
}

.service-showcase-card p {
  margin: 0 0 1rem; /* External spacing outside element */
}

.service-showcase-card h3 {
  margin: 0; /* External spacing outside element */
  font-size: 1.2rem; /* Size of text */
}

.service-showcase-card p {
  margin: 0; /* External spacing outside element */
  color: var(--muted); /* Text/foreground color */
}

.service-showcase-link {
  margin-top: auto; /* Sets the margin-top property */
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  align-items: center; /* Vertical alignment in flex container */
  justify-content: space-between; /* Horizontal alignment in flex container */
  font-weight: 600; /* Thickness of text (400=normal, 700=bold) */
  color: var(--text); /* Text/foreground color */
  position: relative; /* Positioning method (fixed, absolute, relative, sticky) */
  padding-top: 0.6rem; /* Sets the padding-top property */
}

.service-showcase-link img {
  width: 28px; /* Element width size */
  height: 28px; /* Element height size */
}

.service-showcase-link span {
  position: relative; /* Positioning method (fixed, absolute, relative, sticky) */
}

.service-showcase-link span::after {
  content: ""; /* Sets the content property */
  position: absolute; /* Positioning method (fixed, absolute, relative, sticky) */
  left: 0; /* Distance from left edge */
  bottom: -4px; /* Distance from bottom edge */
  width: 0; /* Element width size */
  height: 2px; /* Element height size */
  background: currentColor; /* Background color or image */
  transition: width 0.2s ease; /* Animation duration and easing */
}

.service-showcase-card:hover .service-showcase-link span::after {
  width: 100%; /* Element width size */
}

/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 1024px) {
  .services-showcase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Define grid column sizes */
  }
}

/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 640px) {
  .services-showcase-grid {
    grid-template-columns: 1fr; /* Define grid column sizes */
  }
}

.grid-2 {
  display: grid; /* Layout type (flex, grid, block, inline, etc) */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* Define grid column sizes */
  gap: 2rem; /* Space between flex or grid items */
}

.card {
  padding: 1.5rem; /* Internal spacing inside element */
  background: var(--card); /* Background color or image */
  border: 1px solid var(--border); /* Border around element */
  border-radius: 5px; /* Rounded corners of element */
}

.card.highlight {
  border-color: rgba(155, 124, 255, 0.6); /* Sets the border-color property */
  background: linear-gradient(180deg, rgba(155, 124, 255, 0.15), rgba(22, 27, 41, 0.95)); /* Background color or image */
}

.eyebrow {
  text-transform: uppercase; /* Text transformation (uppercase, lowercase) */
  font-size: 0.9rem; /* Size of text */
  letter-spacing: 0.15em; /* Space between characters */
  color: var(--text); /* Text/foreground color */
  margin-bottom: 0.75rem; /* Sets the margin-bottom property */
}

.checklist {
  list-style: none; /* Sets the list-style property */
  padding: 0; /* Internal spacing inside element */
  margin: 0; /* External spacing outside element */
}

.checklist li {
  padding-left: 1.5rem; /* Sets the padding-left property */
  position: relative; /* Positioning method (fixed, absolute, relative, sticky) */
  margin-bottom: 0.8rem; /* Sets the margin-bottom property */
}

.checklist li::before {
  content: "\2713 "; /* Sets the content property */
  position: absolute; /* Positioning method (fixed, absolute, relative, sticky) */
  left: 0; /* Distance from left edge */
  color: var(--primary); /* Text/foreground color */
}

.timeline {
  display: grid; /* Layout type (flex, grid, block, inline, etc) */
  grid-template-columns: 1fr 2fr; /* Define grid column sizes */
  gap: 0.8rem 1rem; /* Space between flex or grid items */
  margin-top: 1.2rem; /* Sets the margin-top property */
  color: var(--muted); /* Text/foreground color */
}

.page-hero {
  padding: 4rem 0 2rem; /* Internal spacing inside element */
  background: var(--bg-alt); /* Background color or image */
}

.page-hero h1 {
  margin: 0 0 1rem; /* External spacing outside element */
}

.link {
  display: inline-flex; /* Layout type (flex, grid, block, inline, etc) */
  margin-top: 1rem; /* Sets the margin-top property */
  color: var(--primary); /* Text/foreground color */
  font-weight: 600; /* Thickness of text (400=normal, 700=bold) */
}

form label {
  display: block; /* Layout type (flex, grid, block, inline, etc) */
  margin-bottom: 1rem; /* Sets the margin-bottom property */
  color: var(--muted); /* Text/foreground color */
}

form input,
form textarea {
  width: 100%; /* Element width size */
  margin-top: 0.4rem; /* Sets the margin-top property */
  background: transparent; /* Background color or image */
  border: 1px solid var(--border); /* Border around element */
  border-radius: 5px; /* Rounded corners of element */
  padding: 0.75rem 0.9rem; /* Internal spacing inside element */
  color: var(--text); /* Text/foreground color */
  font-size: 1rem; /* Size of text */
}

.site-footer {
  padding: 3rem 0 2rem; /* Internal spacing inside element */
  border-top: 1px solid var(--border); /* Top border */
  background: #0a0c11 url("../images/footer-night.svg") center bottom/cover no-repeat; /* Background color or image */
  position: relative; /* Positioning method (fixed, absolute, relative, sticky) */
}


body.light .site-footer {
  background: #ffffff url("../images/footer-day.svg") center bottom/cover no-repeat; /* Background color or image */
  box-shadow: 0 -8px 24px rgba(15, 18, 32, 0.06); /* Shadow effect around element */
}

.footer-grid {
  display: grid; /* Layout type (flex, grid, block, inline, etc) */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Define grid column sizes */
  gap: 1.5rem; /* Space between flex or grid items */
}

.footer-brand .logo {
  display: inline-flex; /* Layout type (flex, grid, block, inline, etc) */
  align-items: center; /* Vertical alignment in flex container */
  gap: 0.5rem; /* Space between flex or grid items */
  margin-bottom: 0.75rem; /* Sets the margin-bottom property */
}

.footer-brand .logo-icon {
  width: 36px; /* Element width size */
  height: 36px; /* Element height size */
}

.footer-brand p {
  color: var(--muted); /* Text/foreground color */
  font-size: 0.92rem; /* Size of text */
  line-height: 1.6; /* Height of text lines */
  max-width: 320px; /* Maximum width constraint */
  margin: 0; /* External spacing outside element */
}

body.light .footer-brand p {
  color: #5a6785; /* Text/foreground color */
}

.site-footer a {
  display: block; /* Layout type (flex, grid, block, inline, etc) */
  color: var(--muted); /* Text/foreground color */
  margin-bottom: 0.4rem; /* Sets the margin-bottom property */
  font-size: 0.9rem; /* Size of text */
  transition: color 0.2s ease, transform 0.2s ease; /* Animation duration and easing */
}

.site-footer a:hover {
  color: var(--primary); /* Text/foreground color */
}

.footer-grid .footer-nav a:hover {
  transform: translateY(-2px); /* CSS 2D/3D transformation (rotate, scale, translate) */
}

body.light .site-footer a {
  color: #5a6785; /* Text/foreground color */
}

body.light .site-footer a:hover {
  color: var(--primary); /* Text/foreground color */
}

.footer-bottom {
  text-align: center; /* Text alignment (left, center, right) */
  color: var(--muted); /* Text/foreground color */
  margin-top: 2rem; /* Sets the margin-top property */
}

/* Mobile Navigation Overlay Background */
.mobile-nav-overlay {
  display: none; /* Layout type (flex, grid, block, inline, etc) */
  position: fixed; /* Positioning method (fixed, absolute, relative, sticky) */
  top: 0; /* Distance from top edge */
  left: 0; /* Distance from left edge */
  width: 100%; /* Element width size */
  height: 100%; /* Element height size */
  background: rgba(0, 0, 0, 0.5); /* Background color or image */
  z-index: 998; /* Stacking order (higher = on top) */
  opacity: 0; /* Transparency level (0=invisible, 1=opaque) */
  transition: opacity 0.3s ease; /* Animation duration and easing */
}

.mobile-nav-overlay.active {
  display: block; /* Layout type (flex, grid, block, inline, etc) */
  opacity: 1; /* Transparency level (0=invisible, 1=opaque) */
}

/* Mobile Nav Header */
.mobile-nav-header {
  display: none; /* Layout type (flex, grid, block, inline, etc) */
}

/* Mobile Nav Footer */
.mobile-nav-footer {
  display: none; /* Layout type (flex, grid, block, inline, etc) */
}

/* Mobile sidebar social icons (LinkedIn, X, Instagram, Facebook, WhatsApp, GitHub) */
.mobile-nav-socials {
  display: none; /* desktop: hidden; shown only inside the mobile sidebar (<=1279px) */
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 18px 0 26px;
  margin-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.18); /* mobile nav bg is the brand blue/dark */
  flex-wrap: wrap;
}
.mobile-nav-socials a {
  color: #ffffff;
  display: inline-flex;
  transition: opacity 0.15s ease;
}
.mobile-nav-socials a:hover { opacity: 0.65; }
.mobile-nav-socials svg { width: 23px; height: 23px; display: block; }
@media (max-width: 1279px) { .mobile-nav-socials { display: flex; } }

/* Hide Contact nav item on desktop */
.nav-item-contact {
  display: none; /* Layout type (flex, grid, block, inline, etc) */
}

/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 1279px) {
  /* Show Contact nav item on mobile */
  .nav-item-contact {
    display: block; /* Layout type (flex, grid, block, inline, etc) */
  }

  /* Disable shrink effect on mobile - keep header same as normal state */
  .site-header.shrink {
    padding: 0.75rem 1rem; /* Internal spacing inside element */
    border-radius: 0; /* Rounded corners of element */
    max-width: 100%; /* Maximum width constraint */
    margin: 0; /* External spacing outside element */
    left: 0; /* Distance from left edge */
    right: 0; /* Distance from right edge */
    transform: none; /* CSS 2D/3D transformation (rotate, scale, translate) */
    top: 0; /* Distance from top edge */
    background: rgba(255, 255, 255, 0.98); /* Background color or image */
    border: none; /* Border around element */
    border-bottom: 1px solid rgba(0, 0, 0, 0.08); /* Bottom border */
  }

  body:not(.light) .site-header.shrink {
    background: rgba(17, 21, 32, 0.98); /* Background color or image */
    border-color: var(--border); /* Sets the border-color property */
  }

  .site-header.shrink .logo {
    position: static; /* Positioning method (fixed, absolute, relative, sticky) */
    transform: none; /* CSS 2D/3D transformation (rotate, scale, translate) */
  }

  .site-header.shrink .logo-icon {
    width: 36px; /* Element width size */
    height: 36px; /* Element height size */
  }

  .site-header.shrink .logo-text {
    font-size: 1.1rem; /* Size of text */
    opacity: 1; /* Transparency level (0=invisible, 1=opaque) */
  }

  .site-header.shrink .contact-btn::before {
    content: "\260E "; /* Sets the content property */
  }

  .site-header {
    padding: 0.75rem 1rem; /* Internal spacing inside element */
    background: rgba(255, 255, 255, 0.98); /* Background color or image */
    border: none; /* No border — eliminates visible seam between header and colored hero */
    border-radius: 0; /* Rounded corners of element */
    max-width: 100%; /* Maximum width constraint */
    margin: 0; /* External spacing outside element */
    left: 0; /* Distance from left edge */
    right: 0; /* Distance from right edge */
  }

  body:not(.light) .site-header {
    background: rgba(17, 21, 32, 0.98); /* Background color or image */
    border: none; /* No border — eliminates visible seam */
  }

  /* Mobile Header Actions Container */
  .header-actions-mobile {
    display: flex; /* Layout type (flex, grid, block, inline, etc) */
    align-items: center; /* Vertical alignment in flex container */
    gap: 0.5rem; /* Space between flex or grid items */
    margin-left: auto; /* Sets the margin-left property */
  }

  /* Show theme toggle in mobile header */
  .header-actions-mobile .theme-toggle {
    display: inline-flex; /* Layout type (flex, grid, block, inline, etc) */
    width: 40px; /* Element width size */
    height: 40px; /* Element height size */
    border-radius: 50%; /* Rounded corners of element */
  }

  .nav-toggle {
    display: inline-flex; /* Layout type (flex, grid, block, inline, etc) */
    z-index: 1001; /* Stacking order (higher = on top) */
    width: 40px; /* Element width size */
    height: 40px; /* Element height size */
    border-radius: 50%; /* Rounded corners of element */
    border: 1px solid rgba(0, 0, 0, 0.1); /* Border around element */
    background: transparent; /* Background color or image */
    align-items: center; /* Vertical alignment in flex container */
    justify-content: center; /* Horizontal alignment in flex container */
    font-size: 1.2rem; /* Size of text */
    cursor: pointer; /* Mouse cursor style */
    color: var(--text); /* Text/foreground color */
    -webkit-user-select: none; /* Sets the -webkit-user-select property */
    user-select: none; /* Whether text can be selected */
    -webkit-tap-highlight-color: transparent; /* Sets the -webkit-tap-highlight-color property */
    touch-action: manipulation; /* Sets the touch-action property */
  }

  body:not(.light) .nav-toggle {
    border-color: var(--border); /* Sets the border-color property */
  }

  /* Hide nav-actions theme toggle on mobile since it's in header-actions-mobile */
  .nav-actions .theme-toggle {
    display: none; /* Layout type (flex, grid, block, inline, etc) */
  }

  /* Mobile Navigation - Slide from Right */
  .site-nav,
  .site-header.shrink .site-nav {
    position: fixed; /* Positioning method (fixed, absolute, relative, sticky) */
    top: 0; /* Distance from top edge */
    right: -100%; /* Distance from right edge */
    width: 85%; /* Element width size */
    max-width: 380px; /* Maximum width constraint */
    height: 100vh; /* Element height size */
    height: 100dvh; /* Element height size */
    flex-direction: column; /* Direction of flex items (row, column) */
    background: #fff; /* Background color or image */
    padding: 0; /* Internal spacing inside element */
    border: none; /* Border around element */
    border-radius: 0; /* Rounded corners of element */
    z-index: 999; /* Stacking order (higher = on top) */
    overflow: hidden; /* What happens to content that overflows */
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1); /* Animation duration and easing */
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.12); /* Shadow effect around element */
  }

  body:not(.light) .site-nav,
  body:not(.light) .site-header.shrink .site-nav {
    background: #1a1d2e; /* Background color or image */
    border-color: var(--border); /* Sets the border-color property */
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5); /* Shadow effect around element */
  }

  .site-nav.open,
  .site-header.shrink .site-nav.open {
    right: 0; /* Distance from right edge */
    display: flex; /* Layout type (flex, grid, block, inline, etc) */
  }

  /* Mobile Nav Header */
  .mobile-nav-header {
    display: flex !important; /* Layout type (flex, grid, block, inline, etc) */
    align-items: center; /* Vertical alignment in flex container */
    justify-content: space-between; /* Horizontal alignment in flex container */
    padding: 0.85rem 1rem; /* Internal spacing inside element */
    background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%); /* Background color or image */
    border-radius: 0; /* Rounded corners of element */
    gap: 0.5rem; /* Space between flex or grid items */
    min-height: 56px; /* Minimum height constraint */
    visibility: visible !important; /* Sets the visibility property */
    opacity: 1 !important; /* Transparency level (0=invisible, 1=opaque) */
  }

  .mobile-nav-brand {
    display: flex !important; /* Layout type (flex, grid, block, inline, etc) */
    align-items: center; /* Vertical alignment in flex container */
    gap: 0.6rem; /* Space between flex or grid items */
    visibility: visible !important; /* Sets the visibility property */
    opacity: 1 !important; /* Transparency level (0=invisible, 1=opaque) */
  }

  .mobile-nav-brand .logo-icon {
    display: block !important; /* Layout type (flex, grid, block, inline, etc) */
    width: 32px !important; /* Element width size */
    height: 32px !important; /* Element height size */
    background: rgba(255, 255, 255, 0.2); /* Background color or image */
    border-radius: 50px; /* Rounded corners of element */
    padding: 5px; /* Internal spacing inside element */
    animation: none; /* Animation name and duration */
    visibility: visible !important; /* Sets the visibility property */
    opacity: 1 !important; /* Transparency level (0=invisible, 1=opaque) */
    filter: brightness(1) invert(0) !important; /* Visual filter effects */
  }

  body.light .mobile-nav-brand .logo-icon {
    filter: brightness(0.1) saturate(0%) !important; /* Visual filter effects */
  }

  .mobile-nav-brand h3 {
    margin: 0; /* External spacing outside element */
    font-size: 1rem; /* Size of text */
    font-weight: 600; /* Thickness of text (400=normal, 700=bold) */
    color: #fff; /* Text/foreground color */
    letter-spacing: 0.02em; /* Space between characters */
  }

  .mobile-nav-brand-info h3 {
    margin: 0; /* External spacing outside element */
    font-size: 0.95rem; /* Size of text */
    font-weight: 600; /* Thickness of text (400=normal, 700=bold) */
    color: #fff; /* Text/foreground color */
    letter-spacing: 0.02em; /* Space between characters */
  }

  .mobile-nav-brand-info p {
    display: none; /* Layout type (flex, grid, block, inline, etc) */
    max-width: 180px; /* Maximum width constraint */
  }

  .mobile-nav-close {
    display: flex; /* Layout type (flex, grid, block, inline, etc) */
    width: 30px; /* Element width size */
    height: 30px; /* Element height size */
    align-items: center; /* Vertical alignment in flex container */
    justify-content: center; /* Horizontal alignment in flex container */
    background: rgba(255, 255, 255, 0.2); /* Background color or image */
    border: none; /* Border around element */
    border-radius: 5px; /* Rounded corners of element */
    color: #fff; /* Text/foreground color */
    font-size: 1.25rem; /* Size of text */
    font-weight: 300; /* Thickness of text (400=normal, 700=bold) */
    cursor: pointer; /* Mouse cursor style */
    flex-shrink: 0; /* How much flex item shrinks */
    transition: background 0.2s ease; /* Animation duration and easing */
    line-height: 1; /* Height of text lines */
  }

  .mobile-nav-close:hover {
    background: rgba(255, 255, 255, 0.3); /* Background color or image */
  }

  /* Nav Links Container */
  .nav-links,
  .site-header.shrink .nav-links {
    width: 100%; /* Element width size */
    flex-direction: column; /* Direction of flex items (row, column) */
    align-items: stretch; /* Vertical alignment in flex container */
    justify-content: flex-start; /* Horizontal alignment in flex container */
    gap: 0; /* Space between flex or grid items */
    padding: 0.25rem 0; /* Internal spacing inside element */
    flex: 1; /* Flex container - flexible box layout */
    overflow-y: auto; /* Vertical overflow behavior */
    overflow-x: hidden; /* Horizontal overflow behavior */
    scrollbar-gutter: stable; /* Sets the scrollbar-gutter property */
    max-width: 100%; /* Maximum width constraint */
  }

  /* Custom Scrollbar for nav-links */
  .nav-links::-webkit-scrollbar {
    width: 5px; /* Element width size */
  }

  .nav-links::-webkit-scrollbar-track {
    background: rgba(0, 200, 200, 0.1); /* Background color or image */
    border-radius: 5px; /* Rounded corners of element */
  }

  .nav-links::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #00E5CC 0%, #00D4AA 100%); /* Background color or image */
    border-radius: 5px; /* Rounded corners of element */
  }

  /* Nav Item Styles for Mobile */
  .nav-item {
    padding: 0; /* Internal spacing inside element */
    margin: 0 0.6rem; /* External spacing outside element */
    border-bottom: none; /* Bottom border */
    position: relative; /* Positioning method (fixed, absolute, relative, sticky) */
  }

  .nav-item.has-dropdown > a {
    display: flex; /* Layout type (flex, grid, block, inline, etc) */
    justify-content: space-between; /* Horizontal alignment in flex container */
    align-items: center; /* Vertical alignment in flex container */
    padding: 0.5rem 0.75rem; /* Internal spacing inside element */
    font-size: 0.8rem; /* Size of text */
    font-weight: 500; /* Thickness of text (400=normal, 700=bold) */
    color: #1a1a2e; /* Text/foreground color */
    gap: 0.5rem; /* Space between flex or grid items */
    border-radius: 5px; /* Rounded corners of element */
    border: 1px solid transparent; /* Border around element */
    transition: all 0.2s ease; /* Animation duration and easing */
    background: #fff; /* Background color or image */
  }

  body:not(.light) .nav-item.has-dropdown > a {
    background: #1a1d2e; /* Background color or image */
    color: var(--text); /* Text/foreground color */
  }

  /* No leading icon on the mobile/tablet nav rows. The nth-child(1..4) rules that
     used to sit here painted an unrelated service icon on the first four dropdown
     items only, so About/Services/Industries/Solutions looked different from the
     rest of the list. */

  .nav-item.has-dropdown > a span {
    flex: 1; /* Flex container - flexible box layout */
  }

  .nav-item.has-dropdown > a::after {
    content: ""; /* Sets the content property */
    width: 16px; /* Element width size */
    height: 16px; /* Element height size */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); /* Sets the background-image property */
    background-size: contain; /* Sets the background-size property */
    background-repeat: no-repeat; /* Sets the background-repeat property */
    background-position: center; /* Sets the background-position property */
    transition: transform 0.3s ease; /* Animation duration and easing */
    flex-shrink: 0; /* How much flex item shrinks */
  }

  .nav-item.has-dropdown.active > a {
    background: #fff; /* Background color or image */
    border: 1px solid rgba(79, 70, 229, 0.25); /* Border around element */
    border-radius: 5px; /* Rounded corners of element */
  }

  body:not(.light) .nav-item.has-dropdown.active > a {
    background: #1a1d2e; /* Background color or image */
    border-color: rgba(99, 102, 241, 0.3); /* Sets the border-color property */
  }

  .nav-item.has-dropdown.active > a::after {
    transform: rotate(180deg); /* CSS 2D/3D transformation (rotate, scale, translate) */
  }

  .nav-item.has-dropdown > a:hover {
    background: rgba(79, 70, 229, 0.04); /* Background color or image */
  }

  /* Contact Nav Item */
  .nav-item-contact {
    padding: 0; /* Internal spacing inside element */
    margin: 0 0.6rem; /* External spacing outside element */
  }

  .nav-item-contact > a {
    display: flex; /* Layout type (flex, grid, block, inline, etc) */
    align-items: center; /* Vertical alignment in flex container */
    padding: 0.5rem 0.75rem; /* Internal spacing inside element */
    font-size: 0.8rem; /* Size of text */
    font-weight: 500; /* Thickness of text (400=normal, 700=bold) */
    color: #1a1a2e; /* Text/foreground color */
    gap: 0.5rem; /* Space between flex or grid items */
    border-radius: 5px; /* Rounded corners of element */
  }

  body:not(.light) .nav-item-contact > a {
    color: var(--text); /* Text/foreground color */
  }

  .nav-item-contact > a::before {
    content: ""; /* Sets the content property */
    width: 18px; /* Element width size */
    height: 18px; /* Element height size */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z'/%3E%3C/svg%3E"); /* Sets the background-image property */
    background-size: contain; /* Sets the background-size property */
    background-repeat: no-repeat; /* Sets the background-repeat property */
    background-position: center; /* Sets the background-position property */
    opacity: 0.7; /* Transparency level (0=invisible, 1=opaque) */
    flex-shrink: 0; /* How much flex item shrinks */
  }

  .nav-item-contact > a::after {
    content: ""; /* Sets the content property */
    width: 16px; /* Element width size */
    height: 16px; /* Element height size */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpath d='M7 17L17 7M17 7H7M17 7V17'/%3E%3C/svg%3E"); /* Sets the background-image property */
    background-size: contain; /* Sets the background-size property */
    background-repeat: no-repeat; /* Sets the background-repeat property */
    background-position: center; /* Sets the background-position property */
    margin-left: auto; /* Sets the margin-left property */
    flex-shrink: 0; /* How much flex item shrinks */
  }

  .nav-item-contact > a:hover {
    background: rgba(79, 70, 229, 0.05); /* Background color or image */
  }

  /* Dropdown Styles for Mobile - Accordion */
  .nav-item.has-dropdown .dropdown {
    position: static; /* Positioning method (fixed, absolute, relative, sticky) */
    width: 100%; /* Element width size */
    max-height: 0; /* Maximum height constraint */
    overflow: hidden; /* What happens to content that overflows */
    margin: 0; /* External spacing outside element */
    padding: 0; /* Internal spacing inside element */
    border: none; /* Border around element */
    border-radius: 0; /* Rounded corners of element */
    box-shadow: none; /* Shadow effect around element */
    background: transparent; /* Background color or image */
    transform: none; /* CSS 2D/3D transformation (rotate, scale, translate) */
    opacity: 1; /* Transparency level (0=invisible, 1=opaque) */
    visibility: visible; /* Sets the visibility property */
    pointer-events: auto; /* Whether element responds to pointer events */
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Animation duration and easing */
  }

  .nav-item.has-dropdown .dropdown::before {
    display: none; /* Layout type (flex, grid, block, inline, etc) */
  }

  .nav-item.has-dropdown.active .dropdown {
    max-height: none; /* Maximum height constraint */
    overflow-y: visible; /* Vertical overflow behavior */
    margin-top: 0.25rem; /* Sets the margin-top property */
    padding-left: 0.75rem; /* Sets the padding-left property */
    border-left: 2px solid rgba(79, 70, 229, 0.2); /* Sets the border-left property */
    margin-left: 0.5rem; /* Sets the margin-left property */
  }

  /* Custom Scrollbar for dropdown */
  .nav-item.has-dropdown.active .dropdown::-webkit-scrollbar {
    width: 5px; /* Element width size */
  }

  .nav-item.has-dropdown.active .dropdown::-webkit-scrollbar-track {
    background: rgba(0, 200, 200, 0.1); /* Background color or image */
    border-radius: 5px; /* Rounded corners of element */
  }

  .nav-item.has-dropdown.active .dropdown::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #00E5CC 0%, #00D4AA 100%); /* Background color or image */
    border-radius: 5px; /* Rounded corners of element */
  }

  /* Dropdown Content on Mobile */
  .dropdown-header {
    display: none; /* Layout type (flex, grid, block, inline, etc) */
  }

  .dropdown-footer {
    display: flex; /* Layout type (flex, grid, block, inline, etc) */
    padding: 0.5rem 0.5rem; /* Internal spacing inside element */
    margin-top: 0.25rem; /* Sets the margin-top property */
    border-top: 1px solid rgba(79, 70, 229, 0.15); /* Top border */
  }

  .dropdown-footer .link {
    display: flex; /* Layout type (flex, grid, block, inline, etc) */
    align-items: center; /* Vertical alignment in flex container */
    gap: 0.4rem; /* Space between flex or grid items */
    font-size: 0.75rem; /* Size of text */
    font-weight: 600; /* Thickness of text (400=normal, 700=bold) */
    color: #4F46E5; /* Text/foreground color */
    padding: 0.35rem 0.5rem; /* Internal spacing inside element */
    border-radius: 5px; /* Rounded corners of element */
    margin: 0; /* External spacing outside element */
    width: 100%; /* Element width size */
  }

  .dropdown-footer .link:hover {
    background: rgba(79, 70, 229, 0.08); /* Background color or image */
  }

  .dropdown-footer .link::after {
    content: ""; /* Sets the content property */
    width: 16px; /* Element width size */
    height: 16px; /* Element height size */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F46E5' stroke-width='2.5'%3E%3Cpath d='M7 17L17 7M17 7H7M17 7V17'/%3E%3C/svg%3E"); /* Sets the background-image property */
    background-size: contain; /* Sets the background-size property */
    background-repeat: no-repeat; /* Sets the background-repeat property */
    background-position: center; /* Sets the background-position property */
    margin-left: auto; /* Sets the margin-left property */
    border: none; /* Border around element */
    transform: none; /* CSS 2D/3D transformation (rotate, scale, translate) */
  }

  .dropdown-wide {
    width: 100%; /* Element width size */
    display: flex !important; /* Layout type (flex, grid, block, inline, etc) */
    flex-direction: column !important; /* Direction of flex items (row, column) */
    flex-wrap: nowrap !important; /* Whether flex items wrap to next line */
    gap: 0; /* Space between flex or grid items */
    max-height: none; /* Maximum height constraint */
    padding: 0.15rem 0; /* Internal spacing inside element */
  }

  .dropdown-section {
    margin-bottom: 0; /* Sets the margin-bottom property */
    padding: 0.25rem 0; /* Internal spacing inside element */
    border-bottom: none; /* Bottom border */
    flex: none !important; /* Flex container - flexible box layout */
    width: 100% !important; /* Element width size */
  }

  .dropdown-wide .dropdown-section {
    flex: none !important; /* Flex container - flexible box layout */
    width: 100% !important; /* Element width size */
    margin-bottom: 0; /* Sets the margin-bottom property */
  }

  .dropdown-section-title {
    padding: 0.5rem 0.5rem 0.35rem; /* Internal spacing inside element */
    font-size: 0.65rem; /* Size of text */
    font-weight: 700; /* Thickness of text (400=normal, 700=bold) */
    color: #6B7280; /* Text/foreground color */
    margin-bottom: 0; /* Sets the margin-bottom property */
    text-transform: uppercase; /* Text transformation (uppercase, lowercase) */
    letter-spacing: 0.08em; /* Space between characters */
  }

  body:not(.light) .dropdown-section-title {
    color: var(--muted); /* Text/foreground color */
  }

  .dropdown-wide .dropdown-section-title {
    font-size: 0.62rem; /* Size of text */
    width: 100% !important; /* override desktop 25% — full width on mobile */
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* Mobile: kill desktop 20% width cap on company-dropdown sections */
  .company-dropdown .dropdown-section,
  .company-dropdown .dropdown-section:nth-of-type(4) {
    flex: none !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .company-dropdown .dropdown-section:nth-of-type(4) .dropdown-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-rows: none !important;
    grid-template-columns: none !important;
    column-gap: 0 !important;
  }

  /* Mobile: let dropdown item names wrap instead of truncating with "..." */
  .dropdown-item span {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: 100% !important;
    line-height: 1.3;
  }

  .dropdown-group-title {
    display: none; /* Layout type (flex, grid, block, inline, etc) */
  }

  .dropdown-grid {
    display: flex !important; /* Layout type (flex, grid, block, inline, etc) */
    flex-direction: column !important; /* Direction of flex items (row, column) */
    gap: 0 !important; /* Space between flex or grid items */
    grid-template-columns: none !important; /* Define grid column sizes */
  }

  .dropdown-wide .dropdown-grid {
    display: flex !important; /* Layout type (flex, grid, block, inline, etc) */
    flex-direction: column !important; /* Direction of flex items (row, column) */
    gap: 0 !important; /* Space between flex or grid items */
    grid-template-columns: none !important; /* Define grid column sizes */
  }

  .dropdown-item {
    padding: 0.4rem 0.5rem; /* Internal spacing inside element */
    font-size: 0.75rem; /* Size of text */
    gap: 0.5rem; /* Space between flex or grid items */
    border-radius: 0; /* Rounded corners of element */
    margin: 0; /* External spacing outside element */
    color: #1a1a2e; /* Text/foreground color */
    background: transparent; /* Background color or image */
    border: none; /* Border around element */
  }

  body:not(.light) .dropdown-item {
    color: var(--text); /* Text/foreground color */
  }

  .dropdown-wide .dropdown-item {
    padding: 0.4rem 0.5rem; /* Internal spacing inside element */
    font-size: 0.75rem; /* Size of text */
    gap: 0.5rem; /* Space between flex or grid items */
  }

  .dropdown-item img {
    width: 16px; /* Element width size */
    height: 16px; /* Element height size */
    height: 18px; /* Element height size */
  }

  .dropdown-item:hover {
    background: rgba(79, 70, 229, 0.06); /* Background color or image */
    border-color: transparent; /* Sets the border-color property */
  }

  /* Mobile Nav Footer */
  .mobile-nav-footer {
    display: flex; /* Layout type (flex, grid, block, inline, etc) */
    flex-direction: column; /* Direction of flex items (row, column) */
    padding: 0.85rem 1rem; /* Internal spacing inside element */
    border-top: 1px solid rgba(0, 0, 0, 0.08); /* Top border */
    background: #fff; /* Background color or image */
    gap: 0; /* Space between flex or grid items */
    border-radius: 0; /* Rounded corners of element */
    margin-top: auto; /* Sets the margin-top property */
  }

  body:not(.light) .mobile-nav-footer {
    background: #1a1d2e; /* Background color or image */
    border-top-color: var(--border); /* Sets the border-top-color property */
  }

  .mobile-nav-footer-row {
    display: flex; /* Layout type (flex, grid, block, inline, etc) */
    align-items: center; /* Vertical alignment in flex container */
    gap: 0.75rem; /* Space between flex or grid items */
  }

  .mobile-nav-footer-header {
    display: none; /* Layout type (flex, grid, block, inline, etc) */
  }

  .mobile-nav-quick-actions {
    display: none; /* Layout type (flex, grid, block, inline, etc) */
  }

  /* Mobile Theme Toggle */
  .theme-toggle-mobile {
    width: 38px; /* Element width size */
    height: 38px; /* Element height size */
    border-radius: 50%; /* Rounded corners of element */
    border: 1px solid rgba(0, 0, 0, 0.1); /* Border around element */
    background: #fff; /* Background color or image */
    display: inline-flex; /* Layout type (flex, grid, block, inline, etc) */
    align-items: center; /* Vertical alignment in flex container */
    flex-shrink: 0; /* How much flex item shrinks */
    justify-content: center; /* Horizontal alignment in flex container */
    cursor: pointer; /* Mouse cursor style */
    transition: 0.2s ease; /* Animation duration and easing */
  }

  body:not(.light) .theme-toggle-mobile {
    background: var(--bg); /* Background color or image */
    border-color: var(--border); /* Sets the border-color property */
  }

  .theme-toggle-mobile:hover {
    border-color: #4F46E5; /* Sets the border-color property */
  }

  .theme-toggle-mobile .moon,
  .theme-toggle-mobile .sun {
    width: 20px; /* Element width size */
    height: 20px; /* Element height size */
  }

  .mobile-nav-quick-actions {
    display: none; /* Layout type (flex, grid, block, inline, etc) */
  }

  .mobile-nav-cta {
    display: flex; /* Layout type (flex, grid, block, inline, etc) */
    align-items: center; /* Vertical alignment in flex container */
    justify-content: center; /* Horizontal alignment in flex container */
    gap: 0.5rem; /* Space between flex or grid items */
    padding: 0.75rem 1.25rem; /* Internal spacing inside element */
    background: #4F46E5; /* Background color or image */
    color: #fff; /* Text/foreground color */
    border: none; /* Border around element */
    border-radius: 5px; /* Rounded corners of element */
    font-size: 0.88rem; /* Size of text */
    font-weight: 600; /* Thickness of text (400=normal, 700=bold) */
    cursor: pointer; /* Mouse cursor style */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Animation duration and easing */
    text-decoration: none; /* Text decoration (underline, etc) */
    flex: 1; /* Flex container - flexible box layout */
  }

  .mobile-nav-cta:hover {
    transform: translateY(-1px); /* CSS 2D/3D transformation (rotate, scale, translate) */
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.3); /* Shadow effect around element */
  }

  .mobile-nav-cta::after {
    content: ""; /* Sets the content property */
    width: 16px; /* Element width size */
    height: 16px; /* Element height size */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E"); /* Sets the background-image property */
    background-size: contain; /* Sets the background-size property */
    background-repeat: no-repeat; /* Sets the background-repeat property */
  }

  /* Hide default nav actions on mobile */
  .nav-actions {
    display: none; /* Layout type (flex, grid, block, inline, etc) */
  }

  /* Disable hover effects on mobile dropdowns */
  .nav-item.has-dropdown:hover .dropdown {
    max-height: 0; /* Maximum height constraint */
  }

  .nav-item.has-dropdown.active .dropdown,
  .nav-item.has-dropdown.active:hover .dropdown {
    max-height: 400px; /* Maximum height constraint */
  }
}

/* Case Study Blog Page Styles */
.case-study-hero {
  background: linear-gradient(135deg, var(--bg-alt) 0%, var(--bg) 100%); /* Background color or image */
  padding: 8rem 0 4rem; /* Internal spacing inside element */
  border-bottom: 1px solid var(--border); /* Bottom border */
}

/* NEW Case Article Styles - Clean Design */
.case-article {
  padding: 6rem 0 4rem; /* Internal spacing inside element */
}

.case-article-container {
  max-width: 900px; /* Maximum width constraint */
  margin: 0 auto; /* External spacing outside element */
}

.case-article-title {
  font-size: clamp(2rem, 4vw, 2.75rem); /* Size of text */
  font-weight: 700; /* Thickness of text (400=normal, 700=bold) */
  color: var(--primary); /* Text/foreground color */
  margin-bottom: 2.5rem; /* Sets the margin-bottom property */
  line-height: 1.3; /* Height of text lines */
}

.case-hero-image {
  width: 100%; /* Element width size */
  border-radius: 5px; /* Rounded corners of element */
  overflow: hidden; /* What happens to content that overflows */
  margin-bottom: 2rem; /* Sets the margin-bottom property */
}

.case-hero-image img {
  width: 100%; /* Element width size */
  height: auto; /* Element height size */
  display: block; /* Layout type (flex, grid, block, inline, etc) */
  object-fit: cover; /* How image fills container */
}

/* Meta Info Row */
.case-meta-row {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  gap: 3rem; /* Space between flex or grid items */
  padding: 1.5rem 0; /* Internal spacing inside element */
  border-bottom: 1px solid var(--border); /* Bottom border */
  margin-bottom: 3rem; /* Sets the margin-bottom property */
}

.case-meta-item {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  flex-direction: column; /* Direction of flex items (row, column) */
  gap: 0.35rem; /* Space between flex or grid items */
}

.case-meta-label {
  font-size: 0.7rem; /* Size of text */
  color: var(--muted); /* Text/foreground color */
  text-transform: uppercase; /* Text transformation (uppercase, lowercase) */
  letter-spacing: 1px; /* Space between characters */
  font-weight: 500; /* Thickness of text (400=normal, 700=bold) */
}

.case-meta-value {
  font-size: 1rem; /* Size of text */
  font-weight: 600; /* Thickness of text (400=normal, 700=bold) */
  color: var(--text); /* Text/foreground color */
}

.case-meta-value.highlight {
  color: var(--primary); /* Text/foreground color */
}

/* Article Body */
.case-article-body {
  line-height: 1.8; /* Height of text lines */
}

.case-section {
  margin-bottom: 3rem; /* Sets the margin-bottom property */
}

.case-section h2 {
  font-size: 1.75rem; /* Size of text */
  font-weight: 700; /* Thickness of text (400=normal, 700=bold) */
  color: var(--text); /* Text/foreground color */
  margin-bottom: 1.25rem; /* Sets the margin-bottom property */
}

.case-section h3 {
  font-size: 1.15rem; /* Size of text */
  font-weight: 700; /* Thickness of text (400=normal, 700=bold) */
  color: var(--text); /* Text/foreground color */
  margin-top: 2rem; /* Sets the margin-top property */
  margin-bottom: 0.75rem; /* Sets the margin-bottom property */
}

.case-section p {
  font-size: 1rem; /* Size of text */
  line-height: 1.8; /* Height of text lines */
  color: var(--muted); /* Text/foreground color */
  margin-bottom: 1rem; /* Sets the margin-bottom property */
}

.case-section ul {
  margin: 1rem 0 1.5rem 1.5rem; /* External spacing outside element */
  color: var(--muted); /* Text/foreground color */
}

.case-section ul li {
  margin-bottom: 0.5rem; /* Sets the margin-bottom property */
  line-height: 1.7; /* Height of text lines */
}

/* Technology Icons Grid */
.tech-icons-grid {
  display: grid; /* Layout type (flex, grid, block, inline, etc) */
  grid-template-columns: repeat(5, 1fr); /* Define grid column sizes */
  gap: 2rem 1.5rem; /* Space between flex or grid items */
  margin-top: 1.5rem; /* Sets the margin-top property */
}

.tech-icon-item {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  flex-direction: column; /* Direction of flex items (row, column) */
  align-items: center; /* Vertical alignment in flex container */
  gap: 0.75rem; /* Space between flex or grid items */
  text-align: center; /* Text alignment (left, center, right) */
}

.tech-icon-item img {
  width: 48px; /* Element width size */
  height: 48px; /* Element height size */
  object-fit: contain; /* How image fills container */
}

.tech-icon-item span {
  font-size: 0.85rem; /* Size of text */
  color: var(--text); /* Text/foreground color */
  font-weight: 500; /* Thickness of text (400=normal, 700=bold) */
}

/* Product Screenshot */
.case-product-screenshot {
  width: 100%; /* Element width size */
  margin: 3rem 0; /* External spacing outside element */
  border-radius: 5px; /* Rounded corners of element */
  overflow: hidden; /* What happens to content that overflows */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); /* Shadow effect around element */
}

.case-product-screenshot img {
  width: 100%; /* Element width size */
  height: auto; /* Element height size */
  display: block; /* Layout type (flex, grid, block, inline, etc) */
}

/* Benefits List */
.case-benefits-list {
  list-style: none; /* Sets the list-style property */
  padding: 0; /* Internal spacing inside element */
  margin: 1.5rem 0; /* External spacing outside element */
}

.case-benefits-list li {
  position: relative; /* Positioning method (fixed, absolute, relative, sticky) */
  padding-left: 1.25rem; /* Sets the padding-left property */
  margin-bottom: 0.6rem; /* Sets the margin-bottom property */
  color: var(--muted); /* Text/foreground color */
  line-height: 1.6; /* Height of text lines */
}

.case-benefits-list li::before {
  content: "\25A0 "; /* Sets the content property */
  position: absolute; /* Positioning method (fixed, absolute, relative, sticky) */
  left: 0; /* Distance from left edge */
  color: var(--text); /* Text/foreground color */
  font-size: 0.5rem; /* Size of text */
  top: 0.45rem; /* Distance from top edge */
}

/* Client Info Card */
.client-section {
  margin-top: 3rem; /* Sets the margin-top property */
}

.client-info-card {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  gap: 2rem; /* Space between flex or grid items */
  align-items: flex-start; /* Vertical alignment in flex container */
  padding: 2rem; /* Internal spacing inside element */
  background: var(--bg-alt); /* Background color or image */
  border: 1px solid var(--border); /* Border around element */
  border-radius: 5px; /* Rounded corners of element */
}
/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 768px) {
  .hero {
    padding: 5rem 0 3rem; /* Internal spacing inside element */
    min-height: auto; /* Minimum height constraint */
  }
}

.client-logo-wrap {
  flex-shrink: 0; /* How much flex item shrinks */
  width: 100px; /* Element width size */
  height: 100px; /* Element height size */
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  align-items: center; /* Vertical alignment in flex container */
  justify-content: center; /* Horizontal alignment in flex container */
}

.client-logo-wrap img {
  max-width: 100%; /* Maximum width constraint */
  max-height: 100%; /* Maximum height constraint */
  object-fit: contain; /* How image fills container */
}

.client-details p {
  color: var(--muted); /* Text/foreground color */
  line-height: 1.7; /* Height of text lines */
  margin: 0 0 1rem; /* External spacing outside element */
}

.client-details strong {
  color: var(--primary); /* Text/foreground color */
}

.client-badge {
  display: inline-block; /* Layout type (flex, grid, block, inline, etc) */
  font-size: 0.7rem; /* Size of text */
  font-weight: 600; /* Thickness of text (400=normal, 700=bold) */
  color: var(--muted); /* Text/foreground color */
  text-transform: uppercase; /* Text transformation (uppercase, lowercase) */
  letter-spacing: 1px; /* Space between characters */
  padding: 0.5rem 1rem; /* Internal spacing inside element */
  background: var(--card); /* Background color or image */
  border-radius: 4px; /* Rounded corners of element */
}

/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 576px) {
  .client-info-card {
    flex-direction: column; /* Direction of flex items (row, column) */
    align-items: center; /* Vertical alignment in flex container */
    text-align: center; /* Text alignment (left, center, right) */
  }
}

/* Responsive */
/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 768px) {
  .case-meta-row {
    flex-wrap: wrap; /* Whether flex items wrap to next line */
    gap: 1.5rem 2.5rem; /* Space between flex or grid items */
  }
  
  .tech-icons-grid {
    grid-template-columns: repeat(3, 1fr); /* Define grid column sizes */
    gap: 1.5rem 1rem; /* Space between flex or grid items */
  }
  
  .case-article-title {
    font-size: 1.75rem; /* Size of text */
  }
}

/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 480px) {
  .tech-icons-grid {
    grid-template-columns: repeat(2, 1fr); /* Define grid column sizes */
  }
  
  .case-meta-row {
    gap: 1.25rem 2rem; /* Space between flex or grid items */
  }
}

.back-link {
  display: inline-flex; /* Layout type (flex, grid, block, inline, etc) */
  align-items: center; /* Vertical alignment in flex container */
  gap: 0.5rem; /* Space between flex or grid items */
  color: var(--primary); /* Text/foreground color */
  font-size: 0.95rem; /* Size of text */
  margin-bottom: 2rem; /* Sets the margin-bottom property */
  transition: color 0.2s; /* Animation duration and easing */
}

.back-link:hover {
  color: var(--primary-2); /* Text/foreground color */
}

.case-study-hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem); /* Size of text */
  font-weight: 700; /* Thickness of text (400=normal, 700=bold) */
  margin-bottom: 2rem; /* Sets the margin-bottom property */
  line-height: 1.2; /* Height of text lines */
}

.case-study-meta-grid {
  display: grid; /* Layout type (flex, grid, block, inline, etc) */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Define grid column sizes */
  gap: 1.5rem; /* Space between flex or grid items */
  margin-top: 2rem; /* Sets the margin-top property */
}

.meta-box {
  background: var(--card); /* Background color or image */
  padding: 1.5rem; /* Internal spacing inside element */
  border-radius: 5px; /* Rounded corners of element */
  border: 1px solid var(--border); /* Border around element */
}

.meta-box .meta-label {
  display: block; /* Layout type (flex, grid, block, inline, etc) */
  font-size: 0.85rem; /* Size of text */
  color: var(--muted); /* Text/foreground color */
  margin-bottom: 0.5rem; /* Sets the margin-bottom property */
  text-transform: uppercase; /* Text transformation (uppercase, lowercase) */
  letter-spacing: 0.5px; /* Space between characters */
}

.meta-box .meta-value {
  font-size: 1.1rem; /* Size of text */
  font-weight: 600; /* Thickness of text (400=normal, 700=bold) */
  color: var(--text); /* Text/foreground color */
}

.case-study-content-section {
  padding: 4rem 0; /* Internal spacing inside element */
}

.case-study-body {
  max-width: 800px; /* Maximum width constraint */
  margin: 0 auto; /* External spacing outside element */
}

.content-block {
  margin-bottom: 3rem; /* Sets the margin-bottom property */
}

.content-block h2 {
  font-size: 1.75rem; /* Size of text */
  font-weight: 700; /* Thickness of text (400=normal, 700=bold) */
  margin-bottom: 1.25rem; /* Sets the margin-bottom property */
  color: var(--text); /* Text/foreground color */
  border-left: 4px solid var(--primary); /* Sets the border-left property */
  padding-left: 1rem; /* Sets the padding-left property */
}

.content-block p {
  font-size: 1.05rem; /* Size of text */
  line-height: 1.8; /* Height of text lines */
  color: var(--muted); /* Text/foreground color */
  margin-bottom: 1rem; /* Sets the margin-bottom property */
}

.content-block ul {
  margin: 1rem 0 1.5rem 1.5rem; /* External spacing outside element */
  color: var(--muted); /* Text/foreground color */
}

.content-block ul li {
  margin-bottom: 0.5rem; /* Sets the margin-bottom property */
  line-height: 1.6; /* Height of text lines */
}

.feature-item {
  background: var(--card); /* Background color or image */
  padding: 1.5rem 2rem; /* Internal spacing inside element */
  border-radius: 5px; /* Rounded corners of element */
  margin-bottom: 1.5rem; /* Sets the margin-bottom property */
  border: 1px solid var(--border); /* Border around element */
}

.feature-item h3 {
  font-size: 1.25rem; /* Size of text */
  font-weight: 600; /* Thickness of text (400=normal, 700=bold) */
  margin-bottom: 1rem; /* Sets the margin-bottom property */
  color: var(--primary); /* Text/foreground color */
}

.feature-item p,
.feature-item ul {
  color: var(--muted); /* Text/foreground color */
}

.tech-tags {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  flex-wrap: wrap; /* Whether flex items wrap to next line */
  gap: 0.75rem; /* Space between flex or grid items */
}

.tech-tag {
  background: var(--card); /* Background color or image */
  color: var(--text); /* Text/foreground color */
  padding: 0.5rem 1rem; /* Internal spacing inside element */
  border-radius: 5px; /* Rounded corners of element */
  font-size: 0.9rem; /* Size of text */
  border: 1px solid var(--border); /* Border around element */
  transition: all 0.2s; /* Animation duration and easing */
}

.tech-tag:hover {
  background: var(--primary); /* Background color or image */
  color: var(--bg); /* Text/foreground color */
  border-color: var(--primary); /* Sets the border-color property */
}

.benefits-list {
  display: grid; /* Layout type (flex, grid, block, inline, etc) */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Define grid column sizes */
  gap: 0.75rem; /* Space between flex or grid items */
  list-style: none; /* Sets the list-style property */
  margin: 1.5rem 0; /* External spacing outside element */
  padding: 0; /* Internal spacing inside element */
}

.benefits-list li {
  background: var(--card); /* Background color or image */
  padding: 1rem 1.25rem; /* Internal spacing inside element */
  border-radius: 5px; /* Rounded corners of element */
  border-left: 3px solid var(--primary); /* Sets the border-left property */
  font-size: 0.95rem; /* Size of text */
}

.client-info-box {
  background: linear-gradient(135deg, var(--card) 0%, var(--bg-alt) 100%); /* Background color or image */
  padding: 2rem; /* Internal spacing inside element */
  border-radius: 16px; /* Rounded corners of element */
  border: 1px solid var(--border); /* Border around element */
  margin-top: 3rem; /* Sets the margin-top property */
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  gap: 2rem; /* Space between flex or grid items */
  align-items: center; /* Vertical alignment in flex container */
}

.client-info-box .client-logo {
  flex-shrink: 0; /* How much flex item shrinks */
  width: 120px; /* Element width size */
  height: 120px; /* Element height size */
  background: var(--bg); /* Background color or image */
  border-radius: 5px; /* Rounded corners of element */
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  align-items: center; /* Vertical alignment in flex container */
  justify-content: center; /* Horizontal alignment in flex container */
  padding: 1rem; /* Internal spacing inside element */
}

.client-info-box .client-logo img {
  max-width: 100%; /* Maximum width constraint */
  max-height: 100%; /* Maximum height constraint */
}

.client-info-box .client-description p {
  color: var(--muted); /* Text/foreground color */
  line-height: 1.7; /* Height of text lines */
  margin: 0; /* External spacing outside element */
}

.client-info-box .client-description strong {
  color: var(--primary); /* Text/foreground color */
}

/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 1024px) {
  .case-study-hero {
    padding: 6rem 0 3rem; /* Internal spacing inside element */
  }
  
  .case-study-meta-grid {
    grid-template-columns: repeat(2, 1fr); /* Define grid column sizes */
  }
  
  .client-info-box {
    flex-direction: column; /* Direction of flex items (row, column) */
    text-align: center; /* Text alignment (left, center, right) */
  }
  
  .benefits-list {
    grid-template-columns: 1fr; /* Define grid column sizes */
  }
}

/* Case Study Link Styles for case-studies.html */
.case-study-link {
  display: block; /* Layout type (flex, grid, block, inline, etc) */
  text-decoration: none; /* Text decoration (underline, etc) */
  color: inherit; /* Text/foreground color */
  transition: transform 0.3s ease; /* Animation duration and easing */
}

.case-study-full:hover {
  transform: translateY(-5px); /* CSS 2D/3D transformation (rotate, scale, translate) */
}

.case-study-full:hover .view-case-btn {
  background: var(--primary); /* Background color or image */
  color: var(--bg); /* Text/foreground color */
}

.view-case-btn {
  display: inline-block; /* Layout type (flex, grid, block, inline, etc) */
  margin-top: 1.5rem; /* Sets the margin-top property */
  padding: 0.75rem 1.5rem; /* Internal spacing inside element */
  background: transparent; /* Background color or image */
  border: 2px solid var(--primary); /* Border around element */
  color: var(--primary); /* Text/foreground color */
  border-radius: 5px; /* Rounded corners of element */
  font-weight: 600; /* Thickness of text (400=normal, 700=bold) */
  font-size: 0.9rem; /* Size of text */
  transition: all 0.3s ease; /* Animation duration and easing */
}

.view-case-btn:hover {
  background: var(--primary); /* Background color or image */
  color: var(--bg); /* Text/foreground color */
}
/* ===========================================
   PROFESSIONAL SERVICES PAGE STYLES
   =========================================== */

/* Services Hero Section */
.services-hero {
  padding: 8rem 0 5rem; /* Internal spacing inside element */
  background: linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%); /* Background color or image */
  position: relative; /* Positioning method (fixed, absolute, relative, sticky) */
  overflow: hidden; /* What happens to content that overflows */
}

.services-hero::before {
  content: ""; /* Sets the content property */
  position: absolute; /* Positioning method (fixed, absolute, relative, sticky) */
  top: -50%; /* Distance from top edge */
  right: -20%; /* Distance from right edge */
  width: 600px; /* Element width size */
  height: 600px; /* Element height size */
  background: radial-gradient(circle, rgba(155, 124, 255, 0.15) 0%, transparent 70%); /* Background color or image */
  border-radius: 50%; /* Rounded corners of element */
  pointer-events: none; /* Whether element responds to pointer events */
}

.services-hero-content {
  max-width: 800px; /* Maximum width constraint */
  text-align: center; /* Text alignment (left, center, right) */
  margin: 0 auto; /* External spacing outside element */
  position: relative; /* Positioning method (fixed, absolute, relative, sticky) */
  z-index: 1; /* Stacking order (higher = on top) */
}

.services-label {
  display: inline-block; /* Layout type (flex, grid, block, inline, etc) */
  padding: 0.5rem 1.25rem; /* Internal spacing inside element */
  background: rgba(155, 124, 255, 0.15); /* Background color or image */
  border: 1px solid rgba(155, 124, 255, 0.3); /* Border around element */
  border-radius: 50px; /* Rounded corners of element */
  font-size: 0.85rem; /* Size of text */
  font-weight: 600; /* Thickness of text (400=normal, 700=bold) */
  color: var(--primary); /* Text/foreground color */
  letter-spacing: 0.5px; /* Space between characters */
  margin-bottom: 1.5rem; /* Sets the margin-bottom property */
}

.services-hero-title {
  font-size: clamp(2.5rem, 5vw, 4rem); /* Size of text */
  font-weight: 800; /* Thickness of text (400=normal, 700=bold) */
  line-height: 1.1; /* Height of text lines */
  margin: 0 0 1.5rem; /* External spacing outside element */
}

.gradient-text {
  background: linear-gradient(135deg, var(--primary) 0%, #3b82f6 100%); /* Background color or image */
  -webkit-background-clip: text; /* Sets the -webkit-background-clip property */
  background-clip: text; /* Sets the background-clip property */
  color: transparent; /* Text/foreground color */
}

.services-hero-desc {
  font-size: 1.15rem; /* Size of text */
  color: var(--muted); /* Text/foreground color */
  line-height: 1.7; /* Height of text lines */
  margin-bottom: 2rem; /* Sets the margin-bottom property */
}

.services-hero-badges {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  justify-content: center; /* Horizontal alignment in flex container */
  gap: 1rem; /* Space between flex or grid items */
  flex-wrap: wrap; /* Whether flex items wrap to next line */
}

.hero-badge {
  display: inline-flex; /* Layout type (flex, grid, block, inline, etc) */
  align-items: center; /* Vertical alignment in flex container */
  gap: 0.5rem; /* Space between flex or grid items */
  padding: 0.75rem 1.25rem; /* Internal spacing inside element */
  background: var(--card); /* Background color or image */
  border: 1px solid var(--border); /* Border around element */
  border-radius: 50px; /* Rounded corners of element */
  font-size: 0.9rem; /* Size of text */
  font-weight: 600; /* Thickness of text (400=normal, 700=bold) */
  transition: all 0.3s ease; /* Animation duration and easing */
}

.hero-badge:hover {
  border-color: var(--primary); /* Sets the border-color property */
  transform: translateY(-2px); /* CSS 2D/3D transformation (rotate, scale, translate) */
}

.badge-icon {
  font-size: 1.1rem; /* Size of text */
}

/* Services Grid Section */
.services-grid-section {
  padding: 5rem 0; /* Internal spacing inside element */
  background: var(--bg); /* Background color or image */
}

.services-main-grid {
  display: grid; /* Layout type (flex, grid, block, inline, etc) */
  grid-template-columns: repeat(3, 1fr); /* Define grid column sizes */
  gap: 2rem; /* Space between flex or grid items */
}

/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 1024px) {
  .services-main-grid {
    grid-template-columns: repeat(2, 1fr); /* Define grid column sizes */
  }
}

/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 640px) {
  .services-main-grid {
    grid-template-columns: 1fr; /* Define grid column sizes */
  }
}

/* Service Card Pro */
.service-card-pro {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  flex-direction: column; /* Direction of flex items (row, column) */
  background: var(--bg-alt); /* Background color or image */
  border: 1px solid var(--border); /* Border around element */
  border-radius: 5px; /* Rounded corners of element */
  overflow: hidden; /* What happens to content that overflows */
  transition: all 0.3s ease; /* Animation duration and easing */
  text-decoration: none; /* Text decoration (underline, etc) */
}

.service-card-pro:hover {
  transform: translateY(-8px); /* CSS 2D/3D transformation (rotate, scale, translate) */
  border-color: rgba(155, 124, 255, 0.4); /* Sets the border-color property */
  box-shadow: 0 20px 50px rgba(155, 124, 255, 0.15); /* Shadow effect around element */
}

.service-card-media {
  height: 160px; /* Element height size */
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  align-items: center; /* Vertical alignment in flex container */
  justify-content: center; /* Horizontal alignment in flex container */
  background: linear-gradient(135deg, rgba(155, 124, 255, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%); /* Background color or image */
  padding: 2rem; /* Internal spacing inside element */
}

.service-card-media img {
  width: 80px; /* Element width size */
  height: 80px; /* Element height size */
  object-fit: contain; /* How image fills container */
  transition: transform 0.3s ease; /* Animation duration and easing */
}

.service-card-pro:hover .service-card-media img {
  transform: scale(1.1); /* CSS 2D/3D transformation (rotate, scale, translate) */
}

.service-card-content {
  padding: 1.75rem; /* Internal spacing inside element */
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  flex-direction: column; /* Direction of flex items (row, column) */
  flex: 1; /* Flex container - flexible box layout */
}

.service-card-content h3 {
  font-size: 1.25rem; /* Size of text */
  font-weight: 700; /* Thickness of text (400=normal, 700=bold) */
  margin: 0 0 0.75rem; /* External spacing outside element */
  color: var(--text); /* Text/foreground color */
}

.service-card-content p {
  font-size: 0.95rem; /* Size of text */
  color: var(--muted); /* Text/foreground color */
  line-height: 1.6; /* Height of text lines */
  margin: 0 0 1.25rem; /* External spacing outside element */
  flex: 1; /* Flex container - flexible box layout */
}

.service-card-link {
  display: inline-flex; /* Layout type (flex, grid, block, inline, etc) */
  align-items: center; /* Vertical alignment in flex container */
  gap: 0.5rem; /* Space between flex or grid items */
  font-weight: 600; /* Thickness of text (400=normal, 700=bold) */
  color: var(--primary); /* Text/foreground color */
  font-size: 0.9rem; /* Size of text */
}

.service-card-link .arrow {
  transition: transform 0.3s ease; /* Animation duration and easing */
}

.service-card-pro:hover .service-card-link .arrow {
  transform: translateX(5px); /* CSS 2D/3D transformation (rotate, scale, translate) */
}

/* Services CTA Banner */
.services-cta-banner {
  padding: 4rem 0; /* Internal spacing inside element */
  background: linear-gradient(135deg, rgba(155, 124, 255, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%); /* Background color or image */
  border-top: 1px solid var(--border); /* Top border */
  border-bottom: 1px solid var(--border); /* Bottom border */
}

.cta-banner-content {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  align-items: center; /* Vertical alignment in flex container */
  justify-content: space-between; /* Horizontal alignment in flex container */
  gap: 3rem; /* Space between flex or grid items */
}

/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 768px) {
  .cta-banner-content {
    flex-direction: column; /* Direction of flex items (row, column) */
    text-align: center; /* Text alignment (left, center, right) */
  }
}

/* .cta-banner-text h2 / p — old CTA-banner design removed. The current
   "button-text" card styles these in styles-page.css (.cta-banner-h2 / -p).
   Keeping rules here would win on specificity and override that design. */

.cta-banner-actions {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  gap: 1rem; /* Space between flex or grid items */
  flex-shrink: 0; /* How much flex item shrinks */
}

/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 480px) {
  .cta-banner-actions {
    flex-direction: column; /* Direction of flex items (row, column) */
    width: 100%; /* Element width size */
  }
  
  .cta-banner-actions .btn {
    width: 100%; /* Element width size */
  }
}

/* Trust Badges Section */
.trust-badges-section {
  padding: 5rem 0; /* Internal spacing inside element */
  background: var(--bg-alt); /* Background color or image */
}

.trust-header {
  text-align: center; /* Text alignment (left, center, right) */
  margin-bottom: 3rem; /* Sets the margin-bottom property */
}

.trust-header h2 {
  font-size: 2rem; /* Size of text */
  font-weight: 700; /* Thickness of text (400=normal, 700=bold) */
  margin: 0 0 0.5rem; /* External spacing outside element */
}

.trust-header p {
  font-size: 1rem; /* Size of text */
  color: var(--muted); /* Text/foreground color */
  margin: 0; /* External spacing outside element */
}

.trust-logos {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  justify-content: center; /* Horizontal alignment in flex container */
  align-items: center; /* Vertical alignment in flex container */
  gap: 4rem; /* Space between flex or grid items */
  flex-wrap: wrap; /* Whether flex items wrap to next line */
  margin-bottom: 3rem; /* Sets the margin-bottom property */
}

.trust-logo-item img {
  height: 40px; /* Element height size */
  width: auto; /* Element width size */
  opacity: 1; /* Transparency level (0=invisible, 1=opaque) */
  filter: grayscale(0%); /* Visual filter effects */
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease, filter 0.25s ease; /* Animation duration and easing */
}

.trust-logo-item:hover img {
  opacity: 1; /* Transparency level (0=invisible, 1=opaque) */
  filter: grayscale(0%); /* Visual filter effects */
  transform: translateY(-2px); /* CSS 2D/3D transformation (rotate, scale, translate) */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35); /* Shadow effect around element */
}

body.light .trust-logo-item img {
  filter: grayscale(0%) brightness(1); /* Visual filter effects */
}

/* ===========================================
   HIRE DEVELOPERS PAGE (PROFESSIONAL LAYOUT)
   =========================================== */

.developers-page .page-hero {
  padding: 6rem 0 4rem; /* Internal spacing inside element */
  background: linear-gradient(180deg, #2b1055 0%, #f2994a 100%); /* Background color or image */
  text-align: left; /* Text alignment (left, center, right) */
  position: relative; /* Positioning method (fixed, absolute, relative, sticky) */
  overflow: hidden; /* What happens to content that overflows */
}

.developers-page .page-hero::before {
  content: ""; /* Sets the content property */
  position: absolute; /* Positioning method (fixed, absolute, relative, sticky) */
  inset: 0; /* Sets the inset property */
  pointer-events: none; /* Whether element responds to pointer events */
  z-index: 0; /* Stacking order (higher = on top) */
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.9) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 1px, transparent 1px);
  background-size: 22px 22px; /* Sets the background-size property */
  opacity: 0; /* Transparency level (0=invisible, 1=opaque) */
}

body.light .developers-page .page-hero::before {
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.7) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 1px, transparent 1px);
}

.developers-page .page-hero .container {
  position: relative; /* Positioning method (fixed, absolute, relative, sticky) */
  z-index: 1; /* Stacking order (higher = on top) */
}

.developers-page .page-hero .container {
  max-width: 960px; /* Maximum width constraint */
}

.developers-page .page-hero h1 {
  font-size: clamp(2.5rem, 5vw, 3.5rem); /* Size of text */
  font-weight: 800; /* Thickness of text (400=normal, 700=bold) */
  margin-bottom: 0.75rem; /* Sets the margin-bottom property */
}

.developers-page .hero-subtitle {
  font-size: 1.05rem; /* Size of text */
  color: var(--muted); /* Text/foreground color */
  max-width: 640px; /* Maximum width constraint */
}

.developers-page .hero-actions {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  flex-wrap: wrap; /* Whether flex items wrap to next line */
  gap: 0.75rem; /* Space between flex or grid items */
  margin: 2rem 0 1.5rem; /* External spacing outside element */
}

.developers-page .hero-actions .btn {
  min-width: 190px; /* Minimum width constraint */
  justify-content: center; /* Horizontal alignment in flex container */
}

.developers-page .hero-stats {
  margin-top: 1.5rem; /* Sets the margin-top property */
}

.developers-page .hero-stats div span {
  font-size: 0.85rem; /* Size of text */
  color: var(--muted); /* Text/foreground color */
}

.developers-page #developer-categories {
  padding-top: 3.5rem; /* Sets the padding-top property */
}

.developers-page #developer-categories h2 {
  font-size: 2rem; /* Size of text */
  margin-bottom: 0.75rem; /* Sets the margin-bottom property */
}

.developers-page .section-intro {
  max-width: 720px; /* Maximum width constraint */
}

.developers-page .section-group {
  margin-top: 2.75rem; /* Sets the margin-top property */
}

.developers-page .section-group h3 {
  font-size: 1.3rem; /* Size of text */
  margin-bottom: 1rem; /* Sets the margin-bottom property */
}

.developers-page .section-group .grid-3 {
  margin-top: 1.2rem; /* Sets the margin-top property */
}

.developers-page .card {
  position: relative; /* Positioning method (fixed, absolute, relative, sticky) */
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease; /* Animation duration and easing */
  cursor: url("../icons/dev-card-cursor.svg"), pointer; /* Mouse cursor style */
}

.developers-page .card:hover {
  transform: translateY(-6px); /* CSS 2D/3D transformation (rotate, scale, translate) */
  border-color: rgba(155, 124, 255, 0.5); /* Sets the border-color property */
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); /* Shadow effect around element */
  background: radial-gradient(circle at top left, rgba(155, 124, 255, 0.12), transparent 55%), var(--card); /* Background color or image */
}

.developers-page .card h4 {
  font-size: 1.05rem; /* Size of text */
  margin-top: 0; /* Sets the margin-top property */
  margin-bottom: 0.6rem; /* Sets the margin-bottom property */
}

.developers-page .card p {
  font-size: 0.9rem; /* Size of text */
  color: var(--muted); /* Text/foreground color */
}

.developers-page .card .link {
  margin-top: 0.75rem; /* Sets the margin-top property */
  font-size: 0.88rem; /* Size of text */
}

.developers-page .developers-skill-icon {
  width: 42px; /* Element width size */
  height: 42px; /* Element height size */
  border-radius: 5px; /* Rounded corners of element */
  background: rgba(155, 124, 255, 0.12); /* Background color or image */
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  align-items: center; /* Vertical alignment in flex container */
  justify-content: center; /* Horizontal alignment in flex container */
  margin-bottom: 0.9rem; /* Sets the margin-bottom property */
}

.developers-page .developers-skill-icon img {
  width: 26px; /* Element width size */
  height: 26px; /* Element height size */
  object-fit: contain; /* How image fills container */
}

.developers-page .card:hover .developers-skill-icon {
  background: rgba(155, 124, 255, 0.25); /* Background color or image */
}

.developers-page .developers-process {
  background: var(--bg); /* Background color or image */
}

.developers-page .developers-process-header {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  justify-content: space-between; /* Horizontal alignment in flex container */
  align-items: center; /* Vertical alignment in flex container */
  gap: 1.5rem; /* Space between flex or grid items */
  margin-bottom: 3rem; /* Sets the margin-bottom property */
}

.developers-page .developers-process-header h2 {
  font-size: 2rem; /* Size of text */
  margin: 0; /* External spacing outside element */
}

.developers-page .developers-process-link {
  font-size: 0.9rem; /* Size of text */
  white-space: nowrap; /* How whitespace is handled in text */
}

.developers-page .developers-process-grid {
  display: grid; /* Layout type (flex, grid, block, inline, etc) */
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* Define grid column sizes */
  gap: 1.5rem; /* Space between flex or grid items */
}

.developers-page .developers-process-card {
  background: var(--bg-alt); /* Background color or image */
  border-radius: 5px; /* Rounded corners of element */
  padding: 2.5rem 2rem; /* Internal spacing inside element */
  border: 1px solid var(--border); /* Border around element */
  position: relative; /* Positioning method (fixed, absolute, relative, sticky) */
  overflow: hidden; /* What happens to content that overflows */
  cursor: url("../icons/dev-card-cursor.svg"), pointer; /* Mouse cursor style */
}

.developers-page .developers-process-number {
  font-size: 2.75rem; /* Size of text */
  font-weight: 800; /* Thickness of text (400=normal, 700=bold) */
  color: rgba(184, 192, 217, 0.18); /* Text/foreground color */
  margin-bottom: 1.75rem; /* Sets the margin-bottom property */
}

.developers-page .developers-process-card h3 {
  font-size: 1.2rem; /* Size of text */
  margin: 0 0 1rem; /* External spacing outside element */
}

.developers-page .developers-process-card p {
  font-size: 0.92rem; /* Size of text */
  color: var(--muted); /* Text/foreground color */
  line-height: 1.7; /* Height of text lines */
  margin: 0; /* External spacing outside element */
}

/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 1024px) {
  .developers-page .developers-process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Define grid column sizes */
  }
}

/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 768px) {
  .developers-page .developers-process-header {
    flex-direction: column; /* Direction of flex items (row, column) */
    align-items: flex-start; /* Vertical alignment in flex container */
  }

  .developers-page .developers-process-link {
    margin-top: 0.5rem; /* Sets the margin-top property */
  }

  .developers-page .developers-process-card {
    padding: 2rem 1.5rem; /* Internal spacing inside element */
  }
}

/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 640px) {
  .developers-page .developers-process-grid {
    grid-template-columns: 1fr; /* Define grid column sizes */
  }
}

/* Developers stats strip */
.developers-stats {
  padding: 0 0 3rem; /* Internal spacing inside element */
  background: var(--bg); /* Background color or image */
}

.developers-stats-inner {
  background: var(--bg-alt); /* Background color or image */
  border-radius: 5px; /* Rounded corners of element */
  padding: 1.8rem 2.4rem; /* Internal spacing inside element */
  display: grid; /* Layout type (flex, grid, block, inline, etc) */
  grid-template-columns: repeat(5, minmax(0, 1fr)); /* Define grid column sizes */
  gap: 1.5rem; /* Space between flex or grid items */
  border: 1px solid var(--border); /* Border around element */
}

.developers-stat {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  flex-direction: column; /* Direction of flex items (row, column) */
  justify-content: center; /* Horizontal alignment in flex container */
}

.developers-stat + .developers-stat {
  border-left: 1px solid rgba(255, 255, 255, 0.06); /* Sets the border-left property */
  padding-left: 1.5rem; /* Sets the padding-left property */
}

.developers-stat-main .stat-heading {
  display: block; /* Layout type (flex, grid, block, inline, etc) */
  font-size: 1.1rem; /* Size of text */
  font-weight: 600; /* Thickness of text (400=normal, 700=bold) */
}

.developers-stat-main .stat-subheading {
  display: block; /* Layout type (flex, grid, block, inline, etc) */
  font-size: 1.4rem; /* Size of text */
  font-weight: 700; /* Thickness of text (400=normal, 700=bold) */
}

.developers-stat .stat-number {
  font-size: 1.8rem; /* Size of text */
  font-weight: 700; /* Thickness of text (400=normal, 700=bold) */
  margin-bottom: 0.4rem; /* Sets the margin-bottom property */
  color: #ff3b3b; /* Text/foreground color */
}

.developers-stat .stat-label {
  font-size: 0.9rem; /* Size of text */
  color: var(--muted); /* Text/foreground color */
}

/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 1024px) {
  .developers-stats-inner {
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* Define grid column sizes */
    row-gap: 1.5rem; /* Sets the row-gap property */
  }
}

/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 768px) {
  .developers-stats-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Define grid column sizes */
    padding: 1.5rem 1.8rem; /* Internal spacing inside element */
  }

  .developers-stat + .developers-stat {
    border-left: none; /* Sets the border-left property */
    padding-left: 0; /* Sets the padding-left property */
    border-top: 1px solid rgba(255, 255, 255, 0.06); /* Top border */
    padding-top: 1rem; /* Sets the padding-top property */
  }
}

/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 540px) {
  .developers-stats-inner {
    grid-template-columns: 1fr; /* Define grid column sizes */
  }
}

/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 768px) {
  .developers-page .page-hero {
    text-align: left; /* Text alignment (left, center, right) */
    padding-top: 5rem; /* Sets the padding-top property */
  }

  .developers-page .hero-actions {
    flex-direction: column; /* Direction of flex items (row, column) */
    align-items: stretch; /* Vertical alignment in flex container */
  }

  .developers-page .hero-actions .btn {
    width: 100%; /* Element width size */
  }
}

body.light .trust-logo-item:hover img {
  filter: grayscale(0%) brightness(1); /* Visual filter effects */
}

.trust-stats {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  justify-content: center; /* Horizontal alignment in flex container */
  gap: 4rem; /* Space between flex or grid items */
  flex-wrap: wrap; /* Whether flex items wrap to next line */
}

.trust-stat {
  text-align: center; /* Text alignment (left, center, right) */
}

.stat-number {
  display: block; /* Layout type (flex, grid, block, inline, etc) */
  font-size: 2.5rem; /* Size of text */
  font-weight: 800; /* Thickness of text (400=normal, 700=bold) */
  color: var(--primary); /* Text/foreground color */
  line-height: 1; /* Height of text lines */
}

.stat-label {
  display: block; /* Layout type (flex, grid, block, inline, etc) */
  font-size: 0.9rem; /* Size of text */
  color: var(--muted); /* Text/foreground color */
  margin-top: 0.5rem; /* Sets the margin-top property */
}

/* Engagement Section */
.engagement-section {
  padding: 5rem 0; /* Internal spacing inside element */
  background: var(--bg); /* Background color or image */
}

.engagement-header {
  text-align: center; /* Text alignment (left, center, right) */
  margin-bottom: 4rem; /* Sets the margin-bottom property */
}

.engagement-header h2 {
  font-size: 2.25rem; /* Size of text */
  font-weight: 700; /* Thickness of text (400=normal, 700=bold) */
  margin: 0 0 0.75rem; /* External spacing outside element */
}

/* Engagement Block - Alternating Layout */
.engagement-block {
  display: grid; /* Layout type (flex, grid, block, inline, etc) */
  grid-template-columns: 1fr 1fr; /* Define grid column sizes */
  gap: 4rem; /* Space between flex or grid items */
  align-items: center; /* Vertical alignment in flex container */
  margin-bottom: 5rem; /* Sets the margin-bottom property */
}

.engagement-block.reverse {
  direction: rtl; /* Sets the direction property */
}

.engagement-block.reverse > * {
  direction: ltr; /* Sets the direction property */
}

.engagement-content {
  padding: 1rem 0; /* Internal spacing inside element */
}

.engagement-content h3 {
  font-size: 2.5rem; /* Size of text */
  font-weight: 700; /* Thickness of text (400=normal, 700=bold) */
  margin: 0 0 1.5rem; /* External spacing outside element */
  color: var(--text); /* Text/foreground color */
}

.engagement-content p {
  font-size: 1.05rem; /* Size of text */
  color: var(--muted); /* Text/foreground color */
  line-height: 1.8; /* Height of text lines */
  margin: 0 0 2rem; /* External spacing outside element */
}

.read-more-link {
  display: inline-flex; /* Layout type (flex, grid, block, inline, etc) */
  align-items: center; /* Vertical alignment in flex container */
  gap: 0.75rem; /* Space between flex or grid items */
  font-size: 0.95rem; /* Size of text */
  font-weight: 700; /* Thickness of text (400=normal, 700=bold) */
  color: #3b82f6; /* Text/foreground color */
  text-decoration: none; /* Text decoration (underline, etc) */
  text-transform: uppercase; /* Text transformation (uppercase, lowercase) */
  letter-spacing: 0.5px; /* Space between characters */
  transition: all 0.3s ease; /* Animation duration and easing */
}

.read-more-link:hover {
  color: var(--primary); /* Text/foreground color */
}

.read-more-link .arrows {
  font-size: 0.85rem; /* Size of text */
  letter-spacing: 2px; /* Space between characters */
  transition: transform 0.3s ease; /* Animation duration and easing */
}

.read-more-link:hover .arrows {
  transform: translateX(5px); /* CSS 2D/3D transformation (rotate, scale, translate) */
}

.engagement-image {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  align-items: center; /* Vertical alignment in flex container */
  justify-content: center; /* Horizontal alignment in flex container */
}

.engagement-image img {
  width: 100%; /* Element width size */
  max-width: 550px; /* Maximum width constraint */
  height: auto; /* Element height size */
  border-radius: 5px; /* Rounded corners of element */
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); /* Shadow effect around element */
}

/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 992px) {
  .engagement-block {
    grid-template-columns: 1fr; /* Define grid column sizes */
    gap: 2rem; /* Space between flex or grid items */
  }
  
  .engagement-block.reverse {
    direction: ltr; /* Sets the direction property */
  }
  
  .engagement-content h3 {
    font-size: 2rem; /* Size of text */
  }
  
  .engagement-image {
    order: -1; /* Order of flex item */
  }
}

/* Keep old engagement cards for backward compatibility */
.engagement-cards {
  display: grid; /* Layout type (flex, grid, block, inline, etc) */
  grid-template-columns: repeat(2, 1fr); /* Define grid column sizes */
  gap: 2rem; /* Space between flex or grid items */
  margin-bottom: 3rem; /* Sets the margin-bottom property */
}

/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 768px) {
  .engagement-cards {
    grid-template-columns: 1fr; /* Define grid column sizes */
  }
}

.engagement-card {
  background: var(--bg-alt); /* Background color or image */
  border: 1px solid var(--border); /* Border around element */
  border-radius: 5px; /* Rounded corners of element */
  padding: 2rem; /* Internal spacing inside element */
  transition: all 0.3s ease; /* Animation duration and easing */
}

.engagement-card:hover {
  border-color: rgba(155, 124, 255, 0.4); /* Sets the border-color property */
  transform: translateY(-5px); /* CSS 2D/3D transformation (rotate, scale, translate) */
}

.engagement-icon {
  font-size: 2.5rem; /* Size of text */
  margin-bottom: 1rem; /* Sets the margin-bottom property */
}

.engagement-card h3 {
  font-size: 1.5rem; /* Size of text */
  font-weight: 700; /* Thickness of text (400=normal, 700=bold) */
  margin: 0 0 1rem; /* External spacing outside element */
}

.engagement-card p {
  font-size: 0.95rem; /* Size of text */
  color: var(--muted); /* Text/foreground color */
  line-height: 1.7; /* Height of text lines */
  margin: 0 0 1.5rem; /* External spacing outside element */
}

.engagement-features {
  list-style: none; /* Sets the list-style property */
  padding: 0; /* Internal spacing inside element */
  margin: 0; /* External spacing outside element */
}

.engagement-features li {
  position: relative; /* Positioning method (fixed, absolute, relative, sticky) */
  padding-left: 1.5rem; /* Sets the padding-left property */
  margin-bottom: 0.75rem; /* Sets the margin-bottom property */
  font-size: 0.9rem; /* Size of text */
  color: var(--text); /* Text/foreground color */
}

.engagement-features li::before {
  content: "\2713 "; /* Sets the content property */
  position: absolute; /* Positioning method (fixed, absolute, relative, sticky) */
  left: 0; /* Distance from left edge */
  color: var(--primary); /* Text/foreground color */
  font-weight: bold; /* Thickness of text (400=normal, 700=bold) */
}

/* Comparison Table */
.comparison-table-wrapper {
  overflow-x: auto; /* Horizontal overflow behavior */
  border-radius: 5px; /* Rounded corners of element */
  border: 1px solid var(--border); /* Border around element */
}

.comparison-table {
  width: 100%; /* Element width size */
  border-collapse: collapse; /* Table border collapse style */
  background: var(--bg-alt); /* Background color or image */
}

.comparison-table th,
.comparison-table td {
  padding: 1.25rem 1.5rem; /* Internal spacing inside element */
  text-align: left; /* Text alignment (left, center, right) */
  border-bottom: 1px solid var(--border); /* Bottom border */
}

.comparison-table th {
  background: linear-gradient(135deg, rgba(155, 124, 255, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%); /* Background color or image */
  font-weight: 700; /* Thickness of text (400=normal, 700=bold) */
  font-size: 1rem; /* Size of text */
}

.comparison-table th:first-child {
  width: 200px; /* Element width size */
}

.comparison-table td {
  font-size: 0.9rem; /* Size of text */
  color: var(--muted); /* Text/foreground color */
}

.comparison-table .row-label {
  font-weight: 600; /* Thickness of text (400=normal, 700=bold) */
  color: var(--text); /* Text/foreground color */
  background: rgba(155, 124, 255, 0.05); /* Background color or image */
}

.comparison-table tr:last-child td {
  border-bottom: none; /* Bottom border */
}

.comparison-table tr:hover td {
  background: rgba(155, 124, 255, 0.03); /* Background color or image */
}

/* Process Section */
.process-section {
  padding: 5rem 0; /* Internal spacing inside element */
  background: var(--bg-alt); /* Background color or image */
}

.process-header {
  text-align: center; /* Text alignment (left, center, right) */
  margin-bottom: 4rem; /* Sets the margin-bottom property */
}

.process-header h2 {
  font-size: 2.25rem; /* Size of text */
  font-weight: 700; /* Thickness of text (400=normal, 700=bold) */
  margin: 0 0 0.75rem; /* External spacing outside element */
}

.process-timeline {
  max-width: 800px; /* Maximum width constraint */
  margin: 0 auto; /* External spacing outside element */
  position: relative; /* Positioning method (fixed, absolute, relative, sticky) */
}

.process-timeline::before {
  content: ""; /* Sets the content property */
  position: absolute; /* Positioning method (fixed, absolute, relative, sticky) */
  left: 40px; /* Distance from left edge */
  top: 0; /* Distance from top edge */
  bottom: 0; /* Distance from bottom edge */
  width: 2px; /* Element width size */
  background: linear-gradient(180deg, var(--primary), transparent); /* Background color or image */
}

/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 640px) {
  .process-timeline::before {
    left: 30px; /* Distance from left edge */
  }
}

.process-step {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  gap: 2rem; /* Space between flex or grid items */
  margin-bottom: 2.5rem; /* Sets the margin-bottom property */
  position: relative; /* Positioning method (fixed, absolute, relative, sticky) */
}

.step-number {
  flex-shrink: 0; /* How much flex item shrinks */
  width: 80px; /* Element width size */
  height: 80px; /* Element height size */
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%); /* Background color or image */
  border-radius: 50%; /* Rounded corners of element */
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  align-items: center; /* Vertical alignment in flex container */
  justify-content: center; /* Horizontal alignment in flex container */
  font-size: 1.5rem; /* Size of text */
  font-weight: 800; /* Thickness of text (400=normal, 700=bold) */
  color: #fff; /* Text/foreground color */
  position: relative; /* Positioning method (fixed, absolute, relative, sticky) */
  z-index: 1; /* Stacking order (higher = on top) */
}

/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 640px) {
  .step-number {
    width: 60px; /* Element width size */
    height: 60px; /* Element height size */
    font-size: 1.2rem; /* Size of text */
  }
  
  .process-step {
    gap: 1.5rem; /* Space between flex or grid items */
  }
}

.step-content {
  flex: 1; /* Flex container - flexible box layout */
  padding-top: 0.5rem; /* Sets the padding-top property */
}

.step-content h3 {
  font-size: 1.35rem; /* Size of text */
  font-weight: 700; /* Thickness of text (400=normal, 700=bold) */
  margin: 0 0 0.75rem; /* External spacing outside element */
}

.step-content p {
  font-size: 0.95rem; /* Size of text */
  color: var(--muted); /* Text/foreground color */
  line-height: 1.7; /* Height of text lines */
  margin: 0; /* External spacing outside element */
}

/* Why Us Section - Interactive Slider */
.why-us-section {
  padding: 5rem 0; /* Internal spacing inside element */
  background: var(--bg); /* Background color or image */
}

.why-us-header {
  margin-bottom: 3rem; /* Sets the margin-bottom property */
}

.why-us-header h2 {
  font-size: 2.5rem; /* Size of text */
  font-weight: 700; /* Thickness of text (400=normal, 700=bold) */
  margin: 0; /* External spacing outside element */
}

/* Why Slider Container */
.why-slider {
  display: grid; /* Layout type (flex, grid, block, inline, etc) */
  grid-template-columns: repeat(4, 1fr); /* Define grid column sizes */
  border: 1px solid var(--border); /* Border around element */
  border-radius: 5px; /* Rounded corners of element */
  overflow: hidden; /* What happens to content that overflows */
  background: var(--bg); /* Background color or image */
}

/* Individual Slide */
.why-slide {
  position: relative; /* Positioning method (fixed, absolute, relative, sticky) */
  padding: 1.5rem; /* Internal spacing inside element */
  border-right: 1px solid var(--border); /* Sets the border-right property */
  cursor: pointer; /* Mouse cursor style */
  transition: all 0.4s ease; /* Animation duration and easing */
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  flex-direction: column; /* Direction of flex items (row, column) */
  min-height: 420px; /* Minimum height constraint */
  background: var(--bg); /* Background color or image */
}

.why-slide:last-child {
  border-right: none; /* Sets the border-right property */
}

.why-slide .slide-header {
  margin-bottom: 1.5rem; /* Sets the margin-bottom property */
}

.why-slide .slide-number {
  font-size: 0.9rem; /* Size of text */
  color: var(--muted); /* Text/foreground color */
  font-weight: 500; /* Thickness of text (400=normal, 700=bold) */
}

.why-slide .slide-icon {
  flex: 1; /* Flex container - flexible box layout */
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  align-items: center; /* Vertical alignment in flex container */
  justify-content: center; /* Horizontal alignment in flex container */
  padding: 2rem 0; /* Internal spacing inside element */
}

.why-slide .slide-icon img {
  width: 160px; /* Element width size */
  height: 160px; /* Element height size */
  object-fit: contain; /* How image fills container */
  opacity: 0.85; /* Transparency level (0=invisible, 1=opaque) */
  transition: all 0.3s ease; /* Animation duration and easing */
}

.why-slide:hover .slide-icon img {
  opacity: 1; /* Transparency level (0=invisible, 1=opaque) */
  transform: scale(1.05); /* CSS 2D/3D transformation (rotate, scale, translate) */
}

.why-slide .slide-title {
  font-size: 1.5rem; /* Size of text */
  font-weight: 700; /* Thickness of text (400=normal, 700=bold) */
  color: var(--text); /* Text/foreground color */
  margin: 0; /* External spacing outside element */
  line-height: 1.3; /* Height of text lines */
}

/* Slide Content - Hidden by default */
.why-slide .slide-content {
  display: none; /* Layout type (flex, grid, block, inline, etc) */
  flex-direction: column; /* Direction of flex items (row, column) */
  height: 100%; /* Element height size */
}

.why-slide .slide-text {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  align-items: flex-start; /* Vertical alignment in flex container */
  justify-content: space-between; /* Horizontal alignment in flex container */
  gap: 1rem; /* Space between flex or grid items */
  margin-bottom: 1.5rem; /* Sets the margin-bottom property */
}

.why-slide .slide-text h3 {
  font-size: 1.5rem; /* Size of text */
  font-weight: 700; /* Thickness of text (400=normal, 700=bold) */
  color: #3b82f6; /* Text/foreground color */
  margin: 0; /* External spacing outside element */
  line-height: 1.3; /* Height of text lines */
}

.why-slide .slide-icon-expanded {
  width: 100px; /* Element width size */
  height: 100px; /* Element height size */
  object-fit: contain; /* How image fills container */
  flex-shrink: 0; /* How much flex item shrinks */
}

.why-slide .slide-content p {
  font-size: 0.95rem; /* Size of text */
  color: var(--muted); /* Text/foreground color */
  line-height: 1.75; /* Height of text lines */
  margin: 0; /* External spacing outside element */
  flex: 1; /* Flex container - flexible box layout */
}

.why-slide .slide-nav {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  align-items: center; /* Vertical alignment in flex container */
  justify-content: space-between; /* Horizontal alignment in flex container */
  margin-top: 2rem; /* Sets the margin-top property */
  padding-top: 1rem; /* Sets the padding-top property */
}

.why-slide .slide-counter {
  font-size: 0.9rem; /* Size of text */
  color: var(--muted); /* Text/foreground color */
}

.why-slide .slide-counter strong {
  color: var(--text); /* Text/foreground color */
}

.why-slide .slide-arrows {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  gap: 1rem; /* Space between flex or grid items */
}

.why-slide .slide-arrow {
  background: transparent; /* Background color or image */
  border: none; /* Border around element */
  color: var(--muted); /* Text/foreground color */
  font-size: 1.25rem; /* Size of text */
  cursor: pointer; /* Mouse cursor style */
  padding: 0.25rem; /* Internal spacing inside element */
  transition: color 0.3s ease; /* Animation duration and easing */
}

.why-slide .slide-arrow:hover {
  color: var(--text); /* Text/foreground color */
}

/* Active Slide State */
.why-slide.active {
  flex: 2; /* Flex container - flexible box layout */
  background: var(--bg-alt); /* Background color or image */
}

.why-slide.active .slide-icon,
.why-slide.active .slide-title {
  display: none; /* Layout type (flex, grid, block, inline, etc) */
}

.why-slide.active .slide-content {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
}

/* Responsive Design */
/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 1200px) {
  .why-slider {
    grid-template-columns: repeat(2, 1fr); /* Define grid column sizes */
  }
  
  .why-slide {
    border-bottom: 1px solid var(--border); /* Bottom border */
  }
  
  .why-slide:nth-child(2) {
    border-right: none; /* Sets the border-right property */
  }
  
  .why-slide:nth-child(3),
  .why-slide:nth-child(4) {
    border-bottom: none; /* Bottom border */
  }
  
  .why-slide:nth-child(4) {
    border-right: none; /* Sets the border-right property */
  }
}

/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 1024px) {
  .why-slider {
    grid-template-columns: 1fr; /* Define grid column sizes */
  }
  
  .why-slide {
    min-height: auto; /* Minimum height constraint */
    border-right: none; /* Sets the border-right property */
    border-bottom: 1px solid var(--border); /* Bottom border */
  }
  
  .why-slide:last-child {
    border-bottom: none; /* Bottom border */
  }
  
  .why-slide .slide-icon img {
    width: 100px; /* Element width size */
    height: 100px; /* Element height size */
  }
  
  .why-slide.active {
    flex: 1; /* Flex container - flexible box layout */
  }
}

/* Button Large */
.btn-lg {
  padding: 1rem 2rem; /* Internal spacing inside element */
  font-size: 1rem; /* Size of text */
}

/* Services Page Grid - Extended showcase styles */
.services-page-grid {
  padding-top: 0; /* Sets the padding-top property */
}

.services-page-grid .services-showcase-grid {
  grid-template-columns: repeat(3, 1fr); /* Define grid column sizes */
}

/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 1024px) {
  .services-page-grid .services-showcase-grid {
    grid-template-columns: repeat(2, 1fr); /* Define grid column sizes */
  }
}

/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 640px) {
  .services-page-grid .services-showcase-grid {
    grid-template-columns: 1fr; /* Define grid column sizes */
  }
}

/* Allow anchor tags to use service-showcase-card styles */
a.service-showcase-card {
  text-decoration: none; /* Text decoration (underline, etc) */
  color: inherit; /* Text/foreground color */
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  flex-direction: column; /* Direction of flex items (row, column) */
}

a.service-showcase-card:hover {
  transform: translateY(-4px); /* CSS 2D/3D transformation (rotate, scale, translate) */
  border-color: rgba(155, 124, 255, 0.35); /* Sets the border-color property */
  box-shadow: 0 18px 36px rgba(15, 18, 32, 0.15); /* Shadow effect around element */
}

/* ================================================
   COMPREHENSIVE MOBILE RESPONSIVENESS
   ================================================ */

/* Extra Small Devices (phones, 480px and below) */
/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 480px) {
  /* Global */
  .container {
    padding: 0 1rem; /* Internal spacing inside element */
  }
  
  /* Typography */
  h1, .hero-content h1, .services-hero h1 {
    font-size: 1.75rem !important; /* Size of text */
    line-height: 1.2 !important; /* Height of text lines */
  }
  
  h2, .section-header h2 {
    font-size: 1.5rem !important; /* Size of text */
  }
  
  h3 {
    font-size: 1.15rem !important; /* Size of text */
  }
  
  p, .hero-content p {
    font-size: 0.9rem !important; /* Size of text */
  }
  
  /* Hero Section */
  .services-hero {
    padding: 6rem 0 3rem !important; /* Internal spacing inside element */
    min-height: auto !important; /* Minimum height constraint */
  }
  
  .services-hero .container {
    padding: 0 1rem; /* Internal spacing inside element */
  }
  
  .hero-badges {
    flex-direction: column; /* Direction of flex items (row, column) */
    gap: 0.5rem !important; /* Space between flex or grid items */
  }
  
  .hero-badge {
    width: 100%; /* Element width size */
    justify-content: center; /* Horizontal alignment in flex container */
  }
  
  .hero-actions {
    flex-direction: column !important; /* Direction of flex items (row, column) */
    gap: 0.75rem !important; /* Space between flex or grid items */
  }
  
  .hero-actions .btn {
    width: 100%; /* Element width size */
    text-align: center; /* Text alignment (left, center, right) */
  }
  
  /* Service Cards */
  .service-showcase-card {
    padding: 1.1rem !important; /* Internal spacing inside element */
  }
  
  .service-showcase-media {
    height: 140px !important; /* Element height size */
    margin: -1.1rem -1.1rem 0 !important; /* External spacing outside element */
  }
  
  .service-showcase-media img {
    width: 100% !important; /* Element width size */
    height: 100% !important; /* Element height size */
    object-fit: cover !important; /* How image fills container */
  }

  .service-showcase-card h3 {
    font-size: 1.05rem !important; /* Size of text */
  }

  .service-showcase-card p {
    font-size: 0.8rem !important; /* Size of text */
  }
  
  /* CTA Banner */
  .services-cta-banner {
    padding: 2.5rem 0 !important; /* Internal spacing inside element */
  }
  
  /* .cta-banner-text h2 / p mobile sizes removed — handled in styles-page.css */
  
  /* Trust Section */
  .trust-badges-section {
    padding: 3rem 0 !important; /* Internal spacing inside element */
  }
  
  .trust-logos {
    gap: 1.5rem !important; /* Space between flex or grid items */
  }
  
  .trust-logo-item img {
    height: 28px !important; /* Element height size */
  }
  
  .trust-stats {
    gap: 1.5rem !important; /* Space between flex or grid items */
  }
  
  .stat-number {
    font-size: 1.75rem !important; /* Size of text */
  }
  
  /* Engagement Section */
  .engagement-section {
    padding: 3rem 0 !important; /* Internal spacing inside element */
  }
  
  .engagement-content h3 {
    font-size: 1.5rem !important; /* Size of text */
  }
  
  .engagement-content p {
    font-size: 0.9rem !important; /* Size of text */
  }
  
  .engagement-image img {
    max-width: 100% !important; /* Maximum width constraint */
  }
  
  /* Comparison Table */
  .comparison-table th,
  .comparison-table td {
    padding: 0.75rem 0.5rem !important; /* Internal spacing inside element */
    font-size: 0.8rem !important; /* Size of text */
  }
  
  .comparison-table th:first-child {
    width: 100px !important; /* Element width size */
  }
  
  /* Process Section */
  .process-section {
    padding: 3rem 0 !important; /* Internal spacing inside element */
  }
  
  .process-timeline::before {
    left: 20px !important; /* Distance from left edge */
  }
  
  .step-number {
    width: 45px !important; /* Element width size */
    height: 45px !important; /* Element height size */
    font-size: 1rem !important; /* Size of text */
  }
  
  .process-step {
    gap: 1rem !important; /* Space between flex or grid items */
  }
  
  .step-content h3 {
    font-size: 1.1rem !important; /* Size of text */
  }
  
  .step-content p {
    font-size: 0.85rem !important; /* Size of text */
  }
  
  /* Buttons */
  .btn {
    padding: 0.75rem 1.25rem !important; /* Internal spacing inside element */
    font-size: 0.9rem !important; /* Size of text */
  }
  
  .btn-lg {
    padding: 0.85rem 1.5rem !important; /* Internal spacing inside element */
  }
  
  /* Footer */
  .site-footer {
    padding: 2rem 0 1.25rem !important; /* Internal spacing inside element */
  }
  
  .footer-grid {
    grid-template-columns: 1fr !important; /* Define grid column sizes */
    gap: 1.25rem !important; /* Space between flex or grid items */
    text-align: left; /* Text alignment (left, center, right) */
  }

  .footer-brand {
    text-align: left; /* Text alignment (left, center, right) */
  }

  .footer-brand p {
    font-size: 0.85rem !important; /* Size of text */
    max-width: 300px; /* Maximum width constraint */
    margin: 0.5rem 0 0; /* External spacing outside element */
  }

  .footer-nav {
    padding-top: 0.5rem; /* Sets the padding-top property */
    border-top: 1px solid rgba(255, 255, 255, 0.06); /* Top border */
  }

  body.light .footer-nav {
    border-top-color: rgba(0, 0, 0, 0.06); /* Sets the border-top-color property */
  }

  .footer-nav h4 {
    font-size: 0.95rem !important; /* Size of text */
    margin-bottom: 0.4rem; /* Sets the margin-bottom property */
  }

  .footer-nav a {
    font-size: 0.85rem !important; /* Size of text */
    padding: 0.2rem 0; /* Internal spacing inside element */
  }

  .footer-bottom {
    margin-top: 1.25rem; /* Sets the margin-top property */
    font-size: 0.8rem; /* Size of text */
  }
}

/* Small Devices (landscape phones, 576px and below) */
/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 576px) {
  /* Hero */
  .services-hero {
    padding: 7rem 0 3rem; /* Internal spacing inside element */
  }
  
  .services-hero h1 {
    font-size: 2rem; /* Size of text */
  }
  
  .hero-badges {
    flex-wrap: wrap; /* Whether flex items wrap to next line */
    justify-content: center; /* Horizontal alignment in flex container */
  }
  
  /* Service Grid */
  .services-showcase-grid,
  .services-main-grid {
    grid-template-columns: 1fr !important; /* Define grid column sizes */
    gap: 1.25rem; /* Space between flex or grid items */
  }
  
  /* Trust Stats */
  .trust-stats {
    flex-direction: column; /* Direction of flex items (row, column) */
    align-items: center; /* Vertical alignment in flex container */
    gap: 1.5rem; /* Space between flex or grid items */
  }
  
  /* Engagement */
  .engagement-block {
    gap: 1.5rem !important; /* Space between flex or grid items */
  }
  
  .read-more-link {
    font-size: 0.85rem !important; /* Size of text */
  }
  
  /* CTA Section */
  .cta-section {
    padding: 3rem 0 !important; /* Internal spacing inside element */
  }
  
  .cta-section h2 {
    font-size: 1.5rem !important; /* Size of text */
  }
}

/* Medium Devices (tablets, 768px and below) */
/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 768px) {
  /* Global sections padding */
  section {
    padding: 3.5rem 0; /* Internal spacing inside element */
  }
  
  /* Header adjustments */
  .site-header {
    padding: 0.75rem 1rem; /* Internal spacing inside element */
  }
  
  /* Hero */
  .services-hero {
    padding: 8rem 0 4rem; /* Internal spacing inside element */
    text-align: center; /* Text alignment (left, center, right) */
  }
  
  .hero-content {
    align-items: center; /* Vertical alignment in flex container */
  }
  
  .hero-actions {
    justify-content: center; /* Horizontal alignment in flex container */
    flex-wrap: wrap; /* Whether flex items wrap to next line */
  }
  
  /* Service Grid */
  .services-showcase-grid,
  .services-main-grid {
    grid-template-columns: 1fr; /* Define grid column sizes */
    gap: 1.5rem; /* Space between flex or grid items */
  }
  
  /* CTA Banner */
  .cta-banner-content {
    flex-direction: column; /* Direction of flex items (row, column) */
    text-align: center; /* Text alignment (left, center, right) */
    gap: 2rem; /* Space between flex or grid items */
  }
  
  .cta-banner-actions {
    width: 100%; /* Element width size */
    justify-content: center; /* Horizontal alignment in flex container */
    flex-wrap: wrap; /* Whether flex items wrap to next line */
  }
  
  /* Trust Badges */
  .trust-logos {
    gap: 2rem; /* Space between flex or grid items */
  }
  
  /* Engagement */
  .engagement-header {
    text-align: center; /* Text alignment (left, center, right) */
  }
  
  .engagement-block {
    grid-template-columns: 1fr; /* Define grid column sizes */
    text-align: center; /* Text alignment (left, center, right) */
  }
  
  .engagement-content {
    order: 2; /* Order of flex item */
  }
  
  .engagement-image {
    order: 1; /* Order of flex item */
  }
  
  .engagement-block.reverse .engagement-content {
    order: 2; /* Order of flex item */
  }
  
  .engagement-block.reverse .engagement-image {
    order: 1; /* Order of flex item */
  }
  
  /* Process */
  .process-header {
    margin-bottom: 2.5rem; /* Sets the margin-bottom property */
  }
  
  /* Footer */
  .footer-grid {
    grid-template-columns: repeat(2, 1fr) !important; /* Define grid column sizes */
    text-align: left; /* Text alignment (left, center, right) */
    gap: 1.5rem; /* Space between flex or grid items */
  }

  .footer-brand {
    grid-column: 1 / -1; /* Which column(s) grid item spans */
    text-align: left; /* Text alignment (left, center, right) */
  }

  .footer-brand p {
    max-width: 400px; /* Maximum width constraint */
    margin: 0.5rem 0 0; /* External spacing outside element */
  }

  .footer-bottom {
    margin-top: 1.5rem; /* Sets the margin-top property */
  }
}

/* Large Devices (desktops, 992px and below) */
/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 992px) {
  /* Service Grid */
  .services-showcase-grid,
  .services-main-grid {
    grid-template-columns: repeat(2, 1fr); /* Define grid column sizes */
  }
  
  /* Engagement */
  .engagement-content h3 {
    font-size: 2rem; /* Size of text */
  }
}

/* Touch Device Optimizations */
/* Responsive design - applies styles at specific screen sizes */
@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets */
  .btn {
    min-height: 48px; /* Minimum height constraint */
    padding: 0.85rem 1.5rem; /* Internal spacing inside element */
  }
  
  .nav-item a {
    padding: 0.75rem 1rem; /* Internal spacing inside element */
  }
  
  .dropdown-item {
    padding: 0.85rem 1rem; /* Internal spacing inside element */
  }
  
  /* Remove hover effects that don't work on touch */
  .service-showcase-card:hover,
  .service-card-pro:hover,
  .engagement-card:hover {
    transform: none; /* CSS 2D/3D transformation (rotate, scale, translate) */
  }
  
  /* Add active states for touch feedback */
  .btn:active {
    transform: scale(0.98); /* CSS 2D/3D transformation (rotate, scale, translate) */
  }
  
  .service-showcase-card:active,
  .service-card-pro:active {
    transform: scale(0.99); /* CSS 2D/3D transformation (rotate, scale, translate) */
    border-color: rgba(155, 124, 255, 0.4); /* Sets the border-color property */
  }
}

/* Landscape Mobile */
/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 812px) and (orientation: landscape) {
  .services-hero {
    padding: 5rem 0 2.5rem; /* Internal spacing inside element */
    min-height: auto; /* Minimum height constraint */
  }
  
  .hero-badges {
    flex-direction: row; /* Direction of flex items (row, column) */
    flex-wrap: wrap; /* Whether flex items wrap to next line */
  }
}

/* Safe area for notched devices */
/* */
@supports (padding: max(0px)) {
  .site-header {
    padding-left: max(1rem, env(safe-area-inset-left)); /* Sets the padding-left property */
    padding-right: max(1rem, env(safe-area-inset-right)); /* Sets the padding-right property */
  }
  
  .site-footer {
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); /* Sets the padding-bottom property */
  }
}

/* Print styles */
/* Responsive design - applies styles at specific screen sizes */
@media print {
  .site-header,
  .site-footer,
  .services-cta-banner,
  .cta-section {
    display: none !important; /* Layout type (flex, grid, block, inline, etc) */
  }
  
  .services-hero {
    padding: 2rem 0; /* Internal spacing inside element */
  }
  
  * {
    background: white !important; /* Background color or image */
    color: black !important; /* Text/foreground color */
  }
}
/* ========== Cookie Consent Banner ========== */
.cookie-consent {
  position: fixed; /* Positioning method (fixed, absolute, relative, sticky) */
  bottom: 0; /* Distance from bottom edge */
  left: 0; /* Distance from left edge */
  right: 0; /* Distance from right edge */
  z-index: 99999; /* Stacking order (higher = on top) */
  transform: translateY(100%); /* CSS 2D/3D transformation (rotate, scale, translate) */
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Animation duration and easing */
  padding: 0 20px 20px; /* Internal spacing inside element */
  pointer-events: none; /* Whether element responds to pointer events */
}
.cookie-consent.visible {
  transform: translateY(0); /* CSS 2D/3D transformation (rotate, scale, translate) */
  pointer-events: auto; /* Whether element responds to pointer events */
}
.cookie-consent-inner {
  max-width: 1200px; /* Maximum width constraint */
  margin: 0 auto; /* External spacing outside element */
  background: var(--card, #1a1a2e); /* Background color or image */
  border: 1px solid var(--border, rgba(255,255,255,0.08)); /* Border around element */
  border-radius: 5px; /* Rounded corners of element */
  padding: 24px 32px; /* Internal spacing inside element */
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  align-items: center; /* Vertical alignment in flex container */
  gap: 24px; /* Space between flex or grid items */
  box-shadow: 0 -4px 30px rgba(0,0,0,0.25); /* Shadow effect around element */
  backdrop-filter: blur(12px); /* Blur/filter effect on background */
}
.cookie-consent-icon {
  flex-shrink: 0; /* How much flex item shrinks */
  width: 44px; /* Element width size */
  height: 44px; /* Element height size */
  background: rgba(59,130,246,0.12); /* Background color or image */
  border-radius: 5px; /* Rounded corners of element */
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  align-items: center; /* Vertical alignment in flex container */
  justify-content: center; /* Horizontal alignment in flex container */
}
.cookie-consent-icon svg {
  width: 24px; /* Element width size */
  height: 24px; /* Element height size */
  fill: none; /* Sets the fill property */
  stroke: #3b82f6; /* Sets the stroke property */
  stroke-width: 2; /* Sets the stroke-width property */
  stroke-linecap: round; /* Sets the stroke-linecap property */
  stroke-linejoin: round; /* Sets the stroke-linejoin property */
}
.cookie-consent-text {
  flex: 1; /* Flex container - flexible box layout */
  min-width: 0; /* Minimum width constraint */
}
.cookie-consent-text p {
  margin: 0; /* External spacing outside element */
  font-size: 0.92rem; /* Size of text */
  line-height: 1.6; /* Height of text lines */
  color: var(--muted, rgba(255,255,255,0.6)); /* Text/foreground color */
}
.cookie-consent-text p strong {
  color: var(--text, #fff); /* Text/foreground color */
  font-weight: 700; /* Thickness of text (400=normal, 700=bold) */
}
.cookie-consent-text a {
  color: #3b82f6; /* Text/foreground color */
  text-decoration: underline; /* Text decoration (underline, etc) */
  font-weight: 500; /* Thickness of text (400=normal, 700=bold) */
}
.cookie-consent-text a:hover {
  color: #60a5fa; /* Text/foreground color */
}
.cookie-consent-actions {
  display: flex; /* Layout type (flex, grid, block, inline, etc) */
  gap: 10px; /* Space between flex or grid items */
  flex-shrink: 0; /* How much flex item shrinks */
}
.cookie-btn {
  padding: 10px 22px; /* Internal spacing inside element */
  border-radius: 5px; /* Rounded corners of element */
  font-size: 0.88rem; /* Size of text */
  font-weight: 600; /* Thickness of text (400=normal, 700=bold) */
  cursor: pointer; /* Mouse cursor style */
  border: none; /* Border around element */
  transition: all 0.25s; /* Animation duration and easing */
  white-space: nowrap; /* How whitespace is handled in text */
  font-family: inherit; /* Font family to use */
}
.cookie-btn-reject {
  background: transparent; /* Background color or image */
  border: 1.5px solid var(--border, rgba(255,255,255,0.15)); /* Border around element */
  color: var(--muted, rgba(255,255,255,0.6)); /* Text/foreground color */
}
.cookie-btn-reject:hover {
  border-color: var(--text, #fff); /* Sets the border-color property */
  color: var(--text, #fff); /* Text/foreground color */
}
.cookie-btn-accept {
  background: #3b82f6; /* Background color or image */
  color: #fff; /* Text/foreground color */
  box-shadow: 0 2px 12px rgba(59,130,246,0.35); /* Shadow effect around element */
}
.cookie-btn-accept:hover {
  background: #2563eb; /* Background color or image */
  box-shadow: 0 4px 20px rgba(59,130,246,0.5); /* Shadow effect around element */
  transform: translateY(-1px); /* CSS 2D/3D transformation (rotate, scale, translate) */
}
/* Responsive design - applies styles at specific screen sizes */
@media (max-width: 768px) {
  .cookie-consent {
    padding: 0 12px 12px; /* Internal spacing inside element */
  }
  .cookie-consent-inner {
    flex-direction: column; /* Direction of flex items (row, column) */
    padding: 20px; /* Internal spacing inside element */
    gap: 16px; /* Space between flex or grid items */
    text-align: center; /* Text alignment (left, center, right) */
  }
  .cookie-consent-icon {
    margin: 0 auto; /* External spacing outside element */
  }
  .cookie-consent-actions {
    width: 100%; /* Element width size */
    flex-direction: column; /* Direction of flex items (row, column) */
  }
  .cookie-btn {
    width: 100%; /* Element width size */
    padding: 12px; /* Internal spacing inside element */
  }
}
/* Responsive design - applies styles at specific screen sizes */
@media print {
  .cookie-consent { display: none !important; } /* Sets the .cookie-consent { display property */
}

/* ============================================================
   Contact button styled like the footer "Request a call" button:
   transparent, white outline, white text, rectangular.
   Appended last so it wins over earlier round/filled rules.
   ============================================================ */
@media (min-width: 1280px) {
  .site-header .nav-actions a.contact-btn {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    padding: 9px 24px !important;
    gap: 8px !important;
    border-radius: 2px !important;
    background: transparent !important;
    background-image: none !important;
    border: 1px solid #ffffff !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: 0.01em !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: background 0.16s ease, color 0.16s ease !important;
  }
  .site-header .nav-actions a.contact-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
    transform: none !important;
    box-shadow: none !important;
  }
  .site-header .nav-actions a.contact-btn .contact-text {
    display: inline !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }
  /* Lucide phone icon before the text (mask + currentColor defined on the base ::before rule) */
  .site-header .nav-actions a.contact-btn::before {
    display: inline-block !important;
    width: 15px !important;
    height: 15px !important;
    margin: 0 !important;
  }
  /* same outlined style in dark mode */
  body:not(.light) .site-header .nav-actions a.contact-btn {
    background: transparent !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
  }
  body:not(.light) .site-header .nav-actions a.contact-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
  }
}