/* ===== original shared rules: celos.css ===== */
/* ==========================================================================
   Sistem de Operare CELOS - Arhitectura CSS (v1.3)
   ========================================================================== */

/* --- Variabile de culoare --- */
:root {
       /* --- Varianta 1
	--color-pearl: #F5F5F0; 
    --color-navy: #0A2463;
    --color-gold: #C5A021;  --- */
	
	--color-pearl: #F8FAFC; 
    --color-navy: #1B2A4A;
    --color-gold: #C5A021;  
	
    --color-text-dark: #1f2937;
    --color-text-medium: #374151;
    --color-text-light: #4b5563;
    --color-text-white: #ffffff;
    --color-brand-medium: #3E92CC;
    --color-brand-light: #eaf2f8;
    --color-border: #e5e7eb;
    --color-footer-bg: #212529;
    --color-footer-text: #bdc3c7;
    --color-footel-link: #ecf0f1;
    --color-accent-red: #ef4444; 

    --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --radius-card: 12px;
}

/* --- Tipografie --- */
h1, .hero-title, .section-title, .tech-title {
    font-family: 'Montserrat', sans-serif;
}

.hero-subtitle {
    font-family: 'Lora', serif !important;
	color: var(--color-gold);
}

h2, h3, .section-desc, .card-inner-title, .method-title {
    font-family: 'Lora', serif !important;
}

body, p, li, .nav-links a, .btn, .btn-gold, .btn-pearl, .btn-card, .card-inner-text, .legal-btn, .investment-list li {
    font-family: 'Inter', sans-serif !important;
}

/* --- Reset & Base --- */
body {
    margin: 0;
    padding: 1rem; 
    background-color: var(--color-pearl);
    color: var(--color-text-dark);
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

@media (min-width: 768px) {
    body { padding: 1.5rem; }
}

.container-main {
    max-width: 1200px;
    margin: 0 auto;
    flex: 1;
    width: 100%;
    box-sizing: border-box;
}

/* --- Liste --- */
.lista-oferta {
    list-style: none;
    padding-left: 0; 
}
.lista-oferta li {
    position: relative;
    padding-left: 1.8rem;
    margin-bottom: 0.75rem;
}
.lista-oferta li::before {
    content: "✓"; 
    position: absolute;
    left: 0;
    color: var(--color-navy); 
    font-weight: 700;
}

/* --- Forțare aliniere stânga pentru liste în boxele de preț --- */
.lista-oferta, 
.investment-list {
    text-align: left !important;
}

/* --- Forțare centrare pentru prețuri --- */
.price, 
.price-new, 
.price-old {
    text-align: center !important;
}

/* --- Header / Navigation --- */
.nav-bar {
    background-color: var(--color-pearl);
    padding: 0.75rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    margin-bottom: 1.5rem;
    position: relative;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--color-navy);
    font-weight: 700;
    font-size: 1.1rem;
}

.nav-brand img, .logo-image {
    height: 40px;
    width: auto;
    object-fit: contain;
}
.logo-image { height: 3rem; }

.nav-links {
    display: flex;
    gap: 15px;
}

.nav-links a {
    text-decoration: none;
    color: var(--color-navy);
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.3s;
}

.nav-links a:hover, .nav-links a.active {
    color: var(--color-gold);
    font-weight: 700;
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-text-dark);
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--color-pearl);
        padding: 1rem;
        border-radius: 0 0 var(--radius-card) var(--radius-card);
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        z-index: 50;
    }
    .mobile-menu-btn { display: block; }
}

/* --- Card general style --- */
.content-card {
    background-color: white;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

@media (min-width: 768px) {
    .content-card { padding: 2rem; }
}

.section-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-navy);
    margin-bottom: 1rem;
    text-align: center;
    line-height: 1.2;
}

.section-desc, .section-description {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 2rem auto;
    color: var(--color-text-light);
    font-size: 1rem;
}

/* Titluri Interne Content Card */
.content-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-navy);
    margin-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-brand-light);
    padding-bottom: 0.5rem;
}
.content-card h4 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-brand-medium);
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
}
.content-card p {
    color: var(--color-text-medium);
    margin-bottom: 1rem;
    text-align: justify;
}

/* --- Hero section --- */
.hero-card {
    background-color: var(--color-navy);
    color: var(--color-text-white);
    text-align: center;
    padding: 1rem 1rem;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    margin-bottom: 1rem;
    position: relative;
    z-index: 20;
}

.hero-title {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: var(--color-pearl);
    text-shadow: 1px 1px 4px rgba(0,0,0,0.4);
    text-transform: uppercase;
}

.hero-subtitle, .hero-text {
    font-size: 1.1rem;
    color: var(--color-pearl);
    margin-bottom: 1.5rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
    text-align: center;
}

@media (min-width: 768px) {
    .hero-title { font-size: 2.5rem; }
    .hero-card { padding: 2rem 1rem; }
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}
.hero-stat {
    text-align: center;
}
.hero-stat-num {
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    color: var(--color-gold);
    font-weight: 800;
    line-height: 1;
}
.hero-stat-label {
    font-size: 0.72rem;
    color: var(--color-gold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    margin-top: 0.2rem;
    font-family: 'Inter', sans-serif;
}

/* =========================================================
   SISTEM CENTRALIZAT DE BUTOANE 3D TACTILE (MAI SUPLE)
   ========================================================= */

/* Baza Comună - Înălțime redusă, formă rectangulară */
.btn, .btn-primary, .btn-gold, .btn-pearl, .btn-outline, .btn-white, .btn-card, .cta-button, .btn-modal-close {
    display: inline-block;
    border-radius: 8px !important; 
    border: none !important;       
    font-weight: 800;
    font-family: 'Inter', sans-serif !important;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s ease;
    /* PADDING REDUS PENTRU UN ASPECT MAI FIN */
    padding: 0.65rem 1.8rem; 
}

/* 1. Butoanele Pearl (Gold/Pearl) - Text Navy */
.btn-gold, .btn-pearl {
    background-color: var(--color-pearl);
    color: var(--color-navy) !important;
    /* Buza redusă la 3px */
    box-shadow: 0 3px 0 #cbd5e1, 0 4px 6px rgba(0,0,0,0.1);
}
.btn-gold:hover, .btn-pearl:hover {
    transform: translateY(1px); /* Mișcare mai scurtă */
    box-shadow: 0 2px 0 #cbd5e1, 0 3px 4px rgba(0,0,0,0.1);
    background-color: #f1f5f9;
}
.btn-gold:active, .btn-pearl:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 #cbd5e1, 0 1px 2px rgba(0,0,0,0.1);
}

/* 2. Butoane Principale Închise (Navy) */
.btn, .btn-primary, .cta-button, .btn-modal-close {
    background-color: var(--color-navy);
    color: var(--color-text-white) !important;
    box-shadow: 0 3px 0 #051336, 0 4px 6px rgba(0,0,0,0.1);
}
.btn:hover, .btn-primary:hover, .cta-button:hover, .btn-modal-close:hover {
    transform: translateY(1px);
    box-shadow: 0 2px 0 #051336, 0 3px 4px rgba(0,0,0,0.1);
    background-color: #0c2a75;
}
.btn:active, .btn-primary:active, .cta-button:active, .btn-modal-close:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 #051336, 0 1px 2px rgba(0,0,0,0.1);
}

/* 3. Butoane Secundare Deschise (White/Outline) */
.btn-white, .btn-outline, .btn-card {
    background-color: var(--color-pearl);
    color: var(--color-navy) !important;
    box-shadow: 0 3px 0 #cbd5e1, 0 4px 6px rgba(0,0,0,0.1);
}
.btn-white:hover, .btn-outline:hover, .btn-card:hover {
    transform: translateY(1px);
    box-shadow: 0 2px 0 #cbd5e1, 0 3px 4px rgba(0,0,0,0.1);
    background-color: #f1f5f9;
}
.btn-white:active, .btn-outline:active, .btn-card:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 #cbd5e1, 0 1px 2px rgba(0,0,0,0.1);
}

/* 4. Buton Secundar Gri (pentru comunitate) */
.cta-button.secondary {
    background-color: var(--color-text-medium);
    color: var(--color-text-white) !important;
    box-shadow: 0 3px 0 #1f2937, 0 4px 6px rgba(0,0,0,0.1);
}
.cta-button.secondary:hover {
    transform: translateY(1px);
    box-shadow: 0 2px 0 #1f2937, 0 3px 4px rgba(0,0,0,0.1);
    background-color: var(--color-text-light);
}
.cta-button.secondary:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 #1f2937, 0 1px 2px rgba(0,0,0,0.1);
}

/* Ajustare mărime pentru butoanele mici din interiorul cardurilor */
.btn-card {
    padding: 0.45rem 1rem; /* Mai suple pentru interiorul cardului */
    font-size: 0.85rem;
    margin-top: auto; 
}

/* --- Grids Generale --- */
.pain-points-grid, .method-grid, .tech-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 768px) {
    .pain-points-grid { grid-template-columns: repeat(3, 1fr); }
    .method-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .tech-grid { grid-template-columns: repeat(3, 1fr); }
}

.card-inner-gray {
    background-color: var(--color-brand-light);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    text-align: left;
    display: flex;
    flex-direction: column;
}
.card-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.card-inner-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-navy);
    margin-bottom: 0.5rem;
}
.card-inner-text { font-size: 0.95rem; color: var(--color-text-light); }

/* Metoda Grid Card */
.method-card {
    background-color: var(--color-brand-light);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--color-navy);
    display: flex;
    flex-direction: column;
}
.method-header { display: flex; align-items: center; margin-bottom: 0.75rem; }
.method-number {
    background-color: var(--color-brand-medium);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    margin-right: 0.75rem;
    flex-shrink: 0;
}
.method-title { font-size: 1.15rem; font-weight: 700; color: var(--color-navy); margin: 0; }

/* --- Povestea split --- */
.split-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
}
@media (min-width: 768px) {
    .split-container { flex-direction: row; align-items: flex-start; }
    .split-container > div { flex: 1; }
}
.img-shadow {
    border-radius: 8px;
    box-shadow: var(--shadow-card);
    width: 100%;
    height: auto;
    display: block;
}

/* --- Evaluare / Info Grids --- */
.info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}
@media (min-width: 640px) { .info-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .info-grid { grid-template-columns: repeat(4, 1fr); } }

.info-box {
    background-color: var(--color-brand-light);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    height: 100%; 
    box-sizing: border-box;
}
.info-box h3 { 
    border-bottom: none !important; 
    margin-top: 0; 
    color: var(--color-navy); 
    font-size: 1.2rem; 
    font-family: 'Montserrat', sans-serif !important;
    text-align: center;
}
.info-box p { font-size: 0.95rem; text-align: center !important; margin-bottom: 1.5rem; flex-grow: 1; }

/* --- Pricing Box (Tanita/Evaluare) --- */
.measure-grid, .pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}
@media (min-width: 768px) { .measure-grid, .pricing-grid { grid-template-columns: repeat(2, 1fr); } }

.pricing-box, .investment-box {
    background-color: white;
    border: 2px dashed var(--color-navy);
    border-radius: 12px;
    padding: 2rem;
    text-align: left;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 500px;
    margin: 1.5rem auto 1rem auto;
}
.pricing-box h3, .investment-box h3 { border-bottom: none !important; text-align: center; margin-bottom: 1rem; color: var(--color-navy); }

.investment-list {
    list-style: none;
    padding-left: 0; 
    text-align: left;
    margin-top: 1rem;
    flex-grow: 1;
}
.investment-list li {
    position: relative;
    padding-left: 1.8rem;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}
.investment-list li::before {
    content: "✓"; 
    position: absolute;
    left: 0;
    color: var(--color-gold); 
    font-weight: 700;
    font-size: 1.1rem;
}

.price-old {
    font-size: 1.5rem;
    color: #9ca3af;
    text-decoration: line-through;
    text-decoration-color: #ef4444;
    margin-top: 1rem;
    align-items: center;
}
.price, .price-new {
    font-size: 3rem;
    font-weight: 800;
    color: var(--color-navy);
    line-height: 1;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    align-items: center;
    font-family: 'Montserrat', sans-serif;
}

