/* =============================================
   PIN-UP NIGERIA — Design System
   Brand: #0D1016 bg | #00CFA6 teal | #FF2400 red
   Market: Nigeria | Language: English
   ============================================= */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ── Tokens ── */
:root {
   --bg: #0D1016;
   --bg2: #131721;
   --bg3: #1a1f2e;
   --teal: #00CFA6;
   --teal-d: #009e80;
   --teal-g: rgba(0, 207, 166, 0.12);
   --red: #FF2400;
   --red-d: #cc1d00;
   --gold: #FFD700;
   --white: #ffffff;
   --t1: #c8d0e0;
   --t2: #8b95aa;
   --t3: #535d70;
   --muted: #232b3a;
   --radius: 10px;
   --radius-sm: 6px;
   --shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
   --font: 'Outfit', sans-serif;
   --font2: 'Space Grotesk', sans-serif;
   --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Reset ── */
*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0
}

html {
   scroll-behavior: smooth;
   -webkit-text-size-adjust: 100%
}

body {
   font-family: var(--font);
   background: var(--bg);
   color: var(--t1);
   line-height: 1.65;
   font-size: 16px;
   overflow-x: hidden
}

img {
   max-width: 100%;
   height: auto;
   display: block
}

a {
   color: var(--teal);
   text-decoration: none
}

a:hover {
   color: var(--white)
}

ul {
   list-style: none
}

button {
   cursor: pointer;
   border: none;
   background: none;
   font-family: inherit
}

/* ── Skip link ── */
.skip-link {
   position: absolute;
   left: -9999px;
   top: 4px;
   z-index: 9999;
   background: var(--teal);
   color: #000;
   padding: 8px 16px;
   border-radius: var(--radius-sm);
   font-weight: 700
}

.skip-link:focus {
   left: 8px
}

/* ── Container ── */
.container {
   max-width: 1180px;
   margin: 0 auto;
   padding: 0 20px
}

.container-wide {
   max-width: 1400px;
   margin: 0 auto;
   padding: 0 24px
}

/* ── Buttons ── */
.btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 12px 28px;
   border-radius: var(--radius-sm);
   font-weight: 700;
   font-size: 0.95rem;
   transition: all 0.2s var(--ease);
   line-height: 1.2;
   white-space: nowrap
}

.btn-red {
   background: var(--red);
   color: var(--white)
}

.btn-red:hover {
   background: var(--red-d);
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(255, 36, 0, 0.35);
   color: var(--white)
}

.btn-teal {
   background: var(--teal);
   color: #000
}

.btn-teal:hover {
   background: var(--teal-d);
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(0, 207, 166, 0.35);
   color: #000
}

.btn-outline {
   border: 1.5px solid var(--teal);
   color: var(--teal);
   background: transparent
}

.btn-outline:hover {
   background: var(--teal-g);
   color: var(--white)
}

.btn-ghost {
   border: 1.5px solid var(--muted);
   color: var(--t2);
   background: transparent;
   padding: 8px 18px;
   font-size: 0.85rem
}

.btn-ghost:hover {
   border-color: var(--teal);
   color: var(--teal)
}

.btn-lg {
   padding: 16px 36px;
   font-size: 1.05rem
}

.btn-sm {
   padding: 8px 18px;
   font-size: 0.82rem
}

/* ── Badges ── */
.badge {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   padding: 4px 12px;
   border-radius: 20px;
   font-size: 0.72rem;
   font-weight: 700;
   letter-spacing: 0.05em;
   text-transform: uppercase
}

.badge-teal {
   background: rgba(0, 207, 166, 0.15);
   color: var(--teal);
   border: 1px solid rgba(0, 207, 166, 0.3)
}

.badge-red {
   background: rgba(255, 36, 0, 0.15);
   color: var(--red);
   border: 1px solid rgba(255, 36, 0, 0.3)
}

