/* assets/css/style.css */
:root {
    --primary: #0052a5;
    --primary-dark: #003d80;
    --primary-light: #e8f0fe;
    --secondary: #0066c4;
    --secondary-dark: #004a92;
    --accent: #0066c4;
    --dark: #1a2c3e;
    --gray: #6c757d;
    --light-gray: #f8f9fa;
    --white: #ffffff;
    --black: #000000;
    --success: #28a745;
    --warning: #ffc107;
    --danger: #dc3545;
    --info: #17a2b8;
    
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 25px rgba(0,0,0,0.15);
    
    --border-radius: 12px;
    --border-radius-sm: 8px;
    --transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
    color: var(--dark);
    background: var(--white);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 1rem;
}

h1 { font-size: 3.5rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

/* Buttons */
.btn-primary-custom {
    background: var(--primary);
    border: none;
    padding: 12px 32px;
    border-radius: 50px;
    color: white;
    font-weight: 600;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary-custom:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    color: white;
}

.btn-outline-primary-custom {
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
    padding: 10px 30px;
    border-radius: 50px;
    font-weight: 600;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-outline-primary-custom:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-2px);
}

.btn-secondary-custom {
    background: var(--secondary);
    border: none;
    padding: 12px 32px;
    border-radius: 50px;
    color: white;
    font-weight: 600;
    transition: var(--transition);
}

.btn-secondary-custom:hover {
    background: var(--secondary-dark);
    transform: translateY(-2px);
    color: white;
}

/* Navigation */
.navbar {
    background: var(--white);
    box-shadow: var(--shadow-sm);
    padding: 1rem 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    transition: var(--transition);
}

.navbar-scrolled {
    padding: 0.5rem 0;
    background: rgba(255,255,255,0.98);
    box-shadow: var(--shadow-lg);
}

.navbar-brand {
    font-weight: 800;
    font-size: 1.75rem;
}

.navbar-brand span {
    color: var(--primary);
}

.nav-link {
    font-weight: 600;
    color: var(--dark) !important;
    margin: 0 0.5rem;
    transition: var(--transition);
    position: relative;
}

.nav-link:hover,
.nav-link.active {
    color: var(--primary) !important;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: var(--transition);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.dropdown-menu {
    border-radius: var(--border-radius);
    border: none;
    box-shadow: var(--shadow-lg);
    padding: 0.5rem 0;
}

.dropdown-item {
    padding: 0.5rem 1.5rem;
    transition: var(--transition);
}

.dropdown-item:hover {
    background: var(--primary-light);
    color: var(--primary);
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%);
    padding: 160px 0 90px;
    margin-top: 0;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path fill="%230052a5" fill-opacity="0.05" d="M0 0h200v200H0z"/><circle cx="100" cy="100" r="80" fill="%230052a5" fill-opacity="0.03"/></svg>') repeat;
    pointer-events: none;
}

/* Sections */
.section {
    padding: 80px 0;
}

.section-title {
    text-align: center;
    margin-bottom: 50px;
}

.section-title h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-dark);
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}

.section-title h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 3px;
    background: var(--primary);
    border-radius: 2px;
}

.section-title p {
    font-size: 1.1rem;
    color: var(--gray);
    max-width: 700px;
    margin: 1rem auto 0;
}

/* Cards */
.service-card,
.product-card,
.team-card {
    background: var(--white);
    border-radius: var(--border-radius);
    padding: 2rem;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0,82,165,0.1);
    height: 100%;
    position: relative;
    overflow: hidden;
}

.service-card:hover,
.product-card:hover,
.team-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary);
}

