/* Ultra-smooth scrolling and performance optimization */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Global animation performance optimization */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Enhanced smooth animations for all interactive elements */
a, button, .btn, .card {
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

/* Optimize hover states for desktop */
@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translate3d(0, -3px, 0);
  }
  
  .btn.hero-primary:hover {
    transform: translate3d(0, -4px, 0) scale(1.02);
  }
  
  .btn.hero-secondary:hover {
    transform: translate3d(0, -3px, 0);
  }
  
  .hero-mockups:hover .device-mockup.laptop {
    transform: translateX(-50%) perspective(800px) rotateY(-8deg) rotateX(8deg) translateY(-5px);
  }

  .hero-mockups:hover .device-mockup.phone {
    transform: perspective(600px) rotateY(15deg) rotateX(-8deg) translateY(-3px);
  }
}

/* Mobile-only touch optimizations */
@media (hover: none) and (pointer: coarse) {
  .btn:hover,
  .btn.hero-primary:hover,
  .btn.hero-secondary:hover {
    transform: translate3d(0, 0, 0);
    animation: none;
  }
  
  .btn:active {
    transform: translate3d(0, 2px, 0) scale(0.96);
    transition: all 0.1s cubic-bezier(0.23, 1, 0.32, 1);
  }
  
  .hero-mockups:hover .device-mockup.laptop,
  .hero-mockups:hover .device-mockup.phone {
    transform: none;
  }
}

/* Native mobile app styling with perfect responsiveness */
:root{
  --bg:#07060a;
  --bg-2:#0b0b0f;
  --accent: #7ce7ff;
  --muted: rgba(255,255,255,0.75);
  --glass: rgba(255,255,255,0.04);
  --glass-2: rgba(255,255,255,0.06);
  --glass-3: rgba(255,255,255,0.08);
  --glass-4: rgba(255,255,255,0.12);
  --glass-border: rgba(255,255,255,0.08);
  --glass-border-hover: rgba(124,231,255,0.15);
  --text: #e9eef6;
  --mobile-padding: max(16px, env(safe-area-inset-left));
  --mobile-margin: max(20px, env(safe-area-inset-top));
  overflow-x: hidden;
}

/* Subtle elegant glow for CTAs and highlights */
.golden-glow {
  position: relative;
  overflow: visible;
}

.golden-glow::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(135deg, rgba(124,231,255,0.4), rgba(255,215,0,0.2), rgba(124,231,255,0.4));
  border-radius: inherit;
  opacity: 0;
  filter: blur(3px);
  z-index: -1;
  transition: all 0.3s ease;
}

.golden-glow:hover::before {
  opacity: 0.4;
  filter: blur(4px);
}

/* Apply subtle glow to primary buttons */
.btn.primary {
  position: relative;
  overflow: visible;
}

.btn.primary::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(135deg, rgba(124,231,255,0.3), rgba(255,215,0,0.15), rgba(124,231,255,0.3));
  border-radius: inherit;
  opacity: 0;
  filter: blur(2px);
  z-index: -1;
  transition: all 0.3s ease;
}

.btn.primary:hover::before {
  opacity: 0.3;
}

/* Enhanced text contrast and visibility */
h1, h2, h3, h4, h5, h6 {
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

p.muted {
  color: var(--muted);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Ensure strong contrast for important elements */
strong {
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Button text should always be visible */
.btn {
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Performance optimizations and lazy loading */
.card, .price-card, .step {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card.animate-in, .price-card.animate-in, .step.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .card, .price-card, .step {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* Enhanced responsive design, accessibility, and proper centering */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(124,231,255,0.03), transparent),
              radial-gradient(900px 400px at 90% 90%, rgba(255,121,198,0.02), transparent),
              var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  line-height:1.6;
  /* Native mobile app features */
  -webkit-overflow-scrolling:touch;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
}

/* Disable text selection for all elements */
*{
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

/* Allow selection only for input elements */
input, textarea{
  -webkit-user-select:text;
  -moz-user-select:text;
  -ms-user-select:text;
  user-select:text;
}

/* Support for safe areas on mobile devices */
@supports(padding: max(0px)){
  body{
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
  }
}

/* Text selection allowed for content areas */
p, h1, h2, h3, li, span{
  user-select:text;
  -webkit-user-select:text;
}

/* Main container for proper centering */
.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 var(--mobile-padding);
  width:100%;
}

/* Mobile-first responsive containers */
@media (min-width:768px){
  .container{
    padding:0 clamp(24px,4vw,40px);
  }
}

@media (min-width:1024px){
  .container{
    padding:0 clamp(40px,6vw,60px);
  }
}

/* Ensure all main sections are properly centered */
section{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:clamp(20px,5vw,40px) 0;
  position:relative;
}

/* Add subtle uniform background transitions between sections */
section::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at center, rgba(124,231,255,0.01) 0%, transparent 70%);
  opacity:0.5;
  transition:opacity 1s ease;
  pointer-events:none;
}

section:nth-child(even)::before{
  background:radial-gradient(ellipse at center, rgba(255,121,198,0.01) 0%, transparent 70%);
}

/* Intro section immediately follows CTA banner - reduce spacing */
.intro{
  padding-top:clamp(10px,2vw,20px);
  margin-top:0;
}

/* Consistent section spacing and backgrounds */
.hero-wrap, .pricing-wrap, .contact-wrap, .process-wrap, .portfolio-wrap{
  background:linear-gradient(180deg, 
    rgba(124,231,255,0.02) 0%, 
    rgba(255,255,255,0.005) 50%, 
    rgba(124,231,255,0.02) 100%);
  border-top:1px solid rgba(255,255,255,0.02);
  border-bottom:1px solid rgba(255,255,255,0.02);
}

.card{
  background:linear-gradient(135deg, var(--glass), var(--glass-2));
  border:1px solid var(--glass-border);
  border-radius:clamp(16px,4vw,24px);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 8px 32px rgba(0,0,0,0.3), 
             inset 0 1px 0 rgba(255,255,255,0.1);
  width:100%;
  margin:0 auto;
  position:relative;
  overflow:hidden;
  /* Mobile app-like touch interactions */
  transition:all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Enhanced glass reflection effect */
.card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:40%;
  background:linear-gradient(180deg, rgba(255,255,255,0.06), transparent);
  opacity:0.8;
  pointer-events:none;
}

/* Glass edge highlights */
.card::after{
  content:'';
  position:absolute;
  inset:1px;
  border-radius:inherit;
  background:linear-gradient(135deg, 
    transparent, 
    rgba(124,231,255,0.03), 
    transparent, 
    rgba(255,255,255,0.02)
  );
  pointer-events:none;
  opacity:0.6;
}

.card:hover{
  border-color:var(--glass-border-hover);
  box-shadow:0 12px 40px rgba(0,0,0,0.4), 
             0 0 0 1px rgba(124,231,255,0.1),
             inset 0 1px 0 rgba(255,255,255,0.15);
  transform:translateY(-2px);
}

/* Mobile touch states */
.card:active{
  transform:scale(0.995);
}

/* Accessibility improvements */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus{outline:3px solid rgba(124,231,255,0.5);outline-offset:2px}
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:3px solid rgba(124,231,255,0.5);outline-offset:2px}
.page-bg{position:fixed;inset:0;pointer-events:none;opacity:0.45;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent)}

/* Enhanced mobile-optimized navigation with improved visual appeal */
.nav{
  display:flex;justify-content:space-between;align-items:center;
  padding:clamp(16px,4vw,24px) var(--mobile-padding);
  position:sticky;top:0;z-index:100;
  background:linear-gradient(135deg, 
    rgba(7,6,10,0.95), 
    rgba(11,11,15,0.95)
  );
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--glass-border);
  box-shadow: 0 4px 24px rgba(0,0,0,0.2),
              inset 0 1px 0 rgba(255,255,255,0.05);
  transition: all 0.3s ease;
}

.nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, 
    rgba(124,231,255,0.05), 
    transparent, 
    rgba(255,215,0,0.03)
  );
  pointer-events: none;
}

