/* GENERISANO AUTOMATSKI – ne menjaj ovaj fajl, menjaj fajlove u assets/css/src/ */

/* ===== 00-tokens.css ===== */
/* =====================================================================
   00 – DIZAJN TOKENI (iz odobrenog dizajna Verta Global)
   Sve boje, fontovi, razmaci i trajanja animacija na jednom mestu.
   Ako menjaš brend boju – promeni je ovde I u Elementor > Site Settings > Global Colors.
   ===================================================================== */
:root {
  /* --- Ink: tamna osnova (nikad čisto #000) --- */
  --ink-950: #08090C;
  --ink-900: #0E1116;
  --ink-800: #161A21;
  --ink-700: #232830;
  --ink-500: #4A5260;
  --ink-300: #8A929E;

  /* --- Paper: svetla osnova (blago topla) --- */
  --paper-50: #F7F7F4;
  --paper-100: #EFEFE9;
  --paper-200: #E2E2DA;
  --paper-300: #CBCBC0;
  --paper-400: #A3A399;

  /* --- Signal: jedini jaki akcenat (samo na akcijama) --- */
  --signal-500: #C6F24E;
  --signal-400: #D8F98A;
  --signal-300: #E9FCC2;
  --signal-100: #F4FDE2;
  --signal-700: #7FA81A;
  --signal-900: #3C4F12;

  /* --- Pomoćne boje za statuse i grafikone --- */
  --brass-500: #A67514;
  --brass-100: #F4E6C6;
  --teal-500: #0F6E7A;
  --teal-100: #D2E9EC;
  --rust-500: #B3341F;
  --rust-100: #F7DED9;
  --moss-500: #16794C;
  --moss-100: #D8EDE2;

  /* --- Semantički aliasi (svetla površina) --- */
  --surface-page: var(--paper-50);
  --surface-raised: #FFFFFF;
  --surface-sunken: var(--paper-100);
  --surface-card: #FFFFFF;
  --surface-inverse: var(--ink-900);
  --surface-inverse-raised: var(--ink-800);
  --surface-accent: var(--signal-300);
  --surface-muted: var(--paper-200);

  --text-display: var(--ink-900);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-subtle: var(--ink-300);
  --text-on-inverse: var(--paper-50);
  --text-on-inverse-muted: var(--paper-300);
  --text-accent: var(--signal-900);
  --text-link: var(--ink-900);
  --text-link-hover: var(--signal-700);

  --border-hairline: var(--paper-200);
  --border-strong: var(--paper-300);
  --border-inverse: rgba(247, 247, 244, .20);
  --border-focus: var(--ink-900);

  --action-primary: var(--ink-900);
  --action-primary-fg: var(--paper-50);
  --action-primary-hover: var(--ink-800);
  --action-primary-press: var(--ink-950);
  --action-accent: var(--signal-500);
  --action-accent-fg: var(--ink-900);
  --action-accent-hover: var(--signal-400);
  --action-accent-press: var(--signal-700);
  --action-quiet-hover: var(--paper-100);

  --status-success: var(--moss-500);
  --status-success-surface: var(--moss-100);
  --status-warning: var(--brass-500);
  --status-warning-surface: var(--brass-100);
  --status-danger: var(--rust-500);
  --status-danger-surface: var(--rust-100);
  --status-info: var(--teal-500);
  --status-info-surface: var(--teal-100);

  --focus-ring: 0 0 0 3px rgba(14, 17, 22, .22);
  --chart-1: var(--signal-700);
  --chart-2: var(--ink-900);
  --chart-3: var(--teal-500);
  --chart-4: var(--brass-500);
  --chart-5: var(--ink-300);

  /* --- Fontovi --- */
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-core: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Fluidna skala (odnos 1.25) + korekcije iz finalnog dizajna */
  --fs-2xs: .75rem;
  --fs-xs: .875rem;
  --fs-sm: 1rem;
  --fs-base: clamp(1rem, calc(.97rem + .18vw), 1.0625rem);
  --fs-lg: clamp(1.125rem, calc(1.07rem + .3vw), 1.25rem);
  --fs-xl: clamp(1.3125rem, calc(1.2rem + .55vw), 1.625rem);
  --fs-2xl: clamp(1.625rem, calc(1.42rem + .95vw), 2.125rem);
  --fs-3xl: clamp(2rem, calc(1.62rem + 1.7vw), 2.875rem);
  --fs-4xl: clamp(2.5rem, calc(1.9rem + 2.8vw), 4rem);
  --fs-5xl: clamp(3rem, calc(2.05rem + 4.4vw), 5.5rem);
  --text-base: 1rem;

  --leading-display: 1.04;
  --leading-heading: 1.14;
  --leading-snug: 1.35;
  --leading-body: 1.6;
  --leading-loose: 1.75;

  --tracking-display: -.025em;
  --tracking-heading: -.015em;
  --tracking-normal: 0em;
  --tracking-label: .09em;
  --tracking-mono: .02em;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --measure-prose: 64ch;
  --measure-narrow: 44ch;
  --measure-display: 22ch;

  /* --- Razmaci --- */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 144px;
  --space-6xl: 200px;

  /* Ritam sekcija: visoko pa usko */
  --section-pad-tall: clamp(80px, 11vw, 176px);
  --section-pad-base: clamp(64px, 7.5vw, 108px);
  --section-pad-tight: clamp(32px, 4vw, 56px);

  --gutter: clamp(22px, 5vw, 72px);
  --container-wide: 1320px;
  --container-base: 1120px;
  --container-text: 720px;
  --control-h-sm: 32px;
  --control-h-md: 40px;
  --control-h-lg: 52px;

  /* --- Radijusi i linije --- */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 18px;
  --radius-pill: 999px;
  --border-w-hair: 1px;
  --border-w-strong: 1.5px;
  --border-w-rule: 2px;
  --rule-display: 3px;

  /* --- Senke (tople) --- */
  --shadow-none: none;
  --shadow-hairline: 0 0 0 1px var(--border-hairline);
  --shadow-xs: 0 1px 2px rgba(8, 9, 12, .06);
  --shadow-sm: 0 2px 6px rgba(8, 9, 12, .07), 0 0 0 1px rgba(8, 9, 12, .04);
  --shadow-md: 0 8px 20px -6px rgba(8, 9, 12, .13), 0 0 0 1px rgba(8, 9, 12, .04);
  --shadow-lg: 0 24px 48px -16px rgba(8, 9, 12, .20), 0 0 0 1px rgba(8, 9, 12, .05);
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, .6);
  --scrim-bottom: linear-gradient(to top, rgba(8, 9, 12, .78), rgba(8, 9, 12, 0));
  --scrim-panel: linear-gradient(to bottom, rgba(8, 9, 12, .55), rgba(8, 9, 12, 0));
  --blur-nav: saturate(140%) blur(14px);

  /* --- Animacije --- */
  --dur-instant: 90ms;
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --dur-reveal: 680ms;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.65, .05, .36, 1);
  --ease-entrance: cubic-bezier(.16, .84, .44, 1);
  --transition-control: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  --reveal-shift: 18px;

  /* --- Sticky header / anchor offset (JS upisuje stvarnu visinu headera) --- */
  --sticky-header-height: 82px;
  --anchor-offset: 128px;
}

/* Svetli opseg: vraća "paper" semantiku unutar tamne sekcije (npr. bela kartica u Reporting sekciji) */
.verta-normal {
  --surface-page: var(--paper-50);
  --surface-card: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-sunken: var(--paper-100);
  --text-display: var(--ink-900);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-subtle: var(--ink-300);
  --text-accent: var(--signal-900);
  --border-hairline: var(--paper-200);
  --border-strong: var(--paper-300);
  --action-primary: var(--ink-900);
  --action-primary-fg: var(--paper-50);
  --action-quiet-hover: var(--paper-100);
  --text-link: var(--ink-900);
}

/* Tamni opseg: dodaj klasu na svaku sekciju sa tamnom pozadinom (header, hero, credentials, reporting, footer) */
.verta-inverse {
  --surface-page: var(--ink-900);
  --surface-card: var(--ink-800);
  --surface-raised: var(--ink-800);
  --surface-sunken: var(--ink-950);
  --surface-accent: var(--ink-800);
  --text-display: var(--paper-50);
  --text-body: var(--paper-200);
  --text-muted: var(--paper-300);
  --text-subtle: var(--ink-300);
  --border-hairline: rgba(247, 247, 244, .14);
  --border-strong: rgba(247, 247, 244, .26);
  --border-focus: var(--signal-500);
  --action-primary: var(--signal-500);
  --action-primary-fg: var(--ink-900);
  --action-primary-hover: var(--signal-400);
  --action-primary-press: var(--signal-700);
  --action-quiet-hover: rgba(247, 247, 244, .08);
  --focus-ring: 0 0 0 3px rgba(198, 242, 78, .35);
  --text-accent: var(--signal-500);
  --text-link: var(--signal-500);
  --text-link-hover: var(--paper-50);
  color: var(--text-body);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-reveal: 1ms;
    --reveal-shift: 0px;
  }
}

@media (max-width: 850px) {
  :root {
    --sticky-header-height: 72px;
    --anchor-offset: 112px;
  }
}

@media (max-width: 540px) {
  :root {
    --gutter: 22px;
    --section-pad-base: 64px;
  }
}


/* ===== 01-base.css ===== */
/* =====================================================================
   01 – OSNOVA I POMOĆNE KLASE
   Klase se dodeljuju Elementor elementima u: Advanced > Layout > CSS Classes.
   ===================================================================== */

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--signal-500);
  color: var(--ink-900);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid #769b25;
  outline-offset: 5px;
}

/* Elementor naslovi: uravnotežen prelom; naslovi renderovani kao <span> postaju blok
   (inače visinu omotača određuje osnovni font od 16px, pa su mali natpisi previsoki) */
.elementor-heading-title {
  text-wrap: balance;
}
.elementor-widget-heading span.elementor-heading-title {
  display: block;
}

/* Svaka sekcija sa CSS ID-jem staje ispod sticky headera pri skoku na anchor */
[id].e-con,
[id].verta-section,
#main {
  scroll-margin-top: max(var(--anchor-offset), calc(var(--sticky-header-height) + 32px));
}
#services {
  scroll-margin-top: max(var(--anchor-offset), calc(var(--sticky-header-height) + 40px));
}

/* ---------- Ritam sekcija ----------
   .verta-section       – standardni vertikalni razmak + bočni "gutter"
   .verta-section--tight/--tall – uže/šire varijante
   .verta-section--flush – bez vertikalnog razmaka (npr. credentials traka) */
.e-con.verta-section {
  padding-block: var(--section-pad-base);
  padding-inline: var(--gutter);
}
.e-con.verta-section--tight {
  padding-block: var(--section-pad-tight);
}
.e-con.verta-section--tall {
  padding-block: var(--section-pad-tall);
}
.e-con.verta-section--flush {
  padding-block: 0;
}

/* Unutrašnja širina sadržaja (kad kontejner nije "boxed") */
.site-width {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
}

/* ---------- Zrno (grain) preko tamnih sekcija ---------- */
.verta-grain {
  position: relative;
}
.verta-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
.verta-grain > * {
  position: relative;
  z-index: 1;
}

/* ---------- Tipografske pomoćne klase ---------- */

/* Mali mono natpis iznad naslova ("CRM AND DIGITAL MARKETING", "01 / WHO WE WORK WITH") */
.eyebrow,
.eyebrow .elementor-heading-title,
.eyebrow p {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.6;
}

