/* =========================================================
   SKINGARD — design tokens
   ========================================================= */
:root {
  --skg-black: #0A0A0B;
  --skg-black-2: #131316;
  --skg-black-3: #1B1B1F;
  --skg-magenta: #F188B0;   /* sampled from provided SKINGARD wordmark logo */
  --skg-magenta-2: #FB76A5; /* sampled from provided brand line-pattern art */
  --skg-fuchsia: #FB76A5;
  --skg-white: #FFFFFF;
  --skg-silver: #B8B8B8;    /* sampled from provided chevron mark */
  --skg-silver-dim: #8A8A90;

  --skg-gradient: linear-gradient(90deg, var(--skg-magenta) 0%, var(--skg-fuchsia) 55%, var(--skg-magenta-2) 100%);
  --skg-gradient-soft: linear-gradient(135deg, rgba(241,136,176,0.35), rgba(251,118,165,0.08));

  --border-soft: rgba(255, 255, 255, 0.09);
  --border-soft-2: rgba(255, 255, 255, 0.14);

  --font-head: "Unbounded", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --container: 1180px;
  --radius: 16px;
  --radius-sm: 10px;

  --ease-out: cubic-bezier(.16,.84,.44,1);

  /* Recurring brand motif: magenta -> fuchsia wavy line, reused as a
     small eyebrow glyph, hover underline and full-bleed section divider. */
  --skg-wave-sm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='10' viewBox='0 0 28 10'%3E%3Cpath d='M0 5 Q4 0 8 5 T16 5 T24 5' stroke='%23F188B0' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  --skg-wave-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='26' viewBox='0 0 120 26'%3E%3Cpath d='M0 15 Q15 4 30 15 T60 15 T90 15 T120 15' stroke='%23B0496D' stroke-width='3.6' fill='none' stroke-linecap='round'/%3E%3Cpath d='M0 13 Q15 2 30 13 T60 13 T90 13 T120 13' stroke='%23F188B0' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* =========================================================
   Reset
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body, h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, button { color: inherit; }

body {
  background: var(--skg-black);
  color: var(--skg-white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--skg-magenta);
  color: var(--skg-white);
  padding: 10px 16px;
  z-index: 200;
}
.skip-link:focus { left: 8px; top: 8px; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

.text-accent { color: var(--skg-magenta-2); font-style: italic; }

section[id] { scroll-margin-top: 88px; }

.section { padding: 96px 0; position: relative; }
@media (max-width: 720px) { .section { padding: 64px 0; } }

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--skg-magenta-2);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.section-eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 10px;
  flex-shrink: 0;
  background: var(--skg-wave-sm) no-repeat center / contain;
}

/* Full-bleed decorative wave divider — recurring brand pattern between sections */
.wave-divider {
  height: 26px;
  margin: 0 auto;
  max-width: 900px;
  background: var(--skg-wave-tile) repeat-x left center;
  background-size: 120px 26px;
  opacity: 0.85;
  animation: waveDrift 9s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .wave-divider { animation: none; }
}
@keyframes waveDrift {
  from { background-position-x: 0; }
  to { background-position-x: 240px; }
}

.section h2 {
  font-size: clamp(28px, 4vw, 44px);
  max-width: 780px;
  margin-bottom: 20px;
}

.section-lead {
  color: var(--skg-silver);
  font-size: 17px;
  max-width: 640px;
  margin-bottom: 40px;
}
.section-lead.small-note { font-size: 14px; font-style: italic; color: var(--skg-silver-dim); }

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background .25s, border-color .25s;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--skg-gradient);
  color: var(--skg-black); /* dark text: brand pink is light, needs dark-on-pink for contrast */
  box-shadow: 0 8px 24px -8px rgba(241,136,176,0.65);
}
.btn-primary:hover { box-shadow: 0 10px 30px -6px rgba(241,136,176,0.85); transform: translateY(-1px); }

.btn-ghost {
  background: rgba(255,255,255,0.06);
  color: var(--skg-white);
  border-color: var(--border-soft-2);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: rgba(255,255,255,0.1); }

.btn-outline {
  background: transparent;
  color: var(--skg-white);
  border-color: var(--border-soft-2);
}
.btn-outline:hover { border-color: var(--skg-magenta-2); color: var(--skg-magenta-2); }

.btn-sm { padding: 10px 18px; font-size: 13px; }
.btn-lg { padding: 17px 32px; font-size: 15px; }
.btn-block { width: 100%; }

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(10,10,11,0.7);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
  pointer-events: none;
}
.site-header.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 72px;
}

.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* Wordmark treatment shared by header/intro/footer — bold italic lean to
   match the provided SKINGARD logo art (pink wordmark, tight tracking). */
.brand-word,
.intro-wordmark,
.footer-brand span {
  color: var(--skg-magenta);
  font-style: italic;
  display: inline-block;
  transform: skewX(-6deg);
}

.brand-word {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.main-nav {
  display: flex;
  gap: 26px;
  margin: 0 auto;
  font-size: 14px;
  font-weight: 500;
  color: var(--skg-silver);
}
.main-nav a {
  position: relative;
  padding-bottom: 5px;
  transition: color .2s;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0;
  height: 6px;
  background: var(--skg-wave-sm) repeat-x left center / 20px 6px;
  transition: width .3s var(--ease-out);
}
.main-nav a:hover { color: var(--skg-white); }
.main-nav a:hover::after { width: 100%; }

.header-actions { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.tel-link { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--skg-silver); }
.tel-link:hover { color: var(--skg-white); }

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--border-soft-2);
  border-radius: 10px;
}
.burger span { display: block; height: 2px; width: 18px; margin: 0 auto; background: var(--skg-white); border-radius: 2px; transition: transform .25s, opacity .25s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 10px 20px 22px;
  border-top: 1px solid var(--border-soft);
}
.mobile-nav a { padding: 12px 4px; font-size: 15px; font-weight: 600; border-bottom: 1px solid var(--border-soft); }
.mobile-nav .btn { margin-top: 14px; text-align: center; }
.mobile-nav.is-open { display: flex; }

