/* tokens.css */
/* ------------------------------------------------------------------
Bizora design tokens — the single source of truth.
Existing brand values are preserved exactly; the dark scale is new.
------------------------------------------------------------------ */
:root{
/* brand — unchanged from the original site */
--navy:#0B1F44;
--navy2:#132C5E;
--navy3:#1C3B7A;
--blue:#2563EB;
--violet:#8B5CF6;
--lav:#E0E7FF;
--bg:#F8FAFF;
--white:#fff;
--muted:#5A6B8C;
--line:#E4EAF6;
--grad:linear-gradient(135deg,#2563EB 0%,#8B5CF6 100%);
/* Same gradient, violet end 4% deeper, used only where white text sits on
top: white on #8B5CF6 measures 4.23:1, just under the 4.5:1 floor for
body-size text. Decorative gradient fills keep --grad unchanged. */
--grad-cta:linear-gradient(135deg,#2563EB 0%,#8558EC 100%);
--blue-ink:#1D4FD8; /* blue that clears AA on light blue tints */
/* dark immersive scale — new */
--midnight:#060B18;
--navy-deep:#081630;
--surface-d:#122444;
--surface-d2:#0D1C38;
--ink-d:#EAF0FB;
--muted-d:#93A6C7;
--line-d:rgba(255,255,255,.10);
--blue-lift:#6E9BFF;
--violet-lift:#B08CFF;
/* semantic */
--ok:#16A34A;
--warn:#F59E0B;
--down:#EF4444;
/* type scale */
--t-hero:clamp(2.9rem,7.4vw,6.2rem);
--t1:clamp(2.2rem,5.2vw,4rem);
--t2:clamp(1.7rem,3.4vw,2.7rem);
--t3:clamp(1.12rem,1.9vw,1.4rem);
--t-lead:clamp(1.05rem,1.6vw,1.24rem);
--t-eyebrow:.72rem;
/* layout */
--max:1180px;
--max-narrow:940px;
--pad:clamp(1.15rem,5vw,2.5rem);
--gap-sec:clamp(5rem,11vw,9.5rem);
/* elevation */
--sh:0 18px 44px -26px rgba(11,31,68,.32);
--sh-lg:0 40px 90px -46px rgba(11,31,68,.45);
--sh-d:0 40px 90px -50px rgba(0,0,0,.8);
/* motion */
--ease:cubic-bezier(.22,.61,.36,1);
--dur:.55s;
}
/* base.css */
/* ------------------------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
margin:0;
background:var(--bg);
color:var(--navy);
font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
font-size:16px;
line-height:1.62;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
font-feature-settings:"cv05" 1,"ss01" 1;
overflow-x:hidden;
}
img,picture,svg{max-width:100%}
img{height:auto;display:block}
h1,h2,h3,h4{
margin:0;
font-weight:700;
line-height:1.06;
letter-spacing:-.022em;
text-wrap:balance;
}
h1{font-size:var(--t-hero);letter-spacing:-.032em}
h2{font-size:var(--t1);letter-spacing:-.028em}
h3{font-size:var(--t3)}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.skip{
position:absolute;left:-9999px;top:0;z-index:999;
background:var(--navy);color:#fff;padding:12px 18px;border-radius:0 0 8px 0;
}
.skip:focus{left:0}
:focus-visible{
outline:2px solid var(--blue);
outline-offset:3px;
border-radius:4px;
}
/* ------------------------------------------------------- layout helpers */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.wrap--narrow{max-width:var(--max-narrow)}
.sec{padding-block:var(--gap-sec)}
.sec--dark{background:var(--navy-deep);color:var(--ink-d)}
.sec--midnight{background:var(--midnight);color:var(--ink-d)}
.sec--dark h1,.sec--dark h2,.sec--dark h3,
.sec--midnight h1,.sec--midnight h2,.sec--midnight h3{color:var(--ink-d)}
.eyebrow{
font-size:var(--t-eyebrow);
font-weight:600;
letter-spacing:.15em;
text-transform:uppercase;
color:var(--muted);
margin-bottom:20px;
}
.sec--dark .eyebrow,.sec--midnight .eyebrow{color:var(--muted-d)}
.eyebrow--accent{color:var(--blue)}
.sec--dark .eyebrow--accent,.sec--midnight .eyebrow--accent{color:var(--blue-lift)}
.lead{
font-size:var(--t-lead);
color:var(--muted);
max-width:60ch;
line-height:1.62;
}
.sec--dark .lead,.sec--midnight .lead{color:var(--muted-d)}
.grad-text{
background:var(--grad);
-webkit-background-clip:text;background-clip:text;
color:transparent;
}
/* ------------------------------------------------------------- buttons */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:9px;
padding:13px 24px;border-radius:999px;
font-size:.925rem;font-weight:600;letter-spacing:-.005em;
transition:transform .2s var(--ease),box-shadow .25s var(--ease),
background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
white-space:nowrap;
}
.btn--solid{background:var(--grad-cta);color:#fff;box-shadow:0 12px 30px -14px rgba(37,99,235,.7)}
.btn--solid:hover{transform:translateY(-2px);box-shadow:0 18px 40px -14px rgba(37,99,235,.8)}
.btn--ghost{border:1px solid var(--line);color:var(--navy);background:rgba(255,255,255,.7)}
.btn--ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn--lg{padding:16px 30px;font-size:1rem}
.sec--dark .btn--ghost,.sec--midnight .btn--ghost,
.foot .btn--ghost{border-color:var(--line-d);color:var(--ink-d);background:transparent}
.sec--dark .btn--ghost:hover,.sec--midnight .btn--ghost:hover{
border-color:var(--blue-lift);color:var(--blue-lift);background:rgba(110,155,255,.07)
}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
@media(prefers-reduced-motion:reduce){
.btn,.btn:hover{transition:none;transform:none}
}
/* Anchor targets must clear the sticky bar. */
.sec,[id]{scroll-margin-top:96px}
/* Visible to a screen reader, never to the eye. Used where an SVG carries
the picture and a list carries the meaning. */
.u-sr{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* components.css */
/* -------------------------------------------------------------- nav */
.nav{
position:sticky;top:0;z-index:100;
background:rgba(248,250,255,.82);
backdrop-filter:saturate(180%) blur(14px);
-webkit-backdrop-filter:saturate(180%) blur(14px);
border-bottom:1px solid transparent;
transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.nav[data-scrolled="true"]{border-bottom-color:var(--line);background:rgba(248,250,255,.94)}
/* The bar stays light on every page, including over dark heroes. It used
to invert to navy over dark sections; that was a deliberate choice and
the wrong one — the light bar is the brand. */
.nav__in{
width:100%;max-width:var(--max);margin-inline:auto;padding:14px var(--pad);
display:flex;align-items:center;gap:28px;
}
.nav__brand{flex:0 0 auto;display:block;position:relative}
.nav__brand img{width:160px;height:auto} /* OmniBizora lockup is 3.8:1 */
/* The reversed lockup stays in the markup but is never shown now that the
bar no longer inverts. Cheap to keep, and it is what a future dark nav
would need again. */
.nav__logo--dark{position:absolute;inset:0;opacity:0}
.nav__links{display:flex;gap:26px;margin-left:8px}
.nav__links a{
font-size:.92rem;font-weight:500;color:var(--muted);
padding:6px 0;position:relative;transition:color .22s var(--ease);
}
.nav__links a::after{
content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
background:var(--grad);transition:right .28s var(--ease);
}
.nav__links a:hover{color:var(--navy)}
.nav__links a:hover::after{right:0}
.nav__act{display:flex;gap:10px;margin-left:auto}
.nav__act .btn{padding:10px 20px;font-size:.88rem}
.nav__toggle{display:none;flex-direction:column;gap:5px;margin-left:auto;padding:10px}
.nav__toggle span{display:block;width:21px;height:1.8px;background:var(--navy);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.nav__toggle[aria-expanded="true"] span:first-child{transform:translateY(3.4px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.4px) rotate(-45deg)}
.nav__drawer{
border-top:1px solid var(--line);
padding:14px var(--pad) 22px;
display:flex;flex-direction:column;gap:2px;
background:rgba(248,250,255,.98);
}
/* The author display:flex above beats the browser's UA rule for [hidden],
so without this the drawer sits permanently open at phone width and the
toggle button — which works by setting .hidden — appears to do nothing. */
.nav__drawer[hidden]{display:none!important}
.nav__drawer a{padding:13px 0;font-size:1.02rem;font-weight:600;border-bottom:1px solid var(--line)}
.nav__drawer-act{display:flex;gap:10px;margin-top:16px}
.nav__drawer-act .btn{flex:1}
@media(max-width:940px){
.nav__links,.nav__act{display:none}
.nav__toggle{display:flex}
}
@media(min-width:941px){
.nav__drawer{display:none!important}
}
/* ------------------------------------------------------------- footer */
.foot{background:var(--midnight);color:var(--ink-d);padding-block:clamp(3.5rem,7vw,5.5rem) 2.5rem}
.foot__in{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.foot__id img{width:230px}
.foot__legal{margin-top:14px;font-size:.86rem;color:var(--muted-d)}
.foot__cols{
display:grid;grid-template-columns:repeat(4,1fr);gap:32px;
margin-top:52px;padding-top:44px;border-top:1px solid var(--line-d);
}
.foot__cols h3{
font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--muted-d);margin-bottom:16px;font-weight:600;
}
.foot__cols a{
display:block;padding:6px 0;font-size:.92rem;color:var(--ink-d);opacity:.82;
transition:opacity .2s var(--ease),color .2s var(--ease);
}
.foot__cols a:hover{opacity:1;color:var(--blue-lift)}
.foot__product{
margin-top:52px;padding-top:36px;border-top:1px solid var(--line-d);
}
.foot__product img{width:208px}
.foot__product p{margin-top:12px;font-size:.86rem;color:var(--muted-d)}
.foot__base{
margin-top:40px;padding-top:22px;border-top:1px solid var(--line-d);
font-size:.8rem;color:var(--muted-d);
}
@media(max-width:820px){.foot__cols{grid-template-columns:repeat(2,1fr);gap:28px}}
@media(max-width:460px){.foot__cols{grid-template-columns:1fr}}
/* ----------------------------------------------------- metric tile */
.tile{
background:var(--white);border:1px solid var(--line);border-radius:14px;
padding:18px 20px;box-shadow:var(--sh);
}
.sec--dark .tile,.sec--midnight .tile{
background:var(--surface-d2);border-color:var(--line-d);box-shadow:var(--sh-d);
}
.tile__k{
font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;
color:var(--muted);font-weight:600;
}
.sec--dark .tile__k,.sec--midnight .tile__k{color:var(--muted-d)}
.tile__v{
font-size:clamp(1.25rem,2.2vw,1.6rem);font-weight:700;letter-spacing:-.02em;
margin-top:6px;font-variant-numeric:tabular-nums;
}
.tile__d{font-size:.78rem;margin-top:4px;color:var(--muted)}
.sec--dark .tile__d,.sec--midnight .tile__d{color:var(--muted-d)}
.tile__d.up{color:var(--ok)}
.tile__d.down{color:var(--down)}
/* demonstration-data marker — required by the content integrity rules */
.demo-note{
display:inline-flex;align-items:center;gap:7px;
font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 12px;
}
.sec--dark .demo-note,.sec--midnight .demo-note{color:var(--muted-d);border-color:var(--line-d)}
.demo-note::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--warn)}
/* Wide tables scroll inside their own container so the page never does. */
.tscroll{
overflow-x:auto;-webkit-overflow-scrolling:touch;
border:1px solid var(--line);border-radius:14px;background:var(--white);
}
.sec--dark .tscroll,.sec--midnight .tscroll{
border-color:var(--line-d);background:var(--surface-d2);
}
.tscroll table{border-collapse:collapse;width:100%}
/* ==================================================================
Page transition.
The overlay is hidden in markup and only ever shown by JS, so if the
script fails or is blocked, links navigate normally and nothing covers
the page.
================================================================== */
.pt{
position:fixed;inset:0;z-index:9999;
display:flex;align-items:center;justify-content:center;
background:var(--midnight);
opacity:0;pointer-events:none;
transition:opacity .34s var(--ease);
}
/* Author styles override the browser's [hidden] rule, so say it again:
with JS off this element must not exist in the layout at all. */
.pt[hidden]{display:none!important}
.pt[data-state="out"]{opacity:1;pointer-events:auto} /* leaving */
.pt[data-state="in"]{opacity:0;pointer-events:none} /* arriving */
.pt__mark{
width:clamp(56px,7vw,84px);height:auto;
filter:drop-shadow(0 18px 44px rgba(37,99,235,.55));
transform:scale(.82);opacity:0;
transition:transform .34s var(--ease),opacity .28s var(--ease);
}
.pt[data-state="out"] .pt__mark{transform:scale(1);opacity:1}
.pt[data-state="in"] .pt__mark{transform:scale(1.1);opacity:0}
/* ring that expands out of the mark while the next page loads */
.pt__ring{
position:absolute;width:clamp(56px,7vw,84px);aspect-ratio:1;border-radius:50%;
border:1.5px solid rgba(110,155,255,.7);opacity:0;
}
.pt[data-state="out"] .pt__ring{animation:ptRing 1.1s var(--ease) infinite}
@keyframes ptRing{
0%{transform:scale(1);opacity:.7}
100%{transform:scale(2.6);opacity:0}
}
/* the page itself eases away rather than blinking out */
main,.foot{transition:opacity .28s var(--ease),transform .28s var(--ease)}
html.is-leaving main,html.is-leaving .foot{opacity:0;transform:translateY(-10px)}
/* arriving */
@keyframes pageIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
html.is-arriving main{animation:pageIn .46s var(--ease)}
/* ------------------------------------------------------- nav logo life */
.nav__brand{overflow:hidden;border-radius:6px}
.nav__brand::after{
content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);
transform:translateX(-120%);
}
.nav__brand:hover::after{animation:sweep .75s var(--ease) 1}
.nav__brand picture{display:block}
.nav__brand{transition:transform .35s var(--ease)}
.nav__brand:hover{transform:scale(1.035)}
/* the mark breathes once when the page first settles */
@keyframes markSettle{
0%{transform:scale(.92) translateY(4px)}
60%{transform:scale(1.02) translateY(0)}
100%{transform:scale(1) translateY(0)}
}
.reveal-armed .nav__brand{animation:markSettle .7s var(--ease) both}
@media(prefers-reduced-motion:reduce){
.pt,.pt__mark,.pt__ring{transition:none;animation:none}
main,.foot{transition:none}
html.is-leaving main,html.is-leaving .foot{opacity:1;transform:none}
html.is-arriving main{animation:none}
.nav__brand:hover::after{animation:none}
.nav__brand:hover,.reveal-armed .nav__brand{transform:none;animation:none}
}
/* =================================================================
Live dashboard mock.
Reads as running software rather than a screenshot: a live dot, one
figure that ticks, and a row that slides into the table. Every one of
those is driven by g-pipe.js and simply never starts if JS is absent
or the visitor prefers reduced motion — the panel is still complete.
================================================================= */
.ldash{
background:linear-gradient(170deg,rgba(13,28,56,.94),rgba(6,11,24,.97));
border:1px solid rgba(255,255,255,.12);border-radius:14px;
padding:14px 15px 15px;box-shadow:0 30px 70px -40px rgba(0,0,0,.95);
width:100%;
}
.ldash__bar{display:flex;align-items:center;gap:9px;margin-bottom:13px}
.ldash__name{
font-size:.7rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
color:var(--ink-d);
}
.ldash__live{
margin-left:auto;display:inline-flex;align-items:center;gap:6px;
font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:var(--muted-d);
}
.ldash__live i{
width:6px;height:6px;border-radius:50%;background:var(--ok,#34D399);display:block;
}
.reveal-armed .ldash__live i{animation:blinkDot 2s ease-in-out infinite}
.ldash__kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.ldash__k{
background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
border-radius:9px;padding:9px 10px;
}
.ldash__k b{
display:block;font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;
color:var(--muted-d);font-weight:700;
}
.ldash__k span{
display:block;margin-top:4px;font-size:.98rem;font-weight:700;
color:var(--ink-d);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.ldash__k--tick span{transition:color .3s var(--ease)}
.ldash__k--tick.is-bump span{color:var(--blue-lift)}
.ldash__chart{display:flex;align-items:flex-end;gap:6px;height:52px;margin-bottom:12px}
.ldash__chart i{
flex:1;border-radius:3px 3px 0 0;background:var(--grad);
transform-origin:bottom;display:block;
}
.reveal-armed .ldash__chart i{animation:growBar .6s var(--ease) both}
.ldash__rows{display:flex;flex-direction:column;gap:5px}
.ldash__r{
display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
padding:6px 8px;border-radius:7px;background:rgba(255,255,255,.04);
font-size:.7rem;color:var(--muted-d);
}
.ldash__r b{color:var(--ink-d);font-weight:600;font-variant-numeric:tabular-nums}
.ldash__r--new{animation:rowIn .5s var(--ease) both;background:rgba(110,155,255,.14)}
@media(max-width:420px){
.ldash__kpis{grid-template-columns:repeat(2,1fr)}
.ldash__k:last-child{display:none}
}
/* sections.css */
.sr-only{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* ------------------------------------------------------------ 01 hero */
.hero{padding-top:clamp(3.5rem,8vw,6.5rem);padding-bottom:0}
.hero__h{max-width:16ch}
.hero__lead{margin-top:28px;max-width:56ch}
.hero .btn-row{margin-top:36px}
.hero__vis-wrap{margin-top:clamp(3rem,7vw,5.5rem);padding-bottom:var(--gap-sec)}
.hero__vis svg{width:100%;height:auto;display:block;overflow:visible}
.hv-nodes rect{fill:var(--white);stroke:var(--line);stroke-width:1.2}
.hv-nodes text{
font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:.09em;
fill:var(--muted);text-anchor:middle;dominant-baseline:middle;
}
.hv-hub__t{
font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.18em;fill:var(--navy);
}
.hero__vis-cap{
margin-top:22px;text-align:center;font-size:.85rem;color:var(--muted);
}
/* --------------------------------------------------------- 02 problem */
.problem__turn{
font-size:var(--t1);font-weight:700;line-height:1.06;letter-spacing:-.028em;
margin-top:14px;color:var(--muted);max-width:18ch;
}
.problem__grid{
display:grid;gap:14px;margin-top:clamp(2.5rem,5vw,4rem);
grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
}
.problem__foot{
margin-top:clamp(2.5rem,5vw,3.5rem);
display:flex;flex-wrap:wrap;gap:20px;align-items:end;justify-content:space-between;
}
.problem__foot .lead strong{color:var(--navy);font-weight:600}
/* ------------------------------------------------------ 03 philosophy */
.philosophy__b{margin-top:16px}
.philosophy__p{margin-top:34px}
/* ---------------------------------------------------------- 04 method */
.method__list{
list-style:none;margin:clamp(2.5rem,5vw,4rem) 0 0;padding:0;
border-top:1px solid var(--line);
}
.method__item{
display:grid;grid-template-columns:78px 1fr;gap:20px;align-items:start;
padding:clamp(22px,3.2vw,34px) 0;border-bottom:1px solid var(--line);
transition:background-color .3s var(--ease);
}
.method__item:hover{background:rgba(224,231,255,.28)}
.method__n{
font-size:.78rem;font-weight:700;letter-spacing:.1em;
color:var(--blue);padding-top:5px;font-variant-numeric:tabular-nums;
}
.method__item h3{margin-bottom:8px}
.method__item p{color:var(--muted);max-width:58ch}
@media(max-width:560px){
.method__item{grid-template-columns:52px 1fr;gap:14px}
}
/* ----------------------------------------------------- 05 capabilities */
.caps__head{
display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:end;
}
.caps__groups{
display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
margin-top:clamp(2.5rem,5vw,4rem);
background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;
}
.caps__group{background:var(--bg);padding:26px 24px 30px}
.caps__group h3{
font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--blue);margin-bottom:18px;font-weight:700;
}
.caps__group ul{list-style:none;margin:0;padding:0}
.caps__group li{
padding:9px 0;font-size:.95rem;font-weight:500;color:var(--navy);
border-bottom:1px solid var(--line);
}
.caps__group li:last-child{border-bottom:0}
@media(max-width:900px){
.caps__head{grid-template-columns:1fr;align-items:start}
.caps__groups{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
.caps__groups{grid-template-columns:1fr}
}
/* ------------------------------------------------------ 06 transition
The brand hierarchy: OmniBizora (company) → Bizora (brand) → Bizora ONE
(application). Three stops over one pinned screen.
The motion is meant to feel expensive rather than busy: long expo-out
easing, letters that rise out of a soft blur one at a time, a single ring
of light from the B mark at each change, and a background glow that
drifts from blue to violet as you go down the hierarchy. Nothing bounces,
nothing spins, and the supplied mark is never scaled or recoloured — the
ring and the glow are separate layers behind it. */
.transition{position:relative;--lux:cubic-bezier(.16,1,.3,1)}
/* Base = the stacked hierarchy, readable with no script at all. The pinned,
animated version is switched on by c-transition.js adding .lux-on to the
section, so a failed or blocked script can never leave three layers
piled on top of each other. */
.transition__track{height:0}
.transition__sticky{
position:relative;padding-block:var(--gap-sec);
display:flex;align-items:center;justify-content:center;
overflow:hidden;isolation:isolate;
}
.lux-on .transition__track{height:300vh}
.lux-on .transition__sticky{position:sticky;top:0;height:100vh;padding-block:0}
/* the glow — one soft light per level, cross-faded slowly */
.transition__aura{position:absolute;inset:0;z-index:-1;pointer-events:none;display:none}
.lux-on .transition__aura{display:block}
.transition__aura span{
position:absolute;left:50%;top:44%;width:min(1100px,140vw);aspect-ratio:1.6;
transform:translate(-50%,-50%);opacity:0;transition:opacity 1.6s var(--lux);
filter:blur(10px);
}
.transition__aura [data-a="group"] {background:radial-gradient(closest-side,rgba(14,165,233,.20),transparent 72%)}
.transition__aura [data-a="brand"] {background:radial-gradient(closest-side,rgba(37,99,235,.22),transparent 72%)}
.transition__aura [data-a="product"]{background:radial-gradient(closest-side,rgba(139,92,246,.22),transparent 72%)}
.transition[data-phase="group"] .transition__aura [data-a="group"],
.transition[data-phase="brand"] .transition__aura [data-a="brand"],
.transition[data-phase="product"] .transition__aura [data-a="product"]{opacity:1}
.transition__stage{text-align:center;position:relative}
/* the step rail: where you are in the hierarchy, with a hairline that fills
continuously with the scroll rather than jumping */
.transition__steps{
list-style:none;margin:0 auto clamp(2rem,5vh,3.2rem);padding:0;
display:flex;justify-content:center;gap:clamp(22px,6vw,64px);position:relative;
font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-d);
width:max-content;max-width:100%;display:none;
}
.lux-on .transition__steps{display:flex}
.transition__steps::before,.transition__steps::after{
content:"";position:absolute;left:0;right:0;bottom:-12px;height:1px;
background:rgba(148,163,184,.18);
}
.transition__steps::after{
background:linear-gradient(90deg,#38BDF8,#6E9BFF,#B08CFF);
transform-origin:left;transform:scaleX(var(--p,0));
}
.transition__steps li{opacity:.4;transition:opacity .9s var(--lux),color .9s var(--lux)}
.transition[data-phase="group"] [data-step="group"],
.transition[data-phase="brand"] [data-step="brand"],
.transition[data-phase="product"] [data-step="product"]{opacity:1;color:var(--ink-d)}
/* the mark, and the ring of light it sends out at each change */
.transition__mark{display:flex;justify-content:center;position:relative}
.transition__mark img{
width:clamp(74px,11vw,116px);height:auto;position:relative;z-index:1;
filter:drop-shadow(0 22px 48px rgba(37,99,235,.34));
animation:markBreathe 6s ease-in-out infinite;
}
@keyframes markBreathe{
0%,100%{filter:drop-shadow(0 22px 48px rgba(37,99,235,.30))}
50% {filter:drop-shadow(0 22px 64px rgba(139,92,246,.46))}
}
.transition__mark::before{
content:"";position:absolute;left:50%;top:50%;
width:clamp(74px,11vw,116px);aspect-ratio:1;border-radius:50%;
border:1px solid rgba(176,140,255,.55);
transform:translate(-50%,-50%) scale(1);opacity:0;pointer-events:none;
}
.transition__mark.is-ping::before{animation:markRing 1.6s var(--lux) both}
@keyframes markRing{
0% {opacity:.7;transform:translate(-50%,-50%) scale(.9)}
100%{opacity:0; transform:translate(-50%,-50%) scale(2.6)}
}
.transition__words{margin-top:30px;display:grid;gap:18px;justify-items:center}
.transition__arrow{font-size:1.4rem;color:var(--muted-d);opacity:.6;line-height:1}
.transition__layer{
display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:12px;
}
.lux-on .transition__words{display:block;position:relative;min-height:clamp(230px,30vw,290px)}
.lux-on .transition__arrow{display:none}
.lux-on .transition__layer{position:absolute;inset:0;pointer-events:none}
.lux-on .transition__layer.is-active{pointer-events:auto}
/* Set as "OmniBizora", "Bizora" and "Bizora ONE", not in capitals — the
name is a name. Negative tracking suits large mixed-case display type. */
.transition__name{
font-size:clamp(2rem,5.6vw,4.2rem);font-weight:800;
letter-spacing:-.022em;line-height:1.05;color:var(--ink-d);
padding-bottom:.08em;
}
.transition__one{
background:linear-gradient(135deg,#6E9BFF 0%,#B08CFF 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
/* Omni in the logo's bright blue, Bizora in white — the same split the
OmniBizora lockup makes. */
.transition__omni{
background:linear-gradient(135deg,#38BDF8 0%,#2563EB 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.transition__tag{font-size:clamp(.88rem,1.7vw,1.1rem);color:var(--muted-d)}
.transition__role{
margin-top:6px;font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;
color:#B9C6E4;
}
.transition__role::before,.transition__role::after{
content:"";display:inline-block;width:22px;height:1px;vertical-align:middle;
background:rgba(185,198,228,.45);margin:0 12px;
}
/* OMNI, spelled out */
.transition__acr{
display:flex;justify-content:center;gap:clamp(14px,3vw,34px);
margin:clamp(14px,2.4vw,22px) 0 0;flex-wrap:wrap;
}
.transition__acr div{display:flex;align-items:baseline;gap:8px}
.transition__acr dt{
font-size:clamp(1.1rem,2vw,1.4rem);font-weight:800;
background:linear-gradient(135deg,#38BDF8,#6E9BFF);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.transition__acr dd{margin:0;font-size:.86rem;color:var(--muted-d);letter-spacing:.02em}
@media(max-width:560px){
.transition__acr{display:grid;grid-template-columns:auto auto;justify-content:center;gap:10px 26px}
.transition__acr div{justify-content:flex-start}
.transition__role::before,.transition__role::after{width:12px;margin:0 8px}
}
.transition__dna{
margin-top:clamp(1.6rem,4vh,3rem);
font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-d);opacity:.55;
}
/* ---- the choreography, only once the script has taken over (.lux-on) ---- */
.lux-on .transition__ch{
display:inline-block;white-space:pre;
opacity:0;filter:blur(10px);transform:translateY(.42em);
transition:opacity .75s var(--lux),filter .75s var(--lux),transform .75s var(--lux);
transition-delay:calc(var(--i) * 18ms);
}
.lux-on .transition__layer .transition__tag,
.lux-on .transition__layer .transition__role,
.lux-on .transition__acr div{
opacity:0;filter:blur(6px);transform:translateY(8px);
transition:opacity .6s var(--lux),filter .6s var(--lux),transform .6s var(--lux);
}
/* entering: long, staggered, settling */
.lux-on .transition__layer.is-active .transition__ch{
opacity:1;filter:blur(0);transform:none;
transition-duration:1.25s;transition-delay:calc(120ms + var(--i) * 42ms);
}
.lux-on .transition__layer.is-active .transition__tag{
opacity:1;filter:none;transform:none;transition-duration:1.1s;transition-delay:.55s;
}
.lux-on .transition__layer.is-active .transition__role{
opacity:1;filter:none;transform:none;transition-duration:1.1s;transition-delay:.75s;
}
.lux-on .transition__layer.is-active .transition__acr div{
opacity:1;filter:none;transform:none;transition-duration:1.1s;
transition-delay:calc(.95s + var(--i) * 140ms);
}
.lux-on .transition__dna{opacity:0;transition:opacity 1.4s var(--lux) .4s}
.transition.lux-on[data-phase="product"] .transition__dna{opacity:.55}
/* Reduced motion: the script never adds .lux-on, so the stacked base shows.
Only the breathing glow on the mark needs stopping. */
@media(prefers-reduced-motion:reduce){.transition__mark img{animation:none}}
/* ------------------------------------------------------ 07 introducing */
.intro__in{text-align:center}
.intro__logo{display:block;margin:0 auto}
.intro__logo img{width:min(360px,78%);margin-inline:auto}
.intro__attrib{margin-top:14px;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-d)}
.intro__h{margin-top:clamp(2rem,4vw,3rem)}
.intro__lead{margin:26px auto 0;text-align:center}
.intro__cta{margin-top:34px;justify-content:center}
/* -------------------------------------------------- 08 product / dash */
.dash{
margin-top:clamp(2.5rem,5vw,4rem);
border:1px solid var(--line-d);border-radius:16px;overflow:hidden;
background:var(--surface-d2);box-shadow:var(--sh-d);
}
.dash__bar{
display:flex;align-items:center;gap:7px;padding:13px 18px;
background:rgba(255,255,255,.04);border-bottom:1px solid var(--line-d);
}
.dash__dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
.dash__title{
margin-left:12px;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-d);
}
.dash__body{display:grid;grid-template-columns:1.35fr .9fr;gap:20px;padding:20px}
.dash__kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-content:start}
.dash__insight{
background:var(--midnight);border:1px solid var(--line-d);border-radius:13px;padding:20px;
}
.dash__flag{
display:inline-block;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
color:var(--warn);border:1px solid rgba(245,158,11,.4);border-radius:999px;padding:4px 10px;
}
.dash__claim{margin-top:14px;font-size:1.22rem;font-weight:700;letter-spacing:-.02em;line-height:1.24}
.dash__sub{margin-top:12px;font-size:.84rem;color:var(--muted-d)}
.dash__causes{list-style:none;margin:12px 0 0;padding:0}
.dash__causes li{
display:flex;justify-content:space-between;gap:14px;align-items:baseline;
padding:10px 0;border-bottom:1px solid var(--line-d);font-size:.88rem;
}
.dash__causes li:last-child{border-bottom:0}
.dash__causes b{font-variant-numeric:tabular-nums;font-weight:700}
.dash__causes .down,.ask__facts .down{color:#FF8FA0}
.dash__note{margin-top:14px;font-size:.76rem;color:var(--muted-d);opacity:.8}
.product__demo{margin-top:20px}
@media(max-width:860px){
.dash__body{grid-template-columns:1fr}
.dash__kpis{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:460px){.dash__kpis{grid-template-columns:1fr}}
/* ------------------------------------------------------------- 09 ask */
.ask__lead{margin-top:22px}
.ask__panel{
margin-top:clamp(2.2rem,4.5vw,3.4rem);
border:1px solid var(--line-d);border-radius:16px;background:var(--surface-d2);padding:clamp(18px,3vw,28px);
}
.ask__q{display:flex;gap:12px;align-items:center}
.ask__caret{width:3px;height:26px;border-radius:2px;background:var(--grad);flex:0 0 auto}
.ask__q p{font-size:clamp(1.12rem,2.2vw,1.5rem);font-weight:600;letter-spacing:-.018em}
.ask__a{margin-top:22px;border-top:1px solid var(--line-d);padding-top:22px}
.ask__a-head{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--blue-lift);font-weight:700}
.ask__chart{margin-top:16px;overflow-x:auto}
.ask__chart svg{width:100%;min-width:400px;height:auto;display:block}
.ask-grid line{stroke:var(--line-d);stroke-width:1}
.ask-lbl-y text{font-size:10px;fill:var(--muted-d);text-anchor:end;font-family:inherit}
.ask-lbl-x text{font-size:10px;fill:var(--muted-d);text-anchor:middle;letter-spacing:.1em;font-family:inherit}
.ask-val text{font-size:11px;fill:var(--ink-d);text-anchor:middle;font-weight:700;font-family:inherit}
.ask-val text.is-low{fill:#FF8FA0}
.ask-bars rect{fill:#3E6ED6}
.ask-bars rect.is-low{fill:#FF8FA0}
.ask__facts{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:1px;background:var(--line-d);border-radius:10px;overflow:hidden}
.ask__facts li{
display:flex;justify-content:space-between;gap:14px;align-items:baseline;
padding:12px 16px;background:var(--surface-d2);font-size:.9rem;
}
.ask__facts b{font-variant-numeric:tabular-nums}
.ask__more{margin-top:26px;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-d);font-weight:600}
.ask__chips{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.ask__chips li{
border:1px solid var(--line-d);border-radius:999px;padding:8px 15px;
font-size:.85rem;color:var(--muted-d);
}
/* ----------------------------------------------------------- 10 tally */
.tally__lead{margin-top:22px}
.flow{
margin-top:clamp(2.5rem,5vw,3.8rem);
display:flex;align-items:stretch;gap:12px;flex-wrap:wrap;
}
.flow__step{
flex:1 1 150px;background:var(--white);border:1px solid var(--line);border-radius:13px;
padding:18px 20px;box-shadow:var(--sh);
}
.flow__step--mid{border-color:rgba(37,99,235,.28)}
.flow__k{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.flow__v{margin-top:6px;font-size:1.05rem;font-weight:700;letter-spacing:-.018em}
.flow__arrow{
flex:0 0 22px;align-self:center;height:1.5px;background:var(--grad);border-radius:2px;position:relative;
}
.flow__arrow::after{
content:"";position:absolute;right:-1px;top:-3px;
border-left:6px solid var(--violet);border-top:4px solid transparent;border-bottom:4px solid transparent;
}
.flow__out{
flex:1 1 200px;display:flex;flex-wrap:wrap;gap:7px;align-content:center;
}
.flow__out span{
border:1px solid var(--line);border-radius:999px;padding:7px 13px;
font-size:.82rem;font-weight:600;color:var(--navy);background:var(--white);
}
.tally__note{
margin-top:26px;font-size:.88rem;color:var(--muted);
border-left:2px solid var(--blue);padding-left:14px;
}
@media(max-width:760px){
.flow{flex-direction:column}
.flow__arrow{width:1.5px;height:18px;align-self:center;flex:0 0 18px}
.flow__arrow::after{right:-3.5px;top:auto;bottom:-1px;
border-top:6px solid var(--violet);border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:0}
}
/* ------------------------------------------------------- 11 ecosystem
The ring itself is the .eco2 block further down, shared with nothing
else now — it used to be drawn on the Solutions page. What lives here
is only the Outcomes row that sits beneath it: the ring shows what
feeds in, and this shows what comes back out. */
.eco2__lab{
font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
color:var(--muted);font-weight:700;margin-bottom:14px;
}
.eco2__out{
margin-top:clamp(1.4rem,3vw,2.4rem);
display:flex;flex-direction:column;align-items:center;
}
.eco2__out ul{
list-style:none;margin:0;padding:0;
display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
}
.eco2__out li{
border:1px solid rgba(37,99,235,.3);background:var(--white);border-radius:999px;
padding:8px 15px;font-size:.84rem;font-weight:600;color:var(--blue);
}
/* ----------------------------------------------------------- 12 field */
.field__lead{margin-top:22px}
.field__grid{
margin-top:clamp(2.5rem,5vw,3.6rem);
display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(22px,4vw,44px);align-items:start;
}
.field__map svg{width:100%;height:auto;display:block;border-radius:14px}
.fm-bg{fill:#0C1730;stroke:rgba(255,255,255,.09)}
.fm-roads path{stroke:rgba(255,255,255,.07);stroke-width:8;fill:none;stroke-linecap:round}
.fm-zone circle{fill:rgba(37,99,235,.11);stroke:rgba(110,155,255,.45);stroke-width:1.2;stroke-dasharray:5 4}
.fm-dealer circle{r:4.5;fill:#B08CFF}
.fm-exec circle{fill:#6E9BFF;stroke:#0C1730;stroke-width:2.5}
.field__legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px}
.lg{font-size:.78rem;color:var(--muted-d);display:inline-flex;align-items:center;gap:7px}
.lg::before{content:"";width:9px;height:9px;border-radius:50%}
.lg--exec::before{background:#6E9BFF}
.lg--dealer::before{background:#B08CFF}
.lg--zone::before{background:transparent;border:1.2px dashed rgba(110,155,255,.7)}
.field__caps{list-style:none;margin:0;padding:0}
.field__caps li{padding:15px 0;border-bottom:1px solid var(--line-d)}
.field__caps li:last-child{border-bottom:0}
.field__caps b{display:block;font-size:1rem;font-weight:600;letter-spacing:-.01em}
.field__caps span{display:block;margin-top:4px;font-size:.88rem;color:var(--muted-d)}
@media(max-width:820px){.field__grid{grid-template-columns:1fr}}
/* -------------------------------------------------------- 13 whatsapp */
.whats__grid{
margin-top:clamp(2.5rem,5vw,3.6rem);
display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,56px);align-items:center;
}
.phone{display:flex;justify-content:center}
.phone__scr{
width:100%;max-width:310px;border:1px solid var(--line);border-radius:22px;overflow:hidden;
background:#EFE7DE;box-shadow:var(--sh-lg);
}
.phone__top{
display:flex;align-items:center;gap:10px;padding:13px 16px;
background:#0B1F44;color:#fff;font-size:.88rem;font-weight:600;
}
.phone__av{width:24px;height:24px;border-radius:50%;background:var(--grad);flex:0 0 auto}
.phone__msgs{padding:16px 14px;display:flex;flex-direction:column;gap:9px}
.msg{max-width:84%;padding:9px 13px;border-radius:13px;font-size:.84rem;line-height:1.5}
.msg--in{align-self:flex-end;background:#D6F5C8;border-bottom-right-radius:4px}
.msg--out{align-self:flex-start;background:#fff;border-bottom-left-radius:4px}
.msg--menu{
align-self:flex-start;background:#fff;display:flex;flex-wrap:wrap;gap:6px;
border-bottom-left-radius:4px;max-width:92%;
}
.msg--menu span{
border:1px solid var(--line);border-radius:7px;padding:6px 10px;
font-size:.76rem;font-weight:600;color:var(--blue);
}
.whats__flow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:26px}
.whats__flow span{
border:1px solid var(--line);background:var(--white);border-radius:999px;
padding:7px 14px;font-size:.82rem;font-weight:600;
}
.whats__flow i{width:14px;height:1.5px;background:var(--grad);border-radius:2px}
.whats__note{margin-top:18px;font-size:.88rem;color:var(--muted)}
@media(max-width:820px){.whats__grid{grid-template-columns:1fr}}
/* ------------------------------------------------------ 14 automation */
.autom__grid{
margin-top:clamp(2.5rem,5vw,3.6rem);
display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:14px;
}
.rule{
background:var(--white);border:1px solid var(--line);border-radius:14px;
padding:20px;box-shadow:var(--sh);
}
.rule__w{font-size:.97rem;font-weight:700;letter-spacing:-.015em}
.rule__i{
display:block;width:1.5px;height:20px;margin:12px 0 12px 2px;
background:var(--grad);border-radius:2px;position:relative;
}
.rule__i::after{
content:"";position:absolute;left:-3.5px;bottom:-1px;
border-top:6px solid var(--violet);border-left:4px solid transparent;border-right:4px solid transparent;
}
.rule__t{font-size:.92rem;color:var(--muted)}
/* -------------------------------------------------- 15 back to bizora */
.back__a{color:var(--muted)}
.back__b{margin-top:10px}
.back__c{margin-top:10px}
.back__p{margin-top:32px}
.back__cta{margin-top:34px}
/* ------------------------------------------------------ 16 industries */
.inds__grid{
margin-top:clamp(2.5rem,5vw,3.6rem);
display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:1px;
background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;
}
.ind{background:var(--bg);padding:26px 24px 30px}
.ind h3{font-size:1.05rem;margin-bottom:16px}
.ind ul{list-style:none;margin:0;padding:0}
.ind li{padding:8px 0;font-size:.9rem;color:var(--muted);border-bottom:1px solid var(--line)}
.ind li:last-child{border-bottom:0}
/* ------------------------------------------------------- 17 final cta */
.final__in{text-align:center}
.final__h{font-size:var(--t1)}
.final__sub{
margin-top:18px;font-size:var(--t1);font-weight:700;
letter-spacing:-.028em;line-height:1.06;
}
.final__cta{margin-top:38px;justify-content:center}
.final__id{margin-top:clamp(3rem,6vw,4.5rem);padding-top:32px;border-top:1px solid var(--line-d)}
.final__id img{width:230px;margin-inline:auto}
.final__id p{margin-top:12px;font-size:.8rem;color:var(--muted-d)}
/* =============================================== page: bizora-one ===== */
.p1hero{padding-block:clamp(4rem,9vw,7rem)}
.p1hero__in{text-align:center}
.p1hero__logo{display:block}
.p1hero__logo img{width:min(400px,84%);margin-inline:auto}
.p1hero__tag{margin-top:18px;font-size:clamp(.95rem,1.8vw,1.15rem);color:var(--muted-d)}
.p1hero__attrib{margin-top:10px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-d);opacity:.75}
.p1hero__h{margin-top:clamp(2rem,4.5vw,3.2rem);font-size:var(--t1)}
.p1hero__lead{margin:26px auto 0;text-align:center}
.p1hero__cta{margin-top:34px;justify-content:center}
.p1why__b{margin-top:10px}
.p1why__p{margin-top:30px}
.p1grid{
margin-top:clamp(2.5rem,5vw,3.6rem);
display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1px;
background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;
}
.p1card{background:var(--bg);padding:26px 24px 30px}
.p1card h3{font-size:1.02rem;margin-bottom:10px}
.p1card p{font-size:.92rem;color:var(--muted)}
.p1tally__lead{margin-top:22px}
.flow--dark .flow__step{background:var(--surface-d2);border-color:var(--line-d);box-shadow:none}
.flow--dark .flow__k{color:var(--muted-d)}
.flow--dark .flow__out span{background:var(--surface-d2);border-color:var(--line-d);color:var(--ink-d)}
.p1note{
margin-top:28px;border-left:2px solid var(--blue-lift);
background:rgba(110,155,255,.07);border-radius:0 10px 10px 0;padding:16px 18px;
}
.p1note p{font-size:.92rem;color:var(--muted-d);max-width:66ch}
.p1note strong{color:var(--ink-d);font-weight:600}
.p1ask__lead{margin-top:22px}
.p1ask__chips{margin-top:clamp(2rem,4vw,2.8rem)}
.p1ask__chips li{font-size:.9rem;padding:10px 17px}
.p1ask__note{margin-top:26px;font-size:.9rem;color:var(--muted-d);max-width:62ch}
.p1mod__grid{
margin-top:clamp(2.5rem,5vw,3.4rem);
display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:12px;
}
.p1mod__i{
background:var(--white);border:1px solid var(--line);border-radius:13px;padding:18px 20px;
box-shadow:var(--sh);
}
.p1mod__i b{display:block;font-size:1rem;font-weight:700;letter-spacing:-.015em}
.p1mod__i span{display:block;margin-top:5px;font-size:.87rem;color:var(--muted)}
.p1mod__note{margin-top:26px;font-size:.92rem;color:var(--muted)}
.p1mod__note a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.p1end__p{margin:24px auto 0;text-align:center}
/* ============================================ page: what-we-build ===== */
.wwb-hero{padding-block:clamp(4rem,9vw,7rem) var(--gap-sec)}
.wwb-hero__h{font-size:var(--t-hero);max-width:17ch}
.wwb-hero__lead{margin-top:28px}
.wwb-hero__cta{margin-top:36px}
.wwb-sol__list{
margin-top:clamp(2.5rem,5vw,3.6rem);
display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:1px;background:var(--line-d);border:1px solid var(--line-d);border-radius:16px;overflow:hidden;
}
.wwb-sol__i{background:var(--navy-deep);padding:28px 26px 32px;scroll-margin-top:96px}
.wwb-sol__i h3{font-size:1.05rem;margin-bottom:10px}
.wwb-sol__i p{font-size:.92rem;color:var(--muted-d)}
.compare{
margin-top:clamp(2.5rem,5vw,3.6rem);
display:grid;grid-template-columns:1fr 1fr;gap:16px;
}
.compare__c{
border:1px solid var(--line);border-radius:16px;padding:26px 24px 30px;background:var(--white);
}
.compare__c--us{border-color:rgba(37,99,235,.35);box-shadow:var(--sh)}
.compare__k{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:700}
.compare__c--us .compare__k{color:var(--blue)}
.compare__v{margin-top:12px;font-size:1.12rem;font-weight:700;letter-spacing:-.018em;line-height:1.3}
.compare ul{list-style:none;margin:18px 0 0;padding:0}
.compare li{
padding:10px 0 10px 20px;font-size:.9rem;color:var(--muted);
border-bottom:1px solid var(--line);position:relative;
}
.compare li:last-child{border-bottom:0}
.compare li::before{
content:"";position:absolute;left:2px;top:19px;width:6px;height:1.5px;background:var(--muted);border-radius:2px;
}
.compare__c--us li::before{background:var(--grad);width:8px}
.wwb-why__note{margin-top:24px;font-size:.88rem;color:var(--muted);max-width:66ch}
@media(max-width:700px){.compare{grid-template-columns:1fr}}
.wwb-proof__p{margin-top:24px}
/* ============================================== shared: placeholders === */
.ph{
background:rgba(245,158,11,.16);border-bottom:1.5px dashed rgba(245,158,11,.75);
padding:1px 5px;border-radius:3px;font-style:italic;color:#8A5A06;
}
.sec--dark .ph,.sec--midnight .ph{color:#FFD79A}
.ph-note{
margin-top:24px;border-left:2px solid var(--warn);background:rgba(245,158,11,.09);
border-radius:0 9px 9px 0;padding:14px 16px;font-size:.88rem;color:var(--muted);max-width:66ch;
}
.sec--dark .ph-note,.sec--midnight .ph-note{color:var(--muted-d)}
.ph-note b{color:var(--navy)}
.sec--dark .ph-note b,.sec--midnight .ph-note b{color:var(--ink-d)}
/* =================================================== page: company ==== */
.co-hero{padding-block:clamp(4rem,9vw,7rem) var(--gap-sec)}
.co-hero__h{font-size:var(--t1);max-width:20ch}
.co-hero__lead{margin-top:28px}
.co-why__p{font-size:var(--t-lead);color:var(--muted);max-width:64ch;margin-top:22px;line-height:1.62}
.co-why__p--turn{font-size:var(--t2);font-weight:700;letter-spacing:-.024em;line-height:1.16;margin-top:34px;color:var(--navy)}
.co-beliefs__grid{
margin-top:clamp(2.5rem,5vw,3.6rem);
display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:1px;
background:var(--line-d);border:1px solid var(--line-d);border-radius:16px;overflow:hidden;
}
.co-belief{background:var(--navy-deep);padding:26px 24px 30px}
.co-belief h3{font-size:1.02rem;margin-bottom:10px}
.co-belief p{font-size:.92rem;color:var(--muted-d)}
.co-road__lead{margin-top:22px}
.road{list-style:none;margin:clamp(2.5rem,5vw,3.4rem) 0 0;padding:0;border-top:1px solid var(--line)}
.road__i{
display:grid;grid-template-columns:118px 1fr;gap:20px;align-items:start;
padding:20px 0;border-bottom:1px solid var(--line);
}
.road__s{
font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;font-weight:700;
border-radius:999px;padding:5px 11px;justify-self:start;margin-top:3px;
}
.road__s--done{background:rgba(22,163,74,.12);color:#0F7A3D;border:1px solid rgba(22,163,74,.3)}
.road__s--now{background:rgba(37,99,235,.1);color:var(--blue-ink);border:1px solid rgba(37,99,235,.3)}
.road__s--soon{background:rgba(245,158,11,.12);color:#8A5A06;border:1px solid rgba(245,158,11,.35)}
.road__s--next{background:var(--lav);color:var(--navy3);border:1px solid var(--line)}
.road__i h3{font-size:1.02rem;margin-bottom:4px}
.road__i p{font-size:.92rem;color:var(--muted)}
@media(max-width:560px){.road__i{grid-template-columns:1fr;gap:8px}}
.co-prod__p{margin-top:24px}
.co-contact__lead{margin-top:20px}
.co-cts{
margin:clamp(2.2rem,4.5vw,3rem) 0 0;
display:grid;grid-template-columns:1fr;gap:1px;
background:var(--line-d);border:1px solid var(--line-d);border-radius:14px;overflow:hidden;
}
@media(min-width:560px){.co-cts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.co-cts{grid-template-columns:repeat(4,1fr)}}
.co-cts>div{background:var(--surface-d2);padding:18px 20px}
/* Seven items in a grid of two or four columns always leaves one row short
by a cell; the last item takes two so the grid never ends in an empty
grey block. Change this if the number of items changes. */
@media(min-width:560px){.co-cts>div:last-child{grid-column:span 2}}
.co-cts dt{font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-d);font-weight:700}
.co-cts dd{margin:7px 0 0;font-size:.95rem;font-weight:500}
.co-cts a{color:var(--blue-lift);text-decoration:underline;text-underline-offset:3px}
.co-contact__note{margin-top:22px;font-size:.86rem;color:var(--muted-d)}
.co-contact__cta{margin-top:30px}
.co-end{padding-block:clamp(4rem,8vw,6.5rem)}
.co-end__q{font-size:var(--t2);font-weight:700;letter-spacing:-.024em;line-height:1.2;max-width:24ch;margin-inline:auto}
.co-end__t{margin-top:20px;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
/* =================================================== page: pricing ==== */
.pr-hero{padding-block:clamp(4rem,9vw,6.5rem) 0}
.pr-hero__h{font-size:var(--t-hero)}
.pr-hero__lead{margin-top:26px}
.pr-hero__cta{margin-top:34px}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.tier{
background:var(--white);border:1px solid var(--line);border-radius:18px;
padding:28px 26px 30px;box-shadow:var(--sh);position:relative;display:flex;flex-direction:column;
}
.tier--best{border-color:rgba(37,99,235,.42);box-shadow:var(--sh-lg)}
.tier__flag{
position:absolute;top:-11px;left:26px;background:var(--grad-cta);color:#fff;
font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
padding:5px 12px;border-radius:999px;
}
.tier__n{font-size:1.5rem;font-weight:700;letter-spacing:-.024em}
.tier__d{margin-top:10px;font-size:.92rem;color:var(--muted);min-height:3.2em}
.tier__p{
margin-top:20px;padding-top:20px;border-top:1px solid var(--line);
font-size:1.35rem;font-weight:700;letter-spacing:-.02em;
}
.tier__p span{display:block;margin-top:4px;font-size:.78rem;font-weight:500;color:var(--muted);letter-spacing:0}
.tier__l{list-style:none;margin:20px 0 0;padding:0;flex:1}
.tier__l li{
padding:9px 0 9px 24px;font-size:.9rem;border-bottom:1px solid var(--line);position:relative;
}
.tier__l li:last-child{border-bottom:0}
.tier__l li::before{
content:"";position:absolute;left:3px;top:17px;width:9px;height:5px;
border-left:1.8px solid var(--blue);border-bottom:1.8px solid var(--blue);transform:rotate(-45deg);
}
.tier__l li.is-off{color:var(--muted);opacity:.62}
.tier__l li.is-off::before{
border:0;background:var(--muted);height:1.6px;width:9px;transform:none;top:19px;border-radius:2px;
}
.tier__cta{margin-top:22px;width:100%}
.pr-note{
margin-top:28px;font-size:.92rem;color:var(--muted);max-width:74ch;
border-left:2px solid var(--blue);padding-left:14px;
}
@media(max-width:940px){.tiers{grid-template-columns:1fr;gap:20px}.tier__d{min-height:0}}
.pr-table{min-width:560px}
.pr-table th{
text-align:left;padding:12px 16px;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
color:var(--muted-d);font-weight:700;background:rgba(255,255,255,.04);
}
.pr-table td{padding:14px 16px;font-size:.9rem;border-top:1px solid var(--line-d);vertical-align:top}
.pr-table td:first-child{font-weight:600;white-space:nowrap}
.pr-table td:last-child{color:var(--muted-d);white-space:nowrap}
.faq{margin-top:clamp(2.2rem,4.5vw,3rem);border-top:1px solid var(--line)}
.faq__i{border-bottom:1px solid var(--line)}
.faq__i summary{
cursor:pointer;padding:18px 34px 18px 0;font-size:1.02rem;font-weight:600;
letter-spacing:-.015em;position:relative;list-style:none;
}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary::after{
content:"";position:absolute;right:6px;top:26px;width:9px;height:9px;
border-right:1.8px solid var(--muted);border-bottom:1.8px solid var(--muted);
transform:rotate(45deg);transition:transform .25s var(--ease);
}
.faq__i[open] summary::after{transform:rotate(-135deg);top:30px}
.faq__i p{padding:0 0 20px;font-size:.94rem;color:var(--muted);max-width:70ch}
.faq__i a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
/* ====================================================== page: demo ==== */
.dm-hero{padding-block:clamp(4rem,9vw,6.5rem) 0}
.dm-hero__h{font-size:var(--t1)}
.dm-hero__lead{margin-top:24px}
.dm-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,44px);align-items:start}
.dm-card{
background:var(--white);border:1px solid var(--line);border-radius:18px;
padding:clamp(20px,3vw,32px);box-shadow:var(--sh);min-width:0;
}
.dm-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld{margin-bottom:16px;min-width:0}
.fld label,.fld legend{
display:block;font-size:.76rem;font-weight:600;letter-spacing:.02em;
color:var(--muted);margin-bottom:7px;padding:0;
}
.fld input[type=text],.fld input[type=tel],.fld input[type=email],
.fld select,.fld textarea{
width:100%;max-width:100%;box-sizing:border-box;
padding:12px 14px;border:1px solid var(--line);border-radius:10px;
font:inherit;font-size:.94rem;color:var(--navy);background:var(--bg);
transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.fld textarea{resize:vertical;min-height:84px}
.fld input:focus,.fld select:focus,.fld textarea:focus{
outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.14);
}
.fld--set{border:0;padding:0;margin-bottom:18px}
.picks{display:flex;flex-wrap:wrap;gap:8px}
.picks label{
display:inline-flex;align-items:center;gap:8px;margin:0;
border:1px solid var(--line);border-radius:999px;padding:8px 14px;
font-size:.86rem;font-weight:500;color:var(--navy);cursor:pointer;background:var(--white);
transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
.picks label:hover{border-color:var(--blue)}
.picks input{accent-color:var(--blue);margin:0;width:15px;height:15px;flex:0 0 auto}
.picks input:checked+span{color:var(--blue);font-weight:600}
.dm-hint{margin-top:6px;font-size:.84rem;color:var(--muted);max-width:60ch}
.dm-actions{margin-top:20px}
.dm-actions .btn{flex:1 1 auto}
.dm-sent{
margin-top:16px;font-size:.88rem;color:var(--muted);
border-left:2px solid var(--ok);padding-left:13px;
}
.dm-sent a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.dm-aside{position:sticky;top:104px}
.dm-aside__h{font-size:1.15rem;font-weight:700;letter-spacing:-.018em}
.dm-steps{list-style:none;margin:20px 0 0;padding:0;counter-reset:s}
.dm-steps li{
counter-increment:s;padding:14px 0 14px 34px;border-bottom:1px solid var(--line);position:relative;
}
.dm-steps li:last-child{border-bottom:0}
.dm-steps li::before{
content:counter(s,decimal-leading-zero);position:absolute;left:0;top:16px;
font-size:.7rem;font-weight:700;color:var(--blue);font-variant-numeric:tabular-nums;
}
.dm-steps b{display:block;font-size:.95rem;font-weight:600}
.dm-steps span{display:block;margin-top:3px;font-size:.87rem;color:var(--muted)}
.dm-aside__n{margin-top:18px;font-size:.87rem;color:var(--muted)}
@media(max-width:900px){
.dm-grid{grid-template-columns:1fr}
.dm-aside{position:static}
}
@media(max-width:560px){
.dm-row{grid-template-columns:1fr;gap:0}
}
/* =================================================== page: privacy ==== */
.pv-hero{padding-block:clamp(4rem,9vw,6rem) 0}
.pv-hero__h{font-size:var(--t1)}
.pv-hero__lead{margin-top:24px}
.pv-draft{
margin-top:28px;border-left:2px solid var(--warn);background:rgba(245,158,11,.1);
border-radius:0 11px 11px 0;padding:16px 18px;max-width:72ch;
}
.pv-draft p{font-size:.92rem;color:var(--muted)}
.pv-draft b{color:var(--navy)}
.pv-doc h2{
font-size:1.3rem;margin-top:44px;padding-top:26px;border-top:1px solid var(--line);
scroll-margin-top:96px;
}
.pv-doc h2:first-child{margin-top:0;padding-top:0;border-top:0}
.pv-doc h3{font-size:1rem;margin-top:24px;margin-bottom:6px}
.pv-doc p{margin-top:12px;font-size:.95rem;color:var(--muted);max-width:72ch}
.pv-doc ul{margin:14px 0 0;padding-left:20px;max-width:72ch}
.pv-doc li{margin:8px 0;font-size:.95rem;color:var(--muted)}
.pv-doc a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.pv-officer{list-style:none;padding:0;margin-top:16px}
.pv-officer li{
display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:baseline;
padding:10px 0;border-bottom:1px solid var(--line);margin:0;
}
.pv-officer li:last-child{border-bottom:0}
.pv-officer li>span:first-child{
font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:700;
}
@media(max-width:560px){.pv-officer li{grid-template-columns:1fr;gap:4px}}
/* =================================================================
BIZORA ONE — a day with the platform.
One recurring person, four moments. The photograph is optional:
with --photo-owner-* unset each figure falls back to the designed
gradient environment and the chapter still reads correctly.
================================================================= */
.p1day__lead{margin-bottom:clamp(2.6rem,5vw,4rem)}
.p1day .demo-note{margin-top:clamp(2rem,4vw,3rem)}
.day{list-style:none;margin:0;padding:0;display:grid;gap:clamp(2.4rem,5vw,4rem)}
.day__item{
display:grid;gap:clamp(1.1rem,2.4vw,2rem);
grid-template-columns:minmax(0,1fr);
align-items:center;
}
/* Below 900px everything stacks: time, then photograph, then the text. */
@media(min-width:900px){
.day__item{grid-template-columns:104px minmax(0,1fr) minmax(0,1fr)}
.day__time{grid-column:1;grid-row:1;align-self:start;padding-top:6px}
.day__shot{grid-column:2;grid-row:1}
.day__body{grid-column:3;grid-row:1}
/* Alternate which side the photograph sits on, so the eye moves. */
.day__item:nth-child(even) .day__shot{grid-column:3}
.day__item:nth-child(even) .day__body{grid-column:2}
}
.day__time{display:flex;flex-direction:column;gap:3px}
.day__time span{
font-size:1.04rem;font-weight:700;letter-spacing:-.02em;
color:var(--navy);font-variant-numeric:tabular-nums;
}
.day__time i{
font-style:normal;font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;
font-weight:700;color:var(--muted);line-height:1.45;
}
.day__time::after{
content:"";display:block;width:30px;height:2px;border-radius:2px;
background:var(--grad);margin-top:11px;
}
.day__shot{margin:0;min-height:clamp(250px,31vw,340px)}
.day__body h3{font-size:clamp(1.18rem,2.1vw,1.52rem);letter-spacing:-.021em;margin-bottom:12px}
.day__body p{color:var(--muted);line-height:1.68;max-width:46ch}
/* Which of the nine capabilities this moment is actually made of. */
.day__caps{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.day__caps span{
font-size:.735rem;font-weight:600;
padding:5px 11px;border-radius:999px;
background:var(--lav);color:var(--blue-ink);
}
/* The homepage scenes are mostly texture, so .62 reads well there. These
four are portraits — the face is the point, and at .62 he goes muddy.
The veil below still carries the caption. */
.day__shot::after{opacity:.78}
/* =================================================================
BIZORA ONE — the pinned pipeline.
One visual holds the viewport while four steps scroll past it.
Progressive by construction: the sticky behaviour and the state
cross-fade are both gated behind .pipe-armed, which g-pipe.js adds
only once it knows IntersectionObserver is available. Without it the
four states simply stack down the page as ordinary blocks.
================================================================= */
.pipe{display:grid;gap:clamp(1.6rem,3vw,2.6rem);margin-top:clamp(2rem,4vw,3rem)}
@media(min-width:900px){
.pipe{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,4vw,4rem);align-items:start}
.pipe__stage{grid-column:1;grid-row:1}
.pipe__steps{grid-column:2;grid-row:1}
}
.pipe__art{position:relative;width:100%}
/* Desktop: the stage occupies the full viewport height and centres its
contents, so the visual sits level with the step text beside it rather
than floating at the top of an empty column. */
@media(min-width:900px){
.pipe-armed .pipe__stage{position:sticky;top:0;height:100vh;display:grid;align-items:center}
.pipe-armed .pipe__art{height:clamp(300px,42vh,420px)}
}
/* Phone: one column, so the stage pins under the nav and the steps scroll
beneath it. It needs its own backdrop or the text shows through. */
@media(max-width:899px){
.pipe-armed .pipe__stage{
position:sticky;top:58px;z-index:2;padding-block:12px 14px;
/* Opaque, not a fade: a soft-edged backdrop let the step heading
show through it as ghost text as the step scrolled underneath. */
background:var(--navy-deep);
box-shadow:0 14px 22px -14px rgba(0,0,0,.85);
}
/* Tall enough to hold the tallest state, short enough that the active
step's heading still clears the pin. overflow:hidden is the hard
guarantee — a state that outgrew this box used to spill out below the
backdrop and let the heading ghost through it. */
.pipe-armed .pipe__art{height:clamp(235px,33vh,290px);overflow:hidden}
.pipe-armed .pipe__step{min-height:52vh}
}
/* The dashboard is the tallest state, so it is the one that has to shrink. */
@media(max-width:899px){
.ldash{padding:12px 12px 13px}
.ldash__chart{height:40px;margin-bottom:9px}
.ldash__rows .ldash__r:nth-child(n+3){display:none}
}
/* Each state is a full-bleed layer once JS is driving; stacked blocks otherwise. */
.pipe__state{display:grid;place-items:center;padding:4px}
.pipe-armed .pipe__state{
position:absolute;inset:0;opacity:0;transform:scale(.975) translateY(8px);
transition:opacity .45s var(--ease),transform .45s var(--ease);
pointer-events:none;
}
.pipe-armed .pipe__state.is-on{opacity:1;transform:none;pointer-events:auto}
.pipe__state > *{width:100%;max-width:440px}
.pipe__steps{list-style:none;margin:0;padding:0}
.pipe__step{
padding-block:clamp(1.2rem,2.6vw,1.8rem);
border-top:1px solid var(--line-d);
}
.pipe__step:first-child{border-top:0}
.pipe-armed .pipe__step{
min-height:56vh;display:flex;flex-direction:column;justify-content:center;
opacity:.34;transition:opacity .4s var(--ease);
}
.pipe-armed .pipe__step.is-on{opacity:1}
.pipe__n{
font-size:.68rem;font-weight:700;letter-spacing:.16em;color:var(--blue-lift);
margin-bottom:10px;font-variant-numeric:tabular-nums;
}
.pipe__step h3{font-size:clamp(1.2rem,2.2vw,1.55rem);letter-spacing:-.02em;margin-bottom:10px}
.pipe__step p{color:var(--muted-d);line-height:1.66;max-width:44ch}
/* ------------------------------------------------- the four state visuals */
.pwin{
background:rgba(8,16,34,.94);border:1px solid rgba(255,255,255,.13);
border-radius:12px;overflow:hidden;box-shadow:0 28px 64px -38px rgba(0,0,0,.95);
}
.pwin__bar{
display:flex;align-items:center;gap:6px;padding:9px 12px;
background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.08);
}
.pwin__bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22);display:block}
.pwin__t{
margin-left:8px;font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
font-weight:700;color:var(--muted-d);
}
.pwin__body{padding:11px 13px 13px;display:flex;flex-direction:column;gap:5px}
.pledger{
display:grid;grid-template-columns:auto 1fr auto;gap:10px;
font-size:.7rem;color:var(--muted-d);padding:4px 0;
border-bottom:1px dashed rgba(255,255,255,.07);
}
.pledger b{color:var(--ink-d);font-weight:600;font-variant-numeric:tabular-nums}
.pledger span:first-child{font-variant-numeric:tabular-nums;opacity:.8}
/* step 2 — the connector link */
.plink{display:grid;gap:14px;justify-items:center;text-align:center}
.plink__wire{
position:relative;width:100%;height:2px;border-radius:2px;
background:linear-gradient(90deg,rgba(110,155,255,.15),rgba(110,155,255,.55),rgba(110,155,255,.15));
}
.plink__wire i{
position:absolute;top:50%;left:0;width:7px;height:7px;margin-top:-3.5px;
border-radius:50%;background:var(--blue-lift);
box-shadow:0 0 12px 2px rgba(110,155,255,.7);
}
.pipe-armed .pipe__state.is-on .plink__wire i{animation:wireRun 1.9s linear infinite}
.plink__wire i:nth-child(2){animation-delay:-.63s}
.plink__wire i:nth-child(3){animation-delay:-1.26s}
.pchip{
display:inline-flex;align-items:center;gap:9px;
background:rgba(13,28,56,.9);border:1px solid rgba(255,255,255,.14);
border-radius:11px;padding:11px 15px;
}
.pchip b{font-size:.84rem;color:var(--ink-d);font-weight:700;letter-spacing:-.01em}
.pchip span{font-size:.68rem;color:var(--muted-d)}
.pchip__dot{
width:9px;height:9px;border-radius:50%;background:var(--blue-lift);flex:0 0 auto;
}
.pipe-armed .pipe__state.is-on .pchip__dot{animation:pipePulse 2s ease-in-out infinite}
/* step 4 — the fan-out */
.pfan{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.pfan__i{
background:rgba(13,28,56,.88);border:1px solid rgba(255,255,255,.12);
border-radius:11px;padding:12px 13px;
}
.pfan__i b{display:block;font-size:.82rem;color:var(--ink-d);letter-spacing:-.01em}
.pfan__i span{display:block;margin-top:4px;font-size:.68rem;color:var(--muted-d);line-height:1.45}
.pipe-armed .pipe__state.is-on .pfan__i{animation:popIn .42s var(--ease) both}
.pipe-armed .pipe__state.is-on .pfan__i:nth-child(2){animation-delay:.09s}
.pipe-armed .pipe__state.is-on .pfan__i:nth-child(3){animation-delay:.18s}
.pipe-armed .pipe__state.is-on .pfan__i:nth-child(4){animation-delay:.27s}
@media(prefers-reduced-motion:reduce){
.pipe-armed .pipe__state{transition:none;transform:none}
.pipe-armed .pipe__step{opacity:1}
.pipe-armed .pipe__state.is-on .plink__wire i,
.pipe-armed .pipe__state.is-on .pchip__dot,
.pipe-armed .pipe__state.is-on .pfan__i{animation:none}
}
/* ------------------------------------------- Bizora One hero backdrop
Decorative only, and inert until g-pipe.js sets --px/--py, so with JS
off it is a still gradient rather than a broken effect. */
.p1hero{position:relative;overflow:hidden;isolation:isolate}
.p1hero__bg{position:absolute;inset:-10%;z-index:0;pointer-events:none}
.p1hero__in{position:relative;z-index:1}
.p1hero__orb{
position:absolute;border-radius:50%;filter:blur(70px);display:block;
transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.p1hero__orb--a{
width:46%;padding-bottom:46%;left:6%;top:4%;
background:radial-gradient(circle,rgba(37,99,235,.42),transparent 68%);
transform:translate3d(calc(var(--px,0)*22px),calc(var(--py,0)*18px),0);
}
.p1hero__orb--b{
width:52%;padding-bottom:52%;right:2%;bottom:-6%;
background:radial-gradient(circle,rgba(139,92,246,.34),transparent 68%);
transform:translate3d(calc(var(--px,0)*-30px),calc(var(--py,0)*-24px),0);
}
.p1hero__grid{
position:absolute;inset:0;display:block;opacity:.5;
background-image:
linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
background-size:62px 62px;
-webkit-mask-image:radial-gradient(70% 60% at 50% 42%,#000,transparent 72%);
mask-image:radial-gradient(70% 60% at 50% 42%,#000,transparent 72%);
transform:translate3d(calc(var(--px,0)*-10px),calc(var(--py,0)*-8px),0);
transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
/* ------------------------------------------------ line-by-line reveals
g-pipe.js splits marked headlines on their
and wraps each line in
an overflow-hidden box. Untouched markup renders identically. */
.ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ln__i{display:block}
/* The block fade would fight the line slide, so hand these over entirely. */
.reveal-armed .reveal[data-lines]{opacity:1;transform:none}
.reveal-armed [data-lines] .ln__i{transform:translateY(105%)}
.reveal-armed .is-in[data-lines] .ln__i{animation:lineUp .66s var(--ease) both}
.reveal-armed .is-in[data-lines] .ln:nth-child(2) .ln__i{animation-delay:.09s}
.reveal-armed .is-in[data-lines] .ln:nth-child(3) .ln__i{animation-delay:.18s}
@media(prefers-reduced-motion:reduce){
.p1hero__orb,.p1hero__grid{transform:none!important;transition:none}
.reveal-armed [data-lines] .ln__i{transform:none;animation:none}
}
/* =================================================================
The first conversation.
Objections in a prospect's words, answered in Bizora's own voice.
Deliberately NOT a testimonial: nobody here is presented as a
customer, nothing is attributed to a named person, and no outcome
is claimed. The persuasion comes from knowing the objection.
================================================================= */
.conv{background:linear-gradient(180deg,var(--bg) 0%,#F2F5FF 100%)}
.conv__lead{margin-bottom:clamp(2.4rem,5vw,3.6rem)}
.conv__list{list-style:none;margin:0;padding:0;position:relative;max-width:60rem}
/* The rail that threads the exchanges together. */
.conv__list::before{
content:"";position:absolute;left:11px;top:14px;bottom:14px;width:2px;
background:linear-gradient(180deg,transparent,var(--lav) 12%,var(--lav) 88%,transparent);
border-radius:2px;
}
@media(max-width:700px){.conv__list::before{display:none}}
.conv__i{position:relative;padding-left:44px;padding-block:clamp(1.1rem,2.4vw,1.6rem)}
@media(max-width:700px){.conv__i{padding-left:0}}
.conv__i::before{
content:"";position:absolute;left:4px;top:calc(clamp(1.1rem,2.4vw,1.6rem) + 6px);
width:16px;height:16px;border-radius:50%;
background:var(--white);border:2px solid var(--lav);
}
.reveal-armed .conv__i.is-in::before{border-color:var(--blue);transition:border-color .5s var(--ease) .2s}
@media(max-width:700px){.conv__i::before{display:none}}
.conv__q{
font-size:clamp(1.05rem,2vw,1.32rem);font-weight:600;letter-spacing:-.018em;
color:var(--navy);line-height:1.4;max-width:34ch;
}
.conv__q::before{content:"\201C"}
.conv__q::after{content:"\201D"}
.conv__a{
margin-top:12px;color:var(--muted);line-height:1.7;max-width:60ch;
}
.conv__a strong{color:var(--navy);font-weight:600}
.conv__a a{color:var(--blue-ink);text-decoration:underline;text-underline-offset:3px}
/* Question in from the left, answer following just behind it. */
.reveal-armed .reveal.conv__i{opacity:1;transform:none}
.reveal-armed .conv__i .conv__q{
opacity:0;transform:translateX(-18px);
transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.reveal-armed .conv__i .conv__a{
opacity:0;transform:translateX(16px);
transition:opacity .5s var(--ease) .2s,transform .5s var(--ease) .2s;
}
.reveal-armed .conv__i.is-in .conv__q,
.reveal-armed .conv__i.is-in .conv__a{opacity:1;transform:none}
.conv__foot{
margin-top:clamp(2rem,4vw,3rem);padding-top:clamp(1.6rem,3vw,2.2rem);
border-top:1px solid var(--line);max-width:60rem;
}
.conv__foot p{color:var(--muted);max-width:56ch;margin-bottom:18px}
@media(prefers-reduced-motion:reduce){
.reveal-armed .conv__i .conv__q,
.reveal-armed .conv__i .conv__a{opacity:1;transform:none;transition:none}
.reveal-armed .conv__i.is-in::before{transition:none}
}
/* ------------------------------------------- WhatsApp thread, replaying
The markup holds the whole conversation. h-wa.js adds .wa-armed, which
hides it and replays it message by message — so with JS off, or if the
script fails, the visitor just reads a finished thread. */
.phone__live{
margin-left:auto;display:inline-flex;align-items:center;gap:5px;
font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
color:#8FA3BF;
}
.phone__live i{width:6px;height:6px;border-radius:50%;background:#34D399;display:block}
.reveal-armed .phone__live i{animation:blinkDot 2.4s ease-in-out infinite}
/* A fixed viewport so the section never grows or jumps as messages land. */
.phone__msgs{
height:clamp(360px,54vh,470px);overflow-y:auto;scroll-behavior:smooth;
scrollbar-width:thin;
}
@media(prefers-reduced-motion:reduce){.phone__msgs{scroll-behavior:auto}}
.msg--btn{
align-self:flex-start;background:#fff;max-width:92%;padding:7px;
border-bottom-left-radius:4px;
}
.msg--btn span{
display:block;text-align:center;padding:8px 14px;border-radius:8px;
border:1px solid var(--line);color:var(--blue);font-weight:600;font-size:.8rem;
}
.msg--doc{
align-self:flex-start;background:#fff;max-width:92%;
display:flex;align-items:center;gap:10px;border-bottom-left-radius:4px;
}
.msg__file{
flex:0 0 auto;width:36px;height:44px;border-radius:5px;
background:linear-gradient(160deg,#E8443A,#C0271E);
color:#fff;font-size:.56rem;font-weight:800;letter-spacing:.04em;
display:grid;place-items:center;
}
.msg__meta{display:flex;flex-direction:column;font-size:.72rem;color:var(--muted);line-height:1.45}
.msg__meta b{font-size:.8rem;color:var(--navy);font-weight:600}
/* Replay states. Only ever applied once JS has taken over. */
.wa-armed #waThread > *{display:none}
.wa-armed #waThread > .is-shown{display:flex}
.wa-armed #waThread > p.is-shown{display:block}
.wa-armed #waThread > .is-shown{animation:msgIn .34s var(--ease) both}
@media(prefers-reduced-motion:reduce){
.wa-armed #waThread > .is-shown{animation:none}
}
/* =================================================================
SOLUTIONS — light throughout.
Dark navy is reserved for one or two feature panels so they carry
weight; everything else sits on the pale background. The rhythm is
a big headline in a narrow left column with supporting text right.
================================================================= */
.sol-hero{background:var(--bg);padding-block:clamp(3.4rem,8vw,7rem) clamp(3rem,6vw,5rem)}
.sol-hero__k{
font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
color:var(--muted);margin-bottom:26px;
}
.sol-hero__h{
font-size:clamp(2.3rem,6vw,4.4rem);font-weight:800;letter-spacing:-.038em;
line-height:1.04;color:var(--navy);max-width:14ch;margin-bottom:26px;
}
.sol-hero__lead{max-width:52ch;margin-bottom:34px}
/* The two-column heading used by every section below. */
.solhead{display:grid;gap:clamp(1rem,3vw,3rem);margin-bottom:clamp(2.2rem,5vw,3.6rem)}
@media(min-width:900px){.solhead{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:end}}
.solhead h2{
font-size:clamp(1.9rem,4.2vw,3.1rem);font-weight:800;letter-spacing:-.034em;
line-height:1.06;max-width:12ch;
}
.solhead p{color:var(--muted);line-height:1.68;max-width:52ch}
.sec--dark .solhead p,.sec--midnight .solhead p{color:var(--muted-d)}
/* ---------------------------------------------------- the ring, light
Drawn on TWO pages, from two different lists: the home page's
"connected business" (the things that feed Bizora One) and this page's
industries. Same geometry, same styling, different content — the list
in the markup is what decides. The home page's Outcomes row is filed
with the home-page sections, at .eco2__out. */
.eco2{position:relative;display:grid;place-items:center;padding-block:clamp(.5rem,1.5vw,1rem)}
.eco2__svg{width:100%;max-width:1120px;display:block;overflow:visible}
.eco2__glow{fill:url(#ecoGlow)}
.eco2__spokes line{stroke:#A5B4FC;stroke-width:1.3;opacity:.85}
.eco2__spokes line.is-lit{stroke:var(--blue);stroke-width:2;opacity:1}
.eco2__spokes circle{fill:var(--blue);opacity:0}
.reveal-armed .eco2.is-in .eco2__spokes circle{animation:ecoRun 3.6s linear infinite}
/* The hub is white with a blue rim, not a filled navy disc — the mark and the
name read as the logo does everywhere else on the site. */
.eco2__core{fill:var(--white);stroke:var(--blue);stroke-width:2}
.eco2__word{fill:var(--navy);font-size:15px;font-weight:800;letter-spacing:.18em}
/* Industry labels sit on the ring as white pills, like tags rather than dots. */
.eco2__pill rect{fill:var(--white);stroke:#E6EAF7;stroke-width:1;transition:stroke .2s,fill .2s}
.eco2__pill text{
fill:var(--navy);font-size:12.5px;font-weight:700;
text-transform:uppercase;letter-spacing:.07em;
}
.eco2__pill.is-lit rect{stroke:var(--blue);fill:var(--lav)}
.eco2__pill{cursor:default}
.eco2__flow{
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:11px;
margin-top:clamp(1.4rem,3vw,2.4rem);font-size:.84rem;font-weight:700;color:var(--navy);
}
.eco2__flow i{width:16px;height:1.5px;background:var(--grad);border-radius:2px}
/* -------------------------------------------------- industry cards */
.indg{display:grid;gap:12px}
@media(min-width:840px){.indg{grid-template-columns:1fr 1fr}}
.ind{
border:1px solid var(--line);border-radius:14px;background:var(--white);
box-shadow:var(--sh);overflow:hidden;align-self:start;
}
.ind summary{
display:grid;grid-template-columns:auto 1fr auto;gap:13px;
padding:16px 18px;cursor:pointer;list-style:none;align-items:start;
transition:background-color .2s var(--ease);
}
.ind summary::-webkit-details-marker{display:none}
.ind summary:hover{background:#FAFCFF}
/* Every cell placed explicitly. Left to auto-placement the ::after marker
drifts into the first free cell and lands before the industry name. */
.ind__ico{
grid-column:1;grid-row:1/3;
width:30px;height:30px;border-radius:9px;background:var(--lav);
display:grid;place-items:center;
color:var(--blue-ink);font-size:.82rem;font-weight:800;
}
.ind__top{grid-column:2;grid-row:1;display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.ind__n{font-size:.97rem;font-weight:700;letter-spacing:-.018em;color:var(--navy)}
.ind__s{grid-column:2/4;grid-row:2;font-size:.83rem;color:var(--muted);line-height:1.55;margin-top:6px}
.ind summary::after{
content:"+";grid-column:3;grid-row:1;justify-self:end;color:var(--blue);
font-size:1.2rem;line-height:1.1;font-weight:400;transition:transform .28s var(--ease);
}
.ind[open] summary::after{transform:rotate(45deg)}
/* The honest label: what exists today versus what we could build. */
.ind__b{
font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;font-weight:800;
padding:3px 8px;border-radius:5px;white-space:nowrap;
}
.ind__b--ship{background:#DCFCE7;color:#166534}
.ind__b--cap{background:var(--lav);color:var(--blue-ink)}
.ind__body{padding:2px 18px 20px;border-top:1px solid var(--line);margin-top:2px}
.ind__h{
font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
font-weight:700;margin:16px 0 10px;
}
.ind__body ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.ind__body li{font-size:.86rem;color:var(--muted);line-height:1.58;padding-left:15px;position:relative}
.ind__body li::before{
content:"";position:absolute;left:0;top:.6em;width:4px;height:4px;border-radius:50%;
background:var(--line);
}
.ind__sol{display:flex!important;flex-wrap:wrap;gap:6px!important}
.ind__sol li{
padding:5px 10px;border-radius:999px;background:var(--lav);color:var(--blue-ink);
font-size:.75rem;font-weight:600;line-height:1.3;padding-left:10px;
}
.ind__sol li::before{display:none}
.ind__note{margin-top:14px;font-size:.8rem;color:var(--muted);line-height:1.6}
.ind__note a{color:var(--blue-ink);text-decoration:underline;text-underline-offset:3px}
.sol-ind__foot{margin-top:clamp(1.6rem,3vw,2.4rem)}
/* On a phone the ring cannot work: ten labels around a circle at 390px are
about five pixels tall. Rather than shrink the desktop drawing, drop it
and promote the list it was built from — which is already in the markup
for screen readers, so nothing new has to be maintained. */
/* Below this width the ring's ten labels render about five pixels tall, so the
drawn ring is dropped and the same list — the one the screen reader has been
reading all along — is promoted to visible pills, with its Inputs label
promoted alongside them so the row is still named. */
@media(max-width:760px){
.eco2__svg{display:none}
.solhead__hint{display:none}
.eco2 #ecoListLab{
position:static;width:auto;height:auto;margin:0 0 12px;padding:0;
overflow:visible;clip:auto;white-space:normal;text-align:center;
}
.eco2 #ecoList{
position:static;width:auto;height:auto;margin:0;padding:0;
overflow:visible;clip:auto;white-space:normal;
display:flex;flex-wrap:wrap;gap:8px;justify-content:center;list-style:none;
}
.eco2 #ecoList li{
background:var(--white);border:1px solid var(--line);border-radius:999px;
padding:8px 14px;font-size:.82rem;font-weight:600;color:var(--navy);
box-shadow:var(--sh);
}
}
/* ------------------------------------------------------------ careers */
.cr-note{
margin-top:clamp(1.6rem,3vw,2.4rem);max-width:64ch;
font-size:.9rem;line-height:1.7;color:var(--muted);
border-left:2px solid var(--line);padding-left:16px;
}
.sec--dark .cr-note,.sec--midnight .cr-note{color:var(--muted-d);border-color:var(--line-d)}
.cr-why .p1grid{margin-top:0}
/* The contact grid was built for the dark Company page; on the light
Careers page it needs the light surface and border tokens. */
.co-cts--light{background:var(--line);border-color:var(--line)}
.co-cts--light>div{background:var(--white)}
.co-cts--light dt{color:var(--muted)}
.co-cts--light dd{color:var(--navy)}
.co-cts--light a{color:var(--blue)}
/* Six items: three columns divide evenly, so no cell is left empty and the
last-child span used on the Company page must be switched off here. */
@media(min-width:900px){.cr-apply .co-cts{grid-template-columns:repeat(3,1fr)}}
@media(min-width:560px){.cr-apply .co-cts>div:last-child{grid-column:auto}}
/* scenes.css */
/* ==================================================================
Photography slots.
Each scene has a designed gradient environment that stands on its own,
and a --photo-* variable. Drop a file into photos/ and set the variable
to url("../photos/warehouse.jpg") — nothing else changes.
NOTE THE ../ — this file is bundled into assets/site..css, so a URL
here resolves against assets/, not the repo root. "photos/x.jpg" silently
404s and you get the gradient fallback with no error anywhere.
================================================================== */
:root{
--photo-warehouse:url("../photos/warehouse.jpg"); /* owner in the godown */
--photo-travel:none; /* owner checking his phone in a car or lounge */
--photo-street:url("../photos/street.jpg"); /* field executive at a shop */
--photo-shop:url("../photos/shop.jpg"); /* dealer inside his shop */
--photo-accounts:url("../photos/accounts.jpg"); /* accounts manager */
--photo-home:none; /* customer at home on WhatsApp */
--photo-desk:none; /* office computer running Tally */
--photo-strip1:none; /* wide: warehouse team working (~4:1) */
--photo-strip2:none; /* wide: delivery vehicles loading (~4:1) */
/* One recurring person, four moments — see photos/README.txt for the
prompts. These four must read as the SAME man on the SAME day: same
shirt, same build, same age. That consistency is the whole point. */
--photo-owner-car:url("../photos/owner-car.jpg"); /* 07:40 back seat, early light */
--photo-owner-godown:url("../photos/owner-godown.jpg"); /* 11:15 godown floor */
--photo-owner-desk:url("../photos/owner-desk.jpg"); /* 14:30 at his desk */
--photo-owner-evening:url("../photos/owner-evening.jpg"); /* 18:20 at dusk */
}
.scene{
position:relative;border-radius:20px;overflow:hidden;
min-height:clamp(280px,42vw,460px);
display:flex;align-items:flex-end;
isolation:isolate;
}
/* Layer 1 — the designed environment, always present. */
.scene::before{
content:"";position:absolute;inset:0;z-index:0;
background:
radial-gradient(120% 90% at 18% 12%, rgba(110,155,255,.30), transparent 60%),
radial-gradient(100% 80% at 86% 78%, rgba(176,140,255,.26), transparent 62%),
linear-gradient(160deg,#0C1A38 0%,#081630 52%,#060B18 100%);
}
/* Layer 2 — the photograph, when one exists. */
.scene::after{
content:"";position:absolute;inset:0;z-index:1;
background-image:var(--scene-photo,none);
background-size:cover;background-position:center;
/* .62 was tuned for abstract texture. With a person in the frame it
reads as murk — the caption still survives comfortably at .72. */
opacity:.72;
}
.scene > *{position:relative;z-index:2}
.scene--warehouse{--scene-photo:var(--photo-warehouse)}
.scene--travel{--scene-photo:var(--photo-travel)}
.scene--street{--scene-photo:var(--photo-street)}
.scene--shop{--scene-photo:var(--photo-shop)}
.scene--accounts{--scene-photo:var(--photo-accounts)}
.scene--home{--scene-photo:var(--photo-home)}
.scene--desk{--scene-photo:var(--photo-desk)}
.scene--owner-car{--scene-photo:var(--photo-owner-car)}
.scene--owner-godown{--scene-photo:var(--photo-owner-godown)}
.scene--owner-desk{--scene-photo:var(--photo-owner-desk)}
.scene--owner-evening{--scene-photo:var(--photo-owner-evening)}
/* Readability scrim so caption text survives any photograph. */
.scene__veil{
position:absolute;inset:0;z-index:2;pointer-events:none;
background:linear-gradient(180deg,rgba(6,11,24,.15) 0%,rgba(6,11,24,.10) 45%,rgba(6,11,24,.88) 100%);
}
.scene__cap{
position:relative;z-index:3;padding:clamp(20px,3.4vw,34px);width:100%;
}
.scene__who{
display:inline-flex;align-items:center;gap:10px;
font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
color:var(--muted-d);margin-bottom:12px;
}
.scene__who::before{
content:"";width:26px;height:1.5px;background:var(--grad);border-radius:2px;
}
.scene__line{
font-size:clamp(1.1rem,2.3vw,1.6rem);font-weight:600;letter-spacing:-.018em;
line-height:1.3;color:var(--ink-d);max-width:30ch;
}
/* Floating UI cards that sit over a scene. */
.scene__card{
position:absolute;z-index:3;
background:rgba(13,28,56,.86);
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
border:1px solid rgba(255,255,255,.14);border-radius:13px;
padding:13px 16px;box-shadow:0 26px 60px -30px rgba(0,0,0,.9);
min-width:132px;
}
.scene__card b{
display:block;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
color:var(--muted-d);font-weight:700;
}
.scene__card span{
display:block;margin-top:5px;font-size:1.06rem;font-weight:700;
letter-spacing:-.02em;color:var(--ink-d);font-variant-numeric:tabular-nums;
}
.scene__card--tl{top:6%;left:5%}
.scene__card--tr{top:12%;right:5%}
.scene__card--br{bottom:30%;right:7%}
@media(max-width:620px){
.scene__card--tr,.scene__card--br{display:none}
.scene__card--tl{top:5%;left:5%;transform:scale(.9);transform-origin:top left}
}
/* Wide strips between chapters. */
.strip{
position:relative;height:clamp(150px,20vw,250px);overflow:hidden;
border-radius:18px;
}
.strip::before{
content:"";position:absolute;inset:0;
background:
radial-gradient(80% 140% at 25% 50%, rgba(37,99,235,.34), transparent 62%),
radial-gradient(70% 130% at 78% 50%, rgba(139,92,246,.30), transparent 62%),
linear-gradient(90deg,#081630,#0C1A38 50%,#081630);
}
.strip::after{
content:"";position:absolute;inset:0;
background-image:var(--strip-photo,none);
background-size:cover;background-position:center;opacity:.5;
}
.strip--1{--strip-photo:var(--photo-strip1)}
.strip--2{--strip-photo:var(--photo-strip2)}
/* Scene grid used on the homepage roles chapter. */
.scenes{
display:grid;gap:16px;margin-top:clamp(2.5rem,5vw,3.6rem);
grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
}
.roles__note{
margin-top:26px;font-size:.85rem;color:var(--muted-d);
border-left:2px solid var(--line-d);padding-left:14px;max-width:62ch;
}
.roles__note code{
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;
color:var(--blue-lift);
}
/* motion.css */
/* ==================================================================
Motion + interaction.
Everything is visible at rest. JS adds .reveal-armed only once it can
observe, so a script failure can never leave the page blank.
================================================================== */
.reveal{opacity:1}
.reveal-armed .reveal{
opacity:0;transform:translateY(16px);
transition:opacity .62s var(--ease),transform .62s var(--ease);
}
.reveal-armed .reveal.is-in{opacity:1;transform:none}
/* Direction variants */
.reveal-armed .reveal[data-rv="left"]{transform:translateX(-26px)}
.reveal-armed .reveal[data-rv="right"]{transform:translateX(26px)}
.reveal-armed .reveal[data-rv="scale"]{transform:scale(.965)}
.reveal-armed .reveal[data-rv="blur"]{filter:blur(7px)}
.reveal-armed .reveal.is-in[data-rv]{transform:none;filter:none}
/* Stagger — set by JS as --d so it works for any number of children */
.reveal-armed .reveal{transition-delay:var(--d,0ms)}
/* ------------------------------------------------------------ counters */
.count{font-variant-numeric:tabular-nums}
/* ------------------------------------------------- hero constellation */
.hv-lines path{opacity:.55}
.reveal-armed .hv-lines path{
stroke-dasharray:var(--len,440);stroke-dashoffset:var(--len,440);
}
.reveal-armed .hero__vis.is-in .hv-lines path{animation:draw 1.15s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
/* packets travelling inward along each line */
.hv-flow circle{opacity:0}
.reveal-armed .hero__vis.is-in .hv-flow circle{
animation:packet 3.4s var(--ease) infinite;
}
@keyframes packet{
0%{opacity:0;offset-distance:0%}
12%{opacity:.95}
78%{opacity:.95}
100%{opacity:0;offset-distance:100%}
}
.reveal-armed .hv-node{opacity:0;transform:scale(.94);transform-origin:center;transform-box:fill-box}
.reveal-armed .hero__vis.is-in .hv-node{animation:nodeIn .5s var(--ease) forwards}
.hv-nodes>g:nth-child(2) .hv-node{animation-delay:.06s}
.hv-nodes>g:nth-child(3) .hv-node{animation-delay:.12s}
.hv-nodes>g:nth-child(4) .hv-node{animation-delay:.18s}
.hv-nodes>g:nth-child(5) .hv-node{animation-delay:.24s}
.hv-nodes>g:nth-child(6) .hv-node{animation-delay:.3s}
.hv-nodes>g:nth-child(7) .hv-node{animation-delay:.36s}
.hv-nodes>g:nth-child(8) .hv-node{animation-delay:.42s}
@keyframes nodeIn{to{opacity:1;transform:scale(1)}}
.hv-hub circle:first-child{transform-origin:450px 270px}
.reveal-armed .hero__vis.is-in .hv-pulse{animation:hubPulse 3.2s ease-out infinite}
@keyframes hubPulse{
0%{r:74;opacity:.5}
70%{r:120;opacity:0}
100%{r:120;opacity:0}
}
/* hero nodes respond to the pointer */
.hv-nodes>g{cursor:default}
.hv-nodes rect{transition:fill .25s var(--ease),stroke .25s var(--ease)}
.hv-nodes text{transition:fill .25s var(--ease)}
.hv-nodes>g:hover rect{fill:#EEF3FF;stroke:var(--blue)}
.hv-nodes>g:hover text{fill:var(--navy)}
.hv-lines path{transition:opacity .25s var(--ease),stroke-width .25s var(--ease)}
.hero__vis[data-focus] .hv-lines path{opacity:.16}
.hero__vis[data-focus] .hv-lines path.is-lit{opacity:1;stroke-width:2.6}
/* --------------------------------------------------------- key moments */
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes shimmer{0%{background-position:-180% 0}100%{background-position:180% 0}}
@keyframes blinkDot{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes growBar{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes trace{to{stroke-dashoffset:0}}
@keyframes orbit{to{transform:rotate(360deg)}}
.reveal-armed .float{animation:floatY 6s ease-in-out infinite}
.reveal-armed .float--b{animation-delay:-2s}
.reveal-armed .float--c{animation-delay:-4s}
.live-dot{
display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);
margin-right:7px;vertical-align:1px;
}
.reveal-armed .live-dot{animation:blinkDot 2s ease-in-out infinite}
/* dashboard bars grow on entry */
.reveal-armed .bar{transform:scaleY(0);transform-origin:bottom}
.reveal-armed .is-in .bar{animation:growBar .8s var(--ease) forwards}
/* ------------------------------------------------------ ecosystem flow */
.eco-line{stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300)}
.reveal-armed .is-in .eco-line{animation:trace 1.3s var(--ease) forwards}
.eco-packet{opacity:0}
.reveal-armed .is-in .eco-packet{animation:packet 3.2s linear infinite}
/* --------------------------------------------------------- interaction */
/* anything the visitor can act on says so */
.tappable{cursor:pointer;transition:transform .2s var(--ease),border-color .2s var(--ease),
background-color .2s var(--ease),box-shadow .2s var(--ease)}
.tappable:hover{transform:translateY(-2px)}
.tappable[aria-pressed="true"],.tappable.is-active{border-color:var(--blue)}
.tile.tappable:hover{box-shadow:0 22px 50px -26px rgba(11,31,68,.45)}
.sec--dark .tile.tappable:hover,.sec--midnight .tile.tappable:hover{
border-color:var(--blue-lift);box-shadow:0 26px 60px -30px rgba(0,0,0,.9);
}
/* question chips drive the answer panel */
.ask__chips li{
cursor:pointer;
transition:border-color .22s var(--ease),color .22s var(--ease),
background-color .22s var(--ease),transform .2s var(--ease);
}
.ask__chips li:hover{border-color:var(--blue-lift);color:var(--ink-d);transform:translateY(-2px)}
.ask__chips li[aria-selected="true"]{
border-color:var(--blue-lift);color:var(--ink-d);
background:rgba(110,155,255,.14);
}
.ask__a{animation:riseIn .45s var(--ease)}
.ask__a[data-swapping="true"]{opacity:.25;transition:opacity .16s}
/* typing caret for the WhatsApp thread */
.msg--typing span{
display:inline-block;width:6px;height:6px;border-radius:50%;
background:var(--muted);margin:0 2px;
}
.msg--typing span:nth-child(1){animation:blinkDot 1.2s infinite}
.msg--typing span:nth-child(2){animation:blinkDot 1.2s infinite .2s}
.msg--typing span:nth-child(3){animation:blinkDot 1.2s infinite .4s}
.msg{animation:popIn .32s var(--ease)}
.msg--menu span{cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease)}
.msg--menu span:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
/* automation rules play when triggered */
.rule{cursor:pointer}
.rule__i{transition:height .35s var(--ease)}
.rule.is-fired .rule__i{height:34px}
.rule.is-fired .rule__t{color:var(--blue);font-weight:600}
.rule__done{
display:block;margin-top:10px;font-size:.78rem;color:var(--ok);font-weight:600;
opacity:0;transform:translateY(-4px);transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.rule.is-fired .rule__done{opacity:1;transform:none}
/* field map executives drift along their routes */
.fm-exec circle{transition:r .25s var(--ease)}
.reveal-armed .fm-exec circle{animation:floatY 7s ease-in-out infinite}
.reveal-armed .fm-exec circle:nth-child(2){animation-delay:-2.5s}
.reveal-armed .fm-exec circle:nth-child(3){animation-delay:-5s}
.fm-ping{transform-box:fill-box;transform-origin:center}
.reveal-armed .fm-ping{animation:hubPulse 2.8s ease-out infinite}
/* dark-section ambient glow */
.glow{position:relative;overflow:hidden}
.glow::before{
content:"";position:absolute;width:56vw;height:56vw;border-radius:50%;
top:-22%;left:-12%;pointer-events:none;
background:radial-gradient(circle,rgba(37,99,235,.22),transparent 68%);
}
.glow::after{
content:"";position:absolute;width:48vw;height:48vw;border-radius:50%;
bottom:-26%;right:-10%;pointer-events:none;
background:radial-gradient(circle,rgba(139,92,246,.19),transparent 68%);
}
.glow > *{position:relative;z-index:1}
/* gradient sheen that crosses a headline once, on entry */
.sheen{position:relative;overflow:hidden}
.reveal-armed .sheen.is-in::after{
content:"";position:absolute;inset:0;
background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.14) 50%,transparent 60%);
animation:sweep 1.5s var(--ease) .35s 1;
}
/* ------------------------------------------------------ reduced motion */
@media(prefers-reduced-motion:reduce){
.reveal-armed .reveal,
.reveal-armed .reveal.is-in{opacity:1;transform:none;filter:none;transition:none}
.hv-lines path,
.reveal-armed .hv-lines path,
.reveal-armed .hero__vis.is-in .hv-lines path{
stroke-dasharray:none;stroke-dashoffset:0;animation:none;opacity:.55;
}
.hv-node,.reveal-armed .hero__vis.is-in .hv-node{opacity:1;transform:none;animation:none}
.hv-flow circle,.eco-packet,.fm-ping{display:none}
.eco-line{stroke-dasharray:none;stroke-dashoffset:0}
.reveal-armed .float,.reveal-armed .live-dot,.reveal-armed .fm-exec circle,
.reveal-armed .sheen.is-in::after,.reveal-armed .hero__vis.is-in .hv-pulse{animation:none}
.reveal-armed .bar,.reveal-armed .is-in .bar{transform:none;animation:none}
.msg{animation:none}
.tappable:hover,.ask__chips li:hover{transform:none}
}
@keyframes rowIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes lineUp{from{transform:translateY(105%)}to{transform:translateY(0)}}
@keyframes pipePulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.9;transform:scale(1.35)}}
@keyframes pipeDot{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes wireRun{from{left:0;opacity:0}12%{opacity:1}88%{opacity:1}to{left:100%;opacity:0}}
@keyframes msgIn{from{opacity:0;transform:translateY(9px) scale(.98)}to{opacity:1;transform:none}}
@keyframes ecoRun{from{opacity:0;offset-distance:0%}12%{opacity:1}88%{opacity:1}to{opacity:0;offset-distance:100%}}