/* ============================================
   NOVASITE.CLOUD — Stylesheet (refactored)
   ============================================ */

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --brand-pink:     #faf9fc;
  --brand-pink-mid: #8b5cf6;
  --brand-purple:   #6d28d9;
  --bg-black:       #08080c;
  --card-black:     #0e0e14;
  --text-white:     #ffffff;
  --text-muted:     rgba(255, 255, 255, 0.65);
  --text-dim:       rgba(255, 255, 255, 0.55);
  --text-faint:     rgba(255, 255, 255, 0.45);
  --border-soft:    rgba(255, 255, 255, 0.07);
  --border-card:    rgba(139, 92, 246, 0.18);
  --gradient-brand:   linear-gradient(135deg, #faf9fc 0%, #8b5cf6 50%, #6d28d9 100%);
  --gradient-brand-2: linear-gradient(135deg, #330364 0%, #9d0997 100%);
  --shadow-brand:    0 10px 40px -10px rgba(168, 85, 247, 0.5);
  --ease-out:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-smooth: cubic-bezier(0.16, 1, 0.3, 1);

  /* Section gradient palette — strong purple aurora matching reference images */
  --sec-glow-1: radial-gradient(ellipse 80% 70% at 10% 5%, rgba(140, 30, 255, 0.55) 0%, rgba(100, 20, 200, 0.2) 40%, transparent 70%),
                radial-gradient(ellipse 75% 65% at 92% 90%, rgba(180, 50, 255, 0.5) 0%, rgba(120, 30, 220, 0.18) 40%, transparent 70%),
                #050208;
  --sec-glow-2: radial-gradient(ellipse 75% 65% at 88% 8%, rgba(130, 25, 240, 0.5) 0%, rgba(90, 15, 190, 0.18) 40%, transparent 68%),
                radial-gradient(ellipse 70% 60% at 8% 92%, rgba(170, 45, 255, 0.45) 0%, rgba(110, 25, 210, 0.16) 40%, transparent 68%),
                #050208;
  --sec-glow-3: radial-gradient(ellipse 70% 60% at 15% 85%, rgba(150, 35, 250, 0.5) 0%, rgba(100, 20, 200, 0.18) 40%, transparent 68%),
                radial-gradient(ellipse 65% 55% at 85% 12%, rgba(160, 40, 255, 0.42) 0%, rgba(110, 25, 210, 0.15) 38%, transparent 65%),
                #050208;
  --sec-glow-4: radial-gradient(ellipse 80% 70% at 80% 80%, rgba(145, 30, 245, 0.5) 0%, rgba(95, 18, 195, 0.18) 40%, transparent 70%),
                radial-gradient(ellipse 65% 55% at 18% 10%, rgba(165, 42, 255, 0.4) 0%, rgba(105, 22, 205, 0.14) 38%, transparent 65%),
                #050208;
  --sec-glow-5: radial-gradient(ellipse 75% 65% at 50% 5%, rgba(135, 28, 240, 0.48) 0%, rgba(90, 15, 190, 0.16) 40%, transparent 68%),
                radial-gradient(ellipse 70% 60% at 50% 95%, rgba(175, 48, 255, 0.5) 0%, rgba(115, 28, 215, 0.18) 40%, transparent 68%),
                #050208;
  --sec-glow-6: radial-gradient(ellipse 70% 60% at 5% 25%, rgba(155, 38, 250, 0.5) 0%, rgba(100, 20, 200, 0.18) 40%, transparent 68%),
                radial-gradient(ellipse 78% 68% at 95% 75%, rgba(140, 32, 245, 0.48) 0%, rgba(95, 18, 195, 0.16) 40%, transparent 68%),
                #050208;

  /* Card design language — JSX reference port */
  --card-grad:        linear-gradient(160deg, rgba(62,8,118,0.72) 0%, rgba(18,0,36,0.93) 40%, rgba(4,0,16,0.97) 70%, rgba(26,4,54,0.88) 100%);
  --card-grad-alt:    linear-gradient(150deg, rgba(50,6,100,0.70) 0%, rgba(14,0,30,0.93) 40%, rgba(3,0,13,0.97) 70%, rgba(20,3,46,0.87) 100%);
  --card-border:      rgba(190,120,255,0.18);
  --card-border-shine:rgba(210,150,255,0.38);
  --card-glow-main:   rgba(155,55,250,0.38);
  --card-glow-hover:  rgba(165,65,255,0.60);
  --card-shadow: none;
  --card-shadow-hover: none;
  --card-trace-color: rgba(200,140,255,0.90);
  --card-bloom-filter: blur(24px) brightness(0.88) saturate(1.75);
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  background: #050208;
}

body {
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  background: #050208;
  color: var(--text-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img, svg { max-width: 100%; display: block; }
ul, ol { list-style: none; }

::selection { background: rgba(168, 85, 247, 0.35); color: #fff; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #08080c; }
::-webkit-scrollbar-thumb { background: #2a1a4a; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #4a2a7a; }

/* ── Layout helpers ── */
.section {
  position: relative;
  padding-top: clamp(5rem, 10vw, 9rem);
  padding-bottom: clamp(5rem, 10vw, 9rem);
  background: var(--sec-glow-1);
}

/* Elegant gradient divider line at top of each section */
.section::before,
.bg-white-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(85%, 72rem);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(109, 40, 217, 0.15) 10%,
    rgba(139, 92, 246, 0.5) 30%,
    rgba(168, 85, 247, 0.8) 50%,
    rgba(139, 92, 246, 0.5) 70%,
    rgba(109, 40, 217, 0.15) 90%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* Soft glow behind the line for depth */
.section::after,
.bg-white-section::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: min(60%, 50rem);
  height: 3px;
  background: radial-gradient(ellipse at center, rgba(168, 85, 247, 0.45) 0%, transparent 70%);
  filter: blur(4px);
  pointer-events: none;
  z-index: 2;
}

/* First section after hero — no top divider */
.page-main > .section:first-of-type::before,
.page-main > .section:first-of-type::after,
.hero + .section::before,
.hero + .section::after,
.page-hero + .section::before,
.page-hero + .section::after { display: none; }

/* Unique gradient per section position — seamless flow */
.section:nth-of-type(2)  { background: var(--sec-glow-2); }
.section:nth-of-type(3)  { background: var(--sec-glow-3); }
.section:nth-of-type(4)  { background: var(--sec-glow-4); }
.section:nth-of-type(5)  { background: var(--sec-glow-5); }
.section:nth-of-type(6)  { background: var(--sec-glow-6); }
.section:nth-of-type(7)  { background: var(--sec-glow-1); }
.section:nth-of-type(8)  { background: var(--sec-glow-2); }
.section:nth-of-type(9)  { background: var(--sec-glow-3); }
.section:nth-of-type(10) { background: var(--sec-glow-4); }

.container {
  position: relative;
  z-index: 1;
  margin-inline: auto;
  max-width: 80rem;
  padding-inline: 1.5rem;
}
@media (min-width: 1024px) { .container { padding-inline: 2.5rem; } }

.text-center { text-align: center; }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }

/* ── Brand utilities ── */
.text-gradient {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  background-size: 250% 100%;
  animation: nsGradientShift 6s ease-in-out infinite;
}
@keyframes nsGradientShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.bg-gradient-brand { background: var(--gradient-brand-2); }

.glow-pink { box-shadow: 0 10px 40px -10px rgba(109, 40, 217, 0.5); }

.grid-bg {
  background-image:
    linear-gradient(rgba(139, 92, 246, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 92, 246, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
}

.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.65;
}
.section-badge::before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 2px;
  background: var(--gradient-brand-2);
  border-radius: 2px;
  flex-shrink: 0;
  transform-origin: left center;
  animation: nsBadgeDraw 1.2s var(--ease-out) both;
}
@keyframes nsBadgeDraw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
/* ── Card trace-shine & bloom animations (JSX reference port) ── */
@keyframes nsTraceTop {
  0%   { left: -62%; }
  100% { left: 162%; }
}
@keyframes nsTraceRight {
  0%   { top: -62%; }
  100% { top: 162%; }
}
@keyframes nsTraceBottom {
  0%   { right: -62%; }
  100% { right: 162%; }
}
@keyframes nsTraceLeft {
  0%   { bottom: -62%; }
  100% { bottom: 162%; }
}
@keyframes nsFaceSweep {
  0%   { left: -52%; opacity: 0; }
  8%   { opacity: 1; }
  75%  { opacity: 1; }
  100% { left: 132%; opacity: 0; }
}
@keyframes nsCardBloom {
  0%, 100% { opacity: 0.50; }
  50%       { opacity: 0.80; }
}
@keyframes nsCardEntrySpring {
  0%   { opacity: 0; transform: translateY(32px) scale(0.95); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}


/* ── Cards (consolidated, glassmorphism dark purple theme) ── */
.card-white,
.card-black {
  background: var(--card-grad);
  color: var(--text-white);
  border-radius: 1.625rem;
  border: 1px solid rgba(190,120,255,0.14);
  box-shadow: var(--card-shadow);
  backdrop-filter: var(--card-bloom-filter);
  -webkit-backdrop-filter: var(--card-bloom-filter);
  position: relative;
  overflow: hidden;
  transition: transform 0.55s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.4s ease,
              border-color 0.4s ease;
}
/* Animated top-edge trace shimmer */
.card-white::before,
.card-black::before {
  content: "";
  position: absolute;
  top: 0; left: -62%;
  width: 62%; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--card-trace-color) 0% 20%,
    rgba(200,140,255,0.85) 50%,
    rgba(255,255,255,0.95) 60%,
    rgba(200,140,255,0.85) 70%,
    var(--card-trace-color) 80% 100%,
    transparent 100%);
  filter: blur(0.5px);
  animation: nsTraceTop 4.8s linear infinite;
  pointer-events: none;
  z-index: 3;
}
/* Inner top atmospheric bloom */
.card-white::after,
.card-black::after {
  content: "";
  position: absolute;
  top: -28px; left: -6%; right: -6%;
  height: 155px;
  background: radial-gradient(ellipse 82% 100% at 50% 0%,
    rgba(155,55,250,0.30) 0%,
    rgba(155,55,250,0.14) 28%,
    rgba(195,130,255,0.06) 55%,
    transparent 78%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
  animation: nsCardBloom 4.8s ease-in-out infinite;
}
.card-white h3, .card-white h4,
.card-black h3, .card-black h4 { color: var(--text-white); }
.card-white p,
.card-black p { color: var(--text-muted); }
.card-white:hover,
.card-black:hover {
  box-shadow: var(--card-shadow-hover);
  border-color: rgba(210,150,255,0.28);
  transform: translateY(-8px) scale(1.015);
}

.glass-card {
  background: linear-gradient(160deg,
    rgba(55,8,110,0.68) 0%,
    rgba(16,0,34,0.92) 40%,
    rgba(4,0,14,0.97) 70%,
    rgba(22,3,50,0.86) 100%);
  border: 1px solid rgba(190,120,255,0.16);
  backdrop-filter: blur(28px) brightness(0.88) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) brightness(0.88) saturate(1.6);
  border-radius: 1.625rem;
  box-shadow: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.glass-card::before {
  content: "";
  position: absolute;
  top: 0; left: -62%;
  width: 62%; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(195,125,255,0.85) 50%,
    rgba(255,255,255,0.92) 60%,
    rgba(195,125,255,0.85) 70%,
    transparent 100%);
  filter: blur(0.5px);
  animation: nsTraceTop 5.2s linear infinite;
  pointer-events: none;
  z-index: 3;
}
.glass-card::after {
  content: "";
  position: absolute;
  top: -26px; left: -6%; right: -6%;
  height: 148px;
  background: radial-gradient(ellipse 80% 100% at 50% 0%,
    rgba(150,52,245,0.27) 0%,
    rgba(150,52,245,0.12) 28%,
    rgba(190,125,255,0.05) 55%,
    transparent 78%);
  filter: blur(18px);
  pointer-events: none;
  z-index: 0;
  animation: nsCardBloom 5.2s ease-in-out infinite;
}
.glass-card:hover {
  transform: translateY(-8px) scale(1.015);
  border-color: rgba(210,150,255,0.26);
  box-shadow:
    0 0 88px rgba(160,60,255,0.52),
    0 0 170px rgba(160,60,255,0.14),
    0 26px 66px rgba(0,0,0,0.70),
    0 0 0 1px rgba(210,150,255,0.30),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 52px 78px -38px rgba(160,60,255,0.24),
    inset 0 -52px 78px -38px rgba(160,60,255,0.18);
}

.glass {
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ============================================
   PRELOADER
   ============================================ */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(8, 8, 12, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform 0.7s var(--ease-out), opacity 0.7s var(--ease-out);
}
.preloader.hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
.preloader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  animation: preLoaderIn 0.6s ease-out;
}
@keyframes preLoaderIn {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}
.pl-pulse-logo {
  width: 90px;
  height: 90px;
  object-fit: contain;
  animation: logoPulseGlow 1.8s ease-in-out infinite;
}
@keyframes logoPulseGlow {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.5))
            drop-shadow(0 0 20px rgba(139, 92, 246, 0.3));
  }
  50% {
    transform: scale(1.1);
    filter: drop-shadow(0 0 20px rgba(168, 85, 247, 1))
            drop-shadow(0 0 50px rgba(139, 92, 246, 0.8))
            drop-shadow(0 0 80px rgba(109, 40, 217, 0.6));
  }
}

/* ============================================
   NAVBAR
   ============================================ */
.navbar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  padding: 1rem 1rem;
  transition: padding 0.4s ease;
  opacity: 0;
  transform: translateY(-40px);
  animation: navIn 0.6s ease-out 0.3s forwards;
}
@keyframes navIn {
  to { opacity: 1; transform: translateY(0); }
}
.navbar.scrolled { padding-block: 0.5rem; }

.navbar-inner {
  margin-inline: auto;
  max-width: 80rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: 1rem;
  border-radius: 9999px;
  border: 1px solid transparent;
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
@media (min-width: 640px)  { .navbar-inner { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .navbar-inner { padding-inline: 2rem; } }

.navbar.scrolled .navbar-inner {
  background: rgba(8, 8, 12, 0.45);
  border-color: rgba(139, 92, 246, 0.28);
  box-shadow: 0 12px 50px -12px rgba(109, 40, 217, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0;
}
.nav-logo-img {
  height: 38px;
  width: auto;
  display: block;
  object-fit: contain;
}
.nav-logo-text {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #fff;
}

.nav-links {
  display: none;
  align-items: center;
  gap: 0.25rem;
}
@media (min-width: 1024px) { .nav-links { display: flex; } }
.nav-link {
  position: relative;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s;
}
.nav-link:hover { color: #fff; }
.nav-link.active { color: #fff; }
.nav-link::after {
  content: "";
  position: absolute;
  inset-inline: 0.75rem;
  bottom: -0.125rem;
  height: 2px;
  border-radius: 9999px;
  background: var(--gradient-brand-2);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ease-out);
}
.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1); }

.nav-cta-wrap { display: none; }
@media (min-width: 1024px) { .nav-cta-wrap { display: block; } }
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: 9999px;
  background: var(--gradient-brand-2);
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  box-shadow: var(--shadow-brand);
  transition: transform 0.3s, box-shadow 0.3s;
}
.nav-cta:hover { transform: translateY(-2px); }
.nav-cta-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: pulseDot 1.6s ease-in-out infinite;
}
@keyframes pulseDot { 50% { opacity: 0.4; } }

.nav-mobile-btn {
  display: inline-flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  transition: background 0.2s, border-color 0.2s;
}
.nav-mobile-btn:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(168, 85, 247, 0.4); }
@media (min-width: 1024px) { .nav-mobile-btn { display: none; } }
.nav-mobile-btn svg { width: 1.25rem; height: 1.25rem; }

/* Mobile drawer */
.mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.mobile-overlay.open { opacity: 1; pointer-events: auto; }
.mobile-drawer {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 81;
  width: calc(100vw - 2rem);
  max-width: 24rem;
  border-radius: 1.5rem;
  background: rgba(10, 10, 14, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(139, 92, 246, 0.18);
  padding: 1.5rem;
  opacity: 0;
  transform: translateX(2rem);
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s var(--ease-out);
}
.mobile-drawer.open { opacity: 1; transform: translateX(0); pointer-events: auto; }
.mobile-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.mobile-drawer-brand {
  display: flex;
  align-items: center;
}
.mobile-close-btn {
  display: inline-flex;
  height: 2.25rem;
  width: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  transition: background 0.2s;
}
.mobile-close-btn:hover { background: rgba(255, 255, 255, 0.05); }
.mobile-links { display: flex; flex-direction: column; gap: 0.25rem; }
.mobile-link {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 1.125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  transition: background 0.25s, color 0.25s, transform 0.3s var(--ease-out);
  opacity: 0;
  transform: translateX(20px);
}
.mobile-drawer.open .mobile-link {
  animation: mobileLinkIn 0.35s var(--ease-out) forwards;
}
.mobile-drawer.open .mobile-link:nth-child(1) { animation-delay: 0.05s; }
.mobile-drawer.open .mobile-link:nth-child(2) { animation-delay: 0.10s; }
.mobile-drawer.open .mobile-link:nth-child(3) { animation-delay: 0.15s; }
.mobile-drawer.open .mobile-link:nth-child(4) { animation-delay: 0.20s; }
.mobile-drawer.open .mobile-link:nth-child(5) { animation-delay: 0.25s; }
.mobile-drawer.open .mobile-link:nth-child(6) { animation-delay: 0.30s; }
@keyframes mobileLinkIn { to { opacity: 1; transform: translateX(0); } }
.mobile-link:hover {
  background: rgba(168, 85, 247, 0.08);
  color: #fff;
  transform: translateX(6px);
}
.mobile-cta {
  margin-top: 1.5rem;
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.25rem;
  border-radius: 9999px;
  background: var(--gradient-brand-2);
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  box-shadow: var(--shadow-brand);
  transition: transform 0.3s;
}
.mobile-cta:hover { transform: translateY(-2px); }

/* ============================================
   PAGE WRAPPER
   ============================================ */
.page-main {
  position: relative;
  padding-top: 6rem;
  opacity: 0;
  transform: translateY(16px);
  animation: pageIn 0.55s var(--ease-out) forwards;
}
@keyframes pageIn { to { opacity: 1; transform: translateY(0); } }

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  border-radius: 9999px;
  font-size: 1rem;
  font-weight: 600;
  transition: transform 0.25s, background 0.3s, color 0.3s, box-shadow 0.3s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-primary {
  background: var(--gradient-brand-2);
  color: #fff;
  box-shadow: var(--shadow-brand);
  border: 2px solid transparent;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 50px -10px rgba(168,85,247,0.7); }
.btn-outline {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: #fff;
}
.btn-outline:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.btn-outline-light {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
}
.btn-outline-light:hover { background: rgba(255, 255, 255, 0.08); }
.btn-emerald {
  background: #10b981;
  color: #fff;
  box-shadow: 0 15px 50px -15px rgba(16, 185, 129, 0.8);
}
.btn-emerald:hover { transform: translateY(-2px); }
.btn-black {
  background: #000;
  color: #fff;
  border: 2px solid transparent;
}
.btn-black:hover { background: rgba(0, 0, 0, 0.85); }
.btn-sm { padding: 0.625rem 1.25rem; font-size: 0.875rem; }

/* Subtle ambient pulse on primary CTAs (no infinite loops on every CTA — limit to nav-cta) */
@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  70%  { box-shadow: 0 0 0 18px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* Button shine sweep on hover */
.btn-primary::after,
.btn-emerald::after,
.nav-cta::after,
.form-submit::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.0) 30%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0.0) 70%,
    transparent 100%
  );
  transform: skewX(-20deg);
  transition: left 0.7s var(--ease-out);
  pointer-events: none;
  z-index: 1;
}
.btn-primary:hover::after,
.btn-emerald:hover::after,
.nav-cta:hover::after,
.form-submit:hover::after { left: 140%; }
.btn-primary > *,
.btn-emerald > *,
.nav-cta > *,
.form-submit > * { position: relative; z-index: 2; }

/* Suppress :hover translate on magnetic buttons; JS handles lift */
.btn-primary.is-magnetic:hover,
.btn-emerald.is-magnetic:hover,
.nav-cta.is-magnetic:hover,
.form-submit.is-magnetic:hover:not(:disabled) { transform: none; }

