:root{--c-brand:#294FA2;--c-brand-deep:#1E356B;--c-brand-ink:#16284F;--c-brand-soft:#5F79B7;--c-brand-tint:#E3E7EF;--c-bg:#F4F4F1;--c-bg-alt:#ECECE7;--c-white:#FFFFFF;--c-line:#C9D0DC;--c-line-soft:#DCDFE6;--c-line-dark:rgba(255,255,255,0.10);--c-text:#121722;--c-text-strong:#0B1220;--c-text-muted:#5A6377;--c-text-inverse:#DAE0EE;--fs-xs:clamp(0.7rem,0.68rem + 0.08vw,0.76rem);--fs-sm:clamp(0.8rem,0.78rem + 0.15vw,0.88rem);--fs-base:clamp(0.94rem,0.9rem + 0.18vw,1rem);--fs-md:clamp(1.02rem,0.98rem + 0.25vw,1.12rem);--fs-lg:clamp(1.18rem,1.08rem + 0.4vw,1.32rem);--fs-xl:clamp(1.4rem,1.2rem + 0.8vw,1.85rem);--fs-2xl:clamp(1.7rem,1.35rem + 1.4vw,2.4rem);--fs-3xl:clamp(2rem,1.5rem + 2.2vw,3.1rem);--fs-display:clamp(2rem,1.5rem + 2.2vw,3.2rem);--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-7:3rem;--space-8:4rem;--space-9:6rem;--space-10:8rem;--space-section:clamp(4.5rem,7vw,8rem);--container-max:1380px;--container-pad:clamp(1.25rem,4vw,3rem);--header-h:116px;--header-h-scrolled:80px;--r-xs:2px;--r-sm:4px;--r-md:6px;--r-lg:12px;--shadow-xs:0 1px 2px rgba(18,23,34,0.05);--shadow-sm:0 6px 22px rgba(18,23,34,0.07);--shadow-md:0 18px 40px rgba(18,23,34,0.12);--shadow-lg:0 30px 70px rgba(18,23,34,0.18);--ease-out:cubic-bezier(0.22,0.61,0.36,1);--ease-emph:cubic-bezier(0.65,0,0.05,1);--ease-in-out:cubic-bezier(0.6,0.1,0.2,1);--t-fast:220ms;--t-med:420ms;--t-slow:720ms;--hero-overlay:linear-gradient( 180deg,rgba(11,18,32,0.45) 0%,rgba(11,18,32,0.50) 35%,rgba(11,18,32,0.78) 100% )}*,*::before,*::after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{margin:0;background:var(--c-bg);color:var(--c-text);font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:var(--fs-base);line-height:1.65;font-feature-settings:'ss01','cv11';-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}img,svg,video,picture{display:block;max-width:100%;height:auto}button{font:inherit;border:none;background:none;cursor:pointer;color:inherit}input,textarea,select{font:inherit;color:inherit}a{color:inherit;text-decoration:none}ul,ol{list-style:none;margin:0;padding:0}:focus-visible{outline:2px solid var(--c-brand);outline-offset:3px;border-radius:var(--r-xs)}::selection{background:var(--c-brand);color:var(--c-white)}h1,h2,h3,h4,h5,h6{margin:0 0 var(--space-4);font-family:'Inter Tight','Inter',system-ui,sans-serif;font-weight:500;line-height:1.12;letter-spacing:-0.022em;color:var(--c-text-strong);text-wrap:balance}h1{font-size:var(--fs-3xl);font-weight:500;letter-spacing:-0.028em}h2{font-size:var(--fs-2xl);letter-spacing:-0.024em}h3{font-size:var(--fs-xl);letter-spacing:-0.018em}p{margin:0 0 var(--space-4);color:var(--c-text-muted);text-wrap:pretty;max-width:64ch}p.lead{font-size:var(--fs-md);color:var(--c-text);max-width:56ch;line-height:1.6}.eyebrow{display:inline-flex;align-items:center;gap:var(--space-3);font-family:ui-monospace,'JetBrains Mono',Menlo,monospace;font-size:var(--fs-xs);font-weight:500;letter-spacing:0.22em;text-transform:uppercase;color:var(--c-brand);margin-bottom:var(--space-4)}.eyebrow::before{content:'';width:28px;height:1px;background:currentColor}.eyebrow.is-light{color:var(--c-brand-soft)}.container{width:100%;max-width:var(--container-max);margin:0 auto;padding-inline:var(--container-pad)}.container--wide{max-width:1560px}.section{padding-block:var(--space-section);position:relative}.section--tight{padding-block:clamp(3.5rem,5.5vw,5.5rem)}.section--dark{background:var(--c-brand-ink);color:var(--c-text-inverse)}.section--dark h1,.section--dark h2,.section--dark h3{color:var(--c-white)}.section--dark p{color:rgba(218,224,238,0.78)}.section-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:end;margin-bottom:clamp(2.5rem,5vw,4.5rem)}.section-head__title{margin:0;font-size:var(--fs-2xl)}.section-head__lead{margin:0;font-size:var(--fs-md);color:var(--c-text-muted);max-width:52ch;line-height:1.6}.section--dark .section-head__lead{color:rgba(218,224,238,0.74)}@media (max-width:800px){.section-head{grid-template-columns:1fr;gap:var(--space-4);align-items:start}}.btn{--btn-bg:var(--c-brand);--btn-color:var(--c-white);--btn-border:var(--c-brand);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);padding:0.95rem 1.6rem;background:var(--btn-bg);color:var(--btn-color);border:1px solid var(--btn-border);border-radius:2px;font-family:'Inter Tight','Inter',sans-serif;font-size:var(--fs-sm);font-weight:500;letter-spacing:0.005em;cursor:pointer;transition:background var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out);text-decoration:none;white-space:nowrap}.btn .btn__arrow{display:inline-flex;width:16px;height:16px;transition:transform var(--t-med) var(--ease-out)}.btn:hover .btn__arrow{transform:translateX(4px)}.btn--primary{--btn-bg:var(--c-brand);--btn-color:var(--c-white);--btn-border:var(--c-brand)}.btn--primary:hover{--btn-bg:var(--c-brand-deep);--btn-border:var(--c-brand-deep)}.btn--accent{--btn-bg:var(--c-brand);--btn-color:var(--c-white);--btn-border:var(--c-brand)}.btn--accent:hover{--btn-bg:var(--c-brand-deep);--btn-border:var(--c-brand-deep)}.btn--dark{--btn-bg:var(--c-text-strong);--btn-color:var(--c-white);--btn-border:var(--c-text-strong)}.btn--dark:hover{--btn-bg:var(--c-brand);--btn-border:var(--c-brand)}.btn--ghost{--btn-bg:transparent;--btn-color:var(--c-text);--btn-border:var(--c-text)}.btn--ghost:hover{--btn-bg:var(--c-text);--btn-color:var(--c-white)}.btn--ghost-light{--btn-bg:transparent;--btn-color:var(--c-white);--btn-border:rgba(255,255,255,0.55)}.btn--ghost-light:hover{--btn-bg:var(--c-white);--btn-color:var(--c-brand-deep);--btn-border:var(--c-white)}.btn--sm{padding:0.62rem 1.05rem;font-size:var(--fs-xs);letter-spacing:0.04em}.link-arrow{display:inline-flex;align-items:center;gap:var(--space-2);font-family:'Inter Tight','Inter',sans-serif;font-size:var(--fs-sm);font-weight:500;color:var(--c-text);position:relative;padding-bottom:4px}.link-arrow::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform-origin:right;transform:scaleX(1);transition:transform var(--t-med) var(--ease-out)}.link-arrow:hover::after{transform-origin:left;transform:scaleX(0);animation:linkUnderline 600ms var(--ease-out) forwards}.link-arrow svg{width:14px;height:14px;transition:transform var(--t-med) var(--ease-out)}.link-arrow:hover svg{transform:translateX(4px)}@keyframes linkUnderline{0%{transform-origin:right;transform:scaleX(1)}49%{transform-origin:right;transform:scaleX(0)}50%{transform-origin:left;transform:scaleX(0)}100%{transform-origin:left;transform:scaleX(1)}}.site-header{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--header-h);display:flex;align-items:center;background:transparent;color:var(--c-white);transition:background var(--t-med) var(--ease-out),color var(--t-med) var(--ease-out),box-shadow var(--t-med) var(--ease-out),height var(--t-med) var(--ease-out)}.site-header::before{content:'';position:absolute;inset:0 0 auto 0;height:130%;background:linear-gradient(180deg,rgba(11,18,32,0.55),rgba(11,18,32,0));pointer-events:none;opacity:1;transition:opacity var(--t-med) var(--ease-out);z-index:-1}.site-header.is-scrolled::before{opacity:0}.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);width:100%}.site-header.is-scrolled{background:rgba(244,244,241,0.96);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);color:var(--c-text);box-shadow:0 1px 0 rgba(18,23,34,0.06);height:var(--header-h-scrolled)}.site-header.is-light{color:var(--c-text)}.brand{display:inline-flex;align-items:center;height:100%;text-decoration:none}.brand__logo{display:block;height:76px;width:auto;transition:height var(--t-med) var(--ease-out),filter var(--t-med) var(--ease-out)}.site-header:not(.is-scrolled) .brand__logo{filter:brightness(0) invert(1)}.site-header.is-scrolled .brand__logo{height:52px;filter:none}.site-footer .brand__logo{filter:brightness(0) invert(1);height:56px}.nav{display:flex;align-items:center;gap:clamp(1rem,2vw,2.2rem)}.nav__list{display:flex;gap:clamp(1.1rem,1.6vw,1.85rem)}.nav__link{position:relative;font-family:'Archivo','Inter Tight',sans-serif;font-size:clamp(0.92rem,0.82rem + 0.28vw,1.02rem);font-weight:500;letter-spacing:0.015em;line-height:1.3;padding:10px 0;display:inline-flex;align-items:center;gap:6px}.nav__link::after{content:'';position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;transform-origin:left;transform:scaleX(0);transition:transform var(--t-med) var(--ease-out)}.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)}.nav__cta{display:inline-flex}.btn--nav{padding:0.85rem 1.45rem;font-size:clamp(0.88rem,0.82rem + 0.18vw,0.98rem);font-family:'Archivo','Inter Tight',sans-serif;font-weight:600;letter-spacing:0.04em}.nav__lang{display:inline-flex;align-items:center;gap:4px;font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-xs);letter-spacing:0.18em;padding:6px 10px;border:1px solid currentColor;border-radius:999px;opacity:0.75}.nav__lang[disabled]{cursor:not-allowed}.menu-toggle{display:none;width:56px;height:56px;align-items:center;justify-content:center;position:relative;border-radius:2px;transition:background var(--t-fast) var(--ease-out)}.menu-toggle:hover{background:rgba(255,255,255,0.06)}.site-header.is-scrolled .menu-toggle:hover{background:rgba(18,23,34,0.05)}.menu-toggle__icon{width:30px;height:18px;position:relative;display:block}.menu-toggle__icon span{position:absolute;left:0;width:100%;height:2px;background:currentColor;border-radius:1px;transition:transform 380ms var(--ease-emph),opacity 200ms var(--ease-out),top 380ms var(--ease-emph)}.menu-toggle__icon span:nth-child(1){top:0}.menu-toggle__icon span:nth-child(2){top:50%;transform:translateY(-50%)}.menu-toggle__icon span:nth-child(3){top:calc(100% - 2px)}.is-menu-open .menu-toggle__icon span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)}.is-menu-open .menu-toggle__icon span:nth-child(2){opacity:0;transform:translateY(-50%) scaleX(0.4)}.is-menu-open .menu-toggle__icon span:nth-child(3){top:50%;transform:translateY(-50%) rotate(-45deg)}.nav__item{position:relative}.nav__caret{width:10px;height:10px;display:inline-block;flex-shrink:0;transition:transform var(--t-med) var(--ease-out);margin-left:2px;opacity:0.85}.nav__item--has-dropdown:hover .nav__caret,.nav__item--has-dropdown:focus-within .nav__caret{transform:rotate(180deg)}.nav__item--has-dropdown::after{content:'';position:absolute;left:0;right:0;top:100%;height:14px;pointer-events:none}.nav__item--has-dropdown:hover::after,.nav__item--has-dropdown:focus-within::after{pointer-events:auto}.dropdown{position:absolute;top:calc(100% + 14px);left:-18px;background:var(--c-white);color:var(--c-text);border:1px solid var(--c-line-soft);box-shadow:var(--shadow-md);padding:14px 0;min-width:280px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity 240ms var(--ease-out),transform 240ms var(--ease-emph),visibility 0s linear 240ms;z-index:50}/* Hover-bridge that spans the full dropdown width so diagonal cursor moves from the trigger don't break the :hover chain. */
.dropdown::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}

.nav__item--has-dropdown:hover .dropdown,
.nav__item--has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s, 0s, 0s;
}

/* Wide multi-column variant for category-rich dropdowns */
.dropdown--wide {
  min-width: 540px;
  padding: 18px 0;
}

.dropdown__list {
  display: flex;
  flex-direction: column;
}

.dropdown--wide .dropdown__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.dropdown__link {
  display: block;
  padding: 9px 22px;
  font-family: 'Archivo', 'Inter Tight', sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--c-text);
  position: relative;
  transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), padding var(--t-fast) var(--ease-out);
}

.dropdown__link::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 50%;
  width: 0;
  height: 1px;
  background: var(--c-brand);
  transform: translateY(-50%);
  transition: width var(--t-med) var(--ease-out);
  opacity: 0;
}

.dropdown__link:hover {
  color: var(--c-brand);
  padding-left: 38px;
  background: rgba(41, 79, 162, 0.04);
}

.dropdown__link:hover::before {
  width: 10px;
  opacity: 1;
  left: 22px;
}

/* Dropdowns are hidden on mobile — drawer takes over */
@media (max-width: 1100px) {
  .dropdown { display: none; }
  .nav__caret { display: none; }
}

/* Mobile drawer */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--c-brand-ink);
  color: var(--c-white);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-med) var(--ease-out);
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + 2rem) var(--container-pad) var(--space-7);
  overflow-y: auto;
}

.mobile-drawer.is-open {
  pointer-events: auto;
  opacity: 1;
}

.mobile-drawer__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--c-line-dark);
}

.mobile-drawer__list > li {
  border-bottom: 1px solid var(--c-line-dark);
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 500ms var(--ease-out),
    transform 500ms var(--ease-out);
}

/* Top-level link or accordion toggle */
.mobile-drawer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.15rem 0;
  font-family: 'Archivo', 'Inter Tight', sans-serif;
  font-size: clamp(1.2rem, 4vw, 1.6rem);
  font-weight: 500;
  letter-spacing: 0.005em;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: color var(--t-fast) var(--ease-out);
}

.mobile-drawer__row:hover { color: var(--c-brand-soft); }

.mobile-drawer__row-icon {
  width: 18px;
  height: 18px;
  opacity: 0.55;
  transition: transform var(--t-med) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}

.mobile-drawer__row:hover .mobile-drawer__row-icon { opacity: 1; }

/* Caret rotates when accordion expands */
.mobile-drawer__item.is-open .mobile-drawer__row-icon--caret {
  transform: rotate(180deg);
  opacity: 1;
}

/* Plain link item nudges its arrow on hover */
.mobile-drawer__row--link:hover .mobile-drawer__row-icon--arrow {
  transform: translateX(6px);
}

