/* Homepage — AI Platform Style */

/* ========== HERO ========== */
.hero {
    position: relative;
    padding: 160px 0 80px;
    text-align: center;
    overflow: hidden;
    background: linear-gradient(180deg, #f8faff 0%, var(--white) 100%);
}
.hero-bg-pattern {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 100%, rgba(59,130,246,0.06) 0%, transparent 70%),
        url("data:image/svg+xml,%3Csvg width='1440' height='400' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 300 Q360 220 720 280 T1440 240 L1440 400 L0 400Z' fill='%23f1f5f9' fill-opacity='0.5'/%3E%3C/svg%3E") no-repeat bottom center / 100% auto;
    pointer-events: none;
}
.hero-content {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
}
.hero h1 {
    font-size: clamp(46px, 5.5vw, 64px);
    font-weight: 600;
    color: var(--gray-900);
    line-height: 1.1;
    margin: 0 0 24px;
    letter-spacing: -1.5px;
}
.hero-subtitle {
    font-size: 18px;
    color: var(--gray-500);
    line-height: 1.65;
    margin: 0 0 36px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}
.hero-buttons {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 36px;
}
.hero-trust {
    display: flex;
    gap: 28px;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--gray-400);
    font-weight: 500;
}
.hero-trust span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.hero-trust svg { color: var(--teal); flex-shrink: 0; }

/* ========== NEWS SECTION ========== */
.news-section {
    padding: 64px 0;
    background: var(--white);
    border-top: 1px solid var(--gray-100);
}
.news-section .container {
    max-width: 1400px;
}
.news-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}
.news-header h2 {
    font-size: 24px;
    font-weight: 800;
    color: var(--gray-900);
    margin: 0;
}
.news-header a {
    font-size: 14px;
    font-weight: 600;
    color: var(--cta) !important;
    text-decoration: none !important;
}
.news-header a:hover { text-decoration: underline !important; }

/* 3-column layout: big | 2x medium | 6x text list */
.news-layout {
    display: grid;
    grid-template-columns: 1.8fr 1fr 300px;
    gap: 28px;
    align-items: start;
}

/* Big column wrapper */
.news-big-col {
    display: flex;
    flex-direction: column;
}

/* Big article — left, image + gradient card body */
.news-big {
    display: flex;
    flex-direction: column;
    flex: 1;
    background: linear-gradient(135deg, var(--cta-light), var(--teal-light));
    border-radius: var(--radius);
    border: 1px solid rgba(59,130,246,0.1);
    overflow: hidden;
    transition: all 0.35s;
}
.news-big:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}
.news-big-image {
    display: block;
    overflow: hidden;
}
.news-big-image img {
    width: 100% !important;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
    transition: transform 0.5s;
}
.news-big:hover .news-big-image img { transform: scale(1.04); }
.news-big-body {
    padding: 28px 32px 32px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.news-big-body h3 {
    font-size: 34px;
    font-weight: 600;
    color: var(--gray-900);
    line-height: 1.2;
    margin: 0 0 16px;
    letter-spacing: -0.5px;
}
.news-big-body h3 a { color: inherit; text-decoration: none !important; }
.news-big-body h3 a:hover { color: var(--cta); }
.news-big-body p {
    font-size: 16px;
    color: var(--gray-600);
    line-height: 1.65;
    margin: 0 0 16px;
}

/* Category tag */
.news-cat {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--cta) !important;
    text-decoration: none !important;
    margin-bottom: 8px;
    padding: 3px 8px;
    background: var(--cta-light);
    border-radius: 4px;
}
.news-cat:hover { opacity: 0.8; }

/* Meta line */
.news-meta {
    display: flex;
    gap: 6px;
    font-size: 12px;
    color: var(--gray-400);
    font-weight: 500;
}

/* 2 medium stacked — center column */
.news-medium-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.news-medium {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.news-medium-image {
    display: block;
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 12px;
}
.news-medium-image img {
    width: 100% !important;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
    transition: transform 0.5s;
}
.news-medium:hover .news-medium-image img { transform: scale(1.04); }
.news-medium-body h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-900);
    line-height: 1.35;
    margin: 0 0 6px;
}
.news-medium-body h4 a { color: inherit; text-decoration: none !important; }
.news-medium-body h4 a:hover { color: var(--cta); }

/* 6 text-only list — right column */
.news-list-col {
    border-left: 1px solid var(--gray-100);
    padding-left: 24px;
}
.news-list-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--gray-100);
}
.news-list-item:first-child { padding-top: 0; }
.news-list-item:last-child { border-bottom: none; }
.news-list-cat {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--cta) !important;
    text-decoration: none !important;
    margin-bottom: 4px;
}
.news-list-item h5 {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-800);
    line-height: 1.4;
    margin: 0 0 4px;
}
.news-list-item h5 a { color: inherit; text-decoration: none !important; }
.news-list-item h5 a:hover { color: var(--cta); }

/* News responsive */
@media (max-width: 1024px) {
    .news-layout {
        grid-template-columns: 1fr 1fr;
    }
    .news-list-col {
        grid-column: 1 / -1;
        border-left: none;
        padding-left: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 24px;
        border-top: 1px solid var(--gray-100);
        padding-top: 16px;
        margin-top: 8px;
    }
}
@media (max-width: 768px) {
    .news-section { padding: 40px 0; }
    .news-header h2 { font-size: 20px; }
    .news-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .news-medium-col {
        flex-direction: row;
        gap: 12px;
    }
    .news-medium-image img { aspect-ratio: 4/3; }
    .news-list-col {
        grid-template-columns: 1fr;
        border-top: 1px solid var(--gray-100);
        padding-top: 12px;
    }
    .news-big-body h3 { font-size: 20px; }
}

