/* ================================================
   PEEPO.CX  -  MODERN DARK AFFILIATE STYLESHEET
   Palette: deep navy, electric mint, magenta pop
   ================================================ */

:root{
  --bg:#0A0E27;
  --bg-soft:#0F1434;
  --panel:#141833;
  --panel-2:#1B2048;
  --line:#2A2E52;
  --line-soft:#242956;
  --text:#F2F4FF;
  --muted:#B6B8E0;
  --dim:#8A8DBE;
  --mint:#22E3B9;
  --mint-2:#7CF1C4;
  --mint-ink:#06352B;
  --magenta:#FF2E93;
  --magenta-2:#FF78BE;
  --gold:#FFD600;
  --warn:#FFB020;
  --radius:18px;
  --radius-sm:12px;
  --radius-lg:28px;
  --shadow-soft:0 10px 30px rgba(5,8,30,.55);
  --shadow-glow:0 0 0 1px rgba(34,227,185,.35), 0 20px 60px rgba(34,227,185,.18);
  --shadow-mag:0 0 0 1px rgba(255,46,147,.35), 0 20px 60px rgba(255,46,147,.18);
  --gradient-hero:radial-gradient(1200px 600px at 20% -10%, rgba(34,227,185,.18), transparent 60%),
                  radial-gradient(900px 500px at 90% 10%, rgba(255,46,147,.18), transparent 55%),
                  linear-gradient(180deg, #0A0E27 0%, #0E1234 100%);
  --gradient-btn:linear-gradient(135deg, #22E3B9 0%, #7CF1C4 100%);
  --gradient-mag:linear-gradient(135deg, #FF2E93 0%, #FF78BE 100%);
  --gradient-border:linear-gradient(135deg, rgba(34,227,185,.6), rgba(255,46,147,.5));
  --font-head:'Space Grotesk','Montserrat',system-ui,sans-serif;
  --font-body:'Inter','Segoe UI',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--mint);text-decoration:none;transition:color .2s ease}
a:hover{color:var(--mint-2)}
h1,h2,h3,h4,h5{font-family:var(--font-head);line-height:1.15;letter-spacing:-.02em;color:var(--text);margin:0 0 .6em}
h1{font-size:clamp(2.1rem,5vw,3.4rem);font-weight:800}
h2{font-size:clamp(1.6rem,3.6vw,2.4rem);font-weight:800}
h3{font-size:clamp(1.2rem,2.4vw,1.5rem);font-weight:700}
h4{font-size:1.1rem;font-weight:700}
p{margin:0 0 1em;color:var(--muted)}
strong{color:var(--text)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--panel);padding:.1em .4em;border-radius:6px;color:var(--mint-2);font-size:.9em}
hr{border:0;border-top:1px solid var(--line);margin:2rem 0}

.container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
.container-narrow{max-width:860px;margin:0 auto;padding:0 20px}

/* ========= HEADER ========= */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(10,14,39,.78);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;gap:24px;height:68px}
.logo{display:flex;align-items:center}
.logo img{height:38px;width:auto}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto;font-weight:600;font-size:.94rem}
.nav>a,.nav .dropdown-trigger{
  color:var(--text);padding:8px 12px;border-radius:10px;transition:background .2s ease, color .2s ease;
  background:none;border:0;cursor:pointer;font:inherit;
}
.nav>a:hover,.nav .dropdown-trigger:hover{background:var(--panel);color:var(--mint)}
.nav>a.active{color:var(--mint)}
.has-dropdown{position:relative}
.dropdown-trigger::after{content:" ▾";font-size:.7em;opacity:.7}
.dropdown-menu{
  position:absolute;top:calc(100% + 8px);right:0;min-width:260px;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:10px;box-shadow:var(--shadow-soft);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:all .18s ease;
  display:flex;flex-direction:column;gap:2px;
}
.has-dropdown:hover .dropdown-menu,.has-dropdown:focus-within .dropdown-menu{
  opacity:1;visibility:visible;transform:translateY(0);
}
.dropdown-menu a,.submenu-parent{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:10px;
  color:var(--text);font-weight:600;font-size:.92rem;
}
.dropdown-menu a:hover,.submenu-parent:hover{background:var(--panel-2);color:var(--mint)}
.flag-ico-img{width:20px;height:20px;border-radius:3px;object-fit:cover}
.has-submenu{position:relative}
.submenu-caret{margin-left:auto;opacity:.6}
.dropdown-submenu{
  display:none;flex-direction:column;gap:2px;
  margin:4px 0 4px 32px;padding-left:12px;border-left:2px solid var(--line);
}
.has-submenu:hover .dropdown-submenu,.has-submenu:focus-within .dropdown-submenu{display:flex}
.menu-toggle{
  display:none;background:none;border:0;color:var(--text);font-size:1.6rem;cursor:pointer;padding:4px 10px;border-radius:10px;
}
.menu-toggle:hover{background:var(--panel)}

@media (max-width:960px){
  .nav{display:none;position:fixed;top:68px;left:0;right:0;background:var(--bg-soft);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:16px;max-height:calc(100vh - 68px);overflow-y:auto;gap:4px}
  .nav.open{display:flex}
  .nav>a,.nav .dropdown-trigger{text-align:left;width:100%}
  .dropdown-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:transparent;border:0;padding:0;margin-left:12px}
  .menu-toggle{display:inline-block;margin-left:auto}
  .has-submenu .dropdown-submenu{display:none}
  .has-submenu.is-open .dropdown-submenu{display:flex}
  .has-submenu .submenu-caret{transition:transform .2s ease;display:inline-block}
  .has-submenu.is-open .submenu-caret{transform:rotate(90deg)}
  .submenu-parent{display:flex!important;align-items:center;justify-content:flex-start;gap:8px}
  .submenu-parent .submenu-caret{margin-left:auto}
}

/* ========= BUTTONS ========= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-head);font-weight:700;font-size:1rem;
  padding:14px 24px;border-radius:14px;cursor:pointer;border:0;
  transition:transform .15s ease, box-shadow .25s ease, filter .25s ease;
  text-decoration:none;letter-spacing:.01em;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--gradient-btn);color:var(--mint-ink);box-shadow:0 10px 24px rgba(34,227,185,.3)}
.btn-primary:hover{filter:brightness(1.05);box-shadow:0 14px 34px rgba(34,227,185,.45)}
.btn-secondary{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn-secondary:hover{background:var(--panel);border-color:var(--mint)}
.btn-magenta{background:var(--gradient-mag);color:#2A0319;box-shadow:0 10px 24px rgba(255,46,147,.3)}
.btn-ghost{background:var(--panel);color:var(--text);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--panel-2);border-color:var(--mint)}
.btn-sm{padding:9px 16px;font-size:.9rem;border-radius:10px}
.btn-lg{padding:18px 32px;font-size:1.1rem;border-radius:16px}
.btn-block{width:100%}

/* ========= HERO ========= */
.hero{
  position:relative;
  padding:28px 0 28px;
  background:var(--gradient-hero);
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='.5' fill='%23ffffff' opacity='.08'/></svg>");
  background-size:30px 30px;mix-blend-mode:screen;opacity:.5;
}
.hero .kicker{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(34,227,185,.1);color:var(--mint);
  padding:7px 14px;border-radius:999px;
  font-family:var(--font-head);font-weight:600;font-size:.84rem;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid rgba(34,227,185,.3);
}
.hero h1{margin:12px 0 10px;max-width:860px;font-size:clamp(1.9rem,4.2vw,2.9rem)}
.hero h1 .grad{
  background:var(--gradient-btn);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .lede{font-size:1.02rem;color:var(--muted);max-width:720px;margin-bottom:16px}
.hero-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.hero-trust{display:flex;gap:18px;flex-wrap:wrap;color:var(--dim);font-size:.85rem;align-items:center;margin-bottom:4px}
.hero-trust span{display:inline-flex;align-items:center;gap:6px}
.hero-trust span::before{content:"";width:6px;height:6px;background:var(--mint);border-radius:50%;box-shadow:0 0 8px var(--mint)}

/* ========= MARKET STRIP ========= */
.section{padding:72px 0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:28px;flex-wrap:wrap}
.section-head .kicker-sm{
  font-family:var(--font-head);font-weight:600;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mint);
}
.section-head h2{margin:0}
.section-head .see-all{color:var(--mint);font-weight:600}