/* Accordion sublist */
.mobile-drawer__sublist {
  max-height: 0;
  overflow: hidden;
  transition: max-height 420ms var(--ease-emph);
}

.mobile-drawer__item.is-open .mobile-drawer__sublist {
  /* Set a generous ceiling — actual content is much shorter */
  max-height: 720px;
}

.mobile-drawer__sublist-inner {
  padding: 0 0 1rem 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 1rem;
}

@media (max-width: 540px) {
  .mobile-drawer__sublist-inner { grid-template-columns: 1fr; }
}

.mobile-drawer__sublink {
  display: block;
  padding: 0.55rem 0;
  font-family: 'Archivo', 'Inter Tight', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(218, 224, 238, 0.78);
  transition: color var(--t-fast) var(--ease-out);
}

.mobile-drawer__sublink:hover { color: var(--c-white); }

.mobile-drawer.is-open .mobile-drawer__list > li {
  opacity: 1;
  transform: translateY(0);
}

.mobile-drawer.is-open .mobile-drawer__list > li:nth-child(1) { transition-delay: 100ms; }
.mobile-drawer.is-open .mobile-drawer__list > li:nth-child(2) { transition-delay: 150ms; }
.mobile-drawer.is-open .mobile-drawer__list > li:nth-child(3) { transition-delay: 200ms; }
.mobile-drawer.is-open .mobile-drawer__list > li:nth-child(4) { transition-delay: 250ms; }
.mobile-drawer.is-open .mobile-drawer__list > li:nth-child(5) { transition-delay: 300ms; }
.mobile-drawer.is-open .mobile-drawer__list > li:nth-child(6) { transition-delay: 350ms; }
.mobile-drawer.is-open .mobile-drawer__list > li:nth-child(7) { transition-delay: 400ms; }
.mobile-drawer.is-open .mobile-drawer__list > li:nth-child(8) { transition-delay: 450ms; }

.mobile-drawer__footer {
  margin-top: auto;
  padding-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.mobile-drawer__contact {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-sm);
  color: rgba(218, 224, 238, 0.7);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ------------------------------------------------------------------ */
/*  7. Hero — premium full-bleed slider                                */
/* ------------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100svh;
  color: var(--c-white);
  overflow: hidden;
  background: var(--c-brand-ink);
  display: flex;
  align-items: flex-end;
  padding: calc(var(--header-h) + 2rem) 0 clamp(3rem, 6vw, 5rem);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1100ms var(--ease-emph);
  will-change: opacity;
}

.hero__slide.is-active {
  opacity: 1;
}

.hero__slide picture,
.hero__slide img,
.hero__slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

/* Slow Ken-Burns drift on the active slide */
.hero__slide.is-active img {
  animation: heroDrift 9s var(--ease-out) forwards;
}

@keyframes heroDrift {
  from { transform: scale(1.06) translate3d(-1%, 0, 0); }
  to   { transform: scale(1) translate3d(0, 0, 0); }
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
  z-index: 1;
}

/* Diagonal accent lines on the right edge — subtle premium touch */
.hero__rule {
  position: absolute;
  right: 0;
  top: 30%;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.16);
  z-index: 2;
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero__content {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: end;
}

.hero__copy {
  max-width: 720px;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.hero__eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: currentColor;
}

.hero__title {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: var(--fs-display);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: var(--space-4) 0 var(--space-4);
  color: var(--c-white);
  white-space: pre-line;
  font-weight: 500;
}

.hero__lead {
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--fs-md);
  max-width: 52ch;
  margin: 0 0 var(--space-6);
  line-height: 1.55;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Right-side meta column with counter, tag, and slider controls */
.hero__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-self: end;
  padding-bottom: var(--space-3);
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  padding-left: var(--space-5);
}

.hero__meta-tag {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.hero__meta-counter {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: var(--fs-xs);
  font-feature-settings: 'tnum';
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
}

.hero__meta-counter strong {
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--c-white);
  letter-spacing: -0.015em;
}

/* Pagination as thin progress lines */
.hero__pagination {
  display: flex;
  gap: 6px;
}

.hero__dot {
  flex: 0 0 64px;
  height: 2px;
  background: rgba(255, 255, 255, 0.20);
  border: none;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
}

.hero__dot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-white);
  transform: scaleX(0);
  transform-origin: left;
}

.hero__dot.is-active::after {
  transform: scaleX(1);
  transition: transform 6500ms linear;
}

/* Arrow navigation — minimal ghost circles, no background bar */
.hero__nav {
  display: inline-flex;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.hero__arrow {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--c-white);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition:
    background var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out);
}

.hero__arrow:hover {
  background: var(--c-white);
  border-color: var(--c-white);
  color: var(--c-brand-ink);
}

.hero__arrow svg {
  width: 16px;
  height: 16px;
  transition: transform var(--t-med) var(--ease-out);
}

.hero__arrow--prev:hover svg { transform: translateX(-3px); }
.hero__arrow--next:hover svg { transform: translateX(3px); }

/* Side scroll indicator */
.hero__scroll {
  position: absolute;
  bottom: clamp(1rem, 3vw, 2rem);
  left: var(--container-pad);
  z-index: 3;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.hero__scroll-line {
  writing-mode: horizontal-tb;
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.55));
  position: relative;
  overflow: hidden;
}

.hero__scroll-line::after {
  content: '';
  position: absolute;
  top: -40%;
  left: 0;
  width: 100%;
  height: 40%;
  background: var(--c-white);
  animation: scrollPulse 2.6s var(--ease-in-out) infinite;
}

@keyframes scrollPulse {
  0% { transform: translateY(0); }
  100% { transform: translateY(280%); }
}

@media (max-width: 900px) {
  .hero__content {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .hero__meta {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    padding-left: 0;
    padding-top: var(--space-4);
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  .hero__nav { margin-top: 0; }
  .hero__scroll { display: none; }
}

/* ------------------------------------------------------------------ */
/*  8a. Categories — premium photographic grid                         */
/* ------------------------------------------------------------------ */
.categories {
  background: var(--c-bg);
}

.categories__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
}
/* Breakpoints (3 → 2 → 1 columns) live in responsive.css. */

.cat-card {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: background var(--t-med) var(--ease-out);
  isolation: isolate;
}

.cat-card__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  position: relative;
  background: var(--c-brand-ink);
}

.cat-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1100ms var(--ease-out), filter 600ms var(--ease-out);
  filter: saturate(0.85) contrast(1.02);
}

/* Subtle blue tonal overlay so all cards feel cohesive */
.cat-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 40, 79, 0.05), rgba(22, 40, 79, 0.45));
  z-index: 1;
  pointer-events: none;
  transition: opacity var(--t-med) var(--ease-out);
}

.cat-card:hover .cat-card__media img {
  transform: scale(1.06);
  filter: saturate(1) contrast(1.05);
}

.cat-card:hover .cat-card__media::after {
  opacity: 0.6;
}

.cat-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: clamp(1.25rem, 2vw, 1.6rem);
  position: relative;
}

.cat-card__meta {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-brand);
}

.cat-card__title {
  font-size: var(--fs-lg);
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.012em;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  color: var(--c-text-strong);
}

.cat-card__title svg {
  width: 16px;
  height: 16px;
  color: var(--c-brand);
  transition: transform var(--t-med) var(--ease-out);
  flex: 0 0 auto;
}

.cat-card:hover .cat-card__title svg {
  transform: translate(4px, -4px);
}

.cat-card__excerpt {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  line-height: 1.55;
}

/* ------------------------------------------------------------------ */
/*  8b. Pillars — refined premium dark blue                            */
/* ------------------------------------------------------------------ */
.pillars {
  background: var(--c-brand-ink);
  color: var(--c-text-inverse);
  position: relative;
}

.pillars::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 400px at 90% 0%, rgba(95, 121, 183, 0.18), transparent 60%),
    radial-gradient(700px 380px at 5% 100%, rgba(41, 79, 162, 0.18), transparent 60%);
  pointer-events: none;
}

.pillars > .container { position: relative; z-index: 1; }

.pillars__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.10);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.pillar {
  background: var(--c-brand-ink);
  padding: clamp(1.5rem, 2.5vw, 2.4rem) clamp(1.25rem, 2vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
  transition: background var(--t-med) var(--ease-out);
}

.pillar:hover { background: var(--c-brand-deep); }

.pillar__num {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  color: var(--c-brand-soft);
}

.pillar__title {
  font-size: var(--fs-md);
  font-weight: 500;
  margin: 0;
  color: var(--c-white);
  letter-spacing: -0.012em;
}

.pillar__text {
  font-size: var(--fs-sm);
  color: rgba(218, 224, 238, 0.78);
  margin: 0;
  line-height: 1.6;
}

/* ------------------------------------------------------------------ */
/*  8c. Featured — premium product cards                               */
/* ------------------------------------------------------------------ */
.featured { background: var(--c-bg); }

.featured__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2vw, 1.75rem);
}

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  overflow: hidden;
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
  border: 1px solid var(--c-line-soft);
}

.product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.product-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-brand-ink);
  position: relative;
}

.product-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(22, 40, 79, 0.25));
  pointer-events: none;
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}

.product-card:hover .product-card__media img {
  transform: scale(1.05);
}

.product-card__body {
  padding: clamp(1.4rem, 2.2vw, 1.85rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.product-card__cat {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-brand);
}

.product-card__title {
  font-size: var(--fs-lg);
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.015em;
  color: var(--c-text-strong);
}

.product-card__excerpt {
  font-size: var(--fs-sm);
  margin: 0;
  color: var(--c-text-muted);
  line-height: 1.55;
}

.product-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--c-line-soft);
}

.product-card__tag {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  padding: 4px 8px;
  background: var(--c-bg);
  border-radius: var(--r-xs);
}

/* ------------------------------------------------------------------ */
/*  8d. Story / Manufacturing — editorial alternating blocks           */
/* ------------------------------------------------------------------ */
.story { background: var(--c-bg); }

.story__block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  margin-bottom: clamp(3.5rem, 6vw, 6rem);
}

.story__block:last-child { margin-bottom: 0; }

.story__block.is-reverse .story__media { order: 2; }

.story__media {
  aspect-ratio: 4 / 5;
  background: var(--c-brand-ink);
  overflow: hidden;
  position: relative;
}

.story__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1400ms var(--ease-out);
}

.story__block:hover .story__media img { transform: scale(1.04); }

.story__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(22, 40, 79, 0.20));
  pointer-events: none;
}

.story__content { max-width: 50ch; }

.story__title {
  margin-bottom: var(--space-4);
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
}

.story__text {
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--c-text-muted);
  margin: 0;
}

@media (max-width: 800px) {
  .story__block,
  .story__block.is-reverse {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .story__block.is-reverse .story__media { order: 0; }

  .story__media { aspect-ratio: 4 / 3; }
}

/* ------------------------------------------------------------------ */
/*  8e. Stats — strong contrast, premium rhythm                        */
/* ------------------------------------------------------------------ */
.stats {
  background: var(--c-brand-ink);
  color: var(--c-text-inverse);
  position: relative;
  overflow: hidden;
}

.stats::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 320px at 0% 100%, rgba(41, 79, 162, 0.22), transparent 60%);
  pointer-events: none;
}

.stats > .container { position: relative; z-index: 1; }

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.10);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.stat {
  background: var(--c-brand-ink);
  padding: clamp(2rem, 3.5vw, 3rem) clamp(1.25rem, 2vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.stat__value {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: clamp(2.6rem, 4.5vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--c-white);
  font-feature-settings: 'tnum';
}

.stat__label {
  font-size: var(--fs-sm);
  color: rgba(218, 224, 238, 0.82);
  line-height: 1.45;
  max-width: 26ch;
}

/* ------------------------------------------------------------------ */
/*  8f. News — editorial preview cards                                 */
/* ------------------------------------------------------------------ */
.news { background: var(--c-bg); }

.news__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 2.5vw, 2.4rem);
}

.news-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  position: relative;
}

.news-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-brand-ink);
  margin-bottom: var(--space-4);
  position: relative;
}

.news-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(22, 40, 79, 0.30));
  pointer-events: none;
}

.news-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1100ms var(--ease-out);
}

.news-card:hover .news-card__media img { transform: scale(1.04); }

.news-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: var(--space-3);
}

.news-card__tag { color: var(--c-brand); }

.news-card__sep {
  width: 16px;
  height: 1px;
  background: currentColor;
}

.news-card__title {
  font-size: var(--fs-lg);
  font-weight: 500;
  margin: 0 0 var(--space-3);
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--c-text-strong);
  transition: color var(--t-fast) var(--ease-out);
}

.news-card:hover .news-card__title { color: var(--c-brand); }

.news-card__excerpt {
  font-size: var(--fs-sm);
  margin: 0;
  color: var(--c-text-muted);
  line-height: 1.55;
}

/* ------------------------------------------------------------------ */
/*  8g. CTA banner                                                     */
/* ------------------------------------------------------------------ */
.cta-banner {
  background: var(--c-brand-deep);
  color: var(--c-text-inverse);
  padding-block: clamp(4rem, 7vw, 6.5rem);
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 360px at 95% 0%, rgba(95, 121, 183, 0.30), transparent 60%);
  pointer-events: none;
}

.cta-banner__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  position: relative;
  z-index: 1;
}

.cta-banner__title {
  font-size: var(--fs-2xl);
  margin: 0 0 var(--space-4);
  color: var(--c-white);
  letter-spacing: -0.024em;
  font-weight: 500;
}

.cta-banner__lead {
  margin: 0;
  color: rgba(218, 224, 238, 0.82);
  max-width: 52ch;
  font-size: var(--fs-md);
}

.cta-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: flex-end;
}

@media (max-width: 800px) {
  .cta-banner__inner { grid-template-columns: 1fr; }
  .cta-banner__actions { justify-content: flex-start; }
}

/* ------------------------------------------------------------------ */
/*  9. Footer                                                          */
/* ------------------------------------------------------------------ */
.site-footer {
  background: var(--c-brand-ink);
  color: var(--c-text-inverse);
  padding-block: clamp(3.5rem, 5vw, 5rem) var(--space-5);
  position: relative;
  overflow: hidden;
}

.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(800px 400px at 0% 0%, rgba(41, 79, 162, 0.18), transparent 60%);
  pointer-events: none;
}

.site-footer > .container { position: relative; z-index: 1; }

.site-footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.site-footer__brand .brand { margin-bottom: var(--space-4); }

.site-footer__about {
  font-size: var(--fs-sm);
  color: rgba(218, 224, 238, 0.78);
  margin: 0;
  max-width: 38ch;
  line-height: 1.65;
}

.site-footer h4,
.site-footer__heading {
  font-size: var(--fs-xs);
  font-family: ui-monospace, Menlo, monospace;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-brand-soft);
  margin: 0 0 var(--space-4);
  font-weight: 500;
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.site-footer__list a {
  font-size: var(--fs-sm);
  color: rgba(218, 224, 238, 0.82);
  transition: color var(--t-fast) var(--ease-out);
}

.site-footer__list a:hover { color: var(--c-white); }

.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: rgba(218, 224, 238, 0.82);
}

.site-footer__contact strong {
  color: var(--c-white);
  font-weight: 500;
  display: block;
  margin-bottom: 2px;
  font-size: var(--fs-xs);
  font-family: ui-monospace, Menlo, monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
}

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-top: var(--space-5);
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  color: rgba(218, 224, 238, 0.55);
  text-transform: uppercase;
  align-items: center;
}

.site-footer__legal { display: flex; gap: var(--space-5); flex-wrap: wrap; }

