/* =====================================================================
   Global Flex — HOMEPAGE (light/white-gray-blue theme).
   Inspired by alfotech.eu — similar feel, not identical. Inquiry-based.
   This file styles index.html ONLY. The dark theme in css/style.css
   continues to drive konfigurator.html and showcase.html.
   ===================================================================== */

:root {
  /* ---- Color tokens (INDIGO brand) ---- */
  --bg:           #FFFFFF;
  --bg-alt:       #F4F6FA;
  --surface:      #FFFFFF;
  --brand:        #3B2E8F;
  --brand-dark:   #2A2068;
  --brand-bright: #5A47C8;
  --brand-tint:   #EEEBF8;
  --ink:          #1A2233;
  --text:         #3A4456;
  --muted:        #6B7585;
  --line:         #E4E7EE;
  --charcoal:     #222A33;
  --shadow:        0 8px 28px rgba(30, 25, 80, 0.08);
  --shadow-lift:   0 14px 40px rgba(30, 25, 80, 0.14);
  --shadow-card:   0 2px 10px rgba(30, 25, 80, 0.05);

  /* ---- Type ---- */
  --font-display: 'Manrope', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-sans:    'Inter',  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---- Layout ---- */
  --maxw:    1280px;
  --gutter:  clamp(20px, 4vw, 56px);
  --nav-h:   76px;
  --radius:  14px;
  --radius-sm: 10px;
  --radius-lg: 20px;

  --ease:    cubic-bezier(0.25, 1, 0.5, 1);
}

/* ============ RESET / BASE ============ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; }
a { color: var(--brand); text-decoration: none; transition: color 200ms var(--ease); }
a:hover { color: var(--brand-bright); }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); margin: 0; line-height: 1.18; letter-spacing: -0.01em; }
p { margin: 0; }

.skip-link {
  position: absolute; top: -1000px; left: 0;
  background: var(--brand); color: #fff; padding: 10px 14px;
  font-family: var(--font-display); font-weight: 600; z-index: 200;
}
.skip-link:focus { top: 8px; left: 8px; }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0.01em;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background 200ms var(--ease), color 200ms var(--ease),
              border-color 200ms var(--ease), box-shadow 200ms var(--ease),
              transform 200ms var(--ease);
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 4px 14px rgba(59, 46, 143, 0.30);
}
.btn-primary:hover {
  background: var(--brand-bright);
  color: #fff;
  box-shadow: 0 8px 22px rgba(59, 46, 143, 0.42);
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.7);
}
.btn-ghost:hover { background: rgba(255,255,255,0.12); border-color: #fff; color: #fff; }
.btn-outline {
  background: transparent;
  color: var(--brand);
  border: 1.5px solid var(--brand);
}
.btn-outline:hover { background: var(--brand); color: #fff; }
.btn-lg { padding: 14px 28px; font-size: 15px; }

/* ============ NAV ============
   The navbar has two visual modes:
   - SOLID (default): white background, indigo logo, dark links. Used on every
     page that does NOT set `body[data-nav-mode="hero"]`.
   - TRANSPARENT (homepage only): no background, white logo, white links. Sits
     over the dark hero. When the page scrolls past the hero, JS toggles
     `.nav.is-solid` and the navbar fades to solid white. This way other pages
     never flash a transparent state on first paint.
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  background: rgba(255,255,255,0.96);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 14px rgba(20,40,70,0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* Background / shadow / border crossfade between transparent and solid.
     Transform + opacity drive the hide-then-reveal slide on scroll threshold. */
  transition: background 260ms var(--ease), box-shadow 260ms var(--ease),
              border-color 260ms var(--ease), backdrop-filter 260ms var(--ease),
              transform 340ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity   340ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
/* Top scrim — only present in the transparent (hero) state. Sits behind the
   nav-inner content, extends ~140px below the top of the viewport so the
   white logo / links / icons read clearly even on the lightest hero frames. */
body[data-nav-mode="hero"] .nav:not(.is-solid)::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 140px;
  background: linear-gradient(180deg, rgba(12,10,30,0.55) 0%, rgba(12,10,30,0) 100%);
  pointer-events: none;
  z-index: -1;
}
/* Hide-then-reveal animation on scroll crossing the hero threshold. */
.nav.is-hiding {
  transform: translateY(-100%);
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .nav {
    transition: background 0ms, box-shadow 0ms, border-color 0ms, backdrop-filter 0ms;
  }
  .nav.is-hiding { transform: none; opacity: 1; }
}
/* Push page content below the fixed nav. Hero on the homepage handles this
   itself (it's full-viewport behind the transparent nav), other pages need a
   spacer-equivalent: we set a body padding-top only when the nav is not over
   a hero. */
body:not([data-nav-mode="hero"]) {
  padding-top: var(--nav-h);
}

/* TRANSPARENT mode — homepage only, until the user scrolls past the hero.
   The bar truly disappears (no white, no blur, no shadow, no hairline).
   Only the inner controls remain visible over the dark hero. */
body[data-nav-mode="hero"] .nav {
  background: transparent !important;
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body[data-nav-mode="hero"] .nav.is-solid {
  background: rgba(255,255,255,0.96) !important;
  border-bottom-color: var(--line);
  box-shadow: 0 2px 14px rgba(20,40,70,0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* 3-zone grid: logo (1fr), centered nav (auto), action cluster (1fr).
   Equal 1fr on the outer columns forces the auto center column to land on
   the viewport center regardless of logo or cluster width. */
.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: var(--nav-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 22px;
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  justify-self: start;
}
.nav-logo img {
  height: 42px;
  width: auto;
  transition: filter 240ms var(--ease);
}
/* Hero-mode logo flips to white via filter (until scrolled past). */
body[data-nav-mode="hero"] .nav:not(.is-solid) .nav-logo img {
  filter: brightness(0) invert(1);
}

/* ---- Primary links (true viewport-centered via grid middle column) ---- */
.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-self: center;
}
.nav-links > li { position: relative; }
.nav-link {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  position: relative;
  padding: 8px 2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 200ms var(--ease);
  white-space: nowrap;
}
.nav-link:hover { color: var(--brand); }
.nav-link.is-active::after {
  content: '';
  position: absolute; bottom: -2px; left: 0; right: 0;
  height: 2px; background: var(--brand);
}
.nav-chevron {
  width: 10px; height: 10px;
  transition: transform 200ms var(--ease);
}
.nav-group-trigger[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }

/* Hero-mode (transparent) link recolor. */
body[data-nav-mode="hero"] .nav:not(.is-solid) .nav-link {
  color: rgba(255,255,255,0.92);
}
body[data-nav-mode="hero"] .nav:not(.is-solid) .nav-link:hover {
  color: #fff;
}
body[data-nav-mode="hero"] .nav:not(.is-solid) .nav-link.is-active::after {
  background: #fff;
}

/* ---- Dropdown (Proizvodi) ---- */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: -16px;
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(20,40,70,0.12);
  padding: 8px;
  list-style: none;
  margin: 0;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
  z-index: 100;
}
.nav-group.is-open .nav-dropdown,
.nav-group:focus-within .nav-dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nav-dropdown a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.nav-dropdown a:hover {
  background: var(--brand-tint);
  color: var(--brand);
}

/* ---- Right cluster (auth icon, cart icon, CTA, toggle) ---- */
.nav-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
}
.nav-phone {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  white-space: nowrap;
  transition: color 200ms var(--ease);
}
.nav-phone svg { color: var(--brand); flex-shrink: 0; transition: color 240ms var(--ease); }
.nav-phone:hover { color: var(--brand); }
body[data-nav-mode="hero"] .nav:not(.is-solid) .nav-phone { color: rgba(255,255,255,0.92); }
body[data-nav-mode="hero"] .nav:not(.is-solid) .nav-phone svg { color: #fff; }
body[data-nav-mode="hero"] .nav:not(.is-solid) .nav-phone:hover { color: #fff; }

.nav-auth {
  display: inline-flex;
  align-items: center;
  position: relative;
}
/* Shared icon-button: mini version of the indigo CTA. Filled --brand
   background with a white glyph, ~40px round. Same look in both transparent
   and solid nav states so the right cluster reads as a tidy button group. */
.nav-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: #ffffff;
  background: var(--brand);
  border: 1px solid var(--brand);
  cursor: pointer;
  padding: 0;
  position: relative;
  box-shadow: 0 4px 12px rgba(59, 46, 143, 0.22);
  transition: color 200ms var(--ease), background 200ms var(--ease),
              border-color 200ms var(--ease), box-shadow 200ms var(--ease),
              transform 200ms var(--ease);
}
.nav-icon-btn svg { width: 19px; height: 19px; }
.nav-icon-btn:hover {
  color: #ffffff;
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  box-shadow: 0 6px 16px rgba(59, 46, 143, 0.32);
  transform: translateY(-1px);
}
.nav-icon-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
/* Over the hero (transparent nav) keep them filled indigo too — explicitly
   override any inherited transparent/white-bordered styles from earlier
   iterations so the cluster stays consistent across states. */
body[data-nav-mode="hero"] .nav:not(.is-solid) .nav-icon-btn {
  color: #ffffff;
  background: var(--brand);
  border-color: var(--brand);
}
body[data-nav-mode="hero"] .nav:not(.is-solid) .nav-icon-btn:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}