@media (max-width: 1100px) {
  .main-nav, .header-actions { display: none; }
  .burger { display: flex; }
}

/* =========================================================
   HERO / INTRO SCROLL ANIMATION
   ========================================================= */
.intro-pin-wrap {
  position: relative;
  /* Viewport-tall stage; GSAP ScrollTrigger pin adds the scroll room
     (see initIntroAnimation). Do NOT put overflow-x on html/body ancestors
     in a way that breaks pinning — sticky was previously killed by
     overflow-x: clip on <html>. */
  height: 100vh;
  background: var(--skg-black);
}

.intro-stage {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intro-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 8%, rgba(241,136,176,0.16), transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 90%, rgba(251,118,165,0.10), transparent 60%),
    var(--skg-black);
  z-index: 0;
}

.hero-copy {
  position: relative;
  z-index: 3;
  max-width: 760px;
  padding: 0 24px;
  text-align: center;
  will-change: opacity, transform;
}

.eyebrow {
  font-family: var(--font-head);
  color: var(--skg-magenta);
  font-size: 15px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  transform: skewX(-6deg);
  display: inline-block;
  margin-bottom: 18px;
}

.hero-copy h1 {
  font-size: clamp(32px, 6vw, 62px);
  margin-bottom: 20px;
}

.hero-sub {
  color: var(--skg-silver);
  font-size: 18px;
  max-width: 620px;
  margin: 0 auto 32px;
}

.hero-cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.hero-lead {
  color: var(--skg-silver);
  font-size: 19px;
  font-weight: 600;
  max-width: 480px;
  margin: 0 auto 32px;
}

.scroll-cue {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--skg-silver-dim);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.scroll-cue i {
  width: 1px;
  height: 34px;
  background: linear-gradient(180deg, var(--skg-magenta-2), transparent);
  position: relative;
  overflow: hidden;
}
.scroll-cue i::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 10px;
  background: var(--skg-white);
  animation: scrollCueMove 1.8s ease-in-out infinite;
}
@keyframes scrollCueMove {
  0% { transform: translateY(-10px); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translateY(34px); opacity: 0; }
}

.film-visual {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  will-change: opacity;
  padding: 0 20px;
}

.film-frame {
  position: relative;
  width: min(52vw, 320px);
  aspect-ratio: 440 / 782;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.09);
  background: var(--skg-black-2);
}
@media (max-width: 720px) {
  .film-frame { width: min(64vw, 290px); }
}

.film-canvas,
.film-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Canvas drives the scroll-scrubbed sequence; the <img> is only the static
   fallback shown when the animated layer is skipped (see reduced-motion /
   .no-intro-anim rules below), so it stays hidden otherwise. */
.film-poster { display: none; }

.visual-caption {
  margin-top: 28px;
  max-width: 560px;
  text-align: center;
  font-size: 14px;
  color: var(--skg-silver);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.visual-caption .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--skg-magenta-2);
  margin: 0 auto 6px;
}
.visual-caption em { color: var(--skg-silver-dim); font-size: 12px; }

.intro-blackout {
  position: absolute;
  inset: 0;
  /* Brand topo-line pattern behind the reveal; a center vignette dims the
     art's own baked-in wordmark so it doesn't double up with the live
     .intro-logo text that animates on top of it. */
  background-image:
    radial-gradient(ellipse 46% 34% at 50% 50%, rgba(10,10,11,0.97) 0%, rgba(10,10,11,0.88) 55%, rgba(10,10,11,0) 78%),
    linear-gradient(rgba(10,10,11,0.3), rgba(10,10,11,0.3)),
    url("../assets/brand/skingard-logo-pattern.png");
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: auto, auto, cover;
  background-color: var(--skg-black);
  opacity: 0;
  z-index: 4;
  will-change: opacity;
  /* Purely decorative fade layer — must never intercept clicks on the
     hero CTA buttons underneath it (z-index 3), even while opacity is 0
     and the element still fully covers the viewport. */
  pointer-events: none;
}

.intro-logo {
  position: absolute;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: scale(0.92);
  will-change: opacity, transform;
  pointer-events: none;
}
.intro-logo-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.intro-mark {
  width: clamp(30px, 6vw, 46px);
  height: auto;
  flex-shrink: 0;
}
.intro-wordmark {
  font-family: var(--font-head);
  font-size: clamp(26px, 5vw, 40px);
  font-weight: 800;
  letter-spacing: -0.005em;
}
.intro-tagline {
  font-size: 13px;
  color: var(--skg-magenta-2);
  letter-spacing: 0.1em;
  font-weight: 500;
}

/* Reduced motion / low-power mobile: show static end-state, skip scrubbed
   animation entirely (true CSS-only fallback, no GSAP timeline runs). */
@media (prefers-reduced-motion: reduce) {
  .intro-pin-wrap { height: auto; }
  .intro-stage {
    position: relative;
    height: auto;
    min-height: 100vh;
    flex-direction: column;
    gap: 40px;
    padding: 120px 20px 64px;
  }
  .hero-copy { opacity: 1; }
  .film-visual { position: relative; inset: auto; opacity: 1; z-index: 1; }
  .film-canvas { display: none; }
  .film-poster { display: block; }
  .intro-blackout, .intro-logo { display: none; }
}
html.no-intro-anim .intro-pin-wrap { height: auto; }
html.no-intro-anim .intro-stage {
  position: relative;
  height: auto;
  min-height: 100vh;
  flex-direction: column;
  gap: 40px;
  padding: 120px 20px 64px;
}
html.no-intro-anim .hero-copy { opacity: 1; }
html.no-intro-anim .film-visual { position: relative; inset: auto; opacity: 1; z-index: 1; }
html.no-intro-anim .film-canvas { display: none; }
html.no-intro-anim .film-poster { display: block; }
html.no-intro-anim .intro-blackout,
html.no-intro-anim .intro-logo { display: none; }