.site-footer__credit {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(218, 224, 238, 0.55);
}

.site-footer__credit a {
  color: var(--c-white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  padding-bottom: 2px;
  transition: border-color var(--t-fast) var(--ease-out);
}

.site-footer__credit a:hover { border-color: var(--c-brand-soft); }

/* ------------------------------------------------------------------ */
/*  10. Inner page primitives — reused by sub-pages                    */
/* ------------------------------------------------------------------ */
.page-hero {
  background: var(--c-brand-ink);
  color: var(--c-white);
  padding-top: calc(var(--header-h) + clamp(3rem, 6vw, 6rem));
  padding-bottom: clamp(3rem, 6vw, 6rem);
  position: relative;
  overflow: hidden;
}

.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.40;
}

.page-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}

.page-hero__title {
  font-size: var(--fs-3xl);
  margin: var(--space-4) 0 0;
  font-weight: 500;
  letter-spacing: -0.028em;
  color: var(--c-white);
}

.page-hero__lead {
  margin: 0;
  color: rgba(218, 224, 238, 0.85);
  font-size: var(--fs-md);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.breadcrumb a { color: inherit; transition: color var(--t-fast); }
.breadcrumb a:hover { color: var(--c-white); }
.breadcrumb__sep { opacity: 0.5; }
.breadcrumb [aria-current='page'] { color: var(--c-white); }

@media (max-width: 800px) {
  .page-hero__inner { grid-template-columns: 1fr; align-items: start; }
}

/* Category + product page primitives (styling mostly inherits via tokens) */
.cat-overview { background: var(--c-bg); }

.cat-overview__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--c-line-soft);
  margin-bottom: var(--space-6);
}

.filters__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.filters__label {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  min-width: 160px;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1rem;
  font-size: var(--fs-sm);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  cursor: pointer;
  background: var(--c-white);
  color: var(--c-text-muted);
  transition: all var(--t-fast) var(--ease-out);
}

.chip:hover { border-color: var(--c-text); color: var(--c-text); }

.chip.is-active {
  background: var(--c-brand);
  color: var(--c-white);
  border-color: var(--c-brand);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.products-grid__empty {
  grid-column: 1 / -1;
  padding: var(--space-7) 0;
  text-align: center;
  color: var(--c-text-muted);
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Trust strip */
.trust { background: var(--c-bg-alt); }

.trust__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}

.trust-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--c-line);
}

.trust-item__num {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  color: var(--c-brand);
}

.trust-item__title { font-size: var(--fs-md); font-weight: 500; margin: 0; }
.trust-item__text { font-size: var(--fs-sm); color: var(--c-text-muted); margin: 0; }

/* Product page hero */
.product-hero {
  background: var(--c-bg);
  padding-top: calc(var(--header-h) + clamp(2rem, 4vw, 3rem));
  padding-bottom: clamp(2rem, 5vw, 4rem);
}

.product-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.gallery { display: flex; flex-direction: column; gap: var(--space-3); }

.gallery__main {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-brand-ink);
  position: relative;
}

.gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 500ms var(--ease-out);
}

.gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.gallery__thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-brand-ink);
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out);
  opacity: 0.65;
  padding: 0;
}

.gallery__thumb:hover { opacity: 1; }
.gallery__thumb.is-active { border-color: var(--c-brand); opacity: 1; }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

.product-hero__title {
  font-size: var(--fs-2xl);
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
  letter-spacing: -0.024em;
}

.product-hero__positioning {
  font-size: var(--fs-md);
  color: var(--c-text-muted);
  margin-bottom: var(--space-5);
  max-width: 44ch;
}

.feature-bullets {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0 0 var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--c-line-soft);
}

.feature-bullets li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--c-line-soft);
}

.feature-bullets li::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--c-brand);
  border-radius: 50%;
  flex: 0 0 auto;
  margin-top: 0.55em;
}

.product-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

@media (max-width: 900px) {
  .product-hero__inner { grid-template-columns: 1fr; }
}

.product-detail {
  padding-block: clamp(3rem, 5vw, 5rem);
  border-top: 1px solid var(--c-line-soft);
}

.product-detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.product-detail__title { margin: 0 0 var(--space-4); }

.benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.benefit { padding-top: var(--space-3); border-top: 1px solid var(--c-line-soft); }

.benefit__num {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  color: var(--c-brand);
  margin-bottom: var(--space-3);
  display: block;
}

.benefit__title { font-size: var(--fs-md); font-weight: 500; margin: 0 0 var(--space-2); }
.benefit__text { margin: 0; font-size: var(--fs-sm); color: var(--c-text-muted); }

.specs-table { width: 100%; border-collapse: collapse; }

.specs-table th,
.specs-table td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--c-line-soft);
  font-size: var(--fs-sm);
}

.specs-table th {
  font-family: ui-monospace, Menlo, monospace;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  width: 50%;
  font-size: var(--fs-xs);
}

.specs-table td { color: var(--c-text); font-weight: 500; }
.specs-table tr:hover { background: var(--c-bg-alt); }

.usecases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.usecase { padding: var(--space-5); background: var(--c-white); border: 1px solid var(--c-line-soft); }
.usecase__title { font-size: var(--fs-md); font-weight: 500; margin: 0 0 var(--space-2); }
.usecase__text { margin: 0; font-size: var(--fs-sm); color: var(--c-text-muted); }

.related {
  background: var(--c-bg-alt);
  padding-block: clamp(3rem, 5vw, 5rem);
  border-top: 1px solid var(--c-line-soft);
}

.related__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

/* Forms */
.inquiry { background: var(--c-brand-ink); color: var(--c-text-inverse); }

.inquiry__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.inquiry__title {
  color: var(--c-white);
  font-size: var(--fs-2xl);
  margin: 0 0 var(--space-4);
  letter-spacing: -0.024em;
  font-weight: 500;
}

.inquiry__lead {
  margin: 0 0 var(--space-5);
  color: rgba(218, 224, 238, 0.78);
  max-width: 42ch;
}

.inquiry__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  font-size: var(--fs-sm);
  color: rgba(218, 224, 238, 0.78);
}

.inquiry__contact strong {
  color: var(--c-white);
  font-weight: 500;
  display: block;
  margin-bottom: 4px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.form-grid__full { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: 6px; position: relative; }

.field__label {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(218, 224, 238, 0.65);
}

.field__input,
.field__textarea,
.field__select {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--c-white);
  padding: 0.85rem 1rem;
  font-size: var(--fs-base);
  border-radius: var(--r-xs);
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
  width: 100%;
  font-family: inherit;
}

.field__input:focus,
.field__textarea:focus,
.field__select:focus {
  outline: none;
  border-color: var(--c-brand-soft);
  background: rgba(255, 255, 255, 0.04);
}

.field__textarea { min-height: 140px; resize: vertical; font-family: inherit; }

.field__select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.5) 50%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.5) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}

.field__select option { background: var(--c-brand-ink); color: var(--c-white); }

.field.is-invalid .field__input,
.field.is-invalid .field__textarea,
.field.is-invalid .field__select {
  border-color: #d97c63;
}

.field__error {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-xs);
  color: #e8a18d;
  letter-spacing: 0.04em;
  display: none;
}

.field.is-invalid .field__error { display: block; }

.form__submit { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-2); flex-wrap: wrap; }

.form__status {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.form__status.is-success { color: var(--c-brand-soft); }
.form__status.is-error { color: #e8a18d; }

@media (max-width: 800px) {
  .inquiry__inner { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}

/* Sticky mobile CTA on product page */
.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 80;
  background: var(--c-brand-ink);
  color: var(--c-white);
  padding: var(--space-3) var(--container-pad);
  display: none;
  gap: var(--space-2);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18);
  transform: translateY(100%);
  transition: transform var(--t-med) var(--ease-out);
}

.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta .btn { flex: 1; padding: 0.8rem 1rem; font-size: var(--fs-sm); }

/* ------------------------------------------------------------------ */
/*  11. Utilities                                                      */
/* ------------------------------------------------------------------ */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.no-scroll { overflow: hidden; }

/* ==========================================================================
   12. Preloader — premium logo entrance with scan + progress line
   ========================================================================== */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--c-brand-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Subtle radial highlight matches the dark sections elsewhere */
  background-image:
    radial-gradient(800px 400px at 50% 0%, rgba(95, 121, 183, 0.18), transparent 60%),
    linear-gradient(var(--c-brand-ink), var(--c-brand-ink));
  transition: opacity 400ms var(--ease-emph), visibility 0s linear 400ms;
}

.preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  padding: 0 var(--container-pad);
  max-width: 100%;
}

.preloader__logo-wrap {
  position: relative;
  overflow: hidden;
  padding: 8px 0;
  display: flex;
  justify-content: center;
}

/* Logo ~2.5x the previous size; capped to keep balance on small screens */
.preloader__logo {
  display: block;
  height: clamp(120px, 22vw, 190px);
  max-width: 86vw;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0;
  transform: translateY(10px);
  animation: preloaderLogoIn 450ms var(--ease-emph) 0ms forwards;
}

/* Industrial scanner sweep across the logo */
.preloader__scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.preloader__scan::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -2px;
  width: 1.5px;
  background: var(--c-brand-soft);
  box-shadow: 0 0 14px rgba(95, 121, 183, 0.85);
  opacity: 0;
  animation: preloaderScan 1.2s var(--ease-emph) 450ms infinite;
}

/* Thin progress bar below the logo */
.preloader__bar {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.10);
  position: relative;
  opacity: 0;
  animation: preloaderFadeIn 400ms var(--ease-out) 250ms forwards;
}

.preloader__bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-white);
  transform: scaleX(0);
  transform-origin: left;
  animation: preloaderBarFill 900ms var(--ease-emph) 400ms forwards;
}

/* Mono caption for brand authority */
.preloader__caption {
  font-family: ui-monospace, 'JetBrains Mono', Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  opacity: 0;
  animation: preloaderFadeIn 450ms var(--ease-out) 550ms forwards;
}

@keyframes preloaderLogoIn {
  to { opacity: 1; transform: none; }
}

@keyframes preloaderFadeIn {
  to { opacity: 1; }
}

@keyframes preloaderScan {
  0%   { left: -4px; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

@keyframes preloaderBarFill {
  to { transform: scaleX(1); }
}

/* Reduced motion — keep only opacity entrance, no sweep, no fill */
@media (prefers-reduced-motion: reduce) {
  .preloader__logo,
  .preloader__bar,
  .preloader__caption {
    animation: preloaderFadeIn 200ms var(--ease-out) 0ms forwards;
    transform: none;
  }
  .preloader__scan,
  .preloader__bar::after {
    display: none;
  }
}

/* ==========================================================================
   13. Homepage additions — Flagship cards, Action Band, Configurator
   --------------------------------------------------------------------------
   These rules were lost from their original mid-file position; appended at
   the end so future edits in earlier blocks can't accidentally erase them. ========================================================================== */ .flagship .product-card{border-color:var(--c-line-soft);cursor:default}.product-card__index{font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-xs);letter-spacing:0.22em;color:var(--c-brand-soft);text-transform:uppercase}.product-card__title-link{color:inherit;text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size var(--t-med) var(--ease-out),color var(--t-fast) var(--ease-out)}.product-card:hover .product-card__title-link{color:var(--c-brand);background-size:100% 1px}.product-card__actions{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-5);padding-top:var(--space-4);margin-top:auto;border-top:1px solid var(--c-line-soft)}.product-card__actions .link-arrow{font-family:'Archivo','Inter Tight',sans-serif;font-size:0.82rem;letter-spacing:0.05em;text-transform:uppercase;color:var(--c-text)}.product-card__actions .link-arrow--accent{color:var(--c-brand)}.action-band{position:relative;min-height:clamp(420px,64vh,720px);display:flex;align-items:center;overflow:hidden;color:var(--c-white);background:var(--c-brand-ink);isolation:isolate}.action-band__media{position:absolute;inset:-8% 0;z-index:0;will-change:transform}.action-band__media img{width:100%;height:100%;object-fit:cover;object-position:center 35%;transform:scale(1.04)}.action-band__overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(135deg,rgba(11,18,32,0.62) 0%,rgba(11,18,32,0.45) 50%,rgba(11,18,32,0.78) 100%),linear-gradient(180deg,transparent 50%,rgba(11,18,32,0.4) 100%);pointer-events:none}.action-band__inner{position:relative;z-index:2;padding-block:clamp(3.5rem,7vw,6rem)}.action-band__eyebrow{display:inline-flex;align-items:center;gap:var(--space-3);font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-xs);letter-spacing:0.26em;text-transform:uppercase;color:rgba(255,255,255,0.85);margin-bottom:var(--space-5)}.action-band__eyebrow::before{content:'';width:32px;height:1px;background:currentColor}.action-band__title{font-family:'Inter Tight','Inter',sans-serif;font-size:clamp(1.8rem,1.2rem + 2.2vw,3.4rem);line-height:1.05;letter-spacing:-0.025em;color:var(--c-white);margin:0 0 var(--space-5);white-space:pre-line;font-weight:500;max-width:22ch}.action-band__lead{margin:0 0 var(--space-6);font-size:var(--fs-md);color:rgba(255,255,255,0.85);max-width:56ch;line-height:1.55}.action-band__cta{display:inline-flex;align-items:center;gap:var(--space-3);font-family:'Archivo','Inter Tight',sans-serif;font-size:0.95rem;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;color:var(--c-white);padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,0.4);transition:border-color var(--t-fast) var(--ease-out),gap var(--t-fast) var(--ease-out);text-decoration:none}.action-band__cta:hover{border-color:var(--c-white);gap:var(--space-4)}.action-band__cta svg{width:18px;height:18px;flex:0 0 auto;transition:transform var(--t-med) var(--ease-out)}.action-band__cta:hover svg{transform:translateX(4px)}.configurator{background:var(--c-bg)}.configurator__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,5rem);align-items:stretch}.configurator__intro{display:flex;flex-direction:column;justify-content:center}.configurator__title{margin:0 0 var(--space-4);color:var(--c-text-strong)}.configurator__intro .lead{margin:0 0 var(--space-5)}.configurator__bullets{display:flex;flex-direction:column;gap:var(--space-2);margin:0 0 var(--space-5);padding:0;list-style:none}.configurator__bullets li{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-2) 0;font-size:var(--fs-sm);color:var(--c-text);border-bottom:1px solid var(--c-line-soft)}.configurator__bullets li::before{content:'';width:6px;height:6px;background:var(--c-brand);border-radius:50%;flex:0 0 auto;margin-top:0.55em}.configurator__note{font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-xs);letter-spacing:0.06em;color:var(--c-text-muted);margin:0;max-width:56ch;text-transform:none;line-height:1.55}.cfg-card{background:var(--c-white);border:1px solid var(--c-line-soft);box-shadow:var(--shadow-md);padding:clamp(1.5rem,3vw,2.4rem);display:flex;flex-direction:column;gap:var(--space-5);position:relative}.cfg-card__header{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:var(--space-4);align-items:center}.cfg-card__badge{display:block;font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-xs);letter-spacing:0.22em;text-transform:uppercase;color:var(--c-brand);margin-bottom:var(--space-2)}.cfg-card__title{font-size:var(--fs-xl);margin:0;letter-spacing:-0.018em;color:var(--c-text-strong)}.cfg-card__media{width:96px;height:96px;overflow:hidden;background:var(--c-brand-ink);border-radius:2px}.cfg-card__media img{width:100%;height:100%;object-fit:cover}.cfg-card__summary{margin:0;font-size:var(--fs-sm);color:var(--c-text-muted);line-height:1.55}.cfg-options{display:flex;flex-direction:column;gap:var(--space-3)}.cfg-option{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-3) var(--space-4);align-items:center;padding:var(--space-3) var(--space-4);border:1px solid var(--c-line-soft);background:var(--c-white);cursor:pointer;transition:border-color var(--t-fast) var(--ease-out),background var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out);position:relative}.cfg-option:hover{border-color:var(--c-brand-soft);background:rgba(95,121,183,0.04)}.cfg-option.is-checked{border-color:var(--c-brand);background:rgba(41,79,162,0.05);box-shadow:inset 3px 0 0 var(--c-brand)}.cfg-option__input{position:absolute;opacity:0;pointer-events:none}.cfg-option__check{width:20px;height:20px;border:1.5px solid var(--c-line);border-radius:3px;flex:0 0 auto;position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--c-white);transition:background var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out)}.cfg-option:hover .cfg-option__check{border-color:var(--c-brand-soft)}.cfg-option.is-checked .cfg-option__check{background:var(--c-brand);border-color:var(--c-brand)}.cfg-option__check::after{content:'';width:10px;height:5px;border:2px solid var(--c-white);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform 220ms var(--ease-emph)}.cfg-option.is-checked .cfg-option__check::after{transform:translateY(-1px) rotate(-45deg) scale(1)}.cfg-option__body{display:flex;flex-direction:column;gap:2px;min-width:0}.cfg-option__title{font-family:'Archivo','Inter Tight',sans-serif;font-size:0.95rem;font-weight:500;color:var(--c-text-strong);letter-spacing:0.005em}.cfg-option__hint{font-size:0.82rem;color:var(--c-text-muted);line-height:1.45}.cfg-option__price{font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-xs);letter-spacing:0.04em;color:var(--c-text-muted);white-space:nowrap;font-weight:500}.cfg-option.is-checked .cfg-option__price{color:var(--c-brand)}.cfg-summary{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--c-line)}.cfg-summary__row{display:flex;flex-direction:column;gap:4px}.cfg-summary__label{font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-xs);letter-spacing:0.18em;text-transform:uppercase;color:var(--c-text-muted)}.cfg-summary__base{font-family:'Inter Tight','Inter',sans-serif;font-size:1.05rem;font-weight:500;color:var(--c-text-muted);font-feature-settings:'tnum'}.cfg-summary__total{font-family:'Inter Tight','Inter',sans-serif;font-size:clamp(1.6rem,1.2rem + 1.2vw,2.2rem);font-weight:600;letter-spacing:-0.02em;line-height:1;color:var(--c-text-strong);font-feature-settings:'tnum';transition:color 240ms var(--ease-out),transform 220ms var(--ease-emph);display:inline-block}.cfg-summary__total.is-updating{color:var(--c-brand);transform:translateY(-2px)}.cfg-card__cta{align-self:flex-start}@media (max-width:900px){.configurator__inner{grid-template-columns:1fr}}@media (max-width:540px){.cfg-card__header{grid-template-columns:1fr}.cfg-card__media{width:80px;height:80px}.cfg-summary{flex-direction:column;align-items:flex-start}.cfg-option{grid-template-columns:auto minmax(0,1fr)}.cfg-option__price{grid-column:2;padding-top:4px}}.stats__note{margin:var(--space-6) 0 0;padding-top:var(--space-5);border-top:1px solid rgba(255,255,255,0.10);font-size:var(--fs-sm);color:rgba(218,224,238,0.7);max-width:78ch;line-height:1.6}.cta-banner{background-color:var(--c-brand-ink);background-image:linear-gradient( 135deg,rgba(22,40,79,0.78) 0%,rgba(22,40,79,0.70) 50%,rgba(30,53,107,0.82) 100% ),url('../images/company/majevica-servis-isporuka-masine-kupcima-1600.webp');background-size:cover;background-position:center 35%;background-repeat:no-repeat}.cta-banner::before{background:radial-gradient(700px 360px at 95% 0%,rgba(95,121,183,0.30),transparent 60%),linear-gradient(180deg,transparent 55%,rgba(11,18,32,0.25) 100%)}/* --- 14b. "Zašto Majevica" (.pillars) ------------------------------- */ .pillars{background-color:var(--c-brand-ink);background-image:linear-gradient( 135deg,rgba(22,40,79,0.78) 0%,rgba(22,40,79,0.70) 50%,rgba(30,53,107,0.82) 100% ),url('../images/products/setvospremaci/majevica-servis-sopstvena-proizvodnja-zavarivanje.webp');background-size:cover;background-position:center 35%;background-repeat:no-repeat}/* Heading + right-side lead in this section:white for premium contrast. Scoped — does NOT affect any other section's typography.              */
