/* MasterLeaf Custom Styles & Advanced Animations */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  --primary-orange: #FF6320;
  --primary-orange-hover: #e55518;
  --primary-orange-light: rgba(255, 99, 32, 0.12);
  --primary-green: #10B981;
  --primary-green-light: rgba(16, 185, 129, 0.12);
  --bg-dark: #07080a;
  --bg-dark-surface: #0f1117;
  --bg-dark-card: #151821;
  --text-dark: #0f172a;
  --text-muted: #64748b;
  --border-light: #e2e8f0;
}

* {
  font-family: 'Plus Jakarta Sans', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1, h2, h3, h4, .font-heading {
  font-family: 'Outfit', sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #FAFAFB;
  color: var(--text-dark);
  overflow-x: hidden;
}

/* Hide default browser cursor only when MasterLeaf custom cursor element is present */
@media (pointer: fine) {
  body:not(.native-cursor-page).has-custom-cursor,
  body:not(.native-cursor-page).has-custom-cursor *,
  body:not(.native-cursor-page).has-custom-cursor *::before,
  body:not(.native-cursor-page).has-custom-cursor *::after {
    cursor: none !important;
  }
}

/* MasterLeaf Bespoke Custom Animated Cursor */
#masterCursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: 999999;
  pointer-events: none;
}

/* 1. Core Pointer (Precision Leaf Tip Dot) */
.custom-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  background: #FF6320;
  border: 1.5px solid #FFFFFF;
  border-radius: 50% 50% 50% 0; /* Leaf droplet teardrop pointer */
  transform: translate(-10%, -10%) rotate(-45deg);
  pointer-events: none;
  z-index: 1000000;
  box-shadow: 0 0 14px rgba(255, 99, 32, 0.9), 0 0 4px rgba(0, 0, 0, 0.4);
  transition: width 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), 
              height 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), 
              background-color 0.25s ease,
              border-radius 0.25s ease,
              box-shadow 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cursor-leaf-svg {
  display: none;
  width: 10px;
  height: 10px;
  color: #ffffff;
}

/* 2. Follower Ring with Glass Aura */
.custom-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 42px;
  height: 42px;
  border: 1.5px solid rgba(255, 99, 32, 0.6);
  background: radial-gradient(circle, rgba(255, 99, 32, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 999999;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(255, 99, 32, 0.18);
  transition: width 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2), 
              height 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2), 
              border-color 0.3s ease, 
              background-color 0.3s ease,
              box-shadow 0.3s ease,
              opacity 0.25s ease;
}

.cursor-label {
  font-family: 'Outfit', sans-serif;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #FFFFFF;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* 3. Trailing Secondary Particle (Lagged Follower) */
.custom-cursor-trail {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  background: #10B981;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999998;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.8);
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

/* Hover State: Links & Buttons */
body.cursor-hover .custom-cursor-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #10B981;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.95);
  border-color: #FFFFFF;
}

body.cursor-hover .custom-cursor-ring {
  width: 62px;
  height: 62px;
  border-color: rgba(16, 185, 129, 0.6);
  background: radial-gradient(circle, rgba(16, 185, 129, 0.14) 0%, transparent 80%);
  box-shadow: 0 0 25px rgba(16, 185, 129, 0.35);
}

/* Hover State: Cards & View Targets */
body.cursor-view .custom-cursor-dot {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}

body.cursor-view .custom-cursor-ring {
  width: 72px;
  height: 72px;
  background: rgba(255, 99, 32, 0.9);
  border-color: #FFFFFF;
  box-shadow: 0 0 30px rgba(255, 99, 32, 0.7);
  backdrop-filter: blur(4px);
}

body.cursor-view .cursor-label {
  opacity: 1;
  transform: scale(1);
}

/* Hover / Focus State: Inputs & Textarea (Small Typing Icon Mode) */
.cursor-typing-icon {
  display: none;
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
  color: #FFFFFF;
}

body.cursor-typing .custom-cursor-dot {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}

body.cursor-typing .custom-cursor-ring {
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #FF6320 0%, #FF8533 100%);
  border: 1.5px solid #FFFFFF;
  box-shadow: 0 0 16px rgba(255, 99, 32, 0.75), 0 2px 8px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  border-radius: 50%;
}

body.cursor-typing .cursor-label {
  display: none !important;
  opacity: 0 !important;
}

body.cursor-typing .cursor-typing-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transform: scale(1);
}

