/* VoxLink Premium Light Background + Dark Header/Footer (Silky Glass)
   Place this file at: assets/css/voxlink-theme.css
   Load AFTER assets/css/style.css
*/

:root{
  --vx-bg: #f6f8ff;
  --vx-bg2:#eef3ff;
  --vx-surface: rgba(255,255,255,0.78);
  --vx-surface2: rgba(255,255,255,0.92);
  --vx-border: rgba(15,23,42,0.10);
  --vx-border2: rgba(37,99,235,0.18);
  --vx-text: #0b1220;
  --vx-muted: rgba(15,23,42,0.72);
  --vx-dim: rgba(15,23,42,0.58);
  --vx-accent: #2563eb; /* royal blue */
  --vx-accent2:#06b6d4; /* cyan */
  --vx-gold:#f6c453;
  --vx-shadow: 0 18px 50px rgba(2,6,23,0.12);
  --vx-shadow2: 0 10px 30px rgba(2,6,23,0.10);

  /* Dark chrome */
  --vx-chrome: #0b1220;
  --vx-chrome2:#0f172a;
  --vx-chromeText: rgba(255,255,255,0.90);
  --vx-chromeMuted: rgba(255,255,255,0.72);
  --vx-chromeBorder: rgba(255,255,255,0.10);
}

html{scroll-behavior:smooth;}
body{
  background:
    radial-gradient(1100px 700px at 18% -10%, rgba(37,99,235,0.14), transparent 55%),
    radial-gradient(900px 600px at 92% 8%, rgba(6,182,212,0.12), transparent 55%),
    radial-gradient(900px 700px at 50% 110%, rgba(246,196,83,0.10), transparent 60%),
    linear-gradient(180deg, var(--vx-bg) 0%, var(--vx-bg2) 100%);
  color: var(--vx-text);
}

/* Keep sections clean (template sometimes sets dark blocks) */
.about, .services, .features, .contact, section{background: transparent !important;}

/* Headings: always readable */
h1,h2,h3,h4,h5,h6,
.section-title h2,
.section-title p,
.about .content h3,
.features h3,
.services .icon-box h4,
.services .icon-box h4 a,
.services .icon-box .title,
.services .icon-box .title a,
.icon-box h3,
.icon-box h3 a,
.contact .info h4{
  color: var(--vx-text) !important;
}

body, p, li, label{color: var(--vx-muted);}
a{color: var(--vx-accent);} 
a:hover{color: var(--vx-accent2);} 

/* =========================
   HEADER (Dark, premium)
   ========================= */
#header{
  background: linear-gradient(180deg, rgba(11,18,32,0.96) 0%, rgba(11,18,32,0.88) 100%) !important;
  border-bottom: 1px solid var(--vx-chromeBorder);
  box-shadow: 0 18px 50px rgba(2,6,23,0.28);
  backdrop-filter: blur(14px);
}

#header .logo img{
  height: 34px;
  width: auto;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,0.35));
}

/* Navbar links */
.navbar a,
.navbar a:focus{
  color: var(--vx-chromeText) !important;
  padding: 10px 14px !important;
  border: 0 !important;
  outline: none !important;
  position: relative;
  font-weight: 600;
}

.navbar a::after{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--vx-accent), var(--vx-accent2));
  opacity: 0;
  transform: scaleX(0.60);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.navbar a:hover,
.navbar .active,
.navbar li:hover > a{
  color: #ffffff !important;
}

.navbar a:hover::after,
.navbar .active::after,
.navbar li:hover > a::after{
  opacity: 1;
  transform: scaleX(1);
}

.mobile-nav-toggle{color: var(--vx-chromeText) !important;}

/* CTA button in header */
.get-started-btn{
  border-radius: 999px !important;
  padding: 12px 22px !important;
  box-shadow: 0 16px 40px rgba(2,6,23,0.28);
  border: 1px solid rgba(37,99,235,0.28) !important;
  background: linear-gradient(90deg, var(--vx-accent), var(--vx-accent2)) !important;
  color: #fff !important;
}
.get-started-btn:hover{transform: translateY(-1px); filter: brightness(1.03);}

/* =========================
   HERO
   ========================= */
#hero{position:relative; background: transparent !important;}
#hero:before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 600px at 22% 22%, rgba(37,99,235,0.20), transparent 58%),
    radial-gradient(900px 600px at 84% 10%, rgba(6,182,212,0.16), transparent 60%),
    radial-gradient(900px 700px at 55% 110%, rgba(246,196,83,0.12), transparent 65%);
  opacity: 0.95;
}
#hero .container{position:relative; z-index:1;}
#hero h1{color: var(--vx-text) !important; letter-spacing: -0.7px; text-shadow: 0 18px 60px rgba(2,6,23,0.12);} 
#hero h2{color: rgba(15,23,42,0.72) !important; font-weight: 500; line-height: 1.7;}

