/* ============================================================================
   های‌برق — "جریان / current" design system
   Ported from the Next.js prototype (hibargh-php-site) to the live DB-driven
   site. Loaded AFTER tailwind/style.css so this layer owns the shared chrome
   (nav pill, footer) and every page rebuilt onto it. Component classes are
   namespaced (nv- nav, hm- home, ft- footer, br- brands, pc- card, qa- quick
   add); global primitives keep plain names (glass, gel, current, btn, wrap,
   band-dark). Real product photos are first-class; SVG/skeleton is a fallback.
   Vazirmatn @font-face is already declared in the page head — reused here.
   ========================================================================== */

:root {
  --font-vazir: "Vazirmatn";

  /* palette — cool current (Apple blue 256 → indigo 278), neutral grays */
  --bg: oklch(0.971 0.003 286);
  --surface: oklch(0.965 0.003 286);
  --surface-2: oklch(0.955 0.003 286);
  --ink: oklch(0.232 0.004 286);
  --muted: oklch(0.349 0.003 286);
  --primary: oklch(0.563 0.193 256);
  --primary-ink: oklch(0.45 0.16 256);
  --accent: oklch(0.563 0.193 256);
  --accent-ink: oklch(0.45 0.16 256);
  --line: oklch(0.905 0.004 286);

  --glass-h: 256;

  --r-xl: 32px;
  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 10px;

  --z-nav: 50;
  --z-popover: 60;
  --z-dialog: 70;

  --spring-pop: linear(0, 0.0391 2.8%, 0.137 5.6%, 0.2685 8.3%, 0.4135 11.1%, 0.5573 13.9%, 0.6895 16.7%, 0.8041 19.4%, 0.8979 22.2%, 0.9704 25%, 1.0229 27.8%, 1.0576 30.6%, 1.0773 33.3%, 1.0854 36.1%, 1.0846 38.9%, 1.0779 41.7%, 1.0674 44.4%, 1.0553 47.2%, 1.0427 50%, 1.0309 52.8%, 1.0204 55.6%, 1.0117 58.3%, 1.0047 61.1%, 0.9996 63.9%, 0.996 66.7%, 0.9939 69.4%, 0.9928 72.2%, 0.9926 75%, 0.993 77.8%, 0.9948 83.3%, 0.997 88.9%, 0.9987 94.4%, 1);
  --spring-glide: linear(0, 0.0337 3.1%, 0.1124 6.3%, 0.2116 9.4%, 0.3164 12.5%, 0.4178 15.6%, 0.5111 18.8%, 0.5941 21.9%, 0.6661 25%, 0.7274 28.1%, 0.779 31.3%, 0.8218 34.4%, 0.857 37.5%, 0.8857 40.6%, 0.9091 43.8%, 0.9279 46.9%, 0.943 50%, 0.955 53.1%, 0.9646 56.3%, 0.9722 59.4%, 0.9783 62.5%, 0.983 65.6%, 0.9897 71.9%, 0.9938 78.1%, 0.9963 84.4%, 0.9978 90.6%, 1);
  --dur-pop: 480ms;
  --dur-glide: 640ms;

  --fs-sm: 0.8824rem;
  --fs-base: 1rem;
  --fs-md: 1.1765rem;
  --fs-lg: 1.5882rem;
  --fs-xl: 2.1176rem;
  --fs-2xl: 2.8235rem;
  --fs-hero: clamp(2.2rem, 1.1rem + 4.4vw, 3.6rem);
}

/* ————— base (this layer owns the new look; loaded last) ————— */
html {
  font-size: 17px;
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-vazir), Vazirmatn, Tahoma, system-ui, sans-serif;
  font-size: var(--fs-base);
  line-height: 1.9;
  font-feature-settings: "ss01";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* new-design headings reset (self-contained — no global override of legacy pages) */
.hm-heroTitle, .hm-sectionTitle, .hm-bandTitle, .hm-bandTitleDarkInk,
.hm-ctaTitle, .ft-wordmark, .ft-colTitle, .pc-name, .nv-wordmarkText {
  margin: 0; text-wrap: balance;
}

::selection { background: oklch(0.85 0.06 256); }

:focus-visible {
  outline: 2.5px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap {
  inline-size: min(1120px, 100% - 2.5rem);
  margin-inline: auto;
}

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* The [hidden] attribute must always win — JS toggles it on the cart badge,
   empty state, drawer foot, etc. Author `display` rules (display:grid/flex)
   would otherwise override the UA `[hidden]{display:none}` and leak them. */
[hidden] { display: none !important; }

/* ————— glass: the functional layer ————— */
.glass {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(to bottom, oklch(1 0 0 / 0.38), oklch(1 0 0 / 0) 42%),
    oklch(0.97 0.014 var(--glass-h) / 0.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.7);
  backdrop-filter: blur(24px) saturate(1.7);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.55),
    0 1px 2px oklch(0.25 0.02 220 / 0.05),
    0 8px 24px oklch(0.25 0.02 220 / 0.08),
    0 28px 60px -24px oklch(0.25 0.02 220 / 0.18);
  transition: background 600ms ease;
}

