/* ============================================================
   JOINT AI LABS — Production CSS
   ============================================================ */

/* ── RESET & ROOT ── */
:root {
  --cyan: #3c20a3;
  --cyan-dim: rgba(60, 32, 163, 0.12);
  --green: #5c35db;
  --blue: #8b5cf6;
  --purple: #3c20a3;
  --orange: #ff6b35;
  --wa-green: #25D366;
  --dark: #090514;
  --dark-2: #0e0721;
  --dark-3: #140b2e;
  --dark-4: #190f3b;
  --dark-5: #1f1347;
  --glass: rgba(255,255,255,0.03);
  --glass-border: rgba(0, 212, 255, 0.12);
  --text: #ffffff;
  --text-2: rgba(255,255,255,0.72);
  --text-3: rgba(255,255,255,0.45);
  --font-display: 'Orbitron', sans-serif;
  --font-ui: 'Rajdhani', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --shadow-glow: 0 0 30px rgba(0,212,255,0.15);
  --shadow-card: 0 16px 48px rgba(0,0,0,0.5);
  --transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  scrollbar-width: thin;
  scrollbar-color: var(--cyan) var(--dark-2);
  overflow-x: hidden; /* Force strict boundaries on mobile */
  width: 100%;
  position: relative;
}
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--dark-2); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--cyan), var(--green)); border-radius: 3px; }

body {
  font-family: var(--font-body);
  background: var(--dark);
  color: var(--text);
  overflow-x: hidden;
  line-height: 1.6;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; }

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ══════════════════════════════
   CSS BACKGROUND (Zero-JS)
══════════════════════════════ */
.site-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden;
}

/* Dot grid — tech/data pattern relevant to AI */
.bg-grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(0,212,255,0.1) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0.6;
}

/* Ambient gradient blobs (GPU: transform+opacity only) */
.bg-glow {
  position: absolute; border-radius: 50%; pointer-events: none;
  will-change: transform;
}
.bg-glow-1 {
  width: 700px; height: 700px; top: -180px; left: -150px;
  background: radial-gradient(circle, rgba(0,102,255,0.1), transparent 70%);
  animation: glowDrift1 22s ease-in-out infinite;
}
.bg-glow-2 {
  width: 600px; height: 600px; bottom: -100px; right: -120px;
  background: radial-gradient(circle, rgba(0,212,255,0.07), transparent 70%);
  animation: glowDrift2 18s ease-in-out infinite;
}
.bg-glow-3 {
  width: 400px; height: 400px; top: 40%; left: 40%;
  background: radial-gradient(circle, rgba(139,92,246,0.05), transparent 70%);
  animation: glowDrift3 30s ease-in-out infinite;
}
@keyframes glowDrift1  { 0%,100%{transform:translate(0,0)} 50%{transform:translate(60px,40px)} }
@keyframes glowDrift2  { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-50px,-30px)} }
@keyframes glowDrift3  { 0%,100%{transform:translate(0,0)} 33%{transform:translate(40px,-30px)} 66%{transform:translate(-30px,40px)} }

/* Vertical data-stream lines (relevant to AI/data pipelines) */
.data-line {
  position: absolute; width: 1px; top: 0; bottom: 0;
  background: linear-gradient(180deg, transparent, rgba(0,212,255,0.15) 30%, rgba(0,212,255,0.15) 70%, transparent);
  will-change: transform, opacity;
}
.data-line::after {
  content: ''; position: absolute; left: 0; width: 100%;
  height: 80px;
  background: linear-gradient(180deg, transparent, var(--cyan), rgba(0,255,136,0.6), transparent);
  animation: streamDrop var(--spd, 4s) var(--dl, 0s) linear infinite;
  box-shadow: 0 0 6px var(--cyan);
}
@keyframes streamDrop { 0%{top:-80px;opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{top:100%;opacity:0} }
.dl-1 { left: 12%; --spd: 5s; --dl: 0s; }
.dl-2 { left: 28%; --spd: 7s; --dl: 1.5s; }
.dl-3 { left: 55%; --spd: 4.5s; --dl: 0.7s; }
.dl-4 { left: 73%; --spd: 6s; --dl: 2.2s; }
.dl-5 { left: 88%; --spd: 8s; --dl: 3s; }

/* ══════════════════════════════
   LOADER
══════════════════════════════ */
#loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--dark);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

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

.loader-content { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }

.loader-logo {
  width: 80px; height: 80px;
  filter: drop-shadow(0 0 20px rgba(0,212,255,0.6));
  animation: loaderPulse 1.5s ease-in-out infinite;
}

@keyframes loaderPulse {
  0%,100% { transform: scale(1); filter: drop-shadow(0 0 20px rgba(0,212,255,0.6)); }
  50% { transform: scale(1.08); filter: drop-shadow(0 0 35px rgba(0,212,255,0.9)); }
}

.loader-bar {
  width: 200px; height: 2px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden;
}

.loader-progress {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--cyan), var(--green));
  width: 0%;
  border-radius: 2px;
  transition: width 0.1s linear;
}

.loader-text {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-3);
  letter-spacing: 0.1em;
}

.dots-anim { animation: dotsAnim 1.2s steps(4) infinite; }
@keyframes dotsAnim {
  0%   { content: ''; }
  33%  { content: '.'; }
  66%  { content: '..'; }
  100% { content: '...'; }
}



/* ══════════════════════════════
   TYPOGRAPHY UTILITIES
══════════════════════════════ */
.grad-text {
  background: linear-gradient(135deg, #0A439F 0%, var(--cyan) 50%, var(--green) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-tag {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--cyan);
  background: rgba(0,212,255,0.07);
  border: 1px solid rgba(0,212,255,0.18);
  padding: 0.4rem 1.1rem;
  border-radius: 100px;
  margin-bottom: 1rem;
}

.section-heading {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.8vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.section-sub {
  font-size: 1rem; color: var(--text-2);
  max-width: 520px; margin: 0 auto;
  line-height: 1.7;
}

.section-header { text-align: center; margin-bottom: 4rem; }

.body-text { color: var(--text-2); line-height: 1.8; font-size: 0.97rem; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }

/* ══════════════════════════════
   BUTTONS
══════════════════════════════ */
.btn-primary {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-ui); font-size: 1rem; font-weight: 600;
  letter-spacing: 0.06em;
  color: #030712;
  background: linear-gradient(135deg, var(--cyan), var(--green));
  padding: 0.85rem 1.9rem;
  border-radius: var(--radius-sm);
  border: none; cursor: none;
  position: relative; overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 0 24px rgba(0,212,255,0.3), 0 4px 16px rgba(0,0,0,0.3);
  text-decoration: none;
}

.btn-primary::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--green), var(--cyan));
  opacity: 0; transition: opacity 0.3s;
}

.btn-primary span, .btn-primary svg { position: relative; z-index: 1; }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 40px rgba(0,212,255,0.45); }
.btn-primary:hover::before { opacity: 1; }

.btn-ghost {
  display: inline-flex; align-items: center;
  font-family: var(--font-ui); font-size: 1rem; font-weight: 600;
  letter-spacing: 0.06em; color: var(--cyan);
  background: transparent;
  border: 1px solid rgba(0,212,255,0.3);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1.9rem;
  cursor: none; transition: var(--transition);
  text-decoration: none; position: relative; overflow: hidden;
}

.btn-ghost::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0,212,255,0.06);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s ease;
}

.btn-ghost:hover { border-color: var(--cyan); color: white; transform: translateY(-2px); }
.btn-ghost:hover::before { transform: scaleX(1); }

.btn-ghost-inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.5rem; }

.btn-wa {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-ui); font-size: 1rem; font-weight: 600;
  letter-spacing: 0.06em; color: white;
  background: var(--wa-green);
  padding: 0.85rem 1.9rem; border-radius: var(--radius-sm);
  border: none; cursor: none; transition: transform 0.3s, box-shadow 0.3s;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(37,211,102,0.3);
}

.btn-wa:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(37,211,102,0.45); }

.large-btn { padding: 1.1rem 2.5rem; font-size: 1.05rem; }

.play-icon {
  display: inline-block;
  animation: playPulse 2s ease-in-out infinite;
}

@keyframes playPulse { 0%,100%{transform: scale(1)} 50%{transform: scale(1.15)} }

/* ══════════════════════════════
   NAVIGATION
══════════════════════════════ */
#navbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100; padding: 0;
  transition: var(--transition);
}

#navbar.scrolled, body.subpage #navbar {
  background: rgba(3,7,18,0.88);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 4px 40px rgba(0,0,0,0.4), 0 0 60px rgba(0,212,255,0.03);
}

body.subpage { padding-top: 8rem; }

.nav-container {
  max-width: 1280px; margin: 0 auto;
  padding: 1.1rem 2rem;
  display: flex; align-items: center; gap: 1.5rem;
}

.nav-logo {
  display: flex; align-items: center; gap: 0.7rem;
  flex-shrink: 0;
}

.logo-svg {
  width: 42px; height: 42px;
  filter: drop-shadow(0 0 8px rgba(0,212,255,0.5));
  transition: filter 0.3s;
}

.nav-logo:hover .logo-svg { filter: drop-shadow(0 0 16px rgba(0,212,255,0.8)); }

.nav-logo span, .footer-logo span {
  font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 700; letter-spacing: 0.1em;
}

.logo-ai { color: var(--cyan); }

.nav-links {
  display: flex; gap: 0.3rem; list-style: none; margin-left: auto;
}

.nav-link {
  display: block;
  font-family: var(--font-ui); font-size: 0.88rem;
  font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  position: relative; transition: color 0.3s;
}

.nav-link::after {
  content: ''; position: absolute;
  bottom: 2px; left: 50%; right: 50%;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan), var(--green));
  transition: left 0.3s, right 0.3s;
}

.nav-link:hover, .nav-link.active { color: var(--cyan); }
.nav-link:hover::after, .nav-link.active::after { left: 0.8rem; right: 0.8rem; }

.nav-cta {
  font-family: var(--font-ui); font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--dark); background: linear-gradient(135deg, var(--cyan), var(--green));
  padding: 0.55rem 1.4rem; border-radius: 6px;
  white-space: nowrap; flex-shrink: 0;
  transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 0 20px rgba(0,212,255,0.3);
}

.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 0 30px rgba(0,212,255,0.5); }

.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 4px; margin-left: auto; }
.ham-line { display: block; width: 22px; height: 2px; background: var(--cyan); border-radius: 2px; transition: all 0.3s; }

.hamburger.open .ham-line:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.hamburger.open .ham-line:nth-child(2) { opacity: 0; }
.hamburger.open .ham-line:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* Mobile nav */
@media (max-width: 1000px) {
  .nav-links {
    position: fixed; top: 0; right: -100%; bottom: 0;
    width: 280px; flex-direction: column; gap: 0;
    background: rgba(8,15,31,0.98); backdrop-filter: blur(24px);
    padding: 5rem 1.5rem 2rem;
    transition: right 0.4s ease; z-index: 99; margin: 0;
    border-left: 1px solid var(--glass-border);
  }
  .nav-links.open { right: 0; }
  .nav-link { font-size: 1.1rem; padding: 1rem 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .nav-cta { display: none; }
  .hamburger { display: flex; }
}

/* ══════════════════════════════
   HERO — Redesigned
══════════════════════════════ */
.hero {
  position: relative; z-index: 2;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: flex-start;
  max-width: 1280px; margin: 0 auto;
  padding: 7rem 2rem 5rem;
  overflow: hidden; /* Bulletproof trap */
  contain: paint; /* Forces any internal fixed elements to stay inside the hero */
}

.hero-content {
  position: relative; z-index: 5;
  max-width: 600px;
  pointer-events: none; /* Allow interaction with robot behind text */
}

/* Ensure buttons remain clickable */
.hero-ctas, .btn, .mbn-item { pointer-events: auto !important; }

.hero-glow {
  position: absolute; top: 50%; left: 50%; width: 200%; height: 200%;
  background: radial-gradient(circle at center, rgba(10,30,80,0.85) 0%, rgba(0,212,255,0.15) 40%, transparent 70%);
  transform: translate(-50%, -50%); z-index: -1; pointer-events: none;
  animation: pulseGlow 4s ease-in-out infinite alternate;
}

@keyframes pulseGlow { 0% { opacity: 0.7; transform: translate(-50%,-50%) scale(0.95); } 100% { opacity: 1; transform: translate(-50%,-50%) scale(1.05); } }

.hero-particles {
  position: absolute; inset: -50%;
  background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px);
  background-size: 24px 24px; opacity: 0.3; z-index: -1; pointer-events: none;
  animation: panBg 20s linear infinite;
  mask-image: radial-gradient(circle at center, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 70%);
}

