@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ==========================================================================
   CSS VARIABLES & CORE CONSTANTS (Elegant Dark Default)
   ========================================================================== */
:root {
  --font-sans: 'Nunito', system-ui, -apple-system, sans-serif;
  --font-display: 'Nunito', sans-serif;
  --font-mono: 'Nunito', monospace;

  /* Color Palette - Animate Top Ink & Accent */
  --bg-primary: #271013;
  --bg-secondary: #311418;
  --bg-tertiary: #3C181C;
  --bg-glass: rgba(39, 16, 19, 0.75);
  --bg-glass-solid: rgba(39, 16, 19, 0.98);
  --border-color: rgba(57, 156, 249, 0.5);
  --border-glow: #399CF9;
  --btn-border-color: rgba(255, 255, 255, 0.2);
  
  --text-primary: #FFFFFF;
  --text-secondary: #E8DADA;
  --text-muted: #BFA8A8;
  
  --accent-primary: #399CF9; /* Accent Blue */
  --accent-secondary: #F82A2A; /* Primary Red */
  --accent-soft: #63F859; /* Soft Green */
  --accent-gradient: linear-gradient(135deg, #399CF9 0%, #F82A2A 100%);
  --accent-glow: rgba(57, 156, 249, 0.4);
  
  --card-shadow: 0 15px 40px -15px rgba(0, 0, 0, 0.6);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
  --transition-smooth: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-bounce: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
}

/* ==========================================================================
   ELEGANT LIGHT MODE CONSTANTS (Optional Toggle Option)
   ========================================================================== */
.light-mode, :root[data-theme="light"], html.light-mode {
  --bg-primary: #FBF8F8;
  --bg-secondary: #F4EBEB;
  --bg-tertiary: #EDE0E0;
  --bg-glass: rgba(251, 248, 248, 0.75);
  --bg-glass-solid: rgba(251, 248, 248, 0.98);
  --border-color: rgba(57, 156, 249, 0.5);
  --border-glow: #399CF9;
  --btn-border-color: rgba(0, 0, 0, 0.15);
  
  --text-primary: #000000;
  --text-secondary: #3B2A2D;
  --text-muted: #6B5558;
  
  --accent-primary: #399CF9;
  --accent-secondary: #F82A2A;
  --accent-soft: #63F859;
  --accent-gradient: linear-gradient(135deg, #399CF9 0%, #F82A2A 100%);
  --accent-glow: rgba(57, 156, 249, 0.3);
  
  --card-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.03);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.04);
}

/* ==========================================================================
   RESET & FOUNDATIONS
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Lenis smooth scrolling rules */
html.lenis, html.lenis body {
  height: auto;
}

.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis-stopped {
  overflow: hidden;
}

.lenis-scrolling iframe {
  pointer-events: none;
}


body {
  position: relative;
  font-family: var(--font-sans);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background-color 0.5s ease, color 0.5s ease;
}

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

/* Global particle background wrapper sits behind everything */
#bg-particles-wrapper {
  z-index: 0 !important;
}

/* All direct children of body that are sections/header/footer sit above particles */
body > header,
body > section,
body > footer,
body > main,
body > .floating-cta {
  position: relative;
  z-index: 1;
}

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

button, input, textarea, select {
  font-family: inherit;
  background: none;
  border: none;
  outline: none;
}

ul, ol {
  list-style: none;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: var(--bg-tertiary);
  border-radius: 10px;
  border: 2px solid var(--bg-primary);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ==========================================================================
   TYPOGRAPHY & ACCENTS
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.gradient-text {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: initial;
  color: var(--accent-primary);
  display: inline;
}

.section-label {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent-primary);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.section-label::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--accent-primary);
  box-shadow: 0 0 8px var(--accent-primary);
}

.section-title {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  margin-bottom: 1.5rem;
  max-width: 800px;
  text-wrap: balance;
}

.section-desc {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--text-secondary);
  max-width: 600px;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

/* Portfolio section's intro paragraph sits directly above the filter
   buttons with no extra gap needed. */
#portfolio .section-desc {
  margin-bottom: 0;
}

/* ==========================================================================
   LAYOUT CONTAINERS & UTILITIES
   ========================================================================== */
.container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

.section-padding {
  padding-top: 100px;
  padding-bottom: 100px;
}

@media (max-width: 991px) {
  .section-padding {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

@media (max-width: 480px) {
  .section-padding {
    padding-top: 45px;
    padding-bottom: 45px;
  }
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  align-items: center;
}

.grid-2 > * {
  min-width: 0;
}

@media (max-width: 991px) {
  .grid-2 {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (max-width: 480px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .story-section .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ==========================================================================
   BUTTONS (PREMIUM MAGNETIC-LOOK & GRADIENT HOVERS)
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.btn-primary {
  background: var(--accent-gradient);
  color: #ffffff;
  box-shadow: 0 10px 25px -5px var(--accent-glow);
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #2581d8; display: none;
  opacity: 0;
  z-index: -1;
  transition: var(--transition-smooth);
}

.btn-primary:hover::before {
  opacity: 1;
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px -5px var(--accent-glow);
}

.btn-secondary {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--btn-border-color);
}

.btn-secondary:hover {
  background-color: var(--bg-tertiary);
  transform: translateY(-3px);
}

.btn-icon {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}

.btn:hover .btn-icon {
  transform: translateX(4px);
}

/* ==========================================================================
   HEADER / NAVIGATION
   ========================================================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 101;
  background-color: transparent;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  border-bottom: 1px solid transparent;
  /* Only animate safe, purely-geometric/color properties.
     backdrop-filter & background-color are intentionally excluded:
     animating them together causes a white/black compositing flash
     on real devices right as the header becomes sticky. */
  transition: padding 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 1.5rem 0;
}

.header.scrolled {
  background-color: var(--bg-glass-solid);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--glass-shadow);
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.logo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-gradient);
  display: inline-block;
  animation: pulse 2s infinite;
}

.nav {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.nav-link {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-secondary);
  position: relative;
  padding: 0.25rem 0;
}

.nav-link:hover, .nav-link.active {
  color: var(--text-primary);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent-gradient);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-link:hover::after, .nav-link.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Theme Toggle Button */
.theme-toggle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.theme-toggle:hover {
  transform: scale(1.1);
  background-color: var(--bg-tertiary);
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
}

.theme-toggle .sun-icon {
  display: block;
}
.theme-toggle .moon-icon {
  display: none;
}

.light-mode .theme-toggle .sun-icon {
  display: none;
}
.light-mode .theme-toggle .moon-icon {
  display: block;
}

/* Mobile Nav Toggle */
.mobile-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 110;
}

@media (max-width: 768px) {
  .header {
    padding: 1rem 0;
  }
  
  .header.scrolled {
    padding: 0.75rem 0;
  }

  .mobile-toggle {
    display: flex;
  }
  
  .nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 80%;
    max-width: 340px;
    height: 100vh;
    height: 100dvh; /* accounts for mobile browser chrome (address bar) */
    background-color: var(--bg-glass-solid);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    box-shadow: -10px 0 30px rgba(0,0,0,0.2);
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 6.5rem 2rem 3rem;
    gap: 0;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s;
    z-index: 105;
    transform: translateX(100%);
    visibility: hidden;
    border-left: 1px solid var(--border-color);
    counter-reset: nav-counter;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .nav.active {
    transform: translateX(0);
    visibility: visible;
  }

  .nav-link {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    justify-content: flex-start;
    padding: 1.15rem 0;
    border-bottom: 1px solid var(--border-color);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease, color 0.3s ease;
    counter-increment: nav-counter;
  }

  .nav-link::before {
    content: "0" counter(nav-counter) ".";
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--accent-primary);
    opacity: 0.8;
  }

  .nav-link:hover, .nav-link.active {
    color: var(--text-primary);
    transform: scale(1.05);
  }

  /* Disable absolute bottom lines from desktop layout in mobile drawer */
  .nav-link::after {
    display: none;
  }

  .nav.active .nav-link {
    opacity: 1;
    transform: translateY(0);
  }

  .nav.active .nav-link:nth-child(1) { transition-delay: 0.1s; }
  .nav.active .nav-link:nth-child(2) { transition-delay: 0.18s; }
  .nav.active .nav-link:nth-child(3) { transition-delay: 0.26s; }

  .header-actions {
    margin-right: 0.5rem;
    gap: 0.75rem !important;
    flex-wrap: nowrap;
  }
}

/* Hide Start Project from top header bar on mobile AND tablet (up to 991px,
   matching the site's tablet breakpoint) to avoid congestion. Split out from
   the 768px block above since the hamburger nav only kicks in below 768px,
   but this button should disappear earlier, at the tablet boundary. */
