/* Finance Waale Bhaiya brand for the stats site: the same "Pop Cobalt" system as the videos, logo and banner
   (src/lib/styles.ts → pop, src/brand/Logo.tsx). Fonts are self-hosted (SIL OFL) so no third-party requests.
   Shared by dashboard, login, /home and /privacy; served at /brand/fwb.css. */
@font-face { font-family: "Unbounded"; src: url("/stats/brand/unbounded.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("/stats/brand/outfit.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Poppins Rupee"; src: url("/stats/brand/poppins-rupee.woff2") format("woff2"); font-weight: 800; unicode-range: U+20B9; font-display: swap; }

:root {
  --blue: #1F4BFF; --navy: #0A0F2C; --yellow: #FFD84D; --pink: #FF6FB5; --white: #FFFFFF;
  --muted: #5A6385; --line: #E6E8F2; --pos: #0FA968; --neg: #F04438;
  --yt: #E00000; --fb: #1877F2; --ig: #C13584;
  --font-display: "Unbounded", "Poppins Rupee", system-ui, sans-serif;
  --font-body: "Outfit", "Poppins Rupee", system-ui, -apple-system, sans-serif;
  --radius: 22px; --border: 4px solid var(--navy); --shadow: 8px 8px 0 var(--navy);
}
* { box-sizing: border-box; }
body.fwb { margin: 0; min-height: 100vh; background: var(--blue); color: var(--navy); font-family: var(--font-body); position: relative; isolation: isolate; }
/* banner background: sunburst rays + dot grid fading in at the top and bottom */
body.fwb::before { content: ""; position: fixed; inset: -50vmax; z-index: -2; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.07) 0deg 6deg, transparent 6deg 12deg); }
body.fwb::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.16) 2.5px, transparent 3px); background-size: 34px 34px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 30%, transparent 70%, #000 100%); mask-image: linear-gradient(180deg, #000 0%, transparent 30%, transparent 70%, #000 100%); }

/* logo + wordmark (as on the banner) */
.fwb-lockup { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.fwb-logo { display: block; flex-shrink: 0; filter: drop-shadow(3px 3px 0 var(--navy)); }
.fwb-wordmark { font-family: var(--font-display); font-weight: 900; line-height: .95; text-transform: uppercase; white-space: nowrap; }
.fwb-wordmark .l1 { display: block; color: var(--white); font-size: .5em; letter-spacing: .06em; }
.fwb-wordmark .l2 { display: block; color: var(--yellow); font-size: 1em; letter-spacing: -.01em;
  -webkit-text-stroke: .09em var(--navy); paint-order: stroke fill; text-shadow: .07em .07em 0 var(--navy); }

/* building blocks */
.fwb-card { background: var(--white); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.fwb-sticker { display: inline-block; background: var(--yellow); color: var(--navy); border: 3px solid var(--navy); box-shadow: 4px 4px 0 var(--navy);
  border-radius: 12px; padding: 4px 12px; font-family: var(--font-display); font-weight: 900; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; transform: rotate(-2deg); }
.fwb-sticker.pink { background: var(--pink); } .fwb-sticker.white { background: var(--white); }
.fwb-btn { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: .03em; background: var(--yellow); color: var(--navy);
  border: 3px solid var(--navy); border-radius: 14px; box-shadow: 4px 4px 0 var(--navy); cursor: pointer; transition: transform .05s, box-shadow .05s; }
.fwb-btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--navy); }
.fwb-display { font-family: var(--font-display); font-weight: 900; }