/* Serbian product illustrations; scoped to the localized marketing pages. */
.sr-visuals { --sr-ink:#0a2342; --sr-blue:#2d7ff9; --sr-line:#dfe8f4; }
.sr-visuals main > section:nth-child(even) { background-color:#fff; }
.sr-visuals .sr-eyebrow { display:flex; align-items:center; gap:9px; color:#1a62d6; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.sr-eyebrow::before { content:''; width:20px; height:2px; background:currentColor; }
.sr-visuals article { position:relative; transition:transform .2s,border-color .2s,box-shadow .2s; }
.sr-visuals article:hover { transform:translateY(-4px); border-color:#b3cdf6; box-shadow:0 16px 35px #0a23420a; }
.sr-feature-icon { width:52px; height:52px; display:grid; place-items:center; margin-bottom:26px; border:1px solid #dbeafe; border-radius:16px; color:#236be0; background:linear-gradient(145deg,#f3f8ff,#e8f0ff); }
.sr-feature-icon svg { width:25px; height:25px; }
.sr-visuals article:nth-child(3n+2) .sr-feature-icon { color:#087c76; background:#eaf9f6; border-color:#cff0e8; }
.sr-visuals article:nth-child(3n) .sr-feature-icon { color:#7857c4; background:#f3efff; border-color:#e7ddfb; }
.sr-visuals #features article::after { content:''; position:absolute; top:30px; right:30px; width:28px; height:28px; opacity:.5; background:radial-gradient(circle,#b5c9e5 1.5px,transparent 2px); background-size:7px 7px; }
.sr-product-stage { position:relative; padding:24px 0 30px; min-width:0; }
.sr-product-stage::before { content:''; position:absolute; inset:-35px -25px; z-index:0; border-radius:50%; background:radial-gradient(ellipse,#c7ddff80,transparent 68%); }
.sr-window { position:relative; background:white; border:1px solid #dbe5f2; border-radius:20px; box-shadow:0 30px 75px #183d7226,0 4px 12px #183d7208; overflow:hidden; transform:rotate(-1.3deg); }
.sr-window-bar { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid #eaf0f7; background:#fcfdff; color:#7b8ba3; font-size:10px; gap:10px; }
.sr-window-dots { display:flex; gap:5px; }
.sr-window-dots b { width:6px; height:6px; background:#ccd9ea; border-radius:50%; }
.sr-window-brand { display:flex; align-items:center; gap:8px; color:#284365; font-weight:700; letter-spacing:.05em; }
.sr-window-brand img { width:54px; height:auto; }
.sr-window-body { padding:25px; }
.sr-mock-title { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:23px; }
.sr-mock-title strong { font-size:19px; letter-spacing:-.04em; color:var(--sr-ink); }
.sr-tag { display:inline-flex; align-items:center; gap:5px; padding:5px 8px; background:#ecf4ff; color:#2764bb; font-size:9px; font-weight:700; border-radius:6px; white-space:nowrap; }
.sr-input-label { font-size:10px; font-weight:700; color:#7b8ba3; text-transform:uppercase; letter-spacing:.09em; margin-bottom:9px; }
.sr-mock-input { background:#f6f9fd; border:1px solid #e3eaf4; border-radius:10px; padding:16px; color:#3b516e; font-size:12px; line-height:1.75; }
.sr-input-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.sr-input-tags span { padding:4px 8px; border-radius:5px; border:1px solid #e3eaf4; font-size:9px; color:#607896; background:#fff; }
.sr-processing { display:flex; align-items:center; gap:9px; padding:19px 0; color:#3274d5; font-size:10px; font-weight:600; }
.sr-processing i,.sr-processing svg { width:15px; height:15px; }
.sr-processing::after { content:''; height:1px; flex:1; background:linear-gradient(90deg,#b8d4ff,transparent); }
.sr-result { padding:20px; background:linear-gradient(120deg,#102e52,#163f6c); color:white; border-radius:12px; }
.sr-result-top { display:flex; align-items:center; gap:7px; font-size:9px; text-transform:uppercase; letter-spacing:.09em; color:#98c8ff; }
.sr-result-top svg { width:14px; height:14px; }
.sr-result strong { display:block; font-size:20px; letter-spacing:-.035em; padding:9px 0; }
.sr-result p { font-size:11px; color:#b8cce3; line-height:1.7; }
.sr-result-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid #ffffff1c; margin-top:16px; padding-top:12px; font-size:9px; color:#c1d5ee; }
.sr-status-dot { width:5px; height:5px; display:inline-block; border-radius:50%; background:#f6be66; margin-right:5px; }
.sr-float-card { position:relative; width:max-content; max-width:90%; margin:-5px 0 0 auto; padding:14px 20px; display:flex; gap:11px; align-items:center; background:#fff; border:1px solid #e0e9f3; border-radius:12px; box-shadow:0 15px 35px #1c42701c; }
.sr-float-card > svg { color:#179888; background:#eaf9f4; padding:7px; width:35px; height:35px; border-radius:9px; }
.sr-float-card small { display:block; font-size:9px; color:#8091a7; }
.sr-float-card strong { font-size:11px; color:#284365; }
.sr-caption { font-size:10px; color:#8190a4; margin-top:15px; letter-spacing:.025em; }
.sr-workflow-art { width:100%; display:block; height:auto; margin:0 0 38px; border:1px solid #e4edf7; border-radius:24px; background:#f7faff; }
.sr-review-board { margin:0 0 35px; padding:30px; border-radius:24px; background:radial-gradient(ellipse at 90% 10%,#28558a 0,transparent 60%),#0a2342; color:white; display:grid; grid-template-columns:1fr 1.15fr; gap:44px; align-items:center; overflow:hidden; }
.sr-review-copy h3 { font-size:26px; line-height:1.25; font-weight:750; margin:16px 0; letter-spacing:-.03em; max-width:330px; }
.sr-review-copy p { color:#a9bfd8; font-size:12px; line-height:1.8; max-width:300px; }
.sr-review-copy .sr-eyebrow { color:#82b7ff; }
.sr-review-steps { display:flex; align-items:center; gap:8px; margin-top:25px; flex-wrap:wrap; }
.sr-review-steps span { font-size:9px; border:1px solid #ffffff25; color:#c0d2e8; padding:7px 10px; border-radius:6px; }
.sr-review-steps svg { width:13px; height:13px; color:#77a4d7; }
.sr-file { padding:24px; border-radius:15px; background:#fff; color:#193957; box-shadow:0 14px 40px #0002; transform:rotate(1deg); }
.sr-file-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; border-bottom:1px solid #e9eff6; padding-bottom:17px; margin-bottom:15px; }
.sr-file-heading strong { display:block; font-size:13px; }
.sr-file-heading small { font-size:9px; color:#8495a8; }
.sr-file-heading > svg { color:#347dda; background:#eff6ff; padding:8px; width:37px; height:37px; border-radius:10px; }
.sr-check-row { display:flex; gap:9px; align-items:center; padding:10px 0; font-size:11px; border-bottom:1px solid #f0f4f9; }
.sr-check-row > svg { width:15px; height:15px; color:#28a68f; }
.sr-check-row small { margin-left:auto; color:#8392a7; font-size:9px; }
.sr-check-row.sr-pending > svg { color:#d99736; }
.sr-file-note { margin-top:15px; background:#fff8eb; color:#ad781f; padding:10px; border-radius:7px; font-size:9px; display:flex; align-items:center; gap:7px; }
.sr-file-note svg { width:13px; height:13px; flex-shrink:0; }
.sr-analytics { padding:30px; border:1px solid #e2eaf5; background:#fff; border-radius:24px; box-shadow:0 20px 60px #193d6608; }
.sr-analytics-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:25px; }
.sr-analytics-head strong { font-size:16px; color:#193957; }
.sr-chart-grid { display:grid; grid-template-columns:1.8fr 1fr; gap:28px; }
.sr-chart { padding:24px; background:#f7faff; border:1px solid #e9eff8; border-radius:14px; }
.sr-chart p { font-size:11px; color:#687f9b; }
.sr-bars { display:flex; align-items:flex-end; gap:14px; height:150px; margin:20px 0 12px; border-bottom:1px solid #d9e5f5; background:repeating-linear-gradient(to top,transparent 0,transparent 36px,#e7eef8 36px,#e7eef8 37px); }
.sr-bars span { flex:1; height:var(--bar); background:linear-gradient(0deg,#246ee2,#84b3ff); border-radius:5px 5px 0 0; min-width:0; }
.sr-bars span:nth-child(even) { background:linear-gradient(0deg,#2f8b9a,#7ccfc9); }
.sr-chart-labels { display:flex; justify-content:space-around; gap:5px; font-size:9px; color:#8293a8; }
.sr-status-chart { padding:15px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.sr-ring { display:grid; place-items:center; width:142px; height:142px; background:conic-gradient(#2d7ff9 0 60%,#70c9bd 60% 85%,#f4bf73 85%); border-radius:50%; position:relative; }
.sr-ring::before { content:''; position:absolute; inset:18px; border-radius:50%; background:white; }
.sr-ring span { position:relative; font-size:11px; color:#425c7c; text-align:center; line-height:1.7; }
.sr-legend { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:22px; font-size:9px; color:#70849d; }
.sr-legend span::before { content:''; width:6px; height:6px; display:inline-block; border-radius:50%; background:#2d7ff9; margin-right:4px; }
.sr-legend span:nth-child(2)::before { background:#70c9bd; }
.sr-legend span:nth-child(3)::before { background:#f4bf73; }
.sr-visuals #apply { position:relative; overflow:hidden; background:linear-gradient(120deg,#eff5ff,#f5f8fd 65%,#e8f5f5); }
.sr-visuals #apply::after { content:''; position:absolute; width:300px; height:300px; right:-60px; top:15px; border:1px solid #bbd3f2; border-radius:50%; box-shadow:0 0 0 40px #d4e5fa50,0 0 0 80px #d4e5fa30; pointer-events:none; }
.sr-visuals #apply > div { position:relative; z-index:1; }
@media(max-width:767px) {
 .sr-product-stage { padding:0 5px 15px; }
 .sr-window { transform:none; }
 .sr-window-body { padding:18px; }
 .sr-window-bar { padding:12px 16px; }
 .sr-result strong { font-size:18px; }
 .sr-mock-title strong { font-size:17px; }
 .sr-review-board { grid-template-columns:1fr; padding:24px; gap:25px; }
 .sr-file { padding:18px; transform:none; }
 .sr-chart-grid { grid-template-columns:1fr; }
 .sr-analytics { padding:20px; }
 .sr-workflow-art { border-radius:14px; }
 .sr-bars { gap:9px; }
 .sr-visuals #apply::after { opacity:.4; }
}
@media(prefers-reduced-motion:reduce) {
 .sr-visuals article { transition:none; }
 .sr-visuals article:hover { transform:none; }
 .sr-visuals .animate-float,.sr-visuals .animate-bounce,.sr-visuals .animate-spin { animation:none; }
}
/* The same three steps are presented by the illustrated cards on narrow screens. */
@media(max-width:600px) { .sr-flow-figure { display:none; } }