/* =========================================================
   Simple hero (subpages without the GSAP hood-sequence intro,
   e.g. folija-u-boji.html) — reuses .hero-copy/.eyebrow/.hero-sub/
   .hero-cta-row, just needs top clearance under the fixed header
   plus a lightweight background instead of the pinned canvas stage.
   ========================================================= */
.simple-hero {
  padding-top: 168px;
  text-align: center;
  background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(241,136,176,0.16), transparent 60%);
}
.simple-hero .hero-copy { max-width: 800px; margin: 0 auto; }
@media (max-width: 720px) {
  .simple-hero { padding-top: 128px; }
}

/* =========================================================
   Hero router — 3 equal-weight paths shown right under the
   intro hero (index.html): zaštita / promena boje / veleprodaja.
   Deliberately outside the pinned GSAP intro stage so it never
   touches the scroll-scrubbed animation above it.
   ========================================================= */
.hero-router-section { text-align: center; }
.hero-router-section .section-eyebrow { justify-content: center; display: inline-flex; }
.hero-router-section .container { display: flex; flex-direction: column; align-items: center; }

.hero-router {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
}
@media (max-width: 900px) {
  .hero-router { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
}

/* Same card language as .spec-card (bg/border/radius/padding/hover-lift),
   just with an icon badge + CTA line added on top. */
.router-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  background: var(--skg-black-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 24px 20px;
  transition: border-color .25s, transform .25s;
}
.router-card:hover, .router-card:focus-visible { border-color: rgba(241,136,176,0.4); transform: translateY(-3px); }

/* Outlined pink circle badge — same visual family as .calc-step-num /
   .process-num (outline + magenta-2), not a new filled-icon pattern. */
.router-icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(241,136,176,0.4);
  background: transparent;
  color: var(--skg-magenta-2);
  margin-bottom: 14px;
  flex-shrink: 0;
  transition: border-color .25s, background .25s;
}
.router-icon svg { width: 22px; height: 22px; }
.router-card:hover .router-icon { border-color: var(--skg-magenta-2); background: rgba(241,136,176,0.1); }

.router-card h3 { font-size: 19px; margin: 0 0 4px; }
.router-card p { font-size: 14px; color: var(--skg-silver); flex-grow: 1; }
.router-cta {
  margin-top: 16px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  color: var(--skg-magenta-2);
  transition: color .2s;
}
.router-card:hover .router-cta { color: var(--skg-white); }

.hero-router-fallback {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.hero-router-fallback p {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--skg-silver-dim);
}

/* =========================================================
   Path switcher — compact "wrong page?" bar under the hero of
   folija-u-boji.html / veleprodaja.html. These two pages target
   precise ad/search intent, so unlike index.html they do NOT get
   the full 3-card hero-router (that would dilute the landing
   page's relevance for the exact query someone just clicked).
   This is deliberately a thin, mutable, easy-to-skip strip —
   never styled as cards/icons like .hero-router, so it never
   competes with the page's own primary CTA.
   ========================================================= */
.path-switcher {
  background: var(--skg-black-2);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  padding: 14px 0;
}
.path-switcher-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  text-align: center;
}
.path-switcher-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--skg-silver);
  transition: color .2s;
}
.path-switcher-link:hover { color: var(--skg-magenta-2); }
.path-switcher-link + .path-switcher-link {
  position: relative;
  padding-left: 18px;
}
.path-switcher-link + .path-switcher-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: var(--border-soft-2);
}
/* Touch tap-target minimum (44px tall) on mobile/tablet — the link is
   otherwise only as tall as its text line, whether stacked or side-by-side. */
@media (max-width: 900px) {
  .path-switcher-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 6px 4px;
  }
}
@media (max-width: 640px) {
  .path-switcher-inner { flex-direction: column; gap: 4px; }
  .path-switcher-link { width: 100%; }
  .path-switcher-link + .path-switcher-link { padding-left: 4px; }
  .path-switcher-link + .path-switcher-link::before { display: none; }
}

/* =========================================================
   Trust bar
   ========================================================= */
.trust-bar {
  padding: 30px 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  background: var(--skg-black-2);
}
.trust-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}
.trust-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--skg-silver);
}
.trust-list svg { width: 20px; height: 20px; color: var(--skg-silver); flex-shrink: 0; }

/* =========================================================
   Analogy block (telefon vs. auto — hero -> problem bridge)
   ========================================================= */
.analogy-section { padding: 40px 0; background: var(--skg-black-2); border-bottom: 1px solid var(--border-soft); }
.analogy-block { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
.analogy-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 8px 20px;
}
.analogy-item:first-child { border-right: 1px dashed var(--border-soft-2); }
.analogy-value { font-family: var(--font-head); font-size: 26px; font-weight: 800; color: var(--skg-magenta-2); }
.analogy-item p { font-size: 14px; color: var(--skg-silver); }
.analogy-punchline {
  grid-column: 1 / -1;
  text-align: center;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  color: var(--skg-white);
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border-soft);
}
@media (max-width: 640px) {
  .analogy-block { grid-template-columns: 1fr; gap: 20px; }
  .analogy-item:first-child { border-right: none; border-bottom: 1px dashed var(--border-soft-2); padding-bottom: 20px; }
}
@media (max-width: 420px) {
  .analogy-value { font-size: 21px; }
  .analogy-punchline { font-size: 14px; }
}

/* =========================================================
   Reveal on scroll (generic)
   ========================================================= */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