.badge-gold {
   background: rgba(255, 215, 0, 0.15);
   color: var(--gold);
   border: 1px solid rgba(255, 215, 0, 0.3)
}

.badge-new {
   background: var(--teal);
   color: #000;
   font-weight: 800
}

/* ══════════════════
   HEADER
══════════════════ */
.site-header {
   position: sticky;
   top: 0;
   z-index: 800;
   background: rgba(13, 16, 22, 0.95);
   backdrop-filter: blur(12px);
   border-bottom: 1px solid var(--muted);
   height: 60px;
   display: flex;
   align-items: center
}

.header-inner {
   display: flex;
   align-items: center;
   gap: 20px;
   max-width: 1180px;
   margin: 0 auto;
   padding: 0 20px;
   width: 100%
}

.logo {
   display: flex;
   align-items: center;
   flex-shrink: 0
}

.logo img {
   height: 38px;
   width: auto
}

.nav-main {
   display: flex;
   align-items: center;
   gap: 2px;
   flex: 1;
   justify-content: center
}

.nav-main a {
   color: var(--t2);
   font-size: 0.84rem;
   font-weight: 500;
   padding: 6px 11px;
   border-radius: var(--radius-sm);
   transition: all 0.18s;
   white-space: nowrap
}

.nav-main a:hover,
.nav-main a.active {
   color: var(--white);
   background: var(--muted)
}

.header-actions {
   display: flex;
   align-items: center;
   gap: 10px;
   flex-shrink: 0
}

#mobile-account-btn {
   display: none
}

.burger {
   display: none;
   flex-direction: column;
   gap: 5px;
   width: 36px;
   height: 36px;
   align-items: center;
   justify-content: center;
   border-radius: var(--radius-sm);
   border: 1px solid var(--muted);
   flex-shrink: 0
}

.burger span {
   display: block;
   width: 20px;
   height: 2px;
   background: var(--t1);
   border-radius: 2px;
   transition: all 0.25s
}

@media(max-width:900px) {
   .nav-main {
      display: none
   }

   .header-actions {
      display: none
   }

   .burger {
      display: flex
   }

   #mobile-account-btn {
      display: inline-flex
   }
}

/* ── Mobile Nav ── */
.mobile-nav {
   display: none;
   flex-direction: column;
   background: var(--bg2);
   border-bottom: 1px solid var(--muted);
   padding: 12px 20px 20px;
   gap: 4px
}

.mobile-nav.open {
   display: flex
}

.mobile-nav a {
   color: var(--t1);
   padding: 10px 14px;
   border-radius: var(--radius-sm);
   font-weight: 500;
   font-size: 0.92rem;
   transition: all 0.15s;
   border-bottom: 1px solid var(--muted)
}

.mobile-nav a:last-of-type {
   border-bottom: none
}

.mobile-nav a:hover {
   color: var(--teal);
   background: var(--teal-g)
}

.mobile-cta {
   margin-top: 12px;
   display: flex;
   gap: 10px
}

.mobile-cta .btn {
   flex: 1;
   justify-content: center
}

/* ══════════════════
   HERO VARIANTS
══════════════════ */
.hero-split {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0;
   min-height: 420px;
   overflow: hidden
}

.hero-split__text {
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 52px 48px;
   background: var(--bg2)
}

.hero-split__img {
   position: relative;
   overflow: hidden
}

.hero-split__img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center top
}

.hero-full {
   position: relative;
   min-height: 480px;
   display: flex;
   align-items: center;
   overflow: hidden;
   background: var(--bg2)
}

.hero-full img.hero-bg {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   opacity: 0.35
}

.hero-full .hero-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, rgba(13, 16, 22, 0.95) 50%, transparent)
}

.hero-full .hero-content {
   position: relative;
   z-index: 2;
   padding: 60px 0
}

.hero-zigzag {
   display: grid;
   grid-template-columns: 55% 45%;
   gap: 0;
   min-height: 440px;
   overflow: hidden
}

