@keyframes float {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(1deg); } /* Reduced amplitude */
  100% { transform: translateY(0px) rotate(0deg); }
}

/* Pillar.io-style Smooth Momentum */
html, body {
  scroll-behavior: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Hardware Acceleration for Premium Motion - Restricted on Mobile */
.animate-float, 
.animate-aurora, 
.magnetic-btn, 
.animate-marquee, 
.animate-marquee-reverse,
.parallax-layer,
.reveal-on-scroll,
[data-purpose="aurora-background"] div {
  will-change: transform, opacity;
}

@media (max-width: 768px) {
  /* PHASE 2: REDUCE LAYER PRESSURE - Remove global will-change on mobile */
  .animate-float, 
  .animate-aurora, 
  .magnetic-btn, 
  .animate-marquee, 
  .animate-marquee-reverse,
  .parallax-layer,
  .reveal-on-scroll,
  [data-purpose="aurora-background"] div {
    will-change: auto !important;
  }
}

/* Parallax Depth System */
.parallax-bg { will-change: transform; transition: transform 0.2s ease-out; }
.parallax-mid { will-change: transform; transition: transform 0.2s ease-out; }
.parallax-fg { will-change: transform; transition: transform 0.2s ease-out; }


@keyframes aurora {
  0% {
    filter: hue-rotate(0deg) blur(80px);
    opacity: 0.4;
  }

  50% {
    filter: hue-rotate(30deg) blur(100px);
    opacity: 0.6;
  }

  100% {
    filter: hue-rotate(0deg) blur(80px);
    opacity: 0.4;
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-aurora {
  animation: aurora 10s ease-in-out infinite;
}

.glass-card {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
}

.glass-dark {
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-light {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 32px -4px rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) {
  /* RESTORE BACKDROP FILTER (MOBILE) - Now performance-safe on modern devices */
  .glass-card, .glass-dark {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }
  .glass-card {
    background: rgba(255, 255, 255, 0.4) !important;
  }
  .glass-dark {
    background: rgba(15, 23, 42, 0.8) !important;
  }
  
  /* RESTORE AURORA & FLOAT ANIMATIONS (PREMIUM FEEL) */
}


.magnetic-btn {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease-out, background-color 0.25s ease-out;
}

.magnetic-btn:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Proportional Typography & Alignment */
h1 { font-size: clamp(2.5rem, 6vw, 5rem) !important; line-height: 1.1; }
h2 { font-size: clamp(2rem, 5vw, 4rem) !important; line-height: 1.2; }
p { font-size: clamp(1rem, 1.2vw, 1.25rem) !important; line-height: 1.6; }

/* Fixed Header Responsiveness */
/* Header Stability */
header {
  position: fixed !important;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: 1000;
}

nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: min(95%, 1100px); /* Wider than hero but still contained */
  margin: 0 auto;
  padding: 0.75rem 1.5rem !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

nav .hidden.md\:flex {
  gap: clamp(1rem, 2vw, 2rem) !important;
}

/* Section Normalization */
section {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}

/* Premium Hover Scaling for Cards */
.glass-card, .glass-dark {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease-out, border-color 0.4s ease-out;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.04);
}

.glass-card:hover, .glass-dark:hover {
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
}

/* Re-apply shift only to non-navigation cards for depth */
section .glass-card:not(.simulator-wrapper):hover, section .glass-dark:not(.simulator-wrapper):hover {
  transform: translateY(-2px);
}

/* Simulator Rendering Stability */
.simulator-wrapper {
  /* Simplified for maximum compatibility with backdrop-filter */
  transform-origin: top center;
  transition: border-color 0.4s ease-out, box-shadow 0.4s ease-out !important;
  contain: layout style;
  /* LAYER PROMOTION: Force hardware acceleration */
  transform: translateZ(0);
  will-change: transform;
  
  /* FILTER ISOLATION: Move blur to a static pseudo-element to prevent 
     re-compositing on every text update. */
  position: relative;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.simulator-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: inherit;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: inherit;
  pointer-events: none;
}



/* Stability for incrementing counters */
#simulator [id^="out-"], #simulator [id^="display-"], #projection-table-body td {
  display: inline-block;
  /* TABULAR NUMS: Prevents layout jitter by ensuring digits have equal width */
  font-variant-numeric: tabular-nums;
}
/* Responsive Hero Stabilization */
#hero {
  min-height: auto !important;
  padding-top: clamp(100px, 12vh, 140px); /* Optimized for normal website feel */
  padding-bottom: var(--hero-pb);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.hero-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  max-width: 1150px; /* Refined for a balanced 'normal' hero look */
  margin: 0 auto;
  gap: 60px;
}

.hero h1 {
  font-size: clamp(2.25rem, 5vw, 4rem); /* Premium scale, not billboard */
  line-height: 1.1;
  margin-bottom: 2rem !important;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.hero p {
  font-size: clamp(1.1rem, 1.3vw, 1.4rem) !important;
  margin-bottom: 2.5rem !important;
  color: #64748b;
  max-width: 540px;
}

.hero-visual {
  max-width: 380px;
  width: 100%;
}

.button-group {
  display: flex;
  gap: 20px;
}

@media (max-width: 768px) {
  #hero {
    padding-top: 140px; /* Safe mobile offset to prevent overlap */
    padding-bottom: 80px;
  }

  .hero-container {
    flex-direction: column !important;
    text-align: center;
    align-items: center;
    gap: 50px;
  }

  .hero-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
  }

  .hero h1 {
    font-size: 2.5rem; /* Larger than before for mobile clarity */
    text-align: center;
    margin-bottom: 1.25rem;
  }

  .hero-visual {
    max-width: 150px; /* Drastic reduction as requested */
    margin: 0 auto 30px; /* Centered with bottom gap */
    order: -1; /* Move visual elements above text on mobile */
  }

  .button-group {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 12px;
  }

  .button-group a, .button-group button {
    width: 100%;
    max-width: 280px;
  }
}

