/*
 * Basyra identity layer: brand font files plus the rules a find-and-replace cannot express.
 * Roles follow app.sotai.uz: Manrope for all UI and body text, Unbounded for display text
 * (h1/h2, the wordmark, big numbers), JetBrains Mono for code-like labels.
 * Palette: primary #0062DB (AA on white), brand #0072FF for graphics, navy #023E8B,
 * light #BBD9FF, page #EEF1F6, ink #0F1B33. The bulk colour swap lives in the files themselves.
 */
/* JetBrains Mono · cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/brand/fonts/jetbrains-mono-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* JetBrains Mono · cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/brand/fonts/jetbrains-mono-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* JetBrains Mono · latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/brand/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono · latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/brand/fonts/jetbrains-mono-latin.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;
}
/* Manrope · cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/brand/fonts/manrope-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Manrope · cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/brand/fonts/manrope-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Manrope · latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/brand/fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Manrope · latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/brand/fonts/manrope-latin.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;
}
/* Unbounded · cyrillic-ext */
@font-face {
  font-family: 'Unbounded';
  size-adjust: 84%; /* ~37% wider than Urbanist; keeps the original line breaks */
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/brand/fonts/unbounded-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Unbounded · cyrillic */
@font-face {
  font-family: 'Unbounded';
  size-adjust: 84%;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/brand/fonts/unbounded-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Unbounded · latin-ext */
@font-face {
  font-family: 'Unbounded';
  size-adjust: 84%;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/brand/fonts/unbounded-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Unbounded · latin */
@font-face {
  font-family: 'Unbounded';
  size-adjust: 84%;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/brand/fonts/unbounded-latin.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;
}

/* Display text. Urbanist served both headings and UI text, so the split is made here. */
h1, h2, h1 *, h2 *,
.framer-styles-preset-1hssvo3, .framer-styles-preset-g7mdxu,
#hero-nav > div:first-child, #hero-nav > div:first-child *, [data-framer-name="logo"] p, .nav .logo, .bp-brand,
.cm-num, .stat-num, .pr-score, .lm-score, .bdf-prev-score, .bz-eq > div > div {
  font-family: "Unbounded", "Manrope", sans-serif !important;
}
h1, h2 { font-weight: 600 !important; }
/* The Unbounded faces stop at 700: its 800 reads as a black weight, too heavy next to the app. */

/* Demo-form submit: was a gold money gradient with dark text; the brand CTA is a deep blue fill. */
.bdf-submit {
  background: linear-gradient(120deg, #0062DB, #023E8B) !important;
  color: #FFFFFF !important;
}

/* Comparison money row: gold label and coin become brand blue. The same gold value marks "warm"
   leads in the priority block, which is a status colour and stays. */
.basyra-comparison .cm-part, .basyra-comparison .cm-coin { color: #0062DB !important; }

/* Manrope sets the hero copy a few px taller, which tucked the trust line under the dashboard. */
#hero-trust-line { margin-top: 16px !important; }

/* The win-back estimate chip («taxminiy») is longer than the old «baho»; on phones it wraps under the sum. */
@media (max-width: 560px) {
  .basyra-winback .kpi-num-row { flex-wrap: wrap; row-gap: 6px; }
}

/* ======================================================================================================
 * Design layer (owner 08.10: "juda simple bo'lib qolgan"). The brand's own devices, used sparingly:
 * neutral sections stay neutral; blue lives on the two blue moments (proof band, demo pitch) and accents.
 * ==================================================================================================== */

/* Accent words in headings: one brand gradient instead of flat blue. */
.basyra-levers h2 .gold, .basyra-prio h2 .ac, .basyra-bento h2 .vac, .basyra-comparison h2 .cm-ac,
.basyra-what .bw-rev, .basyra-what .bw-sys, .basyra-patterns .pat-accent, #hero-t-blue {
  background: linear-gradient(100deg, #1A85FF 0%, #0062DB 42%, #023E8B 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent !important;
}

/* Proof band: the brand's deep arcs, the four figures on glass tiles in one even row (2 × 2 below 900 px). */
.basyra-proof > div > div:first-child {
  background: linear-gradient(rgba(2, 40, 110, .2), rgba(2, 40, 110, .2)),
              url("/brand/bg/bg-04-deep-arcs.jpg") center / cover no-repeat !important;
  box-shadow: 0 40px 80px -36px rgba(2, 62, 139, .7), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}
.basyra-proof > div > div:first-child > div:last-child {
  display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px !important;
}
.basyra-proof > div > div:first-child > div:last-child > div > div:first-child { font-size: clamp(46px, 4.6vw, 68px) !important; }
.basyra-proof > div > div:first-child > div:last-child > div {
  min-width: 0; padding: 28px 18px 24px; box-sizing: border-box; border-radius: 24px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 18px 40px -24px rgba(0, 20, 60, .55);
}

/* Demo pitch: the brand's deep rings. */
section .bdf-pitch {
  background: linear-gradient(165deg, rgba(0, 98, 219, .15), rgba(2, 40, 110, .45)),
              url("/brand/bg/bg-05-deep-rings.jpg") 30% 85% / cover no-repeat !important;
}

/* Comparison: the ROI column gets the same deep arcs as the proof band. */
.basyra-comparison .cm-roi {
  background: linear-gradient(rgba(0, 82, 189, .25), rgba(2, 40, 110, .25)),
              url("/brand/bg/bg-04-deep-arcs.jpg") 70% 30% / cover no-repeat !important;
}

/* "Zoom out" rings behind three neutral sections: soft bands, faded at the edge. */
.basyra-levers, .basyra-integrations, .b-nsec { position: relative; overflow: hidden; }
.basyra-levers::before, .basyra-integrations::before, .b-nsec:first-of-type::before {
  content: ""; position: absolute; width: 760px; height: 760px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: repeating-radial-gradient(circle, rgba(0, 114, 255, 0) 0 46px, rgba(0, 114, 255, .07) 62px, rgba(0, 114, 255, 0) 80px);
  -webkit-mask: radial-gradient(circle, #000 0 38%, transparent 70%); mask: radial-gradient(circle, #000 0 38%, transparent 70%);
}
/* Each ring sits so its faded edge stays inside the section; only the viewport edge may cut it. */
.basyra-levers::before { right: -300px; top: -60px; }
.basyra-integrations::before { left: 50%; top: -90px; transform: translateX(-50%); }
.b-nsec:first-of-type::before { left: 50%; top: -110px; transform: translateX(-50%); }
.basyra-levers .lv-wrap, .basyra-integrations .io-wrap, .b-nsec .b-wrap { position: relative; z-index: 1; }

/* Levers: layered depth, and a quiet ring mark so the closed cards are not empty. */
.basyra-levers .lv-card {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(15, 27, 51, .05), 0 22px 44px -28px rgba(2, 62, 139, .28) !important;
}
.basyra-levers .lv-card::after {
  content: ""; position: absolute; left: 50%; bottom: -84px; width: 260px; height: 260px; transform: translateX(-50%);
  border-radius: 50%; pointer-events: none; transition: opacity .45s ease;
  background: radial-gradient(circle, rgba(0, 114, 255, .13) 0 15%, transparent 16% 30%, rgba(0, 114, 255, .08) 31% 33%,
              transparent 34% 50%, rgba(0, 114, 255, .05) 51% 53%, transparent 54%);
}
.basyra-levers .lv-card[data-on="1"]::after { opacity: 0; }

/* Integrations and role cards: lift on hover, clay icons. */
.basyra-integrations .io-card { transition: transform .25s ease, box-shadow .25s ease, opacity .5s ease !important; }
.basyra-integrations .io-card:hover { transform: translateY(-4px) !important; box-shadow: 0 2px 4px rgba(15, 27, 51, .05), 0 24px 40px -22px rgba(0, 98, 219, .45) !important; }
.b-nsec .b-icon {
  width: 48px !important; height: 48px !important; border-radius: 15px !important;
  background: radial-gradient(120% 120% at 30% 22%, #FFFFFF 0%, #DCEBFF 46%, #A9CCFF 100%) !important;
  box-shadow: inset 0 -4px 8px rgba(0, 82, 189, .18), inset 0 2px 3px rgba(255, 255, 255, .95), 0 10px 18px -10px rgba(0, 98, 219, .55);
}
.b-nsec .b-card:hover { box-shadow: 0 2px 4px rgba(15, 27, 51, .04), 0 26px 44px -26px rgba(0, 98, 219, .4) !important; }

/* Primary buttons: a lit gradient and a brand glow. */
.brc-btn.brc-blue, #hero-cta-primary {
  background: linear-gradient(180deg, #1A85FF 0%, #0062DB 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 14px 30px -12px rgba(0, 98, 219, .65) !important;
}

/* Basyra Core reads as the hub only at a size close to the old mascot's height. */
@media (min-width: 900px) {
  .basyra-what .bw-thunder { width: 30% !important; max-width: 250px !important; }
}
@media (max-width: 900px) {
  .basyra-proof > div > div:first-child > div:last-child { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .basyra-proof > div > div:first-child { padding: 40px 18px !important; }
  .basyra-proof > div > div:first-child > div:last-child { gap: 10px !important; }
  .basyra-proof > div > div:first-child > div:last-child > div { padding: 20px 10px 18px; }
  .basyra-proof > div > div:first-child > div:last-child > div > div:first-child { font-size: 38px !important; }
  .basyra-proof > div > div:first-child > div:last-child > div > div:last-child { font-size: 13.5px !important; }
}

/* Levers on phones and tablets: the cards stack, so the accordion only left three empty cards.
   Every card shows its visual there, and the ring mark is not needed. */
@media (max-width: 860px) {
  .basyra-levers .lv-card .lv-viz { opacity: 1 !important; }
  .basyra-levers .lv-card::after { display: none; }
  /* The coaching screens wrap to more lines in a narrow card; give them room instead of letting them spill upward. */
  .basyra-levers .lm-coaching .cs-body { height: 280px; }
  .basyra-levers .lm-coaching .cs-screen { justify-content: flex-start; }
}

/* Sideways scroll: the seam cloud image between the hero and #main is 2304 px wide and the hero's drifting cloud
   slides past the right edge, so the page scrolled 430 px to the right. clip, not hidden: hidden would turn the
   containers into scroll boxes and break the hero's position: sticky scroll theatre. */
html, body { overflow-x: clip; }
#basyra-seam-cloud, #hero-sky-stage { overflow-x: clip; }

/* The logos band continues the hero cloud's white, but the page below is #EEF1F6; fade into it instead of a hard edge. */
[data-framer-name="logos"] { background: linear-gradient(180deg, #FDFCFC 0%, #FDFCFC 55%, #EEF1F6 100%) !important; }

/* Lead queue follows the new design (4LK8, 09.10 note 3): the score chip carries the band colour and the band pill
   is gone from the list. Floors 60 / 40 / 1 / 0 as in lib/lead-priority/v3/score.ts. */
.basyra-prio .pr-row .pr-sc { border: 0 !important; }
.basyra-prio .pr-row .pr-sc.sc-hot { background: #D9342B !important; color: #FFFFFF !important; }
.basyra-prio .pr-row .pr-sc.sc-warm { background: #F5A524 !important; color: #3B2500 !important; }
.basyra-prio .pr-row .pr-sc.sc-cold { background: #DCEEFE !important; color: #075985 !important; }
.basyra-prio .pr-row .pr-temp { display: none !important; }

/* Footer: Sunbeam's grey cloud under the footer card is not part of the brand. Collapsed in CSS only — the Framer
   node stays in the DOM so hydration is untouched. */
footer[data-framer-name="Footer"] > [data-framer-name="cloud"] {
  visibility: hidden !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important;
  margin: 0 !important; padding: 0 !important;
}

/* ======================================================================================================
 * Responsive pass (09.10): phones 320–414, tablets 768–1024, large screens.
 * ==================================================================================================== */

/* Framer sets these two text boxes to auto width (white-space: pre), so on phones they ran past both edges. */
[data-framer-name="Companies title"], [data-framer-name="Companies title"] p,
footer [data-framer-name="copyright"], footer [data-framer-name="copyright"] p {
  white-space: normal !important; width: 100% !important; max-width: 100% !important;
}
[data-framer-name="Companies title"] p { text-align: center !important; text-wrap: balance; }

/* Hero nav on small phones: logo, language and demo button share one row. */
@media (max-width: 400px) {
  #hero-nav { padding-left: 14px !important; padding-right: 14px !important; gap: 8px !important; }
  #hero-nav > div:first-child { min-width: 0; }
  #hero-nav > div:first-child, #hero-nav > div:first-child * { font-size: 18px !important; }
  #hero-lang-root button { padding-left: 9px !important; padding-right: 9px !important; gap: 4px !important; }
  #hero-nav-cta { padding: 0 12px !important; font-size: 13px !important; line-height: 1.15 !important; }
  #hero-nav > div:last-child { gap: 6px !important; }
}
@media (max-width: 350px) {
  #hero-lang-root button > span:not(:first-child), #hero-lang-root button svg:last-child { display: none !important; }
}

/* Bento kanban on phones: four columns in ~260 px, so headers and the moving card wrap instead of spilling. */
@media (max-width: 480px) {
  .basyra-bento .kb { padding: 9px !important; gap: 4px !important; }
  .basyra-bento .kbcol { padding: 8px 3px !important; }
  .basyra-bento .kbh { letter-spacing: 0 !important; font-size: 8.5px !important; overflow-wrap: anywhere; }
  .basyra-bento .kbcard { padding: 7px 6px !important; }
  .basyra-bento .kbcard .kn { font-size: 10.5px !important; }
  .basyra-bento .kbcard, .basyra-bento .kbcard * { white-space: normal !important; overflow-wrap: anywhere; min-width: 0; }
  .basyra-bento .kbcard { box-sizing: border-box !important; overflow: hidden; }
  .basyra-bento .kb .kbcard { left: 9px; width: calc((100% - 30px) / 4); }
  .basyra-prio .pr-q-cap { white-space: normal !important; }
}

/* Lead queue on the smallest phones: the rows had a fixed minimum wider than the card's content box, and the
   section stacked two 20 px side gutters (wrapper + inner), leaving the card 240 px at 320. */
@media (max-width: 380px) {
  .basyra-prio .pr { padding-left: 0 !important; padding-right: 0 !important; }
  .basyra-prio .pr-card { padding-left: 12px !important; padding-right: 12px !important; }
  .basyra-prio .pr-queue, .basyra-prio .pr-row, .basyra-prio .pr-r-info { min-width: 0 !important; }
  .basyra-prio .pr-r-name, .basyra-prio .pr-r-reason { overflow: hidden; text-overflow: ellipsis; }
}

/* Hero title in two lines (owner 12.10): the suffix runs on after the accent word instead of taking a third line,
   so the h1 reserves two lines; a long translation still wraps on its own. */
#basyra-hero h1 { min-height: 2.2em !important; }
#hero-t-suffix { display: inline !important; white-space: normal !important; }

/* Hero title on phones: the typed first line was nowrap, so on a 360 px screen it ran 210 px past the edge. */
@media (max-width: 600px) {
  #hero-t-line1 { white-space: normal !important; }
}

/* Hero nav on small laptops and landscape tablets: six links, language and the demo button on one row. */
@media (max-width: 1200px) {
  #hero-navlinks { gap: 16px !important; }
  #hero-navlinks a, #hero-navlinks .hero-nav-item, #hero-navlinks .hero-nav-item > * { white-space: nowrap !important; font-size: 13.5px !important; }
  #hero-nav-cta { white-space: nowrap !important; }
}

/* Comparison table on phones: the two mark columns took 204 px and left the feature text ~60 px. */
@media (max-width: 480px) {
  .basyra-comparison .cm-tbl { padding: 8px 12px 16px !important; }
  .basyra-comparison .cm-grid { grid-template-columns: minmax(0, 1fr) 52px 60px !important; }
  .basyra-comparison .cm-basyra-col { width: 60px !important; right: 12px !important; }
  .basyra-comparison .cm-cell { padding: 11px 6px !important; }
  .basyra-comparison .cm-cell:first-child { padding-left: 4px !important; }
  .basyra-comparison .cm-feat { font-size: 13px !important; line-height: 1.35 !important; }
  .basyra-comparison .cm-hcell { padding: 0 2px 12px !important; }
  .basyra-comparison .cm-hcap { font-size: 8.5px !important; letter-spacing: 0 !important; overflow-wrap: anywhere; }
  .basyra-comparison .cm-mark { width: 22px !important; height: 22px !important; }
  .basyra-comparison .cm-btag { font-size: 9.5px !important; padding: 5px 9px !important; }
}

/* Security cards on tablets: two columns instead of four tall-and-thin or one wide-and-empty. */
@media (min-width: 600px) and (max-width: 1000px) {
  .b-nsec .b-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Hero on phones: the script pins the dashboard at a fixed share of the screen height, so a tall text block slid
   its buttons under the dashboard. A tighter title, a shorter lead and one button keep them clear of it. */
@media (max-width: 600px) {
  #basyra-hero .h-hero { font-size: clamp(24px, 7.2vw, 30px) !important; line-height: 1.12 !important; }
  #hero-sub { font-size: 15px !important; line-height: 1.5 !important; margin-top: 14px !important; }
  #hero-cta-ghost { display: none !important; }
  #hero-cta-primary { padding: 12px 20px !important; font-size: 14.5px !important; }
  #hero-trust-line { margin-top: 12px !important; font-size: 12.5px !important; }
}

/* Bento deal card on the smallest phones: the typed next step («Payshanba kuni qayta qoʼngʼiroq qilish») ran 17 px out. */
@media (max-width: 360px) {
  .basyra-bento .af-val { white-space: normal !important; overflow-wrap: anywhere; min-width: 0; }
}