/* bda design system: tokens, layout, components. One stylesheet for every bda-rendered site. */
/* self-hosted type: Inter (SIL OFL, see fonts/OFL-Inter.txt), one variable file, no third-party request */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/_bda/fonts/inter-latin.3100e775e8.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --bg: #0b0d12;
  --bg-raised: #131722;
  --line: #232a3a;
  --text: #eef0f6;
  --text-dim: #a3abc0;
  --accent: #f39200;
  --accent-ink: #1a1100;
  --radius: 14px;
  --gap: 24px;
  --pad: clamp(16px, 4vw, 72px); /* page side padding: grows with the viewport, the page itself is full width */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans CJK SC", "Noto Sans Devanagari", sans-serif;
  --font-zh: "Inter", system-ui, -apple-system, "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  --font-hi: "Inter", "Noto Sans Devanagari", "Noto Sans Devanagari UI", "Kohinoor Devanagari", "Nirmala UI", "Mangal", "Lohit Devanagari", system-ui, sans-serif;
}
/* per-script stacks: any element (the <html> or a language-switcher link) carrying lang gets the right script fonts */
:lang(zh-Hans) { font-family: var(--font-zh); }
:lang(hi) { font-family: var(--font-hi); }
html:lang(hi) { line-height: 1.7; }
:lang(zh-Hans) .hero h1, .hero h1:lang(zh-Hans) { max-width: 22em; letter-spacing: 0; }
:lang(zh-Hans) .eyebrow, :lang(hi) .eyebrow { text-transform: none; letter-spacing: .04em; }
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); font-family: var(--font); line-height: 1.55; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
a { color: inherit; }
.wrap { width: 100%; max-width: none; margin: 0; padding-inline: var(--pad); } /* full width, always; only text blocks keep a readable measure */
main { flex: 1; }

/* nav */
.nav { border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; gap: var(--gap); min-height: 72px; flex-wrap: wrap; }
.nav .brand { text-decoration: none; }
.nav .brand img { height: 30px; width: auto; display: block; }
.nav .brand .wordmark { font-weight: 700; font-size: 1.25rem; letter-spacing: .02em; }
.nav ul { list-style: none; display: flex; gap: 20px; margin: 0 0 0 auto; padding: 0; }
.nav ul a { text-decoration: none; color: var(--text-dim); }
.nav ul a:hover, .nav ul a[aria-current="page"] { color: var(--text); }
/* language switcher: a native <details> dropdown, flag + two-letter code */
.nav .lang { position: relative; font-size: .85rem; }
.nav .lang summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); }
.nav .lang summary::-webkit-details-marker { display: none; }
.nav .lang summary::after { content: ""; width: 6px; height: 6px; border: solid var(--text-dim); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-2px); margin-left: 2px; }
.nav .lang[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.nav .lang summary:focus-visible, .nav .lang a:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.nav .lang ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: block; margin: 0; padding: 6px; min-width: 100%; list-style: none; background: var(--bg-raised); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgb(0 0 0 / .25); }
.nav .lang li { margin: 0; }
.nav .lang a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 8px; text-decoration: none; color: var(--text-dim); white-space: nowrap; }
.nav .lang a:hover, .nav .lang a[aria-current="true"] { background: var(--bg); color: var(--text); }
.nav .lang .code { font-weight: 600; letter-spacing: .06em; }
.flag { flex: none; border-radius: 3px; box-shadow: 0 0 0 1px var(--line); }

/* hero */
.hero { padding: clamp(56px, 11vh, 140px) 0 clamp(40px, 8vh, 96px); }
.hero .logo { height: 72px; width: auto; display: block; margin-bottom: 28px; }
.hero h1 { font-size: clamp(2.2rem, 4.6vw, 5rem); line-height: 1.1; margin: 0 0 20px; max-width: 18ch; }
.hero p { font-size: 1.2rem; color: var(--text-dim); max-width: 60ch; margin: 0; }
.eyebrow { color: var(--accent); font-weight: 600; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }

/* sections and cards */
.section { padding: 40px 0 72px; }
.section h2 { font-size: 1.6rem; margin: 0 0 24px; }
.grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, clamp(260px, 24vw, 420px)), 1fr)); }
.card { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.card .logo { height: 34px; width: auto; max-width: 70%; display: block; margin-bottom: 18px; }
.card h3 { margin: 0 0 8px; font-size: 1.2rem; }
.card p { margin: 0; color: var(--text-dim); }
.card ul { margin: 14px 0 0; padding-left: 18px; color: var(--text-dim); }
.prose { max-width: 68ch; }
.prose p { font-size: 1.1rem; color: var(--text-dim); margin: 0 0 20px; }
.btn { display: inline-block; margin-top: 28px; background: var(--accent); color: var(--accent-ink); font-weight: 700; padding: 12px 22px; border-radius: 999px; text-decoration: none; }

/* footer */
.footer { border-top: 1px solid var(--line); padding: 32px 0; color: var(--text-dim); font-size: .9rem; }
.footer .wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer img { height: 28px; width: auto; }

/* orientation, followed automatically: a horizontal screen spreads the cards across the width and keeps the hero short;
   a vertical screen stacks into one generous column and gives the hero more of the height */
@media (orientation: landscape) { .hero { min-height: min(62dvh, 680px); display: flex; align-items: center; } .hero > .wrap { width: 100%; } }
@media (orientation: portrait) {
  .grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
  .hero h1 { font-size: clamp(2.4rem, 9vw, 4.4rem); }
  .hero p, .prose p { font-size: clamp(1.1rem, 3.4vw, 1.35rem); }
  .section { padding: 32px 0 clamp(48px, 8vh, 96px); }
}
@media (max-width: 640px) { .hero { padding: 56px 0 40px; } .nav ul { margin-left: 0; } }

/* ===== flagship look: Apple-level restraint and scale, 80s AOR warmth (the amber horizon glow) ===== */
:root { --bg: #060608; --bg-raised: #0f1117; --line: #1f2230; --glow: 243 146 0; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.nav { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); border-bottom-color: color-mix(in srgb, var(--line) 70%, transparent); }
.nav .wrap { min-height: 64px; }
.btn { margin-top: 36px; padding: 16px 30px; font-size: 1.05rem; letter-spacing: .01em; box-shadow: 0 0 0 1px rgb(255 255 255 / .08) inset, 0 12px 44px -10px rgb(var(--glow) / .65); transition: transform .25s ease, box-shadow .25s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgb(255 255 255 / .14) inset, 0 18px 56px -8px rgb(var(--glow) / .8); }
.btn:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
.hero { position: relative; overflow: clip; }
.hero > .wrap { position: relative; z-index: 1; }
.hero:not(.hero-home)::before { content: ""; position: absolute; inset: auto 0 0 0; height: 70%; background: radial-gradient(60% 90% at 18% 100%, rgb(var(--glow) / .17), transparent 70%); pointer-events: none; }
.glow { position: absolute; inset: auto 0 0 0; height: 72%; pointer-events: none; background: radial-gradient(62% 82% at 50% 100%, rgb(var(--glow) / .42), rgb(255 60 100 / .10) 46%, transparent 72%); }

/* home hero */
.hero-home { text-align: center; min-height: min(94dvh, 1000px); display: flex; align-items: center; justify-content: center; padding: clamp(72px, 14vh, 160px) 0 clamp(110px, 20vh, 220px); }
.hero-home > .wrap { display: flex; flex-direction: column; align-items: center; }
.hero-home .eyebrow { margin-bottom: 26px; }
.hero-home h1 { font-size: clamp(2.7rem, 8.2vw, 7.6rem); line-height: 1.02; letter-spacing: -.04em; font-weight: 700; max-width: 14ch; margin: 0 auto 30px; background: linear-gradient(180deg, #fff 35%, #8e94aa 125%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-home .lead { font-size: clamp(1.15rem, 2.2vw, 1.6rem); color: var(--text-dim); max-width: 48ch; margin: 0 auto; }
.hero-home .glow::after { content: ""; position: absolute; left: -25%; right: -25%; bottom: 0; height: 48%; background: linear-gradient(rgb(var(--glow) / .38) 1px, transparent 1px) 0 0 / 100% 46px, linear-gradient(90deg, rgb(var(--glow) / .38) 1px, transparent 1px) 0 0 / 76px 100%; transform: perspective(520px) rotateX(64deg); transform-origin: 50% 100%; -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 88%); mask-image: linear-gradient(to top, #000 0%, transparent 88%); opacity: .55; }

/* the statement */
.statement { padding: clamp(96px, 22vh, 260px) 0; text-align: center; }
.statement h2 { font-size: clamp(2rem, 5.8vw, 5.2rem); line-height: 1.07; letter-spacing: -.035em; font-weight: 700; max-width: 18ch; margin: 0 auto 32px; }
.statement p { font-size: clamp(1.15rem, 2.2vw, 1.65rem); color: var(--text-dim); max-width: 50ch; margin: 0 auto; }

/* products: two big panels */
.showcase { padding: 0 0 clamp(80px, 16vh, 200px); }
.showcase .kicker { text-align: center; font-size: .85rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); font-weight: 600; margin: 0 0 32px; }
.showcase .grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: clamp(16px, 2vw, 28px); }
.showcase .card { --tint: 243 146 0; position: relative; overflow: clip; min-height: clamp(340px, 48vh, 540px); padding: clamp(28px, 4vw, 56px); border-radius: 28px; display: flex; flex-direction: column; justify-content: flex-end; text-decoration: none; background: radial-gradient(120% 90% at 100% 0%, rgb(var(--tint) / .30), transparent 62%), var(--bg-raised); border: 1px solid var(--line); transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .35s, box-shadow .35s; }
.showcase .card:nth-child(1) { --tint: 235 52 52; }
.showcase .card:nth-child(2) { --tint: 84 142 255; }
.showcase .card .logo { height: clamp(48px, 6vw, 72px); width: auto; max-width: none; margin: 0 0 auto; align-self: flex-start; }
.showcase .card h3 { font-size: clamp(1.8rem, 3.2vw, 2.8rem); letter-spacing: -.025em; margin: 40px 0 12px; }
.showcase .card p { font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--text-dim); max-width: 34ch; }
.showcase .card-link::after { content: "→"; position: absolute; top: clamp(22px, 3vw, 40px); right: clamp(22px, 3vw, 40px); font-size: 1.7rem; color: var(--text-dim); transition: transform .3s, color .3s; }
.showcase .card-link:hover { transform: translateY(-6px); border-color: rgb(var(--tint) / .65); box-shadow: 0 34px 90px -34px rgb(var(--tint) / .6); }
.showcase .card-link:hover::after { transform: translate(5px, -5px); color: var(--text); }
.showcase .card-link:focus-visible { outline: 3px solid var(--text); outline-offset: 4px; }

/* three promises */
.pillars { padding: clamp(64px, 14vh, 160px) 0; }
.pillars h2 { text-align: center; font-size: clamp(1.9rem, 4.2vw, 3.6rem); letter-spacing: -.035em; line-height: 1.1; margin: 0 auto clamp(44px, 8vh, 88px); max-width: 20ch; }
.pillar-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 64px); counter-reset: pillar; }
.pillar { counter-increment: pillar; border-top: 1px solid var(--line); padding-top: 28px; }
.pillar::before { content: "0" counter(pillar); display: block; font-size: .95rem; font-weight: 700; letter-spacing: .16em; color: var(--accent); margin-bottom: 18px; }
.pillar h3 { font-size: clamp(1.4rem, 2.3vw, 2.1rem); letter-spacing: -.02em; line-height: 1.15; margin: 0 0 14px; }
.pillar p { color: var(--text-dim); font-size: 1.12rem; margin: 0; max-width: 36ch; }
@media (max-width: 900px), (orientation: portrait) { .pillar-row { grid-template-columns: 1fr; } }

