/**
 * ============================================================
 *  KONSTRUKTOR — Main Stylesheet
 *  Version   : 1.0.0
 *  Project   : Konstruktor Multi-Brand Paint & Decoration Store
 *  Website   : https://konstruktor.az
 * ------------------------------------------------------------
 *  Dev       : NS Studio — https://nss.az
 *  Built     : 2025
 * ============================================================
 *
 *  TABLE OF CONTENTS
 *  ---------------------------------------------------------
 *  01. CSS Custom Properties (Design Tokens)
 *  02. Reset & Base
 *  03. Typography
 *  04. Layout — Topbar / Header
 *  05. Layout — Hero (Home)
 *  06. Layout — Page Hero (Inner Pages)
 *  07. Section Blocks & Grid Utilities
 *  08. Category Grid
 *  09. Product Cards & Grid
 *  10. Product Detail
 *  11. Partner Strip / Marquee
 *  12. Branch Cards
 *  13. Blog Grid
 *  14. About Page
 *  15. Contact Page
 *  16. Catalog Bar & Filters
 *  17. Filter Arrow Navigation
 *  18. Banner
 *  19. Footer
 *  20. Pagination
 *  21. Buttons & Shared UI
 *  22. Scroll-Reveal Animations
 *  23. Hover Micro-interactions
 *  24. Reduced-Motion Overrides
 *  ---------------------------------------------------------
 */

/* ============================================================
   01. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================================ */
:root {
  --red:#ae0010;
  --red-dark:#7a0009;
  --ink:#1a1c1b;
  --graphite:#252a2c;
  --muted:#5c5e64;
  --faint:#8c8e94;
  --line:#e2e3e1;
  --paper:#f9f9f7;
  --soft:#f4f4f2;
  --white:#fff;
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:Poppins,Arial,sans-serif;
  background:var(--paper);
  color:var(--ink);
  padding-top:74px;
}
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }

.app-shell { min-height:100vh; }
.topbar {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  height:74px;
  display:flex;
  align-items:center;
  gap:20px;
  padding:0 54px;
  background:rgba(249,249,247,.94);
  backdrop-filter:blur(24px);
  border-bottom:1px solid rgba(226,227,225,.74);
}
.logo,.footer-brand {
  display:flex;
  align-items:center;
  gap:0;
  font-family:Poppins,Arial,sans-serif;
  font-size:18px;
  font-weight:700;
  letter-spacing:-.03em;
  white-space:nowrap;
  line-height:0;
  flex-shrink:0;
}
.logo img,
.footer-brand img {
  display:block;
  width:auto;
  height:auto;
  object-fit:contain;
}
.logo img {
  max-width:178px;
  max-height:50px;
}
.footer-brand img {
  max-width:196px;
  max-height:56px;
}
.topnav {
  display:flex;
  align-items:center;
  gap:18px;
  margin-left:22px;
  margin-right:auto;
}
.topnav a {
  font-family:Poppins,Arial,sans-serif;
  font-size:14px;
  font-weight:600;
  letter-spacing:.035em;
  color:var(--muted);
  white-space:nowrap;
}
.topnav a:hover { color:var(--red); }
.lang-switch {
  display:flex;
  align-items:center;
  border:1px solid var(--line);
  margin-left:0;
}
.lang-switch button,
.lang-switch a {
  height:42px;
  min-width:52px;
  display:grid;
  place-items:center;
  padding:0 13px;
  border:0;
  background:white;
  color:var(--muted);
  font-family:Poppins,Arial,sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:.1em;
}
.lang-switch button.active,
.lang-switch a.active {
  background:var(--red);
  color:white;
}
.quote-btn,.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  min-height:48px;
  padding:13px 26px;
  font-family:Poppins,Arial,sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.quote-btn,.btn.red { background:var(--red); color:white; }
.btn.light { background:white; color:var(--red); }
.btn.dark { background:var(--ink); color:white; }
.btn.ghost { background:transparent; color:rgba(255,255,255,.82); border:1px solid rgba(255,255,255,.22); }
.btn.outline { background:transparent; color:var(--red); border:1px solid rgba(174,0,16,.28); }
.btn.small { min-height:34px; padding:8px 12px; font-size:9px; }
.menu-btn { display:none; }

.hero-pro {
  min-height:calc(100vh - 74px);
  display:grid;
  grid-template-columns:52% 48%;
  background:#16080a;
  overflow:hidden;
}
.hero-panel {
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:74px max(54px,calc((100vw - 1480px)/2 + 54px)) 54px;
  color:white;
}
.eyebrow {
  font-family:Poppins,Arial,sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--red);
}
.hero-panel .eyebrow { color:rgba(255,255,255,.45); }
.hero-panel .eyebrow:before {
  content:"";
  display:inline-block;
  width:11px;
  height:11px;
  background:var(--red);
  margin-right:12px;
}
.hero-panel .eyebrow i {
  display:inline-block;
  width:11px;
  height:11px;
  background:var(--red);
  margin-right:12px;
}
.hero-panel h1 {
  max-width:620px;
  margin:34px 0 30px;
  font-family:Poppins,Arial,sans-serif;
  font-size:clamp(50px,4.4vw,72px);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.035em;
}
.hero-panel h1 span {
  display:block;
}
.hero-panel h1 .red-line {
  color:var(--red);
}
.hero-panel p {
  max-width:560px;
  color:rgba(255,255,255,.6);
  font-size:20px;
  line-height:1.62;
}
.pill-row {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:22px;
}
.pill-row span {
  padding:7px 16px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.62);
  font-family:Poppins,Arial,sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
}
.hero-actions { display:flex; gap:16px; margin-top:42px; }
.stats-pro {
  display:flex;
  justify-content:space-between;
  gap:24px;
  max-width:680px;
  margin-top:62px;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.12);
}
.stats-pro span {
  color:rgba(255,255,255,.42);
  font-size:11px;
}
.stats-pro b {
  display:block;
  color:white;
  font-family:Poppins,Arial,sans-serif;
  font-size:24px;
  font-weight:700;
  letter-spacing:-.02em;
}
.hero-photo {
  position:relative;
  min-height:calc(100vh - 74px);
}
.hero-photo:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#16080a 0%,rgba(22,8,10,.96) 12%,rgba(22,8,10,.54) 38%,rgba(22,8,10,0) 66%);
}
.hero-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.9) contrast(1.02);
}

