/* =========================================================
   GoldEXP Network — Design System
   Concept: "Il Laboratorio tra le Stelle"
   Tre boccette alchemiche (rosa · blu · verde) del logo che si
   fondono, sospese in un cielo notturno — richiamo diretto al
   trio GoldEXP, al banco per pozioni di Minecraft e alla
   passione per l'astronomia di Benny.
   ========================================================= */

:root{
  /* --- Colore --- */
  --bg:            #0A0E1C;
  --bg-panel:      #11142A;
  --bg-panel-2:    #161A35;
  --bg-elevated:   #1B2040;

  --ink:           #F3F2FB;
  --ink-muted:     #A7ACCB;
  --ink-faint:     #6C7196;

  --pink:          #FF5A52;
  --pink-deep:     #C2302A;
  --pink-glow:     rgba(255,90,82,.35);

  --blue:          #7C89FF;
  --blue-deep:     #3A3FB8;
  --blue-glow:     rgba(124,137,255,.38);

  --green:         #59E3A6;
  --green-deep:    #1FAF77;
  --green-glow:    rgba(89,227,166,.32);

  --border:        rgba(255,255,255,.09);
  --border-soft:   rgba(255,255,255,.05);

  /* --- Tipografia --- */
  --f-display: "Space Grotesk", "Onest", sans-serif;
  --f-body:    "Onest", "Space Grotesk", sans-serif;
  --f-mono:    "JetBrains Mono", monospace;

  /* --- Layout --- */
  --maxw: 1180px;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --nav-h: 64px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Animated particle canvas (js/particles.js) */
#bg-particles{
  position: fixed; inset: 0;
  z-index: -2;
  pointer-events: none;
  display: block;
}

body::after{
  content:"";
  position: fixed; inset: 0; z-index: -3;
  background:
    radial-gradient(ellipse 900px 500px at 15% -5%, rgba(124,137,255,.16), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(255,90,82,.12), transparent 55%),
    radial-gradient(ellipse 800px 600px at 50% 100%, rgba(89,227,166,.10), transparent 55%),
    var(--bg);
}

img{ max-width: 100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin:0; padding:0; }
button{ font-family: inherit; }

.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section{ padding: 64px 0; position: relative; }
.section-tight{ padding: 40px 0; }
@media (max-width: 780px){
  .section{ padding: 46px 0; }
  .section-tight{ padding: 30px 0; }
}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 12px;
}
.eyebrow::before{
  content:"";
  width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), var(--blue), var(--green));
  box-shadow: 0 0 10px var(--blue-glow);
}