/* Veliki serifni naslov sekcije; <em> unutar naslova je akcenat maslinaste boje */
.section-title .elementor-heading-title,
.section-title.elementor-heading-title,
h2.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 4.5vw, 4.3rem);
  line-height: 1.04;
  letter-spacing: -.025em;
  color: var(--text-display);
}
.section-title em {
  font-style: italic;
  font-weight: 400;
  color: #536238;
}
.verta-inverse .section-title em {
  color: var(--signal-500);
}

/* Section label sa crticom ispred ("—— WHAT WE DO"). Dodeli klasu heading widgetu. */
.v-sectionlabel .elementor-heading-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
}
.v-sectionlabel .elementor-heading-title::before {
  content: "";
  flex: none;
  height: 1px;
  width: var(--space-2xl);
  background: var(--border-strong);
}
.v-sectionlabel--accent .elementor-heading-title {
  color: var(--text-accent);
}
.v-sectionlabel--accent .elementor-heading-title::before {
  background: var(--signal-400);
}

/* Prigušen pomoćni tekst */
.text-muted,
.text-muted p {
  color: var(--text-muted);
}
.text-subtle,
.text-subtle p {
  color: var(--text-subtle);
}

/* Mono tekst (npr. "PDF · 3 PAGES", "NO RETAINER WITHOUT A DATED SCOPE") */
.mono-label,
.mono-label p,
.mono-label .elementor-heading-title {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* Ograničenje širine teksta (measure) */
.max-44ch { max-width: 44ch; }
.max-46ch { max-width: 46ch; }
.max-47ch { max-width: 47ch; }
.max-60ch { max-width: 60ch; }
.max-64ch { max-width: 64ch; }

/* ---------- Skip link (pristupačnost) ---------- */
.skip-link {
  position: fixed;
  top: -70px;
  left: 16px;
  z-index: 99;
  padding: 10px 16px;
  background: var(--signal-500);
  color: #0e1116;
}
.skip-link:focus {
  top: 12px;
}

/* ---------- Lucide SVG ikonice u Elementoru ----------
   Ikonice su "stroke" (linije). Elementor na svg postavlja fill – <g fill="none"> u fajlu to blokira,
   a boja linije se nasleđuje iz "color" (Icon widget: Primary Color radi jer postavlja i color). */
.elementor-icon svg.lucide,
.elementor-icon-list-icon svg.lucide,
.elementor-button-icon svg.lucide {
  fill: none;
  stroke: currentColor;
}
.elementor-icon-list-icon svg.lucide {
  color: inherit;
}

/* ---------- Hello tema: sakrij naslov strane koje gradi Elementor ---------- */
.elementor-page .page-header {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}


/* ===== 02-components.css ===== */
/* =====================================================================
   02 – KOMPONENTE DIZAJN SISTEMA (prilagođene Elementor markup-u)
   Klase se dodaju Elementor widgetu/kontejneru u Advanced > CSS Classes.
   ===================================================================== */

/* ---------- DUGMAD (Elementor Button widget) ----------
   .v-btn            osnovni izgled (dodaj UVEK)
   .v-btn--primary   tamno dugme (na tamnoj pozadini – lime), .v-btn--accent lime dugme,
   .v-btn--secondary obrub, .v-btn--ghost prozirno, .v-btn--link tekstualni link sa podvlakom
   .v-btn--sm / --md / --lg visina 32/40/52px (56px hero)                                        */
.v-btn .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: var(--font-core);
  font-weight: var(--weight-semibold);
  font-size: .875rem;
  line-height: 1;
  letter-spacing: .005em;
  border-radius: var(--radius-sm);
  border: var(--border-w-hair) solid transparent;
  padding: 0 var(--space-md);
  height: var(--control-h-md);
  white-space: nowrap;
  text-decoration: none;
  transition: var(--transition-control), transform var(--dur-instant) var(--ease-out);
}
.v-btn .elementor-button:active {
  transform: translateY(1px);
}
.v-btn .elementor-button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.v-btn .elementor-button-content-wrapper {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}
.v-btn .elementor-button-icon {
  display: inline-flex;
  transition: transform var(--dur-base) var(--ease-out);
}
.v-btn .elementor-button-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
}
.v-btn--lg .elementor-button-icon svg {
  width: 18px;
  height: 18px;
}
.v-btn--arrow .elementor-button:hover .elementor-button-icon {
  transform: translateX(4px);
}
.v-btn--sm .elementor-button {
  height: var(--control-h-sm);
  padding: 0 var(--space-sm);
  font-size: .8125rem;
}
.v-btn--lg .elementor-button {
  height: var(--control-h-lg);
  padding: 0 var(--space-lg);
  font-size: var(--fs-base);
}
.v-btn--primary .elementor-button {
  background: var(--action-primary);
  color: var(--action-primary-fg);
  box-shadow: var(--shadow-xs);
}
.v-btn--primary .elementor-button:hover {
  background: var(--action-primary-hover);
  color: var(--action-primary-fg);
}
.v-btn--accent .elementor-button {
  background: var(--action-accent);
  color: var(--action-accent-fg);
}
.v-btn--accent .elementor-button:hover {
  background: var(--action-accent-hover);
  color: var(--action-accent-fg);
}
.v-btn--secondary .elementor-button {
  background: transparent;
  color: var(--text-display);
  border-color: var(--border-strong);
}
.v-btn--secondary .elementor-button:hover {
  border-color: var(--action-primary);
  background: var(--action-primary);
  color: var(--action-primary-fg);
}
.v-btn--ghost .elementor-button {
  background: transparent;
  color: var(--text-display);
}
.v-btn--ghost .elementor-button:hover {
  background: var(--action-quiet-hover);
}
.v-btn--link .elementor-button {
  background: none;
  height: auto;
  padding: 0;
  border-radius: 0;
  color: var(--text-link);
  font-size: 1rem;
  line-height: 1.6;
}
.v-btn--link .elementor-button-text {
  border-bottom: 1px solid color-mix(in oklab, currentColor 35%, transparent);
  padding-bottom: 1px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.v-btn--link .elementor-button:hover {
  background: none;
  color: var(--text-link-hover);
}
.v-btn--link .elementor-button:hover .elementor-button-text {
  border-bottom-color: currentColor;
}
.v-btn--block .elementor-button {
  width: 100%;
}

/* ---------- KARTICA (Elementor Container) ----------
   .v-card + .v-card--flat/--raised/--sunken/--accent/--inverse, .v-card--interactive (hover podizanje)
   Padding i border-radius se NE postavljaju ovde – podešavaju se u Elementoru (Advanced > Padding, Style > Border),
   da bi kontrole u editoru zaista radile. */
.e-con.v-card {
  background: var(--surface-card);
  border: var(--border-w-hair) solid var(--border-hairline);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.e-con.v-card--raised {
  box-shadow: var(--shadow-sm);
}
.e-con.v-card--sunken {
  background: var(--surface-sunken);
  border-color: transparent;
}
.e-con.v-card--accent {
  background: var(--surface-accent);
  border-color: transparent;
}
.e-con.v-card--inverse {
  background: var(--ink-900);
  border-color: rgba(247, 247, 244, .14);
  color: var(--paper-200);
}
.e-con.v-card--interactive:hover {
  border-color: var(--ink-900);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.e-con.v-card--inverse.v-card--interactive:hover {
  border-color: var(--signal-500);
}
.v-card__index,
.v-card__index .elementor-heading-title {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: var(--tracking-label);
  color: var(--text-accent);
}
.v-card--inverse .v-card__index,
.v-card--inverse .v-card__index .elementor-heading-title {
  color: var(--signal-500);
}
.v-card__title .elementor-heading-title {
  font-family: var(--font-core);
  font-weight: var(--weight-semibold);
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: var(--tracking-heading);
  color: var(--text-display);
}
.v-card--inverse .v-card__title .elementor-heading-title {
  color: var(--paper-50);
}
.v-card__body,
.v-card__body p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.v-card--inverse .v-card__body,
.v-card--inverse .v-card__body p {
  color: var(--paper-300);
}

/* ---------- BEDŽ (mali tekst na pozadini, npr. "Example data") ----------
   Klasa ide na Heading widget; stil se primenjuje samo na unutrašnji element (ne na omotač). */
.v-badge .elementor-heading-title,
.v-badge p {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-core);
  font-size: .875rem;
  font-weight: var(--weight-semibold);
  padding: 3px 9px;
  border-radius: var(--radius-xs);
  border: var(--border-w-hair) solid transparent;
  background: var(--surface-muted);
  color: var(--text-body);
  line-height: 1.6;
}
.v-badge--signal .elementor-heading-title,
.v-badge--signal p {
  background: var(--signal-500);
  color: var(--ink-900);
}

/* ---------- TAG / PILULA (npr. "Market analysis") – koristi Icon List ili Heading widget ---------- */
.v-tag,
.v-tags .elementor-icon-list-item,
.v-tags .elementor-icon-list-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.v-tags .elementor-icon-list-item {
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  border: var(--border-w-hair) solid var(--border-strong);
  background: transparent;
  margin: 0;
}
.v-tags .elementor-icon-list-items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
}
.v-tags .elementor-icon-list-item:after {
  display: none;
}

/* ---------- TABOVI (Elementor Nested Tabs) ----------
   .v-tabs        podvučeni tabovi (Services)      .v-tabs--pills  pilule u sivom okviru (Reporting) */
.v-tabs .e-n-tabs,
.v-tabs--pills .e-n-tabs {
  /* Elementorove promenljive za boje naslova tabova – bez ovoga aktivni tab dobija podrazumevanu pozadinu */
  --n-tabs-title-background-color: transparent;
  --n-tabs-title-background-color-hover: transparent;
  --n-tabs-title-background-color-active: transparent;
  --n-tabs-title-white-space: nowrap;
}
.v-tabs--pills .e-n-tabs {
  --n-tabs-title-background-color-active: var(--surface-raised); /* aktivna pilula je bela */
}
.v-tabs .e-n-tabs-heading {
  gap: 20px;
  border-bottom: var(--border-w-hair) solid var(--border-hairline);
  flex-wrap: nowrap;
}
.v-tabs .e-n-tab-title {
  position: relative;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0 0 var(--space-sm);
  font-family: var(--font-core);
  font-size: 1rem;
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-control);
}
.v-tabs .e-n-tab-title:hover {
  color: var(--text-display);
}
.v-tabs .e-n-tab-title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: var(--border-w-rule);
  background: transparent;
  transition: background-color var(--dur-base) var(--ease-out);
}
.v-tabs .e-n-tab-title[aria-selected="true"] {
  color: var(--text-display);
  font-weight: var(--weight-semibold);
  background: none;
}
.v-tabs .e-n-tab-title[aria-selected="true"]::after {
  background: var(--action-accent);
}
.v-tabs .e-n-tab-title:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}
/* Brojač pored naslova taba (npr. "5") – .v-tab__count se dodaje kroz CSS content u fajlu sekcije */
.v-tabs .e-n-tab-title .v-tab__count,
.v-tabs .e-n-tab-title[data-count]::before {
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--text-subtle);
  margin-left: 5px;
}

.v-tabs--pills .e-n-tabs-heading {
  display: inline-flex;
  width: auto;
  gap: var(--space-2xs);
  background: var(--surface-sunken);
  padding: 4px;
  border-radius: var(--radius-md);
  border-bottom: 0;
}
.v-tabs--pills .e-n-tab-title {
  background: none;
  border: 0;
  padding: 6px var(--space-sm);
  border-radius: var(--radius-sm);
  font-family: var(--font-core);
  font-size: .875rem;
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  transition: var(--transition-control);
}
.v-tabs--pills .e-n-tab-title:hover {
  color: var(--text-display);
}
.v-tabs--pills .e-n-tab-title[aria-selected="true"] {
  background: var(--surface-raised);
  color: var(--text-display);
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-xs);
}
.v-tabs .e-n-tabs-content,
.v-tabs--pills .e-n-tabs-content {
  margin-top: 0;
}

