/* ============================================================
   THEME: Default Glassmorphic — Neo Hologram / Prism Void
   UI/UX Pro Max Glassmorphism Design System
   Features: Deep void obsidian with multi-point chromatic aurora
   (Fuchsia Orchid #D946EF, Laser Cyan #00F5FF, Solar Amber #FBBF24),
   translucent glass cards with iridescent specular bevels.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;1,400&family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  --primary:        #D946EF;
  --primary-rgb:    217, 70, 239;
  --primary2:       #EC4899;
  --secondary:      #00F5FF;
  --secondary-rgb:  0, 245, 255;
  --accent:         #FBBF24;
  --accent-rgb:     251, 191, 36;
  --accent2:        #F59E0B;
  --bg:             #030712;
  --bg2:            #0B0F19;
  --bg3:            #111827;
  --text:           #F8FAFC;
  --text-rgb:       248, 250, 252;
  --muted:          #94A3B8;
  --muted2:         #64748B;
  --card:           rgba(255, 255, 255, 0.06);
  --card-solid:     #0F172A;
  --border:         rgba(255, 255, 255, 0.15);
  --border-light:   rgba(217, 70, 239, 0.4);
  --glow:           0 0 35px rgba(217, 70, 239, 0.35);
  --glow-cyan:      0 0 35px rgba(0, 245, 255, 0.4);
  --glow-gold:      0 0 35px rgba(251, 191, 36, 0.4);
  --shadow-glass:   0 16px 40px 0 rgba(0, 0, 0, 0.55), inset 0 1px 1px 0 rgba(255, 255, 255, 0.22);
  --shadow-glass-hover: 0 24px 55px 0 rgba(217, 70, 239, 0.25), 0 16px 36px 0 rgba(0, 0, 0, 0.6), inset 0 1px 2px 0 rgba(255, 255, 255, 0.4);
  --shadow-3d-sm:   0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  --shadow-3d-md:   0 16px 40px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.28);
  --shadow-3d-lg:   0 26px 60px rgba(0, 0, 0, 0.65), inset 0 1px 2px rgba(255, 255, 255, 0.35);
  --fh:             'Playfair Display', serif;
  --fb:             'Outfit', sans-serif;
  --r:              20px;
}

/* Base Body with Chromatic Hologram Aurora Mesh */
body {
  background: var(--bg);
  background-image: 
    radial-gradient(circle at 15% 15%, rgba(217, 70, 239, 0.24) 0%, transparent 45%),
    radial-gradient(circle at 85% 20%, rgba(0, 245, 255, 0.20) 0%, transparent 45%),
    radial-gradient(circle at 50% 60%, rgba(251, 191, 36, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 80% 85%, rgba(236, 72, 153, 0.18) 0%, transparent 45%);
  background-attachment: fixed;
  color: var(--text);
}

::-webkit-scrollbar-track { background: #030712; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--primary), var(--secondary));
  border-radius: 4px;
}

#cvs { opacity: 0.35; }
.orn { color: var(--primary); opacity: 0.12; }
.scroll-line { background: linear-gradient(180deg, var(--primary), var(--secondary), transparent); }
.sdot { background: var(--secondary); box-shadow: 0 0 14px var(--secondary); }

/* Typography & Headings */
.tag { color: var(--secondary); font-weight: 700; letter-spacing: 3.5px; text-shadow: 0 0 14px rgba(0, 245, 255, 0.6); }
.h2 {
  background: linear-gradient(135deg, #FFFFFF 20%, var(--primary) 65%, var(--secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 4px 24px rgba(217, 70, 239, 0.25);
}
.bar {
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  box-shadow: 0 0 16px rgba(217, 70, 239, 0.7);
}
.lead { color: var(--muted); }

/* Announcements Bar */
.announ-bar {
  background: rgba(11, 15, 25, 0.85) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border) !important;
  color: #F8FAFC;
}
.announ-bar-label {
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  color: #FFFFFF;
  box-shadow: 0 0 14px rgba(217, 70, 239, 0.5);
}
.announ-item-badge {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--accent);
}
.announ-item-link { color: #E2E8F0; }
.announ-item-link:hover { color: #FFFFFF; text-shadow: 0 0 10px rgba(255, 255, 255, 0.6); }

/* Navbar */
.nav {
  background: rgba(11, 15, 25, 0.75) !important;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
}
.nav-links a { color: var(--text); }
.nav-links a:hover { color: var(--secondary); text-shadow: 0 0 12px rgba(0, 245, 255, 0.7); }
.nav-links a::after { background: linear-gradient(90deg, var(--primary), var(--secondary)); }

/* Hero Section */
.hero { background: transparent; }
.hero-badge {
  background: rgba(217, 70, 239, 0.12) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(217, 70, 239, 0.4) !important;
  color: #F472B6 !important;
  box-shadow: 0 4px 18px rgba(217, 70, 239, 0.25);
}
.hero-title { color: #FFFFFF; }
.hero-title .t1 { color: #FFFFFF; }
.hero-title .t2 {
  background: linear-gradient(135deg, #FFFFFF 10%, var(--primary) 50%, var(--secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-sub { color: var(--muted); }
.hero-sub em { color: var(--secondary); text-shadow: 0 0 10px rgba(0, 245, 255, 0.5); }
.hero-desc { color: var(--muted); }

.hero-float {
  background: rgba(11, 15, 25, 0.8) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border-light) !important;
  box-shadow: var(--shadow-glass);
}
.hero-img-frame::before {
  background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
  box-shadow: 0 0 35px rgba(217, 70, 239, 0.4);
}
.hero-img-inner {
  background: rgba(11, 15, 25, 0.95);
}

/* Glassmorphic Cyber Buttons */
.btn {
  border-radius: 50px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-primary, .btn-purple {
  background: linear-gradient(135deg, rgba(217, 70, 239, 0.9), rgba(236, 72, 153, 0.95)) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 8px 24px rgba(217, 70, 239, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.35) !important;
  color: #FFFFFF !important;
}
.btn-primary:hover, .btn-purple:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 34px rgba(217, 70, 239, 0.65), inset 0 1px 2px rgba(255, 255, 255, 0.5) !important;
}
.btn-gold {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.95), rgba(245, 158, 11, 0.95)) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 8px 24px rgba(251, 191, 36, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.45) !important;
  color: #030712 !important;
  font-weight: 700 !important;
}
.btn-gold:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 34px rgba(251, 191, 36, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6) !important;
}
.btn-ghost, .btn-outline {
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
}
.btn-ghost:hover, .btn-outline:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: var(--secondary) !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 22px rgba(0, 245, 255, 0.4) !important;
}

/* Glassmorphic Core Cards */
.svc-card,
.why-feat,
.why-item,
.testi-card,
.pkg-card,
.trust-stat,
.cform,
.cinfo,
.faq-item,
.rev-card,
.cert-card,
.jt-content,
.announ-card,
.modal-box {
  background: var(--card) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-glass) !important;
  border-radius: var(--r);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--text);
}

