/* ================================================================
   VastkamTechnology — Advanced Tech Animations & Design Layer
   ================================================================ */

/* ── Fonts ────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap');

/* ── Custom Cursor ──────────────────────────────────────────── */
*, *::before, *::after { cursor: none !important; }

.cursor-dot {
  position: fixed;
  width: 8px;
  height: 8px;
  background: #7a5af8;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: width 0.15s, height 0.15s, background 0.15s;
  mix-blend-mode: screen;
}

.cursor-ring {
  position: fixed;
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(122,90,248,0.6);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease;
  will-change: transform;
}

.cursor-dot.hover { width: 14px; height: 14px; background: #b5b1ff; }
.cursor-ring.hover { width: 56px; height: 56px; border-color: rgba(181,177,255,0.4); }

/* ── Grid Background Overlay ──────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(122,90,248,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122,90,248,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
  animation: gridPulse 8s ease-in-out infinite;
}

@keyframes gridPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ── Scanline Effect ──────────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.015) 2px,
    rgba(0,0,0,0.015) 4px
  );
  pointer-events: none;
  z-index: 1;
  animation: scanMove 12s linear infinite;
}

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

/* ── Particle Canvas ──────────────────────────────────────── */
#particle-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}

/* ── Floating Tech Orbs ───────────────────────────────────── */
.tech-orb {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(60px);
  animation: orbFloat linear infinite;
}

.tech-orb-1 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(114,92,255,0.12) 0%, transparent 70%);
  top: 10%; left: -10%;
  animation-duration: 20s;
}

.tech-orb-2 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(255,88,213,0.08) 0%, transparent 70%);
  top: 60%; right: -5%;
  animation-duration: 25s;
  animation-delay: -8s;
}

.tech-orb-3 {
  width: 250px; height: 250px;
  background: radial-gradient(circle, rgba(78,110,255,0.1) 0%, transparent 70%);
  bottom: 10%; left: 30%;
  animation-duration: 18s;
  animation-delay: -12s;
}

@keyframes orbFloat {
  0%   { transform: translate(0px, 0px) rotate(0deg); }
  25%  { transform: translate(30px, -20px) rotate(90deg); }
  50%  { transform: translate(-20px, 40px) rotate(180deg); }
  75%  { transform: translate(40px, 20px) rotate(270deg); }
  100% { transform: translate(0px, 0px) rotate(360deg); }
}

/* ── Navbar Tech Enhancement ──────────────────────────────── */
.site-header {
  backdrop-filter: blur(20px) saturate(180%);
  background: rgba(23,31,46,0.85) !important;
  border-bottom: 1px solid rgba(122,90,248,0.15) !important;
  transition: all 0.3s ease;
}

.site-header.scrolled {
  background: rgba(23,31,46,0.96) !important;
  border-bottom-color: rgba(122,90,248,0.3) !important;
  box-shadow: 0 0 30px rgba(122,90,248,0.1);
}

.logo-text-tech {
  font-family: 'Orbitron', monospace;
  letter-spacing: 0.02em;
  font-size: 13px !important;
}

.nav-link {
  position: relative;
  overflow: hidden;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0%;
  height: 1px;
  background: var(--gradient-btn);
  transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after { width: 100%; }

/* ── Hero Glitch Title ────────────────────────────────────── */
.hero-title {
  position: relative;
  animation: heroReveal 1.2s ease forwards;
  opacity: 0;
}

@keyframes heroReveal {
  0% { opacity: 0; transform: translateY(30px); filter: blur(10px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.gradient-text {
  position: relative;
  display: inline-block;
  animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(114,92,255,0.4)); }
  50% { filter: drop-shadow(0 0 20px rgba(181,177,255,0.7)); }
}

/* ── Typewriter Cursor ─────────────────────────────────────── */
.typewriter-cursor::after {
  content: '|';
  animation: blink 0.7s step-end infinite;
  color: #7a5af8;
  font-weight: 100;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ── Hero Pill Enhancement ─────────────────────────────────── */
.hero-pill {
  animation: pillFloat 4s ease-in-out infinite;
}

@keyframes pillFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-4px); }
}

.hero-pill-inner {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 12px !important;
}

/* ── Stats Counter Glow ────────────────────────────────────── */
.hero-stat-num {
  font-family: 'Orbitron', monospace !important;
  position: relative;
  display: inline-block;
}

/* Reapply to the inline hero stat divs */
[style*="font-size:40px"] {
  font-family: 'Orbitron', monospace !important;
  animation: statGlow 2s ease-in-out infinite;
}

@keyframes statGlow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(122,90,248,0.3)); }
  50% { filter: drop-shadow(0 0 12px rgba(181,177,255,0.6)); }
}

/* ── Service Cards Enhancement ─────────────────────────────── */
.service-card {
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
  border-color: rgba(122,90,248,0.08) !important;
}

.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(122,90,248,0.05) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
}

.service-card::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(122,90,248,0.6), transparent);
  transition: left 0.6s ease;
}

.service-card:hover::before { opacity: 1; }
.service-card:hover::after { left: 100%; }

.service-card:hover {
  transform: translateY(-8px) scale(1.01) !important;
  border-color: rgba(122,90,248,0.3) !important;
  box-shadow: 
    0 20px 60px rgba(0,0,0,0.3),
    0 0 0 1px rgba(122,90,248,0.15),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

.service-icon {
  position: relative;
  transition: all 0.3s ease;
}

.service-card:hover .service-icon {
  transform: scale(1.1) rotate(5deg);
  filter: drop-shadow(0 0 12px rgba(122,90,248,0.6));
}

.service-icon i {
  transition: all 0.3s ease;
}

/* ── Animated Border Cards ─────────────────────────────────── */
.animated-border {
  position: relative;
  background: transparent;
}

.animated-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--border-angle, 0deg),
    transparent 20%,
    rgba(122,90,248,0.5) 36%,
    rgba(181,177,255,0.8) 45%,
    rgba(122,90,248,0.5) 54%,
    transparent 70%
  );
  animation: borderRotate 4s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
  opacity: 0;
  transition: opacity 0.3s;
}

.animated-border:hover::before { opacity: 1; }

@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes borderRotate {
  to { --border-angle: 360deg; }
}

/* ── Feature Items Animation ───────────────────────────────── */
.feature-item {
  position: relative;
  transition: all 0.3s ease;
}

.feature-item::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: var(--gradient-btn);
  border-radius: 2px;
  transition: height 0.4s ease;
}

.feature-item:hover::before { height: 80%; }
.feature-item:hover { padding-left: 8px; }

.feature-icon {
  transition: all 0.3s ease;
  position: relative;
}

.feature-icon::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(122,90,248,0.15);
  transform: scale(0);
  transition: transform 0.3s ease;
}

.feature-item:hover .feature-icon::after { transform: scale(1); }
.feature-item:hover .feature-icon { transform: rotate(10deg) scale(1.1); }

/* ── Pricing Card Tech Style ───────────────────────────────── */
.pricing-card {
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

.pricing-card::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 150px; height: 150px;
  background: radial-gradient(circle, rgba(122,90,248,0.12) 0%, transparent 70%);
  transform: translate(50%, -50%);
  transition: transform 0.4s ease;
}

.pricing-card:hover::after { transform: translate(30%, -30%) scale(1.5); }

.pricing-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.3), 0 0 0 1px rgba(122,90,248,0.2) !important;
}

/* ── Section Badge Pulse ───────────────────────────────────── */
.section-badge,
.section-label {
  animation: badgePulse 3s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(122,90,248,0); }
  50% { box-shadow: 0 0 0 6px rgba(122,90,248,0); }
}

/* ── Glowing Buttons ───────────────────────────────────────── */
.btn-primary {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease !important;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease;
}

.btn-primary:hover::before { width: 300px; height: 300px; }

.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(122,90,248,0.4) !important;
}

.btn-primary:active { transform: translateY(0) !important; }

.btn-outline {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease !important;
}

.btn-outline:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(122,90,248,0.2) !important;
}

/* ── Testimonial Cards ─────────────────────────────────────── */
.testimonial-card {
  position: relative;
  transition: all 0.4s ease !important;
  overflow: hidden;
}

.testimonial-card::before {
  content: '"';
  position: absolute;
  top: -20px; right: 16px;
  font-size: 120px;
  font-family: 'Orbitron', monospace;
  color: rgba(122,90,248,0.06);
  line-height: 1;
  pointer-events: none;
  transition: color 0.3s ease;
}

.testimonial-card:hover::before { color: rgba(122,90,248,0.1); }

.testimonial-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3) !important;
  border-color: rgba(122,90,248,0.2) !important;
}

/* ── Logo Marquee ──────────────────────────────────────────── */
.hero-logos-row {
  position: relative;
  overflow: hidden;
}

.hero-logos-row img {
  transition: all 0.3s ease;
  filter: brightness(0.7) grayscale(0.3);
}

.hero-logos-row img:hover {
  filter: brightness(1) grayscale(0);
  transform: scale(1.1);
}

/* ── Section Title Animation ───────────────────────────────── */
.section-title {
  animation: none;
  position: relative;
}

.section-title.in-view {
  animation: titleReveal 0.8s ease forwards;
}

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

/* ── Data Flow Lines ───────────────────────────────────────── */
.data-line {
  position: absolute;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(122,90,248,0.4), transparent);
  animation: dataFlow 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes dataFlow {
  0% { transform: scaleY(0) translateY(-100%); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: scaleY(1) translateY(100%); opacity: 0; }
}