.micro-cta {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.micro-cta p { color: var(--skg-silver); font-size: 15px; font-weight: 500; }
.micro-cta--bridge p { max-width: 640px; }
.micro-cta--secondary { border-top-style: dashed; }

.cross-sell-note {
  margin-top: 24px;
  font-size: 14px;
  color: var(--skg-silver-dim);
}
.cross-sell-note a { color: var(--skg-magenta-2); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.cross-sell-note a:hover { color: var(--skg-white); }

.cross-sell-final { padding: 0 0 64px; text-align: center; }
.cross-sell-final .cross-sell-note { margin-top: 0; }

/* =========================================================
   Problem section
   ========================================================= */
.problem-grid {
  display: grid;
  /* Desktop: 2 columns (~2× larger than the old 4-col layout) so the
     before/after detail is actually readable. */
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 640px) { .problem-grid { grid-template-columns: 1fr; gap: 16px; } }

.problem-card { display: flex; flex-direction: column; gap: 10px; }
.problem-card figcaption { font-size: 13px; color: var(--skg-silver-dim); }

.img-placeholder {
  aspect-ratio: 4/3;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border-soft-2);
  background:
    repeating-linear-gradient(135deg, rgba(241,136,176,0.10) 0 12px, rgba(255,255,255,0.02) 12px 24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--skg-magenta-2);
  padding: 12px;
}
.img-placeholder span { font-family: var(--font-body); font-weight: 400; font-size: 11px; color: var(--skg-silver-dim); letter-spacing: normal; }
.img-placeholder--damage { background: repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 12px, rgba(241,136,176,0.06) 12px 24px); }

/* =========================================================
   Product / material gallery + spec grid
   ========================================================= */
.material-compare { max-width: 640px; margin: 0 auto 32px; }

.spec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 48px;
}
.spec-grid.provenance-grid,
.spec-grid.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .spec-grid,
  .spec-grid.provenance-grid,
  .spec-grid.grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .spec-grid,
  .spec-grid.provenance-grid,
  .spec-grid.grid-4 { grid-template-columns: 1fr; }
}

.spec-card {
  background: var(--skg-black-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 24px 20px;
  transition: border-color .25s, transform .25s;
}
.spec-card:hover { border-color: rgba(241,136,176,0.4); transform: translateY(-3px); }
.spec-value { display: block; font-family: var(--font-head); font-size: 26px; font-weight: 800; color: var(--skg-white); }
.spec-value small { font-size: 14px; color: var(--skg-magenta-2); }
.spec-label { display: block; margin: 4px 0 10px; font-size: 13px; font-weight: 700; color: var(--skg-magenta-2); text-transform: uppercase; letter-spacing: 0.06em; }
.spec-card p { font-size: 14px; color: var(--skg-silver); }

.provenance-block { margin-bottom: 48px; }
.provenance-block h3 { font-family: var(--font-head); font-size: 18px; margin-bottom: 20px; }
.spec-grid.provenance-grid { margin-bottom: 0; }

.compare-mini {
  background: var(--skg-gradient-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 32px;
}
.compare-mini h3 { font-family: var(--font-head); font-size: 18px; margin-bottom: 20px; }
.compare-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 800px) { .compare-mini-grid { grid-template-columns: 1fr; } }
.compare-mini-grid strong { display: block; font-family: var(--font-head); font-size: 15px; margin-bottom: 8px; color: var(--skg-magenta-2); }
.compare-mini-grid p { font-size: 14px; color: var(--skg-silver); }
/* Plain paragraph variant (no 3-col grid) — used to highlight a single
   block of text, e.g. the legal/"šta kaže zakon" callout. */
.compare-mini > p { font-size: 15px; line-height: 1.7; color: var(--skg-silver); }
.compare-mini > p strong { color: var(--skg-white); }

/* =========================================================
   Comparison table
   ========================================================= */
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
}
.compare-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.compare-table th, .compare-table td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.compare-table thead th { font-family: var(--font-head); font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--skg-silver); background: var(--skg-black-2); }
.compare-table thead th.is-us { color: var(--skg-white); background: rgba(241,136,176,0.14); }
.compare-table tbody th { font-weight: 600; color: var(--skg-silver); }
.compare-table td.is-us { background: rgba(241,136,176,0.06); font-weight: 500; }
.compare-table tbody tr:last-child td, .compare-table tbody tr:last-child th { border-bottom: none; }
.ok { color: #33d17a; margin-right: 6px; }
.no { color: #ff5c5c; margin-right: 6px; }

/* Mobile: stack each criterion as a card so the page never grows wider
   than the viewport (the old min-width:620px table blew out the layout). */
@media (max-width: 720px) {
  .table-wrap {
    overflow: visible;
    border: none;
    border-radius: 0;
  }
  .compare-table,
  .compare-table thead,
  .compare-table tbody,
  .compare-table tr,
  .compare-table th,
  .compare-table td {
    display: block;
    width: 100%;
  }
  .compare-table thead { display: none; }
  .compare-table tbody tr {
    background: var(--skg-black-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    margin-bottom: 12px;
    overflow: hidden;
  }
  .compare-table tbody tr:last-child { margin-bottom: 0; }
  .compare-table tbody th {
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--border-soft);
    color: var(--skg-white);
    font-family: var(--font-head);
    font-size: 14px;
    white-space: normal;
  }
  .compare-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-soft);
    background: transparent;
  }
  .compare-table td:last-child { border-bottom: none; }
  .compare-table td.is-us {
    background: rgba(241,136,176,0.08);
  }
  .compare-table td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--skg-silver-dim);
    margin-bottom: 6px;
  }
  .compare-table td.is-us::before { color: var(--skg-magenta-2); }
}

/* =========================================================
   Process
   ========================================================= */
.process-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .process-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .process-list { grid-template-columns: 1fr; } }

.process-list li {
  background: var(--skg-black-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 26px 22px;
  position: relative;
  transition: border-color .25s, transform .25s;
}
.process-list li:hover {
  border-color: rgba(241,136,176,0.4);
  transform: translateY(-3px);
}
.process-num {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 800;
  color: var(--skg-magenta-2);
  border: 1px solid rgba(241,136,176,0.4);
  border-radius: 999px;
  padding: 4px 10px;
  margin-bottom: 14px;
}
.process-list h3 { font-size: 17px; margin-bottom: 8px; }
.process-list p { font-size: 14px; color: var(--skg-silver); }
.process-list em { color: var(--skg-silver-dim); }

/* =========================================================
   B2B "trusted by" partner logos (veleprodaja.html) — same card
   language as .spec-card. Logos come from partners' own brand
   assets (varied aspect ratios/backgrounds), so each sits in a
   fixed-height box with object-fit: contain rather than being
   stretched to match.
   ========================================================= */
.partner-logos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .partner-logos-grid { grid-template-columns: 1fr; } }

