/* ============================================
   WebRešenje — styles.css
   Tokens: Navy #09243F / Off-white #EDE9E2 / Orange #F86428
           Slate #5A6671 / Gray #B6AAA6
   Type: Space Grotesk (display) + Inter (body)
   Orange is reserved for CTAs, numerals, active states and
   key highlights only — everything else leans on navy, whitespace,
   type and motion to carry the premium feel.
   ============================================ */

:root {
  /* Color */
  --navy: #09243F;
  --navy-accent: #163A57;   /* lighter tint of navy — secondary accents, eyebrows, hover */
  --slate: #5A6671;
  --off-white: #EDE9E2;
  --off-white-dim: #E4DED2;
  --gray: #B6AAA6;
  --orange: #F86428;
  --orange-dim: #d9531d;
  --line: rgba(9, 36, 63, 0.10);
  --line-strong: rgba(9, 36, 63, 0.18);
  --shadow: 0 1px 2px rgba(9,36,63,0.04), 0 12px 32px -12px rgba(9,36,63,0.18);
  --shadow-lg: 0 24px 60px -24px rgba(9,36,63,0.30);

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;

  --section-pad: clamp(4rem, 3.25rem + 4vw, 8rem);
  --container-max: 1280px;

  /* Type */
  --font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;

  --fs-h1: clamp(2.25rem, 1.7rem + 2.6vw, 4rem);
  --fs-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --fs-h3: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: clamp(0.95rem, 0.92rem + 0.15vw, 1.0625rem);
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 200ms;
  --dur-med: 400ms;
  --header-h: 140px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { height: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--navy);
  background: var(--off-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: var(--off-white);
  padding: var(--sp-3) var(--sp-6);
  z-index: 200;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 1rem + 2vw, 2.5rem);
}
.container--narrow { max-width: 820px; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-accent);
  margin-bottom: var(--sp-3);
}

.section-head { max-width: 640px; margin-bottom: var(--sp-16); }
.section-head h2 { font-size: var(--fs-h2); }
.section-head--follow { margin-top: var(--sp-24); margin-bottom: var(--sp-8); }
.section-head--center { text-align: center; margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-weight: 600;
  font-size: var(--fs-small);
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn-primary {
  background: var(--navy);
  color: var(--off-white);
  box-shadow: var(--shadow);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); background: var(--navy-accent); }
.btn-ghost {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--line-strong);
}
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--navy); background: rgba(9,36,63,0.03); }
.btn:active { transform: translateY(0) scale(0.97); }
.btn-lg { padding: 1.05rem 2.2rem; font-size: 1rem; }
.btn-sm { padding: 0.6rem 1.25rem; }

/* ---------- Contour signature motif ---------- */
.contour { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.contour svg { width: 100%; height: 100%; }
.contour path, .contour circle { fill: none; stroke: var(--gray); stroke-width: 1.4; opacity: 0.35; }
.contour--hero { opacity: 0.9; }
.contour--services { top: auto; bottom: 0; height: 60%; }
.contour--cta path { stroke: var(--gray); opacity: 0.28; }
.contour--about { position: absolute; inset: 0; }
.contour--about circle { stroke: var(--gray); opacity: 0.5; }

/* ---------- Ambient motion ---------- */
@keyframes heroMesh {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-2%, 2%) scale(1.06); }
}
@keyframes contourDrift {
  0% { transform: translateX(-10px); }
  100% { transform: translateX(10px); }
}
@keyframes ringSpin {
  to { transform: rotate(360deg); }
}
@keyframes floatFrame {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}
@keyframes chipFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}
@keyframes chipIn {
  from { opacity: 0; translate: 0 10px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes dashDraw {
  to { stroke-dashoffset: 0; }
}
@keyframes dotPulse {
  0% { transform: scale(0.8); opacity: 0.85; }
  70%, 100% { transform: scale(2.4); opacity: 0; }
}
@keyframes monogramBreathe {
  0%, 100% { scale: 1; }
  50% { scale: 1.03; }
}

.contour--hero svg { animation: contourDrift 34s ease-in-out infinite alternate; }
.contour--cta svg { animation: contourDrift 40s ease-in-out infinite alternate; }
.contour--services svg { animation: contourDrift 46s ease-in-out infinite alternate; }
.contour--about svg { animation: ringSpin 80s linear infinite; transform-origin: 50% 50%; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: var(--campaign-bar-offset, 0px);
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), backdrop-filter var(--dur-med) var(--ease-out), top var(--dur-med) var(--ease-out);
}
/* Pushed down to make room for .campaign-bar (js/campaign-promo.js sets the offset) */
body.campaign-bar-visible main { margin-top: var(--campaign-bar-offset, 0px); transition: margin-top var(--dur-med) var(--ease-out); }
.site-header.is-scrolled {
  background: rgba(237, 233, 226, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 var(--line);
}
/* backdrop-filter makes an element the containing block for its own
   position:fixed descendants (same rule as transform/filter) — while the
   header is scrolled AND the mobile nav drawer is open, that silently
   collapses .main-nav's bottom:0 stretch down to the header's own 140px
   box instead of the viewport, hiding the drawer behind the page. Suspend
   the filter for that one state so the drawer keeps using the viewport. */
.site-header:has(.main-nav.is-open) {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); }

.logo { display: flex; align-items: center; gap: var(--sp-2); }
.logo img { height: 120px; width: auto; }

.main-nav ul { display: flex; align-items: center; gap: var(--sp-8); }
.main-nav a, .nav-link { font-size: var(--fs-small); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; position: relative; padding: var(--sp-2) 0; white-space: nowrap; }
.main-nav a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1.5px; background: var(--orange);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-out);
}
.main-nav a:hover::after { transform: scaleX(1); }
.main-nav a[aria-current="page"],
.dropdown-menu a[aria-current="page"] { color: var(--navy-accent); font-weight: 600; }
.main-nav > ul > li > a[aria-current="page"]::after { transform: scaleX(1); }
.chevron { transition: transform var(--dur-fast) var(--ease-out); }

.has-dropdown { position: relative; }
.dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  padding: var(--sp-2);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
}
.dropdown-menu.is-open {
  opacity: 1; visibility: visible;
}
/* Hover/focus-within open behavior is desktop-only. On mobile the toggle
   button keeps :focus-within active after a tap (same as a real tap on
   touchscreens), and since this transform has equal specificity to the
   mobile override below, it would win on source order and re-apply the
   desktop absolute-centering transform, breaking the static mobile layout. */
@media (min-width: 1301px) {
  .has-dropdown:hover .dropdown-menu,
  .has-dropdown:focus-within .dropdown-menu,
  .dropdown-menu.is-open {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
  }
}
.has-dropdown:hover .chevron,
.dropdown-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.dropdown-menu li a { display: block; padding: var(--sp-3) var(--sp-4); border-radius: 8px; font-size: var(--fs-small); }
.dropdown-menu li a:hover { background: var(--off-white-dim); }
.dropdown-menu a::after { display: none; }

.header-actions { display: flex; align-items: center; gap: var(--sp-4); }

/* ---------- Language switch ---------- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  gap: 2px;
  background: rgba(9, 36, 63, 0.05);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  flex-shrink: 0;
}
.lang-switch__option {
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1;
  color: var(--slate);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.lang-switch__option:hover { color: var(--navy); }
.lang-switch__option.is-active {
  background: var(--navy);
  color: var(--off-white);
  box-shadow: var(--shadow);
}
.lang-switch__option.is-active:hover { color: var(--off-white); }
@media (max-width: 1300px) {
  .lang-switch__option { padding: 0.4rem 0.65rem; font-size: 0.8rem; }
}

.nav-toggle { display: none; flex-direction: column; gap: 5px; width: 32px; height: 32px; align-items: center; justify-content: center; }
.nav-toggle span { width: 20px; height: 2px; background: var(--navy); transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Contact modal ---------- */
.contact-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: var(--sp-6); }
.contact-modal[hidden] { display: none; }
.contact-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(9, 36, 63, 0.45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity var(--dur-med) var(--ease-out);
}
.contact-modal.is-open .contact-modal__backdrop { opacity: 1; }
.contact-modal__panel {
  position: relative; z-index: 1;
  background: #fff; border-radius: 24px; box-shadow: var(--shadow-lg);
  padding: var(--sp-12) var(--sp-8) var(--sp-8);
  max-width: 440px; width: 100%;
  opacity: 0; transform: translateY(16px) scale(0.98);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.contact-modal.is-open .contact-modal__panel { opacity: 1; transform: translateY(0) scale(1); }
.contact-modal__close {
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; line-height: 1; color: var(--slate);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.contact-modal__close:hover { background: var(--off-white-dim); color: var(--navy); }
.contact-modal__sub { color: var(--slate); margin: var(--sp-3) 0 var(--sp-8); }
.contact-modal__options { display: flex; flex-direction: column; gap: var(--sp-4); }
.contact-option {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line); border-radius: 16px;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.contact-option:hover { transform: translateY(-3px); border-color: var(--navy-accent); box-shadow: var(--shadow); }
.contact-option__icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--off-white-dim); color: var(--navy-accent); }
.contact-option__icon svg { width: 20px; height: 20px; }
.contact-option strong { display: block; font-family: var(--font-display); font-size: var(--fs-body); }
.contact-option small { display: block; color: var(--slate); font-size: var(--fs-small); margin-top: 2px; }

