/* ==========================================================================
   Globalight - Native 60/120 FPS High-Performance Web Styling
   ========================================================================== */

/* 
 * CRITICAL: Do NOT set scroll-behavior: smooth or overflow on html/body.
 * Setting scroll-behavior on html causes browser smooth-scroll interpolation
 * to conflict with macOS native inertial/trackpad scrolling (causing lag/stutter).
 * Smooth scroll is handled exclusively for anchor link clicks in main.js.
 */
html, body {
  margin: 0;
  padding: 0;
  background-color: #FFFFFF;
  color: #0C2035;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Custom Scrollbar for horizontal slider */
.custom-scrollbar::-webkit-scrollbar {
  display: none;
}

.custom-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* Sticky Header GPU Optimization */
.site-header {
  transform: translateZ(0);
  background-color: rgba(255, 255, 255, 0.98);
}

/* High-Performance Ambient Glows (Using pure radial gradients, zero blur cost) */
.ambient-glow-blue {
  background: radial-gradient(circle, rgba(219, 234, 254, 0.7) 0%, rgba(219, 234, 254, 0) 70%);
  pointer-events: none;
}

.ambient-glow-orange {
  background: radial-gradient(circle, rgba(255, 237, 213, 0.6) 0%, rgba(255, 237, 213, 0) 70%);
  pointer-events: none;
}

.ambient-glow-cta {
  background: radial-gradient(circle, rgba(255, 120, 29, 0.15) 0%, rgba(255, 120, 29, 0) 70%);
  pointer-events: none;
}

/* 3D Mockup - Optimized with Hardware Layer Isolation */
.perspective-mockup {
  perspective: 1200px;
}

.phone-tilt {
  transform: rotateY(-14deg) rotateX(8deg) rotateZ(2deg) translateZ(0);
  box-shadow: -15px 25px 45px -10px rgba(12, 32, 53, 0.25);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.phone-tilt:hover {
  transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(0);
  box-shadow: -8px 16px 30px -8px rgba(12, 32, 53, 0.18);
}

/* Optimize card hover transforms for GPU compositing */
article {
  transform: translateZ(0);
}

article img {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Independent app tiles and luminous orbital ribbons. */
.hero-apps {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 35rem;
  aspect-ratio: 1.12;
}
.hero-apps__aura {
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  -webkit-mask: radial-gradient(ellipse, #000 30%, transparent 70%);
  mask: radial-gradient(ellipse, #000 30%, transparent 70%);
  background: radial-gradient(ellipse at 65% 35%, #d9efff 0, transparent 57%),
    radial-gradient(ellipse at 35% 65%, #ffead8 0, transparent 57%);
  pointer-events: none;
}
.hero-apps__base {
  position: absolute;
  left: 18%;
  right: 12%;
  bottom: 4%;
  height: 9%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #348ac829, transparent 70%);
}
.hero-orbit {
  position: absolute;
  inset: 5%;
  pointer-events: none;
  transform: rotate(-24deg) scaleY(.53);
}
.hero-orbit__track {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid #56bcf866;
  background: conic-gradient(from 25deg, transparent 3%, #a8edff 16%, #078eea 28%, #d7f7ff 39%, transparent 52%, #39b7ff 72%, #b2eaff 83%, transparent 97%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 10px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 10px));
  animation: hero-orbit-spin 18s linear infinite;
}
.hero-orbit--orange {
  inset: 12% 0;
  transform: rotate(24deg) scaleY(.63);
  animation: hero-orbit-sway 12s ease-in-out infinite alternate;
}
.hero-orbit--orange .hero-orbit__track {
  border-color: #ffab5266;
  background: conic-gradient(transparent 3%, #ffda9b 15%, #ff781d 28%, #fff0c7 40%, transparent 52%, #ffa535 72%, #ffe1a2 84%, transparent 97%);
  animation-duration: 23s;
  animation-direction: reverse;
}
.hero-orbit--fine {
  inset: 1% 12%;
  transform: rotate(-48deg) scaleY(.68);
}
.hero-orbit--fine .hero-orbit__track {
  opacity: .6;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation-duration: 30s;
}
.hero-app {
  position: absolute;
  width: 26%;
  aspect-ratio: 1;
  z-index: 2;
  animation: hero-app-float var(--float-duration, 6s) ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
}
.hero-app img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24%;
  transform: rotate(var(--tilt, 0deg));
  box-shadow: 0 1rem 1.5rem -.7rem #0c20354d, 0 2px 3px #fff inset;
  border: 2px solid #ffffffb3;
  transition: transform .3s ease;
}
.hero-app:hover img { transform: rotate(0deg) scale(1.06); }
.hero-app--budget { left: 21%; top: 4%; --tilt: 12deg; --float-delay: -1s; }
.hero-app--typocalypse,
.hero-app--books { left: 59%; top: 7%; width: 25%; --tilt: -5deg; --float-duration: 7s; --float-delay: -3s; }
.hero-app--clumsy-astronaut { left: 3%; top: 34%; --tilt: -13deg; --float-duration: 7s; --float-delay: -2s; }
.hero-app--garage-tycoon { left: 36%; top: 35%; width: 29%; --tilt: 8deg; --float-duration: 8s; }
.hero-app--rail-station { left: 73%; top: 36%; width: 25%; --tilt: -12deg; --float-delay: -4s; }
.hero-app--portal { left: 23%; top: 67%; width: 25%; --tilt: 13deg; --float-duration: 8s; --float-delay: -5s; }
.hero-app--bus-station,
.hero-app--tycoon { left: 60%; top: 67%; width: 25%; --tilt: 7deg; --float-duration: 7s; --float-delay: -1s; }
@keyframes hero-app-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1rem); }
}
@keyframes hero-orbit-spin { to { transform: rotate(360deg); } }
@keyframes hero-orbit-sway {
  from { transform: rotate(18deg) scaleY(.63); }
  to { transform: rotate(30deg) scaleY(.7); }
}
@media (min-width: 1024px) {
  .hero-apps { width: calc(100% + 1rem); }
}

/* ==========================================================================
   Mobile Navigation Drawer (High-Performance 60/120 FPS Offcanvas)
   ========================================================================== */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0.3s ease;
}

.mobile-drawer.is-open {
  pointer-events: auto;
  visibility: visible;
}

.mobile-drawer-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(12, 32, 53, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-drawer.is-open .mobile-drawer-backdrop {
  opacity: 1;
}

.mobile-drawer-sheet {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 86%;
  max-width: 22rem;
  height: 100%;
  background-color: #FFFFFF;
  box-shadow: -10px 0 35px rgba(12, 32, 53, 0.2);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-drawer.is-open .mobile-drawer-sheet {
  transform: translateX(0);
}

body.mobile-menu-locked {
  overflow: hidden !important;
  touch-action: none;
}

/* ==========================================================================
   Desktop Navigation Dropdowns (High-Performance & Accessible)
   ========================================================================== */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 0.75rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
  z-index: 60;
}

.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown,
.nav-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-dropdown-panel {
  background-color: #FFFFFF;
  border-radius: 1rem;
  border: 1px solid #E2E8F0;
  box-shadow: 0 10px 25px -5px rgba(12, 32, 53, 0.08), 0 8px 10px -6px rgba(12, 32, 53, 0.04);
  padding: 1rem;
  min-width: 19.5rem;
}

.nav-dropdown-panel--wide {
  min-width: 24rem;
}

/* ==========================================================================
   Mobile Accordion Component (Exclusive Accordion)
   ========================================================================== */
.mobile-accordion-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.mobile-accordion-item.is-open .mobile-accordion-body {
  max-height: 32rem;
  opacity: 1;
}

.mobile-accordion-chevron {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-accordion-item.is-open .mobile-accordion-chevron {
  transform: rotate(180deg);
}

/* Filter Tabs for Products & Projects */
.filter-tab.is-active {
  background-color: #071829 !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px -2px rgba(7, 24, 41, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  .nav-dropdown,
  .mobile-drawer-sheet,
  .mobile-drawer-backdrop,
  .mobile-accordion-body,
  .mobile-accordion-chevron {
    transition: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   Teknoloji Gündemi — Responsive Card Grid
   Mobilde satırda tek kart (1fr), masaüstünde yan yana 3 kart (repeat(3, 1fr))
   ========================================================================== */
.insights-header-row {
  margin-bottom: 3rem !important;
}

#insights-grid,
#blog-listing-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.75rem;
}

@media (min-width: 1024px) {
  .insights-header-row {
    margin-bottom: 4rem !important;
  }

  #insights-grid,
  #blog-listing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 2rem;
  }
}

/* ==========================================================================
   Blog / Insights Kartı — Alt Kısım ve 'Makaleyi İncele' Padding Dengelemesi
   ========================================================================== */
.blog-card .border-t {
  padding-top: 1.25rem !important;
  margin-top: auto !important;
}

.blog-card .border-t a {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

/* ==========================================================================
   Hakkımızda Metrikleri — Responsive Metrics (Mobil 2x2 Bento Grid, Masaüstü Dikey Liste)
   ========================================================================== */
.about-metrics-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  width: 100%;
}

@media (min-width: 640px) {
  .about-metrics-grid {
    gap: 1rem !important;
  }
}

.about-metric-card {
  background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 1rem;
  padding: 1.125rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}

.about-metric-card:hover {
  border-color: #CBD5E1;
  background: #FFFFFF;
  box-shadow: 0 4px 12px -2px rgba(12, 32, 53, 0.06);
}

.about-metric-val {
  font-size: 1.75rem;
  line-height: 1.15;
  font-weight: 800;
  color: #0C2035;
  letter-spacing: -0.025em;
}

.about-metric-lbl {
  font-size: 0.75rem;
  line-height: 1.35;
  font-weight: 500;
  color: #64748B;
  margin-top: 0.35rem;
}

/* Masaüstü görünümü (>= 1024px): Görselin yanında dikey zarif liste */
@media (min-width: 1024px) {
  .about-metrics-grid {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 0 !important;
    padding-left: 1.5rem !important;
    height: 100%;
  }

  .about-metric-card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    transition: none !important;
  }

  .about-metric-card:hover {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  .about-metric-card + .about-metric-card {
    border-top: 1px solid #F1F5F9 !important;
    padding-top: 1.5rem !important;
    margin-top: 0 !important;
  }

  .about-metric-val {
    font-size: 1.875rem !important; /* 30px (text-3xl) */
  }

  .about-metric-lbl {
    font-size: 0.75rem !important; /* 12px (text-xs) */
  }
}





/* ==========================================================================
   Responsive Grid & Utility Fallbacks for Multi-page Layouts
   ========================================================================== */
@media (min-width: 1024px) {
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .lg\:col-span-4 { grid-column: span 4 / span 4 !important; }
  .lg\:col-span-5 { grid-column: span 5 / span 5 !important; }
  .lg\:col-span-6 { grid-column: span 6 / span 6 !important; }
  .lg\:col-span-7 { grid-column: span 7 / span 7 !important; }
  .lg\:col-span-8 { grid-column: span 8 / span 8 !important; }
}

/* Project case study carousel */
.project-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.project-carousel::-webkit-scrollbar { display: none; }
.project-slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}
.project-case-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 2rem;
}
.project-visual { min-height: 20rem; }
.project-carousel-control {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: background-color 180ms ease, opacity 180ms ease;
}
@media (min-width: 1024px) {
  .project-case-layout { grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.9fr); }
  .project-visual { min-height: 26rem; }
}
@media (prefers-reduced-motion: reduce) {
  .project-carousel { scroll-behavior: auto; }
}

/* Footer marketplace icons follow the muted footer icon palette. */
.footer-store-icon {
  filter: grayscale(1);
  opacity: 0.6;
  transition: filter 180ms ease, opacity 180ms ease;
}
a:hover .footer-store-icon,
a:focus-visible .footer-store-icon {
  filter: grayscale(0);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .footer-store-icon { transition: none; }
}

.footer-apple-icon {
  filter: grayscale(1);
  opacity: 0.6;
  transition: filter 180ms ease, opacity 180ms ease;
}
a:hover .footer-apple-icon,
a:focus-visible .footer-apple-icon {
  filter: grayscale(0);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .footer-apple-icon { transition: none; }
}

.project-store-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.project-store-link {
  min-height: 2.75rem;
  gap: 0.375rem;
  padding-inline: 0.5rem;
  font-size: 0.75rem;
  white-space: nowrap;
}
.project-store-link img {
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
}
.project-store-link [aria-hidden="true"] { margin-left: 0; }
@media (min-width: 1280px) {
  .project-store-links { flex-wrap: nowrap; }
}

/* Product technology carousel on the engineering page */
.product-tech-carousel {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.product-tech-carousel::-webkit-scrollbar { display: none; }
.product-tech-slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}
.product-tech-card {
  display: flex;
  min-height: 25rem;
  height: 100%;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 1.5rem;
  background: #fff;
  box-shadow: 0 1px 3px rgba(11, 25, 44, 0.06);
}
.product-tech-main { display: flex; min-width: 0; flex: 1; flex-direction: column; align-items: flex-start; }
.product-tech-note {
  min-height: 10rem;
  padding: 1.5rem;
  border-radius: 1.25rem;
  background: #0b192c;
}
.product-tech-tag {
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  background: #f1f5f9;
  color: #334155;
  font-size: 0.8125rem;
  font-weight: 600;
}
.product-carousel-control {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: background-color 180ms ease, opacity 180ms ease;
}
@media (min-width: 768px) {
  .product-tech-card { min-height: 23rem; flex-direction: row; align-items: stretch; padding: 2rem; }
  .product-tech-main { padding-block: 0.5rem; }
  .product-tech-note { width: min(34%, 20rem); flex: 0 0 min(34%, 20rem); }
}
@media (prefers-reduced-motion: reduce) {
  .product-tech-carousel { scroll-behavior: auto; }
  .product-carousel-control { transition: none; }
}

/* Persistent, compact WhatsApp contact action */
.whatsapp-fab {
  position: fixed;
  z-index: 60;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  display: inline-flex;
  min-height: 3.5rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1.125rem 0.5rem 0.625rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  background: #071829;
  color: #fff;
  box-shadow: 0 0.75rem 2rem rgba(7, 24, 41, 0.2), 0 2px 6px rgba(7, 24, 41, 0.12);
  text-decoration: none;
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
.whatsapp-fab:hover {
  transform: translateY(-2px);
  background: #0c2035;
  box-shadow: 0 1rem 2.25rem rgba(7, 24, 41, 0.24), 0 3px 8px rgba(7, 24, 41, 0.14);
}
.whatsapp-fab:focus-visible {
  outline: 3px solid #ff781d;
  outline-offset: 3px;
}
.whatsapp-fab-icon {
  display: inline-flex;
  width: 2.375rem;
  height: 2.375rem;
  flex: 0 0 2.375rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #1ecf63;
  color: #fff;
}
.whatsapp-fab-logo { display: block; width: 1.75rem; height: 1.75rem; object-fit: contain; }
.whatsapp-fab-copy { display: flex; flex-direction: column; line-height: 1.2; }
.whatsapp-fab-title { font-size: 0.875rem; font-weight: 700; }
.whatsapp-fab-caption { margin-top: 0.1875rem; color: #cbd5e1; font-size: 0.6875rem; }
@media (max-width: 480px) {
  .whatsapp-fab {
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    min-height: 3.25rem;
    gap: 0.625rem;
    padding: 0.4375rem 0.9375rem 0.4375rem 0.5rem;
  }
  .whatsapp-fab-icon { width: 2.25rem; height: 2.25rem; flex-basis: 2.25rem; }
  .whatsapp-fab-caption { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-fab { transition: none; }
}
/* Persistent footer language selector */
.language-selector{position:relative;display:inline-flex;align-items:center}
.language-selector-menu{position:absolute;left:0;bottom:calc(100% + 10px);z-index:70;display:none;min-width:190px;padding:6px;border:1px solid #e2e8f0;border-radius:14px;background:#fff;box-shadow:0 14px 34px rgba(7,24,41,.14)}
.language-selector.is-open .language-selector-menu{display:grid;gap:3px}
.language-selector-menu button{width:100%;min-height:42px;padding:10px 12px;border:0;border-radius:9px;background:transparent;color:#334155;text-align:left;font:inherit;font-size:13px;cursor:pointer}
.language-selector-menu button:hover,.language-selector-menu button[aria-checked="true"]{background:#f1f5f9;color:#071829}
.language-selector-menu button[aria-checked="true"]{font-weight:700}
.language-selector-button:focus-visible,.language-selector-menu button:focus-visible{outline:2px solid #ff781d;outline-offset:2px}

/* References page hero spacing and floating reference-count card. */
.references-hero-layout {
  padding-top: 4.5rem;
  padding-bottom: 5.5rem;
}

.references-hero-preview {
  margin-bottom: 1rem;
}

.references-hero-stat-card {
  right: -1rem;
  bottom: -1rem;
  z-index: 2;
  max-width: calc(100% - 1rem);
}

@media (max-width: 1023px) {
  .references-hero-layout {
    padding-top: 3.5rem;
    padding-bottom: 4.5rem;
  }

  .references-hero-stat-card {
    right: 0.75rem;
    bottom: -0.75rem;
  }
}

@media (max-width: 639px) {
  .references-hero-layout {
    padding-top: 2.5rem;
    padding-bottom: 3.5rem;
  }

  .references-hero-preview {
    margin-bottom: 0.75rem;
  }

  .references-hero-stat-card {
    right: 0.5rem;
    bottom: -0.5rem;
  }
}

/* Spacious capability cards on the references page. */
.references-capabilities {
  padding: 2.5rem 0;
  border-top: 1px solid #edf1f5;
  border-bottom: 1px solid #edf1f5;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}

.references-capabilities-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.875rem;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.references-capability-card {
  display: flex;
  min-height: 5.75rem;
  align-items: center;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  border: 1px solid #e5ebf2;
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 5px 18px rgba(7, 24, 41, 0.045);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.references-capability-card:hover {
  transform: translateY(-2px);
  border-color: #d8e1ec;
  box-shadow: 0 12px 26px rgba(7, 24, 41, 0.08);
}

.references-capability-number {
  display: inline-flex;
  width: 3rem;
  height: 3rem;
  flex: 0 0 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  font-size: 0.9375rem;
  font-weight: 750;
}

.references-capability-number-blue { background: #eff6ff; color: #2563eb; }
.references-capability-number-orange { background: #fff4eb; color: #f97316; }
.references-capability-number-green { background: #ecfdf5; color: #059669; }

.references-capability-title {
  color: #071829;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}

@media (min-width: 640px) {
  .references-capabilities { padding: 3rem 0; }
  .references-capabilities-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 0 1.5rem;
  }
  .references-capability-card { min-height: 6.25rem; padding: 1.25rem 1.5rem; }
}

@media (min-width: 1024px) {
  .references-capabilities-inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    padding: 0 2rem;
  }
  .references-capability-card { min-height: 6.75rem; }
  .references-capability-title { font-size: 1.0625rem; }
}

@media (prefers-reduced-motion: reduce) {
  .references-capability-card { transition: none; }
}

/* Client logos in selected reference cards. */
.references-client-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

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

@media (min-width: 1280px) {
  .references-client-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1536px) {
  .references-client-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }
}

.references-client-art {
  position: relative;
  display: flex;
  width: 100%;
  aspect-ratio: 16 / 9;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 1.25rem;
  background:
    radial-gradient(circle at 12% 15%, rgba(255, 120, 29, 0.12), transparent 36%),
    radial-gradient(circle at 88% 82%, rgba(37, 99, 235, 0.1), transparent 38%),
    #f4f7fb;
}

.references-client-art::before,
.references-client-art::after {
  position: absolute;
  width: 13rem;
  height: 13rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.references-client-art::before { top: -9rem; right: -2rem; }
.references-client-art::after { bottom: -10rem; left: -2rem; }

.references-client-logo-panel {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(90%, 34rem);
  height: 78%;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 1.125rem;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0.75rem 2rem rgba(7, 24, 41, 0.07);
}

.references-client-logo-panel-dark {
  border-color: #142c48;
  background: #071829;
  box-shadow: 0 0.75rem 2rem rgba(7, 24, 41, 0.18);
}

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

.references-client-index {
  position: absolute;
  right: 1.25rem;
  bottom: 0.875rem;
  z-index: 1;
  color: #64748b;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.references-client-placeholder {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 4.25rem;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.125rem;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 1.125rem;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 0.75rem 2rem rgba(7, 24, 41, 0.05);
}

.references-client-placeholder-mark {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.875rem;
  background: #ecfdf5;
  color: #059669;
  font-size: 1.25rem;
  font-weight: 800;
}

.references-client-placeholder-name {
  color: #071829;
  font-size: 1rem;
  font-weight: 700;
}

@media (max-width: 639px) {
  .references-client-art { padding: 1rem; }
  .references-client-logo-panel {
    width: 92%;
    height: 76%;
    padding: 0.625rem 0.75rem;
  }
}