/* ═══════════════════════════════════════════════
   Promo Vision — brand: red #FD0F05 / blue #0836B0
   sampled from the logo on the business card
   ═══════════════════════════════════════════════ */

:root{
  --red:#E5170D;
  --red-600:#C11109;
  --red-050:#FFF1F0;
  --blue:#0836B0;
  --blue-700:#062A8A;
  --blue-900:#04185A;
  --blue-050:#EEF3FF;
  --wa:#25D366;
  --wa-700:#128C7E;

  --ink:#0C1222;
  --body:#4A5468;
  --mute:#7A8598;
  --line:#E4E8F0;
  --bg:#FFFFFF;
  --bg-alt:#F6F8FC;

  --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:32px;
  --sh-1:0 1px 2px rgba(12,18,34,.06), 0 4px 12px rgba(12,18,34,.05);
  --sh-2:0 4px 12px rgba(12,18,34,.07), 0 16px 40px rgba(12,18,34,.09);
  --sh-3:0 24px 70px rgba(8,54,176,.18);

  --f-head:'Outfit', system-ui, -apple-system, sans-serif;
  --f-body:'Inter', system-ui, -apple-system, sans-serif;
  --hdr-h:76px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr-h) + 16px); -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--body);
  font-family:var(--f-body); font-size:16.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.locked{overflow:hidden}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-head); color:var(--ink); margin:0; line-height:1.1; letter-spacing:-.02em}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
button{font:inherit; color:inherit; border:0; background:none; cursor:pointer}
input,textarea{font:inherit; color:inherit}
svg{width:100%; height:100%; fill:currentColor}
:focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:4px}

.wrap{width:min(1200px, 100% - 44px); margin-inline:auto}
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--blue); color:#fff; padding:12px 18px; border-radius:0 0 10px 0}
.skip:focus{left:0}

