/* Betovo Original-like (Screenshot 2) — semantic HTML + CSS */
:root{
  --bg:#151a14;           /* dark olive tone */
  --panel:#1c211a;        /* slightly lighter panel */
  --panel-2:#20271f;
  --fg:#f5f7f2;           /* near-white */
  --muted:#c3c9be;        /* muted text */
  --lime:#b5ff3f;         /* neon lime accent */
  --lime-2:#9eff2a;
  --border:rgba(255,255,255,.08);
  --container:1180px;
  --radius:16px;
  --shadow:0 18px 50px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;color:var(--fg);background:var(--bg);line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:#e9ffe0;text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--container);margin-inline:auto;padding-inline:24px}
.flow>*+*{margin-top:1rem}
.visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;overflow:hidden;white-space:nowrap}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,rgba(21,26,20,.9),rgba(21,26,20,.7));backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.06)}
.header__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0}
.branding{display:flex;align-items:center;gap:24px}
.branding .logo img{height:28px}
.header-nav{display:flex;gap:22px}
.header-nav a{color:#d6e8c9;opacity:.95;font-size:.95rem;letter-spacing:.02em}
.header-cta{display:flex;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:600;padding:.7rem 1.1rem;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:transparent;color:var(--fg)}
.btn--outline{border:1px solid rgba(181,255,63,.7);color:#eaffcc}
.btn--lime{background:linear-gradient(180deg,var(--lime),var(--lime-2));color:#0b0f0a;border:0;box-shadow:0 6px 18px rgba(155,255,60,.25)}
.btn--lime:hover{filter:brightness(.98);text-decoration:none}

/* Page header (title) */
.page-title{padding:28px 0 10px;text-align:center}
.page-title 

/* Meta row */
.meta-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 0 18px}
.meta{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.95rem}
.meta .dot{width:6px;height:6px;border-radius:50%;background:var(--lime)}
.meta .star{color:#0a0;display:inline-flex;align-items:center;gap:6px}
.meta strong{color:var(--fg)}

/* Hero banner with neon lime border */
.hero{padding:10px 0 28px}
.promo{padding:20px;background:linear-gradient(180deg,var(--panel-2),var(--panel));position:relative;box-shadow:var(--shadow);border:2px solid rgba(181,255,63,.55)}
.promo::before{content:"";position:absolute;inset:-6px;border-radius:22px;background:radial-gradient(closest-side,rgba(181,255,63,.35),transparent 70%);filter:blur(10px);z-index:-1}
.promo__inner{border-radius:14px;border:1px solid rgba(255,255,255,.08);padding:26px;text-align:center}
.kicker{display:inline-block;background:#0d120b;color:#c7ff76;border:1px solid rgba(181,255,63,.6);padding:.35rem .6rem;border-radius:6px;font-size:.85rem;letter-spacing:.06em}
.promo 
.promo .big{font-size:clamp(1.8rem,3vw,2.4rem);font-weight:800;letter-spacing:.3px}
.caption{margin-top:8px;color:var(--muted);font-size:.9rem;text-align:center}

/* Quick overview */
.section{padding:20px 0}
.section 
.overview{display:grid}
.panel{background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:18px}
.brand-right{display:flex;flex-direction:column;gap:14px}
.brand-right figure{border:1px solid rgba(181,255,63,.4);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}

/* Footer */
.site-footer{padding:36px 0;border-top:1px solid rgba(255,255,255,.06);color:var(--muted);text-align:center}


/* === Font: Jost === */
body{font-family:"Jost", Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, sans-serif}

/* === Header buttons (as in screenshot) === */
.btn{border-radius:24px 10px 24px 10px;font-weight:600}
.btn--outline{border:2px solid #fff;color:#fff;background:transparent}
.btn--outline:hover{background:rgba(255,255,255,0.06)}
.btn--lime{background:linear-gradient(90deg,#d0ff67,#9dff2d);color:#0b0f0a;border:0}
.btn--lime:hover{filter:brightness(.98)}

/* === FAQ section === */
.faq{padding:56px 0}
.faq__title{color:var(--lime);text-align:center;font-size:35px;margin:0 0 40px}
.faq__list{display:grid;gap:18px}
.faq-item{background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:16px 18px;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.faq-icon{width:28px;height:28px;border-radius:50%;background:linear-gradient(180deg,#e7ff8e,#b7ff3f);display:inline-grid;place-items:center;color:#111;font-weight:700}
.faq-q{margin:0 0 6px;font-weight:700}
.faq-a{margin:0;color:var(--muted)}


/* === Mobile header improvements === */
@media (max-width:640px){
  .header__bar{padding:14px 0}
  .branding .logo img{height:40px}
  .header-nav, .header-cta{display:none}
  .nav-drawer{margin-left:auto;position:relative}
  .nav-drawer summary{list-style:none}
  .nav-drawer summary::-webkit-details-marker{display:none}
  .hamburger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;border:2px solid rgba(255,255,255,.9);background:transparent;color:#fff}
  .hamburger svg{width:22px;height:22px}
  .nav-panel{position:absolute;right:0;top:54px;min-width:230px;background:var(--panel);border:1px solid rgba(255,255,255,.12);border-radius:16px;box-shadow:var(--shadow);padding:12px;display:grid;gap:8px;z-index:60}
  .nav-panel a{padding:.6rem .75rem;border-radius:10px;color:#e6f7d8}
  .nav-panel a:hover{background:rgba(255,255,255,.06);text-decoration:none}
  .nav-panel .btn{width:100%;justify-content:center}
}

/* Optional larger H1 on mobile to match ref */
@media (max-width:640px){
  .page-title 
}

/* === Drawer visibility controls (desktop vs mobile) === */
.nav-drawer{display:none} /* hidden by default (desktop) */
@media (max-width:640px){
  .header-nav, .header-cta{display:none}
  .nav-drawer{display:block;margin-left:auto;position:relative;z-index:100}
  .nav-panel{position:absolute;right:0;top:54px}
}

/* === Sizing & Typography === */
html{font-size:18px}




/* Hero banner exact width on desktop */
@media (min-width:1180px){
  .promo-wrapper, .faq__wrap{max-width:1170px;margin-inline:auto}
}

.promo{border:3px solid rgba(181,255,63,.8)}
.promo__inner{border-radius:24px;border:1px solid rgba(255,255,255,.14);padding:34px}

/* FAQ width and card style */
.faq .container{padding-inline:24px}
.faq__wrap{}
.faq__list{max-width:1170px;margin-inline:auto}
.faq-item{border-radius:18px}

/* Header button exact sizes */
.btn{border-radius:24px 10px 24px 10px}
.btn--outline,.btn--lime{height:50px;min-height:50px;display:inline-flex;align-items:center;justify-content:center}
.btn--outline{min-width:145px}
.btn--lime{min-width:165px}

/* Mobile header paddings already match container; ensure drawer only mobile */
.nav-drawer{display:none}
@media (max-width:640px){
  .header-nav, .header-cta{display:none}
  .nav-drawer{display:block;margin-left:auto;position:relative;z-index:100}
  .nav-panel{position:absolute;right:0;top:54px}
  .branding .logo img{height:40px}
}

/* === TYPOGRAPHY: exact sizes per request === */




/* === HERO banner exact design === */

.promo{border:2px solid #C1FC3E;border-radius:20px 0 20px 0;overflow:hidden}
.promo__inner{border-radius:16px;border:1px solid rgba(255,255,255,.12);padding:32px}

/* === FAQ exact width === */
.faq__wrap, .faq__list{max-width:1170px;margin-inline:auto}

/* === Banner exact width === */
.promo-wrapper{max-width:1170px;margin-inline:auto;width:100%}
@media (max-width:1220px){ .promo-wrapper{max-width:calc(100% - 48px)} } /* keep 24px side padding on small screens */

/* Banner border + corners per spec */
.promo{border:2px solid #C1FC3E;border-radius:20px 0 20px 0;box-shadow:none}
.promo__inner{border-radius:16px}

/* Typography exact sizes */
body{font-size:18px}





/* === TYPOGRAPHY (authoritative) === */
/* 1) Base text size fixed 18px */
body{font-size:18px}

/* 2) H2 always 35px and lime color */
h2{font-size:35px;line-height:1.2;font-weight:700;color:#b5ff3f}

/* 3) H3 across the site is 45px by default */
h3{font-size:25px;line-height:1.25;font-weight:700}

/* 4) But in FAQ section H3 must be 20px */
.faq h3{font-size:20px;line-height:1.35;font-weight:700}

/* (H1 left as previously defined; if needed we can set explicitly) */

/* === HEADER FIX v2 === */

/* 1) Align menu and buttons vertically */
.site-header .header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 90px;
}

/* 2) Logo size */
.branding .logo img {
  width: 150px;
  height: auto;
}

/* 3) Menu ACCOUNT / PROMOTIONS */
.header-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}
.header-nav a {
  font-size: 15px;
  color: #ffffff;
  text-decoration: none;
  line-height: 1;
}
.header-nav a:hover {
  color: #C1FC3E;
  text-decoration: none;
}

/* 4) CTA group */
.header-cta {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Login button */
.btn--outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  min-width: 145px;
  font-weight: 600;
  border: 2px solid #ffffff;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  background: transparent;
  color: #ffffff;
  text-decoration: none;
  transition: all 0.25s ease-in-out;
}
.btn--outline:hover {
  background: #ffffff;
  color: #000000;
  text-decoration: none;
}

/* Register button */
.btn--lime {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  min-width: 165px;
  font-weight: 600;
  border: 2px solid transparent;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  background: linear-gradient(90deg, #d0ff67, #9dff2d);
  color: #0b0f0a;
  text-decoration: none;
  transition: all 0.25s ease-in-out;
}

/* === HEADER FIX v3 — stronger button text === */
.btn--outline,
.btn--lime { font-weight: 700; }

/* === HEADER FIX v4 — font weight + mobile alignment === */
.btn--outline,
.btn--lime { font-weight: 400; }

@media (max-width: 640px) {
  .site-header .header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 10px;
  }
  .branding { flex: 1; display:flex; align-items:center; }
  .branding .logo img { height: 40px; }
  .header-nav, .header-cta { display: none; }
  .nav-drawer { display: block; position: relative; z-index: 100; margin-left:auto; }
  .hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 10px;
    border: 2px solid #fff; color: #fff;
  }
  .hamburger svg { width: 22px; height: 22px; }
  .nav-panel {
    position: absolute; right: 0; top: 54px; min-width: 230px;
    background: #1c211a; border: 1px solid rgba(255,255,255,.10); border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35); padding: 12px; display: grid; gap: 8px;
  }
  .nav-panel a { padding: .6rem .75rem; border-radius: 10px; color: #e6f7d8; text-decoration:none; }
  .nav-panel a:hover { background: rgba(255,255,255,.06); }
}


/* === HEADER FIX v5 — hamburger, mobile buttons, desktop logo === */

/* 3) Desktop logo width 180px (mobile keeps height rule) */
.branding .logo img { width: 180px; height: auto; }

/* 1) Remove white border around hamburger */
.hamburger {
  border: none !important;
  background: transparent !important;
  color: #fff;
}

/* 2) Mobile nav buttons: inherit desktop .btn styles (no extra padding/hover from nav links) */
@media (max-width: 640px) {
  .nav-panel a { padding: .6rem .75rem; }                /* normal links keep padding */
  .nav-panel a.btn { padding: 0; }                       /* buttons use their own sizing */
  .nav-panel a.btn:hover { background: inherit; }        /* keep button-specific hover only */
  .nav-panel a:not(.btn):hover { background: rgba(255,255,255,.06); }
}

/* === HERO FIX v6 — H1 / meta / promo === */

/* 1) H1 Betovo Casino Review */
.page-title h1,
h1 {
  font-size: 45px;
  font-weight: 700;
}

/* 2) Updated on (left) / Rating (right) */
.meta-row,
.promo-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  color: #ffffff;
  gap: 16px;
}
.promo-meta { margin-top: 1.5rem; }

/* 3) .promo width + visuals */
.promo {
  max-width: 1180px;
  margin: 0 auto;
  padding: 4.375rem; /* 70px */
  border: 2px solid #C1FC3E;
  border-radius: 20px 0px 20px 0px;
  background: rgba(21, 26, 20, 0.6);
  box-shadow:
    0 0 25px rgba(193, 252, 62, 0.25),
    0 0 8px rgba(193, 252, 62, 0.20) inset;
}

/* Optional: make inner keep its rounding */
.promo__inner { border-radius: 16px; }

@media (max-width: 640px) {
  .meta-row { font-size: 14px; }
  .promo { padding: 2rem; }
}


/* === HERO FIX v7 — exact promo width 1180px (box-sizing border-box) === */
.promo {
  width: 1180px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 4.375rem;
  border: 2px solid #C1FC3E;
  border-radius: 20px 0 20px 0;
  box-shadow: 0 0 25px rgba(193, 252, 62, 0.25);
  background: rgba(21, 26, 20, 0.6);
}


/* === HERO FIX v8 — align .promo exactly under logo/header grid === */
.promo {
  width: 1180px;
  box-sizing: border-box;
  padding: 4.375rem;
  border: 2px solid #C1FC3E;
  border-radius: 20px 0 20px 0;
  box-shadow: 0 0 25px rgba(193, 252, 62, 0.25);
  background: rgba(21, 26, 20, 0.6);
  margin-left: calc((100% - 1200px) / 2 + 10px);
}
@media (max-width: 1300px) {
  .promo { margin-left: auto; margin-right: auto; width: 90%; }
}


/* === HERO FIX v9 — meta icons for Updated/Rating === */
.promo-meta img.icon,
.meta-row img.icon {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: -3px;
  display: inline-block;
}


/* === HERO FIX v10 — remove legacy bullets/stars & keep only SVG icons === */
.promo-updated::before,
.promo-rating::before { content: none !important; display: none !important; }

.promo-meta img.icon,
.meta-row img.icon {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}


/* === OVERVIEW — fixed 1180px & left alignment === */
.container.overview {
  width: 1180px;
  box-sizing: border-box;
  margin-left: calc((100% - 1200px)/2 + 10px);
  margin-right: 0;
  padding-inline: 0;
}
@media (max-width: 1300px){
  .container.overview{ width:100%; margin-left:auto; margin-right:auto; padding-inline:10px; }
}


/* === FAQ exact width alignment (1180px) === */
#faq .container {
  width: 1180px;
  margin-inline: auto;
  box-sizing: border-box;
  padding-inline: 0;
}


/* === FAQ exact fixed width (1180px aligned with overview) === */
#faq .container,
#faq .faq__wrap,
#faq .faq__list {
  width: 1180px !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
  padding-inline: 0 !important;
}


/* === FINAL FIX: FAQ full 1180px width aligned to overview === */
.faq {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.faq .container,
.faq__wrap,
.faq__list {
  width: 1180px !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}