.pillars .section-head__title {
  color: var(--c-white);
}

.pillars .section-head__lead {
  color: rgba(255, 255, 255, 0.88);
}

/* --- 14c. Stats / Numbers (.stats) ---------------------------------- */
.stats {
  background-color: var(--c-brand-ink);
  background-image:
    linear-gradient(
      135deg,
      rgba(22, 40, 79, 0.78) 0%,
      rgba(22, 40, 79, 0.70) 50%,
      rgba(30, 53, 107, 0.82) 100%
    ),
    url('../images/ambient/Proizvodni-pogon-1600.webp');
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
}

/* Same scoped white heading + lead override for the Stats section. */
.stats .section-head__title {
  color: var(--c-white);
}

.stats .section-head__lead {
  color: rgba(255, 255, 255, 0.88);
}

/* --- 14d. Footer recovery ------------------------------------------- */
/* Slightly larger footer logo with a tighter footprint */
.site-footer .brand__logo {
  height: 64px;
}

/* Narrower brand column so the about text sits properly aligned and the
   logo no longer floats inside an empty padded grid cell.               */
.site-footer__top {
  grid-template-columns:
    minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 360px;
}

/* Override the global .brand { height: 100% } rule from the header
   context so the footer brand link doesn't stretch to row height (which was pushing the about paragraph downward). */ .site-footer__brand .brand{height:auto}.site-footer__about{max-width:34ch}.site-footer__bottom{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--space-3) var(--space-6);padding-top:var(--space-5);margin-top:var(--space-5);line-height:1.5}.site-footer__bottom>:nth-child(1){justify-self:start;text-align:left}.site-footer__bottom>:nth-child(2){justify-self:center;text-align:center}.site-footer__bottom>:nth-child(3){justify-self:end;text-align:right}@media (max-width:900px){.site-footer__bottom{grid-template-columns:1fr;gap:var(--space-3);text-align:left}.site-footer__bottom>:nth-child(1),.site-footer__bottom>:nth-child(2),.site-footer__bottom>:nth-child(3){justify-self:start;text-align:left}}.story__content{max-width:56ch}.story__content .eyebrow{margin-bottom:var(--space-5)}.story__title{font-size:clamp(1.7rem,1.3rem + 1.4vw,2.4rem);letter-spacing:-0.024em;line-height:1.12;margin-bottom:var(--space-5)}.story__text{font-size:clamp(1.05rem,0.98rem + 0.3vw,1.18rem);line-height:1.65;color:var(--c-text)}/* ========================================================================== 16. Category page — toolbar,count,badge,featured configurator -------------------------------------------------------------------------- Lives at the very end so future upstream edits can't erase it.
   ========================================================================== */

/* --- 16a. Catalog toolbar (filters + sort + cfg-only toggle) -------- */
.catalog__toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--c-line-soft);
}

.catalog__filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.catalog__filters .filters__row {
  margin: 0;
}

.catalog__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-4);
  border-top: 1px dashed var(--c-line-soft);
}

.catalog__toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.catalog__toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.catalog__toggle-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.55rem 1rem;
  font-family: 'Archivo', 'Inter Tight', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-white);
  transition: all var(--t-fast) var(--ease-out);
}

.catalog__toggle-pill::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-line);
  transition: background var(--t-fast) var(--ease-out);
}

.catalog__toggle:hover .catalog__toggle-pill {
  border-color: var(--c-text);
  color: var(--c-text);
}

.catalog__toggle input:checked + .catalog__toggle-pill {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: var(--c-white);
}

.catalog__toggle input:checked + .catalog__toggle-pill::before {
  background: var(--c-white);
}

.catalog__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.catalog__sort-label {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.catalog__sort-select {
  font-family: 'Archivo', 'Inter Tight', sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  background: var(--c-white);
  color: var(--c-text);
  padding: 0.6rem 2.2rem 0.6rem 1rem;
  border: 1px solid var(--c-line);
  border-radius: 2px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--c-text-muted) 50%),
    linear-gradient(135deg, var(--c-text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: border-color var(--t-fast) var(--ease-out);
}

.catalog__sort-select:hover,
.catalog__sort-select:focus {
  border-color: var(--c-text);
  outline: none;
}

.catalog__count {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: var(--space-5);
}

.catalog__count strong {
  color: var(--c-text);
  font-weight: 500;
}

@media (max-width: 640px) {
  .catalog__controls {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
  .catalog__sort {
    justify-content: space-between;
  }
}

/* --- 16b. Product card refinements on the category page ------------- */
/* Configurator-ready badge sits on top of the image */
.products-grid .product-card { cursor: default; }

.product-card__media {
  position: relative;
}

.product-card__badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.45rem 0.85rem;
  background: var(--c-white);
  color: var(--c-brand);
  font-family: 'Archivo', 'Inter Tight', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: var(--shadow-xs);
}

.product-card__badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-brand);
}

/* --- 16c. Featured "Configurator-Ready" spotlight block ------------- */
.feat-config {
  background: var(--c-bg);
}

.feat-config__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: stretch;
  background: var(--c-white);
  border: 1px solid var(--c-line-soft);
  box-shadow: var(--shadow-sm);
}

.feat-config__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--c-brand-ink);
  overflow: hidden;
}

.feat-config__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1100ms var(--ease-out);
}

.feat-config__inner:hover .feat-config__media img {
  transform: scale(1.04);
}

.feat-config__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(22, 40, 79, 0.30));
  pointer-events: none;
}

.feat-config__badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.55rem 1rem;
  background: var(--c-white);
  color: var(--c-brand);
  font-family: 'Archivo', 'Inter Tight', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

.feat-config__badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-brand);
}

.feat-config__body {
  padding: clamp(1.75rem, 3vw, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  justify-content: center;
}

.feat-config__cat {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-brand);
}

.feat-config__title {
  font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  margin: 0;
  letter-spacing: -0.018em;
  color: var(--c-text-strong);
}

.feat-config__summary {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--c-text-muted);
  line-height: 1.6;
  max-width: 56ch;
}

.feat-config__options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: var(--space-2) 0 var(--space-3);
}

.feat-config__option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-family: 'Archivo', 'Inter Tight', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--c-text);
  background: var(--c-bg);
  border: 1px solid var(--c-line-soft);
  border-radius: 999px;
}

.feat-config__option::before {
  content: '+';
  color: var(--c-brand);
  font-weight: 700;
}

.feat-config__price {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--c-line-soft);
  border-bottom: 1px solid var(--c-line-soft);
}

.feat-config__price-label {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.feat-config__price-value {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: clamp(1.6rem, 1.25rem + 1.2vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--c-text-strong);
  font-feature-settings: 'tnum';
}

.feat-config__note {
  font-size: 0.85rem;
  color: var(--c-text-muted);
  margin: 0;
  line-height: 1.5;
  max-width: 52ch;
}

.feat-config__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

@media (max-width: 900px) {
  .feat-config__inner {
    grid-template-columns: 1fr;
  }
  .feat-config__media {
    aspect-ratio: 16 / 10;
  }
}

/* --- 16d. Page hero refinements for the category page --------------- */
.page-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(22, 40, 79, 0.55), rgba(22, 40, 79, 0.78));
  pointer-events: none;
}

.page-hero__media { overflow: hidden; }

.page-hero__media img {
  opacity: 0.55;
}

.page-hero__category-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: 0.55rem 1rem;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.page-hero__category-meta strong {
  color: var(--c-white);
  font-weight: 500;
}

/* ==========================================================================
   17. Category page refinements (navbar parity, spacing, feat-config rebuild)
   --------------------------------------------------------------------------
   Appended at end-of-file so these rules win the cascade and survive
   upstream edits. Scoped to the category page surfaces only.
   ========================================================================== */

/* --- 17a. Page hero darker top scrim so transparent navbar reads -------- */
/* The category page hero uses a single still photo (not a video/slider),
   so we deepen the top edge to give the now-transparent header crisp
   contrast against the image — same legibility as the homepage hero. */
.page-hero {
  /* Reserve enough room for the transparent header to sit cleanly over the
     hero copy without clipping. */
  padding-top: calc(var(--header-h) + clamp(2rem, 4vw, 4rem));
  padding-bottom: clamp(2.5rem, 5vw, 5rem);
}

.page-hero__media::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 280px;
  background: linear-gradient(
    180deg,
    rgba(11, 18, 32, 0.55) 0%,
    rgba(11, 18, 32, 0.10) 70%,
    rgba(11, 18, 32, 0) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* --- 17b. Tighten spacing between overview and featured configurator --- */
/* The two sections both used full --space-section padding, creating a
   double-padded gap that felt disconnected. Compress them so the flow
   reads as one editorial sequence. */
.cat-overview {
  padding-bottom: clamp(2rem, 3.5vw, 3.5rem);
}

.feat-config {
  padding-top: clamp(1rem, 2vw, 2rem);
  padding-bottom: clamp(3rem, 5vw, 5rem);
}

/* --- 17c. Featured configurator card — premium rebuild ---------------- */
/* Resets the prior 16c rules to a cleaner 60/40 split, contained image,
   and integrated heading inside the card body. */
.feat-config__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); /* ~58/42 split */
  gap: 0;                          /* gap kills overlap; columns share the card */
  align-items: stretch;
  background: var(--c-white);
  border: 1px solid var(--c-line-soft);
  box-shadow: var(--shadow-sm);
  border-radius: var(--r-sm);
  overflow: hidden;                /* contains the image, prevents bleed */
  isolation: isolate;
}

.feat-config__media {
  position: relative;
  min-width: 0;                    /* lets the column shrink without overflowing */
  min-height: 100%;
  background: var(--c-brand-ink);
  overflow: hidden;
  aspect-ratio: auto;              /* card height is driven by body content */
}

.feat-config__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 1100ms var(--ease-out);
}

.feat-config__inner:hover .feat-config__media img {
  transform: scale(1.03);
}

.feat-config__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(22, 40, 79, 0.0) 55%,
    rgba(22, 40, 79, 0.28) 100%
  );
  pointer-events: none;
}

.feat-config__badge {
  position: absolute;
  top: clamp(1rem, 2vw, 1.5rem);
  left: clamp(1rem, 2vw, 1.5rem);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.55rem 1rem;
  background: var(--c-white);
  color: var(--c-brand);
  font-family: 'Archivo', 'Inter Tight', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: var(--shadow-xs);
}

.feat-config__badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-brand);
}

/* Body — sits in the right column, never overlapped by the image */
.feat-config__body {
  min-width: 0;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  justify-content: center;
}

.feat-config__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-brand);
  margin: 0;
}

.feat-config__eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: currentColor;
}

.feat-config__heading {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: clamp(1.45rem, 1.05rem + 1.2vw, 2.05rem);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: var(--c-text-strong);
  margin: 0;
}

.feat-config__intro {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--c-text-muted);
  line-height: 1.55;
  max-width: 46ch;
}