/* ---------- Floating contact button ---------- */
.contact-fab {
  position: fixed; right: var(--sp-6); bottom: var(--sp-6); z-index: 150;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--navy); color: var(--off-white);
  padding: 0.9rem 1.3rem; border-radius: 999px;
  box-shadow: var(--shadow-lg);
  font-weight: 600; font-size: var(--fs-small);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
  animation: fabIn 600ms var(--ease-out) 1.2s both;
}
.contact-fab:hover { transform: translateY(-3px); box-shadow: 0 20px 50px -18px rgba(9, 36, 63, 0.4); background: var(--navy-accent); }
.contact-fab svg { width: 18px; height: 18px; flex-shrink: 0; }
@keyframes fabIn { from { opacity: 0; transform: translateY(16px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 640px) {
  .contact-fab { right: var(--sp-4); bottom: var(--sp-4); padding: 0.8rem; }
  .contact-fab span { display: none; }
}

/* ---------- Floating Partners tab (upper-right edge, distinct from the
   bottom-corner contact/chat FABs) — a quiet edge tab, not another bubble.
   Collapsed to its icon by default, slides out to reveal the label on
   hover/focus; on touch it stays as a small always-legible pill instead,
   since there's no hover to trigger the reveal. ---------- */
.partners-fab {
  position: fixed;
  top: calc(var(--header-h) + clamp(1.25rem, 1rem + 1.5vw, 2.5rem));
  right: 0;
  z-index: 148;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(9, 36, 63, 0.88);
  color: var(--off-white);
  padding: 0.8rem 1.15rem 0.8rem 0.95rem;
  border-radius: 999px 0 0 999px;
  border: 1px solid rgba(237, 233, 226, 0.16);
  border-right: none;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  opacity: 0;
  transform: translateX(calc(100% - 50px));
  /* Only opacity is animated on entrance — if the entrance animation also
     drove `transform`, its fill-mode:both hold would keep winning the
     cascade over the plain :hover rule below for that same property,
     silently breaking the hover slide-out. */
  transition: transform var(--dur-med) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
  animation: partnersFabFadeIn 700ms var(--ease-out) 1.6s forwards;
}
.partners-fab:hover, .partners-fab:focus-visible {
  transform: translateX(0);
  background: var(--navy);
}
.partners-fab__icon { width: 19px; height: 19px; flex-shrink: 0; color: var(--orange); }
.partners-fab__label { font-size: var(--fs-small); font-weight: 600; white-space: nowrap; }
@keyframes partnersFabFadeIn {
  to { opacity: 1; }
}

@media (max-width: 900px) {
  .partners-fab {
    top: calc(var(--header-h) + 0.75rem);
    right: var(--sp-4);
    transform: none;
    border-radius: 999px;
    border-right: 1px solid rgba(237, 233, 226, 0.16);
    padding: 0.65rem 1rem;
    animation: partnersFabFadeIn 600ms var(--ease-out) 1.4s forwards;
  }
  .partners-fab:hover { transform: translateY(-2px); }
  .partners-fab__label { font-size: 0.8rem; }
}
@media (max-width: 480px) {
  .partners-fab__label { display: none; }
  .partners-fab { padding: 0.65rem; }
}

/* ---------- Breadcrumb ---------- */
/* Sits between the fixed header and the hero on every deep page. It carries
   its own header-clearing top padding so the hero directly below it doesn't
   need to (see the two overrides at the end of this block) — otherwise the
   two paddings would stack and push the hero title too far down the page. */
.breadcrumb-nav { position: relative; z-index: 1; padding-top: calc(var(--header-h) + var(--sp-4)); padding-bottom: var(--sp-3); }
.breadcrumb-nav__inner { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); font-size: 0.8125rem; color: var(--slate); }
.breadcrumb-nav__inner a { color: var(--slate); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.breadcrumb-nav__inner a:hover { color: var(--navy); }
.breadcrumb-nav__inner span[aria-current="page"] { color: var(--navy); font-weight: 500; }
.breadcrumb-nav__sep { color: var(--gray); }
.breadcrumb-nav + .hero { padding-top: clamp(2rem, 4vw, 4rem); }
.breadcrumb-nav + .legal-hero { padding-top: var(--sp-8); }
@media (max-width: 640px) {
  .breadcrumb-nav__inner { font-size: 0.75rem; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(2rem, 4vw, 4rem));
  padding-bottom: var(--section-pad);
  overflow: hidden;
  background: linear-gradient(180deg, #F1EEE8 0%, var(--off-white) 70%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: -15% -10%;
  background:
    radial-gradient(42% 42% at 18% 22%, rgba(182,170,166,0.28), transparent 60%),
    radial-gradient(38% 38% at 86% 12%, rgba(248,100,40,0.14), transparent 60%),
    radial-gradient(46% 46% at 62% 92%, rgba(9,36,63,0.12), transparent 60%);
  animation: heroMesh 24s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.hero-title { font-size: var(--fs-h1); margin-bottom: var(--sp-6); }
.hero-sub { font-size: var(--fs-lead); color: var(--slate); max-width: 46ch; margin-bottom: var(--sp-8); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

.google-rating {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 0.6rem 1.1rem 0.6rem 0.7rem; box-shadow: var(--shadow);
  margin-top: var(--sp-6);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.google-rating:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--navy-accent); }
.google-rating__icon { flex-shrink: 0; width: 20px; height: 20px; }
.google-rating__score { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--navy); }
.google-rating__stars { display: flex; gap: 1px; }
.google-rating__stars svg { width: 14px; height: 14px; fill: var(--orange); }
.google-rating__text { font-size: var(--fs-small); color: var(--slate); font-weight: 500; }

.pricing-hero-inner { position: relative; z-index: 1; text-align: center; max-width: 720px; margin-inline: auto; }
.pricing-hero-inner .hero-sub { margin-inline: auto; }
.hero-note { font-size: var(--fs-small); color: var(--slate); max-width: 52ch; margin: var(--sp-6) auto 0; }
.hero-actions--center { justify-content: center; }

.quiet-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--sp-6);
  font-size: var(--fs-small); font-weight: 500; color: var(--slate);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.quiet-link:hover { color: var(--navy-accent); border-color: var(--navy-accent); transform: translateX(2px); }

.hero-visual { position: relative; }
.browser-frame {
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  rotate: 1.2deg;
  animation: floatFrame 7s ease-in-out infinite;
  animation-delay: 900ms;
}
.browser-bar { display: flex; gap: 6px; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); }
.browser-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--off-white-dim); }
.browser-bar span:nth-child(1) { background: #F8642833; }
.browser-body { position: relative; padding: var(--sp-8) var(--sp-6) var(--sp-12); min-height: 260px; }
.chart-mock { width: 100%; height: 140px; }
.chart-line {
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
}
.hero-visual.is-visible .chart-line { animation: dashDraw 1.4s var(--ease-out) 500ms forwards; }
.chart-dot-ping {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  opacity: 0;
}
.chart-dot-core { opacity: 0; transition: opacity 300ms ease-out 1.8s; }
.hero-visual.is-visible .chart-dot-core { opacity: 1; }
.hero-visual.is-visible .chart-dot-ping { animation: dotPulse 2.2s ease-out 1.9s infinite; }

.metric-chip {
  position: absolute;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  border-radius: 10px;
  padding: var(--sp-2) var(--sp-3);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--slate);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
}
.metric-chip strong { font-family: var(--font-display); font-size: 1.05rem; color: var(--navy); }
.chip-1 { top: 8%; left: 4%; }
.chip-2 { top: 40%; right: 2%; }
.chip-3 { bottom: 6%; left: 18%; }

.hero-visual.is-visible .metric-chip {
  animation: chipIn 640ms var(--ease-out) both, chipFloat 5.5s ease-in-out infinite;
}
.hero-visual.is-visible .chip-1 { animation-delay: 500ms, 1.9s; }
.hero-visual.is-visible .chip-2 { animation-delay: 640ms, 2.6s; }
.hero-visual.is-visible .chip-3 { animation-delay: 780ms, 2.3s; }

/* ---------- Wireframe hero mockup ---------- */
.wireframe-mock { display: flex; flex-direction: column; gap: var(--sp-6); }
.wf-item { opacity: 0; }
.hero-visual.is-visible .wf-item { animation: chipIn 600ms var(--ease-out) both; }
.hero-visual.is-visible .wf-nav { animation-delay: 450ms; }
.hero-visual.is-visible .wf-hero-block { animation-delay: 600ms; }
.hero-visual.is-visible .wf-cards { animation-delay: 900ms; }

.wf-nav { display: flex; align-items: center; gap: 6px; }
.wf-nav span { width: 30px; height: 8px; border-radius: 4px; background: var(--off-white-dim); }
.wf-nav span:first-child { width: 18px; background: var(--orange); opacity: 0.55; }

.wf-hero-block { display: flex; flex-direction: column; gap: 12px; }
.wf-line { display: block; height: 11px; border-radius: 6px; background: var(--off-white-dim); }
.wf-line--lg { width: 80%; height: 18px; }
.wf-line--md { width: 56%; }
.wf-btn { width: 104px; height: 30px; border-radius: 999px; background: var(--orange); opacity: 0.85; margin-top: 4px; }

.wf-cards { display: flex; gap: 10px; }
.wf-card { flex: none; width: 110px; height: 56px; border-radius: 10px; background: var(--off-white-dim); border: 1px solid var(--line); }
.chip-3--right { left: auto; right: 4%; }

/* ---------- Trust ---------- */
.trust { padding-block: clamp(3rem, 2.5vw + 2rem, 4.5rem); border-bottom: 1px solid var(--line); }
.trust-line { font-weight: 600; font-size: var(--fs-lead); }
.trust-sub { color: var(--slate); margin-bottom: var(--sp-8); }
.trust-logos { display: flex; flex-wrap: wrap; gap: var(--sp-8) var(--sp-12); }
.trust-logos li {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--slate);
  opacity: 0.65;
  letter-spacing: 0.01em;
  position: relative;
  padding-left: 22px;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.trust-logos li:hover { opacity: 1; transform: translateY(-2px); }
.trust-logos li::before {
  content: "";
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--navy-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1.2 14.6l-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1.2 14.6l-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- Value proposition (asymmetric staircase) ---------- */
.value-prop { position: relative; overflow: hidden; padding-block: var(--section-pad); }
.value-prop::before {
  content: "";
  position: absolute; top: 6%; right: -6%; z-index: 0;
  width: clamp(280px, 30vw, 480px); height: clamp(280px, 30vw, 480px);
  background: radial-gradient(circle, rgba(248,100,40,0.10), transparent 70%);
  pointer-events: none;
}
.value-prop .container { position: relative; z-index: 1; }
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); }
.value-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: var(--sp-8);
  box-shadow: var(--shadow);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.value-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.value-card--1 { margin-top: 0; }
.value-card--2 { margin-top: clamp(0px, 3vw, 2.25rem); }
.value-card--3 { margin-top: clamp(0px, 6vw, 4.5rem); }
.value-index { font-family: var(--font-display); font-size: 0.8rem; font-weight: 600; color: var(--orange); letter-spacing: 0.08em; display: inline-block; transition: transform var(--dur-fast) var(--ease-out); }
.value-card:hover .value-index { transform: scale(1.12); }
.value-card h3 { font-size: var(--fs-h3); margin: var(--sp-3) 0 var(--sp-3); }
.value-card p { color: var(--slate); }

/* ---------- Feature grid ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8); }
.feature-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: var(--sp-8);
  box-shadow: var(--shadow);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.feature-icon { width: 30px; height: 30px; color: var(--navy-accent); margin-bottom: var(--sp-4); transition: transform var(--dur-fast) var(--ease-out); }
.feature-card:hover .feature-icon { transform: translateY(-2px); }
.feature-card h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-2); }
.feature-card p { color: var(--slate); margin-bottom: var(--sp-6); }
/* margin-top: auto pins the button to the card's bottom edge regardless of
   how many lines the description above it wraps to — since grid rows already
   stretch cards to equal height, this keeps every button in a row aligned. */
.feature-card .btn { margin-top: auto; width: 100%; white-space: normal; }

@media (max-width: 1024px) { .feature-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 640px) { .feature-grid { grid-template-columns: minmax(0, 1fr); } }
.feature-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* .feature-grid--4 has the same specificity as the .feature-grid media-query
   rules above and is declared after them, so without its own breakpoint
   overrides here it would win the cascade at every width and stay 4-wide
   even on mobile — mirrors the .pricing-grid--4 pattern below. */
