#hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 120px 60px 80px;
}
#hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg-gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse 80% 60% at 60% 40%, rgba(123,47,255,0.18) 0%, transparent 70%),
              radial-gradient(ellipse 50% 50% at 20% 80%, rgba(0,229,255,0.08) 0%, transparent 60%);
}
.hero-mobile-effect {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
  background: radial-gradient(circle at 20% 20%, rgba(0,229,255,0.08), transparent 30%),
              radial-gradient(circle at 80% 25%, rgba(123,47,255,0.06), transparent 42%),
              radial-gradient(circle at 50% 85%, rgba(0,184,204,0.06), transparent 38%);
}
.hero-mobile-effect .hero-glow {
  position: absolute;
  display: block;
  border-radius: 50%;
  opacity: 0.16;
  filter: blur(40px);
  animation: mobileGlow 8s ease-in-out infinite alternate;
}
.hero-mobile-effect .hero-glow:nth-child(1) { width: 180px; height: 180px; background: rgba(0,229,255,0.2); top: 8%; left: 6%; }
.hero-mobile-effect .hero-glow:nth-child(2) { width: 220px; height: 220px; background: rgba(123,47,255,0.15); top: 22%; right: 8%; animation-delay: 1.6s; }
.hero-mobile-effect .hero-glow:nth-child(3) { width: 160px; height: 160px; background: rgba(0,184,204,0.18); bottom: 12%; left: 42%; animation-delay: 3.1s; }
.hero-mobile-effect .mobile-code-line {
  position: absolute;
  top: -60px;
  display: block;
  font-family: 'Courier New', monospace;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(0, 229, 255, 0.6);
  opacity: 1;
  white-space: nowrap;
  letter-spacing: 0.05em;
  text-shadow: 0 0 8px rgba(0,229,255,0.3);
  animation: mobileCodeDrop 14s ease-in-out infinite;
  z-index: 1;
}
.hero-mobile-effect .mobile-code-line.line-1 { left: 10%; animation-delay: 0s; color: rgba(0, 229, 255, 0.3); }
.hero-mobile-effect .mobile-code-line.line-2 { left: 35%; animation-delay: 3s; color: rgba(123, 47, 255, 0.3); animation-name: mobileCodeDropViolet; }
.hero-mobile-effect .mobile-code-line.line-3 { left: 60%; animation-delay: 6s; color: rgba(0, 229, 255, 0.3); }
.hero-mobile-effect .mobile-code-line.line-4 { left: 78%; animation-delay: 9s; color: rgba(123, 47, 255, 0.3); animation-name: mobileCodeDropViolet; }
.hero-content { position: relative; z-index: 2; max-width: 720px; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; font-size: 0.75rem; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--cyan); margin-bottom: 28px;
}
.hero-eyebrow::before { content: ''; display: block; width: 32px; height: 1px; background: var(--cyan); }
.hero-title { font-family: 'Space Grotesk', sans-serif; font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 700; line-height: 1.05; letter-spacing: -2px; margin-bottom: 28px; }
.hero-title .line { display: block; overflow: hidden; }
.hero-title .line span { display: block; animation: slideUp 0.9s cubic-bezier(0.16,1,0.3,1) both; }
.hero-title .line:nth-child(2) span { animation-delay: 0.12s; }
.hero-title .line:nth-child(3) span { animation-delay: 0.24s; }
.gradient-text { background: linear-gradient(135deg, var(--violet-light) 0%, var(--cyan) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-sub { font-size: 1.1rem; line-height: 1.7; color: var(--muted); max-width: 520px; margin-bottom: 48px; animation: fadeInUp 1s 0.4s both; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; animation: fadeInUp 1s 0.55s both; }
.hero-scroll-hint { position: absolute; bottom: 48px; left: 60px; z-index: 2; display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 0.75rem; letter-spacing: 1.5px; text-transform: uppercase; animation: fadeInUp 1s 0.9s both; }
.scroll-line { width: 40px; height: 1px; background: var(--muted); position: relative; overflow: hidden; }
.scroll-line::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--cyan); animation: scrollSlide 2s 1.2s infinite; }

#stats { padding: 80px 60px; background: var(--navy2); border-top: 1px solid rgba(123,47,255,0.1); border-bottom: 1px solid rgba(123,47,255,0.1); }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; }
.stat-item { padding: 40px 48px; border-right: 1px solid rgba(123,47,255,0.1); text-align: center; }
.stat-item:last-child { border-right: none; }
.stat-num { font-family: 'Space Grotesk', sans-serif; font-size: 3.5rem; font-weight: 700; background: linear-gradient(135deg, var(--violet-light), var(--cyan)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; margin-bottom: 10px; }
.stat-label { color: var(--muted); font-size: 0.875rem; letter-spacing: 0.5px; }

.proof-strip { padding: 42px 60px; display: grid; grid-template-columns: minmax(220px, 0.9fr) 1.6fr; gap: 36px; align-items: center; background: rgba(7,13,28,0.78); border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); }
.proof-copy span { display: block; color: var(--muted); font-size: 0.76rem; letter-spacing: 1.8px; text-transform: uppercase; margin-bottom: 8px; }
.proof-copy strong { font-family: 'Space Grotesk', sans-serif; font-size: 1.15rem; line-height: 1.35; font-weight: 600; }
.proof-logos { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; }
.proof-logos span { min-height: 54px; display: flex; align-items: center; justify-content: center; text-align: center; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; background: rgba(255,255,255,0.025); color: rgba(240,244,255,0.68); font-family: 'Space Grotesk', sans-serif; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.6px; }

