:root{
    /* ---- palette COSMO (nuova) ---- */
    --ink:#141d4a;          /* base cosmica (fallback dietro lo sfondo) */
    --aubergine:#243066;    /* indaco-cobalto medio */
    --aubergine-2:#1a2456;  /* indaco-cobalto profondo */
    --gold:#cda64a;         /* oro geometria sacra */
    --gold-soft:#e6c878;    /* oro chiaro */
    --cream:#f3ecd5;        /* avorio caldo (bordo carta) */
    --rose:#c0a0c6;         /* viola-rosa soffuso (label) */
    --line:rgba(205,166,74,.30);
    --panel:rgba(30,44,104,.50);   /* pannello traslucido sopra lo sfondo */
    --display:"Cormorant Garamond",serif;
    --body:"Jost",sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--ink);
    color:var(--cream);
    font-family:var(--body);
    font-weight:300;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  /* ---- sfondo MJ a tutta pagina (fisso) + velo per leggibilità ---- */
  body::before{
    content:"";position:fixed;inset:0;z-index:-2;
    background:var(--ink) url('../img/background.webp') center/cover no-repeat;
  }
  body::after{
    content:"";position:fixed;inset:0;z-index:-1;
    background:
      radial-gradient(1200px 820px at 50% 6%, rgba(48,70,156,.20), rgba(22,32,86,.50) 72%),
      linear-gradient(180deg, rgba(30,46,110,.30), rgba(18,26,72,.62));
  }
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1140px;margin:0 auto;padding:0 28px}
  .eyebrow{
    font-size:.72rem;letter-spacing:.42em;text-transform:uppercase;
    color:var(--gold);font-weight:400;
  }
  h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.08}
  :focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px;border-radius:2px}

  /* ---------- nav ---------- */
  nav{
    position:sticky;top:0;z-index:40;
    background:rgba(16,20,52,.72);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav-in{display:flex;align-items:center;justify-content:space-between;height:74px}
  .brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:1.5rem;letter-spacing:.02em}
  .monogram{
    width:38px;height:38px;border:1px solid var(--gold);border-radius:50%;
    display:grid;place-items:center;color:var(--gold);font-family:var(--display);
    font-size:1.2rem;font-style:italic;
  }
  .brand-logo{height:34px;width:auto;display:block}
  .foot-logo{height:26px;opacity:.92}
  @media(max-width:560px){.brand-logo{height:28px}}
  .nav-links{display:flex;gap:34px;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}
  .nav-links a{opacity:.78;transition:opacity .25s}
  .nav-links a:hover{opacity:1;color:var(--gold-soft)}
  .nav-cta{
    border:1px solid var(--gold);color:var(--gold-soft);
    padding:9px 20px;border-radius:40px;font-size:.78rem;letter-spacing:.12em;
    text-transform:uppercase;transition:.25s;
  }
  .nav-cta:hover{background:var(--gold);color:var(--ink)}
  @media(max-width:820px){.nav-links{display:none}}

  /* ---------- hero ---------- */
  .hero{position:relative;overflow:hidden;padding:96px 0 88px}
  .hero::before{
    content:"";position:absolute;inset:0;z-index:0;
    background:
      radial-gradient(620px 520px at 72% 38%, rgba(205,166,74,.16), transparent 62%),
      radial-gradient(900px 700px at 18% 88%, rgba(14,17,48,.55), transparent 70%);
    animation:flicker 7s ease-in-out infinite;
  }
  @keyframes flicker{0%,100%{opacity:.85}45%{opacity:1}70%{opacity:.78}}
  @media(prefers-reduced-motion:reduce){.hero::before{animation:none}}
  .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
  .hero h1{font-size:clamp(2.9rem,6vw,4.6rem);margin:18px 0 8px}
  .hero h1 em{font-style:italic;color:var(--gold-soft)}
  .lead{font-size:1.12rem;max-width:30ch;color:#dcd3e2;margin-bottom:34px}
  .cta-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
  .btn-gold{
    background:var(--gold);color:var(--ink);font-weight:500;letter-spacing:.06em;
    padding:16px 30px;border-radius:44px;font-size:.95rem;display:inline-flex;
    align-items:center;gap:10px;transition:.25s;
  }
  .btn-gold:hover{background:var(--gold-soft);transform:translateY(-2px)}
  .btn-ghost{
    border:1px solid var(--line);padding:16px 26px;border-radius:44px;
    font-size:.92rem;letter-spacing:.04em;transition:.25s;
  }
  .btn-ghost:hover{border-color:var(--gold);color:var(--gold-soft)}
  .reassure{margin-top:22px;font-size:.82rem;letter-spacing:.04em;color:var(--rose);display:flex;gap:8px;align-items:center}
  @media(max-width:860px){.hero-grid{grid-template-columns:1fr;gap:40px}.lead{max-width:none}}

  /* ---------- placeholder (ingombro, non più usato) ---------- */
  .ph{
    position:relative;width:100%;border:1px dashed var(--line);
    background:
      repeating-linear-gradient(135deg,rgba(205,166,74,.05) 0 14px,transparent 14px 28px),
      var(--aubergine-2);
    border-radius:8px;display:grid;place-items:center;text-align:center;
  }
  .ph .tag{padding:22px}
  .ph .sym{font-family:var(--display);font-size:2rem;color:var(--gold);font-style:italic}
  .ph .dim{font-size:.82rem;letter-spacing:.16em;color:var(--gold-soft);margin-top:8px}
  .ph .desc{font-size:.78rem;color:#bdb29c;margin-top:6px;max-width:30ch}
  .ph .ratio{position:absolute;top:10px;right:12px;font-size:.66rem;letter-spacing:.14em;color:var(--rose);text-transform:uppercase}
  .ph-hero{aspect-ratio:4/5}

  /* ---------- immagini di produzione (PNG ora → WebP a fine lavoro) ---------- */
  .img{position:relative;width:100%;background:var(--aubergine-2);border-radius:8px;overflow:hidden}
  .img img{display:block;width:100%;height:100%;object-fit:cover}
  .img-hero{aspect-ratio:4/5;border:1px solid var(--line)}
  .card .img{border-radius:0;border-bottom:1px solid var(--line);aspect-ratio:1/1}
  .reader-grid .img{aspect-ratio:3/4;border:1px solid var(--line)}

  /* ---------- steps ---------- */
  section{padding:84px 0}
  .sec-head{text-align:center;max-width:640px;margin:0 auto 56px}
  .sec-head h2{font-size:clamp(2.1rem,4vw,3rem);margin:14px 0}
  .sec-head p{color:#cbc3d4}
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
  .step{border-top:1px solid var(--line);padding-top:24px}
  .step .n{font-family:var(--display);font-size:2.4rem;color:var(--gold);font-style:italic}
  .step h3{font-size:1.45rem;margin:8px 0 8px}
  .step p{font-size:.95rem;color:#c3bdce}
  @media(max-width:760px){.steps{grid-template-columns:1fr;gap:26px}}

  /* ---------- readings (pannello frosted sopra il cosmo) ---------- */
  .readings{background:var(--panel);backdrop-filter:blur(3px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
  .card{
    background:rgba(30,40,98,.76);
    border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:.3s;
  }
  .card:hover{transform:translateY(-5px);border-color:var(--gold)}
  .card .ph{border:none;border-bottom:1px dashed var(--line);border-radius:0;aspect-ratio:1/1}
  .card-body{padding:24px}
  .card-body h3{font-size:1.5rem;color:var(--gold-soft)}
  .card-body p{font-size:.92rem;color:#c3bdce;margin-top:8px}
  @media(max-width:760px){.cards{grid-template-columns:1fr}}

  /* ---------- reader ---------- */
  .reader-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:54px;align-items:center}
  .reader-grid .ph{aspect-ratio:3/4}
  .reader h2{font-size:clamp(2rem,4vw,2.8rem);margin:14px 0 18px}
  .reader p{color:#cbc3d4;margin-bottom:16px}
  .creds{display:flex;gap:30px;margin-top:26px;flex-wrap:wrap}
  .cred .big{font-family:var(--display);font-size:2.2rem;color:var(--gold)}
  .cred .lbl{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rose)}
  .feats{display:flex;flex-direction:column;gap:22px;margin-top:30px}
  .feat{border-left:2px solid var(--gold);padding:2px 0 2px 20px}
  .feat h3{font-size:1.3rem;color:var(--gold-soft);margin-bottom:5px}
  .feat p{color:#cbc3d4;font-size:.96rem;line-height:1.6;margin:0}
  @media(max-width:760px){.reader-grid{grid-template-columns:1fr;gap:36px}}

  /* ---------- voices (pannello frosted) ---------- */
  .voices{background:var(--panel);backdrop-filter:blur(3px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
  .quote{border-left:2px solid var(--gold);padding:6px 0 6px 22px}
  .quote p{font-family:var(--display);font-size:1.32rem;font-style:italic;line-height:1.4;color:var(--cream)}
  .quote .who{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--rose);margin-top:14px}
  @media(max-width:760px){.quotes{grid-template-columns:1fr}}

  /* ---------- marquee "ricerche più frequenti" ---------- */
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .marquee{position:relative;overflow:hidden;background:var(--panel);backdrop-filter:blur(3px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:13px 0}
  .marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
  .marquee::before{left:0;background:linear-gradient(90deg,#16204a,transparent)}
  .marquee::after{right:0;background:linear-gradient(270deg,#16204a,transparent)}
  .marquee-track{display:inline-flex;flex-wrap:nowrap;will-change:transform;animation:scrollx 42s linear infinite}
  .marquee:hover .marquee-track{animation-play-state:paused}
  .grp{display:inline-flex;flex:0 0 auto;white-space:nowrap;align-items:center}
  .grp .kw{font-family:var(--display);font-style:italic;font-size:1.15rem;color:var(--gold-soft);padding:0 4px}
  .grp .sep{color:var(--gold);opacity:.55;padding:0 20px}
  @keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media(prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;justify-content:center}.marquee::before,.marquee::after{display:none}}

  /* ---------- intro (testo SEO in fascia alta) ---------- */
  .intro{text-align:center}
  .intro .wrap{max-width:820px}
  .intro h2{font-size:clamp(1.9rem,4vw,2.7rem);margin:12px 0 6px}
  .intro p{color:#cdd3e6;font-size:1.07rem;line-height:1.75;margin-top:18px}
  .intro p strong{color:var(--gold-soft);font-weight:400}

  /* ---------- carta che si gira (amore) ---------- */
  .amore-grid{display:grid;grid-template-columns:auto 1fr;gap:60px;align-items:center}
  .flip-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
  .flip-card{width:330px;max-width:74vw;aspect-ratio:1024/1536;perspective:1300px;cursor:pointer;background:transparent;border:0}
  .flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 1.05s cubic-bezier(.2,.75,.2,1)}
  .flip-card.is-flipped .flip-inner{transform:rotateY(180deg)}
  .flip-face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:18px;overflow:hidden;box-shadow:0 30px 70px -24px rgba(0,0,0,.7);border:1px solid var(--line)}
  .flip-face img{width:100%;height:100%;object-fit:cover;display:block}
  .flip-back{transform:rotateY(180deg)}
  /* flip carte letture: robusto anche su Safari (niente preserve-3d dentro overflow:hidden) */
  .card .img .lf{position:absolute;inset:0;perspective:900px}
  .lf-inner{position:absolute;inset:0}
  .lf-face{position:absolute;inset:0}
  .lf-back{z-index:1}
  .lf-front{z-index:2;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .6s cubic-bezier(.4,0,.2,1),opacity .3s ease .22s}
  .lf.is-flipped .lf-front{transform:rotateY(92deg);opacity:0}
  @media(prefers-reduced-motion:reduce){.lf-front{transition:none}}
  .flip-hint{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--rose)}
  .amore .eyebrow{display:block}
  .amore h2{font-size:clamp(2rem,4vw,2.9rem);margin:12px 0 16px}
  .amore p{color:#cdd3e6;font-size:1.06rem;line-height:1.7;margin-bottom:14px}
  .amore p strong{color:var(--gold-soft);font-weight:400}
  .amore .cta-row{margin-top:24px}
  @media(prefers-reduced-motion:reduce){.flip-inner{transition:none}}
  @media(max-width:820px){.amore-grid{grid-template-columns:1fr;gap:30px;text-align:center}.amore .cta-row{justify-content:center}}

  /* ---------- stato operatori (iframe live) ---------- */
  .iframe-wrap{max-width:1000px;margin:6px auto 0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel);backdrop-filter:blur(3px)}
  .responsive-iframe{display:block;width:100%;height:280px;border:0}

  /* ---------- pricing / final ---------- */
  .final{text-align:center;position:relative;overflow:hidden}
  .final::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 400px at 50% 0,rgba(205,166,74,.15),transparent 70%)}
  .final-in{position:relative;z-index:1}
  .final h2{font-size:clamp(2.3rem,5vw,3.4rem);margin:16px auto;max-width:18ch}
  .price{display:inline-flex;align-items:baseline;gap:10px;margin:8px 0 30px;color:var(--gold-soft)}
  .price .num{font-family:var(--display);font-size:2.6rem}
  .price .per{font-size:.9rem;letter-spacing:.08em;color:#c3bdce}
  .phone-line{font-family:var(--display);font-size:2.4rem;color:var(--cream);letter-spacing:.04em;margin-top:18px}

  /* ---------- box contatti / ricariche ---------- */
  .contact-boxes{display:flex;flex-direction:column;gap:18px;max-width:760px;margin:34px auto 0}
  .cbox{--accent:var(--gold-soft);display:flex;align-items:center;gap:18px;text-align:left;padding:20px 28px;border:1px solid var(--line);border-radius:50px;background:var(--panel);backdrop-filter:blur(3px);transition:.25s}
  .cbox:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 18px 40px -26px rgba(0,0,0,.6)}
  .cbox-ic{flex:0 0 auto;width:34px;height:34px;color:var(--accent);display:grid;place-items:center}
  .cbox-ic svg{width:28px;height:28px;display:block}
  .cbox-tx{font-size:1.02rem;color:var(--cream);line-height:1.4}
  .cbox-tx strong{color:var(--accent);font-weight:500;letter-spacing:.02em}
  .cbox--g{--accent:#e6c878}
  .cbox--b{--accent:#8fb8e6}
  .cbox--r{--accent:#cfa3d6}
  @media(max-width:560px){.cbox{border-radius:18px;padding:16px 18px;gap:13px}.cbox-tx{font-size:.93rem}}

  /* barra contatti in alto */
  .top-bar{background:var(--panel);backdrop-filter:blur(3px);border-bottom:1px solid var(--line);padding:14px 0}
  .top-boxes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .top-boxes .cbox{padding:13px 18px;border-radius:16px;gap:12px}
  .top-boxes .cbox-tx{font-size:.92rem}
  @media(max-width:820px){.top-boxes{grid-template-columns:1fr}}

  .final-note{max-width:760px;margin:40px auto 0;text-align:left}
  .final-note p{color:#c3bdce;font-size:.97rem;line-height:1.72;margin-bottom:12px}
  .final-note p strong{color:var(--gold-soft);font-weight:400}
  .final-note a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
  .final-note a:hover{color:var(--gold-soft)}
  .final-note .legal{font-size:.84rem;color:#9aa0bd;margin-top:18px;border-top:1px solid var(--line);padding-top:16px}

  footer{border-top:1px solid var(--line);padding:48px 0;font-size:.82rem;color:#a99fb5}
  .foot-in{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-start}
  .foot-brand{display:flex;flex-direction:column;gap:14px;max-width:340px}
  .ai-note{font-size:.72rem;color:#8b8fa8;line-height:1.55;max-width:38ch}
  .disclaimer{max-width:54ch;line-height:1.6}


  .guida-hero{text-align:center;padding:72px 0 40px}
  .guida-hero .wrap{max-width:820px}
  .guida-hero h1{font-size:clamp(2.4rem,5vw,3.6rem);margin:14px 0 16px}
  .guida-hero h1 em{font-style:italic;color:var(--gold-soft)}
  .guida-hero p{color:#cdd3e6;font-size:1.12rem}
  .gsec{padding:54px 0}
  .gsec .wrap{max-width:920px}
  .prose h2{font-size:clamp(1.8rem,3.6vw,2.5rem);margin:0 0 16px}
  .prose h3{font-size:1.22rem;color:var(--gold-soft);margin:22px 0 6px}
  .prose p{color:#cdd3e6;font-size:1.04rem;line-height:1.75;margin-bottom:14px}
  .prose ul{list-style:none;margin:8px 0 16px;padding:0}
  .prose li{color:#cdd3e6;font-size:1.02rem;line-height:1.6;padding-left:22px;position:relative;margin-bottom:8px}
  .prose li::before{content:"✦";position:absolute;left:0;color:var(--gold)}
  .glegal{font-size:.86rem;color:#9aa0bd;border-top:1px solid var(--line);padding-top:14px;margin-top:20px}
  .split{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center;max-width:1040px;margin:0 auto}
  .split-img{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--aubergine-2);aspect-ratio:4/3}
  .split-img img{width:100%;height:100%;object-fit:cover;display:block}
  .split.rev .split-img{order:2}
  @media(max-width:820px){.split{grid-template-columns:1fr;gap:24px}.split.rev .split-img{order:0}}


  /* ---------- menu footer ---------- */
  .foot-menu{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:6px}
  .foot-menu a{font-size:.82rem;letter-spacing:.04em;color:#b9b1c6;transition:color .2s}
  .foot-menu a:hover{color:var(--gold-soft)}

  /* ---------- FAQ ---------- */
  .faq-wrap{max-width:820px;margin:0 auto}
  .faq-item{border-bottom:1px solid var(--line);padding:22px 0}
  .faq-item h3{font-size:1.25rem;color:var(--gold-soft);margin-bottom:8px}
  .faq-item p{color:#cdd3e6;font-size:1.02rem;line-height:1.7}

  .foot-cities{width:100%;flex-basis:100%;margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
  .foot-cities-h{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:10px}
  .foot-cities-links{display:flex;flex-wrap:wrap;gap:8px 18px}
  .foot-cities-links a{font-size:.8rem;color:#a7a2c0;transition:color .2s}
  .foot-cities-links a:hover{color:var(--gold-soft)}