/* =========================================================
   KEBAB HUB — stile della pagina principale
   ========================================================= */
:root{
  --bg:#08080a;
  --panel:#131318;
  --panel-2:#18181f;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.16);
  --text:#f2f0ee;
  --muted:#9c98a3;
  --red:#e3261d;
  --orange:#ff8a1f;
  --gold:#ffc83a;
  --craft:#7c6cff;
  --craft-2:#2fd3c0;
  --head:'Unbounded',system-ui,sans-serif;
  --body:'Outfit',system-ui,sans-serif;
  color-scheme:dark;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100%}
body{
  font-family:var(--body);background:var(--bg);color:var(--text);
  display:flex;flex-direction:column;min-height:100svh;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.px{image-rendering:pixelated}

/* ---------- sfondo: nero pulito ---------- */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:#08080a}
.bg-grid,.bg-glow{display:none}
.bg-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;opacity:.45;
  mask-image:radial-gradient(70% 60% at 50% 40%,#000 20%,transparent 80%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000 20%,transparent 80%);
}
.bg-glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.35;animation:drift 18s ease-in-out infinite alternate}
.g1{width:520px;height:520px;background:var(--red);left:50%;top:38%;transform:translate(-50%,-50%);opacity:.22}
.g2{width:380px;height:380px;background:var(--craft);left:8%;top:60%;animation-delay:-6s;opacity:.16}
.g3{width:380px;height:380px;background:#555;right:6%;top:65%;animation-delay:-11s;opacity:.12}
@keyframes drift{from{translate:0 0}to{translate:40px -30px}}

/* ---------- barra in alto ---------- */
.top{
  width:min(1240px,100% - 32px);margin:22px auto 0;
  display:flex;justify-content:space-between;align-items:center;
}
.brand{display:flex;align-items:center;gap:.7rem;font-family:var(--head);font-weight:500;font-size:1.05rem;letter-spacing:.01em}
.brand b{font-weight:800}
.brand-mark{
  width:38px;height:38px;display:grid;place-items:center;border-radius:10px;
  background:linear-gradient(135deg,var(--red),#7a0b07);font-weight:800;font-size:1rem;
  box-shadow:0 6px 18px rgba(227,38,29,.35),inset 0 1px 0 rgba(255,255,255,.25);
}
.top-link{
  display:flex;align-items:center;gap:.5rem;padding:.55rem 1rem;border-radius:999px;
  border:1px solid var(--line-2);color:var(--muted);font-weight:500;font-size:.95rem;transition:.2s;
}
.top-link:hover{color:#fff;border-color:#5865f2;background:rgba(88,101,242,.15)}

/* ---------- titolo ---------- */
main{flex:1;width:min(1240px,100% - 32px);margin:0 auto;padding:56px 0 40px}
.intro{text-align:center;margin-bottom:48px}
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:.4rem .9rem;background:rgba(255,255,255,.02)
}
/* parola che cambia nell'etichetta */
.rotator{display:inline-block;color:#fff;font-weight:600;text-align:left;white-space:nowrap;transition:width .35s ease}
.rotator span{display:inline-block;background:linear-gradient(90deg,var(--orange),var(--red));-webkit-background-clip:text;background-clip:text;color:transparent;transition:opacity .35s ease,transform .35s ease}
.rotator span.out{opacity:0;transform:translateY(-8px)}
.rotator span.in{opacity:0;transform:translateY(8px)}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 10px var(--orange)}
.intro h1{
  font-family:var(--head);font-weight:800;font-size:clamp(2.6rem,7vw,5.4rem);letter-spacing:-.03em;line-height:1;
  margin:1.1rem 0 1rem;
}
.intro h1 em{
  font-style:normal;
  background:linear-gradient(90deg,var(--orange),var(--red));-webkit-background-clip:text;background-clip:text;color:transparent;
}
.intro p{color:var(--muted);font-size:1.12rem;max-width:560px;margin:0 auto;font-weight:300;line-height:1.6}

/* ---------- le 3 card ---------- */
.cards{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:22px;align-items:stretch}
.card{
  --accent:#fff;
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:22px;padding:26px;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .35s;
  opacity:0;transform:translateY(24px);animation:rise .8s cubic-bezier(.2,.8,.2,1) forwards;
}
.card:nth-child(1){animation-delay:.1s}
.card:nth-child(2){animation-delay:0s}
.card:nth-child(3){animation-delay:.2s}
@keyframes rise{to{opacity:1;transform:none}}
/* luce che segue il mouse */
.card::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent) 18%,transparent),transparent 60%);
}
.card:hover{transform:translateY(-8px);border-color:color-mix(in srgb,var(--accent) 45%,transparent);box-shadow:0 30px 60px rgba(0,0,0,.45),0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent)}
.card:hover::before{opacity:1}
.card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.tag{
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line-2);border-radius:999px;padding:.3rem .7rem;
}
.num{font-family:var(--head);font-size:.85rem;color:rgba(255,255,255,.25)}
.card h2{font-family:var(--head);font-weight:700;font-size:1.7rem;letter-spacing:-.02em;margin:18px 0 .6rem}
.card p{color:var(--muted);line-height:1.6;font-weight:300;flex:1}
.cta{
  margin-top:24px;display:inline-flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.95rem 1.2rem;border-radius:14px;font-weight:600;
  background:rgba(255,255,255,.05);border:1px solid var(--line-2);transition:.25s;
}
.cta i{transition:transform .25s}
.cta:hover{background:var(--accent);color:#0b0b0e;border-color:transparent}
.cta:hover i{transform:translateX(4px)}
.cta-off{color:var(--muted);cursor:not-allowed;border-style:dashed}
.cta-off:hover{background:rgba(255,255,255,.05);color:var(--muted);border-color:var(--line-2)}
.cta-off:hover i{transform:none}

/* card laterali */
.card-side{margin-top:34px}
.monogram{
  width:84px;height:84px;border-radius:22px;display:grid;place-items:center;
  font-family:var(--head);font-weight:800;font-size:2.4rem;
}
/* Crafteva: colori del suo marchio (bronzo su grafite) */
.card-crafteva{
  --accent:#A68C68;
  background:radial-gradient(80% 50% at 30% 0%,rgba(166,140,104,.16),transparent 70%),linear-gradient(180deg,#1C1D25,#14151b);
}
.card-crafteva .monogram.logo-mono{
  width:96px;height:96px;background:radial-gradient(circle,rgba(166,140,104,.22),transparent 70%);
}
.card-crafteva .monogram img{width:84px;height:84px;object-fit:contain;filter:drop-shadow(0 10px 20px rgba(0,0,0,.5))}
.card-crafteva .tag{color:#d8c3a2;border-color:rgba(166,140,104,.45);background:rgba(166,140,104,.1)}
.card-empty{--accent:#bbb;border-style:dashed;background:rgba(255,255,255,.015)}
.monogram.empty{border:2px dashed var(--line-2);color:var(--muted);font-size:1.6rem}

/* card centrale: Kebab SMP */
.card-main{
  --accent:var(--red);
  background:
    radial-gradient(90% 60% at 50% 0%,rgba(227,38,29,.28),transparent 70%),
    linear-gradient(180deg,#1d0b0b,#120707);
  border-color:rgba(227,38,29,.35);
  box-shadow:0 30px 80px rgba(227,38,29,.12);
}
.tag-red{color:#ffb3a3;border-color:rgba(255,90,68,.4);background:rgba(227,38,29,.12)}
.live{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--muted)}
.pulse{width:8px;height:8px;border-radius:50%;background:#777}
.pulse.on{background:#4ade63;animation:ping 1.8s infinite}
.pulse.off{background:var(--red)}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(74,222,99,.6)}100%{box-shadow:0 0 0 9px rgba(74,222,99,0)}}
.main-art{position:relative;height:230px;display:grid;place-items:center;margin:-6px -26px 0}
.main-art .castle{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:66%;max-width:none;opacity:.35;filter:saturate(1.2)}
.main-art .logo{position:relative;width:200px;filter:drop-shadow(0 0 30px rgba(227,38,29,.55)) drop-shadow(0 12px 16px rgba(0,0,0,.6));animation:float 4s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(6px)}50%{transform:translateY(-6px)}}
.card-main h2.pixel{font-family:'Tiny5',var(--head);font-weight:400;font-size:2.4rem;letter-spacing:.02em;text-transform:uppercase;text-align:center;margin-top:6px;text-shadow:3px 3px 0 #6e0f0b}
.card-main p{text-align:center}
.ip{
  margin-top:20px;display:flex;align-items:center;justify-content:center;gap:.7rem;cursor:pointer;
  padding:.7rem 1rem;border-radius:12px;background:rgba(0,0,0,.35);border:1px solid rgba(255,90,68,.25);transition:.2s;
}
.ip:hover{border-color:rgba(255,138,31,.6)}
.ip-label{font-size:.72rem;letter-spacing:.14em;color:var(--muted)}
.ip-val{font-family:'Tiny5',monospace;font-size:1.3rem;letter-spacing:.04em}
.ip i{color:var(--orange)}
.cta-red{margin-top:14px;background:linear-gradient(90deg,var(--red),#b3140f);border-color:transparent;color:#fff}
.cta-red:hover{background:linear-gradient(90deg,var(--orange),var(--red));color:#fff}

/* ---------- footer e avviso ---------- */
.foot{
  width:min(1240px,100% - 32px);margin:0 auto;padding:22px 0 28px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;color:#6d6a73;font-size:.85rem;
}
.toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);opacity:0;visibility:hidden;
  background:#fff;color:#0b0b0e;font-weight:600;padding:.7rem 1.1rem;border-radius:12px;transition:.3s;z-index:10;
}
.toast.show{transform:translate(-50%,0);opacity:1;visibility:visible}

/* ---------- tablet e telefono ---------- */
@media (max-width:980px){
  .cards{grid-template-columns:1fr 1fr}
  .card-main{grid-column:1/-1;order:-1}
  .card-side{margin-top:0}
}
@media (max-width:640px){
  main{padding-top:36px}
  .intro{margin-bottom:32px}
  .cards{grid-template-columns:1fr;gap:16px}
  .card{padding:22px}
  .main-art{height:190px;margin:-6px -22px 0}
  .main-art .logo{width:160px}
  .top-link span{display:none}
  .foot{flex-direction:column;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .card{opacity:1;transform:none}
}