.br{--br-pink:#ff0066;--br-navy:#071c2d;--br-blue:#1967ff;--br-mint:#16b889;--br-amber:#f59e0b;--br-radius:22px;--br-shadow:0 26px 80px rgba(7,28,45,.10);isolation:isolate}
.br-hero{position:relative;padding:96px 0 82px;background:linear-gradient(135deg,#fff 0%,#fff7fb 45%,#f4f8ff 100%);overflow:hidden}
.br-hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(7,28,45,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(7,28,45,.035) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,#000,transparent 78%);pointer-events:none}
.br-hero:after{content:"";position:absolute;width:520px;height:520px;right:-180px;top:-180px;border-radius:50%;background:radial-gradient(circle,rgba(255,0,102,.19),rgba(25,103,255,.06) 45%,transparent 70%);filter:blur(4px);pointer-events:none}
.br-hero-grid{position:relative;z-index:1;grid-template-columns:minmax(0,1.02fr) minmax(410px,.98fr);gap:68px;align-items:start}.br h1{max-width:780px;font-size:clamp(3rem,5.25vw,5.45rem);line-height:.94}.br .lead{font-size:1.08rem;max-width:680px}
.br-kicker,.br-eyebrow{padding:7px 11px;border:1px solid rgba(255,0,102,.16);border-radius:999px;background:rgba(255,255,255,.72);backdrop-filter:blur(12px)}.br-kicker:before{width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 5px rgba(255,0,102,.10)}
.br-btn{border-radius:12px;min-height:52px;padding:13px 22px;box-shadow:0 8px 24px rgba(7,28,45,.05)}.br-btn.primary{box-shadow:0 16px 34px rgba(255,0,102,.24)}.br-btn:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(7,28,45,.11)}
.br-proof{gap:10px}.br-proof li{padding:8px 11px;border:1px solid rgba(7,28,45,.07);border-radius:9px;background:rgba(255,255,255,.7)}.br-dependency{box-shadow:0 10px 30px rgba(255,0,102,.05);backdrop-filter:blur(8px)}
.br-console{position:relative;margin-top:0;border-color:rgba(7,28,45,.08);border-radius:24px;box-shadow:0 35px 90px rgba(7,28,45,.16),0 2px 0 rgba(255,255,255,.9) inset;transform:perspective(1200px) rotateY(-2deg);transition:transform .35s ease,box-shadow .35s ease}.br-console:hover{transform:perspective(1200px) rotateY(0) translateY(-4px);box-shadow:0 42px 100px rgba(7,28,45,.19)}
.br-console:before{content:"";position:absolute;inset:-1px;border-radius:24px;padding:1px;background:linear-gradient(140deg,rgba(255,0,102,.48),rgba(25,103,255,.18),transparent 58%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.br-console-top{padding:16px 20px;background:linear-gradient(90deg,#fff,#fbfcff)}.br-console-body{padding:23px}.br-console-body>p{margin-bottom:17px}.br-row{position:relative;padding:13px 12px;border-color:rgba(7,28,45,.07);background:#fbfcfe;transition:.22s}.br-row:hover{border-color:rgba(255,0,102,.26);background:#fff;transform:translateX(3px)}
.br-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:0 0 17px}.br-metric{padding:12px;border:1px solid rgba(7,28,45,.07);border-radius:12px;background:linear-gradient(145deg,#fff,#f7f9fc)}.br-metric strong{display:block;color:var(--br-navy);font-size:1.18rem;letter-spacing:-.03em}.br-metric small{display:block;margin-top:3px;color:var(--muted);font-size:.63rem;text-transform:uppercase;letter-spacing:.05em}.br-metric.good strong{color:var(--br-mint)}
.br-progress{height:6px;margin:8px 0 18px;border-radius:99px;background:#edf1f5;overflow:hidden}.br-progress span{display:block;width:78%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--br-pink),#ff5b9c)}
.br-jump{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.88);backdrop-filter:blur(16px);box-shadow:0 10px 26px rgba(7,28,45,.04)}.br-jump nav{justify-content:center;padding:11px 0}.br-jump a{position:relative;padding:10px 14px}.br-jump a:after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px;background:var(--br-pink);transform:scaleX(0);transition:.2s}.br-jump a:hover:after{transform:scaleX(1)}
.br-section{position:relative;padding:94px 0}.br-section.soft{background:linear-gradient(180deg,#f7f9fc 0%,#fbfcfe 100%)}.br-head{margin-bottom:42px}.br-section h2{font-size:clamp(2.15rem,3.6vw,3.5rem);letter-spacing:-.045em}.br-head p{font-size:.96rem}
.br-flow{overflow:visible;border:0;background:transparent;gap:24px}.br-flow div{position:relative;min-height:178px;padding:21px 17px;border:1px solid rgba(7,28,45,.08);border-radius:16px;background:#fff;box-shadow:0 12px 35px rgba(7,28,45,.05);transition:.25s}.br-flow div:hover{transform:translateY(-5px);border-color:rgba(255,0,102,.25);box-shadow:0 22px 45px rgba(7,28,45,.09)}.br-flow div:not(:last-child):after{content:"→";position:absolute;z-index:3;right:-24px;top:24px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--br-navy);color:#fff;font-size:.72rem}.br-flow b{font-size:.94rem}
.br-grid,.br-controls{gap:16px}.br-card,.br-control,.br-panel{position:relative;border-color:rgba(7,28,45,.075);border-radius:18px;box-shadow:0 10px 32px rgba(7,28,45,.045);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}.br-card{min-height:205px;padding:25px}.br-card:after,.br-control:after{content:"";position:absolute;inset:auto 22px 0;height:3px;border-radius:5px 5px 0 0;background:linear-gradient(90deg,var(--br-pink),#ff78ad);transform:scaleX(0);transform-origin:left;transition:.25s}.br-card:hover,.br-control:hover,.br-panel:hover{transform:translateY(-5px);border-color:rgba(255,0,102,.2);box-shadow:0 24px 55px rgba(7,28,45,.09)}.br-card:hover:after,.br-control:hover:after{transform:scaleX(1)}
.br-card .num{height:32px;border-radius:9px}.br-card h3,.br-control h3{font-size:1.08rem}.br-card p,.br-control p{font-size:.85rem}.br-control{min-height:198px;padding:25px}.br-panel{padding:28px}.br-panel h3{font-size:1.25rem}
.br-split{gap:20px}.br-split .br-panel:first-child{background:linear-gradient(145deg,#fff,#fff8fb)}.br-split .br-panel:last-child{background:linear-gradient(145deg,#fff,#f5f9ff)}.br-list{gap:10px}.br-list li{padding-bottom:8px;border-bottom:1px solid rgba(7,28,45,.055)}.br-list li:last-child{border-bottom:0}
.br-api{gap:22px;align-items:stretch}.br-code{position:relative;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:linear-gradient(145deg,#071c2d,#102d44);box-shadow:0 28px 60px rgba(7,28,45,.18)}.br-code:before{content:"●  ●  ●";display:block;margin-bottom:18px;color:#ff4d8e;letter-spacing:5px;font-size:.68rem}.br-code pre{font-size:.78rem}
.br-cta{position:relative;padding:82px 0;background:radial-gradient(circle at 84% 8%,rgba(255,0,102,.31),transparent 32%),linear-gradient(125deg,#071c2d,#0d2a42 72%,#27112b);overflow:hidden}.br-cta:after{content:"";position:absolute;width:420px;height:420px;right:-160px;bottom:-300px;border:1px solid rgba(255,255,255,.12);border-radius:50%;box-shadow:0 0 0 50px rgba(255,255,255,.02),0 0 0 100px rgba(255,255,255,.015)}
@media(max-width:1180px){.br-hero-grid{grid-template-columns:1fr .92fr;gap:40px}.br h1{font-size:clamp(3rem,5.3vw,4.8rem)}}
@media(max-width:1020px){.br-hero{padding-top:70px}.br-hero-grid{grid-template-columns:1fr}.br-console{max-width:760px;margin-top:0;transform:none}.br-flow{grid-template-columns:repeat(3,1fr)}.br-flow div:nth-child(3):after{display:none}.br-jump nav{justify-content:flex-start}.br-card{min-height:0}}
@media(max-width:720px){.br{overflow:hidden}.br .container{width:calc(100% - 32px)}.br-hero{padding:52px 0 46px}.br h1{font-size:clamp(2.65rem,13vw,4rem);line-height:.95}.br .lead{font-size:1rem;line-height:1.65}.br-kicker,.br-eyebrow{font-size:.65rem;letter-spacing:.09em}.br-proof{display:grid;grid-template-columns:1fr}.br-proof li{width:100%}.br-console{border-radius:18px}.br-console:before{border-radius:18px}.br-console-body{padding:17px}.br-metrics{grid-template-columns:1fr 1fr}.br-metric:last-child{grid-column:1/-1}.br-jump{top:0}.br-jump nav{margin:0 -16px;padding:10px 16px;scrollbar-width:none}.br-section{padding:62px 0}.br-head{gap:17px;margin-bottom:28px}.br-section h2{font-size:2.25rem}.br-flow{grid-template-columns:1fr;gap:12px}.br-flow div{min-height:0;padding:20px}.br-flow div:not(:last-child):after{content:"↓";display:grid;right:18px;top:auto;bottom:-18px}.br-grid,.br-controls{grid-template-columns:1fr}.br-card,.br-control,.br-panel{padding:22px}.br-split,.br-api{grid-template-columns:1fr}.br-code{padding:20px;margin:0 -2px}.br-code pre{font-size:.68rem;overflow-x:auto;white-space:pre}.br-cta{padding:58px 0}.br-cta-grid{gap:22px}.br-cta .br-actions{width:100%}}
@media(max-width:390px){.br .container{width:calc(100% - 24px)}.br h1{font-size:2.55rem}.br-section h2{font-size:2rem}.br-row{padding:11px 9px}.br-row b{font-size:.8rem}.br-code pre{font-size:.62rem}.br-btn{width:100%}}
@media(prefers-reduced-motion:no-preference){.br-console{animation:br-enter .6s ease both}.br-card,.br-control,.br-flow div{animation:br-rise .55s ease both}@keyframes br-enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:perspective(1200px) rotateY(-2deg)}}@keyframes br-rise{from{opacity:.72;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}}
/* Responsive hardening v3.1 */
.br{width:100%;max-width:100%;overflow-x:clip}.br-hero-grid>*,.br-head>*,.br-grid>*,.br-controls>*,.br-split>*,.br-api>*,.br-cta-grid>*{min-width:0}.br img,.br svg,.br video,.br canvas{max-width:100%;height:auto}.br h1,.br h2,.br h3,.br p,.br li{max-width:100%}.br-code,.br-code pre{max-width:100%}.br-code pre{overflow-x:auto}.br-dependency{overflow-wrap:anywhere}.br-section[id]{scroll-margin-top:72px}
@media(max-width:1100px){.br .container{width:calc(100% - 48px)}.br-hero-grid{gap:34px}.br h1{font-size:clamp(2.85rem,5.5vw,4.35rem)}.br-section{padding:78px 0}}
@media(max-width:900px){.br .container{width:calc(100% - 40px)}.br-split{grid-template-columns:1fr}.br-split .br-panel{min-height:0}.br-head{gap:24px}.br-section h2{font-size:clamp(2rem,5vw,2.8rem)}.br-cta .br-actions{margin-top:10px}}
@media(max-width:720px){.br{overflow-x:clip}.br-flow{gap:32px}.br-flow div:not(:last-child):after{right:18px;bottom:-28px}.br-console{width:100%;max-width:100%}.br-api,.br-split{width:100%}.br-code{width:100%}.br-code pre{max-width:100%;overflow-x:auto}.br-dependency{width:100%}.br-cta-grid{width:100%}}
@media(max-width:560px){.br .container{width:calc(100% - 28px)}.br-hero{padding:42px 0 38px}.br h1{font-size:clamp(2.35rem,12vw,3.25rem)}.br-section{padding:52px 0}.br-section h2{font-size:clamp(1.85rem,9vw,2.25rem)}.br-console-top{gap:8px;flex-wrap:wrap}.br-console-top span{flex:1 1 180px}.br-metrics{grid-template-columns:1fr}.br-metric:last-child{grid-column:auto}.br-actions{display:grid;grid-template-columns:1fr;width:100%}.br-actions .br-btn{width:100%}.br-row{grid-template-columns:34px minmax(0,1fr)}.br-row em{grid-column:2}.br-proof{gap:8px}.br-jump nav{scroll-padding-inline:14px}.br-panel,.br-card,.br-control{border-radius:15px}}
@media(max-width:420px){.br .container{width:calc(100% - 22px)}.br h1{font-size:clamp(2.15rem,12vw,2.7rem)}.br-section h2{font-size:1.9rem}.br-console-body{padding:14px}.br-row{gap:8px;padding:10px 8px}.br-row i{width:30px;height:30px}.br-code{padding:16px}.br-code pre{font-size:.61rem}.br-dependency{padding:14px}.br-jump a{padding:9px 10px}}
/* Workflow responsive flow v3.2 */
@media(min-width:901px){.br-flow{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px;row-gap:32px}.br-flow div{min-height:176px}.br-flow div:nth-child(1){grid-column:1;grid-row:1}.br-flow div:nth-child(2){grid-column:2;grid-row:1}.br-flow div:nth-child(3){grid-column:3;grid-row:1}.br-flow div:nth-child(4){grid-column:3;grid-row:2}.br-flow div:nth-child(5){grid-column:2;grid-row:2}.br-flow div:nth-child(6){grid-column:1;grid-row:2}.br-flow div:nth-child(1):after,.br-flow div:nth-child(2):after{content:"→";display:grid;left:auto;right:-24px;top:24px;bottom:auto}.br-flow div:nth-child(3):after{content:"↓";display:grid;left:auto;right:18px;top:auto;bottom:-28px}.br-flow div:nth-child(4):after,.br-flow div:nth-child(5):after{content:"←";display:grid;left:-24px;right:auto;top:24px;bottom:auto}}
@media(min-width:721px) and (max-width:900px){.br-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.br-flow div{min-height:165px}.br-flow div:after{display:none!important}}