@media (max-width: 991px) {
  .header-actions .btn-primary {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .header-actions {
    gap: 0.5rem !important;
  }
  .theme-toggle, .mobile-toggle {
    width: 38px;
    height: 38px;
  }
  .theme-toggle svg, .mobile-toggle svg {
    width: 18px;
    height: 18px;
  }
}

/* ==========================================================================
   HERO SECTION (HOME)
   ========================================================================== */
.hero {
  position: relative;
  min-height: auto;
  display: flex;
  align-items: center;
  padding-top: 165px;
  padding-bottom: 75px;
  background-color: var(--bg-primary);
  overflow: hidden;
}

/* Ambient Glow Backgrounds */
.hero-glow {
  position: absolute;
  top: -10%;
  right: -10%;
  width: 50vw;
  height: 50vw;
  background: radial-gradient(circle, rgba(99,102,241,0.08) 0%, rgba(236,72,153,0.05) 50%, rgba(255,255,255,0) 100%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

/* Animated dot-grid backdrop — used on the About hero, which is otherwise
   a flat color with no visual texture. Drifts slowly and fades out toward
   the edges so it reads as ambient texture, not a busy pattern. */
.hero-dot-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(57, 156, 249, 0.55) 1.5px, transparent 1.5px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse 65% 65% at 50% 35%, black 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 65% 65% at 50% 35%, black 30%, transparent 100%);
  animation: dot-grid-drift 25s linear infinite;
}

@keyframes dot-grid-drift {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 68px 68px;
  }
}

/* A handful of small twinkling particles scattered over the dot grid for
   extra depth — pure CSS via box-shadow, no extra DOM elements needed. */
.hero-dot-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 15% 25%, rgba(252, 211, 77, 0.9), transparent),
    radial-gradient(2px 2px at 38% 65%, rgba(57, 156, 249, 0.9), transparent),
    radial-gradient(2.5px 2.5px at 62% 20%, rgba(252, 211, 77, 0.85), transparent),
    radial-gradient(2px 2px at 78% 55%, rgba(57, 156, 249, 0.9), transparent),
    radial-gradient(2px 2px at 25% 80%, rgba(252, 211, 77, 0.8), transparent),
    radial-gradient(2.5px 2.5px at 88% 30%, rgba(57, 156, 249, 0.85), transparent),
    radial-gradient(2px 2px at 50% 85%, rgba(252, 211, 77, 0.85), transparent);
  animation: dot-twinkle 4s ease-in-out infinite;
}

@keyframes dot-twinkle {
  0%, 100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-title {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.1;
  margin-bottom: 1rem;
}

@media (max-width: 640px) {
  .hero-title {
    font-size: clamp(2.6rem, 9vw, 3.2rem);
  }
}

.hero-desc {
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  color: var(--text-secondary);
  max-width: 550px;
  margin-bottom: 1.8rem;
}

.hero-ctas {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .hero-ctas {
    flex-direction: column;
  }

  /* Swap visual order on mobile only — Explore Work on top, Book a Strategy Call below */
  .hero-ctas .btn-primary {
    order: 2;
  }

  .hero-ctas .btn-secondary {
    order: 1;
  }
}

/* Interactive Floating Hero Image */
.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

.hero-canvas-wrapper {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 510 / 410;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.hero-canvas-wrapper::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: var(--accent-gradient);
  z-index: -1;
  border-radius: inherit;
  opacity: 0.2;
}

.hero-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06); /* Symmetrically scale to push left & right borders outside wrapper */
}

.floating-card {
  position: absolute;
  padding: 1rem 1.5rem;
  background-color: var(--bg-glass-solid);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--glass-shadow);
  display: flex;
  align-items: center;
  gap: 1rem;
  animation: float 6s ease-in-out infinite;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.floating-card-1 {
  bottom: 8%;
  left: -8%;
  animation-delay: 0s;
}

.floating-card-2 {
  top: 15%;
  right: -8%;
  animation-delay: 3s;
}

.floating-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.floating-card-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
}

.floating-card-subtext {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Floating cards responsiveness */
@media (max-width: 768px) {
  .floating-card {
    padding: 0.75rem 1rem;
    gap: 0.75rem;
  }
  
  .floating-card-icon {
    width: 34px;
    height: 34px;
  }
  
  .floating-card-icon svg {
    width: 16px !important;
    height: 16px !important;
  }
  
  .floating-card-text {
    font-size: 0.8rem;
  }
  
  .floating-card-subtext {
    font-size: 0.7rem;
  }
  
  .floating-card-1 {
    bottom: 5%;
    left: -2%;
  }
  
  .floating-card-2 {
    top: 10%;
    right: -2%;
  }
}

@media (max-width: 480px) {
  .floating-card {
    padding: 0.5rem 0.8rem;
    gap: 0.5rem;
  }
  
  .floating-card-icon {
    width: 28px;
    height: 28px;
  }
  
  .floating-card-icon svg {
    width: 14px !important;
    height: 14px !important;
  }
  
  .floating-card-text {
    font-size: 0.75rem;
  }
  
  .floating-card-subtext {
    font-size: 0.65rem;
  }
  
  .floating-card-1 {
    bottom: 3%;
    left: 3%;
  }
  
  .floating-card-2 {
    top: 3%;
    right: 3%;
  }
}

/* ==========================================================================
   CTA BANNER SECTION (About page)
   ========================================================================== */
.cta-banner {
  /* Sleek deep-dark gradient background with glowing amber details */
  background: linear-gradient(135deg, #101012 0%, #17171d 100%);
  border: 1px solid rgba(57, 156, 249, 0.15);
  padding: 4.5rem 3.5rem;
  border-radius: var(--radius-lg);
  text-align: center;
  color: #fff;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  animation: ctaGlowBreathe 5s ease-in-out infinite;
}

/* Floating background SVG container inside CTA panel */
.cta-shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.cta-shape {
  position: absolute;
  pointer-events: none;
  opacity: 0.65;
  transition: opacity 0.5s ease;
}

/* Top-Left wireframe floating position */
.cta-shape-tl {
  top: -15px;
  left: -15px;
  animation: cta-float-tl 13s ease-in-out infinite;
  filter: drop-shadow(0 0 15px rgba(57, 156, 249, 0.25));
}

/* Bottom-Right rotating ring floating position */
.cta-shape-br {
  bottom: -15px;
  right: 3%;
  animation: cta-float-bl 15s ease-in-out infinite;
  filter: drop-shadow(0 0 15px rgba(252, 211, 77, 0.25));
}

@keyframes cta-float-tl {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(-12px) rotate(8deg) scale(1.06);
  }
}

@keyframes cta-float-bl {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(15px) rotate(-15deg) scale(0.94);
  }
}

/* Slowly panning amber gradient underneath everything — the "living" base layer */
@keyframes ctaGradientDrift {
  0%, 100% { background-position: 0% 0%, 0% 50%; }
  50% { background-position: 0% 0%, 100% 50%; }
}

/* Gentle breathing glow around the whole panel */
@keyframes ctaGlowBreathe {
  0%, 100% { box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45); }
  50% { box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5); }
}

/* Faint drifting grid, masked to a soft center vignette so edges fade out */
.cta-banner-grid {
  position: absolute;
  inset: -20px;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at 50% 45%, black 0%, transparent 90%);
  -webkit-mask-image: radial-gradient(circle at 50% 45%, black 0%, transparent 90%);
  animation: ctaGridDrift 16s linear infinite;
  z-index: 0;
  pointer-events: none;
}

@keyframes ctaGridDrift {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 34px 34px, 34px 34px; }
}

/* Soft blurred orbs that drift lazily — gives the panel real depth and motion */
.cta-banner-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(45px);
  z-index: 0;
  pointer-events: none;
}

.cta-glow-1 {
  width: 240px;
  height: 240px;
  top: -90px;
  left: -60px;
  background: rgba(255, 255, 255, 0.28);
  animation: ctaOrbDrift1 9s ease-in-out infinite;
}

.cta-glow-2 {
  width: 260px;
  height: 260px;
  bottom: -100px;
  right: -70px;
  background: rgba(0, 0, 0, 0.35);
  animation: ctaOrbDrift2 11s ease-in-out infinite;
}

@keyframes ctaOrbDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(35px, 25px) scale(1.15); }
}

@keyframes ctaOrbDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-30px, -20px) scale(1.12); }
}

.cta-banner-title,
.cta-banner-desc,
.cta-banner-actions {
  position: relative;
  z-index: 1;
}