/* ============================================
   HERO (Home)
   ============================================ */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
  margin-top: -6rem;
  padding-top: 8rem;
  padding-bottom: 5rem;
  background: var(--bg-black);
}
.hero-layers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hero-layer {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.95;
}
.hero-base {
  background-image: url('images/hero-bg-base.png');
}
.hero-circle {
  background-image: url('images/hero-circle.png');
  opacity: 0;
  transform: translateX(-80px);
  animation: heroSlideIn 0.9s ease-out 0.2s forwards;
}
.hero-person {
  background-image: url('images/hero-person.png');
  opacity: 0;
  transform: translateX(-80px);
  animation: heroSlideIn 0.9s ease-out 0.5s forwards;
}
.hero-rocket {
  background-image: url('images/hero-rocket.png');
  opacity: 0;
  transform: translateX(-80px);
  animation: heroSlideIn 0.9s ease-out 0.8s forwards;
}
@keyframes heroSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-80px);
  }
  100% {
    opacity: 0.95;
    transform: translateX(0);
  }
}
.hero-mobile-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  display: none;
  overflow: hidden;
}
@media (max-width: 768px) {
  .hero-desktop-bg { display: none; }
  .hero-mobile-bg  { display: block; }
}

.hero-content {
  position: relative;
  z-index: 10;
  margin-inline: auto;
  width: 100%;
  max-width: 80rem;
  padding: 0 1.5rem;
}
@media (min-width: 1024px) { .hero-content { padding: 0 2.5rem; } }
.hero-inner { max-width: 48rem; }

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

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 1rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  opacity: 0;
  transform: translateY(20px);
  animation: heroIn 0.85s var(--ease-out) 0.25s forwards;
  position: relative;
  overflow: hidden;
}
.hero-badge svg { width: 0.875rem; height: 0.875rem; color: var(--brand-pink); }
.hero-badge::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  animation: nsBadgeSweep 3.5s ease-in-out infinite;
  animation-delay: 1.8s;
  pointer-events: none;
}
@keyframes nsBadgeSweep {
  0%, 60% { left: -100%; }
  100%    { left: 200%; }
}

.hero-title {
  margin-top: 1.5rem;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  opacity: 0;
  transform: translateY(40px);
  animation: heroIn 1.05s var(--ease-out) 0.4s forwards;
}
@media (min-width: 640px)  { .hero-title { font-size: 3.75rem; } }
@media (min-width: 1024px) { .hero-title { font-size: 4.5rem; } }

.hero-sub {
  margin-top: 1.5rem;
  max-width: 32rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  opacity: 0;
  transform: translateY(20px);
  animation: heroIn 0.95s var(--ease-out) 0.6s forwards;
}
.hero-ctas {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  opacity: 0;
  transform: translateY(20px);
  animation: heroIn 0.95s var(--ease-out) 0.8s forwards;
}

.hero-scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  z-index: 10;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.5);
  opacity: 0;
  animation: fadeIn 0.6s ease-out 1.5s forwards;
}
@keyframes fadeIn { to { opacity: 1; } }
.hero-scroll-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
}
.hero-scroll-arrow { animation: arrowBob 1.6s ease-in-out infinite; }
.hero-scroll-arrow svg { width: 1rem; height: 1rem; }
@keyframes arrowBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}
@media (max-width: 1023px) { .hero-scroll { display: none; } }

/* ============================================
   STATS / CARDS BACKGROUNDS
   ============================================ */
.bg-white-section {
  position: relative;
  isolation: isolate;
  background: var(--sec-glow-2);
  color: #fff;
  border-top: none;
  border-bottom: none;
}
.bg-white-section .section-badge { color: rgba(255, 255, 255, 0.55); }
.bg-white-section h2 { color: #fff; }

/* Unique bg-white-section gradients for seamless flow */
.bg-white-section:nth-of-type(2) { background: var(--sec-glow-3); }
.bg-white-section:nth-of-type(3) { background: var(--sec-glow-5); }
.bg-white-section:nth-of-type(4) { background: var(--sec-glow-4); }
.bg-white-section:nth-of-type(5) { background: var(--sec-glow-6); }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
@media (min-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
}
.stat-card {
  position: relative;
  overflow: hidden;
  padding: 1.5rem;
  background: linear-gradient(160deg,
    rgba(50,6,100,0.70) 0%,
    rgba(14,0,30,0.93) 38%,
    rgba(3,0,13,0.97) 68%,
    rgba(20,3,46,0.87) 100%);
  border: 1px solid rgba(185,115,255,0.15);
  border-radius: 1.5rem;
  backdrop-filter: blur(22px) brightness(0.88) saturate(1.65);
  -webkit-backdrop-filter: blur(22px) brightness(0.88) saturate(1.65);
  box-shadow: 0 14px 44px rgba(0,0,0,0.62), 0 0 0 1px rgba(255,255,255,0.06);
  opacity: 0;
  transform: perspective(1000px) translateY(80px) rotateX(-25deg) scale(0.85);
  transform-origin: center bottom;
  transition: opacity 1.1s var(--ease-out-smooth),
              transform 1.1s var(--ease-out-smooth),
              box-shadow 0.4s ease,
              border-color 0.4s ease;
}
/* Top trace — slightly slower for compact card feel */
.stat-card::before {
  content: "";
  position: absolute;
  top: 0; left: -62%;
  width: 62%; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(185,110,255,0.80) 50%,
    rgba(255,255,255,0.90) 60%,
    rgba(185,110,255,0.80) 70%,
    transparent 100%);
  filter: blur(0.5px);
  animation: nsTraceTop 5.5s linear infinite;
  pointer-events: none;
  z-index: 3;
}
/* Inner top bloom — compact */
.stat-card::after {
  content: "";
  position: absolute;
  top: -22px; left: -5%; right: -5%;
  height: 130px;
  background: radial-gradient(ellipse 78% 100% at 50% 0%,
    rgba(140,48,240,0.26) 0%,
    rgba(140,48,240,0.11) 26%,
    rgba(180,110,255,0.05) 52%,
    transparent 75%);
  filter: blur(16px);
  pointer-events: none;
  z-index: 0;
  animation: nsCardBloom 5.5s ease-in-out infinite;
}
.stat-card.in-view {
  animation: nsFloatingRise 1.35s ease-out both;
  animation-delay: var(--motion-delay, 0ms);
}
@media (min-width: 1024px) { .stat-card { padding: 2rem; } }
.stat-value {
  font-size: 2.25rem;
  font-weight: 700;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (min-width: 1024px) { .stat-value { font-size: 3rem; } }
.stat-label {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.55);
}
@media (min-width: 1024px) { .stat-label { font-size: 1rem; } }

@keyframes nsNumGlow {
  0%   { text-shadow: 0 0 0 rgba(168, 85, 247, 0); }
  50%  { text-shadow: 0 0 30px rgba(168, 85, 247, 0.85); }
  100% { text-shadow: 0 0 0 rgba(168, 85, 247, 0); }
}
.stat-card.in-view .stat-value {
  animation: nsNumGlow 1.4s ease-out 0.4s;
}

/* ============================================
   SECTION HEADERS
   ============================================ */
.section-head {
  margin-bottom: 3.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}
@media (min-width: 1024px) {
  .section-head { flex-direction: row; align-items: flex-end; }
}
.section-h2 {
  margin-top: 0.75rem;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
  max-width: 36rem;
  opacity: 0;
  will-change: transform, opacity, filter;
}
@media (min-width: 1024px) { .section-h2 { font-size: 3rem; } }
.section-h2.in-view {
  animation: nsBlurReveal 1.1s cubic-bezier(0.22,1,0.36,1) both;
}

.section-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s, gap 0.2s;
}
.section-link:hover { color: #fff; gap: 0.75rem; }
.section-link svg { width: 1rem; height: 1rem; }

/* ============================================
   SERVICES (Home)
   ============================================ */
.services-grid {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 640px)  { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }

.service-card {
  height: 100%;
    display: flex;              /* ADD THIS */
  flex-direction: column;     /* ADD THIS */
  padding: 2.25rem 1.875rem;
  background:
    radial-gradient(ellipse 88% 48% at 50% 0%,   rgba(160,58,255,0.30) 0%, rgba(160,58,255,0.13) 30%, transparent 65%),
    radial-gradient(ellipse 88% 48% at 50% 100%, rgba(160,58,255,0.26) 0%, rgba(160,58,255,0.10) 30%, transparent 65%),
    linear-gradient(160deg, rgba(72,10,130,0.72) 0%, rgba(20,0,40,0.93) 40%, rgba(5,0,18,0.97) 70%, rgba(30,5,60,0.88) 100%);
  border: 1px solid rgba(195,125,255,0.18);
  border-radius: 1.75rem;
  backdrop-filter: blur(26px) brightness(0.86) saturate(1.80);
  -webkit-backdrop-filter: blur(26px) brightness(0.86) saturate(1.80);
  box-shadow: 0 22px 65px rgba(0,0,0,0.72), 0 0 0 1px rgba(255,255,255,0.07);
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(32px) scale(0.96);
  transform-origin: center bottom;
  transition: box-shadow 0.45s ease, border-color 0.4s ease;
  will-change: transform, opacity, filter;
}
/* Face-sweep diagonal shimmer */
.service-card::before {
  content: "";
  position: absolute;
  top: -80%; left: -52%;
  width: 36%; height: 265%;
  background: linear-gradient(105deg,
    transparent 28%,
    rgba(255,255,255,0.025) 40%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.025) 60%,
    transparent 72%);
  filter: blur(5px);
  animation: nsFaceSweep 5.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
/* Top trace shimmer */
.service-card::after {
  content: "";
  position: absolute;
  top: 0; left: -62%;
  width: 62%; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(200,140,255,0) 18%,
    rgba(200,140,255,0.88) 50%,
    rgba(255,255,255,0.96) 60%,
    rgba(200,140,255,0.88) 70%,
    rgba(200,140,255,0) 85%,
    transparent 100%);
  filter: blur(0.5px);
  animation: nsTraceTop 4.2s linear infinite;
  pointer-events: none;
  z-index: 3;
}
.service-card.in-view {
  animation: nsVelocitySlam 1s cubic-bezier(0.22,1,0.36,1) both;
  animation-delay: var(--motion-delay, 0ms);
}
.service-icon {
  display: inline-flex;
  height: 3.375rem;
  width: 3.375rem;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(160,58,255,0.36) 100%);
  border: 1px solid rgba(200,140,255,0.50);
  box-shadow: 0 0 28px rgba(160,58,255,0.52), 0 0 60px rgba(160,58,255,0.18), inset 0 1px 0 rgba(255,255,255,0.22);
  color: #e8c5ff;
  margin-bottom: 1.5rem;
  backdrop-filter: blur(8px);
  position: relative;
  z-index: 2;
  transition: transform 0.4s var(--ease-out), filter 0.35s ease, box-shadow 0.35s ease;
}
.service-icon svg { width: 1.5rem; height: 1.5rem; }
.service-card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #f0ebff;
  position: relative;
  z-index: 2;
  letter-spacing: -0.02em;
}
.service-card p {
  margin-top: 0.6rem;
  font-size: 0.84rem;
  line-height: 1.8;
  color: rgba(210,190,255,0.60);
  position: relative;
  z-index: 2;
}
.service-foot {
  margin-top: auto;   /* CHANGE FROM 1.5rem TO auto */
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 9999px;
  border: 1px solid rgba(195,125,255,0.30);
  background: linear-gradient(135deg, rgba(30,6,60,0.85), rgba(10,0,25,0.92));
  box-shadow: 0 0 18px rgba(160,58,255,0.20), inset 0 1px 0 rgba(255,255,255,0.08);
  position: relative;
  z-index: 2;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover .service-foot {
  border-color: rgba(210,148,255,0.55);
  box-shadow: 0 0 28px rgba(160,58,255,0.40), inset 0 1px 0 rgba(255,255,255,0.12);
}
.service-from {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #d4aaff;
  font-weight: 600;
  text-shadow: 0 0 12px rgba(160,58,255,0.65);
}
.service-arrow {
  display: inline-flex;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(160,58,255,0.25) 0%, rgba(255,255,255,0.05) 100%);
  border: 1px solid rgba(195,125,255,0.40);
  color: #d4aaff;
  transition: background 0.38s ease, border-color 0.38s ease, transform 0.38s var(--ease-out);
  flex-shrink: 0;
}
.service-card:hover .service-arrow {
  background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(160,58,255,0.88) 100%);
  border-color: rgba(255,255,255,0.52);
  transform: translateX(3px);
}
.service-arrow svg { width: 1rem; height: 1rem; }

/* ============================================
   WHY CHOOSE
   ============================================ */
.why-grid {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  gap: 3rem;
}
@media (min-width: 1024px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }

.why-h2 {
  margin-top: 0.75rem;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
}
@media (min-width: 1024px) { .why-h2 { font-size: 3rem; } }
.why-p {
  margin-top: 1.25rem;
  max-width: 30rem;
  color: rgba(255, 255, 255, 0.55);
}
.why-stats-row {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.why-stat {
  padding: 1.25rem;
  background:
    radial-gradient(ellipse 82% 52% at 50% 0%, rgba(145,52,242,0.22) 0%, rgba(145,52,242,0.08) 30%, transparent 58%),
    linear-gradient(158deg, rgba(52,7,106,0.70) 0%, rgba(14,0,28,0.93) 42%, rgba(3,0,13,0.97) 70%, rgba(20,3,44,0.87) 100%);
  border: 1px solid rgba(183,113,250,0.14);
  border-radius: 1.375rem;
  backdrop-filter: blur(20px) brightness(0.88) saturate(1.62);
  -webkit-backdrop-filter: blur(20px) brightness(0.88) saturate(1.62);
  box-shadow: none;
  position: relative;
  overflow: hidden;
}
.why-stat::before {
  content: "";
  position: absolute;
  top: 0; left: -62%;
  width: 62%; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(183,113,250,0.78) 50%,
    rgba(255,255,255,0.88) 60%,
    rgba(183,113,250,0.78) 70%,
    transparent 100%);
  filter: blur(0.5px);
  animation: nsTraceTop 6.5s linear infinite;
  pointer-events: none;
  z-index: 2;
}
.why-stat-num {
  font-size: 1.875rem;
  font-weight: 700;
  color: #fff;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.why-stat-lbl { margin-top: 0.25rem; font-size: 0.75rem; color: rgba(255, 255, 255, 0.6); }

.why-features { display: grid; gap: 0.75rem; }
.why-feat {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  background:
    radial-gradient(ellipse 72% 50% at 50% 0%, rgba(138,46,238,0.18) 0%, rgba(138,46,238,0.06) 32%, transparent 58%),
    linear-gradient(158deg, rgba(48,6,100,0.68) 0%, rgba(12,0,26,0.92) 42%, rgba(3,0,12,0.97) 70%, rgba(18,2,42,0.86) 100%);
  border: 1px solid rgba(178,108,248,0.13);
  border-radius: 1.375rem;
  backdrop-filter: blur(18px) brightness(0.88) saturate(1.58);
  -webkit-backdrop-filter: blur(18px) brightness(0.88) saturate(1.58);
  box-shadow: none;
  overflow: hidden;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.34,1.4,0.64,1);
}
.why-feat::before {
  content: "";
  position: absolute;
  top: 0; left: -62%;
  width: 62%; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(178,108,248,0.75) 50%,
    rgba(255,255,255,0.86) 60%,
    rgba(178,108,248,0.75) 70%,
    transparent 100%);
  filter: blur(0.5px);
  animation: nsTraceTop 7s linear infinite;
  pointer-events: none;
  z-index: 2;
}
.why-feat:hover {
  border-color: rgba(196,126,255,0.26);
  transform: translateY(-3px);
  box-shadow:
    0 0 62px rgba(145,52,242,0.38),
    0 16px 48px rgba(0,0,0,0.60),
    0 0 0 1px rgba(196,126,255,0.22),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 32px 50px -26px rgba(145,52,242,0.22);
}
.why-feat-icon {
  display: flex;
  height: 2.75rem;
  width: 2.75rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.875rem;
  background: linear-gradient(135deg, rgba(255,255,255,0.11) 0%, rgba(138,46,238,0.30) 100%);
  border: 1px solid rgba(178,108,248,0.42);
  box-shadow: 0 0 18px rgba(138,46,238,0.42), inset 0 1px 0 rgba(255,255,255,0.16);
  backdrop-filter: blur(6px);
  position: relative;
  z-index: 2;
}
.why-feat-icon svg { width: 1.25rem; height: 1.25rem; color: #fff; }
.why-feat h3 { font-weight: 600; color: #fff; font-size: 1rem; }
.why-feat p { font-size: 0.875rem; color: rgba(255, 255, 255, 0.55); }
.why-feat-check {
  margin-left: auto;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--brand-pink);
  opacity: 0;
  transition: opacity 0.25s, transform 0.3s var(--ease-out);
  flex-shrink: 0;
  align-self: center;
  transform: scale(0.7);
}
.why-feat:hover .why-feat-check { opacity: 1; transform: scale(1); }

/* ============================================
   PORTFOLIO PREVIEW (Home — Coverflow)
   ============================================ */
.coverflow-wrap {
  position: relative;
  z-index: 1;
  padding: 1rem 0 3rem;
  overflow: hidden;
}
.coverflow-track {
  position: relative;
  display: block;
  perspective: 1200px;
  min-height: 380px;
  width: 100%;
}
.coverflow-slide {
  position: absolute;
  top: 0;
  left: 50%;
  width: 460px;
  max-width: 85vw;
  transform: translateX(-50%);
  transition: transform 0.7s var(--ease-out), opacity 0.7s var(--ease-out);
  transform-style: preserve-3d;
  opacity: 0;
  pointer-events: none;
}
.coverflow-slide.cf-active {
  transform: translateX(-50%) rotateY(0) translateZ(0);
  opacity: 1;
  z-index: 3;
  pointer-events: auto;
}
.coverflow-slide.cf-prev {
  transform: translateX(calc(-50% - 320px)) rotateY(28deg) translateZ(-120px) scale(0.9);
  opacity: 0.55;
  z-index: 2;
}
.coverflow-slide.cf-next {
  transform: translateX(calc(-50% + 320px)) rotateY(-28deg) translateZ(-120px) scale(0.9);
  opacity: 0.55;
  z-index: 2;
}
.coverflow-slide.cf-far {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scale(0.7);
}
@media (max-width: 768px) {
  .coverflow-slide.cf-prev {
    transform: translateX(calc(-50% - 200px)) rotateY(22deg) translateZ(-100px) scale(0.85);
    opacity: 0.4;
  }
  .coverflow-slide.cf-next {
    transform: translateX(calc(-50% + 200px)) rotateY(-22deg) translateZ(-100px) scale(0.85);
    opacity: 0.4;
  }
}

.portfolio-card {
  height: 340px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 75% 42% at 50% 0%,   rgba(175,68,255,0.28) 0%, rgba(175,68,255,0.11) 32%, transparent 62%),
    radial-gradient(ellipse 75% 42% at 50% 100%, rgba(175,68,255,0.24) 0%, rgba(175,68,255,0.09) 32%, transparent 62%),
    linear-gradient(150deg, rgba(65,8,125,0.70) 0%, rgba(18,0,38,0.93) 42%, rgba(4,0,16,0.97) 70%, rgba(28,4,58,0.87) 100%);
  border: 1px solid rgba(200,130,255,0.17);
  border-radius: 1.75rem;
  backdrop-filter: blur(26px) brightness(0.86) saturate(1.75);
  -webkit-backdrop-filter: blur(26px) brightness(0.86) saturate(1.75);
  box-shadow: none;
  position: relative;
  overflow: hidden;
}
/* Right-edge trace — unique variation for portfolio cards */
.portfolio-card::before {
  content: "";
  position: absolute;
  right: 0; top: -62%;
  width: 2px; height: 62%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(200,130,255,0) 18%,
    rgba(200,130,255,0.88) 50%,
    rgba(255,255,255,0.95) 60%,
    rgba(200,130,255,0.88) 70%,
    rgba(200,130,255,0) 85%,
    transparent 100%);
  filter: blur(0.5px);
  animation: nsTraceRight 4.4s linear infinite;
  pointer-events: none;
  z-index: 3;
}
/* Inner bloom */
.portfolio-card::after {
  content: "";
  position: absolute;
  top: -25px; left: -6%; right: -6%;
  height: 145px;
  background: radial-gradient(ellipse 80% 100% at 50% 0%,
    rgba(175,68,255,0.26) 0%,
    rgba(175,68,255,0.11) 26%,
    rgba(205,135,255,0.05) 52%,
    transparent 76%);
  filter: blur(18px);
  pointer-events: none;
  z-index: 0;
  animation: nsCardBloom 4.4s ease-in-out infinite;
}
.pc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pc-cat {
  border-radius: 9999px;
  border: 1px solid rgba(139, 92, 246, 0.25);
  background: rgba(109, 40, 217, 0.18);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}