/* ── Tech Stats Section ────────────────────────────────────── */
.tech-counter {
  font-family: 'Orbitron', monospace !important;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ── Loading Bar at Top ────────────────────────────────────── */
.page-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: var(--gradient-btn);
  z-index: 999999;
  transition: width 0.3s ease;
  box-shadow: 0 0 10px rgba(122,90,248,0.8);
}

/* ── Scroll Down Indicator ─────────────────────────────────── */
.scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
  opacity: 0.6;
  animation: indicatorBounce 2s ease-in-out infinite;
}

.scroll-indicator span {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gray-400);
  font-family: 'Share Tech Mono', monospace;
}

.scroll-indicator-line {
  width: 1px;
  height: 50px;
  background: linear-gradient(to bottom, rgba(122,90,248,0.6), transparent);
  position: relative;
  overflow: hidden;
}

.scroll-indicator-line::after {
  content: '';
  position: absolute;
  top: -10px;
  width: 1px;
  height: 10px;
  background: rgba(181,177,255,1);
  animation: scrollDrop 2s ease-in-out infinite;
}

@keyframes scrollDrop {
  0% { top: -10px; opacity: 0; }
  20% { opacity: 1; }
  100% { top: 60px; opacity: 0; }
}

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

/* ── Hexagonal Background Pattern ─────────────────────────── */
.hex-bg {
  position: relative;
}

.hex-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66zm0 34L0 84V50l28 16 28-16v34L28 100z' fill='none' stroke='rgba(122%2C90%2C248%2C0.04)' /%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: 0.8;
}

/* ── Glowing Section Dividers ──────────────────────────────── */
.section::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(122,90,248,0.2), transparent);
  margin-top: 80px;
}

/* ── Tech Card Highlight ───────────────────────────────────── */
.tech-card,
.why-card {
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

.tech-card::before,
.why-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(122,90,248,0.06) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
  z-index: 0;
}

.tech-card:hover::before,
.why-card:hover::before { opacity: 1; }

.tech-card:hover,
.why-card:hover {
  transform: translateY(-6px) scale(1.01) !important;
  border-color: rgba(122,90,248,0.25) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25), 0 0 0 1px rgba(122,90,248,0.1) !important;
}

/* ── Form Inputs Tech Style ────────────────────────────────── */
input, textarea, select {
  transition: all 0.3s ease !important;
}

input:focus, textarea:focus, select:focus {
  box-shadow: 0 0 0 3px rgba(122,90,248,0.15), 0 0 20px rgba(122,90,248,0.1) !important;
  border-color: rgba(122,90,248,0.5) !important;
  outline: none !important;
}

/* ── Animated Gradient Background Sections ─────────────────── */
.cta-section {
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(122,90,248,0.15) 0%, transparent 70%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: ctaPulse 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes ctaPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
  50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.4; }
}

/* ── Footer Tech Lines ─────────────────────────────────────── */
.site-footer {
  position: relative;
  overflow: hidden;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(122,90,248,0.4), rgba(181,177,255,0.6), rgba(122,90,248,0.4), transparent);
  animation: footerLine 4s ease-in-out infinite;
}

@keyframes footerLine {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ── Tab Buttons Enhancement ───────────────────────────────── */
.tab-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
}

.tab-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-btn);
  opacity: 0;
  transition: opacity 0.3s;
}

.tab-btn.active::before { opacity: 1; }
.tab-btn.active { color: #fff !important; }

/* ── About Stat Cards ──────────────────────────────────────── */
.about-stat {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.about-stat:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.2), 0 0 0 1px rgba(122,90,248,0.1);
}

.about-stat span {
  font-family: 'Orbitron', monospace !important;
}

/* ── Contact Form Tech ─────────────────────────────────────── */
.contact-form-wrap {
  position: relative;
}

.contact-form-wrap::before {
  content: 'SECURE TRANSMISSION';
  position: absolute;
  top: -30px; right: 0;
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(122,90,248,0.5);
  text-transform: uppercase;
}

/* ── Noise Texture Overlay ─────────────────────────────────── */
.noise-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.015;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
  animation: noiseAnim 0.5s steps(1) infinite;
}

@keyframes noiseAnim {
  0% { background-position: 0 0; }
  25% { background-position: -50px 25px; }
  50% { background-position: 20px -40px; }
  75% { background-position: -30px 60px; }
}

/* ── Floating Data Chips ───────────────────────────────────── */
.data-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  color: rgba(122,90,248,0.8);
  border: 1px solid rgba(122,90,248,0.2);
  border-radius: 4px;
  padding: 4px 8px;
  background: rgba(122,90,248,0.05);
  letter-spacing: 0.1em;
}

.data-chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7a5af8;
  animation: chipBlink 1.5s ease-in-out infinite;
}

@keyframes chipBlink {
  0%, 100% { opacity: 1; box-shadow: 0 0 4px rgba(122,90,248,0.6); }
  50% { opacity: 0.3; box-shadow: none; }
}

/* ── Hero Description Stagger ──────────────────────────────── */
.hero-desc {
  animation: heroReveal 1.2s ease 0.2s forwards;
  opacity: 0;
}

.hero-actions {
  animation: heroReveal 1.2s ease 0.4s forwards;
  opacity: 0;
}

/* ── Matrix Rain Hint (decorative) ────────────────────────── */
.matrix-col {
  position: fixed;
  top: 0;
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  color: rgba(122,90,248,0.06);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  animation: matrixFall linear infinite;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

@keyframes matrixFall {
  0% { transform: translateY(-100%); opacity: 0.5; }
  50% { opacity: 0.08; }
  100% { transform: translateY(100vh); opacity: 0; }
}

/* ── 3D Tilt Cards ─────────────────────────────────────────── */
.tilt-card {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.1s ease-out;
}

/* ── Neon Highlight Lines ──────────────────────────────────── */
h1, h2 { position: relative; }

/* ── Responsive Adjustments ────────────────────────────────── */
@media (max-width: 768px) {
  body::before { background-size: 40px 40px; }
  .cursor-dot, .cursor-ring { display: none; }
  .tech-orb { display: none; }
  .matrix-col { display: none; }
  *, *::before, *::after { cursor: auto !important; }
}

/* ── Scroll Progress Bar ───────────────────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: linear-gradient(90deg, #725cff, #b5b1ff);
  z-index: 999999;
  width: 0%;
  box-shadow: 0 0 8px rgba(122,90,248,0.8);
  transition: width 0.1s linear;
}

/* ── Status Indicator ──────────────────────────────────────── */
.status-online {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  color: rgba(74,222,128,0.8);
  text-transform: uppercase;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74,222,128,0.6);
  animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(74,222,128,0.6); }
  50% { box-shadow: 0 0 12px rgba(74,222,128,0.9), 0 0 20px rgba(74,222,128,0.3); }
}

/* ── Image hover parallax ──────────────────────────────────── */
.hero-img-frame {
  transition: transform 0.3s ease;
  transform-style: preserve-3d;
}

/* ── Magnetic Button Effect ────────────────────────────────── */
.magnetic {
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

/* ── Circuit Lines Decoration ──────────────────────────────── */
.circuit-line {
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(122,90,248,0.2), transparent);
  height: 1px;
  pointer-events: none;
  animation: circuitPulse 4s ease-in-out infinite;
}

@keyframes circuitPulse {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.6; }
}

/* ── Glitch Effect for Text ────────────────────────────────── */
.glitch {
  position: relative;
}

.glitch:hover::before,
.glitch:hover::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: transparent;
}

.glitch:hover::before {
  color: rgba(255,88,213,0.7);
  clip-path: polygon(0 30%, 100% 30%, 100% 50%, 0 50%);
  transform: translateX(-2px);
  animation: glitchL 0.3s steps(1) infinite;
}

.glitch:hover::after {
  color: rgba(114,92,255,0.7);
  clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%);
  transform: translateX(2px);
  animation: glitchR 0.3s steps(1) infinite;
}

@keyframes glitchL {
  0%, 100% { transform: translateX(-2px); }
  50% { transform: translateX(2px); }
}

@keyframes glitchR {
  0%, 100% { transform: translateX(2px); }
  50% { transform: translateX(-2px); }
}

/* ================================================================
   TECH ANIMATIONS — EXTENDED LAYER v2
   ================================================================ */

/* ── Holographic Hero Stats Panel ─────────────────────────────── */
.hero-img-frame > div {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg,rgba(114,92,255,0.08) 0%,rgba(26,34,53,0.95) 100%) !important;
  border: 1px solid rgba(122,90,248,0.15) !important;
  backdrop-filter: blur(20px);
  box-shadow:
    0 0 0 1px rgba(122,90,248,0.08),
    0 40px 80px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 60px rgba(114,92,255,0.05) !important;
  transition: all 0.4s ease;
}

.hero-img-frame > div::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(181,177,255,0.04) 50%,
    transparent 60%
  );
  background-size: 200% 200%;
  animation: holoSheen 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

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

.hero-img-frame > div::after {
  content: 'VASTKAM OS v3.0 // INITIALIZING';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  padding: 6px 16px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.15em;
  color: rgba(122,90,248,0.5);
  text-align: right;
  border-top: 1px solid rgba(122,90,248,0.08);
  background: rgba(23,31,46,0.6);
  z-index: 2;
  animation: osBootText 8s linear infinite;
}

@keyframes osBootText {
  0%   { content: 'VASTKAM OS v3.0 // INITIALIZING'; }
  20%  { content: 'VASTKAM OS v3.0 // CONNECTED'; }
  40%  { content: 'VASTKAM OS v3.0 // SECURE'; }
  60%  { content: 'VASTKAM OS v3.0 // READY'; }
  80%  { content: 'VASTKAM OS v3.0 // MONITORING'; }
  100% { content: 'VASTKAM OS v3.0 // INITIALIZING'; }
}