.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    155deg,
    oklch(1 0 0 / 0.75),
    oklch(1 0 0 / 0.12) 32%,
    oklch(0.8 0.03 var(--glass-h) / 0.1) 65%,
    oklch(0.86 0.04 var(--glass-h) / 0.4)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* gel press — controls flex like a physical material */
.gel {
  transition:
    transform var(--dur-pop) var(--spring-pop),
    box-shadow var(--dur-pop) var(--spring-pop);
}
.gel:active { transform: scale(0.955); }

/* ————— جریان: the signature current hairline ————— */
.current {
  --ch: 256;
  --cc: 0.1;
  --cd: 5s;
  position: relative;
  display: block;
  block-size: 2px;
  border-radius: 1px;
  overflow: hidden;
  background: oklch(0.915 0.015 var(--ch));
}
.current::after {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  inline-size: 44%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    oklch(0.7 var(--cc) var(--ch) / 0) 0%,
    oklch(0.7 var(--cc) var(--ch)) 50%,
    oklch(0.7 var(--cc) var(--ch) / 0) 100%
  );
  transform: translateX(240%);
  animation: current-flow var(--cd) linear infinite;
  will-change: transform;
}
@keyframes current-flow {
  from { transform: translateX(240%); }
  to   { transform: translateX(-110%); }
}

/* ————— buttons (new design — scoped to .gel so legacy .btn pages are untouched) ————— */
.btn.gel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-block-size: 48px;
  padding-block: 0.55rem;
  padding-inline: 1.5rem;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: var(--fs-base);
  border: 0;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary.gel {
  background: var(--primary);
  color: oklch(1 0 0);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.22),
    0 6px 16px -6px oklch(0.563 0.193 256 / 0.55);
}
.btn-primary.gel:hover { background: oklch(0.59 0.19 256); }
.btn-quiet.gel {
  color: var(--primary-ink);
  background: var(--surface);
}
.btn-quiet.gel:hover { background: var(--surface-2); }

/* ————— motion primitives ————— */
.page-enter { animation: page-enter 560ms var(--spring-glide) both; }
@keyframes page-enter { from { opacity: 0; transform: translateY(14px); } }

.will-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 760ms var(--spring-glide) var(--reveal-delay, 0ms),
    transform 760ms var(--spring-glide) var(--reveal-delay, 0ms);
}
.will-reveal.revealed { opacity: 1; transform: none; }

.fly-dot {
  position: fixed;
  z-index: var(--z-dialog);
  inline-size: 14px;
  block-size: 14px;
  border-radius: 50%;
  background: oklch(0.7 0.13 var(--fh, 256));
  box-shadow: 0 0 12px oklch(0.7 0.13 var(--fh, 256) / 0.7);
  pointer-events: none;
}

/* ————— dark band ————— */
.band-dark {
  background: oklch(0.147 0.011 285);
  color: oklch(0.96 0.004 286);
}
.band-dark ::selection { background: oklch(0.45 0.08 256); }

/* ————— graceful fallbacks ————— */
@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: oklch(0.975 0.006 var(--glass-h));
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow:
      0 1px 2px oklch(0.25 0.02 220 / 0.06),
      0 12px 32px -12px oklch(0.25 0.02 220 / 0.22);
  }
  .glass::after { background: oklch(0.88 0.01 var(--glass-h)); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: oklch(0.975 0.006 var(--glass-h) / 0.97); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .current::after { animation: none; transform: translateX(64%); }
}

/* ===================================================================
   NAV  → nv-   (replaces .site-header for the new chrome)
   =================================================================== */
.nv-bar {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-nav);
  display: flex;
  justify-content: center;
  padding-block-start: 14px;
  pointer-events: none;
}
.nv-pill {
  pointer-events: auto;
  inline-size: min(1120px, 100% - 28px);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 8px;
  padding-inline: 14px 12px;
  border-radius: var(--r-lg);
}
.nv-pill[data-on-dark] {
  background:
    linear-gradient(to bottom, oklch(1 0 0 / 0.1), oklch(1 0 0 / 0) 42%),
    oklch(0.3 0.018 var(--glass-h) / 0.55);
  color: oklch(0.96 0.004 230);
}
.nv-pill[data-on-dark] .nv-city { color: oklch(0.72 0.012 250); }
.nv-pill[data-on-dark] .nv-searchInput { background: oklch(1 0 0 / 0.09); color: oklch(0.96 0.004 230); }
.nv-pill[data-on-dark] .nv-searchInput::placeholder,
.nv-pill[data-on-dark] .nv-searchIcon { color: oklch(0.74 0.012 250); }
.nv-pill[data-on-dark] .nv-iconBtn { color: oklch(0.96 0.004 230); }
.nv-pill[data-on-dark] .nv-iconBtn:hover { background: oklch(1 0 0 / 0.1); }
@media (prefers-reduced-transparency: reduce) {
  .nv-pill[data-on-dark] { background: oklch(0.28 0.015 var(--glass-h)); }
}

