/* Variabile Globale de Design */
:root {
    --color-dark: #111111;
    --color-white: #ffffff;
    --color-muted: #444444;
    --color-light-gray: #777777;
    --bg-alt: #fbfbfb;
    --border-color: #e5e5e5;
    
    --font-serif: 'Playfair Display', serif;
    --font-sans: 'Montserrat', sans-serif;
    
    --transition-elegant: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Reset și Setări de Bază */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    color: var(--color-dark);
    background-color: var(--color-white);
    line-height: 1.65;
    overflow-x: hidden;
}

.pim-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 25px;
}

/* ==========================================
   HEADER PARALLAX (Abordare Modernă de Stil)
   ========================================== */
.pim-parallax-container {
    position: relative;
    height: 100vh;
    min-height: 650px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    perspective: 1px;
    transform-style: preserve-3d;
}

.pim-parallax-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Înlocuiește cu imaginea reprezentativă (ex. un mix elegant de nuntă/corporate) */
    background: url('../pictures/evenimente-elegante-bucuresti.png') center/cover no-repeat;
    background-attachment: fixed; /* Fallback pentru browsere vechi */
    z-index: 1;
}

/* Efect de adâncime fluid pe browsere moderne */
@supports (perspective: 1px) {
    .pim-parallax-bg {
        transform: translateZ(-1px) scale(2);
        background-attachment: scroll;
    }
}

.pim-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(17,17,17,0.5) 0%, rgba(17,17,17,0.7) 100%);
    z-index: 2;
}

.pim-hero-content {
    position: relative;
    z-index: 3;
    max-width: 900px;
    text-align: center;
    padding: 0 20px;
    color: var(--color-white);
}

.pim-hero-tag {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    display: inline-block;
    margin-bottom: 20px;
    font-weight: 500;
}

.pim-hero-content h1 {
    font-family: var(--font-serif);
    font-size: 3.5rem;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 25px;
    letter-spacing: 0.5px;
}

.pim-hero-content p {
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto 40px auto;
    color: rgba(255, 255, 255, 0.9);
}

.pim-hero-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* Butoane Minimaliste */
.pim-btn-modern, .pim-btn-secondary {
    display: inline-block;
    padding: 18px 38px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition-elegant);
}

.pim-btn-modern {
    background-color: var(--color-white);
    color: var(--color-dark);
    border: 1px solid var(--color-white);
}

.pim-btn-modern:hover {
    background-color: transparent;
    color: var(--color-white);
}

.pim-btn-secondary {
    background-color: transparent;
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.pim-btn-secondary:hover {
    border-color: var(--color-white);
    background-color: rgba(255, 255, 255, 0.05);
}

/* ==========================================
   CONȚINUT: INTRO & STATISTICI
   ========================================== */
.pim-intro-section {
    padding: 120px 0;
    background-color: var(--color-white);
}

.pim-intro-grid {
    display: grid;
    grid-template-columns: 1.4fr 0.6fr;
    gap: 60px;
    align-items: center;
}

.pim-intro-text h2 {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: 400;
    margin-bottom: 30px;
}

.pim-intro-text p {
    color: var(--color-muted);
    font-size: 1.05rem;
    margin-bottom: 20px;
    font-weight: 300;
}

.pim-intro-stats {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.pim-stat-box {
    border-left: 2px solid var(--color-dark);
    padding-left: 25px;
}

.pim-stat-number {
    font-family: var(--font-serif);
    font-size: 3rem;
    line-height: 1;
}

.pim-stat-plus {
    font-family: var(--font-serif);
    font-size: 2rem;
    vertical-align: top;
}

.pim-stat-box p {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-light-gray);
    margin-top: 8px;
}

/* ==========================================
   SERVICII PREMIUM (Grid și Carduri Actve)
   ========================================== */
.pim-services-section {
    padding: 120px 0;
    background-color: var(--bg-alt);
}

.pim-section-title {
    font-family: var(--font-serif);
    font-size: 2.6rem;
    text-align: center;
    font-weight: 400;
    margin-bottom: 15px;
}

.pim-section-subtitle {
    text-align: center;
    color: var(--color-light-gray);
    font-size: 1.1rem;
    font-weight: 300;
    margin-bottom: 70px;
}

.pim-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
}

