/* Base */
@charset "utf-8";
*{box-sizing:border-box;margin:0;padding:0}
:root{
  /* COLORI AGGIORNATI PER LOGO AFFILIATELAND */
  --bg1:#2563EB; /* Blu principale logo (era nero) */
  --bg2:#14B8A6; /* Turchese logo (era verde scuro) */
  --card:#ffffff; 
  --ink:#1e2a3a; 
  --muted:#64748b; 
  --ring:#e6efff;
  --grad:linear-gradient(135deg, #2563EB, #14B8A6); /* Gradiente blu->turchese */
}
html{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  background: #000000; padding:30px;
}

.container{max-width:1200px;margin:0 auto}

/* Header */
header{background:#fff;border-radius:16px;padding:28px;box-shadow:0 10px 30px rgba(0,0,0,.18);margin-bottom:24px}
h1{color:var(--bg1);font-size:28px;margin-bottom:6px}
.tagline{color:#6b7280;font-size:14px}

/* Logo più grande nell'header */
.site-header .brand img{
  height: 60px; /* Aumentato da 40px */
  margin-bottom: 8px;
}

/* Logo più grande nell'header Mobile */

@media (max-width:768px){
  .site-header .brand img{
    height: 50px; /* leggermente più piccolo su mobile */
  }
}

/* Nav */
.nav{display:flex;gap:12px;flex-wrap:wrap;background:#fff;border-radius:16px;padding:12px 16px;
     box-shadow:0 10px 30px rgba(0,0,0,.18);margin-bottom:24px}
.nav a{
  text-decoration:none;background:#e0f2fe;color:#0c4a6e;padding:10px 16px;border-radius:10px;
  font-weight:600;transition:transform .2s, box-shadow .2s
}
.nav a[aria-current="page"], .nav a:hover{
  background:var(--bg1);color:#fff;box-shadow:0 6px 16px rgba(37,99,235,.25);transform:translateY(-2px)
}

/* Tiles Home */
.hero-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-bottom:24px}
.tile{position:relative;overflow:hidden;border-radius:16px;min-height:180px;background:#1e40af;box-shadow:0 10px 28px rgba(0,0,0,.16)}
.tile img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.75)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.45))}
/*.tile__label{position:absolute;left:16px;bottom:14px;color:#fff;font-weight:800;font-size:20px;letter-spacing:.3px}*/

