/* glossy dark-blue + white layer over the black base; loaded last on every page */
:root{--navy:#0b1a4a;--navy-2:#06102e;--ink-blue:#1D43D8}
body{background:
  radial-gradient(1200px 700px at 85% -10%,rgba(29,67,216,.28),transparent 60%),
  radial-gradient(900px 600px at -10% 40%,rgba(29,67,216,.14),transparent 60%),
  linear-gradient(180deg,#030713 0%,#000 55%,#040a1f 100%) fixed;}
.hero .scrim{background:linear-gradient(to top,rgba(3,7,19,.95) 0%,rgba(3,7,19,.78) 30%,rgba(0,0,0,0) 72%)}
#ascii{opacity:.9}
/* glossy navy cards: deep blue fill, soft top sheen, thin light edge */
.card{background:linear-gradient(160deg,rgba(29,67,216,.20) 0%,rgba(11,26,74,.55) 38%,rgba(6,16,46,.85) 100%);
  box-shadow:0 0 0 1px rgba(120,150,255,.18),inset 0 1px 0 rgba(255,255,255,.10),0 20px 50px -30px rgba(29,67,216,.6)}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:40%;background:linear-gradient(180deg,rgba(255,255,255,.06),transparent);pointer-events:none}
.metrics{background:linear-gradient(160deg,rgba(29,67,216,.18),rgba(6,16,46,.8));box-shadow:0 0 0 1px rgba(120,150,255,.18),inset 0 1px 0 rgba(255,255,255,.08)}
.chip{background:rgba(29,67,216,.22);box-shadow:inset 0 0 0 1px rgba(120,150,255,.25)}
/* a band of white: the logo strip sits on a clean white panel */
.trust{background:#f7f8fc;color:#0b1a4a;margin-top:24px;padding:40px 0 36px}
.trust .cap{color:#4a5a8a}
.trust .marquee .tile{background:#fff;box-shadow:0 1px 0 rgba(11,26,74,.06),0 0 0 1px rgba(11,26,74,.08)}
.trust .marquee.names .tile{background:#0b1a4a;color:#fff;box-shadow:none}
.trust .marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
/* primary button: white with a blue glow */
.btn{box-shadow:0 8px 30px -10px rgba(82,140,255,.7)}
footer{background:linear-gradient(180deg,transparent,rgba(11,26,74,.55));border-top-color:rgba(120,150,255,.18)}
header{background:none}
.card.story::before{display:none}
.card.netimg{background:#fff}

/* no accent colours: everything white/grey, blue only in the background */
.dot.b{background:#cfd6e6}
.steps .n,.engines .card .go,.hl,.plain-hero h1 .hl{color:#fff}
.engines .card,.result{border-top:1px solid rgba(255,255,255,.12)}
.metrics .v{background:none;-webkit-text-fill-color:#fff;color:#fff}
.plain-hero .glow,.cta .glow,.hero .glow{background:radial-gradient(circle,rgba(29,67,216,.18),transparent 62%)}
.chip{background:#16181f;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.btn{box-shadow:none}
.bar i.focus{background:#fff}
.msg.in{background:rgba(255,255,255,.08);color:#ededed}
.card{background:linear-gradient(160deg,rgba(255,255,255,.04) 0%,rgba(10,14,28,.92) 45%,rgba(6,9,20,.96) 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.10),inset 0 1px 0 rgba(255,255,255,.08)}
.card.netimg{background:#fff}
.metrics{background:rgba(10,14,28,.9);box-shadow:0 0 0 1px rgba(255,255,255,.10)}
.trust .marquee.names .tile{background:#fff;color:#111;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.trust .cap{color:#555}
footer{background:none;border-top-color:rgba(255,255,255,.12)}
.dot.g{background:#fff}
.diff .add,.diff .mod{border-color:rgba(255,255,255,.35)}

/* page ending: client faces + plain results */
.faces{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px}
@media(max-width:900px){.faces{grid-template-columns:1fr}}
.face{margin:0;display:flex;flex-direction:column}
.face-media{position:relative;display:block;width:100%;aspect-ratio:4/3;border:0;padding:0;background:#000;cursor:pointer;overflow:hidden}
.face-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.face-media:hover img{transform:scale(1.03)}
.face-media .play{position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;background:#fff;color:#111;font:500 13px Inter,system-ui,sans-serif;padding:8px 12px}
.face-media .play svg{width:11px;height:11px}
.face video{width:100%;aspect-ratio:4/3;background:#000;display:block;object-fit:cover}
.face blockquote{font-size:20px;font-weight:500;letter-spacing:-.5px;line-height:1.35;padding:24px 24px 12px}
.face figcaption{padding:0 24px 24px;margin-top:auto;display:flex;flex-direction:column;gap:2px}
.face figcaption b{font-weight:500;color:#fff}
.face figcaption span{font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;color:#999}
.wins{display:grid;grid-template-columns:repeat(4,1fr);margin-top:16px;box-shadow:0 0 0 1px rgba(255,255,255,.10);background:rgba(10,14,28,.9)}
@media(max-width:900px){.wins{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.wins{grid-template-columns:1fr}}
.win{padding:28px;border-right:1px solid rgba(255,255,255,.08)}
.win:last-child{border-right:0}
.win .big{font-size:44px;font-weight:500;letter-spacing:-2px;line-height:1;color:#fff}
.win .client{font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;color:#ededed;text-transform:uppercase;letter-spacing:.05em;margin-top:14px}
.win p{color:#999;font-size:14px;line-height:1.5;margin-top:6px}
/* consistent portrait frames for every client video: no black bars, video fills the same frame as the still */
.faces{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.face-media,.face video{aspect-ratio:4/5}
.face video{object-fit:cover}
.faces[data-n="3"]{grid-template-columns:repeat(3,1fr)}
.faces[data-n="4"]{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.faces[data-n="4"]{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.faces[data-n="3"],.faces[data-n="4"]{grid-template-columns:1fr}}
/* backed-company logos: greyscale so they never read as Blue Sun clients */
.trust .marquee.names .tile{background:#fff;height:64px;padding:0 24px;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.trust .marquee.names .tile img{height:28px;width:auto;filter:grayscale(1);opacity:.75}
/* logo band back to dark so the page reads as one piece */
.trust{background:transparent;color:#ededed;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.trust .cap{color:#999}
.trust .marquee .tile{background:#fff;box-shadow:none}
.trust .marquee.names .tile{background:transparent;box-shadow:0 0 0 1px rgba(255,255,255,.10)}
.trust .marquee.names .tile img{filter:grayscale(1) invert(1);mix-blend-mode:screen;opacity:.8}
/* investor logos in their own colours, on white cards like the client row */
.trust .marquee.names .tile{background:#fff;box-shadow:none;height:64px}
.trust .marquee.names .tile img{filter:none;mix-blend-mode:normal;opacity:1;height:30px}