.hero-zigzag__text {
   padding: 60px 52px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   background: linear-gradient(135deg, var(--bg2), var(--bg3))
}

.hero-zigzag__visual {
   background: var(--bg3);
   position: relative;
   overflow: hidden
}

.hero-zigzag__visual img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: right center
}

@media(max-width:768px) {

   .hero-split,
   .hero-zigzag {
      grid-template-columns: 1fr
   }

   .hero-split__img,
   .hero-zigzag__visual {
      height: 220px
   }

   .hero-split__text,
   .hero-zigzag__text {
      padding: 36px 20px
   }

   .hero-full {
      min-height: 360px
   }
}

/* ── Typography ── */
.hero-eyebrow {
   font-size: 0.72rem;
   font-weight: 700;
   letter-spacing: 0.15em;
   text-transform: uppercase;
   color: var(--teal);
   margin-bottom: 14px
}

.hero-h1 {
   font-size: clamp(1.8rem, 4vw, 2.8rem);
   font-weight: 900;
   line-height: 1.15;
   color: var(--white);
   margin-bottom: 16px
}

.hero-h1 em {
   color: var(--teal);
   font-style: normal
}

.hero-h1 strong {
   color: var(--red)
}

.lead {
   font-size: 1.05rem;
   color: var(--t1);
   line-height: 1.7;
   margin-bottom: 24px
}

.section-title {
   font-size: clamp(1.35rem, 3vw, 1.9rem);
   font-weight: 800;
   color: var(--white);
   margin-bottom: 8px
}

.section-title em {
   color: var(--teal);
   font-style: normal
}

.section-sub {
   color: var(--t2);
   font-size: 0.92rem;
   margin-bottom: 32px
}

/* ══════════════════
   SECTIONS
══════════════════ */
.section {
   padding: 64px 0
}

.section-sm {
   padding: 40px 0
}

.section-alt {
   background: var(--bg2)
}

.section-dark {
   background: var(--bg3)
}

/* ── Breadcrumb ── */
.breadcrumbs {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 0.8rem;
   color: var(--t3);
   margin-bottom: 28px;
   flex-wrap: wrap
}

.breadcrumbs a {
   color: var(--t2)
}

.breadcrumbs a:hover {
   color: var(--teal)
}

.breadcrumbs .sep {
   color: var(--muted)
}

/* ══════════════════
   CARDS
══════════════════ */
.card {
   background: var(--bg2);
   border: 1px solid var(--muted);
   border-radius: var(--radius);
   padding: 24px
}

.card-teal {
   border-color: rgba(0, 207, 166, 0.25);
   background: rgba(0, 207, 166, 0.04)
}

.card-red {
   border-color: rgba(255, 36, 0, 0.25);
   background: rgba(255, 36, 0, 0.04)
}

.card-hover {
   transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s
}

.card-hover:hover {
   border-color: var(--teal);
   transform: translateY(-4px);
   box-shadow: 0 8px 32px rgba(0, 207, 166, 0.12)
}

/* ══════════════════
   GRIDS
══════════════════ */
.grid-2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 24px
}

.grid-3 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px
}

.grid-4 {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px
}

.grid-auto {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   gap: 20px
}

@media(max-width:900px) {

   .grid-3,
   .grid-4 {
      grid-template-columns: 1fr 1fr
   }
}

@media(max-width:640px) {

   .grid-2,
   .grid-3,
   .grid-4 {
      grid-template-columns: 1fr
   }
}

/* ══════════════════
   TABLES
══════════════════ */
.table-wrap {
   overflow-x: auto;
   border-radius: var(--radius);
   border: 1px solid var(--muted);
   margin: 20px 0
}

.data-table {
   width: 100%;
   border-collapse: collapse;
   font-size: 0.88rem
}