/* --- Contact & CTA Cards --- */
.contact-card, .cta-card {
    background-color: var(--color-navy);
    color: var(--color-pearl);
    text-align: center;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 2rem 1rem; 
    margin-bottom: 1.5rem;
}
.contact-card h2, .contact-card h3, .cta-card h3 { 
    color: var(--color-pearl) !important; 
    border: none !important; 
    text-align: center; 
    font-size: 1.75rem; 
    margin-bottom: 1rem; 
}
.contact-card p, .cta-card p { 
    color: #e5e7eb !important; 
    font-size: 1.1rem;
    margin-bottom: 1.5rem; 
    text-align: center !important; 
    max-width: 700px; 
    margin-left: auto; 
    margin-right: auto; 
}
.cta-card .buttons-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    margin-top: 1.5rem;
}
@media (min-width: 768px) {
    .cta-card .buttons-container { flex-direction: row; justify-content: center; }
}

/* --- Footer Global & Boxa Legală --- */
#footer-placeholder footer {
    background-color: var(--color-footer-bg);
    color: var(--color-pearl);
    text-align: center;
    padding: 0.5rem 0.5rem;
    border-radius: 0 0 0 0;
    margin-top: 0;
    width: 100%;
    box-sizing: border-box;
    font-size: 0.85rem;
    border-top: none;
}
#footer-placeholder p {
    color: var(--color-pearl) !important;
    text-align: center !important;
    margin-bottom: 0.5rem;
}
#footer-placeholder a {
    color: var(--color-text-footer-link) !important;
    text-decoration: none;
}
#footer-placeholder .footer-social-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}
#footer-placeholder .footer-social-links svg, 
#footer-placeholder .footer-social-links img {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px; 
    object-fit: contain;
    display: block;
}

.legal-footer-box {
    background-color: var(--color-footer-bg);
    border-top: 1px solid #374151;
    padding: 0.5rem;
    text-align: center;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    margin-bottom: 1rem;
}
.legal-btn {
    background: none;
    border: none;
    color: #9ca3af;
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.85rem;
    margin: 0 10px;
    padding: 5px 10px;
    transition: color 0.2s;
    display: inline-block;
}
.legal-btn:hover { color: white; text-decoration: none; }

/* --- Modale Clasice CSS --- */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.6); z-index: 2000;
    display: none; align-items: center; justify-content: center; padding: 1rem;
    transition: opacity 0.3s;
}
.modal-overlay.active { display: flex; }
.modal-container {
    background-color: white; border-radius: 12px; width: 100%;
    max-width: 1000px; max-height: 90vh; display: flex; flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); overflow: hidden;
}
.modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1.25rem 1.5rem; border-bottom: 1px solid #e5e7eb;
}
.modal-logo { height: 2.5rem; width: auto; margin-right: 1rem; object-fit: contain; }
.modal-title { font-size: 1.35rem; font-weight: 700; color: #0A2463; margin: 0; }
.modal-close-x { background: none; border: none; font-size: 2.2rem; color: #9ca3af; cursor: pointer; line-height: 1; }
.modal-body { padding: 0; overflow-y: auto; text-align: left; }
.modal-footer { padding: 1rem; border-top: 1px solid #f3f4f6; display: flex; justify-content: flex-end; }
.btn-modal-close { background-color: #0A2463; color: white; border: none; padding: 0.6rem 1.5rem; border-radius: 6px; cursor: pointer; font-weight: 600; }

/* Modal Disclaimer Typography */
.infographic-container { width: 100%; margin: auto; background-color: white; }
header.infographic-header {
    background: linear-gradient(135deg, var(--color-navy), var(--color-brand-medium));
    color: white; padding: 2rem 1.5rem; text-align: center;
}
header.infographic-header h1 { font-size: 1.8rem; font-weight: 800; margin: 0; text-shadow: 1px 1px 3px rgba(0,0,0,0.2); }
header.infographic-header p { font-size: 1rem; opacity: 0.9; max-width: 700px; margin: 0.5rem auto 0; }
.infographic-section { padding: 1.5rem 1.5rem; border-bottom: 1px solid var(--color-border); }
.infographic-section:last-child { border-bottom: none; }
.infographic-section .section-title { display: flex; align-items: center; gap: 12px; margin-bottom: 1rem; justify-content: flex-start;}
.infographic-section .section-title .icon {
    flex-shrink: 0; width: 42px; height: 42px; display: grid; place-items: center;
    border-radius: 50%; background-color: var(--color-brand-light);
}
.infographic-section .section-title .icon svg { width: 24px; height: 24px; stroke: var(--color-navy); }
.infographic-section .section-title h2 { font-size: 1.4rem; font-weight: 700; color: var(--color-navy); margin: 0; }
.infographic-section p, .infographic-section ul { color: var(--color-text-light); font-size: 0.95rem; margin-top: 0; text-align: left !important;}
.infographic-section ul { padding-left: 20px; margin-bottom: 0; }
.callout-warning {
    border-left: 4px solid var(--color-accent-red);
    border-right: 4px solid var(--color-accent-red);
    padding: 1rem; background-color: #fef2f2;
    border-radius: 8px; margin: 1rem 0; font-size: 0.95rem;
    font-weight: 600; color: #b91c1c; text-align: center;
}

@media (max-width: 600px) {
    header.infographic-header h1 { font-size: 1.5rem; }
    .infographic-section .section-title h2 { font-size: 1.2rem; }
    .modal-container { max-height: 95vh; }
}

/* Utilitare mobile */
.hidden-mobile { display: none; }
@media (min-width: 768px) { .hidden-mobile { display: block; } }

/* Stiluri specifice evaluare Tanita */
.parameter-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.parameter-card {
    display: flex;
    align-items: flex-start;
    background-color: #f9fafb;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1.5rem;
    gap: 1.5rem;
}
.parameter-icon {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    object-fit: contain;
    background-color: var(--color-navy); 
    padding: 8px;
    border-radius: 8px;
}
.parameter-content h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: var(--color-navy);
    border-bottom: none !important;
}
.parameter-content p { margin: 0 !important; text-align: left !important; }
@media (max-width: 600px) {
    .parameter-card { flex-direction: column; align-items: center; text-align: center; }
    .parameter-content p { text-align: center !important; }
}
.benefits-list {
    list-style: none;
    padding: 0;
    max-width: 600px;
    margin: 0 auto;
}
.benefits-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-navy);
    font-weight: 600;
    display: flex;
    align-items: center;
}
.benefits-list li::before {
    content: "✓";
    color: var(--color-brand-medium);
    margin-right: 10px;
    font-weight: 800;
}

/* Grid Tehnologii */
.tech-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
.info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
.tech-box {
	background-color: #f8fafc;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	padding: 1.5rem;
	text-align: left;
	transition: transform 0.2s;
}
.tech-box:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card);
    border-color: var(--color-brand-medium);
}
.tech-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--color-brand-light);
    padding-bottom: 0.5rem;
}
.tech-number {
    background: var(--color-brand-medium);
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
}
.tech-title {
    margin: 0;
    font-size: 1.25rem;
    color: var(--color-navy);
    font-weight: 700;
}

/* =========================================================
   STILURI SPECIFICE PENTRU MANIFEST (celos.html)
   ========================================================= */

.article-container {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    background: var(--color-bg-white);
    border-radius: 15px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    border: 1px solid var(--color-border);
    margin-bottom: 2rem;
}

.article-header {
    background: linear-gradient(135deg, var(--color-navy), var(--color-brand-medium));
    color: white;
    padding: 40px 20px;
    text-align: center;
}

.article-header h1 {
    font-size: 2.2em;
    font-weight: 800;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.2);
    margin: 0;
    padding: 0;
    color: white !important;
    border: none !important;
}

.article-header h2 {
    font-size: 1.5em; 
    font-weight: 600;
    opacity: 0.9;
    margin-top: 0.5rem; 
    border: none !important;
    padding: 0 !important;
    color: white !important;
    font-family: 'Lora', serif !important;
}

.article-content {
    padding: 30px 40px;
}
@media (max-width: 768px) {
    .article-content { padding: 20px 15px; }
}

.article-section {
    margin-bottom: 2.5rem;
}
.article-section::after {
    content: "";
    display: table;
    clear: both;
}

.article-section h3 {
    font-size: 1.8em;
    color: var(--color-navy);
    margin-bottom: 25px;
    font-weight: 700;
    border-bottom: 3px solid var(--color-brand-medium);
    padding-bottom: 10px;
    text-align: left;
}

.article-section h4 {
    font-size: 1.4em;
    font-weight: 600;
    color: var(--color-navy) !important;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--color-brand-medium);
    padding-bottom: 0.5rem;
}

.article-section h5 {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--color-navy) !important;
    margin-top: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--color-brand-medium);
    padding-bottom: 0.5rem;
}

.article-section p, .article-section li {
    font-size: 1.05em;
    color: var(--color-text-medium);
    text-align: justify;
    margin-bottom: 15px;
    line-height: 1.7;
}

.article-section ul, .article-section ol {
    padding-left: 20px;
    margin-bottom: 1.5rem;
}

.article-section strong {
    color: var(--color-navy);
    font-weight: 700;
}

.article-section a {
    color: var(--color-brand-medium);
    text-decoration: none;
    font-weight: 600;
}
.article-section a:hover {
    text-decoration: underline;
}

.highlight-box {
    background-color: #eff6ff;
    border-left: 5px solid var(--color-brand-medium);
    padding: 20px;
    margin: 30px 0;
    border-radius: 0 8px 8px 0;
}
.highlight-box p {
    margin: 0;
    font-style: italic;
    color: var(--color-navy);
    text-align: left;
}

.image-container { text-align: center; }
.image-container.float-right {
    float: right;
    width: 40%;
    max-width: 300px;
    margin: 0.5rem 0 1rem 1.5rem;
}
.image-container.float-left {
    float: left;
    width: 40%;
    max-width: 300px;
    margin: 0.5rem 1.5rem 1rem 0;
}
@media (max-width: 600px) {
    .image-container.float-right, .image-container.float-left {
        float: none; width: 100%; max-width: 100%; margin: 1rem 0;
    }
}

.image-container img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--color-border);
}

.article-section table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-size: 0.95em;
    background-color: white;
}
.article-section th, .article-section td {
    border: 1px solid var(--color-border);
    padding: 12px;
    text-align: left;
    vertical-align: top;
}
.article-section th {
    background-color: #dbeafe; 
    color: var(--color-navy);
    font-weight: 700;
}
.article-section tr:nth-child(even) {
    background-color: #f9fafb;
}

.article-section.cta-center {
    text-align: center;
    background-color: var(--color-pearl);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid var(--color-navy);
}
.article-section.cta-center p,
.article-section.cta-center li { text-align: justify; }
.article-section.cta-center h3 { text-align: center; border-bottom: none; }

/* --- povestea.html --- */

.section-title.center { 
    text-align: center; 
}

.split-container.reverse {
    flex-direction: column;
}
@media (min-width: 768px) {
    .split-container.reverse {
        flex-direction: row-reverse;
    }
    .image-column-20 {
        flex: 0 0 20%; 
        max-width: 20%;
    }
    .image-column-40 {
        flex: 0 0 40%; 
        max-width: 40%;
    }
    .text-column {
        flex: 1; 
    }
}

.image-column { width: 100%; }
.text-column { width: 100%; }
.text-column p { 
    margin-bottom: 1rem; 
    color: var(--color-text-medium); 
}

.quote-box {
    background-color: var(--color-brand-light); 
    border-left: 4px solid var(--color-brand-medium); 
    padding: 1.5rem;
    border-radius: 0 8px 8px 0; 
    margin: 1.5rem 0;
}
.quote-text {
    color: var(--color-navy);
    font-style: italic;
    font-weight: 600;
    font-size: 1.15rem;
    margin: 0;
}

/* ==========================================================================
   STILURI SPECIFICE BLOG — de adăugat la sfârșitul fișierului celos.css
   Pagina: /blog/index.html
   ========================================================================== */

/* --- Culori accent per categorie blog --- */
:root {
    --col-sanatate:    #e53e3e;
    --col-nutritie:    #2d8a4e;
    --col-lifestyle:   var(--color-brand-medium); /* #3E92CC */
    --col-terapie:     var(--color-gold);          /* #C5A021 */
    --col-suplimente:  #7c3aed;
    --col-infografice: var(--color-brand-medium);
}

/* --- Wrapper pagină blog (înlocuiește padding body global) --- */
.blog-nav-outer {
    padding: 1rem 1rem 0;
    background-color: #e8edf2;
}
@media (min-width: 768px) {
    .blog-nav-outer { padding: 1.5rem 1.5rem 0; }
}