/* ---------- STATISTIKA (broj + opis) ----------
   Kontejner .v-stat sa dva Heading widgeta: .v-stat__figure i .v-stat__label */
.v-stat__figure .elementor-heading-title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--text-display);
}
.v-stat__figure sup {
  font-family: var(--font-core);
  font-size: .38em;
  font-weight: var(--weight-semibold);
  vertical-align: super;
  letter-spacing: 0;
}
.v-stat__label .elementor-heading-title,
.v-stat__label p {
  font-family: var(--font-core);
  font-size: .875rem;
  color: var(--text-muted);
  max-width: 28ch;
}
.v-stat--accent .v-stat__figure .elementor-heading-title {
  color: var(--text-accent);
}

/* ---------- WORDMARK "Verta GLOBAL" (shortcode [verta_wordmark]) ---------- */
.v-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: .42em;
  font-family: var(--font-display);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--text-display);
  text-decoration: none;
  border: 0;
}
.verta-inverse .v-wordmark,
.v-wordmark--light {
  color: var(--paper-50);
}
.v-wordmark:hover {
  color: inherit;
}
.v-wordmark__name {
  font-size: 1em;
}
.v-wordmark__suffix {
  font-family: var(--font-mono);
  font-size: .3em;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
  transform: translateY(-.15em);
}

/* ---------- TOOLTIP (samo CSS, preko atributa data-tooltip na elementu sa klasom .v-tooltip) ---------- */
.v-tooltip {
  position: relative;
  display: inline-flex;
}
.v-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 40;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  padding: 6px 10px;
  background: var(--ink-900);
  color: var(--paper-50);
  font-size: .875rem;
  line-height: 1.4;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.v-tooltip:hover::after,
.v-tooltip:focus-within::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- HAIRLINE LINIJE (Elementor Divider se može zameniti ovim klasama) ---------- */
.rule-top { border-top: 1px solid var(--border-hairline); }
.rule-bottom { border-bottom: 1px solid var(--border-hairline); }
.rule-strong-top { border-top: 1px solid var(--border-strong); }


/* ===== 10-header.css ===== */
/* =====================================================================
   10 – HEADER (UAE Lite template "Verta Header", tip type_header)
   Elementor klase koje ovaj fajl očekuje:
     .verta-header .verta-inverse  – top-level kontejner (traka)
     .header-wordmark              – Shortcode widget sa [verta_wordmark]
     .verta-nav .header-nav        – UAE "Navigation Menu" widget (meni "Main navigation")
     .header-actions               – kontejner sa "Hong Kong" + dugme
     .header-location              – Heading "Hong Kong"
     .header-cta                   – Button "Book a call" (v-btn v-btn--primary v-btn--sm)
   UAE omotava template u <header id="masthead">, pa je sticky na njemu
   (sticky na unutrašnjem kontejneru ne bi radio – roditelj je iste visine).
   ===================================================================== */

/* Sticky traka: lepi se za vrh prozora */
#masthead:has(.verta-header) {
  position: sticky;
  top: 0;
  z-index: 30;
}
/* Ulogovan korisnik: WP admin bar je fiksiran iznad */
.admin-bar #masthead:has(.verta-header) {
  top: var(--wp-admin--admin-bar--height, 32px);
}
@media (max-width: 600px) {
  .admin-bar #masthead:has(.verta-header) {
    top: 0; /* admin bar ovde nije fiksiran */
  }
}

/* Traka: bočni gutter + zamućenje pozadine */
.e-con.verta-header {
  padding-inline: var(--gutter);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.e-con.verta-header > .e-con-inner {
  padding: 0;
}

/* Desni blok ne sme da se širi na 100% (Elementor podrazumevano za unutrašnji kontejner) */
.verta-header .e-con.header-actions {
  --width: auto;
  width: auto;
}

/* Wordmark */
.header-wordmark .v-wordmark {
  display: inline-flex;
}

/* ---------- Navigacija (desktop) ---------- */
.verta-header .verta-nav {
  margin-left: auto;
}
.verta-header .verta-nav .hfe-nav-menu__layout-horizontal .hfe-nav-menu {
  gap: 30px;
  flex-wrap: nowrap;
}
.verta-header .verta-nav ul.hfe-nav-menu::before,
.verta-header .verta-nav ul.hfe-nav-menu::after {
  display: none; /* UAE clearfix pseudo-elementi bi dobili gap kao flex stavke */
}
.verta-header .verta-nav .hfe-nav-menu > li.menu-item {
  margin: 0;
}
.verta-header .verta-nav .hfe-nav-menu .menu-item a.hfe-menu-item {
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
/* Aktivna stavka (klasu .nav-active postavlja scroll-spy u verta-site.js) */
.verta-header .verta-nav .hfe-nav-menu .menu-item a.hfe-menu-item.nav-active {
  color: var(--signal-500);
}
/* UAE fokus stil zamenjujemo globalnim (zeleni obrub) */
.verta-header .verta-nav .hfe-nav-menu .menu-item a.hfe-menu-item:focus-visible {
  outline: 2px solid #769b25;
  outline-offset: 5px;
}

/* Hamburger (UAE .hfe-nav-menu__toggle): dve linije 18px, u X kad je otvoren */
.verta-header .verta-nav .hfe-nav-menu__toggle {
  position: relative;
  width: 42px;
  height: 42px;
  margin: 0;
  border: 1px solid #555c65;
  border-radius: 4px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.verta-header .verta-nav .hfe-nav-menu__toggle .hfe-nav-menu-icon {
  display: none; /* UAE ikonica se ne koristi, crtamo linije ispod */
}
.verta-header .verta-nav .hfe-nav-menu__toggle::before,
.verta-header .verta-nav .hfe-nav-menu__toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 1px;
  margin-left: -9px;
  background: currentColor;
  transition: transform var(--dur-fast) var(--ease-out);
}
.verta-header .verta-nav .hfe-nav-menu__toggle::before {
  transform: translateY(-3.5px);
}
.verta-header .verta-nav .hfe-nav-menu__toggle::after {
  transform: translateY(3.5px);
}
.verta-header .verta-nav .hfe-nav-menu__toggle.hfe-active-menu::before {
  transform: rotate(45deg);
}
.verta-header .verta-nav .hfe-nav-menu__toggle.hfe-active-menu::after {
  transform: rotate(-45deg);
}
.verta-header .verta-nav .hfe-nav-menu__toggle:focus-visible {
  outline: 2px solid #769b25;
  outline-offset: 5px;
}

/* Dugme "Book a call": 40px visine, 0 20px */
.verta-header .header-cta .elementor-button {
  height: 40px;
  padding: 0 20px;
  font-size: .875rem;
}

/* ---------- ≤1100px ---------- */
@media (max-width: 1100px) {
  .verta-header .verta-nav .hfe-nav-menu__layout-horizontal .hfe-nav-menu {
    gap: 22px;
  }
}

/* ---------- 851–1024px: UAE ovde već prebacuje na hamburger (fiksni breakpoint 1024px),
   a dizajn tek na 850px – vraćamo horizontalni meni i poništavamo "dropdown" stil ---------- */
@media (min-width: 851px) and (max-width: 1024px) {
  .verta-header .verta-nav .hfe-layout-horizontal .hfe-nav-menu__toggle {
    display: none;
  }
  .verta-header .verta-nav .hfe-nav-menu.hfe-layout-horizontal nav.hfe-nav-menu__layout-horizontal,
  .verta-header .verta-nav .hfe-nav-menu.hfe-layout-horizontal nav.hfe-nav-menu__layout-horizontal .hfe-nav-menu {
    visibility: visible;
    opacity: 1;
    height: auto;
    width: auto;
    position: static;
    background: none;
    border: 0;
  }
  .verta-header .verta-nav nav.hfe-nav-menu__layout-horizontal li {
    width: auto;
  }
  .verta-header .verta-nav nav.hfe-nav-menu__layout-horizontal .hfe-nav-menu li.menu-item a.hfe-menu-item {
    padding: 8px 0;
    font-size: .875rem;
    background: none;
    color: #c5c9c8;
  }
  .verta-header .verta-nav nav.hfe-nav-menu__layout-horizontal .hfe-nav-menu li.menu-item a.hfe-menu-item:hover,
  .verta-header .verta-nav nav.hfe-nav-menu__layout-horizontal .hfe-nav-menu li.menu-item a.hfe-menu-item.nav-active {
    color: var(--signal-500);
  }
}

/* ---------- ≤850px: hamburger + padajući panel ispod trake ----------
   Boja panela (#11161d), boja/veličina linkova i padding 12px 0 su u Elementor kontrolama widgeta. */
@media (max-width: 850px) {
  /* redosled: wordmark | dugme | hamburger */
  .verta-header .header-actions {
    margin-left: auto;
  }
  .verta-header .verta-nav {
    order: 3;
    flex-grow: 0;
    margin-left: -12px; /* razmak dugme–hamburger 12px kao u dizajnu */
    position: static;
  }
  .verta-header .verta-nav .elementor-widget-container,
  .verta-header .verta-nav .hfe-nav-menu.hfe-layout-horizontal {
    position: static;
  }
  /* Panel: puna širina, odmah ispod trake (pozicioniran u odnosu na .verta-header) */
  .verta-header .verta-nav nav.hfe-nav-menu__layout-horizontal {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    padding: 20px var(--gutter);
    border-bottom: 1px solid #3d444a;
  }
  .verta-header .verta-nav nav.hfe-nav-menu__layout-horizontal .hfe-nav-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    background: none;
  }
  .verta-header .verta-nav nav.hfe-nav-menu__layout-horizontal .hfe-nav-menu li.menu-item a.hfe-menu-item {
    justify-content: flex-start;
    border: 0;
  }
  .verta-header .verta-nav nav.hfe-nav-menu__layout-horizontal .hfe-nav-menu li.menu-item a.hfe-menu-item:hover,
  .verta-header .verta-nav nav.hfe-nav-menu__layout-horizontal .hfe-nav-menu li.menu-item a.hfe-menu-item.nav-active {
    color: var(--signal-500);
  }
}

/* ---------- ≤540px ---------- */
@media (max-width: 540px) {
  .header-wordmark .v-wordmark {
    font-size: 30px !important; /* shortcode postavlja inline font-size 34px */
  }
  .verta-header .header-cta .elementor-button {
    padding: 0 13px;
  }
}

/* ---------- ≤380px ---------- */
@media (max-width: 380px) {
  .e-con.verta-header {
    --gap: 12px;
    --row-gap: 12px;
    --column-gap: 12px;
  }
}


/* ===== 11-hero.css ===== */
/* =====================================================================
   11 – HERO (pocetna, prva sekcija, anchor #top)
   Elementor klase: .hero (sekcija) > .hero-grid > .hero-copy (.hero-eyebrow, .hero-headline,
   .hero-description, .hero-actions > .hero-cta + .hero-link, .hero-note > .hero-note-rule + .hero-note-text)
   i .hero-visual > .hero-image-frame (.hero-photo, .photo-topline, .hero-caption)
   + HTML widget .hero-connection-widget > .hero-connection.
   Boje, fontovi, razmaci i visine su u Elementor kontrolama; ovde samo ostatak.
   ===================================================================== */

/* Vertikalni padding sekcije (.verta-section ga inace postavlja na --section-pad-base) */
.e-con.hero {
  padding-top: 76px;
  padding-bottom: 68px;
}
@media (min-width: 1600px) {
  .e-con.hero {
    padding-top: 92px;
    padding-bottom: 84px;
  }
  .e-con.hero-image-frame {
    min-height: 610px;
  }
}
@media (max-width: 1100px) {
  .e-con.hero { padding-top: 60px; }
}
@media (max-width: 850px) {
  .e-con.hero { padding-bottom: 40px; }
}
@media (max-width: 540px) {
  .e-con.hero { padding-top: 42px; }
}

/* Eyebrow: "Hong Kong" u spanu, odvojen tankom linijom */
.hero-eyebrow .elementor-heading-title {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.hero-eyebrow .elementor-heading-title span {
  color: #adb5bf;
  border-left: 1px solid #515762;
  padding-left: 18px;
}
@media (max-width: 540px) {
  .hero-eyebrow .elementor-heading-title { gap: 5px 10px; }
  .hero-eyebrow .elementor-heading-title span { padding-left: 10px; }
}

/* H1: svaki deo u svom redu, <em> lime */
.hero-headline .elementor-heading-title {
  text-wrap: initial;
}
.hero-headline .elementor-heading-title > span,
.hero-headline .elementor-heading-title > em {
  display: block;
}
.hero-headline .elementor-heading-title em {
  color: var(--signal-500);
  font-weight: 400;
}

/* Opis: sirina reda */
.hero-description p {
  max-width: 47ch;
}
@media (max-width: 850px) {
  .hero-description p { max-width: 60ch; }
  .e-con.hero-copy { max-width: 720px; }
}

/* Dugmad: visina 56px (velicina fonta --fs-base dolazi iz 02-components) */
.hero-actions .hero-cta .elementor-button {
  height: 56px;
}
.hero-actions .hero-link .elementor-button {
  color: var(--paper-100);
  font-size: .94rem;
}
@media (max-width: 1100px) {
  .hero-actions .hero-cta .elementor-button,
  .hero-actions .hero-link .elementor-button { font-size: .875rem; }
}
@media (max-width: 540px) {
  .hero-actions .hero-cta .elementor-button {
    font-size: .94rem;
    padding: 0 21px;
  }
}

/* Napomena ispod dugmadi */
@media (max-width: 540px) {
  .hero-note-text .elementor-heading-title { max-width: 35ch; }
}

/* Fotografija (Image widget .hero-photo) popunjava ceo okvir, ispod gradijenta i teksta */
.e-con.hero-image-frame > .elementor-widget.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  max-width: none;
  margin: 0;
}
.hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 52% center;
}
@media (max-width: 850px) {
  .hero-photo img { object-position: center 47%; }
}