.nv-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  color: inherit;
  border-radius: var(--r-md);
  padding-inline: 6px;
  margin-inline-start: -6px;
}
.nv-mark { display: grid; place-items: center; inline-size: 30px; block-size: 30px; flex-shrink: 0; }
.nv-markSvg {
  inline-size: 30px; block-size: 30px;
  filter: drop-shadow(0 1px 3px oklch(0.5 0.11 256 / 0.32));
  transition: transform var(--dur-pop) var(--spring-pop);
}
.nv-wordmark:hover .nv-markSvg { transform: rotate(-18deg); }
.nv-wordmarkText {
  font-weight: 800;
  font-size: var(--fs-md);
  letter-spacing: -0.01em;
  white-space: nowrap;
  line-height: 1.3;
}
.nv-city { font-weight: 400; color: var(--muted); }

.nv-navLinks {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  flex-shrink: 0;
  margin-inline-start: 0.4rem;
}
.nv-navLink {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-block-size: 38px;
  padding-inline: 0.62rem;
  border-radius: var(--r-sm);
  font-size: 0.8235rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--muted);
  transition: color 200ms ease, background 200ms ease;
}
.nv-navLink:hover {
  color: oklch(0.46 0.1 var(--link-h, 256));
  background: oklch(0.7 0.12 var(--link-h, 256) / 0.1);
}
.nv-navLink[data-active] { color: oklch(0.44 0.1 var(--link-h, 256)); }
.nv-navLink[data-active]::after {
  content: "";
  position: absolute;
  inset-block-end: 4px;
  inset-inline: 0.62rem;
  block-size: 2px;
  border-radius: 1px;
  background: oklch(0.62 0.13 var(--link-h, 256));
}
.nv-pill[data-on-dark] .nv-navLink { color: oklch(0.8 0.012 250); }
.nv-pill[data-on-dark] .nv-navLink:hover {
  color: oklch(0.92 0.05 var(--link-h, 256));
  background: oklch(0.78 0.1 var(--link-h, 256) / 0.16);
}
.nv-pill[data-on-dark] .nv-navLink[data-active] { color: oklch(0.92 0.07 var(--link-h, 256)); }

.nv-search {
  position: relative;
  flex: 0 1 240px;
  min-inline-size: 0;
  max-inline-size: 240px;
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  transition:
    max-inline-size var(--dur-glide) var(--spring-glide),
    flex-basis var(--dur-glide) var(--spring-glide);
}
.nv-search:focus-within { flex-basis: 320px; max-inline-size: 320px; }
.nv-searchIcon {
  position: absolute;
  inset-inline-start: 14px;
  inline-size: 17px;
  block-size: 17px;
  color: var(--muted);
  pointer-events: none;
}
.nv-searchInput {
  inline-size: 100%;
  min-block-size: 42px;
  border: 0;
  border-radius: calc(var(--r-lg) - 9px);
  padding-inline: 40px 16px;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--ink);
  background: oklch(0.25 0.02 220 / 0.055);
  transition: background 240ms ease;
}
.nv-searchInput::placeholder { color: var(--muted); }
.nv-searchInput:hover { background: oklch(0.25 0.02 220 / 0.085); }
.nv-searchInput:focus-visible { outline-offset: -2px; }
.nv-searchInput::-webkit-search-cancel-button { display: none; }

.nv-actions { display: inline-flex; align-items: center; gap: 0.2rem; flex-shrink: 0; }
.nv-iconBtn {
  position: relative;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 42px;
  border-radius: calc(var(--r-lg) - 9px);
  color: var(--ink);
  background: none;
  border: 0;
  cursor: pointer;
}
.nv-iconBtn:hover { background: oklch(0.25 0.02 220 / 0.06); }
.nv-iconBtn svg, .nv-iconBtn i { inline-size: 22px; block-size: 22px; }
.nv-menuBtn { display: none; }

.nv-badge {
  position: absolute;
  inset-block-start: 1px;
  inset-inline-end: 0;
  min-inline-size: 19px;
  block-size: 19px;
  padding-inline: 5px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--accent);
  color: oklch(1 0 0);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  animation: nv-badge-pop var(--dur-pop) var(--spring-pop);
}
@keyframes nv-badge-pop { from { transform: scale(0.4); } to { transform: scale(1); } }