.service-icon {
    width: 70px;
    height: 70px;
    background: var(--primary-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.2rem;
    color: var(--primary);
    font-size: 2rem;
    transition: var(--transition);
}

.service-card:hover .service-icon {
    background: var(--primary);
    color: var(--white);
    transform: rotateY(180deg);
}

/* Stats */
.stat-box {
    background: rgba(255,255,255,0.15);
    border-radius: var(--border-radius);
    padding: 2rem;
    text-align: center;
    -webkit-backdrop-filter: blur(10px);
    transition: var(--transition);
}

.stat-box:hover {
    transform: scale(1.05);
    background: rgba(255,255,255,0.25);
}

.stat-number {
    font-size: 3rem;
    font-weight: 800;
    color: var(--white);
}

.stat-label {
    color: rgba(255,255,255,0.9);
    font-size: 1rem;
}

/* Product Cards for Online Store */
.product-card {
    text-align: center;
    position: relative;
}

.product-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--accent);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 1;
}

.product-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--border-radius-sm);
    margin-bottom: 1rem;
}

.product-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.product-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1rem;
}

.product-price s {
    font-size: 0.9rem;
    color: var(--gray);
    margin-left: 0.5rem;
}

.rating {
    color: #ffc107;
    margin-bottom: 0.5rem;
}

/* Solar EPC Section */
.epc-process {
    position: relative;
    padding: 2rem 0;
}

.process-step {
    text-align: center;
    position: relative;
    padding: 1rem;
}

.process-step .step-number {
    width: 50px;
    height: 50px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 auto 1rem;
    position: relative;
    z-index: 1;
}

.process-step::before {
    content: '';
    position: absolute;
    top: 35px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--primary-light);
    z-index: 0;
}

.process-step:last-child::before {
    display: none;
}

.process-step h4 {
    font-size: 1.1rem;
    margin-top: 1rem;
}

/* Gallery */
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius);
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: var(--transition);
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-overlay {
    position: absolute;
    bottom: -100%;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,82,165,0.9), transparent);
    color: white;
    padding: 1rem;
    transition: var(--transition);
}

.gallery-item:hover .gallery-overlay {
    bottom: 0;
}

/* Cart Styles */
.cart-item {
    background: white;
    border-radius: var(--border-radius);
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
}

.cart-item-image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--border-radius-sm);
}

.quantity-input {
    width: 60px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 0.25rem;
}

/* Contact Form */
.contact-form {
    background: var(--white);
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
}

.form-control,
.form-select {
    border: 1px solid #e0e0e0;
    border-radius: var(--border-radius-sm);
    padding: 0.75rem 1rem;
    transition: var(--transition);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(0,82,165,0.25);
}

/* Footer */
footer {
    background: #001b3a;
    color: #ccddee;
    padding: 60px 0 20px;
    margin-top: 0;
    position: relative;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-dark), var(--primary), var(--primary-dark));
}

footer a {
    color: #ccddee;
    text-decoration: none;
    transition: var(--transition);
}

footer a:hover {
    color: white;
    padding-left: 5px;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    margin-right: 0.5rem;
    transition: var(--transition);
}

.social-links a:hover {
    background: var(--primary);
    transform: translateY(-3px);
}

/* Breadcrumbs */
.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 1rem;
}

.breadcrumb-item a {
    color: var(--primary);
    text-decoration: none;
}

/* Pagination */
.pagination .page-link {
    color: var(--primary);
    border: none;
    margin: 0 0.25rem;
    border-radius: 50px;
}

.pagination .page-item.active .page-link {
    background: var(--primary);
    color: white;
}

/* Responsive */
@media (max-width: 768px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    
    .hero {
        padding: 120px 0 60px;
    }
    
    .hero h1 {
        font-size: 2rem;
    }
    
    .section {
        padding: 50px 0;
    }
    
    .section-title h2 {
        font-size: 1.75rem;
    }
    
    .process-step::before {
        display: none;
    }
    
    .stat-number {
        font-size: 2rem;
    }
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* Loading Spinner */
.spinner-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Toast Notifications */
.toast-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9998;
    min-width: 250px;
}