.svc-card:hover,
.why-feat:hover,
.why-item:hover,
.testi-card:hover,
.pkg-card:hover,
.trust-stat:hover,
.cert-card:hover,
.rev-card:hover,
.jt-content:hover,
.announ-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.11) !important;
  border-color: var(--border-light) !important;
  box-shadow: var(--shadow-glass-hover) !important;
}

.jt-title { color: #FFFFFF !important; font-weight: 600; }
.jt-desc { color: var(--muted) !important; }
.why-feat::before { display: none !important; }
.why-feat-glow { display: none !important; }
.why-feat-title { color: #FFFFFF !important; font-weight: 600; }
.why-feat-sub { color: var(--muted) !important; }
.why-img-frame {
  background: var(--card) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-glass) !important;
}
.why-badge {
  background: rgba(11, 15, 25, 0.85) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-light) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}
.why-badge span { color: #FFFFFF !important; font-weight: 700; }
.why-badge i { color: var(--accent) !important; }

/* Icon Boxes */
.svc-icon,
.why-feat-icon,
.ts-icon,
.cert-icon,
.c-icon,
.wi {
  background: linear-gradient(135deg, rgba(217, 70, 239, 0.3), rgba(0, 245, 255, 0.2)) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
  color: #FFFFFF !important;
  border-radius: 14px;
}
.svc-icon i,
.why-feat-icon i,
.ts-icon i,
.cert-icon i,
.c-icon i {
  color: #FFFFFF !important;
  filter: drop-shadow(0 0 8px rgba(217, 70, 239, 0.7));
}

.svc-card h3 { color: #FFFFFF; font-weight: 700; }
.svc-card p { color: var(--muted); }
.svc-link { color: var(--secondary); font-weight: 600; }
.svc-link:hover { color: #FFFFFF; text-shadow: 0 0 12px var(--secondary); }

/* Pricing Packages */
.pkg-card.featured {
  background: rgba(217, 70, 239, 0.12) !important;
  border: 1.5px solid rgba(217, 70, 239, 0.5) !important;
  box-shadow: 0 20px 48px rgba(217, 70, 239, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.35) !important;
}
.pkg-badge {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #030712;
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.6);
}
.pkg-price { color: #FFFFFF; }
.pkg-price span { color: var(--muted); }
.pkg-feats li { color: var(--text); border-bottom-color: rgba(255, 255, 255, 0.08); }
.pkg-feats li i { color: var(--secondary); }

/* Testimonials */
.testi-card::before { color: rgba(217, 70, 239, 0.35); }
.testi-name { color: #FFFFFF; }
.testi-role { color: var(--muted); }
.stars { color: var(--accent); }
.testi-av {
  border: 2px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 18px rgba(217, 70, 239, 0.35);
}

/* FAQ Items */
.faq-item {
  margin-bottom: 12px;
  overflow: hidden;
}
.faq-q { color: #FFFFFF; font-weight: 600; }
.faq-q i { color: var(--secondary); }
.faq-a { color: var(--muted); border-top-color: rgba(255, 255, 255, 0.08); }
.faq-item.open {
  border-color: rgba(217, 70, 239, 0.5) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Form Controls in Glass */
.form-group input,
.form-group textarea,
.form-group select,
.cform input,
.cform textarea,
.cform select {
  background: rgba(3, 7, 18, 0.65) !important;
  border: 1px solid var(--border) !important;
  color: #FFFFFF !important;
  border-radius: 10px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus,
.cform input:focus,
.cform textarea:focus,
.cform select:focus {
  border-color: var(--secondary) !important;
  box-shadow: 0 0 18px rgba(0, 245, 255, 0.4), inset 0 1px 3px rgba(0, 0, 0, 0.5) !important;
  outline: none;
}
.form-group label, .cform label { color: var(--text); }

/* Lead Magnet Glass Container */
.lm-section {
  background: rgba(11, 15, 25, 0.75) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.lm-left h2 { color: #FFFFFF !important; }
.lm-left p { color: var(--muted) !important; }
.lm-perk { color: var(--text) !important; }
.lm-perk i { color: var(--secondary) !important; }
.lm-right {
  background: var(--card) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-light) !important;
  box-shadow: var(--shadow-glass) !important;
}
.lm-right h3 { color: #FFFFFF !important; }
.lm-field label { color: var(--text) !important; }
.lm-field input {
  background: rgba(3, 7, 18, 0.75) !important;
  border: 1px solid var(--border) !important;
  color: #FFFFFF !important;
}

/* Floating Action Buttons */
.fab-call, .fab-wa, .back-top {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55) !important;
}

/* Footer */
.footer {
  background: rgba(3, 7, 18, 0.98) !important;
  border-top: 1px solid var(--border) !important;
}
.ft-col h4 { color: #FFFFFF; }
.ft-col p, .ft-col li a { color: var(--muted); }
.ft-col li a:hover { color: var(--secondary); }
.ft-social a {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
}
.ft-social a:hover {
  background: var(--primary);
  box-shadow: 0 0 18px var(--primary);
}
.ft-bottom { border-top-color: rgba(255, 255, 255, 0.08); color: var(--muted2); }

/* Clients Marquee Styling for Theme */
.clients-strip { background: var(--bg2) !important; border-color: var(--border) !important; }
.clients-heading { color: var(--muted) !important; }
.client-logo-text { color: var(--text) !important; border-color: var(--border) !important; background: var(--card) !important; }
.client-logo-item:hover .client-logo-text { color: var(--primary) !important; border-color: var(--primary) !important; background: var(--card-solid, #ffffff) !important; }
.client-logo-img { filter: grayscale(100%) opacity(0.85); }
.client-logo-item:hover .client-logo-img { filter: none !important; opacity: 1 !important; }