@media (max-width: 1024px) { .feature-grid--4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 640px) { .feature-grid--4 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Audience fork (homepage B2B/B2C self-selection) ---------- */
.audience-fork-grid { display: grid; grid-template-columns: 1.08fr 1fr; gap: var(--sp-6); }
.audience-card {
  position: relative; overflow: hidden; display: block;
  border-radius: 22px; padding: var(--sp-10) var(--sp-8);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.audience-card:hover { transform: translateY(-8px); }
/* Mesh-style glow, same layered-light technique used on the chat panel header —
   keeps the two flagship cards visually tied to the rest of the premium system
   instead of reading as two flat, unrelated color blocks. */
.audience-card::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.audience-card--b2b::before {
  background:
    radial-gradient(115% 140% at 10% -25%, rgba(248,100,40,0.30), transparent 55%),
    radial-gradient(90% 120% at 105% 130%, rgba(255,255,255,0.08), transparent 60%);
}
.audience-card--b2c::before {
  background: radial-gradient(95% 130% at 100% -20%, rgba(9,36,63,0.05), transparent 62%);
}
/* Oversized ghost numeral — editorial "pick your path" marker, echoes the
   .value-index numbering already used lower on this page, scaled up since
   these two cards carry the whole section rather than sharing it with a third. */
.audience-card__index {
  position: absolute; top: var(--sp-2); right: var(--sp-6); z-index: 0;
  font-family: var(--font-display); font-weight: 700; line-height: 1;
  font-size: clamp(4.5rem, 3.2rem + 6vw, 8rem);
  pointer-events: none; user-select: none;
  transition: transform var(--dur-med) var(--ease-out);
}
.audience-card:hover .audience-card__index { transform: translateY(-4px) scale(1.04); }
.audience-card--b2b .audience-card__index { color: rgba(248,100,40,0.18); }
.audience-card--b2c .audience-card__index { color: rgba(9,36,63,0.055); }
.audience-card--b2b {
  background: linear-gradient(155deg, var(--navy) 0%, #0a1f36 100%); color: var(--off-white);
  box-shadow: var(--shadow);
}
.audience-card--b2b:hover { box-shadow: 0 28px 60px -20px rgba(9,36,63,0.5); }
.audience-card--b2c {
  background: #fff; color: var(--navy); border: 1px solid var(--line);
  margin-top: clamp(0px, 3vw, 2.75rem); box-shadow: var(--shadow);
}
.audience-card--b2c:hover { box-shadow: var(--shadow-lg); }
.audience-card__eyebrow {
  position: relative; z-index: 1;
  display: inline-block; font-family: var(--font-display); font-size: var(--fs-eyebrow);
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--sp-3);
}
.audience-card--b2b .audience-card__eyebrow { color: var(--orange); }
.audience-card--b2c .audience-card__eyebrow { color: var(--navy-accent); }
.audience-card h3 { position: relative; z-index: 1; font-size: var(--fs-h3); margin-bottom: var(--sp-3); }
.audience-card p { position: relative; z-index: 1; max-width: 32ch; }
.audience-card--b2c p { color: var(--slate); }
.audience-card--b2b p { color: rgba(237,233,226,0.8); }
.audience-card__cta {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 0.4rem; margin-top: var(--sp-6);
  font-family: var(--font-display); font-weight: 600; font-size: 0.9rem;
  transition: gap var(--dur-fast) var(--ease-out);
}
.audience-card--b2b .audience-card__cta { color: var(--orange); }
.audience-card--b2c .audience-card__cta { color: var(--navy-accent); }
.audience-card:hover .audience-card__cta { gap: 0.65rem; }
@media (max-width: 768px) {
  .audience-fork-grid { grid-template-columns: 1fr; }
  .audience-card--b2c { margin-top: 0; }
  .audience-card__index { font-size: clamp(3.5rem, 2.8rem + 7vw, 5.5rem); }
}

/* ---------- Pricing cards ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); align-items: start; }
.pricing-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: var(--sp-8);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.pricing-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.pricing-card--featured {
  border-color: var(--orange);
  box-shadow: var(--shadow-lg);
  margin-top: clamp(-1.5rem, -1rem, 0px);
  padding-block: calc(var(--sp-8) + var(--sp-2));
}
.pricing-card--featured:hover { transform: translateY(-8px); }
.pricing-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--orange); color: var(--navy);
  font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 16px; border-radius: 999px; box-shadow: var(--shadow);
  white-space: nowrap;
}
.pricing-name { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; }
.pricing-price { display: flex; align-items: baseline; gap: 6px; margin: var(--sp-3) 0 var(--sp-2); }
.pricing-price .amount { font-family: var(--font-display); font-size: clamp(2.25rem, 1.9rem + 1.4vw, 3rem); font-weight: 600; }
.pricing-price .period { font-size: var(--fs-small); color: var(--slate); }
.pricing-best-for { color: var(--slate); font-size: var(--fs-small); margin-bottom: var(--sp-6); padding-bottom: var(--sp-6); border-bottom: 1px solid var(--line); }
.pricing-features { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-8); flex-grow: 1; }
.pricing-features li { position: relative; padding-left: var(--sp-6); font-size: var(--fs-small); color: var(--slate); }
.pricing-features li::before {
  content: "";
  position: absolute; left: 0; top: 0.2em;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--navy-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2l-3.5-3.6L4 14.1l5 5 11-11-1.5-1.5z' fill='black'/%3E%3C/svg%3E") center/50% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2l-3.5-3.6L4 14.1l5 5 11-11-1.5-1.5z' fill='black'/%3E%3C/svg%3E") center/50% no-repeat;
}
.pricing-card .btn { width: 100%; }

.pricing-note { text-align: center; max-width: 60ch; margin: var(--sp-8) auto 0; color: var(--slate); font-size: var(--fs-small); }
.pricing-note a, .pricing-note button { color: var(--navy-accent); font-weight: 600; }
.pricing-note button { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.pricing-grid--4 { grid-template-columns: repeat(4, 1fr); }
.hosting-addon { max-width: 420px; margin-inline: auto; }

@media (max-width: 1024px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .pricing-card--featured { margin-top: 0; }
  .pricing-grid--4 { grid-template-columns: repeat(2, 1fr); max-width: none; }
}
@media (max-width: 640px) {
  .pricing-grid--4 { grid-template-columns: 1fr; }
}

/* ---------- Comparison table ---------- */
.compare-table-scroll-hint { display: none; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--slate); margin-bottom: var(--sp-4); }
.compare-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow); -webkit-overflow-scrolling: touch; }
.compare-table { width: 100%; min-width: 640px; border-collapse: collapse; }
.compare-table th, .compare-table td { padding: var(--sp-4) var(--sp-6); text-align: left; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.compare-table thead th { font-family: var(--font-display); font-size: var(--fs-body); padding-top: var(--sp-6); }
.compare-table thead th:first-child,
.compare-table tbody th {
  font-weight: 500; color: var(--slate);
  position: sticky; left: 0; z-index: 1; background: #fff;
  width: 150px; max-width: 150px;
}
.compare-table thead th:first-child { z-index: 2; }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table .col-featured { background: rgba(248, 100, 40, 0.06); }
.compare-table .yes { color: var(--navy-accent); font-weight: 600; }
.compare-table .no { color: var(--slate); opacity: 0.5; }

@media (max-width: 640px) {
  .compare-table-scroll-hint { display: flex; }
  .compare-table { min-width: 480px; }
  .compare-table th, .compare-table td { padding: var(--sp-3) var(--sp-4); font-size: 0.78rem; }
  .compare-table thead th { font-size: 0.95rem; }
  .compare-table thead th:first-child,
  .compare-table tbody th { width: 96px; max-width: 96px; font-size: 0.72rem; }
}

/* ---------- FAQ accordion ---------- */
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item h3 { font-size: 1em; }
.faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6);
  padding: var(--sp-6) 0; text-align: left;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); color: var(--navy);
}
.faq-question:hover { color: var(--navy-accent); }
.faq-icon { flex-shrink: 0; font-size: 1.4rem; line-height: 1; color: var(--orange); transition: transform var(--dur-fast) var(--ease-out); }
.faq-item.is-open .faq-icon { transform: rotate(45deg); }
.faq-answer-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-med) var(--ease-out); }
.faq-item.is-open .faq-answer-wrap { grid-template-rows: 1fr; }
.faq-answer { overflow: hidden; }
.faq-answer p { padding-bottom: var(--sp-6); color: var(--slate); max-width: 62ch; }

/* ---------- Contact form ---------- */
.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: var(--sp-8);
  box-shadow: var(--shadow);
  max-width: 640px;
  margin-inline: auto;
}
.contact-form { display: grid; gap: var(--sp-6); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
/* min-width: 0 lets a .form-field shrink below its content's intrinsic width
   (e.g. a <select> with long option text) instead of forcing its .form-row
   grid track — and everything after it — wider than the form itself. */
.form-field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.form-field label { font-size: var(--fs-small); font-weight: 600; color: var(--navy); }
.form-field input,
.form-field select,
.form-field textarea {
  font: inherit;
  font-size: var(--fs-body);
  color: var(--navy);
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--line-strong);
  border-radius: 12px;
  background: #fff;
  width: 100%;
  min-width: 0;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--navy-accent);
  box-shadow: 0 0 0 4px rgba(22, 58, 87, 0.10);
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-privacy { font-size: var(--fs-small); color: var(--slate); margin: 0; }
.form-status { font-size: var(--fs-small); color: var(--navy-accent); min-height: 1.2em; margin: 0; }
.contact-form .btn { justify-self: start; }

@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
  .contact-form .btn { width: 100%; }
}

/* ---------- Company detail list ---------- */
.detail-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: var(--sp-8);
  box-shadow: var(--shadow);
}
.detail-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6) var(--sp-8); margin: 0; }
.detail-item dt { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy-accent); margin-bottom: 4px; }
.detail-item dd { font-size: var(--fs-body); color: var(--navy); margin: 0; }
.detail-item dd a { color: var(--navy); border-bottom: 1px solid var(--line-strong); transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.detail-item dd a:hover { color: var(--navy-accent); border-color: var(--navy-accent); }

@media (max-width: 640px) {
  .detail-list { grid-template-columns: 1fr; }
}

.detail-columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6) var(--sp-8); }
.detail-columns .detail-list { display: flex; flex-direction: column; gap: var(--sp-6); }
@media (max-width: 640px) {
  .detail-columns { grid-template-columns: 1fr; }
}

/* display:none (not off-screen positioning) is deliberate: Chrome's autofill
   explicitly skips display:none fields, but still fills off-screen-positioned
   ones — which was silently populating this honeypot with the user's own name
   on pages where the English field labels matched Chrome's autofill heuristics,
   making send-lead.php treat every real submission as spam. */
.hp-field { display: none; }

.selected-package-label {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--sp-4);
  padding: 0.4rem 0.9rem;
  background: var(--off-white-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--navy-accent);
}
.selected-package-label[hidden] { display: none; }