.feat-config__divider {
  height: 1px;
  background: var(--c-line-soft);
  margin: var(--space-2) 0;
}

.feat-config__cat {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin: 0;
}

.feat-config__title {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: clamp(1.2rem, 0.95rem + 0.8vw, 1.55rem);
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--c-text-strong);
  margin: 0;
}

.feat-config__summary {
  margin: 0;
  font-size: 0.98rem;
  color: var(--c-text-muted);
  line-height: 1.6;
  max-width: 46ch;
}

.feat-config__options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: var(--space-2) 0 var(--space-3);
}

.feat-config__option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-family: 'Archivo', 'Inter Tight', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--c-text);
  background: var(--c-bg);
  border: 1px solid var(--c-line-soft);
  border-radius: 999px;
}

.feat-config__option::before {
  content: '+';
  color: var(--c-brand);
  font-weight: 700;
}

.feat-config__price {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--c-line-soft);
  border-bottom: 1px solid var(--c-line-soft);
}

.feat-config__price-label {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.feat-config__price-value {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--c-text-strong);
  font-feature-settings: 'tnum';
}

.feat-config__note {
  font-size: 0.85rem;
  color: var(--c-text-muted);
  margin: 0;
  line-height: 1.5;
  max-width: 48ch;
}

.feat-config__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* --- 17d. Featured configurator — responsive ------------------------- */
/* Tablet & narrow desktop: balance the split a touch wider for the body */
@media (max-width: 1100px) {
  .feat-config__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
}

/* Tablet portrait & below: stack vertically. Image first (visual anchor),
   body below. Image gets a contained aspect ratio so it doesn't dominate. */ @media (max-width:900px){.feat-config__inner{grid-template-columns:1fr}.feat-config__media{aspect-ratio:16 / 10;min-height:0}.feat-config__body{padding:clamp(1.5rem,5vw,2.25rem)}}@media (max-width:540px){.feat-config__media{aspect-ratio:4 / 3}.feat-config__heading{font-size:clamp(1.35rem,5.5vw,1.7rem)}.feat-config__actions .btn{flex:1 1 auto;justify-content:center}}.product-hero{position:relative;background:var(--c-brand-ink);color:var(--c-white);padding-top:calc(var(--header-h) + clamp(2rem,5vw,4rem));padding-bottom:clamp(3rem,6vw,5rem);overflow:hidden;min-height:70vh;display:flex;align-items:flex-end}.product-hero__media{position:absolute;inset:0;z-index:0}.product-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 40%;opacity:0.55}.product-hero__media::before,.product-hero__media::after{content:'';position:absolute;inset:0;pointer-events:none}.product-hero__media::before{background:linear-gradient( 180deg,rgba(11,18,32,0.55) 0%,rgba(11,18,32,0.10) 35%,rgba(11,18,32,0.78) 100% );z-index:1}.product-hero__media::after{background:linear-gradient( 90deg,rgba(22,40,79,0.55) 0%,rgba(22,40,79,0.20) 60%,rgba(22,40,79,0) 100% );z-index:1}.product-hero__inner{position:relative;z-index:2;width:100%}.product-hero .breadcrumb{margin-bottom:var(--space-5)}.product-hero__layout{display:grid;grid-template-columns:minmax(0,1fr);max-width:64rem}.product-hero__copy{min-width:0}.product-hero__cat{display:inline-flex;align-items:center;gap:var(--space-3);font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-xs);letter-spacing:0.22em;text-transform:uppercase;color:var(--c-brand-soft);margin-bottom:var(--space-3)}.product-hero__cat::before{content:'';width:32px;height:1px;background:currentColor}.product-hero__title{font-family:'Inter Tight','Inter',sans-serif;font-size:clamp(2rem,1.4rem + 2.4vw,3.4rem);font-weight:500;letter-spacing:-0.028em;line-height:1.08;color:var(--c-white);margin:0 0 var(--space-4);max-width:22ch}.product-hero__positioning{font-size:clamp(1.05rem,0.98rem + 0.4vw,1.2rem);line-height:1.55;color:rgba(218,224,238,0.85);margin:0 0 var(--space-5);max-width:56ch}.product-hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-bottom:var(--space-5)}.product-hero__badge{display:inline-flex;align-items:center;gap:var(--space-2);padding:0.5rem 0.95rem;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.18);color:var(--c-white);font-family:'Archivo','Inter Tight',sans-serif;font-size:0.72rem;font-weight:600;letter-spacing:0.10em;text-transform:uppercase;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.product-hero__badge::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--c-brand-soft);box-shadow:0 0 0 4px rgba(95,121,183,0.18)}.product-hero__availability{font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-xs);letter-spacing:0.16em;text-transform:uppercase;color:rgba(218,224,238,0.7)}.product-hero__specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-3);margin:0 0 var(--space-6);padding:0;list-style:none;border-top:1px solid rgba(255,255,255,0.12);padding-top:var(--space-5);max-width:56rem}.product-hero__spec{display:flex;flex-direction:column;gap:4px}.product-hero__spec-label{font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-xs);letter-spacing:0.18em;text-transform:uppercase;color:rgba(218,224,238,0.6)}.product-hero__spec-value{font-family:'Inter Tight','Inter',sans-serif;font-size:1.15rem;font-weight:500;color:var(--c-white);letter-spacing:-0.012em}.product-hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}.product-overview{background:var(--c-bg);padding-block:clamp(3rem,5vw,5rem)}.product-overview__inner{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(2rem,4vw,4rem);align-items:start}.product-summary{background:var(--c-white);border:1px solid var(--c-line-soft);padding:clamp(1.5rem,2.5vw,2.25rem);display:flex;flex-direction:column;gap:var(--space-4)}.product-summary__title{font-family:'Inter Tight','Inter',sans-serif;font-size:clamp(1.3rem,1.05rem + 0.9vw,1.7rem);font-weight:500;letter-spacing:-0.022em;line-height:1.18;color:var(--c-text-strong);margin:0}.product-summary__text{margin:0;font-size:var(--fs-md);line-height:1.6;color:var(--c-text-muted)}.product-summary__highlights{margin:var(--space-3) 0 0;padding:var(--space-4) 0 0;border-top:1px solid var(--c-line-soft);display:grid;grid-template-columns:1fr;gap:var(--space-3)}.product-summary__highlight{display:grid;grid-template-columns:minmax(120px,0.6fr) minmax(0,1fr);gap:var(--space-4);align-items:baseline;padding-bottom:var(--space-3);border-bottom:1px dashed var(--c-line-soft)}.product-summary__highlight:last-child{border-bottom:0;padding-bottom:0}.product-summary__highlight dt{font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-xs);letter-spacing:0.18em;text-transform:uppercase;color:var(--c-text-muted);margin:0}.product-summary__highlight dd{margin:0;font-size:0.95rem;font-weight:500;color:var(--c-text);line-height:1.45}.product-summary__cta{margin-top:var(--space-3)}.product-summary__cta .link-arrow{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--c-brand);font-family:'Archivo','Inter Tight',sans-serif;font-weight:600;font-size:0.92rem;letter-spacing:0.04em}.product-summary__cta .link-arrow svg{width:16px;height:16px;transition:transform var(--t-fast) var(--ease-out)}.product-summary__cta .link-arrow:hover svg{transform:translateX(4px)}.configurator-pro{background:var(--c-bg-alt);padding-block:clamp(3rem,5vw,5rem);border-top:1px solid var(--c-line-soft);border-bottom:1px solid var(--c-line-soft);scroll-margin-top:var(--header-h)}.cfg-pro{display:grid;grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);gap:clamp(1.5rem,3vw,2.5rem);align-items:stretch}.cfg-pro__preview{background:var(--c-white);border:1px solid var(--c-line-soft);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;position:sticky;top:calc(var(--header-h-scrolled) + 1.5rem);align-self:start;min-width:0;overflow:hidden}.cfg-pro__preview-media{position:relative;aspect-ratio:4 / 3;background:var(--c-brand-ink);overflow:hidden}.cfg-pro__preview-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.cfg-pro__badge{position:absolute;top:var(--space-4);left:var(--space-4);z-index:2;display:inline-flex;align-items:center;gap:var(--space-2);padding:0.5rem 0.95rem;background:var(--c-white);color:var(--c-brand);font-family:'Archivo','Inter Tight',sans-serif;font-size:0.72rem;font-weight:600;letter-spacing:0.10em;text-transform:uppercase;border-radius:999px;box-shadow:var(--shadow-xs)}.cfg-pro__badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--c-brand)}.cfg-pro__preview-body{padding:clamp(1.25rem,2.5vw,1.75rem);display:flex;flex-direction:column;gap:var(--space-3);min-width:0}.cfg-pro__preview-cat{font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-xs);letter-spacing:0.22em;text-transform:uppercase;color:var(--c-brand)}.cfg-pro__preview-title{font-family:'Inter Tight','Inter',sans-serif;font-size:clamp(1.2rem,1rem + 0.6vw,1.45rem);font-weight:500;letter-spacing:-0.018em;color:var(--c-text-strong);margin:0}.cfg-pro__preview-model{margin:0;font-size:0.88rem;color:var(--c-text-muted)}.cfg-pro__summary{margin-top:var(--space-3);padding-top:var(--space-4);border-top:1px solid var(--c-line-soft);display:flex;flex-direction:column;gap:var(--space-2)}.cfg-pro__summary-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3)}.cfg-pro__summary-label{font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-xs);letter-spacing:0.16em;text-transform:uppercase;color:var(--c-text-muted)}.cfg-pro__summary-value{font-family:'Inter Tight','Inter',sans-serif;font-size:1rem;font-weight:500;color:var(--c-text);font-feature-settings:'tnum'}.cfg-pro__summary-row--total{margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--c-line-soft)}.cfg-pro__summary-total{font-family:'Inter Tight','Inter',sans-serif;font-size:clamp(1.55rem,1.2rem + 1.2vw,2.05rem);font-weight:600;letter-spacing:-0.022em;color:var(--c-text-strong);font-feature-settings:'tnum';display:inline-block}.cfg-pro__summary-total.is-flash{animation:cfgTotalFlash 520ms var(--ease-out)}@keyframes cfgTotalFlash{0%{color:var(--c-brand);transform:translateY(-1px)}100%{color:var(--c-text-strong);transform:translateY(0)}}.cfg-pro__selected{margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px dashed var(--c-line-soft);display:flex;flex-direction:column;gap:var(--space-2)}.cfg-pro__selected-label{font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-xs);letter-spacing:0.16em;text-transform:uppercase;color:var(--c-text-muted)}.cfg-pro__selected-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:180px;overflow-y:auto}.cfg-pro__selected-empty{font-size:0.88rem;color:var(--c-text-muted);font-style:italic}.cfg-pro__selected-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:var(--space-2);padding:4px 0;font-size:0.88rem}.cfg-pro__selected-dot{width:6px;height:6px;border-radius:50%;background:var(--c-brand)}.cfg-pro__selected-name{color:var(--c-text);min-width:0;overflow:hidden;text-overflow:ellipsis}.cfg-pro__selected-price{font-family:'Inter Tight','Inter',sans-serif;font-weight:500;color:var(--c-text-strong);font-feature-settings:'tnum'}.cfg-pro__actions{margin-top:var(--space-4);display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}.cfg-pro__reset{background:none;border:0;padding:0.55rem 0;font-family:'Archivo','Inter Tight',sans-serif;font-size:0.85rem;font-weight:500;letter-spacing:0.04em;color:var(--c-text-muted);cursor:pointer;transition:color var(--t-fast) var(--ease-out)}.cfg-pro__reset:hover{color:var(--c-text);text-decoration:underline}.cfg-pro__note{margin:var(--space-3) 0 0;font-size:0.82rem;color:var(--c-text-muted);line-height:1.5}.cfg-pro__panel{display:flex;flex-direction:column;gap:var(--space-4);min-width:0}.cfg-pro__panel-head{display:flex;flex-direction:column;gap:4px}.cfg-pro__panel-eyebrow{font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-xs);letter-spacing:0.22em;text-transform:uppercase;color:var(--c-brand)}.cfg-pro__panel-hint{font-size:0.92rem;color:var(--c-text-muted)}.cfg-pro__options{display:flex;flex-direction:column;gap:var(--space-3)}.cfg-option{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-3) var(--space-4);align-items:start;padding:var(--space-4) clamp(1rem,2vw,1.5rem);background:var(--c-white);border:1px solid var(--c-line-soft);cursor:pointer;transition:border-color var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out),background var(--t-fast) var(--ease-out)}.cfg-option:hover{border-color:var(--c-brand-soft);box-shadow:var(--shadow-xs)}.cfg-option__input{position:absolute;opacity:0;pointer-events:none}.cfg-option__check{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--c-line);background:var(--c-white);color:transparent;border-radius:4px;flex-shrink:0;transition:background var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out);margin-top:2px}.cfg-option__check svg{width:12px;height:12px}.cfg-option__body{display:flex;flex-direction:column;gap:4px;min-width:0}.cfg-option__title{font-family:'Inter Tight','Inter',sans-serif;font-size:1rem;font-weight:500;color:var(--c-text-strong);letter-spacing:-0.012em}.cfg-option__hint{font-size:0.86rem;color:var(--c-text-muted);line-height:1.5}.cfg-option__price{font-family:'Inter Tight','Inter',sans-serif;font-size:0.98rem;font-weight:600;letter-spacing:-0.01em;color:var(--c-brand);white-space:nowrap;font-feature-settings:'tnum'}.cfg-option:focus-within{outline:2px solid rgba(41,79,162,0.25);outline-offset:2px}.cfg-option.is-selected{border-color:var(--c-brand);background:rgba(41,79,162,0.04);box-shadow:0 0 0 1px var(--c-brand) inset}.cfg-option.is-selected .cfg-option__check{background:var(--c-brand);border-color:var(--c-brand);color:var(--c-white)}.inquiry-summary{margin:var(--space-5) 0 var(--space-5);padding:clamp(1rem,2vw,1.5rem);background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.12);border-radius:var(--r-sm)}.inquiry-summary__head{display:flex;flex-direction:column;gap:4px;margin-bottom:var(--space-4)}.inquiry-summary__eyebrow{font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-xs);letter-spacing:0.22em;text-transform:uppercase;color:var(--c-brand-soft)}.inquiry-summary__product{font-family:'Inter Tight','Inter',sans-serif;font-size:1.1rem;font-weight:500;color:var(--c-white);letter-spacing:-0.012em}.inquiry-summary__rows{margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}.inquiry-summary__row{display:grid;grid-template-columns:minmax(120px,0.55fr) minmax(0,1fr);gap:var(--space-3);align-items:baseline;padding-bottom:var(--space-2);border-bottom:1px dashed rgba(255,255,255,0.08)}.inquiry-summary__row:last-child{border-bottom:0;padding-bottom:0}.inquiry-summary__row dt{margin:0;font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-xs);letter-spacing:0.16em;text-transform:uppercase;color:rgba(218,224,238,0.6)}.inquiry-summary__row dd{margin:0;font-size:0.92rem;font-weight:500;color:rgba(218,224,238,0.92);font-feature-settings:'tnum';word-break:break-word}.inquiry-summary__row--total{margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid rgba(255,255,255,0.16)}.inquiry-summary__row--total dt{color:var(--c-white)}.inquiry-summary__row--total dd{font-family:'Inter Tight','Inter',sans-serif;font-size:1.35rem;font-weight:600;letter-spacing:-0.018em;color:var(--c-white)}.buyer-toggle{position:relative;display:grid;grid-template-columns:1fr 1fr;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.16);border-radius:999px;padding:4px;margin-bottom:var(--space-5);width:max-content;max-width:100%;isolation:isolate}.buyer-toggle__btn{position:relative;z-index:2;background:transparent;border:0;padding:0.6rem 1.5rem;min-width:150px;font-family:'Archivo','Inter Tight',sans-serif;font-size:0.85rem;font-weight:600;letter-spacing:0.06em;color:rgba(218,224,238,0.65);cursor:pointer;border-radius:999px;transition:color var(--t-fast) var(--ease-out);text-align:center}.buyer-toggle__btn:hover{color:var(--c-white)}.buyer-toggle__btn.is-active{color:var(--c-brand)}.buyer-toggle__indicator{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);background:var(--c-white);border-radius:999px;z-index:1;transition:transform var(--t-med) var(--ease-emph)}.buyer-toggle[data-active='individual'] .buyer-toggle__indicator{transform:translateX(100%)}[data-buyer-field][hidden]{display:none !important}.advisory-cta{background:linear-gradient(135deg,rgba(22,40,79,0.92),rgba(22,40,79,0.78)),url('../images/company/majevica-servis-primopredaja-masine-kupcu-1600.webp') center / cover no-repeat;color:var(--c-white);padding-block:clamp(3rem,5vw,5rem)}.advisory-cta__inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(1.5rem,4vw,4rem);align-items:center}.advisory-cta__title{font-family:'Inter Tight','Inter',sans-serif;font-size:clamp(1.5rem,1.1rem + 1.6vw,2.3rem);font-weight:500;letter-spacing:-0.024em;line-height:1.18;color:var(--c-white);margin:var(--space-3) 0 var(--space-3);max-width:28ch}.advisory-cta__lead{margin:0;color:rgba(218,224,238,0.85);font-size:var(--fs-md);max-width:56ch;line-height:1.55}.advisory-cta__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-self:end}@media (max-width:1100px){.cfg-pro{grid-template-columns:minmax(0,1fr)}.cfg-pro__preview{position:static}}@media (max-width:900px){.product-overview__inner{grid-template-columns:1fr}.product-hero{min-height:56vh;padding-top:calc(var(--header-h) + clamp(1.5rem,4vw,3rem))}.product-hero__title{max-width:none}.product-hero__media::after{background:none}/* don't darken further on small */
  .advisory-cta__inner {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .advisory-cta__actions { justify-self: start; }
}

@media (max-width: 640px) {
  .product-hero__actions .btn { flex: 1 1 100%; justify-content: center; }
  .cfg-option {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-2) var(--space-3);
  }
  .cfg-option__price {
    grid-column: 1 / -1;
    padding-left: calc(22px + var(--space-3));
  }
  .cfg-pro__actions .btn { flex: 1 1 auto; justify-content: center; }
  .cfg-pro__actions { gap: var(--space-2); }
  .buyer-toggle { width: 100%; }
  .buyer-toggle__btn { min-width: 0; padding: 0.6rem 0.5rem; }
  .inquiry-summary__row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .advisory-cta__actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================
   19. Premium lightbox + atmospheric inquiry background
   --------------------------------------------------------------------------
   - 19a: Custom Vanilla JS lightbox (dark elegant overlay, fade+zoom slide
          transitions, prev/next/close, ESC + arrow keys handled in JS)
   - 19b: Layered background image + 80% blue tint behind the inquiry/
          configuration form, keeping every label, input and CTA legible.
   Appended at end-of-file so these rules win the cascade.
   ========================================================================== */

/* --- 19a. Gallery main image — clickable affordance ------------------- */
.gallery__main--zoomable {
  cursor: zoom-in;
  position: relative;
  outline: none;
}

.gallery__main--zoomable::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 65%, rgba(11, 18, 32, 0.18));
  opacity: 0;
  transition: opacity var(--t-med) var(--ease-out);
  pointer-events: none;
}