.cta-banner-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.cta-banner-desc {
  font-size: clamp(1rem, 2vw, 1.15rem);
  opacity: 0.92;
  max-width: 600px;
  margin: 0 auto 2.5rem;
}

.cta-banner-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2rem;
}

.cta-banner-btn {
  font-weight: 700;
  border-radius: 9999px;
  transition: var(--transition-smooth);
}

.cta-banner-btn-primary {
  background-color: var(--accent-primary, #399CF9);
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 4px 14px rgba(57, 156, 249, 0.35);
}

.cta-banner-btn-primary:hover {
  background: #2581D8;
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(57, 156, 249, 0.5);
  transform: translateY(-2px) scale(1.02);
}

.cta-banner-btn-secondary {
  background-color: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.cta-banner-btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: #fff;
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .cta-banner,
  .cta-banner-grid,
  .cta-banner-glow,
  .cta-banner-btn::after {
    animation: none;
  }
}

@media (max-width: 768px) {
  .cta-banner {
    padding: 3rem 1.75rem;
  }
}

@media (max-width: 576px) {
  .cta-banner-actions {
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }
  .cta-banner-actions .btn {
    width: 100%;
    padding: 0.85rem 1.5rem;
    font-size: 0.9rem;
    white-space: nowrap;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .cta-banner {
    padding: 2.5rem 1.25rem;
  }
}

/* ==========================================================================
   STATS & PROCESS timeline SECTION
   ========================================================================== */
.stats-bar {
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 1.8rem 0; /* was 2.25rem — 20% smaller */
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem; /* was 2rem — 20% smaller */
  text-align: center;
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem; /* was 3rem — 20% smaller */
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 0.4rem; /* was 0.5rem — 20% smaller */
}

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.2vw, 2.8rem); /* was clamp(2.5rem, 4vw, 3.5rem) — 20% smaller */
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.stat-label {
  font-size: 0.72rem; /* was 0.9rem — 20% smaller */
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

/* ==========================================================================
   SERVICES SECTION
   ========================================================================== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

@media (max-width: 991px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}

.service-card {
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
  transition: var(--transition-bounce);
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  height: 100%;
}

@media (max-width: 768px) {
  .service-card {
    padding: 1.75rem;
  }
}

@media (max-width: 480px) {
  .service-card {
    padding: 1.5rem;
  }
}

.service-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--accent-gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.service-card:hover {
  transform: translateY(-8px);
  border-color: var(--border-glow);
  box-shadow: 0 20px 40px rgba(0,0,0,0.06);
}

.service-card:hover::after {
  transform: scaleX(1);
}

.service-icon-box {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-sm);
  background-color: rgba(57, 156, 249, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
  color: var(--accent-primary);
  transition: var(--transition-smooth);
}

.service-card:hover .service-icon-box {
  background: var(--accent-gradient);
  color: #fff;
  transform: scale(1.1) rotate(5deg);
}

.service-title {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.service-desc {
  color: var(--text-secondary);
  font-size: 0.95rem;
  flex-grow: 1;
}

.service-link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.service-link svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.service-card:hover .service-link svg {
  transform: translateX(5px);
}

/* ==========================================================================
   PORTFOLIO SECTION
   ========================================================================== */
.portfolio-filters {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 3.5rem;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 0.6rem 1.5rem;
  border-radius: var(--radius-lg);
  font-weight: 500;
  font-size: 0.9rem;
  background-color: var(--bg-secondary);
  border: 1px solid var(--btn-border-color);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.filter-btn:hover, .filter-btn.active {
  background: var(--accent-gradient);
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

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

.portfolio-item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  box-shadow: var(--card-shadow);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
}

/* Suppress translate/reveal jumps during active category filtering to prevent overflow clipping */
.portfolio-grid.filtering-active .portfolio-item {
  transform: none !important;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.portfolio-media-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

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

.portfolio-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

/* Hover scale removed — image stays static on hover */

.portfolio-media-container::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: rgba(10, 10, 12, 0.45);
  border: 1.5px solid rgba(255, 255, 255, 0.8);
  z-index: 3;
  pointer-events: none;
  transition: var(--transition-smooth);
}

.portfolio-media-container::after {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(50% + 4px);
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent #fff;
  z-index: 4;
  pointer-events: none;
  transition: var(--transition-smooth);
}

/* Pulsing ring behind the play button — darker tone so it reads clearly at a glance. */
@keyframes portfolioPlayPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(57, 156, 249, 0.55);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(57, 156, 249, 0);
  }
}

.portfolio-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 12, 0.95) 0%, rgba(10, 10, 12, 0.2) 60%, rgba(10, 10, 12, 0) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 2;
}

/* Overlay hover removed — overlay stays hidden */

.portfolio-category {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}

.portfolio-title {
  color: #fff;
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* Video Modal Player */
.modal {
  position: fixed;
  inset: 0;
  background-color: rgba(10, 10, 12, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  padding: 2rem;
}

.modal.active {
  opacity: 1;
  pointer-events: all;
}

.modal-inner {
  position: relative;
  width: 70%;
  max-width: 900px;
}

.modal-content {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.modal-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.modal-close {
  position: absolute;
  top: -30px;
  right: -70px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 10;
  transition: var(--transition-smooth);
}

.modal-close svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  transition: transform 0.3s ease;
}

.modal-close:hover {
  color: var(--accent-primary);
  border-color: var(--accent-primary);
  background-color: rgba(255, 255, 255, 0.12);
}

.modal-close:hover svg {
  transform: rotate(90deg);
}

@media (max-width: 991px) {
  .modal-inner {
    width: 88%;
  }

  .modal-close {
    top: -28px;
    right: -14px;
  }
}

@media (max-width: 576px) {
  .modal-inner {
    width: 100%;
  }

  .modal-close {
    top: -46px;
    right: 0;
    width: 36px;
    height: 36px;
  }

  .modal-close svg {
    width: 14px;
    height: 14px;
  }
}

/* ==========================================================================
   WHY CHOOSE US SECTION
   ========================================================================== */
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: center;
}

@media (max-width: 991px) {
  .why-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

.why-features-clean {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.5rem 3.0rem;
}

@media (max-width: 576px) {
  .why-features-clean {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
}

/* Why Choose Us Background decorations container */
.why-decorations {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Ambient glowing blobs (No vector lines, 100% clean and modern) */
.section-glow {
  position: absolute;
  width: clamp(200px, 40vw, 420px);
  height: clamp(200px, 40vw, 420px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(57, 156, 249, 0.09) 0%, rgba(252, 211, 77, 0.02) 40%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
  transition: opacity 0.5s ease;
  animation: breatheGlow 10s ease-in-out infinite alternate;
}

@keyframes breatheGlow {
  0% {
    transform: scale(0.9) translate(0, 0);
    opacity: 0.75;
  }
  100% {
    transform: scale(1.1) translate(15px, -15px);
    opacity: 0.95;
  }
}

.glow-left {
  top: 15%;
  left: -5%;
}

.glow-right {
  bottom: 5%;
  right: -5%;
  animation-delay: -5s;
}

/* 3D Isometric / Gyroscope Shapes (Ultra Premium Shaded Layouts) */
.why-shape,
.pricing-shape {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.5s ease;
}

.why-shape-left,
.pricing-shape-left {
  top: 5%;
  left: 0.5%;
  animation: float-3d-cube 14s ease-in-out infinite;
  filter: drop-shadow(0 15px 35px rgba(57, 156, 249, 0.18));
}

.why-shape-right,
.pricing-shape-right {
  bottom: 12%;
  right: 3%;
  animation: float-3d-gyro 16s ease-in-out infinite;
  filter: drop-shadow(0 15px 35px rgba(252, 211, 77, 0.15));
}

@media (max-width: 991px) {
  .why-shape,
  .pricing-shape {
    display: none !important;
  }
}

/* Custom 3D Shaded animations */
@keyframes float-3d-cube {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(-20px) rotate(6deg) scale(1.05);
  }
}

@keyframes float-3d-gyro {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1.05);
  }
  50% {
    transform: translateY(18px) rotate(-8deg) scale(0.95);
  }
}

/* Blueprint-Style Spec Item Layout (Borderless & Minimalistic) */
.why-item {
  position: relative;
  padding-left: 1.5rem;
  border-left: 2px solid rgba(57, 156, 249, 0.15); /* orange tinted accent line */
  transition: border-color 0.4s ease, transform 0.4s ease;
  z-index: 1;
}

.why-item:hover {
  border-left-color: var(--accent-primary);
  transform: translateX(6px);
}

.why-item-num {
  font-family: var(--font-mono);
  font-size: 2.0rem;
  font-weight: 700;
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: initial;
  color: var(--accent-primary);
  display: block;
  line-height: 1;
  margin-bottom: 0.50rem;
  opacity: 0.95;
}

.why-item-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0.50rem 0;
  color: var(--text-primary);
}

.why-item-desc {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Pricing decorations wrapper */
.pricing-decorations {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.pricing-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: clamp(2rem, 5vw, 2.5rem);
}

.toggle-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  background-color: var(--bg-secondary);
  padding: 0.4rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  margin-top: 1.5rem;
}

.toggle-btn {
  padding: 0.5rem 1.5rem;
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.toggle-btn.active {
  background: var(--bg-primary);
  color: var(--text-primary);
  box-shadow: var(--card-shadow);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items: stretch;
}

@media (max-width: 991px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    gap: 1.5rem;
  }
}

.pricing-card {
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 3rem 2.5rem;
  box-shadow: var(--card-shadow);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: var(--transition-bounce);
  overflow: hidden;
}

.pricing-card.reveal {
  /* Override standard bounce transition during scroll-reveal to be silky smooth */
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s ease,
              box-shadow 0.4s ease;
}

.pricing-card.featured {
  background-color: var(--bg-primary);
  border: 2px solid var(--accent-primary);
  box-shadow: 0 20px 40px -10px rgba(57, 156, 249, 0.15);
}

.pricing-card:hover {
  border-color: var(--accent-primary);
  box-shadow: 0 25px 50px -15px rgba(57, 156, 249, 0.12);
}

.pricing-card.featured:hover {
  box-shadow: 0 30px 60px -15px rgba(57, 156, 249, 0.25);
}

.badge {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--accent-gradient);
  color: #fff;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pricing-name {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.pricing-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

.pricing-cost {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin-bottom: 2.5rem;
}

.price {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 768px) {
  .pricing-card {
    padding: 40px 20px;
  }

  .price {
    font-size: 2.7rem;
  }
}

.period {
  font-size: 0.95rem;
  color: var(--text-muted);
}

.pricing-features {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 3rem;
  flex-grow: 1;
}

.pricing-feature-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.92rem;
}

