/* ============================================================================
   FIJARA HOMEPAGE
   ============================================================================ */

:root {
  /* Hero Rays Background */
  --hero-stripe-color: #fff;
  --hero-ray-blue: #60a5fa;
  --hero-ray-pink: #e879f9;
  --hero-ray-teal: #5eead4;

  /* Glass Button Effects */
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-glow-purple: rgba(138, 43, 226, 0.3);
  --glass-glow-cyan: rgba(0, 191, 255, 0.3);
  --glass-glow-pink: rgba(255, 105, 180, 0.3);

  /* Diagonal Section */
  --diagonal-angle: -6deg;
  --stripe-gradient-1: #53f;
  --stripe-gradient-2: #05d5ff;
  --stripe-gradient-3: #a6ffcb;

  /* Process Slider */
  --slider-accent: var(--color-primary);
  --slider-card-bg: rgba(255, 255, 255, 0.85);

  /* CTA Animated Section */
  --cta-filter-blur: 2vmin;

  /* Cookie Banner */
  --cookie-bg: var(--bg-card);
  --cookie-border: var(--border-color);
  --cookie-text: var(--text-secondary);
  --cookie-accent: var(--color-primary);
}

[data-theme="dark"] {
  --hero-stripe-color: #000;
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.15);
  --slider-card-bg: rgba(30, 41, 59, 0.9);
  --cookie-bg: var(--bg-card);
}

[data-theme="creamy"] {
  --hero-ray-blue: #0ea5e9;
  --hero-ray-pink: #f472b6;
  --hero-ray-teal: #2dd4bf;
  --stripe-gradient-1: #0ea5e9;
  --stripe-gradient-2: #06b6d4;
  --stripe-gradient-3: #99f6e4;
  --slider-accent: #0ea5e9;
}

/* Performance: Force GPU compositing and layout containment */
.hero-section,
.services-section,
.kanban-tracking-section,
.process-section,
.tech-section,
.faq-section,
.cta-section {
  contain: layout style;
}

/* Prevent animation jank */
.hero-rainbow-bg,
.preview-features-row,
.cta-bg-picture {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Reduced animation mode */
.reduce-animations .hero-rainbow-bg::before,
.reduce-animations .hero-rainbow-bg::after,
.reduce-animations .cta-bg-picture::before,
.reduce-animations .cta-bg-picture::after {
  animation: none !important;
}

.reduce-animations .preview-features-row {
  animation: none !important;
}

.reduce-animations * {
  transition-duration: 0.1s !important;
}

/* ============================================================================
   HERO SECTION - RAYS BACKGROUND
   ============================================================================ */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg-body);
}

/* ============================================================================
   HERO RAYS BACKGROUND - Seamless (No Visible Lines)
   ============================================================================ */
.hero-rays-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Primary aurora layer - large soft gradient blobs */
.hero-rays-bg::before {
  content: "";
  position: absolute;
  /* Extend beyond viewport to hide edges */
  inset: -50%;
  width: 200%;
  height: 200%;

  background: 
    /* Soft color blob 1 */
    radial-gradient(
      ellipse 80% 50% at 20% 30%,
      var(--hero-ray-blue) 0%,
      transparent 50%
    ),
    /* Soft color blob 2 */
    radial-gradient(
        ellipse 60% 80% at 80% 20%,
        var(--hero-ray-pink) 0%,
        transparent 50%
      ),
    /* Soft color blob 3 */
    radial-gradient(
        ellipse 70% 60% at 60% 80%,
        var(--hero-ray-teal) 0%,
        transparent 50%
      ),
    /* Soft color blob 4 */
    radial-gradient(
        ellipse 50% 70% at 30% 70%,
        var(--hero-ray-pink) 0%,
        transparent 50%
      );

  filter: blur(20px);
  opacity: 0.6;
  animation: raysFloat 30s ease-in-out infinite;
  transform-origin: center center;
}

/* Secondary layer for depth */
.hero-rays-bg::after {
  content: "";
  position: absolute;
  inset: -30%;
  width: 160%;
  height: 160%;

  background:
    radial-gradient(
      ellipse 90% 60% at 70% 40%,
      var(--hero-ray-blue) 0%,
      transparent 45%
    ),
    radial-gradient(
      ellipse 50% 90% at 20% 60%,
      var(--hero-ray-pink) 0%,
      transparent 45%
    );

  filter: blur(20px);
  opacity: 0.4;
  animation: raysFloatReverse 25s ease-in-out infinite;
  transform-origin: center center;
}

/* Mask to fade edges and position effect */
.hero-rays-bg {
  mask-image: radial-gradient(
    ellipse 80% 70% at 85% 30%,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.4) 40%,
    transparent 70%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 80% 70% at 85% 30%,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.4) 40%,
    transparent 70%
  );
}

/* Smooth floating animation using transforms (GPU accelerated, no seams) */
@keyframes raysFloat {
  0%,
  100% {
    transform: translate(0%, 0%) rotate(0deg) scale(1);
  }
  25% {
    transform: translate(5%, -3%) rotate(1deg) scale(1.02);
  }
  50% {
    transform: translate(-3%, 5%) rotate(-1deg) scale(0.98);
  }
  75% {
    transform: translate(-5%, -2%) rotate(0.5deg) scale(1.01);
  }
}

@keyframes raysFloatReverse {
  0%,
  100% {
    transform: translate(0%, 0%) rotate(0deg) scale(1);
  }
  25% {
    transform: translate(-4%, 4%) rotate(-0.5deg) scale(0.98);
  }
  50% {
    transform: translate(4%, -3%) rotate(1deg) scale(1.03);
  }
  75% {
    transform: translate(2%, 5%) rotate(-0.5deg) scale(0.99);
  }
}

/* Dark theme adjustments */
[data-theme="dark"] .hero-rays-bg::before {
  opacity: 0.5;
  filter: blur(20px) saturate(130%);
}

[data-theme="dark"] .hero-rays-bg::after {
  opacity: 0.35;
  filter: blur(20px) saturate(130%);
}

/* Creamy theme adjustments */
[data-theme="creamy"] .hero-rays-bg::before,
[data-theme="creamy"] .hero-rays-bg::after {
  filter: blur(20px) saturate(90%);
}

/* ============================================================================
   PERFORMANCE OPTIMIZATIONS
   ============================================================================ */

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .hero-rays-bg::before,
  .hero-rays-bg::after {
    animation-duration: 90s;
  }
}

/* Mobile optimization */
@media (max-width: 767px) {
  .hero-rays-bg::before {
    inset: -30%;
    width: 160%;
    height: 160%;
    filter: blur(5px);
    opacity: 0.5;
    animation-duration: 40s;
  }

  .hero-rays-bg::after {
    display: none;
  }

  .hero-rays-bg {
    mask-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.7) 0%,
      rgba(0, 0, 0, 0.3) 40%,
      transparent 60%
    );
    -webkit-mask-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.7) 0%,
      rgba(0, 0, 0, 0.3) 40%,
      transparent 60%
    );
  }
}

/* Tablet optimization */
@media (min-width: 768px) and (max-width: 991px) {
  .hero-rays-bg::before {
    filter: blur(5px);
    animation-duration: 35s;
  }

  .hero-rays-bg::after {
    filter: blur(5px);
    animation-duration: 30s;
  }
}

/* Pause when tab not visible or scrolled away */
.hero-rays-bg.paused::before,
.hero-rays-bg.paused::after,
.hero-rays-bg.offscreen::before,
.hero-rays-bg.offscreen::after {
  animation-play-state: paused;
}

.hero-rays-bg.paused::before,
.hero-rays-bg.paused::after {
  animation-play-state: paused !important;
}

.process-slider-wrapper.paused .swiper-wrapper {
  animation-play-state: paused !important;
}

.preview-features-row.paused,
.preview-features-row.row-odd.paused {
  animation-play-state: paused !important;
  transform: none !important;
}

.animations-paused * {
  animation-play-state: paused !important;
}

/* Power-saving mode */
@media (prefers-reduced-data: reduce), (prefers-contrast: more) {
  .hero-rays-bg::before {
    animation-duration: 60s;
    opacity: 0.4;
  }

  .hero-rays-bg::after {
    display: none;
  }
}

/* Very low-end devices */
@media (max-width: 767px) and (update: slow) {
  .hero-rays-bg::before,
  .hero-rays-bg::after {
    animation: none;
  }

  .hero-rays-bg::before {
    opacity: 0.35;
  }
}

/* Fix content positioning */
.hero-content-wrapper {
  position: relative;
  z-index: 20;
  mix-blend-mode: normal;
  filter: none;
}

/* Hero Content */
.hero-content-wrapper {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.hero-text-content {
  max-width: 600px;
}

/* Hero Badge */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  background: rgba(67, 121, 255, 0.1);
  border: 1px solid rgba(67, 121, 255, 0.25);
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 1.5rem;
}

[data-theme="creamy"] .hero-badge {
  background: rgba(14, 165, 233, 0.1);
  border-color: rgba(14, 165, 233, 0.25);
  color: #0ea5e9;
}

/* Hero Title - WebGL Style */
.hero-title {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-family: var(--big-font, "Poppins", sans-serif);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  font-family: "Poppins", sans-serif;
  letter-spacing: -0.03em;
  background: linear-gradient(
    135deg,
    var(--text-primary) 0%,
    var(--text-secondary) 50%,
    var(--text-primary) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: heroGlowPulse 3s ease-in-out infinite alternate;
}

.hero-title .highlight {
  background: linear-gradient(135deg, var(--color-primary) 0%, #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="creamy"] .hero-title .highlight {
  background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes heroGlowPulse {
  from {
    filter: drop-shadow(0 0 40px rgba(255, 255, 255, 0.4))
      drop-shadow(0 0 80px var(--glass-glow-purple));
  }
  to {
    filter: drop-shadow(0 0 60px rgba(255, 255, 255, 0.6))
      drop-shadow(0 0 120px var(--glass-glow-cyan));
  }
}

/* Hero Description */
.hero-description {
  font-size: 1.25rem;
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: 2.5rem;
  max-width: 500px;
  text-shadow:
    0 0 30px rgba(255, 255, 255, 0.5),
    0 0 60px var(--glass-glow-purple);
}

/* Glass Buttons */
.hero-buttons {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.glass-button {
  position: relative;
  padding: 1rem 2.5rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-primary);
  background: linear-gradient(
    135deg,
    var(--glass-bg) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
  border: 1.5px solid transparent;
  border-radius: 50px;
  transform: translateZ(0);
  backface-visibility: hidden;
  backdrop-filter: blur(5px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 var(--glass-border),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.glass-button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50px;
  padding: 1.5px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.4) 0%,
    var(--glass-glow-purple) 25%,
    var(--glass-glow-cyan) 50%,
    var(--glass-glow-pink) 75%,
    rgba(255, 255, 255, 0.4) 100%
  );
  background-size: 200% 200%;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: glassBorderFlow 3s linear infinite;
  opacity: 0.6;
  transition: opacity 0.5s ease;
}

@keyframes glassBorderFlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

.glass-button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50px;
  background: radial-gradient(
    circle at var(--x, 50%) var(--y, 50%),
    rgba(255, 255, 255, 0.2) 0%,
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
}

.glass-button:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.05) 100%
  );
  transform: translateY(-3px) scale(1.02);
}

.glass-button:hover::before {
  opacity: 1;
  animation-duration: 2s;
}

.glass-button:hover::after {
  opacity: 1;
}

.glass-button:active {
  transform: translateY(-1px) scale(0.98);
}

.glass-button .shimmer {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 45%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0.1) 55%,
    transparent 100%
  );
  transform: rotate(30deg);
  animation: glassShimmer 3s infinite;
  pointer-events: none;
}

@keyframes glassShimmer {
  0% {
    transform: translateX(-100%) rotate(30deg);
  }
  100% {
    transform: translateX(100%) rotate(30deg);
  }
}

.glass-button:hover .shimmer {
  animation-duration: 1.5s;
}

.glass-button span:not(.shimmer) {
  position: relative;
  z-index: 1;
}

.glass-button.primary {
  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-primary-dark)
  );
  color: white;
}

[data-theme="creamy"] .glass-button.primary {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
}

/* Hero Stats */
.hero-stats {
  display: flex;
  gap: 3rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-color);
}

.hero-stat {
  text-align: left;
}

.stat-number {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

@media (max-width: 480px) {
  .hero-stat .stat-number {
    align-items: center;
    justify-content: center;
  }
}

.stat-value {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}

.stat-suffix {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
}

[data-theme="creamy"] .stat-suffix {
  color: #0ea5e9;
}

.stat-label {
  display: block;
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: 0.375rem;
  font-weight: 500;
}

/* Hero Visual */
.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

.hero-visual-card {
  position: relative;
  background: var(--slider-card-bg);
  backdrop-filter: blur(5px);
  border: 1px solid var(--border-color);
  border-radius: 1.5rem;
  padding: 2rem;
  box-shadow: var(--shadow-2xl);
  width: 100%;
  max-width: 550px;
  min-width: 300px;
}

.hero-visual-card img {
  width: 100%;
  height: auto;
  min-height: 300px;
  max-height: 500px;
  object-fit: contain; /* Use contain instead of cover */
  border-radius: 1rem;
}

/* Responsive adjustments for hero visual */
@media (max-width: 991.98px) {
  .hero-visual {
    margin-top: 3rem;
    min-height: 300px;
  }

  .hero-visual-card {
    max-width: 400px;
    padding: 1.5rem;
  }
}

/* Floating Elements */
.floating-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  box-shadow: var(--shadow-lg);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  animation: heroFloat 6s ease-in-out infinite;
  backdrop-filter: blur(5px);
  z-index: 10;
}

.floating-card:nth-child(1) {
  top: 10%;
  right: -15%;
  animation-delay: 0s;
}

.floating-card:nth-child(2) {
  bottom: 30%;
  left: -20%;
  animation-delay: 2s;
}

.floating-card:nth-child(3) {
  bottom: 5%;
  right: 5%;
  animation-delay: 4s;
}

@keyframes heroFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

.floating-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}

.floating-icon.success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.floating-icon.warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.floating-icon.primary {
  background: var(--bg-selected);
  color: var(--color-primary);
}

/* ============================================================================
   DIAGONAL SECTIONS - STRIPE PATTERN
   ============================================================================ */
.diagonal-wrapper {
  position: relative;
}

/* Services Section with Stripe Background */
.services-section {
  position: relative;
  padding: 8rem 0;
  background: linear-gradient(
    150deg,
    var(--stripe-gradient-1) 15%,
    var(--stripe-gradient-2) 70%,
    var(--stripe-gradient-3) 94%
  );
  clip-path: polygon(0 8%, 100% 0, 100% 92%, 0 100%);
  margin-top: -5%;
  margin-bottom: -5%;
}

.services-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-body);
  opacity: 0.95;
}

[data-theme="dark"] .services-section::before {
  opacity: 0.92;
}

.services-section .container {
  position: relative;
  z-index: 1;
}

/* SVG Border Lines */
.services-clip-border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  color: var(--text-muted, #94a3b8);
  opacity: 0.5;
}

[data-theme="dark"] .services-clip-border {
  color: #475569;
  opacity: 0.5;
}

[data-theme="creamy"] .services-clip-border {
  color: #c9b99a;
  opacity: 0.4;
}

/* Show/hide appropriate SVG for breakpoint */
.services-clip-border-tablet,
.services-clip-border-mobile {
  display: none;
}

/* Stripe Overlay Pattern */
.stripe-pattern {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform-origin: 0;
  transform: skewY(-6deg);
  pointer-events: none;
  opacity: 0.08;
}

.stripe-pattern span {
  position: absolute;
  height: 150px;
}

.stripe-pattern span:nth-child(1) {
  width: 33.33333%;
  left: -16.66666%;
  top: 0;
  background: var(--stripe-gradient-1);
}

.stripe-pattern span:nth-child(2) {
  width: 33.33333%;
  top: 0;
  left: 16.66666%;
  background: var(--stripe-gradient-2);
}

.stripe-pattern span:nth-child(3) {
  width: 33.33333%;
  left: 49.99999%;
  top: 190px;
  background: var(--stripe-gradient-1);
}

.stripe-pattern span:nth-child(4) {
  width: 33.33333%;
  top: 380px;
  right: -16.66666%;
  background: var(--stripe-gradient-2);
}

.stripe-pattern span:nth-child(5) {
  width: 33.33333%;
  bottom: 0;
  background: var(--stripe-gradient-3);
}

/* Section Headers */
.section-header {
  text-align: center;
  max-width: 750px;
  margin: 0 auto 4rem;
}

.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 1rem;
  background: var(--bg-selected);
  border-radius: 100px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.25rem;
}

[data-theme="creamy"] .section-badge {
  background: rgba(14, 165, 233, 0.1);
  color: #0ea5e9;
}

.section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 1rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.section-description {
  font-size: 1.125rem;
  color: var(--text-secondary);
  line-height: 1.75;
}

/* Services Grid */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  gap: 1rem;
}

.service-card {
  position: relative;
  padding: 2rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 1.25rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  border-color: transparent;
}

.service-card:hover::before {
  opacity: 1;
}

.service-icon-wrapper {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  margin-bottom: 1.5rem;
  font-size: 1.375rem;
  color: white;
  background: linear-gradient(
    135deg,
    var(--service-color, var(--color-primary)),
    color-mix(in srgb, var(--service-color, var(--color-primary)) 70%, #8b5cf6)
  );
}

.service-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.375rem;
}

.service-card-tagline {
  font-size: 0.875rem;
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: 0.875rem;
}

[data-theme="creamy"] .service-card-tagline {
  color: #0ea5e9;
}

.service-card-description {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.service-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.service-features-list li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.service-features-list li i {
  color: var(--color-success);
  font-size: 0.75rem;
  flex-shrink: 0;
}

.service-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-color);
}

.service-price {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-weight: 500;
}

.service-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  transition: gap 0.2s ease;
}

.service-link:hover {
  gap: 0.625rem;
}