/* Count badge (hidden by default; populated later by app logic). */
.nav-icon-btn-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #fff;
}
.nav-icon-btn-badge.is-visible { display: inline-flex; }
body[data-nav-mode="hero"] .nav:not(.is-solid) .nav-icon-btn-badge {
  box-shadow: 0 0 0 2px rgba(20,13,70,0.85);
}

/* Legacy hook: .nav-auth-link still used by auth.js and HTML. Inherit the
   indigo-filled frame so it renders identical to .nav-icon-btn even when
   emitted without the shared class (older cache, fallback markup). */
.nav-auth-link:not(.nav-icon-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: #ffffff;
  background: var(--brand);
  border: 1px solid var(--brand);
  box-shadow: 0 4px 12px rgba(59, 46, 143, 0.22);
  transition: color 200ms var(--ease), background 200ms var(--ease), border-color 200ms var(--ease);
}
.nav-auth-link:not(.nav-icon-btn) svg { width: 19px; height: 19px; }
.nav-auth-link:not(.nav-icon-btn):hover {
  color: #ffffff;
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}

/* Logged-in pill — indigo-filled like the icon buttons + CTA. */
.nav-user-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brand);
  border: 1px solid var(--brand);
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  height: 40px;
  padding: 0 14px 0 6px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(59, 46, 143, 0.22);
  transition: background 200ms var(--ease), border-color 200ms var(--ease),
              box-shadow 200ms var(--ease), transform 200ms var(--ease);
}
.nav-user-trigger:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  box-shadow: 0 6px 16px rgba(59, 46, 143, 0.32);
  transform: translateY(-1px);
}
.nav-user-avatar {
  width: 28px; height: 28px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0;
}
.nav-user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(20,40,70,0.12);
  padding: 8px;
  list-style: none;
  margin: 0;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
  z-index: 100;
}
.nav-auth.is-open .nav-user-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nav-user-menu button,
.nav-user-menu a {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.nav-user-menu button:hover,
.nav-user-menu a:hover {
  background: var(--brand-tint);
  color: var(--brand);
}

.nav-cta { padding: 10px 18px; font-size: 13.5px; flex-shrink: 0; }

.nav-toggle {
  display: none;
  width: 38px; height: 38px;
  background: transparent;
  border: 0;
  padding: 0;
  position: relative;
}

/* Mobile nav drawer — hidden on desktop, revealed only at the mobile breakpoint
   (and even there only when .is-open). Without this base rule the <nav> element
   renders as a block on desktop and shows the second row. */
.nav-mobile { display: none; }
.nav-toggle span {
  display: block;
  position: absolute;
  left: 8px; right: 8px;
  height: 2px;
  background: var(--ink);
  transition: transform 200ms var(--ease), opacity 200ms var(--ease), background 200ms var(--ease);
}
.nav-toggle span:nth-child(1) { top: 12px; }
.nav-toggle span:nth-child(2) { top: 18px; }
.nav-toggle span:nth-child(3) { top: 24px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
body[data-nav-mode="hero"] .nav:not(.is-solid) .nav-toggle span { background: #fff; }

@media (max-width: 1080px) {
  /* Below this, the centered 3-zone grid can't fit cleanly — collapse to
     the hamburger drawer. Switch to a 2-zone flex layout so the logo +
     hamburger don't fight the empty middle column. */
  .nav-inner {
    display: flex;
    justify-content: space-between;
    gap: 16px;
  }
  .nav-links, .nav-phone, .nav-auth { display: none; }
  .nav-right .nav-icon-btn,
  .nav-right .nav-cart { display: none; }
  .nav-toggle { display: block; }
  .nav-cta { display: none; }
  .nav-right { gap: 8px; }

  /* ---- Premium right-slide drawer ----
     Sits over a dim backdrop, slides in from the right edge with a soft
     ease-out cubic. Always present in the DOM (no display:none) so the
     slide animates instead of popping. Body gets a scroll-lock class
     while open. */
  .nav-mobile {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(380px, 88vw);
    background: #ffffff;
    box-shadow: -16px 0 48px rgba(20, 40, 70, 0.22);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    z-index: 95;
    transform: translateX(100%);
    transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
    overscroll-behavior: contain;
  }
  .nav-mobile.is-open { transform: translateX(0); }

  /* Backdrop. Always rendered, opacity fades in. Pointer-events on only
     while open so clicks pass through when closed. */
  .nav-mobile::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(12, 10, 30, 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity 280ms ease;
    z-index: -1;
  }
  .nav-mobile.is-open::before {
    opacity: 1;
    pointer-events: auto;
  }

  /* Drawer header — logo + close X, hairline under. */
  .nav-mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
  }
  .nav-mobile-head img {
    height: 32px;
    width: auto;
  }
  .nav-mobile-close {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: transparent;
    border: 0;
    color: var(--muted);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 160ms var(--ease), color 160ms var(--ease);
  }
  .nav-mobile-close:hover {
    background: var(--bg-alt);
    color: var(--ink);
  }

  /* Scrollable item list. */
  .nav-mobile-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px 22px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  /* Items + section labels. */
  .nav-mobile a {
    padding: 13px 4px;
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15.5px;
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: color 160ms var(--ease), padding-left 160ms var(--ease);
    position: relative;
  }
  .nav-mobile a.is-active {
    color: var(--brand);
  }
  .nav-mobile a.is-active::before {
    content: '';
    position: absolute;
    left: -22px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 22px;
    border-radius: 0 4px 4px 0;
    background: var(--brand);
  }
  .nav-mobile .nav-mobile-group-label {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 11px;
    font-family: var(--font-display);
    font-weight: 700;
    padding: 18px 4px 8px;
    border-bottom: 0;
    display: block;
  }
  /* Sub-items get a thin indigo accent strip on the left. */
  .nav-mobile a.is-sub {
    padding-left: 18px;
    font-weight: 600;
    color: var(--text);
    font-size: 14.5px;
    border-bottom: 1px solid var(--line);
  }
  .nav-mobile a.is-sub::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    background: var(--brand-tint);
    border-radius: 999px;
  }
  .nav-mobile a.is-sub.is-active::before {
    background: var(--brand);
    height: 22px;
  }

  /* Auth section + Korpa upita item. */
  .nav-mobile-meta {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .nav-mobile-meta a {
    border-bottom: 0;
    padding: 11px 4px;
  }
  .nav-mobile .mobile-cart-link {
    color: var(--brand);
    font-weight: 700;
    border-bottom: 0;
    padding: 11px 4px;
  }
  .nav-mobile .mobile-cart-link svg {
    width: 20px; height: 20px;
    color: var(--brand);
  }
  .nav-mobile .nav-mobile-user {
    color: var(--muted);
    font-family: var(--font-display);
    font-size: 13.5px;
    padding: 12px 4px;
    display: block;
    border-bottom: 0;
  }
  .nav-mobile .nav-mobile-user strong {
    color: var(--ink);
    font-weight: 700;
  }

  /* Pinned CTA at the bottom. */
  .nav-mobile-cta-wrap {
    padding: 16px 22px calc(20px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    background: #ffffff;
    flex-shrink: 0;
  }
  .nav-mobile-cta-wrap .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============ HERO ============ */
.hero {
  position: relative;
  /* Exactly one viewport, with a chain of fallbacks: dvh > 100vh > --vh JS fallback. */
  height: 100vh;
  height: 100dvh;
  height: calc(var(--vh, 1vh) * 100);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--brand-dark);
  isolation: isolate;
}
.hero-slider, .hero-slide, .hero-overlay { position: absolute; inset: 0; }
.hero-slider { z-index: 0; }
.hero-slide {
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}
.hero-slide.is-active { opacity: 1; }
.hero-overlay {
  z-index: 1;
  /* Lighter, text-weighted gradient: heavier behind the headline (left/bottom),
     fades toward upper-right so the product photo reads brighter and premium.
     Bottom band ensures slider dots stay legible. */
  background:
    linear-gradient(180deg, rgba(20,13,70,0.00) 55%, rgba(20,13,70,0.45) 100%),
    linear-gradient(105deg,
      rgba(20,13,70,0.62) 0%,
      rgba(20,13,70,0.42) 28%,
      rgba(20,13,70,0.18) 55%,
      rgba(20,13,70,0.04) 80%,
      rgba(20,13,70,0.00) 100%);
}
.hero-inner {
  position: relative;
  z-index: 3;
  max-width: var(--maxw);
  width: 100%;
  margin: 0 auto;
  padding: clamp(56px, 9vh, 110px) var(--gutter);
}
.hero-eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,0.14);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.hero-headline {
  color: #fff;
  font-size: clamp(34px, 5vw, 60px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.015em;
  max-width: 22ch;
  margin-bottom: 22px;
}
.hero-subline {
  color: rgba(255,255,255,0.92);
  font-size: clamp(15px, 1.4vw, 18px);
  max-width: 56ch;
  margin-bottom: 32px;
  line-height: 1.55;
}
.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* ---- Slider controls ---- */
.slider-controls {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 14px;
}
.slider-arrow {
  width: 40px; height: 40px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms var(--ease), border-color 200ms var(--ease);
}
.slider-arrow:hover { background: rgba(255,255,255,0.32); border-color: #fff; }
.slider-dots {
  display: inline-flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.slider-dots button {
  width: 24px;
  height: 3px;
  background: rgba(255,255,255,0.4);
  border: 0;
  padding: 0;
  border-radius: 999px;
  transition: background 200ms var(--ease), width 200ms var(--ease);
}
.slider-dots button.is-active { background: #fff; width: 36px; }

@media (max-width: 720px) {
  /* Keep full viewport on mobile too; dvh handles dynamic toolbar correctly. */
  .hero-headline { font-size: clamp(28px, 7vw, 42px); }
  .slider-controls { bottom: 18px; gap: 10px; }
  .slider-arrow { width: 34px; height: 34px; }
}

/* ============ SECTION BASE ============ */
.section {
  padding: clamp(64px, 10vh, 120px) 0;
  position: relative;
}
.section-alt { background: var(--bg-alt); }

.section-head {
  max-width: var(--maxw);
  margin: 0 auto clamp(36px, 5vh, 56px);
  padding: 0 var(--gutter);
}
.section-head-center { text-align: center; }
.section-head-center .section-sub { margin-left: auto; margin-right: auto; }
.section-eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 14px;
}
.section-heading {
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 14px;
  max-width: 22ch;
  letter-spacing: -0.015em;
  line-height: 1.12;
}
.section-head-center .section-heading { margin-left: auto; margin-right: auto; }
.section-sub {
  color: var(--muted);
  font-size: 16.5px;
  max-width: 62ch;
  line-height: 1.65;
}

/* ============ PRODUCTS GRID ============ */
.section-products {
  background: var(--bg);
}
.products-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.product-card {
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease);
  display: flex;
  flex-direction: column;
  color: var(--ink);
  border: 1px solid var(--line);
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  color: var(--ink);
}
.product-card .card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--bg-alt);
  overflow: hidden;
}
.product-card .card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}
.product-card:hover .card-media img { transform: scale(1.04); }
.product-card .card-body {
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
}
.product-card .card-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.product-card .card-desc {
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0;
  flex: 1;
}
.product-card .card-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  color: var(--brand);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  font-family: var(--font-display);
  transition: transform 200ms var(--ease);
  align-self: flex-start;
}
.product-card:hover .card-arrow { transform: translateX(4px); }

