/* ==========================================================================
   theme-adaptive.css  —  Mobile-first, fluid scaling (keeps your exact colors)
   Notes:
   - Uses clamp() + rem/vw so proportions stay consistent at 90%, 100%, 125% zoom
   - No HTML changes required
   - Same aesthetics, gradients, shadows, and animations preserved
   ========================================================================== */

/* ------------------------- Base / Reset ------------------------- *
/*
html {
  font-size: 0.95em !important; 
  transform-origin: top center;
}

body {
  zoom: 0.95; 
  transform-origin: top center;
}

@supports not (zoom: 0.95) {
  body {
    transform: scale(0.95);
    transform-origin: top center;
  }
}*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Palette (unchanged) */
  --primary: #0A0E27;
  --secondary: #1a1f3a;
  --accent: #6366F1;
  --accent2: #8B5CF6;
  --accent3: #EC4899;
  --accent4: #14B8A6;
  --gold: #F59E0B;
  --white: #FFFFFF;
  --light: #F8FAFC;
  --gray: #475569;
  --gray-light: #94A3B8;
  --border: #E2E8F0;

  /* Fluid type/spacing helpers */
  /* Root scale: small phones → desktops */
  --fs-root: clamp(14px, 2.4vw, 18px);

  /* Container width caps (unchanged look, fluid cap) */
  --container-max: 100rem;   /* ~1600px */
  --container-lg: 87.5rem;   /* ~1400px */

  /* Vertical section rhythm (mobile → desktop) */
  --space-section-y: clamp(6rem, 10vw, 15rem);
  --space-section-x: clamp(1.25rem, 4vw, 5rem);

  /* Card radii and blur vibes */
  --r-lg: 2.5rem;     /* 40px */
  --r-md: 2rem;       /* 32px */
  --r-sm: 1.5rem;     /* 24px */
  --r-xs: 0.875rem;   /* 14px */

  /* Header heights */
  --header-pad-y: clamp(0.75rem, 1.6vw, 1.25rem);
  --header-pad-x: clamp(1.25rem, 4vw, 2.5rem);

  /* Nav gaps */
  --nav-gap: clamp(0.75rem, 1.8vw, 2rem);

  /* Fonts (family unchanged) */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'Playfair Display', serif;
}

html {
  scroll-behavior: smooth;
  /* Fluid type */
  font-size: var(--fs-root);
}

body {
  font-family: var(--font-sans);
  color: var(--primary);
  overflow-x: hidden;
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* ------------------------- Luxury Cursor ------------------------- */
.cursor {
  width: clamp(16px, 2.2vw, 24px);
  height: clamp(16px, 2.2vw, 24px);
  border: 2px solid var(--accent);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transition: all 0.15s cubic-bezier(0.4,0,0.2,1);
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
}

.cursor.grow {
  width: clamp(40px, 6vw, 60px);
  height: clamp(40px, 6vw, 60px);
  background: rgba(99,102,241,0.2);
  border-color: transparent;
  backdrop-filter: blur(2px);
}

.cursor-follower {
  width: clamp(6px, 1vw, 8px);
  height: clamp(6px, 1vw, 8px);
  background: var(--accent);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  transition: all 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
  transform: translate(-50%, -50%);
}

/* ------------------------- Scroll Progress ------------------------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 0; height: 3px;
  background: linear-gradient(90deg, #6366F1, #8B5CF6, #EC4899, #14B8A6);
  background-size: 200% 100%;
  z-index: 10000;
  animation: shimmer 3s linear infinite;
  box-shadow: 0 0 20px rgba(99,102,241,0.5);
}

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

/* ------------------------- Floating Particles ------------------------- */
.particles-container {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 1; overflow: hidden;
}
.particle {
  position: absolute;
  width: 3px; height: 3px;
  background: var(--accent);
  border-radius: 50%; opacity: 0;
  animation: particleFloat 15s infinite;
}

@keyframes particleFloat {
  0% { opacity: 0; transform: translateY(100vh) translateX(0) scale(0); }
  10% { opacity: 0.5; }
  90% { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(-100px) translateX(100px) scale(1); }
}

/* ------------------------- Header / Nav ------------------------- */
header {
  position: fixed; inset-inline: 0; top: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border-bottom: 1px solid rgba(99,102,241,0.08);
  transition: all 0.5s cubic-bezier(0.4,0,0.2,1);
}
header.scrolled {
  background: rgba(255,255,255,0.95);
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  backdrop-filter: blur(40px) saturate(200%);
}

nav {
  width: min(100%, var(--container-max));
  margin-inline: auto;
  display: flex; justify-content: space-between; align-items: center;
  padding-inline: var(--header-pad-x);
  padding-block: var(--header-pad-y);
  transition: padding 0.5s cubic-bezier(0.4,0,0.2,1);
}
header.scrolled nav {
  /* Slightly denser on scroll */
  padding-block: clamp(0.65rem, 1.2vw, 1rem);
  padding-inline: clamp(1.25rem, 6vw, 5rem);
}

.logo {
  display: flex; align-items: center; gap: 0.875rem;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 800; color: var(--primary);
  text-decoration: none; font-family: var(--font-sans);
  letter-spacing: -0.03em;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.logo:hover { transform: scale(1.02); }

.logo-icon {
  width: clamp(36px, 3.6vw, 48px);
  height: clamp(36px, 3.6vw, 48px);
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%);
  border-radius: 23px;
  display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(99,102,241,0.4);
  animation: logoFloat 6s ease-in-out infinite;
  position: relative; overflow: hidden;
}

.logo-icon img{
  width: clamp(36px, 3.6vw, 44px);
  height: clamp(36px, 3.6vw, 44px);
}

@keyframes logoFloat {
  0%,100% { transform: translateY(0) rotate(0deg); box-shadow: 0 10px 30px rgba(99,102,241,0.4); }
  25% { transform: translateY(-5px) rotate(-2deg); box-shadow: 0 15px 40px rgba(139,92,246,0.5); }
  50% { transform: translateY(0) rotate(0deg); box-shadow: 0 20px 50px rgba(236,72,153,0.4); }
  75% { transform: translateY(-5px) rotate(2deg); box-shadow: 0 15px 40px rgba(99,102,241,0.5); }
}
.logo-icon::before {
  content: '';
  position: absolute; width: 60%; height: 60%;
  background: radial-gradient(circle, var(--white) 0%, transparent 70%);
  border-radius: 50%; top: 10%;
  animation: logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse {
  0%,100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 0.5; }
}
.logo-icon::after {
  content: '';
  position: absolute; width: 150%; height: 150%;
  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%);
  animation: logoShine 4s linear infinite;
}
@keyframes logoShine {
  0% { transform: translateX(-200%) translateY(-200%) rotate(45deg); }
  100% { transform: translateX(200%) translateY(200%) rotate(45deg); }
}