.pc-live {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
}
.pc-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.7);
  animation: pulseDot 1.6s ease-in-out infinite;
}
.pc-vis {
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 80px;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  border: none;
}
.pc-title { font-size: 1.5rem; font-weight: 700; color: #fff; }
.pc-blurb { margin-top: 0.5rem; font-size: 0.875rem; color: rgba(255, 255, 255, 0.55); }
.pc-cta {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand-pink);
}
.pc-cta svg { width: 1rem; height: 1rem; }

.coverflow-controls {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.coverflow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  border: none;
  cursor: pointer;
  transition: all 0.3s;
  padding: 0;
}
.coverflow-dot.active {
  width: 28px;
  border-radius: 4px;
  background: var(--gradient-brand-2);
}

/* ============================================
   TESTIMONIALS SLIDER
   ============================================ */
.testimonial-slider {
  position: relative;
  z-index: 1;
  padding-bottom: 3.5rem;
  overflow: hidden;
}
.testimonial-track {
  display: flex;
  gap: 1.5rem;
  transition: transform 0.6s var(--ease-out);
}
.testimonial-slide { flex: 0 0 100%; }
@media (min-width: 640px)  { .testimonial-slide { flex: 0 0 calc(71.4% - 1.5rem); } }
@media (min-width: 1024px) { .testimonial-slide { flex: 0 0 calc(31% - 1.5rem); } }

.testimonial-card {
  height: 100%;
  padding: 1.25rem;
  background:
    radial-gradient(ellipse 55% 80% at 0% 50%,   rgba(148,52,245,0.22) 0%, rgba(148,52,245,0.08) 40%, transparent 68%),
    radial-gradient(ellipse 75% 42% at 50% 0%,   rgba(155,58,248,0.20) 0%, rgba(155,58,248,0.08) 32%, transparent 62%),
    linear-gradient(155deg, rgba(58,8,115,0.70) 0%, rgba(16,0,34,0.93) 42%, rgba(4,0,14,0.97) 70%, rgba(24,3,52,0.87) 100%);
  border: 1px solid rgba(188,118,252,0.16);
  border-radius: 1.625rem;
  backdrop-filter: blur(24px) brightness(0.88) saturate(1.70);
  -webkit-backdrop-filter: blur(24px) brightness(0.88) saturate(1.70);
  box-shadow: none;
  position: relative;
  overflow: hidden;
}
/* Left-edge trace — unique for testimonials */
.testimonial-card::before {
  content: "";
  position: absolute;
  left: 0; bottom: -62%;
  width: 2px; height: 62%;
  background: linear-gradient(0deg,
    transparent 0%,
    rgba(188,118,252,0) 18%,
    rgba(188,118,252,0.88) 50%,
    rgba(255,255,255,0.94) 60%,
    rgba(188,118,252,0.88) 70%,
    rgba(188,118,252,0) 85%,
    transparent 100%);
  filter: blur(0.5px);
  animation: nsTraceLeft 4.8s linear infinite;
  pointer-events: none;
  z-index: 3;
}
/* Side glow bloom */
.testimonial-card::after {
  content: "";
  position: absolute;
  top: -5%; bottom: -5%;
  left: -28px;
  width: 145px;
  background: radial-gradient(ellipse 100% 80% at 0% 50%,
    rgba(148,52,245,0.24) 0%,
    rgba(148,52,245,0.10) 30%,
    rgba(188,118,252,0.04) 58%,
    transparent 78%);
  filter: blur(18px);
  pointer-events: none;
  z-index: 0;
  animation: nsCardBloom 4.8s ease-in-out infinite;
}
.testimonial-quote svg { width: 1.75rem; height: 1.75rem; color: var(--brand-pink); }
.testimonial-body {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}
.testimonial-foot {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.testimonial-name { font-weight: 600; color: #fff; }
.testimonial-role { font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); margin-top: 0.125rem; }
.testimonial-stars { display: flex; gap: 0.125rem; }
.testimonial-stars svg { width: 0.875rem; height: 0.875rem; fill: var(--brand-pink); color: var(--brand-pink); }

.swiper-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.swiper-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  cursor: pointer;
  transition: all 0.3s;
  padding: 0;
}
.swiper-dot.active {
  width: 28px;
  border-radius: 4px;
  background: var(--gradient-brand-2);
}

/* ============================================
   PRICING
   ============================================ */
