/* Home · "Yantra tells you" (ba.js): the SaaS app at work. White / black / grey + brand orange; problem = burnt orange. */
.ba-sec { position: relative; padding-block: clamp(64px, 8vw, 110px); background: #fdf6ec; overflow: hidden; }
.ba-head { max-width: 780px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.ba-head h2 { margin: 12px 0 0; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -.035em; }
.ba-head p { margin: 14px 0 0; max-width: 600px; font-size: 17px; line-height: 1.6; color: var(--mute); }
.ba-cta { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.yb { margin: clamp(32px, 4vw, 52px) auto 0; max-width: 1200px; }
.yb-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: Inter, system-ui, sans-serif; }
.yb * { animation-play-state: paused; } .yb.play * { animation-play-state: running; }
.yb text { transition: fill .3s; }
/* window */
.yb-win { fill: #fff; stroke: #ece3d8; stroke-width: 1.5; filter: drop-shadow(0 36px 50px rgba(120,70,20,.16)); }
.yb-bar { fill: #faf7f3; } .yb-dt { fill: #e3ddd5; }
.yb-url { fill: #fff; stroke: #ece6de; } .yb-urlt { font-size: 10.5px; font-weight: 600; fill: #8a8a8a; text-anchor: middle; }
.yb-live { fill: #111; } .yb-ld { fill: #f7861e; animation: yb-bl 1.4s ease-in-out infinite; } .yb-lt { font-size: 10px; font-weight: 800; letter-spacing: .14em; fill: #fff; }
@keyframes yb-bl { 50% { opacity: .3; } }
.yb-side { fill: #faf7f3; }
.yb-mi rect { fill: transparent; transition: fill .3s; } .yb-mi circle { fill: #d4ccc2; transition: fill .3s; } .yb-mi text { font-size: 12.5px; font-weight: 600; fill: #6b6b6b; }
.yb-mi.on rect { fill: #fff; filter: drop-shadow(0 6px 10px rgba(0,0,0,.06)); } .yb-mi.on circle { fill: #f7861e; } .yb-mi.on text { fill: #111; font-weight: 800; }
.yb-modb { fill: #111; } .yb-modk { font-size: 8.5px; font-weight: 800; letter-spacing: .14em; fill: #ffb867; } .yb-modv { font-size: 10.6px; font-weight: 800; fill: #fff; }
/* KPIs */
.yb-kpi rect { fill: #faf7f3; stroke: #f0e9e1; } .yb-kk { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; fill: #8a8a8a; }
.yb-kv { font-size: 24px; font-weight: 800; letter-spacing: -.02em; fill: #111; font-variant-numeric: tabular-nums; }
.yb[data-b="2"] .yb-kpi[data-i="2"] .yb-kv, .yb[data-b="3"] .yb-kpi[data-i="2"] .yb-kv, .yb[data-b="4"] .yb-kpi[data-i="2"] .yb-kv { fill: #c2410c; }
.yb[data-b="6"] .yb-kpi[data-i="0"] .yb-kv { fill: #e56f06; }
/* tiles */
.yb-tb { fill: #fff; stroke: #ece6de; stroke-width: 1.2; transition: fill .35s, stroke .35s; }
.yb-ti * { fill: none; stroke: #6b6b6b; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.yb-tn { font-size: 13px; font-weight: 800; fill: #111; } .yb-ts { font-size: 11px; font-weight: 700; fill: #8a8a8a; }
.yb-tl { fill: #f4f1ec; }
.yb-tseg { fill: #f7861e; opacity: .85; } .yb-tseg.i { fill: #e3ddd5; opacity: 1; }
.yb-tdot { fill: #f7861e; } .yb-tring { fill: none; stroke: #f7861e; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.yb-tile.bad .yb-tb { fill: #fff4ed; stroke: #c2410c; stroke-width: 2; } .yb-tile.bad .yb-ts { fill: #c2410c; } .yb-tile.bad .yb-tdot { fill: #c2410c; }
.yb-tile.bad .yb-tring { stroke: #c2410c; animation: yb-ring 1.2s ease-out infinite; } .yb-tile.bad .yb-ti * { stroke: #c2410c; }
.yb-tile.bad .yb-tseg:nth-last-child(-n+5) { fill: #c2410c; opacity: .35; }
.yb-tile.ok .yb-tb { stroke: #f7861e; stroke-width: 2; } .yb-tile.ok .yb-ts { fill: #e56f06; } .yb-tile.ok .yb-tring { animation: yb-ring .9s ease-out 1; }
@keyframes yb-ring { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(3); } }
.yb-tile { transition: opacity .4s; } .yb:not([data-b="1"]) .yb-tile:not(.focus) { opacity: .55; }
/* insight card */
.yb-ins { opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .55s cubic-bezier(.16,1,.3,1); }
.yb:not([data-b="1"]):not([data-b="2"]) .yb-ins { opacity: 1; transform: none; }
.yb-ib { fill: #111; } .yb-ii { fill: #f7861e; } .yb-iis { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.yb-ik { font-size: 9.5px; font-weight: 800; letter-spacing: .16em; fill: #ffb867; } .yb-i1 { font-size: 15px; font-weight: 800; fill: #fff; } .yb-i2 { font-size: 12px; font-weight: 600; fill: #b5b5b5; }
.yb-ibtn { opacity: 0; transition: opacity .3s; } .yb[data-b="4"] .yb-ibtn, .yb[data-b="5"] .yb-ibtn, .yb[data-b="6"] .yb-ibtn { opacity: 1; }
.yb-ibtn rect { fill: #f7861e; } .yb-ibtn text { font-size: 11.5px; font-weight: 800; fill: #fff; text-anchor: middle; }
/* phone */
.yb-key { fill: #3a3a3c; } .yb-pf { fill: #1c1c1e; filter: drop-shadow(0 30px 40px rgba(0,0,0,.25)); } .yb-ps { fill: #f6f4f1; } .yb-isl { fill: #000; }
.yb-pt { font-size: 12px; font-weight: 800; fill: #111; } .yb-pa { font-size: 13px; font-weight: 800; fill: #111; } .yb-pas { font-size: 10.5px; fill: #8a8a8a; }
.yb-pl { stroke: #e7e1d9; } .yb-home { fill: #111; }
.yb-n, .yb-a, .yb-r { opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .55s cubic-bezier(.34,1.56,.64,1); }
.yb[data-b="4"] .yb-n, .yb[data-b="5"] .yb-n, .yb[data-b="6"] .yb-n { opacity: 1; transform: none; }
.yb[data-b="5"] .yb-a, .yb[data-b="6"] .yb-a { opacity: 1; transform: none; }
.yb[data-b="6"] .yb-r { opacity: 1; transform: none; }
.yb-nb { fill: #fff; filter: drop-shadow(0 10px 16px rgba(0,0,0,.10)); } .yb-nk { font-size: 11px; font-weight: 800; fill: #e56f06; } .yb-nt { font-size: 10px; fill: #8a8a8a; text-anchor: end; }
.yb-n1 { font-size: 12.5px; font-weight: 800; fill: #111; } .yb-n2 { font-size: 11px; fill: #8a8a8a; }
.yb-ab { fill: #111; } .yb-at { font-size: 12.5px; font-weight: 800; fill: #fff; text-anchor: end; }
.yb-rb { fill: #f7861e; filter: drop-shadow(0 16px 20px rgba(247,134,30,.35)); } .yb-rk { font-size: 9.5px; font-weight: 800; letter-spacing: .18em; fill: #fff3e6; text-anchor: middle; }
.yb-rv { font-size: 30px; font-weight: 800; letter-spacing: -.02em; fill: #fff; text-anchor: middle; } .yb-rl { font-size: 12px; font-weight: 700; fill: #fff3e6; text-anchor: middle; }
.yb-lk { fill: none; stroke: #f2d8bc; stroke-width: 2; stroke-dasharray: 3 5; }
.yb-lp { fill: #f7861e; opacity: 0; filter: drop-shadow(0 0 4px rgba(247,134,30,.9)); transition: opacity .3s; }
.yb[data-b="3"] .yb-lp, .yb[data-b="4"] .yb-lp { opacity: 1; } .yb[data-b="3"] .yb-lk, .yb[data-b="4"] .yb-lk { stroke: #f7861e; }
/* step rail */
.yb-rl0 { stroke: #e6ddd2; stroke-width: 2; } .yb-rl1 { stroke: #f7861e; stroke-width: 3; stroke-linecap: round; transition: x2 .5s cubic-bezier(.16,1,.3,1); }
.yb-step circle { fill: #fff; stroke: #d9cfc3; stroke-width: 2; transition: fill .3s, stroke .3s; }
.yb-step text { font-size: 12px; font-weight: 800; fill: #b0a79c; text-anchor: middle; }
.yb-step.on circle { fill: #111; stroke: #111; } .yb-step.on text { fill: #3a3a3a; }
.yb-step.now circle { fill: #f7861e; stroke: #fff; stroke-width: 3; filter: drop-shadow(0 0 6px rgba(247,134,30,.7)); } .yb-step.now text { fill: #e56f06; }
@media (max-width: 760px) { .yb { overflow-x: auto; margin-inline: -16px; padding: 0 16px; } .yb-svg { min-width: 820px; } }
@media (prefers-reduced-motion: reduce) { .yb * { animation: none !important; transition: none !important; } }