/* ============================================================
   MinSoftware — style.css  v2.0
   Design: Dark hero + light sections, BLUE accent, Inter font
   ============================================================ */

:root {
    /* "gold" varijable sada drže PLAVU paletu — imena ostaju radi kompatibilnosti */
    --gold:      #2563eb;   /* primarna plava */
    --gold-lt:   #3b82f6;   /* svetlija plava */
    --gold-dk:   #1d4ed8;   /* tamnija plava */
    --dark:      #050814;
    --dark-2:    #0b1220;
    --dark-3:    #111827;
    --text:      #0f172a;
    --muted:     #64748b;
    --line:      #e2e8f0;
    --soft:      #f8fafc;
    --blue:      #2563eb;
    --green:     #16a34a;
    --teal:      #0d9488;
    --orange:    #ea580c;
    --purple:    #7c3aed;
    --pink:      #db2777;
    --sky:       #0284c7;
    --radius:    20px;
    --radius-lg: 28px;
    --shadow-sm: 0 4px 24px rgba(15,23,42,.07);
    --shadow:    0 12px 48px rgba(15,23,42,.10);
    --shadow-lg: 0 24px 80px rgba(15,23,42,.14);
    --container: 1160px;
    --transition: .22s cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
    margin: 0;
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    color: var(--text);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }

.container {
    width: min(var(--container), calc(100% - 40px));
    margin: 0 auto;
}

/* ── Reveal animations ─────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Shared section heading ────────────────────────────── */
.section { padding: 96px 0; }

.section-head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 56px;
}
.section-head h2 { font-size: clamp(32px, 4vw, 52px); }
.section-head p { color: var(--muted); font-size: 18px; line-height: 1.7; margin-top: 16px; }

.eyebrow {
    display: inline-block;
    color: var(--gold-lt);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.eyebrow-dark {
    display: inline-block;
    color: var(--gold-dk);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

h1, h2, h3 { margin: 0; letter-spacing: -.04em; line-height: 1.08; }

/* ── Buttons ───────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 50px;
    padding: 0 26px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
    text-decoration: none;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-gold {
    background: linear-gradient(135deg, var(--gold-lt), var(--gold));
    color: #fff;
    box-shadow: 0 8px 32px rgba(37,99,235,.28);
}
.btn-gold:hover { box-shadow: 0 14px 40px rgba(37,99,235,.38); }

.btn-ghost {
    background: rgba(255,255,255,.07);
    color: #fff;
    border-color: rgba(255,255,255,.20);
}
.btn-ghost:hover { background: rgba(255,255,255,.13); }

.btn-dark {
    background: var(--dark-3);
    color: #fff;
}
.btn-dark:hover { background: #000; }

.btn-gold-dark {
    background: linear-gradient(135deg, var(--gold-lt), var(--gold));
    color: #fff;
    font-weight: 700;
}

.btn-outline {
    background: transparent;
    color: var(--text);
    border-color: var(--line);
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold-dk); }

.btn-full { width: 100%; justify-content: center; }

/* ── HEADER ─────────────────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(226,232,240,.7);
}

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

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -.04em;
    color: var(--dark-3);
}

.brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--gold-lt), var(--gold));
    color: #fff;
    font-weight: 900;
    font-size: 17px;
    flex-shrink: 0;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.main-nav a {
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #334155;
    transition: background var(--transition), color var(--transition);
}
.main-nav a:hover { background: var(--soft); color: var(--dark-3); }

.header-cta {
    background: var(--dark-3);
    color: #fff;
    padding: 11px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: background var(--transition), transform var(--transition);
}
.header-cta:hover { background: #000; transform: translateY(-1px); }

.nav-toggle {
    display: none;
    background: transparent;
    border: none;
    padding: 6px;
    cursor: pointer;
    font-size: 24px;
    color: var(--dark-3);
    margin-left: auto;
}

/* ── HERO ────────────────────────────────────────────────── */
.hero {
    position: relative;
    min-height: 780px;
    padding: 100px 0 80px;
    background:
        radial-gradient(ellipse 65% 55% at 80% 10%, rgba(37,99,235,.18) 0%, transparent 60%),
        linear-gradient(160deg, #050814 0%, #07101f 55%, #050814 100%);
    color: #fff;
    overflow: hidden;
}

.hero-grid-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, #000 40%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent);
}

.hero-glow {
    position: absolute;
    width: 560px;
    height: 560px;
    right: 5%;
    top: -100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37,99,235,.14) 0%, transparent 70%);
    pointer-events: none;
}

.hero-layout {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 56px;
    align-items: center;
}

.hero-content { max-width: 560px; }

.hero h1 {
    font-size: clamp(46px, 6vw, 78px);
    line-height: .95;
    margin-bottom: 24px;
}