.pricing-grid {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 1024px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } }
.pricing-card {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 1.5rem;
  padding: 2rem;
  opacity: 0;
  transform: perspective(1400px) translateY(120px) rotateX(-35deg) scale(0.78);
  transform-origin: center bottom;
  transition: opacity 1.2s var(--ease-out-smooth),
              transform 1.2s var(--ease-out-smooth),
              box-shadow 0.3s ease,
              filter 0.3s ease;
}
.pricing-card.in-view {
  opacity: 1;
  transform: perspective(1400px) translateY(0) rotateX(0) scale(1);
}
/* Non-highlight (default) styling */
.pricing-card:not(.highlight) {
  background:
background: linear-gradient(160deg, rgba(18,18,28,0.97) 0%, rgba(10,10,18,0.99) 100%);  border: 1px solid rgba(193,122,254,0.17);
  backdrop-filter: blur(26px) brightness(0.87) saturate(1.78);
  -webkit-backdrop-filter: blur(26px) brightness(0.87) saturate(1.78);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.68), 0 0 0 1px rgba(255,255,255,0.06);
    0 0 115px rgba(158,56,252,0.08),
    0 20px 60px rgba(0,0,0,0.68),
    0 0 0 1px rgba(198,128,255,0.14),
    inset 0 1px 0 rgba(255,255,255,0.11),
    inset 0 44px 68px -36px rgba(158,56,252,0.20),
    inset 0 -44px 68px -36px rgba(158,56,252,0.13);
}
/* Top trace for pricing cards */
.pricing-card:not(.highlight)::before {
  content: "";
  position: absolute;
  top: 0; left: -62%;
  width: 62%; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(198,128,255,0) 18%,
    rgba(198,128,255,0.88) 50%,
    rgba(255,255,255,0.95) 60%,
    rgba(198,128,255,0.88) 70%,
    rgba(198,128,255,0) 85%,
    transparent 100%);
  filter: blur(0.5px);
  animation: nsTraceTop 4.6s linear infinite;
  pointer-events: none;
  z-index: 3;
}
/* Bottom trace — extra layer for pricing */
.pricing-card:not(.highlight)::after {
  content: "";
  position: absolute;
  bottom: 0; right: -62%;
  width: 62%; height: 2px;
  background: linear-gradient(270deg,
    transparent 0%,
    rgba(198,128,255,0) 18%,
    rgba(198,128,255,0.75) 50%,
    rgba(255,255,255,0.82) 60%,
    rgba(198,128,255,0.75) 70%,
    rgba(198,128,255,0) 85%,
    transparent 100%);
  filter: blur(0.5px);
  animation: nsTraceBottom 4.6s linear infinite;
  animation-delay: 2.3s;
  pointer-events: none;
  z-index: 3;
}
.pricing-card:not(.highlight):hover {
  border-color: rgba(210,148,255,0.34);
  box-shadow:
    0 0 92px rgba(165,62,255,0.58),
    0 0 185px rgba(165,62,255,0.15),
    0 28px 72px rgba(0,0,0,0.72),
    0 0 0 1px rgba(215,152,255,0.32),
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 52px 78px -38px rgba(165,62,255,0.28),
    inset 0 -52px 78px -38px rgba(165,62,255,0.20);
}
.pricing-card:not(.highlight) h3              { color: #fff; }
.pricing-card:not(.highlight) .pricing-blurb  { color: rgba(255, 255, 255, 0.55); }
.pricing-card:not(.highlight) .pricing-amount { color: #fff; }
.pricing-card:not(.highlight) .pricing-cycle  { color: rgba(255, 255, 255, 0.45); }
.pricing-card:not(.highlight) .pricing-divider { background: rgba(255, 255, 255, 0.08); }
.pricing-card:not(.highlight) .pricing-feature { color: rgba(255, 255, 255, 0.8); }
.pricing-card:not(.highlight) .pricing-feature svg { color: var(--brand-pink); }
.pricing-card:not(.highlight) .pricing-cta {
  background: rgba(109, 40, 217, 0.25);
  color: #fff;
  border: 1px solid rgba(139, 92, 246, 0.3);
}
.pricing-card:not(.highlight) .pricing-cta:hover { background: rgba(109, 40, 217, 0.45); }

.pricing-card.highlight {
  background: var(--gradient-brand-2);
  box-shadow: 0 10px 40px -10px rgba(168, 85, 247, 0.5);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.4s cubic-bezier(0.34,1.4,0.64,1), box-shadow 0.4s ease;
}
.pricing-card.highlight:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 0 28px rgba(168,85,247,0.28);
}
.pricing-badge {
  position: absolute;
  right: 1.5rem;
  top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.4);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
}
.pricing-badge svg { width: 0.75rem; height: 0.75rem; fill: currentColor; }
.pricing-card h3 { font-size: 1.5rem; font-weight: 700; }
.pricing-card.highlight h3 { color: #fff; }

.pricing-blurb { margin-top: 0.5rem; font-size: 0.875rem; }
.pricing-card.highlight .pricing-blurb { color: rgba(255, 255, 255, 0.85); }

.pricing-price { margin-top: 1.5rem; display: flex; align-items: baseline; gap: 0.5rem; }
.pricing-amount { font-size: 3rem; font-weight: 700; }
.pricing-card.highlight .pricing-amount { color: #fff; }
.pricing-cycle { font-size: 0.875rem; }
.pricing-card.highlight .pricing-cycle { color: rgba(255, 255, 255, 0.7); }

.pricing-divider { margin: 1.5rem 0; height: 1px; }
.pricing-card.highlight .pricing-divider { background: rgba(255, 255, 255, 0.25); }

.pricing-features { display: flex; flex-direction: column; gap: 0.75rem; }
.pricing-feature {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
}
.pricing-feature svg { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.125rem; }
.pricing-card.highlight .pricing-feature { color: rgba(255, 255, 255, 0.95); }
.pricing-card.highlight .pricing-feature svg { color: #fff; }

.pricing-cta {
  margin-top: 2rem;
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  transition: all 0.3s;
}
.pricing-cta svg { width: 1rem; height: 1rem; }
.pricing-card.highlight .pricing-cta {
  background: linear-gradient(135deg, #ec4899 0%, #d946ef 50%, #9333ea 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 8px 24px rgba(217, 70, 239, 0.45),
    0 0 32px rgba(236, 72, 153, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pricing-card.highlight .pricing-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.7s ease;
}
.pricing-card.highlight .pricing-cta:hover {
  background: linear-gradient(135deg, #f472b6 0%, #e879f9 50%, #a855f7 100%);
  transform: translateY(-2px);
  box-shadow:
    0 12px 32px rgba(217, 70, 239, 0.6),
    0 0 40px rgba(236, 72, 153, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.pricing-card.highlight .pricing-cta:hover::before {
  transform: translateX(100%);
}

/* Pricing card highlight: pulse ring (subtle) */
@keyframes nsHighlightPulse {
  0%, 100% { box-shadow: 0 10px 40px -10px rgba(168, 85, 247, 0.5),
                          0 0 0 0  rgba(168, 85, 247, 0.5); }
  50%      { box-shadow: 0 10px 40px -10px rgba(168, 85, 247, 0.8),
                          0 0 0 14px rgba(168, 85, 247, 0); }
}
.pricing-card.highlight.in-view {
  animation: nsHighlightPulse 3s ease-in-out infinite;
}

/* ============================================
   CTA BANNER
   ============================================ */
.cta-banner {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  padding: 3rem;
  text-align: center;
}
@media (min-width: 1024px) { .cta-banner { padding: 5rem; } }
.cta-banner-grid {
  position: absolute;
  inset: 0;
  opacity: 0.3;
  pointer-events: none;
}
.cta-glow-l, .cta-glow-r {
  position: absolute;
  top: 50%;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  filter: blur(100px);
  transform: translateY(-50%);
  opacity: 0.7;
  transition: opacity 0.5s;
  pointer-events: none;
}
.cta-glow-l { left: -5rem; background: rgba(130, 25, 240, 0.5); }
.cta-glow-r { right: -5rem; background: rgba(170, 50, 255, 0.5); }
.cta-banner:hover .cta-glow-l,
.cta-banner:hover .cta-glow-r { opacity: 1; }

.cta-banner h2 {
  position: relative;
  font-size: 2.25rem;
  font-weight: 700;
  color: #fff;
}
@media (min-width: 1024px) { .cta-banner h2 { font-size: 3.75rem; } }
.cta-banner-sub {
  position: relative;
  margin: 1.25rem auto 0;
  max-width: 36rem;
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.65);
}
.cta-banner-ctas {
  position: relative;
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.compare-cta-foot { display: flex; justify-content: center; margin-top: 2.5rem; }

/* ============================================
   FOOTER
   ============================================ */
.footer {
  position: relative;
  margin-top: 0;
  border-top: none;
  background: radial-gradient(ellipse 60% 50% at 15% 10%, rgba(130, 25, 240, 0.3) 0%, transparent 60%),
              radial-gradient(ellipse 55% 50% at 88% 85%, rgba(150, 35, 250, 0.25) 0%, transparent 58%),
              #050208;
}
.footer-line {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: min(85%, 72rem);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(109, 40, 217, 0.15) 10%,
    rgba(139, 92, 246, 0.5) 30%,
    rgba(168, 85, 247, 0.8) 50%,
    rgba(139, 92, 246, 0.5) 70%,
    rgba(109, 40, 217, 0.15) 90%,
    transparent 100%
  );
}
.footer-grid {
  margin-inline: auto;
  display: grid;
  max-width: 80rem;
  gap: 3rem;
  padding: 4rem 1.5rem;
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: repeat(4, 1fr); padding: 4rem 2.5rem; }
}
.footer-tagline {
  margin-top: 1rem;
  max-width: 18rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}
.footer-socials {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.footer-social {
  display: inline-flex;
  height: 2.25rem;
  width: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.3s;
}
.footer-social:hover {
  border-color: rgba(168, 85, 247, 0.5);
  color: #fff;
  transform: translateY(-2px);
}
.footer-social svg { width: 1rem; height: 1rem; }

.footer-h4 {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: rgba(255, 255, 255, 0.55);
}
.footer-list { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.footer-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s;
  position: relative;
}
.footer-list a::after,
.footer-contact-list a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--gradient-brand-2);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}
.footer-list a:hover { color: #fff; }
.footer-list a:hover::after,
.footer-contact-list a:hover::after { transform: scaleX(1); }

.footer-contact-list {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
}
.footer-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.footer-contact-list svg { width: 1rem; height: 1rem; margin-top: 0.125rem; flex-shrink: 0; color: var(--brand-pink); }
.footer-contact-list a { position: relative; transition: color 0.2s; }
.footer-contact-list a:hover { color: #fff; }
.footer-emerald-icon { color: #10b981 !important; }

.footer-cta-card {
  padding: 1.5rem;
  background:
    radial-gradient(ellipse 82% 52% at 50% 0%, rgba(140,48,240,0.20) 0%, rgba(140,48,240,0.07) 32%, transparent 58%),
    linear-gradient(158deg, rgba(50,6,105,0.70) 0%, rgba(13,0,28,0.93) 42%, rgba(3,0,12,0.97) 70%, rgba(19,2,44,0.86) 100%);
  border: 1px solid rgba(180,112,250,0.14);
  border-radius: 1.5rem;
  backdrop-filter: blur(20px) brightness(0.88) saturate(1.62);
  -webkit-backdrop-filter: blur(20px) brightness(0.88) saturate(1.62);
box-shadow: none;
  position: relative;
  overflow: hidden;
}
.footer-cta-card::before {
  content: "";
  position: absolute;
  top: 0; left: -62%;
  width: 62%; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(180,112,250,0.76) 50%,
    rgba(255,255,255,0.86) 60%,
    rgba(180,112,250,0.76) 70%,
    transparent 100%);
  filter: blur(0.5px);
  animation: nsTraceTop 6.8s linear infinite;
  pointer-events: none;
  z-index: 2;
}
.footer-cta-card h4 { font-size: 0.875rem; font-weight: 600; color: #fff; }
.footer-cta-card p {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
}
.footer-cta-card a {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  background: var(--gradient-brand-2);
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  box-shadow: var(--shadow-brand);
  transition: transform 0.3s;
}
.footer-cta-card a:hover { transform: translateY(-2px); }
.footer-cta-card svg { width: 1rem; height: 1rem; }

.footer-base { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.footer-base-inner {
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  max-width: 80rem;
  padding: 1.5rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}
@media (min-width: 640px)  { .footer-base-inner { flex-direction: row; } }
@media (min-width: 1024px) { .footer-base-inner { padding: 1.5rem 2.5rem; } }

/* ============================================
   WHATSAPP FAB
   ============================================ */
.wa-fab {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 40;
  display: inline-flex;
  height: 3.5rem;
  width: 3.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #10b981;
  color: #fff;
  box-shadow: 0 10px 30px -5px rgba(16, 185, 129, 0.6);
  animation: pulseRing 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite, fabIn 0.5s ease-out 1.6s backwards;
  transition: transform 0.2s;
}
@media (min-width: 640px) { .wa-fab { bottom: 1.75rem; right: 1.75rem; } }
.wa-fab:hover { transform: scale(1.05); }
.wa-fab:active { transform: scale(0.95); }
.wa-fab svg { width: 1.5rem; height: 1.5rem; }
@keyframes fabIn {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

/* ============================================
   PAGE HERO (About / Services / Portfolio / Pricing / Contact)
   ============================================ */
.page-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 100vh;
  margin-top: -6rem;
  background: var(--bg-black);
}
.page-hero-inner {
  position: relative;
  z-index: 2;
  margin-inline: auto;
  max-width: 64rem;
  padding: 10rem 1.5rem 5rem;
  text-align: center;
}
@media (min-width: 1024px) { .page-hero-inner { padding: 12rem 2.5rem 6rem; } }

.page-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--brand-pink);
  opacity: 0;
  transform: translateY(20px);
  animation: pageHeroIn 0.9s var(--ease-out) 0.15s forwards;
}
.page-h1 {
  margin-top: 1rem;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  opacity: 0;
  transform: translateY(36px);
  animation: pageHeroIn 1s var(--ease-out) 0.3s forwards;
}
@media (min-width: 1024px) { .page-h1 { font-size: 4.5rem; } }
.page-sub {
  margin: 1.5rem auto 0;
  max-width: 36rem;
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.85);
  opacity: 0;
  transform: translateY(20px);
  animation: pageHeroIn 0.9s var(--ease-out) 0.5s forwards;
}
@keyframes pageHeroIn { to { opacity: 1; transform: translateY(0); } }

/* If page-h1 has [data-splitting], the splitting per-char animation handles the entrance */
.page-h1[data-splitting] {
  animation: none;
  opacity: 1;
  transform: none;
}

/* Splitting char animation */
.split-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.7em) rotate(8deg) scale(0.92);
  filter: blur(6px);
  animation: splitIn 0.85s var(--ease-out) forwards;
}
@keyframes splitIn {
  to { opacity: 1; transform: translateY(0) rotate(0) scale(1); filter: blur(0); }
}

/* Mobile: page hero subhead readability */
@media (max-width: 1023px) {
  .page-hero-inner .page-h1 {
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
    font-size: 2.23rem;
    @media (max-width: 1023px) {
  .contact-title {
    text-align: center;
    padding: 0 1rem;
  }
  .contact-title .line-1,
  .contact-title .line-2 {
    display: block;
    white-space: nowrap;
  }
  .contact-title .line-1 {
    font-size: 8.5vw;
  }
  .contact-title .line-2 {
    font-size: 8.5vw;
  }
}
  }
  .page-hero-inner .page-sub {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
  }
}

/* Page-specific hero backgrounds */
.about-hero-layers,
.svc-hero-layers,
.port-hero-layers,
.price-hero-layers,
.contact-hero-layers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.about-hero-layers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.about-hero-layer {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.about-hero-base {
  background-image: url('images/about-hero-base.png');
  opacity: 0.95;
}
.about-hero-blob {
  background-image: url('images/about-hero-blob.png');
  opacity: 0;
  transform: translateX(90px);
  animation: aboutBlobIn 1s ease-out 0.2s forwards;
}
.about-hero-people {
  background-image: url('images/about-hero-people.png');
  opacity: 0;
  transform: translateX(-90px);
  animation: aboutPeopleIn 1s ease-out 0.6s forwards;
}
@keyframes aboutBlobIn {
  0% { opacity: 0; transform: translateX(90px); }
  100% { opacity: 0.95; transform: translateX(0); }
}
@keyframes aboutPeopleIn {
  0% { opacity: 0; transform: translateX(-90px); }
  100% { opacity: 0.95; transform: translateX(0); }
}

/* Subtle dark overlay for page heroes to keep text legible */
.page-hero::after {
  display: none;
}

/* Mobile background swaps */
.about-mobile-bg,
.services-mobile-bg,
.portfolio-mobile-bg,
.pricing-mobile-bg,
.contact-mobile-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  display: none;
  overflow: hidden;
}

@media (max-width: 768px) {
  .about-desktop-bg,
  .services-desktop-bg,
  .portfolio-desktop-bg,
  .pricing-desktop-bg,
  .contact-desktop-bg { display: none; }
  .about-mobile-bg,
  .services-mobile-bg,
  .portfolio-mobile-bg,
  .pricing-mobile-bg,
  .contact-mobile-bg { display: block; }
}
/* Desktop hero gradient — home + all page heroes (769px and up only) */
@media (min-width: 769px) {
  .hero,
  .page-hero {
    background:
      radial-gradient(ellipse 40% 45% at 0% 0%, rgba(160, 0, 120, 0.7) 0%, rgba(130, 0, 100, 0.3) 40%, transparent 70%),
      radial-gradient(ellipse 85% 70% at 12% 8%, rgba(88, 0, 180, 0.85) 0%, rgba(60, 0, 140, 0.4) 35%, transparent 70%),
      radial-gradient(ellipse 40% 45% at 100% 100%, rgba(140, 0, 180, 0.75) 0%, rgba(100, 0, 140, 0.35) 40%, transparent 70%),
      radial-gradient(ellipse 80% 65% at 88% 92%, rgba(75, 0, 160, 0.75) 0%, rgba(50, 0, 120, 0.35) 40%, transparent 70%),
      #050208 !important;
  }
}

/* ============================================
   ABOUT PAGE
   ============================================ */
.about-story-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3.5rem;
  margin-inline: auto;
  max-width: 80rem;
  padding-inline: 1.5rem;
}
@media (min-width: 1024px) {
  .about-story-grid { grid-template-columns: repeat(2, 1fr); padding-inline: 2.5rem; }
}
.about-story-text h2 {
  margin-top: 0.75rem;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}
@media (min-width: 1024px) { .about-story-text h2 { font-size: 3rem; } }
.about-story-paragraphs {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: rgba(255, 255, 255, 0.7);
}

.chart-card {
  padding: 1.5rem;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%,   rgba(60,185,130,0.14) 0%, rgba(60,185,130,0.05) 36%, transparent 65%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(140,50,240,0.18) 0%, rgba(140,50,240,0.07) 32%, transparent 62%),
    linear-gradient(160deg, rgba(45,8,95,0.72) 0%, rgba(14,0,32,0.93) 42%, rgba(3,0,14,0.97) 70%, rgba(22,3,48,0.87) 100%);
  border: 1px solid rgba(180,115,252,0.16);
  border-radius: 1.625rem;
  backdrop-filter: blur(24px) brightness(0.87) saturate(1.68);
  -webkit-backdrop-filter: blur(24px) brightness(0.87) saturate(1.68);
  box-shadow: 0 0 18px rgba(168,85,247,0.15);
  position: relative;
  overflow: hidden;
}
/* Top trace — greenish-purple blend for data feel */
.chart-card::before {
  content: "";
  position: absolute;
  top: 0; left: -62%;
  width: 62%; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(110,220,175,0) 15%,
    rgba(180,115,252,0.82) 48%,
    rgba(255,255,255,0.92) 58%,
    rgba(180,115,252,0.82) 68%,
    rgba(110,220,175,0) 88%,
    transparent 100%);
  filter: blur(0.5px);
  animation: nsTraceTop 5.8s linear infinite;
  pointer-events: none;
  z-index: 3;
}
.chart-card::after {
  content: "";
  position: absolute;
  top: -24px; left: -5%; right: -5%;
  height: 140px;
  background: radial-gradient(ellipse 78% 100% at 50% 0%,
    rgba(60,185,130,0.12) 0%,
    rgba(140,50,240,0.10) 30%,
    rgba(180,115,252,0.04) 55%,
    transparent 75%);
  filter: blur(18px);
  pointer-events: none;
  z-index: 0;
}
.chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.chart-head h3 { font-size: 1rem; font-weight: 600; color: #fff; }
.chart-head p { font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); }
.chart-badge {
  border-radius: 9999px;
  border: 1px solid rgba(52, 211, 153, 0.3);
  background: rgba(16, 185, 129, 0.1);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #6ee7b7;
}
.chart-svg-wrap { height: 18rem; width: 100%; position: relative; }
.chart-svg { width: 100%; height: 100%; }

.values-grid {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 1024px) { .values-grid { grid-template-columns: repeat(3, 1fr); } }
.value-card {
  padding: 1.875rem;
  background:
    radial-gradient(ellipse 65% 55% at 0% 0%,     rgba(152,54,248,0.26) 0%, rgba(152,54,248,0.10) 35%, transparent 65%),
    radial-gradient(ellipse 80% 44% at 50% 100%,  rgba(152,54,248,0.22) 0%, rgba(152,54,248,0.08) 30%, transparent 60%),
    linear-gradient(155deg, rgba(60,8,118,0.70) 0%, rgba(17,0,36,0.93) 42%, rgba(4,0,15,0.97) 70%, rgba(25,3,54,0.87) 100%);
  border: 1px solid rgba(190,120,254,0.16);
  border-radius: 1.625rem;
  backdrop-filter: blur(24px) brightness(0.87) saturate(1.72);
  -webkit-backdrop-filter: blur(24px) brightness(0.87) saturate(1.72);
  box-shadow: none;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: perspective(1000px) translateY(70px) rotateY(-15deg) scale(0.88);
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
  will-change: transform, opacity, filter;
}
/* Top-left corner bloom — diagonal variation */
.value-card::before {
  content: "";
  position: absolute;
  top: 0; left: -62%;
  width: 62%; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(190,120,254,0) 18%,
    rgba(190,120,254,0.84) 50%,
    rgba(255,255,255,0.92) 60%,
    rgba(190,120,254,0.84) 70%,
    rgba(190,120,254,0) 85%,
    transparent 100%);
  filter: blur(0.5px);
  animation: nsTraceTop 5.0s linear infinite;
  pointer-events: none;
  z-index: 3;
}
/* Corner atmospheric bloom */
.value-card::after {
  content: "";
  position: absolute;
  top: -30px; left: -35px;
  width: 180px; height: 180px;
  background: radial-gradient(ellipse at 0% 0%,
    rgba(152,54,248,0.28) 0%,
    rgba(152,54,248,0.12) 30%,
    rgba(190,120,254,0.05) 55%,
    transparent 75%);
  filter: blur(22px);
  pointer-events: none;
  z-index: 0;
  animation: nsCardBloom 5.0s ease-in-out infinite;
}
.value-card.in-view {
  animation: nsRotate3d 1.2s cubic-bezier(0.22,1,0.36,1) both;
  animation-delay: var(--motion-delay, 0ms);
}
.value-icon-wrap {
  display: inline-flex;
  height: 3.25rem;
  width: 3.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(255,255,255,0.13) 0%, rgba(152,54,248,0.34) 100%);
  border: 1px solid rgba(190,120,254,0.48);
  box-shadow: 0 0 24px rgba(152,54,248,0.48), 0 0 55px rgba(152,54,248,0.16), inset 0 1px 0 rgba(255,255,255,0.20);
  margin-bottom: 1.375rem;
  backdrop-filter: blur(7px);
  position: relative;
  z-index: 2;
  transition: transform 0.4s var(--ease-out), filter 0.35s ease, box-shadow 0.35s ease;
}
.value-icon-wrap svg { width: 1.5rem; height: 1.5rem; color: #c4b5fd; }
.value-card h3 { font-size: 1.25rem; font-weight: 600; color: #fff; }
.value-card p { margin-top: 0.5rem; font-size: 0.875rem; color: rgba(255, 255, 255, 0.65); }

.mission-card {
  border-radius: 32px;
  border: 1px solid rgba(139, 92, 246, 0.25);
  background: radial-gradient(ellipse 65% 55% at 25% 15%, rgba(140, 30, 255, 0.3) 0%, transparent 60%),
              radial-gradient(ellipse 55% 50% at 80% 85%, rgba(160, 40, 255, 0.2) 0%, transparent 55%),
              linear-gradient(150deg, #16102a 0%, #0a0812 50%, #100c22 100%);
  padding: 2.5rem;
}
@media (min-width: 1024px) { .mission-card { padding: 4rem; } }
.mission-grid {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 1024px) { .mission-grid { grid-template-columns: repeat(2, 1fr); gap: 4rem; } }
.mission-text h2 {
  margin-top: 0.75rem;
  font-size: 1.875rem;
  font-weight: 700;
  color: #fff;
}
@media (min-width: 1024px) { .mission-text h2 { font-size: 2.25rem; } }
.mission-text p {
  margin-top: 1rem;
  color: rgba(255, 255, 255, 0.65);
}
.mission-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.mission-stat {
  border-radius: 1.375rem;
  border: 1px solid rgba(185,115,252,0.15);
  background:
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(145,50,242,0.24) 0%, rgba(145,50,242,0.09) 32%, transparent 60%),
    linear-gradient(158deg, rgba(52,7,108,0.70) 0%, rgba(14,0,30,0.93) 42%, rgba(3,0,13,0.97) 70%, rgba(20,3,46,0.87) 100%);
  padding: 1.25rem;
  backdrop-filter: blur(20px) brightness(0.88) saturate(1.65);
  -webkit-backdrop-filter: blur(20px) brightness(0.88) saturate(1.65);
  box-shadow: none;
  position: relative;
  overflow: hidden;
}
.mission-stat::before {
  content: "";
  position: absolute;
  top: 0; left: -62%;
  width: 62%; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(185,115,252,0.82) 50%,
    rgba(255,255,255,0.90) 60%,
    rgba(185,115,252,0.82) 70%,
    transparent 100%);
  filter: blur(0.5px);
  animation: nsTraceTop 6.2s linear infinite;
  pointer-events: none;
  z-index: 2;
}
.mission-stat svg { width: 1.25rem; height: 1.25rem; color: #c4b5fd; }
.mission-stat-num {
  margin-top: 0.5rem;
  font-size: 1.875rem;
  font-weight: 700;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mission-stat-lbl { font-size: 0.75rem; color: rgba(255, 255, 255, 0.55); }

.team-grid {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 640px)  { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }
.team-card {
  position: relative;
  height: 20rem;
  overflow: hidden;
  border-radius: 1.5rem;
  cursor: pointer;
  opacity: 0;
  transform: perspective(1200px) translateY(90px) rotateY(20deg) scale(0.82);
  transition: box-shadow 0.4s ease;
  will-change: transform, opacity;
}
.team-card.in-view {
  animation: nsOrbitalSpin 1.4s cubic-bezier(0.22,1,0.36,1) both;
  animation-delay: var(--motion-delay, 0ms);
}
.team-card:hover {
  box-shadow: none;
}
.team-bg {
  position: absolute;
  inset: 0;
  transition: transform 0.8s var(--ease-out);
}
.team-card:hover .team-bg { transform: scale(1.1); }
.team-bg-1 { background: linear-gradient(135deg, #d946ef, #9333ea); }
.team-bg-2 { background: linear-gradient(135deg, #9333ea, #4338ca); }
.team-bg-3 { background: linear-gradient(135deg, #ec4899, #d946ef); }
.team-bg-4 { background: linear-gradient(135deg, #8b5cf6, #c026d3); }
.team-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.25), transparent 50%);
}
.team-info {
  position: absolute;
  inset-inline: 1rem;
  bottom: 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.45);
  padding: 1rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 2;
}
.team-info-name { font-size: 1.125rem; font-weight: 600; color: #fff; }
.team-info-role { font-size: 0.75rem; color: rgba(255, 255, 255, 0.7); }
.team-hover-tint {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.3s;
}
.team-card:hover .team-hover-tint { background: rgba(0, 0, 0, 0.2); }

/* ============================================
   SERVICES PAGE
   ============================================ */
.svc-rows {
  position: relative;
  z-index: 1;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 6rem;
  max-width: 80rem;
  padding-inline: 1.5rem;
}
@media (min-width: 1024px) { .svc-rows { padding-inline: 2.5rem; } }
.svc-row {
  display: grid;
  align-items: center;
  gap: 2.5rem;
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}
.svc-row.in-view { opacity: 1; transform: translateY(0); }
@media (min-width: 1024px) { .svc-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .svc-row.reverse > div:first-child { order: 2; } }

.svc-num {
  margin-bottom: 1rem;
  display: inline-flex;
  height: 3rem;
  width: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  background: var(--gradient-brand-2);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  box-shadow: var(--shadow-brand);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.8s, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.svc-row.in-view .svc-num { animation: nsShockwave 1.1s cubic-bezier(0.22,1,0.36,1) both; animation-delay: 0.1s; }
.svc-tag {
  margin-bottom: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(139, 92, 246, 0.22);
  background: rgba(139, 92, 246, 0.06);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #c4b5fd;
}
.svc-tag svg { width: 0.875rem; height: 0.875rem; }

.svc-row h2 {
  font-size: 1.875rem;
  font-weight: 700;
  color: #fff;
}
@media (min-width: 1024px) { .svc-row h2 { font-size: 2.25rem; } }
.svc-row .svc-desc {
  margin-top: 1rem;
  max-width: 32rem;
  color: rgba(255, 255, 255, 0.65);
}
.svc-deliverables {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.svc-li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.6s, transform 0.6s;
}
.svc-row.in-view .svc-li { opacity: 1; transform: translateX(0); }
.svc-row.in-view .svc-li:nth-child(1) { transition-delay: 0.20s; }
.svc-row.in-view .svc-li:nth-child(2) { transition-delay: 0.26s; }
.svc-row.in-view .svc-li:nth-child(3) { transition-delay: 0.32s; }
.svc-row.in-view .svc-li:nth-child(4) { transition-delay: 0.38s; }
.svc-li-bullet {
  display: inline-flex;
  height: 1.25rem;
  width: 1.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(109, 40, 217, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.3);
}
.svc-li-bullet svg { width: 0.75rem; height: 0.75rem; color: #c4b5fd; }

.svc-foot {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.svc-from { font-size: 0.875rem; color: rgba(255, 255, 255, 0.5); }

.svc-card {
  position: relative;
  overflow: hidden;
  padding: 2.25rem 2rem;
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%,   rgba(168,62,255,0.34) 0%, rgba(168,62,255,0.14) 30%, transparent 64%),
    radial-gradient(ellipse 90% 50% at 50% 100%, rgba(168,62,255,0.28) 0%, rgba(168,62,255,0.10) 30%, transparent 62%),
    linear-gradient(160deg, rgba(75,10,135,0.74) 0%, rgba(22,0,44,0.93) 40%, rgba(5,0,19,0.97) 70%, rgba(32,5,64,0.88) 100%);
  border: 1px solid rgba(200,132,255,0.20);
  border-radius: 1.875rem;
  backdrop-filter: blur(28px) brightness(0.85) saturate(1.82);
  -webkit-backdrop-filter: blur(28px) brightness(0.85) saturate(1.82);
  box-shadow: none;
  opacity: 0;
  will-change: transform, opacity, filter;
  transition: box-shadow 0.45s ease, border-color 0.4s ease;
}
/* Top trace — strong version for hero services card */
.svc-card::before {
  content: "";
  position: absolute;
  top: 0; left: -62%;
  width: 62%; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(205,136,255,0) 15%,
    rgba(205,136,255,0.90) 50%,
    rgba(255,255,255,0.98) 60%,
    rgba(205,136,255,0.90) 70%,
    rgba(205,136,255,0) 88%,
    transparent 100%);
  filter: blur(0.5px);
  animation: nsTraceTop 3.9s linear infinite;
  pointer-events: none;
  z-index: 3;
}
/* Face sweep */
.svc-card::after {
  content: "";
  position: absolute;
  top: -80%; left: -52%;
  width: 36%; height: 265%;
  background: linear-gradient(105deg,
    transparent 28%,
    rgba(255,255,255,0.022) 40%,
    rgba(255,255,255,0.075) 50%,
    rgba(255,255,255,0.022) 60%,
    transparent 72%);
  filter: blur(5px);
  animation: nsFaceSweep 4.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
.svc-row.in-view .svc-card { animation: nsTitanSlide 1.2s cubic-bezier(0.22,1,0.36,1) both; }
.svc-row.reverse .svc-card { transform: translateX(-80px); }
.svc-row.reverse.in-view .svc-card { animation: nsTitanSlideLeft 1.2s cubic-bezier(0.22,1,0.36,1) both; }
.svc-card-glow {
  position: absolute;
  right: -2.5rem;
  top: -2.5rem;
  width: 14rem;
  height: 14rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168,62,255,0.85) 0%, rgba(140,40,240,0.50) 50%, transparent 75%);
  opacity: 0.30;
  filter: blur(55px);
  pointer-events: none;
  animation: nsCardBloom 5s ease-in-out infinite;
}
.svc-card-icon {
  width: 3.5rem;
  height: 3.5rem;
  color: #c4b5fd;
  position: relative;
  transition: transform 0.4s var(--ease-out), filter 0.3s ease;
}
.svc-card-icon svg { width: 100%; height: 100%; }
.svc-card-grid {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
.svc-card-tile {
  height: 3.5rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.35), rgba(139, 92, 246, 0.15), rgba(18, 14, 30, 0.5));
  border: 1px solid rgba(139, 92, 246, 0.1);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.4s, transform 0.4s;
}
.svc-row.in-view .svc-card-tile { opacity: 1; transform: scale(1); }
.svc-row.in-view .svc-card-tile:nth-child(1) { transition-delay: 0.05s; }
.svc-row.in-view .svc-card-tile:nth-child(2) { transition-delay: 0.10s; }
.svc-row.in-view .svc-card-tile:nth-child(3) { transition-delay: 0.15s; }
.svc-row.in-view .svc-card-tile:nth-child(4) { transition-delay: 0.20s; }
.svc-row.in-view .svc-card-tile:nth-child(5) { transition-delay: 0.25s; }
.svc-row.in-view .svc-card-tile:nth-child(6) { transition-delay: 0.30s; }
.svc-row.in-view .svc-card-tile:nth-child(7) { transition-delay: 0.35s; }
.svc-row.in-view .svc-card-tile:nth-child(8) { transition-delay: 0.40s; }
.svc-row.in-view .svc-card-tile:nth-child(9) { transition-delay: 0.45s; }

.svc-card-foot {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(145deg, rgba(10, 8, 18, 0.8), rgba(6, 4, 12, 0.9));
  padding: 0.75rem 1rem;
}
.svc-card-foot-lbl { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.5); }
.svc-card-foot-val { font-size: 0.875rem; font-weight: 600; color: #fff; }

/* ============================================
   PORTFOLIO PAGE
   ============================================ */
.portfolio-filter-wrap {
  position: relative;
  z-index: 1;
  margin-inline: auto;
  max-width: 80rem;
  padding-inline: 1.5rem;
}
@media (min-width: 1024px) { .portfolio-filter-wrap { padding-inline: 2.5rem; } }

.portfolio-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(145deg, rgba(18, 14, 30, 0.6), rgba(8, 6, 12, 0.7));
  padding: 0.5rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.filter-btn {
  position: relative;
  border-radius: 0.75rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s, transform 0.3s var(--ease-out);
  background: none;
  border: none;
  cursor: pointer;
  z-index: 0;
  overflow: hidden;
}
.filter-btn:hover { color: #fff; transform: translateY(-2px); }
.filter-btn.active { color: #fff; }
.filter-btn .filter-pill {
  position: absolute;
  inset: 0;
  border-radius: 0.75rem;
  background: var(--gradient-brand-2);
  z-index: 0;
  opacity: 0;
  transition: opacity 0.3s;
}
.filter-btn.active .filter-pill { opacity: 1; }
.filter-btn span:not(.filter-pill) { position: relative; z-index: 1; }
.filter-btn.active {
  animation: nsFilterPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes nsFilterPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.portfolio-grid-wrap {
  position: relative;
  z-index: 1;
  margin-inline: auto;
  max-width: 80rem;
  padding-inline: 1.5rem;
}
@media (min-width: 1024px) { .portfolio-grid-wrap { padding-inline: 2.5rem; } }
.portfolio-grid {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 1024px) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .portfolio-grid { grid-template-columns: repeat(3, 1fr); } }

.proj-card {
  position: relative;
  height: 420px;  overflow: hidden;
  border-radius: 1.5rem;
  padding: 4px;
  opacity: 0;
  transform: perspective(1200px) translateY(100px) rotateX(-20deg) scale(0.85);
  transform-origin: center bottom;
  transition: box-shadow 0.4s ease;
  will-change: transform, opacity, filter;
}
.proj-card.in-view {
  animation: nsLiquidDrift 1.55s ease-out both;
  animation-delay: var(--motion-delay, 0ms);
}
.proj-card.in-view:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 0 28px rgba(168,85,247,0.28);
}
.proj-card.hidden-proj { display: none; }
.proj-bg-1 { background: linear-gradient(135deg, #d946ef, #9333ea, #4338ca); }
.proj-bg-2 { background: linear-gradient(135deg, #fbbf24, #f43f5e, #c026d3); }
.proj-bg-3 { background: linear-gradient(135deg, #2dd4bf, #06b6d4, #9333ea); }
.proj-bg-4 { background: linear-gradient(135deg, #334155, #a21caf, #581c87); }
.proj-bg-5 { background: linear-gradient(135deg, #3b82f6, #06b6d4, #10b981); }
.proj-bg-6 { background: linear-gradient(135deg, #fb923c, #ec4899, #c026d3); }

.proj-inner {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 22px;
  background: linear-gradient(150deg, rgba(18, 14, 30, 0.92), rgba(10, 10, 14, 0.92));
  padding: 1.75rem;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.proj-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.proj-cat {
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
}
.proj-client { font-size: 0.75rem; color: rgba(255, 255, 255, 0.4); }
.proj-vis {
  margin: 1.5rem 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.proj-vis-grid {
  display: grid;
  width: 100%;
  max-width: 16rem;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
.proj-vis-tile {
  aspect-ratio: 1 / 1;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.proj-card h3 { font-size: 1.5rem; font-weight: 700; color: #fff; }
.proj-blurb { margin-top: 0.5rem; font-size: 0.875rem; color: rgba(255, 255, 255, 0.6); }
.proj-tags { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.proj-tag {
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
}
.proj-overlay {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background: linear-gradient(to top, var(--bg-black), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.proj-card:hover .proj-overlay { opacity: 1; }
.proj-cta-link {
  pointer-events: auto;
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  background: var(--gradient-brand-2);
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  box-shadow: var(--shadow-brand);
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 0.3s, transform 0.3s var(--ease-out);
  z-index: 4;
}
.proj-card:hover .proj-cta-link { opacity: 1; transform: translate(-50%, 0); }
.proj-cta-link svg { width: 1rem; height: 1rem; }

/* Mobile portfolio carousel */
.portfolio-mobile {
  display: block;
  padding-block: 2rem;
  overflow: hidden;
}
.portfolio-mobile { display: none; }
.portfolio-desktop { display: block; }

.portfolio-track-wrap {
  position: relative;
  overflow: hidden;
}
.portfolio-track {
  display: flex;
  transition: transform 0.55s var(--ease-out);
  will-change: transform;
}
.portfolio-mobile .portfolio-track { gap: 1.25rem; padding: 0 1.5rem; }
.portfolio-mobile .proj-card-wrap { flex: 0 0 90%; }

/* ============================================
   PRICES PAGE
   ============================================ */
.pricing-tabs {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(145deg, rgba(18, 14, 30, 0.6), rgba(8, 6, 12, 0.7));
  padding: 0.25rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin-bottom: 2.5rem;
}
.pricing-tabs-wrap { display: flex; justify-content: center; }
.pricing-tab {
  border-radius: 9999px;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  transition: all 0.3s;
  background: none;
  border: none;
  cursor: pointer;
}
.pricing-tab:hover { color: #fff; }
.pricing-tab.active {
  background: var(--gradient-brand-2);
  color: #fff;
}

.compare-wrap {
  position: relative;
  z-index: 1;
  margin-inline: auto;
  max-width: 72rem;
  padding-inline: 1.5rem;
}
@media (min-width: 1024px) { .compare-wrap { padding-inline: 2.5rem; } }
.compare-head { margin-bottom: 2.5rem; text-align: center; }
.compare-table-shell {
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(145deg, #12101e 0%, #0a0812 100%);
}
.compare-table-scroll { overflow-x: auto; }
.compare-table {
  width: 100%;
  text-align: left;
  font-size: 0.875rem;
  border-collapse: collapse;
}
.compare-table thead { background: linear-gradient(145deg, rgba(18, 14, 30, 0.6), rgba(10, 8, 18, 0.5)); }
.compare-table th {
  padding: 1rem 1.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}
.compare-table th:not(:first-child) { text-align: center; }
.compare-table tbody tr {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.2s;
}
.compare-table tbody tr:hover { background: rgba(168, 85, 247, 0.06); }
.compare-table td {
  padding: 1rem 1.5rem;
  color: rgba(255, 255, 255, 0.85);
}
.compare-table td:not(:first-child) { text-align: center; }
.compare-check {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--brand-pink);
}
.compare-minus {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  color: rgba(255, 255, 255, 0.3);
}

.custom-quote-card {
  margin-top: 3rem;
  border-radius: 2rem;
  border: 1px solid rgba(198,128,255,0.22);
  background:
    radial-gradient(ellipse 72% 55% at 50% 0%,   rgba(165,62,255,0.36) 0%, rgba(165,62,255,0.15) 30%, transparent 60%),
    radial-gradient(ellipse 68% 52% at 50% 100%, rgba(165,62,255,0.30) 0%, rgba(165,62,255,0.12) 30%, transparent 60%),
    radial-gradient(ellipse 58% 48% at 50% 50%,  rgba(148,50,245,0.16) 0%, transparent 65%),
    linear-gradient(160deg, rgba(78,11,140,0.76) 0%, rgba(22,0,44,0.93) 40%, rgba(5,0,19,0.97) 70%, rgba(34,5,66,0.88) 100%);
  backdrop-filter: blur(30px) brightness(0.84) saturate(1.85);
  -webkit-backdrop-filter: blur(30px) brightness(0.84) saturate(1.85);
  box-shadow: none;
  padding: 2.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Top trace */
.custom-quote-card::before {
  content: "";
  position: absolute;
  top: 0; left: -62%;
  width: 62%; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(205,136,255,0) 14%,
    rgba(205,136,255,0.92) 50%,
    rgba(255,255,255,0.98) 60%,
    rgba(205,136,255,0.92) 70%,
    rgba(205,136,255,0) 88%,
    transparent 100%);
  filter: blur(0.5px);
  animation: nsTraceTop 3.8s linear infinite;
  pointer-events: none;
  z-index: 3;
}
/* Bottom trace — bidirectional for featured card */
.custom-quote-card::after {
  content: "";
  position: absolute;
  bottom: 0; right: -62%;
  width: 62%; height: 2px;
  background: linear-gradient(270deg,
    transparent 0%,
    rgba(205,136,255,0) 14%,
    rgba(205,136,255,0.85) 50%,
    rgba(255,255,255,0.92) 60%,
    rgba(205,136,255,0.85) 70%,
    rgba(205,136,255,0) 88%,
    transparent 100%);
  filter: blur(0.5px);
  animation: nsTraceBottom 3.8s linear infinite;
  animation-delay: 1.9s;
  pointer-events: none;
  z-index: 3;
}
.custom-quote-card svg { margin-inline: auto; width: 2rem; height: 2rem; color: #c4b5fd; }
.custom-quote-card h3 {
  margin-top: 0.75rem;
  font-size: 1.875rem;
  font-weight: 700;
  color: #fff;
}
.custom-quote-card p {
  margin: 0.75rem auto 0;
  max-width: 30rem;
  color: rgba(255, 255, 255, 0.6);
}
.custom-quote-card a { margin-top: 1.5rem; }

/* ============================================
   CONTACT PAGE
   ============================================ */
.contact-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2.5rem;
  margin-inline: auto;
  max-width: 80rem;
  padding-inline: 1.5rem;
}
@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: 2fr 3fr; padding-inline: 2.5rem; }
}
.contact-info-col { display: flex; flex-direction: column; gap: 1rem; }
.contact-info-card {
  padding: 1.75rem;
  background:
    radial-gradient(ellipse 80% 48% at 50% 0%,   rgba(148,52,245,0.22) 0%, rgba(148,52,245,0.08) 32%, transparent 60%),
    linear-gradient(158deg, rgba(56,8,112,0.70) 0%, rgba(16,0,32,0.93) 42%, rgba(4,0,14,0.97) 70%, rgba(24,3,50,0.87) 100%);
  border: 1px solid rgba(185,115,252,0.15);
  border-radius: 1.625rem;
  backdrop-filter: blur(24px) brightness(0.88) saturate(1.68);
  -webkit-backdrop-filter: blur(24px) brightness(0.88) saturate(1.68);
  box-shadow: none;
  position: relative;
  overflow: hidden;
}
.contact-info-card::before {
  content: "";
  position: absolute;
  top: 0; left: -62%;
  width: 62%; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(185,115,252,0) 18%,
    rgba(185,115,252,0.82) 50%,
    rgba(255,255,255,0.92) 60%,
    rgba(185,115,252,0.82) 70%,
    rgba(185,115,252,0) 85%,
    transparent 100%);
  filter: blur(0.5px);
  animation: nsTraceTop 5.4s linear infinite;
  pointer-events: none;
  z-index: 2;
}
.contact-info-card h2 { font-size: 1.25rem; font-weight: 600; color: #fff; }
.contact-info-card-sub {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.55);
}
.contact-rows {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contact-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  transition: background 0.25s;
}
a.contact-row:hover { background: rgba(168, 85, 247, 0.06); }
.contact-row-icon {
  display: flex;
  height: 2.25rem;
  width: 2.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(109, 40, 217, 0.1));
  border: 1px solid rgba(139, 92, 246, 0.22);
}
.contact-row-icon svg { width: 1rem; height: 1rem; color: #c4b5fd; }
.contact-row-lbl {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.45);
}
.contact-row-val { margin-top: 0.125rem; font-size: 0.875rem; color: rgba(255, 255, 255, 0.85); }

.contact-wa-btn {
  margin-top: 1.5rem;
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  background: #10b981;
  padding: 0.875rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 15px 50px -15px rgba(16, 185, 129, 0.8);
  transition: transform 0.3s;
}
.contact-wa-btn:hover { transform: translateY(-2px); }
.contact-wa-btn svg { width: 1.25rem; height: 1.25rem; }

.contact-map {
  overflow: hidden;
  border-radius: 1.5rem;
  border: 1px solid rgba(139, 92, 246, 0.18);
}
.contact-map iframe {
  border: 0;
  width: 100%;
  height: 280px;
  display: block;
  filter: invert(0.92) hue-rotate(180deg) saturate(0.7);
}

.form-card {
  padding: 1.75rem;
  background:
    radial-gradient(ellipse 88% 50% at 50% 0%,   rgba(162,60,255,0.26) 0%, rgba(162,60,255,0.10) 32%, transparent 62%),
    radial-gradient(ellipse 88% 50% at 50% 100%, rgba(162,60,255,0.22) 0%, rgba(162,60,255,0.08) 32%, transparent 62%),
    linear-gradient(160deg, rgba(68,9,128,0.72) 0%, rgba(19,0,39,0.93) 40%, rgba(4,0,17,0.97) 70%, rgba(28,4,58,0.88) 100%);
  border: 1px solid rgba(196,126,255,0.17);
  border-radius: 1.75rem;
  backdrop-filter: blur(28px) brightness(0.86) saturate(1.80);
  -webkit-backdrop-filter: blur(28px) brightness(0.86) saturate(1.80);
  box-shadow: none;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
  animation: formIn 0.5s ease-out 0.1s forwards;
}
.form-card::before {
  content: "";
  position: absolute;
  top: 0; left: -62%;
  width: 62%; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(200,130,255,0) 15%,
    rgba(200,130,255,0.88) 50%,
    rgba(255,255,255,0.96) 60%,
    rgba(200,130,255,0.88) 70%,
    rgba(200,130,255,0) 88%,
    transparent 100%);
  filter: blur(0.5px);
  animation: nsTraceTop 4.0s linear infinite;
  pointer-events: none;
  z-index: 2;
}
.form-card::after {
  content: "";
  position: absolute;
  top: -28px; left: -6%; right: -6%;
  height: 155px;
  background: radial-gradient(ellipse 84% 100% at 50% 0%,
    rgba(162,60,255,0.28) 0%,
    rgba(162,60,255,0.12) 28%,
    rgba(200,130,255,0.05) 55%,
    transparent 78%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
  animation: nsCardBloom 4.0s ease-in-out infinite;
}
@keyframes formIn { to { opacity: 1; transform: translateY(0); } }
@media (min-width: 1024px) { .form-card { padding: 2.25rem; } }
.form-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--brand-pink);
  margin-bottom: 1.25rem;
}
.form-eyebrow svg { width: 1rem; height: 1rem; }
.form-eyebrow span {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.25em;
}
.form-grid {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 640px) { .form-grid { grid-template-columns: repeat(2, 1fr); } }

.form-field { display: block; }
.form-label {
  margin-bottom: 0.375rem;
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.55);
}
.form-input, .form-textarea, .form-select {
  width: 100%;
  background: rgba(8, 6, 14, 0.6);
  border: 1px solid rgba(139, 92, 246, 0.2);
  color: #fff;
  font-family: inherit;
  font-size: 0.875rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  outline: none;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: rgba(139, 92, 246, 0.6);
  background: rgba(14, 10, 22, 0.8);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15);
}
.form-input::placeholder, .form-textarea::placeholder { color: rgba(255, 255, 255, 0.4); }
.form-textarea { min-height: 8rem; resize: vertical; }
.form-select option { background: #111; color: #fff; }
.form-error {
  margin-top: 0.25rem;
  display: block;
  font-size: 0.75rem;
  color: #fb7185;
  min-height: 1rem;
}
.form-submit {
  margin-top: 0.5rem;
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  background: var(--gradient-brand-2);
  padding: 1rem 1.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 15px 50px -15px rgba(109, 40, 217, 0.8);
  transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.form-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 20px 60px -15px rgba(168, 85, 247, 0.9);
}
.form-submit:disabled { cursor: not-allowed; opacity: 0.7; }
.form-submit svg { width: 1rem; height: 1rem; }
.form-spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.form-foot-note {
  margin-top: 0.5rem;
  text-align: center;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
}

/* Toast */
.toast-shell {
  position: fixed;
  top: 1.5rem;
  left: 50%;
  z-index: 200;
  transform: translateX(-50%);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: linear-gradient(145deg, rgba(18, 14, 30, 0.96), rgba(10, 8, 16, 0.96));
  border: 1px solid rgba(139, 92, 246, 0.3);
  color: #fff;
  border-radius: 0.75rem;
  padding: 0.875rem 1.125rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  max-width: 22rem;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.3s, transform 0.3s var(--ease-out);
  pointer-events: auto;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
  color: #34d399;
}
.toast-title { font-weight: 600; font-size: 0.875rem; }
.toast-desc { margin-top: 0.125rem; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.7); }

/* ============================================
   AOS-like reveal
   ============================================ */
[data-aos] {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1),
              transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay: var(--aos-delay, 0s);
}
[data-aos="fade-right"] { transform: translateX(-30px); }
[data-aos="fade-left"]  { transform: translateX(30px); }
[data-aos="fade-up"]    { transform: translateY(30px); }
[data-aos="fade-down"]  { transform: translateY(-30px); }
[data-aos="zoom-in"]    { transform: scale(0.85); }
[data-aos].aos-show {
  opacity: 1;
  transform: translateX(0) translateY(0) scale(1);
}

/* ============================================
   TILT
   ============================================ */
.tilt-wrap {
  transform-style: preserve-3d;
  transform: perspective(1200px) rotateX(0) rotateY(0) scale(1);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ============================================
   CONFETTI CANVAS
   ============================================ */
#confetti-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

/* ============================================
   SCROLL PROGRESS BAR
   ============================================ */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #faf9fc, #8b5cf6, #6d28d9);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 9998;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.65);
  will-change: transform;
}

/* ============================================
   CLICK RIPPLE
   ============================================ */
.ui-ripple {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.15) 40%,
    rgba(255, 255, 255, 0) 70%
  );
  pointer-events: none;
  transform: scale(0);
  opacity: 0.9;
  animation: nsRipple 0.7s ease-out forwards;
  z-index: 3;
}
@keyframes nsRipple {
  to { transform: scale(1); opacity: 0; }
}

/* ============================================
   SUBTLE CARD HOVER ENHANCEMENT
   (consolidated; replaces multiple conflicting layers)
   ============================================ */
.stat-card:hover,
.service-card:hover,
.value-card:hover,
.pricing-card:not(.highlight):hover,
.svc-card:hover {
  box-shadow: 0 0 28px rgba(168,85,247,0.28);
  border-color: rgba(215,148,255,0.34);
  transform: translateY(-10px) scale(1.02);
  filter: brightness(1.04);
}

/* Icon micro-interaction — JSX reference lift + glow */
.service-card:hover .service-icon,
.value-card:hover .value-icon-wrap,
.svc-card:hover .svc-card-icon {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 0 32px rgba(168,62,255,0.80), 0 0 65px rgba(168,62,255,0.28), inset 0 1px 0 rgba(255,255,255,0.25);
  filter: drop-shadow(0 6px 16px rgba(168,62,255,0.65));
}

/* ============================================
   GROWTH CHART ANIMATION — Draw from left to right
   ============================================ */

.chart-line-animated {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: chartDraw 2.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-play-state: paused;
}

.chart-area-animated {
  clip-path: inset(100% 0% 0% 0%);
  opacity: 1;
  animation: chartAreaRise 2.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-play-state: paused;
}

.chart-dot-animated {
  opacity: 0;
  transform-origin: center;
  transform: scale(0);
  animation: chartDotPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-play-state: paused;
}

/* When chart is visible — start everything */
.chart-visible .chart-line-animated {
  animation-play-state: running;
}
.chart-visible .chart-area-animated {
  animation-play-state: running;
}
.chart-visible .chart-dot-animated {
  animation-play-state: running;
}

@keyframes chartDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes chartAreaRise {
  from { clip-path: inset(100% 0% 0% 0%); }
  to   { clip-path: inset(0%   0% 0% 0%); }
}

@keyframes chartDotPop {
  to { opacity: 1; transform: scale(1); }
}

/* Glow pulse on line after drawing finishes */
@keyframes chartLineGlow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(168,85,247,0.4)); }
  50%       { filter: drop-shadow(0 0 12px rgba(168,85,247,0.9)); }
}
.chart-visible .chart-line-animated {
  animation: 
    chartDraw 2.4s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    chartLineGlow 2.5s ease-in-out 2.6s infinite;
}

/* ============================================
   REDUCED MOTION (single, comprehensive block)
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .tilt-wrap { transform: none !important; }
  .btn-primary::after,
  .btn-emerald::after,
  .nav-cta::after,
  .form-submit::after { display: none; }
  #scroll-progress { display: none; }
  .hero-badge::after { display: none; }
}

/* ============================================================
   CINEMATIC MOTION SYSTEM — from animation demo
   ============================================================ */

/* ── Keyframes ── */
@keyframes nsVelocitySlam {
  0%   { opacity: 0; transform: translateY(240px) scale(0.72) rotate(-6deg); filter: blur(18px); }
  65%  { opacity: 1; transform: translateY(-8px) scale(1.025); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes nsFloatingRise {
  from { opacity: 0; transform: translateY(80px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes nsQuantumFlip {
  from { opacity: 0; transform: perspective(1200px) rotateY(90deg) scale(0.75); }
  to   { opacity: 1; transform: perspective(1200px) rotateY(0deg) scale(1); }
}
@keyframes nsLiquidDrift {
  0%   { opacity: 0; transform: translateY(120px) rotate(10deg) scale(0.82); }
  50%  { opacity: 1; transform: translateY(-14px) rotate(-3deg) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
}
@keyframes nsRotate3d {
  from { opacity: 0; transform: perspective(1000px) rotateX(14deg) rotateY(-8deg) translateY(50px); }
  to   { opacity: 1; transform: perspective(1000px) rotateX(0) rotateY(0) translateY(0); }
}
@keyframes nsPhantomFade {
  from { opacity: 0; transform: scale(1.18) translateY(75px); filter: blur(36px); }
  to   { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
@keyframes nsNeonDrift {
  from { opacity: 0; transform: translateX(-145px) translateY(35px); }
  to   { opacity: 1; transform: translateX(0) translateY(0); }
}
@keyframes nsNeonDriftRight {
  from { opacity: 0; transform: translateX(145px) translateY(35px); }
  to   { opacity: 1; transform: translateX(0) translateY(0); }
}
@keyframes nsTitanSlide {
  from { opacity: 0; transform: translateX(380px) skewX(-10deg); }
  to   { opacity: 1; transform: translateX(0) skewX(0); }
}
@keyframes nsTitanSlideLeft {
  from { opacity: 0; transform: translateX(-380px) skewX(10deg); }
  to   { opacity: 1; transform: translateX(0) skewX(0); }
}
@keyframes nsScalePop {
  0%   { opacity: 0; transform: scale(0.72); }
  68%  { transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes nsClipReveal {
  from { clip-path: inset(0 100% 0 0); opacity: 0; }
  to   { clip-path: inset(0 0% 0 0); opacity: 1; }
}
@keyframes nsBlurReveal {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes nsHologram {
  0%   { opacity: 0; transform: translateY(48px); }
  50%  { opacity: 0.6; transform: translateY(-8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes nsZeroGravity {
  0%   { opacity: 0; transform: translateY(190px) rotate(16deg) scale(0.62); }
  50%  { opacity: 1; transform: translateY(-18px) rotate(-5deg) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
@keyframes nsInfernoRise {
  from { opacity: 0; transform: translateY(170px) scale(0.82); filter: saturate(2.5) blur(16px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: saturate(1) blur(0); }
}
@keyframes nsElastic {
  0%   { opacity: 0; transform: scale(0.62) translateY(55px); }
  58%  { opacity: 1; transform: scale(1.08) translateY(-8px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes nsShockwave {
  0%   { opacity: 0; transform: scale(0.22); }
  68%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes nsOrbitalSpin {
  0%   { opacity: 0; transform: rotate(-22deg) translateX(-160px) scale(0.52); }
  68%  { opacity: 1; transform: rotate(4deg) translateX(8px) scale(1.03); }
  100% { opacity: 1; transform: rotate(0) translateX(0) scale(1); }
}
@keyframes nsFadeUp {
  from { opacity: 0; transform: translateY(38px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes nsHyperZoom {
  from { opacity: 0; transform: perspective(2000px) translateZ(-1100px) scale(0.22); filter: blur(28px); }
  to   { opacity: 1; transform: perspective(2000px) translateZ(0) scale(1); filter: blur(0); }
}
@keyframes nsExitFade {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(28px) scale(0.97); }
}

/* ── [data-motion] system — for non-card elements ── */
[data-motion] {
  opacity: 0;
  will-change: transform, opacity, filter;
}
[data-motion="velocitySlam"].motion-in  { animation: nsVelocitySlam 1s    cubic-bezier(0.22,1,0.36,1)    both; animation-delay: var(--motion-delay,0ms); }
[data-motion="floatingRise"].motion-in  { animation: nsFloatingRise 1.35s ease-out                         both; animation-delay: var(--motion-delay,0ms); }
[data-motion="phantomFade"].motion-in   { animation: nsPhantomFade  1.5s  ease-out                         both; animation-delay: var(--motion-delay,0ms); }
[data-motion="neonDrift"].motion-in     { animation: nsNeonDrift    1.3s  ease-out                         both; animation-delay: var(--motion-delay,0ms); }
[data-motion="neonDriftRight"].motion-in{ animation: nsNeonDriftRight 1.3s ease-out                        both; animation-delay: var(--motion-delay,0ms); }
[data-motion="scalePop"].motion-in      { animation: nsScalePop     0.9s  cubic-bezier(0.22,1,0.36,1)    both; animation-delay: var(--motion-delay,0ms); }
[data-motion="clipReveal"].motion-in    { animation: nsClipReveal   1.1s  cubic-bezier(0.22,1,0.36,1)    both; animation-delay: var(--motion-delay,0ms); }
[data-motion="blurReveal"].motion-in    { animation: nsBlurReveal   1.1s  cubic-bezier(0.22,1,0.36,1)    both; animation-delay: var(--motion-delay,0ms); }
[data-motion="hologram"].motion-in      { animation: nsHologram     1.3s  steps(10)                       both; animation-delay: var(--motion-delay,0ms); }
[data-motion="zeroGravity"].motion-in   { animation: nsZeroGravity  1.8s  ease-out                         both; animation-delay: var(--motion-delay,0ms); }
[data-motion="infernoRise"].motion-in   { animation: nsInfernoRise  1.2s  ease-out                         both; animation-delay: var(--motion-delay,0ms); }
[data-motion="elastic"].motion-in       { animation: nsElastic      1s    cubic-bezier(0.175,0.885,0.32,1.275) both; animation-delay: var(--motion-delay,0ms); }
[data-motion="hyperZoom"].motion-in     { animation: nsHyperZoom    1.1s  cubic-bezier(0.22,1,0.36,1)    both; animation-delay: var(--motion-delay,0ms); }
[data-motion="fadeUp"].motion-in        { animation: nsFadeUp       1s    cubic-bezier(0.22,1,0.36,1)    both; animation-delay: var(--motion-delay,0ms); }

/* Exit */
[data-motion].motion-out {
  animation: nsExitFade 0.35s ease-out both !important;
}

/* Re-enable transform for hover AFTER entrance animation completes */
.service-card.in-view:hover  { transform: translateY(-10px) scale(1.02) !important; animation-play-state: paused; }
.stat-card.in-view:hover     { transform: translateY(-8px) scale(1.015) !important; animation-play-state: paused; }
.value-card.in-view:hover    { transform: translateY(-8px) scale(1.015) !important; animation-play-state: paused; }
transition: opacity 1.2s var(--ease-out-smooth),
            transform 1.2s var(--ease-out-smooth),
            box-shadow 0.3s ease,
            filter 0.3s ease;
.proj-card.in-view:hover     { transform: translateY(-12px) scale(1.02) !important; animation-play-state: paused; }
.team-card.in-view:hover     { transform: scale(1.03) translateY(-6px) !important;  animation-play-state: paused; }

/* Mobile — lighter motion variants */
@media (max-width: 767px) {
  @keyframes nsVelocitySlam   { from { opacity:0; transform:translateY(45px); } to { opacity:1; transform:none; } }
  @keyframes nsLiquidDrift    { from { opacity:0; transform:translateY(45px); } to { opacity:1; transform:none; } }
  @keyframes nsQuantumFlip    { from { opacity:0; transform:translateY(40px) scale(0.92); } to { opacity:1; transform:none; } }
  @keyframes nsTitanSlide     { from { opacity:0; transform:translateX(60px); } to { opacity:1; transform:none; } }
  @keyframes nsTitanSlideLeft { from { opacity:0; transform:translateX(-60px); } to { opacity:1; transform:none; } }
  @keyframes nsNeonDrift      { from { opacity:0; transform:translateX(-50px); } to { opacity:1; transform:none; } }
  @keyframes nsNeonDriftRight { from { opacity:0; transform:translateX(50px); } to { opacity:1; transform:none; } }
  @keyframes nsOrbitalSpin    { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:none; } }
  @keyframes nsZeroGravity    { from { opacity:0; transform:translateY(50px); } to { opacity:1; transform:none; } }
  @keyframes nsInfernoRise    { from { opacity:0; transform:translateY(50px); } to { opacity:1; transform:none; } }
  @keyframes nsPhantomFade    { from { opacity:0; transform:translateY(40px); filter:blur(8px); } to { opacity:1; transform:none; filter:none; } }
  @keyframes nsHologram       { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:none; } }
  @keyframes nsBlurReveal     { from { opacity:0; transform:translateY(20px); filter:blur(6px); } to { opacity:1; transform:none; filter:none; } }
}

/* Reduced motion fallback */
@media (prefers-reduced-motion: reduce) {
  [data-motion]         { opacity: 1 !important; animation: none !important; }
  [data-motion].motion-in { animation: none !important; opacity: 1 !important; }
  .stat-card.in-view, .service-card.in-view, .pricing-card.in-view,
  .value-card.in-view, .team-card.in-view, .proj-card.in-view,
  .svc-row.in-view .svc-card, .svc-row.reverse.in-view .svc-card,
  .svc-row.in-view .svc-num, .section-h2.in-view {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

@media (max-width: 1023px) {
  .portfolio-grid [style*="height:260px"] iframe {
    width: 390px !important;
    height: 844px !important;
    transform: scale(0.75) !important;
    transform-origin: top left !important;
  }
}

.portfolio-card {
  position: relative;
  overflow: hidden;
  padding: 0;
}
.portfolio-card .pc-head {
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  z-index: 10;
}
.portfolio-card .pc-title,
.portfolio-card .pc-blurb,
.portfolio-card .pc-cta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 0 1.25rem;
  background: linear-gradient(to top, rgba(10,10,20,0.95) 60%, transparent);
}
.portfolio-card .pc-title { bottom: 3.5rem; padding-top: 2rem; }
.portfolio-card .pc-blurb { bottom: 1.8rem; background: none; }
.portfolio-card .pc-cta   { bottom: 0.75rem; background: none; }

.stat-card:hover { box-shadow: 0 0 28px rgba(168,85,247,0.28); }
.service-card:hover { box-shadow: 0 0 28px rgba(168,85,247,0.28); }
.value-card:hover { box-shadow: 0 0 28px rgba(168,85,247,0.28); }
.testimonial-card:hover { box-shadow: 0 0 28px rgba(168,85,247,0.28); }
.portfolio-card:hover { box-shadow: 0 0 28px rgba(168,85,247,0.28); }
.chart-card:hover { box-shadow: 0 0 28px rgba(168,85,247,0.28); }
.mission-stat:hover { box-shadow: 0 0 28px rgba(168,85,247,0.28); }
.svc-card:hover { box-shadow: 0 0 28px rgba(168,85,247,0.28); }
.why-stat:hover { box-shadow: 0 0 28px rgba(168,85,247,0.28); }
.pricing-card:not(.highlight):hover { box-shadow: 0 0 28px rgba(168,85,247,0.28); }
.footer-cta-card:hover { box-shadow: 0 0 28px rgba(168,85,247,0.28); }
.custom-quote-card:hover { box-shadow: 0 0 28px rgba(168,85,247,0.28); }
.contact-info-card:hover { box-shadow: 0 0 28px rgba(168,85,247,0.28); }
.form-card:hover { box-shadow: 0 0 28px rgba(168,85,247,0.28); }


/* ── Services List (vertical stacked cards) ── */
.services-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  width: 100%;
  max-width: 860px;
}
.svc-row-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-radius: 1rem;
  min-height: 90px;
}
.svc-row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 0.75rem;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.25);
  color: #faf9fc;
}
.svc-row-icon svg { width: 18px; height: 18px; }
.svc-row-text { flex: 1; }
.svc-row-text h3 { font-size: 0.95rem; font-weight: 600; color: #fff; margin-bottom: 0.3rem; }
.svc-row-text p  { font-size: 0.78rem; color: rgba(255,255,255,0.55); line-height: 1.5; margin: 0; }
.svc-row-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.35);
  transition: color 0.2s, transform 0.2s;
  min-width: 24px;
}
.svc-row-arrow svg { width: 16px; height: 16px; }
.svc-row-card:hover .svc-row-arrow { color: #faf9fc; transform: translateX(3px); }

.services-features {
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  max-width: 900px;
}
.services-features .why-feat {
  min-width: 0;
  align-items: flex-start;
}
.services-features .why-feat > div h3 {
  font-size: 0.9rem;
}
.services-features .why-feat > div p {
  font-size: 0.78rem;
  line-height: 1.5;
}




#portfolio-section {
  padding-bottom: 0.5rem;
}

.testimonial-body { font-size: 0.82rem; line-height: 1.5; }
.testimonial-foot { margin-top: 1rem; padding-top: 0.85rem; }
.testimonial-quote svg { width: 1.25rem; height: 1.25rem; }

/* ── Static Testimonials Grid ── */
.testi-static-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .testi-static-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Section Layer System ── */
.section-layers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.section-layer {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
}

/* ── STATS: Phones rise up ── */
.stats-base {
  background-image: url('images/stats-base.png');
  opacity: 0.95;
}
.stats-blob {
  background-image: url('images/stats-blob.png');
  transform: scale(0.7);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.stats-phone-left {
  background-image: url('images/stats-phone-left.png');
  transform: translateY(60px) rotate(-4deg);
  transition: opacity 0.9s ease-out 0.25s, transform 0.9s ease-out 0.25s;
}
.stats-phone-right {
  background-image: url('images/stats-phone-right.png');
  transform: translateY(60px) rotate(4deg);
  transition: opacity 0.9s ease-out 0.45s, transform 0.9s ease-out 0.45s;
}
#stats-section.in-view .stats-blob {
  opacity: 0.95;
  transform: scale(1);
}
#stats-section.in-view .stats-phone-left,
#stats-section.in-view .stats-phone-right {
  opacity: 0.95;
  transform: translateY(0) rotate(0deg);
}

/* ── SERVICES: Man slides in from right ── */
.svc-base {
  background-image: url('images/svc-base.png');
  opacity: 0.95;
}
.svc-circle {
  background-image: url('images/svc-circle.png');
  transform: scale(0.5) rotate(-15deg);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}
.svc-person {
  background-image: url('images/svc-person.png');
  transform: translateX(100px);
  transition: opacity 1s ease-out 0.3s, transform 1s ease-out 0.3s;
}
#services-section.in-view .svc-circle {
  opacity: 0.95;
  transform: scale(1) rotate(0deg);
}
#services-section.in-view .svc-person {
  opacity: 0.95;
  transform: translateX(0);
}

/* ── WHY: VR guy from left, bubbles float in ── */
.why-base {
  background-image: url('images/why-base.png');
  opacity: 0.95;
}
.why-shape {
  background-image: url('images/why-shape.png');
  transform: translateX(-60px) scale(0.8);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.why-person {
  background-image: url('images/why-person.png');
  transform: translateX(-80px);
  transition: opacity 0.9s ease-out 0.2s, transform 0.9s ease-out 0.2s;
}
.why-bubbles {
  background-image: url('images/why-bubbles.png');
  transform: translateY(30px) scale(0.6);
  transition: opacity 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s,
              transform 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s;
}
#why-section.in-view .why-shape {
  opacity: 0.95;
  transform: translateX(0) scale(1);
}
#why-section.in-view .why-person {
  opacity: 0.95;
  transform: translateX(0);
}
#why-section.in-view .why-bubbles {
  opacity: 0.95;
  transform: translateY(0) scale(1);
}

/* ── PORTFOLIO: Astronaut flies in diagonally ── */
.port-base {
  background-image: url('images/port-base.png');
  opacity: 0.95;
}
.port-astronaut {
  background-image: url('images/port-astronaut.png');
  transform: translate(-80px, 80px) rotate(-10deg);
  transition: opacity 1.1s ease-out 0.2s, transform 1.1s ease-out 0.2s;
}
#portfolio-section.in-view .port-astronaut {
  opacity: 0.95;
  transform: translate(0, 0) rotate(0deg);
}

#testimonials-section {
  background: url('images/testimonials-bg.png') center / cover no-repeat !important;
}

#cta-section {
  background: url('images/cta-bg.png') center / cover no-repeat !important;
}

/* ── BELIEVE: fade up + scale ── */
.believe-base {
  background-image: url('images/believe-base.png');
  opacity: 0.95;
}
.believe-blob {
  background-image: url('images/believe-blob.png');
  opacity: 0;
  transform: translateY(60px) scale(0.7);
  transition: opacity 1s ease-out, transform 1s ease-out;
}
.believe-people {
  background-image: url('images/believe-people.png');
  opacity: 0;
  transform: translateY(50px) scale(0.8);
  transition: opacity 1s ease-out 0.35s, transform 1s ease-out 0.35s;
}
#believe-section.in-view .believe-blob,
#about-values-section.in-view .believe-blob {
  opacity: 0.95;
  transform: translateY(0) scale(1);
}
#believe-section.in-view .believe-people,
#about-values-section.in-view .believe-people {
  opacity: 0.95;
  transform: translateY(0) scale(1);
}

/* ── PROCESS TIMELINE ── */
.process-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  max-width: 750px;
  margin-left: auto;
  margin-right: 0;
}
.process-line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, rgba(168,85,247,0.7) 0%, rgba(168,85,247,0.1) 100%);
  box-shadow: 0 0 16px rgba(168,85,247,0.35);
  z-index: 0;
}
.process-step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 0;
}
.process-left {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  padding-right: 2rem;
  text-align: right;
}
.process-number {
  font-size: 2.8rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #faf9fc, #e879f9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.process-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.875rem;
  background: linear-gradient(135deg, rgba(255,255,255,0.11) 0%, rgba(138,46,238,0.30) 100%);
  border: 1px solid rgba(178,108,248,0.42);
  box-shadow: 0 0 18px rgba(138,46,238,0.42), inset 0 1px 0 rgba(255,255,255,0.16);
  backdrop-filter: blur(6px);
}
.process-icon-wrap svg {
  width: 1.25rem;
  height: 1.25rem;
  color: #c4b5fd;
}
.process-dot {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #faf9fc;
  box-shadow: 0 0 16px rgba(168,85,247,0.7), 0 0 6px rgba(168,85,247,1);
  border: 2px solid rgba(255,255,255,0.2);
  margin-top: 0.6rem;
  flex-shrink: 0;
  animation: processPulse 2s ease-in-out infinite;
}
.process-step:nth-child(3) .process-dot { animation-delay: 0.5s; }
.process-step:nth-child(4) .process-dot { animation-delay: 1s; }
.process-step:nth-child(5) .process-dot { animation-delay: 1.5s; }
@keyframes processPulse {
  0%, 100% { box-shadow: 0 0 16px rgba(168,85,247,0.7), 0 0 6px rgba(168,85,247,1); transform: scale(1); }
  50% { box-shadow: 0 0 24px rgba(168,85,247,0.9), 0 0 10px rgba(168,85,247,1); transform: scale(1.3); }
}
.process-content {
  padding-left: 2rem;
}
.process-content h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.4rem;
}
.process-content p {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
  max-width: 320px;
}
@media (max-width: 768px) {
  .process-timeline {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
  }
  .process-left {
    padding-right: 1rem;
  }
  .process-number {
    font-size: 2rem;
  }
  .process-icon-wrap {
    width: 2.2rem;
    height: 2.2rem;
  }
  .process-content {
    padding-left: 1rem;
  }
  .process-content p {
    max-width: 100%;
  }
}

/* ── PROCESS: devices fade up + scale ── */
.process-base {
  background-image: url('images/process-base.png');
  opacity: 0.95;
}
.process-devices {
  background-image: url('images/process-devices.png');
  opacity: 0;
  transform: translateY(50px) scale(0.8);
  transition: opacity 1.1s ease-out 0.2s, transform 1.1s ease-out 0.2s;
}
#process-section.in-view .process-devices,
#about-process-section.in-view .process-devices {
  opacity: 0.95;
  transform: translateY(0) scale(1);
}

/* ── SERVICES HERO: blob rotates in, person slides from right ── */
.svc-hero-base {
  background-image: url('images/svc-hero-base.png');
  opacity: 0.95;
}
.svc-hero-blob {
  background-image: url('images/svc-hero-blob.png');
  opacity: 0;
  transform: translateX(100px) rotate(15deg);
  animation: svcBlobIn 1s ease-out 0.2s forwards;
}
.svc-hero-person {
  background-image: url('images/svc-hero-person.png');
  opacity: 0;
  transform: translateX(120px);
  animation: svcPersonIn 1s ease-out 0.5s forwards;
}
@keyframes svcBlobIn {
  0% { opacity: 0; transform: translateX(100px) rotate(15deg); }
  100% { opacity: 0.95; transform: translateX(0) rotate(0deg); }
}
@keyframes svcPersonIn {
  0% { opacity: 0; transform: translateX(120px); }
  100% { opacity: 0.95; transform: translateX(0); }
}

/* ── PORTFOLIO HERO: blob scales up, devices float up ── */
.port-hero-base {
  background-image: url('images/port-hero-base.png');
  opacity: 0.95;
}
.port-hero-blob {
  background-image: url('images/port-hero-blob.png');
  opacity: 0;
  transform: scale(0.5);
  animation: portBlobIn 1.1s ease-out 0.15s forwards;
}
.port-hero-devices {
  background-image: url('images/port-hero-devices.png');
  opacity: 0;
  transform: translateY(70px) scale(0.85);
  animation: portDevicesIn 1s ease-out 0.5s forwards;
}
@keyframes portBlobIn {
  0% { opacity: 0; transform: scale(0.5); }
  100% { opacity: 0.95; transform: scale(1); }
}
@keyframes portDevicesIn {
  0% { opacity: 0; transform: translateY(70px) scale(0.85); }
  100% { opacity: 0.95; transform: translateY(0) scale(1); }
}

/* ── PRICING HERO: blob pans left, hand fans in with rotation ── */
.price-hero-base {
  background-image: url('images/price-hero-base.png');
  opacity: 0.95;
}
.price-hero-blob {
  background-image: url('images/price-hero-blob.png');
  opacity: 0;
  transform: translateX(80px);
  animation: priceBlobIn 0.9s ease-out 0.2s forwards;
}
.price-hero-hand {
  background-image: url('images/price-hero-hand.png');
  opacity: 0;
  transform: translateY(40px) rotate(12deg);
  animation: priceHandIn 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards;
}
@keyframes priceBlobIn {
  0% { opacity: 0; transform: translateX(80px); }
  100% { opacity: 0.95; transform: translateX(0); }
}
@keyframes priceHandIn {
  0% { opacity: 0; transform: translateY(40px) rotate(12deg); }
  100% { opacity: 0.95; transform: translateY(0) rotate(0deg); }
}

/* ── CONTACT HERO: blob pans right-to-left, person zooms in ── */
.contact-base {
  background-image: url('images/contact-base.png');
  opacity: 0.95;
}
.contact-blob {
  background-image: url('images/contact-blob.png');
  opacity: 0;
  transform: translateX(90px);
  animation: contactBlobIn 1s ease-out 0.2s forwards;
}
.contact-person {
  background-image: url('images/contact-person.png');
  opacity: 0;
  transform: scale(1.15);
  animation: contactPersonIn 1.1s ease-out 0.5s forwards;
}
@keyframes contactBlobIn {
  0% { opacity: 0; transform: translateX(90px); }
  100% { opacity: 0.95; transform: translateX(0); }
}
@keyframes contactPersonIn {
  0% { opacity: 0; transform: scale(1.15); }
  100% { opacity: 0.95; transform: scale(1); }
}

/* ── MOBILE ANIMATED LAYERS ── */
.mob-layer {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* INDEX MOBILE */
.hero-mob-base { background-image: url('images/hero-mob-base.png'); opacity: 0.95; }
.hero-mob-blob {
  background-image: url('images/hero-mob-blob.png');
  opacity: 0;
  transform: translateX(-60px);
  animation: mobSlideRight 0.9s ease-out 0.2s forwards;
}
.hero-mob-person {
  background-image: url('images/hero-mob-person.png');
  opacity: 0;
  transform: translateX(-60px);
  animation: mobSlideRight 0.9s ease-out 0.5s forwards;
}

/* ABOUT MOBILE */
.about-mob-base { background-image: url('images/about-mob-base.png'); opacity: 0.95; }
.about-mob-blob {
  background-image: url('images/about-mob-blob.png');
  opacity: 0;
  transform: translateX(60px);
  animation: mobSlideLeft 1s ease-out 0.2s forwards;
}
.about-mob-people {
  background-image: url('images/about-mob-people.png');
  opacity: 0;
  transform: translateX(-70px);
  animation: mobSlideRight 1s ease-out 0.6s forwards;
}

/* SERVICES MOBILE */
.svc-mob-base { background-image: url('images/svc-mob-base.png'); opacity: 0.95; }
.svc-mob-blob {
  background-image: url('images/svc-mob-blob.png');
  opacity: 0;
  transform: translateX(70px) rotate(10deg);
  animation: mobRotateIn 1s ease-out 0.2s forwards;
}
.svc-mob-person {
  background-image: url('images/svc-mob-person.png');
  opacity: 0;
  transform: translateX(80px);
  animation: mobSlideLeft 1s ease-out 0.5s forwards;
}

/* PORTFOLIO MOBILE */
.port-mob-base { background-image: url('images/port-mob-base.png'); opacity: 0.95; }
.port-mob-blob {
  background-image: url('images/port-mob-blob.png');
  opacity: 0;
  transform: scale(0.5);
  animation: mobScaleUp 1.1s ease-out 0.15s forwards;
}
.port-mob-devices {
  background-image: url('images/port-mob-devices.png');
  opacity: 0;
  transform: translateY(50px) scale(0.85);
  animation: mobFloatUp 1s ease-out 0.5s forwards;
}

/* PRICING MOBILE */
.price-mob-base { background-image: url('images/price-mob-base.png'); opacity: 0.95; }
.price-mob-blob {
  background-image: url('images/price-mob-blob.png');
  opacity: 0;
  transform: translateX(60px);
  animation: mobSlideLeft 0.9s ease-out 0.2s forwards;
}
.price-mob-hand {
  background-image: url('images/price-mob-hand.png');
  opacity: 0;
  transform: translateY(40px) rotate(10deg);
  animation: mobFanIn 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards;
}

/* CONTACT MOBILE */
.contact-mob-base { background-image: url('images/contact-mob-base.png'); opacity: 0.95; }
.contact-mob-blob {
  background-image: url('images/contact-mob-blob.png');
  opacity: 0;
  transform: translateX(60px);
  animation: mobSlideLeft 1s ease-out 0.2s forwards;
}
.contact-mob-person {
  background-image: url('images/contact-mob-person.png');
  opacity: 0;
  transform: scale(1.15);
  animation: mobZoomSettle 1.1s ease-out 0.5s forwards;
}

/* ── MOBILE KEYFRAMES ── */
@keyframes mobSlideRight {
  0% { opacity: 0; transform: translateX(-60px); }
  100% { opacity: 0.95; transform: translateX(0); }
}
@keyframes mobSlideLeft {
  0% { opacity: 0; transform: translateX(60px); }
  100% { opacity: 0.95; transform: translateX(0); }
}
@keyframes mobRotateIn {
  0% { opacity: 0; transform: translateX(70px) rotate(10deg); }
  100% { opacity: 0.95; transform: translateX(0) rotate(0deg); }
}
@keyframes mobScaleUp {
  0% { opacity: 0; transform: scale(0.5); }
  100% { opacity: 0.95; transform: scale(1); }
}
@keyframes mobFloatUp {
  0% { opacity: 0; transform: translateY(50px) scale(0.85); }
  100% { opacity: 0.95; transform: translateY(0) scale(1); }
}
@keyframes mobFanIn {
  0% { opacity: 0; transform: translateY(40px) rotate(10deg); }
  100% { opacity: 0.95; transform: translateY(0) rotate(0deg); }
}
@keyframes mobZoomSettle {
  0% { opacity: 0; transform: scale(1.15); }
  100% { opacity: 0.95; transform: scale(1); }
}

/* ── SECTION MOBILE/DESKTOP TOGGLE ── */
.section-mobile-bg { display: none; }
@media (max-width: 768px) {
  .section-desktop-bg { display: none; }
  .section-mobile-bg { display: block; }
}

/* ── STATS MOBILE ── */
.stats-mob-blob {
  background-image: url('images/stats-mob-blob.png');
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.stats-mob-phones {
  background-image: url('images/stats-mob-phones.png');
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.9s ease-out 0.3s, transform 0.9s ease-out 0.3s;
}
#stats-section.in-view .stats-mob-blob {
  opacity: 0.95;
  transform: scale(1);
}
#stats-section.in-view .stats-mob-phones {
  opacity: 0.95;
  transform: translateY(0);
}

/* ── SERVICES SECTION MOBILE ── */
.svc-mob-sec-base { background-image: url('images/svc-mob-sec-base.png'); opacity: 0.95; }
.svc-mob-sec-blob {
  background-image: url('images/svc-mob-sec-blob.png');
  opacity: 0;
  transform: translateX(50px) rotate(10deg);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}
.svc-mob-sec-person {
  background-image: url('images/svc-mob-sec-person.png');
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 1s ease-out 0.3s, transform 1s ease-out 0.3s;
}
#services-section.in-view .svc-mob-sec-blob {
  opacity: 0.95;
  transform: translateX(0) rotate(0deg);
}
#services-section.in-view .svc-mob-sec-person {
  opacity: 0.95;
  transform: translateX(0);
}

/* ── WHY SECTION MOBILE ── */
.why-mob-base { background-image: url('images/why-mob-base.png'); opacity: 0.95; }
.why-mob-shape {
  background-image: url('images/why-mob-shape.png');
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.why-mob-person {
  background-image: url('images/why-mob-person.png');
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.9s ease-out 0.2s, transform 0.9s ease-out 0.2s;
}
.why-mob-bubbles {
  background-image: url('images/why-mob-bubbles.png');
  opacity: 0;
  transform: translateY(30px) scale(0.6);
  transition: opacity 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s,
              transform 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s;
}
#why-section.in-view .why-mob-shape {
  opacity: 0.95;
  transform: translateX(0);
}
#why-section.in-view .why-mob-person {
  opacity: 0.95;
  transform: translateX(0);
}
#why-section.in-view .why-mob-bubbles {
  opacity: 0.95;
  transform: translateY(0) scale(1);
}

/* ── PORTFOLIO SECTION MOBILE ── */
.port-mob-sec-base { background-image: url('images/port-mob-sec-base.png'); opacity: 0.95; }
.port-mob-sec-astro {
  background-image: url('images/port-mob-sec-astro.png');
  opacity: 0;
  transform: translate(-50px, 50px) rotate(-10deg);
  transition: opacity 1.1s ease-out 0.2s, transform 1.1s ease-out 0.2s;
}
#portfolio-section.in-view .port-mob-sec-astro {
  opacity: 0.95;
  transform: translate(0, 0) rotate(0deg);
}

/* ── BELIEVE SECTION MOBILE ── */
.believe-mob-base { background-image: url('images/believe-mob-base.png'); opacity: 0.95; }
.believe-mob-blob {
  background-image: url('images/believe-mob-blob.png');
  opacity: 0;
  transform: translateY(40px) scale(0.7);
  transition: opacity 1s ease-out, transform 1s ease-out;
}
.believe-mob-people {
  background-image: url('images/believe-mob-people.png');
  opacity: 0;
  transform: translateY(35px) scale(0.8);
  transition: opacity 1s ease-out 0.35s, transform 1s ease-out 0.35s;
}
#believe-section.in-view .believe-mob-blob {
  opacity: 0.95;
  transform: translateY(0) scale(1);
}
#believe-section.in-view .believe-mob-people {
  opacity: 0.95;
  transform: translateY(0) scale(1);
}

/* ── PROCESS SECTION MOBILE ── */
.process-mob-base { background-image: url('images/process-mob-base.png'); opacity: 0.95; }
.process-mob-devices {
  background-image: url('images/process-mob-devices.png');
  opacity: 0;
  transform: translateY(40px) scale(0.8);
  transition: opacity 1.1s ease-out 0.2s, transform 1.1s ease-out 0.2s;
}
#process-section.in-view .process-mob-devices {
  opacity: 0.95;
  transform: translateY(0) scale(1);
}

/* ── MOBILE SECTION BG LAYOUT ── */
@media (max-width: 768px) {

  /* Give all bg sections extra bottom space for the image zone */
  #stats-section,
  #services-section,
  #why-section,
  #believe-section,
  #process-section {
    padding-bottom: clamp(22rem, 55vw, 30rem);
  }
  #portfolio-section {
    padding-bottom: clamp(1Prem, 10vw, 9rem);
  }

  /* Mobile layers sit in the bottom half only */
  .section-mobile-bg {
    top: auto;
    bottom: 0;
    height: 55%;
    inset: auto 0 0 0;
  }
  #portfolio-section .section-mobile-bg {
    inset: 0 0 auto 0;
    height: 60%;
  }

  /* ── STATS MOBILE: one unified grid ── */
  #stats-section > div[style*="margin-top:-8rem"] {
    display: none !important;
  }
  .stat-card-mobile-only {
    display: none;
  }
  #stats-section > .container {
    margin-top: 0 !important;
  }
  #stats-section .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .stat-card-mobile-only {
    display: block !important;
  }
  #stats-section .stat-card {
    padding: 1.25rem;
    background:
      radial-gradient(ellipse 82% 52% at 50% 0%, rgba(145,52,242,0.22) 0%, rgba(145,52,242,0.08) 30%, transparent 58%),
      linear-gradient(158deg, rgba(52,7,106,0.70) 0%, rgba(14,0,28,0.93) 42%, rgba(3,0,13,0.97) 70%, rgba(20,3,44,0.87) 100%);
    border: 1px solid rgba(183,113,250,0.14);
    border-radius: 1.375rem;
    backdrop-filter: blur(20px) brightness(0.88) saturate(1.62);
    -webkit-backdrop-filter: blur(20px) brightness(0.88) saturate(1.62);
    box-shadow: none;
    text-align: left;
  }
  #stats-section .stat-card .service-icon {
    display: none;
  }
  #stats-section .stat-card .stat-value {
    font-size: 1.875rem;
    font-weight: 700;
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    margin: 0;
  }
  #stats-section .stat-card .stat-label {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.6);
  }

  /* Services cards */
  .services-features {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }

  /* Values/believe cards */
  .values-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* Why section cards */
  .why-features {
    grid-template-columns: 1fr;
  }

  /* Ensure content stays above bg layers */
  #stats-section .container,
  #services-section .container,
  #why-section .container,
  #portfolio-section .container,
  #believe-section .container,
  #process-section .container {
    position: relative;
    z-index: 2;
  }
}

