/* MyBestsPlays - sito pubblico (landing e pagine legali). Nessun font esterno, nessun cookie, nessun tracciamento. */
:root{
  --plum:#19001E; --plum-2:#24062C; --violet:#7A23FD; --violet-2:#8B3DFF; --pink:#FD90FB;
  --text:#F4ECF7; --muted:#C9B8D2; --line:rgba(253,144,251,.22);
  --display:"Avenir Next","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--plum);color:var(--text);font:400 1.0625rem/1.65 var(--body)}
a{color:var(--pink)} a:hover{color:#fff}
a:focus-visible,button:focus-visible{outline:3px solid var(--pink);outline-offset:3px;border-radius:4px}
.wrap{max-width:68rem;margin:0 auto;padding:0 1.5rem}
header.top{border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1.1rem;padding-bottom:1.1rem}
.mark{font:800 1.35rem/1 var(--display);letter-spacing:-.02em;color:var(--text);text-decoration:none}
.mark span{color:var(--pink)}
nav.top a{color:var(--muted);text-decoration:none;margin-left:1.25rem;font-size:.95rem}
nav.top a:hover{color:var(--text)}

/* Hero: il campo da padel visto dall'alto è l'unico elemento grafico del sito */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center;padding:5rem 0 4.5rem}
.hero h1{font:800 clamp(2.4rem,5.6vw,4.4rem)/1.02 var(--display);letter-spacing:-.035em;margin:0 0 1.25rem}
.hero p.lead{font-size:1.2rem;color:var(--muted);max-width:34rem;margin:0 0 2rem}
.stores{display:flex;flex-wrap:wrap;gap:.75rem}
.store{display:inline-block;padding:.8rem 1.2rem;border:1px solid var(--line);border-radius:.6rem;color:var(--text);text-decoration:none;font-weight:600}
.store small{display:block;font-weight:400;color:var(--muted);font-size:.8rem}
.court{position:relative;width:14rem;max-width:100%;aspect-ratio:1/2;margin:0 auto;border:3px solid var(--pink);border-radius:.4rem;
  background:linear-gradient(180deg,var(--violet) 0%,var(--violet-2) 100%);box-shadow:0 0 0 10px var(--plum-2)}
.court::before{content:"";position:absolute;left:-8%;right:-8%;top:calc(50% - 2px);height:4px;background:#fff;opacity:.9} /* rete */
.court::after{content:"";position:absolute;inset:30% 0;border-top:2px solid rgba(255,255,255,.75);border-bottom:2px solid rgba(255,255,255,.75)}
.court i{position:absolute;left:50%;top:30%;bottom:30%;border-left:2px solid rgba(255,255,255,.75)}
.court b{position:absolute;width:9%;aspect-ratio:1;border-radius:50%;background:#E8FF5A;right:24%;top:18%;box-shadow:0 0 18px rgba(232,255,90,.55)}

.how{border-top:1px solid var(--line);padding:4rem 0}
.how h2,.page h1{font:800 clamp(1.8rem,3.4vw,2.6rem)/1.1 var(--display);letter-spacing:-.025em;margin:0 0 2rem}
.how ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;counter-reset:s}
.how li{counter-increment:s;padding-top:3.2rem;position:relative}
.how li::before{content:counter(s);position:absolute;top:0;left:0;font:800 2.2rem/1 var(--display);color:var(--pink)}
.how h3{font:700 1.15rem/1.3 var(--display);margin:0 0 .4rem}
.how p{margin:0;color:var(--muted)}
.centri{border-top:1px solid var(--line);padding:3.5rem 0}
.centri p{max-width:42rem;color:var(--muted);margin:.3rem 0 0}
.centri strong{color:var(--text);font:700 1.2rem/1.3 var(--display)}

/* Pagine di testo */
.page{padding:3.5rem 0 4rem;max-width:44rem}
.page .agg{color:var(--muted);margin:-1.2rem 0 2.2rem;font-size:.95rem}
.page h2{font:700 1.3rem/1.3 var(--display);margin:2.2rem 0 .6rem}
.page p,.page li{max-width:68ch}
.da-inserire{border:2px dashed var(--pink);border-radius:.6rem;padding:1.2rem 1.4rem;color:var(--pink);background:rgba(253,144,251,.06)}

footer{border-top:1px solid var(--line);padding:2rem 0 2.5rem;color:var(--muted);font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem}
footer nav a{color:var(--muted);margin-right:1.1rem}
footer nav a:hover{color:var(--text)}

@media (max-width:760px){
  .hero{grid-template-columns:1fr;padding:3rem 0}
  .court{width:8.5rem}
  .how ol{grid-template-columns:1fr;gap:1.5rem}
  nav.top a{margin-left:.8rem}
}
@media (prefers-reduced-motion:no-preference){
  .court b{animation:volo 3.2s ease-in-out infinite alternate}
  @keyframes volo{from{right:24%;top:18%}to{right:62%;top:72%}}
}