: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 zoom on the active slide (R4: ~1.05 over 8 s) */
.hero__slide.is-active img {
  animation: heroDrift 8s var(--ease-out) forwards;
}

@keyframes heroDrift {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.05) 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;
  padding: 1px;
}
/* Breakpoints (3 → 2 → 1 columns) live in responsive.css. */

.cat-card {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  box-shadow: 0 0 0 1px var(--c-line);
  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; }

/* R4-P1: exactly 4 columns for 4 pillars (2×2 tablet, 1 col phone in
   responsive.css). Hairlines are painted on the cards themselves (ring
   shadow), never on the grid container — an unfilled track must stay
   invisible. */
.pillars__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  padding: 1px 0;
}

.pillar {
  background: var(--c-brand-ink);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10);
  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;
  padding: 1px 0;
}

.stat {
  background: var(--c-brand-ink);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10);
  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);
}

/* --- R6-01: sub-category strip on group pages -------------------------- */
/* Links, not filters — deliberately styled apart from .chip (square-ish,
   accent underline on hover) so a navigation control is never mistaken for
   the in-page filter chips sitting further down the same page. */
.subcats {
  border-bottom: 1px solid var(--c-line);
  background: var(--c-bg-alt);
}

.subcats__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 14px;
}

.subcats__label {
  flex: none;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.subcats__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.subcat-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm, 6px);
  background: var(--c-white);
  color: var(--c-text-strong);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}

.subcat-chip:hover,
.subcat-chip:focus-visible {
  border-color: var(--c-brand);
  color: var(--c-brand);
  background: var(--c-white);
}

.subcat-chip__n {
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--c-brand-ink, #16284f);
  color: var(--c-white);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 860px) {
  .subcats__inner {
    display: block;
    padding-block: 12px;
  }
  .subcats__label {
    display: block;
    margin-bottom: 8px;
  }
  /* one swipeable row rather than a tall wrapped block above the catalog */
  .subcats__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .subcats__list::-webkit-scrollbar { display: none; }
  .subcat-chip { white-space: nowrap; }
}

.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; }

/* Default = LIGHT theme (kontakt page and any light surface). The dark
   inquiry band re-themes these below (scoped .inquiry overrides) — the old
   dark-only defaults made the kontakt form invisible (white on white). */
.field__label {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text);
  font-weight: 600;
}

.field__input,
.field__textarea,
.field__select {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  color: var(--c-text-strong);
  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), box-shadow 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);
  box-shadow: 0 0 0 3px rgba(37, 78, 158, 0.14);
}

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

.field__select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(22, 40, 79, 0.55) 50%),
    linear-gradient(135deg, rgba(22, 40, 79, 0.55) 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-white); color: var(--c-text-strong); }

/* --- Dark band re-theme (product inquiry section) --- */
.inquiry .field__label { color: rgba(218, 224, 238, 0.8); font-weight: 500; }

.inquiry .field__input,
.inquiry .field__textarea,
.inquiry .field__select {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--c-white);
}

.inquiry .field__input:focus,
.inquiry .field__textarea:focus,
.inquiry .field__select:focus {
  border-color: var(--c-brand-soft);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

.inquiry .field__select {
  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;
}

.inquiry .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; }
}

/* R5-05: the `.sticky-cta` block that lived here was never rendered by any
   template — the real component is `.product-sticky-bar` (§ further down).
   It was removed because a later rule was written against this dead class and
   silently never applied. Do not reintroduce it. */

/* ------------------------------------------------------------------ */
/*  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;
  will-change: transform, opacity;
  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; }
}

/* R5-18: animate the scan line on the compositor (transform) rather than
   `left`. Animating `left` re-laid out the splash on every frame and logged a
   stream of layout shifts against the page's CLS. */ @keyframes preloaderScan{0%{transform:translateX(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateX(var(--scan-distance,100vw));opacity:0}}@keyframes preloaderBarFill{to{transform:scaleX(1)}}@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.
   ========================================================================== */

/* --- 13a. Flagship card refinements (numbered + dual CTAs) ---------- */
.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);
}

/* --- 13b. Action Band — full-bleed cinematic moment ----------------- */
.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); }

/* --- 13c. Configurator Teaser --------------------------------------- */
.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;
}

/* The interactive card — premium tool surface */
.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; }
}

/* --- 13d. Stats credibility footnote -------------------------------- */
.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;
}

/* ==========================================================================
   14. Section recovery overrides — CTA / Pillars / Stats / Footer
   --------------------------------------------------------------------------
   These rules restore the intended premium state after an upstream edit
   reverted the bg-image treatments and footer brand fix. They live at the
   END of the stylesheet so they always win the cascade against the older
   base rules higher up. Scoped per-section — no global side effects.

   Shared treatment for the three premium blue sections (CTA, Pillars, Stats):
     · the original hero photographs as background
     · 135° brand-blue tint hovering ~0.7 opacity for readability
     · existing radial-gradient ::before pseudos remain on top as depth
   ========================================================================== */