.nv-surgeRing {
  position: absolute;
  inset: -3px;
  border-radius: calc(var(--r-lg) - 6px);
  border: 2px solid oklch(0.7 0.13 var(--sh, 256));
  opacity: 0;
  animation: surge 750ms var(--spring-glide);
  pointer-events: none;
}
@keyframes surge {
  0% { opacity: 0.95; transform: scale(0.72); }
  100% { opacity: 0; transform: scale(1.45); }
}

@media (max-width: 1040px) {
  .nv-navLinks { display: none; }
  .nv-search { flex: 1 1 auto; max-inline-size: 440px; }
  .nv-search:focus-within { flex-basis: 520px; max-inline-size: 520px; }
  .nv-menuBtn { display: grid; }
}
@media (max-width: 560px) {
  .nv-wordmarkText { font-size: var(--fs-base); }
  .nv-pill { gap: 0.45rem; padding-inline: 12px 8px; }
  .nv-search { max-inline-size: 100%; }
}
@media (prefers-reduced-motion: reduce) { .nv-surgeRing { animation: none; } }

/* The pill is fixed (no flow space). Offset page content; full-bleed hero pulls
   back up underneath the glass. */
#main-content { padding-block-start: 74px; }
.hm-hero { margin-block-start: -74px; }

/* ===================================================================
   HOME  → hm-
   =================================================================== */
.hm-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-block-size: clamp(540px, 80vh, 720px);
  display: flex;
  align-items: center;
  padding-block: clamp(92px, 12vh, 132px) clamp(2.5rem, 6vh, 4rem);
  background:
    radial-gradient(58% 92% at 82% 34%, oklch(0.93 0.05 256 / 0.9), transparent 64%),
    var(--bg);
}
.hm-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(46% 70% at 84% 44%, oklch(0.9 0.08 256 / 0.8), transparent 60%);
  opacity: 0;
  animation: hero-breathe 8.5s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes hero-breathe { to { opacity: 0.9; } }

.hm-heroInner { position: relative; z-index: 1; }
.hm-heroCopy { display: grid; gap: 1.25rem; justify-items: start; max-inline-size: 33rem; }
.hm-heroKicker {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: var(--fs-sm); font-weight: 700; color: var(--accent-ink);
  animation: hero-rise 720ms var(--spring-glide) both 20ms;
}
.hm-heroTitle {
  font-size: var(--fs-hero); font-weight: 800; line-height: 1.32; letter-spacing: -0.018em;
  animation: hero-rise 720ms var(--spring-glide) both 80ms;
}
.hm-heroSub {
  font-size: var(--fs-md); color: var(--muted); max-inline-size: 34ch; line-height: 1.85;
  animation: hero-rise 720ms var(--spring-glide) both 180ms;
}
.hm-heroCtas {
  display: flex; flex-wrap: wrap; gap: 0.7rem; margin-block-start: 0.4rem;
  animation: hero-rise 720ms var(--spring-glide) both 320ms;
}
@keyframes hero-rise { from { opacity: 0; transform: translateY(26px); } }