/* ---------- Services (editorial numbered rows) ---------- */
.services { position: relative; padding-block: var(--section-pad); background: var(--off-white-dim); overflow: hidden; }
.services .container { position: relative; z-index: 1; }
.service-row {
  display: grid;
  grid-template-columns: clamp(90px, 10vw, 160px) 1fr;
  gap: var(--sp-8);
  padding-block: var(--sp-16);
  border-top: 1px solid var(--line-strong);
  align-items: start;
}
.service-row:last-child { border-bottom: 1px solid var(--line-strong); }
.service-num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 2rem + 2vw, 4.5rem);
  font-weight: 600;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--line-strong);
  transition: -webkit-text-stroke var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out);
  line-height: 1;
}
.service-row:hover .service-num { -webkit-text-stroke: 1.5px var(--orange); }
.service-body h3 { font-size: var(--fs-h2); margin-bottom: var(--sp-2); }
.service-lead { font-size: var(--fs-lead); color: var(--navy-accent); font-weight: 500; margin-bottom: var(--sp-6); }
.service-bullets { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-6); max-width: 46ch; }
.service-bullets li { position: relative; padding-left: var(--sp-6); color: var(--slate); }
.service-bullets li::before {
  content: ""; position: absolute; left: 0; top: 0.65em; width: 6px; height: 6px; border-radius: 50%; background: var(--gray);
}
.service-link { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 600; color: var(--navy); border-bottom: 1.5px solid var(--orange); padding-bottom: 2px; transition: color var(--dur-fast) var(--ease-out); }
.service-link span { display: inline-block; transition: transform var(--dur-fast) var(--ease-out); }
.service-link:hover { color: var(--navy-accent); }
.service-link:hover span { transform: translateX(4px); }

/* ---------- How We Work ---------- */
.how-we-work { padding-block: var(--section-pad); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-8); position: relative; }
.steps::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 6%;
  right: 6%;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 8px, transparent 8px 16px);
  z-index: 0;
}
.step { position: relative; z-index: 1; }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--navy); color: var(--off-white);
  font-family: var(--font-display); font-size: 0.8rem; font-weight: 600;
  margin-bottom: var(--sp-6);
}
.step h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-2); }
.step p { color: var(--slate); max-width: 30ch; }

/* ---------- Who We Help ---------- */
.who-we-help { position: relative; overflow: hidden; padding-block: var(--section-pad); background: var(--off-white-dim); }
.who-we-help::before {
  content: "";
  position: absolute; bottom: -10%; left: -6%; z-index: 0;
  width: clamp(280px, 32vw, 500px); height: clamp(280px, 32vw, 500px);
  background: radial-gradient(circle, rgba(182,170,166,0.24), transparent 70%);
  pointer-events: none;
}
.who-we-help .container { position: relative; z-index: 1; }
.who-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.who-copy h2 { font-size: var(--fs-h2); margin-bottom: var(--sp-6); }
.who-intro { font-size: var(--fs-lead); margin-bottom: var(--sp-6); }
.checklist { display: flex; flex-direction: column; gap: var(--sp-4); }
.checklist li { position: relative; padding-left: var(--sp-8); font-size: var(--fs-lead); }
.checklist li::before {
  content: "";
  position: absolute; left: 0; top: 0.15em;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--navy-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2l-3.5-3.6L4 14.1l5 5 11-11-1.5-1.5z' fill='black'/%3E%3C/svg%3E") center/50% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2l-3.5-3.6L4 14.1l5 5 11-11-1.5-1.5z' fill='black'/%3E%3C/svg%3E") center/50% no-repeat;
}
.who-panel {
  background: var(--navy);
  color: var(--off-white);
  border-radius: 20px;
  padding: var(--sp-12) var(--sp-8);
  margin-top: clamp(0px, 4vw, 2.5rem);
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur-med) var(--ease-out);
}
.who-panel:hover { transform: translateY(-6px); }
.who-panel-label { font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(237,233,226,0.55); margin-bottom: var(--sp-6); }
.who-panel li { padding-block: var(--sp-3); border-top: 1px solid rgba(237,233,226,0.12); font-family: var(--font-display); font-size: var(--fs-h3); }
.who-panel li:first-child { border-top: none; }

/* ---------- Related links (city ↔ sector contextual cross-linking) ----------
   Deliberately lighter than a full section: one short editorial paragraph
   with inline links, not a card grid or bare list — keeps cross-linking
   feeling like a helpful note rather than an SEO link block. Reused on every
   city and sector page, and on the two overview hubs. */
.related-links { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
.related-links__inner { max-width: 800px; }
.related-links .eyebrow { margin-bottom: var(--sp-2); }
.related-links h2 { font-size: var(--fs-h3); margin-bottom: var(--sp-4); }
.related-links p { color: var(--slate); font-size: var(--fs-body); }
.related-links p a { color: var(--navy); font-weight: 600; border-bottom: 1px solid var(--line-strong); transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.related-links p a:hover { color: var(--orange); border-color: var(--orange); }

/* ---------- Free audit tool (seo.html) ----------
   Three states swapped by js/seo-audit.js inside one panel: the lead form
   (reuses .contact-form/.form-row/.form-field, the site-wide form standard),
   a loading state, and the result — score badge + check list mirror the
   audit-result email exactly, so the on-page result and the inbox copy feel
   like the same product. */
.audit-tool { position: relative; overflow: hidden; padding-block: var(--section-pad); background: var(--off-white-dim); }
.audit-tool .container { position: relative; z-index: 1; }
.audit-tool__intro { max-width: 640px; margin: 0 auto var(--sp-12); text-align: center; }
.audit-tool__intro h2 { font-size: var(--fs-h2); margin: var(--sp-3) 0 var(--sp-4); }
.audit-tool__intro p { color: var(--slate); font-size: var(--fs-lead); }

.audit-tool__panel {
  position: relative;
  max-width: 720px; margin-inline: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 24px;
  padding: clamp(1.75rem, 1.4rem + 1.8vw, 3rem);
  box-shadow: var(--shadow-lg);
}

.audit-form .checklist { flex-direction: row; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); margin-bottom: var(--sp-2); }
.audit-form .checklist li { font-size: 0.85rem; font-weight: 600; color: var(--navy-accent); padding-left: 22px; }
.audit-form__url-hint { font-size: var(--fs-small); color: var(--slate); margin-top: -0.5rem; }
/* .contact-form/.audit-loading both set an explicit `display`, which (per
   CSS specificity rules) silently overrides the UA [hidden] rule unless
   re-asserted here at equal-or-higher specificity — same fix already
   applied to .contact-modal[hidden] elsewhere in this file. */
.audit-form[hidden], .audit-loading[hidden] { display: none; }

.audit-loading { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); padding: var(--sp-16) 0; text-align: center; }
.audit-loading__spinner {
  width: 42px; height: 42px; border-radius: 50%;
  border: 3px solid var(--line-strong); border-top-color: var(--orange);
  animation: auditSpin 800ms linear infinite;
}
@keyframes auditSpin { to { transform: rotate(360deg); } }
.audit-loading p { color: var(--slate); font-size: var(--fs-body); min-height: 1.4em; }