[data-theme="creamy"] .service-link {
  color: #0ea5e9;
}

.section-cta {
  margin-top: 3.5rem;
  text-align: center;
}

/* ============================================================================
   PROCESS SLIDER - Fixed with Arrows and Adjacent Slides
   ============================================================================ */
.process-section {
  position: relative;
  padding: 6rem 0 8rem;
  clip-path: polygon(0 0, 100% 6%, 100% 100%, 0 100%);
}

.process-slider-wrapper {
  display: flex;
  flex-direction: row;
  background: var(--bg-surface-secondary);
  border-radius: 1.5rem;
  height: 650px;
  position: relative;
  overflow: hidden;
}

.process-slider-wrapper .swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-wrapper {
  height: 100%;
}

.process-slide {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  height: 100%;
  overflow: hidden;
}

/* Show adjacent slides (partial visibility) */
.swiper-slide {
  height: 100%;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Active slide (centered) */
.swiper-slide-active {
  transform: translateY(0);
  z-index: 2;
}

.process-slide-image {
  height: 100%;
  width: 70%;
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
  padding: 80px;
  z-index: 1;
}

.process-slide-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
}

.process-slide-content {
  position: absolute;
  left: 0;
  top: calc(50% - 80px);
  transform: translateY(-50%);
  max-width: 510px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 0.5rem;
  padding: 50px;
  margin: 80px;
  padding-left: 0;
  transition: backdrop-filter 0.9s;
  z-index: 2;
  padding-left: 50px !important;
}

[data-theme="dark"] .process-slide-content {
  background: rgba(30, 41, 59, 0.9);
}

.process-slide-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--color-primary);
  color: white;
  font-size: 1.25rem;
  font-weight: 800;
  border-radius: 50%;
  margin-bottom: 20px;
}

.process-slide-title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
  text-transform: capitalize;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.process-slide-desc {
  color: #656565;
  font-size: 14px;
  line-height: 1.6;
  text-transform: capitalize;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}

[data-theme="dark"] .process-slide-desc {
  color: var(--text-secondary);
}

.process-slide-btn {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}

.swiper-slide-active .process-slide-title,
.swiper-slide-active .process-slide-desc,
.swiper-slide-active .process-slide-btn {
  opacity: 1;
  transform: translateY(0);
}

/* Arrow Navigation Styling */
.process-arrows {
  opacity: 0;
  display: none !important;
}

.process-arrow {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.process-arrow svg {
  width: 28px;
  height: 28px;
  stroke: var(--color-primary);
}

.process-arrow-up svg g,
.process-arrow-down svg g {
  stroke: var(--color-primary);
}

.process-arrow-up {
  transform: rotate(-90deg);
}

.process-arrow-down {
  transform: rotate(90deg);
  margin-top: 15px;
}

.process-arrow .arrow-icon--circle {
  transition: stroke-dashoffset 0.3s ease;
  stroke-dasharray: 95;
  stroke-dashoffset: 95;
}

.process-arrow:hover .arrow-icon--circle {
  stroke-dashoffset: 0;
}

.process-arrow:hover {
  transform: scale(1.1);
}

.process-arrow-up:hover {
  transform: rotate(-90deg) scale(1.1);
}

.process-arrow-down:hover {
  transform: rotate(90deg) scale(1.1);
}

/* Process Pagination - Fixed positioning */
.process-pagination {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  margin-right: 40px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 6px;
  z-index: 10;
}

.process-pagination .swiper-pagination-bullet {
  width: 20px;
  height: 20px;
  background: transparent;
  opacity: 0.8;
  display: inline-block;
  margin: 6px -5px;
}

.process-pagination .swiper-pagination-bullet svg {
  transform: rotate(-90deg);
}

.process-pagination .swiper-pagination-bullet .svg__circle-inner {
  stroke: var(--text-primary);
  fill: transparent;
  transition: all 0.3s ease;
}

.process-pagination .swiper-pagination-bullet-active .svg__circle {
  stroke: var(--color-primary);
  stroke-dasharray: 75;
  stroke-dashoffset: 0;
  animation: progress 4s ease-in-out 1 forwards;
}

.process-pagination .swiper-pagination-bullet-active .svg__circle-inner {
  fill: var(--text-primary);
  stroke: var(--color-primary);
}

.process-slide-btn .arrow-link.link--arrowed svg g {
  stroke: var(--color-primary) !important;
}

@keyframes progress {
  0% {
    stroke-dashoffset: 75;
    opacity: 1;
  }
  95% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

/* Arrow Link Styling */
.arrow-link.link--arrowed {
  display: inline-block;
  color: var(--text-primary);
  cursor: pointer;
  font-weight: 500;
  text-decoration: none;
  text-transform: capitalize;
  font-size: 14px;
  transition: all 0.3s ease;
}

.arrow-link.link--arrowed:hover {
  color: var(--color-primary);
}

.arrow-link.link--arrowed .arrow-icon {
  position: relative;
  top: 0;
  transition: transform 0.3s ease;
  vertical-align: middle;
}

.arrow-link.link--arrowed .arrow-icon--circle {
  transition: stroke-dashoffset 0.3s ease;
  stroke-dasharray: 95;
  stroke-dashoffset: 95;
}

.arrow-link.link--arrowed:hover .arrow-icon {
  transform: translate3d(5px, 0, 0);
}

.arrow-link.link--arrowed:hover .arrow-icon--circle {
  stroke-dashoffset: 0;
}

.arrow-link.link--arrowed:hover g {
  color: var(--color-primary);
}

/* Scroll Arrow (Optional) */
.upk-page-scroll {
  display: none; /* Hide if not needed */
}

/* Responsive adjustments */
@media (min-width: 1024px) and (max-width: 1439.98px) {
  .process-slider-wrapper {
    height: 600px;
    padding: 70px;
  }

  .process-slide-title {
    font-size: 35px;
  }

  .process-arrows {
    padding-top: 80px;
    padding-right: 25px;
  }

  .process-pagination {
    margin-right: 38px;
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .process-slider-wrapper {
    height: 550px;
    padding: 60px;
  }

  .process-slide-title {
    font-size: 30px;
  }

  .process-slide-content {
    max-width: 400px;
    padding: 40px;
    padding-left: 0;
  }

  .process-arrows {
    padding-top: 70px;
    padding-right: 20px;
  }

  .process-pagination {
    margin-right: 30px;
  }
}

@media (max-width: 767.98px) {
  .process-slider-wrapper {
    height: auto;
    min-height: 500px;
    padding: 30px;
    flex-direction: column;
  }

  .swiper-slide-prev,
  .swiper-slide-next {
    transform: none;
    opacity: 0.5;
  }

  .process-slider-wrapper {
    overflow: visible;
  }

  .process-swiper {
    overflow: hidden;
    height: 100%;
  }

  .process-swiper .swiper-wrapper {
    flex-direction: row;
  }

  .process-swiper .swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: auto;
  }

  .process-slide {
    flex-direction: column;
  }

  .process-slide-image {
    height: 250px;
    width: 100%;
    padding: 0;
  }

  .process-slide-content {
    position: relative;
    top: auto;
    transform: none;
    max-width: 100%;
    margin-top: -60px;
    margin-left: 1rem;
    margin-right: 1rem;
    padding: 1.5rem;
    border-radius: 1rem;
  }

  .process-arrows {
    position: relative;
    height: auto;
    flex-direction: row;
    justify-content: center;
    padding: 1.5rem 0 0 0;
    gap: 2rem;
  }

  .process-arrows {
    display: none;
  }

  .process-slide-content {
    margin-bottom: 0;
  }

  .process-section {
    padding-bottom: 2rem;
  }

  .process-arrow-up,
  .process-arrow-down {
    transform: none;
    margin: 0;
  }

  .process-pagination {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    margin: 1rem 0 0 0;
    display: flex;
    flex-direction: row;
  }

  .swiper-pagination-bullet,
  .swiper-pagination-bullet:only-child {
    display: flex !important;
  }
}

/* ============================================================================
   FAQ SECTION 
   ============================================================================ */
.faq-section {
  padding: 7rem 0;
  background: var(--bg-surface-secondary);
}

.faq-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 4rem;
  align-items: start;
}

.faq-sidebar {
  position: sticky;
  top: 100px;
}

.faq-sidebar .section-badge,
.faq-sidebar .section-title,
.faq-sidebar .section-description {
  text-align: left;
}

.faq-sidebar .section-title {
  font-size: 2.25rem;
}

.faq-sidebar .section-description {
  margin: 0 0 1.5rem;
}

.faq-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  background: var(--color-primary);
  color: white !important;
  font-weight: 600;
  border-radius: 0.75rem;
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.faq-contact-btn:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-primary);
}

[data-theme="creamy"] .faq-contact-btn {
  background: #0ea5e9;
}

[data-theme="creamy"] .faq-contact-btn:hover {
  background: #0284c7;
}

/* FAQ List */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* FAQ Item - Flat Panel Design */
.faq-item {
  background: #f5f6f8;
  border: none;
  border-radius: 0;
  overflow: hidden;
  transition: background 0.4s ease;
  position: relative;
}

[data-theme="dark"] .faq-item {
  background: rgba(255, 255, 255, 0.03);
}

[data-theme="creamy"] .faq-item {
  background: #f8f6f3;
}

.faq-item.active {
  background: #ffffff;
}

[data-theme="dark"] .faq-item.active {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="creamy"] .faq-item.active {
  background: #fffdfb;
}

/* FAQ Question - Clean Minimal */
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: none;
  border: none;
  font-size: 1rem;
  font-weight: 300;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: color 0.4s ease;
  position: relative;
}

.faq-question:hover {
  color: var(--color-primary);
}

[data-theme="creamy"] .faq-question:hover {
  color: #0ea5e9;
}

.faq-item.active .faq-question {
  color: var(--color-primary);
}

[data-theme="creamy"] .faq-item.active .faq-question {
  color: #0ea5e9;
}

/* Plus/Minus Bar Indicator */
.faq-question-icon {
  width: 14px;
  height: 14px;
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 0;
}

/* Hide the Font Awesome icon */
.faq-question-icon i {
  display: none;
}

/* Horizontal bar (always visible) */
.faq-question-icon::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 2px;
  background: var(--text-secondary);
  transition: background 0.4s ease;
}

/* Vertical bar (rotates to hide on active) */
.faq-question-icon::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 14px;
  background: var(--text-secondary);
  transition:
    transform 0.4s ease,
    background 0.4s ease;
}

.faq-question:hover .faq-question-icon::before,
.faq-question:hover .faq-question-icon::after {
  background: var(--color-primary);
}

[data-theme="creamy"] .faq-question:hover .faq-question-icon::before,
[data-theme="creamy"] .faq-question:hover .faq-question-icon::after {
  background: #0ea5e9;
}

.faq-item.active .faq-question-icon::before,
.faq-item.active .faq-question-icon::after {
  background: var(--color-primary);
}

[data-theme="creamy"] .faq-item.active .faq-question-icon::before,
[data-theme="creamy"] .faq-item.active .faq-question-icon::after {
  background: #0ea5e9;
}

/* Rotate vertical bar to become horizontal (forms minus) */
.faq-item.active .faq-question-icon::after {
  transform: rotate(90deg);
}

/* FAQ Answer - Smooth Height Transition */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.4s ease,
    opacity 0.4s ease;
  opacity: 0;
}

.faq-item.active .faq-answer {
  max-height: 500px;
  opacity: 1;
}

.faq-answer p {
  font-size: 0.9375rem;
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.75;
  margin: 0;
  padding: 0 1.5rem 1.25rem 1.5rem;
  margin-left: 0;
}

.faq-more {
  margin-top: 2.5rem;
  text-align: center;
}

/* Responsive */
@media (max-width: 991.98px) {
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .faq-sidebar {
    position: static;
    text-align: center;
  }

  .faq-sidebar .section-badge,
  .faq-sidebar .section-title,
  .faq-sidebar .section-description {
    text-align: center;
  }
}

@media (max-width: 575.98px) {
  .faq-question {
    padding: 1rem 1.25rem;
    font-size: 0.9375rem;
  }

  .faq-answer p {
    padding: 0 1.25rem 1rem 1.25rem;
    font-size: 0.875rem;
  }
}

/* ============================================================================
   CTA SECTION - ANIMATED HERO STYLE
   ============================================================================ */
.cta-section {
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
}

.cta-bg-picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.cta-bg-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta-bg-picture::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 25%;
  height: 25%;
  content: "";
  background-color: transparent;
  animation: ctaAnimA 20s ease infinite;
}

@keyframes ctaAnimA {
  0% {
    width: 25%;
    height: 25%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    backdrop-filter: blur(var(--cta-filter-blur)) hue-rotate(0deg);
    -webkit-backdrop-filter: blur(var(--cta-filter-blur)) hue-rotate(0deg);
  }
  12.49% {
    left: 0;
  }
  12.5% {
    width: 100%;
    left: unset;
    backdrop-filter: blur(0vmin) hue-rotate(150deg);
    -webkit-backdrop-filter: blur(0vmin) hue-rotate(150deg);
  }
  25% {
    width: 25%;
    height: 25%;
    backdrop-filter: blur(var(--cta-filter-blur)) hue-rotate(300deg);
    -webkit-backdrop-filter: blur(var(--cta-filter-blur)) hue-rotate(300deg);
  }
  37.49% {
    top: 0;
    bottom: 0;
  }
  37.5% {
    top: unset;
    height: 100%;
    backdrop-filter: blur(0vmin) hue-rotate(150deg);
    -webkit-backdrop-filter: blur(0vmin) hue-rotate(150deg);
  }
  50% {
    width: 25%;
    height: 25%;
    backdrop-filter: blur(var(--cta-filter-blur)) hue-rotate(0deg);
    -webkit-backdrop-filter: blur(var(--cta-filter-blur)) hue-rotate(0deg);
  }
  62.49% {
    left: unset;
    right: 0;
  }
  62.5% {
    right: unset;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(0vmin) hue-rotate(150deg);
    -webkit-backdrop-filter: blur(0vmin) hue-rotate(150deg);
  }
  74.9% {
    top: unset;
    bottom: 0;
  }
  75% {
    width: 25%;
    height: 25%;
    backdrop-filter: blur(var(--cta-filter-blur)) hue-rotate(300deg);
    -webkit-backdrop-filter: blur(var(--cta-filter-blur)) hue-rotate(300deg);
  }
  87.49% {
    top: unset;
    bottom: 0;
  }
  87.5% {
    height: 100%;
    top: 0;
    backdrop-filter: blur(0vmin) hue-rotate(150deg);
    -webkit-backdrop-filter: blur(0vmin) hue-rotate(150deg);
  }
  100% {
    width: 25%;
    height: 25%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    backdrop-filter: blur(var(--cta-filter-blur)) hue-rotate(0deg);
    -webkit-backdrop-filter: blur(var(--cta-filter-blur)) hue-rotate(0deg);
  }
}

.cta-bg-picture::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 25%;
  height: 25%;
  background-color: transparent;
  content: "";
  animation: ctaAnimB 10s ease infinite;
}

@keyframes ctaAnimB {
  0% {
    width: 25%;
    height: 25%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    backdrop-filter: blur(var(--cta-filter-blur)) hue-rotate(0deg);
    -webkit-backdrop-filter: blur(var(--cta-filter-blur)) hue-rotate(0deg);
  }
  12.49% {
    top: 0;
  }
  12.5% {
    height: 100%;
    top: unset;
    backdrop-filter: blur(0vmin) hue-rotate(150deg);
    -webkit-backdrop-filter: blur(0vmin) hue-rotate(150deg);
  }
  25% {
    width: 25%;
    height: 25%;
    backdrop-filter: blur(var(--cta-filter-blur)) hue-rotate(300deg);
    -webkit-backdrop-filter: blur(var(--cta-filter-blur)) hue-rotate(300deg);
  }
  37.49% {
    left: 0;
    right: 0;
  }
  37.5% {
    left: unset;
    width: 100%;
    backdrop-filter: blur(0vmin) hue-rotate(150deg);
    -webkit-backdrop-filter: blur(0vmin) hue-rotate(150deg);
  }
  50% {
    width: 25%;
    height: 25%;
    backdrop-filter: blur(var(--cta-filter-blur)) hue-rotate(0deg);
    -webkit-backdrop-filter: blur(var(--cta-filter-blur)) hue-rotate(0deg);
  }
  62.49% {
    top: unset;
    bottom: 0;
  }
  62.5% {
    top: 0;
    height: 100%;
    backdrop-filter: blur(0vmin) hue-rotate(150deg);
    -webkit-backdrop-filter: blur(0vmin) hue-rotate(150deg);
  }
  74.9% {
    bottom: unset;
    right: 0;
  }
  75% {
    width: 25%;
    height: 25%;
    left: unset;
    backdrop-filter: blur(var(--cta-filter-blur)) hue-rotate(300deg);
    -webkit-backdrop-filter: blur(var(--cta-filter-blur)) hue-rotate(300deg);
  }
  87.49% {
    left: unset;
    right: 0;
  }
  87.5% {
    width: 100%;
    left: 0;
    backdrop-filter: blur(0vmin) hue-rotate(150deg);
    -webkit-backdrop-filter: blur(0vmin) hue-rotate(150deg);
  }
  100% {
    width: 25%;
    height: 25%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    backdrop-filter: blur(var(--cta-filter-blur)) hue-rotate(0deg);
    -webkit-backdrop-filter: blur(var(--cta-filter-blur)) hue-rotate(0deg);
  }
}

/* CTA Content Card */
.cta-content-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 750px;
  margin: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 3rem;
  display: flex;
  border-radius: 1rem;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.6);
  animation: ctaCardAnim 10s linear infinite;
}

@keyframes ctaCardAnim {
  from {
    backdrop-filter: blur(var(--cta-filter-blur)) hue-rotate(0deg);
    -webkit-backdrop-filter: blur(var(--cta-filter-blur)) hue-rotate(0deg);
  }
  to {
    backdrop-filter: blur(var(--cta-filter-blur)) hue-rotate(360deg);
    -webkit-backdrop-filter: blur(var(--cta-filter-blur)) hue-rotate(360deg);
  }
}