@media (max-width: 980px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .products-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ============ EXPERIENCE BAND — light, alfotech-style ============ */
.band-blue {
  background: var(--bg-alt);
  color: var(--text);
  padding: clamp(64px, 10vh, 120px) 0;
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.band-inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.band-head {
  margin: 0 auto clamp(36px, 5vh, 56px);
  max-width: 720px;
  text-align: center;
}
.band-eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 14px;
}
.band-heading {
  color: var(--ink);
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 700;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.band-sub {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
  max-width: 60ch;
  margin: 0 auto;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.feature-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 32px 28px;
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease), border-color 280ms var(--ease);
}
.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: var(--brand-bright);
}
.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--brand-tint);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.feature-icon svg { width: 24px; height: 24px; }
.feature-title {
  color: var(--ink);
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.005em;
}
.feature-desc {
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .feature-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ============ INDUSTRIES GRID ============ */
.section-industries {
  background: var(--bg);
}
.industries-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.industry-card {
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease);
  color: var(--ink);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.industry-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  color: var(--ink);
}
.industry-card .card-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--bg-alt);
  overflow: hidden;
}
.industry-card .card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}
.industry-card:hover .card-media img { transform: scale(1.05); }
.industry-card .card-body {
  padding: 18px 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.industry-card .card-title {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--ink);
}
.industry-card .card-arrow {
  color: var(--brand);
  font-size: 18px;
  line-height: 1;
}

@media (max-width: 820px) {
  .industries-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
  .industries-grid { grid-template-columns: 1fr; }
}

/* ============ HELP BAND ============ */
.band-help {
  background: var(--bg);
  padding: clamp(64px, 10vh, 120px) 0;
  border-top: 1px solid var(--line);
}
.band-help .band-inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
}
.band-help .band-content { color: var(--text); }
.band-help .band-eyebrow { color: var(--brand); }
.band-help .band-heading { color: var(--ink); max-width: 20ch; margin-bottom: 14px; }
.band-help .band-sub     { color: var(--text); margin-bottom: 26px; max-width: 52ch; }
.band-help .band-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  height: 360px;
}
.band-help .band-image img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .band-help .band-inner { grid-template-columns: 1fr; }
  .band-help .band-image { height: 260px; }
}

/* ============ CONTACT ============ */
.section-contact {
  background: var(--bg-alt);
}
.contact-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: stretch;
}
.contact-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  min-height: 460px;
  background: var(--bg-alt);
}
.contact-image img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Contact info column (left side) ---- */
.contact-info {
  display: flex;
  flex-direction: column;
}
.contact-info .section-eyebrow { margin-bottom: 8px; }
.contact-info .section-heading { font-size: clamp(24px, 2.8vw, 32px); margin-bottom: 8px; }
.contact-info .section-sub   { margin-bottom: 22px; }
.contact-block-list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-block-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.contact-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
}
.contact-value {
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.5;
}
.contact-value a { color: var(--ink); border-bottom: 1px dotted var(--line); }
.contact-value a:hover { color: var(--brand); border-bottom-color: var(--brand); }

.contact-map {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.contact-map iframe {
  display: block;
  width: 100%;
  height: 260px;
  border: 0;
}
.contact-map-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-alt);
  color: var(--brand);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  border-top: 1px solid var(--line);
}
.contact-map-link:hover { color: var(--brand-bright); background: var(--brand-tint); }

.contact-form-wrap {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(28px, 4vw, 44px);
}
.contact-form-wrap .section-eyebrow { margin-bottom: 8px; }
.contact-form-wrap .section-heading { font-size: clamp(24px, 2.8vw, 32px); margin-bottom: 6px; }
.contact-form-wrap .section-sub { margin-bottom: 24px; }

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-form label > span {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  font-family: var(--font-display);
}
.contact-form input,
.contact-form textarea {
  appearance: none;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font: inherit;
  color: var(--ink);
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(59, 46, 143, 0.14);
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form .consent {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
}
.contact-form .consent input { width: 16px; height: 16px; padding: 0; }
.contact-form .btn {
  align-self: flex-start;
  margin-top: 8px;
}

@media (max-width: 900px) {
  .contact-inner { grid-template-columns: 1fr; }
  .contact-image { min-height: 240px; }
  .contact-form .form-row { grid-template-columns: 1fr; }
}

/* ============ FOOTER ============ */
.footer {
  background: var(--brand-dark);
  color: rgba(255,255,255,0.88);
  padding: clamp(56px, 8vh, 90px) 0 0;
}
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 36px;
  padding-bottom: 44px;
}
.footer-col h4 {
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
  opacity: 0.92;
}
.footer-col p,
.footer-col ul a {
  color: rgba(255,255,255,0.82);
  font-size: 14.5px;
  line-height: 1.7;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col ul li { margin-bottom: 6px; }
.footer-col ul a { transition: color 200ms var(--ease); }
.footer-col ul a:hover { color: #fff; }

/* Inline links inside paragraphs (Tel/Fax, mailto:) — the global `a { color:var(--brand) }`
   rule would otherwise paint these dark indigo on a dark indigo background, making them
   invisible. Force light white with a clear hover. */
.footer a {
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.22);
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.footer a:hover {
  color: #fff;
  border-bottom-color: #fff;
}
.footer-col ul a {
  border-bottom: 0; /* nav-style link list — no underline */
}
.footer-logo {
  height: 56px;
  width: auto;
  margin-bottom: 14px;
  /* Convert the dark-indigo PNG to white so it reads on the --brand-dark footer. */
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.footer-name {
  color: #fff;
  font-size: 15px;
  line-height: 1.4;
  margin-bottom: 8px;
}
.footer-name strong { color: #fff; font-weight: 700; }
.footer-tagline {
  color: rgba(255,255,255,0.74);
  font-size: 14px;
  line-height: 1.55;
}

.footer-fiscal {
  background: rgba(0,0,0,0.18);
  border-top: 1px solid rgba(255,255,255,0.10);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  margin-top: 8px;
}
.footer-fiscal-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  color: rgba(255,255,255,0.78);
  font-size: 13px;
  font-family: var(--font-display);
  font-weight: 500;
}
.footer-fiscal-inner strong { color: #fff; font-weight: 700; }

.footer-bottom {
  padding: 22px var(--gutter);
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.62);
}
.footer-bottom strong { color: #fff; }

@media (max-width: 900px) {
  .footer-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .footer-inner { grid-template-columns: 1fr; }
}

/* ============ AI WIDGET (light/blue) ============ */
.bot {
  position: fixed;
  left: calc(20px + env(safe-area-inset-left, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 95;
  font-family: var(--font-sans);
}
/* Compact circular launcher — matches the back-to-top family. Uses the
   image asset as its face; pulsing ring + scale-breathing draws attention
   without being annoying. Disabled under prefers-reduced-motion. */
.bot-launcher {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  border: 0;
  padding: 0;
  box-shadow: 0 8px 22px rgba(59, 46, 143, 0.36);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  overflow: visible;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.bot-launcher:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 12px 28px rgba(59, 46, 143, 0.48);
}
.bot-launcher img {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
  /* Sit inside the circle so the white face reads on the indigo bg. */
  background: #fff;
}
.bot-launcher-label {
  /* Old "Imate pitanje?" text label — hidden visually, kept for SR. */
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.bot-launcher-mark { display: none; } /* legacy element, no longer rendered */

/* Pulsing ring + gentle breathing — quiet, looping. */
.bot-launcher::before,
.bot-launcher::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .bot-launcher {
    animation: gfBotBreathe 3.6s ease-in-out infinite;
  }
  .bot-launcher::before {
    background: var(--brand);
    opacity: 0.45;
    animation: gfBotPulse 2.6s ease-out infinite;
  }
  .bot-launcher::after {
    background: var(--brand);
    opacity: 0.30;
    animation: gfBotPulse 2.6s ease-out 0.8s infinite;
  }
}
@keyframes gfBotPulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}
@keyframes gfBotBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
.bot[data-open="true"] .bot-launcher { display: none; }

.bot-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  width: min(360px, calc(100vw - 28px));
  max-height: min(560px, calc(100vh - 80px));
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(20,40,70,0.18);
  display: none;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
}
.bot[data-open="true"] .bot-panel { display: flex; }
.bot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--brand);
  color: #fff;
}
.bot-head h3 { color: #fff; font-size: 16px; font-weight: 700; margin: 0; }
.bot-close {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  padding: 4px 8px;
}
.bot-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bot-msg {
  max-width: 86%;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
}
.bot-msg-bot {
  align-self: flex-start;
  background: var(--brand-tint);
  color: var(--ink);
  border-top-left-radius: 4px;
}
.bot-msg-user {
  align-self: flex-end;
  background: var(--brand);
  color: #fff;
  border-top-right-radius: 4px;
}
.bot-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 12px 10px;
}
.bot-chip {
  background: var(--brand-tint);
  color: var(--brand-dark);
  border: 1px solid transparent;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-family: var(--font-display);
  font-weight: 600;
}
.bot-chip:hover { border-color: var(--brand); }
.bot-input {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--line);
  background: var(--bg-alt);
}
.bot-input input {
  flex: 1;
  border: 1px solid var(--line);
  background: #fff;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font: inherit;
  color: var(--ink);
}
.bot-input input:focus { outline: none; border-color: var(--brand); }
.bot-input button {
  background: var(--brand);
  color: #fff;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-family: var(--font-display);
  font-weight: 700;
}
.bot-input button:hover { background: var(--brand-bright); }

@media (max-width: 540px) {
  .bot-panel { width: calc(100vw - 24px); }
}

/* ============ BACK TO TOP ============ */
.btt {
  position: fixed;
  right: calc(20px + env(safe-area-inset-right, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #fff;
  color: var(--brand);
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(20,40,70,0.12);
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease), background 200ms var(--ease);
}
.btt.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.btt:hover {
  background: var(--brand);
  color: #fff;
}

/* ============ PRELOADER (light/blue) ============ */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.5s ease;
}
.preloader.is-exiting {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
.preloader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 24px;
}
.preloader-logo {
  width: clamp(120px, 14vw, 170px);
  height: auto;
  /* New logo is dark indigo on transparent — reads cleanly on white. */
  opacity: 0;
  transform: scale(0.94);
  animation:
    preLogoIn    0.85s cubic-bezier(0.25, 1, 0.5, 1) 0.12s forwards,
    preLogoPulse 2.6s  ease-in-out 1s infinite alternate;
}
@keyframes preLogoIn   { to { opacity: 1; transform: scale(1); } }
@keyframes preLogoPulse{ from { transform: scale(1); } to { transform: scale(1.02); } }

.preloader-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0;
  animation: preMetaIn 0.6s ease 0.5s forwards;
}
@keyframes preMetaIn { to { opacity: 1; } }