/* ── Neon Corner Accents on Cards ─────────────────────────────── */
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 20px; height: 20px;
  border-top: 1px solid rgba(122,90,248,0);
  border-left: 1px solid rgba(122,90,248,0);
  border-radius: 0;
  transition: border-color 0.3s ease, width 0.3s ease, height 0.3s ease;
  z-index: 2;
}

.service-card:hover::before {
  border-top-color: rgba(122,90,248,0.8);
  border-left-color: rgba(122,90,248,0.8);
  width: 30px; height: 30px;
}

/* Fake bottom-right corner accent using outline */
.service-card {
  --br: 0px;
  outline: 0px solid transparent;
}

.service-card:hover {
  outline: none;
}

/* ── Pulse Rings on Tech Grid Icons ───────────────────────────── */
.tech-card i {
  position: relative;
  display: inline-block;
}

.tech-card.featured i::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(122,90,248,0.3);
  animation: techRingPulse 2s ease-in-out infinite;
}

@keyframes techRingPulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.4); opacity: 0; }
}

/* ── Cyber Section Titles ──────────────────────────────────────── */
.section-title::before {
  content: '// ';
  color: rgba(122,90,248,0.25);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.6em;
  vertical-align: middle;
  letter-spacing: 0;
}

/* ── Animated Gradient Borders ─────────────────────────────────── */
@keyframes borderGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.pricing-card.popular {
  animation: popularPulse 3s ease-in-out infinite;
}

@keyframes popularPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(122,90,248,0.3), 0 20px 60px rgba(0,0,0,0.3); }
  50% { box-shadow: 0 0 0 1px rgba(181,177,255,0.5), 0 20px 60px rgba(114,92,255,0.15), 0 0 30px rgba(122,90,248,0.1); }
}

/* ── Live Activity Ticker ──────────────────────────────────────── */
.live-ticker {
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  color: rgba(122,90,248,0.7);
  letter-spacing: 0.08em;
  padding: 8px 16px;
  background: rgba(122,90,248,0.04);
  border-top: 1px solid rgba(122,90,248,0.08);
  border-bottom: 1px solid rgba(122,90,248,0.08);
  position: relative;
  overflow: hidden;
}

.live-ticker-track {
  display: flex;
  gap: 80px;
  white-space: nowrap;
  animation: tickerScroll 30s linear infinite;
}

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

.live-ticker::before {
  content: 'LIVE';
  font-family: 'Orbitron', monospace;
  font-size: 9px;
  color: #4ade80;
  background: rgba(74,222,128,0.1);
  border: 1px solid rgba(74,222,128,0.2);
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.15em;
  flex-shrink: 0;
  animation: statusPulse 2s ease-in-out infinite;
}

.live-ticker::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 60px;
  background: linear-gradient(to left, var(--dark-primary), transparent);
  pointer-events: none;
}

/* ── CTA Section — Cyber Grid Background ──────────────────────── */
.cta-section {
  background-image:
    linear-gradient(rgba(122,90,248,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122,90,248,0.04) 1px, transparent 1px),
    radial-gradient(ellipse at center, rgba(59,46,255,0.08) 0%, transparent 60%) !important;
  background-size: 40px 40px, 40px 40px, 100% 100%;
  border-top: 1px solid rgba(122,90,248,0.1);
  border-bottom: 1px solid rgba(122,90,248,0.1);
}

/* ── Typing Cursor on Hero Desc ────────────────────────────────── */
.hero-desc {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 400;
  font-size: 18px !important;
  letter-spacing: 0.01em;
  line-height: 1.7 !important;
}

/* ── Interactive Nav Dropdown Glow ────────────────────────────── */
.nav-dropdown-menu {
  backdrop-filter: blur(24px) !important;
  background: rgba(23,31,46,0.95) !important;
  border: 1px solid rgba(122,90,248,0.12) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(122,90,248,0.05) !important;
}

.nav-dropdown-col h5 {
  font-family: 'Orbitron', monospace !important;
  font-size: 9px !important;
  letter-spacing: 0.2em !important;
  color: rgba(122,90,248,0.6) !important;
}

.nav-dropdown-col a {
  position: relative;
  transition: all 0.2s ease;
  padding-left: 0;
}

.nav-dropdown-col a::before {
  content: '›';
  position: absolute;
  left: -12px;
  opacity: 0;
  color: #7a5af8;
  transition: all 0.2s ease;
}

.nav-dropdown-col a:hover {
  color: rgba(255,255,255,0.9) !important;
  padding-left: 12px;
}

.nav-dropdown-col a:hover::before { opacity: 1; left: 0; }

/* ── Floating Circuit Nodes ────────────────────────────────────── */
.circuit-node {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(122,90,248,0.4);
  box-shadow: 0 0 8px rgba(122,90,248,0.4);
  pointer-events: none;
  z-index: 0;
  animation: nodeFloat ease-in-out infinite;
}

@keyframes nodeFloat {
  0%, 100% { transform: translate(0, 0); opacity: 0.4; }
  50% { transform: translate(var(--tx, 20px), var(--ty, -15px)); opacity: 0.8; }
}

/* ── Holographic Section Labels ────────────────────────────────── */
.section-label span,
.section-badge-inner {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
}

/* ── About / Team Section ──────────────────────────────────────── */
.about-stat {
  transition: all 0.4s ease;
}

.about-stat:hover span {
  animation: counterGlow 0.5s ease forwards;
}

@keyframes counterGlow {
  0% { filter: drop-shadow(0 0 0 rgba(122,90,248,0)); }
  100% { filter: drop-shadow(0 0 8px rgba(181,177,255,0.8)); }
}

/* ── Contact Form ──────────────────────────────────────────────── */
.contact-card {
  position: relative;
  overflow: hidden;
}

.contact-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 200px; height: 200px;
  background: radial-gradient(circle at top right, rgba(122,90,248,0.08) 0%, transparent 60%);
  pointer-events: none;
}

/* ── Loading Skeleton Shimmer ──────────────────────────────────── */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ── Scrollbar Enhancement ─────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: rgba(23,31,46,0.5); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #725cff, #b5b1ff);
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(122,90,248,0.4);
}

/* ── Magnetic Focus Outline on Inputs ──────────────────────────── */
input:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(122,90,248,0.3),
    0 0 20px rgba(122,90,248,0.1),
    inset 0 0 0 1px rgba(122,90,248,0.2) !important;
}

/* ── 3D Depth Hero Content ─────────────────────────────────────── */
.hero-content-wrap {
  position: relative;
  z-index: 10;
}

/* ── Text Selection Style ──────────────────────────────────────── */
::selection {
  background: rgba(122,90,248,0.3);
  color: #fff;
}

/* ── Logo Mark Glow ────────────────────────────────────────────── */
.logo-mark {
  position: relative;
  transition: all 0.3s ease;
  font-family: 'Orbitron', monospace !important;
  font-weight: 800 !important;
  letter-spacing: -0.05em !important;
}

.logo-mark::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: rgba(122,90,248,0.2);
  filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: -1;
}

.logo:hover .logo-mark::after { opacity: 1; }
.logo:hover .logo-mark { transform: scale(1.05); }

/* ── Nav CTA Button Glow ───────────────────────────────────────── */
.btn-header-cta {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease !important;
}

.btn-header-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.1);
  transform: translateX(-100%) skewX(-15deg);
  transition: transform 0.5s ease;
}

.btn-header-cta:hover::after { transform: translateX(200%) skewX(-15deg); }
.btn-header-cta:hover {
  box-shadow: 0 0 20px rgba(122,90,248,0.4), 0 4px 15px rgba(0,0,0,0.2) !important;
  transform: translateY(-1px);
}

/* ── Animated Underline on Section Desc ────────────────────────── */
.section-desc a {
  background: linear-gradient(var(--gradient-btn)) no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size 0.3s ease;
}

.section-desc a:hover { background-size: 100% 1px; }

/* ── Ambient Glow on Hover ─────────────────────────────────────── */
.service-card:hover,
.pricing-card:hover,
.testimonial-card:hover {
  filter: drop-shadow(0 0 20px rgba(114,92,255,0.06));
}

/* ── Footer Links Enhanced ─────────────────────────────────────── */
.footer-links ul li a {
  position: relative;
  transition: all 0.2s ease !important;
  padding-left: 0;
}

.footer-links ul li a::before {
  content: '›';
  position: absolute;
  left: -8px;
  opacity: 0;
  color: rgba(122,90,248,0.7);
  transition: all 0.2s ease;
}

.footer-links ul li a:hover {
  color: rgba(255,255,255,0.8) !important;
  padding-left: 10px;
}

.footer-links ul li a:hover::before { opacity: 1; left: 0; }

/* ── Hex Grid Overlay on Features Section ──────────────────────── */
.features-section {
  position: relative;
}

.features-section::before {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 40%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66zm0 34L0 84V50l28 16 28-16v34L28 100z' fill='none' stroke='rgba(122%2C90%2C248%2C0.03)' /%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* ── Animated Stars in Hero Background ─────────────────────────── */
.star-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.star {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  animation: starTwinkle ease-in-out infinite;
}

@keyframes starTwinkle {
  0%, 100% { opacity: 0.1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.4); }
}

/* ── Loading Bar Pulse ─────────────────────────────────────────── */
#scroll-progress::after {
  content: '';
  position: absolute;
  right: 0; top: 0;
  width: 60px; height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.8), transparent);
  animation: progressShine 1.5s ease-in-out infinite;
}

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

/* ── Service Section — Neon Tab Border ─────────────────────────── */
.service-tabs {
  position: relative;
  padding-bottom: 2px;
}

