/* Elite Blog UX for bd.impro-solution.com/blog.html
   Safe add-on file: it only improves blog page classes already used in the uploaded page.
   Keep image paths in blog.html unchanged: assets/product-hub/images/... */

:root{
  --bd-ink:#0b1220;
  --bd-muted:#546174;
  --bd-line:rgba(15,23,42,.10);
  --bd-soft:#f5f7fb;
  --bd-card:#ffffff;
  --bd-gold:#d7a12a;
  --bd-gold-dark:#9a6a05;
  --bd-green:#0f5132;
  --bd-shadow:0 22px 60px rgba(15,23,42,.11);
  --bd-shadow-soft:0 10px 34px rgba(15,23,42,.08);
}

html{scroll-behavior:smooth;}
body{background:linear-gradient(180deg,#f7f9fc 0%,#ffffff 35%,#f7f9fc 100%); color:var(--bd-ink);}
.container{width:min(94%,1440px)!important; max-width:1440px!important; margin-inline:auto!important;}

.topbar{background:#07111f!important; color:#dce7f5!important; font-size:13px; letter-spacing:.01em;}
.topbar .container{display:flex; justify-content:space-between; gap:18px; padding:10px 0;}
.topbar a{color:#fff!important; text-decoration:none;}
.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94)!important; backdrop-filter:blur(14px); border-bottom:1px solid var(--bd-line); box-shadow:0 8px 28px rgba(15,23,42,.06);}
.nav{min-height:86px; display:flex; align-items:center; gap:22px;}
.logo img{width:210px!important; height:auto!important; display:block;}
.menu{display:flex; align-items:center; gap:6px; margin-left:auto;}
.menu a{color:#182235!important; text-decoration:none; font-weight:700; font-size:15px; padding:13px 14px; border-radius:999px; transition:.2s ease;}
.menu a:hover,.menu a[href="blog.html"]{background:#f0f4fa; color:#0b1220!important;}
.cta,.btn.primary{background:linear-gradient(135deg,#111827,#0f5132)!important; color:#fff!important; border:0!important; box-shadow:0 15px 34px rgba(15,23,42,.18);}
.cta{padding:13px 18px!important; border-radius:999px!important; text-decoration:none!important; font-weight:800!important; white-space:nowrap;}
.hamb{border:1px solid var(--bd-line); background:#fff; border-radius:12px; min-width:44px; min-height:44px;}
.breadcrumb{background:#fff; border-bottom:1px solid var(--bd-line); color:#64748b;}
.breadcrumb .container{padding:14px 0; font-size:14px;}
.breadcrumb a{color:#0f5132; font-weight:700; text-decoration:none;}

.hero{position:relative; overflow:hidden; background:
  radial-gradient(circle at 15% 10%,rgba(215,161,42,.25),transparent 28%),
  radial-gradient(circle at 85% 12%,rgba(15,81,50,.16),transparent 30%),
  linear-gradient(135deg,#08111f 0%,#132033 48%,#0b1220 100%)!important; color:#fff!important; padding:78px 0 72px!important;}
.hero:before{content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px); background-size:44px 44px; opacity:.35; pointer-events:none;}
.hero .container{position:relative; display:grid!important; grid-template-columns:1.02fr .98fr; align-items:center; gap:46px;}
.hook{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20); color:#f8fafc!important; padding:10px 14px; border-radius:999px; font-weight:800; letter-spacing:.02em;}
.eyebrow{text-transform:uppercase; letter-spacing:.16em; color:var(--bd-gold)!important; font-weight:900; font-size:13px; margin:18px 0 10px;}
.hero h1{font-size:clamp(38px,5vw,72px)!important; line-height:.98!important; letter-spacing:-.045em!important; max-width:880px; margin:0 0 20px!important; color:#fff!important;}
.hero p{font-size:clamp(17px,1.6vw,22px)!important; line-height:1.65!important; color:#d8e0eb!important; max-width:760px; margin-bottom:28px;}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; align-items:center;}
.btn,.blog-card a{display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:12px 19px; border-radius:999px; text-decoration:none!important; font-weight:900; transition:.22s ease;}
.btn.light{background:#fff!important; color:#0b1220!important; border:1px solid rgba(255,255,255,.30)!important;}
.hero-card{margin:0; position:relative; border-radius:32px; overflow:hidden; background:#0f172a; border:1px solid rgba(255,255,255,.18); box-shadow:0 36px 90px rgba(0,0,0,.34); transform:translateZ(0);}
.hero-card img{width:100%; height:440px; object-fit:cover; display:block; opacity:.94;}
.hero-card:after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.72)); pointer-events:none;}
.hero-card figcaption{position:absolute; left:24px; right:24px; bottom:22px; z-index:2; color:#fff; font-weight:800; line-height:1.35; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(10px); padding:14px 16px; border-radius:18px;}

.section.white{background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%)!important; padding:72px 0 82px!important;}
.section-head{display:flex; justify-content:space-between; gap:24px; margin-bottom:34px; padding:30px; border:1px solid var(--bd-line); border-radius:30px; background:rgba(255,255,255,.86); box-shadow:var(--bd-shadow-soft);}
.section-head h2{font-size:clamp(30px,3vw,48px)!important; line-height:1.05!important; letter-spacing:-.035em; margin:0 0 12px!important; color:var(--bd-ink)!important;}
.lead{font-size:18px!important; line-height:1.7!important; color:var(--bd-muted)!important; max-width:900px;}
.blog-grid{display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:28px!important; align-items:stretch;}
.blog-card{position:relative; background:var(--bd-card)!important; border:1px solid var(--bd-line)!important; border-radius:28px!important; overflow:hidden!important; box-shadow:var(--bd-shadow-soft)!important; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; min-height:100%; display:flex; flex-direction:column;}
.blog-card:hover{transform:translateY(-6px); box-shadow:var(--bd-shadow)!important; border-color:rgba(215,161,42,.48)!important;}
.blog-card img{width:100%!important; height:250px!important; object-fit:cover!important; display:block!important; background:#e8edf5; border-bottom:1px solid var(--bd-line);}
.blog-card .body{padding:24px!important; display:flex; flex-direction:column; flex:1;}
.blog-card .body:before{content:"Industrial Item Guide"; align-self:flex-start; display:inline-flex; padding:7px 10px; margin-bottom:14px; border-radius:999px; background:rgba(215,161,42,.13); color:var(--bd-gold-dark); font-size:12px; font-weight:900; letter-spacing:.055em; text-transform:uppercase;}
.blog-card h3{font-size:21px!important; line-height:1.22!important; letter-spacing:-.018em; color:#101827!important; margin:0 0 12px!important;}
.blog-card p{font-size:15px!important; line-height:1.7!important; color:var(--bd-muted)!important; margin:0 0 20px!important; flex:1;}
.blog-card a{background:#0b1220!important; color:#fff!important; margin-top:auto; align-self:flex-start; font-size:14px; box-shadow:0 12px 24px rgba(15,23,42,.16);}
.blog-card a:hover{background:var(--bd-green)!important; transform:translateY(-1px);}

.footer{background:#07111f!important; color:#d8e0eb!important; padding-top:58px!important;}
.footer-grid{display:grid!important; grid-template-columns:1.4fr repeat(3,1fr)!important; gap:34px!important; padding-bottom:38px;}
.footer img{width:210px!important; height:auto!important; background:#fff; border-radius:18px; padding:10px;}
.footer h4{color:#fff!important; margin:0 0 16px;}
.footer a{display:block; color:#d8e0eb!important; text-decoration:none; margin:10px 0;}
.copy{border-top:1px solid rgba(255,255,255,.12); padding:18px 0 24px!important; color:#aebace; font-size:13px;}

@media (max-width:1180px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.hero .container{grid-template-columns:1fr}.hero-card img{height:380px}.menu{display:none}.hamb{display:inline-flex!important; align-items:center; justify-content:center}.nav{justify-content:space-between}}
@media (min-width:1181px){.hamb{display:none!important}}
@media (max-width:760px){.container{width:min(92%,100%)!important}.topbar .container{flex-direction:column; gap:6px}.nav{min-height:74px}.logo img{width:168px!important}.cta{display:none}.hero{padding:52px 0 46px!important}.hero h1{font-size:38px!important}.hero p{font-size:16px!important}.hero-card{border-radius:22px}.hero-card img{height:255px}.section.white{padding:44px 0 56px!important}.section-head{padding:22px; border-radius:22px}.blog-grid{grid-template-columns:1fr!important; gap:20px!important}.blog-card{border-radius:22px!important}.blog-card img{height:220px!important}.footer-grid{grid-template-columns:1fr!important}.breadcrumb .container{font-size:13px}.btn{width:100%}}