/* ============================================================
   THEME: Liquid Glassmorphism — Fluid Iridescent Aqua & Neon Aura
   UI/UX Pro Max Liquid Glass Design System
   Features: Deep oceanic obsidian void with fluid iridescent auroras
   (Electric Liquid Cyan #06B6D4, Radiant Purple #8B5CF6, Neon Coral #F43F5E),
   ultra-deep multi-specular liquid glass cards (blur 28px + 220% saturation),
   water-droplet pill badges and luminous caustic gradients.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,500;0,600;0,700;0,800;1,400&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --primary:        #06B6D4;
  --primary-rgb:    6, 182, 212;
  --primary2:       #3B82F6;
  --secondary:      #8B5CF6;
  --secondary-rgb:  139, 92, 246;
  --accent:         #F43F5E;
  --accent-rgb:     244, 63, 94;
  --accent2:        #FB7185;
  --bg:             #050816;
  --bg2:            #0A0F26;
  --bg3:            #111A3E;
  --text:           #F0F9FF;
  --text-rgb:       240, 249, 255;
  --muted:          #94A3B8;
  --muted2:         #64748B;
  --card:           rgba(15, 23, 42, 0.45);
  --card-solid:     #0A0F24;
  --border:         rgba(255, 255, 255, 0.18);
  --border-light:   rgba(6, 182, 212, 0.45);
  --border-subtle:  rgba(139, 92, 246, 0.25);
  --glow:           0 0 35px rgba(6, 182, 212, 0.35);
  --glow-cyan:      0 0 35px rgba(6, 182, 212, 0.45);
  --glow-rose:      0 0 35px rgba(244, 63, 94, 0.35);
  --shadow-liquid:  0 20px 50px -10px rgba(0, 0, 0, 0.7), inset 0 1.5px 1.5px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 2px 0 rgba(0, 0, 0, 0.4);
  --shadow-liquid-hover: 0 25px 60px -8px rgba(6, 182, 212, 0.25), 0 15px 35px rgba(0, 0, 0, 0.8), inset 0 1.5px 2px 0 rgba(255, 255, 255, 0.6);
  --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:             'Plus Jakarta Sans', sans-serif;
  --fb:             'Inter', sans-serif;
  --r:              22px;
}

/* Base Body with Fluid Iridescent Caustic Aurora */
body {
  background: var(--bg);
  background-image: 
    radial-gradient(circle at 18% 12%, rgba(6, 182, 212, 0.28) 0%, transparent 45%),
    radial-gradient(circle at 82% 18%, rgba(139, 92, 246, 0.25) 0%, transparent 45%),
    radial-gradient(circle at 50% 55%, rgba(244, 63, 94, 0.16) 0%, transparent 50%),
    radial-gradient(circle at 80% 85%, rgba(59, 130, 246, 0.22) 0%, transparent 45%);
  background-attachment: fixed;
  color: var(--text);
}

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

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

/* Typography & Headings */
.tag { color: var(--primary); font-weight: 700; letter-spacing: 3.5px; text-shadow: 0 0 16px rgba(6, 182, 212, 0.5); }
.h2 {
  font-family: var(--fh);
  background: linear-gradient(135deg, #FFFFFF 15%, #67E8F9 55%, #C084FC 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 4px 25px rgba(6, 182, 212, 0.22);
}
.bar {
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.7);
}
.lead { color: var(--muted); }