.service-tabs::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(122,90,248,0.3), transparent);
  animation: tabLine 4s ease-in-out infinite;
}

@keyframes tabLine {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* ── Testimonial Stars Glow ────────────────────────────────────── */
.stars .ti-star-filled {
  color: #f59e0b !important;
  filter: drop-shadow(0 0 4px rgba(245,158,11,0.4));
  animation: starGlow 3s ease-in-out infinite;
}

.stars .ti-star-filled:nth-child(2) { animation-delay: 0.2s; }
.stars .ti-star-filled:nth-child(3) { animation-delay: 0.4s; }
.stars .ti-star-filled:nth-child(4) { animation-delay: 0.6s; }
.stars .ti-star-filled:nth-child(5) { animation-delay: 0.8s; }

@keyframes starGlow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(245,158,11,0.3)); }
  50% { filter: drop-shadow(0 0 8px rgba(245,158,11,0.7)); }
}

/* ── Author Avatar Glow ────────────────────────────────────────── */
.author-avatar {
  position: relative;
  font-family: 'Orbitron', monospace !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  transition: all 0.3s ease;
}

.testimonial-card:hover .author-avatar {
  box-shadow: 0 0 0 2px rgba(122,90,248,0.3), 0 0 12px rgba(122,90,248,0.2) !important;
}

/* ── Pricing Amount Odometer Style ─────────────────────────────── */
.pricing-amount {
  font-family: 'Orbitron', monospace !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em;
  transition: all 0.3s ease;
}

.pricing-card:hover .pricing-amount {
  filter: drop-shadow(0 0 10px rgba(122,90,248,0.5));
}

/* ── Hero Logos Infinite Scroll ────────────────────────────────── */
.hero-logos-row {
  animation: logoScroll 20s linear infinite;
  display: flex;
  width: max-content;
}

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

/* ── Corner Scanner Animation ──────────────────────────────────── */
.scanner-frame {
  position: relative;
}

.scanner-frame::before,
.scanner-frame::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  border-color: rgba(122,90,248,0.6);
  border-style: solid;
}

.scanner-frame::before {
  top: 0; left: 0;
  border-width: 1px 0 0 1px;
  animation: scannerBlink 2s ease-in-out infinite;
}

.scanner-frame::after {
  bottom: 0; right: 0;
  border-width: 0 1px 1px 0;
  animation: scannerBlink 2s ease-in-out 1s infinite;
}

@keyframes scannerBlink {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* ── Mobile Menu Tech Style ────────────────────────────────────── */
.mobile-nav.open {
  border-top: 1px solid rgba(122,90,248,0.15) !important;
  backdrop-filter: blur(20px);
  background: rgba(23,31,46,0.97) !important;
}

.mobile-nav a {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  transition: all 0.2s ease;
}

.mobile-nav a:hover {
  padding-left: 20px !important;
  color: rgba(181,177,255,0.9) !important;
}

/* ── Page Transition Flash ─────────────────────────────────────── */
.page-flash {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, rgba(114,92,255,0.12) 0%, rgba(23,31,46,0) 100%);
  pointer-events: none;
  z-index: 999997;
  opacity: 0;
  animation: pageFlash 0.6s ease forwards;
}

@keyframes pageFlash {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Glowing List Bullets ──────────────────────────────────────── */
.pricing-features-list li.excluded i { opacity: 0.3; }
.pricing-features-list li i {
  transition: all 0.3s ease;
}
.pricing-card:hover .pricing-features-list li i {
  filter: drop-shadow(0 0 4px rgba(155,138,251,0.5));
}

/* ── Floating Badge Counters ───────────────────────────────────── */
.section-badge-inner::after {
  content: '';
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(122,90,248,0.8);
  margin-left: 8px;
  vertical-align: middle;
  animation: chipBlink 1.5s ease-in-out infinite;
}

/* ── Keyboard Key Style for About Page ─────────────────────────── */
kbd {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  padding: 2px 6px;
  color: rgba(255,255,255,0.7);
}

/* ── Zoom Hover on Logo Brands ─────────────────────────────────── */
.hero-logos-row img {
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
  will-change: transform, filter;
}

/* ── Sparkle on Gradient Text Hover ───────────────────────────── */
.gradient-text {
  cursor: default;
  transition: filter 0.3s ease;
}

.gradient-text:hover {
  filter: drop-shadow(0 0 20px rgba(181,177,255,0.8)) brightness(1.2) !important;
  animation: none;
}

/* ── Corner Glow Boxes on Pricing Popular ──────────────────────── */
.pricing-card.popular::before {
  content: 'MOST POPULAR';
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  font-family: 'Orbitron', monospace;
  font-size: 8px;
  letter-spacing: 0.2em;
  color: rgba(181,177,255,0.9);
  background: linear-gradient(97deg, #725cff, #b5b1ff);
  padding: 3px 16px;
  border-radius: 0 0 8px 8px;
  z-index: 5;
}

/* ── Social Link Glow ──────────────────────────────────────────── */
.social-links a:hover {
  color: rgba(181,177,255,0.9) !important;
  filter: drop-shadow(0 0 6px rgba(122,90,248,0.6));
  transform: scale(1.2) translateY(-2px);
}

/* ── Why-Card Icons ─────────────────────────────────────────────── */
.why-card > i,
.why-card .card-icon i {
  transition: all 0.4s ease;
}

.why-card:hover > i,
.why-card:hover .card-icon i {
  transform: scale(1.2) rotate(-8deg);
  filter: drop-shadow(0 0 8px rgba(122,90,248,0.6));
}

/* ── Page Load Progress ─────────────────────────────────────────── */
.page-loader {
  position: fixed;
  inset: 0;
  background: var(--dark-primary);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.page-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-logo {
  font-family: 'Orbitron', monospace;
  font-size: 24px;
  font-weight: 800;
  background: linear-gradient(97deg, #725cff, #b5b1ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.1em;
}

.loader-bar-wrap {
  width: 200px;
  height: 2px;
  background: rgba(122,90,248,0.15);
  border-radius: 2px;
  overflow: hidden;
}

.loader-bar {
  height: 100%;
  background: linear-gradient(90deg, #725cff, #b5b1ff);
  border-radius: 2px;
  width: 0%;
  box-shadow: 0 0 8px rgba(122,90,248,0.6);
  transition: width 0.1s linear;
}

.loader-text {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(122,90,248,0.6);
  text-transform: uppercase;
}

/* ================================================================
   TECH ANIMATIONS — LAYER v3: FULL APP COVERAGE
   ================================================================ */

/* ── PAGE HERO — Cinematic Entry ──────────────────────────────── */
.page-hero {
  position: relative;
  overflow: hidden;
}

.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, transparent 40%, rgba(114,92,255,0.04) 50%, transparent 60%);
  background-size: 300% 300%;
  animation: pageHeroSheen 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

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

.page-hero h1 {
  animation: heroReveal 0.9s cubic-bezier(0.23,1,0.32,1) 0.1s both;
  position: relative;
  z-index: 2;
}

.page-hero p {
  animation: heroReveal 0.9s cubic-bezier(0.23,1,0.32,1) 0.25s both;
  position: relative;
  z-index: 2;
}

.page-hero .breadcrumb {
  animation: heroReveal 0.7s ease 0s both;
  position: relative;
  z-index: 2;
}

/* Animated scan line across page-hero */
.page-hero::before {
  animation: scanLine 4s ease-in-out infinite !important;
}

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

/* ── BREADCRUMB — Typewriter trail ────────────────────────────── */
.breadcrumb {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
}

.breadcrumb a:hover { letter-spacing: 0.15em !important; }

/* ── ABOUT VALUE CARDS — Holographic flip ────────────────────── */
.about-value-card {
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.23,1,0.32,1) !important;
  cursor: default;
}

.about-value-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(122,90,248,0.07) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
}

.about-value-card::after {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(181,177,255,0.5), transparent);
  transform: scaleX(0);
  transition: transform 0.4s ease;
  transform-origin: left;
}

.about-value-card:hover { transform: translateY(-6px) scale(1.02) !important; }
.about-value-card:hover::before { opacity: 1; }
.about-value-card:hover::after  { transform: scaleX(1); }

.about-value-card i {
  transition: all 0.35s ease;
  display: inline-block !important;
}

.about-value-card:hover i {
  transform: scale(1.3) rotate(-8deg) !important;
  filter: drop-shadow(0 0 10px rgba(122,90,248,0.7));
  color: #b5b1ff !important;
}

/* ── ABOUT STATS — Neon counter boxes ────────────────────────── */
.about-stat {
  border: 1px solid rgba(122,90,248,0.1) !important;
  border-radius: 12px !important;
  padding: 20px 16px !important;
  background: rgba(122,90,248,0.03) !important;
  transition: all 0.35s ease !important;
  position: relative;
  overflow: hidden;
}

.about-stat::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(122,90,248,0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.35s;
}

.about-stat:hover::before { opacity: 1; }

.about-stat:hover {
  border-color: rgba(122,90,248,0.35) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25), 0 0 0 1px rgba(122,90,248,0.1) !important;
}

.about-stat span {
  font-family: 'Orbitron', monospace !important;
  font-weight: 800 !important;
  display: block;
  transition: all 0.35s ease;
}

.about-stat:hover span {
  filter: drop-shadow(0 0 12px rgba(181,177,255,0.8));
  color: #c4c2ff !important;
}

/* ── WHY CARDS — Tech grid hover effect ──────────────────────── */
.why-card {
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.23,1,0.32,1) !important;
}

.why-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(122,90,248,0.06) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}

.why-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(122,90,248,0.4), transparent);
  transform: scaleX(0);
  transition: transform 0.5s ease;
}

