/* ==========================================================================
   PRIXEL STUDIOZ — Design System & Main Stylesheet
   Theme: Pure White Background, Deep Black Typography, Red Strategic Accents
   Brand Accent: #FD0308 / #E50914 (Studio Red)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS & CSS VARIABLES
   -------------------------------------------------------------------------- */
:root {
  /* Surface Colors */
  --bg-body: #FFFFFF;
  --bg-surface: #FFFFFF;
  --bg-subtle: #F8FAFC;
  --bg-alt: #F1F5F9;
  --bg-dark-card: #0F172A;

  /* Brand Red Accents */
  --accent-red: #FD0308;
  --accent-red-hover: #D90004;
  --accent-red-subtle: #FEF2F2;
  --accent-red-light: rgba(253, 3, 8, 0.08);
  --accent-red-border: #FEE2E2;
  --accent-red-glow: rgba(253, 3, 8, 0.2);

  /* Typography Colors */
  --text-main: #0F172A;
  --text-heading: #090D16;
  --text-body: #334155;
  --text-muted: #64748B;
  --text-light: #94A3B8;

  /* Borders & Dividers */
  --border-color: #E2E8F0;
  --border-light: #EEF2F6;
  --border-focus: #FD0308;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 16px -2px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 32px -4px rgba(15, 23, 42, 0.08), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
  --shadow-hover: 0 20px 40px -6px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(253, 3, 8, 0.15);

  /* Typography Fonts */
  --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-mono: 'Inter', monospace, sans-serif;

  /* Standard Spacing Scale (4px/8px System) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Standard Section Vertical Spacing */
  --section-padding-y: 100px;
  --section-padding-y-mobile: 70px;
  --section-padding-sm-y: 60px;

  /* Standard Border Radii Scale */
  --border-radius-btn: 4px;
  --border-radius-sm: 8px;
  --border-radius-md: 14px;
  --border-radius-lg: 20px;
  --border-radius-card: 24px;
  --border-radius-card-lg: 28px;
  --border-radius-pill: 9999px;

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] {
  /* Dark Surface Colors */
  --bg-body: #0A0D14;
  --bg-surface: #111520;
  --bg-subtle: #161C2B;
  --bg-alt: #1A2133;
  --bg-dark-card: #0A0D14;

  /* Typography Colors */
  --text-main: #F8FAFC;
  --text-heading: #FFFFFF;
  --text-body: #CBD5E1;
  --text-muted: #94A3B8;
  --text-light: #64748B;

  /* Borders & Dividers */
  --border-color: #242E42;
  --border-light: #1A2234;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px -2px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px -4px rgba(0, 0, 0, 0.6);
  --shadow-hover: 0 20px 40px -6px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(253, 3, 8, 0.3);
}

/* Theme-Aware Logo Display */
.logo-light {
  display: inline-block !important;
}

.logo-dark {
  display: none !important;
}

[data-theme="dark"] .logo-light {
  display: none !important;
}

[data-theme="dark"] .logo-dark {
  display: inline-block !important;
}

/* --------------------------------------------------------------------------
   2. GLOBAL RESETS & BASE STYLES
   -------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: hidden;
  width: 100%;
}

body {
  background-color: var(--bg-body);
  color: var(--text-body);
  font-family: var(--font-body);
  line-height: 1.68;
  letter-spacing: -0.01em;
  overflow-x: hidden;
  width: 100% !important;
  max-width: 100% !important;
  padding-top: 68px;
  /* Fixed navigation offset */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 768px) {
  body {
    padding-top: 60px;
  }
}

/* ==========================================================================
   100% FULL-WIDTH FLUID ARCHITECTURE
   ========================================================================== */
html,
body,
main,
section,
header,
footer,
article,
.section-padding,
.section-padding-sm,
.hero-section,
.by-the-numbers-section,
.services-editorial-section,
.process-editorial-section,
.pricing-plans-section,
.faq-editorial-section,
.swift-contact-section,
.star-cta-section,
.modern-stack-section,
.why-choose-section,
.case-studies-section,
.blog-insights-section,
.project-wizard-section,
.industries-showcase-section,
.industry-marquee-frame {
  width: 100% !important;
  max-width: 100% !important;
  display: block;
  box-sizing: border-box;
}

.container-xl,
.container-xxl,
.container-lg,
.container,
.container-fluid,
.container-sm,
.container-md {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: clamp(20px, 4vw, 72px) !important;
  padding-right: clamp(20px, 4vw, 72px) !important;
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-heading);
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.035em;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-fast);
}

p {
  margin-bottom: 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

::selection {
  background-color: var(--accent-red);
  color: #FFFFFF;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 9px;
}

::-webkit-scrollbar-track {
  background: var(--bg-subtle);
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: var(--border-radius-btn);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-red);
}

/* Red Utilities */
.text-red {
  color: var(--accent-red) !important;
}

.bg-red {
  background-color: var(--accent-red) !important;
  color: #FFFFFF !important;
}

.bg-red-subtle {
  background-color: var(--accent-red-subtle) !important;
}

.border-red {
  border-color: var(--accent-red) !important;
}

.border-red-subtle {
  border-color: var(--accent-red-border) !important;
}

/* Section Standard Padding */
.section-padding {
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y);
}

.section-padding-sm {
  padding-top: var(--section-padding-sm-y);
  padding-bottom: var(--section-padding-sm-y);
}

@media (max-width: 768px) {
  .section-padding {
    padding-top: var(--section-padding-y-mobile);
    padding-bottom: var(--section-padding-y-mobile);
  }
}

/* Badges / Eyebrows / Technical Code Archetype (Matching Reference Image) */
.section-eyebrow-code,
.why-eyebrow-code {
  display: inline-block;
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.font-serif-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 4.2vw, 3.3rem);
  font-weight: 800;
  letter-spacing: -0.038em;
  line-height: 1.18;
  color: var(--text-heading);
  margin-bottom: var(--space-4);
  text-wrap: balance;
}

.section-intro {
  font-family: var(--font-body);
  font-size: 1.08rem;
  color: var(--text-muted);
  line-height: 1.65;
  max-width: 680px;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   3. BUTTONS & INTERACTIVE ELEMENTS
   -------------------------------------------------------------------------- */
/* Unified Base Archetype for all buttons */
.btn-red,
.btn-ghost-dark,
.btn-secondary,
.btn-black,
.btn-dark {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: -0.01em;
  line-height: 1.35;
  padding: 9px 20px;
  border-radius: var(--border-radius-btn);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  transition: all var(--transition-smooth);
}

/* Primary Button (Studio Red) */
.btn-red,
.btn-primary {
  background-color: var(--accent-red);
  color: #FFFFFF !important;
  border: 1px solid var(--accent-red);
  box-shadow: 0 4px 14px rgba(253, 3, 8, 0.22);
}

.btn-red:hover,
.btn-primary:hover {
  background-color: var(--accent-red-hover);
  border-color: var(--accent-red-hover);
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(253, 3, 8, 0.35);
}

.btn-red:active,
.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(253, 3, 8, 0.2);
}

/* Secondary Button (Solid Black Archetype) */
.btn-ghost-dark,
.btn-secondary,
.btn-black,
.btn-dark {
  background-color: #0A0D14;
  color: #FFFFFF !important;
  border: 1px solid #0A0D14;
  box-shadow: 0 4px 14px rgba(10, 13, 20, 0.16);
}

.btn-ghost-dark:hover,
.btn-secondary:hover,
.btn-black:hover,
.btn-dark:hover {
  background-color: #1A2234;
  border-color: #1A2234;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(10, 13, 20, 0.28);
}

.btn-ghost-dark:active,
.btn-secondary:active,
.btn-black:active,
.btn-dark:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(10, 13, 20, 0.2);
}

/* Dark Mode Theme Adaptation for Secondary Black Button */
[data-theme="dark"] .btn-ghost-dark,
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-black,
[data-theme="dark"] .btn-dark {
  background-color: #111520;
  border-color: #28344E;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .btn-ghost-dark:hover,
[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn-black:hover,
[data-theme="dark"] .btn-dark:hover {
  background-color: #1A2234;
  border-color: var(--accent-red);
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(253, 3, 8, 0.2);
}

/* Small Buttons */
.btn-sm-red,
.btn-sm-black,
.btn-sm,
.btn-ghost-dark.btn-sm {
  padding: 6px 14px !important;
  font-size: 0.80rem !important;
  gap: 6px !important;
  border-radius: var(--border-radius-btn) !important;
}

/* Large CTA Buttons (Refined & Balanced) */
.btn-lg,
.btn-red.btn-lg,
.btn-ghost-dark.btn-lg,
.closing-cta-card .btn-red {
  padding: 11px 26px !important;
  font-size: 0.94rem !important;
  font-weight: 600 !important;
}

/* Outline Secondary Style */
.btn-outline-secondary {
  background-color: transparent !important;
  color: var(--text-heading) !important;
  border: 1px solid var(--border-color) !important;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: var(--border-radius-btn) !important;
  transition: all var(--transition-smooth);
}

.btn-outline-secondary:hover {
  background-color: #0A0D14 !important;
  border-color: #0A0D14 !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

[data-theme="dark"] .btn-outline-secondary {
  color: #CBD5E1 !important;
  border-color: #2E3A52 !important;
}

[data-theme="dark"] .btn-outline-secondary:hover {
  background-color: #161C2B !important;
  border-color: var(--accent-red) !important;
  color: #FFFFFF !important;
}

.link-red-arrow {
  color: var(--accent-red);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.90rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--transition-fast);
}

.link-red-arrow:hover {
  color: var(--accent-red-hover);
  gap: 10px;
}

/* Global Square Button Archetype (4px Radius strictly enforced) */
.btn,
button.btn,
a.btn,
.btn-red,
.btn-ghost-dark,
.btn-ghost-light,
.btn-secondary,
.btn-black,
.btn-dark,
.btn-sm-red,
.btn-sm-black,
.swift-bottom-cta-btn,
.swift-submit-pill-btn,
.swift-stat-pill-cta,
.alture-pill-btn,
.tech-cat-btn,
.structa-nl-form button,
.prixel-project-form button,
button[type="submit"] {
  border-radius: var(--border-radius-btn) !important;
}

/* --------------------------------------------------------------------------
   4. NAVBAR & HEADER
   -------------------------------------------------------------------------- */
.studio-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1030 !important;
  background-color: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-color);
  transition: all var(--transition-smooth);
  padding: 14px 0;
}

.studio-header.scrolled {
  background-color: rgba(255, 255, 255, 0.97);
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
  padding: 10px 0;
}

.navbar-brand {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: 0;
}

.navbar-brand img {
  height: 35px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  transition: opacity var(--transition-fast);
}

@media (max-width: 768px) {
  .navbar-brand img {
    height: 30px;
    max-width: 185px;
  }
}

@media (max-width: 400px) {
  .navbar-brand img {
    height: 26px;
    max-width: 160px;
  }
}

.theme-toggle-btn {
  background: transparent;
  border: 1px solid var(--border-color);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-main);
  font-size: 1.05rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  padding: 0;
}

.theme-toggle-btn:hover {
  background-color: var(--bg-subtle);
  border-color: var(--accent-red);
  transform: rotate(15deg);
}

[data-theme="dark"] .studio-header {
  background-color: rgba(10, 13, 20, 0.94);
  border-bottom-color: var(--border-color);
}

[data-theme="dark"] .studio-header.scrolled {
  background-color: rgba(10, 13, 20, 0.98);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] .theme-toggle-btn {
  border-color: #2E3A52;
  color: #F8FAFC;
}

[data-theme="dark"] .theme-toggle-btn:hover {
  background-color: #1A2234;
}

[data-theme="dark"] .offcanvas-custom {
  background-color: #0A0D14;
  color: #FFFFFF;
}

[data-theme="dark"] .nav-item.dropdown .dropdown-menu {
  background-color: #111520;
  border-color: #242E42;
}

[data-theme="dark"] .dropdown-item-custom {
  color: #CBD5E1;
}

[data-theme="dark"] .dropdown-item-custom:hover {
  background-color: #161C2B;
  color: #FFFFFF;
}

[data-theme="dark"] .dropdown-item-custom i {
  background-color: #1A2234;
  color: #F8FAFC;
}

[data-theme="dark"] .studio-footer-structa {
  background-color: #0E121A;
  color: #F8FAFC;
  border-top-color: #242E42;
}

[data-theme="dark"] .structa-col-heading {
  color: #94A3B8 !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .structa-links a {
  color: #CBD5E1 !important;
}

[data-theme="dark"] .structa-links a:hover {
  color: var(--accent-red) !important;
}

[data-theme="dark"] .structa-nl-title,
[data-theme="dark"] .structa-copyright,
[data-theme="dark"] .structa-socials a,
[data-theme="dark"] .structa-giant-wordmark {
  color: #FFFFFF;
}

[data-theme="dark"] .structa-socials a:hover {
  color: var(--accent-red);
}

[data-theme="dark"] .structa-mid-row {
  border-top-color: #242E42;
}

[data-theme="dark"] .structa-nl-form input {
  background: #161C2B;
  border-color: #2E3A52;
  color: #FFFFFF;
}

[data-theme="dark"] .bg-white {
  background-color: #111520 !important;
}

[data-theme="dark"] .border {
  border-color: #242E42 !important;
}

[data-theme="dark"] .text-heading {
  color: #FFFFFF !important;
}

[data-theme="dark"] .text-dark,
[data-theme="dark"] .navbar-toggler i {
  color: #F8FAFC !important;
}

[data-theme="dark"] .text-secondary {
  color: #94A3B8 !important;
}

[data-theme="dark"] .bg-subtle {
  background-color: #161C2B !important;
}

.nav-link-item {
  color: var(--text-body);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.94rem;
  padding: 8px 14px !important;
  position: relative;
  transition: color var(--transition-fast);
}

.nav-link-item:hover,
.nav-link-item.active {
  color: var(--accent-red) !important;
}

.nav-link-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 14px;
  right: 14px;
  height: 2px;
  background-color: var(--accent-red);
  border-radius: 2px;
}

/* Dropdown Menu */
.nav-item.dropdown .dropdown-menu {
  border-radius: var(--border-radius-md);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
  padding: 10px;
  min-width: 280px;
  margin-top: 12px;
  animation: dropFade 0.25s ease forwards;
}

@keyframes dropFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

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

.dropdown-item-custom {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--border-radius-sm);
  color: var(--text-main);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.92rem;
  transition: all var(--transition-fast);
}

.dropdown-item-custom i {
  color: var(--accent-red);
  font-size: 1.15rem;
  width: 24px;
  text-align: center;
}

.dropdown-item-custom:hover {
  background-color: var(--accent-red-subtle);
  color: var(--accent-red);
  transform: translateX(3px);
}

.dropdown-item-custom .sub-desc {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 2px;
}


/* Red Count Badge on Work Link */
.nav-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--accent-red);
  color: #FFFFFF;
  font-size: 0.68rem;
  font-weight: 800;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  margin-left: 5px;
  vertical-align: middle;
  line-height: 1;
}

/* Minimalist 2-Line Menu Toggle Button (Alture Style) */
.menu-toggle-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  transition: all var(--transition-fast);
}

