/* ============================================================
   BettorRank flagship homepage v3 — rebuilt to the frontend-design
   skill spec. Scoped to body.home-v2, all selectors .bf- prefixed
   so the other ~40 templates (global site.css) are untouched.

   Skill compliance vs the previous v2:
   - NO Lila: single desaturated electric-blue accent, neutral zinc base.
   - No gradient text on headers. No neon/box-shadow glows. No custom cursor.
   - GPU-safe motion: only transform/opacity (bars use scaleX, not width).
   - Double-bezel nested containers. Asymmetric grids (no equal 3-col).
   - Reveal fade-up + blur. Kinetic marquee. Generous padding.
   ============================================================ */
body.home-v2{
  --bf-bg:#0A0B0D;
  --bf-elev-1:#121317;
  --bf-elev-2:#171A1F;
  --bf-shell:rgba(255,255,255,.035);
  --bf-line:rgba(255,255,255,.08);
  --bf-line-2:rgba(255,255,255,.14);
  --bf-txt:#F4F5F7;
  --bf-txt-2:#9AA0AB;
  --bf-txt-3:#6B7280;
  --bf-accent:#3E6FE6;
  --bf-accent-press:#3360CC;
  --bf-accent-ink:#F5F8FF;
  --bf-accent-soft:rgba(62,111,230,.12);
  --bf-r:12px;--bf-r-lg:18px;--bf-r-xl:24px;
  --bf-shadow:0 1px 2px rgba(0,0,0,.4), 0 22px 48px -18px rgba(0,0,0,.6);
  --bf-inset:inset 0 1px 0 rgba(255,255,255,.05);
  --bf-ease:cubic-bezier(.16,1,.3,1);
  /* recolor the inherited global header/footer (vars only) to the single accent on home */
  --accent:#3E6FE6;
  --accent-2:#3360CC;
  --accent-glow:transparent;
  background:#0A0B0D !important;
  background-image:none !important;
  color:var(--bf-txt);
}
body.home-v2::before{opacity:.018 !important} /* keep global grain whisper-quiet */

/* single subtle accent wash (fixed, pointer-none) — not a multi-color Lila mesh */
.bf-amb{position:fixed;inset:0 0 auto;height:620px;z-index:0;pointer-events:none;
  background:radial-gradient(60% 70% at 82% -8%, rgba(62,111,230,.16) 0%, transparent 60%),
             radial-gradient(50% 60% at 10% 0%, rgba(62,111,230,.07) 0%, transparent 55%);}

.bf-wrap{max-width:1200px;margin:0 auto;padding:0 24px;position:relative;z-index:2}
.bf-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bf-txt-3);font-weight:500}
.bf-eyebrow::before{content:'';width:16px;height:1px;background:var(--bf-accent)}

/* ===== double-bezel primitive ===== */
.bf-bezel{background:var(--bf-shell);border:1px solid var(--bf-line);border-radius:var(--bf-r-xl);padding:6px}
.bf-bezel__core{background:var(--bf-elev-1);border-radius:calc(var(--bf-r-xl) - 6px);box-shadow:var(--bf-inset);overflow:hidden}

/* ===== buttons (pill, no glow) ===== */
.bf-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font);font-weight:600;font-size:.92rem;border-radius:999px;padding:12px 14px 12px 22px;border:1px solid transparent;cursor:pointer;transition:transform .35s var(--bf-ease),background .25s,border-color .25s;text-decoration:none}
.bf-btn .bf-arw{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:999px;font-size:.8rem;transition:transform .35s var(--bf-ease)}
.bf-btn:active{transform:translateY(1px) scale(.99)}
.bf-btn--primary{background:var(--bf-accent);color:var(--bf-accent-ink)}
.bf-btn--primary .bf-arw{background:rgba(255,255,255,.18)}
.bf-btn--primary:hover{background:var(--bf-accent-press);transform:translateY(-2px)}
.bf-btn--primary:hover .bf-arw{transform:translateX(3px)}
.bf-btn--ghost{background:transparent;border-color:var(--bf-line-2);color:var(--bf-txt);padding:12px 20px}
.bf-btn--ghost:hover{border-color:var(--bf-txt-2);transform:translateY(-2px)}
.bf-btn--sm{padding:9px 11px 9px 16px;font-size:.84rem}
.bf-btn--sm.bf-btn--ghost{padding:9px 16px}
.bf-btn--sm .bf-arw{width:22px;height:22px}
.bf-btn--lg{padding:15px 16px 15px 28px;font-size:1rem}