.gallery__main--zoomable:hover::after,
.gallery__main--zoomable:focus-visible::after {
  opacity: 1;
}

.gallery__main--zoomable:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 4px;
}

/* Subtle "Uvećaj" hint pill that appears on hover */
.gallery__main--zoomable::before {
  content: 'Uvećajte';
  position: absolute;
  z-index: 2;
  bottom: var(--space-3);
  right: var(--space-3);
  padding: 0.45rem 0.85rem;
  background: rgba(11, 18, 32, 0.78);
  color: var(--c-white);
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity var(--t-med) var(--ease-out),
    transform var(--t-med) var(--ease-out);
  pointer-events: none;
}

.gallery__main--zoomable:hover::before,
.gallery__main--zoomable:focus-visible::before {
  opacity: 1;
  transform: translateY(0);
}

/* --- 19a. Lightbox — overlay, stage, controls ------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 360ms var(--ease-out),
    visibility 0s linear 360ms;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 360ms var(--ease-out),
    visibility 0s linear 0s;
}

/* Backdrop — deep brand ink + soft blur for premium depth */
.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(95, 121, 183, 0.18), transparent 60%),
    rgba(7, 12, 24, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: zoom-out;
}

.lightbox__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: clamp(3rem, 6vw, 5rem) clamp(3rem, 8vw, 6rem) clamp(2rem, 4vw, 3rem);
  gap: var(--space-5);
  pointer-events: none;            /* clicks pass to backdrop unless on a control */
}

.lightbox__inner > * { pointer-events: auto; }

.lightbox__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
  transform: scale(0.96);
  opacity: 0;
  transition:
    transform 520ms var(--ease-emph),
    opacity 360ms var(--ease-out);
}

.lightbox.is-open .lightbox__img,
.lightbox__img.is-shown {
  transform: scale(1);
  opacity: 1;
}

/* Close button — top right, refined */
.lightbox__close {
  position: absolute;
  top: clamp(1rem, 3vw, 1.75rem);
  right: clamp(1rem, 3vw, 1.75rem);
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  color: var(--c-white);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition:
    background var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    transform var(--t-fast) var(--ease-out);
}

.lightbox__close svg { width: 18px; height: 18px; }

.lightbox__close:hover,
.lightbox__close:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.35);
  transform: scale(1.04);
  outline: none;
}

/* Prev / next nav — vertical center, thin square buttons */
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--c-white);
  border-radius: 999px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition:
    background var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    transform var(--t-fast) var(--ease-out);
}

.lightbox__nav svg { width: 20px; height: 20px; }

.lightbox__nav--prev { left: clamp(0.75rem, 2.5vw, 1.75rem); }
.lightbox__nav--next { right: clamp(0.75rem, 2.5vw, 1.75rem); }

.lightbox__nav:hover,
.lightbox__nav:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.35);
  outline: none;
}

.lightbox__nav--prev:hover { transform: translateY(-50%) translateX(-2px); }
.lightbox__nav--next:hover { transform: translateY(-50%) translateX(2px); }

/* Bottom meta — counter + caption */
.lightbox__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  color: rgba(218, 224, 238, 0.75);
  font-size: var(--fs-sm);
}

.lightbox__counter {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.lightbox__counter strong {
  color: var(--c-white);
  font-weight: 500;
  margin-right: 4px;
}

.lightbox__caption {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: 0.95rem;
  color: rgba(218, 224, 238, 0.85);
  letter-spacing: -0.005em;
  flex: 1 1 auto;
  text-align: right;
}

/* Lightbox responsive */
@media (max-width: 720px) {
  .lightbox__inner {
    padding: clamp(3.5rem, 9vw, 4.5rem) var(--container-pad) clamp(1.25rem, 4vw, 2rem);
  }
  .lightbox__nav {
    width: 44px;
    height: 44px;
    top: auto;
    bottom: clamp(3.5rem, 12vw, 4.5rem);
    transform: translateY(0);
  }
  .lightbox__nav--prev { left: var(--container-pad); }
  .lightbox__nav--next { right: var(--container-pad); }
  .lightbox__nav--prev:hover { transform: translateY(0) translateX(-2px); }
  .lightbox__nav--next:hover { transform: translateY(0) translateX(2px); }
  .lightbox__caption {
    text-align: left;
    flex: 1 1 100%;
    order: 2;
  }
  .lightbox__counter { order: 1; }
}

/* --- 19b. Inquiry section — atmospheric background image -------------- */
/* Layered background: photograph + 80% deep-blue tint. Form content keeps
   the existing structure, just sits on a richer surface. */
.inquiry {
  position: relative;
  background-color: var(--c-brand-ink);
  background-image:
    /* primary blue tint at ~80% — keeps every label/input legible */
    linear-gradient(
      135deg,
      rgba(22, 40, 79, 0.86) 0%,
      rgba(22, 40, 79, 0.78) 60%,
      rgba(11, 18, 32, 0.86) 100%
    ),
    /* photograph */
    url('../images/company/majevica-servis-primopredaja-kljuceva-i-ugovora-1600.webp');
  background-size: cover, cover;
  background-position: center, center 35%;
  background-repeat: no-repeat, no-repeat;
  background-attachment: scroll, scroll;
  isolation: isolate;
  overflow: hidden;
}

/* Soft top + bottom edge fades so the section sits naturally between the
   configurator and the specs without a hard photo seam. */
.inquiry::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(11, 18, 32, 0.35) 0%, rgba(11, 18, 32, 0) 18%),
    linear-gradient(0deg,   rgba(11, 18, 32, 0.30) 0%, rgba(11, 18, 32, 0) 14%);
}

/* All form content sits above the overlay layers */
.inquiry > .container,
.inquiry .inquiry__inner {
  position: relative;
  z-index: 1;
}

/* The inquiry-summary card already had a translucent surface — give it a
   touch more presence so it reads cleanly over the photograph. */
.inquiry .inquiry-summary {
  background: rgba(11, 18, 32, 0.45);
  border-color: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Slight darkening behind input fields keeps focus rings + placeholders
   legible against the photograph. */
.inquiry .field__input,
.inquiry .field__textarea,
.inquiry .field__select {
  background: rgba(11, 18, 32, 0.32);
}

.inquiry .field__input:focus,
.inquiry .field__textarea:focus,
.inquiry .field__select:focus {
  background: rgba(11, 18, 32, 0.55);
}

/* The buyer-toggle wrapper also sits over the photo — strengthen contrast */
.inquiry .buyer-toggle {
  background: rgba(11, 18, 32, 0.45);
  border-color: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Mobile: parallax-style fixed attachment is unreliable on iOS — already
   set to scroll above. Just ensure the photo stays composed. */
@media (max-width: 720px) {
  .inquiry { background-position: center, center 50%; }
}

/* ==========================================================================
   20. Premium polish pass — sticky bar, badges, advisory, docs, visual band,
        configurator state UX, micro-motion
   --------------------------------------------------------------------------
   Appended at end-of-file so these rules win the cascade.
   ========================================================================== */

/* --- 20a. Standardized badge system ---------------------------------- */
/* Pill component with semantic variants. Used on product cards, in the
   product hero row, and anywhere else trust/state needs a quick read. */
.badge-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.badge-row--hero {
  margin: var(--space-4) 0 var(--space-5);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 9px;
  font-family: 'Archivo', 'Inter Tight', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
  line-height: 1;
  transition:
    background var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out);
}

.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Variants — light surface (cards) */
.badge--config   { color: var(--c-brand);    background: rgba(41, 79, 162, 0.08); border-color: rgba(41, 79, 162, 0.30); }
.badge--featured { color: #b45c1d;           background: rgba(180, 92, 29, 0.08); border-color: rgba(180, 92, 29, 0.30); }
.badge--fast     { color: #2f7a4d;           background: rgba(47, 122, 77, 0.08); border-color: rgba(47, 122, 77, 0.30); }
.badge--parts    { color: var(--c-text);     background: var(--c-bg);             border-color: var(--c-line); }
.badge--service  { color: var(--c-brand-deep); background: rgba(30, 53, 107, 0.06); border-color: rgba(30, 53, 107, 0.25); }
.badge--neutral  { color: var(--c-text-muted); background: transparent;             border-color: var(--c-line-soft); }

/* Hero (dark surface) — invert for legibility */
.badge-row--hero .badge {
  color: var(--c-white);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.badge-row--hero .badge--config   { background: rgba(95, 121, 183, 0.22); border-color: rgba(95, 121, 183, 0.55); }
.badge-row--hero .badge--featured { background: rgba(231, 161, 100, 0.22); border-color: rgba(231, 161, 100, 0.55); color: #f0c9a3; }
.badge-row--hero .badge--fast     { background: rgba(120, 200, 152, 0.18); border-color: rgba(120, 200, 152, 0.50); color: #b9e6cb; }

/* Card-level badge row sits above the action links, below the tags */
.product-card .badge-row {
  margin-top: var(--space-3);
}

/* --- 20b. Sticky product summary bar --------------------------------- */
.product-sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  background: rgba(11, 18, 32, 0.94);
  color: var(--c-white);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  transform: translateY(110%);
  opacity: 0;
  visibility: hidden;
  transition:
    transform 380ms var(--ease-emph),
    opacity 280ms var(--ease-out),
    visibility 0s linear 380ms;
}

.product-sticky-bar.is-visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition:
    transform 420ms var(--ease-emph),
    opacity 300ms var(--ease-out),
    visibility 0s linear 0s;
}

.product-sticky-bar__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  padding-block: 0.75rem;
}

.product-sticky-bar__media {
  width: 56px;
  height: 56px;
  background: var(--c-brand-ink);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 4px;
}

.product-sticky-bar__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-sticky-bar__info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.product-sticky-bar__cat {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(218, 224, 238, 0.6);
}

.product-sticky-bar__title {
  margin: 0;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--c-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-sticky-bar__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  white-space: nowrap;
}

.product-sticky-bar__count {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(218, 224, 238, 0.55);
  transition: color var(--t-fast) var(--ease-out);
}

.product-sticky-bar__count.is-active { color: var(--c-brand-soft); }

.product-sticky-bar__total {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--c-white);
  font-feature-settings: 'tnum';
}

.product-sticky-bar__total.is-flash {
  animation: stickyTotalFlash 480ms var(--ease-out);
}

@keyframes stickyTotalFlash {
  0%   { color: var(--c-brand-soft); transform: translateY(-1px); }
  100% { color: var(--c-white); transform: translateY(0); }
}

.product-sticky-bar__actions {
  display: flex;
  gap: var(--space-2);
}

/* Sticky bar — responsive */
@media (max-width: 900px) {
  .product-sticky-bar__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .product-sticky-bar__price {
    grid-column: 2 / 3;
    align-items: flex-start;
  }
  .product-sticky-bar__info { display: none; }
  .product-sticky-bar__phone { display: none; }
}

@media (max-width: 540px) {
  .product-sticky-bar__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-3);
  }
  .product-sticky-bar__media { display: none; }
  .product-sticky-bar__total { font-size: 1.2rem; }
  .product-sticky-bar__actions .btn { padding: 0.65rem 0.9rem; }
}

/* --- 20c. Configurator empty-state + "Sačuvano u upitu" toast --------- */
/* Premium empty state in the selected-options list */
.cfg-pro__selected-empty {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3) var(--space-3);
  background: var(--c-bg);
  border: 1px dashed var(--c-line-soft);
  border-radius: var(--r-sm);
  font-style: normal;            /* override the earlier italic */
  color: var(--c-text);
}

.cfg-pro__selected-empty-eyebrow {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-brand);
}