.pricing-feature-icon {
  width: 18px;
  height: 18px;
  color: var(--accent-primary);
  flex-shrink: 0;
}

.pricing-btn {
  width: 100%;
}

.pricing-card-media {
  position: relative;
  width: 100%;
  height: 180px;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 1.5rem;
  cursor: pointer;
  border: 1px solid var(--border-color);
  background-color: #000;
}

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

.pricing-card-media:hover .pricing-card-img {
  transform: scale(1.08);
}

.pricing-card-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(57, 156, 249, 0.4);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
  z-index: 2;
}

.pricing-card-media:hover .pricing-card-play-btn {
  transform: translate(-50%, -50%) scale(1.12);
}

.pricing-card-play-btn::before,
.pricing-card-play-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(57, 156, 249, 0.5);
  opacity: 0;
  z-index: -1;
}

.pricing-card-media:hover .pricing-card-play-btn::before,
.pricing-card-media:hover .pricing-card-play-btn::after {
  animation: pricingPlayPulse 3.2s cubic-bezier(0.34, 0, 0.2, 1) infinite;
}

.pricing-card-media:hover .pricing-card-play-btn::after {
  animation-delay: 1.6s;
}

@keyframes pricingPlayPulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.8); opacity: 0; }
}

.pricing-duration-note {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: -1.5rem;
  margin-bottom: 2rem;
  font-style: normal;
  line-height: 1.3;
}

.pricing-feature-item.disabled {
  color: var(--text-secondary);
  opacity: 0.85;
  text-decoration: line-through;
}

.pricing-feature-icon.disabled {
  color: #ef4444;
  opacity: 1;
}

/* ==========================================================================
   TESTIMONIALS SECTION
   ========================================================================== */
.testimonials-wrapper {
  position: relative;
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

.testimonials-track {
  display: flex;
  gap: 24px;
  transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
}

.testimonial-card {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  padding: 3rem;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  text-align: center;
}

@media (max-width: 576px) {
  .testimonials-track {
    gap: 14px;
  }

  .testimonial-card {
    padding: 1.5rem;
  }
}

.testimonial-quote {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 500;
  line-height: 1.4;
  font-style: normal;
}

.testimonial-user {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.testimonial-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent-primary);
}

.testimonial-info {
  text-align: left;
}

.testimonial-stars {
  display: flex;
  gap: 4px;
  margin-bottom: 0.45rem;
  color: #399CF9;
  font-size: 1.25rem;
}

.testimonial-name {
  font-size: 1.05rem;
  font-weight: 600;
}

.testimonial-role {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.testimonial-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 2.5rem;
}

.testimonial-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.testimonial-arrow:hover {
  background-color: var(--bg-tertiary);
  transform: scale(1.05);
}

.testimonial-dots {
  display: flex;
  gap: 0.5rem;
}

.testimonial-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--bg-tertiary);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.testimonial-dot.active {
  background-color: var(--accent-primary);
  width: 24px;
  border-radius: 4px;
}

/* ==========================================================================
   BLOGS SECTION
   ========================================================================== */
.blogs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

@media (max-width: 991px) {
  .blogs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .blogs-grid {
    grid-template-columns: 1fr;
  }
}

.blog-card {
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: var(--transition-bounce);
  display: flex;
  flex-direction: column;
}

.blog-card:hover {
  transform: translateY(-8px);
  border-color: var(--accent-primary);
  box-shadow: 0 20px 40px -10px rgba(57, 156, 249, 0.15);
}

.blog-img-wrapper {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.blog-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

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

.blog-tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  background-color: var(--bg-glass-solid);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text-primary);
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.blog-content {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.blog-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.blog-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 1rem;
}

.blog-desc {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.blog-link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.blog-link svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s ease;
}

.blog-card:hover .blog-link svg {
  transform: translateX(4px);
}

/* ==========================================================================
   PREMIUM GLASSMORPHISM BLOG CARD STACK (AS REQUESTED BY REFERENCE DESIGN)
   ========================================================================== */
.premium-stack-section {
  background: radial-gradient(circle at center, rgba(57, 156, 249, 0.08) 0%, var(--bg-primary) 100%) !important;
  position: relative;
  overflow: hidden;
}

.premium-stack-section .section-title {
  color: var(--text-primary) !important;
}

.premium-stack-section .section-desc {
  color: var(--text-secondary) !important;
}

.premium-stack-container {
  position: relative;
  width: 100%;
  max-width: 1280px;
  height: 580px;
  margin: 2rem auto 2rem auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Base card layout */
.premium-stack-card {
  position: absolute;
  width: 390px;
  height: 530px;
  border-radius: 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
  user-select: none;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  overflow: hidden;
}

/* Cover image sitting on top of the card, numbering/tag overlaid on it */
.card-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 8 / 5;
  flex-shrink: 0;
  overflow: hidden;
  background-color: var(--bg-secondary);
}

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

/* Dark gradient so the overlaid numbering/tag stay legible on any image */
.card-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.05) 55%, transparent 100%);
  pointer-events: none;
}

.card-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 1.15rem 1.8rem 1.65rem 1.8rem;
}