/* Sections */
.section{background:#fff;border-radius:16px;padding:24px;box-shadow:0 10px 28px rgba(0,0,0,.12);margin-bottom:24px}
.section h2{color:var(--bg1);font-size:22px;margin-bottom:14px}

/* Bonus pages: cards verticali */
.stack{display:grid;grid-template-columns:1fr;gap:16px;max-width:900px;margin:0 auto}
.card{
  background:var(--card);border-radius:14px;padding:20px;border:3px solid #dbeafe;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  position:relative; /* Necessario per il posizionamento dell'etichetta */
}
.card__head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.card__logo{width:156px;height:56px;object-fit:contain}
.card__logodzb{width:170px;height:126px;object-fit:contain}
.card__title{font-size:18px;font-weight:800;color:var(--bg1)}
.card__bullets{margin:8px 0 8px 18px;color:#233047;line-height:1.6}
.card__desc{color:var(--muted);line-height:1.7}
.card__foot{margin-top:12px}
.btn{
  display:inline-block;border:none;border-radius:10px;padding:10px 18px;
  background:var(--grad);color:#fff;font-weight:700;text-decoration:none;
  box-shadow:0 2px 8px rgba(37,99,235,.2);
}
.btndzb{
  display:inline-block;border:none;border-radius:10px;padding:10px 18px;
  background:#00c63d;color:#fff;font-weight:700;text-decoration:none;
  box-shadow:0 2px 8px rgba(0,198,61,.2);
}
.btn:hover{filter:brightness(1.1);box-shadow:0 4px 12px rgba(37,99,235,.3);}
.btndzb:hover{filter:brightness(1.1);box-shadow:0 4px 12px rgba(0,198,61,.3);}

/* ETICHETTA "MIGLIOR BONUS" - Bollino rosso in alto a destra */
.card:first-child::after{
  content:"Miglior Bonus";
  position:absolute;
  top:16px;
  right:16px;
  background:#dc2626; /* Rosso vivace */
  color:#fff;
  font-weight:700;
  font-size:13px;
  padding:8px 14px;
  border-radius:20px;
  box-shadow:0 4px 12px rgba(220,38,38,.35);
  text-transform:uppercase;
  letter-spacing:0.5px;
  z-index:10;
  animation: pulse-badge 2s ease-in-out infinite;
}

/* Animazione pulsante per l'etichetta */
@keyframes pulse-badge {
  0%, 100% {
    transform: scale(1);
    box-shadow:0 4px 12px rgba(220,38,38,.35);
  }
  50% {
    transform: scale(1.05);
    box-shadow:0 6px 16px rgba(220,38,38,.5);
  }
}

/* Variante per mobile: etichetta leggermente più piccola */
@media (max-width:768px){
  .card:first-child::after{
    top:12px;
    right:12px;
    font-size:11px;
    padding:6px 12px;
  }
}

/* Tables (se le usi) */
.table{width:100%;border-collapse:collapse}
.table th{background:var(--grad);color:#fff;padding:14px;text-align:center}
.table td{padding:14px;text-align:center;border-bottom:1px solid #dbeafe}

/* Footer */
footer{background:#fff;color:#6b7280;border-radius:16px;padding:22px;text-align:center;
        box-shadow:0 10px 28px rgba(0,0,0,.12);margin-top:24px}
footer a{color:var(--bg1);text-decoration:none}

/* Responsive */
@media (max-width:768px){
  .nav{flex-direction:column}
  .nav a{width:100%;text-align:center}
  .btn{width:100%;text-align:center}
  
  /* Logo leggermente più piccolo su mobile */
  .site-header .brand img{
    height: 42px;
  }
}

/* Hover effetti per le tile Home */
@media (hover:hover) {
  .hero-tiles .tile{
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
    will-change: transform;
  }
  .hero-tiles .tile img{
    transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .35s;
    will-change: transform, filter;
  }
  /* sheen diagonale */
  .hero-tiles .tile::before{
    content:"";
    position:absolute; inset:-30%;
    background: linear-gradient(75deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.18) 50%, rgba(255,255,255,0) 60%);
    transform: translateX(-120%) rotate(0.001deg);
    transition: transform .8s ease;
    pointer-events:none;
    mix-blend-mode: screen;
  }
  .hero-tiles .tile:hover{
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(37,99,235,.35);
  }
  .hero-tiles .tile:hover img{
    transform: scale(1.06);
    filter: brightness(.92) saturate(1.15);
  }
  .hero-tiles .tile:hover::before{
    transform: translateX(20%) rotate(0.001deg);
  }
  .hero-tiles .tile:hover .tile__label{
    transform: translateY(-2px);
    transition: transform .25s ease;
  }
}

/* Rispetta le preferenze utente per ridurre le animazioni */
@media (prefers-reduced-motion: reduce){
  .hero-tiles .tile,
  .hero-tiles .tile img,
  .hero-tiles .tile::before,
  .hero-tiles .tile .tile__label{
    transition: none !important;
  }
  /* Disabilita anche l'animazione dell'etichetta */
  .card:first-child::after{
    animation: none !important;
  }
}

/* Header + Burger */
.site-header{
  background:#fff;border-radius:16px;padding:16px 18px; 
  box-shadow:0 10px 30px rgba(0,0,0,.18);margin-bottom:16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px
}
.site-header .brand h1{margin:0;color:var(--bg1);font-size:22px}
.site-header .brand .tagline{margin:2px 0 0;color:#6b7280;font-size:12px}

/* bottone hamburger (nascosto su desktop) */
.burger{
  display:none;
  width:44px;height:44px;border-radius:12px;border:1px solid #e5e7eb;background:#fff;
  align-items:center;justify-content:center;gap:4px;cursor:pointer
}
.burger__bar{display:block;width:20px;height:2px;background:var(--bg1);border-radius:2px;transition:transform .25s, opacity .25s}

/* overlay */
.nav-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(2px);
  z-index:80;
}

/* Stato mobile */
@media (max-width:768px){
  /* nav diventa pannello offcanvas */
  .nav{
    position:fixed; top:0; right:0; height:100dvh; width:min(84vw,320px);
    background:#fff; padding:20px; border-radius:16px 0 0 16px;
    box-shadow: -18px 0 40px rgba(0,0,0,.28);
    display:flex; flex-direction:column; gap:10px;
    transform:translateX(100%); transition:transform .3s ease; z-index:90;

  }
  .nav a{padding:12px 14px;border-radius:10px;background:#f3f4f6}
  .nav a[aria-current="page"]{background:var(--bg1);color:#fff}

  /* header compatto */
  .site-header{margin-bottom:10px}
  .site-header .tagline{display:none}
  .burger{display:inline-flex}

  /* nav aperto */
  .nav.is-open{transform:translateX(0)}
  .burger.is-active .burger__bar:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .burger.is-active .burger__bar:nth-child(2){opacity:0}
  .burger.is-active .burger__bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}

/* Motion safe */
@media (prefers-reduced-motion: reduce){
  .nav{transition:none}
  .burger__bar{transition:none}
}

/* Background con profondita */
.site-bg{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  /* Pattern con tonalità blu */
  --icon-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='none' stroke='%232563EB' stroke-opacity='.08' stroke-width='2'><circle cx='24' cy='24' r='14'/><path d='M24 10v4M24 34v4M10 24h4M34 24h4M15 15l3 3M30 30l3 3M33 15l-3 3M18 30l-3 3'/><rect x='55' y='10' rx='4' ry='4' width='40' height='28'/><path d='M68 32l10-16h-8m-2 0h12'/><circle cx='24' cy='84' r='14'/><path d='M24 70l6 6-6 6-6-6 6-6m-6 18l6-6 6 6'/><rect x='60' y='70' width='28' height='28' rx='6' ry='6'/><circle cx='68' cy='78' r='2.5'/><circle cx='80' cy='90' r='2.5'/><circle cx='74' cy='84' r='2.5'/></g></svg>");
  background-image: var(--icon-svg);
  background-repeat: repeat;
  background-size: 120px 120px;
  background-position: 0 0;
}

/* Orbs fluttuanti con tonalità blu/turchese */
.orb{
  position:absolute; border-radius:50%;
  filter: blur(18px); opacity:.22; transform: translateZ(0);
  animation: float 18s ease-in-out infinite;
}
.orb--1{ width:420px; height:420px; left:-80px; top:10vh; background: #60a5fa; animation-delay: 0s;} /* blu chiaro */
.orb--2{ width:360px; height:360px; right:-100px; top:35vh; background: #5eead4; animation-delay: 2s;} /* turchese */
.orb--3{ width:300px; height:300px; left:40%; top:70vh; background: #3b82f6; animation-delay: 4s;} /* blu */

@keyframes float{
  0%,100%{ transform: translateY(0) translateX(0) }
  50%{ transform: translateY(-18px) translateX(8px) }
}

/* Raffiniamo contrasto del contenuto sopra */
header, .nav, .section, .bonus-section, footer, .card, .tile{
  backdrop-filter: saturate(1.05);
}

/* Rispetto preferenze utente: ridurre motion */
@media (prefers-reduced-motion: reduce){
  .orb{ display:none !important; animation:none !important; }
}

/* Mobile: pattern meno fitto e orbs piu piccoli */
@media (max-width:768px){
  .site-bg{
    background-size: 160px 160px;
    background-position: 10px 10px;
  }
  .orb--1{ width:300px; height:300px }
  .orb--2{ width:260px; height:260px }
  .orb--3{ width:220px; height:220px }
}

/* Hover effetti per le CARD (Bonus Scommesse/Casino) */
@media (hover:hover){
  .stack .card{
    position: relative;
    overflow: hidden;
    transition: transform .35s cubic-bezier(.2,.8,.2,1),
                box-shadow .35s,
                border-color .35s;
    will-change: transform;
  }
  /* sheen diagonale come in home */
  .stack .card::before{
    content:"";
    position:absolute; inset:-30%;
    background: linear-gradient(75deg,
                 rgba(255,255,255,0) 40%,
                 rgba(255,255,255,.14) 50%,
                 rgba(255,255,255,0) 60%);
    transform: translateX(-120%) rotate(0.001deg);
    transition: transform .8s ease;
    pointer-events:none;
    mix-blend-mode: screen;
  }
  .stack .card:hover{
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(37,99,235,.2);
    border-color: #93c5fd;
  }
  .stack .card:hover::before{
    transform: translateX(20%) rotate(0.001deg);
  }

  /* micro-zoom del logo */
  .stack .card .card__logo,
  .stack .card .card__logodzb{
    transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .35s;
    will-change: transform;
  }
  .stack .card:hover .card__logo,
  .stack .card:hover .card__logodzb{
    transform: scale(1.05);
    filter: saturate(1.05);
  }

  /* CTA leggermente reattiva */
  .stack .card .btn, .btndzb{
    transition: transform .2s, filter .2s, box-shadow .2s;
  }
  .stack .card:hover .btn{
    transform: translateY(-1px);
  }
  .stack .card:hover .btndzb{
    transform: translateY(-1px);
  }
}

/* Stato tastiera: evidenzia la card quando contiene focus */
.stack .card:focus-within{
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
  border-color: #60a5fa;
}

/* Centratura completa delle card nelle pagine bonus */
.stack .card{
  text-align: center;
}
.stack .card__head{
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.stack .card__logo{
  display: block;
  margin: 0 auto;
}
.stack .card__title{
  margin-top: 4px;
}
.stack .card__bullets{
  display: inline-block;
  text-align: left;
  margin: 10px auto 8px auto;
  padding-left: 18px;
}
.stack .card__desc{
  margin: 2px auto 6px auto;
  max-width: 60ch;
}
.stack .card__foot{
  display: flex;
  justify-content: center;
}

/* Bottone piu grande nelle pagine bonus */
.stack .card .btn, .btndzb{
  padding: 14px 22px;
  font-size: 16px;
  border-radius: 12px;
  min-width: 180px;
}
@media (max-width: 768px){
  .stack .card .btn, .btndzb{ width: 100%; }
}

/* Boost visivo per i due tile su BG nero */
.hero-tiles .tile{
  border: 1px solid rgba(96,165,250,.15);
  box-shadow:
    0 0 0 1px rgba(96,165,250,.08) inset,
    0 12px 32px rgba(0,0,0,.45);
  background: #0a0a0a;
}

/* accenti blu per ciascun tile */
.hero-tiles .tile:nth-child(1){ --accent:#2563EB; } /* blu logo */
.hero-tiles .tile:nth-child(2){ --accent:#14B8A6; } /* turchese logo */

@media (hover:hover){
  .hero-tiles .tile{
    box-shadow:
      0 0 0 1px rgba(96,165,250,.08) inset,
      0 10px 28px rgba(0,0,0,.5),
      0 0 24px -10px color-mix(in oklab, var(--accent) 50%, transparent);
  }
  .hero-tiles .tile:hover{
    box-shadow:
      0 0 0 1px rgba(96,165,250,.12) inset,
      0 18px 40px rgba(0,0,0,.6),
      0 0 38px -8px color-mix(in oklab, var(--accent) 72%, transparent);
  }
}

/* immagine piu leggibile su sfondo nero */
.hero-tiles .tile img{
  filter: brightness(.88) contrast(1.05) saturate(1.1);
}
@media (hover:hover){
  .hero-tiles .tile:hover img{
    transform: scale(1.06);
    filter: brightness(.95) contrast(1.06) saturate(1.15);
  }
}

/* label come "glass pill" */
/*.tile__label{
  left: 18px; bottom: 16px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(37,99,235,.65);
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(6px) saturate(1.1);
  box-shadow: 0 4px 16px rgba(37,99,235,.3);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  letter-spacing: .4px;
}*/

/* barra di accento sotto la label */
.tile__label::after{
  content:"";
  display:block;
  height:3px; margin-top:8px; border-radius:99px;
  background: linear-gradient(90deg, rgba(20,184,166,.8), transparent);
  opacity:.9;
}

/* Focal point per evitare "salto" durante lo zoom */
.hero-tiles .tile:nth-child(1) img{
  object-position: 35% 50%;
  transform-origin: left center;
}
.hero-tiles .tile:nth-child(2) img{
  object-position: 65% 50%;
  transform-origin: right center;
}

@media (hover:hover){
  .hero-tiles .tile:nth-child(1):hover img,
  .hero-tiles .tile:nth-child(2):hover img{
    transform: scale(1.045);
  }
}

/* Home: centrare i TILE su desktop e mobile */
.hero-tiles{
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(2, minmax(300px, 520px));
  justify-content: center;
  align-content: start;
  margin-inline: auto;
}

.hero-tiles .tile{
  width: min(100%, 520px);
  aspect-ratio: 12 / 7;
  min-height: unset;
  border-radius: 16px;
  overflow: hidden;
}
.hero-tiles .tile img{
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
}

/* Mobile: 1 colonna centrata */
@media (max-width: 900px){
  .hero-tiles{
    grid-template-columns: min(100%, 520px);
    justify-content: center;
  }
}

/* Label in alto a sinistra con pill minimale */
/*.hero-tiles .tile .tile__label{
  top: 14px;
  left: 14px;
  bottom: auto;
  transform: none;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(37,99,235,.65);
  border: 1px solid rgba(255,255,255,.2);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}*/