/* Hide mobile-only cards on desktop */
.stat-card-mobile-only {
  display: none;
}

@media (max-width: 768px) {
 #stats-section {
    background:
      radial-gradient(ellipse 40% 45% at 100% 0%, rgba(160, 0, 120, 0.7) 0%, rgba(130, 0, 100, 0.3) 40%, transparent 70%),
      radial-gradient(ellipse 85% 70% at 88% 8%, rgba(88, 0, 180, 0.85) 0%, rgba(60, 0, 140, 0.4) 35%, transparent 70%),
      radial-gradient(ellipse 40% 45% at 0% 100%, rgba(140, 0, 180, 0.75) 0%, rgba(100, 0, 140, 0.35) 40%, transparent 70%),
      radial-gradient(ellipse 80% 65% at 12% 92%, rgba(75, 0, 160, 0.75) 0%, rgba(50, 0, 120, 0.35) 40%, transparent 70%),
      #050208 !important;
  }
  #stats-section .section-mobile-bg {
    inset: auto 0 0 0;
    height: 65%;
  }
}
/* Desktop stats gradient — index page only (769px and up) */
@media (min-width: 769px) {
  #stats-section {
    background:
      radial-gradient(ellipse 35% 55% at 100% 0%, rgba(160, 0, 120, 0.7) 0%, rgba(130, 0, 100, 0.3) 40%, transparent 70%),
      radial-gradient(ellipse 70% 80% at 88% 8%, rgba(88, 0, 180, 0.85) 0%, rgba(60, 0, 140, 0.4) 35%, transparent 70%),
      radial-gradient(ellipse 35% 55% at 0% 100%, rgba(140, 0, 180, 0.75) 0%, rgba(100, 0, 140, 0.35) 40%, transparent 70%),
      radial-gradient(ellipse 70% 75% at 12% 92%, rgba(75, 0, 160, 0.75) 0%, rgba(50, 0, 120, 0.35) 40%, transparent 70%),
      #050208 !important;
  }
}