.cta-content-card::after {
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 60px;
  height: 60px;
  background-image: linear-gradient(
    320deg,
    #ff20fb,
    #f424ff,
    #d42dff,
    #b139ff,
    #9742ff,
    #8d46ff
  );
  content: "";
  z-index: -1;
  animation: ctaCornerAnim 5s linear infinite;
}

@keyframes ctaCornerAnim {
  from {
    filter: hue-rotate(0deg) brightness(1.5);
    transform: rotateZ(0deg);
    border-radius: 0;
  }
  50% {
    border-radius: 49%;
    filter: hue-rotate(180deg) brightness(1.5);
  }
  to {
    filter: hue-rotate(360deg) brightness(1.5);
    transform: rotateZ(360deg);
    border-radius: 0;
  }
}

.cta-title {
  font-family: "Inter", sans-serif;
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.3;
  color: white;
  margin-bottom: 1.25rem;
  letter-spacing: -0.02em;
}

.cta-description {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.75;
  padding-left: 2rem;
  border-left: 2px solid rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 2rem;
  text-align: left;
  max-width: 650px;
}

.cta-buttons {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  justify-content: center;
}

.cta-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1rem 2rem;
  background: white;
  color: #111 !important;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.cta-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.3);
}

.cta-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1rem 2rem;
  background: transparent;
  color: white !important;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 0.5rem;
  text-decoration: none;
  border: 2px solid rgba(255, 255, 255, 0.4);
  transition: all 0.3s ease;
  cursor: pointer;
}

.cta-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: white;
}

/* ============================================================================
   COOKIE BANNER - COMPACT SLIDING DESIGN
   ============================================================================ */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(calc(100% - 36px));
  z-index: 9999;
  width: 90%;
  max-width: 800px;
  background: var(--cookie-bg);
  border: 1px solid var(--cookie-border);
  border-bottom: none;
  box-shadow:
    0 -4px 20px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  backdrop-filter: blur(5px);
  border-radius: 1.5rem 1.5rem 0 0;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.cookie-banner.show {
  transform: translateX(-50%) translateY(calc(100% - 36px));
}

.cookie-banner:hover,
.cookie-banner.expanded {
  transform: translateX(-50%) translateY(0);
  cursor: default;
}

/* Peek Section */
.cookie-banner-peek {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border-color-light);
  background: linear-gradient(
    to bottom,
    var(--bg-surface),
    var(--bg-surface-secondary)
  );
  border-radius: 1.5rem 1.5rem 0 0;
  padding: 0 1.5rem;
  transition: opacity 0.3s;
}

.cookie-banner:hover .cookie-banner-peek,
.cookie-banner.expanded .cookie-banner-peek {
  opacity: 0.5;
}

.cookie-peek-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.cookie-icon-small {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.cookie-peek-text {
  flex: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cookie-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  animation: cookieBounceUp 2s ease-in-out infinite;
}

@keyframes cookieBounceUp {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

/* Full Content Section */
.cookie-banner-full {
  height: 72px;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s 0.1s;
}

.cookie-banner:hover .cookie-banner-full,
.cookie-banner.expanded .cookie-banner-full {
  opacity: 1;
  pointer-events: auto;
}

.cookie-banner-content {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.cookie-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}

.cookie-icon svg {
  width: 32px;
  height: 32px;
}

.cookie-text {
  flex: 1;
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.5;
}

.cookie-text p {
  margin: 0;
}

.cookie-link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

.cookie-link:hover {
  border-bottom-color: var(--color-primary);
}

[data-theme="creamy"] .cookie-link {
  color: #0ea5e9;
}

.cookie-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.btn-cookie-settings {
  width: 36px;
  height: 36px;
  background: var(--bg-surface-secondary);
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
}

.btn-cookie-settings:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.btn-cookie-settings svg {
  width: 18px;
  height: 18px;
}

.btn-cookie-accept {
  padding: 0.625rem 1.5rem;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: 2rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-cookie-accept:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

[data-theme="creamy"] .btn-cookie-accept {
  background: #0ea5e9;
}

[data-theme="creamy"] .btn-cookie-accept:hover {
  background: #0284c7;
}

/* ============================================================================
   COOKIE MODAL
   ============================================================================ */
.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.cookie-modal.show {
  opacity: 1;
  visibility: visible;
}

.cookie-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.cookie-modal-content {
  position: relative;
  background: var(--bg-card);
  border-radius: 1.5rem;
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: var(--shadow-2xl);
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

.cookie-modal.show .cookie-modal-content {
  transform: scale(1);
}

.cookie-modal-header {
  padding: 2rem 2rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color);
}

.cookie-modal-header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

.cookie-modal-close {
  width: 36px;
  height: 36px;
  background: var(--bg-surface-secondary);
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.cookie-modal-close:hover {
  background: var(--bg-hover);
  transform: rotate(90deg);
}

.cookie-modal-body {
  padding: 2rem;
  overflow-y: auto;
  max-height: calc(80vh - 200px);
}

.cookie-modal-description {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.7;
  margin-bottom: 2rem;
}

.cookie-preference-item {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color-light);
}

.cookie-preference-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.cookie-preference-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.cookie-preference-info h3 {
  margin: 0 0 0.25rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.cookie-preference-info p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Cookie Toggle */
.cookie-toggle-wrapper {
  flex-shrink: 0;
}

.cookie-toggle {
  display: inline-block;
  position: relative;
}

.cookie-toggle-input {
  background-color: var(--bg-surface-tertiary);
  border-radius: 1.25rem;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: block;
  position: relative;
  width: 3.5rem;
  height: 2rem;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.3s ease;
  border: none;
}

.cookie-toggle-input:before {
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  content: "";
  display: block;
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  width: 1.5rem;
  height: 1.5rem;
  transition: transform 0.3s ease;
}

.cookie-toggle-input:checked {
  background-color: var(--color-primary);
}

[data-theme="creamy"] .cookie-toggle-input:checked {
  background-color: #0ea5e9;
}

.cookie-toggle-input:checked:before {
  transform: translateX(1.5rem);
}

.cookie-toggle-disabled .cookie-toggle-input {
  cursor: not-allowed;
  opacity: 0.6;
}

.cookie-modal-footer {
  padding: 1.5rem 2rem 2rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.cookie-policy-link {
  color: var(--color-primary);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

.cookie-policy-link:hover {
  border-bottom-color: var(--color-primary);
}

[data-theme="creamy"] .cookie-policy-link {
  color: #0ea5e9;
}

.btn-cookie-save {
  padding: 0.75rem 2rem;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: 2rem;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-cookie-save:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

[data-theme="creamy"] .btn-cookie-save {
  background: #0ea5e9;
}

[data-theme="creamy"] .btn-cookie-save:hover {
  background: #0284c7;
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */
@media (max-width: 1199.98px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .testimonials-container {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .testimonials-header {
    position: static;
    text-align: center;
  }

  .testimonials-header .section-badge,
  .testimonials-header .section-title,
  .testimonials-header .section-description {
    text-align: center;
  }

  .testimonials-quote-icon {
    margin: 2rem auto 0;
  }
}

@media (max-width: 991.98px) {
  .hero-main-container,
  .hero-content-wrapper {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 6rem 1.5rem;
  }

  .hero-text-content {
    max-width: 100%;
  }

  .hero-description {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-buttons {
    justify-content: center;
  }

  .hero-stats {
    justify-content: center;
  }

  .hero-visual {
    display: none;
  }

  .process-slider-wrapper {
    height: 500px;
    padding: 1.5rem;
  }

  .process-slide-image {
    width: 100%;
  }

  .process-slide-content {
    max-width: 360px;
    padding: 1.5rem;
    padding-left: 0;
  }

  .process-slide-title {
    font-size: 1.5rem;
  }

  .process-nav-wrapper {
    padding-right: 1rem;
  }

  .faq-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .faq-sidebar {
    position: static;
    text-align: center;
  }

  .faq-sidebar .section-badge,
  .faq-sidebar .section-title,
  .faq-sidebar .section-description {
    text-align: center;
  }
}

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

  .hero-stats {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
  }

  .hero-stat {
    text-align: left;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }

  .glass-button {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }

  .process-slider-wrapper {
    height: auto;
    min-height: 600px;
    flex-direction: column;
  }

  .process-slide {
    flex-direction: column;
  }

  .process-slide-image {
    height: 250px;
    width: 100%;
  }

  .process-slide-content {
    position: relative;
    top: auto;
    transform: none;
    max-width: 100%;
    margin-top: -60px;
    margin-left: 1rem;
    margin-right: 1rem;
    padding: 1.5rem;
    border-radius: 1rem;
  }

  .process-nav-wrapper {
    position: relative;
    height: auto;
    flex-direction: row;
    justify-content: center;
    padding: 1.5rem 0;
    gap: 2rem;
  }

  .process-navigation {
    flex-direction: row;
    margin-bottom: 0;
  }

  .process-pagination {
    flex-direction: row;
  }

  .cta-content-card {
    padding: 2rem 1.5rem;
    margin: 0 1rem;
  }

  .cta-description {
    padding-left: 1.5rem;
  }

  .cta-buttons {
    flex-direction: column;
    width: 100%;
  }

  .cta-btn-primary,
  .cta-btn-secondary {
    width: 100%;
    justify-content: center;
  }

  .cookie-banner {
    width: 95%;
  }

  .cookie-banner-peek {
    padding: 0 1rem;
  }

  .cookie-banner-full {
    height: 80px;
    padding: 0 1rem;
  }

  .cookie-modal-content {
    width: 95%;
  }

  .cookie-modal-header {
    padding: 1.5rem 1.5rem 1rem;
  }

  .cookie-modal-body {
    padding: 1.5rem;
  }

  .cookie-modal-footer {
    padding: 1rem 1.5rem 1.5rem;
    flex-direction: column;
    align-items: stretch;
  }

  .btn-cookie-save {
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  .process-section {
    overflow: visible;
    position: relative;
    z-index: 1;
  }
}

@media (max-width: 575.98px) {
  .hero-title {
    font-size: 2rem;
  }

  .section-title {
    font-size: 1.75rem;
  }

  .hero-description {
    font-size: 1.0625rem;
  }

  .stat-value {
    font-size: 2rem;
  }

  .stat-suffix {
    font-size: 1.25rem;
  }

  .cta-title {
    font-size: 1.75rem;
  }

  .cta-description {
    font-size: 1rem;
  }

  .cookie-banner-peek {
    height: 32px;
  }

  .cookie-peek-content {
    font-size: 0.75rem;
  }
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */
.text-center {
  text-align: center;
}

.btn-outline-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  background: transparent;
  color: var(--color-primary) !important;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 0.75rem;
  text-decoration: none;
  border: 2px solid var(--border-color);
  transition: all 0.3s ease;
}

.btn-outline-primary:hover {
  border-color: var(--color-primary);
  background: var(--bg-selected) !important;
}

[data-theme="creamy"] .btn-outline-primary {
  color: #0ea5e9 !important;
}

[data-theme="creamy"] .btn-outline-primary:hover {
  border-color: #0ea5e9;
  background: rgba(14, 165, 233, 0.1);
}

/* Hardware acceleration for animations */
.hero-section,
.glass-button,
.process-slider-wrapper,
.testimonial-image-item {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Optimize compositing layers */
.hero-content-wrapper,
.process-slide-content,
.testimonial-content-area {
  isolation: isolate;
}

/* ============================================================================
   HERO KANBAN VISUAL - Stripe-style Dashboard Preview
   ============================================================================ */
.hero-visual-kanban {
  position: absolute;
  right: -80px;
  top: 48%;
  transform: translateY(-50%);
  width: 65%;
  max-width: 800px;
  min-height: 500px;
  display: flex;
  align-items: center;
  z-index: 5;
}

/* Blur overlay edges */
.hero-kanban-blur {
  position: absolute;
  z-index: 10;
  pointer-events: none;
}

.hero-kanban-blur-left {
  left: 0;
  top: 0;
  bottom: 0;
  width: 80px;
  background: linear-gradient(
    to right,
    var(--bg-body) 0%,
    rgba(var(--bg-body-rgb, 255, 255, 255), 0.8) 30%,
    rgba(var(--bg-body-rgb, 255, 255, 255), 0.4) 60%,
    transparent 100%
  );
}

.hero-kanban-blur-top {
  left: 0;
  right: 0;
  top: 0;
  height: 60px;
  background: linear-gradient(
    to bottom,
    rgba(var(--bg-body-rgb, 255, 255, 255), 0.9) 0%,
    rgba(var(--bg-body-rgb, 255, 255, 255), 0.5) 40%,
    transparent 100%
  );
}

.hero-kanban-blur-bottom {
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  background: linear-gradient(
    to top,
    rgba(var(--bg-body-rgb, 255, 255, 255), 0.95) 0%,
    rgba(var(--bg-body-rgb, 255, 255, 255), 0.6) 40%,
    transparent 100%
  );
}

[data-theme="dark"] .hero-kanban-blur-left {
  background: linear-gradient(
    to right,
    var(--bg-body) 0%,
    rgba(15, 23, 42, 0.9) 30%,
    rgba(15, 23, 42, 0.5) 60%,
    transparent 100%
  );
}

[data-theme="dark"] .hero-kanban-blur-top {
  background: linear-gradient(
    to bottom,
    rgba(15, 23, 42, 0.95) 0%,
    rgba(15, 23, 42, 0.5) 40%,
    transparent 100%
  );
}

[data-theme="dark"] .hero-kanban-blur-bottom {
  background: linear-gradient(
    to top,
    rgba(15, 23, 42, 0.98) 0%,
    rgba(15, 23, 42, 0.6) 40%,
    transparent 100%
  );
}

/* Kanban Board */
.hero-kanban-board {
  display: flex;
  gap: 1rem;
  padding: 3rem 2rem 3rem 60px;
  min-height: 480px;
  background: linear-gradient(
    135deg,
    rgba(var(--bg-surface-rgb, 248, 250, 252), 0.6) 0%,
    rgba(var(--bg-surface-rgb, 248, 250, 252), 0.3) 100%
  );
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(var(--border-color-rgb, 226, 232, 240), 0.5);
  border-right: none;
  border-radius: 1.5rem 0 0 1.5rem;
  box-shadow:
    -20px 0 60px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .hero-kanban-board {
  background: linear-gradient(
    135deg,
    rgba(30, 41, 59, 0.7) 0%,
    rgba(30, 41, 59, 0.4) 100%
  );
  border-color: rgba(71, 85, 105, 0.4);
  box-shadow:
    -20px 0 60px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Kanban Columns */
.hero-kanban-column {
  flex: 0 0 240px;
  background: var(--bg-card);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  max-height: 520px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface-secondary);
}

.hero-kanban-column:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.hero-column-header {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-surface-secondary);
  border-radius: 12px 12px 0 0;
}

.hero-column-title {
  font-weight: 600;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-primary);
}

.hero-column-title i {
  font-size: 0.75rem;
}

.hero-column-count {
  background: var(--bg-body);
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 22px;
  text-align: center;
}

/* Column color coding */
.hero-kanban-column.column-in-progress .hero-column-header {
  border-bottom: 3px solid #8b5cf6;
  border-radius: 12px 12px 0 0;
}

.hero-kanban-column.column-review .hero-column-header {
  border-bottom: 3px solid #f59e0b;
}

.hero-kanban-column.column-done .hero-column-header {
  border-bottom: 3px solid #10b981;
}

/* Task List */
.hero-task-list {
  flex: 1;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.hero-task-list::-webkit-scrollbar {
  width: 4px;
}

.hero-task-list::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 2px;
}

/* Task Cards */
.hero-task-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.75rem;
  position: relative;
  transition: all 0.2s ease;
  cursor: default;
}

.hero-task-card:hover {
  border-color: var(--color-primary-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.hero-task-card.priority-low::before {
  background: #10b981;
}

.hero-task-card.priority-medium::before {
  background: #f59e0b;
}

.hero-task-card.priority-high::before {
  background: #ef4444;
}

.hero-task-card.completed {
  opacity: 0.7;
  background: var(--bg-surface-secondary);
}

.hero-task-card.completed::before {
  background: #10b981;
}

/* Milestone badge */
.hero-task-card.milestone {
  background: linear-gradient(
    135deg,
    var(--bg-card) 0%,
    rgba(99, 102, 241, 0.05) 100%
  );
  border-color: rgba(99, 102, 241, 0.3);
}

.hero-milestone-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 0.55rem;
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

/* Task type icon */
.hero-task-type {
  margin-bottom: 0.35rem;
}

.hero-task-type i {
  font-size: 0.7rem;
}

.hero-task-type .type-feature {
  color: #3b82f6;
}
.hero-task-type .type-bug {
  color: #ef4444;
}
.hero-task-type .type-design {
  color: #ec4899;
}
.hero-task-type .type-documentation {
  color: #6b7280;
}
.hero-task-type .type-done {
  color: #10b981;
}

/* Task description */
.hero-task-desc {
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0 0 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Task meta */
.hero-task-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.65rem;
  color: var(--text-muted);
}

.hero-task-due,
.hero-task-comments,
.hero-task-done {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.hero-task-due.soon {
  color: #f59e0b;
}

.hero-task-done {
  color: #10b981;
  font-weight: 500;
}

.hero-task-assignee {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), #8b5cf6);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  font-weight: 600;
}

/* Floating Progress Indicator */
.hero-floating-indicator {
  position: absolute;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 20;
  animation: heroFloatSmooth 4s ease-in-out infinite;
}

.hero-floating-progress {
  bottom: 15%;
  left: 40px;
}

@keyframes heroFloatSmooth {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.hero-progress-ring {
  position: relative;
  width: 40px;
  height: 40px;
}

.hero-progress-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.hero-progress-bg {
  fill: none;
  stroke: var(--border-color);
  stroke-width: 3;
}

.hero-progress-fill {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dasharray 1s ease;
}

[data-theme="creamy"] .hero-progress-fill {
  stroke: #0ea5e9;
}

.hero-progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-primary);
}

.hero-progress-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ============================================================================
   HERO SECTION LAYOUT ADJUSTMENTS FOR KANBAN
   ============================================================================ */
.hero-section {
  overflow: hidden; /* Important for the extending kanban */
}

.hero-content-wrapper {
  grid-template-columns: 1fr;
  padding-right: 0;
}

/* ============================================================================
   RESPONSIVE - HERO KANBAN
   ============================================================================ */
@media (max-width: 1399.98px) {
  .hero-visual-kanban {
    width: 55%;
    right: -60px;
  }

  .hero-kanban-board {
    padding-left: 80px;
  }

  .hero-kanban-column {
    flex: 0 0 220px;
  }
}

@media (max-width: 1199.98px) {
  .hero-visual-kanban {
    width: 50%;
    right: -40px;
  }

  .hero-kanban-board {
    padding-left: 60px;
    gap: 0.75rem;
  }

  .hero-kanban-column {
    flex: 0 0 200px;
  }

  .hero-floating-progress {
    left: 20px;
    bottom: 10%;
  }
}

@media (max-width: 991.98px) {
  .hero-visual-kanban {
    display: none;
  }
}

/* ============================================================================
   SUBTLE ANIMATIONS FOR KANBAN CARDS
   ============================================================================ */
.hero-task-card {
  animation: heroCardFadeIn 0.6s ease-out backwards;
}

.hero-kanban-column:nth-child(1) .hero-task-card:nth-child(1) {
  animation-delay: 0.1s;
}
.hero-kanban-column:nth-child(1) .hero-task-card:nth-child(2) {
  animation-delay: 0.2s;
}
.hero-kanban-column:nth-child(1) .hero-task-card:nth-child(3) {
  animation-delay: 0.3s;
}
.hero-kanban-column:nth-child(2) .hero-task-card:nth-child(1) {
  animation-delay: 0.15s;
}
.hero-kanban-column:nth-child(2) .hero-task-card:nth-child(2) {
  animation-delay: 0.25s;
}
.hero-kanban-column:nth-child(3) .hero-task-card:nth-child(1) {
  animation-delay: 0.2s;
}
.hero-kanban-column:nth-child(3) .hero-task-card:nth-child(2) {
  animation-delay: 0.3s;
}
.hero-kanban-column:nth-child(3) .hero-task-card:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes heroCardFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Pulse animation for in-progress indicator */
.column-in-progress .hero-column-title i {
  animation: none; /* Override if fa-spin-pulse is too much */
  color: #8b5cf6;
}

/* Subtle glow on milestone */
.hero-task-card.milestone {
  animation:
    heroCardFadeIn 0.6s ease-out backwards,
    milestoneGlow 3s ease-in-out infinite;
}

@keyframes milestoneGlow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
  }
  50% {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.15);
  }
}

/* ============================================================================
   ADDITIONAL CSS VARIABLES FOR HOMEPAGE V2
   ============================================================================ */
:root {
  /* Aurora Colors - Northern Lights Palette */
  --aurora-green: #00ff87;
  --aurora-cyan: #00d4ff;
  --aurora-blue: #4d6bfe;
  --aurora-purple: #8b5cf6;
  --aurora-pink: #ec4899;
  --aurora-teal: #14b8a6;

  --aurora-opacity-base: 0.8;
  --aurora-blur-amount: 40px;

  /* Aurora Gradient Stops */
  --aurora-gradient-1: rgba(0, 255, 135, 0.4);
  --aurora-gradient-2: rgba(0, 212, 255, 0.35);
  --aurora-gradient-3: rgba(77, 107, 254, 0.3);
  --aurora-gradient-4: rgba(139, 92, 246, 0.25);
  --aurora-gradient-5: rgba(236, 72, 153, 0.2);

  /* Hero Rays Background - Original */
  --hero-stripe-color: #fff;
  --hero-ray-blue: #60a5fa;
  --hero-ray-pink: #e879f9;
  --hero-ray-teal: #5eead4;

  /* Glass Button Effects */
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-glow-purple: rgba(138, 43, 226, 0.3);
  --glass-glow-cyan: rgba(0, 191, 255, 0.3);
  --glass-glow-pink: rgba(255, 105, 180, 0.3);

  /* Diagonal Section */
  --diagonal-angle: -6deg;
  --stripe-gradient-1: #53f;
  --stripe-gradient-2: #05d5ff;
  --stripe-gradient-3: #a6ffcb;

  /* Process Slider */
  --slider-accent: var(--color-primary);
  --slider-card-bg: rgba(255, 255, 255, 0.85);

  /* CTA Animated Section */
  --cta-filter-blur: 2vmin;

  /* Cookie Banner */
  --cookie-bg: var(--bg-card);
  --cookie-border: var(--border-color);
  --cookie-text: var(--text-secondary);
  --cookie-accent: var(--color-primary);
}

[data-theme="dark"] {
  --hero-stripe-color: #000;
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.15);
  --slider-card-bg: rgba(30, 41, 59, 0.9);
  --cookie-bg: var(--bg-card);

  /* Aurora adjustments for dark mode */
  --aurora-gradient-1: rgba(0, 255, 135, 0.5);
  --aurora-gradient-2: rgba(0, 212, 255, 0.45);
  --aurora-gradient-3: rgba(77, 107, 254, 0.4);
  --aurora-gradient-4: rgba(139, 92, 246, 0.35);
  --aurora-gradient-5: rgba(236, 72, 153, 0.3);

  --aurora-opacity-base: 0.8;
}

[data-theme="creamy"] {
  --hero-ray-blue: #0ea5e9;
  --hero-ray-pink: #f472b6;
  --hero-ray-teal: #2dd4bf;
  --stripe-gradient-1: #0ea5e9;
  --stripe-gradient-2: #06b6d4;
  --stripe-gradient-3: #99f6e4;
  --slider-accent: #0ea5e9;

  /* Aurora adjustments for creamy mode */
  --aurora-green: #2dd4bf;
  --aurora-cyan: #0ea5e9;
  --aurora-blue: #0284c7;
  --aurora-purple: #7c3aed;
}

/* ============================================================================
   HERO SECTION - BASE LAYOUT (Enhanced)
   ============================================================================ */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg-body);
}

/* ============================================================================
   HERO TITLE - Animated Aurora Gradient with Background Clip
   ============================================================================ */
.hero-title {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-family: var(--big-font, "Poppins", sans-serif);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

.hero-title .highlight {
  background: linear-gradient(
    90deg,
    #8b5cf6 0%,
    var(--aurora-cyan) 25%,
    var(--color-primary) 50%,
    var(--aurora-purple) 75%,
    #8b5cf6 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  /* Use GPU acceleration */
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: auto;

  /* Slower animation */
  animation: auroraGradientFlow 6s linear infinite;
}

@keyframes auroraGradientFlow {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* Theme adjustments for title */
[data-theme="creamy"] .hero-title .highlight {
  background: linear-gradient(
    90deg,
    var(--aurora-teal) 0%,
    var(--aurora-cyan) 25%,
    var(--color-primary) 50%,
    var(--aurora-purple) 75%,
    var(--aurora-teal) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: auroraGradientFlow 4s linear infinite;
}

/* ============================================================================
   HERO CONTENT - Position above aurora
   ============================================================================ */
.hero-content-wrapper {
  position: relative;
  z-index: 20;
}

/* ============================================================================
   HERO KANBAN - Enhanced Animation States
   ============================================================================ */
.hero-visual-kanban {
  position: absolute;
  right: -80px;
  top: 48%;
  transform: translateY(-50%);
  width: 65%;
  max-width: 800px;
  min-height: 500px;
  display: flex;
  align-items: center;
  z-index: 15;
}

.hero-kanban-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 1.5rem 0 0 1.5rem;
  box-shadow:
    0 50px 100px -20px rgba(50, 50, 93, 0.25),
    0 30px 60px -30px rgba(0, 0, 0, 0.3);
  overflow: hidden;

  /* Initial state - off screen right */
  opacity: 0;
  transform: translateX(100%);
  transition:
    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.6s ease;
}

/* Animation States */
.hero-kanban-wrapper.entering {
  transform: translateX(15%);
  opacity: 1;
}

.hero-kanban-wrapper.expanded {
  transform: translateX(0%);
  opacity: 1;
}

/* Loading Line Indicator */
.kanban-loading-line {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  overflow: hidden;
  opacity: 0;
  z-index: 100;
  transition: opacity 0.3s ease;
}

.kanban-loading-line.active {
  opacity: 1;
}

.loading-line-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--aurora-cyan), var(--aurora-green));
  border-radius: 3px;
}

.kanban-loading-line.active .loading-line-progress {
  animation: loadingProgress 1s ease-out forwards;
}

@keyframes loadingProgress {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

/* Blur overlay edges - using theme colors */
.hero-kanban-blur {
  position: absolute;
  z-index: 10;
  pointer-events: none;
}

.hero-kanban-blur-left {
  left: 0;
  top: 0;
  bottom: 0;
  width: 80px;
  background: linear-gradient(
    to right,
    var(--bg-body) 0%,
    color-mix(in srgb, var(--bg-body) 80%, transparent) 30%,
    color-mix(in srgb, var(--bg-body) 40%, transparent) 60%,
    transparent 100%
  );
}

.hero-kanban-blur-top {
  left: 0;
  right: 0;
  top: 0;
  height: 60px;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--bg-body) 90%, transparent) 0%,
    color-mix(in srgb, var(--bg-body) 50%, transparent) 40%,
    transparent 100%
  );
}

.hero-kanban-blur-bottom {
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--bg-body) 95%, transparent) 0%,
    color-mix(in srgb, var(--bg-body) 60%, transparent) 40%,
    transparent 100%
  );
}

