:root{
  /* Editorial palette — Mostbet KG online (Payline-style) */
  --bg:#033A73; --bg-2:#0B509D;
  --surface:#1A2D52; --surface-2:#142342;
  --line:#4B5E8C; --line-soft:#344D7E;

  --ink:#F8FAFC; --ink-2:#DBE4F0;
  --mute:#9FB0C8; --mute-2:#7E92AE;

  --gold:#F85303; --gold-deep:#C73D00; --gold-soft:rgba(248,83,3,.12);
  --emerald:#4DC180; --emerald-soft:rgba(77,193,128,.10);
  --crimson:#E2563E; --crimson-soft:rgba(226,86,62,.10);
  --ink-on-gold:#FFFFFF;

  --r-sm:4px; --r-md:10px; --r-lg:18px;
  --maxw:1320px;

  --serif:'Newsreader','Times New Roman',Georgia,serif;
  --sans:'Inter','Geist','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden}
html{background:var(--bg)}
body{
  background:linear-gradient(180deg,#033A73 0%,#0B509D 100%);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

img,video,iframe{max-width:100%;display:block;height:auto}
pre,code{overflow-x:auto;word-wrap:break-word}

a{color:inherit;text-decoration:none}
a:hover{color:var(--gold)}

button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.wrap,.container{max-width:var(--maxw);margin:0 auto;padding:0 32px;width:100%}

/* Typography utilities */
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
.mono{font-family:var(--mono);font-weight:500;letter-spacing:0}
.up{text-transform:uppercase;letter-spacing:.12em}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}

/* ---------- TOPBAR ---------- */
.topbar{border-bottom:1px solid var(--line-soft);background:var(--bg);font-family:var(--mono);font-size:11px;color:var(--mute)}
.topbar-row{display:flex;align-items:center;justify-content:space-between;height:36px;max-width:var(--maxw);margin:0 auto;padding:0 32px}
.topbar .left,.topbar .right{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.topbar .dot{width:6px;height:6px;border-radius:50%;background:var(--emerald);display:inline-block;margin-right:8px;box-shadow:0 0 0 3px rgba(77,193,128,.25)}
.topbar a:hover{color:var(--ink)}
.topbar .topbar-link{color:var(--mute)}
.brand-text{color:inherit;font-weight:inherit}
.topbar .pill{padding:3px 8px;border:1px solid var(--line);border-radius:999px;color:var(--ink-2)}

/* ---------- MASTHEAD ---------- */
.masthead{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:100}
.masthead-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:86px;max-width:var(--maxw);margin:0 auto;padding:0 32px;gap:12px}
.nav-l,.nav-r{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.nav-r{justify-content:flex-end}
.navlink{font-size:13px;color:var(--ink-2);position:relative;padding:4px 0}
.navlink.active{color:var(--gold)}
.navlink.active::after{content:"";position:absolute;left:-6px;right:-6px;bottom:-6px;height:1px;background:var(--gold)}
.brand{font-family:var(--serif);font-weight:600;font-size:38px;letter-spacing:-.02em;line-height:1;display:flex;align-items:baseline;gap:6px;color:var(--ink)}
.brand .dot-i{color:var(--gold)}
.brand .ed{font-family:var(--mono);font-size:10px;color:var(--mute);letter-spacing:.18em;text-transform:uppercase;align-self:center;margin-left:8px}
.lang-switch{display:inline-flex;gap:8px;border-left:1px solid var(--line);padding-left:14px;margin-left:6px;font-family:var(--mono);font-size:11px;letter-spacing:.12em}
.lang-switch a,.lang-switch .active{padding:3px 6px;color:var(--mute);font-weight:600}
.lang-switch .active{color:var(--gold)}

.burger{display:none;background:none;border:1px solid var(--line);color:var(--ink);width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:1.1rem;align-items:center;justify-content:center}
.nav-menu-mobile{display:none}

/* ---------- BUTTONS ---------- */
.btn,.cta-button{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:.02em;border:1px solid transparent;transition:background .15s,color .15s,border-color .15s,transform .15s;cursor:pointer;text-decoration:none}
.btn-gold,.cta-button{background:var(--gold);color:var(--ink-on-gold)}
.btn-gold:hover,.cta-button:hover{background:var(--gold-deep);color:var(--ink-on-gold);text-decoration:none}
.btn-ghost{border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-em{background:var(--emerald);color:#0c2014}
.btn-sm{padding:6px 12px;font-size:11px}
.btn-lg{padding:14px 26px;font-size:15px}
.mobile-cta{display:none}

.iconbtn{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2)}
.iconbtn:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- Section header ---------- */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;padding-bottom:18px;margin-bottom:28px;border-bottom:1px solid var(--line);gap:20px;flex-wrap:wrap}
.sec-head h2{font-family:var(--serif);font-weight:500;font-size:38px;letter-spacing:-.02em;margin:0;color:var(--ink);line-height:1.1}
.sec-head .num{font-family:var(--mono);font-size:11px;color:var(--gold);letter-spacing:.2em}
.sec-head .meta{font-family:var(--mono);font-size:11px;color:var(--mute);letter-spacing:.16em;text-transform:uppercase}

section{padding:60px 0}
section + section{border-top:1px solid var(--line-soft)}

/* ---------- Tags / pills ---------- */
.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:5px 10px;border-radius:999px;border:1px solid var(--line);color:var(--mute)}
.tag.gold{color:var(--gold);border-color:rgba(248,83,3,.5)}
.tag.em{color:var(--emerald);border-color:rgba(77,193,128,.45)}
.tag.solid{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* ---------- key-value ---------- */
.kvs{display:grid}
.kv{display:grid;grid-template-columns:1fr auto;padding:10px 0;border-top:1px solid var(--line-soft);font-size:13px;gap:8px}
.kv:first-child{border-top:0}
.kv b{font-weight:500;color:var(--ink)}
.kv span{color:var(--mute)}

/* ---------- Striped placeholder ---------- */
.ph{position:relative;overflow:hidden;border-radius:var(--r-sm);background:repeating-linear-gradient(135deg,rgba(26,45,82,1) 0 14px,rgba(20,35,66,1) 14px 28px);border:1px solid var(--line-soft);min-height:240px}
.ph-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--mute);text-transform:uppercase;text-align:center;padding:0 16px}
.ph.tone-gold{background:repeating-linear-gradient(135deg,rgba(199,61,0,.45) 0 14px,rgba(199,61,0,.18) 14px 28px);border-color:rgba(248,83,3,.45)}

.divider{height:1px;background:var(--line-soft);margin:0;border:0}

/* ---------- Breadcrumbs ---------- */
.crumbs,.breadcrumbs{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;color:var(--mute);letter-spacing:.06em;padding:22px 0;flex-wrap:wrap}
.crumbs a:hover,.breadcrumbs a:hover{color:var(--gold)}
.crumbs .sep,.breadcrumbs .sep{color:var(--line)}
.crumbs .here,.breadcrumbs .here{color:var(--ink)}

/* ---------- Article body (drop-cap, etc) ---------- */
.article p{font-size:17px;line-height:1.7;color:var(--ink-2);margin:0 0 22px}
.article h2,article h2{font-family:var(--serif);font-weight:500;font-size:32px;line-height:1.18;margin:48px 0 18px;letter-spacing:-.02em;color:var(--ink)}
.article h3,article h3{font-family:var(--serif);font-weight:500;font-size:24px;line-height:1.2;margin:36px 0 14px;letter-spacing:-.015em;color:var(--ink)}
.article ul,article ul,.article ol,article ol{padding-left:22px;color:var(--ink-2);font-size:16px;line-height:1.7;margin:0 0 22px}
.article ul li,article ul li{margin-bottom:8px}
.article blockquote,article blockquote{font-family:var(--serif);font-style:italic;font-weight:400;font-size:24px;line-height:1.35;margin:36px 0;padding:8px 0 8px 26px;border-left:2px solid var(--gold);color:var(--ink)}
.article strong,article strong{color:var(--ink);font-weight:600}

.dropcap{display:inline-block;float:left;font-family:var(--serif);font-weight:500;font-size:88px;line-height:.78;padding:8px 14px 0 0;color:var(--gold)}

/* ---------- Cards / layouts ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:24px}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:24px 0}
.card h3{margin-top:0;color:var(--gold);font-family:var(--serif);font-size:22px}

/* ---------- Tables ---------- */
.table-wrap{width:100%;overflow-x:auto;margin:24px 0;border:1px solid var(--line);border-radius:10px}
table{width:100%;border-collapse:collapse;background:var(--surface);font-size:14px}
th,td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line-soft)}
th{background:var(--surface-2);color:var(--gold);font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(11,80,157,.3)}