/* --- 14a. CTA section (.cta-banner) --------------------------------- */
.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%
    ),
    var(--band-img, none);
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
}

/* Slightly darker bottom-edge fade to keep buttons crisp over photography */
.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)}.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% ),var(--band-img,none);background-size:cover;background-position:center 35%;background-repeat:no-repeat}.stats .section-head__title{color:var(--c-white)}.stats .section-head__lead{color:rgba(255,255,255,0.88)}.site-footer .brand__logo{height:64px}.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;
}

/* Bottom row: explicit grid prevents text overlap that flex+wrap could
   produce when the credit, copyright and legal links competed for room. */
.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;
  }
}

/* ==========================================================================
   15. Story section — typography boost (Part 1)
   --------------------------------------------------------------------------
   Earlier the editorial title was ~22px and body ~17px against a tall
   image block — content felt visually weaker than its image partner.
   Bumped to a more confident editorial scale to balance the 4/5 media.
   ========================================================================== */
.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. ========================================================================== */ .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}}.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}}.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}.page-hero{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}.cat-overview{padding-bottom:clamp(2rem,3.5vw,3.5rem)}.feat-config{padding-top:clamp(1rem,2vw,2rem);padding-bottom:clamp(3rem,5vw,5rem)}.feat-config__inner{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:0;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;isolation:isolate}.feat-config__media{position:relative;min-width:0;min-height:100%;background:var(--c-brand-ink);overflow:hidden;aspect-ratio:auto}.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)}.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)}@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);
  }
}

/* Phone: tighter padding, options/buttons remain comfortably tappable */
@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;
  }
}

/* ==========================================================================
   18. Product page — hero rebuild, summary, configurator, buyer-type tabs,
        inquiry summary, advisory CTA, responsive
   --------------------------------------------------------------------------
   Appended at end-of-file so these rules win the cascade and survive
   upstream edits. Scoped to the proizvod.html surfaces only.
   ========================================================================== */

/* --- 18a. Product hero — full-bleed dark hero with transparent navbar -- */
.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);
}

/* Quick-spec pills row */
.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);
}

/* --- 18b. Product overview — gallery + summary panel ----------------- */
.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);
}

/* --- 18c. Configurator — split layout, options, live total ----------- */
.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;
}

/* Sticky preview panel keeps the model + total visible while scrolling
   the option list on long screens. */
.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;
}

/* Subtle flash when the total recalculates */
.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;
}

/* Right-side: option panel */
.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);
}

/* Option card */
.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);
}

/* --- 18d. Inquiry summary panel inside the form ---------------------- */
.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);
}

/* --- 18e. Buyer-type segmented control ------------------------------- */
/* Grid layout with equal-width columns guarantees the sliding indicator
   stays aligned regardless of button label length. */
.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); }

/* Indicator slides between options */
.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%);
}

/* Hidden buyer-specific fields stay out of layout */
[data-buyer-field][hidden] { display: none !important; }

/* --- 18f. Advisory CTA strip ----------------------------------------- */
.advisory-cta {
  background:
    linear-gradient(135deg, rgba(22, 40, 79, 0.92), rgba(22, 40, 79, 0.78)),
    var(--band-img, none) 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;
}

/* --- 18g. Product page — responsive ---------------------------------- */
@media (max-width: 1100px) {
  .cfg-pro {
    grid-template-columns: minmax(0, 1fr);
  }
  .cfg-pro__preview {
    position: static;       /* drop sticky when stacked */
  }
}

@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}}.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)}.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}.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}.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}.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}.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)}.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}@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}}.inquiry{position:relative;background-color:var(--c-brand-ink);background-image:linear-gradient( 135deg,rgba(22,40,79,0.86) 0%,rgba(22,40,79,0.78) 60%,rgba(11,18,32,0.86) 100% ),var(--band-img,none);background-size:cover,cover;background-position:center,center 35%;background-repeat:no-repeat,no-repeat;background-attachment:scroll,scroll;isolation:isolate;overflow:hidden}.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%)}.inquiry>.container,.inquiry .inquiry__inner{position:relative;z-index:1}.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)}.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)}.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)}@media (max-width:720px){.inquiry{background-position:center,center 50%}}.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}.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)}.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}.product-card .badge-row{margin-top:var(--space-3)}.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)}@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 --------- */ .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;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; }

/* Floating micro-confirmation toast */
.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); }
}

/* Place the preview card relatively so the toast can absolute-position
   inside it. The original Section 18 already declares display: flex etc.,
   here we only add `position` if not already set. */
.cfg-pro__preview { position: relative; }