h1,h2,h3,h4,h5,h6{
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.01em;
  margin: 0 0 .4em;
  color: var(--ink);
}
h1{ font-size: clamp(2.1rem, 4.4vw, 3.3rem); }
h2{ font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3{ font-size: 1.15rem; }
p{ margin: 0 0 1em; color: var(--ink-muted); }
.lead{ font-size: 1.05rem; color: var(--ink-muted); max-width: 600px; }

.section-head{ max-width: 640px; margin-bottom: 32px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head p{ margin:0; }

.text-grad{
  background: linear-gradient(100deg, var(--pink) 0%, var(--blue) 52%, var(--green) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding: 11px 22px;
  border-radius: 999px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: .9rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{
  background: linear-gradient(120deg, var(--pink), var(--blue) 60%, var(--green));
  background-size: 180% 180%;
  background-position: 0% 50%;
  color: #0A0E1C;
  box-shadow: 0 10px 30px -10px var(--blue-glow);
}
.btn-primary:hover{ background-position: 100% 50%; box-shadow: 0 14px 34px -8px var(--blue-glow); transform: translateY(-2px); }
.btn-ghost{
  background: rgba(255,255,255,.04);
  border-color: var(--border);
  color: var(--ink);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); transform: translateY(-2px); }
.btn svg{ width:16px; height:16px; flex:none; }

.btn-sm{ padding: 8px 17px; font-size: .8rem; }
.btn-block{ width:100%; }

/* ---------- Navbar ---------- */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  height: var(--nav-h);
  display:flex; align-items:center;
  background: rgba(10,14,28,.55);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--border-soft);
  transition: background .3s ease, border-color .3s ease;
}
.nav.scrolled{ background: rgba(10,14,28,.86); border-bottom-color: var(--border); }
.nav .container{ display:flex; align-items:center; justify-content:space-between; gap: 24px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height: 36px; width: 36px; border-radius: 50%; }
.brand span{ font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }

.nav-links{ display:flex; align-items:center; gap: 4px; }
.nav-links a{
  padding: 7px 13px; border-radius: 999px;
  font-size: .88rem; font-weight: 500; color: var(--ink-muted);
  transition: color .2s ease, background .2s ease;
}
.nav-links a:hover{ color: var(--ink); background: rgba(255,255,255,.06); }
.nav-links a.active{ color: var(--ink); background: rgba(255,255,255,.08); }

.nav-right{ display:flex; align-items:center; gap:12px; }
.nav-toggle{
  display:none; width: 42px; height: 42px; border-radius: 12px;
  background: rgba(255,255,255,.05); border:1px solid var(--border);
  align-items:center; justify-content:center; cursor:pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width: 18px; height: 2px; background: var(--ink);
  position: relative; transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }
.nav-toggle.open span{ background: transparent; }
.nav-toggle.open span::before{ top:0; transform: rotate(45deg); background: var(--ink); }
.nav-toggle.open span::after{ top:0; transform: rotate(-45deg); background: var(--ink); }

@media (max-width: 980px){
  .nav-links{
    position: fixed; top: var(--nav-h); left:0; right:0;
    flex-direction: column; align-items: stretch; gap:2px;
    background: rgba(10,14,28,.97); backdrop-filter: blur(16px);
    padding: 14px; border-bottom: 1px solid var(--border);
    transform: translateY(-8px); opacity:0; pointer-events:none;
    transition: transform .25s ease, opacity .25s ease;
  }
  .nav-links.open{ transform: translateY(0); opacity:1; pointer-events:auto; }
  .nav-links a{ padding: 13px 16px; }
  .nav-toggle{ display:flex; }
  .nav-cta{ display:none; }
}

/* ---------- Hero brand mark (fused into the background) ---------- */
.logo-fuse{ position: relative; width: 82%; max-width: 280px; margin: 0 auto; }
.logo-fuse img{
  width:100%; display:block; border-radius: 50%;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 46%, rgba(0,0,0,.5) 62%, transparent 82%);
  mask-image: radial-gradient(circle at 50% 50%, #000 46%, rgba(0,0,0,.5) 62%, transparent 82%);
  filter: saturate(1.08) contrast(1.03);
}
.glow-pulse{ animation: pulse 4.5s ease-in-out infinite; }
@keyframes pulse{
  0%,100%{ opacity:.75; transform: scale(1); }
  50%{ opacity:1; transform: scale(1.035); }
}
.float{ animation: floaty 6s ease-in-out infinite; }
@keyframes floaty{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-14px); }
}

/* ---------- Hero ---------- */
.hero{
  position: relative;
  padding-top: calc(var(--nav-h) + 54px);
  padding-bottom: 54px;
  overflow: hidden;
}
.hero .container{
  display:grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items:center;
}
.hero-badges{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 18px; }
.hero-badge{
  display:flex; align-items:center; gap:8px;
  padding: 7px 13px; border-radius: 999px;
  background: rgba(255,255,255,.04); border:1px solid var(--border);
  font-size: .78rem; color: var(--ink-muted); font-family: var(--f-mono);
}
.hero-badge i{ width:7px; height:7px; border-radius:50%; display:inline-block; }
.hero-actions{ display:flex; gap:12px; margin-top: 22px; flex-wrap:wrap; }
.hero-visual{ position:relative; display:flex; justify-content:center; }
.hero-visual .ring{
  position:absolute; inset: -6%;
  border-radius:50%;
  background: conic-gradient(from 0deg, var(--pink-glow), var(--blue-glow), var(--green-glow), var(--pink-glow));
  filter: blur(50px); opacity:.55; z-index:-1;
}

