/* ─────────────────────────────────────────────────────────────
TOTO LABS — v2 / 2026 Cybertech
Philosophy: precision · restraint · kinetic detail
──────────────────────────────────────────────────────────── */
:root {
/* Surface */
--bg: #050607;
--bg-card: rgba(255, 255, 255, 0.025);
--bg-glass: rgba(10, 12, 14, 0.55);
--bg-elev: rgba(255, 255, 255, 0.04);
/* Borders */
--line: rgba(255, 255, 255, 0.06);
--line-1: rgba(255, 255, 255, 0.10);
--line-2: rgba(255, 255, 255, 0.16);
/* Text */
--fg: #f5f6f7;
--fg-2: rgba(245, 246, 247, 0.72);
--fg-3: rgba(245, 246, 247, 0.5);
--fg-4: rgba(245, 246, 247, 0.32);
--fg-5: rgba(245, 246, 247, 0.18);
/* Brand (high-intent only) */
--c-blue: #0aabfb;
--c-green: #17f098;
--c-aqua: #00e5d0;
--grad: linear-gradient(135deg, #0aabfb 0%, #17f098 100%);
--grad-h: linear-gradient(90deg, #0aabfb 0%, #17f098 100%);
--glow: 0 0 0 1px rgba(23, 240, 152, 0.18), 0 8px 32px rgba(10, 171, 251, 0.18);
/* Type */
--font-sans: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
/* Motion */
--ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}
/* ─── Reset ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: var(--bg);
color: var(--fg);
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-feature-settings: "ss01", "cv11";
overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
/* ─── Background texture (1px grid + radial glows) ─── */
.bg-fx {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
}
.bg-fx::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
background-size: 64px 64px;
background-position: -1px -1px;
mask-image: radial-gradient(ellipse 100% 80% at 50% 0%, #000 30%, transparent 90%);
}
.bg-fx::after {
content: "";
position: absolute;
width: 1100px; height: 1100px;
left: 50%; top: -200px;
transform: translateX(-50%);
background: radial-gradient(closest-side, rgba(10, 171, 251, 0.10), rgba(23, 240, 152, 0.04) 50%, transparent 70%);
filter: blur(40px);
}
/* Layered glow tokens */
.glow-l, .glow-r {
position: absolute;
width: 720px; height: 720px;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
opacity: 0.5;
}
.glow-l { left: -300px; top: 280px; background: radial-gradient(closest-side, rgba(10, 171, 251, 0.20), transparent); }
.glow-r { right: -260px; top: 80px; background: radial-gradient(closest-side, rgba(23, 240, 152, 0.16), transparent); }
/* ─── Type ──────────────────────────────────────── */
.h-display, h1, h2, h3, h4 { margin: 0; font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
h1 { font-size: clamp(40px, 6vw, 88px); font-weight: 600; }
h2 { font-size: clamp(28px, 3vw, 44px); }
h3 { font-size: 22px; letter-spacing: -0.025em; }
h4 { font-size: 16px; letter-spacing: -0.02em; }
p { margin: 0; }
.lede { font-size: clamp(16px, 1.25vw, 19px); color: var(--fg-2); max-width: 56ch; line-height: 1.55; }
.mono, .meta {
font-family: var(--font-mono);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-4);
}
.grad-text {
background: var(--grad-h);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
background-size: 200% auto;
}
.fg-2 { color: var(--fg-2); }
.fg-3 { color: var(--fg-3); }
/* ─── Layout ─────────────────────────────────────── */
.shell {
position: relative;
z-index: 1;
max-width: 1280px;
margin: 0 auto;
padding: 0 32px;
}
section { position: relative; }
.section-pad { padding-block: 120px; }
.section-pad-sm { padding-block: 80px; }
/* ─── Floating Island Nav ────────────────────────── */
.nav-island {
position: sticky;
top: 16px;
z-index: 50;
margin: 16px auto 0;
max-width: 1180px;
padding: 0 12px;
}
.nav-pill {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 10px 10px 10px 18px;
border-radius: 999px;
background: rgba(10, 12, 14, 0.65);
backdrop-filter: blur(18px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(180%);
border: 1px solid var(--line-1);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.05) inset,
0 14px 40px rgba(0, 0, 0, 0.45);
}
.brand {
display: inline-flex;
align-items: center;
height: var(--logo-h, 44px);
}
.brand img { height: var(--logo-h, 44px); width: auto; display: block; transition: height 0.2s var(--ease); }
.nav-menu {
display: flex;
gap: 4px;
align-items: center;
}
.nav-menu a {
position: relative;
padding: 8px 14px;
border-radius: 999px;
font-size: 13.5px;
font-weight: 500;
color: var(--fg-2);
transition: color 0.2s var(--ease), background 0.2s var(--ease);
letter-spacing: -0.005em;
}
.nav-menu a:hover { color: var(--fg); background: rgba(255, 255, 255, 0.04); }
.nav-menu a.active { color: var(--fg); background: rgba(255, 255, 255, 0.06); }
.nav-menu .has-caret::after {
content: "";
display: inline-block;
width: 8px; height: 8px;
margin-left: 6px;
border-right: 1px solid currentColor;
border-bottom: 1px solid currentColor;
transform: translateY(-2px) rotate(45deg);
opacity: 0.5;
}
/* ─── Buttons ────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 40px;
padding: 0 18px;
border-radius: 999px;
font-size: 13.5px;
font-weight: 500;
letter-spacing: -0.005em;
border: 1px solid transparent;
transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
white-space: nowrap;
position: relative;
overflow: hidden;
isolation: isolate;
}
.btn svg { width: 14px; height: 14px; }
.btn-primary {
background: var(--grad-h);
color: #02110a;
font-weight: 600;
box-shadow: 0 0 0 1px rgba(23, 240, 152, 0.4) inset, 0 8px 28px rgba(10, 171, 251, 0.25);
}
.btn-primary::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
transform: translateX(-120%);
transition: transform 0.6s var(--ease);
z-index: -1;
}
.btn-primary:hover::before { transform: translateX(120%); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(23, 240, 152, 0.55) inset, 0 12px 36px rgba(10, 171, 251, 0.35); }
.btn-ghost {
background: rgba(255, 255, 255, 0.04);
border-color: var(--line-1);
color: var(--fg);
}
.btn-ghost:hover { border-color: var(--line-2); background: rgba(255, 255, 255, 0.07); }
.btn-lg { height: 48px; padding: 0 22px; font-size: 14.5px; }
.btn-arrow svg { transition: transform 0.25s var(--ease); }
.btn-arrow:hover svg { transform: translateX(3px); }
/* ─── Eyebrow chip ───────────────────────────────── */
.chip {
display: inline-flex;
align-items: center;
gap: 8px;
height: 28px;
padding: 0 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--line-1);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--fg-2);
}
.chip .dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--c-green);
box-shadow: 0 0 0 3px rgba(23, 240, 152, 0.18), 0 0 14px rgba(23, 240, 152, 0.7);
animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(0.85); }
}
/* ─── Hero ───────────────────────────────────────── */
.hero {
position: relative;
padding-block: 100px 80px;
overflow: hidden;
}
.hero-grid {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 80px;
align-items: center;
}
.hero h1 {
font-size: clamp(40px, 5.6vw, 76px);
font-weight: 600;
letter-spacing: -0.04em;
line-height: 1.02;
margin-top: 24px;
}
.hero h1 .em { color: var(--fg-3); }
.hero h1 .accent { background: var(--grad-h); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lede { margin-top: 28px; }
.hero-cta { margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero-stats {
margin-top: 56px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
max-width: 520px;
}
.hero-stat {
padding-right: 18px;
}
.hero-stat + .hero-stat {
border-left: 1px solid var(--line);
padding-left: 18px;
}
.hero-stat .n {
font-size: 28px;
font-weight: 600;
letter-spacing: -0.03em;
display: block;
}
.hero-stat .l {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--fg-4);
margin-top: 4px;
display: block;
}
/* ─── Scanner visual ─────────────── (legacy, retained for fallback) */
.scanner {
position: relative;
width: 100%;
max-width: 560px;
aspect-ratio: 1 / 1;
margin-left: auto;
border-radius: 24px;
background:
radial-gradient(circle at 50% 50%, rgba(10, 171, 251, 0.08), transparent 60%),
rgba(255, 255, 255, 0.02);
border: 1px solid var(--line-1);
overflow: hidden;
isolation: isolate;
}
.scanner::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
background-size: 32px 32px;
mask-image: radial-gradient(circle at center, #000 40%, transparent 80%);
}
.scanner-rings { position: absolute; inset: 0; display: grid; place-items: center; }
.ring {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.ring.r1 { width: 30%; height: 30%; }
.ring.r2 { width: 52%; height: 52%; border-color: rgba(10, 171, 251, 0.18); }
.ring.r3 { width: 74%; height: 74%; border-color: rgba(10, 171, 251, 0.10); }
.ring.r4 { width: 96%; height: 96%; border-color: rgba(255, 255, 255, 0.05); border-style: dashed; }
.scan-bar {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 0%, transparent 48%, rgba(23, 240, 152, 0.5) 50%, transparent 52%, transparent 100%);
filter: blur(0.4px);
animation: scanY 3.4s ease-in-out infinite;
}
@keyframes scanY {
0% { transform: translateY(-52%); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translateY(52%); opacity: 0; }
}
.scanner-core {
position: absolute;
left: 50%; top: 50%;
width: 14px; height: 14px;
border-radius: 50%;
background: var(--c-green);
box-shadow: 0 0 0 6px rgba(23, 240, 152, 0.14), 0 0 40px rgba(23, 240, 152, 0.6);
transform: translate(-50%, -50%);
}
.scanner-nodes { position: absolute; inset: 0; }
.node {
position: absolute;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--c-blue);
box-shadow: 0 0 12px rgba(10, 171, 251, 0.8);
}
.node-label {
position: absolute;
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--fg-3);
background: rgba(10, 12, 14, 0.7);
padding: 3px 7px;
border: 1px solid var(--line-1);
border-radius: 4px;
backdrop-filter: blur(6px);
white-space: nowrap;
}
.scanner-corners { position: absolute; inset: 16px; pointer-events: none; }
.scanner-corners::before, .scanner-corners::after,
.scanner-corners > span:nth-child(1), .scanner-corners > span:nth-child(2) {
content: ""; position: absolute; width: 18px; height: 18px;
border-color: var(--c-green); border-style: solid; border-width: 0;
}
.scanner-corners::before { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; }
.scanner-corners::after { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; }
.scanner-corners > span:nth-child(1) { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.scanner-corners > span:nth-child(2) { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.scanner-meta {
position: absolute;
bottom: 14px; left: 16px;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--fg-4);
display: flex;
gap: 16px;
align-items: center;
}
.scanner-meta .live {
color: var(--c-green);
display: inline-flex;
align-items: center;
gap: 6px;
}
.scanner-meta .live::before {
content: "";
width: 6px; height: 6px; border-radius: 50%;
background: var(--c-green);
box-shadow: 0 0 8px rgba(23, 240, 152, 0.9);
animation: pulse 1.6s ease-in-out infinite;
}
/* ─── Network Overview viz (Activity Monitoring panel) ─── */
.netviz {
position: relative;
width: 100%;
max-width: 560px;
margin-left: auto;
border-radius: 18px;
background: rgba(8, 10, 12, 0.7);
border: 1px solid var(--line-1);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.04) inset,
0 20px 50px rgba(0, 0, 0, 0.5);
overflow: hidden;
font-family: var(--font-mono);
}
.netviz-bar {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid var(--line);
background: rgba(255, 255, 255, 0.015);
}
.netviz-bar .ic {
display: grid;
place-items: center;
width: 22px; height: 22px;
color: var(--c-green);
}
.netviz-bar .ic svg { width: 16px; height: 16px; }
.netviz-bar .title {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.14em;
color: var(--fg);
}
.netviz-bar .sub {
font-size: 10.5px;
letter-spacing: 0.06em;
color: var(--fg-4);
}
.netviz-bar .grow { flex: 1; }
.netviz-bar .arrow {
color: var(--fg-4);
width: 16px; height: 16px;
}
.netviz-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
gap: 12px;
}
.netviz-head .l {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
color: var(--fg-2);
}
.netviz-head .l svg { width: 14px; height: 14px; color: var(--c-aqua); }
.netviz-tabs {
display: inline-flex;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--line);
border-radius: 6px;
padding: 2px;
}
.netviz-tabs button {
background: transparent;
border: 0;
color: var(--fg-3);
font: 500 10.5px var(--font-mono);
letter-spacing: 0.08em;
padding: 5px 12px;
border-radius: 4px;
cursor: pointer;
transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.netviz-tabs button.active {
background: rgba(23, 240, 152, 0.14);
color: var(--c-green);
box-shadow: 0 0 0 1px rgba(23, 240, 152, 0.25);
}
.netviz-canvas {
position: relative;
aspect-ratio: 16 / 11;
margin: 0 14px 14px;
border-radius: 12px;
background:
radial-gradient(ellipse at 50% 50%, rgba(10, 171, 251, 0.04), transparent 70%),
#07090b;
border: 1px solid var(--line);
overflow: hidden;
}
.netviz-canvas::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
background-size: 32px 32px;
}
.netviz-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.netviz-svg line { stroke: rgba(255, 255, 255, 0.10); stroke-width: 1; }
.netviz-node {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
transform: translate(-50%, -50%);
}
.netviz-node .ring {
position: relative;
width: 48px; height: 48px;
border-radius: 50%;
border: 2px solid var(--node-c, var(--c-green));
background: radial-gradient(circle, color-mix(in oklch, var(--node-c, var(--c-green)) 20%, transparent), color-mix(in oklch, var(--node-c, var(--c-green)) 8%, #0a0d10));
box-shadow:
0 0 0 4px color-mix(in oklch, var(--node-c, var(--c-green)) 10%, transparent),
0 0 24px color-mix(in oklch, var(--node-c, var(--c-green)) 35%, transparent);
}
.netviz-node .ring::after {
content: "";
position: absolute;
inset: 6px;
border-radius: 50%;
background: radial-gradient(circle, color-mix(in oklch, var(--node-c, var(--c-green)) 40%, transparent) 0%, transparent 70%);
}
.netviz-node.lg .ring { width: 56px; height: 56px; }
.netviz-node.sm .ring { width: 36px; height: 36px; }
.netviz-node.crit { --node-c: #ff5b6e; animation: critPulse 2.2s ease-in-out infinite; }
.netviz-node.warn { --node-c: #ffb547; }
.netviz-node.ok { --node-c: #17f098; }
@keyframes critPulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); }
50% { transform: translate(-50%, -50%) scale(1.04); }
}
.netviz-node .label {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.08em;
color: var(--fg-2);
white-space: nowrap;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.netviz-legend {
position: absolute;
right: 8px; bottom: 8px;
background: rgba(0, 0, 0, 0.6);
border: 1px solid var(--line);
border-radius: 8px;
padding: 8px 12px;
display: grid;
gap: 4px;
backdrop-filter: blur(6px);
}
.netviz-legend .row {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.06em;
color: var(--fg-2);
}
.netviz-legend .dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--c, var(--c-green));
box-shadow: 0 0 6px color-mix(in oklch, var(--c, var(--c-green)) 60%, transparent);
}
.netviz-foot {
display: flex;
justify-content: space-between;
padding: 10px 16px 12px;
border-top: 1px solid var(--line);
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.08em;
color: var(--fg-4);
}
.netviz-foot .live {
color: var(--c-green);
display: inline-flex;
align-items: center;
gap: 6px;
}
.netviz-foot .live::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--c-green);
box-shadow: 0 0 8px rgba(23, 240, 152, 0.9);
animation: pulse 1.6s ease-in-out infinite;
}
/* ─── Trust strip (logos) ────────────────────────── */
.trust-strip {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 28px 0;
background: rgba(255, 255, 255, 0.015);
}
.trust-strip-inner {
display: flex;
flex-wrap: wrap;
gap: 28px 56px;
align-items: center;
justify-content: space-between;
}
.trust-strip .label {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--fg-4);
}
.trust-strip ul {
display: flex;
gap: 40px;
list-style: none;
margin: 0;
padding: 0;
flex-wrap: wrap;
}
.trust-strip li {
font-size: 13px;
color: var(--fg-3);
font-weight: 500;
letter-spacing: -0.005em;
white-space: nowrap;
}
/* ─── Section head ───────────────────────────────── */
.section-head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 18px;
margin-bottom: 56px;
max-width: 1100px;
}
.section-head h2 { letter-spacing: -0.04em; }
.section-head p { color: var(--fg-2); font-size: 17px; line-height: 1.55; max-width: 60ch; }
/* ─── Glass card ─────────────────────────────────── */
.glass {
position: relative;
background: rgba(255, 255, 255, 0.025);
border: 1px solid var(--line-1);
border-radius: 16px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
padding: 28px;
transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
overflow: hidden;
}
.glass::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 30%);
}
.glass:hover {
border-color: var(--line-2);
background: rgba(255, 255, 255, 0.045);
}
/* ─── Trust / Feature grid ───────────────────────── */
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
.grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.feat-icon {
width: 36px; height: 36px;
border-radius: 10px;
display: grid; place-items: center;
background: rgba(10, 171, 251, 0.10);
border: 1px solid rgba(10, 171, 251, 0.22);
color: var(--c-blue);
margin-bottom: 18px;
transition: transform 0.3s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.glass:hover .feat-icon {
background: rgba(23, 240, 152, 0.10);
border-color: rgba(23, 240, 152, 0.3);
color: var(--c-green);
}
.feat-icon svg { width: 18px; height: 18px; }
.glass h3 { margin-bottom: 10px; }
.glass p { color: var(--fg-3); font-size: 14px; line-height: 1.55; }
/* Phase cards (Discover / Decide / Defend) */
.phase {
position: relative;
padding: 28px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--line-1);
overflow: hidden;
}
.phase .num {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.14em;
color: var(--fg-4);
margin-bottom: 18px;
}
.phase h3 { font-size: 28px; margin-bottom: 10px; letter-spacing: -0.035em; }
.phase p { color: var(--fg-3); font-size: 14px; line-height: 1.55; margin-bottom: 22px; }
.phase ul { list-style: none; padding: 0; margin: 0; }
.phase li {
padding: 10px 0;
font-size: 13px;
color: var(--fg-2);
display: flex;
gap: 10px;
border-top: 1px dashed var(--line);
font-family: var(--font-mono);
letter-spacing: 0.01em;
}
.phase li::before { content: "→"; color: var(--c-green); }
.phase.is-mid {
border-color: rgba(23, 240, 152, 0.32);
background:
radial-gradient(ellipse at top, rgba(23, 240, 152, 0.10), transparent 60%),
rgba(255, 255, 255, 0.025);
box-shadow: 0 0 0 1px rgba(23, 240, 152, 0.12), 0 22px 60px rgba(10, 171, 251, 0.10);
}
.phase.is-mid::after {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: var(--grad-h);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0.3;
pointer-events: none;
}
/* ─── Comparison table ──────────────────────────── */
.cmp {
border: 1px solid var(--line-1);
border-radius: 16px;
overflow: hidden;
background: rgba(255, 255, 255, 0.02);
}
.cmp table { width: 100%; border-collapse: collapse; }
.cmp th, .cmp td { padding: 18px 24px; text-align: left; vertical-align: middle; }
.cmp thead th {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 500;
color: var(--fg-4);
border-bottom: 1px solid var(--line);
}
.cmp thead th.us {
color: var(--fg);
text-align: center;
background: linear-gradient(180deg, rgba(23, 240, 152, 0.06), transparent);
}
.cmp thead th.them { color: var(--fg-3); text-align: center; }
.cmp tbody tr { border-top: 1px solid var(--line); }
.cmp tbody td.cap { color: var(--fg); font-weight: 500; font-size: 14px; }
.cmp tbody td.us { text-align: center; font-family: var(--font-mono); font-size: 12.5px; color: var(--c-green); }
.cmp tbody td.them { text-align: center; font-family: var(--font-mono); font-size: 12.5px; color: var(--fg-4); }
/* ─── Big "Trusted Today" block ─────────────────── */
.proven {
position: relative;
border-radius: 24px;
border: 1px solid var(--line-1);
background:
radial-gradient(ellipse at 80% 20%, rgba(10, 171, 251, 0.12), transparent 60%),
radial-gradient(ellipse at 10% 80%, rgba(23, 240, 152, 0.08), transparent 60%),
rgba(255, 255, 255, 0.02);
padding: 64px;
overflow: hidden;
}
.proven::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
background-size: 22px 22px;
mask-image: radial-gradient(ellipse 80% 60% at 80% 50%, #000, transparent 80%);
opacity: 0.6;
}
.proven-grid {
position: relative;
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 56px;
align-items: end;
}
.proven h2 {
font-size: clamp(40px, 4.4vw, 64px);
letter-spacing: -0.04em;
}
.proven .copy { color: var(--fg-2); margin-top: 18px; max-width: 50ch; }
.proven-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.proven-stat {
border: 1px solid var(--line-1);
border-radius: 14px;
padding: 22px;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(8px);
}
.proven-stat .n {
font-size: 44px;
letter-spacing: -0.04em;
font-weight: 600;
background: var(--grad-h);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
line-height: 1;
}
.proven-stat .l {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--fg-4);
margin-top: 10px;
display: block;
}
/* ─── FAQ ────────────────────────────────────────── */
.faq {
display: flex;
flex-direction: column;
gap: 8px;
max-width: 920px;
margin: 0 auto;
}
.faq details {
border: 1px solid var(--line-1);
background: rgba(255, 255, 255, 0.02);
border-radius: 14px;
overflow: hidden;
transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.faq details[open] {
border-color: rgba(10, 171, 251, 0.32);
background: rgba(255, 255, 255, 0.035);
}
.faq summary {
list-style: none;
cursor: pointer;
padding: 22px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
font-size: 15.5px;
font-weight: 500;
letter-spacing: -0.012em;
color: var(--fg);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: "";
width: 12px; height: 12px;
background:
linear-gradient(currentColor, currentColor) center/100% 1.5px no-repeat,
linear-gradient(currentColor, currentColor) center/1.5px 100% no-repeat;
transition: transform 0.25s var(--ease);
color: var(--fg-3);
flex: none;
}
.faq details[open] summary::after {
transform: rotate(45deg);
background: linear-gradient(currentColor, currentColor) center/100% 1.5px no-repeat;
color: var(--c-green);
}
.faq .body {
padding: 0 26px 24px;
color: var(--fg-2);
font-size: 14.5px;
line-height: 1.65;
max-width: 78ch;
animation: fadeUp 0.3s var(--ease);
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
/* ─── Footer CTA + Footer ────────────────────────── */
.cta {
position: relative;
border-radius: 24px;
border: 1px solid var(--line-1);
background:
radial-gradient(ellipse at 50% 0%, rgba(10, 171, 251, 0.18), transparent 60%),
rgba(255, 255, 255, 0.02);
padding: 96px 32px;
text-align: center;
overflow: hidden;
}
.cta::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
background-size: 22px 22px;
mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000, transparent 80%);
}
.cta h2 {
position: relative;
font-size: clamp(40px, 5.4vw, 80px);
letter-spacing: -0.04em;
line-height: 0.95;
}
.cta p { position: relative; color: var(--fg-2); margin-top: 20px; font-size: 17px; }
.cta .actions { position: relative; margin-top: 36px; display: inline-flex; gap: 12px; }
.foot {
margin-top: 64px;
padding: 40px 0 56px;
border-top: 1px solid var(--line);
}
.foot-inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 28px;
flex-wrap: wrap;
}
.foot-brand img { height: 36px; opacity: 0.85; }
.foot-links {
display: flex;
gap: 24px;
}
.foot-links a {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--fg-3);
transition: color 0.2s var(--ease);
}
.foot-links a:hover { color: var(--c-green); }
.foot .copy {
font-family: var(--font-mono);
font-size: 11px;
color: var(--fg-4);
}
/* ─── Sub-hero (interior pages) ─────────────────── */
.subhero {
padding-block: 100px 60px;
position: relative;
}
.subhero h1 {
font-size: clamp(40px, 5vw, 72px);
letter-spacing: -0.04em;
line-height: 0.96;
max-width: 14ch;
margin-top: 18px;
}
.subhero .lede { margin-top: 24px; }
/* ─── Spec table ─────────────────────────────────── */
.spec {
border: 1px solid var(--line-1);
border-radius: 16px;
overflow: hidden;
background: rgba(255, 255, 255, 0.02);
}
.spec table { width: 100%; border-collapse: collapse; }
.spec td { padding: 16px 22px; font-size: 14px; }
.spec tr { border-top: 1px solid var(--line); }
.spec tr:first-child { border-top: none; }
.spec td.k {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--fg-4);
width: 40%;
}
.spec td.v {
text-align: right;
font-family: var(--font-mono);
font-size: 12.5px;
color: var(--fg);
}
/* ─── Sys chips ──────────────────────────────────── */
.sys-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.sys-chip {
padding: 12px 16px;
border-radius: 10px;
border: 1px solid var(--line-1);
background: rgba(255, 255, 255, 0.02);
font-size: 13.5px;
color: var(--fg-2);
transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
}
.sys-chip:hover { border-color: var(--line-2); color: var(--fg); }
/* ─── Cert grid (compliance) ────────────────────── */
.cert-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.cert {
position: relative;
border: 1px solid var(--line-1);
background: rgba(255, 255, 255, 0.025);
border-radius: 14px;
padding: 22px;
text-align: center;
transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.cert:hover { border-color: var(--line-2); transform: translateY(-2px); }
.cert .b {
width: 36px; height: 36px; border-radius: 50%;
background: rgba(10, 171, 251, 0.1);
border: 1px solid rgba(10, 171, 251, 0.22);
color: var(--c-blue);
display: grid; place-items: center;
margin: 0 auto 14px;
}
.cert .name { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; }
.cert .sub {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--fg-4);
margin-top: 6px;
}
/* ─── Compliance cards ──────────────────────────── */
.comp-card {
border: 1px solid var(--line-1);
background: rgba(255, 255, 255, 0.02);
border-radius: 14px;
padding: 26px;
}
.comp-card .head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 12px; }
.comp-card h3 { font-size: 20px; }
.comp-card .status {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
background: rgba(23, 240, 152, 0.10);
color: var(--c-green);
border: 1px solid rgba(23, 240, 152, 0.25);
white-space: nowrap;
}
.comp-card p { color: var(--fg-3); font-size: 13.5px; line-height: 1.55; }
/* ─── Team / About ──────────────────────────────── */
.team-card {
border: 1px solid var(--line-1);
background: rgba(255, 255, 255, 0.025);
border-radius: 16px;
padding: 32px;
text-align: center;
}
.team-card .av {
width: 64px; height: 64px;
border-radius: 50%;
margin: 0 auto 16px;
display: grid; place-items: center;
background: var(--grad-h);
color: #02110a;
font-weight: 700;
font-size: 16px;
letter-spacing: 0.06em;
box-shadow: 0 0 0 4px rgba(23, 240, 152, 0.08), 0 0 28px rgba(23, 240, 152, 0.18);
}
.team-card h3 { font-size: 19px; }
.team-card .role {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--c-green);
margin: 6px 0 14px;
}
.team-card p { color: var(--fg-3); font-size: 13.5px; line-height: 1.55; }
.team-card .edu { color: var(--fg-4); font-size: 12px; margin-top: 10px; font-style: italic; }
/* About stats */
.about-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.about-stat {
border: 1px solid var(--line-1);
background: rgba(255, 255, 255, 0.02);
border-radius: 14px;
padding: 28px;
}
.about-stat .n {
font-size: 48px;
letter-spacing: -0.04em;
font-weight: 600;
background: var(--grad-h);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
line-height: 1;
}
.about-stat .l {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--fg-4);
margin-top: 10px;
display: block;
}
/* Timeline */
.tl { position: relative; max-width: 760px; margin: 0 auto; }
.tl::before {
content: ""; position: absolute;
left: 80px; top: 4px; bottom: 4px;
width: 1px; background: var(--line);
}
.tl-item {
display: grid;
grid-template-columns: 100px 1fr;
gap: 28px;
padding: 16px 0;
position: relative;
}
.tl-item::before {
content: "";
position: absolute;
left: 76px; top: 24px;
width: 9px; height: 9px;
border-radius: 50%;
background: var(--c-green);
box-shadow: 0 0 0 4px rgba(23, 240, 152, 0.16), 0 0 18px rgba(23, 240, 152, 0.45);
}
.tl-year { font-family: var(--font-mono); font-size: 13px; color: var(--c-blue); letter-spacing: 0.04em; padding-top: 4px; }
.tl-body { border: 1px solid var(--line-1); background: rgba(255, 255, 255, 0.02); border-radius: 12px; padding: 18px 22px; }
.tl-body h3 { font-size: 16px; }
.tl-body p { color: var(--fg-3); font-size: 13.5px; line-height: 1.55; margin-top: 4px; }
/* Values */
.value {
border: 1px solid var(--line-1);
background: rgba(255, 255, 255, 0.02);
border-radius: 14px;
padding: 26px;
}
.value h3 { font-size: 16px; margin-bottom: 8px; }
.value p { color: var(--fg-3); font-size: 13.5px; line-height: 1.55; }
/* ─── Form ───────────────────────────────────────── */
.form-card {
max-width: 720px;
margin: 0 auto;
border: 1px solid var(--line-1);
background: rgba(255, 255, 255, 0.025);
border-radius: 20px;
padding: 40px;
backdrop-filter: blur(12px);
}
.field { display: grid; gap: 8px; margin-bottom: 20px; }
.field label { font-size: 13px; color: var(--fg-2); font-weight: 500; }
.field input, .field textarea, .field select {
background: rgba(0, 0, 0, 0.4);
border: 1px solid var(--line-1);
color: var(--fg);
padding: 12px 14px;
border-radius: 10px;
font: inherit;
font-size: 14px;
outline: none;
transition: border-color 0.2s, background 0.2s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--fg-4); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--c-green); background: rgba(0, 0, 0, 0.55); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 4px; }
.check { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: var(--fg-2); cursor: pointer; }
.check input { accent-color: var(--c-green); }
/* Contact tiles */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.contact-tile {
border: 1px solid var(--line-1);
background: rgba(255, 255, 255, 0.02);
border-radius: 14px;
padding: 28px;
text-align: center;
}
.contact-tile .ic {
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(10, 171, 251, 0.10);
border: 1px solid rgba(10, 171, 251, 0.25);
display: grid; place-items: center;
margin: 0 auto 14px;
color: var(--c-blue);
}
.contact-tile h3 { font-size: 16px; }
.contact-tile p { color: var(--fg-3); margin-top: 6px; font-size: 14px; }
/* ─── Responsive ─────────────────────────────────── */
@media (max-width: 980px) {
.hero-grid { grid-template-columns: 1fr; gap: 48px; }
.scanner { width: 100%; max-width: 480px; margin: 0 auto; }
.proven { padding: 40px 28px; }
.proven-grid { grid-template-columns: 1fr; gap: 28px; }
.grid-3, .grid-2, .grid-4, .cert-grid, .sys-grid, .check-grid, .contact-grid, .about-stats { grid-template-columns: 1fr; }
.cert-grid { grid-template-columns: repeat(2, 1fr); }
.field-row { grid-template-columns: 1fr; }
.tl::before { left: 4px; }
.tl-item { grid-template-columns: 1fr; gap: 8px; padding-left: 24px; }
.tl-item::before { left: 0; top: 8px; }
}
@media (max-width: 640px) {
.section-pad { padding-block: 80px; }
.shell { padding: 0 20px; }
.form-card { padding: 24px; }
}
/* ─────────────────────────────────────────────────
MICRO-ANIMATIONS
────────────────────────────────────────────── */
/* 1. Spotlight glow on glass cards (cursor-tracked) */
.glass { --mx: 50%; --my: 50%; }
.glass::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(
220px circle at var(--mx) var(--my),
rgba(23, 240, 152, 0.10),
rgba(10, 171, 251, 0.06) 35%,
transparent 60%
);
opacity: 0;
transition: opacity 0.25s var(--ease);
pointer-events: none;
z-index: 0;
}
.glass:hover::after { opacity: 1; }
.glass > * { position: relative; z-index: 1; }
/* 3. Packet trails (SVG overlay inside .scanner) */
.scanner-trails {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.scanner-trails line {
stroke: url(#trail-grad);
stroke-width: 1;
stroke-dasharray: 4 4;
opacity: 0;
}
.scanner-trails .trail-dot {
fill: var(--c-green);
filter: drop-shadow(0 0 6px rgba(23, 240, 152, 0.8));
r: 2.5;
opacity: 0;
}
/* 5. Telemetry ticker — already shaped; this stabilizes column widths so
numbers don't jitter as they tick. */
.scanner-meta span:not(.live) {
font-variant-numeric: tabular-nums;
min-width: 5.5ch;
}
/* 6. Section reveal on scroll */
.reveal {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }
.reveal-stagger > * {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 80ms; opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 160ms; opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 240ms; opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 320ms; opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(n+6) { transition-delay: 400ms; opacity: 1; transform: none; }
/* 10. H1 word-by-word reveal */
.h1-anim .w {
display: inline-block;
opacity: 0;
transform: translateY(0.35em);
filter: blur(6px);
animation: wordIn 0.7s var(--ease) forwards;
}
.h1-anim .w.br { display: block; height: 0; }
@keyframes wordIn {
to { opacity: 1; transform: none; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
.reveal, .reveal-stagger > *, .h1-anim .w { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; transition: none !important; }
}
/* ─────────────────────────────────────────────────
v3 ADDITIONS — Problem · Compliance strip · Tight FAQ
────────────────────────────────────────────── */
/* Problem section — uses amber/warning tone to differentiate from brand */
.problem {
position: relative;
border-radius: 24px;
border: 1px solid var(--line-1);
background:
radial-gradient(ellipse at 0% 0%, rgba(255, 138, 76, 0.06), transparent 60%),
radial-gradient(ellipse at 100% 100%, rgba(10, 171, 251, 0.06), transparent 60%),
rgba(255, 255, 255, 0.02);
padding: 64px;
overflow: hidden;
}
.problem::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
background-size: 40px 40px;
mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000, transparent 80%);
opacity: 0.6;
pointer-events: none;
}
.problem-grid {
position: relative;
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 56px;
align-items: center;
}
.problem h2 {
font-size: clamp(34px, 4vw, 56px);
letter-spacing: -0.04em;
}
.problem h2 .strike {
position: relative;
color: var(--fg-3);
}
.problem h2 .strike::after {
content: "";
position: absolute;
left: -2%; right: -2%;
top: 54%;
height: 2px;
background: linear-gradient(90deg, rgba(255, 138, 76, 0), rgba(255, 138, 76, 0.8) 30%, rgba(255, 138, 76, 0.8) 70%, rgba(255, 138, 76, 0));
transform: rotate(-2deg);
}
.problem .copy { color: var(--fg-2); margin-top: 18px; max-width: 50ch; }
.gap-rows { display: grid; gap: 10px; }
.gap-row {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 18px;
padding: 18px 22px;
border: 1px solid var(--line-1);
border-radius: 14px;
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(6px);
align-items: center;
}
.gap-row .legacy {
font-family: var(--font-mono);
font-size: 12.5px;
letter-spacing: 0.04em;
color: rgba(255, 138, 76, 0.85);
text-align: right;
}
.gap-row .legacy::before { content: "✗ "; opacity: 0.7; }
.gap-row .arrow {
width: 18px; height: 1px;
background: linear-gradient(90deg, rgba(255, 138, 76, 0.5), rgba(23, 240, 152, 0.5));
position: relative;
}
.gap-row .arrow::after {
content: "";
position: absolute;
right: -2px; top: -3px;
width: 0; height: 0;
border-left: 5px solid rgba(23, 240, 152, 0.7);
border-top: 3.5px solid transparent;
border-bottom: 3.5px solid transparent;
}
.gap-row .us {
font-family: var(--font-mono);
font-size: 12.5px;
letter-spacing: 0.04em;
color: var(--c-green);
}
.gap-row .us::before { content: "✓ "; opacity: 0.8; }
/* Compliance summary strip — replaces giant grid */
.compliance-strip {
position: relative;
border: 1px solid var(--line-1);
border-radius: 20px;
padding: 36px 40px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.005));
display: grid;
grid-template-columns: minmax(220px, 1fr) 2fr;
gap: 40px;
align-items: center;
}
.compliance-strip .lead { color: var(--fg-2); }
.compliance-strip .lead h3 { font-size: 22px; margin-bottom: 8px; }
.compliance-strip .lead p { font-size: 14px; color: var(--fg-3); line-height: 1.55; }
.compliance-rail {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
border-left: 1px solid var(--line);
padding-left: 32px;
}
.compliance-rail .badge {
text-align: left;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.compliance-rail .badge .name {
color: var(--fg);
font-size: 12.5px;
letter-spacing: -0.01em;
font-family: var(--font-sans);
font-weight: 500;
text-transform: none;
display: block;
}
.compliance-rail .badge .meta {
color: var(--c-green);
display: block;
margin-top: 4px;
font-size: 9.5px;
letter-spacing: 0.12em;
}
.see-more {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 28px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--c-green);
transition: gap 0.2s var(--ease);
}
.see-more:hover { gap: 14px; }
.see-more::after {
content: "→";
display: inline-block;
}
@media (max-width: 980px) {
.problem { padding: 36px 28px; }
.problem-grid { grid-template-columns: 1fr; gap: 32px; }
.compliance-strip { grid-template-columns: 1fr; padding: 28px; gap: 24px; }
.compliance-rail { grid-template-columns: repeat(2, 1fr); border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 20px; }
}
/* ═══════════════════════════════════════════════════════════
v4 — MATTE · RESTRAINED · SCROLL-NATIVE
Goal: trade neon-glass aesthetic for editorial matte ink.
- warm off-blacks, no blur, faint noise texture
- gradient only on: logo · primary CTA · single hero accent
- scroll-progress bar + reveal anchored to scroll position
═══════════════════════════════════════════════════════════ */
:root {
/* Warm matte surfaces */
--bg: #0c0c0e;
--bg-paper: #111114;
--bg-elev: #16161a;
/* Lines — slightly stronger so they read on matte */
--line: rgba(255, 255, 255, 0.06);
--line-1: rgba(255, 255, 255, 0.10);
--line-2: rgba(255, 255, 255, 0.16);
/* Text — warm white */
--fg: #f4f3f0;
--fg-2: rgba(244, 243, 240, 0.72);
--fg-3: rgba(244, 243, 240, 0.5);
--fg-4: rgba(244, 243, 240, 0.32);
--fg-5: rgba(244, 243, 240, 0.16);
/* Brand stays defined, but we ration its use */
--c-green: #17e08a;
--c-blue: #0aabfb;
}
/* Background: warm matte + procedural noise (replaces grid + dual-bloom) */
.bg-fx { z-index: 0; }
.bg-fx::before {
background-image: none;
mask-image: none;
background:
radial-gradient(ellipse 100% 60% at 50% 0%, rgba(255, 255, 255, 0.022), transparent 70%),
radial-gradient(ellipse 50% 30% at 50% 100%, rgba(10, 171, 251, 0.025), transparent 70%);
}
.bg-fx::after {
width: auto; height: auto;
inset: 0;
transform: none;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 220px 220px;
opacity: 0.035;
mix-blend-mode: overlay;
filter: none;
}
/* Glow tokens — drastically dampened */
.glow-l, .glow-r { display: none; }
/* Nav: matte ink, no blur halo */
.nav-pill {
background: rgba(20, 20, 24, 0.85);
border-color: var(--line-1);
backdrop-filter: blur(8px) saturate(120%);
-webkit-backdrop-filter: blur(8px) saturate(120%);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.04) inset,
0 12px 32px rgba(0, 0, 0, 0.4);
}
/* Cards: matte paper, no blur, subtle elevation */
.glass {
background: rgba(255, 255, 255, 0.025);
border-color: var(--line-1);
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-radius: 12px;
}
.glass::before { display: none; }
.glass:hover {
background: rgba(255, 255, 255, 0.04);
border-color: var(--line-2);
}
/* ─── Color restraint ─── */
/* Headings, eyebrow, lede default to monochrome — opt into gradient with .accent only */
.section-head h2 .grad-text,
.section-head h2 > span.grad-text,
.proven h2 .grad-text,
.cta h2 .grad-text,
.compliance-strip h3 .grad-text {
background: none;
-webkit-background-clip: initial;
background-clip: initial;
color: var(--fg);
}
/* …but a small set still get the gradient: the hero accent + logo + CTA button (handled below) */
.hero h1 .accent,
.hero h1 .accent-2 {
background: linear-gradient(135deg, var(--c-blue) 0%, var(--c-green) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Status badges — green tone, no gradient */
.compliance-rail .badge .meta { color: var(--c-green); }
.comp-card .status,
.faq details[open] { border-color: rgba(23, 224, 138, 0.28); }
.comp-card .status {
background: rgba(23, 224, 138, 0.08);
color: var(--c-green);
border: 1px solid rgba(23, 224, 138, 0.22);
}
/* Chip, kill brand color in dot; keep semantic */
.chip {
background: rgba(255, 255, 255, 0.04);
border-color: var(--line-1);
}
.chip .dot {
background: var(--c-green);
box-shadow: 0 0 0 3px rgba(23, 224, 138, 0.12), 0 0 12px rgba(23, 224, 138, 0.5);
}
/* Auto-inject a glowing dot on every .chip that doesn't already have one.
:has() check keeps existing markup working
without doubling up the dot. */
.chip:not(:has(> .dot))::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
flex: none;
background: var(--c-green);
box-shadow: 0 0 0 3px rgba(23, 224, 138, 0.12), 0 0 12px rgba(23, 224, 138, 0.5);
animation: pulse 2.4s ease-in-out infinite;
}
/* Buttons */
.btn-primary {
background: linear-gradient(135deg, var(--c-blue) 0%, var(--c-green) 100%);
color: #04140a;
font-weight: 600;
box-shadow: 0 0 0 1px rgba(23, 224, 138, 0.32) inset, 0 6px 22px rgba(10, 171, 251, 0.18);
}
.btn-primary:hover {
box-shadow: 0 0 0 1px rgba(23, 224, 138, 0.46) inset, 0 10px 30px rgba(10, 171, 251, 0.28);
}
.btn-ghost {
background: rgba(255, 255, 255, 0.03);
border-color: var(--line-1);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--line-2); }
/* Phase card — middle one stays distinguished but with matte not glow */
.phase.is-mid {
background:
linear-gradient(180deg, rgba(23, 224, 138, 0.05), rgba(23, 224, 138, 0.01));
border-color: rgba(23, 224, 138, 0.28);
box-shadow: none;
}
.phase.is-mid::after { display: none; }
/* Proven block — softer */
.proven {
background:
radial-gradient(ellipse at 100% 0%, rgba(10, 171, 251, 0.06), transparent 60%),
rgba(255, 255, 255, 0.018);
border-color: var(--line-1);
}
.proven::before { display: none; }
.proven-stat {
background: rgba(255, 255, 255, 0.02);
backdrop-filter: none;
}
.proven-stat .n {
background: none;
-webkit-background-clip: initial;
background-clip: initial;
color: var(--fg);
}
/* About stat — monochrome number */
.about-stat .n,
.team-card .av {
background: linear-gradient(135deg, var(--c-blue), var(--c-green));
}
.about-stat .n {
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.team-card .av { color: #04140a; }
/* CTA block — softer */
.cta {
background:
radial-gradient(ellipse at 50% 0%, rgba(10, 171, 251, 0.10), transparent 60%),
rgba(255, 255, 255, 0.018);
border-color: var(--line-1);
}
.cta::before {
background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
opacity: 0.4;
}
/* Compliance strip — matte */
.compliance-strip {
background: rgba(255, 255, 255, 0.015);
border-color: var(--line-1);
}
/* Comparison + spec tables */
.cmp, .spec { background: rgba(255, 255, 255, 0.018); border-color: var(--line-1); }
.cmp thead th.us {
background: linear-gradient(180deg, rgba(23, 224, 138, 0.04), transparent);
}
.cmp tbody td.us { color: var(--c-green); }
/* Selection color — brand-touched */
::selection {
background: rgba(23, 224, 138, 0.28);
color: var(--fg);
}
/* .em — drop-in replacement for the old .grad-text on body copy.
Monochrome emphasis; lets only the hero .accent retain the gradient. */
.em { color: var(--fg); }
/* ─── Scroll-tied motion ─── */
.scroll-progress {
position: fixed;
top: 0; left: 0;
height: 4px;
width: 0;
background: linear-gradient(90deg, var(--c-blue), var(--c-green));
z-index: 100;
transition: width 0.05s linear;
pointer-events: none;
box-shadow: 0 1px 6px rgba(23, 240, 152, 0.25);
}
/* Hero scroll parallax — uses CSS vars set by JS */
.hero {
--sy: 0; /* 0 → 1 as user scrolls through first 80vh */
}
.hero h1 {
transform: translateY(calc(var(--sy) * -28px));
opacity: calc(1 - var(--sy) * 0.85);
transition: none;
will-change: transform, opacity;
}
.hero .lede,
.hero .chip,
.hero-cta {
transform: translateY(calc(var(--sy) * -16px));
opacity: calc(1 - var(--sy) * 0.85);
will-change: transform, opacity;
}
.hero .netviz {
transform: translateY(calc(var(--sy) * -20px)) scale(calc(1 - var(--sy) * 0.04));
opacity: calc(1 - var(--sy) * 0.6);
will-change: transform, opacity;
}
/* Phase cards — activate in sequence as section enters */
.phase-row, .grid-3 { perspective: 1200px; }
.phase {
transition:
transform 0.5s var(--ease),
box-shadow 0.5s var(--ease),
border-color 0.5s var(--ease),
background 0.5s var(--ease);
}
.phase.is-active {
border-color: rgba(23, 224, 138, 0.22);
background: rgba(23, 224, 138, 0.025);
}
.phase.is-active.is-mid {
border-color: rgba(23, 224, 138, 0.36);
}
/* Section enter — already exists via .reveal-stagger; refine the easing */
.reveal-stagger > * { transition-duration: 0.7s; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 160ms;}
.reveal-stagger.in > *:nth-child(4) { transition-delay: 240ms;}
.reveal-stagger.in > *:nth-child(5) { transition-delay: 320ms;}
.reveal-stagger.in > *:nth-child(6) { transition-delay: 400ms;}
.reveal-stagger.in > *:nth-child(7) { transition-delay: 480ms;}
.reveal-stagger.in > *:nth-child(8) { transition-delay: 560ms;}
/* ─────────────────────────────────────────────────
May-2026 Website Review pass — added sections
────────────────────────────────────────────── */
/* Sample customer / partner logo wall (replaces old trust-strip) */
.logo-wall {
padding: 56px 0 24px;
position: relative;
z-index: 1;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background:
radial-gradient(ellipse 70% 100% at 50% 0%, rgba(10, 171, 251, 0.04), transparent 70%),
rgba(255, 255, 255, 0.012);
}
.logo-wall-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 28px;
}
.logo-wall-head p {
font-size: 13px;
color: var(--fg-3);
max-width: 60ch;
line-height: 1.5;
}
.logo-row {
display: grid;
grid-template-columns: repeat(10, minmax(0, 1fr));
gap: 14px;
align-items: stretch;
}
.logo-cell {
display: flex;
align-items: center;
justify-content: center;
padding: 18px 14px;
height: 96px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
background: rgba(255, 255, 255, 0.055);
transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
}
.logo-cell img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
filter: saturate(0.9) brightness(1.05) drop-shadow(0 0 1px rgba(255,255,255,0.35));
opacity: 0.9;
transition: filter 0.25s var(--ease), opacity 0.25s var(--ease);
}
.logo-cell:hover {
border-color: rgba(23, 240, 152, 0.32);
background: rgba(255, 255, 255, 0.1);
transform: translateY(-2px);
}
.logo-cell:hover img {
filter: saturate(1) brightness(1.1) drop-shadow(0 0 1.5px rgba(255,255,255,0.5));
opacity: 1;
}
/* Marquee carousel — slow infinite scroll. Logos sit on near-white cards
so dark/multicolored official seals stay readable on the dark page. */
.logo-marquee {
position: relative;
overflow: hidden;
/* Soft fade-in on left/right edges so logos don't pop in/out abruptly */
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.logo-track {
display: flex;
gap: 18px;
width: max-content;
animation: logo-scroll 80s linear infinite;
will-change: transform;
}
.logo-marquee:hover .logo-track,
.logo-marquee:focus-within .logo-track { animation-play-state: paused; }
@keyframes logo-scroll {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(calc(-50% - 9px), 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
.logo-track { animation: none; }
}
/* Marquee cell — dark translucent card (matches site vibe) with a soft
white "puck" backdrop centered behind the logo, so colorful seals
and white-circle variants both stay legible on the dark page. */
.logo-marquee .logo-cell {
flex: 0 0 auto;
width: 190px;
height: 155px;
padding: 0;
position: relative;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
overflow: hidden;
}
.logo-marquee .logo-cell::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 132px;
height: 132px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: radial-gradient(circle, rgba(245, 246, 247, 0.94) 0%, rgba(245, 246, 247, 0.9) 72%, rgba(245, 246, 247, 0.0) 100%);
z-index: 0;
}
.logo-marquee .logo-cell img {
position: relative;
z-index: 1;
width: 120px;
height: 120px;
max-width: 120px;
max-height: 120px;
object-fit: contain;
filter: none;
opacity: 1;
}
.logo-marquee .logo-cell:hover {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(23, 240, 152, 0.32);
transform: none;
}
.logo-marquee .logo-cell:hover img { filter: none; opacity: 1; }
/* Per-logo size tuning — small wordmarks need more room, dense badges less. */
.logo-marquee .logo-cell img[src*="minose"] {
width: 124px;
height: 124px;
max-width: 124px;
max-height: 124px;
}
.logo-marquee .logo-cell img[src*="isletechnica"] {
width: 110px;
height: 110px;
max-width: 110px;
max-height: 110px;
}
.logo-marquee .logo-cell img[src*="rcaf"] {
width: 96px;
height: 96px;
max-width: 96px;
max-height: 96px;
}
/* Use-case cards (3-up, carousel-ready) */
.usecases {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 8px;
}
.usecase {
position: relative;
display: flex;
flex-direction: column;
gap: 16px;
padding: 28px;
border: 1px solid var(--line-1);
border-radius: 18px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.005));
transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), background 0.25s var(--ease);
overflow: hidden;
isolation: isolate;
}
.usecase::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(10, 171, 251, 0.10), transparent 70%);
opacity: 0;
transition: opacity 0.3s var(--ease);
pointer-events: none;
z-index: -1;
}
.usecase:hover {
transform: translateY(-3px);
border-color: rgba(23, 240, 152, 0.32);
}
.usecase:hover::before { opacity: 1; }
.usecase.is-mid::before { opacity: 0.55; }
.usecase .uc-tag {
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--c-green);
align-self: flex-start;
padding: 5px 10px;
border-radius: 999px;
border: 1px solid rgba(23, 240, 152, 0.28);
background: rgba(23, 240, 152, 0.06);
}
.usecase h3 {
font-size: 22px;
line-height: 1.15;
letter-spacing: -0.025em;
}
.usecase p {
font-size: 14.5px;
color: var(--fg-2);
line-height: 1.55;
}
.uc-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
font-size: 13px;
color: var(--fg-3);
border-top: 1px solid var(--line);
padding-top: 16px;
margin-top: auto;
}
.uc-list li {
position: relative;
padding-left: 18px;
line-height: 1.45;
}
.uc-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 8px;
height: 1px;
background: var(--c-green);
}
.usecases-note {
margin-top: 24px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--fg-4);
text-align: center;
}
/* Stat count-up — start state */
[data-countup] {
display: inline-block;
background: var(--grad-h);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
background-size: 200% auto;
background-position: 0% center;
transition: background-position 1.2s var(--ease);
}
[data-countup].is-counting {
background-position: 100% center;
}
/* Comparison table — product page */
.compare {
position: relative;
border: 1px solid var(--line-1);
border-radius: 18px;
overflow: hidden;
background: rgba(255, 255, 255, 0.015);
}
.compare-row {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
align-items: stretch;
}
.compare-row + .compare-row { border-top: 1px solid var(--line); }
.compare-cell {
padding: 18px 22px;
font-size: 14px;
color: var(--fg-2);
line-height: 1.5;
}
.compare-cell.feat {
font-weight: 500;
color: var(--fg);
background: rgba(255, 255, 255, 0.022);
border-right: 1px solid var(--line);
}
.compare-cell.toto {
background: rgba(23, 240, 152, 0.04);
border-left: 1px solid rgba(23, 240, 152, 0.12);
}
.compare-row.head .compare-cell {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--fg-4);
padding: 16px 22px;
}
.compare-row.head .compare-cell.toto {
color: var(--c-green);
}
.tick { color: var(--c-green); font-weight: 600; }
.cross { color: rgba(255, 91, 110, 0.85); }
.partial { color: #ffb547; }
/* "How it works / Why TOTO-L" foundation explainer */
.foundation {
position: relative;
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 56px;
align-items: center;
padding: 56px;
border: 1px solid var(--line-1);
border-radius: 24px;
background:
radial-gradient(ellipse at 100% 0%, rgba(10, 171, 251, 0.06), transparent 60%),
rgba(255, 255, 255, 0.018);
overflow: hidden;
}
.foundation h2 { font-size: clamp(34px, 3.6vw, 52px); }
.foundation .copy { color: var(--fg-2); margin-top: 20px; line-height: 1.6; font-size: 15.5px; }
.foundation .pull {
margin-top: 28px;
padding-left: 18px;
border-left: 2px solid var(--c-green);
color: var(--fg);
font-size: 18px;
line-height: 1.45;
font-style: italic;
letter-spacing: -0.01em;
}
.foundation .pull cite {
display: block;
margin-top: 10px;
font-style: normal;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--fg-4);
}
/* OSI stack visual */
.osi-stack {
display: flex;
flex-direction: column;
gap: 6px;
padding: 20px;
border-radius: 16px;
border: 1px solid var(--line);
background: rgba(5, 6, 7, 0.5);
}
.osi-layer {
display: grid;
grid-template-columns: 56px 1fr auto;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.022);
border: 1px solid var(--line);
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.04em;
color: var(--fg-3);
transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.osi-layer .lvl { font-weight: 600; color: var(--fg-4); }
.osi-layer .name { letter-spacing: 0.08em; text-transform: uppercase; }
.osi-layer .badge {
font-size: 10px;
letter-spacing: 0.08em;
padding: 3px 8px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
color: var(--fg-4);
}
.osi-layer.is-traditional {
border-color: rgba(255, 181, 71, 0.32);
background: rgba(255, 181, 71, 0.05);
color: var(--fg-2);
}
.osi-layer.is-traditional .badge { color: #ffb547; background: rgba(255, 181, 71, 0.08); }
.osi-layer.is-toto {
border-color: rgba(23, 240, 152, 0.4);
background: rgba(23, 240, 152, 0.06);
color: var(--fg);
}
.osi-layer.is-toto .lvl { color: var(--c-green); }
.osi-layer.is-toto .badge { color: var(--c-green); background: rgba(23, 240, 152, 0.10); }
/* Compliance grid — simplified name-only (product page) */
.cgrid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
.cgrid .cg {
display: flex;
align-items: center;
justify-content: center;
padding: 18px 14px;
border: 1px solid var(--line-1);
border-radius: 12px;
background: rgba(255, 255, 255, 0.018);
font-family: var(--font-mono);
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--fg);
text-align: center;
transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.cgrid .cg:hover {
border-color: rgba(23, 240, 152, 0.4);
background: rgba(23, 240, 152, 0.04);
}
/* Deployment matrix */
.deploy-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.deploy-card {
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px;
border: 1px solid var(--line-1);
border-radius: 14px;
background: rgba(255, 255, 255, 0.02);
}
.deploy-card .ic {
width: 32px; height: 32px;
display: grid; place-items: center;
border-radius: 8px;
background: rgba(23, 240, 152, 0.08);
color: var(--c-green);
}
.deploy-card .ic svg { width: 18px; height: 18px; }
.deploy-card h4 { font-size: 14.5px; }
.deploy-card p { font-size: 13px; color: var(--fg-3); line-height: 1.5; }
@media (max-width: 960px) {
.logo-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.usecases { grid-template-columns: 1fr; }
.foundation { grid-template-columns: 1fr; padding: 32px; gap: 32px; }
.cgrid { grid-template-columns: repeat(3, 1fr); }
.deploy-grid { grid-template-columns: repeat(2, 1fr); }
.compare-row { grid-template-columns: 1.4fr 1fr 1fr; font-size: 13px; }
}
@media (max-width: 640px) {
.logo-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.deploy-grid { grid-template-columns: 1fr; }
}
/* ─────────────────────────────────────────────────
FUI — Hero threat-topology viz (replaces .netviz internals)
"Glassmorphic Tactical": hairline geometry, hex grid,
micro-data callouts, single amber accent.
────────────────────────────────────────────── */
.netviz.fui {
background: linear-gradient(180deg, rgba(8,10,12,0.78), rgba(5,6,7,0.78));
border: 1px solid rgba(255,255,255,0.07);
box-shadow:
0 1px 0 rgba(255,255,255,0.03) inset,
0 30px 80px rgba(0,0,0,0.55),
0 0 0 1px rgba(255,255,255,0.018);
overflow: hidden;
}
/* Chrome ─ tactical header */
.fui-chrome {
display: flex;
align-items: center;
gap: 16px;
padding: 12px 16px;
border-bottom: 1px solid rgba(255,255,255,0.05);
background:
linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0));
font-family: var(--font-mono);
}
.fc-left { display: inline-flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.fc-pulse {
width: 6px; height: 6px; border-radius: 50%;
background: var(--c-green);
box-shadow: 0 0 0 3px rgba(23,240,152,0.16), 0 0 10px rgba(23,240,152,0.55);
animation: pulse 2.2s ease-in-out infinite;
flex: none;
}
.fc-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.22em;
color: var(--fg);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fc-label .fc-dim { color: var(--fg-4); font-weight: 500; margin-left: 8px; letter-spacing: 0.14em; }
.fc-tabs {
display: inline-flex;
gap: 2px;
padding: 2px;
background: rgba(255,255,255,0.018);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 6px;
}
.fc-tabs button {
appearance: none;
border: 0;
background: transparent;
font-family: var(--font-mono);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 4px;
color: var(--fg-4);
cursor: pointer;
transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.fc-tabs button:hover { color: var(--fg-2); }
.fc-tabs button.active {
color: var(--fg);
background: rgba(255,255,255,0.06);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07);
}
.fc-meta {
display: inline-flex;
gap: 12px;
font-size: 9.5px;
letter-spacing: 0.16em;
color: var(--fg-4);
align-items: center;
}
.fc-divider { width: 1px; height: 10px; background: rgba(255,255,255,0.1); }
/* Stage */
.fui-stage {
position: relative;
aspect-ratio: 16 / 11;
overflow: hidden;
background:
radial-gradient(ellipse 60% 80% at 50% 50%, rgba(10,171,251,0.05), transparent 65%),
rgba(4,5,7,0.9);
}
/* Faint hex grid */
.fui-hex {
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 60px 52px;
mask-image: radial-gradient(ellipse 90% 75% at center, #000 30%, transparent 90%);
-webkit-mask-image: radial-gradient(ellipse 90% 75% at center, #000 30%, transparent 90%);
pointer-events: none;
opacity: 0.85;
}
/* Corner reticles */
.fui-corners { position: absolute; inset: 14px; pointer-events: none; }
.fui-corners span {
position: absolute;
width: 12px;
height: 12px;
border-color: rgba(23,240,152,0.5);
border-style: solid;
border-width: 0;
}
.fui-corners span:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.fui-corners span:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.fui-corners span:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.fui-corners span:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
/* Center crosshair / reticle tick marks */
.fui-reticle {
position: absolute; inset: 0;
width: 100%; height: 100%;
pointer-events: none;
}
.fui-reticle line {
stroke: rgba(255,255,255,0.18);
stroke-width: 0.5;
vector-effect: non-scaling-stroke;
}
/* Connection lines — razor thin, segmented, flowing */
.fui-lines {
position: absolute; inset: 0;
width: 100%; height: 100%;
pointer-events: none;
}
.fui-lines .ln {
stroke: rgba(255,255,255,0.30);
stroke-width: 0.4;
vector-effect: non-scaling-stroke;
stroke-dasharray: 1.4 2.6;
stroke-linecap: round;
animation: fui-flow 8s linear infinite;
}
.fui-lines .ln-alert {
stroke: #ffb547;
stroke-width: 0.6;
stroke-dasharray: 0.8 2;
animation: fui-flow 1.8s linear infinite;
filter: drop-shadow(0 0 2px rgba(255,181,71,0.5));
}
@keyframes fui-flow {
to { stroke-dashoffset: -80; }
}
/* Nodes — hairline wireframe */
.fui-node {
position: absolute;
left: var(--x);
top: var(--y);
transform: translate(-50%, -50%);
z-index: 2;
}
.fn-ring {
width: 22px;
height: 22px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.55);
position: relative;
background: rgba(5,6,7,0.4);
transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.fn-ring::before {
content: "";
position: absolute;
left: 50%; top: 50%;
width: 3px; height: 3px;
border-radius: 50%;
background: rgba(255,255,255,0.7);
transform: translate(-50%, -50%);
}
.fn-ring::after {
/* outer ghost ring */
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.08);
}
/* Hub node — slightly larger, brighter dot */
.fui-node.fn-hub .fn-ring { width: 30px; height: 30px; border-color: rgba(255,255,255,0.75); }
.fui-node.fn-hub .fn-ring::before { width: 4px; height: 4px; background: #fff; box-shadow: 0 0 8px rgba(255,255,255,0.6); }
/* Warning node — amber + rotating scanning ring */
.fui-node.fn-warn .fn-ring {
border-color: #ffb547;
box-shadow: 0 0 14px rgba(255,181,71,0.25), inset 0 0 0 1px rgba(255,181,71,0.18);
}
.fui-node.fn-warn .fn-ring::before { background: #ffb547; box-shadow: 0 0 8px rgba(255,181,71,0.7); }
.fui-node.fn-warn .fn-ring::after { display: none; }
.fn-scan {
position: absolute;
inset: -8px;
border-radius: 50%;
border: 1px solid transparent;
border-top-color: #ffb547;
border-right-color: rgba(255,181,71,0.45);
animation: fui-scan 2.6s linear infinite;
}
.fn-scan::after {
content: "";
position: absolute;
inset: 3px;
border-radius: 50%;
border: 1px dashed rgba(255,181,71,0.22);
animation: fui-scan 6s linear infinite reverse;
}
@keyframes fui-scan { to { transform: rotate(360deg); } }
/* Callouts — micro data */
.fn-callout {
position: absolute;
left: calc(100% + 10px);
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 2px;
font-family: var(--font-mono);
white-space: nowrap;
pointer-events: none;
}
.fn-callout::before {
/* needle line to the node */
content: "";
position: absolute;
left: -8px;
top: 50%;
width: 6px;
height: 1px;
background: rgba(255,255,255,0.25);
}
.fn-callout.fn-left {
left: auto;
right: calc(100% + 10px);
align-items: flex-end;
}
.fn-callout.fn-left::before { left: auto; right: -8px; }
.fn-id {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.18em;
color: var(--fg);
}
.fn-meta {
font-size: 8.5px;
font-weight: 500;
letter-spacing: 0.18em;
color: var(--fg-4);
}
.fn-meta-warn { color: #ffb547; }
.fn-action {
font-size: 8.5px;
font-weight: 600;
letter-spacing: 0.22em;
color: #ffb547;
margin-top: 2px;
opacity: 0.85;
}
/* Warning node callout looks like a tactical popup */
.fn-callout.fn-popup {
background: rgba(10,12,14,0.92);
border: 1px solid rgba(255,181,71,0.4);
border-radius: 6px;
padding: 8px 10px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow:
0 0 0 1px rgba(255,181,71,0.08),
0 12px 24px rgba(0,0,0,0.6);
}
.fn-callout.fn-popup::before { background: #ffb547; width: 8px; }
/* Footer ─ telemetry */
.fui-foot {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 16px;
border-top: 1px solid rgba(255,255,255,0.05);
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: 0.18em;
color: var(--fg-4);
background: rgba(255,255,255,0.012);
}
.ff-live {
color: var(--c-green);
font-weight: 600;
letter-spacing: 0.22em;
}
.ff-cell { color: var(--fg-3); }
.ff-grow { flex: 1; }
/* Mobile fallback — keep callouts visible */
@media (max-width: 720px) {
.fui-chrome { padding: 10px 12px; gap: 10px; }
.fc-meta { display: none; }
.fn-callout { font-size: 7.5px; }
.fn-id { font-size: 8px; letter-spacing: 0.12em; }
.fn-meta { font-size: 7.5px; letter-spacing: 0.12em; }
}
/* ─────────────────────────────────────────────────
Tweaks panel
────────────────────────────────────────────── */
.tweaks-panel {
position: fixed;
right: 24px; bottom: 24px;
width: 320px;
max-height: calc(100vh - 48px);
display: flex;
flex-direction: column;
z-index: 200;
border-radius: 14px;
background: rgba(8, 10, 12, 0.92);
border: 1px solid rgba(255,255,255,0.08);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
box-shadow: 0 24px 64px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
font-family: var(--font-sans);
color: var(--fg);
opacity: 0;
pointer-events: none;
transform: translateY(8px);
transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.tweaks-panel.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.tweaks-panel .tp-head {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid rgba(255,255,255,0.06);
cursor: grab;
user-select: none;
}
.tweaks-panel .tp-head:active { cursor: grabbing; }
.tweaks-panel .tp-title {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--fg);
}
.tweaks-panel .tp-close {
appearance: none; background: none; border: 0;
font-size: 20px; line-height: 1;
color: var(--fg-3);
padding: 4px 8px;
border-radius: 6px;
cursor: pointer;
transition: color 0.15s, background 0.15s;
}
.tweaks-panel .tp-close:hover { color: var(--fg); background: rgba(255,255,255,0.05); }
.tweaks-panel .tp-body {
padding: 14px;
overflow: auto;
display: flex; flex-direction: column; gap: 18px;
}
.tweaks-panel .tp-sec { display: flex; flex-direction: column; gap: 10px; }
.tweaks-panel .tp-lbl {
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--fg-3);
display: flex; justify-content: space-between; align-items: center;
}
.tweaks-panel .tp-val {
font-family: var(--font-mono);
font-size: 11px;
color: var(--fg);
letter-spacing: 0.04em;
}
/* Slider */
.tweaks-panel input[type="range"] {
-webkit-appearance: none; appearance: none;
width: 100%;
height: 4px;
border-radius: 999px;
background: rgba(255,255,255,0.08);
outline: none;
cursor: pointer;
}
.tweaks-panel input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 16px; height: 16px;
border-radius: 50%;
background: var(--c-green);
border: 2px solid #050607;
box-shadow: 0 0 0 1px rgba(23,240,152,0.4), 0 0 12px rgba(23,240,152,0.4);
cursor: grab;
}
.tweaks-panel input[type="range"]::-moz-range-thumb {
width: 16px; height: 16px;
border-radius: 50%;
background: var(--c-green);
border: 2px solid #050607;
box-shadow: 0 0 0 1px rgba(23,240,152,0.4), 0 0 12px rgba(23,240,152,0.4);
cursor: grab;
}
/* Radio segmented */
.tweaks-panel .tp-radio {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
gap: 4px;
padding: 4px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 8px;
}
.tweaks-panel .tp-radio.vertical { grid-template-columns: 1fr; }
.tweaks-panel .tp-radio button {
appearance: none; border: 0;
padding: 8px 10px;
border-radius: 6px;
background: transparent;
color: var(--fg-3);
font-family: var(--font-sans);
font-size: 12.5px;
font-weight: 500;
letter-spacing: -0.005em;
cursor: pointer;
transition: background 0.15s, color 0.15s;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tweaks-panel .tp-radio button:hover { color: var(--fg-2); background: rgba(255,255,255,0.03); }
.tweaks-panel .tp-radio button.on {
background: rgba(23,240,152,0.10);
color: var(--c-green);
box-shadow: inset 0 0 0 1px rgba(23,240,152,0.32);
}
.tweaks-panel .tp-radio.vertical button { text-align: left; }
/* Swatches */
.tweaks-panel .tp-swatches {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
}
.tweaks-panel .tp-swatches button {
appearance: none;
background: none;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
padding: 4px;
cursor: pointer;
height: 38px;
display: grid; place-items: center;
transition: border-color 0.15s, transform 0.15s;
}
.tweaks-panel .tp-swatches button span {
display: block;
width: 100%; height: 100%;
border-radius: 6px;
}
.tweaks-panel .tp-swatches button:hover { border-color: rgba(255,255,255,0.22); }
.tweaks-panel .tp-swatches button.on { border-color: var(--c-green); box-shadow: 0 0 0 1px rgba(23,240,152,0.32); transform: translateY(-1px); }
@media (max-width: 480px) {
.tweaks-panel { right: 12px; left: 12px; bottom: 12px; width: auto; }
}
/* ─────────────────────────────────────────────────
Viz density tweak — "minimal" strips FUI cues
────────────────────────────────────────────── */
html[data-viz-density="minimal"] .fui-hex,
html[data-viz-density="minimal"] .fui-corners,
html[data-viz-density="minimal"] .fui-reticle { display: none; }
html[data-viz-density="minimal"] .fc-tabs,
html[data-viz-density="minimal"] .fc-meta { display: none; }
html[data-viz-density="minimal"] .fc-divider { display: none; }
html[data-viz-density="minimal"] .fui-foot .ff-cell:not(:first-of-type) { opacity: 0.5; }
html[data-viz-density="minimal"] .fui-stage {
background: radial-gradient(ellipse 70% 90% at 50% 50%, rgba(10,171,251,0.07), transparent 70%), rgba(4,5,7,0.95);
}
html[data-viz-density="minimal"] .fui-lines .ln { stroke: rgba(255,255,255,0.18); animation-duration: 12s; }
html[data-viz-density="minimal"] .fn-ring { width: 26px; height: 26px; }
html[data-viz-density="minimal"] .fui-node.fn-hub .fn-ring { width: 36px; height: 36px; }
html[data-viz-density="minimal"] .fn-callout.fn-popup .fn-action { display: none; }
/* ─────────────────────────────────────────────────
Quote-style headlines — statement h2s with key
phrases highlighted via .grad-text gradient
────────────────────────────────────────────── */
.section-head h2,
.proven h2,
.foundation h2,
.cta h2 {
line-height: 1.08;
letter-spacing: -0.028em;
text-wrap: balance;
}
.section-head h2 .grad-text,
.proven h2 .grad-text,
.foundation h2 .grad-text,
.cta h2 .grad-text {
/* Re-enable the actual gradient — earlier override killed it for some scopes */
background: var(--grad-h);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
background-size: 200% auto;
background-position: 0% center;
/* subtle drift so the gradient feels alive without being noisy */
animation: gradDrift 14s linear infinite;
}
@keyframes gradDrift {
0% { background-position: 0% center; }
50% { background-position: 100% center; }
100% { background-position: 0% center; }
}
.h-quote {
font-size: clamp(34px, 4.2vw, 60px);
line-height: 1.08;
letter-spacing: -0.028em;
text-wrap: balance;
max-width: 22ch;
}
/* ─────────────────────────────────────────────────
Leadership — grouped team sections
────────────────────────────────────────────── */
.team-group + .team-group { margin-top: 56px; }
.team-group-head {
display: flex;
align-items: baseline;
gap: 18px;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid var(--line);
}
.team-group-head p {
color: var(--fg-3);
font-size: 14.5px;
line-height: 1.5;
}
.chip-mini {
display: inline-flex;
align-items: center;
height: 24px;
padding: 0 11px;
border-radius: 999px;
background: rgba(23, 240, 152, 0.08);
border: 1px solid rgba(23, 240, 152, 0.28);
color: var(--c-green);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
flex: none;
}
/* Team card refinements for two-paragraph bios */
.team-card p + p { margin-top: 12px; }
.team-card p {
color: var(--fg-2);
font-size: 14px;
line-height: 1.55;
}
@media (max-width: 720px) {
.team-group-head { flex-direction: column; align-items: flex-start; gap: 10px; }
}
/* ═══════════════════════════════════════════════════════════
FINAL POLISH PASS — micro UI refinements & motion details
All self-contained, vanilla CSS only. No JS, no libraries.
═══════════════════════════════════════════════════════════ */
:root {
/* Refined easing system. --ease stays as the existing site-wide default;
these add purpose-specific curves for finer motion control. */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* smooth deceleration */
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* slightly snappier */
--ease-soft-back: cubic-bezier(0.34, 1.16, 0.64, 1); /* gentle overshoot */
--ease-quick: cubic-bezier(0.4, 0, 0.2, 1); /* material-style */
}
/* ─── Typography polish ──────────────────────────────────── */
/* Pretty wrapping on body copy so orphans/widows look better */
p, .lede, .faq .body { text-wrap: pretty; }
/* Headings stay balanced (text-wrap: balance is already on h1/h2; add h3) */
h3 { text-wrap: balance; }
/* Tabular numbers on all numeric data so they don't jitter */
.about-stat .n,
[data-countup],
.proven-num,
.scanner-meta span,
.fc-meta span,
.netviz-legend,
.metric .val,
.tl-year { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "ss01" 1, "cv11" 1; }
/* Tight ligatures + contextual alts everywhere */
body { font-feature-settings: "ss01" 1, "cv11" 1, "calt" 1, "kern" 1; }
/* ─── Accessibility: clean focus rings ───────────────────── */
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--c-green);
outline-offset: 3px;
border-radius: 6px;
transition: outline-offset 0.15s var(--ease-quick);
}
.btn:focus-visible,
.chip:focus-visible,
details > summary:focus-visible {
outline-offset: 4px;
}
/* ─── Smooth scroll respects reduced-motion users ────────── */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
/* ─── Nav link hover — animated underline grow ───────────── */
.nav-menu a {
position: relative;
padding-bottom: 2px;
}
.nav-menu a::after {
content: "";
position: absolute;
left: 12px;
right: 12px;
bottom: 4px;
height: 1.5px;
background: linear-gradient(90deg, var(--c-blue), var(--c-green));
transform: scaleX(0);
transform-origin: right center;
transition: transform 0.4s var(--ease-out-expo);
opacity: 0;
border-radius: 1px;
}
.nav-menu a:hover::after,
.nav-menu a.active::after {
transform: scaleX(1);
transform-origin: left center;
opacity: 1;
}
.nav-menu a:hover { color: var(--fg); }
/* ─── Buttons — refined press + subtle lift on hover ─────── */
.btn-primary {
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.3),
0 6px 18px rgba(23, 240, 152, 0.0);
transition:
transform 0.2s var(--ease-out-expo),
box-shadow 0.3s var(--ease-out-expo),
filter 0.2s var(--ease-out-expo);
}
.btn-primary:hover {
transform: translateY(-1.5px);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.3),
0 10px 28px rgba(23, 240, 152, 0.22);
filter: brightness(1.04);
}
.btn-primary:active {
transform: translateY(0);
filter: brightness(0.96);
transition-duration: 0.08s;
}
.btn-ghost {
transition:
transform 0.2s var(--ease-out-expo),
background 0.2s var(--ease-out-expo),
border-color 0.2s var(--ease-out-expo);
}
.btn-ghost:hover { transform: translateY(-1.5px); }
.btn-ghost:active { transform: translateY(0); transition-duration: 0.08s; }
/* ─── Chip — subtle hover lift, dot pulses harder ────────── */
.chip {
transition: transform 0.25s var(--ease-out-expo), background 0.25s var(--ease-out-expo), border-color 0.25s var(--ease-out-expo);
}
.chip:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(23, 240, 152, 0.28);
}
.chip:hover .dot,
.chip:hover::before {
animation-duration: 1.2s;
box-shadow: 0 0 0 3px rgba(23, 224, 138, 0.18), 0 0 18px rgba(23, 224, 138, 0.7);
}
/* ─── Logo cell — gentle scale + ring glow on hover ──────── */
.logo-marquee .logo-cell {
transition:
transform 0.35s var(--ease-out-expo),
border-color 0.35s var(--ease-out-expo),
background 0.35s var(--ease-out-expo),
box-shadow 0.4s var(--ease-out-expo);
}
.logo-marquee .logo-cell:hover {
transform: translateY(-2px) scale(1.025);
box-shadow: 0 14px 36px -18px rgba(23, 240, 152, 0.4);
background: rgba(255, 255, 255, 0.06);
border-color: rgba(23, 240, 152, 0.32);
}
.logo-marquee .logo-cell::before {
transition: background 0.35s var(--ease-out-expo);
}
.logo-marquee .logo-cell:hover::before {
background: radial-gradient(circle, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.94) 72%, rgba(255, 255, 255, 0.0) 100%);
}
/* ─── Section dividers — hairline gradient between sections ─ */
.section-pad + .section-pad,
.shell + .section-pad,
.logo-wall + .section-pad {
position: relative;
}
.section-pad::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 220px;
max-width: 60vw;
height: 1px;
transform: translateX(-50%);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.10), transparent);
pointer-events: none;
opacity: 0;
transition: opacity 0.6s var(--ease-out-expo);
}
.section-pad.reveal-stagger.in::before,
.section-pad.in::before,
body.loaded .section-pad::before { opacity: 1; }
/* Fallback: just always show after first paint */
.section-pad::before { animation: hairline-in 0.8s var(--ease-out-expo) 0.2s forwards; }
@keyframes hairline-in { to { opacity: 1; } }
/* ═══════════════════════════════════════════════════════════
2026-05 EDITORIAL POLISH PASS
Goal: calmer, more breathable, more premium. Subtle only.
No new tokens, no redesigns — tightening rhythm, hierarchy,
and surface depth across what's already there.
═══════════════════════════════════════════════════════════ */
/* ── (1) Surface depth: pure-black → cool charcoal ─────── */
:root {
--bg: #0a0d11; /* cool-charcoal, faint blue undertone */
--bg-elev: rgba(255, 255, 255, 0.028);
/* Soften borders. */
--line: rgba(255, 255, 255, 0.055);
--line-1: rgba(255, 255, 255, 0.085);
--line-2: rgba(255, 255, 255, 0.14);
}
body { background: var(--bg); }
/* Subtle atmospheric lift behind the fold */
.bg-fx::after { opacity: 0.55; filter: blur(60px); }
/* ── (2) Body reading rhythm ───────────────────────────── */
body { line-height: 1.66; }
p { line-height: 1.7; }
.lede { line-height: 1.62; max-width: 52ch; }
.faq .body { line-height: 1.72; }
/* Section-head — wider headline, narrower paragraph */
.section-head { gap: 18px; }
.section-head h2 { letter-spacing: -0.032em; }
.section-head p {
line-height: 1.65;
max-width: 56ch;
color: var(--fg-2);
font-size: 16.5px;
font-weight: 400;
}
/* ── (3) Headline tracking — slightly tighter, more editorial */
h1, .hero h1, .subhero h1 { letter-spacing: -0.034em; }
h2, .section-head h2, .proven h2, .foundation h2, .cta h2 { letter-spacing: -0.03em; }
h3 { letter-spacing: -0.022em; }
/* Cleaner line-break composition on headlines.
`balance` distributes lines so 2-line compositions stay 2-line,
`pretty` cleans orphan words on body. */
h1, h2, h3, .subhero h1, .hero h1, .section-head h2, .cta h2, .proven h2 {
text-wrap: balance;
}
p, .lede, .section-head p, .faq .body, .copy { text-wrap: pretty; }
/* ── (4) Vertical breathing — more air, less mechanical ── */
.section-pad { padding-block: 140px; }
@media (max-width: 980px) { .section-pad { padding-block: 96px; } }
.section-head { margin-bottom: 64px; }
/* Hero: more negative space, less crammed */
.hero { padding-block: 132px 112px; }
@media (max-width: 980px) { .hero { padding-block: 96px 72px; } }
.hero .lede { margin-top: 32px; max-width: 46ch; }
.hero-cta { margin-top: 44px; }
.subhero { padding-block: 124px 64px; }
.subhero .lede { margin-top: 28px; max-width: 50ch; }
/* Section-head spacing hierarchy: chip → h2 → p */
.section-head .chip { margin-bottom: 6px; }
.section-head h2 + p { margin-top: 6px; }
/* ── (5) Card softness — consistent radius, softer surfaces */
.glass, .phase, .usecase, .value, .deploy-card, .cert, .tl-body,
.comp-card, .feat, .sys-chip, .team-card, .contact-tile, .form-card,
.cmp, .spec, .compliance-strip, .faq details {
border-radius: 14px;
}
.glass, .phase, .usecase, .value, .deploy-card, .team-card, .contact-tile {
background: rgba(255, 255, 255, 0.022);
border-color: var(--line-1);
}
.glass:hover, .phase:hover, .usecase:hover, .value:hover,
.deploy-card:hover, .team-card:hover, .contact-tile:hover,
.cert:hover, .tl-body:hover, .comp-card:hover, .feat:hover {
background: rgba(255, 255, 255, 0.036);
border-color: rgba(255, 255, 255, 0.13);
/* Refined atmospheric lift — softer, less obvious "floating" */
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.04) inset,
0 20px 50px -28px rgba(0, 0, 0, 0.65),
0 8px 24px -20px rgba(10, 171, 251, 0.2);
}
/* Logo carousel cells — lighter, more breathable */
.logo-marquee .logo-cell {
background: rgba(255, 255, 255, 0.025);
border-color: rgba(255, 255, 255, 0.07);
}
.logo-marquee .logo-cell:hover {
background: rgba(255, 255, 255, 0.045);
border-color: rgba(255, 255, 255, 0.13);
box-shadow: 0 16px 38px -22px rgba(10, 171, 251, 0.28);
}
/* Phase / use-case / glass — give inner copy room to breathe */
.phase p, .glass p, .usecase p { line-height: 1.65; }
.phase h3, .usecase h3 { margin-bottom: 14px; }
.phase ul, .usecase .uc-list { margin-top: 4px; }
.phase li, .usecase .uc-list li { padding: 12px 0; font-size: 13px; }
/* ── (6) Button + link refinement ──────────────────────── */
.btn { border-radius: 12px; }
.btn-lg { height: 50px; padding: 0 24px; }
.btn-primary {
/* slightly more present resting shadow for that "engineered" feel */
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.08) inset,
0 2px 4px rgba(0, 0, 0, 0.32),
0 8px 22px rgba(0, 0, 0, 0.0);
}
/* Nav links: refined underline (already added by polish-pass, keep) */
.nav-menu a { font-weight: 500; }
/* ── (7) Footer — quieter ──────────────────────────────── */
.foot { padding-block: 56px 64px; }
.foot-links a { letter-spacing: 0.08em; font-size: 10.5px; }
.foot .copy { letter-spacing: 0.02em; font-size: 11.5px; color: var(--fg-4); }
/* ── (8) Restraint on gradient text ────────────────────── */
/* Keep gradient text on the hero accent and a handful of key headlines.
For body-copy in-line ".em" usage and footer brand, hold monochrome. */
.foot-brand img,
.nav-menu a,
.section-head p,
.faq .body,
.lede { /* never gradient */ }
/* ── (9) FAQ — softer, more editorial ──────────────────── */
.faq { display: grid; gap: 12px; }
.faq details { background: rgba(255, 255, 255, 0.022); }
.faq summary { padding: 22px 28px; font-size: 16px; }
.faq .body { padding: 0 28px 26px; font-size: 14.5px; color: var(--fg-2); }
.faq details[open] { background: rgba(255, 255, 255, 0.04); }
/* ── (10) Section dividers — gentler hairline ─────────── */
.section-pad::before {
width: 180px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
}
/* ── (11) Selection color — subtler ─────────────────── */
::selection { background: rgba(23, 240, 152, 0.22); color: var(--fg); }
/* ═══════════════════════════════════════════════════════════
2026-05 PASS #2 — atmosphere, hero rhythm, button geometry,
nav restraint, ambient progress bar
═══════════════════════════════════════════════════════════ */
/* ── (1) Background: cinematic, directional, less milky ─── */
:root {
--bg: #07090c; /* deeper near-black with blue undertone */
}
body { background: var(--bg); }
/* Cut the wide ambient haze; concentrate light to one focused source */
.bg-fx::before {
/* dim the grid texture significantly so the page reads as deep dark */
background-image:
linear-gradient(rgba(255, 255, 255, 0.014) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px);
mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, #000 30%, transparent 75%);
}
.bg-fx::after {
/* Focused, narrower top-bloom — directional, not foggy */
width: 800px;
height: 540px;
top: -120px;
background: radial-gradient(closest-side, rgba(10, 171, 251, 0.085), rgba(23, 240, 152, 0.02) 55%, transparent 75%);
filter: blur(70px);
opacity: 0.55;
}
/* Side glow tokens: reduced spread + opacity so they stop washing
the canvas. They become atmospheric, not dominant. */
.glow-l, .glow-r {
width: 520px;
height: 520px;
filter: blur(110px);
opacity: 0.28;
}
.glow-l { background: radial-gradient(closest-side, rgba(10, 171, 251, 0.16), transparent); }
.glow-r { background: radial-gradient(closest-side, rgba(23, 240, 152, 0.10), transparent); }
/* ── (2) Hero typography rhythm ────────────────────────── */
.hero h1 { line-height: 1.04; }
.hero .lede {
margin-top: 42px; /* was 32 → more breathing room */
font-weight: 400;
color: var(--fg-3); /* slightly lighter weight visually */
max-width: 44ch;
}
.hero-cta { margin-top: 48px; }
/* Slightly tighter, more editorial hero accent tracking */
.hero h1 .accent { letter-spacing: -0.038em; }
/* ── (3) Button geometry: capsule + softer surface ─────── */
.btn {
border-radius: 999px; /* pill */
border-width: 0; /* drop the visible stroke */
font-weight: 500;
letter-spacing: -0.005em;
}
.btn-lg { height: 46px; padding: 0 22px; font-size: 14.5px; } /* less bulk */
.btn-primary {
border: 0;
/* softer, atmospheric surface — feels part of the page, not pasted */
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
inset 0 -1px 0 rgba(0, 0, 0, 0.18),
0 4px 16px -6px rgba(23, 240, 152, 0.35),
0 1px 2px rgba(0, 0, 0, 0.4);
}
.btn-primary:hover {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
inset 0 -1px 0 rgba(0, 0, 0, 0.18),
0 8px 24px -6px rgba(23, 240, 152, 0.42),
0 1px 2px rgba(0, 0, 0, 0.4);
}
.btn-ghost {
background: rgba(255, 255, 255, 0.035);
border: 1px solid rgba(255, 255, 255, 0.075); /* hairline, not harsh */
}
.btn-ghost:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.13);
}
/* ── (4) Nav: restraint. Single emphasis system at a time ── */
.nav-pill {
/* Slightly more transparent so it feels integrated, not opaque */
background: rgba(14, 16, 20, 0.7);
border-color: rgba(255, 255, 255, 0.06);
}
.nav-menu a {
background: transparent !important; /* kill hover bubble */
color: var(--fg-3);
transition: color 0.2s var(--ease, ease);
font-weight: 500;
}
.nav-menu a:hover { color: var(--fg); }
/* Underline becomes the SOLE emphasis cue.
No bubble, no glow, no double-up. */
.nav-menu a::after {
background: rgba(255, 255, 255, 0.9); /* mono, not gradient */
height: 1px;
bottom: 2px;
left: 14px;
right: 14px;
opacity: 0;
transform: scaleX(0.6);
transform-origin: center;
transition: opacity 0.25s var(--ease, ease), transform 0.3s var(--ease, ease);
}
.nav-menu a:hover::after {
opacity: 0.4;
transform: scaleX(1);
}
.nav-menu a.active {
color: var(--fg);
}
.nav-menu a.active::after {
opacity: 0.9;
transform: scaleX(1);
background: linear-gradient(90deg, var(--c-blue), var(--c-green));
}
/* Nav CTA inherits the new pill geometry */
.nav-pill .btn-primary { height: 38px; padding: 0 16px; font-size: 13px; }
/* ── (6) Hero headline — calm horizontal flow ──────────── */
/* Keep the natural h1 markup. No artificial fragmentation:
the headline reads horizontally in two clean lines —
"Security that Scales." / "Tech that Evolves." —
matching the FAQ section's effortless rhythm. */
.hero h1 {
font-size: clamp(40px, 5.4vw, 76px);
font-weight: 600;
letter-spacing: -0.036em;
line-height: 1.02;
text-wrap: balance;
max-width: 14ch; /* keeps the 2-line composition stable */
}
.hero h1 .accent {
/* Subtle inline emphasis, not display-loud */
font-weight: 600;
letter-spacing: -0.038em;
}
@media (max-width: 720px) {
.hero h1 { font-size: clamp(34px, 9vw, 56px); max-width: 12ch; }
}
/* ── (7) Horizontal-first flow for non-hero headlines ──── */
/* Section heads, subheroes, and statement headlines should
USE the available horizontal space before wrapping. The
default `text-wrap: balance` (set globally above) forces
roughly equal line widths which collapses headlines into
tall narrow rectangles. Override to `pretty` (orphan-only
cleanup) and lift artificial max-widths so type breathes. */
.section-head h2,
.problem h2,
.subhero h1,
.proven h2,
.foundation h2,
.cta h2 {
text-wrap: pretty;
max-width: none; /* let the parent container set width */
}
/* ── (5) Progress bar: ambient but readable ─────────────── */
/* ── (8) Section heads always left-aligned ────────────── */
/* Default section-head is flex column with align-items: center +
text-align: center. Some pages override that inline back to
centered. The brand direction now is uniformly left-aligned,
so force it with !important to win against inline styles. */
.section-head {
align-items: flex-start !important;
text-align: left !important;
max-width: none;
}
.section-head h2,
.section-head p {
text-align: left !important;
margin-inline: 0 !important;
}
/* Opt-in: center a single section-head (e.g. "The Gap") */
.section-head.is-centered {
align-items: center !important;
text-align: center !important;
}
.section-head.is-centered h2,
.section-head.is-centered p {
text-align: center !important;
margin-inline: auto !important;
}
/* ── (9) Primary CTA — always bold ─────────────────────── */
/* The Schedule a Demo button is the brand's primary call to action;
it should read with confidence wherever it appears. */
.btn-primary { font-weight: 700; }
/* ═══════════════════════════════════════════════════════════
2026-05 — MICRO-POLISH PACK
12 tiny enhancements. Pure CSS/JS, fully self-contained.
═══════════════════════════════════════════════════════════ */
/* (1) FAQ smooth open/close — height + opacity animated by JS in anim.js */
.faq details .body {
will-change: max-height, opacity;
}
/* (2) Cursor spotlight on more cards.
Same mechanism as the existing .glass spotlight; just exposes the
variables on more surfaces. JS sets --mx/--my on pointermove. */
.phase, .usecase, .value, .deploy-card, .cert, .comp-card, .feat, .tl-body {
--mx: 50%; --my: 50%;
position: relative;
}
.phase::after, .usecase::after, .value::after, .deploy-card::after,
.cert::after, .comp-card::after, .tl-body::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(
240px circle at var(--mx) var(--my),
rgba(255, 255, 255, 0.045),
transparent 60%
);
opacity: 0;
transition: opacity 0.35s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1));
pointer-events: none;
z-index: 0;
}
.phase:hover::after, .usecase:hover::after, .value:hover::after,
.deploy-card:hover::after, .cert:hover::after, .comp-card:hover::after,
.tl-body:hover::after { opacity: 1; }
/* Keep card content above the spotlight layer */
.phase > *, .usecase > *, .value > *, .deploy-card > *,
.cert > *, .comp-card > *, .tl-body > * { position: relative; z-index: 1; }
/* (3) Hover micro-tilt on phase cards.
3D rotation following cursor — at most 4°, very restrained. */
.phase-row, .grid-3 { perspective: 1400px; }
.phase {
--rx: 0deg; --ry: 0deg;
transform-style: preserve-3d;
transition: transform 0.45s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)),
box-shadow 0.4s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)),
border-color 0.4s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1));
}
.phase.is-tilted {
transform: perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0);
transition: transform 0.06s linear,
box-shadow 0.4s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1));
}
@media (prefers-reduced-motion: reduce) {
.phase { transform: none !important; }
}
/* (4) Page entrance fade.
Body fades up softly on first load. The fade-OUT state is only applied
for a very short window (300ms) via `is-fading`; after that we don't
risk leaving the page invisible if `load` is slow. */
html.is-fading body { opacity: 0; }
body {
opacity: 1;
transition: opacity 0.4s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1));
}
/* (5) Nav blur intensifies past hero.
Once we scroll out of the hero, the nav-pill backdrop deepens. */
.nav-pill.is-deep {
background: rgba(10, 12, 16, 0.86);
backdrop-filter: blur(24px) saturate(200%);
-webkit-backdrop-filter: blur(24px) saturate(200%);
border-color: rgba(255, 255, 255, 0.08);
}
/* (6) Logo carousel stagger fade-in on load — cells start visible
and only do the stagger lift if the script flips `.is-staggered`. */
.logo-marquee.is-staggered .logo-cell {
opacity: 0;
transform: translateY(6px);
animation: cell-in 0.55s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)) both;
}
@keyframes cell-in {
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.logo-marquee.is-staggered .logo-cell { animation: none; opacity: 1; transform: none; }
}
/* (8) Button shimmer on first viewport entry.
Same shimmer as the existing :hover effect, but plays once when
the CTA enters the visible area. */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.42) 50%, transparent 70%);
transform: translateX(-120%);
pointer-events: none;
opacity: 0;
}
.btn-primary.has-shimmered::after {
animation: btn-shimmer 1.3s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)) forwards;
}
@keyframes btn-shimmer {
0% { transform: translateX(-120%); opacity: 0; }
20% { opacity: 1; }
80% { opacity: 1; }
100% { transform: translateX(120%); opacity: 0; }
}
/* (9) Section chip dot pulses faster when in view */
.chip.is-active .dot,
.chip.is-active::before { animation-duration: 1.3s; }
/* (10) Hairline under section chip on reveal */
.section-head .chip { position: relative; }
.section-head .chip::after {
content: "";
position: absolute;
left: 6px; right: 6px;
bottom: -10px;
height: 1px;
background: linear-gradient(90deg, var(--c-blue), var(--c-green), transparent);
transform: scaleX(0);
transform-origin: left center;
opacity: 0.65;
transition: transform 0.7s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)) 0.15s;
}
.section-head.in .chip::after,
.reveal-stagger.in .chip::after { transform: scaleX(1); }
/* Don't apply inside the centered Gap section (chip is centered, line would look odd) */
.section-head.is-centered .chip::after { display: none; }
/* (11) Focus rings — softer fade */
:focus-visible {
outline: 2px solid var(--c-green);
outline-offset: 3px;
border-radius: 6px;
transition: outline-offset 0.2s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)),
outline-color 0.2s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1));
}
/* (12) Selection color follows accent palette automatically.
::selection can't read CSS vars in Safari pre-15, but works
in all modern browsers and degrades to the default green. */
::selection {
background: color-mix(in srgb, var(--c-green) 28%, transparent);
color: var(--fg);
}
/* Don't draw the hairline above the hero (first section after nav) */
.hero::before { display: none; }
/* ─── Glass / phase cards — ambient inner glow on hover ──── */
.glass, .phase, .usecase, .value, .deploy-card, .cert, .tl-body, .comp-card, .feat {
position: relative;
transition:
transform 0.35s var(--ease-out-expo),
border-color 0.35s var(--ease-out-expo),
background 0.35s var(--ease-out-expo),
box-shadow 0.4s var(--ease-out-expo);
}
.glass:hover, .phase:hover, .usecase:hover, .value:hover,
.deploy-card:hover, .cert:hover, .tl-body:hover, .comp-card:hover, .feat:hover {
transform: translateY(-3px);
box-shadow: 0 18px 40px -24px rgba(10, 171, 251, 0.32);
border-color: var(--line-2);
}
/* ─── Hero accent text — subtle gradient drift ──────────── */
.hero h1 .accent {
background-size: 200% 100%;
background-position: 0% 50%;
animation: accent-drift 14s ease-in-out infinite;
}
@keyframes accent-drift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
.hero h1 .accent { animation: none; }
}
/* ─── FAQ chevron — smoother rotation curve ──────────────── */
.faq summary::after,
.faq details summary svg { transition: transform 0.35s var(--ease-soft-back) !important; }
/* ─── Reveal-stagger — refined easing, slightly longer ──── */
.reveal-stagger > * {
transition-duration: 0.75s;
transition-timing-function: var(--ease-out-expo);
}
.reveal { transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo); }
/* ─── Logo marquee — auto-scroll + drag is additive ─ */
.logo-marquee { cursor: grab; }
.logo-marquee:active,
.logo-marquee.is-dragging { cursor: grabbing; }
.logo-marquee.is-dragging .logo-track { animation-play-state: paused; }
/* Pause on hover but do NOT change duration — duration changes can't
be smoothly interpolated and cause visible jank. */
.logo-marquee:hover .logo-track,
.logo-marquee:focus-within .logo-track { animation-play-state: paused; }
/* ─── Image rendering — crisper at small sizes ───────────── */
.logo-cell img,
.foot-brand img,
.brand img { image-rendering: -webkit-optimize-contrast; }
/* ─── Scrollbar styling — subtle dark theme match ────────── */
@supports (scrollbar-color: auto) {
html { scrollbar-color: rgba(255, 255, 255, 0.18) transparent; scrollbar-width: thin; }
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.12);
border-radius: 6px;
border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.22); }
/* ─── Print: hide marquee animation, show simple grid ────── */
@media print {
.logo-marquee .logo-track { animation: none !important; }
.nav-island, .tweaks-panel, .glow-l, .glow-r { display: none !important; }
}
/* ═══════════════════════════════════════════════════════════
2026-05 PASS — progress bar, scroll cue, nav responsive,
logo size bump, carousel jank fix
═══════════════════════════════════════════════════════════ */
/* (1) Logo size bump: +10% */
:root { --logo-h: 48px; }
/* (4) Carousel duplicate-rule cleanup — the canonical rules live above
in the "Logo marquee — auto-scroll + drag is additive" block. */
/* (2) Hero scroll cue — animated, refined */
.scroll-cue {
position: absolute;
bottom: 28px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
z-index: 2;
text-decoration: none;
pointer-events: auto;
opacity: 0;
animation: cue-fade-in 1.2s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)) 1.4s forwards;
}
.scroll-cue .cue-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--fg-4);
transition: color 0.25s var(--ease, ease);
}
.scroll-cue:hover .cue-label { color: var(--fg-2); }
.scroll-cue .cue-track {
position: relative;
width: 22px;
height: 36px;
border: 1.5px solid rgba(255, 255, 255, 0.22);
border-radius: 12px;
overflow: hidden;
transition: border-color 0.3s var(--ease, ease);
}
.scroll-cue:hover .cue-track {
border-color: rgba(23, 240, 152, 0.5);
}
.scroll-cue .cue-dot {
position: absolute;
left: 50%;
top: 6px;
width: 4px;
height: 4px;
margin-left: -2px;
border-radius: 50%;
background: linear-gradient(180deg, var(--c-blue), var(--c-green));
box-shadow: 0 0 8px rgba(23, 240, 152, 0.7);
animation: cue-dot 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.scroll-cue .cue-chevrons {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
margin-top: 2px;
}
.scroll-cue .cue-chev {
width: 10px;
height: 6px;
opacity: 0;
animation: cue-chev 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.scroll-cue .cue-chev:nth-child(1) { animation-delay: 0s; }
.scroll-cue .cue-chev:nth-child(2) { animation-delay: 0.18s; }
.scroll-cue .cue-chev:nth-child(3) { animation-delay: 0.36s; }
.scroll-cue .cue-chev svg { width: 100%; height: 100%; display: block; }
.scroll-cue .cue-chev svg path {
stroke: rgba(255, 255, 255, 0.7);
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
transition: stroke 0.3s var(--ease, ease);
}
.scroll-cue:hover .cue-chev svg path { stroke: var(--c-green); }
@keyframes cue-fade-in {
to { opacity: 1; }
}
@keyframes cue-dot {
0% { transform: translateY(0); opacity: 0; }
25% { opacity: 1; }
100% { transform: translateY(18px); opacity: 0; }
}
@keyframes cue-chev {
0% { opacity: 0; transform: translateY(-2px); }
40% { opacity: 1; transform: translateY(0); }
80% { opacity: 0; transform: translateY(3px); }
100% { opacity: 0; transform: translateY(3px); }
}
/* Hide the cue after the user starts scrolling */
.scroll-cue.is-hidden {
opacity: 0 !important;
pointer-events: none;
transition: opacity 0.4s var(--ease, ease);
}
@media (prefers-reduced-motion: reduce) {
.scroll-cue .cue-dot,
.scroll-cue .cue-chev { animation: none; opacity: 1; }
}
@media (max-width: 980px) {
.scroll-cue { display: none; }
}
/* (5) Responsive nav — fully reworked.
- 1100px+ : full layout (brand | menu | CTA)
- 720–1100px : tighten everything to fit one row
- <720px : hamburger menu with slide-down panel */
.nav-toggle {
display: none;
width: 42px;
height: 42px;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--line-1);
border-radius: 12px;
cursor: pointer;
padding: 0;
flex: none;
transition: background 0.2s var(--ease, ease), border-color 0.2s var(--ease, ease);
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--line-2); }
.nav-toggle .bars {
position: relative;
width: 18px;
height: 12px;
}
.nav-toggle .bars span {
position: absolute;
left: 0; right: 0;
height: 1.5px;
background: var(--fg);
border-radius: 1px;
transition: transform 0.3s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)),
opacity 0.2s var(--ease, ease),
top 0.3s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1));
}
.nav-toggle .bars span:nth-child(1) { top: 0; }
.nav-toggle .bars span:nth-child(2) { top: 5.25px; }
.nav-toggle .bars span:nth-child(3) { top: 10.5px; }
.nav-pill.is-open .nav-toggle .bars span:nth-child(1) { top: 5.25px; transform: rotate(45deg); }
.nav-pill.is-open .nav-toggle .bars span:nth-child(2) { opacity: 0; }
.nav-pill.is-open .nav-toggle .bars span:nth-child(3) { top: 5.25px; transform: rotate(-45deg); }
/* Mid-size: tighten the bar so it fits on one row down to ~720px */
@media (max-width: 1100px) {
.nav-island { padding: 0 16px; }
.nav-pill { gap: 10px; padding: 6px 6px 6px 14px; }
.nav-menu { gap: 2px; }
.nav-menu a { padding: 6px 10px; font-size: 13.5px; }
.nav-pill .btn-primary { height: 40px; padding: 0 16px; font-size: 13.5px; }
}
/* Hamburger breakpoint */
@media (max-width: 760px) {
.nav-toggle { display: inline-flex; }
.nav-pill {
flex-wrap: wrap;
padding: 10px 12px;
border-radius: 22px;
gap: 8px;
}
/* Brand on the left, hamburger pushed right, CTA hidden into the menu drawer */
.nav-pill .brand { margin-right: auto; }
.nav-pill > .btn-primary {
order: 4;
width: 100%;
margin-top: 6px;
display: none;
}
.nav-menu {
order: 5;
flex-direction: column;
align-items: stretch;
width: 100%;
gap: 2px;
padding: 8px 0 4px;
border-top: 1px solid var(--line);
margin-top: 6px;
/* Collapse by default */
max-height: 0;
overflow: hidden;
opacity: 0;
border-top-color: transparent;
transition:
max-height 0.35s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)),
opacity 0.25s var(--ease, ease),
border-top-color 0.25s var(--ease, ease);
}
.nav-menu a {
text-align: left;
padding: 12px 8px;
font-size: 15px;
border-radius: 8px;
}
.nav-menu a::after { display: none; }
.nav-pill.is-open .nav-menu {
max-height: 320px;
opacity: 1;
border-top-color: var(--line);
}
.nav-pill.is-open > .btn-primary {
display: inline-flex;
justify-content: center;
}
}
@media (max-width: 380px) {
.brand img { height: 36px; }
}
/* ═════════════════════════════════════════════════════════
DEPLOY LOCKDOWN — v2026-05
Goal: identical render in Claude preview, Netlify deploy,
and any modern browser/screen.
Strategy: replace viewport-dependent clamp() with fixed
sizes calibrated to the 1280px design width, with a
single mobile breakpoint for narrow screens. Anything
above this rule wins via specificity.
═════════════════════════════════════════════════════════ */
/* — Type scale lock — */
h1 { font-size: 76px !important; line-height: 1.02; }
h2 { font-size: 44px !important; line-height: 1.08; }
.hero h1 { font-size: 76px !important; line-height: 1.02; }
.subhero h1 { font-size: 64px !important; line-height: 1.02; }
.proven h2 { font-size: 56px !important; line-height: 1.04; }
.cta h2 { font-size: 64px !important; line-height: 1.02; }
.problem h2 { font-size: 48px !important; line-height: 1.05; }
.foundation h2 { font-size: 44px !important; line-height: 1.08; }
.h-quote { font-size: 48px !important; line-height: 1.08; }
.lede { font-size: 19px !important; line-height: 1.55; }
/* — Layout lock — */
.shell { padding-inline: 32px !important; max-width: 1280px; }
.section-pad { padding-block: 120px !important; }
.section-pad-sm { padding-block: 80px !important; }
/* Section head spacing rhythm */
.section-head { margin-bottom: 56px; }
.section-head .chip { margin-bottom: 14px; }
.section-head h2 + p { margin-top: 14px !important; }
/* — Centered section opt-in (Problem / "The Gap") — */
.section-head.is-centered {
align-items: center !important;
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
.section-head.is-centered h2,
.section-head.is-centered p {
text-align: center !important;
margin-inline: auto !important;
max-width: 32ch;
}
.section-head.is-centered p { max-width: 56ch; }
.section-head.is-centered .chip { align-self: center; }
/* — Hero h1 accent words pop on the larger fixed size — */
.hero h1 .accent { font-weight: 600; }
/* — Mobile breakpoint (single source of truth) — */
@media (max-width: 880px) {
h1, .hero h1 { font-size: 48px !important; line-height: 1.04; }
.subhero h1 { font-size: 44px !important; }
h2, .section-head h2,
.foundation h2,
.problem h2 { font-size: 32px !important; line-height: 1.1; }
.proven h2 { font-size: 36px !important; }
.cta h2 { font-size: 40px !important; }
.lede { font-size: 17px !important; }
.shell { padding-inline: 20px !important; }
.section-pad { padding-block: 80px !important; }
.section-head { margin-bottom: 36px; }
}
@media (max-width: 520px) {
h1, .hero h1 { font-size: 40px !important; }
.subhero h1 { font-size: 36px !important; }
h2, .section-head h2,
.foundation h2,
.problem h2 { font-size: 28px !important; }
.proven h2 { font-size: 30px !important; }
.cta h2 { font-size: 32px !important; }
.shell { padding-inline: 16px !important; }
.section-pad { padding-block: 64px !important; }
}
/* ── Logo carousel — guarantee identical behavior on deploy ──
The marquee animation distance must match the duplicated track length:
14 cells × 2 sets, 18px gap → -50% travel for seamless wrap.
Already implemented earlier; this block locks the duration. */
.logo-marquee .logo-track {
animation: logo-scroll 60s linear infinite;
width: max-content;
}
@keyframes logo-scroll {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(calc(-50% - 9px), 0, 0); }
}
.logo-marquee:hover .logo-track,
.logo-marquee:focus-within .logo-track,
.logo-marquee.is-dragging .logo-track {
animation-play-state: paused;
}
/* ═════════════════════════════════════════════════════════
MOBILE POLISH — v2026-05-20
Goal: clean, readable, touch-friendly on 360–430px screens.
Does NOT touch desktop. Stacks at 760, tightens at 640, last
resort tweaks at 430.
═════════════════════════════════════════════════════════ */
/* Universal: no horizontal scroll, safe overflow */
html, body { overflow-x: clip; }
img, svg, video { max-width: 100%; }
/* Word-break protection for long monospace strings */
.fn-id, .fn-meta, .fc-label, .ff-cell, .meta, .mono,
.foot .copy {
word-break: break-word;
overflow-wrap: anywhere;
}
/* Touch targets: every button/link in nav, CTA, and chrome ≥44px */
@media (hover: none) and (pointer: coarse) {
.btn, .nav-menu a, .foot-links a, .fc-tabs button,
.nav-toggle, details summary {
min-height: 44px;
}
}
/* ── 760px and down: stack hero, simplify FUI, single-column grids ── */
@media (max-width: 760px) {
/* Hero — stack copy over the viz, tighten gap and padding */
.hero { padding-block: 96px 64px !important; }
.hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
.hero h1, .hero .lede { /* line breaks already removed from markup; CSS just controls scale */ }
.hero-cta { margin-top: 28px !important; }
.hero-cta .btn { width: 100%; justify-content: center; }
/* FUI hero viz — keep it but shrink chrome & callouts so labels don't collide */
.netviz.fui { max-width: 100%; }
.fc-meta { display: none; }
.fui-stage { aspect-ratio: 4 / 3; }
.fn-callout { font-size: 8px !important; }
.fn-callout .fn-action { display: none; }
.fn-callout.fn-popup { padding: 6px 8px; }
.fc-label { font-size: 9px; letter-spacing: 0.14em; }
.fui-foot { padding: 8px 12px; gap: 8px; }
.fui-foot .ff-cell { font-size: 8.5px; }
/* Scroll cue — hide on mobile (not useful with short viewports) */
.scroll-cue { display: none !important; }
/* Single column grids */
.grid-3, .grid-4, .usecases, .deploy-grid,
.contact-grid, .about-stats, .check-grid {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
.grid-2 { grid-template-columns: 1fr !important; gap: 32px !important; }
/* Foundation explainer */
.foundation {
grid-template-columns: 1fr !important;
padding: 28px !important;
gap: 28px !important;
}
.osi-stack { padding: 14px; }
.osi-layer { grid-template-columns: 40px 1fr auto; padding: 8px 10px; font-size: 11px; }
.osi-layer .badge { font-size: 9px; padding: 2px 6px; }
/* Compliance grid */
.cgrid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
.cgrid .cg { padding: 14px 10px; font-size: 11.5px; }
/* Comparison table — stack each row into a 3-row mini-card */
.compare-row {
grid-template-columns: 1fr !important;
padding: 14px 16px;
gap: 6px;
}
.compare-row.head { display: none; }
.compare-cell { padding: 4px 0 !important; border: 0 !important; background: transparent !important; }
.compare-cell.feat {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--fg-4);
}
.compare-cell:not(.feat)::before {
display: none;
}
.compare-cell.toto {
border-left: 2px solid rgba(23, 240, 152, 0.5) !important;
padding-left: 10px !important;
margin-top: 2px;
}
/* Proven block */
.proven { padding: 32px 24px !important; }
.proven-grid { grid-template-columns: 1fr !important; gap: 24px; }
.proven-stats { max-width: 100% !important; }
/* CTA block */
.cta { padding: 36px 24px !important; }
.cta .actions { width: 100%; }
.cta .actions .btn { width: 100%; justify-content: center; }
/* Footer */
.foot { padding-block: 44px !important; }
.foot-inner { flex-direction: column; gap: 22px; text-align: center; align-items: center; }
.foot-links { flex-wrap: wrap; justify-content: center; gap: 14px 18px; }
/* Forms */
.form-card { padding: 24px !important; }
.field-row { grid-template-columns: 1fr !important; }
/* Logo wall */
.logo-wall { padding: 36px 0 16px !important; }
.logo-wall-head { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 18px; }
.logo-marquee .logo-cell { width: 156px; height: 104px; padding: 14px; }
/* Section padding */
.section-pad { padding-block: 72px !important; }
.section-head { margin-bottom: 32px !important; }
.section-head .chip + h2 { margin-top: 8px; }
/* Phase / use-case cards */
.phase, .usecase { padding: 24px !important; }
/* Timeline */
.tl-item { grid-template-columns: 1fr !important; padding-left: 22px; gap: 4px; }
.tl-year { font-size: 12px; }
/* Team grouped section */
.team-group + .team-group { margin-top: 40px; }
.team-card { padding: 20px !important; }
/* Buttons inside .nav-menu drawer get full width */
.nav-pill.is-open .nav-menu a { font-size: 15px; }
/* Tweaks panel — go full bleed at bottom */
.tweaks-panel { right: 12px !important; left: 12px !important; bottom: 12px !important; width: auto !important; }
}
/* ── 480px and down: tighten the last bit of breathing room ── */
@media (max-width: 480px) {
.shell { padding-inline: 16px !important; }
.section-pad { padding-block: 56px !important; }
.hero { padding-block: 72px 48px !important; }
/* Heading scale */
.hero h1 { font-size: 38px !important; line-height: 1.06 !important; }
.subhero h1 { font-size: 34px !important; }
h2, .section-head h2,
.foundation h2, .problem h2 { font-size: 26px !important; }
.proven h2 { font-size: 28px !important; }
.cta h2 { font-size: 28px !important; }
/* Chip eyebrow */
.chip { font-size: 10px !important; height: 24px; padding: 0 10px; }
/* Logo marquee — slightly smaller cells */
.logo-marquee .logo-cell { width: 136px; height: 92px; padding: 12px; }
/* FUI viz — shrink the chrome label and hide labels on small nodes */
.fc-label { font-size: 8.5px; }
.fn-callout:not(.fn-popup) { display: none; }
.fui-node.fn-warn .fn-callout.fn-popup { font-size: 7.5px; padding: 5px 7px; }
/* Stat tiles */
.proven-stat .n, .about-stat .n { font-size: 36px !important; }
.proven-stat .l, .about-stat .l { font-size: 10.5px; }
/* Footer */
.foot-links a { font-size: 10px; }
.foot .copy { font-size: 11px; }
/* FAQ */
.faq summary { padding: 18px 18px !important; font-size: 14px !important; }
.faq .body { padding: 0 18px 20px !important; font-size: 13.5px !important; }
/* Forms */
.form-card { padding: 18px !important; border-radius: 14px; }
.field input, .field textarea, .field select { font-size: 16px; /* prevents iOS zoom on focus */ }
}
/* ── 360px (Android small): final guards against overflow ── */
@media (max-width: 360px) {
.shell { padding-inline: 14px !important; }
.hero h1 { font-size: 34px !important; }
.subhero h1 { font-size: 30px !important; }
h2, .section-head h2 { font-size: 24px !important; }
.logo-marquee .logo-cell { width: 124px; height: 84px; }
.nav-pill { padding: 8px 10px !important; gap: 8px !important; }
}
/* ── Touch targets for FAQ summary & nav drawer items ── */
@media (max-width: 760px) {
.faq summary { min-height: 56px; padding: 16px 20px !important; }
.nav-menu a { min-height: 44px; display: flex; align-items: center; }
}
/* ═════════════════════════════════════════════════════════
POLISH PASS — 2026-05-20 #2
- Logo cells: more inner padding so seals don't get cropped
- Nav: tighter vertical padding (44px tall instead of 60+)
- Hamburger: gradient bars matching brand accent
- Mobile: center align headlines/chips by default
═════════════════════════════════════════════════════════ */
/* ── Logo carousel — give the white puck and image room to breathe ── */
.logo-marquee .logo-cell {
padding: 22px 18px !important;
}
.logo-marquee .logo-cell img {
max-width: 100% !important;
max-height: 100% !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
}
/* Override the per-logo fixed sizes so they fit within the cell rather than being clipped. */
.logo-marquee .logo-cell img[src*="minose"] {
width: auto !important;
height: auto !important;
max-width: 90% !important;
max-height: 86% !important;
}
.logo-marquee .logo-cell img[src*="isletechnica"] {
width: auto !important;
height: auto !important;
max-width: 88% !important;
max-height: 82% !important;
}
.logo-marquee .logo-cell img[src*="rcaf"],
.logo-marquee .logo-cell img[src*="caf"],
.logo-marquee .logo-cell img[src*="usmc"],
.logo-marquee .logo-cell img[src*="dod"],
.logo-marquee .logo-cell img[src*="doe"],
.logo-marquee .logo-cell img[src*="navy"],
.logo-marquee .logo-cell img[src*="army"],
.logo-marquee .logo-cell img[src*="usaf"],
.logo-marquee .logo-cell img[src*="dhs"],
.logo-marquee .logo-cell img[src*="duke"],
.logo-marquee .logo-cell img[src*="evms"],
.logo-marquee .logo-cell img[src*="pivot"] {
width: auto !important;
height: auto !important;
max-width: 82% !important;
max-height: 82% !important;
}
/* Soft white puck behind logos — tighten so it doesn't crowd the edge */
.logo-marquee .logo-cell::before {
width: 78% !important;
height: 78% !important;
}
/* ── Nav pill: tighter vertical padding on every breakpoint ── */
.nav-island {
margin-top: 12px !important;
top: 12px !important;
}
.nav-pill {
padding: 6px 6px 6px 14px !important;
min-height: 48px;
}
.nav-pill .btn-primary {
height: 36px !important;
padding: 0 14px !important;
font-size: 13px;
}
.nav-menu a {
padding: 6px 12px !important;
font-size: 13.5px;
}
/* ── Hamburger: gradient bars matching brand accent ── */
.nav-toggle .bars span {
background: linear-gradient(90deg, var(--c-blue), var(--c-green)) !important;
border-radius: 1.5px;
height: 1.5px;
box-shadow: 0 0 8px rgba(23, 240, 152, 0.35);
}
/* ── Mobile: center headlines + chip pills by default ── */
@media (max-width: 760px) {
/* Center section heads (chip + h2 + p) */
.section-head {
align-items: center !important;
text-align: center !important;
}
.section-head h2,
.section-head p {
text-align: center !important;
margin-inline: auto !important;
}
/* Hero copy gets centered */
.hero .hero-grid > div:first-child {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.hero h1 { text-align: center; }
.hero .lede { text-align: center; max-width: 36ch; margin-inline: auto; }
.hero-cta { justify-content: center; }
/* Subhero (Product/About/FAQ/Contact) centers too */
.subhero { text-align: center; align-items: center; }
.subhero h1 { text-align: center; }
.subhero .lede { text-align: center; margin-inline: auto; }
/* Proven block — center the copy column */
.proven-grid > div:first-child {
text-align: center;
}
.proven h2, .proven .copy, .proven .meta {
text-align: center;
margin-inline: auto;
}
.proven-stats { margin-inline: auto !important; }
/* CTA centers (already does, but explicit) */
.cta, .cta h2, .cta p { text-align: center; }
.cta .actions { justify-content: center; }
/* Logo wall head — center the chip + tagline */
.logo-wall-head {
align-items: center !important;
text-align: center;
}
.logo-wall-head p {
text-align: center;
margin-inline: auto;
max-width: 40ch;
}
/* Team group head centers too */
.team-group-head {
align-items: center !important;
text-align: center;
}
.team-group-head p { text-align: center; }
/* Foundation explainer */
.foundation { text-align: center; }
.foundation h2, .foundation .copy, .foundation .pull {
text-align: center;
margin-inline: auto;
border-left: 0;
padding-left: 0;
}
.foundation .pull cite { text-align: center; }
/* Use-cases — center each card's copy */
.usecase { text-align: center; align-items: center; }
.usecase .uc-tag { align-self: center; }
.usecase .uc-list { text-align: left; max-width: 28ch; margin: 0 auto; }
/* Phases — center body */
.phase { text-align: center; }
.phase .num { display: inline-block; }
.phase ul { text-align: left; max-width: 32ch; margin: 0 auto; }
/* Section-head chip explicitly centered (the rule above flexed it correctly,
but inline styles in HTML can override; force center for the eyebrow) */
.section-head .chip { align-self: center; margin-inline: auto; }
/* Chip underline (added in polish pass) looks odd when chip is centered; hide */
.section-head .chip::after { display: none !important; }
/* Logo cell — a touch larger on mobile (compensating for the new padding) */
.logo-marquee .logo-cell {
padding: 18px 14px !important;
}
}
/* ═════════════════════════════════════════════════════════
SENIOR UI PASS — 2026-05-20 #3
Goals:
- One unified vertical rhythm based on a 4/8/16/24/40px scale
- Tight, intentional spacing between chip → h2 → lede
- Honor centered alignment on mobile without breaking ornament
(chip underlines, quote borders, etc.)
- Smaller, calmer hero on mobile; quieter FUI viz
- Consistent card paddings across all card families
═════════════════════════════════════════════════════════ */
/* ──────────────────────────────────────────────────────────
1. Section rhythm — predictable space between every block
────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
/* Section vertical padding stair-steps consistently */
.section-pad { padding-block: 64px !important; }
.hero { padding-block: 80px 56px !important; }
.subhero { padding-block: 64px 16px !important; }
.logo-wall { padding: 40px 0 32px !important; }
/* Section-head inner spacing: 16px chip→h2, 12px h2→p */
.section-head { margin-bottom: 40px !important; gap: 0 !important; }
.section-head .chip { margin-bottom: 16px !important; }
.section-head h2 + p { margin-top: 12px !important; }
.section-head p { max-width: 36ch; }
/* Logo wall head — match section-head rhythm */
.logo-wall-head { gap: 12px !important; margin-bottom: 24px !important; }
.logo-wall-head .chip { margin-bottom: 0; }
/* Team groups */
.team-group-head { margin-bottom: 24px !important; padding-bottom: 14px !important; gap: 10px !important; }
.team-group + .team-group { margin-top: 32px !important; }
}
/* ──────────────────────────────────────────────────────────
2. Hero — calmer, more disciplined on mobile
────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
.hero-grid { gap: 32px !important; }
.hero .chip { margin-bottom: 20px; }
.hero h1 { font-size: 42px !important; line-height: 1.05 !important; letter-spacing: -0.03em; }
.hero .lede { margin-top: 16px !important; font-size: 15.5px !important; max-width: 34ch; }
.hero-cta { margin-top: 24px !important; gap: 10px; }
.hero-cta .btn-lg { height: 44px; padding: 0 18px; font-size: 14px; }
}
@media (max-width: 480px) {
.hero { padding-block: 64px 40px !important; }
.hero h1 { font-size: 36px !important; }
.hero .lede { font-size: 14.5px !important; }
.hero .chip { font-size: 9.5px !important; letter-spacing: 0.14em; }
}
/* ──────────────────────────────────────────────────────────
3. FUI viz — quieter on mobile, smaller, less crowded
────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
.netviz.fui {
border-radius: 14px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}
.fui-chrome { padding: 9px 12px !important; }
.fc-label { font-size: 9px !important; }
.fc-tabs button { padding: 4px 8px; font-size: 9px; }
.fui-stage { aspect-ratio: 5 / 4 !important; }
.fn-ring { width: 18px !important; height: 18px !important; }
.fui-node.fn-hub .fn-ring { width: 24px !important; height: 24px !important; }
.fui-corners span { width: 10px; height: 10px; }
.fui-foot { padding: 7px 12px !important; gap: 6px; }
.fui-foot .ff-cell, .ff-live { font-size: 8px !important; letter-spacing: 0.14em !important; }
}
/* ──────────────────────────────────────────────────────────
4. Subhero (Product / About / FAQ / Contact pages)
────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
.subhero .chip { margin-bottom: 14px !important; align-self: center; }
.subhero h1 { font-size: 36px !important; line-height: 1.06 !important; }
.subhero .lede { font-size: 15px !important; margin-top: 14px !important; max-width: 34ch; }
}
@media (max-width: 480px) {
.subhero h1 { font-size: 30px !important; }
}
/* ──────────────────────────────────────────────────────────
5. Cards — uniform padding across all card families
.phase / .usecase / .deploy-card / .team-card / .value /
.compare / .contact-tile / .cgrid .cg
────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
.phase, .usecase, .deploy-card, .team-card, .value,
.contact-tile, .foundation, .proven, .cta, .form-card {
padding: 24px !important;
border-radius: 14px !important;
}
/* Tighter on smallest */
}
@media (max-width: 480px) {
.phase, .usecase, .deploy-card, .team-card, .value,
.contact-tile, .form-card {
padding: 20px !important;
}
.proven, .cta, .foundation {
padding: 28px 20px !important;
}
}
/* Phase cards — number badge spacing */
@media (max-width: 760px) {
.phase .num { margin-bottom: 14px; }
.phase h3 { margin-bottom: 10px; }
.phase p { margin-bottom: 16px; }
.phase ul { margin: 0 auto; padding-left: 0; }
.phase ul li { padding-left: 18px; position: relative; text-align: left; }
}
/* Use-case cards */
@media (max-width: 760px) {
.usecase .uc-tag { margin-bottom: 14px; }
.usecase h3 { margin-bottom: 10px; }
.usecase p { margin-bottom: 16px; }
.uc-list { padding-top: 14px; margin-top: 0; }
}
/* ──────────────────────────────────────────────────────────
6. Foundation pull-quote — left border looks wrong centered,
replace with top/bottom hairlines on mobile
────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
.foundation .pull {
padding-left: 0 !important;
border-left: 0 !important;
padding-top: 18px;
padding-bottom: 4px;
border-top: 1px solid rgba(23, 240, 152, 0.32);
margin-top: 24px;
font-size: 16px;
line-height: 1.45;
text-align: center !important;
}
.foundation .pull cite { margin-top: 12px; }
}
/* ──────────────────────────────────────────────────────────
7. Proven block — center-stacked stats on mobile
────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
.proven .copy { margin-top: 14px !important; }
.proven h2 { margin-top: 10px !important; }
.proven-stats {
margin-top: 28px;
width: 100%;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
}
.proven-stat { padding: 18px 14px !important; text-align: center; }
.proven-stat .n { font-size: 32px !important; }
.proven-stat .l { font-size: 10px !important; letter-spacing: 0.08em; }
}
@media (max-width: 480px) {
.proven-stats { grid-template-columns: 1fr !important; max-width: 280px; margin-inline: auto !important; }
.proven-stat .n { font-size: 36px !important; }
}
/* ──────────────────────────────────────────────────────────
8. CTA block — refined spacing, full-width button
────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
.cta .chip { margin-bottom: 16px; }
.cta h2 { margin-top: 0 !important; font-size: 30px !important; line-height: 1.1; }
.cta p { margin-top: 14px; max-width: 36ch; margin-inline: auto; font-size: 14.5px; }
.cta .actions { margin-top: 24px; }
}
@media (max-width: 480px) {
.cta h2 { font-size: 26px !important; }
}
/* ──────────────────────────────────────────────────────────
9. Comparison table — readable stacked cards
────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
.compare { border-radius: 14px; }
.compare-row + .compare-row { border-top: 1px solid var(--line); }
.compare-row {
padding: 16px 18px !important;
gap: 8px !important;
}
.compare-cell.feat { margin-bottom: 4px; }
.compare-cell:not(.feat) { font-size: 13.5px; }
.compare-cell.toto { padding-left: 12px !important; }
}
/* ──────────────────────────────────────────────────────────
10. Logo carousel — cleaner cell sizing, no crop
────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
.logo-marquee { padding: 4px 0; }
.logo-marquee .logo-cell {
width: 148px !important;
height: 96px !important;
padding: 16px 14px !important;
}
.logo-marquee .logo-cell img {
max-width: 78% !important;
max-height: 78% !important;
}
.logo-marquee .logo-cell::before {
width: 76% !important;
height: 76% !important;
}
}
@media (max-width: 480px) {
.logo-marquee .logo-cell {
width: 128px !important;
height: 84px !important;
padding: 14px 12px !important;
}
}
/* ──────────────────────────────────────────────────────────
11. Footer — clean centered stack
────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
.foot { padding-block: 40px 32px !important; }
.foot-inner { gap: 20px !important; }
.foot-brand img { height: 28px !important; }
.foot-links { gap: 12px 18px !important; row-gap: 12px; }
.foot-links a { font-size: 10px; letter-spacing: 0.1em; }
.foot .copy { font-size: 10.5px; letter-spacing: 0.06em; opacity: 0.7; }
}
/* ──────────────────────────────────────────────────────────
12. Nav drawer — tighter rhythm when open
────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
.nav-island { margin-top: 10px !important; top: 10px !important; padding: 0 14px !important; }
.nav-pill { min-height: 44px !important; padding: 5px 5px 5px 14px !important; }
.nav-pill .brand img { height: 36px !important; }
.nav-pill .btn-primary { height: 34px !important; padding: 0 13px !important; font-size: 12.5px; }
.nav-toggle { width: 36px; height: 36px; }
.nav-toggle .bars { width: 16px; height: 10px; }
.nav-toggle .bars span:nth-child(2) { top: 4.5px; }
.nav-toggle .bars span:nth-child(3) { top: 9px; }
/* When drawer open, give it more breathing room */
.nav-pill.is-open { padding-bottom: 12px !important; }
.nav-pill.is-open .nav-menu { padding: 10px 0 4px !important; gap: 2px !important; }
.nav-pill.is-open .nav-menu a {
padding: 12px 14px !important;
border-radius: 10px;
font-size: 14px !important;
color: var(--fg-2);
}
.nav-pill.is-open .nav-menu a:hover { background: rgba(255, 255, 255, 0.04); color: var(--fg); }
.nav-pill.is-open > .btn-primary { margin-top: 6px; height: 42px !important; font-size: 13.5px !important; }
}
/* ──────────────────────────────────────────────────────────
13. Chip — slightly smaller, more refined on mobile
────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
.chip {
height: 24px;
padding: 0 11px;
font-size: 10px;
letter-spacing: 0.12em;
}
.chip .dot { width: 5px; height: 5px; }
}
/* ──────────────────────────────────────────────────────────
14. Headlines — kill the .em wedge color when centered
(the muted fg-3 ".em" looked OK left-aligned, but on
mobile centered it splits the headline rhythm visually)
────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
.cta h2 .em, .hero h1 .em {
color: var(--fg); /* keep weight, drop the muted fade */
}
}
/* ──────────────────────────────────────────────────────────
15. Single source of truth for tap targets ≥44px
────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
.btn-lg { height: 48px !important; padding: 0 22px !important; }
.btn { min-height: 40px; }
}
/* ──────────────────────────────────────────────────────────
16. Final guard — no inline padding/margin overrides win
over these mobile rules. Inline style="padding-top:0" was
common in source HTML.
────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
section.section-pad[style*="padding-top:0"] { padding-top: 0 !important; }
/* Allow page-specific zeroed top padding to survive but apply our bottom */
}
/* ═════════════════════════════════════════════════════════
NAV PILL FIX — 2026-05-20 #4
Closed drawer was leaving a phantom second flex row.
Take .nav-menu out of flow when collapsed so the pill
collapses to a clean single-row height.
═════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
.nav-pill {
flex-wrap: nowrap !important;
min-height: 0 !important;
padding: 6px 6px 6px 14px !important;
align-items: center;
}
.nav-pill .brand img { height: 30px !important; }
.nav-pill .brand { margin-right: auto; }
/* Drawer items: absolutely positioned panel that drops under the pill */
.nav-menu {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
width: 100%;
flex-direction: column;
background: rgba(14, 16, 20, 0.92);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 14px;
padding: 6px;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
max-height: 0;
opacity: 0;
pointer-events: none;
overflow: hidden;
transition: max-height 0.3s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)),
opacity 0.25s var(--ease, ease);
}
.nav-pill.is-open .nav-menu {
max-height: 320px;
opacity: 1;
pointer-events: auto;
}
.nav-pill .nav-menu a {
padding: 12px 14px !important;
border-radius: 10px;
font-size: 14px !important;
color: var(--fg-2);
}
.nav-pill .nav-menu a:hover { background: rgba(255,255,255,0.05); color: var(--fg); }
/* The CTA in the bar stays visible at all times now */
.nav-pill > .btn-primary {
display: inline-flex !important;
order: 2;
width: auto;
margin: 0 0 0 4px;
height: 34px !important;
padding: 0 13px !important;
font-size: 12.5px !important;
}
/* Position the toggle last */
.nav-toggle { order: 3; margin-left: 4px; }
/* The island needs relative positioning for the absolute drawer to anchor */
.nav-island { position: sticky; }
.nav-island > .nav-pill { position: relative; }
}
@media (max-width: 480px) {
.nav-pill > .btn-primary {
/* Drop the CTA from the bar on very small screens — keep it in the drawer instead */
display: none !important;
}
.nav-pill.is-open > .btn-primary {
display: inline-flex !important;
order: 99;
width: 100%;
margin: 8px 0 0;
height: 42px !important;
font-size: 13.5px !important;
}
}
/* ═════════════════════════════════════════════════════════
NAV PILL — CLEANER MOBILE 2026-05-20 #5
Just: logo left, hamburger right. Nothing else in the bar.
CTA lives inside the drawer (full-width, last item).
═════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
.nav-pill {
flex-wrap: nowrap !important;
min-height: 0 !important;
padding: 8px 8px 8px 16px !important;
align-items: center;
gap: 12px !important;
}
.nav-pill .brand { margin-right: auto; }
.nav-pill .brand img { height: 28px !important; }
/* Always hide the CTA from the bar on mobile — it lives in the drawer only */
.nav-pill > .btn-primary { display: none !important; }
/* When drawer opens, show the CTA inside as the last item, full-width */
.nav-pill.is-open > .btn-primary {
display: inline-flex !important;
position: absolute;
top: calc(100% + 6px);
left: 0; right: 0;
width: 100%;
height: 44px !important;
margin: 0;
border-radius: 12px;
padding: 0 18px !important;
font-size: 14px !important;
/* The drawer above will sit at top: calc(100% + 6px) with its own height,
so we offset this CTA below the drawer using a transform once open. */
transform: translateY(0);
z-index: 10;
}
/* Refine the toggle button so it doesn't feel "stuck" inside the bar */
.nav-toggle {
width: 36px !important;
height: 36px !important;
border-radius: 10px;
background: transparent;
transition: background 0.2s var(--ease, ease);
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.05); }
.nav-pill.is-open .nav-toggle { background: rgba(23, 240, 152, 0.08); }
/* Drawer panel: clean, floating, no CTA inside (CTA is a separate full-width below) */
.nav-menu {
position: absolute;
top: calc(100% + 6px);
left: 0; right: 0;
width: 100%;
flex-direction: column;
background: rgba(14, 16, 20, 0.92);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 14px;
padding: 8px;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
max-height: 0;
opacity: 0;
pointer-events: none;
overflow: hidden;
transition: max-height 0.32s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)),
opacity 0.22s var(--ease, ease);
}
.nav-pill.is-open .nav-menu {
max-height: 280px;
opacity: 1;
pointer-events: auto;
}
.nav-pill .nav-menu a {
padding: 13px 14px !important;
border-radius: 10px;
font-size: 14px !important;
color: var(--fg-2);
}
.nav-pill .nav-menu a:hover {
background: rgba(255, 255, 255, 0.05);
color: var(--fg);
}
/* When CTA is shown inside the drawer, push it just below the panel */
.nav-pill.is-open > .btn-primary {
/* Drawer panel approx height = 4 links × 44 + 16 padding ≈ 188px,
plus 6px gap to pill = top: calc(100% + 200px) */
top: calc(100% + 200px);
}
}
/* ═════════════════════════════════════════════════════════
Honor authored \n line breaks inside copy blocks
The team has been hand-editing paragraphs with raw newlines
to control where lines break visually. This rule makes
those newlines render as actual breaks while still wrapping
normally when the container is narrower than the line.
═════════════════════════════════════════════════════════ */
.section-head p,
.section-head h2,
.section-head h2 .grad-text,
.phase p,
.usecase p,
.cta p,
.proven .copy,
.foundation .copy,
.subhero .lede,
.hero .lede {
white-space: pre-line;
}
/* On mobile, authored line breaks can fight the centered layout —
collapse them so paragraphs wrap naturally instead. */
@media (max-width: 760px) {
.section-head p,
.phase p,
.usecase p,
.cta p,
.proven .copy,
.foundation .copy,
.subhero .lede,
.hero .lede {
white-space: normal;
}
/* H2 inline breaks stay (they're intentional title shapes) */
}
/* Logo wordmark — larger on mobile */
@media (max-width: 760px) {
.nav-pill .brand img { height: 36px !important; }
}
@media (max-width: 480px) {
.nav-pill .brand img { height: 34px !important; }
}
/* ═════════════════════════════════════════════════════════
LOGO CELL PUCK FIX — no more white ovals
═════════════════════════════════════════════════════════ */
/* Kill the elliptical white background entirely */
.logo-marquee .logo-cell::before {
display: none !important;
}
.logo-marquee .logo-cell {
background: rgba(255, 255, 255, 0.94) !important;
border-color: rgba(255, 255, 255, 0.10) !important;
}
.logo-marquee .logo-cell:hover {
background: rgba(255, 255, 255, 1) !important;
border-color: rgba(23, 240, 152, 0.32) !important;
}
.logo-marquee .logo-cell img {
filter: none !important;
opacity: 1 !important;
max-width: 76% !important;
max-height: 76% !important;
}
@media (max-width: 760px) {
.logo-marquee .logo-cell { width: 148px !important; height: 96px !important; padding: 16px !important; }
}
@media (max-width: 480px) {
.logo-marquee .logo-cell { width: 128px !important; height: 84px !important; padding: 14px !important; }
}
/* Logo cells: transparent surface, larger logos */
.logo-marquee .logo-cell {
background: rgba(255, 255, 255, 0.06) !important;
border-color: rgba(255, 255, 255, 0.10) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.logo-marquee .logo-cell:hover {
background: rgba(255, 255, 255, 0.12) !important;
border-color: rgba(23, 240, 152, 0.32) !important;
}
.logo-marquee .logo-cell img {
max-width: 88% !important;
max-height: 88% !important;
filter: brightness(1.05) contrast(1.05) drop-shadow(0 0 1px rgba(255,255,255,0.4)) !important;
opacity: 0.95 !important;
}
.logo-marquee .logo-cell:hover img {
opacity: 1 !important;
filter: brightness(1.1) contrast(1.1) drop-shadow(0 0 1.5px rgba(255,255,255,0.55)) !important;
}
@media (max-width: 760px) {
.logo-marquee .logo-cell { width: 156px !important; height: 104px !important; padding: 14px !important; }
}
@media (max-width: 480px) {
.logo-marquee .logo-cell { width: 136px !important; height: 92px !important; padding: 12px !important; }
}
/* About page Mission section — center on mobile */
@media (max-width: 760px) {
[data-screen-label="02 Mission"] .grid-2 > div:first-child {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
[data-screen-label="02 Mission"] .grid-2 > div:first-child .chip {
align-self: center;
}
[data-screen-label="02 Mission"] .grid-2 > div:first-child p {
max-width: 38ch;
}
[data-screen-label="02 Mission"] .about-stats {
margin-inline: auto !important;
}
}