.hm-heroPhoto {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(58%, 780px);
  z-index: 0;
  animation: hero-photo-in 1100ms var(--spring-glide) both 120ms;
}
.hm-heroImg {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  -webkit-mask-image:
    linear-gradient(to right, #000 52%, transparent 97%),
    linear-gradient(to bottom, transparent 0, #000 14%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, #000 52%, transparent 97%),
    linear-gradient(to bottom, transparent 0, #000 14%);
  mask-composite: intersect;
}
@keyframes hero-photo-in { from { opacity: 0; transform: scale(1.05); } }
.hm-heroPhotoGlow {
  position: absolute;
  inset-block: 0;
  inset-inline-start: -12%;
  inline-size: 46%;
  background: radial-gradient(58% 64% at 34% 50%, oklch(0.62 0.18 278 / 0.34), transparent 72%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.hm-heroChip {
  position: absolute;
  inset-block-end: clamp(1.4rem, 5vh, 2.8rem);
  inset-inline-end: clamp(1.4rem, 4vw, 3rem);
  display: grid;
  gap: 0.3rem;
  padding: 0.85rem 1.05rem;
  border-radius: var(--r-md);
  color: oklch(0.97 0.004 230);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  background:
    linear-gradient(to bottom, oklch(1 0 0 / 0.16), oklch(1 0 0 / 0) 48%),
    oklch(0.3 0.022 235 / 0.46);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.28),
    0 14px 34px -16px oklch(0.18 0.02 235 / 0.8);
  animation: hero-rise 760ms var(--spring-glide) both 620ms;
  text-decoration: none;
}
.hm-heroChipName { font-size: var(--fs-sm); font-weight: 700; }
.hm-heroChipMeta { font-size: 0.8235rem; color: oklch(0.82 0.03 256); }
.hm-heroChipFlow { inline-size: 132px; margin-block-start: 0.4rem; background: oklch(0.42 0.02 235); }
@media (prefers-reduced-transparency: reduce) {
  .hm-heroChip { -webkit-backdrop-filter: none; backdrop-filter: none; background: oklch(0.28 0.02 235); }
}

.hm-sectionTitle { font-size: var(--fs-lg); font-weight: 700; }
.hm-sectionSub { color: var(--muted); margin-block-start: 0.2rem; }
.hm-arrow { inline-size: 14px; display: inline-block; vertical-align: middle; }

/* assurances */
.hm-assurances {
  padding-block: 2.6rem;
  border-block-end: 1px solid var(--line);
  background: linear-gradient(to bottom, var(--surface), var(--bg));
}
.hm-assureGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem 2rem; }
.hm-assureItem { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 0.85rem; }
.hm-assureIcon {
  display: grid; place-items: center; inline-size: 42px; block-size: 42px; flex-shrink: 0;
  border-radius: var(--r-md); color: var(--primary-ink); background: oklch(0.7 0.14 256 / 0.12);
}
.hm-assureIcon svg { inline-size: 23px; block-size: 23px; }
.hm-assureText { display: grid; gap: 0.15rem; }
.hm-assureTitle { font-weight: 700; font-size: var(--fs-base); line-height: 1.5; }
.hm-assureDesc { font-size: var(--fs-sm); color: var(--muted); line-height: 1.7; }
@media (max-width: 860px) { .hm-assureGrid { grid-template-columns: 1fr 1fr; gap: 1.4rem 1.6rem; } }
@media (max-width: 520px) { .hm-assureGrid { grid-template-columns: 1fr; } }

/* category / project tiles */
.hm-projects { padding-block: 4rem 1.5rem; }
.hm-projectGrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.9rem; margin-block-start: 1.6rem;
}
.hm-projectTile {
  display: grid; gap: 0.2rem; align-content: start; block-size: 100%;
  padding: 1.3rem 1.4rem 1.1rem; border-radius: var(--r-lg); background: var(--surface);
  text-decoration: none; color: inherit;
  transition:
    background 240ms ease,
    transform var(--dur-glide) var(--spring-glide),
    box-shadow var(--dur-glide) var(--spring-glide);
}
.hm-projectTile:hover {
  background: var(--surface-2);
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -22px oklch(0.25 0.02 220 / 0.3);
}
.hm-projectIcon { color: var(--primary-ink); margin-block-end: 0.4rem; }
.hm-projectIcon svg, .hm-projectIcon i { inline-size: 26px; block-size: 26px; }
.hm-projectName { font-size: var(--fs-md); font-weight: 700; }
.hm-projectDesc { font-size: var(--fs-sm); color: var(--muted); line-height: 1.8; }
.hm-projectFlow { inline-size: 64px; margin-block-start: 0.9rem; }
.hm-projectMeta {
  margin-block-start: 0.35rem; display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: var(--fs-sm); font-weight: 600; color: var(--primary-ink);
}

/* dark featured / cable band */
.hm-cableBand {
  position: relative; isolation: isolate; overflow: hidden;
  margin-block-start: 4rem; padding-block: 4.5rem 5rem;
}
.hm-cableGrid {
  display: grid; grid-template-columns: minmax(250px, 0.85fr) minmax(0, 1.15fr);
  gap: 3.5rem; align-items: start;
}
.hm-bandCopy { display: grid; gap: 0.8rem; justify-items: start; }
.hm-bandTitle { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.015em; color: oklch(0.97 0.004 286); }
.hm-bandSub { color: oklch(0.74 0.012 250); max-inline-size: 32ch; }
.hm-bandLegend { font-size: var(--fs-sm); color: oklch(0.62 0.012 250); max-inline-size: 30ch; line-height: 1.9; }
.hm-bandLink {
  display: inline-flex; align-items: center; gap: 0.35rem; margin-block-start: 0.6rem;
  min-block-size: 44px; font-weight: 600; color: oklch(0.72 0.14 256);
  border-radius: var(--r-sm); transition: gap 240ms var(--spring-pop); text-decoration: none;
}
.hm-bandLink:hover { gap: 0.65rem; color: oklch(0.8 0.15 256); }
.hm-cableList { display: grid; gap: 0.7rem; }
.hm-cableRow {
  display: grid; grid-template-columns: 88px 1fr auto; align-items: center; gap: 1.1rem;
  padding: 0.8rem 0.9rem; border-radius: var(--r-lg); background: oklch(0.27 0.012 250);
  text-decoration: none; color: inherit;
  transition: background 220ms ease, transform var(--dur-glide) var(--spring-glide);
}
.hm-cableRow:hover { background: oklch(0.3 0.014 250); transform: translateY(-2px); }
.hm-cableThumb {
  inline-size: 88px; block-size: 88px; border-radius: calc(var(--r-lg) - 11px);
  object-fit: cover; background: oklch(0.32 0.012 250);
}
.hm-cableInfo { display: grid; gap: 0.1rem; min-inline-size: 0; }
.hm-cableName { font-weight: 600; line-height: 1.65; color: oklch(0.96 0.004 230); }
.hm-cableSpec { font-size: var(--fs-sm); color: oklch(0.72 0.012 250); }
.hm-cableFlow { inline-size: 88px; margin-block-start: 0.45rem; background: oklch(0.36 0.015 250); }
.hm-cablePrice { font-weight: 700; color: oklch(0.78 0.14 256); white-space: nowrap; }
.hm-cableUnit { font-weight: 400; font-size: var(--fs-sm); color: oklch(0.66 0.012 250); }

/* light products grid */
.hm-lightBand {
  position: relative; padding-block: 5rem;
  background:
    radial-gradient(46% 60% at 22% 30%, oklch(0.95 0.04 256 / 0.9), transparent 70%),
    radial-gradient(40% 55% at 82% 75%, oklch(0.95 0.035 278 / 0.7), transparent 72%);
}
.hm-lightGrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.6rem; margin-block-start: 1.8rem;
}

/* brand row */
.br-section { background: var(--surface); padding-block: 3.4rem; margin-block-start: 2rem; }
.br-inner { display: grid; gap: 1.1rem; }
.br-label { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.br-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  column-gap: 2rem; row-gap: 1.2rem;
}
.br-brand { display: grid; gap: 0.05rem; text-decoration: none; color: inherit; }
.br-brandName { font-size: var(--fs-md); font-weight: 700; color: oklch(0.36 0.02 220); letter-spacing: -0.01em; }
.br-brand:hover .br-brandName { color: var(--primary-ink); }
.br-brandSpec { font-size: var(--fs-sm); color: var(--muted); line-height: 1.7; }

/* CTA band */
.hm-cta { padding-block: 4rem 2rem; }
.hm-ctaCard {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.4rem 2rem; padding: clamp(1.6rem, 4vw, 2.6rem);
  border-radius: var(--r-xl); background: var(--surface);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.5),
    0 24px 48px -34px oklch(0.25 0.02 220 / 0.4);
}
.hm-ctaTitle { font-size: var(--fs-lg); font-weight: 750; }
.hm-ctaSub { color: var(--muted); margin-block-start: 0.3rem; max-inline-size: 46ch; }
.hm-ctaActions { display: flex; flex-wrap: wrap; gap: 0.7rem; }