@keyframes panBg { 0% { background-position: 0 0; } 100% { background-position: 48px 48px; } }

/* Eyebrow pill */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.08em; color: var(--cyan);
  background: rgba(0,212,255,0.07); border: 1px solid rgba(0,212,255,0.2);
  padding: 0.45rem 1rem 0.45rem 0.8rem;
  border-radius: 100px; margin-bottom: 1.8rem;
}

.eyebrow-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 8px var(--green); animation: dotPulse 2.5s ease-in-out infinite;
}

.eyebrow-cursor { color: var(--cyan); animation: blink 1s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes dotPulse { 0%,100%{box-shadow:0 0 6px var(--green)} 50%{box-shadow:0 0 16px var(--green), 0 0 30px rgba(0,255,136,0.4)} }

/* Headline */
.hero-heading {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 7vw, 6.5rem);
  font-weight: 900; letter-spacing: 0.05em;
  line-height: 1; margin-bottom: 1.4rem;
  display: flex; gap: 0.3em; flex-wrap: wrap;
}

.h-word { display: block; }

.h-ai {
  background: linear-gradient(135deg, #00d4ff 0%, #00ff88 60%, #0066ff 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: aiGlow 3s ease-in-out infinite;
}

@keyframes aiGlow {
  0%,100% { filter: drop-shadow(0 0 18px rgba(0,212,255,0.3)); }
  50% { filter: drop-shadow(0 0 35px rgba(0,212,255,0.65)); }
}

.hero-sub {
  font-size: 1.05rem; line-height: 1.8; color: var(--text-2);
  max-width: 500px; margin-bottom: 1.5rem;
}

/* Services strip */
.hero-services-strip {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem;
}

.hs-pill {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-ui); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.04em; color: var(--text-2);
  background: rgba(0,212,255,0.04);
  border: 1px solid rgba(0,212,255,0.12);
  padding: 0.35rem 0.8rem; border-radius: 100px;
  transition: border-color 0.25s, color 0.25s;
}

.hs-pill:hover { border-color: rgba(0,212,255,0.3); color: var(--cyan); }

.hsp-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 6px var(--cyan);
  animation: dotPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
.hsp-dot.green  { background: var(--green);   box-shadow: 0 0 6px var(--green); }
.hsp-dot.wa     { background: var(--wa-green); box-shadow: 0 0 6px var(--wa-green); }
.hsp-dot.purple { background: var(--purple);  box-shadow: 0 0 6px var(--purple); }
.hsp-dot.orange { background: var(--orange);  box-shadow: 0 0 6px var(--orange); }

/* CTAs */
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 3rem; }

/* Stats row */
.hero-stats-row { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.hstat { text-align: center; }
.hstat-num {
  font-family: var(--font-display); font-size: 1.9rem; font-weight: 900;
  background: linear-gradient(135deg, var(--cyan), var(--green));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hstat-sym { font-family: var(--font-display); font-size: 1.2rem; color: var(--cyan); font-weight: 700; }
.hstat span {
  display: block; font-size: 0.68rem; color: var(--text-3);
  letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0.15rem;
}
.hstat-sep { width: 1px; height: 34px; background: linear-gradient(transparent, var(--glass-border), transparent); }

/* ══════════════════════════════
   GLOBAL 3D ROBOT
══════════════════════════════ */
.global-robot-wrap {
  position: absolute; top: 0; left: 0; width: 100%; height: 100vh;
  z-index: 0;
  display: flex; align-items: center; justify-content: center;
  transform: translateX(25%) translateY(0) scale(1.18); /* Shift right for hero */
  will-change: transform, opacity;
  opacity: 0; animation: splineEntrance 1s 0.2s ease forwards;
}

@keyframes splineEntrance { 
  from { opacity: 0; transform: translateX(25%) translateY(30px) scale(1.18); } 
  to { opacity: 1; transform: translateX(25%) translateY(0) scale(1.18); } 
}

spline-viewer::part(logo) { display: none !important; }
spline-viewer::part(watermark) { display: none !important; }

spline-viewer {
  width: 100%; height: 100%;
  position: absolute; inset: 0;
  z-index: 2;
}



.spline-watermark-hider {
  position: absolute; bottom: 15px; right: 15px;
  width: 150px; height: 50px;
  background: var(--bg); /* Match the site background perfectly */
  border-radius: 6px;
  z-index: 9999; pointer-events: none;
}

/* Scroll indicator */
.scroll-indicator {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  font-family: var(--font-ui); font-size: 0.7rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--text-3); z-index: 2;
}

.scroll-track {
  width: 1px; height: 48px;
  background: rgba(0,212,255,0.15); position: relative; border-radius: 1px; overflow: hidden;
}

.scroll-thumb {
  position: absolute; top: 0; left: 0; width: 100%;
  height: 40%; background: linear-gradient(var(--cyan), var(--green));
  border-radius: 1px; animation: scrollThumb 2s ease-in-out infinite;
}

@keyframes scrollThumb { 0%{transform:translateY(0)} 100%{transform:translateY(250%)} }

/* ══════════════════════════════
   ABOUT SECTION (Premium Glass)
══════════════════════════════ */
.premium-glass-layout {
  position: relative; z-index: 2;
  padding: 10rem 0;
  background: radial-gradient(circle at right center, rgba(10,40,120,0.1), transparent 50%);
}

.pg-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 5rem; align-items: center;
}

.pg-mission {
  font-family: var(--font-display); font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 700; line-height: 1.25; margin: 1rem 0 2rem;
}

.pg-right { display: flex; flex-direction: column; gap: 1.5rem; position: relative; }

.pg-card {
  background: rgba(8,15,31,0.95);
  border: 1px solid rgba(0,212,255,0.1); border-radius: 16px;
  padding: 1.8rem; display: flex; gap: 1.2rem;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s;
  position: relative; overflow: hidden;
}

.pg-card.card-1 { margin-left: 2rem; }
.pg-card.card-2 { margin-right: 2rem; }
.pg-card.card-3 { margin-left: 4rem; }

.pg-card:hover { transform: scale(1.03) translateY(-5px); border-color: rgba(0,212,255,0.3); box-shadow: 0 15px 40px rgba(0,0,0,0.5), 0 0 20px rgba(0,212,255,0.1); z-index: 10; }

.pg-icon { font-size: 2rem; flex-shrink: 0; background: rgba(0,212,255,0.08); width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 12px; }
.pg-content strong { display: block; font-size: 1.1rem; margin-bottom: 0.3rem; color: #fff; }
.pg-content p { font-size: 0.9rem; color: var(--text-3); line-height: 1.5; }

.glass-highlight { border: 1px solid rgba(0,212,255,0.25); background: rgba(10,30,80,0.4); }
.pg-glow { position: absolute; top: -50px; right: -50px; width: 150px; height: 150px; background: rgba(0,212,255,0.2); filter: blur(40px); border-radius: 50%; }

/* Mobile Bottom Nav Default Hidden */
.mobile-bottom-nav { display: none; }

.mini-chart { display: flex; align-items: flex-end; gap: 4px; height: 40px; margin-top: 1rem; }
.mc-bar {
  flex: 1; height: var(--h); border-radius: 2px;
  background: linear-gradient(180deg, var(--cyan), rgba(0,212,255,0.2));
  animation: barGrow 1.5s ease-out both;
}

@keyframes barGrow { from{transform:scaleY(0); transform-origin:bottom} to{transform:scaleY(1); transform-origin:bottom} }

/* ══════════════════════════════
   SERVICES SECTION
══════════════════════════════ */
.services-section {
  position: relative; z-index: 2;
  padding: 9rem 0;
}

.services-grid { display: flex; flex-direction: column; gap: 6rem; }

.svc-card {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: center;
}

.svc-card.reverse { }

.svc-demo {
  background: rgba(8,15,31,0.7); border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg); padding: 2rem;
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-card);
  transition: var(--transition);
  order: 0;
}

.svc-card.reverse .svc-demo { order: 2; }
.svc-card.reverse .svc-body { order: 1; }

.svc-demo:hover { border-color: rgba(0,212,255,0.25); box-shadow: 0 24px 64px rgba(0,0,0,0.5), var(--shadow-glow); }

.svc-tag {
  font-family: var(--font-ui); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--cyan);
  margin-bottom: 0.8rem;
}

.svc-body h3 {
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 700;
  letter-spacing: 0.03em; line-height: 1.3; margin-bottom: 1rem;
}

.svc-body p { color: var(--text-2); line-height: 1.8; font-size: 0.95rem; margin-bottom: 1.5rem; }

.svc-features { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 2rem; }
.svc-features li { font-size: 0.9rem; color: var(--text-2); display: flex; gap: 0.5rem; align-items: flex-start; }
.svc-features li::before { display: none; }

.svc-cta {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-ui); font-size: 0.95rem; font-weight: 700;
  letter-spacing: 0.06em; color: var(--cyan);
  border-bottom: 1px solid rgba(0,212,255,0.3);
  padding-bottom: 2px; transition: var(--transition);
}

.svc-cta:hover { color: white; border-color: white; gap: 0.8rem; }

/* ── Browser Mockup ── */
.demo-browser {
  background: var(--dark-3); border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}