.market-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.market-card{
  position:relative;
  background:linear-gradient(135deg, var(--panel) 0%, var(--panel-2) 100%);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:28px 24px;color:var(--text);text-decoration:none;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  display:flex;flex-direction:column;gap:16px;
  overflow:hidden;
}
.market-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(400px 200px at 100% 0%, rgba(34,227,185,.1), transparent 70%);
  opacity:0;transition:opacity .3s ease;
}
.market-card:hover{transform:translateY(-4px);border-color:var(--mint);box-shadow:0 20px 40px rgba(0,0,0,.4)}
.market-card:hover::after{opacity:1}
.mc-flag{width:56px;height:56px;border-radius:14px;overflow:hidden;background:var(--bg);display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
.mc-flag img{width:40px;height:40px;object-fit:cover;border-radius:6px}
.mc-head{display:flex;align-items:center;gap:14px}
.mc-head h3{margin:0;font-size:1.3rem}
.mc-head .mc-sub{color:var(--dim);font-size:.88rem;font-weight:500}
.mc-body p{color:var(--muted);margin:0;font-size:.95rem}
.mc-links{display:flex;flex-wrap:wrap;gap:6px}
.mc-links a{
  padding:6px 12px;background:var(--bg-soft);border:1px solid var(--line);
  border-radius:999px;font-size:.82rem;font-weight:600;color:var(--muted);
}
.mc-links a:hover{color:var(--mint);border-color:var(--mint)}
.mc-cta{display:inline-flex;align-items:center;gap:6px;color:var(--mint);font-weight:700;margin-top:auto}
.mc-cta::after{content:"→";transition:transform .2s ease}
.market-card:hover .mc-cta::after{transform:translateX(4px)}

/* ========= STAT ROW ========= */
.stat-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;
  margin:40px 0;
}
.stat-tile{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 20px;position:relative;overflow:hidden;
}
.stat-tile .stat-num{
  font-family:var(--font-head);font-weight:800;font-size:2.2rem;line-height:1;
  background:var(--gradient-btn);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:6px;
}
.stat-tile .stat-lab{color:var(--muted);font-size:.9rem;font-weight:500}

/* ========= HOW WE RATE / FEATURES ========= */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.feature-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 24px;transition:border-color .2s ease, transform .2s ease;
}
.feature-card:hover{border-color:var(--mint);transform:translateY(-2px)}
.feature-card .ic{
  width:52px;height:52px;border-radius:14px;
  background:linear-gradient(135deg, rgba(34,227,185,.15), rgba(255,46,147,.15));
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;font-size:1.5rem;
}
.feature-card h3{margin-bottom:8px}
.feature-card p{margin:0}

/* ========= CASINO LIST (unified ranking) ========= */
.ranking-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.ranking-note{color:var(--dim);font-size:.9rem}

.c-list{display:flex;flex-direction:column;gap:14px}
.c-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:22px;
  display:grid;grid-template-columns:72px 1.4fr 2fr 1fr;gap:20px;align-items:center;
  transition:border-color .2s ease, transform .2s ease;
  position:relative;
}
.c-card:hover{border-color:var(--mint);transform:translateY(-2px)}
.c-rank{
  position:absolute;top:14px;left:14px;
  width:30px;height:30px;border-radius:10px;
  background:var(--bg-soft);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-weight:800;font-size:.9rem;color:var(--mint);
}
.c-logo{
  width:88px;height:88px;border-radius:16px;
  background:var(--bg);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.c-logo img{max-width:68px;max-height:68px;object-fit:contain}
.c-info h3{margin:0 0 4px;font-size:1.15rem}
.c-info .c-tagline{color:var(--muted);font-size:.9rem;margin:0}
.c-score{display:inline-flex;align-items:center;gap:6px;margin-top:6px;color:var(--gold);font-weight:700;font-size:.9rem}
.c-score::before{content:"★";color:var(--gold)}
.c-bonus{display:flex;flex-direction:column;gap:6px}
.c-bonus .bonus-label{color:var(--dim);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.c-bonus .bonus-value{font-family:var(--font-head);font-weight:800;font-size:1.1rem;color:var(--text)}
.c-bonus .bonus-note{color:var(--muted);font-size:.84rem}
.c-cta{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.c-cta .btn{width:100%}
.c-cta .c-review{color:var(--muted);font-size:.82rem;text-align:center}

@media (max-width:900px){
  .c-card{grid-template-columns:60px 1fr;gap:14px;padding:18px 16px;padding-top:40px}
  .c-logo{width:60px;height:60px}
  .c-logo img{max-width:48px;max-height:48px}
  .c-rank{top:12px;left:12px}
  .c-bonus{grid-column:1/-1}
  .c-cta{grid-column:1/-1}
}

/* ========= PAYMENT STRIP ========= */
.payments{
  background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:28px 0;
}
.payments-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;opacity:1}
.payments-row img{
  padding:8px 14px;
  background:#F2F4FF;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  box-sizing:content-box;
}
.payments-row img{height:20px;width:auto;max-width:70px;object-fit:contain;display:block;filter:none;opacity:1}

/* ========= NEWS CARDS ========= */
.news-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.news-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;transition:transform .2s ease, border-color .2s ease;
  display:flex;flex-direction:column;
}
.news-card:hover{transform:translateY(-3px);border-color:var(--mint)}
.news-thumb{
  aspect-ratio:16/9;background:linear-gradient(135deg, rgba(34,227,185,.1), rgba(255,46,147,.1));
  display:flex;align-items:center;justify-content:center;font-size:3rem;
  border-bottom:1px solid var(--line);
}
.news-body{padding:22px}
.news-body .n-meta{display:flex;gap:10px;color:var(--dim);font-size:.82rem;margin-bottom:8px}
.news-body .n-meta .n-tag{color:var(--mint);font-weight:600}
.news-body h3{margin:0 0 10px;font-size:1.15rem;line-height:1.3}
.news-body h3 a{color:var(--text)}
.news-body h3 a:hover{color:var(--mint)}
.news-body p{color:var(--muted);font-size:.94rem;margin:0 0 14px}
.news-body .n-read{color:var(--mint);font-weight:600;font-size:.9rem}

/* ========= FAQ ========= */
.faq{display:flex;flex-direction:column;gap:12px}
.faq details{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:0;transition:border-color .2s ease;
}
.faq details[open]{border-color:var(--mint)}
.faq summary{
  padding:18px 22px;cursor:pointer;font-weight:700;font-family:var(--font-head);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  list-style:none;color:var(--text);font-size:1.02rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;color:var(--mint);transition:transform .2s ease;font-weight:400}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .faq-body{padding:0 22px 20px;color:var(--muted)}
.faq .faq-body p{margin:0 0 .7em}
.faq .faq-body p:last-child{margin:0}

/* ========= TABLES ========= */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
table.data{width:100%;border-collapse:collapse;font-size:.94rem;min-width:560px}
table.data th,table.data td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line)}
table.data th{background:var(--panel-2);color:var(--text);font-family:var(--font-head);font-weight:700;font-size:.86rem;letter-spacing:.04em;text-transform:uppercase}
table.data tr:last-child td{border-bottom:0}
table.data tr:hover td{background:rgba(34,227,185,.03)}