.menu-toggle-btn:hover {
  background-color: var(--bg-subtle);
}

.menu-toggle-btn .menu-bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--text-heading);
  border-radius: 2px;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

[data-theme="dark"] .menu-toggle-btn .menu-bar {
  background-color: #FFFFFF;
}

.menu-toggle-btn:hover .menu-bar {
  background-color: var(--accent-red);
}

/* --------------------------------------------------------------------------
   ALTURE-STYLE FLOATING EDITORIAL NAVIGATION OVERLAY
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   ALTURE-STYLE FLOATING EDITORIAL NAVIGATION OVERLAY
   -------------------------------------------------------------------------- */
.offcanvas-alture {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 24px !important;
  width: min(580px, calc(100vw - 32px)) !important;
  max-width: 100vw !important;
  height: 100vh !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.offcanvas-backdrop.show {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background-color: rgba(0, 0, 0, 0.48) !important;
  opacity: 1 !important;
}

.offcanvas-alture-card {
  background-color: #FFFFFF;
  color: #000000;
  border-radius: 40px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.04);
  height: 100%;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  padding: 40px 42px 30px 42px;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

.offcanvas-alture-card::-webkit-scrollbar {
  width: 5px;
}

.offcanvas-alture-card::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 10px;
}

[data-theme="dark"] .offcanvas-alture-card {
  background-color: #111520;
  color: #FFFFFF;
  border-color: #242E42;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* Close Button Positioned at Top-Right of Card */
.alture-close-btn {
  position: absolute;
  top: 32px;
  right: 32px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #F3F4F6;
  border: none;
  color: #111827;
  font-size: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 20;
}

.alture-close-btn:hover {
  background-color: #E5E7EB;
  color: #000000;
  transform: scale(1.06);
}

[data-theme="dark"] .alture-close-btn {
  background-color: #1A2234;
  color: #FFFFFF;
}

[data-theme="dark"] .alture-close-btn:hover {
  background-color: #242E42;
  color: var(--accent-red);
}

/* Vertical Stack Navigation Links */
.alture-nav-body {
  margin-bottom: 24px;
  padding-right: 48px;
  /* Avoid overlapping top close button */
}

.alture-links-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.alture-link-item {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.2vw, 2.45rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.035em;
  color: #000000;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform var(--transition-fast), color var(--transition-fast);
  width: fit-content;
}

.alture-link-item:hover,
.alture-link-item.active {
  color: var(--accent-red);
  transform: translateX(6px);
}

[data-theme="dark"] .alture-link-item {
  color: #FFFFFF;
}

[data-theme="dark"] .alture-link-item:hover,
[data-theme="dark"] .alture-link-item.active {
  color: var(--accent-red);
}

.alture-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--accent-red);
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 800;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  line-height: 1;
}

/* Action Pills & Circular Social Icons Row */
.alture-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  margin-bottom: 20px;
  padding-top: 16px;
}

.alture-pills-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.alture-pill-btn {
  background-color: #EEEEF0;
  color: #111827;
  border: 1px solid transparent;
  border-radius: var(--border-radius-btn);
  padding: 10px 18px;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.alture-pill-btn:hover {
  background-color: #E2E4E8;
  color: #000000;
  transform: translateY(-1px);
}

.alture-pill-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--accent-red);
  display: inline-block;
  margin-left: 2px;
}

[data-theme="dark"] .alture-pill-btn {
  background-color: #161C2B;
  color: #F8FAFC;
  border-color: #242E42;
}

[data-theme="dark"] .alture-pill-btn:hover {
  background-color: #1E2638;
  color: #FFFFFF;
}

.alture-socials-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.alture-social-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #E5E7EB;
  color: #111827;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  transition: all var(--transition-fast);
  background-color: #FFFFFF;
  text-decoration: none;
}

.alture-social-circle:hover {
  border-color: #111827;
  color: var(--accent-red);
  background-color: #F9FAFB;
  transform: translateY(-2px);
}

[data-theme="dark"] .alture-social-circle {
  background-color: #161C2B;
  border-color: #242E42;
  color: #F8FAFC;
}

[data-theme="dark"] .alture-social-circle:hover {
  border-color: var(--accent-red);
  color: var(--accent-red);
}

/* Featured Dark Banner Card (Interlocking 3D Glass Chain) */
.alture-featured-card {
  background: #000000;
  color: #FFFFFF;
  border-radius: 28px;
  padding: 16px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-decoration: none;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all var(--transition-fast);
  cursor: pointer;
  min-height: 130px;
  position: relative;
  overflow: hidden;
}

.alture-featured-card:hover {
  border-color: rgba(253, 3, 8, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(253, 3, 8, 0.3);
  color: #FFFFFF;
}

.alture-card-heading {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.alture-arrow {
  font-size: 1.15rem;
  display: inline-block;
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.alture-featured-card:hover .alture-arrow {
  transform: translate(3px, -3px);
  color: var(--accent-red);
}

.alture-chain-img {
  height: 105px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  flex-shrink: 0;
  margin-right: 8px;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.6));
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.alture-featured-card:hover .alture-chain-img {
  transform: scale(1.06) rotate(-3deg);
}

/* Footer Utility Row */
.alture-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.84rem;
  color: #71717A;
  padding-top: 4px;
}

.alture-legal-links {
  display: flex;
  align-items: center;
  gap: 18px;
}

.alture-legal-links a {
  color: #71717A;
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-fast);
}

.alture-legal-links a:hover {
  color: #111827;
}

.alture-bottom-cta {
  color: #111827;
  font-weight: 600;
  font-size: 0.84rem;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.alture-bottom-cta:hover {
  color: var(--accent-red);
}

[data-theme="dark"] .alture-legal-links a {
  color: #94A3B8;
}

[data-theme="dark"] .alture-legal-links a:hover {
  color: #FFFFFF;
}

[data-theme="dark"] .alture-bottom-cta {
  color: #F8FAFC;
}

[data-theme="dark"] .alture-bottom-cta:hover {
  color: var(--accent-red);
}

@media (max-width: 576px) {
  .offcanvas-alture {
    width: 100vw !important;
    padding: 10px !important;
  }

  .offcanvas-alture-card {
    padding: 28px 22px 22px 22px;
    border-radius: 28px;
    max-height: calc(100vh - 20px);
  }

  .alture-close-btn {
    top: 22px;
    right: 22px;
    width: 42px;
    height: 42px;
    font-size: 1rem;
  }

  .alture-nav-body {
    padding-right: 40px;
    margin-bottom: 20px;
  }

  .alture-link-item {
    font-size: 1.85rem;
  }

  .alture-actions-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
  }

  .alture-chain-img {
    height: 80px;
  }

  .alture-featured-card {
    padding: 14px 20px;
    min-height: 105px;
  }
}

/* --------------------------------------------------------------------------
   5. HERO SECTION
   -------------------------------------------------------------------------- */
.hero-section {
  position: relative;
  padding-top: 95px;
  padding-bottom: 90px;
  background:
    radial-gradient(circle at 80% 10%, rgba(253, 3, 8, 0.04) 0%, transparent 40%),
    radial-gradient(circle at 10% 80%, rgba(253, 3, 8, 0.03) 0%, transparent 40%),
    #FFFFFF;
  overflow: hidden;
}

[data-theme="dark"] .hero-section {
  background:
    radial-gradient(circle at 80% 10%, rgba(253, 3, 8, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 10% 80%, rgba(253, 3, 8, 0.05) 0%, transparent 40%),
    #0A0D14;
}

/* Interactive Geometric Canvas Overlay (Valden Studio Archetype) */
.hero-interactive-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

#hero .container-xl {
  position: relative;
  z-index: 2;
}

/* Eyebrow Badge Pill */
.eyebrow-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 9999px;
  background-color: rgba(253, 3, 8, 0.05);
  border: 1px solid rgba(253, 3, 8, 0.18);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-red, #FD0308);
  letter-spacing: -0.01em;
  margin-bottom: 22px;
  box-shadow: 0 2px 8px rgba(253, 3, 8, 0.05);
  transition: all var(--transition-fast);
}

.eyebrow-badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--accent-red, #FD0308);
  box-shadow: 0 0 8px rgba(253, 3, 8, 0.7);
  display: inline-block;
  flex-shrink: 0;
}

[data-theme="dark"] .eyebrow-badge {
  background-color: rgba(253, 3, 8, 0.1);
  border-color: rgba(253, 3, 8, 0.28);
  color: #FF5A5F;
}

#hero .eyebrow-badge {
  margin-left: auto;
  margin-right: auto;
}

/* Collaborative Mouse Mover Cursor Badges (Drop.Studio / Figma Archetype) */
.hero-headline-wrap {
  position: relative;
  display: block;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.hero-cursor-badge {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 10;
  will-change: transform;
  transition: opacity 0.4s ease;
}

.cursor-pointer-wrap {
  display: inline-flex;
  align-items: flex-start;
  gap: 2px;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.16));
}

[data-theme="dark"] .cursor-pointer-wrap {
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.65));
}

.cursor-pointer-svg {
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.cursor-pill-tag {
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 9999px;
  line-height: 1.35;
  white-space: nowrap;
  margin-top: 5px;
  margin-left: -3px;
  display: inline-block;
}

/* Badge 1: STUDIO (Prixel Signature Red) */
.cursor-badge-studio {
  top: -10px;
  right: 17%;
}

.cursor-badge-studio .cursor-pill-tag {
  background-color: var(--accent-red, #FD0308);
  color: #FFFFFF;
  box-shadow: 0 6px 20px rgba(253, 3, 8, 0.4);
}

/* Badge 2: YOU (Vibrant Gold/Amber Accent) */
.cursor-badge-you {
  bottom: 2px;
  left: 23%;
}

.cursor-badge-you .cursor-pill-tag {
  background-color: #FFC700;
  color: #0A0D14;
  box-shadow: 0 6px 20px rgba(255, 199, 0, 0.42);
}

@media (max-width: 991px) {
  .hero-cursor-badge {
    transform: scale(0.9);
  }

  .cursor-badge-studio {
    top: -12px;
    right: 8%;
  }

  .cursor-badge-you {
    bottom: -6px;
    left: 10%;
  }
}

@media (max-width: 768px) {
  .hero-cursor-badge {
    transform: scale(0.8);
  }

  .cursor-badge-studio {
    top: -14px;
    right: 2%;
  }

  .cursor-badge-you {
    bottom: -8px;
    left: 2%;
  }
}

.hero-headline {
  font-size: clamp(2.8rem, 6vw, 4.8rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.045em;
  color: var(--text-heading);
  margin-bottom: 24px;
}

#hero .hero-headline {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.hero-subheadline {
  font-size: clamp(1.1rem, 2vw, 1.32rem);
  color: var(--text-secondary);
  line-height: 1.62;
  max-width: 820px;
  margin-bottom: 34px;
}

#hero .hero-subheadline {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.hero-reply-promise {
  font-size: 0.92rem;
  color: var(--text-muted);
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}

#hero .hero-reply-promise {
  justify-content: center;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.hero-reply-promise i {
  color: var(--accent-red);
}

/* Numbers Strip & SwiftForm Hero Metric Cards */
.swift-stat-card {
  background-color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 24px;
  padding: 28px 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.swift-stat-card:hover {
  transform: translateY(-5px);
  border-color: rgba(253, 3, 8, 0.35);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .swift-stat-card {
  background-color: #141A26;
  border-color: #242E42;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.swift-stat-card.featured {
  background: linear-gradient(145deg, #FFFFFF 0%, #FEF2F2 100%);
  border-color: var(--accent-red-border);
}

[data-theme="dark"] .swift-stat-card.featured {
  background: linear-gradient(145deg, #141A26 0%, #1F1520 100%);
  border-color: rgba(253, 3, 8, 0.3);
}

.swift-stat-number {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 1;
  color: var(--text-heading);
  letter-spacing: -0.04em;
  margin-bottom: 8px;
}

.swift-stat-number .red-plus {
  color: var(--accent-red);
}

.swift-stat-label {
  font-size: 0.92rem;
  color: var(--text-secondary);
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 8px;
}

.swift-stat-pill-cta {
  background-color: #090D16;
  color: #FFFFFF !important;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: var(--border-radius-btn);
  padding: 7px 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  width: fit-content;
  margin-top: 10px;
  transition: all var(--transition-fast);
}

.swift-stat-pill-cta:hover {
  background-color: var(--accent-red);
  transform: translateX(3px);
}

[data-theme="dark"] .swift-stat-pill-cta {
  background-color: #1E2638;
}

[data-theme="dark"] .swift-stat-pill-cta:hover {
  background-color: var(--accent-red);
}

/* --------------------------------------------------------------------------
   BY THE NUMBERS (PRECISION STATS ARCHETYPE - STANDALONE SECTION)
   -------------------------------------------------------------------------- */
.by-the-numbers-section {
  padding-top: 60px;
  padding-bottom: 65px;
  background-color: #FFFFFF;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  position: relative;
  z-index: 2;
}

[data-theme="dark"] .by-the-numbers-section {
  background-color: #0A0D14;
  border-top-color: var(--border-color);
  border-bottom-color: var(--border-color);
}

.by-the-numbers-wrap {
  width: 100%;
}

.numbers-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-pill);
  padding: 4px 14px 4px 5px;
  box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .numbers-pill-badge {
  background-color: var(--bg-surface);
  border-color: var(--border-color);
}

.numbers-badge-icon {
  width: 20px;
  height: 20px;
  background-color: var(--accent-red);
  color: #FFFFFF;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  flex-shrink: 0;
}

.numbers-badge-text {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-heading);
}

[data-theme="dark"] .numbers-badge-text {
  color: #FFFFFF;
}

.number-stat-item {
  display: flex;
  flex-direction: column;
}

.number-stat-val {
  font-family: var(--font-heading);
  font-size: clamp(3.2rem, 5.2vw, 4.75rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--text-heading);
  margin-bottom: 2px;
}

[data-theme="dark"] .number-stat-val {
  color: #FFFFFF;
}

.number-stat-dotted-line {
  border-top: 1.5px dotted #B8C2CC;
  margin: 18px 0 16px 0;
  width: 100%;
}

[data-theme="dark"] .number-stat-dotted-line {
  border-top-color: #334155;
}

.number-stat-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  line-height: 1.22;
}

.number-stat-desc {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 0;
}

.numbers-strip {
  margin-top: 60px;
  padding: 30px 36px;
  background-color: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
}

.stat-item {
  display: flex;
  flex-direction: column;
}

.stat-number {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 3.5vw, 3rem);
  font-weight: 800;
  line-height: 1;
  color: var(--text-heading);
  letter-spacing: -0.04em;
  margin-bottom: 6px;
}

.stat-number .red-plus {
  color: var(--accent-red);
}

.stat-label {
  font-size: 0.92rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   6. CLIENT STRIP
   -------------------------------------------------------------------------- */
.client-strip {
  padding: 36px 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  background-color: var(--bg-subtle);
}

.client-label {
  font-family: var(--font-heading);
  font-size: 0.84rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 18px;
  text-align: center;
}

.client-logo-box {
  padding: 12px 24px;
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all var(--transition-fast);
}

.client-logo-box:hover {
  border-color: var(--accent-red);
  color: var(--accent-red);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
   7. WHAT WE MAKE (SERVICES CARDS & SWIFTFORM SHOWCASE ARCHETYPE)
   -------------------------------------------------------------------------- */
.swift-services-frame {
  background-color: #F8FAFC;
  border: 1px solid #E8ECEF;
  border-radius: 36px;
  padding: 64px 44px 56px 44px;
  position: relative;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

[data-theme="dark"] .swift-services-frame {
  background-color: #0E131F;
  border-color: #242E42;
}

.swift-pill-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 16px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-pill);
  color: var(--accent-red);
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .swift-pill-badge {
  background-color: var(--bg-subtle);
  border-color: var(--border-color);
  color: var(--accent-red);
}

.swift-section-heading {
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 3.8vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.15;
  color: var(--text-heading);
  margin-bottom: 14px;
}

.swift-section-sub {
  font-size: 1.08rem;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 660px;
}

/* --------------------------------------------------------------------------
   EDITORIAL INTERACTIVE SERVICES SHOWCASE (AWWWARDS / STUDIO ARCHETYPE)
   -------------------------------------------------------------------------- */
.services-editorial-section {
  position: relative;
  background-color: var(--bg-body);
  transition: background-color var(--transition-fast);
}

[data-theme="dark"] .services-editorial-section {
  background-color: var(--bg-body);
}

.services-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-pill);
  padding: 6px 16px;
  font-family: var(--font-heading);
  font-size: 0.84rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-heading);
}

[data-theme="dark"] .services-badge-pill {
  background-color: var(--bg-surface);
  border-color: var(--border-color);
  color: var(--text-heading);
}

.services-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--accent-red);
  box-shadow: 0 0 10px rgba(253, 3, 8, 0.7);
  display: inline-block;
}

.services-list-container {
  display: flex;
  flex-direction: column;
}

/* Spotlight dimming effect on sibling list items when hovering container */
.services-list-container:hover .service-list-item:not(:hover) {
  opacity: 0.35;
  transform: scale(0.995);
}

.service-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 14px 24px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  text-decoration: none;
  color: inherit;
  transition: all 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

[data-theme="dark"] .service-list-item {
  border-bottom-color: rgba(255, 255, 255, 0.09);
}

.service-list-item:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .service-list-item:first-child {
  border-top-color: rgba(255, 255, 255, 0.09);
}

.service-item-main {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.service-item-num {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-muted);
  min-width: 32px;
  margin-top: 6px;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.service-item-content {
  display: flex;
  flex-direction: column;
}

.service-item-title {
  font-family: var(--font-heading);
  font-size: clamp(1.65rem, 2.9vw, 2.45rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--text-heading);
  line-height: 1.15;
  margin: 0;
  transition: color var(--transition-fast), transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-item-sub {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: 6px;
  transition: color var(--transition-fast);
}

.service-item-arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.65rem;
  color: var(--text-heading);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

[data-theme="dark"] .service-item-arrow {
  color: #FFFFFF;
}

/* Hover and Active states */
.service-list-item:hover,
.service-list-item.active {
  opacity: 1;
}

.service-list-item:hover .service-item-num,
.service-list-item.active .service-item-num {
  color: var(--accent-red);
}

.service-list-item:hover .service-item-title,
.service-list-item.active .service-item-title {
  color: var(--accent-red);
  transform: translateX(10px);
}

.service-list-item:hover .service-item-arrow,
.service-list-item.active .service-item-arrow {
  color: #FFFFFF;
  background-color: var(--accent-red);
  transform: translateX(6px) rotate(-15deg);
  box-shadow: 0 8px 20px rgba(253, 3, 8, 0.35);
}

/* Right Stage Preview Canvas */
.services-preview-stage {
  position: sticky;
  top: 110px;
}

.services-preview-card {
  background-color: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.05);
  position: relative;
  transition: all var(--transition-fast);
}

[data-theme="dark"] .services-preview-card {
  background-color: #111624;
  border-color: #242E42;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.service-preview-slide {
  display: none;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
}

.service-preview-slide.active {
  display: block;
  animation: serviceSlideFadeIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes serviceSlideFadeIn {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }

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

.preview-img-wrapper {
  position: relative;
  width: 100%;
  height: 270px;
  overflow: hidden;
  background-color: #0E131F;
}

.preview-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-preview-slide.active .preview-img-wrapper img {
  transform: scale(1.04);
}

.preview-badge-overlay {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
}

.preview-pill {
  background-color: rgba(9, 13, 22, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--border-radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.15);
  letter-spacing: 0.04em;
}

.preview-body {
  padding: 26px 24px 24px 24px;
}

.preview-tech-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.preview-tech-chips span {
  font-size: 0.74rem;
  font-weight: 600;
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: var(--border-radius-pill);
  padding: 3px 10px;
  color: var(--text-secondary);
}

[data-theme="dark"] .preview-tech-chips span {
  background-color: #192132;
  border-color: #2E3A52;
  color: #CBD5E1;
}

.preview-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-heading);
  letter-spacing: -0.025em;
  margin-bottom: 8px;
}

.preview-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 18px;
}

.preview-link {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent-red);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: gap var(--transition-fast);
}

.preview-link:hover {
  gap: 10px;
  color: var(--accent-red);
}

@media (max-width: 991px) {
  .services-preview-stage {
    position: relative;
    top: 0;
    margin-top: 24px;
  }

  .service-list-item {
    padding: 20px 0;
  }
}

.swift-bottom-cta-btn {
  background-color: #090D16;
  color: #FFFFFF !important;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 13px 32px;
  border-radius: var(--border-radius-btn);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(9, 13, 22, 0.15);
  transition: all 0.25s ease;
}

.swift-bottom-cta-btn:hover {
  background-color: var(--accent-red);
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(253, 3, 8, 0.25);
}

[data-theme="dark"] .swift-bottom-cta-btn {
  background-color: #1A2133;
  border: 1px solid #2E3A52;
}

[data-theme="dark"] .swift-bottom-cta-btn:hover {
  background-color: var(--accent-red);
  border-color: var(--accent-red);
}

/* --------------------------------------------------------------------------
   SWIFTFORM PROCESS WAVE ARCHETYPE
   -------------------------------------------------------------------------- */
.swift-process-frame {
  background-color: #F8FAFC;
  border: 1px solid #E8ECEF;
  border-radius: 36px;
  padding: 64px 44px 56px 44px;
  position: relative;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

[data-theme="dark"] .swift-process-frame {
  background-color: #0E131F;
  border-color: #242E42;
}

.swift-process-card {
  background-color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 22px;
  padding: 30px 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  position: relative;
}

.swift-process-card:hover {
  transform: translateY(-6px);
  border-color: rgba(253, 3, 8, 0.35);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(253, 3, 8, 0.15);
}

[data-theme="dark"] .swift-process-card {
  background-color: #141A26;
  border-color: #242E42;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .swift-process-card:hover {
  border-color: var(--accent-red);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(253, 3, 8, 0.3);
}

.swift-process-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.swift-process-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background-color: var(--accent-red-subtle);
  border: 1px solid var(--accent-red-border);
  color: var(--accent-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: all var(--transition-fast);
}

.swift-process-card:hover .swift-process-icon-box {
  background-color: var(--accent-red);
  color: #FFFFFF;
  border-color: var(--accent-red);
  transform: scale(1.08);
}

.swift-process-step-num {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text-muted);
  background-color: #F1F5F9;
  border-radius: var(--border-radius-pill);
  padding: 4px 10px;
  letter-spacing: 0.05em;
}

[data-theme="dark"] .swift-process-step-num {
  background-color: #1E2638;
  color: #94A3B8;
}

.swift-process-title {
  font-family: var(--font-heading);
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.swift-process-subtitle {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent-red);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.swift-process-desc {
  font-size: 0.89rem;
  color: var(--text-secondary);
  line-height: 1.58;
  margin-bottom: 18px;
}

.swift-process-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
}

[data-theme="dark"] .swift-process-tags {
  border-top-color: #242E42;
}

.swift-tag {
  font-size: 0.74rem;
  font-weight: 600;
  background-color: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: var(--border-radius-pill);
  padding: 3px 9px;
  color: var(--text-secondary);
}

[data-theme="dark"] .swift-tag {
  background-color: #1A2234;
  border-color: #2E3A52;
  color: #CBD5E1;
}

@media (max-width: 768px) {
  .swift-process-frame {
    padding: 38px 20px 32px 20px;
    border-radius: 28px;
  }
}

/* --------------------------------------------------------------------------
   SWIFTFORM WHY CHOOSE US ARCHETYPE
   -------------------------------------------------------------------------- */
.swift-why-box {
  background-color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 22px;
  padding: 34px 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.swift-why-box:hover {
  transform: translateY(-5px);
  border-color: rgba(253, 3, 8, 0.35);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .swift-why-box {
  background-color: #141A26;
  border-color: #242E42;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .swift-why-box:hover {
  border-color: var(--accent-red);
}

.swift-why-icon-box {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background-color: #F8FAFC;
  border: 1px solid #E2E8F0;
  color: var(--text-heading);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 22px;
  transition: all var(--transition-fast);
}

.swift-why-box:hover .swift-why-icon-box {
  background-color: var(--accent-red-subtle);
  border-color: var(--accent-red-border);
  color: var(--accent-red);
  transform: scale(1.08);
}

[data-theme="dark"] .swift-why-icon-box {
  background-color: #1A2234;
  border-color: #2E3A52;
  color: #FFFFFF;
}

.swift-why-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.025em;
  margin-bottom: 10px;
}

.swift-why-desc {
  font-size: 0.93rem;
  color: var(--text-secondary);
  line-height: 1.62;
}

/* --------------------------------------------------------------------------
   SWIFTFORM INTERACTIVE CONTACT ARCHETYPE ("HOW CAN WE HELP YOU?")
   -------------------------------------------------------------------------- */
.swift-contact-section {
  padding: 90px 0;
  background-color: #FFFFFF;
}

[data-theme="dark"] .swift-contact-section {
  background-color: var(--bg-body);
}

.swift-contact-lead-box {
  padding-right: 20px;
}

.swift-partner-card {
  background-color: #0E131F;
  border: 1px solid #242E42;
  border-radius: 20px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 28px 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.swift-partner-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #FD0308;
  flex-shrink: 0;
}

.swift-partner-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #10B981;
  display: inline-block;
  margin-right: 6px;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

.swift-partner-name {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 2px;
}

.swift-partner-role {
  font-size: 0.84rem;
  color: #94A3B8;
  display: flex;
  align-items: center;
}

.swift-checklist-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--text-heading);
  margin-bottom: 14px;
}

.swift-checklist-item i {
  color: #10B981;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.swift-contact-form-card {
  background-color: #F8FAFC;
  border: 1px solid #E8ECEF;
  border-radius: 28px;
  padding: 42px 38px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .swift-contact-form-card {
  background-color: #141A26;
  border-color: #242E42;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.swift-form-label {
  font-family: var(--font-heading);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 6px;
}

.swift-form-control {
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 0.94rem;
  color: var(--text-main);
  transition: all var(--transition-fast);
  width: 100%;
}

.swift-form-control:focus {
  border-color: var(--accent-red);
  box-shadow: 0 0 0 3px rgba(253, 3, 8, 0.12);
  outline: none;
}

[data-theme="dark"] .swift-form-control {
  background-color: #0E131F;
  border-color: #242E42;
  color: #FFFFFF;
}

.swift-submit-pill-btn {
  background-color: #090D16;
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.96rem;
  padding: 14px 34px;
  border-radius: var(--border-radius-btn);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s ease;
  width: fit-content;
}

.swift-submit-pill-btn:hover {
  background-color: var(--accent-red);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(253, 3, 8, 0.25);
}

[data-theme="dark"] .swift-submit-pill-btn {
  background-color: #1E2638;
  border: 1px solid #2E3A52;
}

[data-theme="dark"] .swift-submit-pill-btn:hover {
  background-color: var(--accent-red);
  border-color: var(--accent-red);
}

@media (max-width: 768px) {
  .swift-contact-lead-box {
    padding-right: 0;
    margin-bottom: 32px;
  }

  .swift-contact-form-card {
    padding: 30px 22px;
    border-radius: 22px;
  }
}

/* --------------------------------------------------------------------------
   SWIFTFORM TESTIMONIALS ARCHETYPE
   -------------------------------------------------------------------------- */
.swift-testimonial-card {
  background-color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 22px;
  padding: 30px 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  position: relative;
}

.swift-testimonial-card:hover {
  transform: translateY(-6px);
  border-color: rgba(253, 3, 8, 0.35);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .swift-testimonial-card {
  background-color: #141A26;
  border-color: #242E42;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.swift-testimonial-num {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  margin-bottom: 14px;
}

.swift-testimonial-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.96rem;
  color: var(--text-heading);
  margin-bottom: 16px;
}

.swift-testimonial-logo i {
  color: var(--accent-red);
  font-size: 1.15rem;
}

.swift-testimonial-quote {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.62;
  margin-bottom: 22px;
  font-style: italic;
}

.swift-testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
}

[data-theme="dark"] .swift-testimonial-author {
  border-top-color: #242E42;
}

.swift-testimonial-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #E2E8F0;
}

.swift-testimonial-name {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 1px;
}