.db-header {
  background: rgba(255,255,255,0.04); padding: 0.7rem 1rem;
  display: flex; align-items: center; gap: 0.8rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.db-dots { display: flex; gap: 5px; }
.dbd { width: 10px; height: 10px; border-radius: 50%; }
.dbd.r { background: #ff5f57; }
.dbd.y { background: #ffbd2e; }
.dbd.g { background: #28c941; animation: greenPulse 2s ease-in-out infinite; }

@keyframes greenPulse { 0%,100%{box-shadow:none} 50%{box-shadow:0 0 6px #28c941} }

.db-url {
  flex: 1; background: rgba(255,255,255,0.05); border-radius: 4px;
  padding: 0.25rem 0.8rem; font-family: var(--font-mono); font-size: 0.72rem;
  color: var(--text-3); text-align: center;
}

.db-body { padding: 1rem; }

.db-nav-bar {
  display: flex; align-items: center; gap: 0.8rem;
  margin-bottom: 1rem; padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.db-nav-logo { width: 50px; height: 8px; background: linear-gradient(90deg, var(--cyan), var(--green)); border-radius: 4px; }
.db-nav-links { display: flex; gap: 0.5rem; margin-left: auto; }
.db-nav-links span { width: 30px; height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; }

.db-hero-area { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.db-text-lines { flex: 1; display: flex; flex-direction: column; gap: 0.4rem; }

.db-line {
  height: 8px; background: rgba(255,255,255,0.08); border-radius: 4px;
  animation: lineReveal 2s ease-in-out infinite;
}

.db-line.l1 { width: 100%; animation-delay: 0s; }
.db-line.l2 { width: 80%; animation-delay: 0.3s; }
.db-line.l3.short { width: 55%; animation-delay: 0.6s; }

@keyframes lineReveal { 0%,100%{background:rgba(255,255,255,0.06)} 50%{background:rgba(0,212,255,0.15)} }

.db-hero-img {
  width: 80px; height: 60px; border-radius: 6px; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(0,212,255,0.1), rgba(0,102,255,0.1));
  border: 1px solid rgba(0,212,255,0.15);
  animation: imgPulse 3s ease-in-out infinite;
}

@keyframes imgPulse { 0%,100%{border-color:rgba(0,212,255,0.1)} 50%{border-color:rgba(0,212,255,0.3)} }

.db-cards-row { display: flex; gap: 0.5rem; }
.db-mini-card {
  flex: 1; height: 40px; border-radius: 6px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
  animation: cardAnim 2.5s ease-in-out infinite;
}

.db-mini-card:nth-child(1) { animation-delay: 0s; }
.db-mini-card:nth-child(2) { animation-delay: 0.3s; }
.db-mini-card:nth-child(3) { animation-delay: 0.6s; }

@keyframes cardAnim { 0%,100%{border-color:rgba(255,255,255,0.04)} 50%{border-color:rgba(0,212,255,0.2)} }

/* ── Chat Demo ── */
.demo-chat {
  background: var(--dark-3); border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06); font-size: 0.82rem;
}

.dc-header {
  background: rgba(0,212,255,0.08); padding: 0.8rem 1rem;
  display: flex; align-items: center; gap: 0.7rem;
  border-bottom: 1px solid rgba(0,212,255,0.1);
}

.dc-avatar { font-size: 1.6rem; }
.dc-info strong { display: block; font-size: 0.88rem; }
.dc-online { font-size: 0.72rem; color: var(--green); display: flex; align-items: center; gap: 4px; }

.online-dot {
  width: 6px; height: 6px; background: var(--green); border-radius: 50%;
  box-shadow: 0 0 6px var(--green); animation: dotPulse 2s ease-in-out infinite;
}

.dc-messages { padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; min-height: 140px; }

.dc-msg {
  max-width: 80%; padding: 0.5rem 0.8rem; border-radius: 10px;
  font-size: 0.8rem; line-height: 1.4;
  animation: msgAppear 0.3s ease both;
}

@keyframes msgAppear { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }

.dc-msg.bot { background: rgba(0,212,255,0.1); border: 1px solid rgba(0,212,255,0.15); color: var(--text-2); align-self: flex-start; }
.dc-msg.user { background: linear-gradient(135deg, var(--cyan), var(--blue)); color: var(--dark); align-self: flex-end; font-weight: 500; }
.dc-msg.hidden { display: none; }

.dc-typing {
  display: none; align-items: center; gap: 4px; padding: 0.5rem 0.8rem;
  background: rgba(0,212,255,0.08); border-radius: 10px;
  align-self: flex-start; width: 50px;
}

.dc-typing span { width: 5px; height: 5px; background: var(--cyan); border-radius: 50%; animation: typingDot 1.2s ease-in-out infinite; }
.dc-typing span:nth-child(2) { animation-delay: 0.2s; }
.dc-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingDot { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }

.dc-input-row {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.8rem; border-top: 1px solid rgba(255,255,255,0.05);
}

.dc-input {
  flex: 1; padding: 0.4rem 0.7rem; border-radius: 20px;
  background: rgba(255,255,255,0.04); font-size: 0.75rem; color: var(--text-3);
  border: 1px solid rgba(255,255,255,0.06);
}

.dc-send {
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  border: none; color: white; width: 28px; height: 28px; border-radius: 50%;
  font-size: 0.7rem; display: flex; align-items: center; justify-content: center;
}

/* ── WhatsApp Demo ── */
.demo-whatsapp {
  background: #0a1a12; border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(37,211,102,0.1); font-size: 0.82rem;
}

.wa-header {
  background: #0d2419; padding: 0.7rem 1rem;
  display: flex; align-items: center; gap: 0.6rem;
  border-bottom: 1px solid rgba(37,211,102,0.1);
}

.wa-back { font-size: 1rem; color: var(--green); }
.wa-avatar { width: 30px; height: 30px; background: var(--wa-green); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }
.wa-info strong { display: block; font-size: 0.85rem; font-weight: 600; }
.wa-status { font-size: 0.72rem; color: var(--wa-green); display: flex; align-items: center; gap: 4px; }
.wa-icons { margin-left: auto; font-size: 0.8rem; color: var(--text-3); letter-spacing: 0.1em; }

.wa-messages { padding: 0.8rem; display: flex; flex-direction: column; gap: 0.5rem; min-height: 150px; background: rgba(0,0,0,0.2); }

.wa-time-tag { text-align: center; font-size: 0.68rem; color: var(--text-3); margin: 0.2rem 0; background: rgba(0,0,0,0.3); display: inline-block; padding: 0.1rem 0.5rem; border-radius: 4px; align-self: center; }

.wa-msg {
  max-width: 85%; padding: 0.45rem 0.7rem; border-radius: 8px; font-size: 0.78rem; line-height: 1.4;
  animation: msgAppear 0.3s ease both;
}

.wa-in { background: rgba(255,255,255,0.07); align-self: flex-start; border-radius: 0 8px 8px 8px; }
.wa-out { background: #0d3621; border: 1px solid rgba(37,211,102,0.15); align-self: flex-end; border-radius: 8px 8px 0 8px; color: var(--text-2); }
.wa-msg.hidden { display: none; }

.wa-btn-msg {
  margin-top: 0.4rem; padding: 0.3rem 0.6rem; background: rgba(37,211,102,0.15);
  border: 1px solid rgba(37,211,102,0.3); border-radius: 4px;
  font-size: 0.75rem; color: var(--wa-green); text-align: center;
}

.wa-input-row {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.8rem; border-top: 1px solid rgba(37,211,102,0.08);
}

.wa-input {
  flex: 1; padding: 0.4rem 0.7rem; border-radius: 20px;
  background: rgba(255,255,255,0.05); font-size: 0.75rem; color: var(--text-3);
}

.wa-mic { background: var(--wa-green); border: none; color: white; width: 28px; height: 28px; border-radius: 50%; font-size: 0.7rem; display: flex; align-items: center; justify-content: center; }

/* ── Dashboard Demo ── */
.demo-dashboard {
  background: var(--dark-3); border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(0,212,255,0.1); padding: 1.2rem;
}

.dash-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1rem; padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.dash-title { font-size: 0.85rem; font-weight: 600; }
.dash-date { font-size: 0.72rem; color: var(--text-3); }

.dash-metrics { display: flex; gap: 0.6rem; margin-bottom: 1rem; }

.dash-metric {
  flex: 1; padding: 0.6rem; background: rgba(0,212,255,0.04);
  border: 1px solid rgba(0,212,255,0.08); border-radius: 8px;
  text-align: center;
}

.dm-label { display: block; font-size: 0.65rem; color: var(--text-3); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.2rem; }
.dm-val { display: block; font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; }
.dm-val.green { color: var(--green); }
.dm-val.cyan { color: var(--cyan); }
.dm-val.purple { color: var(--purple); }
.dm-change { font-size: 0.65rem; color: var(--green); }

.dash-chart { margin-top: 0.5rem; }
.chart-bars-wrap { display: flex; align-items: flex-end; gap: 6px; height: 80px; }

.chart-bar-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
}

.chart-bar-item span { font-size: 0.6rem; color: var(--text-3); }

.cb {
  width: 100%; height: var(--h);
  background: linear-gradient(180deg, var(--cyan), rgba(0,212,255,0.3));
  border-radius: 3px 3px 0 0; position: relative;
  animation: barRise 1.5s cubic-bezier(0.23,1,0.32,1) both;
  cursor: none; transition: filter 0.2s;
}

.featured-bar .cb {
  background: linear-gradient(180deg, var(--green), rgba(0,255,136,0.3));
}

.cb:hover { filter: brightness(1.3); }

.cb-glow {
  position: absolute; bottom: 0; left: 0; right: 0; height: 4px;
  background: var(--cyan); border-radius: 0 0 3px 3px;
  box-shadow: 0 0 8px var(--cyan), 0 0 16px rgba(0,212,255,0.4);
}

@keyframes barRise { from{transform:scaleY(0); transform-origin:bottom} to{transform:scaleY(1); transform-origin:bottom} }

/* ── Phone Mockup ── */
.demo-phone {
  display: flex; justify-content: center; padding: 0.5rem 0;
}

.dp-frame {
  width: 180px;
  background: var(--dark-4); border-radius: 28px;
  border: 2px solid rgba(255,255,255,0.12);
  overflow: hidden; position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), inset 0 0 20px rgba(0,0,0,0.4);
}

.dp-notch {
  width: 60px; height: 12px; background: var(--dark);
  border-radius: 0 0 10px 10px; margin: 0 auto; position: relative; z-index: 1;
}

.dp-screen { padding: 0.4rem; min-height: 260px; display: flex; flex-direction: column; }

.dp-app-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.3rem 0.3rem 0.6rem; font-family: var(--font-display);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em;
}

.dp-bell { font-size: 0.85rem; }

.dp-greeting {
  font-size: 0.65rem; color: var(--text-2); padding: 0 0.3rem 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.05); margin-bottom: 0.5rem;
}

.dp-cards-scroll { display: flex; flex-direction: column; gap: 0.4rem; flex: 1; overflow: hidden; }

.dp-card {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem; border-radius: 8px; font-size: 0.68rem;
  animation: cardSlide 0.4s ease both;
}

.blue-card { background: rgba(0,102,255,0.2); border: 1px solid rgba(0,102,255,0.3); }
.green-card { background: rgba(0,255,136,0.12); border: 1px solid rgba(0,255,136,0.2); }
.purple-card { background: rgba(139,92,246,0.15); border: 1px solid rgba(139,92,246,0.25); }

@keyframes cardSlide { from{opacity:0; transform:translateX(20px)} to{opacity:1; transform:translateX(0)} }

.dpc-icon { font-size: 1.2rem; }
.dpc-info strong { display: block; font-size: 0.65rem; font-weight: 600; }
.dpc-info span { font-size: 0.6rem; color: var(--text-3); }

.dp-nav-bar {
  display: flex; justify-content: space-around; padding: 0.5rem 0;
  border-top: 1px solid rgba(255,255,255,0.05); margin-top: auto;
}

.dp-nav { font-size: 0.9rem; opacity: 0.5; transition: 0.2s; }
.dp-nav.active { opacity: 1; filter: drop-shadow(0 0 4px var(--cyan)); }
.dp-home-bar { width: 50%; height: 3px; background: rgba(255,255,255,0.3); border-radius: 2px; margin: 4px auto; }

/* ── Terminal Demo ── */
.demo-terminal {
  background: #0a0a0a; border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08); font-family: var(--font-mono);
}

.term-header {
  background: #1a1a1a; padding: 0.6rem 1rem;
  display: flex; align-items: center; gap: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.term-title { font-size: 0.72rem; color: var(--text-3); }
.term-body { padding: 1rem; display: flex; flex-direction: column; gap: 0.3rem; }

.term-line { font-size: 0.75rem; display: flex; gap: 0.5rem; align-items: baseline; opacity: 0; animation: termAppear 0.2s ease forwards; }
.term-line:nth-child(1) { animation-delay: 0.3s; }
.term-line:nth-child(2) { animation-delay: 0.9s; }
.term-line:nth-child(3) { animation-delay: 1.5s; }
.term-line:nth-child(4) { animation-delay: 2.0s; }
.term-line:nth-child(5) { animation-delay: 2.5s; }
.term-line:nth-child(6) { animation-delay: 3.0s; }
.term-line:nth-child(7) { animation-delay: 3.5s; }
.term-line:nth-child(8) { animation-delay: 4.0s; }
.term-line:nth-child(9) { animation-delay: 4.5s; }

@keyframes termAppear { to{opacity:1} }

.term-prompt { color: var(--cyan); font-weight: 700; }
.term-cmd { color: var(--text-2); }
.term-line.success .term-prompt { color: var(--green); }
.term-line.info .term-prompt { color: var(--cyan); }
.term-line.highlight { color: var(--green); font-weight: 600; }
.term-cursor-line { font-size: 0.75rem; display: flex; gap: 0.5rem; }
.term-cursor-blink { color: var(--cyan); animation: blink 1s step-end infinite; }

/* ══════════════════════════════
   SHOWCASE SECTION
══════════════════════════════ */
.showcase-section {
  position: relative; z-index: 2;
  padding: 9rem 0;
  background: linear-gradient(180deg, transparent, rgba(0,212,255,0.02), transparent);
}

.showcase-tabs { max-width: 1100px; margin: 0 auto; }

.tab-nav {
  display: flex; gap: 0; flex-wrap: wrap;
  border: 1px solid var(--glass-border); border-radius: var(--radius);
  padding: 0.4rem; margin-bottom: 2.5rem;
  background: rgba(8,15,31,0.6); backdrop-filter: blur(12px);
  position: relative;
}

.tab-indicator {
  position: absolute; top: 0.4rem; bottom: 0.4rem; left: 0.4rem;
  background: rgba(0,212,255,0.1); border: 1px solid rgba(0,212,255,0.2);
  border-radius: 8px;
  transition: all 0.4s cubic-bezier(0.23,1,0.32,1);
  pointer-events: none;
}

.tab-btn {
  flex: 1; padding: 0.75rem 1rem;
  font-family: var(--font-ui); font-size: 0.88rem; font-weight: 600;
  letter-spacing: 0.05em; color: var(--text-3);
  background: none; border: none;
  border-radius: 8px; cursor: none;
  transition: color 0.3s; position: relative; z-index: 1;
  white-space: nowrap;
}

.tab-btn.active { color: var(--cyan); }
.tab-btn:hover { color: var(--text); }

.tab-panel { display: none; animation: fadeIn 0.4s ease; }
.tab-panel.active { display: block; }

@keyframes fadeIn { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }

.tab-panel-content {
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: 4rem; align-items: center;
}

.tp-info h3 {
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 700;
  letter-spacing: 0.03em; margin-bottom: 1rem;
}

.tp-info p { color: var(--text-2); line-height: 1.8; margin-bottom: 1.5rem; font-size: 0.95rem; }

.tp-stats { display: flex; gap: 1.5rem; margin-bottom: 2rem; flex-wrap: wrap; }

.tp-stat { text-align: center; }
.tp-stat strong { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--cyan); }
.tp-stat span { font-size: 0.75rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.1em; }

/* Full Chat Demo */
.full-chat-demo {
  background: var(--dark-3); border: 1px solid var(--glass-border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card);
}

.fcd-header {
  background: rgba(0,212,255,0.07); padding: 1rem 1.2rem;
  display: flex; align-items: center; gap: 0.8rem;
  border-bottom: 1px solid var(--glass-border);
}

.fcd-avatar { width: 36px; height: 36px; background: linear-gradient(135deg, var(--cyan), var(--blue)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.fcd-header > div strong { display: block; font-size: 0.9rem; }
.online-badge { font-size: 0.72rem; color: var(--green); display: flex; align-items: center; gap: 4px; }
.fcd-close { margin-left: auto; color: var(--text-3); font-size: 0.8rem; cursor: none; }

.fcd-messages {
  padding: 1rem; min-height: 220px; max-height: 280px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 0.6rem;
  scrollbar-width: thin; scrollbar-color: var(--glass-border) transparent;
}

.fcd-msg {
  max-width: 80%; padding: 0.6rem 0.9rem; border-radius: 10px; font-size: 0.85rem; line-height: 1.5;
}

.fcd-msg.bot-msg {
  background: rgba(0,212,255,0.08); border: 1px solid rgba(0,212,255,0.12);
  align-self: flex-start; border-radius: 4px 12px 12px 12px;
}

.fcd-msg.user-msg {
  background: linear-gradient(135deg, var(--cyan), var(--blue)); color: var(--dark);
  font-weight: 500; align-self: flex-end; border-radius: 12px 4px 12px 12px;
}

.fcd-input {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.8rem 1rem; border-top: 1px solid var(--glass-border);
}

.fcd-input input {
  flex: 1; background: rgba(0,212,255,0.04); border: 1px solid rgba(0,212,255,0.1);
  border-radius: 6px; padding: 0.5rem 0.8rem;
  color: var(--text); font-size: 0.85rem; outline: none;
  transition: border-color 0.3s;
}

.fcd-input input:focus { border-color: rgba(0,212,255,0.3); }

#fcd-send-btn {
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  border: none; color: var(--dark); padding: 0.5rem 1rem; border-radius: 6px;
  font-weight: 600; cursor: none; transition: 0.2s;
}

#fcd-send-btn:hover { transform: scale(1.05); }

/* WA Showcase */
.wa-showcase {
  background: #0a1a12; border: 1px solid rgba(37,211,102,0.15);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card);
}

.was-header {
  background: #0d2419; padding: 1rem 1.2rem;
  display: flex; align-items: center; gap: 0.8rem;
  border-bottom: 1px solid rgba(37,211,102,0.1);
}

.was-avatar {
  width: 36px; height: 36px; background: var(--wa-green); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700; color: white;
}

.was-header > div strong { display: block; font-size: 0.9rem; }

.was-msgs {
  padding: 1rem; min-height: 260px; display: flex; flex-direction: column; gap: 0.7rem;
  background: rgba(0,0,0,0.2);
}

.was-msg {
  max-width: 85%; padding: 0.6rem 0.9rem; border-radius: 8px;
  font-size: 0.84rem; line-height: 1.5;
}

.was-msg.in { background: rgba(255,255,255,0.07); align-self: flex-start; border-radius: 0 8px 8px 8px; }
.was-msg.out { background: #0d3621; border: 1px solid rgba(37,211,102,0.15); align-self: flex-end; color: var(--text-2); border-radius: 8px 0 8px 8px; }

/* Full Dashboard */
.full-dashboard {
  background: var(--dark-3); border: 1px solid var(--glass-border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); padding: 1.5rem;
}

.fd-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.2rem; font-size: 0.9rem; font-weight: 600;
}

.fd-live { display: flex; align-items: center; gap: 5px; font-size: 0.75rem; color: var(--green); }

.fd-metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 0.6rem; margin-bottom: 1.5rem; }

.fd-metric {
  background: rgba(0,212,255,0.04); border: 1px solid rgba(0,212,255,0.08);
  border-radius: 8px; padding: 0.7rem; text-align: center;
}

.fd-metric span { display: block; font-size: 0.68rem; color: var(--text-3); margin-bottom: 0.2rem; text-transform: uppercase; letter-spacing: 0.05em; }
.fd-metric strong { display: block; font-family: var(--font-display); font-size: 1rem; font-weight: 700; }
.fd-metric em { font-style: normal; font-size: 0.65rem; color: var(--green); }
.fd-metric .green { color: var(--green); }
.fd-metric .cyan { color: var(--cyan); }
.fd-metric .purple { color: var(--purple); }

.fd-chart-area { }
.fd-chart-label { font-size: 0.72rem; color: var(--text-3); margin-bottom: 0.5rem; }

.fd-line-chart { width: 100%; height: auto; }

.chart-line-path {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: drawLine 2s ease forwards;
}

@keyframes drawLine { to{stroke-dashoffset:0} }

.chart-fill-path { opacity: 0; animation: fillFadeIn 0.5s 1.5s ease forwards; }
@keyframes fillFadeIn { to{opacity:1} }

/* AI Pipeline Viz */
.ai-pipeline-viz {
  display: flex; align-items: center; gap: 0;
  background: var(--dark-3); border: 1px solid var(--glass-border);
  border-radius: var(--radius); padding: 2rem; flex-wrap: wrap; gap: 1rem;
}

.pipeline-step {
  flex: 1; min-width: 100px; text-align: center;
  padding: 1.2rem 0.8rem; border: 1px solid rgba(0,212,255,0.08);
  border-radius: var(--radius-sm); transition: var(--transition); position: relative;
}

.pipeline-step:hover, .ps-active {
  border-color: rgba(0,212,255,0.3);
  background: rgba(0,212,255,0.05);
}

.ps-icon { font-size: 1.8rem; margin-bottom: 0.5rem; }
.pipeline-step strong { display: block; font-size: 0.82rem; margin-bottom: 0.3rem; }
.pipeline-step span { font-size: 0.72rem; color: var(--text-3); line-height: 1.4; }

.ps-pulse {
  position: absolute; top: 8px; right: 8px; width: 8px; height: 8px;
  background: var(--cyan); border-radius: 50%;
  animation: dotPulse 1.5s ease-in-out infinite;
}

.pipeline-arrow {
  font-size: 1.2rem; color: var(--cyan); opacity: 0.4; flex-shrink: 0;
  animation: arrowBounce 1.5s ease-in-out infinite;
}

@keyframes arrowBounce { 0%,100%{transform:translateX(0)} 50%{transform:translateX(4px)} }

/* ══════════════════════════════
   STATS SECTION
══════════════════════════════ */
.stats-section {
  position: relative; z-index: 2;
  padding: 5rem 0;
}

.stats-bg {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,0.03), rgba(0,255,136,0.02), transparent);
  pointer-events: none;
}

.stats-grid {
  display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: 2rem; align-items: center;
}

.stat-block {
  text-align: center; flex: 1; min-width: 150px;
  padding: 2rem 1.5rem;
  background: rgba(13,21,40,0.5); border: 1px solid rgba(0,212,255,0.08);
  border-radius: var(--radius); transition: var(--transition);
}

.stat-block:hover { border-color: rgba(0,212,255,0.2); transform: translateY(-4px); box-shadow: var(--shadow-card), 0 0 20px rgba(0,212,255,0.05); }
.stat-icon { font-size: 2rem; margin-bottom: 0.5rem; }

.stat-number-wrap {
  display: flex; justify-content: center; align-items: baseline; gap: 2px;
  margin-bottom: 0.5rem;
}

.stat-num {
  font-family: var(--font-display); font-size: 2.5rem; font-weight: 900;
  background: linear-gradient(135deg, var(--cyan), var(--green));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.stat-sym { font-family: var(--font-display); font-size: 1.6rem; color: var(--cyan); font-weight: 700; }
.stat-block p { font-size: 0.82rem; color: var(--text-3); line-height: 1.4; }

/* ══════════════════════════════
   TIMELINE SECTION (Process)
══════════════════════════════ */
.timeline-container { position: relative; max-width: 1000px; margin: 4rem auto; padding: 2rem 0; }
.timeline-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; background: rgba(255,255,255,0.05); transform: translateX(-50%); border-radius: 2px; }
.timeline-progress { position: absolute; top: 0; left: 0; width: 100%; height: 50%; background: linear-gradient(180deg, var(--cyan), var(--purple)); box-shadow: 0 0 15px var(--cyan); border-radius: 2px; }
.timeline-item { position: relative; width: 50%; padding: 2rem; margin-bottom: 2rem; }
.timeline-item.left { left: 0; padding-right: 4rem; text-align: right; }
.timeline-item.right { left: 50%; padding-left: 4rem; text-align: left; }
.timeline-dot { position: absolute; top: 3rem; width: 24px; height: 24px; background: var(--dark-1); border: 4px solid var(--cyan); border-radius: 50%; z-index: 2; box-shadow: 0 0 15px rgba(0, 212, 255, 0.6); transition: transform 0.3s; }
.timeline-item:hover .timeline-dot { transform: scale(1.3); background: var(--cyan); }
.timeline-item.left .timeline-dot { right: -12px; }
.timeline-item.right .timeline-dot { left: -12px; }
.timeline-content { padding: 2.5rem; position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.step-num-glow { font-family: var(--font-disp); font-size: 5rem; font-weight: 900; position: absolute; top: -10px; opacity: 0.05; background: linear-gradient(to bottom, #fff, transparent); -webkit-background-clip: text; -webkit-text-fill-color: transparent; pointer-events: none; }
.timeline-item.left .step-num-glow { right: 10px; }
.timeline-item.right .step-num-glow { left: 10px; }
.timeline-content h3 { font-size: 1.5rem; margin-bottom: 1rem; color: var(--cyan); }
.timeline-content p { color: var(--text-2); line-height: 1.7; }
@media (max-width: 768px) {
  .timeline-container { margin: 2rem 0; } .timeline-line { left: 30px; }
  .timeline-item { width: 100%; padding-left: 80px !important; padding-right: 20px !important; text-align: left !important; }
  .timeline-item.left, .timeline-item.right { left: 0; }
  .timeline-item.left .timeline-dot, .timeline-item.right .timeline-dot { left: 18px; right: auto; }
  .timeline-item.left .step-num-glow { right: auto; left: 10px; }
}

/* ══════════════════════════════
   PORTFOLIO SECTION
══════════════════════════════ */
.portfolio-section {
  position: relative; z-index: 2;
  padding: 9rem 0;
}

.portfolio-filters {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  justify-content: center; margin-bottom: 3rem;
}

.pf-btn {
  font-family: var(--font-ui); font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); background: rgba(13,21,40,0.6);
  border: 1px solid rgba(0,212,255,0.08); border-radius: 100px;
  padding: 0.5rem 1.3rem; cursor: none; transition: var(--transition);
}

.pf-btn:hover, .pf-btn.active {
  color: var(--cyan); border-color: rgba(0,212,255,0.3);
  background: rgba(0,212,255,0.06);
}

.portfolio-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.portfolio-item {
  background: rgba(13,21,40,0.7); border: 1px solid rgba(0,212,255,0.07);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: var(--transition); cursor: default;
  /* Ensure items are always visible even if GSAP ScrollTrigger doesn't fire */
  opacity: 1 !important;
  transform: none;
}

.portfolio-item:hover { border-color: rgba(0,212,255,0.2); transform: translateY(-6px) !important; box-shadow: var(--shadow-card), 0 0 30px rgba(0,212,255,0.06); }

.pi-visual {
  background: var(--bg); padding: 1.5rem; min-height: 180px;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}

.pi-visual::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(var(--accent-rgb, 0,212,255),0.05), transparent);
  pointer-events: none;
}

.pi-mockup {
  background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; padding: 0.8rem; width: 100%;
  backdrop-filter: blur(8px);
}

.pim-header { font-size: 0.72rem; font-weight: 600; margin-bottom: 0.7rem; color: var(--text-2); }

.pim-content { display: flex; flex-direction: column; gap: 0.5rem; }

.pim-line { height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; width: 100%; }
.pim-line.short { width: 65%; }

.pim-chat { display: flex; flex-direction: column; gap: 0.3rem; }
.pim-bubble { height: 12px; border-radius: 4px; }
.user-b { background: rgba(0,212,255,0.3); width: 70%; align-self: flex-end; margin-left: auto; }
.bot-b { background: rgba(255,255,255,0.1); width: 80%; }
.user-b.short-b { width: 45%; }

.pim-chart-row { display: flex; align-items: flex-end; gap: 4px; height: 40px; }
.pim-bar { flex: 1; background: rgba(0,255,136,0.4); border-radius: 2px 2px 0 0; }

.pim-wa-msgs { display: flex; flex-direction: column; gap: 0.3rem; }
.pim-wa-in { height: 10px; background: rgba(255,255,255,0.1); border-radius: 2px 6px 6px 6px; width: 70%; }
.pim-wa-out { height: 10px; background: rgba(255,107,53,0.3); border-radius: 6px 2px 6px 6px; width: 80%; margin-left: auto; }
.pim-wa-out.short-m { width: 50%; }
.pim-wa-in.short-m { width: 50%; }

/* Phone mockup mini */
.phone-mockup-mini { display: flex; justify-content: center; }
.pmm-phone { width: 100px; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; overflow: hidden; }
.pmm-screen { padding: 0.4rem; }
.pmm-app-bar { font-size: 0.55rem; font-weight: 700; text-align: center; padding: 0.2rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); margin-bottom: 0.3rem; }
.pmm-content { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.2rem; }
.pmm-line { height: 5px; background: rgba(255,255,255,0.08); border-radius: 3px; }
.pmm-line.short { width: 60%; }
.pmm-msg { height: 10px; background: rgba(0,212,255,0.2); border-radius: 3px; }
.pmm-msg.right { background: rgba(255,255,255,0.1); margin-left: auto; width: 70%; }
.pmm-card-mini { height: 14px; background: rgba(0,212,255,0.1); border: 1px solid rgba(0,212,255,0.15); border-radius: 3px; }

