:root { 
--dark:#111111;
--anthracite:#1c1c1c;
--anthracite-light:#2b2b2b;
--yellow:#f5c400;
--yellow-soft:#ffdd33;
--white:#ffffff;
--muted:#c9c9c9;
--green:#25d366;
--border:rgba(255,255,255,.12);
--shadow:0 25px 80px rgba(0,0,0,.45);
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:Arial,Helvetica,sans-serif;
background:var(--dark);
color:var(--white);
line-height:1.6;
}

a{
color:inherit;
}

.container{
width:min(1180px,92%);
margin:0 auto;
}


/* ================= HEADER ================= */

.header{
position:sticky;
top:0;
z-index:999;
background:rgba(17,17,17,.92);
backdrop-filter:blur(14px);
border-bottom:1px solid var(--border);
}

.nav-bar{
min-height:82px;
display:flex;
align-items:center;
justify-content:space-between;
}

.brand{
display:flex;
align-items:center;
gap:14px;
text-decoration:none;
}

.brand-mark{
width:52px;
height:52px;
background:linear-gradient(135deg,var(--yellow),var(--yellow-soft));
color:#111;
display:grid;
place-items:center;
border-radius:14px;
font-weight:900;
}

.brand strong{
display:block;
color:var(--yellow);
font-size:21px;
}

.brand small{
color:var(--muted);
font-size:12px;
}

.nav{
display:flex;
gap:26px;
align-items:center;
}

.nav a{
text-decoration:none;
font-weight:700;
font-size:14px;
transition:.25s;
}

.nav a:hover{
color:var(--yellow);
}

.nav-cta{
background:var(--yellow);
color:#111!important;
padding:12px 18px;
border-radius:999px;
}


/* ================= BOTTONI ================= */

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:999px;
padding:15px 24px;
font-weight:900;
text-decoration:none;
transition:.25s;
}

.btn-primary{
background:var(--yellow);
color:#111;
}

.btn-primary:hover{
background:white;
transform:translateY(-2px);
}

.btn-whatsapp{
background:var(--green);
color:white;
}


/* ================= HERO HOME ================= */

.hero{
position:relative;
min-height:86vh;
display:flex;
align-items:center;
background:url("logo.png") center/cover;
overflow:hidden;
}

.hero-overlay{
position:absolute;
inset:0;
background:
radial-gradient(circle at 70% 30%,rgba(245,196,0,.22),transparent 32%),
linear-gradient(90deg,rgba(0,0,0,.95),rgba(0,0,0,.4));
}

.hero-content{
position:relative;
z-index:2;
display:grid;
grid-template-columns:1.3fr .7fr;
gap:45px;
padding:90px 0;
align-items:center;
}

.eyebrow{
color:var(--yellow);
font-size:13px;
font-weight:900;
letter-spacing:2px;
text-transform:uppercase;
margin-bottom:14px;
}

.hero h1{
font-size:clamp(48px,8vw,96px);
line-height:.95;
letter-spacing:-4px;
margin-bottom:25px;
}

.hero-description{
font-size:20px;
color:#eee;
margin-bottom:18px;
}

.hero-actions{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:25px;
}


/* CARD HERO */

.hero-card{
background:rgba(28,28,28,.85);
border:1px solid var(--border);
border-radius:28px;
padding:30px;
box-shadow:var(--shadow);
}

.hero-card h3{
color:var(--yellow);
font-size:28px;
}

.hero-card p{
color:var(--muted);
margin:15px 0;
}

.hero-card-row{
display:grid;
gap:12px;
}

.hero-card-row span{
background:rgba(255,255,255,.06);
padding:14px;
border-radius:14px;
}


/* ================= STATS ================= */

.stats{
background:linear-gradient(135deg,var(--yellow),var(--yellow-soft));
color:#111;
}

.stats-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
}

.stats-grid div{
padding:32px 20px;
}

.stats-grid strong{
font-size:34px;
display:block;
font-weight:900;
}


/* ================= SERVIZI HOME ================= */

.services-section{
padding:95px 0;
background:var(--anthracite);
}

.section-title{
margin-bottom:45px;
max-width:760px;
}

.section-title h2{
font-size:clamp(34px,5vw,58px);
line-height:1;
}

.section-title p{
color:var(--muted);
font-size:18px;
margin-top:15px;
}

.services-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:26px;
}

.service-card{
position:relative;
height:360px;
border-radius:26px;
overflow:hidden;
text-decoration:none;
box-shadow:var(--shadow);
}

.service-card img{
position:absolute;
width:100%;
height:100%;
object-fit:cover;
transition:.45s;
}

.service-card:after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(to top,#000,transparent);
}

.service-card:hover img{
transform:scale(1.08);
}

.service-content{
position:relative;
z-index:2;
height:100%;
display:flex;
flex-direction:column;
justify-content:flex-end;
padding:26px;
}

.service-content h3{
color:var(--yellow);
font-size:24px;
}

.service-content p{
color:#eee;
}

.service-content span{
margin-top:15px;
background:var(--yellow);
color:#111;
width:max-content;
padding:10px 15px;
border-radius:999px;
font-weight:900;
}
/* ================= CONTATTI HOME ================= */

.contact-section {
padding: 90px 0;
background: var(--dark);
}

.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 38px;
align-items: start;
}

.contact-section h2 {
font-size: clamp(34px,5vw,58px);
line-height: 1;
letter-spacing: -2px;
margin-bottom: 18px;
}

.contact-section p {
color: var(--muted);
font-size: 18px;
}

.contact-box {
background: var(--anthracite);
border: 1px solid var(--border);
border-radius: 28px;
padding: 28px;
box-shadow: var(--shadow);
display: grid;
gap: 14px;
}

.contact-box a {
text-decoration: none;
background: rgba(255,255,255,.06);
border: 1px solid var(--border);
padding: 16px;
border-radius: 16px;
font-weight: 800;
transition: .25s;
}

.contact-box a:hover {
background: var(--yellow);
color: #111;
}


/* ================= FOOTER ================= */

.footer {
background: #080808;
border-top: 1px solid var(--border);
padding: 36px 0;
color: var(--muted);
}

.footer-grid {
display: flex;
justify-content: space-between;
gap: 25px;
}

.footer h3 {
color: var(--yellow);
margin-bottom: 8px;
}

.footer a {
color: var(--yellow);
text-decoration: none;
}


/* ================= WHATSAPP FISSO ================= */

.floating-whatsapp {
position: fixed;
right: 22px;
bottom: 22px;
width: 62px;
height: 62px;
background: var(--green);
color: white;
display: grid;
place-items: center;
border-radius: 50%;
text-decoration: none;
font-size: 28px;
box-shadow: 0 15px 40px rgba(37,211,102,.35);
z-index: 1000;
}


/* ================= PAGINA SERVIZIO ================= */

.service-page {
background: var(--anthracite);
}

.service-hero {
padding: 85px 0;
min-height: 80vh;
}

.back-link {
display: inline-block;
color: var(--yellow);
text-decoration: none;
font-weight: 900;
margin-bottom: 30px;
}

.service-detail-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 46px;
align-items: center;
}

.service-detail-grid h1 {
font-size: clamp(40px,6vw,70px);
line-height: 1;
letter-spacing: -2px;
color: var(--yellow);
margin-bottom: 25px;
}

.service-description {
font-size: 20px;
color: #eeeeee;
margin-bottom: 28px;
}

.service-image-box {
border-radius: 30px;
overflow: hidden;
box-shadow: var(--shadow);
border: 1px solid var(--border);
}

.service-image-box img {
width: 100%;
height: 560px;
object-fit: cover;
display: block;
}

.extra-box {
margin: 28px 0;
}

.extra-box h2 {
color: var(--yellow);
margin-bottom: 10px;
}

.extra-box p {
color: var(--muted);
margin-bottom: 12px;
}

.service-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}


/* ================= FORM CONTATTO RICCARDI PREMIUM ================= */

.service-form-section {
padding: 90px 0 105px;
background:
radial-gradient(circle at top right, rgba(245,196,0,.08), transparent 30%),
var(--anthracite);
}

.service-form-box {
background: linear-gradient(145deg, #202020, #111111);
border: 1px solid rgba(245,196,0,.20);
border-radius: 30px;
padding: 42px;
box-shadow: 0 25px 80px rgba(0,0,0,.55);
}

.service-form-title {
max-width: 800px;
margin-bottom: 34px;
}

.service-form-title h2 {
font-size: clamp(34px,5vw,58px);
line-height: 1;
letter-spacing: -2px;
color: var(--yellow);
margin-bottom: 16px;
}

.service-form-title p {
color: var(--muted);
font-size: 18px;
}

.service-contact-form {
display: grid;
gap: 20px;
}

.form-row {
display: grid;
grid-template-columns: repeat(2,1fr);
gap: 20px;
}

.form-group {
display: grid;
gap: 9px;
}

.form-group label {
font-size: 13px;
font-weight: 900;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--yellow);
}

.form-group input,
.form-group textarea {
width: 100%;
background: #1b1b1b;
border: 1px solid rgba(255,255,255,.12);
border-radius: 18px;
padding: 18px;
font-size: 16px;
color: white;
font-family: Arial, Helvetica, sans-serif;
transition: .25s ease;
outline: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
color: #777;
}

.form-group input:hover,
.form-group textarea:hover {
border-color: rgba(245,196,0,.45);
}

.form-group input:focus,
.form-group textarea:focus {
border-color: var(--yellow);
background: #222;
box-shadow: 0 0 0 3px rgba(245,196,0,.13);
}

.form-group textarea {
min-height: 160px;
resize: vertical;
}

.privacy-check {
background: #1b1b1b;
border: 1px solid rgba(255,255,255,.10);
border-radius: 18px;
padding: 16px;
display: flex;
gap: 12px;
align-items: flex-start;
color: #cfcfcf;
font-size: 14px;
}

.privacy-check input {
margin-top: 5px;
accent-color: var(--yellow);
}

.form-submit-btn {
width: fit-content;
background: linear-gradient(135deg, var(--yellow), var(--yellow-soft));
color: #111;
border: none;
border-radius: 999px;
padding: 17px 34px;
font-size: 16px;
font-weight: 900;
cursor: pointer;
transition: .25s ease;
box-shadow: 0 12px 30px rgba(245,196,0,.22);
}

.form-submit-btn:hover {
background: white;
transform: translateY(-2px);
box-shadow: 0 18px 40px rgba(245,196,0,.35);
}

.form-submit-btn:disabled {
opacity: .6;
cursor: not-allowed;
}

.form-message {
font-weight: 900;
padding: 14px 16px;
border-radius: 14px;
width: max-content;
}

.form-message:empty {
display: none;
}

.form-message.success {
color: #25d366;
background: rgba(37,211,102,.12);
border: 1px solid rgba(37,211,102,.25);
}

.form-message.error {
color: #ff6b6b;
background: rgba(255,107,107,.12);
border: 1px solid rgba(255,107,107,.25);
}


/* ================= RESPONSIVE ================= */

@media (max-width: 980px) {

.nav {
gap: 14px;
}

.hero-content,
.contact-grid,
.service-detail-grid {
grid-template-columns: 1fr;
}

.services-grid {
grid-template-columns: repeat(2,1fr);
}

.stats-grid {
grid-template-columns: repeat(2,1fr);
}

.service-image-box img {
height: 420px;
}

}

@media (max-width: 680px) {

.nav-bar {
flex-direction: column;
padding: 18px 0;
gap: 18px;
}

.nav {
flex-wrap: wrap;
justify-content: center;
}

.hero {
min-height: auto;
}

.hero-content {
padding: 65px 0;
}

.hero h1 {
letter-spacing: -2px;
}

.hero-description {
font-size: 17px;
}

.services-grid {
grid-template-columns: 1fr;
}

.stats-grid {
grid-template-columns: 1fr;
}

.footer-grid {
flex-direction: column;
}

.service-image-box img {
height: 320px;
}

.service-form-box {
padding: 26px;
border-radius: 24px;
}

.form-row {
grid-template-columns: 1fr;
}

.form-submit-btn {
width: 100%;
}

.form-message {
width: 100%;
}

}