.pim-service-card {
    background-color: var(--color-white);
    border: 1px solid var(--border-color);
    padding: 50px 35px;
    transition: var(--transition-elegant);
}

/* Clasa generată din JS */
.pim-service-card.pim-card-active {
    transform: translateY(-10px);
    border-color: var(--color-dark);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

.pim-card-header {
    margin-bottom: 25px;
}

.pim-icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 15px;
}

.pim-service-card h3 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 400;
}

.pim-service-card p {
    font-size: 0.95rem;
    color: var(--color-muted);
    font-weight: 300;
    margin-bottom: 25px;
}

.pim-card-list {
    list-style: none;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
}

.pim-card-list li {
    font-size: 0.9rem;
    color: var(--color-dark);
    margin-bottom: 10px;
    position: relative;
    padding-left: 20px;
}

.pim-card-list li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--color-light-gray);
}

/* ==========================================
   SHOWCASE DIVIZAT: WEDDING VS CORPORATE
   ========================================== */
.pim-split-showcase {
    display: flex;
    height: 60vh;
    min-height: 450px;
}

.pim-split-side {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    color: var(--color-white);
    text-align: center;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.pim-side-wedding {
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('cale-catre-imagine-nunta.jpg');
}

.pim-side-corporate {
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('cale-catre-imagine-corporate.jpg');
}

.pim-split-content {
    max-width: 450px;
    z-index: 2;
    transition: var(--transition-elegant);
}

.pim-split-side h3 {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 15px;
}

.pim-split-side p {
    font-size: 0.95rem;
    font-weight: 300;
    opacity: 0.9;
}

/* ==========================================
   LOGISTICS BANNER
   ========================================== */
.pim-logistics-banner {
    padding: 80px 0;
    background-color: var(--color-dark);
    color: var(--color-white);
    /* Opțional: o linie discretă superioară pentru delimitare premium */
    border-top: 1px solid rgba(255, 255, 255, 0.05); 
}

.pim-logistics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
}

/* Modificarea pentru diferențierea elegantă în auriu */
.pim-logistics-item h4 {
    color: #C5A880; /* Auriu Șampanie / Warm Gold discret și高端 */
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    font-weight: 500;
}

.pim-logistics-item p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7); /* Păstrăm contrastul fin pentru lizibilitate */
    font-weight: 300;
    line-height: 1.6;
}

/* Responsive Design (Păstrăm neatins restul codului tău) */
@media (max-width: 992px) {
    .pim-hero-content h1 { font-size: 2.8rem; }
    .pim-intro-grid { grid-template-columns: 1fr; gap: 40px; }
    .pim-split-showcase { flex-direction: column; height: auto; }
    .pim-split-side { height: 40vh; }
}

@media (max-width: 768px) {
    .pim-hero-content h1 { font-size: 2.2rem; }
    .pim-section-title { font-size: 2rem; }
    .pim-intro-text h2 { font-size: 2rem; }
    
    /* Aliniem textul pe centru pe mobile pentru un UX mai curat */
    .pim-logistics-banner { text-align: center; padding: 60px 0; }
}
/* ==========================================
   NOUA SECȚIUNE: SEO ACOPERIRE SECTOARE
   ========================================== */
.pim-sectors-section {
    padding: 120px 0;
    background-color: var(--color-white);
}

.pim-sectors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
}

.pim-sector-card {
    background-color: var(--color-white);
    border: 1px solid var(--border-color);
    padding: 40px 30px;
    transition: var(--transition-elegant);
    position: relative;
    overflow: hidden;
}

/* Efect de hover discret */
.pim-sector-card[data-hover-effect="true"]:hover {
    transform: translateY(-8px);
    border-color: var(--color-dark);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
}

.pim-sector-card .pim-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.pim-sector-card .pim-icon {
    font-size: 2.2rem;
    display: block;
}

.pim-sector-card h3 {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 400;
    margin-bottom: 0;
}

.pim-sector-card p {
    font-size: 0.9rem;
    color: var(--color-muted);
    font-weight: 300;
    margin-bottom: 25px;
}

.pim-btn-mini {
    display: inline-block;
    padding: 10px 22px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--border-color);
    color: var(--color-dark);
    transition: var(--transition-elegant);
}

.pim-btn-mini:hover {
    border-color: var(--color-dark);
    background-color: var(--color-dark);
    color: var(--color-white);
}

/* ==========================================
   SECȚIUNE NOUĂ: SEO ACOPERIRE CARTIERE
   ========================================== */
.pim-neighborhoods-section {
    padding: 100px 0;
    background-color: var(--bg-alt); /* Fundal alternativ discret pentru contrast */
    border-top: 1px solid var(--border-color);
}

.pim-hoods-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 50px;
    margin-top: 50px;
}

.pim-hood-group {
    background: var(--color-white);
    padding: 40px 30px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pim-hood-group h3 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

.pim-hood-group h3::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 1px;
    background-color: var(--color-dark);
}

.pim-hood-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 25px;
}

/* Stilul pastilelor de cartiere */
.pim-tag-item {
    display: inline-block;
    padding: 8px 18px;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--color-dark);
    background-color: var(--bg-alt);
    border: 1px solid var(--border-color);
    cursor: default;
    transition: var(--transition-elegant);
}

/* Efect vizual modern la hover */
.pim-tag-item:hover {
    background-color: var(--color-dark);
    color: var(--color-white);
    border-color: var(--color-dark);
    transform: scale(1.03);
}

.pim-hood-details {
    font-size: 0.9rem;
    color: var(--color-light-gray);
    font-weight: 300;
    line-height: 1.6;
    margin: 0;
}

/* Optimizare pentru ecrane mici */
@media (max-width: 768px) {
    .pim-neighborhoods-section {
        padding: 70px 0;
    }
    .pim-hoods-container {
        gap: 30px;
    }
}
/* ==========================================
   FOOTER DEDICAT ȘI STRUCTURĂ DE INTERLINKING
   ========================================== */
.pim-local-footer {
    background-color: var(--color-dark);
    color: var(--color-white);
    padding: 80px 0 40px 0;
    border-top: 1px solid #222;
    font-family: var(--font-sans);
}

.pim-footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
}

.pim-footer-col h3.pim-footer-logo {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    font-weight: 400;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.pim-footer-col h4 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    margin-bottom: 25px;
    color: var(--color-white);
    position: relative;
    padding-bottom: 10px;
}

.pim-footer-col h4::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.3);
}

.pim-footer-about {
    font-size: 0.9rem;
    color: #999999;
    font-weight: 300;
    line-height: 1.7;
}

.pim-footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pim-footer-list li {
    font-size: 0.9rem;
    color: #999999;
    margin-bottom: 12px;
    font-weight: 300;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pim-bullet {
    color: #555555;
    font-size: 1.2rem;
}

/* Stil link-uri interlinking */
.pim-footer-link {
    color: #999999;
    text-decoration: none;
    transition: var(--transition-elegant);
}

.pim-footer-link:hover {
    color: var(--color-white);
    padding-left: 5px; /* Efect discret de alunecare la hover */
}

/* Footer Bottom */
.pim-footer-bottom {
    border-top: 1px solid #222;
    padding-top: 30px;
    text-align: center;
}

.pim-footer-bottom p {
    font-size: 0.8rem;
    color: #555555;
    font-weight: 300;
    letter-spacing: 0.5px;
}

/* Adaptare Mobile */
@media (max-width: 992px) {
    .pim-footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    
    .pim-footer-col h4::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .pim-footer-list li {
        justify-content: center;
    }
}
/* ==========================================
   CSS UNIFICAT FOOTER (HOME / LOCAL / GENERAL)
   ========================================== */
.main-footer {
    background-color: #111111;
    color: #ffffff;
    padding: 80px 0 40px 0;
    border-top: 1px solid #222222;
    font-family: 'Montserrat', sans-serif;
}

.pim-footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 50px;
}

.pim-footer-col h3.pim-footer-logo {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    font-weight: 400;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.pim-footer-col h4 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    margin-bottom: 25px;
    color: #ffffff;
    position: relative;
    padding-bottom: 10px;
}