/* the candle */
.walk { position: relative; overflow: clip; text-align: center; padding: clamp(120px, 28vh, 320px) 0; }
.walk .glow { inset: 0; height: auto; background: radial-gradient(48% 56% at 50% 50%, rgb(var(--glow) / .24), transparent 72%); }
.walk .wrap { position: relative; z-index: 1; }
.walk .big { font-size: clamp(2.5rem, 7.4vw, 6.6rem); line-height: 1.03; letter-spacing: -.04em; font-weight: 700; max-width: 13ch; margin: 0 auto 34px; background: linear-gradient(180deg, #ffe2b0 10%, #f39200 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.walk .sub { font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--text-dim); max-width: 46ch; margin: 0 auto; }

/* the close */
.closer { text-align: center; padding: clamp(96px, 20vh, 220px) 0 clamp(96px, 18vh, 200px); border-top: 1px solid var(--line); }
.closer h2 { font-size: clamp(1.9rem, 4.8vw, 4.2rem); letter-spacing: -.035em; line-height: 1.1; max-width: 20ch; margin: 0 auto; }
.closer .btn { margin-top: 44px; }

/* motion that explains: elements rise as they enter; progressive enhancement, off for reduced motion */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .statement .wrap, .showcase .grid, .pillar, .walk .wrap, .closer .wrap { animation: bda-rise linear forwards; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    @keyframes bda-rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
  }
}
@media (prefers-reduced-motion: reduce) { .btn, .showcase .card, .showcase .card-link::after { transition: none; } }

/* scripts with taller glyphs and longer lines: calmer hero sizes, same hierarchy */
:lang(zh-Hans) .hero-home h1 { font-size: clamp(2.4rem, 6.6vw, 6.2rem); line-height: 1.18; max-width: 16em; }
:lang(hi) .hero-home h1 { font-size: clamp(2.3rem, 5.4vw, 5rem); line-height: 1.22; max-width: 18em; }
:lang(zh-Hans) .statement h2, :lang(zh-Hans) .closer h2, :lang(zh-Hans) .walk .big { line-height: 1.2; letter-spacing: 0; }
:lang(hi) .statement h2, :lang(hi) .closer h2, :lang(hi) .walk .big, :lang(hi) .pillars h2 { line-height: 1.25; letter-spacing: 0; }
@media (max-width: 640px) { .nav .wrap { padding-block: 12px; row-gap: 8px; } }

/* product landings: the same flagship composition as a company home */
.hero-product .logo { height: clamp(64px, 9vw, 112px); width: auto; display: block; margin: 0 auto 28px; }
.hero-product h1 { max-width: 16ch; }
.features { padding: clamp(64px, 12vh, 140px) 0; }
.features h2 { text-align: center; font-size: clamp(1.9rem, 4.2vw, 3.4rem); letter-spacing: -.035em; line-height: 1.1; margin: 0 auto clamp(44px, 8vh, 88px); }
.features .pillar::before { margin-bottom: 14px; }
.features .pillar p { color: var(--text); font-size: 1.2rem; max-width: 34ch; }
.showcase .card .open { margin-top: 18px; color: var(--accent); font-weight: 600; }
.showcase .card .logo + h3, .showcase .card h3:first-child { margin-top: 0; }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .features .pillar { animation: bda-rise linear forwards; animation-timeline: view(); animation-range: entry 0% cover 30%; } } }
/* the grids adapt to how many items there are: no empty column, no orphan row */
.features .pillar-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.showcase .grid:has(> :nth-child(3)) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }

/* a product with a logo: the logo is its name. The written name stays in the page for screen readers and search engines,
   never on screen (no duplicated writing). */
.hero.has-logo h1, .card.has-logo h3 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; background: none; -webkit-text-fill-color: initial; }
.hero-product.has-logo .logo { height: clamp(88px, 15vw, 200px); margin-bottom: 26px; }
.hero-product.has-logo .lead { margin-top: 6px; }
.showcase .card.has-logo .logo { margin-bottom: auto; }

/* a product story (Rush): the claims as big panels, and the numbers it produced today */
.hero-product .story-title { font-size: clamp(2rem, 5.4vw, 4.8rem); line-height: 1.04; letter-spacing: -.04em; font-weight: 700; max-width: 20ch; margin: 18px auto 20px; background: linear-gradient(180deg, #fff 30%, #8e94aa 130%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-product .lead { color: #ff5a4f; font-weight: 600; font-size: clamp(1.4rem, 3vw, 2.2rem); letter-spacing: -.02em; }
:lang(zh-Hans) .hero-product .story-title, :lang(hi) .hero-product .story-title { line-height: 1.22; letter-spacing: 0; max-width: 18em; }
.claims { padding: clamp(40px, 9vh, 120px) 0; }
.claims .kicker { text-align: center; font-size: clamp(1.9rem, 4.4vw, 3.6rem); letter-spacing: -.035em; line-height: 1.08; text-transform: none; color: var(--text); font-weight: 700; margin: 0 auto clamp(40px, 7vh, 80px); max-width: 20ch; }
.claim-grid { display: grid; gap: clamp(14px, 1.6vw, 24px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); counter-reset: claim; }
.claim { counter-increment: claim; position: relative; overflow: clip; min-height: clamp(240px, 30vh, 330px); padding: clamp(24px, 2.6vw, 38px); border-radius: 26px; border: 1px solid var(--line); background: radial-gradient(110% 80% at 100% 0%, rgb(235 52 52 / .16), transparent 60%), var(--bg-raised); transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .35s; }
.claim:hover { transform: translateY(-4px); border-color: rgb(235 52 52 / .55); }
.claim::before { content: "0" counter(claim); display: block; font-size: .9rem; font-weight: 700; letter-spacing: .16em; color: #ff5a4f; margin-bottom: 16px; }
.claim h3 { font-size: clamp(1.45rem, 2.3vw, 2rem); letter-spacing: -.025em; line-height: 1.12; margin: 0 0 12px; }
.claim p { color: var(--text-dim); font-size: 1.08rem; margin: 0; }
.measured { padding: clamp(64px, 12vh, 150px) 0; border-top: 1px solid var(--line); text-align: center; }
.measured .kicker { font-size: clamp(1.9rem, 4.4vw, 3.6rem); letter-spacing: -.035em; text-transform: none; color: var(--text); font-weight: 700; margin: 0 0 12px; }
.measured .note { color: var(--text-dim); max-width: 52ch; margin: 0 auto clamp(40px, 7vh, 80px); font-size: 1.15rem; }
.figures { display: grid; gap: clamp(24px, 3vw, 48px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); margin: 0; }
.figure dt { font-size: clamp(3.4rem, 8vw, 7rem); line-height: 1; letter-spacing: -.05em; font-weight: 800; background: linear-gradient(180deg, #ffe2b0 10%, #f39200 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.figure dd { margin: 12px auto 0; color: var(--text-dim); max-width: 24ch; font-size: 1.05rem; }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .claim, .figure { animation: bda-rise linear forwards; animation-timeline: view(); animation-range: entry 0% cover 30%; } } }
@media (prefers-reduced-motion: reduce) { .claim { transition: none; } }

/* headline specificity: the Rush family stylesheet styles `.wrap > h2` small and flush left (margin: 36px 0 12px); a story or company headline must
   keep its own size AND its centering, so it states both. */
.statement .wrap > h2 { font-size: clamp(2rem, 5.8vw, 5.2rem); max-width: 18ch; margin: 0 auto 32px; }
.closer .wrap > h2 { font-size: clamp(1.9rem, 4.8vw, 4.2rem); max-width: 20ch; margin: 0 auto; }
.pillars .wrap > h2, .features .wrap > h2 { font-size: clamp(1.9rem, 4.2vw, 3.6rem); max-width: 20ch; margin: 0 auto clamp(44px, 8vh, 88px); }
.claims .wrap > h2.kicker { font-size: clamp(1.9rem, 4.4vw, 3.6rem); max-width: 20ch; margin: 0 auto clamp(40px, 7vh, 80px); }
.measured .wrap > h2.kicker { font-size: clamp(1.9rem, 4.4vw, 3.6rem); margin: 0 auto 12px; }