/* Utility Classes */
.text-gradient {
    background: linear-gradient(135deg, #4da3ff, #ffffff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.bg-gradient-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.bg-gradient-blue {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
}

/* Image Placeholders */
.img-placeholder {
    background: var(--primary-light);
    border-radius: var(--border-radius);
    padding: 40px;
    text-align: center;
    color: var(--primary);
    font-weight: bold;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.img-placeholder i {
    font-size: 4rem;
    margin-bottom: 1rem;
}

/* Add to Cart Animation */
@keyframes addToCart {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.add-to-cart-animation {
    animation: addToCart 0.3s ease-in-out;
}
/* ============================================================
   PREMIUM UPGRADE — modern, high-end, sales-focused
   Blue & White only · Global header/footer · Video banner
   ============================================================ */
:root{
  --primary-50:#f0f7ff;
  --grad-blue: linear-gradient(135deg,#0066c4 0%,#0052a5 50%,#002b64 100%);
  --shadow-blue: 0 18px 40px -12px rgba(0,82,165,0.35);
}
html{scroll-behavior:smooth;}
body{font-family:'Inter','Segoe UI','Roboto',sans-serif;-webkit-font-smoothing:antialiased;}

/* ---------- VIDEO BACKGROUND HERO ---------- */
.hero-banner{
  position:relative;
  min-height:560px;
  height:64vh;
  max-height:680px;
  display:flex;
  align-items:center;
  overflow:hidden;
  color:#fff;
  padding:130px 0 60px;
  margin-top:0;
}
.hero-banner__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}
.hero-banner__overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(115deg, rgba(0,27,58,0.94) 0%, rgba(0,60,130,0.82) 45%, rgba(0,82,165,0.55) 100%);
}
.hero-banner__overlay::after{
  /* subtle blueprint texture */
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,0.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,0.04) 1px,transparent 1px);
  background-size:54px 54px; opacity:0.6;
}
.hero-banner .container{position:relative; z-index:2;}
.hero-banner h1{
  color:#fff; font-size:2.85rem; line-height:1.12; font-weight:800;
  letter-spacing:-0.5px; margin-bottom:1rem;
}
.hero-banner h1 .text-gradient{
  background:linear-gradient(135deg,#9ecbff,#ffffff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-banner .lead{color:rgba(255,255,255,0.92); font-size:1.1rem; max-width:600px;}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.32);
  color:#fff;padding:8px 18px;border-radius:50px;font-size:0.8rem;font-weight:700;
  letter-spacing:1px;margin-bottom:1.4rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:1.6rem;}
.btn-hero{
  background:#fff;color:var(--primary);border:none;
  padding:15px 36px;border-radius:50px;font-weight:700;font-size:1.02rem;
  display:inline-flex;align-items:center;gap:10px;transition:var(--transition);
  box-shadow:0 8px 24px rgba(0,0,0,0.18);
}
.btn-hero:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(0,0,0,0.28);color:var(--primary-dark);}
.btn-hero-outline{
  background:transparent;color:#fff;border:2px solid rgba(255,255,255,0.7);
  padding:13px 32px;border-radius:50px;font-weight:700;font-size:1.02rem;
  display:inline-flex;align-items:center;gap:10px;transition:var(--transition);
}
.btn-hero-outline:hover{background:#fff;color:var(--primary);border-color:#fff;transform:translateY(-3px);}
.hero-trust{display:flex;gap:24px;flex-wrap:wrap;margin-top:1.6rem;}
.hero-trust > div{display:flex;align-items:center;gap:10px;font-size:0.9rem;color:rgba(255,255,255,0.9);}
.hero-trust i{color:#9ecbff;font-size:1.1rem;}
.hero-stats{display:flex;gap:2.2rem;margin-top:1.8rem;flex-wrap:wrap;}
.hero-stats .num{font-size:2.2rem;font-weight:800;color:#fff;line-height:1;}
.hero-stats .lbl{font-size:0.85rem;color:rgba(255,255,255,0.75);letter-spacing:0.5px;}
.hero-stats > div{border-left:3px solid rgba(158,203,255,0.6);padding-left:16px;}
.hero-scroll{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:2;
  color:rgba(255,255,255,0.7);font-size:1.6rem;animation:bounce 2s infinite;
}
@keyframes bounce{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,12px);}}

/* mute/play control */
.hero-video-toggle{
  position:absolute;bottom:28px;right:28px;z-index:3;
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,0.4);
  background:rgba(0,27,58,0.5);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:var(--transition);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.hero-video-toggle:hover{background:var(--primary);}

@media(max-width:768px){
  .hero-banner{min-height:90vh;padding:100px 0 60px;}
  .hero-banner h1{font-size:2.3rem;}
  .hero-stats{gap:1.5rem;}
  .hero-stats .num{font-size:1.9rem;}
  .hero-scroll{display:none;}
}

/* ---------- MODERN SECTION POLISH ---------- */
.section{padding:96px 0;}
.eyebrow{display:inline-block;color:var(--primary);font-weight:800;letter-spacing:2px;
  text-transform:uppercase;font-size:0.78rem;margin-bottom:0.6rem;}
.section-title h2{font-size:2.6rem;letter-spacing:-0.5px;}

/* glassy modern service cards w/ image */
.service-card{
  background:#fff;border-radius:18px;padding:0;overflow:hidden;
  border:1px solid rgba(0,82,165,0.08);box-shadow:0 6px 18px rgba(0,40,100,0.06);
  transition:var(--transition);height:100%;text-align:left;
}
.service-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-blue);border-color:rgba(0,82,165,0.25);}
.service-card .sc-img{position:relative;height:170px;overflow:hidden;}
.service-card .sc-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.service-card:hover .sc-img img{transform:scale(1.08);}
.service-card .sc-img::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,43,100,0.5),transparent 60%);}
.service-card .sc-icon{
  position:absolute;bottom:-26px;left:24px;width:54px;height:54px;border-radius:14px;
  background:var(--grad-blue);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;box-shadow:var(--shadow-md);z-index:2;
}
.service-card .sc-body{padding:34px 24px 26px;}
.service-card .sc-body h4{font-size:1.2rem;margin-bottom:.5rem;}
.service-card .sc-body p{color:var(--gray);font-size:.93rem;margin-bottom:1rem;}
.service-card .sc-link{color:var(--primary);font-weight:700;text-decoration:none;font-size:.9rem;display:inline-flex;align-items:center;gap:6px;}
.service-card .sc-link:hover{gap:10px;}

