/* ============================================================
   Fortunato Assicurazioni — "Lo scudo sui tuoi risparmi"
   Insurtech-calm, moderno e caldo. Mobile-first.
   ============================================================ */

:root{
  /* palette derivata dal logo, deepened per contrasto AA */
  --ink:        #0f2436;
  --ink-soft:   #22394a;
  --primary:    #176a9e;
  --primary-strong:#125a86;
  --cyan:       #2ab3d9;
  --lime:       #7aa225;
  --lime-bright:#a8cb38;
  --coral:      #ef6a4e;

  --paper:      #f8faf9;
  --surface:    #fdfeff;   /* near-white tinto verso il brand (niente bianco puro) */
  --white:      #f6f9fb;   /* near-white per testo/accenti su fondo scuro */
  --cloud:      #e9f1f6;
  --mist:       #eef4ee;
  --line:       #d7e2e8;
  --line-soft:  #e6edf1;
  --muted:      #4d5f6b;

  --font-display:'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:   'Hanken Grotesk', system-ui, sans-serif;

  --wrap: 1140px;
  --pad: 1.25rem;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow-sm: 0 1px 2px rgba(15,36,54,.05), 0 6px 16px rgba(15,36,54,.06);
  --shadow-md: 0 8px 30px rgba(15,36,54,.10);
  --shadow-lg: 0 24px 60px rgba(15,36,54,.16);
  --header-h: 68px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--font-body);
  font-size:1.0625rem;       /* 17px */
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4{ font-family:var(--font-display); line-height:1.08; margin:0; letter-spacing:-.015em; font-weight:700; }
p{ margin:0; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

a{ color:var(--primary); text-decoration:none; }

:focus-visible{ outline:3px solid var(--coral); outline-offset:3px; border-radius:4px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--white); padding:.7rem 1.1rem; border-radius:0 0 10px 0; font-weight:600;
}
.skip-link:focus{ left:0; }

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-body); font-weight:600; font-size:1rem;
  padding:.95rem 1.5rem; border-radius:999px; border:2px solid transparent;
  min-height:48px; cursor:pointer; transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  text-align:center;
}
.btn-primary{ background:var(--primary); color:var(--white); box-shadow:0 8px 20px rgba(23,106,158,.28); }
.btn-primary:hover{ background:var(--primary-strong); transform:translateY(-2px); box-shadow:0 12px 26px rgba(23,106,158,.34); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--primary); color:var(--primary); background:var(--surface); transform:translateY(-2px); }

/* ---------------- Brand ---------------- */
.brand{ display:inline-flex; align-items:center; gap:.6rem; color:var(--ink); }
.brand-mark{ flex:0 0 auto; }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-name{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; letter-spacing:-.02em; }
.brand-sub{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--primary); font-weight:600; margin-top:.18rem; }

/* ---------------- Header ---------------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(248,250,249,.92);
  border-bottom:1px solid var(--line-soft);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; min-height:var(--header-h); }

.nav-desktop{ display:none; align-items:center; gap:1.7rem; }
.nav-desktop a{ color:var(--ink); font-weight:500; font-size:.98rem; position:relative; }
.nav-desktop a:not(.nav-cta):hover{ color:var(--primary); }
.nav-desktop a:not(.nav-cta)::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--coral);
  transform:scaleX(0); transform-origin:left; transition:transform .22s ease;
}
.nav-desktop a:not(.nav-cta):hover::after{ transform:scaleX(1); }
.nav-cta{ background:var(--ink); color:var(--white) !important; padding:.55rem 1.1rem; border-radius:999px; font-weight:600; }
.nav-cta:hover{ background:var(--primary); }

.hamburger{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:48px; height:48px; padding:0 11px; background:transparent; border:1px solid var(--line);
  border-radius:12px; cursor:pointer; z-index:120;
}
.hamburger span{ display:block; height:2.5px; width:100%; background:var(--ink); border-radius:2px; transition:transform .3s ease, opacity .2s ease; }
.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* ---------------- Mobile drawer ---------------- */
.mobile-drawer{
  position:fixed; top:0; left:0; right:0; bottom:0; z-index:90;
  background:rgba(15,36,54,.98);
  transform:translateY(-100%);
  visibility:hidden;
  transition:transform .38s cubic-bezier(.4,0,.2,1), visibility .38s;
  display:flex; align-items:center; justify-content:center;
}
.mobile-drawer.is-open{ transform:translateY(0); visibility:visible; }
.mobile-drawer nav{ display:flex; flex-direction:column; gap:.4rem; text-align:center; }
.mobile-drawer nav a{
  color:#eaf2f7; font-family:var(--font-display); font-weight:600; font-size:1.7rem;
  padding:.6rem 2rem; border-radius:12px; letter-spacing:-.01em;
}
.mobile-drawer nav a:hover,.mobile-drawer nav a:focus{ color:var(--white); background:rgba(255,255,255,.07); }
body.menu-open{ overflow:hidden; }