.partner-logo-card {
  background: var(--skg-black-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.partner-logo-card img {
  height: 56px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
/* Wrap Department's asset is a wide, thin wordmark (~6.5:1) rather than a
   compact mark like the other two logos — a taller box keeps its visual
   weight in line with them instead of looking small at the same height. */
.partner-logo-card img.partner-logo-lg { height: 74px; }
.partner-logo-name { font-family: var(--font-head); font-size: 13px; font-weight: 700; color: var(--skg-silver); text-align: center; }

/* =========================================================
   Portfolio / before-after
   ========================================================= */
.ba-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 720px) { .ba-grid { grid-template-columns: 1fr; } }

.ba-card { }
.ba-slider {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  transition: border-color .25s;
}
.ba-slider:hover { border-color: rgba(241,136,176,0.4); }
.ba-img {
  position: absolute; inset: 0;
  /* z-index:0 (not auto) makes each side its own stacking context, so its
     .ba-tag (z-index:1) stays scoped inside it instead of escaping to the
     slider's root stacking order — without this, a z-indexed tag on
     .ba-img--before would render above the whole .ba-img--after layer
     regardless of the clip-path split, making the wrong label "win" no
     matter where the handle is dragged. */
  z-index: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--skg-silver-dim);
}
.ba-img span { font-family: var(--font-body); font-weight: 400; font-size: 11px; letter-spacing: normal; color: var(--skg-silver-dim); }
.ba-img--before { background: repeating-linear-gradient(135deg, #17171a 0 14px, #0f0f11 14px 28px); color: var(--skg-silver-dim); }
.ba-img--after {
  background: repeating-linear-gradient(135deg, rgba(241,136,176,0.22) 0 14px, rgba(20,20,22,0.9) 14px 28px);
  color: var(--skg-magenta-2);
  clip-path: inset(0 50% 0 0);
}
.ba-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 3;
}
.ba-handle {
  position: absolute;
  top: 50%;
  left: var(--ba-pos, 50%);
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--skg-white);
  color: var(--skg-black);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.ba-slider::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: var(--ba-pos, 50%);
  width: 2px;
  background: var(--skg-white);
  pointer-events: none;
  z-index: 2;
}
.ba-caption { margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--skg-silver); }

/* Real photo variant (once placeholders are replaced with actual before/after shots) */
.ba-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ba-img .ba-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(10,10,11,0.72);
  backdrop-filter: blur(6px);
  color: var(--skg-white);
}
.ba-img--after .ba-tag { color: var(--skg-magenta-2); }
/* "SA FOLIJOM" stays top-left (default), "BEZ FOLIJE" moves to top-right.
   Neither tag needs its own clip-path: each sits inside its own layer
   (.ba-img--after is clipped directly; .ba-img--before is unclipped but
   gets covered by the opaque .ba-img--after on top of it), so a tag
   simply disappears on its own once the drag handle/line passes its
   corner — no extra JS state to keep in sync. */
.ba-img--before .ba-tag { left: auto; right: 12px; }

/* =========================================================
   Video proof grid (portfolio replacement)
   ========================================================= */
.video-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1100px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .video-grid { grid-template-columns: 1fr; } }

.video-card { }
.video-frame {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  background: var(--skg-black-2);
  transition: border-color .25s;
}
.video-frame:hover { border-color: rgba(241,136,176,0.4); }
.video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--skg-black-2);
}
.video-toggle {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(10,10,11,0.72);
  border: 1px solid var(--border-soft-2);
  color: var(--skg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  z-index: 2;
  transition: background .2s, border-color .2s, transform .2s;
}
.video-toggle:hover { border-color: var(--skg-magenta-2); transform: scale(1.05); }
.video-toggle svg { width: 18px; height: 18px; }
.video-caption { margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--skg-silver); }

.video-el { cursor: zoom-in; }
.video-expand {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(10,10,11,0.72);
  border: 1px solid var(--border-soft-2);
  color: var(--skg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  z-index: 2;
  transition: background .2s, border-color .2s, transform .2s;
}
.video-expand:hover { border-color: var(--skg-magenta-2); transform: scale(1.05); }
.video-expand svg { width: 18px; height: 18px; }
/* Touch tap-target minimum (44px) on mobile/tablet — matches .video-toggle,
   which is already 44px; .video-expand was left at 40px. */
@media (max-width: 900px) {
  .video-expand { width: 44px; height: 44px; }
}

/* Colour palette: swatch photos open in a fullscreen lightbox on click.
   Placeholders (no photo) keep the same frame ratio so grid rows stay level. */
.palette-section .video-frame { cursor: zoom-in; }
.palette-section .img-placeholder { aspect-ratio: 16/10; border-radius: var(--radius); cursor: default; }
.palette-more {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}
.palette-more[hidden] { display: none; }

.image-lightbox-inner { width: min(1100px, 100%); }
.image-lightbox-el {
  width: auto;
  max-width: 100%;
  max-height: min(82vh, 900px);
  height: auto;
  object-fit: contain;
  border-radius: var(--radius);
  background: transparent;
}
.palette-lightbox-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(10,10,11,0.78);
  border: 1px solid var(--border-soft-2);
  color: var(--skg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  transition: background .2s, border-color .2s, transform .2s;
}
.palette-lightbox-nav:hover { border-color: var(--skg-magenta-2); transform: translateY(-50%) scale(1.05); }
.palette-lightbox-nav svg { width: 22px; height: 22px; }
.palette-lightbox-nav--prev { left: max(12px, env(safe-area-inset-left)); }
.palette-lightbox-nav--next { right: max(12px, env(safe-area-inset-right)); }
.palette-lightbox-nav[hidden] { display: none; }
@media (max-width: 600px) {
  .palette-lightbox-nav { width: 40px; height: 40px; }
  .image-lightbox-el { max-height: 70vh; }
}

/* Fullscreen video lightbox — opened by clicking a video or its
   expand button; single shared modal reused for all portfolio clips. */
.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .25s var(--ease-out);
}
.video-lightbox[hidden] { display: none; }
.video-lightbox.is-open { opacity: 1; }
.video-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6,6,7,0.92);
  backdrop-filter: blur(4px);
}
.video-lightbox-inner {
  position: relative;
  z-index: 1;
  width: min(920px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(0.96);
  transition: transform .25s var(--ease-out);
}
.video-lightbox.is-open .video-lightbox-inner { transform: scale(1); }
.video-lightbox-el {
  width: 100%;
  max-height: 80vh;
  border-radius: var(--radius);
  background: var(--skg-black-2);
  display: block;
}
.video-lightbox-caption { margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--skg-silver); }
.video-lightbox-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(10,10,11,0.85);
  border: 1px solid var(--border-soft-2);
  color: var(--skg-white);
  font-size: 13px;
  font-weight: 600;
  backdrop-filter: blur(6px);
  transition: background .2s, border-color .2s;
}
.video-lightbox-close:hover { border-color: var(--skg-magenta-2); }
.video-lightbox-close svg { width: 16px; height: 16px; flex-shrink: 0; }
@media (max-width: 480px) { .video-lightbox-close span { display: none; } }

