/* ============================================================
   THEME: Liquid Glassmorphism Light — Crystalline Aquatic Ice
   UI/UX Pro Max Liquid Glass Design System (Light Surface)
   Features: Crystalline light sky/pearl background (#F0F9FF),
   Electric Ocean Cyan (#0284C7), Royal Violet (#7C3AED),
   Vibrant Coral (#F43F5E). Multi-specular frosted liquid glass,
   ultra-deep refractive depth on crisp daylight surface.
   ============================================================ */
@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:        #0284C7;
  --primary-rgb:    2, 132, 199;
  --primary2:       #0EA5E9;
  --secondary:      #7C3AED;
  --secondary-rgb:  124, 58, 237;
  --accent:         #F43F5E;
  --accent-rgb:     244, 63, 94;
  --accent2:        #FB7185;
  --bg:             #F0F9FF;
  --bg2:            #E0F2FE;
  --bg3:            #BAE6FD;
  --text:           #0C4A6E;
  --text-rgb:       12, 74, 110;
  --muted:          #475569;
  --muted2:         #64748B;
  --card:           rgba(255, 255, 255, 0.82);
  --card-solid:     #FFFFFF;
  --border:         rgba(14, 165, 233, 0.22);
  --border-light:   rgba(255, 255, 255, 0.95);
  --border-subtle:  rgba(124, 58, 237, 0.18);
  --glow:           0 12px 36px rgba(2, 132, 199, 0.16);
  --glow-cyan:      0 12px 36px rgba(14, 165, 233, 0.24);
  --glow-rose:      0 12px 36px rgba(244, 63, 94, 0.22);
  --shadow-liquid:  0 16px 40px -8px rgba(12, 74, 110, 0.09), 0 4px 12px -2px rgba(12, 74, 110, 0.04), inset 0 1px 2px 0 rgba(255, 255, 255, 1);
  --shadow-liquid-hover: 0 24px 50px -10px rgba(2, 132, 199, 0.18), 0 8px 20px -4px rgba(12, 74, 110, 0.06), inset 0 1.5px 2px 0 rgba(255, 255, 255, 1);
  --shadow-3d-sm:   0 4px 14px rgba(12, 74, 110, 0.05), inset 0 1px 1px rgba(255, 255, 255, 1);
  --shadow-3d-md:   0 12px 32px rgba(12, 74, 110, 0.08), inset 0 1px 2px rgba(255, 255, 255, 1);
  --shadow-3d-lg:   0 22px 50px rgba(12, 74, 110, 0.12), inset 0 1px 2px rgba(255, 255, 255, 1);
  --fh:             'Plus Jakarta Sans', sans-serif;
  --fb:             'Inter', sans-serif;
  --r:              22px;
}