/* ---------------- Section rhythm ---------------- */
main section{ padding-block:clamp(3.5rem, 8vw, 6.5rem); }
.section-head{ max-width:680px; margin-bottom:2.6rem; }
.section-tag{
  display:inline-block; font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--primary); margin:0 0 .9rem;
}
.section-tag.tag-on-dark{ color:var(--cyan); }
.section-head h2,.principio h2,.metodo h2,.local h2{ font-size:clamp(1.7rem, 4.4vw, 2.7rem); }
.section-intro{ color:var(--muted); font-size:1.1rem; margin-top:1rem; }

/* ---------------- Hero ---------------- */
.hero{ position:relative; padding-top:clamp(2.5rem,6vw,4rem); padding-bottom:clamp(3rem,7vw,5rem);
  background:
    radial-gradient(120% 90% at 88% -10%, rgba(42,179,217,.14), transparent 55%),
    radial-gradient(90% 80% at 0% 0%, rgba(168,203,56,.10), transparent 50%),
    var(--paper);
}
.hero-grid{ display:grid; gap:2.5rem; }
.eyebrow{
  display:inline-block; font-size:.86rem; font-weight:600; color:var(--primary);
  background:var(--surface); border:1px solid var(--line); padding:.45rem .95rem; border-radius:999px; margin-bottom:1.3rem;
  box-shadow:var(--shadow-sm);
}
.hero h1{ font-size:clamp(2.15rem, 7.5vw, 4.05rem); font-weight:700; letter-spacing:-.025em; }
.hero-lead{ font-size:clamp(1.05rem,2.4vw,1.28rem); color:var(--ink-soft); margin-top:1.4rem; max-width:34ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2rem; }
.hero-place{ display:flex; align-items:center; gap:.6rem; margin-top:1.8rem; color:var(--muted); font-weight:500; font-size:.98rem; }
.hero-place .dot{ width:9px; height:9px; border-radius:50%; background:var(--lime-bright); box-shadow:0 0 0 4px rgba(168,203,56,.22); flex:0 0 auto; }

.hero-visual{ position:relative; }
.hero-frame{ position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.6); }
.hero-frame img{ width:100%; aspect-ratio:16/11; object-fit:cover; }
.shield-arc{ position:absolute; left:50%; top:8%; transform:translateX(-50%); width:62%; max-width:240px; height:auto; opacity:.9; mix-blend-mode:screen; pointer-events:none; }
.hero-chip{
  position:absolute; left:-.6rem; bottom:-1rem; display:flex; align-items:center; gap:.6rem;
  background:var(--surface); color:var(--ink); padding:.8rem 1rem; border-radius:14px; box-shadow:var(--shadow-md);
  font-size:.86rem; font-weight:600; line-height:1.25; border:1px solid var(--line-soft); max-width:230px;
}
.hero-chip svg{ color:var(--lime); flex:0 0 auto; }