body.video-lightbox-open { overflow: hidden; }

/* =========================================================
   Warranty
   ========================================================= */
.warranty-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 860px) { .warranty-grid { grid-template-columns: 1fr; } }
.warranty-list { display: flex; flex-direction: column; gap: 20px; }
.warranty-list li { display: flex; gap: 14px; align-items: flex-start; }
.warranty-list svg { width: 26px; height: 26px; flex-shrink: 0; margin-top: 2px; color: var(--skg-silver); }
.warranty-list strong { display: block; font-family: var(--font-head); font-size: 15px; margin-bottom: 4px; }
.warranty-list p { font-size: 14px; color: var(--skg-silver); }
.warranty-list em { color: var(--skg-silver-dim); }
.warranty-list a {
  color: var(--skg-magenta-2);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.warranty-list a:hover { color: var(--skg-white); }

/* =========================================================
   Legal / garantni uslovi document page
   ========================================================= */
.legal-page .site-header { position: sticky; top: 0; }
.legal-section { padding-top: 48px; }
.legal-doc {
  max-width: 760px;
  color: var(--skg-silver);
  font-size: 16px;
  line-height: 1.65;
}
.legal-doc h1 {
  color: var(--skg-white);
  font-size: clamp(28px, 4vw, 40px);
  margin-bottom: 12px;
}
.legal-updated { font-size: 13px; color: var(--skg-silver-dim); margin-bottom: 24px; }
.legal-doc h2 {
  color: var(--skg-white);
  font-size: clamp(18px, 2.4vw, 22px);
  margin: 36px 0 14px;
}
.legal-doc p { margin-bottom: 16px; }
.legal-doc a {
  color: var(--skg-magenta-2);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-doc a:hover { color: var(--skg-white); }
.legal-doc ol {
  list-style: decimal;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 16px;
}
.legal-doc ol li { padding-left: 4px; }
.legal-doc ul {
  list-style: disc;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 16px;
}
.legal-doc ul li { padding-left: 4px; }

/* Simple bordered table for legal content (cookie list etc.) — reuses
   .table-wrap for horizontal scroll on narrow viewports instead of the
   heavier card-stacking pattern .compare-table uses, since these tables
   only have plain text cells, no ok/no icons. */
.legal-doc .table-wrap { margin: 4px 0 20px; }
.legal-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; }
.legal-table th, .legal-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.legal-table thead th {
  font-family: var(--font-head);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--skg-silver);
  background: var(--skg-black-2);
  white-space: nowrap;
}
.legal-table tbody td:first-child { color: var(--skg-white); font-weight: 600; white-space: nowrap; }
.legal-table tbody tr:last-child td { border-bottom: none; }
.legal-doc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--border-soft);
}

/* =========================================================
   Pricing
   ========================================================= */
.pricing-note {
  max-width: 720px;
  margin: 0 0 40px;
  padding: 16px 20px;
  border-left: 2px solid var(--skg-magenta-2);
  background: rgba(241,136,176,0.06);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--skg-silver);
}
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 48px; }
.pricing-grid--single { grid-template-columns: 1fr; }
.pricing-grid--single .price-desc { min-height: 0; max-width: 62ch; }
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } }

.price-card {
  background: var(--skg-black-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition: border-color .25s, transform .25s;
}
.price-card:hover { border-color: rgba(241,136,176,0.45); transform: translateY(-4px); }
.price-card--featured {
  border-color: rgba(241,136,176,0.55);
  background: linear-gradient(160deg, rgba(241,136,176,0.12), var(--skg-black-2) 60%);
}
.price-badge {
  position: absolute;
  top: -12px; left: 26px;
  background: var(--skg-gradient);
  color: var(--skg-black);
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 5px 12px;
  border-radius: 999px;
}
.price-card h3 { font-size: 19px; }
.price-desc { font-size: 14px; color: var(--skg-silver); min-height: 44px; }
.price-tag { font-family: var(--font-head); font-size: 15px; color: var(--skg-silver); }
.price-tag strong { color: var(--skg-magenta-2); font-size: 17px; }
.price-card ul { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--skg-silver); margin-bottom: 6px; }
.price-card ul li::before { content: "— "; color: var(--skg-magenta-2); }

