:root{
    --red:#bf1d19;
    --green:#3f523f;
    --white:#ffffff;
    /* Figma asset server (served by Figma desktop app while running) */
    --img-pizza:url('../img/slice-pizza-sito.webp');
    --img-logo:url('../img/logo-pizza.webp');
  }

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

  html,body{height:100%;}

  body{
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    color:var(--green);
    background:var(--white);
    min-height:100vh;
    display:flex;
    flex-direction:column;
    overflow-x:hidden;
  }

  /* ---------- Header ---------- */
  .site-header{
    background:var(--white);
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:clamp(78px,8.5vw,122px);
    padding:10px 0;
    border-bottom:2px solid var(--green);
  }
  .logo{
    width:clamp(60px,6.8vw,98px);
    height:clamp(60px,6.8vw,98px);
    background-image:var(--img-logo);
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
  }

  /* ---------- Hero (white) ---------- */
  .hero{
    background:var(--white);
    text-align:center;
    padding:clamp(40px,5vw,84px) 20px clamp(40px,4vw,60px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    flex:1 0 auto;
  }
  .hero h1{
    font-family:'League Gothic',sans-serif;
    font-weight:400;
    color:var(--green);
    font-size:clamp(40px,6.7vw,96px);
    line-height:1;
    letter-spacing:0.5px;
    max-width:880px;
    text-transform:uppercase;
  }
  .hero p{
    color:var(--green);
    font-size:clamp(20px,2.5vw,36px);
    line-height:1.25;
    margin-top:clamp(16px,1.8vw,28px);
    max-width:540px;
  }

  /* ---------- CTA (red) ---------- */
  .cta{
    position:relative;
    background:var(--red);
    text-align:center;
    padding:clamp(70px,9vw,130px) 24px clamp(60px,7vw,100px);
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:clamp(180px,23vw,339px);
  }
  .cta h2{
    font-family:'League Gothic',sans-serif;
    font-weight:400;
    color:var(--white);
    font-size:clamp(28px,3.35vw,48px);
    line-height:1.15;
    letter-spacing:0.5px;
    max-width:820px;
    text-transform:uppercase;
  }

  /* ---------- Pizza slice straddling the white/red seam ---------- */
  .pizza{
    position:absolute;
    left:-4.17vw;                 /* -60 / 1440 */
    top:-22.8vw;                  /* -328 / 1440, relative to .cta top */
    width:32.8vw;                 /* 472 / 1440 */
    aspect-ratio:1/1;
    background-image:var(--img-pizza);
    background-size:contain;
    background-repeat:no-repeat;
    background-position:bottom left;
    pointer-events:none;
  }

  /* ---------- Footer (red) ---------- */
  .site-footer{
    background:var(--red);
    color:var(--white);
    text-align:center;
    padding:clamp(22px,2.4vw,30px) 20px clamp(22px,2.4vw,30px);
    border-top:2px solid rgba(255,255,255,.5);
    font-size:14px;
    line-height:1.45;
  }
  .site-footer .addr span:not(:first-child)::before{content:" — ";}
  .site-footer p{margin-top:4px;}

  /* ---------- Freeze proportions on very large screens (>=1440) ---------- */
  @media (min-width:1440px){
    .pizza{left:-60px;top:-328px;width:472px;}
  }

  /* ---------- Mobile ---------- */
  @media (max-width:768px){
    .hero{padding:clamp(28px,7vw,44px) 18px clamp(40px,12vw,60px);}
    .hero h1{font-size:clamp(30px,9vw,44px);max-width:320px;}
    .hero p{font-size:clamp(16px,5vw,22px);max-width:260px;margin-top:14px;}

    .cta{
      min-height:0;
      padding:clamp(60px,16vw,80px) 18px clamp(48px,14vw,70px);
    }
    .cta h2{font-size:clamp(24px,7.6vw,32px);max-width:380px;}

    .pizza{
      left:-6.9vw;        /* -27 / 393 */
      top:-28.8vw;        /* -113 / 393, relative to .cta top */
      width:49.6vw;       /* 195 / 393 */
    }

    .site-footer{padding:26px 18px;}
    .site-footer .addr span{display:block;}
    .site-footer .addr span:not(:first-child)::before{content:none;}
    .site-footer .privacy{margin-top:18px;}
  }