/* ---------------- Trust strip ---------------- */
.trust{ background:var(--ink); color:#eaf2f7; padding-block:clamp(2.2rem,5vw,3rem) !important; }
.trust-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.8rem 1rem; }
.trust-item{ display:flex; flex-direction:column; gap:.35rem; }
.trust-num{ font-family:var(--font-display); font-weight:700; font-size:clamp(2.1rem,6vw,2.9rem); color:var(--lime-bright); line-height:1; letter-spacing:-.02em; }
.trust-lab{ font-size:.92rem; color:#bcd0dd; line-height:1.3; }

/* ---------------- Il principio (dark) ---------------- */
.principio{ background:
   radial-gradient(110% 120% at 100% 0%, rgba(23,106,158,.5), transparent 55%),
   var(--ink); color:#eaf2f7; }
.principio-inner{ max-width:760px; }
.principio h2{ color:var(--white); font-size:clamp(1.9rem,5.2vw,3rem); }
.principio-lead{ color:#c7d8e2; font-size:1.13rem; margin-top:1.3rem; }
.principio-points{ list-style:none; padding:0; margin:2.4rem 0 0; display:grid; gap:1.1rem; }
.principio-points li{ display:flex; gap:.9rem; align-items:flex-start; font-size:1.02rem; color:#dce8ef; }
.principio-points li strong{ color:var(--white); font-weight:700; }
.principio-points svg{ color:var(--lime-bright); flex:0 0 auto; margin-top:.1rem; }

/* ---------------- Coperture ---------------- */
.coperture{ background:var(--paper); }
.focus-grid{ display:grid; gap:1.2rem; margin-bottom:1.4rem; }
.focus-card{
  position:relative; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:1.7rem 1.5rem 1.6rem; box-shadow:var(--shadow-sm); overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.focus-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg,var(--cyan),var(--primary)); }
.focus-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--line); }
.focus-badge{
  position:absolute; top:1.1rem; right:1.1rem; font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--primary-strong); background:var(--cloud); padding:.28rem .6rem; border-radius:999px;
}
.cov-ic{ display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:14px;
  background:linear-gradient(150deg,#eaf6fb,#eef6e6); color:var(--primary); margin-bottom:1.1rem; }
.cov-ic svg{ width:28px; height:28px; }
.focus-card h3{ font-size:1.3rem; margin-bottom:.5rem; }
.focus-card p{ color:var(--muted); font-size:.98rem; }

.cov-list{ list-style:none; padding:0; margin:0; display:grid; gap:1rem; }
.cov-list li{ display:flex; gap:.95rem; align-items:flex-start; background:var(--surface);
  border:1px solid var(--line-soft); border-radius:var(--radius-sm); padding:1.1rem 1.2rem; box-shadow:var(--shadow-sm); }
.cov-list svg{ width:26px; height:26px; color:var(--lime); flex:0 0 auto; margin-top:.15rem; }
.cov-list h4{ font-size:1.02rem; margin-bottom:.2rem; font-family:var(--font-body); font-weight:700; }
.cov-list p{ color:var(--muted); font-size:.92rem; }

/* ---------------- Per chi lavoro ---------------- */
.per-chi{ background:var(--mist); }
.per-chi .section-head h2{ font-size:clamp(1.6rem,4.2vw,2.5rem); max-width:18ch; }
.chi-grid{ display:grid; gap:1.2rem; }
.chi-card{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:1.8rem 1.6rem; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease; }
.chi-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.chi-ic{ display:inline-flex; align-items:center; justify-content:center; width:58px; height:58px; border-radius:50%;
  background:var(--ink); color:var(--lime-bright); margin-bottom:1.2rem; }
.chi-ic svg{ width:30px; height:30px; }
.chi-card h3{ font-size:1.4rem; margin-bottom:.6rem; }
.chi-card p{ color:var(--muted); }

/* ---------------- Metodo ---------------- */
.metodo{ background:var(--paper); }
.metodo-grid{ display:grid; gap:2.4rem; }
.metodo-visual img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow-md); }
.metodo-copy h2{ font-size:clamp(1.7rem,4.6vw,2.7rem); margin-bottom:1.1rem; }
.metodo-copy p{ color:var(--ink-soft); margin-bottom:1rem; }
.metodo-steps{ list-style:none; counter-reset:step; padding:0; margin:1.8rem 0 0; display:grid; gap:1rem; }
.metodo-steps li{ counter-increment:step; position:relative; padding-left:3.2rem; color:var(--muted); font-size:.98rem; }
.metodo-steps li span{ display:block; font-family:var(--font-display); font-weight:700; color:var(--ink); font-size:1.05rem; margin-bottom:.1rem; }
.metodo-steps li::before{
  content:counter(step); position:absolute; left:0; top:0; width:2.3rem; height:2.3rem; border-radius:50%;
  background:var(--cloud); color:var(--primary-strong); font-family:var(--font-display); font-weight:700;
  display:flex; align-items:center; justify-content:center; font-size:1.05rem;
}

/* ---------------- Local ---------------- */
.local{ background:var(--cloud); }
.local-grid{ display:grid; gap:2rem; }
.local-copy h2{ font-size:clamp(1.7rem,4.6vw,2.6rem); margin-bottom:1rem; }
.local-copy p{ color:var(--ink-soft); font-size:1.08rem; }
.local-visual img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow-md); }