body.cursor-typing .custom-cursor-trail {
  opacity: 0.15;
  transform: translate(-50%, -50%) scale(0.5);
}

/* Click Active State */
body.cursor-active .custom-cursor-ring {
  transform: translate(-50%, -50%) scale(0.85);
  border-color: #FF6320;
}

body.cursor-active .custom-cursor-dot {
  transform: translate(-50%, -50%) scale(0.7);
}

/* Hide when cursor leaves window */
body.cursor-hidden #masterCursor {
  opacity: 0;
}

/* Disable on Touch Screen devices */
@media (pointer: coarse) {
  #masterCursor {
    display: none !important;
  }
}

/* Gradients & Glows */
.gradient-orange-text {
  background: linear-gradient(135deg, #FF6320 0%, #FFA14A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-green-text {
  background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-gradient-orange {
  background: linear-gradient(135deg, #FF6320 0%, #FF8533 100%);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 8px 24px -4px rgba(255, 99, 32, 0.45);
}

.btn-gradient-orange:hover {
  background: linear-gradient(135deg, #e55518 0%, #FF6320 100%);
  box-shadow: 0 12px 28px -2px rgba(255, 99, 32, 0.6);
  transform: translateY(-2px);
}

/* ========================================================================= */
/* ACETERNITY UI ANIMATIONS & COMPONENTS                                     */
/* ========================================================================= */

/* 1. Aceternity Moving Border Beam Button */
.btn-border-beam {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 9999px;
  padding: 1px;
  text-decoration: none;
  isolation: isolate;
}

.btn-border-beam::before {
  content: '';
  position: absolute;
  inset: -100%;
  background: conic-gradient(from 0deg at 50% 50%, #FF6320 0deg, #10B981 120deg, #FFA14A 240deg, #FF6320 360deg);
  animation: borderBeamRotate 3s linear infinite;
  z-index: 1;
}

.btn-border-beam-content {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(135deg, #FF6320 0%, #E55518 100%);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 20px rgba(255, 99, 32, 0.4);
}

.btn-border-beam:hover .btn-border-beam-content {
  background: linear-gradient(135deg, #E55518 0%, #FF6320 100%);
  box-shadow: 0 0 35px rgba(255, 99, 32, 0.7);
}

@keyframes borderBeamRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 2. Aceternity Flip Words (3D Word Rotation) */
.flip-words-wrapper {
  display: inline-block;
  position: relative;
  perspective: 800px;
  vertical-align: bottom;
  overflow: hidden;
  max-height: 1.25em;
  line-height: 1.15;
}

.flip-word {
  display: inline-block;
  white-space: nowrap;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), 
              filter 0.45s ease;
  will-change: transform, opacity, filter;
}

.flip-word.entering {
  opacity: 0;
  transform: translateY(24px) rotateX(-65deg);
  filter: blur(8px);
  position: absolute;
  top: 0;
  left: 0;
}

.flip-word.active {
  opacity: 1;
  transform: translateY(0px) rotateX(0deg);
  filter: blur(0px);
  position: relative;
}

.flip-word.exiting {
  opacity: 0;
  transform: translateY(-24px) rotateX(65deg);
  filter: blur(8px);
  position: absolute;
  top: 0;
  left: 0;
}

/* 3. Aceternity Shiny Specular Text Beam */
.shiny-text-beam {
  background: linear-gradient(110deg, #FF6320 20%, #FFFFFF 48%, #FFA84A 52%, #FF6320 80%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shinyTextGlider 4s linear infinite;
}

@keyframes shinyTextGlider {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

/* 4. Aceternity Engineering Grid Background */
.aceternity-grid {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  mask-image: radial-gradient(ellipse 65% 55% at 50% 0%, #000 65%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 65% 55% at 50% 0%, #000 65%, transparent 100%);
}

/* 5. Aceternity Mouse Spotlight Card Glow */
.card-spotlight {
  position: relative;
  overflow: hidden;
}

.card-spotlight::after {
  content: '';
  position: absolute;
  top: var(--mouse-y, -500px);
  left: var(--mouse-x, -500px);
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(255, 99, 32, 0.12) 0%, rgba(16, 185, 129, 0.04) 40%, transparent 70%);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 5;
}

.card-spotlight:hover::after {
  opacity: 1;
}

/* ========================================================================= */
/* TECHNOLOGY STACK STYLING & ANIMATIONS                                     */
/* ========================================================================= */
.tech-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.tech-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 99, 32, 0.35);
  transform: translateY(-5px);
  box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.6), 0 0 28px rgba(255, 99, 32, 0.15);
}

/* Infinite Tech Marquee Loop */
.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 26s linear infinite;
}

.marquee-track:hover {
  animation-play-state: paused;
}

@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.tech-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.4rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  color: #FFFFFF;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  backdrop-filter: blur(12px);
  transition: all 0.3s ease;
}

.tech-pill:hover {
  border-color: rgba(255, 99, 32, 0.5);
  background: rgba(255, 99, 32, 0.1);
  transform: scale(1.05);
}

/* Hero Section Styles */
.hero-wrapper {
  background: radial-gradient(circle at 75% 30%, #1c1518 0%, #0c0e12 45%, #060709 100%);
  position: relative;
  overflow: hidden;
}

.hero-glow-ambient {
  position: absolute;
  top: 15%;
  right: 10%;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(255, 99, 32, 0.15) 0%, rgba(16, 185, 129, 0.08) 50%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
}

/* 3D Podium & Showcase Stage */
.stage-container {
  position: relative;
  perspective: 1200px;
}

.podium-base {
  width: 440px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%, #2a2e39 0%, #111317 70%, #08090b 100%);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.8),
    0 0 0 1.5px rgba(255, 255, 255, 0.12),
    inset 0 3px 6px rgba(255, 255, 255, 0.2),
    inset 0 -8px 16px rgba(0, 0, 0, 0.8);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.podium-inner {
  width: 370px;
  height: 65px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 35%, #383e4c 0%, #161820 70%, #0b0c0f 100%);
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 
    0 0 0 1px rgba(255, 255, 255, 0.15),
    inset 0 2px 4px rgba(255, 255, 255, 0.25);
  z-index: 2;
}

.podium-top {
  width: 310px;
  height: 45px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, #474f60 0%, #1e2129 70%, #121418 100%);
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 
    0 0 25px rgba(255, 99, 32, 0.15),
    inset 0 1px 3px rgba(255, 255, 255, 0.3);
  z-index: 3;
}

/* 3D Dark Tablet Frame */
.device-tablet {
  width: 340px;
  background: #11141a;
  border: 4px solid #232732;
  border-radius: 36px;
  padding: 16px;
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 0 40px rgba(0, 0, 0, 0.6);
  position: relative;
  z-index: 10;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-style: preserve-3d;
}

.device-screen {
  background: linear-gradient(170deg, #181b24 0%, #101217 100%);
  border-radius: 26px;
  padding: 24px 20px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Floating Badges */
.badge-floating {
  position: absolute;
  z-index: 20;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.badge-floating:hover {
  transform: translateY(-5px) scale(1.03);
}

/* Metallic Spheres */
.sphere-3d-gold {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe8b3 0%, #f59e0b 45%, #b45309 80%, #451a03 100%);
  box-shadow: 
    0 15px 30px rgba(0, 0, 0, 0.6),
    inset -4px -4px 10px rgba(0, 0, 0, 0.6),
    inset 4px 4px 10px rgba(255, 255, 255, 0.8);
}

.sphere-3d-dark {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #71717a 0%, #27272a 50%, #09090b 90%);
  box-shadow: 
    0 15px 30px rgba(0, 0, 0, 0.7),
    inset -3px -3px 8px rgba(0, 0, 0, 0.8),
    inset 3px 3px 8px rgba(255, 255, 255, 0.4);
}

/* Floating Leaf Keyframes */
@keyframes floatGentle {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) rotate(4deg);
  }
}

@keyframes floatReverse {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(12px) rotate(-5deg);
  }
}

@keyframes pulseGlow {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.05);
  }
}

.anim-float-1 {
  animation: floatGentle 5s ease-in-out infinite;
}

.anim-float-2 {
  animation: floatReverse 6.5s ease-in-out infinite;
}

.anim-float-3 {
  animation: floatGentle 7.5s ease-in-out infinite 1s;
}

.anim-pulse {
  animation: pulseGlow 4s ease-in-out infinite;
}

/* Underline leafy curve */
.leaf-swoosh {
  position: relative;
  display: inline-block;
}

.leaf-swoosh::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #10B981, transparent);
  border-radius: 2px;
}

/* Stats Counter Bar */
.stats-floating-bar {
  margin-top: -50px;
  position: relative;
  z-index: 30;
}

/* Glass & Card Hover Styles */
.service-card {
  background: #FFFFFF;
  border: 1px solid #F1F4F9;
  border-radius: 24px;
  box-shadow: 0 10px 30px -10px rgba(0, 10, 30, 0.04);
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.service-card:hover {
  transform: translateY(-8px);
  border-color: #E2E8F0;
  box-shadow: 0 20px 40px -10px rgba(255, 99, 32, 0.09), 0 8px 16px -6px rgba(0, 0, 0, 0.03);
}

/* Ultra-Luxury Tablet Mockup Project Grid Card */
.project-card-mockup {
  position: relative;
  height: 380px;
  border-radius: 28px;
  background: #FFFFFF;
  padding: 10px;
  border: 1.5px solid #E2E8F0;
  box-shadow: 0 10px 30px -8px rgba(0, 10, 30, 0.05);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  overflow: hidden;
}

@media (min-width: 640px) {
  .project-card-mockup {
    height: 400px;
    padding: 12px;
  }
}

.project-card-mockup:hover {
  transform: translateY(-6px);
  border-color: #CBD5E1;
  box-shadow: 0 20px 45px -10px rgba(0, 10, 30, 0.12), 0 0 0 1px rgba(255, 99, 32, 0.15);
}

.project-mockup-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: #F8FAFC;
  border: 1px solid #EEF2F6;
}

.project-mockup-screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card-mockup:hover .project-mockup-screen img {
  transform: scale(1.05);
}

/* Floating Bottom Pill */
.project-floating-pill {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  z-index: 25;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 18px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 10px 25px -6px rgba(0, 10, 30, 0.08);
  padding: 8px 12px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card-mockup:hover .project-floating-pill {
  background: #FFFFFF;
  border-color: rgba(255, 99, 32, 0.35);
  box-shadow: 0 15px 35px -5px rgba(255, 99, 32, 0.18), 0 8px 20px -5px rgba(0, 0, 0, 0.06);
}

/* Swiper custom dots */
.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: #CBD5E1 !important;
  opacity: 1 !important;
  transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
  width: 24px !important;
  border-radius: 5px !important;
  background: #FF6320 !important;
}

/* CTA Glassy Orb Section */
.cta-banner {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF8F4 50%, #F6FFF9 100%);
  border: 1px solid #FFE9DF;
  box-shadow: 0 24px 60px -15px rgba(255, 99, 32, 0.08);
  border-radius: 36px;
  overflow: hidden;
  position: relative;
}

.cta-orb-crystal {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 180, 140, 0.4) 40%, rgba(255, 99, 32, 0.15) 80%, rgba(255, 99, 32, 0.05) 100%);
  box-shadow: 
    0 20px 40px rgba(255, 99, 32, 0.25),
    inset -5px -5px 15px rgba(255, 99, 32, 0.2),
    inset 5px 5px 15px rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.cta-orb-crystal::after {
  content: '';
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 99, 32, 0.2) 0%, transparent 70%);
  z-index: -1;
  animation: pulseGlow 4s infinite ease-in-out;
}