/* Okvir fotografije: gradijent sa 4 tacke preko slike (Elementor overlay ima samo 2) */
.e-con.hero-image-frame {
  isolation: isolate;
}
.e-con.hero-image-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 12, 14, .4), transparent 24%, transparent 45%, rgba(7, 12, 14, .85));
}
.e-con.hero-image-frame > .e-con {
  position: relative;
  z-index: 2;
}

/* Ikonica u gornjem redu: bez viska visine reda */
.photo-topline-icon .elementor-icon-wrapper {
  line-height: 0;
}

/* Red "Campaigns -> CRM -> Reporting" (HTML widget, zbog aria-label) */
.hero-connection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 4px 0;
  color: #d7dbd0;
  font-family: var(--font-core);
  font-size: .8125rem;
  line-height: 1.6;
}
.hero-connection svg {
  flex: none;
  color: var(--signal-500);
  opacity: .7;
}
@media (max-width: 540px) {
  .hero-connection { font-size: .75rem; }
}

/* Link-dugme u hero sekciji ("Explore our services") je .94rem kao u dizajnu; podrazumevano .v-btn--link je 1rem */
.e-con.hero .v-btn--link .elementor-button {
  font-size: .94rem;
}


/* ===== 12-credentials.css ===== */
/* =====================================================================
   12 – CREDENTIALS TRAKA (tamna traka ispod hero sekcije)
   Elementor klase: .credentials (sekcija) > .credentials-grid > 4x .credential
   (treci ima i .credential--wide) sa .credential-figure + .credential-label(--wide).
   Rasporedi, ivice, boje i fontovi su u Elementor kontrolama; ovde samo ostatak.
   ===================================================================== */

/* Vertikalni padding (klasa .verta-section--flush ga inace nulira) */
.e-con.credentials {
  padding-block: 32px;
}
@media (max-width: 540px) {
  .e-con.credentials { padding-block: 28px; }
}

/* Broj ne sme da se lomi ("48 hrs") */
.credential-figure .elementor-heading-title {
  white-space: nowrap;
}

/* Opis: ogranicena sirina, obican prelom (ne "balance" iz 01-base) */
.credential-label .elementor-heading-title {
  max-width: 22ch;
  text-wrap: wrap;
}
.credential-label--wide .elementor-heading-title {
  max-width: 32ch;
}


/* ===== 13-services.css ===== */
/* =====================================================================
   13 – SERVICES ("What we do")
   Elementor klase:
   .services-section (sekcija, #services) > .services-header > .services-heading
     (.v-sectionlabel + .services-title)
   .services-tabs (Nested Tabs, + .v-tabs) > .services-panel > .services-grid (grid kontejner)
     > .service-card.service-item (.v-card, prva kartica + .service-feature .v-card--inverse)
       .service-index / .service-title / .service-body / .service-workflow-wrap (HTML) / .service-icon
   .services-scope (.services-scope-label + .services-tags Icon List)
   Padding, pozadina, ivice i min-visina kartica su u Elementoru; ovde samo ono što ne može.
   ===================================================================== */

/* ---------- Naslov sekcije ---------- */
.services-title .elementor-heading-title {
  max-width: 18ch;
}
.services-heading {
  max-width: 640px;
}
.services-section .v-sectionlabel .elementor-heading-title {
  line-height: 1.6;
}

/* ---------- Tabovi: naslovi tabova u redu sa H2 (desno), sadržaj ispod ---------- */
.services-tabs .e-n-tabs-heading {
  align-self: flex-end;
  position: relative;
  z-index: 2;
}
/* Kad H2 (≈331px) + razmak 32 + tabovi (≈280px) staju u red (≥714px): podigni traku tabova
   u red naslova (visina trake ≈ 38px + 1px linija). Uže: tabovi padaju ispod naslova, levo, 32px razmak. */
@media (min-width: 714px) {
  .services-tabs .e-n-tabs-heading {
    margin-top: -39px;
  }
}
@media (max-width: 713px) {
  .services-tabs {
    --n-tabs-heading-justify-content: flex-start;
  }
  .services-tabs .e-n-tabs-heading {
    align-self: flex-start;
    margin-top: 32px;
  }
}
.services-tabs .e-n-tab-title[aria-selected="true"] {
  font-weight: 600;
}
.services-tabs .e-n-tab-title[aria-selected="true"] .e-n-tab-title-text {
  font-weight: 600;
}
/* Brojač "5" pored naslova (oba taba imaju po 5 usluga – ako se broj promeni, menja se ovde) */
.services-tabs .e-n-tab-title-text::after {
  content: "5";
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 400;
  color: var(--text-subtle);
  margin-left: 5px;
}
.services-tabs .e-n-tab-title:focus-visible {
  outline: 2px solid #769b25;
  outline-offset: 3px;
  box-shadow: none;
}

/* ---------- Mreža kartica: 2 × span 3 + 3 × span 2 ---------- */
.e-con.services-grid {
  grid-template-rows: none;
  grid-auto-rows: auto;
}
.e-con.services-grid > .service-item {
  grid-column: span 2;
  min-width: 0;
}
.e-con.services-grid > .service-item:nth-child(-n+2) {
  grid-column: span 3;
}

/* ---------- Kartica ---------- */
/* 02-components (.e-con.v-card) gazi Elementor padding/radius – vraćamo vrednosti iz Elementor kontrola */
.e-con.v-card.service-card {
  padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
  border-radius: var(--border-radius);
  box-shadow: none;
  height: 100%;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.e-con.v-card.service-card:hover {
  transform: translateY(-3px);
}
/* span naslovi su inline – visinu reda određuje omotač widgeta, zato line-height i na njemu */
.service-card .service-index,
.service-card .service-index .elementor-heading-title {
  font-size: .75rem;
  line-height: 1.6;
}
.service-card .service-title .elementor-heading-title {
  max-width: 27ch;
  text-wrap: pretty;
}
.service-card .service-body p {
  margin: 0;
}
.service-card .service-icon {
  margin-top: auto;
  padding-top: 8px;
}
.service-card .service-icon .elementor-icon {
  display: flex;
}
.service-card .service-icon svg {
  width: 24px;
  height: 24px;
}

/* Druga kartica: svetlo-zelena, veći naslov */
.service-item:nth-child(2) .service-title .elementor-heading-title {
  font-size: 1.65rem;
  max-width: 23ch;
}
/* max-width ide na <p>: Elementor (.elementor.elementor .e-con>.elementor-widget) forsira max-width:100% na widgetu */
.service-item:nth-child(2) .service-body p {
  max-width: 38ch;
}

/* ---------- Istaknuta (prva) kartica: tamna, tekst levo + dijagram desno ---------- */
.e-con.service-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 174px;
  column-gap: 24px;
  row-gap: 16px;
  align-content: start;
}
.service-feature > .elementor-widget {
  grid-column: 1;
  width: auto;
  max-width: none;
}
.service-feature .service-title .elementor-heading-title {
  font: 400 1.9rem/1.14 var(--font-display);
  letter-spacing: -.01em;
  max-width: none;
  color: #fff;
}
.service-feature .service-body,
.service-feature .service-body p {
  font-size: .9375rem;
  line-height: 1.6;
  color: #dfe2dc;
}
.service-feature > .service-workflow-wrap {
  grid-column: 2;
  grid-row: 1 / span 4;
  align-self: center;
  min-width: 0;
}

/* ---------- Dijagram toka (HTML widget) ---------- */
.service-workflow {
  margin: 0;
  min-width: 0;
  width: 100%;
  padding-left: 18px;
  border-left: 1px solid #354138;
}
.service-workflow svg {
  display: block;
  fill: none;
  stroke: currentColor;
}
.service-workflow figcaption {
  font: 400 .6875rem/1.5 var(--font-mono);
  letter-spacing: .035em;
  text-transform: uppercase;
  color: #b1c590;
  margin-bottom: 18px;
}
.campaign-flow {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0;
  margin: 0;
}
.campaign-flow > li {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  background: #202a23;
  border: 1px solid #48583d;
  border-radius: 4px;
  padding: 12px 10px;
  color: #edf2e5;
  font-size: .75rem;
  line-height: 1.4;
}
.campaign-flow > li + li::before {
  content: "";
  position: absolute;
  left: 18px;
  height: 18px;
  width: 1px;
  bottom: 100%;
  background: #91b35a;
}
.campaign-flow > li:last-child {
  background: #c6f24e;
  border-color: #c6f24e;
  color: #1b2612;
}
.workflow-node-icon {
  display: inline-flex;
  color: #c6f24e;
  flex: none;
}
.campaign-flow > li:last-child .workflow-node-icon {
  color: inherit;
}
.workflow-channels {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-top: 3px;
}
.workflow-channels > span {
  border: 1px solid #4a5841;
  background: #172019;
  border-radius: 3px;
  padding: 3px 5px;
  color: #c6d4b3;
  font-size: .6875rem;
}
.crm-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.crm-source,
.crm-destination {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid #50653d;
  border-radius: 5px;
  background: #23301e;
  color: #dff0c3;
  padding: 13px 8px;
  font-size: .75rem;
  line-height: 1.4;
}
.crm-source {
  flex-direction: column;
  padding: 14px 8px;
  gap: 7px;
}
.crm-source .v-icon {
  color: var(--signal-500);
}
.crm-branches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 30px 0;
  position: relative;
}
.crm-branches::before,
.crm-branches::after {
  content: "";
  height: 15px;
  width: 50%;
  position: absolute;
  left: 25%;
  border: 1px solid #859b64;
}
.crm-branches::before {
  top: 15px;
  border-bottom: 0;
}
.crm-branches::after {
  bottom: 15px;
  border-top: 0;
}
.crm-branches > span {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #18211b;
  border: 1px solid #4e6153;
  border-radius: 4px;
  padding: 12px 2px;
  color: #c6d3cb;
  font-size: .6875rem;
  line-height: 1.3;
}
.crm-source::after,
.crm-destination::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  height: 15px;
  background: #859b64;
}
.crm-source::after {
  top: 100%;
}
.crm-destination::before {
  bottom: 100%;
}
.crm-destination {
  background: #d2e9ec;
  color: #12353a;
  border-color: #d2e9ec;
}