.audit-result__header { display: flex; align-items: center; gap: var(--sp-6); margin-bottom: var(--sp-8); flex-wrap: wrap; }
.audit-score-badge {
  flex-shrink: 0; width: 84px; height: 84px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: #fff;
  box-shadow: var(--shadow);
}
.audit-score-badge.is-good { background: linear-gradient(155deg, #34d399, #16a34a); }
.audit-score-badge.is-warn { background: linear-gradient(155deg, #fbbf24, #f59e0b); }
.audit-score-badge.is-bad  { background: linear-gradient(155deg, #f87171, #dc2626); }
.audit-result__label { font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); margin-bottom: 2px; }
.audit-result__url { font-weight: 600; color: var(--navy); word-break: break-all; }

.audit-checks { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0 0 var(--sp-8); padding: 0; list-style: none; }
.audit-check { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: 12px; background: var(--off-white-dim); }
.audit-check__badge {
  flex-shrink: 0; margin-top: 2px;
  display: inline-flex; align-items: center; padding: 0.15rem 0.55rem;
  border-radius: 999px; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #fff;
  white-space: nowrap;
}
.audit-check__badge.pass { background: #16a34a; }
.audit-check__badge.warn { background: #f59e0b; }
.audit-check__badge.fail { background: #dc2626; }
.audit-check__body strong { display: block; font-size: 0.9rem; color: var(--navy); }
.audit-check__body span { font-size: 0.82rem; color: var(--slate); }

.audit-next-steps { margin-bottom: var(--sp-8); }
.audit-next-steps__title { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--navy); margin-bottom: var(--sp-3); }

.audit-result__email-note {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 0.85rem; color: var(--navy-accent); font-weight: 600;
  margin-bottom: var(--sp-6);
}
.audit-result__email-note svg { flex-shrink: 0; width: 16px; height: 16px; color: #16a34a; }
.audit-result .btn { width: 100%; justify-content: center; }
.audit-result__fail-title { font-size: var(--fs-h3); color: var(--navy); margin-bottom: var(--sp-3); }
.audit-result__fail-text { color: var(--slate); margin-bottom: var(--sp-6); }

@media (max-width: 640px) {
  .audit-result__header { flex-direction: column; text-align: center; }
}

/* ---------- About ---------- */
.about { position: relative; overflow: hidden; padding-block: var(--section-pad); }
.about::before {
  content: "";
  position: absolute; top: -12%; left: -8%; z-index: 0;
  width: clamp(260px, 28vw, 440px); height: clamp(260px, 28vw, 440px);
  background: radial-gradient(circle, rgba(9,36,63,0.10), transparent 70%);
  pointer-events: none;
}
.about .container { position: relative; z-index: 1; }
.about-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.about-visual { position: relative; aspect-ratio: 1; max-width: 340px; display: flex; align-items: center; justify-content: center; margin-left: clamp(0px, 4vw, 2rem); }
.monogram {
  position: relative; z-index: 1;
  width: 42%; aspect-ratio: 1; border-radius: 50%;
  background: linear-gradient(155deg, var(--navy-accent), var(--navy));
  color: var(--orange);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 1rem + 2vw, 2.2rem);
  box-shadow: var(--shadow-lg);
  animation: monogramBreathe 8s ease-in-out infinite;
}
.about-copy h2 { font-size: var(--fs-h2); margin-bottom: var(--sp-6); }
.about-copy p { color: var(--slate); max-width: 56ch; margin-bottom: var(--sp-4); }
.about-copy strong { color: var(--navy); }
.about-copy .service-link { margin-top: var(--sp-4); }

/* ---------- Pull quote ---------- */
.pull-quote { max-width: 760px; margin-inline: auto; text-align: center; }
.pull-quote blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--navy);
  margin: 0;
}
.pull-quote-attribution { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-8); }
.pull-quote-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(155deg, var(--navy-accent), var(--navy));
  color: var(--orange);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: 0.85rem;
}
.pull-quote-who { text-align: left; }
.pull-quote-name { font-weight: 600; }
.pull-quote-role { color: var(--slate); font-size: var(--fs-small); }

/* ---------- Highlight box ---------- */
.highlight-box {
  background: var(--off-white-dim);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: var(--sp-8);
}
.highlight-box p {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--navy);
  margin: 0;
}
.highlight-box p + p { margin-top: var(--sp-4); font-family: var(--font-body); font-size: var(--fs-body); font-weight: 400; color: var(--slate); }

/* ---------- Stat strip ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat-card { padding-inline: var(--sp-6); border-left: 1px solid var(--line-strong); text-align: center; transition: transform var(--dur-fast) var(--ease-out); }
.stat-card:first-child { border-left: none; }
.stat-card:hover { transform: translateY(-4px); }
.stat-number { font-family: var(--font-display); font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem); font-weight: 600; color: var(--navy-accent); line-height: 1; }
.stat-label { color: var(--slate); font-size: var(--fs-small); margin-top: var(--sp-3); }

@media (max-width: 768px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-8) 0; }
  .stat-card { border-left: none; }
}

/* ---------- Final CTA ---------- */
.final-cta {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: var(--off-white);
  padding-block: var(--section-pad);
}
.final-cta-inner { position: relative; z-index: 1; text-align: center; max-width: 640px; margin-inline: auto; }
.final-cta h2 { font-size: var(--fs-h2); margin-bottom: var(--sp-4); }
.final-cta p { color: rgba(237,233,226,0.72); font-size: var(--fs-lead); margin-bottom: var(--sp-8); }
.final-cta .btn-primary { background: var(--orange); color: var(--navy); }
.final-cta .btn-primary:hover { background: #ff7c46; }
.final-cta .btn-ghost { color: var(--off-white); border-color: rgba(237, 233, 226, 0.35); }
.final-cta .btn-ghost:hover { border-color: var(--off-white); background: rgba(237, 233, 226, 0.08); }

/* ---------- Demo request section (homepage / city / sector pages) ----------
   Reusable "free demo" conversion block, styled as the site's established
   dark asymmetric promo pattern (same recipe as .campaign-home-promo below:
   navy field, animated .contour lines, tilted accent panel) rather than a
   generic centered card — sits high on the page, right after the services/
   value-prop content. Opens .demo-modal (js/demo-request.js) via
   [data-demo-trigger]. */
.demo-section { position: relative; overflow: hidden; padding-block: var(--section-pad); background: var(--navy); color: var(--off-white); }
.demo-section .contour path { stroke: rgba(237,233,226,0.45); }
.demo-section .container { position: relative; z-index: 1; }
.demo-inner {
  display: grid;
  /* minmax(0, …) — without it, a track refuses to shrink below its content's
     min-content width (a long h2 in .demo-copy), which forces the whole grid
     wider than the viewport on narrow screens. Same fix applied to the
     mobile 1-column override below. */
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.demo-copy .eyebrow { color: var(--orange); }
.demo-copy h2 { font-size: var(--fs-h2); color: var(--off-white); margin-bottom: var(--sp-4); }
.demo-copy > p { color: rgba(237, 233, 226, 0.8); font-size: var(--fs-lead); max-width: 46ch; margin-bottom: var(--sp-6); }
.demo-copy .checklist li { color: rgba(237, 233, 226, 0.92); }
.demo-copy .checklist li::before { background: var(--orange); }
.demo-panel {
  position: relative;
  background: var(--navy-accent); border: 1px solid rgba(237,233,226,0.14);
  border-radius: 20px; padding: var(--sp-8);
  box-shadow: var(--shadow-lg);
  text-align: center;
  transform: rotate(1.5deg);
  transition: transform var(--dur-med) var(--ease-out);
}
.demo-panel:hover { transform: rotate(0deg) translateY(-4px); }
.demo-panel::before {
  content: ""; position: absolute; top: -30%; left: -20%;
  width: 60%; height: 160%;
  background: radial-gradient(circle, rgba(248,100,40,0.25), transparent 70%);
  pointer-events: none;
}
.demo-panel__badge {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--orange); margin-bottom: var(--sp-6);
}
.demo-panel__badge::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--orange);
  box-shadow: 0 0 0 4px rgba(248,100,40,0.25);
}
/* min-width: 0 lets the card shrink to its grid track instead of growing to
   fit the CTA label's min-content width — .btn is nowrap by default (fine
   for short labels), but this one is long, so it needs to wrap here. */
.demo-panel { min-width: 0; }
.demo-panel .btn { position: relative; width: 100%; justify-content: center; white-space: normal; }
.demo-panel__note {
  position: relative; margin-top: var(--sp-5); padding-top: var(--sp-5);
  border-top: 1px solid rgba(237, 233, 226, 0.14);
  color: rgba(237, 233, 226, 0.75); font-size: var(--fs-small);
}
@media (max-width: 900px) {
  .demo-inner { grid-template-columns: minmax(0, 1fr); }
  .demo-panel { transform: none; max-width: 420px; margin-inline: auto; }
}

/* ---------- Demo request modal + form ----------
   Reuses .contact-modal chrome (backdrop/panel/close) plus the exact
   .form-card / .contact-form / .form-field system every other form on the
   site uses (see "Contact form" above) — same field look, same focus ring,
   same spacing, rather than a one-off input style. */
.demo-modal .contact-modal__panel { max-width: 720px; max-height: 88vh; overflow-y: auto; text-align: left; }
.demo-modal__sub { color: var(--slate); margin: var(--sp-3) 0 var(--sp-6); }
.demo-form.contact-form { gap: var(--sp-5); }
.demo-form .checklist { flex-direction: row; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); margin-bottom: var(--sp-2); }
.demo-form .checklist li { font-size: 0.85rem; font-weight: 600; color: var(--navy-accent); padding-left: 22px; }
.demo-form__optional-label { font-weight: 400; color: var(--slate); text-transform: none; letter-spacing: 0; }
.demo-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235A6671' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 11px 7px; padding-right: 2.4rem;
}
.demo-form__status.is-error { color: #b91c1c; }
.demo-form__status.is-success { color: var(--navy-accent); font-weight: 600; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: rgba(237,233,226,0.85); }
.footer-inner {
  display: grid;
  grid-template-columns: 1.3fr 0.85fr 1fr 0.85fr 1.05fr;
  gap: var(--sp-12);
  padding-block: var(--sp-24) var(--sp-12);
  border-bottom: 1px solid rgba(237,233,226,0.10);
}
/* Cities + sectors share one column as two stacked mini-groups rather than
   two extra full columns — keeps the footer curated instead of link-heavy. */
.footer-nav--locations .footer-heading--stacked { margin-top: var(--sp-6); }
.footer-brand img { height: 112px; width: auto; }
.footer-brand p { margin-top: var(--sp-4); color: rgba(237,233,226,0.6); max-width: 32ch; }
.footer-social { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); }
.footer-social__link {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(237,233,226,0.08); color: rgba(237,233,226,0.75);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.footer-social__link svg { width: 16px; height: 16px; }
.footer-social__link:hover { background: var(--orange); color: var(--navy); transform: translateY(-3px); }
.footer-heading { font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); margin-bottom: var(--sp-4); }
.footer-nav ul, .footer-contact { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-nav a, .footer-contact a,
.footer-nav button, .footer-contact button {
  font: inherit; color: rgba(237,233,226,0.75); background: none; border: 0; padding: 0; text-align: left; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-nav a:hover, .footer-contact a:hover,
.footer-nav button:hover, .footer-contact button:hover { color: var(--orange); }
.footer-contact p { color: rgba(237,233,226,0.75); }
.footer-legal { display: flex; justify-content: space-between; align-items: center; padding-block: var(--sp-8); font-size: var(--fs-small); color: rgba(237,233,226,0.5); }
.footer-legal ul { display: flex; gap: var(--sp-6); }
.footer-legal a:hover { color: var(--off-white); }

@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .hero-visual { max-width: 480px; }
  .value-grid { grid-template-columns: 1fr 1fr; }
  .value-card--3 { grid-column: span 2; margin-top: var(--sp-8); }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-12); }
  .steps::before { display: none; }
  .who-grid { grid-template-columns: minmax(0, 1fr); }
  .who-panel { margin-top: var(--sp-8); }
  .about-grid { grid-template-columns: minmax(0, 1fr); }
  .about-visual { margin: 0 auto; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1300px) {
  .main-nav { position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; background: var(--off-white); padding: var(--sp-8) var(--sp-6); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), visibility var(--dur-med); overflow-y: auto; }
  .main-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .main-nav ul { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .main-nav ul > li { width: 100%; }
  .main-nav a, .nav-link { width: 100%; font-size: 1.1rem; padding: var(--sp-4) 0; }
  .has-dropdown { width: 100%; }
  .main-nav .dropdown-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; display: none; margin-left: var(--sp-4); }
  .dropdown-menu.is-open { display: block; }
  .header-actions .btn-primary { display: none; }
  .nav-toggle { display: inline-flex; }
}

@media (max-width: 640px) {
  .value-grid { grid-template-columns: 1fr; }
  .value-card--2, .value-card--3 { margin-top: 0; grid-column: auto; }
  .service-row { grid-template-columns: 1fr; gap: var(--sp-4); }
  .service-num { font-size: 2.25rem; }
  .steps { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-legal { flex-direction: column; gap: var(--sp-4); align-items: flex-start; }
  .metric-chip { font-size: 0.68rem; padding: var(--sp-2); }
}

/* ---------- Reveal on scroll ---------- */
.reveal, .reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  scale: 0.98;
  transition: opacity 750ms var(--ease-out), transform 750ms var(--ease-out), scale 750ms var(--ease-out);
}
.reveal.is-visible, .reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
  scale: 1;
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 90ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 180ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 270ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 360ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 450ms; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; scale: 1; }
  .hero::before,
  .contour--hero svg, .contour--cta svg, .contour--services svg, .contour--about svg,
  .browser-frame, .metric-chip, .monogram {
    animation: none !important;
  }
  .chart-dot-ping { animation: none !important; opacity: 0 !important; }
  .chart-line { stroke-dashoffset: 0 !important; }
  .contact-fab, .campaign-fab, .campaign-bar, .campaign-footer-promo { animation: none !important; }
  /* partners-fab's base rule sets opacity:0 for its entrance fade — unlike
     the fabs above (which default to opacity:1 and only need `animation:none`),
     killing its animation here would leave it stuck invisible, so give it an
     explicit end-state instead. */
  .partners-fab { animation: none !important; opacity: 1 !important; }
}
body.reduce-motion .reveal,
body.reduce-motion .reveal-stagger > * { opacity: 1; transform: none; transition: none; }

