/* ============================================================
SPECTRA ONE — design tokens
============================================================ */
:root{
--white:#FFFFFF;
--surface:#F7F9FC;
--surface-2:#F2F5F9;
--navy:#0A1428;
--navy-deep:#030A14;
--navy-2:#11223B;
--ink:#07111F;
--muted:#5F6B7A;
--line:rgba(10,20,40,.08);
--line-2:rgba(10,20,40,.14);
--blue:#1266FF;
--blue-2:#7BA8FF;
--blue-ink:#0A4AC4; /* accessible blue for text on a blue tint */
--blue-deep:#0D57E0; /* pipeline stage 5 */
--step-1:#9AA6BC; /* pipeline stage 1 */
--step-2:#6E7C96; /* pipeline stage 2 */
--roof:#0E1B33; /* deep navy surface */
--navy-grad-a:#060D1B;
--navy-grad-b:#030A14;
--display:"Space Grotesk",system-ui,sans-serif;
/* To switch the site to Poppins (matches the CRM), swap the two lines below
and add Poppins to the Google Fonts above:
--display:"Poppins",system-ui,sans-serif;
--body:"Poppins",system-ui,-apple-system,sans-serif; */
--body:"Inter",system-ui,-apple-system,sans-serif;
--r-sm:8px; --r:12px; --r-lg:14px; --r-xl:20px;
--sh-1:0 1px 2px rgba(10,20,40,.04),0 2px 6px rgba(10,20,40,.04);
--sh-2:0 2px 4px rgba(10,20,40,.04),0 12px 28px -10px rgba(10,20,40,.12);
--sh-3:0 30px 70px -30px rgba(10,20,40,.32),0 8px 24px -12px rgba(10,20,40,.14);
--sh-blue:0 10px 30px -10px rgba(18,102,255,.45);
--pad:clamp(56px,4.6vw,78px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;background:var(--white);color:var(--ink);
font-family:var(--body);font-size:16px;line-height:1.6;
-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:rgba(18,102,255,.18)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.024em;line-height:1.06;margin:0}
h1{font-size:clamp(38px,4.6vw,66px);letter-spacing:-.032em}
h2{font-size:clamp(30px,3.5vw,50px);letter-spacing:-.028em}
h3{font-size:clamp(19px,1.5vw,23px);letter-spacing:-.02em;line-height:1.2}
p{margin:0}
.lede{color:var(--muted);font-size:clamp(15.5px,1.15vw,17.5px);line-height:1.62;max-width:52ch}
/* ---------- layout ---------- */
.wrap{width:min(1120px,calc(100% - 72px));margin-inline:auto}
.wrap--narrow{width:min(940px,calc(100% - 72px))}
.section{position:relative;padding-block:var(--pad)}
.section--tight{padding-block:clamp(42px,3.4vw,58px)}
.section--surface,
.section--surface2{background:var(--white)}
.section--navy{background:var(--navy);color:#fff}
.section--navy h2{color:#fff}
.section--navy .lede{color:rgba(255,255,255,.62)}
.section--flush-top{padding-top:clamp(20px,3vw,48px)}
.section--flush-bottom{padding-bottom:clamp(20px,3vw,48px)}
/* ---------- eyebrow: −24° skew bar motif ---------- */
.eyebrow{
display:inline-flex;align-items:center;gap:10px;
font-family:var(--body);font-size:11.5px;font-weight:600;
letter-spacing:.15em;text-transform:uppercase;color:var(--blue);
margin:0 0 20px;
}
.eyebrow::before{
content:"";width:14px;height:6px;border-radius:2px;
background:var(--blue);transform:skewX(-24deg);flex:none;
}
.eyebrow--muted{color:var(--muted)}
.eyebrow--muted::before{background:var(--line-2)}
.eyebrow--onNavy{color:var(--blue-2)}
.eyebrow--onNavy::before{background:var(--blue-2);box-shadow:0 0 14px rgba(114,165,255,.7)}
.head{max-width:23ch}
.head--wide{max-width:26ch}
.head + .lede{margin-top:22px}
/* ---------- buttons ---------- */
.btn{
--bg:var(--blue);--fg:#fff;
display:inline-flex;align-items:center;gap:9px;
padding:13px 22px;border-radius:11px;
background:var(--bg);color:var(--fg);
font-family:var(--body);font-size:14.5px;font-weight:550;letter-spacing:-.006em;
position:relative;isolation:isolate;
transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,background .2s;
will-change:transform;
}
.btn--primary{box-shadow:var(--sh-blue)}
.btn--primary:hover{box-shadow:0 14px 34px -8px rgba(18,102,255,.55)}
.btn--ghost{--bg:transparent;--fg:var(--ink);border:1px solid var(--line-2)}
.btn--ghost:hover{background:rgba(10,20,40,.035)}
.btn--onNavy{--bg:#fff;--fg:var(--navy);box-shadow:0 14px 40px -14px rgba(0,0,0,.7)}
.btn--ghostNavy{--bg:transparent;--fg:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.16)}
.btn--ghostNavy:hover{background:rgba(255,255,255,.06)}
.btn--sm{padding:9px 16px;font-size:13.5px;border-radius:9px}
.btn i{display:inline-block;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.btn:hover i{transform:translateX(3px)}
.btn:hover i.dn{transform:translateY(3px)}
.btn:active{transform:translateY(1px) scale(.99)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.reassure{margin-top:20px;font-size:13.5px;color:var(--muted);display:flex;align-items:center;gap:8px;justify-content:center}
.reassure .dot{width:5px;height:5px;border-radius:50%;background:var(--blue);flex:none}
/* ============================================================
NAVIGATION
============================================================ */
.nav{
position:fixed;inset:14px 0 auto;z-index:80;
display:flex;justify-content:center;pointer-events:none;
transition:top .5s cubic-bezier(.2,.8,.2,1);
}
.nav__inner{
pointer-events:auto;
width:min(1120px,calc(100% - 72px));
display:flex;align-items:center;gap:26px;
padding:11px 12px 11px 20px;
border-radius:15px;
background:rgba(255,255,255,.55);
border:1px solid rgba(10,20,40,.05);
box-shadow:0 1px 1px rgba(10,20,40,.02);
backdrop-filter:blur(0px) saturate(1);
transition:background .5s,box-shadow .5s,border-color .5s,padding .5s,backdrop-filter .5s,transform .5s cubic-bezier(.2,.8,.2,1);
}
.nav.is-stuck .nav__inner{
background:rgba(255,255,255,.82);
border-color:rgba(10,20,40,.09);
box-shadow:0 1px 2px rgba(10,20,40,.05),0 12px 34px -18px rgba(10,20,40,.28);
backdrop-filter:blur(18px) saturate(1.6);
padding:8px 10px 8px 18px;
transform:scale(.985);
}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:16.5px;letter-spacing:-.02em;flex:none}
.brand__mark{width:26px;height:26px;border-radius:8px;background:var(--navy);position:relative;overflow:hidden;flex:none}
.brand__mark::before,.brand__mark::after{content:"";position:absolute;border-radius:2px;transform:skewX(-24deg)}
.brand__mark::before{width:5px;height:15px;left:7px;top:5.5px;background:var(--blue)}
.brand__mark::after{width:5px;height:9px;left:14px;top:11.5px;background:var(--blue-2)}
.brand small{font-weight:450;opacity:.5}
.nav__links{display:flex;gap:3px;margin-right:auto}
.nav__links a{
padding:7px 12px;border-radius:8px;font-size:14px;font-weight:450;color:var(--muted);
transition:color .2s,background .2s;
}
.nav__links a:hover{color:var(--ink);background:rgba(10,20,40,.04)}
.nav__right{display:flex;align-items:center;gap:6px;flex:none}
.nav__signin{padding:9px 12px;font-size:14px;font-weight:450;color:var(--ink);border-radius:9px}
.nav__signin:hover{background:rgba(10,20,40,.04)}
.nav__burger{display:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);align-items:center;justify-content:center}
.nav__burger span{display:block;width:15px;height:1.5px;background:var(--ink);position:relative;transition:.3s}
.nav__burger span::before,.nav__burger span::after{content:"";position:absolute;left:0;width:15px;height:1.5px;background:var(--ink);transition:.3s}
.nav__burger span::before{top:-5px}.nav__burger span::after{top:5px}
.nav.is-open .nav__burger span{background:transparent}
.nav.is-open .nav__burger span::before{top:0;transform:rotate(45deg)}
.nav.is-open .nav__burger span::after{top:0;transform:rotate(-45deg)}
.mobilemenu{
position:fixed;inset:0;z-index:79;background:rgba(255,255,255,.97);
backdrop-filter:blur(20px);
padding:96px 26px 34px;
display:flex;flex-direction:column;gap:2px;
opacity:0;visibility:hidden;transform:translateY(-8px);
transition:opacity .35s,transform .35s,visibility .35s;
}
.mobilemenu.is-open{opacity:1;visibility:visible;transform:none}
.mobilemenu a{
font-family:var(--display);font-size:26px;font-weight:500;letter-spacing:-.02em;
padding:13px 0;border-bottom:1px solid var(--line);
}
.mobilemenu .btn{margin-top:26px;justify-content:center}
/* ============================================================
SPECTRA ONE PRODUCT UI — one design system, used everywhere.
Denser + smaller than marketing type. Operational, not showy.
============================================================ */
.ui{
--ui-bg:var(--surface);
--ui-side:var(--navy);
--ui-line:rgba(10,20,40,.08);
font-family:var(--body);
font-size:12.5px;line-height:1.45;color:var(--ink);
background:var(--ui-bg);
border:1px solid rgba(10,20,40,.1);
border-radius:var(--r-lg);
overflow:hidden;
box-shadow:var(--sh-3);
display:grid;grid-template-columns:186px minmax(0,1fr);
text-align:left;
}
.ui--noside{grid-template-columns:minmax(0,1fr)}
.ui--flat{box-shadow:var(--sh-2)}
.ui *{letter-spacing:-.004em}
/* sidebar */
.ui__side{background:var(--ui-side);padding:13px 10px;display:flex;flex-direction:column;gap:3px;min-width:0}
.ui__brand{display:flex;align-items:center;gap:8px;padding:3px 6px 13px;font-family:var(--display);font-size:13px;font-weight:600;color:#fff;letter-spacing:-.02em}
.ui__brand .brand__mark{width:20px;height:20px;border-radius:6px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}
.ui__brand .brand__mark::before{width:4px;height:11px;left:5.5px;top:4px}
.ui__brand .brand__mark::after{width:4px;height:7px;left:11px;top:8px}
.ui__seclabel{font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.3);padding:12px 7px 5px}
.ui__nav{
display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:7px;
color:rgba(255,255,255,.6);font-size:12px;font-weight:450;position:relative;
transition:background .25s,color .25s;
}
.ui__nav svg{width:13px;height:13px;flex:none;opacity:.8}
.ui__nav.is-active{background:rgba(18,102,255,.16);color:#fff}
.ui__nav.is-active svg{opacity:1;color:var(--blue-2)}
.ui__nav.is-active::before{
content:"";position:absolute;left:-10px;top:50%;transform:translateY(-50%) skewX(-24deg);
width:3px;height:15px;border-radius:2px;background:var(--blue);box-shadow:0 0 10px rgba(18,102,255,.8);
}
.ui__nav .ui__count{margin-left:auto;font-size:10px;color:rgba(255,255,255,.4);font-variant-numeric:tabular-nums}
.ui__sideft{margin-top:auto;display:flex;align-items:center;gap:8px;padding:8px 7px 2px;border-top:1px solid rgba(255,255,255,.07)}
.ui__sideft .av{width:20px;height:20px;font-size:9px}
.ui__sideft b{color:rgba(255,255,255,.9);font-weight:500;font-size:11.5px}
.ui__sideft span{color:rgba(255,255,255,.36);font-size:10px;display:block;line-height:1.2}
/* chrome: topbar, view tabs, filter bar */
.ui__main{display:flex;flex-direction:column;min-width:0;background:var(--ui-bg)}
.ui__top{
display:flex;align-items:center;gap:10px;padding:0 14px;height:42px;
background:#fff;border-bottom:1px solid var(--ui-line);flex:none;
}
.ui__title{font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:-.02em}
.ui__crumb{color:var(--muted);font-size:11.5px}
.ui__topright{margin-left:auto;display:flex;align-items:center;gap:6px}
.ui__search{
display:flex;align-items:center;gap:6px;height:26px;padding:0 10px;min-width:120px;
border:1px solid var(--ui-line);border-radius:7px;color:var(--muted);font-size:11.5px;background:var(--surface);
}
.ui__views{display:flex;align-items:center;gap:2px;padding:0 14px;height:36px;background:#fff;border-bottom:1px solid var(--ui-line);flex:none;overflow:hidden}
.ui__view{
position:relative;padding:0 10px;height:36px;display:flex;align-items:center;gap:6px;
font-size:11.5px;font-weight:450;color:var(--muted);white-space:nowrap;
}
.ui__view.is-active{color:var(--ink);font-weight:550}
.ui__view.is-active::after{content:"";position:absolute;left:6px;right:6px;bottom:0;height:2px;background:var(--blue);border-radius:2px 2px 0 0}
.ui__view svg{width:12px;height:12px}
.ui__filters{display:flex;align-items:center;gap:6px;padding:9px 14px;border-bottom:1px solid var(--ui-line);background:#fff;flex:none;overflow:hidden}
.chipf{
display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;
border:1px solid var(--ui-line);border-radius:6px;background:#fff;
font-size:11px;color:var(--muted);white-space:nowrap;
}
.chipf b{font-weight:550;color:var(--ink)}
.chipf--on{border-color:rgba(18,102,255,.35);background:rgba(18,102,255,.06);color:var(--blue)}
.chipf svg{width:11px;height:11px}
.ui__body{padding:13px;display:grid;gap:11px;min-width:0;align-content:start}
.ui__body--flush{padding:0}
/* cards + metrics */
.uic{background:#fff;border:1px solid var(--ui-line);border-radius:var(--r);padding:11px 12px;min-width:0}
.uic--pad{padding:13px 14px}
.uic__h{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.uic__h h5{margin:0;font-family:var(--display);font-size:12.5px;font-weight:600;letter-spacing:-.015em}
.uic__h .more{margin-left:auto;color:var(--muted);font-size:14px;line-height:1}
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
.kpi{background:#fff;border:1px solid var(--ui-line);border-radius:var(--r);padding:10px 11px}
.kpi__l{font-size:10.5px;color:var(--muted);font-weight:450;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.kpi__v{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-top:3px;line-height:1.1}
.kpi__d{font-size:10px;color:var(--blue);font-weight:500;margin-top:2px;font-variant-numeric:tabular-nums}
.kpi__d--flat{color:var(--muted)}
.kpi--accent{background:linear-gradient(180deg,rgba(18,102,255,.06),rgba(18,102,255,.02));border-color:rgba(18,102,255,.2)}
/* pills, avatars, bars — navy/blue/grey only */
.pill{display:inline-flex;align-items:center;gap:5px;height:19px;padding:0 8px;border-radius:99px;font-size:10.5px;font-weight:550;white-space:nowrap}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.pill--blue{background:rgba(18,102,255,.1);color:var(--blue-ink)}
.pill--navy{background:rgba(10,20,40,.07);color:var(--navy)}
.pill--soft{background:rgba(10,20,40,.045);color:var(--muted)}
.pill--out{background:transparent;border:1px solid var(--line-2);color:var(--muted)}
.pill--done{background:rgba(10,20,40,.055);color:var(--muted)}
.pill--done::before{display:none}
.pill--nodot::before{display:none}
.av{
width:22px;height:22px;border-radius:50%;flex:none;
display:grid;place-items:center;font-size:9.5px;font-weight:600;
background:rgba(10,20,40,.07);color:var(--navy);font-family:var(--display);
border:1.5px solid #fff;
}
.av--b{background:rgba(18,102,255,.14);color:var(--blue-ink)}
.av--n{background:var(--navy);color:#fff}
.avs{display:flex}
.avs .av+.av{margin-left:-7px}
.bar{height:5px;border-radius:99px;background:rgba(10,20,40,.07);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:var(--blue);width:0;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.bar--navy i{background:var(--navy)}
.bar--soft i{background:rgba(10,20,40,.28)}
/* rows / group tables (ClickUp-style status groups) */
.grp{background:#fff;border:1px solid var(--ui-line);border-radius:var(--r);overflow:hidden}
.grp__h{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--surface-2);border-bottom:1px solid var(--ui-line)}
.grp__h b{font-size:11.5px;font-weight:600}
.grp__h .n{font-size:10px;color:var(--muted);background:rgba(10,20,40,.06);border-radius:99px;padding:1px 6px;font-variant-numeric:tabular-nums}
.grp__h .sum{margin-left:auto;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.grp__h .caret{color:var(--muted);font-size:9px}
.row{display:grid;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--ui-line)}
.row:last-child{border-bottom:0}
.row--jobs{grid-template-columns:minmax(0,1.4fr) 100px minmax(0,.85fr) 84px 56px}
.row--stock{grid-template-columns:minmax(0,1.6fr) 62px 62px 62px minmax(0,.8fr)}
.row>*{min-width:0}
.row--head{padding-top:7px;padding-bottom:7px;background:var(--surface-2)}
.row--head>*{font-size:10px;color:var(--muted);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.row__t{font-weight:500;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row__s{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.num{font-variant-numeric:tabular-nums;font-family:var(--display);font-weight:500;font-size:12px}
.num--m{color:var(--muted);font-weight:450}
.right{text-align:right}
/* generic ui bits */
.ui-sep{height:1px;background:var(--ui-line)}
.tag{display:inline-block;font-size:10px;color:var(--muted);border:1px solid var(--ui-line);border-radius:5px;padding:1px 6px}
.mini{font-size:10.5px;color:var(--muted)}
.stack{display:grid;gap:8px}
.flex{display:flex;align-items:center;gap:8px}
.flex--between{justify-content:space-between}
.grow{flex:1;min-width:0}
/* ============================================================
CONTROL ROOM — the real Operations dashboard, built in HTML.
This used to be a screenshot; live text stays sharp at any
zoom and on any pixel density, which a bitmap cannot do.
State colours are scoped to .ui so the marketing palette
(navy / blue / grey) stays untouched everywhere else.
============================================================ */
.ui{--risk:#D92D20;--risk-t:rgba(217,45,32,.09);--amber:#B54708;--amber-t:rgba(247,144,9,.14);--ok:#067647;--ok-t:rgba(6,118,71,.10)}
/* Hero frame draws the product at 90%. Do NOT add a width here: percentages
inside a zoomed element already resolve in the element's own scaled space,
so the frame fills its column on its own. Widening it to 111.11% made the
frame overflow the stage to the right and clipped the last column.
Retune with the one number below; the floating cards match it. */
.ui--zoom{zoom:.9}
.stage .fc{zoom:.9}
/* topbar variant: account line above the page title, wide search */
.ui__top--stack{height:52px}
.ui__idb{display:grid;line-height:1.25;padding:2px 12px 2px 0;margin-right:2px;border-right:1px solid var(--ui-line)}
.ui__idb span{font-size:9px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.ui__idb b{font-family:var(--display);font-size:13.5px;font-weight:600;letter-spacing:-.02em}
.ui__search--wide{flex:1;max-width:400px;height:28px}
.ui__ic{width:14px;height:14px;color:var(--muted);flex:none}
.uitog{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px;border:1px solid var(--ui-line);border-radius:99px;background:#fff;color:var(--muted);flex:none}
.uitog svg{width:11px;height:11px}
.uitog i{width:22px;height:12px;border-radius:99px;background:rgba(10,20,40,.10);position:relative}
.uitog i::after{content:"";position:absolute;left:2px;top:2px;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(10,20,40,.28)}
/* workspace switcher at the top of the sidebar */
.ui__ws{display:flex;align-items:center;gap:7px;padding:6px 8px;margin-bottom:5px;border:1px solid rgba(255,255,255,.09);border-radius:8px;background:rgba(255,255,255,.03);font-size:11px;color:rgba(255,255,255,.62)}
.ui__ws svg{width:12px;height:12px;flex:none;opacity:.7}
.ui__ws span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui__ws b{margin-left:auto;font-size:10px;font-weight:500;color:var(--blue-2)}
/* page head */
.cr__head{display:flex;align-items:flex-start;gap:14px}
.cr__acc{display:block;width:26px;height:3px;border-radius:2px;background:var(--blue);margin-bottom:9px}
.cr__t{margin:0;font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:-.03em}
.cr__s{margin:3px 0 0;font-size:11px;color:var(--muted);line-height:1.45}
.cr__acts{margin-left:auto;display:flex;gap:7px;flex:none}
.uibtn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border:1px solid var(--line-2);border-radius:8px;background:#fff;font-size:11.5px;font-weight:500;white-space:nowrap}
.uibtn svg{width:12px;height:12px;color:var(--muted)}
.uibtn i{font-style:normal;font-size:10px;opacity:.9}
.uibtn--pri{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 5px 14px -6px rgba(18,102,255,.6)}
.uibtn--pri svg{color:#fff}
.uilink{font-size:11px;font-weight:500;color:var(--blue);white-space:nowrap;flex:none}
/* the four alert tiles */
.alerts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.alert{display:flex;gap:10px;background:#fff;border:1px solid var(--ui-line);border-radius:var(--r);padding:10px 11px;min-width:0}
.alert>div{min-width:0}
.alert__ic{width:26px;height:26px;border-radius:8px;flex:none;display:grid;place-items:center;background:rgba(10,20,40,.05);color:var(--muted)}
.alert__ic svg{width:13px;height:13px}
.alert__ic--risk{background:var(--risk-t);color:var(--risk)}
.alert__ic--blue{background:rgba(18,102,255,.1);color:var(--blue)}
.alert__l{margin:0;font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alert__v{display:block;font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.25;margin-top:1px}
.alert__v--risk{color:var(--risk)}
.alert__v--blue{color:var(--blue)}
.alert small{display:block;font-size:10px;color:var(--muted);line-height:1.35}
/* stage count strip */
.stages{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}
.st{background:#fff;border:1px solid var(--ui-line);border-radius:var(--r);padding:9px 11px;min-width:0}
.st__l{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st__v{font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.2;margin-top:2px}
.st__d{font-size:10px;color:var(--muted);margin-top:1px}
.st__d--late{color:var(--risk);font-weight:500}
/* lower body: worklist + side stack */
.cr__cols{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:11px;align-items:start}
.cr__side{display:grid;gap:11px;min-width:0}
/* priority worklist */
.uic--flush{padding:0;overflow:hidden}
.wl__h{display:flex;align-items:flex-start;gap:10px;padding:11px 12px 9px}
.wl__h h5{margin:0;font-family:var(--display);font-size:12.5px;font-weight:600;letter-spacing:-.015em}
.wl__chips{display:flex;gap:6px;padding:0 12px 10px;overflow:hidden}
.chipf--sol{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:500}
.row--wl{grid-template-columns:44px minmax(0,1.12fr) minmax(0,.82fr) 60px minmax(0,.74fr);gap:8px}
.row__s--ink{color:var(--ink);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.risk{display:inline-grid;place-items:center;min-width:30px;height:20px;padding:0 7px;border-radius:99px;font-size:10.5px;font-weight:600;font-variant-numeric:tabular-nums;background:var(--amber-t);color:var(--amber)}
.risk--hi{background:var(--risk-t);color:var(--risk)}
.age{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.age svg{width:11px;height:11px}
.age--late{color:var(--risk);font-weight:500}
/* next 7 days on site + stage load vs SLA */
.uic__t{margin:0;font-family:var(--display);font-size:12.5px;font-weight:600;letter-spacing:-.015em}
.uic__ic{width:13px;height:13px;color:var(--muted);flex:none}
.pill--ok{background:var(--ok-t);color:var(--ok)}
.onsite{display:flex;align-items:center;gap:10px;padding-top:9px;margin-top:9px;border-top:1px solid var(--ui-line)}
.onsite__d{font-size:10.5px;color:var(--muted);flex:none;font-variant-numeric:tabular-nums}
.load{display:grid;gap:8px}
.load__r{display:flex;align-items:baseline;gap:8px;font-size:11px}
.load__r>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.load__n{margin-left:auto;flex:none}
.load__late{margin-left:auto;flex:none;font-size:10px;font-weight:600;color:var(--risk)}
.load__late+.load__n{margin-left:0}
.load .bar{margin-top:4px}
.bar--late i{background:var(--risk)}
@media (max-width:900px){
.alerts{grid-template-columns:repeat(2,minmax(0,1fr))}
.stages{grid-template-columns:repeat(3,minmax(0,1fr))}
.cr__cols{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:734px){
.cr__head{flex-wrap:wrap}
.cr__acts{margin-left:0}
.ui__idb{border-right:0}
.row--wl{grid-template-columns:40px minmax(0,1fr) 56px}
.row--wl>:nth-child(3),.row--wl>:nth-child(5){display:none}
}
/* ============================================================
HERO
============================================================ */
.hero{position:relative;padding-top:clamp(128px,13vw,178px);overflow:hidden;isolation:isolate}
.hero__glow{
position:absolute;left:50%;top:-10%;transform:translateX(-50%);
width:min(1300px,150%);height:760px;z-index:-1;pointer-events:none;
background:
radial-gradient(52% 42% at 50% 30%,rgba(18,102,255,.10),transparent 70%),
radial-gradient(30% 26% at 22% 44%,rgba(114,165,255,.10),transparent 70%),
radial-gradient(34% 30% at 80% 40%,rgba(10,20,40,.045),transparent 70%);
}
.hero__grid{
position:absolute;inset:0 0 auto;height:820px;z-index:-1;pointer-events:none;
background-image:linear-gradient(rgba(10,20,40,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(10,20,40,.045) 1px,transparent 1px);
background-size:72px 72px;background-position:center top;
-webkit-mask-image:radial-gradient(62% 52% at 50% 26%,#000,transparent 78%);
mask-image:radial-gradient(62% 52% at 50% 26%,#000,transparent 78%);
}
.hero__copy{text-align:center;display:flex;flex-direction:column;align-items:center;max-width:900px;margin-inline:auto}
.hero__copy h1{max-width:24ch;margin-inline:auto}
.hero__copy .lede{margin:24px auto 32px;max-width:57ch;text-align:center}
.hero .eyebrow{margin-bottom:24px}
/* the 3D stage */
.stage{
position:relative;margin-top:clamp(48px,5.5vw,76px);
perspective:2000px;perspective-origin:50% 22%;
}
.stage__inner{
position:relative;width:min(1120px,100%);margin-inline:auto;
transform-style:preserve-3d;
transform:rotateX(var(--rx,15deg)) rotateY(var(--ry,0deg)) rotateZ(var(--rz,0deg)) translateY(var(--ty,0px)) scale(var(--sc,.95));
transition:transform .9s cubic-bezier(.2,.8,.2,1);
will-change:transform;
}
.stage__inner .ui{box-shadow:0 60px 120px -40px rgba(10,20,40,.42),0 24px 50px -24px rgba(10,20,40,.22),0 0 0 1px rgba(10,20,40,.05)}
.stage__fade{
position:absolute;left:-10%;right:-10%;bottom:-2px;height:190px;pointer-events:none;
background:linear-gradient(180deg,rgba(255,255,255,0),#fff 78%);z-index:5;
}
/* floating cards */
.fc{
position:absolute;z-index:6;width:220px;
background:rgba(255,255,255,.94);
border:1px solid rgba(10,20,40,.07);
border-radius:13px;padding:11px 12px;
box-shadow:0 24px 50px -20px rgba(10,20,40,.28),0 4px 12px -6px rgba(10,20,40,.12);
backdrop-filter:blur(10px);
font-size:12px;text-align:left;
transform:translate3d(var(--dx,0),var(--dy,0),var(--dz,0));
transition:transform .8s cubic-bezier(.2,.8,.2,1);
will-change:transform;
}
.fc__k{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin-bottom:7px}
.fc__k svg{width:12px;height:12px}
.fc__k--muted{color:var(--muted)}
.fc b{font-size:13px;font-weight:600;font-family:var(--display);letter-spacing:-.02em;display:block}
.fc small{display:block;color:var(--muted);font-size:11px;line-height:1.45}
.fc__amt{font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.fc--lead{left:-6%;top:23%;--dz:90px}
.fc--install{right:-6%;top:2%;--dz:120px}
.fc--pay{right:-1%;bottom:16%;--dz:60px;width:180px}
.fc--stock{left:-2%;bottom:10%;--dz:40px;width:196px}
.fc__line{display:flex;justify-content:space-between;gap:8px;padding:3px 0;font-size:11px;color:var(--muted)}
.fc__line span:last-child{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
/* hero dashboard specifics */
.pipe{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.pipe__col{background:#fff;border:1px solid var(--ui-line);border-radius:10px;padding:9px;min-width:0}
.pipe__h{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;margin-bottom:8px;white-space:nowrap;overflow:hidden}
.pipe__h .n{font-size:9.5px;color:var(--muted);background:rgba(10,20,40,.06);border-radius:99px;padding:0 5px;margin-left:auto}
.pipe__h .d{width:6px;height:6px;border-radius:2px;transform:skewX(-24deg);background:var(--line-2);flex:none}
.pipe__col:nth-child(1) .d{background:var(--step-1)}
.pipe__col:nth-child(2) .d{background:var(--step-2)}
.pipe__col:nth-child(3) .d{background:var(--blue-2)}
.pipe__col:nth-child(4) .d{background:var(--blue)}
.pipe__col:nth-child(5) .d{background:var(--blue-deep)}
.pipe__col:nth-child(6) .d{background:var(--navy)}
.pcard{background:var(--surface);border:1px solid var(--ui-line);border-radius:8px;padding:7px 8px;margin-bottom:6px}
.pcard:last-child{margin-bottom:0}
.pcard b{display:block;font-size:11px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard span{display:block;font-size:10px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard .f{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.pcard .num{font-size:10.5px}
/* ============================================================
MOTION PRIMITIVES
============================================================ */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
.rv--sm{transform:translateY(12px)}
.rv--scale{transform:translateY(26px) scale(.985)}
.rv[data-d="1"]{transition-delay:.08s}.rv[data-d="2"]{transition-delay:.16s}
.rv[data-d="3"]{transition-delay:.24s}.rv[data-d="4"]{transition-delay:.32s}
.rv[data-d="5"]{transition-delay:.4s}.rv[data-d="6"]{transition-delay:.48s}
/* two-column feature layout */
.split{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(36px,5vw,80px);align-items:center}
.split--rev{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
.split--rev .split__copy{order:2}
.split__copy{max-width:440px}
.split__copy .lede{margin-top:20px}
.speclist{margin-top:30px;display:grid;gap:0;border-top:1px solid var(--line)}
.speclist li{list-style:none;display:flex;gap:13px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line)}
.speclist svg{width:15px;height:15px;color:var(--blue);flex:none;margin-top:3px}
.speclist b{font-weight:550;font-size:14.5px}
.speclist p{color:var(--muted);font-size:13.5px;margin-top:2px;line-height:1.5}
.section--navy .speclist{border-color:rgba(255,255,255,.1)}
.section--navy .speclist li{border-color:rgba(255,255,255,.1)}
.section--navy .speclist p{color:rgba(255,255,255,.55)}
.section--navy .speclist svg{color:var(--blue-2)}
/* ============================================================
5. SOLAR DESIGN
============================================================ */
.roof{position:relative;height:100%;min-height:300px;background:var(--roof);overflow:hidden;border-radius:0}
.roof>svg{position:absolute;inset:0;width:100%;height:100%}
.panel{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.6);transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.panel.on{opacity:1;transform:none}
.designbar{display:grid;grid-template-columns:1fr;gap:0}
.dspec{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:9px 12px;border-bottom:1px solid var(--ui-line)}
.dspec:last-child{border-bottom:0}
.dspec .k{font-size:11.5px;color:var(--muted)}
.dspec .v{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dspec .v--lg{font-size:17px}
.dspec .v--blue{color:var(--blue)}
.dstep{display:flex;align-items:center;gap:9px;padding:8px 12px;border-bottom:1px solid var(--ui-line);font-size:11.5px}
.dstep .n{width:17px;height:17px;border-radius:5px;background:rgba(10,20,40,.06);display:grid;place-items:center;font-size:9.5px;font-weight:600;font-family:var(--display);color:var(--muted);flex:none}
.dstep.is-active{background:rgba(18,102,255,.05)}
.dstep.is-active .n{background:var(--blue);color:#fff}
.dstep.is-active b{color:var(--blue)}
.dstep .chk{margin-left:auto;color:var(--blue);width:13px;height:13px}
/* ============================================================
6. FINANCE
============================================================ */
.paytl{position:relative;padding-left:22px}
.paytl::before{content:"";position:absolute;left:6.5px;top:8px;bottom:8px;width:1px;background:var(--ui-line)}
.paytl__i{position:relative;padding:9px 0;display:flex;align-items:center;gap:10px}
.paytl__i::before{
content:"";position:absolute;left:-19px;top:50%;transform:translateY(-50%);
width:9px;height:9px;border-radius:50%;background:#fff;border:2px solid var(--line-2);
transition:border-color .4s,background .4s,box-shadow .4s;
}
.paytl__i.done::before{background:var(--blue);border-color:var(--blue);box-shadow:0 0 0 3px rgba(18,102,255,.14)}
.paytl__i .l{font-size:12px;font-weight:500}
.paytl__i .s{font-size:10.5px;color:var(--muted)}
.paytl__i .a{margin-left:auto;font-family:var(--display);font-weight:600;font-size:13px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.moneybar{display:flex;height:8px;border-radius:99px;overflow:hidden;background:rgba(10,20,40,.06)}
.moneybar i{display:block;height:100%;width:0;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.moneybar i:nth-child(1){background:var(--navy)}
.moneybar i:nth-child(2){background:var(--blue)}
.moneybar i:nth-child(3){background:var(--blue-2)}
.legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:9px}
.legend span{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--muted)}
.legend i{width:7px;height:7px;border-radius:2px;transform:skewX(-24deg)}
/* ============================================================
7. INVENTORY
============================================================ */
.stockbar{display:flex;height:6px;border-radius:99px;overflow:hidden;background:rgba(10,20,40,.05)}
.stockbar i{height:100%;width:0;transition:width 1s cubic-bezier(.2,.8,.2,1)}
.stockbar i:nth-child(1){background:var(--navy)}
.stockbar i:nth-child(2){background:var(--blue)}
.stockbar i:nth-child(3){background:rgba(114,165,255,.5)}
.linkflow{display:grid;gap:0;border:1px solid var(--ui-line);border-radius:var(--r);background:#fff;overflow:hidden}
.linkflow__i{display:flex;align-items:center;gap:11px;padding:12px 14px;border-bottom:1px solid var(--ui-line);position:relative}
.linkflow__i:last-child{border-bottom:0}
.linkflow__i .ic{width:26px;height:26px;border-radius:8px;background:var(--surface-2);display:grid;place-items:center;flex:none;color:var(--muted)}
.linkflow__i.on .ic{background:rgba(18,102,255,.1);color:var(--blue)}
.linkflow__i .ic svg{width:14px;height:14px}
.linkflow__i b{font-size:12.5px;font-weight:550;display:block}
.linkflow__i span{font-size:11px;color:var(--muted)}
.linkflow__i .t{margin-left:auto;font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.linkflow__i::after{
content:"";position:absolute;left:26px;bottom:-1px;width:1px;height:0;background:var(--blue);
transition:height .5s ease;z-index:2;
}
.linkflow__i.on::after{height:13px}
.linkflow__i:last-child::after{display:none}
/* ============================================================
8. AUTOMATION (navy)
============================================================ */
.canvas{
position:relative;border-radius:var(--r-lg);overflow:hidden;
background:
radial-gradient(70% 60% at 50% 0%,rgba(18,102,255,.12),transparent 62%),
linear-gradient(180deg,var(--navy-grad-a),var(--navy-grad-b));
border:1px solid rgba(255,255,255,.08);
box-shadow:0 50px 110px -50px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05);
padding:clamp(20px,2.4vw,34px);
}
.canvas::before{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);
background-size:22px 22px;
-webkit-mask-image:radial-gradient(75% 70% at 50% 40%,#000,transparent 82%);
mask-image:radial-gradient(75% 70% at 50% 40%,#000,transparent 82%);
}
.canvas__bar{position:relative;display:flex;align-items:center;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.canvas__bar .name{font-family:var(--display);font-size:13px;font-weight:600;color:#fff;letter-spacing:-.02em}
.canvas__bar .chipf{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.6)}
.canvas__bar .chipf b{color:#fff}
.canvas__bar .live{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:11px;color:var(--blue-2)}
.canvas__bar .live i{width:6px;height:6px;border-radius:50%;background:var(--blue-2);box-shadow:0 0 0 0 rgba(114,165,255,.6);animation:ping 2.4s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(114,165,255,.5)}70%{box-shadow:0 0 0 8px rgba(114,165,255,0)}100%{box-shadow:0 0 0 0 rgba(114,165,255,0)}}
.flow{position:relative;display:grid;gap:12px;justify-items:center}
.flow__wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.node{
position:relative;z-index:1;width:min(330px,100%);
background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.1);
border-radius:11px;padding:11px 13px;
display:flex;align-items:center;gap:10px;
color:#fff;transition:border-color .5s,background .5s,box-shadow .5s,transform .5s;
}
.node.on{
background:rgba(18,102,255,.1);border-color:rgba(114,165,255,.42);
box-shadow:0 0 0 1px rgba(114,165,255,.14),0 14px 40px -16px rgba(18,102,255,.6);
transform:translateY(-1px);
}
.node__ic{width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.07);display:grid;place-items:center;flex:none;color:rgba(255,255,255,.62);transition:.5s}
.node__ic svg{width:14px;height:14px}
.node.on .node__ic{background:rgba(18,102,255,.22);color:#fff}
.node b{font-size:12.5px;font-weight:550;display:block;letter-spacing:-.01em}
.node span{font-size:11px;color:rgba(255,255,255,.48);display:block}
.node .st{margin-left:auto;font-size:10px;color:rgba(255,255,255,.4);font-variant-numeric:tabular-nums;white-space:nowrap}
.node.on .st{color:var(--blue-2)}
.node--trigger{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
.node--cond{width:min(330px,100%);border-style:dashed}
.branch{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(690px,100%)}
.node--yes,.node--no{width:100%}
.blabel{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:7px;display:flex;align-items:center;gap:6px}
.blabel i{width:5px;height:9px;border-radius:2px;transform:skewX(-24deg);background:rgba(255,255,255,.25)}
.blabel--yes{color:var(--blue-2)}.blabel--yes i{background:var(--blue-2)}
.wire{stroke:rgba(255,255,255,.14);stroke-width:1.4;fill:none}
.wire--lit{stroke:url(#wireGrad);stroke-width:1.6;stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset 1.4s cubic-bezier(.3,.7,.3,1)}
.wire--lit.on{stroke-dashoffset:0}
/* ============================================================
9. INSTALLATIONS
============================================================ */
.sched{display:grid;grid-template-columns:52px repeat(4,minmax(0,1fr));border:1px solid var(--ui-line);border-radius:var(--r);overflow:hidden;background:#fff}
.sched__hc{padding:9px 10px;border-bottom:1px solid var(--ui-line);border-right:1px solid var(--ui-line);background:var(--surface-2);font-size:11px;font-weight:600}
.sched__hc:last-child{border-right:0}
.sched__hc span{display:block;font-size:10px;color:var(--muted);font-weight:450}
.sched__t{padding:10px 8px;border-right:1px solid var(--ui-line);border-bottom:1px solid var(--ui-line);font-size:10px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.sched__c{border-right:1px solid var(--ui-line);border-bottom:1px solid var(--ui-line);padding:5px;min-height:56px}
.sched__c:nth-child(5n){border-right:0}
.jobcard{
background:#fff;border:1px solid var(--ui-line);border-left:3px solid var(--blue);
border-radius:8px;padding:6px 8px;height:100%;
box-shadow:0 1px 2px rgba(10,20,40,.05);
transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .3s;
}
.jobcard:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.jobcard b{display:block;font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jobcard span{display:block;font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jobcard--navy{border-left-color:var(--navy)}
.jobcard--soft{border-left-color:var(--line-2);background:var(--surface)}
.jobcard .f{display:flex;align-items:center;gap:5px;margin-top:5px}
.jobcard.moved{animation:slot .9s cubic-bezier(.2,.8,.2,1)}
@keyframes slot{0%{transform:translateY(-58px) scale(.97);opacity:.4}100%{transform:none;opacity:1}}
.checkline{display:flex;gap:0;border:1px solid var(--ui-line);border-radius:var(--r);overflow:hidden;background:#fff}
.checkline__i{flex:1;padding:11px 12px;border-right:1px solid var(--ui-line);position:relative;min-width:0}
.checkline__i:last-child{border-right:0}
.checkline__i .k{font-size:11px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.checkline__i .s{font-size:10px;color:var(--muted);margin-top:2px}
.checkline__i .dot{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--line-2);margin-bottom:8px;display:grid;place-items:center;transition:.5s}
.checkline__i.done .dot{background:var(--blue);border-color:var(--blue)}
.checkline__i.done .dot svg{width:8px;height:8px;color:#fff}
.checkline__i.now .dot{border-color:var(--blue);box-shadow:0 0 0 3px rgba(18,102,255,.13)}
.checkline__i .dot svg{opacity:0}
.checkline__i.done .dot svg{opacity:1}
/* ============================================================
12. ANALYTICS
============================================================ */
.chartwrap{position:relative;height:150px}
.chartwrap svg{width:100%;height:100%;overflow:visible}
.cbar{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.cbar.on{transform:none}
.cline{stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 1.6s cubic-bezier(.3,.7,.3,1)}
.cline.on{stroke-dashoffset:0}
.carea{opacity:0;transition:opacity 1s .3s}
.carea.on{opacity:1}
.donut circle{transition:stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1)}
.srcrow{display:grid;grid-template-columns:minmax(0,1fr) 46px 40px;gap:9px;align-items:center;padding:6px 0;font-size:11.5px}
.srcrow .num{font-size:11.5px}
/* ============================================================
13. SHOWCASE (sticky)
============================================================ */
.showcase{position:relative}
.showcase__sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.showcase__tabs{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;margin-bottom:clamp(18px,2.4vw,30px)}
.sctab{
padding:7px 14px;border-radius:99px;font-size:12.5px;font-weight:500;
color:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.1);
transition:color .4s,background .4s,border-color .4s;white-space:nowrap;
}
.sctab.on{color:#fff;background:rgba(18,102,255,.16);border-color:rgba(114,165,255,.4)}
.showcase__frame{position:relative;width:min(1080px,calc(100% - 44px));margin-inline:auto;height:min(60vh,560px)}
.scpane{
position:absolute;inset:0;overflow:hidden;
display:grid;gap:11px;align-content:start;
opacity:0;transform:translateY(16px) scale(.99);
transition:opacity .55s cubic-bezier(.2,.8,.2,1),transform .65s cubic-bezier(.2,.8,.2,1);
pointer-events:none;
}
.scpane.on{opacity:1;transform:none;pointer-events:auto}
/* the rail already shows position */
.showcase__prog{display:none}
.showcase__prog i{display:block;height:100%;background:var(--blue);width:0;border-radius:99px}
/* ============================================================
14. FINAL CTA
============================================================ */
.finale{position:relative;overflow:hidden;text-align:center;padding-block:clamp(58px,5vw,88px) 0}
.finale__glow{
position:absolute;left:50%;top:12%;transform:translateX(-50%);width:min(1000px,140%);height:620px;
background:radial-gradient(46% 44% at 50% 40%,rgba(18,102,255,.3),transparent 68%);
pointer-events:none;filter:blur(10px);
}
.finale__inner{position:relative;z-index:2}
.finale h2{margin-inline:auto;max-width:17ch}
.finale .lede{margin:22px auto 34px;text-align:center;max-width:52ch}
.finale .cta-row{justify-content:center}
.finale__peek{
position:relative;z-index:1;margin:clamp(56px,6vw,88px) auto -2px;width:min(1000px,calc(100% - 44px));
perspective:1600px;
}
.finale__peek .ui{
transform:rotateX(11deg) scale(.98);transform-origin:top center;
box-shadow:0 -20px 90px -30px rgba(18,102,255,.5),0 40px 90px -40px rgba(0,0,0,.9);
border-color:rgba(255,255,255,.1);
}
.finale__mask{position:absolute;left:-4%;right:-4%;bottom:0;height:72%;background:linear-gradient(180deg,transparent,var(--navy-deep) 82%);z-index:3;pointer-events:none}
/* ============================================================
15. FOOTER
============================================================ */
.foot{background:var(--navy-deep);color:#fff;padding:clamp(56px,6vw,84px) 0 34px;position:relative;z-index:4}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.foot__brand .brand{color:#fff;font-size:17px}
.foot__brand .brand__mark{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}
.foot__brand p{color:rgba(255,255,255,.42);font-size:13px;margin-top:16px;max-width:30ch;line-height:1.6}
.foot h5{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.34);margin:0 0 16px;font-family:var(--body)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.foot a{font-size:13.5px;color:rgba(255,255,255,.65);transition:color .2s}
.foot a:hover{color:#fff}
.foot__bot{
display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
margin-top:clamp(40px,5vw,64px);padding-top:22px;border-top:1px solid rgba(255,255,255,.08);
font-size:12.5px;color:rgba(255,255,255,.36);
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width:1180px){
.nav__links{display:none}
/* the links go at 1180 but the burger only arrived at 860,
which left no navigation at all in between */
.nav__burger{display:flex}
.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
.kpi:nth-child(4),.kpi:nth-child(5){display:none}
.fc--stock{display:none}
}
@media (max-width:1024px){
.split,.split--rev{grid-template-columns:minmax(0,1fr);gap:36px}
.split--rev .split__copy{order:0}
.split__copy{max-width:560px}
.foot__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}
.foot__brand{grid-column:1/-1}
.fc--lead{left:-2%}.fc--install{right:-2%}
}
@media (max-width:860px){
.nav__burger{display:flex}
.nav__signin{display:none}
.ui{grid-template-columns:minmax(0,1fr)}
.ui__side{display:none}
.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
.kpi:nth-child(3){display:none}
.pipe{grid-template-columns:repeat(3,minmax(0,1fr))}
.pipe__col:nth-child(n+4){display:none}
.row--jobs{grid-template-columns:minmax(0,1fr) 114px 80px}
.row--jobs>*:nth-child(2){justify-self:start}
.row--jobs>:nth-child(3),.row--jobs>:nth-child(5){display:none}
.row--stock{grid-template-columns:minmax(0,1fr) 52px 52px}
.row--stock>:nth-child(4),.row--stock>:nth-child(5){display:none}
.fc{width:170px;padding:9px 10px}
.fc--pay{right:-2%;bottom:22%}
.fc__amt{font-size:18px}
.stage{perspective:1400px}
.sched{grid-template-columns:44px repeat(2,minmax(0,1fr))}
.sched__hc:nth-child(n+4),.sched__c:nth-child(3n+1):nth-child(n+7){display:none}
.checkline{flex-wrap:wrap}
.checkline__i{flex:1 1 33%;border-bottom:1px solid var(--ui-line)}
.branch{grid-template-columns:1fr}
.showcase__sticky{height:auto;padding-block:clamp(56px,7vw,90px);position:static}
.showcase__frame{height:auto}
.showcase__track{height:auto !important}
#scUI .ui__body{position:static !important;overflow:visible}
.scpane{position:relative;inset:auto;opacity:1;transform:none;pointer-events:auto}
.scpane:not(.on){display:none}
}
@media (max-width:560px){
:root{--pad:clamp(44px,9vw,62px)}
.eyebrow{font-size:10px;letter-spacing:.1em}
.kpi__v{font-size:16.5px}
.ui__crumb{display:none}
.fc--install{display:none}
.wrap,.wrap--narrow{width:calc(100% - 32px)}
.hero{padding-top:112px}
.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
.pipe{grid-template-columns:repeat(2,minmax(0,1fr))}
.pipe__col:nth-child(n+3){display:none}
.fc--lead{left:0;top:auto;bottom:-6%;--dz:0}
.fc--install{right:0;top:-4%;--dz:0}
.fc--pay{display:none}
.btn{padding:14px 20px;width:100%;justify-content:center}
.nav__right .btn{width:auto;padding:9px 14px}
.cta-row{width:100%}
.foot__grid{grid-template-columns:minmax(0,1fr)}
.checkline__i{flex:1 1 50%}
.ui__views,.ui__filters{overflow-x:auto}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
.rv{opacity:1;transform:none}
.stage__inner{transform:rotateX(6deg) scale(.97)}
}
/* automation connectors */
.conn{position:relative;width:2px;height:24px;border-radius:2px;background:rgba(255,255,255,.13);overflow:hidden;z-index:1}
.conn i{position:absolute;left:-1px;width:4px;height:60%;border-radius:2px;top:-70%;
background:linear-gradient(180deg,rgba(114,165,255,0),var(--blue-2));opacity:0}
.conn.on i{opacity:1;animation:pulse-down 1.1s cubic-bezier(.4,0,.6,1) forwards}
.conn.on{background:rgba(114,165,255,.3)}
@keyframes pulse-down{from{top:-70%}to{top:110%}}
.conn--right{margin-right:calc(-1 * min(690px,100%) / 4);}
.conn-split{width:min(690px,100%);height:44px;overflow:visible}
@media (max-width:860px){
.conn--right{margin-right:0}
.conn-split{height:22px}
.conn-split path{display:none}
}
/* ============================================================
SPLIT PANEL CONTAINMENT
.split__ui had no rule, so it kept min-width:auto and refused
to shrink below its content — that is what pushed the finance
panel off the left edge of the viewport.
============================================================ */
.split__ui{
min-width:0; /* the actual fix */
position:relative;
border-radius:22px;
padding:clamp(14px,1.6vw,22px);
background:
radial-gradient(120% 100% at 0% 0%,rgba(18,102,255,.07),transparent 58%),
var(--surface);
border:1px solid var(--line);
overflow:hidden; /* crop the panel, monday-style */
}
.section--surface2 .split__ui{background:
radial-gradient(120% 100% at 0% 0%,rgba(18,102,255,.07),transparent 58%),
#fff}
/* The panel keeps a comfortable internal width and is cropped by the
tray rather than being squeezed until the numbers collide. */
.split__ui > .ui{
min-width:540px;
width:100%;
border-radius:14px;
}
/* Soft fade on the cropped edge so it reads as a window, not a cut-off. */
.split__ui::after{
content:"";position:absolute;top:0;bottom:0;right:0;width:64px;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.55));
pointer-events:none;z-index:2;
}
@media (max-width:900px){
.split__ui{padding:12px;border-radius:18px}
.split__ui > .ui{min-width:0}
.split__ui::after{display:none}
}
/* ============================================================
MONDAY-STYLE TRAY — copy left, product panel right, one
rounded container holding both with real air around them.
============================================================ */
.mtray{
display:grid;
grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
gap:clamp(28px,3.4vw,56px);
align-items:center;
background:var(--surface);
border:1px solid var(--line);
border-radius:clamp(20px,2vw,30px);
padding:clamp(26px,3.2vw,52px);
}
.mtray__copy{min-width:0;max-width:400px}
.mtray__copy .head{margin-top:14px}
.mtray__copy .lede{margin-top:16px;font-size:15px}
.mtray__copy .linkflow{margin-top:clamp(24px,2.6vw,36px)}
.mtray__ui{
min-width:0;
background:#fff;
border:1px solid var(--line);
border-radius:clamp(14px,1.4vw,20px);
padding:clamp(12px,1.2vw,18px);
overflow:hidden;
}
.mtray__ui > .ui{
min-width:520px;width:100%;
border-radius:12px;box-shadow:none;border-color:var(--line);
}
@media (max-width:900px){
.mtray{grid-template-columns:minmax(0,1fr);gap:28px;padding:20px;align-items:start}
.mtray__copy{max-width:none}
.mtray__ui{padding:10px}
.mtray__ui > .ui{min-width:0}
}
/* ============================================================
QUOTE BUILDER — cinematic scroll-linked introduction
The page gradually becomes the product. Driven entirely by
one scroll progress value; every transform is a CSS variable
so nothing here fights the reveal system.
============================================================ */
.qb{position:relative}
.qb__track{height:330vh;position:relative}
.qb__sticky{
position:sticky;top:0;height:100vh;
display:grid;align-items:center;
overflow:hidden;
/* nothing inside this box can affect layout outside it, so the browser can
skip re-laying-out the rest of the page while the sequence runs */
contain:layout paint;
}
.qb__grid{
display:grid;
grid-template-columns:var(--tw,34%) minmax(0,1fr);
gap:var(--tg,clamp(32px,4vw,68px));
align-items:center;
width:min(calc(100% - 72px), calc(1120px + var(--wide,0px)));
}
/* ---------- left column ---------- */
/* intro, steps and invite occupy the same grid cell so they can cross-fade,
but the column keeps the height of the tallest one. They were absolutely
positioned, which left the column at zero height — it then centred that
nothing against a very tall frame and the copy drew far too low. */
.qb__col{
position:relative;min-width:0;opacity:var(--colo,1);
display:grid;align-content:center;
}
/* one step darker than --muted: this copy sits next to a bright product
frame, and #5F6B7A washed out against it */
.qb__col{--qb-copy:#414C5C}
.qb__intro,.qb__steps,.qb__invite{grid-area:1/1}
.qb__intro{opacity:var(--introo,1);transform:translate3d(0,calc(var(--introy,0) * -1px),0)}
.qb__intro .head--wide{margin-top:14px}
.qb__intro .lede{margin-top:20px;font-size:clamp(15px,1.05vw,17px)}
.qb__sub{
margin-top:18px;font-size:13.5px;font-weight:550;color:var(--ink);
letter-spacing:-.005em;
}
/* steps are stacked in the same box; only one is visible at a time */
.qb__steps{position:relative;margin-top:0;display:grid;align-content:center}
.qb__step{
grid-area:1/1;width:100%;
opacity:var(--so,0);
transform:translate3d(0,calc((1 - var(--so,0)) * 18px),0);
/* no transition — this is scroll-linked. A transition here would restart on
every frame and turn a crisp fade into a laggy smear. */
pointer-events:none;
will-change:opacity,transform;
}
.qb__num{
display:block;font-family:var(--body);font-size:11.5px;font-weight:600;
letter-spacing:.14em;text-transform:uppercase;color:var(--blue);
}
.qb__step h3{
font-family:var(--display);font-size:clamp(22px,2vw,30px);font-weight:600;
letter-spacing:-.03em;line-height:1.15;margin:14px 0 0;max-width:18ch;
}
.qb__step p{margin:16px 0 0;color:var(--qb-copy);font-size:15.5px;font-weight:450;line-height:1.6;max-width:38ch}
.qb__invite{
width:100%;
opacity:var(--invo,0);
transform:translate3d(0,calc((1 - var(--invo,0)) * 16px),0);
pointer-events:none;
}
.qb__invite.is-on{pointer-events:auto}
.qb__invite h3{
font-family:var(--display);font-size:clamp(22px,2vw,30px);font-weight:600;
letter-spacing:-.03em;margin:0;
}
.qb__invite p{margin:14px 0 0;color:var(--qb-copy);font-size:15.5px;font-weight:450;line-height:1.6;max-width:40ch}
.qb__hint{
display:inline-flex;align-items:center;gap:8px;margin-top:20px;
font-size:13px;font-weight:550;color:var(--blue);
}
.qb__hint i{font-style:normal;animation:qbnudge 1.6s ease-in-out infinite}
@keyframes qbnudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
/* ---------- the product frame ---------- */
.qb__screen{min-width:0;perspective:1800px;perspective-origin:50% 30%}
.qb__frame{
position:relative;
border-radius:16px;
border:1px solid var(--line-2);
background:#fff;
overflow:hidden;
transform-origin:50% 100%;
/* translate3d promotes this to its own compositor layer, so the whole
scroll sequence is a GPU transform rather than a per-frame repaint */
transform:
translate3d(0,calc(var(--fy,42) * 1px),0)
scale(var(--fs,.78))
rotateX(calc(var(--fr,9) * 1deg));
/* blur is quantised to whole pixels in JS — a fractional value here would
force a full re-rasterisation of the UI subtree on every single frame */
filter:blur(calc(var(--fb,5) * 1px));
/* the shadow is static: the scale transform shrinks it naturally, which is
both cheaper and closer to how depth actually reads */
box-shadow:
0 54px 90px -30px rgba(10,20,40,.30),
0 2px 8px -4px rgba(10,20,40,.12);
will-change:transform;
backface-visibility:hidden;
}
/* pointer events only once the frame is flat and unscaled */
.qb__frame{pointer-events:none}
.qb__frame.is-live{pointer-events:auto;filter:none}
.qb__chrome{
display:flex;align-items:center;gap:8px;
padding:9px 13px;border-bottom:1px solid var(--line);
font-size:11.5px;font-weight:550;color:var(--muted);
background:var(--surface);
}
.qb__chrome .brand__mark{width:15px;height:15px}
/* the spotlight and cursor live in here so their percentage boxes are
relative to the screenshot itself, not to the framed area above it */
.qb__mount{position:relative;aspect-ratio:16/9;background:#fff}
.qb__mount > img,.qb__mount > iframe,.qb__mount > .qb__poster{
display:block;width:100%;height:100%;border:0;object-fit:cover;object-position:top center;
}
.qb__poster{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.qb__placeholder{
position:absolute;inset:12px;display:grid;place-content:center;gap:6px;text-align:center;
border:1px dashed var(--line-2);border-radius:10px;background:var(--surface);
}
.qb__placeholder b{font-family:var(--display);font-size:15px;font-weight:600;color:var(--ink)}
.qb__placeholder span{font-size:12.5px;color:var(--muted)}
/* ---------- spotlight ---------- */
.qb__spot{
position:absolute;pointer-events:none;z-index:4;
left:calc(var(--sx,4) * 1%);top:calc(var(--sy,8) * 1%);
width:calc(var(--sw,40) * 1%);height:calc(var(--sh,22) * 1%);
border:1.5px solid var(--blue);border-radius:10px;
background:rgba(18,102,255,.06);
box-shadow:0 0 0 9999px rgba(10,20,40,calc(var(--dim,0) * .16));
opacity:var(--spo,0);
transition:opacity .3s linear,
left .7s cubic-bezier(.2,.8,.2,1), top .7s cubic-bezier(.2,.8,.2,1),
width .7s cubic-bezier(.2,.8,.2,1), height .7s cubic-bezier(.2,.8,.2,1);
}
/* ---------- simulated cursor ---------- */
.qb__cursor{
position:absolute;z-index:5;pointer-events:none;
left:calc(var(--cx,50) * 1%);top:calc(var(--cy,50) * 1%);
width:19px;height:19px;opacity:var(--curo,0);
transition:opacity .3s linear,
left .8s cubic-bezier(.2,.8,.2,1), top .8s cubic-bezier(.2,.8,.2,1);
}
.qb__cursor svg{width:100%;height:100%;fill:var(--navy);
filter:drop-shadow(0 2px 4px rgba(10,20,40,.35))}
.qb__cursor::after{
content:"";position:absolute;left:-9px;top:-9px;width:34px;height:34px;
border-radius:50%;border:2px solid var(--blue);opacity:0;
}
.qb__cursor.is-click::after{animation:qbclick .55s cubic-bezier(.2,.8,.2,1)}
@keyframes qbclick{0%{opacity:.8;transform:scale(.3)}100%{opacity:0;transform:scale(1)}}
/* ---------- micro notifications ---------- */
.qb__toasts{position:absolute;right:14px;bottom:14px;z-index:6;
display:grid;gap:8px;justify-items:end;pointer-events:none}
.qb__toast{
display:inline-flex;align-items:center;gap:8px;
padding:8px 12px;border-radius:10px;
background:#fff;border:1px solid var(--line);
box-shadow:0 12px 30px -12px rgba(10,20,40,.28);
font-size:12px;font-weight:500;color:var(--ink);white-space:nowrap;
opacity:var(--to,0);
transform:translateY(calc((1 - var(--to,0)) * 10px));
transition:opacity .35s linear,transform .5s cubic-bezier(.2,.8,.2,1);
}
.qb__toast i{width:6px;height:6px;border-radius:50%;background:var(--blue);flex:none}
.qb__toast b{font-variant-numeric:tabular-nums;font-weight:600}
/* ---------- mobile: no sticky, no 3D, live from the start ---------- */
@media (max-width:900px){
.qb__track{height:auto}
.qb__sticky{position:static;height:auto;padding-block:var(--pad)}
.qb__grid{grid-template-columns:minmax(0,1fr);gap:28px;width:min(100% - 44px,1120px)}
.qb__steps{position:static;display:grid;gap:26px;margin-top:30px}
.qb__step{position:static;opacity:1;transform:none}
.qb__step h3{font-size:20px}
.qb__invite{position:static;opacity:1;transform:none;margin-top:30px}
.qb__frame{transform:none;filter:none;pointer-events:auto;
box-shadow:0 18px 40px -18px rgba(10,20,40,.24)}
.qb__spot,.qb__cursor{display:none}
.qb__toasts{display:none}
.qb__mount{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){
.qb__frame{transform:none;filter:none}
.qb__cursor,.qb__spot{display:none}
.qb__hint i{animation:none}
}
/* ============================================================
EXPANDING PANELS + THE BLOCK BELOW THEM
Both sit in one dark band. A stage bar rides above the row;
one panel is open and the rest are spines. Widths come from
flex-grow so the panels size against each other, and the
heights are staggered off a bottom baseline.
============================================================ */
.xp-sec{
position:relative;overflow:hidden;color:#fff;
background:
radial-gradient(78% 58% at 80% 6%,rgba(43,127,255,.30),rgba(5,8,15,0) 62%),
radial-gradient(66% 56% at 10% 94%,rgba(52,86,220,.24),rgba(5,8,15,0) 66%),
linear-gradient(180deg,#080E1C 0%,#05080F 58%,#070C18 100%);
}
.xp-sec .wrap{position:relative;z-index:2}
.xp-head{max-width:660px;margin:0 auto clamp(20px,2.2vw,32px)}
.xp-head h2{margin-top:14px;color:#fff}
.xp-head .lede{margin:16px auto 0;color:rgba(255,255,255,.66)}
.xp-head .eyebrow{color:var(--blue-2);justify-content:center}
/* --- the row --- */
.xp-row{
/* exactly five panels wide: one open at 2.35 plus four closed,
with four 8px gaps. Centred, so the spare width at big screens
stays empty instead of stretching the panels. */
width:min(1310px,calc(100% - 48px));margin-inline:auto;
}
.xp{
display:flex;gap:8px;align-items:flex-end;justify-content:center;
height:clamp(340px,26vw,420px);
}
.xp__p{
/* Widths come from flex-grow against a zero basis, so the open panel and
the closed ones animate against each other. 2.35 is Hostinger's measured
ratio — 515px open against 219px closed. Anything steeper turns the
closed panels into slivers and strands the open panel's content. */
position:relative;min-width:0;flex:1 1 0;
height:calc(var(--h,1) * 100%);
border-radius:16px;overflow:hidden;
background:linear-gradient(170deg,#101B31,#070D19);
border:1px solid var(--line-2);
transition:flex-grow .6s cubic-bezier(.4,0,.2,1),
height .6s cubic-bezier(.4,0,.2,1),
background-color .4s ease;
}
.xp__p.is-on{
/* Blue glass rather than a solid fill -- same construction as the chat
bubbles: a tint over a blur of the page behind, so the dark ground
reads through it instead of being covered. */
flex-grow:2.35;height:100%;
background:linear-gradient(158deg,
rgba(52,130,255,.52) 0%,
rgba(30,92,224,.38) 52%,
rgba(18,66,172,.32) 100%);
-webkit-backdrop-filter:blur(24px) saturate(155%);
backdrop-filter:blur(24px) saturate(155%);
border-color:rgba(150,190,255,.4);
box-shadow:
inset 0 1px 0 rgba(190,215,255,.45),
0 30px 70px -34px rgba(18,102,255,.6);
}
.xp__hit{
position:absolute;inset:0;z-index:3;width:100%;
display:flex;flex-direction:column;align-items:flex-start;gap:5px;
padding:clamp(14px,1.4vw,20px);
background:none;border:0;cursor:pointer;text-align:left;
}
.xp__label{
font-family:var(--display);font-size:20px;font-weight:500;
letter-spacing:-.018em;color:#fff;white-space:nowrap;
}
.xp__p.is-on .xp__hit{pointer-events:none}
.xp__p.is-on .xp__label{opacity:0;transition:opacity .18s ease}
/* --- the open panel --- */
.xp__body{
position:absolute;inset:0;z-index:2;
display:flex;flex-direction:column;
padding:clamp(18px,1.9vw,30px);
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity .3s ease,visibility 0s linear .4s;
}
.xp__p.is-on .xp__body{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .45s ease .18s}
.xp__body h3{
font-family:var(--display);font-size:20px;font-weight:500;
letter-spacing:-.018em;color:#fff;margin:0;
}
.xp__body > p{
margin:12px 0 0;color:rgba(255,255,255,.75);
font-size:14px;max-width:30ch;line-height:1.5;
}
/* the white slab floating inside the open panel */
.xp__card{
/* Silver glass. Still see-through, but saturate() below 1 pulls the colour
out of the blue behind it, so what reads through is grey rather than a
lighter blue. The veil on top is a cool near-white, and brightness lifts
it far enough that dark text sits on it comfortably. */
position:relative;margin-top:auto;width:100%;
border-radius:20px;color:var(--ink);
padding:16px 18px;font-size:13px;line-height:1.45;
background:linear-gradient(158deg,
rgba(246,247,249,.64) 0%,
rgba(232,234,238,.56) 46%,
rgba(217,220,225,.52) 100%);
border:1px solid rgba(255,255,255,.72);
-webkit-backdrop-filter:blur(30px) saturate(22%) brightness(1.22);
backdrop-filter:blur(30px) saturate(22%) brightness(1.22);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
inset 1px 0 0 rgba(255,255,255,.6),
inset 0 -1px 0 rgba(10,20,40,.10),
0 22px 52px -22px rgba(0,0,0,.55);
}
.xp__card ol li::marker{color:var(--muted)}
.xp__card ol li span{color:var(--ink)}
.xp__card .top{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.xp__card .top s{
width:24px;height:24px;border-radius:7px;flex:none;text-decoration:none;
display:grid;place-items:center;
background:linear-gradient(155deg,#3E8BFF,#1553D6);
border:1px solid rgba(255,255,255,.6);
box-shadow:0 4px 10px -3px rgba(18,102,255,.5),inset 0 1px 0 rgba(255,255,255,.5);
}
.xp__card .top s svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.xp__card .top b{font-weight:600;color:var(--ink)}
.xp__card ol{margin:0;padding-left:20px;color:var(--ink);display:grid;gap:3px}
.xp__card ol span{color:var(--ink)}
@media (hover:hover){ .xp__p:not(.is-on):hover{filter:brightness(1.5)} }
.xp__hit:focus-visible{outline:2px solid var(--blue-2);outline-offset:-4px;border-radius:inherit}
/* ============================================================
THE BLOCK BELOW — copy on the left, a stack of prompts and a
toolbar on the right.
============================================================ */
.sa{
display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
gap:clamp(30px,5vw,96px);align-items:center;
margin-top:clamp(56px,6vw,96px);
}
/* Art on the left, copy on the right. Done with order rather than by moving
the markup, so the heading still comes first for screen readers and for
the stacked layout below. */
.sa{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
.sa__art{order:1}
.sa__copy{order:2}
.sa h2{color:#fff;max-width:15ch}
.sa p{margin-top:20px;color:rgba(255,255,255,.68);font-size:clamp(15px,1.1vw,17px);line-height:1.62;max-width:46ch}
/* a glass slab rather than an underlined link — it reads as a control
on the dark band, where a plain rule tended to disappear */
.sa__cta{
display:inline-flex;align-items:center;gap:14px;
margin-top:clamp(28px,3vw,46px);
padding:16px 16px 16px 30px;border-radius:16px;
background:rgba(255,255,255,.075);
border:1px solid rgba(255,255,255,.17);
-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 22px 48px -24px rgba(0,0,0,.85);
color:#fff;font-size:16px;font-weight:600;letter-spacing:-.01em;
transition:background-color .22s ease,border-color .22s ease,transform .22s ease,box-shadow .22s ease;
}
.sa__cta:hover{
background:rgba(255,255,255,.13);
border-color:rgba(150,190,255,.46);
transform:translateY(-2px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 26px 56px -22px rgba(18,102,255,.55);
}
.sa__cta:active{transform:translateY(0)}
.sa__cta s{
width:34px;height:34px;border-radius:11px;flex:none;text-decoration:none;
display:grid;place-items:center;
background:var(--blue);box-shadow:0 8px 20px -8px rgba(18,102,255,.9);
transition:transform .22s ease;
}
.sa__cta:hover s{transform:translateX(3px)}
.sa__cta s svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sa__art{
position:relative;min-width:0;height:clamp(300px,30vw,380px);
perspective:1000px;transform-style:preserve-3d;
}
/* a pool of light behind the stack, as on the reference */
.sa__art::before{
content:"";position:absolute;left:50%;top:46%;z-index:0;
width:78%;aspect-ratio:1.35;transform:translate(-50%,-50%);
background:radial-gradient(50% 50% at 50% 50%,rgba(80,140,255,.38),rgba(10,20,40,0) 70%);
filter:blur(6px);pointer-events:none;
}
/* every floating layer drifts with the pointer, each at its own depth */
.sa__icon,.sa__q,.sa__bar{
transform:
translate3d(calc(var(--mx,0) * var(--d,8) * 1px), calc(var(--my,0) * var(--d,8) * .7px), 0)
rotateY(calc(var(--mx,0) * 5deg)) rotateX(calc(var(--my,0) * -5deg));
transition:transform .5s cubic-bezier(.22,1,.36,1);
will-change:transform;
}
.sa__icon{
position:absolute;top:0;left:2%;z-index:4;
width:clamp(58px,5.4vw,76px);aspect-ratio:1;
border-radius:24%;display:grid;place-items:center;
background:linear-gradient(155deg,#4E96FF,#1553D6);
border:1px solid rgba(255,255,255,.3);
box-shadow:0 20px 44px -16px rgba(18,102,255,.9),inset 0 1px 0 rgba(255,255,255,.4);
--d:22;
}
.sa__icon svg{width:52%;height:52%;fill:#fff}
.sa__q{
position:absolute;left:0;right:0;
display:flex;align-items:center;gap:12px;
border-radius:16px;padding:15px 20px;
font-size:clamp(14px,1.2vw,18px);font-weight:500;
-webkit-backdrop-filter:blur(20px) saturate(160%);
backdrop-filter:blur(20px) saturate(160%);
border:1px solid rgba(255,255,255,.2);
box-shadow:0 20px 44px -22px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.22);
}
.sa__q svg{width:17px;height:17px;flex:none;stroke:rgba(255,255,255,.7);fill:none;stroke-width:1.9}
.sa__q1{top:14%;left:12%;right:6%;color:rgba(255,255,255,.6);z-index:1;background:rgba(255,255,255,.07);--d:6}
.sa__q2{top:33%;left:5%;right:13%;color:rgba(255,255,255,.82);z-index:2;background:rgba(255,255,255,.11);--d:11}
.sa__q3{top:52%;left:0;right:20%;color:#fff;z-index:3;background:rgba(255,255,255,.16);flex-direction:column;align-items:stretch;gap:10px;--d:16}
.sa__q3 .line{display:flex;align-items:center;gap:12px}
.sa__q3 .skills{display:flex;align-items:center;gap:8px;font-size:14px;color:rgba(255,255,255,.66);font-weight:500}
.sa__bar{
position:absolute;left:0;right:34%;bottom:2%;z-index:5;
display:flex;gap:4px;padding:8px;border-radius:18px;
background:rgba(255,255,255,.92);
-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
border:1px solid rgba(255,255,255,.8);
box-shadow:0 24px 50px -22px rgba(0,0,0,.6);
--d:26;
}
.sa__bar span{
flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
padding:8px 4px;border-radius:11px;
font-size:11.5px;font-weight:600;color:var(--muted);
}
.sa__bar span svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sa__bar span.is-on{background:rgba(18,102,255,.12);color:var(--blue-deep)}
@media (max-width:980px){
.sa{grid-template-columns:minmax(0,1fr);gap:44px}
.sa__copy{order:1}
.sa__art{order:2;height:clamp(280px,62vw,340px)}
}
@media (max-width:860px){
/* Keep the laptop arrangement on a phone: the row stays horizontal with
one panel open and the rest as spines, and scrolls sideways instead of
collapsing into a stack. Widths are explicit here rather than flex-grow,
because the row is now wider than the screen. */
.xp{
overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
scroll-snap-type:x proximity;
height:clamp(300px,78vw,400px);
gap:8px;padding-bottom:2px;
}
.xp::-webkit-scrollbar{display:none}
.xp__p{
flex:0 0 auto;min-width:0;width:62px;scroll-snap-align:start;
transition:width .55s cubic-bezier(.22,1,.36,1),
height .55s cubic-bezier(.22,1,.36,1),
background-color .45s ease;
}
/* flex-grow:0 as well — the desktop .is-on rule sets grow:3.6 and beats
the shorthand on .xp__p, which let the open panel blow past this width */
.xp__p.is-on{flex-grow:0;width:min(272px,74vw)}
.xp__hit{padding:13px 11px}
.xp__label{font-size:13.5px}
.xp__body{padding:16px}
.xp__body h3{font-size:20px}
.xp__body > p{font-size:12.5px;max-width:none}
.xp__card{width:100%;padding:11px 12px;font-size:11.5px}
.xp__card ol{padding-left:18px}
}
@media (prefers-reduced-motion:reduce){
.xp__p,.xp__body{transition:none}
}
/* ============================================================
TALL-VIEWPORT CAP
With a fixed 1280px layout viewport, a phone's height in CSS
pixels balloons (roughly 2,600px on a 390px handset), so any
100vh stage turns into a screen and a half of empty space.
These caps are scoped to viewports that are taller than they
are wide, which a laptop never is — so desktop is untouched.
The vw figures reproduce the laptop's own proportions:
at 1440x900, 100vh is 62.5vw and 330vh is 206vw.
============================================================ */
@media (max-aspect-ratio: 1/1){
.qb__sticky{height:min(100vh,66vw)}
.qb__track{height:min(330vh,210vw)}
.showcase__sticky{height:min(100vh,66vw)}
}
/* ============================================================
MESH FIELD — the animated gradient band behind the closing copy.
Canvas 2D rather than WebGL: the field is six soft blobs drawn
into a buffer an eighth of the size and stretched back up, so the
blur is a free side effect of the upscale and the per-frame cost
is a few hundred pixels. The grain is a static SVG overlay, so it
costs nothing per frame. Everything pauses off-screen.
============================================================ */
/* ------------------------------------------------------------
MESH BAND — a dark panel that opens out to full bleed as it
scrolls through, with a flowing gradient field behind it.
--bleed runs 0 -> 1 (set from JS): 0 is an inset rounded card,
1 is edge to edge with square corners.
------------------------------------------------------------ */
.section--mesh{
--bleed:0;
--panel-gutter:calc((clamp(14px,4.6vw,62px) + max(0px,(100vw - 1340px)/2)) * (1 - var(--bleed)));
--panel-radius:calc(clamp(18px,2.6vw,34px) * (1 - var(--bleed)));
position:relative;isolation:isolate;
background:var(--white);color:#fff;
padding-block:clamp(26px,3vw,52px);
overflow:clip;
}
.mesh__panel{
position:relative;overflow:hidden;
background:#03060E;
border-radius:var(--panel-radius);
clip-path:inset(0 var(--panel-gutter) 0 var(--panel-gutter) round var(--panel-radius));
padding-block:clamp(74px,7vw,112px);
}
.section--mesh .wrap{position:relative;z-index:3}
/* the field itself — painted small, stretched big, faded in once ready */
.mesh{
position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;
opacity:0;transition:opacity 1.4s cubic-bezier(.22,1,.36,1);
}
.mesh[data-ready="true"]{opacity:1}
/* a wide soft bloom anchored under the copy */
.mesh__glow{
position:absolute;left:50%;bottom:-52%;z-index:1;
width:min(1020px,124%);height:78%;
transform:translateX(-50%) scale(calc(.94 + .06*var(--bleed)));
pointer-events:none;user-select:none;
opacity:calc(.6 + .4*var(--bleed));
background:radial-gradient(50% 50% at 50% 50%,
rgba(176,205,255,.34) 0%,
rgba(104,150,255,.17) 36%,
rgba(30,72,190,.11) 60%,
rgba(3,6,14,0) 78%);
}
.mesh__grain{
position:absolute;inset:0;z-index:2;pointer-events:none;
opacity:.42;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
background-size:140px 140px;
}
/* copy on the dark band */
.section--mesh h2{
color:#fff;
background:linear-gradient(0deg,rgba(190,203,224,.92) -14%,#fff 76%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
}
.section--mesh .lede{color:rgba(255,255,255,.68)}
.section--mesh .btn--primary{box-shadow:0 16px 44px -12px rgba(18,102,255,.8)}
@media (max-width:734px){
.section--mesh{padding-block:0}
.mesh__panel{padding-block:clamp(72px,14vw,110px);border-radius:0;clip-path:none}
}
@media (prefers-reduced-motion:reduce){
.mesh{transition:none}
.section--mesh{--bleed:1}
}
/* ============================================================
AUTOMATIONS — tabbed panels, each with a dark product frame.
Prefixed au- throughout: the site already uses .panel, .is-on
and .frame for other things. Reuses the site's .wrap and
.eyebrow so it keeps the page's rhythm.
============================================================ */
.au-sec{--au-soft:rgba(18,102,255,.10)}
.au-sec .wrap{width:min(1240px,calc(100% - 120px))}
.au-head{text-align:center;max-width:660px;margin:0 auto clamp(24px,2.6vw,34px)}
.au-head .eyebrow{justify-content:center}
/* floating pill bar */
.au-tabs{display:flex;justify-content:center;margin-bottom:clamp(20px,2.2vw,30px)}
.au-tabs__in{
display:flex;gap:2px;padding:6px;border-radius:999px;
background:#fff;border:1px solid var(--line);
box-shadow:0 1px 2px rgba(10,20,40,.05),0 10px 30px -18px rgba(10,20,40,.22);
overflow-x:auto;scrollbar-width:none;max-width:100%;
}
.au-tabs__in::-webkit-scrollbar{display:none}
.au-tabs__b{
appearance:none;border:0;cursor:pointer;white-space:nowrap;background:transparent;
padding:11px 22px;border-radius:999px;
font-family:var(--body);font-size:14.5px;font-weight:500;color:var(--muted);
transition:color .18s ease,background-color .18s ease;
}
.au-tabs__b:hover{color:var(--ink)}
.au-tabs__b.au-on{background:var(--au-soft);color:var(--blue-ink);font-weight:600}
.au-tray{
background:var(--surface-2);border:1px solid var(--line);
border-radius:clamp(20px,2vw,28px);padding:clamp(20px,2.4vw,36px);
}
/* All panels occupy the same grid cell and cross-fade. Previously they were
display:none / display:grid, so the tray collapsed to zero height on every
switch and snapped back — that was most of the glitch. Sharing a cell keeps
the tray at the height of the tallest panel, so nothing moves. */
.au-tray{display:grid}
.au-panel{
grid-area:1/1;
display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);
gap:clamp(36px,4vw,72px);align-items:center;
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity .3s ease,visibility 0s linear .3s;
}
.au-panel.au-on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s ease}
.au-copy{min-width:0}
.au-copy h3{
font-family:var(--display);font-size:clamp(26px,2.4vw,34px);font-weight:600;
letter-spacing:-.03em;line-height:1.12;max-width:14ch;margin:0;color:var(--ink);
}
.au-hl{color:var(--blue)}
.au-body{margin:14px 0 0;color:var(--muted);font-size:15.5px;max-width:38ch;line-height:1.6}
.au-cta{
display:inline-flex;align-items:center;gap:9px;margin-top:22px;
padding:13px 26px;border-radius:999px;background:var(--blue);color:#fff;
font-family:var(--body);font-size:15px;font-weight:600;line-height:1;text-decoration:none;
box-shadow:0 8px 20px -10px rgba(18,102,255,.65);
transition:background-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.au-cta:hover{background:var(--blue-deep);box-shadow:0 10px 24px -10px rgba(18,102,255,.75)}
.au-cta:active{transform:translateY(1px)}
.au-cta i{font-style:normal;transition:transform .18s ease}
.au-cta:hover i{transform:translateX(3px)}
.au-frame{
position:relative;border-radius:16px;overflow:hidden;min-width:0;
background:radial-gradient(120% 90% at 50% 8%,#12213C 0%,#0A1428 46%,#06101F 100%);
border:1px solid rgba(10,20,40,.10);
box-shadow:0 30px 70px -28px rgba(10,20,40,.40),0 3px 10px -5px rgba(10,20,40,.14);
}
/* fixed stage scaled to the column — keeps the animations in their landscape
layout at any width; the 0.3cm padding is the gap to the frame edge */
.au-stage{position:relative;width:100%;overflow:hidden;border-radius:13px;padding:0.3cm}
.au-frame iframe{display:block;border:0;background:transparent;transform-origin:top left}
@media (max-width:820px){
.au-sec .wrap{width:calc(100% - 32px)}
.au-tray{padding:16px;border-radius:18px}
.au-panel{grid-template-columns:minmax(0,1fr);gap:20px}
.au-copy h3,.au-body{max-width:60ch}
}
/* ============================================================
ECOSYSTEM / SWITCHBOARD — the busbar from the reference, with
logos instead of names and the taps flowing left to right.
Each row holds the full set twice, so one loop copy is always
wider than the viewport and the seam never shows.
============================================================ */
.lg-sec{overflow:hidden}
.bus__head{margin-bottom:clamp(30px,3.4vw,48px)}
.bus__head .head--wide{max-width:18ch}
/* the fade lives on the rig, not the bar: the bar is 3px tall, so a mask on
it clips every chip and the hub down to a 3px band */
.board-rig{
position:relative;padding-block:20px;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.busbar{
position:relative;height:3px;border-radius:2px;
margin-block:128px;
background:linear-gradient(90deg,transparent,var(--blue) 8%,var(--blue) 92%,transparent);
}
.busrow{position:absolute;left:0;right:0;overflow:hidden}
.busrow--up{bottom:3px}
.busrow--dn{top:3px}
.bustrack{display:flex;align-items:flex-end;gap:clamp(16px,1.8vw,26px);
width:max-content;will-change:transform}
.busrow--dn .bustrack{align-items:flex-start}
.bustrack--a{animation:busflow 54s linear infinite}
.bustrack--b{animation:busflow 72s linear infinite}
.busbar:hover .bustrack{animation-play-state:paused}
/* both rows travel the same way — leftward. Each row holds the set twice, so
sliding exactly one copy's width and repeating leaves no seam. */
@keyframes busflow{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.tapitem{display:flex;flex-direction:column;align-items:center;flex:none}
.tap{width:1px;background:var(--line-2,rgba(10,20,40,.14));display:block}
.tapchip{
display:flex;align-items:center;gap:9px;white-space:nowrap;
padding:8px 14px;border-radius:9999px;
background:#fff;border:1px solid var(--line);
box-shadow:0 4px 14px -8px rgba(10,20,40,.30);
transition:transform .28s cubic-bezier(.2,.8,.2,1),border-color .28s ease,box-shadow .28s ease;
}
.tapchip:hover{transform:translateY(-2px);border-color:var(--blue)}
.tapchip img{display:block;height:22px;width:auto}
.tapchip b{
font-family:var(--body);font-size:13px;font-weight:500;color:var(--muted);
letter-spacing:-.005em;
}
.busbar__core{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
display:flex;align-items:center;gap:11px;white-space:nowrap;
padding:13px 22px;border-radius:9999px;
background:var(--navy);color:#fff;
font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.02em;
box-shadow:0 18px 40px -18px rgba(10,20,40,.65);
}
.bus__foot{
display:grid;grid-template-columns:repeat(3,1fr);
gap:clamp(20px,3vw,48px);
margin-top:clamp(46px,5vw,74px);padding-top:30px;
border-top:1px solid var(--line);
}
.bus__foot h4{font-family:var(--display);font-size:1rem;font-weight:600;margin:0 0 8px;color:var(--ink)}
.bus__foot p{font-size:.906rem;color:var(--muted);margin:0;line-height:1.6}
@media (max-width:760px){
.busbar{margin-block:96px}
.tapchip{padding:7px 11px;gap:7px}
.tapchip img{height:18px}
.tapchip b{font-size:12px}
.busbar__core{font-size:.92rem;padding:11px 17px}
.bus__foot{grid-template-columns:1fr;gap:22px}
}
@media (prefers-reduced-motion:reduce){ .bustrack{animation:none} }
/* ============================================================
SHOWCASE — the "one job" arrangement: a vertical rail of
stages on the left, the live screen on the right. The rail is
ordered because the work is ordered; the numbers aren't
decoration, the sequence is the argument.
============================================================ */
.showcase{background:#fff;padding-top:clamp(34px,3.4vw,54px)}
.oj-head{max-width:640px;margin-bottom:clamp(30px,3.6vw,52px)}
.oj-head h2{max-width:20ch;margin-top:18px}
.oj-head .lede{margin-top:18px;max-width:54ch}
.showcase__sticky{background:transparent}
/* a light tray holds the rail and the screen together, so the pair reads as
one surface sitting on the page rather than two things floating on it */
.oj-grid{
/* same container as .wrap so the tray lines up with the headline above it */
width:min(1120px,calc(100% - 72px));margin-inline:auto;
background:var(--surface-2,#F1F4F9);
border:1px solid var(--line);
border-radius:clamp(18px,1.8vw,26px);
padding:clamp(22px,2.6vw,40px);
display:grid;grid-template-columns:minmax(230px,300px) minmax(0,1fr);
gap:clamp(26px,3.2vw,56px);align-items:center;
}
/* ── the rail ─────────────────────────────────────────────── */
.oj-rail{display:grid;gap:2px;align-content:center;position:relative}
.sctab{
appearance:none;background:transparent;border:1px solid transparent;cursor:pointer;
display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;
padding:14px 18px;border-radius:var(--r-md,14px);text-align:left;width:100%;
font-family:var(--body);
transition:background-color .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.sctab:hover{background:rgba(255,255,255,.55)}
.oj-dot{
width:9px;height:9px;border-radius:50%;margin-top:6px;flex:none;
background:var(--line-2,rgba(10,20,40,.18));
transition:background-color .25s ease,box-shadow .25s ease;
}
.oj-txt{display:grid;gap:3px;min-width:0}
.oj-txt b{font-size:15px;font-weight:600;color:var(--muted);transition:color .25s ease}
.oj-txt small{font-size:13px;color:var(--muted);opacity:.8;line-height:1.45}
/* the selected stage is navy, so it reads as the one thing chosen rather
than as another white card on a light tray */
.sctab.on{
background:var(--navy);border-color:var(--navy);
box-shadow:0 1px 2px rgba(10,20,40,.10),0 18px 38px -20px rgba(10,20,40,.55);
}
.sctab.on .oj-dot{background:var(--blue);box-shadow:0 0 0 4px rgba(18,102,255,.30)}
.sctab.on .oj-txt b{color:#fff}
.sctab.on .oj-txt small{color:rgba(244,246,250,.62);opacity:1}
/* ── the screen ───────────────────────────────────────────── */
.showcase__frame{
position:relative;width:100%;margin:0;min-width:0;height:min(54vh,500px);
border-radius:var(--r-md,14px);overflow:hidden;
border:1px solid var(--line);
box-shadow:0 1px 2px rgba(10,20,40,.05),0 26px 56px -34px rgba(10,20,40,.40);
}
@media (max-width:900px){
.oj-grid{grid-template-columns:minmax(0,1fr);gap:20px;padding:16px;border-radius:16px}
.oj-txt small{display:none}
.sctab{padding:11px 14px}
.showcase__frame{height:auto}
}
/* ---------- brand mark ----------
The drawn square is replaced by the monogram from the logo, as a
background on the same span so the 26px, 20px and 15px variants all
keep their sizes. The two dark surfaces take the light cut. */
.brand__mark{
background:url("../img/logo-mark.webp") center/contain no-repeat;
border:0;border-radius:0;
}
.brand__mark::before,.brand__mark::after{content:none}
.foot__brand .brand__mark,.ui__brand .brand__mark{
background:url("../img/logo-mark-light.webp") center/contain no-repeat;
border:0;
}