.swift-testimonial-role {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.swift-nav-pill-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  color: var(--text-heading);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.swift-nav-pill-btn:hover {
  background-color: var(--accent-red);
  border-color: var(--accent-red);
  color: #FFFFFF;
  transform: scale(1.06);
}

[data-theme="dark"] .swift-nav-pill-btn {
  background-color: #1A2133;
  border-color: #2E3A52;
  color: #FFFFFF;
}

[data-theme="dark"] .swift-nav-pill-btn:hover {
  background-color: var(--accent-red);
  border-color: var(--accent-red);
}

/* --------------------------------------------------------------------------
   SWIFTFORM BLOG & JOURNAL ARCHETYPE
   -------------------------------------------------------------------------- */
.swift-blog-frame {
  background-color: #F8FAFC;
  border: 1px solid #E8ECEF;
  border-radius: 36px;
  padding: 64px 44px 56px 44px;
  position: relative;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

[data-theme="dark"] .swift-blog-frame {
  background-color: #0E131F;
  border-color: #242E42;
}

.swift-blog-card {
  background-color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 24px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  text-decoration: none;
  color: inherit;
}

.swift-blog-card:hover {
  transform: translateY(-6px);
  border-color: rgba(253, 3, 8, 0.35);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(253, 3, 8, 0.15);
  color: inherit;
}

[data-theme="dark"] .swift-blog-card {
  background-color: #141A26;
  border-color: #242E42;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .swift-blog-card:hover {
  border-color: var(--accent-red);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(253, 3, 8, 0.3);
}

.swift-blog-img-wrap {
  position: relative;
  width: 100%;
  height: 210px;
  overflow: hidden;
  background-color: #F1F5F9;
}

.swift-blog-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.swift-blog-card:hover .swift-blog-img-wrap img {
  transform: scale(1.05);
}

.swift-blog-body {
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.swift-blog-meta-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  font-size: 0.8rem;
}

.swift-blog-tag {
  background-color: var(--accent-red-subtle);
  color: var(--accent-red);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.76rem;
  padding: 3px 10px;
  border-radius: var(--border-radius-pill);
  border: 1px solid var(--accent-red-border);
  letter-spacing: 0.03em;
}

[data-theme="dark"] .swift-blog-tag {
  background-color: rgba(253, 3, 8, 0.12);
  border-color: rgba(253, 3, 8, 0.3);
}

.swift-blog-time {
  color: var(--text-muted);
  font-weight: 500;
}

.swift-blog-title {
  font-family: var(--font-heading);
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.025em;
  line-height: 1.32;
  margin-bottom: 12px;
  transition: color var(--transition-fast);
}

.swift-blog-card:hover .swift-blog-title {
  color: var(--accent-red);
}

.swift-blog-excerpt {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
}

.swift-blog-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.84rem;
}

[data-theme="dark"] .swift-blog-footer {
  border-top-color: #242E42;
}

.swift-blog-author {
  color: var(--text-muted);
  font-weight: 500;
}

.swift-blog-cta {
  color: var(--accent-red);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: transform var(--transition-fast);
}

.swift-blog-card:hover .swift-blog-cta i {
  transform: translateX(4px);
}

@media (max-width: 768px) {
  .swift-blog-frame {
    padding: 38px 20px 32px 20px;
    border-radius: 28px;
  }
}

.swift-bottom-cta-btn {
  background-color: #090D16;
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 14px 34px;
  border-radius: var(--border-radius-btn);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: all 0.25s ease;
  border: 1px solid transparent;
}

.swift-bottom-cta-btn:hover {
  background-color: var(--accent-red);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(253, 3, 8, 0.25);
}

[data-theme="dark"] .swift-bottom-cta-btn {
  background-color: #1E2638;
  border-color: #2E3A52;
}

[data-theme="dark"] .swift-bottom-cta-btn:hover {
  background-color: var(--accent-red);
  border-color: var(--accent-red);
}

.service-card {
  background-color: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: 36px 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all var(--transition-smooth);
  position: relative;
}

.service-card:hover {
  border-color: var(--accent-red);
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

.service-card-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--border-radius-md);
  background-color: var(--accent-red-subtle);
  border: 1px solid var(--accent-red-border);
  color: var(--accent-red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 22px;
  transition: all var(--transition-smooth);
}

.service-card:hover .service-card-icon {
  background-color: var(--accent-red);
  color: #FFFFFF;
  transform: scale(1.08);
}

.service-card-title {
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: 12px;
  color: var(--text-heading);
}

.service-card-text {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 22px;
}

/* --------------------------------------------------------------------------
   8. AI & AUTOMATION SPOTLIGHT
   -------------------------------------------------------------------------- */
.ai-spotlight-box {
  background: linear-gradient(145deg, #FFFFFF 0%, #FFF7F7 100%);
  border: 2px solid var(--accent-red-border);
  border-radius: 28px;
  padding: 60px 48px;
  box-shadow: 0 16px 40px rgba(253, 3, 8, 0.05);
  position: relative;
  overflow: hidden;
}

@media (max-width: 768px) {
  .ai-spotlight-box {
    padding: 36px 24px;
  }
}

.ai-feature-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-pill);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.ai-feature-pill:hover {
  border-color: var(--accent-red);
  color: var(--accent-red);
  background-color: var(--accent-red-subtle);
}

.ai-feature-pill i {
  color: var(--accent-red);
}

.ai-bullet-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 0.98rem;
  color: var(--text-body);
}

.ai-bullet-item i {
  color: var(--accent-red);
  font-size: 1.15rem;
  margin-top: 2px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   9. INDUSTRIES SECTION (ANIMATED SLIT ACCORDION SHOWCASE ARCHETYPE)
   -------------------------------------------------------------------------- */
/* Sector Filter Pills */
.industry-selector-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.industry-pill-btn {
  background-color: #FFFFFF;
  color: var(--text-heading);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-btn);
  /* 4px square radius as required */
  padding: 8px 18px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.industry-pill-btn:hover {
  border-color: var(--accent-red);
  color: var(--accent-red);
  background-color: var(--accent-red-subtle);
}

.industry-pill-btn.active {
  background-color: var(--accent-red);
  color: #FFFFFF;
  border-color: var(--accent-red);
  box-shadow: 0 4px 14px rgba(253, 3, 8, 0.28);
}

[data-theme="dark"] .industry-pill-btn {
  background-color: var(--bg-surface);
  color: #FFFFFF;
  border-color: var(--border-color);
}

[data-theme="dark"] .industry-pill-btn:hover {
  background-color: var(--accent-red-subtle);
  color: var(--accent-red);
  border-color: var(--accent-red);
}

[data-theme="dark"] .industry-pill-btn.active {
  background-color: var(--accent-red);
  color: #FFFFFF;
  border-color: var(--accent-red);
}

/* Status indicator badge */
.marquee-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background-color: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-btn);
  /* 4px square radius */
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
}

[data-theme="dark"] .marquee-status-badge {
  background-color: var(--bg-surface);
  border-color: var(--border-color);
  color: var(--text-muted);
}

.pulse-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #10B981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: pulseGreen 2s infinite;
}

@keyframes pulseGreen {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

/* --------------------------------------------------------------------------
   9. INDUSTRY FOCUS SECTION (FRAMER-STYLE DUAL-TRACK PORTRAIT TILES SHOWCASE)
   Matches Reference: Tall portrait rounded mockup tiles on deep dark canvas
   -------------------------------------------------------------------------- */
#industries {
  background-color: #000000 !important;
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
}

#industries .section-title {
  color: #FFFFFF !important;
}

#industries .section-intro {
  color: #94A3B8 !important;
}

#industries .eyebrow-badge {
  background-color: rgba(253, 3, 8, 0.12);
  border-color: rgba(253, 3, 8, 0.28);
  color: var(--accent-red);
}

#industries .marquee-status-badge {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: #CBD5E1;
}

#industries .industry-pill-btn {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #CBD5E1;
  transition: all var(--transition-fast);
}

#industries .industry-pill-btn:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.25);
}

#industries .industry-pill-btn.active {
  background-color: var(--accent-red);
  border-color: var(--accent-red);
  color: #FFFFFF;
}


/* Marquee Outer Container Frame */
.industry-marquee-frame {
  position: relative;
  width: 100%;
  padding: 30px 0 45px 0;
  background: #000000 !important;
  background-color: #000000 !important;
  border-radius: 0 !important;
  overflow: hidden;
  box-shadow: none !important;
  border: none !important;
}

.industry-marquee-frame::before {
  display: none !important;
}

/* Edge Fade Gradients for Seamless Entrance/Exit */
.marquee-edge-gradient {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(70px, 9vw, 160px);
  z-index: 10;
  pointer-events: none;
}

.marquee-edge-left {
  left: 0;
  background: linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0.85) 45%, transparent 100%) !important;
}

.marquee-edge-right {
  right: 0;
  background: linear-gradient(270deg, #000000 0%, rgba(0, 0, 0, 0.85) 45%, transparent 100%) !important;
}

/* Marquee Row Container */
.industry-marquee-row {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 8px 0;
  z-index: 1;
}

/* Marquee Animated Tracks */
.industry-marquee-track {
  display: flex;
  gap: 20px;
  width: max-content;
  will-change: transform;
}

.industry-marquee-track.track-left {
  animation: marqueeScrollLeft 45s linear infinite;
}

.industry-marquee-track.track-right {
  animation: marqueeScrollRight 45s linear infinite;
}

/* Pause marquee animation on hover or focus */
.industry-marquee-frame:hover .industry-marquee-track,
.industry-marquee-frame:focus-within .industry-marquee-track,
.industry-marquee-track.is-paused {
  animation-play-state: paused;
}

@keyframes marqueeScrollLeft {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes marqueeScrollRight {
  0% {
    transform: translate3d(-50%, 0, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

/* Portrait Mockup Card (1:1 with Reference Design) */
.industry-marquee-card {
  position: relative;
  display: block;
  width: 290px;
  height: 390px;
  flex-shrink: 0;
  border-radius: 28px;
  overflow: hidden;
  background-color: #0E121C;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7);
  text-decoration: none;
  color: #FFFFFF;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s ease,
    opacity 0.35s ease,
    filter 0.35s ease;
  user-select: none;
}

.industry-marquee-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 30px 65px rgba(0, 0, 0, 0.85);
  color: #FFFFFF;
}

/* Dim non-highlighted cards when a sector filter is active */
.industry-marquee-card.card-dimmed {
  opacity: 0.24;
  filter: grayscale(0.65) brightness(0.7);
  transform: scale(0.97);
}

.industry-marquee-card.card-highlighted {
  opacity: 1;
  filter: none;
  border-color: var(--accent-red);
  box-shadow: 0 16px 40px rgba(253, 3, 8, 0.4), 0 0 0 1.5px var(--accent-red);
}

/* Card Media & Full-Bleed Image */
.industry-card-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 28px;
}

.industry-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 28px;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;
  filter: brightness(0.9) contrast(1.06) saturate(1.1);
}

/* Base dark vignette at the bottom */
.industry-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(5, 7, 15, 0.95) 0%, rgba(5, 7, 15, 0.7) 40%, rgba(5, 7, 15, 0.2) 75%, transparent 100%);
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
  transition: opacity 0.35s ease;
}

/* Per-sector color overlay using ::before (sits between image and vignette) */
.industry-card-media::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
  transition: opacity 0.4s ease;
}

.industry-marquee-card:hover .industry-card-media::before {
  opacity: 0.45;
}

.industry-marquee-card:hover .industry-card-media img {
  transform: scale(1.06);
  filter: brightness(1.0) contrast(1.08) saturate(1.2);
}

/* ── Per-Sector Color Overlays ─────────────────────────────────────────────── */

/* Retail & eCommerce — Violet Purple */
[data-sector="retail"] .industry-card-media::before {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.9) 0%, rgba(55, 10, 120, 0.6) 100%);
}

[data-sector="retail"] {
  border-color: rgba(124, 58, 237, 0.25);
}



/* Brand & Product Design / Hospitality — Rose Pink */
[data-sector="hospitality"] .industry-card-media::before {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.9) 0%, rgba(100, 15, 60, 0.6) 100%);
}

[data-sector="hospitality"] {
  border-color: rgba(236, 72, 153, 0.25);
}



/* Finance & Fintech — Emerald Green */
[data-sector="fintech"] .industry-card-media::before {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.9) 0%, rgba(5, 60, 40, 0.6) 100%);
}

[data-sector="fintech"] {
  border-color: rgba(16, 185, 129, 0.25);
}


/* Healthcare & Wellness — Cyan Sky Blue */
[data-sector="healthcare"] .industry-card-media::before {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.9) 0%, rgba(3, 60, 85, 0.6) 100%);
}

[data-sector="healthcare"] {
  border-color: rgba(6, 182, 212, 0.25);
}



/* Startups, SaaS & AI — Amber Orange */
[data-sector="saas"] .industry-card-media::before {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.9) 0%, rgba(100, 50, 5, 0.6) 100%);
}

[data-sector="saas"] {
  border-color: rgba(245, 158, 11, 0.25);
}



/* Education & EdTech — Deep Indigo */
[data-sector="edtech"] .industry-card-media::before {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.9) 0%, rgba(30, 20, 90, 0.6) 100%);
}

[data-sector="edtech"] {
  border-color: rgba(99, 102, 241, 0.25);
}



/* Real Estate & PropTech — Warm Orange */
[data-sector="proptech"] .industry-card-media::before {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.9) 0%, rgba(100, 30, 5, 0.6) 100%);
}

[data-sector="proptech"] {
  border-color: rgba(249, 115, 22, 0.25);
}



/* Logistics & Delivery — Ocean Blue */
[data-sector="logistics"] .industry-card-media::before {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.9) 0%, rgba(10, 30, 90, 0.6) 100%);
}

[data-sector="logistics"] {
  border-color: rgba(59, 130, 246, 0.25);
}



/* Bottom Title Text (Centered Clean Typography, No Box) */
.industry-card-info {
  position: absolute;
  bottom: 24px;
  left: 16px;
  right: 16px;
  z-index: 4;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.industry-marquee-card:hover .industry-card-info {
  background: transparent;
  border: none;
  box-shadow: none;
}

.industry-card-name {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1.5vw, 1.45rem);
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
  text-align: center;
  width: 100%;
  letter-spacing: -0.025em;
  line-height: 1.25;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.industry-marquee-card:hover .industry-card-name {
  color: #FFFFFF;
  transform: translateY(-2px);
}

.industry-card-action {
  display: none !important;
}

/* Responsive adjustments for mobile/tablet */
@media (max-width: 991px) {
  .industry-marquee-card {
    width: 250px;
    height: 335px;
    border-radius: 22px;
  }

  .industry-card-media,
  .industry-card-media img {
    border-radius: 22px;
  }

  .marquee-edge-gradient {
    width: 70px;
  }

  .industry-card-info {
    bottom: 18px;
    left: 18px;
    right: 18px;
    padding: 0;
  }

  .industry-card-name {
    font-size: 1.15rem;
  }
}

@media (max-width: 576px) {
  .industry-marquee-card {
    width: 220px;
    height: 295px;
    border-radius: 18px;
  }

  .industry-card-media,
  .industry-card-media img {
    border-radius: 18px;
  }
}

@media (max-width: 576px) {
  .industry-marquee-frame {
    padding: 20px 0;
    border-radius: 16px;
  }

  .marquee-edge-gradient {
    width: 35px;
  }
}

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

  .industry-marquee-track.track-left,
  .industry-marquee-track.track-right {
    animation: none;
  }

  .industry-marquee-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Legacy .industry-card fallback for other subpages */
.industry-card {
  background-color: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  padding: 24px;
  height: 100%;
  transition: all var(--transition-smooth);
}

.industry-card:hover {
  border-color: var(--accent-red);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.industry-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background-color: var(--bg-subtle);
  color: var(--accent-red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 16px;
}

.industry-card:hover .industry-card-icon {
  background-color: var(--accent-red);
  color: #FFFFFF;
}

.industry-card-title {
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 6px;
  color: var(--text-heading);
}

.industry-card-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Responsive Slit Accordion */
@media (max-width: 991.98px) {
  .industry-slit-frame {
    flex-direction: column;
    height: auto;
    min-height: 640px;
  }

  .industry-slit-panel {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    min-height: 56px;
    flex: initial;
    height: 56px;
  }

  .industry-slit-panel:last-child {
    border-bottom: none;
  }

  .industry-slit-panel.active {
    flex: initial;
    height: 380px;
  }

  .industry-slit-collapsed {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 0 20px;
    gap: 12px;
  }

  .collapsed-num {
    margin-bottom: 0;
  }

  .collapsed-title {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 0.95rem;
  }

  .industry-slit-glass-bar {
    left: 16px;
    right: 16px;
    bottom: 16px;
    padding: 12px 18px;
  }

  .glass-bar-line {
    display: none;
  }

  .glass-bar-title {
    font-size: 1.05rem;
  }

  .glass-bar-tags {
    font-size: 0.78rem;
  }
}

@media (max-width: 575.98px) {
  .glass-bar-tags {
    display: none;
  }

  .industry-slit-glass-bar {
    padding: 10px 14px;
  }
}


/* --------------------------------------------------------------------------
   10. SELECTED WORK / FRAMER-STYLE ANIMATED STACKING CARDS SHOWCASE
   -------------------------------------------------------------------------- */
.projects-stack-container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-bottom: 40px;
}

/* Framer-grade Sticky Stacking Card */
.project-stack-card {
  position: sticky;
  border-radius: 24px;
  overflow: hidden;
  background-color: #FFFFFF;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease;
  transform-origin: center top;
  will-change: transform, filter;
}

/* Staggered Sticky Top Offsets (Matching peek-through in reference screenshot) */
.project-stack-card[data-stack-index="0"] {
  top: 80px;
  z-index: 1;
}

.project-stack-card[data-stack-index="1"] {
  top: 125px;
  z-index: 2;
}

.project-stack-card[data-stack-index="2"] {
  top: 170px;
  z-index: 3;
}

/* Card Internal Layout */
.stack-card-inner {
  padding: 40px 44px;
  min-height: 540px;
  display: flex;
  flex-direction: column;
}

.stack-card-left {
  height: 100%;
}

/* Top Metadata Counter & Year */
.stack-meta-top {
  width: 100%;
}

.stack-counter {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.stack-year {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* Middle Content */
.stack-body-content {
  padding: 10px 0;
}

.stack-project-title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 4.4vw, 3.8rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--text-heading);
  margin-top: 18px;
  margin-bottom: 6px;
}

.stack-project-sub {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 18px;
}

.stack-project-desc {
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--text-body);
  max-width: 480px;
  margin-bottom: 22px;
}