.preloader-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
}
.preloader-bar {
  width: clamp(180px, 22vw, 240px);
  height: 2px;
  background: var(--line);
  position: relative;
  overflow: hidden;
  border-radius: 999px;
}
.preloader-bar-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0%;
  background: var(--brand);
  transition: width 0.18s ease-out;
  border-radius: 999px;
}
.preloader-counter {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  color: var(--brand);
  letter-spacing: 0.18em;
  min-width: 4ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .preloader-logo, .preloader-meta { animation: none; opacity: 1; transform: none; }
  .preloader { transition: opacity 0.2s ease; }
  .preloader.is-exiting { transform: none; opacity: 0; }
}

/* ============ STUB PAGES (clean "uskoro" pages for the new nav) ============ */
.stub-hero {
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(59, 46, 143, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 100%, rgba(90, 71, 200, 0.08) 0%, transparent 60%),
    var(--bg);
  padding: clamp(80px, 14vh, 160px) 0 clamp(64px, 10vh, 120px);
  border-bottom: 1px solid var(--line);
}
.stub-hero-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  max-width: 760px;
  text-align: center;
}
.stub-eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand);
  background: var(--brand-tint);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.stub-heading {
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 18px;
  line-height: 1.08;
}
.stub-sub {
  color: var(--text);
  font-size: 17px;
  line-height: 1.65;
  margin-bottom: 36px;
  max-width: 58ch;
  margin-left: auto;
  margin-right: auto;
}
.stub-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--brand);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-card);
}
.stub-badge::before {
  content: '';
  width: 8px; height: 8px;
  background: var(--brand-bright);
  border-radius: 999px;
  display: inline-block;
}
.stub-ctas {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.stub-info {
  padding: clamp(48px, 8vh, 80px) 0;
  background: var(--bg);
}
.stub-info-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.stub-info-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-card);
}
.stub-info-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.stub-info-card p {
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.6;
}
@media (max-width: 760px) {
  .stub-info-inner { grid-template-columns: 1fr; }
}

/* ============ SCROLL REVEALS ============ */
/* By default content is visible. .reveal class adds a subtle slide-in only when
   the element gets .is-in via IntersectionObserver. JS failure or reduced motion
   leave content visible. */
.reveal {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  }
  .reveal.is-in {
    opacity: 1;
    transform: translateY(0);
  }
  .reveal-stagger > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  }
  .reveal-stagger.is-in > * {
    opacity: 1;
    transform: translateY(0);
  }
  .reveal-stagger.is-in > *:nth-child(1) { transition-delay: 0.05s; }
  .reveal-stagger.is-in > *:nth-child(2) { transition-delay: 0.12s; }
  .reveal-stagger.is-in > *:nth-child(3) { transition-delay: 0.19s; }
  .reveal-stagger.is-in > *:nth-child(4) { transition-delay: 0.26s; }
  .reveal-stagger.is-in > *:nth-child(5) { transition-delay: 0.33s; }
  .reveal-stagger.is-in > *:nth-child(6) { transition-delay: 0.40s; }
  .reveal-stagger.is-in > *:nth-child(7) { transition-delay: 0.47s; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: opacity 0.4s linear; }
  .product-card, .industry-card, .feature-card { transition: none; }
  .product-card:hover, .industry-card:hover, .feature-card:hover { transform: none; }
}

/* =====================================================================
   CATALOG — category page (fleksibilna-creva.html, prikljucni-elementi)
   Filter sidebar + product cards. Light indigo.
   ===================================================================== */
.cat-page {
  background: var(--bg);
  padding: clamp(110px, 14vh, 150px) 0 clamp(72px, 10vh, 110px);
}
.cat-intro {
  max-width: var(--maxw);
  margin: 0 auto 36px;
  padding: 0 var(--gutter);
}
.cat-intro .stub-eyebrow { margin-bottom: 18px; }
.cat-intro h1 {
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 800;
  margin-bottom: 14px;
}
.cat-intro p {
  color: var(--text);
  font-size: 17px;
  max-width: 68ch;
  line-height: 1.6;
}

.cat-layout {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  align-items: start;
}