/* Base Body with Daylight Aquatic Auroras */
body {
  background: var(--bg);
  background-image: 
    radial-gradient(circle at 18% 12%, rgba(14, 165, 233, 0.14) 0%, transparent 45%),
    radial-gradient(circle at 82% 18%, rgba(124, 58, 237, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 50% 55%, rgba(244, 63, 94, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 85%, rgba(59, 130, 246, 0.12) 0%, transparent 45%);
  background-attachment: fixed;
  color: var(--text);
}

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

/* Headings with Aquatic Prismatic Gradient */
.h2, .hero-title, .svc-card h3, .cform h3, .ft-col h4, .logo-text, .lm-title, .cm-head h2, .calc-header h2, .reel-header h2, .team-name, .art-title, .blog-title, .cs-title {
  font-family: var(--fh);
}
.tag {
  color: var(--primary);
  font-weight: 800;
  letter-spacing: 3px;
  background: rgba(2, 132, 199, 0.08);
  padding: 4px 12px;
  border-radius: 50px;
  display: inline-block;
}
.h2 {
  color: var(--text) !important;
  background: linear-gradient(135deg, #0C4A6E 0%, var(--primary) 50%, var(--secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-title .t2 {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 60%, var(--accent) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Hero Section Atmosphere */
.hero {
  background: radial-gradient(ellipse at 15% 35%, rgba(2, 132, 199, 0.09) 0%, transparent 60%),
              radial-gradient(ellipse at 85% 65%, rgba(124, 58, 237, 0.07) 0%, transparent 55%),
              var(--bg) !important;
}
.hero-orb.ho1 { background: radial-gradient(circle, rgba(2, 132, 199, 0.10) 0%, transparent 68%) !important; }
.hero-orb.ho2 { background: radial-gradient(circle, rgba(244, 63, 94, 0.07) 0%, transparent 68%) !important; }
.hero-badge {
  background: rgba(2, 132, 199, 0.08) !important;
  border: 1px solid rgba(2, 132, 199, 0.24) !important;
  color: var(--primary) !important;
}
.hero-float {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: var(--shadow-liquid) !important;
}
.hf-num { color: var(--primary) !important; }
.hf-txt { color: var(--muted) !important; }
.hero-img-frame::before {
  background: linear-gradient(140deg, var(--primary), var(--secondary), var(--accent)) !important;
}
#sf, #cvs { opacity: 0.35 !important; }

/* Glassmorphic Fluid Cards */
.svc-card, .why-feat, .testi-card, .pkg-card, .cform, .cinfo, .faq-item, .rev-card, .jt-content, .announ-card, .cm-table, .calc-card, .reel-card, .prod-card, .team-card, .cs-card, .art-card, .blog-card, .tp-card, .tp-mini-card, .svc-mini-card {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: var(--shadow-liquid) !important;
  color: var(--text) !important;
  border-radius: var(--r) !important;
}

.svc-card:hover, .why-feat:hover, .testi-card:hover, .pkg-card:hover, .jt-content:hover, .announ-card:hover, .reel-card:hover, .prod-card:hover, .team-card:hover, .cs-card:hover, .art-card:hover, .blog-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: var(--shadow-liquid-hover) !important;
  border-color: var(--primary) !important;
}

/* Buttons */
.btn-primary, .btn-purple, .calc-btn, .lm-submit {
  background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.28) !important;
  border: none !important;
}
.btn-gold {
  background: linear-gradient(135deg, var(--accent), #E11D48) !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 24px rgba(244, 63, 94, 0.32) !important;
  border: none !important;
}
.btn-primary:hover, .btn-purple:hover, .calc-btn:hover, .lm-submit:hover, .btn-gold:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

/* Form Inputs on Light Surface */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(14, 165, 233, 0.25) !important;
  color: var(--text) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
}
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="number"]:focus, select:focus, textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.18) !important;
}

/* Navigation Bar */
.nav {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(14, 165, 233, 0.15) !important;
  box-shadow: 0 4px 20px rgba(12, 74, 110, 0.05) !important;
}
.nav-links a { color: var(--text) !important; }
.nav-links a:hover { color: var(--primary) !important; }

/* Announcements Bar & Highlighted Close Button in Liquid Glass Light */
.announ-bar, #announ-bar {
  background: rgba(224, 242, 254, 0.94) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(14, 165, 233, 0.25) !important;
  color: var(--text) !important;
}
.announ-item-text {
  color: #0C4A6E !important;
}
.announ-bar-close {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1.5px solid rgba(14, 165, 233, 0.4) !important;
  color: #0369A1 !important;
  box-shadow: 0 2px 8px rgba(12, 74, 110, 0.16) !important;
}
.announ-bar-close:hover {
  background: #EF4444 !important;
  border-color: #EF4444 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.45) !important;
}

/* Center Section Dividers */
[style*="text-align:center"] .bar,
[style*="text-align: center"] .bar,
[style*="text-align:center"] > .bar,
[style*="text-align: center"] > .bar,
.text-center .bar,
.section-header .bar,
.ba-section .bar,
.who-section .bar,
.mv-head .bar,
.team-head .bar,
.port-head .bar {
  margin-left: auto !important;
  margin-right: auto !important;
}