.calc-box {
  background: var(--skg-black-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 32px;
}
.calc-box h3 { font-size: 18px; margin-bottom: 6px; }
.calc-box > p { font-size: 14px; color: var(--skg-silver); margin-bottom: 22px; }
.calc-row { display: flex; flex-direction: column; gap: 20px; margin-bottom: 8px; }
.calc-step-group { display: flex; flex-direction: column; gap: 10px; }
.calc-step-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--skg-magenta-2);
}
.calc-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(241,136,176,0.16);
  color: var(--skg-magenta-2);
  font-size: 11px;
  flex-shrink: 0;
}
.calc-group { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  background: transparent;
  border: 1px solid var(--border-soft-2);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--skg-silver);
  transition: all .2s;
}
.chip:hover { border-color: var(--skg-magenta-2); color: var(--skg-white); }
.chip.is-active { background: var(--skg-gradient); border-color: transparent; color: var(--skg-black); }
/* Touch tap-target minimum (44px tall) — calculator/palette filter chips
   are otherwise ~40px tall (padding + line-height), a bit short for a thumb. */
@media (max-width: 900px) {
  .chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
}
.calc-result { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border-soft); }
.calc-result strong { font-family: var(--font-head); font-size: 15px; }
.calc-note { font-size: 13px; color: var(--skg-silver-dim); margin: 6px 0 16px; }

.calc-result-header { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.calc-result-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(241,136,176,0.16);
  color: var(--skg-magenta-2);
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.calc-result-title { font-family: var(--font-head); font-size: 16px; color: var(--skg-white); }
.calc-result-price { font-family: var(--font-head); font-size: 22px; color: var(--skg-silver); margin-bottom: 8px; }
.calc-result-price strong { font-size: 22px; color: var(--skg-magenta-2); }
.calc-result-scope { font-size: 14px; color: var(--skg-silver); margin-bottom: 4px; }
@media (max-width: 420px) {
  .calc-result-price { font-size: 18px; }
  .calc-result-price strong { font-size: 18px; }
}
/* CTA goes full-width on mobile so it never sits with awkward leftover
   space beside it inside the (full-width) calc box — desktop keeps the
   normal inline-sized button. */
@media (max-width: 640px) {
  .calc-result .btn { width: 100%; }
}

/* =========================================================
   FAQ
   ========================================================= */
.faq-list { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.faq-item {
  background: var(--skg-black-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 6px 22px;
  transition: border-color .25s;
}
.faq-item:hover { border-color: rgba(241,136,176,0.3); }
.faq-item[open] { border-color: rgba(241,136,176,0.4); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 28px 16px 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  position: relative;
  transition: color .2s;
}
.faq-item summary:hover { color: var(--skg-magenta-2); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--skg-magenta-2);
  transition: transform .25s;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item p { font-size: 14px; color: var(--skg-silver); padding-bottom: 18px; }
.faq-item em { color: var(--skg-silver-dim); }

/* =========================================================
   Final CTA
   ========================================================= */
.final-cta-section {
  text-align: center;
  background: radial-gradient(ellipse 60% 60% at 50% 0%, rgba(241,136,176,0.18), transparent 70%);
}
.final-cta-inner { display: flex; flex-direction: column; align-items: center; }
.final-cta-inner h2, .final-cta-inner .section-lead { max-width: 620px; margin-left: auto; margin-right: auto; }

/* =========================================================
   Contact
   ========================================================= */
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }

.contact-details { display: flex; flex-direction: column; gap: 16px; margin: 28px 0; }
.contact-details li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--skg-silver); }
.contact-details svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; color: var(--skg-magenta-2); }
.contact-details em { color: var(--skg-silver-dim); }

.contact-channels { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.channel-btn {
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid var(--border-soft-2);
}
.channel-btn--viber:hover { border-color: #7360F2; color: #7360F2; }
.channel-btn--whatsapp:hover { border-color: #25D366; color: #25D366; }
.channel-btn--instagram:hover { border-color: var(--skg-magenta-2); color: var(--skg-magenta-2); }
.channel-btn--email:hover { border-color: #EA4335; color: #EA4335; }

.map-embed { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border-soft); }
.map-embed iframe { width: 100%; height: 260px; border: 0; display: block; filter: grayscale(0.3) invert(0.92) contrast(0.9); }
.map-note { font-size: 12px; color: var(--skg-silver-dim); padding: 10px 14px; background: var(--skg-black-2); }

.contact-form-wrap { }
.callback-form {
  background: var(--skg-black-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.callback-form h3 { font-size: 19px; }
.form-sla { font-size: 13px; color: var(--skg-silver); margin-top: -8px; }
.form-sla em { color: var(--skg-silver-dim); }

/* Matches section[id]'s scroll-margin-top: when a mobile keyboard focuses
   a field and the browser auto-scrolls it into view, this keeps it clear
   of the fixed .site-header instead of landing right underneath it. */
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--skg-silver); scroll-margin-top: 88px; }
.field input,
.field select,
.field textarea {
  background: var(--skg-black-3);
  border: 1px solid var(--border-soft-2);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  font-size: 15px;
  font-family: var(--font-body);
  color: var(--skg-white);
  transition: border-color .2s;
}
.field textarea { resize: vertical; min-height: 90px; }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--skg-magenta-2); }
.field input:invalid[data-touched] { border-color: #ff5c5c; }
.field .field-optional { color: var(--skg-silver-dim); font-weight: 400; }
.field-error { color: #ff5c5c; font-size: 12px; min-height: 14px; }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

/* Preferred-contact-channel picker inside the wholesale form (Viber/WhatsApp/
   Telegram) — visually a chip row, functionally plain checkboxes so it keeps
   working without JS and degrades gracefully without :has() support. */
.checkbox-group { display: flex; gap: 10px; flex-wrap: wrap; }
.checkbox-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--border-soft-2);
  font-size: 13px;
  color: var(--skg-silver);
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.checkbox-pill:hover { border-color: var(--skg-magenta-2); color: var(--skg-white); }
.checkbox-pill input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--skg-magenta-2); }
.checkbox-pill:has(input:checked) { border-color: var(--skg-magenta-2); background: rgba(241,136,176,0.08); color: var(--skg-white); }

.form-status { font-size: 13px; min-height: 18px; color: var(--skg-magenta-2); }

/* =========================================================
   Sticky CTA
   ========================================================= */