/* Chips */
.vx-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  margin: 8px 6px 0 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(15,23,42,0.10);
  box-shadow: 0 10px 25px rgba(2,6,23,0.06);
  color: rgba(15,23,42,0.76);
  font-weight: 600;
}
.vx-chip i{color: var(--vx-accent);}

/* =========================
   CARDS / GLASS SURFACES
   ========================= */
.icon-box,
.services .icon-box,
.features .icon-box,
.about .icon-box,
.contact .info,
.php-email-form{
  background: linear-gradient(180deg, var(--vx-surface) 0%, rgba(255,255,255,0.62) 100%) !important;
  border: 1px solid var(--vx-border) !important;
  border-radius: 22px !important;
  box-shadow: var(--vx-shadow2);
  backdrop-filter: blur(10px);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.icon-box:hover,
.services .icon-box:hover,
.features .icon-box:hover,
.about .icon-box:hover{
  transform: translateY(-6px);
  border-color: var(--vx-border2) !important;
  box-shadow: 0 22px 70px rgba(2,6,23,0.14);
}

.services .icon-box i,
.icon-box i{color: var(--vx-accent) !important;}

/* Ensure service card titles are visible (fixes any black-on-light/dark edge cases) */
.services .icon-box h4,
.services .icon-box h4 a,
.services .icon-box .title,
.services .icon-box .title a{
  color: var(--vx-text) !important;
}

.services .icon-box p,
.features .icon-box p,
.about .icon-box p{color: rgba(15,23,42,0.70) !important;}

/* Section titles */
.section-title h2{color: rgba(15,23,42,0.55) !important; letter-spacing: 0.10em;}
.section-title p{letter-spacing: -0.2px;}

/* Images */
.about img, .features .image{border-radius: 24px; box-shadow: var(--vx-shadow);} 

/* =========================
   CONTACT (more breathing space)
   ========================= */
.contact .info{
  padding: 28px !important;
}

.contact .info .address,
.contact .info .email,
.contact .info .phone{
  padding: 18px 18px 18px 60px;
  border-radius: 18px;
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(15,23,42,0.08);
  box-shadow: 0 10px 26px rgba(2,6,23,0.06);
  margin-bottom: 16px;
  position: relative;
}

.contact .info i{
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  position: absolute;
  left: 14px;
  top: 16px;
  background: rgba(246,196,83,0.95);
  color: rgba(15,23,42,0.92) !important;
  box-shadow: 0 10px 24px rgba(2,6,23,0.10);
}

.contact .info h4{margin: 0 0 6px 0; font-weight: 800;}
.contact .info p{margin: 0; color: rgba(15,23,42,0.70) !important;}

.php-email-form{
  padding: 30px !important;
}

.php-email-form input,
.php-email-form textarea{
  background: rgba(255,255,255,0.90) !important;
  border: 1px solid rgba(15,23,42,0.12) !important;
  color: var(--vx-text) !important;
  border-radius: 14px !important;
}

.php-email-form input::placeholder,
.php-email-form textarea::placeholder{color: rgba(15,23,42,0.45) !important;}

.contact .php-email-form button[type=submit]{
  border-radius: 999px !important;
  padding: 12px 26px !important;
  box-shadow: var(--vx-shadow);
  border: 1px solid rgba(37,99,235,0.22) !important;
  background: linear-gradient(90deg, var(--vx-accent), var(--vx-accent2)) !important;
  color: #fff !important;
}

/* =========================
   FOOTER (Dark, matching header)
   ========================= */
#footer{
  background: linear-gradient(180deg, var(--vx-chrome) 0%, var(--vx-chrome2) 100%) !important;
  border-top: 1px solid var(--vx-chromeBorder);
}

#footer .footer-top{
  background: transparent !important;
  padding-top: 54px;
  padding-bottom: 34px;
}

#footer, #footer p, #footer li, #footer a, #footer .footer-info p{
  color: var(--vx-chromeMuted) !important;
}

#footer h3, #footer h4{
  color: #ffffff !important;
}

#footer a:hover{color: #ffffff !important;}

#footer .social-links a{
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.10);
}

#footer .social-links a i{color: rgba(255,255,255,0.90) !important;}

#footer .copyright,
#footer .credits{
  color: rgba(255,255,255,0.62) !important;
}

/* Back to top button - keep visible */
.back-to-top{background: rgba(246,196,83,0.95) !important;}
.back-to-top i{color: rgba(15,23,42,0.92) !important;}

/* Softer focus ring */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 3px solid rgba(37,99,235,0.22) !important;
  outline-offset: 3px;
  border-radius: 14px;
}

@media (max-width: 768px){
  #header .logo img{height:30px;}
  .php-email-form{padding: 22px !important;}
}

/* Policy page container */
.breadcrumbs{background: transparent !important;}
.breadcrumbs h2{color: var(--vx-text) !important;}
.about-us .container{
  background: linear-gradient(180deg, var(--vx-surface) 0%, rgba(255,255,255,0.62) 100%) !important;
  border: 1px solid var(--vx-border) !important;
  border-radius: 22px !important;
  box-shadow: var(--vx-shadow2);
  padding: 34px !important;
}