/* Card metadata header — overlaid on the cover image, same position as before */
.card-header-meta {
  position: absolute;
  top: 1.1rem;
  left: 1.2rem;
  right: 1.2rem;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: auto;
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.card-num {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  opacity: 0.9;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.card-tag {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 0.15rem 0.5rem;
  border-radius: 99px;
  background-color: rgba(15, 15, 17, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Card typography & Content — clamped to 2 lines with an ellipsis so
   copy length never breaks the card's fixed height */
.premium-stack-card .card-title {
  font-family: var(--font-sans);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 0;
  line-height: 1.35;
  letter-spacing: -0.01em;
  transition: all 0.5s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.premium-stack-card .card-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin-bottom: 0;
  line-height: 1.45;
  transition: all 0.5s ease;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Learn more button - custom orange gradient accent match */
.premium-stack-card .card-btn {
  background: var(--accent-gradient);
  color: #ffffff;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 1rem 2rem;
  border-radius: 9999px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: none;
  box-shadow: 0 10px 25px -5px var(--accent-glow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
}

.premium-stack-card .card-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px -5px var(--accent-glow);
}

@media (min-width: 992px) {
  /* State: Left Card (darker, lower depth) */
  .premium-stack-card.state-left {
    transform: translateX(-440px) scale(0.85);
    z-index: 10;
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    border: 1px solid var(--border-color);
    opacity: 0.55;
  }

  /* State: Right Card (darker, lower depth) */
  .premium-stack-card.state-right {
    transform: translateX(440px) scale(0.85);
    z-index: 10;
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    border: 1px solid var(--border-color);
    opacity: 0.55;
  }

  /* State: Center Card (active, glowing warm glassmorphism) */
  .premium-stack-card.state-center {
    transform: translateX(0) scale(1.05);
    z-index: 30;
    /* Glowing Warm Glassmorphism with Backdrop Filter */
    background: linear-gradient(145deg, rgba(57, 156, 249, 0.12) 0%, var(--bg-glass) 100%);
    backdrop-filter: blur(25px) saturate(130%);
    -webkit-backdrop-filter: blur(25px) saturate(130%);
    border: 1.5px solid rgba(57, 156, 249, 0.4);
    box-shadow: 0 40px 80px rgba(57, 156, 249, 0.22), 
                0 0 32px rgba(57, 156, 249, 0.07),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
    opacity: 1;
  }

  .premium-stack-card.state-center .card-title {
    font-weight: 600;
  }

  .premium-stack-card.state-center .card-desc {
    color: var(--text-primary);
  }

  /* Hover indicators — no scale/size change, only visual elevation */
  .premium-stack-card.state-left:hover,
  .premium-stack-card.state-left.is-hovered {
    opacity: 1 !important;
    z-index: 100 !important;
    transform: translateX(-440px) scale(0.85) !important;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.8), 0 0 26px rgba(57, 156, 249, 0.28) !important;
    border: 1.5px solid rgba(57, 156, 249, 0.6) !important;
    background: linear-gradient(145deg, rgba(57, 156, 249, 0.15) 0%, var(--bg-tertiary) 100%) !important;
    filter: none !important;
  }

  .premium-stack-card.state-right:hover,
  .premium-stack-card.state-right.is-hovered {
    opacity: 1 !important;
    z-index: 100 !important;
    transform: translateX(440px) scale(0.85) !important;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.8), 0 0 26px rgba(57, 156, 249, 0.28) !important;
    border: 1.5px solid rgba(57, 156, 249, 0.6) !important;
    background: linear-gradient(145deg, rgba(57, 156, 249, 0.15) 0%, var(--bg-tertiary) 100%) !important;
    filter: none !important;
  }

  .premium-stack-card.state-center:hover,
  .premium-stack-card.state-center.is-hovered {
    opacity: 1 !important;
    z-index: 100 !important;
    transform: translateX(0) scale(1.05) !important;
    box-shadow: 0 45px 90px rgba(0, 0, 0, 0.8), 0 0 32px rgba(57, 156, 249, 0.32) !important;
    border: 1.5px solid rgba(57, 156, 249, 0.7) !important;
    filter: none !important;
  }

  /* Dim non-hovered cards when container has a hovered card */
  .premium-stack-container.has-hover .premium-stack-card:not(.is-hovered) {
    opacity: 0.25 !important;
    filter: blur(2.5px) grayscale(20%);
    z-index: 1 !important;
  }

  .premium-stack-container.has-hover .premium-stack-card.state-left:not(.is-hovered) {
    transform: translateX(-475px) scale(0.78) !important;
  }

  .premium-stack-container.has-hover .premium-stack-card.state-right:not(.is-hovered) {
    transform: translateX(475px) scale(0.78) !important;
  }

  .premium-stack-container.has-hover .premium-stack-card.state-center:not(.is-hovered) {
    transform: translateX(0) scale(0.78) !important;
  }
}

/* Mobile & Tablet responsive layout (animation-free) */
@media (max-width: 991px) {
  .premium-stack-container {
    height: auto;
    flex-direction: column;
    gap: 2rem;
    margin: 1.5rem auto;
  }
  
  .premium-stack-card {
    position: relative !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 380px;
    padding: 0 !important;
    opacity: 1 !important;
    box-shadow: var(--card-shadow) !important;
    transition: none !important;
    cursor: default !important;
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
  }
  
  .premium-stack-card.state-center {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
  }

  /* Disable all hover/click animation states on touch-sized viewports */
  .premium-stack-card:hover,
  .premium-stack-card.is-hovered,
  .premium-stack-card:not(.state-center):hover {
    transform: none !important;
  }

  .premium-stack-card .card-title,
  .premium-stack-card .card-desc,
  .premium-stack-card .card-btn {
    transition: none !important;
  }

  .premium-stack-card .card-btn:hover {
    transform: none !important;
  }

  .premium-stack-container:hover .premium-stack-card:not(:hover),
  .premium-stack-container.has-hover .premium-stack-card:not(.is-hovered) {
    opacity: 1 !important;
    filter: none !important;
    z-index: auto !important;
  }
}

/* ==========================================================================
   CONTACT FORM / GENERAL CONTACT
   ========================================================================== */
.contact-section-wrapper {
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (max-width: 480px) {
  .contact-info-list {
    gap: 1.25rem;
  }

  .contact-info-list .section-label {
    margin-bottom: 0.5rem;
  }

  .contact-info-list .section-title {
    margin-bottom: 0.5rem;
  }
}

.contact-info-item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  cursor: default;
  transition: var(--transition-smooth);
  border: 1px solid var(--border-color);
}

a.contact-info-item {
  cursor: pointer;
}

.contact-info-item:hover {
  background-color: var(--bg-tertiary);
  border-color: rgba(57, 156, 249, 0.5);
  transform: translateX(4px);
}

.contact-info-item:hover .contact-info-icon {
  background-color: var(--accent-primary);
  color: #fff;
}

.contact-info-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background-color: var(--bg-tertiary);
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--transition-smooth);
}

.contact-info-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.contact-info-val {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.contact-form {
  background-color: var(--bg-primary);
  border: 1px solid var(--btn-border-color);
  border-radius: var(--radius-md);
  padding: 3rem;
  box-shadow: var(--card-shadow);
}

@media (max-width: 576px) {
  .contact-form {
    padding: 1.5rem;
  }
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

@media (max-width: 576px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.form-label {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  display: block;
}

.form-input {
  width: 100%;
  padding: 0.9rem 1.25rem;
  border-radius: var(--radius-sm);
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  transition: var(--transition-smooth);
}

.form-input:focus {
  border-color: var(--accent-primary);
  background-color: var(--bg-primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

textarea.form-input {
  resize: vertical;
  min-height: 150px;
}

/* ==========================================================================
   ABOUT PAGE SPECIFICS
   ========================================================================== */
.story-image-box {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  aspect-ratio: 4 / 3;
}

@media (max-width: 991px) {
  /* Image is first in the markup (desktop: image left, text right).
     When the grid collapses to a single column on mobile/tablet, push
     the image below the text instead of stacking in DOM order. */
  .story-image-box {
    order: 2;
  }
}

.story-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

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

@media (max-width: 480px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
}

.team-card {
  text-align: center;
}

.team-avatar-box {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 1.25rem;
  background-color: var(--bg-secondary);
  box-shadow: var(--card-shadow);
}

.team-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.team-card:hover .team-avatar {
  transform: scale(1.05);
}

.team-name {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.team-role {
  font-size: 0.88rem;
  color: var(--accent-primary);
  font-family: var(--font-mono);
  font-weight: 500;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  padding: 5rem 0 2.5rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr 1.4fr;
  gap: 3rem;
  margin-bottom: 4rem;
}

@media (max-width: 991px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
  }
  .footer {
  padding: 5rem 0 0rem;
}
}

@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer {
  padding: 5rem 0 0rem;
}
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.footer-brand-desc {
  color: var(--text-secondary);
  font-size: 0.95rem;
  max-width: 350px;
}

.footer-socials {
  display: flex;
  gap: 1rem;
}

.social-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}

.social-link:hover {
  background: var(--accent-primary);
  color: #fff;
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(57, 156, 249, 0.45);
}

.footer-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent-primary);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.footer-link {
  color: var(--text-secondary);
  font-size: 0.92rem;
}

a.footer-link:hover {
  color: var(--text-primary);
  transform: translateX(4px);
}

/* Footer Contact Info rows (icon + text) */
.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.5;
}

.footer-contact-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-primary);
}

a.footer-contact-item {
  transition: var(--transition-smooth);
}

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

a.footer-contact-item:hover .footer-contact-icon {
  background: var(--accent-gradient);
  color: #fff;
  border-color: transparent;
}

.footer-bottom {
  padding-top: 2.5rem;
  padding-bottom: 0;
  border-top: 1px solid var(--border-color);
  text-align: center;
}

/* Tablet: give the line a bit more breathing room than the default
   container padding at this width */
@media (max-width: 991px) {
  .footer-bottom {
    padding-left: 35px;
    padding-right: 35px;
  }
}

/* Mobile: less top padding, and enough bottom/side padding that the
   floating call/WhatsApp buttons never sit over the credit line */
@media (max-width: 480px) {
  .footer-bottom {
    padding-top: 1.5rem;
    padding-bottom: 80px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .footer-copy {
    font-size: 0.78rem;
  }
}

.footer-copy {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.7;
}

.footer-credit-link {
  color: var(--accent-primary);
  font-weight: 600;
}

.footer-credit-link:hover {
  color: var(--accent-secondary);
}

.footer-dot {
  color: #ffffff;
}

.light-mode .footer-dot {
  color: #000000;
}

/* ==========================================================================
   BLOG POST PAGE (single dynamic template — content swapped in via JS
   based on the ?post= query param)
   ========================================================================== */
.blog-post-banner {
  width: 70%;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  border: 1px solid var(--border-color);
}

.blog-post-banner img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  display: block;
}

.blog-post-content {
  width: 70%;
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.85;
}

.blog-post-content p {
  margin-bottom: 1.5rem;
}

.blog-post-content h2 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 2.5rem 0 1.1rem;
}