.nav-links {
  display: flex; list-style: none;
  gap: var(--nav-gap);
  align-items: center; flex-wrap: nowrap;
}
.nav-links li:last-child { margin-left: clamp(0.25rem, 1vw, 1rem); }

.nav-links a {
  text-decoration: none; color: var(--gray);
  font-weight: 600; font-size: clamp(0.85rem, 1.2vw, 0.9rem);
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
  position: relative; padding: 0.5rem;
  letter-spacing: -0.01em;
}
.nav-links a::before {
  content: '';
  position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent3));
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
  border-radius: 2px;
}
.nav-links a:hover { color: var(--primary); }
.nav-links a:hover::before { transform: translateX(-50%) scaleX(1); }

.nav-links a::after {
  content: '';
  position: absolute; bottom: -4px; left: 50%;
  transform: translateX(-50%) scale(0);
  width: 6px; height: 6px; background: var(--accent);
  border-radius: 50%;
  transition: transform 0.4s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.nav-links a:hover::after { transform: translateX(-50%) scale(1); }

/* CTA Button (unchanged styling, fluid size) */
.cta-button {
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%);
  color: var(--white);
  padding: clamp(0.625rem, 1.3vw, 0.875rem) clamp(1.25rem, 3vw, 2rem);
  border-radius: 10px;
  text-decoration: none; font-weight: 700;
  font-size: clamp(0.8rem, 1.15vw, 0.875rem);
  letter-spacing: -0.01em;
  box-shadow: 0 8px 24px rgba(99,102,241,0.35);
  border: none; position: relative; overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
  white-space: nowrap; display: inline-block;
}
.cta-button::before {
  content: '';
  position: absolute; inset: 0; left: -100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 0.6s;
}
.cta-button:hover::before { left: 100%; }
.cta-button::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, #EC4899 0%, #8B5CF6 50%, #6366F1 100%);
  opacity: 0; transition: opacity 0.4s; border: none;
}
.cta-button:hover::after { opacity: 1; }
.cta-button span { position: relative; z-index: 1; }
.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(99,102,241,0.5);
}

.white{
    color: #FFFFFF !important;
}
/* Mobile nav trigger */
.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer; gap: 7px;
  padding: 10px; z-index: 10;
}
.menu-toggle span {
  width: 28px; height: 3px;
  background: var(--primary);
  border-radius: 3px;
  transition: all 0.4s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(8px, 8px); }
.menu-toggle.active span:nth-child(2) { opacity: 0; transform: translateX(20px); }
.menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(8px, -8px); }

/* ------------------------- Hero ------------------------- */
.hero {
  min-height: 100svh;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #0A0E27 0%, #1a1f3a 100%);
  position: relative; overflow: hidden;
  padding: clamp(6rem, 8vw, 10rem) var(--space-section-x) clamp(4rem, 6vw, 6rem);
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(99,102,241,0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(139,92,246,0.12) 0%, transparent 50%),
    radial-gradient(circle at 40% 70%, rgba(236,72,153,0.1) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(20,184,166,0.08) 0%, transparent 50%);
  animation: gradientShift 20s ease infinite;
}
@keyframes gradientShift {
  0%,100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(1.1) rotate(5deg); opacity: 0.8; }
}
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, rgba(99,102,241,0.03) 50%, transparent 100%),
    linear-gradient(0deg, transparent 0%, rgba(139,92,246,0.03) 50%, transparent 100%);
  background-size: 100px 100px, 100px 100px;
  animation: meshMove 15s linear infinite;
}
@keyframes meshMove {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 100px 100px, 100px 100px; }
}