/* --- 20d. Documentation teaser --------------------------------------- */
.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; }
}

/* --- 20f. Advisory / decision-guide block on category page ----------- */
.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; }
}

/* --- 20g. Micro hover / motion polish across components -------------- */
/* Subtle card lift on related/featured/news cards */
.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);
}

/* CTA primary buttons — soft elevation on hover */
.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);
}

/* Configurator option — refined active outline animation */
.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 thumbnails — subtle scale on hover */
.gallery__thumb img {
  transition: transform 700ms var(--ease-out);
}
.gallery__thumb:hover img {
  transform: scale(1.05);
}

/* Badges on cards — slight darken on card hover */
.product-card:hover .badge {
  filter: brightness(0.97);
}

/* Reduce motion: respect user preference globally */
@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; }
}

/* ==========================================================================
   21. Back-to-top button — injected by main.js, present on every page
   --------------------------------------------------------------------------
   - Sits bottom-right, fixed
   - Hidden until user scrolls past 600px
   - Lifts above the product-page sticky bar when that bar is visible
   - z-index 70: under header (100), drawer (90), preloader (200), lightbox
     (300), and intentionally under the product-sticky-bar (80) so layering
     stays sane (the bottom offset keeps them visually separate anyway).
   ========================================================================== */
.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);
  /* Two transition sets: hidden vs visible — only `visibility` delay flips */
  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);
}

/* Hover — fills with brand blue, lifts slightly, arrow nudges up */
.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);
}