/* ===== hero — editorial split, left-aligned ===== */
.bf-hero{padding:96px 0 72px;position:relative}
@media(min-width:1000px){.bf-hero{padding:120px 0 96px}}
.bf-hero__grid{display:grid;gap:56px;grid-template-columns:1fr}
@media(min-width:1000px){.bf-hero__grid{grid-template-columns:1.06fr .94fr;align-items:center;gap:72px}}
.bf-chip{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:.72rem;color:var(--bf-txt-2);background:var(--bf-elev-1);border:1px solid var(--bf-line);border-radius:999px;padding:7px 15px;margin-bottom:28px}
.bf-chip b{color:var(--bf-txt);font-weight:600}
.bf-chip .dt{width:6px;height:6px;border-radius:999px;background:var(--bf-accent)}
/* Restrained scale per casino-review research: h1 caps at 40px, not 80px. */
.bf-h1{font-family:var(--font-display);font-size:clamp(1.75rem,1.1rem + 2.2vw,2.5rem);line-height:1.08;letter-spacing:-.03em;font-weight:700;margin:0 0 18px;color:var(--bf-txt)}
.bf-h1 .em{color:var(--bf-accent)}
.bf-lead{font-size:1.0625rem;line-height:1.55;color:var(--bf-txt-2);max-width:520px;margin:0 0 30px}
.bf-hcta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.bf-hcta .note{font-size:.84rem;color:var(--bf-txt-3)}
.bf-hcta .note b{color:var(--bf-txt);font-family:var(--font-mono)}
.bf-trustrow{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:44px;padding-top:28px;border-top:1px solid var(--bf-line)}
.bf-trustrow .lbl{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bf-txt-3)}
.bf-trustrow .ops{display:flex;gap:16px;flex-wrap:wrap}
.bf-trustrow a{display:inline-flex;align-items:center;gap:7px;font-size:.84rem;color:var(--bf-txt-2);font-weight:500;transition:color .15s}
.bf-trustrow a:hover{color:var(--bf-txt)}
.bf-trustrow img{width:20px;height:20px;border-radius:5px}