/* Animated orbs */
.orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.6; animation: orbFloat 20s infinite ease-in-out; }
.orb-1 { width: clamp(260px, 32vw, 500px); height: clamp(260px, 32vw, 500px); background: radial-gradient(circle, rgba(99,102,241,0.4) 0%, transparent 70%); top: 10%; left: 5%; animation-delay: 0s; }
.orb-2 { width: clamp(220px, 26vw, 400px); height: clamp(220px, 26vw, 400px); background: radial-gradient(circle, rgba(139,92,246,0.35) 0%, transparent 70%); bottom: 15%; right: 10%; animation-delay: 3s; }
.orb-3 { width: clamp(240px, 28vw, 450px); height: clamp(240px, 28vw, 450px); background: radial-gradient(circle, rgba(236,72,153,0.3) 0%, transparent 70%); top: 50%; right: 15%; animation-delay: 6s; }
.orb-4 { width: clamp(200px, 24vw, 350px); height: clamp(200px, 24vw, 350px); background: radial-gradient(circle, rgba(20,184,166,0.25) 0%, transparent 70%); bottom: 20%; left: 20%; animation-delay: 9s; }

@keyframes orbFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  25% { transform: translate(50px,-50px) scale(1.1); }
  50% { transform: translate(-30px,30px) scale(0.95); }
  75% { transform: translate(40px,20px) scale(1.05); }
}

.hero-content {
  width: min(100%, var(--container-max));
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 8rem);
  align-items: center;
  position: relative; z-index: 2;
}
.hero-text { animation: fadeInUp 1.2s cubic-bezier(0.22,0.61,0.36,1); }

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

.hero-badge {
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 0.625rem 1.25rem;
  background: rgba(99,102,241,0.08);
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: 60px; color: var(--accent);
  font-size: clamp(0.75rem, 1.1vw, 0.875rem);
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: clamp(1.25rem, 3vw, 2.5rem);
  animation: badgePulse 4s ease-in-out infinite;
  backdrop-filter: blur(10px);
}
@keyframes badgePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(99,102,241,0.4); transform: scale(1); }
  50% { box-shadow: 0 0 0 12px rgba(99,102,241,0); transform: scale(1.02); }
}
.hero-badge i { animation: spin 3s linear infinite; }
@keyframes spin { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }

.hero-text h1 {
  font-size: clamp(2.25rem, 7.5vw, 6rem);
  font-weight: 900; color: var(--white);
  margin-bottom: clamp(1.25rem, 3vw, 2.5rem);
  line-height: 1.08; letter-spacing: -0.045em;
  text-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.text-reveal { overflow: hidden; display: inline-block; }
.text-reveal span {
  display: inline-block;
  animation: revealText 1s cubic-bezier(0.22,0.61,0.36,1) forwards;
  opacity: 0; transform: translateY(100%);
}
@keyframes revealText { to { opacity: 1; transform: translateY(0); } }

.gradient-text {
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 35%, #EC4899 70%, #14B8A6 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; display: inline-block;
  animation: gradientFlow 8s ease infinite; position: relative;
}
@keyframes gradientFlow {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.gradient-text::after {
  content: ''; position: absolute; inset: 0;
  background: inherit; filter: blur(20px); opacity: 0.5; z-index: -1;
}

.hero-text p {
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  color: rgba(255,255,255,0.8);
  margin-bottom: clamp(2rem, 5vw, 4rem);
  line-height: 1.85; font-weight: 400; max-width: 42rem;
  animation: fadeInUp 1.2s cubic-bezier(0.22,0.61,0.36,1) 0.3s both;
}

.hero-buttons {
  display: flex; gap: clamp(0.875rem, 2vw, 1.75rem); align-items: center;
  animation: fadeInUp 1.2s cubic-bezier(0.22,0.61,0.36,1) 0.6s both;
  flex-wrap: wrap;
}

.btn-primary {
  background: var(--white); color: var(--primary);
  padding: clamp(1rem, 2.4vw, 1.5rem) clamp(1.5rem, 3.6vw, 3.25rem);
  border-radius: 14px; text-decoration: none;
  font-weight: 700; font-size: clamp(1rem, 1.6vw, 1.125rem);
  letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 1rem;
  position: relative; overflow: hidden;
  transition: all 0.5s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 12px 40px rgba(255,255,255,0.25);
}
.btn-primary::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 0; height: 0; border-radius: 50%; background: var(--light);
  transition: width 0.8s, height 0.8s, top 0.8s, left 0.8s;
  transform: translate(-50%, -50%); z-index: 0;
}
.btn-primary:hover::before { width: 400px; height: 400px; }
.btn-primary span, .btn-primary i { position: relative; z-index: 1; }
.btn-primary:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 20px 60px rgba(255,255,255,0.35);
}
.btn-primary:hover i { transform: translateX(6px); transition: transform 0.5s cubic-bezier(0.68,-0.55,0.265,1.55); }