/* ---- Filter sidebar ---- */
.cat-filters {
  position: sticky;
  top: calc(var(--nav-h) + 16px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 22px 12px;
  box-shadow: var(--shadow-card);
}
.cat-filters-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.cat-filters-head h2 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.cat-filters-reset {
  background: transparent;
  border: none;
  color: var(--brand);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 160ms var(--ease);
}
.cat-filters-reset:hover { background: var(--brand-tint); }
.cat-filter-group {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.cat-filter-group:first-of-type { border-top: none; padding-top: 0; }
.cat-filter-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.cat-filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cat-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  transition: background 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
  user-select: none;
}
.cat-filter-chip:hover {
  border-color: var(--brand-bright);
  color: var(--brand);
}
.cat-filter-chip.is-on {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* ---- Result area ---- */
.cat-result-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 20px;
  gap: 16px;
  flex-wrap: wrap;
}
.cat-result-count {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--text);
}
.cat-result-count strong {
  color: var(--ink);
  font-weight: 800;
}
.cat-sort {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;
}
.cat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms var(--ease);
}
.cat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: var(--brand-bright);
}
.cat-card-media {
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(135deg, var(--brand-tint) 0%, #ffffff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.cat-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cat-card-media .placeholder {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 32px;
  color: var(--brand);
  opacity: 0.6;
  letter-spacing: -0.02em;
}
.cat-card-sample {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--line);
  color: var(--brand);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.cat-card-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.cat-card-cat {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
}
.cat-card-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.cat-card-desc {
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  flex: 1;
}
.cat-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.cat-chip {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11.5px;
  background: var(--bg-alt);
  color: var(--text);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  white-space: nowrap;
}
.cat-card-foot {
  border-top: 1px solid var(--line);
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cat-card-link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cat-card-link::after {
  content: '\2192';
  transition: transform 180ms var(--ease);
}
.cat-card:hover .cat-card-link::after { transform: translateX(3px); }

.cat-empty {
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 40px 24px;
  text-align: center;
  color: var(--muted);
  font-size: 14.5px;
}

/* Mobile filters: collapsible */
.cat-filters-toggle {
  display: none;
  width: 100%;
  padding: 12px 16px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 14px;
  cursor: pointer;
}

@media (max-width: 960px) {
  .cat-layout { grid-template-columns: 1fr; }
  .cat-filters {
    position: static;
    display: none;
  }
  .cat-filters.is-open { display: block; }
  .cat-filters-toggle { display: block; }
}

/* =====================================================================
   HOSE DETAIL — crevo.html?id=...
   ===================================================================== */
.detail-page { background: var(--bg); }

.detail-hero {
  padding: clamp(110px, 14vh, 150px) 0 clamp(40px, 6vh, 60px);
  background:
    radial-gradient(ellipse 70% 60% at 0% 0%, rgba(59,46,143,0.08) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 100% 100%, rgba(90,71,200,0.07) 0%, transparent 65%),
    var(--bg);
  border-bottom: 1px solid var(--line);
}
.detail-hero-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.detail-breadcrumb {
  font-family: var(--font-display);
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-bottom: 18px;
}
.detail-breadcrumb a { color: var(--muted); }
.detail-breadcrumb a:hover { color: var(--brand); }
.detail-breadcrumb-sep { margin: 0 8px; color: var(--line); }
.detail-eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
  background: var(--brand-tint);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.detail-title {
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 800;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
  line-height: 1.08;
}
.detail-lead {
  color: var(--text);
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 28px;
}
.detail-ctas {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
}
.detail-photo {
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(135deg, var(--brand-tint) 0%, #ffffff 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: var(--shadow);
  position: relative;
}
.detail-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.detail-photo .placeholder {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 5vw, 48px);
  color: var(--brand);
  opacity: 0.5;
  text-align: center;
  padding: 0 24px;
  letter-spacing: -0.02em;
}
.detail-sample-flag {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--line);
  color: var(--brand);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}

@media (max-width: 880px) {
  .detail-hero-inner { grid-template-columns: 1fr; gap: 32px; }
}

/* ---- Detail sections (description, temp, standards) ---- */
.detail-section {
  padding: clamp(48px, 8vh, 80px) 0;
  border-bottom: 1px solid var(--line);
}
.detail-section-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.detail-section-head { margin-bottom: 28px; max-width: 720px; }
.detail-section-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 10px;
  display: block;
}
.detail-section-title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  margin-bottom: 10px;
  color: var(--ink);
}
.detail-section-sub {
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.65;
}

/* Construction grid */
.detail-construction {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}
.detail-construction-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-card);
}
.detail-construction-item h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 10px;
}
.detail-construction-item p {
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.55;
}

/* Temperature + standards row */
.detail-meta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
@media (max-width: 760px) { .detail-meta-row { grid-template-columns: 1fr; } }
.detail-temp-block,
.detail-std-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-card);
}
.detail-temp-range {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 38px);
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.detail-temp-range small {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
.detail-temp-note {
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}
.detail-std-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.detail-std-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--brand-tint);
  color: var(--brand-dark);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.02em;
}

/* ---- Spec table — the core ---- */
.spec-table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.spec-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 760px;
}
.spec-table thead th {
  background: var(--bg-alt);
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 14px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  position: sticky;
  top: 0;
}
.spec-table thead th small {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: none;
  margin-top: 2px;
  opacity: 0.85;
}
.spec-table tbody td {
  padding: 14px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  white-space: nowrap;
}
.spec-table tbody td.spec-num {
  font-family: var(--font-display);
  font-weight: 700;
}
.spec-table tbody tr:last-child td { border-bottom: none; }
.spec-table tbody tr:hover { background: rgba(59,46,143,0.03); }
.spec-table .spec-sticky {
  position: sticky;
  left: 0;
  background: var(--surface);
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--brand);
  z-index: 1;
  box-shadow: 1px 0 0 var(--line);
}
.spec-table thead .spec-sticky {
  background: var(--bg-alt);
  z-index: 2;
}

.spec-note {
  background: var(--brand-tint);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-top: 14px;
  color: var(--brand-dark);
  font-size: 13.5px;
  line-height: 1.55;
  border-left: 3px solid var(--brand);
}

/* ---- Compatible fittings grid ---- */
.detail-fittings {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
.detail-fitting-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-card);
  transition: transform 200ms var(--ease), border-color 200ms var(--ease), box-shadow 200ms var(--ease);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.detail-fitting-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-bright);
  box-shadow: var(--shadow-lift);
}
.detail-fitting-card .ft-tip {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
}
.detail-fitting-card h4 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  color: var(--ink);
}
.detail-fitting-card p {
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  flex: 1;
}
.detail-fitting-card .ft-std {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ---- FAQ accordion ---- */
.detail-faq {
  max-width: 820px;
}
.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 12px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.faq-q {
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15.5px;
  color: var(--ink);
  cursor: pointer;
}
.faq-q::after {
  content: '+';
  font-size: 22px;
  font-weight: 600;
  color: var(--brand);
  transition: transform 220ms var(--ease);
  flex-shrink: 0;
}
.faq-item.is-open .faq-q::after { transform: rotate(45deg); }
.faq-a {
  padding: 0 22px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 280ms var(--ease), padding 220ms var(--ease);
}
.faq-item.is-open .faq-a {
  padding: 0 22px 20px;
  max-height: 360px;
}
.faq-a p {
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
}

/* ---- Detail page CTA strip ---- */
.detail-cta-strip {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  padding: clamp(48px, 7vh, 70px) 0;
  color: #fff;
}
.detail-cta-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.detail-cta-text h3 {
  color: #fff;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  margin-bottom: 8px;
}
.detail-cta-text p {
  color: rgba(255,255,255,0.85);
  font-size: 15px;
  max-width: 56ch;
}
.detail-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.detail-cta-actions .btn-primary {
  background: #fff;
  color: var(--brand);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.detail-cta-actions .btn-primary:hover { background: #fff; color: var(--brand-dark); }
.detail-cta-actions .btn-ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.6);
}
.detail-cta-actions .btn-ghost:hover {
  background: rgba(255,255,255,0.1);
  border-color: #fff;
}

/* Datasheet button */
.detail-datasheet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 10px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--brand);
  box-shadow: var(--shadow-card);
  transition: border-color 160ms var(--ease), background 160ms var(--ease);
}
.detail-datasheet:hover {
  border-color: var(--brand);
  background: var(--brand-tint);
}

/* Loading + error states */
.detail-loading,
.detail-error {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(140px, 18vh, 200px) var(--gutter);
  text-align: center;
  color: var(--muted);
  font-size: 16px;
}
.detail-error h2 {
  color: var(--ink);
  font-size: 28px;
  margin-bottom: 12px;
}
.detail-error a {
  color: var(--brand);
  font-weight: 600;
}

/* =====================================================================
   AUTH PAGES — prijava.html / registracija.html
   Centered card form on a soft tinted background.
   ===================================================================== */
.auth-page {
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(48px, 9vh, 96px) var(--gutter);
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(59,46,143,0.08) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 100% 100%, rgba(90,71,200,0.07) 0%, transparent 65%),
    var(--bg-alt);
}
.auth-card {
  width: 100%;
  max-width: 460px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(28px, 4vw, 44px);
}
.auth-card-wide { max-width: 520px; }
.auth-head {
  text-align: center;
  margin-bottom: 28px;
}
.auth-logo {
  height: 56px;
  width: auto;
  margin: 0 auto 18px;
  display: block;
}
.auth-eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
  background: var(--brand-tint);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.auth-title {
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.auth-sub {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 38ch;
  margin: 0 auto;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.auth-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.auth-form label > span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
}
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"] {
  font: inherit;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.auth-form input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(59,46,143,0.14);
}
.auth-form input:user-invalid {
  border-color: #c14d4d;
}
.auth-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 520px) {
  .auth-form .form-row { grid-template-columns: 1fr; }
}
.auth-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 13px;
  flex-wrap: wrap;
}
.auth-meta label {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-weight: 500;
}
.auth-meta a {
  color: var(--brand);
  font-weight: 600;
}
.auth-submit {
  margin-top: 8px;
  width: 100%;
}
.auth-error {
  display: none;
  padding: 10px 14px;
  background: #fdecec;
  border: 1px solid #f3c2c2;
  color: #9b2c2c;
  border-radius: 10px;
  font-size: 13.5px;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.45;
}
.auth-error.is-visible { display: block; }
.auth-success {
  display: none;
  padding: 10px 14px;
  background: #ebf8ed;
  border: 1px solid #c2e6c8;
  color: #2c6c3a;
  border-radius: 10px;
  font-size: 13.5px;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.45;
}
.auth-success.is-visible { display: block; }

.auth-footer {
  text-align: center;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--muted);
}
.auth-footer a {
  color: var(--brand);
  font-weight: 700;
}

.auth-disclaimer {
  margin-top: 18px;
  padding: 12px 14px;
  background: var(--brand-tint);
  border-left: 3px solid var(--brand);
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--brand-dark);
}
.auth-disclaimer strong { color: var(--brand-dark); }

.nav-mobile-user {
  font-family: var(--font-display);
  font-size: 13.5px;
  color: var(--muted);
  padding: 8px 4px;
  display: block;
}
.nav-mobile-user strong { color: var(--ink); font-weight: 700; }

/* =====================================================================
   STATS BAND (Brojevi) — 4 count-up tiles
   ===================================================================== */
