:root{
    
    
    /** --------------- GESTIONE FONTS ----------------- */
        
        --font:             'Inter';
        --titoli:           'Sora';
        --hand:             'Barlow';
        
         /** --------------- GESTIONE COLORI ----------------- */
        
        --main:            #153873;
        --second:          #387DC1;
        --green:           #9BC325;
        
        --bianco:           #fff;   
        --nero:             #111;
        
        --second-rgb:       255, 255, 255;
        --green-rgb:        155, 195, 37;
   
        --radius:14px;
  }

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

body{ margin:0; font-family:var(--font); }

  

  .eyebrow{
    font-family:var(--hand);
    font-size:.72rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    display:inline-flex;
    align-items:center;
    gap:.5em;
  }
  .eyebrow::before{
    content:"";
    width:22px;height:1px;
    background:currentColor;
    display:inline-block;
  }
  h1,h2,h3{
    font-family:var(--titoli);
    font-weight:500;
    margin:0;
  }
  
  /*  HERO -------------------------------------------------------------------------------- */

        .hero { position: relative; background: var(--main); color: var(--bianco); overflow: hidden; background-image: url(../img/hero-landing.webp); background-size: cover; height: 80vh; min-height: 700px;  } 
        
        .hero-inner         { position: absolute; bottom: 80px; z-index: 1; max-width: 640px; } 
        .hero .eyebrow      { color: var(--green); margin-bottom: 1.4rem; } 
        
        .hero h1            { font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.12; letter-spacing: -.01em; margin-bottom: 1.1rem; color: #fff; } 
        .hero h1 em         { font-style: italic; color: var(--green); } 
        .hero p.lede        { font-size: 1rem; color: var(--bianco); max-width: 52ch; margin-bottom: 2.2rem; }


  /*  SECTION -------------------------------------------------------------------------------- */
 
          .section-head             { margin-bottom:clamp(36px,6vw,56px); }
          .section-head .eyebrow    { color:var(--green); margin-bottom:.9rem; }
          .section-head h2          { font-size:clamp(1.7rem,3.4vw,2.4rem); line-height:1.2; font-weight: 800; }

  /*  IL RISCHIO -------------------------------------------------------------------------------- */

          .rischio, .perche { background-color: #F6F8FC; }

          .rischio { min-height: 500px; background: url(../img/pigna366-problema.png) no-repeat left bottom / auto 450px;
  }

          .vignette-grid{
            display:grid;
            grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
            gap:1.4rem;
          }

          .vignette{
            background:var(--bianco);
            border: 1px solid rgba(21, 56, 115, 0.1);
            border-radius:var(--radius);
            padding:1.8rem 1.6rem;
            opacity:0;
            transform:translateY(18px);
            transition:opacity .6s ease, transform .6s ease;
          }

          .vignette.is-visible{opacity:1; transform:translateY(0);}

          .vignette .glyph{
            font-family:var(--hand);
            font-size:.75rem;
            color:var(--main);
            letter-spacing:.08em;
            margin-bottom:1rem;
            display:block;
          }

          .vignette h3  { font-size:1.15rem; margin-bottom:.5rem; font-weight:600; font-family:var(--font); }
          .vignette p   { margin:0; color:var(--muted-on-paper); font-size:.96rem; }


  /*  IL PROCESSO -------------------------------------------------------------------------------- */


  .processo                         { background-color:var(--main); color:var(--bianco); }
  .processo .section-head .eyebrow  { color:var(--green); }

  .processo .section-head p         { color:var(--bianco); margin-top:.8rem; }
  .processo .section-head h2        { color:var(--bianco); }

  .steps{
    display:grid;
    gap:1px;
    background:rgba(241,231,206,.14);
    border-radius:var(--radius);
    overflow:hidden;
       
  }

  .step{
    background:var(--main);
    display:grid;
    grid-template-columns:70px 1fr;
    gap:1.4rem;
    padding:15px clamp(1rem,3vw,2rem);
    opacity:0;
    transform:translateY(14px);
    transition:opacity .6s ease, transform .6s ease;
     
  }
  .step.is-visible{opacity:1; transform:translateY(0);}
  .step .num{
    font-family:var(--hand);
    font-size:1.05rem;
    color:var(--green);
    padding-top:.15rem;
  }
  .step h3{font-size:1.1rem; font-weight:600; font-family:var(--titoli); margin-bottom:.35rem; color: var(--bianco); }
  .step p{margin:0; color:var(--muted-on-main); font-size:.96rem; max-width:60ch;}

  /* ---------- PERCHE ---------- */

  .perche{background:var(--paper);}
  .perche-layout{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:clamp(2rem,5vw,4rem);
    align-items:start;
  }
  .perche-list{list-style:none; margin:0; padding:0; display:grid; gap:1.1rem;}
  .perche-list li{
    display:grid;
    grid-template-columns:22px 1fr;
    gap:.8rem;
    font-size:1.02rem;
  }
  .perche-list li::before{
    content:"";
    width:8px;height:8px;
    border-radius:50%;
    background:var(--main);
    margin-top:.5em;
  }
  .quote-card{
    padding:2rem 1.8rem;
    position:relative;
  }
  .quote-card .mark{
    font-family:var(--titoli);
    font-size:3rem;
    color:var(--green);
    line-height:1;
    display:block;
background-color: transparent !important;  }

  .quote-card p{
    font-family:var(--titoli);
    font-style:italic;
    font-size:1.2rem;
    line-height:1.4;
    margin:0 0 1rem;
  }
  .quote-card cite{
    font-family:var(--hand);
    font-size:.72rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--green);
    font-style:normal;
  }

  /* ===== SERVICES ===== */
  .p366-scard { background:linear-gradient(180deg,#fff,#f9fbff); border:1px solid #e3e8f2;; border-radius:var(--radius); padding:32px; display:flex; gap:20px; align-items:flex-start; }
  .p366-scard-num { flex:0 0 auto; width:44px; height:44px; border-radius:10px; background:var(--main); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; }
  .p366-scard h3 { margin:0 0 8px; font-size:18px; }
  .p366-scard p { margin:0; color:var(--ink-2); font-size:15px; }

 /* ===== PROBLEM CARDS ===== */
  .p366-problem-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
  .p366-pcard { background:#fff; border:1px solid #e3e8f2; border-radius:var(--radius); padding:28px; transition: transform .2s, box-shadow .2s, border-color .2s; }
  .p366-pcard:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:rgba(20,102,209,.3); }
  .p366-pcard-icon { width:52px; height:52px; border-radius:12px; background:linear-gradient(135deg, rgba(20,102,209,.12), rgba(233,75,60,.12)); display:flex; align-items:center; justify-content:center; color:var(--main); margin-bottom:18px; }
  .p366-pcard-icon svg { width:26px; height:26px; }
  .p366-pcard h3 { font-size:19px; margin:0 0 10px; font-weight:700; }
  .p366-pcard p { margin:0; color:var(--ink-2); font-size:15px; }

  /* ===== PARTNER BAND ===== */

    #partner { background: url("../img/partner.webp") no-repeat right 100% center / cover, linear-gradient(120deg, #0b3d91, #1466d1);}
    .sf-blu { color: #fff;}

  .p366-partner { max-width: 1400px;  align-items: center; margin: 0 auto;}
 
  .p366-partner h2 { color:#fff; margin:0 0 12px; }
  .p366-partner p { color:#d6e4ff; margin:0 0 24px; font-size:17px; }
  .p366-partner ul { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
  .p366-partner li { display:flex; gap:10px; align-items:flex-start; color:#eaf1ff; font-size:15px; }
  .p366-partner li svg { flex:0 0 auto; width:20px; height:20px; color:#7ab5ff; margin-top:2px; }


    #form  .eyebrow  { color:var(--green); }
    #form  h3  { margin:20px 0 40px 0; line-height: 100%; }
    #form  h4  { line-height: 140%; }
 
    .contact-box h3   { margin-bottom: 10px !important;}

  .p366-scard,
  .p366-partner li,
  .perche-list li {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity .6s ease, transform .6s ease;
  }

  .p366-scard.is-visible,
  .p366-partner li.is-visible,
  .perche-list li.is-visible {
      opacity: 1;
      transform: translateY(0);
  }


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

        @media (max-width:480px) {

            .hero   { padding: 20px; background-position: right 20% center;}
            section { padding:20px; }
            
            .p366-partner   { padding: 40px 15px; }
            .p366-scard     { margin-bottom: 20px; }
            
            
            .btn-default, .btn-light    { width: 100%; margin-bottom: 20px;}
            
        }


        /* Tablet portrait / mobile grande */
        /* ==================================================  */

        @media (max-width: 767px) { 
            
            .perche-layout, .cta-layout { grid-template-columns: 1fr; }

        }

        /* Tablet landscape (iPad in orizzontale) */
        /* ==================================================  */

        @media (min-width: 768px) and (max-width: 1199px) { 

            .hero           { padding: 40px; background-position: right 45% center; }

            .hero-inner     { left: 15%; } 
            .p366-scard     { margin-bottom: 20px; }
            
            #partner        { padding: 40px; }

        }

        /* Desktop */
        /* ==================================================  */

        @media (min-width:1200px) {

            .hero           { padding: 40px; } 
            .hero-inner     { left: 25%; } 
            .steps          { max-width: 40vw; } 
            .processo       { background-image: url(../img/pigna366-sollievo.png); background-repeat: no-repeat; background-position: right 10% bottom; background-size: contain; }
            .p366-services { display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; }
            
            .p366-partner { max-width: 1400px; padding: 48px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; margin: 0 auto;}

        }


        /* ==================================================  */

        @media (prefers-reduced-motion: reduce) {

          .vignette, .step, .p366-scard, .p366-partner li, .perche-list li { transition: none; opacity: 1; transform: none; }
        }

        /* ==================================================  */