.btn-secondary {
  background: rgba(255,255,255,0.08); color: var(--white);
  padding: clamp(1rem, 2.4vw, 1.5rem) clamp(1.5rem, 3.6vw, 3.25rem);
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 14px; text-decoration: none; font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.125rem); letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: 1rem;
  backdrop-filter: blur(20px); position: relative; overflow: hidden;
  transition: all 0.5s cubic-bezier(0.4,0,0.2,1);
}
.btn-secondary::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(236,72,153,0.2));
  opacity: 0; transition: opacity 0.5s;
}
.btn-secondary:hover::before { opacity: 1; }
.btn-secondary:hover {
  background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.4);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(99,102,241,0.3);
}
.btn-secondary i { transition: transform 0.5s cubic-bezier(0.68,-0.55,0.265,1.55); }
.btn-secondary:hover i { transform: scale(1.2) rotate(15deg); }

/* Hero visual card */
.hero-visual { position: relative; animation: fadeInRight 1.2s cubic-bezier(0.22,0.61,0.36,1) 0.4s both; }
@keyframes fadeInRight { from { opacity: 0; transform: translateX(60px);} to { opacity: 1; transform: translateX(0);} }

.hero-card {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(50px) saturate(180%);
  -webkit-backdrop-filter: blur(50px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-lg);
  padding: clamp(2rem, 4.2vw, 3rem) clamp(1.5rem, 3.4vw, 2.5rem);
  box-shadow: 0 40px 100px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.1);
  position: relative; overflow: hidden; transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.4,0,0.2,1);
}
.hero-card::before {
  content: ''; position: absolute; inset: -2px;
  background: linear-gradient(135deg, rgba(99,102,241,0.5), rgba(139,92,246,0.5), rgba(236,72,153,0.5), rgba(99,102,241,0.5));
  background-size: 300% 300%; border-radius: var(--r-lg);
  opacity: 0; transition: opacity 0.8s; animation: gradientRotate 6s ease infinite; z-index: -1;
}
@keyframes gradientRotate { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.hero-card:hover::before { opacity: 0.6; }
.hero-card:hover { transform: translateY(-10px) rotateX(2deg) rotateY(-2deg); }
.hero-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  animation: cardShine 8s linear infinite;
}
@keyframes cardShine { 0% { left: -100%; } 50%,100% { left: 100%; } }

.hero-card h3 {
  color: var(--white);
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  margin-bottom: clamp(1.75rem, 3.2vw, 3.5rem);
  text-align: center; font-weight: 700; letter-spacing: -0.02em; position: relative;
}
.hero-card h3::after {
  content: ''; position: absolute; bottom: -1.25rem; left: 50%;
  transform: translateX(-50%); width: 60px; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent3)); border-radius: 3px;
}
.stats-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.4vw, 1.5rem);
}
.stat-item {
  text-align: center; padding: clamp(1.25rem, 4vw, 2rem) clamp(0.75rem, 2.2vw, 1rem);
  background: rgba(255,255,255,0.03); border-radius: 24px; border: 1px solid rgba(255,255,255,0.08);
  transition: all 0.6s cubic-bezier(0.4,0,0.2,1);
  position: relative; overflow: visible; min-height: clamp(120px, 16vw, 160px);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.stat-item::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(236,72,153,0.1));
  opacity: 0; transition: opacity 0.6s;
}
.stat-item:hover::before { opacity: 1; }
.stat-item:hover {
  background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.2);
  transform: translateY(-12px) scale(1.05);
  box-shadow: 0 30px 60px rgba(99,102,241,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
}
.stat-number {
  font-size: clamp(1.75rem, 5.2vw, 3rem);
  font-weight: 900;
  background: linear-gradient(135deg, #6366F1, #8B5CF6, #EC4899);
  background-size: 200% 200%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; font-family: var(--font-sans);
  letter-spacing: -0.02em; position: relative; z-index: 1;
  animation: numberGlow 3s ease infinite; white-space: nowrap; line-height: 1.2;
  width: 100%;
}
@keyframes numberGlow { 0%,100% { text-shadow: 0 0 20px rgba(99,102,241,0.5);} 50% { text-shadow: 0 0 40px rgba(236,72,153,0.8);} }
.stat-label {
  color: rgba(255,255,255,0.7);
  font-size: clamp(0.9rem, 1.4vw, 1rem);
  margin-top: 1.25rem; font-weight: 600; position: relative; z-index: 1; letter-spacing: -0.01em;
}

/* ------------------------- Services ------------------------- */
.services {
  padding: var(--space-section-y) var(--space-section-x);
  width: min(100%, var(--container-max));
  margin-inline: auto; position: relative;
}
.services::before {
  content: ''; position: absolute; top: 0; left: 50%;
  transform: translateX(-50%); width: 1px; height: 100px;
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
}
.section-header {
  text-align: center; margin-bottom: clamp(4rem, 6vw, 10rem);
  width: min(100%, 56.25rem); /* ~900px */
  margin-inline: auto; position: relative;
}
.section-badge {
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 0.625rem 1.25rem;
  background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(236,72,153,0.08));
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: 60px; color: var(--accent);
  font-size: clamp(0.75rem, 1.1vw, 0.875rem);
  font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: clamp(1rem, 2vw, 2rem);
  animation: badgeFloat 3s ease-in-out infinite;
}
@keyframes badgeFloat { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-10px);} }