.blog-post-content ul {
  margin: 0 0 1.5rem 1.25rem;
  padding: 0;
}

.blog-post-content li {
  margin-bottom: 0.6rem;
}

@media (max-width: 768px) {
  .blog-post-banner,
  .blog-post-content {
    width: 100%;
  }
}

/* Related Articles grid */
.related-articles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto;
}

@media (max-width: 700px) {
  .related-articles-grid {
    grid-template-columns: 1fr;
  }
}

.related-article-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: var(--transition-smooth);
  box-shadow: var(--card-shadow);
}

.related-article-card:hover {
  transform: translateY(-6px);
  border-color: rgba(57, 156, 249, 0.4);
}

.related-article-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 8;
  overflow: hidden;
  background-color: var(--bg-secondary);
}

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

.related-article-body {
  padding: 1.5rem 1.6rem;
}

.related-article-tag {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-primary);
  margin-bottom: 0.6rem;
  display: inline-block;
}

.related-article-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   SCROLL REVEAL / INTERACTION ANIMATIONS (UP & DOWN ENTRANCES)
   ========================================================================== */
.reveal {
  opacity: 0;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: transform, opacity;
}

.reveal-up {
  transform: translateY(15px);
}

.reveal-down {
  transform: translateY(-15px);
}

.reveal-left {
  transform: translateX(-15px);
}

.reveal-right {
  transform: translateX(15px);
}

.reveal-scale {
  transform: scale(0.98);
}

/* Dynamic Active states applied by IntersectionObserver */
.reveal.active {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* Stagger Animation Delays */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }

/* Pure CSS Keyframes Animations */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
}

/* Floating elements in background */
.floating-circle {
  position: absolute;
  border-radius: 50%;
  background: var(--accent-gradient);
  filter: blur(120px);
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
  animation: blob-float 14s ease-in-out infinite;
}

.circle-1 {
  width: 400px;
  height: 400px;
  top: 15%;
  left: -10%;
}

.circle-2 {
  width: 500px;
  height: 500px;
  bottom: 10%;
  right: -15%;
  animation-delay: -7s;
  animation-duration: 18s;
}

@keyframes blob-float {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(40px, -30px) scale(1.08);
  }
  66% {
    transform: translate(-25px, 25px) scale(0.95);
  }
}

/* Success Message Overlay */
.form-success-overlay {
  position: absolute;
  inset: 0;
  background-color: var(--bg-glass-solid);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  border-radius: var(--radius-md);
  opacity: 0;
  pointer-events: none;
  transition: var(--transition-smooth);
  z-index: 5;
}

.form-success-overlay.active {
  opacity: 1;
  pointer-events: all;
}


.success-icon-wrapper {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent-gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  animation: pulse 2s infinite;
}

/* ==========================================================================
   CUSTOM CURSOR (Premium ring + dot morph — Desktop only)
   ========================================================================== */

/* Hide custom cursor on touch/mobile devices */
@media (pointer: coarse) {
  .custom-cursor,
  .custom-cursor-dot {
    display: none !important;
  }
}

/* Native cursor stays visible (arrow / pointer) — the ring + dot below
   are a decorative overlay on top of it, not a replacement for it. */

/* Outer ring */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-primary);
  pointer-events: none;
  z-index: 99999;
  opacity: 0;
  will-change: transform;
  transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
  transition: opacity 0.3s ease, width 0.3s cubic-bezier(0.16, 1, 0.3, 1), height 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, border-color 0.3s ease;
}

/* Inner dot */
.custom-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent-primary);
  pointer-events: none;
  z-index: 100000;
  opacity: 0;
  will-change: transform;
  transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
  transition: opacity 0.3s ease, width 0.25s ease, height 0.25s ease;
}

/* Cursor becomes visible once mouse enters the document */
.custom-cursor.visible,
.custom-cursor-dot.visible {
  opacity: 1;
}

/* Hover state — ring expands, filled with semi-transparent tint */
.custom-cursor.hover {
  width: 60px;
  height: 60px;
  background-color: rgba(57, 156, 249, 0.08);
  border-color: var(--accent-primary);
}

.custom-cursor-dot.hover {
  width: 4px;
  height: 4px;
}

/* Play state — when hovering portfolio items (PLAY pill shape) */
.custom-cursor.play {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: rgba(57, 156, 249, 0.15);
  border-color: var(--accent-primary);
  /* PLAY text shown via a pseudo element */
}

.custom-cursor.play::after {
  content: 'PLAY';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-primary);
}

.custom-cursor-dot.play {
  opacity: 0;
}

/* Link-hover state — cursor becomes a hollow filled gradient ring */
.custom-cursor.link {
  width: 54px;
  height: 54px;
  border-color: var(--accent-secondary);
  background-color: rgba(57, 156, 249, 0.05);
}

/* ==========================================================================
   FLOATING CALL & WHATSAPP CTA BUTTONS (Premium 3D/Glassmorphic Style)
   ========================================================================== */

.floating-cta-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 9999;
}

/* Base button style */
.floating-cta-btn {
  pointer-events: auto;
  position: fixed;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 
              inset 0 2px 3px rgba(255, 255, 255, 0.35), 
              inset 0 -2px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
              box-shadow 0.4s ease, 
              opacity 0.4s ease;
  animation: cta-attention 3s ease-in-out infinite;
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  z-index: 9999;
}

.floating-cta-btn:hover {
  animation: none !important;
}

/* Positions with standard high-end padding from edge */
.floating-cta-left {
  bottom: 24px;
  left: 24px;
}

.floating-cta-right {
  bottom: 24px;
  right: 24px;
}

/* Brand Orange Call Button */
#floating-call-btn {
  background: linear-gradient(135deg, #FA8B24 0%, #DB6B0E 100%);
  color: #FFFFFF;
}

#floating-call-btn:hover {
  box-shadow: 0 15px 35px rgba(250, 139, 36, 0.45), 
              inset 0 2px 4px rgba(255, 255, 255, 0.5), 
              inset 0 -2px 4px rgba(0, 0, 0, 0.2);
  transform: scale(1.12) translateY(-3px);
}

/* Brand Green WhatsApp Button */
#floating-whatsapp-btn {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #FFFFFF;
}

#floating-whatsapp-btn:hover {
  box-shadow: 0 15px 35px rgba(37, 211, 102, 0.45), 
              inset 0 2px 4px rgba(255, 255, 255, 0.5), 
              inset 0 -2px 4px rgba(0, 0, 0, 0.2);
  transform: scale(1.12) translateY(-3px);
}

/* Red Notification Badge Style matching the uploaded design */
.cta-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  background: #FF3B30; /* Vibrant notification badge red */
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(255, 59, 48, 0.35), 0 1px 2px rgba(0, 0, 0, 0.15);
  border: 1.5px solid #FFFFFF;
  z-index: 10;
  pointer-events: none;
  line-height: 1;
}

/* Tooltip container positioned to the sides of each button */
.cta-tooltip {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 8px 14px;
  background: rgba(15, 15, 17, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #EDEDED;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  letter-spacing: 0.01em;
}

/* Tooltip on the right side of the left button (Call) */
.floating-cta-left .cta-tooltip {
  left: 74px;
  right: auto;
  bottom: auto;
}

.floating-cta-left:hover .cta-tooltip {
  opacity: 1;
  visibility: visible;
}

/* Tooltip on the left side of the right button (WhatsApp) */
.floating-cta-right .cta-tooltip {
  right: 74px;
  left: auto;
  bottom: auto;
}

.floating-cta-right:hover .cta-tooltip {
  opacity: 1;
  visibility: visible;
}

/* Custom Tooltip Styling for Light Mode */
.light-mode .cta-tooltip {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(26, 26, 26, 0.08);
  color: #121214;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* Icon rotation and scale transitions */
.cta-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.floating-cta-left:hover .cta-icon-wrapper {
  transform: rotate(12deg);
}

.floating-cta-right:hover .cta-icon-wrapper {
  transform: rotate(-12deg);
}

/* Pulsing background glow ring — disabled per request, icon should only rotate */
.cta-pulse-ring {
  display: none;
}

#floating-call-btn .cta-pulse-ring {
  background: rgba(250, 139, 36, 0.4);
}

#floating-whatsapp-btn .cta-pulse-ring {
  background: rgba(37, 211, 102, 0.4);
}