.pim-product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; }
.pim-product { height: 30px; background: rgba(0,255,136,0.1); border: 1px solid rgba(0,255,136,0.15); border-radius: 4px; }

.pi-info { padding: 1.2rem; }

.pi-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.7rem; }

.pi-tag {
  font-family: var(--font-ui); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.2rem 0.5rem; border-radius: 4px;
}

.pi-tag.ai { color: var(--cyan); background: rgba(0,212,255,0.1); }
.pi-tag.web { color: var(--green); background: rgba(0,255,136,0.1); }
.pi-tag.mobile { color: var(--purple); background: rgba(139,92,246,0.1); }
.pi-tag.biz { color: var(--orange); background: rgba(255,107,53,0.1); }

.pi-info h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 700; letter-spacing: 0.03em; margin-bottom: 0.4rem; }
.pi-info p { font-size: 0.82rem; color: var(--text-2); line-height: 1.6; margin-bottom: 0.8rem; }

.pi-meta { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
.pi-meta span { font-size: 0.72rem; color: var(--text-3); font-family: var(--font-mono); }
.pi-link { font-size: 0.78rem; color: var(--cyan); transition: 0.2s; }
.pi-link:hover { color: white; }

/* ══════════════════════════════
   TESTIMONIALS
══════════════════════════════ */
.testimonials-section {
  position: relative; z-index: 2;
  padding: 9rem 0;
  overflow: hidden;
}

.testimonials-track-wrap {
  overflow: hidden; position: relative;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.testimonials-track {
  display: flex; gap: 1.5rem;
  width: max-content;
  animation: scrollTrack 40s linear infinite;
}

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

@keyframes scrollTrack {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.testi-card {
  width: 360px; flex-shrink: 0;
  background: rgba(13,21,40,0.7); border: 1px solid rgba(0,212,255,0.08);
  border-radius: var(--radius); padding: 1.8rem;
  transition: var(--transition);
}

.testi-card:hover { border-color: rgba(0,212,255,0.2); transform: translateY(-4px); }

.featured-tc { border-color: rgba(0,255,136,0.15); background: rgba(0,255,136,0.02); }

.tc-stars { color: #fbbf24; font-size: 1rem; margin-bottom: 1rem; letter-spacing: 0.05em; }
.testi-card > p {
  font-size: 0.9rem; line-height: 1.75; color: var(--text-2); margin-bottom: 1.5rem; font-style: italic;
}



.tc-author { display: flex; align-items: center; gap: 0.8rem; }
.tc-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700; color: white; flex-shrink: 0;
}

.tc-author strong { display: block; font-size: 0.88rem; font-weight: 600; }
.tc-author span { font-size: 0.75rem; color: var(--text-3); }

/* ══════════════════════════════
   PRICING SECTION
══════════════════════════════ */
.pricing-section {
  position: relative; z-index: 2;
  padding: 9rem 0;
}

.pricing-toggle {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; margin-bottom: 3.5rem;
}

.pt-label {
  font-family: var(--font-ui); font-size: 0.9rem; font-weight: 600;
  color: var(--text-2); letter-spacing: 0.05em;
}

.pt-save {
  font-size: 0.7rem; color: var(--green);
  background: rgba(0,255,136,0.1); border: 1px solid rgba(0,255,136,0.2);
  padding: 0.1rem 0.4rem; border-radius: 100px; margin-left: 0.3rem;
}

.pt-switch {
  width: 48px; height: 26px; background: rgba(0,212,255,0.15);
  border: 1px solid rgba(0,212,255,0.3); border-radius: 100px;
  position: relative; cursor: none; transition: 0.3s;
}

.pt-switch.on { background: rgba(0,212,255,0.25); }

.pt-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; background: var(--cyan); border-radius: 50%;
  transition: transform 0.3s;
  box-shadow: 0 0 8px rgba(0,212,255,0.5);
}

.pt-switch.on .pt-thumb { transform: translateX(22px); }

.pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; align-items: start; }

.pricing-card {
  background: rgba(13,21,40,0.7); border: 1px solid rgba(0,212,255,0.08);
  border-radius: var(--radius-lg); padding: 2rem;
  transition: var(--transition); position: relative; overflow: hidden;
}

.pricing-card:hover { border-color: rgba(0,212,255,0.2); transform: translateY(-4px); box-shadow: var(--shadow-card); }

.featured-pc {
  border-color: rgba(0,212,255,0.25) !important;
  background: rgba(0,212,255,0.04);
  box-shadow: var(--shadow-card), 0 0 40px rgba(0,212,255,0.08);
  transform: scale(1.02);
}

.featured-pc:hover { transform: scale(1.02) translateY(-4px) !important; }

.pc-popular {
  position: absolute; top: -1px; right: 1.5rem;
  font-family: var(--font-ui); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: linear-gradient(135deg, var(--cyan), var(--green));
  color: var(--dark); padding: 0.3rem 0.8rem; border-radius: 0 0 8px 8px;
}

.pc-badge {
  font-family: var(--font-ui); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--cyan);
  margin-bottom: 1rem;
}