/* ---------- Callouts ---------- */
.age-disclaimer{background:rgba(226,86,62,.12);border:1px solid var(--crimson);border-radius:6px;padding:10px 14px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:#FFD1C8;margin:18px 0;text-transform:uppercase}
.disclaimer{font-size:12px;color:var(--mute);margin:14px 0;font-family:var(--mono);letter-spacing:.04em}
.byline{font-family:var(--mono);font-size:11px;color:var(--mute);border-left:2px solid var(--gold);padding-left:14px;margin:0 0 24px;letter-spacing:.04em;line-height:1.6}
.byline strong{color:var(--ink-2);font-weight:600}
.note{background:var(--surface);border-left:3px solid var(--gold);padding:18px 22px;border-radius:6px;margin:24px 0;font-size:15px}
.affiliate-disclosure{font-family:var(--mono);font-size:10px;color:var(--mute-2);background:rgba(20,35,66,.6);padding:10px 14px;border-radius:6px;margin:24px 0;border-left:2px solid var(--line);letter-spacing:.04em;line-height:1.7;text-transform:none}

/* ---------- Hero — editorial cover (V1) ---------- */
.editorial-hero{padding:56px 0 60px}
.editorial-hero .meta-strip{display:flex;align-items:center;gap:18px;margin-bottom:36px;color:var(--mute);flex-wrap:wrap}
.editorial-hero .meta-strip .line{flex:1;height:1px;background:var(--line-soft);min-width:40px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.editorial-hero h1{font-family:var(--serif);font-size:64px;line-height:1.02;margin:0 0 14px;font-weight:500;letter-spacing:-.025em;color:var(--ink)}
.editorial-hero h1 .italic{font-style:italic;font-weight:400;color:var(--gold)}
.editorial-hero .lede{margin-top:18px;font-size:18px;line-height:1.55;color:var(--ink-2);max-width:560px;font-family:var(--serif);font-weight:300}
.hero-ctas{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.hero-stats{margin-top:42px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hero-stats .stat{padding:18px 22px;border-left:1px solid var(--line-soft)}
.hero-stats .stat:first-child{border-left:0}
.hero-stats .stat .v{font-family:var(--serif);font-size:42px;line-height:1;color:var(--ink)}
.hero-stats .stat .v.gold{color:var(--gold)}
.hero-stats .stat .l{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);margin-top:8px}

/* Score visual */
.score-circle{position:relative;width:220px;height:220px;margin:0 auto}
.score-circle .num{font-family:var(--serif);font-size:64px;line-height:1;color:var(--ink)}
.score-circle .num .max{font-size:22px;color:var(--mute)}

/* Editor's pick stamp */
.stamp{position:absolute;right:14px;top:14px;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--gold);border-radius:999px;background:rgba(3,58,115,.85);backdrop-filter:blur(4px);color:var(--gold);font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;line-height:1;z-index:2}
.stamp div{display:inline;font-style:normal !important;font-family:var(--mono)}
.stamp .sub{display:none}
.stamp::before{content:"★";font-size:11px;line-height:1}

/* Pros / Cons split */
.proscons{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:40px}
.proscons .col{padding:28px}
.proscons .col.pros{background:rgba(77,193,128,.07);border-right:1px solid var(--line)}
.proscons .col.cons{background:rgba(226,86,62,.07)}
.proscons ul{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:12px}
.proscons ul li{display:grid;grid-template-columns:18px 1fr;gap:10px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.proscons ul li::before{font-family:var(--mono);font-size:13px;font-weight:700}
.proscons .pros ul li::before{content:"+";color:var(--emerald)}
.proscons .cons ul li::before{content:"−";color:var(--crimson)}

/* Score bars (sections) */
.score-bar{padding:12px 0;border-top:1px solid var(--line-soft)}
.score-bar:first-child{border-top:0}
.score-bar .row{display:grid;grid-template-columns:1fr auto;gap:4px;font-size:13px}
.score-bar .lbl{color:var(--ink-2)}
.score-bar .val{font-family:var(--mono);color:var(--gold)}
.score-bar .track{height:3px;background:var(--surface);border-radius:2px;margin-top:8px;overflow:hidden}
.score-bar .fill{height:100%;background:linear-gradient(90deg,var(--gold-deep),var(--gold))}

/* Welcome offer card */
.welcome-card{margin-top:20px;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:8px;display:flex;gap:18px;align-items:center}
.welcome-card .badge{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--gold-deep),var(--gold));display:grid;place-items:center;color:var(--ink-on-gold);font-family:var(--serif);font-weight:600;font-size:22px;flex-shrink:0}
.welcome-card .body{flex:1}
.welcome-card .label{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.welcome-card .title{font-family:var(--serif);font-size:20px;line-height:1.15;margin-top:6px;color:var(--ink)}

/* Hero info card overlay */
.hero-photo{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.hero-photo > img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:0;border:0}
.hero-photo .ph{position:relative;inset:auto;border-radius:0;border:0;min-height:auto;aspect-ratio:16/9}
.hero-photo .overlay{position:static;background:var(--surface-2);border:0;border-top:1px solid var(--line);border-radius:0;padding:20px;backdrop-filter:none}
.hero-photo .overlay .top{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.hero-photo .overlay .logo-sq{width:44px;height:44px;border-radius:8px;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:22px}
.hero-photo .overlay .name{font-family:var(--serif);font-size:20px;line-height:1;color:var(--ink)}
.hero-photo .overlay .sub{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--mute);margin-top:4px;text-transform:uppercase}
.hero-photo .facts-grid{display:grid;grid-template-columns:repeat(2,1fr)}
.hero-photo .facts-grid .f{padding:10px 0;border-top:1px solid var(--line-soft)}
.hero-photo .facts-grid .f:nth-child(2n){padding-left:14px;border-left:1px solid var(--line-soft)}
.hero-photo .facts-grid .f .k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--mute);text-transform:uppercase}
.hero-photo .facts-grid .f .v{font-size:12px;margin-top:4px;color:var(--ink)}