/* Tag Pills (Square 4px radius strictly preserved) */
.stack-tags-row {
  margin-top: 8px;
}

.stack-tag-pill {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-heading);
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  border-radius: var(--border-radius-btn);
  /* 4px square radius */
  padding: 6px 14px;
  transition: all var(--transition-fast);
}

.stack-tag-pill:hover {
  border-color: var(--accent-red);
  color: var(--accent-red);
}

/* Prominent Bottom Metric & Arrow CTA */
.stack-metric-row {
  width: 100%;
  margin-top: auto;
}

.stack-metric-number {
  font-family: var(--font-heading);
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--accent-red);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}

.stack-metric-caption {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.35;
}

/* Diagonal Arrow Action Button & Case Study Button */
.btn-case-study {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background-color: var(--text-heading);
  color: #FFFFFF !important;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 9px 18px 9px 20px;
  border-radius: var(--border-radius-btn);
  /* 4px square radius strictly preserved */
  text-decoration: none;
  transition: all var(--transition-smooth);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15);
  white-space: nowrap;
}

.btn-case-study:hover {
  background-color: var(--accent-red);
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(253, 3, 8, 0.35);
}

.case-study-arrow-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: #FFFFFF;
  color: #0F172A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  transition: transform var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}

.btn-case-study:hover .case-study-arrow-circle {
  transform: translateX(4px);
  background-color: #FFFFFF;
  color: var(--accent-red);
}

.stack-arrow-btn {
  width: 48px;
  height: 48px;
  background-color: var(--text-heading);
  color: #FFFFFF;
  border-radius: var(--border-radius-btn);
  /* 4px square radius */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  text-decoration: none;
  transition: all var(--transition-smooth);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
  flex-shrink: 0;
}

.project-stack-card:hover .stack-arrow-btn {
  background-color: var(--accent-red);
  color: #FFFFFF;
  transform: translate(3px, -3px);
  box-shadow: 0 8px 20px rgba(253, 3, 8, 0.35);
}

/* Right Visual Showcase Full-Bleed Frame (Matching Screenshot) */
.stack-card-right {
  height: 100%;
}

.stack-visual-bleed {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 520px;
  overflow: hidden;
  background-color: #0F172A;
}

.stack-visual-bleed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  display: block;
}

.project-stack-card:hover .stack-visual-bleed img {
  transform: scale(1.04);
}

/* Dark Theme Adaptations */
[data-theme="dark"] .project-stack-card {
  background-color: #0D121F;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .stack-project-title {
  color: #FFFFFF;
}

[data-theme="dark"] .stack-project-sub {
  color: #94A3B8;
}

[data-theme="dark"] .stack-project-desc {
  color: #CBD5E1;
}

[data-theme="dark"] .stack-tag-pill {
  background: #151D2E;
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .btn-case-study {
  background-color: #1E293B;
}

[data-theme="dark"] .case-study-arrow-circle {
  background-color: #FFFFFF;
  color: #0F172A;
}

/* Mobile & Tablet Responsiveness */
@media (max-width: 991.98px) {
  .project-stack-card {
    position: relative;
    top: auto !important;
    margin-bottom: 24px;
    border-radius: 20px;
  }

  .stack-card-inner {
    padding: 28px 20px;
    min-height: auto;
  }

  .stack-project-title {
    font-size: 2.2rem;
    margin-top: 14px;
    margin-bottom: 6px;
  }

  .stack-visual-bleed {
    min-height: 280px;
    height: 280px;
  }

  .stack-metric-number {
    font-size: 2.2rem;
  }

  .btn-case-study {
    padding: 8px 16px;
    font-size: 0.85rem;
  }
}

/* Legacy .project-card fallback for other subpages */
.project-card {
  background-color: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all var(--transition-smooth);
}

.project-card:hover {
  border-color: var(--accent-red);
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

.project-card-visual {
  height: 220px;
  background: linear-gradient(135deg, #F8FAFC 0%, #EEF2F6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-bottom: 1px solid var(--border-color);
  overflow: hidden;
}

.project-card-body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.project-category-badge {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-red);
  margin-bottom: 8px;
}

.project-title {
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: 10px;
  color: var(--text-heading);
}

.project-summary {
  font-size: 0.94rem;
  color: var(--text-secondary);
  margin-bottom: 16px;
  line-height: 1.55;
}

.project-outcome-box {
  background-color: var(--bg-subtle);
  border-left: 3px solid var(--accent-red);
  padding: 10px 14px;
  border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
  font-size: 0.88rem;
  color: var(--text-main);
  margin-bottom: 20px;
  margin-top: auto;
}

/* --------------------------------------------------------------------------
   11. THE PROCESS BEHIND DESIGN (5 PILLAR CARDS ARCHETYPE)
   -------------------------------------------------------------------------- */
.process-editorial-section {
  background-color: var(--bg-body);
  padding: 110px 0;
  position: relative;
  width: 100%;
}

.process-editorial-section .container-xl {
  width: 100% !important;
  max-width: 100% !important;
}

[data-theme="dark"] .process-editorial-section {
  background-color: #080C14;
}

.process-behind-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.process-line-sub {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4.4vw, 3.8rem);
  font-weight: 600;
  color: #71717A;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

[data-theme="dark"] .process-line-sub {
  color: #94A3B8;
}

.process-line-main {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4.4vw, 3.8rem);
  font-weight: 800;
  color: #09090B;
  line-height: 1.08;
  letter-spacing: -0.04em;
  margin-top: 2px;
  margin-bottom: 0;
}

[data-theme="dark"] .process-line-main {
  color: #FFFFFF;
}

/* 5 Slender Pillar Grid */
.process-pillars-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 52px;
  width: 100%;
  max-width: 100%;
  align-items: start;
  /* cards never stretch each other on hover */
}

/* ── FLIP CARD SHELL ────────────────────────────────────────────────────── */
.process-pillar-card {
  height: 480px;
  border-radius: 20px;
  cursor: pointer;
  position: relative;
  /* No perspective here — perspective on a parent affects layout geometry    */
  /* and causes the card to appear taller/shorter during 3D rotation.         */
  /* Instead we use perspective() as a transform function on the inner below. */
  background: transparent;
  border: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  /* fixed — never changes */
}

/* Inner wrapper that actually flips */
.proc-pillar-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  /* perspective() as a transform fn is purely visual — zero layout impact */
  transform: perspective(1200px) rotateY(0deg);
  transition: transform 0.6s cubic-bezier(0.45, 0, 0.55, 1);
  border-radius: 20px;
  will-change: transform;
}

.process-pillar-card:hover .proc-pillar-inner {
  transform: perspective(1200px) rotateY(180deg);
}

/* Shared face styles */
.proc-pillar-face {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 34px 22px 26px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  height: 100%;
}

/* ── FRONT FACE — White ──────────────────────────────────────────────────── */
.proc-pillar-front {
  background-color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.10);
  box-shadow: none;
  /* shadow lives on shell, not faces */
  transform: rotateY(0deg);
}

.proc-pillar-front .proc-pillar-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: #0A0A0C;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.proc-pillar-front .proc-pillar-desc {
  font-size: 0.86rem;
  line-height: 1.5;
  color: #4B5563;
  margin-bottom: 0;
}

.proc-pillar-front .proc-pillar-icon-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #0A0A0C;
  color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── BACK FACE — Image + Color Overlay ──────────────────────────────────── */
.proc-pillar-back {
  background-color: #0A0A0C;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: none;
  /* match front — no extra shadow so hover = normal state */
  transform: rotateY(180deg);
  position: relative;
  overflow: hidden;
}

/* Color overlay on top of image */
.proc-pillar-back::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  z-index: 0;
  transition: opacity 0.4s ease;
}

/* All text/icons sit above the overlay */
.proc-pillar-back .proc-pillar-top,
.proc-pillar-back .proc-pillar-bottom {
  position: relative;
  z-index: 1;
}

/* Card 1: Explore — Violet/Indigo overlay + edtech prism */


[data-card="explore"] .proc-pillar-back::before {
  background: linear-gradient(160deg, rgba(99, 52, 220, 0.82) 0%, rgba(30, 10, 80, 0.92) 100%);
}

/* Card 2: Planning — Ocean Blue overlay + saas automation */


[data-card="planning"] .proc-pillar-back::before {
  background: linear-gradient(160deg, rgba(14, 90, 200, 0.82) 0%, rgba(5, 25, 70, 0.92) 100%);
}

/* Card 3: Refinement — Emerald Green overlay + retail glow */


[data-card="refinement"] .proc-pillar-back::before {
  background: linear-gradient(160deg, rgba(5, 150, 105, 0.82) 0%, rgba(2, 44, 34, 0.92) 100%);
}

/* Card 4: Design — Rose/Crimson overlay + editorial snape */


[data-card="design"] .proc-pillar-back::before {
  background: linear-gradient(160deg, rgba(220, 38, 38, 0.82) 0%, rgba(80, 5, 10, 0.92) 100%);
}

/* Card 5: Delivery — Amber/Orange overlay + logistics cargo */


[data-card="delivery"] .proc-pillar-back::before {
  background: linear-gradient(160deg, rgba(217, 119, 6, 0.82) 0%, rgba(80, 35, 2, 0.92) 100%);
}

.proc-pillar-back .proc-pillar-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.proc-pillar-back .proc-pillar-desc {
  font-size: 0.86rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.proc-pillar-back .proc-pillar-icon-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #FFFFFF;
  color: #0A0A0C;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: rotate(45deg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ── Top / Bottom wrappers inside each face ─────────────────────────────── */
.proc-pillar-top {
  display: flex;
  flex-direction: column;
}

.proc-pillar-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  margin-top: auto;
}

/* ── Legacy variant classes (kept for backwards-compat, now all white front) */
.process-pillar-card.card-dark .proc-pillar-front,
.process-pillar-card.card-light .proc-pillar-front,
.process-pillar-card.is-featured .proc-pillar-front {
  background-color: #FFFFFF;
}

/* ── Dark Mode ───────────────────────────────────────────────────────────── */
[data-theme="dark"] .proc-pillar-front {
  background-color: #1A2234;
  border-color: rgba(255, 255, 255, 0.10);
}

[data-theme="dark"] .proc-pillar-front .proc-pillar-title {
  color: #FFFFFF;
}

[data-theme="dark"] .proc-pillar-front .proc-pillar-desc {
  color: #94A3B8;
}

[data-theme="dark"] .proc-pillar-front .proc-pillar-icon-badge {
  background-color: #FFFFFF;
  color: #0A0A0C;
}

[data-theme="dark"] .proc-pillar-back {
  background-color: #000000;
  border-color: rgba(255, 255, 255, 0.08);
}

/* Tablet & Mobile: Smooth Horizontal Swipe Track */
@media (max-width: 1100px) {
  .process-pillars-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding: 12px 16px 28px 16px;
    margin: 36px -16px 0 -16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .process-pillars-grid::-webkit-scrollbar {
    display: none;
  }

  .process-pillar-card {
    flex: 0 0 236px;
    scroll-snap-align: start;
    height: 450px;
  }

  .proc-pillar-face {
    padding: 30px 20px 24px 20px;
  }
}

/* --------------------------------------------------------------------------
   12. MODERN TECHNOLOGY STACK SECTION (#technology)
   -------------------------------------------------------------------------- */
#technology .container-xl {
  width: 100% !important;
  max-width: 100% !important;
}

.tech-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.tech-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-red);
  box-shadow: var(--shadow-md);
}

[data-theme="dark"] .tech-card {
  background-color: #0E121B;
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .tech-card:hover {
  border-color: var(--accent-red);
  background-color: #131926;
}

.tech-card>i {
  font-size: 1.85rem;
  color: var(--accent-red);
  flex-shrink: 0;
  line-height: 1;
}

.tech-card-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.96rem;
  color: var(--text-heading);
  line-height: 1.25;
  margin-bottom: 2px;
}

.tech-card-category {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.3;
}

/* --------------------------------------------------------------------------
   13. WHY PRIXEL SECTION CONTAINER (#why-prixel)
   -------------------------------------------------------------------------- */
#why-prixel .container-xl,
#why-prixel .container-fluid {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: clamp(14px, 2vw, 28px) !important;
  padding-right: clamp(14px, 2vw, 28px) !important;
}

/* --------------------------------------------------------------------------
   14. FLEXIBLE PLANS & PRICING (#pricing)
   -------------------------------------------------------------------------- */
.pricing-plans-section {
  background-color: var(--bg-body);
  padding: 100px 0;
  position: relative;
  width: 100%;
}

.pricing-plans-section .container-xl {
  width: 100% !important;
  max-width: 100% !important;
}

[data-theme="dark"] .pricing-plans-section {
  background-color: #080C14;
}

.pricing-plans-headline {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4.2vw, 3.5rem);
  font-weight: 800;
  color: var(--text-heading);
  line-height: 1.1;
  letter-spacing: -0.04em;
  margin-bottom: 0;
}

.pricing-card {
  border-radius: 26px;
  padding: 44px 38px;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s ease;
}

.pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.14);
}

.pricing-card-light {
  background-color: #F4F4F6;
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: #111827;
}

.pricing-card-dark {
  background-color: #0A0A0C;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .pricing-card-light {
  background-color: #151C2C;
  border-color: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}

[data-theme="dark"] .pricing-card-dark {
  background-color: #090C14;
  border-color: rgba(255, 255, 255, 0.06);
}