.sticky-cta {
  position: fixed;
  z-index: 90;
  display: flex;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.sticky-cta.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* Yield when a section's own CTA (micro-cta / hero CTA row) is on screen —
   prevents the floating widget from sitting on top of that CTA's text
   (see initStickyCtaOverlapGuard in js/main.js). */
.sticky-cta.is-yielding { opacity: 0; pointer-events: none; }

.sticky-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-head);
}
.sticky-btn svg { width: 18px; height: 18px; }

/* mobile: bottom bar */
.sticky-cta {
  bottom: 0; left: 0; right: 0;
  background: rgba(10,10,11,0.92);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--border-soft-2);
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  gap: 6px;
}
.sticky-cta .sticky-btn { flex-direction: column; flex: 1; padding: 8px 4px; border-radius: 12px; color: var(--skg-silver); gap: 3px; }
.sticky-cta .sticky-btn--call:hover { color: var(--skg-white); }
.sticky-cta .sticky-btn--viber:hover { color: #7360F2; }
.sticky-cta .sticky-btn--whatsapp:hover { color: #25D366; }
.sticky-cta .sticky-btn--primary { background: var(--skg-gradient); color: var(--skg-black); flex: 1.4; }

@media (min-width: 1101px) {
  .sticky-cta {
    top: 50%;
    right: 24px;
    left: auto;
    bottom: auto;
    transform: translateY(-50%) translateX(20px);
    flex-direction: column;
    background: rgba(19,19,22,0.85);
    backdrop-filter: blur(14px);
    border: 1px solid var(--border-soft-2);
    border-top: 1px solid var(--border-soft-2);
    border-radius: 18px;
    padding: 10px;
    gap: 8px;
    width: 68px;
  }
  .sticky-cta.is-visible { transform: translateY(-50%) translateX(0); }
  .sticky-cta .sticky-btn { flex-direction: column; width: 48px; height: 48px; border-radius: 12px; background: rgba(255,255,255,0.05); }
  .sticky-cta .sticky-btn span { display: none; }
  .sticky-cta .sticky-btn--primary { width: auto; height: auto; background: var(--skg-gradient); writing-mode: vertical-rl; text-orientation: mixed; padding: 14px 8px; }
  .sticky-cta .sticky-btn--primary span { display: inline; font-size: 11px; }
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer { border-top: 1px solid var(--border-soft); padding: 56px 0 20px; }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 32px;
}
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-brand span { font-family: var(--font-head); font-weight: 800; letter-spacing: -0.01em; }
.footer-brand small { color: var(--skg-silver-dim); font-size: 12px; margin-left: 6px; }
.footer-nav { display: flex; gap: 22px; font-size: 14px; color: var(--skg-silver); flex-wrap: wrap; }
.footer-nav a, .footer-social a { position: relative; padding-bottom: 5px; transition: color .2s; }
.footer-nav a::after, .footer-social a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0;
  height: 6px;
  background: var(--skg-wave-sm) repeat-x left center / 20px 6px;
  transition: width .3s var(--ease-out);
}
.footer-nav a:hover, .footer-social a:hover { color: var(--skg-white); }
.footer-nav a:hover::after, .footer-social a:hover::after { width: 100%; }
.footer-social { display: flex; gap: 16px; font-size: 14px; color: var(--skg-silver); }
.footer-legal { border-top: 1px solid var(--border-soft); padding-top: 20px; font-size: 12px; color: var(--skg-silver-dim); }

@media (max-width: 720px) {
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 1100px) {
  body { padding-bottom: 78px; } /* room for mobile sticky bar (bottom bar is active below the 1101px nav breakpoint) */
}

/* =========================================================
   Cookie consent banner + settings modal
   ========================================================= */
.cookie-banner {
  display: none; /* toggled to flex by initCookieConsent() in js/main.js */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 400;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 18px 24px calc(18px + env(safe-area-inset-bottom));
  background: rgba(10, 10, 11, 0.96);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--border-soft-2);
  box-shadow: 0 -16px 40px -12px rgba(0, 0, 0, 0.6);
}
.cookie-banner__text {
  flex: 1 1 420px;
  max-width: 720px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--skg-silver);
}
.cookie-banner__text a {
  color: var(--skg-magenta-2);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(251, 118, 165, 0.4);
}
.cookie-banner__text a:hover { text-decoration-color: var(--skg-magenta-2); }
.cookie-banner__actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.cookie-banner__actions .btn { padding: 10px 18px; font-size: 13px; }

/* Keep clear of the floating contact widget: bottom bar on mobile/tablet
   (same 78px reserved above, see body padding-bottom rule) and vertical
   widget on the right on desktop (see .sticky-cta @min-width:1101px). */
@media (max-width: 1100px) {
  .cookie-banner {
    bottom: calc(78px + env(safe-area-inset-bottom));
    flex-direction: column;
    align-items: stretch;
  }
  .cookie-banner__actions { flex-direction: column; }
  .cookie-banner__actions .btn { width: 100%; }
}
@media (min-width: 1101px) {
  .cookie-banner { right: 116px; }
}

.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 401;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 6, 7, 0.85);
  backdrop-filter: blur(4px);
}
.cookie-modal[hidden] { display: none; }
.cookie-modal__box {
  width: min(440px, 100%);
  background: var(--skg-black-2);
  border: 1px solid var(--border-soft-2);
  border-radius: var(--radius);
  padding: 28px;
}
.cookie-modal__box h3 {
  font-family: var(--font-head);
  font-size: 20px;
  margin-bottom: 18px;
}
.cookie-modal__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--skg-silver);
  padding: 14px 0;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
}
.cookie-modal__row:last-of-type { border-bottom: none; }
.cookie-modal__row input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--skg-magenta-2);
  flex-shrink: 0;
}
.cookie-modal__row input:disabled { opacity: 0.6; cursor: not-allowed; }
.cookie-modal__actions { display: flex; gap: 10px; margin-top: 20px; }
.cookie-modal__actions .btn { flex: 1; }