/* The lift for back-to-top is handled by the single `body.has-sticky-bar`
   rule, which uses the bar's MEASURED height (--sticky-bar-h). The hardcoded 96px/80px estimates that used to live here assumed a compact one-line bar and overlapped it whenever the product title wrapped to two lines (R5-05). */ @media (max-width:540px){.back-to-top{width:44px;height:44px;right:1rem;bottom:1rem}.back-to-top svg{width:16px;height:16px}}@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}}.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}.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)}.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;text-decoration:none;transition:color var(--t-fast) var(--ease-out)}a.mobile-drawer__group-title:hover,a.mobile-drawer__group-title:focus-visible{color:var(--c-white)}.mobile-drawer__sublink--all{font-weight:600;color:var(--c-white)}.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{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)}.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}.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-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-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{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-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}.map-facade{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;height:100%;padding:22px;border:0;cursor:pointer;text-align:center;background:linear-gradient(135deg,rgba(22,40,79,0.94),rgba(30,53,107,0.90)),repeating-linear-gradient(0deg,rgba(255,255,255,0.06) 0 1px,transparent 1px 34px),repeating-linear-gradient(90deg,rgba(255,255,255,0.06) 0 1px,transparent 1px 34px);color:var(--c-white);transition:filter var(--t-fast) var(--ease-out)}.map-facade:hover,.map-facade:focus-visible{filter:brightness(1.12)}.map-facade__pin svg{width:34px;height:34px;opacity:0.9}.map-facade__addr{font-family:'Inter Tight','Inter',sans-serif;font-size:var(--fs-md);font-weight:500;max-width:32ch}.map-facade__btn{display:inline-flex;align-items:center;min-height:40px;padding:0.5rem 1.2rem;border:1px solid rgba(255,255,255,0.55);border-radius:999px;font-size:var(--fs-sm);font-weight:600}.map-facade:hover .map-facade__btn{background:var(--c-white);color:var(--c-brand-ink);border-color:var(--c-white)}.map-facade__note{font-size:var(--fs-xs);color:rgba(255,255,255,0.72);max-width:38ch}.map-facade__fallback{display:flex;align-items:center;justify-content:center;height:100%;padding:22px;text-align:center}.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)}.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}@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}}.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:repeat(3,minmax(0,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}}.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}}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}.product-card__index{color:#4a659f}.video-band .video-embed__caption{color:#c9d2e4}.error-page__code::before{content:attr(data-code)}.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}.section,.video-band,.cta-banner,.sales-cta,.product-detail,.related,.trust,.advisory,.site-footer{content-visibility:auto;contain-intrinsic-size:auto 640px}.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}.product-hero__inner{display:block}.product-hero__layout{grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);gap:clamp(2rem,4.5vw,4.5rem);max-width:none;align-items:center}.product-hero__visual{border-radius:var(--r-md);overflow:hidden;box-shadow:0 28px 70px rgba(11,18,32,0.45);background:var(--c-brand-deep)}.product-hero__visual img{display:block;width:100%;height:clamp(280px,34vw,460px);object-fit:cover}.product-hero__visual--contain{background:var(--c-white)}.product-hero__visual--contain img{object-fit:contain;padding:clamp(1rem,2.4vw,2.2rem)}@media (max-width:900px){.product-hero__layout{grid-template-columns:1fr;gap:var(--space-6)}.product-hero__visual{order:2}.product-hero__copy{order:1}.product-hero__visual img{height:clamp(220px,52vw,340px)}}.product-hero__media::after{background:radial-gradient(900px 480px at 85% 15%,rgba(95,121,183,0.18),transparent 65%)}.field__error{color:#b3401f}.inquiry .field__error{color:#e8a18d}.field.is-invalid .field__input,.field.is-invalid .field__textarea{border-color:#c14e2a}.inquiry .field.is-invalid .field__input,.inquiry .field.is-invalid .field__textarea{border-color:#d97c63}section.configurator-pro{padding-bottom:clamp(4rem,7vw,6.5rem)}.cfg-pro__preview,.cfg-pro__panel{border:1px solid var(--c-line-soft);border-radius:var(--r-md);box-shadow:0 12px 36px rgba(18,23,34,0.08);background:var(--c-white)}.cfg-option{border-radius:var(--r-sm);transition:border-color var(--t-fast) var(--ease-out),background var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out)}.cfg-option:hover{border-color:var(--c-brand-soft);box-shadow:0 4px 14px rgba(18,23,34,0.06)}.cfg-option:has(.cfg-option__input:checked){border-color:var(--c-brand);background:var(--c-brand-tint)}.cfg-option:has(.cfg-option__input:focus-visible){outline:2px solid var(--c-brand);outline-offset:2px}.nav__langs,.mobile-drawer__langs{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid rgba(255,255,255,0.35);border-radius:999px;background:rgba(255,255,255,0.06)}.site-header.is-scrolled .nav__langs{border-color:var(--c-line);background:var(--c-white)}.nav__lang{border:0;border-radius:999px;padding:5px 13px;opacity:1;background:transparent;color:inherit;cursor:pointer;transition:background 150ms var(--ease-out),color 150ms var(--ease-out)}.nav__lang:hover{opacity:1;background:rgba(255,255,255,0.14)}.site-header.is-scrolled .nav__lang:hover{background:rgba(41,79,162,0.08)}.nav__lang.is-active,.nav__lang[aria-pressed='true']{background:var(--c-brand);color:var(--c-white)}.site-header.is-scrolled .nav__lang.is-active,.site-header.is-scrolled .nav__lang[aria-pressed='true']{background:var(--c-brand);color:var(--c-white)}.nav__lang:focus-visible{outline:2px solid var(--c-brand-soft);outline-offset:2px}.hero__arrow--toggle svg{width:16px;height:16px}.hero__arrow--toggle svg[hidden]{display:none}.assist-launcher{position:fixed;left:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:90;width:52px;height:52px;display:none;align-items:center;justify-content:center;background:var(--c-brand);color:var(--c-white);border:1px solid rgba(255,255,255,0.18);border-radius:999px;cursor:pointer;box-shadow:0 10px 28px rgba(11,18,32,0.28);transition:transform 160ms var(--ease-out),box-shadow 160ms var(--ease-out),background 160ms var(--ease-out)}.js .assist-launcher{display:inline-flex}.assist-launcher:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(11,18,32,0.34);background:var(--c-brand-deep)}.assist-launcher:focus-visible{outline:2px solid var(--c-brand-soft);outline-offset:3px}.assist-launcher svg{width:24px;height:24px}.assist-panel{position:fixed;left:clamp(1rem,3vw,2rem);bottom:calc(clamp(1rem,3vw,2rem) + 64px);z-index:95;width:min(400px,calc(100vw - 2rem));max-height:min(560px,calc(100vh - 120px));display:flex;flex-direction:column;background:var(--c-white);border:1px solid var(--c-line-soft);border-radius:var(--r-md);box-shadow:0 24px 70px rgba(11,18,32,0.35);overflow:hidden;opacity:0;transform:translateY(10px);transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out)}.assist-panel.is-open{opacity:1;transform:none}.assist-panel__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:14px 16px;background:var(--c-brand-ink);color:var(--c-white)}.assist-panel__title{font-family:'Archivo','Inter Tight',sans-serif;font-weight:600;font-size:var(--fs-base);letter-spacing:0.01em}.assist-panel__close{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.22);border-radius:999px;background:transparent;color:var(--c-white);cursor:pointer;transition:background 150ms var(--ease-out)}.assist-panel__close:hover{background:rgba(255,255,255,0.12)}.assist-panel__close svg{width:15px;height:15px}.assist-panel__body{flex:1 1 auto;min-height:140px;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--c-bg)}.assist-msg{max-width:88%;padding:10px 13px;border-radius:10px;font-size:var(--fs-sm);line-height:1.55;overflow-wrap:break-word}.assist-msg--bot{align-self:flex-start;background:var(--c-white);border:1px solid var(--c-line-soft);color:var(--c-text);border-bottom-left-radius:3px}.assist-msg--user{align-self:flex-end;background:var(--c-brand);color:var(--c-white);border-bottom-right-radius:3px}.assist-msg a{color:var(--c-brand-deep);text-decoration:underline;text-underline-offset:2px}.assist-msg--user a{color:var(--c-white)}.assist-panel__chips{display:flex;flex-wrap:wrap;gap:6px;padding:10px 16px;border-top:1px solid var(--c-line-soft);background:var(--c-white);max-height:128px;overflow-y:auto}.assist-chip{font-size:var(--fs-xs);padding:6px 11px;border:1px solid var(--c-line);border-radius:999px;background:var(--c-white);color:var(--c-text);cursor:pointer;transition:border-color 150ms var(--ease-out),background 150ms var(--ease-out),color 150ms var(--ease-out)}.assist-chip:hover{border-color:var(--c-brand);color:var(--c-brand-deep);background:var(--c-brand-tint)}.assist-chip:focus-visible{outline:2px solid var(--c-brand);outline-offset:1px}.assist-panel__form{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--c-line-soft);background:var(--c-white)}.assist-panel__input{flex:1 1 auto;border:1px solid var(--c-line);border-radius:var(--r-sm);padding:10px 12px;font-size:var(--fs-sm);font-family:inherit;color:var(--c-text-strong)}.assist-panel__input:focus{outline:none;border-color:var(--c-brand);box-shadow:0 0 0 3px rgba(37,78,158,0.14)}.assist-panel__send{width:42px;height:42px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;background:var(--c-brand);color:var(--c-white);border:0;border-radius:var(--r-sm);cursor:pointer;transition:background 150ms var(--ease-out)}.assist-panel__send:hover{background:var(--c-brand-deep)}.assist-panel__send svg{width:18px;height:18px}@media (max-width:640px){.assist-panel{left:0;right:0;bottom:0;width:100vw;max-height:78vh;border-radius:14px 14px 0 0}}body.has-sticky-bar .assist-launcher,body.has-sticky-bar .back-to-top{bottom:calc(var(--sticky-bar-h,84px) + 14px)}.product-card,.cat-card,.news-card,.team-card,.person-card,.advisory-card,.trust-item{border-radius:var(--r-sm);transition:box-shadow 180ms var(--ease-out),transform 180ms var(--ease-out),border-color 180ms var(--ease-out),background 180ms var(--ease-out)}.product-card:hover,.news-card:hover,.advisory-card:hover{box-shadow:0 12px 32px rgba(18,23,34,0.09);transform:translateY(-2px)}.btn:focus-visible,a.link-arrow:focus-visible,.cat-card:focus-visible,.product-card__title-link:focus-visible,.news-card:focus-visible,.hero__arrow:focus-visible,.hero__dot:focus-visible,.accordion__trigger:focus-visible{outline:2px solid var(--c-brand);outline-offset:3px;border-radius:var(--r-xs)}.specs-table{font-variant-numeric:tabular-nums}.specs-table tbody tr:nth-child(even){background:rgba(22,40,79,0.028)}.specs-table tbody tr:hover{background:var(--c-brand-tint)}.table-scroll{position:relative}.table-scroll .specs-table th:first-child,.table-scroll .specs-table td:first-child{position:sticky;left:0;background:var(--c-white);z-index:1;box-shadow:1px 0 0 var(--c-line-soft)}.table-scroll .specs-table thead th:first-child{background:var(--c-brand-ink)}.table-scroll .specs-table tbody tr:nth-child(even) td:first-child{background:#f2f4f8}.product-hero__cat{color:#a9bce2}.product-hero__media::before{background-image:linear-gradient(rgba(255,255,255,0.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.035) 1px,transparent 1px);background-size:56px 56px}.process-section{padding:clamp(3rem,5.5vw,5rem) 0}.process-section__tables{margin-top:var(--space-6)}.process-section__tables + .process-section__tables{margin-top:var(--space-5)}:root{--shadow-lift:0 12px 32px rgba(18,23,34,0.09);--focus-ring-color:var(--c-brand);--glow-focus:0 0 0 3px rgba(37,78,158,0.14);--r-img:var(--r-sm)}.product-card:hover,.news-card:hover,.advisory-card:hover{box-shadow:var(--shadow-lift)}:focus-visible{outline-color:var(--focus-ring-color)}.hero__progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,0.16);z-index:6}.hero__progress-bar{display:block;height:100%;width:100%;background:var(--c-brand);transform:scaleX(0);transform-origin:left center;will-change:transform}@media (prefers-reduced-motion:reduce){.hero__progress{display:none}.hero__slide.is-active img{animation:none}}/* --- 2. Unified section headers:automatic section index (01,02…) + thin rule + micro-label. The number lives in the eyebrow's ::before;
       the 28 px rule is drawn in its right padding. Sections that already
       carry a manual index (/proizvodi/ groups, procesna) keep the plain
       rule. Hidden sections (display:none) do not consume a number. ------ */
main { counter-reset: shead; }

.section-head > div > .eyebrow { counter-increment: shead; }

.section-head > div > .eyebrow::before {
  content: counter(shead, decimal-leading-zero);
  width: auto;
  height: auto;
  font-weight: 600;
  padding-right: 40px;
  background: linear-gradient(currentColor, currentColor) right center / 28px 1px no-repeat;
}

#groupsList .eyebrow,
#processSections .eyebrow { counter-increment: none; }

#groupsList .eyebrow::before,
#processSections .eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  padding: 0;
  background: currentColor;
}