/* ---------- "Subject to scope" + pilule ---------- */
.services-scope .services-scope-label,
.services-scope .services-scope-label .elementor-heading-title {
  font-size: .75rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.services-tags .elementor-icon-list-item,
.services-tags .elementor-icon-list-text {
  line-height: 1.6;
}
/* Pilule se prelamaju zajedno sa natpisom (kao u dizajnu): omotač widgeta i <ul> "nestaju" iz rasporeda.
   Samo na frontendu – u editoru widget ostaje selektabilan. */
/* Elementor inline lista dodaje bočne margine stavkama – razmak daje gap kontejnera */
.services-scope .services-tags .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item {
  margin: 0;
}
.services-scope .elementor-widget.services-tags .elementor-icon-list-items.elementor-inline-items {
  margin-inline: 0;
}
body:not(.elementor-editor-active) .services-scope > .services-tags,
body:not(.elementor-editor-active) .services-scope > .services-tags .elementor-icon-list-items {
  display: contents;
}

/* ---------- ≤1100px: dijagram ispod teksta, tok vodoravno ---------- */
@media (max-width: 1100px) {
  .e-con.service-feature {
    display: flex;
    gap: 16px;
  }
  .service-feature > .service-workflow-wrap {
    align-self: stretch;
    margin-top: 4px;
  }
  .service-workflow {
    padding: 18px 0 0;
    border-left: 0;
    border-top: 1px solid #354138;
  }
  .service-workflow figcaption {
    margin-bottom: 12px;
  }
  .campaign-flow {
    flex-direction: row;
    gap: 14px;
    align-items: stretch;
  }
  .campaign-flow > li {
    flex: 1;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 10px 8px;
  }
  .campaign-flow > li + li::before {
    left: auto;
    right: 100%;
    height: 1px;
    width: 14px;
    bottom: 50%;
  }
  .workflow-channels {
    display: none;
  }
  .crm-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
  }
  .crm-source,
  .crm-destination {
    flex-direction: column;
    gap: 6px;
    text-align: center;
    padding: 12px 6px;
  }
  .crm-source::after,
  .crm-destination::before {
    left: auto;
    top: 50%;
    height: 1px;
    width: 14px;
    bottom: auto;
  }
  .crm-source::after {
    right: -15px;
  }
  .crm-destination::before {
    left: -15px;
  }
  .crm-branches {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 0;
  }
  .crm-branches::before,
  .crm-branches::after {
    display: none;
  }
  .crm-branches > span {
    padding: 8px 3px;
  }
  .service-feature > .service-icon {
    display: none;
  }
}

/* ---------- ≤850px: kartice po dve (span 3), poslednja preko cele širine ---------- */
@media (max-width: 850px) {
  .e-con.services-grid > .service-item,
  .e-con.services-grid > .service-item:nth-child(-n+2) {
    grid-column: span 3;
  }
  .e-con.services-grid > .service-item:last-child {
    grid-column: span 6;
  }
  /* naslov istaknute kartice ostaje 1.9rem (u dizajnu jače pravilo pobeđuje 1.8rem) */
  .service-item:nth-child(2) .service-title .elementor-heading-title {
    font-size: 1.3rem;
  }
}

/* ---------- ≤540px: jedna kolona, tabovi preko cele širine ---------- */
@media (max-width: 540px) {
  .e-con.services-grid > .service-item,
  .e-con.services-grid > .service-item:nth-child(-n+2),
  .e-con.services-grid > .service-item:last-child {
    grid-column: 1 / -1;
  }
  .services-tabs .e-n-tabs-heading {
    width: 100%;
    align-self: stretch;
  }
  .services-tabs .e-n-tab-title {
    padding-top: 7px;
  }
  .services-tabs .e-n-tab-title-text {
    line-height: 1.6;
  }
  .service-card .service-title .elementor-heading-title {
    font-size: 1.3rem;
  }
  .service-item:nth-child(2) .service-title .elementor-heading-title {
    font-size: 1.45rem;
  }
  .service-feature .service-title .elementor-heading-title {
    font-size: 1.9rem;
    max-width: 24ch;
  }
}


/* ===== 14-deliverables.css ===== */
/* =====================================================================
   14 – DELIVERABLES ("What lands on your desk")
   Elementor klase: .deliverables-section > .deliverables-head (.deliverables-intro >
   .deliverables-label + .deliverables-title, .deliverables-note) i .deliverables-list >
   4x .deliverable-row (.deliverable-index, .deliverable-title, .deliverable-body, .deliverable-icon).
   Grid kolone, razmaci, ivice, hover pozadina i fontovi su u Elementor kontrolama.
   ===================================================================== */

/* Naslov: sirina reda */
.deliverables-title .elementor-heading-title {
  max-width: 20ch;
}

/* Telefon: opis prelazi u drugi red (kolona 2), ikonica ostaje gore desno */
@media (max-width: 540px) {
  .deliverables-section .deliverables-label .elementor-heading-title {
    font-size: .6875rem;
  }
  .e-con.deliverable-row > .deliverable-body {
    grid-column: 2;
    grid-row: 2;
  }
  .e-con.deliverable-row > .deliverable-icon {
    grid-column: 3;
    grid-row: 1;
  }
}


/* ===== 15-approach.css ===== */
/* =====================================================================
   15 – APPROACH / PROCES ("How we work", anchor #approach)
   Elementor klase: .approach-section > .process-heading (.process-label + .process-title),
   .process-flow (grid) > 4x .process-step (prvi i .process-step--first) sa
   .process-step-top (.process-index + .process-direction), .process-stage
   (.process-stage-title + .process-duration) i .process-text; zatim .process-promise
   (.process-promise-icon + .process-promise-text).
   Kolone (4/2/1), padding, boje i fontovi su u Elementor kontrolama; ovde: linije izmedju
   koraka, prelom 851–900px (Elementor nema taj breakpoint) i raspored na telefonu.
   ===================================================================== */

/* Naslov: sirina reda */
.process-title .elementor-heading-title {
  max-width: 27ch;
}

/* Linije izmedju koraka */
.e-con.process-step + .e-con.process-step {
  border-left: 1px solid #d8ddce;
}

.process-duration .elementor-heading-title {
  white-space: nowrap;
}

.process-direction .elementor-icon-wrapper,
.process-promise-icon .elementor-icon-wrapper {
  line-height: 0;
}

/* Obecanje: sirina teksta i naglasak */
.process-promise-text p {
  max-width: 105ch;
}
.process-promise-text strong {
  color: #303c28;
  font-weight: 600;
}

/* 851–900px: dizajn vec ovde prelazi na 2 kolone (Elementor to radi tek od 850px) */
@media (min-width: 851px) and (max-width: 900px) {
  .elementor .e-con.e-grid.process-flow {
    --e-con-grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .elementor .e-con.e-flex.process-step {
    --padding-top: 26px;
    --padding-right: 26px;
    --padding-bottom: 26px;
    --padding-left: 26px;
  }
  .elementor .e-con.e-flex.process-step-top {
    --margin-bottom: 24px;
  }
  .elementor .e-con.e-flex.process-stage {
    --flex-direction: row;
    --align-items: center;
  }
}

/* Do 900px: 2 kolone – treci korak bez leve linije, donji red sa gornjom linijom */
@media (max-width: 900px) {
  .e-con.process-step:nth-child(3) {
    border-left: 0;
  }
  .e-con.process-step:nth-child(n+3) {
    border-top: 1px solid #d8ddce;
  }
}

/* Telefon: jedna kolona, broj levo (42px), naziv i tekst desno */
@media (max-width: 540px) {
  .e-con.process-step + .e-con.process-step {
    border-left: 0;
    border-top: 1px solid #d8ddce;
  }
  .elementor .e-con.e-flex.process-step {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px 18px;
  }
  .elementor .e-con.e-flex.process-step-top {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: block;
    padding-top: 2px;
  }
  .elementor .e-con.e-flex.process-stage {
    grid-column: 2;
    flex-wrap: wrap;
    --gap: 10px;
    gap: 10px;
  }
  .e-con.process-step > .process-text {
    grid-column: 2;
  }
}
@media (max-width: 420px) {
  .elementor .e-con.e-flex.process-stage {
    --align-items: baseline;
    align-items: baseline;
  }
}


/* ===== 16-example.css ===== */
/* =====================================================================
   16 – ENGAGEMENT EXAMPLE (#engagement-example) + zajednička pravila .new-section
   Elementor klase: .example-section .new-section (sekcija), .example-grid (grid),
   .example-start / .example-deliverables / .example-completion (kolone),
   .example-list (Icon List), .example-text, .sample-disclaimer (Text Editor)
   Boje, fontovi, razmaci, ivice i prelomi kolona su u Elementor kontrolama.
   ===================================================================== */

/* Zajedničko za "nove" sekcije (16, 19, 20; 18 menja padding u 18-company.css) */
.e-con.verta-section.new-section {
  padding-block: 84px;
}
.new-section .section-title .elementor-heading-title {
  font-size: clamp(2.6rem, 4.1vw, 4rem);
}
.new-section .v-sectionlabel .elementor-heading-title {
  line-height: 1.65; /* u dizajnu je label <p> sa line-height 1.65 */
}
.new-section .section-title em {
  color: #546731;
}
/* Hello tema daje <p> donju marginu – u ovim sekcijama je nema; prelom kao u dizajnu (pretty) */
.new-section .elementor-widget-text-editor p {
  text-wrap: pretty;
}
.new-section .elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

.example-section .section-title .elementor-heading-title {
  max-width: 25ch;
}

/* Grid kolone ne smeju da se šire preko svog udela */
.example-grid > .e-con {
  min-width: 0;
}

/* Ikona "check": Elementor boji samo fill, a Lucide linije koriste currentColor */
.example-list .elementor-icon-list-icon svg {
  flex: none;
  color: #527027;
}

@media (max-width: 850px) {
  .e-con.verta-section.new-section {
    padding-block: 64px;
  }
}

@media (max-width: 540px) {
  .e-con.verta-section.new-section {
    padding-block: 56px;
  }
  .new-section .section-title .elementor-heading-title {
    font-size: 2.7rem;
  }
}


/* ===== 17-reporting.css ===== */
/* =====================================================================
   17 – REPORTING ("You see the same numbers we do")
   Elementor klase:
   .reporting-section (sekcija, #reporting, + .verta-inverse .verta-grain)
   .reporting-layout (grid) > .reporting-copy (.reporting-title, .reporting-lead,
     .reporting-commitments > .reporting-commitment > .reporting-commitment-title/-body)
   > .report-card (.v-card .v-card--raised .verta-normal):
       .report-card-head (.report-card-title, .report-info-wrap HTML sa .v-tooltip, .report-badge .v-badge)
       .report-example-note, .report-tabs (Nested Tabs + .v-tabs--pills) > .report-panel > .chart-row (Progress)
       .report-footer (.report-pdf-label, .report-download .v-btn--link .verta-download)
   ===================================================================== */

/* ---------- Sekcija: fiksni vertikalni razmak iz dizajna (108 / 72) ---------- */
.e-con.reporting-section {
  padding-block: 108px;
}
.reporting-section .v-sectionlabel .elementor-heading-title {
  line-height: 1.6;
}

/* ---------- Raspored: kolone 1fr / 1.1fr ---------- */
.e-con.reporting-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}
/* Elementor grid podrazumevano pravi 2 reda iste visine – ovde redovi prate sadržaj */
.e-con.reporting-layout,
.e-con.reporting-commitments {
  grid-template-rows: none;
  grid-auto-rows: auto;
}