@media (max-width: 900px) {
  .hm-hero {
    display: block; min-block-size: auto; overflow: clip; padding-block: 7.5rem 0;
    background:
      radial-gradient(80% 46% at 50% 14%, oklch(0.93 0.05 256 / 0.9), transparent 70%),
      var(--bg);
  }
  .hm-hero::before { background: radial-gradient(70% 40% at 50% 18%, oklch(0.9 0.075 256 / 0.7), transparent 64%); }
  .hm-heroCopy { max-inline-size: 38rem; }
  .hm-heroPhoto { position: relative; inline-size: 100%; block-size: clamp(240px, 56vw, 380px); margin-block-start: 2.4rem; }
  .hm-heroImg {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 26%);
    mask-image: linear-gradient(to bottom, transparent, #000 26%);
  }
  .hm-heroPhotoGlow {
    inset-block: auto 0; inset-inline: 0; inline-size: 100%; block-size: 50%;
    background: radial-gradient(60% 80% at 50% 100%, oklch(0.62 0.18 278 / 0.3), transparent 70%);
  }
}
@media (max-width: 860px) {
  .hm-cableGrid { grid-template-columns: 1fr; gap: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-projectTile:hover, .hm-cableRow:hover { transform: none; }
}

/* ===================================================================
   PRODUCT CARD  → pc-  (real photos)
   =================================================================== */
.pc-card { position: relative; border-radius: var(--r-xl); }
.pc-quick {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 240ms ease, transform var(--dur-pop) var(--spring-pop);
  z-index: 2;
}
.pc-card:hover .pc-quick, .pc-card:focus-within .pc-quick { opacity: 1; transform: none; }
@media (hover: none) { .pc-quick { opacity: 1; transform: none; } }
.pc-link {
  display: block; border-radius: inherit; color: inherit; text-decoration: none;
  transition: transform var(--dur-glide) var(--spring-glide);
}
.pc-link:hover { transform: translateY(-4px); }
.pc-link:hover .pc-render { box-shadow: 0 24px 48px -28px oklch(0.25 0.02 220 / 0.35); }
.pc-render {
  inline-size: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: box-shadow var(--dur-glide) var(--spring-glide);
}
.pc-render--empty { display: grid; place-items: center; color: var(--muted); }
.btn-block { inline-size: 100%; }
.pc-body { padding-block: 0.9rem 0.4rem; padding-inline: 0.35rem; display: grid; gap: 0.15rem; }
.pc-name { font-size: var(--fs-base); font-weight: 600; line-height: 1.7; }
.pc-brand { font-size: var(--fs-sm); color: var(--muted); }
.pc-price { font-size: var(--fs-base); font-weight: 700; color: var(--accent-ink); }
.pc-priceWas { font-size: var(--fs-sm); font-weight: 400; color: var(--muted); text-decoration: line-through; margin-inline-start: 0.4rem; }
.pc-unit { font-size: var(--fs-sm); font-weight: 400; color: var(--muted); }
.pc-flow { margin-block-start: 0.65rem; inline-size: 88px; }
.pc-oos {
  position: absolute; inset-block-start: 12px; inset-inline-start: 12px; z-index: 2;
  padding: 0.2rem 0.6rem; border-radius: var(--r-sm);
  font-size: 0.74rem; font-weight: 700; color: oklch(1 0 0); background: oklch(0.6 0.02 250 / 0.85);
}
@media (prefers-reduced-motion: reduce) { .pc-link:hover { transform: none; } }

/* quick add */
.qa-btn {
  display: grid; place-items: center; inline-size: 40px; block-size: 40px;
  border-radius: 50%; background: oklch(1 0 0 / 0.88); color: var(--ink); border: 0; cursor: pointer;
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.7), 0 4px 14px -4px oklch(0.25 0.02 220 / 0.35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background 200ms ease, transform var(--dur-pop) var(--spring-pop);
}
.qa-btn:hover { background: var(--primary); color: oklch(1 0 0); }
.qa-btn svg, .qa-btn i { inline-size: 16px; block-size: 16px; }

/* ===================================================================
   FOOTER  → ft-
   =================================================================== */
.ft-footer {
  margin-block-start: 4rem;
  border-block-start: 1px solid oklch(0.25 0.02 220 / 0.07);
  padding-block: 3.4rem 2rem;
  background: var(--bg);
}
.ft-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) repeat(3, minmax(150px, 1fr));
  gap: 2.5rem;
}
.ft-brandCol { display: grid; gap: 0.5rem; align-content: start; }
.ft-wordmark { font-weight: 800; font-size: var(--fs-md); letter-spacing: -0.01em; }
.ft-city { font-weight: 400; color: var(--muted); }
.ft-about { font-size: var(--fs-sm); color: var(--muted); max-inline-size: 32ch; }
.ft-contact { display: grid; gap: 0.3rem; margin-block-start: 0.4rem; font-size: var(--fs-sm); color: var(--muted); }
.ft-contact a { color: inherit; }
.ft-contact a:hover { color: var(--primary-ink); }
.ft-col { display: grid; gap: 0.5rem; align-content: start; }
.ft-colTitle { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.ft-colList { display: grid; gap: 0.15rem; }
.ft-colLink {
  display: inline-block; font-size: var(--fs-sm); color: var(--muted);
  padding-block: 0.22rem; border-radius: var(--r-sm); text-decoration: none;
  transition: color 180ms ease;
}
.ft-colLink:hover { color: var(--primary-ink); }
.ft-legal {
  margin-block-start: 2.6rem; display: grid; gap: 1rem;
  font-size: var(--fs-sm); color: var(--muted);
}
.ft-legalLine {
  display: block; inline-size: 100%; block-size: 2px; border-radius: 1px;
  background: linear-gradient(to left, oklch(0.6 0.18 256), oklch(0.55 0.18 278));
  opacity: 0.4;
}
.ft-legalRow { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; justify-content: space-between; }
@media (max-width: 860px) { .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ft-grid { grid-template-columns: 1fr; gap: 1.8rem; } }

/* ===================================================================
   GLASS DRAWERS — restyle the existing cart + mobile-nav drawers
   (markup hooks in includes/header.php; behavior in js/main.js)
   =================================================================== */
.cart-drawer, .nav-drawer {
  position: fixed; inset: 0; z-index: var(--z-dialog);
}
.cart-drawer[hidden], .nav-drawer[hidden] { display: none; }
.cart-drawer::before, .nav-drawer::before {
  content: ""; position: absolute; inset: 0;
  background: oklch(0.3 0.03 230 / 0.16);
  -webkit-backdrop-filter: blur(4px) saturate(1.15); backdrop-filter: blur(4px) saturate(1.15);
  opacity: 0; transition: opacity var(--dur-glide) ease;
}
.cart-drawer[data-open]::before, .nav-drawer[data-open]::before { opacity: 1; }

.cart-drawer__panel, .nav-drawer__panel {
  position: absolute; inset-block: 12px; inset-inline-start: 12px; inset-inline-end: auto;
  inline-size: min(432px, calc(100vw - 24px));
  max-block-size: calc(100dvh - 24px);
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-xl); color: var(--ink);
  background:
    linear-gradient(to bottom, oklch(1 0 0 / 0.38), oklch(1 0 0 / 0) 42%),
    oklch(0.97 0.014 256 / 0.78);
  -webkit-backdrop-filter: blur(24px) saturate(1.7); backdrop-filter: blur(24px) saturate(1.7);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.55), 0 28px 60px -24px oklch(0.25 0.02 220 / 0.4);
  transform: translateX(-56px) scale(0.97); opacity: 0;
  transition: transform var(--dur-glide) var(--spring-glide), opacity var(--dur-glide) var(--spring-glide);
}
.nav-drawer__panel { inset-inline-start: auto; inset-inline-end: 12px; transform: translateX(56px) scale(0.97); }
.cart-drawer[data-open] .cart-drawer__panel,
.nav-drawer[data-open] .nav-drawer__panel { transform: none; opacity: 1; }
@media (prefers-reduced-transparency: reduce) {
  .cart-drawer__panel, .nav-drawer__panel { background: oklch(0.975 0.006 256); }
}
.cart-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 1.1rem 0.5rem; padding-inline: 1.4rem 1rem;
}
.cart-drawer__title { font-size: var(--fs-md); font-weight: 750; display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; }
.cart-drawer__close, .nav-drawer__close {
  display: grid; place-items: center; inline-size: 38px; block-size: 38px;
  border-radius: var(--r-md); color: var(--muted); background: none; border: 0; cursor: pointer;
}
.cart-drawer__close:hover, .nav-drawer__close:hover { background: oklch(0.25 0.02 220 / 0.07); color: var(--ink); }
.cart-drawer__body { flex: 1; overflow-y: auto; padding-inline: 1.1rem; padding-block: 0.2rem 0.6rem; }
.cart-drawer__foot {
  padding-block: 0.9rem 1.3rem; padding-inline: 1.4rem;
  border-block-start: 1px solid oklch(0.25 0.02 220 / 0.09); display: grid; gap: 0.7rem;
}
.cart-drawer__subtotal { display: flex; align-items: baseline; justify-content: space-between; font-size: var(--fs-sm); color: var(--muted); }
.cart-drawer__subtotal strong { font-size: var(--fs-md); font-weight: 750; color: var(--ink); }
.nav-drawer__panel { padding: 3rem 1.2rem 1.2rem; gap: 0.2rem; }
.nav-drawer__panel a {
  display: flex; align-items: center; gap: 0.7rem; min-block-size: 48px;
  padding-inline: 0.9rem; border-radius: var(--r-md); color: var(--ink); font-weight: 600;
  text-decoration: none; transition: background 180ms ease;
}
.nav-drawer__panel a:hover { background: oklch(0.25 0.02 220 / 0.06); }