/* ========================================================================= */
/* TRUE LIQUID GLASS NAVBAR                                                  */
/* ========================================================================= */
.liquid-glass-nav {
  transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.liquid-glass-inner {
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 
    0 20px 45px -10px rgba(0, 0, 0, 0.45),
    inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 1px 0 rgba(0, 0, 0, 0.4),
    0 0 25px rgba(255, 99, 32, 0.1);
  position: relative;
  overflow: visible;
  isolation: isolate;
  transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dedicated background layer for pill bar */
.liquid-glass-pill-bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(20, 24, 33, 0.65) 50%, rgba(10, 12, 18, 0.80) 100%);
  backdrop-filter: blur(28px) saturate(190%) contrast(105%);
  -webkit-backdrop-filter: blur(28px) saturate(190%) contrast(105%);
  pointer-events: none;
  z-index: -1;
}

/* Fluid Liquid Specular Sheen on Top Edge */
.liquid-glass-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), rgba(255, 160, 100, 0.6), transparent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

/* Scrolled State: Transitions smoothly to docked full-width bar */
#mainHeader.scrolled-docked {
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
}

#mainHeader.scrolled-docked .liquid-glass-inner {
  border-radius: 0px !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), inset 0 -1px 0 rgba(255, 255, 255, 0.1) !important;
}