/* premium value cards */
.value-card{background:#fff;border-radius:18px;padding:2rem;border:1px solid rgba(0,82,165,0.08);
  box-shadow:0 6px 18px rgba(0,40,100,0.06);height:100%;transition:var(--transition);}
.value-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-blue);}
.value-card .vc-icon{width:60px;height:60px;border-radius:16px;background:var(--primary-50);
  color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin-bottom:1.2rem;}

.trust-badge{display:inline-flex;align-items:center;gap:8px;background:var(--primary-50);
  color:var(--primary);padding:8px 16px;border-radius:50px;font-weight:600;font-size:.88rem;margin:4px;}

/* CTA band */
.cta-band{background:var(--grad-blue);color:#fff;border-radius:24px;padding:3.5rem;position:relative;overflow:hidden;box-shadow:var(--shadow-blue);}
.cta-band h2,.cta-band h3{color:#fff;}
.cta-band::before{content:'';position:absolute;right:-80px;top:-80px;width:320px;height:320px;border-radius:50%;background:rgba(255,255,255,0.08);}
.cta-band::after{content:'';position:absolute;left:-60px;bottom:-100px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,0.06);}
.btn-light-custom{background:#fff;color:var(--primary);border-radius:50px;padding:14px 34px;font-weight:700;border:none;transition:var(--transition);display:inline-flex;align-items:center;gap:8px;}
.btn-light-custom:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,0.2);}

/* process cards */
.process-card{background:#fff;border-radius:18px;padding:2.4rem 1.6rem 2rem;box-shadow:0 6px 18px rgba(0,40,100,0.06);
  border:1px solid rgba(0,82,165,0.08);color:var(--primary);height:100%;position:relative;transition:var(--transition);text-align:center;}
