/* =========================
   styles.css (completo)
========================= */
:root{
  --text:#0f172a;
  --muted:#64748b;

  --gold:#d4af37;
  --gold2:#caa32e;

  --primary:#0ea5e9;
  --primary2:#0284c7;

  --soft:#f6f7fb;
  --border:rgba(15, 23, 42, .08);

  --radius:16px;
  --shadow:0 14px 40px rgba(2, 6, 23, .14);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.5;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.container{
  width:min(1140px, 92%);
  margin-inline:auto;
}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;
  left:-999px;
  top:10px;
  background:#000;
  color:#fff;
  padding:.6rem 1rem;
  border-radius:10px;
  z-index:9999;
}
.skip-link:focus{ left:10px; }

/* =========================
   Header / Topbar
========================= */
.header{
  position:sticky;
  top:0;
  z-index:50;
  background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}

.topbar{
  background:#0b1220;
  color:rgba(255,255,255,.92);
  font-size:.92rem;
}
.topbar__inner{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.45rem 0;
}
.topbar__left, .topbar__right{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  align-items:center;
}
.topbar__link{ opacity:.92; }
.topbar__badge{
  background:rgba(255,255,255,.12);
  padding:.2rem .6rem;
  border-radius:999px;
  font-size:.86rem;
}

/* =========================
   Nav
========================= */
.nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:.9rem 0;
  gap:1rem;
  position:relative; /* per menu mobile assoluto */
}

.brand{
  display:flex;
  align-items:center;
  gap:.75rem;
}

.brand__logo{
  width:46px;
  height:46px;

  /* ✅ riempi il box e zooma */
  object-fit:cover;

  /* ✅ PC zoom logo */
  transform: scale(1.60);
  transform-origin:center;

  /* ✅ un po’ più a sinistra */
  margin-left:-10px;
}

.brand__name{
  font-weight:900;
  letter-spacing:.12em;
  font-size:1rem;
}
.brand__tagline{
  font-size:.88rem;
  color:var(--muted);
}

.nav__menu{
  display:flex;
  align-items:center;
  gap:1rem;
}
.nav__link{
  color:rgba(15,23,42,.86);
  font-weight:600;
  font-size:.95rem;
  padding:.45rem .5rem;
  border-radius:10px;
}
.nav__link:hover{ background:rgba(2,132,199,.06); }

.nav__toggle{
  display:none;
  border:1px solid rgba(15,23,42,.16);
  background:#fff;
  padding:.5rem .65rem;
  border-radius:12px;
  cursor:pointer;
}

/* =========================
   Buttons
========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  padding:.75rem 1.05rem;
  border-radius:999px;
  font-weight:800;
  border:1px solid transparent;
  transition:.2s ease;
  white-space:nowrap;
}

.btn--gold{
  background:linear-gradient(180deg,var(--gold),var(--gold2));
  color:#111;
}
.btn--gold:hover{ filter:brightness(.98); transform:translateY(-1px); }

.btn--primary{
  background:linear-gradient(180deg,var(--primary),var(--primary2));
  color:#fff;
}
.btn--primary:hover{ filter:brightness(.98); transform:translateY(-1px); }

.btn--ghost{
  background:transparent;
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
}
.btn--ghost:hover{ background:rgba(255,255,255,.08); }

.w-100{ width:100%; }

.link{ color:var(--primary2); font-weight:800; }
.muted{ color:var(--muted); }
.small{ font-size:.92rem; }

/* =========================
   Hero
========================= */
.hero{
  position:relative;
  overflow:hidden;
  padding:5rem 0 3.2rem;
  background:#070a12;
  color:#fff;
  min-height:520px;
}

.hero__bg{
  position:absolute;
  inset:0;
  background-image:url("assets/hero-consulenza.jpg");
  background-size:cover;
  background-repeat:no-repeat;

  /* ✅ PERFETTO SU PC */
  background-position:center 10%;

  transform:scale(1);
  z-index:0;
}

.hero__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 18% 25%, rgba(2,132,199,.16), transparent 60%),
    linear-gradient(180deg, rgba(7,10,18,.28), rgba(7,10,18,.82));
}

.hero__inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:2.2rem;
  align-items:start;
}

.pill{
  display:inline-flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.55rem;
  padding:.45rem .8rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.07);
  font-weight:700;
  font-size:.92rem;
  margin-bottom:1.1rem;
}
.pill__dot{ opacity:.6; }