.brand{
  font-weight:800;letter-spacing:0.06em;
  font-size:clamp(18px,4.5vw,22px);
  background: linear-gradient(135deg, var(--accent), #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  z-index: 1;
}

.nav-actions .btn{
  padding:clamp(10px,2.5vw,14px) clamp(16px,4vw,20px);
  font-weight:600;
  min-height:44px;
  min-width:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(124,231,255,0.1);
  border: 1px solid rgba(124,231,255,0.2);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.nav-actions .btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(124,231,255,0.2), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nav-actions .btn:hover {
  background: rgba(124,231,255,0.15);
  border-color: rgba(124,231,255,0.4);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(124,231,255,0.2);
}

.nav-actions .btn:hover::before {
  opacity: 1;
}

/* Hero section with enhanced magnetic effects */
.hero{
  background:linear-gradient(135deg, #000 0%, rgba(7,6,10,0.95) 100%);
  padding:clamp(60px,15vw,120px) 0 clamp(40px,10vw,80px) 0;
  text-align:center;position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at center, rgba(124,231,255,0.03) 0%, transparent 70%);
  opacity:0;animation:heroGlow 6s ease-in-out infinite alternate;
}
@keyframes heroGlow{
  0%{opacity:0;transform:scale(1)}
  100%{opacity:1;transform:scale(1.1)}
}

.hero h1{
  margin:0 0 clamp(16px,4vw,24px) 0;
  font-size:clamp(32px,8vw,64px);font-weight:800;line-height:1.1;
  background:linear-gradient(135deg, var(--text), var(--accent), #c6fffa);
  background-clip:text;-webkit-background-clip:text;color:transparent;
  animation:titleShimmer 4s ease-in-out infinite alternate;
  position:relative;z-index:1;
}
@keyframes titleShimmer{
  0%{filter:brightness(1)}
  100%{filter:brightness(1.2)}
}

.hero .lead{
  margin:0 0 clamp(32px,8vw,48px) 0;font-size:clamp(16px,4vw,24px);
  color:var(--muted);max-width:720px;margin-left:auto;margin-right:auto;
  line-height:1.5;position:relative;z-index:1;
}

.actions{
  display:flex;gap:clamp(12px,3vw,20px);justify-content:center;
  flex-wrap:wrap;margin-top:clamp(20px,5vw,32px);
  position:relative;z-index:1;
}

.actions .btn{
  position:relative;overflow:hidden;
  transition:all .5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.actions .btn.primary{
  background:linear-gradient(135deg, var(--accent), #c6fffa);
  animation:ctaPulse 4s ease-in-out infinite;
}
@keyframes ctaPulse{
  0%,100%{
    box-shadow:0 6px 20px rgba(124,231,255,0.12);
    transform:scale(1);
  }
  50%{
    box-shadow:0 8px 28px rgba(124,231,255,0.2), 0 0 24px rgba(124,231,255,0.15);
    transform:scale(1.02);
  }
}

.actions .btn.primary::before{
  content:'';position:absolute;inset:-2px;
  background:linear-gradient(45deg, var(--accent), #c6fffa, var(--accent));
  border-radius:inherit;opacity:0;transition:opacity .5s ease;z-index:-1;
  filter:blur(12px);
}

.actions .btn.primary:hover{
  transform:translateY(-6px) scale(1.05);
  box-shadow:0 16px 48px rgba(124,231,255,0.3), 0 0 40px rgba(124,231,255,0.2);
  animation:none;
}
.actions .btn.primary:hover::before{opacity:0.6}
.card{
  max-width:100%;width:100%;padding:20px;border-radius:14px;backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border:1px solid var(--glass-2);
  box-shadow: 0 20px 60px rgba(2,4,12,0.7), inset 0 1px 0 rgba(255,255,255,0.02);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  transform:translate3d(0,0,0);
  transition:box-shadow .4s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change:transform;
}
.logo{font-size:clamp(36px, 8vw, 72px);margin:0 0 6px 0;font-weight:800;letter-spacing:-0.02em;line-height:1}
.tag{color:var(--accent);font-weight:600;margin:0 0 14px 0}
.lede{color:var(--muted);line-height:1.5;margin:0 0 18px 0;font-size:clamp(14px, 3.6vw, 18px)}
.actions{
  display:flex;gap:clamp(8px,2vw,16px);flex-wrap:wrap;
  justify-content:center;align-items:center;
  width:100%;max-width:100%;
}
/* Enhanced button accessibility and touch targets */
/* Enhanced button system for optimal mobile touch and smooth animations */
.btn{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  text-decoration:none;color:var(--text);
  border-radius:clamp(12px,3vw,16px);
  padding:clamp(14px,3.5vw,18px) clamp(24px,6vw,32px);
  background:transparent;border:1px solid transparent;font-weight:700;
  transition:all .3s cubic-bezier(0.23, 1, 0.32, 1);will-change:transform;
  min-height:48px;min-width:140px;cursor:pointer;
  font-size:clamp(15px,3.8vw,17px);position:relative;overflow:hidden;
  white-space:nowrap;margin:clamp(4px,1vw,8px);
  flex:0 0 auto;box-sizing:border-box;
  
  /* Mobile-optimized touch targets */
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  
  /* Smooth transform optimization */
  transform:translate3d(0,0,0);
  -webkit-transform:translate3d(0,0,0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.btn:before{
  content:'';position:absolute;inset:0;
  background:rgba(255,255,255,0.1);
  transition:opacity .2s cubic-bezier(0.23, 1, 0.32, 1);opacity:0;
  border-radius:inherit;
}

.btn.primary{
  background:linear-gradient(135deg,var(--accent),#c6fffa);
  color:#021018;border:none;
  box-shadow:0 6px 20px rgba(124,231,255,0.12);
  transition:all .3s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn.ghost{
  border:1px solid var(--glass-border);
  color:var(--muted);
  background:linear-gradient(135deg, var(--glass), var(--glass-2));
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 4px 16px rgba(0,0,0,0.2), 
             inset 0 1px 0 rgba(255,255,255,0.1);
  position:relative;
  overflow:hidden;
  transition:all .3s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn.ghost::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:50%;
  background:linear-gradient(180deg, rgba(255,255,255,0.05), transparent);
  pointer-events:none;
  transition:opacity .3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Enhanced hover states with smooth animations */
.btn:hover,.btn:focus{
  transform:translate3d(0,-3px,0);
  box-shadow:0 8px 25px rgba(124,231,255,0.15);
}

.btn.ghost:hover{
  border-color:var(--glass-border-hover);
  background:linear-gradient(135deg, var(--glass-2), var(--glass-3));
  box-shadow:0 6px 20px rgba(0,0,0,0.3), 
             0 0 0 1px rgba(124,231,255,0.08),
             inset 0 1px 0 rgba(255,255,255,0.15);
  transform:translate3d(0,-2px,0);
}

/* Enhanced mobile touch feedback */
.btn:active{
  transform:translate3d(0,1px,0) scale(0.98);
  transition:all .15s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn:active:before{
  opacity:1;
}

.btn:disabled{
  opacity:0.6;cursor:not-allowed;
  transform:translate3d(0,0,0);
  transition:opacity .3s ease;
}

/* Perfect mobile optimization */
@media (max-width:768px){
  .btn{
    padding:clamp(16px,4vw,20px) clamp(28px,7vw,36px);
    font-size:clamp(16px,4.2vw,18px);
    border-radius:16px;min-width:160px;
    margin:clamp(6px,1.5vw,10px);
    min-height:52px;
  }
  
  .actions{
    gap:clamp(14px,3.5vw,18px);
    justify-content:center;
    flex-direction:column;
    align-items:center;
    width:100%;
  }
  
  .btn.primary{
    box-shadow:0 4px 16px rgba(124,231,255,0.2);
    order:1;
  }
  
  .btn.ghost, .btn.hero-secondary{
    order:2;
  }
  
  /* Mobile-specific touch interactions */
  .btn:hover,.btn:focus{
    transform:translate3d(0,0,0); /* Disable hover on mobile */
    box-shadow:0 6px 20px rgba(124,231,255,0.15);
  }
  
  .btn:active{
    transform:translate3d(0,2px,0) scale(0.96);
    transition:all .1s cubic-bezier(0.23, 1, 0.32, 1);
  }
}

/* Ultra-smooth focus states for accessibility */
.btn:focus{
  outline:3px solid rgba(124,231,255,0.12);
  outline-offset:3px;
  transition:outline .3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* small decorative liquid sheen */
.card::after{content:'';position:absolute;pointer-events:none;left:-20%;top:-40%;width:160%;height:140%;background:linear-gradient(120deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.06) 45%, rgba(255,255,255,0.02) 60%, rgba(255,255,255,0.00) 100%);transform:rotate(-18deg);filter:blur(36px);}

/* make sure card is positioned for pseudo-element */
.card{position:relative;overflow:hidden}

/* Enhanced responsive layout with perfect alignment */
.container{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
  width: 100%;
  box-sizing: border-box;
}

/* Consistent section spacing with proper alignment */
section{
  margin: clamp(32px, 8vw, 64px) 0;
  position: relative;
  width: 100%;
  overflow-x: hidden;
}

/* First section has no top margin */
section:first-of-type{margin-top:0}

.intro .split{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 5vw, 32px);
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}

.thin{
  padding: clamp(20px, 5vw, 32px);
}

/* Perfect card alignment and spacing with mobile-first approach */
.card{
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
  padding: clamp(24px, 6vw, 40px);
  text-align: left;
  background: linear-gradient(135deg, var(--glass), var(--glass-2));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: clamp(16px, 4vw, 24px);
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(124,231,255,0.1), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: all .4s ease;
  position: relative;
}

.card h2{
  margin: 0 0 clamp(16px, 4vw, 24px) 0;
  font-size: clamp(24px, 5.5vw, 36px);
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}

.card p{
  margin:0 0 clamp(16px,4vw,24px) 0;
  line-height:1.6;font-size:clamp(15px,3.8vw,18px);
}

.card ul{
  margin:0;padding:0 0 0 clamp(16px,4vw,20px);
  list-style:none;
}

.card li{
  margin:0 0 clamp(12px,3vw,16px) 0;
  position:relative;
  font-size:clamp(15px,3.8vw,18px);
  line-height:1.5;
}

.card li::before{
  content:'→';position:absolute;left:clamp(-16px,-4vw,-20px);
  color:var(--accent);font-weight:700;
}

/* Enhanced text highlights for about and services */
.highlight-text {
  color: var(--accent);
  font-weight: 700;
  background: linear-gradient(135deg, rgba(124,231,255,0.1), rgba(124,231,255,0.05));
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(124,231,255,0.2);
}

.highlight-accent {
  color: #c084fc;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(192,132,252,0.3);
}

.highlight-success {
  color: #10b981;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(16,185,129,0.3);
}

.service-highlight {
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid;
  margin-right: 8px;
  display: inline-block;
  margin-bottom: 4px;
  transition: all 0.3s ease;
}

.service-highlight.strategy {
  color: #3b82f6;
  background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(59,130,246,0.05));
  border-color: rgba(59,130,246,0.3);
}

.service-highlight.design {
  color: #8b5cf6;
  background: linear-gradient(135deg, rgba(139,92,246,0.1), rgba(139,92,246,0.05));
  border-color: rgba(139,92,246,0.3);
}

.service-highlight.development {
  color: var(--accent);
  background: linear-gradient(135deg, rgba(124,231,255,0.1), rgba(124,231,255,0.05));
  border-color: rgba(124,231,255,0.3);
}

.service-highlight.optimization {
  color: #10b981;
  background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(16,185,129,0.05));
  border-color: rgba(16,185,129,0.3);
}

.service-highlight:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Modern Split-Layout Hero Section */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: clamp(40px, 8vw, 80px) 0;
  overflow: hidden;
  background: linear-gradient(135deg, 
    rgba(0,0,0,0.95) 0%, 
    rgba(0,20,40,0.9) 30%, 
    rgba(5,10,30,0.9) 70%, 
    rgba(0,0,0,0.95) 100%);
}

.hero::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: radial-gradient(circle at 20% 30%, rgba(124,231,255,0.15) 0%, transparent 50%),
              radial-gradient(circle at 80% 70%, rgba(147,51,234,0.08) 0%, transparent 50%),
              radial-gradient(circle at 50% 50%, rgba(255,255,255,0.03) 0%, transparent 70%);
  animation: heroAmbient 20s ease-in-out infinite alternate;
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, 
    transparent 0%, 
    rgba(124,231,255,0.04) 25%, 
    transparent 50%, 
    rgba(147,51,234,0.03) 75%, 
    transparent 100%);
  animation: heroShimmer 25s ease-in-out infinite;
  pointer-events: none;
}

@keyframes heroShimmer {
  0%, 100% { transform: translateX(-100%) scale(1) rotate(0deg); opacity: 0.3; }
  50% { transform: translateX(100%) scale(1.1) rotate(1deg); opacity: 0.7; }
}

@keyframes heroAmbient {
  0% { transform: scale(1) rotate(0deg); opacity: 0.5; }
  100% { transform: scale(1.2) rotate(2deg); opacity: 0.8; }
}

.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 8vw, 80px);
  align-items: center;
  min-height: 70vh;
  position: relative;
  z-index: 10;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}

/* Left Side - Content */
.hero-content {
  max-width: 600px;
  padding-right: clamp(20px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
}

.hero-brand-logo {
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 900;
  color: var(--accent);
  margin-bottom: clamp(24px, 5vw, 32px);
  letter-spacing: -0.02em;
  position: relative;
  display: inline-block;
  align-self: flex-start;
}

.hero-brand-logo::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), transparent);
  border-radius: 2px;
  opacity: 0.6;
}

.hero-headline {
  font-size: clamp(42px, 8vw, 72px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 clamp(24px, 5vw, 32px) 0;
  background: linear-gradient(135deg, #ffffff 20%, var(--accent) 50%, #ffffff 80%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 40px rgba(124,231,255,0.3);
  animation: headlinePulse 8s ease-in-out infinite alternate;
  max-width: 100%;
}

@keyframes headlinePulse {
  0% { text-shadow: 0 0 40px rgba(124,231,255,0.3); }
  100% { text-shadow: 0 0 60px rgba(124,231,255,0.4), 0 0 100px rgba(124,231,255,0.2); }
}

.hero-value-statement {
  font-size: clamp(18px, 4vw, 22px);
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
  margin: 0 0 clamp(32px, 6vw, 48px) 0;
  font-weight: 400;
  max-width: 100%;
}

.hero-value-statement strong {
  color: var(--accent);
  font-weight: 600;
}

.hero-cta-group {
  display: flex;
  gap: clamp(16px, 3vw, 20px);
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
}

/* Right Side - Device Mockups with Perfect Alignment */
.hero-mockups {
  position: relative;
  height: clamp(400px, 50vw, 600px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 40px);
}

.device-mockup {
  position: absolute;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.device-mockup.laptop {
  width: clamp(300px, 40vw, 450px);
  height: clamp(190px, 25vw, 290px);
  top: 10%;
  left: 50%;
  transform: translateX(-50%) perspective(800px) rotateY(-3deg) rotateX(2deg);
  z-index: 2;
}

.device-mockup.phone {
  width: clamp(90px, 12vw, 130px);
  height: clamp(180px, 24vw, 260px);
  bottom: 5%;
  right: 5%;
  transform: perspective(600px) rotateY(8deg) rotateX(-3deg);
  z-index: 3;
}

.device-frame {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
  border-radius: clamp(8px, 2vw, 16px);
  padding: clamp(8px, 2vw, 16px);
  box-shadow: 
    0 20px 60px rgba(0,0,0,0.5),
    0 8px 30px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.1);
  position: relative;
  overflow: hidden;
}

.device-mockup.phone .device-frame {
  border-radius: clamp(12px, 3vw, 24px);
  padding: clamp(4px, 1vw, 8px);
}

.device-screen {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: clamp(4px, 1vw, 8px);
  overflow: hidden;
  position: relative;
}

.device-mockup.phone .device-screen {
  border-radius: clamp(8px, 2vw, 16px);
}

/* Mockup Content Styling with Enhanced Sharpness */
.mockup-content {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: #ffffff;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Image-based mockups using your actual screenshots with enhanced quality */
.device-mockup.laptop .mockup-content {
  background: url('{E7145514-CEDF-4CCB-814A-2F21E3F1F773}.png') no-repeat center center;
  background-size: contain;
  background-position: center center;
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.device-mockup.phone .mockup-content {
  background: url('{3D82AA0A-0DCF-4888-B859-76B75C5B06D9}.png') no-repeat center center;
  background-size: contain;
  background-position: center center;
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Hide the CSS-generated mockup content when using real images */
.device-mockup.laptop .mock-header,
.device-mockup.laptop .mock-hero-section,
.device-mockup.laptop .mock-features,
.device-mockup.phone .mock-mobile-header,
.device-mockup.phone .mock-mobile-hero {
  display: none;
}

/* Laptop Mockup Content */
.mock-header {
  height: 15%;
  background: linear-gradient(90deg, var(--accent), #4dd0e1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8%;
}

.mock-nav {
  width: 30%;
  height: 3px;
  background: rgba(255,255,255,0.8);
  border-radius: 2px;
}

.mock-logo {
  width: 15%;
  height: 3px;
  background: rgba(255,255,255,0.9);
  border-radius: 2px;
}

.mock-hero-section {
  padding: 8% 8%;
  background: linear-gradient(135deg, #ffffff, #f1f5f9);
}

.mock-title {
  width: 70%;
  height: 8px;
  background: linear-gradient(90deg, #1e293b, #334155);
  border-radius: 4px;
  margin-bottom: 6px;
}

.mock-subtitle {
  width: 85%;
  height: 4px;
  background: #64748b;
  border-radius: 2px;
  margin-bottom: 8px;
}

.mock-button {
  width: 25%;
  height: 6px;
  background: linear-gradient(90deg, var(--accent), #4dd0e1);
  border-radius: 3px;
}

.mock-features {
  display: flex;
  gap: 4%;
  padding: 0 8% 8%;
}

.mock-feature {
  flex: 1;
  height: 20px;
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  border-radius: 4px;
  border: 1px solid #e2e8f0;
}

/* Phone Mockup Content */
.mock-mobile-header {
  height: 20%;
  background: linear-gradient(90deg, var(--accent), #4dd0e1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12%;
}

.mock-mobile-menu {
  width: 20%;
  height: 2px;
  background: rgba(255,255,255,0.9);
  border-radius: 1px;
}

.mock-mobile-logo {
  width: 30%;
  height: 2px;
  background: rgba(255,255,255,0.9);
  border-radius: 1px;
}

.mock-mobile-hero {
  padding: 12%;
  background: #ffffff;
}

.mock-mobile-title {
  width: 90%;
  height: 4px;
  background: #1e293b;
  border-radius: 2px;
  margin-bottom: 4px;
}

.mock-mobile-text {
  width: 75%;
  height: 2px;
  background: #64748b;
  border-radius: 1px;
  margin-bottom: 6px;
}

.mock-mobile-button {
  width: 40%;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #4dd0e1);
  border-radius: 2px;
}

/* Hover Effects for Device Mockups */
.hero-mockups:hover .device-mockup.laptop {
  transform: translateX(-50%) perspective(800px) rotateY(-8deg) rotateX(8deg) translateY(-5px);
}

.hero-mockups:hover .device-mockup.phone {
  transform: perspective(600px) rotateY(15deg) rotateX(-8deg) translateY(-3px);
}

/* Mobile Responsive Design with Perfect Alignment and No Cutoffs */
@media (max-width: 968px) {
  .hero-split {
    grid-template-columns: 1fr;
    gap: clamp(20px, 4vw, 30px);
    text-align: center;
    padding: 0 clamp(16px, 4vw, 24px);
    max-width: 100%;
  }
  
  .hero-content {
    order: 1;
    max-width: 100%;
    padding-right: 0;
    align-items: center;
    text-align: center;
  }
  
  .hero-mockups {
    order: 2;
    height: clamp(320px, 60vw, 450px);
    margin: clamp(30px, 6vw, 50px) auto 0;
    padding: clamp(24px, 6vw, 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
    box-sizing: border-box;
  }
  
  .device-mockup.laptop {
    width: clamp(120px, 30vw, 160px);
    height: clamp(75px, 19vw, 100px); /* 16:10 aspect ratio */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) perspective(400px) rotateY(-5deg) rotateX(2deg);
    z-index: 2;
    max-width: calc(65%);
  }
  
  .device-mockup.phone {
    width: clamp(45px, 11vw, 60px);
    height: clamp(80px, 20vw, 107px); /* 9:16 aspect ratio (corrected) */
    position: absolute;
    top: 50%;
    right: 18%;
    transform: translate(0, -50%) perspective(300px) rotateY(8deg) rotateX(-2deg);
    z-index: 3;
    max-width: calc(18%);
  }

  /* Fix mobile mockup content to prevent cropping and distortion */
  .device-mockup.laptop .mockup-content {
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  .device-mockup.phone .mockup-content {
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    transform: none !important;
    background-attachment: scroll !important;
  }

  /* Ensure phone frame proportions work on mobile */
  .device-mockup.phone .device-frame {
    border-radius: clamp(8px, 2vw, 16px);
    padding: clamp(3px, 0.8vw, 6px);
  }

  .device-mockup.phone .device-screen {
    border-radius: clamp(6px, 1.5vw, 12px);
  }
  
  .hero-headline {
    font-size: clamp(36px, 10vw, 56px);
    text-align: center;
  }
  
  .hero-brand-logo {
    font-size: clamp(24px, 6vw, 32px);
    align-self: center;
  }
  
  .hero-value-statement {
    text-align: center;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  
  .hero-cta-group {
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: clamp(12px, 3vw, 16px);
    width: 100%;
  }
  
  .hero-cta-group .btn {
    width: 100%;
    max-width: 320px;
    min-height: 56px;
    padding: clamp(18px, 4.5vw, 22px) clamp(32px, 8vw, 40px);
    font-size: clamp(17px, 4.2vw, 19px);
    justify-content: center;
  }
  
  /* Mobile-specific touch behavior */
  .btn.hero-primary:hover,
  .btn.hero-secondary:hover {
    transform: translate3d(0,0,0);
    animation: none;
  }
  
  .btn.hero-primary:active {
    transform: translate3d(0,3px,0) scale(0.96);
    box-shadow: 0 4px 16px rgba(124,231,255,0.4);
    transition: all 0.1s cubic-bezier(0.23, 1, 0.32, 1);
  }
  
  .btn.hero-secondary:active {
    transform: translate3d(0,2px,0) scale(0.96);
    background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(124,231,255,0.1));
    transition: all 0.1s cubic-bezier(0.23, 1, 0.32, 1);
  }
}

@media (max-width: 640px) {
  .hero {
    min-height: 90vh;
    padding: clamp(20px, 5vw, 40px) 0;
  }
  
  .hero-split {
    gap: clamp(30px, 6vw, 40px);
    padding: 0 clamp(12px, 3vw, 20px);
  }
  
  .hero-mockups {
    height: clamp(240px, 35vw, 320px);
    padding: clamp(8px, 1.5vw, 12px);
    overflow: hidden;
    position: relative;
    width: 100%;
    max-width: 100vw;
  }
  
  .device-mockup.laptop {
    width: clamp(180px, 65vw, 250px);
    height: clamp(115px, 41vw, 160px);
    top: 15%;
    left: 50%;
    transform: translateX(-50%) perspective(300px) rotateY(0deg) rotateX(0deg);
    max-width: calc(100vw - 30px);
  }
  
  .device-mockup.phone {
    width: clamp(50px, 18vw, 70px);
    height: clamp(100px, 36vw, 140px);
    right: 2%;
    bottom: 8%;
    transform: perspective(200px) rotateY(1deg) rotateX(0deg);
    max-width: calc(20vw);
  }
  
  .hero-headline {
    font-size: clamp(28px, 9vw, 42px);
    line-height: 1.2;
  }
  
  .hero-value-statement {
    font-size: clamp(16px, 4.5vw, 18px);
    max-width: 95%;
  }
  
  .hero-cta-group .btn {
    min-height: 60px;
    padding: clamp(20px, 5vw, 24px) clamp(36px, 9vw, 44px);
    font-size: clamp(18px, 4.5vw, 20px);
    border-radius: 30px;
    max-width: 100%;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .hero-split {
    padding: 0 clamp(8px, 2vw, 16px);
  }
  
  .hero-mockups {
    height: clamp(240px, 35vw, 300px);
    overflow: hidden;
    position: relative;
    width: 100%;
  }
  
  .device-mockup.laptop {
    width: clamp(180px, 80vw, 260px);
    height: clamp(115px, 50vw, 165px);
    left: 35%;
    top: 10%;
    transform: translateX(-50%) perspective(600px) rotateY(0deg) rotateX(0deg);
  }
  
  .device-mockup.phone {
    width: clamp(50px, 22vw, 70px);
    height: clamp(100px, 44vw, 140px);
    right: 12%;
    bottom: 5%;
    transform: perspective(400px) rotateY(1deg) rotateX(0deg);
  }
  
  .hero-headline {
    font-size: clamp(24px, 8vw, 36px);
  }
  
  .hero-value-statement {
    font-size: clamp(14px, 4vw, 16px);
  }
}

.btn.hero-primary {
  background: linear-gradient(135deg, var(--accent) 0%, #4dd0e1 100%);
  color: #021018;
  font-weight: 700;
  font-size: clamp(16px, 3.8vw, 18px);
  padding: clamp(16px, 4vw, 20px) clamp(28px, 6vw, 36px);
  border-radius: 50px;
  border: none;
  text-decoration: none;
  box-shadow: 0 8px 32px rgba(124,231,255,0.3), 0 4px 16px rgba(124,231,255,0.2);
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  animation: primaryGlow 4s ease-in-out infinite alternate;
  min-width: 200px;
  
  /* Mobile touch optimization */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
}

@keyframes primaryGlow {
  0% { 
    box-shadow: 0 8px 32px rgba(124,231,255,0.3), 0 4px 16px rgba(124,231,255,0.2);
    transform: translate3d(0,0,0);
  }
  100% { 
    box-shadow: 0 12px 40px rgba(124,231,255,0.4), 0 6px 20px rgba(124,231,255,0.3);
    transform: translate3d(0,-1px,0);
  }
}

.btn.hero-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent 50%, rgba(255,255,255,0.1));
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 50px;
}

.btn.hero-primary:hover {
  transform: translate3d(0,-4px,0) scale(1.02);
  box-shadow: 0 16px 48px rgba(124,231,255,0.5), 0 8px 24px rgba(124,231,255,0.4);
  animation: none;
}

.btn.hero-primary:active {
  transform: translate3d(0,1px,0) scale(0.98);
  transition: all 0.15s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn.hero-primary:hover::before {
  opacity: 1;
}

.btn.hero-primary svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.5;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn.hero-primary:hover svg {
  transform: translateX(3px);
}

.btn.hero-secondary {
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(124,231,255,0.04));
  color: rgba(255,255,255,0.9);
  font-weight: 600;
  font-size: clamp(15px, 3.6vw, 17px);
  padding: clamp(14px, 3.5vw, 18px) clamp(24px, 5vw, 32px);
  border: 1px solid rgba(124,231,255,0.25);
  border-radius: 50px;
  text-decoration: none;
  backdrop-filter: blur(12px);
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 180px;
  
  /* Mobile touch optimization */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
}

.btn.hero-secondary:hover {
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(124,231,255,0.08));
  border-color: rgba(124,231,255,0.4);
  transform: translate3d(0,-3px,0);
}

.btn.hero-secondary:active {
  transform: translate3d(0,1px,0) scale(0.98);
  transition: all 0.15s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn.hero-secondary svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn.hero-secondary:hover svg {
  transform: scale(1.1) rotate(2deg);
}

.trust-badge svg {
  width: clamp(14px, 3vw, 16px);
  height: clamp(14px, 3vw, 16px);
  stroke: var(--accent);
  stroke-width: 2.5;
  flex-shrink: 0;
}

/* Mobile responsiveness for trust badges */
@media (max-width: 768px) {
  .trust-badges {
    gap: clamp(8px, 2vw, 12px);
    margin-top: clamp(12px, 2vw, 16px);
  }
  
  .trust-badge {
    font-size: clamp(11px, 2.5vw, 13px);
    padding: clamp(3px, 0.8vw, 5px) clamp(6px, 1.5vw, 10px);
    gap: clamp(4px, 1vw, 6px);
  }
  
  .trust-badge svg {
    width: clamp(12px, 2.5vw, 14px);
    height: clamp(12px, 2.5vw, 14px);
  }
  
  /* Hero section mobile optimization */
  .hero {
    min-height: 100vh;
    padding: clamp(10px, 2vw, 20px) 0;
  }
  
  .hero-card {
    padding: clamp(20px, 5vw, 40px) clamp(16px, 4vw, 32px);
  }
  
  .hero-title {
    font-size: clamp(36px, 8vw, 72px);
    line-height: 1.1;
  }
  
  .hero-subtitle {
    font-size: clamp(18px, 4vw, 28px);
    margin-bottom: clamp(16px, 4vw, 24px);
  }
  
  .hero-description {
    font-size: clamp(14px, 3.5vw, 17px);
    margin-bottom: clamp(24px, 6vw, 36px);
  }
  
  .hero-highlights {
    flex-direction: column;
    align-items: center;
    gap: clamp(12px, 3vw, 16px);
  }
  
  .highlight-item {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
  
  .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: clamp(12px, 3vw, 16px);
  }
  
  .btn.hero-primary,
  .btn.hero-secondary {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
}

/* Call to Action Banner Section */
.cta-banner{
  padding:clamp(20px,4vw,32px) 0;
  background:linear-gradient(135deg, rgba(147,51,234,0.05), rgba(124,58,237,0.03));
  border-top:1px solid rgba(147,51,234,0.15);
  border-bottom:1px solid rgba(147,51,234,0.15);
  position:relative;
  overflow:hidden;
  margin-top:clamp(-20px,-4vw,-32px);
}

.cta-banner::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 25% 30%, rgba(147,51,234,0.08) 0%, transparent 50%),
             radial-gradient(circle at 75% 70%, rgba(124,58,237,0.06) 0%, transparent 50%);
  pointer-events:none;
  animation:bannerAmbient 8s ease-in-out infinite alternate;
}

@keyframes bannerAmbient {
  0% { transform: scale(1) rotate(0deg); opacity: 0.7; }
  100% { transform: scale(1.05) rotate(0.5deg); opacity: 1; }
}

.cta-banner-card{
  background:linear-gradient(135deg, rgba(255,255,255,0.05), rgba(147,51,234,0.03));
  border:1px solid rgba(147,51,234,0.2);
  border-radius:24px;padding:clamp(32px,6vw,48px);
  position:relative;backdrop-filter:blur(16px);
  box-shadow:0 12px 40px rgba(147,51,234,0.12), inset 0 1px 0 rgba(255,255,255,0.1);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(24px,5vw,32px);max-width:900px;margin:0 auto;
  transition:all 0.4s ease;
}

.cta-banner-card::before{
  content:'';position:absolute;inset:-1px;
  background:linear-gradient(135deg, transparent, rgba(147,51,234,0.4), transparent);
  border-radius:21px;opacity:0.4;z-index:-1;filter:blur(3px);
  animation:bannerGlow 6s ease-in-out infinite alternate;
}

@keyframes bannerGlow {
  0% { opacity: 0.3; transform: scale(0.98); }
  100% { opacity: 0.5; transform: scale(1.02); }
}

.cta-banner-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 40px rgba(147,51,234,0.2), inset 0 1px 0 rgba(255,255,255,0.12);
}

.cta-banner-icon{
  width:clamp(48px,8vw,64px);height:clamp(48px,8vw,64px);
  background:linear-gradient(135deg, #9333ea, #7c3aed);
  border-radius:16px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;box-shadow:0 4px 16px rgba(147,51,234,0.3);
  animation:iconFloat 4s ease-in-out infinite alternate;
  position:relative;overflow:hidden;
}

.cta-banner-icon::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
  border-radius:16px;opacity:0;transition:opacity 0.3s ease;
}

.cta-banner-card:hover .cta-banner-icon::before{
  opacity:1;
}

@keyframes iconFloat {
  0% { transform: translateY(0px) scale(1); }
  100% { transform: translateY(-4px) scale(1.05); }
}

.cta-banner-icon svg{
  width:clamp(24px,4vw,32px);height:clamp(24px,4vw,32px);
  stroke:#fff;stroke-width:2.5;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.cta-banner-content h3{
  margin:0 0 clamp(16px,3vw,20px) 0;
  font-size:clamp(24px,5vw,32px);font-weight:700;
  background:linear-gradient(135deg, #fff 20%, #c084fc 60%, #fff 100%);
  background-clip:text;-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  line-height:1.2;text-align:center;
}

.cta-banner-content p{
  margin:0 0 clamp(24px,5vw,32px) 0;
  font-size:clamp(16px,4vw,18px);
  color:rgba(255,255,255,0.85);
  line-height:1.6;text-align:center;
  max-width:700px;
}

.cta-banner-content strong{
  color:#c084fc;font-weight:700;
}

.cta-banner-content .highlight{
  color:#9333ea;font-weight:600;
  text-shadow:0 0 12px rgba(147,51,234,0.3);
}

.cta-banner-stats{
  display:flex;gap:clamp(16px,3vw,24px);
  margin-bottom:clamp(24px,5vw,32px);
  flex-wrap:wrap;justify-content:center;
  width:100%;
}

.stat-item{
  text-align:center;flex:1;min-width:120px;max-width:160px;
  padding:clamp(12px,3vw,16px) clamp(16px,4vw,20px);
  background:linear-gradient(135deg, rgba(147,51,234,0.12), rgba(124,58,237,0.06));
  border:1px solid rgba(147,51,234,0.25);
  border-radius:16px;backdrop-filter:blur(8px);
  transition:all 0.3s ease;
}

.stat-item:hover{
  background:linear-gradient(135deg, rgba(147,51,234,0.15), rgba(124,58,237,0.08));
  border-color:rgba(147,51,234,0.3);
  transform:translateY(-1px);
}

.stat-number{
  display:block;font-size:clamp(18px,4vw,24px);
  font-weight:800;color:#c084fc;line-height:1;
  margin-bottom:4px;
}

.stat-label{
  font-size:clamp(11px,2.5vw,13px);
  color:rgba(255,255,255,0.7);font-weight:600;
  text-transform:uppercase;letter-spacing:0.5px;
}

.cta-banner-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(135deg, #9333ea, #7c3aed);
  color:#fff;font-weight:700;
  font-size:clamp(14px,3.5vw,16px);
  padding:clamp(10px,2.5vw,14px) clamp(20px,4vw,28px);
  border-radius:50px;text-decoration:none;
  box-shadow:0 6px 20px rgba(147,51,234,0.3);
  transition:all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position:relative;overflow:hidden;
}

.cta-banner-btn::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
  opacity:0;transition:opacity 0.3s ease;border-radius:50px;
}

.cta-banner-btn:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 8px 28px rgba(147,51,234,0.4), 0 0 20px rgba(147,51,234,0.2);
}

.cta-banner-btn:hover::before{
  opacity:1;
}

.cta-banner-btn svg{
  width:16px;height:16px;stroke:currentColor;stroke-width:2.5;
  transition:transform 0.3s ease;
}

.cta-banner-btn:hover svg{
  transform:translateX(2px);
}

/* Mobile responsiveness for CTA banner */
@media (max-width: 768px) {
  .cta-banner-card{
    padding:clamp(24px,6vw,32px);
    gap:clamp(20px,5vw,24px);
  }
  
  .cta-banner-stats{
    gap:clamp(12px,3vw,16px);
  }
  
  .stat-item{
    flex:1;min-width:100px;
    padding:clamp(10px,2.5vw,12px) clamp(12px,3vw,16px);
  }
  
  .cta-banner-icon{
    width:clamp(56px,12vw,72px);
    height:clamp(56px,12vw,72px);
  }
}

/* Actions layout for mobile and desktop */
.actions{
  display:flex;gap:clamp(12px,3vw,20px);justify-content:center;
  flex-wrap:wrap;margin-top:clamp(20px,5vw,32px);
  position:relative;z-index:1;
}

/* Contact section alignment */
.contact-wrap{
  margin:clamp(48px,12vw,96px) 0;
}

.contact-grid{
  display:grid;grid-template-columns:1fr;
  gap:clamp(24px,6vw,40px);align-items:start;
  max-width:1000px;margin:0 auto;
}

.contact-card{
  padding:clamp(24px,6vw,40px);text-align:center;
}

.contact-card h2{
  margin:0 0 clamp(16px,4vw,24px) 0;
  font-size:clamp(24px,5vw,32px);
}

/* Form perfect spacing */
.form{
  padding:clamp(24px,6vw,40px);
}

.form h3{
  margin:0 0 clamp(16px,4vw,24px) 0;
  font-size:clamp(20px,4.5vw,26px);
}

/* Enhanced desktop layouts while maintaining mobile-first */
@media (min-width:640px){
  .intro .split{grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,40px)}
  .brutal{flex-direction:row}
  .brutal > div{padding:clamp(16px,4vw,24px)}
  
  /* Better desktop spacing for readability */
  .card{
    padding:clamp(32px,6vw,48px);
  }
  
  .card h2{
    font-size:clamp(28px,5vw,36px);
  }
  
  .card p{
    font-size:clamp(16px,3.5vw,18px);
  }
}

@media (min-width:768px){
  .container{
    padding:0 clamp(24px,4vw,40px);
  }
  
  .contact-grid{grid-template-columns:1fr 1fr}
  section{margin:clamp(48px,12vw,96px) 0}
  
  /* Desktop text sizing for better readability */
  .hero h1{
    font-size:clamp(48px,8vw,72px);
  }
  
  .hero .tag{
    font-size:clamp(18px,3.5vw,24px);
  }
  
  .hero .lede{
    font-size:clamp(17px,3.5vw,20px);
  }
}

@media (min-width:1024px){
  .container{
    padding:0 clamp(40px,6vw,60px);
  }
  
  .hero .card{
    padding:clamp(60px,12vw,100px) clamp(40px,8vw,60px);
  }
  
  .intro .split{gap:clamp(32px,6vw,48px)}
  
  /* Optimal desktop text sizes */
  .card h2{
    font-size:clamp(30px,4vw,36px);
  }
  
  .card p,
  .card li{
    font-size:17px;
  }
  
  /* Ensure price text fits on one line on desktop */
  .price{
    font-size:clamp(36px,6vw,48px);
  }
  
  .price-unit{
    font-size:clamp(20px,3.5vw,24px);
  }
}

/* Contact area - fully responsive */
.contact-wrap{margin-bottom:clamp(32px,8vw,64px)}
.contact-grid{display:grid;grid-template-columns:1fr;gap:clamp(16px,4vw,24px);align-items:start}

/* brutalist contact block — mobile-first: stacked */
.brutal{display:flex;flex-direction:column;background:#0b0b0f;border-radius:8px;border:2px solid var(--accent);overflow:hidden}
.brutal > div{flex:1 1 0;min-width:0;padding:14px;display:flex;flex-direction:column;justify-content:center}
.brutal .big{font-weight:800;font-size:clamp(15px,4.5vw,18px);color:var(--text);line-height:1;white-space:nowrap}
.brutal .small{color:var(--muted);font-size:clamp(11px,3.2vw,12px);margin-top:6px}
.brutal .big, .brutal .small{overflow-wrap:break-word;word-break:break-word}

/* Enhanced form accessibility and responsiveness */
.form{padding:clamp(18px,5vw,28px);display:flex;flex-direction:column;gap:clamp(12px,3vw,16px)}
.form h3{margin:0 0 clamp(8px,2vw,12px) 0;font-size:clamp(18px,4vw,22px)}
.form label{display:block;position:relative}
.form input,.form textarea{
  width:100%;padding:clamp(12px,3vw,16px);border-radius:8px;
  border:1px solid var(--glass-border);
  background:linear-gradient(135deg, var(--glass), var(--glass-2));
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:var(--text);font-size:clamp(14px,3.5vw,16px);
  transition:all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  min-height:44px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
  position:relative;
}
.form input:focus,.form textarea:focus{
  border-color:var(--accent);
  background:linear-gradient(135deg, var(--glass-2), var(--glass-3));
  box-shadow:0 0 0 3px rgba(124,231,255,0.1),
             inset 0 1px 0 rgba(255,255,255,0.08);
  outline:none;
}
.form textarea{resize:none;min-height:120px}
.form-actions{display:flex;gap:clamp(8px,2vw,12px);margin-top:clamp(8px,2vw,12px);flex-wrap:wrap}
.form .form-status{margin-top:clamp(8px,2vw,12px);color:var(--muted);font-size:clamp(13px,3vw,15px);min-height:20px}

/* responsive */
@media (min-width:640px){
  .brutal{flex-direction:row}
  .brutal > div{padding:20px}
}

@media (min-width:900px){
  .contact-grid{grid-template-columns:1fr 420px}
  .intro .split{grid-template-columns:1fr 1fr}
}

/* CTA banner - enhanced responsiveness */
.cta-banner{
  background:linear-gradient(90deg,#071018 0%, rgba(7,6,10,0.9) 50%, rgba(124,231,255,0.02) 100%);
  padding:clamp(32px,8vw,56px) 0;margin-top:clamp(20px,5vw,36px);
  border-top:1px solid rgba(255,255,255,0.02);
}
.cta-eyebrow{margin:0;font-size:clamp(16px,4vw,20px);letter-spacing:0.08em;font-weight:800;color:#c9ffff}
.cta-lead{margin:clamp(8px,2vw,12px) 0 clamp(16px,4vw,24px) 0;color:var(--muted);max-width:780px;font-size:clamp(14px,3.5vw,18px)}
.cta-actions{display:flex;gap:clamp(8px,3vw,16px);flex-wrap:wrap}
.cta-hero{font-size:clamp(14px,3.5vw,16px);padding:clamp(12px,3vw,16px) clamp(16px,4vw,24px)}

/* Enhanced Process section with smooth contextual animations */
.process-wrap{
  margin:clamp(48px,10vw,96px) auto;
  position:relative;
}

.process.card{
  padding:clamp(32px,8vw,56px);text-align:center;
  position:relative;overflow:visible;
}

.process h2{
  margin:0 0 clamp(12px,3vw,20px) 0;font-size:clamp(28px,6vw,42px);
  background:linear-gradient(135deg, var(--text), var(--accent), #c6fffa);
  background-clip:text;-webkit-background-clip:text;color:transparent;
  text-align:center;white-space:nowrap;
}

.process .muted{
  margin:0 0 clamp(32px,8vw,56px) 0;font-size:clamp(15px,3.8vw,20px);
  line-height:1.5;text-shadow:0 1px 2px rgba(0,0,0,0.3);
}

.process-grid{
  display:grid;grid-template-columns:1fr;gap:clamp(32px,8vw,56px);
  align-items:center;max-width:1000px;margin:0 auto;
  overflow:visible;
}

.steps{
  display:flex;flex-direction:column;gap:clamp(20px,5vw,32px);
  position:relative;
}

/* Smooth moving highlight that transitions between steps */
.step-highlight-mover{
  position:absolute;left:0;top:0;right:0;
  height:auto;
  background:linear-gradient(135deg, rgba(124,231,255,0.04), rgba(124,231,255,0.02));
  border:1px solid rgba(124,231,255,0.15);
  border-radius:12px;
  box-shadow:0 2px 12px rgba(124,231,255,0.08);
  opacity:0;z-index:1;
  transition:all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events:none;will-change:transform;
}

.step-highlight-mover::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg, transparent, rgba(124,231,255,0.03), transparent);
  border-radius:11px;
  animation:highlightShimmer 3s ease-in-out infinite;
}

.step-highlight-mover.active{
  opacity:0.7;
}

@keyframes highlightShimmer{
  0%,100%{transform:translateX(-100%);opacity:0}
  50%{transform:translateX(0);opacity:0.5}
}

.steps::before{
  content:'';position:absolute;left:clamp(18px,4vw,22px);
  top:clamp(60px,12vw,80px);bottom:clamp(60px,12vw,80px);
  width:2px;background:linear-gradient(180deg, transparent, var(--accent), transparent);
  opacity:0;animation:lineGrow 2s ease-out 0.5s forwards;
}

@keyframes lineGrow{
  0%{height:0;opacity:0}
  100%{height:calc(100% - clamp(120px,24vw,160px));opacity:0.3}
}

.step{
  display:flex;gap:clamp(16px,4vw,24px);align-items:center;
  opacity:0;transform:translateX(-32px) translateY(16px);
  transition:all .8s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change:transform,opacity;position:relative;z-index:2;
  padding:clamp(20px,4vw,24px);border-radius:12px;
  margin:clamp(10px,2.5vw,14px) 0;
  min-height:clamp(68px,14vw,84px);
}

/* Enhanced step highlighting - now working with moving outline */
.step-highlighted{
  transform:translateX(4px) scale(1.01) !important;
}

.step-highlighted .dot{
  background:linear-gradient(135deg, var(--accent), #9dd9ff) !important;
  box-shadow:0 4px 16px rgba(124,231,255,0.3) !important;
  transform:scale(1.08) !important;
  border:1px solid rgba(124,231,255,0.4) !important;
}

.step-highlighted .dot-number{
  color:#021018 !important;font-weight:900;
  text-shadow:0 1px 2px rgba(0,0,0,0.3);
}

.step-highlighted .step-content strong{
  color:var(--accent) !important;
  text-shadow:0 0 8px rgba(124,231,255,0.2);
  font-weight:700;
}

.step-highlighted .step-content .muted{
  color:rgba(255,255,255,0.9) !important;
  text-shadow:0 1px 2px rgba(0,0,0,0.2);
}

.step:nth-child(1){animation:stepSlideIn .8s ease-out 0.8s forwards}
.step:nth-child(2){animation:stepSlideIn .8s ease-out 1.2s forwards}
.step:nth-child(3){animation:stepSlideIn .8s ease-out 1.6s forwards}
.step:nth-child(4){animation:stepSlideIn .8s ease-out 2.0s forwards}

@keyframes stepSlideIn{
  0%{opacity:0;transform:translateX(-32px) translateY(16px)}
  60%{opacity:1;transform:translateX(8px) translateY(-4px)}
  100%{opacity:1;transform:translateX(0) translateY(0)}
}

.step:hover{
  cursor:pointer;
}

.step .dot{
  width:clamp(44px,10vw,56px);height:clamp(44px,10vw,56px);
  border-radius:16px;position:relative;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),#c6fffa);
  color:#021018;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:clamp(16px,4vw,20px);
  transition:all .4s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow:hidden;box-shadow:0 8px 24px rgba(124,231,255,0.2);
  transform-origin:center center;
}

.step .dot::before{
  content:'';position:absolute;inset:-2px;
  background:linear-gradient(45deg, var(--accent), #c6fffa, var(--accent));
  border-radius:18px;opacity:0;transition:opacity .4s ease;z-index:-1;
  filter:blur(6px);
}

.step:hover .dot{
  transform:scale(1);
  box-shadow:0 12px 32px rgba(124,231,255,0.4);
  background:linear-gradient(135deg, #4ade80, var(--accent));
}
.step:hover .dot::before{opacity:0.6}

.dot-number{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  z-index:2;transition:all .3s ease;
  text-shadow:0 1px 2px rgba(0,0,0,0.4);
  font-weight:900;line-height:1;
}

.dot-icon{
  position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-size:clamp(16px,4vw,20px);
  opacity:0;transform:scale(0.8);
  transition:all .4s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index:3;
}

.dot-icon svg{
  width:clamp(22px,5vw,26px);height:clamp(22px,5vw,26px);
  stroke:#021018;stroke-width:2.5;
}

.step:hover .dot-number{
  opacity:1;transform:scale(1);
}
.step:hover .dot-icon{
  opacity:0;transform:scale(1);
}

.step-content{
  text-align:left;flex:1;
  transition:transform .3s ease;
}

.step:hover .step-content{
  transform:translateX(0);
}

.step-content{text-align:left;flex:1}

.step strong{
  font-size:clamp(18px,4.5vw,22px);font-weight:700;
  display:block;margin-bottom:clamp(4px,1vw,8px);
  color:var(--text);transition:color .3s ease;
  text-shadow:0 1px 2px rgba(0,0,0,0.4);
}

.step:hover strong{color:var(--accent)}

.step p{
  margin:0;font-size:clamp(14px,3.5vw,17px);
  color:var(--muted);line-height:1.5;transition:color .3s ease;
  text-shadow:0 1px 2px rgba(0,0,0,0.3);
}
.step:hover p{color:rgba(255,255,255,0.8)}

/* Icon styling for clean SVG icons */
.inline-icon{
  width:16px;height:16px;
  vertical-align:middle;
  margin-right:8px;
  color:var(--accent);
  filter:drop-shadow(0 0 8px rgba(124,231,255,0.3));
}

.dot-icon{
  display:flex;align-items:center;justify-content:center;
  width:clamp(24px,6vw,32px);height:clamp(24px,6vw,32px);
  background:linear-gradient(135deg, var(--accent), #9dd9ff);
  border-radius:50%;margin-bottom:clamp(8px,2vw,12px);
  box-shadow:0 4px 12px rgba(124,231,255,0.3);
  transition:all .3s ease;
}

.dot-icon svg{
  width:clamp(12px,3vw,16px);height:clamp(12px,3vw,16px);
  color:#021018;stroke-width:2.5;
}

.file-icon{
  width:12px;height:12px;
  color:rgba(124,231,255,0.8);
  margin-right:6px;flex-shrink:0;
}

.deploy-icon{
  width:14px;height:14px;
  margin-right:clamp(4px,1vw,6px);
  flex-shrink:0;
}

.step:hover .dot-icon{
  transform:scale(1.1);
  box-shadow:0 6px 20px rgba(124,231,255,0.5);
}
.mockup{
  display:flex;justify-content:center;
  opacity:0;transform:translateY(32px);
  animation:mockupFadeIn 1s ease-out 2.5s forwards;
}

@keyframes mockupFadeIn{
  0%{opacity:0;transform:translateY(32px)}
  100%{opacity:1;transform:translateY(0)}
}

.screen{
  width:clamp(320px,80vw,420px);height:clamp(240px,60vw,320px);
  border-radius:16px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#06202a 0%, #021018 100%);
  box-shadow:0 16px 48px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.08);
  transition:transform .3s ease;
}

.screen:hover{transform:scale(1.02)}

.screen-header{
  padding:clamp(8px,2vw,12px);background:rgba(255,255,255,0.02);
  border-bottom:1px solid rgba(255,255,255,0.05);
  display:flex;align-items:center;gap:clamp(8px,2vw,12px);
}

.screen-dots{display:flex;gap:6px}
.screen-dots span{
  width:8px;height:8px;border-radius:50%;
  background:var(--muted);opacity:0.4;
}
.screen-dots span:first-child{background:#ff5f57}
.screen-dots span:nth-child(2){background:#ffbd2e}
.screen-dots span:last-child{background:#28ca42}

.screen-title{
  font-size:clamp(11px,2.5vw,13px);color:var(--muted);
  font-weight:500;flex:1;text-align:center;
  text-shadow:0 1px 2px rgba(0,0,0,0.4);
}

.screen-content{
  position:relative;height:calc(100% - clamp(32px,8vw,48px));
  padding:clamp(12px,3vw,16px);overflow:hidden;
}

/* Icon styling for clean SVG icons */
.inline-icon{
  width:16px;height:16px;
  vertical-align:middle;
  margin-right:8px;
  color:var(--accent);
  filter:drop-shadow(0 0 8px rgba(124,231,255,0.3));
}

.dot-icon{
  display:flex;align-items:center;justify-content:center;
  width:clamp(24px,6vw,32px);height:clamp(24px,6vw,32px);
  background:linear-gradient(135deg, var(--accent), #9dd9ff);
  border-radius:50%;margin-bottom:clamp(8px,2vw,12px);
  box-shadow:0 4px 12px rgba(124,231,255,0.3);
  transition:all .3s ease;
}

.dot-icon svg{
  width:clamp(12px,3vw,16px);height:clamp(12px,3vw,16px);
  color:#021018;stroke-width:2.5;
}

.step:hover .dot-icon{
  transform:scale(1.1);
  box-shadow:0 6px 20px rgba(124,231,255,0.5);
}

/* Enhanced mockup with clean progress animation */
.dev-progress{
  height:100%;display:flex;flex-direction:column;
  justify-content:space-between;opacity:0;
  animation:progressFadeIn 0.8s ease-out 3.5s forwards;
}

@keyframes progressFadeIn{
  0%{opacity:0;transform:translateY(20px)}
  100%{opacity:1;transform:translateY(0)}
}

/* Individual progress stages */
.progress-stage{
  display:flex;align-items:center;gap:clamp(8px,2vw,12px);
  padding:clamp(6px,1.5vw,8px) 0;opacity:0.3;
  transition:all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-radius:clamp(6px,1.5vw,8px);position:relative;
  background:rgba(255,255,255,0.01);
}

.progress-stage::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg, transparent, rgba(124,231,255,0.08), transparent);
  border-radius:inherit;transform:translateX(-100%);opacity:0;
  transition:all 0.8s ease;
}

.progress-stage.active{
  opacity:1;transform:translateX(4px) scale(1.02);
  background:rgba(124,231,255,0.05);
  border:1px solid rgba(124,231,255,0.15);
  box-shadow:0 4px 20px rgba(124,231,255,0.1);
}

.progress-stage.active::before{
  animation:stageShimmer 2.5s ease-in-out infinite;
}

.progress-stage.completed{
  opacity:0.8;background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.08);
}

@keyframes stageShimmer{
  0%{transform:translateX(-100%);opacity:0}
  30%{opacity:0.8}
  70%{opacity:0.8}
  100%{transform:translateX(100%);opacity:0}
}

.stage-indicator{
  width:clamp(20px,5vw,24px);height:clamp(20px,5vw,24px);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);
  transition:all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);flex-shrink:0;
  position:relative;overflow:hidden;
}

.stage-indicator::before{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle, rgba(124,231,255,0.3) 0%, transparent 70%);
  opacity:0;transition:opacity 0.4s ease;
}

.progress-stage.active .stage-indicator{
  background:linear-gradient(135deg, var(--accent), #9dd9ff);
  border-color:var(--accent);
  box-shadow:0 0 16px rgba(124,231,255,0.4), 0 0 32px rgba(124,231,255,0.2);
  animation:indicatorPulse 2s ease-in-out infinite;
  transform:scale(1.1);
}

.progress-stage.active .stage-indicator::before{
  opacity:1;animation:indicatorGlow 2s ease-in-out infinite;
}

.progress-stage.completed .stage-indicator{
  background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 12px rgba(124,231,255,0.3);
  transform:scale(1.05);
}

@keyframes indicatorPulse{
  0%,100%{
    box-shadow:0 0 16px rgba(124,231,255,0.4), 0 0 32px rgba(124,231,255,0.2);
    transform:scale(1.1);
  }
  50%{
    box-shadow:0 0 24px rgba(124,231,255,0.7), 0 0 48px rgba(124,231,255,0.3);
    transform:scale(1.15);
  }
}

@keyframes indicatorGlow{
  0%,100%{opacity:0.5}
  50%{opacity:1}
}

.stage-icon{
  width:clamp(10px,2.5vw,12px);height:clamp(10px,2.5vw,12px);
  stroke-width:2.5;color:rgba(255,255,255,0.8);
}

.progress-stage.active .stage-icon,
.progress-stage.completed .stage-icon{
  color:#021018;
}

.stage-label{
  font-size:clamp(14px,3.2vw,18px);color:rgba(255,255,255,0.6);
  font-weight:500;flex:1;
}

.progress-stage.active .stage-label{
  color:var(--accent);font-weight:600;
  text-shadow:0 0 8px rgba(124,231,255,0.3);
}

.progress-stage.completed .stage-label{
  color:rgba(255,255,255,0.8);
}

.stage-bar{
  width:clamp(60px,15vw,80px);height:4px;
  background:rgba(255,255,255,0.1);border-radius:2px;
  overflow:hidden;position:relative;
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.2);
}

.stage-bar::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg, transparent, rgba(124,231,255,0.2), transparent);
  transform:translateX(-100%);border-radius:2px;
}

.stage-fill{
  height:100%;width:0;
  background:linear-gradient(90deg, var(--accent), #9dd9ff, var(--accent));
  border-radius:2px;
  transition:width 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position:relative;overflow:hidden;
  box-shadow:0 0 8px rgba(124,231,255,0.3);
}

.stage-fill::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation:barShimmer 2s ease-in-out infinite;
}

.progress-stage.active .stage-fill{
  width:100%;
  box-shadow:0 0 12px rgba(124,231,255,0.5), 0 0 24px rgba(124,231,255,0.2);
}

.progress-stage.active .stage-bar::before{
  animation:barGlow 1.5s ease-in-out infinite;
}

.progress-stage.completed .stage-fill{
  width:100%;background:var(--accent);
  box-shadow:0 0 8px rgba(124,231,255,0.4);
}

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

@keyframes barGlow{
  0%,100%{transform:translateX(-100%);opacity:0}
  50%{transform:translateX(0);opacity:1}
}

/* Overall progress section */
.overall-progress{
  margin-top:clamp(12px,3vw,16px);padding-top:clamp(8px,2vw,12px);
  border-top:1px solid rgba(255,255,255,0.1);
}

.progress-text{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:clamp(6px,1.5vw,8px);
}

.current-stage{
  font-size:clamp(12px,2.8vw,16px);color:var(--accent);
  font-weight:600;text-shadow:0 0 8px rgba(124,231,255,0.3);
}

.progress-percent{
  font-size:clamp(12px,2.8vw,16px);color:rgba(255,255,255,0.8);
  font-weight:600;
}

.main-progress-bar{
  height:6px;background:rgba(255,255,255,0.1);
  border-radius:3px;overflow:hidden;position:relative;
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.2);
}

.main-progress-bar::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg, transparent, rgba(124,231,255,0.15), transparent);
  animation:mainBarBg 3s ease-in-out infinite;
}

.main-progress-fill{
  height:100%;width:0;
  background:linear-gradient(90deg, var(--accent), #9dd9ff, #c6fffa);
  border-radius:3px;transition:width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow:0 0 8px rgba(124,231,255,0.3), 0 0 16px rgba(124,231,255,0.1);
  position:relative;overflow:hidden;
}

.main-progress-fill::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation:mainFillShimmer 2.5s ease-in-out infinite;
}

@keyframes mainBarBg{
  0%,100%{transform:translateX(-100%);opacity:0}
  50%{transform:translateX(0);opacity:1}
}

@keyframes mainFillShimmer{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(200%)}
}

/* Completion state */
.completion-state{
  position:absolute;inset:clamp(12px,3vw,16px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;opacity:0;transform:scale(0.5) translateY(30px);
  transition:all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  pointer-events:none;background:rgba(0,0,0,0.1);
  border-radius:clamp(12px,3vw,16px);backdrop-filter:blur(8px);
}

.completion-state::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at center, rgba(124,231,255,0.1) 0%, transparent 70%);
  border-radius:inherit;opacity:0;
  animation:completionGlow 3s ease-in-out infinite;
}

.completion-state.active{
  opacity:1;transform:scale(1) translateY(0);pointer-events:auto;
}

.completion-state.active::before{
  opacity:1;
}

.completion-state .success-icon{
  width:clamp(32px,8vw,48px);height:clamp(32px,8vw,48px);
  color:var(--accent);margin-bottom:clamp(8px,2vw,12px);
  filter:drop-shadow(0 0 16px rgba(124,231,255,0.6));
  animation:successBounce 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
  position:relative;
}

.completion-state .success-icon::before{
  content:'';position:absolute;inset:-50%;
  background:radial-gradient(circle, rgba(124,231,255,0.3) 0%, transparent 50%);
  animation:iconHalo 2s ease-in-out infinite;
}

@keyframes successBounce{
  0%{transform:scale(0) rotate(-180deg);opacity:0}
  60%{transform:scale(1.3) rotate(10deg);opacity:1}
  80%{transform:scale(0.9) rotate(-5deg)}
  100%{transform:scale(1) rotate(0deg);opacity:1}
}

@keyframes completionGlow{
  0%,100%{opacity:0.3}
  50%{opacity:0.8}
}

@keyframes iconHalo{
  0%,100%{transform:scale(0.8);opacity:0}
  50%{transform:scale(1.2);opacity:1}
}

.success-message{
  font-size:clamp(18px,4.2vw,24px);font-weight:700;
  color:var(--accent);margin-bottom:clamp(4px,1vw,6px);
  text-shadow:0 0 16px rgba(124,231,255,0.4);
}

.site-url{
  font-size:clamp(14px,3.2vw,18px);color:rgba(255,255,255,0.8);
  background:rgba(255,255,255,0.05);padding:clamp(2px,0.5vw,4px) clamp(6px,1.5vw,8px);
  border-radius:clamp(8px,2vw,12px);font-family:monospace;
}

/* Stage-specific content animations with proper resets */
.stage-progress{
  width:100%;opacity:0;
  animation:contentFadeIn 0.5s ease-out 0.6s forwards;
}

.dev-stage:not(.active) .stage-progress{
  animation:none;opacity:0;
}

.dev-stage.active .stage-progress{
  animation:contentFadeIn 0.5s ease-out 0.6s forwards;
}

@keyframes contentFadeIn{
  0%{opacity:0;transform:translateY(10px)}
  100%{opacity:1;transform:translateY(0)}
}

.progress-dots{
  display:flex;justify-content:center;gap:6px;
}

.progress-dots .dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,0.2);
  transition:all .3s ease;
}

.progress-dots .dot.active{
  background:var(--accent);
  box-shadow:0 0 12px rgba(124,231,255,0.6);
  animation:dotPulse 1.5s ease-in-out infinite;
}

@keyframes dotPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.3)}
}