/* KEYFRAME ANIMATIONS */

/* Gentle Attention Wiggle (stays in place, just rotates left & right) */
@keyframes cta-attention {
  0% {
    transform: rotate(0deg);
  }
  /* Idle state for the first 1.8 seconds of the 3-second cycle */
  60% {
    transform: rotate(0deg);
  }
  /* Rotates left */
  72% {
    transform: rotate(-20deg);
  }
  /* Rotates right */
  84% {
    transform: rotate(20deg);
  }
  /* Settles back to center neutral */
  94% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* Expanding radial ring matching the attention beats */
@keyframes cta-pulse-expand {
  0%, 60% {
    transform: scale(1);
    opacity: 0;
  }
  64% {
    opacity: 0.55;
  }
  100% {
    transform: scale(1.45);
    opacity: 0;
  }
}

/* Responsiveness adjustments for standard mobile sizes */
@media (max-width: 480px) {
  .floating-cta-btn {
    width: 54px;
    height: 54px;
  }
  
  .floating-cta-left {
    bottom: 20px;
    left: 20px;
    right: auto;
  }
  
  .floating-cta-right {
    bottom: 20px;
    right: 20px;
  }
  
  .cta-tooltip {
    bottom: 68px;
    font-size: 0.7rem;
    padding: 6px 10px;
  }
  
  /* Disable rotation inside buttons on ultra small mobile to save layout performance */
  .floating-cta-btn:hover .cta-icon-wrapper {
    transform: none !important;
  }
}

/* ==========================================================================
   SITE-WIDE CANVAS & HERO DECORATIONS
   ========================================================================== */
#bg-particles-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
}

.hero-video-trigger {
  cursor: pointer;
  position: relative;
}

/* Centered play button overlay for hero SVGs with premium float and wave ripple effects */
/* Centered play button overlay styled like the reference image with theme colors */
.hero-play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
  border-radius: 50%;
  z-index: 10;
  cursor: pointer;
  background: linear-gradient(135deg, #399CF9 0%, #F82A2A 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(57, 156, 249, 0.45);
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  animation: hero-play-float 5s ease-in-out infinite;
  border: none;
}

.hero-play-overlay:hover {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 15px 40px rgba(57, 156, 249, 0.6);
}

/* Play triangle symbol in the center */
.play-triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent #ffffff;
  margin-left: 6px;
  z-index: 12;
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.hero-play-overlay:hover .play-triangle {
  transform: scale(1.1);
}

/* Floating keyframe animation */
@keyframes hero-play-float {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-8px);
  }
}

/* Light mode overrides */
.light-mode .hero-play-overlay {
  background: linear-gradient(135deg, #399CF9 0%, #F82A2A 100%);
  box-shadow: 0 10px 30px rgba(57, 156, 249, 0.35);
}

/* Hero Section Abstract background decorations */
.hero-decorations {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.hero-shape {
  position: absolute;
  pointer-events: none;
  opacity: 0.8;
  transition: opacity 0.5s ease;
}

/* Wireframe Cube styling and slow floating animation */
.shape-cube {
  top: 15%;
  left: 8%;
  animation: float-cube 9s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(57, 156, 249, 0.45));
}

@keyframes float-cube {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(-15px) rotate(10deg) scale(1.05);
  }
}

/* Orange Node Constellations styling and soft floating */
.shape-nodes {
  bottom: 18%;
  left: 14%;
  animation: float-nodes 12s ease-in-out infinite;
  filter: drop-shadow(0 0 15px rgba(57, 156, 249, 0.45));
}

@keyframes float-nodes {
  0%, 100% {
    transform: translateY(0) translateX(0) scale(1);
  }
  50% {
    transform: translateY(12px) translateX(-8px) scale(0.98);
  }
}

/* Bottom-right rotating ring */
.shape-ring {
  bottom: 2%;
  right: 2%;
  left: auto;
  top: auto;
  animation: rotate-simple 35s linear infinite;
  opacity: 1.0;
}

@keyframes rotate-simple {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 768px) {
  .hero-decorations {
    opacity: 0.55; /* Reduce visibility on smaller mobile devices */
  }
  .shape-cube {
    top: 10%;
    left: 5%;
    transform: scale(0.65);
  }
  .shape-nodes {
    bottom: 15%;
    left: 8%;
    transform: scale(0.65);
  }
  .shape-ring {
    bottom: 8%;
    right: 5%;
    left: auto;
    top: auto;
    transform: scale(0.75);
  }
}

/* ==========================================================================
   SERVICES SECTION BACKGROUND DECORATIONS
   ========================================================================== */
.services-decorations {
  position: absolute;
  top: 60px;
  right: 10%;
  pointer-events: none;
  z-index: 0;
}

.services-shape-right {
  animation: services-spin-float 16s ease-in-out infinite;
  filter: drop-shadow(0 0 15px rgba(57, 156, 249, 0.4));
  opacity: 0.7;
}

@keyframes services-spin-float {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(-20px) rotate(180deg) scale(1.08);
  }
}

@media (max-width: 991px) {
  .services-decorations {
    top: 30px;
    right: 4%;
    transform: scale(0.8);
  }
}

@media (max-width: 768px) {
  .services-decorations {
    display: none; /* Hide on small mobile to avoid layout overcrowding */
  }
}

/* ==========================================================================
   FOOTER BACKGROUND GLOWING DOTS DECORATION
   ========================================================================== */
.footer {
  position: relative;
  overflow: hidden;
}

.footer-decorations {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.footer-glow-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  background-color: var(--accent-primary);
  border-radius: 50%;
  opacity: 0.25;
  box-shadow: 0 0 10px var(--accent-primary), 0 0 20px var(--accent-primary);
  animation: footer-dot-pulse 4s ease-in-out infinite;
}

@keyframes footer-dot-pulse {
  0%, 100% {
    opacity: 0.15;
    transform: scale(0.95);
  }
  50% {
    opacity: 0.55;
    transform: scale(1.25);
  }
}

.footer-decorations .dot-1 {
  top: 15%;
  left: 12%;
  animation-delay: 0.2s;
}
.footer-decorations .dot-2 {
  top: 65%;
  left: 35%;
  animation-delay: 1.4s;
}
.footer-decorations .dot-3 {
  top: 30%;
  right: 18%;
  animation-delay: 0.8s;
}
.footer-decorations .dot-4 {
  bottom: 20%;
  left: 55%;
  animation-delay: 2.1s;
}
.footer-decorations .dot-5 {
  top: 75%;
  right: 40%;
  animation-delay: 1.1s;
}

/* ==========================================================================
   ABOUT STORY SECTION BACKGROUND DECORATIONS
   ========================================================================== */
.story-decorations {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2; /* Sits above the image flow */
  overflow: hidden;
}

.story-shape {
  position: absolute;
  pointer-events: none;
  opacity: 0.9; /* High visibility as requested */
  transition: opacity 0.5s ease;
}

.story-shape-left {
  top: 15%;
  left: 2%;
  animation: float-story-left 12s ease-in-out infinite;
  filter: drop-shadow(0 0 15px rgba(57, 156, 249, 0.25));
}

.story-shape-right {
  bottom: 15%;
  right: 2%;
  animation: float-story-right 14s ease-in-out infinite;
  filter: drop-shadow(0 0 15px rgba(252, 211, 77, 0.25));
}

@keyframes float-story-left {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(-20px) rotate(10deg) scale(1.06);
  }
}

@keyframes float-story-right {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1.05);
  }
  50% {
    transform: translateY(18px) rotate(-12deg) scale(0.94);
  }
}

@media (max-width: 768px) {
  .story-decorations {
    display: none; /* Hide on small mobile to avoid layout crowding */
  }
}

/* ==========================================================================
   ABOUT HERO SECTION BACKGROUND DECORATIONS
   ========================================================================== */
