/* GENERAL */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Helvetica Neue',sans-serif; }
body { background:#f4f4f8; color:#111; }

/* HERO */
.hero {
    height:90vh;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    overflow:hidden;
}
.hero-overlay {
    position:absolute;
    top:0; left:0; width:100%; height:100%;
    background:linear-gradient(135deg,rgba(255,236,210,0.8),rgba(252,182,159,0.8));
    z-index:1;
}
.hero::after {
    content:"";
    position:absolute;
    top:0; left:0; width:100%; height:100%;
    background:url('images/hero-bg.jpg') center/cover no-repeat;
    opacity:0.25;
    z-index:0;
}
.hero-content {
    position:relative;
    z-index:2;
    max-width:800px;
    padding:20px;
}
.hero h1 {
    font-size:3rem;
    margin-bottom:20px;
    animation:fadeInDown 1s ease forwards;
}
.hero p {
    font-size:1.3rem;
    margin-bottom:30px;
    animation:fadeInUp 1s ease forwards;
}
.cta-button {
    background:rgba(255,255,255,0.15);
    backdrop-filter:blur(10px);
    color:#111;
    padding:15px 35px;
    border-radius:12px;
    font-weight:600;
    text-decoration:none;
    transition:0.3s;
}
.cta-button:hover { background:rgba(255,255,255,0.3); }

/* SERVICES */
.services { padding:80px 20px; text-align:center; }
.services h2 { font-size:2.5rem; margin-bottom:50px; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:30px; max-width:1100px; margin:0 auto; }
.card {
    background:rgba(255,255,255,0.25);
    backdrop-filter:blur(15px);
    padding:30px;
    border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,0.08);
    transition:transform 0.3s, box-shadow 0.3s;
}
.card:hover { transform:translateY(-10px); box-shadow:0 25px 60px rgba(0,0,0,0.15); }
.card img { width:60px; margin-bottom:20px; }
.card h3 { font-size:1.4rem; margin-bottom:10px; }
.card p { color:#333; font-size:1rem; }

/* CONTACT FORM */
.contact-form {
    max-width:600px;
    margin:80px auto;
    background:rgba(255,255,255,0.2);
    backdrop-filter:blur(15px);
    padding:30px;
    border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,0.08);
    text-align:center;
}
.contact-form h1 { margin-bottom:30px; }
.contact-form input, .contact-form textarea {
    width:100%; padding:15px; margin:12px 0; border:none; border-radius:10px; background:rgba(255,255,255,0.15); color:#111;
}
.contact-form input:focus, .contact-form textarea:focus { outline:2px solid #ffb37c; }
.contact-form button {
    background:#111;
    color:white;
    padding:15px 30px;
    border:none;
    border-radius:12px;
    font-weight:600;
    cursor:pointer;
    transition:0.3s;
}
.contact-form button:hover { opacity:0.85; }
.success { color:green; margin-bottom:15px; }

/* RESPONSIVE */
@media(max-width:768px){
    .hero h1 { font-size:2.2rem; }
    .hero p { font-size:1.1rem; }
}

/* ANIMATIONS */
@keyframes fadeInDown { from {opacity:0; transform:translateY(-20px);} to {opacity:1; transform:translateY(0);} }
@keyframes fadeInUp { from {opacity:0; transform:translateY(20px);} to {opacity:1; transform:translateY(0);} }