:root{
  --ink:#0b0d12;
  --card:#101420;
  --edge:rgba(255,255,255,.08);
  --text:#e8ecf3;
  --muted:#b7c0d1;

  --primary:#e11d48;   
  --primary-2:#be123c;
  --accent:#10b981;    
  --accent-2:#059669;
  --highlight:#f4d06f; 

  --wrap:1180px;
  --radius:18px;
  --shadow:0 8px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1000px 380px at 85% -5%, rgba(244,208,111,.18), transparent 60%),
    radial-gradient(840px 320px at -10% 10%, rgba(16,185,129,.16), transparent 60%),
    linear-gradient(180deg,#0a0c12,#0b111e);
  color:var(--text);
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.no-scroll{overflow:hidden}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(140%) blur(6px);
  background:rgba(10,12,18,.7);
  border-bottom:1px solid var(--edge);
}
.header-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;color:#fff;letter-spacing:.2px}
.logo-box{
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,var(--accent),#21a85a);
  display:grid;place-items:center;color:#05150e;font-weight:800;box-shadow:var(--shadow)
}
.logo-text{font-family:"Montserrat",system-ui;font-weight:800}
.main-nav a{margin:0 10px;color:var(--text);font-weight:600}
.main-nav a i{margin-right:6px;opacity:.9}
.main-nav a:hover{color:#fff}

/* Hero */
.hero{padding:56px 0 36px;border-bottom:1px solid var(--edge)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.hero h1{font-family:"Montserrat",system-ui;font-size:40px;line-height:1.15;margin:0 0 12px}
.hero p{margin:0 0 14px}
.bullets{margin:16px 0 22px;padding-left:0;list-style:none}
.bullets li{margin:8px 0}
.bullets i{margin-right:8px;color:var(--accent)}
.hero-art{display:flex;justify-content:center}
.hero-card{
  width:100%;max-width:360px;background:var(--card);border:1px solid var(--edge);border-radius:24px;
  padding:24px;box-shadow:var(--shadow);position:relative;overflow:hidden
}
.hero-badge{
  position:absolute;top:12px;right:12px;background:#efefef;color:#0a0c12;
  border-radius:10px;padding:6px 10px;font-weight:800
}
.hero-card-title{font-weight:800;font-size:22px;margin-top:30px}
.hero-card-sub{color:var(--muted);font-size:14px}

/* Sections */
.section{padding:48px 0}
.section.alt{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.00));border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.section-title{font-family:"Montserrat";font-size:28px;margin:0 0 22px}
.section-title i{margin-right:8px;color:var(--primary)}

/* Offer card */
.offer-card{
  background:var(--card);border:1px solid var(--edge);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:20px;margin-bottom:18px;


}
.offer-head{flex-wrap: wrap;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px dashed var(--edge);padding-bottom:14px}
.offer-brand{display:flex;align-items:center;gap:12px}
.brand-logo{
  width:128px;height:64px;border-radius:14px;background:linear-gradient(135deg,var(--highlight),#ff9d2f);
  display:grid;place-items:center;color:#151009;font-weight:900;font-size:26px
}
.brand-name{margin:0 0 4px}
.brand-link{font-size:14px}
.brand-link i{margin-right:6px}
.rating{display:flex;align-items:center;gap:10px}
.stars{letter-spacing:2px;background:linear-gradient(90deg,var(--highlight),#ff9d2f);-webkit-background-clip:text;background-clip:text;color:transparent}
.score{font-weight:700}
.offer-body{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:16px 0}
.offer-col{background:rgba(255,255,255,.03);border:1px solid var(--edge);border-radius:14px;padding:14px}
.sub{font-weight:700;margin-bottom:8px}
.sub i{margin-right:8px;color:var(--primary)}
.pill-row{display:flex;flex-wrap:wrap;gap:8px}
.pill{font-size:12px;padding:6px 10px;border:1px solid var(--edge);border-radius:999px;background:rgba(255,255,255,.04)}
.offer-foot{border-top:1px dashed var(--edge);padding-top:12px}
.offer-foot i{margin-right:8px;color:var(--muted)}

/* Criteria */
.criteria-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.crit{background:var(--card);border:1px solid var(--edge);border-radius:14px;padding:16px}
.crit h3{margin:0 0 6px;font-size:18px}
.crit h3 i{margin-right:8px;color:var(--accent)}

/* Responsible play */
.rg-grid{display:grid;grid-template-columns:2fr 2fr 1.5fr;gap:16px}
.rg-card{background:var(--card);border:1px solid var(--edge);border-radius:14px;padding:16px}
.checklist{margin:10px 0 0 18px}
.links{margin:10px 0 0 18px}

/* Responsible logos */
.logos .logos-row{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.logo-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px;border:1px solid var(--edge);border-radius:14px;background:rgba(255,255,255,.03)}
.logo-rect{width:100%;height:46px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(225,29,72,.26),rgba(16,185,129,.26));font-weight:800;color:#fff}

/* Footer */
.site-footer{border-top:1px solid var(--edge);background:#0a0e18}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px;padding:26px 0}
.footer-title{margin:0 0 10px}
.footer-links{list-style:none;margin:0;padding:0}
.footer-links li{margin:6px 0}
.footer-links a{color:var(--text)}
.footer-links a:hover{color:#fff}
.footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.footer-meta{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--edge);padding:10px 0}
.badge-18{font-weight:900;border:2px solid #fff;border-radius:8px;padding:2px 8px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:10px 16px;border-radius:12px;border:1px solid var(--edge);font-weight:700;
  background:rgba(255,255,255,.04);color:#fff;transition:transform .15s ease,filter .15s ease
}
.btn i{margin-right:8px}
.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));border-color:transparent;color:#2b070f}
.btn-accent{background:linear-gradient(135deg,var(--accent),var(--accent-2));border-color:transparent;color:#051b14}
.btn-ghost{background:transparent}

.modal-overlay{position:fixed;inset:0;background:rgba(5,8,14,.75);display:none;place-items:center;z-index:1000}
.modal-overlay.show{display:grid}
.modal{width:min(92vw,520px);background:var(--card);border:1px solid var(--edge);border-radius:18px;padding:22px;box-shadow:var(--shadow);text-align:center}
.modal-actions{display:flex;gap:10px;justify-content:center;margin-top:14px}


.small{font-size:.95rem}
.tiny{font-size:.84rem}
.muted{color:var(--muted)}
.center{text-align:center}

@media (max-width:1100px){
  .criteria-grid{grid-template-columns:repeat(2,1fr)}
  .rg-grid{grid-template-columns:1fr}
}
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:20px}
  .offer-body{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .logos .logos-row{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:560px){
  .main-nav{display:none}
  .logos .logos-row{grid-template-columns:repeat(2,1fr)}
}
.logos .logos-row{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px;
}
.logo-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:16px;
  border:1px solid var(--edge);
  border-radius:14px;
  background:rgba(255,255,255,.03);
  text-align:center;
}
.logo-img{
  display:block;
  max-width:100%;
  height:46px;         
  object-fit:contain;   
  image-rendering:auto;
}
.logo-domain{font-size:.9rem;color:var(--muted)}

@media (max-width: 980px){
  .logos .logos-row{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 560px){
  .logos .logos-row{grid-template-columns:repeat(2,1fr)}
}
.brand-logo.has-img{
  background:#0b111e;
  border:1px solid var(--edge); 
  display:grid;                  
  place-items:center;
  padding:6px;                 
}
.brand-logo-img{
  width:100%;
  height:100%;
  object-fit:contain;            
}
.clite{
  position: fixed !important;
  left: 50% !important;
  bottom: 18px !important;
  transform: translateX(-50%) !important;
  width: min(96vw, 880px) !important;
  background:
    radial-gradient(420px 140px at 100% -10%, rgba(225,29,72,.14), transparent 60%),
    radial-gradient(360px 120px at -10% 0%, rgba(16,185,129,.12), transparent 60%),
    rgba(10,14,24,.92) !important;
  border: 1px solid var(--edge, rgba(255,255,255,.12)) !important;
  border-radius: 16px !important;
  box-shadow: 0 14px 38px rgba(0,0,0,.45) !important;
  z-index: 99999 !important;

  opacity: 1 !important;
  pointer-events: auto !important;
  transition: none !important;

  display: none !important;
}

.clite.clite-show{
  display: block !important;
}

.clite-wrap{
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 14px; padding: 14px 16px;
}
.clite-text{ margin:0; color:var(--text,#e8ecf3) }
.clite-link{ color:var(--accent,#10b981); text-decoration:underline; text-underline-offset:2px }
.clite-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end }

.clite-btn{
  appearance:none; border:1px solid var(--edge,rgba(255,255,255,.12)); border-radius:12px;
  padding:10px 16px; font:700 16px/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.25); background:rgba(255,255,255,.06); color:#fff;
}
.clite-yes{ background:linear-gradient(135deg,var(--accent,#10b981),var(--accent-2,#059669)); border-color:transparent; color:#051b14 }
.clite-only{ background:linear-gradient(135deg,var(--primary,#e11d48),var(--primary-2,#be123c)); border-color:transparent; color:#2b070f }

@media (max-width:720px){
  .clite-wrap{ grid-template-columns:1fr }
  .clite-actions{ justify-content:stretch }
  .clite-btn{ width:100% }
}
#age-modal-overlay.modal-overlay{
  z-index: 10010;
  background:
    radial-gradient(520px 180px at 100% -10%, rgba(225,29,72,.16), transparent 60%),
    radial-gradient(480px 160px at -10% 0%, rgba(16,185,129,.14), transparent 60%),
    rgba(5,8,14,.82);
  display: none;           
  place-items: center;
}
#age-modal-overlay.show{ display: grid; }

#age-modal-overlay .modal{
  width: min(92vw, 560px);
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  text-align: left;
}
#age-modal-overlay h2{ margin: 0 0 8px; font-family: "Montserrat", system-ui; }
#age-modal-overlay h2 i{ color: var(--primary); margin-right: 8px; }
#age-modal-overlay p{ margin: 0 0 12px; }
#age-modal-overlay .modal-actions{
  display: flex; gap: 10px; margin-top: 14px;margin-bottom: 10px;
}

#age-modal-overlay .btn:focus-visible{
  outline: 2px solid var(--highlight);
  outline-offset: 2px;
  border-radius: 10px;
}

@media (prefers-reduced-motion: reduce){
  #age-modal-overlay{ transition: none !important; }
}
footer {
  padding: 20px;
}