/* Kanban Board */
.hero-kanban-board {
  display: flex;
  gap: 1rem;
  padding: 3rem 2rem 3rem 60px;
  min-height: 480px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--bg-surface) 60%, transparent) 0%,
    color-mix(in srgb, var(--bg-surface) 30%, transparent) 100%
  );
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
  border-right: none;
  border-radius: 1.5rem 0 0 1.5rem;
  box-shadow:
    -20px 0 60px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .hero-kanban-board {
  background: linear-gradient(
    135deg,
    rgba(30, 41, 59, 0.7) 0%,
    rgba(30, 41, 59, 0.4) 100%
  );
  border-color: rgba(71, 85, 105, 0.4);
  box-shadow:
    -20px 0 60px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Kanban Columns */
.hero-kanban-column {
  flex: 0 0 240px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  max-height: 500px;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  transform: translateX(50px) scale(0.9);
}

.hero-kanban-column.visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.hero-kanban-column:hover {
  box-shadow: var(--shadow-lg);
}

.hero-column-header {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-surface-secondary);
  border-radius: 12px 12px 0 0;
}

.hero-column-title {
  font-weight: 600;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-primary);
}

.hero-column-title i {
  font-size: 0.75rem;
}

.hero-column-count {
  background: var(--bg-body);
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 22px;
  text-align: center;
}

/* Column color coding */
.hero-kanban-column.column-in-progress .hero-column-header {
  border-bottom: 3px solid var(--aurora-purple);
}

.hero-kanban-column.column-review .hero-column-header {
  border-bottom: 3px solid var(--color-warning);
}

.hero-kanban-column.column-done .hero-column-header {
  border-bottom: 3px solid var(--color-success);
}

/* Task List */
.hero-task-list {
  flex: 1;
  overflow: hidden;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.hero-task-list::-webkit-scrollbar {
  width: 4px;
}

.hero-task-list::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 2px;
}

/* Task Cards */
.hero-task-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.75rem;
  position: relative;
  transition: all 0.3s ease;
  cursor: default;
  transform-origin: center;

  /* Initial hidden state for animation */
  opacity: 0;
  transform: translateY(-20px) scale(0.9);
}

.hero-task-card.visible {
  animation: cardSpread 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.hero-task-card.spreading {
  animation: cardSpread 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes cardSpread {
  0% {
    opacity: 0;
    transform: translateY(-30px) scale(0.85);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.hero-task-card.migrating {
  position: fixed !important;
  z-index: 1000 !important;
  box-shadow:
    rgba(0, 0, 0, 0.1) 0px 34px 69px -57px,
    rgba(50, 50, 93, 0.25) 0px 34px 69px -11px;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Migrating placeholder - shows where card was picked from */
.hero-task-card.migrating-placeholder {
  background: transparent !important;
  border: 2px dashed var(--border-color) !important;
  box-shadow: none !important;
  position: relative;
}

.hero-task-card.migrating-placeholder::before {
  display: none !important;
}

.hero-task-card.migrating-placeholder * {
  opacity: 0 !important;
}

.hero-task-card:hover {
  border-color: var(--color-primary-light);
  box-shadow: var(--shadow-sm);
}

/* Priority indicator */
.hero-task-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 0px;
  border-radius: 0 2px 2px 0;
}

.hero-task-card.priority-low::before {
  background: var(--color-success);
}

.hero-task-card.priority-medium::before {
  background: var(--color-warning);
}

.hero-task-card.priority-high::before {
  background: var(--color-error);
}

.hero-task-card.completed {
  background: var(--bg-surface-secondary);
}

.hero-task-card.completed::before {
  background: var(--color-success);
}

/* Milestone badge */
.hero-task-card.milestone {
  background: linear-gradient(
    135deg,
    var(--bg-card) 0%,
    color-mix(in srgb, var(--color-primary) 5%, var(--bg-card)) 100%
  );
  border-color: color-mix(
    in srgb,
    var(--color-primary) 30%,
    var(--border-color)
  );
}

.hero-milestone-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 0.55rem;
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

/* Task type icon */
.hero-task-type {
  margin-bottom: 0.35rem;
}

.hero-task-type i {
  font-size: 0.7rem;
  color: var(--text-muted) !important;
}

.hero-task-type .type-feature {
  color: var(--color-info);
}
.hero-task-type .type-bug {
  color: var(--color-error);
}
.hero-task-type .type-design {
  color: var(--aurora-pink);
}
.hero-task-type .type-documentation {
  color: var(--text-muted);
}
.hero-task-type .type-done {
  color: var(--color-success);
}

/* Task title */
.hero-task-title {
  display: block;
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--text-primary);
  line-height: 1.3;
  margin-bottom: 0.25rem;
}

/* Task description */
.hero-task-desc {
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0 0 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Task meta */
.hero-task-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.65rem;
  color: var(--text-muted);
}

.hero-task-due,
.hero-task-comments,
.hero-task-done {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.hero-task-due.soon {
  color: var(--text-muted);
}

.hero-task-done {
  color: var(--color-success);
  font-weight: 500;
}

.hero-task-assignee {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--aurora-purple)
  );
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  font-weight: 600;
}

.hero-task-assignee {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--bg-card, #fff);
}

.hero-task-assignee img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlapping avatars group */
.hero-task-assignees {
  display: flex;
  flex-direction: row-reverse;
}

.hero-task-assignees .hero-task-assignee {
  margin-left: -8px;
}

.hero-task-assignees .hero-task-assignee:last-child {
  margin-left: 0;
}

/* ============================================================================
   FLOATING PROGRESS INDICATOR - With Animated Ring
   ============================================================================ */
.hero-floating-indicator {
  position: absolute;
  background: var(--bg-card);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  opacity: 0;
  display: flex;
  align-items: center;
  transform: translateY(20px);
  border: 1px solid var(--border-color);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
  box-shadow: var(--shadow-lg);
  gap: 0.75rem;
  z-index: 20;
}

.hero-floating-indicator.visible {
  opacity: 1;
  transform: translateY(0);
  animation: heroFloatSmooth 4s ease-in-out infinite;
}

.hero-floating-progress {
  bottom: 10%;
  left: 40px;
}

@keyframes heroFloatSmooth {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.hero-progress-ring {
  position: relative;
  width: 40px;
  height: 40px;
}

.hero-progress-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.hero-progress-bg {
  fill: none;
  stroke: var(--border-color);
  stroke-width: 3;
}

.hero-progress-fill {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 0 100;
  transition: stroke-dasharray 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-progress-fill.animate {
  stroke-dasharray: 75 100;
}

[data-theme="creamy"] .hero-progress-fill {
  stroke: #0ea5e9;
}

.hero-progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-primary);
}

.hero-progress-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.card-draft-create {
  width: 280px;
  height: 290px;
}

/* Preview Card Header */
.preview-card-header {
  padding: 12px 16px;
  background: var(--bg-surface-secondary);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.preview-steps-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.preview-step {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  transition: all 0.3s ease;
}

.preview-step.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.preview-step.completed {
  background: var(--color-success);
  border-color: var(--color-success);
  color: white;
}

.preview-step-line {
  flex: 1;
  height: 2px;
  background: var(--border-color);
  max-width: 20px;
}

.preview-step-line.completed {
  background: var(--color-success);
}

.preview-step-label {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-secondary);
}

/* Preview Card Body */
.preview-card-body {
  padding: 16px;
  flex: 1;
  overflow: hidden;
}

#featuresCardBody.preview-card-body {
  padding: 16px 0;
}

/* Preview Card Footer - Title & Description */
.preview-card-footer {
  padding: 12px 16px;
  background: var(--bg-surface-secondary);
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
}

.preview-card-title {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.preview-card-description {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition:
    opacity 0.4s ease,
    max-height 0.4s ease;
}

.preview-card-description.visible {
  opacity: 1;
  max-height: 100px;
}

/* Form group preview */
.preview-form-group {
  margin-bottom: 12px;
}

.preview-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.preview-input {
  display: flex;
  align-items: center;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 12px;
  min-height: 36px;
}

.preview-input-text {
  font-size: 12px;
  color: var(--text-primary);
}

.preview-cursor {
  width: 1px;
  height: 16px;
  background: var(--color-gray-700);
  margin-left: 2px;
  animation: cursorBlink 1s step-end infinite;
}

@keyframes cursorBlink {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}

/* Project type grid */
.preview-type-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.preview-type-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px;
  background: var(--bg-surface-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.preview-type-option i {
  font-size: 16px;
  color: var(--text-muted);
}

.preview-type-option span {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary);
}

.preview-type-option.selected {
  /* More prominent background */
  background: linear-gradient(
    135deg,
    rgba(67, 121, 255, 0.12) 0%,
    rgba(67, 121, 255, 0.08) 100%
  );

  /* Subtle border for definition */
  box-shadow:
    inset 0 0 0 1px rgba(67, 121, 255, 0.15),
    0 2px 8px rgba(67, 121, 255, 0.08);
  border-color: transparent;
}

.preview-type-option.selected i,
.preview-type-option.selected span {
  color: var(--color-primary);
}

/* Features Scroll Animation - JavaScript controlled */
.preview-features-scroll {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  overflow: hidden;
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
}

.preview-features-row {
  display: flex;
  gap: 8px;
  white-space: nowrap;
}

.preview-feature-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-surface-secondary);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
  flex-shrink: 0;
}