.blog-page-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 1rem 3rem;
    background-color: #e8edf2;
}
@media (min-width: 768px) {
    .blog-page-wrap { padding: 1rem 1.5rem 3rem; }
}

/* Asigură vizibilitate nav-links pe desktop în contextul blog */
@media (min-width: 769px) {
    .nav-links { display: flex !important; }
}

/* --- Hero Banner Blog --- */
.blog-hero {
    background: var(--color-navy);
    background-image: linear-gradient(135deg, #0A2463 0%, #1a3a7a 50%, #0e3060 100%);
    padding: 3rem 2rem 2.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-card);
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-card);
}
.blog-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}
.blog-hero h1 {
    /* Folosește stilul .hero-title din celos.css */
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    color: var(--color-pearl);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.4);
    position: relative;
    margin-bottom: 0.75rem;
}
.blog-hero p {
    font-family: 'Lora', serif;
    color: var(--color-gold);
    font-size: 1.05rem;
    margin: 0 auto;
    max-width: 680px;
    line-height: 1.6;
    position: relative;
}
.blog-hero .hero-stats {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    margin-top: 2rem;
    position: relative;
    flex-wrap: wrap;
}
.blog-hero .hero-stat-num {
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    color: var(--color-gold);
    font-weight: 800;
    line-height: 1;
}
.blog-hero .hero-stat-label {
    font-size: 0.72rem;
    color: var(--color-gold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    margin-top: 0.2rem;
    font-family: 'Inter', sans-serif;
}

/* --- Bara de filtrare categorii --- */
.blog-filter-bar {
    background: var(--color-pearl);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 0 0.5rem;
    margin-bottom: 1.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    box-shadow: var(--shadow-card);
}
.blog-filter-bar::-webkit-scrollbar { display: none; }

.blog-filter-tabs {
    display: flex;
    gap: 0;
    min-width: max-content;
}

.blog-filter-tab {
    padding: 0.85rem 1.1rem;
    font-size: 0.78rem;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    cursor: pointer;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    transition: all 0.2s;
    white-space: nowrap;
}
.blog-filter-tab::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 5px;
    background: currentColor;
    opacity: 0.5;
    vertical-align: middle;
}
.blog-filter-tab[data-cat="all"]::before { display: none; }
.blog-filter-tab:hover { color: var(--color-navy); }
.blog-filter-tab.active { color: var(--color-navy); border-bottom-color: var(--color-navy); }
.blog-filter-tab[data-cat="sanatate"]   { color: var(--col-sanatate); }
.blog-filter-tab[data-cat="nutritie"]   { color: var(--col-nutritie); }
.blog-filter-tab[data-cat="lifestyle"]  { color: var(--col-lifestyle); }
.blog-filter-tab[data-cat="terapie"]    { color: var(--col-terapie); }
.blog-filter-tab[data-cat="suplimente"] { color: var(--col-suplimente); }
.blog-filter-tab[data-cat="infografice"]{ color: var(--col-infografice); }

/* --- Secțiune categorie --- */
.blog-category-section { margin-bottom: 2.5rem; }
.blog-category-section.hidden { display: none; }

.blog-category-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.blog-category-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.blog-category-header h2 {
    font-family: 'Lora', serif !important;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-navy);
    margin: 0;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}
.blog-category-line {
    flex: 1;
    height: 1px;
    background: var(--color-border);
}
.blog-category-count {
    font-size: 0.75rem;
    color: var(--color-text-light);
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    background: var(--color-brand-light);
    padding: 0.2rem 0.6rem;
    border-radius: 99px;
    white-space: nowrap;
}

/* --- Grid carduri (max 2 coloane) --- */
.blog-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 700px) {
    .blog-cards-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- Card articol orizontal cu imagine --- */
.blog-article-card {
    display: flex;
    flex-direction: row;
    background: white;
    border-radius: var(--radius-card);
    border: 1px solid var(--color-border);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    min-height: 135px;
    box-shadow: var(--shadow-card);
    animation: blogCardFadeUp 0.35s ease both;
}
.blog-article-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(10, 36, 99, 0.13);
}

@keyframes blogCardFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Imagine card */
.blog-card-image-wrap {
    width: 130px;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}
@media (min-width: 500px) {
    .blog-card-image-wrap { width: 150px; }
}
.blog-card-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.blog-article-card:hover .blog-card-image-wrap img {
    transform: scale(1.06);
}

/* Badge categorie pe imagine */
.blog-card-cat-badge {
    position: absolute;
    bottom: 7px;
    left: 7px;
    font-size: 0.6rem;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 0.15rem 0.45rem;
    border-radius: 99px;
    color: white;
}

/* Corp card */
.blog-card-body {
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
}
.blog-card-body h3 {
    font-family: 'Lora', serif !important;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-navy);
    line-height: 1.3;
    margin-bottom: 0.35rem;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}
.blog-card-body p {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.8rem;
    color: var(--color-text-light);
    line-height: 1.5;
    flex-grow: 1;
    margin: 0 !important;
    text-align: left !important;
}
.blog-card-footer {
    display: flex;
    align-items: center;
    margin-top: 0.6rem;
}
.blog-card-link-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.blog-card-arrow { transition: transform 0.2s; }
.blog-article-card:hover .blog-card-arrow { transform: translateX(3px); }

/* --- Accent bordură stângă + culori per categorie --- */
.blog-accent-sanatate    { border-left: 3px solid var(--col-sanatate); }
.blog-accent-nutritie    { border-left: 3px solid var(--col-nutritie); }
.blog-accent-lifestyle   { border-left: 3px solid var(--col-lifestyle); }
.blog-accent-terapie     { border-left: 3px solid var(--col-terapie); }
.blog-accent-suplimente  { border-left: 3px solid var(--col-suplimente); }
.blog-accent-infografice { border-left: 3px solid var(--col-infografice); }

.blog-accent-sanatate    .blog-card-cat-badge  { background: var(--col-sanatate); }
.blog-accent-nutritie    .blog-card-cat-badge  { background: var(--col-nutritie); }
.blog-accent-lifestyle   .blog-card-cat-badge  { background: var(--col-lifestyle); }
.blog-accent-terapie     .blog-card-cat-badge  { background: var(--col-terapie); }
.blog-accent-suplimente  .blog-card-cat-badge  { background: var(--col-suplimente); }
.blog-accent-infografice .blog-card-cat-badge  { background: var(--col-infografice); }

.blog-accent-sanatate    .blog-card-link-text  { color: var(--col-sanatate); }
.blog-accent-nutritie    .blog-card-link-text  { color: var(--col-nutritie); }
.blog-accent-lifestyle   .blog-card-link-text  { color: var(--col-lifestyle); }
.blog-accent-terapie     .blog-card-link-text  { color: var(--col-terapie); }
.blog-accent-suplimente  .blog-card-link-text  { color: var(--col-suplimente); }
.blog-accent-infografice .blog-card-link-text  { color: var(--col-infografice); }


/* ============================================================
   STILURI ARTICOLE BLOG — de adăugat în celos.css
   Folosite în: aminoacizi.html, harta-aminoacizi.html
   și orice articol viitor cu structură similară
   ============================================================ */


/* ── 1. BARA DE NAVIGARE ARTICOL (blog-filter-bar sticky) ─────
   Folosire: adaugă style="position:sticky;top:0;z-index:100"
   pe elementul .blog-filter-bar din fiecare articol.
   Bara din blog/index.html rămâne neschimbată.
   Notă: .blog-filter-bar, .blog-filter-tabs, .blog-filter-tab
   sunt deja definite în celos.css — nu le redefinim.
   ──────────────────────────────────────────────────────────── */
.blog-filter-bar-scroll::-webkit-scrollbar { display: none; }


/* ── 2. NAVIGARE RAPIDĂ CU PILL-URI (jump-bar) ────────────────
   Folosire în harta-aminoacizi.html și pagini similare
   ──────────────────────────────────────────────────────────── */
.jump-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.9rem 1rem;
    background: white;
    border-radius: var(--radius-card);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
    margin-bottom: 1.25rem;
}
.jump-bar a {
    font-size: 0.72rem;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    padding: 0.25rem 0.6rem;
    border-radius: 99px;
    border: 1px solid var(--color-border);
    color: var(--color-text-medium);
    transition: all 0.2s;
    white-space: nowrap;
}
.jump-bar a:hover       { background: var(--color-navy); color: white; border-color: var(--color-navy); }
.jump-bar .jb-eaa       { border-color: var(--col-sanatate);   color: var(--col-sanatate); }
.jump-bar .jb-cond      { border-color: var(--col-suplimente); color: var(--col-suplimente); }
.jump-bar .jb-nee       { border-color: var(--col-nutritie);   color: var(--col-nutritie); }


/* ── 3. SEPARATOR DE SECȚIUNE CU PILL COLORAT ─────────────────
   Folosire: <div class="section-divider eaa|cond|nee">
   ──────────────────────────────────────────────────────────── */
.section-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.75rem 0 1rem;
}
.section-divider h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
    margin: 0;
    padding: 0.3rem 0.9rem;
    border-radius: 99px;
    color: white;
}
.section-divider.eaa  h2 { background: var(--col-sanatate); }
.section-divider.cond h2 { background: var(--col-suplimente); }
.section-divider.nee  h2 { background: var(--col-nutritie); }
.section-divider-line {
    flex: 1;
    height: 2px;
    background: var(--color-border);
    border-radius: 99px;
}


/* ── 4. CARD AMINOACID (aa-card) ──────────────────────────────
   Layout grid: coloana identitate (160px) + coloana date
   ──────────────────────────────────────────────────────────── */
.aa-card {
    background: white;
    border-radius: var(--radius-card);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
    margin-bottom: 1rem;
    overflow: hidden;
    display: grid;
    grid-template-columns: 160px 1fr;
}
@media (max-width: 600px) {
    .aa-card { grid-template-columns: 1fr; }
}

/* Coloana stânga */
.aa-identity {
    background: var(--color-pearl);
    border-right: 1px solid var(--color-border);
    padding: 1rem 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
}
@media (max-width: 600px) {
    .aa-identity {
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        flex-direction: row;
        text-align: left;
        padding: 0.75rem 1rem;
    }
}
.aa-img {
    width: 90px;
    height: 90px;
    object-fit: contain;
    border-radius: 8px;
    background: white;
    padding: 4px;
    border: 1px solid var(--color-border);
}
@media (max-width: 600px) {
    .aa-img { width: 60px; height: 60px; }
}
.aa-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--color-navy);
    line-height: 1.2;
}
.aa-abbr {
    font-size: 0.72rem;
    color: var(--color-text-light);
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.05em;
}
.aa-formula {
    font-family: monospace;
    font-size: 0.78rem;
    color: var(--color-brand-medium);
    font-weight: 600;
    background: var(--color-brand-light);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}