/* hero board — double-bezel: outer shell + inner core */
.bf-viz{position:relative}
.bf-board{position:relative;background:var(--bf-shell);border:1px solid var(--bf-line);border-radius:var(--bf-r-xl);padding:6px;box-shadow:var(--bf-shadow)}
.bf-board__core{background:var(--bf-elev-1);border-radius:calc(var(--bf-r-xl) - 6px);box-shadow:var(--bf-inset);overflow:hidden}
.bf-board__top{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--bf-line)}
.bf-board__title{display:flex;align-items:center;gap:9px;font-weight:600;font-size:.9rem;color:var(--bf-txt)}
.bf-board__title .d{width:7px;height:7px;border-radius:999px;background:var(--bf-accent)}
.bf-board__top .m{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;color:var(--bf-txt-3)}
.bf-lbrow{display:grid;grid-template-columns:24px 1fr auto auto;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--bf-line);transition:background .2s;color:var(--bf-txt)}
.bf-lbrow:last-child{border-bottom:0}
.bf-lbrow:hover{background:rgba(255,255,255,.025)}
.bf-lbrow__rk{font-family:var(--font-mono);font-size:.8rem;color:var(--bf-txt-3);font-weight:600}
.bf-lbrow:first-of-type .bf-lbrow__rk{color:var(--bf-accent)}
.bf-lbrow__op{display:flex;align-items:center;gap:11px;min-width:0}
.bf-lbrow__op img{width:28px;height:28px;border-radius:7px;background:rgba(255,255,255,.04);padding:4px;flex-shrink:0}
.bf-lbrow__op b{font-weight:600;font-size:.9rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bf-lbrow__op span{display:block;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.04em;color:var(--bf-txt-3)}
.bf-bar{width:74px;height:5px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.bf-bar i{display:block;height:100%;border-radius:999px;background:var(--bf-accent);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--bf-ease)}
.bf-lbrow__sc{font-family:var(--font-mono);font-weight:600;font-size:.9rem;min-width:26px;text-align:right;color:var(--bf-txt)}
/* floating proof — single, subtle (no glow) */
.bf-fchip{position:absolute;z-index:5;background:var(--bf-elev-2);border:1px solid var(--bf-line-2);border-radius:14px;padding:12px 15px;box-shadow:var(--bf-shadow);animation:bf-float 6s var(--bf-ease) infinite alternate}
.bf-fchip--verify{top:-22px;right:-14px}
@media(max-width:1000px){.bf-fchip{display:none}}
@keyframes bf-float{to{transform:translateY(-9px)}}
.bf-fchip .k{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bf-accent);font-weight:600}
.bf-fchip .big{font-size:1.45rem;font-weight:700;letter-spacing:-.03em;margin-top:3px;color:var(--bf-txt)}
.bf-fchip .big small{font-size:.66rem;color:var(--bf-txt-3);font-weight:500;font-family:var(--font-mono)}

/* ===== kinetic marquee ===== */
.bf-marq{margin-top:64px;border-top:1px solid var(--bf-line);border-bottom:1px solid var(--bf-line);padding:18px 0;overflow:hidden;position:relative}
.bf-marq::before,.bf-marq::after{content:'';position:absolute;top:0;bottom:0;width:140px;z-index:2}
.bf-marq::before{left:0;background:linear-gradient(90deg,var(--bf-bg),transparent)}
.bf-marq::after{right:0;background:linear-gradient(270deg,var(--bf-bg),transparent)}
.bf-marq__track{display:flex;gap:52px;width:max-content;animation:bf-scrollx 34s linear infinite}
.bf-marq__track a{display:inline-flex;align-items:center;gap:10px;color:var(--bf-txt-3);font-weight:600;font-size:.98rem;transition:color .2s}
.bf-marq__track a:hover{color:var(--bf-txt)}
.bf-marq__track img{width:24px;height:24px;border-radius:6px;opacity:.7}
@keyframes bf-scrollx{to{transform:translateX(-50%)}}

/* ===== reveal (fade-up + blur) ===== */
.bf-rv{opacity:0;transform:translateY(24px);filter:blur(8px);transition:opacity .8s var(--bf-ease),transform .8s var(--bf-ease),filter .8s var(--bf-ease)}
.bf-rv.in{opacity:1;transform:none;filter:none}

/* ===== sections ===== */
.bf-section{padding:64px 0;position:relative}
@media(min-width:900px){.bf-section{padding:96px 0}}
.bf-shead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px}
.bf-shead h2{font-family:var(--font-display);font-size:clamp(1.4rem,1.15rem + 0.9vw,1.75rem);font-weight:700;letter-spacing:-.025em;margin:12px 0 0;line-height:1.15;color:var(--bf-txt)}
.bf-shead .lnk{display:inline-flex;align-items:center;gap:6px;color:var(--bf-txt-2);font-size:.9rem;font-weight:500;white-space:nowrap}
.bf-shead .lnk:hover{color:var(--bf-accent)}

/* stats — anti-card: hairline-divided row, mono numbers (no boxes) */
.bf-stats{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--bf-line)}
@media(min-width:760px){.bf-stats{grid-template-columns:repeat(4,1fr)}}
.bf-stat{padding:28px 26px 28px 0;border-bottom:1px solid var(--bf-line)}
.bf-stat+.bf-stat{padding-left:26px;border-left:1px solid var(--bf-line)}
@media(min-width:760px){.bf-stat{border-bottom:0}}
.bf-stat b{display:block;font-family:var(--font-mono);font-size:1.85rem;font-weight:600;letter-spacing:-.03em;color:var(--bf-txt);font-variant-numeric:tabular-nums}
.bf-stat b .u{font-size:1.05rem;color:var(--bf-accent)}
.bf-stat span{font-size:.84rem;color:var(--bf-txt-3)}