/* --- 3. Product/category cards v2: monospace spec chips, hover image
       zoom, line-grow underline on "Pogledajte model →". ----------------- */
.product-card__media { overflow: hidden; }

.product-card__media img { transition: transform 320ms var(--ease-out); }

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

.product-card__tag {
  font-family: ui-monospace, 'JetBrains Mono', Menlo, monospace;
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: 3px 10px;
  background: rgba(22, 40, 79, 0.03);
}

.link-arrow > span:first-child {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 240ms var(--ease-out);
  padding-bottom: 2px;
}

.link-arrow:hover > span:first-child,
.link-arrow:focus-visible > span:first-child { background-size: 100% 1px; }

/* --- 4. Product page sticky sub-nav (scroll-spy in product.js). Collapses
       on ≤768 px where the sticky bottom CTA bar takes over. -------------- */
.product-subnav {
  position: sticky;
  top: var(--header-h-scrolled); /* sits under the fixed (compact) header */
  z-index: 40;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--c-line);
}

.product-subnav__inner {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  overflow-x: auto;
  scrollbar-width: none;
}
.product-subnav__inner::-webkit-scrollbar { display: none; }

.product-subnav__link {
  display: inline-block;
  padding: 13px 2px 11px;
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}

.product-subnav__link:hover { color: var(--c-text); }