.stats-band {
  background: var(--bg-alt);
  padding: clamp(48px, 7vh, 80px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stats-band-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 22px;
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}
.stat-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--brand);
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.stat-label {
  display: block;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.45;
}
@media (max-width: 880px) {
  .stats-band-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .stats-band-inner { grid-template-columns: 1fr; }
}

/* =====================================================================
   USLUGE TEASER — 4 line-icon cards
   ===================================================================== */
.usluge-teaser { background: var(--bg); padding: clamp(64px, 10vh, 110px) 0; }
.usluge-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.usluga-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px 26px;
  box-shadow: var(--shadow-card);
  color: var(--ink);
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease), border-color 240ms var(--ease);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.usluga-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: var(--brand-bright);
}
.usluga-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--brand-tint);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
.usluga-icon svg { width: 24px; height: 24px; }
.usluga-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16.5px;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin: 0;
}
.usluga-card p {
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  flex: 1;
}
.usluga-link {
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
@media (max-width: 1000px) { .usluge-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .usluge-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   SERTIFIKATI STRIP — flat band with badges
   ===================================================================== */
.certs-strip { background: var(--bg-alt); padding: clamp(48px, 7vh, 80px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.certs-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.certs-text h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 30px);
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.certs-text p {
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
}
.certs-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.cert-badge {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 22px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  color: var(--brand);
  letter-spacing: 0.04em;
  box-shadow: var(--shadow-card);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cert-badge small {
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
@media (max-width: 760px) {
  .certs-inner { grid-template-columns: 1fr; gap: 22px; }
}

/* =====================================================================
   NOVOSTI TEASER — 3 cards (Alfotech Latest news style)
   ===================================================================== */
.novosti-teaser { background: var(--bg); padding: clamp(64px, 10vh, 110px) 0; }
.novosti-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.novost-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease), border-color 240ms var(--ease);
}
.novost-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: var(--brand-bright);
}
.novost-media {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--bg-alt);
  overflow: hidden;
}
.novost-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease);
}
.novost-card:hover .novost-media img { transform: scale(1.04); }
.novost-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.novost-date {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.novost-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 0 0 14px;
}
.novost-link {
  margin-top: auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--brand);
}
.novost-link::after { content: ' →'; transition: transform 180ms var(--ease); display: inline-block; }
.novost-card:hover .novost-link::after { transform: translateX(3px); }
@media (max-width: 900px) { .novosti-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .novosti-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   CLOSING CTA BAND — indigo gradient with two CTAs
   ===================================================================== */
.cta-band {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #ffffff;
  padding: clamp(56px, 9vh, 100px) 0;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at top right, rgba(255,255,255,0.07), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(255,255,255,0.04), transparent 50%);
  pointer-events: none;
}
.cta-band-inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.cta-band h3 {
  color: #ffffff;
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
  line-height: 1.15;
}
.cta-band p {
  color: rgba(255,255,255,0.86);
  font-size: 16px;
  line-height: 1.55;
  max-width: 60ch;
  margin: 0;
}
.cta-band-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}
.cta-band-actions .btn-primary {
  background: #ffffff;
  color: var(--brand);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.cta-band-actions .btn-primary:hover {
  background: #ffffff;
  color: var(--brand-dark);
  transform: translateY(-1px);
}
.cta-band-actions .btn-ghost {
  background: transparent;
  color: #ffffff;
  border: 1.5px solid rgba(255,255,255,0.65);
}
.cta-band-actions .btn-ghost:hover {
  background: rgba(255,255,255,0.12);
  border-color: #ffffff;
  color: #ffffff;
}
@media (max-width: 820px) {
  .cta-band-inner { grid-template-columns: 1fr; }
  .cta-band-actions { justify-content: flex-start; }
}

/* =====================================================================
   KONFIGURATOR — light indigo, two-column wizard + sticky summary.
   Matches the homepage theme exactly.
   ===================================================================== */
.cfg-page {
  background: var(--bg-alt);
  min-height: calc(100vh - var(--nav-h));
  padding: clamp(28px, 4vh, 52px) 0 clamp(40px, 6vh, 80px);
}
.cfg-intro {
  max-width: var(--maxw);
  margin: 0 auto clamp(20px, 3vh, 32px);
  padding: 0 var(--gutter);
}
.cfg-intro h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 36px);
  color: var(--ink);
  letter-spacing: -0.015em;
  margin-bottom: 6px;
}
.cfg-intro p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
  max-width: 70ch;
}

/* ---- Stepper (top) ---- */
.cfg-stepper {
  max-width: var(--maxw);
  margin: 0 auto clamp(22px, 3vh, 34px);
  padding: 0 var(--gutter);
}
.cfg-stepper-track {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.cfg-step {
  flex: 1 1 0;
  min-width: 96px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 200ms var(--ease), color 200ms var(--ease);
}
.cfg-step .step-num {
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--bg-alt);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
}
.cfg-step.is-done .step-num {
  background: var(--brand);
  color: #fff;
}
.cfg-step.is-active {
  background: var(--brand-tint);
  color: var(--brand-dark);
}
.cfg-step.is-active .step-num {
  background: var(--brand);
  color: #fff;
}
.cfg-step:hover:not(.is-active):not(:disabled) {
  background: var(--bg-alt);
  color: var(--ink);
}

/* ---- Two-column layout ---- */
.cfg-layout {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 1080px) {
  .cfg-layout { grid-template-columns: 1fr; }
}

/* ---- Step content card ---- */
.cfg-content {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(24px, 3.5vw, 40px);
  min-height: 440px;
  display: flex;
  flex-direction: column;
}
.cfg-step-head { margin-bottom: 20px; }
.cfg-step-eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 8px;
}
.cfg-step-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 28px);
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  line-height: 1.18;
}
.cfg-step-sub {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
}
.cfg-step-body { flex: 1; }
.cfg-step-foot {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cfg-step-foot .btn[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

/* ---- Choice cards (tip creva, prikljucak type) ---- */
.cfg-choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.cfg-choice {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 18px;
  text-align: left;
  cursor: pointer;
  transition: border-color 180ms var(--ease), background 180ms var(--ease), transform 180ms var(--ease);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cfg-choice:hover {
  border-color: var(--brand-bright);
  background: var(--brand-tint);
  transform: translateY(-1px);
}
.cfg-choice.is-selected {
  border-color: var(--brand);
  background: var(--brand-tint);
  box-shadow: 0 0 0 3px rgba(59,46,143,0.12);
}
.cfg-choice .cfg-choice-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
}
.cfg-choice h4 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15.5px;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin: 0;
}
.cfg-choice p {
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}
.cfg-choice-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.cfg-choice-chips .chip {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11.5px;
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--line);
  padding: 3px 8px;
  border-radius: 999px;
}
.cfg-choice.is-selected .cfg-choice-chips .chip {
  background: rgba(255,255,255,0.7);
}

/* ---- Inputs (dimenzija, opcije, contact) ---- */
.cfg-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.cfg-field > label,
.cfg-field-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
}
.cfg-field input[type="text"],
.cfg-field input[type="email"],
.cfg-field input[type="number"],
.cfg-field input[type="tel"],
.cfg-field select,
.cfg-field textarea {
  font: inherit;
  padding: 11px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.cfg-field input:focus,
.cfg-field select:focus,
.cfg-field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(59,46,143,0.14);
}
.cfg-field small {
  font-size: 12px;
  color: var(--muted);
}
.cfg-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 600px) {
  .cfg-fields-grid { grid-template-columns: 1fr; }
}
.cfg-toggles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cfg-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 180ms var(--ease), background 180ms var(--ease);
}
.cfg-toggle:hover { border-color: var(--brand-bright); }
.cfg-toggle.is-on {
  border-color: var(--brand);
  background: var(--brand-tint);
}
.cfg-toggle input { margin-top: 3px; accent-color: var(--brand); }
.cfg-toggle-body { flex: 1; }
.cfg-toggle-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink);
}
.cfg-toggle-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
  margin-top: 2px;
}

/* ---- Variant table (DN picker) ---- */
.cfg-variant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.cfg-variant {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  transition: border-color 180ms var(--ease), background 180ms var(--ease);
}
.cfg-variant:hover { border-color: var(--brand-bright); background: var(--brand-tint); }
.cfg-variant.is-selected {
  border-color: var(--brand);
  background: var(--brand-tint);
  box-shadow: 0 0 0 3px rgba(59,46,143,0.12);
}
.cfg-variant strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--brand);
  font-size: 15px;
}
.cfg-variant small {
  display: block;
  color: var(--muted);
  font-size: 11.5px;
  margin-top: 2px;
}

/* ---- Angle + rotation buttons ---- */
.cfg-angle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cfg-angle {
  flex: 1 1 0;
  min-width: 92px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 14px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  text-align: center;
  transition: border-color 180ms var(--ease), background 180ms var(--ease);
}
.cfg-angle:hover { border-color: var(--brand-bright); }
.cfg-angle.is-selected {
  border-color: var(--brand);
  background: var(--brand-tint);
  color: var(--brand-dark);
}
.cfg-angle .angle-symbol {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--brand);
  margin-bottom: 4px;
}
.cfg-rotation {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  width: fit-content;
}
.cfg-rot-btn {
  background: var(--surface);
  border: 1px solid var(--line);
  width: 32px; height: 32px;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--brand);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cfg-rot-btn:hover { background: var(--brand-tint); }
.cfg-rot-value {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--ink);
  min-width: 50px;
  text-align: center;
}

