/* =========================================================
   VardaSoft — Global Design System (Light v3)
   - Light corporate theme (no dark body)
   - Header & Footer unified across all pages (CSS override)
   - Clean contrast + soft animations (AOS-friendly)
   ========================================================= */

/* ---------------------- Tokens ------------------------- */
:root{
  /* Brand */
  --brand: #2563eb;
  --brand2: #7c3aed;
  --grad: linear-gradient(135deg, var(--brand), var(--brand2));

  /* Light palette */
  --bg: #f4f7fb;            /* page base */
  --bg-hero: #eef3fb;       /* subtle hero tint */
  --bg-soft: #f6f9fc;       /* section slab */
  --card: #ffffff;          /* cards */
  --muted: #64748b;         /* muted text */
  --text: #1e293b;          /* body text */
  --text-strong: #0f172a;   /* headings */

  /* Nav / footer (light) */
  --nav-bg: #ffffff;
  --footer-bg: #f8fafc;
  --nav-border: rgba(2,6,23,.08);
  --nav-shadow: 0 6px 18px rgba(2,6,23,.06);

  /* Effects */
  --ring: 0 0 0 .25rem rgba(37,99,235,.18);
  --shadow-1: 0 8px 22px rgba(2,6,23,.06);
  --shadow-2: 0 12px 36px rgba(2,6,23,.10);

  /* Layout */
  --container-narrow: 980px;

  /* Radius */
  --r-lg: 1rem;
  --r-xl: 1.25rem;

  /* Timing */
  --t-fast: .18s;
  --t-base: .28s;
}

/* ---------------------- Base --------------------------- */
html{scroll-behavior:smooth}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(900px 400px at -10% -10%, rgba(124,58,237,.06) 0%, transparent 60%),
    radial-gradient(800px 500px at 110% 10%, rgba(37,99,235,.06) 0%, transparent 60%),
    linear-gradient(180deg, #f9fbfe 0%, var(--bg) 100%);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{ color:#2563eb; text-decoration:none; transition: color var(--t-fast) ease; }
a:hover{ color:#1e40af; }

.container-narrow{max-width: var(--container-narrow); margin: 0 auto; padding: 0 1rem;}

.section{padding: 3.5rem 0;}
.section.bg-soft{background: var(--bg-soft);}
.section-header{margin-top:64px;}
.py-6{padding-top:4rem!important; padding-bottom:4rem!important}

/* ----------------- Header / Navigation ----------------- */
/* Your markup uses: nav.navbar.navbar-dark.fixed-top.glass-nav
   We force light look on all pages (even if class says navbar-dark/bg-dark). */
.glass-nav,
header .navbar,
.navbar,
.navbar.navbar-dark,
.navbar.navbar-light,
.navbar.bg-light,
.navbar.bg-dark,
.navbar-dark.bg-dark,
.navbar-light.bg-light{
  background: var(--nav-bg) !important;
  background-image: none !important;
  box-shadow: var(--nav-shadow) !important;
  border-bottom: 1px solid var(--nav-border) !important;
}

.navbar .navbar-brand{
  color: var(--text-strong) !important;
  font-weight: 700;
  letter-spacing: .2px;
}
.navbar .nav-link{
  color:#334155 !important;
  opacity: 1 !important;
  transition: color var(--t-fast) ease, background-color var(--t-fast) ease;
  border-radius:.5rem; padding:.5rem .75rem;
}
.navbar .nav-link:hover,
.navbar .nav-link.active{
  color: var(--text-strong) !important;
  background: #eef2f7 !important; /* subtle hover pill */
}

/* Sticky shrink on scroll (optional: add body.nav-scrolled via JS) */
body.nav-scrolled .glass-nav{ box-shadow: 0 10px 24px rgba(2,6,23,.10) !important; transform: translateY(-1px); }

/* Logo chip */
.logo-mark{
  display:inline-grid; place-items:center; width:28px; height:28px;
  border-radius:8px; background: var(--grad); color:#fff; font-weight:700;
}

/* ------------------------ Hero ------------------------- */
/* Index has video hero — keep it, but tint for light theme */
.hero-video-wrapper{position:relative; height:92vh; min-height:560px; display:grid; align-items:center; margin-bottom:0; background: var(--bg-hero);}
.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter: saturate(106%) contrast(103%) brightness(100%);}
.hero-overlay{position:absolute; inset:0; background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.30));}
.hero-content{position:relative; z-index:2;}
.hero-inner{ padding: 3rem 0; }

/* For pages that use a plain section header as hero (services/references/industries/contact),
   give a clean gradient with light image option via CSS vars if needed */
.section-header.bg-gradient{
  background: linear-gradient(135deg, rgba(37,99,235,.16), rgba(124,58,237,.16));
  color: var(--text-strong);
  border-radius: var(--r-xl);
}

/* ----------------- Feature Cards / Blocks --------------- */
.card, .feature-card, .glass-card{
  background: var(--card);
  border: 1px solid rgba(2,6,23,.08);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1);
  transition: transform var(--t-base) ease, box-shadow var(--t-base) ease, border-color var(--t-base) ease;
}
.feature-card:hover, .glass-card:hover, .card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: rgba(2,6,23,.14);
}