.gradient-text {
    background: linear-gradient(135deg, var(--gold-lt), var(--gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero p {
    color: #94a3b8;
    font-size: 18px;
    line-height: 1.7;
    margin: 0 0 36px;
}

.hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.trust-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 44px;
    padding-top: 36px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #94a3b8;
}

.trust-item i { color: var(--gold); font-size: 16px; }

/* ── Hero visual mockup ───────────────────────────── */
.hero-visual {
    position: relative;
    height: 520px;
}

.laptop-frame {
    position: absolute;
    left: 0;
    top: 0;
    width: 88%;
    background: linear-gradient(145deg, #1e2a3a, #030a16);
    border-radius: 22px 22px 8px 8px;
    padding: 14px 14px 22px;
    box-shadow: 0 40px 100px rgba(0,0,0,.5);
    transform: perspective(900px) rotateY(-4deg) rotateX(1.5deg);
}

.laptop-screen {
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    background: #07111f;
    border: 1px solid rgba(255,255,255,.08);
    /* aspect-ratio uklonjen — koristimo screen-img sa fiksnom visinom */
}

.laptop-base {
    height: 22px;
    margin: 0 5%;
    background: linear-gradient(180deg, #2d3748, #1a202c);
    border-radius: 0 0 12px 12px;
}

.app-bar {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    background: rgba(255,255,255,.04);
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.app-dots { display: flex; gap: 6px; }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot.red { background: #ff5f57; }
.dot.yellow { background: #febc2e; }
.dot.green { background: #28c840; }

.app-title {
    flex: 1;
    text-align: center;
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
}

.app-time {
    font-size: 11px;
    color: #64748b;
}

.app-body {
    display: grid;
    grid-template-columns: 130px 1fr;
    height: calc(100% - 40px);
}

.app-sidebar {
    background: rgba(255,255,255,.03);
    border-right: 1px solid rgba(255,255,255,.07);
    padding: 16px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--gold-lt), var(--gold));
    color: #fff;
    font-weight: 900;
    font-size: 13px;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
}

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 11px;
    color: #64748b;
    cursor: pointer;
    transition: background .15s;
}
.nav-item i { font-size: 15px; }
.nav-item.active {
    background: rgba(37,99,235,.15);
    color: var(--gold-lt);
}

.app-main { padding: 14px; display: flex; flex-direction: column; gap: 12px; }

.app-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }

.kpi {
    border-radius: 12px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.07);
}
.kpi.orange { background: rgba(234,88,12,.12); }
.kpi.blue { background: rgba(37,99,235,.12); }
.kpi.green { background: rgba(22,163,74,.12); }

.kpi-val { color: #fff; font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.kpi-lbl { color: #64748b; font-size: 10px; margin-top: 4px; }

.app-products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    flex: 1;
}

.prod-btn {
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.07);
    color: #e2e8f0;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    min-height: 48px;
    transition: background .15s;
}

.prod-btn.active-prod {
    background: rgba(37,99,235,.22);
    border-color: rgba(37,99,235,.4);
    color: var(--gold-lt);
}

/* Phone mockup */
.phone-frame {
    position: absolute;
    right: 0;
    bottom: 20px;
    width: 160px;
    height: 310px;
    border-radius: 30px;
    background: #020617;
    padding: 10px;
    border: 1.5px solid rgba(255,255,255,.15);
    box-shadow: 0 28px 72px rgba(0,0,0,.5);
}

.phone-screen {
    height: 100%;
    border-radius: 22px;
    background: #08111f;
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
}

.ph-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.ph-header small { color: #64748b; font-size: 10px; }
.ph-header i { color: #64748b; font-size: 14px; }

.ph-amount {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.03em;
}

.ph-label {
    color: #64748b;
    font-size: 9px;
    margin-bottom: 16px;
}

.ph-bars {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 80px;
    margin-bottom: 14px;
}

.bar {
    flex: 1;
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, var(--gold-lt), var(--blue));
    opacity: .8;
}

.ph-stats {
    display: flex;
    justify-content: space-between;
    margin-top: auto;
}
.ph-stats div { text-align: center; }
.ph-stats strong { display: block; color: #fff; font-size: 13px; }
.ph-stats small { color: #64748b; font-size: 9px; }

/* ── STATS BAR ───────────────────────────────────────────── */
.stats-bar {
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 40px 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    text-align: center;
}

.stat-num {
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -.06em;
    color: var(--dark-3);
}
.stat-num span { color: var(--gold); }

.stat-lbl {
    font-size: 13px;
    color: var(--muted);
    margin-top: 6px;
}

/* ── PRODUCTS ────────────────────────────────────────────── */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.product-card {
    padding: 26px 24px;
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.product-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
    border-color: rgba(37,99,235,.4);
}

.product-card.featured {
    background: linear-gradient(160deg, #f5f9ff, #fff);
    border-color: rgba(37,99,235,.3);
}

.card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
}

.card-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 22px;
}

.icon-gold   { background: #dbeafe; color: #1e40af; }
.icon-teal   { background: #ccfbf1; color: #0f766e; }
.icon-blue   { background: #dbeafe; color: #1d4ed8; }
.icon-green  { background: #dcfce7; color: #15803d; }
.icon-purple { background: #ede9fe; color: #6d28d9; }
.icon-orange { background: #ffedd5; color: #c2410c; }
.icon-pink   { background: #fce7f3; color: #be185d; }
.icon-sky    { background: #e0f2fe; color: #0369a1; }

.badge {
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
}
.badge-hot { background: #dbeafe; color: #1e40af; }
.badge-new { background: #dcfce7; color: #166534; }

.product-card h3 {
    font-size: 20px;
    color: var(--dark-3);
    margin-bottom: 2px;
}

.card-tag {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    margin: 0 0 10px;
}

.card-desc {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.65;
    margin: 0;
    flex: 1;
}

.card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    font-size: 13px;
    font-weight: 700;
    color: #1d4ed8;
    transition: gap var(--transition);
}
.card-link:hover { gap: 10px; }

/* ── WHY SECTION ─────────────────────────────────────────── */
.why-section {
    background: linear-gradient(160deg, var(--dark) 0%, var(--dark-2) 100%);
    color: #fff;
}

.why-layout {
    display: grid;
    grid-template-columns: .9fr 1.4fr;
    gap: 64px;
    align-items: center;
}

.why-left h2 {
    font-size: clamp(34px, 4vw, 54px);
    margin-bottom: 20px;
}

.why-left p {
    color: #94a3b8;
    font-size: 17px;
    line-height: 1.75;
    margin-bottom: 32px;
}

.why-right {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.why-card {
    padding: 28px 24px;
    border-radius: 20px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.08);
    transition: background var(--transition);
}
.why-card:hover { background: rgba(255,255,255,.08); }

.why-num {
    font-size: 12px;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 16px;
    letter-spacing: .08em;
}

.why-card h3 {
    font-size: 22px;
    color: #fff;
    margin-bottom: 10px;
}

.why-card p {
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}

/* ── CASABLANKA HIGHLIGHT ─────────────────────────────────── */
.highlight-section { background: var(--soft); }

.highlight-layout {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 64px;
    align-items: center;
}

.highlight-copy h2 {
    font-size: clamp(30px, 3.8vw, 48px);
    margin-bottom: 18px;
}

.highlight-copy p {
    color: var(--muted);
    font-size: 17px;
    line-height: 1.75;
    margin-bottom: 28px;
}

.feature-checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 24px;
}

.feature-checklist li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 500;
    color: var(--dark-3);
}

.feature-checklist i {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #dbeafe;
    color: #1e40af;
    display: grid;
    place-items: center;
    font-size: 12px;
    flex-shrink: 0;
}

.highlight-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Dashboard mockup */
.dashboard-mockup {
    background: var(--dark);
    border-radius: 24px;
    padding: 22px;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255,255,255,.06);
}

.dm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.dm-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}
.dm-title i { color: var(--gold); }

.dm-date { color: #64748b; font-size: 12px; }

.dm-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.dm-kpi {
    background: rgba(255,255,255,.06);
    border-radius: 14px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.07);
}

.dm-kpi-val {
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.03em;
}

.dm-kpi-lbl {
    color: #64748b;
    font-size: 10px;
    margin-top: 4px;
}

.dm-chart-area {
    background: rgba(255,255,255,.04);
    border-radius: 16px;
    padding: 20px 16px 10px;
    margin-bottom: 18px;
    border: 1px solid rgba(255,255,255,.07);
}

.dm-bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 110px;
}

.dm-bar {
    flex: 1;
    border-radius: 6px 6px 3px 3px;
    background: rgba(255,255,255,.12);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 6px;
    transition: background .2s;
}
.dm-bar span { color: #64748b; font-size: 9px; }
.dm-bar.active { background: linear-gradient(180deg, var(--gold-lt), var(--gold)); }
.dm-bar.active span { color: #fff; }

.dm-footer {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.dm-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    color: #64748b;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
}

.active-pill { color: #34d399; background: rgba(52,211,153,.1); border-color: rgba(52,211,153,.2); }

/* ── SCANME ───────────────────────────────────────────────── */
.scanme-section { background: #fff; }

.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.step-card {
    padding: 32px 28px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: var(--shadow-sm);
    position: relative;
    transition: transform var(--transition), box-shadow var(--transition);
}
.step-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.step-num {
    position: absolute;
    top: 24px;
    right: 24px;
    font-size: 11px;
    font-weight: 700;
    color: #e2e8f0;
    letter-spacing: .1em;
}

.step-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--gold-lt), var(--gold));
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 24px;
    margin-bottom: 22px;
}

.step-card h3 { font-size: 22px; margin-bottom: 10px; }
.step-card p { color: var(--muted); line-height: 1.7; margin: 0; }

/* ── CTA / CONTACT ───────────────────────────────────────── */
.cta-section { background: var(--soft); }

.cta-card {
    display: grid;
    grid-template-columns: .9fr 1.3fr;
    gap: 56px;
    align-items: start;
    padding: 52px 48px;
    border-radius: var(--radius-lg);
    background: #fff;
    border: 1px solid rgba(37,99,235,.25);
    box-shadow: var(--shadow-lg);
}

.cta-left h2 { font-size: clamp(28px, 3.2vw, 42px); margin-bottom: 16px; }
.cta-left p { color: var(--muted); line-height: 1.75; margin-bottom: 32px; }

.contact-info { display: flex; flex-direction: column; gap: 14px; }

.contact-row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: var(--dark-3);
    transition: color var(--transition);
}
.contact-row:hover { color: var(--gold-dk); }
.contact-row i { color: var(--gold); font-size: 18px; }

/* Form */
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.form-row { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }

.field { display: flex; flex-direction: column; gap: 6px; }

.field label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.field input,
.field select,
.field textarea {
    border: 1.5px solid var(--line);
    border-radius: 12px;
    padding: 13px 16px;
    font-size: 15px;
    color: var(--text);
    background: #fff;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}

.field input::placeholder,
.field textarea::placeholder { color: #cbd5e1; }

.form-note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--muted);
    margin: 0;
}
.form-note i { color: var(--green); }

/* ── FOOTER ───────────────────────────────────────────────── */
.site-footer {
    background: var(--dark);
    color: #94a3b8;
    padding: 72px 0 0;
}

.footer-layout {
    display: grid;
    grid-template-columns: 1.6fr repeat(3,1fr);
    gap: 48px;
    padding-bottom: 52px;
}

.footer-brand-col .brand { color: #fff; margin-bottom: 16px; display: inline-flex; }

.footer-brand-col p {
    color: #64748b;
    font-size: 14px;
    line-height: 1.75;
    max-width: 320px;
    margin: 0 0 24px;
}

.footer-socials { display: flex; gap: 12px; }
.footer-socials a {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    display: grid;
    place-items: center;
    font-size: 17px;
    color: #64748b;
    transition: color var(--transition), background var(--transition);
}
.footer-socials a:hover { color: var(--gold); background: rgba(37,99,235,.1); }

.footer-col h4 {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 20px;
    letter-spacing: .04em;
}

.footer-col a,
.footer-col span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
    font-size: 14px;
    margin-bottom: 10px;
    transition: color var(--transition);
}
.footer-col a:hover { color: var(--gold); }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.07);
    padding: 22px 0;
}
.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #475569;
    gap: 20px;
}
.footer-links { display: flex; gap: 24px; }
.footer-links a { color: #475569; transition: color var(--transition); }
.footer-links a:hover { color: var(--gold); }

/* ── Screenshot placeholder ──────────────────────────── */
.screenshot-placeholder {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-radius: var(--radius);
    border: 2px dashed var(--line);
    background: var(--soft);
    color: var(--muted);
    font-size: 14px;
    margin: 24px 0;
}
.screenshot-placeholder i { font-size: 28px; color: #cbd5e1; }

/* ── Object type tags (pod CasaBlanka) ───────────────── */
.object-types {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}
.obj-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 20px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    color: #94a3b8;
    font-size: 13px;
    font-weight: 500;
}
.obj-tag i { font-size: 15px; color: var(--gold); }

/* ── Contact note ────────────────────────────────────── */
.contact-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    font-size: 13px;
    color: var(--muted);
    background: var(--soft);
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid var(--line);
}
.contact-note i { color: var(--gold); }

/* ── Berry / voće icon color ─────────────────────────── */
.icon-berry { background: #fdf2f8; color: #9d174d; }

/* ── Featured teal card ──────────────────────────────── */
.product-card.featured-teal {
    background: linear-gradient(160deg, #f0fdfa, #fff);
    border-color: rgba(13,148,136,.2);
}

/* ── Footer domain link ──────────────────────────────── */
.footer-domain {
    color: var(--gold) !important;
    font-weight: 600;
    font-size: 13px;
}

/* Back to top */
.back-to-top {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--dark-3);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 20px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity var(--transition), transform var(--transition);
    z-index: 99;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.back-to-top.visible { opacity: 1; pointer-events: all; transform: translateY(0); }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 1050px) {
    .hero-layout,
    .highlight-layout,
    .why-layout,
    .cta-card { grid-template-columns: 1fr; }

    .hero { min-height: auto; padding: 80px 0 64px; }
    .hero-visual { height: 420px; margin-top: 16px; }
    .laptop-frame { width: 84%; transform: none; }

    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: repeat(3, 1fr); }

    .cta-card { padding: 36px 32px; }
    .footer-layout { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 760px) {
    .container { width: calc(100% - 28px); }

    .main-nav { display: none; }
    .main-nav.open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 72px;
        left: 14px;
        right: 14px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 10px;
        box-shadow: var(--shadow-lg);
        z-index: 200;
    }
    .main-nav.open a { padding: 13px 14px; border-radius: 10px; font-size: 15px; }
    .main-nav.open a:hover { background: var(--soft); }

    .nav-toggle { display: flex; }
    .header-cta { display: none; }

    .hero h1 { font-size: 42px; }
    .hero-visual { height: 340px; }
    .laptop-frame { width: 100%; padding: 10px 10px 16px; }
    .app-body { grid-template-columns: 80px 1fr; }
    .app-sidebar span { display: none; }
    .nav-item { gap: 0; padding: 9px 8px; justify-content: center; }
    .phone-frame { display: none; }

    .kpi-val { font-size: 13px; }
    .app-products { grid-template-columns: repeat(2,1fr); }

    .stats-grid { grid-template-columns: repeat(2,1fr); gap: 20px; }
    .stat-item:last-child { grid-column: span 2; }

    .product-grid { grid-template-columns: 1fr; }
    .why-right { grid-template-columns: 1fr; }
    .steps-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .feature-checklist { grid-template-columns: 1fr; }

    .cta-card { padding: 28px 22px; border-radius: 20px; }
    .footer-layout { grid-template-columns: 1fr; gap: 36px; }
    .footer-bottom-inner { flex-direction: column; text-align: center; }
    .highlight-actions { flex-direction: column; }

    .section { padding: 64px 0; }
}

/* ============================================================
   DODATAK v1.2 — Screenshots, galerija, mobilna sekcija
   ============================================================ */

/* ── Hero sa pravim screenshotom ─────────────────────────── */
.laptop-frame {
    position: absolute;
    left: 0; top: 0;
    width: 88%;
    background: linear-gradient(145deg, #1e2a3a, #030a16);
    border-radius: 22px 22px 8px 8px;
    padding: 14px 14px 0;   /* bottom: 0 — base je van screen */
    box-shadow: 0 40px 100px rgba(0,0,0,.5);
    transform: perspective(900px) rotateY(-4deg) rotateX(1.5deg);
    overflow: hidden;        /* sprečava prelivanje slike */
}

.laptop-screen {
    border-radius: 12px;
    overflow: hidden;
    background: #07111f;
    border: 1px solid rgba(255,255,255,.08);
}

.screen-img {
    width: 100%;
    display: block;
    height: 380px;          /* fiksna visina — ne aspect-ratio koji preliva */
    object-fit: cover;
    object-position: top left;
    transition: opacity .3s ease;
}

.laptop-base {
    height: 22px;
    margin: 0 5%;
    background: linear-gradient(180deg, #2d3748, #1a202c);
    border-radius: 0 0 12px 12px;
}

.phone-frame {
    position: absolute;
    right: 0; bottom: 20px;
    width: 158px;
    background: #020617;
    border-radius: 34px;
    padding: 0;
    border: 1.5px solid rgba(255,255,255,.18);
    box-shadow: 0 28px 72px rgba(0,0,0,.55);
    overflow: hidden;        /* ključno — sika ne izlazi van telefona */
}

.phone-notch {
    width: 60px; height: 20px;
    background: #020617;
    border-radius: 0 0 14px 14px;
    margin: 0 auto 4px;
    position: relative; z-index: 2;
}

.phone-img {
    width: 100%;
    display: block;
    height: 320px;
    object-fit: cover;
    object-position: top;
    border-radius: 0;        /* frame ima border-radius */
}

/* ── Screenshot galerija ─────────────────────────────────── */
.screenshot-gallery {
    margin-top: 16px;
}

.gallery-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.gtab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    border: 1.5px solid var(--line);
    background: #fff;
    color: var(--muted);
    cursor: pointer;
    transition: all var(--transition);
}
.gtab i { font-size: 16px; }
.gtab:hover { border-color: var(--gold); color: var(--gold-dk); }
.gtab.active {
    background: var(--dark-3);
    color: #fff;
    border-color: var(--dark-3);
}

.gallery-screens { position: relative; }

.gscreen { display: none; }
.gscreen.active { display: block; }

.screen-frame {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    margin-bottom: 16px;
}

.screen-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #1e293b;
    color: #94a3b8;
    font-size: 12px;
}

.screen-frame img {
    width: 100%;
    display: block;
    height: 440px;
    object-fit: contain;         /* prikazuje ceo screenshot bez sečenja */
    object-position: top center;
    background: #0d1b2a;         /* tamna pozadina uz dark app screenshotove */
}

.screen-desc {
    padding: 16px 4px 0;
}
.screen-desc strong {
    display: block;
    font-size: 16px;
    color: var(--dark-3);
    margin-bottom: 6px;
}
.screen-desc p {
    color: var(--muted);
    line-height: 1.7;
    font-size: 15px;
    margin: 0;
}

/* ── CasaBlanka feature grid ─────────────────────────────── */
.cb-features {
    margin-top: 48px;
    padding: 40px;
    background: var(--soft);
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
}

.cb-feat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px 20px;
    margin-bottom: 32px;
}

.cb-feat {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--dark-3);
}
.cb-feat i {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: #dbeafe;
    color: #1e40af;
    display: grid;
    place-items: center;
    font-size: 12px;
    flex-shrink: 0;
}

.cb-object-types { margin-bottom: 12px; }
.obj-label {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 12px;
    font-weight: 500;
}
.obj-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.obj-tag {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px; border-radius: 20px;
    background: #fff; border: 1px solid var(--line);
    color: var(--dark-3); font-size: 13px; font-weight: 500;
}
.obj-tag i { font-size: 15px; color: var(--gold); }

/* ── Mobilna sekcija ─────────────────────────────────────── */
.mobile-section { background: var(--dark); color: #fff; }

.mobile-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}

.mobile-copy h2 {
    font-size: clamp(30px, 3.6vw, 48px);
    margin-bottom: 18px;
    color: #fff;
}
.mobile-copy p {
    color: #94a3b8; font-size: 17px; line-height: 1.75; margin-bottom: 36px;
}

.mobile-features {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 22px;
}
.mobile-features li {
    display: flex; align-items: flex-start; gap: 16px;
}
.mobile-features > li > i {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: rgba(37,99,235,.15);
    color: var(--gold);
    display: grid; place-items: center;
    font-size: 20px; flex-shrink: 0;
}
.mobile-features li div { display: flex; flex-direction: column; gap: 4px; }
.mobile-features strong { color: #fff; font-size: 15px; }
.mobile-features span { color: #64748b; font-size: 13px; line-height: 1.5; }

/* Phone showcase */
.mobile-phones { display: flex; justify-content: center; }

.phone-showcase {
    position: relative;
    width: 340px;
    height: 520px;
}

.phone-big, .phone-small {
    position: absolute;
    background: #020617;
    border-radius: 34px;
    border: 1.5px solid rgba(255,255,255,.15);
    box-shadow: 0 32px 80px rgba(0,0,0,.6);
    overflow: hidden;
}

.phone-big {
    width: 200px; height: 420px;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    border: 2px solid rgba(255,255,255,.2);
}

.phone-small {
    width: 155px; height: 330px;
}

.phone-back {
    left: 0; top: 40px;
    z-index: 1;
    opacity: .75;
    transform: rotate(-6deg);
}

.phone-front {
    right: 0; bottom: 30px;
    z-index: 2;
    opacity: .85;
    transform: rotate(5deg);
}

.phone-big img,
.phone-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
}

.phone-big .phone-notch,
.phone-small .phone-notch {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 60px; height: 22px;
    background: #020617;
    border-radius: 0 0 14px 14px;
    z-index: 10;
}

/* ── Screenshot placeholder (fallback) ───────────────────── */
.screenshot-placeholder {
    display: flex; align-items: center; gap: 12px;
    padding: 20px 24px; border-radius: var(--radius);
    border: 2px dashed var(--line); background: var(--soft);
    color: var(--muted); font-size: 14px; margin: 24px 0;
}
.screenshot-placeholder i { font-size: 28px; color: #cbd5e1; }

/* ── Berry icon ──────────────────────────────────────────── */
.icon-berry { background: #fdf2f8; color: #9d174d; }

/* ── Featured teal ───────────────────────────────────────── */
.product-card.featured-teal {
    background: linear-gradient(160deg, #f0fdfa, #fff);
    border-color: rgba(13,148,136,.2);
}

/* ── Footer domain ───────────────────────────────────────── */
.footer-domain { color: var(--gold) !important; font-weight: 600; font-size: 13px; }

/* ── Contact note ────────────────────────────────────────── */
.contact-note {
    display: flex; align-items: center; gap: 8px;
    margin-top: 24px; font-size: 13px; color: var(--muted);
    background: var(--soft); padding: 10px 16px;
    border-radius: 10px; border: 1px solid var(--line);
}
.contact-note i { color: var(--gold); }

/* ── App bar (screen top) ────────────────────────────────── */
.app-bar {
    display: flex; align-items: center; padding: 10px 14px;
    background: #1e293b; gap: 12px;
}
.app-dots { display: flex; gap: 6px; }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot.red { background: #ff5f57; }
.dot.yellow { background: #febc2e; }
.dot.green { background: #28c840; }
.app-title { flex: 1; text-align: center; font-size: 11px; color: #64748b; }
.app-time { font-size: 11px; color: #64748b; }

/* ── Hero visual ─────────────────────────────────────────── */
.hero-visual {
    position: relative;
    height: 520px;
}

/* ── Responsive dodaci ───────────────────────────────────── */
@media (max-width: 1050px) {
    .mobile-layout { grid-template-columns: 1fr; }
    .phone-showcase { margin: 40px auto 0; }
    .cb-feat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
    .hero-visual { height: 360px; }
    .laptop-frame { width: 100%; transform: none; }
    .phone-frame { display: none; }
    .gallery-tabs { gap: 6px; }
    .gtab { padding: 8px 14px; font-size: 13px; }
    .cb-features { padding: 24px; }
    .cb-feat-grid { grid-template-columns: 1fr 1fr; }
    .phone-showcase { width: 280px; height: 440px; }
    .phone-big { width: 170px; height: 360px; }
    .phone-back, .phone-front { width: 130px; height: 280px; }
}

/* ============================================================
   THUMBNAIL STRIP za hero screenshot biranje  v1.3
   ============================================================ */

.hero-thumb-strip {
    position: absolute;
    bottom: -52px;
    left: 0;
    display: flex;
    gap: 10px;
    width: 88%;             /* prati širinu laptopa */
}

.hero-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,.06);
    border: 1.5px solid rgba(255,255,255,.12);
    border-radius: 10px;
    padding: 6px 6px 5px;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), transform var(--transition);
    flex: 1;
}

.hero-thumb img {
    width: 100%;
    height: 42px;
    object-fit: cover;
    object-position: top left;
    border-radius: 6px;
    display: block;
}

.hero-thumb span {
    font-size: 10px;
    color: rgba(255,255,255,.45);
    white-space: nowrap;
    transition: color var(--transition);
}

.hero-thumb:hover {
    border-color: rgba(37,99,235,.5);
    background: rgba(255,255,255,.10);
    transform: translateY(-2px);
}

.hero-thumb.active {
    border-color: var(--gold);
    background: rgba(37,99,235,.12);
}

.hero-thumb.active span {
    color: var(--gold-lt);
}

/* Proširujemo hero-visual da ima prostora za thumb strip */
.hero-visual {
    position: relative;
    height: 580px;   /* povećano sa 520px za thumbnail strip */
    padding-bottom: 60px;
}

/* Responsive thumb strip */
@media (max-width: 1050px) {
    .hero-thumb-strip { width: 84%; bottom: -50px; }
    .hero-visual { height: 500px; }
}

@media (max-width: 760px) {
    .hero-thumb-strip { display: none; }   /* na mobilu sakrivamo — nema mesta */
    .hero-visual { height: 380px; padding-bottom: 0; }
    .screen-img { height: 260px; }
}

/* ============================================================
   PILLAR CARDS + OSTALA REŠENJA  v1.4 — sužena početna strana
   ============================================================ */

/* ── Live dot indicator (zamena za verziju programa) ─────── */
.live-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 3px rgba(52,211,153,.18);
    margin-right: 5px;
    animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: .4; }
}

/* ── Pillar grid: dva glavna stuba (CasaBlanka + MinPOS) ──── */
.pillar-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 64px;
}

.pillar-card {
    padding: 36px 32px;
    border-radius: var(--radius-lg);
    background: #fff;
    border: 1.5px solid var(--line);
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition);
    display: flex;
    flex-direction: column;
}
.pillar-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.pillar-gold {
    background: linear-gradient(165deg, #eff5ff, #fff);
    border-color: rgba(37,99,235,.4);
    box-shadow: 0 12px 48px rgba(37,99,235,.12);
}
.pillar-blue {
    background: linear-gradient(165deg, #f0fdff, #fff);
    border-color: rgba(2,132,199,.25);
}

.pillar-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
}

.pillar-icon {
    width: 60px; height: 60px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 28px;
}

.pillar-card h3 {
    font-size: 28px;
    color: var(--dark-3);
    margin-bottom: 6px;
}

.pillar-tag {
    font-size: 13px;
    font-weight: 700;
    color: var(--gold-dk);
    margin: 0 0 14px;
    letter-spacing: .01em;
}
.pillar-blue .pillar-tag { color: #1d4ed8; }

.pillar-desc {
    color: var(--muted);
    line-height: 1.7;
    font-size: 15px;
    margin: 0 0 22px;
}

.pillar-mini-feats {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
    flex: 1;
}
.pillar-mini-feats span {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 500;
    color: var(--dark-3);
}
.pillar-mini-feats i {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #dbeafe;
    color: #1e40af;
    display: grid;
    place-items: center;
    font-size: 11px;
    flex-shrink: 0;
}
.pillar-blue .pillar-mini-feats i { background: #dbeafe; color: #1d4ed8; }

.pillar-card > .btn { align-self: flex-start; }

/* ── Ostala rešenja — kompaktna sekcija ──────────────────── */
.other-solutions {
    padding-top: 8px;
    border-top: 1px solid var(--line);
}

.other-head {
    text-align: center;
    margin: 32px 0 28px;
}
.other-head h3 {
    font-size: 20px;
    color: var(--dark-3);
    margin-bottom: 6px;
}
.other-head p {
    color: var(--muted);
    font-size: 14px;
    margin: 0;
}

.other-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.other-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 16px;
    background: var(--soft);
    border: 1px solid var(--line);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.other-card:hover {
    background: #fff;
    border-color: rgba(37,99,235,.4);
    transform: translateY(-2px);
}

.other-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 18px;
    flex-shrink: 0;
}

.other-text { flex: 1; min-width: 0; }
.other-text h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--dark-3);
    margin: 0 0 2px;
}
.other-text p {
    font-size: 12px;
    color: var(--muted);
    margin: 0;
    line-height: 1.4;
}

.other-link {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #1d4ed8;
    font-size: 14px;
    flex-shrink: 0;
    transition: background var(--transition);
}
.other-link:hover { background: #dbeafe; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1050px) {
    .pillar-grid { grid-template-columns: 1fr; }
    .other-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
    .pillar-card { padding: 28px 22px; }
    .pillar-card h3 { font-size: 24px; }
    .other-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   REFERENCE SEKCIJA + KAKO POČINJE SARADNJA  v1.5
   ============================================================ */

/* ── References ───────────────────────────────────────────── */
.refs-section { background: var(--soft); }

.refs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.ref-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px 22px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}

.ref-stars {
    color: var(--gold);
    font-size: 14px;
    display: flex;
    gap: 2px;
    margin-bottom: 14px;
}

.ref-quote {
    font-size: 14px;
    color: var(--dark-3);
    line-height: 1.65;
    font-style: italic;
    margin: 0 0 20px;
    flex: 1;
}

.ref-author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.ref-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-lt), var(--gold));
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.ref-author strong {
    display: block;
    font-size: 13px;
    color: var(--dark-3);
}
.ref-author span {
    font-size: 11px;
    color: var(--muted);
}

.refs-placeholder-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 28px;
    font-size: 13px;
    color: #b45309;
    background: #fffbeb;
    border: 1px dashed #fde68a;
    border-radius: 10px;
    padding: 12px 18px;
    text-align: center;
}
.refs-placeholder-note i { font-size: 16px; flex-shrink: 0; }

/* ── Onboarding steps ─────────────────────────────────────── */
.onboarding-section { background: #fff; }

.onboarding-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
}

.ob-step {
    flex: 1;
    max-width: 220px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ob-num {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--dark-3);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
}

.ob-icon {
    width: 60px; height: 60px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--gold-lt), var(--gold));
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 26px;
    margin-bottom: 18px;
}