.preview-feature-chip i {
  font-size: 10px;
  color: var(--text-muted);
}

.preview-feature-chip.selected {
  background: var(--bg-selected);
  color: var(--color-primary);
}

.preview-feature-chip.selected i {
  color: var(--color-primary);
}

.preview-feature-chip.selected {
  background: var(--bg-card);
}

/* ============================================================================
   SERVICES SECTION - Card Slots & Extra Cards Animation
   ============================================================================ */

.services-section {
  position: relative;
  z-index: 10;
  padding: 8rem 0;
  background: linear-gradient(
    150deg,
    var(--stripe-gradient-1) 15%,
    var(--stripe-gradient-2) 70%,
    var(--stripe-gradient-3) 94%
  );
  clip-path: polygon(0 8%, 100% 0, 100% 92%, 0 100%);
  margin-top: -5%;
  margin-bottom: -5%;
}

.services-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-body);
  opacity: 0.95;
}

[data-theme="dark"] .services-section::before {
  opacity: 0.92;
}

.services-section .container {
  position: relative;
  z-index: 1;
}

/* Show/hide appropriate SVG for breakpoint */
.services-clip-border-large-desktop,
.services-clip-border-tablet,
.services-clip-border-mobile {
  display: none;
}

.fa-apple {
  font-size: 1.5rem;
}

/* ============================================================================
   RESPONSIVE - Less slanted on smaller screens
   ============================================================================ */

/* Large Desktop (1200px - 1399px) */
@media (max-width: 1399px) and (min-width: 1200px) {
  .services-section {
    clip-path: polygon(0 6%, 100% 0, 100% 94%, 0 100%);
    padding: 7rem 0;
    margin-top: -4.5%;
    margin-bottom: -4.5%;
  }

  .services-clip-border-desktop {
    display: none;
  }

  .services-clip-border-large-desktop {
    display: block;
  }
}

/* Tablet (992px - 1199px) */
@media (max-width: 1199px) {
  .services-section {
    clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%);
    padding: 6rem 0;
    margin-top: -4%;
    margin-bottom: -4%;
  }

  .services-clip-border-desktop,
  .services-clip-border-large-desktop {
    display: none;
  }

  .services-clip-border-tablet {
    display: block;
  }
}

/* Small Tablet / Large Mobile (768px - 991px) */
@media (max-width: 991px) {
  .services-section {
    clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%);
    padding: 5.5rem 0;
    margin-top: -3.5%;
    margin-bottom: -3.5%;
  }
}

/* Mobile (576px - 767px) */
@media (max-width: 767px) {
  .services-section {
    clip-path: polygon(0 3%, 100% 0, 100% 97%, 0 100%);
    padding: 5rem 0;
    margin-top: -3%;
    margin-bottom: -3%;
  }

  .services-clip-border-tablet {
    display: none;
  }

  .services-clip-border-mobile {
    display: block;
  }
}

/* Small Mobile (< 576px) */
@media (max-width: 575px) {
  .services-section {
    clip-path: polygon(0 2%, 100% 0, 100% 98%, 0 100%);
    padding: 4rem 0;
    margin-top: -2%;
    margin-bottom: -2%;
  }
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  gap: 1rem;
}

.service-card-slot {
  position: relative;
  min-height: 380px;
  border-radius: 20px;
  overflow: visible;
}

/* Service cards 3 & 4 - Slide in from left */
.service-card-quality,
.service-card-cta {
  opacity: 0;
  transform: translateX(-100px);
  transition:
    opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card-quality.appear-from-left,
.service-card-cta.appear-from-left {
  opacity: 0;
  transform: translateX(-100px);
}

.service-card-quality.visible,
.service-card-cta.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Quality card styling */
.service-card-quality {
  padding: 2rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 1.25rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.quality-checkmark {
  margin-bottom: 1.5rem;
}

.checkmark-circle {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--service-color, #10b981),
    color-mix(in srgb, var(--service-color, #10b981) 70%, #047857)
  );
  color: white;
  font-size: 1.5rem;
}

.service-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

.service-card-description {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.quality-points {
  list-style: none;
  padding: 0;
  margin: 0;
}

.quality-points li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.quality-points li i {
  color: var(--color-success);
  font-size: 1.25rem;
}

/* CTA Card - Founders Program */
.service-card-cta {
  padding: 2rem;
  background: linear-gradient(45deg, #2196f3 0%, var(--color-primary) 100%);
  border-radius: 1.25rem;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Limited Offer Badge */
.cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
  color: white;
  margin-bottom: 1rem;
  backdrop-filter: blur(4px);
}

.cta-badge i {
  font-size: 0.7rem;
  animation: pulse 2s ease-in-out infinite;
}

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

.cta-icon-wrapper {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  margin-bottom: 1.25rem;
  font-size: 1.5rem;
}

.cta-card-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.625rem;
  color: white;
}

.cta-card-description {
  font-size: 0.9375rem;
  opacity: 0.9;
  margin-bottom: 1rem;
  line-height: 1.6;
  max-width: 280px;
}

/* Feature checkmarks */
.cta-features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.cta-feature {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.cta-feature i {
  font-size: 0.625rem;
  color: #a5f3fc;
}

.cta-card-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  background: var(--color-white) !important;
  color: #6366f1 !important;
  font-weight: 600;
  border-radius: 0.75rem;
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
}

.cta-card-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  background: #f8fafc;
}

.cta-card-button i {
  transition: transform 0.3s ease;
}

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

/* Creamy theme adjustments */
[data-theme="creamy"] .service-card-cta {
  background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 50%, #14b8a6 100%);
}

[data-theme="creamy"] .cta-card-button {
  color: #0ea5e9 !important;
}

[data-theme="creamy"] .cta-feature i {
  color: #5eead4;
}

/* ============================================================================
   RESPONSIVE - Hero Kanban & Cards
   ============================================================================ */
@media (max-width: 1399.98px) {
  .hero-visual-kanban {
    width: 55%;
    right: -60px;
  }

  .hero-kanban-board {
    padding-left: 80px;
  }

  .hero-kanban-column {
    flex: 0 0 220px;
  }

  .hero-cards-container {
    right: 5%;
  }
}

@media (max-width: 1199.98px) {
  .hero-visual-kanban {
    width: 50%;
    right: -40px;
  }

  .hero-kanban-board {
    padding-left: 60px;
    gap: 0.75rem;
  }

  .hero-kanban-column {
    flex: 0 0 200px;
  }

  .hero-floating-progress {
    left: 20px;
    bottom: 10%;
  }

  .card-draft-create {
    width: 230px;
    height: 180px;
  }
}

@media (max-width: 991.98px) {
  .hero-visual-kanban,
  .hero-cards-container,
  .aurora-bg {
    display: none;
  }

  .hero-content-wrapper {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: 2rem 1.5rem;
  }
}

/* ============================================================================
   REDUCED MOTION SUPPORT
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-title .highlight,
  .preview-features-row,
  .preview-cursor,
  .hero-floating-indicator.visible,
  .hero-progress-fill {
    animation: none !important;
    transition: none !important;
  }

  .hero-progress-fill {
    stroke-dasharray: 75 100;
  }
}

.demo-replay-btn {
  color: var(--text-secondary) !important;
}

@media (min-width: 992px) and (max-width: 1399px) {
  .services-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: minmax(440px, auto) auto !important;
    gap: 1rem !important;
  }

  .service-card.service-card-cta:last-child {
    grid-column: span 3 !important;
    margin-top: 1rem;
  }

  .service-card.service-card-cta:last-child .cta-card-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 2rem !important;
    padding: 1.5rem 2rem !important;
    text-align: left !important;
  }

  /* Hide or shrink the icon in landscape */
  .service-card.service-card-cta:last-child .cta-icon-wrapper {
    display: none !important;
  }

  /* Badge - position inline */
  .service-card.service-card-cta:last-child .cta-badge {
    position: static !important;
    flex-shrink: 0;
  }

  /* Text content group */
  .service-card.service-card-cta:last-child .cta-card-title {
    font-size: 1.25rem !important;
    margin: 0 0 0.25rem 0 !important;
  }

  .service-card.service-card-cta:last-child .cta-card-description {
    font-size: 0.875rem !important;
    margin: 0 !important;
    max-width: 400px;
  }

  /* Features inline */
  .service-card.service-card-cta:last-child .cta-features {
    display: flex !important;
    gap: 1rem !important;
    margin: 0 !important;
    flex-shrink: 0;
  }

  .service-card.service-card-cta:last-child .cta-feature {
    font-size: 0.8125rem !important;
  }

  .service-card.service-card-cta:last-child .cta-card-button {
    grid-column: 4;
    flex-shrink: 0;
    grid-row: span 2;
    margin: 0 !important;
    padding: 0.75rem 1.25rem !important;
    white-space: nowrap;
  }
}

/* ============================================================================
   MOBILE FIXES - Overflow, Heights, and Display
   ============================================================================ */

/* Prevent horizontal overflow globally on mobile */
@media (max-width: 991px) {
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Hide ALL hero visual elements on mobile */
  .hero-visual-kanban,
  .hero-kanban-wrapper,
  .hero-kanban-board,
  .hero-kanban-column,
  .hero-floating-indicator,
  .hero-floating-progress,
  .hero-cards-container,
  .hero-kanban-blur,
  .hero-kanban-blur-left,
  .hero-kanban-blur-top,
  .hero-kanban-blur-bottom {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* Hero section adjustments */
  .hero-section {
    overflow: hidden !important;
    max-width: 100vw !important;
  }

  /* Services section - prevent overflow */
  .services-section {
    overflow: hidden !important;
    max-width: 100vw !important;
  }

  .services-section .container {
    overflow: hidden !important;
    max-width: 100% !important;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Services grid - single column on mobile */
  .services-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    width: 90% !important;
    max-width: 90% !important;
    overflow: hidden !important;
    margin: auto !important;
  }

  /* Mobile service cards - proper height and styling */
  .mobile-service-card {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 80% !important;
    max-width: 80% !important;
    height: auto !important;
    min-height: 340px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    opacity: 0;
    transform: translateX(-50px);
    transition:
      opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-md) !important;
  }

  .mobile-service-card.visible {
    opacity: 1 !important;
    transform: translateX(0) !important;
    border-radius: 20px !important;
  }

  /* Mobile card internal structure */
  .mobile-service-card .preview-card-header {
    flex-shrink: 0;
    padding: 14px 16px;
    background: var(--bg-surface-secondary);
    border-bottom: 1px solid var(--border-color);
  }

  .mobile-service-card .preview-card-body {
    flex: 1;
    padding: 16px;
    overflow: hidden;
    min-height: 140px;
  }

  .mobile-service-card .preview-card-footer {
    flex-shrink: 0;
    padding: 14px 16px;
    background: var(--bg-surface-secondary);
    border-top: 1px solid var(--border-color);
  }

  /* Ensure description is visible */
  .mobile-service-card .preview-card-description {
    opacity: 1 !important;
    max-height: 100px !important;
    overflow: visible !important;
  }

  /* Features scroll container */
  .mobile-service-card .preview-features-scroll {
    height: 130px;
    overflow: hidden;
  }

  .mobile-service-card .preview-features-row {
    display: flex;
    gap: 8px;
  }

  .mobile-service-card .preview-feature-chip {
    flex-shrink: 0;
    padding: 5px 10px;
    font-size: 10px;
  }

  /* Form elements in draft card */
  .mobile-service-card .preview-form-group {
    margin-bottom: 10px;
  }

  .mobile-service-card .preview-input {
    padding: 8px 10px;
  }

  .mobile-service-card .preview-type-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .mobile-service-card .preview-type-option {
    padding: 8px 6px;
  }

  /* Service cards 3 & 4 mobile styling */
  .service-card-quality,
  .service-card-cta {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 280px !important;
    overflow: hidden !important;
  }

  .service-card-quality,
  .service-card-cta {
    opacity: 1 !important;
    transform: translateX(0) !important;
    transition:
      opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  /* Quality card adjustments */
  .service-card-quality {
    padding: 1.5rem;
  }

  .service-card-quality .quality-checkmark {
    margin-bottom: 1rem;
  }

  .service-card-quality .checkmark-circle {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
  }

  .service-card-quality .service-card-title {
    font-size: 1.125rem;
  }

  .service-card-quality .service-card-description {
    font-size: 0.875rem;
    margin-bottom: 1rem;
  }

  .service-card-quality .quality-points li {
    font-size: 0.8125rem;
    margin-bottom: 0.375rem;
  }

  /* CTA card adjustments */
  .service-card-cta {
    padding: 1.75rem 1.25rem;
  }

  .service-card-cta .cta-badge {
    padding: 0.25rem 0.625rem;
    font-size: 0.6875rem;
    margin-bottom: 0.75rem;
  }

  .service-card-cta .cta-icon-wrapper {
    width: 52px;
    height: 52px;
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }

  .service-card-cta .cta-card-title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
  }

  .service-card-cta .cta-card-description {
    font-size: 0.8125rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
    max-width: 100%;
    padding: 0 0.5rem;
  }

  .service-card-cta .cta-features {
    gap: 0.5rem;
    margin-bottom: 1rem;
  }

  .service-card-cta .cta-feature {
    font-size: 0.75rem;
  }

  .service-card-cta .cta-card-button {
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
  }
}

/* Tablet - 2 column grid */
@media (min-width: 768px) and (max-width: 991px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  .mobile-service-card {
    min-height: 360px !important;
  }

  .service-card-quality,
  .service-card-cta {
    min-height: 320px !important;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .mobile-service-card {
    min-height: 300px !important;
  }

  .mobile-service-card .preview-features-scroll {
    height: 110px;
  }

  .mobile-service-card .preview-card-header,
  .mobile-service-card .preview-card-footer {
    padding: 10px 12px;
  }

  .mobile-service-card .preview-card-body {
    padding: 14px;
  }

  .mobile-service-card .preview-card-title {
    font-size: 14px;
  }

  .mobile-service-card .preview-card-description {
    font-size: 14px;
  }

  .mobile-service-card .preview-step {
    width: 20px;
    height: 20px;
    font-size: 14px;
  }

  .mobile-service-card .preview-step-label {
    font-size: 14px;
  }

  .service-card-quality,
  .service-card-cta {
    min-height: 260px !important;
  }

  .service-card-cta .cta-card-title {
    font-size: 1.125rem;
  }

  .service-card-cta .cta-card-description {
    font-size: 0.75rem;
  }
}

/* ============================================================================
   FIX: Ensure sections after services render properly on mobile
   ============================================================================ */
@media (max-width: 991px) {
  /* Process section */
  .process-section {
    position: relative;
    z-index: 1;
    overflow: hidden !important;
    max-width: 100vw !important;
  }

  /* FAQ section */
  .faq-section {
    position: relative;
    z-index: 1;
    overflow: hidden !important;
    max-width: 100vw !important;
  }

  /* CTA section */
  .cta-section {
    position: relative;
    z-index: 1;
    overflow: hidden !important;
    max-width: 100vw !important;
  }

  /* Footer */
  footer {
    position: relative;
    z-index: 1;
    overflow: hidden !important;
    max-width: 100vw !important;
  }
}

/* ============================================================================
   TECHNOLOGIES SECTION - REDESIGNED WITH ANIMATIONS
   ============================================================================ */
.tech-section {
  padding: 4rem 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.tech-section .section-header {
  margin-bottom: 2.5rem;
}

.tech-section .section-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}

.tech-section .section-description {
  max-width: 600px;
  margin: 0 auto;
  font-size: 1rem;
}

/* Tech Grid - 5 columns on desktop */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  max-width: 1400px;
  margin: 0 auto;
}

/* Tech Card */
.tech-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1rem;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  contain: layout style;
}

.tech-card.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered animation delays */
.tech-card:nth-child(1) {
  transition-delay: 0.05s;
}
.tech-card:nth-child(2) {
  transition-delay: 0.1s;
}
.tech-card:nth-child(3) {
  transition-delay: 0.15s;
}
.tech-card:nth-child(4) {
  transition-delay: 0.2s;
}
.tech-card:nth-child(5) {
  transition-delay: 0.25s;
}
.tech-card:nth-child(6) {
  transition-delay: 0.3s;
}
.tech-card:nth-child(7) {
  transition-delay: 0.35s;
}
.tech-card:nth-child(8) {
  transition-delay: 0.4s;
}
.tech-card:nth-child(9) {
  transition-delay: 0.45s;
}
.tech-card:nth-child(10) {
  transition-delay: 0.5s;
}

.tech-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
  border-color: var(--color-primary-light);
}

[data-theme="dark"] .tech-card:hover {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

/* Card Header */
.tech-card-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--border-color);
}

.tech-card-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-primary-dark)
  );
  color: white;
  font-size: 0.875rem;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.tech-card:hover .tech-card-icon {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 4px 12px rgba(67, 121, 255, 0.3);
}

[data-theme="creamy"] .tech-card-icon {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
}

[data-theme="creamy"] .tech-card:hover .tech-card-icon {
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.tech-card-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: 0.01em;
}

