/* ============================================================
AZYRO SA — Site styles (v2 — extended with motion / HUD / images)
Sections map 1:1 to future WordPress blocks.
============================================================ */
/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text-primary);
background: var(--bg-base);
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: rgba(62, 207, 160, 0.35); color: var(--text-primary); }
/* ---------- Typography ---------- */
h1, h2, h3, h4 {
font-family: var(--font-sans);
font-weight: var(--fw-bold);
line-height: var(--lh-tight);
letter-spacing: -0.015em;
margin: 0;
}
h1 { font-size: var(--fs-display); font-weight: var(--fw-bold); color: var(--text-primary); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-semibold); color: var(--text-primary); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--text-primary); }
/* Highlighted inline span on a headline — used sparingly to colour one keyword */
.grad { color: var(--color-mint); }
p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }
.mono { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.02em; }
.muted { color: var(--text-muted); }
.eyebrow {
font-family: var(--font-mono);
font-size: var(--fs-caption);
font-weight: var(--fw-semibold);
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--accent);
margin-bottom: var(--space-4);
display: inline-flex;
align-items: center;
gap: var(--space-3);
}
.eyebrow::before {
content: '';
width: 28px;
height: 1px;
/* Cool → mint → warm hairline */
background: linear-gradient(90deg, var(--color-mint-cool), var(--color-mint), var(--color-mint-warm));
}
/* ---------- Layout primitives ---------- */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-pad);
position: relative;
}
.section {
padding-block: var(--space-10);
position: relative;
}
.section + .section { border-top: 1px solid var(--border); }
.grid { display: grid; gap: var(--grid-gutter); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0.875rem 1.5rem;
border-radius: var(--r-pill);
font-weight: var(--fw-semibold);
font-size: var(--fs-body);
letter-spacing: 0.005em;
transition: transform var(--t-fast) var(--ease),
background-color var(--t-fast) var(--ease),
color var(--t-fast) var(--ease),
box-shadow var(--t-base) var(--ease);
border: 1px solid transparent;
white-space: nowrap;
position: relative;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary {
background: var(--gradient-mint);
color: var(--color-night);
box-shadow: 0 0 0 0 rgba(62, 207, 160, 0);
background-size: 140% 140%;
background-position: 0% 50%;
transition: background-position var(--t-base) var(--ease),
transform var(--t-fast) var(--ease),
box-shadow var(--t-base) var(--ease);
}
.btn--primary:hover {
background-position: 100% 50%;
box-shadow: 0 0 0 8px rgba(79, 190, 210, 0.10);
}
.btn--ghost {
background: transparent;
color: var(--text-primary);
border-color: var(--border);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn .arrow { transition: transform var(--t-fast) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
/* ---------- Cards ---------- */
.card {
background: var(--bg-card);
border-radius: var(--r-card);
padding: var(--space-6);
border: 1px solid var(--hairline);
transition: border-color var(--t-base) var(--ease),
background-color var(--t-base) var(--ease),
transform var(--t-base) var(--ease);
}
.card--elevated { background: var(--bg-card-elevated); }
.card--bordered { border-left: 3px solid var(--accent); }
.card:hover { border-color: var(--border); }
.card--interactive:hover { border-color: var(--accent); transform: translateY(-2px); }
/* ============================================================
GLOBAL ATMOSPHERE — animated field + mouse-following glow
============================================================ */
.atmosphere {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.atmosphere::before {
content: '';
position: absolute;
inset: -50%;
background:
radial-gradient(circle at 18% 22%, rgba(62, 207, 160, 0.10), transparent 35%),
radial-gradient(circle at 82% 78%, rgba(79, 190, 210, 0.06), transparent 40%);
filter: blur(40px);
animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift {
0% { transform: translate3d(0, 0, 0) scale(1); }
100% { transform: translate3d(2%, -2%, 0) scale(1.05); }
}
/* Mouse-follow accent — set via JS as --mx / --my */
.mouse-glow {
position: fixed;
top: var(--my, 50%);
left: var(--mx, 50%);
width: 540px; height: 540px;
border-radius: 50%;
background: radial-gradient(circle, rgba(62, 207, 160, 0.10), transparent 60%);
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 1;
filter: blur(20px);
opacity: 0;
transition: opacity 600ms var(--ease);
}
body:hover .mouse-glow { opacity: 1; }
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
.mouse-glow { display: none; }
}
main, header, footer, aside { position: relative; z-index: 2; }
/* Scroll progress rail on left edge */
.progress-rail {
position: fixed;
left: 18px;
top: 50%;
transform: translateY(-50%) translateX(-8px);
display: flex;
flex-direction: column;
gap: 14px;
z-index: 30;
padding-block: var(--space-4);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.45s ease, visibility 0.45s ease, transform 0.45s ease;
}
/* Revealed only after the hero — JS adds .is-revealed from the Problem section on */
.progress-rail.is-revealed {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(-50%) translateX(0);
}
.progress-rail a {
display: block;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--hairline);
transition: background var(--t-base) var(--ease),
transform var(--t-base) var(--ease);
position: relative;
}
.progress-rail a:hover,
.progress-rail a.is-active {
background: var(--accent);
transform: scale(1.4);
}
.progress-rail a.is-active::after {
content: attr(data-label);
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.08em;
color: var(--accent);
text-transform: uppercase;
white-space: nowrap;
background: rgba(13, 17, 23, 0.7);
padding: 4px 10px;
border-radius: var(--r-input);
border: 1px solid var(--border);
backdrop-filter: blur(8px);
}
@media (max-width: 1100px) { .progress-rail { display: none; } }
/* ============================================================
SECTION ATMOSPHERIC BACKGROUNDS
Subtle inline-SVG patterns that give body to text-heavy sections
without competing with the foreground type. Each section gets a
distinct visual texture tied to what the section is about.
============================================================ */
/* Common positioning for atmospheric layers */
.section-atmosphere {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
isolation: isolate;
}
.section-atmosphere > * {
position: absolute;
inset: 0;
pointer-events: none;
}
/* Wrap children above the atmosphere */
section.section { position: relative; isolation: isolate; }
section.section > .container { position: relative; z-index: 1; }
/* --- Blueprint grid (very faint engineering grid) --- */
.atmosphere--blueprint {
background-image:
linear-gradient(rgba(62, 207, 160, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(62, 207, 160, 0.04) 1px, transparent 1px);
background-size: 64px 64px, 64px 64px;
mask-image: radial-gradient(ellipse at 80% 40%, black 0%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse at 80% 40%, black 0%, transparent 75%);
}
/* --- Mint helix flow (replaces the magnetic-field SVG behind Solution) --- */
.atmosphere--flow {
background:
radial-gradient(ellipse 50% 40% at 20% 30%, rgba(62, 207, 160, 0.08), transparent 70%),
radial-gradient(ellipse 40% 50% at 85% 70%, rgba(62, 207, 160, 0.06), transparent 70%);
}
.atmosphere--flow::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: cover;
background-position: center;
opacity: 0.45;
animation: flowDrift 30s linear infinite alternate;
}
@keyframes flowDrift {
to { transform: translate3d(-2%, 1%, 0); }
}
/* --- Cell network (Evidence section) — mix of mint + teal dots --- */
.atmosphere--cells {
background-image: url("data:image/svg+xml;utf8,");
background-size: 800px 800px;
background-repeat: repeat;
opacity: 0.7;
mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 80%);
}
/* --- Sketch / Schematic outline (for Problem) — line-drawing watermark --- */
.atmosphere--sketch {
background-image: url("data:image/svg+xml;utf8,");
background-size: 60%;
background-position: top right;
background-repeat: no-repeat;
opacity: 0.55;
}
/* Higgsfield blueprint PNGs — backgrounds are already transparent,
so just position + opacity. No blend-mode tricks needed. */
.atmosphere__img {
width: 60%;
height: 100%;
inset: 0 0 0 auto;
object-fit: contain;
object-position: top right;
opacity: 0;
transition: opacity 800ms var(--ease);
pointer-events: none;
}
.atmosphere__img.is-loaded { opacity: 0.55; }
.atmosphere__img--exploded.is-loaded { opacity: 0.50; }
.atmosphere__img--side.is-loaded { opacity: 0.22; }
/* ============================================================
EVENT BANNER (existing)
============================================================ */
.event-banner {
background: var(--accent);
color: var(--color-night);
font-size: var(--fs-caption);
font-weight: var(--fw-semibold);
letter-spacing: 0.02em;
position: relative;
z-index: 50;
}
.event-banner__inner {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-5);
padding: 0.625rem var(--container-pad);
flex-wrap: wrap;
text-align: center;
}
.event-banner__dot {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--color-night);
margin-right: 0.5em;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
.event-banner a {
text-decoration: underline;
text-underline-offset: 3px;
font-weight: var(--fw-bold);
}
/* ============================================================
HEADER
============================================================ */
.site-header {
position: sticky;
top: 0;
z-index: 40;
background: rgba(13, 17, 23, 0.75);
backdrop-filter: saturate(140%) blur(14px);
-webkit-backdrop-filter: saturate(140%) blur(14px);
border-bottom: 1px solid var(--hairline);
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
padding-block: var(--space-4);
gap: var(--space-6);
}
.nav__brand {
display: flex;
align-items: center;
gap: var(--space-3);
}
.nav__brand img { height: 38px; width: auto; }
.nav__brand .wordmark {
font-weight: var(--fw-bold);
font-size: 1.125rem;
letter-spacing: 0.06em;
}
.nav__links {
display: flex;
align-items: center;
gap: var(--space-6);
}
.nav__links a {
font-size: var(--fs-body);
color: var(--text-muted);
transition: color var(--t-fast) var(--ease);
}
.nav__links a:hover { color: var(--text-primary); }
.nav__links a.is-active { color: var(--text-primary); }
.nav__toggle { display: none; }
@media (max-width: 900px) {
/* ---- Hamburger button (morphs into X when open) ---- */
.nav__toggle {
position: relative;
display: inline-flex;
width: 44px; height: 44px;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
border-radius: var(--r-input);
background: rgba(13, 17, 23, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 100;
transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
color: var(--text-primary);
}
.nav__toggle svg { display: none; } /* replace SVG hamburger with crisp CSS lines */
.nav__toggle::before,
.nav__toggle::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 18px;
height: 1.5px;
background: currentColor;
transform-origin: center;
transition: transform 320ms var(--ease), opacity 320ms var(--ease);
}
.nav__toggle::before { transform: translate(-50%, -4px); }
.nav__toggle::after { transform: translate(-50%, 4px); }
.nav__toggle.is-open {
border-color: var(--color-mint);
background: rgba(62, 207, 160, 0.10);
color: var(--color-mint);
}
.nav__toggle.is-open::before { transform: translate(-50%, 0) rotate(45deg); }
.nav__toggle.is-open::after { transform: translate(-50%, 0) rotate(-45deg); }
/* ---- Body lock when menu open ---- */
body.nav-open { overflow: hidden; }
/* CRITICAL: drop the header's backdrop-filter when menu is open.
backdrop-filter creates a new positioning context, which traps
position:fixed children inside the header instead of letting them
fill the viewport. Without this fix, the full-screen menu only
covered the ~80px header band. */
body.nav-open .site-header {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* ---- Always hide the header Partner CTA on mobile (use in-menu one instead) ---- */
.nav__cta { display: none !important; }
/* In-menu CTA visible only on mobile (hidden on desktop where header CTA exists) */
.nav__links-cta { counter-increment: none !important; } /* don't bump the numbered counter */
/* ---- Full-screen overlay menu ---- */
.nav__links {
position: fixed;
inset: 0;
z-index: 90;
display: flex;
flex-direction: column;
justify-content: flex-start;
list-style: none;
margin: 0;
/* Top padding clears the event banner (~52px) + header bar (~80px) + breathing room */
padding: calc(var(--space-9) + 88px) var(--container-pad) var(--space-9);
gap: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background:
radial-gradient(ellipse 60% 50% at 80% 90%, rgba(62, 207, 160, 0.10), transparent 60%),
linear-gradient(180deg,
rgba(13, 17, 23, 0.97) 0%,
rgba(13, 17, 23, 0.99) 60%,
rgba(13, 17, 23, 0.97) 100%
);
backdrop-filter: blur(20px) saturate(1.2);
-webkit-backdrop-filter: blur(20px) saturate(1.2);
opacity: 0;
visibility: hidden;
transition: opacity 380ms var(--ease), visibility 380ms;
counter-reset: nav-item;
}
.nav__links.is-open {
opacity: 1;
visibility: visible;
}
/* Top + bottom mint hairlines tie it into the page rhythm */
.nav__links::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: var(--gradient-mint-line);
opacity: 0.5;
}
.nav__links::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 1px;
background: var(--gradient-mint-line);
opacity: 0.5;
}
/* Each link row */
.nav__links li {
counter-increment: nav-item;
padding: var(--space-3) 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
opacity: 0;
transform: translateY(20px);
transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}
.nav__links li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.nav__links.is-open li { opacity: 1; transform: none; }
.nav__links.is-open li:nth-child(1) { transition-delay: 120ms; }
.nav__links.is-open li:nth-child(2) { transition-delay: 180ms; }
.nav__links.is-open li:nth-child(3) { transition-delay: 240ms; }
.nav__links.is-open li:nth-child(4) { transition-delay: 300ms; }
.nav__links.is-open li:nth-child(5) { transition-delay: 360ms; }
.nav__links.is-open li:nth-child(6) { transition-delay: 420ms; }
/* Link itself — large editorial typography, numbered */
.nav__links a {
display: flex;
align-items: baseline;
justify-content: center;
gap: var(--space-4);
/* nudge the centred items slightly to the left */
transform: translateX(-2rem);
color: var(--text-primary);
font-size: clamp(2rem, 7.5vw, 2.75rem);
font-weight: var(--fw-semibold);
letter-spacing: -0.025em;
line-height: 1;
text-decoration: none;
transition: color 220ms var(--ease), transform 220ms var(--ease);
}
.nav__links a::before {
content: counter(nav-item, decimal-leading-zero);
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: var(--fw-regular);
color: var(--color-teal); /* numbered prefix — secondary instrument accent */
letter-spacing: 0.18em;
flex-shrink: 0;
width: 30px;
transform: translateY(-0.4em);
}
.nav__links a:hover,
.nav__links a:focus,
.nav__links a:active { color: var(--color-mint); }
/* In-menu Partner CTA — sits below the menu items as a wide pill */
.nav__links-cta {
border-bottom: none !important;
padding-top: var(--space-7) !important;
}
.nav__links-cta a {
display: flex !important;
width: 100%;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-sans) !important;
font-size: 1.0625rem !important;
font-weight: var(--fw-semibold) !important;
letter-spacing: 0 !important;
line-height: 1.2 !important;
text-transform: none;
padding: var(--space-4) var(--space-6) !important;
border-radius: var(--r-pill);
color: var(--color-night) !important; /* match desktop CTA — dark text on mint pill */
transform: none;
}
.nav__links-cta a:hover,
.nav__links-cta a:focus { color: var(--color-night) !important; } /* override .nav__links a:hover { color: mint } */
.nav__links-cta a::before { content: none !important; } /* skip the 0X number prefix */
/* In-menu social row — icons centered below the CTA */
.nav__links-social {
counter-increment: none !important; /* don't bump the numbered counter */
border-bottom: none !important;
display: flex !important;
justify-content: center;
gap: var(--space-5);
padding-top: var(--space-6) !important;
}
.nav__links-social a {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid var(--hairline);
color: var(--text-primary);
font-size: 0 !important; /* neutralize the large nav-link type */
gap: 0 !important;
transform: none;
}
.nav__links-social a::before { content: none !important; } /* no 0X prefix */
.nav__links-social a:hover,
.nav__links-social a:focus {
color: var(--color-night);
background: var(--accent);
border-color: var(--accent);
}
.nav__links-social svg { width: 22px; height: 22px; display: block; }
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.nav__links,
.nav__links li,
.nav__toggle::before,
.nav__toggle::after { transition: none; animation: none; }
}
}
/* Hide the in-menu CTA on desktop — the header CTA does its job there */
.nav__links-cta { display: none; }
@media (max-width: 900px) { .nav__links-cta { display: list-item; } }
/* ============================================================
HERO v2 — Instrument console
- Top live strip (status ribbon, edge-to-edge)
- Side numbered rail (manuscript-style section marker)
- Broken-grid editorial typography
- Live readout panel beside the device, with measurement scale
- Bottom marquee ties into page rhythm
============================================================ */
.hero {
position: relative;
overflow: hidden;
padding-block: 0;
border-bottom: 1px solid var(--hairline);
}
/* ---- Top status strip (certification ribbon) ---- */
.hero__strip {
position: relative;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
padding: var(--space-2) var(--container-pad);
border-bottom: 1px solid var(--hairline);
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
background:
linear-gradient(180deg, rgba(62, 207, 160, 0.05), transparent 80%),
var(--bg-base);
white-space: nowrap;
overflow: hidden;
}
.hero__strip-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--color-mint);
box-shadow: 0 0 0 3px rgba(62, 207, 160, 0.18);
animation: heroStripPulse 1.8s infinite ease-out;
flex: 0 0 auto;
}
.hero__strip-label { color: var(--color-mint); font-weight: 700; letter-spacing: 0.12em; }
.hero__strip-sep { color: var(--color-mint); opacity: 0.45; }
.hero__strip-flex { flex: 1 1 auto; }
.hero__strip-counter {
display: inline-flex; align-items: center; gap: 4px;
color: var(--text-muted);
}
.hero__strip-counter strong { color: var(--color-mint); font-weight: 700; }
@keyframes heroStripPulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(62, 207, 160, 0.20); }
50% { box-shadow: 0 0 0 7px rgba(62, 207, 160, 0.04); }
}
/* ---- Main console grid — text aligns with container, right side capped near a "content max" ---- */
.hero__console {
position: relative;
z-index: 3;
display: grid;
/* Left text aligns with the 1200px container left edge,
right side is capped so the device sits comfortably (not against viewport edge). */
grid-template-columns:
[type-start] minmax(0, 540px)
[type-end] minmax(var(--space-7), 1fr)
[instr-start] minmax(0, 1000px) [instr-end];
padding-block: var(--space-9);
padding-inline-start: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
padding-inline-end: max(var(--container-pad), calc((100vw - 1920px) / 2 + var(--container-pad)));
align-items: center;
}
.hero__type { grid-column: type-start / type-end; }
.hero__instrument { grid-column: instr-start / instr-end; }
@media (max-width: 1000px) {
.hero__console {
grid-template-columns: 1fr;
padding-block: var(--space-8);
padding-inline-end: var(--container-pad);
gap: var(--space-8);
}
.hero__type, .hero__instrument { grid-column: 1; }
}
/* ---- Editorial typography stack ---- */
.hero__type { position: relative; }
.hero__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-mono);
font-size: 0.8125rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-mint);
margin: 0 0 var(--space-6);
}
.hero__eyebrow .bracket { opacity: 0.5; font-weight: 700; }
.hero__verb {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-mono);
font-size: 0.875rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-muted);
margin: 0 0 var(--space-4);
}
.hero__verb-arrow {
color: var(--color-mint);
font-weight: 700;
letter-spacing: 0;
}
.hero__h1 {
font-size: clamp(3rem, 6.5vw + 1rem, 7rem);
line-height: 0.92;
letter-spacing: -0.035em;
font-weight: 700;
text-transform: none;
margin: 0 0 var(--space-6);
}
.hero__h1-line {
display: block;
}
.hero__h1-line--1 { color: var(--text-primary); }
.hero__h1-line--2 { color: var(--text-primary); }
.hero__h1-line--3 {
color: var(--color-mint);
}
.hero__lede {
max-width: 46ch;
color: rgba(255, 255, 255, 0.92);
font-size: var(--fs-body-lg);
line-height: var(--lh-body);
margin: 0 0 var(--space-7);
/* Quiet safety stroke — just enough for bright video frames */
text-shadow:
0 1px 2px rgba(0, 0, 0, 0.30),
0 0 14px rgba(13, 17, 23, 0.22);
}
.hero__ctas {
display: inline-flex;
align-items: center;
gap: var(--space-5);
flex-wrap: wrap;
}
.btn-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--text-primary);
font-family: var(--font-mono);
font-size: 0.8125rem;
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none;
position: relative;
padding: 0 2px 6px;
transition: color var(--t-fast) var(--ease);
}
.btn-link::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: var(--color-teal); /* secondary accent — distinguishes from the mint primary CTA */
opacity: 0.7;
transition: opacity var(--t-fast) var(--ease);
}
.btn-link:hover { color: var(--color-teal); }
.btn-link:hover::after { opacity: 1; }
/* ---- Right column: instrument (narrow readout + dominant device) ---- */
.hero__instrument {
position: relative;
display: grid;
grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
gap: var(--space-5);
align-items: center;
}
@media (max-width: 1000px) {
.hero__instrument {
grid-template-columns: 1fr;
gap: var(--space-5);
}
}
/* Live readout panel — narrow side column */
.hero__readout {
border: 1px solid var(--border);
background:
linear-gradient(180deg, rgba(62, 207, 160, 0.06), transparent 60%),
rgba(13, 17, 23, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: var(--space-4);
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
border-radius: 4px;
}
.hero__readout-header {
display: flex;
align-items: center;
gap: var(--space-2);
padding-bottom: var(--space-3);
margin-bottom: var(--space-3);
border-bottom: 1px solid rgba(62, 207, 160, 0.18);
font-weight: 700;
letter-spacing: 0.14em;
color: var(--color-mint);
}
.hero__readout-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--color-mint);
box-shadow: 0 0 6px var(--color-mint);
animation: heroStripPulse 1.8s infinite ease-out;
}
.hero__readout-spacer { flex: 1; }
.hero__readout-mode {
color: var(--text-primary);
background: rgba(62, 207, 160, 0.12);
border: 1px solid rgba(62, 207, 160, 0.28);
padding: 2px 6px;
font-size: 0.625rem;
}
.hero__readout-row {
display: grid;
grid-template-columns: 64px 1fr;
align-items: center;
gap: var(--space-3);
padding: 8px 0;
border-bottom: 1px dashed rgba(62, 207, 160, 0.14);
}
.hero__readout-row:last-of-type { border-bottom: none; }
.hero__readout .k { color: var(--text-muted); }
.hero__readout .v {
color: var(--text-primary);
font-weight: 700;
font-size: 1rem;
letter-spacing: 0;
grid-column: 2;
margin-right: var(--space-3);
}
.hero__readout .v small {
color: var(--color-mint);
font-weight: 400;
font-size: 0.6875rem;
margin-left: 2px;
letter-spacing: 0.08em;
}
/* Make value+bar share the second column */
.hero__readout-row {
grid-template-columns: 64px minmax(48px, auto) 1fr;
}
.hero__readout .v { grid-column: auto; margin-right: 0; }
.hero__readout .bar {
display: block;
height: 4px;
background: rgba(255, 255, 255, 0.06);
position: relative;
overflow: hidden;
border-radius: 2px;
}
.hero__readout .bar__fill {
display: block;
height: 100%;
width: var(--w, 50%);
background: var(--gradient-mint);
animation: heroBarPulse 4s infinite ease-in-out;
border-radius: 2px;
}
@keyframes heroBarPulse {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.35); }
}
.hero__waveform {
margin-top: var(--space-3);
height: 36px;
}
.hero__waveform svg {
width: 100%; height: 100%;
display: block;
}
.hero__waveform polyline {
fill: none;
stroke: var(--color-mint);
stroke-width: 1.2;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 0 4px rgba(62, 207, 160, 0.35));
animation: heroWaveShift 5s linear infinite;
}
@keyframes heroWaveShift {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
/* Device — clean, no frame; crosshair corners + tags + scale */
.hero__device-v2 {
position: relative;
padding: var(--space-4) var(--space-5) var(--space-6);
transform: rotateY(var(--rx, 0deg)) rotateX(var(--ry, 0deg));
transition: transform 300ms var(--ease);
will-change: transform;
perspective: 1200px;
}
.hero__device-v2 img {
width: 100%;
height: auto;
display: block;
filter: drop-shadow(0 22px 50px rgba(0, 0, 0, 0.55))
drop-shadow(0 0 36px rgba(62, 207, 160, 0.12));
}
.hero__crosshair {
position: absolute;
width: 18px; height: 18px;
border: 1px solid var(--color-mint);
opacity: 0.7;
}
.hero__crosshair.tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.hero__crosshair.tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.hero__crosshair.bl { bottom: 36px; left: 0; border-right: none; border-top: none; }
.hero__crosshair.br { bottom: 36px; right: 0; border-left: none; border-top: none; }
.hero__device-tag {
position: absolute;
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 0.625rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-muted);
padding: 4px 10px;
background: rgba(13, 17, 23, 0.65);
border: 1px solid var(--border);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-radius: 2px;
}
.hero__device-tag.tl { top: 12px; left: 32px; color: var(--color-mint); }
.hero__device-tag.tl .dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--color-mint);
box-shadow: 0 0 6px var(--color-mint);
}
.hero__device-tag.br { bottom: 50px; right: 32px; }
/* Measurement scale beneath the device — implies field strength */
.hero__scale {
position: relative;
height: 24px;
margin-top: var(--space-2);
margin-inline: var(--space-3);
}
.hero__scale-line {
position: absolute;
inset: 0 0 auto 0;
top: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--color-mint) 15%, var(--color-mint) 85%, transparent);
opacity: 0.55;
}
.hero__scale-tick {
position: absolute;
top: 0;
transform: translateX(-50%);
font-family: var(--font-mono);
font-size: 0.625rem;
letter-spacing: 0.06em;
color: var(--text-muted);
padding-top: 9px;
white-space: nowrap;
}
.hero__scale-tick::before {
content: '';
position: absolute;
left: 50%;
top: 0;
width: 1px; height: 6px;
background: var(--color-mint);
opacity: 0.6;
transform: translateX(-50%);
}
.hero__scale-tick::after {
content: attr(data-label);
}
.hero__scale-cursor {
position: absolute;
top: -6px;
transform: translateX(-50%);
width: 0; height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 6px solid var(--color-mint);
filter: drop-shadow(0 0 4px rgba(62, 207, 160, 0.6));
animation: heroCursorWander 6s ease-in-out infinite;
}
@keyframes heroCursorWander {
0%, 100% { left: 38%; }
50% { left: 46%; }
}
/* ---- Quieter magnetic field background ---- */
.hero__field {
position: absolute;
inset: 0;
z-index: 1;
opacity: 0.22;
pointer-events: none;
}
.hero__field svg { width: 100%; height: 100%; }
.hero__field path {
stroke: var(--color-mint);
stroke-width: 1;
fill: none;
opacity: 0.5;
}
.hero__field path:nth-child(odd) { animation: fieldFlow 12s ease-in-out infinite; }
.hero__field path:nth-child(even) { animation: fieldFlow 14s ease-in-out infinite reverse; }
@keyframes fieldFlow {
0%, 100% { transform: translateY(-8px); opacity: 0.20; }
50% { transform: translateY( 8px); opacity: 0.45; }
}
/* ============================================================
HERO v3 — Full-bleed cinematic video background
The video occupies the whole hero. Typography is overlaid on
a soft left-side gradient for legibility; mint vignette on
the right ties it to the rest of the page palette.
============================================================ */
.hero--v3 {
position: relative;
overflow: hidden;
min-height: clamp(640px, 88vh, 1000px);
padding: 0;
display: grid;
grid-template-rows: 1fr auto; /* overlay fills, marquee anchors bottom */
border-bottom: 1px solid var(--hairline);
}
/* Video background wrapper */
.hero__video-bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
isolation: isolate;
}
.hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
/* Subtle starting tint so the video itself blends with the page */
filter: contrast(1.04) saturate(1.05);
will-change: transform;
}
/* Dark legibility gradient — soft on the left, fading to clear video on the right.
The lede now does most of the work with its white color + shadow, so the
overlay can be lighter and let more of the device come through. */
.hero__video-overlay {
position: absolute;
inset: 0;
pointer-events: none;
background:
/* Left-side darkening for text — lighter than before */
linear-gradient(90deg,
rgba(13, 17, 23, 0.82) 0%,
rgba(13, 17, 23, 0.68) 25%,
rgba(13, 17, 23, 0.40) 50%,
rgba(13, 17, 23, 0.14) 75%,
rgba(13, 17, 23, 0) 100%
),
/* Bottom fade so the marquee sits cleanly */
linear-gradient(0deg,
rgba(13, 17, 23, 0.65) 0%,
rgba(13, 17, 23, 0.08) 22%,
rgba(13, 17, 23, 0) 35%
),
/* Top fade to anchor under the header */
linear-gradient(180deg,
rgba(13, 17, 23, 0.45) 0%,
rgba(13, 17, 23, 0) 18%
);
}
/* Soft mint vignette on the device side — ties video to brand */
.hero__video-glow {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse 60% 50% at 72% 65%, rgba(62, 207, 160, 0.12), transparent 65%),
radial-gradient(ellipse 30% 25% at 78% 92%, rgba(62, 207, 160, 0.08), transparent 70%);
mix-blend-mode: screen;
}
/* Thin mint hairline at the very top — connects with the header rhythm */
.hero__video-hairline {
position: absolute;
left: 0; right: 0; top: 0;
height: 1px;
background: var(--gradient-mint-line);
opacity: 0.35;
pointer-events: none;
}
/* Typography overlay */
.hero__overlay {
position: relative;
z-index: 2;
display: grid;
align-items: center;
width: 100%;
padding-block: var(--space-10) var(--space-9);
padding-inline-start: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
padding-inline-end: var(--container-pad);
}
.hero__overlay-inner {
max-width: 640px;
}
/* Make sure the marquee sits ABOVE the video */
.hero--v3 > .hero__marquee {
position: relative;
z-index: 2;
}
/* Reduced motion — hide the video and let the poster image show */
@media (prefers-reduced-motion: reduce) {
.hero__video { display: none; }
.hero__video-bg::after {
content: '';
position: absolute;
inset: 0;
background: url('../img/device-hero.png') center/cover no-repeat;
filter: brightness(0.85);
}
}
/* Tablet — keep the left side covered but lighter than before */
@media (max-width: 1100px) and (min-width: 721px) {
.hero__video-overlay {
background:
linear-gradient(90deg,
rgba(13, 17, 23, 0.85) 0%,
rgba(13, 17, 23, 0.72) 45%,
rgba(13, 17, 23, 0.45) 72%,
rgba(13, 17, 23, 0.15) 92%,
rgba(13, 17, 23, 0) 100%
),
linear-gradient(0deg,
rgba(13, 17, 23, 0.60) 0%,
rgba(13, 17, 23, 0) 35%
);
}
}
/* Mobile — top→bottom darken */
@media (max-width: 720px) {
.hero--v3 { min-height: 80vh; }
.hero__video-overlay {
background:
linear-gradient(180deg,
rgba(13, 17, 23, 0.78) 0%,
rgba(13, 17, 23, 0.45) 30%,
rgba(13, 17, 23, 0.35) 55%,
rgba(13, 17, 23, 0.65) 100%
);
}
.hero__overlay-inner { max-width: 100%; }
}
/* Quiet type shadows — just enough for bright video frames */
.hero--v3 .hero__h1 {
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.22), 0 0 18px rgba(13, 17, 23, 0.18);
}
.hero--v3 .hero__eyebrow {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}
/* ---- Staggered cinematic entrance for hero v3 ----
Each line of the hero sequences in: blur-out → focus, with slight
upward translate. Reads as "premium product reveal" rather than the
generic page-load fade. */
.hero--v3 .hero__eyebrow,
.hero--v3 .hero__h1-line,
.hero--v3 .hero__lede,
.hero--v3 .hero__ctas {
opacity: 0;
transform: translateY(28px);
filter: blur(8px);
animation: heroEntrance 1100ms cubic-bezier(0.16, 0.84, 0.44, 1) forwards;
}
.hero--v3 .hero__eyebrow { animation-delay: 150ms; }
.hero--v3 .hero__h1-line--1 { animation-delay: 320ms; }
.hero--v3 .hero__h1-line--2 { animation-delay: 460ms; }
.hero--v3 .hero__h1-line--3 { animation-delay: 620ms; }
.hero--v3 .hero__lede { animation-delay: 880ms; }
.hero--v3 .hero__ctas { animation-delay: 1080ms; }
@keyframes heroEntrance {
to {
opacity: 1;
transform: none;
filter: blur(0);
}
}
/* Reduced motion — instant, no animation */
@media (prefers-reduced-motion: reduce) {
.hero--v3 .hero__eyebrow,
.hero--v3 .hero__h1-line,
.hero--v3 .hero__lede,
.hero--v3 .hero__ctas {
animation: none;
opacity: 1;
transform: none;
filter: none;
}
}
/* ---- Bottom marquee ---- */
.hero__marquee {
position: relative;
z-index: 4;
overflow: hidden;
border-top: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
padding: var(--space-3) 0;
background:
linear-gradient(180deg, transparent, rgba(62, 207, 160, 0.04) 50%, transparent);
}
.hero__marquee-track {
display: inline-flex;
align-items: center;
gap: var(--space-5);
white-space: nowrap;
animation: heroMarquee 42s linear infinite;
font-family: var(--font-mono);
font-size: 0.8125rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-muted);
padding-left: var(--space-5);
}
.hero__marquee-track .dot {
color: var(--color-mint);
font-size: 0.5rem;
vertical-align: middle;
}
@keyframes heroMarquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.hero__marquee-track,
.hero__waveform polyline,
.hero__scale-cursor,
.hero__field path,
.hero__readout .bar__fill { animation: none; }
}
/* HUD corner brackets — shared by solution & showcase sections */
.hud-corners::before,
.hud-corners::after,
.hud-corners > .hud-tr,
.hud-corners > .hud-bl {
content: '';
position: absolute;
width: 22px; height: 22px;
border: 2px solid var(--accent);
pointer-events: none;
}
.hud-corners::before { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.hud-corners::after { bottom: 10px; right: 10px; border-left: none; border-top: none; }
.hud-corners .hud-tr { top: 10px; right: 10px; border-left: none; border-bottom: none; }
.hud-corners .hud-bl { bottom: 10px; left: 10px; border-right: none; border-top: none; }
/* HUD scan line — animated bottom-to-top sweep */
.hud-scan {
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
opacity: 0.7;
animation: scan 4.5s linear infinite;
pointer-events: none;
will-change: transform;
}
@keyframes scan {
0% { transform: translateY(0); opacity: 0.6; }
50% { opacity: 1; }
100% { transform: translateY(420px); opacity: 0; }
}
/* HUD telemetry tag */
.hud-tag {
position: absolute;
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.08em;
color: var(--accent);
background: rgba(13, 17, 23, 0.55);
padding: 4px 8px;
border: 1px solid var(--border);
border-radius: 4px;
backdrop-filter: blur(4px);
}
.hud-tag.tl { top: 18px; left: 44px; }
.hud-tag.br { bottom: 18px; right: 44px; }
.hud-tag .dot {
display: inline-block; width: 6px; height: 6px; border-radius: 50%;
background: var(--accent); margin-right: 6px;
animation: pulse 2s ease-in-out infinite;
vertical-align: middle;
}
/* Countdown chip */
.countdown {
display: inline-flex;
align-items: baseline;
gap: var(--space-3);
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-pill);
padding: 0.5rem 1rem;
margin-bottom: var(--space-5);
font-family: var(--font-mono);
font-size: var(--fs-mono);
color: var(--text-muted);
position: relative;
overflow: hidden;
}
.countdown::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(62, 207, 160, 0.12), transparent);
transform: translateX(-100%);
animation: shimmer 4s ease-in-out infinite;
}
@keyframes shimmer {
0%, 100% { transform: translateX(-100%); }
50% { transform: translateX(100%); }
}
.countdown strong { color: var(--accent); font-weight: var(--fw-bold); position: relative; }
/* ============================================================
STAT PANELS — Problem / Market, with count-up support
============================================================ */
.stat {
padding: var(--space-6);
background: rgba(22, 29, 39, 0.55); /* var(--bg-card) at ~55% */
backdrop-filter: blur(14px) saturate(1.1);
-webkit-backdrop-filter: blur(14px) saturate(1.1);
border-radius: var(--r-card);
border: 1px solid var(--hairline);
position: relative;
overflow: hidden;
}
.stat::after {
content: '';
position: absolute;
inset: auto 0 0 0;
height: 1px;
background: linear-gradient(90deg, transparent, currentColor, transparent);
opacity: 0.25;
}
.stat__value {
font-size: clamp(2.75rem, 5.5vw, 4.25rem);
font-weight: var(--fw-bold);
line-height: 1;
color: var(--color-mint);
text-shadow: 0 0 32px rgba(62, 207, 160, 0.35);
margin-bottom: var(--space-3);
letter-spacing: -0.025em;
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum';
}
.stat__label { color: var(--text-muted); font-size: var(--fs-body); }
.stat--alert { color: var(--color-alert); }
.stat--alert .stat__value { color: var(--color-alert); text-shadow: 0 0 32px rgba(231, 76, 60, 0.30); }
.stat--warn { color: #F2B544; }
.stat--warn .stat__value { color: #F2B544; text-shadow: 0 0 32px rgba(242, 181, 68, 0.30); }
/* ============================================================
PROBLEM failure list
============================================================ */
.failure-list { display: grid; gap: var(--space-4); margin-top: var(--space-7); }
.failure-list li {
display: grid;
grid-template-columns: 28px 1fr;
gap: var(--space-4);
align-items: start;
padding: var(--space-4) var(--space-5);
background: var(--bg-card);
border-radius: var(--r-card);
border: 1px solid var(--hairline);
border-left: 3px solid var(--color-alert);
}
.failure-list svg { color: var(--color-alert); width: 22px; height: 22px; margin-top: 2px; }
/* ============================================================
SOLUTION — device showcase v2 (large, framed, HUD)
============================================================ */
.solution-grid {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: var(--space-8);
align-items: start;
}
@media (max-width: 980px) { .solution-grid { grid-template-columns: 1fr; } }
.device-showcase {
position: relative;
border-radius: var(--r-card);
overflow: hidden;
border: 1px solid var(--hairline);
background:
radial-gradient(circle at 30% 30%, rgba(62, 207, 160, 0.12), transparent 55%),
radial-gradient(circle at 70% 70%, rgba(79, 190, 210, 0.08), transparent 55%),
var(--bg-card-elevated);
aspect-ratio: 4 / 3;
}
.device-showcase img {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
animation: drift-soft 9s ease-in-out infinite alternate;
}
@keyframes drift-soft {
0% { transform: translateY(0) scale(1); }
100% { transform: translateY(-6px) scale(1.015); }
}
/* HUD-data overlays for the device */
.device-hud {
position: absolute;
inset: 0;
pointer-events: none;
}
.device-hud .reticle {
position: absolute;
width: 64px; height: 64px;
border: 1px solid var(--accent);
border-radius: 50%;
top: 40%; left: 22%;
opacity: 0.7;
}
.device-hud .reticle::before,
.device-hud .reticle::after {
content: ''; position: absolute; background: var(--accent);
}
.device-hud .reticle::before {
top: 50%; left: -10px; right: -10px; height: 1px; transform: translateY(-50%);
}
.device-hud .reticle::after {
left: 50%; top: -10px; bottom: -10px; width: 1px; transform: translateX(-50%);
}
.device-hud .ping {
position: absolute;
top: 40%; left: 22%;
width: 64px; height: 64px;
margin: -32px;
border: 2px solid var(--accent);
border-radius: 50%;
opacity: 0;
animation: ping 2.8s ease-out infinite;
margin: 0;
transform: translate(-50%, -50%);
}
@keyframes ping {
0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.8; }
100% { transform: translate(-50%, -50%) scale(2.3); opacity: 0; }
}
.device-hud .data-block {
position: absolute;
padding: 8px 12px;
border: 1px solid var(--border);
background: rgba(13, 17, 23, 0.7);
backdrop-filter: blur(6px);
border-radius: 6px;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.05em;
color: var(--text-muted);
line-height: 1.6;
}
.device-hud .data-block .k { color: var(--text-muted); }
.device-hud .data-block .v { color: var(--accent); font-weight: var(--fw-semibold); }
.device-hud .data-block.bl { bottom: 18px; left: 18px; }
.device-hud .data-block.tr { top: 18px; right: 18px; text-align: right; }
.benefit-list { display: grid; gap: var(--space-3); }
.benefit-list li {
display: grid;
grid-template-columns: 32px 1fr;
gap: var(--space-4);
align-items: start;
padding: var(--space-4);
background: var(--bg-card);
border: 1px solid var(--hairline);
border-radius: var(--r-card);
transition: border-color var(--t-fast) var(--ease),
background-color var(--t-fast) var(--ease);
}
.benefit-list li:hover { border-color: var(--border); background: var(--bg-card-elevated); }
.benefit-list svg { color: var(--accent); width: 22px; height: 22px; margin-top: 2px; }
.benefit-list strong { display: block; margin-bottom: 2px; color: var(--text-primary); }
.benefit-list span { color: var(--text-muted); font-size: var(--fs-body); }
.patent-strip {
margin-top: var(--space-6);
padding: var(--space-4) var(--space-5);
border-radius: var(--r-card);
background: var(--bg-card);
border: 1px solid var(--hairline);
border-left: 3px solid var(--accent);
font-family: var(--font-mono);
font-size: var(--fs-mono);
color: var(--text-muted);
}
.patent-strip strong { color: var(--color-teal); font-weight: var(--fw-semibold); }
/* Centered variant — sits full-width below the solution grid as a closing
credential bar, horizontally centered for prominence. */
.patent-strip--center {
margin-top: var(--space-8);
margin-inline: auto;
width: max-content;
max-width: 100%;
text-align: center;
border-left: none;
border-top: 3px solid var(--accent);
}
/* ============================================================
EVIDENCE — real lab images with HUD frame
============================================================ */
.evidence-header {
display: flex;
justify-content: space-between;
align-items: end;
gap: var(--space-7);
flex-wrap: wrap;
margin-bottom: var(--space-7);
}
.efficacy {
font-size: clamp(3.75rem, 7.5vw, 6rem);
font-weight: var(--fw-bold);
/* Trophy result number — bright mint with glow, matches market values */
color: var(--color-mint);
text-shadow: 0 0 36px rgba(62, 207, 160, 0.40);
line-height: 1;
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
}
.efficacy small {
display: block;
font-size: var(--fs-body);
font-weight: var(--fw-regular);
color: var(--text-muted);
letter-spacing: 0;
margin-top: var(--space-2);
}
.evidence-card {
position: relative;
overflow: hidden;
padding: 0;
}
.evidence-card__media {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--color-night);
border-bottom: 1px solid var(--hairline);
}
.evidence-card__media img {
width: 100%; height: 100%;
object-fit: cover;
filter: contrast(1.02) saturate(0.95);
transition: transform 700ms var(--ease);
}
.evidence-card:hover .evidence-card__media img { transform: scale(1.04); }
.evidence-card__media::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(180deg, transparent 60%, rgba(13, 17, 23, 0.6));
}
.evidence-card__body { padding: var(--space-5) var(--space-6) var(--space-6); }
.evidence-card h3 { color: var(--accent); font-size: 1.125rem; margin-bottom: var(--space-2); }
.evidence-card .strain {
font-family: var(--font-mono);
font-size: var(--fs-caption);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.12em;
margin-bottom: var(--space-3);
}
.evidence-card p { color: var(--text-muted); font-size: var(--fs-body); }
/* Tag chip overlaid on top-left of media */
.evidence-card__media .chip {
position: absolute;
top: 12px;
left: 12px;
font-family: var(--font-mono);
font-size: 0.65rem;
letter-spacing: 0.12em;
color: var(--accent);
background: rgba(13, 17, 23, 0.7);
padding: 4px 8px;
border-radius: 4px;
border: 1px solid var(--border);
text-transform: uppercase;
backdrop-filter: blur(6px);
}
.evidence-card__media .scale {
position: absolute;
bottom: 12px;
right: 12px;
font-family: var(--font-mono);
font-size: 0.65rem;
color: var(--text-primary);
background: rgba(13, 17, 23, 0.7);
padding: 3px 8px;
border-radius: 3px;
border: 1px solid var(--hairline);
}
/* Schematic illustration card (3rd evidence card when no image) */
.evidence-schematic {
width: 100%; height: 100%;
display: grid;
place-items: center;
background:
radial-gradient(circle at 50% 50%, rgba(62, 207, 160, 0.10), transparent 60%),
var(--color-night);
}
.evidence-schematic svg { width: 80%; max-width: 240px; }
.evidence-schematic .pulse-ring {
fill: none; stroke: var(--accent); stroke-width: 1;
transform-origin: center; transform-box: fill-box;
animation: pulseRing 3.2s ease-out infinite;
}
.evidence-schematic .pulse-ring:nth-child(2) { animation-delay: 1.0s; }
.evidence-schematic .pulse-ring:nth-child(3) { animation-delay: 2.0s; }
@keyframes pulseRing {
0% { transform: scale(0.4); opacity: 0.8; }
100% { transform: scale(1.5); opacity: 0; }
}
.biocompat {
margin-top: var(--space-6);
padding: var(--space-5) var(--space-6);
border: 1px solid var(--border);
border-radius: var(--r-card);
background: linear-gradient(180deg, rgba(62, 207, 160, 0.05), transparent);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-5);
flex-wrap: wrap;
position: relative;
isolation: isolate;
}
.biocompat::before {
content: '';
position: absolute;
top: -1px; left: 0; right: 0;
height: 1px;
background: var(--gradient-mint-line);
pointer-events: none;
}
.biocompat__title { color: var(--accent); font-weight: var(--fw-semibold); }
/* ============================================================
TESTIMONIALS — clinician quote cards (replaces competition matrix)
============================================================ */
.testimonial-grid {
margin-top: var(--space-8);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-5);
}
@media (max-width: 820px) { .testimonial-grid { grid-template-columns: 1fr; } }
.testimonial-card {
position: relative;
margin: 0;
padding: var(--space-6);
background: var(--bg-card);
border: 1px solid var(--hairline);
border-radius: var(--r-card);
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.testimonial-card__mark {
width: 34px;
height: 34px;
color: var(--accent);
opacity: 0.85;
}
.testimonial-card blockquote { margin: 0; }
.testimonial-card blockquote p {
margin: 0;
font-size: var(--fs-body-lg);
line-height: 1.5;
color: var(--text-primary);
}
.testimonial-card figcaption {
margin-top: auto;
display: flex;
flex-direction: row;
align-items: center;
gap: var(--space-3);
padding-top: var(--space-4);
border-top: 1px solid var(--hairline);
}
.testimonial-card__avatar {
width: 52px;
height: 52px;
border-radius: 50%;
object-fit: cover;
object-position: top center;
flex-shrink: 0;
border: 1px solid var(--hairline);
}
.testimonial-card__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.testimonial-card__name { font-weight: var(--fw-semibold); color: var(--text-primary); }
.testimonial-card__role {
font-family: var(--font-mono);
font-size: var(--fs-caption);
color: var(--text-muted);
}
.tag-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag {
font-size: var(--fs-caption);
font-family: var(--font-mono);
padding: 4px 10px;
border-radius: var(--r-pill);
background: var(--bg-card);
border: 1px solid var(--hairline);
color: var(--text-muted);
}
/* ============================================================
MARKET
============================================================ */
.market-grid { margin-bottom: var(--space-8); }
.market-card {
background: rgba(22, 29, 39, 0.55) !important;
backdrop-filter: blur(14px) saturate(1.1);
-webkit-backdrop-filter: blur(14px) saturate(1.1);
}
.market-card .label {
font-family: var(--font-mono);
font-size: var(--fs-caption);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.12em;
margin-bottom: var(--space-2);
}
.market-card .label small { display: block; text-transform: none; letter-spacing: 0; color: var(--text-muted); opacity: 0.7; }
.market-card .value {
font-size: clamp(2.75rem, 5vw, 4rem);
font-weight: var(--fw-bold);
/* Trophy numbers — bright mint with a soft glow. These are deliberately
the flashiest element on the page; the rest of the section is muted. */
color: var(--color-mint);
text-shadow: 0 0 32px rgba(62, 207, 160, 0.35);
line-height: 1;
margin: var(--space-3) 0;
font-variant-numeric: tabular-nums;
letter-spacing: -0.025em;
}
.market-card p { color: var(--text-muted); }
/* Animated proportional bar for each market card — hidden by request */
.market-bar { display: none; }
.market-bar::after {
content: '';
position: absolute;
inset: 0;
width: 0;
background: linear-gradient(90deg, var(--color-mint-cool), var(--color-mint), var(--color-mint-warm));
transition: width 1.2s var(--ease);
}
.market-card.is-visible .market-bar::after { width: var(--bar, 100%); }
.drivers { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
@media (max-width: 900px) { .drivers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .drivers { grid-template-columns: 1fr; } }
.driver { padding: var(--space-5); border: 1px solid var(--hairline); border-radius: var(--r-card); background: var(--bg-card); transition: border-color var(--t-fast) var(--ease); }
.driver:hover { border-color: var(--border); }
.driver svg { color: var(--accent); width: 24px; height: 24px; margin-bottom: var(--space-3); }
.driver strong { display: block; margin-bottom: var(--space-1); }
.driver span { color: var(--text-muted); font-size: var(--fs-body); }
/* ============================================================
COMPARISON MATRIX — sticky pin
============================================================ */
.matrix-pin { position: relative; }
@media (min-width: 1000px) {
/* Give the matrix significantly more share — left card column is narrative,
the matrix is the comparison itself and needs the room. */
.matrix-pin { display: grid; grid-template-columns: 0.85fr 1.9fr; gap: var(--space-7); align-items: start; }
.matrix-pin__sticky {
position: sticky; top: 92px;
}
}
.matrix-wrap {
overflow-x: auto;
/* When it does need to scroll on small screens, keep momentum smooth */
-webkit-overflow-scrolling: touch;
}
.matrix {
width: 100%;
border-collapse: collapse;
font-size: 0.9375rem;
table-layout: fixed; /* equal-share columns prevent over-wide labels */
}
.matrix th, .matrix td {
padding: var(--space-2) var(--space-2);
text-align: center;
border-bottom: 1px solid var(--hairline);
vertical-align: middle;
}
.matrix .row-head { padding-left: var(--space-3); padding-right: var(--space-2); }
.matrix thead th {
color: var(--text-muted);
font-weight: var(--fw-semibold);
font-size: 0.6875rem;
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1.25;
padding-top: var(--space-3);
padding-bottom: var(--space-3);
}
.matrix thead th .mono { font-size: 0.625rem; }
/* The first column (Capability) is narrative, others are equal-share */
.matrix col.matrix-col-cap { width: 22%; }
.matrix col.matrix-col-data { width: 13%; }
@media (max-width: 1000px) and (min-width: 721px) {
/* Tablet — allow horizontal scroll with a clear min-width */
.matrix { table-layout: auto; min-width: 720px; }
}
/* ============================================================
Matrix — mobile (≤720px) — convert table into one card per
capability. No horizontal scrolling; everything stacks
vertically with the Azyro result highlighted at the top.
============================================================ */
@media (max-width: 720px) {
.matrix-wrap { overflow: visible; }
.matrix,
.matrix thead,
.matrix tbody,
.matrix tr,
.matrix th,
.matrix td { display: block; }
.matrix colgroup,
.matrix thead { display: none; } /* column headers move into ::before on each cell */
.matrix { width: 100%; min-width: 0; }
/* Each row becomes a card */
.matrix tbody tr {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-card);
padding: var(--space-4) var(--space-4) var(--space-3);
margin-bottom: var(--space-4);
isolation: isolate;
position: relative;
}
.matrix tbody tr:last-child { margin-bottom: 0; }
/* Capability label = card title */
.matrix tbody td.row-head {
text-align: left;
font-size: 1.0625rem;
font-weight: var(--fw-semibold);
color: var(--text-primary);
padding: 0 0 var(--space-3) 0;
margin-bottom: var(--space-3);
border-bottom: 1px solid var(--hairline);
}
/* Each non-row-head cell: label on the left, value (icon) on the right */
.matrix tbody td:not(.row-head) {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: var(--space-3);
padding: 8px 0;
border: none;
text-align: left;
font-size: 1.125rem;
line-height: 1;
}
.matrix tbody td:not(.row-head)::before {
content: attr(data-label);
color: var(--text-muted);
font-family: var(--font-sans);
font-size: 0.9375rem;
font-weight: var(--fw-regular);
text-transform: none;
letter-spacing: 0;
}
/* Azyro row — highlighted block at the top of each card */
.matrix tbody td.own-col {
background: rgba(62, 207, 160, 0.10);
border: 1px solid rgba(62, 207, 160, 0.32);
border-radius: 6px;
padding: 10px 12px;
margin: 0 0 var(--space-3);
font-weight: var(--fw-semibold);
}
.matrix tbody td.own-col::before {
color: var(--color-mint);
font-weight: var(--fw-semibold);
}
.matrix tbody td.own-col.yes { font-size: 1.25rem; }
/* Separators between competitor rows */
.matrix tbody td:not(.row-head):not(.own-col) + td:not(.row-head):not(.own-col) {
border-top: 1px dashed var(--hairline);
}
/* Stronger color cues for the icon glyphs */
.matrix tbody td.yes { color: var(--color-mint); }
.matrix tbody td.no { color: var(--color-alert); }
.matrix tbody td.partial { color: #F2B544; }
}
.matrix .row-head { text-align: left; color: var(--text-primary); font-weight: var(--fw-semibold); }
.matrix .own-col {
background: rgba(62, 207, 160, 0.07);
color: var(--accent);
font-weight: var(--fw-bold);
position: relative;
}
.matrix thead .own-col { border-bottom: 2px solid var(--accent); }
.matrix .yes { color: var(--accent); }
.matrix .no { color: var(--color-alert); }
.matrix .partial { color: #F2B544; }
/* Closing callout under the matrix — full-width, reads as the section's conclusion */
.synergy-callout {
margin-top: var(--space-8);
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-5);
align-items: start;
padding: var(--space-6) var(--space-7);
background:
linear-gradient(180deg, rgba(62, 207, 160, 0.06), rgba(62, 207, 160, 0.02));
border: 1px solid var(--border);
border-top: 1px solid transparent;
border-radius: var(--r-card);
position: relative;
isolation: isolate;
}
.synergy-callout::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: var(--gradient-mint-line);
opacity: 0.7;
}
.synergy-callout__icon {
width: 44px;
height: 44px;
display: grid;
place-items: center;
border-radius: 50%;
background: rgba(62, 207, 160, 0.10);
border: 1px solid rgba(62, 207, 160, 0.30);
color: var(--color-mint);
flex-shrink: 0;
}
.synergy-callout__icon svg { width: 20px; height: 20px; }
.synergy-callout__body h3 {
color: var(--text-primary);
margin: 0 0 var(--space-2);
font-size: 1.0625rem;
font-weight: var(--fw-semibold);
}
.synergy-callout__body p {
color: var(--text-muted);
margin: 0;
max-width: 80ch;
font-size: var(--fs-body);
line-height: var(--lh-body);
}
.synergy-callout__body strong { color: var(--color-mint); font-weight: var(--fw-semibold); }
/* ============================================================
TEAM
============================================================ */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .team-grid { grid-template-columns: 1fr; } }
.member {
padding: var(--space-5);
background: var(--bg-card);
border: 1px solid var(--hairline);
border-radius: var(--r-card);
display: flex;
flex-direction: column;
gap: var(--space-3);
transition: border-color var(--t-fast) var(--ease),
transform var(--t-fast) var(--ease);
position: relative;
overflow: hidden;
}
.member:hover { border-color: var(--border); transform: translateY(-2px); }
.member__avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(62, 207, 160, 0.12);
border: 1px solid rgba(59, 179, 184, 0.40); /* subtle teal ring around mint fill */
color: var(--accent);
display: grid;
place-items: center;
font-weight: var(--fw-bold);
font-size: 0.95rem;
letter-spacing: 0.04em;
}
.member__name { font-weight: var(--fw-semibold); }
.member__role { color: var(--accent); font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; }
.member__desc { color: var(--text-muted); font-size: var(--fs-caption); line-height: 1.5; }
.credentials {
margin-top: var(--space-7);
display: flex;
justify-content: space-around;
gap: var(--space-5);
flex-wrap: wrap;
padding: var(--space-5) var(--space-6);
background: var(--bg-card);
border: 1px solid var(--hairline);
border-radius: var(--r-card);
}
.credentials span { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-muted); }
.credentials strong { color: var(--text-primary); }
.credentials svg { color: var(--accent); width: 18px; height: 18px; }
.credentials__tuv-img { width: 32px; height: 32px; display: block; }
/* ============================================================
Hero trust badge — TÜV SÜD certification, inline with the CTAs
============================================================ */
.hero__trust {
display: inline-flex;
align-items: center;
gap: 22px;
padding: 14px 26px 14px 16px;
background: rgba(13, 17, 23, 0.55);
border: 1px solid rgba(62, 207, 160, 0.22);
border-radius: 999px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
width: max-content;
max-width: 100%;
}
.hero__trust-img {
width: 78px; /* bumped 60 → 78px */
height: 78px;
display: block;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}
.hero__trust-text {
display: inline-flex;
flex-direction: column;
gap: 14px;
line-height: 1.0;
}
.hero__trust-label {
font-family: var(--font-mono);
font-size: 0.92rem; /* bumped 0.78 → 0.92rem */
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-muted);
}
.hero__trust strong {
font-size: 1.4rem; /* bumped 1.15 → 1.4rem */
font-weight: 700;
letter-spacing: -0.005em;
color: var(--text-primary);
}
/* ============================================================
PARTNERSHIP / Contact
============================================================ */
.partner-grid { margin-top: var(--space-7); }
.partner-card {
padding: var(--space-7);
background: var(--bg-card);
border: 1px solid var(--hairline);
border-radius: var(--r-card);
text-align: center;
transition: transform var(--t-base) var(--ease),
border-color var(--t-base) var(--ease);
position: relative;
overflow: hidden;
}
.partner-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: var(--gradient-mint-line);
transform: scaleX(0);
transition: transform 600ms var(--ease);
}
.partner-card:hover::before { transform: scaleX(1); }
.partner-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.partner-card svg { width: 32px; height: 32px; color: var(--accent); margin-bottom: var(--space-4); }
.partner-card h3 { margin-bottom: var(--space-3); }
.partner-card p { color: var(--text-muted); margin-bottom: var(--space-5); }
.partner-card a { color: var(--accent); font-weight: var(--fw-semibold); }
.partner-card a:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact-strip {
margin-top: var(--space-9);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
padding: var(--space-6) var(--space-7);
background: var(--bg-card-elevated);
border-radius: var(--r-card);
border: 1px solid var(--border);
position: relative;
isolation: isolate;
}
/* A subtle 1px gradient hairline along the top edge — pure decoration */
.contact-strip::before {
content: '';
position: absolute;
top: -1px; left: 0; right: 0;
height: 1px;
background: var(--gradient-mint-line);
pointer-events: none;
}
@media (max-width: 800px) { .contact-strip { grid-template-columns: 1fr; } }
.contact-item__label { color: var(--text-muted); font-size: var(--fs-caption); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--space-1); }
.contact-item__value { font-size: var(--fs-body-lg); font-weight: var(--fw-semibold); }
.contact-item__value a:hover { color: var(--accent); }
.contact-item svg { color: var(--accent); width: 18px; height: 18px; }
.contact-item { display: flex; gap: var(--space-3); align-items: start; }
.contact-item svg { margin-top: 4px; }
/* ============================================================
FOOTER
============================================================ */
.site-footer {
padding-block: var(--space-7) var(--space-6);
border-top: 1px solid var(--hairline);
color: var(--text-muted);
font-size: var(--fs-caption);
}
.site-footer__inner {
display: flex;
justify-content: space-between;
gap: var(--space-6);
flex-wrap: wrap;
align-items: center;
}
.site-footer__brand { display: flex; align-items: center; gap: var(--space-3); }
.site-footer__brand img { height: 28px; }
.site-footer__legal { display: inline-flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.site-footer__legal a:hover { color: var(--accent); }
.site-footer__credit a {
color: var(--text-muted);
text-decoration: none;
transition: color var(--t-fast) var(--ease);
}
.site-footer__credit a:hover { color: var(--color-mint); }
/* Footer social icons */
.site-footer__social {
display: inline-flex;
align-items: center;
gap: var(--space-3);
}
.site-footer__social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
border: 1px solid var(--hairline);
color: var(--text-muted);
transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.site-footer__social a:hover {
color: var(--color-night);
background: var(--accent);
border-color: var(--accent);
}
.site-footer__social svg { width: 18px; height: 18px; display: block; }
/* Mobile-menu social row */
.nav__links-social { display: none; }
/* ============================================================
MOTION — reveals + count-up
============================================================ */
[data-reveal] {
opacity: 0;
transform: translateY(20px);
transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}
[data-reveal].is-visible {
opacity: 1;
transform: translateY(0);
}
/* Staggered reveal children */
[data-reveal-group] > * {
opacity: 0;
transform: translateY(20px);
transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
[data-reveal-group].is-visible > * { opacity: 1; transform: translateY(0); }
[data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 90ms; }
[data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 180ms; }
[data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 270ms; }
[data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 360ms; }
[data-reveal-group].is-visible > *:nth-child(6) { transition-delay: 450ms; }
[data-reveal-group].is-visible > *:nth-child(7) { transition-delay: 540ms; }
[data-reveal-group].is-visible > *:nth-child(8) { transition-delay: 630ms; }
[data-reveal-group].is-visible > *:nth-child(9) { transition-delay: 720ms; }
[data-reveal-group].is-visible > *:nth-child(10){ transition-delay: 810ms; }
[data-reveal-group].is-visible > *:nth-child(11){ transition-delay: 900ms; }
[data-reveal-group].is-visible > *:nth-child(12){ transition-delay: 990ms; }
@media (prefers-reduced-motion: reduce) {
[data-reveal], [data-reveal-group] > * { opacity: 1; transform: none; transition: none; }
html { scroll-behavior: auto; }
.event-banner__dot,
.hero__field path,
.device-showcase img,
.atmosphere::before,
.countdown::before,
.hud-scan,
.device-hud .ping,
.evidence-schematic .pulse-ring { animation: none !important; }
}
/* Hairline rule between sections */
.rule {
height: 1px;
background: var(--gradient-mint-line);
opacity: 0.5;
margin-block: var(--space-9);
}
/* ============================================================
IN PRACTICE — clinical + home use cards with parallax
============================================================ */
.practice-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-5);
margin-top: var(--space-8);
}
@media (max-width: 900px) {
.practice-grid { grid-template-columns: 1fr; }
/* (practice-card mobile layout is defined at the end of the file so it wins the cascade) */
}
.practice-card {
position: relative;
border-radius: var(--r-card);
overflow: hidden;
border: 1px solid var(--hairline);
background: var(--bg-card);
aspect-ratio: 4 / 3;
isolation: isolate;
transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.practice-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.practice-card__media {
position: absolute;
inset: -10% -5%;
width: 110%; height: 120%;
z-index: 0;
}
.practice-card__media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1.2s var(--ease), filter var(--t-base) var(--ease);
filter: brightness(0.85) contrast(1.02);
will-change: transform;
}
.practice-card:hover .practice-card__media img { filter: brightness(0.95); transform: scale(1.04); }
/* Scroll parallax — JS sets --py per card */
.practice-card__media img { transform: translateY(var(--py, 0px)); }
.practice-card__overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(180deg, transparent 30%, rgba(13, 17, 23, 0.85) 95%);
pointer-events: none;
}
.practice-card__body {
position: absolute;
left: 0; right: 0; bottom: 0;
z-index: 2;
padding: var(--space-6) var(--space-7);
color: var(--text-primary);
}
.practice-card__chip {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: var(--space-3);
display: inline-flex; align-items: center; gap: var(--space-2);
padding: 4px 10px;
border-radius: 4px;
background: rgba(13, 17, 23, 0.6);
border: 1px solid var(--border);
backdrop-filter: blur(8px);
}
.practice-card__chip .dot {
display: inline-block; width: 6px; height: 6px;
background: var(--accent); border-radius: 50%;
animation: pulse 2s ease-in-out infinite;
}
.practice-card__title { font-size: 1.5rem; font-weight: var(--fw-semibold); margin-bottom: var(--space-2); }
.practice-card__desc { color: rgba(255,255,255,0.75); font-size: var(--fs-body); max-width: 38ch; }
/* HUD corner accents on practice cards */
.practice-card::before,
.practice-card::after {
content: '';
position: absolute;
width: 18px; height: 18px;
border: 2px solid var(--accent);
z-index: 3;
opacity: 0.85;
pointer-events: none;
}
.practice-card::before { top: 12px; left: 12px; border-right: none; border-bottom: none; }
.practice-card::after { top: 12px; right: 12px; border-left: none; border-bottom: none; }
/* ============================================================
HOW IT WORKS — scroll-pinned timeline
============================================================ */
.howit {
position: relative;
}
@media (min-width: 1000px) {
.howit__grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: var(--space-9);
align-items: start;
}
.howit__sticky {
position: sticky;
top: 92px;
height: fit-content;
}
}
.howit__visual {
border-radius: var(--r-card);
overflow: hidden;
border: 1px solid var(--border);
background: var(--bg-card-elevated);
aspect-ratio: 4 / 3;
position: relative;
display: grid;
place-items: center;
}
.howit__visual svg { width: 80%; max-width: 380px; }
.howit__visual .field-ring {
fill: none;
stroke: var(--accent);
stroke-width: 1;
opacity: 0;
transform-origin: center;
transform-box: fill-box;
transition: opacity 600ms var(--ease);
}
.howit__visual.step-1 .field-ring--1 { opacity: 0.8; }
.howit__visual.step-2 .field-ring--1,
.howit__visual.step-2 .field-ring--2 { opacity: 0.7; }
.howit__visual.step-3 .field-ring--1,
.howit__visual.step-3 .field-ring--2,
.howit__visual.step-3 .field-ring--3 { opacity: 0.7; }
.howit__visual.step-4 .field-ring--1,
.howit__visual.step-4 .field-ring--2,
.howit__visual.step-4 .field-ring--3 { opacity: 0.4; }
.howit__visual.step-4 .healed { opacity: 1; }
.howit__visual .healed { opacity: 0; transition: opacity 800ms var(--ease); fill: var(--accent); }
.howit__visual .bacteria {
fill: var(--color-alert);
transition: opacity 600ms var(--ease);
}
.howit__visual.step-3 .bacteria,
.howit__visual.step-4 .bacteria { opacity: 0.2; }
.howit__label-tag {
position: absolute;
top: 14px;
right: 14px;
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
background: rgba(13, 17, 23, 0.7);
padding: 4px 10px;
border-radius: 4px;
border: 1px solid var(--border);
}
.howit__steps {
display: grid;
gap: var(--space-7);
}
.howit__step {
padding: var(--space-6) var(--space-6) var(--space-6) var(--space-8);
border-left: 2px solid var(--hairline);
position: relative;
transition: border-color var(--t-base) var(--ease),
background var(--t-base) var(--ease);
}
.howit__step.is-current { border-left-color: var(--accent); }
.howit__step::before {
content: attr(data-step);
position: absolute;
left: -23px;
top: var(--space-6);
width: 44px; height: 44px;
border-radius: 50%;
background: var(--bg-base);
border: 2px solid var(--hairline);
display: grid; place-items: center;
font-family: var(--font-mono);
font-weight: var(--fw-semibold);
font-size: 0.95rem;
color: var(--text-muted);
transition: border-color var(--t-base) var(--ease),
color var(--t-base) var(--ease),
transform var(--t-base) var(--ease);
}
.howit__step.is-current::before {
border-color: var(--accent);
color: var(--accent);
transform: scale(1.05);
}
.howit__step h3 {
margin-bottom: var(--space-3);
color: var(--text-primary);
transition: color var(--t-base) var(--ease);
}
.howit__step.is-current h3 {
/* Selected/active state → deeper mint for distinction */
color: var(--color-mint-deep);
}
.howit__step p { color: var(--text-muted); }
.howit__step .mono { color: var(--accent); font-size: 0.75rem; letter-spacing: 0.08em; }
@media (max-width: 999px) {
.howit__sticky { margin-bottom: var(--space-7); }
}
/* ============================================================
MECHANISM — before / after SEM disruption (from slide 4)
============================================================ */
.mech {
margin-top: var(--space-8);
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--space-5);
}
.mech__panel {
margin: 0;
position: relative;
background: var(--bg-card);
border: 1px solid var(--hairline);
border-radius: var(--r-card);
padding: var(--space-3);
overflow: hidden;
}
.mech__panel--after {
border-color: rgba(62, 207, 160, 0.35);
box-shadow: 0 0 0 1px rgba(62, 207, 160, 0.10), 0 18px 50px -28px rgba(62, 207, 160, 0.45);
}
.mech__img {
position: relative;
border-radius: calc(var(--r-card) - 6px);
overflow: hidden;
aspect-ratio: 367 / 332;
}
.mech__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: grayscale(0.15) contrast(1.05);
}
.mech__panel--after .mech__img img { filter: grayscale(0.05) contrast(1.08) saturate(1.05); }
.mech__tag {
position: absolute;
top: var(--space-4);
left: var(--space-4);
z-index: 2;
font-family: var(--font-mono);
font-size: var(--fs-caption);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
background: rgba(13, 17, 23, 0.78);
border: 1px solid var(--border);
padding: 5px 12px;
border-radius: 999px;
backdrop-filter: blur(6px);
}
.mech__tag--after { color: var(--color-night); background: var(--accent); border-color: var(--accent); font-weight: var(--fw-semibold); }
.mech__panel figcaption {
padding: var(--space-3) var(--space-2) var(--space-1);
text-align: center;
font-size: var(--fs-caption);
color: var(--text-muted);
}
.mech__panel--after figcaption { color: var(--accent); }
/* Animated disruption markers on the "after" panel */
.mech__marker {
position: absolute;
width: 26px;
height: 26px;
transform: translate(-50%, -50%);
border: 1.5px dashed var(--color-alert, #ff5a5a);
border-radius: 50%;
opacity: 0;
animation: mechMarker 3.2s var(--ease) infinite;
}
.mech__marker:nth-child(3) { animation-delay: 0.5s; }
.mech__marker:nth-child(4) { animation-delay: 1.1s; }
@keyframes mechMarker {
0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
25%, 70% { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
}
/* Center magnetic-field arrow */
.mech__arrow {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
color: var(--accent);
min-width: 132px;
}
.mech__arrow-label {
font-family: var(--font-mono);
font-size: var(--fs-caption);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-teal);
text-align: center;
}
.mech__arrow-track {
position: relative;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(62, 207, 160, 0.35), transparent);
border-radius: 2px;
overflow: hidden;
}
.mech__arrow-pulse {
position: absolute;
top: 0; left: -40%;
width: 40%; height: 100%;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
animation: mechPulse 1.8s linear infinite;
}
@keyframes mechPulse { 0% { left: -45%; } 100% { left: 105%; } }
.mech__arrow-head { width: 26px; height: 26px; }
.mech__caption {
margin-top: var(--space-5);
text-align: center;
font-size: var(--fs-caption);
color: var(--text-muted);
letter-spacing: 0.04em;
}
.mech__caption-k {
color: var(--color-teal);
border: 1px solid rgba(59, 179, 184, 0.4);
border-radius: 4px;
padding: 2px 7px;
margin-right: var(--space-2);
}
.mech__steps {
margin-top: var(--space-8);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
}
.mech__step {
display: flex;
gap: var(--space-3);
align-items: flex-start;
padding-top: var(--space-4);
border-top: 1px solid var(--hairline);
}
.mech__step .mono { color: var(--color-teal); font-size: 0.85rem; flex-shrink: 0; }
.mech__step p { margin: 0; color: var(--text-muted); font-size: var(--fs-body); }
.mech__step strong { color: var(--text-primary); }
@media (max-width: 820px) {
.mech { grid-template-columns: 1fr; gap: var(--space-4); }
.mech__arrow { flex-direction: row; min-width: 0; width: 100%; justify-content: center; gap: var(--space-3); }
.mech__arrow-track { width: 40%; }
.mech__arrow-head { transform: rotate(90deg); }
.mech__steps { grid-template-columns: 1fr; gap: var(--space-4); }
}
/* ============================================================
Scroll-clipped image reveal (intro panel)
============================================================ */
.clip-reveal {
clip-path: inset(0 100% 0 0);
transition: clip-path 1200ms var(--ease);
}
.clip-reveal.is-visible { clip-path: inset(0 0 0 0); }
/* Image hover-zoom utility */
.zoom-on-hover { overflow: hidden; }
.zoom-on-hover img { transition: transform 900ms var(--ease); }
.zoom-on-hover:hover img { transform: scale(1.05); }
/* ============================================================
FULL-WIDTH banner image (under hero / before problem)
============================================================ */
.banner-image {
position: relative;
overflow: hidden;
border-block: 1px solid var(--hairline);
margin-block: var(--space-9);
}
.banner-image__wrap {
height: 60vh;
min-height: 420px;
max-height: 640px;
position: relative;
}
.banner-image img {
width: 100%; height: 100%;
object-fit: cover;
will-change: transform;
}
.banner-image__overlay {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 80%, rgba(13, 17, 23, 0.85), transparent 50%),
linear-gradient(180deg, transparent 40%, rgba(13, 17, 23, 0.9));
pointer-events: none;
}
.banner-image__caption {
position: absolute;
bottom: var(--space-7);
left: 0; right: 0;
z-index: 2;
}
.banner-image__caption h2 {
color: var(--text-primary);
max-width: 760px;
margin-bottom: var(--space-4);
}
.banner-image__caption .mono {
color: var(--accent);
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: var(--space-3);
display: inline-block;
}
.banner-image__caption p {
color: rgba(255,255,255,0.85);
max-width: 580px;
}
/* Animated section header underline */
.section h2 { position: relative; padding-bottom: 0; }
/* ============================================================
SHOWCASE — scroll-bound product spin
The section is tall (250vh); inside, a sticky stage pins the
video to the viewport and JS scrubs video.currentTime based on
scroll progress through the section.
============================================================ */
.showcase {
position: relative;
padding-block: 0;
/* Total scroll room — drives spin speed (220vh feels smoother than 280vh) */
}
.showcase__track {
/* Normal flow — the viewer is click-driven, no scroll-pin */
position: relative;
}
.showcase__stage {
position: relative;
min-height: 86vh;
display: grid;
place-items: center;
overflow: hidden;
padding-block: var(--space-9);
}
.showcase__bg {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 50% 50%, rgba(62, 207, 160, 0.10), transparent 55%),
var(--color-night);
pointer-events: none;
}
.showcase__media {
position: relative;
width: min(78vw, 1280px);
aspect-ratio: 16 / 9;
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--border);
isolation: isolate;
background:
radial-gradient(ellipse at 50% 35%, rgba(62, 207, 160, 0.10), transparent 55%),
var(--bg-card-elevated);
box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
/* Force own compositing layer so the HUD overlays don't repaint the video each scroll */
transform: translateZ(0);
contain: layout paint;
}
.showcase__video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
/* Hint to the compositor */
transform: translateZ(0);
}
/* HUD frame on showcase */
.showcase__media::before,
.showcase__media::after,
.showcase__media .hud-tr,
.showcase__media .hud-bl {
content: '';
position: absolute;
width: 26px; height: 26px;
border: 2px solid var(--accent);
pointer-events: none;
z-index: 3;
}
.showcase__media::before { top: 14px; left: 14px; border-right: none; border-bottom: none; }
.showcase__media::after { bottom: 14px; right: 14px; border-left: none; border-top: none; }
.showcase__media .hud-tr { top: 14px; right: 14px; border-left: none; border-bottom: none; }
.showcase__media .hud-bl { bottom: 14px; left: 14px; border-right: none; border-top: none; }
/* Scroll progress indicator at top of stage */
.showcase__progress {
position: absolute;
top: 86px;
left: 50%;
transform: translateX(-50%);
width: min(78vw, 1280px);
height: 2px;
background: var(--hairline);
border-radius: 1px;
z-index: 5;
}
.showcase__progress::after {
content: '';
position: absolute;
inset: 0;
width: var(--p, 0%);
background: linear-gradient(90deg, var(--color-mint-cool), var(--color-mint), var(--color-mint-warm));
border-radius: 1px;
transition: width 80ms linear;
}
/* Telemetry tags that orbit with the spin — pinned at corners */
.showcase__tag {
position: absolute;
z-index: 4;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.08em;
color: var(--color-teal); /* secondary accent for instrument readouts */
background: rgba(13, 17, 23, 0.6);
padding: 6px 10px;
border-radius: 4px;
border: 1px solid rgba(59, 179, 184, 0.25);
backdrop-filter: blur(8px);
}
.showcase__tag.tl { top: 30px; left: 30px; }
.showcase__tag.br { bottom: 30px; right: 30px; }
.showcase__tag .k { color: var(--text-muted); }
/* Floating text labels that fade in/out based on progress */
.showcase__captions {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(78vw, 1280px);
aspect-ratio: 16/9;
pointer-events: none;
z-index: 4;
}
.showcase__caption {
position: absolute;
background: rgba(13, 17, 23, 0.82);
border: 1px solid var(--border);
border-radius: 8px;
padding: var(--space-3) var(--space-4);
max-width: 240px;
font-size: var(--fs-caption);
color: var(--text-primary);
/* Persistent technical annotations framing the rotating device.
Always visible — they describe the device as a whole, so they never
contradict the current rotation frame. */
opacity: 1;
transform: translateY(0);
transition: opacity 350ms var(--ease);
backdrop-filter: blur(8px);
}
.showcase__caption .mono { color: var(--color-teal); display: block; margin-bottom: 4px; }
.showcase__caption.c1 { top: 18%; left: 4%; }
.showcase__caption.c2 { top: 18%; right: 4%; }
.showcase__caption.c3 { bottom: 18%; left: 4%; }
.showcase__caption.c4 { bottom: 18%; right: 4%; }
.showcase__intro {
position: relative;
z-index: 6;
padding-top: var(--space-9);
text-align: center;
pointer-events: none;
}
.showcase__intro .eyebrow { justify-content: center; }
.showcase__intro h2 { margin-bottom: var(--space-4); }
.showcase__intro p { max-width: 560px; margin-inline: auto; color: var(--text-muted); }
/* ---- Clickable view controls (rotate without precise scrolling) ---- */
.showcase__views {
position: absolute;
left: 50%;
bottom: clamp(24px, 6vh, 64px);
transform: translateX(-50%);
z-index: 7;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
pointer-events: auto;
}
.showcase__views-hint {
font-family: var(--font-mono);
font-size: var(--fs-caption);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
}
.showcase__views-btns {
display: flex;
gap: var(--space-2);
padding: 6px;
background: rgba(13, 17, 23, 0.7);
border: 1px solid var(--border);
border-radius: 999px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.showcase__view {
appearance: none;
border: 1px solid transparent;
background: transparent;
color: var(--text-muted);
font-family: var(--font-mono);
font-size: var(--fs-caption);
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 8px 16px;
border-radius: 999px;
cursor: pointer;
transition: color 200ms var(--ease), background 200ms var(--ease), border-color 200ms var(--ease);
}
.showcase__view:hover { color: var(--text-primary); border-color: var(--border); }
.showcase__view.is-active {
color: var(--color-night);
background: var(--accent);
border-color: var(--accent);
font-weight: var(--fw-semibold);
}
.showcase__view:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 800px) {
.showcase__stage { min-height: 0; padding-block: var(--space-7); }
.showcase__media { width: 92vw; }
.showcase__captions { display: none; }
.showcase__tag.br { display: none; }
.showcase__view { padding: 7px 12px; }
}
/* ---- Client feedback additions ---- */
/* Source asterisk on Problem stats */
.stat__src {
font-size: 0.42em;
vertical-align: super;
color: var(--text-muted);
margin-left: 2px;
font-weight: 600;
}
.stat-footnote {
margin-top: var(--space-4);
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.04em;
color: var(--text-muted);
opacity: 0.85;
}
/* "3D rendering" disclaimer — sits below the whole Device 360 viewer (not over the controls) */
.showcase__note {
position: relative;
z-index: 1;
/* Pulled up close to the view controls; the divider below sits well lower */
margin: calc(-1 * var(--space-6)) auto calc(var(--space-10) + var(--space-8));
max-width: 90%;
text-align: center;
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.04em;
color: var(--text-muted);
opacity: 0.7;
}
/* Remove the divider line above the Device 360 section */
#showcase.section { border-top: none; }
/* ====================================================================
Device 360 — mobile layout fix
On phones the view controls must NOT overlay the image; stack them
below it (image -> Tap to rotate + buttons -> 3D-rendering note).
This block is intentionally last so it wins the source-order cascade
over the desktop .showcase__note negative margin.
==================================================================== */
@media (max-width: 800px) {
.showcase__views {
position: static;
transform: none;
left: auto;
bottom: auto;
margin-top: var(--space-5);
width: 100%;
}
.showcase__views-btns { max-width: 100%; flex-wrap: wrap; justify-content: center; }
.showcase__note {
margin: var(--space-5) auto var(--space-8);
}
}
/* ====================================================================
Evidence — "validated" milestone seal (lab-style)
==================================================================== */
.evidence-final {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.evidence-final .eyebrow { margin-bottom: var(--space-2); }
.evidence-final h2 { margin: 0; }
.evidence-seal {
position: relative;
width: 104px;
height: 104px;
color: var(--accent);
margin-bottom: var(--space-5);
}
.evidence-seal__glow {
position: absolute;
inset: -28%;
border-radius: 50%;
background: radial-gradient(circle, rgba(62, 207, 160, 0.30), transparent 62%);
opacity: 0;
transition: opacity 0.9s ease 0.15s;
z-index: 0;
}
.evidence-seal.is-visible .evidence-seal__glow { opacity: 1; }
.evidence-seal__svg { position: relative; z-index: 1; width: 100%; height: 100%; display: block; }
.evidence-seal__disc { fill: rgba(62, 207, 160, 0.08); }
.evidence-seal__edge { opacity: 0.55; }
.evidence-seal__ring {
opacity: 0.45;
transform-origin: 60px 60px;
animation: evSealSpin 30s linear infinite;
}
@keyframes evSealSpin { to { transform: rotate(360deg); } }
.evidence-seal__check {
stroke-dasharray: 70;
stroke-dashoffset: 70;
}
.evidence-seal.is-visible .evidence-seal__check {
animation: evSealCheck 0.7s cubic-bezier(0.65, 0, 0.35, 1) 0.4s forwards;
}
@keyframes evSealCheck { to { stroke-dashoffset: 0; } }
.evidence-status {
margin-top: var(--space-4);
font-family: var(--font-mono);
font-size: var(--fs-caption);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
line-height: 1.6;
}
.evidence-status__dot {
display: inline-block;
width: 7px;
height: 7px;
margin-right: var(--space-2);
vertical-align: middle;
position: relative;
top: -1px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 0 rgba(62, 207, 160, 0.5);
animation: evStatusPulse 2.6s ease-out infinite;
}
@keyframes evStatusPulse {
0% { box-shadow: 0 0 0 0 rgba(62, 207, 160, 0.45); }
70%, 100% { box-shadow: 0 0 0 9px rgba(62, 207, 160, 0); }
}
@media (prefers-reduced-motion: reduce) {
.evidence-seal__ring, .evidence-status__dot { animation: none; }
.evidence-seal__check { stroke-dashoffset: 0; }
}
/* ====================================================================
In-practice cards — mobile layout
Placed at the very end so it wins over the base .practice-card rules.
Stacks a fixed image banner + a text panel (overlay text was clipping).
==================================================================== */
@media (max-width: 900px) {
.practice-card { aspect-ratio: auto; display: flex; flex-direction: column; }
.practice-card__media {
position: relative;
inset: auto;
width: 100%;
height: 210px;
flex: none;
}
.practice-card__media img { transform: none; }
.practice-card__overlay { display: none; }
.practice-card__body {
position: static;
padding: var(--space-5) var(--space-6) var(--space-6);
}
.practice-card__title { color: #ffffff; text-shadow: none; }
.practice-card__desc { color: rgba(255, 255, 255, 0.78); text-shadow: none; max-width: none; }
}
/* ====================================================================
Cookie consent banner (GDPR)
==================================================================== */
.cookie-consent {
position: fixed;
left: 50%;
bottom: clamp(12px, 3vw, 24px);
transform: translateX(-50%);
z-index: 9999;
width: min(700px, calc(100vw - 24px));
background: rgba(13, 17, 23, 0.97);
border: 1px solid var(--hairline);
border-radius: var(--r-card, 16px);
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
padding: var(--space-5);
}
.cookie-consent[hidden] { display: none; }
.cookie-consent__inner {
display: flex;
align-items: center;
gap: var(--space-5);
flex-wrap: wrap;
}
.cookie-consent__text { flex: 1 1 300px; }
.cookie-consent__text strong {
display: block;
color: var(--text-primary);
font-size: 0.95rem;
margin-bottom: 4px;
}
.cookie-consent__text p {
margin: 0;
color: var(--text-muted);
font-size: 0.84rem;
line-height: 1.55;
}
.cookie-consent__text a { color: var(--accent); text-decoration: underline; }
.cookie-consent__actions { display: flex; gap: var(--space-3); flex: 0 0 auto; }
.cookie-btn {
font: inherit;
font-size: 0.85rem;
font-weight: 600;
padding: 10px 20px;
border-radius: 999px;
border: 1px solid transparent;
cursor: pointer;
white-space: nowrap;
transition: filter var(--t-base, 0.2s) ease, border-color var(--t-base, 0.2s) ease;
}
.cookie-btn--solid { background: var(--accent); color: #04130d; border-color: var(--accent); }
.cookie-btn--solid:hover { filter: brightness(1.06); }
.cookie-btn--ghost { background: transparent; color: var(--text-primary); border-color: var(--hairline); }
.cookie-btn--ghost:hover { border-color: var(--text-muted); }
.cookie-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 560px) {
.cookie-consent__actions { flex: 1 1 100%; }
.cookie-btn { flex: 1; }
}