/*
* Growth Framework — design tokens
* Единственный источник цветов, радиусов и т.п.
* Значения идентичны исходному дизайну — здесь только сведены в одно место.
*/
:root {
--bg: #06070c;
--purple: #8b5cf6;
--blue: #3b82f6;
--ink: #f4f5f8;
--ink-soft: rgba(244, 245, 248, 0.62);
/* Было rgba(244,245,248,0.4) — контраст ~3.5:1, ниже WCAG AA (4.5:1)
для текста мельче 18px. Поднято до 0.52 (~5:1), визуально почти
неотличимо, но проходит автоматическую проверку контраста. */
--ink-faint: rgba(244, 245, 248, 0.52);
--card: rgba(255, 255, 255, 0.02);
--card-border: rgba(255, 255, 255, 0.16);
--r-lg: 22px;
--r-md: 16px;
--gradient-brand: linear-gradient(120deg, var(--purple) 0%, var(--blue) 100%);
--gradient-ring: linear-gradient(135deg, rgba(139, 92, 246, 0.85), rgba(59, 130, 246, 0.85));
--font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/*
* Base / reset
* Затрагивает уровень всего документа (раньше страница была фрагментом
* без / — теперь это отдельный полноценный сайт).
*/
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: 100%;
color-scheme: dark;
}
body {
/* Тёмный фон на всю страницу, чтобы карточка (max-width: 480px)
не "плавала" на белом фоне браузера на широких экранах. */
background: var(--bg);
min-height: 100vh;
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
}
img {
max-width: 100%;
display: block;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Уважаем системную настройку "меньше анимаций" — глушим декоративные
бесконечные анимации, оставляя мгновенный конечный результат. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/*
* Layout — контейнер карточки, фоновые блики, сетка секций.
* 1:1 с исходным дизайном.
*/
.gfw-outer {
font-family: var(--font-sans);
width: 100%;
max-width: 480px;
margin: 0 auto;
position: relative;
background: var(--bg);
color: var(--ink);
overflow: hidden;
padding: 20px 16px 34px;
}
/* Edge-to-edge на телефонах — снимает боковые поля контейнера. */
@media (max-width: 600px) {
.gfw-outer {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
}
.gfw-glow {
position: absolute;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
z-index: 0;
}
.gfw-glow--1 { width: 320px; height: 320px; top: -80px; left: -100px; background: radial-gradient(circle, rgba(139, 92, 246, 0.35), transparent 70%); }
.gfw-glow--2 { width: 300px; height: 300px; top: 520px; right: -110px; background: radial-gradient(circle, rgba(59, 130, 246, 0.3), transparent 70%); }
.gfw-glow--3 { width: 320px; height: 320px; bottom: 200px; left: -110px; background: radial-gradient(circle, rgba(139, 92, 246, 0.22), transparent 70%); }
.gfw-glow--4 { width: 280px; height: 280px; bottom: -80px; right: -90px; background: radial-gradient(circle, rgba(59, 130, 246, 0.28), transparent 70%); }
.gfw-outer > * {
position: relative;
z-index: 1;
}
.gfw-outer section {
padding: 26px 2px;
}
@media (max-width: 360px) {
.gfw-h1 { font-size: 27px; }
.gfw-payoff--lg { font-size: 18px; }
}
/*
* Общие компоненты и утилиты, переиспользуемые в нескольких блоках.
*
* В исходнике один и тот же код градиентной 1px-рамки повторялся
* дословно 4 раза (.gfw-card::before, .gfw-cta-btn::after,
* .gfw-tech-tile::before, .gfw-tl-node::before), и градиентный текст —
* ещё 4 раза. Здесь это единые правила с общим селектором:
* визуальный результат идентичен, кода меньше.
*/
/* ---------- eyebrow-бейдж ---------- */
.gfw-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 600;
color: var(--ink-soft);
background: var(--card);
border: 1px solid var(--card-border);
padding: 7px 14px;
border-radius: 100px;
margin-bottom: 20px;
}
.gfw-eyebrow .gfw-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--purple);
box-shadow: 0 0 8px 1px rgba(139, 92, 246, 0.7);
}
/* ---------- стеклянная карточка ---------- */
.gfw-card {
position: relative;
background: var(--card);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: none;
border-radius: var(--r-lg);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* ---------- переиспользуемая градиентная 1px-рамка ---------- */
.gfw-card::before,
.gfw-cta-btn::after,
.gfw-tech-tile::before,
.gfw-tl-node::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: var(--gradient-ring);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
/* ---------- переиспользуемый градиентный текст ---------- */
.gfw-h1 em,
.gfw-h2 .gfw-mark,
.gfw-payoff em,
.gfw-tagline em {
font-style: normal;
background: var(--gradient-brand);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.gfw-tagline em {
font-weight: 700;
}
/* ---------- заголовки и текст ---------- */
.gfw-h1 {
font-size: 32px;
line-height: 1.14;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--ink);
}
.gfw-h2 {
font-size: 20px;
line-height: 1.3;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--ink);
margin-bottom: 12px;
}
.gfw-lead {
margin-top: 14px;
font-size: 16px;
line-height: 1.5;
font-weight: 600;
color: var(--ink);
}
.gfw-body {
margin-top: 12px;
font-size: 14px;
line-height: 1.65;
font-weight: 500;
color: var(--ink-soft);
}
.gfw-body strong {
color: var(--ink);
font-weight: 700;
}
/* ---------- CTA-кнопка ---------- */
.gfw-cta-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
text-decoration: none;
font-family: inherit;
font-size: 15px;
font-weight: 700;
color: #ffffff;
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
border: none;
border-radius: 15px;
padding: 16px 22px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
margin-top: 24px;
z-index: 0;
}
.gfw-cta-btn::before {
content: '';
position: absolute;
inset: -7px;
border-radius: inherit;
background: linear-gradient(135deg, var(--purple) 0%, var(--blue) 100%);
filter: blur(16px);
opacity: 0.4;
z-index: -1;
}
.gfw-cta-btn svg {
flex-shrink: 0;
filter: drop-shadow(0 0 5px rgba(147, 197, 253, 0.85)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.7));
}
/* ---------- строки-подписи / выводы ---------- */
.gfw-qlabel {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--blue);
margin-bottom: 10px;
}
.gfw-lead-muted {
font-size: 13.5px;
font-weight: 500;
color: var(--ink-faint);
margin-bottom: 8px;
}
.gfw-payoff {
font-size: 15px;
font-weight: 700;
line-height: 1.5;
color: var(--ink);
}
.gfw-payoff--lg {
font-size: 21px;
line-height: 1.32;
}
.gfw-strike-target {
position: relative;
display: inline-block;
}
.gfw-strike-target::after {
content: '';
position: absolute;
left: 0;
top: 54%;
height: 2px;
width: 0;
background: linear-gradient(90deg, var(--purple), var(--blue));
border-radius: 2px;
transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.gfw-strike-target.gfw-strike-active::after {
width: 100%;
}
/* ---------- tagline / footer ---------- */
.gfw-tagline {
text-align: center;
padding: 30px 20px 6px;
font-size: 13px;
font-weight: 600;
color: var(--ink-faint);
line-height: 1.5;
}
.gfw-footer {
text-align: center;
padding: 18px 20px 0;
font-size: 10.5px;
color: var(--ink-faint);
font-weight: 700;
letter-spacing: 0.12em;
}
/*
* Hero-блок: фото, свечение, плавающие карточки поверх фото.
*/
.gfw-hero {
padding-top: 6px;
}
.gfw-hero-photo {
position: relative;
width: 80%;
/* Нижний отступ гарантированно вмещает самую нижнюю плавающую карточку
(.gfw-fc-sub уходит на -80px ниже своей родительской карточки) вне
зависимости от пропорций конкретного фото — иначе карточки заезжают
на следующую секцию на узких экранах. */
margin: 24px auto 96px;
}
.gfw-hero-photo img {
display: block;
width: 100%;
height: auto;
/* width/height-атрибуты на самом ![]()
(560×956) задают браузеру
соотношение сторон заранее — это и резервирует место под фото
без сдвига макета (CLS), без изменения самой вёрстки. */
-webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}
.gfw-hero-photo-glow {
position: absolute;
left: 50%;
top: 18%;
width: 130%;
height: 60%;
transform: translateX(-50%);
background: radial-gradient(ellipse, rgba(139, 92, 246, 0.28), transparent 70%);
filter: blur(50px);
z-index: -1;
pointer-events: none;
}
.gfw-float-card {
position: absolute;
z-index: 2;
}
/* -- специализация -- */
.gfw-float-card--specialty {
left: -12px;
top: 44%;
width: 148px;
padding: 12px 13px;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.gfw-float-card--specialty .gfw-fc-label {
font-size: 13.5px;
font-weight: 800;
color: var(--ink);
margin-bottom: 10px;
}
.gfw-float-card--specialty ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 6px;
}
.gfw-float-card--specialty li {
font-size: 10px;
font-weight: 600;
color: var(--ink-faint);
display: flex;
align-items: center;
gap: 7px;
}
.gfw-float-card--specialty li::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--purple);
flex-shrink: 0;
}
/* -- growth-график -- */
.gfw-float-card--chart {
right: -18px;
top: 58%;
width: 208px;
padding: 16px 16px 20px;
backdrop-filter: blur(1px);
-webkit-backdrop-filter: blur(1px);
}
.gfw-float-card--chart .gfw-fc-label {
font-size: 13.5px;
font-weight: 800;
color: var(--ink);
margin-bottom: 14px;
display: flex;
align-items: center;
justify-content: space-between;
}
.gfw-float-card--chart .gfw-fc-tag {
font-size: 10px;
font-weight: 700;
color: #d9d2ff;
background: rgba(139, 92, 246, 0.22);
border: 1px solid rgba(139, 92, 246, 0.3);
border-radius: 100px;
padding: 4px 11px;
}
.gfw-float-card--chart svg.gfw-fc-chart-graph {
width: 100%;
height: 76px;
display: block;
}
.gfw-fc-sub {
position: absolute;
right: -12px;
bottom: -80px;
width: 172px;
padding: 13px 14px 15px;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.gfw-fc-sub-label {
font-size: 10.5px;
font-weight: 600;
color: var(--ink-faint);
margin-bottom: 10px;
}
.gfw-fc-sub-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 8px;
}
.gfw-fc-sub-value {
font-size: 21px;
font-weight: 600;
color: #8fc4ff;
line-height: 1;
}
.gfw-fc-sub-caption {
font-size: 10px;
font-weight: 600;
color: var(--ink-faint);
margin-top: 6px;
}
.gfw-fc-sub-bars {
width: 38px;
height: 30px;
flex-shrink: 0;
display: block;
}
/*
* "Tech I Use" — бесконечная лента иконок.
* Иконки теперь SVG-спрайт (/