.process-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-blue);}
.process-card .step-number{position:absolute;top:-20px;left:50%;transform:translateX(-50%);width:46px;height:46px;border-radius:50%;
  background:var(--grad-blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;box-shadow:var(--shadow-md);}
.process-card h5{margin-top:1.2rem;font-size:1.05rem;}
.process-card p{color:var(--gray);font-size:.9rem;}
.process-card i{color:var(--primary);}

/* product cards modern */
.product-card{border-radius:18px;border:1px solid rgba(0,82,165,0.08);box-shadow:0 6px 18px rgba(0,40,100,0.06);transition:var(--transition);padding:1.5rem;}
.product-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-blue);}
.product-image{width:100%;height:210px;object-fit:cover;border-radius:14px;margin-bottom:1rem;background:var(--primary-50);}

/* images */
.feature-img{width:100%;border-radius:20px;box-shadow:var(--shadow-blue);object-fit:cover;}
.img-frame{position:relative;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-blue);}
.img-frame img{width:100%;display:block;transition:transform .6s ease;}
.img-frame:hover img{transform:scale(1.05);}
.img-frame--badge::after{content:attr(data-badge);position:absolute;left:18px;bottom:18px;background:rgba(0,27,58,0.7);
  color:#fff;padding:8px 16px;border-radius:50px;font-size:.82rem;font-weight:600;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}

/* navbar premium */
.navbar{backdrop-filter:blur(10px);}
.navbar-brand span{color:var(--primary);}
.btn-nav-quote{background:var(--grad-blue);color:#fff!important;border-radius:50px;padding:9px 22px!important;font-weight:700;transition:var(--transition);}
.btn-nav-quote:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);color:#fff!important;}
.btn-nav-quote::after{display:none!important;}

/* blog */
.blog-card{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 6px 18px rgba(0,40,100,0.06);
  border:1px solid rgba(0,82,165,0.08);height:100%;transition:var(--transition);display:flex;flex-direction:column;}
.blog-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-blue);}
.blog-card .blog-thumb{width:100%;height:210px;object-fit:cover;}
.blog-card .blog-body{padding:1.6rem;display:flex;flex-direction:column;flex:1;}
.blog-meta{font-size:.8rem;color:var(--gray);margin-bottom:.5rem;display:flex;gap:1rem;flex-wrap:wrap;}
.blog-category{display:inline-block;background:var(--primary-50);color:var(--primary);padding:4px 14px;border-radius:50px;
  font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.8rem;align-self:flex-start;}