/* Mobile Menu Stacking & Visibility Fix */
body.mobile-menu-open nav {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body.mobile-menu-open nav > *:not(#mobile-menu-btn) {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Fix for Desktop mode on mobile / Horizontal scroll prevention */
html, body {
  overflow-x: hidden;
  width: 100%;
  position: relative;
}

/* REDUCE COMPOSITOR LOAD: Disable redundant blur on children inside a blurred parent */
.simulator-wrapper .glass-dark, 
.simulator-wrapper .glass-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}



/* Fix for slider track flickering */
input[type='range']::-webkit-slider-runnable-track {
  background: rgba(255, 255, 255, 0.05);
}

input[type='range']:active::-webkit-slider-thumb {
  cursor: grabbing;
}

/* Seamless Conveyor Belt — scroll -300% for a 400% strip to land back on same color */
.text-gradient-brand-subtle {
  background: linear-gradient(90deg, #2563EB, #DC2626 50%, #2563EB 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-flow 15s linear infinite; /* Slower and more subtle */
  opacity: 0.9;
}

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

.reveal-text {
  opacity: 0;
  animation: reveal 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

/* Consistent Reveal Animation */
.reveal-on-scroll {
  /* opacity: 0; Removed to prevent stuck invisible sections */
  /* transform: translateY(20px); Managed by GSAP */
  will-change: transform, opacity;
}

/* Fallback visibility if JS fails */
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* Custom Range Slider Styling */
input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

input[type='range']::-webkit-slider-runnable-track {
  background: rgba(255, 255, 255, 0.1);
  height: 4px;
  border-radius: 2px;
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  background: #0066cc;
  border: 3px solid white;
  border-radius: 50%;
  margin-top: -8px;
  box-shadow: 0 0 15px rgba(0, 102, 204, 0.5);
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Dual-Marquee Conveyor Animations */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes marquee-reverse {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

.animate-marquee {
  animation: marquee 30s linear infinite;
}

.animate-marquee-reverse {
  animation: marquee-reverse 30s linear infinite;
}

/* Mobile Marquee Speed Optimization */
@media (max-width: 768px) {
  .animate-marquee, 
  .animate-marquee-reverse {
    animation-duration: 45s; /* Slower, more deliberate pace on mobile */
  }
}

.animate-marquee:hover,
.animate-marquee-reverse:hover {
  animation-play-state: paused;
}


/* Expertise card base state — glows are applied via inline style per card */

/* â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• 
   EDGE-TO-EDGE LAYOUT SYSTEM  (replaces narrow centered-container pattern)
   Goal: visually fill 1440px–1920px displays with minimal side gutters.
   Mobile guardrail: layout below 1024px is completely untouched.
   â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â•  */

/* ── Space token (side padding cap) ──────────────────────────────────────── */
:root {
  --header-height: 80px;
  --side-pad: clamp(1rem, 4vw, 3rem);
  --section-space: clamp(4rem, 8vw, 10rem);
  --container-width: min(94%, 1200px); /* Restored for better balance across sections */
  --swipesite-navy: #1a365d;
  --swipesite-green: #10A32F;
  --hero-pb: clamp(80px, 12vw, 160px);
  --bg-contrast: #f1f5f9;
}

body {
  background-color: var(--bg-contrast);
}

/* ── Near-full-width content container ───────────────────────────────────── */
/*
 * Stretches to 100% of its parent, no centering margin, minimal padding.
 * This overrides Tailwind's max-w-7xl / mx-auto on the same element
 * because styles.css loads after the Tailwind CDN.
 */
.container-tight {
  width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--side-pad);
  padding-right: var(--side-pad);
}

.fluid-container {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

/* ── Simulator panel ─────────────────────────────────────────────────────── */
/*
 * Allows the simulator dark panel to expand naturally up to 95vw,
 * keeping it centered so it feels anchored on ultra-wide screens.
 */
.simulator-wrapper {
  width: min(1800px, 94%);
  margin-left: auto;
  margin-right: auto;
}

/* Wide Desktop Alignment overrides */
@media (min-width: 1440px) {
  .fluid-cards-grid,
  .fluid-cards-grid-4 {
    grid-template-columns: unset;   /* let Tailwind grid-cols-* take over  */
    gap: unset;
  }

  .simulator-wrapper {
    width: 100%;
  }
}

/* Fix double arrow bug in selects */
select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: none !important; /* Hide Tailwind's default background arrow */
}

select::-ms-expand {
    display: none; /* Hide arrow in IE/Edge */
}

/* PROJECTED GROWTH METRICS TABLE FIX */
.metric-row {
  display: grid;
  grid-template-columns: 60px 1fr 1fr 1.2fr 1.2fr; /* Optimized for long currency strings */
  gap: 12px;
  align-items: center;
  font-family: inherit;
}

.metric-cell {
  text-align: right;
  white-space: nowrap;
}


@media (max-width: 640px) {
  .metric-row {
    grid-template-columns: 45px 1fr 1fr 1.2fr 1.2fr;
    gap: 8px;
    font-size: 10px;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   MOBILE UI REFINEMENTS (Glassmorphism + Global Blur)
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* 1. RESTORE GLASSMORPHISM FOR “PRAAZAD GROWTH SYSTEM” CARDS */
  /* Target the numbered grid items in the Growth System section */
  #solution .grid > div {
    background: rgba(255, 255, 255, 0.04) !important; /* Slight transparency */
    backdrop-filter: blur(12px) !important; /* Restored for premium feel */
    border: 1px solid rgba(255, 255, 255, 0.12) !important; /* Subtle border */
    box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.35) !important; /* Clean contrast */
    transition: transform 0.3s ease, background 0.3s ease !important;
  }

  /* GPU Stability: prevents flickering on mobile browsers */
  #solution .grid > div {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}


/* PREMIUM ENTRANCE ANIMATION */
#premium-veil {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
  pointer-events: none;
}

#premium-veil .panel {
  position: absolute;
  width: 100%;
  height: 50%;
  background: #0f172a; /* Slate 900 */
  left: 0;
  pointer-events: all;
}

#premium-veil .panel-top { top: 0; }
#premium-veil .panel-bottom { bottom: 0; }

#premium-line {
  position: relative;
  width: 0%;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  z-index: 10001;
}

#premium-logo-mark {
  opacity: 0;
  transform: translateY(20px);
  margin-bottom: 2rem;
  z-index: 10001;
}

.main-site-content {
  opacity: 0;
  transform: scale(1.05);
  will-change: transform, opacity;
}

/* Hide navigation initially */
nav {
  opacity: 0;
  transform: translateY(-20px);
}

body.veiled {
  overflow: hidden;
}


.swipesite-gradient-text {
  background: linear-gradient(90deg, #3b82f6, #22c55e);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nav-swipesite-btn {
  background: linear-gradient(135deg, #1a365d, #10A32F); /* Hardcoded colors for reliability */
  color: white !important;
  padding: 0.5rem 1.4rem;
  border-radius: 9999px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 9px !important;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(26, 54, 93, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-swipesite-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(26, 54, 93, 0.35);
  filter: brightness(1.15);
}

/* ── Mobile Menu Close Button ──────────────────────────────── */
.mobile-menu-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f172a;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 20;
}

.mobile-menu-close:hover {
  transform: scale(1.05) rotate(5deg);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.15);
}

.mobile-menu-close:active {
  transform: scale(0.95);
}

.mobile-menu-close svg {
  width: 1.5rem;
  height: 1.5rem;
}