#services-section {
    background:
      radial-gradient(ellipse 40% 45% at 100% 0%, rgba(160, 0, 120, 0.7) 0%, rgba(130, 0, 100, 0.3) 40%, transparent 70%),
      radial-gradient(ellipse 85% 70% at 88% 8%, rgba(88, 0, 180, 0.85) 0%, rgba(60, 0, 140, 0.4) 35%, transparent 70%),
      radial-gradient(ellipse 40% 45% at 0% 100%, rgba(140, 0, 180, 0.75) 0%, rgba(100, 0, 140, 0.35) 40%, transparent 70%),
      radial-gradient(ellipse 85% 70% at 12% 92%, rgba(75, 0, 160, 0.75) 0%, rgba(50, 0, 120, 0.35) 40%, transparent 70%),
      #050208 !important;
  }
  #services-section .why-feat:nth-child(n+4) {
    display: none;
  }
  /* Desktop services gradient — index page only (769px and up) */
  @media (min-width: 769px) {
  #services-section {
    background:
      radial-gradient(ellipse 40% 45% at 100% 0%, rgba(160, 0, 120, 0.7) 0%, rgba(130, 0, 100, 0.3) 40%, transparent 70%),
      radial-gradient(ellipse 85% 70% at 88% 8%, rgba(88, 0, 180, 0.85) 0%, rgba(60, 0, 140, 0.4) 35%, transparent 70%),
      radial-gradient(ellipse 40% 45% at 0% 100%, rgba(140, 0, 180, 0.75) 0%, rgba(100, 0, 140, 0.35) 40%, transparent 70%),
      radial-gradient(ellipse 85% 70% at 12% 92%, rgba(75, 0, 160, 0.75) 0%, rgba(50, 0, 120, 0.35) 40%, transparent 70%),
      #050208 !important;
  }
}

  #why-section {
    background:
      radial-gradient(ellipse 35% 40% at 95% 5%, rgba(100, 0, 170, 0.5) 0%, rgba(70, 0, 130, 0.2) 40%, transparent 70%),
      radial-gradient(ellipse 70% 80% at 30% 65%, rgba(110, 0, 200, 0.85) 0%, rgba(85, 0, 170, 0.5) 30%, rgba(60, 0, 140, 0.2) 55%, transparent 80%),
      radial-gradient(ellipse 60% 65% at 45% 80%, rgba(130, 0, 180, 0.6) 0%, rgba(90, 0, 150, 0.3) 35%, transparent 70%),
      #050208 !important;
  }
  /* Desktop why gradient — index page only (769px and up) */
