/*
 * Dopuna stilova za servisne stranice (im-* / wa-* / ec-* / p3d-*).
 *
 * ZASTO POSTOJI
 * Predlosci page-*.php pisani su za jednu generaciju klasa
 * (im-container, im-lead, im-grid-4, im-faq-item…), a koni-services.css
 * stilizira drugu (im-h1, im-p, im-inner). Od 314 klasa u predloscima
 * 314 nije imalo nijedno pravilo: naslovi su bili tamni na tamnome,
 * a sadrzaj je isao od ruba do ruba ekrana.
 *
 * Ovo je nosiva struktura — sirina, razmaci, mreze, citljivost — da
 * stranice budu upotrebljive. Potpun dizajn tih stranica je zaseban posao.
 * Boje su iz palete koju ti predlosci vec koriste (--gold) i iz DESIGN.md.
 */

.im-wrapper {
	--u-ink: #141617;
	--u-night: #16151e;
	--u-night-2: #1d1c2a;
	--u-paper: #ffffff;
	--u-tint: #f8f7ff;
	--u-muted: #5f5e6b;
	--u-rule: #e5e7eb;
	--u-on-night: #ffffff;
	--u-on-night-muted: rgba(255, 255, 255, .72);
	--u-line: rgba(255, 255, 255, .12);
	--u-gold: var(--gold, #af9751);
	--u-gold-l: var(--gold-l, #c4ad6e);
}

/* ── sirina i razmaci ───────────────────────────────────── */
.im-wrapper .im-container,
.im-wrapper .im-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding-left: 32px;
	padding-right: 32px;
}
.im-wrapper .im-section { padding: 88px 0; }
.im-wrapper .im-hero { padding: 48px 0 88px; }
.im-wrapper .im-section-header { max-width: 760px; margin: 0 auto 48px; text-align: center; }

/* ── mreze ──────────────────────────────────────────────── */
.im-wrapper .im-grid { display: grid; gap: 24px; }
.im-wrapper .im-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.im-wrapper .im-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.im-wrapper .im-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.im-wrapper .im-hero-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; }

/* ── citljivost na tamnoj podlozi ───────────────────────── */
.im-wrapper .im-hero,
.im-wrapper .im-dark,
.im-wrapper .im-section-alt { background: var(--u-night); color: var(--u-on-night); }
.im-wrapper .im-light { background: var(--u-tint); color: var(--u-ink); }

.im-wrapper .im-hero h1,
.im-wrapper .im-dark h2,
.im-wrapper .im-dark h3,
.im-wrapper .im-section-alt h2,
.im-wrapper .im-section-alt h3 { color: var(--u-on-night) !important; }
.im-wrapper .im-hero h1 span,
.im-wrapper .im-dark h2 span { color: var(--u-gold-l) !important; }

.im-wrapper .im-hero p,
.im-wrapper .im-dark > .im-container > p,
.im-wrapper .im-dark .im-section-header p,
.im-wrapper .im-lead { color: var(--u-on-night-muted) !important; }
.im-wrapper .im-lead { font-size: 18px !important; line-height: 1.65 !important; max-width: 620px; }

/* svijetle sekcije zadrzavaju tamni tekst */
.im-wrapper .im-light h2,
.im-wrapper .im-light h3 { color: var(--u-ink) !important; }
.im-wrapper .im-light p { color: var(--u-muted) !important; }

/* ── kartice ────────────────────────────────────────────── */
.im-wrapper .im-card,
.im-wrapper .im-usecase-card,
.im-wrapper .im-custom-card,
.im-wrapper .wa-issue,
.im-wrapper .wa-tech-item,
.im-wrapper .im-integration-item {
	background: var(--u-paper);
	color: var(--u-ink);
	border: 1px solid var(--u-rule);
	border-radius: 12px;
	padding: 28px;
}
.im-wrapper .im-card h3,
.im-wrapper .im-usecase-card h3 { color: var(--u-ink) !important; margin-bottom: 10px !important; }
.im-wrapper .im-card p,
.im-wrapper .im-usecase-card p { color: var(--u-muted) !important; margin: 0 !important; }
.im-wrapper .im-usecase-icon,
.im-wrapper .im-card-icon { color: var(--u-gold); font-size: 22px; margin-bottom: 14px; display: block; }

/* ── pitanja i odgovori ─────────────────────────────────── */
.im-wrapper .im-faq-item,
.im-wrapper .wa-faq-item {
	background: var(--u-paper);
	border: 1px solid var(--u-rule);
	border-radius: 12px;
	padding: 20px 24px;
	margin-bottom: 12px;
}
.im-wrapper .im-faq-question,
.im-wrapper .wa-faq-q {
	color: var(--u-ink) !important;
	font-weight: 700;
	font-size: 17px;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	gap: 16px;
}
.im-wrapper .im-faq-answer,
.im-wrapper .wa-faq-a { color: var(--u-muted) !important; padding-top: 10px; }
.im-wrapper .im-dark .im-faq-item,
.im-wrapper .im-dark .wa-faq-item { background: var(--u-night-2); border-color: var(--u-line); }
.im-wrapper .im-dark .im-faq-question,
.im-wrapper .im-dark .wa-faq-q { color: var(--u-on-night) !important; }
.im-wrapper .im-dark .im-faq-answer,
.im-wrapper .im-dark .wa-faq-a { color: var(--u-on-night-muted) !important; }