/* Discovery stage files with reset */
.stage-files{
  width:100%;max-width:200px;opacity:0;
  animation:contentFadeIn 0.5s ease-out 0.6s forwards;
}

.dev-stage:not(.active) .stage-files{
  animation:none;opacity:0;
}

.dev-stage.active .stage-files{
  animation:contentFadeIn 0.5s ease-out 0.6s forwards;
}

.file-item{
  background:rgba(255,255,255,0.05);
  padding:clamp(4px,1vw,6px) clamp(8px,2vw,12px);
  margin:clamp(2px,0.5vw,4px) 0;
  border-radius:clamp(4px,1vw,6px);
  font-size:clamp(10px,2.5vw,12px);
  color:rgba(255,255,255,0.8);
  opacity:0;display:flex;align-items:center;
  animation:fileSlideIn 0.4s ease-out forwards;
}

.file-item:nth-child(1){animation-delay:0.8s}
.file-item:nth-child(2){animation-delay:1.0s}
.file-item:nth-child(3){animation-delay:1.2s}

.dev-stage:not(.active) .file-item{
  animation:none;opacity:0;
}

.dev-stage.active .file-item:nth-child(1){animation:fileSlideIn 0.4s ease-out 0.8s forwards}
.dev-stage.active .file-item:nth-child(2){animation:fileSlideIn 0.4s ease-out 1.0s forwards}
.dev-stage.active .file-item:nth-child(3){animation:fileSlideIn 0.4s ease-out 1.2s forwards}