/* cart drawer empty state + JS-rendered line items */
.cart-drawer__empty {
  display: grid; justify-items: center; gap: 0.6rem;
  padding-block: 2.6rem 2rem; text-align: center; color: var(--muted);
}
.cart-drawer__empty .empty-state__icon {
  display: grid; place-items: center; inline-size: 54px; block-size: 54px;
  border-radius: 50%; background: oklch(0.7 0.14 256 / 0.12); color: var(--primary-ink);
  margin-block-end: 0.3rem;
}
.cart-ditem {
  display: grid; grid-template-columns: 56px 1fr; gap: 0.9rem; align-items: start;
  padding-block: 0.9rem; border-block-end: 1px solid oklch(0.3 0.02 230 / 0.09);
}
.cart-ditem__media img { inline-size: 56px; block-size: 56px; border-radius: var(--r-md); object-fit: cover; background: var(--surface); }
.cart-ditem__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.cart-ditem__name { font-size: var(--fs-sm); font-weight: 600; line-height: 1.6; }
.cart-ditem__name:hover { color: var(--primary-ink); }
.cart-ditem__remove { display: grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: var(--r-sm); color: var(--muted); }
.cart-ditem__remove:hover { color: oklch(0.52 0.16 25); background: oklch(0.62 0.16 25 / 0.1); }
.cart-ditem__row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-block-start: 0.5rem; }
.cart-ditem__price { font-weight: 700; color: var(--accent-ink); white-space: nowrap; }
.qty-stepper { display: inline-flex; align-items: center; gap: 0.15rem; background: oklch(0.25 0.02 220 / 0.05); border-radius: 12px; padding: 3px; }
.qty-stepper__btn { inline-size: 30px; block-size: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--ink); }
.qty-stepper__btn:hover { background: oklch(1 0 0 / 0.85); }
.qty-stepper__input { inline-size: 2.4rem; text-align: center; border: 0; background: none; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }