/* ============================================================
BroadVision - Stylesheet
"The bigger picture." dark editorial palette + brand triangles.
Single dark theme (toggle preserved but tokens align). v21.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
/* Geist - self-hosted (latin) */
@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;
src:url('/fonts/ca95d38b-281a-450f-b3ae-93c346b8060c.woff2') format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;
src:url('/fonts/ca95d38b-281a-450f-b3ae-93c346b8060c.woff2') format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:600;font-display:swap;
src:url('/fonts/ca95d38b-281a-450f-b3ae-93c346b8060c.woff2') format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400;font-display:swap;
src:url('/fonts/69d56ea9-3b14-4ea8-b24d-c840e68765f2.woff2') format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:500;font-display:swap;
src:url('/fonts/69d56ea9-3b14-4ea8-b24d-c840e68765f2.woff2') format('woff2')}
:root {
/* dark "paper" surface */
--bg: #0d0f12;
--bg-2: #14171c;
--bg-3: #1b1f25;
--ink: #ebe9e3;
--ink-2: #b4b3ad;
--ink-soft: #9a9893;
--ink-mute: #7a7c80;
--line: rgba(235,233,227,0.10);
--line-2: rgba(235,233,227,0.16);
/* primary accent → BroadVision sky blue */
--accent: #5dbce3;
--accent-2: #3fa6d0;
--accent-soft: rgba(93,188,227,0.16);
--accent-ink: #0d0f12;
/* Brand triangle palette (sampled from the BroadVision mark) */
--c-lime: #8bc53f;
--c-teal: #4ec5bf;
--c-pink: #ec4f8c;
--c-magenta: #e6217f;
--c-purple: #a878c8;
--c-blue: #6f93d8;
--c-cyan: #5dbce3;
--c-sky: #5dbce3;
--c-amber: #f39c12;
--c-orange: #f39c12;
--c-red: #e6217f;
--font-display:'Space Grotesk','Inter Display','Inter',system-ui,-apple-system,sans-serif;
--font-body:'Geist','Inter',system-ui,-apple-system,sans-serif;
--font-mono:'Geist Mono','JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--container:1200px;
--container-narrow:780px;
--radius:14px;
--radius-sm:10px;
--t-fast:.18s;
--t-med:.32s;
--t-slow:.55s;
--ease:cubic-bezier(.16,1,.3,1);
--logo-filter: none;
--grid-ink: rgba(235,233,227,0.045);
}
/* Toggle preserved - tokens align with root so flipping is near-inert.
A slightly lighter "evening" variant is offered for users who prefer it. */
/* ---------- Light mode (Anthropic-inspired clean off-white) ---------- */
[data-theme="light"] {
--bg: #F2F0EA; /* softened off-white */
--bg-2: #E8E5DD; /* surface */
--bg-3: #DFDCD4; /* deeper surface */
--paper: #F2F0EA;
--ink: #2C2B28;
--ink-2: #4A4842;
--ink-soft: #6A6862;
--ink-mute: #96938C;
--line: rgba(44,43,40,0.10);
--line-2: rgba(44,43,40,0.16);
/* Primary accent - BV magenta (the strongest signature in the logo) */
--accent: #D4147A;
--accent-2: #B0185D;
--accent-soft: rgba(212,20,122,0.14);
--accent-ink: #F7F2E4;
/* Full BV brand chroma - close to the logo originals, only mildly
deepened so they sit confidently on warm sand */
--c-lime: #7DB22A;
--c-teal: #2DAFA6;
--c-pink: #E5237B;
--c-magenta: #D4147A;
--c-purple: #8E5BBE;
--c-blue: #4A78D6;
--c-cyan: #2FA0CC;
--c-sky: #2FA0CC;
--c-amber: #E2911A;
--c-orange: #E2911A;
--c-red: #D4147A;
--grid-ink: rgba(44,43,40,0.06);
--logo-filter: invert(1) hue-rotate(180deg) brightness(.85);
color-scheme: light;
}
::selection{background:var(--c-sky);color:var(--bg)}
/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
body{
margin:0;
font-family:var(--font-body);
font-size:17px;
line-height:1.6;
color:var(--ink);
background:var(--bg);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0 0 1em}
address{font-style:normal}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;margin:0}
::selection{background:var(--accent);color:var(--accent-ink)}
.skip-link{
position:absolute;left:-9999px;top:auto;
background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:8px;z-index:1000;
}
.skip-link:focus{left:16px;top:16px}
/* ---------- Page transition (subtle fade-up) ---------- */
main{animation: pageIn .6s var(--ease) both}
@keyframes pageIn{
from{opacity:0;transform:translateY(6px)}
to{opacity:1;transform:translateY(0)}
}
body.is-leaving main{opacity:0;transform:translateY(-4px);transition:opacity .25s var(--ease),transform .25s var(--ease)}
/* ---------- Container ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px;position:relative}
.container--narrow{max-width:var(--container-narrow)}
@media (max-width:720px){.container{padding-inline:18px}}
/* ---------- Buttons ---------- */
.btn{
display:inline-flex;align-items:center;gap:10px;
padding:12px 22px;font-weight:600;font-size:15px;
border-radius:999px;border:1px solid var(--ink);
background:var(--ink);color:var(--bg);
transition:transform var(--t-fast) var(--ease),background var(--t-med) var(--ease),color var(--t-med) var(--ease),border-color var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease);
white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 1px 0 color-mix(in oklab,var(--accent) 50%, transparent) inset}
.btn--primary:hover{background:var(--accent-2);border-color:var(--accent-2);box-shadow:0 8px 24px -8px color-mix(in oklab,var(--accent) 60%, transparent)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--ghost:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn--lg{padding:15px 28px;font-size:16px}
.btn--sm{padding:9px 16px;font-size:14px}
.btn__arrow{width:14px;height:14px;transition:transform var(--t-med) var(--ease);flex-shrink:0}
.btn:hover .btn__arrow{transform:translateX(5px)}
/* ---------- Header - Refined Liquid Glass (subtle, elegant) ---------- */
.header{
position:sticky;top:0;z-index:50;
background:
linear-gradient(180deg,
color-mix(in oklab, var(--bg) 70%, transparent) 0%,
color-mix(in oklab, var(--bg) 82%, transparent) 100%);
backdrop-filter:saturate(120%) blur(14px);
-webkit-backdrop-filter:saturate(120%) blur(14px);
border-bottom:1px solid transparent;
transition:border-color var(--t-med) var(--ease),background var(--t-med) var(--ease);
isolation:isolate;
}
.header::before{
/* subtle top edge line */
content:"";position:absolute;inset:0 0 auto 0;height:1px;
background:linear-gradient(90deg,
transparent 0%,
color-mix(in oklab, var(--ink) 10%, transparent) 50%,
transparent 100%);
opacity:.35;pointer-events:none;
}
.header::after{
/* hairline bottom edge */
content:"";position:absolute;inset:auto 0 0 0;height:1px;
background:linear-gradient(90deg, transparent, var(--line) 30%, var(--line) 70%, transparent);
opacity:0;transition:opacity var(--t-med) var(--ease);pointer-events:none;
}
.header.is-scrolled{
background:
linear-gradient(180deg,
color-mix(in oklab, var(--bg) 85%, transparent) 0%,
color-mix(in oklab, var(--bg) 92%, transparent) 100%);
}
.header.is-scrolled::after{opacity:1}
/* Wider, full-bleed header - uses generous horizontal padding instead of the 1200px container so logo, nav and actions breathe across the whole top */
.header .header__inner{
max-width:none;width:100%;
padding-left:clamp(20px,3.2vw,44px);
padding-right:clamp(20px,3.2vw,44px);
display:flex;align-items:center;justify-content:space-between;
gap:clamp(20px,3vw,40px);
height:76px;
}
/* Centered nav so it visually anchors the bar regardless of side widths */
.header .nav{flex:1;display:flex;justify-content:center}
.logo{display:inline-flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0;line-height:1}
.logo__img{height:72px;width:auto;display:block}
.logo__word{
font-family:var(--font-display);font-weight:700;
font-size:11px;letter-spacing:.06em;text-indent:.06em;
color:var(--ink);text-transform:uppercase;display:block;
}
.nav__list{display:flex;align-items:center;gap:6px;
position:relative;
padding:5px;border-radius:999px;
background:linear-gradient(180deg,
color-mix(in oklab, var(--ink) 4%, transparent) 0%,
color-mix(in oklab, var(--ink) 2%, transparent) 100%);
border:1px solid color-mix(in oklab, var(--ink) 6%, transparent);
backdrop-filter:blur(10px) saturate(115%);
-webkit-backdrop-filter:blur(10px) saturate(115%);
box-shadow:
inset 0 1px 0 color-mix(in oklab, var(--ink) 6%, transparent),
0 4px 14px -8px rgba(0,0,0,.30);
}
.nav__item{position:relative}
.nav__link{
position:relative;
display:inline-flex;align-items:center;gap:7px;
padding:10px 20px;font-size:14.5px;font-weight:500;color:var(--ink-2);letter-spacing:.005em;
border-radius:999px;
border:1px solid transparent;
transition:color var(--t-med) var(--ease),
background var(--t-med) var(--ease),
border-color var(--t-med) var(--ease),
box-shadow var(--t-med) var(--ease),
transform var(--t-med) var(--ease);
overflow:hidden;
isolation:isolate;
}
/* subtle ambient sheen on hover */
.nav__link::before{
content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
background:
linear-gradient(180deg,
color-mix(in oklab, var(--ink) 5%, transparent),
color-mix(in oklab, var(--ink) 2%, transparent));
opacity:0;transition:opacity var(--t-med) var(--ease);
}
.nav__link::after{
content:"";position:absolute;left:-30%;top:0;bottom:0;width:40%;z-index:-1;
background:linear-gradient(115deg,
transparent 0%,
color-mix(in oklab, var(--ink) 12%, transparent) 50%,
transparent 100%);
transform:translateX(0) skewX(-12deg);
opacity:0;transition:opacity .5s var(--ease), transform .9s var(--ease);
pointer-events:none;
}
.nav__link:hover,.nav__link:focus-visible{
color:var(--ink);
border-color:color-mix(in oklab, var(--ink) 10%, transparent);
box-shadow:
inset 0 1px 0 color-mix(in oklab, var(--ink) 14%, transparent),
0 4px 12px -8px rgba(0,0,0,.25);
}
.nav__link:hover::before,.nav__link:focus-visible::before{opacity:1}
.nav__link:hover::after,.nav__link:focus-visible::after{
opacity:.4;transform:translateX(320%) skewX(-12deg);
}
.nav__link.is-active,.nav__link[aria-current="page"]{
color:var(--ink);
border-color:color-mix(in oklab, var(--ink) 14%, transparent);
background:
linear-gradient(180deg,
color-mix(in oklab, var(--ink) 8%, transparent),
color-mix(in oklab, var(--ink) 3%, transparent));
box-shadow:
inset 0 1px 0 color-mix(in oklab, var(--ink) 20%, transparent),
0 4px 14px -10px rgba(0,0,0,.30);
}
.nav__link.is-active::after,.nav__link[aria-current="page"]::after{
content:"";position:absolute;left:50%;bottom:-9px;top:auto;width:5px;height:5px;
transform:translateX(-50%);
background:var(--accent);border-radius:50%;opacity:1;
box-shadow:0 0 8px color-mix(in oklab, var(--accent) 50%, transparent);
}
.nav__caret{font-size:10px;opacity:.6;transition:transform var(--t-med) var(--ease)}
.nav__item--has-menu:hover .nav__caret,
.nav__item--has-menu:focus-within .nav__caret{transform:rotate(180deg)}
/* Elegant dropdown panel - softer glass */
.nav__item--has-menu{position:relative}
.nav__item--has-menu::after{
content:"";position:absolute;left:0;right:0;top:100%;height:22px;
opacity:0;pointer-events:none;
}
.nav__item--has-menu:hover::after,
.nav__item--has-menu:focus-within::after{opacity:1;pointer-events:auto}
.nav__panel{
position:absolute;top:calc(100% + 16px);left:50%;
transform:translateX(-50%) translateY(-8px) scale(.985);
width:460px;
background:
radial-gradient(120% 80% at 50% 0%,
color-mix(in oklab, var(--ink) 4%, transparent) 0%,
transparent 70%),
linear-gradient(180deg,
color-mix(in oklab, var(--bg) 96%, transparent) 0%,
color-mix(in oklab, var(--bg) 100%, transparent) 100%);
backdrop-filter:blur(18px) saturate(125%);
-webkit-backdrop-filter:blur(18px) saturate(125%);
border:1px solid color-mix(in oklab, var(--ink) 10%, transparent);
border-radius:22px;
padding:10px;
opacity:0;visibility:hidden;pointer-events:none;
transition:
opacity 520ms cubic-bezier(.22,.61,.36,1),
transform 520ms cubic-bezier(.22,.61,.36,1),
visibility 520ms;
display:grid;gap:2px;
box-shadow:
inset 0 1px 0 color-mix(in oklab, var(--ink) 12%, transparent),
0 20px 50px -18px rgba(0,0,0,.40),
0 8px 18px -12px rgba(0,0,0,.25);
isolation:isolate;
}
/* soft top highlight arc */
.nav__panel::before{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:linear-gradient(180deg,
color-mix(in oklab, var(--ink) 4%, transparent) 0%,
transparent 30%);
z-index:-1;
}
.nav__item--has-menu:hover .nav__panel,
.nav__item--has-menu:focus-within .nav__panel{
opacity:1;visibility:visible;pointer-events:auto;
transform:translateX(-50%) translateY(0) scale(1);
transition-delay:120ms;
}
.nav__panel-item{
display:grid;grid-template-columns:38px 1fr;gap:14px;
padding:13px 14px;border-radius:14px;align-items:center;
position:relative;
border:1px solid transparent;
opacity:0;transform:translateY(6px);
transition:
background 320ms var(--ease),
border-color 320ms var(--ease),
box-shadow 320ms var(--ease),
opacity 420ms cubic-bezier(.22,.61,.36,1),
transform 420ms cubic-bezier(.22,.61,.36,1);
}
.nav__item--has-menu:hover .nav__panel-item,
.nav__item--has-menu:focus-within .nav__panel-item{opacity:1;transform:translateY(0)}
.nav__panel-item:nth-child(1){transition-delay:220ms,220ms,220ms,260ms,260ms}
.nav__panel-item:nth-child(2){transition-delay:220ms,220ms,220ms,310ms,310ms}
.nav__panel-item:nth-child(3){transition-delay:220ms,220ms,220ms,360ms,360ms}
.nav__panel-item:nth-child(4){transition-delay:220ms,220ms,220ms,410ms,410ms}
.nav__panel-item:nth-child(5){transition-delay:220ms,220ms,220ms,460ms,460ms}
.nav__panel-item:nth-child(6){transition-delay:220ms,220ms,220ms,510ms,510ms}
.nav__panel-item::before{
content:"";position:absolute;left:8px;top:50%;transform:translateY(-50%) scaleY(0);
width:3px;height:55%;border-radius:3px;background:var(--accent);
transition:transform 360ms var(--ease);transform-origin:center;
box-shadow:0 0 8px color-mix(in oklab, var(--accent) 40%, transparent);
}
.nav__panel-item:hover{
background:linear-gradient(180deg,
color-mix(in oklab, var(--ink) 6%, transparent),
color-mix(in oklab, var(--ink) 2%, transparent));
border-color:color-mix(in oklab, var(--ink) 10%, transparent);
box-shadow:
inset 0 1px 0 color-mix(in oklab, var(--ink) 12%, transparent),
inset 0 -1px 0 color-mix(in oklab, #000 12%, transparent);
}
.nav__panel-item:hover::before{transform:translateY(-50%) scaleY(1)}
.nav__panel-icon{
width:38px;height:38px;border-radius:12px;
display:inline-flex;align-items:center;justify-content:center;
background:linear-gradient(180deg,
color-mix(in oklab, var(--ink) 6%, transparent),
color-mix(in oklab, var(--ink) 2%, transparent));
border:1px solid color-mix(in oklab, var(--ink) 8%, transparent);
color:var(--ink-mute);
box-shadow:
inset 0 1px 0 color-mix(in oklab, var(--ink) 10%, transparent),
inset 0 -1px 0 color-mix(in oklab, #000 14%, transparent);
transition:color 260ms var(--ease),border-color 260ms var(--ease),background 260ms var(--ease),transform 360ms var(--ease);
}
.nav__panel-item:hover .nav__panel-icon{transform:translateY(-1px)}
.nav__panel-item[data-color="teal"]:hover .nav__panel-icon{color:var(--c-teal);border-color:color-mix(in oklab,var(--c-teal) 55%,var(--line))}
.nav__panel-item[data-color="blue"]:hover .nav__panel-icon{color:var(--c-blue);border-color:color-mix(in oklab,var(--c-blue) 55%,var(--line))}
.nav__panel-item[data-color="pink"]:hover .nav__panel-icon{color:var(--c-pink);border-color:color-mix(in oklab,var(--c-pink) 55%,var(--line))}
.nav__panel-item[data-color="lime"]:hover .nav__panel-icon{color:#7AA01F;border-color:color-mix(in oklab,var(--c-lime) 65%,var(--line))}
.nav__panel-item[data-color="purple"]:hover .nav__panel-icon{color:var(--c-purple);border-color:color-mix(in oklab,var(--c-purple) 55%,var(--line))}
.nav__panel-item[data-color="orange"]:hover .nav__panel-icon{color:var(--c-orange);border-color:color-mix(in oklab,var(--c-orange) 55%,var(--line))}
.nav__panel-item[data-color="sky"]:hover .nav__panel-icon{color:var(--c-sky);border-color:color-mix(in oklab,var(--c-sky) 55%,var(--line))}
.nav__panel-icon--img{padding:4px;background:transparent}
.nav__panel-icon--img img{width:100%;height:100%;object-fit:contain;display:block}
.nav__panel-title{font-weight:600;font-size:14.5px;color:var(--ink);letter-spacing:-.005em;transition:color 260ms var(--ease)}
.nav__panel-item[data-color="teal"]:hover .nav__panel-title{color:var(--c-teal)}
.nav__panel-item[data-color="blue"]:hover .nav__panel-title{color:var(--c-blue)}
.nav__panel-item[data-color="pink"]:hover .nav__panel-title{color:var(--c-pink)}
.nav__panel-item[data-color="lime"]:hover .nav__panel-title{color:#7AA01F}
.nav__panel-item[data-color="purple"]:hover .nav__panel-title{color:var(--c-purple)}
.nav__panel-item[data-color="orange"]:hover .nav__panel-title{color:var(--c-orange)}
.nav__panel-item[data-color="sky"]:hover .nav__panel-title{color:var(--c-sky)}
.header__actions{display:flex;align-items:center;gap:12px}
.header__phone{
position:relative;
display:inline-flex;align-items:center;
width:36px;height:36px;
border-radius:999px;
border:1px solid transparent;
color:var(--ink-2);
transition:color .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease), width .55s cubic-bezier(.7,0,.2,1), box-shadow .35s var(--ease);
overflow:hidden;
font-family:'Geist Mono','JetBrains Mono',ui-monospace,monospace;
font-size:12px;font-weight:500;letter-spacing:.02em;
font-variant-numeric:tabular-nums;
white-space:nowrap;
}
.header__phone-icon{
display:inline-flex;align-items:center;justify-content:center;
width:40px;height:40px;flex:0 0 40px;
transition:transform .55s cubic-bezier(.7,0,.2,1);
}
.header__phone-icon svg{ width:20px; height:20px; }
.theme-toggle svg{ width:22px; height:22px; }
.theme-toggle__icon{ display:inline-flex; align-items:center; justify-content:center; }
.header__phone-num{
display:inline-flex;align-items:center;
max-width:0; opacity:0; padding-right:0;
transition:max-width .55s cubic-bezier(.7,0,.2,1), opacity .35s var(--ease) .05s, padding-right .55s cubic-bezier(.7,0,.2,1);
}
.header__phone-cc{ color:color-mix(in oklab, var(--ink) 38%, transparent); margin-right:4px; }
.header__phone:hover,.header__phone:focus-visible{
color:var(--ink);
border-color:color-mix(in oklab, var(--ink) 22%, transparent);
background:color-mix(in oklab, var(--ink) 5%, transparent);
width:auto;
}
.header__phone:hover .header__phone-icon,
.header__phone:focus-visible .header__phone-icon{ transform:rotate(-18deg); }
.header__phone:hover .header__phone-num,
.header__phone:focus-visible .header__phone-num{
max-width:160px; opacity:1; padding-right:14px;
}
.header__phone:hover .header__phone-cc{ color:var(--accent); }
@media (max-width:900px){ .header__phone{display:none} }
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;color:var(--ink-2);transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.theme-toggle:hover{background:var(--bg-2);color:var(--ink)}
[data-theme="light"] .theme-toggle .t-moon{display:none}
[data-theme="dark"] .theme-toggle .t-sun,[data-theme="dark"] .theme-toggle .t-rays{display:none}
.hamburger{display:none;flex-direction:column;gap:5px;width:24px;padding:4px 0}
.hamburger span{display:block;width:24px;height:2px;background:var(--ink);border-radius:2px;transition:transform var(--t-med) var(--ease),opacity var(--t-fast) var(--ease)}
.hamburger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.is-open span:nth-child(2){opacity:0}
.hamburger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1100px){
.header .header__inner{height:72px;padding-left:18px;padding-right:18px;gap:12px}
.logo__img{height:44px}
.header .nav{display:none}
.header__phone{display:none}
.hamburger{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;flex:0 0 44px}
body.menu-open .header{z-index:1000}
/* Solid mobile drawer — readable over any hero content */
.header .nav.is-open{
display:block;position:fixed;inset:72px 0 0 0;width:100vw;height:calc(100dvh - 72px);
padding:20px 16px calc(28px + env(safe-area-inset-bottom));
overflow-y:auto;z-index:1001;
background:var(--bg);
border-top:1px solid color-mix(in oklab, var(--ink) 12%, transparent);
box-shadow:0 24px 60px -30px rgba(0,0,0,.65);
animation:drawerIn .42s cubic-bezier(.2,.7,.2,1) both;
}
.header .nav.is-open::before{
content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
background:
radial-gradient(ellipse 70% 40% at 12% 0%, color-mix(in oklab, var(--bv-magenta) 14%, transparent), transparent 60%),
radial-gradient(ellipse 70% 45% at 92% 100%, color-mix(in oklab, var(--bv-sky) 12%, transparent), transparent 65%);
}
.header .nav.is-open > *{position:relative;z-index:1}
@keyframes drawerIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.nav.is-open .nav__list{display:flex;flex-direction:column;gap:8px;align-items:stretch;width:100%;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none}
.nav.is-open .nav__item{width:100%}
.nav.is-open .nav__link{
position:relative;display:flex;justify-content:space-between;align-items:center;width:100%;
padding:16px 18px;border-radius:14px;font-size:16.5px;font-weight:500;line-height:1.25;white-space:normal;
color:var(--ink);
background:color-mix(in oklab, var(--ink) 6%, var(--bg));
border:1px solid color-mix(in oklab, var(--ink) 14%, transparent);
transition:transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.nav.is-open .nav__link:active{transform:scale(.985);background:color-mix(in oklab, var(--ink) 10%, var(--bg))}
.nav.is-open .nav__link.is-active,
.nav.is-open .nav__link[aria-current="page"]{
background:color-mix(in oklab, var(--bv-magenta) 14%, var(--bg));
border-color:color-mix(in oklab, var(--bv-magenta) 50%, transparent);
color:var(--ink);
}
.nav.is-open .nav__link.is-active::after,.nav.is-open .nav__link[aria-current="page"]::after{display:none}
.nav.is-open .nav__caret{opacity:.7}
.nav.is-open .nav__panel{
display:none;position:static;transform:none;width:100%;
border:1px solid color-mix(in oklab, var(--ink) 12%, transparent);
border-radius:14px;margin:6px 0 4px;padding:8px;
background:color-mix(in oklab, var(--ink) 4%, var(--bg));
opacity:1;visibility:visible;pointer-events:auto;transition:none;
}
.nav.is-open .nav__panel.is-open{display:grid;animation:trayIn .3s var(--ease) both}
@keyframes trayIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.nav.is-open .nav__panel-item{
opacity:1;transform:none;grid-template-columns:34px 1fr;gap:12px;padding:12px;border-radius:10px;
background:transparent;border:1px solid transparent;
transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.nav.is-open .nav__panel-item:active{transform:scale(.985);background:color-mix(in oklab, var(--ink) 8%, transparent)}
.nav.is-open .nav__panel-icon{width:34px;height:34px;border-radius:10px}
.nav.is-open .nav__trigger[aria-expanded="true"] .nav__caret{transform:rotate(180deg)}
body.menu-open{overflow:hidden}
}
@media (max-width:600px){.header__cta{display:none}}
/* ---------- HERO (home) - logo-centric centerpiece ---------- */
.hero{
position:relative;
padding-block:88px 96px;
background:
radial-gradient(ellipse 60% 50% at 50% 0%, color-mix(in oklab, var(--accent) 5%, transparent), transparent 65%),
var(--bg);
overflow:hidden;
isolation:isolate;
}
.hero::before{
/* faint dotted grid - IT/infra ambient texture */
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background-image:radial-gradient(var(--grid-ink) 1px, transparent 1px);
background-size:28px 28px;
mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 80%);
-webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 80%);
}
.hero__mesh{
position:absolute;inset:0;z-index:0;pointer-events:none;
color:var(--ink);
}
.hero__mesh canvas{
position:absolute;inset:0;width:100%;height:100%;display:block;
opacity:.55;
mask-image:radial-gradient(ellipse 90% 90% at 50% 55%, #000 25%, transparent 95%);
-webkit-mask-image:radial-gradient(ellipse 90% 90% at 50% 55%, #000 25%, transparent 95%);
}
.hero__mesh{pointer-events:auto}
/* ---------- Ambient prism (subtle 4-triangle motif from the mark) ----- */
.ambient-prism{
position:absolute;pointer-events:none;z-index:0;
width:clamp(180px,22vw,320px);aspect-ratio:1/1;
opacity:.10;filter:blur(.6px);
animation:prismDrift 22s ease-in-out infinite;
will-change:transform;
}
.ambient-prism svg{width:100%;height:100%;display:block;overflow:visible}
.ambient-prism--tl{top:6%;left:-4%;animation-delay:-3s}
.ambient-prism--br{bottom:-6%;right:-3%;animation-delay:-9s;width:clamp(220px,26vw,380px);opacity:.08}
.ambient-prism--sm{top:18%;right:8%;width:clamp(90px,9vw,140px);opacity:.13;animation-duration:18s}
[data-theme="dark"] .ambient-prism{opacity:.18}
[data-theme="dark"] .ambient-prism--br{opacity:.14}
@keyframes prismDrift{
0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
50%{transform:translate3d(6px,-10px,0) rotate(8deg)}
}
@media (prefers-reduced-motion: reduce){
.ambient-prism{animation:none}
}
/* Subtle ambient orbs on every page hero - slow, almost-still drift */
.page-hero{isolation:isolate}
.page-hero::before,
.page-hero::after{
content:"";position:absolute;pointer-events:none;z-index:0;
border-radius:50%;filter:blur(60px);
opacity:.22;
will-change:transform;
}
.page-hero::before{
top:-15%;right:-10%;
width:clamp(320px,38vw,560px);aspect-ratio:1/1;
background:radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--c-teal, #4FBDA8) 70%, transparent), transparent 65%);
animation:ambientDriftA 28s ease-in-out infinite;
}
.page-hero::after{
bottom:-25%;left:-8%;
width:clamp(280px,32vw,480px);aspect-ratio:1/1;
background:radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--c-pink, #E5237B) 60%, transparent), transparent 65%);
animation:ambientDriftB 34s ease-in-out infinite;
opacity:.16;
}
.page-hero--teal::before{background:radial-gradient(circle, color-mix(in oklab,var(--c-teal) 70%,transparent), transparent 65%)}
.page-hero--blue::before{background:radial-gradient(circle, color-mix(in oklab,var(--c-blue) 70%,transparent), transparent 65%)}
.page-hero--pink::before{background:radial-gradient(circle, color-mix(in oklab,var(--c-pink) 70%,transparent), transparent 65%)}
.page-hero--lime::before{background:radial-gradient(circle, color-mix(in oklab,var(--c-lime) 70%,transparent), transparent 65%)}
.page-hero--purple::before{background:radial-gradient(circle, color-mix(in oklab,var(--c-purple) 70%,transparent), transparent 65%)}
[data-theme="dark"] .page-hero::before{opacity:.18}
[data-theme="dark"] .page-hero::after{opacity:.12}
.page-hero .container{position:relative;z-index:1}
@keyframes ambientDriftA{
0%,100%{transform:translate3d(0,0,0) scale(1)}
50%{transform:translate3d(-20px,18px,0) scale(1.06)}
}
@keyframes ambientDriftB{
0%,100%{transform:translate3d(0,0,0) scale(1)}
50%{transform:translate3d(24px,-16px,0) scale(1.08)}
}
@media (prefers-reduced-motion: reduce){
.page-hero::before,.page-hero::after{animation:none}
}
.hero__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;gap:28px}
.hero__brand{
position:relative;
display:inline-flex;align-items:center;justify-content:center;
width:min(360px,62vw);aspect-ratio:1/1;
margin-bottom:6px;
}
.hero__brand img{
width:78%;height:auto;
filter:drop-shadow(0 18px 40px color-mix(in oklab,var(--ink) 14%,transparent));
animation:brandFloat 9s ease-in-out infinite;
}
@keyframes brandFloat{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-6px)}
}
.hero__brand::before,.hero__brand::after{display:none}
.hero__wordmark{
display:inline-flex;align-items:center;gap:14px;
font-family:var(--font-mono);font-weight:500;
font-size:13px;letter-spacing:.42em;text-indent:.42em;
color:var(--ink);text-transform:uppercase;
margin:-4px 0 4px;
}
.hero__wordmark-text{white-space:nowrap}
.hero__wordmark-rule{
display:inline-block;width:44px;height:1px;
background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--ink) 55%,transparent),transparent);
}
.hero__eyebrow{
display:inline-block;
font-family:var(--font-mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
color:var(--ink-mute);font-weight:500;
padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--bg);
}
.hero__title{
font-size:clamp(40px,6.6vw,76px);line-height:1.04;
letter-spacing:-.03em;font-weight:600;color:var(--ink);
margin:0;max-width:16ch;
}
/* Editorial accent - keyword stays in body ink; a hairline rule and a
small index tick mark it, like a precision instrument annotation. */
.hero__title-accent,
.page-hero__title-accent,
.section-head__accent{
position:relative;display:inline-block;
font-style:normal;font-weight:inherit;color:var(--ink);
background:none;-webkit-text-fill-color:currentColor;
padding:0 .08em;
}
.hero__title-accent::before,
.page-hero__title-accent::before,
.section-head__accent::before{
content:"";position:absolute;left:-.04em;top:.18em;
width:2px;height:.62em;background:var(--accent);
border-radius:1px;opacity:.85;
}
.hero__title-accent::after,
.page-hero__title-accent::after,
.section-head__accent::after{
content:"";position:absolute;left:0;right:0;bottom:.04em;height:1px;
background:linear-gradient(90deg,
var(--accent) 0%,
color-mix(in oklab,var(--accent) 70%, var(--c-pink)) 55%,
transparent 100%);
opacity:.7;
}
.hero__title-italic{display:none}
.hero__sub{font-size:clamp(16px,1.3vw,18.5px);color:var(--ink-soft);max-width:58ch;margin:0;line-height:1.6}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.hero__meta{display:none}
@keyframes pulseDot{50%{opacity:.45;transform:scale(.92)}}
/* ---------- Hero stat strip (key numbers) ---------- */
.hero-stats{
width:100%;max-width:960px;margin:28px auto 0;
display:grid;grid-template-columns:repeat(4,1fr);
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
padding:22px 0;
}
@media (max-width:760px){.hero-stats{grid-template-columns:repeat(2,1fr);gap:18px 0;padding:18px 0}}
.hs{
position:relative;text-align:left;padding:0 22px;
display:flex;flex-direction:column;gap:10px;align-items:flex-start;
}
.hs + .hs{border-left:1px solid var(--line)}
@media (max-width:760px){.hs + .hs{border-left:0}.hs:nth-child(odd){border-right:1px solid var(--line)}}
.hs-v{
display:flex;align-items:center;gap:6px;
font-family:var(--font-display);font-weight:600;
font-size:clamp(34px,4.2vw,46px);line-height:1;letter-spacing:-.02em;color:var(--ink);
font-variant-numeric:tabular-nums;
}
.hs-v .ct, .hs-v .hs-num{font-variant-numeric:tabular-nums}
.hs-s{
font-family:var(--font-mono);font-weight:500;
font-size:13px;color:var(--ink-mute);letter-spacing:.06em;text-transform:lowercase;
line-height:1;
}
.hs-num{display:inline-flex;align-items:center;gap:2px;color:var(--ink)}
.hs-num .hs-s{margin-left:2px}
.hs-l{
display:inline-flex;align-items:center;gap:9px;
font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);
}
.tri-mark{
display:inline-block;width:0;height:0;
border-left:5px solid transparent;border-right:5px solid transparent;
border-bottom:8px solid var(--tri,var(--accent));
transform:translateY(-1px);
}
.hs-live{
display:inline-flex;align-items:center;justify-content:center;
width:12px;height:12px;border-radius:50%;
background:color-mix(in oklab,var(--c-lime) 22%,transparent);
margin-right:6px;
}
.live-dot{
width:7px;height:7px;border-radius:50%;background:var(--c-lime);
box-shadow:0 0 0 4px color-mix(in oklab,var(--c-lime) 28%,transparent);
animation:pulseDot 2.2s ease-in-out infinite;
}
/* ---------- Page hero (interior pages) ---------- */
.page-hero{
position:relative;
padding-block:120px 80px;
min-height:480px;
display:flex;
align-items:center;
background:
radial-gradient(ellipse 50% 70% at 90% 0%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 60%),
var(--bg);
border-bottom:0;
overflow:hidden;
}
@media (max-width: 720px){
.page-hero{ padding-block:90px 56px; min-height:380px; }
}
.page-hero--compact{ padding-block:48px 36px; min-height:auto; }
@media (max-width:720px){ .page-hero--compact{ padding-block:36px 28px; min-height:auto; } }
/* page-hero ambient handled above via ::before/::after orbs */
.page-hero .container{position:relative;z-index:1}
.page-hero__eyebrow{
display:inline-block;margin-bottom:18px;
font-family:var(--font-mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
color:var(--ink-mute);font-weight:500;
}
.page-hero__title{font-size:clamp(38px,5.5vw,68px);line-height:1.05;letter-spacing:-.025em;font-weight:600;color:var(--ink);margin:0 0 22px;max-width:18ch}
/* .page-hero__title-accent styled by shared editorial accent rule above */
.page-hero__sub{font-size:18px;color:var(--ink-soft);max-width:62ch;line-height:1.6;margin:0}
.page-hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.page-hero--teal{background:radial-gradient(ellipse 50% 70% at 90% 0%, color-mix(in oklab, var(--c-teal) 16%, transparent), transparent 60%), var(--bg)}
.page-hero--blue{background:radial-gradient(ellipse 50% 70% at 90% 0%, color-mix(in oklab, var(--c-blue) 12%, transparent), transparent 60%), var(--bg)}
.page-hero--pink{background:radial-gradient(ellipse 50% 70% at 90% 0%, color-mix(in oklab, var(--c-pink) 12%, transparent), transparent 60%), var(--bg)}
.page-hero--lime{background:radial-gradient(ellipse 50% 70% at 90% 0%, color-mix(in oklab, var(--c-lime) 18%, transparent), transparent 60%), var(--bg)}
.page-hero--purple{background:radial-gradient(ellipse 50% 70% at 90% 0%, color-mix(in oklab, var(--c-purple) 12%, transparent), transparent 60%), var(--bg)}
/* Logo-colored accent words on service pages - replaces the underline/tick treatment */
/* Accent words use only the three logo headline colors: blue, green, magenta */
.page-hero .page-hero__title-accent{ color: #D4147A; font-style: normal; font-weight: inherit; }
.page-hero--teal .page-hero__title-accent{ color: #3E8EDE; }
.page-hero--blue .page-hero__title-accent{ color: #3E8EDE; }
.page-hero--pink .page-hero__title-accent{ color: #D4147A; }
.page-hero--lime .page-hero__title-accent{ color: #8CC63F; }
.page-hero--purple .page-hero__title-accent{ color: #D4147A; }
.page-hero .page-hero__title-accent::before,
.page-hero .page-hero__title-accent::after{ display:none; content:none; }
/* ---------- Sections ---------- */
.section{padding-block:72px;position:relative}
.section--alt{background:var(--bg-2)}
.section-head{max-width:780px;margin-bottom:48px}
.section-head__eyebrow{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);font-weight:500;margin:0 0 12px}
.section-head__title{font-size:clamp(32px,4vw,48px);line-height:1.1;letter-spacing:-.02em;font-weight:600;color:var(--ink);margin:0 0 14px}
/* .section-head__accent styled by shared editorial accent rule above */
.section-head__sub{font-size:17px;color:var(--ink-soft);margin:0}
.section__cta{margin-top:36px;display:flex;justify-content:center}
/* ---------- Pillars (services grid) ---------- */
.pillars__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:960px){.pillars__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.pillars__grid{grid-template-columns:1fr}}
.pillar{
position:relative;
display:flex;flex-direction:column;gap:12px;
padding:28px;border:1px solid var(--line);border-radius:var(--radius);
background:var(--bg);
transition:transform var(--t-med) var(--ease),border-color var(--t-med) var(--ease),background var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease);
color:var(--ink);
overflow:hidden;
}
.pillar::after{
/* faint brand triangle motif in top-right */
content:"";position:absolute;top:-18px;right:-18px;width:80px;height:80px;
background:conic-gradient(from 0deg, var(--pillar-c,var(--accent)) 0deg 120deg, transparent 120deg 360deg);
clip-path:polygon(50% 0,100% 100%,0 100%);
opacity:.10;transition:opacity var(--t-med) var(--ease),transform var(--t-med) var(--ease);
}
.pillar:hover{transform:translateY(-3px);border-color:color-mix(in oklab,var(--pillar-c,var(--accent)) 60%,var(--line));background:var(--bg-2);box-shadow:0 20px 40px -28px color-mix(in oklab,var(--pillar-c,var(--accent)) 60%,transparent)}
.pillar:hover::after{opacity:.22;transform:rotate(8deg)}
.pillar__num{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--ink-mute);font-weight:600}
.pillar__title{font-size:21px;font-weight:600;letter-spacing:-.015em;line-height:1.25;color:var(--ink);position:relative;z-index:1}
.pillar__desc{font-size:15px;line-height:1.55;color:var(--ink-soft);margin:0;flex:1;position:relative;z-index:1}
.pillar__cta{font-size:14px;font-weight:600;color:var(--pillar-c,var(--accent));margin-top:8px;position:relative;z-index:1}
.pillar--teal{--pillar-c:var(--c-teal)}
.pillar--blue{--pillar-c:var(--c-blue)}
.pillar--pink{--pillar-c:var(--c-pink)}
.pillar--lime{--pillar-c:#7AA01F}
.pillar--purple{--pillar-c:var(--c-purple)}
.pillar--sky{--pillar-c:var(--c-sky)}
.pillar--orange{--pillar-c:var(--c-orange)}
.pillar--magenta{--pillar-c:var(--c-magenta)}
.pillar--teal .pillar__num,.pillar--blue .pillar__num,.pillar--pink .pillar__num,.pillar--lime .pillar__num,.pillar--purple .pillar__num,.pillar--sky .pillar__num,.pillar--orange .pillar__num,.pillar--magenta .pillar__num{color:var(--pillar-c)}
/* ---------- BroadVision Way ---------- */
.bvway__copy{max-width:760px}
.bvway__copy p{font-size:17px;color:var(--ink-soft);line-height:1.65;margin-bottom:1em}
.bvway__pillars{display:grid;gap:48px}
.bvway__pillar{padding-block:8px;border-top:1px solid var(--line);padding-top:40px}
.bvway__pillar:first-child{border-top:0;padding-top:0}
.bvway__eyebrow{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:500;margin:0 0 10px}
.bvway__title{font-size:clamp(26px,3vw,36px);line-height:1.15;letter-spacing:-.02em;font-weight:600;margin:0 0 16px;color:var(--ink)}
.bvway__pillar p{font-size:16.5px;line-height:1.65;color:var(--ink-soft)}
.bvway__valuesLabel{font-weight:600;color:var(--ink);margin-top:8px;margin-bottom:8px}
.bvway__values{display:flex;flex-wrap:wrap;gap:8px}
.bvway__values li{padding:6px 12px;border:1px solid var(--line);border-radius:999px;font-size:13.5px;color:var(--ink-2);background:var(--bg);transition:border-color var(--t-fast),color var(--t-fast)}
.bvway__values li:hover{border-color:var(--accent);color:var(--ink)}
.bvway__quote{
margin:18px 0;padding:20px 24px;border-left:3px solid var(--accent);
background:var(--bg-2);border-radius:0 var(--radius) var(--radius) 0;
font-style:italic;color:var(--ink-2);
}
.bvway__quote cite{display:block;margin-top:10px;font-style:normal;font-weight:600;font-size:14px;color:var(--ink-mute)}
/* ---------- Service detail list ---------- */
.svc__list{display:grid;gap:36px;max-width:860px}
.svc__item{padding:32px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);transition:border-color var(--t-med),box-shadow var(--t-med)}
.svc__item:hover{border-color:color-mix(in oklab,var(--accent) 40%,var(--line));box-shadow:0 16px 36px -24px color-mix(in oklab,var(--accent) 40%,transparent)}
.svc__item-title{font-size:22px;font-weight:600;letter-spacing:-.015em;color:var(--accent);margin:0 0 14px}
.svc__item p{font-size:16px;line-height:1.65;color:var(--ink-soft);margin-bottom:12px}
.svc__bullets{margin-top:12px;display:grid;gap:8px}
.svc__bullets li{padding-left:22px;position:relative;font-size:15.5px;line-height:1.55;color:var(--ink-soft)}
.svc__bullets li::before{content:"";position:absolute;left:4px;top:9px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:8px solid var(--accent);opacity:.9}
/* ---------- Testimonials ---------- */
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:960px){.testimonials{grid-template-columns:1fr}}
.testimonial{margin:0;padding:24px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius)}
.testimonial p{font-size:15.5px;line-height:1.6;color:var(--ink-2);margin:0 0 16px;font-style:italic}
.testimonial cite{font-style:normal;display:flex;flex-direction:column;gap:2px}
.testimonial cite strong{font-weight:600;color:var(--ink);font-size:14.5px}
.testimonial cite span{font-size:13px;color:var(--ink-mute)}
/* ---------- Brands marquee ---------- */
.brands{
margin-top:28px;
position:relative;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
overflow:hidden;
}
.brands__track{
display:flex;gap:48px;width:max-content;
animation:brandsScroll 48s linear infinite;
will-change:transform;
}
.brands:hover .brands__track{animation-play-state:paused}
@keyframes brandsScroll{
from{transform:translateX(0)}
to{transform:translateX(-50%)}
}
@media (prefers-reduced-motion: reduce){
.brands__track{animation:none}
}
.brands__item{
flex:0 0 auto;
display:inline-flex;align-items:center;justify-content:center;
height:54px;padding:0 22px;min-width:160px;
font-family:var(--font-display);font-weight:600;font-size:15px;
letter-spacing:.04em;color:var(--ink-mute);
border:1px solid var(--line);border-radius:999px;
background:var(--bg);
transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast);
}
.brands__item:hover{color:var(--ink);border-color:color-mix(in oklab,var(--accent) 60%, var(--line));transform:translateY(-1px)}
.brands__item--dot::before{
content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
background:var(--c-teal);margin-right:10px;
}
.brands__item:nth-child(3n)::before{background:var(--c-pink)}
.brands__item:nth-child(3n+1)::before{background:var(--c-amber)}
.brands__item:nth-child(3n+2)::before{background:var(--c-blue)}
/* ---------- Results / outcomes ---------- */
.results__grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:28px;
}
@media (max-width:960px){.results__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.results__grid{grid-template-columns:1fr}}
.result{
position:relative;padding:26px 22px 22px;
border:1px solid var(--line);border-radius:var(--radius);
background:var(--bg);
display:flex;flex-direction:column;gap:14px;
overflow:hidden;isolation:isolate;
transition:transform var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),box-shadow var(--t-med) var(--ease);
}
.result::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
background:var(--rcol,var(--accent));opacity:.85;
}
.result:hover{transform:translateY(-2px);border-color:color-mix(in oklab,var(--rcol,var(--accent)) 40%, var(--line));box-shadow:0 8px 28px -18px color-mix(in oklab,var(--rcol,var(--accent)) 45%, transparent)}
.result__metric{
font-family:var(--font-display);font-weight:600;
font-size:clamp(28px,3.2vw,38px);line-height:1;letter-spacing:-.02em;color:var(--ink);
}
.result__metric .result__unit{font-size:.55em;color:var(--ink-mute);font-weight:500;margin-left:.25em;letter-spacing:.02em}
.result__sector{
font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);
}
.result__desc{font-size:14.5px;color:var(--ink-soft);line-height:1.55;margin:0}
/* ---------- Section divider (hair gradient) ---------- */
.section-divider{
position:relative;height:1px;border:0;margin:0;
background:linear-gradient(90deg,
transparent 0%,
color-mix(in oklab,var(--c-teal) 50%, transparent) 22%,
color-mix(in oklab,var(--accent) 55%, transparent) 50%,
color-mix(in oklab,var(--c-purple) 50%, transparent) 78%,
transparent 100%);
opacity:.55;
}
.section-divider::after{
content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;
transform:translate(-50%,-50%) rotate(45deg);
background:var(--bg);border:1px solid color-mix(in oklab,var(--accent) 60%,var(--line));
}
/* ---------- CTA section ---------- */
.cta{
position:relative;padding-block:80px;background:var(--bg-2);
border-top:1px solid var(--line);border-bottom:1px solid var(--line);
overflow:hidden;
}
.cta::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(circle at 18% 50%, color-mix(in oklab,var(--accent) 14%,transparent), transparent 40%),
radial-gradient(circle at 82% 50%, color-mix(in oklab,var(--c-purple) 10%,transparent), transparent 40%);
}
.cta__inner{position:relative;text-align:center;max-width:680px;margin-inline:auto}
.cta__title{font-size:clamp(28px,3.6vw,44px);line-height:1.15;letter-spacing:-.02em;font-weight:600;color:var(--ink);margin:0 0 14px}
.cta__sub{font-size:17px;color:var(--ink-soft);margin:0 0 24px}
/* ---------- Contact ---------- */
.contact__grid{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:start}
@media (max-width:980px){.contact__grid{grid-template-columns:1fr;gap:32px}}
.contact__form{display:flex;flex-direction:column;gap:16px}
.contact__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.contact__row{grid-template-columns:1fr}}
.contact__form label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:500;color:var(--ink-2)}
.contact__form input,.contact__form textarea{
font:inherit;color:var(--ink);background:var(--bg);
border:1px solid var(--line-2);border-radius:var(--radius-sm);
padding:12px 14px;outline:0;
transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.contact__form input:focus,.contact__form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent)}
.contact__form button{align-self:flex-start;margin-top:8px}
.contact__info{display:grid;gap:28px;align-content:start}
.contact__block h2{font-size:13px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.14em;color:var(--ink-mute);font-weight:600;margin:0 0 8px}
.contact__block p,.contact__block address{font-size:15.5px;color:var(--ink-2);margin:0;line-height:1.55;font-style:normal}
.contact__block a{color:var(--ink);border-bottom:1px solid var(--line-2);transition:color var(--t-fast),border-color var(--t-fast)}
.contact__block a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.contact__reach{display:grid;grid-template-columns:1fr 1fr;gap:20px 32px}
.contact__offices-intro{font-size:14px;color:var(--ink-mute);margin:0 0 16px;line-height:1.5}
.contact__offices{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px}
@media (max-width:560px){.contact__offices{grid-template-columns:1fr}.contact__reach{grid-template-columns:1fr}}
.contact__office{padding:14px 16px;border:1px solid var(--line-2);border-radius:12px;background:color-mix(in oklab, var(--ink) 3%, transparent);transition:border-color var(--t-fast),background var(--t-fast)}
.contact__office:hover{border-color:color-mix(in oklab, var(--accent) 40%, var(--line-2))}
.contact__office h3{margin:0 0 6px;font-size:13.5px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;font-weight:600;color:var(--ink);line-height:1.3}
.contact__office h3 span{display:block;margin-top:2px;color:var(--ink-mute);font-weight:500;letter-spacing:.08em}
.contact__office address{font-size:14px;line-height:1.55}
.contact__office address a{border-bottom:none;color:var(--ink-2)}
.contact__office address a:hover{color:var(--accent)}
.contact__social{display:flex;gap:14px}
.contact__social a{font-weight:500}
/* ---------- Legal pages ---------- */
.legal h2{font-size:22px;font-weight:600;margin:32px 0 12px;color:var(--ink)}
.legal h3{font-size:17px;font-weight:600;margin:24px 0 10px;color:var(--ink-soft)}
.legal p,.legal li{font-size:16px;line-height:1.65;color:var(--ink-soft);margin-bottom:10px}
.legal ul{padding-left:22px;list-style:disc;margin-bottom:12px}
.legal a{color:var(--accent)}
.legal a:hover{color:var(--accent-2)}
/* ---------- Footer ---------- */
.footer{background:var(--bg-2);border-top:1px solid var(--line);padding-block:56px 28px;position:relative;overflow:hidden}
.footer::before{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:radial-gradient(var(--grid-ink) 1px, transparent 1px);
background-size:32px 32px;
mask-image:linear-gradient(180deg,transparent,#000);
-webkit-mask-image:linear-gradient(180deg,transparent,#000);
}
.footer .container{position:relative;z-index:1}
.footer__top{display:grid;grid-template-columns:1.3fr 2fr;gap:48px;margin-bottom:40px}
@media (max-width:880px){.footer__top{grid-template-columns:1fr;gap:32px}}
.footer__brand{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.footer__brand-row{display:inline-flex;align-items:center;gap:14px}
.footer__logo{height:100px;width:auto;display:block;flex-shrink:0}
.footer__brand-name{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:.06em;color:var(--ink);text-transform:uppercase;line-height:1}
.footer__tag{font-size:14px;color:var(--ink-soft);margin:0;max-width:34ch;line-height:1.55}
.footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
@media (max-width:680px){.footer__cols{grid-template-columns:1fr 1fr}.footer__col--contact{grid-column:1/-1}}
.footer__head{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);font-weight:600;margin:0 0 14px}
.footer__list,.footer__contact{display:flex;flex-direction:column;gap:8px}
.footer__list a,.footer__contact a{font-size:14.5px;color:var(--ink-2);transition:color var(--t-fast) var(--ease)}
.footer__list a:hover,.footer__contact a:hover{color:var(--accent)}
.footer__contact li{display:flex;flex-direction:column;gap:2px;font-size:14.5px;color:var(--ink-2)}
.footer__contact-label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute)}
.footer__social{display:flex;gap:14px;margin-top:14px}
.footer__social a{font-size:13.5px;color:var(--ink-2);font-weight:500}
.footer__social a:hover{color:var(--accent)}
.footer__profile{display:flex;justify-content:center;padding:20px 0;margin-top:10px;border-top:1px solid var(--line);background:var(--bg-2)}
.footer__profile .company-profile-link{font-size:14.5px;color:var(--accent);font-weight:600;letter-spacing:.02em;border-bottom:1px solid var(--accent);padding-bottom:2px;transition:opacity .2s ease;display:inline-flex;align-items:center;gap:8px}
.footer__profile .company-profile-link::before{content:"";display:inline-block;width:16px;height:16px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%235dbce3' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;background-position:center}
.footer__profile .company-profile-link:hover{opacity:.75}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:24px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-mute)}
.footer__bottom p{margin:0}
.footer__legal{display:flex;gap:18px}
.footer__legal a:hover{color:var(--accent)}
@media (max-width:560px){.footer__bottom{flex-direction:column;align-items:flex-start}}
/* ---------- Scroll progress hairline ---------- */
.scroll-accent{
position:fixed;top:0;left:0;height:2px;width:100%;z-index:60;pointer-events:none;
background:linear-gradient(90deg,var(--accent),var(--c-pink),var(--c-purple));
transform-origin:left center;
transform:scaleX(var(--scroll-progress,0));
opacity:0;transition:opacity .2s ease;
}
.scroll-accent.is-visible{opacity:.9}
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
main{animation:none}
}
/* Hero BroadVision logo above headline */
.hero-logo{display:block;margin:0 auto 28px;width:min(260px,38vw);position:relative;filter:drop-shadow(0 8px 28px rgba(0,0,0,.45))}
.hero-logo__img{display:block;width:100%;height:auto;transition:opacity .25s ease}
.hero-logo__img--light{position:absolute;inset:0;opacity:0}
[data-theme="light"] .hero-logo{filter:drop-shadow(0 8px 22px rgba(31,30,29,0.14))}
[data-theme="light"] .hero-logo__img--dark{opacity:0}
[data-theme="light"] .hero-logo__img--light{opacity:1;position:static}
[data-theme="light"] .hero-logo .hero-logo__img--dark{position:absolute;inset:0}
@media (max-width:700px){.hero-logo{width:180px;margin-bottom:20px}}
/* ---------- Wave 2: mobile polish ---------- */
@media (max-width:560px){
.header .header__inner{height:68px;padding-left:16px;padding-right:16px}
.logo__img{height:40px}
.theme-toggle,.hamburger{width:42px;height:42px;flex-basis:42px}
.header .nav.is-open{inset:68px 0 0 0;height:calc(100dvh - 68px);padding:14px 16px 22px}
.header__actions{gap:8px}
.page-hero{padding-block:56px 40px}
.page-hero__title{font-size:clamp(34px,9vw,46px);line-height:1.02;margin-bottom:16px}
.page-hero__sub{font-size:16px;line-height:1.55}
.page-hero__cta{gap:10px;width:100%}
.page-hero__cta .btn{flex:1 1 auto;justify-content:center}
.section-head__title,.bvway__title{font-size:clamp(26px,7vw,34px);line-height:1.08}
.svc__bullets li{padding-left:20px;font-size:15px;line-height:1.6}
.svc__bullets{gap:10px}
.svc__item{padding-block:18px}
.cta__title{font-size:clamp(24px,6.5vw,32px);line-height:1.15}
.hero-logo{width:160px;margin-bottom:18px}
.hs-v{font-size:34px}
}
@media (max-width:420px){
.header__phone{display:none}
.footer__cols{grid-template-columns:1fr}
}
/* ---------- Mobile-only stability fixes ---------- */
@media (max-width:700px){
html,body{max-width:100%;overflow-x:hidden}
img,svg,canvas,video{max-width:100%}
.btn{white-space:normal;text-align:center;justify-content:center}
.footer{padding-block:42px 24px}
.footer__top{padding:22px 18px;margin-bottom:28px}
.footer__logo{height:72px;width:auto}
.footer__cols{gap:24px}
.footer__bottom{align-items:flex-start;text-align:left}
.footer__legal{flex-wrap:wrap;gap:10px 16px}
}
@media (max-width:700px){
body:has(#bv-globe-root) .hero{min-height:auto;padding:108px 16px 56px;place-items:start center;overflow:hidden}
body:has(#bv-globe-root) .hero-inner{width:100%;max-width:100%;padding-top:0}
body:has(#bv-globe-root) .hero-logo{width:142px;margin-bottom:16px}
body:has(#bv-globe-root) .hero h1{max-width:12.5ch;font-size:clamp(34px,10.4vw,46px);line-height:1.04;letter-spacing:0;text-wrap:balance}
body:has(#bv-globe-root) #bv-overlay{display:none}
body:has(#bv-globe-root) #bv-globe-root canvas.tri{opacity:.35}
body:has(#bv-globe-root) .hero::after{background:linear-gradient(180deg,color-mix(in oklab,var(--paper) 84%,transparent) 0%,color-mix(in oklab,var(--paper) 38%,transparent) 46%,var(--paper) 100%)}
body:has(#bv-globe-root) .hero-stats{grid-template-columns:1fr 1fr;margin-top:54px;width:100%;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
body:has(#bv-globe-root) .hs{padding:24px 16px 22px;min-width:0}
body:has(#bv-globe-root) .hs-v{font-size:clamp(34px,11vw,44px);letter-spacing:0}
body:has(#bv-globe-root) .hs-l{max-width:16ch;font-size:9.5px;letter-spacing:.14em;line-height:1.55;margin-top:14px}
}
/* ---------- Testimonials marquee (home) ---------- */
.voices{padding-block:88px}
.voices__head{margin-bottom:36px}
.voices__eyebrow{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 12px}
.voices__head h2{font-family:"Inter Display",Inter,sans-serif;font-size:clamp(28px,3.4vw,44px);line-height:1.05;letter-spacing:-.025em;font-weight:600;color:var(--ink);margin:0;max-width:22ch}
.voices__head h2 em{font-style:italic;color:var(--bv-magenta,#d63384)}
.voices__marquee{position:relative;overflow:hidden;padding-block:8px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.voices__track{display:flex;gap:24px;width:max-content;align-items:stretch;will-change:transform}
.voices__track--single{animation:voices-scroll 240s linear infinite}
.voices__marquee:hover .voices__track,
.voices__marquee:focus-within .voices__track{animation-play-state:paused}
.voice{position:relative;flex:0 0 360px;width:360px;height:340px;background:color-mix(in oklab,var(--bg) 92%,var(--ink) 8%);border:1px solid var(--line);border-radius:18px;padding:28px 28px 22px;margin:0;display:flex;flex-direction:column;gap:16px;overflow:hidden;transition:border-color .2s ease, transform .2s ease}
.voice:hover{border-color:color-mix(in oklab,var(--bv-magenta,#d63384) 50%,var(--line))}
.voice::before{content:"";position:absolute;top:18px;right:20px;width:28px;height:22px;background:var(--bv-magenta,#d63384);opacity:.16;-webkit-mask:url("data:image/svg+xml;utf8,") no-repeat center / contain;mask:url("data:image/svg+xml;utf8,") no-repeat center / contain;pointer-events:none}
.voice__quote{position:relative;margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-soft);quotes:none;flex:1 1 auto;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;padding-right:36px}
.voice:not(.voice--long) .voice__quote{display:flex;align-items:center;-webkit-line-clamp:unset;font-size:17px;line-height:1.55;color:var(--ink);font-weight:400;letter-spacing:-.005em}
.voice__quote::after{content:"";position:absolute;left:0;right:0;bottom:0;height:48px;background:linear-gradient(to bottom,transparent,color-mix(in oklab,var(--bg) 92%,var(--ink) 8%));pointer-events:none;opacity:0;transition:opacity .2s ease}
.voice--long .voice__quote::after{opacity:1}
.voice__more{align-self:flex-start;background:transparent;border:0;padding:0;margin:-4px 0 0;font:inherit;font-size:13px;font-weight:500;color:var(--bv-magenta,#d63384);cursor:pointer;letter-spacing:.01em;display:none}
.voice__more:hover{text-decoration:underline}
.voice--long .voice__more{display:inline-flex}
.voice figcaption{display:flex;flex-direction:column;gap:2px;font-size:13.5px;color:var(--ink);border-top:1px solid color-mix(in oklab,var(--line) 70%,transparent);padding-top:14px;margin-top:auto}
.voice figcaption strong{font-weight:600}
.voice figcaption span{color:var(--ink-soft);font-size:12.5px}
@keyframes voices-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Read-more modal */
.voice-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:24px}
.voice-modal[open]{display:flex}
.voice-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
.voice-modal__card{position:relative;max-width:640px;width:100%;max-height:85vh;overflow:auto;background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:36px 36px 28px;box-shadow:0 30px 80px -20px rgba(0,0,0,.5)}
.voice-modal__card blockquote{margin:0 0 20px;font-size:16px;line-height:1.65;color:var(--ink-2,var(--ink))}
.voice-modal__card figcaption{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line);padding-top:14px;font-size:14px;color:var(--ink)}
.voice-modal__card figcaption span{color:var(--ink-soft);font-size:12.5px}
.voice-modal__close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:18px;line-height:1;cursor:pointer;display:grid;place-items:center}
.voice-modal__close:hover{background:color-mix(in oklab,var(--ink) 8%,transparent)}
@media (max-width:640px){
.voices{padding-block:64px}
.voices__marquee{
overflow-x:auto;overflow-y:hidden;
-webkit-overflow-scrolling:touch;
overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;
scroll-padding-left:22px;
scrollbar-width:none;
-webkit-mask-image:none;mask-image:none;
padding:0 22px 8px;margin:0 -22px;
}
.voices__marquee::-webkit-scrollbar{display:none}
.voices__track{animation:none !important;width:auto;gap:14px;padding-bottom:4px}
.voices__track .voice[aria-hidden="true"]{display:none}
.voice{flex:0 0 82vw;width:82vw;max-width:340px;height:300px;scroll-snap-align:start;padding:22px}
.voice__quote{font-size:14px;-webkit-line-clamp:7}
.voice-modal__card{padding:28px 22px 22px}
}
@media (prefers-reduced-motion:reduce){
.voices__track{animation:none}
.voices__marquee{overflow-x:auto}
}
/* =========================================================
LIGHT MODE OVERRIDES (Anthropic / Claude aesthetic)
Dark mode is untouched.
========================================================= */
[data-theme="light"] body{background:var(--bg);color:var(--ink)}
/* Globe handles its own light/dark theming via /js/atlas.js - no filter swap needed */
/* Hero fade is themed via var(--paper) directly in home.html */
/* Hero logo drop shadow was hardcoded dark */
[data-theme="light"] .hero-mark,
[data-theme="light"] .hero__brand img{
filter: drop-shadow(0 18px 50px rgba(31,30,29,0.18));
}
/* Page-hero ambient orbs: drop opacity & soften for cream */
[data-theme="light"] .page-hero::before{opacity:.14}
[data-theme="light"] .page-hero::after{opacity:.10}
/* Page-hero accent washes (radial bg) - soften */
[data-theme="light"] .page-hero{
background:
radial-gradient(ellipse 60% 80% at 90% 0%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 65%),
var(--bg);
}
[data-theme="light"] .page-hero--teal{background:radial-gradient(ellipse 60% 80% at 90% 0%, color-mix(in oklab,var(--c-teal) 14%,transparent), transparent 65%), var(--bg)}
[data-theme="light"] .page-hero--blue{background:radial-gradient(ellipse 60% 80% at 90% 0%, color-mix(in oklab,var(--c-blue) 12%,transparent), transparent 65%), var(--bg)}
[data-theme="light"] .page-hero--pink{background:radial-gradient(ellipse 60% 80% at 90% 0%, color-mix(in oklab,var(--c-pink) 12%,transparent), transparent 65%), var(--bg)}
[data-theme="light"] .page-hero--lime{background:radial-gradient(ellipse 60% 80% at 90% 0%, color-mix(in oklab,var(--c-lime) 14%,transparent), transparent 65%), var(--bg)}
[data-theme="light"] .page-hero--purple{background:radial-gradient(ellipse 60% 80% at 90% 0%, color-mix(in oklab,var(--c-purple) 12%,transparent), transparent 65%), var(--bg)}
/* Voices marquee cards (use bg + ink mix - looks good on cream too,
but let's ensure border/text contrast) */
[data-theme="light"] .voice{
background:color-mix(in oklab, var(--bg) 70%, var(--ink) 6%);
border-color:var(--line);
}
[data-theme="light"] .voice blockquote{color:var(--ink-2)}
[data-theme="light"] .voice figcaption span{color:var(--ink-soft)}
/* Marquee edge mask - was tuned for dark; on cream the gradient endpoints
should fade to cream */
[data-theme="light"] .voices__marquee{
-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
/* Buttons: ensure primary uses accent ink, ghost reads on cream */
[data-theme="light"] .btn--primary{color:var(--accent-ink)}
[data-theme="light"] .btn--ghost,
[data-theme="light"] .btn--outline{
color:var(--ink);
border-color:var(--line-2);
background:transparent;
}
[data-theme="light"] .btn--ghost:hover,
[data-theme="light"] .btn--outline:hover{
background:var(--bg-2);
}
/* Header / nav surface */
[data-theme="light"] header,
[data-theme="light"] .site-header,
[data-theme="light"] .nav{
background:color-mix(in oklab, var(--bg) 88%, transparent);
border-color:var(--line);
}
/* Footer */
[data-theme="light"] footer,
[data-theme="light"] .site-footer{
background:var(--bg-2);
color:var(--ink-2);
border-color:var(--line);
}
/* Cards, panels, generic surfaces relying on dark tokens */
[data-theme="light"] .card,
[data-theme="light"] .panel,
[data-theme="light"] .svc__item,
[data-theme="light"] .feature,
[data-theme="light"] .testimonial,
[data-theme="light"] .stat,
[data-theme="light"] .pillar{
background:color-mix(in oklab, var(--bg) 60%, var(--ink) 4%);
border-color:var(--line);
color:var(--ink);
}
/* Section dividers / muted ribbons */
[data-theme="light"] .section--alt,
[data-theme="light"] .sec--alt{
background:var(--bg-2);
}
/* Selection */
[data-theme="light"] ::selection{background:var(--accent);color:var(--accent-ink)}
/* Logo swap in light mode - use black-text variant instead of inverting the colorful mark */
[data-theme="light"] .logo__img{ content:url('/__l5e/assets-v1/da849851-605c-4fe7-a90f-48c48d0e5ece/bv-logo-full.png'); }
[data-theme="dark"] .logo__img{ content:url('/assets/logo-white.png'); }
[data-theme="light"] .footer__logo{ content:url('/__l5e/assets-v1/da849851-605c-4fe7-a90f-48c48d0e5ece/bv-logo-full.png'); }
[data-theme="dark"] .footer__logo{ content:url('/assets/logo-white.png'); }
/* Hero logo light/dark swap is handled on .hero-logo__img--light/--dark above */
/* =========================================================
THEME CROSSFADE
Handled by a unified full-page overlay in /js/main.js - every
element repaints simultaneously underneath. We intentionally do
NOT transition individual properties here (that caused visible
staggering between elements).
========================================================= */
/* =========================================================
HEADER CTA - refined "ink line" button
Toned-down, classy. Border draws + label slides on hover.
========================================================= */
.header__actions{ gap:10px }
.header__cta.btn.btn--primary{
position:relative;
background:transparent;
color:var(--ink);
border:1px solid color-mix(in oklab, var(--ink) 35%, transparent);
border-radius:999px;
padding:9px 18px 9px 18px;
font-size:13px;
font-weight:500;
letter-spacing:.005em;
box-shadow:none;
overflow:hidden;
isolation:isolate;
transition:border-color .35s var(--ease), color .35s var(--ease), padding .4s var(--ease);
}
.header__cta.btn.btn--primary::before{
content:""; position:absolute; inset:0; z-index:-1;
background:var(--ink);
transform:translateX(-101%);
transition:transform .55s cubic-bezier(.7,0,.2,1);
}
.header__cta.btn.btn--primary::after{
content:"→";
display:inline-block;
margin-left:0;
width:0; opacity:0;
transform:translateX(-4px);
transition:width .35s var(--ease), opacity .3s var(--ease), transform .4s var(--ease);
font-weight:400;
}
.header__cta.btn.btn--primary:hover,
.header__cta.btn.btn--primary:focus-visible{
color:var(--bg);
border-color:var(--ink);
padding-right:30px;
transform:none;
}
.header__cta.btn.btn--primary:hover::before,
.header__cta.btn.btn--primary:focus-visible::before{ transform:translateX(0); }
.header__cta.btn.btn--primary:hover::after,
.header__cta.btn.btn--primary:focus-visible::after{
width:14px; opacity:1; transform:translateX(0);
}
/* Theme toggle - subtle hover ring + icon spin */
.theme-toggle{
position:relative;
width:36px; height:36px;
display:inline-flex; align-items:center; justify-content:center;
border-radius:999px;
border:1px solid transparent;
background:transparent;
color:var(--ink-2);
cursor:pointer;
transition:border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease);
}
.theme-toggle:hover{
color:var(--ink);
border-color:color-mix(in oklab, var(--ink) 22%, transparent);
background:color-mix(in oklab, var(--ink) 5%, transparent);
}
.theme-toggle__icon{
display:inline-flex;
transition:transform .55s cubic-bezier(.7,0,.2,1);
}
.theme-toggle:hover .theme-toggle__icon{ transform:rotate(28deg); }
/* ============================================
Managed IT Services - page-scoped enhancements
============================================ */
.mit-adv{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:8px}
@media (max-width:880px){.mit-adv{grid-template-columns:1fr}}
.mit-card{position:relative;padding:32px 30px 30px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);overflow:hidden;transition:border-color var(--t-med),transform var(--t-med),box-shadow var(--t-med)}
.mit-card::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--c-teal);opacity:.0;transition:opacity var(--t-med)}
.mit-card:hover{border-color:color-mix(in oklab,var(--c-teal) 45%,var(--line));transform:translateY(-2px);box-shadow:0 22px 48px -28px color-mix(in oklab,var(--c-teal) 50%,transparent)}
.mit-card:hover::before{opacity:1}
.mit-card__num{margin:0 0 18px;display:inline-flex;align-items:baseline;gap:14px;line-height:1}
.mit-card__num::before,.mit-card__num::after{display:none}
.mit-card__idx{font-family:var(--font-display,inherit);font-size:26px;font-weight:300;letter-spacing:-.02em;color:var(--ink);opacity:.22;font-feature-settings:"lnum","tnum";transition:opacity var(--t-med),color var(--t-med)}
.mit-card__label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft);font-weight:500;position:relative;padding-bottom:6px}
.mit-card__label::after{content:"";position:absolute;left:0;bottom:0;width:24px;height:1px;background:color-mix(in oklab,var(--ink) 25%,transparent);transition:width var(--t-med),background var(--t-med)}
.mit-card:hover .mit-card__idx{opacity:1;color:var(--c-teal)}
.mit-card:hover .mit-card__label::after{width:48px;background:var(--c-teal)}
.mit-card__title{font-size:22px;font-weight:600;letter-spacing:-.015em;color:var(--ink);margin:0 0 12px;line-height:1.25}
.mit-card__body{font-size:15.5px;line-height:1.65;color:var(--ink-soft);margin:0}
.mit-card__body + .mit-card__body{margin-top:10px}
.mit-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px;padding:32px;border:1px solid var(--line);border-radius:var(--radius);background:color-mix(in oklab,var(--c-teal) 4%,var(--bg))}
@media (max-width:880px){.mit-stats{grid-template-columns:repeat(2,1fr);padding:24px;gap:16px}}
.mit-stat{display:flex;flex-direction:column;gap:6px}
.mit-stat__v{font-size:clamp(28px,3vw,38px);font-weight:600;letter-spacing:-.02em;color:var(--ink);line-height:1;font-family:var(--font-display,inherit)}
.mit-stat__v em{font-style:normal;color:var(--c-teal)}
.mit-stat__l{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute)}
.mit-logos{padding-block:56px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2)}
.mit-logos__head{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);text-align:center;margin:0 0 28px}
.mit-logos__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px 28px;align-items:center;justify-items:center;max-width:1080px;margin:0 auto}
@media (max-width:880px){.mit-logos__grid{grid-template-columns:repeat(3,1fr)}}
.mit-logos__item{font-family:var(--font-display,inherit);font-weight:600;font-size:15px;letter-spacing:.02em;color:var(--ink-soft);opacity:.72;transition:opacity var(--t-med),color var(--t-med);padding:6px 4px;text-align:center}
.mit-logos__item:hover{opacity:1;color:var(--ink)}
.mit-cross{position:relative;padding:64px 40px;border-radius:var(--radius);background:linear-gradient(135deg,color-mix(in oklab,var(--c-purple) 12%,var(--bg)),color-mix(in oklab,var(--c-teal) 8%,var(--bg)));border:1px solid var(--line);overflow:hidden}
.mit-cross::before{content:"";position:absolute;inset:auto -10% -40% auto;width:60%;height:120%;background:radial-gradient(ellipse at center,color-mix(in oklab,var(--c-purple) 22%,transparent),transparent 60%);pointer-events:none}
.mit-cross__inner{position:relative;display:grid;grid-template-columns:1.2fr 1fr;gap:36px;align-items:center}
@media (max-width:880px){.mit-cross{padding:40px 24px}.mit-cross__inner{grid-template-columns:1fr;gap:24px}}
.mit-cross__eyebrow{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-purple);margin:0 0 12px}
.mit-cross__title{font-size:clamp(26px,3vw,36px);line-height:1.15;letter-spacing:-.02em;font-weight:600;color:var(--ink);margin:0 0 14px}
.mit-cross__sub{font-size:16px;line-height:1.65;color:var(--ink-soft);margin:0 0 20px;max-width:55ch}
.mit-cross__cta{display:flex;flex-wrap:wrap;gap:12px}
/* Partner logo marquee (reverse direction vs voices) */
.mit-logos{padding-block:48px}
.mit-logos__marquee{position:relative;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mit-logos__track{display:flex;gap:64px;width:max-content;align-items:center;animation:mit-logos-scroll 70s linear infinite;will-change:transform}
.mit-logos__marquee:hover .mit-logos__track{animation-play-state:paused}
.mit-logos__logo{flex:0 0 auto;height:72px;width:72px;object-fit:contain;background:#fff;border-radius:14px;padding:10px;border:1px solid var(--line);box-shadow:0 6px 18px -12px rgba(0,0,0,.35);opacity:.92;transition:opacity var(--t-med),transform var(--t-med),box-shadow var(--t-med)}
.mit-logos__logo:hover{opacity:1;transform:translateY(-2px) scale(1.04);box-shadow:0 14px 28px -14px rgba(0,0,0,.45)}
@keyframes mit-logos-scroll{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (max-width:720px){.mit-logos__track{gap:40px;animation-duration:55s}.mit-logos__logo{height:56px;width:56px;padding:8px;border-radius:12px}}
@media (max-width:640px){
.mit-logos__marquee{
overflow-x:auto;
overflow-y:hidden;
-webkit-overflow-scrolling:touch;
overscroll-behavior-x:contain;
scroll-snap-type:x proximity;
scrollbar-width:none;
mask-image:none;
-webkit-mask-image:none;
padding:4px 22px;
margin:0 -22px;
}
.mit-logos__marquee::-webkit-scrollbar{display:none}
.mit-logos__track{
animation:none !important;
width:auto;
gap:18px;
}
.mit-logos__logo{
scroll-snap-align:center;
height:64px;width:64px;
}
}
@media (prefers-reduced-motion:reduce){.mit-logos__track{animation:none}}
/* ---------- Connectivity / Infrastructure page (cit-) ---------- */
.mit-adv--blue .mit-card::before{background:var(--c-blue)}
.mit-adv--blue .mit-card:hover{border-color:color-mix(in oklab,var(--c-blue) 45%,var(--line));box-shadow:0 22px 48px -28px color-mix(in oklab,var(--c-blue) 50%,transparent)}
.mit-adv--blue .mit-card:hover .mit-card__idx{color:var(--c-blue)}
.mit-adv--blue .mit-card:hover .mit-card__label::after{background:var(--c-blue)}
.mit-card__bullets{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.mit-card__bullets li{position:relative;padding-left:18px;font-size:15px;line-height:1.6;color:var(--ink-soft)}
.mit-card__bullets li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:1px;background:currentColor;opacity:.5}
.mit-card__bullets strong{color:var(--ink);font-weight:600}
.cit-stack{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px}
@media (max-width:1080px){.cit-stack{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.cit-stack{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.cit-stack{grid-template-columns:1fr}}
.cit-tile{position:relative;padding:22px 22px 22px;border:1px solid var(--line);border-radius:14px;background:var(--bg);transition:border-color var(--t-med),transform var(--t-med),box-shadow var(--t-med)}
.cit-tile:hover{border-color:color-mix(in oklab,var(--c-blue) 45%,var(--line));transform:translateY(-2px);box-shadow:0 18px 40px -28px color-mix(in oklab,var(--c-blue) 55%,transparent)}
.cit-tile__ico{width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in oklab,var(--c-blue) 14%,transparent);color:var(--c-blue);margin-bottom:14px}
.cit-tile__ico svg{width:18px;height:18px}
.cit-tile__title{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:0 0 6px;line-height:1.3}
.cit-tile__body{font-size:13.5px;line-height:1.55;color:var(--ink-soft);margin:0}
.cit-sub-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin:36px 0 18px;flex-wrap:wrap}
.cit-sub-head__title{font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:0}
.cit-sub-head__eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-blue);margin:0}
.mit-cross--teal{background:linear-gradient(135deg,color-mix(in oklab,var(--c-teal) 12%,var(--bg)),color-mix(in oklab,var(--c-blue) 8%,var(--bg)))}
.mit-cross--teal::before{background:radial-gradient(ellipse at center,color-mix(in oklab,var(--c-teal) 22%,transparent),transparent 60%)}
.mit-cross--teal .mit-cross__eyebrow{color:var(--c-teal)}
/* Pink theme variants for Cloud & Software page */
.mit-adv--pink .mit-card::before{background:var(--c-pink)}
.mit-adv--pink .mit-card:hover{border-color:color-mix(in oklab,var(--c-pink) 45%,var(--line));box-shadow:0 22px 48px -28px color-mix(in oklab,var(--c-pink) 50%,transparent)}
.mit-adv--pink .mit-card:hover .mit-card__idx{color:var(--c-pink)}
.mit-adv--pink .mit-card:hover .mit-card__label::after{background:var(--c-pink)}
.cit-stack--pink .cit-tile:hover{border-color:color-mix(in oklab,var(--c-pink) 45%,var(--line));box-shadow:0 18px 40px -28px color-mix(in oklab,var(--c-pink) 55%,transparent)}
.cit-stack--pink .cit-tile__ico{background:color-mix(in oklab,var(--c-pink) 14%,transparent);color:var(--c-pink)}
.cit-sub-head--pink .cit-sub-head__eyebrow{color:var(--c-pink)}
.mit-cross--pink{background:linear-gradient(135deg,color-mix(in oklab,var(--c-pink) 12%,var(--bg)),color-mix(in oklab,var(--c-purple,var(--c-pink)) 8%,var(--bg)))}
.mit-cross--pink::before{background:radial-gradient(ellipse at center,color-mix(in oklab,var(--c-pink) 22%,transparent),transparent 60%)}
.mit-cross--pink .mit-cross__eyebrow{color:var(--c-pink)}
/* Licensing brand grid (Cloud page) */
.cloud-licensing{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:8px}
@media (max-width:980px){.cloud-licensing{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.cloud-licensing{grid-template-columns:repeat(2,1fr)}}
.cloud-licensing__item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:22px 14px;border:1px solid var(--line);border-radius:14px;background:var(--bg);transition:border-color var(--t-med),transform var(--t-med),box-shadow var(--t-med)}
.cloud-licensing__item:hover{border-color:color-mix(in oklab,var(--c-pink) 45%,var(--line));transform:translateY(-2px);box-shadow:0 18px 40px -28px color-mix(in oklab,var(--c-pink) 55%,transparent)}
.cloud-licensing__logo{height:34px;width:auto;object-fit:contain;background:#fff;padding:6px 10px;border-radius:8px}
.cloud-licensing__name{font-size:12.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em;margin:0}
.cloud-licensing__role{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:0;text-align:center}
/* Lime theme variants for Data Intelligence & Applied AI page */
.mit-adv--lime .mit-card::before{background:var(--c-lime)}
.mit-adv--lime .mit-card:hover{border-color:color-mix(in oklab,var(--c-lime) 50%,var(--line));box-shadow:0 22px 48px -28px color-mix(in oklab,var(--c-lime) 55%,transparent)}
.mit-adv--lime .mit-card:hover .mit-card__idx{color:var(--c-lime)}
.mit-adv--lime .mit-card:hover .mit-card__label::after{background:var(--c-lime)}
.cit-stack--lime .cit-tile:hover{border-color:color-mix(in oklab,var(--c-lime) 50%,var(--line));box-shadow:0 18px 40px -28px color-mix(in oklab,var(--c-lime) 55%,transparent)}
.cit-stack--lime .cit-tile__ico{background:color-mix(in oklab,var(--c-lime) 18%,transparent);color:var(--c-lime)}
.cit-sub-head--lime .cit-sub-head__eyebrow{color:var(--c-lime)}
.mit-cross--lime{background:linear-gradient(135deg,color-mix(in oklab,var(--c-lime) 14%,var(--bg)),color-mix(in oklab,var(--c-pink) 8%,var(--bg)))}
.mit-cross--lime::before{background:radial-gradient(ellipse at center,color-mix(in oklab,var(--c-lime) 22%,transparent),transparent 60%)}
.mit-cross--lime .mit-cross__eyebrow{color:var(--c-lime)}
/* Horizons grid (next-gen tech tags) */
.dis-horizons{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
@media (max-width:780px){.dis-horizons{grid-template-columns:1fr}}
.dis-horizon{display:flex;gap:18px;align-items:flex-start;padding:20px 20px;border:1px solid var(--line);border-radius:14px;background:var(--bg);transition:border-color var(--t-med),background var(--t-med),transform var(--t-med),box-shadow var(--t-med)}
.dis-horizon:hover{border-color:color-mix(in oklab,var(--c-lime) 45%,var(--line));background:color-mix(in oklab,var(--c-lime) 4%,var(--bg));transform:translateY(-2px);box-shadow:0 18px 40px -28px color-mix(in oklab,var(--c-lime) 50%,transparent)}
.dis-horizon__tag{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 6px}
.dis-horizon__title{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:0 0 6px;line-height:1.3}
.dis-horizon__body{font-size:13px;line-height:1.55;color:var(--ink-soft);margin:0}
.dis-horizon__num{font-family:var(--font-display,inherit);font-size:30px;font-weight:300;font-feature-settings:"lnum","tnum";color:var(--ink);opacity:.18;flex-shrink:0;line-height:1;letter-spacing:-.02em;padding-top:2px;transition:opacity var(--t-med),color var(--t-med)}
.dis-horizon:hover .dis-horizon__num{opacity:1;color:var(--c-lime)}
/* Purple theme variants for Strategic IT page */
.mit-adv--purple .mit-card::before{background:var(--c-purple)}
.mit-adv--purple .mit-card:hover{border-color:color-mix(in oklab,var(--c-purple) 50%,var(--line));box-shadow:0 22px 48px -28px color-mix(in oklab,var(--c-purple) 55%,transparent)}
.mit-adv--purple .mit-card:hover .mit-card__idx{color:var(--c-purple)}
.mit-adv--purple .mit-card:hover .mit-card__label::after{background:var(--c-purple)}
.mit-adv--orange .mit-card::before{background:var(--c-orange)}
.mit-adv--orange .mit-card:hover{border-color:color-mix(in oklab,var(--c-orange) 50%,var(--line));box-shadow:0 22px 48px -28px color-mix(in oklab,var(--c-orange) 55%,transparent)}
.mit-adv--orange .mit-card:hover .mit-card__idx{color:var(--c-orange)}
.mit-adv--orange .mit-card:hover .mit-card__label::after{background:var(--c-orange)}
.mit-adv--sky .mit-card::before{background:var(--c-sky)}
.mit-adv--sky .mit-card:hover{border-color:color-mix(in oklab,var(--c-sky) 50%,var(--line));box-shadow:0 22px 48px -28px color-mix(in oklab,var(--c-sky) 55%,transparent)}
.mit-adv--sky .mit-card:hover .mit-card__idx{color:var(--c-sky)}
.mit-adv--sky .mit-card:hover .mit-card__label::after{background:var(--c-sky)}
.mit-adv--teal .mit-card::before{background:var(--c-teal)}
.mit-adv--teal .mit-card:hover{border-color:color-mix(in oklab,var(--c-teal) 50%,var(--line));box-shadow:0 22px 48px -28px color-mix(in oklab,var(--c-teal) 55%,transparent)}
.mit-adv--teal .mit-card:hover .mit-card__idx{color:var(--c-teal)}
.mit-adv--teal .mit-card:hover .mit-card__label::after{background:var(--c-teal)}
.cit-stack--purple .cit-tile:hover{border-color:color-mix(in oklab,var(--c-purple) 50%,var(--line));box-shadow:0 18px 40px -28px color-mix(in oklab,var(--c-purple) 55%,transparent)}
.cit-stack--purple .cit-tile__ico{background:color-mix(in oklab,var(--c-purple) 16%,transparent);color:var(--c-purple)}
.cit-sub-head--purple .cit-sub-head__eyebrow{color:var(--c-purple)}
.mit-cross--purple{background:linear-gradient(135deg,color-mix(in oklab,var(--c-purple) 14%,var(--bg)),color-mix(in oklab,var(--c-pink) 8%,var(--bg)))}
.mit-cross--purple::before{background:radial-gradient(ellipse at center,color-mix(in oklab,var(--c-purple) 22%,transparent),transparent 60%)}
.mit-cross--purple .mit-cross__eyebrow{color:var(--c-purple)}
/* Sky theme variants (Cloud & Software Services) */
.cit-stack--sky .cit-tile:hover{border-color:color-mix(in oklab,var(--c-sky) 50%,var(--line));box-shadow:0 18px 40px -28px color-mix(in oklab,var(--c-sky) 55%,transparent)}
.cit-stack--sky .cit-tile__ico{background:color-mix(in oklab,var(--c-sky) 16%,transparent);color:var(--c-sky)}
.cit-sub-head--sky .cit-sub-head__eyebrow{color:var(--c-sky)}
.mit-cross--sky{background:linear-gradient(135deg,color-mix(in oklab,var(--c-sky) 14%,var(--bg)),color-mix(in oklab,var(--c-blue) 8%,var(--bg)))}
.mit-cross--sky::before{background:radial-gradient(ellipse at center,color-mix(in oklab,var(--c-sky) 22%,transparent),transparent 60%)}
.mit-cross--sky .mit-cross__eyebrow{color:var(--c-sky)}
/* Orange theme variants (BiVi AI) */
.cit-stack--orange .cit-tile:hover{border-color:color-mix(in oklab,var(--c-orange) 50%,var(--line));box-shadow:0 18px 40px -28px color-mix(in oklab,var(--c-orange) 55%,transparent)}
.cit-stack--orange .cit-tile__ico{background:color-mix(in oklab,var(--c-orange) 18%,transparent);color:var(--c-orange)}
.cit-sub-head--orange .cit-sub-head__eyebrow{color:var(--c-orange)}
.mit-cross--orange{background:linear-gradient(135deg,color-mix(in oklab,var(--c-orange) 14%,var(--bg)),color-mix(in oklab,var(--c-pink) 8%,var(--bg)))}
.mit-cross--orange::before{background:radial-gradient(ellipse at center,color-mix(in oklab,var(--c-orange) 22%,transparent),transparent 60%)}
.mit-cross--orange .mit-cross__eyebrow{color:var(--c-orange)}
.dis-horizons--orange .dis-horizon:hover{border-color:color-mix(in oklab,var(--c-orange) 45%,var(--line));background:color-mix(in oklab,var(--c-orange) 4%,var(--bg));box-shadow:0 18px 40px -28px color-mix(in oklab,var(--c-orange) 50%,transparent)}
.dis-horizons--orange .dis-horizon:hover .dis-horizon__num{color:var(--c-orange)}
/* Cybersecurity callout band */
.sis-cyber{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:start;padding:32px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,color-mix(in oklab,var(--c-purple) 8%,var(--bg)),color-mix(in oklab,var(--c-pink) 5%,var(--bg)));margin-top:8px}
@media (max-width:880px){.sis-cyber{grid-template-columns:1fr;padding:24px}}
.sis-cyber__eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-purple);margin:0 0 8px}
.sis-cyber__title{font-size:24px;font-weight:600;letter-spacing:-.015em;color:var(--ink);margin:0 0 12px;line-height:1.2}
.sis-cyber__body{font-size:14px;line-height:1.6;color:var(--ink-soft);margin:0 0 14px}
.sis-cyber__list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.sis-cyber__list li{position:relative;padding-left:22px;font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
.sis-cyber__list li::before{content:"";position:absolute;left:0;top:8px;width:10px;height:10px;border-radius:3px;background:color-mix(in oklab,var(--c-purple) 40%,transparent);border:1px solid color-mix(in oklab,var(--c-purple) 60%,transparent)}
.sis-cyber__list strong{color:var(--ink);font-weight:600}
/* Subtle ambient starfield background for service pages */
#bv-stars{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:1}
[data-theme="light"] #bv-stars{opacity:.85;mix-blend-mode:multiply}
/* Header must float above main so the mega-menu dropdown isn't clipped */
body:has(#bv-stars) .header{position:sticky;top:0;z-index:60}
body:has(#bv-stars) main,
body:has(#bv-stars) .site-footer{position:relative;z-index:1}
/* Let the starfield show through hero + sections on these pages */
body:has(#bv-stars) .page-hero,
body:has(#bv-stars) .section,
body:has(#bv-stars) .section--alt{background:transparent}
body:has(#bv-stars) .page-hero::before,
body:has(#bv-stars) .page-hero::after{opacity:.55}
/* ============================================================
Scroll Reveal - elegant, subtle (non-home pages)
============================================================ */
.bv-reveal{
opacity:0;
transform:translate3d(0,16px,0);
transition:
opacity 550ms cubic-bezier(.22,.61,.36,1),
transform 550ms cubic-bezier(.22,.61,.36,1),
filter 550ms cubic-bezier(.22,.61,.36,1);
filter:blur(3px);
will-change:opacity,transform,filter;
}
.bv-reveal.is-visible{
opacity:1;
transform:none;
filter:none;
}
@media (prefers-reduced-motion: reduce){
.bv-reveal{opacity:1;transform:none;filter:none;transition:none}
}
/* Auto-hide header on scroll-down, reveal on scroll-up (non-home pages) */
.header{
transition:
border-color var(--t-med) var(--ease),
background var(--t-med) var(--ease),
transform 380ms cubic-bezier(.22,.61,.36,1);
will-change:transform;
}
.header.is-hidden{ transform:translateY(-105%); }
@media (max-width:1100px){
.header{
position:fixed;
left:0;
right:0;
top:0;
z-index:1000;
}
body{padding-top:72px}
.header.is-hidden{transform:translate3d(0,-105%,0)}
}
@media (prefers-reduced-motion: reduce){
.header{transition:none}
.header.is-hidden{transform:none}
}
/* ───────── nav magenta variant (BiVi AI) ───────── */
.nav__panel-item[data-color="magenta"]:hover .nav__panel-icon{color:var(--c-magenta);border-color:color-mix(in oklab,var(--c-magenta) 55%,var(--line))}
/* ───────── page-hero magenta variant ───────── */
.page-hero--magenta{background:radial-gradient(ellipse 50% 70% at 90% 0%, color-mix(in oklab, var(--c-magenta) 14%, transparent), transparent 60%), var(--bg)}
.page-hero--magenta::before{background:radial-gradient(circle, color-mix(in oklab,var(--c-magenta) 70%,transparent), transparent 65%)}
[data-theme="light"] .page-hero--magenta{background:radial-gradient(ellipse 60% 80% at 90% 0%, color-mix(in oklab,var(--c-magenta) 12%,transparent), transparent 65%), var(--bg)}
/* services pillar magenta */
.pillar--magenta{--pc:var(--c-magenta)}
/* ───────── page-hero orange variant (BiVi sub-brand) ───────── */
.page-hero--orange{background:radial-gradient(ellipse 50% 70% at 90% 0%, color-mix(in oklab, var(--c-orange) 14%, transparent), transparent 60%), var(--bg)}
.page-hero--orange::before{background:radial-gradient(circle, color-mix(in oklab,var(--c-orange) 70%,transparent), transparent 65%)}
[data-theme="light"] .page-hero--orange{background:radial-gradient(ellipse 60% 80% at 90% 0%, color-mix(in oklab,var(--c-orange) 12%,transparent), transparent 65%), var(--bg)}
.page-hero--orange .page-hero__title-accent{ color: var(--c-orange); }
/* ───────── page-hero sky variant (Cloud) ───────── */
.page-hero--sky{background:radial-gradient(ellipse 50% 70% at 90% 0%, color-mix(in oklab, var(--c-sky) 14%, transparent), transparent 60%), var(--bg)}
.page-hero--sky::before{background:radial-gradient(circle, color-mix(in oklab,var(--c-sky) 70%,transparent), transparent 65%)}
[data-theme="light"] .page-hero--sky{background:radial-gradient(ellipse 60% 80% at 90% 0%, color-mix(in oklab,var(--c-sky) 12%,transparent), transparent 65%), var(--bg)}
.page-hero--sky .page-hero__title-accent{ color: var(--c-sky); }
/* magenta title-accent for Managed/BiVi (override default magenta is the same) */
.page-hero--magenta .page-hero__title-accent{ color: var(--c-magenta); }
/* correct teal title-accent (was previously rendering blue) */
.page-hero--teal .page-hero__title-accent{ color: var(--c-teal); }
/* ───────── slogan scrollytelling ───────── */
.slogan-scroll{position:relative;min-height:240vh;background:var(--bg)}
.slogan-scroll__sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.slogan-scroll__inner{max-width:1180px;padding:0 24px;text-align:left}
.slogan-scroll__eyebrow{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:color-mix(in oklab,var(--ink) 55%,transparent);margin:0 0 24px}
.slogan-scroll__line{font-family:'Inter Display','Inter',sans-serif;font-weight:700;font-size:clamp(2.6rem,8vw,7rem);line-height:1.02;letter-spacing:-.025em;margin:0;color:var(--ink);display:flex;flex-wrap:wrap;gap:.18em .28em}
.slogan-scroll__line .sw{display:inline-block;opacity:.1;transform:translateY(14px);filter:blur(4px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1),filter .7s ease}
.slogan-scroll__line .sw.is-on{opacity:1;transform:none;filter:none}
.slogan-scroll__line .sw--soft{font-weight:400;font-style:italic;color:color-mix(in oklab,var(--ink) 60%,transparent)}
.slogan-scroll__line .sw--accent{color:var(--c-magenta)}
.slogan-scroll__foot{margin-top:36px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.85rem;color:color-mix(in oklab,var(--ink) 60%,transparent);opacity:0;transform:translateY(8px);transition:opacity .7s ease .1s,transform .7s ease .1s}
.slogan-scroll__foot.is-on{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
.slogan-scroll{min-height:auto}
.slogan-scroll__sticky{position:relative;height:auto;padding:80px 0}
.slogan-scroll__line .sw,.slogan-scroll__foot{opacity:1;transform:none;filter:none;transition:none}
}
@media (max-width: 900px){
.slogan-scroll{min-height:auto}
.slogan-scroll__sticky{position:relative;height:auto;padding:64px 0}
.slogan-scroll__line{font-size:clamp(2rem,9vw,3.2rem)}
.slogan-scroll__line .sw,.slogan-scroll__foot{opacity:1;transform:none;filter:none;transition:none}
}
@media (max-width: 640px){
/* Intro lead — soft card with gradient accent rail, echoes capability rail on desktop */
.intro{ padding: 28px 0 8px; }
.intro-inner{ padding: 0 18px; }
.intro p.lead{
position: relative;
font-size: 19px;
line-height: 1.42;
letter-spacing: -0.005em;
padding: 18px 18px 18px 22px;
margin: 0;
border-radius: 16px;
background: color-mix(in oklab, var(--bg) 60%, transparent);
border: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
overflow: hidden;
}
.intro p.lead::before{
content:"";
position:absolute; left:0; top:10%; bottom:10%; width:3px;
border-radius: 3px;
background: linear-gradient(180deg,
var(--bv-magenta) 0%,
var(--bv-orange) 28%,
var(--bv-lime) 52%,
var(--bv-teal) 76%,
var(--bv-sky) 100%);
opacity:.9;
}
.intro p.lead em{ font-style: normal; color: var(--bv-teal); }
/* Slogan — mirror desktop: same flowing colored words, just sized for mobile */
.slogan-scroll{ padding: 0; }
.slogan-scroll__sticky{ padding: 32px 0 56px; }
.slogan-scroll__inner{ padding: 0 20px; }
.slogan-scroll__eyebrow{ margin: 0 0 18px; font-size:.72rem; }
.slogan-scroll__line{
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: .12em .28em;
margin: 0;
font-family: 'Inter Display','Inter',sans-serif;
font-weight: 700;
font-size: clamp(2.1rem, 11.5vw, 3.4rem);
line-height: 1.02;
letter-spacing: -.028em;
color: var(--ink);
border: 0;
padding: 0;
}
.slogan-scroll__line .sw{
display: inline-block;
/* keep desktop reveal animation on mobile too — it scrolls into view nicely */
opacity: .1;
transform: translateY(10px);
filter: blur(3px);
transition: opacity .55s cubic-bezier(.22,.61,.36,1),
transform .55s cubic-bezier(.22,.61,.36,1),
filter .55s ease;
}
.slogan-scroll__line .sw.is-on{ opacity:1; transform:none; filter:none; }
.slogan-scroll__line .sw::before{ content: none; }
.slogan-scroll__line .sw--soft{
font-weight: 400;
font-style: italic;
font-size: .55em;
color: color-mix(in oklab, var(--ink) 55%, transparent);
transform: translateY(-.18em);
}
.slogan-scroll__line .sw--soft.is-on{ transform: translateY(-.18em); }
.slogan-scroll__line .sw--accent{ color: var(--c-magenta); }
.slogan-scroll__foot{
margin: 28px 0 0;
font-size: 13px;
font-family: var(--font-body);
color: color-mix(in oklab, var(--ink) 60%, transparent);
opacity: 1; transform: none;
}
}
/* ============================================================
Liquid Glass - site-wide refinement (elegant, restrained)
Applies a subtle translucent surface + specular rim + soft
highlight to key cards and panels. Uses existing tokens so it
adapts to light/dark themes automatically.
============================================================ */
:root{
--glass-bg: linear-gradient(180deg,
color-mix(in oklab, var(--bg) 62%, transparent) 0%,
color-mix(in oklab, var(--bg) 82%, transparent) 100%);
--glass-bg-strong: linear-gradient(180deg,
color-mix(in oklab, var(--bg) 74%, transparent) 0%,
color-mix(in oklab, var(--bg) 90%, transparent) 100%);
--glass-border: color-mix(in oklab, var(--ink) 10%, transparent);
--glass-blur: blur(16px) saturate(160%);
--glass-shadow:
inset 0 1px 0 color-mix(in oklab, var(--ink) 9%, transparent),
inset 0 -1px 0 color-mix(in oklab, #000 14%, transparent),
0 10px 28px -22px rgba(0,0,0,.45);
}
/* shared specular highlight used by glassy cards */
.pillar, .result, .testimonial, .svc__item, .contact__form, .brands__item{
background:var(--glass-bg);
backdrop-filter:var(--glass-blur);
-webkit-backdrop-filter:var(--glass-blur);
border-color:var(--glass-border);
box-shadow:var(--glass-shadow);
}
.pillar, .result, .testimonial, .svc__item{
position:relative;
}
.pillar::before, .result::after, .testimonial::before, .svc__item::before{
content:"";position:absolute;left:14px;right:14px;top:0;height:1px;
background:linear-gradient(90deg,
transparent,
color-mix(in oklab, var(--ink) 22%, transparent) 50%,
transparent);
opacity:.55;pointer-events:none;border-radius:1px;
}
/* hover lift - keep brand accents already defined */
.pillar:hover, .result:hover, .testimonial:hover, .svc__item:hover{
background:var(--glass-bg-strong);
}
/* Contact form - glass panel wrapper feel */
.contact__form{
padding:24px;border:1px solid var(--glass-border);border-radius:var(--radius);
}
.contact__form input, .contact__form textarea{
background:color-mix(in oklab, var(--bg) 70%, transparent);
backdrop-filter:blur(10px) saturate(140%);
-webkit-backdrop-filter:blur(10px) saturate(140%);
border-color:color-mix(in oklab, var(--ink) 12%, transparent);
}
/* CTA band - add a centered glass plate for the inner content */
.cta__inner{
padding:36px 32px;border-radius:var(--radius);
background:var(--glass-bg);
backdrop-filter:var(--glass-blur);
-webkit-backdrop-filter:var(--glass-blur);
border:1px solid var(--glass-border);
box-shadow:var(--glass-shadow);
}
/* Footer - gentle glass wash on top section */
.footer__top{
position:relative;padding:28px;border-radius:var(--radius);
background:color-mix(in oklab, var(--bg) 40%, transparent);
backdrop-filter:blur(14px) saturate(150%);
-webkit-backdrop-filter:blur(14px) saturate(150%);
border:1px solid var(--glass-border);
}
/* Brand chips - subtle glass pills */
.brands__item{
box-shadow:
inset 0 1px 0 color-mix(in oklab, var(--ink) 8%, transparent),
0 4px 14px -10px rgba(0,0,0,.35);
}
/* Performance / accessibility fallbacks */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
.pillar, .result, .testimonial, .svc__item,
.contact__form, .contact__form input, .contact__form textarea,
.cta__inner, .footer__top, .brands__item{
background:var(--bg);
}
}
@media (max-width:560px){
/* lighten blur cost on small screens */
:root{ --glass-blur: blur(10px) saturate(140%); }
}
/* ───────── BiVi hero ambient mark ───────── */
.page-hero--bivi{overflow:hidden}
.page-hero--bivi .page-hero__mark{
position:absolute;
top:50%;
right:0;
transform:translateY(-50%);
width:clamp(360px, 46vw, 720px);
height:auto;
opacity:.10;
filter:saturate(1.05) blur(.2px);
pointer-events:none;
user-select:none;
z-index:0;
mask-image:radial-gradient(ellipse at center, #000 55%, transparent 78%);
-webkit-mask-image:radial-gradient(ellipse at center, #000 55%, transparent 78%);
}
[data-theme="light"] .page-hero--bivi .page-hero__mark{opacity:.14}
@media (max-width: 820px){
.page-hero--bivi .page-hero__mark{right:0; width:80vw; opacity:.07}
[data-theme="light"] .page-hero--bivi .page-hero__mark{opacity:.10}
}
/* ═══════════════════════════════════════════════════════════
MOBILE AUDIT — fixes applied only at ≤480px
Desktop styles intentionally untouched.
═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
/* ── Chat launcher: scale down so it doesn't dominate the viewport ── */
.bv-chat-dock{
right: 14px !important;
bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
gap: 6px !important;
}
.bv-chat-launcher{ width: 92px !important; height: 92px !important; }
.bv-chat-launcher img{ width: 78px !important; height: 78px !important; }
.bv-chat-launcher::before{ width: 124px !important; height: 124px !important; }
.bv-chat-tip{ font-size: 10px !important; padding: 5px 9px !important; letter-spacing: .35px !important; }
.bv-chat-panel{
right: 10px !important;
left: 10px !important;
bottom: 110px !important;
width: auto !important;
max-width: none !important;
max-height: calc(100vh - 140px) !important;
}
/* ── Hero stat labels: lighter line-height so 3-4 word labels feel less stacked ── */
.hero-stat__label, .stat__label{ line-height: 1.25; }
/* ── Process header: ensure "Design. Deploy. Operate." never collides with the orb ── */
.process-head{ padding-bottom: 32px; margin-bottom: 40px; }
.process-head h2{ font-size: clamp(32px, 9vw, 44px); line-height: 1.02; }
.process-orb{ display: none; }
/* ── BiVi hero ambient mark: keep fully visible, fade via mask ── */
.page-hero--bivi .page-hero__mark{
right: 0;
width: 92vw;
opacity: .07;
}
[data-theme="light"] .page-hero--bivi .page-hero__mark{ opacity: .10; }
/* ── Footer: tighter rhythm, more breathing room from edges ── */
.footer__top{ padding: 22px 18px !important; }
/* ── CTA inner padding: avoid edge-tight buttons on tiny screens ── */
.cta__inner{ padding: 28px 20px !important; }
/* ── Section vertical rhythm: trim oversized desktop paddings ── */
.section{ padding-top: 56px; padding-bottom: 56px; }
/* ── Capability chips: nicer tap targets ── */
.caps-chip{ min-height: 36px; }
/* ── Tables/long URLs in footer don't blow out width ── */
.footer a[href^="mailto:"], .footer a[href^="tel:"]{ word-break: break-word; }
}
/* ── Mobile: keep header pinned even on pages with the #bv-stars canvas.
The desktop `body:has(#bv-stars) .header{position:sticky}` rule causes a
72px gap above the header on mobile because of `body{padding-top:72px}`.
Force fixed positioning on small viewports — desktop sticky stays intact. */
@media (max-width: 1100px) {
body:has(#bv-stars) .header{
position: fixed !important;
top: 0 !important;
left: 0; right: 0;
z-index: 1000 !important;
}
}