.aa-badge {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.15rem 0.5rem;
    border-radius: 99px;
}
.badge-eaa  { background: #fee2e2; color: var(--col-sanatate); }
.badge-cond { background: #ede9fe; color: var(--col-suplimente); }
.badge-nee  { background: #d1fae5; color: var(--col-nutritie); }

/* Coloana dreapta */
.aa-data { padding: 0.85rem 1rem; }
.aa-data-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.5rem;
}
@media (max-width: 900px) { .aa-data-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .aa-data-grid { grid-template-columns: 1fr; } }

.aa-col h4 {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: 'Inter', sans-serif;
    margin: 0 0 0.3rem 0;
    padding-bottom: 0.25rem;
    border-bottom: 2px solid;
}
.aa-col.functii h4 { color: var(--color-navy);        border-color: var(--color-brand-medium); }
.aa-col.deficit h4 { color: var(--col-sanatate);      border-color: #fca5a5; }
.aa-col.exces h4   { color: #b45309;                  border-color: #fcd34d; }
.aa-col.surse h4   { color: var(--col-nutritie);      border-color: #86efac; }
.aa-col ul  { margin: 0; padding-left: 1rem; list-style: disc; }
.aa-col li  { font-size: 0.78rem; color: var(--color-text-medium); line-height: 1.45; margin-bottom: 0.2rem; }
.aa-col li strong { color: var(--color-navy); }
.aa-col.surse li   { color: var(--color-text-light); font-size: 0.76rem; }


/* ── 5. CARDURI ARTICOL (art-card) ───────────────────────────
   Pentru articole cu conținut structurat pe subcapitole
   ──────────────────────────────────────────────────────────── */
.art-card {
    background: white;
    border-radius: var(--radius-card);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
    padding: 1.25rem 1.5rem;
    margin-bottom: 0.85rem;
}
.art-card-intro { background: var(--color-pearl); }

.art-card h3 {
    font-size: 1rem;
    color: var(--color-navy);
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid var(--color-brand-light);
}
.art-card h4 {
    font-size: 0.88rem;
    color: var(--color-brand-medium);
    font-weight: 700;
    margin: 0.85rem 0 0.3rem 0;
}
.art-card p, .art-card li {
    font-size: 0.91rem;
    color: var(--color-text-medium);
    line-height: 1.65;
    margin-bottom: 0.4rem;
}
.art-card ul, .art-card ol { padding-left: 1.3rem; margin: 0.3rem 0 0.4rem; }
.art-card strong { color: var(--color-navy); }
.art-card em     { color: var(--color-text-light); }
.art-card a      { color: var(--color-brand-medium); font-weight: 600; }
.art-card code   { background: #e9ecef; padding: 1px 4px; border-radius: 3px; font-family: monospace; font-size: 0.87em; }

/* Tabel responsiv în art-card */
.art-card .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0.75rem 0; }
.art-card table       { width: 100%; border-collapse: collapse; font-size: 0.82em; min-width: 500px; }
.art-card th, .art-card td {
    padding: 0.5rem 0.65rem;
    text-align: left;
    border: 1px solid #d1d9e6;
    vertical-align: top;
    line-height: 1.4;
}
.art-card th                    { background: #e2e8f0; font-weight: 700; color: var(--color-navy); white-space: nowrap; }
.art-card tr:nth-child(even)    { background: var(--color-pearl); }


/* ── 6. HEADER SECȚIUNE CU ANCORĂ ────────────────────────────
   Bara laterală colorată + titlu + link "↑ Sus"
   ──────────────────────────────────────────────────────────── */
.content-section { margin-bottom: 2.5rem; scroll-margin-top: 60px; }
.art-card[id]    { scroll-margin-top: 60px; }

.section-anchor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-left: 5px solid var(--color-navy);
    padding: 0.5rem 0 0.5rem 1rem;
    margin-bottom: 1rem;
}
.section-anchor-header h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-navy);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.back-top { font-size: 0.72rem; color: var(--color-text-light); text-decoration: none; font-family: 'Inter', sans-serif; font-weight: 600; }
.back-top:hover { color: var(--color-navy); }


/* ── 7. CARD-LINK EXTERN (ex: link către harta-aminoacizi) ───
   ──────────────────────────────────────────────────────────── */
.harta-link-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: var(--radius-card);
    padding: 1rem 1.5rem;
    margin-bottom: 0.85rem;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s;
}
.harta-link-card:hover   { transform: translateX(4px); }
.harta-link-card h3      { margin: 0; font-size: 0.95rem; color: #991b1b; }
.harta-link-card p       { margin: 0.2rem 0 0; font-size: 0.82rem; color: #b91c1c; }
.harta-link-card .arrow  { font-size: 1.5rem; color: var(--col-sanatate); }


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE GLOBAL — celos.css
   Toate componentele site-ului Nutrisib optimizate pentru mobil.
   Breakpoints: 768px (tabletă/telefon mare) · 480px (telefon mic)
   ═══════════════════════════════════════════════════════════════ */

/* ── 768px: tabletă și telefon ── */
@media (max-width: 768px) {

    /* Container */
    .container-main { padding: 0 0.75rem; }

    /* Nav */
    .nav-bar { padding: 0.65rem 1rem; margin-bottom: 1rem; }

    /* Hero */
    .hero-card  { padding: 1.75rem 1rem; }
    .hero-title { font-size: 1.75rem; line-height: 1.2; }
    .hero-subtitle, .hero-text { font-size: 0.95rem; margin-bottom: 1rem; }
    .hero-stats { flex-wrap: wrap; gap: 0.75rem; justify-content: center; }

    /* Blog hero */
    .blog-hero { padding: 2rem 1rem 1.75rem; }
    .blog-hero h1 { font-size: 1.6rem; }
    .blog-hero p  { font-size: 0.9rem; }
    .blog-page-wrap { padding: 0 0.5rem; }

    /* Cards generice */
    .content-card { padding: 1.1rem 1rem; }
    .art-card     { padding: 1rem 1rem; }
    .art-card-intro { font-size: 0.95rem; }
    .section-title  { font-size: 1.35rem; }
    .section-desc, .section-description { font-size: 0.9rem; }

    /* Section anchor header */
    .section-anchor-header { padding: 0.4rem 0 0.4rem 0.85rem; margin-bottom: 0.85rem; }
    .section-anchor-header h2 { font-size: 1.05rem; }
    .back-top { font-size: 0.75rem; }

    /* Art-card tabele */
    .art-card table  { font-size: 0.8rem; }
    .art-card th,
    .art-card td     { padding: 0.4rem 0.5rem; }

    /* Split container */
    .split-container { flex-direction: column; gap: 1.25rem; }
    .split-container img { width: 100%; max-width: 480px; margin: 0 auto; }

    /* Method grid: 2 col → 1 col */
    .method-grid { grid-template-columns: 1fr; }
    .method-card { padding: 1.1rem; }
    .method-title { font-size: 1rem; }
    .method-number { width: 2rem; height: 2rem; font-size: 1rem; }

    /* Pain points: 3 col → 1 col */
    .pain-points-grid { grid-template-columns: 1fr; }
    .card-inner-gray  { padding: 1rem; }
    .card-inner-title { font-size: 1rem; }

    /* Info grid & tech grid: orice → 1 col */
    .info-grid  { grid-template-columns: 1fr !important; }
    .tech-grid  { grid-template-columns: 1fr; }
    .tech-box   { padding: 1rem; }

    /* Measure/pricing: 2 col → 1 col */
    .measure-grid,
    .pricing-grid { grid-template-columns: 1fr !important; }
    .pricing-box,
    .investment-box { padding: 1.25rem 1rem; }

    /* Blog cards: deja 1 col, dar ajustăm card-ul orizontal */
    .blog-article-card { flex-direction: column; }
    .blog-card-image-wrap { width: 100%; height: 180px; }
    .blog-card-body { padding: 0.85rem; }
    .blog-card-body h3 { font-size: 0.9rem; }

    /* Blog filter bar */
    .blog-filter-bar  { position: sticky; top: 0; z-index: 100; }
    .blog-filter-tab  { padding: 0.5rem 0.75rem; font-size: 0.72rem; }

    /* CTA card */
    .cta-card { padding: 1.75rem 1rem; }
    .cta-card h3 { font-size: 1.35rem; }
    .cta-card p  { font-size: 0.95rem; }
    .cta-card .buttons-container { flex-direction: column; align-items: center; }

    /* Contact card */
    .contact-card { padding: 1.75rem 1rem; }
    .contact-card h2, .contact-card h3 { font-size: 1.35rem; }

    /* Modal */
    .modal-container { max-width: 100%; margin: 0.5rem; border-radius: 8px; max-height: 95vh; }
    .modal-header { padding: 0.85rem 1rem; }
    .modal-title  { font-size: 1.1rem; }
    .modal-body   { padding: 0; }
    .modal-logo   { height: 2rem; }

    /* Quote box */
    .quote-box  { padding: 1rem; margin: 1rem 0; }
    .quote-text { font-size: 0.9rem; }

    /* Harta link card */
    .harta-link-card { flex-direction: column; gap: 0.75rem; text-align: center; padding: 1rem; }

    /* Jump bar */
    .jump-bar { flex-wrap: wrap; gap: 0.35rem; padding: 0.5rem; }
    .jump-bar a { font-size: 0.72rem; padding: 0.3rem 0.6rem; }

    /* Article */
    .article-container { padding: 0 0.5rem; }
    .article-header { padding: 1.5rem 1rem; }
    .article-header h1 { font-size: 1.5rem; }
    .article-header h2 { font-size: 1rem; }
    .article-section h3 { font-size: 1.3em; }
    .article-section h4 { font-size: 1.1em; }

    /* Image float → block pe mobil */
    .image-container.float-right,
    .image-container.float-left { float: none; width: 100%; max-width: 100%; margin: 1rem 0; }

    /* Buttons */
    .btn, .btn-primary, .btn-gold, .btn-pearl,
    .btn-outline, .btn-white { font-size: 0.85rem; padding: 0.65rem 1.25rem; }

    /* Table wrap — scroll orizontal */
    .table-wrap { -webkit-overflow-scrolling: touch; scrollbar-width: thin; }

    /* Infographic */
    .infographic-section { padding: 1.1rem 1rem; }
    .infographic-section .section-title h2 { font-size: 1.1rem; }

    /* Section anchor */
    .content-section { scroll-margin-top: 56px; }
}

/* ── 480px: telefon mic ── */
@media (max-width: 480px) {

    /* Container */
    .container-main { padding: 0 0.5rem; }

    /* Hero */
    .hero-card  { padding: 1.35rem 0.85rem; border-radius: 8px; }
    .hero-title { font-size: 1.35rem; }
    .hero-subtitle, .hero-text { font-size: 0.85rem; }

    /* Blog hero */
    .blog-hero h1 { font-size: 1.3rem; }

    /* Cards */
    .content-card { padding: 0.85rem 0.85rem; }
    .art-card     { padding: 0.75rem 0.75rem; }
    .section-title { font-size: 1.15rem; }

    /* Section anchor */
    .section-anchor-header h2 { font-size: 0.95rem; }

    /* Method / pain points */
    .method-card  { padding: 0.9rem; }
    .card-inner-gray { padding: 0.85rem; }
    .card-inner-text { font-size: 0.88rem; }

    /* CTA / contact */
    .cta-card h3 { font-size: 1.2rem; }
    .cta-card p  { font-size: 0.88rem; }

    /* Buttons */
    .btn, .btn-primary, .btn-gold, .btn-pearl,
    .btn-outline, .btn-white { font-size: 0.8rem; padding: 0.6rem 1rem; width: 100%; text-align: center; box-sizing: border-box; }

    /* Modal */
    .modal-container { margin: 0; border-radius: 0; height: 100vh; max-height: 100vh; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
    .modal-title  { font-size: 1rem; }

    /* Art-card tabele */
    .art-card table { font-size: 0.75rem; }
    .art-card th,
    .art-card td    { padding: 0.3rem 0.4rem; }

    /* Blog filter */
    .blog-filter-tab { font-size: 0.67rem; padding: 0.45rem 0.6rem; }

    /* Article */
    .article-header h1 { font-size: 1.25rem; }
    .article-section h3 { font-size: 1.1em; }

    /* Quote */
    .quote-box  { padding: 0.85rem; }
    .quote-text { font-size: 0.85rem; }

    /* Jump bar */
    .jump-bar a { font-size: 0.68rem; padding: 0.25rem 0.5rem; }

    /* Infographic */
    .infographic-section { padding: 0.9rem 0.85rem; }
}

/* ── Fine ── */


/* ==========================================================================
   STUDIU DE CAZ — componente specifice
   Folosire: orice pagină de tip studiu de caz NUTRISIB / CELOS
   Prefixe: .sc-* (study case)
   ========================================================================== */

/* ── 1. HERO STUDIU DE CAZ ────────────────────────────────────────
   Fundal întunecat (nu negru) cu gradient subtil, text alb + gold.
   Diferit față de .hero-card standard — mai bogat, cu metadate.
   ──────────────────────────────────────────────────────────────── */
.sc-hero {
    background: linear-gradient(135deg, #1e2d4a 0%, #243552 55%, #1a2840 100%);
    color: var(--color-pearl);
    padding: 2.5rem 2rem 2rem;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}
.sc-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 15% 60%, rgba(197,160,33,0.08) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 20%, rgba(62,146,204,0.07) 0%, transparent 50%),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

/* Eticheta tip document */
.sc-doc-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-gold);
    border: 1px solid rgba(197,160,33,0.4);
    padding: 0.25rem 0.75rem;
    border-radius: 99px;
    margin-bottom: 1.25rem;
    position: relative;
}
.sc-doc-label::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--color-gold);
    flex-shrink: 0;
}

/* Titlu principal */
.sc-hero-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
    margin-bottom: 0.6rem;
    position: relative;
}

/* Subtitlu hero */
.sc-hero-subtitle {
    font-family: 'Lora', serif;
    font-size: 1rem;
    color: var(--color-gold);
    font-style: italic;
    font-weight: 400;
    line-height: 1.55;
    max-width: 720px;
    margin-bottom: 1.75rem;
    opacity: 0.92;
    position: relative;
}

/* Grid de meta-date (pilon CELOS, dată, status) */
.sc-meta-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
    position: relative;
}
.sc-meta-pill {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 0.3rem 0.8rem;
    border-radius: 99px;
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.75);
    background: rgba(255,255,255,0.06);
    white-space: nowrap;
}
.sc-meta-pill.gold {
    border-color: rgba(197,160,33,0.5);
    color: var(--color-gold);
    background: rgba(197,160,33,0.1);
}