.why-card:hover {
  transform: translateY(-8px) scale(1.01) !important;
  border-color: rgba(122,90,248,0.25) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3), 0 0 0 1px rgba(122,90,248,0.08) !important;
}

.why-card:hover::before { opacity: 1; }
.why-card:hover::after  { transform: scaleX(1); }

.why-card h4 {
  transition: color 0.3s ease;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em;
}

.why-card:hover h4 { color: rgba(181,177,255,0.95) !important; }

/* ── CAT TITLE — Category heading beam ───────────────────────── */
.cat-title {
  position: relative;
  padding-left: 16px !important;
  font-family: 'Orbitron', monospace !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: rgba(122,90,248,0.8) !important;
}

.cat-title::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 100%;
  background: var(--gradient-btn);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(122,90,248,0.5);
}

.services-category {
  position: relative;
  padding-bottom: 60px;
  margin-bottom: 20px;
}

.services-category::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(122,90,248,0.2), transparent);
}

/* ── FEATURES LIST — Stagger reveal ──────────────────────────── */
.features-list li {
  position: relative;
  padding: 12px 16px !important;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: all 0.3s ease !important;
  overflow: hidden;
}

.features-list li::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(122,90,248,0.04);
  opacity: 0;
  transition: opacity 0.3s;
}

.features-list li:hover {
  border-color: rgba(122,90,248,0.15) !important;
  transform: translateX(6px);
}

.features-list li:hover::before { opacity: 1; }

.features-list li i {
  transition: all 0.3s ease !important;
  flex-shrink: 0;
}

.features-list li:hover i {
  transform: scale(1.2) rotate(10deg);
  filter: drop-shadow(0 0 6px rgba(155,138,251,0.6));
}

/* ── SIDEBAR CARD — Glass panel ──────────────────────────────── */
.sidebar-card {
  position: relative;
  overflow: hidden;
  transition: all 0.35s ease !important;
}

.sidebar-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 100px; height: 100px;
  background: radial-gradient(circle at top right, rgba(122,90,248,0.1) 0%, transparent 70%);
  pointer-events: none;
}

.sidebar-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(122,90,248,0.4), transparent);
  animation: sidebarTopLine 3s ease-in-out infinite;
}

@keyframes sidebarTopLine {
  0%, 100% { opacity: 0.3; }
  50%       { opacity: 1; }
}

.sidebar-card:hover {
  box-shadow: 0 16px 50px rgba(0,0,0,0.3), 0 0 0 1px rgba(122,90,248,0.12) !important;
  transform: translateY(-3px);
}

.sidebar-card h4 {
  font-family: 'Orbitron', monospace !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(181,177,255,0.9) !important;
}

/* ── RELATED LIST — Hover beam ───────────────────────────────── */
.related-list li a {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 10px 12px !important;
  border-radius: 8px;
  transition: all 0.25s ease !important;
  border: 1px solid transparent;
  position: relative;
}

.related-list li a::before {
  content: '';
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 2px; height: 0;
  background: var(--gradient-btn);
  border-radius: 1px;
  transition: height 0.3s ease;
}

.related-list li a:hover {
  background: rgba(122,90,248,0.06) !important;
  border-color: rgba(122,90,248,0.15) !important;
  padding-left: 18px !important;
  color: rgba(255,255,255,0.9) !important;
}

.related-list li a:hover::before { height: 60%; }

.related-list li a i {
  color: var(--primary-400);
  transition: all 0.3s ease;
}

.related-list li a:hover i {
  transform: rotate(-10deg) scale(1.2);
  filter: drop-shadow(0 0 5px rgba(122,90,248,0.5));
}

/* ── SERVICE DETAIL HERO — Icon pulse ────────────────────────── */
.service-icon-lg {
  position: relative;
  animation: iconEntrance 0.6s cubic-bezier(0.23,1,0.32,1) 0.2s both;
}

@keyframes iconEntrance {
  0%   { transform: scale(0.5) rotate(-20deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg);    opacity: 1; }
}

.service-icon-lg::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(122,90,248,0.25);
  animation: iconRing 2.5s ease-in-out infinite;
}

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

/* ── CONTACT ITEMS — Scan on hover ───────────────────────────── */
.contact-item {
  padding: 12px !important;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: all 0.3s ease !important;
  position: relative;
  overflow: hidden;
}

.contact-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(122,90,248,0.04);
  transform: translateX(-100%);
  transition: transform 0.4s ease;
}

.contact-item:hover { border-color: rgba(122,90,248,0.15) !important; }
.contact-item:hover::before { transform: translateX(0); }

.contact-icon {
  transition: all 0.3s ease !important;
  flex-shrink: 0;
}

.contact-item:hover .contact-icon {
  transform: scale(1.15) rotate(-8deg);
  filter: drop-shadow(0 0 8px rgba(122,90,248,0.5));
}

.contact-item strong {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 12px !important;
  color: rgba(181,177,255,0.7) !important;
}

/* ── CONTACT FORM — Cyber input effects ──────────────────────── */
.contact-form .form-group {
  position: relative;
}

.contact-form label {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: rgba(122,90,248,0.7) !important;
  transition: color 0.3s ease;
}

.contact-form .form-group:focus-within label {
  color: rgba(181,177,255,0.9) !important;
}

/* Animated bottom border on inputs */
.contact-form input,
.contact-form select,
.contact-form textarea {
  position: relative;
  transition: all 0.3s ease !important;
  border-bottom: 1px solid rgba(122,90,248,0.15) !important;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-bottom-color: rgba(122,90,248,0.6) !important;
  background: rgba(122,90,248,0.03) !important;
}

/* ── CHAT PAGE — Terminal feel ────────────────────────────────── */
.chat-page {
  position: relative;
}

.chat-info h2 {
  font-family: 'Orbitron', monospace !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em;
}

.chat-logo {
  position: relative;
  transition: all 0.3s ease;
}

.chat-logo:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 0 16px rgba(122,90,248,0.5));
}

.chat-features div {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: all 0.3s ease !important;
  position: relative;
  overflow: hidden;
}

.chat-features div::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--gradient-btn);
  transform: scaleY(0);
  transition: transform 0.3s ease;
  transform-origin: bottom;
}

.chat-features div:hover {
  background: rgba(122,90,248,0.05) !important;
  border-color: rgba(122,90,248,0.12) !important;
  padding-left: 18px !important;
}

.chat-features div:hover::before { transform: scaleY(1); }

.chat-features i {
  transition: all 0.3s ease;
}

.chat-features div:hover i {
  transform: scale(1.2);
  filter: drop-shadow(0 0 6px rgba(122,90,248,0.6));
}

/* ── CHAT WRAPPER — Glass terminal ───────────────────────────── */
.chat-wrapper {
  position: relative;
}

.chat-wrapper::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(122,90,248,0.15), transparent 50%, rgba(78,110,255,0.1));
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.4s;
}

.chat-wrapper:hover::before { opacity: 1; }

/* ── PRICING CARD POPULAR — Animated badge ───────────────────── */
.pricing-popular-badge {
  font-family: 'Orbitron', monospace !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  animation: badgeShimmer 3s ease-in-out infinite;
}

@keyframes badgeShimmer {
  0%, 100% { filter: brightness(1);    box-shadow: none; }
  50%       { filter: brightness(1.15); box-shadow: 0 0 12px rgba(122,90,248,0.4); }
}

/* ── PRICING PLAN NAME — Tech font ───────────────────────────── */
.pricing-plan-name {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* ── PRICING DESC — Fade on hover ────────────────────────────── */
.pricing-desc {
  transition: color 0.3s ease;
}
.pricing-card:hover .pricing-desc {
  color: rgba(255,255,255,0.7) !important;
}

/* ── FOOTER BRAND — Glow on hover ────────────────────────────── */
.footer-brand p {
  transition: color 0.3s ease;
  font-size: 14px;
  line-height: 1.8;
}

.footer-brand p:hover { color: rgba(255,255,255,0.7) !important; }

.footer-links h4 {
  font-family: 'Orbitron', monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: rgba(122,90,248,0.7) !important;
  margin-bottom: 16px !important;
}

.footer-contact p {
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s ease;
  padding: 4px 0;
}

.footer-contact p:hover {
  color: rgba(181,177,255,0.8) !important;
  padding-left: 4px;
}

.footer-contact p i {
  transition: all 0.25s ease;
  color: rgba(122,90,248,0.6);
}

.footer-contact p:hover i {
  color: rgba(181,177,255,0.8);
  filter: drop-shadow(0 0 4px rgba(122,90,248,0.4));
}

.footer-bottom {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  border-top: 1px solid rgba(122,90,248,0.08) !important;
  position: relative;
}

.footer-bottom::before {
  content: '';
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(122,90,248,0.4), rgba(181,177,255,0.5), rgba(122,90,248,0.4), transparent);
  background-size: 200% 100%;
  animation: footerGlow 4s ease-in-out infinite;
}

@keyframes footerGlow {
  0%, 100% { background-position: 0%; opacity: 0.6; }
  50%       { background-position: 100%; opacity: 1; }
}

/* ── SOCIAL LINKS — Bounce & glow ────────────────────────────── */
.social-links a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06) !important;
  transition: all 0.3s cubic-bezier(0.23,1,0.32,1) !important;
  position: relative;
  overflow: hidden;
}

.social-links a::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-btn);
  opacity: 0;
  transition: opacity 0.3s;
}

.social-links a:hover::before { opacity: 1; }
.social-links a:hover {
  transform: translateY(-4px) scale(1.1) !important;
  border-color: rgba(122,90,248,0.4) !important;
  box-shadow: 0 8px 20px rgba(114,92,255,0.25) !important;
  color: #fff !important;
  filter: none !important;
}

