/* Basics */
:root{
  --primary:#0d6efd;
  --dark:#14161a;
  --glass-bg: rgba(255,255,255,.08);
  --card-border: rgba(13,110,253,.15);
  --soft-bg: #f7f9fc;
}
html{scroll-behavior:smooth}
/***** Typography tweaks *****/
.lead{font-size: clamp(1.05rem, 1.2vw, 1.35rem)}
.display-5{letter-spacing:-.3px}
.display-6{letter-spacing:-.2px}

body{font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; color:#444}
img{max-width:100%; height:auto}
.section-padding{padding:72px 0}
.section-title{font-weight:700; font-size:clamp(24px,3.2vw,36px)}

/* Header */
.header .navbar{padding:.6rem 0; box-shadow:0 1px 12px rgba(0,0,0,.06)}
.header .nav-link{padding:.5rem 1rem; color:#333}
.header .nav-link:hover, .header .nav-link.active{color:var(--primary)}
.navbar-toggler{border:none}
.navbar-toggler:focus{box-shadow:none}
.navbar-light .navbar-toggler-icon{background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}

/* Hero */
.hero-section{position:relative; margin-top:68px}
.hero-section .swiper{height:78vh; min-height:460px}
.hero-section .slide-bg{position:absolute; inset:0; background-size:cover; background-position:center}
.hero-section .overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.50), rgba(0,0,0,.35))}
.hero-section .container{position:relative; z-index:2}
.hero-section h1{ font-size: clamp(32px, 4.2vw, 56px); }
.hero-section h2{ font-size: clamp(26px, 3.6vw, 44px); }
.hero-section h1,.hero-section h2{ text-shadow:0 8px 28px rgba(0,0,0,.4)}

/* Cards */
.service-card,.product-card,.blog-card{border:1px solid var(--card-border); background:#fff; box-shadow:0 10px 30px rgba(13,110,253,.06); border-radius:16px; overflow:hidden}
.service-card .card-body,.product-card .card-body,.blog-card .card-body{padding:22px}
.service-card .card-title,.product-card .card-title,.blog-card .card-title{font-weight:700}
.service-card:hover,.product-card:hover,.blog-card:hover{transform:translateY(-3px); box-shadow:0 14px 36px rgba(13,110,253,.12); transition:all .25s ease}
/* Dark section adjustments (Products) */
#products{background: radial-gradient(1200px 600px at 50% -10%, rgba(255,255,255,.08), transparent), #0b1220}
#products .card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border-color:rgba(255,255,255,.12); color:#e9eefb}
#products .card-title{color:#fff}
#products .card-img-top{background:rgba(255,255,255,.06)}

/* About with image background */
#about.section-image-bg::before{opacity:.1}

/* Blog tweaks */
.blog-card .card-body h6{font-size:1.05rem}


/* Section variations */
.bg-soft{background:var(--soft-bg)}
.section-image-bg{position:relative}
.section-image-bg::before{content:""; position:absolute; inset:0; background-image: var(--bg); background-size:cover; background-position:center; opacity:.18}
.section-image-bg .container{position:relative; z-index:2}

/* Testimonials */
.testimonial img{object-fit:cover}

/* Footer */
footer{background:#fff}

/* Utilities */
.btn-primary{--bs-btn-bg:var(--primary); --bs-btn-border-color:var(--primary)}
section[id]{scroll-margin-top:84px}

/* AOS fix on mobile */
@media (prefers-reduced-motion: reduce){
  [data-aos]{opacity:1 !important; transform:none !important}
}