.ob-step h3 {
    font-size: 16px;
    color: var(--dark-3);
    margin-bottom: 8px;
}
.ob-step p {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
}

.ob-connector {
    flex-shrink: 0;
    width: 60px;
    height: 2px;
    background: var(--line);
    margin-top: 45px;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1050px) {
    .refs-grid { grid-template-columns: repeat(2, 1fr); }
    .onboarding-steps { flex-wrap: wrap; gap: 32px; }
    .ob-connector { display: none; }
    .ob-step { max-width: 45%; }
}

@media (max-width: 760px) {
    .refs-grid { grid-template-columns: 1fr; }
    .onboarding-steps { flex-direction: column; gap: 28px; }
    .ob-step { max-width: 100%; }
}

/* ============================================================
   CASABLANKA STRANICA — feature rows, object grid, FAQ  v1.6
   ============================================================ */

/* ── Za koje objekte radi ────────────────────────────────── */
.objects-section { background: var(--soft); }

.object-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.object-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px 24px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}
.object-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.object-icon {
    width: 56px; height: 56px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 26px;
    margin: 0 auto 18px;
}

.object-card h3 { font-size: 18px; color: var(--dark-3); margin-bottom: 8px; }
.object-card p { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0; }

/* ── Feature rows (alternating image/text) ───────────────── */
.features-section { background: #fff; }

.feature-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    margin-bottom: 88px;
}
.feature-row:last-child { margin-bottom: 0; }

