/* ============================================
   AGOU SOLUTIONS - Modern Animations
   ============================================ */

/* --- Keyframe Animations --- */

@keyframes float-up-down {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-20px) rotate(3deg);
  }
}

@keyframes float-diagonal {

  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  25% {
    transform: translate(10px, -15px) rotate(5deg);
  }

  50% {
    transform: translate(-5px, -25px) rotate(-3deg);
  }

  75% {
    transform: translate(-15px, -10px) rotate(2deg);
  }
}

@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes spin-reverse {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

@keyframes morph-blob {

  0%,
  100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }

  25% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }

  50% {
    border-radius: 50% 60% 30% 60% / 30% 50% 70% 60%;
  }

  75% {
    border-radius: 60% 30% 60% 40% / 70% 50% 40% 60%;
  }
}

@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes slide-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes glow-pulse {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(234, 179, 8, 0.3);
  }

  50% {
    box-shadow: 0 0 40px rgba(234, 179, 8, 0.6), 0 0 80px rgba(234, 179, 8, 0.2);
  }
}

@keyframes dash-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

@keyframes orbit {
  from {
    transform: rotate(0deg) translateX(120px) rotate(0deg);
  }

  to {
    transform: rotate(360deg) translateX(120px) rotate(-360deg);
  }
}

@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 0.4;
  }

  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

@keyframes tilt-float {

  0%,
  100% {
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translateY(0);
  }

  25% {
    transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) translateY(-8px);
  }

  50% {
    transform: perspective(1000px) rotateX(-1deg) rotateY(3deg) translateY(-15px);
  }

  75% {
    transform: perspective(1000px) rotateX(1deg) rotateY(-1deg) translateY(-5px);
  }
}

/* --- Floating Geometric Shapes (Hero) --- */

/* Hero content must sit above all decorative layers */
#home .max-w-7xl {
  position: relative;
  z-index: 10;
}

/* Unicorn Studio background */
.unicorn-bg {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  pointer-events: none;
}

.unicorn-bg canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.hero-shapes-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}

.geo-shape {
  position: absolute;
  opacity: 0.2;
}

/* Hexagon */
.geo-hexagon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #eab308, #f59e0b);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  top: 15%;
  right: 15%;
  animation: float-diagonal 8s ease-in-out infinite, spin-slow 20s linear infinite;
}

.geo-hexagon-2 {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #eab308, #f59e0b);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  bottom: 25%;
  left: 8%;
  animation: float-up-down 6s ease-in-out infinite 1s, spin-reverse 15s linear infinite;
  opacity: 0.08;
}

/* Triangle */
.geo-triangle {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #eab308, #fbbf24);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  top: 40%;
  right: 8%;
  animation: float-up-down 7s ease-in-out infinite 0.5s, spin-slow 25s linear infinite;
}

.geo-triangle-2 {
  width: 35px;
  height: 35px;
  background: linear-gradient(135deg, #fbbf24, #eab308);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  top: 60%;
  left: 20%;
  animation: float-diagonal 9s ease-in-out infinite 2s, spin-reverse 18s linear infinite;
  opacity: 0.1;
}

/* Diamond */
.geo-diamond {
  width: 45px;
  height: 45px;
  background: linear-gradient(135deg, #eab308, #f59e0b);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  bottom: 15%;
  right: 25%;
  animation: float-diagonal 10s ease-in-out infinite 1.5s, spin-slow 22s linear infinite;
}

/* Cross / Plus */
.geo-cross {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #eab308, #fbbf24);
  clip-path: polygon(35% 0%, 65% 0%, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0% 65%, 0% 35%, 35% 35%);
  top: 25%;
  left: 30%;
  animation: float-up-down 6.5s ease-in-out infinite 0.8s, spin-slow 30s linear infinite;
  opacity: 0.1;
}

/* Small dots */
.geo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #eab308;
}

.geo-dot-1 {
  top: 20%;
  left: 45%;
  animation: float-up-down 4s ease-in-out infinite;
  opacity: 0.2;
}

.geo-dot-2 {
  top: 55%;
  right: 35%;
  animation: float-up-down 5s ease-in-out infinite 1s;
  opacity: 0.15;
}

.geo-dot-3 {
  bottom: 30%;
  left: 40%;
  animation: float-up-down 3.5s ease-in-out infinite 0.5s;
  opacity: 0.18;
}

.geo-dot-4 {
  top: 35%;
  right: 45%;
  animation: float-up-down 4.5s ease-in-out infinite 2s;
  opacity: 0.12;
}

/* --- Animated Morphing Blob --- */

.hero-blob {
  position: absolute;
  width: 450px;
  height: 450px;
  background: rgba(234, 179, 8, 0.25);
  animation: morph-blob 12s ease-in-out infinite;
  filter: blur(30px);
  top: 10%;
  right: 5%;
  z-index: 5;
  pointer-events: none;
}

.hero-blob-2 {
  position: absolute;
  width: 350px;
  height: 350px;
  background: rgba(234, 179, 8, 0.2);
  animation: morph-blob 15s ease-in-out infinite 3s;
  filter: blur(35px);
  bottom: 5%;
  left: 5%;
  z-index: 5;
  pointer-events: none;
}

/* Light-mode blobs for service pages with light backgrounds */
.hero-blob--light {
  background: rgba(234, 179, 8, 0.12) !important;
  filter: blur(40px) !important;
}

.hero-blob-2--light {
  background: rgba(234, 179, 8, 0.08) !important;
  filter: blur(45px) !important;
}

/* --- Animated Gradient Text --- */

.gradient-text-animated {
  background: linear-gradient(90deg,
      #eab308 0%,
      #fbbf24 25%,
      #f59e0b 50%,
      #fbbf24 75%,
      #eab308 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 4s ease-in-out infinite;
}

/* --- Marquee / Ticker Strip --- */

/* Push marquee to bottom of the hero viewport */
#home {
  display: flex !important;
  flex-direction: column !important;
}
#home > .max-w-7xl {
  flex: 1;
  display: flex;
  align-items: center;
}
#home > .marquee-strip {
  width: 100%;
  margin-top: auto;
}