.pim-footer-col h4::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.3);
}

.pim-footer-about {
    font-size: 0.9rem;
    color: #999999;
    font-weight: 300;
    line-height: 1.7;
}

.pim-footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pim-footer-list li {
    font-size: 0.9rem;
    color: #999999;
    margin-bottom: 12px;
    font-weight: 300;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pim-bullet {
    color: #555555;
    font-size: 1.2rem;
}

.pim-footer-link {
    color: #999999;
    text-decoration: none;
    transition: all 0.4s ease;
}

.pim-footer-link:hover {
    color: #ffffff;
    padding-left: 5px;
}

/* Zona de Mijloc: Link-uri Legale & Sociale */
.pim-footer-middle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #222222;
    border-bottom: 1px solid #222222;
    padding: 25px 0;
    margin-bottom: 30px;
}

.legal-text-links {
    font-size: 0.85rem;
    color: #777777;
}

.legal-text-links a {
    color: #999999;
    text-decoration: none;
    margin: 0 5px;
    transition: color 0.3s ease;
}

.legal-text-links a:hover {
    color: #ffffff;
}

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

.social-links a {
    color: #ffffff;
    background-color: #222222;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.social-links a:hover {
    background-color: #ffffff;
    color: #111111;
    transform: translateY(-3px);
}

/* Partea de Jos: Copyright, Semnătură și ANPC */
.pim-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-bottom-left p {
    font-size: 0.8rem;
    color: #555555;
    font-weight: 300;
    margin-bottom: 5px;
}

.powered-by a {
    color: #fffafa;
    text-decoration: underline;
    font-weight: bold;
    transition: opacity 0.3s ease;
}

.powered-by a:hover {
    opacity: 0.8;
}

.legal-badges {
    display: flex;
    gap: 10px;
    margin-right: 120px;
}

