/* VILAR — site design system, R157 "THE PRODUCT LEADS". Two complete themes: light "polar day" paper and dark ink (the app's values-night palette). Carried laws: 700 belongs to the subject and to figures, everything structural is 500; neutrals carry the accent's blue bias; no gradients on UI surfaces. R157 amendment: the device is an OBJECT, not a UI surface — real hardware casts a real (soft) shadow, in both themes. Theme resolution: system preference by default; an explicit choice is stamped on by /static/js/theme.js. */ :root { color-scheme: light; --bg: #F3F4F9; --panel: #FFFFFF; --panel-2: #EDEFF6; --sunken: #E9EBF3; --ink: #14161F; --ink-2: #4A5066; --ink-3: #5F667F; --line: #DCDFEA; --line-2: #C6CBDD; --accent: #4A51E0; --accent-press: #3A41D2; --on-accent: #FFFFFF; --wash: #E4E6F9; --ok: #1E9E63; --mark-graphite: #6A7190; --scene-dim: 138, 145, 172; --scene-live: 74, 81, 224; --bezel: #14161F; --bezel-line: #2B2F42; --screen-bg: #0A0B11; --dev-shadow: 0 44px 90px -34px rgba(31, 34, 58, 0.5), 0 18px 44px -26px rgba(31, 34, 58, 0.4); --th-sun: none; --th-moon: block; --sans: 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; --r-card: 18px; --r-panel: 24px; --r-btn: 14px; --wrap: 1180px; --narrow: 780px; --gut: 24px; /* R248 rhythm: two section paddings for the whole site (major / minor), one panel radius, one card radius — no near-duplicates. */ --sec: clamp(64px, 8vw, 112px); --sec-s: clamp(48px, 6vw, 80px); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0A0B11; --panel: #13151E; --panel-2: #14161F; --sunken: #0E1017; --ink: #E9EBF4; --ink-2: #A2A8BF; --ink-3: #7A8099; --line: #232637; --line-2: #363C58; --accent: #8F94FF; --accent-press: #7A80F0; --on-accent: #0A0B11; --wash: #1B1D33; --ok: #4FC98C; --mark-graphite: #B7BDD2; --scene-dim: 133, 139, 162; --scene-live: 143, 148, 255; --bezel: #191C28; --bezel-line: #363C58; --screen-bg: #0A0B11; --dev-shadow: 0 44px 100px -30px rgba(0, 0, 0, 0.72), 0 16px 44px -22px rgba(0, 0, 0, 0.55); --th-sun: block; --th-moon: none; } } :root[data-theme="dark"] { color-scheme: dark; --bg: #0A0B11; --panel: #13151E; --panel-2: #14161F; --sunken: #0E1017; --ink: #E9EBF4; --ink-2: #A2A8BF; --ink-3: #7A8099; --line: #232637; --line-2: #363C58; --accent: #8F94FF; --accent-press: #7A80F0; --on-accent: #0A0B11; --wash: #1B1D33; --ok: #4FC98C; --mark-graphite: #B7BDD2; --scene-dim: 133, 139, 162; --scene-live: 143, 148, 255; --bezel: #191C28; --bezel-line: #363C58; --screen-bg: #0A0B11; --dev-shadow: 0 44px 100px -30px rgba(0, 0, 0, 0.72), 0 16px 44px -22px rgba(0, 0, 0, 0.55); --th-sun: block; --th-moon: none; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); } h1, h2, h3 { font-weight: 700; line-height: 1.1; letter-spacing: -0.022em; text-wrap: balance; } h1 { font-size: clamp(2.2rem, 1.3rem + 4vw, 3.7rem); } h2 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.35rem); } h3 { font-size: 1.125rem; letter-spacing: -0.01em; } p { max-width: 68ch; overflow-wrap: break-word; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--ink); } a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--accent); color: var(--on-accent); } .skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--accent); color: var(--on-accent); padding: 10px 16px; border-radius: 0 0 8px 0; font-weight: 500; } .skip:focus { left: 0; } /* visually hidden, read by assistive tech (heading structure without a visible label) */ .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .mk-a { stroke: var(--mark-graphite); } .mk-b { stroke: var(--accent); } .mk-c { fill: var(--accent); } /* ---------- header ---------- */ .hd { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line); } /* R248: the header lets the page show through while scrolling (the route field, the device) — a translucent bar with a blur, fully opaque where color-mix / backdrop-filter are unsupported. */ @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .hd { background: color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); } } .hd-in { display: flex; align-items: center; gap: 26px; height: 64px; } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); } .brand:hover { color: var(--ink); } .wordmark { font-size: 14px; font-weight: 700; letter-spacing: 0.4em; color: var(--ink); transform: translateX(0.06em); } .nav { display: flex; gap: 4px; margin-left: 6px; } .nav a { color: var(--ink-2); font-weight: 500; font-size: 0.9375rem; padding: 8px 12px; border-radius: 10px; transition: color 0.15s ease, background 0.15s ease; } .nav a:hover { color: var(--ink); } .nav a[aria-current="page"] { color: var(--ink); background: var(--wash); } .hd-side { display: flex; align-items: center; gap: 8px; margin-left: auto; } .hd-tg { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-weight: 500; font-size: 0.9rem; border: 1px solid var(--line-2); border-radius: var(--r-btn); padding: 8px 14px; min-height: 40px; transition: color 0.15s ease, border-color 0.15s ease; } .hd-tg:hover { border-color: var(--accent); color: var(--accent); } .hd-theme { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: none; border: 1px solid var(--line); color: var(--ink-2); cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .hd-theme:hover { color: var(--accent); border-color: var(--accent); } .th-sun { display: var(--th-sun); } .th-moon { display: var(--th-moon); } .hd-lang { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 40px; font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; color: var(--ink-3); padding: 0 10px; border-radius: 10px; letter-spacing: 0.08em; } .hd-lang:hover { color: var(--ink); background: var(--wash); } .hd-burger { display: none; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: var(--r-btn); background: var(--accent); color: var(--on-accent); font-weight: 500; font-size: 1rem; letter-spacing: -0.01em; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .btn:hover { background: var(--accent-press); color: var(--on-accent); transform: translateY(-1px); } .btn:active { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .btn:hover, .btn:active { transform: none; } } .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-2); } .btn-ghost:hover { background: var(--wash); border-color: var(--accent); color: var(--ink); } .btn-tg { gap: 9px; } .cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .cta-row .more { margin-left: 8px; } .cta-col { display: flex; flex-direction: column; gap: 12px; align-items: stretch; } /* ---------- device frame (real app screenshots) ---------- */ /* R248: the frame is a container so the hardware cue (Dynamic Island on the iPhone, punch-hole camera on the Android) scales with the frame in cqw. */ .ph-frame { position: relative; container-type: inline-size; border-radius: clamp(36px, 3vw, 46px); padding: clamp(8px, 0.8vw, 11px); background: var(--bezel); border: 1px solid var(--bezel-line); box-shadow: var(--dev-shadow); } .ph-frame img { display: block; width: 100%; height: auto; border-radius: clamp(28px, 2.4vw, 36px); background: var(--screen-bg); } .ph-cam { position: absolute; left: 50%; transform: translateX(-50%); background: #000; z-index: 1; pointer-events: none; display: block; } .ph-ios .ph-cam { top: calc(clamp(8px, 0.8vw, 11px) + 3cqw); width: 31cqw; height: 9.2cqw; border-radius: 999px; } .ph-and .ph-cam { top: calc(clamp(8px, 0.8vw, 11px) + 2.6cqw); width: 3.6cqw; height: 3.6cqw; border-radius: 50%; } .shot-tag { font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-top: 16px; text-align: center; } /* ---------- hero ---------- */ .hero { position: relative; overflow: clip; border-bottom: 1px solid var(--line); } .hf { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .hf-c { stroke: rgb(var(--scene-dim)); } .hf-cand { stroke: rgb(var(--scene-live)); } .hf-live { stroke: rgb(var(--scene-live)); } .hf-flow { stroke: rgb(var(--scene-live)); opacity: 0; stroke-dasharray: 10 26; } .hf-x { stroke: rgb(var(--scene-live)); opacity: 0; } .fin-node { fill: rgb(var(--scene-live)); opacity: 0.55; } /* Static scene (and prefers-reduced-motion): route A lit into the port, B a faint candidate underneath (.hf-cand), everything transient hidden. */ .hf-gb { opacity: 0; } .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.68fr); gap: clamp(24px, 4vw, 72px); align-items: center; padding-top: clamp(40px, 6vh, 72px); padding-bottom: clamp(40px, 6vh, 72px); } .hero-copy { max-width: 620px; } .eyebrow { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; } .hero h1 { font-size: clamp(2.5rem, 1.6rem + 4vw, 4.15rem); letter-spacing: -0.032em; line-height: 1.03; max-width: 15ch; } .lead { color: var(--ink-2); font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem); line-height: 1.5; margin-top: 20px; max-width: 46ch; } .hero .cta-row { margin-top: 34px; } .chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; } .chips li { font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 9px 15px; } .hero-dev { display: flex; flex-direction: column; align-items: center; justify-self: center; position: relative; } .hero-dev .ph-frame { width: clamp(272px, 24vw, 368px); } /* the arrival dock rides the device's left bezel (layout-anchored). HTML on purpose: the pulse is a composited transform, never SVG relayout. */ .hf-dock { position: absolute; left: -18px; top: 41%; width: 40px; height: 40px; pointer-events: none; display: block; } .hf-dock-port, .hf-dock-pulse { position: absolute; left: 50%; top: 50%; display: block; border-radius: 50%; } .hf-dock-port { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: rgb(var(--scene-live)); opacity: 0.9; } .hf-dock-pulse { width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 1.6px solid rgb(var(--scene-live)); opacity: 0; } /* ---------- benefits ---------- */ .bens { padding: var(--sec-s) 0; border-bottom: 1px solid var(--line); } .ben-grid { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(22px, 2.8vw, 44px); } .ben { border-top: 1px solid var(--line-2); padding-top: 22px; position: relative; } .ben::before { content: ''; position: absolute; top: -1px; left: 0; width: 44px; height: 2px; background: var(--accent); } .ben-g { display: block; width: 32px; height: 32px; color: var(--accent); margin-bottom: 16px; } .ben-g .g-fill { fill: currentColor; stroke: none; } .ben-g .g-dim { opacity: 0.38; } .ben-g .g-x { stroke: var(--ink); stroke-width: 1.9; } .ben h3 { font-size: 1.125rem; } .ben p { color: var(--ink-2); font-size: 0.9375rem; margin-top: 10px; } /* ---------- how ---------- */ .how { padding: var(--sec) 0; border-bottom: 1px solid var(--line); scroll-margin-top: 72px; } .hsteps { list-style: none; margin-top: 44px; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 52px); } .hstep { position: relative; padding-top: 26px; border-top: 1px solid var(--line); } @media (min-width: 900px) { .hsteps::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line); } .hstep { border-top: 0; } } .hstep::before { content: ''; position: absolute; top: -4px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .hs-n { font-family: var(--mono); font-weight: 500; font-size: 0.9375rem; color: var(--accent); font-variant-numeric: tabular-nums; } .hstep h3 { margin-top: 12px; font-size: 1.125rem; } .hstep p { color: var(--ink-2); font-size: 0.9375rem; margin-top: 10px; } /* R248: the honesty note is a quiet aside on a panel, with the same 8px node the steps use — not an alert box. */ .honesty { margin-top: 44px; display: flex; gap: 16px; align-items: flex-start; max-width: 66ch; padding: 22px 26px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); } .honesty::before { content: ''; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: 8px; } .honesty p { color: var(--ink-2); font-size: 1rem; } /* ---------- route (R248: the whitelist story, user language) ---------- */ .route { padding: var(--sec) 0; border-bottom: 1px solid var(--line); scroll-margin-top: 72px; } .route-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 88px); align-items: center; } .route-copy .eyebrow { margin-bottom: 14px; } .route-facts { list-style: none; margin-top: 36px; display: grid; gap: 22px; } .route-facts li { position: relative; padding-left: 22px; border-left: 1px solid var(--line); } .route-facts li::before { content: ''; position: absolute; left: -4.5px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .route-facts h3 { font-size: 1.0625rem; } .route-facts p { color: var(--ink-2); font-size: 0.9375rem; margin-top: 6px; max-width: 48ch; } .route-fig { display: flex; flex-direction: column; align-items: center; } .route-panel { position: relative; width: 100%; max-width: 480px; aspect-ratio: 4 / 4.6; overflow: clip; display: flex; justify-content: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); } .route-panel .ph-frame { width: clamp(240px, 22vw, 300px); margin-top: clamp(28px, 3vw, 44px); } /* ---------- product / platforms ---------- */ .prod { padding: var(--sec) 0 0; border-bottom: 1px solid var(--line); } .prod-head { max-width: 760px; } .sec-lead { color: var(--ink-2); margin-top: 14px; font-size: 1.0625rem; max-width: 58ch; } /* R248 stage: a composed panel — quiet route field behind, two phones at the same weight side by side (iPhone a step higher, no overlap: an overlap would slice the iPhone's full-width button, R159), three notes underneath. */ .stage { margin-top: clamp(40px, 5vw, 64px); } .stage-panel { position: relative; overflow: clip; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); padding: clamp(36px, 5vw, 72px) var(--gut); } .stage-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .stage-in { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: clamp(20px, 3vw, 44px); } .stage-ph { position: relative; } .stage-ios { margin-bottom: clamp(32px, 3.6vw, 48px); } .stage-and { margin-top: clamp(32px, 3.6vw, 48px); } .stage-ph .ph-frame { width: clamp(244px, 23vw, 328px); } .stage-notes { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); margin-top: clamp(28px, 3.5vw, 44px); } .snote { position: relative; border-top: 1px solid var(--line-2); padding-top: 16px; } .snote::before { content: ''; position: absolute; top: -1px; left: 0; width: 44px; height: 2px; background: var(--accent); } .snote-n { font-family: var(--mono); font-weight: 500; font-size: 0.8125rem; color: var(--accent); letter-spacing: 0.1em; font-variant-numeric: tabular-nums; } .snote h3 { margin-top: 8px; font-size: 1.0625rem; } .snote p { color: var(--ink-2); font-size: 0.9375rem; margin-top: 6px; } .stage-tag { font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-top: 26px; text-align: center; max-width: none; } .prod-launch { border-top: 1px solid var(--line); margin-top: clamp(48px, 6vw, 76px); padding: clamp(44px, 5vw, 68px) 0 var(--sec); } .statement { font-size: clamp(1.3rem, 1.05rem + 1.2vw, 1.8rem); font-weight: 700; letter-spacing: -0.022em; line-height: 1.2; max-width: 26ch; text-wrap: balance; } .plat-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 28px); margin-top: 36px; } .plat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px 26px; transition: border-color 0.18s ease; } .plat:hover { border-color: var(--line-2); } .plat h3 { font-size: 1.0625rem; } .plat p { color: var(--ink-2); font-size: 0.9063rem; margin-top: 8px; } .prod-launch .cta-row { margin-top: 40px; } /* ---------- pricing ---------- */ .price { padding: var(--sec) 0; border-bottom: 1px solid var(--line); scroll-margin-top: 72px; } .plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 22px); margin-top: 40px; } .plan { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: 26px 24px; transition: border-color 0.18s ease, transform 0.18s ease; } .plan:hover { border-color: var(--line-2); transform: translateY(-2px); } .plan-best { border-color: var(--accent); } .plan-best:hover { border-color: var(--accent); } @media (prefers-reduced-motion: reduce) { .plan:hover { transform: none; } } .plan-term { font-weight: 500; font-size: 0.9375rem; color: var(--ink-2); } .plan-price { font-weight: 700; font-size: clamp(1.7rem, 1.35rem + 1.1vw, 2.15rem); letter-spacing: -0.017em; font-variant-numeric: tabular-nums; margin-top: 10px; color: var(--ink); } .plan-per { color: var(--ink-3); font-size: 0.8125rem; margin-top: 4px; font-variant-numeric: tabular-nums; } .plan-note { font-family: var(--mono); font-size: 0.6563rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-top: 18px; } .plan-best .plan-note { color: var(--accent); } .after-link { margin-top: 28px; } /* ---------- trust ---------- */ /* R160 composition fix: the three fact pills floated in ~40% of dead card width on desktop. The facts are now a ledger — full-width rows on hairlines with the same 8px accent node the how-steps use — so the right column is structured to its edge and the whitespace reads intentional. */ .trust { padding: var(--sec-s) 0; border-bottom: 1px solid var(--line); } .trust-band { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(28px, 4vw, 72px); align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(28px, 4vw, 52px); } .trust-copy p { color: var(--ink-2); margin-top: 14px; } .trust-links { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 22px; font-weight: 500; } .facts { list-style: none; display: flex; flex-direction: column; justify-content: center; } .facts li { font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; color: var(--ink-2); padding: 17px 2px 17px 26px; position: relative; } .facts li + li { border-top: 1px solid var(--line); } .facts li::before { content: ''; position: absolute; left: 2px; top: 50%; margin-top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } /* ---------- generic sections (inner pages) ---------- */ .sec { padding: var(--sec) 0; } .sec + .sec { border-top: 1px solid var(--line); } .sec-first { padding-top: clamp(44px, 7vw, 76px); } .sec-narrow { max-width: var(--narrow); } .stack { display: grid; gap: clamp(28px, 4vw, 44px); align-content: start; } .h-sm { font-size: 1.375rem; } .code-note { border-top: 1px solid var(--line); padding-top: clamp(24px, 3vw, 36px); } .sec-body { color: var(--ink-2); margin-top: 16px; font-size: 1.0625rem; } .sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .more { font-weight: 500; font-size: 0.9375rem; white-space: nowrap; display: inline-block; padding-top: 3px; } /* quiet underline slide on inline text links (no layout impact) */ .more, .trust-links a { background: linear-gradient(currentColor, currentColor) no-repeat left calc(100% - 1px) / 0 1px; padding-bottom: 3px; transition: background-size 0.22s ease, color 0.15s ease; } .more:hover, .trust-links a:hover { background-size: 100% 1px; } @media (prefers-reduced-motion: reduce) { .more, .trust-links a { transition: color 0.15s ease; } } .mt { margin-top: 52px; } .fine { color: var(--ink-3); font-size: 0.8125rem; margin-top: 24px; } /* faq */ .faq { margin-top: 28px; border-top: 1px solid var(--line); } .faq-it { border-bottom: 1px solid var(--line); } .faq-it summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 19px 2px; font-weight: 500; font-size: 1.0625rem; color: var(--ink); transition: color 0.15s ease; } .faq-it summary:hover { color: var(--accent); } .faq-it summary::-webkit-details-marker { display: none; } .faq-x { position: relative; width: 14px; height: 14px; flex: 0 0 auto; } .faq-x::before, .faq-x::after { content: ''; position: absolute; background: var(--ink-3); inset: 0; margin: auto; transition: transform 0.18s ease; } .faq-x::before { width: 14px; height: 2px; } .faq-x::after { width: 2px; height: 14px; } .faq-it[open] .faq-x::after { transform: rotate(90deg); } .faq-it[open] summary { color: var(--accent); } .faq-a { padding: 0 2px 20px; } .faq-a p { color: var(--ink-2); max-width: 64ch; } @media (prefers-reduced-motion: reduce) { .faq-x::before, .faq-x::after { transition: none; } } /* final band — the internal #launch destination of the hero CTA. The right half carries a quiet continuation of the route line (R159): the same stroke classes as the hero field, so theme, motion and reduced-motion behaviour are inherited. Kept behind the copy and hidden on narrow screens. */ .fin { background: var(--panel-2); position: relative; overflow: clip; scroll-margin-top: 64px; } .fin-art { position: absolute; right: -40px; top: 50%; transform: translateY(-50%); width: min(52vw, 700px); height: auto; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%); mask-image: linear-gradient(90deg, transparent 0, #000 24%); } .fin-in { position: relative; padding: var(--sec) var(--gut); } .fin-h { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); letter-spacing: -0.028em; } .fin-p { color: var(--ink-2); margin-top: 16px; max-width: 52ch; font-size: 1.0625rem; } .fin .cta-row { margin-top: 30px; } @media (max-width: 900px) { .fin-art { display: none; } } /* notify band */ .band { display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; background: var(--wash); border: 1px solid var(--line-2); border-radius: var(--r-card); padding: clamp(26px, 4vw, 44px); } .band h2 { margin-bottom: 8px; } .band p { color: var(--ink-2); max-width: 52ch; } /* platform rows (download page) */ .plat-rows { margin-top: clamp(44px, 5vw, 64px); border-top: 1px solid var(--line); } .plat-row { display: grid; grid-template-columns: 240px 1fr; gap: clamp(20px, 3vw, 44px); padding: 28px 0; border-bottom: 1px solid var(--line); align-items: baseline; } .plat-row h2 { font-size: 1.25rem; } .plat-row p { color: var(--ink-2); font-size: 0.9688rem; } /* pricing page */ .trial { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: 28px; margin: 38px 0 0; max-width: 760px; } .trial-badge { font-family: var(--mono); font-size: 0.6563rem; font-weight: 500; letter-spacing: 0.12em; color: var(--accent); border: 1px solid var(--accent); border-radius: 6px; padding: 5px 9px; white-space: nowrap; margin-top: 4px; } .trial h2 { font-size: 1.375rem; margin-bottom: 8px; } .trial p { color: var(--ink-2); } .cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: start; } .cols-2 .btn { margin-top: 18px; } .checks { list-style: none; margin-top: 18px; display: grid; gap: 10px; } .checks li { padding-left: 26px; position: relative; color: var(--ink-2); } .checks li::before { content: ''; position: absolute; left: 0; top: 0.42em; width: 12px; height: 7px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); } /* support — help centre */ .hc-h { margin-top: clamp(36px, 5vw, 56px); font-size: 1.375rem; } .faq-a p + p { margin-top: 10px; } .esc { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(26px, 4vw, 40px); } .esc p { color: var(--ink-2); margin-top: 10px; max-width: 56ch; } .esc .cta-row { margin-top: 24px; } .esc-ids { font-size: 0.9063rem; } .esc p.esc-ids { margin-top: 18px; color: var(--ink-3); } .chan { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: 28px; padding-top: 22px; } .chan p { color: var(--ink-3); font-size: 0.9063rem; max-width: 52ch; } /* legal docs (R248: document header, meta strip, two-column contents, reading measure 68ch, larger body size) */ .doc { max-width: 760px; } /* long single words («конфиденциальности») must wrap on narrow screens — the R157 h1 overflowed the viewport by 15 px at 390 (R248 audit) */ .doc h1 { font-size: clamp(1.9rem, 1rem + 4vw, 3.4rem); overflow-wrap: anywhere; hyphens: auto; } .doc-head { padding-bottom: 22px; border-bottom: 1px solid var(--line); } .doc-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; font-size: 0.875rem; color: var(--ink-3); } .doc .doc-meta li { font-size: 0.875rem; color: var(--ink-3); line-height: 1.5; min-width: 0; overflow-wrap: anywhere; } .doc-meta a { color: var(--ink-2); } .doc-meta a:hover { color: var(--accent); } .doc-toc { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 22px 26px; margin-top: 28px; } .doc-toc-h { font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; } .doc-toc ol { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; } .doc-toc a { color: var(--ink-2); font-size: 0.9375rem; display: inline-block; padding: 3px 0; } .doc-toc a:hover { color: var(--accent); } .doc-body { max-width: 68ch; } .doc section { margin-top: 44px; scroll-margin-top: 88px; } .doc h2 { font-size: 1.25rem; margin-bottom: 10px; } .doc p, .doc li { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.6; } .doc ul { padding-left: 22px; display: grid; gap: 8px; margin-top: 8px; } .doc p + p { margin-top: 10px; } .doc strong { color: var(--ink); font-weight: 500; } .doc-top { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 0.9375rem; font-weight: 500; } /* 404 */ .nf-code { font-family: var(--mono); font-size: 3rem; color: var(--ink-3); font-weight: 500; } .nf .btn { margin-top: 26px; } /* ---------- footer ---------- */ .ft { border-top: 1px solid var(--line); background: var(--sunken); } .ft-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; padding: 56px 0 44px; } .ft-op { color: var(--ink-3); font-size: 0.875rem; margin-top: 16px; max-width: 34ch; } .ft-reg { margin-top: 8px; font-size: 0.8125rem; max-width: none; font-variant-numeric: tabular-nums; } .ft-h { font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; } .ft-col { display: grid; gap: 6px; align-content: start; justify-items: start; } .ft-col a { color: var(--ink-2); font-size: 0.9375rem; padding: 2px 0; } .ft-col a:hover { color: var(--ink); } .ft-note { color: var(--ink-3); font-size: 0.8125rem; } .ft-base { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding: 20px 0 26px; flex-wrap: wrap; } .ft-base p { color: var(--ink-3); font-size: 0.8125rem; } /* ---------- reveal ---------- */ html.js .rv { opacity: 0; transform: translateY(16px); } html.js .rv.in { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1); } @media (prefers-reduced-motion: reduce) { html.js .rv { opacity: 1; transform: none; } html.js .rv.in { transition: none; } } /* ---------- staged choreography (R160) ---------- Three deliberate gestures beyond the generic .rv fade, all gated on both html.js and prefers-reduced-motion — with either missing, everything is simply visible. Opacity/transform only: zero layout shift. 1. Hero entrance: the copy column settles line by line on load, the device and the route field follow — the first second already moves. 2. How-it-works: when the section enters the viewport the connecting line draws 1 → 2 → 3 and the steps activate in order. One short gesture. 3. Device stage: the phones settle back-to-front. No floating, no loops. */ @media (prefers-reduced-motion: no-preference) { html.js .hero-copy > *, html.js .hero-dev { animation: heroIn 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) backwards; } html.js .hero-copy .eyebrow { animation-delay: 0.05s; } html.js .hero-copy h1 { animation-delay: 0.12s; } html.js .hero-copy .lead { animation-delay: 0.19s; } html.js .hero-copy .cta-row { animation-delay: 0.26s; } html.js .hero-copy .chips { animation-delay: 0.33s; } html.js .hero-dev { animation-delay: 0.2s; } html.js .hf { animation: hfIn 1s ease 0.1s backwards; } @keyframes heroIn { from { opacity: 0; transform: translateY(14px); } } @keyframes hfIn { from { opacity: 0; } } html.js .how .hstep { opacity: 0; transform: translateY(12px); } html.js .how .hstep::before { transform: scale(0); } html.js .how .rv.in .hstep { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1); } html.js .how .rv.in .hstep::before { transform: scale(1); transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1) 0.12s; } html.js .how .rv.in .hstep:nth-child(2) { transition-delay: 0.28s; } html.js .how .rv.in .hstep:nth-child(2)::before { transition-delay: 0.4s; } html.js .how .rv.in .hstep:nth-child(3) { transition-delay: 0.56s; } html.js .how .rv.in .hstep:nth-child(3)::before { transition-delay: 0.68s; } html.js .hsteps::before { transform: scaleX(0); transform-origin: left; } html.js .rv.in .hsteps::before { transform: scaleX(1); transition: transform 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0.1s; } html.js .prod .rv .stage-ph { opacity: 0; transform: translateY(26px); } html.js .prod .rv.in .stage-ph { opacity: 1; transform: none; transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.2, 0.7, 0.3, 1); } html.js .prod .rv.in .stage-and { transition-delay: 0.15s; } } /* ---------- hero motion (CSS only; static scene reads without it) ---------- R160. The R159 cycle ran but read as a still image: single comets rode same-colour lines and ~13 of 16 seconds were motionless holds (pixel-diff: 0.016% of pixels changing). The rebuilt 14s cycle keeps SOMETHING moving at every instant and makes the reroute a page-scale event: 0.0–3.6s route A carries flow into the port; the port pulses 3.6–4.5s A degrades — a two-step flicker down, the break mark appears 4.5–5.9s route B DRAWS ITSELF IN from the left edge along the lower corridor (stroke-dashoffset reveal — the biggest visual beat) 5.9–10.9s flow rides B; the port never stopped pulsing 10.9–12.3s the network heals: A returns, B fades back to candidate 12.3–14s steady on A again (== the static scene) The flow itself is a drifting dash train (hfDrift, 1.15s/period, seamless loop) — clearly brighter than the line it rides, moving at every moment. Opacity / stroke-dashoffset / transform only; everything below is inert under prefers-reduced-motion and the static scene keeps the composition. */ @media (prefers-reduced-motion: no-preference) { /* While motion runs, the base lines step back (attribute override is the point here — R156 gotcha inverted) so the drifting dash train is clearly brighter than the line it rides. The static scene keeps the strong base. */ .hf-ga > .hf-live { stroke-opacity: 0.42; } .hf-drawb { stroke-opacity: 0.6; } .hf-flow-a { animation: hfDrift 1.15s linear infinite, hfGateA 14s ease-in-out infinite; } .hf-flow-b { animation: hfDrift 1.15s linear infinite, hfGateB 14s ease-in-out infinite; } .hf-flow-fin { animation: hfDrift 1.15s linear infinite; opacity: 0.8; } .hf-ga { animation: hfRouteA 14s ease-in-out infinite; } .hf-gb { animation: hfRouteB 14s ease-in-out infinite; } .hf-drawb { stroke-dasharray: 1000 1001; animation: hfDraw 14s ease-in-out infinite; } .hf-x { animation: hfBreak 14s linear infinite; } .hf-dock-port { animation: hfPort 2.8s ease-in-out infinite; } .hf-dock-pulse { animation: hfPulse 2.8s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; } .fin-node { animation: hfPort 3.8s ease-in-out infinite; } /* one dash period (10+26) per iteration — the loop restarts invisibly */ @keyframes hfDrift { from { stroke-dashoffset: 36; } to { stroke-dashoffset: 0; } } @keyframes hfRouteA { 0%, 26% { opacity: 1; } 27.5% { opacity: 0.5; } 29% { opacity: 0.85; } 32%, 72% { opacity: 0.2; } 80%, 100% { opacity: 1; } } @keyframes hfRouteB { 0%, 31% { opacity: 0; } 36%, 79% { opacity: 1; } 86%, 100% { opacity: 0; } } @keyframes hfDraw { 0%, 32% { stroke-dashoffset: 1000; } 41% { stroke-dashoffset: 0; } 90% { stroke-dashoffset: 0; } 94%, 100% { stroke-dashoffset: 1000; } /* resets while the group is at 0 */ } @keyframes hfGateA { 0%, 25% { opacity: 0.95; } 28.5%, 77% { opacity: 0; } 83%, 100% { opacity: 0.95; } } @keyframes hfGateB { 0%, 41% { opacity: 0; } 45%, 78% { opacity: 0.9; } 83%, 100% { opacity: 0; } } @keyframes hfBreak { 0%, 26.5% { opacity: 0; } 28% { opacity: 0.9; } 29.5% { opacity: 0.35; } 31% { opacity: 0.85; } 42% { opacity: 0.7; } 47%, 100% { opacity: 0; } } @keyframes hfPort { 0%, 100% { opacity: 0.55; } 45% { opacity: 0.95; } } @keyframes hfPulse { 0% { transform: scale(0.4); opacity: 0; } 18% { opacity: 0.5; } 70%, 100% { transform: scale(2.1); opacity: 0; } } } /* ---------- responsive ---------- */ @media (max-width: 1019px) { .ben-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .hero-copy { max-width: 560px; } .hero-dev { padding-top: 8px; } .hero-dev .ph-frame { width: min(320px, 78vw); } .hsteps { grid-template-columns: 1fr; row-gap: 30px; margin-top: 36px; } .hstep { padding-top: 0; padding-left: 22px; border-top: 0; border-left: 1px solid var(--line); padding-bottom: 4px; } .hstep::before { top: 6px; left: -4px; } .route-grid { grid-template-columns: 1fr; } .route-panel { max-width: 440px; aspect-ratio: 4 / 4.2; } .route-panel .ph-frame { width: min(280px, 60vw); } .stage-ph .ph-frame { width: min(300px, 40vw); } .stage-ios { margin-bottom: 36px; } .stage-and { margin-top: 36px; } .plat-grid { grid-template-columns: 1fr; } .plans { grid-template-columns: 1fr 1fr; } .trust-band { grid-template-columns: 1fr; align-items: start; } .facts { border-top: 1px solid var(--line); } .facts li { padding-top: 14px; padding-bottom: 14px; } .contacts { grid-template-columns: 1fr; } .cols-2 { grid-template-columns: 1fr; } .plat-row { grid-template-columns: 1fr; gap: 10px; } .ft-grid { grid-template-columns: 1fr 1fr; } } /* R159: between 721 and ~880 the full header no longer fits (found at 768 — the R158 matrix never measured tablet widths). Compress instead of hiding: the Telegram chip drops to icon-only and the nav tightens. */ @media (max-width: 880px) { .hd-in { gap: 14px; } .hd-tg span { display: none; } .hd-tg { padding: 8px 11px; } .nav { gap: 0; margin-left: 0; } .nav a { padding: 8px 9px; font-size: 0.9063rem; } } @media (max-width: 720px) { .hd-in { gap: 12px; } /* R159: the open menu is a real surface. Two stacked pseudo-layers, both on negative z so the links stay on top: ::before is the fixed full-screen scrim (z -2), ::after is the OPAQUE panel surface (z -1) — a single negative layer would paint the scrim over the panel background and turn the surface translucent. The header joins the panel via html.nav-open. */ .nav { position: fixed; inset: 64px 0 auto 0; z-index: 49; display: none; flex-direction: column; gap: 4px; border-bottom: 1px solid var(--line-2); padding: 14px var(--gut) 22px; } .nav.open { display: flex; } .nav.open::before { content: ''; position: fixed; inset: 0; z-index: -2; background: rgba(6, 7, 12, 0.5); } .nav.open::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--panel); } html.nav-open .hd { background: var(--panel); } .nav a { padding: 12px 14px; font-size: 1.05rem; min-height: 44px; display: flex; align-items: center; border-radius: 12px; } .nav a:hover { background: var(--wash); } html.nav-open { overflow: hidden; } .hd-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; align-items: center; background: none; border: 0; cursor: pointer; border-radius: 10px; } .hd-burger span { display: block; width: 20px; height: 2px; background: var(--ink); transition: transform 0.18s ease, opacity 0.18s ease; } .hd-burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); } .hd-burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); } .btn { width: 100%; } .cta-row .btn { width: auto; flex: 1 1 auto; } .cta-row .more { margin-left: 0; } .ben-grid { grid-template-columns: 1fr; gap: 24px; } .stage-panel { padding: 28px 14px; } .stage-in { gap: 12px; } .stage-ph .ph-frame { width: min(210px, 44vw); } .stage-ios { margin-bottom: 20px; } .stage-and { margin-top: 20px; } .stage-notes { grid-template-columns: 1fr; gap: 20px; } .route-panel .ph-frame { width: min(260px, 66vw); } .doc-toc ol { grid-template-columns: 1fr; } .plans { grid-template-columns: 1fr; } .plan { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; align-items: baseline; padding: 20px 22px; } .plan-term { grid-column: 1; } .plan-price { grid-column: 2; grid-row: 1; margin-top: 0; font-size: 1.5rem; } .plan-per { grid-column: 2; grid-row: 2; text-align: right; margin-top: 2px; } .plan-note { grid-column: 1; grid-row: 2; margin-top: 2px; } .trial { grid-template-columns: 1fr; } } @media (max-width: 480px) { .ft-grid { grid-template-columns: 1fr; gap: 26px; padding: 40px 0 30px; } .facts li { padding-top: 12px; padding-bottom: 12px; } } @media (max-width: 400px) { .hd-in { gap: 8px; } .hd-side { gap: 5px; } .hd-tg { display: none; } .hd-theme { width: 36px; } .hd-lang { min-width: 34px; padding: 0 6px; } } /* ---------- hero quiet zones (R159, extended in R160) ---------- ≤900 (single-column hero): the fixed-viewBox route corridors are meaningless once the layout stacks — slice-scaling throws the paths across the copy and past the device — so the route story steps aside entirely. What remains is the simplified mobile choreography: the quiet candidate field (attenuated under the copy by the vertical mask, back to full strength at the device), the entrance, and the port pulse on the device bezel. The phone stays the protagonist; nothing crosses the CTAs. */ @media (max-width: 900px) { .hf-ga, .hf-gb, .hf-cand, .hf-x { display: none; } .hf { -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.14) 0%, rgba(0, 0, 0, 0.1) 34%, rgba(0, 0, 0, 0.16) 46%, rgba(0, 0, 0, 0.75) 58%, #000 68%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.14) 0%, rgba(0, 0, 0, 0.1) 34%, rgba(0, 0, 0, 0.16) 46%, rgba(0, 0, 0, 0.75) 58%, #000 68%); } } /* 901–1180: the two-column hero survives but the copy column is wide relative to the frame, and route B's climb can graze the chips. A horizontal quiet ramp keeps everything over the copy a whisper and lets the approach and the arrival speak at full strength. */ @media (min-width: 901px) and (max-width: 1180px) { .hf { -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0.2) 46%, rgba(0, 0, 0, 0.5) 58%, #000 72%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0.2) 46%, rgba(0, 0, 0, 0.5) 58%, #000 72%); } }