.cfg-pro__selected-empty-text {
  font-size: 0.88rem;
  color: var(--c-text-muted);
  line-height: 1.45;
}

.cfg-pro__preview.is-empty .cfg-pro__summary-row--total .cfg-pro__summary-label::after {
  content: ' · osnovna';
  color: var(--c-text-muted);
  font-weight: normal;
  letter-spacing: 0.12em;
}

/* Reset button is hidden when there's nothing to reset */ .cfg-pro__reset[hidden]{display:none}.cfg-pro__toast{position:absolute;top:var(--space-4);right:var(--space-4);z-index:5;display:inline-flex;align-items:center;gap:var(--space-2);padding:0.45rem 0.8rem;background:var(--c-brand);color:var(--c-white);font-family:'Archivo','Inter Tight',sans-serif;font-size:0.72rem;font-weight:600;letter-spacing:0.10em;text-transform:uppercase;border-radius:999px;box-shadow:0 12px 28px rgba(41,79,162,0.32);pointer-events:none;opacity:0;transform:translateY(-6px)}.cfg-pro__toast.is-shown{animation:cfgToastIn 1700ms var(--ease-out) forwards}.cfg-pro__toast-icon{width:14px;height:14px}@keyframes cfgToastIn{0%{opacity:0;transform:translateY(-6px)}12%{opacity:1;transform:translateY(0)}78%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-6px)}}.cfg-pro__preview{position:relative}.docs-teaser{background:var(--c-bg);border-top:1px solid var(--c-line-soft);border-bottom:1px solid var(--c-line-soft)}.docs-teaser__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem)}.docs-teaser__card{position:relative;display:flex;flex-direction:column;gap:var(--space-2);padding:clamp(1.25rem,2vw,1.75rem);background:var(--c-white);border:1px solid var(--c-line-soft);transition:border-color var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out),transform var(--t-med) var(--ease-out)}.docs-teaser__card:hover{border-color:var(--c-brand-soft);box-shadow:var(--shadow-sm);transform:translateY(-2px)}.docs-teaser__icon{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;background:rgba(41,79,162,0.08);color:var(--c-brand);border-radius:4px;margin-bottom:var(--space-2)}.docs-teaser__icon svg{width:22px;height:22px}.docs-teaser__kind{font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-xs);letter-spacing:0.22em;text-transform:uppercase;color:var(--c-text-muted)}.docs-teaser__card-title{margin:0;font-family:'Inter Tight','Inter',sans-serif;font-size:1.08rem;font-weight:500;letter-spacing:-0.014em;color:var(--c-text-strong)}.docs-teaser__card-meta{margin:0;font-family:ui-monospace,Menlo,monospace;font-size:0.78rem;letter-spacing:0.10em;color:var(--c-brand);text-transform:uppercase}.docs-teaser__card-note{margin:0;font-size:0.9rem;color:var(--c-text-muted);line-height:1.55;flex:1}.docs-teaser__card-cta{margin-top:var(--space-2);font-family:'Archivo','Inter Tight',sans-serif;font-size:0.88rem;font-weight:600;letter-spacing:0.04em}.docs-teaser__card-cta svg{width:14px;height:14px;transition:transform var(--t-fast) var(--ease-out)}.docs-teaser__card:hover .docs-teaser__card-cta svg{transform:translateX(4px)}.docs-teaser__footnote{margin:var(--space-6) 0 0;padding-top:var(--space-4);border-top:1px dashed var(--c-line-soft);font-family:ui-monospace,Menlo,monospace;font-size:0.78rem;letter-spacing:0.06em;color:var(--c-text-muted);line-height:1.6;max-width:80ch}@media (max-width:900px){.docs-teaser__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:600px){.docs-teaser__grid{grid-template-columns:1fr}}/* --- 20e. "Machine in real conditions" visual band ------------------- */ .visual-band{position:relative;color:var(--c-white);padding-block:clamp(4rem,8vw,7rem);overflow:hidden;isolation:isolate}.visual-band__media{position:absolute;inset:0;z-index:0}.visual-band__media img{width:100%;height:100%;object-fit:cover;object-position:center 35%;transform:scale(1.06);animation:visualBandZoom 1600ms var(--ease-out) 200ms forwards}@keyframes visualBandZoom{from{transform:scale(1.06)}to{transform:scale(1)}}.visual-band__overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(135deg,rgba(11,18,32,0.78),rgba(22,40,79,0.62) 60%,rgba(11,18,32,0.85))}.visual-band__inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:end}.visual-band__copy{min-width:0}.visual-band__eyebrow{display:inline-flex;align-items:center;gap:var(--space-3);font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-xs);letter-spacing:0.22em;text-transform:uppercase;color:rgba(218,224,238,0.7);margin-bottom:var(--space-3)}.visual-band__eyebrow::before{content:'';width:32px;height:1px;background:currentColor}.visual-band__title{font-family:'Inter Tight','Inter',sans-serif;font-size:clamp(1.6rem,1.1rem + 2vw,2.6rem);font-weight:500;letter-spacing:-0.026em;line-height:1.12;color:var(--c-white);margin:0 0 var(--space-4);max-width:24ch}.visual-band__lead{margin:0;font-size:var(--fs-md);color:rgba(218,224,238,0.85);line-height:1.55;max-width:56ch}.visual-band__stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:var(--space-4);align-self:end}.visual-band__stat{display:flex;flex-direction:column;gap:4px;padding:var(--space-3) 0;border-top:1px solid rgba(255,255,255,0.18)}.visual-band__stat:first-child{border-top:1px solid rgba(255,255,255,0.32)}.visual-band__stat-value{font-family:'Inter Tight','Inter',sans-serif;font-size:clamp(1.3rem,1.05rem + 0.9vw,1.8rem);font-weight:600;letter-spacing:-0.018em;color:var(--c-white);font-feature-settings:'tnum'}.visual-band__stat-label{font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-xs);letter-spacing:0.18em;text-transform:uppercase;color:rgba(218,224,238,0.65)}@media (max-width:900px){.visual-band__inner{grid-template-columns:1fr;gap:var(--space-6)}.visual-band__stats{grid-template-columns:repeat(3,minmax(0,1fr))}.visual-band__stat{border-top:1px solid rgba(255,255,255,0.18)}}@media (max-width:540px){.visual-band__stats{grid-template-columns:1fr}}.advisory{background:var(--c-bg);padding-block:clamp(3rem,5vw,5rem);border-top:1px solid var(--c-line-soft)}.advisory__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem)}.advisory-card{position:relative;display:flex;flex-direction:column;gap:var(--space-3);padding:clamp(1.25rem,2.2vw,1.75rem);background:var(--c-white);border:1px solid var(--c-line-soft);transition:border-color var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out),transform var(--t-med) var(--ease-out)}.advisory-card:hover{border-color:var(--c-brand-soft);box-shadow:var(--shadow-sm);transform:translateY(-2px)}.advisory-card__num{font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-xs);letter-spacing:0.22em;color:var(--c-brand);margin-bottom:4px}.advisory-card__title{font-family:'Inter Tight','Inter',sans-serif;font-size:1.08rem;font-weight:500;letter-spacing:-0.014em;color:var(--c-text-strong);margin:0}.advisory-card__text{margin:0;font-size:0.9rem;color:var(--c-text-muted);line-height:1.55;flex:1}.advisory-card__chip{display:inline-flex;align-items:center;gap:6px;margin-top:var(--space-2);padding:4px 10px;background:var(--c-bg);border:1px solid var(--c-line-soft);font-family:ui-monospace,Menlo,monospace;font-size:0.72rem;letter-spacing:0.10em;text-transform:uppercase;color:var(--c-text-muted);border-radius:999px;align-self:flex-start}.advisory-card__chip::before{content:'';width:5px;height:5px;background:var(--c-brand);border-radius:50%}.advisory__footer{margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px dashed var(--c-line-soft);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-4)}.advisory__note{margin:0;font-size:0.92rem;color:var(--c-text-muted);line-height:1.55;max-width:70ch}@media (max-width:1100px){.advisory__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:600px){.advisory__grid{grid-template-columns:1fr}.advisory__footer{grid-template-columns:1fr}}.product-card{transition:transform var(--t-med) var(--ease-out),box-shadow var(--t-med) var(--ease-out)}.product-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}.btn--primary,.btn--accent{transition:background var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out)}.btn--primary:hover,.btn--accent:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(41,79,162,0.18)}.cfg-option{transition:border-color var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out),background var(--t-fast) var(--ease-out),transform var(--t-med) var(--ease-out)}.cfg-option:hover{transform:translateY(-1px)}.cfg-option.is-selected{transform:translateY(0)}.gallery__thumb img{transition:transform 700ms var(--ease-out)}.gallery__thumb:hover img{transform:scale(1.05)}.product-card:hover .badge{filter:brightness(0.97)}@media (prefers-reduced-motion:reduce){.product-card:hover,.btn--primary:hover,.btn--accent:hover,.cfg-option:hover,.docs-teaser__card:hover,.advisory-card:hover{transform:none}.gallery__thumb:hover img{transform:none}.visual-band__media img{transform:none;transition:none}.cfg-pro__toast.is-shown{animation:none;opacity:1}}.back-to-top{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:70;width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;background:rgba(11,18,32,0.88);color:var(--c-white);border:1px solid rgba(255,255,255,0.14);border-radius:999px;cursor:pointer;-webkit-backdrop-filter:saturate(160%) blur(12px);backdrop-filter:saturate(160%) blur(12px);box-shadow:0 12px 28px rgba(11,18,32,0.30);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity 320ms var(--ease-out),transform 380ms var(--ease-emph),visibility 0s linear 380ms,background var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out),bottom 320ms var(--ease-out)}.back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0);transition:opacity 320ms var(--ease-out),transform 380ms var(--ease-emph),visibility 0s linear 0s,background var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out),bottom 320ms var(--ease-out)}.back-to-top svg{width:18px;height:18px;transition:transform var(--t-fast) var(--ease-out)}.back-to-top:hover{background:var(--c-brand);border-color:var(--c-brand);box-shadow:0 16px 36px rgba(41,79,162,0.32);transform:translateY(-2px)}.back-to-top:hover svg{transform:translateY(-2px)}.back-to-top:focus-visible{outline:2px solid var(--c-brand-soft);outline-offset:3px}.back-to-top:active{transform:translateY(0);box-shadow:0 8px 20px rgba(11,18,32,0.22)}/* When the product-page sticky summary bar is visible,lift the back-to-top button above it so they don't visually crowd the corner.
   `~` works because main.js appends the button to the end of <body>,
   after the .product-sticky-bar markup. */
.product-sticky-bar.is-visible ~ .back-to-top {
  bottom: calc(96px + clamp(1rem, 2vw, 1.5rem));
}

/* Mobile — keep the tap target ~44px and the bottom offset tighter */
@media (max-width: 540px) {
  .back-to-top {
    width: 44px;
    height: 44px;
    right: 1rem;
    bottom: 1rem;
  }
  .back-to-top svg { width: 16px; height: 16px; }
  /* Sticky bar collapses on mobile to image-less compact layout (~64px) */
  .product-sticky-bar.is-visible ~ .back-to-top {
    bottom: calc(80px + 0.75rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transform: none;
    transition: opacity 220ms linear, visibility 0s linear 220ms,
      background var(--t-fast) var(--ease-out),
      border-color var(--t-fast) var(--ease-out);
  }
  .back-to-top.is-visible {
    transform: none;
    transition: opacity 220ms linear, visibility 0s linear 0s,
      background var(--t-fast) var(--ease-out),
      border-color var(--t-fast) var(--ease-out);
  }
  .back-to-top:hover { transform: none; }
  .back-to-top:hover svg { transform: none; }
}


/* ==========================================================================
   12. PRODUCTION EXTENSIONS (same design language — tokens above)
   --------------------------------------------------------------------------
   Added for the full-site build: mega dropdown with 6 product groups,
   active language toggle, video embeds, FAQ accordion, scrollable spec
   matrices, gallery grid, process-equipment sections, news detail.
   ========================================================================== */

/* --- Mega dropdown: 6 groups -> categories --- */
.dropdown--mega {
  min-width: 760px;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  padding: 26px 28px 22px;
}
.nav__item--has-dropdown:hover .dropdown--mega,
.nav__item--has-dropdown:focus-within .dropdown--mega {
  transform: translateX(-50%) translateY(0);
}
.dropdown__mega-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 32px;
}
.dropdown__group-title {
  display: block;
  font-family: 'Archivo', 'Inter Tight', sans-serif;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-brand);
  padding: 0 0 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--c-line-soft);
}
a.dropdown__group-title:hover { color: var(--c-brand-deep); }
.dropdown__mega-grid .dropdown__link {
  padding: 6px 0;
  font-size: 0.88rem;
}
.dropdown__mega-grid .dropdown__link::before { left: 0; }
.dropdown__mega-grid .dropdown__link:hover { padding-left: 16px; background: none; }
.dropdown__mega-grid .dropdown__link:hover::before { left: 0; }

/* --- Language toggle (active) --- */
.nav__langs {
  display: inline-flex;
  gap: 4px;
  margin-left: 6px;
}
.nav__lang { opacity: 0.55; cursor: pointer; transition: opacity var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out); }
.nav__lang:hover { opacity: 0.9; }
.nav__lang.is-active { opacity: 1; background: rgba(255, 255, 255, 0.12); }
.site-header.is-scrolled .nav__lang.is-active { background: rgba(41, 79, 162, 0.1); }
.mobile-drawer__langs { display: flex; gap: 8px; margin-bottom: 14px; }
.mobile-drawer__langs .nav__lang { color: var(--c-white); }

/* --- Drawer group headings --- */
.mobile-drawer__group-title {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  padding: 12px 0 4px;
}

/* --- Responsive video embed (16:9) --- */
.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--c-brand-ink);
  overflow: hidden;
  border-radius: var(--r-sm);
}
.video-embed iframe,
.video-embed video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.video-embed video { object-fit: cover; }
.video-embed__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: none;
  display: block;
}
.video-embed__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow) var(--ease-out), opacity var(--t-med) var(--ease-out);
}
.video-embed__poster:hover img { transform: scale(1.03); }
.video-embed__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(22, 40, 79, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-white);
  transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
  pointer-events: none;
}
.video-embed__poster:hover .video-embed__play {
  background: var(--c-brand);
  transform: translate(-50%, -50%) scale(1.06);
}
.video-embed__play svg { width: 30px; height: 30px; margin-left: 4px; }
.video-embed__caption {
  margin-top: 10px;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

/* --- Video band (home + product) --- */
.video-band { background: var(--c-brand-ink); color: var(--c-white); padding: var(--space-section) 0; }
.video-band .section-head__title { color: var(--c-white); }
.video-band .section-head__lead { color: var(--c-text-inverse); }
.video-band__frame { max-width: 1040px; margin: 0 auto; box-shadow: var(--shadow-lg); }

/* --- FAQ accordion --- */
.accordion { border-top: 1px solid var(--c-line); }
.accordion__item { border-bottom: 1px solid var(--c-line); }
.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 4px;
  text-align: left;
  font-family: 'Archivo', 'Inter Tight', sans-serif;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--c-text-strong);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease-out);
}
.accordion__trigger:hover { color: var(--c-brand); }
.accordion__icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--c-brand);
  transition: transform var(--t-med) var(--ease-out);
}
.accordion__item.is-open .accordion__icon { transform: rotate(45deg); }
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-med) var(--ease-out);
}
.accordion__panel-inner { overflow: hidden; }
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel p {
  margin: 0;
  padding: 0 4px 24px;
  color: var(--c-text-muted);
  max-width: 70ch;
}