.data-table th {
   background: var(--bg3);
   color: var(--teal);
   font-weight: 700;
   text-align: left;
   padding: 12px 16px;
   border-bottom: 2px solid var(--muted);
   font-size: 0.78rem;
   letter-spacing: 0.05em;
   text-transform: uppercase;
   white-space: nowrap
}

.data-table td {
   padding: 11px 16px;
   border-bottom: 1px solid var(--muted);
   color: var(--t1)
}

.data-table tr:last-child td {
   border-bottom: none
}

.data-table tr:hover td {
   background: rgba(0, 207, 166, 0.03)
}

.data-table td.val-teal {
   color: var(--teal);
   font-weight: 700
}

.data-table td.val-gold {
   color: var(--gold);
   font-weight: 700
}

.data-table td.val-red {
   color: var(--red);
   font-weight: 700
}

/* Odds table (sports specific) */
.odds-table .data-table th {
   background: rgba(0, 207, 166, 0.1)
}

.odds-pill {
   display: inline-block;
   background: var(--bg3);
   border: 1px solid var(--muted);
   border-radius: 4px;
   padding: 3px 10px;
   font-weight: 700;
   font-size: 0.82rem;
   color: var(--gold);
   font-family: var(--font2)
}

.odds-pill:hover {
   background: var(--teal);
   color: #000;
   border-color: var(--teal)
}

/* ══════════════════
   CHARTS
══════════════════ */
.chart-box {
   background: var(--bg2);
   border: 1px solid var(--muted);
   border-radius: var(--radius);
   padding: 24px
}

.chart-title {
   font-weight: 700;
   color: var(--white);
   font-size: 0.92rem;
   margin-bottom: 18px
}

/* Bar chart */
.bar-row {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 12px
}

.bar-label {
   font-size: 0.78rem;
   color: var(--t2);
   width: 130px;
   flex-shrink: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
}

.bar-track {
   flex: 1;
   background: var(--bg3);
   border-radius: 4px;
   height: 22px;
   overflow: hidden;
   position: relative
}

.bar-fill {
   height: 100%;
   border-radius: 4px;
   display: flex;
   align-items: center;
   padding-left: 10px;
   font-size: 0.72rem;
   font-weight: 700;
   color: #000;
   transition: width 1.2s var(--ease);
   min-width: 36px
}

.bar-fill.teal {
   background: linear-gradient(90deg, var(--teal-d), var(--teal))
}

.bar-fill.red {
   background: linear-gradient(90deg, var(--red-d), var(--red));
   color: var(--white)
}

.bar-fill.gold {
   background: linear-gradient(90deg, #b8960a, var(--gold));
   color: #000
}

/* Donut/ring (CSS) */
.ring-chart {
   display: flex;
   gap: 24px;
   align-items: center;
   flex-wrap: wrap
}

.ring {
   width: 110px;
   height: 110px;
   border-radius: 50%;
   position: relative;
   flex-shrink: 0
}

.ring-inner {
   position: absolute;
   inset: 16px;
   border-radius: 50%;
   background: var(--bg2);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center
}

.ring-val {
   font-size: 1.2rem;
   font-weight: 800;
   color: var(--white)
}

.ring-sub {
   font-size: 0.65rem;
   color: var(--t3);
   text-align: center
}

.ring-legend {
   display: flex;
   flex-direction: column;
   gap: 8px;
   flex: 1
}

.ring-legend-item {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 0.8rem;
   color: var(--t2)
}

.ring-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   flex-shrink: 0
}

/* Progress bars (horizontal) */
.progress-group {
   display: flex;
   flex-direction: column;
   gap: 14px
}

.progress-item {}

.progress-header {
   display: flex;
   justify-content: space-between;
   margin-bottom: 5px;
   font-size: 0.8rem
}

.progress-label {
   color: var(--t2)
}

.progress-val {
   color: var(--teal);
   font-weight: 700
}