/* ========= CTA BANNER ========= */
.cta-banner{
  background:linear-gradient(135deg, #141833 0%, #1B2048 100%);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:40px 32px;text-align:center;
  position:relative;overflow:hidden;
}
.cta-banner::before{
  content:"";position:absolute;top:-50%;left:-10%;width:120%;height:200%;
  background:radial-gradient(circle, rgba(34,227,185,.12), transparent 60%);
  pointer-events:none;
}
.cta-banner h2{position:relative}
.cta-banner p{position:relative;max-width:620px;margin:0 auto 20px}
.cta-banner .btn{position:relative}

/* ========= AUTHOR / BIO ========= */
.author-box{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;display:grid;grid-template-columns:72px 1fr;gap:18px;align-items:center;margin:24px 0;
}
.author-box img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:2px solid var(--mint)}
.author-box .a-name{font-family:var(--font-head);font-weight:700;color:var(--text);margin:0 0 4px}
.author-box .a-role{color:var(--mint);font-size:.86rem;font-weight:600;margin:0}
.author-box .a-bio{color:var(--muted);font-size:.92rem;margin:6px 0 0}

/* ========= BREADCRUMBS ========= */
.breadcrumbs{display:flex;flex-wrap:wrap;gap:6px;color:var(--dim);font-size:.88rem;margin-bottom:18px}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs a:hover{color:var(--mint)}
.breadcrumbs .sep{color:var(--dim)}

/* ========= MARKET SUBNAV ========= */
.market-subnav{
  background:var(--bg-soft);border-bottom:1px solid var(--line);
  position:sticky;top:68px;z-index:40;
}
.subnav-scroll{display:flex;gap:4px;padding:12px 0;overflow-x:auto;scrollbar-width:none}
.subnav-scroll::-webkit-scrollbar{display:none}
.subnav-scroll a{
  flex-shrink:0;padding:8px 14px;border-radius:999px;
  background:var(--panel);border:1px solid var(--line);
  color:var(--muted);font-size:.88rem;font-weight:600;
  white-space:nowrap;
}
.subnav-scroll a:hover{color:var(--mint);border-color:var(--mint)}
.subnav-scroll a.active{background:var(--mint);color:var(--mint-ink);border-color:var(--mint)}

/* ========= PAGE HERO (market pages) ========= */
.page-hero{
  position:relative;padding:48px 0 40px;
  background:var(--gradient-hero);overflow:hidden;border-bottom:1px solid var(--line);
}
.page-hero h1{margin:0 0 12px}
.page-hero .lead{font-size:1.08rem;color:var(--muted);max-width:720px}
.page-hero .flag-inline{display:inline-block;width:36px;height:36px;vertical-align:middle;border-radius:6px}
.page-hero .h1-domain{color:var(--mint);font-weight:600;font-size:.6em;margin-left:8px}
.blob{position:absolute;pointer-events:none;border-radius:50%;filter:blur(60px);opacity:.5;z-index:0}
.blob.a{width:400px;height:400px;background:rgba(34,227,185,.4);top:-120px;left:-80px}
.blob.b{width:360px;height:360px;background:rgba(255,46,147,.3);bottom:-140px;right:-60px}
.page-hero .container{position:relative;z-index:1}

/* ========= CONTENT PROSE ========= */
.prose{color:var(--muted);font-size:1.02rem}
.prose h2{margin-top:2.2em;margin-bottom:.7em;color:var(--text)}
.prose h3{margin-top:1.6em;margin-bottom:.5em;color:var(--text)}
.prose p{margin:0 0 1.1em}
.prose ul,.prose ol{padding-left:1.4em;margin:0 0 1.1em}
.prose li{margin-bottom:.4em}
.prose a{color:var(--mint);text-decoration:underline;text-decoration-color:rgba(34,227,185,.3)}
.prose a:hover{color:var(--mint-2)}
.prose blockquote{
  border-left:3px solid var(--mint);
  padding:12px 18px;margin:1.4em 0;
  background:var(--panel);border-radius:0 var(--radius) var(--radius) 0;
  color:var(--text);
}

/* ========= PILL BADGES ========= */
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:.78rem;font-weight:600;font-family:var(--font-head);letter-spacing:.03em}
.pill-mint{background:rgba(34,227,185,.14);color:var(--mint);border:1px solid rgba(34,227,185,.3)}
.pill-mag{background:rgba(255,46,147,.14);color:var(--magenta);border:1px solid rgba(255,46,147,.3)}
.pill-gold{background:rgba(255,214,0,.14);color:var(--gold);border:1px solid rgba(255,214,0,.3)}
.pill-neutral{background:var(--bg-soft);color:var(--muted);border:1px solid var(--line)}

/* ========= MOBILE STICKY CTA (above the fold insurance) ========= */
.sticky-cta-mobile{display:none}
@media (max-width:720px){
  .sticky-cta-mobile{
    display:flex;position:fixed;bottom:0;left:0;right:0;
    background:rgba(10,14,39,.95);backdrop-filter:blur(12px);
    border-top:1px solid var(--line);padding:12px 16px;z-index:60;gap:10px;align-items:center;
  }
  .sticky-cta-mobile .sc-text{flex:1;font-size:.84rem;color:var(--muted)}
  .sticky-cta-mobile .sc-text strong{color:var(--text);display:block}
  .sticky-cta-mobile .btn{flex-shrink:0}
  body{padding-bottom:72px}
  .hero{padding:28px 0 20px}
  .hero .lede{font-size:1rem;margin-bottom:16px}
  .hero-ctas{margin-bottom:14px}
  .section{padding:40px 0}
  .page-hero{padding:28px 0 24px}
  .c-card{padding:14px;padding-top:34px}
}