/* Score band */
.score-band{margin-top:56px;padding-top:36px;border-top:1px solid var(--line)}
.score-band .grid{display:grid;grid-template-columns:240px 1fr 1fr;gap:48px}

/* Promo code pill */
.promo-code{display:inline-block;background:#000;color:var(--gold);border:1px dashed var(--gold);padding:6px 12px;border-radius:6px;font-family:var(--mono);font-weight:600;letter-spacing:1px;margin:6px 0;font-size:13px}

/* Bonus box (editorial style) */
.bonus-box{background:linear-gradient(135deg,var(--surface) 0%,var(--surface-2) 100%);border:1px solid var(--gold);border-radius:var(--r-lg);padding:24px 28px;margin:24px 0;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}
.bonus-box h3{color:var(--gold);margin:0 0 8px;font-family:var(--serif);font-size:22px;font-weight:500}
.bonus-box p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.6}

/* FAQ */
.faq-item{background:var(--surface);border:1px solid var(--line-soft);border-radius:8px;padding:18px 22px;margin:10px 0}
.faq-item h3{color:var(--gold);margin:0 0 10px;font-family:var(--serif);font-size:18px;font-weight:500}
.faq-item p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.6}

/* Images */
.content-img{max-width:920px;width:100%;height:auto;margin:28px auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-md);border:1px solid var(--line)}
.shot{display:block;width:auto;max-width:320px;max-height:640px;height:auto;margin:24px auto;border-radius:var(--r-md);border:1px solid var(--line);box-shadow:0 6px 30px rgba(0,0,0,.45)}