.progress-track {
   background: var(--bg3);
   border-radius: 4px;
   height: 8px;
   overflow: hidden
}

.progress-bar {
   height: 100%;
   border-radius: 4px;
   background: linear-gradient(90deg, var(--teal-d), var(--teal));
   transition: width 1.2s var(--ease)
}

.progress-bar.red {
   background: linear-gradient(90deg, var(--red-d), var(--red))
}

.progress-bar.gold {
   background: linear-gradient(90deg, #b8960a, var(--gold))
}

/* ══════════════════
   TIMELINE (zigzag)
══════════════════ */
.timeline {
   position: relative;
   padding-left: 28px
}

.timeline::before {
   content: '';
   position: absolute;
   left: 9px;
   top: 0;
   bottom: 0;
   width: 2px;
   background: linear-gradient(180deg, var(--teal), transparent)
}

.tl-item {
   position: relative;
   padding-bottom: 24px;
   display: flex;
   gap: 16px;
   align-items: flex-start
}

.tl-dot {
   width: 18px;
   height: 18px;
   border-radius: 50%;
   background: var(--teal);
   border: 3px solid var(--bg);
   position: absolute;
   left: -28px;
   top: 2px;
   flex-shrink: 0;
   box-shadow: 0 0 0 4px rgba(0, 207, 166, 0.15)
}

.tl-num {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: var(--teal);
   color: #000;
   font-weight: 800;
   font-size: 0.88rem;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   margin-left: -44px
}

.tl-text {
   flex: 1
}

.tl-text h3 {
   color: var(--white);
   font-size: 0.95rem;
   margin-bottom: 4px
}

.tl-text p {
   color: var(--t2);
   font-size: 0.87rem
}

/* ══════════════════
   STEP CARDS (numbered)
══════════════════ */
.steps-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 20px
}

.step-card {
   background: var(--bg2);
   border: 1px solid var(--muted);
   border-radius: var(--radius);
   padding: 28px 24px;
   position: relative;
   overflow: hidden
}

.step-card::before {
   content: attr(data-step);
   position: absolute;
   top: -10px;
   right: 16px;
   font-size: 5rem;
   font-weight: 900;
   color: rgba(255, 255, 255, 0.04);
   line-height: 1;
   pointer-events: none;
   font-family: var(--font2)
}

.step-card:hover {
   border-color: var(--teal)
}

.step-icon {
   font-size: 2rem;
   margin-bottom: 14px
}

.step-card h3 {
   color: var(--white);
   font-size: 0.97rem;
   margin-bottom: 8px
}

.step-card p {
   color: var(--t2);
   font-size: 0.85rem;
   line-height: 1.6
}

/* ══════════════════
   FEATURE LIST
══════════════════ */
.feature-list {
   display: flex;
   flex-direction: column;
   gap: 10px
}

.feature-list li {
   display: flex;
   gap: 12px;
   align-items: flex-start;
   font-size: 0.9rem;
   line-height: 1.55
}

.fi {
   font-size: 1.1rem;
   flex-shrink: 0;
   margin-top: 1px
}

.feature-list strong {
   color: var(--white);
   display: block;
   font-size: 0.82rem;
   margin-bottom: 2px
}

.feature-list span.subdesc {
   display: block;
   color: var(--t3);
   font-size: 0.78rem
}

/* ── Check list ── */
.check-list {
   display: flex;
   flex-direction: column;
   gap: 8px
}

.check-list li {
   display: flex;
   gap: 10px;
   align-items: center;
   font-size: 0.88rem;
   color: var(--t1)
}

.check-list li::before {
   content: '✓';
   color: var(--teal);
   font-weight: 800;
   flex-shrink: 0;
   width: 16px
}

/* ══════════════════
   PAYMENT CARDS
══════════════════ */
.payment-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
   gap: 14px
}

.pay-card {
   background: var(--bg2);
   border: 1px solid var(--muted);
   border-radius: var(--radius-sm);
   padding: 16px 12px;
   text-align: center;
   transition: border-color 0.2s
}