.pricing-top-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  align-self: flex-start;
}

.pricing-top-badge.badge-light {
  background: rgba(0, 0, 0, 0.06);
  color: #111827;
}

[data-theme="dark"] .pricing-top-badge.badge-light {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}

.pricing-top-badge.badge-dark {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}

.pricing-red-dot {
  color: var(--accent-red);
  font-size: 0.75rem;
  line-height: 1;
}

.pricing-plan-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin-top: 24px;
  margin-bottom: 14px;
}

.pricing-card-light .pricing-plan-title {
  color: #111827;
}

[data-theme="dark"] .pricing-card-light .pricing-plan-title {
  color: #FFFFFF;
}

.pricing-card-dark .pricing-plan-title {
  color: #FFFFFF;
}

.pricing-plan-desc {
  font-size: 0.95rem;
  line-height: 1.55;
  margin-bottom: 30px;
}

.pricing-card-light .pricing-plan-desc {
  color: #4B5563;
}

[data-theme="dark"] .pricing-card-light .pricing-plan-desc {
  color: #94A3B8;
}

.pricing-card-dark .pricing-plan-desc {
  color: #A1A1AA;
}

.pricing-rate-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px 22px;
  border-radius: 999px;
}

.rate-pill-dark {
  background-color: #0A0A0C;
  color: #FFFFFF;
}

.rate-pill-light {
  background-color: #FFFFFF;
  color: #0A0A0C;
}

.rate-prefix {
  font-size: 0.85rem;
  font-weight: 500;
  opacity: 0.8;
}

.rate-amount {
  font-family: var(--font-heading);
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.rate-period {
  font-size: 0.85rem;
  font-weight: 500;
  opacity: 0.8;
}

.pricing-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid rgba(128, 128, 128, 0.16);
  margin-top: 28px;
}

.pricing-worldwide {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  opacity: 0.75;
}

.pricing-card-arrow-btn {
  width: 44px;
  height: 44px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  transition: all 0.25s ease;
  text-decoration: none;
}

.pricing-card-light .pricing-card-arrow-btn {
  background-color: #0A0A0C;
  color: #FFFFFF;
}

.pricing-card-light .pricing-card-arrow-btn:hover {
  background-color: var(--accent-red);
  color: #FFFFFF;
  transform: translate(2px, -2px);
}

.pricing-card-dark .pricing-card-arrow-btn {
  background-color: #FFFFFF;
  color: #0A0A0C;
}

.pricing-card-dark .pricing-card-arrow-btn:hover {
  background-color: var(--accent-red);
  color: #FFFFFF;
  transform: translate(2px, -2px);
}

@media (max-width: 768px) {
  .pricing-card {
    padding: 34px 24px;
    min-height: auto;
  }
}

/* --------------------------------------------------------------------------
   15. TESTIMONIALS SECTION CONTAINER (#testimonials)
   -------------------------------------------------------------------------- */
#testimonials .container-xl {
  width: 100% !important;
  max-width: 100% !important;
}

/* --------------------------------------------------------------------------
   16. QUESTIONS PEOPLE ASK (EDITORIAL CAPSULE FAQ - #faq)
   Matches Editorial Reference: media__1791631708526.png
   -------------------------------------------------------------------------- */
.faq-editorial-section {
  background-color: var(--bg-body);
  padding: 110px 0;
  position: relative;
  width: 100%;
}

.faq-editorial-section .container-xl {
  width: 100% !important;
  max-width: 100% !important;
}

[data-theme="dark"] .faq-editorial-section {
  background-color: #080C14;
}

.faq-editorial-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 6px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-heading);
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .faq-editorial-badge {
  background-color: #111726;
  border-color: rgba(255, 255, 255, 0.12);
}

.faq-badge-box {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background-color: var(--accent-red);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
}

.faq-editorial-heading {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4.2vw, 3.6rem);
  font-weight: 800;
  color: var(--text-heading);
  line-height: 1.1;
  letter-spacing: -0.04em;
  margin-bottom: 18px;
}

.faq-editorial-subtext {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 440px;
  margin-bottom: 0;
}

@media (min-width: 992px) {
  .faq-editorial-section .col-lg-5 {
    position: sticky;
    top: 130px;
    align-self: flex-start;
  }
}

.faq-capsule-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-capsule-item {
  background-color: #F4F4F6;
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 999px;
  overflow: hidden;
  transition: border-radius 0.3s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease;
}

.faq-capsule-item:has(.faq-capsule-trigger:not(.collapsed)),
.faq-capsule-item.active {
  border-radius: 24px;
  background-color: #F1F1F4;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .faq-capsule-item {
  background-color: #111726;
  border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .faq-capsule-item:has(.faq-capsule-trigger:not(.collapsed)),
[data-theme="dark"] .faq-capsule-item.active {
  background-color: #161E30;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.faq-capsule-trigger {
  width: 100%;
  background: transparent;
  border: none;
  padding: 22px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  cursor: pointer;
  outline: none;
}

.faq-capsule-question {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-heading);
  letter-spacing: -0.02em;
  line-height: 1.35;
}

[data-theme="dark"] .faq-capsule-question {
  color: #FFFFFF;
}

.faq-capsule-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--text-heading);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.25s ease;
}

[data-theme="dark"] .faq-capsule-icon {
  color: #FFFFFF;
}

.faq-capsule-trigger:not(.collapsed) .faq-capsule-icon {
  transform: rotate(45deg);
  color: var(--accent-red);
}

.faq-capsule-body {
  padding: 0 32px 26px 32px;
  font-size: 0.98rem;
  line-height: 1.65;
  color: #4B5563;
}

[data-theme="dark"] .faq-capsule-body {
  color: #94A3B8;
}

@media (max-width: 768px) {
  .faq-capsule-trigger {
    padding: 16px 20px;
  }

  .faq-capsule-question {
    font-size: 0.98rem;
  }

  .faq-capsule-body {
    padding: 0 20px 20px 20px;
    font-size: 0.92rem;
  }
}

/* --------------------------------------------------------------------------
   16.1 GENERAL SECTION LAYOUT POLISH
   -------------------------------------------------------------------------- */
.by-the-numbers-section .container-xl,
#stats .container-xl {
  width: 100% !important;
  max-width: 100% !important;
}

.services-editorial-section .container-xl,
#services .container-xl {
  width: 100% !important;
  max-width: 100% !important;
}

/* Valden Project Modal Helpers */
.valden-info-group {
  margin-bottom: 24px;
}

.valden-choice-content {
  display: flex;
  flex-direction: column;
}

/* --------------------------------------------------------------------------
   17. CLOSING CALL TO ACTION
   -------------------------------------------------------------------------- */
.closing-cta-card {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  border-radius: 28px;
  padding: 70px 50px;
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

@media (max-width: 768px) {
  .closing-cta-card {
    padding: 40px 24px;
  }
}

.closing-cta-card .cta-headline {
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 16px;
  letter-spacing: -0.04em;
}

.closing-cta-card .cta-copy {
  font-size: 1.15rem;
  color: #94A3B8;
  max-width: 600px;
  margin-bottom: 30px;
}

.cta-step-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
  color: #E2E8F0;
  font-size: 0.95rem;
}

.cta-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--accent-red);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   17.1 CINEMATIC STAR TRAILS CALL TO ACTION (ABOVE FOOTER)
   -------------------------------------------------------------------------- */
.star-cta-section {
  position: relative;
  background-color: #06080F;
  background-image: url('../images/cta-star-trails.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: clamp(48px, 6vw, 70px) 24px;
  overflow: hidden;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.star-cta-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(6, 8, 15, 0.2) 0%, rgba(6, 8, 15, 0.65) 65%, rgba(6, 8, 15, 0.92) 100%),
    linear-gradient(180deg, rgba(6, 8, 15, 0.45) 0%, transparent 35%, rgba(6, 8, 15, 0.7) 100%);
  pointer-events: none;
  z-index: 1;
}

.star-cta-container {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto;
}

.star-cta-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: #FFFFFF;
  margin-bottom: 14px;
  text-wrap: balance;
}

.star-cta-subtitle {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  max-width: 580px;
  margin: 0 auto 24px auto;
  font-weight: 400;
  text-wrap: pretty;
}

.star-cta-action {
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-star-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  background-color: #FFFFFF;
  color: #0A0D14;
  font-family: var(--font-heading);
  font-size: 0.90rem;
  font-weight: 600;
  border-radius: var(--border-radius-btn);
  /* Square 4px border radius */
  text-decoration: none;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  border: 1px solid transparent;
}

.btn-star-cta:hover,
.btn-star-cta:focus {
  background-color: #F8FAFC;
  color: var(--accent-red);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.24);
  text-decoration: none;
}

.btn-star-cta:active {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   18. FOOTER (Matching Structa-Style Premium Reference Design)
   -------------------------------------------------------------------------- */
.studio-footer-structa {
  background-color: #F1F3F5;
  color: #111111;
  padding-top: 80px;
  padding-bottom: 40px;
  border-top: 1px solid #E2E8F0;
  overflow: hidden;
  width: 100% !important;
  max-width: 100% !important;
}

/* Distinct Column Title (Technical Eyebrow with Indicator Dot & Line) */
.structa-col-heading {
  font-family: var(--font-mono, 'Inter', monospace);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #64748B;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  display: flex;
  align-items: center;
  gap: 8px;
}

.structa-col-heading::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--accent-red);
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(253, 3, 8, 0.4);
}

.structa-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.structa-links a {
  color: #1E293B;
  font-size: 0.90rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: color var(--transition-fast), transform var(--transition-fast);
  display: inline-block;
  text-decoration: none;
}

.structa-links a:hover {
  color: var(--accent-red) !important;
  transform: translateX(4px);
}

.structa-newsletter-wrap {
  display: flex;
  flex-direction: column;
}

.structa-nl-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-heading);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.structa-nl-title::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent-red);
  box-shadow: 0 0 8px rgba(253, 3, 8, 0.4);
}

.structa-nl-form {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.structa-nl-form input {
  flex-grow: 1;
  background: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: var(--border-radius-btn);
  padding: 12px 22px;
  font-size: 0.92rem;
  color: #111111;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.structa-nl-form input:focus {
  border-color: var(--accent-red);
  box-shadow: 0 0 0 3px rgba(253, 3, 8, 0.15);
}

.structa-nl-form button {
  background-color: var(--accent-red);
  color: #FFFFFF;
  border: none;
  border-radius: var(--border-radius-btn);
  padding: 9px 20px;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.structa-nl-form button:hover {
  background-color: var(--accent-red-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(253, 3, 8, 0.35);
}

.structa-nl-sub {
  font-size: 0.82rem;
  color: #6B7280;
  line-height: 1.4;
}

.structa-mid-row {
  border-top: 1px solid #DCDCE0;
  padding-top: 24px;
  margin-top: 40px;
  color: #111111;
}

.structa-copyright {
  font-size: 0.9rem;
  font-weight: 600;
  color: #111111;
}

.structa-socials {
  display: flex;
  align-items: center;
  gap: 16px;
}

.structa-socials a {
  color: #111111;
  font-size: 1.25rem;
  transition: color var(--transition-fast), transform var(--transition-fast);
  display: inline-flex;
}

.structa-socials a:hover {
  color: var(--accent-red);
  transform: translateY(-2px);
}

.structa-disclaimer {
  font-size: 0.76rem;
  color: #9CA3AF;
  line-height: 1.65;
  margin-top: 24px;
  margin-bottom: 24px;
  max-width: 980px;
}

.structa-giant-brand-row {
  margin-top: 20px;
  padding-top: 10px;
  overflow: hidden;
  line-height: 0.82;
}

.structa-giant-wordmark {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 9vw, 9.2rem);
  font-weight: 900;
  line-height: 0.84;
  letter-spacing: -0.045em;
  color: #000000;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
  user-select: none;
  white-space: nowrap;
}

.structa-giant-wordmark .structa-tm {
  font-size: 0.22em;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-left: 4px;
  margin-top: 0.08em;
  display: inline-block;
  vertical-align: top;
}

@media (max-width: 768px) {
  .studio-footer-structa {
    padding-top: 60px;
    padding-bottom: 30px;
  }

  .structa-giant-wordmark {
    white-space: normal;
    word-break: break-word;
    line-height: 0.88;
  }
}

/* Fallback for legacy class if referenced anywhere */
.studio-footer {
  background-color: #ECECED;
}

/* --------------------------------------------------------------------------
   19. MODALS & FORMS
   -------------------------------------------------------------------------- */
.modal-custom .modal-content {
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.2);
}

.modal-custom .modal-header {
  border-bottom: 1px solid var(--border-light);
  padding: 24px 30px;
}

.modal-custom .modal-body {
  padding: 30px;
}

.form-label-custom {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-heading);
  margin-bottom: 6px;
}

.form-control-custom,
.form-select-custom {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 12px 16px;
  font-size: 0.95rem;
  color: var(--text-main);
  background-color: #FFFFFF;
  transition: border-color var(--transition-fast);
}

.form-control-custom:focus,
.form-select-custom:focus {
  border-color: var(--accent-red);
  box-shadow: 0 0 0 3px rgba(253, 3, 8, 0.12);
  outline: none;
}

/* --------------------------------------------------------------------------
   20. COOKIE BANNER & FLOATING ELEMENTS
   -------------------------------------------------------------------------- */
.cookie-banner {
  position: fixed;
  bottom: 24px;
  left: 24px;
  right: 24px;
  max-width: 480px;
  background-color: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  padding: 20px 24px;
  box-shadow: var(--shadow-lg);
  z-index: 1040;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transform: translateY(120%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cookie-banner.show {
  transform: translateY(0);
}

.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  background-color: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  color: var(--text-heading);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: var(--shadow-md);
  z-index: 1020;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  background-color: var(--accent-red);
  border-color: var(--accent-red);
  color: #FFFFFF;
  transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   21. BLOG / JOURNAL & CAREERS SPECIALIZED STYLES
   -------------------------------------------------------------------------- */
.journal-card {
  background-color: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all var(--transition-smooth);
}

.journal-card:hover {
  border-color: var(--accent-red);
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

.journal-card-body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.journal-tag {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent-red);
  margin-bottom: 10px;
}

.journal-title {
  font-size: 1.28rem;
  font-weight: 800;
  margin-bottom: 12px;
  color: var(--text-heading);
  line-height: 1.35;
}

.journal-excerpt {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
}

.job-card {
  background-color: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  transition: all var(--transition-smooth);
}

.job-card:hover {
  border-color: var(--accent-red);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.job-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--border-radius-pill);
  font-size: 0.8rem;
  font-weight: 600;
  background-color: var(--bg-subtle);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   22. ANIMATIONS & REVEAL EFFECTS
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-scale.active {
  opacity: 1;
  transform: scale(1);
}

.reveal-delay-1 {
  transition-delay: 0.08s;
}

.reveal-delay-2 {
  transition-delay: 0.16s;
}

.reveal-delay-3 {
  transition-delay: 0.24s;
}

.reveal-delay-4 {
  transition-delay: 0.32s;
}

.reveal-delay-5 {
  transition-delay: 0.40s;
}

.reveal-delay-6 {
  transition-delay: 0.48s;
}

/* ==========================================================================
   SPLIT TEXT REVEAL MOTION ANIMATION (ON-SCROLL)
   ========================================================================== */
.split-text-reveal {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

.reveal.split-text-reveal,
.section-title.reveal,
.hero-headline.reveal,
.cta-headline.reveal {
  opacity: 1 !important;
  transform: none !important;
}

.split-word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
  line-height: inherit;
}

.split-word {
  display: inline-block;
  transform: translateY(115%);
  opacity: 0;
  will-change: transform, opacity;
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--word-idx, 0) * 0.035s);
}

