*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#0a0b0d;color:#f2efe9;font-family:Manrope,system-ui,sans-serif;text-wrap:pretty;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:#f2efe9;text-decoration:none}
a:hover{color:var(--acc,#b3aefc)}
img{display:block;max-width:100%}
button{font-family:inherit;color:inherit}
::selection{background:var(--acc,#b3aefc);color:#0a0b0d}
[data-reveal-on] [data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
[data-reveal-on] [data-reveal].in{opacity:1;transform:none}
[data-rail]{scrollbar-width:none}
[data-rail]::-webkit-scrollbar{display:none}
/* card rails sit directly in a full-bleed section (nav rails don't): on
screens wider than the card row, cap the rail at its content width and
center it; on narrower screens it still fills and scrolls */
section>[data-rail]{max-width:max-content;margin-inline:auto}
@keyframes drift{0%{transform:translate3d(-2%,0,0)}100%{transform:translate3d(-52%,0,0)}}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.18);opacity:.8}}
/* The two coloured blobs behind the hero. They used to be small gradients
smeared with filter:blur(30–40px) while a scale animation ran on them —
a blurred layer that changes size is re-rasterised every frame, over an
area of 130vw × 80vh. A window that loses focus gets its frames throttled,
the re-raster falls behind, and the whole page pulses (Sergei, 12.08:
«как только фокус убираешь с браузера, всё начинает мерцать»). The
softness now lives in the gradient's own stops, so nothing is filtered
and the animation is transform and opacity only — both handled by the
compositor without redrawing anything. */
.glow-a,.glow-b{position:absolute;border-radius:50%;pointer-events:none;
background:radial-gradient(closest-side,
color-mix(in srgb,var(--acc,#b3aefc) 55%,transparent) 0%,
color-mix(in srgb,var(--acc,#b3aefc) 26%,transparent) 38%,
color-mix(in srgb,var(--acc,#b3aefc) 8%,transparent) 62%,transparent 82%)}
.glow-a{top:-22vh;left:50%;width:130vw;height:80vh;margin-left:-65vw;opacity:.16;
animation:breathe 14s ease-in-out infinite}
.glow-b{bottom:-30vh;right:-20vw;width:80vw;height:70vh;opacity:.1;
animation:breathe 19s ease-in-out infinite reverse}
/* Nobody is looking: the page keeps no loop running in a window that is
hidden or merely unfocused. visibilitychange alone was not enough — a
window pushed behind another is still «visible» and never fires it. */
html.away .glow-a,html.away .glow-b,html.away [style*="animation:drift"],
html.away [style*="animation:cue"]{animation-play-state:paused}
@keyframes cue{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(9px);opacity:1}}
@media (prefers-reduced-motion:reduce){[data-reveal-on] [data-reveal]{opacity:1!important;transform:none!important}}
/* header nav — brand wordmarks, not plain text. The active page's mark sits
left at heading scale (it reads as the page title); the other three ride
right, small and muted, each hovering into its own brand color. Wordmarks
reproduce the client's packaging: GRADIENT is a weight contrast (heavy
GRAD + hairline IENT), Hyamax is lowercase with the spiral glyph in place
of the "a", TIMP is a heavy grotesque. */
.h-nav{display:flex;align-items:baseline;gap:clamp(20px,4vw,44px);overflow-x:auto;
padding-top:20px;padding-bottom:18px}
.h-nav button{flex:none;border:0;background:none;cursor:pointer;white-space:nowrap;padding:0;
color:rgba(242,239,233,.46);transition:color .4s cubic-bezier(.16,1,.3,1)}
.h-nav .on{margin-right:auto;color:#f2efe9}
.h-nav button:hover{color:#f2efe9}
.h-nav .hb-hyamax:hover{color:#b3aefc}
.h-nav .hb-timbio:hover{color:#f0a35e}
.h-nav .hb-gradient:hover{color:#4fd6c6}
/* wordmark scale: active one at heading size, the rest small */
.wm{display:inline-flex;align-items:center;font-size:16.5px;line-height:1;
transition:font-size .4s cubic-bezier(.16,1,.3,1)}
.on .wm{font-size:clamp(26px,3.6vw,38px)}
/* the spiral stands in for the "a" — it sits tight against the letters, at
x-height, exactly as on the packaging */
.wm-spiral{width:.74em;height:.74em;flex:none;margin:.05em -.015em 0}
/* per-brand letterforms */
.wm-hyamax{font-family:Jost,sans-serif;font-weight:300;letter-spacing:-.005em}
/* Real brand marks, not typed imitations (Sergei, 25.08): white alpha masks
pulled from the client's own materials, painted with currentColor через
mask so the nav's hover/active tints keep working, sized in em so the
active-tab scaling keeps working too. */
.wm-img{display:inline-block;height:.78em;background:currentColor;
-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.wm-img-timbio{--m:url(/static/media/brand-timbio.png);width:6.2em}
.wm-img-gradient{--m:url(/static/media/brand-gradient.png);width:2.71em}
.wm-all{font-family:Jost,sans-serif;font-weight:300;letter-spacing:.03em}
/* the active mark tints the accent line under the header */
.h-nav .on{color:var(--acc,#b3aefc)}
/* Header/footer cross-channel icons — the same bot answers in Telegram and
MAX, and the site said nothing about it (Sergei, msg 3279 follow-up,
22.08). margin-left:auto rather than relying on .on's margin-right:auto,
so the row lands at the far right on every header variant, including the
single-button ones on /privacy and /legal. Hidden until promo.js confirms
a link exists — no dead "#" hrefs. */
.h-x{display:flex;gap:10px;margin-left:auto;align-items:center;flex:none}
.h-x a{display:flex;align-items:center;justify-content:center;width:30px;height:30px;
border-radius:50%;opacity:.68;transition:opacity .3s cubic-bezier(.16,1,.3,1)}
.h-x a:hover{opacity:1}
.h-x img{width:19px;height:19px;display:block;border:0}
.f-x{display:flex;gap:16px;margin-top:2px}
.f-x a{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
color:rgba(242,239,233,.55);font:600 12.5px/1 Manrope,sans-serif;transition:color .3s}
.f-x a:hover{color:rgba(242,239,233,.85)}
.f-x img{width:17px;height:17px;display:block;border:0}
/* legal documents (privacy policy, company details): long-form reading,
narrower measure, quiet hierarchy — no marketing typography here */
.doc{font:400 17px/1.75 Manrope,sans-serif;color:rgba(242,239,233,.72)}
.doc h2{margin:44px 0 14px;font:400 clamp(19px,2.4vw,25px)/1.25 Jost,sans-serif;
letter-spacing:-.02em;color:#f2efe9}
.doc h2:first-child{margin-top:0}
.doc p{margin:0 0 14px}
.doc ul{margin:0 0 14px;padding-left:20px}
.doc li{margin:0 0 8px}
.doc strong{color:rgba(242,239,233,.92);font-weight:600}
.doc a{color:var(--acc,#b3aefc);text-decoration:underline;text-underline-offset:3px}
.doc dl{margin:0;display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:10px 26px}
.doc dt{font-weight:600;color:rgba(242,239,233,.55)}
.doc dd{margin:0}
@media (max-width:560px){.doc dl{grid-template-columns:1fr;gap:2px 0}
.doc dd{margin:0 0 12px}}
/* hover states (converted from design style-hover attrs) */
[data-nav]:hover .h-zoom{transform:scale(1.06);opacity:.6}
.h-lift:hover{transform:translateY(-2px)}
.h-border:hover{border-color:#f2efe9!important}
#tf-toast.show{opacity:1;transform:none}
/* chat docked (body.tfw-split set by widget.js on wide screens): the header
band and accent bar stay full-bleed, the inner nav centers in the shrunk
content area. padding-right on the header (no inline padding there) shifts
the nav; the inline margin:0 auto on the nav div itself stays untouched. */
header,header>div:last-child{transition:margin-right .42s cubic-bezier(.22,.61,.36,1),padding-right .42s cubic-bezier(.22,.61,.36,1)}
body.tfw-split header{margin-right:-472px;padding-right:472px}
body.tfw-split header>div:last-child{margin-right:-472px}
/* docked chat: like the header, the brand hero keeps its photo full-bleed —
only the inner text block follows the shrunk content area */
body[data-brand] main>section:first-child{transition:margin-right .42s cubic-bezier(.22,.61,.36,1),padding-right .42s cubic-bezier(.22,.61,.36,1)}
body[data-brand].tfw-split main>section:first-child{margin-right:-472px;padding-right:472px}
/* Подсказка об установке: карточка снизу, не перекрывает чат-кнопку по ширине
на мобильном и уходит в угол на широком экране. */
.pwa-hint{position:fixed;left:50%;top:50%;transform:translate(-50%,-46%) scale(.97);
z-index:2147483100;width:min(92vw,430px);max-height:82vh;overflow-y:auto;
background:#191a22;border:1px solid rgba(242,239,233,.14);border-radius:22px;
padding:22px 22px 20px;box-shadow:0 30px 80px -20px rgba(0,0,0,.75);
opacity:0;transition:opacity .26s ease,transform .26s ease;}
.pwa-hint.in{opacity:1;transform:translate(-50%,-50%)}
.pwa-hint .pwa-t{margin:0 0 8px;font:600 19px/1.25 Jost,sans-serif;color:#f2efe9}
.pwa-hint .pwa-s{margin:0 0 12px;font:400 15px/1.5 Manrope,sans-serif;color:rgba(242,239,233,.72)}
.pwa-hint .pwa-steps{margin:0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:9px;
font:500 14.5px/1.5 Manrope,sans-serif;color:#b3aefc}
.pwa-hint .pwa-steps li{padding-left:4px}
.pwa-hint .pwa-x{position:absolute;top:12px;right:12px;width:34px;height:34px;border:0;
border-radius:50%;background:rgba(242,239,233,.08);color:#f2efe9;font-size:19px;
cursor:pointer;line-height:1}
.pwa-hint .pwa-go{margin-top:14px;padding:12px 20px;border:0;border-radius:14px;cursor:pointer;
font:600 15px/1 Jost,sans-serif;background:#b3aefc;color:#15161c}
@media (min-width:641px){.pwa-hint{width:430px}}
/* Рисунок установки: телефон, сетка домашнего экрана и наша иконка, которая
в неё перелетает (Сергей, 15.09 — «окно просит анимации», ориентир —
скачущая галочка подтверждения). Цикл 2,6 с с паузой, движение с лёгким
перелётом и приземлением, всё на css. */
.pwa-hint .pwa-art{display:flex;justify-content:center;margin:2px 0 14px}
.pwa-hint .pwa-art svg{overflow:visible;width:184px;height:134px}
.pwa-hint .pwa-phone{fill:rgba(242,239,233,.04);stroke:rgba(242,239,233,.28);stroke-width:1.4}
.pwa-hint .pwa-notch{fill:rgba(242,239,233,.28)}
.pwa-hint .pwa-grid rect{fill:rgba(242,239,233,.10)}
.pwa-hint .pwa-slot{fill:none;stroke:rgba(179,174,252,.45);stroke-width:1.2;
stroke-dasharray:3 3;animation:pwaSlot 2.6s ease-in-out infinite}
.pwa-hint .pwa-icon rect{fill:#b3aefc}
.pwa-hint .pwa-icon path{stroke:#15161c;fill:none}
.pwa-hint .pwa-icon{transform-origin:84px 59px;animation:pwaFly 2.6s cubic-bezier(.32,.72,.3,1) infinite}
@keyframes pwaFly{
0% {transform:translate(-38px,-62px) scale(1.7) rotate(-10deg);opacity:0}
10% {opacity:1}
26% {transform:translate(-20px,-30px) scale(1.34) rotate(-5deg)}
46% {transform:translate(0,0) scale(1) rotate(0);opacity:1}
54% {transform:translate(0,2px) scale(1.06,.94)}
62% {transform:translate(0,-3px) scale(.98,1.03)}
70% {transform:translate(0,0) scale(1)}
88% {transform:translate(0,0) scale(1);opacity:1}
100% {transform:translate(0,0) scale(1);opacity:0}
}
@keyframes pwaSlot{
0%,40% {opacity:1}
56%,88% {opacity:0}
100% {opacity:1}
}
/* Нажали «Установить» — иконка встаёт на место одним движением и остаётся. */
.pwa-hint.pwa-done .pwa-icon{animation:pwaSnap .42s cubic-bezier(.2,.9,.3,1.2) forwards}
.pwa-hint.pwa-done .pwa-slot{animation:none;opacity:0}
.pwa-hint.pwa-done .pwa-go{transform:scale(.97);opacity:.8}
@keyframes pwaSnap{
0% {transform:translate(0,-6px) scale(1.12);opacity:1}
70% {transform:translate(0,1px) scale(.97)}
100% {transform:translate(0,0) scale(1);opacity:1}
}
.pwa-hint .pwa-go{transition:transform .18s ease,opacity .18s ease}
.pwa-hint .pwa-go:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){
.pwa-hint{transition:none}
/* Движение выключено — кадр стоит на «уже на месте», смысл картинки цел. */
.pwa-hint .pwa-icon,.pwa-hint .pwa-slot{animation:none}
.pwa-hint .pwa-slot{opacity:0}
}
/* мобильный хедер: сэндвич + нижняя модалка выбора бренда (27.08) */
.h-burger{display:none;flex:none;width:44px;height:44px;border:0;border-radius:50%;
cursor:pointer;background:rgba(242,239,233,.07);align-items:center;justify-content:center;
flex-direction:column;gap:5px;margin-left:12px;
animation:hb-pulse 3.8s ease-in-out infinite}
.h-burger span{display:block;width:18px;height:2px;border-radius:2px;background:#f2efe9}
@keyframes hb-pulse{0%,82%,100%{box-shadow:0 0 0 0 rgba(179,174,252,0)}
88%{box-shadow:0 0 0 9px rgba(179,174,252,.20)}94%{box-shadow:0 0 0 0 rgba(179,174,252,0)}}
@media (max-width:640px){
.h-nav{align-items:center}
.h-x a{width:40px;height:40px}
.h-x img{width:26px;height:26px}
.h-nav button:not(.on){display:none}
/* специфичность: правило выше — (0,2,1), поэтому тут тоже button.класс,
иначе сэндвич прячет сам себя (поймано на проде, 27.08) */
.h-nav button.h-burger{display:flex}
.h-nav .on{pointer-events:none}
}
#brand-sheet{position:fixed;inset:0;z-index:2147483090;display:none;
background:rgba(8,9,12,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#brand-sheet .sheet{position:absolute;left:0;right:0;bottom:0;
background:#15161c;border-radius:26px 26px 0 0;border:1px solid rgba(242,239,233,.1);
border-bottom:0;padding:20px 16px calc(20px + env(safe-area-inset-bottom));
display:flex;flex-direction:column;gap:10px;
transform:translateY(102%);transition:transform .34s cubic-bezier(.16,1,.3,1)}
#brand-sheet.in .sheet{transform:none}
#brand-sheet .sheet-t{margin:0 0 4px;font:600 12.5px/1.3 Manrope,sans-serif;
letter-spacing:.24em;text-transform:uppercase;color:rgba(242,239,233,.55)}
#brand-sheet .sheet-item{display:flex;align-items:center;gap:12px;border:1px solid
rgba(242,239,233,.12);border-radius:18px;background:rgba(242,239,233,.045);cursor:pointer;
padding:18px 18px;color:#f2efe9;text-align:left}
#brand-sheet .sheet-item .wm{font-size:22px}
#brand-sheet .sheet-item.cur{border-color:rgba(179,174,252,.55);background:rgba(179,174,252,.08)}
#brand-sheet .sheet-item .here{margin-left:auto;font:500 12px/1 Manrope,sans-serif;
font-style:normal;color:#b3aefc}
/* embed-режим (модалка политики): только текст документа */
.tf-embed header,.tf-embed footer,.tf-embed #tfw-pillwrap,.tf-embed #tfw-scrim,
.tf-embed #tf-toast,.tf-embed .pwa-hint{display:none !important}
.tf-embed main{padding-top:8px}