.product-subnav__link.is-active {
  color: var(--c-brand);
  border-color: var(--c-brand);
}

@media (max-width: 768px) {
  .product-subnav { display: none; }
}

/* --- 5. Stats band: thin brand tick above each value (count-up + tabular
       numerals + hairline dividers already in place). -------------------- */
.stat::before {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--c-brand-soft);
  opacity: 0.65;
}

/* --- 6. Footer v2: 2 px brand accent + sales contact mini-card ---------- */
.site-footer { border-top: 2px solid var(--c-brand); }

.footer-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.footer-card__photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 22%;
  flex: 0 0 auto;
}

.footer-card__body {
  display: flex;
  flex-direction: column;
  /* R5-14: the phone/e-mail links were 21.6 px tall and 2 px apart, below the
     WCAG 2.2 minimum target size (24×24). */
  gap: 6px;
  font-size: var(--fs-sm);
  min-width: 0;
}

.footer-card__body a {
  display: inline-block;
  min-height: 24px;
  padding-block: 2px;
}

.footer-card__name { font-weight: 600; color: var(--c-white); }

.footer-card__role {
  font-size: var(--fs-xs);
  color: rgba(218, 224, 238, 0.65);
  margin-bottom: 4px;
}

.footer-card__body a {
  color: rgba(218, 224, 238, 0.85);
  transition: color var(--t-fast) var(--ease-out);
  overflow-wrap: anywhere;
}

.footer-card__body a:hover { color: var(--c-white); }

/* --- 7. Wayfinding: breadcrumb chevrons + hover, category chip badge on
       the product hero. -------------------------------------------------- */
.breadcrumb__sep { font-size: 0; }

.breadcrumb__sep::before {
  content: '›';
  font-size: var(--fs-xs);
  opacity: 0.75;
}

.breadcrumb a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}

.breadcrumb a:hover { border-bottom-color: currentColor; }

a.product-hero__cat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  border: 1px solid rgba(169, 188, 226, 0.35);
  border-radius: 999px;
  padding: 5px 14px;
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}

a.product-hero__cat:hover {
  border-color: rgba(169, 188, 226, 0.7);
  background: rgba(169, 188, 226, 0.10);
}

/* --- 8. Brand details: scrollbar, selection ----------------------------- */
html { scrollbar-color: var(--c-brand) var(--c-brand-ink); }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--c-brand-ink); }
::-webkit-scrollbar-thumb {
  background: var(--c-brand);
  border: 3px solid var(--c-brand-ink);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--c-brand-soft); }

::selection { background: var(--c-brand); color: var(--c-white); }

/* --- 9. Image presentation: one radius token for standalone imagery +
       skeleton shimmer while card/gallery images load (width/height are
       always set, so no layout shift; main.js flags .is-loaded). --------- */