/* Remove hero bottom padding so marquee flush at bottom */
#home {
  padding-bottom: 0 !important;
}

.marquee-strip {
  overflow: hidden;
  background: linear-gradient(90deg, #1a1a2e 0%, #16213e 50%, #1a1a2e 100%);
  padding: 16px 0;
  border-top: 1px solid rgba(234, 179, 8, 0.15);
  border-bottom: 1px solid rgba(234, 179, 8, 0.15);
  position: relative;
}

.marquee-strip::before,
.marquee-strip::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}

.marquee-strip::before {
  left: 0;
  background: linear-gradient(to right, #1a1a2e, transparent);
}

.marquee-strip::after {
  right: 0;
  background: linear-gradient(to left, #1a1a2e, transparent);
}

.marquee-track {
  display: flex;
  animation: slide-left 30s linear infinite;
  width: max-content;
}

/* hover pause removed — marquee now scrolls continuously */

.marquee-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 32px;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: color 0.3s;
}

.marquee-item:hover {
  color: #eab308;
}

.marquee-item svg {
  width: 20px;
  height: 20px;
  opacity: 0.7;
}

.marquee-separator {
  color: rgba(234, 179, 8, 0.3);
  padding: 0 8px;
  font-size: 8px;
}

/* --- Glowing CTA Button Enhancement --- */

.btn-glow {
  position: relative;
}

.btn-glow::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, #eab308, #f59e0b, #eab308);
  z-index: -1;
  animation: glow-pulse 2s ease-in-out infinite;
  opacity: 0.5;
}

/* --- Orbiting Ring (Hero) --- */

.orbit-ring {
  position: absolute;
  width: 240px;
  height: 240px;
  border: 1px solid rgba(234, 179, 8, 0.2);
  border-radius: 50%;
  top: 50%;
  right: 10%;
  transform: translate(50%, -50%);
  pointer-events: none;
  z-index: 4;
}

.orbit-ring::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: #eab308;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin: -6px 0 0 -6px;
  animation: orbit 8s linear infinite;
  box-shadow: 0 0 15px rgba(234, 179, 8, 0.5);
}

.orbit-ring-2 {
  position: absolute;
  width: 360px;
  height: 360px;
  border: 1px dashed rgba(234, 179, 8, 0.12);
  border-radius: 50%;
  top: 50%;
  right: 10%;
  transform: translate(50%, -50%);
  pointer-events: none;
  z-index: 4;
}

.orbit-ring-2::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: #fbbf24;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin: -4px 0 0 -4px;
  animation: orbit 12s linear infinite reverse;
  box-shadow: 0 0 10px rgba(234, 179, 8, 0.4);
}

/* --- Ripple Effect (Behind Stats) --- */

.ripple-container {
  position: relative;
}

.ripple-container::before,
.ripple-container::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(234, 179, 8, 0.2);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: ripple 3s ease-out infinite;
}

.ripple-container::after {
  animation-delay: 1.5s;
}

/* --- Animated Line Decoration --- */

.animated-line {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #eab308, #f59e0b, #eab308);
  background-size: 200% 100%;
  animation: gradient-shift 3s ease-in-out infinite;
  border-radius: 2px;
  margin: 12px auto 0;
}

/* --- Scroll-triggered animation helpers --- */

.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.animated {
  opacity: 1;
  transform: translateY(0);
}

.animate-on-scroll.delay-1 {
  transition-delay: 0.1s;
}

.animate-on-scroll.delay-2 {
  transition-delay: 0.2s;
}

.animate-on-scroll.delay-3 {
  transition-delay: 0.3s;
}

.animate-on-scroll.delay-4 {
  transition-delay: 0.4s;
}

/* --- Fix heading line-height on webdesign city pages --- */
/* Prevents bold wrapped headings from overlapping when Tailwind's
   tight leading (text-4xl = 2.5rem line-height) is too narrow */
.section-badge + h2 {
  line-height: 1.3 !important;
}

/* --- Shimmer effect for badges --- */

.shimmer-badge {
  position: relative;
  overflow: hidden;
}

.shimmer-badge::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: shimmer 3s ease-in-out infinite;
}

/* --- Floating Card Tilt on Hover --- */

