/* ============================================================
hype Software — 2026 site design language
Aligned to the official brand guidelines v1.0 (by plaxyanna):
· colors — Violet #6749EF · Black #100F11 · Neon #C0E83D · White,
plus the Violet 80–20 and Black 80–20 tint scales
· type — Garet for headlines & labels (marketing face),
Raleway for body copy (the guidelines' website font)
· logo — official SVG variants (Light on dark surfaces,
Dark on light surfaces, White on violet) — never filtered
============================================================ */
/* Garet — brand display face, self-hosted from the licensed brand kit
(Type Forward EULA in the kit; full Latin + Cyrillic coverage) */
@font-face {
font-family: 'Garet';
src: url('../assets/fonts/Garet-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Garet';
src: url('../assets/fonts/Garet-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* Raleway (body) is loaded via in each page head (preconnect + non-blocking) */
/* ============================================================
THEME TOKENS · one canonical mixed composition
The site is fixed to the light canvas with deliberate .theme-dark
brand zones. Both token sets remain because the dark zones reuse
the same components; there is no visitor-selectable full-dark skin.
============================================================ */
:root {
/* --- brand + truly invariant tokens (identical in both themes) --- */
--violet: #6749EF; /* brand Violet */
--violet-deep: #4630B8;
--violet-ghost: rgba(103, 73, 239, 0.14);
--violet-media: #856DF2; /* brand Violet 80 — accents sitting ON dark media */
--neon-green: #C0E83D; /* brand Neon — hero rotor word over the dark video */
--ok: var(--electric-green); /* re-declared per theme below: neon on dark, violet on light */
--on-accent: #ffffff; /* text / icons on a violet or green fill */
--radius: 16px;
--radius-lg: 24px;
--font-display: 'Garet', 'Raleway', sans-serif;
--font-body: 'Raleway', sans-serif;
--font-label: 'Garet', 'Raleway', sans-serif; /* small caps-style labels — the brand has no mono face */
--shadow-cta: 0 2px 0 var(--violet-deep), 0 12px 32px rgba(103, 73, 239, 0.35);
--glow: 0 0 0 1px rgba(103, 73, 239, 0.25), 0 24px 80px -16px rgba(103, 73, 239, 0.4);
--motion-fast: 160ms;
--motion-base: 240ms;
--motion-reveal: 560ms;
--ease-standard: cubic-bezier(0.2, 0.8, 0.25, 1);
--ease-expressive: cubic-bezier(0.16, 1, 0.3, 1);
--nav-top: max(18px, env(safe-area-inset-top, 0px));
--mobile-hero-clearance: calc(var(--nav-top) + 88px);
--page-hero-top: clamp(136px, 16vh, 184px);
--page-hero-bottom: clamp(52px, 6vw, 80px);
/* damped-spring profile for pop-in choreography (see @supports linear() block) */
--ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);
}
/* -------------------- DARK (brand zones) --------------------
The .theme-dark selector powers the dark ZONE pattern: a section
carrying that class re-enters the dark skin even while the page is
light (the "dark product band on a light page" idiom — the flow
scroll-story's stage lighting only reads on black). Every token is
re-declared on the zone element, so all descendants pick up dark
values with zero per-component overrides. */
:root,
[data-theme="light"] .theme-dark {
color-scheme: dark;
--surface-page: #100F11; /* brand Black */
--surface-section: #17161A;
--surface-card: #17161A;
--surface-card-on-section: #1E1D22;
--surface-field: #1E1D22;
--surface-brand-tint: #26252B;
--bg-0: var(--surface-page); /* legacy aliases; components use roles below */
--bg-1: var(--surface-section);
--bg-2: var(--surface-card-on-section);
--bg-3: #26252B;
--line: rgba(255, 255, 255, 0.08);
--line-strong: rgba(255, 255, 255, 0.16);
--fg-1: #EEEEF9; /* brand Black 20 as text-on-dark */
--fg-2: #B2B2BE; /* brand Black 40 — 9.1:1 on --bg-0 */
--fg-3: #8A8A97; /* 5.6:1 on --bg-0 — AA for small text */
--violet-hot: #856DF2; /* brand Violet 80 — pops on dark, hover lightens */
--electric-green: #C0E83D; /* brand Neon — label accent */
--ok: var(--electric-green); /* checks glow neon on the dark zones */
/* frosted-glass surfaces (nav pill, ghost buttons, floating controls) */
--glass-sheen-1: rgba(255, 255, 255, 0.12);
--glass-sheen-2: rgba(255, 255, 255, 0.02);
--glass-brd: rgba(255, 255, 255, 0.16);
--glass-brd-strong: rgba(255, 255, 255, 0.22);
--glass-inset-hi: rgba(255, 255, 255, 0.20);
--glass-inset-lo: rgba(255, 255, 255, 0.05);
--surface-soft: rgba(255, 255, 255, 0.05);
--surface-hover: rgba(255, 255, 255, 0.10);
--nav-fill: rgba(23, 22, 26, 0.42);
--nav-menu-fill: #151419;
--btn-ghost-fill: rgba(255, 255, 255, 0.02);
--shadow-card: 0 24px 60px rgba(0, 0, 0, 0.45);
--shadow-nav: 0 16px 48px rgba(0, 0, 0, 0.45);
--card-shadow: none; /* dark cards read on borders alone — no elevation */
--card-shadow-hover: none;
/* product-flow stage lighting */
--flow-stage-bg: radial-gradient(120% 85% at 50% 38%, #1A1824 0%, #12111A 45%, #100F11 100%);
--flow-stage-solid: #12111A;
--flow-bloom: rgba(103, 73, 239, 0.20);
--flow-bloom-2: rgba(70, 48, 184, 0.14);
--flow-grid-dot: rgba(255, 255, 255, 0.055);
--flow-line-ink: rgba(133, 109, 242, 0.55);
--flow-pool: rgba(103, 73, 239, 0.38);
--flow-contact: rgba(0, 0, 0, 0.55);
}
/* -------------------- LIGHT -------------------- */
[data-theme="light"] {
color-scheme: light;
/* A near-white canvas keeps the mixed composition crisp. The original
#EEEEF9 remains a deliberate brand wash instead of tinting every page. */
--surface-page: #F6F6FA;
--surface-section: #FFFFFF;
--surface-card: #FFFFFF;
--surface-card-on-section: #F1F0F5;
--surface-field: #F1F0F5;
--surface-brand-tint: #EEEEF9;
--bg-0: var(--surface-page); /* legacy aliases */
--bg-1: var(--surface-section);
--bg-2: var(--surface-card-on-section);
--bg-3: #E7E5ED;
--line: rgba(16, 15, 17, 0.09);
--line-strong: rgba(16, 15, 17, 0.15);
--fg-1: #100F11; /* brand Black */
--fg-2: #424248; /* brand Black 80 */
--fg-3: #63636D; /* 5.2:1 on --bg-0 — AA small text */
--violet-hot: #5A32E0; /* deeper than base — readable on white, hover darkens */
--electric-green: #57700A; /* brand Neon darkened to hold AA on light surfaces */
--ok: var(--violet-hot); /* the darkened neon reads muddy on white — checks go brand violet */
--glass-sheen-1: rgba(255, 255, 255, 0.85);
--glass-sheen-2: rgba(255, 255, 255, 0.25);
--glass-brd: rgba(16, 15, 17, 0.10);
--glass-brd-strong: rgba(16, 15, 17, 0.16);
--glass-inset-hi: rgba(255, 255, 255, 0.90);
--glass-inset-lo: rgba(16, 15, 17, 0.04);
--surface-soft: rgba(16, 15, 17, 0.04);
--surface-hover: rgba(16, 15, 17, 0.06);
--nav-fill: rgba(255, 255, 255, 0.66);
--nav-menu-fill: rgba(255, 255, 255, 0.92);
--btn-ghost-fill: rgba(255, 255, 255, 0.70);
/* neutral, layered shadows — depth without any colour cast */
--shadow-card: 0 2px 6px rgba(16, 15, 17, 0.06), 0 26px 60px -16px rgba(16, 15, 17, 0.18);
--shadow-nav: 0 2px 8px rgba(16, 15, 17, 0.05), 0 16px 40px -10px rgba(16, 15, 17, 0.16);
--card-shadow: 0 1px 2px rgba(16, 15, 17, 0.05), 0 10px 26px -10px rgba(16, 15, 17, 0.12);
--card-shadow-hover: 0 4px 10px rgba(16, 15, 17, 0.07), 0 22px 46px -14px rgba(16, 15, 17, 0.20);
/* no --flow-* tokens here: the flow section is a .theme-dark zone,
so its stage lighting always resolves from the dark block above */
}
/* violet-deep / violet-ghost derive from --violet so a single brand
swatch recolours both — works in either theme (kept out of the
theme blocks on purpose; --violet-hot is per-theme above) */
@supports (color: color-mix(in oklab, red, white)) {
:root {
--violet-deep: color-mix(in oklab, var(--violet) 70%, black);
--violet-ghost: color-mix(in srgb, var(--violet) 14%, transparent);
}
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
/* keyboard focus ring, brand-colored; anchored sections clear the floating nav */
:focus-visible { outline: 3px solid var(--violet-hot); outline-offset: 3px; }
[id] { scroll-margin-top: 110px; }
.skip-link {
position: fixed;
top: -56px;
left: 16px;
z-index: 300;
background: var(--violet);
color: #fff;
font-weight: 700;
font-size: 15px;
padding: 11px 20px;
border-radius: 999px;
transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; }
body {
margin: 0;
background: var(--surface-page);
color: var(--fg-1);
font-family: var(--font-body);
font-size: 17px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--violet); color: #fff; }
/* ---------- type ---------- */
.h-display {
font-family: var(--font-display);
font-weight: 700;
line-height: 1.06;
letter-spacing: -0.01em;
margin: 0;
text-wrap: balance;
}
.h-xl { font-size: clamp(34px, 5.4vw, 72px); }
.h-lg { font-size: clamp(28px, 3.6vw, 48px); }
.h-md { font-size: clamp(21px, 2.4vw, 30px); }
.h-sm { font-family: var(--font-display); font-weight: 700; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.25; margin: 0; }
.page-title { font-size: clamp(32px, 4.1vw, 58px); max-width: 18ch; }
.accent { color: var(--violet-hot); }
.section-title-accent { color: var(--violet-hot); }
.theme-dark .section-title-accent,
.cta-band .section-title-accent { color: var(--neon-green); }
/* the brand name is always lowercase — even inside uppercase-transformed
labels (flow tags, partner lines). Nested text-transform wins. */
.lc { text-transform: lowercase; }
.lead { margin: 0; font-size: clamp(17px, 1.5vw, 20px); color: var(--fg-2); text-wrap: pretty; }
.section-head > .lead { margin-top: 16px; }
.muted { color: var(--fg-2); }
.mono { font-family: var(--font-label); }
/* ---------- layout ---------- */
.container { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.section { padding: clamp(72px, 9vw, 130px) 0; position: relative; }
.section-alt { background: var(--surface-section); }
/* two banded sections in a row share one surface — collapse the doubled gap
so the page keeps a steady vertical beat instead of a dead white void */
.section-alt + .section-alt { padding-top: 0; }
.after-hero--overlap { padding-top: 0; }
.after-hero--overlap > .container {
position: relative;
z-index: 4;
transform: translateY(-32px);
margin-bottom: -32px;
}
.after-hero--spaced { padding-top: clamp(64px, 7vw, 104px); }
.section-cta {
padding: clamp(64px, 7vw, 96px) 0;
background: var(--surface-section);
border-top: 1px solid var(--line);
}
@media (max-width: 720px) {
.after-hero--overlap > .container {
transform: translateY(-20px);
margin-bottom: -20px;
}
}
/* dark-locked zone: paints its own backdrop (the body stays light-themed);
tokens flip via the [data-theme="light"] .theme-dark selector up top */
.theme-dark { position: relative; background: var(--surface-page); color: var(--fg-1); }
/* seam craft — light theme only, so the dark theme stays one continuous
surface: each zone edge gets a violet horizon hairline (echoes the flow
beam / brand accent) and the dark slab grounds itself with a soft shadow
cast onto the light page. Reads as a designed stage, not a raw cut. */
[data-theme="light"] .theme-dark {
box-shadow:
0 -32px 56px -48px rgba(16, 15, 17, 0.55),
0 32px 56px -48px rgba(16, 15, 17, 0.55);
}
[data-theme="light"] .theme-dark::before,
[data-theme="light"] .theme-dark::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 1px;
z-index: 2;
pointer-events: none;
background: linear-gradient(90deg, transparent 4%, rgba(133, 109, 242, 0.5) 50%, transparent 96%);
box-shadow: 0 0 18px rgba(103, 73, 239, 0.4);
}
[data-theme="light"] .theme-dark::before { top: 0; }
[data-theme="light"] .theme-dark::after { bottom: 0; }
/* the footer zone ends the page — no bottom horizon there */
[data-theme="light"] .footer.theme-dark::after { content: none; }
/* touching dark surfaces merge into one: no horizon between two adjacent
zones, nor where a zone continues straight out of the dark hero video */
[data-theme="light"] .theme-dark + .theme-dark::before,
[data-theme="light"] .hero-cinema + .theme-dark::before { content: none; }
[data-theme="light"] .theme-dark:has(+ .theme-dark)::after { content: none; }
/* hero zones open their page under the fixed nav — no top horizon there */
[data-theme="light"] .page-hero.theme-dark::before,
[data-theme="light"] .tv-hero.theme-dark::before,
[data-theme="light"] .hero-cinema.theme-dark::before { content: none; }
.section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 64px); }
.grid { display: grid; gap: 24px; }
.grid > * { min-width: 0; }
.grid-2-1 { grid-template-columns: 1.25fr 1fr; align-items: stretch; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-split { grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) {
.grid-2-1, .grid-3, .grid-split { grid-template-columns: 1fr; }
}
/* ---------- glass dimming (nav pill, mobile menu, to-top) ----------
White ink on clear glass dies over white sections. Rather than tinting the
glass black (a slab that reads dark everywhere) or flipping the material
to dark ink over light sections (the chrome changing identity mid-scroll),
every glass surface does what Control Center does: keep the white ink and
DARKEN THE BACKDROP IT SAMPLES, always, by a fixed amount.
--glass-dim is a brightness() factor inside backdrop-filter, so it scales
the page behind the glass instead of covering it: a near-black canvas
barely moves (0.06 × 0.6 is still black), a white section lands in the
mid greys where white type reads, and everything between — bright spots in
a photo, the violet hero — dims by the same proportion, so the material
never switches states and nothing pops at a section seam. The fills below
stay thin on purpose; the dimming, not a tint, is what carries contrast.
0.6 (down from 0.72) is the floor where menu labels stay readable over a
plain white section without the dark canvas reading tinted. */
:root { --glass-dim: 0.6; }
/* without backdrop-filter there is nothing to dim — the thin fills would
leave white ink on a white page, so those engines get the opaque chrome */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.nav { --nav-fill: rgba(18, 17, 21, 0.88); }
.nav-links { --menu-fill: rgba(18, 17, 21, 0.92); }
.to-top { background: rgba(18, 17, 21, 0.9); }
}
/* ---------- nav (floating glass pill) ---------- */
.nav-wrap {
position: fixed;
top: var(--nav-top);
left: 0;
right: 0;
z-index: 100;
display: flex;
justify-content: center;
padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
pointer-events: none;
}
.nav {
/* Navigation is permanent brand chrome. Keeping it charcoal makes the
floating header intentional over both the light content canvas and the
dark product stages, instead of changing identity at every seam. */
position: relative;
color-scheme: dark;
--fg-1: #FFFFFF;
/* the glass is clear and only dims what is behind it, so the row ink is
near-white the way Control Center's labels are — a muted grey survives
the dark canvas but not a dimmed white section */
--fg-2: rgba(255, 255, 255, 0.95);
--fg-3: #9695A2;
--violet-hot: #856DF2;
--glass-sheen-1: rgba(255, 255, 255, 0.09);
--glass-sheen-2: rgba(255, 255, 255, 0.015);
--glass-brd: rgba(255, 255, 255, 0.14);
--glass-brd-strong: rgba(255, 255, 255, 0.22);
--glass-inset-hi: rgba(255, 255, 255, 0.16);
--glass-inset-lo: rgba(255, 255, 255, 0.035);
--surface-soft: rgba(255, 255, 255, 0.055);
--surface-hover: rgba(255, 255, 255, 0.1);
--nav-fill: rgba(18, 17, 21, 0.32);
--nav-menu-fill: rgba(18, 17, 21, 0.96);
--line-strong: rgba(255, 255, 255, 0.17);
--shadow-nav: 0 18px 52px -16px rgba(0, 0, 0, 0.58);
--shadow-card: 0 22px 52px -18px rgba(0, 0, 0, 0.62);
--glass-light-x: 14%;
--glass-light-y: -8%;
pointer-events: auto;
display: flex;
align-items: center;
gap: clamp(12px, 2.2vw, 30px);
padding: 7px 9px 7px 18px;
border-radius: 999px;
background:
linear-gradient(135deg, var(--glass-sheen-1), var(--glass-sheen-2) 55%, var(--glass-sheen-1)),
var(--nav-fill);
border: 1px solid var(--glass-brd);
backdrop-filter: blur(28px) saturate(1.9) brightness(var(--glass-dim));
-webkit-backdrop-filter: blur(28px) saturate(1.9) brightness(var(--glass-dim));
box-shadow:
inset 0 1px 0 var(--glass-inset-hi),
inset 0 -1px 0 var(--glass-inset-lo),
var(--shadow-nav);
transition: transform var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) ease, background-color var(--motion-base) ease;
}
.nav-wrap.is-scrolled .nav { box-shadow: inset 0 1px 0 var(--glass-inset-hi), inset 0 -1px 0 var(--glass-inset-lo), 0 18px 50px rgba(0, 0, 0, 0.34); }
/* ---------- liquid glass ----------
Two layers on top of the frosted pill:
· a specular rim — an uneven conic highlight ring drawn exactly over the
1px border, so light appears to catch the edge of the glass instead of
a flat hairline (all engines);
· true refraction — html.lg-lens is set by js/hype.js only where
backdrop-filter accepts an SVG displacement map (Chromium). The map is
generated per element and bends the sampled page toward the pill's
centre in an edge band, so content scrolling underneath visibly warps
at the rim like Apple's liquid glass. The fill thins out and the sample
is dimmed (brightness) so the light chrome text keeps contrast over any
canvas; other engines never see these declarations and keep the
existing frosted blur. */
.nav::before,
.to-top::before {
content: "";
position: absolute;
inset: -1px; /* pseudo is positioned off the padding box — reach back over the 1px border */
border-radius: inherit;
padding: 1px;
background: conic-gradient(from 205deg,
rgba(255, 255, 255, 0.5),
rgba(255, 255, 255, 0.04) 20%,
rgba(255, 255, 255, 0.26) 44%,
rgba(255, 255, 255, 0.55) 53%,
rgba(255, 255, 255, 0.05) 78%,
rgba(255, 255, 255, 0.5));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
pointer-events: none;
}
/* glass gloss — the bold curved reflections real glass throws (all
engines): a bright sweep entering top-left, a soft counter-glint at the
bottom-right, and a diagonal streak across the surface. Content sits
above it (see the z-index bump below). */
.nav::after,
.to-top::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background:
radial-gradient(140% 90% at var(--glass-light-x) var(--glass-light-y), rgba(255, 255, 255, 0.17), transparent 42%),
radial-gradient(120% 70% at 92% 108%, rgba(255, 255, 255, 0.08), transparent 44%),
linear-gradient(112deg, transparent 30%, rgba(255, 255, 255, 0.08) 45%, transparent 58%);
}
.nav > * { position: relative; z-index: 1; }
.to-top svg { position: relative; z-index: 1; }
/* .lens-ready is managed by js/hype.js: present only while the element's
displacement map matches its current geometry (it is dropped the moment
a resize/morph starts and re-added once the settled size is re-rendered),
so the refraction never runs against stale geometry */
/* the refraction is the identity of this chrome — the dim rides along inside
the same filter chain, and saturation is nudged up because scaling a
sample down takes some of its colour with it */
/* blur BEFORE the lens, not after: the bevel squeezes the page into a ~2px
ring, and blurring that ring afterwards is exactly what turns a glass edge
back into a soft frosted smear. Displacing an already-blurred sample keeps
the sampling discontinuity — the contour — crisp. */
html.lg-lens .nav.lens-ready {
backdrop-filter: blur(1.5px) url(#lg-lens-nav) saturate(1.5) brightness(var(--glass-dim));
-webkit-backdrop-filter: blur(1.5px) url(#lg-lens-nav) saturate(1.5) brightness(var(--glass-dim));
}
/* The material stays optically neutral: light and dark appearances come from
the actual page behind the lens, as they do in the macOS references — only
dimmed. Opening no longer resizes the refractive header bubble, so both
separate surfaces share the same clear tint and displacement strength. */
html.lg-lens .nav { --nav-fill: rgba(18, 17, 21, 0.24); }
html.lg-lens .nav-wrap.is-scrolled .nav { --nav-fill: rgba(18, 17, 21, 0.26); }
html.lg-lens .to-top {
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.015) 55%, rgba(255, 255, 255, 0.08)),
rgba(18, 17, 21, 0.3);
}
html.lg-lens .to-top.lens-ready {
backdrop-filter: blur(1.5px) url(#lg-lens-top) saturate(1.9) brightness(var(--glass-dim));
-webkit-backdrop-filter: blur(1.5px) url(#lg-lens-top) saturate(1.9) brightness(var(--glass-dim));
}
/* ---------- the bevel, read as light ----------
Refraction alone gives a ring of squeezed page; what makes Apple's edge
read as a solid EDGE is that the same bevel also catches light. These
inset shadows sit on the gloss layer (which is inside the border), so the
crisp inner hairline lands exactly where the displacement peaks and the
soft inward falloff gives the material thickness. */
html.lg-lens .nav.lens-ready::after,
html.lg-lens .to-top.lens-ready::after {
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.13),
inset 0 2px 1.5px -1px rgba(255, 255, 255, 0.5),
inset 0 -2px 1.5px -1px rgba(255, 255, 255, 0.26),
inset 0 0 12px -4px rgba(255, 255, 255, 0.22);
}
/* clear glass means the chrome can land on anything — a breath of text/icon
shadow keeps the type legible over light canvases without re-tinting */
.nav-wrap .nav-links a {
text-shadow:
0 1px 2px rgba(16, 15, 17, 0.5),
0 1px 10px rgba(16, 15, 17, 0.4);
}
.nav-wrap .nav-logo img {
filter:
drop-shadow(0 1px 1px rgba(16, 15, 17, 0.92))
drop-shadow(0 3px 9px rgba(16, 15, 17, 0.58));
}
.nav-wrap .nav-burger { color: #FFFFFF; }
.to-top svg { filter: drop-shadow(0 1px 5px rgba(16, 15, 17, 0.5)); }
/* the pill's CTA joins the glass language: tinted violet glass instead of an
opaque slab with a hard 2px ledge — the one solid element was breaking the
liquid read of the whole header */
.nav .btn-primary {
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.02) 60%),
rgba(103, 73, 239, 0.72);
border-color: rgba(255, 255, 255, 0.22);
backdrop-filter: blur(10px) saturate(1.5);
-webkit-backdrop-filter: blur(10px) saturate(1.5);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.3),
0 10px 26px -10px rgba(103, 73, 239, 0.55);
}
@media (hover: hover) {
.nav .btn-primary:hover {
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.04) 60%),
rgba(123, 95, 246, 0.82);
transform: translateY(-1px);
}
}
/* ---------- back to top (glass chip, injected by js/hype.js) ---------- */
.to-top {
position: fixed;
right: max(18px, env(safe-area-inset-right, 0px));
bottom: max(20px, env(safe-area-inset-bottom, 0px));
z-index: 95;
width: 52px;
height: 52px;
padding: 0;
border-radius: 50%;
display: grid;
place-items: center;
color-scheme: dark;
color: #EEEEF9;
cursor: pointer;
font-size: 0;
border: 1px solid rgba(255, 255, 255, 0.15);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02) 55%, rgba(255, 255, 255, 0.09)),
rgba(18, 17, 21, 0.36);
backdrop-filter: blur(24px) saturate(1.8) brightness(var(--glass-dim));
-webkit-backdrop-filter: blur(24px) saturate(1.8) brightness(var(--glass-dim));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.17),
inset 0 -1px 0 rgba(255, 255, 255, 0.04),
0 16px 40px -12px rgba(0, 0, 0, 0.55);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(16px) scale(0.86);
transition:
opacity 240ms ease,
transform 340ms var(--ease-expressive),
background-color var(--motion-fast) ease,
visibility 0s linear 340ms;
}
.to-top svg { width: 17px; height: 17px; }
.to-top.show {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
transition-delay: 0s;
}
@media (hover: hover) {
.to-top.show:hover { transform: translateY(-3px); background-color: rgba(38, 37, 43, 0.7); }
}
.to-top.show:active { transform: scale(0.92); transition-duration: 80ms; }
.nav-logo { min-width: 0; flex-shrink: 1; }
.nav-logo img { height: 22px; width: auto; max-width: 100%; }
.nav-links { display: flex; align-items: center; gap: clamp(8px, 1.4vw, 22px); }
/* The phone menu's rows read better than this row did over a light section,
and the reason was purely typographic: 16px/650 there against 13.5px/600
here. Meeting it partway — the desktop row still has to fit six items plus
the CTA in one pill — closes most of that gap. */
.nav-links a {
font-size: 14.5px;
font-weight: 650;
color: var(--fg-2);
padding: 7px 9px;
border-radius: 999px;
transition: color var(--motion-fast) ease, background var(--motion-fast) ease, transform var(--motion-fast) var(--ease-standard);
white-space: nowrap;
}
.nav-links a:hover { color: var(--fg-1); }
/* active page: an Apple-style matte capsule — a flat, slightly raised light
chip (no gradient, no border) with the brand neon carried by the label
itself; the nav is permanent dark chrome, so the invariant neon holds */
.nav-links a.active {
color: var(--neon-green);
font-weight: 700;
background: rgba(255, 255, 255, 0.13);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
/* no green glow here: it replaced the dark breath every other row keeps,
so the one label that most needed separation from a dimmed light
backdrop was the only one haloing itself in its own colour */
}
.nav-links .nav-mobile-cta { display: none; }
.nav-burger { display: none; }
/* ---------- buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: var(--font-body);
font-size: 15.5px;
font-weight: 700;
border-radius: 999px;
padding: 14px 28px;
cursor: pointer;
border: 1px solid transparent;
transition: transform var(--motion-fast) var(--ease-standard), background var(--motion-fast) ease, box-shadow var(--motion-fast) ease, border-color var(--motion-fast) ease;
white-space: nowrap;
}
.btn-primary { background: var(--violet); color: #fff; box-shadow: var(--shadow-cta); }
.btn-primary:active { transform: scale(0.985); box-shadow: 0 0 0 var(--violet-deep), 0 4px 14px rgba(103, 73, 239, 0.3); }
.btn-ghost {
background:
linear-gradient(135deg, var(--glass-sheen-1), var(--glass-sheen-2) 60%),
var(--btn-ghost-fill);
color: var(--fg-1);
border-color: var(--glass-brd);
backdrop-filter: blur(20px) saturate(1.7);
-webkit-backdrop-filter: blur(20px) saturate(1.7);
box-shadow: inset 0 1px 0 var(--glass-inset-hi), inset 0 -1px 0 var(--glass-inset-lo);
}
.btn:disabled { cursor: not-allowed; opacity: 0.72; transform: none; }
@media (hover: hover) {
.btn-primary:hover { background: var(--violet-hot); transform: translateY(-1px); }
.btn-ghost:hover { background: var(--surface-hover); border-color: var(--glass-brd-strong); transform: translateY(-1px); }
}
.btn-sm { min-height: 44px; padding: 8px 17px; font-size: 13.5px; }
.btn-lg { padding: 17px 36px; font-size: 17px; }
/* ---------- hero (copy-first desktop + framed video) ---------- */
.hero-cinema {
--desktop-hero-clearance: calc(var(--nav-top) + 88px);
position: relative;
height: auto;
min-height: 560px;
overflow: clip;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
padding: var(--desktop-hero-clearance) 0 clamp(30px, 4vh, 48px);
background:
radial-gradient(ellipse 76% 44% at 50% 0%, rgba(103, 73, 239, 0.18), transparent 68%),
var(--surface-page);
}
@media (min-height: 720px) {
.hero-cinema { min-height: 100vh; min-height: 100svh; }
}
.hero-media {
position: relative;
order: 2;
z-index: 0;
height: min(720px, calc(100svh - var(--desktop-hero-clearance) - 158px));
min-height: 360px;
width: auto;
max-width: calc(100vw - 64px);
margin: clamp(22px, 3vh, 32px) auto 0;
aspect-ratio: 16 / 9;
border-radius: 24px;
overflow: visible;
background: #17161A;
border: 1px solid var(--line-strong);
box-shadow: var(--shadow-card), 0 0 110px -34px rgba(103, 73, 239, 0.48);
}
.hero-media video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
filter: none;
transition: filter 560ms var(--ease-standard);
}
.hero-cinema.cinema .hero-media video { filter: none; }
.hero-scrim {
display: none;
}
.hero-content {
position: relative;
order: 1;
z-index: 2;
width: 100%;
padding: 0;
transition: opacity 360ms ease, transform 420ms var(--ease-standard);
pointer-events: auto;
text-align: center;
color: var(--fg-1);
}
.hero-content .container > * { pointer-events: auto; }
.hero-cinema.cinema .hero-content { opacity: 1; transform: none; }
.hero-cinema.cinema .hero-content .container > * { pointer-events: auto; }
/* The changing phrase owns a stable centered line above the video. */
.hero-title {
max-width: 1120px;
min-height: 2.2em;
margin-inline: auto;
font-size: clamp(30px, 3.15vw, 48px);
line-height: 1.08;
}
.hero-title .rotor {
display: block;
margin-top: 0.06em;
}
.hero-lead {
font-size: clamp(18px, 1.7vw, 24px);
max-width: none;
margin: 0 0 10px;
color: #fff;
font-weight: 800;
}
/* Persistent sound control, anchored to the video card in every layout. */
.hero-soundchip {
position: absolute;
right: 12px;
bottom: 12px;
z-index: 2;
display: flex;
align-items: center;
gap: 11px;
padding: 9px 20px 9px 10px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.24);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03) 60%),
rgba(16, 15, 17, 0.32);
backdrop-filter: blur(22px) saturate(1.8);
-webkit-backdrop-filter: blur(22px) saturate(1.8);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 12px 36px rgba(0, 0, 0, 0.35);
color: #fff;
font-family: var(--font-body);
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: transform var(--motion-base) var(--ease-standard), background var(--motion-base) ease, opacity var(--motion-base) ease, visibility 0s linear;
}
.hero-soundchip:hover { transform: translateY(-2px); background: rgba(103, 73, 239, 0.45); }
.hero-soundchip.is-sound-on { background: rgba(103, 73, 239, 0.52); }
body[data-hero="pip"] .hero-soundchip { display: none; }
.chip-dot {
position: relative;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--violet);
display: grid;
place-items: center;
flex-shrink: 0;
}
.chip-dot svg { width: 14px; height: 14px; fill: #fff; }
.chip-dot .ic-sound-on { display: none; }
.hero-soundchip.is-sound-on .ic-sound-off { display: none; }
.hero-soundchip.is-sound-on .ic-sound-on { display: block; }
.chip-dot::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
border: 1px solid rgba(133, 109, 242, 0.8);
animation: play-pulse 2.6s ease-out infinite;
pointer-events: none;
}
.hero-soundchip.is-sound-on .chip-dot::before { animation: none; opacity: 0; }
@keyframes play-pulse {
0% { transform: scale(1); opacity: 0.8; }
100% { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.chip-dot::before { animation: none; opacity: 0; }
}
/* ---------- mobile / portrait-tablet hero: copy-first stack + framed video card
(the Toast/Stripe mobile hero pattern: headline → lead → CTA → media card).
Full-bleed cover on portrait crops the 16:9 promo to a ~28% slice and
upscales it ~3x — text gets cut mid-word and the image turns to mush. ---------- */
@media (max-width: 720px), (max-width: 1100px) and (orientation: portrait) {
.hero-cinema {
--card-w: min(calc(100vw - 40px), 560px);
--card-h: calc(var(--card-w) * 9 / 16);
/* the stat card dives into the hero's dark tail (the client marquee used to
provide this room) — keep enough dark below the video for the overlap */
--hero-pad-b: 60px;
height: auto;
min-height: 0;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
padding: var(--mobile-hero-clearance) 0 var(--hero-pad-b);
background:
radial-gradient(ellipse 90% 50% at 50% 0%, rgba(103, 73, 239, 0.16), transparent 65%),
var(--surface-page);
}
/* copy first, media card last: the card sits flush against the hero's fixed
bottom padding, so the chip/exit offsets below are bottom-anchored and
immune to the variable-height copy above */
/* stacked hero: copy now sits on the page background, so it follows the theme */
.hero-content { order: 1; padding: 0; text-align: center; color: var(--fg-1); }
.hero-lead { color: var(--fg-1); }
.hero-content .rotor { color: var(--electric-green); text-shadow: none; }
.hero-title .rotor { display: inline-block; margin-top: 0; }
/* on light the plain neon washes out and its darkened tint reads muddy —
so the rotor becomes the brand's signature neon chip with black text
(the "hype software" pill treatment from the social templates) */
[data-theme="light"] .hero-cinema:not(.theme-dark) .hero-content .rotor {
color: #100F11;
background: var(--neon-green);
padding: 0.02em 0.34em 0.08em;
border-radius: 0.38em;
}
.hero-media { order: 2; }
.hero-title { font-size: clamp(24px, 6.4vw, 31px); min-height: 3.3em; }
.hero-media {
position: relative;
inset: auto;
width: var(--card-w);
height: auto;
min-height: 0;
max-width: none;
margin: 32px auto 0;
aspect-ratio: 16 / 9;
border-radius: 18px;
overflow: visible;
border: 1px solid var(--line-strong);
box-shadow: var(--shadow-card), 0 0 90px -24px rgba(103, 73, 239, 0.45);
}
.hero-media video { filter: none; }
.hero-scrim { display: none; }
/* sound-on mode keeps the copy visible — the card never goes "fullscreen" here */
.hero-cinema.cinema .hero-content { opacity: 1; transform: none; }
.hero-cinema.cinema .hero-content .container > * { pointer-events: auto; }
/* compact chip hugging the card's bottom-right corner (ambient-video style).
.hero-cinema prefix: these must out-rank the base rules that appear later in the file */
.hero-cinema .hero-soundchip {
top: auto;
bottom: 10px;
right: 10px;
padding: 7px 14px 7px 8px;
font-size: 12.5px;
gap: 9px;
min-height: 44px;
}
.hero-cinema .hero-soundchip .chip-dot { width: 26px; height: 26px; }
.hero-cinema .hero-soundchip .chip-dot svg { width: 10px; height: 10px; }
}
@media (max-width: 480px) {
.hero-title { min-height: 3.6em; }
.hero-media { margin-top: 24px; }
}
@media (max-width: 360px) {
.hero-title { min-height: 4.35em; }
}
/* short landscape viewports (phones rotated): let the cinema hero match the screen */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 721px) {
.hero-cinema {
--desktop-hero-clearance: calc(var(--nav-top) + 64px);
min-height: 0;
padding-bottom: 18px;
}
.hero-title { min-height: 2.1em; font-size: clamp(22px, 4.2vh, 28px); }
.hero-media {
height: calc(100svh - var(--desktop-hero-clearance) - 88px);
min-height: 0;
max-width: calc(100vw - 40px);
margin-top: 12px;
}
}
.cinema-exit {
position: absolute;
top: 96px;
right: 26px;
z-index: 3;
width: 48px;
height: 48px;
border-radius: 50%;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02) 60%),
rgba(16, 15, 17, 0.35);
backdrop-filter: blur(22px) saturate(1.8);
-webkit-backdrop-filter: blur(22px) saturate(1.8);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 10px 30px rgba(0, 0, 0, 0.35);
color: #fff;
font-size: 19px;
cursor: pointer;
display: grid;
place-items: center;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity var(--motion-base) ease, background var(--motion-fast) ease, visibility 0s linear var(--motion-base);
}
.hero-cinema.cinema .cinema-exit { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.cinema-exit:hover { background: var(--violet); }
.btn-sound svg { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }
.hero-bg {
position: absolute;
inset: 0;
z-index: 0;
background:
radial-gradient(ellipse 70% 55% at 70% 8%, rgba(103, 73, 239, 0.22), transparent 65%),
radial-gradient(ellipse 45% 40% at 12% 70%, rgba(103, 73, 239, 0.1), transparent 70%);
}
.hero-grid-lines {
position: absolute;
inset: 0;
z-index: 0;
background-image:
linear-gradient(rgba(255,255,255,0.038) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.038) 1px, transparent 1px);
background-size: 72px 72px;
mask-image: radial-gradient(ellipse 85% 78% at 50% 0%, black 30%, transparent 78%);
-webkit-mask-image: radial-gradient(ellipse 85% 78% at 50% 0%, black 30%, transparent 78%);
}
/* ---------- hero ambience: the desktop gutters beside the video card ----------
A masked blueprint grid, two slow violet blooms, a drifting scan line and a
dozen floating sparks. Everything is transform/opacity only and lives behind
the video (z-index 0), so the card and copy stay untouched. The horizontal
mask keeps the centre column clean — the motion reads in the empty sides. */
.hero-fx {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
-webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 82%, transparent);
mask-image: linear-gradient(180deg, transparent, #000 12%, #000 82%, transparent);
}
.hero-fx > * { position: absolute; }
.hero-fx-grid {
inset: -5%;
background-image:
linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
background-size: 64px 64px;
-webkit-mask-image: linear-gradient(90deg, #000, transparent 30%, transparent 70%, #000);
mask-image: linear-gradient(90deg, #000, transparent 30%, transparent 70%, #000);
animation: hero-fx-drift 26s linear infinite;
}
.hero-fx-orb {
width: 46vw;
max-width: 620px;
aspect-ratio: 1;
border-radius: 50%;
filter: blur(14px);
opacity: 0.85;
}
.hero-fx-orb--a {
top: 6%;
left: -16vw;
background: radial-gradient(closest-side, rgba(103, 73, 239, 0.52), transparent 70%);
animation: hero-fx-float-a 19s ease-in-out infinite;
}
.hero-fx-orb--b {
top: 30%;
right: -15vw;
background: radial-gradient(closest-side, rgba(154, 103, 255, 0.42), transparent 70%);
animation: hero-fx-float-b 23s ease-in-out infinite;
}
/* a single neon hairline sweeping down the stage, echoing the flow beam */
.hero-fx-scan {
left: 0;
right: 0;
top: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(192, 232, 61, 0.34) 22%, rgba(133, 109, 242, 0.5) 50%, rgba(192, 232, 61, 0.34) 78%, transparent);
opacity: 0;
animation: hero-fx-scan 11s linear infinite;
}
.hero-fx-dot {
left: var(--x);
top: var(--y);
width: var(--s);
height: var(--s);
border-radius: 50%;
background: rgba(214, 205, 255, 0.9);
box-shadow: 0 0 10px rgba(133, 109, 242, 0.9);
opacity: 0;
animation: hero-fx-rise var(--dur) linear var(--del) infinite;
}
@keyframes hero-fx-drift {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(0, -64px, 0); }
}
@keyframes hero-fx-float-a {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(4vw, -5vh, 0) scale(1.12); }
}
@keyframes hero-fx-float-b {
0%, 100% { transform: translate3d(0, 0, 0) scale(1.06); }
50% { transform: translate3d(-5vw, 4vh, 0) scale(0.94); }
}
@keyframes hero-fx-scan {
0% { transform: translateY(0); opacity: 0; }
10%, 76% { opacity: 0.6; }
100% { transform: translateY(96vh); opacity: 0; }
}
@keyframes hero-fx-rise {
0% { transform: translate3d(0, 0, 0); opacity: 0; }
12%, 78% { opacity: 0.75; }
100% { transform: translate3d(14px, -190px, 0); opacity: 0; }
}
/* the stacked mobile hero has no gutters — keep the blooms, drop the busywork */
@media (max-width: 720px), (max-width: 1100px) and (orientation: portrait) {
.hero-fx-grid, .hero-fx-dot, .hero-fx-scan { display: none; }
.hero-fx-orb { opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
.hero-fx-grid,
.hero-fx-orb,
.hero-fx-scan,
.hero-fx-dot { animation: none; }
.hero-fx-scan { opacity: 0.35; }
.hero-fx-dot { opacity: 0.55; }
}
.rotor {
display: inline-block;
color: var(--neon-green); /* over the dark hero video — stays neon in both themes */
min-width: 0;
position: relative;
text-shadow: 0 0 24px rgba(192, 232, 61, 0.32);
}
.rotor-word {
display: inline-block;
}
@keyframes rotor-in {
from { opacity: 0; transform: translateY(0.28em); }
to { opacity: 1; transform: translateY(0); }
}
/* hero video card */
.hero-video {
position: relative;
margin-top: clamp(40px, 6vw, 72px);
border-radius: var(--radius-lg);
overflow: hidden;
cursor: pointer;
border: 1px solid var(--line-strong);
box-shadow: var(--shadow-card);
transform-style: preserve-3d;
transition: box-shadow 0.3s ease;
aspect-ratio: 16 / 9;
background: #1E1D22;
}
.hero-video:hover { box-shadow: var(--glow); }
.hero-video video { width: 100%; height: 100%; object-fit: cover; }
.hero-video .play-hint {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
gap: 12px;
background: rgba(16, 15, 17, 0.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--line-strong);
border-radius: 999px;
padding: 12px 24px 12px 14px;
font-weight: 700;
font-size: 15px;
color: #fff; /* over the hero video */
transition: transform 0.2s ease, background 0.2s ease;
}
.hero-video:hover .play-hint { transform: translate(-50%, -50%) scale(1.05); background: rgba(103, 73, 239, 0.4); }
.play-dot {
width: 38px; height: 38px;
border-radius: 50%;
background: var(--violet);
display: grid;
place-items: center;
flex-shrink: 0;
}
.play-dot svg { width: 14px; height: 14px; fill: #fff; margin-left: 2px; }
/* fullscreen video overlay */
.video-overlay {
position: fixed;
inset: 0;
z-index: 200;
background: rgba(11, 10, 12, 0.92);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
display: none;
align-items: center;
justify-content: center;
padding: clamp(16px, 4vw, 56px);
}
.video-overlay.open { display: flex; animation: overlay-in 0.3s ease; }
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
.video-overlay video {
max-width: min(1280px, 100%);
max-height: 100%;
width: 100%;
border-radius: var(--radius-lg);
border: 1px solid var(--line-strong);
box-shadow: var(--glow);
}
.video-overlay .close-btn {
position: absolute;
top: 22px;
right: 26px;
width: 46px; height: 46px;
border-radius: 50%;
background: var(--surface-field);
border: 1px solid var(--line-strong);
color: var(--fg-1);
font-size: 20px;
cursor: pointer;
display: grid;
place-items: center;
transition: background 0.2s ease, transform 0.2s ease;
}
.video-overlay .close-btn:hover { background: var(--violet); transform: rotate(90deg); }
/* the ecosystem clips are 9:16 — height-bound them so the frame never
overflows the viewport the way a width-bound landscape player would */
.video-overlay--portrait video {
width: auto;
height: min(86vh, 900px);
height: min(86svh, 900px);
max-width: 100%;
}
/* ---------- marquee bands + stat strip ---------- */
/* scrolling client / partner strips ride INSIDE the dark hero zone — never
as an orphaned dark stripe below a light section */
.marquee-band { padding: clamp(24px, 3vw, 44px) 0; }
/* a white overlap card dives into this band's tail — leave dark room for it */
.marquee-band--tail { padding-bottom: clamp(76px, 7vw, 108px); }
/* desktop: the key-facts section closes the dark hero zone */
.stat-section { padding: clamp(16px, 2vw, 32px) 0 clamp(64px, 8vw, 110px); }
/* mobile / portrait tablet (the stacked-hero range): the zone flips to the
light canvas so the strip reads as a white card overlapping the compact
dark hero — the same overlap idiom as the prices page */
@media (max-width: 720px), (max-width: 1100px) and (orientation: portrait) {
[data-theme="light"] .stat-section.theme-dark {
background: #F6F6FA; /* light --surface-page */
box-shadow: none;
padding: 0 0 clamp(20px, 4vw, 36px);
}
[data-theme="light"] .stat-section.theme-dark::before,
[data-theme="light"] .stat-section.theme-dark::after { content: none; }
/* the dark zone now ends at the marquee band — restore its bottom horizon
(the base adjacency rule hides it because .stat-section still carries
.theme-dark in the markup) and leave dark room for the card to dive into */
[data-theme="light"] .theme-dark:has(+ .stat-section)::after { content: ""; }
.marquee-band:not(.marquee-band--tail) { padding-bottom: 64px; }
.stat-section > .container { position: relative; z-index: 4; transform: translateY(-22px); margin-bottom: -22px; }
.stat-section .stat-strip {
background: rgba(16, 15, 17, 0.09);
border-color: rgba(16, 15, 17, 0.09);
box-shadow: 0 2px 6px rgba(16, 15, 17, 0.06), 0 26px 60px -16px rgba(16, 15, 17, 0.22);
}
.stat-section .stat-cell { background: #FFFFFF; }
.stat-section .stat-num { color: #100F11; }
.stat-section .stat-num .accent { color: #5A32E0; }
.stat-section .stat-label { color: #100F11; }
}
.stat-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
overflow: hidden;
margin-top: clamp(40px, 6vw, 72px);
}
.stat-cell { background: var(--surface-card); padding: clamp(20px, 3vw, 34px) clamp(18px, 2.5vw, 30px); }
.stat-num {
font-family: var(--font-label);
font-size: clamp(26px, 3.2vw, 42px);
font-weight: 700;
color: var(--fg-1);
line-height: 1;
}
.stat-num .accent { color: var(--violet-hot); }
.stat-label { font-size: 15.5px; color: var(--fg-1); margin-top: 10px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; }
/* live-telemetry treatment: cells cascade in with a de-blur, the numbers
count up (js), a scan beam sweeps the top edge like the flow wire */
.stat-strip { position: relative; }
.stat-strip::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 2px;
width: 180px;
border-radius: 999px;
background: linear-gradient(90deg, transparent, rgba(133, 109, 242, 0.9) 55%, #EDE9FF 78%, transparent);
opacity: 0;
pointer-events: none;
}
html.anim-ready .stat-strip.in::after { animation: stat-beam 6s linear 1.4s infinite; }
@keyframes stat-beam {
from { transform: translateX(-200px); opacity: 0; }
8%, 88% { opacity: 0.75; }
to { transform: translateX(110vw); opacity: 0; }
}
.stat-cell {
transition:
opacity 0.6s var(--ease-standard) var(--cell-d, 0s),
transform 0.7s var(--ease-expressive) var(--cell-d, 0s),
filter 0.5s var(--ease-standard) var(--cell-d, 0s);
}
.stat-cell:nth-child(2) { --cell-d: 0.09s; }
.stat-cell:nth-child(3) { --cell-d: 0.18s; }
.stat-cell:nth-child(4) { --cell-d: 0.27s; }
html.anim-ready .stat-strip.reveal:not(.in) .stat-cell { opacity: 0; transform: translateY(22px); filter: blur(5px); }
/* pulsing "live" LED next to the client counter */
.stat-live {
display: inline-block;
width: 0.26em;
height: 0.26em;
border-radius: 50%;
vertical-align: 0.09em;
margin-right: 0.32em;
background: radial-gradient(circle at 35% 30%, #A8E7B2, #4CA95C 65%);
box-shadow: 0 0 0 0 rgba(76, 169, 92, 0.4);
animation: stat-live 2.4s var(--ease-standard) infinite;
}
@keyframes stat-live {
from { box-shadow: 0 0 0 0 rgba(76, 169, 92, 0.4); }
70%, to { box-shadow: 0 0 0 0.5em rgba(76, 169, 92, 0); }
}
/* ---------- venue coverflow: the same interaction language as Home videos ---------- */
.venues-section {
overflow: clip;
background:
radial-gradient(circle at 70% 42%, rgba(103, 73, 239, 0.07), transparent 36%),
var(--surface-section);
}
.venues-head { text-align: center; margin-left: auto; margin-right: auto; }
.venue-card img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.94) contrast(1.03);
pointer-events: none;
user-select: none;
-webkit-user-drag: none;
}
.venue-card { cursor: grab; }
.venue-card:active { cursor: grabbing; }
.testi-card.venue-card .testi-meta strong {
font-size: clamp(23px, 2.1vw, 30px);
line-height: 1.16;
text-shadow: 0 2px 12px rgba(16, 15, 17, 0.72);
}
/* ---------- scroll showcase ---------- */
.showcase { position: relative; }
.showcase-track { height: 380vh; position: relative; }
.showcase-stage {
position: sticky;
top: 0;
height: 100vh;
height: 100svh;
display: flex;
align-items: center;
overflow: clip;
}
.showcase-inner {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: clamp(32px, 5vw, 72px);
align-items: center;
width: 100%;
}
/* steps share one grid cell so the column sizes to the tallest step — no fixed-height bleed */
.showcase-copy { position: relative; display: grid; align-items: center; }
.showcase-step {
grid-area: 1 / 1;
opacity: 0;
transform: translateY(28px);
transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.25, 1);
pointer-events: none;
display: flex;
flex-direction: column;
justify-content: center;
}
.showcase-step.active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.showcase-step .lead { margin-top: 16px; }
.showcase-step ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.showcase-step li { display: flex; gap: 12px; align-items: baseline; color: var(--fg-2); font-weight: 500; }
.showcase-step li::before { content: "✓"; color: var(--violet-hot); font-weight: 700; flex-shrink: 0; }
.showcase-device {
position: relative;
perspective: 1400px;
height: min(70vh, 640px);
display: grid;
place-items: center;
}
.showcase-shot {
position: absolute;
max-height: 100%;
max-width: 100%;
opacity: 0;
transform: rotateY(-24deg) rotateX(8deg) scale(0.86) translateZ(0);
transition: opacity 0.55s ease, transform 0.75s cubic-bezier(0.2, 0.8, 0.25, 1);
filter: drop-shadow(0 40px 70px rgba(0, 0, 0, 0.55));
will-change: transform, opacity;
}
.showcase-shot.active { opacity: 1; transform: rotateY(var(--ty, -7deg)) rotateX(var(--tx, 3deg)) scale(1); }
.showcase-shot.leaving { opacity: 0; transform: rotateY(20deg) rotateX(-6deg) scale(0.9); }
.showcase-progress {
position: absolute;
left: clamp(20px, 4vw, 48px);
bottom: 36px;
display: flex;
gap: 8px;
z-index: 5;
}
.showcase-progress span {
width: 34px; height: 3px;
border-radius: 2px;
background: var(--line-strong);
transition: background 0.3s ease;
}
.showcase-progress span.on { background: var(--violet-hot); }
/* ---------- feature grid ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.feature-card {
background: var(--surface-card);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 28px 24px;
transition: border-color var(--motion-fast) ease, box-shadow var(--motion-base) ease;
}
.feature-card:hover { border-color: rgba(103, 73, 239, 0.45); }
.feature-card img { width: 46px; height: 46px; margin-bottom: 18px; filter: invert(46%) sepia(72%) saturate(4621%) hue-rotate(238deg) brightness(99%) contrast(94%); }
.feature-card .h-sm { margin-bottom: 10px; }
.feature-card p { margin: 0; color: var(--fg-2); font-size: 15px; }
/* ---------- testimonials: center-focus coverflow ---------- */
.testi-stage {
position: relative;
height: clamp(460px, 68vh, 620px);
height: clamp(460px, 68svh, 620px);
display: flex;
align-items: center;
justify-content: center;
touch-action: pan-y; /* vertical scroll stays native; horizontal pointer moves drive the swipe */
}
.testi-card {
position: absolute;
height: 100%;
aspect-ratio: 9 / 16;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--line-strong);
background: #151419;
cursor: pointer;
transition: transform 520ms var(--ease-expressive), opacity 360ms ease, filter 360ms ease, box-shadow 360ms ease, border-color 360ms ease;
will-change: transform;
}
.testi-card video,
.testi-card img { width: 100%; height: 100%; object-fit: cover; }
.testi-card[data-pos="0"] { transform: translateX(0) scale(1); z-index: 3; box-shadow: var(--glow); border-color: rgba(133, 109, 242, 0.55); }
/* wings recede by depth cues (scale + dim + desaturate), not by turning
translucent — semi-transparent video over the light canvas read as a glitch */
.testi-card[data-pos="-1"],
.testi-card[data-pos="1"] { z-index: 2; opacity: 0.88; filter: brightness(0.72) saturate(0.7); box-shadow: 0 18px 44px -18px rgba(16, 15, 17, 0.35); }
.testi-card[data-pos="-1"] { transform: translateX(-84%) scale(0.84); }
.testi-card[data-pos="1"] { transform: translateX(84%) scale(0.84); }
.testi-card[data-pos="hidden-left"],
.testi-card[data-pos="hidden-right"] {
z-index: 1;
opacity: 0;
pointer-events: none;
}
.testi-card[data-pos="hidden-left"] { transform: translateX(-100%) scale(0.72); }
.testi-card[data-pos="hidden-right"] { transform: translateX(100%) scale(0.72); }
.testi-card .testi-meta {
position: absolute;
left: 18px;
right: 18px;
bottom: 16px;
z-index: 3;
pointer-events: none;
opacity: 0;
transition: opacity 0.4s ease;
}
.testi-card[data-pos="0"] .testi-meta { opacity: 1; }
.testi-card .testi-meta strong { display: block; font-size: 15.5px; color: #fff; }
.testi-card .testi-meta span { font-size: 13px; color: rgba(255, 255, 255, 0.72); }
.testi-card::after {
content: "";
position: absolute;
inset: 60% 0 0 0;
background: linear-gradient(180deg, transparent, rgba(16, 15, 17, 0.85));
z-index: 2;
pointer-events: none;
}
.testi-mute {
position: absolute;
top: 14px;
right: 14px;
z-index: 4;
width: 44px;
height: 44px;
border-radius: 50%;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03) 60%),
rgba(16, 15, 17, 0.3);
backdrop-filter: blur(20px) saturate(1.8);
-webkit-backdrop-filter: blur(20px) saturate(1.8);
border: 1px solid rgba(255, 255, 255, 0.22);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 8px 24px rgba(0, 0, 0, 0.3);
cursor: pointer;
display: grid;
place-items: center;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity var(--motion-base) ease, background var(--motion-fast) ease, visibility 0s linear var(--motion-base);
}
.testi-card[data-pos="0"] .testi-mute { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.testi-mute:hover { background: var(--violet); }
.testi-mute svg { width: 18px; height: 18px; fill: #fff; display: block; }
.testi-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
display: grid;
place-items: center;
width: 54px;
height: 54px;
padding: 0;
border-radius: 50%;
background:
linear-gradient(135deg, var(--glass-sheen-1), var(--glass-sheen-2) 60%),
var(--btn-ghost-fill);
backdrop-filter: blur(22px) saturate(1.8);
-webkit-backdrop-filter: blur(22px) saturate(1.8);
border: 1px solid var(--glass-brd-strong);
box-shadow: inset 0 1px 0 var(--glass-inset-hi), 0 10px 30px rgba(16, 15, 17, 0.18);
color: var(--fg-1);
font-size: 18px;
line-height: 1;
text-align: center;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.testi-arrow:hover { background: var(--violet); border-color: var(--violet); color: #fff; }
.testi-arrow.prev { left: clamp(0px, 3vw, 48px); }
.testi-arrow.next { right: clamp(0px, 3vw, 48px); }
.testi-dots { display: flex; gap: 0; justify-content: center; margin-top: 22px; }
/* transparent border keeps the visual dot small while the tap target stays ≥25px */
.testi-dots button {
width: 9px;
height: 9px;
box-sizing: content-box;
border-radius: 999px;
border: 8px solid transparent;
background: var(--line-strong);
background-clip: padding-box;
cursor: pointer;
padding: 0;
transition: width 0.3s ease, background-color 0.3s ease;
}
.testi-dots button.on { width: 30px; background-color: var(--violet); }
body[data-screen-label="Начало"] .testi-dots button.on { background-color: var(--neon-green); }
/* ---------- feature reels: the Client Stories shorts as a coverflow ----------
Same component as the client coverflow (.testi-stage / .testi-card) so the
two sections read as one carousel language; only the section chrome and the
two-line meta differ. Posters only until a card becomes the centre one. */
.reels-section { overflow: clip; }
.reels-head { text-align: center; margin-left: auto; margin-right: auto; }
.reels-stage .testi-meta span {
display: block;
margin-top: 4px;
line-height: 1.4;
}
.reels-more { margin: clamp(24px, 3vw, 34px) 0 0; text-align: center; font-size: 15px; }
.reels-more a { color: var(--violet-hot); font-weight: 700; }
.reels-more a:hover { text-decoration: underline; }
/* ---------- product flow: one order travels through the whole system ----------
Four live-coded product screens share one pinned stage. Every visible value
is derived directly from scroll position: no camera spring, delayed scene
playback, or animation that continues after the visitor stops scrolling.
.flow-static remains the reduced-motion / no-sticky fallback. */
/* clip only the X axis so the mobile sticky stepper can stick vertically.
With the long intro copy removed, keep the section head and first product
step visually connected instead of preserving the old whitespace. */
.flow-section {
overflow-x: clip;
padding-top: clamp(48px, 5vw, 72px);
padding-bottom: clamp(28px, 3.5vw, 48px);
}
.flow-head { text-align: center; margin: 0 auto; }
/* Scroll runway for the pinned story: (height − 100vh) is shared by the four
chapters, so each scene owns ~125vh of scrolling — one wheel-screen plays a
scene's UI beats instead of skipping a whole chapter. */
.flow-track { height: 600vh; position: relative; }
.flow-sticky {
position: sticky;
top: 0;
height: 100svh;
height: 100dvh;
min-height: 0;
isolation: isolate;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0;
/* The stage always fits the actual viewport. The former 540px minimum made
the sticky box taller than short desktop windows and pushed every product
pill through the stage's clipping edge. */
padding: clamp(80px, 10dvh, 104px) 0 clamp(14px, 2dvh, 22px);
}
/* stage lighting: vignette wash + violet blooms, vertically masked so the
sticky's backdrop dissolves into the page instead of seaming against it */
.flow-sticky::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(46% 42% at 50% 58%, var(--flow-bloom), transparent 72%),
radial-gradient(70% 55% at 50% 110%, var(--flow-bloom-2), transparent 70%),
var(--flow-stage-bg);
-webkit-mask-image: linear-gradient(180deg, transparent, #000 9%, #000 94%, transparent);
mask-image: linear-gradient(180deg, transparent, #000 9%, #000 94%, transparent);
}
/* dot-grid floor, faded radially so it reads as depth, not wallpaper */
.flow-sticky::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background-image: radial-gradient(circle, var(--flow-grid-dot) 1px, transparent 1.4px);
background-size: 26px 26px;
background-position: 50% 62%;
-webkit-mask-image: radial-gradient(75% 62% at 50% 58%, #000 25%, transparent 92%);
mask-image: radial-gradient(75% 62% at 50% 58%, #000 25%, transparent 92%);
}
/* follow-spot: the camera always centers the active scene, so a stationary
glow doubles as a follow-spot; JS dims it mid-travel */
.flow-spot {
position: absolute;
left: 50%;
top: 56%;
width: min(72vw, 980px);
aspect-ratio: 1.8;
transform: translate(-50%, -50%);
z-index: 0;
pointer-events: none;
background: radial-gradient(closest-side, var(--flow-bloom), transparent 70%);
will-change: opacity;
}
/* the follow-spot's pan + defocus is JS-owned (tracks the camera transit) */
/* optional context HUD (kept for the reduced-motion fallback) */
.flow-context {
align-self: center;
display: flex;
align-items: center;
gap: 12px;
font-family: var(--font-label);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--fg-3);
white-space: nowrap;
opacity: 0;
transform: translateY(-6px);
transition: opacity 0.45s var(--ease-standard) 0.1s, transform 0.45s var(--ease-expressive) 0.1s;
}
.flow-context i { font-style: normal; color: var(--fg-3); }
.flow-context-step { font-variant-numeric: tabular-nums; }
.flow-context-step b { color: var(--violet-hot); font-weight: 700; }
.flow-engaged .flow-context { opacity: 1; transform: translateY(0); }
/* keyboard exit from the long sticky story */
.flow-skip {
position: absolute;
left: 50%;
top: clamp(72px, 10vh, 104px);
transform: translateX(-50%);
z-index: 5;
padding: 8px 16px;
border-radius: 999px;
background: var(--surface-section);
border: 1px solid var(--line-strong);
color: var(--fg-1);
font-family: var(--font-label);
font-size: 12.5px;
opacity: 0;
pointer-events: none;
}
.flow-skip:focus-visible { opacity: 1; pointer-events: auto; }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.flow-stage { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; align-items: center; overflow: visible; }
/* The vertical camera is clipped to the usable stage below the floating nav;
viewport-based device sizing keeps the active pill and screen inside it. */
.flow-anim .flow-stage {
align-items: flex-start;
overflow: clip;
overflow-clip-margin: clamp(24px, 5vh, 48px);
-webkit-mask-image: none;
mask-image: none;
}
.flow-rail {
position: relative;
display: flex;
align-items: flex-start;
gap: clamp(72px, 9vw, 160px);
width: max-content;
will-change: transform;
}
.flow-anim .flow-rail {
flex-direction: column;
align-items: center;
gap: clamp(112px, 17vh, 190px);
width: 100%;
}
.flow-anim .flow-scene { width: 100vw; }
/* scene = step copy + device, they pan together */
.flow-scene { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 1.7vh, 18px); }
.flow-scene[data-flow-kind="tables"] { order: 1; }
.flow-scene[data-flow-kind="pocket"] { order: 2; }
.flow-scene[data-flow-kind="kds"] { order: 3; }
.flow-scene[data-flow-kind="analytics"] { order: 4; }
.flow-scene-copy {
position: relative;
isolation: isolate;
width: min(500px, 88vw);
min-height: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
text-align: center;
gap: 10px;
transition: opacity var(--motion-reveal) var(--ease-standard), transform var(--motion-reveal) var(--ease-expressive);
}
.flow-anim .flow-scene-copy::before {
content: "";
position: absolute;
inset: -14px -26px;
z-index: -1;
pointer-events: none;
background: radial-gradient(ellipse at center, var(--flow-stage-solid) 55%, transparent 80%);
}
/* in anim mode JS owns the copy wrapper (parallax + master fade);
the .on class staggers only the children */
.flow-anim .flow-scene-copy { transition: none; will-change: transform, opacity; }
.flow-anim .flow-scene {
--scene-p: 0;
--screen-p: 0;
/* Devices stay opaque so the connector cannot bleed through their UI.
Depth is expressed with lighting on the device instead of transparency. */
opacity: 1;
transform: translate3d(0, var(--scene-y, 18px), 0) scale(var(--scene-scale, 0.92));
transition: none;
will-change: transform, opacity;
}
.flow-anim .flow-scene .flow-device {
filter: none;
}
.flow-anim .flow-scene-copy {
opacity: var(--scene-p);
transform: translate3d(0, var(--copy-y, 12px), 0);
transition: none;
}
.flow-tag {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 11px 4px 5px;
border: 1px solid rgba(133, 109, 242, 0.42);
border-radius: 999px;
background: rgba(103, 73, 239, 0.1);
color: var(--violet-hot);
font-family: var(--font-label);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
line-height: 1;
white-space: nowrap;
}
.flow-tag-num {
width: 20px;
height: 20px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--violet);
color: var(--on-accent);
font-size: 10.5px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.flow-anim .flow-scene .flow-tag {
opacity: var(--scene-p);
transform: translateY(var(--tag-y, 10px)) scale(var(--tag-scale, 0.96));
transition: none;
background: linear-gradient(180deg, rgba(45, 34, 82, 0.98), rgba(22, 18, 39, 0.99));
border-color: rgba(150, 126, 255, 0.62);
box-shadow:
0 0 0 7px var(--flow-stage-solid),
0 0 22px 9px var(--flow-stage-solid),
inset 0 1px 0 rgba(255, 255, 255, 0.16),
0 8px 22px rgba(0, 0, 0, 0.28);
}
.flow-static .flow-scene .flow-tag {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.45s var(--ease-standard), transform 0.6s var(--ease-expressive);
}
.flow-static .flow-scene.in .flow-tag { opacity: 1; transform: none; }
.flow-scene-copy h3 { margin: 0; font-size: clamp(21px, 2.3vw, 28px); line-height: 1.18; letter-spacing: -0.01em; }
.flow-scene-copy p { margin: 0; color: var(--fg-2); font-size: 15px; line-height: 1.55; max-width: 38ch; }
/* Give the product-story copy a modest desktop lift without changing any
device dimensions. A wider copy measure prevents the larger type from
gaining extra lines and rising into the fixed navigation. */
@media (min-width: 861px) {
.flow-scene-copy { width: min(620px, 88vw); }
.flow-scene-copy h3 {
font-size: clamp(23px, 2.35vw, 31px);
line-height: 1.16;
}
.flow-scene-copy p {
font-size: clamp(15.25px, 1.05vw, 16px);
line-height: 1.5;
max-width: 52ch;
}
}
/* On short desktop windows, preserve the sticky header clearance while still
keeping the copy slightly larger than the original treatment. */
@media (min-width: 861px) and (max-height: 760px) {
.flow-scene-copy h3 { font-size: clamp(28px, 3.9vh, 29px); }
.flow-scene-copy p { font-size: 15.25px; }
}
/* headline + body rise out of a hard mask edge — one .flow-rv idiom shared by
the desktop camera (.on) and the mobile journey (.in); padding/negative-margin
give Cyrillic descenders (р ц у) room so overflow:hidden never clips them */
.flow-anim .flow-scene-copy :is(h3, p),
.flow-static .flow-scene-copy :is(h3, p) { overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.flow-anim .flow-scene-copy .flow-rv,
.flow-static .flow-scene-copy .flow-rv {
display: block;
transform: translateY(118%);
transition: transform 0.74s var(--ease-expressive);
will-change: transform;
}
.flow-anim .flow-scene-copy .flow-rv {
transform: translateY(var(--reveal-y, 118%));
transition: none;
}
.flow-static .flow-scene.in .flow-scene-copy h3 .flow-rv { transform: translateY(0); transition-delay: 0.1s; }
.flow-static .flow-scene.in .flow-scene-copy p .flow-rv { transform: translateY(0); transition-delay: 0.19s; }
/* connector line + travelling order chip */
.flow-line {
position: absolute;
/* Step 01 is the source of the story. Start the connector beneath its
centre so the device hides the origin and only the outgoing line shows. */
left: var(--flow-line-start, 0px);
right: -14vw;
top: 62%;
height: 2px;
z-index: 0;
background: linear-gradient(90deg, transparent, var(--flow-line-ink) 12%, var(--flow-line-ink) 88%, transparent);
}
.flow-line::before {
content: "";
position: absolute;
inset: -8px 0;
background: inherit;
filter: blur(8px);
opacity: 0.55;
}
/* scroll-scrubbed energy streak travelling down the vertical wire */
.flow-line::after {
content: "";
position: absolute;
top: -1.5px;
left: 0;
height: 5px;
width: 200px;
border-radius: 999px;
background: linear-gradient(90deg, transparent, rgba(133, 109, 242, 0.85) 55%, #EDE9FF 78%, transparent);
opacity: 0;
}
.flow-anim .flow-line {
left: 50%;
right: auto;
top: var(--flow-line-start, 0px);
bottom: auto;
width: 2px;
height: var(--flow-line-length, 0px);
transform: translateX(-50%);
background: linear-gradient(180deg, transparent, var(--flow-line-ink) 8%, var(--flow-line-ink) 92%, transparent);
}
.flow-anim .flow-line::after {
top: 0;
left: -1.5px;
width: 5px;
height: 200px;
opacity: 0.72;
transform: translateY(var(--beam-y, 0px));
background: linear-gradient(180deg, transparent, rgba(133, 109, 242, 0.85) 55%, #EDE9FF 78%, transparent);
transition: none;
}
.flow-chip {
position: absolute;
top: 62%;
left: 0;
/* below the scenes (z-index 1): the packet slips OUT from behind the sender
and dives BEHIND the receiver — it never crosses over the product UI; the
recv ring + in-screen choreography carry the arrival instead */
z-index: 0;
transform: translate(-50%, -50%);
padding: 7px 14px;
border-radius: 999px;
background: linear-gradient(180deg, #7B60F2, var(--violet));
border: 1px solid rgba(255, 255, 255, 0.35);
color: var(--on-accent);
font-family: var(--font-label);
font-size: 12.5px;
letter-spacing: 0.04em;
white-space: nowrap;
/* crisp core — a solid packet, not a glowing blob */
box-shadow: 0 2px 0 var(--violet-deep), 0 0 0 4px rgba(103, 73, 239, 0.14), 0 0 10px 1px rgba(237, 233, 255, 0.7);
opacity: 0;
pointer-events: none;
will-change: transform, opacity;
}
.flow-anim .flow-chip {
left: 50%;
top: 0;
}
[data-flow-chip-label] { transition: opacity 0.16s var(--ease-standard), filter 0.16s var(--ease-standard); }
/* tapered motion plume — feathers back along the wire, scaled by speed (--trail) */
.flow-chip::after {
content: "";
position: absolute;
right: 100%;
top: 50%;
height: 3px;
width: 96px;
margin-top: -1.5px;
border-radius: 999px;
transform-origin: 100% 50%;
transform: scaleX(var(--trail, 0));
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--violet) 85%, #EDE9FF));
-webkit-mask-image: linear-gradient(90deg, transparent, #000 40%);
mask-image: linear-gradient(90deg, transparent, #000 40%);
filter: blur(1.5px);
opacity: calc(var(--trail, 0) * 0.85);
}
.flow-anim .flow-chip::after {
right: auto;
top: auto;
bottom: 100%;
left: 50%;
width: 2px;
height: 96px;
margin: 0 0 0 -1px;
transform-origin: 50% 100%;
transform: scaleY(var(--trail, 0));
background: linear-gradient(180deg, transparent, var(--flow-line-ink) 42%, var(--violet-hot));
-webkit-mask-image: linear-gradient(180deg, transparent, #000 40%);
mask-image: linear-gradient(180deg, transparent, #000 40%);
filter: none;
}
/* the order lands: a ring ripples out from the wire entry on the device */
.fd-recv-ping {
position: absolute;
left: -4px;
top: 62%;
width: 36px;
height: 36px;
margin: -18px 0 0 -18px;
border-radius: 50%;
pointer-events: none;
opacity: 0;
z-index: 4;
border: 2px solid color-mix(in srgb, var(--violet) 70%, #EDE9FF);
}
.flow-device.recv .fd-recv-ping { opacity: 0; }
@keyframes fd-recv-ping {
0% { transform: scale(0.2); opacity: 0; }
12% { opacity: 0.9; }
100% { transform: scale(3.4); opacity: 0; }
}
/* device frames: machined bezel (two inset lines), concentric radii, pedestal */
.flow-device {
position: relative;
min-width: 0;
min-height: 0;
flex: 0 0 auto;
display: flex;
flex-direction: column;
padding: 10px;
border-radius: 32px;
background: linear-gradient(145deg, #2F2E36 0%, #1A191E 45%, #0E0D10 100%);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
inset 0 -1px 0 rgba(0, 0, 0, 0.65),
0 1px 0 rgba(255, 255, 255, 0.05),
0 2px 6px rgba(0, 0, 0, 0.35),
0 34px 80px -28px rgba(0, 0, 0, 0.65);
transition: box-shadow 700ms var(--ease-standard);
}
/* screen well ring between bezel and glass */
.flow-device::before {
content: "";
position: absolute;
inset: 6px;
border-radius: 26px;
border: 1px solid rgba(0, 0, 0, 0.7);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
pointer-events: none;
z-index: 2;
}
/* pedestal: contact shadow + violet light pool under the active device */
.flow-device::after {
content: "";
position: absolute;
left: 4%;
right: 4%;
bottom: -30px;
height: 44px;
border-radius: 50%;
z-index: -1;
pointer-events: none;
background:
radial-gradient(50% 55% at 50% 42%, var(--flow-contact), transparent 70%),
radial-gradient(65% 90% at 50% 30%, var(--flow-pool), transparent 72%);
opacity: 0;
transform: scaleX(0.8);
transition: opacity 700ms var(--ease-standard), transform 700ms var(--ease-expressive);
}
/* The active-device bloom is class-driven so the scroll loop does not need to
repaint a large glow layer on every frame. */
.flow-anim .flow-device::after {
opacity: var(--pool-opacity, 0);
transform: scaleX(var(--pool-scale, 0.82));
transition: none;
}
/* The screen stage has the space previously occupied by the HUD and stepper.
Let the product UIs use that room while keeping the copy and floating nav
clear on short viewports. */
/* Devices fill the stage: 100dvh minus the fixed chrome around them (sticky
top pad ≤104px + bottom pad ≤22px + copy block ~150px + gap + breathing
room ≈ 300px). The 64vw term keeps wide-aspect boards from spilling out of
narrow-but-tall windows without distorting their aspect ratio. */
.fd-phone { height: min(600px, calc(100dvh - 300px)); aspect-ratio: 9.8 / 17.2; border-radius: 29px; padding: 8px; }
.fd-phone::before { inset: 5px; border-radius: 24px; }
.fd-tab { height: min(720px, 64vw, calc(100dvh - 300px)); aspect-ratio: 13 / 9; padding: 12px; border-radius: 26px; }
.fd-tab::before { border-radius: 20px; }
.fd-board { height: min(720px, 64vw, calc(100dvh - 300px)); aspect-ratio: 29 / 19; padding: 10px; border-radius: 22px; }
.fd-board::before { border-radius: 16px; }
.fd-kds { height: min(720px, 64vw, calc(100dvh - 300px)); aspect-ratio: 29 / 21; }
.fd-pos, .fd-analytics { height: min(720px, 64vw, calc(100dvh - 300px)); aspect-ratio: 4 / 3; }
/* tablet front camera, inside the 12px bezel */
.fd-cam {
position: absolute;
top: 4.5px;
left: 50%;
transform: translateX(-50%);
width: 5px;
height: 5px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #39445C, #08080A 70%);
box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.07);
z-index: 3;
}
/* JS owns transform / opacity (rack-focus depth-of-field) per frame in anim
mode. Keeping the moving screens compositor-only avoids re-rasterizing all
of their UI on every scroll frame. */
.flow-anim .flow-device,
.flow-anim .flow-scene-copy {
will-change: auto;
}
.flow-anim .flow-scene,
.flow-anim .flow-scene *,
.flow-anim .flow-scene::before,
.flow-anim .flow-scene::after {
transition-duration: 0s !important;
transition-delay: 0s !important;
}
.flow-anim .flow-scene.on .flow-device {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
inset 0 -1px 0 rgba(0, 0, 0, 0.65),
0 2px 6px rgba(0, 0, 0, 0.35),
0 18px 40px -14px rgba(0, 0, 0, 0.5),
0 44px 96px -30px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(103, 73, 239, 0.28),
0 0 60px -8px rgba(103, 73, 239, 0.5),
0 26px 110px -18px rgba(103, 73, 239, 0.38);
}
/* Product UI beats are scroll-scrubbed as well. These overrides deliberately
cancel the old delayed keyframes and interpolate from --screen-p instead. */
.flow-anim .flow-scene :is(.fdp-hit-1, .fdp-qty, .fdp-plus, .fdp-badge, .fdp-send, .fdk-new, .fdo-t3, .fdo-ready, .fds-path, .fds-area, .fds-path-compare, .fds-now-line, .fds-node, .fds-dot, .fds-dot-ring, .fds-tip, .fds-bump, .fds-payoff) {
animation: none !important;
transition: none !important;
}
.flow-anim .fdp-hit-1 { background: color-mix(in srgb, var(--m-violet-soft) var(--screen-pct, 0%), transparent); }
.flow-anim .fdp-qty,
.flow-anim .fdp-badge {
opacity: var(--screen-p);
transform: scale(var(--screen-scale, 0.72));
}
.flow-anim .fdp-send {
opacity: var(--screen-p);
transform: translateY(var(--screen-send-y, 230%));
}
.flow-anim .fdk-new {
opacity: var(--screen-p);
transform: translateY(var(--screen-kds-y, 1.2em)) scale(var(--screen-kds-scale, 0.94));
}
.flow-anim .fdk-new .fdk-item-main time { color: var(--m-green); display: inline-flex; align-items: center; gap: 0.4em; }
.flow-anim .fdk-new .fdk-item-main time::before {
content: "";
width: 0.45em;
height: 0.45em;
border-radius: 50%;
background: var(--m-green);
animation: none;
opacity: var(--screen-p);
}
.flow-anim .fdo-t3 { filter: brightness(var(--screen-brightness, 1)); }
.flow-anim .fdo-ready {
opacity: var(--screen-p);
transform: translateY(var(--screen-ready-y, 0.6em));
}
.flow-anim .fds-path { stroke-dashoffset: var(--screen-inv, 1); }
.flow-anim :is(.fds-area, .fds-node, .fds-dot, .fds-tip) { opacity: var(--screen-p); }
.flow-anim :is(.fds-path-compare, .fds-now-line) { opacity: var(--screen-muted-opacity, 0); }
.flow-anim .fds-dot-ring { opacity: var(--screen-ring-opacity, 0); transform: scale(var(--screen-ring-scale, 0.7)); }
.flow-anim :is(.fds-bump, .fds-payoff) {
opacity: var(--screen-p);
transform: translateY(var(--screen-ready-y, 0.6em));
}
/* Each coded screen has its own reversible scroll timeline. The values below
are written on the scene by renderFlow(), so stopping or reversing scroll
stops or reverses every product action on the exact same frame. */
.flow-anim [data-flow-kind="tables"] [data-pos-table] {
background: color-mix(in srgb, #E7484D var(--pos-fill, 0%), #272735);
transform: scale(var(--pos-scale, 1));
filter: brightness(var(--pos-brightness, 1));
box-shadow:
0 0 0 0.5em rgba(226, 85, 80, var(--pos-ring, 0)),
0 4px 12px -4px rgba(0, 0, 0, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.flow-anim [data-flow-kind="tables"] .fdo-ready {
opacity: var(--pos-ready-p, 0);
transform: translateY(var(--pos-ready-y, 0.7em));
}
.flow-anim [data-flow-kind="pocket"] .fdp-hit-1 {
background: rgba(103, 73, 239, var(--pocket-row-p, 0));
}
.flow-anim [data-flow-kind="pocket"] .fdp-plus {
transform: scale(var(--pocket-tap-scale, 1));
}
.flow-anim [data-flow-kind="pocket"] :is(.fdp-qty, .fdp-badge) {
opacity: var(--pocket-qty-p, 0);
transform: scale(var(--pocket-qty-scale, 0.72));
}
.flow-anim [data-flow-kind="pocket"] .fdp-send {
opacity: var(--pocket-send-p, 0);
transform: translateY(var(--pocket-send-y, 230%)) scale(var(--pocket-send-scale, 1));
filter: brightness(var(--pocket-send-brightness, 1));
}
.flow-anim [data-flow-kind="kds"] .fdk-new {
opacity: var(--kds-ticket-p, 0);
transform: translateY(var(--kds-ticket-y, 1.4em)) scale(var(--kds-ticket-scale, 0.92));
}
.flow-anim [data-flow-kind="kds"] .fdk-new .fdk-item-main time::before {
opacity: var(--kds-live-p, 0);
}
.flow-anim [data-flow-kind="analytics"] .fds-path {
stroke-dashoffset: var(--analytics-graph-inv, 1);
}
.flow-anim [data-flow-kind="analytics"] .fds-area { opacity: var(--analytics-area-p, 0); }
.flow-anim [data-flow-kind="analytics"] :is(.fds-path-compare, .fds-now-line) { opacity: var(--analytics-area-p, 0); }
.flow-anim [data-flow-kind="analytics"] .fds-node:nth-of-type(1) { opacity: var(--analytics-node-1, 0); transform: scale(var(--analytics-node-scale-1, 0.3)); }
.flow-anim [data-flow-kind="analytics"] .fds-node:nth-of-type(2) { opacity: var(--analytics-node-2, 0); transform: scale(var(--analytics-node-scale-2, 0.3)); }
.flow-anim [data-flow-kind="analytics"] .fds-node:nth-of-type(3) { opacity: var(--analytics-node-3, 0); transform: scale(var(--analytics-node-scale-3, 0.3)); }
.flow-anim [data-flow-kind="analytics"] .fds-node:nth-of-type(4) { opacity: var(--analytics-node-4, 0); transform: scale(var(--analytics-node-scale-4, 0.3)); }
.flow-anim [data-flow-kind="analytics"] :is(.fds-dot, .fds-dot-ring, .fds-tip) { opacity: var(--analytics-tip-p, 0); }
.flow-anim [data-flow-kind="analytics"] :is(.fds-bump, .fds-payoff) {
opacity: var(--analytics-finale-p, 0);
transform: translateY(var(--analytics-finale-y, 0.6em));
}
/* ===== perf-lite tier (.flow-lite, set by js on touch / narrow viewports) =====
Same choreography, compositor-only price: no offscreen mask pass over the
moving stage, no backdrop blur re-sampling the rail every frame, no giant
spot layer, single-digit shadow layers. Transforms + opacity keep animating. */
.flow-lite.flow-anim .flow-stage { -webkit-mask-image: none; mask-image: none; }
.flow-lite .flow-spot { display: none; }
.flow-lite .flow-line::before { display: none; }
.flow-lite .flow-progress {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background:
linear-gradient(180deg, rgba(246, 246, 250, 0.13), rgba(246, 246, 250, 0.04)),
rgba(16, 15, 17, 0.72);
}
.flow-lite.flow-anim .flow-device,
.flow-lite.flow-anim .flow-scene-copy { will-change: transform, opacity; }
.flow-section.flow-lite .flow-device {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
inset 0 -1px 0 rgba(0, 0, 0, 0.65),
0 16px 40px -18px rgba(0, 0, 0, 0.6);
}
.flow-section.flow-lite.flow-anim .flow-scene.on .flow-device {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
inset 0 -1px 0 rgba(0, 0, 0, 0.65),
0 16px 40px -18px rgba(0, 0, 0, 0.55),
0 0 0 1px rgba(103, 73, 239, 0.28),
0 0 44px -10px rgba(103, 73, 239, 0.45);
}
/* pedestal glow: js stops driving --pool per frame in lite — a class-driven
opacity transition (pure compositor) brings the bloom back on arrival */
.flow-lite.flow-anim .flow-device::after {
opacity: var(--pool-opacity, 0);
transform: scaleX(var(--pool-scale, 0.82));
transition: none;
}
.flow-lite.flow-anim .flow-scene.on .flow-device::after { opacity: var(--pool-opacity, 0); }
/* idle life (gyroscopic float on the active device) is now JS-owned, folded
into the single per-frame transform string — no CSS animation to fight it */
/* the screens themselves are product UI — media-locked, dark in both themes */
.fd-screen {
--m-bg: #131218;
--m-panel: #1B1A22;
--m-row: #23222C;
--m-line: rgba(255, 255, 255, 0.07);
--m-ink: #EEEEF9;
--m-ink-2: #A0A0AF;
--m-ink-3: #74747F;
--m-violet: #6749EF;
--m-violet-soft: rgba(103, 73, 239, 0.16);
--m-red: #E05B5B;
--m-green: #4CA95C;
--m-amber: #E8B33D;
width: 100%;
height: 100%;
border-radius: 24px;
overflow: hidden;
background: var(--m-bg);
color: var(--m-ink);
font-family: var(--font-body);
font-size: clamp(8.5px, 1.9vh, 13px);
line-height: 1.35;
position: relative;
display: flex;
flex-direction: column;
text-align: left;
user-select: none;
}
/* Keep the software viewport inside the device even when mobile sizing uses
an auto-height aspect-ratio box. Without a definite flex item size, the
KDS footer can grow past the tablet's glass and into its bezel. */
.flow-device > .fd-screen {
width: auto;
height: auto;
flex: 1 1 auto;
min-width: 0;
min-height: 0;
}
.flow-anim .fd-screen::before {
content: "";
position: absolute;
inset: 0;
z-index: 8;
border-radius: inherit;
pointer-events: none;
background: #08070d;
opacity: var(--device-dim, 0.66);
will-change: opacity;
}
.fd-phone .fd-screen { border-radius: 21px; }
.fd-tab .fd-screen { border-radius: 15px; }
.fd-board .fd-screen { border-radius: 12px; }
/* glass: diagonal sheen + corner light, faint enough to keep content legible */
.fd-screen::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 6;
background:
linear-gradient(115deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.025) 20%, transparent 34%),
radial-gradient(130% 55% at 88% -12%, rgba(255, 255, 255, 0.05), transparent 55%);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 0 26px rgba(0, 0, 0, 0.5);
}
/* --- 01 · Pocket phone --- */
.fd-island {
position: absolute;
top: 0.8em;
left: 50%;
transform: translateX(-50%);
width: 7em;
height: 2em;
border-radius: 999px;
background: #050507;
z-index: 7;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 0.55em;
}
.fd-island i {
width: 0.85em;
height: 0.85em;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #2E3A55 0%, #10131C 55%, #000 100%);
box-shadow: inset 0 0 0.2em rgba(120, 150, 255, 0.35);
}
.fdp-status {
display: flex;
justify-content: center;
align-items: center;
gap: 0.75em;
min-height: 3.5em;
padding: 0.65em 1.05em 0.45em;
background: linear-gradient(180deg, #343643 0%, #292A35 100%);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
font-size: 0.82em;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.fdp-status > svg { width: 1.65em; height: 1.65em; flex: 0 0 auto; fill: none; stroke: #ECECF4; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.fdp-status .fdp-menu-tool { fill: #ECECF4; stroke: none; }
.fdp-glyphs { display: inline-flex; align-items: center; gap: 0.55em; }
.fdp-glyphs svg { width: 2.6em; height: 1.05em; display: block; }
.fdp-batt {
display: inline-block;
width: 1.7em;
height: 0.9em;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 0.25em;
position: relative;
}
.fdp-batt::before {
content: "";
position: absolute;
inset: 1.5px;
right: 22%;
background: #fff;
border-radius: 1px;
}
.fdp-top { padding: 0.15em 0.9em 0; }
.fdp-table { min-width: 0; text-align: center; font-size: 0.84em; line-height: 1; letter-spacing: 0.035em; color: var(--m-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fdp-table i { font-style: normal; color: var(--m-violet); }
/* search field, as in the real Pocket */
.fdp-search {
display: flex;
align-items: center;
gap: 0.7em;
margin-top: 0.55em;
padding: 0.58em 0.8em;
border-radius: 0.55em;
background: var(--m-panel);
color: var(--m-ink-3);
font-size: 0.82em;
white-space: nowrap;
}
.fdp-search i {
position: relative;
width: 0.85em;
height: 0.85em;
border: 1.5px solid currentColor;
border-radius: 50%;
flex: none;
}
.fdp-search i::after {
content: "";
position: absolute;
bottom: -0.28em;
right: -0.14em;
width: 0.32em;
height: 1.5px;
background: currentColor;
transform: rotate(45deg);
}
.fdp-tabs { display: flex; margin-top: 0.55em; border-bottom: 1px solid var(--m-line); }
.fdp-tabs span { flex: 1; text-align: center; padding: 0.52em 0; color: var(--m-ink-3); font-size: 0.82em; position: relative; }
.fdp-tabs span.on { color: var(--m-ink); }
.fdp-tabs span.on::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--m-violet), #B14BF4); }
.fdp-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.5em;
height: 1.5em;
margin-left: 0.3em;
border-radius: 999px;
background: var(--m-violet);
color: #fff;
font-size: 0.85em;
font-weight: 700;
transform: scale(0);
}
.fdp-cat {
display: flex;
align-items: center;
gap: 0.8em;
margin: 0.45em 0.9em 0;
padding: 0.58em 0.75em;
border-radius: 0.6em;
background: var(--m-panel);
border-left: 3px solid var(--m-amber);
font-size: 0.86em;
letter-spacing: 0.12em;
font-weight: 600;
}
.fdp-cat-arr { color: var(--m-ink-3); font-size: 1.2em; }
.fdp-list {
list-style: none;
margin: 0.18em 0 0;
padding: 0 0.9em;
flex: 1;
overflow: hidden;
-webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 98%);
mask-image: linear-gradient(180deg, #000 78%, transparent 98%);
}
.fdp-list li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.7em;
min-height: 3.55em;
padding: 0.45em 0.45em;
border-bottom: 1px solid var(--m-line);
border-radius: 0.5em;
}
.fdp-name { font-size: 0.82em; color: var(--m-ink); display: inline-flex; align-items: center; gap: 0.48em; min-width: 0; white-space: nowrap; }
.fdp-list li:not(.fdp-hit) .fdp-name { display: block; flex: 1; overflow: hidden; text-overflow: ellipsis; }
.fdp-price { text-align: right; color: var(--m-ink); font-size: 0.8em; display: grid; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fdp-price small { color: var(--m-ink-3); font-size: 0.82em; }
.fdp-qty {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.6em;
height: 1.6em;
border-radius: 999px;
background: var(--m-violet);
color: #fff;
font-size: 0.85em;
font-weight: 700;
transform: scale(1);
}
.fdp-step { display: inline-flex; gap: 0.5em; }
.fdp-step i {
font-style: normal;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2em;
height: 2em;
border-radius: 999px;
border: 1px solid var(--m-line);
color: var(--m-ink-2);
}
.fdp-step .fdp-plus { background: var(--m-violet); border-color: var(--m-violet); color: #fff; }
.fdp-send {
position: absolute;
left: 1.45em;
right: 1.45em;
bottom: 4.1em;
padding: 0.7em;
border: 0;
border-radius: 0.7em;
background: linear-gradient(180deg, #7B60F2, var(--m-violet));
color: #fff;
font-family: var(--font-label);
font-size: 0.9em;
letter-spacing: 0.03em;
box-shadow: 0 10px 26px rgba(103, 73, 239, 0.45);
transform: translateY(230%);
opacity: 0;
pointer-events: none;
}
.fdp-nav { display: flex; min-height: 4.15em; border-top: 1px solid var(--m-line); padding: 0.55em 0.25em 0.58em; position: relative; background: var(--m-panel); }
.fdp-nav span { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25em; text-align: center; font-size: 0.67em; color: var(--m-ink-3); position: relative; }
.fdp-nav svg { width: 1.65em; height: 1.65em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fdp-nav span.on { color: var(--m-violet); }
/* notifications badge, as in the real Pocket */
.fdp-nav span:nth-child(3)::after {
content: "3";
position: absolute;
top: -0.4em;
left: calc(50% + 0.3em);
min-width: 1.4em;
height: 1.4em;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: var(--m-red);
color: #fff;
font-size: 0.72em;
font-weight: 700;
}
/* pocket play sequence */
.flow-scene.play .fdp-hit-1 { animation: fd-row-flash 1.25s var(--ease-standard) 0.38s; }
.flow-scene.play .fdp-hit-1 .fdp-qty { animation: fd-qty-change 0.62s var(--ease-expressive) 0.48s both; }
.flow-scene.play .fdp-hit-1 .fdp-plus { animation: fd-tap 0.62s var(--ease-standard) 0.42s; }
.flow-scene.play .fdp-badge { animation: fd-pop 0.5s var(--ease-expressive) 0.72s both; }
/* the story's cause: button appears once the order is built, then gets PRESSED
— the press is what dispatches the packet to the kitchen */
.flow-scene.play .fdp-send { animation: fd-send-action 2.75s var(--ease-standard) 1.15s both; }
@keyframes fd-pop { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes fd-qty-change { 0% { transform: scale(1); } 38% { transform: scale(0.72); } 72% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes fd-tap { 0%, 100% { box-shadow: 0 0 0 0 rgba(103, 73, 239, 0.55); } 50% { box-shadow: 0 0 0 0.6em rgba(103, 73, 239, 0); } }
@keyframes fd-row-flash { 0%, 100% { background: transparent; } 25% { background: var(--m-violet-soft); } }
@keyframes fd-slide-up { from { transform: translateY(230%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fd-send-action {
0% { transform: translateY(230%); opacity: 0; filter: brightness(1); }
16%, 39% { transform: translateY(0) scale(1); opacity: 1; filter: brightness(1); }
51% { transform: translateY(0.22em) scale(0.91); opacity: 1; filter: brightness(1.38); }
64% { transform: translateY(-0.05em) scale(1.025); opacity: 1; filter: brightness(1.08); }
76% { transform: translateY(0) scale(1); opacity: 1; filter: brightness(1); }
100% { transform: translateY(180%); opacity: 0; filter: brightness(1); }
}
@keyframes fd-press {
0%, 15% { transform: translateY(0) scale(1); filter: brightness(1); box-shadow: 0 10px 26px rgba(103, 73, 239, 0.45), 0 2px 0 var(--violet-deep), 0 0 0 0 rgba(237, 233, 255, 0.55); }
30%, 66% { transform: translateY(0.34em) scale(0.91); filter: brightness(1.38); box-shadow: 0 1px 5px rgba(103, 73, 239, 0.28), 0 0 0 var(--violet-deep), 0 0 0 0.7em rgba(237, 233, 255, 0.16); }
82% { transform: translateY(-0.08em) scale(1.025); filter: brightness(1.08); }
100% { transform: translateY(0) scale(1); filter: brightness(1); box-shadow: 0 10px 26px rgba(103, 73, 239, 0.45), 0 2px 0 var(--violet-deep), 0 0 0 1.55em rgba(237, 233, 255, 0); }
}
/* --- 02 · KDS --- */
.fdk { background: #17161D; }
.fdk-top {
display: flex;
align-items: center;
gap: 0.7em;
padding: 1em 1.3em;
background: var(--m-panel);
font-family: var(--font-label);
font-size: 0.95em;
letter-spacing: 0.1em;
}
.fdk-top i { color: var(--m-ink-3); font-style: normal; }
.fdk-clock { color: var(--m-ink-2); font-variant-numeric: tabular-nums; }
.fdk-count { margin-left: auto; color: var(--m-ink-2); }
.fdk-count b { color: var(--m-ink); }
.fdk-view { margin-left: 1.6em; color: var(--m-ink-3); display: inline-flex; align-items: center; gap: 0.45em; }
.fdk-view i { font-style: normal; }
.fdk-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 0.9em; padding: 0.9em 1.3em; align-content: start; overflow: hidden; }
.fdk-ticket {
border-radius: 0.5em;
overflow: hidden;
background: var(--m-row);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 4px 10px -4px rgba(0, 0, 0, 0.5);
}
.fdk-ticket header {
display: flex;
justify-content: space-between;
gap: 1em;
padding: 0.8em 1em;
background: linear-gradient(90deg, var(--m-violet), #7A5CF0);
color: #fff;
font-weight: 600;
font-size: 0.95em;
}
/* ticket aging: the oldest ticket (06:19 on the clock) runs amber */
.fdk-ticket:first-of-type header { background: linear-gradient(90deg, #B9822B, var(--m-amber)); color: #1D1607; }
.fdk-new header { background: linear-gradient(90deg, var(--m-violet), #7A5CF0); }
.fdk-chip {
font-size: 0.78em;
padding: 0.1em 0.5em;
border-radius: 999px;
background: rgba(255, 255, 255, 0.22);
letter-spacing: 0.08em;
}
.fdk-ticket header time { font-variant-numeric: tabular-nums; opacity: 0.9; background: rgba(0, 0, 0, 0.22); padding: 0.1em 0.55em; border-radius: 999px; font-size: 0.92em; }
.fdk-item { padding: 0.62em 1em; border-bottom: 1px solid var(--m-line); position: relative; }
.fdk-item-main span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fdk-item:last-child { border-bottom: 0; }
.fdk-item-main { display: flex; justify-content: space-between; gap: 1em; }
.fdk-item-main time { color: var(--m-ink-2); font-variant-numeric: tabular-nums; }
/* elapsed-time aging, as on the real KDS */
.fdk-item-main time.fdk-t-late { color: #F07070; }
.fdk-item-main time.fdk-t-mid { color: var(--m-amber); }
.fdk-item small { display: block; margin-top: 0.25em; color: var(--m-ink-2); font-size: 0.88em; }
.fdk-item .fdk-cut { color: var(--m-red); text-decoration: line-through; }
.fdk-warn::before { content: ""; position: absolute; left: 0; top: 0.5em; bottom: 0.5em; width: 3px; border-radius: 2px; background: var(--m-amber); }
/* the new ticket takes the NEXT free slot in reading order (after the two
running tickets), exactly like a real KDS — no reserved hole in the grid */
.fdk-new { opacity: 0; }
.fdk-bar { display: flex; gap: 2em; padding: 0.9em 1.3em; background: var(--m-panel); font-family: var(--font-label); font-size: 0.9em; letter-spacing: 0.1em; color: var(--m-ink-3); }
.fdk-bar .on { color: var(--m-ink); position: relative; }
.fdk-bar .on::after { content: ""; position: absolute; left: 0; right: 0; top: -0.95em; height: 2px; background: linear-gradient(90deg, var(--m-violet), #B14BF4); }
.fdk-bar .on b { color: var(--m-ink); }
.fdk-page { margin-left: auto; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 1em; }
.fdk-page i { font-style: normal; color: var(--m-ink-3); }
.fdk-page em { font-style: normal; color: var(--m-ink-2); }
/* small ticket-grid glyph in every ticket header, as in the real KDS */
.fdk-ticket header > span::before {
content: "";
display: inline-block;
width: 0.8em;
height: 0.8em;
margin-right: 0.55em;
vertical-align: -0.05em;
background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 38%, transparent 44%) 0 0 / 50% 50%;
}
.fd-kds .fdk-top { padding: 0.78em 1.15em; }
.fd-kds .fd-screen { font-size: clamp(11.5px, 1vw, 14px); }
.fd-kds .fdk-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.55em;
padding: 0.55em 0.9em;
align-content: start;
align-items: start;
}
.fd-kds .fdk-column {
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.55em;
}
.fd-kds .fdk-ticket {
border-radius: 0.12em;
align-self: auto;
}
.fd-kds .fdk-ticket header {
padding: 0.62em 0.75em;
border-radius: 0;
background: linear-gradient(90deg, #6749EF, #704FF2);
color: #fff;
}
.fd-kds .fdk-ticket:first-of-type header { background: linear-gradient(90deg, #6749EF, #704FF2); color: #fff; }
.fd-kds .fdk-ticket header time { padding: 0; border-radius: 0; background: none; }
.fd-kds .fdk-item {
padding: 0.48em 0.72em;
}
.fd-kds .fdk-bar { padding: 0.78em 1.15em; }
.flow-scene.play .fdk-new { animation: fd-ticket-in 0.65s var(--ease-expressive) 0.35s both; }
/* live dot on the ticking timers of the fresh ticket */
.flow-scene.play .fdk-new .fdk-item-main time { color: var(--m-green); display: inline-flex; align-items: center; gap: 0.4em; }
.flow-scene.play .fdk-new .fdk-item-main time::before {
content: "";
width: 0.45em;
height: 0.45em;
border-radius: 50%;
background: var(--m-green);
animation: fdk-live 1.6s ease-in-out infinite;
}
@keyframes fdk-live { 50% { opacity: 0.35; } }
@keyframes fd-ticket-in {
from { opacity: 0; transform: translateY(1.2em) scale(0.94); }
60% { opacity: 1; }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* --- 03 · POS table map — mirrors the real map: solid red occupied /
green free tables on a subtle grid, mixed circle + rect shapes --- */
.fdo { background: #141319; }
.fdo-top { display: flex; align-items: center; gap: 0.8em; padding: 1em 1.3em; font-size: 0.92em; color: var(--m-ink-2); }
.fdo-top i { color: var(--m-ink-3); font-style: normal; }
.fdo-user { color: var(--m-ink); }
.fdo-zone {
margin-left: auto;
padding: 0.4em 1em;
border-radius: 0.45em;
background: var(--m-violet);
color: #fff;
font-family: var(--font-label);
font-size: 0.85em;
letter-spacing: 0.1em;
}
.fdo-map {
position: relative;
flex: 1;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr 1fr;
gap: 1.1em;
padding: 0.4em 1.3em 1em;
}
/* graph paper breathes out at the edges instead of hard-tiling */
.fdo-map::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(var(--m-line) 1px, transparent 1px) 0 0 / 2.2em 2.2em,
linear-gradient(90deg, var(--m-line) 1px, transparent 1px) 0 0 / 2.2em 2.2em;
-webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 35%, transparent 95%);
mask-image: radial-gradient(120% 90% at 50% 40%, #000 35%, transparent 95%);
}
.fdo-t {
position: relative;
grid-column: var(--gx);
grid-row: var(--gy);
border-radius: 0.7em;
padding: 0.7em 0.85em;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.1em;
text-align: center;
box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.fdo-round { border-radius: 50%; aspect-ratio: 1; height: 100%; width: auto; place-self: center; padding: 0.7em 1.1em; }
.fdo-wide { grid-column: var(--gx) / span 2; }
.fdo-t header { position: absolute; top: 0.6em; left: 0.8em; right: 0.8em; display: flex; justify-content: space-between; font-size: 0.82em; color: rgba(255, 255, 255, 0.92); font-variant-numeric: tabular-nums; font-weight: 600; }
.fdo-round header { left: 1.2em; right: 1.2em; }
.fdo-t strong { font-size: 1.55em; font-weight: 700; letter-spacing: 0.02em; line-height: 1.1; }
.fdo-t small { color: rgba(255, 255, 255, 0.85); font-size: 0.8em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.fdo-t em { font-style: normal; color: rgba(255, 255, 255, 0.75); font-size: 0.78em; }
.fdo-busy, .fdo-t3 { background: linear-gradient(180deg, #E25550, #D64540); }
.fdo-free { background: linear-gradient(180deg, #4CAB51, #3F9944); }
/* Маса 3: occupied at € 0,00 — the claim beat flashes it as the bill lands */
.flow-scene.play .fdo-t3 { animation: fd-table-claim 0.9s var(--ease-expressive) 0.55s; }
@keyframes fd-table-claim {
0% { transform: scale(1); filter: brightness(1); }
35% { transform: scale(1.08); filter: brightness(1.25); box-shadow: 0 0 0 0.5em rgba(226, 85, 80, 0.35), 0 4px 12px -4px rgba(0, 0, 0, 0.45); }
100% { transform: scale(1); filter: brightness(1); }
}
@keyframes fd-fade-in { from { opacity: 0; } to { opacity: 1; } }
.fdo-ready {
position: absolute;
right: 1.3em;
bottom: -0.4em;
padding: 0.5em 0.9em;
border-radius: 999px;
background: var(--m-green);
color: #fff;
font-size: 0.85em;
font-weight: 600;
font-variant-numeric: tabular-nums;
opacity: 0;
transform: translateY(0.6em);
}
.flow-scene.play .fdo-ready { animation: fd-ready-in 0.55s var(--ease-expressive) 1.25s both; }
@keyframes fd-ready-in { from { opacity: 0; transform: translateY(0.6em); } to { opacity: 1; transform: translateY(0); } }
.fdo-bar { display: flex; align-items: center; gap: 1.8em; padding: 0.9em 1.3em; border-top: 1px solid var(--m-line); font-size: 0.9em; color: var(--m-ink-3); }
.fdo-quick { color: var(--m-violet); border: 1px solid rgba(103, 73, 239, 0.5); border-radius: 0.5em; padding: 0.45em 0.9em; }
.fdo-online { margin-left: auto; display: inline-flex; align-items: center; gap: 0.5em; }
.fdo-online b {
min-width: 1.5em;
height: 1.5em;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: var(--m-violet);
color: #fff;
font-size: 0.8em;
font-weight: 700;
}
.fd-pos .fdo-top { min-height: 4.9em; padding: 0.85em 1.15em; background: #23232F; }
.fd-pos .fdo-map {
grid-template-columns: repeat(9, minmax(0, 1fr));
grid-template-rows: repeat(6, minmax(0, 1fr));
gap: 0.55em;
padding: 0.65em 0.95em 0.8em;
}
.fd-pos .fdo-t {
grid-column: var(--x) / span var(--w);
grid-row: var(--y) / span var(--h);
min-width: 0;
min-height: 0;
border-radius: 0.85em;
display: grid;
grid-template-rows: minmax(0.72em, auto) minmax(1.18em, auto) minmax(0.72em, auto) minmax(0.68em, auto);
align-content: center;
align-items: center;
justify-items: center;
gap: 0.08em;
overflow: hidden;
padding: 0.4em 0.48em;
line-height: 1;
box-shadow: none;
}
.fd-pos .fdo-t header {
position: static;
grid-row: 1;
width: 100%;
min-width: 0;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 0.25em;
font-size: 0.64em;
line-height: 1;
}
.fd-pos .fdo-t header b { justify-self: start; }
.fd-pos .fdo-t header span { min-width: 0; justify-self: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-pos .fdo-t strong { grid-row: 2; font-size: 1.26em; line-height: 1; }
.fd-pos .fdo-t small { grid-row: 3; max-width: 100%; font-size: 0.68em; line-height: 1; }
.fd-pos .fdo-t em { grid-row: 4; font-size: 0.64em; line-height: 1; }
.fd-pos .fdo-free { grid-template-rows: 1fr auto auto 1fr; }
.fd-pos .fdo-free strong { grid-row: 2; }
.fd-pos .fdo-free em { grid-row: 3; }
.fd-pos .fdo-outline {
background: #272735;
border: 1.5px solid #EA4A4F;
}
.fd-pos .fdo-busy, .fd-pos .fdo-t3 { background: #E7484D; }
.fd-pos .fdo-free { background: #50A850; }
.fd-pos .fdo-counter {
grid-column: 4 / span 6;
grid-row: 3;
align-self: center;
height: 1.25em;
border-radius: 999px;
background: #594B3E;
}
.fd-pos .fdo-bar { min-height: 4.9em; background: #252532; padding: 0.75em 1.15em; }
.fd-pos .fdo-quick { border-color: var(--m-violet); color: #9B87FF; font-weight: 700; }
.fd-pos .fdo-online { margin-left: auto; }
/* --- 04 · analytics board --- */
.fds { background: #16151C; padding: 0 1.6em 1.4em; gap: 0.9em; }
.fd-analytics .fds { padding: 0 1.25em 1em; gap: 0.62em; }
.fds-systembar {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 1.8em;
margin: 0 -1.25em;
padding: 0 0.65em;
background: #242431;
color: #F0F0F5;
font-size: 0.72em;
font-variant-numeric: tabular-nums;
}
.fds-systembar b { font-weight: 400; letter-spacing: 0.3em; color: var(--m-ink-2); }
/* app top-nav with icons, as in the real dashboard */
.fds-nav {
display: flex;
align-items: stretch;
margin: 0 -1.6em;
padding: 0 0.6em;
background: #1B1A22;
border-bottom: 1px solid var(--m-line);
font-family: var(--font-label);
}
.fd-analytics .fds-nav { margin: 0 -1.25em; padding: 0 0.35em; }
.fd-analytics .fds-nav span { padding: 0.72em 0.8em 0.62em; }
@media (min-width: 861px) {
.fd-analytics .fds-nav {
position: relative;
justify-content: center;
}
.fd-analytics .fds-close,
.fd-analytics .fds-pow {
position: absolute;
top: 0;
bottom: 0;
}
.fd-analytics .fds-close { left: 0.35em; }
.fd-analytics .fds-pow { right: 0.35em; margin-left: 0; }
}
.fd-analytics .fds-head { padding-top: 1.35em; font-size: 1.18em; }
.fd-analytics .fds-chart-wrap { min-height: 12em; }
.fd-analytics .fds-sub { padding-top: 0.35em; font-size: 1.05em; font-weight: 600; color: var(--m-ink); }
.fds-nav span {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.45em;
padding: 0.85em 1em 0.7em;
font-size: 0.72em;
letter-spacing: 0.08em;
color: var(--m-ink-3);
white-space: nowrap;
}
.fds-nav span svg { width: 1.9em; height: 1.9em; }
.fds-nav span.on { color: var(--m-ink); background: rgba(255, 255, 255, 0.03); }
.fds-nav span.on::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--m-violet), #B14BF4); }
.fds-nav i { display: flex; align-items: center; padding: 0 0.9em; color: var(--m-ink-3); }
.fds-nav i svg { width: 1.35em; height: 1.35em; }
.fds-pow { margin-left: auto; }
.fds-head { font-size: 1.25em; font-weight: 600; display: flex; align-items: center; gap: 0.6em; }
.fds-hd-arr { font-style: normal; color: var(--m-ink-3); font-size: 0.8em; }
.fds-chart-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fds-chart { width: 100%; flex: 1; min-height: 0; }
.fds-grid line { stroke: rgba(255, 255, 255, 0.055); stroke-width: 1; }
.fds-grid .fds-hline { stroke: rgba(255, 255, 255, 0.075); stroke-dasharray: 3 6; }
.fds-legend text { fill: var(--m-ink-3); font-family: var(--font-label); font-size: 6.8px; letter-spacing: 0.08em; }
.fds-legend line { stroke-width: 1.8; stroke-linecap: round; }
.fds-legend-now { stroke: #A56BFF; }
.fds-legend-prev { stroke: #817E8E; stroke-dasharray: 3 3; }
.fds-path-compare { fill: none; stroke: #817E8E; stroke-width: 1.35; stroke-linecap: round; stroke-dasharray: 5 6; opacity: 0; }
.fds-path { stroke: url(#fds-line-gradient); stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 5px rgba(154, 103, 255, 0.62)); }
.fds-area { opacity: 0; transition: opacity 0.9s var(--ease-standard); }
.fds-now-line { stroke: rgba(213, 108, 255, 0.5); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0; }
.fds-node { fill: #17161D; stroke: #A56BFF; stroke-width: 1.7; opacity: 0; transform-box: fill-box; transform-origin: center; }
.fds-dot { fill: #D56CFF; stroke: #EEEAFB; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.fds-dot-ring { fill: none; stroke: #D56CFF; stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; }
.fds-tip { opacity: 0; }
.fds-tip rect { fill: rgba(38, 31, 54, 0.96); stroke: rgba(213, 108, 255, 0.6); stroke-width: 0.8; }
.fds-tip text { fill: #F6F1FF; font-family: var(--font-label); font-size: 7.2px; font-weight: 600; font-variant-numeric: tabular-nums; }
.flow-scene.play .fds-path { transition: stroke-dashoffset 1.6s var(--ease-standard) 0.25s; stroke-dashoffset: 0; }
.flow-scene.play .fds-area { opacity: 1; transition-delay: 0.9s; }
.flow-scene.play .fds-path-compare { animation: fds-fade 0.75s var(--ease-standard) 0.35s both; }
.flow-scene.play .fds-now-line { animation: fds-fade 0.45s var(--ease-standard) 1.65s both; }
.flow-scene.play .fds-node { animation: fds-node-pop 0.42s var(--ease-expressive) both; }
.flow-scene.play .fds-node:nth-of-type(1) { animation-delay: 0.72s; }
.flow-scene.play .fds-node:nth-of-type(2) { animation-delay: 0.96s; }
.flow-scene.play .fds-node:nth-of-type(3) { animation-delay: 1.2s; }
.flow-scene.play .fds-node:nth-of-type(4) { animation-delay: 1.44s; }
.flow-scene.play .fds-dot { animation: fds-node-pop 0.45s var(--ease-expressive) 1.72s both, fds-dot-breathe 2.4s ease-in-out 2.25s infinite; }
.flow-scene.play .fds-dot-ring { animation: fds-ring 2.2s ease-out 1.82s infinite; }
.flow-scene.play .fds-tip { animation: fds-tip-in 0.45s var(--ease-expressive) 1.75s both; }
@keyframes fds-fade { from { opacity: 0; } to { opacity: 0.58; } }
@keyframes fds-node-pop { from { opacity: 0; transform: scale(0.25); } to { opacity: 1; transform: scale(1); } }
@keyframes fds-tip-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fds-ring { 0% { opacity: 0.65; transform: scale(0.55); } 75%, 100% { opacity: 0; transform: scale(1.8); } }
@keyframes fds-dot-breathe { 50% { filter: drop-shadow(0 0 5px rgba(213, 108, 255, 0.9)); } }
.fds-x { display: flex; justify-content: space-between; color: var(--m-ink-3); font-size: 0.82em; padding-top: 0.4em; font-variant-numeric: tabular-nums; }
.fds-sub { color: var(--m-ink-2); font-size: 0.95em; }
.fds-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; }
.fds-tile {
position: relative;
background: linear-gradient(180deg, #201F28, #1B1A22);
border: 1px solid var(--m-line);
border-radius: 0.6em;
padding: 1em 1.1em;
display: grid;
gap: 0.45em;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.fds-tile header { display: flex; justify-content: space-between; align-items: center; gap: 0.6em; color: var(--m-ink-2); font-size: 0.9em; }
.fds-tile header i {
font-style: normal;
color: var(--m-ink-3);
width: 1.6em;
height: 1.6em;
border: 1px solid var(--m-line);
border-radius: 50%;
display: grid;
place-items: center;
background: #26252D;
flex: none;
}
.fds-val { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; }
.fds-val b { font-size: 1.45em; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fds-arr {
width: 1.8em;
height: 1.8em;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 0.68em;
flex: none;
}
.fds-arr.up { color: #5BC46A; border: 1px solid rgba(76, 169, 92, 0.6); }
.fds-arr.down { color: #F07070; border: 1px solid rgba(224, 91, 91, 0.6); }
/* finale: THE order visibly lands in the revenue (.flow-done via JS) */
.fds-bump {
position: absolute;
top: -0.9em;
right: 0.8em;
padding: 0.3em 0.7em;
border-radius: 999px;
background: var(--m-green);
color: #fff;
font-size: 0.82em;
font-weight: 700;
font-variant-numeric: tabular-nums;
opacity: 0;
}
.flow-done .fds-bump { animation: fd-bump 1.4s var(--ease-expressive) both; }
@keyframes fd-bump {
0% { opacity: 0; transform: translateY(0.6em); }
18% { opacity: 1; transform: translateY(0); }
80% { opacity: 1; }
100% { opacity: 0; transform: translateY(-0.8em); }
}
.fds-payoff {
position: absolute;
right: 1.2em;
bottom: 1.1em;
z-index: 5;
max-width: 78%;
display: flex;
align-items: center;
gap: 0.6em;
padding: 0.7em 1em;
border-radius: 0.6em;
background: #23222C;
border: 1px solid var(--m-line);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
color: var(--m-ink);
font-size: 0.95em;
opacity: 0;
transform: translateY(0.5em);
}
.fds-payoff i {
font-style: normal;
color: var(--m-green);
width: 1.6em;
height: 1.6em;
border: 1px solid currentColor;
border-radius: 999px;
display: grid;
place-items: center;
font-size: 0.9em;
flex: none;
}
.flow-done .fds-payoff { animation: fd-ready-in 0.55s var(--ease-expressive) 0.15s both; }
/* progress: numbered glass stepper with scroll-fraction segment fills */
.flow-progress {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(10px, 1.6vw, 18px);
align-self: center;
width: max-content;
margin-inline: auto;
padding: 10px clamp(16px, 2.4vw, 26px);
border-radius: 999px;
/* Pearl-tinted glass borrows from the light system without dropping an
opaque white pill into the cinematic product stage. */
background:
linear-gradient(180deg, rgba(246, 246, 250, 0.13), rgba(246, 246, 250, 0.04)),
rgba(16, 15, 17, 0.56);
border: 1px solid rgba(246, 246, 250, 0.26);
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.28);
-webkit-backdrop-filter: blur(14px) saturate(1.6);
backdrop-filter: blur(14px) saturate(1.6);
}
.flow-progress button {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 8px 4px;
border: 0;
background: none;
cursor: pointer;
font-family: var(--font-label);
font-size: 12.5px;
letter-spacing: 0.08em;
color: var(--fg-3);
transition: color var(--motion-base) var(--ease-standard);
}
.flow-progress b {
position: relative;
overflow: hidden;
width: 24px;
height: 24px;
border-radius: 999px;
display: grid;
place-items: center;
border: 1.5px solid rgba(246, 246, 250, 0.24);
background: rgba(246, 246, 250, 0.06);
color: rgba(238, 238, 249, 0.72);
font-size: 11px;
font-weight: 700;
font-variant-numeric: tabular-nums;
transition: border-color var(--motion-base) var(--ease-standard), color var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard);
}
/* violet pours up the disc from the bottom when the step activates */
.flow-progress b::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--violet);
transform: scale(0);
transform-origin: 50% 100%;
transition: transform 0.5s var(--ease-spring);
}
.flow-progress button.on b::before,
.flow-progress button.done b::before { transform: scale(1); }
.flow-progress b::after { content: attr(data-n); position: relative; z-index: 1; transition: opacity 0.2s var(--ease-standard); }
/* the checkmark draws itself on completion; the number fades under it */
.flow-tick {
position: absolute;
inset: 0;
margin: auto;
z-index: 2;
width: 13px;
height: 13px;
fill: none;
stroke: var(--on-accent);
stroke-width: 2.6;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 22;
stroke-dashoffset: 22;
opacity: 0;
}
.flow-progress button.on { color: var(--fg-1); }
.flow-progress button.on b { border-color: var(--violet); color: var(--on-accent); box-shadow: 0 0 0 4px var(--violet-ghost); }
.flow-progress button.done b { border-color: var(--violet); color: var(--on-accent); }
.flow-progress button.done b::after { opacity: 0; }
.flow-progress button.done .flow-tick {
opacity: 1;
stroke-dashoffset: 0;
transition: stroke-dashoffset 0.42s var(--ease-standard) 0.08s, opacity 0.15s;
}
.flow-seg {
width: clamp(40px, 6vw, 96px);
height: 2px;
border-radius: 999px;
background: rgba(246, 246, 250, 0.18);
overflow: visible;
}
.flow-seg span {
position: relative;
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, var(--violet) 0 85%, var(--violet-hot) 96%, #EDE9FF);
transform: scaleX(0);
transform-origin: left;
will-change: transform;
}
/* a wet meniscus rides the leading edge while a segment is filling */
.flow-seg span::after {
content: "";
position: absolute;
right: -3px;
top: 50%;
width: 8px;
height: 8px;
margin-top: -4px;
border-radius: 50%;
background: radial-gradient(circle, #EDE9FF, var(--violet-hot) 60%, transparent 72%);
opacity: 0;
transition: opacity 0.2s;
}
.flow-seg.filling span::after { opacity: 1; }
.flow-seg.flush { animation: seg-flush 0.5s var(--ease-standard); }
@keyframes seg-flush { 40% { filter: brightness(1.7); } }
/* ===== the SAME camera journey on mobile — scaled, not replaced =====
anim mode runs at every width; devices go width-driven so nothing overflows,
the stepper compacts to discs and the HUD keeps only the step counter */
@media (max-width: 860px) {
/* the floating nav pill is ~64px tall + 12px offset — the HUD must clear it */
.flow-anim .flow-sticky { min-height: 0; padding-top: clamp(84px, 12svh, 104px); }
.flow-anim .flow-rail { gap: clamp(96px, 16svh, 150px); }
.flow-anim .flow-stage {
overflow: clip;
-webkit-mask-image: none;
mask-image: none;
}
.flow-anim .flow-context-title, .flow-anim .flow-context i { display: none; }
.flow-anim .flow-scene-copy { min-height: 0; gap: 8px; width: min(400px, 90vw); }
.flow-tag {
gap: 10px;
padding: 6px 16px 6px 6px;
font-size: 14px;
letter-spacing: 0.09em;
}
.flow-tag-num { width: 28px; height: 28px; font-size: 13px; }
.flow-anim .flow-scene-copy p { font-size: 13.5px; }
.flow-anim .fd-phone { height: min(50svh, 440px); }
.flow-anim .fd-tab { height: auto; width: min(86vw, 460px); }
.flow-anim .fd-board { height: auto; width: min(90vw, 480px); }
.flow-anim .fd-kds,
.flow-anim .fd-pos,
.flow-anim .fd-analytics {
height: auto;
width: min(94vw, 620px);
}
.flow-anim .fd-tab .fd-screen, .flow-anim .fd-board .fd-screen { font-size: clamp(6px, 1.9vw, 11.5px); }
.flow-anim .fd-phone .fd-screen { font-size: clamp(7px, 2.1vw, 11.5px); }
.flow-anim .fd-kds .fdk-grid {
gap: 0.35em;
padding: 0.4em 0.7em;
}
.flow-anim .fd-kds .fdk-column { gap: 0.35em; }
.flow-anim .fd-kds .fdk-ticket header { padding: 0.35em 0.58em; }
.flow-anim .fd-kds .fdk-item { padding: 0.25em 0.58em; }
.flow-anim .fd-kds .fdk-item small { margin-top: 0.12em; }
.flow-anim .flow-chip { font-size: 11px; padding: 5px 11px; }
.flow-anim .flow-progress { gap: 8px; padding: 8px 14px; max-width: calc(100vw - 24px); }
/* the pinned stepper owns the bottom edge — the to-top chip would sit right
on top of it (fixed, same corner), so it yields while the story is on screen */
html.flow-on-screen .to-top.show {
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(16px) scale(0.86);
}
.flow-anim .flow-progress button {
min-width: 44px;
min-height: 44px;
justify-content: center;
padding: 6px;
}
.flow-anim .flow-progress button span { display: none; }
.flow-anim .flow-seg { width: clamp(18px, 6vw, 40px); }
}
/* ===== vertical journey fallback (reduced motion / no sticky) =====
the horizontal rail becomes a vertical journey down a glowing left spine:
each card rises + de-blurs into its own violet pool, a pulse-dot rides the
spine, and a sticky bottom stepper maps the four stops — all scroll-linked. */
.flow-static .flow-track { height: auto; }
.flow-static .flow-sticky { position: static; height: auto; min-height: 0; padding: 12px 0 0; }
.flow-static .flow-sticky::before, .flow-static .flow-sticky::after { display: none; }
.flow-static .flow-spot, .flow-static .flow-context, .flow-static .flow-skip { display: none; }
/* left band for the spine; cards sit to its right */
.flow-static .flow-rail {
width: auto;
flex-direction: column;
align-items: center;
gap: clamp(58px, 13vw, 104px);
transform: none !important;
padding: 6px clamp(16px, 4.5vw, 24px) 6px clamp(40px, 11vw, 58px);
}
.flow-static .flow-track { padding-bottom: clamp(64px, 12vh, 96px); }
.flow-static .flow-scene { scroll-margin-top: clamp(72px, 14vh, 120px); }
.flow-static .flow-scene-copy { opacity: 1; min-height: 0; width: min(400px, calc(100vw - 90px)); }
/* legible screen sizing */
.flow-static .fd-phone { height: auto; width: min(272px, calc(100vw - 96px)); }
.flow-static .fd-tab, .flow-static .fd-board { height: auto; width: min(500px, calc(100vw - 76px)); }
.flow-static .fd-kds,
.flow-static .fd-pos,
.flow-static .fd-analytics { height: auto; width: min(620px, calc(100vw - 24px)); }
.flow-static .fd-screen { font-size: clamp(9px, 2.9vw, 12px); }
.flow-static .fd-phone .fd-screen { font-size: clamp(9.5px, 3vw, 11.5px); }
/* per-card reveal: device rises, de-blurs and lights up as it enters view */
.flow-static .flow-scene .flow-device {
opacity: 0;
transform: translateY(52px) scale(0.93);
filter: blur(7px);
transition: opacity 0.7s var(--ease-standard) 0.14s, transform 0.9s var(--ease-expressive) 0.14s, filter 0.6s var(--ease-standard) 0.14s, box-shadow 0.8s var(--ease-standard) 0.2s;
}
.flow-static .flow-scene.in .flow-device {
opacity: 1;
transform: none;
filter: none;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
inset 0 -1px 0 rgba(0, 0, 0, 0.65),
0 18px 40px -16px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(103, 73, 239, 0.24),
0 0 44px -10px rgba(103, 73, 239, 0.4),
0 28px 84px -26px rgba(103, 73, 239, 0.3);
}
/* violet bloom behind the active card — the desktop stage light, restored */
.flow-static .flow-scene { position: relative; }
.flow-static .flow-scene::before {
content: "";
position: absolute;
left: 50%;
top: 44%;
width: 128%;
aspect-ratio: 1;
transform: translate(-50%, -50%) scale(0.55);
background: radial-gradient(closest-side, var(--flow-bloom), transparent 70%);
opacity: 0;
z-index: -1;
pointer-events: none;
transition: opacity 0.9s var(--ease-standard) 0.1s, transform 1s var(--ease-expressive) 0.1s;
}
.flow-static .flow-scene.in::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* contact pool blooms in with the card */
.flow-static .flow-device::after {
opacity: 0;
transform: scaleX(0.7);
transition: opacity 0.8s var(--ease-standard) 0.25s, transform 0.8s var(--ease-expressive) 0.25s;
}
.flow-static .flow-scene.in .flow-device::after { opacity: 1; transform: none; }
.flow-static .fds-payoff { opacity: 1; transform: none; }
/* left spine — filled top→down by --flow-mp (scroll fraction) */
.flow-static .flow-line {
display: block;
left: clamp(19px, 6vw, 30px);
right: auto;
top: 0;
bottom: 0;
width: 2px;
height: auto;
transform: none;
z-index: 0;
opacity: 1;
border-radius: 2px;
background:
linear-gradient(180deg, var(--violet-hot), var(--violet)) no-repeat top / 100% calc(var(--flow-mp, 0) * 100%),
linear-gradient(180deg, transparent, var(--flow-line-ink) 5%, var(--flow-line-ink) 95%, transparent);
}
.flow-static .flow-line::before {
inset: 0 -6px;
filter: blur(7px);
opacity: 0.5;
background: linear-gradient(180deg, var(--violet-hot), transparent calc(var(--flow-mp, 0) * 100% + 4%));
}
.flow-static .flow-line::after { display: none; }
/* the order pulse-dot rides the spine (Y = --flow-dot) */
.flow-static .flow-chip {
display: block;
opacity: 1;
z-index: 1;
left: clamp(19px, 6vw, 30px);
top: 0;
width: 12px;
height: 12px;
padding: 0;
border: 0;
border-radius: 50%;
transform: translate(-50%, var(--flow-dot, 0px));
background: radial-gradient(circle at 40% 35%, #EDE9FF, var(--violet-hot) 55%, var(--violet));
box-shadow: 0 0 0 4px var(--violet-ghost), 0 0 16px 3px rgba(103, 73, 239, 0.6);
}
.flow-static .flow-chip [data-flow-chip-label], .flow-static .flow-chip::after { display: none; }
/* sticky bottom stepper maps the four stops (tap to jump) */
.flow-static .flow-progress {
display: flex;
position: sticky;
bottom: max(14px, env(safe-area-inset-bottom));
z-index: 6;
gap: 8px;
padding: 8px 12px;
max-width: calc(100vw - 28px);
margin-inline: auto;
}
.flow-static .flow-progress button {
min-width: 44px;
min-height: 44px;
justify-content: center;
padding: 6px;
}
.flow-static .flow-progress button span { display: none; }
.flow-static .flow-seg { width: clamp(16px, 5vw, 40px); }
/* real damped-spring physics for the pop choreography where linear() exists;
the simplified two-frame keyframes replace the hand-tuned overshoots, so
every consumer inside this block must carry the spring timing */
@supports (animation-timing-function: linear(0, 1)) {
@keyframes fd-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes fd-ticket-in { from { opacity: 0; transform: translateY(1.2em) scale(0.94); } to { opacity: 1; transform: none; } }
.flow-scene.play .fdp-hit-1 .fdp-qty { animation: fd-qty-change 0.62s var(--ease-spring) 0.48s both; }
.flow-scene.play .fdp-badge { animation: fd-pop 0.7s var(--ease-spring) 0.72s both; }
.flow-scene.play .fdo-bell b { animation: fd-pop 0.7s var(--ease-spring) 1.3s; }
.flow-scene.play .fdk-new { animation: fd-ticket-in 0.65s var(--ease-spring) 0.35s both; }
.flow-scene.play .fdp-send { animation: fd-send-action 2.75s var(--ease-standard) 1.15s both; }
}
/* ---------- marquee ---------- */
.marquee {
overflow: hidden;
mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
}
.marquee-inner {
display: flex;
gap: 0;
width: max-content;
animation: marquee 48s linear infinite;
}
@media (hover: hover) { .marquee:hover .marquee-inner { animation-play-state: paused; } }
.marquee-inner.is-paused { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee .m-item {
font-family: var(--font-display);
font-size: clamp(15px, 1.6vw, 19px);
font-weight: 400;
color: var(--fg-3);
padding: 0 28px;
white-space: nowrap;
display: flex;
align-items: center;
gap: 28px;
}
.marquee .m-item::after { content: "✦"; color: var(--violet); font-size: 12px; }
/* ---------- form ---------- */
.form-panel {
display: grid;
grid-template-columns: 1fr 1fr;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--line);
background: var(--surface-card);
box-shadow: var(--card-shadow);
transition: border-color var(--motion-base) ease, box-shadow var(--motion-base) ease;
}
.form-panel:focus-within { border-color: rgba(103, 73, 239, 0.44); box-shadow: var(--card-shadow), 0 0 0 3px var(--violet-ghost); }
.form-panel--single { grid-template-columns: 1fr; }
.form-side {
position: relative;
min-height: 420px;
background-size: cover;
background-position: center;
}
.form-side::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(16,15,17,0.25), rgba(16,15,17,0.7)); }
.form-side .form-side-copy { position: absolute; z-index: 2; left: 32px; bottom: 28px; right: 32px; }
.form-body { padding: clamp(28px, 4vw, 52px); }
.field { display: grid; gap: 7px; margin-bottom: 16px; }
.field label { font-size: 13px; font-weight: 700; color: var(--fg-2); letter-spacing: 0.03em; transition: color var(--motion-fast) ease; }
.field:focus-within label { color: var(--fg-1); }
.field input, .field textarea {
background: var(--surface-field);
border: 1px solid var(--line);
border-radius: 12px;
color: var(--fg-1);
font-family: var(--font-body);
font-size: 16px; /* ≥16px stops iOS Safari from zooming the page on focus */
padding: 13px 16px;
outline: none;
transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, background-color var(--motion-fast) ease;
width: 100%;
}
.field input::placeholder, .field textarea::placeholder { color: var(--fg-3); opacity: 1; }
.field input:hover, .field textarea:hover { border-color: var(--line-strong); }
.field input:focus, .field textarea:focus { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-ghost); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: var(--fg-3); margin: 18px 0 22px; }
.consent--compact { margin: 2px 0 4px; }
.consent input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--violet); flex: 0 0 auto; }
.consent a { color: var(--violet-hot); text-decoration: underline; text-underline-offset: 3px; }
/* ---------- demo request: copy rail + compact form card ----------
A full-width form makes 1700px-long inputs and a wall of empty
card. The split keeps the fields at a comfortable ~60ch measure and
fills the freed column with the answer to "what happens if I send
this?" — the standard B2B demo-request pattern, no imagery needed. */
.demo-split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
gap: clamp(32px, 5vw, 72px);
align-items: start;
}
.demo-rail { max-width: 560px; }
.demo-rail .lead { margin-top: 18px; }
.demo-direct { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.demo-direct .demo-direct-label { font-size: 13.5px; color: var(--fg-3); }
.demo-direct a {
font-family: var(--font-display);
font-size: clamp(20px, 2.2vw, 26px);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--fg-1);
text-decoration: none;
border-bottom: 2px solid var(--violet-ghost);
transition: color var(--motion-fast) ease, border-color var(--motion-fast) ease;
}
.demo-direct a:hover { color: var(--violet-hot); border-bottom-color: currentColor; }
/* form card */
.demo-card {
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: var(--surface-card);
box-shadow: var(--card-shadow);
padding: clamp(24px, 3vw, 34px);
position: sticky;
top: 108px;
transition: border-color var(--motion-base) ease, box-shadow var(--motion-base) ease;
}
.demo-card:focus-within { border-color: rgba(103, 73, 239, 0.44); box-shadow: var(--card-shadow), 0 0 0 3px var(--violet-ghost); }
.demo-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.demo-card-head h3 { font-size: 19px; letter-spacing: -0.02em; margin: 0; }
.demo-card-head .demo-card-time {
font-family: var(--font-label);
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-3);
}
.demo-card .field { margin-bottom: 14px; }
.demo-card .field-row { gap: 14px; }
.demo-card .field label .opt { font-weight: 500; color: var(--fg-3); letter-spacing: 0; }
.demo-card .consent { margin: 16px 0 18px; }
.demo-card .btn { width: 100%; }
.form-note { margin: 14px 0 0; font-size: 13px; line-height: 1.5; text-align: center; color: var(--fg-3); }
.form-note.is-success { color: #1f8a54; }
.form-note.is-error { color: #c44343; }
.form-note a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.demo-card .btn[disabled] { cursor: wait; opacity: 0.72; }
.form-honeypot {
position: absolute !important;
left: -10000px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
/* Stacked: intro → form → direct line. The form must not sit below a
screen of copy on a phone. */
@media (max-width: 1020px) {
.demo-split { display: flex; flex-direction: column; gap: 32px; }
.demo-rail { display: contents; }
.demo-rail-head { order: 1; max-width: 620px; }
.demo-card { order: 2; position: static; max-width: 620px; width: 100%; }
.demo-direct { order: 3; margin-top: 0; }
}
/* ---------- check list ---------- */
.check-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.check-list li { display: flex; gap: 12px; align-items: baseline; color: var(--fg-2); font-weight: 500; }
.check-list li::before { content: "✓"; color: var(--ok); font-weight: 800; flex-shrink: 0; }
/* ---------- FAQ accordion ---------- */
.faq-list { display: grid; gap: 12px; max-width: 860px; }
.faq-item {
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface-card);
overflow: hidden;
transition: border-color 0.25s ease;
}
.faq-item[open] { border-color: rgba(103, 73, 239, 0.45); }
.faq-item summary {
list-style: none;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 18px;
padding: 20px 24px;
font-weight: 700;
font-size: 16.5px;
transition: background-color var(--motion-fast) ease;
}
.faq-item summary:hover { background: var(--surface-soft); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .faq-x {
flex-shrink: 0;
width: 30px; height: 30px;
border-radius: 50%;
border: 1px solid var(--line-strong);
display: grid;
place-items: center;
font-size: 16px;
font-weight: 400;
color: var(--violet-hot);
transition: transform 0.3s ease, background 0.3s ease;
}
.faq-item[open] summary .faq-x { transform: rotate(45deg); background: var(--violet); color: #fff; }
.faq-item .faq-body { padding: 0 24px 22px; color: var(--fg-2); max-width: 700px; }
.faq-item[open] .faq-body { animation: faq-body-in var(--motion-base) var(--ease-standard); }
@keyframes faq-body-in {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
/* ---------- pricing ---------- */
.price-card {
position: relative;
background: var(--surface-card);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: clamp(28px, 4vw, 44px);
overflow: hidden;
}
.price-card.featured { border-color: rgba(103, 73, 239, 0.55); box-shadow: var(--glow); }
.price-big {
font-family: var(--font-label);
font-size: clamp(44px, 5.5vw, 64px);
font-weight: 700;
line-height: 1;
color: var(--fg-1);
}
.price-big .unit { font-size: 0.38em; color: var(--fg-2); font-weight: 500; }
.price-old {
font-family: var(--font-label);
color: var(--fg-3);
text-decoration: line-through;
font-size: 19px;
}
.price-daily {
display: grid;
gap: 7px;
margin: 26px 0 24px;
padding: 22px 24px;
border: 1px solid rgba(103, 73, 239, 0.28);
border-radius: var(--radius-md);
background: linear-gradient(135deg, rgba(103, 73, 239, 0.12), rgba(103, 73, 239, 0.035));
}
.price-daily-old {
font-family: var(--font-label);
font-size: 12px;
color: var(--fg-2);
}
.price-daily-value {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
.price-daily-value strong {
font-family: var(--font-label);
font-size: clamp(48px, 6vw, 68px);
font-weight: 700;
line-height: 1;
letter-spacing: -0.035em;
color: var(--violet-hot);
}
.price-daily-value > span {
font-family: var(--font-label);
font-size: 17px;
font-weight: 700;
color: var(--fg-1);
}
.price-daily-old s { color: var(--fg-3); }
.price-monthly {
display: grid;
gap: 8px;
margin-bottom: 26px;
}
.price-monthly-label {
font-family: var(--font-label);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-2);
}
.price-monthly-row {
display: flex;
align-items: baseline;
gap: 14px;
flex-wrap: wrap;
}
.price-monthly .price-big { font-size: clamp(32px, 4vw, 44px); }
.price-monthly .price-old { font-size: 17px; }
.price-monthly > .muted { margin: 0; }
.pill-badge {
display: inline-block;
font-family: var(--font-label);
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--violet-hot);
background: var(--violet-ghost);
border: 1px solid rgba(103, 73, 239, 0.35);
border-radius: 999px;
padding: 6px 14px;
}
/* ---------- steps ---------- */
.steps { display: grid; gap: 0; counter-reset: step; }
.step-row {
display: grid;
grid-template-columns: 72px 1fr;
gap: 22px;
padding: 26px 0;
border-bottom: 1px solid var(--line);
align-items: center;
}
.step-row:last-child { border-bottom: none; }
.step-num {
font-family: var(--font-label);
font-size: 30px;
font-weight: 700;
color: var(--violet-hot);
}
.step-row p { margin: 0; color: var(--fg-2); font-weight: 500; font-size: 17px; }
/* ---------- CTA band ---------- */
.cta-inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1.4fr auto;
gap: 28px;
align-items: center;
}
@media (max-width: 760px) {
.cta-inner { grid-template-columns: 1fr; gap: 22px; justify-items: start; }
}
/* closing prompt as a brand moment: the one place the page goes full violet.
Same panel in both themes, so every page ends on an identical signature. */
.cta-band {
color-scheme: dark;
background:
radial-gradient(110% 170% at 100% 0%, rgba(192, 232, 61, 0.13), transparent 44%),
radial-gradient(90% 150% at 0% 100%, rgba(28, 16, 84, 0.55), transparent 62%),
linear-gradient(135deg, #6D50F0 0%, #5638D6 52%, #4630B8 100%);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: var(--radius-lg);
padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 56px);
position: relative;
overflow: hidden;
color: #fff;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
0 24px 64px -20px rgba(70, 48, 184, 0.55);
}
.cta-band .lead, .cta-band .muted { color: rgba(255, 255, 255, 0.84); }
/* inverted CTA: white pill on the violet field */
.cta-band .btn-primary {
background: #fff;
color: var(--violet-deep);
box-shadow: 0 2px 0 rgba(16, 15, 17, 0.22), 0 12px 32px rgba(16, 15, 17, 0.28);
}
@media (hover: hover) {
.cta-band .btn-primary:hover { background: #EEEEF9; color: var(--violet-deep); }
}
/* brand element — the guidelines' rounded-diamond mark peeking from the right
edge (brand book pp. 22-23), now a white ghost on the violet field */
.cta-band::after {
content: "";
position: absolute;
top: 50%;
right: clamp(-230px, -16vw, -150px);
width: clamp(260px, 24vw, 380px);
aspect-ratio: 1;
transform: translateY(-50%) rotate(45deg);
border-radius: clamp(44px, 5vw, 72px);
border: 1px solid rgba(255, 255, 255, 0.22);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02) 72%);
pointer-events: none;
}
.cta-band .h-display { font-size: clamp(21px, 2.4vw, 30px); }
/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); padding: clamp(48px, 6vw, 80px) 0 36px; background: var(--surface-section); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 48px; }
.footer h4 { font-family: var(--font-label); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 16px; font-weight: 400; }
.footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.footer ul a { color: var(--fg-2); font-size: 15px; font-weight: 500; transition: color 0.2s ease; }
.footer ul a:hover,
.footer ul a:focus-visible { color: var(--electric-green); }
.footer-logo img { height: 28px; margin-bottom: 16px; }
.footer-bottom {
border-top: 1px solid var(--line);
padding-top: 24px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
color: var(--fg-3);
font-size: 13.5px;
}
.footer .footer-social-links {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 0;
}
.footer .footer-social-links a {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border: 1px solid var(--line-strong);
border-radius: 50%;
color: var(--fg-2);
transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
.footer .footer-social-links a:hover,
.footer .footer-social-links a:focus-visible {
color: var(--electric-green);
border-color: color-mix(in srgb, var(--electric-green) 55%, transparent);
background: color-mix(in srgb, var(--electric-green) 9%, transparent);
transform: translateY(-2px);
}
.footer-social-icon {
display: block;
width: 18px;
height: 18px;
background: currentColor;
-webkit-mask: var(--social-icon) center / contain no-repeat;
mask: var(--social-icon) center / contain no-repeat;
}
.footer-social-icon--facebook { --social-icon: url("../assets/social/facebook.svg"); }
.footer-social-icon--instagram { --social-icon: url("../assets/social/instagram.svg"); }
.footer-social-icon--tiktok { --social-icon: url("../assets/social/tiktok.png"); }
.footer-social-icon--linkedin { --social-icon: url("../assets/social/linkedin.png"); }
/* ---------- reveal on scroll (hidden state gated on anim-ready so non-rendering contexts show content) ---------- */
.reveal { transition: opacity var(--motion-reveal) ease, transform var(--motion-reveal) var(--ease-expressive); }
html.anim-ready .reveal:not(.in) { opacity: 0; transform: translateY(16px); }
/* Headline reveal: use opacity + lift rather than a self-hiding clip-path.
Some browsers include clipping in IntersectionObserver visibility, which
can leave a masked heading permanently hidden. */
.reveal.reveal-mask {
transition: transform 0.8s var(--ease-expressive), opacity 0.56s ease;
}
html.anim-ready .reveal.reveal-mask:not(.in) { opacity: 0; transform: translateY(0.55em); }
.reveal-d1 { transition-delay: 0.06s; }
.reveal-d2 { transition-delay: 0.12s; }
.reveal-d3 { transition-delay: 0.18s; }
.reveal-d4 { transition-delay: 0.24s; }
.reveal-d5 { transition-delay: 0.3s; }
/* ---------- tilt ---------- */
[data-tilt] { transform-style: preserve-3d; transition: transform 320ms var(--ease-expressive), border-color var(--motion-base) ease, box-shadow var(--motion-base) ease; }
[data-tilt].is-tilting { will-change: transform; }
/* ---------- hero mode B: photo + sticky mini player ---------- */
.hero-photo { position: absolute; inset: 0; z-index: 0; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; }
body[data-hero="cinema"] .hero-photo { display: none; }
body[data-hero="pip"] .hero-media { display: none; }
body[data-hero="cinema"] .hero-pip { display: none; }
body[data-hero="pip"] .hero-scrim {
background:
linear-gradient(180deg, rgba(16,15,17,0.5) 0%, rgba(16,15,17,0.18) 36%, rgba(16,15,17,0.96) 100%),
linear-gradient(100deg, rgba(16,15,17,0.55) 0%, transparent 55%);
}
.hero-pip {
position: fixed;
left: 22px;
bottom: 22px;
z-index: 90;
width: min(320px, 44vw);
aspect-ratio: 16 / 9;
border-radius: 18px;
overflow: hidden;
cursor: pointer;
background: #17161A;
border: 1px solid rgba(255, 255, 255, 0.22);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 24px 64px rgba(0, 0, 0, 0.55);
transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.4s ease;
}
.hero-pip:hover { transform: translateY(-4px) scale(1.02); box-shadow: var(--glow); }
.hero-pip video { width: 100%; height: 100%; object-fit: cover; }
.hero-pip.pip-hidden { opacity: 0; pointer-events: none; transform: translateY(20px); }
.pip-bar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
display: flex;
align-items: center;
gap: 9px;
padding: 18px 12px 10px;
background: linear-gradient(180deg, transparent, rgba(16, 15, 17, 0.85));
font-size: 12.5px;
font-weight: 700;
color: #fff;
pointer-events: none;
}
.pip-bar .play-dot-sm {
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--violet);
display: grid;
place-items: center;
flex-shrink: 0;
}
.pip-bar .play-dot-sm svg { width: 10px; height: 10px; fill: #fff; margin-left: 1px; }
.pip-close {
position: absolute;
top: 8px;
right: 8px;
z-index: 3;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.22);
background: rgba(16, 15, 17, 0.55);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: #fff;
font-size: 13px;
cursor: pointer;
display: grid;
place-items: center;
transition: background 0.2s ease;
}
.pip-close:hover { background: var(--violet); }
@media (max-width: 720px) {
.hero-pip { left: 14px; bottom: 14px; width: min(240px, 56vw); }
}
/* ---------- page hero (subpages) ---------- */
.page-hero { padding: var(--page-hero-top) 0 var(--page-hero-bottom); position: relative; overflow: clip; }
.page-hero--centered > .container { text-align: center; }
.page-hero--centered .page-title,
.page-hero--centered .lead { margin-inline: auto; }
.page-hero--centered .page-hero-actions { justify-content: center; }
.error-hero { min-height: 100svh; display: flex; align-items: center; }
.error-hero > .container { width: 100%; }
/* oversized phone number on the contacts hero — a first-class action, not plain text */
.hero-phone {
font-size: clamp(28px, 4.5vw, 52px);
font-weight: 600;
color: var(--fg-1);
transition: color 0.2s ease;
}
.hero-phone:hover { color: var(--violet-hot); }
/* layered aurora so the dark opening reads as staged light, not a flat void:
key light above the headline, violet spill on the right, faint floor bounce.
The bottom fade lets the glow dissolve into whatever dark band follows
(marquee, overlap tail) instead of hard-cutting at the section edge. */
.page-hero .hero-bg {
background:
radial-gradient(ellipse 56% 60% at 38% 0%, rgba(103, 73, 239, 0.28), transparent 68%),
radial-gradient(ellipse 44% 52% at 92% 36%, rgba(70, 48, 184, 0.24), transparent 70%),
radial-gradient(ellipse 52% 44% at 6% 100%, rgba(103, 73, 239, 0.12), transparent 72%);
-webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}
/* brand element — rounded-diamond mark drifting off the hero's top-right corner */
.page-hero .hero-bg::after {
content: "";
position: absolute;
top: clamp(-180px, -12vw, -90px);
right: clamp(-200px, -14vw, -110px);
width: clamp(240px, 30vw, 440px);
aspect-ratio: 1;
transform: rotate(45deg);
border-radius: clamp(48px, 6vw, 88px);
background: linear-gradient(135deg, var(--violet-ghost), transparent 75%);
}
@media (prefers-reduced-motion: reduce) {
html.anim-ready .reveal:not(.in) { opacity: 1; transform: none; transition: none; }
.marquee-inner { animation: none; }
.rotor-word { animation: none; }
html { scroll-behavior: auto; }
/* telemetry strip / slats / mask headlines: land on finished states */
.reveal.reveal-mask, html.anim-ready .reveal.reveal-mask:not(.in) { clip-path: none; transform: none; transition: none; }
html.anim-ready .stat-strip.reveal:not(.in) .stat-cell,
.stat-strip .stat-cell { opacity: 1; transform: none; filter: none; transition: none; }
.stat-strip::after, html.anim-ready .stat-strip.in::after { animation: none; opacity: 0; }
.stat-live { animation: none; }
/* product flow: skip the choreography, land on the finished states */
.flow-scene .fdp-qty, .flow-scene .fdp-badge { transform: scale(1); animation: none !important; }
.flow-scene .fdp-send { transform: translateY(180%); opacity: 0; animation: none !important; }
.flow-scene .fdk-new { opacity: 1; animation: none !important; }
.flow-scene .fdo-t3 { animation: none !important; }
.flow-scene .fdo-ready { opacity: 1; transform: none; animation: none !important; }
.flow-scene .fds-path { stroke-dashoffset: 0; transition: none; }
.flow-scene .fds-area { opacity: 1; transition: none; }
.flow-scene .fds-dot { opacity: 1; animation: none !important; }
.flow-scene .fds-path-compare { opacity: 0.58; animation: none !important; }
.flow-scene .fds-now-line, .flow-scene .fds-node, .flow-scene .fds-tip { opacity: 1; animation: none !important; }
.flow-scene .fds-dot-ring { opacity: 0.35; transform: none; animation: none !important; }
.flow-scene .fds-payoff { opacity: 1; transform: none; animation: none !important; }
.flow-scene .fds-bump { display: none; }
.flow-scene .fdk-new .fdk-item-main time::before { animation: none !important; }
.flow-scene .fdp-hit-1, .flow-scene .fdp-plus { animation: none !important; }
.flow-device { transition: none; }
.flow-spot, .flow-line::after { animation: none !important; }
/* mobile journey (reduced-motion routes through .flow-static): land the
reveal layers on their finished state; spine fill / dot / stepper are
pure scroll-linked position, so they stay live and RM-safe */
.flow-static .flow-scene .flow-device,
.flow-static .flow-scene :is(.flow-tag, .flow-scene-copy h3, .flow-scene-copy p),
.flow-static .flow-scene-copy .flow-rv { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
.flow-static .flow-scene::before { opacity: 1 !important; transform: translate(-50%, -50%) scale(1) !important; }
.flow-static .flow-device::after { opacity: 0.7 !important; transform: none !important; }
.fd-recv-ping, .flow-device.recv .fd-recv-ping { animation: none !important; }
}
/* ---------- responsive ---------- */
@media (max-width: 1000px) {
.feature-grid { grid-template-columns: repeat(2, 1fr); }
.stat-strip { grid-template-columns: repeat(2, 1fr); }
.form-panel { grid-template-columns: 1fr; }
.form-body { order: 1; }
.form-side { order: 2; min-height: 220px; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.showcase-inner { grid-template-columns: 1fr; gap: 18px; }
.showcase-stage { padding: 84px 0 52px; }
.showcase-copy { order: 2; }
.showcase-device { height: min(36vh, 360px); order: 1; }
.showcase-step { justify-content: flex-start; }
.showcase-step .lead { font-size: 15.5px; margin-top: 12px; }
.showcase-step li { font-size: 14.5px; }
.showcase-step ul { gap: 8px; margin-top: 14px; }
.showcase-progress { bottom: 16px; }
}
/* short phones: keep the full copy readable by shrinking the device render */
@media (max-width: 1000px) and (max-height: 720px) {
.showcase-device { height: min(26vh, 220px); }
.showcase-stage { padding: 76px 0 44px; }
}
/* ultra-small legacy phones: copy is the priority, drop the device render */
@media (max-width: 350px) and (max-height: 620px) {
.showcase-device { display: none; }
}
@media (max-width: 640px) {
.feature-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
/* stat strip: 2x2 grid reads as four lonely boxes on a phone — collapse to
one card of horizontal rows (number column left, label right) */
.stat-strip { grid-template-columns: 1fr; }
.stat-cell {
display: grid;
grid-template-columns: 84px 1fr;
align-items: center;
gap: 14px;
padding: 17px 20px;
}
.stat-num { font-size: 25px; }
.stat-label { margin-top: 0; font-size: 15px; }
.step-row { grid-template-columns: 48px 1fr; gap: 16px; }
.step-num { font-size: 24px; }
.field-row { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
}
/* the full link row (logo + 7 links + CTA + toggle ≈ 1010px) only fits on
true desktop — below that the pill overflowed the viewport, so the burger
menu now takes over for the whole tablet range as well */
@media (max-width: 1040px) {
/* Two matching glass surfaces: the compact header stays fixed while the
menu appears beneath it with a restrained product-style transition. */
.nav-links {
--menu-fill: rgba(18, 17, 21, 0.12);
--glass-light-x: 12%;
--glass-light-y: -10%;
position: absolute;
z-index: 1;
top: calc(100% + 7px);
left: 50%;
right: auto;
/* a vertical ledger reads as a column, not a banner — narrow the droplet */
width: min(calc(100% - 32px), 420px);
min-width: 0;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 2px;
padding: 0 12px;
max-height: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
pointer-events: none;
color-scheme: dark;
border: 1px solid transparent;
border-radius: 30px;
background:
radial-gradient(120% 82% at var(--glass-light-x) var(--glass-light-y), rgba(255, 255, 255, 0.08), transparent 42%),
linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01) 55%, rgba(255, 255, 255, 0.04)),
var(--menu-fill);
backdrop-filter: blur(18px) saturate(1.45) brightness(var(--glass-dim));
-webkit-backdrop-filter: blur(18px) saturate(1.45) brightness(var(--glass-dim));
box-shadow:
inset 0 2px 1px rgba(255, 255, 255, 0.24),
inset 0 -2px 2px rgba(255, 255, 255, 0.12),
inset 1px 0 0 rgba(255, 255, 255, 0.08),
inset -1px 0 0 rgba(255, 255, 255, 0.04),
0 28px 62px -20px rgba(0, 0, 0, 0.74),
0 7px 18px -12px rgba(0, 0, 0, 0.72);
transform-origin: top center;
transform: translate(-50%, -6px) scale(0.985);
transition:
max-height 240ms var(--ease-standard),
padding 240ms var(--ease-standard),
border-color 160ms ease,
opacity 160ms ease,
transform 220ms var(--ease-standard),
background-color 260ms ease,
visibility 0s linear 240ms;
}
.nav-wrap.is-scrolled > .nav-links { --menu-fill: rgba(18, 17, 21, 0.14); }
.nav-links::before {
content: "";
position: absolute;
z-index: 2;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: conic-gradient(from 205deg,
rgba(255, 255, 255, 0.42),
rgba(255, 255, 255, 0.05) 20%,
rgba(255, 255, 255, 0.22) 43%,
rgba(255, 255, 255, 0.4) 53%,
rgba(255, 255, 255, 0.06) 77%,
rgba(255, 255, 255, 0.42));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
pointer-events: none;
}
.nav-links::after {
content: "";
position: absolute;
z-index: 0;
inset: 0;
border-radius: inherit;
pointer-events: none;
background:
radial-gradient(135% 86% at var(--glass-light-x) var(--glass-light-y), rgba(255, 255, 255, 0.09), transparent 39%),
radial-gradient(110% 68% at 94% 108%, rgba(255, 255, 255, 0.05), transparent 47%),
linear-gradient(112deg, transparent 26%, rgba(255, 255, 255, 0.04) 44%, transparent 59%);
}
.nav-links a {
position: relative;
z-index: 1;
min-width: 0;
color: rgba(250, 249, 255, 0.96);
font-weight: 650;
line-height: 1.2;
/* no menu-specific text shadow: the rows inherit the one light breath of
shadow the desktop row carries (.nav-wrap .nav-links a) and nothing
more. The stack of heavy dark shadows that used to live here was
written for clear glass; against a dimmed backdrop it only read as
soot around the letters, and made the phone menu look dirty next to
the desktop row on the very same section. */
opacity: 0;
transform: translateY(-3px);
transition:
color var(--motion-fast) ease,
background var(--motion-fast) ease,
opacity 140ms ease,
transform 180ms var(--ease-standard);
}
.nav-burger {
display: grid;
place-items: center;
position: relative;
isolation: isolate;
width: 44px; height: 44px;
border-radius: 50%;
border: 1px solid transparent;
background: transparent;
color: var(--fg-1);
cursor: pointer;
font-size: 17px;
line-height: 1;
transition:
transform 220ms var(--ease-standard),
color var(--motion-fast) ease,
background var(--motion-fast) ease,
border-color var(--motion-fast) ease,
box-shadow 320ms ease,
opacity 180ms ease;
}
/* A soft satellite highlight makes the control read like the round bulb
in the reference. It expands into the shell as the menu opens, so the
trigger and tray feel poured from the same piece of glass. */
.nav-burger::before {
display: none;
}
/* CSS-drawn bars instead of the ☰ glyph: the icon fills more of the 44px
bulb so the control reads at a glance, and the top/bottom bars fold
into the standard X while the menu is up — state feedback without a
glyph swap (UX-review point 5). */
.nav-burger-box {
position: relative;
display: block;
width: 20px;
height: 14px;
}
.nav-burger-box span {
position: absolute;
left: 0;
width: 100%;
height: 2px;
border-radius: 2px;
background: currentColor;
transition: top 240ms var(--ease-standard), transform 240ms var(--ease-standard), opacity 160ms ease;
}
.nav-burger-box span:nth-child(1) { top: 0; }
.nav-burger-box span:nth-child(2) { top: 6px; }
.nav-burger-box span:nth-child(3) { top: 12px; }
.nav.open .nav-burger-box span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.nav.open .nav-burger-box span:nth-child(2) { opacity: 0; }
.nav.open .nav-burger-box span:nth-child(3) { top: 6px; transform: rotate(-45deg); }
.nav-logo,
.nav > .btn,
.nav-burger { z-index: 4; }
.nav.open {
transform-origin: top left;
/* The header remains a compact bubble; only its depth responds while
the separate menu droplet appears underneath. */
border-radius: 999px;
border-color: rgba(255, 255, 255, 0.24);
box-shadow:
inset 0 2px 1px rgba(255, 255, 255, 0.34),
inset 0 -2px 2px rgba(255, 255, 255, 0.18),
0 22px 58px -18px rgba(0, 0, 0, 0.68);
}
.nav.open + .nav-links {
max-height: var(--menu-h, 70svh);
padding: 16px 12px 13px;
border-color: rgba(255, 255, 255, 0.24);
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%);
overflow: visible;
transition-delay: 0s;
}
/* Ledger rows: each link is a full-width row sitting directly on the
glass — no chip slabs. Separation comes from fading hairlines; the
active page floats as the one matte capsule. */
.nav.open + .nav-links a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 48px;
padding: 11px 14px;
font-size: 16px;
font-weight: 650;
letter-spacing: -0.008em;
color: rgba(255, 255, 255, 0.98);
border-radius: 14px;
border: 1px solid transparent;
background: transparent;
box-shadow: none;
opacity: 1;
transform: none;
}
/* rows cascade top-to-bottom as the droplet grows */
.nav.open + .nav-links a:nth-child(1) { transition-delay: 30ms; }
.nav.open + .nav-links a:nth-child(2) { transition-delay: 60ms; }
.nav.open + .nav-links a:nth-child(3) { transition-delay: 90ms; }
.nav.open + .nav-links a:nth-child(4) { transition-delay: 120ms; }
.nav.open + .nav-links a:nth-child(5) { transition-delay: 150ms; }
.nav.open + .nav-links a:nth-child(n + 6) { transition-delay: 180ms; }
/* fading hairline above every row but the first; suppressed around the
active capsule so it floats clean */
.nav.open + .nav-links a + a:not(.nav-mobile-cta)::before {
content: "";
position: absolute;
top: -1.5px;
left: 14px;
right: 14px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16) 22%, rgba(255, 255, 255, 0.16) 78%, transparent);
pointer-events: none;
}
.nav.open + .nav-links a.active::before,
.nav.open + .nav-links a.active + a::before { opacity: 0; }
.nav.open + .nav-links a.active {
color: var(--neon-green);
font-weight: 700;
border-color: transparent;
background: rgba(255, 255, 255, 0.13);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
/* The menu rows used to carry a much heavier text shadow than the desktop
row — that was written when the glass could land clear on a bright
section. Now that every glass surface dims its own backdrop, the heavy
shadow has nothing to fight and just reads as soot around the letters
over a light page. The row keeps the same breath of shadow the desktop
nav uses, and nothing more. */
.nav.open .nav-burger {
color: #F0EEFA;
background: transparent;
border-color: transparent;
box-shadow: none;
}
/* Keep keyboard focus visible without drawing a detached ring. A slight
surface lift remains inside the header bulb and does not add an edge. */
.nav-burger:focus-visible,
.nav.open .nav-burger:focus-visible {
outline: none;
color: #FFFFFF;
background: transparent;
box-shadow: none;
text-shadow: 0 0 9px rgba(255, 255, 255, 0.72);
}
.nav {
position: relative;
width: min(100%, 680px);
justify-content: space-between;
flex-wrap: nowrap;
overflow: visible;
/* burger-first layout: the round trigger hugs the left edge (its own
bulb provides the inset), the CTA keeps the wider breathing room on
the right */
padding: 7px 12px 7px 7px;
transition:
transform var(--motion-base) var(--ease-standard),
box-shadow var(--motion-base) ease,
background-color var(--motion-base) ease,
border-radius 220ms var(--ease-standard);
}
/* blur first so the bevel's contour survives it — see the nav rule */
html.lg-lens .nav.open + .nav-links.lens-ready {
backdrop-filter: blur(3.25px) url(#lg-lens-menu) saturate(1.4) brightness(var(--glass-dim));
-webkit-backdrop-filter: blur(3.25px) url(#lg-lens-menu) saturate(1.4) brightness(var(--glass-dim));
}
html.lg-lens .nav.open + .nav-links.lens-ready::after {
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.12),
inset 0 2.5px 2px -1px rgba(255, 255, 255, 0.44),
inset 0 -2.5px 2px -1px rgba(255, 255, 255, 0.24),
inset 0 0 22px -8px rgba(255, 255, 255, 0.2);
}
/* The compact header CTA was a matte capsule with the violet in the label.
That worked while the glass sat over dark stages, but on a light section
the dimmed backdrop and the pale violet label land close enough in
lightness that the button stops reading — so it keeps the same solid
violet fill the desktop CTA has, just at compact size. */
/* the pill is a fixed 680px shell, so space-between parked the CTA in the
dead centre and moved it with every viewport change — the auto margin
eats the free space instead, keeping the CTA docked to the burger */
/* The header CTA is NOT restyled below 1040px — it is the same
.btn.btn-primary.btn-sm the desktop header carries: same violet, same
label colour, same 13.5px/700 type, same 8px 17px padding, same 44px
box, same shadow, same :active dip. The only thing this rule does is
park it against the burger. Anything added here re-forks the control. */
.nav > .btn-primary { margin-left: auto; }
}
@media (max-width: 1040px) and (hover: hover) {
.nav.open + .nav-links a:not(.nav-mobile-cta):hover {
background: rgba(255, 255, 255, 0.08);
}
/* left over from the matte-capsule era — it flipped the header CTA back to
a pale chip on any hoverable device under 1040px */
.nav > .btn-primary:hover { transform: none; }
}
@media (max-width: 1040px) {
.nav.open + .nav-links a:not(.nav-mobile-cta):focus-visible {
outline: none;
background: rgba(255, 255, 255, 0.1);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.1),
0 0 0 2px rgba(255, 255, 255, 0.2);
}
}
@media (max-width: 520px) {
.nav-wrap {
top: max(6px, env(safe-area-inset-top, 0px));
padding-left: max(6px, env(safe-area-inset-left, 0px));
padding-right: max(6px, env(safe-area-inset-right, 0px));
}
.nav-wrap > .nav-links {
left: max(6px, env(safe-area-inset-left, 0px));
right: max(6px, env(safe-area-inset-right, 0px));
width: auto;
transform: translateY(-6px) scale(0.985);
}
.nav {
gap: 8px;
padding: 5px 9px 5px 5px;
background:
radial-gradient(120% 90% at var(--glass-light-x) var(--glass-light-y), rgba(255, 255, 255, 0.08), transparent 40%),
linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01) 55%, rgba(255, 255, 255, 0.04)),
var(--nav-fill);
border-color: rgba(255, 255, 255, 0.24);
box-shadow:
inset 0 2px 1px rgba(255, 255, 255, 0.32),
inset 0 -2px 2px rgba(255, 255, 255, 0.18),
0 20px 48px -18px rgba(0, 0, 0, 0.7);
}
.nav.open + .nav-links { transform: none; }
.nav::before {
background: conic-gradient(from 205deg,
rgba(255, 255, 255, 0.42),
rgba(255, 255, 255, 0.05) 20%,
rgba(255, 255, 255, 0.22) 43%,
rgba(255, 255, 255, 0.4) 53%,
rgba(255, 255, 255, 0.06) 77%,
rgba(255, 255, 255, 0.42));
}
/* the CTA stays on the header instead of hiding inside the menu — the full
label fits down to ~340px viewports, and below that the bulb rule takes
over. It keeps the DESKTOP button's exact metrics (btn-sm: 13.5px /
44px / 8px 17px) rather than a compacted variant, so the same control
does not read as a different component between the two layouts. */
.nav > .btn-primary {
flex: 0 0 auto;
margin-left: auto;
}
.nav-logo img { height: 18px; }
.nav-burger { flex: 0 0 38px; width: 38px; height: 38px; }
}
/* ultra-narrow phones: the label would squeeze the logo, so the CTA
compresses to a phone-glyph bulb, same size and matte language as the
burger. The link text is still in the DOM (font-size 0), so screen
readers keep the real name; gap zeroes out so the zero-width text node
doesn't offset the centered glyph. */
@media (max-width: 339px) {
.nav > .btn-primary {
flex: 0 0 38px;
width: 38px;
height: 38px;
min-height: 0;
padding: 0;
gap: 0;
font-size: 0;
border-radius: 50%;
}
.nav > .btn-primary::before {
content: "";
width: 16px;
height: 16px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24 11.36 11.36 0 0 0 3.57.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.36 11.36 0 0 0 .57 3.57 1 1 0 0 1-.25 1.02z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24 11.36 11.36 0 0 0 3.57.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.36 11.36 0 0 0 .57 3.57 1 1 0 0 1-.25 1.02z'/%3E%3C/svg%3E") center / contain no-repeat;
}
}
/* ---------- responsive coverflows ---------- */
@media (max-width: 720px) {
.testi-arrow { display: none; }
.testi-card[data-pos="-1"] { transform: translateX(-62%) scale(0.8); }
.testi-card[data-pos="1"] { transform: translateX(62%) scale(0.8); }
}
/* ---------- Client Stories: split short videos + YouTube library ---------- */
.tv-page {
background:
linear-gradient(180deg, var(--surface-section), var(--surface-page) 34%, var(--surface-page));
}
.tv-hero {
padding-top: var(--page-hero-top);
overflow: clip;
}
.tv-hero .hero-bg {
background:
radial-gradient(ellipse 56% 60% at 38% 0%, rgba(103, 73, 239, 0.28), transparent 68%),
radial-gradient(ellipse 44% 52% at 92% 36%, rgba(70, 48, 184, 0.24), transparent 70%);
}
.tv-page-head {
max-width: none;
margin-inline: auto;
margin-bottom: clamp(34px, 5vw, 64px);
text-align: center;
}
.tv-page-head .page-title { max-width: none; }
.tv-title-accent,
.page-title-accent { color: var(--neon-green); }
.tv-page-head .lead {
max-width: 680px;
}
.tv-split {
display: grid;
grid-template-columns: minmax(320px, 0.88fr) minmax(0, 1.18fr);
gap: clamp(34px, 5vw, 74px);
align-items: center;
}
.tv-column-head {
margin-bottom: 18px;
}
.tv-shorts-column,
.tv-featured-column {
min-width: 0;
}
.tv-shorts-stage {
position: relative;
height: clamp(430px, 60svh, 660px);
min-height: 430px;
overflow: hidden;
touch-action: pan-y;
}
.tv-short-card {
position: absolute;
top: 0;
left: 50%;
height: 100%;
aspect-ratio: 9 / 16;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--line-strong);
background: #151419;
cursor: pointer;
box-shadow: var(--shadow-card);
transition: transform 520ms var(--ease-expressive), opacity 320ms ease, border-color 320ms ease, box-shadow 320ms ease;
will-change: transform;
}
.tv-short-card video {
width: 100%;
height: 100%;
object-fit: cover;
}
.tv-short-card::after {
content: "";
position: absolute;
inset: 52% 0 0 0;
background: linear-gradient(180deg, transparent, rgba(16, 15, 17, 0.9));
z-index: 2;
pointer-events: none;
}
.tv-short-card[data-pos="0"] {
transform: translateX(-50%) scale(1);
z-index: 5;
border-color: rgba(133, 109, 242, 0.55);
box-shadow: var(--glow);
}
.tv-short-card[data-pos="-1"] {
transform: translateX(-118%) scale(0.82);
z-index: 3;
opacity: 0.46;
}
.tv-short-card[data-pos="1"] {
transform: translateX(18%) scale(0.82);
z-index: 3;
opacity: 0.46;
}
.tv-short-card[data-pos="-2"] {
transform: translateX(-172%) scale(0.68);
z-index: 1;
opacity: 0.2;
}
.tv-short-card[data-pos="2"] {
transform: translateX(72%) scale(0.68);
z-index: 1;
opacity: 0.2;
}
.tv-short-card[data-pos="-3"],
.tv-short-card[data-pos="3"] {
transform: translateX(-50%) scale(0.6);
opacity: 0;
pointer-events: none;
}
.tv-short-meta {
position: absolute;
left: 18px;
right: 18px;
bottom: 18px;
z-index: 3;
pointer-events: none;
}
.tv-short-meta span {
display: block;
margin-bottom: 7px;
color: var(--violet-media); /* over the short's video */
font-family: var(--font-label);
font-size: 11.5px;
letter-spacing: 0.14em;
}
.tv-short-meta strong {
display: block;
font-family: var(--font-display);
font-size: 16px;
font-weight: 700;
line-height: 1.24;
margin-bottom: 4px;
color: #fff;
}
.tv-short-meta p {
margin: 0;
color: rgba(255, 255, 255, 0.82);
font-size: 13.5px;
line-height: 1.35;
text-wrap: pretty;
}
.tv-short-mute {
position: absolute;
top: 14px;
right: 14px;
z-index: 4;
width: 44px;
height: 44px;
border-radius: 50%;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03) 60%),
rgba(16, 15, 17, 0.34);
backdrop-filter: blur(18px) saturate(1.7);
-webkit-backdrop-filter: blur(18px) saturate(1.7);
border: 1px solid rgba(255, 255, 255, 0.22);
color: #fff;
display: grid;
place-items: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity var(--motion-base) ease, background var(--motion-fast) ease, visibility 0s linear var(--motion-base);
}
.tv-short-card[data-pos="0"] .tv-short-mute {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition-delay: 0s;
}
.tv-short-mute:hover {
background: var(--violet);
}
.tv-short-mute span {
font-family: var(--font-display);
font-size: 15px;
line-height: 1;
}
.tv-short-mute .ic-sound-on {
display: none;
}
.tv-short-card.sound-on .ic-sound-on {
display: block;
}
.tv-short-card.sound-on .ic-sound-off {
display: none;
}
.tv-short-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin-top: 20px;
}
.tv-short-arrow {
width: 48px;
height: 48px;
border-radius: 50%;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02) 60%),
rgba(30, 29, 34, 0.5);
backdrop-filter: blur(20px) saturate(1.7);
-webkit-backdrop-filter: blur(20px) saturate(1.7);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
cursor: pointer;
font-size: 17px;
transition: background 0.2s ease, border-color 0.2s ease;
}
.tv-short-arrow:hover {
background: var(--violet);
border-color: var(--violet);
}
.tv-short-dots {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
}
.tv-short-dots button {
width: 8px;
height: 8px;
box-sizing: content-box;
border: 8px solid transparent;
border-radius: 999px;
background: var(--line-strong);
background-clip: padding-box;
cursor: pointer;
padding: 0;
transition: width 0.28s ease, background-color 0.28s ease;
}
.tv-short-dots button.on {
width: 26px;
background-color: var(--violet);
}
.tv-youtube-feature {
display: grid;
gap: 18px;
}
/* the featured episode alone in the hero, big like the home-page player —
the shorts moved to the home coverflow, so the hero is the episode */
.tv-featured-column--wide {
max-width: min(1060px, 100%);
margin: clamp(8px, 2vw, 20px) auto 0;
}
.tv-featured-column--wide .tv-column-head { text-align: center; }
.tv-youtube-player {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: var(--radius-lg);
border: 1px solid var(--line-strong);
background: #0B0A0C;
box-shadow: var(--shadow-card);
}
.tv-youtube-player iframe,
.tv-youtube-player img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.tv-youtube-player img {
object-fit: cover;
}
.tv-player-loading {
min-height: 100%;
display: grid;
place-items: center;
color: var(--fg-2);
font-family: var(--font-label);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.tv-player-cover {
position: absolute;
inset: 0;
border: 0;
padding: 0;
background: transparent;
color: #fff;
cursor: pointer;
}
.tv-player-cover::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(16, 15, 17, 0.04), rgba(16, 15, 17, 0.58));
pointer-events: none;
}
.tv-player-play {
position: absolute;
left: 50%;
top: 50%;
z-index: 2;
width: clamp(62px, 7vw, 86px);
height: clamp(62px, 7vw, 86px);
transform: translate(-50%, -50%);
border-radius: 50%;
display: grid;
place-items: center;
background: rgba(103, 73, 239, 0.9);
box-shadow: 0 18px 50px rgba(103, 73, 239, 0.38);
font-size: 24px;
text-indent: 3px;
}
.tv-youtube-current {
display: grid;
gap: 6px;
}
.tv-youtube-current span {
color: var(--fg-3);
font-family: var(--font-label);
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.tv-youtube-current h3 {
margin: 0;
font-family: var(--font-display);
font-size: clamp(20px, 2.2vw, 28px);
font-weight: 700;
line-height: 1.18;
text-wrap: balance;
}
.tv-youtube-section .section-head {
margin-bottom: 24px;
}
.tv-youtube-status {
min-height: 22px;
margin-bottom: 22px;
color: var(--fg-3);
font-family: var(--font-label);
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* first three rows by default; "Покажи още" reveals the archive */
.tv-youtube-grid:not(.show-all) .tv-card-extra { display: none; }
.tv-grid-more { margin-top: clamp(22px, 3vw, 34px); text-align: center; }
.tv-youtube-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.tv-youtube-card {
min-width: 0;
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
background: var(--surface-card);
color: var(--fg-1);
text-align: left;
padding: 0;
cursor: pointer;
transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.tv-youtube-card:hover,
.tv-youtube-card.on {
transform: translateY(-4px);
border-color: rgba(192, 232, 61, 0.36);
background: var(--surface-card-on-section);
}
.tv-youtube-thumb {
display: block;
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #0B0A0C;
}
.tv-youtube-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.35s ease;
}
.tv-youtube-card:hover .tv-youtube-thumb img {
transform: scale(1.04);
}
.tv-duration {
position: absolute;
right: 10px;
bottom: 10px;
z-index: 2;
border-radius: 999px;
background: rgba(16, 15, 17, 0.82);
color: #fff;
font-family: var(--font-label);
font-size: 11.5px;
line-height: 1;
padding: 7px 9px;
}
.tv-card-play {
position: absolute;
left: 12px;
bottom: 10px;
z-index: 2;
width: 34px;
height: 34px;
border-radius: 50%;
display: grid;
place-items: center;
background: rgba(103, 73, 239, 0.92);
color: #fff;
font-size: 13px;
text-indent: 2px;
}
.tv-youtube-body {
display: block;
padding: 16px 16px 18px;
}
.tv-youtube-title {
display: block;
margin: 0 0 10px;
font-family: var(--font-display);
font-size: 16px;
font-weight: 700;
line-height: 1.25;
text-wrap: pretty;
}
.tv-youtube-meta {
display: block;
margin: 0;
color: var(--fg-3);
font-family: var(--font-label);
font-size: 11.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.tv-modal-open {
overflow: hidden;
}
.tv-video-layer {
position: fixed;
inset: 0;
z-index: 240;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity var(--motion-base) ease, visibility 0s linear var(--motion-base);
}
.tv-video-layer.open,
.tv-video-layer.mini {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition-delay: 0s;
}
.tv-video-backdrop {
position: absolute;
inset: 0;
border: 0;
padding: 0;
background: rgba(16, 15, 17, 0.74);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
cursor: pointer;
}
.tv-video-shell {
position: absolute;
left: 50%;
top: 50%;
width: min(1120px, calc(100vw - 40px));
max-height: calc(100svh - 32px);
transform: translate(-50%, -50%);
border: 1px solid var(--line-strong);
border-radius: var(--radius-lg);
overflow: hidden;
background: #0B0A0C;
box-shadow: 0 34px 100px rgba(0, 0, 0, 0.62);
opacity: 0;
scale: 0.985;
transition: opacity var(--motion-base) ease, scale 320ms var(--ease-expressive);
}
.tv-video-layer.open .tv-video-shell,
.tv-video-layer.mini .tv-video-shell { opacity: 1; scale: 1; }
.tv-video-side {
position: absolute;
top: calc(50% + 35px);
z-index: 4;
width: 54px;
height: 54px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.2);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03) 65%),
rgba(16, 15, 17, 0.66);
backdrop-filter: blur(20px) saturate(1.7);
-webkit-backdrop-filter: blur(20px) saturate(1.7);
box-shadow: 0 14px 42px rgba(0, 0, 0, 0.34);
color: #fff;
cursor: pointer;
font-size: 20px;
transform: translateY(-50%);
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.tv-video-side:hover {
background: var(--violet);
border-color: var(--violet);
transform: translateY(-50%) scale(1.04);
}
.tv-video-side-prev {
left: 16px;
}
.tv-video-side-next {
right: 16px;
}
.tv-video-topbar {
min-height: 70px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 16px 18px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02) 70%),
var(--surface-section);
border-bottom: 1px solid var(--line);
}
.tv-video-topbar > div:first-child { min-width: 0; }
.tv-video-topbar span {
display: block;
margin-bottom: 4px;
color: var(--fg-3);
font-family: var(--font-label);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.tv-video-topbar strong {
display: block;
font-family: var(--font-display);
font-size: clamp(15px, 1.5vw, 20px);
font-weight: 700;
line-height: 1.22;
}
.tv-video-actions {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 8px;
}
.tv-video-control {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.08);
color: #fff;
cursor: pointer;
display: grid;
place-items: center;
font-size: 17px;
font-weight: 700;
line-height: 1;
transition: background 0.2s ease, border-color 0.2s ease;
}
.tv-video-control:hover {
background: var(--violet);
border-color: var(--violet);
}
[data-theme="light"] .tv-video-control {
border-color: rgba(16, 15, 17, 0.16);
background: rgba(16, 15, 17, 0.06);
color: var(--fg-1);
}
[data-theme="light"] .tv-video-control:hover { color: #fff; }
.tv-video-restore {
display: none;
}
.tv-video-frame {
position: relative;
aspect-ratio: 16 / 9;
background: #000;
background-position: center;
background-size: cover;
transition: opacity var(--motion-fast) ease;
}
.tv-video-frame.is-switching { opacity: 0.35; }
.tv-video-frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
opacity: 1;
transition: opacity var(--motion-base) ease;
}
.tv-video-frame.is-loading iframe { opacity: 0; }
.tv-video-layer.mini {
inset: auto;
right: clamp(14px, 3vw, 34px);
bottom: clamp(14px, 3vw, 34px);
width: min(420px, calc(100vw - 28px));
height: auto;
}
.tv-video-layer.mini .tv-video-backdrop {
display: none;
}
.tv-video-layer.mini .tv-video-shell {
position: relative;
left: auto;
top: auto;
width: 100%;
transform: none;
max-height: none;
border-radius: var(--radius);
box-shadow: 0 22px 70px rgba(0, 0, 0, 0.58);
}
.tv-video-layer.mini .tv-video-side {
display: none;
}
.tv-video-layer.mini .tv-video-topbar {
min-height: 48px;
padding: 9px 10px 9px 13px;
}
.tv-video-layer.mini .tv-video-topbar span {
display: none;
}
.tv-video-layer.mini .tv-video-topbar strong {
max-width: 250px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-family: var(--font-body);
font-size: 13.5px;
font-weight: 800;
}
.tv-video-layer.mini .tv-video-control {
width: 34px;
height: 34px;
font-size: 15px;
}
.tv-video-layer.mini [data-tv-video-minimize] {
display: none;
}
.tv-video-layer.mini .tv-video-restore {
display: inline-grid;
place-items: center;
}
@media (max-width: 1080px) {
.tv-split {
grid-template-columns: 1fr;
}
.tv-shorts-stage {
max-width: 620px;
margin: 0 auto;
}
.tv-youtube-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.tv-hero {
padding-top: var(--mobile-hero-clearance);
}
.tv-shorts-stage {
height: min(78svh, 560px);
min-height: 420px;
}
.tv-short-card[data-pos="-1"] {
transform: translateX(-106%) scale(0.78);
}
.tv-short-card[data-pos="1"] {
transform: translateX(6%) scale(0.78);
}
.tv-short-card[data-pos="-2"],
.tv-short-card[data-pos="2"] {
opacity: 0;
pointer-events: none;
}
.tv-short-arrow {
width: 44px;
height: 44px;
}
.tv-youtube-grid {
grid-template-columns: 1fr;
}
.tv-youtube-body {
padding: 15px;
}
.tv-video-shell {
width: calc(100vw - 24px);
display: flex;
flex-wrap: wrap;
}
.tv-video-topbar {
flex: 0 0 100%;
order: 1;
min-height: 64px;
padding: 13px;
}
.tv-video-frame {
flex: 0 0 100%;
order: 2;
}
.tv-video-side {
position: static;
order: 3;
flex: 1 1 0;
height: 48px;
margin: 12px 6px 14px;
border-radius: 14px;
box-shadow: none;
transform: none;
}
.tv-video-side-prev {
left: auto;
margin-left: 14px;
}
.tv-video-side-next {
right: auto;
margin-right: 14px;
}
.tv-video-side:hover {
transform: scale(1.04);
}
.tv-video-layer.mini {
right: 10px;
bottom: 10px;
width: calc(100vw - 20px);
}
.tv-video-layer.mini .tv-video-topbar strong {
max-width: calc(100vw - 170px);
}
}
@media (max-width: 360px) {
.tv-short-controls {
flex-wrap: wrap;
row-gap: 8px;
}
.tv-short-dots {
flex: 0 0 100%;
order: -1;
}
.tv-short-arrow {
flex: 0 0 44px;
}
}
@media (orientation: landscape) and (max-height: 520px) {
.tv-video-shell {
width: min(118vh, calc(100vw - 88px));
width: min(118svh, calc(100vw - 88px));
max-height: calc(100svh - 20px);
display: block;
}
.tv-video-topbar {
min-height: 0;
padding: 9px 12px;
}
.tv-video-topbar span { display: none; }
.tv-video-topbar strong {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
font-size: 14px;
}
.tv-video-side {
position: absolute;
top: calc(50% + 28px);
width: 42px;
height: 42px;
margin: 0;
border-radius: 50%;
transform: translateY(-50%);
}
.tv-video-side-prev { left: 8px; }
.tv-video-side-next { right: 8px; }
.tv-video-side:hover { transform: translateY(-50%) scale(1.04); }
}
/* ============================================================
Integrations page — partner / service catalog
(integrations.html; static .int-card markup)
============================================================ */
/* ---- ecosystem intro panel: editorial statement + three pillar columns on
a white card that overlaps the dark hero band (prices-page idiom).
Head is a two-column editorial spread (headline left, lead right on the
shared baseline); pillars are OPEN columns split by hairlines — no boxes
in a box — each an anchor into its numbered section below.
Icons are inline stroke SVGs (currentColor) — no asset requests, no
broken-image risk, and they inherit the theme automatically. ---- */
.eco-panel {
position: relative;
max-width: 1120px;
margin-inline: auto;
padding: clamp(22px, 3vw, 42px) clamp(20px, 3.2vw, 48px) clamp(6px, 1vw, 14px);
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background:
radial-gradient(80% 55% at 16% 0%, var(--violet-ghost), transparent 70%),
var(--surface-card);
box-shadow: var(--shadow-card);
overflow: hidden;
}
/* violet accent bar on the top edge (stat-strip idiom) */
.eco-panel::before {
content: "";
position: absolute;
top: -1px;
left: 50%;
transform: translateX(-50%);
height: 2px;
width: 180px;
border-radius: 999px;
background: linear-gradient(90deg, transparent, var(--violet-hot), transparent);
z-index: 1;
}
/* dot-grid texture dissolving in from the top-right corner — quiet echo of
the index stage floor */
.eco-panel::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: radial-gradient(circle, var(--line-strong) 1px, transparent 1.4px);
background-size: 24px 24px;
-webkit-mask-image: radial-gradient(56% 52% at 88% 0%, #000 25%, transparent 78%);
mask-image: radial-gradient(56% 52% at 88% 0%, #000 25%, transparent 78%);
}
.eco-head {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
gap: clamp(18px, 2.6vw, 48px);
align-items: end;
padding-bottom: clamp(18px, 2.4vw, 30px);
border-bottom: 1px solid var(--line);
}
/* the panel headline sits a step below the page's section scale — the panel
is an index card, not a chapter opener */
.eco-head .h-lg { font-size: clamp(25px, 2.9vw, 38px); }
.eco-head .lead { margin: 0 0 5px; font-size: clamp(15.5px, 1.3vw, 17.5px); line-height: 1.6; }
.eco-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.eco-cell {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
padding: clamp(18px, 2.4vw, 26px) clamp(16px, 2.2vw, 28px) clamp(16px, 2vw, 24px);
text-decoration: none;
color: inherit;
}
.eco-cell:first-child { padding-left: 0; }
.eco-cell:last-child { padding-right: 0; }
.eco-cell + .eco-cell { border-left: 1px solid var(--line); }
/* soft spotlight pools under the pointer's column */
.eco-cell::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(64% 52% at 50% 0%, var(--violet-ghost), transparent 76%);
opacity: 0;
transition: opacity 0.35s ease;
pointer-events: none;
}
.eco-cell:hover::after,
.eco-cell:focus-visible::after { opacity: 1; }
.eco-cell:focus-visible { outline: 2px solid var(--violet-hot); outline-offset: -2px; border-radius: 14px; }
.eco-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
.eco-num {
font-family: var(--font-label);
font-size: 11.5px;
letter-spacing: 0.16em;
color: var(--fg-3);
transition: color 0.25s ease;
}
.eco-cell:hover .eco-num { color: var(--violet-hot); }
/* quiet hairline chip — outline only at rest, ink pools in on hover */
.eco-icon {
width: 36px;
height: 36px;
border-radius: 11px;
display: grid;
place-items: center;
color: var(--violet-hot);
background: transparent;
border: 1px solid color-mix(in srgb, var(--violet) 28%, transparent);
transition: transform 0.25s var(--ease-standard), border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}
.eco-icon svg { width: 19px; height: 19px; display: block; }
.eco-cell:hover .eco-icon {
transform: translateY(-2px);
border-color: var(--violet-hot);
background: var(--violet-ghost);
box-shadow: 0 0 18px -6px rgba(103, 73, 239, 0.5);
}
.eco-title { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.eco-arr {
color: var(--fg-3);
font-weight: 400;
transition: transform 0.25s var(--ease-standard), color 0.25s ease;
}
.eco-cell:hover .eco-arr { color: var(--violet-hot); transform: translateX(4px); }
.eco-cell p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--fg-2); }
/* pillar anchors land clear of the floating nav */
#hype, #menus, #payments { scroll-margin-top: 96px; }
/* columns cascade in as the panel's reveal lands (stat-strip idiom) */
.eco-cell {
transition:
opacity 0.6s var(--ease-standard) var(--cell-d, 0s),
transform 0.7s var(--ease-expressive) var(--cell-d, 0s);
}
.eco-cell:nth-child(2) { --cell-d: 0.09s; }
.eco-cell:nth-child(3) { --cell-d: 0.18s; }
html.anim-ready .eco-panel.reveal:not(.in) .eco-cell { opacity: 0; transform: translateY(18px); }
@media (max-width: 960px) {
.eco-panel { padding-bottom: clamp(10px, 2vw, 16px); }
.eco-head { grid-template-columns: 1fr; gap: 12px; align-items: start; }
.eco-head .lead { margin-bottom: 0; }
.eco-grid { grid-template-columns: 1fr; }
/* each pillar flattens into a tappable list row — icon rail on the left,
copy beside it, number at the trailing edge. Reads as navigation, not
as three stacked squares. */
.eco-cell {
display: grid;
grid-template-columns: 38px minmax(0, 1fr) auto;
grid-template-rows: auto auto;
column-gap: 14px;
align-items: start;
padding: 15px 0 13px;
}
.eco-cell + .eco-cell { border-left: 0; border-top: 1px solid var(--line); }
.eco-top { display: contents; }
.eco-icon { grid-column: 1; grid-row: 1 / span 2; width: 38px; height: 38px; margin-top: 2px; }
.eco-icon svg { width: 18px; height: 18px; }
.eco-num { grid-column: 3; grid-row: 1; align-self: center; }
.eco-title { grid-column: 2; grid-row: 1; margin: 0; }
.eco-cell p { grid-column: 2; grid-row: 2; margin: 5px 0 0; }
}
/* ---- card video tiles: a square, muted preview that opens the full 9:16 ----
Poster-only at rest (preload: none), previews muted on hover / when centred
on touch, and opens the portrait lightbox with sound on click. The square
crop keeps the grid rhythm; the lightbox is where the clip is actually
watched, so nothing important lives in the cropped edges. */
.eco-video {
position: relative;
display: block;
width: 100%;
aspect-ratio: 1 / 1;
margin: 0 0 18px;
padding: 0;
border: 1px solid var(--line-strong);
border-radius: var(--radius);
overflow: hidden;
background: #151419;
cursor: pointer;
transition: border-color var(--motion-base) ease, box-shadow var(--motion-base) ease;
}
.eco-video video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.9) saturate(0.95);
transition: filter 420ms ease, transform 620ms var(--ease-expressive);
}
.eco-video::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(16, 15, 17, 0.55), transparent 30%,
transparent 62%, rgba(16, 15, 17, 0.78));
pointer-events: none;
}
.eco-video:hover,
.eco-video:focus-visible {
border-color: rgba(133, 109, 242, 0.55);
box-shadow: var(--glow);
outline: none;
}
.eco-video:hover video,
.eco-video:focus-visible video,
.eco-video.is-live video { filter: brightness(1) saturate(1); transform: scale(1.04); }
.eco-video-play {
position: absolute;
left: 13px;
top: 13px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px 8px 11px;
border-radius: 999px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 60%),
rgba(16, 15, 17, 0.38);
backdrop-filter: blur(18px) saturate(1.8);
-webkit-backdrop-filter: blur(18px) saturate(1.8);
border: 1px solid rgba(255, 255, 255, 0.24);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
color: #fff;
font-family: var(--font-label);
font-size: 11.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: background var(--motion-fast) ease;
}
.eco-video-play svg { width: 13px; height: 13px; display: block; }
.eco-video:hover .eco-video-play { background: var(--violet); border-color: var(--violet); }
/* ---- the guest's phone: triptych centrepiece ----
Where every card owns a clip (the hype services), the tile belongs IN the
card. Here one clip serves two partners, so it stands BETWEEN them as the
subject both flank: the footage of a guest ordering plays inside the
site's machined phone bezel (the flow-story idiom), taller than the
cards, dead centre. The composition needs it — remove the phone and the
row collapses — so it cannot read as an add-on, and mirrored cards keep
the partners exactly equal. Zero copy added. */
#menus .int-grid--wide {
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
justify-items: stretch;
}
.eco-guest-phone {
margin: 0;
height: clamp(360px, 32vw, 470px);
justify-self: center;
}
.eco-video--screen {
width: 100%;
height: 100%;
aspect-ratio: auto;
margin: 0;
border: 0;
border-radius: 21px;
background: #0E0D10;
}
.eco-video--screen:hover,
.eco-video--screen:focus-visible { box-shadow: none; }
.eco-video--screen .eco-video-play { left: 10px; top: 10px; padding: 7px 12px 7px 10px; font-size: 10.5px; }
/* stacked fallback (no pinned deck yet): phone rides between the cards */
@media (max-width: 860px) {
#menus .int-grid--wide { grid-template-columns: minmax(0, 1fr); }
.eco-guest-phone { height: clamp(320px, 60vw, 400px); }
}
/* ---- catalog grids ---- */
.int-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
gap: 18px;
}
.int-grid--wide { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
/* ---- partner / service card ---- */
.int-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--surface-card);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: clamp(22px, 3vw, 30px);
overflow: hidden;
transition: border-color 0.25s ease, transform 0.25s ease;
}
.section-alt .int-card { background: var(--surface-card-on-section); }
.int-card--hype,
.section-alt .int-card--hype {
background: linear-gradient(160deg, rgba(103, 73, 239, 0.1), transparent 70%), var(--surface-brand-tint);
}
.int-card:hover {
border-color: rgba(103, 73, 239, 0.45);
}
/* cursor-tracked spotlight (--mx/--my set by hype.js on pointermove) */
.int-card::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(230px circle at var(--mx, 50%) var(--my, 20%),
rgba(133, 109, 242, 0.13), transparent 65%);
opacity: 0;
transition: opacity 0.35s ease;
pointer-events: none;
}
.int-card:hover::before { opacity: 1; }
/* violet sweep along the top edge on hover */
.int-card::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--violet-hot) 45%, transparent 95%);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.int-card:hover::after { transform: scaleX(1); }
.int-head {
min-height: 36px;
display: flex;
align-items: center;
margin-bottom: 10px;
}
.int-head--stack {
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.int-brand {
font-family: var(--font-display);
font-weight: 700;
font-size: 21.5px;
color: var(--fg-1);
}
.int-brand .int-accent { color: var(--violet-hot); }
#hype .int-brand .int-accent { color: var(--neon-green); }
.int-brand .int-dim { color: var(--fg-2); font-weight: 500; }
.int-brand .int-thin { font-weight: 400; }
/* Second level of the card ladder: the brand line is the 21.5px/700 title,
so the subtitle steps down to a regular weight (16px/500) and hugs the
title, while the bullets keep their distance — three clearly separate
levels instead of two near-identical bold lines (UX-review point 3). */
.int-title {
margin-bottom: 18px;
color: var(--fg-1);
font-size: 16px;
font-weight: 500;
line-height: 1.42;
}
/* .int-body wraps the expandable half of a card (title + points) so the
phone accordion can animate it shut; on desktop it dissolves into the
card's flex flow and changes nothing */
.int-body,
.int-body-in { display: contents; }
.int-points {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
}
.int-points li {
display: flex;
gap: 10px;
color: var(--fg-2);
font-size: 14.5px;
}
.int-points li::before {
content: "✓";
color: var(--violet-hot);
font-weight: 700;
flex-shrink: 0;
}
/* checkmarks cascade in once the card's reveal lands */
.int-card.in .int-points li { animation: int-pt-in 0.45s cubic-bezier(0.2, 0.8, 0.25, 1) backwards; }
.int-card.in .int-points li:nth-child(1) { animation-delay: 0.3s; }
.int-card.in .int-points li:nth-child(2) { animation-delay: 0.4s; }
.int-card.in .int-points li:nth-child(3) { animation-delay: 0.5s; }
@keyframes int-pt-in {
from { opacity: 0; transform: translateX(-9px); }
to { opacity: 1; transform: translateX(0); }
}
/* deeper reveal for cards: rise + blur + settle (used with .reveal) */
.reveal-lift {
transition: opacity var(--motion-reveal) ease,
transform var(--motion-reveal) var(--ease-expressive);
}
html.anim-ready .reveal.reveal-lift:not(.in) {
opacity: 0;
transform: translateY(18px) scale(0.99);
}
/* ---- idea-collection panel ---- */
.idea-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(28px, 4vw, 56px);
align-items: center;
background: linear-gradient(135deg, rgba(103, 73, 239, 0.1), transparent 60%), var(--surface-card);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: clamp(26px, 4vw, 48px);
}
@media (max-width: 760px) {
.idea-wrap { grid-template-columns: 1fr; }
}
.idea-form { display: grid; gap: 14px; }
.idea-form .field { margin: 0; }
/* honour reduced motion */
@media (prefers-reduced-motion: reduce) {
.marquee-inner { animation: none; }
.int-card.in .int-points li { animation: none; }
}
/* ============================================================
Theme depth + logo swap (light-theme polish)
--card-shadow is `none` in dark, so these rules are inert there
and only add elevation on light, where flat cards read cheap.
============================================================ */
.feature-card,
.price-card,
.faq-item,
.form-panel,
.cta-band,
.stat-strip,
.shot-card,
.tv-youtube-card,
.int-card {
box-shadow: var(--card-shadow);
}
.feature-card:hover,
.int-card:hover,
.tv-youtube-card:hover,
.tv-youtube-card.on {
box-shadow: var(--card-shadow-hover);
}
/* official logo variants per the brand guidelines: the Light logo (violet
"hype" + white "software") lives on dark surfaces, the Dark logo (violet
"hype" + black "software") on light surfaces. Two ![]()
s swapped per theme —
never a filter, which would flatten the two-colour mark. */
.logo-on-light { display: none; }
[data-theme="light"] .logo-on-dark { display: none; }
[data-theme="light"] .logo-on-light { display: block; }
/* inside a .theme-dark zone the surface is dark even in the light theme,
so the swap re-flips — the Light logo variant is the readable one there */
[data-theme="light"] .theme-dark .logo-on-dark { display: block; }
[data-theme="light"] .theme-dark .logo-on-light { display: none; }
/* The floating navigation is always a dark surface, independent of the page
theme, so every page's nav uses the all-white logo lockup directly. */
/* Ecosystem coverflows reuse the home page's centre-focus carousel language:
one dominant card, two dimmed wings, glass arrows, and the same active pill
in the dot rail. The cards keep their original content and media behavior. */
.ecosystem-stage {
overflow-x: clip;
overflow-y: visible;
}
.ecosystem-page .ecosystem-band .section-head {
margin-inline: auto;
text-align: center;
}
[data-theme="light"] .ecosystem-band.ecosystem-band--first::before {
content: "" !important;
top: 0;
height: 2px;
z-index: 4;
background: linear-gradient(90deg, transparent 5%, var(--violet-hot) 50%, transparent 95%);
box-shadow: 0 0 22px rgba(103, 73, 239, 0.58);
}
/* Adaptive height: the stage follows the FOCUSED card (js sets
--eco-focus-h per slide, carousel-standard "adaptiveHeight"), so the
breathing room above and below the deck is always the one padding value —
on every slide of every section. Sizing from the tallest card instead
would pool the leftover space around shorter slides and the dots would
drift per slide (UX-review point 4). Height changes glide on the same
curve as the card shuffle. */
.eco-coverflow-stage {
position: relative;
--eco-stage-pad: clamp(18px, 2vw, 26px);
height: calc(var(--eco-focus-h, 540px) + 2 * var(--eco-stage-pad));
transition: height 520ms var(--ease-expressive);
isolation: isolate;
touch-action: pan-y;
}
.eco-coverflow-card {
position: absolute;
left: 50%;
top: 50%;
margin: 0;
max-width: calc(100% - 112px);
cursor: pointer;
transition:
transform 520ms var(--ease-expressive),
opacity 360ms ease,
filter 360ms ease,
box-shadow 360ms ease,
border-color 360ms ease;
will-change: transform;
}
#hype .eco-coverflow-card { width: clamp(290px, 28vw, 380px); }
#menus .eco-coverflow-card.int-card {
width: clamp(300px, 31vw, 420px);
min-height: 360px;
justify-content: center;
}
#menus .eco-guest-phone {
width: auto;
max-width: none;
height: clamp(500px, 42vw, 590px);
}
@media (min-width: 721px) {
#menus .eco-coverflow-card {
width: clamp(320px, 31vw, 420px);
height: clamp(390px, 31vw, 430px);
}
#menus .eco-coverflow-card.int-card { min-height: 0; }
#menus .eco-guest-phone {
max-width: calc(100% - 112px);
aspect-ratio: auto;
padding: 8px;
border-radius: var(--radius-lg);
}
#menus .eco-guest-phone::before { border-radius: calc(var(--radius-lg) - 6px); }
#menus .eco-video--screen { border-radius: calc(var(--radius-lg) - 8px); }
#menus .eco-video--screen video {
object-fit: cover;
object-position: 50% 46%;
}
}
#payments .eco-coverflow-card {
width: clamp(300px, 32vw, 430px);
min-height: 310px;
justify-content: center;
}
.eco-coverflow-card[data-pos="0"] {
z-index: 3;
opacity: 1;
filter: none;
transform: translate(-50%, -50%) scale(1);
border-color: rgba(133, 109, 242, 0.58);
box-shadow: var(--glow);
}
.eco-coverflow-card[data-pos="-1"],
.eco-coverflow-card[data-pos="1"] {
z-index: 2;
opacity: 0.82;
filter: brightness(0.74) saturate(0.72);
box-shadow: 0 18px 44px -18px rgba(16, 15, 17, 0.38);
}
.eco-coverflow-card[data-pos="-1"] { transform: translate(calc(-50% - 78%), -50%) scale(0.86); }
.eco-coverflow-card[data-pos="1"] { transform: translate(calc(-50% + 78%), -50%) scale(0.86); }
.eco-coverflow-card[data-pos="hidden-left"],
.eco-coverflow-card[data-pos="hidden-right"] {
z-index: 1;
opacity: 0;
pointer-events: none;
}
.eco-coverflow-card[data-pos="hidden-left"] { transform: translate(calc(-50% - 96%), -50%) scale(0.72); }
.eco-coverflow-card[data-pos="hidden-right"] { transform: translate(calc(-50% + 96%), -50%) scale(0.72); }
.eco-coverflow-card:not([data-pos="0"]) [data-eco-video] { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
.eco-coverflow-stage { transition: none; }
}
.eco-coverflow-dots { margin-top: clamp(10px, 1.7vw, 20px); }
@media (max-width: 720px) {
.ecosystem-band .section-head { margin-bottom: 20px; }
.ecosystem-band .section-head .h-lg { font-size: clamp(22px, 6.4vw, 27px); }
.ecosystem-band .section-head .lead { font-size: 14.5px; }
.eco-coverflow-card { max-width: none; }
.eco-coverflow-stage { --eco-stage-pad: 16px; }
#hype .eco-coverflow-card {
width: min(82vw, 328px);
padding: 18px 20px;
}
#menus .eco-coverflow-card.int-card {
width: min(82vw, 328px);
min-height: 350px;
padding: 18px 20px;
}
#menus .eco-guest-phone { height: min(64svh, 420px); }
#payments .eco-coverflow-card {
width: min(82vw, 328px);
min-height: 290px;
padding: 18px 20px;
}
.eco-coverflow-card[data-pos="-1"] { transform: translate(calc(-50% - 64%), -50%) scale(0.82); }
.eco-coverflow-card[data-pos="1"] { transform: translate(calc(-50% + 64%), -50%) scale(0.82); }
.eco-coverflow-stage .testi-arrow { display: none; }
.eco-coverflow-dots {
min-height: 25px;
margin-top: 10px;
align-items: center;
}
.eco-coverflow-dots button.on { background-color: var(--neon-green); }
}
/* All mobile page openings clear the same floating header. This shared
rhythm stops the hero copy from jumping vertically between routes. */
@media (max-width: 720px) {
.page-hero,
.tv-hero { padding-top: var(--mobile-hero-clearance); }
}
@media (prefers-reduced-motion: reduce) {
html.anim-ready .reveal:not(.in),
html.anim-ready .reveal.reveal-lift:not(.in) {
opacity: 1;
transform: none;
filter: none;
}
.faq-item[open] .faq-body,
.int-card.in .int-points li { animation: none !important; }
.testi-card,
.tv-short-card,
.nav,
.nav-links,
.nav-links a,
.nav-burger,
.nav-burger::before,
.nav-burger-box span,
.tv-video-shell { transition: none !important; }
}
/* ---------- legal pages (Общи условия, Политика за поверителност) ----------
Long statutory text is the opposite of the rest of the site: nobody scrolls
it for delight, they scan it for one clause. So the page optimises for
findability — a sticky contents rail on desktop, generous measure, and
section headings that read as anchors rather than marketing type. */
.page-hero--short { padding-bottom: clamp(36px, 4vw, 56px); }
.legal-layout {
display: grid;
grid-template-columns: 236px minmax(0, 1fr);
gap: clamp(32px, 5vw, 72px);
align-items: start;
}
.legal-toc {
position: sticky;
top: 108px;
max-height: calc(100vh - 140px);
overflow-y: auto;
overscroll-behavior: contain;
padding-right: 8px;
border-left: 1px solid var(--line);
padding-left: 18px;
}
.legal-toc-title {
font-family: var(--font-label);
font-size: 11.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--fg-3);
margin: 0 0 14px;
}
.legal-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; counter-reset: toc; }
.legal-toc a {
color: var(--fg-2);
font-size: 13.5px;
line-height: 1.45;
font-weight: 500;
display: block;
transition: color 0.18s ease, transform 0.18s ease;
}
.legal-toc a:hover { color: var(--violet-hot); transform: translateX(2px); }
/* scrollbar on the rail should not draw attention away from the text */
.legal-toc::-webkit-scrollbar { width: 4px; }
.legal-toc::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
.legal { max-width: 74ch; }
.legal p { margin: 0 0 16px; color: var(--fg-2); font-size: 15.5px; line-height: 1.72; text-wrap: pretty; }
.legal p:last-child { margin-bottom: 0; }
.legal strong { color: var(--fg-1); font-weight: 700; }
.legal a { color: var(--violet-hot); text-decoration: underline; text-underline-offset: 3px; }
.legal-intro { font-size: 17px !important; color: var(--fg-1) !important; font-weight: 600; line-height: 1.6 !important; }
.legal-version { font-family: var(--font-label); font-size: 13px !important; color: var(--fg-3) !important; margin-bottom: 8px !important; }
.legal h2 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(21px, 2.2vw, 26px);
line-height: 1.25;
color: var(--fg-1);
margin: 56px 0 20px;
padding-top: 28px;
border-top: 1px solid var(--line);
scroll-margin-top: 104px;
}
.legal > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-razdel {
display: block;
font-family: var(--font-label);
font-size: 11.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--violet-hot);
margin-bottom: 8px;
font-weight: 400;
}
.legal h3 {
font-family: var(--font-display);
font-weight: 700;
font-size: 16.5px;
color: var(--fg-1);
margin: 32px 0 12px;
scroll-margin-top: 104px;
}
.legal h2 + h3 { margin-top: 0; }
.legal ul {
margin: 0 0 18px;
padding: 0;
list-style: none;
display: grid;
gap: 10px;
}
.legal ul li {
position: relative;
padding-left: 22px;
color: var(--fg-2);
font-size: 15.5px;
line-height: 1.7;
}
.legal ul li::before {
content: "";
position: absolute;
left: 4px;
top: 11px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--violet-hot);
opacity: 0.75;
}
.legal-foot {
margin-top: 48px !important;
padding-top: 24px;
border-top: 1px solid var(--line);
font-size: 14.5px !important;
color: var(--fg-3) !important;
}
.legal-table-wrap { overflow-x: auto; margin: 0 0 20px; -webkit-overflow-scrolling: touch; }
.legal-table {
width: 100%;
min-width: 620px;
border-collapse: collapse;
font-size: 14.5px;
}
.legal-table th {
text-align: left;
font-family: var(--font-label);
font-size: 11.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--fg-3);
font-weight: 400;
padding: 0 14px 12px 0;
border-bottom: 1px solid var(--line-strong);
}
.legal-table td {
padding: 14px 14px 14px 0;
border-bottom: 1px solid var(--line);
color: var(--fg-2);
line-height: 1.6;
vertical-align: top;
}
.legal-table tr:last-child td { border-bottom: 0; }
@media (max-width: 900px) {
.legal-layout { grid-template-columns: 1fr; gap: 28px; }
/* the rail becomes a collapsed card at the top — sticky contents on a phone
just eats the viewport */
.legal-toc {
position: static;
max-height: none;
overflow: visible;
border-left: 0;
padding-left: 0;
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 20px;
background: var(--surface-card-on-section);
}
.legal-toc ol { grid-template-columns: 1fr 1fr; gap: 10px 18px; }
}
@media (max-width: 560px) {
.legal-toc ol { grid-template-columns: 1fr; }
.legal-table { min-width: 520px; }
}
/* footer link that is a button (cookie settings) — must be indistinguishable
from its sibling anchors */
.footer-linkbtn {
appearance: none;
background: none;
border: 0;
padding: 0;
font: inherit;
color: var(--fg-2);
font-size: 15px;
font-weight: 500;
cursor: pointer;
text-align: left;
transition: color 0.2s ease;
}
.footer-linkbtn:hover,
.footer-linkbtn:focus-visible { color: var(--electric-green); }
/* ---------- cookie consent ----------
Bottom-anchored card rather than a full-width bar: the bar reads as a
system error strip and covers content on phones. Reject is the same weight
and the same click-distance as accept (GDPR: refusing must be no harder
than consenting), so the two live side by side as equal buttons and only
the accent fill marks the recommended one. */
.cookie {
position: fixed;
left: max(16px, env(safe-area-inset-left));
right: max(16px, env(safe-area-inset-right));
bottom: max(16px, env(safe-area-inset-bottom));
z-index: 120;
margin-inline: auto;
width: min(520px, 100%);
padding: 22px 22px 20px;
border-radius: var(--radius-lg);
border: 1px solid var(--glass-brd);
background:
linear-gradient(150deg, var(--glass-sheen-1), var(--glass-sheen-2) 60%),
var(--surface-card);
backdrop-filter: blur(20px) saturate(1.4);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
box-shadow:
inset 0 1px 0 var(--glass-inset-hi),
0 24px 70px rgba(0, 0, 0, 0.42);
/* hidden until js decides consent is actually missing — no flash of banner
for people who already answered */
opacity: 0;
transform: translateY(18px) scale(0.97);
visibility: hidden;
pointer-events: none;
transition:
opacity 420ms ease,
transform 520ms var(--ease-expressive),
visibility 0s linear 520ms;
}
.cookie.show {
opacity: 1;
transform: none;
visibility: visible;
pointer-events: auto;
transition-delay: 0s;
}
.cookie-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cookie-ico {
width: 26px;
height: 26px;
flex: none;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--surface-brand-tint);
color: var(--violet-hot);
}
.cookie-ico svg { width: 15px; height: 15px; display: block; }
.cookie-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 15.5px;
color: var(--fg-1);
margin: 0;
}
.cookie-body { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--fg-2); text-wrap: pretty; }
.cookie-body a { color: var(--violet-hot); text-decoration: underline; text-underline-offset: 3px; }
.cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-actions .btn { flex: 1 1 160px; justify-content: center; }
.cookie-more {
appearance: none;
background: none;
border: 0;
padding: 6px 0 0;
font: inherit;
font-size: 13px;
font-weight: 500;
color: var(--fg-3);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.2s ease;
}
.cookie-more:hover { color: var(--violet-hot); }
/* the detail panel: category switches, collapsed by default so the first
read stays two sentences and two buttons */
.cookie-detail {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 420ms var(--ease-expressive);
}
.cookie.open .cookie-detail { grid-template-rows: 1fr; }
.cookie-detail > div { overflow: hidden; }
.cookie-cats { display: grid; gap: 2px; margin: 4px 0 16px; }
.cookie-cat {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 0;
border-top: 1px solid var(--line);
}
.cookie-cat-txt { flex: 1; min-width: 0; }
.cookie-cat-name { display: block; font-size: 13.5px; font-weight: 700; color: var(--fg-1); margin-bottom: 2px; }
.cookie-cat-desc { display: block; font-size: 12.5px; line-height: 1.5; color: var(--fg-3); }
/* switch */
.cookie-sw { position: relative; flex: none; width: 40px; height: 23px; margin-top: 2px; }
.cookie-sw input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
.cookie-sw-track {
position: absolute;
inset: 0;
border-radius: 999px;
background: var(--surface-hover);
border: 1px solid var(--line-strong);
transition: background 0.22s ease, border-color 0.22s ease;
pointer-events: none;
}
.cookie-sw-track::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 15px;
height: 15px;
border-radius: 50%;
background: var(--fg-2);
transition: transform 0.26s var(--ease-expressive), background 0.22s ease;
}
.cookie-sw input:checked + .cookie-sw-track { background: var(--violet-hot); border-color: transparent; }
.cookie-sw input:checked + .cookie-sw-track::after { transform: translateX(17px); background: #FFFFFF; }
.cookie-sw input:focus-visible + .cookie-sw-track { outline: 3px solid var(--violet-hot); outline-offset: 3px; }
.cookie-sw input:disabled { cursor: not-allowed; }
.cookie-sw input:disabled + .cookie-sw-track { opacity: 0.5; }
@media (max-width: 520px) {
.cookie { padding: 18px 18px 16px; }
.cookie-actions .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
.cookie { transition: opacity 200ms ease, visibility 0s linear 200ms; transform: none; }
.cookie-detail { transition: none; }
}