.pc-price {
  display: flex; align-items: baseline; gap: 0.2rem; margin-bottom: 1rem;
}

.pc-currency { font-family: var(--font-display); font-size: 1.5rem; color: var(--text-2); }

.pc-amount {
  font-family: var(--font-display); font-size: 2.5rem; font-weight: 900;
  background: linear-gradient(135deg, var(--cyan), var(--green));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.pc-period { font-size: 0.85rem; color: var(--text-3); }
.pc-desc { font-size: 0.85rem; color: var(--text-2); line-height: 1.6; margin-bottom: 1.5rem; }

.pc-features { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 2rem; }
.pc-features li { display: flex; gap: 0.6rem; align-items: center; font-size: 0.85rem; color: var(--text-2); }

.pf-check { color: var(--green); font-size: 0.8rem; flex-shrink: 0; }
.pf-no { color: var(--text-3); font-size: 0.8rem; flex-shrink: 0; }
.pc-features li:has(.pf-no) { color: var(--text-3); }

.pc-cta { display: block; text-align: center; }

/* ══════════════════════════════
   FAQ SECTION
══════════════════════════════ */
.faq-section {
  position: relative; z-index: 2;
  padding: 9rem 0;
  background: linear-gradient(180deg, transparent, rgba(0,212,255,0.02), transparent);
}

.faq-container { max-width: 800px; }
.faq-grid { display: flex; flex-direction: column; gap: 0.8rem; }

.faq-item {
  background: rgba(13,21,40,0.6); border: 1px solid rgba(0,212,255,0.08);
  border-radius: var(--radius-sm); overflow: hidden; transition: border-color 0.3s;
}

.faq-item.open { border-color: rgba(0,212,255,0.2); }

.faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 1.2rem 1.5rem; background: none; border: none; cursor: none;
  color: var(--text); font-family: var(--font-body); font-size: 0.95rem; font-weight: 500;
  text-align: left; gap: 1rem;
}

.faq-q:hover { color: var(--cyan); }

.faq-icon {
  font-size: 1.4rem; font-weight: 300; color: var(--cyan); flex-shrink: 0;
  transition: transform 0.3s;
  line-height: 1;
}

.faq-item.open .faq-icon { transform: rotate(45deg); }

.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.23,1,0.32,1);
}

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

.faq-a p {
  padding: 0 1.5rem 1.2rem;
  font-size: 0.9rem; color: var(--text-2); line-height: 1.75;
}

/* ══════════════════════════════
   CTA SECTION
══════════════════════════════ */
.cta-section {
  position: relative; z-index: 2;
  padding: 8rem 0; overflow: hidden; text-align: center;
}

.cta-bg-particles {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(0,212,255,0.06) 0%, transparent 70%);
  pointer-events: none;
}

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

.cta-text { margin-bottom: 2.5rem; }
.cta-text h2 { font-family: var(--font-display); font-size: clamp(1.8rem,3.5vw,2.8rem); font-weight: 700; letter-spacing: 0.04em; margin-bottom: 1rem; }
.cta-text p { font-size: 1rem; color: var(--text-2); max-width: 540px; margin: 0 auto; line-height: 1.7; }

.cta-buttons { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }

.cta-disclaimer { font-size: 0.8rem; color: var(--text-3); }

/* ══════════════════════════════
   CONTACT SECTION
══════════════════════════════ */
.contact-section {
  position: relative; z-index: 2;
  padding: 9rem 0;
}

.contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 5rem; align-items: start; }

.contact-info-block { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 2.5rem; }

.cib-item {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.3rem;
  background: rgba(13,21,40,0.6); border: 1px solid rgba(0,212,255,0.08);
  border-radius: var(--radius-sm); transition: var(--transition);
  text-decoration: none;
}

.cib-item:hover { border-color: rgba(0,212,255,0.25); transform: translateX(6px); box-shadow: -4px 0 20px rgba(0,212,255,0.06); }