.feature-num {
    font-size: 13px;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: .12em;
    margin-bottom: 14px;
}

.feature-text h3 {
    font-size: 28px;
    color: var(--dark-3);
    margin-bottom: 14px;
}

.feature-text p {
    color: var(--muted);
    line-height: 1.75;
    font-size: 16px;
    margin: 0 0 22px;
}

.feature-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.feature-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--dark-3); }
.feature-list i {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #dbeafe;
    color: #1e40af;
    display: grid;
    place-items: center;
    font-size: 11px;
    flex-shrink: 0;
}

.feat-screen-frame {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
}
.feat-screen-frame img { width: 100%; display: block; }

.feat-icon-showcase {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--dark), var(--dark-2));
    display: grid;
    place-items: center;
    color: var(--gold);
    font-size: 72px;
    box-shadow: var(--shadow-lg);
}
.feat-icon-showcase.small { font-size: 48px; aspect-ratio: auto; height: 140px; }

.feat-dual-icon {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* ── FAQ accordion (native <details>) ────────────────────── */
.faq-section { background: var(--soft); }

.faq-list {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 22px;
    font-size: 15px;
    font-weight: 600;
    color: var(--dark-3);
    cursor: pointer;
    list-style: none;
    transition: background var(--transition);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { background: var(--soft); }
.faq-q i { color: var(--gold); font-size: 16px; flex-shrink: 0; transition: transform var(--transition); }

.faq-item[open] .faq-q i { transform: rotate(180deg); }
.faq-item[open] .faq-q { background: #f5f9ff; }

.faq-a { padding: 0 22px 20px; }
.faq-a p { color: var(--muted); line-height: 1.7; font-size: 14.5px; margin: 0; }

/* ── Refs grid 3-column variant ──────────────────────────── */
.refs-grid-3 { grid-template-columns: repeat(3, 1fr); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1050px) {
    .object-grid { grid-template-columns: repeat(2, 1fr); }
    .feature-row, .feature-row.reverse { grid-template-columns: 1fr; gap: 32px; }
    .feature-row .feature-visual { order: -1; }
    .refs-grid-3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
    .object-grid { grid-template-columns: 1fr; }
    .feature-row { margin-bottom: 56px; }
    .feature-text h3 { font-size: 22px; }
    .feat-icon-showcase { font-size: 48px; }
    .refs-grid-3 { grid-template-columns: 1fr; }
    .faq-q { padding: 15px 16px; font-size: 14px; }
}

/* ============================================================
   SEO STRANICE PO DELATNOSTI  v1.7
   ============================================================ */

/* ── Breadcrumb ───────────────────────────────────────────── */
.breadcrumb-bar {
    background: var(--soft);
    border-bottom: 1px solid var(--line);
    padding: 12px 0;
}
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
    flex-wrap: wrap;
}
.breadcrumb a { color: var(--muted); transition: color var(--transition); }
.breadcrumb a:hover { color: var(--gold-dk); }
.breadcrumb i { font-size: 14px; color: #cbd5e1; }
.breadcrumb span { color: var(--dark-3); font-weight: 600; }

/* ── Compact hero (manje visine za SEO stranice) ─────────── */
.hero-compact { min-height: auto; padding: 64px 0 56px; }
.hero-compact .hero-visual { height: 420px; }

/* ── Intro block ──────────────────────────────────────────── */
.intro-section { background: #fff; }
.intro-block {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}
.intro-block h2 {
    font-size: clamp(26px, 3.2vw, 40px);
    color: var(--dark-3);
    margin-bottom: 20px;
}
.intro-block p {
    font-size: 17px;
    line-height: 1.8;
    color: var(--muted);
    margin: 0;
}

/* ── Problemi ─────────────────────────────────────────────── */
.problems-section { background: var(--soft); }
.problems-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    max-width: 920px;
    margin: 0 auto;
}
.problem-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow-sm);
}
.problem-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: #fef2f2;
    color: #dc2626;
    display: grid;
    place-items: center;
    font-size: 18px;
    flex-shrink: 0;
    transform: rotate(45deg);
}
.problem-icon i { transform: rotate(-45deg); }
.problem-card h3 { font-size: 16px; color: var(--dark-3); margin-bottom: 6px; }
.problem-card p { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0; }