.legal-img {
    height: 35px;
    width: auto;
    filter: grayscale(1) contrast(1.2);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.legal-img:hover {
    filter: grayscale(0) contrast(1);
    opacity: 1;
}

/* Adaptabilitate Mobile / Tabletă */
@media (max-width: 992px) {
    .pim-footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    
    .pim-footer-col h4::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .pim-footer-list li {
        justify-content: center;
    }

    .pim-footer-middle {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .pim-footer-bottom {
        flex-direction: column-reverse;
        gap: 25px;
        text-align: center;
    }
}
.pim-logistics-action {
    text-align: center;
    margin-top: 50px;
}

.pim-btn-gold {
    display: inline-block;
    padding: 15px 35px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    color: #C5A880; /* Auriul șampanie din titluri */
    background-color: transparent;
    border: 1px solid #C5A880;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Efect rafinat la hover */
.pim-btn-gold:hover {
    background-color: #C5A880;
    color: #111111; /* Textul devine închis pentru lizibilitate pe auriu */
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(197, 168, 128, 0.1);
}

.pim-micro-remote {
    position: fixed;
    bottom: 40px;
    right: 40px; /* Se așază elegant deasupra sau în locul butonului clasic de 'Back to Top' */
    z-index: 9999;
    pointer-events: none; /* Previne blocarea click-urilor pe elementele din spate */
}

.pim-remote-pad {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: rgba(17, 17, 17, 0.3); /* Ultra transparent carbon */
    backdrop-filter: blur(12px); /* Efect de sticlă mată (frosted glass) */
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid #C5A880; /* Conturul fin auriu șampanie */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    pointer-events: auto; /* Activează click-urile doar pe pad */
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}


.pim-remote-center {
    width: 14px;
    height: 14px;
    border: 1px solid rgba(197, 168, 128, 0.4);
    border-radius: 50%;
    z-index: 2;
    transition: all 0.4s ease;
}


.pim-remote-btn {
    position: absolute;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    z-index: 3;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}


.pim-arrow-icon {
    width: 18px;
    height: 18px;
    fill: rgba(255, 255, 255, 0.4); /* Săgeți discrete în repaus */
    transition: all 0.3s ease;
}


.pim-btn-up    { top: 4px; left: 34px; }
.pim-btn-down  { bottom: 4px; left: 34px; }
.pim-btn-left  { top: 34px; left: 4px; }
.pim-btn-right { top: 34px; right: 4px; }




.pim-remote-btn:hover .pim-arrow-icon {
    fill: #C5A880; /* Săgeata activă devine auriu intens */
    transform: scale(1.2);
}

/* Schimbări de dinamică pe butoane în funcție de sens */
.pim-btn-up:hover    { transform: translateY(-3px); }
.pim-btn-down:hover  { transform: translateY(3px); }
.pim-btn-left:hover  { transform: translateX(-3px); }
.pim-btn-right:hover { transform: translateX(3px); }

/* Comportamentul întregului ansamblu la hover */
.pim-remote-pad:hover {
    background-color: rgba(17, 17, 17, 0.65); /* Se întunecă ușor pentru lizibilitate */
    border-color: #ffffff; /* Conturul exterior devine alb pur pentru un feedback curat */
    box-shadow: 0 15px 40px rgba(197, 168, 128, 0.15); /* Glow discret auriu pe fundal */
}

.pim-remote-pad:hover .pim-remote-center {
    border-color: #C5A880;
    background-color: #C5A880;
    transform: scale(0.8);
}

/* Ascundere discretă pe ecrane foarte mici (Mobile UX protect) */
@media (max-width: 576px) {
    .pim-micro-remote {
        bottom: 20px;
        right: 20px;
        transform: scale(0.85); /* Se micșorează ușor pe mobile pentru a nu bloca conținutul */
    }
}
/* Label-ul stilizat deasupra pad-ului */
.pim-remote-label {
    display: block;
    text-align: center;
    font-size: 0.65rem; /* Foarte mic, fin și elegant */
    text-transform: uppercase;
    letter-spacing: 3px; /* Spațiere generoasă pentru aerul de lux */
    color: #C5A880; /* Auriul șampanie coordonat */
    margin-bottom: 8px; /* Spațiu discret până la cercul metalic */
    font-weight: 500;
    opacity: 0.7; /* Ușor estompat în repaus */
    transition: all 0.4s ease;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Interacțiune: când utilizatorul pune mouse-ul pe telecomandă, textul devine alb pur și intens */
.pim-micro-remote:hover .pim-remote-label {
    opacity: 1;
    color: #ffffff;
    letter-spacing: 4px; /* Efect dinamic discret de expansiune a literelor */
}

/*RESPONSIV-ALL-dISPLAYS*/
Pentru a garanta că toate cele trei pagini locale (București, Ilfov, Prahova) se vizualizează absolut impecabil și își păstrează aerul de lux pe orice ecran — de la cele mai mici telefoane (iPhone SE), trecând prin tablete și laptopuri, până la monitoarele uriașe 4K de birou — avem nevoie de un set de reguli CSS Ultra-Responsive globale.

Problema marilor site-uri este că pe ecrane mari textul se „întinde” inestetic, iar pe ecrane mici elementele se înghesuie sau textul curge greșit.

Iată pachetul complet de optimizare responsive pe care trebuie să îl adaugi în fișierul tău global style.css. Acesta controlează fluiditatea întregii pagini, a secțiunilor Hero (cu efectul parallax), a grilei de servicii pe 3 rânduri și a noului Hub regional.

1. Codul CSS Corectiv și Adaptiv Universal
Adaugă acest bloc la finalul fișierului tău style.css pentru a securiza layout-ul pe toate rezoluțiile:

CSS
/* ==========================================================================
   PACHET ULTRA-RESPONSIVE: BUCUREȘTI | ILFOV | PRAHOVA (PIM MOOD)
   ========================================================================== */

/* 1. REGULI GENERALE DE FLUIDITATE ȘI SIGURANȚĂ */
html, body {
    max-width: 100%;
    overflow-x: hidden; /* Elimină definitiv scroll-ul orizontal pe mobile */
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

.pim-container {
    width: 100%;
    max-width: 1320px; /* Limită matematică pentru monitoare mari (securizează alinierea) */
    margin-0: auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* 2. OPTIMIZARE TEXTE DINAMICE (Fluid Typography) */
h1, h2, h3, h4 {
    letter-spacing: 1px;
    line-height: 1.2;
}

/* 3. GRID-UL DE SERVICII (Cele două articole cu înălțime perfect egală) */
.pim-services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 coloane pe Desktop */
    gap: 40px;
    align-items: stretch; /* Forțează cardurile să aibă lungimi identice */
}

.pim-service-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}


/* ==========================================================================
   MEDIA QUERY: MONITOARE ULTRA-WIDE & 4K (Rezoluții > 1440px)
   ========================================================================== */
@media (min-width: 1441px) {
    .pim-hero-content h1 {
        font-size: 3.8rem; /* Scalare elegantă pentru ecrane foarte mari */
    }
    .pim-container {
        padding-left: 0;
        padding-right: 0; /* Centrare pură pe ecrane imense */
    }
}


/* ==========================================================================
   MEDIA QUERY: LAPTOPURI MICI ȘI TABLETE LANDSCAPE (993px - 1200px)
   ========================================================================== */
@media (max-width: 1200px) {
    .pim-services-grid {
        gap: 25px; /* Compactăm spațiul pentru a nu rupe rândurile la titluri */
    }
    .pim-logistics-grid {
        gap: 30px;
    }
}


/* ==========================================================================
   MEDIA QUERY: TABLETE PORTRAIT & ECRANE MEDII (769px - 992px)
   ========================================================================== */
@media (max-width: 992px) {
    /* Hero Section Local */
    .pim-local-hero {
        padding: 140px 0 100px 0 !important; /* Spațiu optimizat pentru headerul de mobil */
        background-attachment: scroll !important; /* Dezactivăm parallax pe tablete/mobile pentru fluiditate maximă în scroll */
    }

    .pim-hero-content h1 {
        font-size: 2.6rem;
    }

    /* Gridul devine pe o singură coloană pentru a lăsa textele să respire */
    .pim-services-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    /* Banner Logistic */
    .pim-logistics-banner {
        padding: 60px 0;
    }
    
    .pim-logistics-grid {
        grid-template-columns: 1fr; /* Elementele logistice curg unul sub altul */
        gap: 30px;
        text-align: center;
    }
}


/* ==========================================================================
   MEDIA QUERY: SMARTPHONES / ECRANE MICI (Până în 768px)
   ========================================================================== */
@media (max-width: 768px) {
    .pim-container {
        padding-left: 20px;
        padding-right: 20px; /* Margini mai strânse pe telefon pentru a câștiga spațiu */
    }

    /* Corecție vizuală Hero */
    .pim-local-hero {
        padding: 120px 0 80px 0 !important;
    }

    .pim-hero-content h1 {
        font-size: 2.0rem; /* Textul nu se va mai rupe greșit în cuvinte silabisite bizar */
        line-height: 1.3;
    }

    .pim-hero-content p {
        font-size: 1rem;
        line-height: 1.5;
    }

    /* Secțiunile de Titlu din Pagină */
    .pim-section-title {
        font-size: 1.8rem;
        margin-bottom: 30px;
        text-align: center;
    }

    /* Cardurile de Servicii pe Mobil */
    .pim-service-card {
        padding: 30px 20px; /* Reducem padding-ul intern să nu strângem textul */
    }

    .pim-service-card h3 {
        font-size: 1.25rem; /* Forțăm titlurile cu 5 cuvinte să se așeze frumos pe mobil */
        text-align: center;
    }
    
    .pim-card-header {
        flex-direction: column; /* Iconița se pune deasupra titlului pe mobil */
        align-items: center;
        gap: 10px;
        margin-bottom: 15px;
    }

    .pim-card-list li {
        font-size: 0.9rem; /* Text ușor mai mic pentru listele de dotări */
    }
}


/* ==========================================================================
   MEDIA QUERY: TELEFOANE ULTRA-MICHE (Sub 375px - Ex: iPhone SE)
   ========================================================================== */
@media (max-width: 375px) {
    .pim-hero-content h1 {
        font-size: 1.75rem;
    }
    
    .pim-service-card h3 {
        font-size: 1.15rem;
    }
}