#mainHeader.scrolled-docked .liquid-glass-pill-bg {
  border-radius: 0px !important;
  background: linear-gradient(135deg, rgba(15, 18, 26, 0.88) 0%, rgba(8, 10, 15, 0.94) 100%) !important;
}

/* Ultra-Luxury Transparent Liquid Glass Mega Menu */
.liquid-glass-mega {
  background: rgba(12, 16, 26, 0.78) !important;
  backdrop-filter: blur(48px) saturate(200%) contrast(110%) !important;
  -webkit-backdrop-filter: blur(48px) saturate(200%) contrast(110%) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-top: 1.5px solid rgba(255, 255, 255, 0.45) !important;
  border-left: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 
    0 35px 80px -15px rgba(0, 0, 0, 0.9),
    inset 0 1.5px 1.5px 0 rgba(255, 255, 255, 0.35),
    0 0 35px rgba(255, 99, 32, 0.15) !important;
  transform-origin: top center;
}

/* Page Preloader Animations */
.loader-leaf-pulse {
  animation: leafPulse 2s ease-in-out infinite;
}

@keyframes leafPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 25px rgba(255, 99, 32, 0.4);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 45px rgba(255, 99, 32, 0.7);
  }
}

.loader-text-glow {
  text-shadow: 0 0 25px rgba(255, 99, 32, 0.3);
}