.tilt-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tilt-card:hover {
  transform: perspective(1000px) rotateX(-2deg) rotateY(2deg) translateY(-8px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

/* --- Animated Counter --- */

.counter-value {
  display: inline-block;
  transition: all 0.3s ease;
}

/* --- Animated SVG Grid Pattern Overlay --- */

.animated-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(234, 179, 8, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(234, 179, 8, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: float-up-down 20s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* --- Glowing Border Cards --- */

.glow-border-card {
  position: relative;
}

.glow-border-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, transparent 40%, rgba(234, 179, 8, 0.3) 50%, transparent 60%);
  background-size: 300% 300%;
  animation: gradient-shift 4s ease-in-out infinite;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.glow-border-card:hover::before {
  opacity: 1;
}

/* --- Particle dots (floating) --- */

@keyframes particle-float {

  0%,
  100% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }

  10% {
    opacity: 0.6;
  }

  90% {
    opacity: 0.6;
  }

  100% {
    transform: translateY(-100vh) translateX(20px);
    opacity: 0;
  }
}

.particle-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #eab308;
  border-radius: 50%;
  bottom: -10px;
}

.particle:nth-child(1) {
  left: 10%;
  animation: particle-float 12s linear infinite 0s;
}

.particle:nth-child(2) {
  left: 20%;
  animation: particle-float 10s linear infinite 2s;
  width: 2px;
  height: 2px;
}

.particle:nth-child(3) {
  left: 35%;
  animation: particle-float 14s linear infinite 4s;
}

.particle:nth-child(4) {
  left: 50%;
  animation: particle-float 11s linear infinite 1s;
  width: 4px;
  height: 4px;
}

.particle:nth-child(5) {
  left: 65%;
  animation: particle-float 13s linear infinite 3s;
  width: 2px;
  height: 2px;
}

.particle:nth-child(6) {
  left: 80%;
  animation: particle-float 9s linear infinite 5s;
}

.particle:nth-child(7) {
  left: 90%;
  animation: particle-float 15s linear infinite 2.5s;
  width: 2px;
  height: 2px;
}

.particle:nth-child(8) {
  left: 5%;
  animation: particle-float 11s linear infinite 6s;
  width: 4px;
  height: 4px;
}

.particle:nth-child(9) {
  left: 45%;
  animation: particle-float 10s linear infinite 7s;
}

.particle:nth-child(10) {
  left: 75%;
  animation: particle-float 12s linear infinite 4.5s;
  width: 2px;
  height: 2px;
}

/* --- Smooth Section Reveal --- */

.section-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Mouse-follow glow (applied via JS) --- */

.mouse-glow {
  position: fixed;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(234, 179, 8, 0.18) 0%, rgba(234, 179, 8, 0.06) 40%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s;
  mix-blend-mode: overlay;
}

/* --- Premium About Info Box --- */

@keyframes about-border-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes about-scanline {
  0% {
    top: -30%;
  }

  100% {
    top: 130%;
  }
}

@keyframes about-float-dot {

  0%,
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.3;
  }

  50% {
    transform: translateY(-12px) scale(1.3);
    opacity: 0.7;
  }
}

@keyframes about-icon-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.4);
  }

  50% {
    box-shadow: 0 0 20px 4px rgba(234, 179, 8, 0.15);
  }
}

.about-box {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(234, 179, 8, 0.15);
  box-shadow:
    0 25px 60px -12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Animated gradient border glow */
.about-box::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(from 0deg,
      transparent 0%,
      rgba(234, 179, 8, 0.4) 10%,
      transparent 20%,
      transparent 50%,
      rgba(234, 179, 8, 0.2) 60%,
      transparent 70%);
  animation: about-border-spin 8s linear infinite;
  z-index: -1;
}

/* Scanline sweep effect */
.about-box::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(180deg,
      transparent,
      rgba(234, 179, 8, 0.04),
      transparent);
  animation: about-scanline 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

/* Glassmorphism inner overlay */
.about-box-glass {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.03) 0%,
      transparent 50%);
  pointer-events: none;
}

/* Floating decorative dots */
.about-box-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.about-box-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #eab308;
  opacity: 0.2;
}

.about-box-dot:nth-child(1) {
  top: 12%;
  right: 15%;
  animation: about-float-dot 3s ease-in-out infinite 0s;
}

.about-box-dot:nth-child(2) {
  top: 45%;
  right: 8%;
  animation: about-float-dot 4s ease-in-out infinite 1s;
  width: 4px;
  height: 4px;
}

.about-box-dot:nth-child(3) {
  bottom: 20%;
  right: 22%;
  animation: about-float-dot 3.5s ease-in-out infinite 0.5s;
  width: 5px;
  height: 5px;
}

.about-box-dot:nth-child(4) {
  top: 25%;
  left: 10%;
  animation: about-float-dot 4.5s ease-in-out infinite 2s;
  width: 3px;
  height: 3px;
}

.about-box-dot:nth-child(5) {
  bottom: 35%;
  left: 15%;
  animation: about-float-dot 3.2s ease-in-out infinite 1.5s;
  width: 4px;
  height: 4px;
}

