/* Open Casino in Nigeria — design system
   Palette drawn from the site wordmark (Nigerian green + white, neutral ink). */

:root{
  --green-900:#04331f;
  --green-800:#0a4a2b;
  --green-700:#0d6b3a;
  --green-600:#0e8a45;
  --green-500:#14a355;
  --green-100:#e3f5ea;
  --green-050:#f3faf5;
  --amber-600:#b5790a;
  --amber-100:#fbf1de;
  --red-700:#8a2a2a;
  --red-100:#fbeaea;
  --ink-900:#101815;
  --ink-700:#33443c;
  --ink-500:#5b6b62;
  --ink-300:#93a29a;
  --line:#dfe8e2;
  --surface:#ffffff;
  --surface-alt:#f7fbf8;
  --shadow:0 10px 30px -12px rgba(10,74,43,.18);
  --radius:14px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --maxw:1160px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--ink-900);
  background:var(--surface);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--green-700);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--green-800);color:#fff;padding:10px 16px;z-index:200}
.skip-link:focus{left:10px;top:10px}

/* Header */
.site-header{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(255,255,255,.96);backdrop-filter:saturate(180%) blur(6px);z-index:100}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 20px}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand-logo{height:36px;width:auto}
.site-nav{display:flex;gap:18px;align-items:center;flex:1;justify-content:flex-end;flex-wrap:wrap;row-gap:6px}
.nav-link{color:var(--ink-700);font-weight:600;font-size:.92rem;white-space:normal;max-width:220px;line-height:1.25}
.nav-link:hover{color:var(--green-800);text-decoration:none}
.nav-link.is-active{color:var(--green-800)}
.nav-toggle{display:none;flex-direction:column;gap:4px;background:none;border:0;padding:8px;cursor:pointer}
.nav-toggle span{width:22px;height:2px;background:var(--ink-900);display:block}
.mobile-nav{display:none;flex-direction:column;border-top:1px solid var(--line);padding:8px 20px 14px}
.mobile-nav .nav-link{padding:10px 0;border-bottom:1px solid var(--line)}
body.nav-open .mobile-nav{display:flex}

@media (max-width:860px){
  .site-nav{display:none}
  .nav-toggle{display:flex}
}

/* Hero */
.hero{
  position:relative;
  color:#fff;
  background:linear-gradient(180deg, rgba(4,51,31,.86), rgba(4,51,31,.93)), url('/assets/images/hero-river.jpeg') center/cover;
  padding:64px 0 56px;
}
.hero-inner{max-width:760px}
.hero-eyebrow{display:flex;gap:8px;align-items:center;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:.78rem;color:var(--green-100);margin:0 0 14px}
.hero h1{font-family:var(--font-serif);font-size:clamp(1.9rem,4vw,3rem);line-height:1.12;margin:0 0 18px}
.hero p.lead{font-size:1.08rem;color:#e9f4ec;margin:0 0 26px;max-width:640px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;padding:8px 14px;border-radius:999px;font-size:.82rem;font-weight:600}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border-radius:10px;font-weight:700;font-size:.95rem;
  border:2px solid transparent;cursor:pointer;transition:.15s ease;
}
.btn:hover{text-decoration:none}
.btn-primary{background:#fff;color:var(--green-800)}
.btn-primary:hover{background:var(--green-050)}
.btn-outline{border-color:rgba(255,255,255,.6);color:#fff}
.btn-outline:hover{background:rgba(255,255,255,.12)}
.btn-solid{background:var(--green-700);color:#fff}
.btn-solid:hover{background:var(--green-800)}

/* Sections */
.section{padding:52px 0}
.section-alt{background:var(--surface-alt)}
.eyebrow{color:var(--green-700);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.78rem;margin:0 0 8px}
.section-title{font-family:var(--font-serif);font-size:clamp(1.4rem,2.6vw,1.9rem);margin:0 0 18px;color:var(--ink-900)}
.section-lede{font-size:1.02rem;color:var(--ink-700);max-width:760px;margin:0 0 24px}
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}
@media (max-width:820px){.two-col{grid-template-columns:1fr}}

/* Checklist */
.checklist{list-style:none;margin:0;padding:0;counter-reset:step;display:grid;gap:12px}
.checklist li{
  counter-increment:step;position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 16px 14px 54px;box-shadow:var(--shadow);
}
.checklist li::before{
  content:counter(step);position:absolute;left:14px;top:14px;width:26px;height:26px;border-radius:50%;
  background:var(--green-700);color:#fff;font-weight:700;font-size:.85rem;display:flex;align-items:center;justify-content:center;
}
.callout{border-radius:var(--radius);padding:16px 18px;margin-top:20px;font-size:.95rem}
.callout-strong{background:var(--green-900);color:#fff}
.callout-strong a{color:#bfe8cd}

/* Tables */
.table-wrap{overflow-x:auto;margin:0 0 20px;border:1px solid var(--line);border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;font-size:.93rem;min-width:520px}
caption{text-align:left;padding:10px 14px;font-weight:700;background:var(--surface-alt)}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line)}
thead th{background:var(--green-900);color:#fff;font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.03em}
tbody tr:nth-child(even){background:var(--surface-alt)}
tbody tr:last-child td{border-bottom:none}

/* Tip / warning boxes */
.tip-box{background:var(--amber-100);border-left:4px solid var(--amber-600);border-radius:10px;padding:14px 16px;margin:20px 0;font-size:.95rem;color:#5c4413}
.warn-box{background:var(--red-100);border-left:4px solid var(--red-700);border-radius:10px;padding:14px 16px;margin:20px 0;font-size:.95rem;color:var(--red-700)}
.gap-note{background:var(--surface-alt);border:1px dashed var(--ink-300);border-radius:10px;padding:14px 16px;margin-top:16px;font-size:.92rem;color:var(--ink-700)}

/* Bullet lists as cards */
.fact-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fact-list li{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:.95rem}

/* Criteria grid */
.criteria-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:900px){.criteria-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.criteria-grid{grid-template-columns:1fr}}
.criteria-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.criteria-num{font-family:var(--font-serif);color:var(--green-600);font-size:1.4rem;font-weight:700}
.criteria-card h4{margin:6px 0 6px;font-size:1rem}
.criteria-card p{margin:0;font-size:.87rem;color:var(--ink-500)}

/* Models grid */
.models-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:820px){.models-grid{grid-template-columns:1fr}}
.model-card{border:1px solid var(--line);border-radius:var(--radius);padding:20px;background:var(--surface)}
.model-card h3{font-family:var(--font-serif);margin:0 0 8px;color:var(--green-800)}

/* Timeline */
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:0}
.timeline li{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:0 0 26px;position:relative}
.timeline li:last-child{padding-bottom:0}
.timeline-dot{width:44px;height:44px;border-radius:50%;background:var(--green-700);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--font-serif)}
.timeline li:not(:last-child)::before{content:"";position:absolute;left:21px;top:44px;bottom:0;width:2px;background:var(--line)}
.timeline h4{margin:6px 0 4px;font-size:1.02rem}
.timeline p{margin:0;color:var(--ink-500);font-size:.93rem}

/* FAQ */
.faq-list{display:grid;gap:10px}
.faq-item{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:4px 16px}
.faq-item summary{cursor:pointer;padding:14px 0;font-weight:700;list-style:none;position:relative;padding-right:24px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:0;top:12px;font-size:1.3rem;color:var(--green-700)}
.faq-item[open] summary::after{content:"−"}
.faq-item p{margin:0 0 14px;color:var(--ink-700)}

/* Cards: platforms & posts */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:980px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.card-grid{grid-template-columns:1fr}}

.platform-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:20px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow)}
.platform-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.platform-card h3{margin:0;font-size:1.15rem;font-family:var(--font-serif)}
.platform-tagline{color:var(--ink-500);font-size:.88rem;margin:0}
.platform-mini-facts{list-style:none;margin:0;padding:0;font-size:.85rem;display:grid;gap:4px;color:var(--ink-700)}
.platform-mini-facts b{color:var(--ink-900)}
.card-actions{display:flex;gap:10px;margin-top:auto;padding-top:8px}
.card-actions .btn{flex:1;padding:10px 12px;font-size:.85rem}

.post-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:20px;display:flex;flex-direction:column;gap:10px}
.post-card .cat{color:var(--green-700);font-weight:700;font-size:.76rem;text-transform:uppercase;letter-spacing:.04em}
.post-card h3{margin:0;font-size:1.1rem;font-family:var(--font-serif)}
.post-card p{margin:0;color:var(--ink-500);font-size:.92rem}
.post-meta{font-size:.8rem;color:var(--ink-300)}

/* Article layout */
.article-hero{background:var(--green-900);color:#fff;padding:40px 0 32px}
.article-hero .container{max-width:820px}
.article-hero h1{font-family:var(--font-serif);font-size:clamp(1.6rem,3.4vw,2.3rem);margin:14px 0 12px;line-height:1.2}
.article-meta{color:var(--green-100);font-size:.88rem;display:flex;gap:14px;flex-wrap:wrap}
.article-body-wrap{display:grid;grid-template-columns:230px 1fr;gap:40px;padding:40px 0;max-width:1000px;margin:0 auto}
@media (max-width:860px){.article-body-wrap{grid-template-columns:1fr;padding:28px 20px}}
.toc{position:sticky;top:90px;align-self:start;background:var(--surface-alt);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.toc h4{margin:0 0 10px;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-500)}
.toc ol{margin:0;padding-left:18px;font-size:.87rem;display:grid;gap:8px}
.article-body{max-width:700px}
.article-body h2{font-family:var(--font-serif);font-size:1.4rem;margin:34px 0 12px;color:var(--ink-900);scroll-margin-top:90px}
.article-body p{margin:0 0 16px;color:var(--ink-700)}
.article-body a{font-weight:600}
.article-body details{background:var(--surface-alt);border:1px solid var(--line);border-radius:10px;padding:4px 16px;margin-bottom:10px}
.article-body details summary{cursor:pointer;font-weight:700;padding:12px 0}
.article-body details p{margin:0 0 12px;color:var(--ink-700)}

.related-box{margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}
.related-box h4{margin:0 0 10px;font-size:.95rem;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-500)}
.related-list{display:grid;gap:8px}