/* ---- Sticky summary ---- */
.cfg-summary {
  position: sticky;
  top: calc(var(--nav-h) + 16px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 22px;
  align-self: start;
}
.cfg-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.cfg-summary-head h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.cfg-summary-count {
  background: var(--brand);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 999px;
}
.cfg-summary-empty {
  color: var(--muted);
  font-size: 13.5px;
  font-style: italic;
  text-align: center;
  padding: 16px 0;
}
.cfg-summary-current {
  margin-bottom: 16px;
}
.cfg-summary-current h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 8px;
}
.cfg-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
  color: var(--text);
  border-bottom: 1px dashed var(--line);
}
.cfg-summary-row:last-child { border-bottom: 0; }
.cfg-summary-row span:first-child {
  color: var(--muted);
  font-family: var(--font-display);
  font-weight: 600;
}
.cfg-summary-row span:last-child {
  color: var(--ink);
  font-weight: 600;
  text-align: right;
}
.cfg-summary-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.cfg-summary-item {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}
.cfg-summary-item-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
}
.cfg-summary-item-meta {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}
.cfg-summary-item-remove {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 999px;
  transition: background 160ms, color 160ms;
}
.cfg-summary-item-remove:hover { background: rgba(193,77,77,0.12); color: #c14d4d; }
.cfg-summary-add {
  width: 100%;
  margin-top: 4px;
}

/* ---- Review (step 6) ---- */
.cfg-review {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cfg-review-card {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.cfg-review-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.cfg-review-head h4 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
}
.cfg-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 24px;
}
.cfg-review-row {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 13px;
  padding: 4px 0;
}
.cfg-review-row .lbl { color: var(--muted); font-family: var(--font-display); font-weight: 600; }
.cfg-review-row .val { color: var(--ink); font-weight: 600; text-align: right; }

/* ---- Schematic SVG block (Phase 2) ---- */
.cfg-schematic {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin: 16px 0;
}
.cfg-schematic-svg {
  width: 100%;
  height: auto;
  max-height: 240px;
}
.cfg-schematic-legend {
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--brand-tint);
  border-left: 3px solid var(--brand);
  border-radius: 8px;
  font-size: 12px;
  color: var(--brand-dark);
  line-height: 1.55;
}

/* Hide a step body when it's not the current one. */
.cfg-step-body[data-step] { display: none; }
.cfg-step-body[data-step].is-current { display: block; }

/* Inline notifications */
.cfg-notice {
  padding: 10px 14px;
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  margin-bottom: 14px;
}
.cfg-notice.success {
  background: #ebf8ed;
  border: 1px solid #c2e6c8;
  color: #2c6c3a;
}
.cfg-notice.error {
  background: #fdecec;
  border: 1px solid #f3c2c2;
  color: #9b2c2c;
}

/* =====================================================================
   MODAL — generic dialog used by the Korpa upita button (and reusable
   later for other lightweight dialogs). Accessible: focus-trap, Esc,
   overlay/close button dismissal, aria-modal on the card.
   ===================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 40px);
}
.modal.is-open { display: flex; }
.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(12, 10, 30, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: gfModalFadeIn 220ms var(--ease) both;
}
.modal-card {
  position: relative;
  background: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(10, 10, 40, 0.34);
  max-width: 480px;
  width: 100%;
  padding: clamp(28px, 4vw, 40px);
  animation: gfModalIn 260ms cubic-bezier(0.32, 0.72, 0.36, 1) both;
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.modal-close:hover {
  background: var(--bg-alt);
  color: var(--ink);
}
.modal-card h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 26px);
  color: var(--ink);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.modal-card p {
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.6;
  margin-bottom: 20px;
}
.modal-card .modal-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Empty-state icon for the cart modal. */
.modal-empty-glyph {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: var(--brand-tint);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.modal-empty-glyph svg { width: 32px; height: 32px; }

@keyframes gfModalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes gfModalIn {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .modal-overlay, .modal-card { animation: none; }
}
/* When modal or drawer is open, prevent body scroll. */
body.modal-open,
body.drawer-open { overflow: hidden; }

/* =====================================================================
   CONFIGURATOR v2 — Alfotech-flow patterns in our indigo light theme.
   Adds: 8-step stepper variant, multi-hose tabs row, category/model
   cards, blue-tinted panels, fitting type tabs + bend buttons +
   fitting card grid + specials, right summary card, receipt page.
   ===================================================================== */

/* 8-step stepper — slightly smaller pills so all 8 fit on one row. */
.cfg-stepper-8 .cfg-step {
  padding: 8px 12px;
  font-size: 12px;
  gap: 6px;
  flex-shrink: 0;
}
.cfg-stepper-8 .cfg-step .step-num {
  width: 22px;
  height: 22px;
  font-size: 11px;
}
.cfg-stepper-8 .cfg-step .step-label {
  white-space: nowrap;
}
@media (max-width: 900px) {
  .cfg-stepper-8 .cfg-stepper-track { overflow-x: auto; padding-bottom: 6px; }
  .cfg-stepper-8 .cfg-step .step-label { font-size: 11px; }
}

/* Multi-hose tabs row */
.cfg-tabs-wrap {
  max-width: 1240px;
  margin: 0 auto 18px;
  padding: 0 clamp(16px, 4vw, 32px);
}
.cfg-tabs-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: stretch;
}
.cfg-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 6px 8px 14px;
  cursor: pointer;
  transition: background 160ms var(--ease), border-color 160ms var(--ease), box-shadow 160ms var(--ease);
  min-width: 160px;
  max-width: 240px;
}
.cfg-tab:hover { border-color: var(--brand-bright); }
.cfg-tab.is-active {
  background: var(--brand-tint);
  border-color: var(--brand);
  box-shadow: 0 1px 0 var(--brand) inset, 0 0 0 1px rgba(59,46,143,0.18);
}
.cfg-tab-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.cfg-tab-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cfg-tab-meta {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cfg-tab-x {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.cfg-tab-x:hover { background: rgba(193,77,77,0.12); color: #c14d4d; }
.cfg-tab-x svg { width: 14px; height: 14px; }
.cfg-tab-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px dashed var(--line);
  color: var(--brand);
  padding: 10px 14px;
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  transition: background 160ms var(--ease), border-color 160ms var(--ease);
}
.cfg-tab-add:hover { background: var(--brand-tint); border-color: var(--brand-bright); border-style: solid; }
.cfg-tab-add span { font-size: 16px; line-height: 1; }

/* Two-column layout — full-width on steps 1, 2, 8 */
.cfg-layout.is-full {
  grid-template-columns: 1fr;
}
.cfg-layout.is-full .cfg-summary { display: none; }

/* Step 1 — Category cards */
.cfg-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
.cfg-cat-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  text-align: left;
  cursor: pointer;
  transition: border-color 180ms var(--ease), transform 180ms var(--ease), box-shadow 180ms var(--ease);
  font-family: inherit;
}
.cfg-cat-card:hover {
  border-color: var(--brand-bright);
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(10,12,40,0.06);
}
.cfg-cat-card.is-selected {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(59,46,143,0.18);
}
.cfg-cat-icon {
  width: 60px;
  height: 60px;
}
.cfg-cat-icon svg { width: 100%; height: 100%; }
.cfg-cat-card h4 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  color: var(--ink);
  margin: 4px 0 0;
}
.cfg-cat-card p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  flex: 1;
}
.cfg-cat-action {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--brand);
  margin-top: 6px;
}

/* Step 2 — Model cards */
.cfg-model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
.cfg-model-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  text-align: left;
  cursor: pointer;
  transition: border-color 180ms var(--ease), transform 180ms var(--ease), box-shadow 180ms var(--ease);
  font-family: inherit;
}
.cfg-model-card:hover {
  border-color: var(--brand-bright);
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(10,12,40,0.06);
}
.cfg-model-card.is-selected {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(59,46,143,0.18);
}
.cfg-model-img {
  background: var(--bg-alt);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cfg-model-img svg { width: 100%; height: auto; max-width: 200px; }
.cfg-model-card h4 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15.5px;
  color: var(--ink);
  margin-top: 4px;
}
.cfg-model-card p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  flex: 1;
  min-height: 38px;
}
.cfg-model-action {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--brand);
  margin-top: 6px;
  align-self: flex-start;
}

/* Step head title-only (no eyebrow now). */
.cfg-step-head .cfg-step-title {
  margin-bottom: 8px;
}

/* Blue-tinted configure panel (mirrors Alfotech's light-blue background) */
.cfg-panel-blue {
  background: rgba(217, 230, 247, 0.45);
  border: 1px solid rgba(59,46,143,0.10);
  border-radius: 14px;
  padding: clamp(20px, 3vw, 28px);
}
.cfg-panel-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 14px;
}

/* Native select styled to match our inputs */
.cfg-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background: #ffffff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%233B2E8F' stroke-width='1.6'><path d='M1 1l4 4 4-4' stroke-linecap='round' stroke-linejoin='round'/></svg>") right 14px center / 10px 6px no-repeat;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 36px 10px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
}
.cfg-select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(59,46,143,0.15);
}

/* Step 4 — Two-column fittings layout */
.cfg-fittings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 900px) {
  .cfg-fittings-grid { grid-template-columns: 1fr; }
}
.cfg-fitting-col {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
}
.cfg-fitting-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.cfg-fitting-head strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
}
.cfg-same-as-left {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--muted);
  cursor: pointer;
}
.cfg-same-as-left input { accent-color: var(--brand); }