/* Animated icon container */
.about-icon {
  animation: about-icon-pulse 3s ease-in-out infinite;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-icon:hover {
  transform: scale(1.1) rotate(-5deg);
}

/* Row hover effect */
.about-row {
  position: relative;
  padding: 12px 16px;
  border-radius: 12px;
  transition: all 0.3s ease;
  z-index: 2;
}

.about-row:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateX(8px);
}

.about-row:hover .about-icon {
  box-shadow: 0 0 25px 6px rgba(234, 179, 8, 0.25);
}

/* Corner accent */
.about-corner {
  position: absolute;
  width: 60px;
  height: 60px;
  pointer-events: none;
  z-index: 1;
}

.about-corner--tl {
  top: 0;
  left: 0;
  border-top: 2px solid rgba(234, 179, 8, 0.3);
  border-left: 2px solid rgba(234, 179, 8, 0.3);
  border-radius: 16px 0 0 0;
}

.about-corner--br {
  bottom: 0;
  right: 0;
  border-bottom: 2px solid rgba(234, 179, 8, 0.3);
  border-right: 2px solid rgba(234, 179, 8, 0.3);
  border-radius: 0 0 16px 0;
}

/* --- About Feature Box (redesigned) --- */

.about-feature-box {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.about-feature-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.about-feature-row {
  transition: all 0.3s ease;
}

.about-feature-row:hover {
  background: rgba(255, 255, 255, 0.04);
  transform: translateX(6px);
}

.about-feature-row:hover>div:first-child {
  box-shadow: 0 0 28px rgba(234, 179, 8, 0.5), 0 6px 16px rgba(234, 179, 8, 0.3) !important;
  transform: scale(1.05);
  transition: all 0.3s ease;
}

/* --- Responsive adjustments --- */

@media (max-width: 768px) {
  .hero-shapes-container .geo-shape {
    transform: scale(0.7);
  }

  .orbit-ring,
  .orbit-ring-2 {
    display: none;
  }

  .hero-blob,
  .hero-blob-2 {
    width: 200px;
    height: 200px;
  }

  .marquee-item {
    padding: 0 20px;
    font-size: 12px;
  }

  .mouse-glow {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   RESPONSIVE FIXES — ALL PAGES, ALL SECTIONS
   ============================================ */

/* =============================================
   EXTRA-LARGE SCREENS (1536px+)
   ============================================= */
@media (min-width: 1536px) {

  /* --- Global containers --- */
  .max-w-7xl {
    max-width: 82rem !important; /* ~1312px – comfortable for laptop */
  }

  /* --- Hero (homepage #home) --- */
  #home h1 {
    font-size: 3.75rem !important;
    line-height: 1.15 !important;
  }
  #home h1 + p {
    font-size: 1.125rem !important;
    line-height: 1.75 !important;
    max-width: 34rem !important;
  }
  #home .flex.flex-wrap.gap-10 span.block {
    font-size: 2rem !important;
  }

  /* --- Service page heroes (no #home id) --- */
  main > section:first-of-type h1 {
    font-size: 3.5rem !important;
    line-height: 1.15 !important;
  }

  /* --- Section headings (all pages) --- */
  .section-title {
    font-size: 2.25rem !important;
    line-height: 1.2 !important;
  }
  .section-description {
    font-size: 1.05rem !important;
  }
  .section-badge {
    font-size: 0.85rem !important;
    padding: 0.4rem 1rem !important;
  }

  /* --- h2 / h3 headings (all pages) --- */
  h2.font-heading {
    font-size: 2.25rem !important;
  }
  h3.font-heading {
    font-size: 1.25rem !important;
  }

  /* --- Section padding --- */
  .py-24 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
  .py-20 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }

  /* --- Cards & content blocks --- */
  .relative.p-8.rounded-xl {
    padding: 2rem !important;
  }
  .bg-gray-50.rounded-xl.p-8 {
    padding: 2rem !important;
  }

  /* --- Text scaling --- */
  .text-gray-600 {
    font-size: 1rem !important;
  }

  /* --- Grids --- */
  .grid.gap-6 {
    gap: 1.75rem !important;
  }
  .grid.gap-8 {
    gap: 2rem !important;
  }
  .grid.gap-16 {
    gap: 4rem !important;
  }

  /* --- Contact form --- */
  #contact .bg-white.rounded-xl {
    padding: 2.5rem !important;
  }
  #contact input,
  #contact select,
  #contact textarea {
    font-size: 1rem !important;
    padding: 1rem 1.125rem !important;
  }

  /* --- Footer --- */
  footer {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
  footer h4 {
    font-size: 1.05rem !important;
  }

  /* --- Process step circles --- */
  .inline-flex.items-center.justify-center.w-20.h-20 {
    width: 5rem !important;
    height: 5rem !important;
    font-size: 1.375rem !important;
  }

  /* --- Buttons --- */
  .btn-lg {
    padding: 0.875rem 2rem !important;
    font-size: 1rem !important;
  }
  .btn {
    font-size: 0.95rem !important;
  }

  /* --- About feature box --- */
  .about-feature-box {
    max-width: 26rem !important;
  }

  /* --- CTA section --- */
  .bg-gradient-to-br.from-secondary h2 {
    font-size: 2.25rem !important;
  }
  .bg-gradient-to-br.from-secondary .text-lg {
    font-size: 1.1rem !important;
  }

  /* --- Header nav --- */
  header .max-w-7xl {
    max-width: 82rem !important;
  }
}