/* --- Horizontally scrollable table wrapper (SRPS tables, variant matrices) --- */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--c-line-soft);
  background: var(--c-white);
}
.table-scroll .specs-table { min-width: 640px; border: 0; }
.table-scroll--wide .specs-table { min-width: 1100px; }
.table-scroll__hint {
  display: none;
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  letter-spacing: 0.08em;
  margin: 8px 0 0;
}
@media (max-width: 992px) { .table-scroll__hint { display: block; } }
.specs-table--matrix th[scope="col"] {
  background: var(--c-brand-ink);
  color: var(--c-white);
  font-family: 'Archivo', 'Inter Tight', sans-serif;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 12px 16px;
  text-align: left;
  white-space: nowrap;
}
.specs-table--matrix td { white-space: nowrap; }

/* --- Photo gallery grid --- */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.photo-grid__item {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  cursor: zoom-in;
  border: 0;
  padding: 0;
  background: var(--c-bg-alt);
  display: block;
  width: 100%;
}
.photo-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow) var(--ease-out);
}
.photo-grid__item:hover img { transform: scale(1.045); }
.photo-grid__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(11, 18, 32, 0.35));
  opacity: 0;
  transition: opacity var(--t-med) var(--ease-out);
  pointer-events: none;
}
.photo-grid__item:hover::after { opacity: 1; }
.photo-grid__item--contain img { object-fit: contain; background: var(--c-white); padding: 8%; }
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 26px;
}

/* --- Process-equipment sections --- */
.process-section { padding: var(--space-8) 0; border-top: 1px solid var(--c-line-soft); }
.process-section:first-of-type { border-top: 0; }
.process-section__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.process-section__grid--full { grid-template-columns: 1fr; }
.process-section__text { max-width: 62ch; color: var(--c-text-muted); }
.process-section__photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.process-section__tables { margin-top: var(--space-6); display: grid; gap: var(--space-6); }
.process-section__table-title {
  font-family: 'Archivo', 'Inter Tight', sans-serif;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--c-text-strong);
  margin: 0 0 10px;
}

/* --- News detail --- */
.news-detail { max-width: 800px; margin: 0 auto; }
.news-detail__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  margin-bottom: var(--space-4);
}
.news-detail__media { aspect-ratio: 16 / 9; overflow: hidden; margin: var(--space-6) 0; }
.news-detail__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-detail__body p { margin: 0 0 1.2em; color: var(--c-text); max-width: 72ch; }

/* --- Contact page --- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}
.contact-list { display: grid; gap: 18px; margin: var(--space-6) 0; }
.contact-list__item { display: grid; gap: 2px; }
.contact-list__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.contact-list__value { font-size: var(--fs-md); color: var(--c-text-strong); font-weight: 500; }
.contact-list__value a:hover { color: var(--c-brand); }
.contact-map {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--c-line-soft);
  background: var(--c-bg-alt);
}
.contact-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --- Product page helpers --- */
.product-note {
  margin-top: var(--space-4);
  padding: 14px 18px;
  background: var(--c-brand-tint);
  border-left: 3px solid var(--c-brand);
  font-size: var(--fs-sm);
  color: var(--c-text);
  max-width: 62ch;
}
.badge--new { background: var(--c-brand); color: var(--c-white); }
.badge--dev { background: var(--c-brand-tint); color: var(--c-brand-deep); }

/* --- 404 --- */
.error-page { min-height: 60vh; display: flex; align-items: center; text-align: center; padding: var(--space-section) 0; }
.error-page__inner { width: 100%; }
.error-page__code {
  font-family: 'Archivo', 'Inter Tight', sans-serif;
  font-size: clamp(5rem, 14vw, 9rem);
  font-weight: 700;
  line-height: 1;
  color: var(--c-brand-tint);
  display: block;
}
.error-page__actions { display: flex; gap: 14px; justify-content: center; margin-top: var(--space-6); flex-wrap: wrap; }

/* --- Responsive adjustments for extensions --- */
@media (max-width: 1100px) {
  .dropdown--mega { display: none; }
}
@media (max-width: 992px) {
  .process-section__grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 576px) {
  .process-section__photos { grid-template-columns: 1fr; }
  .video-embed__play { width: 64px; height: 64px; }
}


/* ==========================================================================
   13. CLIENT FEEDBACK ROUND 1 — contact directory + named inquiry CTA
   ========================================================================== */

/* --- Contact directory (kontakt.html) --- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
.team-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--c-white);
  border: 1px solid var(--c-line-soft);
  padding: 22px;
  transition: box-shadow var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.team-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.team-card__media {
  flex: 0 0 76px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-brand-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}
.team-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}
.team-card__monogram {
  font-family: 'Archivo', 'Inter Tight', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-brand);
}
.team-card__body { min-width: 0; }
.team-card__name {
  margin: 0 0 2px;
  font-family: 'Archivo', 'Inter Tight', sans-serif;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--c-text-strong);
}
.team-card__role {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-brand);
  margin-bottom: 10px;
}
.team-card__contacts { display: grid; gap: 2px; }
.team-card__contact {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  word-break: break-all;
  transition: color var(--t-fast) var(--ease-out);
}
.team-card__contact:hover { color: var(--c-brand); }
.team-card__link { margin-top: 10px; font-size: var(--fs-sm); }

/* --- VF2: "Naš tim" section (o-nama) — generous portrait cards --------- */
.about-team__grid {
  display: grid;
  grid-template-columns: 1.12fr 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}
.person-card {
  background: var(--c-white);
  border: 1px solid var(--c-line-soft);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.person-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.person-card__media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--c-brand-tint);
}
.person-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
  transition: transform 900ms var(--ease-out);
}
.person-card:hover .person-card__media img { transform: scale(1.04); }
.person-card__body { padding: 20px 22px 24px; }
.person-card__name {
  margin: 0 0 2px;
  font-family: 'Archivo', 'Inter Tight', sans-serif;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--c-text-strong);
}
.person-card__role {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-brand);
  margin-bottom: 12px;
}
.person-card__contacts { display: grid; gap: 3px; }
.person-card__contact {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  word-break: break-all;
  transition: color var(--t-fast) var(--ease-out);
}
.person-card__contact:hover { color: var(--c-brand); }
.about-team__directory { margin: 26px 0 0; }

@media (max-width: 991px) {
  .about-team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .person-card__body { padding: 16px; }
}
@media (max-width: 767px) {
  .about-team__grid { grid-template-columns: 1fr; }
  .person-card { flex-direction: row; }
  .person-card__media { flex: 0 0 132px; aspect-ratio: 3 / 4; }
  .person-card__body { align-self: center; }
}

/* --- Named inquiry CTA band (Slađana) --- */
.sales-cta {
  background: var(--c-brand-ink);
  color: var(--c-white);
  padding: clamp(3rem, 5vw, 4.5rem) 0;
}
.sales-cta__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}
.sales-cta__person { display: flex; align-items: center; gap: 16px; }
.sales-cta__photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  flex: 0 0 96px;
}
.sales-cta__name {
  display: block;
  font-family: 'Archivo', 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: var(--fs-md);
}
.sales-cta__role {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-inverse);
}
.sales-cta__title {
  margin: 0 0 6px;
  font-family: 'Archivo', 'Inter Tight', sans-serif;
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--c-white);
}
.sales-cta__lead { margin: 0; color: var(--c-text-inverse); max-width: 46ch; }
.sales-cta__actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.sales-cta__actions .btn { justify-content: center; }

@media (max-width: 992px) {
  .sales-cta__inner { grid-template-columns: 1fr; text-align: left; }
  .sales-cta__actions { flex-direction: row; flex-wrap: wrap; }
}

/* ===================================================================== */
/*  QA round — WCAG 2.1 AA fixes                                          */
/* ===================================================================== */

/* Skip-to-content link becomes visible on keyboard focus */
a.visually-hidden:focus,
a.visually-hidden:focus-visible {
  position: fixed !important;
  top: 14px;
  left: 14px;
  z-index: 10000;
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  overflow: visible;
  background: var(--c-brand-ink);
  color: var(--c-white);
  padding: 12px 18px;
  border-radius: 4px;
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

/* 4.5:1 on white for the small monospace card index (was --c-brand-soft) */
.product-card__index { color: #4a659f; }

/* Captions inside the dark video band need a light tone (was text-muted) */
.video-band .video-embed__caption { color: #c9d2e4; }

/* Decorative 404 watermark rendered via pseudo-element (visual only) */
.error-page__code::before { content: attr(data-code); }

/* Collapsed drawer sublists must not be keyboard-focusable */
.mobile-drawer__sublist {
  visibility: hidden;
  transition: max-height 420ms var(--ease-emph), visibility 0s linear 420ms;
}
.mobile-drawer__item.is-open .mobile-drawer__sublist {
  visibility: visible;
  transition-delay: 0s, 0s;
}

/* Below-the-fold sections skip initial rendering work (no visual change);
   the browser renders them as they approach the viewport. */
.section,
.video-band,
.cta-banner,
.sales-cta,
.product-detail,
.related,
.trust,
.advisory,
.site-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 640px;
}

/* Closed off-canvas drawer must be unfocusable (aria-hidden-focus, AA) */
.mobile-drawer {
  visibility: hidden;
  transition: opacity var(--t-med) var(--ease-out), visibility 0s linear var(--t-med);
}
.mobile-drawer.is-open {
  visibility: visible;
  transition-delay: 0s, 0s;
}

/* ==========================================================================
   animations.css — Reveal-on-scroll & motion refinements (v2)
   --------------------------------------------------------------------------
   Animations are intentionally subtle. Honors prefers-reduced-motion.
   ========================================================================== */

/* ------------------------------------------------------------------ */
/*  Reveal primitives                                                  */
/* ------------------------------------------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 800ms var(--ease-out),
    transform 800ms var(--ease-out);
  will-change: opacity, transform;
}

[data-reveal='fade'] { transform: none; }
[data-reveal='slide-left'] { transform: translateX(40px); }
[data-reveal='slide-right'] { transform: translateX(-40px); }

[data-reveal='mask'] {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1100ms var(--ease-emph), opacity 700ms var(--ease-out);
  opacity: 1;
  transform: none;
}

[data-reveal='mask-up'] {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1100ms var(--ease-emph);
  opacity: 1;
  transform: none;
}

.is-revealed[data-reveal] {
  opacity: 1;
  transform: none;
}

.is-revealed[data-reveal='mask'] { clip-path: inset(0 0 0 0); }
.is-revealed[data-reveal='mask-up']{clip-path:inset(0 0 0 0)}[data-reveal-stagger]>*{opacity:0;transform:translateY(24px);transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out)}[data-reveal-stagger].is-revealed>*{opacity:1;transform:none}[data-reveal-stagger].is-revealed>*:nth-child(1){transition-delay:0ms}[data-reveal-stagger].is-revealed>*:nth-child(2){transition-delay:80ms}[data-reveal-stagger].is-revealed>*:nth-child(3){transition-delay:160ms}[data-reveal-stagger].is-revealed>*:nth-child(4){transition-delay:240ms}[data-reveal-stagger].is-revealed>*:nth-child(5){transition-delay:320ms}[data-reveal-stagger].is-revealed>*:nth-child(6){transition-delay:400ms}[data-reveal-stagger].is-revealed>*:nth-child(7){transition-delay:480ms}[data-reveal-stagger].is-revealed>*:nth-child(8){transition-delay:560ms}.hero__eyebrow,.hero__title,.hero__lead,.hero__actions,.hero__meta,.hero__pagination,.hero__nav{opacity:0;transform:translateY(18px);animation:heroIn 950ms var(--ease-emph) forwards}.hero__eyebrow{animation-delay:240ms}.hero__title{animation-delay:380ms}.hero__lead{animation-delay:520ms}.hero__actions{animation-delay:660ms}.hero__meta{animation-delay:800ms}.hero__pagination{animation-delay:880ms}.hero__nav{animation-delay:940ms}@keyframes heroIn{to{opacity:1;transform:none}}.page-hero__inner>*{opacity:0;transform:translateY(16px);animation:heroIn 700ms var(--ease-out) forwards}.page-hero__inner>*:nth-child(1){animation-delay:120ms}.page-hero__inner>*:nth-child(2){animation-delay:280ms}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important}[data-reveal],[data-reveal-stagger]>*{opacity:1 !important;transform:none !important;clip-path:none !important}.hero__slide,.hero__slide.is-active img{transform:none !important;animation:none !important}}@media (max-width:1200px){.pillars__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width:1100px){.nav__list,.nav__cta,.nav__lang{display:none}.menu-toggle{display:inline-flex}}@media (max-width:992px){:root{--header-h:124px;--header-h-scrolled:92px}.site-header .brand__logo{height:96px}.site-header.is-scrolled .brand__logo{height:70px}.site-footer .brand__logo{height:48px}.categories__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.featured__grid,.news__grid,.products-grid,.related__grid,.usecases{grid-template-columns:repeat(2,minmax(0,1fr))}.stats__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.trust__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.site-footer__top{grid-template-columns:1fr 1fr;row-gap:var(--space-6)}.cat-overview__grid{grid-template-columns:1fr}.product-detail__grid{grid-template-columns:1fr}.benefits{grid-template-columns:1fr}}@media (max-width:768px){:root{--header-h:108px;--header-h-scrolled:80px}.site-header .brand__logo{height:80px}.site-header.is-scrolled .brand__logo{height:60px}.site-footer .brand__logo{height:44px}.menu-toggle{width:52px;height:52px}.menu-toggle__icon{width:28px;height:16px}.categories__grid{grid-template-columns:1fr}.pillars__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.filters__row{flex-wrap:wrap}.filters__label{min-width:100%}.gallery__thumbs{grid-template-columns:repeat(4,minmax(0,1fr))}.sticky-cta{display:flex}.product-hero__actions .btn:not(:first-child){display:none}.hero__title{font-size:clamp(1.7rem,6.5vw,2.4rem)}.hero__arrow{width:42px;height:42px}.hero__arrow svg{width:14px;height:14px}}@media (max-width:576px){:root{--container-pad:1.25rem;--header-h:92px;--header-h-scrolled:70px}.site-header .brand__logo{height:64px}.site-header.is-scrolled .brand__logo{height:48px}.site-footer .brand__logo{height:40px}.menu-toggle{width:48px;height:48px}.menu-toggle__icon{width:26px;height:14px}.categories__grid{grid-template-columns:1fr}.pillars__grid,.stats__grid,.trust__grid,.featured__grid,.news__grid,.products-grid,.related__grid,.usecases{grid-template-columns:1fr}.site-footer__top{grid-template-columns:1fr}.hero__actions{width:100%}.hero__actions .btn{flex:1}.hero__pagination .hero__dot{flex:1}.product-hero__title{font-size:clamp(1.6rem,6vw,2.1rem)}.specs-table th,.specs-table td{padding:var(--space-3) var(--space-3)}.gallery__thumbs{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.hero__meta{gap:var(--space-3)}.hero__nav{margin-left:auto}}@media (max-width:420px){:root{--header-h:80px;--header-h-scrolled:64px}.form-grid{grid-template-columns:1fr}.site-header .brand__logo{height:56px}.site-header.is-scrolled .brand__logo{height:44px}.site-footer .brand__logo{height:36px}.menu-toggle{width:44px;height:44px}.menu-toggle__icon{width:24px;height:14px}.hero__arrow{width:40px;height:40px}}