/* Type tabs row */
.cfg-type-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cfg-type-tab {
  padding: 6px 12px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: background 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}
.cfg-type-tab:hover { background: var(--brand-tint); }
.cfg-type-tab.is-selected {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

/* Bend buttons */
.cfg-bend-row {
  display: flex;
  gap: 6px;
}
.cfg-bend {
  flex: 1;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}
.cfg-bend:hover { border-color: var(--brand-bright); }
.cfg-bend.is-selected {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

/* Fitting card grid (within active type) */
.cfg-fitting-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 6px;
}
.cfg-fitting-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 6px;
  cursor: pointer;
  transition: border-color 160ms var(--ease), background 160ms var(--ease), box-shadow 160ms var(--ease);
  font-family: inherit;
  min-height: 90px;
}
.cfg-fitting-card:hover {
  border-color: var(--brand-bright);
  background: var(--brand-tint);
}
.cfg-fitting-card.is-selected {
  border-color: var(--brand);
  background: var(--brand-tint);
  box-shadow: 0 0 0 2px rgba(59,46,143,0.18);
}
.cfg-fitting-card-img {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cfg-fitting-card-img svg { width: 100%; height: 100%; }
.cfg-fitting-card-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10.5px;
  color: var(--ink);
  text-align: center;
  line-height: 1.25;
}
.cfg-fitting-special .cfg-fitting-card-name { color: var(--muted); }

/* Step 5 — checkbox lines */
.cfg-checkbox-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
}
.cfg-checkbox-line input { accent-color: var(--brand); width: 16px; height: 16px; }

/* Step foot variants */
.cfg-step-foot-3 {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.cfg-step-foot-3 > .btn { flex: 0 0 auto; }
.btn-text {
  background: transparent;
  border: 0;
  color: var(--brand);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  padding: 10px 6px;
  cursor: pointer;
}
.btn-text:hover { color: var(--brand-dark); text-decoration: underline; }

/* Step 6 — Review cards (Alfotech-style horizontal layout) */
.cfg-review-card {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 2fr;
  gap: 22px;
  background: rgba(217, 230, 247, 0.45);
  border: 1px solid rgba(59,46,143,0.10);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 14px;
}
@media (max-width: 720px) {
  .cfg-review-card { grid-template-columns: 1fr; }
}
.cfg-review-illustration {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.cfg-review-illustration svg { max-width: 100%; }
.cfg-review-fitting-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  max-width: 240px;
}
.cfg-review-fitting-pair > svg {
  width: 100%;
  height: auto;
}
.cfg-review-meta-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 4px;
}
.cfg-review-meta-head strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  color: var(--ink);
}
.cfg-review-meta-actions {
  display: flex;
  gap: 4px;
}
.cfg-icon-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: #ffffff;
  border-radius: 8px;
  color: var(--brand);
  cursor: pointer;
  transition: background 160ms var(--ease);
}
.cfg-icon-btn:hover { background: var(--brand-tint); }
.cfg-icon-btn svg { width: 16px; height: 16px; }
.cfg-icon-btn-danger { color: #c14d4d; }
.cfg-icon-btn-danger:hover { background: rgba(193,77,77,0.10); }
.cfg-review-meta-sub {
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 12px;
}
.cfg-review-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 16px;
  row-gap: 6px;
  font-size: 13.5px;
}
.cfg-review-dl dt {
  color: var(--muted);
  font-family: var(--font-display);
  font-weight: 600;
}
.cfg-review-dl dd {
  color: var(--ink);
  font-weight: 600;
  margin: 0;
}
.cfg-qty-input {
  width: 64px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--ink);
}

/* Step 8 — Receipt */
.cfg-receipt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 24px;
}
@media (max-width: 720px) {
  .cfg-receipt-grid { grid-template-columns: 1fr; }
}
.cfg-receipt-msg h3,
.cfg-receipt-billing h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 10px;
}
.cfg-receipt-msg p { font-size: 14px; color: var(--text); margin-bottom: 8px; }
.cfg-ref-no {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--brand);
  letter-spacing: 0.05em;
  margin: 6px 0 8px;
}
.cfg-receipt-help { font-size: 12.5px; color: var(--muted) !important; }
.cfg-receipt-billing > div { font-size: 13.5px; color: var(--ink); line-height: 1.6; }
.cfg-receipt-overview {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cfg-receipt-card {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 2fr;
  gap: 22px;
  background: rgba(217, 230, 247, 0.45);
  border: 1px solid rgba(59,46,143,0.10);
  border-radius: 14px;
  padding: 20px;
}
@media (max-width: 720px) {
  .cfg-receipt-card { grid-template-columns: 1fr; }
}
.cfg-receipt-illustration {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.cfg-receipt-meta strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  color: var(--ink);
  display: block;
  margin-bottom: 4px;
}

/* Right summary card — overrides the older simple summary panel */
.cfg-summary {
  position: sticky;
  top: calc(var(--nav-h) + 16px);
  align-self: start;
}
.cfg-summary-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 6px 18px rgba(10,12,40,0.04);
}
.cfg-summary-head h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  color: var(--ink);
  margin-bottom: 4px;
}
.cfg-summary-dim {
  font-size: 12.5px;
  color: var(--muted);
}
.cfg-summary-length {
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
  margin: 14px 0 6px;
}
.cfg-summary-hose {
  width: 100%;
  margin: 0 auto 12px;
  display: flex;
  justify-content: center;
}
.cfg-summary-hose svg { width: 100%; max-width: 320px; height: auto; }
.cfg-summary-fitting-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 14px 0;
}
.cfg-summary-fitting {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.cfg-summary-fitting svg { width: 80px; height: 80px; }
.cfg-summary-fitting-dim {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  line-height: 1.4;
}
.cfg-summary-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 12px;
  row-gap: 6px;
  font-size: 12.5px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.cfg-summary-dl dt {
  color: var(--muted);
  font-family: var(--font-display);
  font-weight: 600;
}
.cfg-summary-dl dd {
  color: var(--ink);
  font-weight: 600;
  margin: 0;
}
.cfg-summary-empty-card {
  background: var(--bg-alt);
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 28px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

@media (max-width: 1080px) {
  .cfg-summary { position: static; }
}

/* =====================================================================
   Cart dropdown (Korpa upita) — anchored under the nav cart icon.
   Mobile (≤640px): full-width sheet pinned under the navbar.
   ===================================================================== */
.cart-dropdown {
  position: fixed;
  top: 76px;
  right: 12px;
  width: min(360px, calc(100vw - 24px));
  max-height: min(560px, calc(100vh - 96px));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(20, 20, 60, 0.18), 0 4px 14px rgba(20, 20, 60, 0.08);
  z-index: 200;
  display: none;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font-body, system-ui, sans-serif);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 140ms ease, transform 140ms ease;
}
.cart-dropdown.is-open {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .cart-dropdown { transition: none; transform: none; }
}
.cart-dropdown-arrow {
  position: absolute;
  top: -6px;
  right: 22px;
  width: 12px;
  height: 12px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  transform: rotate(45deg);
}
.cart-dropdown-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line);
}
.cart-dropdown-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.cart-dropdown-count {
  font-weight: 500;
  color: var(--muted);
  margin-left: 4px;
}
.cart-dropdown-clear {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
.cart-dropdown-clear:hover { color: var(--ink); background: var(--bg-alt); }
.cart-dropdown-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 8px;
}
.cart-dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cart-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-alt);
  transition: border-color 120ms ease, background 120ms ease;
}
.cart-dropdown-item:hover {
  border-color: #c9c2e8;
  background: #fafafe;
}
.cart-dropdown-item-body {
  flex: 1 1 auto;
  min-width: 0;
}
.cart-dropdown-item-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cart-dropdown-item-meta {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}
.cart-dropdown-remove {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.cart-dropdown-remove:hover {
  background: #fdecec;
  color: #c0392b;
  border-color: #f5c8c2;
}
.cart-dropdown-remove svg { width: 16px; height: 16px; }
.cart-dropdown-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 18px 10px;
  text-align: center;
}
.cart-dropdown-empty-glyph {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--bg-alt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand, #3B2E8F);
}
.cart-dropdown-empty-glyph svg { width: 22px; height: 22px; }
.cart-dropdown-empty p { margin: 0; color: var(--muted); font-size: 13px; }
.cart-dropdown-foot {
  display: flex;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--line);
}
.cart-dropdown-foot .btn { flex: 1; }
.cart-dropdown-foot .btn.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

@media (max-width: 640px) {
  .cart-dropdown {
    left: 0 !important;
    right: 0 !important;
    width: 100%;
    border-radius: 0 0 14px 14px;
    max-height: calc(100vh - 90px);
  }
  .cart-dropdown-arrow { display: none; }
}

/* Configurator submit button — loading state */
.cfg-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: cfg-spin 0.7s linear infinite;
  vertical-align: -2px;
}
@keyframes cfg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .cfg-spinner { animation: none; }
}
.btn.is-loading { cursor: progress; opacity: 0.85; }

/* =====================================================================
   Mobile fix: ensure the configurator stepper clears the fixed navbar
   on small viewports (the body padding-top of var(--nav-h) is enough on
   desktop but the wrap-stacked nav on phones reads slightly taller).
   ===================================================================== */
@media (max-width: 720px) {
  .cfg-page { padding-top: calc(var(--nav-h) + 12px); }
}