/* ========== AI TOOLS ========== */
.tools-section {
    padding: 80px 0;
    background: var(--gray-50);
}
.tools-header {
    text-align: center;
    margin-bottom: 48px;
}
.tools-header .section-eyebrow { text-align: center; margin-bottom: 12px; }
.tools-header .section-title { text-align: center; }
.tools-header .section-subtitle { text-align: center; margin: 0 auto; }
.tools-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}
.tool-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s;
}
.tool-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: var(--gray-300);
}
.tool-card-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.tool-card-icon--blue { background: var(--cta-light); color: var(--cta); }
.tool-card-icon--teal { background: var(--teal-light); color: var(--teal-dark); }
.tool-card-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 50px;
    margin-bottom: 14px;
    width: fit-content;
}
.tool-card-tag::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
}
.tool-card-tag--blue { background: var(--cta-light); color: var(--cta); }
.tool-card-tag--blue::before { background: var(--cta); }
.tool-card-tag--teal { background: var(--teal-light); color: var(--teal-dark); }
.tool-card-tag--teal::before { background: var(--teal); }
.tool-card h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 10px;
}
.tool-card p {
    font-size: 15px;
    color: var(--gray-500);
    line-height: 1.65;
    margin: 0 0 24px;
}

/* ========== ARTICLES ========== */
.articles-section {
    padding: 80px 0;
    background: var(--white);
}
.section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 36px;
}
.section-header-row .section-eyebrow { text-align: left; margin-bottom: 8px; }
.section-header-row .section-title { margin-bottom: 0; }
.articles-grid-home {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* ========== CATEGORIES ========== */
.categories-section {
    padding: 80px 0;
    background: var(--gray-50);
    text-align: center;
}
.categories-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-top: 36px;
}
.category-pill-big {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 32px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    text-decoration: none !important;
    transition: all 0.3s;
    min-width: 140px;
}
.category-pill-big:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
    border-color: var(--cta);
}
.category-pill-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 4px;
}
.category-pill-big:hover .category-pill-name { color: var(--cta); }
.category-pill-count {
    font-size: 13px;
    color: var(--gray-400);
    font-weight: 500;
}

/* ========== SHOP ========== */
.shop-section {
    padding: 80px 0;
    background: var(--white);
    text-align: center;
}
.shop-section .section-subtitle { margin-bottom: 40px; }
.shop-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    text-align: left;
}
.shop-card {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--gray-200);
    transition: all 0.3s;
    text-decoration: none !important;
    display: block;
}
.shop-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}
.shop-card-image { aspect-ratio: 1; overflow: hidden; }
.shop-card-image img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
.shop-card-body { padding: 16px; }
.shop-card h4 { font-size: 15px; font-weight: 700; color: var(--gray-900); margin: 0 0 8px; line-height: 1.35; }
.shop-card .price { font-size: 18px; font-weight: 700; color: var(--cta); }

/* ========== TRUST ========== */
.trust-section {
    padding: 64px 0;
    background: var(--gray-50);
}
.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.trust-item { text-align: center; padding: 24px 16px; }
.trust-number { font-size: 44px; font-weight: 800; margin-bottom: 8px; line-height: 1; }
.trust-label { font-size: 15px; color: var(--gray-500); font-weight: 500; }

/* ========== PARTNER ========== */
.partner-section {
    padding: 72px 0;
    background: var(--dark);
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.partner-section::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(59,130,246,0.1), transparent 70%);
    border-radius: 50%;
}
.partner-section > * { position: relative; z-index: 1; }
.partner-section h2 { font-size: clamp(24px, 4vw, 36px); font-weight: 700; margin: 0 0 12px; color: #fff; }
.partner-section p { color: rgba(255,255,255,0.6); font-size: 17px; margin: 0 0 28px; }

/* ========== SECTION TYPOGRAPHY (scoped) ========== */
.tools-section .section-eyebrow,
.articles-section .section-eyebrow,
.categories-section .section-eyebrow,
.shop-section .section-eyebrow {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--cta);
    margin-bottom: 12px;
}
.tools-section .section-title,
.articles-section .section-title,
.categories-section .section-title,
.shop-section .section-title {
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 12px;
    line-height: 1.2;
}
.tools-section .section-subtitle,
.shop-section .section-subtitle {
    font-size: 16px;
    color: var(--gray-500);
    max-width: 560px;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
    .articles-grid-home { grid-template-columns: repeat(2, 1fr); }
    .shop-grid { grid-template-columns: repeat(2, 1fr); }
    .trust-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .hero { padding: 120px 0 60px; }
    .hero h1 { font-size: 52px; font-weight: 600; letter-spacing: -1px; }
    .hero-subtitle { font-size: 18px; }
    .hero-buttons { flex-direction: row; justify-content: center; }
    .hero-buttons .btn-primary,
    .hero-buttons .btn-outline { flex: 1; justify-content: center; max-width: 220px; padding: 13px 16px; font-size: 14px; }
    .hero-trust { flex-direction: row; flex-wrap: nowrap; gap: 16px; font-size: 11px; }

    .tools-section { padding: 56px 0; }
    .tools-grid { grid-template-columns: 1fr; max-width: 500px; }
    .tool-card { padding: 28px 24px; }

    .articles-section { padding: 56px 0; }
    .section-header-row { flex-direction: column; align-items: flex-start; gap: 16px; }
    .articles-grid-home { grid-template-columns: 1fr; gap: 16px; }

    .categories-section { padding: 56px 0; }
    .categories-pills { gap: 10px; }
    .category-pill-big { padding: 16px 20px; min-width: 120px; flex: 1 1 calc(50% - 10px); }

    .shop-section { padding: 56px 0; }
    .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

    .trust-grid { grid-template-columns: repeat(2, 1fr); }
    .trust-number { font-size: 32px; }

    .partner-section { padding: 48px 0; }
}