@keyframes fileSlideIn{
  0%{opacity:0;transform:translateX(-20px)}
  100%{opacity:1;transform:translateX(0)}
}

/* Planning board */
.planning-board{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(4px,1vw,6px);width:100%;max-width:240px;
  font-size:clamp(8px,2vw,10px);
}

.task-col{
  background:rgba(255,255,255,0.03);
  border-radius:clamp(3px,0.7vw,4px);
  padding:clamp(3px,0.7vw,4px);
}

.task-header{
  font-weight:600;color:var(--accent);
  margin-bottom:clamp(2px,0.5vw,3px);
  font-size:clamp(7px,1.7vw,9px);
  text-align:center;
}

.task-item{
  background:rgba(255,255,255,0.05);
  padding:clamp(2px,0.5vw,3px);
  margin:clamp(1px,0.2vw,2px) 0;
  border-radius:clamp(2px,0.5vw,3px);
  color:rgba(255,255,255,0.7);
  opacity:0;animation:taskSlideIn 0.3s ease-out forwards;
}

.task-col:nth-child(1) .task-item:nth-child(2){animation-delay:0.1s}
.task-col:nth-child(1) .task-item:nth-child(3){animation-delay:0.2s}
.task-col:nth-child(2) .task-item{animation-delay:0.3s}
.task-col:nth-child(3) .task-item{animation-delay:0.4s}