/* ── koraci ─────────────────────────────────────────────── */
.im-wrapper .im-timeline-item {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
	padding: 20px 0;
	border-bottom: 1px solid var(--u-line);
}
.im-wrapper .im-light .im-timeline-item { border-color: var(--u-rule); }
.im-wrapper .im-timeline-number {
	width: 48px; height: 48px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--u-gold);
	color: #16151e;
	font-weight: 800;
}
.im-wrapper .im-timeline-content h3 { margin-bottom: 6px !important; }

/* ── oznake i dugmad ────────────────────────────────────── */
.im-wrapper .im-badge {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 16px; border-radius: 999px;
	border: 1px solid var(--u-line);
	color: var(--u-gold-l);
	font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	margin-bottom: 20px;
}
.im-wrapper .im-hero-actions,
.im-wrapper .im-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ── slike ──────────────────────────────────────────────── */
.im-wrapper img { max-width: 100%; height: auto; }
.im-wrapper .im-hero-media img,
.im-wrapper .im-hero-visual img { border-radius: 12px; display: block; }

/* ── prijelomi ──────────────────────────────────────────── */
@media (max-width: 1024px) {
	.im-wrapper .im-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.im-wrapper .im-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.im-wrapper .im-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 768px) {
	.im-wrapper .im-container,
	.im-wrapper .im-inner { padding-left: 16px; padding-right: 16px; }
	.im-wrapper .im-section { padding: 56px 0; }
	.im-wrapper .im-hero { padding: 24px 0 56px; }
	.im-wrapper .im-grid-2,
	.im-wrapper .im-grid-3,
	.im-wrapper .im-grid-4 { grid-template-columns: minmax(0, 1fr); }
	.im-wrapper .im-card,
	.im-wrapper .im-usecase-card,
	.im-wrapper .wa-issue { padding: 20px; }
	.im-wrapper .im-timeline-item { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
}

/* ── IKONE ──────────────────────────────────────────────────
 * Predlosci pisu Font Awesome 6 sintaksom (fa-solid, fa-brands),
 * a Avada u temi ima Font Awesome 5, gdje se te klase zovu fas/far/fab.
 * Zato su se umjesto ikona crtali prazni kvadratici. Ovdje se FA6 imena
 * vezu na FA5 obitelji koje su vec na serveru — bez vanjskih ovisnosti.
 * Ikone koje postoje samo u FA6 ostat ce prazne.
 * ───────────────────────────────────────────────────────── */
[class^="fa-"],
[class*=" fa-"] {
	display: inline-block;
	font-style: normal !important;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}
.fa-solid,
.fa-sharp,
i.fa-solid { font-family: "Font Awesome 5 Free" !important; font-weight: 900 !important; }
.fa-regular,
i.fa-regular { font-family: "Font Awesome 5 Free" !important; font-weight: 400 !important; }
.fa-brands,
i.fa-brands { font-family: "Font Awesome 5 Brands" !important; font-weight: 400 !important; }

/* Imena iz Font Awesome 6 preslikana na znakove iz verzije 5 koja je u temi. */
.fa-arrow-trend-down:before{content:"\f063"}
.fa-arrow-trend-up:before{content:"\f201"}
.fa-arrows-spin:before{content:"\f2f1"}
.fa-bag-shopping:before{content:"\f290"}
.fa-boxes-stacked:before{content:"\f468"}
.fa-calendar-days:before{content:"\f073"}
.fa-cart-shopping:before{content:"\f07a"}
.fa-chart-column:before{content:"\f080"}
.fa-chart-line-down:before{content:"\f201"}
.fa-circle-check:before{content:"\f058"}
.fa-circle-question:before{content:"\f059"}
.fa-circle-xmark:before{content:"\f057"}
.fa-clipboard-question:before{content:"\f46d"}
.fa-clock-rotate-left:before{content:"\f1da"}
.fa-cloud-arrow-up:before{content:"\f382"}
.fa-display:before{content:"\f108"}
.fa-envelopes-bulk:before{content:"\f674"}
.fa-file-lines:before{content:"\f15c"}
.fa-flask-vial:before{content:"\f0c3"}
.fa-gauge-high:before{content:"\f3fd"}
.fa-gears:before{content:"\f085"}
.fa-hand-holding-dollar:before{content:"\f4c0"}
.fa-heart-pulse:before{content:"\f21e"}
.fa-list-check:before{content:"\f0ae"}
.fa-magnifying-glass:before{content:"\f002"}
.fa-magnifying-glass-chart:before{content:"\f201"}
.fa-magnifying-glass-minus:before{content:"\f010"}
.fa-map-location-dot:before{content:"\f5a0"}
.fa-message-bot:before{content:"\f544"}
.fa-mobile-screen:before{content:"\f3cd"}
.fa-mobile-screen-button:before{content:"\f3cd"}
.fa-pen-ruler:before{content:"\f5ae"}
.fa-plug-circle-check:before{content:"\f1e6"}
.fa-presentation-screen:before{content:"\f51b"}
.fa-rotate:before{content:"\f021"}
.fa-scale-balanced:before{content:"\f24e"}
.fa-screwdriver-wrench:before{content:"\f7d9"}
.fa-share-nodes:before{content:"\f1e0"}
.fa-shield:before{content:"\f3ed"}
.fa-shield-check:before{content:"\f3ed"}
.fa-shield-halved:before{content:"\f3ed"}
.fa-sliders:before{content:"\f1de"}
.fa-snail:before{content:"\f252"}
.fa-sparkles:before{content:"\f0d0"}
.fa-tablet-screen-button:before{content:"\f3fa"}
.fa-triangle-exclamation:before{content:"\f071"}
.fa-truck-fast:before{content:"\f48b"}
.fa-users-gear:before{content:"\f509"}
.fa-wand-magic-sparkles:before{content:"\f0d0"}
.fa-xmark:before{content:"\f00d"}