section { padding: 120px 60px; scroll-margin-top: 88px; position: relative; }
.section-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 0.72rem; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--cyan); margin-bottom: 20px; }
.section-eyebrow::before { content: ''; display: block; width: 24px; height: 1px; background: var(--cyan); }
.section-title { font-family: 'Space Grotesk', sans-serif; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 700; letter-spacing: -1px; line-height: 1.1; margin-bottom: 20px; }
.section-sub { color: var(--muted); font-size: 1.05rem; line-height: 1.7; max-width: 580px; }

#services { background: var(--navy); }
.services-header { margin-bottom: 72px; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

#social { background: var(--navy2); }
.social-split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.social-visual { position: relative; display: flex; align-items: center; justify-content: center; }
.social-phone { width: 280px; height: 480px; border: 2px solid rgba(123,47,255,0.3); border-radius: 40px; background: var(--navy); position: relative; overflow: hidden; box-shadow: 0 40px 80px rgba(0,0,0,0.6), 0 0 60px rgba(123,47,255,0.15) inset; }
.phone-screen { position: absolute; inset: 12px; border-radius: 30px; background: linear-gradient(160deg, rgba(123,47,255,0.25), rgba(0,229,255,0.1)); overflow: hidden; padding: 20px 16px; }
.phone-notch { width: 80px; height: 8px; background: var(--navy); border-radius: 100px; margin: 0 auto 20px; }
.phone-card { background: rgba(11,22,48,0.8); border-radius: 14px; padding: 14px 16px; border: 1px solid rgba(123,47,255,0.2); margin-bottom: 12px; animation: floatCard 4s ease-in-out infinite; }
.phone-card:nth-child(3) { animation-delay: 1.5s; }
.pcard-label { font-size: 0.6rem; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }
.pcard-value { font-family: 'Space Grotesk', sans-serif; font-size: 1.4rem; font-weight: 700; color: var(--cyan); }
.pcard-delta { font-size: 0.65rem; color: #4ADE80; margin-top: 2px; }
.floating-badge { position: absolute; background: var(--card-bg); border: 1px solid rgba(0,229,255,0.3); border-radius: 12px; padding: 10px 16px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: flex; align-items: center; gap: 10px; font-size: 0.78rem; white-space: nowrap; animation: floatBadge 6s ease-in-out infinite; }
.badge-1 { top: 60px; right: -60px; animation-delay: 0s; }
.badge-2 { bottom: 100px; left: -70px; animation-delay: 2s; }
.badge-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; }

#webdev { background: var(--navy); }
.webdev-split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }

#process { background: var(--navy2); }
.process-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; margin-top: 72px; position: relative; }
.process-steps::before { content: ''; position: absolute; top: 36px; left: 10%; right: 10%; height: 1px; background: linear-gradient(to right, transparent, var(--violet), var(--cyan), transparent); }
.process-step { text-align: center; padding: 0 20px; }
.process-step h4 { font-family: 'Space Grotesk', sans-serif; font-size: 1rem; font-weight: 600; margin-bottom: 10px; }
.process-step p { color: var(--muted); font-size: 0.85rem; line-height: 1.6; }

.parallax-band { height: 340px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.parallax-bg { position: absolute; inset: -40%; z-index: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%237B2FFF' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); will-change: transform; }
.parallax-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(135deg, rgba(5,11,24,0.92) 0%, rgba(123,47,255,0.15) 50%, rgba(5,11,24,0.92) 100%); }
.parallax-text { position: relative; z-index: 2; text-align: center; }
.parallax-text h2 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 700; letter-spacing: -1px; margin-bottom: 32px; line-height: 1.2; }

#testimonials { background: var(--navy); }
.testi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 64px; }

#pricing { background: var(--navy2); }
.pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 64px; }

#contact { background: var(--navy); }
.contact-split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.contact-info .section-sub { margin-bottom: 48px; }

#scrollTopBtn { position: fixed; right: 30px; bottom: 30px; width: 64px; height: 64px; border: none; border-radius: 50%; background: rgba(10,22,40,.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 9999; opacity: 0; visibility: hidden; transform: translateY(20px); transition: .3s }
#scrollTopBtn.show { opacity: 1; visibility: visible; transform: translateY(0) }
#scrollTopBtn svg { position: absolute; transform: rotate(-90deg) }
#scrollTopBtn span { color: #F0F4FF; font-size: 22px; font-weight: bold; position: relative; z-index: 2 }
.progress-bg { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 4 }
.progress-circle { fill: none; stroke: url(#grad); stroke-width: 4; stroke-linecap: round }

.section-center { text-align: center; max-width: 760px; margin: 0 auto 64px; }
.section-center .section-eyebrow { justify-content: center; }
.section-center .section-eyebrow::before { display: none; }

#work, #blog { background: rgba(5,11,24,0.82); }
.showcase-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; }
.ready-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }