@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* Minimal premium style - Infissi & Posa */
:root{
  --bg: #f6f7fb;
  --panel: rgba(255,255,255,.82);
  --panel2: rgba(255,255,255,.60);
  --txt: #0f172a;
  --mut: #475569;
  --line: rgba(15,23,42,.12);
  --acc: #f59e0b; /* amber = edilizia */
  --acc2: #2563eb; /* blue = affidabilità */
  --shadow: 0 12px 30px rgba(2,6,23,.10);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg,#ffffff 0%, var(--bg) 70%);
  color: var(--txt);
}

.wrap{max-width:1120px;margin:0 auto;padding:0 18px}
a{color:inherit;text-decoration:none}
code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: .95em}

.header{
  position: sticky; top:0; z-index:50;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 0}
.brand{display:flex;flex-direction:column;gap:2px}
.brand__name{font-weight:900;letter-spacing:.2px}
.brand__tag{font-size:12px;color:var(--mut);font-weight:700}

.nav__links{display:flex;gap:16px;flex-wrap:wrap;color:var(--mut);font-weight:700;font-size:14px}
.nav__links a:hover{color:var(--txt)}
.nav__cta{display:flex;gap:10px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 14px;border-radius:14px;font-weight:900;
  border:1px solid transparent;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:active{transform: translateY(1px)}
.btn--primary{background: var(--acc); color:#06110a}
.btn--ghost{background: transparent; border-color: var(--line); color: var(--txt)}
.btn--block{width:100%}

.burger{
  display:none;
  width:44px;height:44px;border-radius:14px;
  background:transparent;border:1px solid var(--line); color:var(--txt);
  align-items:center;justify-content:center; gap:4px;
}
.burger span{display:block;width:18px;height:2px;background:var(--txt);border-radius:2px}

.mobile{border-top:1px solid var(--line); padding:14px 0}
.mobile__inner{display:grid;gap:10px}
.mobile__inner a{padding:10px 12px;border-radius:12px;background:rgba(17,24,38,.45);border:1px solid var(--line);color:var(--mut);font-weight:800}
.mobile__inner a:hover{color:var(--txt)}
.mobile__cta{display:flex;gap:10px;margin-top:6px}

.hero{padding:54px 0 26px}
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:start}
.badge{
  display:inline-flex;gap:10px;align-items:center;
  padding:10px 12px;border-radius:999px;
  background: rgba(245,158,11,.10);
  border: 1px solid rgba(245,158,11,.25);
  color: var(--mut);
  font-weight:800;font-size:13px;
}
h1{font-size:46px;line-height:1.03;margin:14px 0 12px}
.accent{color:var(--acc)}
.lead{color:var(--mut);font-size:18px;line-height:1.55;margin:0 0 18px}
.hero__buttons{display:flex;gap:12px;flex-wrap:wrap}

.trust{
  margin-top:18px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
}
.trust__item{
  padding:14px;border-radius:18px;
  background: var(--panel2);
  border:1px solid rgba(34,48,69,.55);
}
.trust__title{font-weight:900;margin-bottom:4px}
.trust__text{color:var(--mut);font-size:13px;line-height:1.4}

.card{
  background: var(--panel);
  border:1px solid var(--line);
  border-radius:20px;
  padding:18px;
  box-shadow: var(--shadow);
}
.card__title{margin:0;font-size:20px}
.card__sub{margin:8px 0 12px;color:var(--mut);line-height:1.4}

.form{display:grid;gap:10px}
label span{display:block;color:var(--mut);font-weight:800;font-size:12px;margin-bottom:6px}
input,textarea{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1.5px solid transparent;
  background:#ffffff;
  color: var(--txt);
  outline:none;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  background-image:
    linear-gradient(#fff,#fff),
    linear-gradient(90deg, var(--acc), var(--acc2));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
textarea{min-height:110px;resize:vertical}
input:focus,textarea:focus{border-color: rgba(74,222,128,.55)}

.section{padding:34px 0}
.section--alt{background: rgba(255,255,255,.02); border-top:1px solid rgba(34,48,69,.35); border-bottom:1px solid rgba(34,48,69,.35)}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.section__head h2{margin:0;font-size:28px}
.section__head p{margin:0;color:var(--mut);max-width:680px;line-height:1.45}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mini{
  background: var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
}
.mini h3{margin:0 0 8px;font-size:16px}
.mini p{margin:0;color:var(--mut);line-height:1.5;font-size:14px}

.ctaStrip{
  margin-top:14px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px 16px;border-radius:18px;
  background: rgba(74,222,128,.10);
  border:1px solid rgba(74,222,128,.30);
}
.ctaStrip b{display:block}
.ctaStrip span{display:block;color:var(--mut);font-weight:700;font-size:13px;margin-top:2px}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.step{
  background: var(--panel);
  border:1px solid var(--line);
  border-radius:18px;padding:16px
}
.step__n{
  width:34px;height:34px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(74,222,128,.14);
  border:1px solid rgba(74,222,128,.35);
  color: var(--acc);font-weight:900;margin-bottom:10px
}
.step h3{margin:0 0 8px;font-size:16px}
.step p{margin:0;color:var(--mut);line-height:1.5;font-size:14px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.panel{
  background: var(--panel);
  border:1px solid var(--line);
  border-radius:18px;padding:16px
}
.panel h3{margin:0 0 10px}
.panel ul{margin:0;padding-left:18px;color:var(--mut);line-height:1.6}
.panel li{margin:6px 0}

.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.shot{
  margin:0;
  background: var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
}
.shot img{display:block;width:100%;height:220px;object-fit:cover}
.shot figcaption{padding:10px 12px;color:var(--mut);font-weight:800;font-size:12px}

.faq{display:grid;gap:10px}
details{
  background: var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px 14px;
}
summary{cursor:pointer;font-weight:900}
details p{margin:10px 0 0;color:var(--mut);line-height:1.5}

.contact{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact__card{
  background: var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
}
.contact__row{
  display:flex;justify-content:space-between;gap:10px;
  padding:10px 0;border-bottom:1px solid rgba(34,48,69,.35);
  color: var(--mut);
}
.contact__row a{color:var(--txt);font-weight:900}
.contact__buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

.mapbox{
  background: var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
}
.placeholderMap{
  margin-top:10px;
  height:320px;border-radius:16px;
  border:1px dashed rgba(34,48,69,.8);
  display:flex;align-items:center;justify-content:center;
  color:var(--mut);font-weight:900
}

.fineprint{color:var(--mut);font-size:12px;line-height:1.4;margin:10px 0 0}
.footer{padding:22px 0}
.footer__inner{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.footer__links{display:flex;gap:12px}
.footer__links a{color:var(--mut);font-weight:800}
.footer__links a:hover{color:var(--txt)}

.floatWA{
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  background: var(--acc2); color:#ffffff;
  padding:12px 14px;border-radius:999px;
  font-weight:900; box-shadow: var(--shadow);
  border: 1px solid rgba(15,23,42,.12);
}

@media (max-width: 980px){
  .nav__links{display:none}
  .burger{display:flex}
  .hero__grid{grid-template-columns:1fr}
  h1{font-size:20px}
  .trust{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .shot img{height:240px}
  .contact{grid-template-columns:1fr}
}

/* Headings polish */
.section__head h2{
  position: relative;
  letter-spacing: .2px;
}
.section__head h2::after{
  content:"";
  display:block;
  width:72px;
  height:4px;
  margin-top:10px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--acc), var(--acc2));
  opacity: .9;
}
.mini h3, .step h3, .panel h3, .contact__card h3, .mapbox h3{
  color: var(--txt);
}

/* Card top accent */
.card, .mini, .step, .panel, .shot, details, .contact__card, .mapbox{
  position: relative;
  overflow: hidden; /* IMPORTANT: keeps the top bar inside rounded corners */
}
.card::before, .mini::before, .step::before, .panel::before, .contact__card::before, .mapbox::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:100%; height:3px;
  border-radius: inherit; /* follows each card's own radius */
  background: linear-gradient(90deg, var(--acc), var(--acc2));
  opacity:.55;
  pointer-events:none;
}
/* Shots & details need their own pseudo-elements too */
.shot::before, details::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:100%; height:3px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--acc), var(--acc2));
  opacity:.55;
  pointer-events:none;
}

@media (min-width: 981px){
  .hero__grid{grid-template-columns: 1.2fr .8fr;}
  .hero__card{max-width: 420px; justify-self: end;}
  h1{max-width: 680px;}
  .lead{max-width: 640px;}
}

input:focus, textarea:focus{
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(245,158,11,.15);
}


/* Subtitle under section titles */
.section__subtitle{
  margin-top: 10px;
  max-width: 720px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--mut);
}

/* More breathing space between sections */
.section{
  padding: 56px 0;
}

.cards{
  margin-top: 24px;
}

.steps{
  margin-top: 24px;
}

.gallery{
  margin-top: 24px;
}

.contact{
  margin-top: 24px;
}


/* Button hover micro-interaction */
.btn{
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.btn:hover{
  transform: scale(1.05);
  box-shadow: 0 10px 25px rgba(0,0,0,.12);
}

.btn:active{
  transform: scale(0.98);
}


/* Stronger hover emphasis (still professional) */
.btn--primary{
  position: relative;
  overflow: hidden;
}

.btn--primary::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(120deg, rgba(255,255,255,.35), rgba(255,255,255,0));
  opacity:0;
  transition: opacity .25s ease;
}

.btn--primary:hover{
  transform: scale(1.08);
  box-shadow: 0 18px 35px rgba(0,0,0,.18);
}

.btn--primary:hover::after{
  opacity:1;
}

.btn--ghost:hover{
  transform: scale(1.04);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}