@media (max-width: 900px){
  .hero .container{ grid-template-columns: 1fr; text-align:center; }
  .hero-badges, .hero-actions{ justify-content:center; }
  .hero-visual{ order:-1; max-width: 280px; margin: 0 auto 4px; }
}

/* ---------- Cards & grid ---------- */
.grid{ display:grid; gap: 14px; }
.grid-2{ grid-template-columns: repeat(2,1fr); }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-4{ grid-template-columns: repeat(4,1fr); }
@media (max-width: 980px){ .grid-4{ grid-template-columns: repeat(2,1fr);} .grid-3{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 680px){ .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; } }

.card{
  background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  position: relative;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.card:hover{ transform: translateY(-4px); border-color: rgba(255,255,255,.18); }
.card::before{
  content:""; position:absolute; inset:0; border-radius: inherit;
  padding:1px; pointer-events:none; opacity:0; transition: opacity .3s ease;
  background: linear-gradient(135deg, var(--c1,var(--pink)), transparent 40%, var(--c2,var(--green)) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.card:hover::before{ opacity:.6; }

.card[data-hue="pink"]{ --c1: var(--pink); --c2: var(--pink-deep); }
.card[data-hue="blue"]{ --c1: var(--blue); --c2: var(--blue-deep); }
.card[data-hue="green"]{ --c1: var(--green); --c2: var(--green-deep); }
.card[data-hue="pink"]:hover{ box-shadow: 0 14px 32px -20px var(--pink-glow); }
.card[data-hue="blue"]:hover{ box-shadow: 0 14px 32px -20px var(--blue-glow); }
.card[data-hue="green"]:hover{ box-shadow: 0 14px 32px -20px var(--green-glow); }

.card-icon{
  width: 36px; height:36px; border-radius: 11px;
  display:flex; align-items:center; justify-content:center;
  font-size: 1.1rem; margin-bottom: 12px;
  background: rgba(255,255,255,.05); border: 1px solid var(--border);
}
.card[data-hue="pink"] .card-icon{ color: var(--pink); box-shadow: inset 0 0 0 1px rgba(255,90,82,.25); }
.card[data-hue="blue"] .card-icon{ color: var(--blue); box-shadow: inset 0 0 0 1px rgba(124,137,255,.25); }
.card[data-hue="green"] .card-icon{ color: var(--green); box-shadow: inset 0 0 0 1px rgba(89,227,166,.25); }

.card h3{ margin-bottom: 6px; font-size: 1.02rem; }
.card p{ margin:0; font-size: .88rem; }
.card-link{ display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:.83rem; font-weight:600; color: var(--ink); }
.card-link svg{ width:14px; height:14px; transition: transform .2s ease; }
.card:hover .card-link svg{ transform: translateX(3px); }

/* ---------- Panels / alt background ---------- */
.panel{ background: var(--bg-panel); border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); }

/* ---------- Story / split section ---------- */
.split{ display:grid; grid-template-columns: .85fr 1.15fr; gap: 40px; align-items:center; }
@media (max-width: 900px){ .split{ grid-template-columns: 1fr; gap: 26px; } }
.split-media{ position:relative; }

/* Gradient-bordered frame, reused by split media, YouTube embed, etc. */
.frame{
  border-radius: var(--radius-lg);
  padding: 3px;
  background: linear-gradient(135deg, var(--pink), var(--blue), var(--green));
}
.frame-inner{
  border-radius: calc(var(--radius-lg) - 3px);
  overflow:hidden; background: var(--bg-panel);
}
.split-media img{ width:100%; display:block; }

/* ---------- Team ---------- */
.team-card{
  background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow:hidden;
  transition: transform .3s ease;
}
.team-card:hover{ transform: translateY(-6px); }
.team-photo{ position:relative; aspect-ratio: 1/1; overflow:hidden; }
.team-photo img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.team-card:hover .team-photo img{ transform: scale(1.06); }
.team-photo::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 55%, rgba(10,14,28,.9));
}
.team-photo .tag{
  position:absolute; bottom:10px; left:10px; z-index:2;
  font-family: var(--f-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  padding: 4px 9px; border-radius: 999px; backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.25);
}
.team-card[data-hue="pink"] .team-photo .tag{ background: rgba(255,90,82,.22); color:#ffd9d4; }
.team-card[data-hue="blue"] .team-photo .tag{ background: rgba(124,137,255,.22); color:#dbdfff; }
.team-card[data-hue="green"] .team-photo .tag{ background: rgba(89,227,166,.22); color:#d4ffee; }
.team-body{ padding: 16px 18px 20px; }
.team-body h3{ margin-bottom:3px; }
.team-role{ font-family: var(--f-mono); font-size:.74rem; letter-spacing:.05em; margin-bottom: 8px; display:block; }
.team-card[data-hue="pink"] .team-role{ color: var(--pink); }
.team-card[data-hue="blue"] .team-role{ color: var(--blue); }
.team-card[data-hue="green"] .team-role{ color: var(--green); }
.team-body p{ font-size:.86rem; margin:0; }

/* ---------- Socials grid ---------- */
.soc-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
@media (max-width: 900px){ .soc-grid{ grid-template-columns: repeat(3,1fr);} }
@media (max-width: 620px){ .soc-grid{ grid-template-columns: repeat(2,1fr);} }
.soc-card{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding: 18px 10px;
  border-radius: var(--radius);
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
  text-align:center;
}
.soc-card:hover{ transform: translateY(-4px); background: var(--bg-elevated); }
.soc-icon{
  width: 40px; height:40px; border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  font-size: 1.2rem;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
}
.soc-card span{ font-weight:600; font-size:.85rem; }
.soc-card small{ color: var(--ink-faint); font-size:.72rem; }
.soc-card[data-hue="pink"]:hover{ border-color: var(--pink); box-shadow: 0 14px 36px -18px var(--pink-glow); }
.soc-card[data-hue="blue"]:hover{ border-color: var(--blue); box-shadow: 0 14px 36px -18px var(--blue-glow); }
.soc-card[data-hue="green"]:hover{ border-color: var(--green); box-shadow: 0 14px 36px -18px var(--green-glow); }
.soc-card[data-hue="pink"] .soc-icon{ color: var(--pink); }
.soc-card[data-hue="blue"] .soc-icon{ color: var(--blue); }
.soc-card[data-hue="green"] .soc-icon{ color: var(--green); }

/* ---------- Video ---------- */
.video-box{
  position: relative; border-radius: var(--radius-lg); overflow:hidden;
  border: 1px solid var(--border); cursor:pointer; aspect-ratio: 16/9;
}
.video-box img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; filter: brightness(.65); }
.video-box:hover img{ transform: scale(1.04); }
.video-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.video-play span{
  width: 66px; height: 66px; border-radius:50%;
  background: rgba(255,255,255,.12); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:center;
  transition: transform .25s ease, background .25s ease;
}
.video-box:hover .video-play span{ transform: scale(1.08); background: rgba(255,255,255,.2); }
.video-play svg{ width:22px; height:22px; margin-left:3px; }

/* ---------- YouTube embed (compact) ---------- */
.yt-embed{ max-width: 560px; margin: 0 auto; }
.yt-embed .frame-inner{ aspect-ratio: 16/9; }
.yt-embed iframe{ width:100%; height:100%; border:0; display:block; }

.modal{
  position: fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center;
  background: rgba(6,8,16,.88); backdrop-filter: blur(6px);
  padding: 24px;
}
.modal.open{ display:flex; }
.modal-inner{ width:100%; max-width: 960px; aspect-ratio:16/9; position:relative; }
.modal-inner iframe{ width:100%; height:100%; border-radius: var(--radius); border:0; }
.modal-close{
  position:absolute; top:-46px; right:0; width:36px; height:36px; border-radius:50%;
  background: rgba(255,255,255,.08); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink);
}

/* ---------- Shop ---------- */
.shop-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:12px; }
@media (max-width: 900px){ .shop-grid{ grid-template-columns: repeat(2,1fr);} }
.shop-card{
  border-radius: var(--radius); overflow:hidden; border:1px solid var(--border);
  background: var(--bg-panel-2); transition: transform .3s ease, border-color .3s ease;
}
.shop-card:hover{ transform: translateY(-4px); border-color: rgba(255,255,255,.2); }
.shop-photo{ aspect-ratio: 1/1; overflow:hidden; background:#fff; }
.shop-photo img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.shop-card:hover .shop-photo img{ transform: scale(1.06); }
.shop-info{ padding: 10px 14px 14px; }
.shop-info span{ font-weight:600; font-size:.85rem; }

/* ---------- FAQ ---------- */
.faq{ max-width: 800px; margin: 0 auto; }
.faq-item{
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-panel-2);
  margin-bottom: 10px; overflow:hidden;
}
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap: 16px; padding: 15px 20px; background:none; border:none; color: var(--ink);
  font-family: var(--f-display); font-weight:600; font-size: .95rem; cursor:pointer; text-align:left;
}
.faq-q .plus{
  width: 22px; height:22px; border-radius:50%; flex:none;
  border:1px solid var(--border); position:relative;
  transition: transform .3s ease, border-color .3s ease;
}
.faq-q .plus::before, .faq-q .plus::after{
  content:""; position:absolute; background: var(--ink-muted);
  top:50%; left:50%; transform: translate(-50%,-50%);
}
.faq-q .plus::before{ width:9px; height:2px; }
.faq-q .plus::after{ width:2px; height:9px; transition: opacity .25s ease; }
.faq-item.open .faq-q .plus{ transform: rotate(45deg); border-color: var(--blue); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .35s ease; }
.faq-a-inner{ padding: 0 20px 18px; font-size: .9rem; color: var(--ink-muted); }
.faq-a-inner strong{ color: var(--ink); }
.faq-a-inner a{ color: var(--blue); font-weight:600; }
.faq-a-inner a:hover{ text-decoration: underline; }