.social-links a i { position: relative; z-index: 1; }

/* ── HEADER CTA — Pulse ring ─────────────────────────────────── */
.btn-header-cta {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  position: relative;
}

/* ── NAV DROPDOWN — Staggered link animation ─────────────────── */
.nav-dropdown-menu {
  animation: dropdownReveal 0.25s cubic-bezier(0.23,1,0.32,1) both;
}

@keyframes dropdownReveal {
  0%   { opacity: 0; transform: translateY(-8px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0)   scale(1); }
}

/* ── MOBILE NAV — Slide in ───────────────────────────────────── */
.mobile-nav.open {
  animation: mobileNavReveal 0.3s cubic-bezier(0.23,1,0.32,1) both !important;
}

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

/* ── FORM SUBMIT BUTTON — Ready state ───────────────────────── */
button[type="submit"],
.btn-lg {
  position: relative;
  overflow: hidden;
}

button[type="submit"]::after {
  content: '';
  position: absolute;
  top: 50%; left: -100%;
  width: 60px; height: 200%;
  background: rgba(255,255,255,0.12);
  transform: translateY(-50%) skewX(-20deg);
  transition: left 0.5s ease;
}

button[type="submit"]:hover::after { left: 120%; }

/* ── ALERT BOXES — Animated border ──────────────────────────── */
.alert {
  position: relative;
  overflow: hidden;
  animation: alertSlide 0.5s cubic-bezier(0.23,1,0.32,1) both;
}

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

.alert::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
}

.alert-success::before { background: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,0.5); }
.alert-error::before   { background: #f87171; box-shadow: 0 0 8px rgba(248,113,113,0.5); }

/* ── SERVICE DETAIL CONTENT — Paragraph fade ────────────────── */
.service-detail-content p,
.service-detail-content h2,
.service-detail-content h3 {
  animation: contentFadeUp 0.7s ease both;
}

.service-detail-content h3 { animation-delay: 0.1s; }
.service-detail-content p  { animation-delay: 0.15s; }

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

/* ── PRICING NOTE — Subtle glow ─────────────────────────────── */
.pricing-note {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.05em;
  opacity: 0.7;
  transition: opacity 0.3s;
  text-align: center;
  margin-top: 40px !important;
}

.pricing-note:hover { opacity: 1; }

.pricing-note a {
  color: rgba(181,177,255,0.8) !important;
  border-bottom: 1px solid rgba(122,90,248,0.3);
  transition: all 0.2s ease !important;
}

.pricing-note a:hover {
  color: #b5b1ff !important;
  border-bottom-color: rgba(122,90,248,0.7);
  filter: drop-shadow(0 0 6px rgba(122,90,248,0.4));
}

/* ── HERO PILL — Animated gradient border ────────────────────── */
.hero-pill {
  background: linear-gradient(
    90deg,
    rgba(255,88,213,0.5),
    rgba(78,110,255,0.5),
    rgba(255,88,213,0.5)
  ) !important;
  background-size: 200% 100% !important;
  animation: pillBorderFlow 3s linear infinite !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-pill:hover {
  transform: scale(1.04);
  box-shadow: 0 0 20px rgba(122,90,248,0.25);
}

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

/* ── SECTION HEADER — Appear sequence ───────────────────────── */
.section-header {
  position: relative;
}

.section-header .section-label  { animation: headerSeq 0.7s ease 0s both; }
.section-header .section-title  { animation: headerSeq 0.7s ease 0.1s both; }
.section-header .section-desc   { animation: headerSeq 0.7s ease 0.2s both; }

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

/* ── ABOUT GRID — Parallax split ────────────────────────────── */
.about-grid > div:first-child { animation: aboutLeft  0.9s cubic-bezier(0.23,1,0.32,1) 0.1s both; }
.about-card-grid               { animation: aboutRight 0.9s cubic-bezier(0.23,1,0.32,1) 0.25s both; }

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

@keyframes aboutRight {
  0%   { opacity: 0; transform: translateX(30px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* ── LOGO MARK — Orbitron / glow ────────────────────────────── */
.logo-mark {
  font-family: 'Orbitron', monospace !important;
  font-weight: 900 !important;
  transition: all 0.3s ease;
}

.logo:hover .logo-mark {
  filter: drop-shadow(0 0 12px rgba(122,90,248,0.7));
  letter-spacing: 0.05em;
}

.logo-name {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  transition: all 0.3s ease;
}

.logo:hover .logo-name { color: rgba(181,177,255,0.9) !important; }

/* ── TECH CARD GRID — 3D Perspective ────────────────────────── */
.tech-grid {
  perspective: 1000px;
}

.tech-card {
  transition: all 0.4s cubic-bezier(0.23,1,0.32,1) !important;
  transform-style: preserve-3d;
  position: relative;
  overflow: hidden;
}

.tech-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(122,90,248,0.1) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.4s;
}

.tech-card.featured::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(122,90,248,0.3), rgba(181,177,255,0.1), rgba(122,90,248,0.3));
  background-size: 200% 200%;
  animation: featuredBorder 3s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
  z-index: 0;
}

@keyframes featuredBorder {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

.tech-card span {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  transition: all 0.3s ease;
}

.tech-card:hover span {
  color: rgba(181,177,255,0.9) !important;
  letter-spacing: 0.12em !important;
}

/* ── CTA INNER — Glowing title ───────────────────────────────── */
.cta-inner h2 {
  font-family: 'Orbitron', monospace !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  animation: ctaTitleGlow 4s ease-in-out infinite;
}

@keyframes ctaTitleGlow {
  0%, 100% { filter: none; }
  50%       { filter: drop-shadow(0 0 20px rgba(181,177,255,0.3)); }
}

/* ── CTA ACTIONS — Hover stagger ────────────────────────────── */
.cta-actions .btn-primary { animation: ctaBtn 0.6s ease 0.2s both; }
.cta-actions .btn-ghost   { animation: ctaBtn 0.6s ease 0.35s both; }

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

/* ── STATS BAR NUMBERS — Monospace ───────────────────────────── */
.hero-img-frame [style*="font-size:40px"] {
  font-family: 'Orbitron', monospace !important;
  font-size: 36px !important;
  letter-spacing: -0.02em;
}

/* ── PRICING CTA BUTTONS ─────────────────────────────────────── */
.pricing-cta-primary,
.pricing-cta-outline {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  transition: all 0.3s ease !important;
  position: relative;
  overflow: hidden;
}

.pricing-cta-primary::after,
.pricing-cta-outline::after {
  content: '';
  position: absolute;
  top: 50%; left: -80px;
  width: 60px; height: 200%;
  background: rgba(255,255,255,0.1);
  transform: translateY(-50%) skewX(-20deg);
  transition: left 0.5s ease;
}

.pricing-cta-primary:hover::after,
.pricing-cta-outline:hover::after { left: 110%; }

/* ── SERVICE LINK ARROW — Slide ──────────────────────────────── */
.service-link {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.25s ease !important;
  position: relative;
}

.service-link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: var(--gradient-btn);
  transition: width 0.3s ease;
}

.service-link:hover { gap: 10px !important; }
.service-link:hover::after { width: 100%; }

/* ── SERVICE ICON — Ring pulse ───────────────────────────────── */
.service-icon {
  position: relative;
}

.service-icon::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 1px solid rgba(122,90,248,0);
  transition: all 0.4s ease;
}

.service-card:hover .service-icon::before {
  border-color: rgba(122,90,248,0.25);
  inset: -8px;
  box-shadow: 0 0 12px rgba(122,90,248,0.15);
}

/* ── MOBILE RESPONSIVE ANIMATION SAFETY ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 768px) {
  .about-grid > div:first-child,
  .about-card-grid {
    animation: heroReveal 0.7s ease both !important;
  }
}

/* ================================================================
   TECH ANIMATIONS — LAYER v4: CODE RAIN & BINARY BACKGROUND
   ================================================================ */

/* ── Code Rain Canvas ────────────────────────────────────────── */
#code-rain-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
}

/* ── Floating Code Snippets ──────────────────────────────────── */
.code-float {
  position: fixed;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  line-height: 1.6;
  color: rgba(122, 90, 248, 0.12);
  pointer-events: none;
  z-index: 0;
  white-space: pre;
  letter-spacing: 0.02em;
  animation: codeFloatDrift linear infinite;
  text-shadow: 0 0 8px rgba(122, 90, 248, 0.1);
  user-select: none;
}

.code-float.lang-python  { color: rgba(59,  130, 246, 0.10); }
.code-float.lang-js      { color: rgba(234, 179,   8, 0.10); }
.code-float.lang-rust    { color: rgba(249, 115,  22, 0.10); }
.code-float.lang-go      { color: rgba(20,  184, 166, 0.10); }
.code-float.lang-sql     { color: rgba(236,  72, 153, 0.10); }
.code-float.lang-bash    { color: rgba(74,  222, 128, 0.10); }
.code-float.lang-cpp     { color: rgba(139, 92,  246, 0.10); }