/* ---------------- Contatti ---------------- */
.contatti{ position:relative; overflow:hidden; text-align:center;
  background:radial-gradient(120% 120% at 50% -20%, rgba(23,106,158,.55), transparent 60%), var(--ink); color:#eaf2f7; }
.contatti-inner{ position:relative; max-width:760px; }
.contatti-arc{ position:absolute; top:-1rem; left:50%; transform:translateX(-50%); width:min(620px,92%); height:auto; pointer-events:none; opacity:.8; }
.contatti h2{ color:var(--white); font-size:clamp(1.9rem,5.4vw,3rem); }
.contatti-lead{ color:#c7d8e2; font-size:1.13rem; margin:1.2rem auto 0; max-width:46ch; }
.contatti-cards{ display:grid; gap:1rem; margin:2.4rem auto 0; max-width:540px; }
.contact-card{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius);
  padding:1.5rem 1.3rem; display:flex; flex-direction:column; align-items:center; gap:.4rem; }
.contact-ic{ display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%;
  background:rgba(42,179,217,.16); color:var(--cyan); margin-bottom:.4rem; }
.contact-ic svg{ width:24px; height:24px; }
.contact-lab{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:#9fb8c7; font-weight:600; }
.contact-val{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; color:var(--white); overflow-wrap:anywhere; }
.contatti-note{ color:#9fb8c7; font-size:.92rem; margin-top:1.8rem; }

/* ---------------- Footer ---------------- */
.site-footer{ background:#0a1925; color:#aebfca; padding-top:clamp(3rem,6vw,4rem); }
.footer-grid{ display:grid; gap:2.4rem; padding-bottom:2.5rem; }
.footer-brandline{ color:var(--white); }
.footer-brandline .brand-name{ color:var(--white); }
.footer-brandline .brand-sub{ color:var(--cyan); }
.footer-tagline{ margin-top:1rem; font-size:.95rem; max-width:34ch; color:#9fb1bd; }
.footer-social{ display:flex; gap:.7rem; margin-top:1.3rem; }
.social-icon{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.07); color:#cfe0ea; }
.social-icon svg{ width:21px; height:21px; }
.footer-nav,.footer-contacts{ display:flex; flex-direction:column; gap:.55rem; }
.footer-nav h2,.footer-contacts h2{ font-family:var(--font-body); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:#7f95a3; margin:0 0 .5rem; font-weight:700; }
.footer-nav a{ color:#cfe0ea; font-size:.96rem; }
.footer-nav a:hover{ color:var(--white); }
.footer-contacts p{ font-size:.96rem; color:#cfe0ea; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding-block:1.4rem; display:flex; flex-direction:column; gap:.6rem;
  font-size:.85rem; color:#7f95a3; }
.footer-credit a{ color:#cfe0ea; text-decoration:underline; text-underline-offset:2px; }
.footer-credit a:hover{ color:var(--white); }

/* ---------------- Nav: sezione attiva ---------------- */
.nav-desktop a.is-active:not(.nav-cta){ color:var(--primary); }
.nav-desktop a.is-active:not(.nav-cta)::after{ transform:scaleX(1); }

/* ---------------- Mid-page CTA (pannello) ---------------- */
.midcta{ background:var(--paper); }
.midcta-panel{
  position:relative; overflow:hidden; border-radius:var(--radius);
  background:radial-gradient(120% 140% at 90% -20%, rgba(42,179,217,.28), transparent 55%), var(--ink);
  color:var(--white); padding:2.2rem 1.6rem; display:flex; flex-direction:column; gap:1.3rem; box-shadow:var(--shadow-md);
}
.midcta-panel h2{ color:var(--white); font-size:clamp(1.4rem,3.6vw,2rem); }
.midcta-panel p{ color:#c7d8e2; margin-top:.5rem; max-width:42ch; }
.btn-on-dark{ background:var(--white); color:var(--ink); align-self:flex-start; }
.btn-on-dark:hover{ background:var(--lime-bright); color:var(--ink); transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.25); }

/* ---------------- Scroll reveal ---------------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* ============================================================
   BREAKPOINTS
   ============================================================ */
@media (min-width:600px){
  .trust-grid{ grid-template-columns:repeat(4,1fr); }
  .focus-grid{ grid-template-columns:repeat(3,1fr); }
  .cov-list{ grid-template-columns:repeat(2,1fr); }
  .chi-grid{ grid-template-columns:repeat(3,1fr); }
  .contatti-cards{ grid-template-columns:repeat(2,1fr); }
  .footer-bottom{ flex-direction:row; align-items:center; justify-content:space-between; }
}

@media (min-width:860px){
  :root{ --pad:2rem; }
  .nav-desktop{ display:flex; }
  .hamburger{ display:none; }
  .hero-grid{ grid-template-columns:1.05fr .95fr; align-items:center; gap:3.5rem; }
  .hero h1{ letter-spacing:-.03em; }
  .metodo-grid{ grid-template-columns:1fr 1fr; align-items:center; }
  .local-grid{ grid-template-columns:1.15fr .85fr; align-items:center; }
  .cov-list{ grid-template-columns:repeat(3,1fr); }
  .footer-grid{ grid-template-columns:1.4fr .8fr 1fr; gap:3rem; }
  .hero-chip{ left:-1.5rem; }
  .midcta-panel{ flex-direction:row; align-items:center; justify-content:space-between; padding:2.6rem 2.8rem; gap:2rem; }
  .btn-on-dark{ align-self:center; flex:0 0 auto; }
}

@media (min-width:1100px){
  .hero h1{ font-size:4.05rem; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}