@media (max-width: 480px) {
    .hero h1 { font-size: 46px; font-weight: 600; }
    .shop-grid { grid-template-columns: 1fr; }
    .category-pill-big { flex: 1 1 100%; }
}
/* Fix GDPR cookie popup styling */
#ct-ultimate-gdpr-cookie-popup {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    z-index: 99999 !important;
    max-height: auto !important;
    overflow: visible !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 14px !important;
    padding: 16px 24px !important;
    background: #fff !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-top: 1px solid #e5e7eb !important;
    color: #374151 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}
#ct-ultimate-gdpr-cookie-popup .ct-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    max-width: 1200px !important;
}
#ct-ultimate-gdpr-cookie-popup * {
    font-size: 13px !important;
    font-family: inherit !important;
    color: #374151 !important;
}
#ct-ultimate-gdpr-cookie-popup .fa,
#ct-ultimate-gdpr-cookie-popup .fa-check,
#ct-ultimate-gdpr-cookie-popup .fa-cog,
#ct-ultimate-gdpr-cookie-popup [class*="fa-"] {
    display: none !important;
}
/* Accept button */
#ct-ultimate-gdpr-cookie-accept {
    background: var(--cta, #3b82f6) !important;
    color: #fff !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background 0.2s !important;
}
#ct-ultimate-gdpr-cookie-accept:hover {
    background: #2563eb !important;
}
#ct-ultimate-gdpr-cookie-accept * {
    color: #fff !important;
}
/* Settings button */
#ct-ultimate-gdpr-cookie-change-settings {
    background: transparent !important;
    color: #6b7280 !important;
    border: 1px solid #d1d5db !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.2s !important;
}
#ct-ultimate-gdpr-cookie-change-settings:hover {
    border-color: #9ca3af !important;
    color: #374151 !important;
}
#ct-ultimate-gdpr-cookie-change-settings * {
    color: inherit !important;
}
#ct-ultimate-gdpr-cookie-popup .ct-ultimate-gdpr-cookie-popup-btn-wrapper {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}
/* GDPR modal — hidden by default, only show as proper overlay */
#ct-ultimate-gdpr-cookie-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 999999 !important;
    background: rgba(0,0,0,0.5) !important;
    overflow-y: auto !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
}
#ct-ultimate-gdpr-cookie-modal.ct-ultimate-gdpr-cookie-modal-show {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    height: auto !important;
    align-items: center !important;
    justify-content: center !important;
}
/* Floating cookie gear button */
#ct-ultimate-gdpr-cookie-open {
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    opacity: 0.6 !important;
    transition: opacity 0.3s !important;
}
#ct-ultimate-gdpr-cookie-open:hover { opacity: 1 !important; }
#ct-ultimate-gdpr-cookie-modal-body {
    max-height: 80vh !important;
    max-width: 600px !important;
    overflow-y: auto !important;
    background: #fff !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin: 20px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3) !important;
}
#ct-ultimate-gdpr-cookie-modal-body * {
    font-size: 14px !important;
    max-width: 100% !important;
}
#ct-ultimate-gdpr-cookie-modal-body h1,
#ct-ultimate-gdpr-cookie-modal-body h2,
#ct-ultimate-gdpr-cookie-modal-body h3 {
    font-size: 16px !important;
}
#ct-ultimate-gdpr-cookie-modal-body img,
#ct-ultimate-gdpr-cookie-modal-body svg {
    max-width: 40px !important;
    max-height: 40px !important;
}

/* Replace hero wave with subtle curved lines like analiza-nalaza */
.hero-bg-pattern {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='900' viewBox='0 0 1440 900'%3E%3Cpath d='M0 300 Q360 220 720 300 T1440 280' fill='none' stroke='rgba(0,0,0,0.04)' stroke-width='1.5'/%3E%3Cpath d='M0 420 Q360 350 720 420 T1440 400' fill='none' stroke='rgba(0,0,0,0.03)' stroke-width='1.5'/%3E%3Cpath d='M0 540 Q360 480 720 560 T1440 520' fill='none' stroke='rgba(0,0,0,0.025)' stroke-width='1.5'/%3E%3Cpath d='M0 660 Q360 600 720 680 T1440 640' fill='none' stroke='rgba(0,0,0,0.02)' stroke-width='1.5'/%3E%3Cpath d='M0 180 Q400 130 800 190 T1440 160' fill='none' stroke='rgba(0,0,0,0.02)' stroke-width='1'/%3E%3Cpath d='M0 780 Q400 720 800 780 T1440 760' fill='none' stroke='rgba(0,0,0,0.015)' stroke-width='1'/%3E%3C/svg%3E") !important;
    background-position: center !important;
    background-size: cover !important;
}