/* =============================================
   VERY LARGE SCREENS (1920px+)
   ============================================= */
@media (min-width: 1920px) {

  /* --- Global containers --- */
  .max-w-7xl {
    max-width: 88rem !important; /* ~1408px */
  }
  .max-w-4xl {
    max-width: 66rem !important;
  }
  .max-w-3xl {
    max-width: 54rem !important;
  }

  /* --- Hero (homepage) --- */
  #home h1 {
    font-size: 4.25rem !important;
    line-height: 1.1 !important;
  }
  #home h1 + p {
    font-size: 1.2rem !important;
    max-width: 38rem !important;
  }
  #home .btn-lg {
    padding: 1rem 2.25rem !important;
    font-size: 1.05rem !important;
  }
  #home .flex.flex-wrap.gap-10 span.block {
    font-size: 2.25rem !important;
  }
  #home .max-w-md {
    max-width: 30rem !important;
  }

  /* --- Service page heroes --- */
  main > section:first-of-type h1 {
    font-size: 4rem !important;
  }
  main > section:first-of-type p.text-xl,
  main > section:first-of-type p.text-lg {
    font-size: 1.2rem !important;
  }

  /* --- Section headings --- */
  .section-title {
    font-size: 2.5rem !important;
  }
  .section-description {
    font-size: 1.1rem !important;
  }

  /* --- h2 / h3 --- */
  h2.font-heading {
    font-size: 2.5rem !important;
    line-height: 1.3 !important;
  }
  h3.font-heading {
    font-size: 1.35rem !important;
  }

  /* --- Section padding --- */
  .py-24 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
  .py-20 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }

  /* --- Cards --- */
  .relative.p-8.rounded-xl {
    padding: 2.25rem !important;
  }
  .bg-gray-50.rounded-xl.p-8,
  .bg-white.rounded-xl.p-8 {
    padding: 2.25rem !important;
  }

  /* --- Text --- */
  .text-gray-600 {
    font-size: 1.05rem !important;
    line-height: 1.75 !important;
  }

  /* --- Grids --- */
  .grid.gap-8 {
    gap: 2.5rem !important;
  }
  .grid.gap-16 {
    gap: 4.5rem !important;
  }

  /* --- About feature box --- */
  .about-feature-box {
    max-width: 28rem !important;
  }

  /* --- Buttons --- */
  .btn-lg {
    padding: 1rem 2.25rem !important;
    font-size: 1.05rem !important;
  }

  /* --- Contact form --- */
  #contact .bg-white.rounded-xl {
    padding: 3rem !important;
  }

  /* --- Footer --- */
  footer {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }

  /* --- Process step circles --- */
  .inline-flex.items-center.justify-center.w-20.h-20 {
    width: 5.5rem !important;
    height: 5.5rem !important;
    font-size: 1.5rem !important;
  }

  /* --- CTA section --- */
  .bg-gradient-to-br.from-secondary h2 {
    font-size: 2.75rem !important;
  }
}

/* =============================================
   ULTRA-WIDE / 4K SCREENS (2560px+)
   ============================================= */