.pay-card:hover {
   border-color: var(--teal)
}

.pay-icon {
   font-size: 2rem;
   margin-bottom: 8px
}

.pay-name {
   font-size: 0.8rem;
   font-weight: 700;
   color: var(--white);
   margin-bottom: 4px
}

.pay-limit {
   font-size: 0.72rem;
   color: var(--t3)
}

/* ══════════════════
   FAQ
══════════════════ */
.faq-list {
   display: flex;
   flex-direction: column;
   gap: 2px
}

.faq-item {
   border: 1px solid var(--muted);
   border-radius: var(--radius-sm);
   overflow: hidden;
   transition: border-color 0.2s
}

.faq-item.open {
   border-color: rgba(0, 207, 166, 0.3)
}

.faq-q {
   width: 100%;
   text-align: left;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 16px;
   padding: 16px 20px;
   font-size: 0.93rem;
   font-weight: 600;
   color: var(--white);
   background: var(--bg2);
   transition: background 0.2s;
   font-family: var(--font)
}

.faq-q:hover {
   background: var(--bg3)
}

.faq-icon {
   font-size: 1.2rem;
   color: var(--teal);
   flex-shrink: 0;
   transition: transform 0.3s
}

.faq-item.open .faq-icon {
   transform: rotate(45deg)
}

.faq-a {
   display: none;
   padding: 0 20px 18px;
   background: var(--bg2);
   color: var(--t2);
   font-size: 0.88rem;
   line-height: 1.7
}

.faq-a p {
   margin-bottom: 8px
}

.faq-item.open .faq-a {
   display: block
}

/* ══════════════════
   SEO ARTICLE
══════════════════ */
.seo-article {
   max-width: 820px
}

.seo-article h2 {
   font-size: 1.25rem;
   font-weight: 800;
   color: var(--white);
   margin: 32px 0 12px;
   padding-top: 8px;
   border-top: 1px solid var(--muted)
}

.seo-article h2:first-child {
   border-top: none;
   margin-top: 0
}

.seo-article h3 {
   font-size: 1rem;
   font-weight: 700;
   color: var(--teal);
   margin: 20px 0 8px
}

.seo-article p {
   color: var(--t1);
   font-size: 0.94rem;
   line-height: 1.75;
   margin-bottom: 14px
}

.seo-article a {
   color: var(--teal);
   text-decoration: underline;
   text-underline-offset: 3px
}

.seo-article ul {
   margin: 10px 0 14px 18px;
   list-style: disc
}

.seo-article ul li {
   color: var(--t1);
   font-size: 0.92rem;
   margin-bottom: 6px;
   line-height: 1.65
}

.seo-article strong {
   color: var(--white)
}

/* ══════════════════
   CTA BLOCK
══════════════════ */
.cta-block {
   background: linear-gradient(135deg, rgba(0, 207, 166, 0.1), rgba(255, 36, 0, 0.06));
   border: 1px solid rgba(0, 207, 166, 0.2);
   border-radius: var(--radius);
   padding: 40px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   flex-wrap: wrap
}

.cta-block h2 {
   color: var(--white);
   font-size: 1.35rem;
   font-weight: 800;
   margin-bottom: 6px
}

.cta-block p {
   color: var(--t2);
   font-size: 0.88rem
}

.cta-block .cta-actions {
   display: flex;
   gap: 12px;
   flex-wrap: wrap
}

/* ══════════════════
   AUTHOR CARD
══════════════════ */
.author-card {
   display: flex;
   gap: 32px;
   align-items: flex-start;
   background: var(--bg2);
   border: 1px solid var(--muted);
   border-radius: var(--radius);
   padding: 32px;
   flex-wrap: wrap
}

.author-photo {
   width: 120px;
   height: 120px;
   border-radius: 50%;
   object-fit: cover;
   border: 3px solid var(--teal);
   flex-shrink: 0
}