.cta-box{background:var(--green-800);color:#fff;border-radius:var(--radius);padding:22px;margin:32px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cta-box p{margin:0;font-weight:700}
.cta-box a.btn{white-space:nowrap}

/* Profile page */
.profile-hero{background:linear-gradient(180deg, rgba(4,51,31,.92), rgba(4,51,31,.96)), url('/assets/images/flag-silk.jpeg') center/cover;color:#fff;padding:44px 0 36px}
.profile-hero .container{max-width:900px}
.profile-hero h1{font-family:var(--font-serif);margin:8px 0 10px;font-size:clamp(1.6rem,3.2vw,2.2rem)}
.profile-hero p.tagline{color:var(--green-100);font-size:1.02rem;margin:0 0 18px;max-width:640px}

.profile-body{max-width:900px;margin:0 auto;padding:40px 20px}
.facts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:32px}
@media (max-width:700px){.facts-grid{grid-template-columns:1fr}}
.fact-card{border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:var(--surface-alt)}
.fact-card .label{font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;color:var(--green-700);font-weight:700;margin:0 0 4px}
.fact-card .value{margin:0;font-size:.93rem;color:var(--ink-900)}

.two-cols-list{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:24px 0}
@media (max-width:700px){.two-cols-list{grid-template-columns:1fr}}
.list-strength li{color:var(--ink-900)}
.list-consider li{color:var(--ink-900)}
.pro-list, .con-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pro-list li, .con-list li{padding-left:26px;position:relative;font-size:.93rem}
.pro-list li::before{content:"✓";position:absolute;left:0;color:var(--green-700);font-weight:700}
.con-list li::before{content:"!";position:absolute;left:2px;color:var(--amber-600);font-weight:700}

.sources-list{font-size:.82rem;color:var(--ink-500);display:grid;gap:4px;margin-top:8px}

/* About / legal pages */
.prose{max-width:760px;margin:0 auto;padding:44px 20px}
.prose h1{font-family:var(--font-serif);font-size:clamp(1.7rem,3.4vw,2.3rem);margin:0 0 20px}
.prose h2{font-family:var(--font-serif);font-size:1.3rem;margin:32px 0 12px}
.prose p{color:var(--ink-700);margin:0 0 16px}
.prose ul{color:var(--ink-700)}
.team-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.team-list li{background:var(--surface-alt);border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:.92rem}

.simple-hero{background:var(--green-900);color:#fff;padding:38px 0}
.simple-hero h1{font-family:var(--font-serif);margin:0 0 8px;font-size:clamp(1.6rem,3vw,2.1rem)}
.simple-hero p{color:var(--green-100);margin:0;max-width:600px}

/* Contact */
.contact-card{border:1px solid var(--line);border-radius:var(--radius);padding:24px;background:var(--surface-alt);margin-top:20px}
.contact-card a{font-weight:700}

/* Breadcrumbs */
.breadcrumbs{font-size:.82rem;color:var(--ink-500);margin-bottom:14px}
.breadcrumbs .sep{margin:0 4px}

/* Sources block on homepage */
.sources-block{font-size:.85rem;color:var(--ink-500)}
.sources-block ol{padding-left:18px;display:grid;gap:6px}

/* Footer */
.site-footer{background:var(--ink-900);color:#c8d3cc;margin-top:20px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px;padding:44px 20px 24px}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}
.footer-logo-wrap{display:inline-block;background:#fff;padding:8px 14px;border-radius:10px;margin-bottom:12px}
.footer-logo{height:26px;display:block}
.footer-brand p{font-size:.85rem;color:#96a69d;max-width:280px}
.footer-col h3{color:#fff;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;margin:0 0 12px}
.footer-col a{display:block;color:#aebdb4;font-size:.88rem;margin-bottom:8px}
.footer-col a:hover{color:#fff;text-decoration:none}
.disclosure-banner{font-size:.8rem;color:#8fa197;border-top:1px solid #223129;padding-top:18px;margin-top:6px;max-width:900px}
.copyright{font-size:.78rem;color:#647268;padding-bottom:22px}

/* Homepage supporting imagery */
.img-side-grid{display:grid;grid-template-columns:1fr 320px;gap:32px;align-items:center}
@media (max-width:820px){.img-side-grid{grid-template-columns:1fr}}
.img-side-grid.reverse{grid-template-columns:320px 1fr}
@media (max-width:820px){.img-side-grid.reverse{grid-template-columns:1fr}}
.img-side-grid.reverse .img-side-media{order:-1}
.img-side-media img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow);object-fit:cover;aspect-ratio:4/5}
.banner-figure{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.banner-figure img{width:100%;height:220px;object-fit:cover;display:block}
@media (max-width:700px){.banner-figure img{height:160px}}

/* misc */
.muted{color:var(--ink-500)}
.center{text-align:center}
.stack-sm{display:grid;gap:8px}
.rel-badge{font-size:.72rem;color:var(--ink-300)}