@media (min-width: 2560px) {

  /* --- Global containers --- */
  .max-w-7xl {
    max-width: 120rem !important; /* 1920px */
  }
  .max-w-4xl {
    max-width: 84rem !important;
  }
  .max-w-3xl {
    max-width: 68rem !important;
  }
  .max-w-2xl {
    max-width: 60rem !important;
  }

  /* --- Hero (homepage) --- */
  #home h1 {
    font-size: 6rem !important;
  }
  #home h1 + p {
    font-size: 1.5rem !important;
    max-width: 48rem !important;
  }
  #home .btn-lg {
    padding: 1.25rem 3rem !important;
    font-size: 1.25rem !important;
  }
  #home .flex.flex-wrap.gap-10 span.block {
    font-size: 3rem !important;
  }
  #home .max-w-md {
    max-width: 36rem !important;
  }
  #home .grid {
    gap: 5rem !important;
  }

  /* --- Service page heroes --- */
  main > section:first-of-type h1 {
    font-size: 5.5rem !important;
  }
  main > section:first-of-type p.text-xl,
  main > section:first-of-type p.text-lg {
    font-size: 1.5rem !important;
    line-height: 1.8 !important;
  }

  /* --- Section headings --- */
  .section-title {
    font-size: 3.75rem !important;
  }
  .section-description {
    font-size: 1.375rem !important;
  }
  .section-badge {
    font-size: 1rem !important;
    padding: 0.625rem 1.5rem !important;
  }

  /* --- h2 / h3 --- */
  h2.font-heading {
    font-size: 3.75rem !important;
    line-height: 1.3 !important;
  }
  h3.font-heading {
    font-size: 1.75rem !important;
  }

  /* --- Section padding --- */
  .py-24 {
    padding-top: 10rem !important;
    padding-bottom: 10rem !important;
  }
  .py-20 {
    padding-top: 8rem !important;
    padding-bottom: 8rem !important;
  }

  /* --- Cards --- */
  .relative.p-8.rounded-xl {
    padding: 3rem !important;
  }
  .bg-gray-50.rounded-xl.p-8,
  .bg-white.rounded-xl.p-8 {
    padding: 3rem !important;
  }

  /* --- Text --- */
  .text-gray-600 {
    font-size: 1.2rem !important;
    line-height: 1.85 !important;
  }
  .text-sm {
    font-size: 1.05rem !important;
  }

  /* --- Grids --- */
  .grid.gap-6 {
    gap: 2.5rem !important;
  }
  .grid.gap-8 {
    gap: 3.5rem !important;
  }
  .grid.gap-16 {
    gap: 6rem !important;
  }

  /* --- About feature box --- */
  .about-feature-box {
    max-width: 34rem !important;
  }

  /* --- Buttons --- */
  .btn-lg {
    padding: 1.25rem 3rem !important;
    font-size: 1.2rem !important;
  }
  .btn {
    font-size: 1.1rem !important;
    padding: 0.875rem 2rem !important;
  }

  /* --- Contact form --- */
  #contact .bg-white.rounded-xl {
    padding: 4rem !important;
  }
  #contact input,
  #contact select,
  #contact textarea {
    font-size: 1.15rem !important;
    padding: 1.25rem 1.5rem !important;
  }

  /* --- Footer --- */
  footer {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
  footer h4 {
    font-size: 1.3rem !important;
  }
  footer .text-sm {
    font-size: 1.05rem !important;
  }

  /* --- Process step circles --- */
  .inline-flex.items-center.justify-center.w-20.h-20 {
    width: 7rem !important;
    height: 7rem !important;
    font-size: 1.875rem !important;
  }

  /* --- CTA section --- */
  .bg-gradient-to-br.from-secondary h2 {
    font-size: 3.75rem !important;
  }
  .bg-gradient-to-br.from-secondary .text-lg {
    font-size: 1.4rem !important;
  }

  /* --- Header nav --- */
  header nav {
    height: 5.5rem !important;
  }
  header .text-sm {
    font-size: 1rem !important;
  }

  /* --- Service card icons --- */
  .w-16.h-16 {
    width: 5rem !important;
    height: 5rem !important;
  }
  .w-16.h-16 svg {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }

  /* --- Marquee --- */
  .marquee-item {
    font-size: 1rem !important;
    padding: 0 2.5rem !important;
  }
  .marquee-item svg {
    width: 1.5rem !important;
    height: 1.5rem !important;
  }
}

/* =============================================
   TABLET / iPAD PORTRAIT (768px – 1023px)
   ============================================= */
@media (min-width: 768px) and (max-width: 1023px) {

  /* --- Hero (homepage) --- */
  #home {
    padding-top: 7rem !important;
    padding-bottom: 4rem !important;
  }
  #home h1 {
    font-size: 3rem !important;
    line-height: 1.2 !important;
  }
  #home h1 + p {
    font-size: 1.0625rem !important;
  }
  #home .grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  #home .grid > div:last-child {
    justify-content: center !important;
  }
  #home .max-w-md {
    max-width: 28rem !important;
  }

  /* --- Service page heroes --- */
  main > section:first-of-type h1 {
    font-size: 2.75rem !important;
    line-height: 1.2 !important;
  }
  main > section:first-of-type .grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* --- Section headings --- */
  .section-title {
    font-size: 2rem !important;
  }
  .section-description {
    font-size: 1rem !important;
  }
  h2.font-heading {
    font-size: 2rem !important;
  }

  /* --- Section padding --- */
  .py-24 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
  .py-20 {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  /* --- Service cards: 2 cols --- */
  #services .grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* --- About section: stack --- */
  #about .grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  .about-feature-box {
    max-width: 24rem !important;
    margin: 0 auto !important;
  }

  /* --- Process: 2 cols on tablet --- */
  .grid.lg\:grid-cols-4.gap-8 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* --- Testimonials: 2 cols --- */
  .grid.lg\:grid-cols-3.gap-8 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* --- Contact section: stack --- */
  #contact .grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }

  /* --- Footer layout --- */
  footer .grid.lg\:grid-cols-\[1\.5fr_2fr\] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* --- Service pages: 2-col grids --- */
  .grid.lg\:grid-cols-2.gap-16 {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  .grid.lg\:grid-cols-3.gap-8 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .grid.lg\:grid-cols-5.gap-6 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* =============================================
   iPAD LANDSCAPE / SMALL LAPTOPS (1024px – 1280px)
   ============================================= */
@media (min-width: 1024px) and (max-width: 1280px) {

  #home h1 {
    font-size: 3.25rem !important;
    line-height: 1.2 !important;
  }
  #home .grid {
    gap: 2rem !important;
  }

  /* --- Service page heroes --- */
  main > section:first-of-type h1 {
    font-size: 3rem !important;
  }

  /* --- Grids slightly tighter --- */
  .grid.gap-16 {
    gap: 3rem !important;
  }
  .grid.gap-8 {
    gap: 1.75rem !important;
  }
}

/* =============================================
   MEDIUM LAPTOPS (1281px – 1535px)
   ============================================= */