/* ─────────── buttons ─────────── */
.btn{
  --bg-btn:var(--blue); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--bg-btn); color:var(--fg);
  font-family:var(--f-head); font-weight:600; font-size:15px; letter-spacing:-.01em;
  padding:12px 20px; border-radius:100px; text-decoration:none; white-space:nowrap;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s;
}
.btn svg{width:17px; height:17px; flex:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--lg{padding:15px 26px; font-size:16px}
.btn--block{width:100%}
.btn--primary{--bg-btn:var(--red); box-shadow:0 6px 18px rgba(229,23,13,.3)}
.btn--primary:hover{--bg-btn:var(--red-600); box-shadow:0 10px 26px rgba(229,23,13,.36)}
.btn--wa{--bg-btn:var(--wa); --fg:#04331B; box-shadow:0 6px 18px rgba(37,211,102,.3)}
.btn--wa:hover{--bg-btn:#1FBE5A; box-shadow:0 10px 26px rgba(37,211,102,.38)}
.btn--ghost{--bg-btn:transparent; --fg:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line)}
.btn--ghost:hover{--bg-btn:var(--bg-alt); box-shadow:inset 0 0 0 1.5px var(--blue); --fg:var(--blue)}
.btn__count{
  background:rgba(255,255,255,.28); border-radius:100px; min-width:21px; height:21px;
  display:grid; place-items:center; font-size:12px; font-weight:700; padding:0 6px;
}
.linkish{color:var(--blue); font-weight:600; text-decoration:underline; text-underline-offset:3px}

/* ─────────── header ─────────── */
.hdr{
  position:sticky; top:0; z-index:90; height:var(--hdr-h);
  background:rgba(255,255,255,.82); backdrop-filter:blur(14px) saturate(180%);
  border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s;
}
.hdr.stuck{border-bottom-color:var(--line); box-shadow:0 2px 20px rgba(12,18,34,.05)}
.hdr__in{width:min(1200px, 100% - 44px); margin-inline:auto; height:100%; display:flex; align-items:center; gap:28px}
.hdr__logo{flex:none}
.hdr__logo img{width:auto; height:38px}
.nav{display:flex; gap:4px; margin-right:auto}
.nav a{
  font-family:var(--f-head); font-weight:500; font-size:15px; color:var(--body);
  text-decoration:none; padding:9px 13px; border-radius:100px; transition:.18s;
}
.nav a:hover{color:var(--blue); background:var(--blue-050)}
.nav a.is-active{color:var(--blue); background:var(--blue-050); font-weight:600}
.hdr__cta{display:flex; align-items:center; gap:10px}
.hdr__call svg{color:var(--red)}
.burger{display:none; width:42px; height:42px; border-radius:12px; flex-direction:column; gap:4.5px; align-items:center; justify-content:center}
.burger span{width:19px; height:2px; background:var(--ink); border-radius:2px; transition:.25s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ─────────── hero ─────────── */
.hero{position:relative; overflow:hidden; background:linear-gradient(180deg,#FBFCFF 0%, #FFF 60%)}
.hero__bg{position:absolute; inset:0; pointer-events:none}
.orb{position:absolute; border-radius:50%; filter:blur(90px); opacity:.5}
.orb--red{width:520px; height:520px; background:radial-gradient(circle, rgba(229,23,13,.4), transparent 70%); top:-160px; right:-100px}
.orb--blue{width:620px; height:620px; background:radial-gradient(circle, rgba(8,54,176,.34), transparent 70%); bottom:-280px; left:-180px}
.grid-lines{
  position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px; opacity:.5;
  mask-image:radial-gradient(ellipse 90% 65% at 50% 40%, #000 25%, transparent 75%);
}
.hero__in{
  position:relative; width:min(1200px, 100% - 44px); margin-inline:auto;
  display:grid; grid-template-columns:1.16fr .84fr; gap:48px; align-items:center;
  padding:64px 0 56px;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  background:#fff; box-shadow:var(--sh-1); border:1px solid var(--line);
  color:var(--ink); font-family:var(--f-head); font-weight:500; font-size:13.5px;
  padding:7px 15px 7px 11px; border-radius:100px; margin-bottom:24px;
}
.eyebrow i{width:7px; height:7px; border-radius:50%; background:var(--wa); box-shadow:0 0 0 4px rgba(37,211,102,.2); animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(37,211,102,.22)}50%{box-shadow:0 0 0 7px rgba(37,211,102,0)}}

.hero h1{
  font-size:clamp(2.5rem, 4.5vw, 3.9rem); font-weight:900; letter-spacing:-.045em;
  color:var(--ink); margin-bottom:22px;
}
.hl{
  position:relative; color:var(--red); white-space:nowrap;
}
.hl::after{
  content:''; position:absolute; left:0; right:0; bottom:.06em; height:.16em;
  background:var(--blue); opacity:.16; border-radius:100px; z-index:-1;
}
.hero__sub{font-size:clamp(1.03rem, 1.35vw, 1.16rem); max-width:52ch; margin-bottom:32px}
.hero__actions{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:44px}
.hero__stats{display:flex; flex-wrap:wrap; gap:12px 40px; padding-top:28px; border-top:1px solid var(--line)}
.hero__stats b{
  display:block; font-family:var(--f-head); font-size:1.7rem; font-weight:800;
  color:var(--ink); letter-spacing:-.03em; line-height:1.1;
}
.hero__stats span{font-size:13px; color:var(--mute); font-weight:500}

/* hero art — a wall of the real catalogue, three columns drifting past.
   The product IS the pitch here; an abstract graphic would be saying less. */
.hero__wall{
  --wall-gap:14px;
  position:relative; display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--wall-gap);
  height:min(540px, 70vh); align-self:stretch;
  mask-image:linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}
.wall__col{display:flex; flex-direction:column; gap:var(--wall-gap); will-change:transform}
.wall__col--1{animation:wallUp 44s linear infinite}
.wall__col--2{animation:wallDown 52s linear infinite; margin-top:-56px}
.wall__col--3{animation:wallUp 38s linear infinite; margin-top:-24px}
.hero__wall:hover .wall__col{animation-play-state:paused}
.wall__cell{
  flex:none; margin:0; aspect-ratio:1; background:#fff; border:1px solid var(--line);
  border-radius:18px; box-shadow:var(--sh-1); display:grid; place-items:center; overflow:hidden;
}
.wall__cell img{width:100%; height:100%; object-fit:contain; padding:12px}
/* Each column holds its list twice. One seamless period is N cells + N gaps, but 50% of
   the column is N cells + (N − 0.5) gaps — so -50% alone jumps by half a gap each cycle. */
@keyframes wallUp{to{transform:translateY(calc(-50% - var(--wall-gap) / 2))}}
@keyframes wallDown{from{transform:translateY(calc(-50% - var(--wall-gap) / 2))}}

/* marquee */
.marquee{
  position:relative; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:#fff; overflow:hidden; padding:15px 0;
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track{display:flex; align-items:center; gap:26px; width:max-content; animation:slide 44s linear infinite}
.marquee span{font-family:var(--f-head); font-weight:600; font-size:15px; color:var(--ink); white-space:nowrap}
.marquee i{color:var(--red); font-size:8px; font-style:normal}
@keyframes slide{to{transform:translateX(-50%)}}

/* ─────────── sections ─────────── */
.sec{padding:96px 0}
.sec--tight{padding:44px 0 88px}
.sec--alt{background:var(--bg-alt); border-block:1px solid var(--line)}
.sec--dark{background:linear-gradient(165deg, var(--blue-900), var(--blue-700) 55%, #0A2E7A); color:rgba(255,255,255,.76)}
.sec--dark h2,.sec--dark h3{color:#fff}

.sec__head{max-width:66ch; margin-bottom:52px}
.sec__head--row{
  max-width:none; display:flex; align-items:flex-end; justify-content:space-between;
  gap:28px; flex-wrap:wrap;
}
.sec__head--row > div{max-width:66ch}
.sec__head--row .btn{flex:none}
.sec__head h2{font-size:clamp(1.85rem, 3.4vw, 2.65rem); font-weight:800; margin-bottom:16px}
.sec__head p{font-size:1.06rem}
.sec__head--light p{color:rgba(255,255,255,.72)}
.tag{
  display:inline-block; font-family:var(--f-head); font-weight:700; font-size:12px;
  letter-spacing:.11em; text-transform:uppercase; color:var(--red);
  background:var(--red-050); padding:6px 13px; border-radius:100px; margin-bottom:16px;
}
.tag--light{color:#fff; background:rgba(255,255,255,.14)}

/* ─────────── page head (catalogue + category pages) ─────────── */
.page-head{
  position:relative; overflow:hidden; padding:34px 0 30px;
  background:linear-gradient(180deg, #FBFCFF, #F4F7FD);
  border-bottom:1px solid var(--line);
}
.page-head::after{
  content:''; position:absolute; top:-160px; right:-120px; width:420px; height:420px;
  border-radius:50%; filter:blur(90px); opacity:.5; pointer-events:none;
  background:radial-gradient(circle, rgba(229,23,13,.24), transparent 70%);
}
.page-head .wrap{position:relative}
.crumb{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-family:var(--f-head); font-size:13px; font-weight:500; margin-bottom:16px;
}
.crumb a{color:var(--mute); text-decoration:none; transition:.18s}
.crumb a:hover{color:var(--blue)}
.crumb span[aria-hidden]{color:var(--line)}
.crumb [aria-current]{color:var(--ink); font-weight:600}
.page-head h1{font-size:clamp(1.9rem, 3.8vw, 2.9rem); font-weight:900; letter-spacing:-.04em; margin-bottom:12px}
.page-head__sub{font-size:1.02rem; max-width:60ch}
.page-head__row{display:flex; align-items:center; justify-content:space-between; gap:32px}
.page-head__ph{
  flex:none; width:150px; height:150px; object-fit:cover; border-radius:var(--r);
  border:1px solid var(--line); box-shadow:var(--sh-2); background:#fff;
}
.page-head__meta{display:flex; gap:22px; margin-top:14px; font-size:14px; color:var(--mute); font-family:var(--f-head)}
.page-head__meta b{color:var(--ink); font-weight:800; font-size:15px}
.page-head__meta span:last-child b{color:var(--red)}

/* subcategory nav */
.subnav{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.subnav a{
  display:inline-flex; align-items:center; gap:7px; background:#fff;
  border:1.5px solid var(--line); border-radius:100px; padding:8px 15px;
  font-family:var(--f-head); font-weight:600; font-size:13.5px; color:var(--body);
  text-decoration:none; transition:.18s;
}
.subnav a:hover{border-color:var(--blue); color:var(--blue); transform:translateY(-1px)}
.subnav b{font-size:11px; color:var(--mute); font-weight:700}
.subnav a:hover b{color:var(--blue)}

/* subcategory sections */
.subsec{scroll-margin-top:calc(var(--hdr-h) + 20px)}
.subsec + .subsec{margin-top:52px}
.subsec__hd{
  display:flex; align-items:baseline; gap:12px; margin-bottom:18px;
  padding-bottom:12px; border-bottom:1px solid var(--line);
}
.subsec__hd h2{font-size:1.3rem; font-weight:800; letter-spacing:-.02em}
.subsec__n{font-size:13px; color:var(--mute); font-family:var(--f-head); font-weight:500}

/* other-categories strip */
.minis{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:10px}
.mini{
  display:flex; align-items:center; gap:11px; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:8px 12px 8px 8px; text-decoration:none;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s;
}
.mini img{width:40px; height:40px; flex:none; object-fit:cover; border-radius:8px; background:var(--bg-alt)}
.mini span{font-family:var(--f-head); font-size:13px; font-weight:600; color:var(--ink); line-height:1.25}
.mini:hover{transform:translateY(-2px); box-shadow:var(--sh-1); border-color:var(--blue)}

/* ─────────── category grid ─────────── */
.cats{display:grid; grid-template-columns:repeat(auto-fill, minmax(232px,1fr)); gap:14px}
.cat{
  position:relative; display:flex; flex-direction:column; text-align:left;
  background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  text-decoration:none; color:inherit;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s;
}
.cat:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:transparent}
/* Photos ship with their own white/grey backgrounds baked in, so `contain` leaves a
   visible rectangle floating on any tint. Filling the panel hides the seam entirely. */
.cat__ph{
  display:block; aspect-ratio:16/11; overflow:hidden;
  background:var(--bg-alt); border-bottom:1px solid var(--line);
}
.cat__ph img{width:100%; height:100%; object-fit:cover; transition:transform .45s var(--ease)}
.cat:hover .cat__ph img{transform:scale(1.06)}
.cat__txt{display:flex; flex-direction:column; gap:5px; padding:15px 17px 16px; flex:1}
.cat h3{font-size:1.02rem; font-weight:700}
.cat p{font-size:13px; color:var(--mute); line-height:1.45}
.cat__meta{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:auto; padding-top:11px; font-family:var(--f-head);
}
.cat__n{font-size:12px; font-weight:600; color:var(--mute)}
.cat__from{font-size:12px; font-weight:600; color:var(--mute)}
.cat__from b{font-size:14px; font-weight:800; color:var(--red); letter-spacing:-.01em}

/* ─────────── toolbar ─────────── */
.toolbar{display:flex; flex-direction:column; gap:16px; margin-bottom:22px}
.search{position:relative}
.search svg{
  position:absolute; left:18px; top:50%; transform:translateY(-50%);
  width:19px; height:19px; color:var(--mute); fill:none; pointer-events:none;
}
.search input{
  width:100%; background:#fff; border:1.5px solid var(--line); border-radius:100px;
  padding:15px 20px 15px 48px; font-size:15.5px; transition:.2s; -webkit-appearance:none;
}
.search input::placeholder{color:var(--mute)}
.search input:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(8,54,176,.11)}
.search--lg{max-width:640px; margin-top:24px}
.search--lg input{padding:16px 20px 16px 50px; font-size:16px; box-shadow:var(--sh-1)}
.filters{display:flex; flex-wrap:wrap; gap:8px}
.fchip{
  background:#fff; border:1.5px solid var(--line); border-radius:100px;
  padding:8px 15px; font-family:var(--f-head); font-weight:600; font-size:13.5px;
  color:var(--body); transition:.18s; white-space:nowrap;
}
.fchip:hover{border-color:var(--blue); color:var(--blue)}
.fchip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff}
.count{font-size:13.5px; color:var(--mute); margin-bottom:18px; font-weight:500}
.empty{
  text-align:center; padding:56px 20px; color:var(--mute);
  background:#fff; border:1px dashed var(--line); border-radius:var(--r);
}

/* ─────────── product grid ─────────── */
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(224px,1fr)); gap:16px}
.card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.card:hover{transform:translateY(-4px); box-shadow:var(--sh-2)}
.card__media{
  position:relative; aspect-ratio:4/3; display:grid; place-items:center; overflow:hidden;
  background:
    radial-gradient(ellipse 70% 60% at 50% 105%, rgba(8,54,176,.10), transparent 70%),
    linear-gradient(150deg, #F4F7FD, #E9EFFA);
}
.card__media svg{width:44%; height:44%; color:var(--blue); opacity:.42; fill:none; stroke:currentColor; stroke-width:1.2}
.card__media::before{
  content:''; position:absolute; width:64%; aspect-ratio:1; border-radius:50%;
  border:1.5px dashed rgba(8,54,176,.14);
}
/* real photos: square (IndiaMART ships 1:1) and contained, so nothing is cropped */
.card__media--photo{aspect-ratio:1; background:#fff; border-bottom:1px solid var(--line)}
.card__media--photo::before{display:none}
.card__media--photo img{
  width:100%; height:100%; object-fit:contain; padding:10px;
  transition:transform .3s var(--ease);
}
.card:hover .card__media--photo img{transform:scale(1.05)}
.card.is-on{box-shadow:0 0 0 2px var(--red), var(--sh-2)}
.card__body{padding:15px 16px 16px; display:flex; flex-direction:column; gap:9px; flex:1}
.card h3{font-size:.96rem; font-weight:600; line-height:1.35; letter-spacing:-.01em}
.card__price-row{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; margin-top:-3px}
.card__price{
  font-family:var(--f-head); font-size:1.12rem; font-weight:800;
  color:var(--ink); letter-spacing:-.02em;
}
.card__price i{font-style:normal; font-size:.76rem; font-weight:600; color:var(--mute)}
.card__moq{font-size:11px; font-weight:600; color:var(--red); background:var(--red-050); padding:2px 7px; border-radius:100px; font-family:var(--f-head)}
.card__ask{font-family:var(--f-head); font-size:.94rem; font-weight:700; color:var(--blue)}
.card__tags{display:flex; flex-wrap:wrap; gap:5px; margin-top:-2px}
.card__tags span{
  font-size:11px; font-weight:600; color:var(--blue); background:var(--blue-050);
  padding:3px 8px; border-radius:100px; font-family:var(--f-head);
}
.card__add{
  margin-top:auto; display:flex; align-items:center; justify-content:center; gap:6px;
  border:1.5px solid var(--line); border-radius:100px; padding:9px;
  font-family:var(--f-head); font-weight:600; font-size:13.5px; color:var(--ink); transition:.18s;
}
.card__add svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round}
.card__add:hover{border-color:var(--red); color:var(--red); background:var(--red-050)}
.card.is-on .card__add{background:var(--red); border-color:var(--red); color:#fff}

/* ─────────── steps ─────────── */
.steps{display:grid; grid-template-columns:repeat(auto-fit, minmax(238px,1fr)); gap:14px; counter-reset:s}
.steps li{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:26px 22px 24px; overflow:hidden;
}
.steps li::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--red), var(--blue));
  transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);
}
.steps li:hover::before{transform:scaleX(1)}
.steps__n{
  display:block; font-family:var(--f-head); font-size:2.5rem; font-weight:800;
  letter-spacing:-.04em; color:var(--line); line-height:1; margin-bottom:14px;
}
.steps h3{font-size:1.08rem; font-weight:700; margin-bottom:8px}
.steps p{font-size:14.5px; line-height:1.6}

/* ─────────── pillars ─────────── */
.pillars{display:grid; grid-template-columns:repeat(auto-fit, minmax(238px,1fr)); gap:14px; margin-bottom:56px}
.pillars article{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r); padding:26px 22px; backdrop-filter:blur(6px); transition:.22s var(--ease);
}
.pillars article:hover{background:rgba(255,255,255,.11); transform:translateY(-4px)}
.pillars__ic{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:rgba(255,255,255,.12); color:#fff; margin-bottom:16px;
}
.pillars__ic svg{width:22px; height:22px; fill:none}
.pillars h3{font-size:1.05rem; font-weight:700; margin-bottom:9px}
.pillars p{font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.7)}

/* 9 facts in 3 columns: an auto-fit track count that doesn't divide 9 leaves
   empty cells, and the gap colour shows through them as a lighter block */
.facts{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r); overflow:hidden;
}
.facts div{background:#0A2470; padding:20px 22px}
.facts b{display:block; font-family:var(--f-head); font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:5px}
.facts span{font-size:14.5px; color:#fff; font-weight:500}

/* ─────────── contact ─────────── */
.contact{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center}
.contact h2{font-size:clamp(1.85rem, 3.4vw, 2.5rem); font-weight:800; margin-bottom:16px}
.contact__lede{font-size:1.06rem; margin-bottom:34px}
.contact__list{display:grid; gap:20px; margin-bottom:34px}
.contact__list li{display:flex; gap:15px; align-items:flex-start}
.ci{
  width:42px; height:42px; border-radius:12px; flex:none; display:grid; place-items:center;
  background:var(--red-050); color:var(--red);
}
.ci svg{width:20px; height:20px}
.contact__list b{display:block; font-family:var(--f-head); font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); margin-bottom:3px}
.contact__list a{color:var(--ink); font-weight:600; text-decoration:none; border-bottom:1.5px solid var(--line); transition:.18s}
.contact__list a:hover{color:var(--blue); border-color:var(--blue)}
.contact__list span{color:var(--ink); font-size:15px}
.contact__btns{display:flex; flex-wrap:wrap; gap:12px}
.contact__map{
  border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--sh-2); aspect-ratio:1/1; background:var(--bg-alt);
}
.contact__map iframe{width:100%; height:100%; border:0; display:block; filter:saturate(.9)}

/* ─────────── footer ─────────── */
.ft{background:var(--ink); color:rgba(255,255,255,.6); padding:68px 0 0}
.ft__in{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:44px; padding-bottom:52px}
.ft__logo{
  width:auto; height:44px; margin-bottom:16px;
  background:#fff; border-radius:8px; padding:7px 10px;
}
.ft__tag{font-family:var(--f-head); font-weight:600; color:#fff; font-size:1.02rem; margin-bottom:10px}
.ft__blurb{font-size:14px; line-height:1.65; max-width:38ch}
.ft__col h4{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff; margin-bottom:16px}
.ft__col ul{display:grid; gap:9px}
.ft__col a,.ft__col span{font-size:14px; text-decoration:none; transition:.18s; color:rgba(255,255,255,.6)}
.ft__col a:hover{color:#fff}
.ft__bar{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding:22px 0; border-top:1px solid rgba(255,255,255,.1); font-size:13px;
}

/* ─────────── FAB ─────────── */
.fab{
  position:fixed; right:20px; bottom:20px; z-index:80;
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:var(--wa); color:#fff; box-shadow:0 8px 26px rgba(37,211,102,.45);
  transition:transform .22s var(--ease);
}
.fab svg{width:29px; height:29px}
.fab:hover{transform:scale(1.09) rotate(6deg)}
.fab::after{
  content:''; position:absolute; inset:0; border-radius:50%; border:2px solid var(--wa);
  animation:ripple 2.6s ease-out infinite;
}
@keyframes ripple{0%{transform:scale(1); opacity:.7}100%{transform:scale(1.7); opacity:0}}

/* ─────────── drawer ─────────── */
.scrim{position:fixed; inset:0; z-index:98; background:rgba(8,18,40,.5); backdrop-filter:blur(3px); animation:fade .25s}
@keyframes fade{from{opacity:0}}
.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:99; width:min(440px, 100%);
  background:#fff; display:flex; flex-direction:column;
  box-shadow:-20px 0 70px rgba(8,18,40,.22); animation:slideIn .32s var(--ease);
}
@keyframes slideIn{from{transform:translateX(100%)}}
.drawer__hd{display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--line)}
.drawer__hd h2{font-size:1.2rem; font-weight:700}
.x{width:38px; height:38px; border-radius:10px; display:grid; place-items:center; color:var(--body); transition:.18s}
.x svg{width:19px; height:19px; fill:none}
.x:hover{background:var(--bg-alt); color:var(--ink)}
.drawer__body{flex:1; overflow-y:auto; padding:22px 24px}
.drawer__empty{font-size:14.5px; color:var(--mute); background:var(--bg-alt); border:1px dashed var(--line); border-radius:var(--r); padding:22px; line-height:1.6}
.drawer__empty a{color:var(--blue); font-weight:600}
.picked{display:grid; gap:8px; margin-bottom:24px}
.picked li{
  display:flex; align-items:center; gap:11px; background:var(--bg-alt);
  border:1px solid var(--line); border-radius:12px; padding:11px 13px;
  animation:pop .25s var(--ease);
}
@keyframes pop{from{opacity:0; transform:translateY(-6px)}}
.picked__im{width:38px; height:38px; flex:none; object-fit:contain; background:#fff; border:1px solid var(--line); border-radius:8px; padding:2px}
.picked__nm{flex:1; font-size:14px; font-weight:600; color:var(--ink); line-height:1.35}
.picked__ct{font-size:11px; color:var(--mute); font-weight:500; display:block; margin-top:1px}
.picked__x{width:26px; height:26px; border-radius:7px; display:grid; place-items:center; color:var(--mute); flex:none; transition:.18s}
.picked__x svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round}
.picked__x:hover{background:var(--red-050); color:var(--red)}
.drawer__form{display:grid; gap:13px; padding-top:22px; border-top:1px solid var(--line)}
.fld{display:grid; gap:6px}
.fld > span{font-family:var(--f-head); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--mute)}
.fld input,.fld textarea{
  width:100%; border:1.5px solid var(--line); border-radius:11px; padding:11px 13px;
  font-size:14.5px; transition:.18s; resize:vertical; -webkit-appearance:none; background:#fff;
}
.fld input:focus,.fld textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(8,54,176,.1)}
.fld__row{display:grid; grid-template-columns:1fr 1fr; gap:13px}
.drawer__ft{padding:18px 24px; border-top:1px solid var(--line); display:grid; gap:9px; background:#fff}

/* ─────────── responsive ─────────── */
@media (max-width:980px){
  .hero__in{grid-template-columns:1fr; padding:56px 0 48px; gap:36px}
  .hero__wall{height:360px}
  .wall__col--2{margin-top:-40px}
  .contact{grid-template-columns:1fr; gap:40px}
  .contact__map{aspect-ratio:16/10}
  .ft__in{grid-template-columns:1fr 1fr; gap:36px}
}
@media (max-width:820px){
  /* the thumbnail squeezes the blurb into a narrow ribbon; the products below
     communicate the category better than a decorative photo does */
  .page-head__ph{display:none}
  .page-head__row{display:block}
  .nav{
    position:fixed; inset:var(--hdr-h) 0 auto; flex-direction:column; gap:0;
    background:#fff; border-bottom:1px solid var(--line); padding:12px;
    box-shadow:0 16px 40px rgba(12,18,34,.1);
    transform:translateY(-12px); opacity:0; visibility:hidden; transition:.24s var(--ease);
  }
  .nav.open{transform:none; opacity:1; visibility:visible}
  .nav a{padding:13px 14px; border-radius:11px; font-size:16px; font-weight:600}
  .burger{display:flex}
  .hdr__call{display:none}
  .hdr__in{gap:12px}
  .hdr__cta{margin-left:auto}
}
@media (max-width:560px){
  body{font-size:16px}
  .wrap, .hdr__in{width:min(1200px, 100% - 32px)}
  /* the wall earns its space on a phone too — it shows the actual catalogue —
     but at a height that doesn't bury the CTAs */
  .hero__wall{--wall-gap:10px; height:230px}
  .wall__cell{border-radius:14px}
  .wall__cell img{padding:8px}
  .hero__in{padding-bottom:36px}
  .sec{padding:64px 0}
  .sec__head{margin-bottom:36px}
  .hero__stats{gap:16px 26px}
  .hero__stats b{font-size:1.4rem}
  .hero__actions .btn{flex:1 1 100%}
  .grid,.cats{grid-template-columns:repeat(auto-fill, minmax(158px,1fr)); gap:11px}
  .facts{grid-template-columns:1fr}
  /* 16 wrapped chips push the products ~11 rows down the page; scroll them sideways */
  .filters{
    flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity;
    scrollbar-width:none; margin-inline:-16px; padding:2px 16px;
    -webkit-overflow-scrolling:touch;
  }
  .filters::-webkit-scrollbar{display:none}
  .fchip{scroll-snap-align:start}
  .card__body{padding:12px 13px 13px}
  .card h3{font-size:.9rem}
  .ft__in{grid-template-columns:1fr; gap:32px}
  .ft__bar{flex-direction:column; text-align:left}
  .fab{width:52px; height:52px; right:16px; bottom:16px}
  .drawer{width:100%}
  .marquee__track{animation-duration:30s}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}