:root {
    --primary: #00d2ff;
    --secondary: #3a7bd5;
    --grad: linear-gradient(135deg, #3a7bd5 0%, #00d2ff 100%);
    --dark: #0f172a;
    --glass: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.1);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Outfit', sans-serif; }
body { background-color: #f8fafc; color: var(--dark); overflow-x: hidden; scroll-behavior: smooth; }

/* --- Header Dinamic --- */
header {
position: fixed; width: 100%; top: 0; z-index: 1000;
padding: 20px 8%; display: flex; justify-content: space-between; align-items: center;
transition: 0.4s;
/* Starea inițială: Text Alb */
color: white; 
}

/* Logo-ul inițial alb */
header .logo { 
font-size: 1.8rem; font-weight: 800; text-decoration: none; 
color: white; /* Forțăm alb la început */
transition: 0.4s;
}
header .logo span { color: var(--primary); }

/* Contactul (telefonul) inițial alb */
header .nav-contact {
color: white !important; /* Folosim !important pentru a suprascrie stilul inline dacă e cazul */
transition: 0.4s;
}

/* --- Când dăm SCROLL --- */
header.scrolled { 
background: rgba(255,255,255,0.9); 
backdrop-filter: blur(10px); 
padding: 12px 8%; 
box-shadow: 0 10px 30px rgba(0,0,0,0.05); 
}

/* Logo devine negru/dark la scroll */
header.scrolled .logo { 
color: var(--dark); 
}

/* Telefonul devine negru/dark la scroll */
header.scrolled .nav-contact {
color: var(--dark) !important;
}
/* --- Hero Section --- */
.hero {
    height: 100vh; min-height: 700px;
    background: linear-gradient(rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.6)), 
                url('https://images.unsplash.com/photo-1562094144-85531a7bc344?auto=format&fit=crop&q=80&w=1600');
    background-size: cover; background-attachment: fixed; background-position: center;
    display: flex; align-items: center; justify-content: center; text-align: center; color: white;
    padding: 0 5%;
}
.hero-content h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.1; margin-bottom: 25px; }
.hero-content p { font-size: 1.2rem; max-width: 700px; margin: 0 auto 40px; opacity: 0.9; }

.btn-premium {
    padding: 18px 45px; border-radius: 50px; background: var(--grad);
    color: white; text-decoration: none; font-weight: 600; font-size: 1.1rem;
    display: inline-block; transition: 0.3s; box-shadow: 0 15px 30px rgba(58, 123, 213, 0.3);
    border: none; cursor: pointer;
}
.btn-premium:hover { transform: scale(1.05); box-shadow: 0 20px 40px rgba(58, 123, 213, 0.5); }

/* --- Grid & Cards --- */
section { padding: 80px 8%; }
.section-title { text-align: center; margin-bottom: 60px; }
.section-title h2 { font-size: 2.8rem; margin-bottom: 15px; }

.grid-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.service-card {
    background: white; padding: 40px; border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.03); transition: 0.5s;
    border: 1px solid #f1f5f9; text-align: center;
}
.service-card:hover { transform: translateY(-10px); border-color: var(--primary); }
.service-card i { font-size: 3rem; margin-bottom: 25px; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* --- Lista de preturi (SEO Optimized) --- */
.pricing-box { background: var(--dark); color: white; border-radius: 30px; padding: 40px; margin-top: 30px; }
.price-item { 
    display: flex; justify-content: space-between; align-items: center; 
    padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,0.1); 
}
.price-item:last-child { border: none; }
.price-val { font-weight: 800; color: var(--primary); font-size: 1.2rem; }

/* --- Probleme Section --- */
.problems-grid { 
    display: grid; 
    /* Forțăm 3 coloane pe desktop */
    grid-template-columns: repeat(3, 1fr); 
    gap: 25px; 
}

.problem-item { 
    background: #fff; 
    padding: 25px; 
    border-radius: 20px; 
    border-left: 5px solid #ff4d4d; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.02); 
    transition: 0.3s ease;
}

.problem-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

/* Stil pentru Icoane (pentru a se potrivi cu roșul tău) */
.problem-item i {
    color: #ff4d4d;
    font-size: 1.5rem;
    margin-bottom: 15px;
    display: block;
}

/* --- Adaptare pentru ecrane mai mici --- */
@media (max-width: 992px) {
    .problems-grid { 
        grid-template-columns: repeat(2, 1fr); /* 2 pe rând pe tabletă */
    }
}

@media (max-width: 600px) {
    .problems-grid { 
        grid-template-columns: 1fr; /* 1 singur pe rând pe mobil */
    }
}

/* --- Recenzii --- */
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.review-card { background: white; padding: 30px; border-radius: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.stars { color: #ffcc00; margin-bottom: 15px; }

/* --- Formular --- */
.contact-container {
    display: grid; grid-template-columns: 1fr 1fr; gap: 50px;
    background: white; border-radius: 40px; overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.1);
}
.contact-info { background: var(--grad); padding: 60px; color: white; }
.contact-form { padding: 60px; }

input, select, textarea {
    width: 100%; padding: 15px; margin-bottom: 20px;
    border: 1px solid #e2e8f0; border-radius: 12px; font-size: 1rem;
    background: #f8fafc; transition: 0.3s;
}
input:focus { border-color: var(--primary); outline: none; }

/* --- FAQ --- */
.faq-container { max-width: 900px; margin: 0 auto; }
details { background: white; margin-bottom: 15px; padding: 20px; border-radius: 15px; cursor: pointer; transition: 0.3s; border: 1px solid #edf2f7; }
details[open] { background: var(--primary); color: white; border-color: var(--primary); }
summary { font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; }
summary::after { content: '+'; font-size: 1.5rem; }
details[open] summary::after { content: '-'; }

/* --- Footer --- */
footer { background: var(--dark); color: white; padding: 80px 8% 40px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 50px; }
.footer-map { border-radius: 20px; overflow: hidden; height: 250px; border: 1px solid var(--glass-border); }
.status-badge { display: inline-block; padding: 5px 15px; border-radius: 20px; background: rgba(16, 185, 129, 0.2); color: #10b981; font-size: 0.8rem; margin-bottom: 15px; }

/* --- Mobil Fixes --- */
@media (max-width: 968px) {
    .contact-container { grid-template-columns: 1fr; }
    .hero-content h1 { font-size: 2.8rem; }
    section { padding: 60px 5%; }
    .contact-info, .contact-form { padding: 40px 25px; }
}
@media (max-width: 480px) {
    .price-item { flex-direction: column; align-items: flex-start; gap: 5px; }
}