🎁 При оплаті сьогодні — закритий вебінар «Монетизація талантів» + підбірка відео в подарунок
Розкрий свою унікальність та почни будувати сильний особистий бренд у 2026 році
👥 Розбір пройшли вже 5 000+ експертів з України
Експрес-розбір по дизайну людини з трансформаційною онлайн-розпаковкою
Дізнайся свою унікальну природу експерта — і зрозумій як монетизувати свої навички через Human Design
/* ─── BLOCK 1: HERO ─── */
#hero {
background: var(--dark);
color: #fff;
padding: 0;
position: relative;
overflow: hidden;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
#hero::before {
content: '';
position: absolute;
top: -200px; right: -200px;
width: 700px; height: 700px;
background: radial-gradient(circle, rgba(58,183,187,0.18) 0%, transparent 70%);
pointer-events: none;
}
#hero::after {
content: '';
position: absolute;
bottom: -150px; left: -100px;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(58,183,187,0.10) 0%, transparent 70%);
pointer-events: none;
}
.hero-inner {
position: relative;
z-index: 1;
padding: 80px 24px 60px;
max-width: 860px;
margin: 0 auto;
text-align: center;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(58,183,187,0.15);
border: 1px solid rgba(58,183,187,0.35);
color: var(--teal);
font-size: 13px;
font-weight: 600;
padding: 8px 20px;
border-radius: 50px;
margin-bottom: 32px;
letter-spacing: 0.02em;
}
.hero-badge span { color: rgba(255,255,255,0.7); }
.hero-h1 {
font-size: clamp(32px, 5vw, 58px);
font-weight: 900;
line-height: 1.12;
letter-spacing: -0.02em;
margin-bottom: 12px;
color: #fff;
}
.hero-h1 em { color: var(--teal); font-style: normal; }
.hero-sub {
font-size: clamp(15px, 2vw, 19px);
font-weight: 500;
color: rgba(255,255,255,0.72);
margin-bottom: 8px;
max-width: 680px;
margin-left: auto;
margin-right: auto;
}
.hero-sub2 {
font-size: clamp(14px, 1.6vw, 17px);
font-weight: 400;
color: rgba(255,255,255,0.55);
margin-bottom: 44px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.hero-counter {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
padding: 10px 22px;
border-radius: 50px;
font-size: 14px;
color: rgba(255,255,255,0.7);
font-weight: 500;
margin-top: 20px;
}
.hero-counter strong { color: var(--teal); font-weight: 800; }
.hero-gift {
margin-top: 24px;
display: inline-block;
font-size: 14px;
color: rgba(255,255,255,0.60);
font-weight: 500;
}
.hero-gift strong { color: rgba(255,255,255,0.85); }
/* ─── BLOCK 2: PAIN ─── */
#pain {
background: var(--cream);
padding: 100px 0;
}
.pain-header {
text-align: center;
margin-bottom: 56px;
}
.section-h2 {
font-size: clamp(26px, 3.5vw, 42px);
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--dark);
margin-bottom: 16px;
}
.section-h2 em { color: var(--teal); font-style: normal; }
.section-lead {
font-size: clamp(15px, 1.8vw, 18px);
color: var(--text-muted);
max-width: 560px;
margin: 0 auto;
font-weight: 500;
}
.pain-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 16px;
margin-bottom: 52px;
}
.pain-card {
background: var(--white);
border: 1px solid rgba(0,0,0,0.07);
border-radius: var(--radius);
padding: 24px 28px;
display: flex;
gap: 16px;
align-items: flex-start;
transition: box-shadow 0.2s, transform 0.2s;
}
.pain-card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.pain-emoji { font-size: 28px; flex-shrink: 0; line-height: 1.3; }
.pain-text { font-size: 15px; font-weight: 500; color: var(--text); line-height: 1.55; }
.pain-footer {
background: var(--dark);
color: #fff;
border-radius: var(--radius);
padding: 28px 36px;
text-align: center;
font-size: 16px;
font-weight: 600;
line-height: 1.6;
margin-bottom: 40px;
}
.pain-footer em { color: var(--teal); font-style: normal; }