<!DOCTYPE html> <html lang="ro"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AVB Service</title> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> <style> /* Reset & fonts */ * {margin:0; padding:0; box-sizing:border-box; font-family:'Roboto', sans-serif;} body {line-height:1.6; color:#000; background:#94C2F0;} a {text-decoration:none; color:inherit;}
/* Header */
header {position:fixed; width:100%; background:#FDFBDB45; box-shadow:4px 8px rgba(0,0,0,0.05); z-index:10000;}
nav {max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; padding:1rem;}
nav .logo {font-weight:700; font-size:1.5rem; color:#111827;}
nav ul {display:flex; gap:1.5rem; list-style:none;}
nav ul li a:hover {color:#2563EB;}

/* Hero */
.hero {display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; height:100vh; background:linear-gradient(135deg,#E5E7EB,#F3F4F6); padding:0 1rem;}
.hero h1 {font-size:2.5rem; font-weight:700; margin-bottom:1rem; color:#111827;}
.hero p {font-size:1.125rem; color:#4B5563; margin-bottom:2rem; max-width:600px;}
.hero button {background:#2563EB; color:#FFFFFF; padding:0.75rem 2rem; border:none; border-radius:8px; font-size:1rem; cursor:pointer; transition:background 0.3s;}
.hero button:hover {background:#1D4ED8;}

/* Sections */
section {padding:6rem 1rem; max-width:1200px; margin:0 auto;}
section h2 {font-size:2rem; font-weight:700; color:#111827; margin-bottom:1rem; text-align:center;}
section p {color:#4B5563; text-align:center; margin-bottom:2rem;}
.cards {display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2rem;}
.card {background:#FFFFFF; padding:2rem; border-radius:12px; box-shadow:0 4px 6px rgba(0,0,0,0.05); transition:transform 0.3s, box-shadow 0.3s;}
.card:hover {transform:translateY(-5px); box-shadow:0 8px 12px rgba(0,0,0,0.1);}
.card h3 {font-size:1.25rem; font-weight:700; margin-bottom:0.5rem;}
.card p {color:#4B5563;}

/* Contact */
.contact-form {max-width:600px; margin:0 auto; display:flex; flex-direction:column; gap:1rem;}
.contact-form input, .contact-form textarea {padding:0.75rem; border:1px solid #D1D5DB; border-radius:8px; font-size:1rem; width:100%;}
.contact-form button {background:#2563EB; color:#FFFFFF; padding:0.75rem; border:none; border-radius:8px; font-size:1rem; cursor:pointer; transition:background 0.3s;}
.contact-form button:hover {background:#1D4ED8;}

/* Footer */
footer {text-align:center; padding:2rem 1rem; color:#9CA3AF; font-size:0.875rem;}

/* Smooth scroll */
html {scroll-behavior:smooth;}

/* Responsive */
@media(max-width:768px){
  .hero h1 {font-size:2rem;}
  .hero p {font-size:1rem;}
}
</style> </head> <body> <header> <nav> <div class="logo">AVB Service</div> <ul> <li><a href="#about">About us</a></li> <li><a href="#services">Services</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </header>