/* Announcements Bar */
.announ-bar {
  background: rgba(10, 15, 38, 0.88) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border) !important;
  color: #F0F9FF;
}
.announ-bar-label {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #FFFFFF;
  box-shadow: 0 0 14px rgba(6, 182, 212, 0.5);
}
.announ-item-badge {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--accent);
}
.announ-item-link { color: #E0F2FE; }
.announ-item-link:hover { color: #FFFFFF; text-shadow: 0 0 10px rgba(255, 255, 255, 0.6); }

/* Navbar */
.nav {
  background: rgba(5, 8, 22, 0.75) !important;
  backdrop-filter: blur(28px) saturate(210%);
  -webkit-backdrop-filter: blur(28px) saturate(210%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
}
.nav-links a { color: var(--text); font-weight: 600; }
.nav-links a:hover { color: var(--primary); text-shadow: 0 0 12px rgba(6, 182, 212, 0.6); }
.nav-links a::after { background: linear-gradient(90deg, var(--primary), var(--secondary)); }

/* Hero Section */
.hero { background: transparent; }
.hero-badge {
  background: rgba(15, 23, 42, 0.75) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border) !important;
  color: var(--primary) !important;
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.4);
}
.hero-title { color: #FFFFFF; }
.hero-title .t1 { color: #FFFFFF; }
.hero-title .t2 {
  background: linear-gradient(135deg, #FFFFFF 10%, #38BDF8 50%, #C084FC 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 35px rgba(6, 182, 212, 0.35);
}
.hero-sub { color: var(--muted); }
.hero-sub em { color: var(--primary); font-weight: 700; text-shadow: 0 0 10px rgba(6, 182, 212, 0.6); }
.hero-desc { color: var(--muted); }

.hero-float {
  background: rgba(10, 15, 38, 0.78) !important;
  backdrop-filter: blur(24px) saturate(210%);
  -webkit-backdrop-filter: blur(24px) saturate(210%);
  border: 1.5px solid var(--border) !important;
  box-shadow: var(--shadow-liquid);
}
.hero-img-frame::before {
  background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
  box-shadow: 0 0 45px rgba(6, 182, 212, 0.45);
}
.hero-img-inner {
  background: #0A0F26;
}

/* Liquid Tactile 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, #06B6D4, #3B82F6) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 8px 24px rgba(6, 182, 212, 0.4), inset 0 1.5px 1.5px rgba(255, 255, 255, 0.6) !important;
  color: #FFFFFF !important;
}
.btn-primary:hover, .btn-purple:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 34px rgba(6, 182, 212, 0.55), 0 0 25px rgba(59, 130, 246, 0.4), inset 0 1.5px 2px rgba(255, 255, 255, 0.8) !important;
}
.btn-gold {
  background: linear-gradient(135deg, #F43F5E, #E11D48) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 8px 24px rgba(244, 63, 94, 0.4), inset 0 1.5px 1.5px rgba(255, 255, 255, 0.6) !important;
  color: #FFFFFF !important;
}
.btn-gold:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 34px rgba(244, 63, 94, 0.55), 0 0 25px rgba(251, 113, 133, 0.4), inset 0 1.5px 2px rgba(255, 255, 255, 0.8) !important;
}
.btn-ghost, .btn-outline {
  background: rgba(255, 255, 255, 0.07) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border) !important;
  color: #F0F9FF !important;
  box-shadow: var(--shadow-3d-sm) !important;
}
.btn-ghost:hover, .btn-outline:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.35) !important;
}

/* Liquid Glass Core Cards */
.svc-card,
.why-feat,
.why-item,
.testi-card,
.pkg-card,
.trust-stat,
.cform,
.cinfo,
.faq-item,
.rev-card,
.reel-card,
.announ-card,
.jt-content,
.about-card,
.tp-card,
.tp-lead-card,
.tp-mini-card,
.cs-card,
.cs-box,
.cs-detail-box,
.svc-mini-card,
.art-card,
.blog-card,
.sidebar-widget,
.sd-modal-dialog {
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(28px) saturate(220%);
  -webkit-backdrop-filter: blur(28px) saturate(220%);
  border: 1.5px solid var(--border) !important;
  box-shadow: var(--shadow-liquid);
  border-radius: var(--r);
  position: relative;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.svc-card:hover,
.why-feat:hover,
.why-item:hover,
.testi-card:hover,
.pkg-card:hover,
.rev-card:hover,
.reel-card:hover,
.announ-card:hover,
.tp-mini-card:hover,
.cs-card:hover,
.art-card:hover {
  transform: translateY(-6px);
  background: rgba(15, 23, 42, 0.65) !important;
  border-color: var(--primary) !important;
  box-shadow: var(--shadow-liquid-hover);
}

/* Package Featured Card */
.pkg-card.featured {
  background: rgba(15, 23, 42, 0.7) !important;
  border: 2px solid var(--primary) !important;
  box-shadow: 0 25px 60px rgba(6, 182, 212, 0.35), inset 0 2px 2px rgba(255, 255, 255, 0.5) !important;
}
.pkg-badge {
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(244, 63, 94, 0.4) !important;
}

/* Service Image Overlay Cards */
.svc-card-img {
  border: 1.5px solid var(--border) !important;
  box-shadow: var(--shadow-liquid) !important;
  border-radius: var(--r) !important;
}
.svc-card-img:hover {
  border-color: var(--primary) !important;
  box-shadow: var(--shadow-liquid-hover) !important;
}
.svc-card-img .svc-img-scrim {
  background: linear-gradient(180deg, rgba(5, 8, 22, 0.1) 0%, rgba(5, 8, 22, 0.55) 50%, rgba(5, 8, 22, 0.98) 100%) !important;
}

/* Icons & Badges */
.svc-icon,
.why-feat-icon,
.ts-icon,
.cert-icon,
.c-icon,
.tp-social-icon,
.sd-modal-icon-wrap {
  background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Form Controls */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea,
.form-control {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--border) !important;
  color: #F0F9FF !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 12px;
  transition: all 0.25s;
}
input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  border-color: var(--primary) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.35) !important;
}
input::placeholder,
textarea::placeholder {
  color: var(--muted);
  opacity: 0.8;
}

/* Counters Strip */
.counters {
  background: rgba(10, 15, 38, 0.7) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15);
}
.c-num {
  font-family: var(--fh);
  background: linear-gradient(135deg, #FFFFFF 20%, #38BDF8 70%, #C084FC 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Lead Magnet */
.lm-section {
  background: rgba(10, 15, 38, 0.75) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
}
.lm-right {
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1.5px solid var(--border) !important;
  box-shadow: var(--shadow-liquid) !important;
}

/* Modal Dialog */
.modal-overlay, .sd-modal-overlay {
  background: rgba(5, 8, 22, 0.82) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.popup-inner, .sd-modal-dialog {
  background: rgba(10, 15, 38, 0.88) !important;
  backdrop-filter: blur(32px) saturate(220%);
  -webkit-backdrop-filter: blur(32px) saturate(220%);
  border: 1.5px solid var(--border) !important;
  box-shadow: var(--shadow-liquid);
  color: #F0F9FF;
}

/* Footer & Pre-Footer Cards */
footer, .site-footer {
  background: #030510 !important;
  border-top: 1px solid var(--border) !important;
}
.ft-card-item {
  background: rgba(15, 23, 42, 0.5) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-3d-sm);
}
.ft-card-item:hover {
  border-color: var(--primary) !important;
  background: rgba(15, 23, 42, 0.75) !important;
  box-shadow: 0 0 25px rgba(6, 182, 212, 0.3) !important;
}
.ft-card-icon {
  background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.4) !important;
}