.section-title {
  font-size: clamp(2rem, 7vw, 5rem);
  font-weight: 900; color: var(--primary);
  margin-bottom: clamp(1.25rem, 3vw, 2.5rem);
  letter-spacing: -0.045em; line-height: 1.1; position: relative;
}
.section-description {
  font-size: clamp(1rem, 2vw, 1.35rem);
  color: var(--gray); line-height: 1.85; font-weight: 400;
  margin-inline: auto; width: min(100%, 52rem);
}

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 3.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 52rem) { /* ~832px */
  .services-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 75rem) { /* ~1200px */
  .services-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

.service-card {
  background: var(--white); border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--border);
  transition: all 0.8s cubic-bezier(0.4,0,0.2,1);
  cursor: pointer; position: relative;
  box-shadow: 0 4px 24px rgba(0,0,0,0.04);
}
.service-card::before {
  content: ''; position: absolute; inset: -2px;
  background: linear-gradient(135deg, rgba(99,102,241,0.8), rgba(139,92,246,0.8), rgba(236,72,153,0.8));
  background-size: 200% 200%;
  border-radius: var(--r-md); opacity: 0; z-index: -1;
  transition: opacity 0.8s; animation: borderGlow 3s ease infinite;
}
@keyframes borderGlow { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.service-card:hover::before { opacity: 1; }
.service-card:hover {
  transform: translateY(-20px) scale(1.02);
  box-shadow: 0 40px 80px rgba(99,102,241,0.25), 0 0 0 1px rgba(255,255,255,0.1) inset;
  border-color: transparent;
}

.service-image-wrapper {
  width: 100%;
  height: clamp(220px, 34vw, 340px);
  overflow: hidden; position: relative;
  background: linear-gradient(135deg, var(--light), #e0e7ff);
}
.service-image { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(0.4,0,0.2,1); }
.service-card:hover .service-image { transform: scale(1.2) rotate(3deg); }

.service-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(99,102,241,0.9), rgba(236,72,153,0.9));
  opacity: 0; transition: opacity 0.8s cubic-bezier(0.4,0,0.2,1);
  display: grid; place-items: center;
}
.service-card:hover .service-overlay { opacity: 1; }

.service-overlay-content {
  transform: scale(0) rotate(-180deg);
  transition: transform 0.8s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.service-card:hover .service-overlay-content { transform: scale(1) rotate(0deg); }
.service-overlay-icon { font-size: clamp(3rem, 6vw, 5rem); color: var(--white); }

.service-content {
  padding: clamp(1.5rem, 4vw, 3.5rem);
  position: relative; background: var(--white);
}
.service-icon {
  width: clamp(54px, 6vw, 72px); height: clamp(54px, 6vw, 72px);
  background: linear-gradient(135deg, #6366F1, #EC4899);
  border-radius: 20px; display: grid; place-items: center;
  margin-bottom: clamp(1.25rem, 3vw, 2.5rem);
  font-size: clamp(1.25rem, 3.2vw, 2rem); color: var(--white);
  box-shadow: 0 12px 32px rgba(99,102,241,0.4);
  transition: all 0.8s cubic-bezier(0.68,-0.55,0.265,1.55); position: relative;
}
.service-icon::before {
  content: ''; position: absolute; inset: -4px; background: inherit;
  border-radius: 20px; opacity: 0; filter: blur(12px); transition: opacity 0.8s;
}
.service-card:hover .service-icon::before { opacity: 0.8; animation: iconPulse 2s ease infinite; }
@keyframes iconPulse { 0%,100% { transform: scale(1);} 50% { transform: scale(1.2);} }
.service-card:hover .service-icon {
  transform: scale(1.15) rotate(15deg) translateY(-5px);
  box-shadow: 0 20px 48px rgba(99,102,241,0.6);
}
.service-title {
  font-size: clamp(1.375rem, 3vw, 2.25rem);
  font-weight: 800; color: var(--primary);
  margin-bottom: clamp(0.75rem, 2vw, 1.5rem);
  letter-spacing: -0.03em; transition: all 0.4s;
}
.service-card:hover .service-title {
  background: linear-gradient(135deg, var(--accent), var(--accent3));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.service-description {
  color: var(--gray);
  margin-bottom: clamp(1.25rem, 3vw, 3rem); line-height: 1.85;
  font-size: clamp(0.95rem, 1.6vw, 1.125rem);
}
.service-link {
  color: var(--accent); font-weight: 700; text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.875rem;
  font-size: clamp(0.95rem, 1.4vw, 1.0625rem);
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1); position: relative; padding: 0.5rem 0;
}
.service-link::after {
  content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent3));
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
}
.service-link:hover::after { width: calc(100% - 2.5rem); }
.service-link i { transition: transform 0.4s cubic-bezier(0.68,-0.55,0.265,1.55); }
.service-link:hover i { transform: translateX(10px) scale(1.2); }