/* ── Delatnost features grid ──────────────────────────────── */
.dfeatures-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.dfeature-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px 24px;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}
.dfeature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.dfeature-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--gold-lt), var(--gold));
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 24px;
    margin-bottom: 18px;
}
.dfeature-card h3 { font-size: 18px; color: var(--dark-3); margin-bottom: 8px; }
.dfeature-card p { font-size: 14px; color: var(--muted); line-height: 1.65; margin: 0; }

/* ── Single screenshot ────────────────────────────────────── */
.single-screenshot { max-width: 900px; margin: 0 auto; }
.single-screenshot .screen-frame {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
}
.single-screenshot .screen-frame img {
    width: 100%;
    display: block;
    height: 460px;
    object-fit: contain;
    object-position: top center;
    background: #0d1b2a;
}

/* ── Related pages (internal linking za SEO) ─────────────── */
.related-pages {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}
.related-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 12px;
}
.related-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #1d4ed8;
    margin-right: 16px;
    margin-bottom: 8px;
    transition: gap var(--transition);
}
.related-link:hover { gap: 10px; }
.related-link i { font-size: 14px; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1050px) {
    .dfeatures-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-compact .hero-visual { height: 340px; }
}
@media (max-width: 760px) {
    .problems-grid { grid-template-columns: 1fr; }
    .dfeatures-grid { grid-template-columns: 1fr; }
    .single-screenshot .screen-frame img { height: 260px; }
    .hero-compact .hero-visual { display: none; }
}

/* ── Object card kao link (ka SEO stranicama) ────────────── */
.object-link { text-decoration: none; position: relative; }
.object-link h3 { display: flex; align-items: center; justify-content: center; gap: 6px; }
.obj-arrow { font-size: 15px; color: var(--gold); opacity: 0; transform: translateX(-4px); transition: opacity var(--transition), transform var(--transition); }
.object-link:hover .obj-arrow { opacity: 1; transform: translateX(0); }

/* ── Brand sa tagline (kao mockup logo) ──────────────────── */
.brand-text-wrap {
    display: flex;
    flex-direction: column;
    line-height: 1;
}
.brand-tagline {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 3px;
}
.footer-brand .brand-tagline { color: #64748b; }