/* ============================================================
Defect AI — landing · rette.ai brand family
rette.ai language (pills, Rubik, gradients) · Defect's own violet #8e51ff accent
Pills, large radii, soft blue-white gradients
Documents: PT Serif · doc data: JetBrains Mono
============================================================ */
:root {
--ink: #0b0d12;
--ink-strong: #1a1d26;
--muted: #565b6a;
--faint: #7b8091;
--paper: #ffffff;
--fog: #faf9ff;
--mist: #f2f0fa;
--border: #e7e4f0;
--accent: #8e51ff;
--accent-deep: #6e11d0;
--accent-hover: #7f22fe;
--accent-tint: #f5f3ff;
--accent-line: #ddd6ff;
--red: #e7000b; --red-bg: #fef2f2;
--orange: #f54a00; --orange-bg: #fff7ed;
--blue: #155dfc; --blue-bg: #eff6ff;
--green: #00a63e; --green-bg: #f0fdf4;
--sans: "Onest", ui-sans-serif, system-ui, sans-serif;
--serif: "PT Serif", Georgia, serif;
--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
--r-md: 12px;
--r-lg: 16px;
--r-xl: 22px;
--r-2xl: 26px;
--r-pill: 999px;
--shadow-sm: 0 1px 2px rgba(26, 15, 55, .05);
--shadow-md: 0 2px 4px rgba(26, 15, 55, .05), 0 12px 32px rgba(26, 15, 55, .08);
--shadow-lg: 0 16px 40px rgba(26, 15, 55, .12);
--shadow-float: 0 2px 6px rgba(26, 15, 55, .05), 0 28px 56px -12px rgba(26, 15, 55, .16);
--ease: cubic-bezier(.22, 1, .36, 1);
--hover-t: .18s;
--w: 1160px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
/* Спутник атрибутов width/height у ![]()
: без height:auto браузер берёт
высоту буквально из атрибута и ломает пропорции (поймали на сертификате). */
img { height: auto; }
/* Переходы по якорям при работающем Lenis делает он сам, с offset: -88.
scroll-padding-top — тот же отступ под липкую шапку (16 + 56 + 6 плюс
10px просвета) для случая, когда Lenis отключён: prefers-reduced-motion
или не загрузился скрипт. */
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
/* Lenis smooth scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
body {
font-family: var(--sans);
font-size: 16px;
line-height: 1.6;
color: var(--ink);
background: linear-gradient(to bottom, #fdfcff, var(--paper));
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.wrap { max-width: var(--w); margin: 0 auto; padding: 0 24px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
/* ---------- scroll reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
[data-reveal], .reveal-item {
opacity: 0;
transform: translateY(10px);
transition: opacity .35s cubic-bezier(.3, .7, .4, 1), transform .35s cubic-bezier(.27, 1.06, .35, 1);
}
[data-reveal].in-view,
[data-stagger].in-view > .reveal-item {
opacity: 1;
transform: none;
}
/* blur reveal — for big surfaces like the footer */
[data-reveal-blur] {
opacity: 0;
transform: translateY(14px);
filter: blur(4px);
transition: opacity .4s var(--ease), transform .4s var(--ease), filter .4s var(--ease);
}
[data-reveal-blur].in-view {
opacity: 1;
transform: none;
filter: blur(0);
}
}
/* full-viewport sections, content vertically centered */
.fullscreen {
min-height: 100svh;
display: flex;
flex-direction: column;
justify-content: center;
}
.fullscreen > .wrap, .modules > .wrap { width: 100%; }
/* ---------- shared type ---------- */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
font-weight: 600;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--accent-deep);
}
h1, h2, h3 { font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
/* типографика переносов: заголовки — ровными строками, абзацы — без висячих слов
(неразрывные пробелы после предлогов расставлены в HTML скриптом _typo.py) */
h1, h2, h3, h4, .hs-title, .how-title, .mgrp-head h3 { text-wrap: balance; }
/* длинные слова («конфиденциальности», «Медициналық») ломаем, только если
они и правда не влезают — иначе на узких экранах появляется скролл */
h1, h2, h3, h4, p, li, dd, dt { overflow-wrap: break-word; }
p, li, blockquote, .m3-cap, .mfeat p, .hstep p, .us-copy p { text-wrap: pretty; }
.section { padding: 100px 0; }
.section-head { max-width: 680px; margin-bottom: 60px; }
.section-head h2 { font-size: clamp(30px, 3.8vw, 46px); line-height: 1.12; margin: 18px 0 14px; letter-spacing: -0.025em; }
.section-head p { color: var(--muted); font-size: 17px; }
/* ---------- buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--sans);
font-size: 15px;
font-weight: 600;
line-height: 1;
padding: 17px 30px;
border-radius: var(--r-pill);
border: 1px solid transparent;
text-decoration: none;
cursor: pointer;
transition: background var(--hover-t) var(--ease), border-color var(--hover-t) var(--ease),
transform var(--hover-t) var(--ease), box-shadow var(--hover-t) var(--ease);
white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(110, 17, 208, .3); }
.btn-primary:hover { background: var(--accent-hover); box-shadow: 0 8px 24px -6px rgba(142, 81, 255, .5); }
.btn-ghost { background: var(--paper); color: var(--ink); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--ink); box-shadow: var(--shadow-sm); }
.btn-inverse { background: #fff; color: var(--accent-deep); }
.btn-inverse:hover { background: var(--accent-tint); box-shadow: 0 8px 24px -6px rgba(30, 10, 60, .4); }
.btn-soft {
background: #fff;
color: var(--ink);
box-shadow: 0 2px 6px rgba(26, 15, 55, .06), 0 14px 34px -10px rgba(26, 15, 55, .18);
}
.btn-soft:hover { box-shadow: 0 4px 10px rgba(26, 15, 55, .08), 0 18px 40px -10px rgba(26, 15, 55, .22); }
.btn-outline-inverse { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn-outline-inverse:hover { border-color: #fff; }
/* ---------- header: logo · centered nav capsule · CTA ---------- */
.site-header {
position: sticky;
top: 0;
z-index: 50;
padding: 16px 22px 6px;
pointer-events: none;
}
.site-header .wrap {
position: relative;
max-width: 1280px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
height: 56px;
padding: 0;
}
.brand {
pointer-events: auto;
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
font-size: 17px;
letter-spacing: -0.01em;
text-decoration: none;
white-space: nowrap;
}
.brand img { width: 26px; height: 26px; }
/* Шапка липкая и прозрачная, поэтому под логотипом проезжает контент —
на странице прессы он налезал на карточки. Даём ему такую же пилюлю,
как у капсулы меню, переключателя языка и кнопки входа. */
.site-header .brand {
padding: 7px 14px 7px 10px;
border-radius: var(--r-pill);
background: rgba(255, 255, 255, .88);
backdrop-filter: blur(10px);
box-shadow: 0 0 0 1px rgba(38, 30, 70, .05), 0 6px 18px -8px rgba(24, 8, 60, .18);
}
.site-nav {
pointer-events: auto;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
gap: 0;
padding: 5px 8px;
background: rgba(255, 255, 255, .85);
backdrop-filter: blur(14px);
border: 1px solid rgba(26, 15, 55, .07);
border-radius: var(--r-pill);
box-shadow: 0 10px 34px rgba(26, 15, 55, .09);
}
.site-nav a {
font-size: 13.5px;
font-weight: 500;
color: var(--muted);
text-decoration: none;
transition: color var(--hover-t), background var(--hover-t);
white-space: nowrap;
padding: 8px 11px;
border-radius: var(--r-pill);
}
.site-nav a:hover { color: var(--ink); background: var(--mist); }
/* keep the capsule clear of the side groups on narrower screens */
@media (max-width: 1420px) {
.header-actions .login { display: none; }
}
@media (max-width: 1280px) {
.site-nav { position: static; transform: none; margin: 0 auto; }
}
.header-actions { pointer-events: auto; display: flex; align-items: center; gap: 8px; }
.header-actions .login {
font-size: 14px; font-weight: 500; color: var(--ink);
text-decoration: none; padding: 10px 16px; border-radius: var(--r-pill);
transition: background var(--hover-t);
background: rgba(255, 255, 255, .7);
backdrop-filter: blur(10px);
}
.header-actions .login:hover { background: var(--mist); }
.header-actions .btn { padding: 13px 24px; font-size: 14px; box-shadow: 0 10px 30px -8px rgba(110, 17, 208, .45); }
/* ---------- hero ---------- */
.hero {
position: sticky;
top: 0;
z-index: 0;
min-height: 100svh;
display: flex;
flex-direction: column;
justify-content: center;
background:
radial-gradient(1000px 540px at 82% -12%, var(--accent-tint) 0%, transparent 62%),
radial-gradient(700px 420px at 8% 108%, #f4f0ff 0%, transparent 55%),
linear-gradient(to bottom, var(--fog), var(--paper));
overflow: hidden;
margin-top: -82px; /* sit under the floating nav */
padding-top: 82px;
}
/* aurora backdrop */
.aurora {
position: absolute;
inset: -15% -5%;
pointer-events: none;
filter: blur(72px);
opacity: .5;
}
.aurora i {
position: absolute;
border-radius: 50%;
}
.aurora i:nth-child(1) {
width: 520px; height: 520px;
background: radial-gradient(circle, rgba(142, 81, 255, .28), transparent 65%);
top: -8%; right: 4%;
}
.aurora i:nth-child(2) {
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(196, 180, 255, .5), transparent 65%);
top: 34%; right: 26%;
}
.aurora i:nth-child(3) {
width: 360px; height: 360px;
background: radial-gradient(circle, rgba(221, 214, 255, .55), transparent 65%);
bottom: -6%; left: 30%;
}
@media (prefers-reduced-motion: no-preference) {
.aurora i:nth-child(1) { animation: drift-a 19s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { animation: drift-b 24s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { animation: drift-a 28s ease-in-out 2s infinite alternate-reverse; }
@keyframes drift-a { to { transform: translate(-70px, 44px) scale(1.12); } }
@keyframes drift-b { to { transform: translate(56px, -36px) scale(.94); } }
}
.hero .wrap {
position: relative;
width: 100%;
padding-top: 12px;
padding-bottom: 110px;
}
.hero h1 {
font-size: clamp(36px, 4.6vw, 56px);
line-height: 1.1;
margin: 22px 0 22px;
letter-spacing: -0.03em;
}
/* typewriter cursor */
.cursor {
display: inline-block;
width: 3px;
height: .92em;
margin-left: 4px;
background: var(--accent);
border-radius: 2px;
vertical-align: -0.08em;
}
@media (prefers-reduced-motion: no-preference) {
.cursor { animation: blink 1.1s steps(2, start) infinite; }
@keyframes blink { 50% { opacity: 0; } }
}
.hero-sub {
font-size: 17px;
color: var(--muted);
max-width: 480px;
margin-bottom: 26px;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
/* scroll-down hint */
.scroll-hint {
position: absolute;
left: 50%;
bottom: 26px;
transform: translateX(-50%);
color: var(--faint);
z-index: 2;
}
@media (prefers-reduced-motion: no-preference) {
.scroll-hint { animation: bob 2.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translate(-50%, 7px); } }
}
/* hero load-in */
@media (prefers-reduced-motion: no-preference) {
.hero-copy > * { opacity: 0; transform: translateY(18px); animation: rise .7s var(--ease) forwards; }
.hero-copy > *:nth-child(1) { animation-delay: .05s; }
.hero-copy > *:nth-child(2) { animation-delay: .12s; }
.hero-copy > *:nth-child(3) { animation-delay: .2s; }
.hero-copy > *:nth-child(4) { animation-delay: .28s; }
.hero-copy > *:nth-child(5) { animation-delay: .36s; }
.hero-copy > *:nth-child(6) { animation-delay: .44s; }
.audit { opacity: 0; transform: translateY(26px) rotate(-0.6deg); animation: rise-doc .8s var(--ease) .25s forwards; }
.audit.settled { animation: none; opacity: 1; }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes rise-doc { to { opacity: 1; transform: rotate(-0.6deg); } }
}
.hero-center .eyebrow { margin-bottom: 4px; }
.hs-title {
font-size: clamp(44px, 6vw, 76px);
line-height: 1.08;
letter-spacing: -0.03em;
font-weight: 500;
margin: 20px 0 22px;
}
/* заголовок — жёстко три строки: смена ротора не двигает соседние строки */
.hs-title { display: flex; flex-direction: column; align-items: flex-start; }
.hs-title > span { display: block; }
@media (min-width: 981px) {
/* три строки ровно: статичные строки тоже не переносятся */
.hs-title > span { white-space: nowrap; }
}
.hs-title em {
font-style: normal;
font-weight: 700;
font-size: .82em;
color: var(--accent-deep);
display: block;
line-height: 1.08;
white-space: nowrap;
transition: opacity .26s var(--ease), transform .26s var(--ease);
}
.hs-title em.rotor-out { opacity: 0; transform: translateY(-16px); }
.hs-title em.rotor-pre { opacity: 0; transform: translateY(18px); transition: none; }
.hs-sub { margin-left: auto; margin-right: auto; max-width: 560px; }
.hs-ctas {
display: flex;
justify-content: center;
gap: 12px;
margin: 34px auto 0;
}
.hs-cta { padding: 16px 30px; font-size: 16px; }
/* hero: сплит-раскладка — текст слева, фото-коллаж справа */
.hero-copy.hero-split {
display: grid;
grid-template-columns: 1.04fr 1fr;
align-items: center;
gap: 56px;
text-align: left;
max-width: none;
padding: 8px 0 24px;
}
.hero-copy.hero-split > * { min-width: 0; }
.hero-split .eyebrow { margin-bottom: 18px; }
.hero-split .hs-title { font-size: clamp(38px, 4.1vw, 58px); margin: 0 0 22px; }
.hero-split .hs-sub { margin: 0 0 30px; max-width: 580px; }
.hero-split .hs-ctas { justify-content: flex-start; flex-wrap: wrap; margin: 0 0 34px; }
.hs-cred { display: flex; align-items: center; gap: 12px; }
.hs-cred-ic {
flex: none;
width: 44px; height: 44px;
border-radius: 50%;
background: var(--accent-tint);
border: 1px solid var(--accent-line);
display: flex;
align-items: center;
justify-content: center;
}
.hs-cred-ic svg { width: 20px; height: 20px; stroke: var(--accent-deep); }
.hs-cred b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.hs-cred em { font-style: normal; font-size: 13px; color: var(--muted); }
.hero-collage { position: relative; height: 540px; }
.hc-fig {
position: absolute;
display: block;
padding: 10px;
border-radius: 26px;
background: linear-gradient(180deg, #ffffff 0%, #faf9fe 100%);
box-shadow:
0 0 0 1px rgba(38, 30, 70, .05),
0 3px 8px rgba(38, 30, 70, .06),
0 28px 56px -18px rgba(38, 30, 70, .26);
will-change: transform, opacity;
}
.hc-fig img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 18px;
}
.hc-f1 { width: 356px; height: 224px; left: 50%; top: 0; margin-left: -196px; z-index: 3; }
.hc-f2 { width: 236px; height: 330px; right: -28px; top: 24%; z-index: 3; }
.hc-f3 { width: 296px; height: 178px; left: -20px; bottom: 0; z-index: 2; }
.hc-deco { position: absolute; border-radius: 50%; }
.hc-deco.d1 { width: 58px; height: 58px; left: 6%; top: 4%; background: rgba(142, 81, 255, .18); }
.hc-deco.d2 { width: 34px; height: 34px; right: 4%; top: 38%; background: rgba(110, 17, 208, .14); border-radius: 12px; }
.hc-deco.d3 { width: 24px; height: 24px; left: 12%; bottom: 12%; background: rgba(142, 81, 255, .25); }
.hc-deco.d4 { width: 46px; height: 46px; right: 8%; bottom: 2%; background: rgba(142, 81, 255, .16); }
@media (prefers-reduced-motion: no-preference) {
.hc-fig, .hc-deco { opacity: 0; }
/* появление + парение одной строкой: раздельные шортхенды затирают друг друга */
.hc-f1 { animation: hc-in .7s var(--ease) .35s forwards, floaty 8s ease-in-out 1.8s infinite; }
.hc-f2 { animation: hc-in .7s var(--ease) .5s forwards, floaty 7s ease-in-out 2.2s infinite; }
.hc-f3 { animation: hc-in .7s var(--ease) .62s forwards, floaty 9s ease-in-out 2.6s infinite; }
.hc-deco.d1 { animation: hc-in .7s ease .8s forwards, floaty 6s ease-in-out 1.8s infinite; }
.hc-deco.d2 { animation: hc-in .7s ease .9s forwards, floaty 6.5s ease-in-out 2.1s infinite; }
.hc-deco.d3 { animation: hc-in .7s ease 1s forwards, floaty 7s ease-in-out 2.4s infinite; }
.hc-deco.d4 { animation: hc-in .7s ease 1.1s forwards, floaty 7.5s ease-in-out 1.4s infinite; }
@keyframes hc-in { from { opacity: 0; transform: translateY(24px) scale(.94); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
.hc-fig, .hc-deco { opacity: 1; }
}
@media (max-width: 980px) {
.hero-copy.hero-split { grid-template-columns: minmax(0, 1fr); gap: 28px; text-align: center; }
.hero-split .hs-sub { margin: 18px auto 26px; }
.hero-split .hs-ctas { justify-content: center; }
.hs-cred { justify-content: center; }
.hero-collage { max-width: 560px; margin: 0 auto; width: 100%; }
}
@media (max-width: 640px) {
.hero-collage { zoom: .72; }
}
.doc {
position: relative;
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--shadow-float);
overflow: hidden;
}
.doc-bar .time { margin-left: auto; color: var(--accent-deep); font-weight: 600; }
mark.flag {
background: transparent;
color: inherit;
border-bottom: 2px solid transparent;
border-radius: 2px;
transition: background .4s ease, border-color .4s ease;
}
.done mark.flag-1, .no-anim mark.flag-1 { background: var(--red-bg); border-color: var(--red); }
.done mark.flag-2, .no-anim mark.flag-2 { background: var(--orange-bg); border-color: var(--orange); }
.done mark.flag-3, .no-anim mark.flag-3 { background: var(--blue-bg); border-color: var(--blue); }
.done .finding, .no-anim .finding { opacity: 1; transform: none; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.done .finding:nth-child(1) { transition-delay: .15s; }
.done .finding:nth-child(2) { transition-delay: .5s; }
.done .finding:nth-child(3) { transition-delay: .85s; }
.done .doc-total, .no-anim .doc-total { opacity: 1; transition: opacity .5s ease 1.2s; }
.doc-total .ok { margin-left: auto; color: var(--green); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
.chip-tr { animation: floaty 7s ease-in-out infinite; }
.chip-bl { animation: floaty 8s ease-in-out 1.2s infinite; }
@keyframes floaty { 50% { transform: translateY(-7px); } }
}
/* ---------- overlay layer sliding over the pinned hero ---------- */
.page-over {
position: relative;
z-index: 2;
padding-top: 20px;
background: linear-gradient(to bottom, #fdfcff, var(--paper) 400px);
border-radius: 36px 36px 0 0;
box-shadow: 0 -24px 64px rgba(26, 15, 55, .14);
}
/* ---------- metrics: interactive tilt cards ---------- */
.metrics-sec { padding: 96px 0; }
.metrics-sec .m3-grid { margin-top: 0; }
.m3-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
perspective: 1200px;
}
@media (max-width: 900px) {
.m3-grid { grid-template-columns: minmax(0, 1fr); }
}
.m3 {
position: relative;
display: flex;
flex-direction: column;
gap: 0;
min-height: 222px;
padding: 26px 30px 28px;
border-radius: var(--r-2xl);
box-shadow:
0 1px 2px rgba(38, 30, 70, .04),
0 10px 22px -12px rgba(38, 30, 70, .1),
0 30px 56px -24px rgba(38, 30, 70, .18);
transform-style: preserve-3d;
will-change: transform;
background: linear-gradient(180deg, #ffffff 0%, #fcfbfe 100%);
color: var(--ink);
border: 1px solid var(--border);
}
.m3-top {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 24px;
transform: translateZ(30px);
}
.m3-ic {
flex: none;
width: 44px; height: 44px;
border-radius: 14px;
background: var(--accent-tint);
border: 1px solid var(--accent-line);
display: inline-flex;
align-items: center;
justify-content: center;
}
.m3-ic svg { width: 21px; height: 21px; stroke: var(--accent-deep); fill: none; }
.m3-chip {
color: var(--muted);
font-size: 11.5px;
font-weight: 600;
letter-spacing: .09em;
text-transform: uppercase;
white-space: nowrap;
}
.m3-num {
margin: 0 0 14px;
font-size: clamp(36px, 3.4vw, 50px);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.02;
font-variant-numeric: tabular-nums;
transform: translateZ(42px);
}
.m3-num { color: var(--accent-deep); }
/* оптическая компенсация: у «−» внутри глифа своё поле — иначе цифра кажется сдвинутой */
.m3:nth-child(3) .m3-num { margin-left: -.07em; }
.m3-cap {
font-size: 14px;
line-height: 1.55;
max-width: 300px;
color: var(--muted);
transform: translateZ(26px);
}
/* clinics: static centered row before reviews */
.clinics-band { padding: 64px 0 0; }
.clinics-title {
text-align: center;
font-size: clamp(24px, 2.8vw, 34px);
letter-spacing: -0.02em;
margin-bottom: 40px;
}
.clinics-row {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.clinics-row .logo-chip {
height: 104px;
flex: 1 1 180px;
max-width: 232px;
background: var(--paper);
border-radius: var(--r-lg);
}
.clinics-row .logo-chip img { max-height: 56px; max-width: 150px; filter: none; opacity: 1; }
/* Шесть логотипов — две ровные строки по три, с 600px и до самых широких
экранов. Именно сеткой: у flex ширину ряда решает свободное место, и на
разных ширинах выходило то 4+1, то 5+1, то 4+2, причём одинокий внизу был
шире остальных, потому что flex-grow раздаёт место только внутри ряда.
Шесть в один ряд на десктопе не ставим: плитка вышла бы 172px, внутри с
отступами 132px, и логотипы (до 168px) пришлось бы сжимать.
min-width: 0 у плитки отменяет общий min-width: 172px, иначе на 600px
три плитки не влезали бы в 552px. */
@media (min-width: 600px) {
.clinics-row {
display: grid;
/* 232px — та же ширина, что у max-width плитки: если дорожка шире, плитка
прижимается к её началу и зазоры между логотипами выходят неравными. */
grid-template-columns: repeat(3, minmax(0, 232px));
justify-content: center;
}
.clinics-row .logo-chip { min-width: 0; }
/* Логотип — flex-элемент внутри плитки, у него min-width: auto равен
собственной ширине картинки, поэтому AMU и Open Medical Channel не
сжимались и выпирали за плитку на 600–700px. */
.clinics-row .logo-chip img { min-width: 0; height: auto; }
}
/* Ниже 600px три плитки не влезают, а две дают 2+2+1 — одинокий внизу.
Ставим по одной в ряд, как уже было на узких телефонах. Именно сеткой:
у flex-элемента basis 100% подрезается max-width 232px, и две плитки
продолжали влезать в ряд. */
@media (max-width: 599px) {
.clinics-row { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
/* в сетке плитка подгонялась под свой логотип и ширины шли вразнобой
(205/172/189) — задаём одну на всех */
.clinics-row .logo-chip { width: 232px; max-width: 100%; }
}
.clinics .lead {
font-size: 13px;
color: var(--faint);
max-width: 170px;
line-height: 1.45;
flex: none;
}
@media (prefers-reduced-motion: no-preference) {
.marquee-track { animation: marquee 30s linear infinite; }
@media (hover: hover) and (pointer: fine) { /* см. пояснение у .t-track */
.marquee:hover .marquee-track { animation-play-state: paused; }
}
@keyframes marquee { to { transform: translateX(calc(-50% - 7px)); } }
}
@media (prefers-reduced-motion: reduce) {
.marquee-track .logo-chip[aria-hidden="true"] { display: none; }
}
.logo-chip {
display: flex;
align-items: center;
justify-content: center;
height: 104px;
min-width: 172px;
padding: 0 20px;
background: var(--fog);
border: 1px solid var(--border);
border-radius: var(--r-lg);
transition: background var(--hover-t) var(--ease), border-color var(--hover-t) var(--ease);
}
.logo-chip img {
max-height: 64px;
max-width: 156px;
width: auto;
object-fit: contain;
filter: grayscale(1);
opacity: .6;
mix-blend-mode: multiply;
transition: filter var(--hover-t), opacity var(--hover-t);
}
/* выравниваем визуальный вес логотипов клиник */
.logo-chip img[src*="clinic-amu"] { max-height: 92px; max-width: 168px; }
.logo-chip img[src*="clinic-aspan"] { max-height: 92px; max-width: 168px; }
.logo-chip img[src*="clinic-densaulyk"] { max-height: 94px; max-width: 168px; }
.logo-chip img[src*="clinic-kaznii"] { max-height: 92px; max-width: 168px; }
.logo-chip img[src*="clinic-asmed"] { max-height: 58px; }
.logo-chip img[src*="clinic-klinika"] { max-height: 54px; }
.logo-chip img[src*="clinic-kaznii"] { max-height: 86px; }
@media (hover: hover) and (pointer: fine) { /* см. пояснение у .t-track */
.logo-chip:hover { border-color: var(--accent-line); background: var(--accent-tint); }
.logo-chip:hover img { filter: none; opacity: 1; }
}
/* clinic logos stay full-color (grayscale is only for the partners strip) */
.clinics .logo-chip { background: var(--paper); }
.clinics .logo-chip img { filter: none; opacity: 1; }
@media (hover: hover) and (pointer: fine) { /* см. пояснение у .t-track */
.clinics .logo-chip:hover { background: var(--paper); border-color: var(--accent-line); }
}
/* ---------- modules: hover carousel ---------- */
.modules {
/* лежит на белой карте .page-over — своя рамка/радиус давали двойной контур */
background: transparent;
border: 0;
border-radius: 0;
min-height: 100svh;
display: flex;
flex-direction: column;
justify-content: center;
padding: 88px 0;
overflow: hidden;
}
.mc-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 32px;
margin-bottom: 30px;
}
.mc-title-wrap { max-width: 780px; margin-bottom: 0; }
.mc-title-wrap h2 { font-size: clamp(28px, 3.4vw, 40px); }
.mc-sub { color: var(--faint); font-weight: 400; }
@media (prefers-reduced-motion: no-preference) {
.mc-track { animation: mc-scroll 60s linear infinite; }
@media (hover: hover) and (pointer: fine) { /* см. пояснение у .t-track */
.mc-viewport:hover .mc-track { animation-play-state: paused; }
}
@keyframes mc-scroll { to { transform: translateX(calc(-50% - 8px)); } }
}
@media (prefers-reduced-motion: no-preference) {
.mcc-cover::after { animation: mcc-sheen 6s ease-in-out infinite; }
.mcc:nth-child(2n) .mcc-cover::after { animation-delay: 1.5s; }
.mcc:nth-child(3n) .mcc-cover::after { animation-delay: 3s; }
@keyframes mcc-sheen {
0%, 55% { transform: translateX(-80%); }
75%, 100% { transform: translateX(80%); }
}
}
/* ---------- modules showcase ---------- */
.showcase {
display: grid;
grid-template-columns: 400px minmax(0, 1fr);
gap: 36px;
align-items: center;
}
.sm-entry.active {
background: var(--paper);
border: 1px solid var(--accent-line);
box-shadow: var(--shadow-sm);
}
.sm-entry.active .sm-item { color: var(--ink); }
.sm-entry.active .sm-desc { grid-template-rows: 1fr; opacity: 1; }
.sm-entry.active .sm-desc p { padding-bottom: 14px; }
.sm-item {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 9px 16px;
border: 1px solid transparent;
border-radius: 14px;
background: transparent;
font: inherit;
font-size: 14.5px;
font-weight: 500;
color: var(--muted);
text-align: left;
cursor: pointer;
transition: background var(--hover-t) var(--ease), color var(--hover-t), border-color var(--hover-t) var(--ease);
overflow: hidden;
}
.sm-item:hover { background: rgba(255, 255, 255, .7); color: var(--ink); }
.sm-item { width: 100%; }
.sm-item .beta {
font-size: 9.5px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--accent-deep);
background: var(--accent-tint);
border: 1px solid var(--accent-line);
padding: 1px 7px;
border-radius: var(--r-pill);
}
@media (prefers-reduced-motion: no-preference) {
.sm-entry.active .sm-item::after {
content: "";
position: absolute;
left: 0; bottom: 0;
height: 2px;
background: var(--accent);
animation: sm-progress var(--sm-dwell, 5s) linear forwards;
}
@media (hover: hover) and (pointer: fine) { /* см. пояснение у .t-track */
.showcase:hover .sm-entry.active .sm-item::after { animation-play-state: paused; }
}
@keyframes sm-progress { from { width: 0; } to { width: 100%; } }
}
/* modules: rette-style группы — сцена + нумерованный список модулей, чередование сторон */
.mgroups { display: flex; flex-direction: column; gap: 28px; }
.mgrp {
display: flex;
align-items: center;
gap: 44px;
padding: 26px 16px;
}
.mgrp:nth-child(even) { flex-direction: row-reverse; }
.mgrp-scene {
flex: 0 0 400px; /* одна ширина колонки во всех блоках — позиции совпадают */
zoom: 1.5;
display: flex;
justify-content: center;
align-items: center;
}
.mgrp-info { flex: 1; max-width: 560px; }
.mgrp-head {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 24px;
}
.mgrp-num {
flex: none;
width: 56px; height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, #ffffff 0%, #f3effc 100%);
box-shadow: inset 0 2px 0 rgba(255, 255, 255, .95), 0 4px 10px rgba(38, 30, 70, .06), 0 14px 28px -12px rgba(38, 30, 70, .18);
font-size: 24px;
font-weight: 600;
color: #3f3352;
}
.mgrp-head h3 {
font-size: clamp(26px, 2.4vw, 33px);
font-weight: 650;
letter-spacing: -.01em;
color: var(--ink);
}
.mfeat { position: relative; padding-left: 20px; margin-bottom: 18px; }
.mfeat::before {
content: "";
position: absolute;
left: 0; top: 7px;
width: 8px; height: 8px;
border-radius: 2.5px;
background: var(--accent);
}
.mfeat b { display: block; font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.mfeat b .beta { vertical-align: 2px; margin-left: 4px; }
.mfeat p { font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.mgrp-note { margin-top: 22px; font-size: 14.5px; color: var(--muted); }
.mgrp-note a { color: var(--accent-deep); font-weight: 600; text-decoration: none; }
.mgrp-note a:hover { text-decoration: underline; }
@media (max-width: 1020px) {
.mgrp, .mgrp:nth-child(even) { flex-direction: column; gap: 20px; padding: 28px 0; }
.mgrp-scene { zoom: 1; flex: 0 0 auto; }
.mgrp-info { max-width: 100%; }
}
/* iPad в ландшафте — ровно 1024px — попадал в десктопную раскладку модулей:
сцена забирала 644px, а на текст оставалось 300px. Тянем стек до 1120px.
order повторяет правило из блока 1020px: сначала текст, потом анимация. */
@media (min-width: 1021px) and (max-width: 1120px) {
.mgrp, .mgrp:nth-child(even) { flex-direction: column; gap: 20px; padding: 28px 0; }
.mgrp-scene { zoom: 1.3; flex: 0 0 auto; order: 2; }
.mgrp-info { max-width: 100%; order: 1; }
}
.sm-pane {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 32px;
padding: 40px 48px;
text-align: left;
opacity: 0;
transition: opacity .35s var(--ease);
pointer-events: none;
}
.sm-pane.active { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: no-preference) {
.sm-pane.active .sm-info { animation: sm-info-in .65s cubic-bezier(.27, 1.06, .35, 1) both; }
.sm-pane.active .sm-scene { animation: sm-scene-in .75s cubic-bezier(.27, 1.08, .35, 1) .06s both; }
@keyframes sm-info-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes sm-scene-in { from { opacity: 0; transform: translateX(38px) scale(.96); } to { opacity: 1; transform: none; } }
}
.sm-pane .mcc-shot { box-shadow: 0 18px 40px -12px rgba(26, 15, 55, .22); }
.sm-info .beta {
font-size: 10px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--accent-deep);
background: var(--accent-tint);
border: 1px solid var(--accent-line);
padding: 2px 8px;
border-radius: var(--r-pill);
}
@media (max-width: 1020px) {
.showcase { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.sm-item { flex: none; border: 1px solid var(--border); border-radius: 999px; background: var(--paper); padding: 9px 15px; font-size: 13.5px; }
.sm-pane { flex-direction: column; justify-content: center; text-align: center; gap: 24px; padding: 32px 24px; }
.sm-entry.active { background: none; border: 0; box-shadow: none; }
.sm-entry.active .sm-item { background: var(--paper); border: 1px solid var(--accent-line); box-shadow: var(--shadow-sm); }
}
@media (prefers-reduced-motion: no-preference) {
.mcc-shot { animation: shot-bob 6s ease-in-out infinite; }
.mcc:nth-child(2n) .mcc-shot { animation-delay: 1.1s; }
.mcc:nth-child(3n) .mcc-shot { animation-delay: 2.3s; }
@keyframes shot-bob { 50% { transform: translateY(-7px); } }
}
/* scene 01: полный цикл проверки (8s loop) */
/* static fallback: reduced motion shows the finished report */
/* scene: «Поликлиника» — конвейер проверок, точный порт _proto-polyclinic.html (цикл 9.5с, JS-таймер в index.html) */
.sc5 {
position: relative;
display: block;
width: 400px;
height: 340px;
overflow: hidden;
}
.sc5-scene {
position: absolute;
left: -30px; top: -60px;
width: 1000px; height: 1000px;
transform: scale(.46);
transform-origin: 0 0;
}
.sc5-zone {
position: absolute;
left: 0; top: 0;
width: 250px; height: 280px;
border-radius: 44px;
background: linear-gradient(180deg, #fbfaff 0%, #f6f2fe 100%);
border: 1.5px solid #e6e0fc;
box-shadow: inset 0 2px 0 rgba(255, 255, 255, .9), 0 16px 36px -18px rgba(38, 30, 70, .12);
will-change: transform, box-shadow;
}
.sc5-chip {
position: absolute;
top: 0; left: 0;
padding: 12px 30px;
border-radius: 20px;
background: linear-gradient(180deg, #ffffff 0%, #f9f7fd 100%);
box-shadow: inset 0 2px 0 rgba(255, 255, 255, .95), 0 2px 6px rgba(38, 30, 70, .04), 0 10px 22px -12px rgba(38, 30, 70, .1);
font-size: 20px;
font-weight: 500;
color: #565b6a;
white-space: nowrap;
transform: translateX(-50%);
transition: transform .25s cubic-bezier(.27, 1.06, .35, 1), box-shadow .25s ease, color .25s ease;
}
.sc5-chip.on {
color: #6e11d0;
transform: translateX(-50%) scale(1.08);
box-shadow: inset 0 2px 0 rgba(255, 255, 255, .95), 0 8px 18px rgba(110, 17, 208, .12), 0 22px 44px -12px rgba(110, 17, 208, .3);
}
.sc5-doc {
position: absolute;
left: 0; top: 0;
width: 180px; height: 198px;
padding: 16px;
border-radius: 26px;
background: linear-gradient(180deg, #ffffff 0%, #faf9fe 100%);
box-shadow:
0 1px 2px rgba(38, 30, 70, .03),
0 6px 14px -8px rgba(38, 30, 70, .08),
0 18px 36px -16px rgba(38, 30, 70, .14);
will-change: transform, opacity;
}
.sc5-row { display: flex; gap: 8px; margin-bottom: 9px; }
.sc5-b {
position: relative;
height: 18px;
border-radius: 7px;
background: linear-gradient(180deg, var(--c1), var(--c2));
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, .5),
inset 0 -1px 2px rgba(20, 10, 50, .1),
0 2px 4px -1px rgba(35, 25, 80, .16);
}
.sc5-b.tb { height: 20px; border-radius: 8px; }
.sc5-b .sc5-fill {
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(180deg, #4fd68f, #12b76a);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45), inset 0 -1px 2px rgba(20, 10, 50, .1);
opacity: 0;
}
.sc5-scan {
position: absolute;
left: 12px; right: 12px;
top: 0;
height: 4px;
border-radius: 2px;
background: linear-gradient(90deg, rgba(142, 81, 255, 0), #8e51ff 30%, #8e51ff 70%, rgba(142, 81, 255, 0));
box-shadow: 0 0 12px rgba(142, 81, 255, .4);
opacity: 0;
}
.sc5-stamp {
position: absolute;
right: -10px; bottom: -10px;
width: 46px; height: 46px;
border-radius: 50%;
background: linear-gradient(180deg, #4fd68f, #12b76a);
box-shadow: inset 0 2px 1px rgba(255, 255, 255, .45), 0 6px 12px -4px rgba(18, 183, 106, .35);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
}
.sc5-stamp svg { width: 26px; height: 26px; }
.sc5-cap {
position: absolute;
left: 0; top: 0;
transform: translateX(-50%);
font-size: 19px;
font-weight: 500;
color: #8a8598;
white-space: nowrap;
opacity: 0;
}
/* scene: «Стационар» — точный порт _proto-clay-scene.html (цикл 8.1с, JS-таймер в index.html) */
.sc4 {
position: relative;
display: block;
width: 400px;
height: 340px;
}
/* сцена прототипа 1000×1000, вписана масштабом 0.4 */
.sc4-scene {
position: absolute;
left: -30px; top: -60px;
width: 1000px; height: 1000px;
transform: scale(.46);
transform-origin: 0 0;
}
.sc4-doc {
position: absolute;
left: 250px; top: 170px;
width: 500px; height: 660px;
padding: 44px 40px;
border-radius: 44px;
background: linear-gradient(180deg, #ffffff 0%, #faf9fe 100%);
box-shadow:
0 1px 2px rgba(38, 30, 70, .04),
0 10px 24px -8px rgba(38, 30, 70, .08),
0 32px 64px -24px rgba(38, 30, 70, .18);
will-change: transform;
}
.sc4-title {
display: block;
font-size: 32px;
font-weight: 700;
letter-spacing: -.01em;
color: #3f3352;
margin-bottom: 28px;
}
.sc4-body { display: block; }
.sc4-row { display: flex; gap: 10px; margin-bottom: 10px; }
.sc4-pill {
position: relative;
height: 40px;
border-radius: 11px;
background: linear-gradient(180deg, var(--c1), var(--c2));
box-shadow:
inset 0 2px 1px rgba(255, 255, 255, .5),
inset 0 -2px 3px rgba(20, 10, 50, .12),
0 5px 9px -2px rgba(35, 25, 80, .25);
will-change: transform, opacity, filter;
}
.sc4-pill .sc4-fill { /* зелёный слой поверх оранжевой пилюли */
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(180deg, var(--g1), var(--g2));
box-shadow: inset 0 2px 2px rgba(255, 255, 255, .45), inset 0 -2px 3px rgba(20, 10, 50, .10);
opacity: 0;
}
.sc4-ref {
position: absolute;
left: 82px;
width: max-content;
padding: 22px 26px;
border-radius: 24px;
background: linear-gradient(180deg, #ffffff 0%, #f7f5fc 100%);
box-shadow:
inset 0 2px 0 rgba(255, 255, 255, .95),
0 4px 10px rgba(38, 30, 70, .06),
0 24px 48px -14px rgba(38, 30, 70, .24);
font-size: 21px;
font-weight: 600;
color: #3f3352;
white-space: nowrap;
opacity: 0;
will-change: transform, opacity;
}
.sc4-ref.c0 { top: 418px; }
.sc4-ref.c1 { top: 512px; }
.sc4-check {
position: absolute;
left: 50%; top: 50%;
width: 320px; height: 320px;
margin: -160px 0 0 -160px;
filter: drop-shadow(0 12px 18px rgba(38, 30, 70, .28));
opacity: 0;
will-change: transform, opacity;
}
/* scene: «Для всей клиники» — ряд инструментов, точный порт _proto-tools.html (цикл 12с, JS-таймер в index.html) */
.sc6 {
position: relative;
display: block;
width: 400px;
height: 340px;
overflow: hidden;
}
.sc6-scene {
position: absolute;
left: -30px; top: -60px;
width: 1000px; height: 1000px;
transform: scale(.46);
transform-origin: 0 0;
}
.sc6-card {
position: absolute;
left: 350px; top: 290px;
width: 300px; height: 440px;
padding: 24px 24px;
border-radius: 30px;
background: linear-gradient(180deg, #ffffff 0%, #faf9fe 100%);
box-shadow:
0 1px 2px rgba(38, 30, 70, .03),
0 8px 18px -10px rgba(38, 30, 70, .08),
0 22px 44px -20px rgba(38, 30, 70, .13);
transition: box-shadow .45s ease;
will-change: transform, opacity;
}
.sc6-card.lead {
box-shadow:
0 1px 2px rgba(38, 30, 70, .04),
0 12px 26px -12px rgba(38, 30, 70, .12),
0 34px 64px -24px rgba(38, 30, 70, .2);
}
.sc6-card > * { transition: opacity .4s ease; }
.sc6-title {
display: block;
font-size: 19px;
font-weight: 650;
letter-spacing: -.01em;
color: #3f3352;
margin-bottom: 18px;
}
.sc6-tag {
position: absolute;
left: 24px; bottom: 20px;
padding: 7px 14px;
border-radius: 12px;
background: #f5f3ff;
border: 1px solid #e6e0fc;
font-size: 12px;
font-weight: 600;
color: #6e11d0;
white-space: nowrap;
}
.sc6-dots {
position: absolute;
left: 500px; top: 772px;
display: flex;
gap: 8px;
transform: translateX(-50%);
}
.sc6-dot {
width: 8px; height: 8px;
border-radius: 6px;
background: #ddd6ff;
transition: width .5s cubic-bezier(.27, 1.06, .35, 1), background .35s ease;
}
.sc6-dot.on { width: 26px; background: #8e51ff; }
.sc6-bars {
position: relative;
display: flex;
align-items: flex-end;
gap: 12px;
height: 300px;
padding: 0 2px;
}
.sc6-bars i {
flex: 1;
border-radius: 9px 9px 6px 6px;
background: linear-gradient(180deg, #b9a4f9, #9a72f6);
box-shadow: inset 0 2px 1px rgba(255, 255, 255, .45), inset 0 -2px 3px rgba(20, 10, 50, .1), 0 3px 6px -2px rgba(35, 25, 80, .15);
height: 0%;
}
.sc6-trend { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.sc6-trend path {
fill: none;
stroke: #6e11d0;
stroke-width: 4.5;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 3px 6px rgba(110, 17, 208, .2));
}
.sc6-doc { display: flex; flex-direction: column; gap: 12px; }
.sc6-defect {
align-self: flex-start;
padding: 8px 14px;
border-radius: 12px;
background: linear-gradient(180deg, #ff9a6b, #f54a00);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4), 0 4px 10px -4px rgba(245, 74, 0, .32);
color: #fff;
font-size: 12.5px;
font-weight: 600;
line-height: 1.35;
margin-bottom: 2px;
opacity: 0;
}
.sc6-trow { display: flex; gap: 8px; transform-origin: left center; }
.sc6-b {
height: 16px;
border-radius: 7px;
background: linear-gradient(180deg, #b9a4f9, #9a72f6);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5), inset 0 -1px 2px rgba(20, 10, 50, .1), 0 2px 4px -1px rgba(35, 25, 80, .16);
}
.sc6-stamp {
align-self: center;
margin-top: 18px;
padding: 11px 20px;
border-radius: 15px;
background: linear-gradient(180deg, #4fd68f, #12b76a);
box-shadow: inset 0 2px 1px rgba(255, 255, 255, .4), 0 6px 14px -6px rgba(18, 183, 106, .32);
color: #fff;
font-size: 14.5px;
font-weight: 600;
white-space: nowrap;
opacity: 0;
}
.sc6-search {
display: flex;
align-items: center;
gap: 9px;
padding: 12px 15px;
border-radius: 16px;
background: #fff;
border: 1.5px solid #e6e0fc;
box-shadow: inset 0 2px 0 rgba(255, 255, 255, .9), 0 5px 12px -6px rgba(38, 30, 70, .07);
font-size: 13.5px;
color: #565b6a;
min-height: 21px;
white-space: nowrap;
}
.sc6-search svg { flex: none; width: 15px; height: 15px; stroke: #8e51ff; }
.sc6-caret { display: inline-block; width: 2px; height: 15px; background: #8e51ff; vertical-align: -2px; }
.sc6-answer {
display: block;
margin-top: 14px;
padding: 15px 16px;
border-radius: 16px;
background: linear-gradient(180deg, #faf8ff, #f4f0fd);
border: 1.5px solid #e6e0fc;
opacity: 0;
will-change: transform, opacity;
}
.sc6-answer .sc6-b { display: block; height: 13px; border-radius: 6px; margin-bottom: 9px; background: linear-gradient(180deg, #c9b8fa, #ab86f7); box-shadow: inset 0 1px 1px rgba(255,255,255,.5); }
.sc6-src { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: #6e11d0; }
.mcc-panel .beta {
font-size: 10px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--accent-deep);
background: var(--accent-tint);
border: 1px solid var(--accent-line);
padding: 2px 8px;
border-radius: var(--r-pill);
}
/* touch devices: no hover — keep panel open */
/* ---------- how it works: slim strip ---------- */
/* «Как это работает» — фиолетовый остров со скруглёнными краями */
.how {
padding: 72px 0 78px;
border-radius: 36px;
background:
radial-gradient(820px 460px at 88% -12%, rgba(255, 255, 255, .17) 0%, transparent 60%),
radial-gradient(700px 420px at 6% 112%, rgba(40, 8, 90, .42) 0%, transparent 60%),
var(--accent);
color: rgba(255, 255, 255, .88);
overflow: hidden;
}
/* остров «Как это работает» раскрывается по скроллу (как у rette) */
.how { transform-origin: 50% 50%; will-change: transform; }
.how-head { text-align: center; max-width: 620px; margin: 0 auto 44px; }
.how-title {
font-size: clamp(28px, 3.2vw, 42px);
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1.12;
color: #fff;
margin-bottom: 14px;
}
.how-sub { font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, .74); }
.how-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
max-width: 1120px;
margin: 0 auto;
}
.hstep {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: 10px;
padding: 24px 24px 26px;
border-radius: 24px;
background: rgba(255, 255, 255, .12);
border: 1px solid rgba(255, 255, 255, .24);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 18px 36px -20px rgba(30, 6, 70, .45);
backdrop-filter: blur(8px);
}
/* стрелка-коннектор между шагами */
.hstep:not(:last-child)::after {
content: "";
position: absolute;
right: -13px;
top: 44px;
width: 8px; height: 8px;
border-top: 2px solid rgba(255, 255, 255, .5);
border-right: 2px solid rgba(255, 255, 255, .5);
transform: rotate(45deg);
}
.hstep-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.hstep-num {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px; height: 34px;
border-radius: 50%;
background: #fff;
box-shadow: 0 6px 14px -4px rgba(20, 4, 50, .35);
font-size: 13px;
font-weight: 700;
color: var(--accent-deep);
}
.hstep-ic {
flex: none;
width: 34px; height: 34px;
border-radius: 11px;
background: rgba(255, 255, 255, .16);
border: 1px solid rgba(255, 255, 255, .26);
display: inline-flex;
align-items: center;
justify-content: center;
}
.hstep-ic svg { width: 18px; height: 18px; stroke: #fff; fill: none; }
.hstep h3 { font-size: 16px; letter-spacing: -0.01em; color: #fff; }
.hstep p { font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .74); }
.how .advisory {
color: rgba(255, 255, 255, .72);
border-color: rgba(255, 255, 255, .28);
}
.how .advisory::before { color: rgba(255, 255, 255, .8); }
/* аватар-логотип клиники в отзывах */
/* 52px — как у аватаров-иллюстраций, иначе логотипы выглядели мельче соседей */
.quote .avatar.avatar-logo { width: 52px; height: 52px; background: #fff; padding: 0; overflow: hidden; box-shadow: inset 0 0 0 1px var(--border); }
.quote .avatar.avatar-logo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; border-radius: inherit; }
/* иллюстрация-аватар: врач / клиника */
.quote .avatar.avatar-art {
width: 52px; height: 52px;
background: none;
padding: 0;
overflow: hidden;
box-shadow: inset 0 0 0 1px rgba(26, 15, 55, .07);
}
.quote .avatar.avatar-art svg { width: 100%; height: 100%; display: block; }
@media (max-width: 1020px) {
.how-strip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hstep:nth-child(2)::after { display: none; }
}
@media (max-width: 640px) {
.how-strip { grid-template-columns: minmax(0, 1fr); }
.hstep::after { display: none; }
}
.advisory {
margin-top: 36px;
justify-content: center;
font-size: 13.5px;
color: var(--faint);
display: flex;
gap: 8px;
align-items: baseline;
}
.advisory::before { content: "*"; color: var(--accent); font-weight: 700; }
/* ---------- reviews: vertical testimonial columns ---------- */
/* pinned under the security layer (top offset set in JS) */
.reviews {
position: sticky;
top: 0;
z-index: 1;
padding-bottom: 156px;
}
/* second overlay: security and everything after slides over reviews */
.layer-2 {
position: relative;
z-index: 3;
background: var(--paper);
border-radius: 36px 36px 0 0;
box-shadow: 0 -24px 64px rgba(26, 15, 55, .14);
}
.layer-2 .security { border-radius: 36px; }
.reviews-head {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.t-columns {
display: flex;
gap: 18px;
justify-content: center;
max-height: 440px;
overflow: hidden;
-webkit-mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
}
.t-col { width: 350px; max-width: 100%; flex: none; }
.t-track {
display: flex;
flex-direction: column;
gap: 18px;
}
@media (prefers-reduced-motion: no-preference) {
.t-track { animation: t-scroll var(--dur, 28s) linear infinite; }
/* Пауза только на настоящем десктопе: курсор есть И раскладка трёхколоночная.
На тачскрине после тапа элемент остаётся в :hover до следующего тапа
в стороне, и лента останавливалась насовсем. Планшет не останавливаем
даже с подключённой мышью — там отзывы должны просто ехать. */
@media (hover: hover) and (pointer: fine) and (min-width: 1160px) {
.t-col:hover .t-track { animation-play-state: paused; }
}
@keyframes t-scroll { to { transform: translateY(calc(-50% - 9px)); } }
}
@media (prefers-reduced-motion: reduce) {
.t-columns { max-height: none; -webkit-mask-image: none; mask-image: none; }
.t-track > [aria-hidden="true"] { display: none; }
}
.t-col-2 { display: none; }
.t-col-3 { display: none; }
/* Планшет: две дорожки, ширина резиновая. С жёсткими 350px два столбца плюс
отступ требуют 718px, а на 760px контейнер даёт 712 — второй столбец
обрезался, а на 768px оставался зазор в 2px, то есть на реальном планшете
с другими отступами уезжал тоже. */
@media (min-width: 760px) and (max-width: 1159px) {
.t-col-2 { display: block; }
/* max-width, чтобы на широком планшете карточки не растягивались до 550px —
контейнер и так центрирован. */
.t-col { width: auto; flex: 1 1 0; min-width: 0; max-width: 420px; }
}
@media (min-width: 1160px) {
.t-col-2 { display: block; }
.t-col-3 { display: block; }
}
.t-stat {
border-radius: var(--r-2xl);
padding: 28px 30px 26px;
transition: transform var(--hover-t) var(--ease), box-shadow var(--hover-t) var(--ease);
}
.t-stat:hover { transform: translateY(-4px); }
.t-stat .ts-num {
font-size: 38px;
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.1;
margin-bottom: 8px;
}
.t-stat p { font-size: 14px; line-height: 1.5; }
.t-stat-tint {
background: var(--accent-tint);
border: 1px solid var(--accent-line);
}
.t-stat-tint .ts-num { color: var(--accent-deep); }
.t-stat-tint p { color: var(--muted); }
.t-stat-solid {
background:
radial-gradient(300px 200px at 90% -10%, rgba(255, 255, 255, .22) 0%, transparent 60%),
linear-gradient(150deg, var(--accent) 0%, var(--accent-deep) 100%);
color: #fff;
box-shadow: 0 14px 34px -10px rgba(110, 17, 208, .4);
}
.t-stat-solid:hover { box-shadow: 0 18px 42px -10px rgba(110, 17, 208, .5); }
.t-stat-solid p { color: rgba(255, 255, 255, .85); }
.quote {
position: relative;
display: flex;
flex-direction: column;
border: 1px solid var(--border);
border-radius: var(--r-2xl);
background: var(--paper);
padding: 30px 30px 26px;
box-shadow: var(--shadow-sm);
transition: transform var(--hover-t) var(--ease), box-shadow var(--hover-t) var(--ease), border-color var(--hover-t) var(--ease);
}
/* Тоже под курсор: на тапе карточка залипала в поднятом виде и уезжала
такой вместе с лентой. См. пояснение у .t-track. */
@media (hover: hover) and (pointer: fine) {
.quote:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--accent-line); }
}
.quote blockquote {
font-size: 16.5px;
line-height: 1.55;
color: var(--ink-strong);
margin-bottom: 24px;
}
.quote figcaption {
margin-top: auto;
font-size: 13.5px;
color: var(--muted);
display: flex;
align-items: center;
gap: 12px;
}
.quote figcaption b { color: var(--ink); font-weight: 600; display: block; }
.quote .avatar {
flex: none;
width: 42px; height: 42px;
border-radius: 50%;
background: linear-gradient(140deg, var(--accent), var(--accent-deep));
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
letter-spacing: .02em;
}
/* ---------- security: full-width blue section ---------- */
.security-outer { padding: 0; }
.security {
min-height: 100svh;
display: flex;
align-items: center;
background:
radial-gradient(820px 460px at 88% -12%, rgba(255, 255, 255, .17) 0%, transparent 60%),
radial-gradient(700px 420px at 6% 112%, rgba(40, 8, 90, .45) 0%, transparent 60%),
var(--accent);
padding: 88px 0;
color: rgba(255, 255, 255, .85);
overflow: hidden;
}
.security .wrap { width: 100%; }
.security .eyebrow { color: rgba(255, 255, 255, .85); }
.security .section-head h2 { color: #fff; }
.security .section-head p { color: rgba(255, 255, 255, .72); }
.sec-grid {
display: grid;
grid-template-columns: 1fr;
gap: 22px;
}
.cert-card {
display: flex;
align-items: center;
gap: 28px;
border: 1px solid rgba(255, 255, 255, .2);
border-radius: var(--r-xl);
background: #fff;
padding: 22px 28px;
text-align: left;
box-shadow: 0 24px 48px -12px rgba(24, 8, 60, .35);
}
.cert-card img { flex: none; width: 260px; margin: 0; border-radius: var(--r-md); }
.cert-card .cert-name { font-weight: 600; font-size: 19px; letter-spacing: -.015em; color: var(--ink); }
.cert-card .cert-reg { font-family: var(--mono); font-size: 12.5px; color: var(--faint); margin-top: 6px; }
.cert-card .cert-note { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 560px; }
.sec-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.sec-item {
display: flex;
flex-direction: column;
gap: 10px;
padding: 26px 26px 24px;
background: rgba(255, 255, 255, .13);
border: 1px solid rgba(255, 255, 255, .22);
border-radius: var(--r-xl);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
backdrop-filter: blur(6px);
transition: background var(--hover-t) var(--ease), transform var(--hover-t) var(--ease);
}
.sec-item:hover { background: rgba(255, 255, 255, .15); transform: translateY(-3px); }
.sec-item .ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px; height: 46px;
border-radius: 14px;
background: #fff;
color: var(--accent-deep);
box-shadow: 0 6px 14px -4px rgba(20, 4, 50, .3);
margin-bottom: 6px;
}
.sec-item .ico svg { width: 21px; height: 21px; }
.sec-item h3 { font-size: 17px; letter-spacing: -.01em; color: #fff; }
.sec-item p { font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .76); }
/* ---------- media ---------- */
.press-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* Закреплённые материалы крупнее; остальные плотнее, по четыре в ряд,
чтобы архив не спорил по весу с закреплёнными. */
.press-rest { grid-template-columns: repeat(4, 1fr); gap: 18px; }
.press-rest h3 { font-size: 14.5px; }
.press-rest .body { padding: 16px 18px 20px; gap: 9px; }
.press-rest .outlet-name,
.press-rest .outlet-date { font-size: 11px; }
.press-rest .outlet-row { padding-bottom: 9px; }
.press-rest .more { font-size: 12.5px; }
.press-featured h3 { font-size: 17px; }
.press-featured .body { padding: 22px 26px 26px; }
.press-rest-h {
margin: 64px 0 24px;
font-size: clamp(22px, 2.3vw, 28px); line-height: 1.15; letter-spacing: -0.02em;
}
.press {
display: flex;
flex-direction: column;
border: 1px solid var(--border);
border-radius: var(--r-xl);
overflow: hidden;
background: var(--paper);
text-decoration: none;
box-shadow: var(--shadow-sm);
transition: box-shadow var(--hover-t) var(--ease), transform var(--hover-t) var(--ease), border-color var(--hover-t) var(--ease);
}
.press:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: var(--accent-line); }
.press .thumb-wrap { overflow: hidden; aspect-ratio: 16 / 9; }
.press .thumb {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .5s var(--ease);
}
.press:hover .thumb { transform: scale(1.04); }
.press .body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
/* Название издания текстом, а не логотипом: логотипы у изданий разного веса,
цвета и пропорций, и в одной сетке смотрелись вразнобой. */
.press .outlet-row {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
padding-bottom: 11px; border-bottom: 1px solid var(--border);
}
.press .outlet-name {
font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
color: var(--ink-strong);
}
.press .outlet-date { font-family: var(--mono); font-size: 11.5px; color: var(--faint); flex: none; }
.press h3 { font-size: 15.5px; line-height: 1.4; font-weight: 600; }
.press .more {
margin-top: auto;
font-size: 13px;
font-weight: 500;
color: var(--accent-deep);
display: inline-flex;
align-items: center;
gap: 6px;
}
.press .more::after { content: "→"; transition: transform var(--hover-t) var(--ease); }
.press:hover .more::after { transform: translateX(3px); }
.press-all { text-align: center; margin-top: 36px; }
.press-all a { color: var(--accent-deep); font-weight: 500; text-decoration: none; }
.press-all a:hover { text-decoration: underline; }
/* press page */
.press-page { padding-top: 72px; }
.press-h1 { font-size: clamp(34px, 4vw, 50px); line-height: 1.1; margin: 18px 0 14px; letter-spacing: -0.028em; }
.press-note { margin-top: 40px; font-size: 14.5px; color: var(--faint); }
.press-note a { color: var(--accent-deep); font-weight: 500; }
/* ---------- team: founded by leaders ---------- */
.team { padding: 48px 0 12px; }
.team-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
gap: 72px;
align-items: center;
}
.team-copy h2 { font-size: clamp(32px, 3.6vw, 46px); font-weight: 500; line-height: 1.12; margin: 0 0 14px; letter-spacing: -0.025em; }
.team-sub { color: var(--faint); font-size: 16px; line-height: 1.55; max-width: 440px; margin-bottom: 24px; }
.team-logos {
display: flex;
gap: 18px;
max-height: 360px;
overflow: hidden;
-webkit-mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
}
.team-col { flex: 1; min-width: 0; }
.team-col-track {
display: flex;
flex-direction: column;
gap: 18px;
}
.team-col:last-child { margin-top: 36px; }
@media (prefers-reduced-motion: no-preference) {
.team-up { animation: team-scroll 22s linear infinite; }
.team-down { animation: team-scroll 26s linear infinite reverse; }
@keyframes team-scroll { to { transform: translateY(calc(-50% - 12px)); } }
}
@media (prefers-reduced-motion: reduce) {
.team-logos { max-height: none; -webkit-mask-image: none; mask-image: none; }
.team-col-track > [aria-hidden="true"] { display: none; }
}
.team-tile {
display: flex;
align-items: center;
justify-content: center;
flex: none;
height: 168px;
background: #fff;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, .9);
box-shadow: 0 2px 4px rgba(26, 15, 55, .03), 0 16px 36px -14px rgba(26, 15, 55, .10);
transition: box-shadow var(--hover-t) var(--ease);
}
.team-tile:hover { box-shadow: 0 3px 8px rgba(26, 15, 55, .05), 0 20px 44px -14px rgba(26, 15, 55, .13); }
.team-tile img { max-height: 64px; max-width: 170px; object-fit: contain; }
@media (max-width: 1020px) {
.team-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
.team-logos { max-width: 520px; }
}
/* Планшет: полоса логотипов занимала 520px и была прижата влево — справа
оставалось до 290px пустоты, при том что карточка ниже идёт во всю ширину.
Отдаём ей всю полосу и поднимаем ограничения логотипов, иначе в широкой
плитке логотип выглядит потерянным. */
@media (min-width: 760px) and (max-width: 1020px) {
.team-logos { max-width: none; }
.team-tile img { max-height: 72px; max-width: 210px; }
}
/* ---------- US market: Rette ---------- */
.usmarket { padding: 88px 0; }
.us-card {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
align-items: center;
gap: 48px;
padding: 48px 52px;
border-radius: 32px;
background: linear-gradient(180deg, #ffffff 0%, #fbfaff 100%);
border: 1px solid var(--border);
box-shadow:
0 2px 6px rgba(38, 30, 70, .04),
0 28px 60px -28px rgba(38, 30, 70, .18);
}
.us-chip {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--accent-deep);
font-size: 12.5px;
font-weight: 600;
letter-spacing: .09em;
text-transform: uppercase;
margin-bottom: 16px;
}
.us-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.us-copy h2 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.14; letter-spacing: -0.025em; margin-bottom: 14px; }
.us-copy p { color: var(--muted); font-size: 16px; line-height: 1.6; margin-bottom: 24px; }
.us-copy p b { color: var(--ink); font-weight: 600; }
.us-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.us-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 15px;
border-radius: 13px;
background: var(--accent-tint);
border: 1px solid var(--accent-line);
font-size: 13px;
font-weight: 600;
color: var(--accent-deep);
white-space: nowrap;
}
.us-badge svg { width: 16px; height: 16px; stroke: var(--accent-deep); fill: none; flex: none; }
.us-link { display: inline-block; }
.us-panes { display: grid; gap: 14px; }
.us-pane {
padding: 20px 22px;
border-radius: 22px;
background: var(--fog);
border: 1px solid var(--border);
}
.us-pane-kz { background: var(--accent-tint); border-color: var(--accent-line); }
.us-flag { display: block; font-size: 24px; line-height: 1; margin-bottom: 10px; }
.us-pane b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 4px; }
.us-pane p { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin: 0; }
@media (max-width: 900px) {
.us-card { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 34px 26px; }
}
/* ---------- partners: supported by ---------- */
.partners-big { padding: 96px 0 72px; }
.partners-big .section-head { margin-bottom: 28px; }
.pb-title { font-size: clamp(28px, 3.2vw, 40px); font-weight: 500; margin-bottom: 8px !important; }
.partners-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px;
}
@media (max-width: 1100px) {
.partners-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.partners-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.partners-grid .team-tile { height: 144px; }
.partners-grid .team-tile img { max-height: 58px; max-width: 146px; padding: 0 18px; }
/* выравниваем визуальный вес логотипов: крупные — меньше, мелкие — больше */
.partners-grid img[src*="500global"] { max-height: 40px; }
.partners-grid img[src*="startx"] { max-height: 40px; }
.partners-grid img[src*="astanahub"] { max-height: 76px; max-width: 176px; }
.partners-grid img[src*="nu-impact"] { max-height: 80px; max-width: 176px; }
.partners-grid img[src*="nuris"] { max-height: 60px; }
.partners-grid img[src*="kazhealth"] { max-height: 80px; }
.partners-grid img[src*="mayo"] { max-height: 66px; max-width: 176px; }
/* ---------- pricing ---------- */
.pricing {
background:
radial-gradient(800px 420px at 90% 100%, var(--accent-tint) 0%, transparent 55%),
var(--fog);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.plans {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 24px;
align-items: stretch;
}
.plan {
position: relative;
display: flex;
flex-direction: column;
border: 1px solid var(--border);
border-radius: var(--r-2xl);
background: var(--paper);
padding: 42px;
box-shadow: var(--shadow-sm);
transition: transform var(--hover-t) var(--ease), box-shadow var(--hover-t) var(--ease);
}
.plan:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.plan-featured {
border-color: transparent;
background:
linear-gradient(var(--paper), var(--paper)) padding-box,
linear-gradient(150deg, var(--accent), var(--accent-line) 60%, var(--accent)) border-box;
border: 1.5px solid transparent;
box-shadow: 0 8px 32px -8px rgba(142, 81, 255, .25);
}
.plan-featured:hover { box-shadow: 0 16px 42px -8px rgba(142, 81, 255, .32); }
/* border beam accent — the one animated highlight of the pricing section */
@property --beam { syntax: ''; initial-value: 0deg; inherits: false; }
.plan-featured::after {
content: "";
position: absolute;
inset: -1.5px;
border-radius: inherit;
padding: 1.5px;
background: conic-gradient(from var(--beam),
transparent 0turn, transparent .78turn,
rgba(142, 81, 255, .95) .9turn, transparent 1turn);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
pointer-events: none;
opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
.plan-featured::after { opacity: 1; animation: beam 7s linear infinite; }
@keyframes beam { to { --beam: 1turn; } }
}
.plan .plan-tag {
font-size: 11.5px;
font-weight: 600;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--accent-deep);
margin-bottom: 10px;
}
.plan h3 { font-size: 24px; margin-bottom: 6px; }
.plan .plan-sub { font-size: 14px; color: var(--muted); margin-bottom: 24px; }
.plan .price { font-size: 36px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.plan .price small { font-size: 14px; font-weight: 400; color: var(--muted); }
.plan ul { list-style: none; display: grid; gap: 10px; margin: 22px 0 30px; }
.plan li {
display: flex; gap: 10px; align-items: baseline;
font-size: 14.5px; color: var(--ink-strong);
}
.plan li::before {
content: "";
flex: none;
width: 13px; height: 13px;
transform: translateY(1.5px);
background: var(--accent);
-webkit-mask: url('data:image/svg+xml,') center/contain no-repeat;
mask: url('data:image/svg+xml,') center/contain no-repeat;
}
.plan .btn { margin-top: auto; }
.plan .plan-note {
font-size: 12.5px;
color: var(--faint);
text-align: center;
margin-top: 12px;
}
/* ---------- FAQ ---------- */
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-list details {
border: 1px solid var(--border);
border-radius: var(--r-xl);
background: var(--paper);
margin-bottom: 12px;
box-shadow: var(--shadow-sm);
transition: border-color var(--hover-t) var(--ease), box-shadow var(--hover-t) var(--ease);
}
.faq-list details:hover { border-color: var(--accent-line); }
.faq-list details[open] { box-shadow: var(--shadow-sm); border-color: var(--accent-line); }
.faq-list summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 22px 28px;
font-size: 16.5px;
font-weight: 600;
letter-spacing: -0.01em;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
content: "+";
font-size: 20px;
font-weight: 400;
color: var(--accent);
transition: transform .25s var(--ease);
flex: none;
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list .answer {
padding: 0 28px 24px;
font-size: 15px;
color: var(--muted);
max-width: 640px;
overflow: hidden;
transition: height .35s var(--ease), opacity .35s var(--ease), padding-bottom .35s var(--ease);
}
/* ---------- CTA band ---------- */
.cta-band {
position: relative;
background:
radial-gradient(700px 340px at 15% 120%, rgba(255,255,255,.16) 0%, transparent 60%),
radial-gradient(640px 320px at 88% -18%, rgba(196, 180, 255, .55) 0%, transparent 60%),
linear-gradient(140deg, var(--accent) 0%, var(--accent-deep) 100%);
color: #fff;
padding: 112px 0;
overflow: hidden;
}
.cta-band .wrap { text-align: center; max-width: 760px; position: relative; }
.cta-band h2 { color: #fff; font-size: clamp(30px, 3.8vw, 46px); line-height: 1.12; margin-bottom: 16px; letter-spacing: -0.025em; }
.cta-band p { color: rgba(255,255,255,.78); font-size: 17px; margin-bottom: 34px; }
.cta-band .hero-cta { justify-content: center; }
/* светлый вариант CTA — перед фиолетовым футером, чтобы не шли два фиолетовых блока подряд */
.cta-band.cta-light {
background:
radial-gradient(700px 360px at 50% -20%, var(--accent-tint) 0%, transparent 62%),
var(--fog);
color: var(--ink);
padding: 96px 0 104px;
}
.cta-band.cta-light h2 { color: var(--ink); }
.cta-band.cta-light p { color: var(--muted); }
.cta-band.cta-light .btn-inverse {
background: var(--accent);
color: #fff;
box-shadow: 0 10px 24px -8px rgba(142, 81, 255, .45);
}
.cta-band.cta-light .btn-inverse:hover { background: var(--accent-hover); }
.cta-band.cta-light .btn-outline-inverse {
background: var(--paper);
color: var(--ink);
border-color: var(--border);
box-shadow: 0 3px 8px rgba(26, 15, 55, .07), 0 14px 30px -10px rgba(26, 15, 55, .16);
}
/* ---------- CTA: contact form box ---------- */
.cta-form { padding: 96px 0 80px; }
.cf-card {
position: relative;
margin: 0 auto;
background:
radial-gradient(600px 300px at 50% -10%, var(--accent-tint) 0%, transparent 60%),
var(--fog);
border: 1.5px solid var(--accent-line);
border-radius: 30px;
box-shadow: var(--shadow-md);
padding: 68px 32px 60px;
text-align: center;
overflow: hidden;
}
.cf-card h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.15; margin: 18px 0 12px; }
.cf-sub { color: var(--muted); font-size: 16.5px; max-width: 560px; margin: 0 auto 36px; }
.cf-sub a { color: var(--accent-deep); font-weight: 500; }
.cf-form { max-width: 560px; margin: 0 auto; text-align: left; position: relative; }
.cf-label {
display: block;
font-size: 14px;
font-weight: 500;
color: var(--ink-strong);
margin: 14px 0 8px;
}
.cf-field {
display: flex;
align-items: center;
height: 48px;
padding-left: 15px;
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--r-pill);
color: var(--faint);
transition: border-color var(--hover-t) var(--ease), box-shadow var(--hover-t) var(--ease);
overflow: hidden;
}
.cf-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.cf-field svg { flex: none; }
.cf-field input {
height: 100%;
width: 100%;
padding: 0 16px 0 10px;
border: 0;
outline: 0;
background: transparent;
font: inherit;
font-size: 15px;
color: var(--ink);
}
.cf-field input::placeholder { color: var(--faint); }
.cf-form :disabled { opacity: .55; }
.cf-submit { width: 100%; margin-top: 20px; gap: 8px; }
.cf-submit svg { transition: transform var(--hover-t) var(--ease); }
.cf-submit:hover svg { transform: translateX(3px); }
.cf-ok { color: var(--green); font-weight: 500; text-align: center; margin-top: 14px; }
.cf-err { color: var(--red); font-size: 14px; text-align: center; margin-top: 14px; }
.cf-err a { font-weight: 600; }
.cf-hp { position: absolute; left: -9999px; top: -9999px; }
/* ---------- footer: accent card ---------- */
.site-footer { padding: 12px 16px 20px; background: transparent; }
.footer-card {
margin: 0 auto;
background:
radial-gradient(720px 400px at 88% -12%, rgba(255, 255, 255, .16) 0%, transparent 60%),
linear-gradient(150deg, var(--accent) 0%, var(--accent-deep) 100%);
border-radius: 30px;
padding: 64px 72px 36px;
color: rgba(255, 255, 255, .8);
font-size: 14px;
}
.f-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 48px;
margin-bottom: 84px;
}
.f-left .brand { color: #fff; font-size: 20px; margin-bottom: 16px; }
.f-left .tagline { color: rgba(255, 255, 255, .72); max-width: 300px; line-height: 1.55; }
.f-navs { display: flex; gap: 56px; }
.f-navs .f-pages { text-align: left; }
.f-navs .f-pages a { display: inline-block; max-width: 232px; }
.f-pages h4 { color: #fff; font-size: 18px; font-weight: 600; margin-bottom: 16px; letter-spacing: -0.01em; }
.f-pages ul { list-style: none; display: grid; gap: 11px; }
.f-pages a { color: rgba(255, 255, 255, .72); text-decoration: none; transition: color var(--hover-t); }
.f-pages a:hover { color: #fff; }
.f-bottom {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
flex-wrap: wrap;
border-top: 1px solid rgba(255, 255, 255, .16);
padding-top: 26px;
font-size: 13.5px;
color: rgba(255, 255, 255, .6);
}
.f-contacts { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.f-contacts a {
display: inline-flex;
align-items: center;
gap: 8px;
color: rgba(255, 255, 255, .8);
text-decoration: none;
transition: color var(--hover-t);
}
.f-contacts a:hover { color: #fff; }
/* ---------- responsive ---------- */
/* Между 1021 и 1120px контейнер уже ужался, и четыре карточки в ряду дают
по ~225px — тесно для заголовка. Ставится до блока 1020px, иначе тот
не смог бы перебить это правило на двух колонках. */
@media (max-width: 1120px) {
.press-rest { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1020px) {
.site-nav { display: none; }
.hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 64px; padding-top: 84px; }
.scroll-hint { display: none; }
.sec-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.sec-list { grid-template-columns: minmax(0, 1fr); }
.press-grid { grid-template-columns: minmax(0, 1fr); }
.press-rest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.press-rest-h { margin-top: 48px; }
.plans { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
.press-rest { grid-template-columns: minmax(0, 1fr); }
.press-rest h3 { font-size: 15.5px; }
.press-rest .body { padding: 18px 20px 22px; }
/* карточка снова во всю ширину — мельчить подписи незачем */
.press-rest .outlet-name,
.press-rest .outlet-date { font-size: 12px; }
}
@media (max-width: 760px) {
.section { padding: 72px 0; }
/* На телефоне карточку сертификата держим узкой — во всю ширину она читается
как пустая плита. На планшете ограничения нет, см. блок 1020px. */
.cert-card { max-width: 420px; padding: 18px 20px; }
.cert-card img { max-width: 300px; }
.site-header { padding: 10px 14px 6px; }
.header-actions .login { display: none; }
.hero .wrap { padding-top: 56px; padding-bottom: 72px; }
.clinics .lead { max-width: none; }
.logo-chip { height: 56px; }
.security { padding: 72px 0; }
.footer-card { padding: 40px 28px 26px; }
.f-top { flex-direction: column; gap: 40px; margin-bottom: 48px; }
.f-pages { text-align: left; }
.f-navs { flex-direction: column; gap: 30px; }
.f-navs .f-pages a { max-width: none; }
.plan { padding: 32px 26px; }
/* Цели под палец. WCAG 2.2 AA (2.5.8) требует 24×24px, а было: ссылки
футера 22px, почта под прессой 19px, иконки соцсетей вообще 16×16.
Увеличиваем область нажатия, размер самих значков не трогаем. */
.f-pages a,
.f-contacts a { padding: 4px 0; }
.f-pages ul { gap: 5px; } /* отступ съеден новым padding */
.f-contacts a[aria-label] {
padding: 6px;
margin: -6px; /* не раздвигает соседей в ряду */
}
/* строчные ссылки внутри текста: 19–21px без вертикального поля */
.press-note a,
.mgrp-note a,
.press-all a,
.cf-sub a { display: inline-block; padding: 3px 0; }
/* дата на карточках прессы была 11.5px */
.press .outlet-date { font-size: 12px; }
}
/* узкие телефоны: самое длинное слово ротора не влезает в строку.
Уменьшаем заголовок, а не разрешаем перенос — иначе h1 то три строки, то четыре,
и текст ниже дёргается при смене слова. Формула держит одну строку до 320px
с запасом на казахский («Медициналық карталардағы» — самое широкое из всех языков). */
@media (max-width: 460px) {
.hero-split .hs-title { font-size: clamp(22px, calc(9.3vw - 4.6px), 38px); }
}
/* Galaxy Fold в сложенном виде (280px): при полях 24px длинные слова
в заголовках не влезают и дают горизонтальный скролл. */
@media (max-width: 340px) {
.wrap { padding: 0 14px; }
.site-header { padding: 10px 8px 6px; }
}
/* Сцены модулей — жёсткие 400px (внутри 1000×1000 со своим scale, трогать нельзя).
На экранах уже 400px их симметрично срезал overflow секции: на 320px терялось
по 40px с каждой стороны. Уменьшаем через zoom — он, в отличие от transform,
меняет раскладку, поэтому под сценой не остаётся пустоты. */
/* На планшете блоки уже в столбик, но сцена оставалась 400px и терялась
в колонке 720–970px. Десктопные 1.5 сюда не влезают, 1.3 — в самый раз. */
@media (min-width: 761px) and (max-width: 1020px) {
.mgrp-scene { zoom: 1.3; } /* 520px */
}
@media (max-width: 412px) {
.mgrp-scene { zoom: .82; } /* 328px */
}
@media (max-width: 343px) {
.mgrp-scene { zoom: .68; } /* 272px */
}
/* Числа метрик сдвинуты влево на -.07em для оптического выравнивания с подписью.
У «2» плоский левый бок, поэтому «20+ млн» — самое широкое число — читалось
приклеенным к краю карточки, тогда как округлая «3» и тонкий «−» выглядели нормально.
Даём карточкам больше боковых полей: сдвигаются все три одинаково, выравнивание цело. */
@media (min-width: 901px) {
.m3 { padding-left: 40px; padding-right: 40px; }
/* «−95%» и так стоял правильно — возвращаем ему ровно те 10px, что добавили
карточке, сохранив его оптическую компенсацию за широкую пазуху минуса. */
.m3:nth-child(3) .m3-num { margin-left: calc(-0.07em - 10px); }
}
/* ---------- мобильная композиция ---------- */
@media (max-width: 1020px) {
/* Hero на телефоне выше экрана (≈1170px против 844), а он sticky: следующая
секция наезжала на него сверху и срезала кнопки пополам, а фотоколлаж
не показывался вообще. На узких экранах пусть просто скроллится. */
/* именно relative, а не static: .aurora внутри — absolute и считает координаты
от hero. При static пятна теряли точку отсчёта и вылезали за экран на 79px. */
.hero { position: relative; min-height: 0; }
/* Карточка сертификата — flex-строка с жёсткими 260px под картинку.
Текст выдавливало за пределы карточки: на 320px обрезалось 119px.
Ширину здесь НЕ ограничиваем: раньше стояло max-width 420px на весь
диапазон до 1020px, и на планшете карточка занимала половину полосы,
хотя секция отдаёт ей всю ширину. Ограничение — только для телефона. */
.cert-card { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px 24px; }
.cert-card img { width: 100%; max-width: 560px; }
.cert-card .cert-note { max-width: none; }
/* Как только блоки модулей встают в столбик (а это уже с 1020px, то есть на
планшете), сцена оказывается ПЕРЕД текстом: сначала непонятная анимация,
потом объяснение. Ставим её после блока — сначала читаешь, что делает
модуль, потом видишь, как это выглядит. Порядком, а не column-reverse,
чтобы не менять направление оси и поведение gap. */
.mgrp-info { order: 1; }
.mgrp-scene { order: 2; }
}
@media (max-width: 980px) {
/* Коллаж собран абсолютным позиционированием под широкий экран: на телефоне
три кадра наезжали друг на друга и вылезали за правый край. Раскладываем
сеткой — крупный кадр сверху, два квадратных под ним. */
.hero-collage { height: auto; zoom: 1; max-width: 440px; margin: 0 auto;
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.hero-collage .hc-deco { display: none; }
.hc-fig { position: static; padding: 8px; border-radius: 22px; }
.hc-fig img { height: 100%; }
.hc-f1 { grid-column: 1 / -1; width: auto; height: auto; margin: 0; aspect-ratio: 16 / 10; }
.hc-f2, .hc-f3 { width: auto; height: auto; margin: 0; aspect-ratio: 1 / 1; }
/* Заголовок был прижат влево, а абзац, кнопки и бейдж — по центру. */
.hs-title { align-items: center; }
/* Иконка бейджа висела у левого края в отрыве от центрированного текста. */
.hs-cred span:last-child { text-align: left; }
}
@media (max-width: 460px) {
/* Две пилюли разной длины смотрелись случайно — в столбик и одной ширины. */
.hero-split .hs-ctas { flex-direction: column; align-items: center; gap: 10px; }
.hero-split .hs-ctas .hs-cta { width: 100%; max-width: 320px; }
/* Заголовки секций — 32px на колонке 342px давали по 10 символов в строке
и рваный правый край в пять строк. Мельче — строки полнее и ровнее.
Мелкие заголовки внутри карточек не трогаем, только заголовки секций. */
.section-head h2, .mc-title-wrap h2 { font-size: 27px; line-height: 1.18; }
.section-head p { font-size: 16px; }
}
@media (max-width: 760px) {
/* Логотипы в плитках (команда и партнёры) заданы фиксированной шириной под
десктоп: 176px при плитке 166px — то есть шире самой плитки, упирались в края
и выступали за них. Ограничиваем шириной плитки и даём воздух по бокам. */
.team-tile { padding: 0 16px; }
/* [src] в селекторе — чтобы перебить точечные правила вида
.partners-grid img[src*="astanahub"] { max-width: 176px } */
.team-tile img[src] { max-width: 100%; height: auto; }
/* Ритм: внутри блока текст и сцена рядом (18px), между блоками — заметно
больше (48px), а от заголовка секции до первого блока больше всего,
иначе заголовок «прилипал» к первому модулю. */
.mgrp, .mgrp:nth-child(even) { padding: 0; gap: 18px; }
/* У сцены снизу свой запас (~120px): там лежат прозрачные элементы анимации,
которые появляются в другие моменты цикла — подрезать бокс нельзя.
Поэтому между блоками отступ маленький, иначе провал складывается вдвое. */
.mgrp + .mgrp { margin-top: 12px; }
.modules .mc-title-wrap { margin-bottom: 22px; }
}
/* ---------- large monitors: scale the whole layout ---------- */
@media (min-width: 1800px) {
body { zoom: 1.18; }
.hero, .fullscreen, .modules, .security { min-height: calc(100svh / 1.18); }
}
@media (min-width: 2300px) {
body { zoom: 1.38; }
.hero, .fullscreen, .modules, .security { min-height: calc(100svh / 1.38); }
}
/* ---------- privacy policy ---------- */
.policy-page .section-head { margin-bottom: 40px; }
.policy-body { max-width: 820px; }
.policy-section { margin-bottom: 40px; }
.policy-section:last-child { margin-bottom: 0; }
.policy-section h2 {
font-size: 21px;
line-height: 1.3;
letter-spacing: -0.015em;
margin-bottom: 14px;
}
.policy-section p {
font-size: 15.5px;
line-height: 1.7;
color: var(--muted);
margin-bottom: 12px;
}
.policy-section p strong { color: var(--ink); font-weight: 600; }
.policy-section ul { margin: 0 0 14px; padding-left: 20px; }
.policy-section li {
font-size: 15.5px;
line-height: 1.7;
color: var(--muted);
margin-bottom: 8px;
}
.policy-section li::marker { color: var(--accent); }
.policy-section a { color: var(--accent-deep); }
@media (max-width: 640px) {
.policy-section h2 { font-size: 19px; }
.policy-section p, .policy-section li { font-size: 15px; }
}
/* ---------- language switcher ---------- */
.lang { position: relative; }
.lang-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 42px;
padding: 0 14px;
border: 1px solid var(--border);
border-radius: var(--r-pill);
background: var(--paper);
font: inherit;
font-size: 14px;
font-weight: 600;
color: var(--ink);
cursor: pointer;
transition: border-color var(--hover-t) var(--ease), background var(--hover-t) var(--ease);
}
.lang-btn:hover { border-color: var(--accent-line); background: var(--accent-tint); }
.lang-btn svg { transition: transform .25s var(--ease); opacity: .55; }
.lang.open .lang-btn { border-color: var(--accent-line); background: var(--accent-tint); }
.lang.open .lang-btn svg { transform: rotate(180deg); }
.lang-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 152px;
padding: 6px;
margin: 0;
list-style: none;
background: var(--paper);
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: 0 4px 10px rgba(26, 15, 55, .06), 0 22px 44px -14px rgba(26, 15, 55, .22);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity .2s var(--ease), transform .22s var(--ease), visibility .2s;
z-index: 60;
}
.lang.open .lang-menu { opacity: 1; visibility: visible; transform: none; }
.lang-menu a {
display: block;
padding: 9px 12px;
border-radius: 11px;
font-size: 14.5px;
color: var(--ink);
text-decoration: none;
transition: background var(--hover-t) var(--ease), color var(--hover-t) var(--ease);
}
.lang-menu a:hover { background: var(--fog); }
.lang-menu a.is-active { background: var(--accent-tint); color: var(--accent-deep); font-weight: 600; }
@media (max-width: 900px) {
.lang-btn { height: 38px; padding: 0 12px; font-size: 13.5px; }
}