/* ------------------------- Features ------------------------- */
.features {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 50%, #f8fafc 100%);
  padding: var(--space-section-y) var(--space-section-x);
  position: relative; overflow: hidden;
}
.features::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 10% 20%, rgba(99,102,241,0.05) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(236,72,153,0.05) 0%, transparent 50%);
}
.features-grid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(3rem, 6vw, 8rem);
  width: min(100%, var(--container-max));
  margin-inline: auto; position: relative;
}
@media (min-width: 52rem) { .features-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 75rem) { .features-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.feature-item {
  background: var(--white);
  padding: clamp(1.75rem, 5vw, 4rem) clamp(1.5rem, 4.4vw, 3.5rem);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  transition: all 0.6s cubic-bezier(0.4,0,0.2,1);
  position: relative; overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.04);
}
.feature-item::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, #6366F1, #8B5CF6, #EC4899, #14B8A6);
  background-size: 200% 100%; transform: scaleX(0); transform-origin: left;
  transition: transform 0.8s cubic-bezier(0.4,0,0.2,1);
  animation: topBorderFlow 3s linear infinite;
}
@keyframes topBorderFlow { 0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; } }
.feature-item:hover::before { transform: scaleX(1); }
.feature-item::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(99,102,241,0.03), rgba(236,72,153,0.03));
  opacity: 0; transition: opacity 0.6s;
}
.feature-item:hover::after { opacity: 1; }
.feature-item:hover {
  transform: translateY(-15px);
  box-shadow: 0 30px 70px rgba(99,102,241,0.2), 0 0 0 1px rgba(99,102,241,0.1) inset;
  border-color: rgba(99,102,241,0.2);
}
.feature-icon {
  width: clamp(60px, 7vw, 88px); height: clamp(60px, 7vw, 88px);
  background: linear-gradient(135deg, #6366F1, #8B5CF6, #EC4899);
  border-radius: 24px; display: grid; place-items: center;
  margin-bottom: clamp(1.25rem, 3.4vw, 3rem);
  font-size: clamp(1.5rem, 3.6vw, 2.5rem); color: var(--white);
  box-shadow: 0 16px 40px rgba(99,102,241,0.35);
  transition: all 0.8s cubic-bezier(0.68,-0.55,0.265,1.55); position: relative;
}
.feature-icon::before {
  content: ''; position: absolute; inset: -6px; background: inherit; border-radius: 24px;
  opacity: 0; filter: blur(16px); transition: opacity 0.8s;
}
.feature-item:hover .feature-icon::before { opacity: 0.9; animation: iconGlow 2s ease infinite; }
@keyframes iconGlow { 0%,100% { transform: scale(1); opacity: 0.9;} 50% { transform: scale(1.15); opacity: 0.6;} }
.feature-item:hover .feature-icon {
  transform: scale(1.2) rotate(12deg) translateY(-8px);
  box-shadow: 0 24px 56px rgba(99,102,241,0.5);
}
.feature-title {
  font-size: clamp(1.25rem, 2.6vw, 2rem);
  font-weight: 700; color: var(--primary);
  margin-bottom: clamp(0.75rem, 2vw, 1.5rem);
  letter-spacing: -0.02em;
}
.feature-description {
  color: var(--gray); line-height: 1.85;
  font-size: clamp(0.95rem, 1.6vw, 1.125rem);
}

/* ------------------------- CTA ------------------------- */
.cta-section {
  background: linear-gradient(135deg, #0A0E27 0%, #1a1f3a 100%);
  padding: var(--space-section-y) var(--space-section-x);
  text-align: center; position: relative; overflow: hidden;
}
.cta-section::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(99,102,241,0.15) 0%, transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(236,72,153,0.12) 0%, transparent 50%);
  animation: gradientShift 20s ease infinite;
}
.cta-bg-orb { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.4; animation: orbFloat 25s infinite ease-in-out; }
.cta-bg-orb-1 { width: clamp(360px, 38vw, 600px); height: clamp(360px, 38vw, 600px); background: radial-gradient(circle, rgba(99,102,241,0.5) 0%, transparent 70%); top: -300px; right: -200px; animation-delay: 0s; }
.cta-bg-orb-2 { width: clamp(300px, 32vw, 500px); height: clamp(300px, 32vw, 500px); background: radial-gradient(circle, rgba(236,72,153,0.4) 0%, transparent 70%); bottom: -250px; left: -150px; animation-delay: 5s; }

.cta-content { width: min(100%, 62.5rem); margin-inline: auto; position: relative; z-index: 1; }
.cta-content h2 {
  font-size: clamp(2rem, 7vw, 5rem);
  color: var(--white); margin-bottom: clamp(1.25rem, 3vw, 2.5rem);
  font-weight: 900; letter-spacing: -0.045em; line-height: 1.1;
  text-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
.cta-content p {
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  color: rgba(255,255,255,0.8);
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.85;
}
.cta-form {
  display: flex; flex-direction: column; gap: clamp(0.75rem, 2vw, 1.5rem);
  width: min(100%, 43.75rem); /* 700px */
  margin: 0 auto clamp(3rem, 8vw, 6rem);
}
.cta-input {
  flex: 1; padding: clamp(1rem, 2.8vw, 1.75rem) clamp(1.25rem, 3.4vw, 2.5rem);
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(20px);
  border-radius: 16px; font-size: clamp(0.95rem, 1.6vw, 1.125rem);
  outline: none; color: var(--white); font-family: var(--font-sans);
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
}
.cta-input::placeholder { color: rgba(255,255,255,0.5); }
.cta-input:focus {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.3);
  box-shadow: 0 0 0 4px rgba(99,102,241,0.2), 0 12px 40px rgba(99,102,241,0.3);
  transform: translateY(-2px);
}
.cta-submit {
  background: var(--white); color: var(--primary);
  padding: clamp(1rem, 3vw, 1.75rem) clamp(1.5rem, 4vw, 3.5rem);
  border: none; border-radius: 16px;
  font-weight: 800; font-size: clamp(1rem, 1.6vw, 1.125rem);
  cursor: pointer; transition: all 0.5s cubic-bezier(0.4,0,0.2,1);
  font-family: var(--font-sans); letter-spacing: -0.01em;
  position: relative; overflow: hidden;
}
.cta-submit::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 0; height: 0; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent3));
  transition: width 0.8s, height 0.8s, top 0.8s, left 0.8s;
  transform: translate(-50%, -50%); z-index: 0;
}
.cta-submit:hover::before { width: 400px; height: 400px; }
.cta-submit span { position: relative; z-index: 1; }
.cta-submit:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 20px 60px rgba(255,255,255,0.4);
}
.cta-submit:hover span { color: var(--white); }