/* podium — ASYMMETRIC grid (feature wider), not equal 3-col */
.bf-podium{display:grid;gap:6px;grid-template-columns:1fr}
@media(min-width:860px){.bf-podium{grid-template-columns:1.5fr 1fr 1fr;gap:8px}}
.bf-pc{position:relative;display:flex;flex-direction:column}
.bf-pc__in{display:flex;flex-direction:column;height:100%;background:var(--bf-elev-1);border-radius:calc(var(--bf-r-xl) - 6px);box-shadow:var(--bf-inset);padding:26px;transition:transform .4s var(--bf-ease)}
.bf-pc:hover .bf-pc__in{transform:translateY(-5px)}
.bf-pc--1{background:linear-gradient(180deg,var(--bf-accent-soft),var(--bf-shell))}
.bf-pc__medal{position:absolute;top:22px;right:24px;z-index:3;font-family:var(--font-mono);font-weight:700;font-size:.86rem;color:var(--bf-txt-3)}
.bf-pc--1 .bf-pc__medal{color:var(--bf-accent)}
.bf-pc__head{display:flex;align-items:center;gap:13px;margin-bottom:20px}
.bf-pc__logo{width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--bf-line);padding:9px;flex-shrink:0}
.bf-pc--1 .bf-pc__logo{width:56px;height:56px}
.bf-pc__name{font-family:var(--font-display);font-size:1.18rem;font-weight:700;letter-spacing:-.025em;color:var(--bf-txt)}
.bf-pc__name a{color:inherit}
.bf-pc__sub{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.04em;color:var(--bf-txt-3);margin-top:3px;text-transform:uppercase}
.bf-pc__score{display:flex;align-items:baseline;gap:8px;margin-bottom:20px}
.bf-pc__score b{font-family:var(--font-mono);font-size:2rem;font-weight:600;letter-spacing:-.03em;color:var(--bf-txt);font-variant-numeric:tabular-nums}
.bf-pc--1 .bf-pc__score b{font-size:2.3rem;color:var(--bf-accent)}
.bf-pc__score small{color:var(--bf-txt-3);font-size:.78rem}
.bf-pc__kv{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-bottom:20px;border-top:1px solid var(--bf-line)}
.bf-pc__kv div{padding:13px 0;border-bottom:1px solid var(--bf-line)}
.bf-pc__kv div:nth-child(odd){padding-right:14px}
.bf-pc__kv div:nth-child(even){padding-left:14px;border-left:1px solid var(--bf-line)}
.bf-pc__kv dt{font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;color:var(--bf-txt-3)}
.bf-pc__kv dd{margin:3px 0 0;font-size:.92rem;font-weight:600;font-family:var(--font-mono);color:var(--bf-txt)}
.bf-pc__kv .acc{color:var(--bf-accent)}
.bf-pc__bonus{font-size:.86rem;color:var(--bf-txt-2);margin-bottom:18px;margin-top:auto;min-height:1.1em}
.bf-pc__cta{display:flex;gap:9px}
.bf-pc__cta .bf-btn{flex:1}