/* Accent gradient border utility */
.card.gradient-border{ position: relative; border: 1px solid transparent; }
.card.gradient-border::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background:var(--grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none;
}

/* Icon list */
.icon-list{padding-left:1rem;}
.icon-list li{margin-bottom:.4rem}

/* KPI grid (index counters) */
.kpi-cards{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px;}
.kpi{
  background: linear-gradient(180deg, #1e40af, #2563eb);
  color:#fff; border-radius:var(--r-xl); padding:22px; text-align:center;
  border:1px solid rgba(255,255,255,.18); box-shadow: var(--shadow-1);
}
.kpi .num{display:block; font-size:40px; font-weight:800; line-height:1;}
.kpi small{opacity:.90}

/* Logo strip on light */
.logo-strip img{opacity:.9; transition:opacity var(--t-fast) ease, filter var(--t-fast) ease;}
.logo-strip img:hover{opacity:1; filter:none}

/* Testimonials */
.testimonials .testi-card{
  background: var(--card);
  border:1px solid rgba(2,6,23,.08); border-radius:var(--r-xl); box-shadow: var(--shadow-1);
}

/* ------------------------ Buttons ---------------------- */
.btn-gradient{background:var(--grad); border:0; color:#fff; transition: transform var(--t-fast) ease, filter var(--t-fast) ease, box-shadow var(--t-fast) ease;}
.btn-gradient:hover{filter:brightness(1.06); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(37,99,235,.25);}
.btn-outline-light{
  color: var(--text-strong); border-color:#cbd5e1;
}
.btn-outline-light:hover{ background:#e2e8f0; }

/* ------------------------ Forms ------------------------ */
.form-control{
  background: #fff;
  border: 1px solid rgba(2,6,23,.12);
  color: var(--text);
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.form-control::placeholder{color:#6b7280;}
.form-control:focus{box-shadow: var(--ring); border-color:#93c5fd; color:#0f172a;}
.form-select{
  background-color:#fff;
  border: 1px solid rgba(2,6,23,.12);
  color: var(--text);
}

/* Contact page helpers */
.contact-card{padding:1.25rem; border-radius: var(--r-xl); background: #fff; border:1px solid rgba(2,6,23,.10); box-shadow: var(--shadow-1);}
.map-embed{border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-1);}

/* ------------------------ Footer ----------------------- */
/* Your footer in index has .bg-dark + .text-white-50; we force light look everywhere */
footer, .site-footer, #site-footer{
  background: var(--footer-bg) !important;
  color:#334155 !important;
  border-top: 1px solid var(--nav-border) !important;
  padding-top:28px; padding-bottom:28px;
}
footer a{ color:#1f3a8a !important; }
footer a:hover{ color:#172554 !important; }
footer .text-white, footer .text-white-50{ color:#334155 !important; opacity:1 !important; }
footer .badge.bg-gradient{ background: var(--grad) !important; }

/* ----------------------- Tagline ----------------------- */
/* For the common lines:
   "Services — Dynamics 365, Power BI, Power Platform, Cloud & Security — under one roof."
   "Varda Soft Solutions — Developed by NeerWeb Solution" */
.page-tagline, .tagline, [data-global-tag]{
  display:inline-flex; align-items:center; gap:.5rem;
  color:#0b3b8a !important;
  font-weight:700; letter-spacing:.2px;
  background:#e8f0ff; border:1px solid #c4d7ff;
  border-radius:999px; padding:.45rem .8rem; line-height:1.2;
}
.page-tagline .badge, .tagline .badge, [data-global-tag] .badge{
  background:#dbe7ff !important; color:#0b3b8a !important; border:1px solid #c4d7ff !important;
}

/* --------------------- Page Images (CSS-only) ---------- */
/* If your inner pages have a top section header (e.g., <div class="section-header">),
   we add tasteful background images automatically using common hooks.
   These work if page root has id (#services/#references/#industries) OR
   a wrapper with data-page="services|references|industries". */

/* Base */
.section-header{ position:relative; overflow:hidden; border-radius: var(--r-xl); }
.section-header::before{
  content:""; position:absolute; inset:0; opacity:.20; pointer-events:none;
  background: var(--section-hero-img, none);
  background-size: cover; background-position: center;
}
/* Services */
#services .section-header,
[data-page="services"] .section-header{ --section-hero-img: url("https://images.unsplash.com/photo-1551280417-7b4b8e8b9f61?q=80&w=1920&auto=format&fit=crop"); }
/* References */
#references .section-header,
[data-page="references"] .section-header{ --section-hero-img: url("https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=1920&auto=format&fit=crop"); }
/* Industries */
#industries .section-header,
[data-page="industries"] .section-header{ --section-hero-img: url("https://images.unsplash.com/photo-1509395176047-4a66953fd231?q=80&w=1920&auto=format&fit=crop"); }
/* Contact — skipped (you have video/map etc.) */

/* Make text readable on image */
.section-header *{ position:relative; z-index:1; }
.section-header .bg-gradient{ background: var(--grad); }

/* --------------------- Animations ---------------------- */
/* Keyframes */
@keyframes floatUp { from{transform: translateY(14px); opacity:0;} to{transform:none; opacity:1;} }
@keyframes fadeSlide { from{transform: translateY(10px) scale(.98); opacity:0;} to{transform:none; opacity:1;} }
@keyframes glowPulse { 0%{ box-shadow: 0 0 0 0 rgba(37,99,235,.28);} 70%{ box-shadow: 0 0 0 12px rgba(37,99,235,0);} 100%{ box-shadow: 0 0 0 0 rgba(37,99,235,0);} }

/* Helpers */
.reveal, .reveal-up, .reveal-fade { opacity:0; transform: translateY(16px); }
.reveal.in, .reveal-up.in, .reveal-fade.in { opacity:1; transform:none; transition: opacity .6s ease, transform .6s ease; }

.fade-in{ animation: fadeSlide .6s ease both; }
.float-up{ animation: floatUp .65s ease both; }
.pulse-glow{ animation: glowPulse 2.2s ease-out infinite; }
.lift:hover{ transform: translateY(-4px); transition: transform var(--t-base) ease; }

/* AOS tune (works with your CDN) */
[data-aos]{ transition-duration: .6s !important; }

/* ------------------- Responsive ------------------------ */
@media (max-width: 1199.98px){
  .navbar .btn.btn-gradient{margin-top:.25rem}
}
@media (max-width: 991.98px){
  .hero-video-wrapper{height:80vh;}
  .kpi-cards{grid-template-columns:1fr;}
  .navbar .btn.btn-gradient{margin-top:.5rem}
}

/* ------------------- Utilities ------------------------- */
.shadow-soft{box-shadow: var(--shadow-1);}
.rounded-2xl{border-radius: var(--r-xl);}
.separator{height:1px; background:linear-gradient(90deg,transparent,#cbd5e160,transparent);}
.bg-gradient{background: var(--grad);}
.text-muted-80{color:#475569;}
.blurred{backdrop-filter: blur(8px);}

/* Make sure Bootstrap bg helpers don’t flip our palette */
.bg-light, .bg-dark{ background-color: transparent !important; background-image: none !important; }
.navbar-dark .nav-link, .navbar-light .nav-link{ color:#334155 !important; }
.navbar-dark .navbar-brand, .navbar-light .navbar-brand{ color:#0f172a !important; }




/* =======================================================
   VardaSoft – Visibility Fixes (Footer + Inner Page Heroes)
   Place at the END of style.css
   ======================================================= */

/* ---------- Footer: force light + readable ---------- */
footer, .site-footer, #site-footer{
  background: #f8fafc !important;
  border-top: 1px solid rgba(2,6,23,.08) !important;
  padding-top: 28px; padding-bottom: 28px;
}

/* Kill Bootstrap's dim text inside footer */
footer *, footer .text-white, footer .text-white-50{
  color: #334155 !important;   /* slate */
  opacity: 1 !important;
}

/* Footer hierarchy */
footer h5, footer .h5, footer h4 { color:#0f172a !important; }
footer p, footer li, footer small { color:#334155 !important; }
footer a { color:#1f3a8a !important; text-decoration:none; }
footer a:hover { color:#172554 !important; text-decoration:underline; }

/* Footer badge chip stays branded */
footer .badge.bg-gradient{ background: linear-gradient(135deg,#2563eb,#7c3aed) !important; color:#fff !important; }

/* ---------- Header: lock to light (if any page flips it) ---------- */
header .navbar,
.navbar,
.navbar.bg-dark, .navbar-dark.bg-dark,
.navbar.bg-light, .navbar-light.bg-light{
  background: #ffffff !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(2,6,23,.08) !important;
  box-shadow: 0 6px 18px rgba(2,6,23,.06) !important;
}
.navbar .navbar-brand{ color:#0f172a !important; font-weight:700; letter-spacing:.2px; }
.navbar .nav-link{ color:#334155 !important; }
.navbar .nav-link:hover, .navbar .nav-link.active{
  color:#0f172a !important; background:#eef2f7 !important; border-radius:.5rem;
}

/* ---------- Inner-page hero text: make it dark & crisp ----------
   Index uses the video hero (keep white there),
   inner pages usually use .section-header – force dark text there. */
.section-header *{ color:#0f172a !important; }
.section-header .lead, .section-header .subtitle, .section-header small { color:#334155 !important; opacity:.95 !important; }

/* Soften the white haze over inner heroes */
.section-header::before{ opacity:.14 !important; }

/* The video hero overlay (index) stays lighter, but not milky */
.hero-overlay{
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.22)) !important;
}

/* ---------- Card/readability polish on light ---------- */
.card, .feature-card, .glass-card{
  background:#ffffff !important;
  border:1px solid rgba(2,6,23,.08) !important;
  box-shadow: 0 8px 22px rgba(2,6,23,.06) !important;
}

/* ---------- Safety: neutralize dark utilities that sneak in ---------- */
.bg-dark, .text-white-50, .text-white{
  color: inherit !important;
  background: transparent !important;
}