/* ---------- Leva kolona ---------- */
.reporting-title .elementor-heading-title {
  max-width: 22ch;
}
/* max-width ide na <p>: Elementor forsira max-width:100% na samom widgetu */
.reporting-lead p {
  max-width: 46ch;
}
.reporting-lead p,
.reporting-commitment-body p,
.report-example-note p {
  margin: 0;
}
.reporting-lead,
.reporting-lead p {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text-muted);
}
.reporting-commitment {
  min-width: 0;
}
.reporting-commitment-title .elementor-heading-title {
  max-width: 12ch;
  letter-spacing: -.01em;
}
.reporting-commitment-body,
.reporting-commitment-body p {
  color: #c7cec5;
  font-size: .9375rem;
  line-height: 1.6;
}

/* ---------- Bela kartica ---------- */
/* 02-components (.e-con.v-card) gazi Elementor padding/radius – vraćamo vrednosti iz Elementor kontrola */
.e-con.v-card.report-card {
  padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
  border-radius: var(--border-radius);
  box-shadow: 14px 14px 0 #232b1e;
  color: var(--text-body);
}
.report-card-head > .report-card-heading {
  width: auto;
}
.report-card-title .elementor-heading-title {
  margin: 0;
}

/* Info ikonica sa tooltipom (dugme 32×32 kao .v-iconbtn--sm u dizajnu) */
.report-info-wrap {
  line-height: 0;
}
.report-info {
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text-body);
  cursor: help;
  transition: var(--transition-control);
}
.report-info:hover,
.report-info:focus-visible {
  background: var(--action-quiet-hover);
  color: var(--text-display);
}
.report-info:focus-visible {
  outline: 2px solid #769b25;
  outline-offset: 2px;
}
.report-info svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
}

/* Bedž "Example data": 02 stil važi i za omotač widgeta – omotač neutrališemo */
.report-card .elementor-widget.v-badge {
  padding: 0;
  background: none;
  border: 0;
}
.report-badge .elementor-heading-title {
  line-height: 1.6;
}

.report-example-note,
.report-example-note p {
  font-size: .875rem;
  line-height: 1.5;
  color: #576052;
}

/* ---------- Pilule 30 / 90 / YTD ---------- */
/* Aktivna pilula je bela (02 postavlja providnu pozadinu za sve tabove) */
.report-tabs .e-n-tabs {
  --n-tabs-title-background-color-active: var(--surface-raised);
}
.report-tabs .e-n-tabs-heading {
  display: flex;
  width: 100%;
}
.report-tabs .e-n-tab-title[aria-selected="true"],
.report-tabs .e-n-tab-title[aria-selected="true"] .e-n-tab-title-text {
  font-weight: 600;
}
.report-tabs .e-n-tab-title:focus-visible {
  outline: 2px solid #769b25;
  outline-offset: 2px;
}

/* ---------- Redovi grafikona (Progress widget) ----------
   Red = grid: naziv | traka | vrednost. Vrednost (.elementor-progress-text) je apsolutno
   pozicionirana u desnu kolonu, van trake (omotač trake nije "positioned"). */
.chart-row.elementor-widget-progress {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 35px;
  align-items: center;
  column-gap: 12px;
}
.chart-row .elementor-title {
  grid-column: 1;
  font-family: var(--font-core);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.chart-row .elementor-progress-wrapper {
  grid-column: 2;
  position: static;
  margin: 0;
}
.chart-row .elementor-progress-bar {
  border-radius: 999px;
  animation: verta-bar-grow 1s var(--ease-out, ease-out);
}
.chart-row .elementor-progress-text {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 35px;
  padding: 0;
  overflow: visible;
  text-align: right;
  font-family: var(--font-mono);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--text-display);
}
/* Pri prikazu taba (display:none -> vidljivo) animacija se ponovo pokreće od nule */
@keyframes verta-bar-grow {
  from {
    width: 0;
  }
}

/* ---------- Podnožje kartice ---------- */
.report-footer .report-pdf-label {
  font-size: .75rem;
  line-height: 1.6;
}
.report-footer .report-download {
  line-height: 0;
}
.report-download .elementor-button {
  font-size: .8125rem;
  line-height: 1.6;
}
.report-download .elementor-button-icon svg {
  width: 15px;
  height: 15px;
}

/* ---------- ≤850px: jedna kolona ---------- */
@media (max-width: 850px) {
  .e-con.reporting-section {
    padding-block: 72px;
  }
  .e-con.reporting-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .reporting-title .elementor-heading-title {
    max-width: 19ch;
  }
  .e-con.reporting-commitments {
    max-width: 620px;
  }
  .e-con.v-card.report-card {
    max-width: 700px;
    width: 100%;
  }
}

/* ---------- ≤540px ---------- */
@media (max-width: 540px) {
  .e-con.v-card.report-card {
    box-shadow: 7px 7px 0 #232b1e;
  }
  .reporting-commitment-body,
  .reporting-commitment-body p {
    font-size: .875rem;
  }
  .report-tabs .e-n-tabs-heading {
    align-self: stretch;
    width: 100%;
    gap: 0;
  }
  .report-tabs .e-n-tab-title {
    flex: 1;
  }
  .chart-row.elementor-widget-progress {
    grid-template-columns: 72px minmax(0, 1fr) 25px;
    column-gap: 8px;
  }
  .chart-row .elementor-title,
  .chart-row .elementor-progress-text {
    font-size: .75rem;
  }
  .chart-row .elementor-progress-text {
    width: 25px;
  }
  .report-download .elementor-button {
    font-size: .75rem;
    white-space: normal;
    text-align: left;
  }
}


/* ===== 18-company.css ===== */
/* =====================================================================
   18 – COMPANY (#company)
   Elementor klase: .company-section, .company-story (grid), .company-copy,
   .company-lead, .company-text, .company-photo (figure) > .company-photo-img (Image)
   + .company-photo-caption, .company-facts, .company-fact, .company-record
   ===================================================================== */

/* Company koristi standardni ritam sekcije umesto 84px iz .new-section */
.e-con.verta-section.new-section.company-section {
  padding-block: var(--section-pad-base);
}

.company-story .section-title .elementor-heading-title {
  max-width: 20ch;
}
/* max-width ide na <p> – Elementor widgetu nameće max-width:100% */
.company-lead p,
.company-text p {
  max-width: 64ch;
}

/* Fotografija: slika popunjava ceo okvir, preko nje gradijent od 40% nadole, pa natpis */
.e-con.company-photo {
  position: relative;
  /* kao u dizajnu: fotografija zadržava svoj odnos stranica (1400x934), osim ako je tekst viši */
  aspect-ratio: 1400 / 934;
}
.company-photo .company-photo-img {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.company-photo .company-photo-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.e-con.company-photo::after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(transparent, rgba(10, 20, 24, .7));
}
.e-con.company-photo-caption {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  width: auto;
  z-index: 2;
}

.company-fact {
  min-width: 0;
}

@media (max-width: 850px) {
  .e-con.company-photo {
    aspect-ratio: auto; /* visina iz min-height (300 / 260px) */
  }
  .company-story .section-title .elementor-heading-title {
    max-width: 26ch;
  }
}

@media (max-width: 540px) {
  .e-con.company-photo-caption {
    left: 18px;
    right: 18px;
    bottom: 18px;
  }
  .company-record .company-record__item:last-child .elementor-heading-title {
    max-width: 38ch;
  }
}


/* ===== 19-data.css ===== */
/* =====================================================================
   19 – DATA HANDLING & SECURITY (#data-handling)
   Elementor klase: .data-section, .data-heading (grid), .data-heading__text,
   .data-principles (grid), .data-principle (article), .data-principle-top,
   .data-principle-icon (Icon), .data-principle__title, .data-principle__text
   ===================================================================== */

.data-heading .section-title .elementor-heading-title {
  max-width: 22ch;
}
/* max-width ide na <p> – Elementor widgetu nameće max-width:100% */
.data-heading__text p {
  max-width: 44ch;
}

.data-principle {
  min-width: 0;
}
/* Ikona bez dodatne visine reda */
.data-principle-icon .elementor-icon-wrapper {
  display: flex;
  line-height: 0;
}

@media (max-width: 850px) {
  .data-heading__text p {
    max-width: 66ch;
  }
}


/* ===== 20-faq.css ===== */
/* =====================================================================
   20 – FAQ (#faq)
   Elementor klase: .faq-section, .faq-heading, .faq-cta (Button .v-btn--link),
   .faq-grid (grid), .faq-list (Nested Accordion, x2: .faq-list--1 / --2),
   .faq-answer-wrap (unutrašnji kontejner), .faq-answer (Text Editor)
   Razmaci, boje naslova/ikone i padding su u kontrolama widgeta; ovde je
   samo ono što Nested Accordion ne ume: ivice po stavci, rotacija "+" i reset.
   ===================================================================== */

.faq-heading .section-title .elementor-heading-title {
  max-width: 22ch;
}

.faq-grid > .elementor-widget {
  min-width: 0;
}

/* Ivica ide na celu stavku (pitanje + odgovor), ne na naslov */
.faq-list .e-n-accordion-item {
  border-top: 1px solid #d6dbd0;
}
.faq-list .e-n-accordion-item:last-child {
  border-bottom: 1px solid #d6dbd0;
}

/* Naslov: tekst levo, "+" desno (poravnanje "start" u widgetu da bi razmak od 24px radio) */
.faq-list .e-n-accordion-item-title {
  justify-content: space-between;
}
.faq-list .e-n-accordion-item-title-header {
  flex: 1 1 auto;
}
/* Kit globalno stilizuje h3 (Hanken 600, boja) – ovde naslov nasleđuje iz summary */
.faq-list .e-n-accordion-item-title-header .e-n-accordion-item-title-text {
  color: inherit;
  font-family: var(--font-core);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-wrap: pretty;
}

/* "+" ikona (Lucide SVG sa stroke linijama) i rotacija u "×" kad je otvoreno */
/* Crtež 20px (≈ glif "+" od 23px u dizajnu); okvir 14x23px kao širina/visina glifa u dizajnu */
.faq-list .e-n-accordion-item-title-icon {
  flex: none;
  width: 14px;
  min-height: 23px;
  justify-content: center;
  transition: transform .2s;
}
.faq-list .e-n-accordion-item-title-icon svg {
  fill: none;
  stroke: currentColor;
  color: #6b8044;
  width: var(--n-accordion-icon-size);
  height: var(--n-accordion-icon-size);
}
.faq-list .e-n-accordion-item-title-icon svg g {
  stroke-width: 1.9;
}
.faq-list .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon {
  transform: rotate(45deg);
}

/* Fokus sa tastature */
.faq-list .e-n-accordion-item-title:focus-visible {
  outline: 2px solid #769b25;
  outline-offset: 4px;
}

/* Reset podrazumevanog okvira oko sadržaja */
.faq-list .e-n-accordion-item > .e-con {
  border: 0;
  background: none;
}

@media (max-width: 540px) {
  .faq-list .e-n-accordion-item-title-header .e-n-accordion-item-title-text {
    font-size: .94rem;
  }
  /* U jednoj koloni: poslednja stavka prve liste nema donju ivicu (sledi prva iz druge) */
  .faq-list--1 .e-n-accordion-item:last-child {
    border-bottom: 0;
  }
}