.contact-info {
  display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 3vw, 2rem);
  justify-content: center;
}
@media (min-width: 48rem) { /* ~768px */
  .contact-info { grid-template-columns: repeat(3, minmax(0, auto)); justify-content: center; gap: clamp(2rem, 4vw, 5rem); }
}
.contact-item {
  display: flex; align-items: center; gap: 1.25rem;
  color: rgba(255,255,255,0.7);
  padding: clamp(0.875rem, 2.6vw, 1.25rem) clamp(1.25rem, 3.6vw, 2rem);
  border-radius: 16px; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  transition: all 0.5s cubic-bezier(0.4,0,0.2,1);
  backdrop-filter: blur(20px);
}
.contact-item:hover {
  transform: translateY(-5px);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
  color: var(--white);
  box-shadow: 0 12px 40px rgba(99,102,241,0.3);
}
.contact-item i {
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  background: linear-gradient(135deg, var(--accent), var(--accent3));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ------------------------- Footer ------------------------- */
footer {
  background: linear-gradient(180deg, #0A0E27 0%, #050811 100%);
  color: var(--white);
  padding: clamp(5rem, 8vw, 10rem) var(--space-section-x) clamp(2rem, 3vw, 3rem);
  position: relative; overflow: hidden;
}
footer::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,0.5), transparent);
}
footer::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(99,102,241,0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(236,72,153,0.06) 0%, transparent 50%);
}
.footer-content {
  width: min(100%, var(--container-max));
  margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 6rem);
  margin-bottom: clamp(2.5rem, 6vw, 6rem);
  position: relative; z-index: 1;
}
@media (min-width: 52rem) { .footer-content { grid-template-columns: 2fr 1fr 1fr 1.5fr; } }

.footer-section h3 {
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  margin-bottom: clamp(1.25rem, 3vw, 2.5rem);
  font-weight: 700; letter-spacing: -0.02em;
  font-family: var(--font-sans);
}
.footer-section p {
  color: rgba(255,255,255,0.6);
  line-height: 1.85;
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
  font-size: clamp(0.95rem, 1.6vw, 1.0625rem);
}

.footer-links { list-style: none; }
.footer-links li { margin-bottom: clamp(0.75rem, 2vw, 1.5rem); }
.footer-links a {
  color: rgba(255,255,255,0.6); text-decoration: none;
  font-size: clamp(0.95rem, 1.6vw, 1.0625rem);
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
  display: inline-block; position: relative;
}
.footer-links a::before {
  content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent3));
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
}
.footer-links a:hover { color: var(--white); transform: translateX(10px); }
.footer-links a:hover::before { width: 100%; }
.footer-links li i {
  margin-right: 1rem;
  background: linear-gradient(135deg, var(--accent), var(--accent3));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  width: 24px;
}

.social-links {
  display: flex; gap: clamp(0.75rem, 2.4vw, 1.5rem);
  margin-top: clamp(1rem, 3vw, 3rem);
}
.social-link {
  width: clamp(44px, 5vw, 56px); height: clamp(44px, 5vw, 56px);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px; display: grid; place-items: center;
  color: var(--white); text-decoration: none;
  transition: all 0.5s cubic-bezier(0.68,-0.55,0.265,1.55);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  position: relative; overflow: hidden;
}
.social-link::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent3));
  opacity: 0; transition: opacity 0.5s;
}
.social-link:hover::before { opacity: 1; }
.social-link i { position: relative; z-index: 1; }
.social-link:hover {
  border-color: transparent; transform: translateY(-8px) rotate(10deg) scale(1.1);
  box-shadow: 0 16px 40px rgba(99,102,241,0.5), 0 0 0 4px rgba(99,102,241,0.2);
}