.story__media img,
.gallery__item img,
.product-hero__visual,
.news-card__media img { border-radius: var(--r-img); }

@keyframes imgShimmer { to { background-position: -180% 0; } }

.cat-card__media:not(.is-loaded),
.product-card__media:not(.is-loaded),
.news-card__media:not(.is-loaded) {
  background: linear-gradient(100deg, #e8edf4 40%, #f6f8fb 50%, #e8edf4 60%) 0 0 / 180% 100%;
  animation: imgShimmer 1.3s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .cat-card__media:not(.is-loaded),
  .product-card__media:not(.is-loaded),
  .news-card__media:not(.is-loaded) { animation: none; }
}

/* --- 10. Micro-interactions: button arrow nudge, form glow token, smooth
       anchor scroll with header offset, 404 touch. ----------------------- */
.btn svg { transition: transform 200ms var(--ease-out); }

.btn:hover svg,
.btn:focus-visible svg { transform: translateX(3px); }

.field__input:focus,
.field__select:focus,
.field__textarea:focus { box-shadow: var(--glow-focus); }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

[id] { scroll-margin-top: calc(var(--header-h-scrolled, 80px) + 24px); }

.error-page__machine {
  display: block;
  width: 132px;
  height: auto;
  margin: 0 auto var(--space-5);
  color: var(--c-brand);
  opacity: 0.85;
}

.error-page__tagline {
  font-family: ui-monospace, 'JetBrains Mono', Menlo, monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-brand);
  margin: var(--space-3) 0 0;
}

/* ==========================================================================
   R5-10 — Print stylesheet
   A farmer printing a product page wants the specification table, the machine
   name and how to reach Majevica. Everything else is screen furniture.
   ========================================================================== */