.section-block {
  padding:72px 84px;
  background:var(--paper);
}
.section-block.muted { background:var(--soft); }
.section-head {
  max-width:1480px;
  margin:0 auto 28px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
}
.section-head h2,.page-hero-pro h1,.banner h2,.detail-copy h1 {
  font-family:Poppins,Arial,sans-serif;
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.035em;
}
.section-head h2 { margin-top:18px; font-size:42px; }
.section-head p {
  margin-top:14px;
  color:var(--muted);
  font-size:18px;
}
.outline-link {
  padding:10px 20px;
  border:1px solid rgba(174,0,16,.3);
  color:var(--red);
  font-family:Poppins,Arial,sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.category-grid-pro,.product-grid-pro,.branch-grid-pro,.brand-grid-pro,.blog-grid-pro {
  max-width:1480px;
  margin:0 auto;
  display:grid;
  gap:16px;
}
.category-grid-pro { grid-template-columns:repeat(4,1fr); }
.category-section {
  border-top:1px solid var(--line);
}
.category-tile {
  min-height:215px;
  padding:42px 34px;
  position:relative;
  overflow:hidden;
  background:white;
  color:var(--ink);
  border:1px solid var(--line);
}
.category-tile:nth-child(even) { background:white; }
.category-tile:before {
  content:"";
  display:block;
  width:38px;
  height:4px;
  margin-bottom:26px;
  background:var(--red);
}
.category-tile i {
  display:block;
  width:38px;
  height:4px;
  margin-bottom:26px;
  background:var(--red);
}
.category-tile h3 {
  position:relative;
  z-index:1;
  font-family:Poppins,Arial,sans-serif;
  font-size:22px;
  line-height:1.25;
}
.category-tile p {
  position:relative;
  z-index:1;
  margin-top:8px;
  color:var(--muted);
  font-size:17px;
  line-height:1.55;
}
.category-tile b {
  position:absolute;
  left:34px;
  bottom:38px;
  color:#ff3444;
  font-family:Poppins,Arial,sans-serif;
  font-size:14px;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.product-grid-pro { grid-template-columns:repeat(3,1fr); gap:28px; }
.product-card-pro {
  background:white;
  border:1px solid var(--line);
  transition:transform .16s ease,box-shadow .16s ease;
}
.product-card-pro:hover {
  transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(26,28,27,.08);
}
.product-image {
  position:relative;
  display:block;
  height:255px;
  overflow:hidden;
  background:var(--soft);
}
.product-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .22s ease;
}
.product-card-pro:hover .product-image img { transform:scale(1.035); }
.product-image > span {
  position:absolute;
  top:18px;
  left:18px;
  background:var(--red);
  color:white;
  padding:6px 14px;
  font-family:Poppins,Arial,sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.product-image div {
  position:absolute;
  top:18px;
  right:18px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}
.product-image b {
  background:rgba(255,255,255,.94);
  padding:6px 11px;
  font-family:Poppins,Arial,sans-serif;
  font-size:10px;
  letter-spacing:.08em;
}
.product-image ul {
  position:absolute;
  right:22px;
  bottom:20px;
  display:flex;
  gap:7px;
  list-style:none;
}
.product-image li {
  width:18px;
  height:18px;
  border:3px solid white;
}
.product-info { padding:18px; }
.product-info small {
  color:var(--muted);
  font-family:Poppins,Arial,sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:.12em;
}
.product-info h3 {
  margin:10px 0 10px;
  font-family:Poppins,Arial,sans-serif;
  font-size:20px;
  line-height:1.3;
}
.product-info p {
  color:var(--muted);
  font-size:16px;
  line-height:1.55;
  margin-bottom:14px;
}
.product-info > a {
  color:var(--red);
  font-family:Poppins,Arial,sans-serif;
  font-size:11px;
  font-weight:700;
}

.brand-strip {
  padding:40px 48px;
  background:var(--ink);
}
.brand-strip > div {
  max-width:1200px;
  margin:12px auto 0;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:14px;
}
.brand-strip .eyebrow { max-width:1200px; margin:0 auto; color:rgba(255,255,255,.42); }
.brand-strip span {
  min-height:78px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.86);
  font-family:Poppins,Arial,sans-serif;
  font-size:12px;
  font-weight:700;
}
.banner {
  padding:56px 48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  background:var(--red);
  color:white;
}
.banner h2 { font-size:24px; margin-bottom:8px; }
.banner p { max-width:620px; color:rgba(255,255,255,.76); }

.page-hero-pro {
  padding:78px 84px 58px;
  background:white;
  border-bottom:1px solid var(--line);
}
.page-hero-inner {
  max-width:1480px;
  margin-left:auto;
  margin-right:auto;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
}
.page-hero-inner strong {
  color:#e8e8e8;
  font-family:Poppins,Arial,sans-serif;
  font-size:58px;
  line-height:1;
}
.page-hero-pro h1 {
  margin-top:24px;
  font-size:48px;
}
.page-hero-pro p {
  max-width:760px;
  margin-top:10px;
  color:var(--muted);
  font-size:20px;
  line-height:1.7;
}
.catalog-bar {
  padding:20px 84px;
  display:flex;
  align-items:center;
  gap:18px;
  border-bottom:1px solid var(--line);
  background:white;
  flex-wrap:nowrap;
}
.catalog-bar > form.catalog-search {
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.catalog-bar input {
  width:320px;
  border:1px solid var(--line);
  background:#f0f0ee;
  padding:12px 18px;
  outline:none;
  font-size:14px;
}
.filters {
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(0,0,0,.18) transparent;
  flex:1;
  padding:2px 0;
  -webkit-overflow-scrolling:touch;
}
.filters::-webkit-scrollbar { height:4px; }
.filters::-webkit-scrollbar-track { background:transparent; }
.filters::-webkit-scrollbar-thumb { background:rgba(0,0,0,.18); border-radius:4px; }
.filters button,
.filters a {
  border:1px solid var(--line);
  background:white;
  padding:9px 16px;
  color:var(--ink);
  font-family:Poppins,Arial,sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  border-radius:6px;
  white-space:nowrap;
  flex-shrink:0;
  transition:background .15s, border-color .15s, color .15s;
}
.filters a:hover { border-color:var(--red); color:var(--red); }
.filters button.active,
.filters a.active { background:var(--red); color:white; border-color:var(--red); }

/* ── Filter arrows wrapper ── */
.filters-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.filter-arrow {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 7px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s, color .15s, opacity .22s;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}
.filter-arrow:hover { border-color: var(--red); color: var(--red); }
.filter-arrow:active { background: #fef2f2; }
.filter-arrow:disabled {
  opacity: 0;
  pointer-events: none;
}
/* Soft fade edges */
.filters-wrap::before,
.filters-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 28px;
  z-index: 1;
  pointer-events: none;
  transition: opacity .2s;
}
.filters-wrap::before { left:40px;  background: linear-gradient(to right, #fff 0%, transparent 100%); }
.filters-wrap::after  { right:40px; background: linear-gradient(to left,  #fff 0%, transparent 100%); }
.filters-wrap.at-start::before { opacity: 0; }
.filters-wrap.at-end::after   { opacity: 0; }

.empty {
  grid-column:1/-1;
  padding:80px 0;
  text-align:center;
  color:var(--muted);
}

.branch-grid-pro { grid-template-columns:repeat(4,1fr); }
.branch-card-pro {
  padding:22px;
  background:white;
  border:1px solid var(--line);
}
.branch-card-pro h3 {
  font-family:Poppins,Arial,sans-serif;
  font-size:18px;
}
.branch-card-pro p { margin-top:4px; color:var(--muted); }
.branch-card-pro strong {
  display:block;
  margin-top:10px;
  color:var(--red);
  font-family:Poppins,Arial,sans-serif;
}
.branch-card-pro > span,.count-badge {
  display:inline-flex;
  margin-top:12px;
  padding:4px 10px;
  background:#fff1f1;
  color:var(--red);
  font-family:Poppins,Arial,sans-serif;
  font-size:9px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.branch-card-pro div {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:18px;
}

.brand-grid-pro { grid-template-columns:repeat(4,1fr); }
.brand-grid-pro article {
  padding:26px;
  background:white;
  border:1px solid var(--line);
}
.brand-grid-pro article div {
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
  background:var(--red);
  color:white;
  font-family:Poppins,Arial,sans-serif;
  font-size:24px;
  font-weight:700;
  margin-bottom:18px;
}
.brand-grid-pro h3 {
  font-family:Poppins,Arial,sans-serif;
  margin-bottom:8px;
}
.brand-grid-pro p { color:var(--muted); font-size:13px; line-height:1.6; }

.partner-logo-grid a {
  display:flex;
  min-height:235px;
  padding:26px;
  flex-direction:column;
  background:white;
  border:1px solid var(--line);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.partner-logo-grid a:hover {
  transform:translateY(-3px);
  border-color:rgba(174,0,16,.22);
  box-shadow:0 18px 40px rgba(26,28,27,.08);
}
.partner-logo-box {
  height:92px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:auto;
  padding:16px;
  background:var(--soft);
  border:1px solid var(--line);
}
.partner-logo-box img {
  max-width:100%;
  max-height:58px;
  object-fit:contain;
}
.partner-logo-grid h3 {
  margin:24px 0 8px;
}

.detail-crumb {
  padding:22px 84px;
  display:flex;
  gap:16px;
  align-items:center;
  border-bottom:1px solid var(--line);
  background:white;
  color:var(--muted);
  font-family:Poppins,Arial,sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:.12em;
}
.detail-crumb b { color:var(--red); }
.detail-top {
  display:grid;
  grid-template-columns:48% 52%;
  gap:0;
  min-height:600px;
  background:white;
}
.detail-media {
  position:relative;
  background:white;
}
.detail-media > img {
  width:100%;
  height:100%;
  min-height:600px;
  object-fit:cover;
}
.detail-media:not(.detail-gallery) div {
  position:absolute;
  left:18px;
  bottom:18px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.detail-media span,.tag-row span {
  background:white;
  padding:7px 11px;
  color:var(--ink);
  font-family:Poppins,Arial,sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.detail-gallery {
  min-height:600px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:48px;
  background:linear-gradient(145deg,#f3f3f0,#fff);
}
.gallery-main {
  width:min(460px,100%);
  aspect-ratio:1/1;
  overflow:hidden;
  background:white;
  box-shadow:0 24px 60px rgba(0,0,0,.12);
}
.gallery-main img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.gallery-thumbs {
  display:grid;
  grid-template-columns:repeat(3,64px);
  gap:10px;
}
.gallery-thumbs img {
  width:64px;
  height:64px;
  object-fit:cover;
  border:2px solid white;
  box-shadow:0 8px 24px rgba(0,0,0,.1);
}
.detail-copy { padding:96px 84px 58px; }
.tag-row {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:0;
}
.tag-row span { background:var(--soft); border:1px solid var(--line); }
.detail-copy h1 {
  margin:26px 0;
  font-size:48px;
}
.detail-copy p {
  max-width:650px;
  color:var(--muted);
  font-size:20px;
  line-height:1.75;
  padding-bottom:32px;
  border-bottom:1px solid var(--line);
}
.detail-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:28px;
}
.spec-box,.method-box {
  border:1px solid var(--line);
  background:white;
  padding:20px;
}
.detail-copy .method-box {
  border:0;
  padding:0;
  margin-top:28px;
}
.spec-box h3,.method-box h3,.certs h2,.calc h2 {
  font-family:Poppins,Arial,sans-serif;
  font-size:14px;
  color:var(--muted);
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:14px;
}
.spec-box div {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:12px 0;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
}
.spec-box b {
  color:var(--ink);
  font-family:Poppins,Arial,sans-serif;
}
.method-box div {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.method-box span {
  width:74px;
  min-height:74px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:#fff1f1;
  color:var(--red);
  font-family:Poppins,Arial,sans-serif;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
}
.method-box svg {
  width:23px;
  height:23px;
  fill:none;
  stroke:var(--red);
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.detail-actions { display:flex; gap:18px; margin-top:48px; }
.detail-lower {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:24px;
  padding:52px 84px;
  background:var(--paper);
}
.calc {
  position:relative;
  overflow:hidden;
  padding:28px;
  background:var(--graphite);
  color:white;
}
.calc:after {
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:90px;
  height:90px;
  border-radius:0 0 0 90px;
  background:rgba(174,0,16,.18);
}
.calc h2 {
  position:relative;
  z-index:1;
  color:white;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.calc-fields {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:16px;
}
.calc label {
  display:grid;
  gap:7px;
  color:rgba(255,255,255,.62);
  font-family:Poppins,Arial,sans-serif;
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.calc input,.calc select {
  width:100%;
  border:0;
  outline:0;
  background:var(--line);
  color:var(--ink);
  padding:12px 14px;
  font-size:18px;
}
.calc-result {
  position:relative;
  z-index:1;
  background:white;
  color:var(--ink);
  border-left:3px solid var(--red);
  padding:18px 20px;
}
.calc-result small {
  display:block;
  color:var(--muted);
  font-family:Poppins,Arial,sans-serif;
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.calc-result b {
  font-family:Poppins,Arial,sans-serif;
  font-size:38px;
  letter-spacing:-.03em;
}
.calc-result span { color:var(--muted); margin-left:5px; }
.calc-result em {
  display:block;
  margin-top:8px;
  color:var(--muted);
  font-family:Poppins,Arial,sans-serif;
  font-size:10px;
  font-style:normal;
}
.certs {
  padding:24px;
  background:var(--soft);
  border:1px solid var(--line);
}
.certs div {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 16px;
  margin-bottom:8px;
  background:white;
  border:1px solid var(--line);
}
.certs span {
  font-family:Poppins,Arial,sans-serif;
  font-weight:700;
  font-size:13px;
}
.certs button {
  border:1px solid var(--red);
  background:white;
  color:var(--red);
  padding:7px 14px;
  font-family:Poppins,Arial,sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* ── About page (legacy class kept for contact layout) ── */
.about-section,.contact-section {
  padding:54px 48px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:40px;
  background:var(--paper);
}
.about-section h2 {
  font-family:Poppins,Arial,sans-serif;
  font-size:28px;
  line-height:1.18;
  margin-bottom:18px;
}
.about-section p {
  color:var(--muted);
  line-height:1.8;
  margin-bottom:16px;
}
.metric-grid-pro {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.metric-grid-pro span {
  padding:24px;
  background:white;
  border:1px solid var(--line);
  color:var(--muted);
}
.metric-grid-pro b {
  display:block;
  color:var(--red);
  font-family:Poppins,Arial,sans-serif;
  font-size:34px;
  letter-spacing:-.03em;
}
/* ── About page — new story section ── */
.about-story-section {
  background:#fff;
  border-bottom:1px solid var(--line);
}
.about-story-inner {
  max-width:1480px;
  margin:0 auto;
  padding:72px 84px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}
.about-story-copy h2 {
  font-family:Poppins,Arial,sans-serif;
  font-size:34px;
  line-height:1.15;
  letter-spacing:-.02em;
  margin-bottom:24px;
}
.about-story-copy p {
  color:var(--muted);
  line-height:1.85;
  font-size:17px;
  margin-bottom:18px;
}
.about-cta {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-top:12px;
  padding:.75rem 1.5rem;
  background:var(--red);
  color:#fff;
  font-weight:600;
  font-size:.9rem;
  border-radius:6px;
  transition:background .18s;
}
.about-cta:hover { background:var(--red-dark); }
.about-story-visual {
  border-radius:12px;
  overflow:hidden;
  aspect-ratio:4/3;
  background:var(--paper);
  box-shadow:0 8px 32px rgba(0,0,0,.08);
}
.about-story-img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.about-story-placeholder {
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1rem;
  color:var(--muted);
  font-size:.875rem;
  text-align:center;
  padding:2rem;
}
.about-story-placeholder span { font-size:3rem; opacity:.35; }
/* ── About stats band ── */
.about-stats-band {
  background:var(--graphite);
  color:#fff;
}
.about-stats-inner {
  max-width:1480px;
  margin:0 auto;
  padding:52px 84px;
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  align-items:center;
  gap:0;
}
.about-stat-item {
  text-align:center;
  padding:0 32px;
}
.about-stat-item strong {
  display:block;
  font-family:Poppins,Arial,sans-serif;
  font-size:52px;
  font-weight:700;
  letter-spacing:-.04em;
  color:var(--red);
  line-height:1;
  margin-bottom:10px;
}
.about-stat-item span {
  font-size:13px;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.6;
}
.about-stat-sep {
  width:1px;
  height:56px;
  background:rgba(255,255,255,.12);
}
.contact-section { grid-template-columns:.85fr 1.15fr; }
.contact-panel-pro {
  padding:32px;
  background:var(--graphite);
  color:white;
}
.contact-panel-pro h2,.contact-form-pro h2 {
  font-family:Poppins,Arial,sans-serif;
  margin-bottom:22px;
}
.contact-panel-pro dt {
  border-top:1px solid rgba(255,255,255,.14);
  padding-top:16px;
  color:rgba(255,255,255,.45);
  font-family:Poppins,Arial,sans-serif;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.contact-panel-pro dd {
  margin:6px 0 16px;
  color:rgba(255,255,255,.86);
}
.contact-form-pro {
  padding:32px;
  background:white;
  border:1px solid var(--line);
}
.contact-form-pro input,.contact-form-pro textarea {
  width:100%;
  border:1px solid var(--line);
  outline:0;
  padding:14px 16px;
  margin-bottom:12px;
  resize:vertical;
}
.blog-grid-pro { grid-template-columns:repeat(3,1fr); }
.blog-grid-pro article {
  background:white;
  border:1px solid var(--line);
  padding-bottom:20px;
}
.blog-grid-pro img {
  width:100%;
  height:210px;
  object-fit:cover;
}
.blog-grid-pro span {
  display:inline-flex;
  margin:16px 20px 0;
  background:var(--red);
  color:white;
  padding:4px 10px;
  font-family:Poppins,Arial,sans-serif;
  font-size:9px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.blog-grid-pro h3 {
  margin:12px 20px 8px;
  font-family:Poppins,Arial,sans-serif;
}
.blog-grid-pro p {
  margin:0 20px;
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
}

.footer {
  padding:52px 48px 28px;
  background:var(--ink);
  color:white;
}
.footer-grid {
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.4fr repeat(3,1fr);
  gap:40px;
}
.footer p,.footer a,.footer span {
  display:block;
  color:rgba(255,255,255,.74);
  font-size:12px;
  line-height:1.65;
  margin:0 0 8px;
}
.footer h3 {
  margin-bottom:14px;
  color:rgba(255,255,255,.6);
  font-family:Poppins,Arial,sans-serif;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.footer-brand {
  color:white;
  margin-bottom:14px;
}
.footer-bottom {
  max-width:1200px;
  margin:34px auto 0;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  color:rgba(255,255,255,.55);
  font-family:Poppins,Arial,sans-serif;
  font-size:10px;
  letter-spacing:.08em;
}
.footer-bottom span,
.footer-bottom a {
  display:inline;
  margin:0;
  color:rgba(255,255,255,.7);
  font-size:10px;
  line-height:1.6;
}
.footer-bottom a {
  color:white;
  border-bottom:1px solid rgba(255,255,255,.45);
}
.fb-credit {
  color:#fff !important;
  font-weight:600;
  border-bottom:1px dashed rgba(255,255,255,.55) !important;
  padding-bottom:1px;
  transition:color .15s, border-color .15s;
}
.fb-credit:hover {
  color:#ffd5d8 !important;
  border-bottom-color:#ffd5d8 !important;
}

@media(max-width:1100px) {
  .topnav,.quote-btn { display:none; }
  .menu-btn {
    display:inline-flex;
    margin-left:auto;
    border:0;
    background:var(--ink);
    color:white;
    padding:10px 13px;
    font-family:Poppins,Arial,sans-serif;
    font-size:11px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
  }
  .topnav.open {
    display:flex;
    position:absolute;
    left:24px;
    right:24px;
    top:68px;
    padding:18px;
    flex-direction:column;
    align-items:flex-start;
    background:white;
    border:1px solid var(--line);
  }
  .hero-pro,.detail-top,.about-section,.contact-section,.detail-lower { grid-template-columns:1fr; }
  .hero-photo { min-height:340px; }
  .hero-photo:after { background:linear-gradient(180deg,#16080a,rgba(22,8,10,0) 50%); }
  .category-grid-pro,.branch-grid-pro,.brand-grid-pro,.footer-grid { grid-template-columns:1fr 1fr; }
  .about-story-inner { grid-template-columns:1fr; gap:40px; padding:52px 48px; }
  .about-story-visual { order:-1; aspect-ratio:16/9; }
  .about-stats-inner { grid-template-columns:1fr 1fr; gap:0; padding:40px 48px; }
  .about-stat-sep:nth-child(4) { display:none; }
  .about-stat-item { padding:24px 16px; }
}

@media(max-width:720px) {
  .topbar { padding:0 16px; gap:12px; }
  .logo { font-size:14px; }
  .logo img { max-width:132px; max-height:42px; }
  .footer-brand img { max-width:168px; }
  .lang-switch button,
  .lang-switch a { height:30px; min-width:34px; padding:0 8px; font-size:10px; }
  .hero-panel,.section-block,.page-hero-pro,.banner,.detail-top,.detail-lower,.about-section,.contact-section,.footer { padding-left:24px; padding-right:24px; }
  .hero-panel h1 { font-size:42px; }
  .hero-actions,.banner,.detail-actions { flex-direction:column; align-items:stretch; }
  .category-grid-pro,.product-grid-pro,.branch-grid-pro,.brand-grid-pro,.blog-grid-pro,.footer-grid,.calc-fields,.detail-grid,.metric-grid-pro { grid-template-columns:1fr; }
  .section-head { align-items:flex-start; flex-direction:column; }
  .stats-pro { flex-direction:column; }
  .about-story-inner { padding:36px 24px; gap:28px; }
  .about-story-copy h2 { font-size:26px; }
  .about-stats-inner { grid-template-columns:1fr 1fr; padding:28px 24px; }
  .about-stat-item strong { font-size:38px; }
  .about-stat-sep { display:none; }
}

body { padding-top:68px; }
body,button,input,select,textarea {
  font-family:Poppins,Arial,sans-serif;
}
.logo,.footer-brand,.topnav a,.lang-switch a,.quote-btn,.btn,.eyebrow,
.section-head h2,.page-hero-pro h1,.banner h2,.detail-copy h1,
.product-info h3,.product-info small,.outline-link,.category-tile h3,
.category-tile b,.home-brands strong,.home-brands b,.branch-card-pro h3,
.footer h3,.footer-bottom {
  font-family:Poppins,Arial,sans-serif;
}
.eyebrow {
  font-weight:700;
  letter-spacing:.18em;
}
.topbar { height:68px; padding:0 48px; }
.topnav a { font-size:12px; }
.quote-btn,.btn { min-height:44px; padding:12px 22px; font-size:12px; }
.hero-pro,.hero-photo { min-height:calc(100vh - 68px); }
.hero-panel { padding:66px max(32px,calc((100vw - 1640px)/2 + 32px)) 48px; }
.hero-panel h1 { max-width:620px; margin:28px 0 24px; font-size:clamp(44px,4vw,60px); }
.hero-panel p { max-width:650px; font-size:16px; }
.pill-row { flex-wrap:nowrap; max-width:700px; }
.hero-actions { margin-top:36px; }
.stats-pro { margin-top:46px; }
.section-block { padding:60px 64px; }
.section-head,.category-grid-pro,.product-grid-pro,.branch-grid-pro,.brand-grid-pro,.blog-grid-pro { max-width:1280px; }
.section-head h2 { margin-top:14px; font-size:32px; }
.home-category-showcase {
  background:var(--paper);
  border-top:1px solid var(--line);
}
.home-category-showcase .section-head {
  align-items:center;
  margin-bottom:36px;
}
.home-category-showcase h1 {
  margin-top:18px;
  font-family:Poppins,Arial,sans-serif;
  font-size:clamp(34px,3vw,46px);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.02em;
}
.home-category-showcase .section-head p {
  margin-top:16px;
  font-size:18px;
  line-height:1.55;
}
.home-category-grid {
  grid-template-columns:repeat(6,1fr);
  gap:14px;
}
.category-tile { min-height:190px; padding:32px 28px; }
.category-tile h3 { font-size:19px; }
.category-tile p { font-size:14px; }
.category-tile b { left:28px; bottom:28px; }
.home-category-grid .category-tile {
  min-height:292px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:28px 22px 30px;
  border:0;
  background:
    linear-gradient(0deg,var(--cat-overlay),var(--cat-overlay)),
    var(--cat-image) center/cover;
  color:white;
}
.home-category-grid .category-tile:before {
  width:32px;
  height:4px;
  margin:0 0 16px;
  background:var(--cat-accent);
}
.home-category-grid .category-tile h3 {
  font-size:21px;
  line-height:1.2;
  letter-spacing:-.02em;
}
.home-category-grid .category-tile p {
  margin-top:10px;
  color:rgba(255,255,255,.72);
  font-size:14px;
  line-height:1.55;
}
.home-category-grid .category-tile b {
  position:static;
  margin-top:18px;
  color:var(--cat-accent);
  font-size:11px;
  letter-spacing:.16em;
}
.product-image { height:220px; }
.page-hero-pro { padding:58px 64px 44px; }
.page-hero-inner { max-width:1280px; }
.page-hero-pro h1 { font-size:40px; }
.catalog-bar { padding:18px 64px; }
.brand-strip > .section-head,
.brand-strip .section-head.dark {
  display:flex;
  grid-template-columns:none;
  align-items:center;
  justify-content:space-between;
  max-width:1280px;
  margin:0 auto 28px;
}
.outline-link.inverse { border-color:rgba(255,255,255,.16); color:rgba(255,255,255,.72); }
.home-brands > div:last-child { max-width:1280px; grid-template-columns:repeat(8,1fr); }
.home-brands > div:last-child a {
  min-height:104px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.05);
}
.home-brands > .section-head .outline-link {
  min-height:auto;
  display:inline-flex;
  width:auto;
  padding:12px 20px;
  align-items:center;
  justify-content:center;
  background:transparent;
  font-size:10px;
  line-height:1;
}
.home-brands b {
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--red);
  color:white;
  font-family:Poppins,Arial,sans-serif;
  font-size:12px;
}
.home-brands strong {
  color:rgba(255,255,255,.88);
  font-family:Poppins,Arial,sans-serif;
  font-size:11px;
}
.home-brands small { color:rgba(255,255,255,.38); font-size:10px; }
.home-brands .partner-marquee {
  max-width:1280px;
  overflow:hidden;
  display:block;
  margin:0 auto;
  border-left:1px solid rgba(255,255,255,.08);
  border-right:1px solid rgba(255,255,255,.08);
}
.home-brands .partner-track {
  width:max-content;
  display:flex;
  animation:partner-marquee 24s linear infinite;
}
.home-brands .partner-set {
  display:flex;
  gap:14px;
  padding-right:14px;
  flex:0 0 auto;
}
.home-brands .partner-marquee:hover .partner-track {
  animation-play-state:paused;
}
.home-brands .partner-track a {
  width:168px;
  min-height:92px;
  padding:18px 20px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.05);
}
.home-brands .partner-track img {
  width:134px;
  height:52px;
  object-fit:contain;
  filter:grayscale(1);
}
.home-brands .partner-track a:hover img {
  filter:none;
}
@keyframes partner-marquee {
  from { transform:translateX(0); }
  to { transform:translateX(-50%); }
}
.branch-grid-pro.compact .branch-card-pro { padding:16px 18px; border-left:3px solid var(--red); }
.detail-crumb { padding:16px 64px; }
.detail-top,.detail-media > img,.detail-gallery { min-height:520px; }
.detail-copy { padding:66px 64px 48px; }
.detail-copy h1 { font-size:40px; }
.detail-copy p { font-size:16px; }
.detail-lower { padding:44px 64px; }
.footer {
  padding:52px 48px 30px;
  background:linear-gradient(160deg,var(--red) 0%,var(--red-dark) 100%);
}
.footer-grid,.footer-bottom { max-width:1280px; }
.footer-grid > div:first-child:after {
  content:"";
  display:block;
  width:12px;
  height:12px;
  margin-top:18px;
  border-radius:50%;
  background:#e74c3c;
  box-shadow:18px 0 0 #3498db,36px 0 0 #2ecc71,54px 0 0 #f39c12,72px 0 0 #9b59b6;
}
.modal-open { overflow:hidden; }
.branch-modal {
  position:fixed;
  inset:0;
  z-index:300;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(18,19,20,.62);
  backdrop-filter:blur(10px);
}
.branch-modal-card {
  width:min(720px,100%);
  max-height:min(720px,calc(100vh - 48px));
  overflow:hidden;
  background:white;
  border:1px solid rgba(255,255,255,.4);
  box-shadow:0 34px 90px rgba(0,0,0,.32);
  color:var(--ink);
}
.branch-popover-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding:20px 22px;
  background:var(--soft);
  border-bottom:1px solid var(--line);
}
.branch-popover-head span {
  display:block;
}
.branch-popover-head strong {
  font-family:Poppins,Arial,sans-serif;
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.branch-popover-head small {
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}
.branch-popover-head button {
  flex-shrink:0;
  width:36px;
  height:36px;
  border:0;
  background:var(--red);
  color:white;
  font-size:20px;
  line-height:1;
}
.branch-popover-list {
  max-height:calc(min(720px,100vh - 48px) - 96px);
  overflow:auto;
  display:grid;
  grid-template-columns:repeat(2,1fr);
}
.branch-option {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  min-height:92px;
  padding:18px 20px;
  border-right:1px solid #f0f0ee;
  border-bottom:1px solid #f0f0ee;
}
.branch-option b,.branch-option small { display:block; }
.branch-option b { font-family:Poppins,Arial,sans-serif; font-size:14px; }
.branch-option small { margin-top:4px; color:var(--muted); font-size:11px; line-height:1.45; }
.branch-option a {
  flex-shrink:0;
  padding:9px 12px;
  border:1px solid rgba(174,0,16,.18);
  background:#fff1f1;
  color:var(--red);
  font-family:Poppins,Arial,sans-serif;
  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

@media(max-width:1100px) {
  .home-category-grid { grid-template-columns:repeat(3,1fr); }
  .home-brands > div:last-child { grid-template-columns:repeat(4,1fr); }
}

@media(max-width:720px) {
  .topbar { padding:0 16px; }
  .hero-panel,.section-block,.page-hero-pro,.banner,.detail-top,.detail-lower,.about-section,.contact-section,.footer { padding-left:24px; padding-right:24px; }
  .hero-panel h1 { font-size:38px; }
  .pill-row { flex-wrap:wrap; }
  .home-category-showcase .section-head {
    align-items:flex-start;
  }
  .home-category-grid { grid-template-columns:1fr; }
  .home-category-grid .category-tile {
    min-height:238px;
  }
  .home-brands > div:last-child { grid-template-columns:1fr 1fr; }
  .branch-modal { padding:16px; }
  .branch-popover-list { grid-template-columns:1fr; }
  .branch-option { min-height:82px; border-right:0; }
  .footer-bottom {
    flex-direction:column;
    align-items:flex-start;
  }
  .gallery-thumbs { grid-template-columns:repeat(3,56px); }
  .gallery-thumbs img {
    width:56px;
    height:56px;
  }
}

h1,h2,h3,
.hero-panel h1,
.home-category-showcase h1,
.section-head h2,
.page-hero-pro h1,
.banner h2,
.detail-copy h1,
.about-section h2,
.contact-panel-pro h2,
.contact-form-pro h2,
.product-info h3,
.category-tile h3,
.branch-card-pro h3,
.brand-grid-pro h3,
.blog-grid-pro h3,
.stats-pro b,
.metric-grid-pro b {
  font-weight:600;
}

.topnav a,
.quote-btn,
.btn,
.eyebrow,
.outline-link,
.lang-switch a,
.product-info small,
.product-info > a,
.product-image > span,
.product-image b,
.category-tile b,
.home-brands strong,
.home-brands b,
.branch-card-pro strong,
.branch-card-pro > span,
.count-badge,
.footer h3,
.footer-bottom,
.certs span,
.certs button,
.branch-option a {
  font-weight:600;
}

strong,b {
  font-weight:600;
}

.hero-panel {
  padding-left:max(44px,calc((100vw - 1500px)/2 + 44px));
  padding-right:max(44px,calc((100vw - 1500px)/2 + 44px));
}

.blog-studio {
  max-width:1480px;
  margin:0 auto;
  padding:42px 64px 26px;
  display:grid;
  grid-template-columns:1.65fr .95fr;
  gap:28px;
}
.blog-hero-card,
.blog-media-card,
.blog-detail-hero {
  position:relative;
  overflow:hidden;
  background:var(--ink);
  color:white;
}
.blog-hero-card {
  min-height:520px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:48px;
}
.blog-hero-card img,
.blog-media-card img,
.blog-detail-hero img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.blog-hero-card:after,
.blog-media-card:after,
.blog-detail-hero:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,.18));
}
.blog-hero-card > *,
.blog-media-card > *,
.blog-detail-hero > div {
  position:relative;
  z-index:1;
}
.play-dot {
  width:74px;
  height:74px;
  display:grid;
  place-items:center;
  margin-bottom:34px;
  border-radius:50%;
  background:var(--red);
  color:white;
  font-size:22px;
}
.blog-hero-card small,
.blog-media-card span,
.blog-detail-hero span {
  display:inline-flex;
  width:max-content;
  padding:7px 13px;
  background:var(--red);
  color:white;
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.blog-hero-card h1 {
  max-width:780px;
  margin:18px 0 16px;
  font-size:42px;
  line-height:1.12;
}
.blog-hero-card p {
  max-width:760px;
  color:rgba(255,255,255,.78);
  font-size:18px;
  line-height:1.6;
}
.blog-cta-card {
  padding:52px 44px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:34px;
  background:var(--red);
  color:white;
}
.blog-cta-card .eyebrow { color:rgba(255,255,255,.58); }
.blog-cta-card h2 {
  margin-top:22px;
  font-size:36px;
  line-height:1.15;
}
.blog-cta-card p {
  color:rgba(255,255,255,.78);
  font-size:18px;
  line-height:1.65;
}
.blog-cta-card .btn { width:max-content; }
.blog-media-grid {
  max-width:1480px;
  margin:0 auto 64px;
  padding:0 64px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.blog-media-card {
  min-height:280px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:26px;
}
.blog-media-card h3 {
  position:relative;
  z-index:1;
  margin-top:16px;
  max-width:420px;
  font-size:24px;
  line-height:1.2;
}
.blog-detail {
  background:white;
}
.blog-detail-hero {
  min-height:560px;
  display:flex;
  align-items:flex-end;
  padding:76px 84px;
}
.blog-detail-hero div {
  max-width:850px;
}
.blog-detail-hero a {
  display:inline-flex;
  margin-right:10px;
  padding:7px 12px;
  background:white;
  color:var(--red);
  font-size:10px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.blog-detail-hero h1 {
  margin:22px 0 16px;
  font-size:52px;
  line-height:1.08;
}
.blog-detail-hero p {
  max-width:760px;
  color:rgba(255,255,255,.78);
  font-size:18px;
  line-height:1.65;
}
.blog-detail-body {
  max-width:820px;
  margin:0 auto;
  padding:54px 24px 76px;
}
.blog-detail-body p {
  margin-bottom:22px;
  color:var(--muted);
  font-size:18px;
  line-height:1.85;
}
.blog-detail-body h2 {
  margin:38px 0 16px;
  font-size:30px;
}

@media(max-width:1100px) {
  body.nav-open { overflow:hidden; }
  .topbar { z-index:500; }
  body.nav-open .topbar {
    background:transparent;
    border-bottom:0;
    backdrop-filter:none;
  }
  body.nav-open .logo {
    position:relative;
    z-index:502;
    width:142px;
    height:42px;
  }
  body.nav-open .logo img {
    opacity:0;
  }
  body.nav-open .logo:after {
    content:"";
    position:absolute;
    inset:0;
    background:url('../images/logo/konstruktor-white.png') left center/contain no-repeat;
  }
  body.nav-open .lang-switch {
    position:relative;
    z-index:502;
    border-color:rgba(255,255,255,.18);
    background:rgba(255,255,255,.08);
  }
  body.nav-open .lang-switch a {
    background:transparent;
    color:rgba(255,255,255,.72);
  }
  body.nav-open .lang-switch a.active {
    background:white;
    color:var(--red);
  }
  .menu-btn {
    position:relative;
    z-index:502;
  }
  .topnav.open {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:501;
    width:100vw;
    height:100vh;
    padding:116px 28px 36px;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    background:linear-gradient(150deg,#ae0010 0%,#7a0009 42%,#1a1c1b 100%);
    border:0;
  }
  .topnav.open a {
    padding:18px 0;
    border-bottom:1px solid rgba(255,255,255,.16);
    color:white;
    font-size:24px;
    line-height:1.1;
    letter-spacing:0;
  }
  .topnav.open:after {
    content:"Konstruktor.az · Keyfiyyət ünvanı";
    margin-top:auto;
    color:rgba(255,255,255,.62);
    font-size:12px;
    line-height:1.6;
  }
}

@media(max-width:720px) {
  body { padding-top:56px; }
  .topbar {
    height:56px;
    padding:0 12px;
    gap:8px;
  }
  .topnav.open {
    left:-24px;
    right:-24px;
    width:calc(100vw + 48px);
    padding-top:112px;
    padding-left:52px;
    padding-right:28px;
  }
  body.nav-open .logo {
    width:126px;
    height:36px;
  }
  .logo img { max-width:118px; max-height:36px; }
  .menu-btn {
    margin-left:auto;
    padding:9px 11px;
    background:var(--ink);
    font-size:10px;
  }
  .lang-switch a {
    height:28px;
    min-width:31px;
    padding:0 7px;
    font-size:10px;
  }
  .hero-pro {
    min-height:auto;
    display:block;
    position:relative;
    background:#16080a;
    overflow:hidden;
  }
  .hero-panel {
    min-height:auto;
    padding:52px 28px 50px;
    justify-content:flex-start;
  }
  .hero-panel h1 {
    max-width:330px;
    margin:22px 0 18px;
    font-size:38px;
    line-height:1.08;
  }
  .hero-panel p {
    max-width:320px;
    font-size:13px;
    line-height:1.65;
  }
  .pill-row {
    max-width:320px;
    gap:7px;
    margin-top:18px;
  }
  .pill-row span {
    padding:6px 11px;
    font-size:10px;
  }
  .hero-actions {
    gap:10px;
    margin-top:26px;
  }
  .hero-actions .btn {
    width:100%;
    min-height:42px;
    padding:11px 16px;
  }
  .stats-pro {
    max-width:320px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-top:30px;
    padding-top:18px;
  }
  .stats-pro b { font-size:22px; }
  .hero-photo {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    min-height:0;
    height:190px;
    opacity:.45;
    pointer-events:none;
  }
  .hero-photo:after {
    background:linear-gradient(180deg,#16080a 0%,rgba(22,8,10,.72) 44%,rgba(22,8,10,.18) 100%);
  }
  .section-block,
  .page-hero-pro,
  .catalog-bar,
  .detail-lower,
  .about-section,
  .contact-section,
  .footer {
    padding-left:20px;
    padding-right:20px;
  }
  .section-block { padding-top:42px; padding-bottom:42px; }
  .page-hero-pro { padding-top:38px; padding-bottom:28px; }
  .page-hero-inner {
    display:block;
  }
  .page-hero-inner strong {
    display:none;
  }
  .page-hero-pro h1 {
    margin-top:16px;
    font-size:32px;
  }
  .page-hero-pro p {
    font-size:14px;
    line-height:1.65;
  }
  .catalog-bar {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding-top:16px;
    padding-bottom:16px;
    gap:12px;
  }
  .catalog-bar > form.catalog-search {
    width:100%;
    display:flex;
    gap:8px;
  }
  .catalog-bar input {
    flex:1;
    width:auto;
    padding:11px 14px;
    font-size:13px;
  }
  .filters-wrap {
    width: 100%;
    gap: 4px;
  }
  .filters-wrap::before { left: 34px; width: 20px; }
  .filters-wrap::after  { right: 34px; width: 20px; }
  .filter-arrow {
    width: 30px;
    height: 30px;
    font-size: 17px;
    border-radius: 6px;
  }
  .filters {
    margin-top:0;
    flex:1;
    width:auto;
    display:flex;
    flex-wrap:nowrap;
    gap:8px;
    overflow-x:auto;
    padding:2px 0 6px;
  }
  .filters button,
  .filters a {
    flex:0 0 auto;
    padding:10px 13px;
    font-size:10px;
  }
  .product-grid-pro,
  .category-grid-pro,
  .branch-grid-pro,
  .brand-grid-pro,
  .blog-grid-pro,
  .footer-grid,
  .calc-fields,
  .detail-grid,
  .metric-grid-pro {
    grid-template-columns:1fr;
    gap:18px;
  }
  .product-card-pro {
    border:1px solid #ececea;
    box-shadow:0 12px 30px rgba(26,28,27,.05);
  }
  .product-image { height:210px; }
  .product-image > span {
    top:12px;
    left:12px;
    padding:5px 9px;
    font-size:9px;
  }
  .product-image div {
    top:12px;
    right:12px;
  }
  .product-image b {
    padding:5px 8px;
    font-size:8px;
  }
  .product-info {
    padding:16px;
  }
  .product-info small { font-size:10px; }
  .product-info h3 {
    margin:7px 0;
    font-size:17px;
  }
  .product-info p {
    font-size:12px;
    margin-bottom:10px;
  }
  .product-info > a {
    font-size:10px;
  }
  .home-category-showcase h1 { font-size:30px; }
  .home-category-showcase .section-head p { font-size:14px; }
  .home-category-grid .category-tile {
    min-height:178px;
    padding:22px 18px;
  }
  .home-brands > div:last-child {
    grid-template-columns:1fr 1fr;
  }
  .brand-strip { padding:40px 20px; }
  .banner {
    padding:36px 20px;
    display:block;
  }
  .banner .btn {
    margin-top:18px;
    width:100%;
  }
  .detail-crumb { padding:14px 20px; font-size:10px; }
  .detail-top {
    display:flex;
    flex-direction:column;
  }
  .detail-copy {
    padding:38px 20px 32px;
  }
  .detail-copy h1 { font-size:32px; }
  .detail-copy p { font-size:14px; }
  .detail-media > img,
  .detail-gallery {
    min-height:280px;
  }
  .detail-gallery {
    padding:26px 20px;
  }
  .gallery-main {
    width:min(300px,100%);
  }
  .about-section,
  .contact-section {
    grid-template-columns:1fr;
    gap:20px;
    padding-top:36px;
    padding-bottom:36px;
  }
  .contact-panel-pro,
  .contact-form-pro {
    padding:24px;
  }
  .blog-studio {
    padding:20px 20px 16px;
    display:block;
  }
  .blog-hero-card {
    min-height:430px;
    padding:28px 22px;
  }
  .play-dot {
    width:58px;
    height:58px;
    margin-bottom:26px;
  }
  .blog-hero-card h1 {
    font-size:31px;
  }
  .blog-hero-card p,
  .blog-cta-card p {
    font-size:14px;
  }
  .blog-cta-card {
    margin-top:16px;
    padding:30px 22px;
  }
  .blog-cta-card h2 {
    font-size:27px;
  }
  .blog-media-grid {
    padding:0 20px;
    margin-bottom:42px;
    grid-template-columns:1fr;
    gap:16px;
  }
  .blog-media-card {
    min-height:220px;
    padding:22px;
  }
  .blog-detail-hero {
    min-height:470px;
    padding:44px 20px;
  }
  .blog-detail-hero h1 {
    font-size:32px;
  }
  .blog-detail-hero p,
  .blog-detail-body p {
    font-size:15px;
  }
  .blog-detail-body {
    padding:36px 20px 54px;
  }
  .footer {
    padding-top:38px;
  }
  .footer-bottom {
    flex-direction:column;
    align-items:flex-start;
  }
  .branch-modal { padding:14px; }
  .branch-modal-card { max-height:calc(100vh - 28px); }
  .branch-popover-list {
    grid-template-columns:1fr;
    max-height:calc(100vh - 128px);
  }
  .branch-option {
    min-height:78px;
    padding:15px;
    border-right:0;
  }
}
/* ═══════════════════════════════════════════════════════════════
   PROFESSIONAL ANIMATION SYSTEM
   ═══════════════════════════════════════════════════════════════ */

/* Smooth scroll for anchor navigation */
html { scroll-behavior: smooth; }

/* Initial body fade (page enter) */
body { opacity: 0; animation: pageEnter .5s ease-out .05s forwards; }
@keyframes pageEnter { to { opacity: 1; } }

/* ── Reveal-on-scroll (IntersectionObserver toggles .is-visible) ── */
[data-reveal] {
  opacity: 0;
  transition: opacity .75s cubic-bezier(.21,.6,.35,1), transform .75s cubic-bezier(.21,.6,.35,1);
  will-change: opacity, transform;
}
[data-reveal="up"]    { transform: translateY(32px); }
[data-reveal="down"]  { transform: translateY(-28px); }
[data-reveal="left"]  { transform: translateX(36px); }
[data-reveal="right"] { transform: translateX(-36px); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal="fade"]  { transform: none; }
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ── Staggered child reveals ── */
[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s cubic-bezier(.21,.6,.35,1), transform .65s cubic-bezier(.21,.6,.35,1);
  will-change: opacity, transform;
}
[data-reveal-group].is-visible > * {
  opacity: 1;
  transform: none;
}
[data-reveal-group].is-visible > *:nth-child(1)  { transition-delay: 0ms; }
[data-reveal-group].is-visible > *:nth-child(2)  { transition-delay: 70ms; }
[data-reveal-group].is-visible > *:nth-child(3)  { transition-delay: 140ms; }
[data-reveal-group].is-visible > *:nth-child(4)  { transition-delay: 210ms; }
[data-reveal-group].is-visible > *:nth-child(5)  { transition-delay: 280ms; }
[data-reveal-group].is-visible > *:nth-child(6)  { transition-delay: 350ms; }
[data-reveal-group].is-visible > *:nth-child(7)  { transition-delay: 420ms; }
[data-reveal-group].is-visible > *:nth-child(8)  { transition-delay: 490ms; }
[data-reveal-group].is-visible > *:nth-child(n+9){ transition-delay: 560ms; }

/* ── Counter (stats numbers) — JS animates the value ── */
[data-counter] {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ── Hover micro-interactions (lift + shadow) ── */
.product-card-pro,
.category-tile,
.branch-card-pro,
.partner-card {
  transition: transform .35s cubic-bezier(.21,.6,.35,1), box-shadow .35s ease;
}
.product-card-pro:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
}
.category-tile:hover {
  transform: translateY(-3px);
}
.branch-card-pro:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0,0,0,.08);
}

/* ── Button press feedback ── */
.btn:active { transform: translateY(1px); }

/* ── Image zoom on parent hover (for category tiles etc) ── */
[data-img-zoom] img {
  transition: transform .6s cubic-bezier(.21,.6,.35,1);
}
[data-img-zoom]:hover img {
  transform: scale(1.06);
}

/* ── Hero floating shimmer (subtle) ── */
@keyframes heroShimmer {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.hero-photo img {
  animation: heroShimmer 9s ease-in-out infinite;
}

/* ── Active link underline grow ── */
.topnav a {
  position: relative;
  overflow: visible;
}
.topnav a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--red);
  transition: width .25s ease, left .25s ease;
}
.topnav a:hover::after,
.topnav a.active::after {
  width: 70%;
  left: 15%;
}

/* ── Respect reduced-motion preference ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  body { opacity: 1; animation: none; }
  [data-reveal], [data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-photo img { animation: none; }
}

.pager{display:flex;align-items:center;justify-content:center;gap:.75rem;margin:2rem auto 0;flex-wrap:wrap}
.pager-link{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:.65rem 1rem;border:1px solid rgba(17,24,39,.12);border-radius:8px;background:#fff;color:#161b22;font-weight:700;font-size:.9rem}
.pager-link:hover{border-color:#ae0010;color:#ae0010}
.pager-link.disabled{opacity:.45;pointer-events:none}
.pager-meta{font-size:.85rem;color:rgba(17,24,39,.55);font-weight:600}