@keyframes codeFloatDrift {
  0%   { transform: translateY(110vh) translateX(0px);   opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { transform: translateY(-110vh) translateX(var(--drift, 20px)); opacity: 0; }
}

/* ── Binary Stream Columns ───────────────────────────────────── */
.binary-col {
  position: fixed;
  top: 0;
  font-family: 'Share Tech Mono', monospace;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(122, 90, 248, 0.07);
  pointer-events: none;
  z-index: 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 0.1em;
  animation: binaryFall linear infinite;
  user-select: none;
  white-space: nowrap;
}

.binary-col.bright {
  color: rgba(181, 177, 255, 0.12);
  text-shadow: 0 0 6px rgba(122, 90, 248, 0.2);
}

@keyframes binaryFall {
  0%   { transform: translateY(-100%); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateY(100vh);  opacity: 0; }
}

/* ── Hex Dump Overlay ────────────────────────────────────────── */
.hex-dump-line {
  position: fixed;
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  color: rgba(78, 110, 255, 0.07);
  pointer-events: none;
  z-index: 0;
  white-space: nowrap;
  letter-spacing: 0.08em;
  animation: hexDrift linear infinite;
  user-select: none;
}

@keyframes hexDrift {
  0%   { transform: translateX(-100%); opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { transform: translateX(110vw);  opacity: 0; }
}

/* ── Central Code Canvas (Hero section overlay) ──────────────── */
#hero-code-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
}

/* ── Glowing Code Keyword Flashes ────────────────────────────── */
.code-keyword-flash {
  position: fixed;
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  font-weight: bold;
  pointer-events: none;
  z-index: 0;
  animation: keywordFlash ease-in-out forwards;
  user-select: none;
}

@keyframes keywordFlash {
  0%   { opacity: 0; transform: scale(0.7) translateY(0px); filter: blur(4px); }
  15%  { opacity: 1; transform: scale(1)   translateY(0px); filter: blur(0); }
  70%  { opacity: 1; transform: scale(1)   translateY(-20px); }
  100% { opacity: 0; transform: scale(0.9) translateY(-40px); filter: blur(2px); }
}

/* ── Scrolling terminal lines at bottom ──────────────────────── */
#terminal-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 28px;
  background: rgba(17, 24, 39, 0.85);
  border-top: 1px solid rgba(122, 90, 248, 0.15);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  z-index: 9980;
  backdrop-filter: blur(10px);
  overflow: hidden;
  pointer-events: none;
}

#terminal-bar .tb-prompt {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  color: rgba(74, 222, 128, 0.8);
  letter-spacing: 0.1em;
  white-space: nowrap;
  flex-shrink: 0;
}

#terminal-bar .tb-track {
  flex: 1;
  overflow: hidden;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

#terminal-bar .tb-content {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  color: rgba(122, 90, 248, 0.6);
  white-space: nowrap;
  letter-spacing: 0.06em;
  animation: terminalScroll 35s linear infinite;
}

@keyframes terminalScroll {
  0%   { transform: translateX(100vw); }
  100% { transform: translateX(-100%); }
}

#terminal-bar .tb-cursor {
  width: 6px; height: 12px;
  background: rgba(74, 222, 128, 0.8);
  display: inline-block;
  margin-left: 4px;
  animation: blink 0.7s step-end infinite;
  flex-shrink: 0;
}

/* ── Code tooltip on hover (service cards) ───────────────────── */
.code-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 16px;
  background: rgba(17, 24, 39, 0.96);
  border: 1px solid rgba(122, 90, 248, 0.2);
  border-radius: 6px;
  padding: 8px 12px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  color: rgba(122, 90, 248, 0.8);
  white-space: pre;
  line-height: 1.6;
  pointer-events: none;
  z-index: 100;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  max-width: 220px;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.code-tooltip::before {
  content: '';
  position: absolute;
  bottom: -5px; left: 16px;
  width: 8px; height: 8px;
  background: rgba(17, 24, 39, 0.96);
  border-right: 1px solid rgba(122, 90, 248, 0.2);
  border-bottom: 1px solid rgba(122, 90, 248, 0.2);
  transform: rotate(45deg);
}

.service-card:hover .code-tooltip {
  opacity: 1;
  transform: translateY(0);
}

/* ── Rain canvas z-index fix ─────────────────────────────────── */
body > canvas { z-index: 0 !important; }

/* ── Reduce opacity on scroll (so it doesn't obscure content) ── */
#code-rain-canvas,
.binary-col,
.code-float,
.hex-dump-line {
  transition: opacity 0.5s ease;
}

body.scrolled-deep #code-rain-canvas { opacity: 0.5; }
body.scrolled-deep .binary-col       { opacity: 0.5; }

/* ================================================================
   TECH ANIMATIONS — LAYER v5: MAXIMUM IMMERSION
   ================================================================ */

/* ── Holographic Hero Stats Card ─────────────────────────────── */
.hero-img-frame > div {
  animation: holoCardIn 1s cubic-bezier(0.23,1,0.32,1) 0.3s both;
}
@keyframes holoCardIn {
  0%   { opacity:0; transform:perspective(800px) rotateX(12deg) translateY(30px); filter:blur(6px); }
  100% { opacity:1; transform:perspective(800px) rotateX(0deg)  translateY(0);    filter:blur(0); }
}

/* ── Radar Sweep on Hero Stats Card ──────────────────────────── */
.hero-img-frame > div::before {
  content:'';
  position:absolute;
  inset:0;
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    rgba(122,90,248,0.08) 20deg,
    transparent 40deg
  );
  animation: radarSweep 4s linear infinite;
  pointer-events:none;
  z-index:3;
  border-radius:inherit;
}
@keyframes radarSweep {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Network Graph Background (section divider) ──────────────── */
.network-graph-canvas {
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:0.35;
}

/* ── Services Section — Neon Grid underlay ───────────────────── */
.services-section {
  position:relative;
  overflow:hidden;
}
.services-section::before {
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(122,90,248,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122,90,248,0.025) 1px, transparent 1px);
  background-size:48px 48px;
  pointer-events:none;
  z-index:0;
  animation: gridShift 20s linear infinite;
}
@keyframes gridShift {
  0%   { background-position: 0 0; }
  100% { background-position: 48px 48px; }
}

/* ── Pricing Section — deep space background ─────────────────── */
.pricing-section {
  position:relative;
  overflow:hidden;
}
.pricing-section::before {
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 70% 50% at 20% 50%, rgba(114,92,255,0.05) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 80% 50%, rgba(78,110,255,0.04) 0%, transparent 70%);
  pointer-events:none;
  z-index:0;
  animation: priceGlow 8s ease-in-out infinite alternate;
}
@keyframes priceGlow {
  0%   { opacity:0.6; transform:scale(1); }
  100% { opacity:1;   transform:scale(1.1); }
}

/* ── Testimonials Section — stars galaxy ────────────────────── */
.testimonials-section {
  position:relative;
  overflow:hidden;
}

/* ── CTA Section — laser grid ────────────────────────────────── */
.cta-section::after {
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(122,90,248,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122,90,248,0.06) 1px, transparent 1px);
  background-size:30px 30px;
  pointer-events:none;
  z-index:0;
  animation:gridShift 12s linear infinite reverse;
}

/* ── Morphing SVG blob behind CTA ───────────────────────────── */
.cta-blob {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:600px; height:400px;
  pointer-events:none;
  z-index:0;
  opacity:0.12;
  animation: blobMorph 10s ease-in-out infinite;
}
@keyframes blobMorph {
  0%,100% { border-radius:60% 40% 30% 70%/60% 30% 70% 40%; transform:translate(-50%,-50%) rotate(0deg); }
  25%     { border-radius:30% 60% 70% 40%/50% 60% 30% 60%; }
  50%     { border-radius:50% 60% 30% 60%/30% 40% 70% 50%; transform:translate(-50%,-50%) rotate(180deg); }
  75%     { border-radius:60% 40% 60% 30%/70% 30% 60% 40%; }
}

/* ── Floating Orbs — Section-specific ───────────────────────── */
.section-orb {
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(80px);
  z-index:0;
  animation:orbFloat ease-in-out infinite;
}
.section-orb-1 { width:300px; height:300px; background:radial-gradient(circle,rgba(114,92,255,0.08) 0%,transparent 70%); top:10%; right:-5%; animation-duration:15s; }
.section-orb-2 { width:200px; height:200px; background:radial-gradient(circle,rgba(255,88,213,0.06) 0%,transparent 70%); bottom:10%; left:-3%; animation-duration:18s; animation-delay:-7s; }

/* ── Animated tech-grid connection lines ─────────────────────── */
#tech-connect-svg {
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:visible;
}
.tech-connect-line {
  stroke:rgba(122,90,248,0.15);
  stroke-width:1;
  fill:none;
  stroke-dasharray:6 4;
  animation: dashFlow 3s linear infinite;
}
@keyframes dashFlow {
  to { stroke-dashoffset:-20; }
}

/* ── Hero pill — morphing gradient ──────────────────────────── */
.hero-pill-inner {
  position:relative;
  z-index:1;
}

/* ── Feature items — left accent bar animated ────────────────── */
.feature-item {
  position:relative;
  transition: all 0.35s ease;
}
.feature-item::after {
  content:'';
  position:absolute;
  left:0; top:50%;
  transform:translateY(-50%);
  width:2px; height:0%;
  background:var(--gradient-btn);
  border-radius:1px;
  transition:height 0.35s ease;
  box-shadow:0 0 6px rgba(122,90,248,0.4);
}
.feature-item:hover::after { height:80%; }

/* ── Glitch scanline overlay on hero ─────────────────────────── */
.glitch-scanlines {
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  background:repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.012) 3px,
    rgba(0,0,0,0.012) 4px
  );
  animation:scanlinesDrift 8s linear infinite;
}
@keyframes scanlinesDrift {
  from { background-position:0 0; }
  to   { background-position:0 100px; }
}

/* ── Pulsing ring behind section badges ──────────────────────── */
.section-badge {
  position:relative;
}
.section-badge::before {
  content:'';
  position:absolute;
  inset:-4px;
  border-radius:9999px;
  background:linear-gradient(90deg,rgba(255,88,213,0.2),rgba(78,110,255,0.2));
  animation:badgeRing 3s ease-in-out infinite;
  z-index:-1;
}
@keyframes badgeRing {
  0%,100% { transform:scale(1); opacity:0.5; }
  50%     { transform:scale(1.08); opacity:1; }
}

