/* Fonts loaded via in each page — see HTML files.
Families: Poppins (headings), DM Sans (body), DM Mono (mono/buttons/nav),
Press Start 2P (stats/highlights), Silkscreen (brand logos) */
/* ============================================================
SecuriQuest — Shared Design System
styles.css
============================================================
Table of contents
1. Custom properties (design tokens)
2. Reset & base
3. Typography scale
4. Navigation
5. Footer
6. Buttons
7. Section labels
8. Glow & atmosphere utilities
9. Photo slots
10. Shared section primitives
11. Compliance badges
12. Responsive breakpoints
============================================================ */
/* ── 1. CUSTOM PROPERTIES ──────────────────────────────────── */
:root {
/* Backgrounds */
--black: #06070a;
--deep: #0b0d13;
--surface: #10131c;
--surface2: #161a26;
/* Brand colours */
--purple: #7b5cf5;
--purple-dim: #5b3fd4;
--purple-glow: rgba(123, 92, 245, 0.12);
--purple-border: rgba(123, 92, 245, 0.30);
--cyan: #22d3ee;
--cyan-glow: rgba(34, 211, 238, 0.08);
--yellow: #fbbf24;
--yellow-glow: rgba(251, 191, 36, 0.08);
--yellow-border: rgba(251, 191, 36, 0.25);
--red: #f87171;
--green: #4ade80;
--green-dim: #22c55e;
--green-glow: rgba(74, 222, 128, 0.25);
/* Text */
--text: #f2f2f4;
--muted: #7a7f94;
--border: rgba(255, 255, 255, 0.07);
/* Layout */
--max-width: 960px;
--page-padding: 2.5rem;
--font-size-min: 0.9rem; /* Floor — no user-visible text below this */
/* Nav */
--nav-height: 100px;
}
/* ── 2. RESET & BASE ───────────────────────────────────────── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
overflow-x: hidden; /* prevents horizontal scroll without breaking position:fixed */
}
body {
background: var(--black);
color: var(--text);
font-family: 'DM Sans', sans-serif;
font-weight: 300;
line-height: 1.7;
/* overflow-x intentionally on html, not body — body overflow breaks position:fixed on Android/WebKit */
}
img, video {
max-width: 100%;
display: block;
}
a {
color: inherit;
}
/* Skip-to-content for accessibility */
.skip-link {
position: absolute;
top: -100%;
left: 1rem;
background: var(--purple);
color: #fff;
padding: 0.5rem 1rem;
border-radius: 0 0 6px 6px;
font-family: 'DM Mono', monospace;
font-size: 0.9rem;
letter-spacing: 0.1em;
text-decoration: none;
z-index: 999;
transition: top 0.2s;
}
.skip-link:focus {
top: 0;
}
/* ── Screen-reader only utility ──────────────────────────── */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* ── Focus-visible: keyboard navigation indicator ────────── */
:focus-visible {
outline: 2px solid var(--purple);
outline-offset: 3px;
border-radius: 4px;
}
/* Suppress focus ring for mouse/touch users */
:focus:not(:focus-visible) {
outline: none;
}
/* Stronger ring on buttons (higher contrast surface) */
.btn-primary:focus-visible,
.btn-secondary:focus-visible {
outline-color: #fff;
outline-offset: 3px;
}
/* Nav links */
.nav-links a:focus-visible,
.nav-mobile a:focus-visible,
.footer-links a:focus-visible {
outline: 2px solid var(--purple);
outline-offset: 4px;
border-radius: 3px;
}
/* ── 3. TYPOGRAPHY SCALE ───────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: 'Poppins', sans-serif;
font-weight: 700;
line-height: 1.35;
letter-spacing: -0.01em;
color: var(--text);
}
h1 { font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -0.02em; font-weight: 800; }
h2 { font-size: clamp(1.4rem, 2.8vw, 2rem); letter-spacing: -0.01em; font-weight: 700; }
h3 { font-size: clamp(0.9rem, 1.6vw, 1.1rem); font-weight: 600; letter-spacing: 0; }
h4 { font-size: 0.9rem; font-weight: 600; letter-spacing: 0; }
/* Colour highlights inside headings */
h1 em, h2 em {
font-style: normal;
color: var(--purple);
}
/* Brand name highlight — used for inline SecuriQuest mentions in body text */
.brand {
color: var(--purple);
font-weight: 600;
}
p {
font-size: 1.15rem;
color: rgba(242,242,244,0.85);
line-height: 1.9;
}
p strong {
color: var(--text);
font-weight: 400;
}
/* Lead paragraph — slightly larger body copy */
.lead {
font-size: 1.28rem;
color: rgba(242,242,244,0.80);
line-height: 1.9;
}
/* Mono utility */
.mono {
font-family: 'DM Mono', monospace;
}
/* ── 4. NAVIGATION ─────────────────────────────────────────── */
nav {
position: sticky;
top: 0;
left: 0;
right: 0;
z-index: 100;
height: var(--nav-height);
background: linear-gradient(180deg, rgba(11, 13, 19, 0.97) 0%, rgba(6, 7, 10, 0.92) 100%);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--page-padding);
}
.nav-logo {
text-decoration: none;
flex-shrink: 0;
display: flex;
align-items: center;
}
.nav-logo-mark {
display: block;
height: 90px;
width: auto;
}
.nav-links {
display: flex;
gap: 1.5rem;
list-style: none;
align-items: center;
}
.nav-links a {
font-family: 'DM Mono', monospace;
font-size: 0.91rem;
letter-spacing: 0.10em;
text-transform: uppercase;
color: rgba(242,242,244,0.8);
text-decoration: none;
transition: color 0.2s;
white-space: nowrap;
}
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--purple); }
/* Product chip links */
.nav-links .chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 13px;
border-radius: 20px;
font-family: 'DM Mono', monospace;
font-size: 0.9rem;
letter-spacing: 0.09em;
text-transform: uppercase;
transition: all 0.2s;
}
.nav-links .chip-escape {
background: rgba(123, 92, 245, 0.12);
color: var(--purple);
border: 1px solid rgba(123, 92, 245, 0.40);
}
.nav-links .chip-escape:hover {
background: rgba(123, 92, 245, 0.22);
box-shadow: 0 0 14px rgba(123, 92, 245, 0.28);
color: var(--purple);
}
.nav-links .chip-escape.active {
background: rgba(123, 92, 245, 0.22);
color: var(--purple);
}
.nav-links .chip-btc {
background: rgba(251, 191, 36, 0.09);
color: var(--yellow);
border: 1px solid rgba(251, 191, 36, 0.40);
}
.nav-links .chip-btc:hover {
background: rgba(251, 191, 36, 0.18);
box-shadow: 0 0 14px rgba(251, 191, 36, 0.22);
color: var(--yellow);
}
.nav-links .chip-btc.active {
background: rgba(251, 191, 36, 0.18);
color: var(--yellow);
}
/* Thin divider between chip group and regular links */
.nav-links .nav-divider {
width: 1px;
height: 16px;
background: var(--border);
flex-shrink: 0;
}
.nav-cta {
font-family: 'DM Mono', monospace;
font-size: 0.9rem;
letter-spacing: 0.12em;
text-transform: uppercase;
background: var(--green);
color: #06070a;
font-weight: 700;
padding: 9px 20px;
border-radius: 6px;
text-decoration: none;
box-shadow: 0 0 18px rgba(74, 222, 128, 0.28);
transition: background 0.2s, box-shadow 0.2s;
flex-shrink: 0;
white-space: nowrap;
}
.nav-cta:hover {
background: var(--green-dim);
box-shadow: 0 0 28px rgba(74, 222, 128, 0.45);
}
/* ── Language switcher ──────────────────────────────────── */
.lang-switcher {
display: flex; gap: 0.25rem; flex-shrink: 0; align-items: center;
}
.lang-btn {
font-family: 'DM Mono', monospace;
font-size: 0.72rem; letter-spacing: 0.06em;
padding: 5px 8px; border-radius: 5px;
text-decoration: none; color: var(--muted);
border: 1px solid transparent;
transition: color 0.15s, border-color 0.15s, background 0.15s;
white-space: nowrap;
}
.lang-btn:hover { color: var(--text); border-color: var(--border); }
.lang-btn.active {
color: var(--text);
border-color: rgba(255,255,255,0.15);
background: rgba(255,255,255,0.05);
}
@media (max-width: 768px) { .lang-switcher { display: none; } }
/* Hamburger button — hidden on desktop */
.nav-hamburger {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 44px;
height: 44px;
background: transparent;
border: 1px solid var(--border);
border-radius: 6px;
cursor: pointer;
padding: 0;
flex-shrink: 0;
}
.nav-hamburger span {
display: block;
width: 18px;
height: 1.5px;
background: var(--muted);
border-radius: 2px;
transition: transform 0.25s, opacity 0.2s, width 0.2s;
transform-origin: center;
}
/* Mobile drawer */
.nav-mobile {
display: none;
position: fixed;
top: var(--nav-height);
left: 0;
right: 0;
background: var(--black); /* fully opaque — never depends on alpha or backdrop-filter to hide content */
backdrop-filter: blur(20px); /* progressive enhancement only */
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border);
padding: 1.5rem var(--page-padding) 2rem;
z-index: 99;
flex-direction: column;
gap: 0;
height: auto; /* override base nav { height: var(--nav-height) } */
max-height: calc(100vh - var(--nav-height)); /* don't exceed viewport below the bar */
overflow-y: auto; /* scroll if links exceed the space (landscape phones) */
-webkit-overflow-scrolling: touch;
}
.nav-mobile.open {
display: flex;
}
.nav-mobile a {
font-family: 'DM Mono', monospace;
font-size: 0.9rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
text-decoration: none;
padding: 0.85rem 0;
border-bottom: 1px solid var(--border);
display: block;
transition: color 0.2s;
}
.nav-mobile a:last-child { border-bottom: none; }
.nav-mobile a:hover,
.nav-mobile a.active { color: var(--text); }
.nav-mobile a.mobile-cta {
margin-top: 1rem;
color: var(--green);
border: 1px solid rgba(74, 222, 128, 0.30);
border-radius: 6px;
padding: 0.75rem 1rem;
text-align: center;
}
/* Mobile product chips */
.nav-mobile a.chip-escape { color: var(--purple); }
.nav-mobile a.chip-btc { color: var(--yellow); }
/* Hamburger open state */
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* ── 5. FOOTER ─────────────────────────────────────────────── */
footer {
background: var(--black);
border-top: 1px solid var(--border);
padding: 2rem var(--page-padding);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
}
.footer-logo {
display: flex;
align-items: center;
}
.footer-logo-mark {
display: block;
height: 50px;
width: auto;
opacity: 0.75;
}
.footer-links {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
list-style: none;
}
.footer-links a {
font-family: 'DM Mono', monospace;
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
text-decoration: none;
transition: color 0.2s;
}
.footer-links a:hover { color: var(--text); }
.footer-copy {
font-family: 'DM Mono', monospace;
font-size: 0.7rem;
letter-spacing: 0.08em;
color: var(--muted);
white-space: nowrap;
}
/* ── 6. BUTTONS ────────────────────────────────────────────── */
.btn-primary {
font-family: 'DM Mono', monospace;
font-size: 0.9rem;
letter-spacing: 0.12em;
text-transform: uppercase;
background: var(--green);
color: #06070a;
font-weight: 700;
padding: 13px 26px;
border-radius: 7px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: 0 0 20px rgba(74, 222, 128, 0.30);
transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
white-space: nowrap;
border: none;
cursor: pointer;
}
.btn-primary:hover {
background: var(--green-dim);
transform: translateY(-1px);
box-shadow: 0 4px 30px rgba(74, 222, 128, 0.48);
}
/* Secondary — purple action (formerly btn-primary style) */
.btn-secondary {
font-family: 'DM Mono', monospace;
font-size: 0.9rem;
letter-spacing: 0.12em;
text-transform: uppercase;
background: var(--purple);
color: #fff;
padding: 13px 26px;
border-radius: 7px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: 0 0 18px rgba(123, 92, 245, 0.25);
transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
white-space: nowrap;
border: none;
cursor: pointer;
}
.btn-secondary:hover {
background: var(--purple-dim);
transform: translateY(-1px);
box-shadow: 0 4px 28px rgba(123, 92, 245, 0.45);
}
.btn-outline {
font-family: 'DM Mono', monospace;
font-size: 0.9rem;
letter-spacing: 0.12em;
text-transform: uppercase;
background: transparent;
color: rgba(242,242,244,0.8);
padding: 13px 26px;
border-radius: 7px;
text-decoration: none;
border: 1px solid var(--border);
display: inline-flex;
align-items: center;
gap: 8px;
transition: border-color 0.2s, color 0.2s, transform 0.15s;
white-space: nowrap;
cursor: pointer;
}
.btn-outline:hover {
border-color: rgba(123, 92, 245, 0.40);
color: var(--text);
transform: translateY(-1px);
}
.btn-ghost-sm {
font-family: 'DM Mono', monospace;
font-size: 0.9rem;
letter-spacing: 0.1em;
text-transform: uppercase;
background: transparent;
color: var(--muted);
padding: 10px 18px;
border-radius: 7px;
text-decoration: none;
border: 1px solid var(--border);
display: inline-flex;
align-items: center;
gap: 6px;
transition: color 0.2s, border-color 0.2s;
white-space: nowrap;
cursor: pointer;
}
.btn-ghost-sm:hover {
color: var(--text);
border-color: rgba(255, 255, 255, 0.15);
}
/* ── 7. SECTION LABELS ─────────────────────────────────────── */
.section-label {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 1.25rem;
}
.sl-line {
width: 24px;
height: 1px;
background: var(--purple);
flex-shrink: 0;
}
.sl-text {
font-family: 'DM Mono', monospace;
font-size: 0.9rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--purple);
}
/* Eyebrow with dot (hero sections) */
.eyebrow {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 1.5rem;
}
.eyebrow-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--cyan);
box-shadow: 0 0 8px var(--cyan);
flex-shrink: 0;
}
.eyebrow-text {
font-family: 'DM Mono', monospace;
font-size: 0.9rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--cyan);
}
/* Pull quote */
.pull-quote {
border-left: 2px solid var(--purple);
padding: 1.25rem 1.75rem;
background: var(--purple-glow);
border-radius: 0 10px 10px 0;
margin: 2.5rem 0;
}
.pull-quote p {
font-size: 1rem;
color: var(--text);
font-style: italic;
line-height: 1.75;
margin: 0;
}
/* Inline text link */
.text-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'DM Mono', monospace;
font-size: 0.9rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--purple);
text-decoration: none;
transition: gap 0.2s;
}
.text-link:hover { gap: 12px; }
/* ── 8. GLOW & ATMOSPHERE ──────────────────────────────────── */
.glow-blob {
position: absolute;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
}
/* Scan-line overlay — applied to hero sections via class */
.scanlines::after {
content: '';
position: absolute;
inset: 0;
z-index: 2;
background: repeating-linear-gradient(
0deg,
transparent 0px,
transparent 3px,
rgba(0, 0, 0, 0.03) 3px,
rgba(0, 0, 0, 0.03) 4px
);
pointer-events: none;
}
/* Floating particle dots */
.particle {
position: absolute;
border-radius: 50%;
pointer-events: none;
}
/* ── Section background utilities ──────────────────────────── */
.bg-black { background: var(--black); }
.bg-surface { background: var(--surface); }
.bg-deep { background: var(--deep); }
/* ── Atmospheric hue overlays ──────────────────────────────── */
/* Large, blurry ambient glows. Each class uses a different
anchor point so consecutive sections create a natural rhythm:
top-center → bottom-left → top-right → center → left/right split
All pseudo-elements use filter:blur for genuine softness. */
/* Purple bloom — top-center (heroes / first sections) */
.hue-purple-top { position: relative; overflow: hidden; }
.hue-purple-top::before {
content: '';
position: absolute; top: -20%; left: 50%; transform: translateX(-50%);
width: 1600px; height: 1000px;
background: radial-gradient(ellipse at 50% 10%,
rgba(123, 92, 245, 0.20) 0%,
rgba(123, 92, 245, 0.06) 45%,
transparent 75%);
filter: blur(40px);
pointer-events: none; z-index: 0;
}
/* Cyan bloom — bottom-left (rhythm step 2) */
.hue-cyan-br { position: relative; overflow: hidden; }
.hue-cyan-br::before {
content: '';
position: absolute; bottom: -20%; left: -10%;
width: 1400px; height: 1000px;
background: radial-gradient(ellipse at 15% 90%,
rgba(34, 211, 238, 0.22) 0%,
rgba(34, 211, 238, 0.07) 45%,
transparent 75%);
filter: blur(50px);
pointer-events: none; z-index: 0;
}
.hue-cyan-br::after {
content: '';
position: absolute; top: -10%; right: -10%;
width: 900px; height: 700px;
background: radial-gradient(ellipse at 90% 10%,
rgba(123, 92, 245, 0.12) 0%,
transparent 70%);
filter: blur(40px);
pointer-events: none; z-index: 0;
}
/* Yellow bloom — top-right (rhythm step 3) */
.hue-yellow-tr { position: relative; overflow: hidden; }
.hue-yellow-tr::before {
content: '';
position: absolute; top: -15%; right: -10%;
width: 1400px; height: 1000px;
background: radial-gradient(ellipse at 85% 10%,
rgba(251, 191, 36, 0.20) 0%,
rgba(251, 191, 36, 0.06) 45%,
transparent 75%);
filter: blur(50px);
pointer-events: none; z-index: 0;
}
.hue-yellow-tr::after {
content: '';
position: absolute; bottom: -15%; left: -10%;
width: 1000px; height: 700px;
background: radial-gradient(ellipse at 10% 90%,
rgba(248, 113, 113, 0.13) 0%,
transparent 70%);
filter: blur(40px);
pointer-events: none; z-index: 0;
}
/* Green bloom — center (compliance / trust sections) */
.hue-green-center { position: relative; overflow: hidden; }
.hue-green-center::before {
content: '';
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 1600px; height: 1200px;
background: radial-gradient(ellipse,
rgba(74, 222, 128, 0.16) 0%,
rgba(74, 222, 128, 0.05) 45%,
transparent 75%);
filter: blur(60px);
pointer-events: none; z-index: 0;
}
.hue-green-center::after {
content: '';
position: absolute; top: -10%; right: -5%;
width: 800px; height: 600px;
background: radial-gradient(ellipse at 90% 10%,
rgba(34, 211, 238, 0.10) 0%,
transparent 70%);
filter: blur(40px);
pointer-events: none; z-index: 0;
}
/* Purple-left / cyan-right split (CTA sections) */
.hue-split { position: relative; overflow: hidden; }
.hue-split::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 5% 50%, rgba(123, 92, 245, 0.18) 0%, transparent 60%),
radial-gradient(ellipse at 95% 50%, rgba(34, 211, 238, 0.15) 0%, transparent 60%);
filter: blur(50px);
pointer-events: none; z-index: 0;
}
/* ── Section separator lines ───────────────────────────────── */
.section-sep {
width: 40px; height: 3px;
background: var(--purple);
border-radius: 2px;
margin: 0 auto 2rem;
box-shadow: 0 0 10px rgba(123, 92, 245, 0.5);
}
.section-sep.sep-yellow { background: var(--yellow); box-shadow: 0 0 10px rgba(251, 191, 36, 0.4); }
.section-sep.sep-cyan { background: var(--cyan); box-shadow: 0 0 10px rgba(34, 211, 238, 0.35); }
.section-sep.sep-green { background: var(--green); box-shadow: 0 0 10px rgba(74, 222, 128, 0.35); }
/* ── Product card image / text divider ─────────────────────── */
/* The ::after on .card-img-escape / .card-img-btc draws a bold
glowing gradient line at the seam between photo and text body */
.card-img {
position: relative;
}
.card-img::after {
content: '';
position: absolute; bottom: 0; left: 0; right: 0;
height: 5px;
z-index: 2;
}
.card-img-escape::after {
background: linear-gradient(90deg, var(--purple) 0%, var(--cyan) 100%);
box-shadow:
0 0 12px rgba(123, 92, 245, 0.90),
0 0 28px rgba(123, 92, 245, 0.55),
0 0 50px rgba(34, 211, 238, 0.30);
}
.card-img-btc::after {
background: linear-gradient(90deg, var(--yellow) 0%, var(--red) 100%);
box-shadow:
0 0 12px rgba(251, 191, 36, 0.90),
0 0 28px rgba(251, 191, 36, 0.55),
0 0 50px rgba(248, 113, 113, 0.30);
}
/* ── 9. PHOTO SLOTS ────────────────────────────────────────── */
/*
Usage:
Or with img: 
*/
.photo-slot {
position: relative;
overflow: hidden;
background: var(--surface);
display: flex;
align-items: center;
justify-content: center;
}
.photo-slot img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Team photo aspect ratio */
.photo-slot--portrait {
aspect-ratio: 3 / 4;
}
/* Hero / wide photo */
.photo-slot--wide {
aspect-ratio: 16 / 7;
}
/* Placeholder gradient shown until real photo is supplied */
.photo-slot--placeholder-purple {
background: linear-gradient(135deg, #0f0d1a 0%, #1a1035 60%, #0a0b15 100%);
}
.photo-slot--placeholder-cyan {
background: linear-gradient(135deg, #0a0f1a 0%, #0d1528 60%, #06080f 100%);
}
.photo-slot--placeholder-yellow {
background: linear-gradient(135deg, #0d0f0a 0%, #141808 60%, #080a06 100%);
}
/* Inner glow overlays on portrait slots */
.photo-slot__glow {
position: absolute;
inset: 0;
pointer-events: none;
}
.photo-slot__glow--purple {
background: radial-gradient(ellipse 60% 70% at 60% 40%, rgba(123,92,245,0.18) 0%, transparent 70%);
}
.photo-slot__glow--cyan {
background: radial-gradient(ellipse 60% 70% at 40% 40%, rgba(34,211,238,0.12) 0%, transparent 70%);
}
.photo-slot__glow--yellow {
background: radial-gradient(ellipse 60% 70% at 50% 40%, rgba(251,191,36,0.10) 0%, transparent 70%);
}
/* Placeholder label */
.photo-slot__label {
position: absolute;
bottom: 0.75rem;
left: 0.75rem;
font-family: 'DM Mono', monospace;
font-size: 0.9rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(242,242,244,0.8);
background: rgba(6, 7, 10, 0.7);
padding: 3px 8px;
border-radius: 3px;
z-index: 2;
}
/* Avatar silhouette SVG (used in about.html until photos arrive) */
.avatar-silhouette {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 100px;
z-index: 1;
}
/* ── 10. SHARED SECTION PRIMITIVES ─────────────────────────── */
/* Standard section padding */
section {
padding: 5.5rem var(--page-padding);
}
/* Max-width content wrapper */
.inner {
max-width: var(--max-width);
margin: 0 auto;
position: relative;
z-index: 1;
}
/* Generic 2-column grid */
.grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
/* Generic 3-column grid */
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
/* Bordered card */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
transition: border-color 0.25s, transform 0.2s;
}
.card:hover {
border-color: var(--purple-border);
transform: translateY(-2px);
}
/* Top-line accent on card */
.card--accent-top::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--purple), transparent);
}
/* Spec pill (used on product cards) */
.spec-pill {
font-family: 'DM Mono', monospace;
font-size: 0.9rem;
letter-spacing: 0.08em;
color: var(--muted);
background: var(--surface2);
padding: 3px 10px;
border-radius: 4px;
border: 1px solid var(--border);
display: inline-block;
}
/* ── Shared page section styles (used by all language variants) ─── */
/* Full-screen hero (homepage) — min-height: 100vh is intentional; fills the viewport on load */
.hero {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
padding: calc(var(--nav-height) + 5rem) var(--page-padding) 5rem;
position: relative;
overflow: hidden;
}
.hero-bg {
position: absolute; inset: 0; z-index: 0;
background:
radial-gradient(ellipse 55% 60% at 80% 40%, rgba(123,92,245,0.14) 0%, transparent 65%),
radial-gradient(ellipse 35% 45% at 10% 70%, rgba(34,211,238,0.06) 0%, transparent 60%),
linear-gradient(165deg, #08090f 0%, #06070a 50%, #0a0b12 100%);
}
.hero-inner {
position: relative; z-index: 3;
max-width: 1280px; margin: 0 auto; width: 100%;
display: flex; flex-direction: column; align-items: stretch;
}
.hero h1 { margin-bottom: 2rem; }
.hero-text { position: relative; z-index: 2; }
/* Inner-page hero */
.page-hero {
padding: calc(var(--nav-height) + 5rem) var(--page-padding) 5rem;
background: var(--deep);
position: relative; overflow: hidden;
border-bottom: 1px solid var(--border);
}
.page-hero h1 { margin-bottom: 1.25rem; }
.page-hero .lead { margin-bottom: 2rem; }
/* CTA section */
.cta-section {
padding: 7rem var(--page-padding);
background: var(--deep);
text-align: center;
position: relative;
overflow: hidden;
}
.cta-section::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(123,92,245,0.1) 0%, transparent 70%);
pointer-events: none;
}
.cta-section h2 {
max-width: 600px;
margin: 0 auto 1.25rem;
position: relative;
z-index: 1;
}
.cta-section h2 em {
font-style: normal;
color: var(--purple);
}
.cta-section p {
max-width: 420px;
margin: 0 auto 3rem;
position: relative;
z-index: 1;
}
.cta-section .btn-group {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
position: relative;
z-index: 1;
}
/* ── 11. COMPLIANCE BADGES ─────────────────────────────────── */
.badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.badge {
font-family: 'DM Mono', monospace;
font-size: 0.9rem;
letter-spacing: 0.08em;
padding: 6px 14px;
border: 1px solid var(--border);
border-radius: 5px;
color: rgba(242,242,244,0.8);
background: rgba(255, 255, 255, 0.03);
white-space: nowrap;
}
/* ── 12. RESPONSIVE ────────────────────────────────────────── */
/* ─ Wide desktop — push content inward ─ */
@media (min-width: 1440px) {
:root {
--page-padding: 6vw;
}
}
@media (min-width: 1200px) and (max-width: 1439px) {
:root {
--page-padding: 4rem;
}
}
/* ─ Narrow desktop / large tablet ─ */
@media (max-width: 1200px) {
:root {
--page-padding: 2rem;
}
}
/* ─ Tablet ─ */
@media (max-width: 900px) {
:root {
--page-padding: 1.75rem;
}
section {
padding: 4rem var(--page-padding);
}
.grid-2,
.grid-3 {
grid-template-columns: 1fr;
}
}
/* ─ Mobile ─ */
@media (max-width: 768px) {
:root {
--page-padding: 1.25rem;
--nav-height: 64px; /* desktop is 100px — save vertical space on mobile */
}
.nav-logo-mark {
height: 44px; /* desktop is 90px */
}
/* Show hamburger, hide desktop nav links */
.nav-links,
.nav-cta {
display: none;
}
.nav-hamburger {
display: flex;
}
section {
padding: 3.5rem var(--page-padding);
}
footer {
flex-direction: column;
align-items: flex-start;
gap: 1.25rem;
}
.footer-links {
gap: 1rem;
}
}
/* ─ Small mobile ─ */
@media (max-width: 480px) {
:root {
--page-padding: 1rem;
}
h1 { font-size: clamp(2rem, 8vw, 2.8rem); }
h2 { font-size: clamp(1.5rem, 6vw, 2rem); }
.btn-primary,
.btn-outline {
width: 100%;
justify-content: center;
}
.badges {
gap: 6px;
}
/* Scale down large Press Start 2P numbers — they're massive on narrow screens */
.stat-cell .stat-num { font-size: 1.6rem; }
.problem-grid .problem-num { font-size: 1.8rem; }
.page-hero-stats .stat-num { font-size: 1.5rem; }
.format-stat { font-size: 1.2rem; }
.proof-num-val { font-size: 1.2rem; }
.score-val { font-size: 1.5rem; }
}
/* ── 13. HOMEPAGE SECTION STYLES ─────────────────────────────
All classes used by index.html, de/index.html, fr/index.html.
Centralised here so all language variants share the same styles.
────────────────────────────────────────────────────────────── */
/* Hero particles & glow blobs */
.hero .glow-blob.g1 { width:500px;height:500px;top:-10%;right:-5%;background:radial-gradient(circle,rgba(123,92,245,0.12) 0%,transparent 70%); }
.hero .glow-blob.g2 { width:300px;height:300px;bottom:10%;left:-5%;background:radial-gradient(circle,rgba(34,211,238,0.06) 0%,transparent 70%); }
.hero .particle.p1 { width:3px;height:3px;background:var(--purple);top:25%;left:72%;opacity:0.6;box-shadow:0 0 8px var(--purple); }
.hero .particle.p2 { width:2px;height:2px;background:var(--cyan);top:45%;left:85%;opacity:0.5;box-shadow:0 0 6px var(--cyan); }
.hero .particle.p3 { width:4px;height:4px;background:var(--purple);top:65%;left:78%;opacity:0.3;box-shadow:0 0 10px var(--purple); }
.hero .particle.p4 { width:2px;height:2px;background:var(--cyan);top:30%;left:90%;opacity:0.4;box-shadow:0 0 6px var(--cyan); }
/* Hero text & actions */
.hero-body {
font-size: 1.05rem;
color: rgba(242,242,244,0.8);
max-width: 480px;
line-height: 1.9;
margin-bottom: 2.5rem;
}
.hero-actions { display: flex; flex-direction: column; gap: 1.5rem; }
.action-group { display: flex; gap: 10px; flex-wrap: wrap; }
.action-label {
font-family: 'DM Mono', monospace;
font-size: 0.9rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 0.5rem;
}
/* Stat card */
.hero-card {
background: rgba(16,19,28,0.8);
border: 1px solid var(--border);
border-radius: 16px;
padding: 1.75rem;
backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
align-self: start;
}
.hero-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--purple), transparent);
}
.card-label {
font-family: 'DM Mono', monospace;
font-size: 0.9rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 1.25rem;
display: flex;
align-items: center;
gap: 8px;
}
.card-label::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: var(--purple);
box-shadow: 0 0 6px var(--purple);
display: inline-block;
}
.card-stat-row {
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 1rem 0;
border-bottom: 1px solid var(--border);
}
.card-stat-row:last-child { border-bottom: none; }
.card-stat-num {
font-family: 'Press Start 2P', monospace;
font-size: 1.8rem;
font-weight: 400;
letter-spacing: -0.04em;
color: var(--text);
line-height: 1;
}
.card-stat-num.purple { color: var(--purple); }
.card-stat-num.cyan { color: var(--cyan); }
.card-stat-num.yellow { color: var(--yellow); }
.card-stat-label {
font-size: 0.94rem;
color: var(--muted);
text-align: right;
max-width: 160px;
line-height: 1.4;
}
/* ── PROBLEM BAND ── */
.problem-band {
background: var(--surface);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
display: flex;
align-items: stretch;
}
.problem-item {
flex: 1;
padding: 1.5rem var(--page-padding);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.problem-item:last-child { border-right: none; }
.problem-num {
font-family: 'Press Start 2P', monospace;
font-size: 1.8rem;
font-weight: 400;
color: var(--purple);
letter-spacing: -0.04em;
line-height: 1;
}
.problem-text { font-size: 0.96rem; color: var(--muted); line-height: 1.5; }
.problem-source {
font-family: 'DM Mono', monospace;
font-size: 0.9rem;
color: var(--muted);
letter-spacing: 0.06em;
margin-top: 0.25rem;
}
/* ── STORY ── */
.story { background: var(--deep); border-bottom: 1px solid var(--border); }
.story-inner { max-width: 760px; margin: 0 auto; }
.story h2 { margin-bottom: 2rem; }
.story-body {
font-size: 1rem;
color: rgba(242,242,244,0.8);
line-height: 1.95;
margin-bottom: 1.25rem;
max-width: 680px;
}
.story-body strong { color: var(--text); font-weight: 400; }
/* ── PRODUCTS ── */
.products { background: var(--black); border-bottom: 1px solid var(--border); }
.products-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 3rem;
gap: 1.5rem;
flex-wrap: wrap;
}
.products-header h2 { max-width: 480px; }
.products-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-bottom: 2rem;
}
.product-card {
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--border);
position: relative;
background: var(--surface);
transition: border-color 0.25s, transform 0.2s;
text-decoration: none;
display: block;
}
.product-card:hover {
border-color: var(--purple-border);
transform: translateY(-2px);
}
.product-card-img {
height: 200px;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.product-card-img img {
width: 100%; height: 100%;
object-fit: cover; display: block;
}
.pc-escape { background: linear-gradient(135deg,#0d0f1a 0%,#1a1030 50%,#0a0b12 100%); }
.pc-btc { background: linear-gradient(135deg,#0f0d0a 0%,#1a1508 50%,#0a0b0c 100%); }
/* Card scene decorations (fallback / no-img) */
.card-scene { width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:1rem;padding:1.5rem;position:relative; }
.scene-glow-purple { position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 60% 50%,rgba(123,92,245,0.2) 0%,transparent 70%); }
.scene-glow-yellow { position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 40% 50%,rgba(251,191,36,0.12) 0%,transparent 70%); }
.scene-laptop { width:80px;height:54px;background:#111;border:1px solid rgba(123,92,245,0.4);border-radius:4px;display:flex;align-items:center;justify-content:center;position:relative;z-index:1; }
.scene-laptop-screen { width:68px;height:44px;background:#0a0a0f;border-radius:2px;font-family:'DM Mono',monospace;font-size:0.9rem;color:#4ade80;padding:4px;line-height:1.4;overflow:hidden; }
.scene-tape-h { position:absolute;bottom:20px;left:0;right:0;height:14px;background:repeating-linear-gradient(90deg,var(--yellow) 0,var(--yellow) 28px,#000 28px,#000 32px);opacity:0.35;z-index:2;font-family:'Press Start 2P',monospace;font-size:0.9rem;font-weight:800;letter-spacing:0.15em;display:flex;align-items:center;color:#000;padding-left:6px; }
.scene-lock { width:28px;height:28px;border:1.5px solid rgba(255,255,255,0.2);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:0.9rem;position:relative;z-index:1;background:rgba(0,0,0,0.3); }
.scene-score { background:rgba(0,0,0,0.6);border:1px solid var(--yellow-glow);border-radius:6px;padding:6px 10px;font-family:'DM Mono',monospace;font-size:0.9rem;line-height:1.6;position:relative;z-index:1; }
.score-g { color:#4ade80; }
.score-r { color:#f87171; }
.scene-usb { width:20px;height:8px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.15);border-radius:2px;position:relative;z-index:1; }
.product-card-body { padding: 1.5rem; }
.product-tag {
font-family: 'DM Mono', monospace;
font-size: 0.9rem;
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 0.6rem;
}
.tag-escape { color: var(--purple); }
.tag-btc { color: var(--yellow); }
.product-title {
font-family: 'Poppins', sans-serif;
font-size: 1.2rem;
font-weight: 700;
color: var(--text);
margin-bottom: 0.5rem;
letter-spacing: -0.02em;
}
.product-desc { font-size: 0.98rem; color: var(--muted); line-height: 1.7; margin-bottom: 1.25rem; }
.product-specs { display: flex; gap: 1rem; flex-wrap: wrap; }
.product-arrow {
display: flex;
align-items: center;
gap: 6px;
font-family: 'DM Mono', monospace;
font-size: 0.9rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--purple);
margin-top: 1rem;
}
/* Services teaser */
.services-teaser {
border: 1px solid var(--border);
border-radius: 14px;
padding: 1.75rem 2rem;
background: var(--surface);
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
flex-wrap: wrap;
}
.services-teaser h3 {
font-family: 'Poppins', sans-serif;
font-size: 1rem;
font-weight: 700;
color: var(--text);
margin-bottom: 0.3rem;
}
.services-teaser p { font-size: 0.98rem; color: var(--muted); line-height: 1.6; max-width: 480px; }
.services-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 0.75rem; }
.services-pill {
font-family: 'DM Mono', monospace;
font-size: 0.9rem;
letter-spacing: 0.08em;
padding: 4px 12px;
border: 1px solid var(--border);
border-radius: 20px;
color: var(--muted);
}
.services-pill.soon { border-color: rgba(123,92,245,0.2); color: rgba(123,92,245,0.6); }
/* ── APPROACH STRIP (homepage) ── */
.approach { background: var(--surface); border-bottom: 1px solid var(--border); }
.approach-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem;
align-items: center;
max-width: var(--max-width);
margin: 0 auto;
}
.approach-text h2 { margin-bottom: 1.25rem; }
.approach-text p { font-size: 0.92rem; color: var(--muted); line-height: 1.9; margin-bottom: 1rem; }
.approach-text p strong { color: var(--text); font-weight: 400; }
.approach-pillars {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
}
.approach-pillar { background: var(--surface2); padding: 1.25rem; }
.pillar-icon { font-size: 1.2rem; margin-bottom: 0.5rem; display: block; }
.pillar-title { font-family: 'Poppins', sans-serif; font-size: 0.98rem; font-weight: 600; color: var(--text); margin-bottom: 0.25rem; }
.pillar-body { font-size: 0.9rem; color: var(--muted); line-height: 1.6; }
/* ── PROOF ── */
.proof { background: var(--deep); border-bottom: 1px solid var(--border); }
.proof h2 { margin-bottom: 0.75rem; }
.proof-sub { font-size: 0.9rem; color: var(--muted); max-width: 480px; margin-bottom: 3rem; }
.proof-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-bottom: 2rem;
}
.proof-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 1.5rem;
transition: border-color 0.2s;
}
.proof-card:hover { border-color: var(--purple-border); }
.proof-industry {
font-family: 'DM Mono', monospace;
font-size: 0.9rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--purple);
margin-bottom: 0.5rem;
}
.proof-desc { font-size: 0.96rem; color: var(--muted); line-height: 1.65; margin-bottom: 0.75rem; }
.proof-badge {
display: inline-block;
font-family: 'DM Mono', monospace;
font-size: 0.9rem;
letter-spacing: 0.08em;
padding: 3px 8px;
border-radius: 4px;
color: var(--cyan);
background: rgba(34,211,238,0.06);
}
.proof-numbers {
display: flex;
gap: 0;
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
}
.proof-num {
flex: 1;
padding: 1.5rem;
border-right: 1px solid var(--border);
text-align: center;
}
.proof-num:last-child { border-right: none; }
.proof-num-val {
font-family: 'Press Start 2P', monospace;
font-size: 1.6rem;
font-weight: 400;
color: var(--text);
letter-spacing: -0.04em;
line-height: 1;
margin-bottom: 0.3rem;
}
.proof-num-label { font-size: 0.9rem; color: var(--muted); line-height: 1.4; }
/* ── COMPLIANCE BAND ── */
.compliance {
padding: 4rem var(--page-padding);
background: var(--black);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
gap: 3rem;
flex-wrap: wrap;
}
.compliance h3 {
font-family: 'Poppins', sans-serif;
font-size: 1rem;
font-weight: 700;
color: var(--text);
margin-bottom: 0.3rem;
}
.compliance p { font-size: 0.98rem; color: var(--muted); max-width: 360px; line-height: 1.7; }
/* ── CTA GRID ── */
.cta-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
max-width: 680px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.cta-option {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 1.5rem;
text-align: left;
text-decoration: none;
transition: border-color 0.2s, transform 0.15s;
display: block;
}
.cta-option:hover { border-color: var(--purple-border); transform: translateY(-2px); }
.cta-option-label {
font-family: 'DM Mono', monospace;
font-size: 0.9rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--purple);
margin-bottom: 0.5rem;
}
.cta-option-title {
font-family: 'Poppins', sans-serif;
font-size: 0.9rem;
font-weight: 700;
color: var(--text);
margin-bottom: 0.4rem;
}
.cta-option-body { font-size: 0.9rem; color: var(--muted); line-height: 1.6; }
.cta-option-arrow {
font-family: 'DM Mono', monospace;
font-size: 0.9rem;
color: var(--purple);
margin-top: 0.75rem;
display: block;
}
/* Homepage hero: reduced top padding for the two-row layout */
.hero { padding-top: calc(var(--nav-height) + 2rem); }
/* Top row: eyebrow + H1, spanning nearly full width */
.hero-headline {
width: 100%;
max-width: 1100px;
margin-bottom: 3.5rem;
}
.hero-headline .eyebrow { margin-bottom: 0.75rem; }
.hero-inner h1 {
font-size: clamp(1.8rem, 3vw, 2.8rem);
line-height: 1.15;
margin-bottom: 1rem;
}
/* Bottom row: body/actions left, card right */
.hero-bottom {
display: grid;
grid-template-columns: 1fr 400px;
gap: 4rem;
align-items: start;
}
.hero-copy { display: flex; flex-direction: column; justify-content: center; }
.hero-copy .hero-body { max-width: 72%; }
/* ── HOMEPAGE RESPONSIVE ── */
@media (max-width: 1000px) {
.hero-bottom { grid-template-columns: 1fr; gap: 2.5rem; }
.hero-card { max-width: 480px; }
}
@media (max-width: 900px) {
.approach-inner { grid-template-columns: 1fr; gap: 3rem; }
.products-grid { grid-template-columns: 1fr; }
.cta-grid { grid-template-columns: 1fr; max-width: 420px; }
}
@media (max-width: 640px) {
.hero { min-height: auto; padding-top: calc(var(--nav-height) + 3rem); }
.hero-inner h1 { font-size: clamp(1.8rem, 6vw, 2.6rem); }
.hero-headline { max-width: 100%; margin-bottom: 2rem; }
.problem-band { flex-direction: column; }
.problem-item { border-right: none; border-bottom: 1px solid var(--border); }
.problem-item:last-child { border-bottom: none; }
.approach-pillars { grid-template-columns: 1fr; }
.proof-grid { grid-template-columns: 1fr; }
.proof-numbers { flex-direction: column; }
.proof-num { border-right: none; border-bottom: 1px solid var(--border); }
.proof-num:last-child { border-bottom: none; }
}
/* ══════════════════════════════════════════════════════════════════
§14 PAGE-HERO VARIANTS & PRODUCT HERO
══════════════════════════════════════════════════════════════════ */
/* Shared page-hero background container */
.page-hero-bg {
position: absolute; inset: 0; z-index: 0;
}
/* Shared page-hero inner width container */
.page-hero-inner {
position: relative; z-index: 1;
max-width: clamp(640px, 50vw, 920px);
}
.page-hero-inner h1 { margin-bottom: 1.25rem; }
.page-hero-inner .lead { margin-bottom: 2rem; }
/* Product-page hero (escape-game, beat-the-clock) — min-height: 80vh is intentional; crops just above the fold to reveal content below */
.hero--product {
min-height: 80vh;
justify-content: flex-end;
padding: 0 var(--page-padding) 5rem;
}
.hero--product .hero-inner {
max-width: clamp(680px, 50vw, 920px);
display: block;
}
.hero--product h1 {
margin-bottom: 1.5rem;
text-shadow: 0 2px 24px rgba(0,0,0,0.75), 0 0 48px rgba(0,0,0,0.40);
}
.hero--product .lead {
max-width: clamp(520px, 40vw, 720px);
margin-bottom: 2.5rem;
text-shadow: 0 1px 14px rgba(0,0,0,0.80);
}
.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }
/* Product hero: dark scrim over photo background */
.hero--product .hero-bg {
background-size: cover;
background-position: center;
}
.hero--product .hero-bg::after {
content: '';
position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(to top,
rgba(6,7,10,0.92) 0%, rgba(6,7,10,0.65) 35%,
rgba(6,7,10,0.25) 65%, rgba(6,7,10,0.08) 100%),
linear-gradient(to right,
rgba(6,7,10,0.70) 0%, rgba(6,7,10,0.20) 55%, transparent 80%);
}
/* ══════════════════════════════════════════════════════════════════
§15 ABOUT PAGE
══════════════════════════════════════════════════════════════════ */
.story { background: var(--black); border-bottom: 1px solid var(--border); }
.story-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 5rem; align-items: start; margin-top: 3rem;
}
.story-text p { font-size: 0.95rem; color: var(--muted); line-height: 1.9; margin-bottom: 1.1rem; }
.story-text p strong { color: var(--text); font-weight: 400; }
/* Timeline */
.timeline { display: flex; flex-direction: column; gap: 0; padding-left: 1.5rem; position: relative; }
.timeline::before {
content: '';
position: absolute; left: 0; top: 0.4rem; bottom: 1.5rem; width: 1px;
background: linear-gradient(to bottom, var(--purple), rgba(123,92,245,0.15));
}
.timeline-item {
display: flex; flex-direction: column; gap: 0.2rem;
padding: 0 0 2rem 1.5rem; position: relative;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
position: absolute; left: -0.35rem; top: 0.35rem;
width: 10px; height: 10px; border-radius: 50%;
background: var(--purple); border: 2px solid var(--black);
box-shadow: 0 0 10px rgba(123,92,245,0.65); z-index: 2;
}
.timeline-year {
font-family: 'DM Mono', monospace;
font-size: 0.9rem; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--purple); margin-bottom: 0.15rem;
}
.timeline-title {
font-family: 'Poppins', sans-serif;
font-size: 1rem; font-weight: 600; color: var(--text);
}
.timeline-body { font-size: 0.9rem; color: var(--muted); line-height: 1.7; margin-top: 0.3rem; }
/* Mission / Vision */
.mission { background: var(--surface); border-bottom: 1px solid var(--border); }
.mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 3rem; }
.mission-card {
border-radius: 14px; padding: 2rem;
border: 1px solid var(--border); background: var(--surface2);
position: relative; overflow: hidden;
}
.mission-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; }
.mission-card.m::before { background: linear-gradient(90deg, transparent, var(--purple), transparent); }
.mission-card.v::before { background: linear-gradient(90deg, transparent, var(--cyan), transparent); }
.mission-card-label {
font-family: 'DM Mono', monospace;
font-size: 0.9rem; letter-spacing: 0.18em;
text-transform: uppercase; margin-bottom: 1rem;
}
.mission-card.m .mission-card-label { color: var(--purple); }
.mission-card.v .mission-card-label { color: var(--cyan); }
.mission-card h3 { margin-bottom: 1rem; }
.mission-card p { font-size: 1.02rem; color: var(--muted); line-height: 1.8; }
/* Team */
.team { background: var(--deep); border-bottom: 1px solid var(--border); }
.team-intro { font-size: 0.92rem; color: var(--muted); max-width: 520px; margin-top: 0.75rem; margin-bottom: 3.5rem; line-height: 1.85; }
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 280px)); gap: 1.5rem; justify-content: center; }
.founder-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: 14px; overflow: hidden;
transition: border-color 0.2s, transform 0.2s;
}
.founder-card:hover { border-color: var(--purple-border); transform: translateY(-2px); }
.founder-photo { height: 0; padding-bottom: 100%; position: relative; overflow: hidden; }
.founder-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.founder-body { padding: 1rem; }
.founder-name { font-family: 'Poppins', sans-serif; font-size: 0.95rem; font-weight: 700; color: var(--text); margin-bottom: 0.2rem; letter-spacing: -0.01em; }
.founder-role { font-family: 'DM Mono', monospace; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--purple); margin-bottom: 0.75rem; }
.founder-bio { font-size: 0.88rem; color: var(--muted); line-height: 1.7; }
.founder-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1rem; }
.founder-tag { font-family: 'DM Mono', monospace; font-size: 0.9rem; letter-spacing: 0.08em; padding: 3px 8px; border: 1px solid var(--border); border-radius: 4px; color: var(--muted); }
/* Values */
.values { background: var(--black); border-bottom: 1px solid var(--border); }
.values-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 1px; background: var(--border);
border: 1px solid var(--border); border-radius: 12px;
overflow: hidden; margin-top: 3rem;
}
.value-item { background: var(--surface2); padding: 1.5rem; transition: background 0.2s; }
.value-item:hover { background: var(--surface); }
.value-icon { font-size: 1.4rem; margin-bottom: 0.75rem; display: block; }
.value-title { font-family: 'Poppins', sans-serif; font-size: 1.02rem; font-weight: 600; color: var(--text); margin-bottom: 0.35rem; }
.value-body { font-size: 0.94rem; color: var(--muted); line-height: 1.65; }
/* About responsive */
@media (max-width: 900px) {
.story-grid { grid-template-columns: 1fr; gap: 3rem; }
.mission-grid { grid-template-columns: 1fr; }
.team-grid { grid-template-columns: 1fr 1fr; }
.values-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.team-grid { grid-template-columns: 1fr; }
.values-grid { grid-template-columns: 1fr; }
}
/* ══════════════════════════════════════════════════════════════════
§16 APPROACH PAGE
══════════════════════════════════════════════════════════════════ */
/* Stat strip */
.stat-strip {
background: var(--surface); border-bottom: 1px solid var(--border);
display: grid; grid-template-columns: repeat(3, 1fr);
}
.stat-strip-header { grid-column: 1 / -1; padding: 2.5rem var(--page-padding) 0; }
.stat-strip-header h2 { font-size: clamp(1rem, 1.6vw, 1.2rem); margin-bottom: 0; color: var(--muted); font-weight: 600; }
.stat-cell { padding: 2.5rem var(--page-padding); border-right: 1px solid var(--border); }
.stat-cell:last-child { border-right: none; }
.stat-cell .stat-num {
font-family: 'Press Start 2P', monospace;
font-size: 2.4rem; font-weight: 400; color: var(--purple);
letter-spacing: -0.04em; line-height: 1; margin-bottom: 0.5rem;
}
.stat-cell h3 { font-size: 1.06rem; margin-bottom: 0.5rem; }
.stat-cell p { font-size: 0.96rem; color: var(--muted); line-height: 1.65; }
.stat-source { font-family: 'DM Mono', monospace; font-size: 0.9rem; color: var(--muted); letter-spacing: 0.06em; margin-top: 0.5rem; }
/* Belief */
.belief { background: var(--black); border-bottom: 1px solid var(--border); }
.belief-inner { max-width: 760px; margin: 0 auto; }
.belief h2 { margin-bottom: 1.5rem; }
.belief p { font-size: 1rem; color: var(--muted); line-height: 1.95; margin-bottom: 1.25rem; }
.belief p strong { color: var(--text); font-weight: 400; }
/* Science / pillars */
.science { background: var(--deep); border-bottom: 1px solid var(--border); }
.science h2 { margin-bottom: 1rem; }
.science-intro { font-size: 1rem; color: var(--muted); max-width: 620px; line-height: 1.9; margin-bottom: 3rem; }
.science-intro strong { color: var(--text); font-weight: 400; }
.pillars-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 1px; background: var(--border);
border: 1px solid var(--border); border-radius: 14px;
overflow: hidden; margin-bottom: 3rem;
}
.pillar-cell { background: var(--surface2); padding: 1.75rem; transition: background 0.2s; }
.pillar-cell:hover { background: var(--surface); }
.pillar-eyebrow { font-family: 'DM Mono', monospace; font-size: 0.9rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); margin-bottom: 0.75rem; }
.pillar-cell h3 { font-size: 0.95rem; margin-bottom: 0.6rem; }
.pillar-cell p { font-size: 1.0rem; color: var(--muted); line-height: 1.8; }
/* Long-term */
.longterm { background: var(--surface); border-bottom: 1px solid var(--border); }
.longterm-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; max-width: var(--max-width); margin: 0 auto; }
.longterm-text h2 { margin-bottom: 1.5rem; }
.longterm-text p { font-size: 0.95rem; color: var(--muted); line-height: 1.9; margin-bottom: 1rem; }
.longterm-text p strong { color: var(--text); font-weight: 400; }
.longterm-card {
background: var(--surface2); border: 1px solid var(--border);
border-radius: 14px; padding: 1.75rem;
position: relative; overflow: hidden;
}
.longterm-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--purple), transparent);
}
.longterm-card-label { font-family: 'DM Mono', monospace; font-size: 0.9rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--purple); margin-bottom: 1.25rem; }
.longterm-item { padding: 1rem 0; border-bottom: 1px solid var(--border); }
.longterm-item:last-child { border-bottom: none; }
.longterm-item-title { font-family: 'Poppins', sans-serif; font-size: 1.02rem; font-weight: 600; color: var(--text); margin-bottom: 0.3rem; }
.longterm-item p { font-size: 0.94rem; color: var(--muted); line-height: 1.65; }
/* Team brief */
.team-brief { background: var(--black); border-bottom: 1px solid var(--border); }
.team-brief-inner { max-width: 640px; }
.team-brief h2 { margin-bottom: 1.25rem; }
.team-brief p { font-size: 0.95rem; color: var(--muted); line-height: 1.9; margin-bottom: 1rem; }
.team-brief p strong { color: var(--text); font-weight: 400; }
/* Compliance section (approach + how-it-works) */
.compliance-section { background: var(--deep); border-bottom: 1px solid var(--border); }
.compliance-section h2 { margin-bottom: 1rem; }
.compliance-intro { font-size: 0.95rem; color: var(--muted); max-width: 560px; margin-bottom: 2rem; line-height: 1.85; }
.compliance-note {
font-size: 1.06rem; color: var(--muted); line-height: 1.8;
max-width: 620px; padding: 1.5rem;
border: 1px solid var(--border); border-radius: 10px;
background: rgba(255,255,255,0.02); margin-top: 1.5rem;
}
.compliance-note strong { color: var(--text); font-weight: 400; }
/* Approach responsive */
@media (max-width: 900px) {
.stat-strip { grid-template-columns: 1fr; }
.stat-strip-header { grid-column: 1; }
.stat-cell { border-right: none; border-bottom: 1px solid var(--border); }
.stat-cell:last-child { border-bottom: none; }
.pillars-grid { grid-template-columns: 1fr; }
.longterm-inner { grid-template-columns: 1fr; gap: 3rem; }
}
/* ══════════════════════════════════════════════════════════════════
§17 SHARED PRODUCT PAGE STYLES (escape-game + beat-the-clock)
══════════════════════════════════════════════════════════════════ */
/* Format strip */
.format-strip { background: var(--surface); border-bottom: 1px solid var(--border); display: grid; grid-template-columns: repeat(4, 1fr); }
.format-cell { padding: 2rem var(--page-padding); border-right: 1px solid var(--border); }
.format-cell:last-child { border-right: none; }
.format-icon { font-size: 1.4rem; margin-bottom: 0.75rem; display: block; }
.format-stat { font-family: 'Press Start 2P', monospace; font-size: 1.6rem; font-weight: 400; color: var(--purple); letter-spacing: -0.04em; line-height: 1; margin-bottom: 0.25rem; }
.format-label { font-family: 'DM Mono', monospace; font-size: 0.9rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem; }
.format-cell p { font-size: 0.94rem; color: var(--muted); line-height: 1.65; }
/* Compliance strip */
.compliance-strip {
padding: 3.5rem var(--page-padding); background: var(--black);
border-bottom: 1px solid var(--border);
display: flex; align-items: center; justify-content: space-between;
gap: 3rem; flex-wrap: wrap;
}
.compliance-strip h3 { font-size: 1rem; margin-bottom: 0.3rem; }
.compliance-strip p { font-size: 0.98rem; color: var(--muted); max-width: 380px; line-height: 1.7; }
/* Learning topics */
.learning { background: var(--surface); border-bottom: 1px solid var(--border); }
.learning h2 { margin-bottom: 0.75rem; }
.learning-intro { font-size: 0.95rem; color: var(--muted); max-width: 560px; margin-bottom: 3rem; line-height: 1.85; }
.topics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.topic-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem; transition: border-color 0.2s; }
.topic-card:hover { border-color: var(--purple-border); }
.topic-icon { font-size: 1.4rem; margin-bottom: 0.75rem; display: block; }
.topic-card h3 { font-size: 1.02rem; margin-bottom: 0.4rem; }
.topic-card p { font-size: 0.94rem; color: var(--muted); line-height: 1.65; }
/* Methodology / steps (escape-game + how-it-works) */
.methodology { background: var(--deep); border-bottom: 1px solid var(--border); }
.methodology h2 { margin-bottom: 0.75rem; }
.methodology-intro { font-size: 0.95rem; color: var(--muted); max-width: 560px; margin-bottom: 3rem; line-height: 1.85; }
.steps { display: flex; flex-direction: column; position: relative; }
.steps::before {
content: ''; position: absolute;
left: 1.75rem; top: 3rem; bottom: 3rem; width: 1px;
background: linear-gradient(to bottom, var(--purple), var(--cyan));
opacity: 0.25;
}
.step { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1.5rem; padding: 2rem 0; border-bottom: 1px solid var(--border); position: relative; }
.step:last-child { border-bottom: none; }
.step-num {
width: 3.5rem; height: 3.5rem; border-radius: 50%;
background: var(--surface2); border: 1px solid var(--purple-border);
display: flex; align-items: center; justify-content: center;
font-family: 'DM Mono', monospace; font-size: 0.9rem; font-weight: 500;
color: var(--purple); flex-shrink: 0; position: relative; z-index: 1;
}
.step-tag { display: inline-block; font-family: 'DM Mono', monospace; font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; margin-bottom: 0.5rem; }
.tag-before { background: rgba(34,211,238,0.08); color: var(--cyan); }
.tag-during { background: rgba(123,92,245,0.1); color: var(--purple); }
.tag-after { background: rgba(110,231,183,0.08); color: #6ee7b7; }
.step-content h3 { font-size: 1.05rem; margin-bottom: 0.5rem; padding-top: 0.6rem; }
.step-content p { font-size: 0.95rem; color: var(--muted); line-height: 1.8; }
/* FAQ (approach + escape-game + beat-the-clock) */
.faq-section { padding: 5rem var(--page-padding); }
.faq-section .inner { max-width: var(--max-width); margin: 0 auto; }
.faq-section h2 { margin-bottom: 2.5rem; }
.faq-list { display: flex; flex-direction: column; gap: 1rem; }
.faq-item { background: var(--surface2); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; overflow: hidden; }
.faq-item summary {
list-style: none; cursor: pointer; padding: 1.2rem 1.5rem;
font-family: 'DM Mono', monospace; font-size: 0.95rem;
letter-spacing: 0.03em; color: var(--text);
display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 1.2rem; color: var(--purple); flex-shrink: 0; transition: transform 0.2s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item[open] summary { color: var(--purple); }
.faq-answer { padding: 0 1.5rem 1.4rem; font-size: 0.95rem; line-height: 1.75; color: rgba(242,242,244,0.80); }
/* Shared product responsive */
@media (max-width: 900px) {
.format-strip { grid-template-columns: 1fr 1fr; }
.format-cell:nth-child(2) { border-right: none; }
.topics-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
.hero--product { min-height: auto; padding-top: calc(var(--nav-height) + 3rem); }
.format-strip { grid-template-columns: 1fr; }
.format-cell { border-right: none; border-bottom: 1px solid var(--border); }
.format-cell:last-child { border-bottom: none; }
.topics-grid { grid-template-columns: 1fr; }
.steps::before { display: none; }
}
/* ══════════════════════════════════════════════════════════════════
§18 ESCAPE GAME SPECIFIC
══════════════════════════════════════════════════════════════════ */
.scenario { background: var(--deep); border-bottom: 1px solid var(--border); }
.scenario h2 { margin-bottom: 1.5rem; }
.scenario-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; margin-top: 2rem; }
.scenario-text p { font-size: 0.95rem; color: var(--muted); line-height: 1.9; margin-bottom: 1rem; }
.scenario-text p strong { color: var(--text); font-weight: 400; }
.scenario-photo { border-radius: 14px; overflow: hidden; border: 1px solid var(--border); }
.scenario-photo img { width: 100%; height: auto; display: block; }
.setup { background: var(--black); border-bottom: 1px solid var(--border); }
.setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; margin-top: 2rem; }
.setup-photo { border-radius: 14px; overflow: hidden; border: 1px solid var(--border); height: 380px; }
.setup-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.setup-text h2 { margin-bottom: 1.25rem; }
.setup-text p { font-size: 0.95rem; color: var(--muted); line-height: 1.9; margin-bottom: 1rem; }
.setup-text p strong { color: var(--text); font-weight: 400; }
.props-list { list-style: none; margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0; }
.props-list li { font-size: 0.98rem; color: var(--muted); padding: 0.75rem 0; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
.props-list li:last-child { border-bottom: none; }
.props-list li::before { content: '→'; font-family: 'DM Mono', monospace; font-size: 0.9rem; color: var(--purple); flex-shrink: 0; padding-top: 0.1rem; }
/* Escape game responsive */
@media (max-width: 900px) {
.scenario-grid { grid-template-columns: 1fr; }
.setup-grid { grid-template-columns: 1fr; }
.setup-photo { order: 1; }
.setup-text { order: -1; }
}
/* ══════════════════════════════════════════════════════════════════
§19 BEAT THE CLOCK SPECIFIC
══════════════════════════════════════════════════════════════════ */
.format-section { background: var(--deep); border-bottom: 1px solid var(--border); }
.format-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; margin-top: 2rem; }
.format-text p { font-size: 0.95rem; color: var(--muted); line-height: 1.9; margin-bottom: 1rem; }
.format-text p strong { color: var(--text); font-weight: 400; }
.use-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; position: relative; }
.use-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--yellow), transparent); }
.use-card-label { font-family: 'DM Mono', monospace; font-size: 0.9rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--yellow); padding: 1.5rem 1.75rem 0; }
.use-item { padding: 1.25rem 1.75rem; border-bottom: 1px solid var(--border); }
.use-item:last-child { border-bottom: none; }
.use-item h3 { font-size: 1.06rem; margin-bottom: 0.4rem; }
.use-item p { font-size: 0.96rem; color: var(--muted); line-height: 1.7; }
.scenario-inner { max-width: 760px; }
.scenario-tagline { font-family: 'DM Mono', monospace; font-size: 0.9rem; letter-spacing: 0.12em; color: var(--yellow); margin-bottom: 2rem; font-style: italic; }
.scenario p { font-size: 0.95rem; color: var(--muted); line-height: 1.9; margin-bottom: 1rem; }
.scenario p strong { color: var(--text); font-weight: 400; }
.scoring-card { background: var(--surface); border: 1px solid var(--yellow-border); border-radius: 12px; padding: 1.5rem; margin: 2rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.score-col { padding: 1rem; text-align: center; }
.score-col:first-child { border-right: 1px solid var(--border); }
.score-val { font-family: 'Press Start 2P', monospace; font-size: 2rem; font-weight: 400; letter-spacing: -0.04em; line-height: 1; margin-bottom: 0.4rem; }
.score-val.green { color: #4ade80; }
.score-val.red { color: #f87171; }
.score-label { font-size: 0.94rem; color: var(--muted); line-height: 1.4; }
.countdown-ring {
position: absolute; top: 8%; right: 8%;
width: 220px; height: 220px; z-index: 1; opacity: 0.1;
border: 2px solid var(--yellow); border-radius: 50%; pointer-events: none;
}
.countdown-ring::before { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(251,191,36,0.4); border-radius: 50%; }
.btn-yellow {
font-family: 'DM Mono', monospace; font-size: 0.9rem; letter-spacing: 0.12em;
text-transform: uppercase; background: var(--yellow); color: #06070a;
padding: 12px 24px; border-radius: 7px; text-decoration: none;
display: inline-flex; align-items: center; gap: 8px;
transition: opacity 0.2s, transform 0.15s; font-weight: 500;
}
.btn-yellow:hover { opacity: 0.88; transform: translateY(-1px); }
/* BTC responsive */
@media (max-width: 900px) {
.format-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.scoring-card { grid-template-columns: 1fr; }
.score-col:first-child { border-right: none; border-bottom: 1px solid var(--border); }
.countdown-ring { display: none; }
}
/* ══════════════════════════════════════════════════════════════════
§20 RESEARCH PAGE
══════════════════════════════════════════════════════════════════ */
.founder-paper {
background: var(--surface); border: 1px solid rgba(34,211,238,0.35);
border-radius: 14px; padding: 2rem;
position: relative; overflow: hidden; margin-bottom: 2rem;
}
.founder-paper::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--cyan), var(--purple)); }
.paper-badge { font-family: 'DM Mono', monospace; font-size: 0.9rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); margin-bottom: 0.75rem; display: block; }
.founder-paper h3 { font-size: 1.05rem; margin-bottom: 0.5rem; color: var(--text); }
.founder-paper .paper-meta { font-family: 'DM Mono', monospace; font-size: 0.9rem; color: var(--muted); margin-bottom: 0.75rem; line-height: 1.6; }
.founder-paper p { font-size: 1rem; color: rgba(242,242,244,0.80); line-height: 1.85; margin-bottom: 0; }
.research-section { border-bottom: 1px solid var(--border); }
.research-inner { max-width: 960px; margin: 0 auto; }
.research-inner h2 { margin-bottom: 0.75rem; }
.research-lead { font-size: 1.1rem; color: rgba(242,242,244,0.80); line-height: 1.85; margin-bottom: 2.5rem; max-width: 680px; }
.finding { background: var(--surface2); border-left: 3px solid var(--purple); border-radius: 0 10px 10px 0; padding: 1.25rem 1.5rem; margin: 1.5rem 0 2rem; }
.finding p { font-size: 1rem; color: rgba(242,242,244,0.85); line-height: 1.85; margin: 0; }
.ref-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem; }
.ref-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem 1.5rem; transition: border-color 0.2s; }
.ref-card:hover { border-color: var(--purple-border); }
.ref-card p { font-size: 0.9rem; color: rgba(242,242,244,0.8); line-height: 1.8; margin: 0; }
.ref-card a { color: var(--purple); text-decoration: none; word-break: break-all; }
.ref-card a:hover { text-decoration: underline; }
.ref-card .ref-highlight { color: var(--cyan); font-weight: 400; }
.section-label-cyan { display: inline-flex; align-items: center; gap: 8px; font-family: 'DM Mono', monospace; font-size: 0.9rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); background: rgba(34,211,238,0.08); padding: 5px 14px; border-radius: 4px; margin-bottom: 1.5rem; border: 1px solid rgba(34,211,238,0.25); }
.section-label-yellow{ display: inline-flex; align-items: center; gap: 8px; font-family: 'DM Mono', monospace; font-size: 0.9rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--yellow); background: rgba(251,191,36,0.08); padding: 5px 14px; border-radius: 4px; margin-bottom: 1.5rem; border: 1px solid rgba(251,191,36,0.30); }
.section-label-green { display: inline-flex; align-items: center; gap: 8px; font-family: 'DM Mono', monospace; font-size: 0.9rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); background: rgba(74,222,128,0.07); padding: 5px 14px; border-radius: 4px; margin-bottom: 1.5rem; border: 1px solid rgba(74,222,128,0.25); }
.answer-badge { display: inline-flex; align-items: center; gap: 10px; background: rgba(74,222,128,0.10); border: 1px solid rgba(74,222,128,0.30); border-radius: 8px; padding: 0.75rem 1.25rem; margin-bottom: 1.5rem; }
.answer-badge .answer-label { font-family: 'DM Mono', monospace; font-size: 0.9rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.answer-badge .answer-text { font-family: 'Poppins', sans-serif; font-size: 1rem; font-weight: 700; color: var(--green); }
/* ══════════════════════════════════════════════════════════════════
§21 SERVICES PAGE
══════════════════════════════════════════════════════════════════ */
.flagship-band { padding: 5rem var(--page-padding); background: var(--black); }
.flagship-band .inner { max-width: var(--max-width); margin: 0 auto; }
.flagship-band h2 { margin-bottom: 3rem; }
.flagship-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.flagship-card { background: var(--surface2); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.2s; }
.flagship-card:hover { border-color: rgba(123,92,245,0.35); }
.flagship-card-tag { font-family: 'DM Mono', monospace; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.4rem 0.75rem; display: inline-block; border-radius: 4px; margin-bottom: 0.75rem; }
.flagship-card-body { padding: 2rem; flex: 1; display: flex; flex-direction: column; }
.flagship-card-body h3 { font-size: 1.3rem; margin-bottom: 0.75rem; }
.flagship-card-body p { font-size: 0.95rem; line-height: 1.75; color: rgba(242,242,244,0.80); flex: 1; margin-bottom: 1.5rem; }
.flagship-specs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.flagship-spec { font-family: 'DM Mono', monospace; font-size: 0.75rem; letter-spacing: 0.08em; color: var(--muted); background: rgba(255,255,255,0.05); border-radius: 4px; padding: 0.25rem 0.6rem; }
.services-section { padding: 5rem var(--page-padding); background: var(--surface); }
.services-section .inner { max-width: var(--max-width); margin: 0 auto; }
.services-section h2 { margin-bottom: 3rem; }
.services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.service-card { background: var(--surface2); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 2rem; display: flex; flex-direction: column; }
.service-icon { font-size: 1.6rem; margin-bottom: 1rem; }
.service-card h3 { font-size: 1.1rem; margin-bottom: 0.6rem; }
.service-card p { font-size: 0.95rem; line-height: 1.75; color: rgba(242,242,244,0.80); flex: 1; margin-bottom: 1.5rem; }
.service-features { list-style: none; margin-bottom: 1.5rem; display: flex; flex-direction: column; gap: 0.4rem; }
.service-features li { font-size: 0.9rem; color: rgba(242,242,244,0.80); padding-left: 1.1rem; position: relative; }
.service-features li::before { content: '→'; position: absolute; left: 0; color: var(--purple); }
.approach-callout { padding: 5rem var(--page-padding); background: var(--deep); text-align: center; }
.approach-callout .inner { max-width: 700px; margin: 0 auto; }
.approach-callout h2 { margin-bottom: 1rem; }
.approach-callout p { font-size: 1.05rem; line-height: 1.8; color: rgba(242,242,244,0.80); margin-bottom: 2rem; }
/* Services responsive */
@media (max-width: 768px) {
.flagship-grid, .services-grid { grid-template-columns: 1fr; }
}
/* ══════════════════════════════════════════════════════════════════
§22 CONTACT PAGE
══════════════════════════════════════════════════════════════════ */
.contact-body { background: var(--black); border-bottom: 1px solid var(--border); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
.contact-main h2 { margin-bottom: 1.25rem; }
.contact-main p { font-size: 0.95rem; color: var(--muted); line-height: 1.9; margin-bottom: 1.5rem; }
.contact-main p strong { color: var(--text); font-weight: 400; }
.email-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 2rem; position: relative; overflow: hidden; transition: border-color 0.25s; }
.email-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--purple), transparent); }
.email-card:hover { border-color: var(--purple-border); }
.email-label { font-family: 'DM Mono', monospace; font-size: 0.9rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.75rem; }
.email-address { font-family: 'Press Start 2P', monospace; font-size: clamp(0.9rem, 3.5vw, 1.3rem); font-weight: 400; letter-spacing: -0.02em; overflow-wrap: anywhere; margin-bottom: 1.25rem; }
.email-address a { color: var(--purple); text-decoration: none; transition: color 0.2s; }
.email-address a:hover { color: var(--text); }
.email-meta { font-family: 'DM Mono', monospace; font-size: 0.9rem; letter-spacing: 0.08em; color: var(--muted); line-height: 1.8; }
.email-meta span { color: var(--cyan); }
.email-cta { margin-top: 1.5rem; display: block; }
.email-divider { display: flex; align-items: center; gap: 1rem; margin: 2rem 0; color: var(--muted); font-family: 'DM Mono', monospace; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; }
.email-divider::before, .email-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.include-box { background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; margin-top: 1.5rem; }
.include-box-label { font-family: 'DM Mono', monospace; font-size: 0.9rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--purple); margin-bottom: 1rem; }
.include-list { list-style: none; display: flex; flex-direction: column; gap: 0; }
.include-list li { font-size: 0.98rem; color: var(--muted); padding: 0.6rem 0; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
.include-list li:last-child { border-bottom: none; }
.include-list li::before { content: '—'; font-family: 'DM Mono', monospace; font-size: 0.9rem; color: var(--purple); flex-shrink: 0; }
.contact-info { padding-top: 0.5rem; }
.info-block { padding: 1.5rem 0; border-bottom: 1px solid var(--border); }
.info-block:last-child { border-bottom: none; }
.info-block-label { font-family: 'DM Mono', monospace; font-size: 0.9rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem; }
.info-block-value { font-family: 'DM Mono', monospace; font-size: 1.06rem; font-weight: 400; color: var(--text); line-height: 1.5; }
.info-block-sub { font-size: 0.96rem; color: var(--muted); margin-top: 0.3rem; line-height: 1.6; }
.lang-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 0.75rem; }
.lang-pill { font-family: 'DM Mono', monospace; font-size: 0.9rem; letter-spacing: 0.1em; padding: 4px 12px; border: 1px solid var(--purple-border); border-radius: 20px; color: var(--purple); }
/* Contact form */
.contact-form-wrap { margin-bottom: 2.5rem; }
.contact-form-wrap h3 { font-size: 1rem; margin-bottom: 1.5rem; color: var(--text); }
.contact-form { display: flex; flex-direction: column; gap: 1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-group label { font-family: 'DM Mono', monospace; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.form-group input,
.form-group textarea,
.form-group select { background: var(--surface2); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 0.75rem 1rem; font-family: 'DM Sans', sans-serif; font-size: 0.95rem; color: var(--text); outline: none; transition: border-color 0.2s; width: 100%; box-sizing: border-box; }
.form-group select option { background: var(--surface2); }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--purple); }
.form-group textarea { resize: vertical; min-height: 120px; }
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--muted); }
.form-note { font-size: 0.82rem; color: var(--muted); margin-top: 0.75rem; line-height: 1.6; }
.form-success { display: none; background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.25); border-radius: 10px; padding: 1.5rem; text-align: center; color: var(--green); font-size: 0.95rem; }
/* Contact responsive */
@media (max-width: 900px) {
.contact-grid { grid-template-columns: 1fr; gap: 3rem; }
}
@media (max-width: 600px) {
.form-row { grid-template-columns: 1fr; }
}
/* ══════════════════════════════════════════════════════════════════
§23 HOW-IT-WORKS PAGE
══════════════════════════════════════════════════════════════════ */
/* Hero stats row */
.page-hero-stats { display: flex; gap: 3rem; flex-wrap: wrap; padding-top: 2rem; border-top: 1px solid var(--border); margin-top: 2rem; }
.page-hero-stats .stat-num { font-family: 'Press Start 2P', monospace; font-size: 2rem; font-weight: 400; color: var(--text); letter-spacing: -0.03em; line-height: 1; }
.page-hero-stats .stat-num span { color: var(--purple); }
.stat-label { font-size: 0.96rem; color: var(--muted); margin-top: 0.25rem; }
/* Problem grid */
.problem { background: var(--surface); border-bottom: 1px solid var(--border); }
.problem h2 { margin-bottom: 0.75rem; max-width: 560px; }
.problem-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 1px; background: var(--border);
border: 1px solid var(--border); border-radius: 12px;
overflow: hidden; margin-top: 3rem;
max-width: var(--max-width); margin-left: auto; margin-right: auto;
}
.problem-cell { background: var(--surface2); padding: 2rem; }
.problem-cell:nth-child(3), .problem-cell:nth-child(4) { background: var(--surface); }
.problem-grid .problem-num { font-family: 'Press Start 2P', monospace; font-size: 2.5rem; font-weight: 400; color: var(--purple); letter-spacing: -0.04em; margin-bottom: 0.5rem; line-height: 1; }
.problem-cell strong { display: block; color: var(--text); font-weight: 600; margin-bottom: 0.5rem; font-size: 0.95rem; font-family: 'Poppins', sans-serif; }
.problem-cell p { font-size: 1.06rem; color: var(--muted); line-height: 1.65; }
.source { font-family: 'DM Mono', monospace; font-size: 0.9rem; color: var(--muted); margin-top: 0.75rem; letter-spacing: 0.05em; }
/* What it is — two-col */
.what-it-is { background: var(--black); border-bottom: 1px solid var(--border); }
.two-col {
display: grid; grid-template-columns: 1fr 1fr;
gap: 4rem; align-items: start; margin-top: 3rem;
max-width: var(--max-width); margin-left: auto; margin-right: auto;
}
.two-col h2 { margin-bottom: 1.5rem; }
.body-text { color: var(--muted); font-size: 1rem; line-height: 1.9; margin-bottom: 1.25rem; }
.format-card { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 12px; padding: 1.75rem; }
.format-card-label { font-family: 'DM Mono', monospace; font-size: 0.9rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--cyan); margin-bottom: 1.25rem; }
.format-row { display: flex; justify-content: space-between; align-items: center; padding: 0.65rem 0; border-bottom: 1px solid var(--border); font-size: 1.05rem; }
.format-row:last-child { border-bottom: none; }
.format-row .key { color: var(--muted); }
.format-row .val { color: var(--text); font-weight: 500; text-align: right; }
/* Why it works */
.why { background: var(--deep); border-bottom: 1px solid var(--border); }
.why h2 { margin-bottom: 0.75rem; }
.why-intro { color: var(--muted); max-width: 560px; margin-bottom: 3rem; font-size: 0.95rem; line-height: 1.85; }
.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.pillar { border: 1px solid var(--border); border-radius: 12px; padding: 1.75rem; background: var(--surface2); }
.pillar-label { font-family: 'DM Mono', monospace; font-size: 0.9rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--cyan); margin-bottom: 1rem; }
.pillar h3 { font-size: 1rem; margin-bottom: 0.75rem; }
.pillar p { font-size: 1.05rem; color: var(--muted); line-height: 1.75; }
/* How-it-works responsive */
@media (max-width: 900px) {
.two-col { grid-template-columns: 1fr; }
.problem-grid { grid-template-columns: 1fr; }
.pillars { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.page-hero-stats { gap: 2rem; }
}