/* Mini-buh landing. Logical properties only; colours, spacing and fonts come from tokens.css. */

@font-face { font-family: "Inter Tight"; src: url("assets/fonts/inter-tight-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("assets/fonts/inter-tight-latin-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("assets/fonts/ibm-plex-mono-latin-500.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("assets/fonts/ibm-plex-sans-arabic-arabic-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("assets/fonts/ibm-plex-sans-arabic-arabic-600.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Sans Devanagari"; src: url("assets/fonts/noto-sans-devanagari-devanagari-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Sans Devanagari"; src: url("assets/fonts/noto-sans-devanagari-devanagari-600.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Sans Malayalam"; src: url("assets/fonts/noto-sans-malayalam-malayalam-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Sans Malayalam"; src: url("assets/fonts/noto-sans-malayalam-malayalam-600.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Sans Bengali"; src: url("assets/fonts/noto-sans-bengali-bengali-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Sans Bengali"; src: url("assets/fonts/noto-sans-bengali-bengali-600.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--bg); color: var(--text); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.5; }

/* Fonts per script, chosen by :lang */
:lang(en) { font-family: var(--font-body); }
:lang(ar), :lang(ur) { font-family: var(--font-arabic); line-height: 1.7; }
:lang(hi) { font-family: var(--font-devanagari); line-height: 1.7; }
:lang(ml) { font-family: var(--font-malayalam); line-height: 1.7; }
:lang(bn) { font-family: var(--font-bengali); line-height: 1.7; }
.bilo-display:lang(en), .mb-h2:lang(en), .mb-stat { font-family: var(--font-display); }
.mb-stat, .mb-amount, .mb-eyebrow { unicode-bidi: isolate; }
.mb-stat, .mb-amount { direction: ltr; }
.mb-eyebrow:lang(en) { font-family: var(--font-mono); }

.bilo-wrap { max-inline-size: 1120px; margin-inline: auto; padding-inline: var(--space-6); }

/* Skip link */
.bilo-skip { position: absolute; inset-inline-start: var(--space-4); inset-block-start: calc(-1 * var(--space-12) - var(--space-4)); display: inline-flex; align-items: center; min-block-size: 48px; padding-inline: var(--space-4); background: var(--surface); color: var(--text); border-radius: var(--radius-md); z-index: 10; }
.bilo-skip:focus-visible { inset-block-start: var(--space-4); outline: none; box-shadow: var(--ring); }

/* Header */
.bilo-header { border-block-end: 1px solid var(--border); background: var(--surface); }
.bilo-header-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); }
.bilo-lockup { display: inline-flex; align-items: center; gap: var(--space-3); min-block-size: 48px; color: var(--text); text-decoration: none; border-radius: var(--radius-md); font-family: var(--font-display); }
.bilo-lockup:focus-visible { outline: none; box-shadow: var(--ring); }
.bilo-lockup img { display: block; inline-size: 40px; block-size: 40px; }
.bilo-lockup-text { display: flex; align-items: baseline; gap: var(--space-2); }
.bilo-lockup-name { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.bilo-lockup-by { font-family: var(--font-body); font-size: 13px; color: var(--text-muted); }
.bilo-theme { min-block-size: 48px; }
.bilo-theme:focus-visible { outline: none; box-shadow: var(--ring); }

/* Hero */
main:focus { outline: none; }
.bilo-hero { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-12); align-items: start; padding-block: var(--space-12); }
.bilo-eyebrow { margin: 0; color: var(--accent-text); text-transform: uppercase; }
.bilo-eyebrow:not(:lang(en)) { text-transform: none; letter-spacing: 0; font-size: 13px; }
.bilo-display { margin-block: var(--space-3) var(--space-4); font-size: 48px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }
.bilo-display:not(:lang(en)) { font-size: 36px; line-height: 1.35; letter-spacing: 0; }
.bilo-lead { margin-block: 0 var(--space-4); font-size: 19px; color: var(--text-muted); }
.bilo-demo { display: flex; gap: var(--space-2); align-items: flex-start; margin-block: 0 var(--space-6); padding: var(--space-3) var(--space-4); background: var(--surface-2); border-radius: var(--radius-md); font-size: 14px; }
.bilo-demo .mb-icon { flex: none; margin-block-start: 2px; color: var(--accent-text); }
.bilo-cta { display: inline-flex; align-items: center; justify-content: center; min-block-size: 48px; padding-block: var(--space-3); padding-inline: var(--space-6); border-radius: var(--radius-md); background: var(--accent); color: var(--text-on-accent); font-weight: 600; text-decoration: none; }
.bilo-cta:hover { background: var(--accent-hover); }
.bilo-cta:focus-visible { outline: none; box-shadow: var(--ring); }
.bilo-hero-langs .mb-langs { max-inline-size: none; }

/* Sections */
.bilo-section { padding-block: var(--space-12); border-block-start: 1px solid var(--border); }
.bilo-h2 { margin-block: 0 var(--space-4); }
.bilo-muted { margin-block: 0 var(--space-6); color: var(--text-muted); }

.bilo-features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-6); }
.bilo-feature { padding: var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.bilo-feature h3 { margin-block: var(--space-3) var(--space-2); }
.bilo-feature p { margin: 0; color: var(--text-muted); }
.bilo-feature-icon { display: inline-flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent-text); }

.bilo-prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6); align-items: stretch; }
.bilo-prices .mb-btn { min-block-size: 48px; }
.bilo-prices .mb-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.bilo-selected { min-block-size: 32px; margin-block: var(--space-6) 0; }

/* Footer */
.bilo-footer { border-block-start: 1px solid var(--border); background: var(--surface-2); padding-block: var(--space-8); }
.bilo-footnote { display: flex; gap: var(--space-2); align-items: flex-start; margin-block: 0 var(--space-3); }
.bilo-footnote .mb-icon { flex: none; margin-block-start: 3px; }
.bilo-footer .bilo-muted { margin-block: 0 var(--space-2); font-size: 13px; }

@media (max-width: 820px) {
  .bilo-hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); padding-block: var(--space-8); }
  .bilo-display { font-size: 36px; }
  .bilo-wrap { padding-inline: var(--space-4); }
}

@media (forced-colors: active) {
  :focus-visible { outline: 2px solid CanvasText !important; outline-offset: 2px; }
}