/* ---------- Legal page content ---------- */
.legal-hero { padding-block: calc(var(--header-h) + var(--sp-12)) var(--sp-8); }
.legal-meta { color: var(--slate); font-size: var(--fs-small); }
.legal-content { padding-block: 0 var(--section-pad); }
.legal-content h2 { font-size: var(--fs-h3); margin-top: var(--sp-16); margin-bottom: var(--sp-4); }
.legal-content section:first-of-type h2 { margin-top: 0; }
.legal-content h3 { font-family: var(--font-body); font-size: var(--fs-body); font-weight: 700; color: var(--navy); margin-top: var(--sp-8); margin-bottom: var(--sp-3); }
.legal-content p { color: var(--slate); max-width: 74ch; margin-bottom: var(--sp-4); }
.legal-content ul, .legal-content ol { padding-left: 1.25rem; margin-bottom: var(--sp-6); max-width: 74ch; }
.legal-content ul { list-style: disc; }
.legal-content ol { list-style: decimal; }
.legal-content li { color: var(--slate); margin-bottom: var(--sp-2); }
.legal-content strong { color: var(--navy); }
.legal-content a { color: var(--navy-accent); text-decoration: underline; text-underline-offset: 2px; }
.legal-content a:hover { color: var(--navy); }
.legal-toc { background: var(--off-white-dim); border: 1px solid var(--line); border-radius: 16px; padding: var(--sp-6) var(--sp-8); margin-bottom: var(--sp-16); }
.legal-toc p { color: var(--navy); font-weight: 600; margin-bottom: var(--sp-3); }
.legal-toc ol { columns: 2; column-gap: var(--sp-8); margin-bottom: 0; padding-left: 1.1rem; }
.legal-toc li { margin-bottom: var(--sp-2); break-inside: avoid; }
.legal-toc a { color: var(--slate); text-decoration: none; }
.legal-toc a:hover { color: var(--navy-accent); text-decoration: underline; }
@media (max-width: 640px) { .legal-toc ol { columns: 1; } }

.footer-legal button {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-legal button:hover { color: var(--off-white); }

/* ---------- Cookie consent banner ---------- */
.cookie-banner { position: fixed; inset-inline: 0; bottom: 0; z-index: 250; padding: var(--sp-4); pointer-events: none; }
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner {
  pointer-events: auto;
  max-width: 1100px;
  margin-inline: auto;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  padding: var(--sp-6) var(--sp-8);
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.cookie-banner.is-open .cookie-banner__inner { opacity: 1; transform: translateY(0); }
/* Backdrop-filter unsupported (older WebViews etc.) — fall back to a near-solid
   panel so busy page content behind the banner can never bleed through unblurred. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cookie-banner__inner { background: rgba(255, 255, 255, 0.99); }
}
.cookie-banner__text { flex: 1 1 320px; font-size: var(--fs-small); color: var(--slate); margin: 0; }
.cookie-banner__text a { color: var(--navy); border-bottom: 1px solid var(--line-strong); transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.cookie-banner__text a:hover { color: var(--navy-accent); border-color: var(--navy-accent); }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); flex-shrink: 0; }
.cookie-banner__actions .btn,
.cookie-settings__actions .btn {
  background: transparent; color: var(--navy); border: 1.5px solid var(--line-strong); box-shadow: none;
}
.cookie-banner__actions .btn:hover,
.cookie-settings__actions .btn:hover { border-color: var(--navy); background: rgba(9, 36, 63, 0.03); }
.cookie-settings__actions .btn-primary {
  background: var(--navy); color: var(--off-white); border-color: var(--navy);
}
.cookie-settings__actions .btn-primary:hover { background: var(--navy-accent); border-color: var(--navy-accent); }

@media (max-width: 640px) {
  .cookie-banner__inner { flex-direction: column; align-items: stretch; padding: var(--sp-6); }
  .cookie-banner__actions { flex-direction: column; }
  .cookie-banner__actions .btn { width: 100%; }
}

/* ---------- Cookie settings modal ---------- */
.cookie-settings .contact-modal__panel { max-width: 560px; }
.cookie-settings__sub { color: var(--slate); margin: var(--sp-3) 0 var(--sp-8); }
.cookie-toggle-list { margin-bottom: var(--sp-8); }
.cookie-toggle-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-6);
  padding-block: var(--sp-5); border-top: 1px solid var(--line);
}
.cookie-toggle-row:first-child { border-top: none; padding-top: 0; }
.cookie-toggle-title { font-weight: 600; margin: 0 0 4px; }
.cookie-toggle-desc { color: var(--slate); font-size: var(--fs-small); margin: 0; max-width: 40ch; }
.cookie-settings__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.cookie-settings__link { margin-top: var(--sp-6); font-size: var(--fs-small); }
.cookie-settings__link a { color: var(--navy-accent); font-weight: 600; }

@media (max-width: 640px) {
  .cookie-settings__actions { flex-direction: column; }
  .cookie-settings__actions .btn { width: 100%; }
}

/* ---------- Toggle switch ---------- */
.switch { position: relative; display: inline-block; width: 44px; height: 26px; flex-shrink: 0; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch input:disabled { cursor: not-allowed; }
.switch-track { position: absolute; inset: 0; background: var(--line-strong); border-radius: 999px; transition: background-color var(--dur-fast) var(--ease-out); pointer-events: none; }
.switch-track::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow); transition: translate var(--dur-fast) var(--ease-out);
}
.switch input:checked + .switch-track { background: var(--navy-accent); }
.switch input:checked + .switch-track::before { translate: 18px 0; }
.switch input:disabled + .switch-track { background: var(--navy-accent); opacity: 0.55; }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--orange); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .cookie-banner__inner { transition-duration: 0.001ms !important; }
}

/* ---------- Portfolio case cards ---------- */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); }
.case-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.case-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.case-visual {
  position: relative;
  height: 160px;
  background: linear-gradient(150deg, var(--navy), var(--navy-accent));
  overflow: hidden;
}
.case-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(58% 0, 100% 0, 100% 100%, 38% 100%);
  background: rgba(248, 100, 40, 0.18);
}
.case-visual .wireframe-mock { padding: var(--sp-6); transform: scale(0.92); }
.case-visual img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform var(--dur-med) var(--ease-out); }
.case-card:hover .case-visual img { transform: scale(1.04); }
.case-visual--photo::after { display: none; }
.case-visual .wf-line, .case-visual .wf-card { background: rgba(237,233,226,0.18); border-color: rgba(237,233,226,0.14); }
.case-visual .wf-nav span { background: rgba(237,233,226,0.18); }
.case-visual .wf-nav span:first-child { background: var(--orange); }
.case-visual .wf-btn { background: var(--orange); }
.case-body { padding: var(--sp-6); }
.case-tag {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-accent);
  margin-bottom: var(--sp-2);
}
/* Lightweight B2B/B2C signal next to the industry tag — deliberately not a
   filter UI (only a handful of case studies exist so far; a filter with 3
   items to sort would be more clutter than it's worth). Just a quiet visual
   convention that scales once the portfolio grows. */
.case-audience {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.05em;
  padding: 0.1rem 0.45rem; border-radius: 999px;
  color: var(--slate); background: var(--off-white-dim); border: 1px solid var(--line);
}
.case-body h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-2); }
.case-body p { color: var(--slate); font-size: var(--fs-small); }
.case-body .service-link { margin-top: var(--sp-4); font-size: var(--fs-small); }

@media (max-width: 1024px) { .case-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .case-grid { grid-template-columns: 1fr; } }

/* ---------- Blog cards ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); }
.blog-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: var(--sp-8);
  box-shadow: var(--shadow);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.blog-card__tag {
  font-family: var(--font-display); font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange); margin-bottom: var(--sp-3);
}
.blog-card h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-3); }
.blog-card p { color: var(--slate); flex-grow: 1; }
.blog-card__link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--sp-6); font-weight: 600; color: var(--navy);
  border-bottom: 1.5px solid var(--orange); padding-bottom: 2px; align-self: flex-start;
  transition: color var(--dur-fast) var(--ease-out);
}
.blog-card__link span { display: inline-block; transition: transform var(--dur-fast) var(--ease-out); }
.blog-card:hover .blog-card__link { color: var(--navy-accent); }
.blog-card:hover .blog-card__link span { transform: translateX(4px); }
.blog-card__meta {
  display: flex; gap: var(--sp-4); font-size: var(--fs-small); color: var(--slate);
  padding-top: var(--sp-6); margin-top: var(--sp-6); border-top: 1px solid var(--line);
}
@media (max-width: 1024px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } }

/* ---------- Article page ---------- */
.legal-content .article-note {
  background: var(--off-white-dim);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: var(--sp-6) var(--sp-8);
  margin: var(--sp-8) 0;
}
.legal-content .article-note strong {
  display: block; font-family: var(--font-display); color: var(--navy-accent);
  font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.legal-content .article-note p { margin: 0; color: var(--navy); }

/* ============================================
   Campaign — "5 besplatnih sajtova" promotion
   Sitewide bar/FAB/footer promo injected by js/campaign-promo.js,
   plus components used on the dedicated campaign landing page and
   the homepage promo block.
   ============================================ */

/* ---------- Nav NEW badge ---------- */
.nav-new-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
  padding: 2px 8px;
  background: var(--orange);
  color: var(--navy);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 999px;
  line-height: 1.5;
}
.main-nav a.nav-new-link[aria-current="page"] { color: var(--navy); }

/* ---------- Sitewide announcement bar ---------- */
.campaign-bar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 110;
  background: var(--navy);
  color: var(--off-white);
  border-bottom: 1px solid rgba(248, 100, 40, 0.4);
  animation: campaignBarIn 500ms var(--ease-out) both;
}
.campaign-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  padding-block: 0.7rem;
  text-align: center;
}
.campaign-bar__text {
  font-size: var(--fs-small);
  margin: 0;
}
.campaign-bar__text strong { color: var(--off-white); }
.campaign-bar__text a {
  margin-left: var(--sp-2);
  font-weight: 700;
  color: var(--orange);
  border-bottom: 1.5px solid rgba(248, 100, 40, 0.5);
  padding-bottom: 1px;
  transition: border-color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.campaign-bar__text a:hover { border-color: var(--orange); }
.campaign-bar__close {
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 1.1rem; line-height: 1;
  color: rgba(237, 233, 226, 0.7);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.campaign-bar__close:hover { background: rgba(237, 233, 226, 0.12); color: var(--off-white); }
@keyframes campaignBarIn { from { transform: translateY(-100%); } to { transform: translateY(0); } }

@media (max-width: 720px) {
  .campaign-bar__inner { justify-content: space-between; text-align: left; padding-block: 0.6rem; }
  .campaign-bar__text { font-size: 0.8rem; }
}

/* ---------- Floating campaign CTA (mirrors .contact-fab, opposite corner) ---------- */
.campaign-fab {
  position: fixed; left: var(--sp-6); bottom: var(--sp-6); z-index: 150;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--orange); color: var(--navy);
  padding: 0.9rem 1.3rem; border-radius: 999px;
  box-shadow: var(--shadow-lg);
  font-weight: 700; font-size: var(--fs-small);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
  animation: fabIn 600ms var(--ease-out) 1.5s both;
}
.campaign-fab:hover { transform: translateY(-3px); box-shadow: 0 20px 50px -18px rgba(9, 36, 63, 0.4); background: #ff7a45; }
@media (max-width: 640px) {
  .campaign-fab { left: var(--sp-4); bottom: var(--sp-4); padding: 0.8rem; }
  .campaign-fab span { display: none; }
}
/* Both FABs visible on the same screen would collide on narrow viewports */
@media (max-width: 480px) {
  .contact-fab { display: none; }
}

/* ---------- Footer promo strip (injected before .site-footer) ---------- */
.campaign-footer-promo {
  background: linear-gradient(120deg, var(--navy) 0%, #0e2f50 100%);
  animation: campaignFadeUp 700ms var(--ease-out) both;
}
.campaign-footer-promo__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--sp-12) clamp(1.25rem, 1rem + 2vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  flex-wrap: wrap;
}
.campaign-footer-promo__copy strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--off-white);
  margin-bottom: 4px;
}
.campaign-footer-promo__copy span { color: rgba(237, 233, 226, 0.75); font-size: var(--fs-small); }
@keyframes campaignFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 640px) {
  .campaign-footer-promo__inner { flex-direction: column; align-items: flex-start; text-align: left; }
  .campaign-footer-promo .btn { width: 100%; justify-content: center; }
}

