/* ─── pokerbot.com — homepage ─── */
:root{
--bg:#0F1419;
--bg-elev:#161B22;
--text:#F0F6FC;
--text-mute:#8B949E;
--text-dim:#5E6571;
--accent:#E0B055; /* primary — gold, B2B / Club Owners */
--accent-2:#00B8D4; /* secondary — cyan, Players / data */
--border:rgba(255,255,255,.08);
--border-strong:rgba(255,255,255,.16);
--hairline:rgba(255,255,255,.05);
--font-sans:"Manrope","Geist","Inter",ui-sans-serif,system-ui,sans-serif;
--font-mono:"Geist Mono","JetBrains Mono",ui-monospace,monospace;
--grain-opacity:.06;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{
scroll-behavior:smooth;
}
body{
background:var(--bg);
color:var(--text);
font-family:var(--font-sans);
font-feature-settings:"ss01","cv11";
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
font-size:16px;
line-height:1.5;
letter-spacing:-0.01em;
overflow-x:hidden;
}
::selection{background:var(--accent);color:#0a0a0a}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
/* ─── Film grain overlay ─── */
.grain{
position:fixed;inset:0;pointer-events:none;z-index:9990;
opacity:var(--grain-opacity);
mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
background-size:220px 220px;
animation:grain-shift 1.2s steps(6) infinite;
}
@keyframes grain-shift{
0%{transform:translate(0,0)}
20%{transform:translate(-3%,2%)}
40%{transform:translate(2%,-3%)}
60%{transform:translate(-2%,3%)}
80%{transform:translate(3%,-2%)}
100%{transform:translate(0,0)}
}
/* ─── Preloader (simple typewriter) ─── */
.preloader-simple{
position:fixed;inset:0;z-index:9999;
background:var(--bg);
display:flex;align-items:center;justify-content:center;
transition:opacity 1.2s ease, filter 1.2s ease;
will-change:filter,opacity;
}
.preloader-simple.fading{
opacity:0;
filter:blur(14px);
pointer-events:none;
}
.preloader-simple.fading .pls-word{
transform:scale(.96);
transition:transform 1.2s cubic-bezier(.4,0,.2,1);
}
/* Site content lens-focus reveal — pure blur+opacity, no scale */
.site-content{
filter:blur(18px);
opacity:0;
transition:filter 1.4s cubic-bezier(.3,0,.2,1),
opacity 1.4s ease;
}
.site-content.revealed{
filter:none; /* truly none so position:fixed children work */
opacity:1;
}
.site-content.instant{
filter:none;opacity:1;transition:none;
}
/* Header lives OUTSIDE .site-content so it stays sticky at top.
z-index sits ABOVE .mobile-nav (1000) so the burger → X transform
stays visible and clickable while the menu drawer is open. */
.header{ z-index: 1001 }
/* Preloader wordmark — match the header logo visual exactly */
.pls-word{
font-family:var(--font-mono);
font-weight:500;
font-size:clamp(48px,8vw,88px);
line-height:1;
letter-spacing:-0.02em;
color:var(--text);
display:inline-flex;align-items:baseline;
}
.pls-text{white-space:pre}
/* Dot matches header .logo .dot (round, gold, glow + ripple-pulse) */
.pls-caret{
display:inline-block;
width:.14em;height:.14em;
border-radius:50%;
background:var(--accent);
margin-left:.06em;margin-bottom:.04em;
box-shadow:0 0 18px var(--accent);
position:relative;
opacity:0;
transition:opacity .15s steps(2);
}
.pls-caret.on{opacity:1}
.pls-caret.on::after{
content:"";
position:absolute;inset:-30%;
border-radius:50%;
background:var(--accent);
opacity:.3;
animation:dot-pulse 2.4s ease-in-out infinite .15s;
}
@keyframes dot-pulse{
0%,100%{transform:scale(1);opacity:.3}
50%{transform:scale(2.4);opacity:0}
}
/* ─── Layout ─── */
.page{max-width:1400px;margin:0 auto;padding:0 32px}
@media (max-width:720px){ .page{padding:0 20px} }
@media (max-width:480px){ .page{padding:0 18px} }
/* Section H2 — overflow guard: H1/sections must not extend past viewport */
.section-h2{ overflow-wrap:anywhere; word-break:break-word }
/* Force base page padding even when section class adds its own padding */
section.services.page,
section.technologies.page,
section.trust.page,
section.cta.page,
section.problems.page,
section.research-lead.page,
section.how-we-work.page,
section.who-we-serve.page{ padding-left:32px; padding-right:32px }
@media (max-width:720px){
section.services.page,
section.technologies.page,
section.trust.page,
section.cta.page,
section.problems.page,
section.research-lead.page,
section.how-we-work.page,
section.who-we-serve.page{ padding-left:20px; padding-right:20px }
}
@media (max-width:480px){
section.services.page,
section.technologies.page,
section.trust.page,
section.cta.page,
section.problems.page,
section.research-lead.page,
section.how-we-work.page,
section.who-we-serve.page{ padding-left:18px; padding-right:18px }
}
/* ─── Header ─── */
.header{
position:fixed;top:0;left:0;right:0;z-index:1001;
background:rgba(14,17,22,.72);
-webkit-backdrop-filter:blur(20px) saturate(180%);
backdrop-filter:blur(20px) saturate(180%);
}
.header.scrolled{
/* no border — visual hierarchy via blur alone */
}
.header-inner{
display:flex;align-items:center;justify-content:space-between;
height:58px;
max-width:none;
padding-left:32px;padding-right:32px;
}
@media (max-width:880px){
.header-inner{ padding-left:18px; padding-right:18px }
}
.nav{display:flex;align-items:center;gap:32px}
.nav-link{
font-size:13.5px;color:var(--text-mute);
transition:color .15s ease;
}
.nav-link:hover{color:var(--text)}
.nav-cta{
display:inline-flex;align-items:center;gap:6px;
padding:8px 14px;border-radius:8px;
background:var(--text);color:#0a0a0a;
font-size:13px;font-weight:500;
white-space:nowrap;
transition:transform .15s ease, background .15s ease;
}
.nav-cta:hover{transform:translateY(-1px)}
.nav-cta .arrow{font-family:var(--font-mono);font-size:11px}
/* Burger button — hidden on desktop, visible on mobile via media query */
.burger{
display:none;
background:transparent;border:0;padding:8px;
cursor:pointer;
flex-direction:column;justify-content:center;gap:5px;
width:36px;height:36px;
align-items:center;
}
.burger span{
display:block;
width:20px;height:2px;
background:var(--text);
transition:transform .25s ease, opacity .15s ease;
transform-origin:center;
}
.header.menu-open .burger span:nth-child(1){
transform:translateY(7px) rotate(45deg);
}
.header.menu-open .burger span:nth-child(2){
opacity:0;
}
.header.menu-open .burger span:nth-child(3){
transform:translateY(-7px) rotate(-45deg);
}
/* Mobile nav drawer — slides in from right */
.mobile-nav{
position:fixed;
top:0; right:0; bottom:0;
width:min(340px, 86vw);
background:#0F1419;
background:var(--bg);
border-left:1px solid var(--border);
box-shadow:-12px 0 40px rgba(0,0,0,.5);
z-index:1000;
transform:translateX(100%);
opacity:1;
visibility:visible;
pointer-events:none;
transition:transform .28s cubic-bezier(.3,0,.2,1);
display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;
padding:96px 24px 32px;
overflow:auto;
-webkit-overflow-scrolling:touch;
}
.mobile-nav.in{
transform:translateX(0);
pointer-events:auto;
}
.mobile-nav nav{
display:flex;flex-direction:column;align-items:stretch;
gap:0;
width:100%;
}
.mnav-link{
display:block;
padding:18px 8px;
border-bottom:1px solid var(--border);
color:var(--text);
font-size:18px;
font-weight:500;
letter-spacing:-.005em;
}
.mnav-cta{
margin-top:24px;
display:inline-flex;align-items:center;gap:8px;justify-content:center;
padding:14px 22px;
background:var(--accent);
color:#0a0a0a;
font-size:14px;
font-weight:600;
border-radius:10px;
}
.mnav-cta .arrow{ font-family:var(--font-mono); font-size:12px }
/* Logo — the locked-in "mono" wordmark */
.logo{
display:inline-flex;align-items:baseline;
font-family:var(--font-mono);
font-weight:500;
font-size:18px;
letter-spacing:-0.02em;
color:var(--text);
line-height:1;
}
.logo .dot{
display:inline-block;width:6px;height:6px;border-radius:50%;
background:var(--accent);
margin-left:2px;margin-bottom:2px;
position:relative;
box-shadow:0 0 12px var(--accent);
}
.logo .dot::after{
content:"";position:absolute;inset:-3px;border-radius:50%;
background:var(--accent);opacity:.3;
animation:dot-pulse 2.4s ease-in-out infinite;
}
@keyframes dot-pulse{
0%,100%{transform:scale(1);opacity:.3}
50%{transform:scale(1.8);opacity:0}
}
/* ─── Hero ─── */
.hero{
position:relative;
min-height:100vh;
padding-top:120px;padding-bottom:0;
display:flex;flex-direction:column;
overflow:visible;
}
.hero-eyebrow{
font-family:var(--font-mono);font-size:11px;
letter-spacing:.18em;text-transform:uppercase;
color:var(--text-dim);
display:flex;align-items:center;justify-content:center;gap:14px;
margin-bottom:24px;
}
.hero-eyebrow::before,
.hero-eyebrow::after{
content:"";display:inline-block;width:48px;height:1px;background:var(--text-dim);
opacity:.4;
}
.hero-h1{
font-size:clamp(40px, 6vw, 88px);
line-height:.95;
font-weight:600;
letter-spacing:-0.035em;
text-align:center;
margin:0 auto;
max-width:1100px;
text-wrap:balance;
}
.hero-h1 em{
font-style:normal;
color:var(--text-mute);
font-weight:400;
}
.hero-h1 .h1-mark{
color:var(--accent);
font-style:normal;
}
/* Cinematic stage — pixel scene centered as main hero */
.hero-stage{
position:relative;
display:flex;flex-direction:column;align-items:center;
flex:1;
margin-top:24px;
}
.hero-stage-scene{
position:relative;
width:min(560px, 70vw);
aspect-ratio:240/200;
margin:0 auto;
z-index:2;
transform-origin:center 60%;
}
/* Floating headline corners — desktop only */
.hero-corner{
position:absolute;
font-family:var(--font-mono);
font-size:11px;
color:var(--text-dim);
letter-spacing:.16em;
text-transform:uppercase;
z-index:1;
pointer-events:none;
}
.hero-corner-tl{ top:0; left:0; max-width:240px }
.hero-corner-tr{ top:0; right:0; text-align:right; max-width:240px }
.hero-corner-bl{ bottom:0; left:0; max-width:240px }
.hero-corner-br{ bottom:0; right:0; text-align:right; max-width:240px }
.hero-corner strong{
display:block;color:var(--text);font-family:var(--font-sans);
font-size:14px;font-weight:500;letter-spacing:-0.01em;margin-top:4px;
}
/* Hero CTAs — minimal, no big cards */
.hero-ctas{
display:flex;align-items:center;justify-content:center;gap:16px;
margin-top:28px;
flex-wrap:wrap;
}
.hero-cta-primary{
display:inline-flex;align-items:center;gap:10px;
padding:13px 22px;border-radius:10px;
background:var(--accent);color:#0a0a0a;
font-size:14px;font-weight:600;
letter-spacing:-0.005em;
transition:transform .15s ease, filter .15s ease;
}
.hero-cta-primary:hover{transform:translateY(-1px);filter:brightness(1.08)}
.hero-cta-primary .arrow{font-family:var(--font-mono);font-size:12px}
.hero-cta-secondary{
display:inline-flex;align-items:center;gap:8px;
font-size:13.5px;color:var(--text-mute);
padding:13px 14px;
transition:color .15s ease;
}
.hero-cta-secondary:hover{color:var(--accent-2)}
.hero-cta-secondary .dot{
display:inline-block;width:6px;height:6px;border-radius:50%;
background:var(--accent-2);box-shadow:0 0 6px var(--accent-2);
}
.hero-cta-secondary .arrow{
font-family:var(--font-mono);font-size:11px;color:var(--accent-2);
}
/* Bottom ribbon — RAKE + activity in one row */
.hero-ribbon{
display:grid;
grid-template-columns:auto 1fr auto;
gap:32px;
padding:24px 0 0;
margin-top:auto;
align-items:end;
border-top:1px dashed rgba(255,255,255,.08);
padding-top:20px;
}
.hr-rake{
display:flex;flex-direction:column;gap:4px;
}
.hr-rake-val{
font-family:var(--font-mono);
font-size:clamp(28px,3.4vw,40px);
font-weight:600;
color:var(--accent);
letter-spacing:-0.025em;
line-height:1;
font-variant-numeric:tabular-nums;
}
.hr-rake-val .delta{
font-size:13px;color:var(--accent-2);
margin-left:10px;letter-spacing:.02em;font-weight:400;
}
.hr-rake-lbl{
font-family:var(--font-mono);font-size:10.5px;
color:var(--text-dim);letter-spacing:.16em;
text-transform:uppercase;
}
.hr-rake-lbl .live{
display:inline-flex;align-items:center;gap:6px;color:var(--accent-2);
margin-left:10px;
}
.hr-rake-lbl .live i{
display:inline-block;width:7px;height:7px;background:var(--accent-2);
animation:pix-blink .6s steps(1) infinite;
}
.hr-ticker{
overflow:hidden;position:relative;
align-self:end;
font-family:var(--font-mono);font-size:11.5px;
color:var(--text-mute);
white-space:nowrap;
padding:0 12px;
border-left:1px dashed rgba(255,255,255,.08);
border-right:1px dashed rgba(255,255,255,.08);
height:24px;display:flex;align-items:center;
}
.hr-ticker-track{
display:inline-flex;gap:32px;
animation:ticker-scroll 32s linear infinite;
}
.hr-ticker-row{display:inline-flex;gap:10px;align-items:center}
.hr-ticker-t{color:var(--text-dim)}
.hr-ticker-msg{color:var(--text)}
.hr-ticker-msg.rake{color:var(--accent)}
.hr-ticker-msg.muted{color:var(--text-dim);font-style:italic}
.hr-ticker-sep{color:var(--text-dim);opacity:.4}
@keyframes ticker-scroll{
from{transform:translateX(0)}
to{transform:translateX(-50%)}
}
.hr-kpi-stack{
display:flex;flex-direction:column;gap:4px;
text-align:right;
font-family:var(--font-mono);
}
.hr-kpi{
font-size:13.5px;color:var(--text);
font-variant-numeric:tabular-nums;
}
.hr-kpi .lbl{
color:var(--text-dim);font-size:10.5px;
letter-spacing:.14em;text-transform:uppercase;
margin-right:10px;
}
/* ─── Hero Cinema (full-bleed cinematic scrollytelling) ─────────── */
.hero-cinema{
position:relative;
height:400vh; /* 4 phases × 100vh each, one viewport per snap */
background:var(--bg);
}
/* Scroll-snap targets — invisible 100vh bands, one per phase */
.phase-snap{
position:absolute;
left:0;right:0;
height:100vh;
scroll-snap-align:start;
scroll-snap-stop:always;
pointer-events:none;
z-index:0;
}
.phase-snap[data-phase-snap="0"]{top:0}
.phase-snap[data-phase-snap="1"]{top:100vh}
.phase-snap[data-phase-snap="2"]{top:200vh}
.phase-snap[data-phase-snap="3"]{top:300vh}
/* Sections after hero-cinema snap to start so flow continues */
.services, .trust, .cta, .footer{ scroll-snap-align:start; scroll-snap-stop:normal; }
.hero-cinema-sticky{
position:sticky;top:0;left:0;
width:100vw;height:100vh;
overflow:hidden;
}
/* Mini-tables fleet — background layer, full viewport */
.hcin-fleet{
position:absolute;inset:0;
pointer-events:none;
z-index:1;
}
.mini-table{
position:absolute;
opacity:0;
transform:scale(.5);
transition:opacity .8s ease, transform .8s cubic-bezier(.3,0,.2,1);
will-change:opacity,transform;
}
.mini-table.in{
opacity:.88;transform:scale(1);
}
.mini-table svg{width:100%;height:100%;display:block;
filter:drop-shadow(0 0 12px rgba(0,0,0,.5));
}
/* ─── Central scene — single position, content morphs by phase ────── */
.hcin-scene-wrap{
position:absolute;
top:55%;
left:50%;
transform:translate(-50%, -50%);
transform-origin:center center;
height:min(640px, 60vh);
width:calc(min(640px, 60vh) * 240 / 200);
z-index:3;
pointer-events:none;
}
/* Sprite reaction — mouse position from :root vars. Active only on hero phase. */
:root{ --mx: 0; --my: 0; }
/* Plain `.ps-body` selector — the class is set in JSX, picks up everywhere */
.pixel-scene .ps-body{
transform: translate(calc(var(--mx) * 2px), calc(var(--my) * 1.6px));
transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
[data-active-phase]:not([data-active-phase="hero"]) .pixel-scene .ps-body{
transform: none;
}
.hcin-scene-inner{
width:100%;height:100%;
position:relative;
animation:hcin-scene-in .55s cubic-bezier(.3,0,.2,1);
}
@keyframes hcin-scene-in{
from { opacity:0; transform:scale(.97); }
to { opacity:1; transform:scale(1); }
}
.hcin-scene-inner .pixel-scene-wrap{
width:100%;height:100%;
aspect-ratio:auto;
}
.hcin-scene-inner .pixel-scene{
width:100%;height:100%;display:block;
filter:drop-shadow(0 12px 60px rgba(0,0,0,.6));
}
/* Poker play vs Floater visibility — toggle by active phase */
[data-active-phase="hero"] .pp-only-non-hero{ display: none }
[data-active-phase]:not([data-active-phase="hero"]) .pp-only-hero{ display: none }
/* Poker winner bounce — inner only; outer carries SVG transform */
.poker-winner-bounce{
animation: pkw-bounce 1.2s cubic-bezier(.5,.05,.5,.95) infinite;
}
@keyframes pkw-bounce{
0%, 100% { transform: translate(0, 0); }
25% { transform: translate(0, -10px); }
50% { transform: translate(0, 0); }
75% { transform: translate(0, -7px); }
}
/* Rake floater shown alongside the WINNER bounce — rises + fades. */
.poker-rake-float{
animation: pkw-rake 1.4s cubic-bezier(.3,0,.2,1) forwards;
transform-box: fill-box;
transform-origin: center;
}
@keyframes pkw-rake{
0% { opacity: 0; transform: translateY(2px); }
15% { opacity: 1; transform: translateY(0); }
70% { opacity: 1; transform: translateY(-8px); }
100% { opacity: 0; transform: translateY(-12px); }
}
/* Hide the original seated sprite at the winner seat while bouncing */
.hcin-scene-inner[data-winner-seat="0"] .pixel-scene .ps-walker[data-seat="0"],
.hcin-scene-inner[data-winner-seat="1"] .pixel-scene .ps-walker[data-seat="1"],
.hcin-scene-inner[data-winner-seat="2"] .pixel-scene .ps-walker[data-seat="2"],
.hcin-scene-inner[data-winner-seat="3"] .pixel-scene .ps-walker[data-seat="3"],
.hcin-scene-inner[data-winner-seat="4"] .pixel-scene .ps-walker[data-seat="4"],
.hcin-scene-inner[data-winner-seat="5"] .pixel-scene .ps-walker[data-seat="5"],
.hcin-scene-inner[data-winner-seat="6"] .pixel-scene .ps-walker[data-seat="6"],
.hcin-scene-inner[data-winner-seat="7"] .pixel-scene .ps-walker[data-seat="7"]{
visibility: hidden;
}
.hcin-scene-inner[data-winner-seat="0"] .ps-name[data-seat="0"],
.hcin-scene-inner[data-winner-seat="1"] .ps-name[data-seat="1"],
.hcin-scene-inner[data-winner-seat="3"] .ps-name[data-seat="3"],
.hcin-scene-inner[data-winner-seat="4"] .ps-name[data-seat="4"],
.hcin-scene-inner[data-winner-seat="5"] .ps-name[data-seat="5"],
.hcin-scene-inner[data-winner-seat="7"] .ps-name[data-seat="7"]{
visibility: hidden;
}
/* Hide PixelTableScene's internal status/name labels when in cinema mode.
Apply to .ps-name in BOTH the main pixel-scene AND any overlay SVGs
(e.g. BanReplaceOverlay) so MARIA matches other nametags exactly. */
.hcin-scene-inner .pixel-scene .ps-status{ display:none }
.hcin-scene-inner .ps-name text{
font-size:4.4px !important;
opacity:.75;
}
/* ─── Headline zone — FIXED top-left across all phases ─────────── */
.hcin-headline-zone{
position:absolute;
top:0;left:0;right:0;bottom:0;
pointer-events:none;
z-index:5;
}
.hcin-text-block{
position:absolute;
top:128px;
left:64px;
text-align:left;
width:clamp(280px, 32vw, 460px);
opacity:0;
transition:opacity .65s ease;
pointer-events:none;
}
.hcin-text-block.active{
opacity:1;
transition-delay:.1s;
}
.hcin-eyebrow{
font-family:var(--font-mono);
font-size:11px;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--text-dim);
display:inline-flex;align-items:center;gap:14px;
margin-bottom:18px;
}
.hcin-eyebrow::before{
content:"";display:inline-block;width:36px;height:1px;
background:var(--accent);
}
.hcin-h1{
font-size:clamp(32px, 3.6vw, 52px);
line-height:1.0;
font-weight:600;
letter-spacing:-0.035em;
margin:0;
text-wrap:balance;
}
.hcin-h1 em{
font-style:normal;
color:var(--text-mute);
font-weight:400;
}
.hcin-h1 .h1-mark{color:var(--accent)}
.hcin-h1 .h1-mark.accent-warm{color:#ff8888}
/* Cinema text — strong dark glow on all phases so the copy stays readable
over the pixel scenes, mini-tables and the Full Control world map. */
.hero-cinema .hcin-h1,
.hero-cinema .hcin-sub,
.hero-cinema .hcin-eyebrow{
text-shadow:
0 2px 4px rgba(0,0,0,.85),
0 0 10px rgba(15,20,25,.95),
0 0 24px rgba(15,20,25,.85),
0 0 48px rgba(15,20,25,.7);
}
.hero-cinema .hcin-sub{
color:var(--text);
}
.hcin-sub{
font-size:clamp(13.5px, .95vw, 15.5px);
color:var(--text-mute);
margin:18px 0 0;
max-width:380px;
line-height:1.55;
}
/* ─── Right metrics — FIXED top-right, strong-baseline aligned with H1 ── */
.hcin-metrics{
position:absolute;
top:140px; /* push down so right "strong" lines up with left H1 top */
right:64px;
width:280px;
z-index:5;
/* Align "lead" (small uppercase) baseline with the H1 baseline on the left.
Eyebrow is ~11px + 18px margin = ~29px before H1. We push the metric set
down by that amount so the BIG strong values sit at the H1 line. */
}
.hcin-metrics-set{
display:flex;flex-direction:column;
gap:28px;
opacity:0;
transition:opacity .65s ease;
pointer-events:none;
position:absolute;
top:30px; /* sits below where the "eyebrow" line would be on the left */
right:0;
text-align:right;
}
.hcin-metrics-set.active{
opacity:1;
transition-delay:.1s;
}
[data-active-phase="hero"] .hcin-metrics{display:none}
.hcin-metric .lead{
display:block;
font-family:var(--font-mono);
font-size:11px;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--text-dim);
margin-bottom:6px;
}
.hcin-metric strong{
display:block;
font-family:var(--font-mono);
font-size:clamp(22px, 1.9vw, 30px);
font-weight:600;
color:var(--text);
letter-spacing:-0.015em;
line-height:1;
font-variant-numeric:tabular-nums;
}
/* ─── Hero-only extras: live RAKE counter + shock stat ─────────────── */
.hero-rake{
position:absolute;
font-family:var(--font-mono);
z-index:5;
display:flex;flex-direction:column;gap:6px;
pointer-events:none;
opacity:1;
transition:opacity .7s ease, visibility .7s ease;
}
[data-active-phase]:not([data-active-phase="hero"]) .hero-rake,
[data-active-phase]:not([data-active-phase="hero"]) .hero-stat{
opacity:0;
visibility:hidden;
pointer-events:none;
}
.hero-stat{
position:absolute;
font-family:var(--font-sans);
z-index:5;
pointer-events:none;
opacity:1;
transition:opacity .7s ease, visibility .7s ease;
display:flex;flex-direction:column;gap:8px;
}
.hero-rake-tl{ top:140px; left:64px }
.hero-rake-tr{ top:140px; right:64px; align-items:flex-end; text-align:right }
.hero-rake-bl{ bottom:64px; left:64px }
.hero-rake-br{ bottom:64px; right:64px; align-items:flex-end; text-align:right }
.hero-rake .hr-lbl{
display:inline-flex;align-items:center;gap:10px;
font-size:10px;letter-spacing:.18em;text-transform:uppercase;
color:var(--text-dim);
}
.hero-rake .hr-lbl .live{
display:inline-flex;align-items:center;gap:6px;color:var(--accent-2);
}
.hero-rake .hr-lbl .live i{
display:inline-block;width:6px;height:6px;background:var(--accent-2);
box-shadow:0 0 6px var(--accent-2);
animation:pix-blink .6s steps(1) infinite;
}
.hero-rake .hr-val{
font-size:clamp(28px, 2.6vw, 38px);
font-weight:600;
color:var(--accent);
font-variant-numeric:tabular-nums;
letter-spacing:-0.02em;
line-height:1;
text-shadow:0 0 18px rgba(224,176,85,.18);
}
.hero-rake .hr-sub{
font-size:11px;color:var(--accent-2);
letter-spacing:.04em;
}
@keyframes pix-blink{ 0%,49%{opacity:1} 50%,100%{opacity:.25} }
.hero-stat-below-h1{
top:308px; /* under H1 + sub line height */
left:64px;
max-width:380px;
}
.hero-stat-top-right{
top:140px;right:64px;
align-items:flex-end;text-align:right;
}
.hero-stat-bottom-band{
bottom:88px;left:64px;right:64px;
flex-direction:row;align-items:flex-end;justify-content:space-between;gap:24px;
padding-bottom:8px;
border-bottom:1px solid rgba(255,255,255,.06);
}
.hero-stat-right-of-scene{
top:50%;right:48px;
transform:translateY(-50%);
align-items:flex-end;text-align:right;
}
.hero-stat .hs-num{
font-size:clamp(72px, 8vw, 132px);
font-weight:600;color:var(--accent);
letter-spacing:-0.04em;
line-height:.88;
font-feature-settings:"tnum";
}
.hero-stat .hs-unit{
color:var(--accent);
font-size:.55em;
margin-left:.05em;
font-weight:600;
}
.hero-stat .hs-lbl{
font-family:var(--font-mono);
font-size:13px;color:var(--text);
letter-spacing:.04em;line-height:1.4;
max-width:280px;
}
.hero-stat-bottom-band .hs-lbl{max-width:none;flex:1}
.hero-stat .hs-src{
font-family:var(--font-mono);
font-size:10px;color:var(--text-dim);
letter-spacing:.14em;text-transform:uppercase;
}
/* Dead keyframes — kept just in case but no rule references them */
@keyframes hero-extra-in{
from{opacity:0}
to {opacity:1}
}
@media (max-width:1100px){
.hero-rake .hr-val{font-size:24px}
.hero-stat .hs-num{font-size:clamp(56px,7vw,88px)}
}
@media (max-width:880px){
.hero-rake,
.hero-stat-below-h1,
.hero-stat-top-right,
.hero-stat-bottom-band,
.hero-stat-right-of-scene{ display:none }
}
.hcin-footnote{
position:absolute;bottom:24px;right:32px;
display:inline-flex;align-items:center;gap:10px;
font-family:var(--font-mono);font-size:11.5px;
color:var(--text-dim);
letter-spacing:.04em;
z-index:6;
opacity:1;
transition:opacity .7s ease, visibility .7s ease;
}
[data-active-phase]:not([data-active-phase="hero"]) .hcin-footnote{
opacity:0;
visibility:hidden;
pointer-events:none;
}
.hcin-footnote .dot{ display:none }
.hcin-footnote a{
color:var(--text);
border-bottom:1px solid var(--text-dim);
transition:color .15s, border-color .15s;
}
.hcin-footnote a:hover{
color:var(--accent-2);
border-color:var(--accent-2);
}
/* ─── Mini-table accents ───────────────────────────────────────── */
.mt-oval.pulsing{ animation:mt-pulse-red 1.0s ease-in-out infinite }
@keyframes mt-pulse-red{
0%,100%{stroke-opacity:0.4}
50%{stroke-opacity:1}
}
.mt-ban-label{ animation:mt-ban-flash 0.4s steps(2) infinite }
@keyframes mt-ban-flash{
0%,49%{opacity:1}
50%,100%{opacity:0.25}
}
.mt-floater{
animation:mt-float 2.6s ease-out infinite;
transform-origin:center;transform-box:fill-box;
}
@keyframes mt-float{
0% { opacity:0; transform:translateY(2px) }
10% { opacity:1; transform:translateY(0) }
60% { opacity:1; transform:translateY(-4px) }
85% { opacity:0; transform:translateY(-8px) }
100% { opacity:0; transform:translateY(-8px) }
}
/* ─── Hide JOE entirely (seat 5 walker + nametag) during farms phase ── */
[data-active-phase="farms"] .pixel-scene .ps-walker[data-seat="5"]{
display:none;
}
[data-active-phase="farms"] .pixel-scene g.ps-name[data-seat="5"] text{
opacity:0 !important;
}
/* Desktop: wrapper is invisible, comparison uses its own absolute positioning */
.hero-cinema-mobile-cmp-wrap{ display:contents }
.hcin-worldmap{
position:absolute;
inset:0;
width:100%;height:100%;
z-index:1;
pointer-events:none;
opacity:0;
transform-origin:center 40%;
/* Default desktop scale — settles into the viewport after fade-in. */
transform:scale(1);
/* Animate ONLY opacity so device-specific scale overrides win. */
animation:worldmap-in 1.4s cubic-bezier(.3,0,.2,1) forwards;
}
@keyframes worldmap-in{
from { opacity:0 }
to { opacity:1 }
}
.hcin-worldmap .wm-pulse{
animation:wm-pulse 2.6s ease-in-out infinite;
}
@keyframes wm-pulse{
0%,100% { opacity:.4; transform:scale(.8) }
50% { opacity:1; transform:scale(1.4) }
}
.hcin-worldmap .wm-pulse,
.hcin-worldmap circle{ transform-origin:center; transform-box:fill-box }
@media (max-width:880px){
.hcin-worldmap{
/* Mobile scale */
transform:scale(1.5);
transform-origin:center 48%;
}
}
.hcin-mesh{
position:absolute;
inset:0;
width:100%;height:100%;
z-index:2;
pointer-events:none;
}
.hcin-mesh .mesh-edge{
opacity:0;
animation:mesh-edge-in .6s ease forwards;
}
@keyframes mesh-edge-in{ from{opacity:0} to{opacity:1} }
.hcin-mesh .mesh-node{
opacity:0;
animation:mesh-node-in .5s cubic-bezier(.5,1.4,.5,.95) forwards;
}
@keyframes mesh-node-in{ from{opacity:0} to{opacity:1} }
.hcin-mesh .mesh-floater{
opacity:0;
animation:mesh-floater 3.6s ease-out infinite;
}
@keyframes mesh-floater{
0%,100% { opacity:0 }
10%,60% { opacity:1 }
}
.hcin-comparison{
position:absolute;
top:128px;
right:64px;
width:380px;
z-index:10;
display:flex;flex-direction:column;
gap:2px;
font-family:var(--font-mono);
background:rgba(15,20,25,.78);
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
padding:8px 22px;
border-radius:10px;
}
.hcin-cmp-row{
display:grid;
grid-template-columns:1fr auto;
gap:14px;
align-items:baseline;
padding:11px 0;
border-bottom:1px solid rgba(255,255,255,.06);
}
.hcin-cmp-row:last-child{ border-bottom:0 }
.hcin-cmp-row .cmp-label{
font-size:13px;
color:var(--text-mute);
font-family:var(--font-sans);
}
.hcin-cmp-row .cmp-vals{
display:inline-flex;align-items:baseline;gap:10px;
justify-self:end;
}
.cmp-v{
font-size:15px;
font-weight:600;
font-variant-numeric:tabular-nums;
}
.cmp-v.cmp-before{ color:#ff8888; opacity:.7 }
.cmp-v.cmp-after { color:var(--accent) }
.cmp-arrow{ color:var(--text-dim); font-size:11px }
/* Mesh on Full Control: smaller nodes, NO edges (clean swarm look) */
.hcin-mesh .mesh-edge{ display:none }
.hcin-mesh .mesh-node ellipse{ rx:1.6 !important; ry:1.0 !important }
.hcin-mesh .mesh-floater{ font-size:1.6px !important }
@media (max-width:880px){
/* Hide mesh on mobile — too crowded, comparison table is the focus */
.hcin-mesh{ display:none !important }
/* Cancel desktop's absolute layout on the inner comparison so the wrap
controls position. */
.hero-cinema .hcin-comparison{
position:static !important;
top:auto !important;
right:auto !important;
left:auto !important;
bottom:auto !important;
width:auto !important;
max-width:none !important;
padding:6px 14px !important;
margin:0 !important;
}
/* Wrap = absolutely-positioned overlay inside .hero-cinema-sticky.
left+right anchors symmetrically; width:auto lets the browser compute it. */
.hero-cinema-mobile-cmp-wrap{
display:block !important;
position:absolute !important;
top:auto !important;
left:18px !important;
right:18px !important;
bottom:160px !important;
width:auto !important;
max-width:none !important;
margin:0 !important;
padding:0 !important;
z-index:10 !important;
box-sizing:border-box !important;
}
.hero-cinema-mobile-cmp-wrap .hcin-cmp-row{
display:flex !important;
flex-direction:row !important;
align-items:baseline !important;
justify-content:space-between !important;
gap:10px !important;
width:auto !important;
min-width:0 !important;
padding:9px 0;
}
.hero-cinema-mobile-cmp-wrap .cmp-label{
flex:1 1 auto !important;
min-width:0 !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
font-size:12px !important;
}
.hero-cinema-mobile-cmp-wrap .cmp-vals{
flex:0 0 auto !important;
white-space:nowrap !important;
}
.hero-cinema-mobile-cmp-wrap .cmp-v{ font-size:13px !important }
}
/* Stage progress bar — UNIFIED across empty/ops/farms (7 dots, equal width) */
.hcin-progress{
position:absolute;bottom:32px;left:50%;
transform:translateX(-50%);
z-index:6;
display:flex;gap:14px;
pointer-events:auto;
font-family:var(--font-mono);
align-items:flex-end;
}
.hcin-progress-step{
display:flex;flex-direction:column;align-items:center;gap:8px;
font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
color:var(--text-dim);
transition:color .35s ease, opacity .35s ease;
width:96px;
opacity:.45;
background:none;
border:none;
padding:6px 4px;
font-family:inherit;
cursor:pointer;
pointer-events:auto;
}
.hcin-progress-step:hover{ opacity:.85 }
.hcin-progress-step:hover .hcps-dot{ background:rgba(255,255,255,.4) }
.hcin-progress-step.active{ color:var(--accent); opacity:1 }
.hcin-progress-step.done { opacity:.65 }
.hcps-dot{
width:32px;height:2px;
background:rgba(255,255,255,.18);
transition:background .35s ease, box-shadow .35s ease;
}
.hcin-progress-step.active .hcps-dot{ background:var(--accent); box-shadow:0 0 10px var(--accent) }
.hcin-progress-step.done .hcps-dot{ background:rgba(224,176,85,.6) }
.hcps-label{ white-space:nowrap; text-overflow:ellipsis; overflow:hidden; max-width:100% }
/* Phase grouping bracket on progress bar */
.hcin-progress-group{
display:flex; flex-direction:column; align-items:center; gap:6px;
position:relative;
}
.hcin-progress-group::before{
content:"";position:absolute;
bottom:24px;left:0;right:0;height:1px;
background:linear-gradient(to right, transparent, rgba(255,255,255,.10), transparent);
pointer-events:none;
}
.hcin-progress-group-head{
font-size:9px;letter-spacing:.18em;text-transform:uppercase;
color:var(--text-dim);opacity:.7;
margin-bottom:2px;
}
.hcin-progress-row{ display:flex; gap:14px }
/* ─── Scroll hint — short line + centered falling bead ─── */
.hero-cinema .hero-scroll-hint{
position:absolute;bottom:32px;right:64px;left:auto;
transform:none;animation:none;
z-index:6;
display:flex;flex-direction:column;align-items:center;gap:12px;
pointer-events:none;
}
.hsh-label{
font-family:var(--font-mono);
font-size:11px;
letter-spacing:.32em;
color:var(--text-mute);
text-transform:uppercase;
text-indent:.32em;
}
/* 6px-wide container so both the line and the bead can use the same
left:50% translateX(-50%) centering trick — eliminates 1px offsets */
.hsh-track{
position:relative;
width:6px;
height:28px;
}
.hsh-track::before{
content:"";
position:absolute;
left:50%;top:0;
width:1px;height:100%;
transform:translateX(-50%);
background:linear-gradient(to bottom,
rgba(255,255,255,.20) 0%,
rgba(255,255,255,.05) 100%);
}
.hsh-bead{
position:absolute;
left:50%;top:0;
width:6px;height:6px;
transform:translateX(-50%);
background:var(--accent);
border-radius:50%;
box-shadow:0 0 10px var(--accent);
animation:hsh-bead-fall 2.0s cubic-bezier(.5,0,.7,1) infinite;
}
@keyframes hsh-bead-fall{
0% { top:0; opacity:0 }
15% { top:0; opacity:1 }
85% { top:22px; opacity:1 }
100% { top:28px; opacity:0 }
}
@media (max-width:1100px){
.hcin-text-block{width:clamp(260px,28vw,380px)}
.hcin-h1{font-size:clamp(26px,3.4vw,42px)}
.hcin-metrics{width:240px}
}
@media (max-width:880px){
.hero-cinema-sticky{ padding-top: 58px }
/* H1 always TOP on mobile — same anchor for all phases */
.hcin-text-block{
top: 28px !important;
bottom: auto !important;
left: 18px; right: 18px;
width: auto;
text-align: left;
}
/* Sub text under H1 (back to default flow position) */
[data-active-phase]:not([data-active-phase="hero"]) .hcin-sub{
position: static;
margin: 12px 0 0;
}
/* Metrics block — visible on mobile non-hero phases, anchored above progress bar.
position:absolute (not fixed) so it sticks to .hero-cinema-sticky and scrolls
out cleanly when user leaves the section. */
.hero-cinema .hcin-metrics{
display:block !important;
position:absolute !important;
top:auto !important;
bottom:148px !important;
left:18px !important; right:18px !important;
width:auto !important;
z-index:5 !important;
}
[data-active-phase="hero"] .hcin-metrics{ display:none !important }
.hero-cinema .hcin-metrics-set{
position:static !important;
display:none !important;
opacity:1 !important;
pointer-events:none !important;
}
.hero-cinema .hcin-metrics-set.active{
display:flex !important;
flex-direction:row !important;
gap:32px !important;
text-align:center !important;
justify-content:center !important;
align-items:flex-start !important;
}
.hcin-metric{ text-align:center !important }
.hcin-metric .lead{ font-size:9.5px !important; margin-bottom:3px }
.hcin-metric strong{ font-size:16px !important }
/* Larger mobile H1 */
.hcin-h1{
font-size:clamp(40px, 11vw, 60px) !important;
line-height:1.0;
letter-spacing:-.035em;
}
.hcin-sub{ font-size:13.5px; max-width:none; margin-top:10px; line-height:1.45 }
.hcin-eyebrow{ font-size:10px; letter-spacing:.16em; margin-bottom:10px }
.hcin-eyebrow::before{ width:24px }
.hcin-metrics{ display:none }
/* Scene centered in viewport on ALL phases */
.hcin-scene-wrap{
top: 52% !important;
left: 50%;
bottom: auto !important;
transform: translate(-50%, -50%) !important;
width: min(112vw, 640px);
height: auto;
aspect-ratio: 240/200;
}
/* Hide mini-tables on mobile */
.mini-table,
.hcin-fleet{ display:none }
/* Progress bar — 6 items in 3+3 grid on mobile */
.hcin-progress{
bottom:24px;
left:50%;
transform:translateX(-50%);
display:flex !important;
flex-wrap:wrap;
justify-content:center;
column-gap:6px;
row-gap:12px;
width:300px;
max-width:96vw;
}
.hcin-progress-step{
flex:0 0 92px;
width:92px;
min-width:0;
padding:4px 2px;
font-size:8.5px;
letter-spacing:.10em;
}
.hcps-dot{ width:18px;height:2px }
.hcin-progress-step.done .hcps-dot{ width:18px;height:2px }
.hcin-progress-step.active .hcps-dot{ width:26px;height:2px }
/* Footnote — bottom, centered, no dot */
.hcin-footnote{
top:auto !important;
bottom:18px;
left:18px; right:18px;
font-size:11.5px;
max-width:none;
text-align:center !important;
line-height:1.5;
display:flex !important;
align-items:center;
justify-content:center;
gap:0;
}
.hcin-footnote .dot{ display:none !important }
.hcin-footnote .fn-text{ display:inline }
/* Hide hero RAKE/shock-stat on mobile */
.hero-rake,
.hero-stat-below-h1,
.hero-stat-top-right,
.hero-stat-right-of-scene,
.hero-stat-bottom-band{ display:none }
/* Scroll hint on mobile — centered at the bottom to fill the empty space
under the centered hero scene. */
.hero-cinema .hero-scroll-hint{
display:flex !important;
flex-direction:column;
align-items:center;
gap:12px;
bottom:48px;
left:50% !important;
right:auto !important;
transform:translateX(-50%);
text-align:center;
}
.hero-cinema[data-active-phase]:not([data-active-phase="hero"]) .hero-scroll-hint{ display:none !important }
.header-inner{ padding-left:18px; padding-right:18px }
.nav{ display:none }
.burger{ display:inline-flex }
.section-h2{ font-size:clamp(26px,6.5vw,38px); line-height:1.05 }
.section-eyebrow{ font-size:10px }
}
/* Very small phones — adjust scene width only, keep H1 size from 880 query */
@media (max-width:480px){
.hcin-scene-wrap{
top:50% !important;
width:min(112vw, 480px) !important;
}
}
/* Scroll indicator */
.hero-scroll-hint{
position:absolute;bottom:14px;left:50%;
transform:translateX(-50%);
font-family:var(--font-mono);font-size:10.5px;
color:var(--text-dim);letter-spacing:.18em;
text-transform:uppercase;
display:flex;flex-direction:column;align-items:center;gap:6px;
animation:scroll-bob 2.4s ease-in-out infinite;
z-index:3;
pointer-events:none;
}
.hero-scroll-hint .line{
display:inline-block;width:1px;height:20px;
background:linear-gradient(to bottom,var(--accent),transparent);
}
@keyframes scroll-bob{
0%,100%{transform:translateX(-50%) translateY(0);opacity:.5}
50%{transform:translateX(-50%) translateY(4px);opacity:1}
}
@media (max-width:880px){
.hero-corner{display:none}
.hero-stage-scene{width:min(420px, 86vw)}
.hero-ribbon{grid-template-columns:1fr;gap:14px}
.hr-ticker{border:none;border-top:1px dashed rgba(255,255,255,.08);
border-bottom:1px dashed rgba(255,255,255,.08);padding:8px 0}
.hr-kpi-stack{text-align:left;flex-direction:row;gap:16px}
}
/* Gateway split */
.gateway{
display:grid;grid-template-columns:1fr 1fr;gap:14px;
margin-bottom:40px;
}
@media (max-width:640px){
.gateway{grid-template-columns:1fr}
}
.gw-card{
position:relative;
padding:24px 22px 22px;
border:1px solid var(--border);
border-radius:14px;
background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.01));
transition:border-color .2s ease, transform .25s ease, background .2s ease;
overflow:hidden;
}
.gw-card:hover{
transform:translateY(-2px);
border-color:var(--border-strong);
}
.gw-card.b2b:hover{border-color:rgba(224,176,85,.5)}
.gw-card.b2c:hover{border-color:rgba(0,184,212,.5)}
.gw-card::before{
content:"";position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(to right,transparent,var(--accent),transparent);
opacity:0;transition:opacity .25s;
}
.gw-card.b2c::before{background:linear-gradient(to right,transparent,var(--accent-2),transparent)}
.gw-card:hover::before{opacity:1}
.gw-tag{
font-family:var(--font-mono);font-size:10px;
letter-spacing:.14em;text-transform:uppercase;
color:var(--accent);
margin-bottom:12px;display:flex;align-items:center;gap:8px;
}
.gw-card.b2c .gw-tag{color:var(--accent-2)}
.gw-tag::before{
content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
background:currentColor;box-shadow:0 0 8px currentColor;
}
.gw-title{
font-size:18px;font-weight:500;
letter-spacing:-0.015em;
margin:0 0 8px;
}
.gw-desc{
font-size:13.5px;color:var(--text-mute);
line-height:1.5;margin:0 0 22px;
min-height:42px;
}
.gw-cta{
display:inline-flex;align-items:center;gap:8px;
font-size:13.5px;font-weight:500;
color:var(--text);
transition:gap .2s ease;
}
.gw-cta .arrow{
font-family:var(--font-mono);
transition:transform .2s ease;
}
.gw-card:hover .gw-cta{gap:12px}
.gw-card:hover .gw-cta .arrow{transform:translateX(2px)}
/* Trust pills */
.trust-strip{
display:flex;flex-wrap:wrap;gap:8px;
margin-top:8px;
}
.trust-pill{
display:inline-flex;align-items:center;gap:8px;
padding:7px 12px;border-radius:99px;
border:1px solid var(--border);
background:rgba(255,255,255,.02);
font-size:12px;color:var(--text-mute);
font-family:var(--font-mono);
letter-spacing:-0.005em;
}
.trust-pill .check{color:var(--accent-2);font-size:10px}
/* ─── Hero visual ─── */
.hero-viz{
position:relative;aspect-ratio:1/1.05;
width:100%;
}
.hero-viz svg{width:100%;height:100%;display:block}
/* Pixel scene — no frame, blends into page */
.hero-viz.pixel{
aspect-ratio:auto;
display:flex;flex-direction:column;
gap:24px;
align-self:stretch;
}
.pixel-scene-wrap{
width:100%;
aspect-ratio:240/200;
position:relative;
}
.pixel-scene{
display:block;width:100%;height:100%;
image-rendering:pixelated;
image-rendering:-moz-crisp-edges;
}
.pixel-scene text{
image-rendering:auto;
text-rendering:geometricPrecision;
font-feature-settings:"tnum";
}
/* Big main metric below scene */
.pixel-main-metric{
display:flex;flex-direction:column;
gap:10px;
padding-top:8px;
border-top:1px solid var(--hairline);
}
.pmm-headline{
display:flex;align-items:baseline;justify-content:space-between;
gap:16px;
font-family:var(--font-mono);
}
.pmm-val{
font-size:clamp(38px, 5vw, 58px);
font-weight:600;
color:var(--accent);
letter-spacing:-0.025em;
line-height:1;
font-variant-numeric:tabular-nums;
text-shadow:0 0 22px rgba(224,176,85,.18);
}
.pmm-delta{
font-size:13px;
color:var(--accent-2);
letter-spacing:.02em;
white-space:nowrap;
}
.pmm-lbl{
display:flex;justify-content:space-between;align-items:center;
font-family:var(--font-mono);
font-size:11px;
color:var(--text-dim);
letter-spacing:.14em;
text-transform:uppercase;
gap:16px;
}
.pmm-live{
display:inline-flex;align-items:center;gap:8px;
color:var(--accent-2);
white-space:nowrap;
font-style:normal;
}
.pmm-live > i{
display:inline-block;
width:9px;height:9px;
background:var(--accent-2);
flex-shrink:0;
animation:pix-blink .6s steps(1) infinite;
}
@keyframes pix-blink{ 0%,49%{opacity:1} 50%,100%{opacity:.25} }
/* Secondary metrics row */
.pmm-secondary{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
padding-top:14px;
margin-top:4px;
border-top:1px dashed rgba(255,255,255,.08);
}
.pms-cell{display:flex;flex-direction:column;gap:3px}
.pms-val{
font-family:var(--font-mono);
font-size:20px;
font-weight:600;
color:var(--text);
font-variant-numeric:tabular-nums;
letter-spacing:-0.01em;
line-height:1.05;
}
.pms-unit{
font-size:13px;
color:var(--text-mute);
font-weight:400;
margin-left:1px;
}
.pms-lbl{
font-family:var(--font-mono);
font-size:10.5px;
color:var(--text-dim);
letter-spacing:.12em;
text-transform:uppercase;
}
.pms-delta{color:var(--accent-2);margin-left:4px;font-size:9.5px;letter-spacing:.04em}
/* Live activity log — between scene and metrics */
.pixel-log{
display:flex;flex-direction:column;
font-family:var(--font-mono);
padding:14px 0;
border-top:1px dashed rgba(255,255,255,.08);
border-bottom:1px dashed rgba(255,255,255,.08);
gap:10px;
}
.plog-head{
display:flex;justify-content:space-between;align-items:center;
font-size:10px;color:var(--text-dim);
letter-spacing:.18em;text-transform:uppercase;
}
.plog-live{
display:inline-flex;align-items:center;gap:8px;
color:var(--accent-2);
white-space:nowrap;
font-style:normal;
}
.plog-live > i{
display:inline-block;
width:7px;height:7px;
background:var(--accent-2);
flex-shrink:0;
animation:pix-blink .6s steps(1) infinite;
}
.plog-rows{
display:flex;flex-direction:column;
gap:2px;
font-size:11.5px;
line-height:1.35;
}
.plog-row{
display:grid;
grid-template-columns:auto auto 1fr;
gap:10px;
align-items:baseline;
transition:opacity .35s ease;
color:var(--text-mute);
}
.plog-t{color:var(--text-dim);font-variant-numeric:tabular-nums}
.plog-arrow{color:var(--text-dim)}
.plog-row.k-rake .plog-msg{color:var(--accent)}
.plog-row.k-join .plog-msg{color:var(--text)}
.plog-row.k-muted .plog-msg{color:var(--text-dim);font-style:italic}
.metrics-panel{
position:absolute;
right:-12px;bottom:-12px;
width:min(280px,72%);
background:rgba(22,27,34,.85);
border:1px solid var(--border-strong);
border-radius:12px;
padding:16px 18px;
-webkit-backdrop-filter:blur(20px);
backdrop-filter:blur(20px);
box-shadow:0 20px 40px -20px rgba(0,0,0,.7);
}
.metrics-head{
display:flex;align-items:center;justify-content:space-between;
font-family:var(--font-mono);font-size:10px;
color:var(--text-dim);
letter-spacing:.14em;text-transform:uppercase;
margin-bottom:14px;
}
.metrics-head .live{
display:inline-flex;align-items:center;gap:6px;color:var(--accent-2);
}
.metrics-head .live::before{
content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-2);
animation:live-pulse 1.4s ease-in-out infinite;
}
@keyframes live-pulse{
0%,100%{opacity:1;box-shadow:0 0 0 0 var(--accent-2)}
50%{opacity:.7;box-shadow:0 0 0 6px transparent}
}
.metric-row{
display:flex;justify-content:space-between;align-items:baseline;
padding:7px 0;
border-bottom:1px solid var(--hairline);
}
.metric-row:last-child{border-bottom:0}
.metric-row .lbl{font-size:11.5px;color:var(--text-mute);font-family:var(--font-mono)}
.metric-row .val{
font-family:var(--font-mono);font-size:14px;
color:var(--text);font-variant-numeric:tabular-nums;
}
.metric-row .delta{font-size:10.5px;color:var(--accent-2);margin-left:6px}
.metric-row .delta.neg{color:#ff6b6b}
/* Liquidity mesh */
.mesh-node{
fill:var(--text);
transition:fill .2s;
}
.mesh-node.accent{fill:var(--accent);filter:drop-shadow(0 0 6px var(--accent))}
.mesh-node.live{fill:var(--accent-2);filter:drop-shadow(0 0 4px var(--accent-2))}
.mesh-edge{stroke:var(--text);stroke-width:.6;opacity:.12}
.mesh-edge.accent{stroke:var(--accent);opacity:.4;stroke-width:.8}
/* ─── Problems section (scroll fly-in) ─── */
.problems{
position:relative;
padding:120px 0 80px;
}
.section-head{
display:flex;justify-content:space-between;align-items:flex-end;
margin-bottom:64px;gap:32px;flex-wrap:wrap;
}
.section-eyebrow{
font-family:var(--font-mono);font-size:11px;
letter-spacing:.16em;text-transform:uppercase;
color:var(--text-dim);
}
.section-eyebrow .n{color:var(--accent)}
.section-h2{
font-size:clamp(32px,4.4vw,56px);
line-height:1.02;
font-weight:500;
letter-spacing:-0.03em;
max-width:720px;margin:12px 0 0;
}
.section-h2 em{font-style:normal;color:var(--text-mute);font-weight:400}
.problem-stack{
display:flex;flex-direction:column;
gap:160px;
margin-top:32px;
}
.problem-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center;
min-height:60vh;
}
.problem-row.reverse{direction:rtl}
.problem-row.reverse > *{direction:ltr}
@media (max-width:1080px){
.problem-row{grid-template-columns:1fr;gap:32px;min-height:auto}
.problem-stack{gap:96px}
}
.problem-copy{position:relative}
.problem-num{
font-family:var(--font-mono);font-size:11px;
color:var(--text-dim);letter-spacing:.16em;
margin-bottom:14px;
}
.problem-num::before{
content:"";display:inline-block;width:24px;height:1px;
background:var(--text-dim);margin-right:10px;vertical-align:middle;
}
.problem-title{
font-size:clamp(28px,3.4vw,40px);
line-height:1.05;
font-weight:500;letter-spacing:-0.025em;
margin:0 0 18px;
}
.problem-title .accent{color:var(--accent)}
.problem-desc{
font-size:16px;color:var(--text-mute);
line-height:1.6;margin:0 0 22px;max-width:480px;
}
.problem-stat{
display:inline-flex;align-items:baseline;gap:10px;
font-family:var(--font-mono);font-size:13px;color:var(--text-mute);
padding:8px 12px;border:1px solid var(--border);border-radius:8px;
background:rgba(255,255,255,.02);
}
.problem-stat strong{
color:var(--text);font-size:18px;font-weight:500;
letter-spacing:-0.01em;
}
/* visual panel — the "flies in on you" element */
.problem-viz-wrap{
position:relative;
perspective:1400px;
/* scroll-driven via JS */
}
.problem-viz{
position:relative;
aspect-ratio:1/1;
border-radius:18px;
background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.005));
border:1px solid var(--border);
overflow:hidden;
transform:translateY(40px) scale(.92);
opacity:0;
transition:none;
will-change:transform,opacity;
}
.problem-viz .corner-tag{
position:absolute;top:14px;left:14px;
font-family:var(--font-mono);font-size:10px;
color:var(--text-dim);letter-spacing:.12em;text-transform:uppercase;
z-index:2;
}
.problem-viz .corner-tag-r{
position:absolute;top:14px;right:14px;
font-family:var(--font-mono);font-size:10px;
color:var(--accent);letter-spacing:.12em;text-transform:uppercase;
z-index:2;
}
.problem-viz svg{position:absolute;inset:0;width:100%;height:100%}
/* "View all solutions →" link below the services grid */
.svc-all{
display:flex;justify-content:center;
margin-top:48px;
}
.svc-all-link{
display:inline-flex;align-items:center;gap:6px;
padding:10px 18px;border-radius:8px;
background:var(--text);color:#0a0a0a;
font-size:13.5px;font-weight:500;
white-space:nowrap;
transition:transform .15s ease, background .15s ease, filter .15s ease;
}
.svc-all-link:hover{
transform:translateY(-1px);
filter:brightness(1.05);
}
.svc-all-link .arrow{font-family:var(--font-mono);font-size:11px}
/* ─── Trust section ─── */
.trust{padding:60px 0 120px}
.quote{
position:relative;
padding:28px 30px 26px;
border:1px solid var(--border);
border-radius:14px;
background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.005));
}
.quote-text{
display:block;
font-size:17px;line-height:1.55;
letter-spacing:-0.01em;
margin:0 0 14px;
color:var(--text);
font-style:normal;
quotes:none;
}
.quote-text::before,
.quote-text::after{ content:none }
/* Decorative styling of the REAL Unicode quote chars (U+201C / U+201D)
so Google parses the text as a genuine quote AND the user sees a big
golden ornament. No duplication — same character does both jobs. */
.qm{
font-family:Georgia,"Times New Roman",serif;
color:var(--accent);
font-weight:400;
display:inline-block;
line-height:0;
}
.qm-open{
font-size:54px;
vertical-align:-24px;
margin-right:4px;
}
.qm-close{
font-size:54px;
vertical-align:-24px;
margin-left:2px;
}
.quote-by{
font-family:var(--font-mono);font-size:11.5px;
color:var(--text-dim);
letter-spacing:.04em;
}
.kpi:last-child{border-bottom:0}
/* ─── Final CTA ─── */
.cta{
padding:80px 0 140px;
}
/* (legacy .btn rules removed — unified 8-bit button defined once below) */
/* ─── Footer ─── */
.footer{
border-top:1px solid var(--border);
padding:48px 0 32px;
}
.foot-top{
display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;
margin-bottom:40px;
}
@media (max-width:820px){.foot-top{grid-template-columns:1fr 1fr;gap:32px}}
.foot-col h4{
font-family:var(--font-mono);font-size:10px;
letter-spacing:.16em;text-transform:uppercase;
color:var(--text-dim);margin:0 0 16px;font-weight:500;
}
.foot-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.foot-col a{font-size:13.5px;color:var(--text-mute);transition:color .15s}
.foot-col a:hover{color:var(--text)}
.foot-phone{
display:inline-block;
margin-top:14px;
font-size:13.5px;
color:var(--text-mute)!important;
transition:color .15s;
}
.foot-phone:hover{ color:var(--text)!important }
.foot-contact{
display:flex;flex-direction:column;gap:6px;
margin-top:18px;
}
.foot-contact-line{
font-size:13.5px;
color:var(--text-mute)!important;
transition:color .15s;
}
.foot-contact-line:hover{ color:var(--text)!important }
.foot-contact-note{
font-size:11.5px;
color:var(--text-dim);
line-height:1.5;
max-width:340px;
margin-top:4px;
}
.foot-disclosure{
font-size:12.5px;color:var(--text-mute);
max-width:520px;margin-top:16px;line-height:1.55;
}
.foot-bottom{
display:flex;justify-content:space-between;align-items:center;
padding-top:24px;border-top:1px solid var(--hairline);
font-family:var(--font-mono);font-size:11.5px;
color:var(--text-dim);letter-spacing:.04em;
flex-wrap:wrap;gap:12px;
}
/* ─── Section reveal ─── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1;transform:none}
/* ═══════════════════════════════════════════════════════════════════════
ARTICLE / SOLUTION / INSIGHT PAGE TEMPLATE
Used by /solutions/*, /insights/*, /reports/*, /about/, /contact/, etc.
Editorial layout — ~720px reading column, generous spacing.
═══════════════════════════════════════════════════════════════════════ */
/* Body lock: article pages don't have the cinema scroll-snap */
body[data-page="article"]{ overflow-x: hidden }
/* Main wrapper — sits below sticky header */
.art-main{
padding-top: 64px;
min-height: 100vh;
}
/* Article container */
.art-wrap{
max-width: 1280px;
margin: 0 auto;
padding: 56px 32px 0;
}
@media (max-width: 720px){
.art-wrap{ padding: 36px 20px 0 }
}
/* ─── Breadcrumb ─── */
.art-crumb{
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--text-dim);
display: flex; align-items: center; gap: 8px;
margin: 0 auto 48px;
max-width: 720px;
}
.art-crumb-link{
color: var(--text-mute);
transition: color .15s ease;
}
.art-crumb-link:hover{ color: var(--accent) }
.art-crumb-current{ color: var(--text) }
.art-crumb-sep{ opacity: .4 }
/* ─── Article head (eyebrow + H1 + lede + meta) ─── */
.art-head{
max-width: 820px;
margin: 0 auto 56px;
text-align: left;
}
.art-eyebrow{
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--accent);
display: inline-flex; align-items: center; gap: 14px;
margin-bottom: 28px;
}
.art-eyebrow::before{
content: "";
display: inline-block;
width: 36px; height: 1px;
background: var(--accent);
}
.art-eyebrow-link{
color: inherit;
border-bottom: 1px solid transparent;
transition: border-color .15s ease, opacity .15s ease;
}
.art-eyebrow-link:hover{ border-bottom-color: var(--accent) }
/* Current page marker — opaque, but no hover underline (it links to self) */
.art-eyebrow-current{
opacity: .7;
}
.art-eyebrow-current:hover{ border-bottom-color: transparent; opacity: 1 }
.art-h1{
font-size: clamp(34px, 4.6vw, 64px);
line-height: 1.02;
font-weight: 600;
letter-spacing: -0.035em;
margin: 0 0 28px;
text-wrap: balance;
}
.art-h1 em{
font-style: normal;
color: var(--text-mute);
font-weight: 400;
}
.art-h1 .h1-mark{ color: var(--accent) }
.art-lede{
font-size: clamp(16px, 1.4vw, 20px);
line-height: 1.55;
color: var(--text-mute);
margin: 0 0 36px;
max-width: 660px;
text-wrap: pretty;
}
.art-meta{
display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: .04em;
color: var(--text-dim);
margin-top: -16px;
}
.art-meta-byline{ color: var(--text-mute) }
.art-meta-sep{ opacity: .4 }
/* ─── Hero figure ─── */
.art-hero{
max-width: 1100px;
margin: 0 auto 80px;
padding: 0;
}
.art-hero-canvas{
position: relative;
background: radial-gradient(ellipse at center,
rgba(224,176,85,.04) 0%,
rgba(15,20,25,.0) 70%),
#161B22;
border: 2px solid #2A3140;
border-radius: 0;
box-shadow:
inset 1px 1px 0 0 #353C4A,
inset -1px -1px 0 0 #0A0E15,
4px 4px 0 0 rgba(0,0,0,0.35);
image-rendering: pixelated;
padding: 36px 24px;
overflow: hidden;
}
.art-hero-canvas::before{
content: "";
position: absolute; inset: 0;
background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
background-size: 24px 24px;
pointer-events: none;
opacity: .5;
}
.art-hero svg{
display: block;
width: 100%;
height: auto;
max-height: 460px;
position: relative;
z-index: 1;
}
.art-hero figcaption{
margin-top: 18px;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: .04em;
color: var(--text-dim);
text-align: center;
padding: 0 16px;
}
/* ─── Body sections ─── */
.art-section{
max-width: 720px;
margin: 0 auto 80px;
}
.art-kicker{
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 16px;
}
.art-h2{
font-size: clamp(26px, 3vw, 40px);
line-height: 1.08;
font-weight: 600;
letter-spacing: -0.025em;
margin: 0 0 28px;
text-wrap: balance;
}
.art-h2 em{
font-style: normal;
color: var(--text-mute);
font-weight: 400;
}
.art-section p{
font-size: 17px;
line-height: 1.65;
color: var(--text);
margin: 0 0 22px;
text-wrap: pretty;
}
.art-section p:last-child{ margin-bottom: 0 }
.art-section p strong{
color: var(--text);
font-weight: 600;
background: linear-gradient(180deg, transparent 70%, rgba(224,176,85,.15) 70%);
padding: 0 2px;
}
.art-section a{
color: var(--accent-2);
border-bottom: 1px solid rgba(0,184,212,.4);
transition: border-color .15s ease, color .15s ease;
}
.art-section a:hover{
color: var(--accent);
border-bottom-color: var(--accent);
}
.art-fineprint{
font-size: 14px !important;
color: var(--text-mute) !important;
font-style: italic;
}
/* ─── Pull-quote callout ─── */
.art-callout{
margin: 36px 0;
padding: 24px 28px;
border-left: 2px solid var(--accent);
background: linear-gradient(90deg, rgba(224,176,85,.05), transparent);
border-radius: 0;
}
.art-callout-body{
font-size: 18px;
line-height: 1.5;
color: var(--text);
font-style: italic;
letter-spacing: -.005em;
margin-bottom: 12px;
}
.art-callout-by{
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: .08em;
color: var(--text-dim);
}
/* ─── Numbered steps ─── */
.art-steps{
list-style: none;
padding: 0;
margin: 36px 0;
display: grid;
gap: 14px;
}
.art-step{
display: grid;
grid-template-columns: 80px 1fr;
gap: 24px;
padding: 24px 26px;
border: 2px solid #2A3140;
background: #161B22;
box-shadow:
inset 1px 1px 0 0 #353C4A,
inset -1px -1px 0 0 #0A0E15,
4px 4px 0 0 rgba(0,0,0,0.35);
image-rendering: pixelated;
align-items: start;
transition: border-color .25s ease, box-shadow .25s ease;
}
.art-step:hover{
border-color: rgba(224,176,85,0.55);
box-shadow:
inset 1px 1px 0 0 rgba(255,232,184,0.35),
inset -1px -1px 0 0 #0A0E15,
4px 4px 0 0 rgba(224,176,85,0.14);
}
.art-step-n{
font-family: var(--font-mono);
font-size: 28px;
font-weight: 600;
color: var(--accent);
letter-spacing: -.02em;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.art-step-h{
font-size: 19px;
font-weight: 600;
letter-spacing: -.015em;
margin: 0 0 8px;
color: var(--text);
}
.art-step-desc{
font-size: 15.5px !important;
line-height: 1.6;
color: var(--text-mute) !important;
margin: 0 !important;
}
@media (max-width: 600px){
.art-step{ grid-template-columns: 1fr; gap: 12px; padding: 22px 20px }
.art-step-n{ font-size: 22px }
}
/* ─── "What we don't do" boundary list ─── */
.art-do-not{
list-style: none;
padding: 0;
margin: 28px 0;
display: flex; flex-direction: column;
gap: 18px;
}
.art-do-not li{
position: relative;
padding-left: 28px;
font-size: 16px;
line-height: 1.6;
color: var(--text-mute);
}
.art-do-not li::before{
content: "";
position: absolute; left: 2px; top: 8px;
width: 7px; height: 7px;
background: var(--accent-2);
image-rendering: pixelated;
}
.art-do-not li strong{
color: var(--text);
font-weight: 600;
}
/* ─── In-body H3 subheading ─── */
.art-subhead{
font-size: 19px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.01em;
margin: 30px 0 6px;
}
/* ─── In-body bulleted list (art-list) ─── */
.art-list{
list-style: none;
padding: 0;
margin: 22px 0;
display: flex; flex-direction: column;
gap: 14px;
}
.art-list li{
position: relative;
padding-left: 26px;
font-size: 16px;
line-height: 1.65;
color: var(--text-mute);
}
.art-list li::before{
content: "";
position: absolute; left: 2px; top: 9px;
width: 7px; height: 7px;
background: var(--accent);
image-rendering: pixelated;
}
.art-list li strong{ color: var(--text); font-weight: 600; }
/* ─── Inline stat row (anonymized operational data) ─── */
.art-stat-row{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin: 32px 0;
}
@media (max-width: 720px){
.art-stat-row{ grid-template-columns: 1fr; gap: 16px; }
}
.art-stat{
border: 1px solid var(--border);
border-radius: 12px;
padding: 22px 20px;
background: linear-gradient(180deg, rgba(224,176,85,.05), transparent 80%);
}
.art-stat-num{
display: block;
font-family: var(--font-mono);
font-size: 34px;
font-weight: 600;
color: var(--accent);
letter-spacing: -0.02em;
margin-bottom: 10px;
}
.art-stat-lbl{
display: block;
font-size: 13.5px;
line-height: 1.5;
color: var(--text-mute);
}
/* ─── FAQ-style Q&A ─── */
.art-qa{
margin-top: 36px;
display: flex; flex-direction: column;
gap: 10px;
}
.art-qa-row{
border: 2px solid #2A3140;
background: #161B22;
box-shadow:
inset 1px 1px 0 0 #353C4A,
inset -1px -1px 0 0 #0A0E15,
4px 4px 0 0 rgba(0,0,0,0.35);
image-rendering: pixelated;
transition: border-color .25s ease, box-shadow .25s ease;
}
.art-qa-row:hover,
.art-qa-row[open]{
border-color: rgba(224,176,85,0.55);
box-shadow:
inset 1px 1px 0 0 rgba(255,232,184,0.35),
inset -1px -1px 0 0 #0A0E15,
4px 4px 0 0 rgba(224,176,85,0.14);
}
.art-qa-q{
list-style: none;
cursor: pointer;
padding: 22px 28px;
font-size: 17px;
font-weight: 500;
letter-spacing: -.01em;
color: var(--text);
display: flex; align-items: flex-start; gap: 18px;
transition: color .15s ease;
}
.art-qa-q::-webkit-details-marker{ display: none }
.art-qa-q:hover{ color: var(--accent) }
.art-qa-mark{
font-family: var(--font-mono);
font-size: 18px;
font-weight: 700;
color: var(--accent);
width: 14px;
transition: transform .25s ease;
flex-shrink: 0;
line-height: 1;
margin-top: 4px;
}
.art-qa-row[open] .art-qa-mark{ transform: rotate(45deg) }
.art-qa-a{
padding: 0 28px 24px 60px;
font-size: 15.5px;
line-height: 1.65;
color: var(--text-mute);
}
@media (max-width: 600px){
.art-qa-q{ padding: 18px 20px; font-size: 15.5px; gap: 14px }
.art-qa-a{ padding: 0 20px 20px 48px; font-size: 14.5px }
}
/* ─── Tags / chip list ─── */
.art-tags{
list-style: none;
padding: 0;
margin: 28px 0;
display: flex; flex-wrap: wrap; gap: 8px;
}
.art-tag{
display: inline-flex; align-items: center;
padding: 8px 14px;
border: 1px solid var(--border-strong);
border-radius: 0;
background: #0F1419;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: .04em;
color: var(--text);
}
/* ─── Article CTA card ─── */
.art-cta{
max-width: 1100px;
margin: 100px auto 60px;
padding: 0 0 0;
}
.art-cta-card{
position: relative;
padding: 56px clamp(28px, 4vw, 64px);
border: 2px solid var(--accent);
border-radius: 0;
background: radial-gradient(ellipse at top right,
rgba(224,176,85,.10) 0%,
rgba(15,20,25,.0) 60%),
#161B22;
box-shadow:
inset 1px 1px 0 0 rgba(255,232,184,0.5),
inset -1px -1px 0 0 #8E6A2A,
4px 4px 0 0 rgba(224,176,85,0.18);
image-rendering: pixelated;
overflow: hidden;
}
.art-cta-card::before{
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: var(--accent);
}
.art-cta-h{
font-size: clamp(28px, 3vw, 42px);
line-height: 1.05;
font-weight: 600;
letter-spacing: -.025em;
margin: 0 0 18px;
max-width: 600px;
}
.art-cta-sub{
font-size: 16px;
line-height: 1.6;
color: var(--text-mute);
margin: 0 0 32px;
max-width: 540px;
}
.art-cta-buttons{
display: flex; flex-wrap: wrap; gap: 14px;
}
/* ─── Related articles grid ─── */
.art-related{
max-width: 1100px;
margin: 60px auto 80px;
padding: 60px 0 0;
border-top: 1px solid var(--border);
}
.art-related-head{ margin-bottom: 32px }
.art-related-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
@media (max-width: 880px){
.art-related-grid{ grid-template-columns: 1fr }
}
.art-related-card{
display: flex; flex-direction: column;
padding: 26px 24px 24px;
border: 2px solid #2A3140;
border-radius: 0;
background: #161B22;
box-shadow:
inset 1px 1px 0 0 #353C4A,
inset -1px -1px 0 0 #0A0E15,
4px 4px 0 0 rgba(0,0,0,0.35);
image-rendering: pixelated;
transition: border-color .25s ease, box-shadow .25s ease;
text-decoration: none;
color: inherit;
}
.art-related-card:hover{
border-color: rgba(224,176,85,0.55);
box-shadow:
inset 1px 1px 0 0 rgba(255,232,184,0.35),
inset -1px -1px 0 0 #0A0E15,
4px 4px 0 0 rgba(224,176,85,0.14);
}
.art-related-kicker{
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 14px;
}
.art-related-h{
font-size: 18px;
font-weight: 500;
letter-spacing: -.015em;
line-height: 1.25;
margin: 0 0 12px;
}
.art-related-desc{
font-size: 13.5px;
line-height: 1.5;
color: var(--text-mute);
margin: 0 0 22px;
flex: 1;
}
.art-related-arrow{
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: .04em;
color: var(--text);
margin-top: auto;
}
.art-related-card:hover .art-related-arrow{ color: var(--accent) }
/* ─── Generic button (used in article CTA) ─── */
/* ═══════════════════════════════════════════════════════════════════════
Unified 8-bit button — square corners, hard offset shadow, pixel press.
Used everywhere: .btn (+ .btn-primary / .btn-secondary), and the look is
shared by .nav-cta, .hero-cta-primary, .svc-all-link via the same rules.
═══════════════════════════════════════════════════════════════════════ */
.btn,
.nav-cta,
.mnav-cta,
.hero-cta-primary,
.svc-all-link{
display: inline-flex; align-items: center; gap: 10px;
padding: 13px 22px;
border-radius: 0;
font-family: var(--font-mono);
font-size: 13px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
text-decoration: none;
border: 2px solid var(--accent);
background: var(--accent);
color: #0a0a0a;
image-rendering: pixelated;
box-shadow: 3px 3px 0 0 #8E6A2A;
transition: transform .1s steps(2), box-shadow .1s steps(2),
background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover,
.nav-cta:hover,
.mnav-cta:hover,
.hero-cta-primary:hover,
.svc-all-link:hover{
transform: translate(-1px, -1px);
box-shadow: 5px 5px 0 0 #8E6A2A;
}
.btn:active,
.nav-cta:active,
.mnav-cta:active,
.hero-cta-primary:active,
.svc-all-link:active{
transform: translate(2px, 2px);
box-shadow: 1px 1px 0 0 #8E6A2A;
}
.btn .arrow,
.nav-cta .arrow,
.mnav-cta .arrow,
.hero-cta-primary .arrow,
.svc-all-link .arrow{ font-family: var(--font-mono); font-size: 12px }
/* Header CTA — compact override (the shared block is sized for page CTAs) */
.nav-cta{
padding: 8px 14px;
font-size: 11px;
letter-spacing: .08em;
box-shadow: 2px 2px 0 0 #8E6A2A;
}
.nav-cta:hover{ transform: translate(-1px,-1px); box-shadow: 3px 3px 0 0 #8E6A2A }
.nav-cta:active{ transform: translate(1px,1px); box-shadow: 1px 1px 0 0 #8E6A2A }
.nav-cta .arrow{ font-size: 10px }
/* Secondary / ghost variant — dark fill, gold outline */
.btn-secondary,
.hero-cta-secondary{
background: #161B22;
color: var(--text);
border: 2px solid #2A3140;
box-shadow: 3px 3px 0 0 #0A0E15;
}
.btn-secondary:hover,
.hero-cta-secondary:hover{
border-color: var(--accent);
color: var(--accent);
transform: translate(-1px, -1px);
box-shadow: 5px 5px 0 0 #0A0E15;
}
.btn-secondary:active,
.hero-cta-secondary:active{
transform: translate(2px, 2px);
box-shadow: 1px 1px 0 0 #0A0E15;
}
/* Primary explicit (gold) — already the base; keep override clean */
.btn-primary{
background: var(--accent);
color: #0a0a0a;
border-color: var(--accent);
}
/* ─── Article-page footer override (sections.jsx's Footer styles already exist) ─── */
/* Hide preloader/grain conflicts on article pages */
body[data-page="article"] .preloader-simple{ display: none }
body[data-page="article"] .site-content{ filter: none; opacity: 1 }
/* ═══════════════════════════════════════════════════════════════════════
SOLUTIONS HUB PAGE — large service cards + comparison table
═══════════════════════════════════════════════════════════════════════ */
.sol-grid{
max-width: 1100px;
margin: 0 auto 80px;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
@media (max-width: 880px){
.sol-grid{ grid-template-columns: 1fr; gap: 14px }
}
.sol-card{
position: relative;
display: flex; flex-direction: column;
padding: 32px 30px 28px;
border: 2px solid #2A3140;
border-radius: 0;
background: #161B22;
box-shadow:
inset 1px 1px 0 0 #353C4A,
inset -1px -1px 0 0 #0A0E15,
4px 4px 0 0 rgba(0,0,0,0.35);
image-rendering: pixelated;
text-decoration: none;
color: inherit;
transition: border-color .25s ease, box-shadow .25s ease;
overflow: hidden;
}
.sol-card:hover{
border-color: rgba(224,176,85,0.55);
box-shadow:
inset 1px 1px 0 0 rgba(255,232,184,0.35),
inset -1px -1px 0 0 #0A0E15,
4px 4px 0 0 rgba(224,176,85,0.14);
}
.sol-card-flag{
border-color: #2A3140;
background: #161B22;
}
.sol-card-flag::before{
content: none;
}
.sol-card-tag{
position: absolute; top: 18px; right: 22px;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
letter-spacing: .18em;
color: var(--accent);
padding: 4px 10px;
border: 1px solid rgba(224,176,85,.4);
border-radius: 4px;
}
.sol-card-soon{
opacity: .82;
cursor: default;
}
.sol-card-head{
display: flex; align-items: flex-start; gap: 14px;
margin-bottom: 16px;
padding-right: 96px;
}
.sol-card-n{
font-family: var(--font-mono);
font-size: 14px;
font-weight: 600;
color: var(--accent);
letter-spacing: -.005em;
line-height: 1.55;
flex-shrink: 0;
}
.sol-card-title{
font-size: 24px;
font-weight: 600;
letter-spacing: -.022em;
line-height: 1.15;
margin: 0;
}
.sol-card-short{
font-size: 16px !important;
color: var(--text) !important;
line-height: 1.45 !important;
margin: 0 0 14px !important;
text-wrap: balance;
}
.sol-card-body{
font-size: 14.5px !important;
line-height: 1.6 !important;
color: var(--text-mute) !important;
margin: 0 0 18px !important;
}
.sol-card-bullets{
list-style: none;
padding: 0;
margin: 0 0 24px;
display: flex; flex-direction: column;
gap: 8px;
}
.sol-card-bullets li{
position: relative;
padding-left: 22px;
font-size: 13.5px;
line-height: 1.5;
color: var(--text-mute);
}
.sol-card-bullets li::before{
content: "";
position: absolute; left: 2px; top: 7px;
width: 6px; height: 6px;
background: var(--accent);
image-rendering: pixelated;
}
.sol-card-foot{
display: flex; align-items: flex-end; justify-content: space-between;
margin-top: auto;
padding-top: 18px;
border-top: 1px dashed rgba(255,255,255,.07);
gap: 20px;
}
.sol-card-foot-cta-only{ justify-content: flex-end; }
.sol-card-metric{
display: flex; flex-direction: column;
gap: 2px;
flex: 1;
}
.sol-card-metric-v{
font-family: var(--font-mono);
font-size: 24px;
font-weight: 700;
color: var(--text);
letter-spacing: -.015em;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.sol-card-flag .sol-card-metric-v{ color: var(--accent) }
.sol-card-metric-l{
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--text-dim);
letter-spacing: .12em;
text-transform: uppercase;
text-wrap: pretty;
}
.sol-card-cta{
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: .04em;
color: var(--text);
white-space: nowrap;
transition: gap .2s ease;
}
a.sol-card:hover .sol-card-cta{ gap: 12px; color: var(--accent) }
.sol-card-soon .sol-card-cta{ color: var(--text-dim) }
.sol-card-cta .arrow{ font-family: var(--font-mono) }
/* ─── Comparison table ─── */
.sol-comparison{
margin: 36px 0 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.sol-table{
width: 100%;
border-collapse: collapse;
font-family: var(--font-mono);
font-size: 13px;
min-width: 560px;
}
.sol-table th, .sol-table td{
padding: 12px 14px;
text-align: left;
border-bottom: 1px solid var(--border);
vertical-align: middle;
}
.sol-table thead th{
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--accent);
font-weight: 600;
text-align: center;
}
.sol-table thead th:first-child{ text-align: left }
.sol-table tbody th{
font-weight: 500;
color: var(--text);
letter-spacing: -.005em;
text-transform: none;
font-size: 13.5px;
}
.sol-table tbody td{
text-align: center;
color: var(--text-mute);
letter-spacing: -.005em;
}
.sol-table td.yes{ color: var(--accent); font-weight: 600 }
.sol-table td.no{ color: var(--text-dim) }
.sol-table td.opt{ color: var(--text); font-style: italic; font-size: 12px }
.sol-table tbody tr:last-child th,
.sol-table tbody tr:last-child td{ border-bottom: 0 }
.sol-table tbody tr:hover td,
.sol-table tbody tr:hover th{ background: rgba(255,255,255,.02) }
.rl-link a{
color:var(--accent);text-decoration:none;
border-bottom:1px solid rgba(224,176,85,.4);
padding-bottom:1px;
}
.rl-link a:hover{ border-bottom-color: var(--accent) }
/* ── Text selection: enable globally so copying for review works everywhere ── */
*, *::before, *::after {
-webkit-user-select: text;
user-select: text;
}
/* Cinema hero text-blocks have pointer-events:none for scroll passthrough on
the inactive ones. The ACTIVE block must allow selection. Each text node
element gets pointer-events:auto explicitly so highlight/copy works while
the rest of the overlay still passes scroll through to the underlying section. */
.hcin-text-block.active,
.hcin-text-block.active .hcin-eyebrow,
.hcin-text-block.active .hcin-h1,
.hcin-text-block.active .hcin-sub,
.hcin-metrics-set.active,
.hcin-metrics-set.active .hcin-metric,
.hcin-metrics-set.active .lead,
.hcin-metrics-set.active strong,
.hero-rake, .hero-rake *,
.hero-stat, .hero-stat *,
.hcin-comparison, .hcin-comparison *,
.hcin-progress-step {
pointer-events: auto;
}
/* SVG nodes inside cinematic / pixel scenes — un-block selection. */
.hcin-overlay text,
.pixel-scene text,
.hcin-stage text,
.hero-cinema text,
svg text { -webkit-user-select: text; user-select: text; pointer-events: auto }
/* ═══════════════════════════════════════════════════════════════════════
Section system — unified spacing, eyebrow, headline, sub-paragraph
Used by HowWeWork, WhoWeServe, Reach, Trust, ResearchLead.
═══════════════════════════════════════════════════════════════════════ */
.section-sub{
font-family: var(--font-sans);
font-size: 15.5px;
line-height: 1.6;
color: var(--text-mute);
margin: 18px 0 0;
max-width: 620px;
text-wrap: pretty;
}
/* Section heads keep their .section-eyebrow + .section-h2 from earlier;
.section-sub adds an optional descriptive line below H2. */
/* ═══════════════════════════════════════════════════════════════════════
PIXEL WINDOW — universal 8-bit windowed panel.
Used by Solutions cards, Reach stat cards + coverage panels,
Operator voices quote cards. Two variants: default (dark) and accent (gold).
═══════════════════════════════════════════════════════════════════════ */
.px-window{
position: relative;
background: #161B22;
border: 2px solid #2A3140;
border-radius: 0;
/* 3D-ish depth via inset highlight + offset shadow */
box-shadow:
inset 1px 1px 0 0 #353C4A,
inset -1px -1px 0 0 #0A0E15,
4px 4px 0 0 rgba(0,0,0,0.35);
/* image-rendering on the whole window for hard pixel edges on bg/borders */
image-rendering: pixelated;
display: flex;
flex-direction: column;
overflow: visible;
transition: border-color .25s ease, box-shadow .25s ease;
}
/* Hover — non-accent windows warm toward the gold accent (the featured
LIQUIDITY look), smoothly. Accent windows already gold, so skip them. */
.px-window:not(.px-window-accent):hover{
border-color: rgba(224,176,85,0.55);
box-shadow:
inset 1px 1px 0 0 rgba(255,232,184,0.35),
inset -1px -1px 0 0 #0A0E15,
4px 4px 0 0 rgba(224,176,85,0.14);
}
.px-window-accent{
border-color: var(--accent);
box-shadow:
inset 1px 1px 0 0 rgba(255,232,184,0.6),
inset -1px -1px 0 0 #8E6A2A,
4px 4px 0 0 rgba(224,176,85,0.18);
}
.px-window-titlebar{
display: flex;
align-items: center;
gap: 12px;
padding: 8px 14px;
background: linear-gradient(180deg, #2A3140 0%, #1F2530 100%);
border-bottom: 2px solid #0A0E15;
/* Stable row height — keeps dots aligned with title text precisely */
min-height: 24px;
line-height: 1;
transition: background .25s ease, border-color .25s ease;
}
.px-window-accent .px-window-titlebar{
background: linear-gradient(180deg, #F2C475 0%, var(--accent) 100%);
border-bottom-color: #8E6A2A;
}
/* Hover — non-accent windows' title bar warms to gold (matches the LIQUIDITY
featured look). Title text + dots flip to dark for contrast. */
.px-window:not(.px-window-accent):hover .px-window-titlebar{
background: linear-gradient(180deg, #F2C475 0%, var(--accent) 100%);
border-bottom-color: #8E6A2A;
transition: background .25s ease, border-color .25s ease;
}
.px-window:not(.px-window-accent):hover .px-window-title{
color: #1A1208;
}
.px-window:not(.px-window-accent):hover .px-window-dots i{
background: rgba(0,0,0,0.35);
}
.px-window:not(.px-window-accent):hover .px-window-dots i:first-child{ background: #8E6A2A }
.px-window:not(.px-window-accent):hover .px-window-dots i:nth-child(2){ background: #6A4F1F }
.px-window:not(.px-window-accent):hover .px-window-dots i:last-child{ background: #4F3A18 }
.px-window-dots{
display: inline-flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
line-height: 1;
}
.px-window-dots i{
width: 8px; height: 8px;
background: rgba(255,255,255,0.18);
display: inline-block;
transition: background .25s ease;
/* pixel-square dots, not circles */
}
.px-window-dots i:first-child{ background: #5A6273 }
.px-window-dots i:nth-child(2){ background: #4A5160 }
.px-window-dots i:last-child{ background: #3A4050 }
.px-window-accent .px-window-dots i{
background: rgba(0,0,0,0.35);
}
.px-window-accent .px-window-dots i:first-child{ background: #8E6A2A }
.px-window-accent .px-window-dots i:nth-child(2){ background: #6A4F1F }
.px-window-accent .px-window-dots i:last-child{ background: #4F3A18 }
.px-window-title{
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1;
display: inline-flex;
align-items: center;
min-height: 12px;
}
.px-window-accent .px-window-title{
color: #1A1208;
}
.px-window-body{
padding: 22px 22px 22px;
flex: 1;
display: flex;
flex-direction: column;
}
/* ═══════════════════════════════════════════════════════════════════════
SOLUTIONS — 2×2 grid of 8-bit pixel windows
Featured (Managed Liquidity) gets accent gold title bar.
═══════════════════════════════════════════════════════════════════════ */
.svc-grid{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
@media (max-width: 720px){
.svc-grid{ grid-template-columns: 1fr }
}
.svc-card{
/* PixelWindow handles visuals — these are just layout overrides */
}
.svc-card .svc-title{
font-size: 19px;
font-weight: 600;
letter-spacing: -.018em;
line-height: 1.2;
margin: 0 0 12px;
color: var(--text);
}
.svc-card .svc-desc{
font-size: 14px;
line-height: 1.55;
color: var(--text-mute);
margin: 0 0 22px;
flex: 1;
}
.svc-card .svc-link{
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: .04em;
color: var(--accent);
margin-top: auto;
text-decoration: none;
transition: gap .2s ease;
}
.svc-card .svc-link:hover{ gap: 12px }
.svc-card .svc-link .arrow{ font-family: var(--font-mono); font-size: 12px }
.svc-card .svc-link-soon{ color: var(--text-dim); cursor: default }
/* ═══════════════════════════════════════════════════════════════════════
REACH — 4 stat pixel-windows + 2 coverage pixel-windows
═══════════════════════════════════════════════════════════════════════ */
.reach{
padding-top: 80px;
padding-bottom: 80px;
}
.reach .section-head{ margin-bottom: 56px }
.reach-stats{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-bottom: 36px;
}
@media (max-width: 880px){
.reach-stats{ grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 480px){
.reach-stats{ grid-template-columns: 1fr }
}
.reach-stat .px-window-body{
padding: 24px 22px 22px;
gap: 8px;
}
.reach-stat-v{
font-family: var(--font-mono);
font-size: clamp(36px, 4.2vw, 52px);
font-weight: 700;
color: var(--accent);
letter-spacing: -.025em;
line-height: 1;
font-variant-numeric: tabular-nums;
display: block;
}
.reach-stat-l{
font-size: 12.5px;
line-height: 1.5;
color: var(--text-mute);
letter-spacing: -.005em;
display: block;
text-wrap: pretty;
}
.reach-coverage{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
@media (max-width: 880px){
.reach-coverage{ grid-template-columns: 1fr }
}
.reach-coverage-single{ grid-template-columns: 1fr }
.reach-cov .reach-tags{
list-style: none;
padding: 0; margin: 0;
display: flex; flex-wrap: wrap; gap: 8px;
}
.reach-cov .reach-tags li{
display: inline-flex; align-items: center;
padding: 7px 12px;
border: 1px solid #2A3140;
background: #0F1419;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: .02em;
color: var(--text);
}
.reach-cov .reach-tags-strong li{
border-color: rgba(224,176,85,.35);
background: rgba(224,176,85,.08);
}
.reach-cov-note{
font-size: 12.5px;
color: var(--text-dim);
margin: 14px 0 0;
font-style: italic;
}
/* ═══════════════════════════════════════════════════════════════════════
TRUST — masonry pixel-window quotes
═══════════════════════════════════════════════════════════════════════ */
.trust{ padding: 80px 0 100px }
.trust .section-head{ margin-bottom: 48px }
.trust-masonry{
list-style: none;
padding: 0; margin: 0;
column-count: 3;
column-gap: 18px;
}
@media (max-width: 1080px){ .trust-masonry{ column-count: 2 } }
@media (max-width: 640px){ .trust-masonry{ column-count: 1 } }
.trust-q-wrap{
break-inside: avoid;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
margin: 0 0 18px;
}
.trust-q .quote-text{
font-size: 14.5px;
line-height: 1.55;
color: var(--text);
margin: 0;
font-style: normal;
display: block;
}
/* ═══════════════════════════════════════════════════════════════════════
RESEARCH LEAD — clean, no decorative brackets
(Corner brackets removed per user feedback)
═══════════════════════════════════════════════════════════════════════ */
.rl-portrait{ position: relative }
/* ═══════════════════════════════════════════════════════════════════════
FINAL CTA — pixel chip stack ornament (unchanged from earlier round)
═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
Section eyebrow — gold pixel line prefix (re-added per feedback)
Applied to every .section-eyebrow on the homepage.
═══════════════════════════════════════════════════════════════════════ */
.services .section-eyebrow,
.technologies .section-eyebrow,
.how-we-work .section-eyebrow,
.who-we-serve .section-eyebrow,
.reach .section-eyebrow,
.trust .section-eyebrow,
.research-lead .section-eyebrow{
display: inline-flex;
align-items: center;
gap: 14px;
}
.services .section-eyebrow::before,
.technologies .section-eyebrow::before,
.how-we-work .section-eyebrow::before,
.who-we-serve .section-eyebrow::before,
.reach .section-eyebrow::before,
.trust .section-eyebrow::before,
.research-lead .section-eyebrow::before{
content: "";
display: inline-block;
width: 36px;
height: 1px;
/* Use box-shadow + transparent bg so the rendered line is a real 1-CSS-pixel
solid stripe, immune to box-sizing / sub-pixel rounding differences. */
background: var(--accent);
flex: 0 0 36px;
/* No image-rendering: pixelated — it was nudging sub-pixel rendering
differently across sections and made the line look thicker on some. */
}
/* ═══════════════════════════════════════════════════════════════════════
HOW WE WORK — editorial timeline (re-added; was wiped by an earlier
cleanup pass). Horizontal grid of 5 steps with pixel-dotted connector.
═══════════════════════════════════════════════════════════════════════ */
.how-we-work{
padding-top: 80px;
padding-bottom: 80px;
}
.how-we-work .section-head{ margin-bottom: 64px }
.hww-flow{
list-style: none;
padding: 0; margin: 0;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 24px;
position: relative;
}
.hww-flow::before{
content: "";
position: absolute;
top: 26px;
left: 0; right: 0;
height: 3px;
background-image: linear-gradient(to right, var(--accent) 0 6px, transparent 6px 12px);
background-size: 12px 3px;
background-repeat: repeat-x;
opacity: .55;
z-index: 0;
}
@media (max-width: 880px){
.hww-flow{ grid-template-columns: 1fr; gap: 36px }
.hww-flow::before{
top: 0; left: 26px; right: auto;
width: 3px; height: 100%;
background-image: linear-gradient(to bottom, var(--accent) 0 6px, transparent 6px 12px);
background-size: 3px 12px;
background-repeat: repeat-y;
}
}
.hww-step{ position: relative; z-index: 1 }
@media (max-width: 880px){
.hww-step{ padding-left: 72px }
}
.hww-step-num{
display: inline-block;
font-family: var(--font-mono);
font-size: clamp(44px, 4.5vw, 56px);
font-weight: 700;
color: var(--accent);
letter-spacing: -.04em;
line-height: 1;
font-variant-numeric: tabular-nums;
background: var(--bg);
padding-right: 16px;
margin-bottom: 20px;
position: relative;
}
@media (max-width: 880px){
.hww-step-num{
position: absolute;
top: -6px; left: 0;
width: 56px;
text-align: center;
padding: 0;
background: var(--bg);
}
}
.hww-step-title{
font-size: 18px;
font-weight: 600;
letter-spacing: -.018em;
line-height: 1.2;
margin: 0 0 12px;
color: var(--text);
}
.hww-step-desc{
font-size: 13.5px;
line-height: 1.55;
color: var(--text-mute);
margin: 0;
text-wrap: pretty;
}
/* ═══════════════════════════════════════════════════════════════════════
WHO WE SERVE — compact list with pixel bullets (re-added)
═══════════════════════════════════════════════════════════════════════ */
.who-we-serve{
padding-top: 80px;
padding-bottom: 80px;
}
.who-we-serve .section-head{ margin-bottom: 48px }
.wws-list{
list-style: none;
padding: 0; margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 56px;
}
@media (max-width: 880px){
.wws-list{ grid-template-columns: 1fr; gap: 0 }
}
.wws-row{
display: grid;
grid-template-columns: 24px 1fr;
gap: 18px;
padding: 22px 0;
}
.wws-bullet{
width: 10px; height: 10px;
margin-top: 16px;
background: var(--accent);
box-shadow: 3px 3px 0 0 var(--accent);
image-rendering: pixelated;
}
.wws-row-head{
display: flex; flex-wrap: wrap; align-items: baseline;
gap: 10px 14px;
margin-bottom: 8px;
}
.wws-tag{
display: inline-block;
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--accent);
}
.wws-title{
font-size: 17px;
font-weight: 600;
letter-spacing: -.018em;
line-height: 1.2;
margin: 0;
color: var(--text);
}
.wws-desc{
font-size: 13.5px;
line-height: 1.55;
color: var(--text-mute);
margin: 0;
text-wrap: pretty;
}
.wws-row-body{ display: flex; flex-direction: column }
/* ═══════════════════════════════════════════════════════════════════════
RESEARCH LEAD — body in PixelWindow, portrait stands clean
═══════════════════════════════════════════════════════════════════════ */
.research-lead{ padding: 80px 0 80px }
.rl-grid{
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: 40px;
align-items: stretch;
}
@media (max-width: 880px){
.rl-grid{ grid-template-columns: 1fr; gap: 28px; align-items: start }
}
.rl-portrait{
margin: 0;
display: flex;
flex-direction: column;
height: 100%;
}
.rl-portrait img{
display: block;
width: 100%;
height: auto;
flex: 1;
min-height: 0;
object-fit: cover;
border: 2px solid #2A3140;
box-shadow:
inset 1px 1px 0 0 #353C4A,
inset -1px -1px 0 0 #0A0E15,
4px 4px 0 0 rgba(0,0,0,0.35);
image-rendering: auto;
}
@media (max-width: 880px){
.rl-portrait img{
flex: none;
max-width: 360px;
height: auto;
}
}
.rl-portrait figcaption{
margin-top: 14px;
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: .14em;
color: var(--text-dim);
flex-shrink: 0;
text-align: center;
}
.rl-window{ height: 100% }
.rl-window .px-window-body{ padding: 24px 24px 24px }
.rl-window .rl-lede{
font-size: 16.5px;
line-height: 1.55;
color: var(--text);
margin: 0 0 14px;
text-wrap: pretty;
}
.rl-window p{
font-size: 14.5px;
line-height: 1.6;
color: var(--text-mute);
margin: 0 0 14px;
}
.rl-window p:last-child{ margin: 0 }
.rl-link a{
color: var(--accent-2);
border-bottom: 1px solid rgba(0,184,212,.4);
transition: border-color .15s ease, color .15s ease;
}
.rl-link a:hover{
color: var(--accent);
border-bottom-color: var(--accent);
}
/* ═══════════════════════════════════════════════════════════════════════
FINAL CTA — wrapped in accent PixelWindow.
No corner chip ornament (replaced by the title bar itself).
═══════════════════════════════════════════════════════════════════════ */
.cta{ padding: 80px 0 100px }
.cta-card{
/* PixelWindow handles chrome — overrides for the body padding */
}
.cta-card .px-window-body{
padding: 36px clamp(24px, 4vw, 56px) 32px;
}
@media (max-width: 720px){
.cta-card .px-window-body{ padding: 28px 22px 24px }
}
.cta-h2{
font-size: clamp(28px, 3.4vw, 44px);
line-height: 1.05;
font-weight: 600;
letter-spacing: -.025em;
margin: 0 0 16px;
color: var(--text);
}
.cta-sub{
font-size: 15.5px;
line-height: 1.6;
color: var(--text-mute);
margin: 0 0 28px;
max-width: 580px;
}
.cta-buttons{
display: flex; flex-wrap: wrap; gap: 14px;
}
/* ═══════════════════════════════════════════════════════════════════════
HowWeWork + WhoWeServe — wrapped in PixelWindow so they match
the 8-bit window theme of the other sections.
═══════════════════════════════════════════════════════════════════════ */
.hww-window .px-window-body{ padding: 40px clamp(24px, 4vw, 48px) 36px }
.wws-window .px-window-body{ padding: 24px clamp(20px, 3vw, 36px) 8px }
/* The timeline dotted-line connector now sits inside the window;
adjust its left/right offsets so it doesn't touch the window edges. */
.hww-window .hww-flow::before{
left: 0; right: 0;
}
@media (max-width: 880px){
.hww-window .hww-flow::before{
left: 26px;
}
}
/* The "punch" bg behind big numbers now needs to match the window bg
(not the page bg) so the dotted line visually breaks correctly. */
.hww-window .hww-step-num{
background: #161B22;
}
/* WhoWeServe list — drop the top dashed border (PixelWindow has its own
top edge from the title bar separator). */
.wws-window .wws-list{ border-top: none }
.wws-window .wws-row:last-child{ border-bottom: none }
/* ═══════════════════════════════════════════════════════════════════════
PixelWindow title marquee — auto-scrolls overflowing title bar text.
Triggered by the component adding .is-marquee when scrollWidth > clientWidth.
═══════════════════════════════════════════════════════════════════════ */
.px-window-title{
flex: 1;
min-width: 0;
position: relative;
overflow: hidden;
white-space: nowrap;
transition: color .25s ease;
/* Default state — single text span, truncated with ellipsis as fallback */
}
.px-window-title:not(.is-marquee) .px-window-title-text{
display: inline-block;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Marquee state — duplicated text spans scroll continuously left.
The right edge fades out so the loop seam is invisible. */
.px-window-title.is-marquee{
-webkit-mask-image: linear-gradient(to right,
rgba(0,0,0,1) 0,
rgba(0,0,0,1) calc(100% - 32px),
rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to right,
rgba(0,0,0,1) 0,
rgba(0,0,0,1) calc(100% - 32px),
rgba(0,0,0,0) 100%);
}
.px-window-title.is-marquee .px-window-title-text{
display: inline-block;
padding-right: 36px;
/* Single constant duration; pause-on-hover handled below */
animation: px-marquee 16s linear infinite;
will-change: transform;
}
@keyframes px-marquee{
0% { transform: translateX(0) }
100% { transform: translateX(-50%) }
}
/* Pause on hover (don't change duration — causes jumps) */
.px-window:hover .px-window-title.is-marquee .px-window-title-text{
animation-play-state: paused;
}
/* Respect reduce-motion */
@media (prefers-reduced-motion: reduce){
.px-window-title.is-marquee .px-window-title-text{
animation: none;
transform: none;
}
.px-window-title.is-marquee{ -webkit-mask-image: none; mask-image: none }
.px-window-title.is-marquee .px-window-title-text:nth-child(2){ display: none }
}
/* ═══════════════════════════════════════════════════════════════════════
FINAL CTA — dark PixelWindow with gold accent strip at the top-right
of the title bar. Subtler than the full gold accent variant.
═══════════════════════════════════════════════════════════════════════ */
.cta-card .px-window-titlebar{
position: relative;
}
/* Gold flag in the top-right of the CTA title bar — pixel-art accent */
.cta-card .px-window-titlebar::after{
content: "PRIORITY";
position: absolute;
top: 50%;
right: 14px;
transform: translateY(-50%);
font-family: var(--font-mono);
font-size: 9.5px;
font-weight: 700;
letter-spacing: .18em;
color: var(--accent);
padding: 3px 8px;
background: rgba(224,176,85,.12);
border: 1px solid rgba(224,176,85,.45);
}
@media (max-width: 480px){
.cta-card .px-window-titlebar::after{ display: none }
}
/* Technologies: top-padding spacer between Hero Cinema and Solutions */
.technologies{
padding-top: 120px;
}
@media (max-width: 720px){
.technologies{ padding-top: 80px }
}
/* ═══════════════════════════════════════════════════════════════════════
INSIGHTS INDEX — blog card grid (filterable, continuously growing)
═══════════════════════════════════════════════════════════════════════ */
.ins-wrap{ max-width: 1080px }
/* ── Category filter chips ── */
.insb-filter{
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 8px 0 36px;
padding-bottom: 28px;
border-bottom: 1px solid var(--hairline);
}
.insb-filter-chip{
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: .04em;
color: var(--text-mute);
background: rgba(255,255,255,.02);
border: 1px solid var(--border);
border-radius: 999px;
padding: 7px 14px;
cursor: pointer;
transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.insb-filter-chip:hover{ color: var(--text); border-color: var(--border-strong); }
.insb-filter-chip.is-active{
color: #0E1419;
background: var(--accent);
border-color: var(--accent);
font-weight: 600;
}
.insb-filter-count{
opacity: .55;
margin-left: 4px;
font-size: 11px;
}
.insb-filter-chip.is-active .insb-filter-count{ opacity: .65; }
/* ── Card grid ── */
.insb-grid{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
@media (max-width: 720px){
.insb-grid{ grid-template-columns: 1fr; }
}
.insb-card{
display: flex;
flex-direction: column;
padding: 26px 26px 22px;
border: 1px solid var(--border);
border-radius: 14px;
background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.005));
text-decoration: none;
transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.insb-card:hover{
border-color: var(--border-strong);
transform: translateY(-2px);
background: linear-gradient(180deg, rgba(224,176,85,.05), transparent 80%);
}
.insb-card-top{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.insb-chip{
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--accent);
border: 1px solid rgba(224,176,85,.35);
border-radius: 4px;
padding: 3px 8px;
}
.insb-meta{
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-dim);
letter-spacing: .04em;
white-space: nowrap;
}
.insb-card-title{
font-size: 19px;
font-weight: 600;
line-height: 1.32;
letter-spacing: -0.01em;
color: var(--text);
margin: 0 0 10px;
}
.insb-card:hover .insb-card-title{ color: var(--accent); }
.insb-card-desc{
font-size: 14.5px;
line-height: 1.55;
color: var(--text-mute);
margin: 0 0 18px;
flex: 1;
}
.insb-card-cta{
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--text-dim);
}
.insb-card:hover .insb-card-cta{ color: var(--accent); }
.insb-card-cta .arrow{ margin-left: 4px; }
/* ── Legacy directory layout (kept for any page still using it) ── */
/* ── Featured lead ── */
.ins-lead{
display: grid;
grid-template-columns: 1fr 200px;
gap: 0;
margin: 0 0 56px;
border: 2px solid var(--accent);
background: radial-gradient(ellipse at top right,
rgba(224,176,85,.10) 0%, rgba(15,20,25,0) 60%), #161B22;
box-shadow:
inset 1px 1px 0 0 rgba(255,232,184,0.5),
inset -1px -1px 0 0 #8E6A2A,
5px 5px 0 0 rgba(224,176,85,0.18);
image-rendering: pixelated;
text-decoration: none;
color: inherit;
transition: box-shadow .2s ease, transform .1s steps(2);
}
.ins-lead:hover{
transform: translate(-1px,-1px);
box-shadow:
inset 1px 1px 0 0 rgba(255,232,184,0.5),
inset -1px -1px 0 0 #8E6A2A,
8px 8px 0 0 rgba(224,176,85,0.22);
}
.ins-lead-left{ padding: 32px 30px 28px }
.ins-lead-badge{
display: inline-block;
font-family: var(--font-mono);
font-size: 10.5px; font-weight: 700;
letter-spacing: .18em; text-transform: uppercase;
color: var(--accent);
margin-bottom: 16px;
}
.ins-lead-title{
font-size: clamp(24px, 2.8vw, 34px);
font-weight: 600; letter-spacing: -.022em; line-height: 1.12;
margin: 0 0 14px; color: var(--text); text-wrap: balance;
max-width: 620px;
}
.ins-lead-desc{
font-size: 15px; line-height: 1.6; color: var(--text-mute);
margin: 0 0 24px; max-width: 600px; text-wrap: pretty;
}
.ins-lead-foot{
display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.ins-lead-meta{
font-family: var(--font-mono); font-size: 11.5px;
letter-spacing: .04em; color: var(--text-dim);
}
.ins-lead-cta{
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-mono); font-size: 12.5px; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase; color: var(--accent);
transition: gap .2s ease;
}
.ins-lead:hover .ins-lead-cta{ gap: 12px }
.ins-lead-right{
display: flex; align-items: center; justify-content: center;
border-left: 2px solid #2A3140;
background: #0F1419;
}
.ins-lead-glyph{ width: 96px; height: 96px; image-rendering: pixelated }
@media (max-width: 720px){
.ins-lead{ grid-template-columns: 1fr }
.ins-lead-right{ display: none }
}
/* ── Directory sections ── */
.ins-section{ margin: 0 0 40px }
.ins-section-bar{
display: flex; align-items: center; gap: 16px;
margin-bottom: 6px;
}
.ins-section-label{
font-family: var(--font-mono); font-size: 12px; font-weight: 700;
letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
white-space: nowrap;
}
.ins-section-rule{
flex: 1; height: 0;
border-top: 2px dotted #2A3140;
}
.ins-section-count{
font-family: var(--font-mono); font-size: 11px;
letter-spacing: .1em; color: var(--text-dim);
}
/* ── Directory rows ── */
.ins-rows{ display: flex; flex-direction: column }
.ins-row{
display: grid;
grid-template-columns: 36px 130px 1fr auto 20px;
gap: 20px;
align-items: baseline;
padding: 20px 12px;
border-bottom: 1px solid #21283280;
text-decoration: none; color: inherit;
transition: background .18s ease, padding-left .18s ease;
}
.ins-row:first-child{ border-top: 1px solid #21283280 }
.ins-row:hover{
background: rgba(224,176,85,.06);
padding-left: 18px;
}
.ins-row-n{
font-family: var(--font-mono); font-size: 13px; font-weight: 700;
color: var(--accent); letter-spacing: -.02em;
}
.ins-row-tag{
font-family: var(--font-mono); font-size: 10px; font-weight: 600;
letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim);
padding-top: 2px;
}
.ins-row-main{ display: flex; flex-direction: column; gap: 5px; min-width: 0 }
.ins-row-title{
font-size: 16.5px; font-weight: 600; letter-spacing: -.018em;
line-height: 1.25; color: var(--text);
}
.ins-row:hover .ins-row-title{ color: var(--accent) }
.ins-row-desc{
font-size: 13px; line-height: 1.5; color: var(--text-mute);
text-wrap: pretty;
}
.ins-row-meta{
font-family: var(--font-mono); font-size: 11px;
letter-spacing: .04em; color: var(--text-dim); white-space: nowrap;
}
.ins-row-arrow{
font-family: var(--font-mono); font-size: 14px; color: var(--text-dim);
text-align: right; transition: color .18s ease, transform .18s ease;
}
.ins-row:hover .ins-row-arrow{ color: var(--accent); transform: translateX(3px) }
/* Mobile: collapse tag + meta into a tighter stack */
@media (max-width: 680px){
.ins-row{
grid-template-columns: 28px 1fr 18px;
gap: 14px;
padding: 18px 8px;
}
.ins-row-tag{ display: none }
.ins-row-meta{ display: none }
}
/* ═══════════════════════════════════════════════════════════════════════
REPORTS — landing feature card, mock cover, download bar
═══════════════════════════════════════════════════════════════════════ */
.rep-feature{
display:grid; grid-template-columns:1fr 280px; gap:0;
border:1px solid var(--border); border-radius:16px; overflow:hidden;
text-decoration:none; margin:8px 0 64px;
transition:border-color .2s ease, transform .2s ease;
}
.rep-feature:hover{ border-color:var(--border-strong); transform:translateY(-2px); }
@media (max-width:780px){ .rep-feature{ grid-template-columns:1fr; } }
.rep-feature-left{ padding:32px 32px 28px; }
.rep-feature-badge{
font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
color:var(--accent); border:1px solid rgba(224,176,85,.35); border-radius:4px; padding:5px 10px;
}
.rep-feature-title{ font-size:27px; font-weight:700; letter-spacing:-0.02em; color:var(--text); margin:18px 0 10px; line-height:1.15; }
.rep-feature:hover .rep-feature-title{ color:var(--accent); }
.rep-feature-desc{ font-size:15px; line-height:1.6; color:var(--text-mute); margin:0 0 22px; max-width:48ch; }
.rep-feature-stats{ display:flex; gap:32px; flex-wrap:wrap; margin-bottom:24px; }
.rep-feature-stats > div{ display:flex; flex-direction:column; }
.rfs-n{ font-family:var(--font-mono); font-size:24px; font-weight:600; color:var(--accent); letter-spacing:-0.02em; }
.rfs-l{ font-size:12px; color:var(--text-mute); margin-top:4px; max-width:18ch; line-height:1.4; }
.rep-feature-cta{ font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); }
.rep-feature:hover .rep-feature-cta{ color:var(--accent); }
/* mock cover panel */
.rep-feature-right{
background:linear-gradient(160deg, #12171E, #0C1015);
border-left:1px solid var(--border);
display:flex; align-items:center; justify-content:center; padding:24px;
}
@media (max-width:780px){ .rep-feature-right{ border-left:none; border-top:1px solid var(--border); } }
.rep-cover{
width:200px; aspect-ratio:1/1.414; border:1px solid var(--border-strong); border-radius:8px;
background:linear-gradient(180deg,#0F1419,#0B0E12);
padding:22px 18px; display:flex; flex-direction:column;
background-image:radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px); background-size:14px 14px;
}
.rep-cover-mark{ font-family:var(--font-mono); font-weight:700; font-size:12px; color:var(--text); }
.rep-cover-mark b{ color:var(--accent); }
.rep-cover-badge{
font-family:var(--font-mono); font-size:8px; letter-spacing:.2em; color:var(--accent);
border:1px solid rgba(224,176,85,.4); border-radius:3px; padding:3px 7px; align-self:flex-start; margin-top:10px;
}
.rep-cover-title{ font-size:19px; font-weight:800; line-height:1.08; letter-spacing:-0.02em; color:var(--text); margin-top:auto; }
.rep-cover-by{ font-family:var(--font-mono); font-size:8px; color:var(--text-dim); margin-top:12px; letter-spacing:.04em; }
/* download bar */
.rep-download{
display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
border:1px solid var(--border); border-radius:12px; padding:20px 24px; margin:8px 0 56px;
background:linear-gradient(180deg, rgba(224,176,85,.05), transparent 80%);
}
.rep-download-info{ display:flex; flex-direction:column; gap:5px; }
.rep-download-fmt{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.rep-download-name{ font-size:15px; color:var(--text); font-weight:600; }
/* ── Contact form (added for Astro form, Resend-backed) ───────────────── */
.contact-form { margin: 1.5rem 0 0; display: flex; flex-direction: column; gap: 1rem; }
.contact-form .cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form .cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .contact-form .cf-row { grid-template-columns: 1fr; } }
.contact-form .cf-field { display: flex; flex-direction: column; gap: .4rem; }
.contact-form .cf-field > span { font-size: .82rem; letter-spacing: .02em; color: var(--text-dim, #9aa3ad); }
.contact-form .cf-field > span em { font-style: normal; opacity: .6; }
.contact-form input,
.contact-form textarea {
font-family: inherit; font-size: .95rem; color: var(--text, #e8eaed);
background: rgba(255,255,255,.03); border: 1px solid var(--border, rgba(255,255,255,.14));
border-radius: 8px; padding: .7rem .85rem; width: 100%; resize: vertical;
transition: border-color .15s ease, background .15s ease;
}
.contact-form input:focus,
.contact-form textarea:focus { outline: none; border-color: var(--accent, #e0b055); background: rgba(255,255,255,.05); }
.contact-form .cf-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.contact-form .cf-submit[disabled] { opacity: .55; cursor: default; }
.contact-form .cf-status { font-size: .85rem; color: var(--text-dim, #9aa3ad); }
.contact-form .cf-status-ok { color: var(--accent-2, #3ad48a); }
.contact-form .cf-status-err { color: #ff8888; }
.contact-form .cf-fineprint { margin-top: .25rem; }
/* ── Contact: instant-chat (Telegram) callout ────────────────────────── */
.contact-instant {
border: 1px solid var(--accent, #E0B055);
background: rgba(224,176,85,.06);
border-radius: 10px;
padding: 1rem 1.15rem;
margin: 0 0 1.25rem;
line-height: 1.55;
}
.contact-instant strong { color: var(--accent, #E0B055); }
.contact-tg {
display: inline-block; margin-top: .35rem;
font-weight: 600; color: var(--accent, #E0B055); white-space: nowrap;
}
.contact-tg:hover { text-decoration: underline; }
.contact-tg .arrow { transition: transform .15s ease; display: inline-block; }
.contact-tg:hover .arrow { transform: translateX(3px); }