@media print {
  /* --- 1. Drop screen-only chrome ------------------------------------- */
  .site-header,
  .mobile-drawer,
  .mobile-drawer__backdrop,
  .preloader,
  .assist-launcher,
  .assist-panel,
  .back-to-top,
  .product-sticky-bar,
  .product-subnav,
  .hero__nav,
  .hero__pagination,
  .hero__scroll,
  .hero__progress,
  .video-embed,
  .gallery__thumbs,
  .lightbox,
  .skip-link,
  .filters,
  .catalog__toolbar,
  .subcats,
  .cta-banner,
  .inquiry,
  .sales-cta,
  .configurator-pro,
  .site-footer__bottom .site-footer__credit,
  noscript {
    display: none !important;
  }

  /* Hero video/photo backgrounds waste toner and hide text */
  .hero__media,
  .hero__overlay,
  .page-hero__media,
  .product-hero__media {
    display: none !important;
  }

  /* --- 2. Black on white, no dark surfaces ---------------------------- */
  :root {
    --c-bg: #fff;
    --c-text: #000;
    --c-text-muted: #333;
    --c-brand: #000;
    --c-brand-ink: #fff;
    --c-white: #fff;
  }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
  }

  .hero,
  .page-hero,
  .product-hero,
  .pillars,
  .stats,
  .procesna-hero,
  .section {
    background: #fff !important;
    color: #000 !important;
    padding-block: 0.6cm !important;
    min-height: 0 !important;
  }

  .hero__title,
  .hero__lead,
  .hero__eyebrow,
  .product-hero__title,
  .product-hero__positioning,
  .product-hero__cat,
  .product-hero__spec-label,
  .product-hero__spec-value,
  .pillar__title,
  .pillar__text,
  .stat__value,
  .stat__label,
  .section-head__title,
  .section-head__lead {
    color: #000 !important;
    text-shadow: none !important;
  }

  /* --- 3. Specification tables must stay legible ---------------------- */
  .table-scroll,
  .table-scroll--wide {
    overflow: visible !important;
    max-height: none !important;
  }

  .specs-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 10pt;
    page-break-inside: auto;
  }

  .specs-table th,
  .specs-table td {
    border: 1px solid #999 !important;
    padding: 4pt 6pt !important;
    color: #000 !important;
    background: #fff !important;
    position: static !important; /* undo the sticky first column */
  }

  .specs-table thead th { background: #eee !important; font-weight: 700; }
  .specs-table tbody tr:nth-child(even) { background: #f6f6f6 !important; }
  .specs-table tr, .specs-table thead, .specs-table tbody { page-break-inside: avoid; }

  /* --- 4. Images: one restrained product shot, never full-bleed ------- */
  .product-hero__visual,
  .gallery__main {
    max-width: 8cm !important;
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    page-break-inside: avoid;
  }

  .product-hero__visual img,
  .gallery__main img { max-height: 7cm !important; object-fit: contain !important; }

  .product-hero__layout,
  .product-overview__inner,
  .product-detail__grid {
    display: block !important;
  }

  /* --- 5. Spell out link targets so a paper copy stays useful --------- */
  .breadcrumb a[href]::after,
  .product-summary a[href]::after { content: ''; }

  .site-footer a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 8pt; }

  /* --- 6. Keep the contact block, printed plainly --------------------- */
  .site-footer {
    background: #fff !important;
    color: #000 !important;
    border-top: 1pt solid #000 !important;
    padding-block: 0.4cm !important;
    page-break-inside: avoid;
  }

  .site-footer__heading,
  .site-footer__about,
  .site-footer__list a,
  .site-footer__contact,
  .footer-card__name,
  .footer-card__role,
  .footer-card__body a { color: #000 !important; }

  .footer-card { border: 1px solid #999 !important; background: #fff !important; }
  .footer-card__photo { display: none !important; }

  /* --- 7. Page setup -------------------------------------------------- */
  @page { margin: 1.4cm 1.2cm; }

  h1, h2, h3 { page-break-after: avoid; color: #000 !important; }
  img { max-width: 100% !important; }
  * { box-shadow: none !important; text-shadow: none !important; animation: none !important; transition: none !important; }
}

/* R5-12: session-scoped splash. The head script adds .skip-preloader on
   repeat page views so the overlay never paints (no flash before JS runs). */
.skip-preloader .preloader { display: none !important; }


/* ==========================================================================
   R5-17 — mobile weights for decorative section backgrounds
   These are CSS background-images, so loading="lazy" does not apply to them:
   a phone was downloading the 1600 px files (523 KB for the two biggest)
   before anything below the fold was ever seen. Serve the 960 px variants
   below 900 px viewport width; identical treatment, roughly a third of the
   bytes.
   ========================================================================== */
@media (max-width: 900px) {
  .cta-banner.is-bg-ready { --band-img: url('../images/company/majevica-servis-isporuka-masine-kupcima-960.webp'); }
  .stats.is-bg-ready { --band-img: url('../images/ambient/Proizvodni-pogon-960.webp'); }
  .advisory-cta.is-bg-ready { --band-img: url('../images/company/majevica-servis-primopredaja-masine-kupcu-960.webp'); }
  .inquiry.is-bg-ready { --band-img: url('../images/company/majevica-servis-primopredaja-kljuceva-i-ugovora-960.webp'); }
}


/* --- R6-08: deferred band photographs ---------------------------------
   The gradient above always paints (text contrast never depends on the
   photo); main.js adds .is-bg-ready ~600px before the band reaches the
   viewport. Without JavaScript the bands stay on their brand gradient,
   which is a deliberate, legible fallback rather than a broken one.      */
.cta-banner.is-bg-ready { --band-img: url('../images/company/majevica-servis-isporuka-masine-kupcima-1600.webp'); }
.stats.is-bg-ready { --band-img: url('../images/ambient/Proizvodni-pogon-1600.webp'); }
.advisory-cta.is-bg-ready { --band-img: url('../images/company/majevica-servis-primopredaja-masine-kupcu-1600.webp'); }
.inquiry.is-bg-ready { --band-img: url('../images/company/majevica-servis-primopredaja-kljuceva-i-ugovora-1600.webp'); }

@media (prefers-reduced-data: reduce) {
  .cta-banner.is-bg-ready,
  .stats.is-bg-ready,
  .advisory-cta.is-bg-ready,
  .inquiry.is-bg-ready { --band-img: none; }
}

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

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

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

.js [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;
}

.js [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); }

/* Stagger child reveals when a parent has [data-reveal-stagger] */
.js [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 text reveal — premium staggered entrance                      */
/* ------------------------------------------------------------------ */
.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-load fade for inner pages                                     */
/* ------------------------------------------------------------------ */
.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; }

/* ------------------------------------------------------------------ */
/*  Reduced motion — collapse all animation                            */
/* ------------------------------------------------------------------ */
@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;
  }
}

/* ==========================================================================
   responsive.css — Breakpoint adjustments (v4 — header polish pass)
   --------------------------------------------------------------------------
   Desktop logo was reduced ~20%; mobile logo is significantly larger to
   carry a stronger brand presence next to the new 3-line hamburger.
   ========================================================================== */

/* 1200px — narrow desktop: pillars stay 4-across (4 items, no empty track) */

/* 1100px — earlier hamburger so the larger nav text never crowds the logo.
   Hide the header's language switcher as a whole (.nav__langs). Hiding `.nav__lang` — the class on the individual buttons — also hid the drawer's switcher,which shares it:below 1100px there was then no way to reach the English site at all,and two empty 8px pill boxes were left behind (R5-11). */ @media (max-width:1100px){.nav__list,.nav__cta,.nav__langs{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))}.pillars__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}.filters__row{flex-wrap:wrap}.filters__label{min-width:100%}.gallery__thumbs{grid-template-columns:repeat(4,minmax(0,1fr))}.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}}