.cib-icon { font-size: 1.4rem; flex-shrink: 0; }
.cib-text span { display: block; font-size: 0.7rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.2rem; }
.cib-text strong { font-size: 0.95rem; color: var(--text); }
.cib-arrow { margin-left: auto; color: var(--cyan); opacity: 0; transition: 0.3s; font-size: 1.1rem; }
.cib-item:hover .cib-arrow { opacity: 1; transform: translateX(4px); }

.contact-promise { }
.contact-promise h3 { font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.06em; color: var(--cyan); margin-bottom: 1rem; }
.promise-items { display: flex; flex-direction: column; gap: 0.7rem; }
.promise-item { display: flex; gap: 0.8rem; align-items: flex-start; }
.promise-item span { font-size: 1.1rem; flex-shrink: 0; }
.promise-item p { font-size: 0.85rem; color: var(--text-2); line-height: 1.5; }

.contact-form {
  background: rgba(13,21,40,0.7); border: 1px solid rgba(0,212,255,0.1);
  border-radius: var(--radius-lg); padding: 2.5rem;
  backdrop-filter: blur(12px);
}

.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cf-group { display: flex; flex-direction: column; gap: 0.5rem; }

.cf-group label {
  font-family: var(--font-ui); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3);
}

.cf-group input, .cf-group select, .cf-group textarea {
  background: rgba(0,212,255,0.03); border: 1px solid rgba(0,212,255,0.1);
  border-radius: var(--radius-sm); padding: 0.8rem 1rem;
  color: var(--text); font-size: 0.9rem; outline: none; transition: all 0.3s;
  resize: none;
}

.cf-group select option { background: var(--dark-3); }
.cf-group input::placeholder, .cf-group textarea::placeholder { color: var(--text-3); }
.cf-group input:focus, .cf-group select:focus, .cf-group textarea:focus {
  border-color: rgba(0,212,255,0.35); background: rgba(0,212,255,0.05);
  box-shadow: 0 0 0 3px rgba(0,212,255,0.06);
}

.cf-error { font-size: 0.75rem; color: #f87171; min-height: 1rem; }

.contact-form { display: flex; flex-direction: column; gap: 1rem; }
.form-submit-btn { justify-content: center; margin-top: 0.5rem; }

.form-success {
  display: flex; align-items: flex-start; gap: 1rem;
  background: rgba(0,255,136,0.06); border: 1px solid rgba(0,255,136,0.2);
  border-radius: var(--radius-sm); padding: 1rem 1.2rem;
  animation: fadeIn 0.4s ease;
}

.form-success span { font-size: 1.5rem; }
.form-success strong { display: block; font-size: 0.9rem; margin-bottom: 0.2rem; }
.form-success p { font-size: 0.82rem; color: var(--text-2); }

/* ══════════════════════════════
   FOOTER
══════════════════════════════ */
.site-footer {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(0,212,255,0.06);
}

.footer-top { padding: 5rem 0 3rem; }

.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 3rem; align-items: start;
}

.footer-logo {
  display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.5rem;
}

.footer-logo span {
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.1em;
}

.footer-tagline { font-family: var(--font-ui); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cyan); margin-bottom: 1rem; }
.footer-desc { font-size: 0.84rem; color: var(--text-3); line-height: 1.7; margin-bottom: 1.5rem; }

.footer-social { display: flex; gap: 0.6rem; }
.fs-link {
  width: 38px; height: 38px; background: rgba(0,212,255,0.06);
  border: 1px solid rgba(0,212,255,0.1); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; transition: var(--transition); text-decoration: none;
}

.fs-link:hover { background: rgba(0,212,255,0.12); border-color: rgba(0,212,255,0.3); transform: translateY(-3px); }

.footer-col h4 {
  font-family: var(--font-ui); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--cyan);
  margin-bottom: 1.2rem;
}

.footer-col ul { display: flex; flex-direction: column; gap: 0.7rem; }
.footer-col ul a { font-size: 0.85rem; color: var(--text-3); transition: color 0.2s; }
.footer-col ul a:hover { color: var(--cyan); }
.footer-contact-list li { font-size: 0.82rem; color: var(--text-3); display: flex; gap: 0.4rem; align-items: center; }
.footer-contact-list li a { color: var(--text-3); transition: 0.2s; }
.footer-contact-list li a:hover { color: var(--cyan); }

.footer-hours { margin-top: 1.5rem; }
.footer-hours p { font-size: 0.82rem; color: var(--text-3); line-height: 1.6; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.04); padding: 1.5rem 0;
}

.footer-bottom-inner {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem;
}

.footer-bottom p { font-size: 0.78rem; color: var(--text-3); }
.footer-bottom a { color: var(--cyan); transition: 0.2s; }
.footer-bottom a:hover { color: white; }