.hero h1{
  font-size:clamp(2.1rem, 3.6vw, 3.25rem);
  line-height:1.08;
  margin:0 0 .8rem;
  letter-spacing:-.02em;
}

.lead{
  font-size:1.08rem;
  color:rgba(255,255,255,.85);
  max-width:52ch;
}

.hero__actions{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  margin-top:1.2rem;
}

.trustline{
  display:flex;
  gap:.7rem;
  flex-wrap:wrap;
  margin-top:1.4rem;
}
.trustline__item{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  padding:.55rem .75rem;
  border-radius:999px;
  font-weight:700;
  font-size:.9rem;
}

.hero__card{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius);
  padding:1.2rem 1.2rem 1rem;
  box-shadow:0 24px 70px rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
}
.h4{ font-size:1.05rem; margin:.15rem 0 .8rem; font-weight:900; }
.checklist{ margin:0; padding:0 0 0 1rem; }
.checklist li{ margin:.55rem 0; }
.hero__cardActions{ display:grid; gap:.65rem; margin-top:1rem; }

/* =========================
   Sections
========================= */
.section{ padding:4rem 0; }
.section--alt{ background:var(--soft); }

.section__head{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:end;
  margin-bottom:1.6rem;
}
.section__head h2{ margin:0; font-size:1.7rem; }

/* =========================
   Cards / Grid
========================= */
.grid{ display:grid; gap:1rem; }
.grid--4{ grid-template-columns:repeat(4, 1fr); }

.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.1rem;
  box-shadow:0 6px 22px rgba(2,6,23,.06);
}
.card h3{ margin:.2rem 0 .5rem; font-weight:900; }
.card--soft{ background:#fff; border:1px solid rgba(2,6,23,.08); }

/* =========================
   Split
========================= */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.8rem;
  align-items:center;
}
.media{
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.media img{
  width:100%;
  height:360px;
  object-fit:cover;
  object-position:center 75%;
}

.steps{ display:grid; gap:1rem; }
.step{ display:flex; gap:.9rem; align-items:flex-start; }
.step__n{
  width:42px; height:42px;
  display:grid; place-items:center;
  border-radius:999px;
  font-weight:900;
  background:rgba(14,165,233,.12);
  color:var(--primary2);
  border:1px solid rgba(14,165,233,.24);
}
.actions{ display:flex; gap:.75rem; flex-wrap:wrap; margin-top:.8rem; }

.features{ display:grid; gap:.9rem; }
.feature{
  background:#fff;
  border:1px solid rgba(2,6,23,.08);
  border-radius:var(--radius);
  padding:1rem;
}

/* =========================
   Trasparenza
========================= */
.list{ margin:.6rem 0 0; padding-left:1.2rem; }
.list li{ margin:.45rem 0; }

hr{
  border:0;
  border-top:1px solid rgba(2,6,23,.08);
  margin:1rem 0;
}

/* =========================
   CTA (leggibile)
========================= */
.cta{
  padding:4rem 0;
  background:#070a12;
}

.cta__box{
  border-radius:24px;
  padding:2.2rem 2rem;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}

.cta__box .h3{
  color:#fff;
  margin:0 0 .35rem;
}
.cta__box p{
  margin:0;
  color: rgba(255,255,255,.88) !important;
}

.cta__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
}

.cta__box .btn--ghost{
  border-color: rgba(255,255,255,.32);
  color:#fff;
}
.cta__box .btn--ghost:hover{
  background: rgba(255,255,255,.10);
}

/* =========================
   Footer
========================= */
.footer{
  background:#0b1220;
  color:rgba(255,255,255,.9);
  padding:3rem 0 1.25rem;
}

.footer__grid{
  display:grid;
  grid-template-columns:1.2fr .7fr .7fr;
  gap:2rem;
  align-items:start;
}

/* ✅ PC: logo + testo sulla stessa riga */
.footer__grid > div:first-child{
  display:flex;
  align-items:center;
  gap:.9rem;
}

/* ✅ logo footer anche su PC più zoomato */
.footer__logo{
  width:52px;
  height:52px;
  object-fit:cover;
  transform: scale(1.55);
  transform-origin:center;
  margin-left:-12px;
  margin-bottom:0;
}

/* testo senza margini */
.footer__grid > div:first-child p{
  margin:0;
}