/* ---------- Campaign page: hero counter card ---------- */
.campaign-counter-card {
  background: var(--navy);
  color: var(--off-white);
  border-radius: 20px;
  padding: var(--sp-8);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.campaign-counter-card::before {
  content: "";
  position: absolute; top: -30%; right: -20%;
  width: 60%; height: 160%;
  background: radial-gradient(circle, rgba(248,100,40,0.25), transparent 70%);
  pointer-events: none;
}
.campaign-counter-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--orange); margin-bottom: var(--sp-6);
}
.campaign-counter-badge::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--orange);
  box-shadow: 0 0 0 4px rgba(248,100,40,0.25);
}
.campaign-counter-value {
  position: relative; z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(3rem, 2.4rem + 2.4vw, 4.5rem);
  font-weight: 600; line-height: 1;
}
.campaign-counter-label { color: rgba(237, 233, 226, 0.7); margin-top: var(--sp-3); font-size: var(--fs-small); }
.campaign-counter-note {
  margin-top: var(--sp-6); padding-top: var(--sp-6);
  border-top: 1px solid rgba(237, 233, 226, 0.14);
  color: rgba(237, 233, 226, 0.75); font-size: var(--fs-small);
}
.campaign-counter-updated { animation: campaignPulse 520ms var(--ease-out); }
@keyframes campaignPulse { 0% { transform: scale(1); } 40% { transform: scale(1.08); color: var(--orange); } 100% { transform: scale(1); } }

/* ---------- Campaign page: "what's included" cards ---------- */
.campaign-includes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); }
.campaign-includes .feature-card { position: relative; }
.campaign-includes .value-index { display: block; margin-bottom: var(--sp-3); }
@media (max-width: 1024px) { .campaign-includes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .campaign-includes { grid-template-columns: 1fr; } }

/* ---------- Campaign application form (wider than the standard contact form) ---------- */
.form-card--wide { max-width: 880px; }
.form-card--wide .form-row { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .form-card--wide .form-row { grid-template-columns: 1fr; } }

.campaign-consent { display: flex; align-items: flex-start; gap: var(--sp-3); cursor: pointer; }
.campaign-consent input { margin-top: 5px; flex-shrink: 0; width: 17px; height: 17px; accent-color: var(--navy-accent); }
.campaign-consent span { font-size: var(--fs-small); color: var(--slate); }

/* ---------- Homepage promo block (dark, asymmetric) ---------- */
.campaign-home-promo { position: relative; overflow: hidden; padding-block: var(--section-pad); background: var(--navy); color: var(--off-white); }
.campaign-home-promo .contour path { stroke: rgba(237,233,226,0.5); }
.campaign-home-promo .container { position: relative; z-index: 1; }
.campaign-home-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.campaign-home-copy .eyebrow { color: var(--orange); }
.campaign-home-copy h2 { font-size: var(--fs-h2); color: var(--off-white); margin-bottom: var(--sp-6); }
.campaign-home-copy > p { color: rgba(237, 233, 226, 0.8); font-size: var(--fs-lead); max-width: 46ch; margin-bottom: var(--sp-8); }
.campaign-home-copy .checklist { margin-bottom: var(--sp-8); }
.campaign-home-copy .checklist li { color: rgba(237, 233, 226, 0.92); }
.campaign-home-copy .checklist li::before { background: var(--orange); }
.campaign-home-panel {
  transform: rotate(-1.5deg);
  transition: transform var(--dur-med) var(--ease-out);
}
.campaign-home-panel:hover { transform: rotate(0deg) translateY(-4px); }
.campaign-home-panel.campaign-counter-card { background: var(--navy-accent); border: 1px solid rgba(237,233,226,0.14); }
.contour--campaign svg { animation: contourDrift 38s ease-in-out infinite alternate; }
.contour--campaign path { stroke: rgba(237,233,226,0.45); }
@media (max-width: 900px) {
  .campaign-home-inner { grid-template-columns: minmax(0, 1fr); }
  .campaign-home-panel { transform: none; max-width: 420px; }
}

/* ============================================
   Chat widget — bottom-right AI assistant
   Backed by chatbot-message.php → admin-app AI agent (keyword match, then
   LLM grounded in admin-configured Topics, then human hand-off). Stacked
   above .contact-fab, which occupies the same corner.
   ============================================ */

.chatbot-fab {
  position: fixed; right: var(--sp-6); bottom: calc(var(--sp-6) + 64px); z-index: 155;
  width: 60px; height: 60px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, #ff8a5c 0%, var(--orange) 50%, #d94e17 100%); color: var(--navy);
  box-shadow: 0 20px 44px -14px rgba(248,100,40,0.55), 0 6px 18px -6px rgba(9,36,63,0.4), inset 0 1px 0 rgba(255,255,255,0.35);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  animation: fabIn 600ms var(--ease-out) 900ms both;
}
/* Soft ambient glow ring, always faintly alive behind the button — the one
   detail that most reliably signals "flagship product" on a plain FAB. */
.chatbot-fab::before {
  content: ''; position: absolute; inset: -10px; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(248,100,40,0.45), transparent 70%);
  filter: blur(10px);
  animation: chatbotFabGlow 3.6s ease-in-out infinite;
}
@keyframes chatbotFabGlow {
  0%, 100% { opacity: 0.55; transform: scale(0.92); }
  50%      { opacity: 0.9;  transform: scale(1.08); }
}
.chatbot-fab:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 26px 54px -14px rgba(248,100,40,0.62), 0 10px 22px -6px rgba(9,36,63,0.45), inset 0 1px 0 rgba(255,255,255,0.4); }
.chatbot-fab:active { transform: translateY(-1px) scale(0.97); }
.chatbot-fab svg { position: relative; width: 24px; height: 24px; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.chatbot-fab .chatbot-fab__icon-close { position: absolute; opacity: 0; transform: rotate(-90deg) scale(0.6); }
.chatbot-fab[aria-expanded="true"] .chatbot-fab__icon-chat { opacity: 0; transform: rotate(90deg) scale(0.6); }
.chatbot-fab[aria-expanded="true"] .chatbot-fab__icon-close { opacity: 1; transform: rotate(0deg) scale(1); }
.chatbot-fab__dot {
  position: absolute; top: 3px; right: 3px; width: 12px; height: 12px; border-radius: 50%;
  background: #2fbf71; border: 2px solid var(--off-white); z-index: 1;
}
/* One gentle attention pulse (JS adds/removes the class after ~2.5s, once) —
   a soft double-beat, not a distracting loop. */
.chatbot-fab--pulse { animation: fabIn 600ms var(--ease-out) both, chatbotFabPulse 1.8s var(--ease-out) 2; }
@keyframes chatbotFabPulse {
  0%   { box-shadow: 0 20px 44px -14px rgba(248,100,40,0.55), 0 0 0 0 rgba(248,100,40,0.45); }
  70%  { box-shadow: 0 20px 44px -14px rgba(248,100,40,0.55), 0 0 0 16px rgba(248,100,40,0); }
  100% { box-shadow: 0 20px 44px -14px rgba(248,100,40,0.55), 0 0 0 0 rgba(248,100,40,0); }
}

@media (max-width: 640px) {
  .chatbot-fab { right: var(--sp-4); bottom: calc(var(--sp-4) + 56px); width: 52px; height: 52px; }
}
@media (max-width: 480px) {
  .chatbot-fab { bottom: var(--sp-4); } /* .contact-fab hides at this width, nothing left to stack above */
}

/* Ambient glow that appears behind the open panel — approximate size/position
   is intentional (a soft blur forgives imprecision); :has() degrades to a
   harmless no-op (glow never shows) on the handful of browsers without it,
   never a broken layout. */
.chatbot-widget::before {
  content: ''; position: fixed; z-index: 153; pointer-events: none;
  right: calc(var(--sp-6) - 50px); bottom: calc(var(--sp-6) + 64px + 68px - 60px);
  width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(248,100,40,0.32), rgba(9,36,63,0.14) 55%, transparent 75%);
  filter: blur(42px);
  opacity: 0; transform: scale(0.85);
  transition: opacity 550ms var(--ease-out), transform 550ms var(--ease-out);
}
.chatbot-widget:has(.chatbot-panel.is-open)::before { opacity: 1; transform: scale(1); }
@media (max-width: 640px) {
  .chatbot-widget::before { right: calc(var(--sp-4) - 40px); bottom: calc(var(--sp-4) + 56px + 60px - 50px); width: 300px; height: 300px; }
}