.blog-card h4{font-size:1.2rem;line-height:1.35;}
.blog-card p{color:var(--gray);font-size:.92rem;flex:1;}
.blog-card .read-more{color:var(--primary);font-weight:700;text-decoration:none;margin-top:auto;display:inline-flex;gap:6px;align-items:center;}
.blog-card .read-more:hover{gap:10px;}
.blog-featured{background:#fff;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-blue);border:1px solid rgba(0,82,165,0.08);}
.blog-featured img{width:100%;height:100%;min-height:340px;object-fit:cover;}

/* page header w/ image */
.page-header{padding:160px 0 80px;position:relative;background-size:cover;background-position:center;}

.text-primary-custom{color:var(--primary)!important;}
.btn-link{color:var(--primary);text-decoration:none;font-weight:600;}

/* ============================================================
   FINAL TOUCH v3 — layout fixes + SRNE-inspired slick polish
   ============================================================ */

/* Fix: ensure the fixed navbar never overlaps page content.
   The homepage hero sits behind the navbar by design (transparent over video),
   but every OTHER page needs clearance. We add scroll-margin + a body class. */
body.has-fixed-nav { /* reserved */ }

/* Inner-page headers already pad 160px top to clear the navbar — keep, but
   guarantee a minimum so nothing tucks under the bar on small laptops. */
.page-header{ padding:140px 0 70px; }
@media (min-width:992px){ .page-header{ padding:170px 0 80px; } }

/* Smooth, lighter navbar that reads well over the dark hero video too */
.navbar{ padding:0.85rem 0; }
.navbar .navbar-brand{ color:var(--dark); }
.navbar-nav .nav-link{ font-size:0.95rem; }

/* Hero: keep the video text crisply ON TOP of the footage (z-index hardening) */
.hero-banner__video{ z-index:0; }
.hero-banner__overlay{ z-index:1; }
.hero-banner .container, .hero-banner__content{ position:relative; z-index:2; }
.hero-video-toggle{ z-index:4; }
/* slightly stronger left-side darkening so white text always passes contrast */
.hero-banner__overlay{
  background:linear-gradient(110deg, rgba(0,20,48,0.92) 0%, rgba(0,46,104,0.80) 50%, rgba(0,82,165,0.45) 100%);
}

/* ---- SRNE-style SOLUTION cards (image card + title + learn more) ---- */
.solution-card{
  position:relative; border-radius:16px; overflow:hidden; height:300px;
  display:flex; align-items:flex-end; box-shadow:0 8px 24px rgba(0,40,100,0.10);
  isolation:isolate;
}
.solution-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0; transition:transform .6s ease;
}
.solution-card::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(0,27,58,0.92) 0%, rgba(0,46,104,0.35) 55%, rgba(0,46,104,0.05) 100%);
}
.solution-card:hover img{ transform:scale(1.07); }
.solution-card .sol-body{ position:relative; z-index:2; padding:1.6rem; color:#fff; }
.solution-card .sol-body h4{ color:#fff; margin-bottom:.4rem; font-size:1.25rem; }
.solution-card .sol-body p{ color:rgba(255,255,255,0.88); font-size:.9rem; margin-bottom:.8rem; }
.solution-card .sol-link{ color:#fff; font-weight:700; text-decoration:none; font-size:.88rem; display:inline-flex; align-items:center; gap:6px; }
.solution-card .sol-link:hover{ gap:11px; color:#9ecbff; }

/* ---- SRNE-style STATS / partners counter strip ---- */
.counter-strip{ background:var(--grad-blue); color:#fff; border-radius:0; }
.counter-strip .counter-num{ font-size:3rem; font-weight:800; line-height:1; }
.counter-strip .counter-label{ font-size:0.95rem; color:rgba(255,255,255,0.85); letter-spacing:.5px; }
.counter-strip .vline{ width:1px; background:rgba(255,255,255,0.2); }

/* ---- Section rhythm closer to SRNE (a touch tighter, cleaner) ---- */
.section{ padding:84px 0; }
.section-title{ margin-bottom:46px; }
.section-title h2{ font-size:2.3rem; }
.section-title h2::after{ height:3px; width:60px; }

/* ---- Buttons: crisper, flatter, more corporate ---- */
.btn-primary-custom{ border-radius:8px; padding:12px 28px; box-shadow:0 6px 16px rgba(0,82,165,0.22); }
.btn-outline-primary-custom{ border-radius:8px; }
.btn-hero{ border-radius:8px; }
.btn-hero-outline{ border-radius:8px; }
.btn-light-custom{ border-radius:8px; }
.btn-nav-quote{ border-radius:8px !important; padding:9px 20px !important; }

/* ---- Service cards: tighten and align to a clean grid ---- */
.service-card{ border-radius:14px; }
.service-card .sc-img{ height:160px; }
.service-card .sc-body{ padding:30px 22px 24px; }

/* ---- Cards general: unify radii to a corporate 14–16px ---- */
.value-card,.product-card,.blog-card,.process-card,.cta-band{ border-radius:16px; }

/* ---- AOS safety: if the AOS library fails to load, never hide content.
   When AOS loads it adds .aos-init to <body>; until then, show everything. ---- */
html:not(.aos-ready) [data-aos]{ opacity:1 !important; transform:none !important; }

/* ---- Footer polish ---- */
footer{ padding:64px 0 24px; }

/* ---- Responsive hero text sizing ---- */
@media (max-width: 991px){
  .hero-banner{ height:auto; min-height:auto; max-height:none; padding:120px 0 60px; }
  .hero-banner h1{ font-size:2.2rem; }
  .hero-stats{ gap:1.4rem; }
  .hero-stats .num{ font-size:1.8rem; }
}
@media (max-width: 575px){
  .hero-banner h1{ font-size:1.85rem; }
  .hero-trust{ gap:14px; }
  .counter-strip .counter-num{ font-size:2.2rem; }
}