.footer__links{
  list-style:none;
  padding:0;
  margin:.8rem 0 0;
  display:grid;
  gap:.5rem;
}
.footer__links a{ opacity:.9; }
.footer__links a:hover{ opacity:1; text-decoration:underline; }


.footer__social{
  display:flex;
  gap:.65rem;
  margin-top:.7rem;
}
.footer__socialLink{
  width:34px;
  height:34px;
  border-radius:10px;
  background:rgba(255,255,255,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .15s ease, background .15s ease;
}
.footer__socialLink:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.16);
}
.footer__socialLink img{
  width:18px;
  height:18px;
  object-fit:contain;
}

.footer__bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding-top:1.3rem;
  margin-top:2rem;
  border-top:1px solid rgba(255,255,255,.10);
}

/* =========================
   Responsive
========================= */
@media (max-width: 980px){
  .hero__inner{ grid-template-columns:1fr; }
  .hero__card{ max-width:520px; }
  .grid--4{ grid-template-columns:repeat(2, 1fr); }
  .split{ grid-template-columns:1fr; }
  .media img{ height:320px; }

  .cta__box{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (max-width: 720px){

  /* topbar sparisce su mobile */
  .topbar{
    display:none !important;
  }

  /* menu mobile */
  .nav__toggle{ display:inline-flex; }
  .nav__menu{
    position:absolute;
    right:4%;
    top:100%;
    width:min(520px, 92%);
    background:#fff;
    border:1px solid rgba(2,6,23,.10);
    border-radius:18px;
    padding:1rem;
    display:none;
    box-shadow:0 18px 50px rgba(2,6,23,.16);
    flex-direction:column;
    align-items:flex-start;
  }
  .nav__menu.is-open{ display:flex; }

  /* ghost nel menu (sfondo bianco) */
  .btn--ghost{
    border-color:rgba(15,23,42,.16);
    color:rgba(15,23,42,.86);
  }

  /* hero: togli pill */
  .pill{
    display:none !important;
  }

  /* testo piccolo sotto H1 */
  .hero h1::after{
    content:"Consulenza creditizia chiara e su misura";
    display:block;
    margin-top:.5rem;
    font-size:.95rem;
    font-weight:700;
    letter-spacing:.01em;
    color: rgba(255,255,255,.82);
  }

  /* hero più compatta */
  .hero{
    padding:3.6rem 0 2.4rem;
    min-height:0;
  }

  /* overlay più scuro su mobile */
  .hero__bg::after{
    background:
      radial-gradient(900px 520px at 18% 25%, rgba(2,132,199,.10), transparent 60%),
      linear-gradient(180deg, rgba(7,10,18,.50), rgba(7,10,18,.88));
  }

  /* bottoni hero in colonna */
  .hero__actions{
    flex-direction:column;
    gap:.6rem;
    align-items:stretch;
  }
  .hero__actions .btn{
    width:100%;
    justify-content:center;
  }

  /* bottone "Chiama ora" verde */
  .hero__actions a.btn--ghost[href^="tel:"]{
    border:2px solid #22c55e !important;
    color:#fff !important;
    background:rgba(34,197,94,.10) !important;
  }
  .hero__actions a.btn--ghost[href^="tel:"]:hover{
    background:rgba(34,197,94,.16) !important;
  }

  /* CTA: togli Contatti */
  .cta__actions a.btn--ghost[href="contatti.html"]{
    display:none !important;
  }

  /* header sezioni: ordinato */
  .section__head{
    flex-direction:column;
    align-items:flex-start;
    gap:.75rem;
  }
  .section__head > a.btn{
    width:100%;
    justify-content:center;
  }

  /* servizi 1 colonna */
  .grid--4{
    grid-template-columns:1fr;
  }

  /* footer: 1 colonna */
  .footer__grid{
    grid-template-columns:1fr;
  }

  /* logo footer mobile più zoom */
  .footer__logo{
    transform: scale(1.65);
    margin-left:-14px;
  }
}











/* =========================
   FIX RIQUADRI FORM (INPUT/SELECT/TEXTAREA)
   Incolla in fondo a styles.css
   ========================= */

.form .field{
  margin-bottom: 14px;
}

.form .label{
  display:block;
  margin-bottom: 8px;
  font-weight: 600;
  line-height: 1.2;
}

/* riquadri visibili */
.input, .select, .textarea{
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 16px;
  line-height: 1.25;
  outline: none;
}

/* textarea altezza comoda */
.textarea{
  min-height: 120px;
  resize: vertical;
}

/* focus bello e chiaro */
.input:focus, .select:focus, .textarea:focus{
  border-color: rgba(0,0,0,.35);
  box-shadow: 0 0 0 4px rgba(0,0,0,.06);
}

/* placeholder leggibile */
.input::placeholder, .textarea::placeholder{
  color: rgba(0,0,0,.45);
}

/* griglia due colonne (se non già presente) */
.two-col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 720px){
  .two-col{
    grid-template-columns: 1fr;
  }
  .input, .select, .textarea{
    min-height: 48px; /* touch friendly */
  }
}

/* HERO box più grande e professionale */
.hero-box{
  max-width: 980px;              /* più grande del container classico */
  padding: 28px 28px;
  margin-top: 10px;

  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);

  /* colorazione diversa: box scuro/blue elegante sopra l’hero */
  background: linear-gradient(
    135deg,
    rgba(10, 22, 43, .72),
    rgba(20, 40, 70, .55)
  );

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  box-shadow: 0 14px 40px rgba(0,0,0,.28);
}