/* ========= FOOTER ========= */
.site-footer{
  background:#07091E;border-top:1px solid var(--line);
  padding:56px 0 24px;margin-top:60px;
}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.footer-brand img{height:36px;width:auto;margin-bottom:14px}
.footer-brand p{color:var(--dim);font-size:.9rem;max-width:300px;margin:0 0 16px}
.footer-brand .social{display:flex;gap:8px}
.footer-brand .social a{
  width:36px;height:36px;border-radius:10px;
  background:var(--panel);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:1rem;
}
.footer-brand .social a:hover{color:var(--mint);border-color:var(--mint)}
.footer-col h4{
  font-family:var(--font-head);font-weight:700;font-size:.82rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text);margin:0 0 14px;
}
.footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.footer-col a{color:var(--muted);font-size:.92rem}
.footer-col a:hover{color:var(--mint)}
.footer-bottom{
  padding-top:24px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  color:var(--dim);font-size:.84rem;
}
.footer-bottom .footer-legal{display:flex;gap:16px;flex-wrap:wrap}
.footer-bottom .footer-legal a{color:var(--dim)}
.footer-bottom .footer-legal a:hover{color:var(--mint)}
.resp-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;background:var(--panel);border:1px solid var(--line);
  border-radius:999px;color:var(--muted);font-size:.78rem;font-weight:600;
}
.resp-badge .dot{width:8px;height:8px;background:var(--mint);border-radius:50%;box-shadow:0 0 10px var(--mint)}

@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:520px){
  .footer-grid{grid-template-columns:1fr;gap:24px}
}

/* ========= Markets grid responsive polish ========= */
@media (max-width:720px){
  .market-grid{grid-template-columns:1fr;gap:14px}
  .market-card{padding:22px 20px}
}

