/* AstroLilhiti — notte blu-viola, oro e lilla */
:root{
  --bg:#08081C; --violet:#24175A; --ink:#F4F0FA; --muted:#B9B2D6;
  --gold:#EDCF8E; --lilac:#B9A2FF; --line:rgba(185,162,255,.18);
  --card:rgba(255,255,255,.035); --btn-ink:#1B1433;
  --gold2:#F1DFA8; --wa:#25D366;
  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
/* il sito è volutamente scuro in entrambi i temi del dispositivo */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#08081C; --ink:#F4F0FA; } }
:root[data-theme="dark"]{ --bg:#08081C; --ink:#F4F0FA; }

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 88px);scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html:not([data-l="it"]) .it, html:not([data-l="pt"]) .pt, html:not([data-l="en"]) .en{display:none !important}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.65 "Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;position:relative}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1px 1px at 12% 18%,rgba(255,255,255,.55) 50%,transparent 51%),
    radial-gradient(1px 1px at 34% 72%,rgba(255,255,255,.4) 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 28%,rgba(255,255,255,.5) 50%,transparent 51%),
    radial-gradient(1px 1px at 76% 64%,rgba(255,255,255,.45) 50%,transparent 51%),
    radial-gradient(1px 1px at 88% 12%,rgba(255,255,255,.5) 50%,transparent 51%),
    radial-gradient(1px 1px at 6% 86%,rgba(255,255,255,.35) 50%,transparent 51%),
    radial-gradient(1px 1px at 46% 46%,rgba(255,255,255,.3) 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 94% 88%,rgba(255,255,255,.4) 50%,transparent 51%),
    radial-gradient(900px 700px at 82% 18%,rgba(60,38,130,.55),transparent 65%),
    linear-gradient(180deg,#0B0A26 0%,#08081C 100%);
  background-size:420px 420px,420px 420px,420px 420px,420px 420px,420px 420px,420px 420px,420px 420px,420px 420px,100% 100%,100% 100%}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:"Newsreader","Iowan Old Style",Georgia,serif;font-weight:400;line-height:1.08;margin:0}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.grad{background:linear-gradient(95deg,#F6E3AE 0%,#E9D3B8 40%,#C3AEFF 100%);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic}
.eyebrow{font:700 12.5px/1 "Manrope",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 16px}

/* header */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:rgba(8,8,28,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
header.top .wrap{display:flex;align-items:center;gap:18px;height:76px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto;font:700 18px/1 "Manrope",sans-serif;white-space:nowrap}
.logo .mark{width:36px;height:36px;border-radius:50%;border:1px solid rgba(237,207,142,.7);display:grid;place-items:center;color:var(--gold);font-size:18px;box-shadow:0 0 18px rgba(237,207,142,.28)}
.logo .dom{color:var(--gold)}
.langs{display:flex;border:1px solid var(--line);border-radius:999px;padding:3px}
.langs button{font:600 13px/1 "Manrope",sans-serif;background:none;border:0;color:var(--muted);padding:8px 12px;border-radius:999px;cursor:pointer}
.langs button[aria-pressed="true"]{background:rgba(185,162,255,.18);color:var(--ink)}

/* bottoni */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px;font:700 15.5px/1.2 "Manrope",sans-serif;letter-spacing:.005em;text-decoration:none;border-radius:999px;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .2s ease,box-shadow .25s ease,filter .2s ease,background-color .2s ease,border-color .2s ease}
.btn-primary{background:linear-gradient(95deg,#ECCE93 0%,#D9BBC8 48%,#B99EFF 100%);color:var(--btn-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(27,20,51,.12),0 10px 28px -10px rgba(183,156,255,.7),0 2px 8px rgba(8,8,28,.35)}
.btn-primary:hover{filter:brightness(1.05) saturate(1.05);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(27,20,51,.12),0 16px 34px -10px rgba(183,156,255,.85),0 2px 8px rgba(8,8,28,.35)}
.btn-ghost{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.2);color:var(--ink);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn-ghost:hover{background:rgba(255,255,255,.07);border-color:rgba(237,207,142,.5);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98);transition-duration:.08s}
/* pulsanti WhatsApp: icona a fumetto (la stessa del pulsante verde fisso) al posto della freccia */
.btn.wa::before{content:"";flex:none;width:19px;height:19px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8.5 8.5 0 0 1-12.6 7.4L3 21l1.6-5.2A8.5 8.5 0 1 1 21 12z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8.5 8.5 0 0 1-12.6 7.4L3 21l1.6-5.2A8.5 8.5 0 1 1 21 12z'/%3E%3C/svg%3E") center/contain no-repeat}
header .btn{min-height:44px;padding:0 20px;font-size:14px;gap:8px}
header .btn.wa::before{width:16px;height:16px}
.btn-sm{min-height:46px;padding:0 22px;font-size:14.5px;gap:8px}
.btn-sm.wa::before{width:17px;height:17px}
@media (max-width:680px){ header .btn-primary{display:none} }

/* hero */
.hero{padding:64px 0 96px}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);border-radius:999px;padding:9px 16px;font-size:13.5px;color:#DCD6EE;margin-bottom:34px}
.pill b{color:var(--gold);font-weight:400}
.hero h1{font-size:clamp(52px,7.6vw,112px);letter-spacing:-.02em;line-height:.98;text-wrap:balance}
.hero h1 .grad{text-wrap:balance}
.hero h1 .grad{display:block;padding-bottom:.08em}
.hero p.lead{font-size:18.5px;line-height:1.65;color:var(--muted);max-width:33em;margin:30px 0 34px}
.actions{display:flex;flex-wrap:wrap;gap:14px}
/* "Il cielo di oggi": titolo, città/data/ora e ruota con il cielo reale */
.sky{margin:0;width:100%;max-width:540px;justify-self:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.sky figcaption{text-align:center}
.sky .eyebrow{display:block;margin:0 0 8px}
.sky-clock{display:block;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;min-height:1.4em}
.wheel{width:100%}
.wheel svg{display:block;width:100%;height:auto;overflow:visible}
.wheel{aspect-ratio:1}
@media (max-width:900px){
  .hero{padding:40px 0 70px}
  .hero .wrap{grid-template-columns:1fr;gap:44px}
  .sky{max-width:400px}
}

/* sezioni */
section.block{padding:96px 0;border-top:1px solid rgba(255,255,255,.06)}
section.block h2{font-size:clamp(36px,4.6vw,58px);letter-spacing:-.01em;margin-bottom:34px}

/* chi sono */
.about{display:grid;grid-template-columns:260px 1fr;gap:56px;align-items:center}
.photo{aspect-ratio:1;border-radius:50%;border:1px solid rgba(237,207,142,.6);box-shadow:0 0 40px rgba(183,156,255,.22);overflow:hidden;background:radial-gradient(circle at 50% 38%,#4A3596 0%,#24185C 55%,#120E34 100%)}
.photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 16%}
.about p{margin:0;max-width:34em;font-family:"Newsreader","Iowan Old Style",Georgia,serif;font-style:italic;font-size:21px;line-height:1.55;color:#E4DEF3}
.about p + p{margin-top:16px}
.about .motto{font-family:"Newsreader",Georgia,serif;font-size:26px;line-height:1.3;margin-top:26px;color:transparent;display:inline-block}
.photo-wrap{position:relative;width:calc(100% - 28px);margin:14px}
.photo-wrap::before{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px dashed rgba(237,207,142,.35);animation:spin 60s linear infinite}
.photo-wrap::after{content:"";position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(circle,#f6e3ae 0 3px,transparent 4px) 50% 0/10px 10px no-repeat;margin-top:-5px;animation:spin 24s linear infinite}
@media (max-width:760px){ .about{grid-template-columns:1fr;gap:40px} .photo-wrap{width:min(220px,62vw);margin:14px auto 0} }

/* consulenze */
.group + .group{margin-top:72px}
.group-intro{max-width:44em;color:var(--muted);margin:-8px 0 28px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:34px 32px;display:flex;flex-direction:column}
.svc h3{font-size:31px;margin-bottom:18px}
.grid3 .svc h3{font-size:27px}
.svc p{margin:0 0 14px;color:#DCD6EE}
.svc .detail{font-size:15px;color:var(--muted);border-top:1px solid var(--line);padding-top:16px;margin-top:auto}
.price{font-family:"Newsreader",Georgia,serif;font-size:32px;color:var(--gold);line-height:1}
@media (max-width:980px){ .grid3{grid-template-columns:1fr} }
@media (max-width:820px){ .grid2{grid-template-columns:1fr} .svc{padding:28px 24px} }

/* come funziona */
#consulenze .intro-call{margin-top:64px}
.intro-call{margin-top:28px;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:32px 36px;border-radius:24px;border:1px solid rgba(237,207,142,.45);background:linear-gradient(120deg,rgba(237,207,142,.08),rgba(183,156,255,.10))}
.intro-call h3{font-size:30px;margin-bottom:10px}
.intro-call p{margin:0;max-width:40em;color:#DCD6EE}
@media (max-width:820px){ .intro-call{flex-direction:column;align-items:flex-start;padding:28px 24px} }

/* chiusura */
.closing{padding:110px 0;border-top:1px solid rgba(255,255,255,.06);text-align:center;background:radial-gradient(700px 360px at 50% 60%,rgba(90,60,180,.35),transparent 70%)}
.closing h2{font-size:clamp(34px,4.8vw,62px);max-width:16em;margin:0 auto 36px;letter-spacing:-.01em;text-wrap:balance}

footer{padding:40px 0 56px;font-size:14px;color:var(--muted);border-top:1px solid rgba(255,255,255,.06)}
footer .wrap{display:flex;flex-wrap:wrap;gap:14px 36px;justify-content:space-between;align-items:center}
footer p{margin:0;max-width:42em}

.wa-float{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:20;width:58px;height:58px;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.wa-float svg{width:28px;height:28px}

/* telefono */
@media (max-width:520px){
  .wrap{padding:0 20px}
  .btn{padding:0 20px;font-size:15px}
  .intro-call{padding:26px 20px}
  .actions .btn{width:100%}
  .hero h1{font-size:clamp(40px,12vw,56px)}
  /* la frase "Astrologia e tarocchi online…" scende sotto i pulsanti, come riga discreta senza cornice */
  .hero .wrap > div:first-child{display:flex;flex-direction:column}
  .pill{order:3;display:block;margin:20px 0 0;padding:0;border:0;border-radius:0;background:none;font-size:13.5px;line-height:1.5;color:var(--muted);text-align:center;text-wrap:balance}
  .pill b{margin-right:6px}
  /* spazi verticali più compatti */
  .hero{padding:28px 0 36px}
  .hero .wrap{gap:28px}
  .hero p.lead{margin:20px 0 26px}
  section.block{padding:52px 0}
  section.block h2{margin-bottom:22px}
  .group + .group{margin-top:44px}
  .group-intro{margin:-4px 0 20px}
  .about{gap:24px}
  .about .motto{margin-top:18px}
  .about p{font-size:19px}
  /* allineamento coerente su telefono: titoli, etichette e motto al centro, testi lunghi a sinistra */
  section.block h2,section.block .eyebrow,.group-intro,.about .motto{text-align:center}
  .group-intro{margin-left:auto;margin-right:auto}
  .about .motto{display:block}
  .svc h3{font-size:26px;margin-bottom:14px}
  .grid3 .svc h3{font-size:25px}
  .intro-call h3{font-size:26px}
  #consulenze .intro-call{margin-top:44px}
  .sky{gap:10px}
  .svc{padding:26px 20px}
  .intro-call .btn{width:100%}
  .closing{padding:60px 0}
  .closing h2{margin-bottom:28px}
  footer{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .logo{font-size:16px}
}
/* ruota animata (wheel.js) */
.astro-wheel{width:100%;height:100%;overflow:visible;font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols",Georgia,serif}
.aw-line{fill:none;stroke-width:1}
.aw-faint{stroke:#ffffff1c}
.aw-gold{stroke:#e7c77c59}
.aw-dash{stroke-dasharray:2 5}
.aw-draw{stroke-dasharray:1;stroke-dashoffset:1}
.astro-wheel.is-ready .aw-draw{animation:awDraw 2.2s cubic-bezier(.6,.1,.2,1) forwards}
.aw-seg{stroke:none;opacity:.14}
.aw-fire{fill:#ff9a6b}
.aw-earth{fill:#9fd27a}
.aw-air{fill:#8fdcff}
.aw-water{fill:#7f8fff}
.aw-ticks{stroke:#e7c77c55;stroke-width:.8}
.aw-sign{fill:var(--gold2);font-size:23px;text-anchor:middle;dominant-baseline:central;opacity:.92}
.aw-house{stroke:#ffffff12;stroke-width:1}
.aw-axis{stroke:#e7c77c40;stroke-width:1}
.aw-axis-label{fill:#e7c77c99;font:600 8.5px Inter,system-ui,sans-serif;letter-spacing:.12em;text-anchor:middle;dominant-baseline:central}
.aw-aspect{stroke-width:1.1;stroke-linecap:round}
.aw-soft{stroke:#9fb4ff}
.aw-hard{stroke:#e7c77c}
.aw-planet-disc{fill:#0c0d22;stroke:#e7c77c66;stroke-width:1}
.aw-planet-glyph{fill:var(--gold2);font-size:18px;text-anchor:middle;dominant-baseline:central}
.aw-planet:hover .aw-planet-disc{stroke:var(--gold2);fill:#1a1840}
.aw-planet{cursor:default}
.aw-planet-tick{stroke:#e7c77c80;stroke-width:1}
.aw-planet-dot{fill:var(--gold2)}
.aw-comet circle{fill:#fff4c9}
.aw-core-disc{stroke:none}
.aw-spin-dash{stroke:#e7c77c40;stroke-dasharray:1 6;transform-origin:300px 300px;animation:spin 90s linear infinite}
.aw-brand{fill:#d9d0f5;font:600 8px Inter,system-ui,sans-serif;letter-spacing:.34em;text-anchor:middle}
.aw-star{fill:url(#aw-starfill)}
.aw-star-back{fill:#e7c77c;opacity:.5}
.aw-star,.aw-star-back,.aw-star-halo,.aw-ripple,.aw-rays,.aw-sparkle{transform-box:fill-box;transform-origin:center}
.aw-star{animation:awStar 7s ease-in-out infinite}
.aw-star-back{animation:awStarBack 7s ease-in-out infinite}
.aw-star-halo{animation:awHalo 7s ease-in-out infinite}
.aw-ripple{fill:none;stroke:#f3d58e;stroke-width:1;opacity:0;animation:awRipple 5s ease-out infinite}
.aw-rays{animation:spin 80s linear infinite}
.aw-ray{fill:#fff1c2;opacity:.55;animation:awRay 7s ease-in-out infinite}
.aw-ray-soft{opacity:.3;animation-delay:-3.5s}
.aw-sparkle{fill:#fff4d0;opacity:0;animation:awTwinkle 5.5s ease-in-out infinite}
.aw-orbit-path{fill:none;stroke:#e7c77c1f;stroke-width:1}
.aw-moonlet{fill:#f6e3ae;transform-origin:300px 308px;animation:spin 22s linear infinite}
@keyframes awStar{0%,100%{transform:scale(1) rotate(0)}25%{transform:scale(1.05) rotate(5deg)}50%{transform:scale(1.1) rotate(0)}75%{transform:scale(1.04) rotate(-5deg)}}
@keyframes awStarBack{0%,100%{transform:rotate(45deg) scale(.5)}50%{transform:rotate(90deg) scale(.58)}}
@keyframes awHalo{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.18)}}
@keyframes awRipple{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(3.4)}}
@keyframes awRay{0%,100%{opacity:.25}50%{opacity:.7}}
@keyframes awTwinkle{0%,62%,100%{opacity:0;transform:scale(.2)}72%{opacity:1;transform:scale(1)}82%{opacity:0;transform:scale(.3)}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important} }

/* iPhone / iPad: margini sicuri per notch e barra Home (con viewport-fit=cover), niente riquadro al tocco */
:root{--gutter:28px}
@media (max-width:520px){ :root{--gutter:20px} }
.wrap{padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
a,button{-webkit-tap-highlight-color:transparent}
.btn,.langs button{touch-action:manipulation}
/* schermi molto stretti: se il testo non ci sta va a capo, con angoli più morbidi invece della pillola */
@media (max-width:359px){ .btn{white-space:normal;text-align:center;border-radius:18px;padding:12px 18px;line-height:1.25} }