/* Tech Items Grid */
.tech-card-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.tech-card .tech-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 1rem 0.375rem;
  border-radius: 8px;
  background: var(--bg-surface-secondary);
  transition: all 0.25s ease;
  flex: 0 0 calc(33.333% - 0.25rem);
  min-width: 0;
}

.tech-card .tech-item:hover {
  background: var(--bg-selected);
  transform: translateY(-2px);
}

.tech-card .tech-item i,
.tech-card .tech-item img {
  font-size: 1.125rem;
  transition:
    transform 0.3s ease,
    color 0.3s ease;
}

.tech-card .tech-item:hover i,
.tech-card .tech-item:hover img {
  transform: scale(1.15);
}

.tech-card .tech-item span {
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Brand Colors for Icons */
.tech-card .tech-item i.fa-html5 {
  color: #e34f26;
}
.tech-card .tech-item i.fa-css3-alt {
  color: #1572b6;
}
.tech-card .tech-item i.fa-js {
  color: #f7df1e;
}
.tech-card .tech-item i.fa-sass {
  color: #cc6699;
}
.tech-card .tech-item i.fa-python {
  color: #3776ab;
}
.tech-card .tech-item i.fa-php {
  color: #777bb4;
}
.tech-card .tech-item i.fa-node-js {
  color: #339933;
}
.tech-card .tech-item i.fa-java {
  color: #007396;
}
.tech-card .tech-item i.fa-react {
  color: #61dafb;
}
.tech-card .tech-item i.fa-vuejs {
  color: #4fc08d;
}
.tech-card .tech-item i.fa-angular {
  color: #dd0031;
}
.tech-card .tech-item i.fa-laravel {
  color: #ff2d20;
}
.tech-card .tech-item i.fa-bootstrap {
  color: #7952b3;
}
.tech-card .tech-item i.fa-docker {
  color: #2496ed;
}
.tech-card .tech-item i.fa-git-alt {
  color: #f05032;
}
.tech-card .tech-item i.fa-github {
  color: var(--text-primary);
}
.tech-card .tech-item i.fa-aws {
  color: #ff9900;
}
.tech-card .tech-item i.fa-linux {
  color: #fcc624;
}
.tech-card .tech-item i.fa-ubuntu {
  color: #e95420;
}
.tech-card .tech-item i.fa-swift {
  color: #fa7343;
}
.tech-card .tech-item i.fa-android {
  color: #3ddc84;
}
.tech-card .tech-item i.fa-figma {
  color: #f24e1e;
}
.tech-card .tech-item i.fa-sketch {
  color: #f7b500;
}
.tech-card .tech-item i.fa-npm {
  color: #cb3837;
}

/* Generic icon colors - theme aware */
.tech-card .tech-item i.fa-code,
.tech-card .tech-item i.fa-server,
.tech-card .tech-item i.fa-database,
.tech-card .tech-item i.fa-cubes,
.tech-card .tech-item i.fa-layer-group,
.tech-card .tech-item i.fa-mobile-alt,
.tech-card .tech-item i.fa-dharmachakra,
.tech-card .tech-item i.fa-feather-alt,
.tech-card .tech-item i.fa-atom,
.tech-card .tech-item i.fa-project-diagram,
.tech-card .tech-item i.fa-music,
.tech-card .tech-item i.fa-pen-nib,
.tech-card .tech-item i.fa-image,
.tech-card .tech-item i.fa-bezier-curve,
.tech-card .tech-item i.fa-robot,
.tech-card .tech-item i.fa-comments,
.tech-card .tech-item i.fa-smile {
  color: var(--color-primary);
}

[data-theme="creamy"] .tech-card .tech-item i.fa-code,
[data-theme="creamy"] .tech-card .tech-item i.fa-server,
[data-theme="creamy"] .tech-card .tech-item i.fa-database,
[data-theme="creamy"] .tech-card .tech-item i.fa-cubes,
[data-theme="creamy"] .tech-card .tech-item i.fa-layer-group,
[data-theme="creamy"] .tech-card .tech-item i.fa-mobile-alt,
[data-theme="creamy"] .tech-card .tech-item i.fa-dharmachakra,
[data-theme="creamy"] .tech-card .tech-item i.fa-feather-alt,
[data-theme="creamy"] .tech-card .tech-item i.fa-atom,
[data-theme="creamy"] .tech-card .tech-item i.fa-project-diagram,
[data-theme="creamy"] .tech-card .tech-item i.fa-music,
[data-theme="creamy"] .tech-card .tech-item i.fa-pen-nib,
[data-theme="creamy"] .tech-card .tech-item i.fa-image,
[data-theme="creamy"] .tech-card .tech-item i.fa-bezier-curve,
[data-theme="creamy"] .tech-card .tech-item i.fa-robot,
[data-theme="creamy"] .tech-card .tech-item i.fa-comments,
[data-theme="creamy"] .tech-card .tech-item i.fa-smile {
  color: #0ea5e9;
}

/* Special colors */
.tech-card .tech-item i.fa-flask {
  color: #000000;
}
[data-theme="dark"] .tech-card .tech-item i.fa-flask {
  color: #ffffff;
}

.tech-card .tech-item i.fa-leaf {
  color: #6db33f;
} /* Spring / MongoDB green */
.tech-card .tech-item i.fa-bolt {
  color: #dc382d;
} /* Redis */
.tech-card .tech-item i.fa-feather {
  color: #003b57;
} /* SQLite */
[data-theme="dark"] .tech-card .tech-item i.fa-feather {
  color: #7dd3fc;
}

.tech-card .tech-item i.fa-elephant {
  color: #336791;
} /* PostgreSQL */
.tech-card .tech-item i.fa-wind {
  color: #06b6d4;
} /* Tailwind */
.tech-card .tech-item i.fa-dollar-sign {
  color: #0769ad;
} /* jQuery */
.tech-card .tech-item i.fa-arrow-right {
  color: var(--text-primary);
} /* Next.js */
.tech-card .tech-item i.fa-brain {
  color: #ff6f00;
} /* TensorFlow */
.tech-card .tech-item i.fa-fire {
  color: #ee4c2c;
} /* PyTorch */

/* Dark theme adjustments for JS yellow */
[data-theme="dark"] .tech-card .tech-item i.fa-js {
  color: #f7df1e;
  text-shadow: 0 0 8px rgba(247, 223, 30, 0.3);
}

[data-theme="dark"] .tech-card .tech-item i.fa-linux {
  color: #fcc624;
  text-shadow: 0 0 8px rgba(252, 198, 36, 0.3);
}

/* Responsive - 4 columns on large tablets */
@media (max-width: 1199.98px) {
  .tech-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.875rem;
  }

  .tech-section {
    min-height: auto;
    padding: 4rem 0;
  }
}

/* 3 columns on tablets */
@media (max-width: 991.98px) {
  .tech-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
  }

  .tech-card {
    padding: 0.875rem;
  }
}

/* 2 columns on small tablets and large phones */
@media (max-width: 767.98px) {
  .tech-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
  }

  .tech-section {
    padding: 3rem 0;
  }

  .tech-section .section-header {
    margin-bottom: 2rem;
  }

  .tech-card {
    padding: 0.75rem;
  }

  .tech-card-icon {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
  }

  .tech-card-title {
    font-size: 0.75rem;
  }

  .tech-card .tech-item {
    padding: 0.375rem 0.25rem;
  }

  .tech-card .tech-item i {
    font-size: 1rem;
  }

  .tech-card .tech-item span {
    font-size: 0.5625rem;
  }
}

/* Single column on very small phones */
@media (max-width: 479.98px) {
  .tech-grid {
    grid-template-columns: 1fr 1fr;
  }

  .tech-card .tech-item {
    flex: 0 0 calc(50% - 0.1875rem);
  }

  #cookieBanner {
    display: none !important;
  }
}

@media (max-width: 340px) {
  .services-grid {
    width: 95% !important;
    max-width: 95% !important;
  }
}

/* Pulse animation for card icons on load */
@keyframes techIconPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.tech-card.visible .tech-card-icon {
  animation: techIconPulse 2s ease-in-out 0.5s;
}

/* Subtle float animation for hovered items */
@keyframes techItemFloat {
  0%,
  100% {
    transform: translateY(-2px);
  }
  50% {
    transform: translateY(-4px);
  }
}

.tech-card .tech-item:hover {
  animation: techItemFloat 1s ease-in-out infinite;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .tech-card,
  .tech-card-icon,
  .tech-card .tech-item,
  .tech-card .tech-item i {
    transition: none !important;
    animation: none !important;
  }

  .tech-card {
    opacity: 1;
    transform: none;
  }
}

/* Tech Card - Initial hidden state */
.tech-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1rem;
  position: relative;
  overflow: hidden;

  /* IMPORTANT: Hidden by default - JS will trigger visibility */
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

/* Visible state - added by JavaScript */
.tech-card.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered animation delays for smoother cascade effect */
.tech-card:nth-child(1) {
  transition-delay: 0s;
}
.tech-card:nth-child(2) {
  transition-delay: 0.05s;
}
.tech-card:nth-child(3) {
  transition-delay: 0.1s;
}
.tech-card:nth-child(4) {
  transition-delay: 0.15s;
}
.tech-card:nth-child(5) {
  transition-delay: 0.2s;
}
.tech-card:nth-child(6) {
  transition-delay: 0.25s;
}
.tech-card:nth-child(7) {
  transition-delay: 0.3s;
}
.tech-card:nth-child(8) {
  transition-delay: 0.35s;
}
.tech-card:nth-child(9) {
  transition-delay: 0.4s;
}
.tech-card:nth-child(10) {
  transition-delay: 0.45s;
}

/* IMPORTANT: No-JS fallback - show cards if JavaScript is disabled */
.no-js .tech-card,
noscript ~ .tech-grid .tech-card {
  opacity: 1;
  transform: none;
}