/* ---------- Footer ---------- */
.site-footer{background:var(--bg-2);border-top:1px solid var(--line);margin-top:60px;padding:48px 0 28px;font-family:var(--mono);font-size:12px;color:var(--mute);letter-spacing:.04em}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:40px;max-width:var(--maxw);margin:0 auto;padding:0 32px}
.footer-col .footer-title{color:var(--gold);font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;margin:0 0 14px}
.footer-col a{display:block;color:var(--ink-2);padding:5px 0;font-size:12px;letter-spacing:.04em}
.footer-col a:hover{color:var(--gold)}
.footer-col p{margin:0 0 6px;font-size:11px;line-height:1.6;color:var(--mute)}
.footer-bottom{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);text-align:center;font-size:11px;color:var(--mute);max-width:var(--maxw);margin-left:auto;margin-right:auto;padding-left:32px;padding-right:32px;letter-spacing:.08em;text-transform:uppercase}
.footer-bottom strong{color:var(--ink-2)}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .editorial-hero h1{font-size:48px}
  .score-band .grid{grid-template-columns:1fr;gap:32px}
  .proscons{grid-template-columns:1fr}
  .proscons .col.pros{border-right:0;border-bottom:1px solid var(--line)}
}
@media(max-width:900px){
  .nav-l,.nav-r{display:none}
  .masthead-row{grid-template-columns:1fr auto auto;height:64px}
  .brand{font-size:28px}
  .burger{display:inline-flex}
  .mobile-cta{display:inline-flex}
  .nav-menu-mobile{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);padding:14px 0;z-index:99;flex-direction:column;gap:0}
  .nav-menu-mobile.open{display:flex}
  .nav-menu-mobile a{padding:12px 32px;font-size:14px;color:var(--ink-2);border-top:1px solid var(--line-soft)}
  .nav-menu-mobile a:first-child{border-top:0}
  .nav-menu-mobile a:hover,.nav-menu-mobile a.active{color:var(--gold)}
  .nav-menu-mobile .lang-mobile{display:flex;gap:14px;padding:14px 32px;border-top:1px solid var(--line-soft);font-family:var(--mono);font-size:11px;letter-spacing:.16em}
  .topbar{display:none}
  section{padding:42px 0}
  .editorial-hero{padding:32px 0 42px}
  .editorial-hero h1{font-size:36px}
  .sec-head h2{font-size:28px}
  .article p{font-size:16px}
  .hero-stats{grid-template-columns:1fr;border:1px solid var(--line)}
  .hero-stats .stat{border-left:0;border-top:1px solid var(--line-soft)}
  .hero-stats .stat:first-child{border-top:0}
  .wrap,.container{padding:0 18px}
  .footer-grid{padding:0 18px}
  .footer-bottom{padding-left:18px;padding-right:18px}
  .bonus-box{grid-template-columns:1fr}
  .dropcap{font-size:64px}
  .welcome-card{flex-direction:column;text-align:center;align-items:stretch}
}
@media(max-width:480px){
  .editorial-hero h1{font-size:28px}
  .brand{font-size:22px}
  .sec-head h2{font-size:22px}
  .score-circle{width:180px;height:180px}
  .score-circle .num{font-size:48px}
}