/* ========= Utility ========= */
.text-mint{color:var(--mint)}
.text-mag{color:var(--magenta)}
.text-center{text-align:center}
.mt-0{margin-top:0}
.mt-1{margin-top:.5rem}
.mt-2{margin-top:1rem}
.mt-3{margin-top:1.5rem}
.mt-4{margin-top:2rem}
.mb-0{margin-bottom:0}
.mb-2{margin-bottom:1rem}
.mb-4{margin-bottom:2rem}
.flex{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* ========= Highlight bar on first market card (featured) ========= */
.market-card.featured{
  border-color:transparent;
  background:linear-gradient(var(--panel), var(--panel)) padding-box, var(--gradient-border) border-box;
  border:1px solid transparent;
}
.market-card .mc-badge{
  position:absolute;top:16px;right:16px;
  background:var(--gradient-btn);color:var(--mint-ink);
  padding:4px 10px;border-radius:999px;font-size:.72rem;font-weight:700;font-family:var(--font-head);letter-spacing:.04em;
}

/* ========= Live ticker (something new) ========= */
.live-ticker{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:24px;margin:40px 0;position:relative;overflow:hidden;
}
.live-ticker .lt-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.live-ticker .lt-dot{width:10px;height:10px;background:var(--mint);border-radius:50%;box-shadow:0 0 10px var(--mint);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.live-ticker .lt-title{font-family:var(--font-head);font-weight:700;color:var(--text);font-size:1.05rem;margin:0}
.live-ticker .lt-sub{color:var(--dim);font-size:.84rem;margin-left:auto}
.lt-items{display:flex;flex-direction:column;gap:10px}
.lt-items .lt-row{
  display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;
  padding:12px 14px;background:var(--bg-soft);border-radius:12px;border:1px solid var(--line);font-size:.9rem;
}
.lt-row .lt-flag{width:22px;height:22px;border-radius:4px;object-fit:cover}
.lt-row .lt-op{color:var(--text);font-weight:600}
.lt-row .lt-amt{color:var(--mint);font-weight:700;font-family:var(--font-head)}
.lt-row .lt-time{color:var(--dim);font-size:.82rem}
@media (max-width:600px){
  .lt-row{grid-template-columns:auto 1fr auto}
  .lt-row .lt-time{grid-column:2}
  .lt-row .lt-amt{grid-column:3;grid-row:1/3}
}

/* ========= Compare table (something new) ========= */
.compare-table{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
}
.compare-head{
  display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:12px;
  padding:16px 22px;background:var(--panel-2);border-bottom:1px solid var(--line);
  font-family:var(--font-head);font-weight:700;font-size:.84rem;letter-spacing:.04em;text-transform:uppercase;color:var(--text);
}
.compare-row{
  display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:12px;
  padding:14px 22px;border-bottom:1px solid var(--line);align-items:center;
}
.compare-row:last-child{border-bottom:0}
.compare-row .cr-label{color:var(--muted);font-weight:600}
.compare-row .cr-val{color:var(--text);font-size:.94rem;font-weight:500}
.compare-row .yes{color:var(--mint);font-weight:700}
.compare-row .no{color:var(--dim);font-weight:600}
@media (max-width:720px){
  .compare-head,.compare-row{grid-template-columns:1.3fr 1fr;font-size:.86rem;padding:12px 16px}
  .compare-head span:nth-child(n+3),.compare-row span:nth-child(n+3){display:none}
}

/* ========= Tabs ========= */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:24px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{
  background:none;border:0;color:var(--muted);
  padding:12px 16px;cursor:pointer;font-family:var(--font-head);font-weight:600;font-size:.94rem;
  border-bottom:2px solid transparent;transition:all .2s ease;white-space:nowrap;
}
.tabs button:hover{color:var(--text)}
.tabs button.active{color:var(--mint);border-bottom-color:var(--mint)}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* ========= Floating Decor ========= */
.hero-stats{display:flex;gap:22px;flex-wrap:wrap;margin-top:14px;color:var(--muted)}
.hero-stats .hs{display:flex;flex-direction:column;gap:2px}
.hero-stats .hs .hs-n{font-family:var(--font-head);font-weight:800;font-size:1.35rem;color:var(--text)}
.hero-stats .hs .hs-l{color:var(--dim);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}

/* ========= Markets double below hero (something new specific) ========= */
.dual-markets{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.dual-markets .dm-tile{
  background:linear-gradient(135deg, var(--panel) 0%, var(--panel-2) 100%);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:36px 28px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:16px;
  transition:all .25s ease;
}
.dual-markets .dm-tile:hover{transform:translateY(-4px);border-color:var(--mint)}
.dual-markets .dm-tile.be{border-color:rgba(34,227,185,.3)}
.dual-markets .dm-tile.fr{border-color:rgba(255,46,147,.3)}
.dual-markets .dm-head{display:flex;align-items:center;gap:14px}
.dual-markets .dm-flag{
  width:66px;height:44px;border-radius:8px;overflow:hidden;
  background:var(--bg);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.06);
  flex-shrink:0;position:relative;
}
.dual-markets .dm-flag img{width:100%;height:100%;object-fit:cover;border-radius:0;display:block}
.dual-markets .dm-title{margin:0;font-size:1.4rem}
.dual-markets .dm-sub{color:var(--dim);font-size:.86rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.dual-markets .dm-pills{display:flex;flex-wrap:wrap;gap:6px}
.dual-markets .dm-stat{display:flex;gap:20px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:4px 0}
.dual-markets .dm-stat .dms-n{font-family:var(--font-head);font-weight:800;font-size:1.4rem;color:var(--mint)}
.dual-markets .dm-stat .dms-l{font-size:.8rem;color:var(--dim);text-transform:uppercase;letter-spacing:.04em;line-height:1.3}
.dual-markets .dm-tile.fr .dms-n{color:var(--magenta)}
.dual-markets .dm-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
@media (max-width:800px){
  .dual-markets{grid-template-columns:1fr;gap:16px}
}

/* ========= Payouts ticker fade ========= */
.lt-fade{position:relative}
.lt-fade::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:60px;
  background:linear-gradient(180deg, transparent, var(--panel));
  pointer-events:none;
}

/* ========= News single ========= */
.article-hero{
  padding:56px 0 32px;background:var(--gradient-hero);border-bottom:1px solid var(--line);
}
.article-hero h1{font-size:clamp(1.8rem,4vw,2.8rem);max-width:860px}
.article-hero .meta{display:flex;gap:14px;color:var(--dim);font-size:.9rem;margin-top:14px;flex-wrap:wrap;align-items:center}
.article-hero .meta img{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid var(--mint)}
.article-content{padding:48px 0 60px}
.toc{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 24px;margin-bottom:32px;
}
.toc h4{margin:0 0 10px;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mint)}
.toc ul{margin:0;padding-left:1.2em;color:var(--muted);display:flex;flex-direction:column;gap:6px}
.toc a{color:var(--muted);font-size:.94rem}
.toc a:hover{color:var(--mint)}

/* Reduce motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ================================================
   LEGACY-MARKUP ALIASES
   Supports the existing market/content pages
   ================================================ */

/* reveal (used in content sections) */
.reveal{opacity:1;}

/* content container used in old pages */
.content{padding:28px 0 48px}
.content .container{max-width:1120px}

/* Casino list reuse */
.casino-list{display:flex;flex-direction:column;gap:14px;margin:24px 0}
.casino-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:22px;
  display:grid;grid-template-columns:88px 1.6fr 1.4fr 1.4fr;gap:20px;align-items:center;
  position:relative;transition:border-color .2s ease, transform .2s ease;
}
.casino-card:hover{border-color:var(--mint);transform:translateY(-2px)}
.casino-card .rank-badge{
  position:absolute;top:14px;left:14px;
  width:30px;height:30px;border-radius:10px;
  background:var(--bg-soft);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-weight:800;font-size:.9rem;color:var(--mint);
}
.casino-card .casino-thumb{
  width:88px;height:88px;border-radius:16px;
  background:var(--bg);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;position:relative;
}
.casino-card .casino-thumb img, .casino-card .casino-thumb .thumb-wrap img{max-width:80px;max-height:70px;width:auto;height:auto;object-fit:contain;margin:auto;display:block}
.casino-info h3{margin:0 0 6px;font-size:1.15rem}
.casino-info .rating{color:var(--gold);font-weight:700;font-size:.9rem;margin-bottom:6px;display:inline-block}
.casino-info .casino-features{list-style:none;padding:0;margin:0;color:var(--muted);font-size:.9rem}
.casino-info .casino-features li{position:relative;padding-left:16px;margin-bottom:4px}
.casino-info .casino-features li::before{content:"✓";position:absolute;left:0;top:0;color:var(--mint);font-weight:700}
.casino-bonus{display:flex;flex-direction:column;gap:4px}
.casino-bonus .bonus-label{color:var(--dim);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.casino-bonus .bonus-amount{font-family:var(--font-head);font-weight:800;font-size:1.1rem;color:var(--text);line-height:1.3}
.casino-cta{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.casino-cta .btn-block{width:100%}
.casino-cta .payment-icons{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.casino-cta .payment-icons img{
  padding:5px 8px;
  background:#F2F4FF;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.1);
  box-sizing:content-box;
}
.casino-cta .payment-icons img{height:16px;width:auto;max-width:52px;object-fit:contain;display:block}

@media (max-width:980px){
  .casino-card{grid-template-columns:92px 1fr;gap:14px;padding:18px 16px;padding-top:40px}
  .casino-card .casino-thumb{width:92px;height:92px}
  .casino-card .casino-thumb img, .casino-card .casino-thumb .thumb-wrap img{max-width:84px;max-height:74px}
  .casino-card .rank-badge{top:12px;left:12px}
  .casino-bonus{grid-column:1/-1}
  .casino-cta{grid-column:1/-1}
}

/* Headings used in content */
.list-heading{margin:30px 0 20px;font-size:clamp(1.4rem,3vw,2rem)}

/* TOC aside */
aside.toc-aside, .toc-aside{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;margin:28px 0;
}
aside.toc-aside h2, .toc-aside h2{margin:0 0 12px;font-size:1.05rem;color:var(--mint);font-family:var(--font-head);font-weight:700;letter-spacing:.03em}
aside.toc-aside ol, .toc-aside ol{margin:0;padding-left:1.3em;color:var(--muted);display:flex;flex-direction:column;gap:6px}
aside.toc-aside a, .toc-aside a{color:var(--muted)}
aside.toc-aside a:hover, .toc-aside a:hover{color:var(--mint)}

/* Review banner (homepage preview images in content) */
.review-banner{
  margin:18px 0 20px;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--panel);
}
.review-banner img{width:100%;height:auto;display:block}

/* Content tables with class */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);margin:18px 0}
.table-wrap table{width:100%;border-collapse:collapse;font-size:.94rem;min-width:560px}
.table-wrap table th,.table-wrap table td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);color:var(--muted)}
.table-wrap table th{background:var(--panel-2);color:var(--text);font-family:var(--font-head);font-weight:700;font-size:.86rem;letter-spacing:.04em;text-transform:uppercase}
.table-wrap table tr:last-child td{border-bottom:0}
.table-wrap table tr:hover td{background:rgba(34,227,185,.03)}
.table-wrap table td strong{color:var(--text)}

/* Content h2/h3 inside section.content */
.content h2, section.content h2{margin-top:1.8em;margin-bottom:.6em;color:var(--text)}
.content h3, section.content h3{margin-top:1.4em;margin-bottom:.4em;color:var(--text)}
.content section p, section.content p{color:var(--muted);margin:0 0 1em}
.content ul, section.content ul{color:var(--muted);padding-left:1.4em;margin:0 0 1em}
.content li, section.content li{margin-bottom:.4em}
.content a, section.content a{color:var(--mint);text-decoration:underline;text-decoration-color:rgba(34,227,185,.3)}
.content a:hover, section.content a:hover{color:var(--mint-2)}

/* Legacy responsible badge */
.responsible-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;background:var(--panel);border:1px solid var(--line);
  border-radius:999px;color:var(--muted);font-size:.78rem;font-weight:600;
}
.responsible-badge::before{content:"";width:8px;height:8px;background:var(--mint);border-radius:50%;box-shadow:0 0 10px var(--mint)}

/* Legacy footer compatibility */
.footer-grid h3{
  font-family:var(--font-head);font-weight:700;font-size:.82rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text);margin:0 0 14px;
}