/* Grid statistici cazului */
.sc-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 1.25rem;
    position: relative;
}
.sc-stat { text-align: center; }
.sc-stat-num {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--color-gold);
    line-height: 1;
    display: block;
}
.sc-stat-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.5);
    margin-top: 0.2rem;
    display: block;
}

@media (max-width: 480px) {
    .sc-hero { padding: 1.75rem 1.1rem 1.5rem; }
    .sc-hero-title { font-size: 1.35rem; }
    .sc-hero-subtitle { font-size: 0.9rem; }
    .sc-stats { gap: 1rem 1.5rem; }
    .sc-stat-num { font-size: 1.3rem; }
}


/* ── 2. PREZENTAREA CAZULUI (sc-case-profile) ─────────────────────
   Card structurat cu datele pacientului / contextul cazului
   ──────────────────────────────────────────────────────────────── */
.sc-profile-card {
    background: white;
    border-radius: var(--radius-card);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.sc-profile-header {
    background: linear-gradient(90deg, var(--color-navy) 0%, #2a3f6a 100%);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.sc-profile-header-icon {
    font-size: 1.5rem;
    line-height: 1;
}
.sc-profile-header h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-gold) !important;
    margin: 0;
    border: none !important;
    padding: 0 !important;
}
.sc-profile-header p {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.55) !important;
    margin: 0 !important;
    text-align: left !important;
}

.sc-profile-body {
    padding: 1.5rem;
}

/* Grid 2 coloane pentru datele cazului */
.sc-profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
@media (max-width: 600px) {
    .sc-profile-grid { grid-template-columns: 1fr; }
}

.sc-profile-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.sc-profile-item-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-light);
}
.sc-profile-item-value {
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-navy);
    line-height: 1.4;
}
.sc-profile-item-value.highlight {
    color: var(--col-sanatate);
}