.author-info h2 {
   font-size: 1.3rem;
   font-weight: 800;
   color: var(--white);
   margin-bottom: 6px
}

.author-badges {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
   margin-bottom: 12px
}

.author-info p {
   color: var(--t2);
   font-size: 0.9rem;
   line-height: 1.7
}

/* ══════════════════
   BONUS HIGHLIGHT
══════════════════ */
.bonus-highlight {
   background: linear-gradient(135deg, rgba(0, 207, 166, 0.08) 0%, rgba(255, 215, 0, 0.04) 100%);
   border: 1px solid rgba(0, 207, 166, 0.25);
   border-radius: var(--radius);
   padding: 32px;
   text-align: center;
   position: relative;
   overflow: hidden
}

.bonus-highlight::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse at 50% 0%, rgba(0, 207, 166, 0.12), transparent 60%)
}

.bonus-amount {
   font-size: clamp(2rem, 6vw, 3.5rem);
   font-weight: 900;
   color: var(--teal);
   line-height: 1;
   margin-bottom: 4px;
   position: relative
}

.bonus-amount span {
   color: var(--gold)
}

.bonus-label {
   font-size: 0.85rem;
   color: var(--t2);
   margin-bottom: 20px;
   position: relative
}

/* ══════════════════
   SLOTS CARDS
══════════════════ */
.slot-card {
   background: var(--bg2);
   border: 1px solid var(--muted);
   border-radius: var(--radius);
   overflow: hidden;
   transition: all 0.2s
}

.slot-card:hover {
   border-color: var(--teal);
   transform: translateY(-4px)
}

.slot-card__img {
   height: 140px;
   background: linear-gradient(135deg, var(--bg3), var(--muted));
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 3rem;
   position: relative
}

.slot-card__body {
   padding: 14px
}

.slot-card__name {
   font-weight: 700;
   color: var(--white);
   font-size: 0.9rem;
   margin-bottom: 4px
}

.slot-card__provider {
   font-size: 0.73rem;
   color: var(--t3)
}

.slot-card__rtp {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 10px;
   padding-top: 10px;
   border-top: 1px solid var(--muted)
}

.rtp-val {
   font-weight: 700;
   color: var(--teal);
   font-size: 0.82rem
}

.vol-badge {
   font-size: 0.68rem;
   padding: 2px 8px;
   border-radius: 3px;
   font-weight: 700
}

.vol-low {
   background: rgba(0, 207, 166, 0.15);
   color: var(--teal)
}

.vol-med {
   background: rgba(255, 215, 0, 0.12);
   color: var(--gold)
}

.vol-high {
   background: rgba(255, 36, 0, 0.12);
   color: var(--red)
}

/* ══════════════════
   DISCLAIMER
══════════════════ */
.disclaimer-box {
   background: rgba(255, 36, 0, 0.06);
   border: 1px solid rgba(255, 36, 0, 0.2);
   border-radius: var(--radius-sm);
   padding: 12px 16px;
   font-size: 0.78rem;
   color: var(--t3);
   line-height: 1.5;
   margin-top: 12px
}

/* ══════════════════
   FOOTER
══════════════════ */
.site-footer {
   background: var(--bg2);
   border-top: 1px solid var(--muted);
   padding: 48px 0 0
}

.footer-grid {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1fr;
   gap: 32px;
   margin-bottom: 40px
}

.footer-brand .logo img {
   height: 34px;
   margin-bottom: 14px
}

.footer-brand p {
   font-size: 0.82rem;
   color: var(--t3);
   line-height: 1.6
}

.footer-col h4 {
   font-size: 0.78rem;
   font-weight: 700;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--t3);
   margin-bottom: 14px
}

.footer-col a {
   display: block;
   color: var(--t2);
   font-size: 0.84rem;
   margin-bottom: 8px;
   transition: color 0.15s
}