@keyframes taskSlideIn{
  0%{opacity:0;transform:translateY(-10px)}
  100%{opacity:1;transform:translateY(0)}
}

/* Code editor */
.code-editor{
  width:100%;max-width:280px;
  background:rgba(0,0,0,0.3);
  border-radius:clamp(4px,1vw,6px);
  overflow:hidden;
}

.editor-header{
  background:rgba(255,255,255,0.05);
  padding:clamp(2px,0.5vw,3px);
  display:flex;gap:clamp(2px,0.5vw,3px);
}

.file-tab{
  background:rgba(255,255,255,0.08);
  padding:clamp(1px,0.2vw,2px) clamp(4px,1vw,6px);
  border-radius:clamp(2px,0.5vw,3px) clamp(2px,0.5vw,3px) 0 0;
  font-size:clamp(7px,1.7vw,9px);
  color:rgba(255,255,255,0.6);
}

.file-tab.active{
  background:var(--accent);
  color:#021018;
}

.code-lines{
  padding:clamp(4px,1vw,6px);
}

.code-line{
  display:flex;gap:clamp(4px,1vw,6px);
  font-family:monospace;
  font-size:clamp(7px,1.7vw,9px);
  opacity:0;animation:codeTypeIn 0.5s ease-out forwards;
}

.code-line:nth-child(1){animation-delay:0.2s}
.code-line:nth-child(2){animation-delay:0.4s}
.code-line:nth-child(3){animation-delay:0.6s}

.line-num{
  color:rgba(255,255,255,0.3);
  width:clamp(8px,2vw,12px);
}

.code-text{
  color:rgba(124,231,255,0.8);
}

@keyframes codeTypeIn{
  0%{opacity:0;transform:translateX(-10px)}
  100%{opacity:1;transform:translateX(0)}
}

/* Deploy status */
.deploy-status{
  width:100%;max-width:200px;
}

.deploy-step{
  display:flex;align-items:center;gap:clamp(4px,1vw,6px);
  padding:clamp(2px,0.5vw,3px) 0;
  font-size:clamp(9px,2.2vw,11px);
  opacity:0;animation:deploySlideIn 0.4s ease-out forwards;
}

.deploy-step:nth-child(1){animation-delay:0.1s}
.deploy-step:nth-child(2){animation-delay:0.3s}
.deploy-step:nth-child(3){animation-delay:0.5s}

.deploy-step.completed .deploy-icon{
  color:#28a745;
}

.deploy-step.active .deploy-icon{
  color:var(--accent);
  animation:deploySpin 1s linear infinite;
}

@keyframes deploySlideIn{
  0%{opacity:0;transform:translateX(-15px)}
  100%{opacity:1;transform:translateX(0)}
}

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

/* Success state with enhanced transitions */
.success-state{
  position:absolute;inset:clamp(12px,3vw,16px);
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;
  opacity:0;transform:scale(0.5) translateY(30px);
  transition:all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index:1;pointer-events:none;visibility:hidden;
}

.success-state.active{
  opacity:1;transform:scale(1) translateY(0);
  z-index:3;pointer-events:auto;visibility:visible;
}

.success-icon{
  font-size:clamp(32px,8vw,48px);
  opacity:0;
  animation:successBurst 1s ease-out 0.3s forwards;
  filter:drop-shadow(0 0 16px rgba(124,231,255,0.6));
}

@keyframes successBurst{
  0%{opacity:0;transform:scale(0) rotate(-180deg)}
  30%{opacity:1;transform:scale(1.4) rotate(-90deg)}
  60%{opacity:1;transform:scale(0.9) rotate(10deg)}
  100%{opacity:1;transform:scale(1) rotate(0deg)}
}

.success-text{
  font-size:clamp(14px,3.5vw,18px);
  font-weight:700;color:var(--accent);
  margin:clamp(8px,2vw,12px) 0 clamp(4px,1vw,6px) 0;
  text-shadow:0 0 16px rgba(124,231,255,0.4);
  opacity:0;
  animation:textGlow 0.8s ease-out 0.6s forwards;
}