/* Tabel medicamente / tratament curent */
.sc-rx-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    margin-top: 0.5rem;
}
.sc-rx-table th {
    background: var(--color-brand-light);
    color: var(--color-navy);
    font-family: 'Inter', sans-serif;
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.5rem 0.75rem;
    text-align: left;
    border: 1px solid var(--color-border);
}
.sc-rx-table td {
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-border);
    color: var(--color-text-medium);
    vertical-align: top;
    line-height: 1.45;
}
.sc-rx-table tr:nth-child(even) td { background: var(--color-pearl); }
.sc-rx-table td strong { color: var(--color-navy); }
.sc-rx-table .td-atentie { color: #b45309; font-weight: 600; font-size: 0.78rem; }
.sc-rx-table .td-ok { color: #2d8a4e; font-weight: 600; font-size: 0.78rem; }

/* Bannere de observație CELOS aplicat cazului */
.sc-obs {
    border-left: 4px solid;
    padding: 0.85rem 1rem;
    border-radius: 0 8px 8px 0;
    margin: 1rem 0;
    font-size: 0.88rem;
}
.sc-obs-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.3rem;
    display: block;
}
.sc-obs p { margin: 0; color: var(--color-text-medium); line-height: 1.55; }
.sc-obs strong { color: var(--color-navy); }

.sc-obs.warning  { border-color: var(--col-sanatate);   background: #fef2f2; }
.sc-obs.warning  .sc-obs-label { color: var(--col-sanatate); }

.sc-obs.info     { border-color: var(--color-brand-medium); background: var(--color-brand-light); }
.sc-obs.info     .sc-obs-label { color: var(--color-brand-medium); }

.sc-obs.success  { border-color: #2d8a4e; background: #f0fdf4; }
.sc-obs.success  .sc-obs-label { color: #2d8a4e; }

.sc-obs.note     { border-color: var(--color-gold); background: #fffbeb; }
.sc-obs.note     .sc-obs-label { color: #92400e; }

.sc-obs.mtc      { border-color: #7c3aed; background: #f5f3ff; }
.sc-obs.mtc      .sc-obs-label { color: #7c3aed; }


/* ── 3. PILON CELOS TAG (inline) ──────────────────────────────────
   Folosire: <span class="sc-pilon sc-pilon-c">C</span>
   ──────────────────────────────────────────────────────────────── */
.sc-pilon {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.62rem;
    font-weight: 800;
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    vertical-align: middle;
    margin-right: 0.25rem;
    letter-spacing: 0.05em;
}
.sc-pilon-c  { background: #dbeafe; color: var(--color-navy); }
.sc-pilon-e  { background: #fef3c7; color: #92400e; }
.sc-pilon-l  { background: #d1fae5; color: #065f46; }
.sc-pilon-os { background: #ede9fe; color: #5b21b6; }


/* ── 4. TABEL PROTOCOL CELOS (sc-protocol-table) ─────────────────
   Tabel structurat pentru prezentarea protocolului pe faze
   ──────────────────────────────────────────────────────────────── */
.sc-protocol-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
    margin: 1rem 0;
}
.sc-protocol-table th {
    background: var(--color-navy);
    color: white;
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    padding: 0.65rem 0.9rem;
    text-align: left;
    border: none;
}
.sc-protocol-table td {
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-medium);
    vertical-align: top;
    line-height: 1.5;
}
.sc-protocol-table tr:last-child td { border-bottom: none; }
.sc-protocol-table tr:hover td { background: var(--color-brand-light); }
.sc-protocol-table td strong { color: var(--color-navy); }
.sc-protocol-table .td-faza {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-gold);
    white-space: nowrap;
}
.sc-protocol-table .td-prioritar {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--col-sanatate);
}

/* Row grupator (header fază) */
.sc-protocol-table .sc-phase-row td {
    background: var(--color-brand-light);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-navy);
    padding: 0.4rem 0.9rem;
    border-bottom: 2px solid var(--color-navy);
}


/* ── 5. DISCLAIMER STUDIU DE CAZ ─────────────────────────────────
   Footer card cu nota de non-prescripție
   ──────────────────────────────────────────────────────────────── */
.sc-disclaimer {
    background: var(--color-pearl);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 1rem 1.5rem;
    margin-top: 1.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    color: var(--color-text-light);
    line-height: 1.6;
    text-align: left;
}
.sc-disclaimer strong {
    color: var(--color-navy);
    font-weight: 700;
}
.sc-disclaimer a {
    color: var(--color-brand-medium);
    font-weight: 600;
    text-decoration: none;
}


/* ── 6. SECȚIUNI STUDIU DE CAZ — DIVIDER ─────────────────────────
   Bară de separare cu etichetă pilon CELOS
   ──────────────────────────────────────────────────────────────── */
.sc-section-divider {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 2rem 0 1.25rem;
}
.sc-section-divider-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: white;
    background: var(--color-navy);
    padding: 0.3rem 0.9rem;
    border-radius: 99px;
    white-space: nowrap;
}
.sc-section-divider-line {
    flex: 1;
    height: 1px;
    background: var(--color-border);
}
.sc-section-divider.gold .sc-section-divider-label {
    background: var(--color-gold);
    color: white;
}
.sc-section-divider.terapie .sc-section-divider-label {
    background: #7c3aed;
}


/* ── Responsive table wrap (shared) ─── */
.sc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0.5rem 0; }

/* ── Fine componente studiu de caz ── */


/* NutriSib standard header logo, 52px — construction.
   Applies only to branding inside a header, never to editorial/product images. */
header a.nav-brand img,
header a.logo-link img,
header a.ns-brand img,
header a.nav-logo img,
header a.brand img[src*="logo_"],
header img[src*="/logo/logo_navy_pearl"],
header img[src*="/logo/logo_alb"] {
    height: 52px !important;
    max-height: 52px !important;
    width: auto !important;
    max-width: 180px !important;
    object-fit: contain !important;
    display: block !important;
    flex: 0 0 auto;
}
header a.nav-brand .nav-brand-text,
header a.nav-brand .nav-brand-name,
header a.nav-brand .nav-brand-tagline,
header .nav-brand-text,
header a.nav-brand > div:has(.nav-brand-name) {
    display: none !important;
}
header a.nav-brand, header a.logo-link, header a.ns-brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
@media (max-width: 768px) {
    header a.nav-brand img, header a.logo-link img, header a.ns-brand img {
        height: 52px !important;
        max-height: 52px !important;
        width: auto !important;
    }
}


/* ===== original shared rules: construction-ui.css ===== */
/* NutriSib construction — shared, client-first interface. Isolated ns- classes. */
:root { --ns-navy:#142d4b; --ns-deep:#081c31; --ns-gold:#d8b65f; --ns-blue:#3e92cc; --ns-paper:#f5f8fc; --ns-ink:#172b40; }
.nav-links a.nav-cta-link { background:var(--ns-navy)!important; color:#fff!important; border-radius:9px!important; font-weight:800!important; padding:.66rem 1rem!important; }
.nav-links a.nav-cta-link:hover { background:#224970!important; }
.ns-hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:0 0 2rem; }
.ns-button { display:inline-flex; justify-content:center; align-items:center; gap:.45rem; padding:.89rem 1.24rem; border-radius:11px; font:700 .98rem/1.25 Inter,Arial,sans-serif; text-decoration:none; transition:transform .16s,box-shadow .16s; }
.ns-button:hover { transform:translateY(-2px); }
.ns-button:focus-visible, .ns-shortcut:focus-visible, .ns-nav a:focus-visible { outline:3px solid #3e92cc; outline-offset:4px; }
.ns-button-gold { background:var(--ns-gold); color:#10263d!important; box-shadow:0 4px 0 #a48a46; }
.ns-button-light { border:1px solid rgba(255,255,255,.65); color:#fff!important; background:rgba(255,255,255,.08); }
.ns-button-navy { background:var(--ns-navy); color:#fff!important; }
.ns-button-outline { color:var(--ns-navy)!important; border:1px solid #aebfd1; background:#fff; }
.ns-shortcuts { background:#f5f8fc; padding:3.6rem 1.5rem 4rem; }
.ns-wrap { width:min(1160px,100%); margin-inline:auto; }
.ns-kicker { margin:0 0 .65rem; color:#266d9d; text-transform:uppercase; letter-spacing:.14em; font-size:.77rem; font-weight:800; }
.ns-shortcuts h2, .ns-section h2 { margin:0 0 .75rem; font:800 clamp(1.75rem,3vw,2.5rem)/1.18 Montserrat,Inter,sans-serif; color:#162d47; }
.ns-lead { max-width:760px; line-height:1.68; color:#42566d; margin:.4rem 0 2rem; font-size:1rem; }
.ns-shortcut-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.ns-shortcut { background:#fff; padding:1.65rem; border:1px solid #dce5ef; border-radius:18px; box-shadow:0 8px 24px rgba(14,42,71,.04); text-decoration:none; color:#162d47; display:flex; flex-direction:column; gap:.75rem; transition:transform .15s,box-shadow .15s; }
.ns-shortcut:hover { transform:translateY(-3px); box-shadow:0 15px 30px rgba(14,42,71,.1); }
.ns-shortcut .ns-symbol { display:inline-grid; place-items:center; width:44px; height:44px; border-radius:12px; color:#134d7d; background:#eaf3fb; font-size:1.3rem; }
.ns-shortcut strong { font:800 1.12rem/1.3 Inter,Arial,sans-serif; }
.ns-shortcut span:not(.ns-symbol) { font-size:.94rem; line-height:1.6; color:#52647a; }
.ns-shortcut b { margin-top:auto; color:#165e90; font-size:.9rem; }
.ns-blog-strip { padding:2.4rem 1.5rem; background:#eaf3f8; border-top:1px solid #d7e4ef; }
.ns-blog-strip .ns-wrap { display:flex; gap:1.5rem; justify-content:space-between; align-items:center; }
.ns-blog-strip h2 { margin:.2rem 0; font:800 clamp(1.4rem,2.5vw,2rem)/1.25 Montserrat,Inter,sans-serif; color:#162d47; }
.ns-blog-strip p { color:#42566d; margin:.4rem 0 0; line-height:1.5; }
body.ns-page { margin:0!important; padding:0!important; display:block!important; background:#f7f9fc; font-family:Inter,Arial,sans-serif; color:var(--ns-ink); }
.ns-page * { box-sizing:border-box; }
.ns-header { position:sticky; top:0; z-index:999; background:rgba(255,255,255,.97); border-bottom:1px solid #e1e9f0; box-shadow:0 2px 14px rgba(12,35,61,.05); }
.ns-header-inner { max-width:1170px; margin:auto; padding:.75rem 1.5rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.ns-brand { text-decoration:none; color:var(--ns-navy); display:flex; align-items:center; gap:.55rem; font-weight:900; font-size:1.17rem; }
.ns-brand img { width:52px; height:52px; object-fit:contain; display:block; }
.ns-nav { display:flex; align-items:center; gap:.4rem; }
.ns-nav a { display:inline-flex; align-items:center; padding:.65rem .7rem; border-radius:8px; color:#243f59; text-decoration:none; font-weight:650; font-size:.88rem; }
.ns-nav a:hover,.ns-nav a[aria-current="page"] { background:#eaf2f8; color:#0d5080; }
.ns-nav .ns-nav-primary { background:var(--ns-navy); color:#fff; }
.ns-nav .ns-nav-primary:hover { background:#264b72; color:#fff; }
.ns-menu-button { display:none; border:1px solid #bdcbd8; color:var(--ns-navy); font-size:1.35rem; padding:.35rem .7rem; background:#fff; border-radius:8px; }
.ns-services-hero { background:radial-gradient(ellipse at 80% 15%,#234c71 0%,transparent 52%),linear-gradient(135deg,#081b2e,#17395a); color:#fff; padding:4.7rem 1.5rem 5rem; }
.ns-services-hero h1 { margin:0 0 1.1rem; color:#fff; max-width:790px; font:850 clamp(2.25rem,5vw,4.4rem)/1.08 Montserrat,Inter,sans-serif; letter-spacing:-.03em; }
.ns-services-hero h1 span { color:var(--ns-gold); }
.ns-services-hero p { color:#d5e3ee; max-width:710px; font-size:1.08rem; line-height:1.7; margin:0 0 1.6rem; }
.ns-services-hero .ns-kicker { color:var(--ns-gold); }
.ns-section { padding:4.5rem 1.5rem; }
.ns-section.alt { background:#eef4f9; }
.ns-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.15rem; }
.ns-service-card { display:flex; flex-direction:column; border:1px solid #dce5ef; border-radius:18px; background:#fff; padding:1.65rem; box-shadow:0 8px 30px rgba(14,42,71,.05); }
.ns-service-card .ns-card-tag { font-size:.72rem; font-weight:800; color:#1c6897; text-transform:uppercase; letter-spacing:.12em; margin-bottom:1rem; }
.ns-service-card h3 { font:800 1.29rem/1.3 Montserrat,Inter,sans-serif; color:#172f4b; margin:0 0 .8rem; }
.ns-service-card p { font-size:.94rem; color:#4d5f71; line-height:1.68; margin:0 0 1rem; }
.ns-service-card ul { padding-left:1.15rem; color:#445970; line-height:1.75; font-size:.9rem; margin:.2rem 0 1.6rem; }
.ns-service-card .ns-card-actions { margin-top:auto; display:flex; flex-wrap:wrap; gap:.6rem; }
.ns-service-card .ns-button { font-size:.86rem; padding:.7rem .9rem; }
.ns-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.4rem; }
.ns-steps article { padding:1.4rem 0; border-top:3px solid var(--ns-gold); }
.ns-step-num { color:#1c6496; font-size:.76rem; font-weight:800; letter-spacing:.14em; }
.ns-steps h3 { margin:.45rem 0; color:#193652; font-size:1.2rem; }
.ns-steps p { color:#4b6177; line-height:1.7; }
.ns-callout { background:#123452; color:#fff; padding:2.7rem; border-radius:20px; display:flex; gap:1.3rem; justify-content:space-between; align-items:center; }
.ns-callout h2 { color:#fff; margin:0 0 .5rem; }
.ns-callout p { margin:0; color:#d4e4ef; line-height:1.6; }
.ns-note { color:#657484; font-size:.85rem; line-height:1.7; }
.ns-footer { background:#0a2036; color:#d4e2ec; padding:2.1rem 1.5rem; }
.ns-footer .ns-wrap { display:flex; justify-content:space-between; flex-wrap:wrap; align-items:center; gap:1rem; }
.ns-footer a { color:#f2d489; }
.ns-blog-intro { margin:0 auto 1.3rem; max-width:1160px; padding:1.1rem 1.4rem; border-radius:14px; background:#e9f3fa; border:1px solid #cee2f2; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.ns-blog-intro strong { color:#152f48; }
.ns-blog-intro p { margin:.3rem 0 0; color:#4f6073; line-height:1.55; }
@media(max-width:970px) { .ns-shortcut-grid,.ns-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) {
  .ns-shortcut-grid,.ns-card-grid,.ns-steps { grid-template-columns:1fr; }
  .ns-blog-strip .ns-wrap,.ns-blog-intro,.ns-callout { flex-direction:column; align-items:flex-start; }
  .ns-header-inner { position:relative; }
  .ns-menu-button { display:block; }
  .ns-nav { display:none; position:absolute; left:0; right:0; top:100%; padding:1rem 1.5rem; background:#fff; flex-direction:column; align-items:stretch; border-bottom:1px solid #dce5ef; box-shadow:0 10px 20px rgba(10,32,54,.12); }
  .ns-nav.open { display:flex; }
  .ns-nav a { padding:.9rem; }
  .ns-services-hero { padding:3.3rem 1.25rem; }
  .ns-section { padding:3rem 1.25rem; }
  .ns-callout { padding:1.8rem; }
  .ns-blog-intro { margin:1rem; }
  .ns-blog-strip .ns-button { width:100%; }
}
@media(max-width:530px) {.ns-hero-actions {flex-direction:column;align-items:stretch}.ns-hero-actions .ns-button {width:100%}.ns-shortcuts {padding:2.7rem 1rem}.ns-shortcut {padding:1.3rem}}
@media(prefers-reduced-motion:reduce) {.ns-button,.ns-shortcut { transition:none; } .ns-button:hover,.ns-shortcut:hover { transform:none; }}
/* Blog accessibility and responsive refinements */
.ns-skip-link {
  position:fixed;left:12px;top:12px;z-index:9999;
  transform:translateY(-180%);
  background:#fff;color:#0d304c;border:2px solid #1a6997;
  padding:.75rem 1.1rem;border-radius:9px;font-weight:800;text-decoration:none;
}
.ns-skip-link:focus {transform:translateY(0)}
.blog-article-card:focus-visible, .blog-filter-tab:focus-visible,
.search-box:focus-within {outline:3px solid #3e92cc;outline-offset:2px}
.blog-filter-tabs .blog-filter-tab[aria-pressed="true"] {
  color:#0f4e7b;border-bottom-color:#1f709f;background:#eaf3f9;
}
.blog-filter-bar {
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}
.blog-category-section { scroll-margin-top:1rem; }
.blog-card-body h3 { overflow-wrap:anywhere; }
.blog-card-image-wrap {background:#e9f1f8;}
.blog-article-card img[loading="lazy"] { background:#e9f1f8; }
.navbar-wrap .nav-brand img, .nav-bar .nav-brand img {height:52px;width:auto;max-width:166px;object-fit:contain;display:block}
@media (min-width:769px) and (max-width:1090px){
  .navbar-wrap .nav-links {gap:1px}
  .navbar-wrap .nav-links a {font-size:.79rem;padding:.48rem .55rem}
  .navbar-wrap .navbar-inner {padding-inline:1.1rem;gap:.5rem}
}
@media (max-width:768px) {
  .blog-filter-bar {position:relative;top:auto;}
  .blog-filter-tab {min-height:44px}
  .search-box {min-height:52px}
  .nav-bar .nav-links {align-items:stretch;gap:0}
  .nav-bar .nav-links a {display:block;padding:.72rem 1rem;min-height:44px}
  .nav-bar .mobile-menu-btn {min-width:44px;min-height:44px}
  .nav-bar .nav-brand .logo-image {height:52px;width:auto}
  .blog-category-header {flex-wrap:wrap}
  .blog-category-count {white-space:nowrap}
  .ns-blog-intro {padding:1.15rem}
  .blog-article-card {content-visibility:auto;contain-intrinsic-size:auto 290px}
}
@media (prefers-reduced-motion:reduce) {
  .blog-article-card {animation:none;transition:none}
  .blog-article-card:hover {transform:none}
  .blog-card-image-wrap img {transition:none}
}

/* Services catalog: immediate access to each item */
.ns-service-jump {display:flex;flex-wrap:wrap;gap:.55rem;margin:0 0 1.65rem}
.ns-service-jump a {border:1px solid #c7d9e8;background:#fff;color:#184c76;border-radius:999px;padding:.6rem 1rem;min-height:42px;display:inline-flex;align-items:center;text-decoration:none;font:700 .84rem/1.2 Inter,Arial,sans-serif}
.ns-service-jump a:hover,.ns-service-jump a:focus-visible {background:#e5f0f8;border-color:#367da8}
.ns-service-card {scroll-margin-top:95px}
.ns-faq-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;margin-top:2rem}
.ns-faq-grid article {padding:1.4rem 1.55rem;border:1px solid #dce6ef;background:white;border-radius:15px}
.ns-faq-grid h3 {font:800 1.06rem/1.4 Inter,Arial,sans-serif;color:#1c3652;margin:0 0 .6rem}
.ns-faq-grid p {line-height:1.68;color:#506276;margin:0}
.ns-faq-grid a {color:#0e699e;text-decoration:underline;text-underline-offset:3px}
.ns-faq-grid a:focus-visible {outline:3px solid #3e92cc;outline-offset:3px}
@media(max-width:760px) {
 .ns-faq-grid {grid-template-columns:1fr}
 .ns-service-jump {flex-wrap:nowrap;overflow-x:auto;padding-bottom:.65rem;overscroll-behavior-x:contain}
 .ns-service-jump a {white-space:nowrap;flex:0 0 auto}
}


/* ===== original shared rules: header-brand.css ===== */
/* NutriSib | Sitewide brand standard, construction.
   Header logo has exactly 52 CSS px everywhere; non-header content is unaffected. */
:root { --nutrisib-header-logo-height: 52px; }
header a.nav-brand img,
header a.logo-link img,
header a.ns-brand img,
header a.brand-logo img,
header img.logo-image,
header img[src*="logo_navy_pearl"],
header img[src*="logo_alb"],
header img[alt*="NutriSib"],
header img[alt*="Nutrisib"] {
  height: var(--nutrisib-header-logo-height) !important;
  max-height: var(--nutrisib-header-logo-height) !important;
  width: auto !important;
  max-width: 180px !important;
  object-fit: contain !important;
  display: block !important;
  flex-shrink: 0;
}
header .nav-brand-text,
header .nav-brand-name,
header .nav-brand-tagline,
header a.nav-brand > div:has(.nav-brand-name) {
  display: none !important;
}
header a.nav-brand, header a.logo-link, header a.ns-brand {
  flex-shrink: 0;
  align-items: center;
}
@media (max-width: 768px) {
 header img[src*="logo_navy_pearl"], header img[src*="logo_alb"],
 header a.nav-brand img, header a.logo-link img, header a.ns-brand img {
   height: var(--nutrisib-header-logo-height) !important;
   max-height: var(--nutrisib-header-logo-height) !important;
 }
}


/* ===== original shared rules: hero-uniform.css ===== */
/* NutriSib Construction — coherent hero design system.
 * Reference palette: blue of the NutriSib brand/landing page.
 * Fully opaque tonal gradient: no opacity fade and no pale/desaturated endpoint.
 * Each hero gets the same 52px lower arc; content height may naturally vary.
 */
:root {
  --ns-hero-top: #102A64;
  --ns-hero-middle: #152F69;
  --ns-hero-bottom: #1E3B71;
  --ns-hero-gold: #D9B329;
  --ns-hero-curve: 52px;
  --ns-hero-surface: #F8FAFC;
}
.ns-uniform-hero {
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  background-color: var(--ns-hero-top) !important;
  background-image: linear-gradient(145deg,
      var(--ns-hero-top) 0%,
      var(--ns-hero-middle) 52%,
      var(--ns-hero-bottom) 100%) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-bottom: max(6.25rem, calc(var(--ns-hero-curve) + 3rem)) !important;
  color: #ffffff !important;
}
/* Remove divergent decorative overlays; the common gradient is the visual. */
.ns-uniform-hero::before {
  background: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.ns-uniform-hero::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: -1px !important;
  height: var(--ns-hero-curve) !important;
  width: 100% !important;
  background: var(--ns-hero-surface) !important;
  clip-path: ellipse(80% 100% at 50% 100%) !important;
  border: 0 !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.ns-uniform-hero > .hero-content,
.ns-uniform-hero > .hero-grid,
.ns-uniform-hero > .hero-inner,
.ns-uniform-hero > .pv-hero-inner,
.ns-uniform-hero > .ns-wrap {
  position: relative;
  z-index: 2;
}
.ns-uniform-hero h1,
.ns-uniform-hero h2,
.ns-uniform-hero .hero-title,
.ns-uniform-hero .hero-title-xl,
.ns-uniform-hero .pv-hero-title,
.ns-uniform-hero .hero-subtitle {
  color: #ffffff !important;
}
.ns-uniform-hero .hero-title-xl em,
.ns-uniform-hero .hero-title em,
.ns-uniform-hero .hero-title span,
.ns-uniform-hero .hero-kpi-num,
.ns-uniform-hero .hero-stat-num {
  color: var(--ns-hero-gold) !important;
}
.ns-uniform-hero .hero-body,
.ns-uniform-hero .hero-sub,
.ns-uniform-hero .hero-stat-label,
.ns-uniform-hero .hero-kpi-label,
.ns-uniform-hero > p {
  color: #dae5f5 !important;
}
.ns-uniform-hero a:focus-visible {
  outline: 3px solid #f0d17c;
  outline-offset: 4px;
}
.ns-uniform-hero .hero-grid,
.ns-uniform-hero .hero-inner,
.ns-uniform-hero .pv-hero-inner {
  width: min(1320px, 100%);
  margin-inline: auto;
}
@media (max-width: 768px) {
  .ns-uniform-hero {
    padding-bottom: 6.5rem !important;
  }
}
@media (max-width: 480px) {
  .ns-uniform-hero {
    padding-bottom: 6rem !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ns-uniform-hero,
  .ns-uniform-hero * {
    scroll-behavior: auto !important;
  }
}


/* Editorial and responsive rhythm — consistent across content templates. */
.ns-uniform-hero {
  padding-top: clamp(3rem, 5vw, 5rem) !important;
  padding-left: clamp(1.1rem, 3.5vw, 3rem) !important;
  padding-right: clamp(1.1rem, 3.5vw, 3rem) !important;
}
.ns-uniform-hero :is(h1, .hero-title, .hero-title-xl, .journal-title, .pv-hero-title) {
  font-family: 'Montserrat', 'Inter', system-ui, sans-serif !important;
  font-size: clamp(2rem, 4.2vw, 3.65rem) !important;
  font-weight: 800 !important;
  line-height: 1.14 !important;
  letter-spacing: -.025em !important;
  text-wrap: balance;
  max-width: 100%;
  overflow-wrap: break-word;
}
.ns-uniform-hero :is(.hero-sub, .hero-subtitle, .hero-body, .pv-hero-subtitle) {
  font-size: clamp(.98rem, 1.3vw, 1.15rem) !important;
  line-height: 1.7 !important;
  text-wrap: pretty;
}
.ns-uniform-hero :is(.hero-kpis, .hero-stats) {
  position: relative;
  z-index: 3;
  margin-bottom: 0 !important;
  padding-bottom: 1.25rem;
}
.ns-uniform-hero :is(.hero-kpi-num, .hero-stat-num) {
  color: var(--ns-hero-gold) !important;
  line-height: 1.22;
}
.ns-uniform-hero :is(.hero-kpi-label, .hero-stat-label) {
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
}
.ns-uniform-hero :is(a, button) {
  scroll-margin-top: 100px;
}
:where(.section-fw, .ns-section, .content-card, .blog-category-section, .qr-section)
:is(h2, h3) {
  text-wrap: balance;
  overflow-wrap: break-word;
}
:where(.section-fw, .ns-section, .content-card, .blog-category-section, .qr-section)
:is(p, li) {
  overflow-wrap: break-word;
}
/* Contact currently renders its hero inside a centered section. Give it the
   same block silhouette and reasonable breathing room without affecting the
   QR cards or the legal modals. */
.infographic-header-page.ns-uniform-hero {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto 2.25rem !important;
  text-align: center;
  padding-top: clamp(3rem, 5vw, 4.5rem) !important;
}
/* Article and catalog hero cards can inherit white card borders from their
   old templates; remove those while keeping the content below unchanged. */
.hero-card.ns-uniform-hero {
  padding-top: clamp(2.75rem, 4vw, 4.5rem) !important;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 768px) {
  .ns-uniform-hero {
    padding-top: 2.75rem !important;
  }
  .ns-uniform-hero :is(h1,.hero-title,.hero-title-xl,.journal-title,.pv-hero-title) {
    font-size: clamp(1.9rem, 7vw, 2.7rem) !important;
    line-height: 1.16 !important;
  }
  .ns-uniform-hero :is(.hero-kpis, .hero-stats) {
    gap: 1rem;
    padding-bottom: 1.15rem;
  }
}
@media (max-width: 440px) {
  .ns-uniform-hero {
    padding-left: 1.1rem !important;
    padding-right: 1.1rem !important;
  }
  .ns-uniform-hero :is(.hero-kpi-num, .hero-stat-num) {
    font-size: clamp(1.35rem, 5vw, 2rem);
  }
}


/* ===== original shared rules: site-master-hero.css ===== */
/* NutriSib construction: SINGLE shared hero component.
   Same full-width silhouette, 52px curve, deep navy palette and two-column grid.
   Journalul de sistem is intentionally not included.
*/
:root {
  --ns-master-top:#1c2c4e;
  --ns-master-mid:#223557;
  --ns-master-end:#2a4163;
  --ns-master-gold:#d3ad22;
  --ns-master-height:690px;
  --ns-master-curve:52px;
}
.ns-master-hero {
  box-sizing:border-box!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:100vw!important;max-width:none!important;
  height:var(--ns-master-height)!important;
  min-height:var(--ns-master-height)!important;max-height:var(--ns-master-height)!important;
  margin:0 0 2rem calc(50% - 50vw)!important;
  padding:3rem clamp(1rem,4vw,3rem) calc(var(--ns-master-curve) + 2.25rem)!important;
  background:linear-gradient(145deg,var(--ns-master-top) 0%,var(--ns-master-mid) 54%,var(--ns-master-end) 100%)!important;
  color:#fff!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  overflow:hidden!important;position:relative!important;isolation:isolate;text-align:left!important;
}
.ns-master-hero::before {content:none!important;display:none!important;}
.ns-master-hero::after {
  content:""!important;display:block!important;
  position:absolute!important;left:0!important;right:0!important;bottom:-1px!important;top:auto!important;
  width:100%!important;height:var(--ns-master-curve)!important;
  background:#f8fafc!important;
  clip-path:ellipse(80% 100% at 50% 100%)!important;
  opacity:1!important;border:0!important;border-radius:0!important;pointer-events:none!important;z-index:1!important;
}
.ns-master-hero__grid {
  width:min(1240px,100%)!important;min-width:0!important;min-height:480px!important;
  margin:0 auto!important;padding:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr)!important;
  gap:clamp(1.5rem,3.5vw,3.5rem)!important;
  align-items:stretch!important;position:relative!important;z-index:2!important;
}
.ns-master-hero__content {
  display:flex!important;flex-direction:column!important;justify-content:center!important;
  min-width:0!important;width:100%!important;max-width:100%!important;gap:0!important;
}
.ns-master-hero__eyebrow {
  display:inline-flex!important;align-self:flex-start!important;align-items:center!important;
  background:rgba(255,255,255,.085)!important;border:1px solid rgba(255,255,255,.23)!important;
  border-radius:100px!important;padding:.42rem .84rem!important;
  font:800 .72rem/1.3 Inter,Arial,sans-serif!important;
  text-transform:uppercase!important;letter-spacing:.07em!important;
  color:#f0d892!important;margin:0 0 1.1rem!important;
}
.ns-master-hero__title {
  max-width:720px!important;min-width:0!important;
  margin:0 0 1rem!important;padding:0!important;
  font:850 clamp(2rem,3.6vw,3.3rem)/1.12 Montserrat,Inter,Arial,sans-serif!important;
  letter-spacing:-.024em!important;color:#fff!important;
  overflow-wrap:break-word!important;text-wrap:balance!important;
  border:0!important;background:none!important;text-align:left!important;
}
.ns-master-hero__title em,.ns-master-hero__title span{
  color:var(--ns-master-gold)!important;font-style:normal!important;
}
.ns-master-hero__lead{
  max-width:620px!important;color:#e2eaf5!important;
  font:400 clamp(.97rem,1.08vw,1.1rem)/1.64 Inter,Arial,sans-serif!important;
  margin:0 0 1.4rem!important;text-align:left!important;
  text-wrap:pretty!important;
}
.ns-master-hero__actions {
  display:flex!important;flex-wrap:wrap!important;gap:.7rem!important;margin:0!important;
}
.ns-master-hero__action {
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-height:46px!important;box-sizing:border-box!important;
  padding:.78rem 1.1rem!important;border-radius:9px!important;
  text-decoration:none!important;font:800 .9rem/1.2 Inter,Arial,sans-serif!important;
  box-shadow:none!important;white-space:normal!important;
  transition:transform .15s ease!important;
}
.ns-master-hero__action:hover {transform:translateY(-2px);}
.ns-master-hero__action:focus-visible,
.ns-master-hero__mini:focus-visible{outline:3px solid #eacd64!important;outline-offset:3px!important;}
.ns-master-hero__action--primary{color:#122c4b!important;background:var(--ns-master-gold)!important;border:1px solid var(--ns-master-gold)!important;}
.ns-master-hero__action--secondary{color:#fff!important;background:transparent!important;border:1px solid rgba(255,255,255,.65)!important;}
.ns-master-hero__minis{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:.55rem!important;margin-top:1.45rem!important;max-width:610px!important;
}
.ns-master-hero__mini{
  box-sizing:border-box!important;display:flex!important;flex-direction:column!important;
  align-items:flex-start!important;justify-content:center!important;
  min-width:0!important;min-height:61px!important;
  padding:.65rem .9rem!important;border:1px solid rgba(255,255,255,.18)!important;
  border-radius:10px!important;background:rgba(255,255,255,.075)!important;
  text-align:left!important;text-decoration:none!important;
}
.ns-master-hero__mini-value {
  color:#eed274!important;
  font:800 .99rem/1.18 Montserrat,Inter,sans-serif!important;
  white-space:normal!important;overflow-wrap:break-word!important;
}
.ns-master-hero__mini-label {
  color:#e1eaf4!important;
  font:500 .69rem/1.4 Inter,Arial,sans-serif!important;margin-top:.22rem!important;
}
.ns-master-hero__visual{
  box-sizing:border-box!important;min-width:0!important;
  width:100%!important;max-width:100%!important;height:100%!important;max-height:510px!important;
  display:flex!important;align-items:stretch!important;justify-content:stretch!important;
}
.ns-master-hero__panel{
  box-sizing:border-box!important;width:100%!important;max-width:100%!important;height:100%!important;
  min-width:0!important;padding:1.4rem!important;
  border:1px solid rgba(211,173,34,.5)!important;border-radius:18px!important;
  background:linear-gradient(155deg,rgba(10,28,52,.7),rgba(18,47,80,.65))!important;
  box-shadow:0 18px 38px rgba(4,15,32,.14)!important;
  color:#fff!important;overflow:hidden!important;
  display:flex!important;flex-direction:column!important;
}
.ns-master-hero__panel-title{
  font:800 clamp(1rem,1.3vw,1.3rem)/1.25 Montserrat,Inter,Arial,sans-serif!important;
  color:#f7f7fa!important;letter-spacing:.01em!important;margin:0 0 .8rem!important;
}
.ns-master-hero__panel-list {
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;
  gap:.56rem!important;min-width:0!important;flex:1!important;
}
.ns-master-hero__panel-item {
  box-sizing:border-box!important;min-width:0!important;
  display:grid!important;grid-template-columns:36px minmax(0,1fr)!important;
  align-items:center!important;gap:.8rem!important;
  padding:.55rem .7rem!important;border-radius:10px!important;
  background:rgba(255,255,255,.065)!important;
  border:1px solid rgba(255,255,255,.095)!important;
}
.ns-master-hero__panel-badge{
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:36px!important;height:36px!important;
  border-radius:9px!important;background:rgba(211,173,34,.17)!important;
  color:#eed274!important;font:850 .94rem/1 Inter,Arial,sans-serif!important;
}
.ns-master-hero__panel-copy{display:block!important;min-width:0!important;}
.ns-master-hero__panel-copy strong{
  display:block!important;color:#fff!important;
  font:750 .86rem/1.26 Inter,Arial,sans-serif!important;margin:0 0 .17rem!important;
}
.ns-master-hero__panel-copy span {
  display:block!important;color:#d9e4f2!important;
  font:400 .75rem/1.38 Inter,Arial,sans-serif!important;
  overflow-wrap:break-word!important;
}
.ns-master-hero__panel-foot{
  margin:.86rem 0 0!important;color:#eed274!important;
  font:700 .74rem/1.3 Inter,Arial,sans-serif!important;
}
@media(max-width:940px){
  .ns-master-hero{--ns-master-height:700px;}
  .ns-master-hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,.88fr)!important;gap:1.15rem!important;}
  .ns-master-hero__panel{padding:1rem!important;}
  .ns-master-hero__panel-item{gap:.5rem!important;padding:.4rem!important;}
  .ns-master-hero__panel-copy span{font-size:.7rem!important;}
}
@media(max-width:700px){
  .ns-master-hero{
    min-height:690px!important;height:auto!important;max-height:none!important;
    padding:2.25rem 1.1rem calc(var(--ns-master-curve) + 2.4rem)!important;
  }
  .ns-master-hero__grid{grid-template-columns:minmax(0,1fr)!important;min-height:0!important;gap:0!important;}
  .ns-master-hero__visual{display:none!important;}
  .ns-master-hero__title{font-size:clamp(1.95rem,6.8vw,2.7rem)!important;}
  .ns-master-hero__minis{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media(max-width:390px){
  .ns-master-hero__minis{grid-template-columns:minmax(0,1fr)!important;}
  .ns-master-hero__mini{min-height:52px!important;}
  .ns-master-hero__actions{flex-direction:column!important;align-items:stretch!important;}
  .ns-master-hero__action{width:100%!important;}
}
@media(prefers-reduced-motion:reduce){.ns-master-hero__action{transition:none!important}.ns-master-hero__action:hover{transform:none}}

/* ===== NUTRISIB unified design system, construction 2026 ===== */
:root{
 --ns-brand-navy:#1c2c4e;
 --ns-brand-navy-mid:#223557;
 --ns-brand-navy-low:#2a4163;
 --ns-brand-gold:#d3ad22;
 --ns-page-surface:#f8fafc;
 --ns-content-color:#1d344d;
 --ns-muted:#52687e;
 --ns-card-border:#dae5f0;
 --ns-radius:16px;
 --ns-width:1240px;
 --color-footer-bg:#1c2c4e;
 --ns-navy:#1c2c4e;
 --ns-deep:#1c2c4e;
 --ns-gold:#d3ad22;
 --ns-master-top:#1c2c4e;
 --ns-master-mid:#223557;
 --ns-master-end:#2a4163;
 --ns-master-gold:#d3ad22;
 --ns-hero-top:#1c2c4e;
 --ns-hero-middle:#223557;
 --ns-hero-bottom:#2a4163;
 --ns-hero-gold:#d3ad22;
}
html {scroll-behavior:smooth;scroll-padding-top:90px;}
body{color:var(--ns-content-color);}
header a.nav-brand img,header a.logo-link img,header a.ns-brand img,header img.logo-image{
 height:52px!important;width:auto!important;max-height:52px!important;object-fit:contain!important;
}
header .nav-brand-text,header .nav-brand-name,header .nav-brand-tagline{display:none!important;}
header.navbar-wrap,header.nav-bar,header.main-header,header.ns-header{
 z-index:1001;
 background:#f8fafc!important;
 color:#1c2c4e!important;
 border-color:#dae5f0!important;
}
header :is(.nav-links,.desktop-menu,.ns-nav) a{color:#1c2c4e;white-space:normal;}
header :is(.nav-links,.desktop-menu,.ns-nav) a:hover,
header :is(.nav-links,.desktop-menu,.ns-nav) a:focus-visible{color:#255c8c;outline-offset:3px;}
header :is(.nav-links,.desktop-menu,.ns-nav) a.nav-cta-link,
header .ns-nav a.ns-nav-primary{color:#fff!important;background:#1c2c4e!important;border-radius:9px!important;}
/* Limit layout widths consistently, without disrupting interactive forms. */
:is(.container-xl,.ns-wrap,.container-main,.pv-container,.nav-container){max-width:var(--ns-width);}
:where(.content-card,.ns-service-card,.qr-card,.card-general){border-radius:var(--ns-radius);}
:where(.section-title-xl,.ns-section h2,.section-title,.blog-category-header h2){
 text-wrap:balance;overflow-wrap:break-word;
}
:where(p,li){overflow-wrap:break-word;}
:where(a,button,input,textarea,select):focus-visible{outline:3px solid #3674a8;outline-offset:3px;}
:where(button,a){touch-action:manipulation;}
/* All page footers use the same NAVY, not black. */
footer.ns-global-footer,footer.infographic-footer,footer.page-footer,footer.ns-footer,
footer:not(.ns-omit-footer){background:#1c2c4e!important;color:#e9eff8!important;border-color:#354a6a!important;}
footer :is(a,button){color:#eed183;}
.ns-global-footer{
 box-sizing:border-box;display:block!important;position:relative;
 width:100%!important;max-width:none!important;
 padding:3.25rem clamp(1.1rem,4vw,3rem) 1.35rem!important;
 margin:2.5rem 0 0!important;
 background:#1c2c4e!important;color:#e9eff8!important;
 border:0!important;box-shadow:none!important;border-radius:0!important;
}
.ns-global-footer__grid{
 display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:clamp(1.5rem,3vw,3rem);
 margin:0 auto 2.1rem;max-width:var(--ns-width);
}
.ns-global-footer__brand{font:850 1.3rem/1.25 Montserrat,Inter,sans-serif;color:#fff;margin:0 0 .8rem;}
.ns-global-footer__lead{font:400 .95rem/1.7 Inter,sans-serif;color:#d5e0ec;max-width:420px;margin:0;}
.ns-global-footer__title{font:800 .84rem/1.3 Inter,sans-serif;letter-spacing:.09em;color:#eed183;margin:0 0 .95rem;text-transform:uppercase;}
.ns-global-footer__links{display:grid;gap:.8rem;}
.ns-global-footer__links a{font:600 .92rem/1.35 Inter,sans-serif;color:#e7eef8!important;text-decoration:none;}
.ns-global-footer__links a:hover{text-decoration:underline;color:#eed183!important;}
.ns-global-footer__bottom{
 max-width:var(--ns-width);margin:auto;padding-top:1.1rem;
 display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
 border-top:1px solid rgba(255,255,255,.19);color:#bacadd;
 font:400 .81rem/1.6 Inter,sans-serif;
}
.ns-global-footer__bottom p{margin:0;}
.ns-global-footer a:focus-visible{outline-color:#eed183;}
/* Hide old duplicates only once unified footer fragment is successfully mounted. */
.ns-legacy-footer-hidden{display:none!important;}
/* Uniform editorial card paddings and typography across the conventional pages. */
.ns-service-card,.blog-article-card,.qr-card{border-color:var(--ns-card-border);box-shadow:0 8px 24px rgba(22,44,78,.06);}
.blog-article-card:hover,.ns-shortcut:hover{box-shadow:0 16px 30px rgba(22,44,78,.12);}
.hero-card.ns-uniform-hero{box-shadow:none!important;}
/* Explicit hero geometry: one component, no legacy dimensions after initialization. */
.ns-master-hero{
 --ns-master-height:690px;
 --ns-master-curve:52px;
}
.ns-master-hero__panel{max-width:100%!important;min-width:0!important;}
.ns-master-hero__grid{max-width:1240px!important;width:100%!important;}
.ns-master-hero__title :is(.dot,span){color:var(--ns-brand-gold)!important;}
@media(max-width:1020px) {
 header :is(.nav-links,.desktop-menu) a{font-size:.82rem;}
}
@media(max-width:768px){
 .ns-global-footer__grid{grid-template-columns:1fr 1fr;}
 .ns-global-footer__grid>div:first-child{grid-column:1/-1;}
 header.navbar-wrap .nav-links.open{display:flex!important;}
 .ns-master-hero__grid{width:100%!important;}
}
@media(max-width:480px){
 .ns-global-footer__grid{grid-template-columns:1fr;}
 .ns-global-footer__grid>div:first-child{grid-column:auto;}
 .ns-global-footer__bottom{display:block;}
 .ns-global-footer__bottom p{margin:0 0 .6rem;}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

/* Landing audit cards: equal height, legible tiles, no clipped pricing panel. */
.ns-audit-layout{
 display:grid!important;
 grid-template-columns:minmax(0,1.25fr) minmax(315px,.75fr)!important;
 gap:clamp(1.1rem,2.5vw,2rem)!important;
 align-items:stretch!important;
 width:100%!important;
 min-width:0!important;
}
.ns-audit-main{
 box-sizing:border-box!important;
 display:flex!important;
 flex-direction:column!important;
 min-width:0!important;
 width:100%!important;
 height:100%!important;
 padding:clamp(1.5rem,2.7vw,2.5rem)!important;
 background:#fff!important;
 border-radius:var(--ns-radius)!important;
 box-shadow:0 8px 22px rgba(22,44,78,.09)!important;
}
.ns-audit-main>h3{font-size:clamp(1.2rem,1.7vw,1.55rem)!important;}
.ns-audit-main>p{font-size:1rem!important;line-height:1.72!important;}
.ns-audit-benefits{
 display:grid!important;
 grid-template-columns:repeat(2,minmax(0,1fr))!important;
 grid-template-rows:repeat(3,minmax(96px,1fr))!important;
 gap:.75rem!important;
 flex:1!important;
}
.ns-audit-benefit {
 box-sizing:border-box!important;
 min-width:0!important;
 display:flex!important;
 gap:.8rem!important;
 align-items:center!important;
 padding:1.1rem!important;
 border:1px solid #dbe7ef!important;
 border-radius:11px!important;
 background:#eaf2f9!important;
}
.ns-audit-benefit span:first-child{flex:0 0 auto!important;font-size:1.25rem!important;}
.ns-audit-benefit span:last-child{
 font-size:.98rem!important;line-height:1.56!important;color:#233b55!important;
 overflow-wrap:anywhere!important;
}
.ns-audit-layout .invest-card{
 box-sizing:border-box!important;
 width:100%!important;
 max-width:100%!important;
 min-width:0!important;
 margin:0!important;
 padding:clamp(1.45rem,2.5vw,2.3rem)!important;
 overflow:hidden!important;
 display:flex!important;
 flex-direction:column!important;
 justify-content:flex-start!important;
 background:var(--ns-brand-navy)!important;
 border-radius:var(--ns-radius)!important;
}
.ns-audit-layout .invest-card .btn-gold-xl{
 box-sizing:border-box!important;width:100%!important;max-width:100%!important;
 margin-top:auto!important;white-space:normal!important;text-align:center!important;
}
.ns-audit-layout .invest-card :is(h3,p,li){overflow-wrap:anywhere!important;}
@media(max-width:980px){
 .ns-audit-layout{grid-template-columns:minmax(0,1fr)!important;}
 .ns-audit-benefits{grid-template-rows:repeat(3,minmax(90px,auto))!important;}
}
@media(max-width:520px){
 .ns-audit-benefits{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:none!important;}
 .ns-audit-benefit{min-height:72px!important;}
}

/* Local booking buttons, reusable across NutriSib pages. */
.ns-inline-booking-link{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:.85rem 1.15rem;background:#d3ad22;color:#1c2c4e;border-radius:10px;font:800 .95rem/1.3 Inter,Arial,sans-serif;text-decoration:none;text-align:center;}
.ns-inline-booking-link:hover{filter:brightness(1.05);}