@media (min-width: 769px) {
 #why-section {
    background:
      radial-gradient(ellipse 35% 40% at 95% 5%, rgba(100, 0, 170, 0.5) 0%, rgba(70, 0, 130, 0.2) 40%, transparent 70%),
      radial-gradient(ellipse 70% 80% at 30% 65%, rgba(110, 0, 200, 0.85) 0%, rgba(85, 0, 170, 0.5) 30%, rgba(60, 0, 140, 0.2) 55%, transparent 80%),
      radial-gradient(ellipse 60% 65% at 45% 80%, rgba(130, 0, 180, 0.6) 0%, rgba(90, 0, 150, 0.3) 35%, transparent 70%),
      #050208 !important;
  }
}

  #portfolio-section {
    background:
      radial-gradient(ellipse 40% 45% at 35% 0%, rgba(160, 0, 120, 0.6) 0%, rgba(130, 0, 100, 0.25) 40%, transparent 70%),
      radial-gradient(ellipse 85% 50% at 40% 5%, rgba(88, 0, 180, 0.85) 0%, rgba(60, 0, 140, 0.4) 35%, transparent 70%),
      radial-gradient(ellipse 40% 45% at 50% 100%, rgba(140, 0, 180, 0.7) 0%, rgba(100, 0, 140, 0.3) 40%, transparent 70%),
      radial-gradient(ellipse 100% 55% at 50% 95%, rgba(75, 0, 160, 0.8) 0%, rgba(50, 0, 120, 0.45) 35%, transparent 70%),
      #050208 !important;
  }
  #portfolio-section .section-head {
    padding-top: clamp(10rem, 28vw, 16rem);
  }
  #portfolio-section .coverflow-wrap {
    margin-top: 2rem;
  }
  /* Desktop portfolio gradient — index page only (769px and up) */
