/* ==========================================================================
RECRYP — Design System
Void-black institutional shell (CTA-derived monochrome discipline) fused
with a single-accent component system (Linear-derived restraint).
Signature accent: brand coral-red, sampled directly from the Recryp mark
(#f42f54) — the one chromatic signal in an otherwise monochrome system.
========================================================================== */
/* Inter / Inter Tight / JetBrains Mono are loaded from HTML via
+ (see every page's ) rather than @import here, so the
font stylesheet fetch starts in parallel with this file instead of after it. */
:root {
/* ---- Surfaces (bottom → top) ---- */
--void: #06070a;
--carbon: #0c0e10;
--obsidian: #131517;
--slate: #1a1d20;
/* ---- Text ---- */
--paper: #f1efe6; /* primary — warm ledger-white, not pure white */
--mist: #a9a89e; /* secondary */
--ash: #6c6b63; /* tertiary / captions */
--ink-on-signal: #1c060b;
/* ---- The one accent — sampled from the Recryp mark ---- */
--signal: #f42f54; /* brand coral-red — corridor / settlement pulse */
--signal-dim: #c21f3f;
--signal-wash: rgba(244, 47, 84, 0.08);
--signal-wash-strong: rgba(244, 47, 84, 0.16);
/* ---- Hairlines ---- */
--line: rgba(241, 239, 230, 0.10);
--line-strong: rgba(241, 239, 230, 0.22);
--line-signal: rgba(244, 47, 84, 0.35);
/* ---- Type ---- */
--font-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
--font-body: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'IBM Plex Mono', monospace;
/* ---- Spacing ladder: 4/8/12/16/24/32/48/64/96/128 ---- */
--sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-24: 24px;
--sp-32: 32px; --sp-48: 48px; --sp-64: 64px; --sp-96: 96px; --sp-128: 128px;
/* ---- Radius: three-value vocabulary ---- */
--r-sm: 2px;
--r-md: 6px;
--r-pill: 999px;
--content-max: 1200px;
--ease: cubic-bezier(0.16, 1, 0.3, 1);
}
/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
body {
background: var(--void);
color: var(--paper);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.55;
font-weight: 400;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }
::selection { background: var(--signal); color: var(--ink-on-signal); }
:focus-visible {
outline: 1.5px solid var(--signal);
outline-offset: 3px;
border-radius: var(--r-sm);
}
/* ---- Type scale ---- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.02; letter-spacing: -0.02em; color: var(--paper); }
.eyebrow {
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--mist);
display: inline-flex;
align-items: center;
gap: var(--sp-8);
}
.eyebrow .dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--signal);
box-shadow: 0 0 0 3px var(--signal-wash);
flex: none;
}
.eyebrow.on-dark { color: var(--mist); }
.eyebrow b { color: var(--paper); font-weight: 500; }
.mono {
font-family: var(--font-mono);
letter-spacing: 0.06em;
}
/* ---- Layout helpers ---- */
.wrap {
max-width: var(--content-max);
margin-inline: auto;
padding-inline: var(--sp-24);
}
.section {
position: relative;
padding-block: var(--sp-96);
border-top: 1px solid var(--line);
}
.section-head {
max-width: 640px;
margin-bottom: var(--sp-48);
}
.section-head h2 {
font-size: clamp(28px, 3.4vw, 40px);
margin-top: var(--sp-16);
}
.section-head p {
margin-top: var(--sp-16);
color: var(--mist);
font-size: 17px;
line-height: 1.6;
max-width: 56ch;
}
@media (max-width: 720px) {
.section { padding-block: var(--sp-64); }
.wrap { padding-inline: var(--sp-16); }
}
.reveal {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
/* ==========================================================================
Buttons
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-8);
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
border-radius: var(--r-md);
padding: 14px 22px;
transition: transform 0.25s var(--ease), background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn-primary {
background: var(--signal);
color: var(--ink-on-signal);
box-shadow: 0 1px 0 0 rgba(255,255,255,0.25) inset, 0 8px 24px -8px var(--signal-wash-strong);
}
.btn-primary:hover { background: #ff5171; }
.btn-ghost {
background: transparent;
color: var(--paper);
border: 1px solid var(--line-strong);
}
.btn-ghost:hover { border-color: var(--signal); color: var(--signal); }
.btn-text {
color: var(--mist);
padding-inline: 0;
border-bottom: 1px solid transparent;
}
.btn-text:hover { color: var(--paper); border-color: var(--line-strong); }
/* ==========================================================================
Nav
========================================================================== */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
border-bottom: 1px solid transparent;
transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
}
.nav.is-scrolled {
background: rgba(6, 7, 10, 0.82);
backdrop-filter: blur(10px);
border-bottom-color: var(--line);
}
.nav .wrap {
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
}
.brand {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--font-display);
font-size: 17.5px;
font-weight: 600;
letter-spacing: -0.01em;
}
.brand .mark {
width: 30px;
height: 30px;
flex: none;
filter: drop-shadow(0 0 10px var(--signal-wash-strong));
}
.nav-links {
display: flex;
align-items: center;
gap: var(--sp-32);
}
.nav-links a {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--mist);
position: relative;
padding-bottom: 4px;
transition: color 0.2s var(--ease);
}
.nav-links a::after {
content: '';
position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
background: var(--signal);
transition: right 0.3s var(--ease);
}
.nav-links a:hover { color: var(--paper); }
.nav-links a:hover::after { right: 0; }
.nav-actions { display: flex; align-items: center; gap: var(--sp-16); }
.nav-cta { display: none; }
@media (min-width: 860px) { .nav-cta { display: inline-flex; } }
.nav-toggle {
display: flex;
flex-direction: column;
gap: 5px;
padding: 8px;
}
.nav-toggle span { width: 20px; height: 1.5px; background: var(--paper); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
@media (min-width: 860px) { .nav-toggle { display: none; } }
@media (max-width: 859px) { .nav-links { display: none; } }
.mobile-menu {
position: fixed; inset: 72px 0 0 0; z-index: 99;
background: var(--void);
border-top: 1px solid var(--line);
padding: var(--sp-32) var(--sp-24);
display: flex; flex-direction: column; gap: var(--sp-24);
transform: translateY(-8px);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.mobile-menu.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.mobile-menu a { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--paper); }
.mobile-menu .btn { align-self: flex-start; margin-top: var(--sp-16); }
/* ==========================================================================
Hero
========================================================================== */
.hero {
position: relative;
padding-top: 168px;
padding-bottom: var(--sp-96);
overflow: hidden;
}
.hero-map {
position: absolute;
inset: 0;
z-index: 0;
opacity: 0.55;
mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.55) 55%, transparent 92%);
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.55) 55%, transparent 92%);
}
.hero-map svg { width: 100%; height: 100%; }
.hero .wrap { position: relative; z-index: 1; }
.hero-head {
max-width: 900px;
}
.hero h1 {
font-size: clamp(40px, 7.4vw, 96px);
letter-spacing: -0.035em;
font-weight: 500;
margin-top: var(--sp-24);
}
.hero h1 span { display: block; }
.hero h1 .accent { color: var(--signal); }
.hero-sub {
margin-top: var(--sp-32);
font-size: clamp(16px, 1.6vw, 19px);
color: var(--mist);
max-width: 62ch;
line-height: 1.65;
}
.hero-actions {
margin-top: var(--sp-48);
display: flex;
align-items: center;
gap: var(--sp-24);
flex-wrap: wrap;
}
/* ---- Spec grid (label / value pairs) ---- */
.spec-grid {
margin-top: var(--sp-96);
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--line);
}
.spec-grid > div {
padding: var(--sp-24) var(--sp-24) var(--sp-24) 0;
border-right: 1px solid var(--line);
}
.spec-grid > div:last-child { border-right: none; padding-right: 0; }
.spec-label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ash);
margin-bottom: var(--sp-12);
}
.spec-value {
font-size: 14.5px;
color: var(--paper);
line-height: 1.5;
}
@media (max-width: 860px) {
.spec-grid { grid-template-columns: repeat(2, 1fr); }
.spec-grid > div { border-right: 1px solid var(--line); padding: var(--sp-24) var(--sp-16) var(--sp-24) 0; }
.spec-grid > div:nth-child(2n) { border-right: none; }
}
@media (max-width: 520px) {
.spec-grid { grid-template-columns: 1fr; }
.spec-grid > div { border-right: none; border-bottom: 1px solid var(--line); padding: var(--sp-20) 0; }
.spec-grid > div:last-child { border-bottom: none; }
}
/* ==========================================================================
Stat band
========================================================================== */
.stat-band {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-32);
margin-top: var(--sp-64);
}
.stat {
border-top: 1px solid var(--line-strong);
padding-top: var(--sp-24);
}
.stat .num {
font-family: var(--font-display);
font-size: clamp(36px, 4.2vw, 56px);
font-weight: 500;
letter-spacing: -0.02em;
color: var(--paper);
}
.stat .num .unit { color: var(--signal); }
.stat p { margin-top: var(--sp-12); color: var(--mist); font-size: 14.5px; line-height: 1.55; max-width: 32ch; }
.stat-source {
margin-top: var(--sp-32);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.05em;
color: var(--ash);
}
@media (max-width: 720px) {
.stat-band { grid-template-columns: 1fr; gap: var(--sp-24); }
}
/* ==========================================================================
Problem copy block
========================================================================== */
.problem-copy {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: var(--sp-64);
align-items: start;
}
.problem-copy p { color: var(--mist); font-size: 17px; line-height: 1.7; }
.problem-copy p + p { margin-top: var(--sp-16); }
@media (max-width: 860px) { .problem-copy { grid-template-columns: 1fr; gap: var(--sp-32); } }
/* ==========================================================================
Architecture stack
========================================================================== */
.stack {
display: flex;
flex-direction: column;
}
.stack-layer {
display: grid;
grid-template-columns: 56px 1.1fr 1.4fr;
gap: var(--sp-32);
padding-block: var(--sp-32);
border-top: 1px solid var(--line);
position: relative;
}
.stack-layer:last-child { border-bottom: 1px solid var(--line); }
.stack-icon-wrap, .cap-icon-wrap {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--sp-12);
}
.pixel-icon {
width: 26px;
height: 26px;
color: var(--signal);
flex: none;
display: block;
filter: drop-shadow(0 0 6px var(--signal-wash));
}
.stack-index, .cap-index {
font-family: var(--font-mono);
font-size: 13px;
color: var(--signal);
}
.stack-layer h3 {
font-size: 22px;
font-weight: 500;
letter-spacing: -0.01em;
}
.stack-layer .tag {
display: inline-block;
margin-top: var(--sp-12);
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ash);
}
.stack-layer p { color: var(--mist); font-size: 15px; line-height: 1.65; }
@media (max-width: 760px) {
.stack-layer { grid-template-columns: 48px 1fr; }
.stack-layer p { grid-column: 1 / -1; margin-top: var(--sp-4); }
}
/* ==========================================================================
Verticals grid
========================================================================== */
.verticals-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
}
.vertical-card {
background: var(--void);
padding: var(--sp-32);
transition: background-color 0.3s var(--ease);
}
.vertical-card:hover { background: var(--carbon); }
.vertical-card .vc-index { font-family: var(--font-mono); font-size: 11px; color: var(--ash); }
.vertical-card h3 { font-size: 18px; font-weight: 500; margin-top: var(--sp-16); letter-spacing: -0.01em; }
.vertical-card p { margin-top: var(--sp-12); color: var(--mist); font-size: 14.5px; line-height: 1.6; }
@media (max-width: 920px) { .verticals-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .verticals-grid { grid-template-columns: 1fr; } }
/* ==========================================================================
Roadmap
========================================================================== */
.roadmap {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-24);
}
.road-item {
border-top: 2px solid var(--line-strong);
padding-top: var(--sp-20);
position: relative;
}
.road-item.is-active { border-top-color: var(--signal); }
.road-item .rs-label {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ash);
display: flex;
align-items: center;
justify-content: space-between;
}
.road-item.is-active .rs-label { color: var(--signal); }
.road-item h3 { font-size: 16.5px; font-weight: 500; margin-top: var(--sp-12); }
.road-item p { margin-top: var(--sp-8); color: var(--mist); font-size: 14px; line-height: 1.6; }
.road-pill {
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: 0.08em;
padding: 2px 8px;
border-radius: var(--r-pill);
border: 1px solid var(--line-strong);
color: var(--ash);
}
.road-item.is-active .road-pill { border-color: var(--line-signal); color: var(--signal); background: var(--signal-wash); }
@media (max-width: 860px) {
.roadmap { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-32); }
}
@media (max-width: 520px) {
.roadmap { grid-template-columns: 1fr; }
}
/* ==========================================================================
Contact
========================================================================== */
.contact-section {
background: var(--carbon);
}
.contact-grid {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: var(--sp-96);
}
.contact-copy h2 { font-size: clamp(28px, 3.6vw, 44px); margin-top: var(--sp-16); }
.contact-copy p { margin-top: var(--sp-16); color: var(--mist); font-size: 16.5px; line-height: 1.65; max-width: 44ch; }
.contact-direct {
margin-top: var(--sp-48);
padding-top: var(--sp-24);
border-top: 1px solid var(--line);
}
.contact-direct .spec-label { margin-bottom: var(--sp-8); }
.contact-direct a { font-family: var(--font-mono); font-size: 15px; color: var(--paper); }
.contact-direct a:hover { color: var(--signal); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: var(--sp-48); } }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-20); }
.form-row + .form-row, .field + .field { margin-top: var(--sp-20); }
.form-row .field { margin: 0; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; gap: var(--sp-20); } }
.field label {
display: block;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ash);
margin-bottom: var(--sp-8);
}
.field input,
.field select,
.field textarea {
width: 100%;
background: rgba(241, 239, 230, 0.03);
border: 1px solid var(--line-strong);
border-radius: var(--r-md);
color: var(--paper);
font-family: var(--font-body);
font-size: 15px;
padding: 13px 14px;
transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder, .field textarea::placeholder { color: var(--ash); }
.field input:focus, .field select:focus, .field textarea:focus {
outline: none;
border-color: var(--signal);
background: rgba(34, 232, 200, 0.04);
}
.field select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a9a89e' stroke-width='1.3' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
}
.field select option { background: var(--obsidian); color: var(--paper); }
.field-hint { margin-top: 6px; font-size: 12.5px; color: var(--ash); min-height: 16px; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #e5675f; }
.field.has-error .field-hint { color: #e5947d; }
/* honeypot — hidden from real users, present for bots */
.hp-field { position: absolute; left: -9999px; top: -9999px; opacity: 0; height: 0; overflow: hidden; }
.form-foot {
margin-top: var(--sp-32);
display: flex;
align-items: center;
gap: var(--sp-24);
flex-wrap: wrap;
}
.form-note { font-family: var(--font-mono); font-size: 11px; color: var(--ash); line-height: 1.6; max-width: 32ch; }
.form-status {
margin-top: var(--sp-20);
font-family: var(--font-mono);
font-size: 12.5px;
letter-spacing: 0.02em;
padding: 12px 14px;
border-radius: var(--r-md);
border: 1px solid var(--line-strong);
display: none;
}
.form-status.is-visible { display: block; }
.form-status.is-success { color: var(--signal); border-color: var(--line-signal); background: var(--signal-wash); }
.form-status.is-error { color: #e5947d; border-color: rgba(229, 103, 95, 0.4); background: rgba(229, 103, 95, 0.08); }
button[type="submit"][disabled] { opacity: 0.6; cursor: progress; }
/* ==========================================================================
Footer
========================================================================== */
.footer { border-top: 1px solid var(--line); padding-block: var(--sp-64) var(--sp-32); }
.footer-top { display: flex; justify-content: space-between; gap: var(--sp-48); flex-wrap: wrap; }
.footer-brand .brand { margin-bottom: var(--sp-20); font-size: 22px; gap: 14px; }
.footer-brand .brand .mark { width: 42px; height: 42px; filter: drop-shadow(0 0 16px var(--signal-wash-strong)); }
.footer-brand p { color: var(--mist); font-size: 14.5px; max-width: 34ch; line-height: 1.6; }
.footer-addr {
margin-top: var(--sp-20);
display: flex;
gap: var(--sp-24);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.05em;
color: var(--ash);
}
.footer-cols { display: flex; gap: var(--sp-64); flex-wrap: wrap; }
.footer-col .spec-label { margin-bottom: var(--sp-16); }
.footer-col a { display: block; color: var(--mist); font-size: 14px; margin-bottom: var(--sp-12); transition: color 0.2s var(--ease); }
.footer-col a:hover { color: var(--paper); }
.footer-col button.footer-link-btn {
display: block;
width: 100%;
text-align: left;
color: var(--mist);
font-size: 14px;
margin-bottom: var(--sp-12);
transition: color 0.2s var(--ease);
}
.footer-col button.footer-link-btn:hover { color: var(--paper); }
.footer-bottom {
margin-top: var(--sp-64);
padding-top: var(--sp-24);
border-top: 1px solid var(--line);
display: flex;
justify-content: space-between;
gap: var(--sp-16);
flex-wrap: wrap;
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--ash);
letter-spacing: 0.03em;
}
/* ==========================================================================
Rail-map SVG animation
========================================================================== */
.rail-node circle.core { fill: var(--paper); }
.rail-node circle.ring { fill: none; stroke: var(--signal); stroke-width: 1; opacity: 0.5; }
.rail-node text { font-family: var(--font-mono); font-size: 9px; fill: var(--ash); letter-spacing: 0.05em; }
.rail-node-hub circle.core { fill: var(--signal); }
.rail-node-hub circle.ring { stroke-width: 1.5; opacity: 0.85; }
.rail-node-hub text { fill: var(--signal); font-size: 10px; font-weight: 500; letter-spacing: 0.08em; }
.rail-path { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.rail-packet { fill: var(--signal); filter: drop-shadow(0 0 4px var(--signal)); }
.rail-grid-dot { fill: var(--line); }
@media (prefers-reduced-motion: reduce) {
.rail-packet { animation: none !important; opacity: 0; }
}
/* ==========================================================================
Legal pages — long-form policy content
========================================================================== */
.legal-hero { padding-top: var(--sp-32); padding-bottom: var(--sp-48); }
.legal-hero h1 { font-size: clamp(30px, 4.4vw, 48px); letter-spacing: -0.03em; max-width: 820px; }
.legal-updated {
margin-top: var(--sp-16);
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: 0.06em;
color: var(--ash);
text-transform: uppercase;
}
.legal-intro { margin-top: var(--sp-20); color: var(--mist); font-size: 16px; line-height: 1.7; max-width: 68ch; }
.legal-layout { display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-64); align-items: start; }
.legal-toc { position: sticky; top: 104px; display: flex; flex-direction: column; gap: var(--sp-8); }
.legal-toc a {
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: 0.03em;
color: var(--ash);
padding: 6px 0;
border-left: 2px solid var(--line);
padding-left: var(--sp-12);
transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.legal-toc a:hover { color: var(--paper); border-left-color: var(--line-strong); }
.legal-body { max-width: 72ch; }
.legal-body section { padding-block: var(--sp-32); border-top: 1px solid var(--line); }
.legal-body section:first-child { border-top: none; padding-top: 0; }
.legal-body h2 {
font-size: 20px;
font-weight: 500;
letter-spacing: -0.005em;
scroll-margin-top: 100px;
}
.legal-body h2 .legal-num { color: var(--signal); font-family: var(--font-mono); font-size: 13px; margin-right: var(--sp-12); }
.legal-body p { margin-top: var(--sp-16); color: var(--mist); font-size: 15px; line-height: 1.75; }
.legal-body ul { margin-top: var(--sp-16); padding-left: 1.2em; }
.legal-body li { color: var(--mist); font-size: 15px; line-height: 1.75; list-style: disc; margin-bottom: var(--sp-8); }
.legal-body strong { color: var(--paper); font-weight: 500; }
.legal-body a { color: var(--paper); border-bottom: 1px solid var(--line-strong); }
.legal-body a:hover { color: var(--signal); border-color: var(--line-signal); }
.legal-placeholder {
color: var(--signal);
border-bottom: 1px dashed var(--line-signal);
padding: 0 2px;
font-style: normal;
}
@media (max-width: 860px) {
.legal-layout { grid-template-columns: 1fr; gap: var(--sp-32); }
.legal-toc { position: static; flex-direction: row; flex-wrap: wrap; gap: var(--sp-16); }
}
/* ==========================================================================
DNA pixel-pattern divider — a repeating ladder of pixel "base pairs",
the same grid-glyph language as the icon set, used as a signature
transitional flourish between sections.
========================================================================== */
.dna-divider { width: 100%; line-height: 0; opacity: 0.9; }
.dna-divider svg { display: block; width: 100%; height: 12px; }
/* ==========================================================================
Consent banner
========================================================================== */
.consent-banner {
position: fixed;
left: var(--sp-16);
right: var(--sp-16);
bottom: var(--sp-16);
z-index: 200;
max-width: 720px;
margin-inline: auto;
background: var(--obsidian);
border: 1px solid var(--line-strong);
border-radius: var(--r-md);
box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.6);
padding: var(--sp-24);
transform: translateY(calc(100% + 24px));
opacity: 0;
transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
.consent-banner.is-visible { transform: translateY(0); opacity: 1; }
.consent-inner { display: flex; flex-direction: column; gap: var(--sp-20); }
.consent-text { font-size: 13.5px; line-height: 1.6; color: var(--mist); }
.consent-text a { color: var(--paper); border-bottom: 1px solid var(--line-strong); }
.consent-text a:hover { color: var(--signal); border-color: var(--line-signal); }
.consent-actions { display: flex; align-items: center; gap: var(--sp-16); flex-wrap: wrap; }
.consent-actions .btn { flex: none; }
@media (max-width: 520px) {
.consent-banner { left: var(--sp-12); right: var(--sp-12); bottom: var(--sp-12); padding: var(--sp-20); }
.consent-actions .btn { flex: 1 1 auto; }
}
/* ==========================================================================
Vertical pages — breadcrumb, sub-hero, switcher, capabilities,
scenarios, FAQ
========================================================================== */
.breadcrumb {
padding-top: 104px;
padding-bottom: var(--sp-24);
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: 0.06em;
color: var(--ash);
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.breadcrumb a { color: var(--ash); transition: color 0.2s var(--ease); }
.breadcrumb a:hover { color: var(--paper); }
.breadcrumb .sep { color: var(--line-strong); }
.breadcrumb .current { color: var(--mist); }
/* ---- Vertical switcher: jump between the six audience pages ---- */
.v-switcher {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
overflow-x: auto;
scrollbar-width: none;
}
.v-switcher::-webkit-scrollbar { display: none; }
.v-switcher .wrap {
display: flex;
gap: var(--sp-8);
padding-block: var(--sp-12);
width: max-content;
min-width: 100%;
}
.v-pill {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--mist);
padding: 8px 14px;
border-radius: var(--r-pill);
border: 1px solid var(--line-strong);
white-space: nowrap;
transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.v-pill:hover { color: var(--paper); border-color: var(--line-strong); }
.v-pill.is-current { color: var(--signal); border-color: var(--line-signal); background: var(--signal-wash); }
/* ---- Sub-hero (vertical page header) ---- */
.v-hero { padding-top: var(--sp-32); padding-bottom: var(--sp-64); }
.v-hero .v-index {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.08em;
color: var(--signal);
margin-bottom: var(--sp-16);
}
.v-hero h1 {
font-size: clamp(34px, 5.4vw, 64px);
letter-spacing: -0.03em;
max-width: 920px;
}
.v-hero .v-sub {
margin-top: var(--sp-24);
font-size: clamp(16px, 1.4vw, 18.5px);
color: var(--mist);
max-width: 62ch;
line-height: 1.65;
}
.v-hero .hero-actions { margin-top: var(--sp-40); }
/* ---- Capabilities list (architecture reframed per audience) ---- */
.capabilities { display: flex; flex-direction: column; }
.cap-item {
display: grid;
grid-template-columns: 56px 1fr;
gap: var(--sp-32);
padding-block: var(--sp-28);
border-top: 1px solid var(--line);
}
.cap-item:last-child { border-bottom: 1px solid var(--line); }
.cap-item h3 { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: var(--sp-12); }
.cap-item p { color: var(--mist); font-size: 15px; line-height: 1.65; max-width: 70ch; }
@media (max-width: 700px) {
.cap-item { grid-template-columns: 40px 1fr; }
}
/* ---- Scenario / illustrative use-case cards ---- */
.scenario-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-24);
}
.scenario-card {
background: var(--carbon);
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: var(--sp-28);
display: flex;
flex-direction: column;
}
.scenario-tag {
align-self: flex-start;
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ash);
border: 1px solid var(--line-strong);
border-radius: var(--r-pill);
padding: 3px 10px;
margin-bottom: var(--sp-20);
}
.scenario-card h3 { font-size: 17px; font-weight: 500; letter-spacing: -0.005em; margin-bottom: var(--sp-12); }
.scenario-card p { color: var(--mist); font-size: 14.5px; line-height: 1.65; }
@media (max-width: 920px) { .scenario-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .scenario-grid { grid-template-columns: 1fr; } }
/* ---- FAQ accordion (native ) ---- */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
cursor: pointer;
list-style: none;
padding-block: var(--sp-24);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-24);
font-size: 16.5px;
font-weight: 500;
color: var(--paper);
letter-spacing: -0.005em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .faq-icon {
flex: none;
width: 20px; height: 20px;
border: 1px solid var(--line-strong);
border-radius: 50%;
position: relative;
transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.faq-item summary .faq-icon::before,
.faq-item summary .faq-icon::after {
content: '';
position: absolute;
top: 50%; left: 50%;
background: var(--mist);
transition: transform 0.2s var(--ease), background-color 0.2s var(--ease);
}
.faq-item summary .faq-icon::before { width: 8px; height: 1px; transform: translate(-50%, -50%); }
.faq-item summary .faq-icon::after { width: 1px; height: 8px; transform: translate(-50%, -50%); }
.faq-item[open] summary .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-item[open] summary .faq-icon { border-color: var(--signal); }
.faq-item[open] summary .faq-icon::before { background: var(--signal); }
.faq-item p.faq-a {
color: var(--mist);
font-size: 15px;
line-height: 1.7;
max-width: 68ch;
padding-bottom: var(--sp-24);
}
/* ---- CTA band (per-vertical, links to homepage contact w/ prefill) ---- */
.v-cta {
background: var(--carbon);
border-radius: var(--r-md);
border: 1px solid var(--line);
padding: var(--sp-48);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-32);
flex-wrap: wrap;
}
.v-cta h3 { font-size: clamp(20px, 2.4vw, 26px); max-width: 30ch; }
.v-cta p { margin-top: var(--sp-8); color: var(--mist); font-size: 14.5px; max-width: 42ch; }
/* ---- Homepage verticals teaser (replaces detailed cards) ---- */
.v-teaser-card { display: flex; flex-direction: column; height: 100%; }
.v-teaser-card .vc-arrow {
margin-top: var(--sp-16);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ash);
transition: color 0.2s var(--ease), gap 0.2s var(--ease);
display: inline-flex;
align-items: center;
gap: 6px;
}
.vertical-card:hover .vc-arrow { color: var(--signal); gap: 10px; }
.verticals-foot { margin-top: var(--sp-48); text-align: center; }