/* ==========================================================================
   IBplay - marketing foundation (shared by the public pages: home, game pages, challenges ...)
   --------------------------------------------------------------------------
   Owns: the dark/light theme tokens (accent blue / red), the header + footer + button skin,
   section headers, the pricing table, FAQ grid, closing CTA card, highlight strip and scroll reveal.
   Anything specific to ONE page lives in that page's own file (site-home.css, site-game.css, ...).
   Scope: body.ib-mk (set via $body_class on every marketing page). Load order: common -> marketing -> page.
   ========================================================================== */

/* ==========================================================================
   IBplay — Homepage
   --------------------------------------------------------------------------
   One idea: the page is a single ruled "spec sheet" — a column held between
   two hairlines, numbered sections, hard corners, flat color. The hero art
   and the four game tiles are the visual anchors; everything else borrows
   their palette (ink + the banner's electric blue) instead of adding its own.

   Scoped to body.ib-mk so the shared nav/footer on other pages are untouched.
   ========================================================================== */
body.ib-mk { /* ---- theme tokens (dark = default). The light theme overrides these at the bottom of this file. ---- */
  --ib-bg:        #05070c;
  --ib-bg-2:      #04060a;
  --ib-surface:   #0a0e17;
  --ib-blue:      #3d86ff;               /* the accent (red in the light theme) */
  --acc-rgb:      61, 134, 255;          /* same accent as r,g,b for translucent uses */
  --acc-hi:       #5b9bff;               /* accent hover */
  --acc-text:     #8db8ff;               /* accent used as TEXT on the page surface */
  --ib-blue-2:    #2f6fe8;
  --ib-purple:    #3d86ff;               /* no purple on this page */
  --ib-gradient:  linear-gradient(#3d86ff, #3d86ff);
  --ink:          #ffffff;               /* headings */
  --ink-2:        #cfd7e8;               /* strong body text */
  --ib-text:      #f4f6fb;
  --ib-text-dim:  #9aa6bd;
  --rule:         rgba(150, 180, 255, 0.13);
  --rule-strong:  rgba(150, 180, 255, 0.28);
  --panel:        #0a0f1b;               /* flat card / panel surface */
  --card-grad:    linear-gradient(180deg, #0e1526 0%, #0a0f1b 100%);
  --fill-1:       rgba(255, 255, 255, .025);   /* faint fills */
  --fill-2:       rgba(255, 255, 255, .05);
  --fill-3:       rgba(255, 255, 255, .09);
  --nav-bg:       rgba(5, 7, 12, 0.96);
  --strip-a:      #0b1222;
  --strip-b:      #070b16;
  --flow:         rgba(205, 222, 255, .8);
  --band-a:       #0e3a9a;               /* reviews band: blue in dark ... */
  --band-img:     url('/img/reviews-band-dark.webp');
  --ib-radius:    8px;
  --ib-radius-sm: 6px;
  background-color: var(--ib-bg); }
body.ib-mk .ib-particles { display: none; }
/* ---------- Page chrome: nav, buttons ---------- */
body.ib-mk .ib-nav { background: var(--nav-bg); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: var(--rule); }
body.ib-mk .ib-nav.is-scrolled { background: var(--nav-bg); }
body.ib-mk .ib-logo-mark { border-radius: 6px; background: var(--ib-blue); color: #fff; }
body.ib-mk .ib-nav-links > li > a.is-active::after { background: var(--ib-blue); }
body.ib-mk .ib-btn { border-radius: 6px; font-size: 14.5px; font-weight: 600; letter-spacing: .1px; padding: 13px 24px; }
body.ib-mk .ib-btn--lg { padding: 16px 30px; font-size: 15.5px; border-radius: 8px; }
body.ib-mk .ib-btn--sm { padding: 10px 16px; font-size: 13px; border-radius: 6px; }
body.ib-mk .ib-btn--xs { padding: 8px 12px; font-size: 12px; }
body.ib-mk .ib-btn--primary { background: var(--ib-blue); color: #fff; box-shadow: none; }
body.ib-mk .ib-btn--primary:hover { background: var(--acc-text); transform: none; box-shadow: none; }
body.ib-mk .ib-btn--ghost { background: transparent; border-color: var(--rule-strong); }
body.ib-mk .ib-btn--ghost:hover { background: rgba(var(--acc-rgb),.1); border-color: var(--ib-blue); }
.ib-textlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; color: var(--ib-blue); transition: color .25s; }
.ib-textlink svg { width: 15px; height: 15px; transition: transform .25s var(--ib-ease); }
.ib-textlink:hover { color: var(--acc-text); }
.ib-textlink:hover svg { transform: translateX(4px); }
.ib-section-cta { display: flex; justify-content: center; margin-top: 40px; }
/* ---------- Sections: no frames, no lines — just space ---------- */
.ib-sec { position: relative; overflow-x: clip; }
.ib-sec > .ib-container { position: relative; z-index: 1; padding-top: 88px; padding-bottom: 88px; }
/* Section header: small label, one calm title, short sub */
.ib-sh { margin-bottom: 52px; text-align: center; }
.ib-sh-no, .ib-sh-line, .ib-sh-aside { display: none; }
.ib-sh-meta { margin-bottom: 14px; }
.ib-sh-label { font-family: var(--ib-display); font-size: 13px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ib-blue); }
.ib-sh-title { font-family: var(--ib-display); font-weight: 700; font-size: clamp(28px, 3.5vw, 42px); line-height: 1.15; letter-spacing: -.005em; margin: 0 auto; max-width: 840px; color: var(--ink); }
.ib-sh-title em { font-style: normal; color: var(--ib-blue); }
.ib-sh-sub { margin: 16px auto 0; max-width: 520px; color: var(--ib-text-dim); font-size: 16px; line-height: 1.65; }
/* ---------- Scroll reveal (only when JS is present) ---------- */
@keyframes ib-reveal-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.ib-reveal { animation: ib-reveal-up .7s var(--ib-ease) both; }
.ib-js .ib-rv { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ib-ease), transform .8s var(--ib-ease); }
.ib-js .ib-rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ib-reveal { animation: none; }
  .ib-js .ib-rv { opacity: 1; transform: none; transition: none; }
}
/* ---------- Feature bar: sits directly under the banner ---------- */
.ib-strip { background: linear-gradient(180deg, var(--strip-a) 0%, var(--strip-b) 100%); border-top: 1px solid rgba(var(--acc-rgb),.4); border-bottom: 1px solid var(--rule); }
.ib-strip-list { list-style: none; margin: 0 auto; padding: 0 28px; max-width: var(--ib-container); min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; }
.ib-strip-list li { display: flex; align-items: center; gap: 12px; font-family: var(--ib-display); font-weight: 600; font-size: 14.5px; color: var(--ink-2); white-space: nowrap; }
.ib-strip-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(var(--acc-rgb),.12); border: 1px solid rgba(var(--acc-rgb),.28); color: var(--ib-blue); flex: none; }
.ib-strip-ic svg { width: 20px; height: 20px; }
@media (max-width: 1080px) {
  .ib-strip-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: center; padding-block: 18px; gap: 16px 28px; }
  .ib-strip-list li { white-space: normal; }   /* longer translations must wrap instead of widening the page */
}
@media (max-width: 700px) {
  .ib-strip-list { grid-template-columns: repeat(2, 1fr); gap: 14px 16px; padding-inline: 20px; }
  .ib-strip-list li { white-space: normal; font-size: 13.5px; gap: 10px; }
  .ib-strip-ic { width: 34px; height: 34px; }
}
@media (max-width: 420px) {
  .ib-strip-list { grid-template-columns: 1fr; }
}
/* ---------- Games grid: artwork on top (no overlay), text on a solid panel below ---------- */
.ib-game-tile-body .ib-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; }
.ib-game-tile-body .ib-btn svg { width: 14px; height: 14px; }
.ib-game-tile:hover .ib-game-tile-body .ib-btn { background: var(--accent, var(--ib-blue)); border-color: var(--accent, var(--ib-blue)); color: #fff; }
/* ---------- Why IBplay: staggered cards ---------- */
.ib-why-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 11px; background: rgba(var(--acc-rgb),.16); border: 1px solid rgba(var(--acc-rgb),.3); color: var(--ib-blue); }
.ib-why-ic svg { width: 20px; height: 20px; }
/* four points: one joined table, like Pricing */
.ib-net-cell .ib-why-ic { margin-bottom: 20px; }
/* ---------- Pricing: three cells, one table ---------- */
.ib-plans { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rule-strong); border-radius: 8px; overflow: hidden; }
.ib-plan { position: relative; display: flex; flex-direction: column; padding: 32px 30px 30px; background: var(--fill-1); }
.ib-plan + .ib-plan { border-left: 1px solid var(--rule-strong); }
.ib-plan.is-featured { background: linear-gradient(180deg, rgba(var(--acc-rgb),.14), rgba(var(--acc-rgb),.04) 60%); box-shadow: inset 0 3px 0 var(--ib-blue); }
.ib-plan-flag { position: absolute; top: 3px; right: 0; font-size: 11px; font-weight: 700; background: var(--ib-blue); color: #fff; padding: 5px 12px; border-bottom-left-radius: 6px; }
.ib-plan-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.ib-plan-game { font-size: 13px; font-weight: 600; color: var(--ib-text-dim); }
.ib-plan-tag { font-family: var(--ib-mono); font-size: 10.5px; font-weight: 700; color: var(--ib-text-dim); border: 1px solid var(--rule-strong); border-radius: 4px; padding: 3px 7px; }
.ib-plan.is-featured .ib-plan-tag { visibility: hidden; }
.ib-plan h3 { margin: 0 0 8px; font-family: var(--ib-display); font-size: 21px; font-weight: 600; color: var(--ink); }
.ib-plan .price { font-family: var(--ib-display); font-size: 42px; font-weight: 700; line-height: 1; color: var(--ink); padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
.ib-plan .price span { font-family: var(--ib-body); font-size: 14px; font-weight: 500; color: var(--ib-text-dim); margin-left: 4px; }
.ib-plan ul { list-style: none; margin: 22px 0 28px; padding: 0; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.ib-plan li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.ib-plan li svg { width: 14px; height: 14px; margin-top: 3px; color: var(--ib-online); flex: none; }
@media (max-width: 920px) {
  .ib-plans { grid-template-columns: 1fr; }
  .ib-plan + .ib-plan { border-left: 0; border-top: 1px solid var(--rule-strong); }
}
/* ---------- FAQ: two columns of rounded questions + help bar ---------- */
body.ib-mk .ib-faq-grid { max-width: none; margin: 0; border: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.ib-faq-col { display: flex; flex-direction: column; gap: 14px; }
body.ib-mk .ib-faq-item { border: 1px solid var(--rule); border-radius: 20px; background: var(--panel); transition: border-color .25s, background .25s; }
body.ib-mk .ib-faq-item:hover, body.ib-mk .ib-faq-item.is-open { border-color: rgba(var(--acc-rgb),.4); }
body.ib-mk .ib-faq-q { min-height: 70px; padding: 0 22px; font-size: 15.5px; font-weight: 700; border-radius: 20px; }
body.ib-mk .ib-faq-q:hover { color: var(--ink); }
body.ib-mk .ib-faq-q svg { width: 30px; height: 30px; padding: 7px; border-radius: 9px; background: rgba(var(--acc-rgb),.14); color: var(--ib-blue); }
body.ib-mk .ib-faq-item.is-open .ib-faq-q svg { background: var(--ib-blue); color: #fff; transform: none; }
body.ib-mk .ib-faq-q svg .v { transform-box: fill-box; transform-origin: center; transition: transform .3s var(--ib-ease); }
body.ib-mk .ib-faq-item.is-open .ib-faq-q svg .v { transform: scaleY(0); }
body.ib-mk .ib-faq-a p { margin: 0; padding: 0 22px 22px; max-width: none; font-size: 14.5px; }
@media (max-width: 860px) {
  body.ib-mk .ib-faq-grid { grid-template-columns: 1fr; }
}
/* ---------- Closing call-to-action: compact accent card, with room above the footer ---------- */
.ib-sec.ib-cta > .ib-container { padding-top: 24px; padding-bottom: 104px; }
.ib-cta-card { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 44px; align-items: center; padding: 54px 58px; border-radius: 28px; color: #fff;
  background: var(--band-a) var(--band-img) center / cover no-repeat; box-shadow: 0 34px 70px -36px rgba(var(--acc-rgb), .6); }
.ib-cta h2 { margin: 0 0 12px; font-family: var(--ib-display); font-size: clamp(28px, 3.5vw, 44px); font-weight: 700; line-height: 1.08; letter-spacing: -.01em; color: #fff; }
.ib-cta h2 em { font-style: normal; text-decoration: underline; text-decoration-color: rgba(255,255,255,.45); text-decoration-thickness: 3px; text-underline-offset: 8px; }
.ib-cta p { margin: 0; max-width: 430px; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.88); }
.ib-cta-side { display: flex; flex-direction: column; gap: 22px; }
.ib-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
body.ib-mk .ib-cta .ib-btn--primary { background: #fff; color: var(--band-a); border-color: #fff; }
body.ib-mk .ib-cta .ib-btn--primary:hover { background: rgba(255,255,255,.92); }
body.ib-mk .ib-cta .ib-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
body.ib-mk .ib-cta .ib-btn--ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.ib-cta-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.ib-cta-trust li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.9); }
.ib-cta-trust svg { width: 15px; height: 15px; flex: none; padding: 2px; border-radius: 50%; background: rgba(255,255,255,.2); }
@media (max-width: 900px) {
  .ib-cta-card { grid-template-columns: 1fr; gap: 28px; padding: 40px 28px; border-radius: 22px; }
  .ib-sec.ib-cta > .ib-container { padding-bottom: 72px; }
}
@media (max-width: 640px) {
  .ib-sec > .ib-container { padding-top: 60px; padding-bottom: 60px; }
  .ib-sh { margin-bottom: 36px; }
}
/* ==========================================================================
   Theme switch (header) + LIGHT THEME
   --------------------------------------------------------------------------
   The page is dark by default. html[data-theme="light"] swaps the tokens at the top of this
   file: the blue accent becomes red, surfaces turn off-white, text turns ink.
   The choice is remembered in localStorage ("ib-theme") and applied before first paint.
   ========================================================================== */
html.ib-theme-anim body.ib-mk, html.ib-theme-anim body.ib-mk *, html.ib-theme-anim body.ib-mk *::before, html.ib-theme-anim body.ib-mk *::after { transition: background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease, stroke .35s ease !important; }
/* the map: one image per theme (the hidden one is never downloaded) */
html[data-theme="light"] body.ib-mk { color-scheme: light;
  --ib-bg: #f6f5f2;  --ib-bg-2: #efede8;  --ib-surface: #ffffff;  --ib-surface-2: #f3f1ec;  --ib-surface-3: #ece9e3;
  --ib-blue: #e5333f;  --ib-blue-2: #c9222e;  --acc-rgb: 229, 51, 63;  --acc-hi: #c9222e;  --acc-text: #c9222e;
  --ib-purple: #e5333f;  --ib-gradient: linear-gradient(#e5333f, #e5333f);
  --ink: #14161d;  --ink-2: #3b4252;
  --ib-text: #14161d;  --ib-text-dim: #5b6374;  --ib-text-faint: #8b92a3;
  --ib-border: rgba(20,24,40,.10);  --ib-border-strong: rgba(20,24,40,.18);
  --ib-card-bg: #ffffff;  --ib-card-border: rgba(20,24,40,.10);
  --rule: rgba(20,24,40,.10);  --rule-strong: rgba(20,24,40,.18);
  --panel: #ffffff;  --card-grad: linear-gradient(180deg, #ffffff 0%, #faf9f7 100%);
  --fill-1: rgba(20,24,40,.02);  --fill-2: rgba(20,24,40,.04);  --fill-3: rgba(20,24,40,.07);
  --nav-bg: rgba(255,255,255,.94);  --strip-a: #ffffff;  --strip-b: #f6f5f2;
  --flow: rgba(229,51,63,.9);  --ib-online: #0e9f6e;
  --band-a: #b30f2a;  --band-img: url('/img/reviews-band-light.webp');   /* ... red in light */ }
/* shared header / footer / drawer / toasts, re-inked for light */
html[data-theme="light"] body.ib-mk .ib-logo-play, html[data-theme="light"] body.ib-mk .ib-nav-links > li > a:hover, html[data-theme="light"] body.ib-mk .ib-nav-links > li > a.is-active, html[data-theme="light"] body.ib-mk .ib-nav-link-btn:hover, html[data-theme="light"] body.ib-mk .ib-close-btn, html[data-theme="light"] body.ib-mk .ib-footer-col h4, html[data-theme="light"] body.ib-mk .ib-footer-col a:hover, html[data-theme="light"] body.ib-mk .ib-footer-socials a:hover, html[data-theme="light"] body.ib-mk .ib-faq-q, html[data-theme="light"] body.ib-mk .ib-toast { color: var(--ink); }
html[data-theme="light"] body.ib-mk .ib-burger span { background: var(--ink); }
html[data-theme="light"] body.ib-mk .ib-burger, html[data-theme="light"] body.ib-mk .ib-close-btn { background: #fff; }
html[data-theme="light"] body.ib-mk .ib-mobile-drawer { background: rgba(246,245,242,.99); }
html[data-theme="light"] body.ib-mk .ib-nav.is-scrolled { box-shadow: 0 1px 0 rgba(20,24,40,.04), 0 12px 28px -22px rgba(20,24,40,.25); }
html[data-theme="light"] body.ib-mk .ib-footer { background: #efede8; }
html[data-theme="light"] body.ib-mk .ib-btn--ghost { background: #fff; }
html[data-theme="light"] body.ib-mk html[data-theme="light"] body.ib-mk .ib-btn--ghost:hover { background: rgba(var(--acc-rgb), .08); }
html[data-theme="light"] body.ib-mk .ib-btn--primary:hover { background: var(--acc-hi); }
/* cards get a soft shadow instead of glow */
html[data-theme="light"] body.ib-mk .ib-plans, html[data-theme="light"] body.ib-mk .ib-faq-item { box-shadow: 0 1px 2px rgba(20,24,40,.04), 0 18px 38px -26px rgba(20,24,40,.22); }
html[data-theme="light"] body.ib-mk .ib-strip { border-top-color: rgba(var(--acc-rgb), .5); }
/* closing card: its buttons keep the white-on-accent look in the light theme too */
html[data-theme="light"] body.ib-mk .ib-cta .ib-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
html[data-theme="light"] body.ib-mk .ib-cta .ib-btn--ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; }
html[data-theme="light"] body.ib-mk .ib-cta .ib-btn--primary:hover { background: rgba(255,255,255,.92); }
/* Games dropdown in the light theme: the shared tokens already flip; just soften the shadow and keep the panel crisp */
html[data-theme="light"] body.ib-mk .ib-dd-card { box-shadow: 0 1px 2px rgba(20,24,40,.05), 0 26px 50px -26px rgba(20,24,40,.35); }
html[data-theme="light"] body.ib-mk .ib-mobile-drawer nav .ib-drawer-game { color: var(--ib-text-dim); }

/* ---------- Plans grid (shared by the homepage and the game pages; markup: ib_render_plans() in includes/plans.php) ---------- */
.ib-amt { margin: 0; font: inherit; font-style: normal; letter-spacing: inherit; color: inherit; overflow-wrap: anywhere; }   /* a price that follows the visitor's currency (data-usd) */
.ib-plans--grid { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); max-width: calc(var(--cols, 3) * 400px); margin-inline: auto; }
.ib-plans--grid .ib-plan .price { font-size: clamp(30px, 2.9vw, 40px); }
.ib-plan-desc { margin: -2px 0 20px; font-size: 14px; line-height: 1.5; color: var(--ib-text-dim); }
.ib-plans-note { margin: 22px 0 0; text-align: center; font-size: 13.5px; color: var(--ib-text-dim); }
@media (max-width: 1100px) {
  .ib-plans--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
  .ib-plans--grid .ib-plan { border-left: 0; border-top: 1px solid var(--rule-strong); }
  .ib-plans--grid .ib-plan:nth-child(-n+2) { border-top: 0; }
  .ib-plans--grid .ib-plan:nth-child(odd) { border-right: 1px solid var(--rule-strong); }
}
@media (max-width: 760px) {
  .ib-plans--grid { grid-template-columns: 1fr; max-width: none; }
  .ib-plans--grid .ib-plan, .ib-plans--grid .ib-plan:nth-child(-n+2) { border-top: 1px solid var(--rule-strong); border-right: 0; }
  .ib-plans--grid .ib-plan:first-child { border-top: 0; }
}