#pageLoader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Mobile drawer */
.mobile-nav-drawer {
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.mobile-nav-drawer.open {
  transform: translateX(0);
}

/* ========================================================================= */
/* PRODUCTS SECTION STYLING & FILTER ANIMATIONS                              */
/* ========================================================================= */
.product-dark-card {
  background: #0E121B;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.product-dark-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 99, 32, 0.45);
  box-shadow: 0 24px 50px -10px rgba(0, 0, 0, 0.75), 0 0 30px rgba(255, 99, 32, 0.16);
}

.product-dark-card .prod-thumb-wrapper {
  overflow: hidden;
  position: relative;
  aspect-ratio: 16 / 10;
  background: #080A0F;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.product-dark-card .prod-thumb-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-dark-card:hover .prod-thumb-wrapper img {
  transform: scale(1.08);
}

.btn-add-cart {
  background: linear-gradient(135deg, #FF6320 0%, #EA580C 100%);
  color: #FFFFFF;
  border-radius: 12px;
  padding: 0.7rem 1.1rem;
  font-size: 0.84rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.25s ease;
  width: 100%;
  box-shadow: 0 4px 16px rgba(255, 99, 32, 0.35);
  cursor: pointer;
  user-select: none;
}

.btn-add-cart:hover {
  background: linear-gradient(135deg, #FF7838 0%, #F97316 100%);
  box-shadow: 0 6px 24px rgba(255, 99, 32, 0.55);
  transform: translateY(-2px);
}

.btn-add-cart:active {
  transform: scale(0.97);
}

.product-filter-btn {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-filter-btn.active {
  background: #FF6320 !important;
  color: #FFFFFF !important;
  border-color: #FF6320 !important;
  box-shadow: 0 8px 20px -4px rgba(255, 99, 32, 0.45) !important;
}

/* Category Filter Fade/Scale Transition */
.product-item {
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-item.hidden-item {
  display: none !important;
  opacity: 0;
  transform: scale(0.95);
}

/* ========================================================================= */
/* ========================================================================= */
/* 15. ABOUT SECTION & FOUNDER LIQUID GLASS CARD                             */
/* ========================================================================= */
.founder-card-container {
  perspective: 1200px;
}

/* Animated Liquid Glass Card Perimeter */
.founder-card-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 34px;
  padding: 2.5px;
  isolation: isolate;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 30px 80px -15px rgba(0, 0, 0, 0.95), 0 0 50px -10px rgba(255, 99, 32, 0.3);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Conic Rotating Liquid Glass Border Beam */
.founder-card-wrapper::before {
  content: '';
  position: absolute;
  inset: -150%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    rgba(255, 99, 32, 0.9) 50deg,
    rgba(255, 255, 255, 0.95) 100deg,
    rgba(255, 160, 60, 0.8) 150deg,
    transparent 200deg,
    rgba(255, 99, 32, 0.9) 270deg,
    rgba(255, 255, 255, 0.9) 320deg,
    transparent 360deg
  );
  animation: liquidGlassRotate 5s linear infinite;
  z-index: 1;
}

/* Liquid Glass Rim Light Overlay */
.founder-card-wrapper::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 33px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 40%, rgba(255, 99, 32, 0.15) 100%);
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.4s ease;
}

.founder-card-wrapper:hover {
  transform: translateY(-8px) scale(1.015);
  box-shadow: 0 40px 90px -15px rgba(0, 0, 0, 0.98), 0 0 70px -5px rgba(255, 99, 32, 0.45);
}

.founder-card-wrapper:hover::before {
  animation-duration: 3s; /* Speeds up on hover */
}

@keyframes liquidGlassRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Inner Obsidian Glass Capsule */
.founder-card-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 31px;
  overflow: hidden;
  background: #090C16;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
}

/* Card Photo Layer */
.founder-photo-layer {
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
}

.founder-card-wrapper:hover .founder-photo-layer {
  opacity: 0.15;
  transform: scale(1.08);
  filter: blur(6px);
}

/* Card Detail Layer (Shows on Hover) */
.founder-detail-layer {
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  background: rgba(10, 13, 22, 0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.founder-card-wrapper:hover .founder-detail-layer {
  opacity: 1;
  transform: translateY(0);
}

/* Floating Badges Animation */
@keyframes floatSlowBadge {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-7px); }
}

@keyframes floatSlowBadgeReverse {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(7px); }
}