/* Reduced motion - show immediately without animation */
@media (prefers-reduced-motion: reduce) {
  .tech-card {
    opacity: 1;
    transform: none;
    transition:
      box-shadow 0.3s ease,
      border-color 0.3s ease;
  }

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

@media (update: slow) {
  .hero-rays-bg::before,
  .hero-rays-bg::after,
  .preview-features-row,
  .cta-bg-picture::before {
    animation: none !important;
  }
}

.kanban-review-icon i {
  color: var(--text-muted);
}

.hero-kanban-column {
  box-shadow: none;
  border: none;
}

/* ============================================================================
   HERO STATS - ANIMATED COUNTER (Slot-machine style)
   ============================================================================ */

.stat-counter {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
  padding: 0;
  position: relative;
  display: flex;
  overflow: hidden;
  align-items: center;
  height: 1em;
}

.hero-stats {
  opacity: 0;
}

.hero-stats.visible {
  opacity: 1;
}

.stat-counter > span {
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateY(0);
  line-height: 1;
}

.stat-counter > span > span {
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Staggered delay for each digit */
.stat-counter > span:nth-child(1) {
  transition-delay: 0s;
}
.stat-counter > span:nth-child(2) {
  transition-delay: 0.15s;
}
.stat-counter > span:nth-child(3) {
  transition-delay: 0.3s;
}
.stat-counter > span:nth-child(4) {
  transition-delay: 0.45s;
}
.stat-counter > span:nth-child(5) {
  transition-delay: 0.6s;
}

/* Non-digit characters (like $ or .) should not animate */
.stat-counter > span.static-char {
  transition: none;
}

@media (max-width: 575.98px) {
  .stat-counter {
    font-size: 2rem;
  }
}

/* Board layout transition */
.hero-kanban-board {
  transition:
    justify-content 0.5s ease,
    padding 0.5s ease;
}

/* New card appearing in done column - slide in from above */
.hero-task-card.completed.newly-added {
  animation: slideInFromAbove 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes slideInFromAbove {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(0.9);
    max-height: 0;
  }
  50% {
    max-height: 200px;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    max-height: 200px;
  }
}

/* Ensure spreading animation is smooth */
@keyframes cardSpread {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.hero-task-card.spreading {
  animation: cardSpread 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Fix: completed cards in done column should not re-animate */
.hero-task-card.completed.visible {
  opacity: 0.7;
  transform: translateY(0) scale(1);
  animation: none;
}

.hero-task-list {
  display: flex;
  flex-direction: column;
  gap: 0 !important;
}

.hero-task-card {
  margin-bottom: 0.5rem;
}

.hero-task-card:last-child {
  margin-bottom: 0;
}

.padded-bottom {
  margin-bottom: 1rem !important;
}

.service-card-preview {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 1.25rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 380px;
  padding: 0;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.service-card-preview:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.service-card-preview .preview-card-header {
  padding: 14px 16px;
  background: var(--bg-surface-secondary);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.service-card-preview .preview-card-body {
  flex: 1;
  padding: 16px;
  overflow: hidden;
}

.service-card-preview #featuresCardBody {
  padding: 16px 0;
}

.service-card-preview .preview-card-footer {
  padding: 14px 16px;
  background: var(--bg-surface-secondary);
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
}

.service-card-preview .preview-card-description {
  opacity: 1;
  max-height: 100px;
}

.service-card-quality,
.service-card-cta {
  opacity: 0;
  transform: translateX(-60px);
  transition:
    opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card-quality.visible,
.service-card-cta.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Once visible, remove transition to prevent slide-out on scroll up */
.service-card-quality.animation-complete,
.service-card-cta.animation-complete {
  transition: none;
}

/* ============================================================================
   CSS VARIABLES FOR DEVICE SVG THEMING
   ============================================================================ */
:root {
  /* Device SVG Variables - Light Theme */
  --device-bg: #ffffff;
  --device-stroke: #e2e8f0;
  --screen-bg: #f8fafc;
  --content-primary: #1e293b;
  --content-secondary: #64748b;
  --accent-color: var(--color-primary, #4379ff);
  --accent-secondary: #8b5cf6;
}

[data-theme="dark"] {
  --device-bg: #1e293b;
  --device-stroke: #334155;
  --screen-bg: #0f172a;
  --content-primary: #f1f5f9;
  --content-secondary: #94a3b8;
}

[data-theme="creamy"] {
  --device-bg: #fdfbf7;
  --device-stroke: #e8e0d5;
  --screen-bg: #faf6f0;
  --content-primary: #3d3929;
  --content-secondary: #7a7265;
}

/* ============================================================================
   RAINBOW DIAGONAL BACKGROUND - ALTERNATING (Optimized)
   ============================================================================ */
.hero-rainbow-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* First Rainbow - Gold/Pink/Purple (Homepage) */
.hero-rainbow-bg::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  bottom: -50%;
  left: -25%;
  background: linear-gradient(
    45deg,
    transparent 0%,
    transparent 35%,
    rgba(250, 176, 0, 0.15) 40%,
    rgba(255, 89, 150, 0.15) 45%,
    rgba(99, 91, 255, 0.15) 50%,
    rgba(99, 91, 255, 0.15) 55%,
    rgba(255, 89, 150, 0.15) 60%,
    rgba(250, 176, 0, 0.15) 65%,
    transparent 70%,
    transparent 100%
  );
  background-size: 200% 200%;
  animation:
    rainbowDiagonalMove 8s ease-in-out infinite,
    rainbowFadeAlternate 16s ease-in-out infinite;
  transform-origin: bottom center;
}

/* Second Rainbow - Cyan/Blue/Purple (Pricing) */
.hero-rainbow-bg::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  bottom: -50%;
  left: -25%;
  background: linear-gradient(
    45deg,
    transparent 0%,
    transparent 35%,
    rgba(56, 189, 248, 0.15) 40%,
    rgba(67, 121, 255, 0.15) 45%,
    rgba(139, 92, 246, 0.15) 50%,
    rgba(139, 92, 246, 0.15) 55%,
    rgba(67, 121, 255, 0.15) 60%,
    rgba(56, 189, 248, 0.15) 65%,
    transparent 70%,
    transparent 100%
  );
  background-size: 200% 200%;
  animation:
    rainbowDiagonalMove 8s ease-in-out infinite,
    rainbowFadeAlternateReverse 16s ease-in-out infinite;
  transform-origin: bottom center;
}

/* Diagonal movement animation */
@keyframes rainbowDiagonalMove {
  0%,
  100% {
    background-position: 0% 100%;
  }
  50% {
    background-position: 100% 0%;
  }
}

/* Fade animation for first rainbow (visible first) */
@keyframes rainbowFadeAlternate {
  0%,
  45% {
    opacity: 1;
  }
  50%,
  95% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Fade animation for second rainbow (hidden first) */
@keyframes rainbowFadeAlternateReverse {
  0%,
  45% {
    opacity: 0;
  }
  50%,
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* ============================================================================
   DARK THEME
   ============================================================================ */
[data-theme="dark"] .hero-rainbow-bg::before {
  background: linear-gradient(
    45deg,
    transparent 0%,
    transparent 35%,
    rgba(250, 176, 0, 0.08) 40%,
    rgba(255, 89, 150, 0.08) 45%,
    rgba(99, 91, 255, 0.08) 50%,
    rgba(99, 91, 255, 0.08) 55%,
    rgba(255, 89, 150, 0.08) 60%,
    rgba(250, 176, 0, 0.08) 65%,
    transparent 70%,
    transparent 100%
  );
  background-size: 200% 200%;
}

[data-theme="dark"] .hero-rainbow-bg::after {
  background: linear-gradient(
    45deg,
    transparent 0%,
    transparent 35%,
    rgba(56, 189, 248, 0.1) 40%,
    rgba(67, 121, 255, 0.1) 45%,
    rgba(139, 92, 246, 0.1) 50%,
    rgba(139, 92, 246, 0.1) 55%,
    rgba(67, 121, 255, 0.1) 60%,
    rgba(56, 189, 248, 0.1) 65%,
    transparent 70%,
    transparent 100%
  );
  background-size: 200% 200%;
}

/* ============================================================================
   CREAMY THEME
   ============================================================================ */
[data-theme="creamy"] .hero-rainbow-bg::before {
  background: linear-gradient(
    45deg,
    transparent 0%,
    transparent 35%,
    rgba(198, 134, 103, 0.12) 40%,
    rgba(212, 165, 116, 0.12) 45%,
    rgba(14, 165, 233, 0.12) 50%,
    rgba(14, 165, 233, 0.12) 55%,
    rgba(212, 165, 116, 0.12) 60%,
    rgba(198, 134, 103, 0.12) 65%,
    transparent 70%,
    transparent 100%
  );
  background-size: 200% 200%;
}

[data-theme="creamy"] .hero-rainbow-bg::after {
  background: linear-gradient(
    45deg,
    transparent 0%,
    transparent 35%,
    rgba(56, 189, 248, 0.12) 40%,
    rgba(67, 121, 255, 0.12) 45%,
    rgba(139, 92, 246, 0.12) 50%,
    rgba(139, 92, 246, 0.12) 55%,
    rgba(67, 121, 255, 0.12) 60%,
    rgba(56, 189, 248, 0.12) 65%,
    transparent 70%,
    transparent 100%
  );
  background-size: 200% 200%;
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-rainbow-bg::before,
  .hero-rainbow-bg::after {
    animation: none;
    opacity: 0.5;
  }

  .hero-rainbow-bg::after {
    opacity: 0;
  }
}

@keyframes rainbowDiagonalMove {
  0%,
  100% {
    background-position: 0% 100%;
  }
  50% {
    background-position: 100% 0%;
  }
}

/* ============================================================================
   HERO GRADIENT TEXT (from Startup Page)
   ============================================================================ */
.hero-gradient-text {
  background: linear-gradient(
    90deg,
    var(--text-secondary, #64748b) 0%,
    var(--text-secondary, #64748b) 20%,
    #fab000 35%,
    #ff5996 50%,
    var(--color-primary, #4379ff) 65%,
    var(--text-secondary, #64748b) 80%,
    var(--text-secondary, #64748b) 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientTextGlow 4s ease-in-out forwards;
  animation-delay: 0.5s;
  background-position: 100% 0;
}

@keyframes gradientTextGlow {
  0% {
    background-position: 100% 0;
  }
  50% {
    background-position: 0% 0;
  }
  100% {
    background-position: 100% 0;
  }
}

.hero-gradient-text.animate-again {
  animation: gradientTextGlow 4s ease-in-out forwards;
}

/* ============================================================================
   HERO CARDS VISUAL CONTAINER
   ============================================================================ */

.hero-cards-visual {
  position: relative;
  height: 100%;
  min-height: 600px;
}

.hero-cards-container {
  position: absolute;
  top: 50px;
  right: 0;
  width: 100%;
}

/* ============================================================================
   RESPONSIVE HERO CONTENT
   ============================================================================ */
.hero-main-container {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  min-height: 100vh;
  padding-top: 100px;
  padding-bottom: 60px;
}

.hero-text-content {
  max-width: 580px;
}

.hero-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  letter-spacing: -0.03em;
  color: var(--text-primary, #1e293b);
}

[data-theme="dark"] .hero-title {
  color: #f1f5f9;
}

.hero-description {
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.7;
  color: var(--text-secondary, #64748b);
  margin-bottom: 2rem;
  max-width: 500px;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.hero-stats {
  display: flex;
  gap: 2rem;
}

.hero-stat {
  text-align: left;
}

.stat-number {
  display: flex;
  align-items: baseline;
  gap: 0.125rem;
}

.stat-suffix {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 700;
  color: var(--color-primary, #4379ff);
}

[data-theme="creamy"] .stat-suffix {
  color: #0ea5e9;
}

.stat-label {
  font-size: 0.8125rem;
  color: var(--text-secondary, #64748b);
  margin-top: 0.25rem;
}

.glass-button.white-btn {
  background: var(--bg-card, #fff);
}

/* ============================================================================
   MOBILE HERO CAROUSEL
   ============================================================================ */
.hero-mobile-carousel {
  display: none;
  position: relative;
  width: 100%;
  padding: 2rem 0;
  overflow: hidden;
}

.mobile-carousel-container {
  position: relative;
  width: 100%;
  height: 520px;
  overflow: hidden;
}

.mobile-carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.mobile-carousel-slide {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.5s ease,
    left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mobile-carousel-slide.current {
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  opacity: 1;
}

.mobile-carousel-slide.next {
  left: auto;
  right: -200px;
  transform: translateY(-50%);
  z-index: 1;
  opacity: 0.5;
}

.mobile-carousel-slide.prev,
.mobile-carousel-slide.hidden {
  left: -100%;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.mobile-card-wrapper {
  padding: 1rem;
}

/* Override absolute positioning for mobile cards */
.mobile-carousel-slide .hero-demo-card {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  opacity: 1 !important;
  transform: none !important;
  transition: box-shadow 0.3s ease !important;
}

/* Mobile card sizes */
.mobile-carousel-slide .hero-card-1 {
  width: 300px !important;
  height: auto !important;
  min-height: 380px !important;
  max-height: none !important;
}

.mobile-carousel-slide .hero-card-2 {
  width: 280px !important;
  height: auto !important;
  min-height: 320px !important;
  max-height: none !important;
}

.mobile-carousel-slide .hero-card-3 {
  width: 260px !important;
  height: auto !important;
  min-height: 200px !important;
  max-height: none !important;
}

.mobile-carousel-slide .hero-card-4 {
  width: 260px !important;
  height: auto !important;
  min-height: 180px !important;
  max-height: none !important;
}

/* Mobile feature pills (static grid for carousel) */
.mobile-feature-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 0;
}

.mobile-feature-pills .feature-pill {
  font-size: 0.6875rem;
  padding: 0.375rem 0.625rem;
}

/* Carousel Navigation */
.mobile-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 0 1.5rem;
}

.mobile-carousel-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 50%;
  color: var(--text-secondary, #64748b);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .mobile-carousel-btn {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.mobile-carousel-btn:hover {
  background: var(--color-primary, #4379ff);
  border-color: var(--color-primary, #4379ff);
  color: white;
}

.mobile-carousel-btn:active {
  transform: scale(0.95);
}

.mobile-carousel-dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mobile-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-color, #e2e8f0);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

[data-theme="dark"] .mobile-carousel-dot {
  background: #334155;
}

.mobile-carousel-dot.active {
  width: 24px;
  border-radius: 4px;
  background: var(--color-primary, #4379ff);
}

[data-theme="creamy"] .mobile-carousel-dot.active {
  background: #0ea5e9;
}

/* ============================================================================
   RESPONSIVE BREAKPOINTS
   ============================================================================ */
@media (max-width: 1199.98px) {
  .hero-main-container {
    gap: 2rem;
    padding: 0 1.5rem;
  }

  .hero-cards-container {
    right: 1rem;
  }
}

@media (max-width: 991.98px) {
  .hero-main-container {
    grid-template-columns: 1fr;
    text-align: center;
    padding-top: 120px;
    padding-bottom: 2rem;
    min-height: auto;
    gap: 0;
  }

  .hero-text-content {
    max-width: 100%;
    margin: 0 auto;
  }

  .hero-description {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-buttons {
    justify-content: center;
  }

  .hero-stats {
    justify-content: center;
  }

  .hero-stat {
    text-align: center;
  }

  /* Hide desktop cards, show mobile carousel */
  .hero-cards-visual {
    display: none !important;
  }

  .hero-mobile-carousel {
    display: block;
  }
}

@media (max-width: 767.98px) {
  .hero-main-container {
    padding: 0 1rem;
  }

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

  .hero-stat {
    flex: 0 0 auto;
    min-width: 80px;
  }

  .mobile-carousel-container {
    height: 500px;
  }

  .mobile-carousel-slide.next {
    right: -180px;
  }

  .mobile-carousel-slide .hero-card-1 {
    width: 280px !important;
    min-height: 360px !important;
  }

  .mobile-carousel-slide .hero-card-2 {
    width: 260px !important;
    min-height: 300px !important;
  }

  .mobile-carousel-slide .hero-card-3 {
    width: 240px !important;
    min-height: 180px !important;
  }

  .mobile-carousel-slide .hero-card-4 {
    width: 240px !important;
    min-height: 160px !important;
  }
}

@media (max-width: 575.98px) {
  .hero-title {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
  }
  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }

  .hero-buttons .glass-button {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }

  .hero-stats {
    gap: 1rem;
  }

  .stat-counter {
    font-size: 1.5rem;
  }

  .stat-label {
    font-size: 0.75rem;
  }

  .mobile-carousel-container {
    height: 480px;
  }

  .mobile-carousel-slide.next {
    right: -160px;
  }

  .mobile-carousel-btn {
    width: 36px;
    height: 36px;
  }

  .mobile-carousel-slide .hero-card-1 {
    width: 260px !important;
    min-height: 340px !important;
  }

  .mobile-carousel-slide .hero-card-2 {
    width: 240px !important;
    min-height: 280px !important;
  }

  .mobile-carousel-slide .hero-card-3 {
    width: 220px !important;
    min-height: 170px !important;
  }

  .mobile-carousel-slide .hero-card-4 {
    width: 220px !important;
    min-height: 150px !important;
  }
}

@media (max-width: 340px) {
  .hero-title {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
  }
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .mobile-carousel-slide {
    transition: none;
  }
}

/* ============================================================================
   HERO DEMO CARDS - Base Styles
   ============================================================================ */
.hero-demo-card {
  position: absolute;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 34px 69px -57px rgba(0, 0, 0, 0.1),
    0 34px 69px -11px rgba(50, 50, 93, 0.25);
  overflow: hidden;
  opacity: 0;
  transform: translateY(40px) scale(0.8);
  transition:
    opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="dark"] .hero-demo-card {
  background: rgba(30, 41, 59, 0.95);
  border-color: rgba(71, 85, 105, 0.5);
}

[data-theme="creamy"] .hero-demo-card {
  background: rgba(255, 253, 249, 0.95);
  border-color: rgba(232, 224, 213, 0.6);
}

.hero-demo-card.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Card 1 - Platform Overview (Biggest) */
.hero-card-1 {
  width: 320px;
  min-height: 340px;
  max-height: 520px;
  top: 0;
  right: 0;
  z-index: 4;
  transition-delay: 0.9s;
}

/* Card 2 - Feature Selection (Second Biggest) */
.hero-card-2 {
  width: 250px;
  height: calc(45vh * 0.8);
  min-height: 275px;
  max-height: 350px;
  top: calc(40vh - 220px);
  transition-delay: 0.6s;
  right: 340px;
  z-index: 3;
}

/* Card 3 - Quick Quote */
.hero-card-3 {
  width: 204px;
  height: 140px;
  top: calc(40vh + 70px);
  right: 200px;
  z-index: 2;
  transition-delay: 0.3s;
}

/* Card 4 - Support Badge */
.hero-card-4 {
  width: 164px;
  height: 113px;
  top: calc(40vh + 185px);
  right: 375px;
  z-index: 1;
  transition-delay: 0s;
}

/* ============================================================================
   CARD 1 - PLATFORM OVERVIEW (Web & Mobile SVG)
   ============================================================================ */
.platform-overview-demo {
  padding: 1.25rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.platform-demo-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
}

[data-theme="dark"] .platform-demo-header {
  border-color: #334155;
}

.platform-demo-dots {
  display: flex;
  gap: 0.375rem;
}

.platform-demo-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.platform-demo-dots .dot.red {
  background: #ff5f57;
}
.platform-demo-dots .dot.yellow {
  background: #febc2e;
}
.platform-demo-dots .dot.green {
  background: #28c840;
}

.platform-demo-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
}

[data-theme="dark"] .platform-demo-title {
  color: #f1f5f9;
}

.platform-demo-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* SVG Devices Container */
.platform-devices-svg {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.devices-illustration {
  width: 100%;
  max-width: 300px;
  height: auto;
}

/* SVG Animation Classes */
.devices-illustration .pulse-element {
  animation: svgPulse 2s ease-in-out infinite;
}

.devices-illustration .cta-pulse {
  animation: ctaPulse 2s ease-in-out infinite;
}

.devices-illustration .connection-line {
  animation: dashMove 2s linear infinite;
}

.devices-illustration .float-1 {
  animation: floatIcon 3s ease-in-out infinite;
}

.devices-illustration .float-2 {
  animation: floatIcon 3s ease-in-out infinite 0.5s;
}

.devices-illustration .float-3 {
  animation: floatIcon 3s ease-in-out infinite 1s;
}

@keyframes svgPulse {
  0%,
  100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}

@keyframes ctaPulse {
  0%,
  100% {
    opacity: 0.9;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
  }
}

@keyframes dashMove {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -10;
  }
}

@keyframes floatIcon {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

/* Platform Features List */
.platform-features-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.platform-feature-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-secondary, #64748b);
}

.platform-feature-item i {
  color: #10b981;
  font-size: 0.875rem;
}

/* Platform Footer Stats */
.platform-demo-footer {
  display: flex;
  justify-content: space-around;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border-color, #e2e8f0);
}

[data-theme="dark"] .platform-demo-footer {
  border-color: #334155;
}

.platform-stat {
  text-align: center;
}

.platform-stat-value {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary, #4379ff);
}

[data-theme="creamy"] .platform-stat-value {
  color: #0ea5e9;
}

.platform-stat-label {
  font-size: 0.625rem;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============================================================================
   CARD 2 - FEATURE SELECTION
   ============================================================================ */
.feature-selection-demo {
  padding: 1rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.feature-demo-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
}

.feature-demo-header i {
  color: var(--color-primary, #4379ff);
  font-size: 0.875rem;
}

[data-theme="creamy"] .feature-demo-header i {
  color: #0ea5e9;
}

.feature-demo-header span {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
}

[data-theme="dark"] .feature-demo-header span {
  color: #f1f5f9;
}

/* Project Type Selection */
.project-type-selection {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
}

.project-type-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 0.5rem;
  background: var(--bg-secondary, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  position: relative;
  transition: all 0.2s ease;
}

[data-theme="dark"] .project-type-card {
  background: #0f172a;
  border-color: #334155;
}

.project-type-card.selected {
  background: linear-gradient(
    135deg,
    rgba(67, 121, 255, 0.12) 0%,
    rgba(67, 121, 255, 0.08) 100%
  );
  box-shadow:
    inset 0 0 0 1px rgba(67, 121, 255, 0.15),
    0 2px 8px rgba(67, 121, 255, 0.08);
  border-color: transparent;
}

[data-theme="creamy"] .project-type-card.selected {
  background: rgba(14, 165, 233, 0.08);
}

.project-type-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card, #fff);
  border-radius: 6px;
  font-size: 0.875rem;
  color: var(--text-secondary, #64748b);
}

[data-theme="dark"] .project-type-icon {
  background: #1e293b;
}

.project-type-card.selected .project-type-icon {
  color: var(--color-primary, #4379ff);
}

[data-theme="creamy"] .project-type-card.selected .project-type-icon {
  color: #0ea5e9;
}

.project-type-label {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-secondary, #64748b);
}

.project-type-card.selected .project-type-label {
  color: var(--color-primary, #4379ff);
  font-weight: 600;
}

[data-theme="creamy"] .project-type-card.selected .project-type-label {
  color: #0ea5e9;
}

.type-check {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  font-size: 0.625rem;
  color: var(--color-primary, #4379ff);
}

[data-theme="creamy"] .type-check {
  color: #0ea5e9;
}

/* Feature Pills Container */
.feature-pills-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  overflow: hidden;
  margin-bottom: 0.75rem;
  mask-image: linear-gradient(
    to right,
    transparent,
    black 5%,
    black 95%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 5%,
    black 95%,
    transparent
  );
}

.feature-pills-row {
  display: flex;
  gap: 0.375rem;
  white-space: nowrap;
}

.feature-pills-row.row-1 {
  animation: scrollPillsLeft 20s linear infinite;
}

.feature-pills-row.row-2 {
  animation: scrollPillsRight 22s linear infinite;
}

.feature-pills-row.row-3 {
  animation: scrollPillsLeft 18s linear infinite;
}

@keyframes scrollPillsLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes scrollPillsRight {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

.feature-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3125rem 0.5rem;
  background: var(--bg-secondary, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 20px;
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--text-secondary, #64748b);
  flex-shrink: 0;
}

[data-theme="dark"] .feature-pill {
  background: #0f172a;
  border-color: #334155;
}

.feature-pill i {
  font-size: 0.5rem;
}

.feature-pill.selected {
  background: rgba(67, 121, 255, 0.1);
  border-color: var(--color-primary, #4379ff);
  color: var(--color-primary, #4379ff);
}

[data-theme="creamy"] .feature-pill.selected {
  background: rgba(14, 165, 233, 0.1);
  border-color: #0ea5e9;
  color: #0ea5e9;
}

/* Feature Selection Footer */
.feature-selection-footer {
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border-color, #e2e8f0);
  text-align: center;
}

[data-theme="dark"] .feature-selection-footer {
  border-color: #334155;
}

.features-count {
  font-size: 0.6875rem;
  color: var(--text-secondary, #64748b);
}

.features-count strong {
  color: var(--color-primary, #4379ff);
}

[data-theme="creamy"] .features-count strong {
  color: #0ea5e9;
}

/* ============================================================================
   CARD 3 - QUICK QUOTE
   ============================================================================ */
.quick-quote-demo {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.project-submitted {
  padding: 1.25rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.submitted-checkmark {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border-radius: 50%;
  font-size: 1rem;
  margin-bottom: 0.75rem;
}

.submitted-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-primary, #1e293b);
  margin: 0 0 0.375rem;
}

[data-theme="dark"] .submitted-title {
  color: #f1f5f9;
}

.submitted-description {
  font-size: 0.6875rem;
  color: var(--text-secondary, #64748b);
  line-height: 1.4;
  margin: 0;
}

/* ============================================================================
   CARD 4 - START BUILDING
   ============================================================================ */
.start-building-preview {
  padding: 0.75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.start-building-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  gap: 0.5rem;
}

.start-building-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    var(--color-primary, #4379ff) 0%,
    #8b5cf6 100%
  );
  color: white;
  border-radius: 6px;
  font-size: 0.625rem;
}

[data-theme="creamy"] .start-building-icon {
  background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
}

.start-building-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-primary, #1e293b);
  margin: 0;
}

[data-theme="dark"] .start-building-title {
  color: #f1f5f9;
}

.start-building-message {
  font-size: 0.5625rem;
  color: var(--text-secondary, #64748b);
  line-height: 1.4;
  margin: 0 0 0.5rem;
  flex: 1;
}

.start-building-action {
  border-top: 1px dashed var(--border-color, #e2e8f0);
}

[data-theme="dark"] .start-building-action {
  border-color: #334155;
}

.start-building-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.5625rem;
  color: var(--color-primary, #4379ff);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
}

.start-building-link:hover {
  gap: 0.5rem;
}

.start-building-link i {
  font-size: 0.5rem;
  transition: transform 0.2s ease;
}

.start-building-link:hover i {
  transform: translateX(2px);
}

[data-theme="creamy"] .start-building-link {
  color: #0ea5e9;
}

/* ============================================================================
   CARD 1 - SERVICE CHECKLIST
   ============================================================================ */
.service-checklist {
  display: flex;
  flex-direction: column;
  padding: 0.25rem 0;
}

.service-check-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0;
}

.service-check-divider {
  height: 1px;
  background: var(--border-color, #e2e8f0);
  opacity: 0.5;
  margin-left: 2rem;
}

[data-theme="dark"] .service-check-divider {
  background: #334155;
}

.check-box {
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--border-color, #d1d5db);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  background: var(--bg-card, #fff);
}

[data-theme="dark"] .check-box {
  border-color: #475569;
  background: #1e293b;
}

.check-box.checked {
  background: var(--color-primary, #4379ff);
  border-color: var(--color-primary, #4379ff);
}

[data-theme="creamy"] .check-box.checked {
  background: #0ea5e9;
  border-color: #0ea5e9;
}

.check-box i {
  font-size: 0.5rem;
  color: white;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.15s ease;
}

.check-box.checked i {
  opacity: 1;
  transform: scale(1);
}

.check-content {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.check-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
  line-height: 1.2;
}

[data-theme="dark"] .check-label {
  color: #f1f5f9;
}

.check-hint {
  font-size: 0.75rem;
  color: var(--text-secondary, #64748b);
  line-height: 1.3;
}

/* ============================================================================
   CARD 2 - CATEGORY TREE STRUCTURE
   ============================================================================ */
.category-tree {
  padding: 0.5rem 0;
  position: relative;
}

/* Root Node */
.tree-root {
  display: flex;
  justify-content: center;
  margin-bottom: 0.5rem;
  position: relative;
}

.tree-root::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 8px;
  background: var(--border-color, #d1d5db);
}

[data-theme="dark"] .tree-root::after {
  background: #475569;
}

/* Tree Nodes */
.tree-node {
  display: inline-block;
  padding: 0.3125rem 0.5rem;
  background: var(--bg-surface-secondary, #f8fafc);
  border: 0.5px solid var(--border-color, #d1d5db);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-primary, #1e293b);
  white-space: nowrap;
  transition: all 0.2s ease;
}

[data-theme="dark"] .tree-node {
  background: var(--bg-surface-secondary, #1e293b);
  border-color: #334155;
  color: #e2e8f0;
}

.tree-node:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .tree-node:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  border-color: #475569;
}

.tree-node.root-node {
  background: var(--color-primary, #4379ff);
  border: 0.5px solid var(--color-primary, #4379ff);
  color: var(--color-white, #fff);
  font-weight: 600;
  padding: 0.375rem 0.625rem;
}

/* Tree Branches Container */
.tree-branches {
  display: flex;
  justify-content: space-between;
  position: relative;
}

/* Horizontal connector line across top of branches */
.tree-branches::before {
  content: "";
  position: absolute;
  top: 0;
  left: 17%;
  right: 17%;
  height: 1px;
  background: var(--border-color, #d1d5db);
}

[data-theme="dark"] .tree-branches::before {
  background: #475569;
}

/* Individual Branch */
.tree-branch {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 1;
}

/* Vertical line from horizontal connector to branch node */
.tree-branch::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 8px;
  background: var(--border-color, #d1d5db);
}

[data-theme="dark"] .tree-branch::before {
  background: #475569;
}

.tree-branch > .tree-node {
  margin-top: 8px;
  position: relative;
}

/* Vertical line from branch node to children */
.tree-branch > .tree-node::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 8px;
  background: var(--border-color, #d1d5db);
}

[data-theme="dark"] .tree-branch > .tree-node::after {
  background: #475569;
}

/* Children Container */
.tree-children {
  display: flex;
  flex-direction: column;
  align-items: left;
  gap: 0.5rem;
  margin-top: 8px;
  position: relative;
}

[data-theme="dark"] .tree-children {
  border-color: #475569;
}

/* Child nodes */
.tree-node.child {
  font-size: 0.75rem;
  padding: 0.25rem 0.25rem;
  position: relative;
}

[data-theme="dark"] .tree-node.child {
  background: #1e293b;
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */
@media (max-width: 575.98px) {
  .service-check-item {
    gap: 0.625rem;
  }

  .check-box {
    width: 16px;
    height: 16px;
    min-width: 16px;
  }

  .check-box i {
    font-size: 0.4375rem;
  }

  .check-label {
    font-size: 1rem;
  }

  .check-hint {
    font-size: 0.95rem;
  }

  .service-check-divider {
    margin-left: 1.625rem;
  }

  .tree-node {
    font-size: 0.75rem;
    padding: 0.25rem 0.375rem;
  }

  .tree-node.child {
    font-size: 0.75rem;
    padding: 0.1875rem 0.5rem;
  }

  .tree-branches::before {
    left: 10%;
    right: 10%;
  }
}

/* ============================================================================
   KANBAN TRACKING SECTION - Left Content Redesign
   ============================================================================ */
.kanban-tracking-section {
  padding: 10rem 0;
  background: var(--bg-secondary, #f8fafc);
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .kanban-tracking-section {
  background: var(--bg-body, #0f172a);
}

.kanban-tracking-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 4rem;
  align-items: center;
}

.kanban-tracking-content {
  max-width: 520px;
}

/* Section Badge */
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--bg-surface-secondary, #f1f5f9);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary, #4379ff);
  margin-bottom: 1.25rem;
}

[data-theme="dark"] .section-badge {
  background: rgba(67, 121, 255, 0.1);
  border-color: rgba(67, 121, 255, 0.2);
}

[data-theme="creamy"] .section-badge {
  color: #0ea5e9;
  background: rgba(14, 165, 233, 0.08);
  border-color: rgba(14, 165, 233, 0.15);
}

.section-badge i {
  font-size: 0.75rem;
}

/* Title & Description */
.kanban-tracking-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  color: var(--text-primary, #1e293b);
  line-height: 1.2;
  margin: 0 0 1rem;
  letter-spacing: -0.02em;
}

[data-theme="dark"] .kanban-tracking-title {
  color: #f1f5f9;
}

.kanban-tracking-description {
  font-size: 1rem;
  color: var(--text-secondary, #64748b);
  line-height: 1.7;
  margin: 0 0 2rem;
}

/* ============================================================================
   TRACKING STATS ROW - Apple Spinner Style
   ============================================================================ */
.tracking-stats-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  margin-bottom: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .tracking-stats-row {
  background: var(--bg-card, #1e293b);
  border-color: #334155;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-theme="creamy"] .tracking-stats-row {
  background: var(--bg-card, #fffdf9);
  border-color: #e8e0d5;
}

.tracking-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}

.tracking-stat-divider {
  width: 1px;
  height: 48px;
  background: var(--border-color, #e2e8f0);
}

[data-theme="dark"] .tracking-stat-divider {
  background: #475569;
}

.tracking-stat-label {
  font-size: 0.6875rem;
  color: var(--text-secondary, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
}

/* Spinner Component */
.stat-spinner {
  position: relative;
  height: 36px;
  overflow: hidden;
  width: 60px;
}

.stat-spinner::before,
.stat-spinner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 8px;
  z-index: 2;
  pointer-events: none;
}

.stat-spinner::before {
  top: 0;
  background: linear-gradient(
    to bottom,
    var(--bg-card, #fff) 0%,
    transparent 100%
  );
}

.stat-spinner::after {
  bottom: 0;
  background: linear-gradient(
    to top,
    var(--bg-card, #fff) 0%,
    transparent 100%
  );
}

[data-theme="dark"] .stat-spinner::before {
  background: linear-gradient(
    to bottom,
    var(--bg-card, #1e293b) 0%,
    transparent 100%
  );
}

[data-theme="dark"] .stat-spinner::after {
  background: linear-gradient(
    to top,
    var(--bg-card, #1e293b) 0%,
    transparent 100%
  );
}

[data-theme="creamy"] .stat-spinner::before {
  background: linear-gradient(
    to bottom,
    var(--bg-card, #fffdf9) 0%,
    transparent 100%
  );
}

[data-theme="creamy"] .stat-spinner::after {
  background: linear-gradient(
    to top,
    var(--bg-card, #fffdf9) 0%,
    transparent 100%
  );
}

.spinner-track {
  position: relative;
  height: 100%;
}

.spinner-numbers {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.spinner-numbers span {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-primary, #1e293b);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

[data-theme="dark"] .spinner-numbers span {
  color: #f1f5f9;
}

/* Highlight the center/selected value */
.spinner-numbers span.active {
  color: var(--color-primary, #4379ff);
}

[data-theme="creamy"] .spinner-numbers span.active {
  color: #0ea5e9;
}

/* ============================================================================
   TIMELINE - Transfer Tracking Style
   ============================================================================ */
.tracking-timeline-progress {
  position: relative;
  padding: 0;
  margin: 0 0 2rem;
  list-style: none;
}

.timeline-stage {
  position: relative;
  padding: 0 0 1.5rem 3rem;
  border-left: 2px solid var(--border-color, #e2e8f0);
  margin-left: 10px;
}

[data-theme="dark"] .timeline-stage {
  border-left-color: #334155;
}

.timeline-stage:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

/* Bubble/Dot */
.timeline-stage::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 0;
  width: 20px;
  height: 20px;
  background: var(--bg-card, #fff);
  border: 2px solid var(--border-color, #d1d5db);
  border-radius: 50%;
  transition: all 0.3s ease;
}

[data-theme="dark"] .timeline-stage::before {
  background: var(--bg-card, #1e293b);
  border-color: #475569;
}

/* Completed Stage */
.timeline-stage.completed {
  border-left-color: var(--color-primary, #4379ff);
}

[data-theme="creamy"] .timeline-stage.completed {
  border-left-color: #0ea5e9;
}

.timeline-stage.completed::before {
  background: var(--color-primary, #4379ff);
  border-color: var(--color-primary, #4379ff);
}

[data-theme="creamy"] .timeline-stage.completed::before {
  background: #0ea5e9;
  border-color: #0ea5e9;
}

/* Checkmark inside completed bubble */
.timeline-stage.completed::after {
  content: "";
  position: absolute;
  left: -4px;
  top: 4px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Active Stage */
.timeline-stage.active {
  border-left-color: var(--color-primary, #4379ff);
}

[data-theme="creamy"] .timeline-stage.active {
  border-left-color: #0ea5e9;
}

.timeline-stage.active::before {
  left: -13px;
  width: 26px;
  height: 26px;
  top: -4px;
  background: var(--bg-card, #fff);
  border: 3px solid var(--color-primary, #4379ff);
  box-shadow: 0 0 0 4px rgba(67, 121, 255, 0.15);
}

[data-theme="dark"] .timeline-stage.active::before {
  background: var(--bg-card, #1e293b);
  box-shadow: 0 0 0 4px rgba(67, 121, 255, 0.2);
}

[data-theme="creamy"] .timeline-stage.active::before {
  border-color: #0ea5e9;
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.15);
}

/* Pulsing dot inside active bubble */
.timeline-stage.active::after {
  content: "";
  position: absolute;
  left: -4px;
  top: 5px;
  width: 8px;
  height: 8px;
  background: var(--color-primary, #4379ff);
  border-radius: 50%;
  animation: activePulse 2s ease-in-out infinite;
}

[data-theme="creamy"] .timeline-stage.active::after {
  background: #0ea5e9;
}

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

/* Inactive (future) stages */
.timeline-stage.active ~ .timeline-stage {
  border-left-color: var(--border-color, #e2e8f0);
}

[data-theme="dark"] .timeline-stage.active ~ .timeline-stage {
  border-left-color: #334155;
}

.timeline-stage.active ~ .timeline-stage::before {
  background: var(--bg-secondary, #f8fafc);
  border-color: var(--border-color, #d1d5db);
}

[data-theme="dark"] .timeline-stage.active ~ .timeline-stage::before {
  background: #0f172a;
  border-color: #475569;
}

.timeline-stage.active ~ .timeline-stage .stage-title,
.timeline-stage.active ~ .timeline-stage .stage-sub {
  color: var(--text-muted, #94a3b8);
}

/* Stage Content */
.stage-content {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.stage-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
  line-height: 1.3;
}

[data-theme="dark"] .stage-title {
  color: #f1f5f9;
}

.timeline-stage.active .stage-title {
  color: var(--color-primary, #4379ff);
}

[data-theme="creamy"] .timeline-stage.active .stage-title {
  color: #0ea5e9;
}

.stage-sub {
  font-size: 0.8125rem;
  color: var(--text-secondary, #64748b);
  line-height: 1.4;
}

.timeline-stage.active .stage-sub {
  color: var(--text-primary, #1e293b);
  font-weight: 500;
}

[data-theme="dark"] .timeline-stage.active .stage-sub {
  color: #e2e8f0;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 575px) {
  .tracking-stats-row {
    gap: 0;
  }

  .tracking-stat-item {
    width: 100%;
  }

  .stat-spinner {
    width: 80px;
  }

  .timeline-stage {
    padding-left: 2.5rem;
  }

  .timeline-stage.active::before {
    left: -12px;
    width: 22px;
    height: 22px;
  }

  .timeline-stage.active::after {
    left: -4px;
    top: 4px;
    width: 6px;
    height: 6px;
  }

  .stage-title {
    font-size: 0.875rem;
  }

  .stage-sub {
    font-size: 0.75rem;
  }
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .spinner-numbers {
    transition: none;
  }

  .timeline-stage.active::after {
    animation: none;
  }
}

/* CTA Button */
.tracking-cta-btn {
  margin-top: 0.5rem;
}

/* ============================================================================
   KANBAN SLIDE-IN ANIMATION
   ============================================================================ */
.hero-visual-kanban {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 55%;
  max-width: 750px;
}

.hero-kanban-wrapper {
  opacity: 0;
  transform: translateX(100px);
  transition:
    opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-kanban-wrapper.slide-in {
  opacity: 1;
  transform: translateX(0);
}

/* Override old animation states - everything visible by default */
.hero-kanban-board.visible,
.hero-kanban-column.visible,
.hero-task-card.visible {
  opacity: 1;
  transform: none;
}

.hero-floating-progress.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 1199.98px) {
  .kanban-tracking-grid {
    gap: 2rem;
  }

  .hero-visual-kanban {
    width: 50%;
  }
}

@media (max-width: 991.98px) {
  .kanban-tracking-section {
    padding: 4rem 0;
  }

  .kanban-tracking-grid {
    grid-template-columns: 1fr;
    text-align: center;
    max-width: 90%;
    margin: auto;
  }

  .kanban-tracking-content {
    max-width: 100%;
    margin: 0 auto;
  }

  .tracking-stats-row {
    justify-content: center;
  }

  .tracking-timeline {
    text-align: left;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }

  .tracking-cta-btn {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-visual-kanban {
    display: none;
  }

  .kanban-tracking-grid li {
    grid-template-columns: 1fr;
    text-align: left;
  }
}

@media (max-width: 575.98px) {
  .tracking-stat-item {
    align-items: center;
    text-align: center;
  }

  .project-submitted {
    padding: 3rem 1.25rem;
  }

  .start-building-preview {
    padding: 3rem 0.75rem;
  }
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-rainbow-bg::before,
  .hero-gradient-text,
  .feature-pills-row,
  .loading-line-progress,
  .devices-illustration .pulse-element,
  .devices-illustration .cta-pulse,
  .devices-illustration .connection-line,
  .devices-illustration .float-1,
  .devices-illustration .float-2,
  .devices-illustration .float-3 {
    animation: none;
  }

  .hero-demo-card,
  .kanban-tracking-board,
  .kanban-tracking-column,
  .kanban-task-card,
  .kanban-floating-progress,
  .progress-fill {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .hero-gradient-text {
    background-position: 0% 0;
  }

  .kanban-floating-progress.visible .progress-fill {
    stroke-dashoffset: 25;
  }
}

@media (max-width: 991px) {
  /* 1. CTA backdrop-filter animations - MOST EXPENSIVE */
  .cta-bg-picture::before,
  .cta-bg-picture::after {
    animation: none !important;
    backdrop-filter: blur(2vmin) !important;
    -webkit-backdrop-filter: blur(2vmin) !important;
  }

  .cta-content-card {
    animation: none !important;
    backdrop-filter: blur(2vmin) !important;
    -webkit-backdrop-filter: blur(2vmin) !important;
  }

  .cta-content-card::after {
    animation: none !important;
  }

  /* 2. Hero title filter animation - drop-shadow is expensive */
  .hero-title {
    animation: none !important;
    filter: none !important;
  }

  /* 3. Glass button border + shimmer animations */
  .glass-button::before {
    animation: none !important;
  }

  .glass-button .shimmer {
    animation: none !important;
    display: none;
  }

  /* 4. Feature pills continuous scroll */
  .feature-pills-row {
    animation: none !important;
  }

  /* 6. Milestone glow box-shadow */
  .hero-task-card.milestone {
    animation: none !important;
  }

  /* 7. Cookie bounce */
  .cookie-chevron {
    animation: none !important;
  }
}