/* Titolo e testo più “brand” */
.hero-title{
  margin: 10px 0 8px;
  letter-spacing: .4px;
}

.hero-lead{
  margin: 0;
  max-width: 72ch;
  color: rgba(255,255,255,.88);
  line-height: 1.55;
}

/* Breadcrumbs più puliti e leggibili */
.breadcrumbs{
  display: inline-flex;
  gap: 10px;
  align-items: center;

  padding: 8px 12px;
  border-radius: 999px;

  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);

  font-size: .95rem;
}

.breadcrumbs a{
  color: rgba(255,255,255,.92);
  text-decoration: none;
}

.breadcrumbs a:hover{
  text-decoration: underline;
}

.breadcrumbs span{
  color: rgba(255,255,255,.65);
}

.breadcrumbs__current{
  color: rgba(255,255,255,.92);
  font-weight: 600;
}

/* Responsive: box pieno su mobile */
@media (max-width: 640px){
  .hero-box{
    padding: 18px 16px;
    border-radius: 16px;
  }
}
/* Partner (Fucino Finance) */
.partner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.partner__logo{
  width:min(280px, 100%);
  max-width:280px;
  height:auto;
  display:block;
  margin:0 auto;
}
.partner__text{
  margin:0;
  max-width:78ch;
  text-align:left;
}

/* === SEO v10 UI fixes (ghost buttons) === */
.btn--ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border:1px solid currentColor;
  background: transparent;
  opacity:1;
  text-decoration:none;
}
.btn--ghost:hover{
  background: rgba(0,0,0,.06);
}
@media (min-width: 992px){
  .btn--ghost{ color: inherit; }
}


/* === SEO v13 form: prefisso + numero === */
.phone-row{
  display:flex;
  gap:10px;
  align-items:stretch;
}
.phone-row select{
  flex: 0 0 110px;
}
.phone-row input{
  flex: 1 1 auto;
}
@media (max-width: 520px){
  .phone-row{
    flex-direction:column;
  }
  .phone-row select{
    flex: 1 1 auto;
    width:100%;
  }
}


/* === SEO v15: unisci prefisso + numero (stile unico) === */
.phone-row--group{
  gap:0;
}
.phone-row--group .input{
  border-radius: 14px; /* fallback; if your theme overrides, it will still look cohesive */
}
.phone-row--group select.input{
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.phone-row--group input.input{
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 0; /* elimina la linea tra select e input */
}
/* Focus: evidenzia tutto il gruppo */
.phone-row--group:focus-within select.input,
.phone-row--group:focus-within input.input{
  border-color: currentColor;
}
@media (max-width: 520px){
  .phone-row--group{
    gap:10px; /* su mobile tornano separati e comodi */
  }
  .phone-row--group select.input,
  .phone-row--group input.input{
    border-radius: 14px;
    border-left: 1px solid currentColor; /* reset */
  }
}


/* === SEO v16: prefisso più compatto === */
.phone-row--group select.input{
  flex: 0 0 84px; /* meno spazio per +39 */
  padding-left: 12px;
  padding-right: 10px;
}
.phone-row--group select.input{
  text-align: center;
}
@media (max-width: 520px){
  .phone-row--group select.input{
    flex: 1 1 auto;
  }
}