/* Legal pages */
.legal-content{max-width:860px;margin:0 auto;padding:60px 20px}
.legal-content h1{margin-bottom:16px}
.legal-content h2{margin-top:2em;margin-bottom:.6em}
.legal-content p{color:var(--muted);margin:0 0 1em}
.legal-content ul{color:var(--muted);padding-left:1.4em;margin:0 0 1em}
.legal-content li{margin-bottom:.4em}
.legal-content .meta{color:var(--dim);font-size:.88rem;margin-bottom:28px}

/* News index */
.news-index{padding:40px 0 80px}
.news-index .section-head{margin-bottom:24px}

/* Article prose */
.article-content .container-narrow{max-width:820px}
.article-content h2{margin:1.8em 0 .6em;font-size:1.6rem}
.article-content h3{margin:1.3em 0 .4em;font-size:1.2rem}
.article-content p{color:var(--muted);margin:0 0 1.1em}
.article-content ul,.article-content ol{color:var(--muted);padding-left:1.4em;margin:0 0 1.1em}
.article-content li{margin-bottom:.4em}
.article-content strong{color:var(--text)}
.article-content a{color:var(--mint);text-decoration:underline;text-decoration-color:rgba(34,227,185,.3)}
.article-content blockquote{border-left:3px solid var(--mint);padding:12px 18px;margin:1.4em 0;background:var(--panel);border-radius:0 var(--radius) var(--radius) 0;color:var(--text)}

/* Grid helpers */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:720px){.grid-2{grid-template-columns:1fr}}

/* ===== Image badge and TOC collapse fixes ===== */
.casino-thumb .thumb-wrap{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
}
.casino-thumb img{
  max-width:72%;max-height:72%;
  width:auto;height:auto;object-fit:contain;
  margin:auto;display:block;
}
.oc-new-badge{
  position:absolute;top:-14px;right:-4px;
  background:var(--gradient-mag);color:#2A0319;
  font-family:var(--font-head);font-weight:800;font-size:.6rem;letter-spacing:.06em;
  padding:3px 7px;border-radius:999px;
  box-shadow:0 4px 10px rgba(255,46,147,.35);
  text-transform:uppercase;line-height:1;z-index:2;
  white-space:nowrap;
}
@media (max-width:980px){
  .oc-new-badge{top:-11px;right:-2px;font-size:.56rem;padding:2px 6px}
}

/* TOC collapsible on right */
aside.toc{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:0;margin:24px 0;overflow:hidden;
}
aside.toc .toc-header{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:16px 20px;cursor:pointer;user-select:none;
}
aside.toc .toc-title{
  font-family:var(--font-head);font-weight:700;color:var(--mint);
  font-size:.84rem;letter-spacing:.08em;text-transform:uppercase;
}
aside.toc .toc-toggle{
  background:var(--bg-soft);border:1px solid var(--line);color:var(--mint);
  width:32px;height:32px;border-radius:10px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.9rem;transition:transform .2s ease, background .2s ease;
  padding:0;
}
aside.toc .toc-toggle:hover{background:var(--panel-2)}
aside.toc .toc-list{
  margin:0;padding:0 24px 18px 44px;color:var(--muted);
  display:flex;flex-direction:column;gap:6px;
  max-height:1200px;overflow:hidden;
  transition:max-height .25s ease, padding-top .25s ease, padding-bottom .25s ease, opacity .2s ease;
}
aside.toc.collapsed .toc-list{
  max-height:0;padding-top:0;padding-bottom:0;opacity:0;
}
aside.toc.collapsed .toc-toggle{transform:rotate(-90deg)}
aside.toc .toc-list a{color:var(--muted);font-size:.94rem}
aside.toc .toc-list a:hover{color:var(--mint)}

/* ===== Legacy FAQ accordion styling (market pages) ===== */
.faq-accordion{display:flex;flex-direction:column;gap:12px;margin:16px 0}
.faq-accordion .faq-item,
.faq-item{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:0;transition:border-color .2s ease;list-style:none;
}
.faq-accordion .faq-item[open],
.faq-item[open]{border-color:var(--mint)}
.faq-accordion .faq-item>summary,
.faq-item>summary{
  padding:18px 22px;cursor:pointer;font-weight:700;font-family:var(--font-head);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  list-style:none;color:var(--text);font-size:1.02rem;
}
.faq-accordion .faq-item>summary::-webkit-details-marker,
.faq-item>summary::-webkit-details-marker,
.faq-accordion .faq-item>summary::marker,
.faq-item>summary::marker{display:none;content:""}
.faq-accordion .faq-item>summary::after,
.faq-item>summary::after{
  content:"+";font-size:1.5rem;color:var(--mint);
  transition:transform .2s ease;font-weight:400;flex-shrink:0;
}
.faq-accordion .faq-item[open]>summary::after,
.faq-item[open]>summary::after{transform:rotate(45deg)}
.faq-accordion .faq-answer,
.faq-item .faq-answer{padding:0 22px 20px;color:var(--muted)}
.faq-accordion .faq-answer p,
.faq-item .faq-answer p{margin:0 0 .7em;color:var(--muted)}
.faq-accordion .faq-answer p:last-child,
.faq-item .faq-answer p:last-child{margin:0}
.faq-accordion .faq-answer ul,
.faq-item .faq-answer ul{color:var(--muted);padding-left:1.4em;margin:0 0 .7em}

/* ===== Read more on mobile for long leads ===== */
.page-hero .lead,
.page-hero p.lead{position:relative;transition:max-height .3s ease}
@media (max-width:720px){
  .page-hero .lead.is-collapsed{
    max-height:4.6em;overflow:hidden;position:relative;
  }
  .page-hero .lead.is-collapsed::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:2.4em;
    background:linear-gradient(180deg, transparent, var(--bg) 90%);
    pointer-events:none;
  }
  .read-more-btn{
    display:inline-flex;align-items:center;gap:6px;
    margin-top:8px;background:transparent;border:1px solid var(--mint);
    color:var(--mint);font-family:var(--font-head);font-weight:700;font-size:.84rem;
    padding:7px 14px;border-radius:999px;cursor:pointer;
    transition:background .2s ease, color .2s ease;
  }
  .read-more-btn:hover{background:var(--mint);color:var(--mint-ink)}
  .read-more-btn::after{content:"▾";transition:transform .2s ease}
  .read-more-btn.is-expanded::after{transform:rotate(180deg)}
}
@media (min-width:721px){
  .read-more-btn{display:none}
}

/* ===== Language toggle (NL / FR) in BE market subnav ===== */
.lang-toggle{
  margin-left:auto;flex-shrink:0;
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;
  background:linear-gradient(135deg, rgba(34,227,185,.14), rgba(255,46,147,.14));
  border:1px solid rgba(34,227,185,.4);
  border-radius:999px;
  color:var(--mint);text-decoration:none;
  font-family:var(--font-head);font-weight:700;font-size:.78rem;
  letter-spacing:.08em;text-transform:uppercase;
  transition:all .2s ease;
  box-shadow:0 2px 8px rgba(34,227,185,.1);
}
.lang-toggle::before{
  content:"";width:16px;height:11px;
  background-image:url('images/flags/be.svg');
  background-size:cover;background-position:center;
  border-radius:2px;flex-shrink:0;
}
.lang-toggle:hover{
  background:var(--gradient-btn);color:var(--mint-ink);
  border-color:var(--mint);
  box-shadow:0 4px 14px rgba(34,227,185,.3);
  transform:translateY(-1px);
}
.lang-toggle:hover::before{filter:brightness(1.1)}