/* ========== eDOKTOR PRIČE ========== */
.hero {
    background: #f8faff !important;
}
@media (max-width: 768px) {
    .hero { padding-bottom: 48px !important; }
    .hero-trust {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px 20px !important;
    }
    .hero-trust span {
        white-space: nowrap !important;
        font-size: 11px !important;
    }
}
.stories-section {
    padding: 0 0 32px;
    background: #f8faff;
    border-top: none;
}
/* Trust — dark strip */
.trust-section {
    background: var(--dark) !important;
    padding: 56px 0 !important;
}
.trust-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 80px !important;
}
.trust-item {
    text-align: center !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}
.trust-number,
.trust-number.gradient-text {
    font-size: 42px !important;
    font-weight: 800 !important;
    color: #fff !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #fff !important;
    background-clip: unset !important;
    display: block !important;
    line-height: 1.1 !important;
    margin-bottom: 8px !important;
}
.trust-label {
    color: rgba(255,255,255,0.6) !important;
    font-size: 16px !important;
    white-space: nowrap !important;
}
/* Shop section fixes */
.shop-section .section-eyebrow {
    margin-bottom: 2px !important;
}
.shop-section .section-subtitle {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* Shop card images */
.shop-card-image {
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--gray-50);
    display: flex;
    align-items: center;
    justify-content: center;
}
.shop-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}
.shop-card:hover .shop-card-image img {
    transform: scale(1.05);
}
.shop-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--gray-300);
    background: linear-gradient(135deg, var(--gray-50), #f1f5f9);
}
.shop-cta {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cta);
    transition: all 0.3s;
}
.shop-card:hover .shop-cta {
    text-decoration: underline;
}
.shop-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--teal);
    background: var(--teal-light);
    padding: 3px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
}
.stories-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 24px;
}
.stories-header > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.stories-header .section-eyebrow {
    display: none !important;
}
.stories-header .section-title {
    color: var(--gray-900);
    margin-bottom: 0;
}
.stories-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}
.stories-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--gray-300);
    background: var(--white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-600);
    transition: all 0.2s;
}
.stories-arrow:hover {
    border-color: var(--cta);
    color: var(--cta);
    box-shadow: var(--shadow-sm);
}
.stories-scroll-wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}
@media (min-width: 768px) { .stories-scroll-wrap { padding: 0 32px; } }
.stories-scroll {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
    scrollbar-width: none;
    scroll-behavior: smooth;
}
.stories-scroll::-webkit-scrollbar { display: none; }

.story-card {
    flex: 0 0 calc(25% - 15px);
    scroll-snap-align: start;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--gray-200);
    text-decoration: none !important;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
}
.story-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}
.story-card-image {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
}
.story-card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    transition: transform 0.5s;
}
.story-card:hover .story-card-image img { transform: scale(1.06); }
.story-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
}
.story-card-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #fff;
    background: rgba(20,184,166,0.75);
    backdrop-filter: blur(8px);
    padding: 4px 10px;
    border-radius: 50px;
}
.story-card-body {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.story-card-body h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.35;
    margin: 0 0 8px;
}
.story-card-body p {
    font-size: 13px;
    color: var(--gray-500);
    line-height: 1.5;
    margin: 0 0 12px;
    flex: 1;
}
.story-read-more {
    font-size: 13px;
    font-weight: 600;
    color: var(--cta);
}
.story-card:hover .story-read-more { text-decoration: underline; }