/* ---------- CTA band ---------- */
.cta-band{
  position:relative; overflow:hidden;
  border-radius: var(--radius-lg);
  padding: 42px 36px;
  text-align:center;
  background: linear-gradient(135deg, rgba(255,90,82,.16), rgba(124,137,255,.16) 50%, rgba(89,227,166,.14));
  border: 1px solid var(--border);
}
.cta-band h2{ margin-bottom: 10px; }
.cta-band p{ max-width: 500px; margin: 0 auto 22px; }
.cta-band .btn{ margin: 0 5px; }

/* ---------- Footer ---------- */
.footer{ padding: 36px 0 24px; border-top: 1px solid var(--border-soft); }
.footer-top{ display:flex; justify-content:space-between; gap: 32px; flex-wrap:wrap; margin-bottom: 26px; }
.footer-brand{ max-width: 300px; }
.footer-brand .brand{ margin-bottom: 10px; }
.footer-brand p{ font-size: .85rem; }
.footer-cols{ display:flex; gap: 44px; flex-wrap:wrap; }
.footer-col h4{ font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-faint); margin-bottom: 10px; font-family: var(--f-mono); font-weight:500;}
.footer-col a{ display:block; padding: 4px 0; font-size:.86rem; color: var(--ink-muted); transition: color .2s ease; }
.footer-col a:hover{ color: var(--ink); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  padding-top: 18px; border-top: 1px solid var(--border-soft);
  font-size:.78rem; color: var(--ink-faint);
}
.footer-social{ display:flex; gap:8px; }
.footer-social a{
  width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.04); border:1px solid var(--border); font-size:.9rem;
  transition: background .2s ease, transform .2s ease;
}
.footer-social a:hover{ background: rgba(255,255,255,.1); transform: translateY(-2px); }