@media (min-width: 1281px) and (max-width: 1535px) {

  /* Slight heading scale between default and 2XL – keep conservative for laptops */
  .section-title {
    font-size: 2.125rem !important;
  }
  h2.font-heading {
    font-size: 2.125rem !important;
  }
}

/* =============================================
   MOBILE (up to 767px)
   ============================================= */
@media (max-width: 767px) {

  /* --- Hero (homepage) --- */
  #home {
    padding-top: 5rem !important;
    padding-bottom: 0 !important;
    min-height: auto !important;
  }
  #home > .max-w-7xl {
    padding-bottom: 2.5rem !important;
  }
  #home h1 {
    font-size: 2rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.75rem !important;
  }
  #home h1 + p {
    font-size: 0.95rem !important;
    max-width: 100% !important;
    margin-bottom: 1.25rem !important;
  }
  #home .grid {
    gap: 1.5rem !important;
  }
  #home .flex.flex-wrap.gap-10 {
    gap: 1.25rem !important;
  }
  #home .flex.flex-wrap.gap-10 span.block {
    font-size: 1.35rem !important;
  }
  #home .flex.flex-wrap.gap-10 .text-sm {
    font-size: 0.75rem !important;
  }
  #home .flex.flex-wrap.gap-4 {
    flex-direction: column !important;
    margin-bottom: 1.5rem !important;
  }
  #home .flex.flex-wrap.gap-4 a {
    width: 100% !important;
    text-align: center !important;
  }
  #home .max-w-md {
    max-width: 100% !important;
  }
  /* Hide code-editor card on small mobile */
  #home .grid > div:last-child {
    display: none !important;
  }

  /* --- Service page heroes --- */
  main > section:first-of-type {
    padding-top: 5rem !important;
    padding-bottom: 2rem !important;
  }
  main > section:first-of-type h1 {
    font-size: 1.75rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0.5rem !important;
  }
  main > section:first-of-type p.text-xl {
    font-size: 0.95rem !important;
  }
  main > section:first-of-type p.text-lg {
    font-size: 0.9rem !important;
    margin-bottom: 1rem !important;
  }
  main > section:first-of-type .flex.flex-wrap.gap-4 {
    flex-direction: column !important;
    margin-bottom: 1.25rem !important;
  }
  main > section:first-of-type .flex.flex-wrap.gap-4 a {
    width: 100% !important;
    text-align: center !important;
  }
  main > section:first-of-type .flex.flex-wrap.gap-8 {
    gap: 0.75rem !important;
    flex-wrap: wrap !important;
  }
  main > section:first-of-type .flex.flex-wrap.gap-8 > div {
    flex: 1 1 45% !important;
  }

  /* --- Section headings --- */
  .section-title {
    font-size: 1.5rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0.5rem !important;
  }
  .section-description {
    font-size: 0.875rem !important;
    margin-bottom: 1.5rem !important;
  }
  .section-badge {
    font-size: 0.75rem !important;
    padding: 0.3rem 0.75rem !important;
    margin-bottom: 0.5rem !important;
  }
  .text-center.max-w-2xl.mx-auto.mb-16,
  .text-center.max-w-3xl.mx-auto.mb-16 {
    margin-bottom: 1.5rem !important;
  }

  /* --- h2 / h3 --- */
  h2.font-heading {
    font-size: 1.5rem !important;
  }
  h3.font-heading {
    font-size: 1.05rem !important;
  }

  /* --- Section padding --- */
  .py-24 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  .py-20 {
    padding-top: 1.75rem !important;
    padding-bottom: 1.75rem !important;
  }

  /* --- Section margin-bottom reductions --- */
  .mb-16 { margin-bottom: 1.5rem !important; }
  .mb-12 { margin-bottom: 1rem !important; }
  .mb-8 { margin-bottom: 0.75rem !important; }
  .mb-6 { margin-bottom: 0.5rem !important; }

  /* --- All grids: single column --- */
  .grid.md\:grid-cols-2,
  .grid.lg\:grid-cols-2,
  .grid.lg\:grid-cols-3,
  .grid.lg\:grid-cols-4,
  .grid.lg\:grid-cols-5 {
    grid-template-columns: 1fr !important;
  }
  .grid.md\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
  .grid.lg\:grid-cols-\[1\.5fr_2fr\] {
    grid-template-columns: 1fr !important;
  }

  /* --- Cards --- */
  .relative.p-8.rounded-xl {
    padding: 1.25rem !important;
  }
  .bg-gray-50.rounded-xl.p-8,
  .bg-white.rounded-xl.p-8 {
    padding: 1.25rem !important;
  }
  .relative.p-8.rounded-xl p,
  .bg-gray-50.rounded-xl.p-8 p,
  .bg-white.rounded-xl.p-8 p {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
  }
  .relative.p-8.rounded-xl .mb-6,
  .bg-gray-50.rounded-xl.p-8 .mb-6 {
    margin-bottom: 0.75rem !important;
  }
  .relative.p-8.rounded-xl .mb-3 {
    margin-bottom: 0.375rem !important;
  }

  /* --- Icon boxes in cards: smaller --- */
  .w-16.h-16 {
    width: 3rem !important;
    height: 3rem !important;
  }
  .w-16.h-16 svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }
  .w-14.h-14 {
    width: 2.75rem !important;
    height: 2.75rem !important;
  }
  .w-14.h-14 svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }

  /* --- About feature box --- */
  .about-feature-box {
    max-width: 100% !important;
    aspect-ratio: auto !important;
    padding: 1.25rem !important;
  }

  /* --- Contact form --- */
  #contact .bg-white.rounded-xl {
    padding: 1.25rem !important;
  }
  #contact input,
  #contact select,
  #contact textarea {
    padding: 0.75rem 0.875rem !important;
    font-size: 0.95rem !important;
  }

  /* --- CTA section --- */
  .bg-gradient-to-br.from-secondary h2 {
    font-size: 1.5rem !important;
  }
  .bg-gradient-to-br.from-secondary .text-lg {
    font-size: 0.9rem !important;
  }
  .bg-gradient-to-br.from-secondary .flex.flex-wrap.justify-center.gap-4 {
    flex-direction: column !important;
  }
  .bg-gradient-to-br.from-secondary .flex.flex-wrap.justify-center.gap-4 a {
    width: 100% !important;
    text-align: center !important;
  }

  /* --- Footer --- */
  footer {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  footer .grid {
    gap: 1.5rem !important;
  }
  footer .grid.grid-cols-2.md\:grid-cols-3 {
    grid-template-columns: 1fr 1fr !important;
  }
  footer p, footer li, footer a {
    font-size: 0.85rem !important;
  }

  /* --- Process step circles --- */
  .inline-flex.items-center.justify-center.w-20.h-20 {
    width: 3.5rem !important;
    height: 3.5rem !important;
    font-size: 1.125rem !important;
  }
  /* Hide connector lines on mobile */
  .hidden.lg\:block.absolute {
    display: none !important;
  }

  /* --- Grid gaps --- */
  .grid.gap-16 {
    gap: 1.5rem !important;
  }
  .grid.gap-8 {
    gap: 1.25rem !important;
  }
  .grid.gap-6 {
    gap: 1rem !important;
  }

  /* --- Buttons: full width on mobile --- */
  .btn-lg {
    padding: 0.75rem 1.25rem !important;
    font-size: 0.95rem !important;
  }
  .btn {
    padding: 0.625rem 1rem !important;
    font-size: 0.875rem !important;
  }

  /* --- Header --- */
  header .h-20 {
    height: 4rem !important;
  }
  header .w-52 {
    width: 10rem !important;
  }

  /* --- Marquee --- */
  .marquee-strip {
    padding: 8px 0 !important;
  }

  /* --- Service pages: pricing cards --- */
  .md\:scale-105 {
    transform: none !important;
  }

  /* --- FAQ sections --- */
  .space-y-4 button p,
  .space-y-4 button h3 {
    font-size: 0.875rem !important;
  }
  .space-y-4 > div {
    margin-bottom: 0.25rem !important;
  }

  /* --- Body text tighter on mobile --- */
  .text-gray-600.leading-relaxed,
  .text-gray-600.mb-4,
  .text-gray-600.mb-6,
  .text-gray-600.mb-8 {
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
  }

  /* --- Spacing lists --- */
  .space-y-3 > * + * {
    margin-top: 0.5rem !important;
  }
  .space-y-6 > * + * {
    margin-top: 0.75rem !important;
  }

  /* --- Trust signals strip (webdesign city pages) --- */
  .trust-signals-strip {
    padding: 0.75rem 0.5rem !important;
    gap: 0.75rem !important;
  }
  .trust-signals-strip span {
    font-size: 0.7rem !important;
  }
}