/* Removed GSAP REVEAL CLASSES from CSS to prevent conflicts with gsap.from() */

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media (max-width: 1200px) {
  .about-grid { gap: 4rem; }
  .svc-card { gap: 3rem; }
  .portfolio-grid { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .hero { padding-top: 0; text-align: center; overflow-x: hidden; justify-content: flex-start; min-height: 100vh; position: relative; }
  .global-robot-wrap { 
    height: 100vh; top: 0; bottom: auto; 
    align-items: flex-start; 
    justify-content: center;
    animation: none !important; 
    opacity: 1 !important; 
    transform: translateX(0) scale(1) !important; 
    z-index: 0;
  }
  
  /* ── Mobile Bottom Nav ── */
  #navbar { display: none; } /* Hide old top nav entirely on mobile */
  
  body { padding-bottom: 5rem; } /* Space for bottom nav */
  
  .mobile-bottom-nav {
    display: flex; justify-content: space-around; align-items: center;
    position: fixed; bottom: 0; left: 0; width: 100%; height: 75px;
    background: rgba(8,15,31,0.98);
    border-top: 1px solid rgba(0,212,255,0.15);
    z-index: 9999; padding: 0.5rem 1rem 1rem;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
  }
  
  .mbn-item {
    display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
    color: var(--text-3); text-decoration: none; font-family: var(--font-ui); font-size: 0.65rem;
    transition: color 0.3s, transform 0.3s;
  }
  
  .mbn-item svg { width: 22px; height: 22px; transition: transform 0.3s; }
  
  .mbn-item.active { color: var(--cyan); }
  .mbn-item.active svg { transform: translateY(-3px); filter: drop-shadow(0 0 8px rgba(0,212,255,0.8)); }

  .hero-content { 
    width: 100%; max-width: 100%; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 5; text-align: center;
    margin-top: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    padding: 22vh 1.5rem 5rem; /* Text moved up to chest/waist so buttons fit on screen */
    box-shadow: none;
  }
  .hero-glow {
    background: radial-gradient(circle at top center, rgba(0,212,255,0.2) 0%, transparent 60%);
    top: 0; transform: translate(-50%, 0); height: 100%;
  }
  .hero-heading { justify-content: center; }
  .hero-services-strip { justify-content: center; }
  .hero-ctas { justify-content: center; }
  .hero-stats-row { justify-content: center; }
  .hero-sub { margin: 0 auto 2.5rem; }
  

  /* ── Premium About ── */
  .pg-grid { grid-template-columns: 1fr; gap: 3rem; }
  .pg-mission { font-size: 2rem; text-align: center; }
  .pg-left { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .pg-card { margin: 0 !important; flex-direction: column; text-align: center; align-items: center; }

  .svc-card { grid-template-columns: 1fr; gap: 2rem; }
  .svc-card.reverse .svc-demo { order: 0; }
  .svc-card.reverse .svc-body { order: 1; }

  .tab-panel-content { grid-template-columns: 1fr; }
  .stats-grid { justify-content: center; }
  .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
  .pricing-grid { grid-template-columns: 1fr; }
  .featured-pc { transform: scale(1); }
  .featured-pc:hover { transform: translateY(-4px) !important; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cf-row { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  /* Core Layout & Spacing */
  .container { padding: 0 1.2rem; }
  .about-section, .services-section, .showcase-section, .contact-section, .cta-section { padding: 5rem 0; }
  .section-heading { font-size: clamp(1.8rem, 8vw, 2.5rem); }
  
  /* Hero */
  .hero { padding-top: 6.5rem; gap: 2.5rem; }
  .hero-heading { font-size: clamp(2.5rem, 11vw, 3.8rem); line-height: 1; }
  .hero-sub { font-size: 0.95rem; line-height: 1.6; margin-bottom: 1.8rem; }
  .hero-services-strip { gap: 0.4rem; justify-content: center; }
  .hs-pill { font-size: 0.72rem; padding: 0.3rem 0.6rem; }
  .hero-stats-row { gap: 1rem; justify-content: center; }
  .hstat-num { font-size: 1.6rem; }
  .hstat-sym { font-size: 1rem; }
  .hstat span { font-size: 0.65rem; }
  .hstat-sep { height: 28px; }
  .hero-ctas { flex-direction: column; align-items: stretch; width: 100%; gap: 0.8rem; }
  .hero-ctas a { justify-content: center; width: 100%; }
  .global-robot-wrap { height: 45vh; transform: scale(1.2); }

  /* About */
  .about-badges { align-items: flex-start; text-align: left; }
  .about-badge { flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 1rem; }
  .av-card { padding: 1rem; }
  .av-icon { font-size: 1.6rem; }
  .mini-chart { height: 30px; }

  /* Services */
  .svc-card { gap: 1.5rem; }
  .svc-body h3 { font-size: 1.4rem; line-height: 1.3; }
  .svc-body p { font-size: 0.9rem; }
  .svc-demo { padding: 1rem; border-radius: var(--radius); }
  .db-nav-bar { padding-bottom: 0.4rem; }
  .db-hero-img { width: 60px; height: 50px; }
  
  /* Interactive Showcase */
  .tab-nav { 
    flex-direction: row; overflow-x: auto; white-space: nowrap; 
    padding-bottom: 0.5rem; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid rgba(0,212,255,0.1); gap: 0.5rem;
  }
  .tab-nav::-webkit-scrollbar { display: none; }
  .tab-btn { flex-shrink: 0; font-size: 0.85rem; padding: 0.6rem 1rem; border-radius: 100px; background: rgba(0,212,255,0.04); }
  .tab-btn.active { background: rgba(0,212,255,0.15); border-color: rgba(0,212,255,0.3); }
  .tab-indicator { display: none; }
  .tp-info h3 { font-size: 1.4rem; }
  .tp-info p { font-size: 0.9rem; }
  .tp-stats { flex-direction: column; gap: 0.8rem; }
  .fd-metrics { grid-template-columns: repeat(2,1fr); gap: 0.5rem; }
  .fd-metric { padding: 0.8rem; }
  .ai-pipeline-viz { flex-direction: column; align-items: center; gap: 0.5rem; }
  .pipeline-arrow { transform: rotate(90deg); margin: 0.2rem 0; }

  /* Portfolio & Forms */
  .portfolio-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .contact-form { padding: 1.5rem 1rem; }
  .cf-group label { font-size: 0.7rem; }
  .cib-item { padding: 1rem; flex-direction: column; text-align: center; align-items: center; }
  .cib-arrow { display: none; }
  
  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
  .footer-logo { justify-content: center; }
  .footer-social { justify-content: center; margin-top: 1rem; }
  .footer-col ul, .footer-contact-list { align-items: center; text-align: center; }
  .footer-bottom-inner { flex-direction: column; text-align: center; gap: 0.8rem; }
}


/* ══════════════════════════════
   FUTURISTIC CONTACT PAGE
══════════════════════════════ */
.contact-container-futuristic {
  position: relative; z-index: 2;
  max-width: 1200px; padding: 4rem 2rem; margin: 0 auto;
}
.contact-grid-futuristic {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 4rem; margin-top: 3rem;
}
.console-card {
  background: rgba(3,7,18,0.6); backdrop-filter: blur(20px);
  border: 1px solid rgba(0,212,255,0.15); border-radius: var(--radius-md);
  padding: 2rem; margin-bottom: 1.5rem; display: flex; align-items: flex-start; gap: 1.5rem;
  transition: transform 0.3s, box-shadow 0.3s;
}
.console-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,212,255,0.1); border-color: var(--cyan); }
.cc-icon { font-size: 2rem; background: rgba(0,212,255,0.1); padding: 1rem; border-radius: 50%; color: var(--cyan); }
.cc-content span { font-size: 0.8rem; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em; }
.cc-content strong { display: block; font-size: 1.2rem; color: white; margin: 0.3rem 0; font-family: var(--font-disp); letter-spacing: 0.05em; }
.cc-content p { font-size: 0.9rem; color: #a1a1aa; margin-bottom: 1rem; }
.cc-btn { background: rgba(255,255,255,0.05); color: white; border: 1px solid rgba(255,255,255,0.1); padding: 0.5rem 1rem; border-radius: 4px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; transition: all 0.3s; text-decoration: none; display: inline-block; }
.cc-btn:hover { background: var(--cyan); color: #000; border-color: var(--cyan); }

.console-promise { background: rgba(0,0,0,0.4); border: 1px dashed rgba(255,255,255,0.1); padding: 1.5rem; border-radius: var(--radius-md); margin-top: 2rem; }
.promise-header { color: var(--cyan); font-family: var(--font-disp); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.9rem; margin-bottom: 1rem; }
.console-promise ul { list-style: none; padding: 0; }
.console-promise li { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 0.9rem; margin-bottom: 0.8rem; }
.p-dot { width: 8px; height: 8px; border-radius: 50%; background: #00ff88; box-shadow: 0 0 8px #00ff88; }
.p-dot.cyan { background: #00d4ff; box-shadow: 0 0 8px #00d4ff; }
.p-dot.purple { background: #b000ff; box-shadow: 0 0 8px #b000ff; }

.contact-right-glass {
  background: rgba(3,7,18,0.7); backdrop-filter: blur(30px);
  border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg);
  padding: 3rem; box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  position: relative; overflow: hidden;
}
.contact-right-glass::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); }

.ff-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
.ff-header h3 { font-family: var(--font-disp); color: white; letter-spacing: 0.05em; }
.ff-status { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: #00ff88; text-transform: uppercase; letter-spacing: 0.1em; }
.pulse-dot { width: 6px; height: 6px; background: #00ff88; border-radius: 50%; animation: pulse 1.5s infinite; }

.ff-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
.ff-group { position: relative; }
.ff-group.full-width { margin-bottom: 2rem; }
.futuristic-form input, .futuristic-form select, .futuristic-form textarea {
  width: 100%; background: rgba(0,0,0,0.3); border: none; border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 1.2rem 1rem 0.5rem 1rem; color: white; font-family: var(--font-body); font-size: 1rem;
  transition: all 0.3s;
}
.futuristic-form select { appearance: none; color: #a1a1aa; }
.futuristic-form select option { background: var(--dark-1); color: white; }
.futuristic-form textarea { resize: vertical; min-height: 100px; }
.futuristic-form input:focus, .futuristic-form select:focus, .futuristic-form textarea:focus { outline: none; background: rgba(0,212,255,0.03); }

.futuristic-form label {
  position: absolute; left: 1rem; top: 1rem; font-size: 0.9rem; color: #a1a1aa; transition: all 0.3s; pointer-events: none;
}
.futuristic-form input:focus ~ label, .futuristic-form input:not(:placeholder-shown) ~ label,
.futuristic-form textarea:focus ~ label, .futuristic-form textarea:not(:placeholder-shown) ~ label {
  top: 0.3rem; font-size: 0.7rem; color: var(--cyan);
}
.futuristic-form select ~ label { top: 0.3rem; font-size: 0.7rem; color: var(--cyan); }

.ff-border { position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--cyan); transition: width 0.4s ease; }
.futuristic-form input:focus ~ .ff-border, .futuristic-form select:focus ~ .ff-border, .futuristic-form textarea:focus ~ .ff-border { width: 100%; box-shadow: 0 0 10px var(--cyan); }

.ff-submit { width: 100%; justify-content: center; padding: 1.2rem; font-size: 1.1rem; }

@media (max-width: 900px) {
  .contact-grid-futuristic { grid-template-columns: 1fr; gap: 3rem; }
  .console-card { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.5rem; }
  .cc-btn { width: 100%; text-align: center; }
  .ff-row { grid-template-columns: 1fr; gap: 1.5rem; }
  .contact-right-glass { padding: 2rem 1.5rem; }
}

/* ══════════════════════════════
   VEDASTRA STYLE OVERRIDES
══════════════════════════════ */
.vedastra-style {
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.v-pill {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(60, 32, 163, 0.6);
  background: rgba(60, 32, 163, 0.15);
  padding: 6px 12px;
  border-radius: 30px;
  margin-bottom: 1.5rem;
  backdrop-filter: blur(4px);
}
.v-pill span {
  font-family: var(--font-disp);
  font-size: 0.6rem;
  font-weight: 700;
  color: #7a42ff;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.v-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #7a42ff;
  box-shadow: 0 0 8px #7a42ff;
}

.v-heading {
  font-family: var(--font-disp);
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 900;
  line-height: 1.1;
  color: #ffffff;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}
.v-grow {
  color: #7a42ff;
  font-style: italic;
  display: inline-block;
  padding-right: 4px;
}

.v-sub {
  font-size: 0.85rem;
  color: #9ca3af;
  line-height: 1.6;
  max-width: 320px;
  margin-bottom: 2rem;
}

.v-typing-text {
  font-family: var(--font-disp);
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  font-weight: 800;
  color: #7a42ff;
  text-transform: uppercase;
  margin-bottom: 2.5rem;
  letter-spacing: -0.02em;
}

.v-ctas {
  display: flex; flex-direction: column; align-items: center; gap: 1.5rem; width: 100%; max-width: 350px;
}

.v-btn-primary {
  width: 100%;
  background: #3c20a3;
  color: white;
  border-radius: 50px;
  padding: 1.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: none;
  border: none;
  transition: transform 0.3s, background 0.3s;
  text-decoration: none;
}
.v-btn-primary:hover {
  background: #2c167d; transform: translateY(-2px);
}

.v-see-work {
  color: #6b7280;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  border-bottom: 1px solid #374151;
  padding-bottom: 3px;
  text-decoration: none;
  transition: color 0.3s, border-color 0.3s;
}
.v-see-work:hover {
  color: white; border-color: white;
}

/* Floating Chat Button */
.v-chat-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background: #3c20a3;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 4px 20px rgba(60, 32, 163, 0.4);
  z-index: 10000;
  cursor: pointer;
  transition: transform 0.3s;
}
.v-chat-widget:hover {
  transform: scale(1.1);
}
@media (max-width: 900px) {
  .v-chat-widget { bottom: 90px; } /* Above mobile nav */
}



/* ══════════════════════════════
   SCROLL DRONE & ENHANCED ABOUT
══════════════════════════════ */
#scroll-drone-track {
  position: fixed; top: 0; left: 40px; width: 1px; height: 100vh;
  background: linear-gradient(to bottom, transparent, rgba(60, 32, 163, 0.5), transparent);
  z-index: 9999; pointer-events: none;
}
#scroll-drone {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  transition: top 0.1s ease-out;
}
.drone-core {
  width: 8px; height: 8px; background: #7a42ff; border-radius: 50%;
  box-shadow: 0 0 15px #7a42ff, 0 0 30px #7a42ff;
}
.drone-ring {
  position: absolute; width: 100%; height: 100%; border: 1px dashed var(--cyan); border-radius: 50%;
  animation: droneSpin 4s linear infinite;
}
.drone-trail {
  position: absolute; top: -100px; left: 50%; transform: translateX(-50%);
  width: 2px; height: 100px; background: linear-gradient(to top, #7a42ff, transparent);
  opacity: 0.5;
}
@keyframes droneSpin {
  0% { transform: rotate(0deg) scale(0.8); border-color: #7a42ff; }
  50% { transform: rotate(180deg) scale(1.2); border-color: var(--cyan); }
  100% { transform: rotate(360deg) scale(0.8); border-color: #7a42ff; }
}
@media (max-width: 1200px) {
  #scroll-drone-track { display: none; }
}

/* Enhanced About Section */
.enhanced-about {
  position: relative; overflow: hidden;
  background: radial-gradient(circle at 80% 50%, rgba(60, 32, 163, 0.08) 0%, transparent 60%);
  border-top: 1px solid rgba(122, 66, 255, 0.1);
  border-bottom: 1px solid rgba(122, 66, 255, 0.1);
  padding: 8rem 0;
}
.about-cyber-lines {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background-image: 
    linear-gradient(rgba(122, 66, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122, 66, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px; z-index: -2;
}
.about-orb {
  position: absolute; top: -10%; right: -10%; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(122, 66, 255, 0.15) 0%, transparent 70%);
  border-radius: 50%; filter: blur(50px); z-index: -1;
  animation: floatOrb 10s ease-in-out infinite alternate;
}
.enhanced-about .pg-card {
  background: rgba(10, 15, 30, 0.6);
  border: 1px solid rgba(122, 66, 255, 0.2);
  transform: translateY(0); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.enhanced-about .pg-card:hover {
  transform: translateY(-10px) scale(1.02);
  border-color: #7a42ff;
  box-shadow: 0 15px 40px rgba(122, 66, 255, 0.2);
}
.enhanced-about .pg-icon {
  background: rgba(122, 66, 255, 0.1); color: #7a42ff;
}

/* ══════════════════════════════════════════════
   SHARED VARIABLES & HELPERS
══════════════════════════════════════════════ */
:root { --text-muted: rgba(255,255,255,0.5); }

/* ══════════════════════════════════════════════
   ABOUT SECTION
══════════════════════════════════════════════ */
.about-section {
  padding: 8rem 0; position: relative;
  background: radial-gradient(ellipse at 80% 50%, rgba(60,32,163,0.08) 0%, transparent 65%);
  border-top: 1px solid rgba(122,66,255,0.08);
}
.about-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5rem;
  align-items: start; margin-top: 4rem;
}
.about-intro { font-size: 1.15rem; color: var(--text-2); line-height: 1.8; margin-bottom: 1.5rem; }
.about-text p { color: var(--text-muted); line-height: 1.8; margin-bottom: 1.5rem; }
.about-stats {
  display: flex; gap: 2.5rem; margin-top: 2.5rem; padding: 2rem;
  background: rgba(255,255,255,0.02); border: 1px solid rgba(0,212,255,0.1); border-radius: var(--radius-lg);
}
.ab-stat { display: flex; flex-direction: column; gap:.3rem; text-align:center; flex:1; }
.ab-num { font-family: var(--font-display); font-size: 2.5rem; font-weight: 900; }
.ab-stat span { font-size:.8rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.1em; }
.about-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.ab-card {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(0,212,255,0.1);
  border-radius: var(--radius-lg); padding: 1.8rem; transition: var(--transition);
}
.ab-card:hover {
  border-color: var(--cyan); background: rgba(0,212,255,0.04);
  transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,212,255,0.1);
}
.ab-card-icon { font-size: 2rem; margin-bottom: 1rem; }
.ab-card h4 { font-family: var(--font-ui); font-size: 1.05rem; font-weight: 700; color: var(--text); margin-bottom:.5rem; }
.ab-card p { font-size:.88rem; color:var(--text-muted); line-height:1.6; }
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: 3rem; }
  .about-stats { gap: 1.5rem; }
}
@media (max-width: 500px) {
  .about-cards { grid-template-columns: 1fr; }
  .about-stats { flex-direction: column; align-items: center; }
}

/* ══════════════════════════════════════════════
   TECHNOLOGY SECTION
══════════════════════════════════════════════ */
.technology-section {
  padding: 8rem 0; position: relative;
  background: radial-gradient(ellipse at 20% 60%, rgba(0,212,255,0.06) 0%, transparent 60%);
  border-top: 1px solid rgba(0,212,255,0.08);
}
.tech-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 4rem; }
.tech-card {
  background: rgba(255,255,255,0.025); border: 1px solid rgba(0,212,255,0.12);
  border-radius: var(--radius-lg); padding: 2.5rem; transition: var(--transition);
  display: flex; flex-direction: column; gap: 2rem;
}
.tech-card:hover {
  border-color: var(--cyan); background: rgba(0,212,255,0.04);
  box-shadow: 0 20px 60px rgba(0,212,255,0.1); transform: translateY(-4px);
}
.tech-card-wide { grid-column: 1 / -1; flex-direction: row; gap: 3rem; align-items: flex-start; }

/* Demo wrapper inside tech cards — must not overflow the card */
.tech-card-demo {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  flex-shrink: 0;
}
.tech-card-demo .demo-whatsapp,
.tech-card-demo .demo-chat {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.tech-badge {
  display: inline-block; background: rgba(0,212,255,0.08); border: 1px solid rgba(0,212,255,0.2);
  color: var(--cyan); font-family: var(--font-mono); font-size:.78rem;
  padding:.35rem .9rem; border-radius:100px; margin-bottom:1rem; letter-spacing:.08em;
}
.tech-card-body h3 {
  font-family: var(--font-display); font-size: 1.4rem; font-weight: 700;
  line-height:1.3; margin-bottom:1rem; color: var(--text);
}
.tech-card-body p { color: var(--text-muted); line-height:1.7; font-size:.95rem; margin-bottom:1.5rem; }
.tech-stack-pills { display: flex; flex-wrap: wrap; gap:.6rem; margin: 1.2rem 0 1.8rem; }
.tech-pill {
  background: rgba(122,66,255,0.1); border: 1px solid rgba(122,66,255,0.25);
  color: rgba(255,255,255,0.8); font-family: var(--font-mono); font-size:.75rem;
  padding:.3rem .75rem; border-radius:100px; transition: all 0.3s;
}
.tech-pill:hover { background: rgba(122,66,255,0.25); border-color: rgba(122,66,255,0.6); color:#fff; }
.tech-pipeline {
  display: flex; flex-direction: column; justify-content: center;
  align-items: center; gap:.5rem; padding:1.5rem; min-width:160px;
}
.pipeline-step {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(0,212,255,0.1);
  border-radius: var(--radius); padding:1rem 1.5rem; text-align:center; transition:all 0.4s; width:100%;
}
.pipeline-step.ps-active {
  border-color: var(--cyan); background: rgba(0,212,255,0.08); box-shadow: 0 0 20px rgba(0,212,255,0.2);
}
.ps-icon { font-size:1.6rem; margin-bottom:.3rem; }
.ps-label { font-size:.78rem; font-family:var(--font-ui); letter-spacing:.06em; color:var(--text-2); }
.ps-arrow { color:var(--cyan); font-size:1.2rem; transform:rotate(90deg); opacity:.6; }
@media (max-width: 900px) {
  .tech-cards-grid { grid-template-columns: 1fr; }
  .tech-card { padding: 1.5rem; }
  .tech-card-wide { flex-direction: column; }
  .tech-pipeline { flex-direction: row; flex-wrap: wrap; min-width: unset; width: 100%; justify-content: center; }
  .ps-arrow { transform: rotate(0deg); }
}
@media (max-width: 480px) {
  .tech-card { padding: 1.2rem; gap: 1.2rem; }
  .tech-card-body h3 { font-size: 1.1rem; }
  .tech-pipeline { gap: .3rem; padding: .8rem; }
  .pipeline-step { padding: .6rem .8rem; }
  .ps-icon { font-size: 1.2rem; }
}


/* ══════════════════════════════════════════════
   PORTFOLIO SECTION
══════════════════════════════════════════════ */
.portfolio-section {
  padding: 8rem 0; position: relative;
  border-top: 1px solid rgba(122,66,255,0.08);
  background: radial-gradient(ellipse at 70% 40%, rgba(122,66,255,0.07) 0%, transparent 60%);
}
.portfolio-filters { display: flex; gap:.75rem; flex-wrap:wrap; justify-content:center; margin: 3rem 0 3.5rem; }
.pf-btn {
  background: transparent; border: 1px solid rgba(255,255,255,0.12); color: var(--text-muted);
  padding:.55rem 1.4rem; border-radius:100px; font-size:.85rem; cursor:pointer; transition:all 0.3s;
}
.pf-btn:hover, .pf-btn.active {
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  border-color: transparent; color:#fff; box-shadow: 0 4px 20px rgba(0,212,255,0.25);
}
.portfolio-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
/* portfolio-item base rule is above — kept for specificity; hover override: */
.portfolio-section .portfolio-item {
  background: rgba(13,21,40,0.8); border: 1px solid rgba(0,212,255,0.1);
  border-radius: var(--radius-lg); overflow: hidden; transition: var(--transition);
  opacity: 1 !important;
}
.portfolio-section .portfolio-item:hover {
  border-color: rgba(0,212,255,0.35); transform: translateY(-6px) !important; box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.pi-visual {
  height: 200px; display: flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.pi-info { padding: 1.8rem; }
.pi-tag {
  display:inline-block; font-size:.75rem; font-family:var(--font-mono); color:var(--cyan);
  background:rgba(0,212,255,0.08); border:1px solid rgba(0,212,255,0.18);
  padding:.25rem .75rem; border-radius:100px; margin-bottom:.9rem; letter-spacing:.08em;
}
.pi-info h4 { font-family:var(--font-ui); font-size:1.1rem; font-weight:700; margin-bottom:.6rem; color:var(--text); }
.pi-info p { font-size:.87rem; color:var(--text-muted); line-height:1.6; margin-bottom:1rem; }
.pi-link { font-family:var(--font-ui); font-size:.88rem; color:var(--cyan); letter-spacing:.05em; transition:all 0.3s; }
.pi-link:hover { color:#fff; letter-spacing:.1em; }
.pi-mockup { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1.5rem; }
.browser-pi { gap:.5rem; }
.pi-browser-bar {
  display:flex; align-items:center; gap:.4rem; background:rgba(255,255,255,0.06);
  border-radius:8px 8px 0 0; padding:.5rem 1rem; width:100%;
}
.pi-dot { width:8px; height:8px; border-radius:50%; }
.pi-dot.r { background:#ff5f57; } .pi-dot.y { background:#febc2e; } .pi-dot.g { background:#28c840; }
.pi-url-bar { flex:1; height:6px; border-radius:3px; background:rgba(255,255,255,0.1); margin-left:.5rem; }
.pi-browser-body {
  background:rgba(255,255,255,0.04); border-radius:0 0 8px 8px; padding:1rem; width:100%; flex:1;
}
.pi-content-lines, .pi-hero-mock { display:flex; flex-direction:column; gap:.5rem; }
.pi-content-lines div, .pi-hero-mock div { height:8px; background:rgba(255,255,255,0.15); border-radius:4px; width:100%; }
.phone-pi { gap:.5rem; align-items:center; }
.pi-phone-screen {
  background:rgba(0,0,0,0.5); border:1px solid rgba(255,255,255,0.1); border-radius:12px;
  padding:1rem; min-width:120px; display:flex; flex-direction:column; gap:.5rem;
}
.pi-app-header { font-size:.75rem; color:var(--text-2); font-weight:700; }
.pi-app-card, .pi-wa-msg {
  background:rgba(255,255,255,0.06); border-radius:8px; padding:.4rem .8rem; font-size:.7rem; color:var(--text-muted);
}
.pi-wa-out { background:rgba(37,211,102,0.12); color:#25d366; }
.dashboard-pi { padding:1rem; width:100%; }
.pi-dash-row { display:flex; gap:.5rem; margin-bottom:.75rem; }
.pi-dash-card {
  flex:1; background:rgba(255,255,255,0.06); border-radius:8px;
  padding:.5rem .8rem; font-size:.7rem; color:var(--text-muted); text-align:center;
}
.pi-dash-bar { height:6px; background:rgba(255,255,255,0.06); border-radius:3px; margin-bottom:.5rem; overflow:hidden; }
.pi-dash-bar div { height:100%; background:linear-gradient(90deg, var(--cyan), var(--blue)); border-radius:3px; }
@media (max-width: 1024px) { .portfolio-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .portfolio-grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════
   TESTIMONIALS SECTION
══════════════════════════════════════════════ */
.testimonials-section {
  padding: 8rem 0; position: relative;
  border-top: 1px solid rgba(0,212,255,0.08);
  background: radial-gradient(ellipse at 30% 70%, rgba(0,102,255,0.07) 0%, transparent 60%);
}
.testimonials-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:2rem; margin-top:4rem; }
.testi-card {
  background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-lg); padding:2.2rem;
  display:flex; flex-direction:column; gap:1.2rem; transition:var(--transition);
  position:relative; overflow:hidden;
}
.testi-card::before {
  content:'"'; position:absolute; top:1rem; right:1.5rem;
  font-size:5rem; line-height:1; color:rgba(0,212,255,0.06);
  font-family:Georgia,serif; font-weight:900; pointer-events:none;
}
.testi-card:hover {
  border-color: rgba(0,212,255,0.25); background: rgba(0,212,255,0.04);
  transform: translateY(-5px); box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}
.testi-stars { color:#fbbf24; font-size:1rem; letter-spacing:.1em; }
.testi-quote { font-size:.92rem; line-height:1.75; color:var(--text-2); flex:1; font-style:italic; }
.testi-author {
  display:flex; align-items:center; gap:1rem;
  padding-top:1rem; border-top:1px solid rgba(255,255,255,0.06);
}
.testi-avatar {
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg, var(--cyan), var(--blue));
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; font-weight:700; color:#fff; flex-shrink:0; font-family:var(--font-display);
}
.testi-author strong { display:block; font-size:.9rem; color:var(--text); margin-bottom:.2rem; }
.testi-author span { font-size:.78rem; color:var(--text-muted); }
@media (max-width: 1024px) { .testimonials-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .testimonials-grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════
   CONTACT SECTION
══════════════════════════════════════════════ */
.contact-section {
  padding: 8rem 0; position: relative;
  border-top: 1px solid rgba(122,66,255,0.08);
  background: radial-gradient(ellipse at 60% 50%, rgba(122,66,255,0.08) 0%, transparent 65%);
}
.contact-grid {
  display:grid; grid-template-columns: 360px 1fr; gap:4rem; margin-top:4rem; align-items:start;
}
.contact-info { display:flex; flex-direction:column; gap:1.8rem; }
.ci-item { display:flex; gap:1.2rem; align-items:flex-start; }
.ci-icon {
  font-size:1.5rem; width:48px; height:48px;
  background:rgba(0,212,255,0.06); border:1px solid rgba(0,212,255,0.15);
  border-radius:var(--radius); display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ci-item h4 {
  font-family:var(--font-ui); font-size:.85rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:.3rem;
}
.ci-item a { color:var(--text-2); font-size:.95rem; transition:color 0.3s; display:block; }
.ci-item a:hover { color:var(--cyan); }
.contact-form {
  background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.07);
  border-radius:var(--radius-lg); padding:2.8rem;
  display:flex; flex-direction:column; gap:1.5rem;
}
.cf-row { display:grid; grid-template-columns: 1fr 1fr; gap:1.5rem; }
.cf-field { display:flex; flex-direction:column; gap:.5rem; }
.cf-field label {
  font-size:.82rem; font-family:var(--font-ui); font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted);
}
.cf-field input, .cf-field select, .cf-field textarea {
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1);
  border-radius:var(--radius); padding:.85rem 1.1rem; color:var(--text); font-size:.95rem; outline:none;
  transition:border-color 0.3s, box-shadow 0.3s;
}
.cf-field input::placeholder, .cf-field textarea::placeholder { color:rgba(255,255,255,0.25); }
.cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus {
  border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,212,255,0.1);
}
.cf-field select {
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 7L11 1' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center;
}
.cf-field select option { background:#1a0f3a; }
.cf-field textarea { resize:vertical; min-height:130px; }
.cf-error { font-size:.78rem; color:#ff6b6b; min-height:1rem; }
.cf-submit {
  background:linear-gradient(135deg, var(--cyan), var(--blue));
  color:#fff; border:none; border-radius:var(--radius);
  padding:1rem 2rem; font-size:1rem; font-weight:700; font-family:var(--font-ui);
  letter-spacing:.08em; cursor:pointer; display:flex; align-items:center; justify-content:center;
  gap:.7rem; transition:all 0.3s; box-shadow:0 4px 20px rgba(0,212,255,0.3);
}
.cf-submit:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(0,212,255,0.4); }
.cf-submit:disabled { opacity:.65; cursor:not-allowed; transform:none; }
@media (max-width: 1024px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .cf-row { grid-template-columns: 1fr; }
  .contact-form { padding:1.8rem; }
}