.floating-badge-1 {
  animation: floatSlowBadge 4s ease-in-out infinite;
}

.floating-badge-2 {
  animation: floatSlowBadgeReverse 4.5s ease-in-out infinite;
}

/* Feature Point Card Hover */
.feature-point-card {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.feature-point-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 99, 32, 0.4);
  box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.6), 0 0 25px rgba(255, 99, 32, 0.1);
}

.feature-point-card:hover .feature-icon-box {
  transform: scale(1.12) rotate(6deg);
}

.feature-icon-box {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ========================================================================= */
/* 16. ADMIN SIDEBAR NO SCROLLBAR HELPER                                     */
/* ========================================================================= */
.sidebar-no-scrollbar::-webkit-scrollbar {
  display: none !important;
  width: 0px !important;
  height: 0px !important;
}
.sidebar-no-scrollbar {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

/* ========================================================================= */
/* 17. HOMEPAGE READY-TO-LAUNCH PRODUCTS: LIQUID GLASS BORDER & GLOW CARDS   */
/* ========================================================================= */
@property --card-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes liquidBorderRotate {
  0% { --card-angle: 0deg; }
  100% { --card-angle: 360deg; }
}

.product-glow-card, .product-liquid-card {
  --card-angle: 0deg;
  background: rgba(13, 17, 26, 0.90);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.product-glow-card::before, .product-liquid-card::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: 29.5px;
  padding: 1.5px;
  background: conic-gradient(from var(--card-angle), transparent 25%, rgba(255, 99, 32, 0.95) 45%, rgba(255, 200, 120, 0.95) 55%, rgba(16, 185, 129, 0.9) 65%, transparent 80%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: liquidBorderRotate 3.5s linear infinite paused;
}

.product-glow-card:hover, .product-liquid-card:hover {
  transform: translateY(-9px) scale(1.015);
  border-color: rgba(255, 99, 32, 0.5);
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.95),
    0 0 35px -5px rgba(255, 99, 32, 0.45),
    0 0 60px -15px rgba(255, 160, 74, 0.3);
}

.product-glow-card:hover::before, .product-liquid-card:hover::before {
  opacity: 1;
  animation-play-state: running;
}

/* Small Floating Cart Alert Toast */
@keyframes cartAlertIn {
  0% { transform: translateY(30px) scale(0.9); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes cartAlertOut {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-20px) scale(0.95); opacity: 0; }
}
.cart-alert-toast {
  animation: cartAlertIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.cart-alert-toast.hiding {
  animation: cartAlertOut 0.25s ease forwards;
}

/* Hide Scrollbar Completely */
.scrollbar-none::-webkit-scrollbar,
.hide-scrollbar::-webkit-scrollbar {
  display: none !important;
  width: 0px !important;
  height: 0px !important;
}
.scrollbar-none,
.hide-scrollbar {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

/* Animated Input Liquid Border Light Animation */
@property --input-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes inputBorderRotate {
  0% { --input-angle: 0deg; }
  100% { --input-angle: 360deg; }
}

.liquid-input-wrap {
  position: relative;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.5px;
  transition: all 0.3s ease;
  overflow: hidden;
}

.liquid-input-wrap::before {
  content: '';
  position: absolute;
  inset: -150%;
  background: conic-gradient(
    from var(--input-angle),
    transparent 20%,
    rgba(255, 99, 32, 0.85) 45%,
    rgba(255, 200, 100, 1) 50%,
    rgba(16, 185, 129, 0.85) 55%,
    transparent 80%
  );
  opacity: 0;
  animation: inputBorderRotate 3s linear infinite;
  animation-play-state: paused;
  transition: opacity 0.3s ease;
}

.liquid-input-wrap:hover::before,
.liquid-input-wrap:focus-within::before {
  opacity: 1;
  animation-play-state: running;
}

.liquid-input-wrap:hover,
.liquid-input-wrap:focus-within {
  border-color: transparent;
  box-shadow: 0 0 25px -4px rgba(255, 99, 32, 0.35);
}

.liquid-input-inner {
  position: relative;
  background: #0B0E17;
  border-radius: calc(1rem - 1.5px);
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Floating Action Buttons Tooltip (Call, WhatsApp & Live Chat) */
.fab-tooltip {
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  pointer-events: none;
}
.fab-btn:hover .fab-tooltip {
  visibility: visible;
  opacity: 1;
  transform: translateX(-8px);
}