/* When heading enters viewport on scroll */
.split-text-reveal.is-revealed .split-word,
.is-revealed>*>.split-word,
.is-revealed .split-word {
  transform: translateY(0%) !important;
  opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
  .split-word {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}

/* Hero Decorative Floating Micro-Animation */
@keyframes heroFloat {

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

  50% {
    transform: translateY(-8px) rotate(1.2deg);
  }
}

.alture-chain-img {
  animation: heroFloat 5.5s ease-in-out infinite;
  will-change: transform;
}

/* Card Hover Elevation Micro-Interactions */
.pricing-plan-card,
.swift-testimonial-card,
.why-grid-cell,
.blog-insight-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
  will-change: transform;
}

.pricing-plan-card:hover,
.swift-testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

.why-grid-cell {
  transition: background-color 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.why-grid-cell:hover {
  background-color: var(--bg-surface);
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}

/* Button Arrow Slide Micro-Interactions */
.btn-arrow-icon,
.cobalt-btn-arrow {
  display: inline-flex;
  align-items: center;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-red:hover .btn-arrow-icon,
.valden-btn-continue:hover .btn-arrow-icon,
.preview-link:hover i {
  transform: translateX(5px);
}

/* FAQ Capsule Icon Rotation */
.faq-capsule-icon {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
}

.faq-capsule-trigger:not(.collapsed) .faq-capsule-icon {
  transform: rotate(45deg);
  color: var(--accent-red);
}

/* Reduced Motion Preference Accessibility */
@media (prefers-reduced-motion: reduce) {

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

  .reveal,
  .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .alture-chain-img {
    animation: none !important;
  }

  .industries-marquee-track {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   23. START A PROJECT — EDITORIAL 4-STEP WIZARD (VALDEN ARCHETYPE)
   Unified Theme Palette: Light Gray Canvas, Pure White Card & Brand Red Accents
   -------------------------------------------------------------------------- */
.modal-start-project-valden {
  padding: 0 !important;
}

.modal-start-project-valden .modal-fullscreen {
  width: 100vw;
  max-width: none;
  height: 100%;
  margin: 0;
}

.modal-start-project-valden .modal-content {
  background-color: var(--bg-subtle, #F8FAFC);
  border: none;
  border-radius: 0;
  min-height: 100vh;
  position: relative;
  overflow-y: auto;
  color: var(--text-heading, #0A0D14);
}

[data-theme="dark"] .modal-start-project-valden .modal-content {
  background-color: #0A0D14;
}

/* Close button */
.valden-modal-close-btn {
  position: fixed;
  top: 28px;
  right: 36px;
  z-index: 1060;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-color, #E2E8F0);
  background-color: #FFFFFF;
  color: var(--text-heading, #0A0D14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.valden-modal-close-btn:hover {
  transform: scale(1.06);
  background-color: var(--accent-red, #FD0308);
  border-color: var(--accent-red, #FD0308);
  color: #FFFFFF;
}

[data-theme="dark"] .valden-modal-close-btn {
  background-color: #161D2E;
  border-color: rgba(255, 255, 255, 0.12);
  color: #F8FAFC;
}

[data-theme="dark"] .valden-modal-close-btn:hover {
  background-color: var(--accent-red);
  color: #FFFFFF;
}

/* Left Column */
.valden-editorial-heading {
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 4.2vw, 4.2rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.038em;
  color: var(--text-heading);
  margin-bottom: var(--space-5);
}

.valden-editorial-subtext {
  font-family: var(--font-body);
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 460px;
  margin-bottom: var(--space-10);
}

.valden-info-label {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-light);
  margin-bottom: 6px;
}

.valden-info-email {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.3vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-heading);
  text-decoration: none;
  transition: color var(--transition-fast);
  display: inline-block;
}

.valden-info-email:hover {
  color: var(--accent-red);
}

.valden-info-val {
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--text-body);
  font-weight: 600;
}

.valden-directions-link {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-heading);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

.valden-directions-link:hover {
  color: var(--accent-red);
}

.valden-pulse-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #10B981;
  display: inline-block;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.25);
  animation: valdenPulse 2s infinite ease-in-out;
  flex-shrink: 0;
}

@keyframes valdenPulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 7px rgba(16, 185, 129, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

/* Right Column: Wizard Card */
.valden-wizard-card {
  background-color: var(--bg-surface);
  border-radius: var(--border-radius-card-lg);
  padding: 42px 44px;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 560px;
}

[data-theme="dark"] .valden-wizard-card {
  background-color: var(--bg-surface);
  border-color: var(--border-color);
  box-shadow: var(--shadow-lg);
}

/* Step Navigation Tabs */
.valden-steps-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 16px;
  margin-bottom: 30px;
}

.valden-step-tab {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted);
  position: relative;
  transition: color var(--transition-fast);
  cursor: pointer;
  user-select: none;
}

.valden-step-tab .tab-num {
  font-weight: 700;
  margin-right: 4px;
}

.valden-step-tab.active {
  color: var(--text-heading);
  font-weight: 700;
}

.valden-step-tab.active::after {
  content: '';
  position: absolute;
  bottom: -17px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--accent-red);
}

/* Step Content Panes */
.valden-step-pane {
  display: none;
  animation: valdenFadeIn 0.35s ease;
}

.valden-step-pane.active {
  display: block;
}

@keyframes valdenFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

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

.valden-pane-heading {
  font-family: var(--font-heading);
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-heading, #0A0D14);
  margin-bottom: 6px;
}

[data-theme="dark"] .valden-pane-heading {
  color: #FFFFFF;
}

.valden-pane-sub {
  font-family: var(--font-body);
  font-size: 0.96rem;
  color: var(--text-muted, #64748B);
  margin-bottom: 24px;
}

[data-theme="dark"] .valden-pane-sub {
  color: #94A3B8;
}

/* Choice Cards Grid */
.valden-choices-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.valden-choice-card {
  display: block;
  cursor: pointer;
  user-select: none;
  margin: 0;
}

.valden-choice-inner {
  background-color: var(--bg-subtle, #F8FAFC);
  border: 1.5px solid var(--border-color, #E2E8F0);
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  min-height: 98px;
}

.valden-choice-card:hover .valden-choice-inner {
  background-color: var(--bg-alt, #F1F5F9);
  border-color: #CBD5E1;
}

.valden-choice-card.is-selected .valden-choice-inner,
.valden-choice-input:checked+.valden-choice-inner {
  background-color: #FFFFFF;
  border-color: var(--accent-red, #FD0308);
  box-shadow: 0 8px 24px rgba(253, 3, 8, 0.08);
}

[data-theme="dark"] .valden-choice-inner {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .valden-choice-card:hover .valden-choice-inner {
  background-color: rgba(255, 255, 255, 0.07);
}

[data-theme="dark"] .valden-choice-card.is-selected .valden-choice-inner,
[data-theme="dark"] .valden-choice-input:checked+.valden-choice-inner {
  background-color: #161F33;
  border-color: var(--accent-red, #FD0308);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.valden-choice-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #CBD5E1;
  background-color: #FFFFFF;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.valden-choice-card.is-selected .valden-choice-circle,
.valden-choice-input:checked+.valden-choice-inner .valden-choice-circle {
  border-color: var(--accent-red, #FD0308);
  background-color: var(--accent-red, #FD0308);
}

.valden-choice-circle::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #FFFFFF;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.valden-choice-card.is-selected .valden-choice-circle::after,
.valden-choice-input:checked+.valden-choice-inner .valden-choice-circle::after {
  opacity: 1;
}

[data-theme="dark"] .valden-choice-circle {
  border-color: #475569;
  background-color: #0F172A;
}

.valden-choice-title {
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-heading, #0A0D14);
  margin-bottom: 4px;
}

[data-theme="dark"] .valden-choice-title {
  color: #F8FAFC;
}

.valden-choice-desc {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-muted, #64748B);
}

[data-theme="dark"] .valden-choice-desc {
  color: #94A3B8;
}

/* Wizard Form Inputs */
.valden-form-group {
  margin-bottom: 16px;
}

.valden-form-label {
  font-family: var(--font-heading);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-heading, #0A0D14);
  margin-bottom: 6px;
  display: block;
}

[data-theme="dark"] .valden-form-label {
  color: #CBD5E1;
}

.valden-form-control {
  width: 100%;
  padding: 13px 18px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  border-radius: 12px;
  border: 1px solid var(--border-color, #E2E8F0);
  background-color: var(--bg-subtle, #F8FAFC);
  color: var(--text-heading, #0A0D14);
  outline: none;
  transition: all var(--transition-fast);
}

.valden-form-control:focus {
  border-color: var(--accent-red, #FD0308);
  background-color: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(253, 3, 8, 0.12);
}

[data-theme="dark"] .valden-form-control {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: #F8FAFC;
}

[data-theme="dark"] .valden-form-control:focus {
  background-color: #161F33;
}

/* Review Step Card */
.valden-review-box {
  background-color: var(--bg-subtle, #F8FAFC);
  border: 1px solid var(--border-color, #E2E8F0);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
}

[data-theme="dark"] .valden-review-box {
  background-color: #161D2E;
  border-color: rgba(255, 255, 255, 0.08);
}

.valden-review-item {
  margin-bottom: 16px;
}

.valden-review-item:last-child {
  margin-bottom: 0;
}

.valden-review-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted, #94A3B8);
  margin-bottom: 4px;
}

.valden-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.valden-chip {
  background-color: #FFFFFF;
  border: 1px solid var(--border-color, #E2E8F0);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-heading, #0A0D14);
}

[data-theme="dark"] .valden-chip {
  background-color: #1E283E;
  border-color: rgba(255, 255, 255, 0.1);
  color: #F1F5F9;
}

/* Wizard Footer */
.valden-wizard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-color, #E2E8F0);
  padding-top: 24px;
  margin-top: 24px;
}

[data-theme="dark"] .valden-wizard-footer {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.valden-step-counter {
  font-family: var(--font-body);
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--text-muted, #64748B);
}

[data-theme="dark"] .valden-step-counter {
  color: #94A3B8;
}

.valden-actions-btns {
  display: flex;
  align-items: center;
  gap: 12px;
}

.valden-btn-back {
  background: transparent;
  border: none;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-muted, #64748B);
  padding: 10px 18px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.valden-btn-back:hover {
  color: var(--text-heading, #0A0D14);
}

[data-theme="dark"] .valden-btn-back {
  color: #94A3B8;
}

[data-theme="dark"] .valden-btn-back:hover {
  color: #FFFFFF;
}

.valden-btn-continue,
.valden-btn-submit {
  background-color: var(--text-heading, #0A0D14);
  color: #FFFFFF;
  border: 1px solid transparent;
  border-radius: var(--border-radius-btn);
  padding: 9px 20px;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.22s ease;
  outline: none;
}

.valden-btn-continue:hover {
  background-color: var(--accent-red, #FD0308);
  transform: translateY(-1px);
}

.valden-btn-submit {
  background-color: var(--accent-red, #FD0308);
  box-shadow: 0 4px 15px rgba(253, 3, 8, 0.25);
}

.valden-btn-submit:hover {
  background-color: var(--accent-red-hover, #D90004);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(253, 3, 8, 0.35);
}

.valden-btn-continue .btn-arrow-icon,
.valden-btn-submit .btn-arrow-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #FFFFFF;
  color: var(--text-heading, #0A0D14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  transition: transform 0.2s ease;
}

.valden-btn-continue:hover .btn-arrow-icon {
  color: var(--accent-red, #FD0308);
  transform: translateX(2px);
}

.valden-btn-submit .btn-arrow-icon {
  color: var(--accent-red, #FD0308);
}

.valden-btn-submit:hover .btn-arrow-icon {
  transform: translateX(2px);
}

/* Confirmation Success Card */
.valden-success-card {
  text-align: center;
  padding: 40px 20px;
}

.valden-success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: #ECFDF5;
  color: #10B981;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  margin-bottom: 24px;
}

.valden-success-card .valden-pane-sub {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* Mobile Responsiveness */
@media (max-width: 991px) {
  .valden-choices-grid {
    grid-template-columns: 1fr;
  }

  .valden-wizard-card {
    padding: 28px 24px;
    margin-top: 36px;
  }

  .valden-modal-close-btn {
    top: 16px;
    right: 16px;
  }

  .modal-start-project-valden .container-xl {
    padding-top: 60px !important;
    padding-bottom: 40px !important;
  }
}

/* --------------------------------------------------------------------------
   10. MODERN STACK SECTION (CLAYMORPHIC 3D TECH CLOUD SHOWCASE)
   Matches Reference: Centered typography, red strategic highlight, 3D claymorphic chiclets
   -------------------------------------------------------------------------- */
.modern-stack-section {
  background-color: #FFFFFF;
  position: relative;
  overflow: hidden;
  padding-top: 100px;
  padding-bottom: 90px;
}

.modern-stack-badge {
  background-color: #FFF1F2 !important;
  border-color: rgba(253, 3, 8, 0.16) !important;
  color: var(--accent-red) !important;
  box-shadow: 0 2px 10px rgba(253, 3, 8, 0.05);
}

.modern-stack-title {
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 3.8vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.038em;
  line-height: 1.15;
  color: #090D16;
  margin-bottom: 18px;
}

.modern-stack-intro {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  font-weight: 400;
  line-height: 1.62;
  color: #64748B;
  max-width: 680px;
}

/* 3D Graphic Showcase Frame */
.modern-stack-showcase {
  position: relative;
  width: 100%;
  max-width: 1140px;
  margin: -70px auto 0 auto;
  z-index: 1;
}

.modern-stack-cloud-frame {
  position: relative;
  display: inline-block;
  width: 100%;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
  will-change: transform;
}

.modern-stack-cloud-frame:hover {
  transform: translateY(-6px) scale(1.012);
}

.modern-stack-cloud-img {
  width: 100%;
  max-width: 1080px;
  height: auto;
  display: block;
  margin: 0 auto;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 20px 45px rgba(15, 23, 42, 0.06));
}

/* Dark Mode Theme Tuning */
[data-theme="dark"] .modern-stack-section {
  background-color: #0A0D14;
}

[data-theme="dark"] .modern-stack-title {
  color: #FFFFFF !important;
}

[data-theme="dark"] .modern-stack-intro {
  color: #94A3B8 !important;
}

[data-theme="dark"] .modern-stack-badge {
  background-color: rgba(253, 3, 8, 0.12) !important;
  border-color: rgba(253, 3, 8, 0.28) !important;
  color: var(--accent-red) !important;
}

[data-theme="dark"] .modern-stack-showcase {
  margin-top: 30px !important;
}

[data-theme="dark"] .modern-stack-cloud-frame {
  background-color: #FFFFFF;
  border-radius: 32px;
  padding: 30px 24px 20px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* Mobile & Tablet Responsive Adjustments */
@media (max-width: 991px) {
  .modern-stack-section {
    padding-top: 75px;
    padding-bottom: 70px;
  }

  .modern-stack-showcase {
    margin-top: 15px !important;
  }

  .modern-stack-title {
    font-size: clamp(1.85rem, 5.5vw, 2.5rem);
  }

  .modern-stack-intro {
    font-size: 0.95rem;
  }
}

@media (max-width: 576px) {
  .modern-stack-section {
    padding-top: 60px;
    padding-bottom: 55px;
  }

  .modern-stack-showcase {
    margin-top: 10px !important;
  }

  [data-theme="dark"] .modern-stack-cloud-frame {
    border-radius: 20px;
    padding: 16px 12px 10px;
  }
}

/* --------------------------------------------------------------------------
   11. WHY CHOOSE US (ARCHITECTURAL CROSSHAIR GRID SHOWCASE)
   Matches Reference: {06} WHY CHOOSE US? in emerald green, serif italic "choose",
   unified 3x2 rounded card with subtle borders and green crosshair tick targets
   -------------------------------------------------------------------------- */
.why-choose-section {
  background-color: #FFFFFF;
  position: relative;
  overflow: hidden;
  padding-top: 100px;
  padding-bottom: 100px;
}

.why-eyebrow-code {
  display: inline-block;
  font-family: 'Inter', monospace, sans-serif;
  color: var(--text-muted, #64748B);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.why-section-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.8vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.038em;
  line-height: 1.18;
  color: #090D16;
  margin: 0;
}

.font-serif-italic {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Card Container */
.why-grid-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto;
}

.why-grid-wrapper {
  position: relative;
  width: 100%;
}

.why-grid-card {
  --why-card-bg: #FFFFFF;
  --why-border-color: #E2E8F0;
  background-color: var(--why-card-bg);
  border: 1px solid var(--why-border-color);
  border-radius: 22px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  width: 100%;
  box-shadow: 0 4px 25px rgba(15, 23, 42, 0.03);
  overflow: hidden;
}

/* Individual Cell */
.why-grid-cell {
  padding: 46px 30px 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  position: relative;
  transition: background-color var(--transition-fast);
}

.why-grid-cell:hover {
  background-color: rgba(248, 250, 252, 0.7);
}

/* Borders between cells */
.why-grid-cell:nth-child(1),
.why-grid-cell:nth-child(2),
.why-grid-cell:nth-child(4),
.why-grid-cell:nth-child(5) {
  border-right: 1px solid var(--why-border-color);
}

.why-grid-cell:nth-child(1),
.why-grid-cell:nth-child(2),
.why-grid-cell:nth-child(3) {
  border-bottom: 1px solid var(--why-border-color);
}

/* Icon Wrap & SVG */
.why-icon-wrap {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: #94A3B8;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease;
}

.why-grid-cell:hover .why-icon-wrap {
  color: var(--accent-red, #FD0308);
  transform: translateY(-3px);
}

.why-feature-icon {
  width: 42px;
  height: 42px;
  stroke: currentColor;
}

.why-cell-title {
  font-family: var(--font-heading);
  font-size: 1.16rem;
  font-weight: 700;
  color: #0F172A;
  letter-spacing: -0.02em;
  line-height: 1.35;
  margin: 0 0 10px 0;
}

.why-cell-desc {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.58;
  color: #64748B;
  margin: 0;
  max-width: 440px;
}

.why-section-sub {
  max-width: 780px;
  color: #64748B;
  font-size: 1.05rem;
  line-height: 1.6;
}

/* Crosshair Markers */
.why-grid-crosshair {
  position: absolute;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 5;
}

.why-crosshair-1 {
  left: 33.3333%;
  top: 50%;
}

.why-crosshair-2 {
  left: 66.6666%;
  top: 50%;
}

.why-grid-crosshair svg {
  width: 100%;
  height: 100%;
  display: block;
}

.why-grid-crosshair .crosshair-mask {
  fill: var(--why-card-bg, #FFFFFF);
}

.why-grid-crosshair svg line {
  stroke: var(--text-muted, #94A3B8);
  transition: stroke var(--transition-fast);
}

/* Dark Mode Support */
[data-theme="dark"] .why-choose-section {
  background-color: #0A0D14;
}

[data-theme="dark"] .why-section-title {
  color: #FFFFFF !important;
}

[data-theme="dark"] .why-eyebrow-code {
  color: var(--text-muted, #94A3B8) !important;
}

[data-theme="dark"] .why-grid-card {
  --why-card-bg: #0F172A;
  --why-border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .why-grid-cell:hover {
  background-color: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .why-cell-title {
  color: #FFFFFF;
}

[data-theme="dark"] .why-cell-desc,
[data-theme="dark"] .why-section-sub {
  color: #94A3B8 !important;
}

[data-theme="dark"] .why-icon-wrap {
  color: #64748B;
}

[data-theme="dark"] .why-grid-cell:hover .why-icon-wrap {
  color: var(--accent-red, #FD0308);
}

[data-theme="dark"] .why-grid-crosshair svg line {
  stroke: #475569;
}

/* Responsive Breakpoints */
@media (max-width: 991px) {
  .why-choose-section {
    padding-top: 75px;
    padding-bottom: 75px;
  }

  .why-grid-cell {
    padding: 38px 20px;
  }

  .why-cell-title {
    font-size: 1.05rem;
  }
}

@media (max-width: 767px) {
  .why-grid-card {
    grid-template-columns: 1fr;
  }

  .why-grid-crosshair {
    display: none;
  }

  .why-grid-cell {
    border-right: none !important;
    border-bottom: 1px solid var(--why-border-color) !important;
    padding: 34px 20px;
  }

  .why-grid-cell:last-child {
    border-bottom: none !important;
  }
}

/* --------------------------------------------------------------------------
   12. CASE STUDIES SECTION (CINEMATIC HORIZONTAL SLIDER ARCHETYPE)
   Matches Reference: Edge-peeking wide rounded cards, magnetic 'View' glass badge,
   bottom scrim hairline metadata bar, and below-card bold typography
   -------------------------------------------------------------------------- */
.case-studies-section {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-body);
}

.case-study-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 800;
  color: var(--text-heading);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 14px;
}

.case-study-hero-sub {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 660px;
  line-height: 1.6;
}

.case-study-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: var(--border-radius-pill);
  background-color: #FFFFFF;
  border: 1px solid var(--border-color);
  font-family: var(--font-heading);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-heading);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
  margin-bottom: 18px;
}

.case-study-pill-badge .badge-icon {
  font-size: 0.82rem;
  color: var(--accent-red);
}

/* Nav Arrow Buttons */
.case-slider-nav-btns {
  display: flex;
  align-items: center;
  gap: 10px;
}

.case-nav-arrow-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background-color: #FFFFFF;
  color: var(--text-heading);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.case-nav-arrow-btn:hover {
  background-color: var(--accent-red);
  border-color: var(--accent-red);
  color: #FFFFFF;
  transform: scale(1.05);
}

/* Horizontal Track Frame */
.case-slider-frame {
  position: relative;
  width: 100%;
  padding: 10px 0 20px;
}

.case-slider-track {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 10px max(24px, calc((100vw - 1280px) / 2)) 25px;
  scrollbar-width: none;
  cursor: grab;
}

.case-slider-track.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
  user-select: none;
}

.case-slider-track::-webkit-scrollbar {
  display: none;
}

/* Individual Card */
.case-slider-card {
  flex: 0 0 clamp(380px, 46vw, 620px);
  scroll-snap-align: start;
}

.case-card-inner {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition-fast);
}

.case-card-inner:hover {
  color: inherit;
}

.case-slider-card .case-card-inner.bg-subtle {
  aspect-ratio: 16 / 10;
  border-radius: 24px;
  background-color: var(--bg-subtle) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
  transition: all var(--transition-smooth);
}

.case-slider-card .case-card-inner.bg-subtle:hover {
  border-color: var(--accent-red) !important;
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}

/* Card Media Container */
.case-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 24px;
  overflow: hidden;
  background-color: #0A0D14;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.case-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}

.case-card-inner:hover .case-card-media img {
  transform: scale(1.04);
}

/* Magnetic Frosted Glass 'View' Badge (Matches Reference: Circular translucent badge with 'View') */
.case-card-view-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.62);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%) scale(0.65);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  transition: opacity 0.25s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35);
  will-change: transform, opacity;
}

.case-card-inner:hover .case-card-view-badge {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* Bottom Glass Scrim & Metadata Bar */
.case-card-overlay-scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 34px 24px 18px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.42) 65%, transparent 100%);
  z-index: 3;
}

.case-card-hairline {
  height: 1px;
  background: rgba(255, 255, 255, 0.28);
  margin-bottom: 12px;
}

.case-card-meta-text {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  gap: 8px;
}

.case-card-meta-text .meta-dot {
  opacity: 0.6;
}

.case-card-meta-text .meta-dot {
  opacity: 0.6;
}

/* Below-Image Content */
.case-card-body {
  margin-top: 18px;
}

.case-card-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.025em;
  line-height: 1.3;
  margin-bottom: 8px;
  transition: color var(--transition-fast);
}

.case-card-inner:hover .case-card-title {
  color: var(--accent-red);
}

.case-card-tags-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.case-metric-badge {
  display: inline-block;
  background-color: var(--accent-red-subtle);
  border: 1px solid var(--accent-red-border);
  color: var(--accent-red);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 4px;
}

.case-tag-pill {
  display: inline-block;
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 4px;
}

/* Progress Indicator Bar */
.case-slider-progress-track {
  width: 100%;
  height: 3px;
  background-color: var(--border-color);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 15px;
}

.case-slider-progress-bar {
  height: 100%;
  width: 25%;
  background-color: var(--accent-red);
  border-radius: 3px;
  transition: width 0.15s ease-out;
}

/* Dark Mode Theme */
[data-theme="dark"] .case-study-pill-badge {
  background-color: var(--bg-surface);
  border-color: var(--border-color);
  color: #FFFFFF;
}

[data-theme="dark"] .case-nav-arrow-btn {
  background-color: var(--bg-surface);
  border-color: var(--border-color);
  color: #FFFFFF;
}

[data-theme="dark"] .case-nav-arrow-btn:hover {
  background-color: var(--accent-red);
  border-color: var(--accent-red);
  color: #FFFFFF;
}

[data-theme="dark"] .case-slider-progress-track {
  background-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .case-tag-pill {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #94A3B8;
}

@media (max-width: 768px) {
  .case-slider-card {
    flex: 0 0 85vw;
  }

  .case-card-title {
    font-size: 1.18rem;
  }
}

/* --------------------------------------------------------------------------
   13. DESIGN INSIGHTS (EDITORIAL BLOG SHOWCASE)
   Matches Reference: Minimalist asterisk pill, bold heading, pill "All Blogs"
   button with leading dot, card with category tag overlay, bold typography,
   author avatar with title and date.
   -------------------------------------------------------------------------- */
.blog-insights-section {
  position: relative;
  background-color: var(--bg-body);
}

.blog-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.01em;
}

.blog-badge-icon {
  font-size: 1.05rem;
  color: var(--text-heading);
  line-height: 1;
}

.blog-heading {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--text-heading);
  line-height: 1.1;
  margin: 0;
}

/* "All Blogs" Pill Button */
.blog-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  border-radius: var(--border-radius-pill);
  background-color: #F1F5F9;
  border: 1px solid var(--border-color);
  color: var(--text-heading);
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition-fast);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.blog-btn-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--text-heading);
  transition: background-color var(--transition-fast);
}

.blog-all-btn:hover {
  background-color: var(--accent-red);
  border-color: var(--accent-red);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(253, 3, 8, 0.2);
}

.blog-all-btn:hover .blog-btn-dot {
  background-color: #FFFFFF;
}

/* Card Structure */
.blog-insight-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.blog-card-inner {
  display: block;
  text-decoration: none;
  color: inherit;
}

.blog-card-inner:hover {
  color: inherit;
}

/* Media Framing */
.blog-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10.5;
  border-radius: 20px;
  overflow: hidden;
  background-color: #0B0F19;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}

.blog-card-inner:hover .blog-card-media img {
  transform: scale(1.05);
}

/* Floating Category Badge */
.blog-category-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: var(--border-radius-pill);
  background-color: #FFFFFF;
  color: #0F172A;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
}

/* Below-Image Heading */
.blog-card-title {
  font-family: var(--font-heading);
  font-size: 1.32rem;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.025em;
  line-height: 1.35;
  margin-top: 18px;
  margin-bottom: 20px;
  transition: color var(--transition-fast);
}

.blog-card-inner:hover .blog-card-title {
  color: var(--accent-red);
}

/* Author & Meta Row */
.blog-card-meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.blog-author-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.blog-author-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.blog-author-text {
  display: flex;
  flex-direction: column;
}

.blog-author-name {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-heading);
  line-height: 1.2;
}

.blog-author-role {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.2;
  margin-top: 2px;
}

.blog-meta-dot {
  color: var(--text-muted);
  opacity: 0.45;
  font-size: 0.85rem;
}

.blog-meta-date {
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Dark Mode Theme */
[data-theme="dark"] .blog-all-btn {
  background-color: var(--bg-surface);
  border-color: var(--border-color);
  color: #FFFFFF;
}

[data-theme="dark"] .blog-btn-dot {
  background-color: #FFFFFF;
}

[data-theme="dark"] .blog-all-btn:hover {
  background-color: var(--accent-red);
  border-color: var(--accent-red);
  color: #FFFFFF;
}

[data-theme="dark"] .blog-category-badge {
  background-color: #FFFFFF;
  color: #0F172A;
}

[data-theme="dark"] .blog-badge-icon {
  color: #FFFFFF;
}

@media (max-width: 768px) {
  .blog-card-title {
    font-size: 1.18rem;
  }

  .blog-card-meta {
    flex-wrap: wrap;
    gap: 8px 12px;
  }
}

/* --------------------------------------------------------------------------
   14. EDITORIAL CONTACT SECTION (TELL US ABOUT THE PROJECT)
   Theme-aligned Light Gray Canvas & Border Dividers
   -------------------------------------------------------------------------- */
.cobalt-contact-section,
.project-wizard-section {
  position: relative;
  background-color: var(--bg-subtle, #F8FAFC);
  padding: var(--section-padding-y, 100px) 0;
  overflow: hidden;
  border-top: 1px solid var(--border-color, #E2E8F0);
  border-bottom: 1px solid var(--border-color, #E2E8F0);
}

[data-theme="dark"] .cobalt-contact-section,
[data-theme="dark"] .project-wizard-section {
  background-color: #090D16;
  border-color: rgba(255, 255, 255, 0.08);
}

@media (max-width: 991px) {

  .cobalt-contact-section,
  .project-wizard-section {
    padding: var(--section-padding-y-mobile, 70px) 0;
  }
}