.about-hero-decorations {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.about-hero-shape {
  position: absolute;
  pointer-events: none;
  opacity: 0.9; /* High visibility as requested */
  transition: opacity 0.5s ease;
}

.about-hero-shape-tl {
  top: 22%;
  left: 5%;
  right: auto;
  animation: about-hero-float-tl 11s ease-in-out infinite;
  filter: drop-shadow(0 0 15px rgba(57, 156, 249, 0.35));
}

.about-hero-shape-br {
  bottom: 12%;
  right: 5%;
  left: auto;
  animation: about-hero-float-br 13s ease-in-out infinite;
  filter: drop-shadow(0 0 15px rgba(252, 211, 77, 0.35));
}

@keyframes about-hero-float-tl {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(-15px) rotate(12deg) scale(1.05);
  }
}

@keyframes about-hero-float-br {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1.04);
  }
  50% {
    transform: translateY(18px) rotate(-10deg) scale(0.96);
  }
}

@media (max-width: 768px) {
  .about-hero-decorations {
    display: none; /* Hide on small mobile to prevent layout overcrowding */
  }
}

/* ==========================================================================
   ABOUT PIPELINE SEQUENCE TIMELINE
   ========================================================================== */
.pipeline-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
  position: relative;
  margin-top: 3.5rem;
}

.pipeline-line {
  position: absolute;
  top: 30px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-primary) 0%, rgba(57, 156, 249, 0.15) 100%);
  z-index: 0;
}

.pipeline-step {
  position: relative;
  z-index: 1;
  text-align: center;
}

.pipeline-badge {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--bg-secondary);
  border: none;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--glass-shadow);
}

.pipeline-step:hover .pipeline-badge {
  border-color: transparent;
  border: none;
  background: var(--accent-gradient);
  color: #fff;
  transform: scale(1.12);
  box-shadow: 0 0 22px rgba(57, 156, 249, 0.4);
}

.light-mode .pipeline-badge,
:root[data-theme="light"] .pipeline-badge {
  background: #EBF4FE;
  border: none;
  color: #0F172A;
  box-shadow: 0 4px 16px rgba(57, 156, 249, 0.22), 0 2px 6px rgba(0, 0, 0, 0.04);
}

.pipeline-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.pipeline-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

@media (max-width: 991px) {
  .pipeline-container {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .pipeline-line {
    top: 5%;
    bottom: 5%;
    left: 31px;
    right: auto;
    width: 2px;
    height: 90%;
  }
  .pipeline-step {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "badge title"
      "badge desc";
    gap: 0.25rem 1.5rem;
    text-align: left;
    align-items: start;
  }
  .pipeline-badge {
    grid-area: badge;
    margin: 0;
    flex-shrink: 0;
  }
  .pipeline-title {
    grid-area: title;
    margin-bottom: 0;
  }
  .pipeline-desc {
    grid-area: desc;
  }
}

/* Light Mode Overrides for CTA Banner */
.light-mode .cta-banner {
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.25) 0%, rgba(255, 237, 213, 0.18) 50%, rgba(253, 244, 245, 0.22) 100%);
  border: 1px solid rgba(57, 156, 249, 0.15);
  color: var(--text-primary);
  box-shadow: 0 25px 55px -15px rgba(57, 156, 249, 0.08), 0 0 35px rgba(57, 156, 249, 0.02), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  animation: ctaGlowBreatheLight 5s ease-in-out infinite;
}

.light-mode .cta-banner-grid {
  background-image:
    linear-gradient(rgba(57, 156, 249, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57, 156, 249, 0.10) 1px, transparent 1px);
}

.light-mode .cta-banner-title {
  color: var(--text-primary);
}

.light-mode .cta-banner-desc {
  color: var(--text-secondary);
}

.light-mode .cta-banner-btn-primary {
  background-color: var(--accent-primary, #399CF9);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(57, 156, 249, 0.35);
}

.light-mode .cta-banner-btn-primary:hover {
  background: #2581D8;
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(57, 156, 249, 0.5);
  transform: translateY(-2px) scale(1.02);
}

.light-mode .cta-banner-btn-secondary {
  background-color: transparent;
  color: var(--text-primary);
  border: 1px solid rgba(18, 18, 20, 0.25);
}

.light-mode .cta-banner-btn-secondary:hover {
  background-color: rgba(18, 18, 20, 0.05);
  border-color: var(--text-primary);
}

.light-mode .cta-shape {
  opacity: 0.85;
}

/* Cleaned: preserved inline Soft Green and Accent Blue strokes */

.light-mode .cta-shape-tl {
  filter: drop-shadow(0 5px 15px rgba(57, 156, 249, 0.06));
}

.light-mode .cta-shape-br {
  filter: drop-shadow(0 5px 15px rgba(57, 156, 249, 0.06));
}

.light-mode .cta-glow-1 {
  background: rgba(57, 156, 249, 0.11);
}

.light-mode .cta-glow-2 {
  background: rgba(99, 248, 89, 0.18);
}

@keyframes ctaGlowBreatheLight {
  0%, 100% {
    box-shadow: 0 25px 50px -15px rgba(57, 156, 249, 0.1), 0 0 25px rgba(57, 156, 249, 0.02);
  }
  50% {
    box-shadow: 0 28px 55px -12px rgba(57, 156, 249, 0.15), 0 0 35px rgba(57, 156, 249, 0.06);
  }
}

/* ==========================================================================
   FAQ ACCORDION SECTION
   ========================================================================== */
.faq-accordion {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.faq-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
}

.faq-item[open] {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(57, 156, 249, 0.4);
  box-shadow: 0 10px 30px -10px rgba(57, 156, 249, 0.15);
}

.faq-item:hover {
  border-color: rgba(57, 156, 249, 0.3);
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.03);
}

.faq-question {
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--text-primary);
  cursor: pointer;
  list-style: none; /* Hide default arrow */
  user-select: none;
}

/* Hide default marker on Chrome/Safari/Firefox */
.faq-question::-webkit-details-marker {
  display: none;
}

.faq-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  transition: all 0.3s ease;
  flex-shrink: 0;
  margin-left: 1rem;
}

.faq-icon svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.faq-item[open] .faq-icon {
  background: var(--accent-gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 15px rgba(57, 156, 249, 0.35);
}

.faq-item[open] .faq-icon svg {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 1.5rem 1.5rem 1.5rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  border-top: 1px solid transparent;
  animation: faq-slide-down 0.3s ease-out forwards;
}

.faq-item[open] .faq-answer {
  border-top-color: rgba(255, 255, 255, 0.04);
}

@keyframes faq-slide-down {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Light mode overrides */
.light-mode .faq-item {
  background: rgba(0, 0, 0, 0.015);
  border-color: rgba(0, 0, 0, 0.07);
}

.light-mode .faq-item[open] {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(57, 156, 249, 0.45);
}

.light-mode .faq-item:hover {
  background: rgba(0, 0, 0, 0.025);
  border-color: rgba(57, 156, 249, 0.25);
}

.light-mode .faq-icon {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   BLOG ARCHIVE PAGE GRID
   ========================================================================== */
.blogs-grid-section {
  padding-bottom: 7rem;
  position: relative;
  z-index: 1;
}

.blogs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

@media (max-width: 991px) {
  .blogs-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

@media (max-width: 768px) {
  .blogs-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.blog-list-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.01) 100%);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  position: relative;
  color: inherit;
  text-decoration: none;
}

.blog-list-card:hover {
  transform: translateY(-6px);
  border-color: rgba(57, 156, 249, 0.4);
  box-shadow: 0 20px 40px rgba(57, 156, 249, 0.15);
}

.blog-list-card-cover {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
}

.blog-list-card-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.blog-list-card:hover .blog-list-card-img {
  transform: scale(1.04);
}

.blog-list-card-meta {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  display: flex;
  gap: 0.5rem;
}

.blog-list-card-num {
  background: var(--accent-gradient);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(57, 156, 249, 0.25);
}

.blog-list-card-tag {
  background: rgba(10, 10, 12, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.blog-list-card-body {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.blog-list-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--text-primary);
  line-height: 1.4;
  transition: color 0.3s ease;
}

.blog-list-card-title a {
  color: inherit;
  text-decoration: none;
}

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

.blog-list-card-desc {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.blog-list-card-btn {
  align-self: flex-start;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

.blog-list-card-btn svg {
  transition: transform 0.3s ease;
}

.blog-list-card-btn:hover {
  color: var(--accent-secondary);
}

.blog-list-card-btn:hover svg {
  transform: translateX(4px);
}

/* Light mode overrides for simple card */
.light-mode .blog-list-card {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(0, 0, 0, 0.06);
}

.light-mode .blog-list-card:hover {
  border-color: rgba(57, 156, 249, 0.3);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}