/* speed panel (double-bezel) */
.bf-panel .bf-panel__pad{padding:30px}
.bf-panel__head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px;flex-wrap:wrap}
.bf-panel__head h3{margin:0;font-family:var(--font-display);font-size:1.18rem;font-weight:700;color:var(--bf-txt)}
.bf-panel__head p{margin:5px 0 0;font-size:.85rem;color:var(--bf-txt-3)}
.bf-panel__legend{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.04em;color:var(--bf-txt-3);display:flex;align-items:center;gap:8px}
.bf-panel__legend i{width:20px;height:5px;border-radius:999px;background:var(--bf-accent);display:inline-block}
.bf-spd{display:grid;grid-template-columns:150px 1fr 60px;align-items:center;gap:16px;padding:11px 0;border-top:1px solid var(--bf-line)}
.bf-spd:first-of-type{border-top:0}
@media(max-width:560px){.bf-spd{grid-template-columns:104px 1fr 46px;gap:10px}}
.bf-spd__op{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.9rem;min-width:0;color:var(--bf-txt)}
.bf-spd__op img{width:26px;height:26px;border-radius:6px;background:rgba(255,255,255,.04);padding:4px;flex-shrink:0}
.bf-spd__op a{color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bf-spd__track{height:8px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.bf-spd__fill{height:100%;border-radius:999px;background:var(--bf-accent);transform:scaleX(0);transform-origin:left;transition:transform 1.3s var(--bf-ease)}
.bf-spd__val{font-family:var(--font-mono);font-size:.82rem;font-weight:600;text-align:right;color:var(--bf-accent)}
.bf-spd__val.untested{color:var(--bf-txt-3)}

/* browse — asymmetric bento */
.bf-bento{display:grid;gap:8px;grid-template-columns:1fr}
@media(min-width:680px){.bf-bento{grid-template-columns:repeat(6,1fr)}}
.bf-cell{position:relative;background:var(--bf-elev-1);border:1px solid var(--bf-line);border-radius:var(--bf-r-lg);padding:24px;transition:transform .3s var(--bf-ease),border-color .3s;overflow:hidden;display:flex;flex-direction:column;min-height:172px;color:var(--bf-txt)}
.bf-cell:hover{transform:translateY(-4px);border-color:var(--bf-line-2)}
@media(min-width:680px){
  .bf-cell{grid-column:span 2}
  .bf-cell--a{grid-column:span 4;grid-row:span 2}
  .bf-cell--b{grid-column:span 2}
}
.bf-cell__tag{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bf-accent);font-weight:600;margin-bottom:auto}
.bf-cell h3{font-family:var(--font-display);font-size:1.1rem;font-weight:700;letter-spacing:-.02em;margin:14px 0 6px;color:var(--bf-txt)}
.bf-cell--a h3{font-size:1.4rem}
.bf-cell p{font-size:.88rem;color:var(--bf-txt-2);margin:0 0 14px;max-width:46ch}
.bf-cell__more{font-size:.84rem;font-weight:600;color:var(--bf-accent);display:inline-flex;align-items:center;gap:6px}
.bf-cell__illus{position:absolute;right:-8px;bottom:-8px;width:110px;height:110px;opacity:.08;pointer-events:none}
.bf-cell--a .bf-cell__illus{width:180px;height:180px;opacity:.1}

/* closing CTA — left-aligned editorial, not centered */
.bf-cta{position:relative;overflow:hidden}
.bf-cta__pad{display:grid;gap:24px;grid-template-columns:1fr;align-items:center;padding:48px 36px}
@media(min-width:820px){.bf-cta__pad{grid-template-columns:1.3fr .7fr;padding:64px 56px}}
.bf-cta h2{font-family:var(--font-display);font-size:clamp(1.4rem,1.15rem + 0.9vw,1.75rem);font-weight:700;letter-spacing:-.025em;margin:0 0 12px;line-height:1.15;color:var(--bf-txt)}
.bf-cta p{color:var(--bf-txt-2);margin:0;font-size:1.04rem;max-width:52ch}
.bf-cta__btns{display:flex;gap:12px;flex-wrap:wrap}
@media(min-width:820px){.bf-cta__btns{justify-content:flex-end}}

@media (prefers-reduced-motion: reduce){
  body.home-v2 .bf-marq__track,body.home-v2 .bf-fchip{animation:none !important}
  body.home-v2 .bf-rv{opacity:1;transform:none;filter:none}
  body.home-v2 .bf-bar i,body.home-v2 .bf-spd__fill{transition:none}
}