: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.4rem, 4vh, 2.3rem);
  }
  *{box-sizing:border-box;margin:0;padding:0;}

  body{
    /* Sfondo a due livelli: un gradiente base + uno che "respira"
       tramite CSS custom properties animate. Nessuna immagine necessaria:
       un radial-gradient morbido come questo, in PNG/JPG soffrirebbe di banding
       ed è comunque più pesante di queste poche righe di CSS. */
    --glow-x:50%;
    --glow-y:-10%;
    --glow-size:1200px 700px;
    background:
      radial-gradient(var(--glow-size) at var(--glow-x) var(--glow-y), #ffffff 0%, var(--blue-pale) 35%, var(--cream) 60%);
    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 glow si espande e si restringe molto lentamente.
     Percettibile ma mai invadente — deve dare vita, non distrarre
     da una pagina di ambito medico. */
  @keyframes breathe{
    0%, 100%{ background-size: 100% 100%; filter:brightness(1); }
    50%{ background-size: 112% 112%; filter:brightness(1.03); }
  }

  @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;
  }
  /* Sostituisci .logo-placeholder con <img class="logo" src="..."> quando importi il file vero */

   /* ---- 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.50rem, 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.30rem;
    line-height:1.3;
    color:var(--blue-deep);
    font-weight:500;
    letter-spacing:0.02em;
  }

  /* ---- 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;}