/* ===== 21-enquiry.css ===== */
/* =====================================================================
   21 – ENQUIRY (kontakt forma) + Fluent Forms "Enquiry" (2 koraka)
   Elementor klase:
     sekcija  .enquiry-section (#enquiry)  > .contact-grid (grid)
     levo     .contact-intro > .contact-label, .contact-title, .contact-lead,
              .next-steps (Text Editor sa <ol>), .contact-email, .contact-location
     desno    .contact-form-compact (kartica) > .form-head (.form-head-title, .form-head-note),
              .verta-enquiry-ff (Shortcode [fluentform]), .form-privacy, .privacy-details-wrap
   Fluent Forms klase (container_class u formi):
     .v-form-steps (oznake koraka) · .v-step-1 / .v-step-2 (polja po koracima)
     .contact-field-pair (2 kolone) · .v-field · .v-field--mail · .form-consent
     .v-consent-links · .v-form-nav / .v-form-nav-final · .v-ff-btn(--accent|--ghost)
   Koraci: JS forme (Fluent Forms > Settings > Custom CSS/JS) dodaje .v-steps-ready
   i klasu .v-step-hidden na polja neaktivnog koraka.
   ===================================================================== */

/* ---------- Sekcija ---------- */
.e-con.verta-section.enquiry-section {
  padding-block: 76px;
}

/* ---------- Levo: uvod ---------- */
.contact-intro .contact-label {
  margin-top: 20px;
}
.contact-intro .contact-title .elementor-heading-title {
  font-size: clamp(2.7rem, 4.4vw, 4.1rem);
  max-width: 18ch;
}
.contact-intro .contact-lead p,
.contact-intro .contact-location p {
  max-width: 45ch;
}
.contact-intro .contact-lead p,
.contact-intro .contact-location p,
.contact-form-compact .form-privacy p {
  margin: 0;
}

/* Koraci 01–03 */
.e-con.contact-intro > .next-steps {
  margin: 28px 0 24px;
  padding: 24px 0;
  border-block: 1px solid #d4dccb;
}
.contact-intro .next-steps ol {
  list-style: none;
  display: grid;
  gap: 15px;
  margin: 0;
  padding: 0;
}
.contact-intro .next-steps li {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: .875rem;
  line-height: 1.6;
  color: #4e5c49;
}
.contact-intro .next-steps li > span {
  font: 10px/1 var(--font-mono);
  color: #5f7b35;
}

.contact-intro .contact-email .elementor-heading-title,
.contact-intro .contact-email a {
  font-family: var(--font-core);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  color: #263d1b;
}
/* linkovi u dizajnu: tanka donja linija (globalni stil linka) */
.contact-intro .contact-email a {
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--ink-900) 40%, transparent);
  transition: var(--transition-control);
}
.contact-intro .contact-email a:hover {
  color: var(--signal-700);
  border-bottom-color: currentColor;
}

/* telefon: ista klasa kao e-mail (.contact-email) pa preuzima isti izgled; ovde samo mali razmak ispod e-maila */
.contact-intro .contact-email.contact-phone {
  margin-top: 6px;
}

/* "Hong Kong · Serving Asia and EMEA" – .form-helper (12px, #6b7563) */
.e-con.contact-intro > .contact-location {
  margin-top: 20px;
}
.contact-intro .contact-location p {
  font-size: .75rem;
  line-height: 1.5;
  color: #6b7563;
}

/* ---------- Desno: kartica ----------
   .e-con.v-card (02-components) postavlja padding/radius direktno i pobeđuje Elementor vrednosti */
.e-con.v-card.contact-form-compact {
  padding: 26px;
  border-radius: 8px;
}
.e-con.contact-form-compact .form-head-title .elementor-heading-title {
  letter-spacing: 0;
}
.e-con.contact-form-compact .form-head-note .elementor-heading-title {
  display: block;
}

/* Tekst o privatnosti ispod forme */
.contact-form-compact .form-privacy {
  font-size: .75rem;
  line-height: 1.6;
  color: #66715f;
  border-top: 1px solid #e1e5d9;
  padding-top: 14px;
}
.contact-form-compact .form-privacy a,
.contact-form-compact .consent-links a {
  color: #3e581f;
  text-decoration: underline;
  text-underline-offset: 3px;
  border-bottom: 1px solid color-mix(in oklab, var(--ink-900) 40%, transparent);
}
.contact-form-compact .form-privacy a:hover,
.contact-form-compact .consent-links a:hover {
  color: #3e581f;
  border-bottom-color: currentColor;
}
.contact-form-compact .privacy-details-wrap {
  margin-top: -7px;
}
.contact-form-compact .privacy-details {
  font-size: .75rem;
  line-height: 1.55;
  color: #66715f;
}
.contact-form-compact .privacy-details summary {
  cursor: pointer;
  display: inline-block;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact-form-compact .privacy-details summary::-webkit-details-marker {
  display: none;
}
.contact-form-compact .privacy-details p {
  margin: 8px 0 0;
}
/* posle uspešnog slanja sakrij tekst o privatnosti (kao u dizajnu) */
.contact-form-compact:has(.ff-message-success) .form-privacy,
.contact-form-compact:has(.ff-message-success) .privacy-details-wrap {
  display: none;
}

/* =====================================================================
   FLUENT FORMS – reset i stil po dizajnu (.v-field / .v-input / .v-btn)
   ===================================================================== */
.contact-form-compact .fluentform,
.contact-form-compact .fluentform * {
  box-sizing: border-box;
}
.contact-form-compact .frm-fluent-form fieldset {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-form-compact .fluentform .ff-el-group,
.contact-form-compact .fluentform .ff-t-container {
  margin: 0;
}
.contact-form-compact .fluentform .ff-el-group.v-step-hidden,
.contact-form-compact .fluentform .ff-t-container.v-step-hidden {
  display: none !important;
}
.contact-form-compact .fluentform .ff-custom_html:focus {
  outline: none;
}

/* Oznake koraka "01 / Your project" · "02 / Your details" */
.contact-form-compact .form-steps {
  display: flex;
  gap: 22px;
  margin: 0 0 8px;
}
.contact-form-compact .form-steps button {
  font: 11px/1.4 var(--font-mono);
  letter-spacing: 0;
  text-transform: uppercase;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  cursor: pointer;
  color: #78836c;
  padding: 0 0 6px;
  margin: 0;
  transition: var(--transition-control);
}
.contact-form-compact .form-steps button:hover,
.contact-form-compact .form-steps button:focus {
  color: #364d1c;
  background: none; /* Hello tema boji button:hover/:focus u roze */
}
.contact-form-compact .form-steps button[aria-current="step"] {
  color: #364d1c;
  border-bottom-color: #88ad3d;
}
/* bez JS-a (sve na jednoj strani) oznake koraka nemaju smisla */
.contact-form-compact .frm-fluent-form:not(.v-steps-ready) .v-form-steps,
.contact-form-compact .frm-fluent-form:not(.v-steps-ready) .v-form-nav,
.contact-form-compact .frm-fluent-form:not(.v-steps-ready) .v-back {
  display: none;
}

/* Dve kolone (polja u paru) – 2 kolone sve do 380px */
.contact-form-compact .frm-fluent-form .ff-t-container.contact-field-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.contact-form-compact .frm-fluent-form .contact-field-pair > .ff-t-cell {
  display: block;
  width: auto;
  min-width: 0;
  padding: 0;
  margin: 0 !important; /* FF na mobilnom stavlja margin-left:0!important */
}

/* Labela + zvezdica */
.contact-form-compact .fluentform .ff-el-input--label {
  display: block;
  margin: 0 0 5px;
  font-size: .875rem;
  line-height: 1.4;
}
.contact-form-compact .fluentform .ff-el-input--label label {
  font-family: var(--font-core);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-900);
  margin: 0;
  display: inline-block;
  vertical-align: top;
}
.contact-form-compact .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after {
  content: "*";
  color: var(--signal-900);
  margin-left: 3px;
}

/* Polja (input, select, textarea) */
.contact-form-compact .fluentform .ff-el-form-control {
  display: block;
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  background-color: #fff;
  border: 1px solid var(--paper-300);
  border-radius: var(--radius-sm);
  box-shadow: none;
  color: var(--ink-700);
  font-family: var(--font-core);
  font-size: 1rem;
  line-height: 1.4;
  transition: var(--transition-control);
}
.contact-form-compact .fluentform .ff-el-form-control::placeholder {
  color: var(--ink-300);
  opacity: 1;
}
.contact-form-compact .fluentform .ff-el-form-control:hover {
  border-color: var(--paper-400);
}
.contact-form-compact .fluentform .ff-el-form-control:focus {
  outline: none;
  border-color: var(--ink-900);
  box-shadow: var(--focus-ring);
  color: var(--ink-700);
}
.contact-form-compact .fluentform select.ff-el-form-control:not([size]):not([multiple]) {
  height: 42px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 34px;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A5260' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}
.contact-form-compact .fluentform textarea.ff-el-form-control {
  height: 70px;
  min-height: 70px;
  padding: 10px 12px;
  line-height: 1.45;
  resize: vertical;
}
/* Work email – ikonica pisma levo u polju */
.contact-form-compact .fluentform .v-field--mail .ff-el-form-control {
  padding-left: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A929E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 12px center;
  background-size: 16px 16px;
}

/* Greške (inline) */
.contact-form-compact .fluentform .ff-el-is-error .ff-el-form-control {
  border-color: var(--status-danger);
}
.contact-form-compact .fluentform .ff-el-is-error .ff-el-form-control:focus {
  box-shadow: 0 0 0 3px rgba(142, 43, 32, .2);
}
.contact-form-compact .fluentform .error.text-danger {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--status-danger);
}
.contact-form-compact .fluentform .error.text-danger::before {
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%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' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.contact-form-compact .ff-errors-in-stack {
  font-size: .875rem;
  color: #7e3821;
}
.contact-form-compact .ff-errors-in-stack:not(:empty) {
  margin-top: 14px;
  padding: 13px 15px;
  background: #fff0eb;
  border: 1px solid #e8c6b7;
  border-radius: 4px;
}

/* Pomoćni tekst */
.contact-form-compact .form-helper {
  margin: 0;
  font-size: .75rem;
  line-height: 1.5;
  color: #6b7563;
}

/* Checkbox (Quarterly CRM Benchmark) – izgled .v-check */
.contact-form-compact .fluentform .form-consent {
  margin-top: 2px;
}
.contact-form-compact .fluentform .form-consent .ff-el-form-check {
  margin: 0;
}
.contact-form-compact .fluentform .form-consent .ff-el-form-check-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  cursor: pointer;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--ink-700);
}
.contact-form-compact .fluentform .form-consent .ff-el-form-check-input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  position: static;
  top: auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  border: 1.5px solid var(--paper-300);
  border-radius: var(--radius-xs);
  background: #fff center / 13px 13px no-repeat;
  cursor: pointer;
  transition: var(--transition-control);
}
.contact-form-compact .fluentform .form-consent .ff-el-form-check-label:hover .ff-el-form-check-input {
  border-color: var(--ink-500);
}
.contact-form-compact .fluentform .form-consent .ff-el-form-check-input:checked {
  background-color: var(--ink-900);
  border-color: var(--ink-900);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7F7F4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.contact-form-compact .fluentform .form-consent .ff-el-form-check-input:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.contact-form-compact .fluentform .v-consent-links {
  margin-top: -8px; /* 6px ispod checkbox-a */
}
.contact-form-compact .consent-links {
  display: flex;
  gap: 12px;
  margin: 0 0 0 28px;
  font-size: .7rem;
  line-height: 1.5;
  color: #65705b;
}

/* Navigacija koraka: helper + Continue / Back + Send enquiry */
.contact-form-compact .form-nav,
.contact-form-compact .frm-fluent-form .ff-t-container.v-form-nav-final {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
}
.contact-form-compact .frm-fluent-form .v-form-nav-final > .ff-t-cell {
  display: block;
  flex: 0 1 auto;
  flex-basis: auto !important; /* FF upisuje inline flex-basis:50% */
  width: auto;
  padding: 0;
}
.contact-form-compact .frm-fluent-form .v-form-nav-final .ff_submit_btn_wrapper_custom {
  display: block;
  margin: 0;
}
.contact-form-compact .frm-fluent-form .ff-t-cell .ff_submit_btn_wrapper_custom button.v-ff-btn {
  margin: 0;
}

/* Dugmad (izgled .v-btn .v-btn--md, min. visina 44px kao u dizajnu) */
.contact-form-compact .fluentform .v-ff-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 44px;
  height: 44px;
  margin: 0;
  padding: 0 var(--space-md);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-core);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .005em;
  white-space: nowrap;
  text-transform: none;
  box-shadow: none;
  cursor: pointer;
  transition: var(--transition-control), transform var(--dur-instant) var(--ease-out);
}
.contact-form-compact .fluentform .v-ff-btn:active {
  transform: translateY(1px);
}
.contact-form-compact .fluentform .v-ff-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.contact-form-compact .fluentform .v-ff-btn--accent,
.contact-form-compact .fluentform .v-ff-btn--accent:focus {
  background: var(--action-accent);
  color: var(--action-accent-fg);
}
.contact-form-compact .fluentform .v-ff-btn--accent:hover {
  background: var(--action-accent-hover);
  color: var(--action-accent-fg);
}
.contact-form-compact .fluentform .v-ff-btn--accent:active {
  background: var(--action-accent-press);
}
.contact-form-compact .fluentform .v-ff-btn--ghost,
.contact-form-compact .fluentform .v-ff-btn--ghost:focus {
  background: transparent;
  color: var(--ink-900);
}
.contact-form-compact .fluentform .v-ff-btn--ghost:hover {
  background: var(--paper-100);
  color: var(--ink-900);
}
.contact-form-compact .fluentform .v-ff-btn svg {
  flex: none;
  width: 15px;
  height: 15px;
  transition: transform var(--dur-base) var(--ease-out);
}
.contact-form-compact .fluentform .v-ff-btn:hover svg {
  transform: translateX(4px);
}
.contact-form-compact .fluentform .v-ff-btn[disabled],
.contact-form-compact .fluentform .ff-working .v-ff-btn {
  opacity: .45;
  cursor: not-allowed;
}