@media (min-width: 769px) {
  #portfolio-section {
    background:
      radial-gradient(ellipse 40% 45% at 35% 0%, rgba(160, 0, 120, 0.6) 0%, rgba(130, 0, 100, 0.25) 40%, transparent 70%),
      radial-gradient(ellipse 85% 50% at 40% 5%, rgba(88, 0, 180, 0.85) 0%, rgba(60, 0, 140, 0.4) 35%, transparent 70%),
      radial-gradient(ellipse 40% 45% at 50% 100%, rgba(140, 0, 180, 0.7) 0%, rgba(100, 0, 140, 0.3) 40%, transparent 70%),
      radial-gradient(ellipse 100% 55% at 50% 95%, rgba(75, 0, 160, 0.8) 0%, rgba(50, 0, 120, 0.45) 35%, transparent 70%),
      #050208 !important;
  }
}

   #testimonials-section {
    background:
      radial-gradient(ellipse 40% 45% at 0% 0%, rgba(160, 0, 120, 0.7) 0%, rgba(130, 0, 100, 0.3) 40%, transparent 70%),
      radial-gradient(ellipse 85% 70% at 12% 8%, rgba(88, 0, 180, 0.85) 0%, rgba(60, 0, 140, 0.4) 35%, transparent 70%),
      radial-gradient(ellipse 40% 45% at 100% 100%, rgba(140, 0, 180, 0.75) 0%, rgba(100, 0, 140, 0.35) 40%, transparent 70%),
      radial-gradient(ellipse 80% 65% at 88% 92%, rgba(75, 0, 160, 0.75) 0%, rgba(50, 0, 120, 0.35) 40%, transparent 70%),
      #050208 !important;
  }
  /* Desktop testimonials gradient — index page only (769px and up) */
@media (min-width: 769px) {
  #testimonials-section {
    background:
      radial-gradient(ellipse 40% 45% at 0% 0%, rgba(160, 0, 120, 0.7) 0%, rgba(130, 0, 100, 0.3) 40%, transparent 70%),
      radial-gradient(ellipse 85% 70% at 12% 8%, rgba(88, 0, 180, 0.85) 0%, rgba(60, 0, 140, 0.4) 35%, transparent 70%),
      radial-gradient(ellipse 40% 45% at 100% 100%, rgba(140, 0, 180, 0.75) 0%, rgba(100, 0, 140, 0.35) 40%, transparent 70%),
      radial-gradient(ellipse 80% 65% at 88% 92%, rgba(75, 0, 160, 0.75) 0%, rgba(50, 0, 120, 0.35) 40%, transparent 70%),
      #050208 !important;
  }
}

  @media (max-width: 768px) {
  #pricing-section {
    background:
      radial-gradient(ellipse 40% 45% at 100% 0%, rgba(160, 0, 120, 0.7) 0%, rgba(130, 0, 100, 0.3) 40%, transparent 70%),
      radial-gradient(ellipse 85% 70% at 88% 8%, rgba(88, 0, 180, 0.85) 0%, rgba(60, 0, 140, 0.4) 35%, transparent 70%),
      radial-gradient(ellipse 40% 45% at 0% 100%, rgba(140, 0, 180, 0.75) 0%, rgba(100, 0, 140, 0.35) 40%, transparent 70%),
      radial-gradient(ellipse 80% 65% at 12% 92%, rgba(75, 0, 160, 0.75) 0%, rgba(50, 0, 120, 0.35) 40%, transparent 70%),
      #050208 !important;
  }
}
/* Desktop pricing gradient — index page only (769px and up) */
@media (min-width: 769px) {
#pricing-section {
    background:
      radial-gradient(ellipse 40% 45% at 100% 0%, rgba(160, 0, 120, 0.7) 0%, rgba(130, 0, 100, 0.3) 40%, transparent 70%),
      radial-gradient(ellipse 85% 70% at 88% 8%, rgba(88, 0, 180, 0.85) 0%, rgba(60, 0, 140, 0.4) 35%, transparent 70%),
      radial-gradient(ellipse 40% 45% at 0% 100%, rgba(140, 0, 180, 0.75) 0%, rgba(100, 0, 140, 0.35) 40%, transparent 70%),
      radial-gradient(ellipse 80% 65% at 12% 92%, rgba(75, 0, 160, 0.75) 0%, rgba(50, 0, 120, 0.35) 40%, transparent 70%),
      #050208 !important;
  }
}

@media (max-width: 768px) {
  .hero {
    background:
      radial-gradient(ellipse 40% 45% at 0% 0%, rgba(160, 0, 120, 0.7) 0%, rgba(130, 0, 100, 0.3) 40%, transparent 70%),
      radial-gradient(ellipse 85% 70% at 12% 8%, rgba(88, 0, 180, 0.85) 0%, rgba(60, 0, 140, 0.4) 35%, transparent 70%),
      radial-gradient(ellipse 40% 45% at 100% 100%, rgba(140, 0, 180, 0.75) 0%, rgba(100, 0, 140, 0.35) 40%, transparent 70%),
      radial-gradient(ellipse 80% 65% at 88% 92%, rgba(75, 0, 160, 0.75) 0%, rgba(50, 0, 120, 0.35) 40%, transparent 70%),
      #050208 !important;
  }
  .hero-mob-base {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .hero-sub {
    display: none !important;
  }
}

@media (min-width: 769px) {
  :root {
    /* ── INDEX HERO DESKTOP ── */
    --idx-badge-dk:    -1rem;
    --idx-heading-dk:  3rem;
    --idx-buttons-dk:  5rem;

    /* ── ALL OTHER PAGES DESKTOP ── */
    --page-eyebrow-dk:  -1rem;
    --page-heading-dk:  6rem;
    --page-sub-dk:      4rem;
  }

  .hero-badge        { margin-top: var(--idx-badge-dk); }
  .hero-title        { margin-top: var(--idx-heading-dk); }
  .hero-ctas         { margin-top: var(--idx-buttons-dk); }

  .page-eyebrow { margin-top: var(--page-eyebrow-dk); }
  .page-h1      { margin-top: var(--page-heading-dk); }
  .page-sub     { margin-top: var(--page-sub-dk); }
}

.hero-title-mobile { display: none; }

@media (max-width: 768px) {
  :root {
    /* ── INDEX HERO ── */
    --idx-badge:    -1rem;
    --idx-heading:  1rem;
    --idx-buttons:   25rem;

    /* ── ALL OTHER PAGES (about → contact) ── */
    --page-eyebrow:  -6rem;
    --page-heading:  3rem;
    --page-sub:      20rem;
  }

  .hero-title-desktop { display: none !important; }
  .hero-title-mobile  { display: block !important; }

  /* Index hero */
  .hero-badge        { margin-top: var(--idx-badge); }
  .hero-title-mobile {
    margin-top: var(--idx-heading);
    line-height: 1.0;
    letter-spacing: -0.03em;
    text-align: left;
    padding: 0 1.25rem 0 0;
  margin-left: -0.5rem;
    font-weight: 800;
     transform: translateX(-50px);
  }
  .hero-title-mobile .line-1,
  .hero-title-mobile .line-2,
  .hero-title-mobile .line-3 {
    display: block;
    white-space: nowrap;
     margin-bottom: 0.7rem;
  }
  .hero-title-mobile .line-1 {
    font-size: 11vw;
  }
  .hero-title-mobile .line-2 {
    font-size: 11vw;
  }
  .hero-title-mobile .line-3 {
    font-size: 11vw;
    background: linear-gradient(135deg, #a855f7 0%, #c084fc 60%, #e9d5ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  .hero-ctas         { margin-top: var(--idx-buttons); }

  /* All other pages */
  .page-eyebrow { margin-top: var(--page-eyebrow); }
  .page-h1      { margin-top: var(--page-heading); }
  .page-sub     { margin-top: var(--page-sub); }
}

@media (max-width: 768px) {
  /* Hide base PNGs on all 5 pages */
  .about-mob-base,
  .svc-mob-base,
  .port-mob-base,
  .price-mob-base,
  .contact-mob-base {
    display: none !important;
  }

  /* Gradient background for all 5 pages */
  .page-hero {
    background:
      radial-gradient(ellipse 40% 45% at 0% 0%, rgba(160, 0, 120, 0.7) 0%, rgba(130, 0, 100, 0.3) 40%, transparent 70%),
      radial-gradient(ellipse 85% 70% at 12% 8%, rgba(88, 0, 180, 0.85) 0%, rgba(60, 0, 140, 0.4) 35%, transparent 70%),
      radial-gradient(ellipse 40% 45% at 100% 100%, rgba(140, 0, 180, 0.75) 0%, rgba(100, 0, 140, 0.35) 40%, transparent 70%),
      radial-gradient(ellipse 80% 65% at 88% 92%, rgba(75, 0, 160, 0.75) 0%, rgba(50, 0, 120, 0.35) 40%, transparent 70%),
      #050208 !important;
  }
}

#about-story-section {
    background:
      radial-gradient(ellipse 40% 45% at 100% 0%, rgba(160, 0, 120, 0.7) 0%, rgba(130, 0, 100, 0.3) 40%, transparent 70%),
      radial-gradient(ellipse 85% 70% at 88% 8%, rgba(88, 0, 180, 0.85) 0%, rgba(60, 0, 140, 0.4) 35%, transparent 70%),
      radial-gradient(ellipse 40% 45% at 0% 100%, rgba(140, 0, 180, 0.75) 0%, rgba(100, 0, 140, 0.35) 40%, transparent 70%),
      radial-gradient(ellipse 80% 65% at 12% 92%, rgba(75, 0, 160, 0.75) 0%, rgba(50, 0, 120, 0.35) 40%, transparent 70%),
      #050208 !important;
  }

  #about-values-section {
    background:
      radial-gradient(ellipse 40% 45% at 35% 0%, rgba(160, 0, 120, 0.6) 0%, rgba(130, 0, 100, 0.25) 40%, transparent 70%),
      radial-gradient(ellipse 85% 50% at 40% 5%, rgba(88, 0, 180, 0.85) 0%, rgba(60, 0, 140, 0.4) 35%, transparent 70%),
      radial-gradient(ellipse 40% 45% at 50% 100%, rgba(140, 0, 180, 0.7) 0%, rgba(100, 0, 140, 0.3) 40%, transparent 70%),
      radial-gradient(ellipse 100% 55% at 50% 95%, rgba(75, 0, 160, 0.8) 0%, rgba(50, 0, 120, 0.45) 35%, transparent 70%),
      #050208 !important;
  }

  #about-process-section {
    background:
      radial-gradient(ellipse 35% 40% at 95% 5%, rgba(100, 0, 170, 0.5) 0%, rgba(70, 0, 130, 0.2) 40%, transparent 70%),
      radial-gradient(ellipse 70% 80% at 30% 65%, rgba(110, 0, 200, 0.85) 0%, rgba(85, 0, 170, 0.5) 30%, rgba(60, 0, 140, 0.2) 55%, transparent 80%),
      radial-gradient(ellipse 60% 65% at 45% 80%, rgba(130, 0, 180, 0.6) 0%, rgba(90, 0, 150, 0.3) 35%, transparent 70%),
      #050208 !important;
  }

    #about-mission-section {
    background:
      radial-gradient(ellipse 40% 45% at 0% 0%, rgba(160, 0, 120, 0.7) 0%, rgba(130, 0, 100, 0.3) 40%, transparent 70%),
      radial-gradient(ellipse 85% 70% at 12% 8%, rgba(88, 0, 180, 0.85) 0%, rgba(60, 0, 140, 0.4) 35%, transparent 70%),
      radial-gradient(ellipse 40% 45% at 100% 100%, rgba(140, 0, 180, 0.75) 0%, rgba(100, 0, 140, 0.35) 40%, transparent 70%),
      radial-gradient(ellipse 80% 65% at 88% 92%, rgba(75, 0, 160, 0.75) 0%, rgba(50, 0, 120, 0.35) 40%, transparent 70%),
      #050208 !important;
  }

  #service-rows-section {
    background:
      radial-gradient(ellipse 40% 45% at 100% 0%, rgba(160, 0, 120, 0.7) 0%, rgba(130, 0, 100, 0.3) 40%, transparent 70%),
      radial-gradient(ellipse 85% 70% at 88% 8%, rgba(88, 0, 180, 0.85) 0%, rgba(60, 0, 140, 0.4) 35%, transparent 70%),
      radial-gradient(ellipse 40% 45% at 0% 100%, rgba(140, 0, 180, 0.75) 0%, rgba(100, 0, 140, 0.35) 40%, transparent 70%),
      radial-gradient(ellipse 80% 65% at 12% 92%, rgba(75, 0, 160, 0.75) 0%, rgba(50, 0, 120, 0.35) 40%, transparent 70%),
      #050208 !important;
  }

 .portfolio-grid > div[data-cat] {
  box-shadow:
    0 0 60px 30px rgba(88, 0, 180, 0.3),
    0 0 120px 60px rgba(130, 0, 160, 0.15),
    0 0 200px 100px rgba(75, 0, 140, 0.08);
}

#contact-section {
    background:
      radial-gradient(ellipse 40% 45% at 100% 0%, rgba(160, 0, 120, 0.7) 0%, rgba(130, 0, 100, 0.3) 40%, transparent 70%),
      radial-gradient(ellipse 85% 70% at 88% 8%, rgba(88, 0, 180, 0.85) 0%, rgba(60, 0, 140, 0.4) 35%, transparent 70%),
      radial-gradient(ellipse 40% 45% at 0% 100%, rgba(140, 0, 180, 0.75) 0%, rgba(100, 0, 140, 0.35) 40%, transparent 70%),
      radial-gradient(ellipse 80% 65% at 12% 92%, rgba(75, 0, 160, 0.75) 0%, rgba(50, 0, 120, 0.35) 40%, transparent 70%),
      #050208 !important;
  }

  #compare-section {
    background:
      radial-gradient(ellipse 40% 45% at 35% 0%, rgba(160, 0, 120, 0.6) 0%, rgba(130, 0, 100, 0.25) 40%, transparent 70%),
      radial-gradient(ellipse 85% 50% at 40% 5%, rgba(88, 0, 180, 0.85) 0%, rgba(60, 0, 140, 0.4) 35%, transparent 70%),
      radial-gradient(ellipse 40% 45% at 50% 100%, rgba(140, 0, 180, 0.7) 0%, rgba(100, 0, 140, 0.3) 40%, transparent 70%),
      radial-gradient(ellipse 100% 55% at 50% 95%, rgba(75, 0, 160, 0.8) 0%, rgba(50, 0, 120, 0.45) 35%, transparent 70%),
      #050208 !important;
  }
  @media (max-width: 1023px) {
  .contact-title {
    text-align: center !important;
    padding: 0 0.75rem !important;
    font-size: unset !important;
    line-height: 1.1 !important;
  }
  .ct-line-1,
  .ct-line-2 {
    display: block !important;
    white-space: nowrap !important;
  }
  .ct-line-1 {
    font-size: 8vw !important;
  }
  .ct-line-2 {
    font-size: 8vw !important;
  }
}

@media (max-width: 1023px) {
  .pricing-title {
    text-align: center !important;
    padding: 0 0.75rem !important;
    font-size: unset !important;
    line-height: 1.1 !important;
    max-width: 100% !important;
  }
  .pt-line-1,
  .pt-line-2 {
    display: block !important;
    white-space: nowrap !important;
  }
  .pt-line-1 {
    font-size: 8vw !important;
  }
  .pt-line-2 {
    font-size: 8vw !important;
  }
}

main.page-main > section.section:last-of-type {
  padding-bottom: clamp(3rem, 5vw, 4rem);
}

/* ===== COVERFLOW MOBILE NAV BUTTONS ===== */
.cf-nav {
  display: none;
}

@media (max-width: 1023px) {
  .coverflow-wrap {
    position: relative;
  }
  .cf-nav {
    display: flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px solid rgba(168, 85, 247, 0.35);
    background: linear-gradient(145deg, rgba(30, 20, 50, 0.85), rgba(15, 10, 25, 0.9));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #fff;
    cursor: pointer;
    z-index: 20;
    box-shadow:
      0 8px 24px rgba(0, 0, 0, 0.45),
      0 0 24px rgba(168, 85, 247, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .cf-nav svg {
    width: 22px;
    height: 22px;
  }
  .cf-nav-prev { left: 0.5rem; }
  .cf-nav-next { right: 0.5rem; }

  .cf-nav:hover,
  .cf-nav:active {
    transform: translateY(-50%) scale(1.08);
    background: linear-gradient(145deg, rgba(50, 30, 90, 0.95), rgba(25, 15, 45, 0.95));
    box-shadow:
      0 10px 30px rgba(0, 0, 0, 0.55),
      0 0 32px rgba(168, 85, 247, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }

  .cf-nav:active {
    transform: translateY(-50%) scale(0.95);
  }
}

#pricing-section .pricing-card:first-child .pricing-cta {
  margin-top: 4rem;
}

/* ===== MOBILE DRAWER ACTIVE LINK ===== */
.mobile-link.active {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.18), rgba(124, 58, 237, 0.12));
  color: #fff;
  font-weight: 600;
  border-left: 3px solid #a855f7;
  padding-left: calc(1rem - 3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 20px rgba(168, 85, 247, 0.15);
  position: relative;
}
.mobile-link.active::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a855f7;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.8);
}

@media (max-width: 1023px) {
  .navbar-inner {
    background: rgba(8, 8, 12, 0.45) !important;
    border-color: rgba(139, 92, 246, 0.28) !important;
    box-shadow: 0 12px 50px -12px rgba(109, 40, 217, 0.55) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }
}

/* ============================================
   COOKIE CONSENT BANNER
   ============================================ */
.cc-banner {
  position: fixed;
  bottom: 1.25rem;
  left: 1.25rem;
  right: 1.25rem;
  max-width: 640px;
  margin: 0 auto;
  background: rgba(10, 5, 20, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 18px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.6), 0 0 40px -10px rgba(168, 85, 247, 0.3);
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  z-index: 9999;
  display: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.cc-banner.cc-show {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
.cc-banner-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.cc-text {
  flex: 1;
  min-width: 240px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}
.cc-text a {
  color: #c084fc;
  text-decoration: underline;
  text-decoration-color: rgba(192, 132, 252, 0.4);
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.cc-text a:hover { color: #d8b4fe; }
.cc-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}
.cc-btn {
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  white-space: nowrap;
}
.cc-btn-accept {
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
  color: #fff;
  box-shadow: 0 4px 16px -4px rgba(168, 85, 247, 0.6);
}
.cc-btn-accept:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -4px rgba(168, 85, 247, 0.8);
}
.cc-btn-decline {
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.cc-btn-decline:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
@media (max-width: 480px) {
  .cc-banner {
    bottom: 0.75rem;
    left: 0.75rem;
    right: 0.75rem;
    padding: 1rem 1.125rem;
    border-radius: 14px;
  }
  .cc-actions { width: 100%; }
  .cc-btn { flex: 1; padding: 0.7rem 1rem; }
}