@keyframes textGlow{
  0%{opacity:0;transform:translateY(20px) scale(0.8)}
  60%{opacity:1;transform:translateY(-5px) scale(1.1)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

.success-url{
  font-size:clamp(10px,2.5vw,12px);
  color:rgba(255,255,255,0.8);
  background:rgba(255,255,255,0.05);
  padding:clamp(2px,0.5vw,4px) clamp(6px,1.5vw,8px);
  border-radius:clamp(8px,2vw,12px);
  font-family:monospace;
  opacity:0;
  animation:urlSlideIn 0.6s ease-out 0.9s forwards;
}

@keyframes urlSlideIn{
  0%{opacity:0;transform:translateY(15px)}
  100%{opacity:1;transform:translateY(0)}
}

/* Reset success state animations when not active */
.success-state:not(.active) .success-icon,
.success-state:not(.active) .success-text,
.success-state:not(.active) .success-url{
  animation:none;
  opacity:0;
}

/* Re-trigger success animations when active */
.success-state.active .success-icon{
  animation:successBurst 1s ease-out 0.3s forwards;
}

.success-state.active .success-text{
  animation:textGlow 0.8s ease-out 0.6s forwards;
}

.success-state.active .success-url{
  animation:urlSlideIn 0.6s ease-out 0.9s forwards;
}

/* Legacy elements for fallback */
.loader{
  position:absolute;left:0;top:0;right:0;height:100%;
  background:linear-gradient(90deg, 
    rgba(124,231,255,0.0), 
    rgba(124,231,255,0.2), 
    rgba(124,231,255,0.0)
  );
  transform:translateX(-100%);opacity:0;
}

.progress-bar{
  width:80%;height:4px;background:rgba(255,255,255,0.1);
  border-radius:2px;margin-top:clamp(12px,3vw,16px);
  opacity:0;overflow:hidden;position:absolute;
  bottom:clamp(20px,5vw,32px);left:50%;transform:translateX(-50%);
}

.progress-fill{
  height:100%;background:linear-gradient(90deg, var(--accent), #c6fffa);
  border-radius:2px;width:0;transition:width 2s ease-out;
}

.reveal{
  font-weight:700;color:var(--accent);
  font-size:clamp(16px,4vw,20px);opacity:0;
  transform:translateY(16px);text-align:center;
  text-shadow:0 0 16px rgba(124,231,255,0.4);
  position:absolute;bottom:clamp(32px,8vw,48px);
  left:50%;transform:translateX(-50%) translateY(16px);
}

/* Animation trigger when process section is in view */
.process-wrap.animate .dev-stage:nth-child(1){
  animation:stageSequence 1s ease-out 3.5s forwards;
}
.process-wrap.animate .dev-stage:nth-child(2){
  animation:stageSequence 1s ease-out 5s forwards;
}
.process-wrap.animate .dev-stage:nth-child(3){
  animation:stageSequence 1s ease-out 6.5s forwards;
}
.process-wrap.animate .dev-stage:nth-child(4){
  animation:stageSequence 1s ease-out 8s forwards;
}
.process-wrap.animate .dev-stage:nth-child(5){
  animation:stageSequence 1s ease-out 9.5s forwards;
}
.process-wrap.animate .success-state{
  animation:stageSequence 1s ease-out 11s forwards;
}

@keyframes stageSequence{
  0%{opacity:0;transform:scale(0.8) translateY(20px)}
  50%{opacity:1;transform:scale(1.05) translateY(-5px)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}

.process-wrap.animate .screen .loader{
  animation:screenLoad 2s ease-out 3s forwards;
}

.process-wrap.animate .progress-bar{
  animation:progressShow 0.5s ease-out 3.2s forwards;
}

.process-wrap.animate .progress-fill{
  animation:progressFill 1.5s ease-out 3.7s forwards;
}

.process-wrap.animate .reveal{
  animation:revealText 0.8s ease-out 11.5s forwards;
}

@keyframes screenLoad{
  0%{opacity:1;transform:translateX(-100%)}
  70%{opacity:1;transform:translateX(100%)}
  100%{opacity:0;transform:translateX(100%)}
}

@keyframes progressShow{
  0%{opacity:0;transform:scale(0.8)}
  100%{opacity:1;transform:scale(1)}
}

@keyframes progressFill{
  0%{width:0}
  100%{width:100%}
}

@keyframes revealText{
  0%{opacity:0;transform:translateX(-50%) translateY(16px) scale(0.9)}
  60%{opacity:1;transform:translateX(-50%) translateY(-4px) scale(1.05)}
  100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}

@media (min-width:768px){
  .process-grid{grid-template-columns:1fr 1fr;gap:clamp(32px,8vw,64px)}
  .steps::before{left:clamp(22px,5vw,28px)}
  
  .screen{
    width:clamp(380px,60vw,480px);
    height:clamp(280px,45vw,360px);
  }
  
  .planning-board{
    max-width:300px;
    font-size:clamp(9px,2vw,11px);
  }
  
  .code-editor{
    max-width:320px;
  }
}

/* FAQ */
.faq{margin:40px auto}
.faq .q{border-top:1px solid rgba(255,255,255,0.03);padding:14px 0;cursor:pointer}
.faq .a{max-height:0;overflow:hidden;transition:max-height .36s ease;color:var(--muted)}
.faq .q.open + .a{max-height:240px;padding-top:8px}

@media (max-width:900px){
  .process.card{grid-template-columns:1fr}
}

/* Projects carousel - enhanced with magnetic effects */
.projects-wrap{
  margin:clamp(48px,10vw,80px) auto;text-align:center;
  position:relative;
}
.projects-wrap::before{
  content:'';position:absolute;inset:-20px;
  background:radial-gradient(circle at 50% 50%, rgba(124,231,255,0.05) 0%, transparent 70%);
  border-radius:24px;opacity:0;transition:opacity 1s ease;pointer-events:none;
}
.projects-wrap:hover::before{opacity:1}

.projects.card{
  padding:clamp(32px,8vw,48px);text-align:center;position:relative;
  background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(124,231,255,0.01));
  overflow:visible;
}
.projects h2{
  margin:0 0 clamp(8px,2vw,12px) 0;font-size:clamp(24px, 5vw, 36px);
  background:linear-gradient(135deg, var(--text), var(--accent));
  background-clip:text;-webkit-background-clip:text;color:transparent;
  animation:titleGlow 3s ease-in-out infinite alternate;
}
.projects .muted{margin:0 0 clamp(32px,6vw,48px) 0;font-size:clamp(14px,3.5vw,18px)}

.carousel{
  position:relative;overflow:hidden;border-radius:20px;
  background:linear-gradient(135deg, rgba(255,255,255,0.02), rgba(124,231,255,0.01));
  border:1px solid rgba(255,255,255,0.06);padding:clamp(20px,5vw,32px);
  box-shadow:0 8px 32px rgba(0,0,0,0.1);
  transition:box-shadow .6s ease;
}
.carousel:hover{
  box-shadow:0 16px 48px rgba(124,231,255,0.1), 0 0 32px rgba(124,231,255,0.05);
}

.track{display:flex;transition:transform .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);will-change:transform}
.project-slide{
  min-width:100%;display:flex;flex-direction:column;align-items:center;
  gap:clamp(20px,5vw,32px);padding:clamp(16px,4vw,24px);
}

/* Enhanced device mockups with auras */
.device-mockup{
  position:relative;margin:0 auto;
  filter:drop-shadow(0 12px 40px rgba(0,0,0,0.2));
  transition:transform .4s ease, filter .4s ease;
}
.device-mockup:hover{
  transform:translateY(-8px) scale(1.02);
  filter:drop-shadow(0 20px 60px rgba(124,231,255,0.15)) drop-shadow(0 0 32px rgba(124,231,255,0.1));
}

.device-mockup::before{
  content:'';position:absolute;inset:-8px;
  background:linear-gradient(45deg, transparent, var(--accent), transparent);
  border-radius:inherit;opacity:0;transition:opacity .4s ease;z-index:-1;filter:blur(8px);
}
.device-mockup:hover::before{opacity:0.3}

.device-mockup.phone{
  width:clamp(140px,35vw,180px);height:clamp(280px,70vw,360px);
  border-radius:28px;background:linear-gradient(145deg, #2a2a2a, #1a1a1a);
  padding:10px;border:1px solid rgba(255,255,255,0.1);
}
.device-mockup.tablet{
  width:clamp(200px,50vw,280px);height:clamp(270px,67vw,360px);
  border-radius:24px;background:linear-gradient(145deg, #2a2a2a, #1a1a1a);
  padding:14px;border:1px solid rgba(255,255,255,0.1);
}

/* --- Final Mobile Fit Overrides (highest priority) --- */
@media (max-width: 968px) {
  .hero-mockups { height: clamp(360px, 66vw, 500px) !important; }

  .hero-mockups .device-mockup { box-sizing: border-box; }

  .hero-mockups .device-mockup.laptop {
    width: clamp(250px, 75%, 360px) !important;
    aspect-ratio: 16 / 10;
    height: auto !important;
    left: 50% !important;
    top: 52% !important;
    transform: translate(-50%, -50%) perspective(400px) rotateY(-4deg) rotateX(1deg) !important;
    z-index: 2 !important;
  }

  .hero-mockups .device-mockup.phone {
    /* Slightly less tall than 9/16 to match common device mockups */
    width: clamp(98px, 29%, 150px) !important;
    aspect-ratio: 9 / 15.6; /* natural-looking phone */
    height: auto !important;
    right: 6% !important;
    top: 52% !important;
    transform: translate(0, -50%) perspective(300px) rotateY(6deg) rotateX(-1deg) !important;
    z-index: 3 !important;
    /* Cancel generic phone block padding/border/background that inflate height */
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
  }

  .hero-mockups .device-mockup.phone .device-frame {
    padding: clamp(3px, 0.8vw, 6px) !important;
    border-radius: clamp(10px, 3vw, 18px) !important;
  }

  .hero-mockups .device-mockup.phone .device-screen {
    border-radius: clamp(8px, 2.2vw, 16px) !important;
  }

  .hero-mockups .mockup-content {
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
}
.device-mockup.desktop{
  width:clamp(280px,70vw,380px);height:clamp(180px,45vw,240px);
  border-radius:16px;background:linear-gradient(145deg, #2a2a2a, #1a1a1a);
  padding:6px;border:1px solid rgba(255,255,255,0.1);
}

.screen-content{
  width:100%;height:100%;border-radius:inherit;
  background:linear-gradient(180deg,#f8f9fa 0%,#e9ecef 100%);
  overflow:hidden;position:relative;border:1px solid rgba(0,0,0,0.1);
}

/* Enhanced mock content with subtle animations */
.mock-site{padding:clamp(8px,2vw,16px);height:100%;animation:contentShimmer 4s ease-in-out infinite}
.mock-header{height:clamp(12px,3vw,20px);background:linear-gradient(90deg,#495057,#6c757d);border-radius:4px;margin-bottom:clamp(6px,1.5vw,10px);opacity:0.9}
.mock-hero{height:clamp(24px,6vw,40px);background:linear-gradient(90deg,#007bff,#0056b3);border-radius:6px;margin-bottom:clamp(8px,2vw,16px);opacity:0.95}
.mock-text{height:clamp(4px,1vw,8px);background:#ced4da;border-radius:2px;margin-bottom:clamp(3px,0.75vw,6px);opacity:0.8}
.mock-nav{height:clamp(8px,2vw,14px);background:#495057;margin-bottom:clamp(6px,1.5vw,10px);border-radius:2px;opacity:0.9}
.mock-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(4px,1vw,8px);height:60%}
.mock-grid::before,.mock-grid::after{content:'';background:#dee2e6;border-radius:4px;opacity:0.85}
.mock-columns{display:grid;grid-template-columns:2fr 1fr;gap:clamp(6px,1.5vw,12px);height:70%}
.mock-columns::before,.mock-columns::after{content:'';background:#dee2e6;border-radius:4px;opacity:0.85}

/* Enhanced project info */
.project-info{text-align:center;max-width:320px}
.project-info h3{
  margin:0 0 clamp(8px,2vw,12px) 0;font-size:clamp(16px, 4vw, 22px);font-weight:700;
  transition:color .3s ease;
}
.project-slide:hover .project-info h3{color:var(--accent)}
.project-info p{margin:0;color:var(--muted);font-size:clamp(13px, 3vw, 16px);line-height:1.5}

/* Enhanced carousel navigation */
.carousel-nav{display:flex;justify-content:center;gap:clamp(12px,3vw,20px);margin-top:clamp(24px,6vw,40px)}
.nav-dot{
  width:clamp(14px,3.5vw,18px);height:clamp(14px,3.5vw,18px);border-radius:50%;
  background:rgba(255,255,255,0.25);border:none;cursor:pointer;
  transition:all .4s cubic-bezier(0.25, 0.46, 0.45, 0.94);position:relative;
  min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;
}
.nav-dot::before{
  content:'';width:clamp(14px,3.5vw,18px);height:clamp(14px,3.5vw,18px);
  border-radius:50%;background:rgba(255,255,255,0.25);
  transition:all .4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nav-dot::after{
  content:'';position:absolute;inset:-8px;border-radius:50%;
  background:radial-gradient(circle, rgba(124,231,255,0.2) 0%, transparent 70%);
  opacity:0;transition:opacity .3s ease;
}
.nav-dot.active::before{
  background:var(--accent);transform:scale(1.3);
  box-shadow:0 0 16px rgba(124,231,255,0.4), 0 0 32px rgba(124,231,255,0.2);
}
.nav-dot.active::after{opacity:1}
.nav-dot:hover:not(.active)::before{background:rgba(255,255,255,0.5);transform:scale(1.15)}
.nav-dot:focus{outline:3px solid rgba(124,231,255,0.5);outline-offset:2px}

/* Enhanced pricing section with proper badge positioning */
.pricing-wrap{
  margin:clamp(64px,12vw,120px) auto;text-align:center;
  position:relative;
  padding-top:clamp(80px,15vw,100px);
  overflow:visible;
}
.pricing-wrap::before{
  content:'';position:absolute;inset:-40px;
  background:radial-gradient(ellipse at center, rgba(124,231,255,0.04) 0%, transparent 70%);
  border-radius:32px;opacity:0.7;transition:opacity 1.5s ease;pointer-events:none;
}
.pricing-wrap:hover::before{opacity:1}

.pricing.card{
  padding:clamp(32px,8vw,56px);text-align:center;position:relative;
  background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(124,231,255,0.02));
  border:1px solid rgba(124,231,255,0.1);
  overflow:visible !important;border-radius:24px;
  backdrop-filter:blur(8px);z-index:1;
}
.pricing.card::before{
  content:'';position:absolute;inset:-2px;
  background:linear-gradient(45deg, var(--accent), rgba(255,121,198,0.2), var(--accent));
  border-radius:26px;opacity:0;transition:opacity .8s ease;z-index:-1;filter:blur(6px);
}
.pricing.card:hover::before{opacity:0.04}

.pricing h2{
  margin:0 0 clamp(12px,3vw,20px) 0;font-size:clamp(28px,6vw,42px);
  background:linear-gradient(135deg, var(--text), var(--accent), #c6fffa);
  background-clip:text;-webkit-background-clip:text;color:transparent;
  animation:titleGlow 3s ease-in-out infinite alternate;position:relative;
  text-align:center;white-space:nowrap;
}
.pricing h2::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(124,231,255,0.2) 0%, transparent 50%);
  filter:blur(20px);opacity:0;transition:opacity .6s ease;z-index:-1;
}
.pricing:hover h2::after{opacity:1}

.pricing .muted{
  margin:0 0 clamp(32px,8vw,56px) 0;font-size:clamp(15px,3.8vw,20px);
  line-height:1.5;max-width:700px;margin-left:auto;margin-right:auto;
}

.price-grid{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:clamp(20px,5vw,32px);margin-bottom:clamp(32px,8vw,56px);
  justify-items:center;max-width:1200px;margin-left:auto;margin-right:auto;
  overflow:visible;padding-top:clamp(48px,10vw,64px);z-index:10;position:relative;
}

.price-card{
  background:linear-gradient(135deg, var(--glass-2), var(--glass));
  border:1px solid var(--glass-border);
  border-radius:20px;
  padding:clamp(64px,14vw,80px) clamp(24px,6vw,36px) clamp(28px,7vw,40px);
  position:relative;
  transition:all .5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  text-align:center;width:100%;max-width:380px;cursor:pointer;
  overflow:visible !important;margin-top:clamp(48px,10vw,56px);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  z-index:50;
  box-shadow:0 8px 32px rgba(0,0,0,0.3), 
             inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Enhanced glass reflection effect for price cards */
.price-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:35%;
  background:linear-gradient(180deg, rgba(255,255,255,0.06), transparent);
  opacity:0.8;
  pointer-events:none;
  border-radius:20px 20px 0 0;
}

/* Glass edge highlights for price cards */
.price-card::after{
  content:'';
  position:absolute;
  inset:1px;
  border-radius:inherit;
  background:linear-gradient(135deg, 
    transparent, 
    rgba(124,231,255,0.02), 
    transparent, 
    rgba(255,255,255,0.01)
  );
  pointer-events:none;
  opacity:0.8;
}

/* Modular data-tier styling for easy customization */
.price-card[data-tier="starter"] {
  border-color:rgba(74,222,128,0.2);
}
.price-card[data-tier="starter"]:hover {
  border-color:rgba(74,222,128,0.6);
  background:linear-gradient(135deg, var(--glass-3), var(--glass-2));
  box-shadow:0 24px 64px rgba(74,222,128,0.2), 
             0 0 48px rgba(74,222,128,0.15),
             inset 0 1px 0 rgba(255,255,255,0.12);
  transform:translateY(-4px);
}

.price-card[data-tier="standard"] {
  border-color:var(--accent);
  background:linear-gradient(135deg, var(--glass-3), var(--glass-2));
}

.price-card[data-tier="standard"]:hover {
  border-color:var(--accent);
  background:linear-gradient(135deg, var(--glass-4), var(--glass-3));
  box-shadow:0 24px 64px rgba(124,231,255,0.3), 
             0 0 48px rgba(124,231,255,0.2),
             inset 0 1px 0 rgba(255,255,255,0.15);
  transform:translateY(-4px);
}

.price-card[data-tier="custom"] {
  border-color:rgba(245,158,11,0.2);
}
.price-card[data-tier="custom"]:hover {
  border-color:rgba(245,158,11,0.6);
  background:linear-gradient(135deg, var(--glass-3), var(--glass-2));
  box-shadow:0 24px 64px rgba(245,158,11,0.2), 
             0 0 48px rgba(245,158,11,0.15),
             inset 0 1px 0 rgba(255,255,255,0.12);
  transform:translateY(-4px);
}

.price-card[data-tier="premium"] {
  border-color:rgba(139,92,246,0.2);
}
.price-card[data-tier="premium"]:hover {
  border-color:rgba(139,92,246,0.6);
  background:linear-gradient(135deg, var(--glass-3), var(--glass-2));
  box-shadow:0 24px 64px rgba(139,92,246,0.2), 
             0 0 48px rgba(139,92,246,0.15),
             inset 0 1px 0 rgba(255,255,255,0.12);
  transform:translateY(-4px);
}

.price-card::before{
  content:'';position:absolute;inset:-1px;
  background:linear-gradient(135deg, transparent, var(--accent), transparent);
  border-radius:20px;opacity:0;transition:all .5s ease;z-index:-1;filter:blur(6px);
}
.price-card::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(124,231,255,0.1) 0%, transparent 40%);
  border-radius:20px;opacity:0;transition:opacity .3s ease;pointer-events:none;
}

/* Fix specific hover styles to prevent unwanted background colors */
.price-card[data-tier="starter"]:hover::before,
.price-card[data-tier="starter"]:hover::after {
  background:linear-gradient(135deg, transparent, rgba(74,222,128,0.3), transparent);
}

.price-card:hover{
  transform:translateY(-8px) scale(1.015);
  border-color:rgba(124,231,255,0.25);
  box-shadow:0 16px 48px rgba(124,231,255,0.12), 0 0 32px rgba(124,231,255,0.08);
}
.price-card:hover::before{opacity:0.25}
.price-card:hover::after{opacity:0.6}

.price-card.featured{
  border-color:var(--accent);
  background:linear-gradient(135deg, rgba(124,231,255,0.1), rgba(124,231,255,0.03));
  box-shadow:0 12px 40px rgba(124,231,255,0.15);
  animation:featuredPulse 6s ease-in-out infinite;
  transform:scale(1.05);
  margin-top:0;
}
@keyframes featuredPulse{
  0%,100%{
    box-shadow:0 12px 40px rgba(124,231,255,0.15), 0 0 32px rgba(124,231,255,0.1);
    border-color:var(--accent);
  }
  50%{
    box-shadow:0 16px 48px rgba(124,231,255,0.25), 0 0 40px rgba(124,231,255,0.2);
    border-color:rgba(124,231,255,0.8);
  }
}

.featured-badge, .price-tag{
  position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  padding:clamp(10px,2.5vw,14px) clamp(18px,4.5vw,26px);
  border-radius:50px;font-size:clamp(12px,3vw,14px);font-weight:700;
  white-space:nowrap;z-index:9999 !important;
  animation:tagGlow 3s ease-in-out infinite alternate;
  backdrop-filter:blur(8px);
  box-shadow:0 4px 16px rgba(0,0,0,0.2);
  overflow: visible !important;
  pointer-events: none;
}

/* Modular tag system - easy to customize */
.price-tag.starter-tag {
  background:linear-gradient(135deg, #4ade80, #22c55e);
  color:#064e3b;
  box-shadow:0 6px 24px rgba(74,222,128,0.4);
}

.price-tag.best-value-tag {
  background:linear-gradient(135deg, var(--accent), #c6fffa);
  color:#021018;
  box-shadow:0 6px 24px rgba(124,231,255,0.4);
}

.price-tag.flexible-tag {
  background:linear-gradient(135deg, #f59e0b, #fbbf24);
  color:#451a03;
  box-shadow:0 6px 24px rgba(245,158,11,0.4);
}

.price-tag.premium-tag {
  background:linear-gradient(135deg, #8b5cf6, #a855f7);
  color:#1e1b4b;
  box-shadow:0 6px 24px rgba(139,92,246,0.4);
}

.price-tag.discount-tag {
  background:linear-gradient(135deg, #ef4444, #f87171);
  color:#450a0a;
  box-shadow:0 6px 24px rgba(239,68,68,0.4);
}

@keyframes tagGlow{
  0%{
    transform:translateX(-50%) scale(1);
  }
  100%{
    box-shadow:0 8px 32px rgba(124,231,255,0.6), 0 0 24px rgba(124,231,255,0.4);
    transform:translateX(-50%) scale(1.05);
  }
}

/* Legacy support for old featured badge */

.price-header{
  text-align:center;
  padding:clamp(16px,4vw,24px) clamp(16px,4vw,24px) 0 clamp(16px,4vw,24px);
}

.price-header h3{
  margin:0 0 clamp(12px,3vw,16px) 0;font-size:clamp(20px,5vw,28px);font-weight:700;
  transition:all .3s ease;position:relative;text-align:center;
}
.price-card:hover .price-header h3{
  color:var(--accent);
  text-shadow:0 0 16px rgba(124,231,255,0.4);
}

.price{
  font-size:clamp(32px,8vw,48px);font-weight:800;color:var(--accent);
  margin:clamp(12px,3vw,16px) auto;
  text-shadow:0 0 32px rgba(124,231,255,0.3);
  transition:all .3s ease;position:relative;line-height:1;
  text-align:center;display:block;width:100%;
}
.price-card:hover .price{
  text-shadow:0 0 40px rgba(124,231,255,0.5);
  transform:scale(1.05);
}

.price-unit{
  font-size:clamp(18px,4.5vw,24px);color:var(--muted);font-weight:500;
  vertical-align:middle;
}
.price-desc{
  margin:0 0 clamp(20px,5vw,28px) 0;color:var(--muted);
  font-size:clamp(14px,3.5vw,18px);text-align:center;
}

.price-features{margin:0;padding:0;text-align:center}
.price-features p{
  margin:0;font-size:clamp(14px,3.5vw,17px);line-height:1.6;color:var(--muted);
  transition:color .3s ease;text-align:center;
}
.price-card:hover .price-features p{color:rgba(255,255,255,0.8)}

.pricing-note{
  background:linear-gradient(135deg, rgba(255,255,255,0.025), rgba(124,231,255,0.02));
  border:1px solid rgba(124,231,255,0.15);
  border-radius:16px;padding:clamp(16px,3vw,20px) clamp(20px,4vw,28px);
  margin-top:clamp(28px,5vw,40px);
  position:relative;overflow:hidden;max-width:600px;margin-left:auto;margin-right:auto;
  backdrop-filter:blur(8px);
  box-shadow:0 4px 16px rgba(124,231,255,0.08), inset 0 1px 0 rgba(255,255,255,0.05);
}
.pricing-note::before{
  content:'';position:absolute;inset:-1px;
  background:linear-gradient(135deg, transparent, rgba(124,231,255,0.3), transparent);
  border-radius:16px;opacity:0;animation:noteGlow 4s ease-in-out infinite alternate;z-index:-1;
  filter:blur(1px);
}
@keyframes noteGlow{
  0%{opacity:0;transform:scale(0.98)}
  100%{opacity:0.4;transform:scale(1.02)}
}
.pricing-note p{
  margin:0;font-size:clamp(13px,3vw,15px);position:relative;z-index:1;
  font-weight:500;color:rgba(255,255,255,0.8);line-height:1.4;text-align:center;
}

.pricing-note .inline-icon{
  width:16px;height:16px;vertical-align:middle;margin-right:8px;
  stroke:var(--accent);opacity:0.8;
}

/* Expandable Additional Services Section */
.additional-services{
  margin-top:clamp(24px,5vw,32px);
  border-top:1px solid rgba(255,255,255,0.1);
  padding-top:clamp(16px,3vw,24px);
}

.services-header{
  display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;margin-bottom:clamp(8px,2vw,12px);
  padding:clamp(8px,2vw,12px) clamp(14px,3vw,18px);
  border-radius:clamp(8px,2vw,12px);
  background:linear-gradient(135deg, rgba(255,255,255,0.02), rgba(124,231,255,0.01));
  border:1px solid rgba(255,255,255,0.06);
  backdrop-filter:blur(8px);
  box-shadow:0 2px 8px rgba(124,231,255,0.03);
  transition:all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position:relative;overflow:hidden;
}

.expand-btn{
  background:transparent;border:none;cursor:pointer;
  padding:clamp(4px,1vw,6px);border-radius:6px;
  transition:all 0.3s ease;
  display:flex;align-items:center;justify-content:center;
  min-width:clamp(24px,5vw,28px);min-height:clamp(24px,5vw,28px);
}

.expand-btn:hover{
  background:rgba(124,231,255,0.1);
}

.services-header::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(124,231,255,0.04) 0%, transparent 40%);
  opacity:0;transition:opacity .3s ease;pointer-events:none;
}

.services-header:hover{
  background:linear-gradient(135deg, rgba(255,255,255,0.04), rgba(124,231,255,0.02));
  border-color:rgba(124,231,255,0.15);
  transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(124,231,255,0.06);
}

.services-header:hover::before{
  opacity:1;
}

.services-header h3{
  margin:0;font-size:clamp(14px,3vw,16px);font-weight:600;
  color:#e9eef6;
  transition:all 0.3s ease;
}

.services-header:hover h3{
  color:#ffffff;
}

.services-subtitle{
  margin:0;font-size:clamp(12px,2.5vw,14px);
  color:var(--muted);opacity:0.7;
  transition:opacity 0.3s ease;
}

.services-header:hover .services-subtitle{
  opacity:0.9;
  color:rgba(255,255,255,0.8);
}

.expand-icon{
  width:clamp(12px,2.5vw,14px);height:clamp(12px,2.5vw,14px);
  stroke:var(--accent);stroke-width:2;
  transition:all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.services-header:hover .expand-icon{
  stroke:#ffffff;
  transform:scale(1.05);
}

.services-header.expanded .expand-icon{
  transform:rotate(180deg);
}

.services-grid{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:clamp(16px,4vw,20px);opacity:0;max-height:0;overflow:hidden;
  transition:all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.services-grid.expanded{
  opacity:1;max-height:1000px;
  margin-bottom:clamp(20px,4vw,24px);
}

.service-card{
  background:linear-gradient(135deg, rgba(255,255,255,0.02), rgba(124,231,255,0.008));
  border:1px solid rgba(255,255,255,0.06);border-radius:16px;
  padding:clamp(20px,5vw,24px);text-align:center;cursor:pointer;
  transition:all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position:relative;overflow:hidden;
}

.service-card::before{
  content:'';position:absolute;inset:-1px;
  background:linear-gradient(135deg, transparent, rgba(124,231,255,0.2), transparent);
  border-radius:16px;opacity:0;transition:opacity 0.3s ease;z-index:-1;
}

.service-card:hover{
  transform:translateY(-4px);
  border-color:rgba(124,231,255,0.3);
  box-shadow:0 12px 32px rgba(124,231,255,0.1);
}

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

.service-icon{
  width:clamp(40px,8vw,48px);height:clamp(40px,8vw,48px);margin:0 auto clamp(12px,3vw,16px);
  background:linear-gradient(135deg, var(--accent), rgba(124,231,255,0.7));
  border-radius:12px;display:flex;align-items:center;justify-content:center;
}

.service-icon svg{
  width:clamp(20px,4vw,24px);height:clamp(20px,4vw,24px);stroke:#021018;stroke-width:2.5;
}

.service-card h4{
  margin:0 0 clamp(12px,3vw,16px) 0;font-size:clamp(16px,3.5vw,18px);
  font-weight:600;color:#e9eef6;
}

.service-desc{
  margin:0;font-size:clamp(13px,3vw,14px);color:var(--muted);
  line-height:1.4;
}

/* Hosting Disclaimer Section - Enhanced with Professional Tooltip */
.hosting-disclaimer{
  padding:clamp(32px,6vw,48px) 0;
  background:linear-gradient(135deg, rgba(239,68,68,0.04), rgba(220,38,38,0.02));
  border-top:1px solid rgba(239,68,68,0.15);
  border-bottom:1px solid rgba(239,68,68,0.15);
  position:relative;
}

.hosting-disclaimer::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 30% 40%, rgba(239,68,68,0.06) 0%, transparent 50%),
             radial-gradient(circle at 80% 80%, rgba(220,38,38,0.04) 0%, transparent 50%);
  pointer-events:none;
}

.disclaimer-card{
  background:linear-gradient(135deg, rgba(255,255,255,0.02), rgba(239,68,68,0.015));
  border:1px solid rgba(239,68,68,0.2);
  border-radius:clamp(16px,4vw,20px);
  padding:clamp(24px,5vw,32px);
  position:relative;
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
  box-shadow:0 6px 24px rgba(239,68,68,0.1), 
             inset 0 1px 0 rgba(255,255,255,0.05);
  display:flex;align-items:flex-start;gap:clamp(20px,4vw,28px);
  max-width:900px;margin:0 auto;
  transition:all 0.3s ease;
}

/* Glass reflection effect with red tint */
.disclaimer-card::before{
  content:'';position:absolute;
  top:0;left:0;right:0;height:40%;
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(239,68,68,0.01));
  pointer-events:none;opacity:0.8;
  border-radius:inherit;
}

.disclaimer-card:hover{
  border-color:rgba(239,68,68,0.3);
  box-shadow:0 8px 32px rgba(239,68,68,0.15),
             0 0 0 1px rgba(239,68,68,0.1),
             inset 0 1px 0 rgba(255,255,255,0.08);
  transform:translateY(-1px);
}

.disclaimer-icon{
  width:clamp(40px,8vw,48px);height:clamp(40px,8vw,48px);
  background:linear-gradient(135deg, #ef4444, #dc2626);
  border-radius:clamp(12px,3vw,16px);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  box-shadow:0 4px 16px rgba(239,68,68,0.25);
  animation:disclaimerGlow 4s ease-in-out infinite;
}

.disclaimer-icon svg{
  width:clamp(20px,4vw,24px);height:clamp(20px,4vw,24px);
  stroke:#fff;stroke-width:2.5;
}

@keyframes disclaimerGlow{
  0%,100%{
    box-shadow:0 4px 16px rgba(239,68,68,0.25);
    transform:scale(1);
  }
  50%{
    box-shadow:0 6px 24px rgba(239,68,68,0.4), 
               0 0 16px rgba(239,68,68,0.2);
    transform:scale(1.02);
  }
}

.disclaimer-content{
  flex:1;
}

.disclaimer-content h3{
  margin:0 0 clamp(16px,3vw,20px) 0;
  font-size:clamp(18px,4vw,22px);font-weight:700;
  color:#fff;
  text-shadow:0 1px 4px rgba(239,68,68,0.2);
}

.disclaimer-content p{
  margin:0 0 clamp(16px,3vw,20px) 0;
  font-size:clamp(14px,3.5vw,16px);line-height:1.6;
  color:rgba(255,255,255,0.85);
}

.disclaimer-content strong{
  color:#fca5a5;font-weight:600;
}

/* Professional Tooltip */
.tooltip-container{
  position:relative;
  display:inline-block;
  z-index:15000;
}

.tooltip-trigger{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:clamp(8px,2vw,12px) clamp(12px,3vw,16px);
  background:linear-gradient(135deg, rgba(255,255,255,0.08), rgba(239,68,68,0.03));
  border:1px solid rgba(239,68,68,0.2);
  border-radius:clamp(8px,2vw,12px);
  color:#fbbf24;
  font-size:clamp(13px,3vw,15px);
  font-weight:600;
  cursor:pointer;
  transition:all 0.3s ease;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  text-shadow:0 1px 2px rgba(0,0,0,0.3);
}

.tooltip-trigger:hover{
  background:linear-gradient(135deg, rgba(255,255,255,0.12), rgba(239,68,68,0.05));
  border-color:rgba(239,68,68,0.3);
  transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(239,68,68,0.15);
  color:#fff;
}

.help-icon{
  width:16px;height:16px;
  stroke:currentColor;stroke-width:2.5;
  flex-shrink:0;
}

.tooltip-content{
  position:absolute;
  bottom:100%;left:50%;
  transform:translateX(-50%) translateY(-8px);
  background:linear-gradient(135deg, 
    rgba(7,6,10,0.98), 
    rgba(11,11,15,0.96)
  );
  border:1px solid rgba(239,68,68,0.2);
  border-radius:clamp(12px,3vw,16px);
  padding:clamp(18px,4vw,24px);
  width:clamp(300px,65vw,450px);
  box-shadow:0 16px 48px rgba(0,0,0,0.6),
             0 4px 16px rgba(239,68,68,0.15),
             0 0 0 1px rgba(255,255,255,0.05),
             inset 0 1px 0 rgba(255,255,255,0.1);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  opacity:0;visibility:hidden;
  transition:all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index:10000;
}

.tooltip-container:hover .tooltip-content{
  opacity:1;visibility:visible;
  transform:translateX(-50%) translateY(-12px);
}

.tooltip-arrow{
  position:absolute;
  top:100%;left:50%;
  transform:translateX(-50%);
  width:0;height:0;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-top:10px solid rgba(239,68,68,0.2);
}

.tooltip-content h4{
  margin:0 0 clamp(14px,3vw,18px) 0;
  font-size:clamp(16px,3.5vw,18px);
  font-weight:700;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,0.4);
}

.tooltip-content ul{
  margin:0 0 clamp(16px,3vw,20px) 0;
  padding:0;list-style:none;
}

.tooltip-content li{
  padding:clamp(5px,1.2vw,7px) 0;
  font-size:clamp(14px,3.2vw,15px);
  color:rgba(255,255,255,0.9);
  line-height:1.6;
  display:flex;align-items:flex-start;gap:10px;
  font-weight:400;
}

.tooltip-content li::before{
  content:'✓';
  color:#4ade80;
  font-weight:900;
  flex-shrink:0;
  margin-top:2px;
  font-size:clamp(12px,2.8vw,14px);
}

.tooltip-content strong{
  color:#fff;
  font-weight:600;
}

.tooltip-analogy{
  padding:clamp(14px,3vw,18px);
  background:linear-gradient(135deg, 
    rgba(239,68,68,0.08), 
    rgba(220,38,38,0.04)
  );
  border:1px solid rgba(239,68,68,0.15);
  border-radius:clamp(8px,2vw,12px);
  font-size:clamp(13px,2.8vw,15px);
  color:rgba(255,255,255,0.85);
  line-height:1.6;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  font-style:italic;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .disclaimer-card{
    flex-direction:column;
    text-align:center;
    gap:clamp(20px,5vw,24px);
  }
  
  .tooltip-content{
    position:fixed;
    bottom:auto;top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:calc(100vw - 40px);
    max-width:360px;
  }
  
  .tooltip-container:hover .tooltip-content{
    transform:translate(-50%, -50%);
  }
  
  .tooltip-arrow{
    display:none;
  }
}

/* Price card CTA */
.price-cta{
  margin-top:clamp(20px,4vw,24px);padding-top:clamp(16px,3vw,20px);
  border-top:1px solid rgba(255,255,255,0.1);
}

.cta-text{
  color:var(--accent);font-weight:600;font-size:clamp(13px,3vw,15px);
  opacity:0;transform:translateY(8px);
  transition:all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.price-card:hover .cta-text{
  opacity:1;transform:translateY(0);
  text-shadow:0 0 12px rgba(124,231,255,0.4);
}

/* Enhanced form and contact elements with magnetic effects */
.form-group{position:relative;margin-bottom:clamp(20px,5vw,28px)}

.form-group input:focus,
.form-group textarea:focus{
  border-color:var(--accent);
  background:rgba(124,231,255,0.03);
  box-shadow:0 0 24px rgba(124,231,255,0.15), inset 0 0 16px rgba(124,231,255,0.05);
  transform:scale(1.01);outline:none;
}

.form-group label{
  font-weight:600;color:var(--text);font-size:clamp(14px,3.5vw,17px);
  transition:color .3s ease;margin-bottom:clamp(8px,2vw,12px);display:block;
}

.form input:focus + label,
.form textarea:focus + label{color:var(--accent)}

/* Enhanced submit button with magnetic attraction */
.btn.primary{
  background:linear-gradient(135deg, var(--accent), #c6fffa);
  color:#021018;border:none;padding:clamp(14px,3.5vw,18px) clamp(32px,8vw,48px);
  border-radius:16px;font-size:clamp(15px,3.8vw,18px);font-weight:700;
  cursor:pointer;width:100%;max-width:400px;
  transition:all .4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position:relative;overflow:hidden;text-transform:uppercase;
  letter-spacing:0.5px;margin:clamp(16px,4vw,24px) auto 0;
  display:block;text-align:center;
}

.btn.primary::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
  transition:opacity .3s ease;opacity:0;
}
.btn.primary::after{
  content:'';position:absolute;inset:-2px;
  background:linear-gradient(45deg, var(--accent), #c6fffa, var(--accent));
  border-radius:18px;opacity:0;transition:opacity .4s ease;z-index:-1;filter:blur(8px);
}

.btn.primary:hover{
  transform:translateY(-2px) scale(1.01);
  box-shadow:0 8px 24px rgba(124,231,255,0.25), 0 0 16px rgba(124,231,255,0.15);
}
.btn.primary:hover::before{opacity:0.6}
.btn.primary:hover::after{opacity:0.4}

.btn.primary:active{transform:translateY(-2px) scale(1.01)}

/* Contact items with hover magnetism */
.contact-item{
  transition:all .4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position:relative;cursor:pointer;overflow:hidden;
}

.contact-item::before{
  content:'';position:absolute;inset:-1px;
  background:linear-gradient(135deg, transparent, rgba(124,231,255,0.6), transparent);
  border-radius:inherit;opacity:0;transition:all .4s ease;z-index:-1;filter:blur(4px);
}
.contact-item::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at center, rgba(124,231,255,0.08) 0%, transparent 50%);
  border-radius:inherit;opacity:0;transition:opacity .3s ease;pointer-events:none;
}

.contact-item:hover{
  transform:translateY(-8px) scale(1.02);
  border-color:rgba(124,231,255,0.5);
  box-shadow:0 16px 48px rgba(124,231,255,0.2), 0 0 32px rgba(124,231,255,0.1);
}
.contact-item:hover::before{opacity:0.3}
.contact-item:hover::after{opacity:1}

.contact-item a{transition:all .3s ease;position:relative;z-index:1;text-decoration:none;color:inherit}
.contact-item:hover a{
  color:var(--accent);
  text-shadow:0 0 12px rgba(124,231,255,0.4);
}

/* Disable projects section when needed */
.projects-wrap.hidden{display:none}

/* Enhanced touch targets and accessibility */
.nav-dot{
  min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;
  width:clamp(12px,3vw,16px);height:clamp(12px,3vw,16px);border-radius:50%;
  background:rgba(255,255,255,0.25);border:none;cursor:pointer;
  transition:all .4s cubic-bezier(0.25, 0.46, 0.45, 0.94);position:relative;
}
.nav-dot:focus{outline:3px solid rgba(124,231,255,0.5);outline-offset:2px}
.nav-dot.active{background:var(--accent);transform:scale(1.2);box-shadow:0 0 12px rgba(124,231,255,0.3)}
.nav-dot:hover:not(.active){background:rgba(255,255,255,0.4);transform:scale(1.1)}

/* Complete mobile responsiveness */
@media (max-width:640px){
  .hero{padding:clamp(20px,5vw,32px);min-height:calc(100vh - 80px)}
  .actions{flex-direction:column;gap:clamp(8px,2vw,12px)}
  .actions .btn{width:100%;justify-content:center}
  .form-actions{flex-direction:column}
  .form-actions .btn{width:100%}
  .cta-actions{flex-direction:column;align-items:center}
  .cta-actions .btn{width:100%;max-width:300px}
  .process.card{text-align:center}
  .project-slide{padding:clamp(8px,3vw,16px)}
  .device-mockup.phone{width:clamp(120px,30vw,160px);height:clamp(240px,60vw,320px)}
  .device-mockup.tablet{width:clamp(180px,45vw,240px);height:clamp(240px,60vw,320px)}
  .device-mockup.desktop{width:clamp(240px,80vw,320px);height:clamp(150px,50vw,200px)}
}

/* Mobile optimizations for pricing and carousel */
@media (max-width:640px){
  .price-grid{
    grid-template-columns:1fr;gap:clamp(16px,4vw,20px);
    padding-top:clamp(56px,12vw,72px);
  }
  
  .price-card{
    margin-top:clamp(56px,12vw,64px);
    padding:clamp(72px,16vw,88px) clamp(20px,5vw,28px) clamp(24px,6vw,32px);
    max-width:100%;
  }
  
  .price-tag, .featured-badge{
    top:-20px;
    padding:clamp(12px,3vw,16px) clamp(20px,5vw,28px);
    font-size:clamp(13px,3.5vw,15px);
    z-index:999 !important;
  }
  
  .project-slide{padding:12px}
  .device-mockup.phone{width:140px;height:280px}
  .device-mockup.tablet{width:200px;height:270px}
  .device-mockup.desktop{width:280px;height:180px}
  .carousel{padding:16px}
}

/* Enhanced Mobile-First Responsive Design for Native App Feel */
@media (max-width:768px) {
  /* Enhanced mobile typography and spacing */
  body{
    font-size:16px; /* Prevent zoom on iOS */
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
    line-height:1.5;
  }
  
  /* Ensure all sections and headings are centered on mobile */
  section, .container, h1, h2, h3, h4, h5, h6 {
    text-align: center;
  }
  
  .pricing-wrap{
    padding-top:clamp(96px,18vw,120px);
    margin:clamp(48px,10vw,80px) auto;
  }
  
  /* Mobile-optimized form inputs */
  .form input,
  .form textarea{
    font-size:16px; /* Prevent zoom on iOS */
    border-radius:12px;
    padding:clamp(14px,3.5vw,18px);
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
    transition:all .3s ease;
  }
  
  .form input:focus,
  .form textarea:focus{
    background:rgba(124,231,255,0.05);
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(124,231,255,0.1);
    transform:none; /* Disable transform on mobile focus */
  }
  
  /* Enhanced touch interactions */
  .btn{
    min-height:48px;
    font-size:16px;
    border-radius:12px;
    padding:16px 24px;
    /* Better touch feedback */
    -webkit-tap-highlight-color:rgba(124,231,255,0.2);
  }
  
  .btn:active{
    background-color:rgba(124,231,255,0.1);
    transform:scale(0.95);
  }
  
  /* Mobile carousel improvements */
  .carousel{
    border-radius:16px;
    /* Enable native scrolling as fallback */
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  
  .carousel::-webkit-scrollbar{
    display:none;
  }
  
  .project-slide{
    scroll-snap-align:start;
    padding:24px 16px;
  }
  
  /* Mobile device mockups */
  .device-mockup{
    max-width:240px;
    border-radius:20px;
    box-shadow:0 8px 32px rgba(0,0,0,0.3);
  }
  
  .device-mockup:active{
    transform:scale(0.95);
  }
  
  /* Enhanced navigation dots for mobile */
  .nav-dot{
    min-width:48px;
    min-height:48px;
    margin:0 4px;
  }
  
  /* Mobile pricing adjustments */
  .price-grid{
    grid-template-columns:1fr;
    gap:20px;
  }
  
  .price-card{
    margin-top:16px;
    padding:24px 20px;
  }
  
  .featured-badge{
    top:-12px;
    font-size:13px;
    padding:8px 16px;
  }
  
  .price{
    font-size:clamp(28px,7vw,36px);
    line-height:1;
    white-space:nowrap;
  }
  
  /* Mobile process steps */
  .step{
    padding:16px 0;
  }
  
  .step .dot{
    width:48px;
    height:48px;
    border-radius:16px;
  }
  
  .step-content{
    flex:1;
  }
  
  /* Mobile contact adjustments */
  .brutal{
    flex-direction:column;
  }
  
  .brutal > div{
    padding:16px 20px;
  }
  
  .brutal .big{
    font-size:clamp(16px,4.5vw,18px);
    word-break:break-all; /* Ensure phone numbers break properly */
  }
  
  /* Safe area support for modern mobile devices */
  .nav{
    padding-top:max(16px, env(safe-area-inset-top));
    padding-left:max(16px, env(safe-area-inset-left));
    padding-right:max(16px, env(safe-area-inset-right));
  }
  
  .container{
    padding-left:max(16px, env(safe-area-inset-left));
    padding-right:max(16px, env(safe-area-inset-right));
  }
  
  /* Mobile hero optimizations */
  .hero .card{
    padding:40px 20px;
    margin:0 8px;
  }
  
  .hero h1{
    font-size:clamp(32px,8vw,48px);
  }
  
  .hero .tag{
    font-size:16px;
  }
  
  .hero .lede{
    font-size:15px;
    line-height:1.5;
  }
  
  /* Mobile actions */
  .actions{
    flex-direction:column;
    gap:12px;
    width:100%;
  }
  
  .actions .btn{
    width:100%;
    max-width:300px;
    margin:0 auto;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}
  .track{transition:none}
  .step{transition:none}
  .mock-site{animation:none}
}

/* Small screens and ultra-mobile optimization */
@media (max-width: 480px) {
  .container {
    padding: 0 clamp(12px, 3vw, 16px);
  }
  
  .hero-card {
    padding: clamp(16px, 4vw, 24px);
    margin: clamp(8px, 2vw, 12px);
  }
  
  .hero-title {
    font-size: clamp(28px, 7vw, 48px);
    margin-bottom: clamp(8px, 2vw, 12px);
  }
  
  .hero-subtitle {
    font-size: clamp(16px, 3.8vw, 22px);
    margin-bottom: clamp(12px, 3vw, 16px);
  }
  
  .hero-description {
    font-size: clamp(13px, 3.2vw, 15px);
    line-height: 1.5;
    margin-bottom: clamp(20px, 5vw, 28px);
  }
  
  .trust-badges {
    gap: clamp(6px, 1.5vw, 8px);
    margin-top: clamp(8px, 2vw, 12px);
  }
  
  .trust-badge {
    font-size: clamp(10px, 2.2vw, 12px);
    padding: clamp(2px, 0.6vw, 4px) clamp(4px, 1.2vw, 8px);
    gap: clamp(3px, 0.8vw, 5px);
  }
  
  .trust-badge svg {
    width: clamp(10px, 2.2vw, 12px);
    height: clamp(10px, 2.2vw, 12px);
  }
  
  .btn {
    font-size: clamp(13px, 3vw, 15px);
    padding: clamp(10px, 2.5vw, 12px) clamp(16px, 4vw, 20px);
  }
  
  /* Ensure service highlights work on small screens */
  .service-highlight {
    margin: clamp(2px, 0.5vw, 3px) 0;
    padding: clamp(1px, 0.3vw, 2px) clamp(3px, 0.8vw, 4px);
    font-size: clamp(13px, 3vw, 15px);
  }
}

/* Urgency and Scarcity Elements */
.urgency-text {
  color: #ff6b6b;
  font-weight: 600;
  background: linear-gradient(135deg, rgba(255,107,107,0.1), rgba(255,107,107,0.05));
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255,107,107,0.2);
}

.urgency-banner {
  margin-top: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(255,107,107,0.1), rgba(255,215,0,0.1));
  border: 1px solid rgba(255,107,107,0.3);
  border-radius: 8px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.urgency-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transform: translateX(-100%);
  animation: urgency-shine 3s infinite;
}

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

.urgency-content {
  position: relative;
  z-index: 1;
}

.urgency-label {
  display: block;
  font-weight: 700;
  color: #ff6b6b;
  font-size: 14px;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.urgency-desc {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

.urgency-alert {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px 0;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(255,193,7,0.15), rgba(255,107,107,0.1));
  border: 1px solid rgba(255,193,7,0.3);
  border-radius: 6px;
  font-size: 14px;
  color: var(--text);
  animation: urgency-pulse 2s infinite;
}

@keyframes urgency-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

.urgency-icon {
  font-size: 16px;
  color: #ffc107;
}

/* Enhanced pricing cards with urgency */
.price-card {
  position: relative;
  overflow: hidden;
}

.price-card[data-tier="starter"] {
  border: 2px solid rgba(255,107,107,0.3);
  background: linear-gradient(135deg, rgba(255,107,107,0.05), rgba(124,231,255,0.05));
}

.price-card[data-tier="starter"]::before {
  content: '🔥 LIMITED SPOTS';
  position: absolute;
  top: 8px;
  right: -30px;
  background: linear-gradient(135deg, #ff6b6b, #ff4757);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 40px;
  transform: rotate(45deg);
  z-index: 2;
}

/* Enhanced mobile urgency elements */
@media (max-width: 768px) {
  .urgency-banner {
    margin: 8px 0;
    padding: 10px 12px;
  }
  
  .urgency-alert {
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    font-size: 13px;
  }
  
  .urgency-label {
    font-size: 13px;
  }
  
  .urgency-desc {
    font-size: 11px;
  }
}

/* Enhanced Additional Services Section */
.additional-services {
  margin: 32px 0;
  background: linear-gradient(135deg, rgba(124,231,255,0.03), rgba(255,255,255,0.02));
  border: 1px solid rgba(124,231,255,0.1);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.services-header {
  padding: 24px;
  cursor: pointer;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  transition: all 0.3s ease;
  background: linear-gradient(135deg, rgba(124,231,255,0.05), transparent);
}

.services-header:hover {
  background: linear-gradient(135deg, rgba(124,231,255,0.08), rgba(255,215,0,0.03));
}

.services-header h3 {
  margin: 0 0 8px 0;
  color: var(--accent);
  font-size: clamp(20px, 4vw, 24px);
  font-weight: 700;
}

.services-subtitle {
  margin: 0 0 16px 0;
  color: var(--muted);
  font-size: 16px;
  font-weight: 400;
}

.expand-icon {
  width: 24px;
  height: 24px;
  color: var(--accent);
  transition: transform 0.3s ease;
}

.services-header.expanded .expand-icon {
  transform: rotate(180deg);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 24px;
  max-height: 0;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 0;
}

.services-grid.expanded {
  max-height: 1200px;
  opacity: 1;
}

.service-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(124,231,255,0.03));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 24px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(124,231,255,0.1), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  border-color: rgba(124,231,255,0.3);
  box-shadow: 0 8px 32px rgba(124,231,255,0.15);
}

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

.service-card.featured {
  border: 2px solid rgba(255,193,7,0.4);
  background: linear-gradient(135deg, rgba(255,193,7,0.1), rgba(124,231,255,0.05));
}

.service-badge {
  position: absolute;
  top: -1px;
  right: 16px;
  background: linear-gradient(135deg, #ffc107, #ff9800);
  color: #000;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 0 0 8px 8px;
  letter-spacing: 0.5px;
}

.service-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(124,231,255,0.2), rgba(124,231,255,0.1));
  border-radius: 12px;
  color: var(--accent);
  transition: all 0.3s ease;
}

.service-icon.security {
  background: linear-gradient(135deg, rgba(76,175,80,0.2), rgba(76,175,80,0.1));
  color: #4caf50;
}

.service-icon.growth {
  background: linear-gradient(135deg, rgba(255,152,0,0.2), rgba(255,152,0,0.1));
  color: #ff9800;
}

.service-icon.analytics {
  background: linear-gradient(135deg, rgba(156,39,176,0.2), rgba(156,39,176,0.1));
  color: #9c27b0;
}

.service-icon.content {
  background: linear-gradient(135deg, rgba(63,81,181,0.2), rgba(63,81,181,0.1));
  color: #3f51b5;
}

.service-icon.email {
  background: linear-gradient(135deg, rgba(244,67,54,0.2), rgba(244,67,54,0.1));
  color: #f44336;
}

.service-card:hover .service-icon {
  transform: scale(1.1);
  box-shadow: 0 4px 16px rgba(124,231,255,0.2);
}

.service-card h4 {
  margin: 0 0 12px 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}

.service-desc {
  margin: 0 0 16px 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.service-benefits {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.benefit {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Mobile responsiveness for services */
@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
  }
  
  .service-card {
    padding: 20px;
  }
  
  .services-header {
    padding: 20px;
  }
  
  .service-icon {
    width: 40px;
    height: 40px;
  }
}

/* ===== FAQ SECTION - GLASSY THEME ===== */
.faq-wrap {
  margin: clamp(48px, 12vw, 80px) 0;
  padding: 0 var(--mobile-padding);
}

.faq {
  max-width: 900px;
  margin: 0 auto;
}

.faq-header {
  text-align: center;
  margin-bottom: clamp(32px, 6vw, 48px);
}

.faq-header h2 {
  font-size: clamp(24px, 5vw, 36px);
  font-weight: 700;
  margin: 0 0 clamp(8px, 2vw, 12px) 0;
  background: linear-gradient(135deg, var(--accent), #c6fffa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
}

.faq-header .muted {
  font-size: clamp(14px, 3.5vw, 16px);
  margin: 0;
  line-height: 1.5;
}

.faq-grid {
  display: grid;
  gap: clamp(12px, 3vw, 18px);
}

.faq-item {
  background: linear-gradient(135deg, var(--glass-2), var(--glass));
  border: 1px solid var(--glass-border);
  border-radius: clamp(12px, 3vw, 16px);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.08);
  position: relative;
}

/* Glass reflection effect */
.faq-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent);
  pointer-events: none;
  opacity: 0.8;
}

/* Glass edge highlights */
.faq-item::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, 
    transparent, 
    rgba(124, 231, 255, 0.02), 
    transparent, 
    rgba(255, 255, 255, 0.01)
  );
  pointer-events: none;
  opacity: 0.6;
}

.faq-item:hover {
  border-color: var(--glass-border-hover);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
              0 0 0 1px rgba(124, 231, 255, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

.q {
  padding: clamp(16px, 4vw, 20px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
  min-height: clamp(50px, 12vw, 60px);
}

.q:hover {
  background: linear-gradient(135deg, 
    rgba(124, 231, 255, 0.05), 
    rgba(255, 255, 255, 0.02)
  );
}

.q-content {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2.5vw, 14px);
  flex: 1;
  min-width: 0; /* Prevents flex overflow */
}

.q-icon {
  font-size: clamp(16px, 3.5vw, 20px);
  width: clamp(30px, 7vw, 36px);
  height: clamp(30px, 7vw, 36px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent), #c6fffa);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(124, 231, 255, 0.25);
}

.q-text {
  font-size: clamp(15px, 3.5vw, 17px);
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  word-wrap: break-word;
  hyphens: auto;
}

.q-toggle {
  width: clamp(20px, 5vw, 24px);
  height: clamp(20px, 5vw, 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  flex-shrink: 0;
  margin-left: clamp(8px, 2vw, 12px);
}

.q-toggle svg {
  width: 100%;
  height: 100%;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.a {
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.02), 
    rgba(124, 231, 255, 0.01)
  );
  position: relative;
  z-index: 1;
}

.a p {
  padding: 0 clamp(16px, 4vw, 20px) clamp(16px, 4vw, 20px);
  margin: 0;
  color: var(--muted);
  font-size: clamp(13px, 3vw, 15px);
  line-height: 1.6;
  opacity: 0;
  transition: opacity 0.3s ease 0.1s;
  word-wrap: break-word;
  hyphens: auto;
}

/* Open state */
.faq-item.open .q-toggle svg {
  transform: rotate(180deg);
  color: var(--accent);
}

.faq-item.open .q-toggle {
  background: linear-gradient(135deg, 
    rgba(124, 231, 255, 0.1), 
    rgba(124, 231, 255, 0.05)
  );
  border-radius: 50%;
}

.faq-item.open .a {
  max-height: 150px;
}

.faq-item.open .a p {
  opacity: 1;
}

.faq-item.open {
  background: linear-gradient(135deg, var(--glass-3), var(--glass-2));
}

/* Focus states for accessibility */
.q:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: clamp(8px, 2vw, 12px);
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .faq-wrap {
    margin: clamp(32px, 8vw, 48px) 0;
  }
  
  .faq-header {
    margin-bottom: clamp(24px, 5vw, 32px);
  }
  
  .faq-grid {
    gap: clamp(10px, 2.5vw, 14px);
  }
  
  .q {
    padding: clamp(14px, 3.5vw, 18px);
    min-height: clamp(44px, 10vw, 52px);
  }
  
  .q-content {
    gap: clamp(8px, 2vw, 10px);
  }
  
  .q-icon {
    width: clamp(26px, 6vw, 30px);
    height: clamp(26px, 6vw, 30px);
    font-size: clamp(14px, 3vw, 16px);
  }
  
  .q-text {
    font-size: clamp(14px, 3vw, 16px);
    line-height: 1.25;
  }
  
  .q-toggle {
    width: clamp(18px, 4vw, 20px);
    height: clamp(18px, 4vw, 20px);
    margin-left: clamp(6px, 1.5vw, 8px);
  }
  
  .a p {
    padding: 0 clamp(14px, 3.5vw, 18px) clamp(14px, 3.5vw, 18px);
    font-size: clamp(12px, 2.8vw, 14px);
    line-height: 1.5;
  }
  
  .faq-item.open .a {
    max-height: 120px;
  }
}

@media (max-width: 480px) {
  .faq-wrap {
    margin: clamp(24px, 6vw, 32px) 0;
  }
  
  .q {
    padding: clamp(12px, 3vw, 16px);
  }
  
  .q-text {
    font-size: clamp(13px, 2.8vw, 15px);
  }
  
  .a p {
    padding: 0 clamp(12px, 3vw, 16px) clamp(12px, 3vw, 16px);
  }
}