/* ========== ENTRANCE ANIMATIONS ========== */
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes countUp {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* Hero h1 animation */
@keyframes heroReveal {
    from { opacity: 0; transform: translateY(24px); filter: blur(6px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.hero h1 {
    animation: heroReveal 0.8s ease-out both;
}
.hero-subtitle {
    opacity: 0;
    animation: fadeSlideUp 0.7s 0.3s ease forwards;
}
.hero-buttons {
    opacity: 0;
    animation: fadeSlideUp 0.7s 0.5s ease forwards;
}
/* Stories — scale up */
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}
/* Reveal na scroll — transition umjesto keyframe animacije:
   keyframe zna ostati "pending" (bez start timea) na throttlanim tabovima
   pa elementi trajno ostanu na opacity 0 */
.story-card { opacity: 0; transform: scale(0.9); transition: opacity 0.5s ease, transform 0.5s ease; }
.story-card.animate-in { opacity: 1; transform: scale(1); }
/* Trust — count-up style */
.trust-item { opacity: 0; transition: opacity 0.6s ease; }
.trust-item.animate-in { opacity: 1; }
/* Everything else — fade slide up */
.news-big,
.news-medium,
.news-list-item,
.tool-card,
.shop-card,
.partner-benefit-card,
.category-pill-big,
.ads-content {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.news-big.animate-in,
.news-medium.animate-in,
.news-list-item.animate-in,
.tool-card.animate-in,
.shop-card.animate-in,
.partner-benefit-card.animate-in,
.category-pill-big.animate-in,
.ads-content.animate-in {
    opacity: 1;
    transform: none;
}

/* Tools nav arrows — hidden on desktop, shown on mobile */
.tools-nav-mobile {
    display: none;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}

/* ========== NEWS — bigger title + layout fix ========== */
.news-layout {
    display: grid !important;
    grid-template-columns: 1.8fr 1fr 300px !important;
    gap: 28px !important;
    align-items: start !important;
}
.news-list-col {
    grid-column: auto !important;
    display: flex !important;
    flex-direction: column !important;
    border-left: 1px solid var(--gray-100) !important;
    padding-left: 24px !important;
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}
@media (max-width: 768px) {
    .news-layout {
        grid-template-columns: 1fr !important;
    }
    .news-list-col {
        grid-column: 1 / -1 !important;
        border-left: none !important;
        padding-left: 0 !important;
        border-top: 1px solid var(--gray-100) !important;
        padding-top: 12px !important;
    }
}
.news-header {
    align-items: flex-end !important;
}
.news-header > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.news-header .section-eyebrow {
    display: block !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: var(--cta) !important;
    margin-bottom: 2px !important;
    line-height: 1 !important;
}
.news-header h2 {
    margin: 0 !important;
}
.news-header > a {
    margin-bottom: 6px;
}

/* ========== AI TOOLS — 3 columns ========== */
.tools-grid.tools-grid--3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    max-width: 100% !important;
    gap: 20px !important;
    margin: 0 !important;
}
.tools-section .container {
    max-width: 1240px !important;
    padding: 0 32px !important;
}
.tools-grid.tools-grid--3 .tool-card {
    padding: 24px 20px !important;
}
.tools-grid.tools-grid--3 .tool-card h3 {
    font-size: 18px !important;
}
.tools-grid.tools-grid--3 .tool-card p {
    font-size: 13px !important;
    margin-bottom: 16px !important;
}
.tool-card-icon--purple { background: #f3e8ff; color: var(--purple); }
.tool-card-tag--purple { background: #f3e8ff; color: var(--purple); }
.tool-card-tag--purple::before { background: var(--purple); }

/* ========== CATEGORY LABEL COLORS — pill with rounded bg ========== */
.news-cat[data-cat],
.news-list-cat[data-cat] {
    display: inline-block !important;
    width: auto !important;
    align-self: flex-start !important;
    padding: 4px 12px !important;
    border-radius: 50px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    text-decoration: none !important;
    margin-bottom: 6px !important;
}
/* MamaMami — pink */
[data-cat="mamamami"] { color: var(--pink) !important; background: #fdf2f8 !important; }
/* Recepti — orange */
[data-cat="recepti-sto-danas-kuhati"] { color: #ea580c !important; background: #fff7ed !important; }
/* Stomatologija — purple */
[data-cat="stomatologija"] { color: var(--purple) !important; background: #f5f3ff !important; }
/* Lijekovi — dark */
[data-cat="lijekovi"] { color: #0f172a !important; background: #f1f5f9 !important; }
/* Lifestyle — yellow */
[data-cat="lifestyle-zdrav-zivot"] { color: #b45309 !important; background: #fefce8 !important; }
/* Ljepota — red */
[data-cat="ljepota"] { color: #dc2626 !important; background: #fef2f2 !important; }
/* Zdravlje+ — blue */
[data-cat="zdravlje"] { color: var(--cta) !important; background: var(--cta-light) !important; }
/* eDoktor priče — teal */
[data-cat="edoktor-price"] { color: #059669 !important; background: #ecfdf5 !important; }

/* ========== ARTICLE LINKS — underline fill instead of blue hover ========== */
.news-big-body h3 a,
.news-medium-body h4 a,
.news-list-item h5 a,
.story-card-body h3 {
    color: var(--gray-900) !important;
    text-decoration: none !important;
    background-image: linear-gradient(135deg, var(--cta), var(--teal)) !important;
    background-position: 0 100% !important;
    background-repeat: no-repeat !important;
    background-size: 0% 2px !important;
    transition: background-size 0.35s ease !important;
    padding-bottom: 2px !important;
}
.news-big-body h3 a:hover,
.news-medium-body h4 a:hover,
.news-list-item h5 a:hover,
.story-card:hover .story-card-body h3 {
    color: var(--gray-900) !important;
    background-size: 100% 2px !important;
}

/* ========== EYEBROW — tighter to title ========== */
.section-eyebrow,
.tools-section .section-eyebrow,
.tools-header .section-eyebrow,
.shop-section .section-eyebrow,
.ads-section .section-eyebrow,
.ads-text .section-eyebrow,
.partner-header .section-eyebrow,
.partner-section-light .section-eyebrow,
.categories-section .section-eyebrow,
.articles-section .section-eyebrow,
.section-header-row .section-eyebrow,
.news-header .section-eyebrow {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
}
.section-title,
.tools-header .section-title,
.tools-section .section-title,
.shop-section .section-title,
.ads-section .section-title,
.partner-header .section-title,
.categories-section .section-title,
.news-header h2,
.stories-header .section-title {
    margin-top: 4px !important;
    font-size: clamp(26px, 4vw, 38px) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

/* ========== MAMAMAMI section ========== */
.mamamami-section .news-header .section-eyebrow {
    color: var(--pink) !important;
}

/* ========== CATEGORIES — white bg, 4x2 grid ========== */
.categories-section {
    background: #fff !important;
}
.categories-pills {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
}
@media (max-width: 768px) {
    .categories-pills {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
/* MamaMami — pink */
.category-pill-big[data-slug="mamamami"] {
    background: #fdf2f8 !important;
    border-color: #f9a8d4 !important;
}
.category-pill-big[data-slug="mamamami"] .category-pill-name {
    color: var(--pink) !important;
}
.category-pill-big[data-slug="mamamami"]:hover {
    border-color: var(--pink) !important;
}
/* Recepti — orange */
.category-pill-big[data-slug="recepti-sto-danas-kuhati"] {
    background: #fff7ed !important;
    border-color: #fdba74 !important;
}
.category-pill-big[data-slug="recepti-sto-danas-kuhati"] .category-pill-name {
    color: #ea580c !important;
}
.category-pill-big[data-slug="recepti-sto-danas-kuhati"]:hover {
    border-color: #ea580c !important;
}
/* Stomatologija — purple */
.category-pill-big[data-slug="stomatologija"] {
    background: #f5f3ff !important;
    border-color: #c4b5fd !important;
}
.category-pill-big[data-slug="stomatologija"] .category-pill-name {
    color: var(--purple) !important;
}
.category-pill-big[data-slug="stomatologija"]:hover {
    border-color: var(--purple) !important;
}
/* Lijekovi — black */
.category-pill-big[data-slug="lijekovi"] {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
}
.category-pill-big[data-slug="lijekovi"] .category-pill-name {
    color: #0f172a !important;
}
.category-pill-big[data-slug="lijekovi"]:hover {
    border-color: #0f172a !important;
}
/* Ljepota — red */
.category-pill-big[data-slug="ljepota"] {
    background: #fef2f2 !important;
    border-color: #fca5a5 !important;
}
.category-pill-big[data-slug="ljepota"] .category-pill-name {
    color: #dc2626 !important;
}
.category-pill-big[data-slug="ljepota"]:hover {
    border-color: #dc2626 !important;
}
/* Zdravlje+ — blue */
.category-pill-big[data-slug="zdravlje"] {
    background: #eff6ff !important;
    border-color: #93c5fd !important;
}
.category-pill-big[data-slug="zdravlje"] .category-pill-name {
    color: var(--cta) !important;
}
.category-pill-big[data-slug="zdravlje"]:hover {
    border-color: var(--cta) !important;
}
/* eDoktor priče — teal */
.category-pill-big[data-slug="edoktor-price"] {
    background: #f0fdfa !important;
    border-color: #5eead4 !important;
}
.category-pill-big[data-slug="edoktor-price"] .category-pill-name {
    color: #14b8a6 !important;
}
.category-pill-big[data-slug="edoktor-price"]:hover {
    border-color: #14b8a6 !important;
}
/* Lifestyle — yellow */
.category-pill-big[data-slug="lifestyle-zdrav-zivot"] {
    background: #fefce8 !important;
    border-color: #fcd34d !important;
}
.category-pill-big[data-slug="lifestyle-zdrav-zivot"] .category-pill-name {
    color: #b45309 !important;
}
.category-pill-big[data-slug="lifestyle-zdrav-zivot"]:hover {
    border-color: #b45309 !important;
}

/* ========== BANNER ADS ========== */
.ads-section {
    padding: 140px 0;
    background: linear-gradient(135deg, #eff6ff 0%, #f0fdfa 100%);
}
.ads-content {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 64px;
    align-items: center;
}
.ads-section .section-eyebrow {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--cta);
    margin-bottom: 2px;
    display: block;
}
.ads-section .section-title {
    font-size: clamp(28px, 4.5vw, 42px);
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 20px;
    line-height: 1.2;
}
.ads-description {
    font-size: 17px;
    color: var(--gray-600);
    line-height: 1.7;
    margin: 0 0 36px;
}
.ads-stats {
    display: flex;
    gap: 40px;
    margin-bottom: 36px;
}
.ads-stat {
    display: flex;
    flex-direction: column;
}
.ads-stat-number {
    font-size: 34px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--cta), var(--teal));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}
.ads-stat-label {
    font-size: 14px;
    color: var(--gray-500);
    font-weight: 500;
    margin-top: 2px;
}

/* Browser mockup */
.ads-mockup {
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.ads-mockup-bar {
    display: flex;
    gap: 6px;
    padding: 12px 16px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}
.ads-mockup-bar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gray-300);
}
.ads-mockup-content {
    padding: 24px;
}
.ads-mockup-banner {
    background: linear-gradient(135deg, var(--cta-light), var(--teal-light));
    border: 2px dashed var(--cta);
    border-radius: var(--radius-sm);
    padding: 48px 32px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: var(--cta);
    margin-bottom: 16px;
}
.ads-mockup-line {
    height: 10px;
    background: var(--gray-100);
    border-radius: 5px;
    margin-bottom: 10px;
}

/* ========== PARTNER — light, row layout ========== */
.partner-section-light {
    padding: 64px 0;
    background: var(--gray-50);
}
.partner-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 32px;
}
.partner-header .section-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--cta);
    margin-bottom: 2px;
}
.partner-header .section-title {
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 8px;
    line-height: 1.2;
}
.partner-benefits-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.partner-benefit-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 28px 24px;
    text-align: center;
    transition: all 0.3s;
}
.partner-benefit-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}
.partner-benefit-card svg {
    color: var(--teal);
    margin-bottom: 12px;
}
.partner-benefit-card strong {
    display: block;
    font-size: 16px;
    color: var(--gray-900);
    margin-bottom: 4px;
}
.partner-benefit-card span {
    font-size: 13px;
    color: var(--gray-500);
    line-height: 1.5;
}

/* ========== RESPONSIVE ADDITIONS ========== */
@media (max-width: 1024px) {
    .tools-grid.tools-grid--3 { grid-template-columns: repeat(3, 1fr) !important; }
    .ads-content { grid-template-columns: 1fr; }
    .ads-visual { display: none; }
}

@media (max-width: 768px) {
    /* Stories — push down from hero */
    .stories-section { padding: 32px 0 40px !important; margin-top: 0 !important; }
    .stories-header { flex-direction: column; align-items: center; gap: 12px; text-align: center; }
    .stories-header .section-eyebrow { display: none !important; }
    .stories-header .section-title { text-align: center; }
    .news-header { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; }
    .news-header h2 { line-height: 1.15 !important; }
    .news-header > a { margin-bottom: 0; font-size: 14px; }
    .stories-nav { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 8px !important; }
    .stories-arrow { width: 36px; height: 36px; }
    .story-card { flex: 0 0 240px; }

    /* Trust — 2x2 grid */
    .trust-section { padding: 48px 0 !important; }
    .trust-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        flex-wrap: wrap !important;
        gap: 24px 32px !important;
        justify-items: center !important;
    }
    .trust-number, .trust-number.gradient-text { font-size: 40px !important; }
    .trust-label { font-size: 13px !important; }

    /* AI Tools — horizontal scroll with arrows */
    .tools-nav-mobile { display: flex !important; }
    .tools-grid.tools-grid--3 {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 16px !important;
        padding: 0 16px 12px !important;
        max-width: 100% !important;
        scrollbar-width: none !important;
    }
    .tools-grid.tools-grid--3::-webkit-scrollbar { display: none; }
    .tools-grid.tools-grid--3 .tool-card {
        flex: 0 0 85% !important;
        scroll-snap-align: center !important;
    }

    /* News headers — CTA away from title */
    .news-header {
        gap: 12px !important;
    }
    .news-header > a {
        margin-top: 4px !important;
    }

    /* Shop — 2x2 grid */
    .shop-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    /* Partner — more padding */
    .partner-section-light { padding: 56px 0 !important; }
    .partner-header { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 24px !important; }
    .partner-benefits-row { grid-template-columns: 1fr; gap: 16px; }

    /* Ads — padding + stats in row */
    .ads-section { padding: 64px 0 !important; }
    .ads-stats {
        flex-direction: row !important;
        gap: 20px !important;
        flex-wrap: nowrap !important;
    }
    .ads-stat-number { font-size: 24px !important; }
    .ads-stat-label { font-size: 11px !important; }
}

/* ===== Razigrani hero elementi (2026-07-31) ===== */
.hero { position: relative; overflow: hidden; }
.hero .container { position: relative; z-index: 2; }
.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.30;
    pointer-events: none;
    z-index: 0;
}
.hero-orb--1 { width: 400px; height: 400px; top: -120px; left: -120px; background: radial-gradient(circle, #3b82f6, transparent 70%); animation: orbFloat1 16s ease-in-out infinite alternate; }
.hero-orb--2 { width: 320px; height: 320px; bottom: -100px; right: -80px; background: radial-gradient(circle, #14b8a6, transparent 70%); animation: orbFloat2 13s ease-in-out infinite alternate; }
.hero-orb--3 { width: 220px; height: 220px; top: 30%; right: 12%; background: radial-gradient(circle, #60a5fa, transparent 70%); animation: orbFloat3 19s ease-in-out infinite alternate; }
@keyframes orbFloat1 { from { transform: translate(0, 0); } to { transform: translate(50px, 35px); } }
@keyframes orbFloat2 { from { transform: translate(0, 0); } to { transform: translate(-45px, -30px); } }
@keyframes orbFloat3 { from { transform: translate(0, 0) scale(1); } to { transform: translate(-30px, 25px) scale(1.15); } }
.hero-ekg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    width: 100%;
    height: 90px;
    opacity: 0.16;
    pointer-events: none;
    z-index: 1;
}
.hero-ekg path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: ekgDraw 9s linear infinite;
}
@keyframes ekgDraw {
    0% { stroke-dashoffset: 1000; }
    55% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -1000; }
}
/* AI alati - blago lebdenje ikona */
.tool-card-icon { animation: iconBob 4.5s ease-in-out infinite alternate; }
.tool-card:nth-child(2) .tool-card-icon { animation-delay: 0.7s; }
.tool-card:nth-child(3) .tool-card-icon { animation-delay: 1.4s; }
@keyframes iconBob { from { transform: translateY(0); } to { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
    .hero-orb, .hero-ekg path, .tool-card-icon { animation: none; }
}

/* 18.09.2026.: hero = najnoviji clanak (Petra) */
.hero-label{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 10px;border-radius:999px;background:rgba(20,184,166,.10);color:#0f766e;font-size:13px;font-weight:600;letter-spacing:.02em;text-decoration:none;margin:0 0 18px}
.hero-label:hover{background:rgba(20,184,166,.16)}
.hero-label-dot{width:8px;height:8px;border-radius:50%;background:var(--teal,#14b8a6);box-shadow:0 0 0 0 rgba(20,184,166,.5);animation:heroLabelPulse 2s infinite}
@keyframes heroLabelPulse{0%{box-shadow:0 0 0 0 rgba(20,184,166,.45)}70%{box-shadow:0 0 0 8px rgba(20,184,166,0)}100%{box-shadow:0 0 0 0 rgba(20,184,166,0)}}
.hero-label-kat{color:var(--gray-500,#64748b);font-weight:500}
.hero-label-kat::before{content:"\00b7";margin-right:8px;color:var(--gray-300,#cbd5e1)}
.hero-label-datum{color:var(--gray-400,#94a3b8);font-weight:500}
.hero-label-datum::before{content:"\00b7";margin-right:8px;color:var(--gray-300,#cbd5e1)}
.hero h1.hero-h1{font-size:clamp(34px,4.2vw,52px);letter-spacing:-1px;line-height:1.12}
.hero h1.hero-h1--dug{font-size:clamp(28px,3.4vw,42px)}
.hero h1.hero-h1 a{color:inherit;text-decoration:none}
.hero h1.hero-h1 a:hover{color:var(--teal-dark,#0f766e)}
.hero-citaj{white-space:nowrap;color:var(--teal-dark,#0f766e);font-weight:600;text-decoration:none}
.hero-citaj:hover{text-decoration:underline}
@media(max-width:768px){.hero h1.hero-h1{font-size:34px}.hero h1.hero-h1--dug{font-size:28px}.hero-label{font-size:12px}.hero-label-datum{display:none}}

/* 18.09.2026.: hero sa slikom najnovijeg clanka (Petra) */
.hero-content--clanak{max-width:1120px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:"text img" "actions img";column-gap:56px;row-gap:8px;align-items:center;text-align:left}
.hero-content--clanak .hero-text{grid-area:text}
.hero-content--clanak .hero-img{grid-area:img;display:block;border-radius:22px;overflow:hidden;box-shadow:0 30px 60px -28px rgba(15,23,42,.35);background:#e2e8f0;aspect-ratio:4/3}
.hero-content--clanak .hero-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.hero-content--clanak .hero-img:hover img{transform:scale(1.03)}
.hero-content--clanak .hero-actions{grid-area:actions}
.hero-content--clanak .hero-subtitle{margin-left:0;margin-right:0;margin-bottom:24px}
.hero-content--clanak .hero-buttons{justify-content:flex-start}
.hero-content--clanak .hero-trust{justify-content:flex-start}
.hero-content--clanak h1.hero-h1{font-size:clamp(32px,3.6vw,46px)}
.hero-content--clanak h1.hero-h1--dug{font-size:clamp(28px,3vw,38px)}
@media(max-width:900px){.hero-content--clanak{grid-template-columns:1fr;grid-template-areas:"text" "img" "actions";text-align:center;row-gap:20px}.hero-content--clanak .hero-subtitle{margin-left:auto;margin-right:auto}.hero-content--clanak .hero-buttons,.hero-content--clanak .hero-trust{justify-content:center}.hero-content--clanak .hero-img{aspect-ratio:16/10;max-width:560px;margin:0 auto;width:100%}}

/* 18.09.2026.: 3 zadnja recepta + manji oglas (umjesto velikog banera nakon Prica) */
.recepti-oglas{padding:8px 0 56px}
.recepti-oglas__grid{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:40px;align-items:start}
.recepti-oglas__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 14px}
.recepti-oglas__head h2{font-size:26px;font-weight:600;margin:0;color:var(--gray-900)}
.recepti-oglas__head a{font-size:14px;font-weight:600;color:var(--teal-dark,#0f766e);text-decoration:none}
.recepti-oglas__item{display:grid;grid-template-columns:96px minmax(0,1fr) 18px;gap:16px;align-items:center;padding:12px;border:1px solid var(--gray-100,#f1f5f9);border-radius:16px;background:#fff;text-decoration:none;color:inherit;margin-bottom:10px;transition:transform .2s ease,box-shadow .2s ease}
.recepti-oglas__item:hover{transform:translateY(-2px);box-shadow:0 12px 30px -18px rgba(15,23,42,.35)}
.recepti-oglas__item img,.recepti-oglas__ph{width:96px;height:96px;border-radius:12px;object-fit:cover;background:var(--gray-100,#f1f5f9);display:block}
.recepti-oglas__meta{display:block;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--teal-dark,#0f766e);margin-bottom:4px}
.recepti-oglas__naslov{display:block;font-size:17px;font-weight:600;line-height:1.3;color:var(--gray-900)}
.recepti-oglas__item svg{color:var(--gray-400,#94a3b8)}
.recepti-oglas__ad{min-height:280px;display:flex;align-items:center;justify-content:center}
.recepti-oglas__ad:empty{display:none}
@media(max-width:900px){.recepti-oglas__grid{grid-template-columns:1fr;gap:24px}.recepti-oglas__ad{min-height:0}}
@media(max-width:600px){.recepti-oglas__item{grid-template-columns:72px minmax(0,1fr) 18px;gap:12px}.recepti-oglas__item img,.recepti-oglas__ph{width:72px;height:72px}.recepti-oglas__naslov{font-size:15px}.recepti-oglas__head h2{font-size:22px}}

/* 19.09.2026. (Petra): kartice kategorija vizualno iste (mreza 2 stupca, jednaka visina); hero bez praznog prostora na mobitelu */
.categories-pills{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
.category-pill-big{justify-content:center;min-height:104px;padding:22px 16px}
.category-pill-name{white-space:nowrap}
@media(max-width:768px){
  .categories-pills{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .category-pill-big{padding:16px 10px;min-height:92px;min-width:0;flex:none}
  .category-pill-name{font-size:15px}
  .hero{padding-top:76px}
  .hero-label{margin-bottom:14px}
}
@media(max-width:480px){.category-pill-big{flex:none}.category-pill-name{font-size:14px}}

/* 20.09.2026. (Petra): prazan oglasni slot uz AI blok ne rezervira prostor na mobitelu */
@media(max-width:900px){.recepti-oglas__ad{display:none}.recepti-oglas{padding-bottom:24px}}