/* =============================================
   SMALL PHONES (up to 380px)
   ============================================= */
@media (max-width: 380px) {

  #home h1 {
    font-size: 1.625rem !important;
  }
  #home .flex.flex-wrap.gap-10 {
    gap: 0.75rem !important;
  }
  #home .flex.flex-wrap.gap-10 span.block {
    font-size: 1.125rem !important;
  }

  /* --- Service page heroes --- */
  main > section:first-of-type h1 {
    font-size: 1.5rem !important;
  }

  /* --- Section headings --- */
  .section-title {
    font-size: 1.25rem !important;
  }
  h2.font-heading {
    font-size: 1.25rem !important;
  }
  h3.font-heading {
    font-size: 0.95rem !important;
  }

  /* --- Section padding --- */
  .py-24 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .py-20 {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }

  /* --- Cards --- */
  .relative.p-8.rounded-xl,
  .bg-gray-50.rounded-xl.p-8,
  .bg-white.rounded-xl.p-8 {
    padding: 1rem !important;
  }

  /* --- Container padding --- */
  .px-6 {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
  }

  /* --- Buttons --- */
  .btn-lg {
    padding: 0.625rem 1rem !important;
    font-size: 0.875rem !important;
  }
  .btn {
    font-size: 0.8rem !important;
  }

  /* --- Contact form --- */
  #contact .bg-white.rounded-xl {
    padding: 0.875rem !important;
  }

  /* --- Hero stats on service pages --- */
  main > section:first-of-type .flex.flex-wrap.gap-8 > div {
    flex: 1 1 100% !important;
  }
}