.footer-bottom {
  width: min(100%, var(--container-max));
  margin: 0 auto; padding-top: clamp(1.5rem, 3.6vw, 4rem);
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: center; color: rgba(255,255,255,0.5);
  font-size: clamp(0.95rem, 1.6vw, 1.0625rem);
  position: relative; z-index: 1;
}
.footer-bottom i { color: #EF4444; margin: 0 0.5rem; animation: heartBeat 1.5s ease infinite; }
@keyframes heartBeat { 0%,100% { transform: scale(1);} 10%,30% { transform: scale(1.2);} }

/* ------------------------- Scroll Reveal ------------------------- */
.fade-in {
  opacity: 0; transform: translateY(60px);
  transition: all 1.2s cubic-bezier(0.22,0.61,0.36,1);
}
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ------------------------- Responsive (Mobile-first) ------------------------- */
/* Base mobile already optimized. Enhance progressively. */

/* ≥ 480px */
@media (min-width: 30rem) {
  .hero-buttons { flex-wrap: nowrap; }
}

/* ≥ 768px */
@media (min-width: 48rem) {
  .menu-toggle { display: none; } /* can be toggled via JS for mobile */
  .hero-content {
    grid-template-columns: 1fr; /* stays stacked until 1024 for breathing room */
  }
  .nav-links { position: static; flex-direction: row; background: transparent; width: auto; padding: 0; box-shadow: none; }
  .cursor, .cursor-follower { display: none; } /* keep off on touch-first devices */
  .footer-content { grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 5vw, 4rem); }
  .stats-grid { grid-template-columns: 1fr 1fr; }
}

/* ≥ 1024px */
@media (min-width: 64rem) {
  nav, .hero-content, .footer-content { width: min(100%, var(--container-lg)); }
  .hero-content { grid-template-columns: 1.2fr 0.8fr; gap: clamp(3rem, 6vw, 8rem); }
  .hero-text h1 { font-size: clamp(3rem, 6.5vw, 4rem); }
  .section-title { font-size: clamp(2.5rem, 6vw, 3.5rem); }
  .cta-content h2 { font-size: clamp(2.25rem, 6.5vw, 4rem); }
  .footer-content { grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: clamp(2.5rem, 5vw, 6rem); }
}

/* ≥ 1200px */
@media (min-width: 75rem) {
  nav { padding: clamp(1rem, 2.2vw, 1.5rem) clamp(2rem, 4vw, 3rem); }
  .hero, .services, .features, .cta-section, footer {
    padding-left: clamp(2rem, 4vw, 3rem);
    padding-right: clamp(2rem, 4vw, 3rem);
  }
}

/* ≥ 1440px */
@media (min-width: 90rem) {
  nav, .hero-content, .footer-content { width: min(100%, var(--container-max)); }
  .nav-links { gap: clamp(1rem, 1.6vw, 1.25rem); }
  .nav-links a { font-size: clamp(0.8rem, 1vw, 0.85rem); }
  .cta-button { padding: clamp(0.6rem, 1vw, 0.75rem) clamp(1.25rem, 2vw, 1.5rem); font-size: clamp(0.78rem, 1vw, 0.8rem); }
  .logo { font-size: clamp(1.05rem, 1.3vw, 1.15rem); }
  .logo-icon { width: clamp(40px, 3.2vw, 44px); height: clamp(40px, 3.2vw, 44px); }
}

/* ------------------------- Mobile Menu Styles ------------------------- */
/* Only active under 768px; JS toggles .active on .nav-links and .menu-toggle */
@media (max-width: 48rem) {
  .nav-links {
    position: fixed;
    top: calc(56px + 1.5rem);
    left: -100%;
    flex-direction: column;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(30px);
    width: 100%;
    padding: clamp(1.25rem, 6vw, 3rem) clamp(1rem, 5vw, 2rem);
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    transition: left 0.5s cubic-bezier(0.4,0,0.2,1);
    gap: 0; align-items: flex-start; z-index: 999;
  }
  .nav-links li { width: 100%; padding: 1.25rem 0; border-bottom: 1px solid var(--border); }
  .nav-links li:last-child { border-bottom: none; }
  .nav-links.active { left: 0; }
  .menu-toggle { display: flex; }
}

/* ------------------------- Accessibility helpers ------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   🖱️ Desktop Cursor Animations (Restored)
   ========================================================================== */

/* Only apply on non-touch devices */
@media (hover: hover) and (pointer: fine) {
  .cursor, .cursor-follower {
    display: block;
  }

  /* Cursor setup */
  .cursor {
    width: clamp(16px, 2.2vw, 24px);
    height: clamp(16px, 2.2vw, 24px);
    border: 2px solid var(--accent);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
    transition:
      width 0.2s ease,
      height 0.2s ease,
      background 0.3s ease,
      border 0.3s ease,
      transform 0.1s ease;
  }

  .cursor.grow {
    width: clamp(40px, 6vw, 60px);
    height: clamp(40px, 6vw, 60px);
    background: rgba(99,102,241,0.25);
    border-color: transparent;
    backdrop-filter: blur(2px);
    mix-blend-mode: normal;
  }

  /* Follower trail */
  .cursor-follower {
    width: clamp(6px, 1vw, 8px);
    height: clamp(6px, 1vw, 8px);
    background: var(--accent);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition:
      transform 0.15s ease-out,
      opacity 0.3s ease;
  }

  /* Hover states */
  a:hover ~ .cursor,
  button:hover ~ .cursor {
    background: rgba(99,102,241,0.2);
    border-color: rgba(99,102,241,0.4);
  }

  .cta-button:hover ~ .cursor,
  .btn-primary:hover ~ .cursor,
  .service-card:hover ~ .cursor {
    background: rgba(236,72,153,0.25);
    border-color: transparent;
    transform: translate(-50%, -50%) scale(1.4);
  }

  /* Hide on scroll or overlay menus if needed */
  body.menu-open .cursor,
  body.menu-open .cursor-follower {
    opacity: 0;
  }
}