@media (max-width:720px){
  .lang-toggle{padding:5px 10px;font-size:.72rem}
  .lang-toggle::before{width:14px;height:10px}
}

/* ===== Related guides grid (bottom of market pages) ===== */
.related-title{
  font-family:var(--font-head);font-weight:800;
  font-size:clamp(1.4rem,2.6vw,1.8rem);
  color:var(--text);
  margin:40px 0 18px;
  position:relative;padding-left:16px;
}
.related-title::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:70%;
  background:var(--gradient-btn);border-radius:2px;
}
.related-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;margin-bottom:48px;
}
.related-card{
  display:flex;flex-direction:column;gap:8px;
  background:linear-gradient(135deg, var(--panel) 0%, var(--panel-2) 100%);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;
  text-decoration:none;color:var(--text);
  transition:transform .2s ease, border-color .2s ease, box-shadow .25s ease;
  position:relative;overflow:hidden;
}
.related-card::after{
  content:"→";position:absolute;top:50%;right:18px;
  transform:translateY(-50%) translateX(-6px);
  color:var(--mint);font-size:1.3rem;font-weight:700;
  opacity:0;transition:all .25s ease;
}
.related-card:hover{
  transform:translateY(-2px);
  border-color:var(--mint);
  box-shadow:0 10px 28px rgba(0,0,0,.4), 0 0 0 1px rgba(34,227,185,.1);
}
.related-card:hover::after{
  opacity:1;transform:translateY(-50%) translateX(0);
}
.related-card:hover .r-title{color:var(--mint)}
.related-card .r-tag{
  display:inline-flex;align-items:center;align-self:flex-start;
  padding:3px 10px;border-radius:999px;
  background:rgba(34,227,185,.14);color:var(--mint);
  border:1px solid rgba(34,227,185,.3);
  font-family:var(--font-head);font-weight:700;font-size:.68rem;
  letter-spacing:.08em;text-transform:uppercase;line-height:1.3;
}
.related-card .r-title{
  display:block;font-family:var(--font-head);font-weight:700;
  font-size:1.02rem;line-height:1.3;color:var(--text);
  padding-right:20px;transition:color .2s ease;
}
@media (max-width:720px){
  .related-grid{grid-template-columns:1fr;gap:10px;margin-bottom:32px}
  .related-card{padding:14px 16px}
  .related-title{font-size:1.3rem;margin:28px 0 14px}
}

/* ===== Mobile hero compact layout ===== */
@media (max-width:720px){
  .hero{padding:20px 0 24px}
  .hero .kicker{
    font-size:.68rem;padding:5px 10px;letter-spacing:.06em;line-height:1.3;
    display:inline-block;
  }
  .hero h1{font-size:1.65rem;line-height:1.15;margin:10px 0 8px}
  .hero .lede{font-size:.95rem;line-height:1.5;margin-bottom:14px}
  .hero-ctas{gap:8px;margin-bottom:12px}
  .hero-ctas .btn-lg{padding:14px 22px;font-size:.95rem;flex:1}
  .hero-trust{
    display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;
    font-size:.78rem;line-height:1.3;margin-bottom:0;
  }
  .hero-trust span{display:inline-flex;align-items:center;gap:5px}
  .hero-trust span::before{width:5px;height:5px}
  .hero-stats{
    display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;
    margin-top:16px;
    padding-top:14px;border-top:1px solid var(--line);
  }
  .hero-stats .hs{flex-direction:row;align-items:baseline;gap:8px}
  .hero-stats .hs .hs-n{font-size:1.4rem;line-height:1}
  .hero-stats .hs .hs-l{font-size:.68rem;line-height:1.2;letter-spacing:.04em}
}
@media (max-width:380px){
  .hero h1{font-size:1.45rem}
  .hero .kicker{font-size:.62rem;padding:4px 8px}
  .hero-ctas{flex-direction:column}
  .hero-ctas .btn-lg{width:100%}
}

/* ===== Article hero image (news posts) ===== */
.article-hero-image{
  margin:0 0 32px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--panel);
  box-shadow:0 20px 60px rgba(0,0,0,.4);
  position:relative;
}
.article-hero-image img{
  width:100%;height:auto;display:block;
  aspect-ratio:16/9;object-fit:cover;
}
@media (max-width:720px){
  .article-hero-image{margin:0 0 20px;border-radius:var(--radius)}
}

/* Make news-thumb img fill properly */
.news-card .news-thumb{position:relative;overflow:hidden}
.news-card .news-thumb img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  transition:transform .4s ease;
}
.news-card:hover .news-thumb img{transform:scale(1.04)}

/* ===== Flag styling improvements across the site ===== */
@media (max-width:720px){
  .dual-markets .dm-flag{width:72px;height:48px;border-radius:8px}
  .dual-markets .dm-head{gap:12px;align-items:center}
  .dual-markets .dm-title{font-size:1.15rem;line-height:1.25}
  .dual-markets .dm-sub{font-size:.72rem}
}

/* Header dropdown flag icons: keep crisp rectangular aspect */
.flag-ico-img{
  width:22px;height:14px;border-radius:3px;object-fit:cover;
  box-shadow:0 1px 2px rgba(0,0,0,.3);flex-shrink:0;
}

/* Inline flag next to H1 in page-hero */
.page-hero .flag-inline{
  display:inline-block;width:42px;height:28px;
  vertical-align:middle;border-radius:4px;
  object-fit:cover;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}
@media (max-width:720px){
  .page-hero .flag-inline{width:32px;height:22px;border-radius:3px}
}

/* Ticker row flag */
.lt-row .lt-flag{
  width:26px;height:17px;border-radius:3px;object-fit:cover;
  box-shadow:0 1px 2px rgba(0,0,0,.3);
}

/* ===== Author box - market page variant with full child styling ===== */
.author-box.reveal{
  display:grid;grid-template-columns:96px 1fr;gap:22px;
  align-items:start;
  background:linear-gradient(135deg, var(--panel) 0%, var(--panel-2) 100%);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:28px;margin:32px 0;
}
.author-box .author-avatar{
  width:96px;height:96px;border-radius:50%;object-fit:cover;
  border:3px solid transparent;
  background:linear-gradient(var(--panel), var(--panel)) padding-box, var(--gradient-border) border-box;
  box-shadow:0 10px 24px rgba(0,0,0,.4);
}
.author-box .author-info{display:flex;flex-direction:column;gap:4px}
.author-box .author-eyebrow{
  font-family:var(--font-head);font-weight:700;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mint);margin-bottom:4px;
}
.author-box .author-name-row{
  display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:4px;
}
.author-box .author-name{
  margin:0;font-family:var(--font-head);font-weight:800;font-size:1.3rem;color:var(--text);line-height:1.2;
}
.author-box .author-email-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 12px;background:rgba(34,227,185,.14);color:var(--mint);
  border:1px solid rgba(34,227,185,.3);border-radius:999px;
  font-family:var(--font-head);font-weight:600;font-size:.78rem;
  text-decoration:none;transition:all .2s ease;
}
.author-box .author-email-btn:hover{
  background:var(--mint);color:var(--mint-ink);border-color:var(--mint);
}
.author-box .author-role{
  color:var(--muted);font-weight:600;font-size:.9rem;margin-bottom:10px;
}
.author-box .author-bio{
  color:var(--muted);font-size:.95rem;line-height:1.55;margin:0;
}