.chatbot-panel {
  position: fixed; z-index: 154;
  right: var(--sp-6); bottom: calc(var(--sp-6) + 64px + 68px);
  width: min(400px, calc(100vw - 2 * var(--sp-4)));
  height: min(620px, calc(100vh - 140px));
  background: #fff; border-radius: 26px;
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow:
    0 40px 90px -24px rgba(9, 36, 63, 0.42),
    0 14px 30px -10px rgba(9, 36, 63, 0.22),
    0 0 0 1px rgba(9, 36, 63, 0.05);
  display: flex; flex-direction: column; overflow: hidden;
  transform-origin: bottom right;
  opacity: 0; transform: translateY(20px) scale(0.95);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.chatbot-panel.is-open { opacity: 1; transform: translateY(0) scale(1); }
.chatbot-panel[hidden] { display: none; }
@media (max-width: 640px) {
  .chatbot-panel { right: var(--sp-4); bottom: calc(var(--sp-4) + 56px + 60px); height: min(74vh, 620px); }
}

.chatbot-panel__header {
  position: relative; overflow: hidden;
  flex-shrink: 0; display: flex; align-items: center;
  gap: var(--sp-3); padding: var(--sp-5) var(--sp-6);
  background: linear-gradient(150deg, #0d2c4a 0%, var(--navy) 55%, #0a1f36 100%);
  color: var(--off-white);
}
/* Mesh-style layered highlight — an orange glow top-left, a faint cool
   highlight bottom-right — glass-style edge light, sits behind the content. */
.chatbot-panel__header::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 140% at 12% -25%, rgba(248,100,40,0.32), transparent 55%),
    radial-gradient(90% 120% at 105% 130%, rgba(255,255,255,0.10), transparent 60%);
}
.chatbot-panel__avatar {
  position: relative; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; padding: 7px;
  box-shadow: 0 6px 16px -6px rgba(248,100,40,0.55), inset 0 0 0 1px rgba(9,36,63,0.06);
}
.chatbot-panel__avatar img { width: 100%; height: 100%; object-fit: contain; display: block; }
.chatbot-panel__header-text { position: relative; min-width: 0; flex: 1 1 auto; }
.chatbot-panel__eyebrow { font-size: var(--fs-eyebrow); letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); margin-bottom: 2px; }
.chatbot-panel__header h2 { display: inline-flex; align-items: center; font-size: 1.1rem; color: var(--off-white); margin: 0; }
.chatbot-panel__ai-badge {
  display: inline-flex; align-items: center; margin-left: 0.5rem;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em;
  color: var(--navy); background: linear-gradient(135deg, #ffd7c2, var(--orange));
  padding: 0.16rem 0.42rem; border-radius: 999px;
  box-shadow: 0 2px 6px -2px rgba(248,100,40,0.5);
}
.chatbot-panel__status {
  position: relative; display: flex; align-items: center; gap: 0.4rem; margin: 3px 0 0;
  font-size: 0.75rem; color: rgba(237,233,226,0.72);
}
.chatbot-panel__status-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #2fbf71; flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(47,191,113,0.6); animation: chatbotStatusPulse 2.4s ease-out infinite;
}
@keyframes chatbotStatusPulse {
  0%   { box-shadow: 0 0 0 0 rgba(47,191,113,0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(47,191,113,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,191,113,0); }
}
.chatbot-panel__close {
  position: relative; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(237,233,226,0.7); font-size: 1.2rem; line-height: 1;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.chatbot-panel__close:hover { background: rgba(237,233,226,0.14); color: var(--off-white); }

.chatbot-panel__thread {
  flex: 1 1 auto; overflow-y: auto; padding: var(--sp-5) var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
  background: linear-gradient(180deg, #f7f4ee 0%, var(--off-white-dim) 100%);
  scrollbar-width: thin; scrollbar-color: rgba(9,36,63,0.18) transparent;
}
.chatbot-panel__thread::-webkit-scrollbar { width: 6px; }
.chatbot-panel__thread::-webkit-scrollbar-track { background: transparent; }
.chatbot-panel__thread::-webkit-scrollbar-thumb { background: rgba(9,36,63,0.15); border-radius: 999px; }
.chatbot-panel__thread::-webkit-scrollbar-thumb:hover { background: rgba(9,36,63,0.28); }

.chatbot-msg { max-width: 84%; padding: 0.7rem 1rem; border-radius: 17px; font-size: 0.875rem; line-height: 1.55; animation: chatbotMsgIn 320ms var(--ease-out) both; }
.chatbot-msg--bot { align-self: flex-start; background: linear-gradient(180deg, #fff, #fbfaf7); color: var(--navy); border: 1px solid var(--line); border-bottom-left-radius: 4px; box-shadow: 0 4px 14px -8px rgba(9,36,63,0.18); }
.chatbot-msg--user { align-self: flex-end; background: linear-gradient(155deg, var(--navy-accent), var(--navy) 70%); color: var(--off-white); border-bottom-right-radius: 4px; box-shadow: 0 6px 18px -8px rgba(9,36,63,0.45); }
.chatbot-msg--error { border-color: rgba(220,38,38,0.3); color: #b91c1c; }
@keyframes chatbotMsgIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.chatbot-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 0.75rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: 16px; border-bottom-left-radius: 4px; }
.chatbot-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--gray); animation: chatbotTypingBounce 1.1s ease-in-out infinite; }
.chatbot-typing span:nth-child(2) { animation-delay: 0.15s; }
.chatbot-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chatbotTypingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ---------- Quick-reply chips ---------- */
.chatbot-quickreplies {
  flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 0.5rem;
  padding: 0 var(--sp-5) var(--sp-4); background: var(--off-white-dim);
}
.chatbot-quickreplies[hidden] { display: none; }
.chatbot-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  border: 1.5px solid var(--line-strong); background: #fff; color: var(--navy);
  padding: 0.5rem 1rem 0.5rem 0.8rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
  box-shadow: 0 2px 6px -3px rgba(9,36,63,0.14);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  animation: chatbotMsgIn 280ms var(--ease-out) both;
}
.chatbot-chip svg { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.7; transition: opacity var(--dur-fast) var(--ease-out); }
.chatbot-chip:hover {
  border-color: transparent; color: #fff;
  background: linear-gradient(135deg, var(--orange), #d94e17);
  transform: translateY(-2px); box-shadow: 0 12px 22px -10px rgba(248,100,40,0.55);
}
.chatbot-chip:hover svg { opacity: 1; }
.chatbot-chip:active { transform: translateY(0) scale(0.97); }

/* ---------- In-thread link CTA (visit a service page) ---------- */
.chatbot-link-chip {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.8rem; font-weight: 700; color: var(--navy-accent);
  padding: 0.55rem 0.9rem; border-radius: 12px; background: rgba(9,36,63,0.05);
  transition: background-color var(--dur-fast) var(--ease-out), gap var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  animation: chatbotMsgIn 280ms var(--ease-out) both;
}
.chatbot-link-chip:hover { background: rgba(248,100,40,0.10); color: var(--orange); gap: 0.6rem; }

/* ---------- In-thread pricing card ---------- */
.chatbot-pricing-card {
  align-self: stretch; display: flex; flex-direction: column; gap: 0.7rem;
  background: linear-gradient(180deg, #fff, #fcfaf7); border: 1px solid var(--line); border-radius: 18px; padding: var(--sp-4);
  box-shadow: 0 8px 22px -12px rgba(9,36,63,0.2);
  animation: chatbotMsgIn 320ms var(--ease-out) both;
}
.chatbot-pricing-card__tier {
  position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding: 0.7rem 0.9rem; border-radius: 13px; border: 1.5px solid var(--line); background: #fff;
}
.chatbot-pricing-card__tier.is-featured {
  border-color: transparent; background: linear-gradient(135deg, rgba(248,100,40,0.10), rgba(248,100,40,0.03));
  box-shadow: inset 0 0 0 1.5px var(--orange);
}
.chatbot-pricing-card__tier.is-featured::after {
  content: 'Najbolji izbor'; position: absolute; top: -9px; right: 12px;
  background: linear-gradient(135deg, var(--orange), #d94e17); color: #fff;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 0.2rem 0.55rem; border-radius: 999px; box-shadow: 0 4px 10px -4px rgba(248,100,40,0.5);
}
html[lang="en"] .chatbot-pricing-card__tier.is-featured::after { content: 'Most popular'; }
.chatbot-pricing-card__name { font-weight: 700; font-size: 0.85rem; color: var(--navy); margin: 0; }
.chatbot-pricing-card__price { margin: 0; font-weight: 700; font-size: 0.95rem; color: var(--navy); white-space: nowrap; }
.chatbot-pricing-card__price span { display: block; font-weight: 500; font-size: 0.7rem; color: var(--slate); text-align: right; }

.chatbot-escalate {
  align-self: stretch; background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3);
  animation: chatbotMsgIn 320ms var(--ease-out) both;
}
.chatbot-escalate p { font-size: 0.8rem; color: var(--slate); margin: 0; }
.chatbot-escalate input {
  width: 100%; padding: 0.6rem 0.8rem; border-radius: 10px; border: 1.5px solid var(--line-strong);
  background: var(--off-white-dim); font: inherit; font-size: 0.85rem; color: var(--navy);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.chatbot-escalate input:focus { outline: none; border-color: var(--orange); background: #fff; }
.chatbot-escalate button { align-self: flex-start; }
.chatbot-escalate__status { font-size: 0.78rem; color: var(--navy-accent); min-height: 1.1em; margin: 0; }

.chatbot-panel__composer {
  flex-shrink: 0; padding: var(--sp-3) var(--sp-4) var(--sp-4);
  background: linear-gradient(180deg, transparent, var(--off-white-dim) 45%);
}
.chatbot-composer-pill {
  display: flex; align-items: center; gap: var(--sp-2);
  background: #fff; border: 1.5px solid var(--line-strong); border-radius: 999px;
  padding: 0.3rem 0.3rem 0.3rem 1.15rem;
  box-shadow: 0 10px 26px -14px rgba(9,36,63,0.3);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.chatbot-composer-pill:focus-within {
  border-color: var(--orange);
  box-shadow: 0 12px 28px -12px rgba(248,100,40,0.35), 0 0 0 3px rgba(248,100,40,0.12);
}
.chatbot-panel__composer input {
  flex: 1 1 auto; border: 0; background: none; font: inherit; font-size: 0.9rem; color: var(--navy);
  padding: 0.55rem 0;
}
.chatbot-panel__composer input:focus { outline: none; }
.chatbot-panel__composer button {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, var(--orange), #d94e17); color: #fff;
  box-shadow: 0 6px 14px -6px rgba(248,100,40,0.55);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.chatbot-panel__composer button:hover { transform: scale(1.07); box-shadow: 0 8px 18px -6px rgba(248,100,40,0.6); }
.chatbot-panel__composer button:active { transform: scale(0.96); }
.chatbot-panel__composer button:disabled { opacity: 0.5; pointer-events: none; }
.chatbot-panel__composer svg { width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
  .chatbot-fab, .chatbot-fab::before, .chatbot-fab--pulse, .chatbot-widget::before,
  .chatbot-panel, .chatbot-msg, .chatbot-chip,
  .chatbot-link-chip, .chatbot-pricing-card, .chatbot-escalate,
  .chatbot-typing span, .chatbot-panel__status-dot { animation: none !important; }
}

/* ---------- ROI calculator ---------- */
.roi-calculator {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: var(--sp-8);
  box-shadow: var(--shadow);
  max-width: 720px;
  margin-inline: auto;
}
.roi-field { margin-bottom: var(--sp-8); }
.roi-field label {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4);
  font-weight: 600; font-size: var(--fs-small); color: var(--navy); margin-bottom: var(--sp-4);
}
.roi-field output { font-family: var(--font-display); font-weight: 700; color: var(--navy-accent); font-size: var(--fs-body); }
.roi-field input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 999px;
  background: var(--off-white-dim);
  outline: none;
}
.roi-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--orange); border: 3px solid #fff; box-shadow: var(--shadow);
  cursor: pointer; transition: transform var(--dur-fast) var(--ease-out);
}
.roi-field input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.1); }
.roi-field input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--orange); border: 3px solid #fff; box-shadow: var(--shadow);
  cursor: pointer;
}
.roi-result {
  background: var(--navy); color: var(--off-white);
  border-radius: 16px; padding: var(--sp-8);
  text-align: center;
}
.roi-result-label { font-size: var(--fs-eyebrow); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(237,233,226,0.6); margin-bottom: var(--sp-3); }
.roi-result-value { font-family: var(--font-display); font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); font-weight: 600; color: var(--orange); }
.roi-result-sub { color: rgba(237,233,226,0.75); margin-top: var(--sp-2); }
.roi-disclaimer { font-size: var(--fs-small); color: var(--slate); text-align: center; margin-top: var(--sp-6); }
.roi-calculator .btn { display: flex; margin: var(--sp-8) auto 0; }