/* ── Data packet animations between cards ────────────────────── */
.data-packet {
  position:fixed;
  width:4px; height:4px;
  border-radius:50%;
  background:#7a5af8;
  pointer-events:none;
  z-index:9990;
  box-shadow:0 0 6px rgba(122,90,248,0.8);
  animation:packetFly ease-in-out forwards;
}
@keyframes packetFly {
  0%   { transform:scale(0); opacity:0; }
  10%  { transform:scale(1); opacity:1; }
  90%  { opacity:1; }
  100% { transform:scale(0); opacity:0; }
}

/* ── Live code editor widget ──────────────────────────────────── */
#live-code-widget {
  position:fixed;
  bottom:46px; right:16px;
  width:280px;
  background:rgba(17,24,39,0.95);
  border:1px solid rgba(122,90,248,0.2);
  border-radius:10px;
  overflow:hidden;
  z-index:9985;
  box-shadow:0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(122,90,248,0.1);
  backdrop-filter:blur(16px);
  transform:translateY(110%);
  transition:transform 0.4s cubic-bezier(0.23,1,0.32,1);
}
#live-code-widget.visible { transform:translateY(0); }

#live-code-widget .lcw-header {
  display:flex; align-items:center; gap:8px;
  padding:8px 12px;
  background:rgba(122,90,248,0.08);
  border-bottom:1px solid rgba(122,90,248,0.1);
}
.lcw-dot { width:8px; height:8px; border-radius:50%; }
.lcw-dot-r { background:#f87171; }
.lcw-dot-y { background:#fbbf24; }
.lcw-dot-g { background:#4ade80; animation:statusPulse 2s ease-in-out infinite; }
.lcw-title {
  font-family:'Share Tech Mono',monospace;
  font-size:10px; letter-spacing:0.12em;
  color:rgba(122,90,248,0.7);
  margin-left:4px;
}
.lcw-close {
  margin-left:auto; cursor:pointer;
  color:rgba(255,255,255,0.3);
  font-size:14px; line-height:1;
  transition:color 0.2s;
}
.lcw-close:hover { color:rgba(255,255,255,0.7); }

#live-code-widget .lcw-body {
  padding:12px 14px;
  font-family:'Share Tech Mono',monospace;
  font-size:11px; line-height:1.7;
  color:rgba(122,90,248,0.7);
  min-height:120px;
  max-height:180px;
  overflow:hidden;
}
#live-code-widget .lcw-body .line {
  display:block;
  animation:codeLineIn 0.3s ease both;
}
@keyframes codeLineIn {
  from { opacity:0; transform:translateX(-8px); }
  to   { opacity:1; transform:translateX(0); }
}
.lcw-cursor {
  display:inline-block; width:7px; height:13px;
  background:rgba(122,90,248,0.7);
  vertical-align:middle; margin-left:2px;
  animation:blink 0.7s step-end infinite;
  border-radius:1px;
}

/* ── Floating IP/network packets banner ──────────────────────── */
.net-packet {
  position:fixed;
  font-family:'Share Tech Mono',monospace;
  font-size:9px; letter-spacing:0.08em;
  color:rgba(74,222,128,0.35);
  pointer-events:none;
  z-index:0;
  white-space:nowrap;
  animation:netPacketFloat linear both;
}
@keyframes netPacketFloat {
  0%   { opacity:0; transform:translateX(-20px); }
  10%  { opacity:1; }
  90%  { opacity:1; }
  100% { opacity:0; transform:translateX(calc(100vw + 40px)); }
}

/* ── Orbiting satellite dots around tech-grid featured cards ──── */
.orbit-ring {
  position:absolute;
  inset:-20px;
  border-radius:50%;
  border:1px dashed rgba(122,90,248,0.2);
  animation:orbitSpin linear infinite;
  pointer-events:none;
}
.orbit-dot {
  position:absolute;
  top:0; left:50%;
  width:5px; height:5px;
  background:#7a5af8;
  border-radius:50%;
  margin:-2.5px 0 0 -2.5px;
  box-shadow:0 0 8px rgba(122,90,248,0.8);
}
@keyframes orbitSpin {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}

/* ── Morphing gradient border on hero-img-frame ──────────────── */
.hero-img-frame > div {
  background-clip:padding-box;
}

/* ── Typewriter underscore cursor after titles ────────────────── */
.section-title-cursor::after {
  content:'_';
  color:rgba(122,90,248,0.6);
  animation:blink 0.9s step-end infinite;
  font-weight:300;
}

/* ── Glowing stat numbers ────────────────────────────────────── */
.hero-stat {
  position:relative;
  transition:all 0.3s ease;
}
.hero-stat:hover { transform:scale(1.06); }
.hero-stat:hover [style*="font-size:40px"] {
  filter:drop-shadow(0 0 16px rgba(181,177,255,1)) !important;
}

/* ── Signal strength bars (decorative) ───────────────────────── */
.signal-bars {
  display:inline-flex; align-items:flex-end; gap:2px; height:14px;
}
.signal-bar {
  width:3px; border-radius:1px;
  background:rgba(122,90,248,0.6);
  animation:signalAnim ease-in-out infinite alternate;
}
.signal-bar:nth-child(1) { height:4px;  animation-duration:0.6s; animation-delay:0s; }
.signal-bar:nth-child(2) { height:7px;  animation-duration:0.6s; animation-delay:0.1s; }
.signal-bar:nth-child(3) { height:10px; animation-duration:0.6s; animation-delay:0.2s; }
.signal-bar:nth-child(4) { height:13px; animation-duration:0.6s; animation-delay:0.3s; }
@keyframes signalAnim {
  from { opacity:0.3; }
  to   { opacity:1; filter:drop-shadow(0 0 3px rgba(122,90,248,0.6)); }
}

/* ── Holographic shimmer on nav brand ────────────────────────── */
.logo-mark {
  background:linear-gradient(135deg, #725cff 0%, #b5b1ff 50%, #725cff 100%);
  background-size:200% 200%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:holoShift 4s linear infinite;
}
@keyframes holoShift {
  0%   { background-position:0%   50%; }
  50%  { background-position:100% 50%; }
  100% { background-position:0%   50%; }
}

/* ── Loading shimmer sweep on slow-loading sections ──────────── */
.section-loading {
  position:relative;
  overflow:hidden;
}
.section-loading::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(122,90,248,0.04) 50%,transparent 60%);
  background-size:200% 100%;
  animation:sweepLoading 2s ease-in-out infinite;
}
@keyframes sweepLoading {
  0%   { background-position:200% 0; }
  100% { background-position:-200% 0; }
}

/* ── Pinging dot on nav CTA ──────────────────────────────────── */
.nav-cta-ping {
  position:relative;
}
.nav-cta-ping::after {
  content:'';
  position:absolute;
  top:-3px; right:-3px;
  width:8px; height:8px;
  border-radius:50%;
  background:#4ade80;
  box-shadow:0 0 0 0 rgba(74,222,128,0.4);
  animation:pingExpand 2s ease-out infinite;
}
@keyframes pingExpand {
  0%   { box-shadow:0 0 0 0 rgba(74,222,128,0.5); }
  70%  { box-shadow:0 0 0 8px rgba(74,222,128,0); }
  100% { box-shadow:0 0 0 0 rgba(74,222,128,0); }
}

/* ── 3D depth layers in testimonials ─────────────────────────── */
.testimonials-grid {
  perspective:1200px;
}
.testimonial-card {
  transform-style:preserve-3d;
  transform:perspective(800px) rotateX(0deg);
  transition:transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease !important;
}
.testimonial-card:hover {
  transform:perspective(800px) rotateX(-3deg) translateY(-8px) !important;
}

/* ── Tab button active glow ──────────────────────────────────── */
.tab-btn.active {
  box-shadow:0 0 20px rgba(122,90,248,0.3), 0 0 0 1px rgba(122,90,248,0.2) !important;
  animation:tabActiveGlow 2s ease-in-out infinite;
}
@keyframes tabActiveGlow {
  0%,100% { box-shadow:0 0 15px rgba(122,90,248,0.25), 0 0 0 1px rgba(122,90,248,0.15); }
  50%     { box-shadow:0 0 30px rgba(122,90,248,0.4),  0 0 0 1px rgba(122,90,248,0.3); }
}

/* ── Pricing card flip on hover ──────────────────────────────── */
.pricing-card {
  transform-style:preserve-3d;
}
.pricing-card:hover {
  transform:translateY(-8px) perspective(600px) rotateY(-2deg) !important;
}

/* ── Glitch text flicker (random, CSS-only) ──────────────────── */
@keyframes glitchFlicker {
  0%,92%,96%,100% { opacity:1; transform:none; }
  93%  { opacity:0.85; transform:translateX(2px)  skewX(1deg); }
  94%  { opacity:1;    transform:translateX(-2px) skewX(-1deg); }
  95%  { opacity:0.9;  transform:translateX(1px); }
}
.gradient-text {
  animation: glowPulse 3s ease-in-out infinite, glitchFlicker 8s ease-in-out infinite !important;
}

/* ── Hero text reveal char-by-char ───────────────────────────── */
.char-reveal span {
  display:inline-block;
  animation:charIn 0.4s ease both;
}
@keyframes charIn {
  from { opacity:0; transform:translateY(20px) rotate(5deg); }
  to   { opacity:1; transform:translateY(0) rotate(0deg); }
}