:root{
  --bg: #0b0c10;
  --bg2:#101218;
  --card:#141823;
  --text:#eaf0ff;
  --muted:#cbd5e1;
  --accent:#e10600; /* Swiss red */
  --accent-2:#ffffff;
  --border:#1f2432;
  --soft:#222838;
  --success:#22c55e;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
}

.container{width:min(1120px, 92%); margin-inline:auto}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,12,16,.7); backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:.8rem 0}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:700; letter-spacing:.2px}
.flag{width:26px; height:26px; border-radius:4px; object-fit:cover; box-shadow:0 0 0 2px #fff1}
.nav a{
  color:var(--muted); text-decoration:none; margin-left:1rem; font-weight:500;
  padding:.4rem .6rem; border-radius:.6rem; transition:all .2s ease;
}
.nav a:hover{background:var(--soft); color:var(--accent-2)}

/* Hero */
.hero{padding:4.5rem 0 2.5rem; border-bottom:1px solid var(--border);}
.hero-inner{display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:center}
.hero-text h1{font-size:clamp(1.6rem, 2.2vw + 1rem, 2.6rem); margin:.2rem 0 1rem}
.hero-text p{color:var(--muted); max-width:60ch}
.hero-ctas{display:flex; gap:.8rem; margin:1.2rem 0}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.72rem 1rem; border-radius:.8rem; border:1px solid transparent; text-decoration:none;
  font-weight:600; cursor:pointer; transition:transform .05s ease, background .2s ease, border-color .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent); color:#fff; border-color:#0000}
.btn-outline{background:transparent; color:#fff; border-color:#ffffff2a}
.btn-soft{background:#ffffff10; color:#fff; border-color:#ffffff15}
.btn-primary:hover{filter:brightness(1.05)}
.btn-outline:hover{background:#ffffff12}
.btn-soft:hover{background:#ffffff18}

.trust-points{display:flex; gap:1rem; padding:0; margin:1rem 0 0; list-style:none; color:var(--muted)}
.trust-points li{background:#ffffff08; padding:.4rem .6rem; border:1px solid #ffffff16; border-radius:.6rem}

.hero-card{
  background:linear-gradient(180deg, #192033 0%, #141a2a 100%);
  border:1px solid var(--border); border-radius:1rem; padding:1.2rem;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.hero-card .badge{
  display:inline-block; background:var(--accent); color:#fff; font-weight:700;
  padding:.35rem .6rem; border-radius:.6rem; margin-bottom:.6rem;
}

/* Comparison */
.comparison-section{padding:2.5rem 0}
.comparison-section h2{font-size:1.8rem; margin:0 0 1.2rem}
.card-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1.1rem;
}
.casino-card{
  background:var(--card); border:1px solid var(--border); border-radius:1rem; overflow:hidden;
  display:flex; flex-direction:column; min-height:100%;
}
.card-head{
  display:flex; align-items:center; gap:.8rem; padding:1rem; border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, #151a28 0%, #c8d4f7 100%);
}
.logo{height:32px; max-width:160px; object-fit:contain}
.rank-badge{
  margin-left:auto; background:#ffffff10; border:1px solid #ffffff18; color:#fff; font-weight:700;
  padding:.2rem .5rem; border-radius:.5rem;
}
.card-body{padding:1rem}
.card-body h3{margin:.1rem 0 .4rem; font-size:1.1rem}
.card-body h3 a{color:#fff; text-decoration:none}
.card-body .promo{color:#fff; font-weight:700; background:#1b2236; border:1px solid #213055; padding:.35rem .6rem; border-radius:.5rem; display:inline-block}
.bullets{list-style:none; padding:0; margin:.8rem 0 0; color:var(--muted)}
.bullets li{padding-left:1.1rem; position:relative; margin:.3rem 0}
.bullets li::before{content:"•"; position:absolute; left:0; color:#ffffff66}
.card-actions{margin-top:auto; display:flex; gap:.6rem; padding:1rem; border-top:1px solid var(--border)}

.table-wrap{margin-top:1.2rem}
.comparison-table{
  width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:.8rem;
  border:1px solid var(--border); background:var(--card);
}
.comparison-table th, .comparison-table td{padding:.9rem .8rem; text-align:left}
.comparison-table thead th{background:#151a28; color:#fff}
.comparison-table tbody tr:not(:last-child) td{border-bottom:1px solid var(--border)}
.link-btn{display:inline-block; padding:.45rem .7rem; border:1px solid #ffffff22; border-radius:.6rem; text-decoration:none; color:#fff}
.link-btn:hover{background:#ffffff12}

/* Criteria / Accordion */
.criteria{padding:2rem 0 2.6rem; border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.accordion details{
  background:var(--card); border:1px solid var(--border); border-radius:.8rem; padding:.7rem 1rem; margin:.6rem 0;
}
.accordion summary{cursor:pointer; font-weight:600}
.accordion p{color:var(--muted); margin:.4rem 0 0}
.disclosure{color:#aeb8cc; margin-top:.8rem; font-size:.95rem}

/* Newsletter */
.newsletter{padding:2.2rem 0}
#newsletterForm{display:flex; gap:.6rem; flex-wrap:wrap}
#email{
  flex:1; min-width:260px; padding:.7rem .8rem; border-radius:.7rem; border:1px solid var(--border);
  background:#0f1424; color:#fff; outline:none;
}
#email[aria-invalid="true"]{border-color:#f87171; box-shadow:0 0 0 3px #f871711a}
.thankyou{color:var(--success); margin-left:.2rem}

/* Footer */
.site-footer{border-top:1px solid var(--border); padding:1.4rem 0 2rem}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.footer-logos img{height:28px; width:auto; margin-right:.6rem; opacity:.9; filter:grayscale(.1)}
.footer-links a{color:var(--muted); text-decoration:none; margin-right:1rem}
.footer-links a:hover{color:#fff}
.legal{color:#98a4bc; margin:.4rem 0 0}

/* Cookies */
.cookie-banner{
  position:fixed; inset:auto 0 0 0; background:#0b0c10e6; border-top:1px solid var(--border); z-index:60;
}
.cookie-inner{display:flex; gap:1rem; align-items:center; justify-content:space-between; padding:1rem 0}
.cookie-inner p{margin:0; color:var(--muted)}
.cookie-actions{display:flex; gap:.6rem; flex-shrink:0}

.cookie-modal{border:none; border-radius:1rem; padding:0; background:#151a28; color:#fff; width:min(560px, 92%);}
.cookie-modal::backdrop{background:rgba(0,0,0,.6)}
.cookie-modal-inner{padding:1rem 1rem 1.2rem}
.cookie-modal h3{margin:.2rem 0 .6rem}
.toggle{display:flex; align-items:center; gap:.6rem; padding:.6rem 0; border-bottom:1px dashed #ffffff1a}
.toggle:last-of-type{border-bottom:none}
.modal-actions{display:flex; gap:.6rem; justify-content:flex-end; margin-top:.8rem}
.cookie-help{margin-top:.6rem; font-size:.9rem}
.cookie-help a{color:#cfe0ff}

/* Back to top */
.to-top{
  position:fixed; right:18px; bottom:18px; width:44px; height:44px; border-radius:.9rem;
  border:1px solid #ffffff24; background:#141a2a; color:#fff; cursor:pointer; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
}
.to-top.show{opacity:1; pointer-events:auto}
.to-top:hover{transform:translateY(-2px)}

/* Utilities */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* Responsive */
@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr; text-align:left}
  .card-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .nav{display:none}
  .card-grid{grid-template-columns:1fr}
  .hero{padding:3.2rem 0 1.5rem}
}