/* ---------- Utility ---------- */
.mt-0{ margin-top:0 !important; }
.center{ text-align:center; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform: translateY(0); }

/* ---------- Page hero (sotto-pagine) ---------- */
.page-hero{
  padding-top: calc(var(--nav-h) + 44px);
  padding-bottom: 38px;
  position:relative;
}
.page-hero .eyebrow{ justify-content:center; }
.page-hero.center{ text-align:center; }
.page-hero .lead{ margin-left:auto; margin-right:auto; }

/* ---------- IP box (Minecraft) ---------- */
.ip-box{
  display:flex; align-items:center; justify-content:space-between; gap: 14px;
  background: var(--bg-panel-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 16px; margin-bottom: 9px;
}
.ip-box .lbl{ font-family: var(--f-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-faint); display:block; margin-bottom:3px;}
.ip-box .val{ font-family: var(--f-mono); font-size: .98rem; color: var(--ink); }
.copy-btn{
  flex:none; width:34px; height:34px; border-radius:9px;
  background: rgba(255,255,255,.05); border:1px solid var(--border); color: var(--ink-muted);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition: background .2s ease, color .2s ease;
}
.copy-btn:hover{ background: rgba(255,255,255,.1); color: var(--ink); }
.copy-btn.copied{ color: var(--green); border-color: var(--green); }

/* ---------- Server status ---------- */
.status-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 7px 13px 7px 11px; border-radius: 999px;
  background: var(--bg-panel-2); border: 1px solid var(--border);
  font-family: var(--f-mono); font-size: .78rem; color: var(--ink-muted);
}
.status-dot{
  width:8px; height:8px; border-radius:50%; flex:none;
  background: var(--ink-faint);
  transition: background .3s ease, box-shadow .3s ease;
}
.status-dot.checking{ background: #9aa1c2; animation: statusBlink 1.1s ease-in-out infinite; }
.status-dot.online{ background: var(--green); box-shadow: 0 0 9px var(--green); }
.status-dot.offline{ background: var(--pink-deep); box-shadow: 0 0 9px var(--pink-deep); }
.status-dot.unknown{ background: var(--ink-faint); }
@keyframes statusBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
.status-refresh{
  margin-left:2px; width:20px; height:20px; flex:none;
  background:none; border:none; color: var(--ink-faint); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: color .2s ease, transform .4s ease;
}
.status-refresh:hover{ color: var(--ink); transform: rotate(120deg); }
.status-refresh svg{ width:13px; height:13px; }
.hero-badge.status-pill{ font-size:.78rem; }

/* ---------- Countdown ---------- */
.countdown{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin: 34px 0; }
.cd-cell{
  width: 100px; padding: 18px 0; border-radius: var(--radius);
  background: var(--bg-panel-2); border: 1px solid var(--border); text-align:center;
}
.cd-cell b{ display:block; font-family: var(--f-display); font-size: 2rem; }
.cd-cell span{ font-family: var(--f-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-faint); }
.cd-cell:nth-child(1) b{ color: var(--pink); }
.cd-cell:nth-child(2) b{ color: var(--blue); }
.cd-cell:nth-child(3) b{ color: var(--green); }
.cd-cell:nth-child(4) b{ color: var(--ink); }

/* ---------- Calendar embed ---------- */
.cal-frame{
  border-radius: var(--radius-lg); overflow:hidden; border: 1px solid var(--border);
  background: var(--bg-panel-2);
}
.cal-frame iframe{ width:100%; height: 600px; border:0; display:block; filter: invert(.92) hue-rotate(180deg) contrast(.92); }

/* ---------- Rules list (torneo / vanilla) ---------- */
.rule-split{ display:grid; grid-template-columns: .95fr 1.05fr; gap: 40px; align-items:center; }
@media (max-width: 900px){ .rule-split{ grid-template-columns:1fr; gap: 22px; } }
.rule-split.rev{ direction: rtl; }
.rule-split.rev > *{ direction: ltr; }
.num-tag{
  font-family: var(--f-mono); font-size: .76rem; letter-spacing:.12em;
  color: var(--ink-faint); margin-bottom: 10px; display:block;
}

.bit-table{ display:grid; gap:8px; }
.bit-row{
  display:flex; align-items:center; gap:14px;
  padding: 12px 16px; border-radius: 12px;
  background: var(--bg-panel-2); border: 1px solid var(--border);
}
.bit-row b{ font-family: var(--f-mono); flex:none; min-width: 84px; padding: 5px 10px; border-radius:999px; text-align:center; font-size:.78rem;}
.bit-row:nth-child(6n+1) b{ background: rgba(255,90,82,.15); color: var(--pink); }
.bit-row:nth-child(6n+2) b{ background: rgba(124,137,255,.15); color: var(--blue); }
.bit-row:nth-child(6n+3) b{ background: rgba(89,227,166,.15); color: var(--green); }
.bit-row:nth-child(6n+4) b{ background: rgba(255,90,82,.15); color: var(--pink); }
.bit-row:nth-child(6n+5) b{ background: rgba(124,137,255,.15); color: var(--blue); }
.bit-row:nth-child(6n+6) b{ background: rgba(89,227,166,.15); color: var(--green); }
.bit-row span{ font-size:.87rem; color: var(--ink-muted); }

.note-box{
  border-left: 3px solid var(--blue);
  background: var(--bg-panel-2);
  padding: 14px 18px; border-radius: 0 12px 12px 0; margin-top: 16px;
  font-size:.87rem; color: var(--ink-muted);
}

/* Icon sizing (inline svg icon set) */
.card-icon svg{ width:22px; height:22px; }
.soc-icon svg{ width:26px; height:26px; }
.footer-social a svg{ width:16px; height:16px; }
.footer-social a{ color: var(--ink-muted); }
.footer-social a:hover{ color: var(--ink); }
.video-play svg{ color:#fff; }
.hero-badge svg{ width:14px; height:14px; }
.top-btn svg{ width:18px; height:18px; transform: rotate(-90deg); }
.copy-btn svg{ width:16px; height:16px; }
.card-link svg{ color: inherit; }

/* Small bullet list used inside cards (e.g. SkyGold "Personalizzazione") */
.mini-list{ margin:10px 0 0; padding:0; list-style:none; }
.mini-list li{
  position:relative; padding-left:17px; margin-bottom:6px;
  color:var(--ink-muted); font-size:.88rem; line-height:1.5;
}
.mini-list li:last-child{ margin-bottom:0; }
.mini-list li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:6px; height:6px; border-radius:50%;
  background: var(--c1, var(--blue));
}

/* Back-to-top */
.top-btn{
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 46px; height:46px; border-radius: 50%;
  background: rgba(20,24,45,.85); border: 1px solid var(--border);
  backdrop-filter: blur(8px);
  display:flex; align-items:center; justify-content:center;
  color: var(--ink); cursor:pointer;
  opacity:0; pointer-events:none; transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
}
.top-btn.show{ opacity:1; pointer-events:auto; transform: translateY(0); }

/* ---------- Image copy deterrents ----------
   Discourages casual right-click-save / drag-out-to-desktop.
   Does not (and cannot) prevent downloading via dev tools, "Save page as",
   or direct access to the file URL: the browser must download image bytes
   to display them at all, so this is friction, not real protection. */
img{
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}