/* ---------- Poruka o uspehu (Fluent Forms confirmation) ---------- */
.contact-form-compact .ff-message-success {
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
}
.contact-form-compact .ff-message-success:focus {
  outline: none;
}
.contact-form-compact .form-success {
  padding: 18px 0 10px;
}
.contact-form-compact .form-success .success-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  border-radius: 50%;
  background: #e6f1d2;
  color: #496d1b;
}
.contact-form-compact .form-success h3 {
  font: 400 2.4rem/1.1 var(--font-display);
  color: var(--ink-900);
  margin: 0 0 14px;
}
.contact-form-compact .form-success p {
  font-size: .94rem;
  line-height: 1.65;
  color: #56634e;
  margin: 0 0 22px;
}

/* "Send another enquiry" – ghost dugme ispod poruke o uspehu (vraća formu: reload na #enquiry) */
.contact-form-compact .fluentform .form-success .v-btn-inline {
  height: 40px;
  min-height: 40px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.contact-form-compact .fluentform .form-success .v-btn-inline:hover {
  color: var(--ink-900);
  border-bottom-color: transparent;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .e-con.v-card.contact-form-compact {
    padding: 24px;
  }
  .contact-form-compact .frm-fluent-form .ff-t-container.contact-field-pair {
    gap: 12px;
  }
}

/* 851–1050px: razmak kolona 36px (Elementor tablet vrednost je 40px) */
@media (max-width: 1050px) and (min-width: 851px) {
  body .e-con.e-grid.contact-grid {
    --gap: 36px 36px;
    --row-gap: 36px;
    --column-gap: 36px;
  }
}

@media (max-width: 850px) {
  .contact-intro {
    max-width: 700px;
  }
  .contact-intro .contact-lead p,
  .contact-intro .contact-location p {
    max-width: 62ch;
  }
  .e-con.contact-form-compact {
    max-width: 700px;
    width: 100%;
  }
}

@media (max-width: 540px) {
  .e-con.verta-section.enquiry-section {
    padding-block: 56px;
  }
  .contact-intro .contact-title .elementor-heading-title {
    font-size: 2.9rem;
  }
  .e-con.contact-intro > .next-steps {
    margin-top: 24px;
  }
  .e-con.v-card.contact-form-compact {
    padding: 22px;
  }
  .contact-form-compact .form-nav {
    gap: 10px;
  }
  .contact-form-compact .fluentform .v-ff-btn {
    font-size: .875rem;
  }
  .contact-form-compact .fluentform textarea.ff-el-form-control {
    height: 72px;
    min-height: 72px;
  }
}

@media (max-width: 380px) {
  .contact-form-compact .frm-fluent-form .ff-t-container.contact-field-pair {
    grid-template-columns: minmax(0, 1fr);
    gap: 13px;
  }
  .e-con.contact-form-compact .form-head {
    align-items: flex-start;
  }
  .contact-form-compact .form-head-note .elementor-heading-title {
    max-width: 8ch;
  }
  .contact-form-compact .fluentform .v-ff-btn {
    padding-inline: 12px;
  }
}


/* ===== 22-footer.css ===== */
/* =====================================================================
   22 – FOOTER (UAE Lite template "Verta Footer", tip type_footer)
   Elementor klase koje ovaj fajl očekuje:
     .verta-footer .verta-inverse .verta-section .verta-section--tight – top-level kontejner
     .footer-cta          – red 1 (naslov + dugme)       .footer-cta-title, .footer-cta-button
     .footer-columns      – grid kontejner sa 4 kolone    .footer-brand, .footer-col
     .footer-col-title    – Heading (h3) kolone           .footer-links – Icon List bez ikonica
     .footer-about / .footer-reg – tekst ispod wordmarka
     .footer-contact      – Icon List (inline) sa kontaktom
     .footer-copy         – copyright red ([verta_year])
   ===================================================================== */

/* Naslov poziva: najviše 24 znaka u redu */
.footer-cta-title .elementor-heading-title {
  max-width: 24ch;
}

/* Veliko dugme u footeru: font kao u dizajnu (--fs-base), ne 1rem */
.verta-footer .v-btn--lg .elementor-button {
  font-size: var(--fs-base);
}

/* Tekst ispod wordmarka */
.footer-about p {
  max-width: 34ch;
}
.footer-about p,
.footer-reg p {
  margin: 0;
}

/* Kolone sa linkovima: Icon List bez ikonica = običan spisak */
.footer-links .elementor-icon-list-items {
  display: grid;
  gap: 9px;
}
.footer-links .elementor-icon-list-item {
  margin: 0;
  padding: 0; /* razmak daje gap (Elementor "Space Between" je namerno prazan) */
}
.footer-links .elementor-icon-list-item a,
.footer-contact .elementor-icon-list-item a {
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

/* Kontakt red: fleks, prelom, razmak 24px */
.elementor-widget.footer-contact .elementor-icon-list-items.elementor-inline-items {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.footer-contact .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item.elementor-inline-item {
  margin: 0;
  padding: 0; /* razmak daje gap */
}
.footer-contact .elementor-icon-list-item::after {
  display: none; /* bez Elementor razdelnika */
}

/* Copyright */
.footer-copy p {
  margin: 0;
}

/* ---------- ≤540px ---------- */
@media (max-width: 540px) {
  .footer-columns > .footer-brand {
    grid-column: 1 / -1; /* brend kolona preko cele širine */
  }
  .verta-footer .v-btn--lg .elementor-button {
    font-size: .875rem;
  }
  .footer-links .elementor-icon-list-text {
    overflow-wrap: anywhere;
  }
}


/* ===== 30-legal.css ===== */
/* =====================================================================
   30 – PRAVNE STRANICE (Privacy Policy, Terms of Use, Cookie Policy)
   Obične WordPress stranice (bez Elementora), Hello tema.
   Body klasa .verta-legal dolazi iz plugina (inc/legal.php).
   DOM: main#content.site-main > .page-header (sakriveno) + .page-content > HTML iz dizajna
        (.eyebrow, h1, .legal-date, .legal-intro, nav.legal-nav, section[id] > h2 + p)
   ===================================================================== */

/* Naslov teme se ne prikazuje – h1 je deo sadržaja */
.verta-legal .page-header {
  display: none;
}

/* Omotač: 860px u sredini, razmak 64 / gutter / 90 */
body.verta-legal .site-main {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 64px var(--gutter) 90px;
}
.verta-legal .page-content {
  max-width: 860px;
  margin-inline: auto;
  color: var(--text-body);
  font-family: var(--font-core);
}

/* Skok na sidro ispod sticky headera */
.verta-legal .page-content section[id] {
  scroll-margin-top: max(var(--anchor-offset), calc(var(--sticky-header-height) + 32px));
}

/* Tipografija */
.verta-legal .page-content p,
.verta-legal .page-content li {
  font-size: 1rem;
  line-height: 1.75;
  color: #4a5647;
}
.verta-legal .page-content p {
  margin: 0 0 12px;
}
/* "Verta Global / Legal" – u dizajnu mono, 1rem (pravilo za pasus nadjačava .eyebrow) */
.verta-legal .page-content p.eyebrow {
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.verta-legal .page-content h1 {
  font: 400 clamp(3rem, 7vw, 5rem)/1 var(--font-display);
  color: var(--text-body);
  letter-spacing: 0;
  margin: 24px 0 18px;
  text-wrap: balance;
}
.verta-legal .page-content .legal-date {
  font: 11px/1.5 var(--font-mono);
  text-transform: uppercase;
  color: #6a755e;
}
.verta-legal .page-content .legal-intro {
  font-size: 1.1rem;
  color: #596252;
  margin: 20px 0 30px;
}
.verta-legal .page-content h2 {
  font: 400 1.9rem/1.2 var(--font-display);
  color: var(--text-body);
  letter-spacing: 0;
  margin: 34px 0 12px;
  text-wrap: balance;
}

/* Linkovi: podvučeni + tanka donja linija (kao globalni link u dizajnu) */
.verta-legal .page-content a {
  color: #45651e;
  text-decoration: underline;
  text-underline-offset: 3px;
  border-bottom: 1px solid color-mix(in oklab, var(--ink-900) 40%, transparent);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.verta-legal .page-content a:hover {
  color: #45651e;
  border-bottom-color: currentColor;
}

/* Navigacija između pravnih dokumenata */
.verta-legal .page-content .legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  padding: 20px 0;
  margin-bottom: 30px;
  border-block: 1px solid #d5ddcc;
  font-size: .875rem;
  line-height: 1.6;
}

/* Tabele (ako klijent doda) */
.verta-legal .page-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  margin: 22px 0;
}
.verta-legal .page-content th,
.verta-legal .page-content td {
  padding: 14px 12px;
  border: 0;
  border-bottom: 1px solid #d3dacb;
  text-align: left;
  vertical-align: top;
}
.verta-legal .page-content th {
  background: #eaf0df;
}

@media (max-width: 540px) {
  body.verta-legal .site-main {
    padding: 44px var(--gutter) 60px;
  }
  .verta-legal .page-content th,
  .verta-legal .page-content td {
    padding: 10px 7px;
    font-size: .8rem;
  }
}