:root{
    --blue-deep:#3a5a99;
    --blue-mid:#4d74b8;
    --blue-pale:#eef2f8;
    --cream:#faf9f6;
    --ink:#22262c;
    --ink-soft:#5b6673;
    --rule:#d7e0ee;
 
    /* spaziatura tra i blocchi: un'unica variabile, così la ritmica
       verticale si controlla da un solo punto */
    --stack-gap: clamp(1.6rem, 4vh, 2.6rem);
  }
  *{box-sizing:border-box;margin:0;padding:0;}
 
  body{
    /* Gradiente diagonale con un punto luce radiale sovrapposto,
       usando la palette già definita del brand (niente colori nuovi
       introdotti: resta coerente con logo, CTA e testo). */
    background-image:
      radial-gradient(circle, rgba(255,255,255,0.95) 0%, transparent 45%),
      linear-gradient(135deg, var(--cream) 0%, var(--blue-pale) 80%, #c3d4ec 100%);
    background-repeat:no-repeat;
    background-size:150% 150%, 100% 100%;
    background-position:15% 20%, 0 0;
    color:var(--ink);
    font-family:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    min-height:100vh;
    animation: breathe 9s ease-in-out infinite;
  }
 
  /* Il "respiro": il punto luce radiale si sposta lievemente,
     dando profondità senza introdurre nuove forme o colori. */
  @keyframes breathe{
    0%, 100%{ background-position:15% 20%, 0 0; filter:brightness(1); }
    50%{ background-position:25% 35%, 0 0; filter:brightness(1.02); }
  }
 
  @media (prefers-reduced-motion: reduce){
    body{ animation:none; }
  }

  /* ============================================
     CONTENITORE PRINCIPALE — flexbox column
     Ogni figlio diretto è un "blocco" della pagina.
     ============================================ */
  .coming-soon{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    gap:var(--stack-gap);
    padding:6vh 6vw;
    text-align:center;
  }

  /* ---- Blocco 1: logo ---- */
  .block--logo{
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .block--logo .logo-placeholder{
    width:min(230px, 55vw);
    aspect-ratio:1/0.85;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.75rem;
    color:var(--ink-soft);
    margin-bottom:0.4rem;
  }

   /* ---- Divisore (immagine decorativa) ---- */
  .divider{
    display:flex;
    justify-content:center;
  }
  .divider-img{
    width:min(160px, 40vw);
    height:auto;
    display:block;
  }

  /* ---- Blocco 2: dati della professionista ---- */
  .block--owner{
    display:flex;
    flex-direction:column;
    gap:0.35rem;
  }
  .owner-spec{
    font-family:'El Messiri', serif;
    font-size:clamp(1.35rem, 3vw, 1.4rem);
    color:var(--blue-deep);
    line-height:1.3;
  }
  .owner-name{
    font-family:'El Messiri', serif;
    font-size:clamp(2rem, 3vw, 1.4rem);
    color:var(--blue-deep);
    letter-spacing:0.025em;
  }
  .owner-name strong{font-weight:700;}
  .owner-role{
    font-family:'El Messiri', serif;
    font-size:1.40rem;
    line-height:1.3;
    color:var(--blue-deep);
    font-weight:500;
  }
  .owner-piva{
    font-family:'El Messiri', serif;
    font-size:1.20rem;
    line-height:1.3;
    color:var(--blue-deep);
    font-weight:500;
    letter-spacing:0.05em;
  }

  /* ---- Blocco 3: contatti + CTA ---- */
  .block--contact{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.9rem;
  }
  .contact-text p{
    font-family:'El Messiri', serif;
    font-size:1.40rem;
    color:var(--blue-deep);
    font-weight:500;
    line-height:1.5;
  }

  .cta-button{
    --btn-scale:1;
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    padding:0.8rem 1.8rem;
    border-radius:999px;
    background:var(--blue-deep);
    color:#fff;
    font-size:0.85rem;
    font-weight:600;
    letter-spacing:0.04em;
    text-decoration:none;
    box-shadow:0 10px 24px rgba(58,90,153,0.28);
    transform:scale(var(--btn-scale));
    transform-origin:center;
  }
  .cta-button .cta-icon{font-size:0.8rem;}

  /* ---- Blocco 4: stato del sito ---- */
  .block--status{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.5rem;
  }
  .status-text{
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-weight:500;
    font-size:1.75rem;
    color:var(--blue-deep);
  }
 .powered-by{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    font-size:0.75rem;
    letter-spacing:0.20em;
    text-transform:uppercase;
    color:var(--blue-deep);
  }
  .powered-by .brand{
    display:block;
    width:137px;
    height:25px;
  }

  /* La pagina è VISIBILE di default (progressive enhancement).
     Solo se GSAP carica con successo, il JS aggiunge .anim-ready a <html>
     e SOLO in quel momento i blocchi vengono nascosti per poter animare.
     Se GSAP non carica per qualsiasi motivo, non succede nulla: si vede tutto. */
  html.anim-ready [data-anim]{opacity:0;}