@media (max-width:720px){
  .author-box.reveal{
    grid-template-columns:1fr;
    gap:16px;padding:22px 20px;margin:24px 0;
    text-align:left;
  }
  .author-box .author-avatar{
    width:80px;height:80px;
    margin:0 auto;
    display:block;
  }
  .author-box .author-info{text-align:center;align-items:center}
  .author-box .author-name-row{justify-content:center}
  .author-box .author-name{font-size:1.2rem}
  .author-box .author-bio{font-size:.92rem;text-align:left;margin-top:6px}
}

/* ===== Make submenu caret an obvious tappable control on mobile ===== */
@media (max-width:960px){
  .has-submenu .submenu-parent{position:relative;padding-right:48px}
  .has-submenu .submenu-caret{
    position:absolute;top:50%;right:0;transform:translateY(-50%);
    width:40px;height:40px;
    display:inline-flex;align-items:center;justify-content:center;
    margin-left:0;
    color:var(--mint);font-size:1rem;
    border-radius:10px;
    cursor:pointer;
  }
  .has-submenu .submenu-caret:hover,
  .has-submenu .submenu-caret:active{background:var(--panel-2)}
  .has-submenu.is-open .submenu-caret{transform:translateY(-50%) rotate(90deg)}
}

/* ===== Caret must capture its own taps on mobile ===== */
@media (max-width:960px){
  .has-submenu .submenu-caret{
    pointer-events:auto;
    z-index:2;
  }
}

/* ===== Crypto badge (Bitcoin orange/gold gradient) ===== */
.oc-crypto-badge{
  position:absolute;top:-14px;right:-4px;
  background:linear-gradient(135deg, #F7931A 0%, #FDB04C 100%);
  color:#2A1A05;
  font-family:var(--font-head);font-weight:800;font-size:.6rem;letter-spacing:.06em;
  padding:3px 7px;border-radius:999px;
  box-shadow:0 4px 10px rgba(247,147,26,.4);
  text-transform:uppercase;line-height:1;z-index:2;white-space:nowrap;
  display:inline-flex;align-items:center;gap:3px;
}
.oc-crypto-badge::before{content:"₿";font-weight:900;font-size:.7rem}
@media (max-width:980px){
  .oc-crypto-badge{top:-11px;right:-2px;font-size:.56rem;padding:2px 6px}
}

/* If both NOUVEAU and CRYPTO on same card, stack them */
.thumb-wrap .oc-new-badge + .oc-crypto-badge,
.thumb-wrap .oc-crypto-badge + .oc-new-badge{
  top:14px; /* second one below the first */
}

/* ===== Secondary bonus (shown below the welcome bonus) ===== */
.casino-bonus .bonus-extra{
  display:flex;align-items:flex-start;gap:8px;
  margin-top:8px;padding-top:10px;
  border-top:1px dashed var(--line);
}
.casino-bonus .bonus-extra-icon{
  flex-shrink:0;width:22px;height:22px;border-radius:6px;
  background:linear-gradient(135deg, rgba(34,227,185,.18), rgba(255,46,147,.18));
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  color:var(--mint);font-size:.72rem;font-weight:800;
  line-height:1;
}
.casino-bonus .bonus-extra-label{
  color:var(--dim);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;font-weight:700;line-height:1.3;
  margin-bottom:2px;display:block;
}
.casino-bonus .bonus-extra-text{
  color:var(--text);font-family:var(--font-head);font-weight:700;
  font-size:.88rem;line-height:1.3;
}
@media (max-width:720px){
  .casino-bonus .bonus-extra{padding-top:8px;margin-top:6px}
  .casino-bonus .bonus-extra-text{font-size:.84rem}
}

/* ===== Aggressive mobile compaction for casino cards so CTA appears above-the-fold ===== */
@media (max-width:720px){
  .casino-card{
    grid-template-columns:76px 1fr;
    gap:12px;padding:14px;padding-top:32px;
    border-radius:16px;
  }
  .casino-card .casino-thumb{width:76px;height:76px;border-radius:12px}
  .casino-card .casino-thumb img,
  .casino-card .casino-thumb .thumb-wrap img{max-width:66px;max-height:60px}
  .casino-card .rank-badge{top:10px;left:10px;width:24px;height:24px;font-size:.78rem;border-radius:7px}
  .oc-new-badge, .oc-crypto-badge{top:-9px;right:-2px;font-size:.52rem;padding:2px 5px}
  .casino-info h3{font-size:1rem;margin:0 0 2px}
  .casino-info .rating{font-size:.82rem;margin-bottom:3px}
  .casino-info .casino-features{font-size:.82rem;line-height:1.3}
  .casino-info .casino-features li{margin-bottom:1px;padding-left:14px}
  .casino-info .casino-features li::before{font-size:.8rem}
  /* Hide 3rd feature on mobile to save space */
  .casino-info .casino-features li:nth-child(n+3){display:none}

  .casino-bonus{grid-column:1/-1;margin-top:6px}
  .casino-bonus .bonus-label{font-size:.65rem;letter-spacing:.06em}
  .casino-bonus .bonus-amount{font-size:.95rem;line-height:1.25}
  .casino-bonus .bonus-extra{margin-top:4px;padding-top:6px;gap:6px}
  .casino-bonus .bonus-extra-icon{width:18px;height:18px;font-size:.65rem;border-radius:5px}
  .casino-bonus .bonus-extra-label{font-size:.62rem;letter-spacing:.05em}
  .casino-bonus .bonus-extra-text{font-size:.78rem;line-height:1.25}

  .casino-cta{grid-column:1/-1;margin-top:4px;gap:6px}
  .casino-cta .btn-block{padding:12px 14px;font-size:.94rem;border-radius:12px}
  .casino-cta .payment-icons{gap:4px;margin-top:4px}
  .casino-cta .payment-icons img{height:14px;padding:3px 6px;border-radius:5px}
}

/* Even narrower phones */
@media (max-width:380px){
  .casino-card{grid-template-columns:68px 1fr;gap:10px;padding:12px;padding-top:30px}
  .casino-card .casino-thumb{width:68px;height:68px}
  .casino-card .casino-thumb img,
  .casino-card .casino-thumb .thumb-wrap img{max-width:58px;max-height:52px}
  .casino-info h3{font-size:.95rem}
  .casino-info .casino-features li{font-size:.78rem}
}

/* ===== Mobile: hide hero stats and trust pills so markets appear sooner ===== */
@media (max-width:720px){
  .hero-trust,
  .hero-stats{display:none}
  .hero-ctas{margin-bottom:0}
}