.footer-col a:hover {
   color: var(--teal)
}

.footer-bottom {
   border-top: 1px solid var(--muted);
   padding: 18px 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   flex-wrap: wrap
}

.footer-bottom p {
   font-size: 0.76rem;
   color: var(--t3)
}

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

@media(max-width:600px) {
   .footer-grid {
      grid-template-columns: 1fr
   }

   .footer-bottom {
      flex-direction: column;
      text-align: center
   }
}

/* ══════════════════
   ANIMATIONS
══════════════════ */
.fade-in {
   opacity: 0;
   transform: translateY(20px);
   transition: opacity 0.6s var(--ease), transform 0.6s var(--ease)
}

.fade-in.visible {
   opacity: 1;
   transform: none
}

@media(prefers-reduced-motion:reduce) {
   .fade-in {
      opacity: 1;
      transform: none;
      transition: none
   }

   .btn {
      transition: none
   }
}

/* ══════════════════
   UTILS
══════════════════ */
.text-center {
   text-align: center
}

.text-teal {
   color: var(--teal)
}

.text-red {
   color: var(--red) !important
}

.text-gold {
   color: var(--gold)
}

.text-white {
   color: var(--white)
}

.text-muted {
   color: var(--t3)
}

.mb-8 {
   margin-bottom: 8px
}

.mb-16 {
   margin-bottom: 16px
}

.mb-24 {
   margin-bottom: 24px
}

.mb-32 {
   margin-bottom: 32px
}

.mb-48 {
   margin-bottom: 48px
}

.mt-24 {
   margin-top: 24px
}

.mt-32 {
   margin-top: 32px
}

.flex {
   display: flex
}

.flex-center {
   align-items: center
}

.gap-12 {
   gap: 12px
}

.gap-16 {
   gap: 16px
}

.gap-24 {
   gap: 24px
}

.divider {
   border: none;
   border-top: 1px solid var(--muted);
   margin: 32px 0
}

.tag {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   background: var(--bg3);
   border: 1px solid var(--muted);
   border-radius: 4px;
   padding: 3px 10px;
   font-size: 0.73rem;
   color: var(--t2);
   font-weight: 500
}
/* == SLOT CARDS WITH IMAGES == */
.slot-card{background:var(--bg2);border:1px solid var(--muted);border-radius:var(--radius);overflow:hidden;transition:all 0.25s;text-decoration:none;display:block;color:inherit}
.slot-card:hover{border-color:var(--teal);transform:translateY(-5px);box-shadow:0 12px 32px rgba(0,207,166,0.18);color:inherit}
.slot-card__img{height:160px;background:linear-gradient(135deg,var(--bg3),var(--muted));position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:3rem}
.slot-card--img .slot-card__img img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform 0.4s cubic-bezier(0.22,1,0.36,1)}
.slot-card--img:hover .slot-card__img img{transform:scale(1.07)}
.slot-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.52);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.25s}
.slot-overlay span{background:var(--red);color:#fff;font-weight:800;font-size:0.82rem;padding:8px 22px;border-radius:5px;letter-spacing:0.04em}
.slot-card--img:hover .slot-overlay{opacity:1}
.slot-card__body{padding:14px}
.slot-card__name{font-weight:700;color:var(--white);font-size:0.9rem;margin-bottom:4px}
.slot-card__provider{font-size:0.73rem;color:var(--t3)}
.slot-card__rtp{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid var(--muted)}
.rtp-val{font-weight:700;color:var(--teal);font-size:0.82rem}
.vol-badge{font-size:0.68rem;padding:2px 8px;border-radius:3px;font-weight:700}
.vol-low{background:rgba(0,207,166,0.15);color:var(--teal)}
.vol-med{background:rgba(255,215,0,0.12);color:var(--gold)}
.vol-high{background:rgba(255,36,0,0.12);color:var(--red)}