/* Recreated from inline CSS on 2025-12-02T23:00:31.4191042+02:00 */
/* ===== File structure (non-intrusive) =====
1) Base: root, body, utilities
2) Components/Sections: Hero, Time-Control, Trust, FAQ, Promo CTA
3) Sticky CTA
4) Animations
5) Media queries are kept near related rules to preserve cascade
*/
/* ЕДИНЫЙ ФОН-СЦЕНАРИЙ: Плавные переходы с одинаковой схемой */
body {
background: #0a0f1a; /* Совпадает с верхним цветом градиента параллакса */
min-height: 100vh;
}
/* Анти-бэндинг: прозрачный шум поверх фона-сценария */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 25% 25%, rgba(255,255,255,0.01) 0%, transparent 50%),
radial-gradient(circle at 75% 75%, rgba(255,255,255,0.01) 0%, transparent 50%);
opacity: 0.02;
pointer-events: none;
z-index: -1;
}
/* New color palette */
:root {
--primary-bg: #b3197f;
--accent-blue: #38bdf8;
--accent-gold: #eab308;
--text-white: #ffffff;
--text-light: #e2e8f0;
--text-gray: #94a3b8;
--border-radius: 12px;
/* CTA contrast variables */
--cta-veil-top: 0.55;
--cta-veil-40: 0.45;
--cta-veil-70: 0.32;
--cta-veil-100: 0.22;
--cta-safety-top-h: 8vh;
--cta-safety-bottom-h: 5vh;
--cta-safety-top-alpha: 0.45;
--cta-safety-bottom-alpha: 0.25;
}
* {
box-sizing: border-box;
}
/* utility */
.nobr{ white-space: nowrap; }
/* Hero section styles */
.hero-subtitle {
font-size: 1.25rem;
color: var(--text-light);
margin: 1rem 0 0.5rem;
text-align: center;
}
/* Tablet band override: keep trophy row layout like desktop (no column) only for 769–800px */
@media (min-width: 769px) and (max-width: 800px){
#trophy-new,
#trophy-micro{
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
row-gap: 0 !important;
column-gap: 0.5rem !important;
width: auto !important;
}
#trophy-new .trophy-icon-new,
#trophy-micro .trophy-icon-new{
margin: 0 !important;
}
#trophy-new .dynamic-text-new,
#trophy-micro .dynamic-text-new{
position: absolute !important;
left: calc(100% + 0.5rem) !important;
top: 50% !important;
transform: translateY(-50%) !important;
display: block !important;
text-align: left !important;
margin: 0 !important;
width: clamp(175px, 32vw, 400px) !important;
max-width: 400px !important;
white-space: nowrap !important;
}
}
.product-subtitle {
font-size: 1rem;
color: var(--accent-gold);
margin: 0.5rem 0 2rem;
text-align: center;
font-weight: 500;
}
/* Hero Video Styles */
.hero-video-container {
position: relative;
max-width: 800px;
margin: 2rem auto;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.video-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(11, 18, 32, 0.8), rgba(8, 14, 28, 0.9));
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 2;
transition: opacity 0.3s ease;
}
.video-overlay.hidden {
opacity: 0;
pointer-events: none;
}
.video-overlay h3 {
color: var(--text-white);
font-size: clamp(.9rem, 3.73vw, 1.5rem);
margin-bottom: 1rem;
text-align: center;
}
.play-button {
background: var(--accent-blue);
color: var(--text-white);
border: none;
padding: clamp(.812rem, 3.61vw, 1.15rem) clamp(1.083rem, 5.415vw, 1.8rem);
border-radius: 8px;
font-size: clamp(.812rem, 3.73vw, 1.2rem);
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
}
.play-button:hover {
background: #0ea5e9;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
}
.play-icon {
font-size: 1.2rem;
}
#heroVideo {
width: 100%;
height: auto;
display: block;
}
/* How to get section */
.how-to-get-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin: 2rem 0;
}
.step-item {
text-align: center;
padding: 1.5rem 1rem;
}
.step-number {
width: 50px;
height: 50px;
background: var(--accent-blue);
color: var(--text-white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
font-weight: 700;
margin: 0 auto 1rem;
}
.step-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-white);
margin-bottom: 0.5rem;
}
.step-text {
color: var(--text-gray);
font-size: 0.9rem;
}
/* Countdown timer styles */
.countdown {
font-size: 3rem;
font-weight: 700;
color: var(--accent-gold);
margin: 1rem 0;
text-shadow: 0 0 20px rgba(234, 179, 8, 0.5);
}
.countdown-text {
font-size: 1.2rem;
color: var(--text-light);
margin-bottom: 1rem;
}
/* Typography hierarchy improvements */
section h2 {
font-size: 3.2rem;
color: var(--text-white);
text-align: center;
margin-bottom: 2rem;
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.02em;
}
.hero-subtitle {
font-size: 1.5rem;
font-weight: 500;
}
.product-subtitle {
font-size: 1.1rem;
font-weight: 600;
}
/* Trust block styles */
.trust-block {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
background: rgba(234, 179, 8, 0.1);
border: 1px solid var(--accent-gold);
border-radius: 12px;
padding: 1rem 1.5rem;
margin: 2rem 0;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.trust-icon {
font-size: 2rem;
color: var(--accent-gold);
}
.trust-content {
text-align: left;
}
.trust-title {
font-weight: 600;
color: var(--text-white);
font-size: 1.1rem;
margin-bottom: 0.25rem;
}
.trust-source {
font-size: 0.9rem;
color: var(--text-gray);
}
/* Benefit line styles */
.benefit-line {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
background: rgba(56, 189, 248, 0.1);
border: 1px solid var(--accent-blue);
border-radius: 8px;
padding: 0.75rem 1rem;
margin: 1rem 0;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.benefit-icon {
font-size: 1.5rem;
color: var(--accent-gold);
}
.benefit-text {
color: var(--text-white);
font-size: 1rem;
}
.benefit-highlight {
color: var(--accent-gold);
font-weight: 700;
font-size: 1.1rem;
}
/* Emotional anchor styles */
.emotional-anchor {
text-align: center;
margin: 2rem 0;
padding: 1.5rem;
background: rgba(56, 189, 248, 0.05);
border-radius: 12px;
border: 1px solid rgba(56, 189, 248, 0.2);
}
.emotional-anchor p {
color: var(--text-white);
font-size: 1.1rem;
line-height: 1.5;
margin: 0;
}
/* Hero emotional one-liner (no wrap, responsive size) */
.hero-emotional{
text-align: center;
margin: clamp(1.5rem, 4vw, 2.5rem) auto clamp(1rem, 8vw, 4rem) auto; /* margin-top адаптивный для опускания текста, margin-bottom адаптивный */
display: flex;
align-items: center;
justify-content: center;
min-height: 60px;
}
.hero-emotional__text{
color: #ffffff;
font-weight: 400;
margin: 0;
white-space: nowrap;
letter-spacing: 0;
line-height: 1.35;
font-size: clamp(.9rem, 3.73vw, 1.5rem);
}
.goal-word {
color: var(--accent-gold);
font-weight: 600;
transition: all 0.3s ease;
}
.goal-word:hover {
color: var(--accent-blue);
transform: scale(1.05);
}
/* Trust line styles */
.trust-line {
text-align: center;
margin-top: 1rem;
padding: 0.75rem;
background: rgba(56, 189, 248, 0.05);
border-radius: 8px;
border: 1px solid rgba(56, 189, 248, 0.2);
}
.trust-line p {
color: var(--text-gray);
font-size: 0.9rem;
margin: 0;
}
/* Trust link styles */
.trust-link {
color: var(--accent-blue);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: all 0.3s ease;
}
.trust-link:hover {
color: var(--accent-gold);
border-bottom-color: var(--accent-gold);
}
/* Hero Section Styles */
.hero-section {
min-height: 100vh;
align-items: center;
display: flex;
justify-content: center;
position: relative;
overflow: hidden;
border: none;
border-radius: 10px;
margin: 0; /* убран внешний отступ */
padding: clamp(20px, 2vw, 40px) 0 0 0; /* небольшой адаптивный отступ сверху */
backdrop-filter: none;
background: transparent;
}
.hero-content {
text-align: center;
max-width: 1200px;
padding: 0;
position: relative;
z-index: 2;
}
.hero-title {
font-family: 'Inter', sans-serif;
font-size: clamp(3.8rem, 8vw, 6.4rem);
font-weight: 600;
text-transform: uppercase;
letter-spacing: -0.02em;
background: linear-gradient(to bottom, #f9e06b 0%, #d4a017 100%);
-webkit-background-clip: text;
color: transparent;
background-clip: text;
margin: 0 0 0.5rem 0;
line-height: 0.9;
}
.hero-title-repeat {
font-family: 'Inter', 'Roboto', sans-serif;
font-size: clamp(3.2rem, 8vw, 6.4rem);
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.1em;
background: linear-gradient(135deg, #d4af37, #ffd700, #b8860b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 0 0 1rem 0;
line-height: 0.9;
text-align: center;
}
.hero-subtitle {
font-family: 'Inter', sans-serif;
font-size: clamp(1.2rem, 3vw, 2rem);
font-weight: 400;
color: #e5e7eb;
margin: 0 0 1.5rem 0;
line-height: 1.3;
letter-spacing: 0.01em;
}
.hero-subtext {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-bottom: 2.75rem;
font-size: clamp(.658rem, 3.04vw, 1.46rem);
color: #64748b;
line-height: 1.3;
}
.subtext-item {
font-weight: 400;
}
.subtext-separator {
color: #d4a017;
font-weight: 400;
}
.hero-slogan {
font-size: clamp(1rem, 3.05vw, 1.15rem);
color: #cbd5e1;
margin-bottom: 2rem;
font-weight: 400;
letter-spacing: 0.02em;
line-height: 1.35;
white-space: nowrap;
overflow-wrap: normal;
word-break: normal;
hyphens: none;
}
.hero-video-container {
position: relative;
width: 800px;
height: 450px;
margin: 0 auto 0.5rem auto;
border-radius: 12px;
overflow: hidden;
}
.hero-video {
width: 100%;
height: 100%;
display: block;
border-radius: 12px;
object-fit: cover;
}
.video-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.75);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
transition: all 0.3s ease;
}
.video-overlay.hidden {
opacity: 0;
pointer-events: none;
}
.video-overlay h3 {
color: #f9fafb;
font-size: clamp(.9rem, 3.73vw, 1.5rem);
font-weight: 600;
margin-bottom: 1.5rem;
}
.play-button {
background: #38bdf8;
color: #ffffff;
border: none;
padding: clamp(.812rem, 3.61vw, 1.15rem) clamp(1.083rem, 5.415vw, 1.8rem);
font-size: clamp(.812rem, 3.73vw, 1.2rem);
font-weight: 500;
border-radius: 8px;
cursor: pointer;
transition: filter 0.2s ease;
display: flex;
align-items: center;
gap: 0.5rem;
box-shadow: none;
}
.play-button:hover {
filter: brightness(1.2);
}
.play-icon {
font-size: 1.2rem;
}
.emotional-anchor {
font-size: 1.3rem;
color: var(--accent-gold);
font-weight: 600;
margin-bottom: 2rem;
letter-spacing: 0.02em;
}
.promo-section {
display: flex;
align-items: center;
justify-content: center;
gap: 1.2rem;
margin-bottom: 0;
padding: 0;
flex-wrap: wrap;
}
/* Sleek bordered wrapper for promo text + button */
.promo-box {
display: inline-flex; /* рамка по контенту */
align-items: center;
gap: 1.2rem;
padding: 0.5rem 0.7rem; /* компактные боковые поля */
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content; /* подстраивается под текст и кнопку */
max-width: 100%;
margin: 0 auto; /* центрируем блок */
border: 1px solid var(--accent-gold);
border-radius: 12px;
background: rgba(234, 179, 8, 0.06);
box-shadow:
inset 0 0 0 1px rgba(234, 179, 8, 0.12),
0 0 0 0 rgba(0,0,0,0);
box-sizing: border-box;
}
/* avoid extra space from generic .fade-in margin rule */
.promo-box.fade-in { margin-bottom: 0; }
/* Light section divider */
.section-divider{
height: 1px;
background: linear-gradient(90deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.22) 20%,
rgba(255,255,255,0.6) 50%,
rgba(255,255,255,0.22) 80%,
rgba(255,255,255,0) 100%);
max-width: 960px;
margin: clamp(40px, 8vw, 80px) 0;
border: none;
}
.promo-text {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.promo-label {
font-family: 'Inter', 'Segoe UI', 'Roboto', sans-serif;
font-size: 1rem;
color: #facc15;
font-weight: 400;
line-height: 1.35em;
}
.promo-savings {
font-size: 1.2rem;
color: #d4a017;
font-weight: 400;
opacity: 0.9;
}
.cta-button,
.promo-scroll-btn {
background: #38bdf8;
color: #ffffff;
border: none;
padding: 0.75em 1.6em;
font-family: 'Inter', 'Segoe UI', 'Roboto', sans-serif;
font-size: 1rem;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.cta-button:hover,
.promo-scroll-btn:hover {
background: #5ee0ff;
}
.social-proof {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
max-width: 600px;
margin: 0 auto;
padding: 0;
}
.proof-icon {
font-size: 1.5rem;
color: var(--accent-gold);
display: inline-block;
width: 1.5rem;
text-align: center;
line-height: 1;
}
.proof-text {
text-align: right;
}
.proof-title {
font-family: 'Inter', 'Segoe UI', 'Roboto', sans-serif;
font-size: 0.9rem;
color: #94a3b8;
font-weight: 400;
line-height: 1.4em;
margin-bottom: 0.25rem;
}
.proof-source {
font-family: 'Inter', 'Segoe UI', 'Roboto', sans-serif;
font-size: 0.8rem;
color: #94a3b8;
line-height: 1.4em;
}
.proof-link {
color: var(--accent-blue);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: all 0.3s ease;
}
.proof-link:hover {
color: var(--accent-gold);
border-bottom-color: var(--accent-gold);
}
/* Tablet responsiveness */
@media (max-width: 1023px) and (min-width: 768px) {
.promo-section {
gap: 1rem;
}
.proof-title,
.dynamic-text-new .proof-title {
font-size: 0.54rem;
}
.proof-source,
.dynamic-text-new .proof-source {
font-size: 0.47rem;
}
.trophy-icon-new { font-size: 1.05rem !important; }
}
@media (max-width: 767px) {
.hero-title {
font-size: clamp(2.4rem, 8vw, 6.4rem);
}
.hero-subtitle {
font-size: clamp(.85rem, 3vw, 2rem);
line-height: 1.25;
}
.hero-subtext {
font-size: clamp(.658rem, 3.04vw, 1.46rem);
line-height: 1.25;
gap: .5rem;
white-space: nowrap;
}
.subtext-separator { font-size: 1em; opacity: .9; }
/* CTA responsive sizes on light background */
.promo-cta-title{ font-size: clamp(1.44rem, 5.58vw, 1.62rem); }
.promo-cta-subtitle{ font-size: clamp(.855rem, 3.42vw, .945rem); }
.promo-cta-meta{ font-size: clamp(.81rem, 3.24vw, .9rem); }
.promo-cta-savings{ font-size: clamp(.882rem, 3.42vw, .954rem); }
.promo-cta-note{ font-size: clamp(.792rem, 3.06vw, .855rem); }
.trust-signature p {
font-size: 1.2rem; /* как у .trust-users-text на mobile */
}
.trust-signature .trust-sig-mid{
font-size: 1.1rem; /* как у hero-subtext на mobile */
}
.hero-slogan {
font-size: clamp(.270rem, 2.47vw, .932rem);
line-height: 1.32;
white-space: nowrap;
letter-spacing: -0.01em;
}
.hero-emotional__text{
font-size: clamp(.732rem, 3.73vw, 1.5rem);
}
.video-overlay h3 {
font-size: clamp(.732rem, 3.73vw, 1.5rem);
white-space: nowrap;
letter-spacing: 0;
}
.play-button {
white-space: nowrap;
}
.hero-video-container { width: 100% !important; height: auto !important; }
.hero-video, #heroVideo { width: 100% !important; height: auto !important; }
.play-button {
padding: clamp(.812rem, 3.61vw, 1.036rem) clamp(1.083rem, 5.415vw, 1.624rem);
font-size: clamp(.812rem, 3.73vw, .979rem);
gap: 0.5rem;
}
.promo-section {
flex-direction: column;
gap: 0.8rem;
}
.promo-box {
flex-direction: column;
gap: 0.45rem;
width: fit-content; /* shrink-wrap */
max-width: calc(100% - 16px); /* отступы по краям экрана */
padding: 0.4rem 0.6rem;
margin: 0 auto; /* центрирование */
}
.promo-label {
font-size: clamp(.666rem, 3.24vw, .855rem);
white-space: nowrap;
letter-spacing: -0.01em;
}
.cta-button,
.promo-scroll-btn {
font-size: clamp(.738rem, 3.24vw, .855rem);
padding: clamp(.56rem, 3.4vw, .75rem) clamp(.8rem, 5vw, 1.1rem);
white-space: nowrap;
}
.social-proof {
flex-direction: column;
text-align: center;
gap: 0.5rem;
}
.proof-text {
text-align: center;
}
.proof-title,
.dynamic-text-new .proof-title {
font-size: clamp(.377rem, 2.048vw, .485rem);
line-height: 1.25;
white-space: nowrap;
letter-spacing: 0;
}
.proof-source,
.dynamic-text-new .proof-source {
font-size: clamp(.314rem, 1.764vw, .417rem);
white-space: nowrap;
letter-spacing: 0;
}
}
/* Extra-small phones fine-tune */
@media (max-width: 360px) {
.promo-box{
width: fit-content; /* shrink-wrap */
max-width: calc(100% - 12px);
padding: 0.315rem 0.468rem; /* −10% */
gap: 0.315rem; /* −10% */
margin: 0 auto;
}
.promo-label{
font-size: clamp(.535rem, 3.40vw, .729rem); /* −10% */
letter-spacing: -0.012em;
white-space: nowrap;
}
.promo-scroll-btn{
font-size: clamp(.646rem, 3.85vw, .769rem); /* −10% */
padding: clamp(.531rem, 3.42vw, .769rem) clamp(.684rem, 5.13vw, .940rem); /* −10% */
white-space: nowrap;
}
.hero-emotional__text{
font-size: clamp(.732rem, 3.73vw, 1.5rem);
letter-spacing: -0.01em;
}
.hero-subtitle {
font-size: clamp(.85rem, 3vw, 2rem);
line-height: 1.3;
letter-spacing: .01em;
}
.hero-subtext { flex-direction: row; gap: .35rem; white-space: nowrap; font-size: clamp(.658rem, 3.04vw, 1.46rem); }
.subtext-separator { display: inline; }
.hero-slogan {
font-size: clamp(.515rem, 3.05vw, 1.15rem);
line-height: 1.32;
white-space: normal;
letter-spacing: -0.025em;
}
.proof-title,
.dynamic-text-new .proof-title {
font-size: clamp(.300rem, 2.134vw, .407rem);
letter-spacing: -0.01em;
white-space: nowrap;
}
.proof-source,
.dynamic-text-new .proof-source {
font-size: clamp(.248rem, 1.855vw, .353rem);
letter-spacing: -0.01em;
white-space: nowrap;
}
.video-overlay h3 {
font-size: clamp(.732rem, 3.73vw, 1.5rem);
letter-spacing: -0.01em;
white-space: nowrap;
}
.play-button {
font-size: clamp(.812rem, 3.73vw, .979rem);
padding: clamp(.561rem, 3.61vw, .812rem) clamp(.722rem, 5.415vw, .993rem);
gap: .35rem;
white-space: nowrap;
}
}
/* Unify promo CTA scaling across all narrow screens (phones + tablets) to avoid jumps */
@media (max-width: 1024px) and (min-width: 361px) {
.promo-box{
width: fit-content; /* shrink-wrap */
max-width: calc(100% - 12px); /* не вылезать за экран */
padding: clamp(.28rem, .9vw, .5rem) clamp(.46rem, 1.2vw, .72rem);
gap: clamp(.32rem, 1vw, .7rem);
box-sizing: border-box;
}
.promo-label{
font-size: clamp(.666rem, 3.24vw, .855rem);
line-height: 1.28em;
white-space: nowrap;
letter-spacing: -0.01em;
}
.promo-scroll-btn{
font-size: clamp(.738rem, 3.24vw, .855rem);
padding: clamp(.44rem, 2.2vw, .62rem) clamp(.64rem, 3.6vw, .92rem);
white-space: nowrap;
}
}
/* CTA hierarchy styles */
.primary-cta {
order: 1;
}
.secondary-cta {
order: 2;
}
.cta-micro-proof {
font-size: 0.8rem;
color: var(--text-gray);
margin-top: 0.5rem;
text-align: center;
}
.cta-guarantee {
font-size: 0.85rem;
color: var(--accent-gold);
font-weight: 600;
margin-top: 0.5rem;
text-align: center;
}
/* Advantage micro-facts */
.advantage-micro-fact {
font-size: 0.85rem;
color: var(--accent-gold);
font-weight: 600;
margin-top: 0.5rem;
text-align: center;
}
/* Mobile compact hero */
@media (max-width: 768px) {
.trust-block {
margin: 1rem 0;
padding: 0.75rem 1rem;
}
.benefit-line {
margin: 0.5rem 0;
padding: 0.5rem 0.75rem;
}
.emotional-anchor {
margin: 1rem 0;
padding: 1rem;
}
/* Reduce H2 size on mobile */
section h2 {
font-size: 2.5rem;
}
}
/* Add vertical spacing between sections */
.fade-in {
margin-bottom: 4rem;
}
/* Reduce space after TIME-CONTROL specifically */
.time-control-section.fade-in {
margin-bottom: 2rem;
}
.reviews-section {
margin-top: 2rem;
}
/* Pricing CTA visual emphasis */
.pricing-primary {
position: relative;
transform: scale(1.05);
z-index: 2;
}
.recommended-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--accent-gold);
color: var(--primary-bg);
font-size: 0.75rem;
font-weight: 700;
padding: 4px 12px;
border-radius: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 2px 8px rgba(234, 179, 8, 0.3);
}
/* Interlayer section styles */
.interlayer-section {
background: transparent;
padding: 60px 0 40px 0;
text-align: center;
}
.interlayer-content {
max-width: 900px;
margin: 0 auto;
padding: 0 1.5rem;
}
.interlayer-content p {
font-family: 'Inter', sans-serif;
font-size: clamp(1rem, 2vw, 1.25rem);
font-weight: 300;
color: #94a3b8;
margin-bottom: 0.5rem;
line-height: 1.6;
}
.interlayer-content p:last-child {
margin-bottom: 0;
}
/* Fade-in animation for interlayer */
.interlayer-section.fade-in {
opacity: 0;
transform: translateX(-30px);
transition: all 0.7s ease;
}
.interlayer-section.fade-in.visible {
opacity: 1;
transform: translateX(0);
}
/* Time control section styles - aligned with hero */
.time-control-section {
border: none;
outline: none;
padding: clamp(20px, 5vw, 1000px) 0 clamp(20px, 5vw, 100px) 0; /* адаптивный отступ */
text-align: center;
position: relative;
}
/* Visual timeline element - removed */
.time-control-section::before {
display: none;
}
/* Fade out effect at bottom - removed */
.time-control-section::after {
display: none;
}
.time-control-container {
max-width: 900px;
margin: 0 auto;
padding: 0 1.5rem;
}
.time-control-overhead {
font-family: 'Inter', 'Roboto', sans-serif;
font-size: 1.5rem;
font-weight: 500;
color: #facc15;
opacity: 0.95;
margin-bottom: 1rem;
line-height: 1.3;
}
.time-control-title {
font-family: 'Inter', 'Roboto', sans-serif;
font-size: clamp(2rem, 4vw, 2.6rem);
font-weight: 600;
color: #f1f5f9;
margin-bottom: 2.5rem;
line-height: 1.3;
letter-spacing: -0.01em;
}
.time-control-subtitle {
margin-bottom: 3rem;
}
.time-control-subtitle p {
font-family: 'Inter', 'Roboto', sans-serif;
font-size: clamp(1rem, 2vw, 1.25rem);
color: #f1f5f9;
margin-bottom: 1.2rem;
line-height: 1.6;
font-weight: 300;
}
.time-control-main-text {
margin-bottom: 4rem;
}
.time-control-main-text p {
font-family: 'Inter', 'Roboto', sans-serif;
font-size: 1rem;
color: #f1f5f9;
margin-bottom: 1.2rem;
line-height: 1.7;
font-weight: 300;
}
.target-audience-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin: 4rem 0;
}
.time-control-section .audience-card {
background: rgba(56, 189, 248, 0.05);
border: 1px solid rgba(56, 189, 248, 0.15);
border-radius: 12px;
padding: 2rem;
text-align: center;
transition: all 0.3s ease;
min-height: 180px;
display: flex;
flex-direction: column;
justify-content: center;
}
.time-control-section .audience-card:hover {
background: rgba(56, 189, 248, 0.08);
border-color: rgba(56, 189, 248, 0.3);
transform: translateY(-1px);
}
.time-control-section .audience-icon {
font-size: 2.5rem;
margin-bottom: 1.2rem;
filter: grayscale(0);
}
.time-control-section .audience-title {
font-family: 'Inter', 'Roboto', sans-serif;
font-size: 1rem;
font-weight: 400;
color: #f1f5f9;
line-height: 1.5;
}
.time-control-signature {
margin-top: 4rem;
text-align: center;
}
.time-control-signature p {
font-family: 'Inter', 'Roboto', sans-serif;
font-size: 1rem;
color: #94a3b8;
margin-bottom: 0.5rem;
line-height: 1.8;
font-weight: 300;
opacity: 0.85;
}
.time-control-signature p:last-child {
margin-bottom: 0;
font-weight: 400;
}
/* Time control markers styles */
.time-control-markers {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
gap: 16px;
margin: 3rem 0;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
align-items: center;
}
/* Desktop: карточки в одну линию с одинаковой шириной */
@media (min-width: 1025px) {
.time-control-markers {
grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
gap: 20px;
max-width: 1200px;
}
.marker-item {
width: 100%;
min-width: 140px;
max-width: 160px;
min-height: 140px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 1.2rem;
}
/* Стрелки на desktop — такие же, как на планшетах (2× длина, толще, поверх карточек) */
.time-control-markers .marker-arrow {
display: flex;
transform: rotate(0deg) scaleX(2.0) scaleY(2.0);
min-height: 32px;
font-size: 1.4rem;
width: 12px;
padding: 0;
position: relative;
z-index: 5;
margin-left: -12px;
margin-right: -12px;
line-height: 1;
pointer-events: none;
font-weight: 900;
-webkit-text-stroke: 0.6px currentColor;
text-shadow: 0 0 0 currentColor, 0 0 0 currentColor;
opacity: 0;
animation: arrowOpacity 0.3s ease forwards;
}
.marker-emotional {
font-size: 0.95rem;
line-height: 1.3;
margin-bottom: 0.5rem;
min-height: 2.6em; /* Минимальная высота для двух строк */
display: flex;
align-items: center;
justify-content: center;
text-align: center;
word-break: normal;
hyphens: none;
white-space: normal;
overflow-wrap: break-word;
}
}
/* Tablet: уплотняем в одну линию с минимальными зазорами */
@media (max-width: 1024px) and (min-width: 769px) {
/* Hero slogan: reduce by ~10% at the first non-wrapping tablet width to avoid visual jump */
.hero-slogan{
font-size: clamp(.300rem, 2.745vw, 1.035rem);
}
.time-control-markers {
grid-template-columns: 160px 12px 160px 12px 160px 12px 160px; /* фикс. ширина карточек как на desktop */
gap: 2px; /* минимальный зазор между элементами */
max-width: 1000px;
margin: 2rem auto;
justify-content: center;
}
/* Не меняем размеры карточек на планшетах */
/* Стрелки — горизонтальные, толще; для планшетов длина −20% и смещены правее */
.time-control-markers .marker-arrow {
display: flex;
transform: translateX(4px) rotate(0deg) scaleX(1.6) scaleY(2.0);
min-height: 32px;
font-size: 1.4rem; /* базовая толщина/высота стрелки */
width: 12px; /* узкая колонка для стрелки */
padding: 0;
position: relative; /* для перекрытия карточек */
z-index: 5; /* поверх карточек */
margin-left: -6px; /* чуть меньше перекрытие слева */
margin-right: -18px; /* чуть больше перекрытие справа */
line-height: 1; /* без лишней высоты */
pointer-events: none; /* не мешаем кликам по карточкам */
font-weight: 900;
-webkit-text-stroke: 0.6px currentColor;
text-shadow: 0 0 0 currentColor, 0 0 0 currentColor;
opacity: 0;
animation: arrowOpacity 0.3s ease forwards; /* не изменяем transform */
}
.time-control-markers .marker-arrow:nth-child(2) { animation-delay: 0.4s; }
.time-control-markers .marker-arrow:nth-child(4) { animation-delay: 0.7s; }
.time-control-markers .marker-arrow:nth-child(6) { animation-delay: 1.0s; }
.marker-emotional {
font-size: 0.9rem;
line-height: 1.3;
min-height: 2.6em;
word-break: normal;
hyphens: none;
overflow-wrap: break-word;
}
.marker-rational {
font-size: 0.85rem;
}
.time-control-summary p {
font-size: 0.9rem;
}
.micro-text {
font-size: 0.8rem;
}
}
/* Mobile: карточки во всю ширину друг под другом */
@media (max-width: 768px) {
.time-control-markers {
grid-template-columns: 1fr;
gap: 6px;
margin: 2rem 0;
}
.marker-item {
width: 100%;
padding: 16px;
min-height: 120px;
}
.marker-emotional {
font-size: 0.95rem;
word-break: normal;
hyphens: none;
overflow-wrap: break-word;
}
.marker-rational {
font-size: 0.85rem;
}
.time-control-summary p {
font-size: 0.9rem;
}
.micro-text {
font-size: 0.8rem;
}
}
/* Отдельный медиа-запрос для стрелок на мобильных */
@media (max-width: 768px) and (min-width: 481px) {
.marker-arrow {
font-size: 1.5rem;
min-height: 40px;
transform: rotate(90deg) scaleX(1.5) scaleY(0.5);
opacity: 0;
animation: fadeInScale 0.4s ease forwards;
}
.marker-arrow:nth-child(2) {
animation-delay: 0.4s;
}
.marker-arrow:nth-child(4) {
animation-delay: 0.7s;
}
.marker-arrow:nth-child(6) {
animation-delay: 1.0s;
}
@keyframes fadeInScale {
from {
opacity: 0;
transform: rotate(90deg) scaleX(0.8) scaleY(0.3);
}
to {
opacity: 1;
transform: rotate(90deg) scaleX(1.5) scaleY(0.5);
}
}
}
/* Очень узкие экраны (≤480px) */
@media (max-width: 480px) {
.time-control-markers {
grid-template-columns: 1fr;
gap: 6px;
}
.marker-item {
padding: 12px;
min-height: 100px;
}
}
.marker-arrow {
font-size: 2rem;
color: #facc15;
font-weight: 700;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
min-height: 60px;
transform: scaleX(0.5) scaleY(1.5);
opacity: 0;
animation: fadeInScale 0.4s ease forwards;
}
.marker-arrow:nth-child(2) {
animation-delay: 0.4s;
}
.marker-arrow:nth-child(4) {
animation-delay: 0.7s;
}
.marker-arrow:nth-child(6) {
animation-delay: 1.0s;
}
/* Mobile: make time-control arrows vertical (override global arrow styles) */
@media (max-width: 768px) {
.time-control-markers .marker-arrow {
transform: translateY(2px) rotate(90deg) scaleX(1.2); /* 1.5× длиннее от текущего */
min-height: 20px;
font-size: 1.2rem; /* больше базовый размер символа */
font-weight: 900;
text-shadow: 0 0 0 currentColor, 0 0 0 currentColor; /* уплотнение визуальной толщины */
-webkit-text-stroke: 0.6px currentColor; /* добавочная толщина для некоторых браузеров */
line-height: 1;
margin: -8px 0; /* небольшое перекрытие сверху/снизу для центровки */
padding: 0;
position: relative;
z-index: 5;
pointer-events: none;
opacity: 0;
animation: arrowOpacity 0.3s ease forwards; /* не трогаем transform, чтобы не сбить rotate */
}
.time-control-markers .marker-arrow:nth-child(2) { animation-delay: 0.4s; }
.time-control-markers .marker-arrow:nth-child(4) { animation-delay: 0.7s; }
.time-control-markers .marker-arrow:nth-child(6) { animation-delay: 1.0s; }
}
@media (max-width: 480px) {
.time-control-markers .marker-arrow {
transform: translateY(1px) rotate(90deg) scaleX(1.2);
min-height: 16px;
font-size: 1.05rem; /* слегка больше */
font-weight: 900;
text-shadow: 0 0 0 currentColor, 0 0 0 currentColor;
-webkit-text-stroke: 0.6px currentColor;
line-height: 1;
margin: -6px 0;
padding: 0;
position: relative;
z-index: 5;
pointer-events: none;
animation: arrowOpacity 0.3s ease forwards; /* сохраняем поворот */
}
.time-control-markers .marker-arrow:nth-child(2) { animation-delay: 0.4s; }
.time-control-markers .marker-arrow:nth-child(4) { animation-delay: 0.7s; }
.time-control-markers .marker-arrow:nth-child(6) { animation-delay: 1.0s; }
}
.marker-item {
text-align: center;
padding: 24px;
background: rgba(56, 189, 248, 0.05);
border: 1px solid rgba(56, 189, 248, 0.15);
border-radius: 12px;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
min-height: 160px;
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.3s ease forwards;
}
.marker-item:nth-child(1) {
animation-delay: 0.1s;
}
.marker-item:nth-child(3) {
animation-delay: 0.4s;
}
.marker-item:nth-child(5) {
animation-delay: 0.7s;
}
.marker-item:nth-child(7) {
animation-delay: 1.0s;
}
/* Запуск анимаций TIME-CONTROL только при появлении секции в окне */
.time-control-section.fade-in:not(.visible) .marker-item,
.time-control-section.fade-in:not(.visible) .marker-arrow {
animation-play-state: paused;
}
.time-control-section.fade-in.visible .marker-item,
.time-control-section.fade-in.visible .marker-arrow {
animation-play-state: running;
}
@keyframes fadeInScale {
from {
opacity: 0;
transform: scaleX(0.3) scaleY(0.8);
}
to {
opacity: 1;
transform: scaleX(0.5) scaleY(1.5);
}
}
/* Простая анимация появления для вертикальных стрелок без изменения transform */
@keyframes arrowOpacity {
from { opacity: 0; }
to { opacity: 1; }
}
/* Mobile-specific animation with rotation for vertical arrows */
@keyframes fadeInScaleRotate {
from {
opacity: 0;
transform: rotate(90deg) scaleX(0.8) scaleY(0.3);
}
to {
opacity: 1;
transform: rotate(90deg) scaleX(1.5) scaleY(0.5);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Старые стили социального доказательства удалены - используется новое CSS решение */
/* Time control micro animation */
.time-control-micro {
opacity: 0;
transform: translateX(0);
transition: all 0.8s ease;
}
.time-control-micro .micro-icon,
.time-control-micro .micro-text {
opacity: 0;
transition: opacity 0.6s ease 0.2s;
}
.time-control-micro.centered {
opacity: 1;
transform: translateX(var(--micro-offset-x, 0px));
}
.time-control-micro.centered .micro-icon,
.time-control-micro.centered .micro-text {
opacity: 1;
}
.marker-item:hover {
background: rgba(56, 189, 248, 0.08);
border-color: rgba(56, 189, 248, 0.30);
transform: translateY(-2px);
}
.marker-icon {
font-size: 2.5rem;
margin-bottom: 12px;
transition: all 0.3s ease;
}
.marker-item:hover .marker-icon {
transform: scale(1.05);
}
.marker-emotional {
font-family: 'Inter', 'Roboto', sans-serif;
font-size: 1.1rem;
font-weight: 700;
color: #ffffff;
line-height: 1.3;
text-align: center;
margin-bottom: 8px;
}
.marker-rational {
font-family: 'Inter', 'Roboto', sans-serif;
font-size: 0.9rem;
font-weight: 400;
color: #9ca3af;
line-height: 1.4;
text-align: center;
}
.time-control-summary {
margin: 2rem 0;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.time-control-summary p {
font-family: 'Inter', 'Roboto', sans-serif;
font-size: 1rem;
color: #cbd5e1;
line-height: 1.6;
margin-bottom: 0.5rem;
text-align: center;
}
.time-control-micro {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 20px;
}
.micro-icon {
font-size: 1.2rem;
color: #94a3b8;
}
.micro-text {
font-family: 'Inter', 'Roboto', sans-serif;
font-size: 0.9rem;
color: #94a3b8;
line-height: 1.4;
text-align: right;
}
.micro-accent {
color: #38bdf8;
font-weight: 500;
}
/* Mobile responsiveness for time control section */
@media (max-width: 768px) {
.time-control-overhead {
font-size: clamp(0.9rem, 3vw, 1.1rem);
}
.time-control-title {
font-size: clamp(1.8rem, 4vw, 2.6rem); /* базовый мобильный уровень */
}
.trust-main-title .trust-subtitle{
font-size: clamp(1.8rem, 4vw, 2.6rem);
}
.trust-signature .trust-sig-top,
.trust-signature .trust-sig-second{
font-size: clamp(1.8rem, 4vw, 2.6rem);
}
.trust-signature p {
font-size: clamp(1.8rem, 4vw, 2.6rem);
}
.time-control-summary p {
font-size: 0.9rem;
}
.micro-text {
font-size: 0.8rem;
}
}
/* Узкие телефоны — ещё −10% к минимуму, тот же vw и max (монотонно) */
@media (max-width: 480px) {
.time-control-title {
font-size: clamp(1.62rem, 4vw, 2.6rem);
}
.trust-main-title .trust-subtitle{
font-size: clamp(1.62rem, 4vw, 2.6rem);
}
.trust-signature .trust-sig-top,
.trust-signature .trust-sig-second{
font-size: clamp(1.58rem, 4vw, 2.6rem);
}
.trust-signature p {
font-size: clamp(1.62rem, 4vw, 2.6rem);
}
/* Align trust stats line with hero-subtext on small phones */
.trust-stats-line .trust-stat-highlight,
.trust-stats-line .trust-separator{
font-size: clamp(.79rem, 3.65vw, 1.75rem) !important; /* +20% */
letter-spacing: 0 !important;
line-height: 1.3 !important;
}
}
/* Самые узкие — ещё −10% к минимуму (монотонно) */
@media (max-width: 360px) {
.time-control-title {
font-size: clamp(1.46rem, 4vw, 2.6rem);
}
.trust-main-title .trust-subtitle{
font-size: clamp(1.46rem, 4vw, 2.6rem);
}
.trust-signature .trust-sig-top,
.trust-signature .trust-sig-second{
font-size: clamp(1.40rem, 4vw, 2.6rem);
}
.trust-signature p {
font-size: clamp(1.46rem, 4vw, 2.6rem);
}
.trust-stats-line .trust-stat-highlight,
.trust-stats-line .trust-separator{
font-size: clamp(.79rem, 3.65vw, 1.75rem) !important; /* +20% for ≤360px */
letter-spacing: 0 !important;
line-height: 1.3 !important;
}
/* Ensure identical size for users-global stats line on 360px */
.trust-users-global .trust-stats-line.trust-users-text .trust-stat-highlight{
font-size: clamp(.79rem, 3.65vw, 1.75rem) !important;
}
}
/* Trust section styles */
.trust-section {
padding: clamp(16px, 3vw, 32px) 0 clamp(32px, 4vw, 64px) 0;
text-align: center;
}
.trust-container {
max-width: 1200px;
margin: 0 auto;
padding: 0;
}
/* 1. Заголовок */
.trust-header {
text-align: center;
margin-bottom: 2rem;
}
.trust-main-title {
font-family: 'Inter', 'Roboto', sans-serif;
font-size: clamp(2rem, 4vw, 2.6rem);
font-weight: 700;
color: #ffffff;
line-height: 1.2;
}
.trust-main-title .trust-subtitle{
display: block;
margin-top: 2.5rem;
font-size: clamp(2rem, 4vw, 2.6rem);
font-family: 'Inter', 'Roboto', sans-serif;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.3;
color: #f1f5f9;
}
@media (max-width: 480px) {
.trust-main-title .trust-subtitle{
font-size: clamp(1.62rem, 4vw, 2.6rem);
}
}
@media (max-width: 360px) {
.trust-main-title .trust-subtitle{
font-size: clamp(1.46rem, 4vw, 2.6rem);
}
}
/* Align trust signature lines with time-control-title on narrow screens */
@media (max-width: 480px) {
.trust-signature .trust-sig-top,
.trust-signature .trust-sig-second,
.trust-signature .trust-sig-bottom{
font-size: clamp(1.62rem, 4vw, 2.6rem);
}
.trust-signature p { font-weight: 600; line-height: 1.15; }
}
@media (max-width: 360px) {
.trust-signature .trust-sig-top,
.trust-signature .trust-sig-second,
.trust-signature .trust-sig-bottom{
font-size: clamp(1.46rem, 4vw, 2.6rem);
}
.trust-signature p { font-weight: 600; line-height: 1.15; }
}
/* Guarantee exact size match with promo title on 360px */
@media (max-width: 360px) {
section.trust-section .trust-signature .trust-sig-top,
section.trust-section .trust-signature .trust-sig-second{
font-size: clamp(1.46rem, 4vw, 2.6rem) !important;
}
}
/* Branded STALKER text style from site header */
.brand-stalker{
font-family: 'Inter', sans-serif;
background: linear-gradient(to bottom, #f9e06b 0%, #d4a017 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent; /* ensure gradient only in glyphs */
text-transform: uppercase;
letter-spacing: -0.02em; /* match hero-title */
font-weight: 600; /* match hero-title */
display: inline-block;
}
/* 2. Цифры в одной строке */
.trust-stats-line {
text-align: center;
margin-bottom: 3rem;
display: flex;
align-items: center;
justify-content: center;
gap: .35rem;
white-space: nowrap; /* как у hero-subtext */
}
.trust-stat-highlight {
color: #facc15; /* оставить цвет */
font-weight: 400; /* как у hero-subtext */
font-size: clamp(.658rem, 3.04vw, 1.46rem); /* как у hero-subtext */
text-shadow:
0 1px 2px rgb(11, 5, 97),
0 0 6px rgb(8, 32, 112),
0 0 14px rgba(26, 61, 126, 0.9),
0 0 46px rgba(23, 95, 143, 0.7);
}
.trust-separator {
color: #38bdf8; /* оставить цвет */
font-weight: 400; /* как у .subtext-separator */
font-size: clamp(.658rem, 3.04vw, 1.46rem); /* как у hero-subtext */
margin: 0 .6rem;
}
/* 3. Карточка автора */
.trust-author-card {
background: white;
border-radius: 16px;
padding: 1.5rem 2.5rem 0.75rem 2.5rem;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
width: 554px;
height: 308px;
margin: 0 auto 3rem;
display: flex;
flex-direction: column;
align-items: center;
}
@media (max-width: 768px) {
.trust-author-card {
width: 90vw;
max-width: 410px;
height: auto;
min-height: 226px;
padding: 1.25rem 1.5rem 0.625rem 1.5rem;
}
.trust-author-main {
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: 1.5rem !important;
}
.trust-author-content {
text-align: center !important;
}
.trust-author-links {
align-items: center !important;
}
}
@media (max-width: 480px) {
.trust-author-card {
width: 95vw;
max-width: 359px;
padding: 1rem 1.25rem 0.5rem 1.25rem;
}
.trust-author-main {
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: 1rem !important;
}
.trust-author-photo {
width: 100px !important;
height: 100px !important;
}
.trust-author-content {
text-align: center !important;
}
.trust-author-links {
align-items: center !important;
}
}
@media (max-width: 360px) {
.trust-author-card {
width: 90vw; /* −5% ширины от 95vw */
max-width: 341px; /* ≈ −5% от 359px */
}
}
.trust-author-main {
display: flex;
align-items: flex-start;
gap: 2rem;
width: 100%;
padding-top: 0;
margin-top: 0.75rem; /* опускаем фото и текст ниже заголовка */
}
.trust-author-card .trust-author-avatar {
margin: 0;
}
.trust-author-card .trust-author-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
/* One-time upscale: when the card's base width (554px) is less than half of the viewport (>=1108px),
visually scale the entire card by 1.5x to keep proportions (text and photo scale too). */
@media (min-width: 1108px) {
.trust-author-card {
transform: scale(1.4);
transform-origin: top center;
margin-left: auto;
margin-right: auto;
/* reserve vertical space for the visual growth so following content doesn't overlap */
margin-bottom: calc((1.4 - 1) * 400px);
}
}
.trust-author-header {
margin-bottom: 1rem;
text-align: center;
}
.trust-author-role {
font-family: 'Inter', 'Roboto', sans-serif;
font-size: 1.1rem;
font-weight: 600;
color: #000000;
margin: 0;
}
.trust-author-role .author-name {
font-weight: 700;
color: #000000;
text-transform: none;
}
.trust-author-photo {
width: 127px;
height: 127px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #38bdf8;
}
.trust-author-name {
font-family: 'Inter', 'Roboto', sans-serif;
font-size: 1.2rem;
font-weight: 700;
color: #d4af37;
margin-bottom: 0.25rem;
}
.trust-author-title {
font-family: 'Inter', 'Roboto', sans-serif;
font-size: 0.9rem;
color: #374151;
margin-bottom: 0.5rem;
font-weight: 500;
}
.trust-author-achievement {
font-family: 'Inter', 'Roboto', sans-serif;
font-size: 0.85rem;
color: #6b7280;
line-height: 1.4;
margin-bottom: 1rem;
}
.trust-author-links {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: flex-end;
margin-top: 0.75rem;
}
.trust-author-link-item {
margin-bottom: 0.5rem;
}
.trust-author-link {
color: var(--accent-blue);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: all 0.3s ease;
display: block;
}
.trust-author-link:hover {
color: var(--accent-gold);
border-bottom-color: var(--accent-gold);
}
.trust-author-link-title {
font-size: 0.8rem;
font-weight: 500;
color: inherit;
line-height: 1.3;
}
/* 4. Пользователи по всему миру */
.trust-users-global {
text-align: center;
margin-bottom: 0rem;
}
.trust-users-icon {
font-size: 3rem;
margin-bottom: 1rem;
display: inline-block;
width: 1.08em;
height: 1.08em;
line-height: 1.08em;
text-align: center;
position: relative;
border-radius: 50%;
}
/* Subtle golden glow around the globe */
.trust-users-icon::after{
content:"";
position:absolute;
inset: -2px;
border-radius: 50%;
box-shadow:
0 0 14px rgba(234, 179, 8, .24),
0 0 28px rgba(234, 179, 8, .14);
pointer-events: none;
}
/* SVG/IMG inside replaces emoji; no pseudo rings needed */
.trust-users-icon img,
.trust-users-icon svg{ width:100%; height:100%; display:block; }
/* Make raster/SVG perfectly round and add golden ring */
.trust-users-icon img{ border-radius: 50%; }
.trust-users-text {
font-family: 'Inter', 'Roboto', sans-serif;
font-size: clamp(.658rem, 3.04vw, 1.46rem); /* как у hero-subtext */
font-weight: 400;
color: #facc15;
text-shadow:
0 1px 2px rgb(11, 5, 97),
0 0 6px rgb(8, 32, 112),
0 0 14px rgba(26, 61, 126, 0.9),
0 0 46px rgba(23, 95, 143, 0.7);
white-space: nowrap;
line-height: 1.3;
letter-spacing: 0;
}
/* Make users-global stats line visually identical to main trust-stats-line */
.trust-users-global .trust-stats-line.trust-users-text{
/* Normalize typography to match .trust-stats-line usage above */
font-family: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
letter-spacing: 0 !important;
color: inherit !important; /* let span define the color like other stats */
font-weight: 400 !important; /* align with .trust-stat-highlight */
}
.trust-users-global .trust-stats-line.trust-users-text .trust-stat-highlight{
font-weight: 400 !important; /* ensure not bold */
}
/* 5. Карусель видео-отзывов */
.trust-reviews {
background: transparent;
padding: 0;
border-radius: 16px;
margin-bottom: 2rem;
perspective: 1000px;
overflow: hidden;
position: relative;
}
/* TRUST: subtle film gif loader */
.trust-reviews .trust-film-loader{
position:absolute;
inset: 0;
display:flex;
align-items:center;
justify-content:center;
pointer-events:none;
opacity: 0;
animation: filmLoaderIn 12s ease forwards;
}
.trust-reviews .trust-film-loader img{
width: 432px;
height: auto;
opacity: 1;
filter: grayscale(1) contrast(.9) brightness(1.1);
image-rendering: -webkit-optimize-contrast;
transform: translateY(0);
}
@keyframes filmLoaderIn{
from{ opacity: 0; }
to { opacity: .20; }
}
@keyframes filmLoaderOut{
from{ opacity: .20; }
to { opacity: 0; }
}
/* Hide real carousel until loaded; hide loader after load */
.trust-reviews:not(.tr-loaded) .trust-video-carousel{ visibility: hidden; }
.trust-reviews.tr-loaded .trust-film-loader{
animation: filmLoaderOut 3.2s ease forwards;
}
/* 6. Подпись */
.trust-signature {
text-align: center;
}
.trust-signature p {
font-family: 'Inter', 'Roboto', sans-serif;
font-weight: 800; /* как у .promo-cta-title */
font-size: clamp(2rem, 4vw, 2.6rem); /* как у time-control-title */
line-height: 1.22; /* чуть больше обычного перевода строки */
letter-spacing: -0.01em; /* как у .promo-cta-title */
color: #25265cde; /* deep‑marine, как на банковской карточке */
font-style: normal;
margin: 0;
}
.trust-signature .trust-sig-top,
.trust-signature .trust-sig-second{
display:inline-block;
font-size: clamp(2rem, 4vw, 2.6rem);
line-height: 1.22;
letter-spacing: inherit;
color: inherit;
font-weight: inherit;
}
.trust-signature .trust-sig-mid{
display: inline; /* используем
без доп. блока */
font-family: 'Inter', 'Roboto', sans-serif;
font-weight: 400; /* как у .subtext-item */
font-size: clamp(1.1rem, 3.2vw, 1.5rem); /* масштаб как у subtext */
color: #64748b; /* как у hero-subtext / subtext-item */
line-height: 1.3;
margin: 0; /* никаких внешних отступов */
}
.trust-signature .trust-sig-mid .sig-word{
color: #64748b; /* как у “с точностью до минут” */
font-weight: 400;
}
.trust-signature .trust-sig-mid .sig-conj{
color: #d4a017; /* золотой союз «и» */
margin: 0 .4rem;
font-weight: 700;
font-size: .8em; /* ещё компактнее габарит */
display: inline-block;
line-height: 1;
}
.trust-signature .trust-sig-bottom{
display: inline-block; /* позволяем вертикальный отступ */
margin-top: 0.5em; /* ≈ +20% от строки */
}
/* 3D Карусель видео-отзывов */
.trust-video-carousel {
display: flex;
justify-content: center;
align-items: center;
height: 500px;
position: relative;
transform-style: preserve-3d;
margin-top: 32px; /* опускаем карусель ниже от кнопок */
}
.carousel-container {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
}
.carousel-track {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
justify-content: center;
align-items: center;
}
/* Отдельные кликабельные зоны вне карточек */
.carousel-click-zones {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1; /* Под центральной карточкой (z-index: 3), но выше боковых (z-index: 2) */
pointer-events: none;
}
.carousel-left-zone {
position: absolute;
top: 50%;
left: 50%;
width: 158px; /* side width = 280 * 0.8 * cos(45°) ≈ 158 */
height: 280px; /* side height = 350 * 0.8 */
margin-left: -279px; /* -200 - (158/2) */
margin-top: -165px; /* align top with visually scaled side card */
/* background: rgba(255, 0, 0, 0.3); */ /* Красная зона для отладки */
pointer-events: auto;
cursor: pointer;
border-radius: 16px;
}
.carousel-right-zone {
position: absolute;
top: 50%;
left: 50%;
width: 158px; /* 280 * 0.8 * cos(45°) */
height: 280px; /* 350 * 0.8 */
margin-left: 121px; /* 200 - (158/2) */
margin-top: -165px; /* align top with visually scaled side card */
/* background: rgba(0, 255, 0, 0.3); */ /* Зеленая зона для отладки */
pointer-events: auto;
cursor: pointer;
border-radius: 16px;
}
.trust-video-card {
position: absolute;
background: white;
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
width: 280px;
height: 350px;
cursor: pointer;
transform-style: preserve-3d;
left: 50%;
top: 50%;
margin-left: -140px; /* половина ширины */
margin-top: -200px; /* половина высоты */
opacity: 0;
transform: translateZ(-300px) rotateY(180deg) scale(0.5);
visibility: hidden;
user-select: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: transparent;
}
/* Анимация появления карусели */
.carousel-loaded .trust-video-card {
visibility: visible;
}
/* Центральная карточка (активная) */
.trust-video-card.center {
transform: translateZ(0) scale(1);
z-index: 3;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}
/* Левая карточка (повернута) */
.trust-video-card.left {
transform: translateX(-180px) translateZ(-100px) rotateY(45deg) scale(0.8);
z-index: 2;
opacity: 0.7;
pointer-events: auto !important;
cursor: pointer !important;
}
/* Правая карточка (повернута) */
.trust-video-card.right {
transform: translateX(180px) translateZ(-100px) rotateY(-45deg) scale(0.8);
z-index: 2;
opacity: 0.7;
pointer-events: auto !important;
cursor: pointer !important;
}
/* Улучшенная кликабельность для боковых карточек */
.trust-video-card.left,
.trust-video-card.right {
cursor: pointer;
pointer-events: auto;
}
.trust-video-card.left:hover,
.trust-video-card.right:hover {
cursor: pointer;
}
/* Скрытые карточки */
.trust-video-card.hidden {
transform: translateZ(-200px) scale(0.6);
opacity: 0.3;
z-index: 0;
}
.trust-video-card:hover:not(.center) {
transform: translateY(-8px) scale(0.85);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
cursor: pointer;
}
/* Подсветка боковых карточек при наведении */
.trust-video-card.left:hover,
.trust-video-card.right:hover {
transform: translateY(-8px) scale(0.9);
box-shadow: 0 12px 40px rgba(56, 189, 248, 0.3);
border: 2px solid rgba(56, 189, 248, 0.5);
}
.trust-video-card.center:hover {
transform: translateZ(0) scale(1.05);
box-shadow: 0 16px 50px rgba(0, 0, 0, 0.2);
}
.trust-video-container {
position: relative;
width: 120px;
height: 180px;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
transition: all 0.3s ease;
background: #000;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
margin: 0 auto 1rem;
}
/* Центральное видео - крупнее */
.trust-video-card.center .trust-video-container {
width: 140px;
height: 200px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
/* Desktop: make the center card 10% narrower, keep inner sizes intact */
@media (min-width: 769px){
.trust-video-card.center{
width: 238px; /* +5% шире от 227px */
margin-left: -119px; /* половина ширины */
height: 385px; /* 350px +10% */
margin-top: calc(-385px / 2);
}
}
/* Боковые видео - меньше */
.trust-video-card.left .trust-video-container,
.trust-video-card.right .trust-video-container {
width: 100px;
height: 180px;
opacity: 0.8;
position: relative;
}
/* Индикатор кликабельности для боковых карточек */
.trust-video-card.left::after {
content: "👆";
position: absolute;
top: 10px;
left: 10px; /* Для левой карточки - слева */
font-size: 1.2rem;
opacity: 0.7;
transition: all 0.3s ease;
pointer-events: none;
}
.trust-video-card.right::after {
content: "👆";
position: absolute;
top: 10px;
right: 10px; /* Для правой карточки - справа */
font-size: 1.2rem;
opacity: 0.7;
transition: all 0.3s ease;
pointer-events: none;
}
.trust-video-card.left:hover::after,
.trust-video-card.right:hover::after {
opacity: 1;
transform: scale(1.2);
}
.trust-video {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
}
.trust-video-controls {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
opacity: 1; /* Всегда видимый для центральных видео */
}
.trust-video-play-btn {
width: 32px;
height: 32px;
background: rgba(56, 189, 248, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 0.9rem;
font-weight: bold;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
/* Center card: keep Play button centered over preview (use base flex centering) */
/* Центральные видео всегда показывают play button */
.trust-video-card.center .trust-video-controls {
opacity: 1;
background: rgba(0, 0, 0, 0.3);
}
/* Центральный play button более заметный */
.trust-video-card.center .trust-video-play-btn {
background: rgba(56, 189, 248, 0.95);
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
/* Индикатор "ВИДЕО" для центральных карточек */
.trust-video-card.center::before {
content: "ВИДЕО";
position: absolute;
top: 10px;
left: 10px;
background: rgba(56, 189, 248, 0.9);
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 0.7rem;
font-weight: 600;
z-index: 10;
letter-spacing: 0.5px;
transition: all 0.3s ease;
}
/* Reposition "ВИДЕО" label to the right and lower the preview on the center card */
.trust-video-card.center .trust-video-container{
margin-top: 24px; /* опустить превью немного вниз */
}
.trust-video-card.center::before{
left: 12px; /* у левого края */
right: auto;
top: 8px;
}
/* Hover эффект для индикатора "ВИДЕО" при наведении на карточку */
.trust-video-card.center:hover::before {
background: #0ea5e9;
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(56, 189, 248, 0.4);
}
/* Боковые видео показывают play button только при hover */
.trust-video-card.left .trust-video-controls,
.trust-video-card.right .trust-video-controls {
opacity: 0;
}
.trust-video-card.left:hover .trust-video-controls,
.trust-video-card.right:hover .trust-video-controls {
opacity: 1;
background: rgba(0, 0, 0, 0.4);
}
/* Hover эффект для центрального видео - пульсация play button */
.trust-video-card.center:hover .trust-video-play-btn {
background: #38bdf8;
transform: scale(1.2);
animation: pulse 1.5s infinite;
}
/* Активное состояние play button при наведении */
.trust-video-play-btn:hover {
background: #0ea5e9 !important;
transform: scale(1.1) !important;
box-shadow: 0 4px 16px rgba(56, 189, 248, 0.6) !important;
}
/* Активное состояние для центрального play button при наведении */
.trust-video-card.center .trust-video-play-btn:hover {
background: #0ea5e9 !important;
transform: scale(1.3) !important;
box-shadow: 0 6px 20px rgba(56, 189, 248, 0.8) !important;
}
/* Hover эффект для боковых видео - обычное увеличение */
.trust-video-card.left:hover .trust-video-play-btn,
.trust-video-card.right:hover .trust-video-play-btn {
background: #38bdf8;
transform: scale(1.1);
}
/* Анимация пульсации для центрального видео */
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(56, 189, 248, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(56, 189, 248, 0);
}
}
/* Модальное окно для видео */
.trust-video-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.trust-video-modal.active {
opacity: 1;
visibility: visible;
}
.trust-video-modal-content {
position: relative;
max-width: 90vw;
max-height: 90vh;
background: white;
border-radius: 12px;
overflow: hidden;
transform: scale(0.8);
transition: transform 0.3s ease;
z-index: 1001;
}
.trust-video-modal.active .trust-video-modal-content {
transform: scale(1);
}
.trust-video-modal video {
width: 100%;
height: auto;
max-height: 80vh;
object-fit: contain;
}
.trust-video-modal-close {
position: absolute;
top: 10px;
right: 10px;
width: 40px;
height: 40px;
background: rgba(0, 0, 0, 0.7);
color: white;
border: none;
border-radius: 50%;
font-size: 1.2rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 1001;
pointer-events: auto;
}
.trust-video-modal-close:hover {
background: rgba(0, 0, 0, 0.9);
transform: scale(1.1);
}
.trust-video-title {
font-family: 'Inter', 'Roboto', sans-serif;
font-size: 1rem;
font-weight: 600;
color: #374151;
text-align: center;
margin-bottom: 0.25rem;
}
.trust-video-subtitle {
font-family: 'Inter', 'Roboto', sans-serif;
font-size: 0.85rem;
color: #6b7280;
text-align: center;
margin-bottom: 0.5rem;
}
.trust-video-quote {
font-family: 'Inter', 'Roboto', sans-serif;
font-size: 0.9rem;
color: #38bdf8;
text-align: center;
font-weight: 500;
font-style: italic;
background: rgba(56, 189, 248, 0.1);
padding: 0.5rem;
border-radius: 8px;
border-left: 3px solid #38bdf8;
}
/* Навигация карусели */
.carousel-nav {
display: flex;
justify-content: center;
gap: 1rem;
position: absolute;
top: 20px; /* Позиционируем над карточками */
left: 50%;
transform: translateX(-50%); /* Центрируем по горизонтали */
z-index: 10; /* Поверх других элементов */
opacity: 0; /* Скрыты при загрузке */
visibility: hidden;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
/* Показать точки навигации после анимации */
.carousel-nav.visible {
opacity: 1;
visibility: visible;
}
.carousel-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: #d1d5db;
cursor: pointer;
transition: all 0.3s ease;
}
.carousel-dot.active {
background: #38bdf8;
transform: scale(1.2);
}
.carousel-dot:hover {
background: #6b7280;
}
/* Стрелки навигации */
.carousel-arrow {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
color: #374151;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
}
.carousel-arrow:hover {
background: white;
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
/* Контейнер для кнопок навигации над каруселью */
.carousel-navigation {
position: absolute;
top: clamp(55px, 10vw, 65px);/* чуть выше: меньший масштаб по высоте */
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
align-items: center;
gap: 320px; /* Расстояние между кнопками */
z-index: 1000;
width: 100%;
opacity: 0; /* Скрыты при загрузке */
visibility: hidden;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
/* Показать навигацию после анимации */
.carousel-navigation.visible {
opacity: 1;
visibility: visible;
}
.carousel-arrow.prev {
position: relative;
left: 0;
top: 0;
transform: none;
}
.carousel-arrow.next {
position: relative;
left: 0;
top: 0;
transform: none;
}
/* Адаптивность для очень узких экранов */
@media (max-width: 480px) {
.carousel-navigation {
gap: 240px; /* Уменьшенное расстояние для мобильных */
}
}
/* Автор */
.trust-author {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
max-width: 600px;
margin: 0 auto;
}
.trust-author-avatar {
position: relative;
text-align: center;
}
.trust-author-photo {
width: 144px;
height: 144px;
border-radius: 50%;
object-fit: cover;
border: 4px solid #38bdf8;
margin-bottom: 1rem;
box-shadow: 0 8px 24px rgba(56, 189, 248, 0.2);
}
.trust-author-content {
text-align: left;
flex: 1;
}
.trust-author-name {
font-family: 'Inter', 'Roboto', sans-serif;
font-size: 1.5rem;
font-weight: 700;
color: #d4af37;
margin-bottom: 0.5rem;
line-height: 1.3;
}
.trust-author-title {
font-family: 'Inter', 'Roboto', sans-serif;
font-size: 1.1rem;
color: #374151;
margin-bottom: 1rem;
line-height: 1.4;
font-weight: 500;
}
.trust-author-achievement {
font-family: 'Inter', 'Roboto', sans-serif;
font-size: 1rem;
color: #6b7280;
line-height: 1.6;
font-weight: 400;
margin-bottom: 1rem;
}
.trust-author-links {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: flex-end;
margin-top: 0.75rem;
}
.trust-author-link-item {
margin-bottom: 0.5rem;
}
.trust-author-link {
color: var(--accent-blue);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: all 0.3s ease;
display: block;
}
.trust-author-link:hover {
color: var(--accent-gold);
border-bottom-color: var(--accent-gold);
}
.trust-author-link-title {
font-size: 0.8rem;
font-weight: 500;
color: inherit;
line-height: 1.3;
}
/* Mobile responsiveness for trust section */
@media (max-width: 600px) {
.trust-section {
padding: 0px 0; /* на 30% меньше сверху/снизу */
}
.trust-container {
padding: 0;
}
.trust-main-title {
font-size: 2rem;
}
.trust-stats-line {
margin-bottom: 2rem;
}
.trust-stat-highlight {
font-size: 1.1rem;
}
.trust-separator {
font-size: 1.2rem;
margin: 0 0.5rem;
}
.trust-author-card {
margin-bottom: 2rem;
}
.trust-author-main {
flex-direction: column;
text-align: center;
gap: 1rem;
}
.trust-author-header {
margin-bottom: 1rem;
}
.trust-author-role {
font-size: 1rem;
}
.trust-author-photo {
width: 72px;
height: 72px;
}
.trust-author-links {
gap: 0.75rem;
align-items: center;
}
.trust-author-link-item {
margin-bottom: 0.4rem;
}
.trust-author-link-title {
font-size: 0.75rem;
}
.trust-users-text {
font-size: clamp(.658rem, 3.04vw, 1.46rem) !important;
white-space: nowrap;
line-height: 1.3;
letter-spacing: 0;
}
/* Normalize users-global stats typography to match main trust stats line */
.trust-users-global .trust-stats-line.trust-users-text{
font-size: inherit !important;
line-height: inherit !important;
}
.trust-users-global .trust-stats-line.trust-users-text .trust-stat-highlight{
font-weight: 400 !important;
}
.trust-reviews {
padding: 0;
margin-bottom: 1.5rem;
}
.trust-video-carousel {
height: 400px;
margin-top: 24px;
}
.carousel-container {
height: 100%;
}
.trust-video-card {
width: 90%;
max-width: 280px;
height: 320px;
margin-left: -140px; /* половина ширины */
margin-top: -140px; /* половина высоты */
}
.trust-video-card.center {
transform: translateZ(0) scale(1);
}
.trust-video-card.left {
transform: translateX(-150px) translateZ(-80px) rotateY(30deg) scale(0.7);
}
.trust-video-card.right {
transform: translateX(150px) translateZ(-80px) rotateY(-30deg) scale(0.7);
}
.trust-video-container {
width: 80px;
height: 120px;
}
.trust-video-card.center .trust-video-container {
width: 100px;
height: 140px;
}
.carousel-arrow {
width: 35px;
height: 35px;
font-size: 1rem;
}
/* Стили для кнопок карусели уже определены выше в @media (max-width: 600px) */
.trust-author {
flex-direction: column;
text-align: center;
padding: 2rem 1.5rem;
gap: 1.5rem;
}
.trust-author-content {
text-align: center;
}
.trust-author-name {
font-size: 1.3rem;
}
.trust-author-title {
font-size: 1rem;
}
.trust-author-photo {
width: 120px;
height: 120px;
}
.trust-author-links {
justify-content: center;
}
.trust-video-container {
width: 60px;
height: 100px;
}
.trust-video-play-btn {
width: 30px;
height: 30px;
font-size: 0.8rem;
}
.trust-video-modal-content {
max-width: 95vw;
max-height: 95vh;
}
.trust-video-modal video {
max-height: 70vh;
}
}
/* Narrow screens: make center card 10% narrower and 10% taller; tighten side offsets */
@media (max-width: 600px){
/* Fix carousel card size within this viewport */
.trust-video-card{
width: 202px; /* −20% от 252px */
height: 317px;
margin-left: -101px; /* center by half width */
margin-top: calc(-317px / 2);
}
.trust-video-card.center{ /* keep explicit for clarity, same size as others */
width: 202px; /* −20% */
height: 350px; /* ещё +5% высоты; верхняя кромка сохраняется (margin-top не меняем) */
}
/* Scale side previews by 30% vertically (without cropping) */
.trust-video-card.left .trust-video-container,
.trust-video-card.right .trust-video-container{
height: 140px; /* оставить базовую высоту контейнера */
}
.trust-video-card.left .trust-video,
.trust-video-card.right .trust-video{
height: 140px; /* 30% короче */
margin-top: 0px; /* центрируем в окне 100px: (100-70)/2 */
transform: none; /* без искажений transform */
}
.trust-video-card.left{
transform: translateX(-158px) translateZ(-100px) rotateY(45deg) scale(0.8);
}
.trust-video-card.right{
transform: translateX(158px) translateZ(-100px) rotateY(-45deg) scale(0.8);
}
/* Align click zones to side cards */
.carousel-left-zone{
width: 114px; /* 202 * 0.8 * cos(45°) ≈ 114 */
height: 254px; /* 317 * 0.8 ≈ 254 */
margin-left: -215px; /* -158 - (114/2) */
margin-top: -127px; /* center vertically */
}
.carousel-right-zone{
width: 114px;
height: 254px;
margin-left: 101px; /* 158 - (114/2) */
margin-top: -127px; /* center vertically */
}
/* Position navigation arrows exactly at side card centers */
.carousel-navigation{
gap: 0 !important;
}
.carousel-arrow{
position: absolute !important;
}
.carousel-arrow.prev{
left: 50%;
top: 0;
transform: translateX(calc(-158px - 17.5px));
}
.carousel-arrow.next{
left: 50%;
top: 0;
transform: translateX(calc(158px - 17.5px));
}
}
/* Extra-narrow screens: scale down carousel by ~20% (≤360px) */
@media (max-width: 360px){
/* cards */
.trust-video-card{
width: 162px; /* 202 * 0.8 */
height: 267px; /* +5% from 254px as requested earlier */
margin-left: -81px; /* center by half width */
margin-top: calc(-267px / 2);
}
/* reduce vertical gap between controls and carousel by 50% */
.trust-video-carousel{
margin-top: 0px; /* было 24px на ≤600px */
}
.trust-video-card.center{
width: 162px;
height: 294px; /* +5% from 280px */
margin-left: -81px;
margin-top: calc(-294px / 2);
}
.trust-video-card.left{
transform: translateX(-127px) translateZ(-100px) rotateY(45deg) scale(0.8); /* precise edge align */
}
.trust-video-card.right{
transform: translateX(127px) translateZ(-100px) rotateY(-45deg) scale(0.8);
}
/* video containers */
.trust-video-card.center .trust-video-container{
width: 80px; /* 100 * 0.8 */
height: 112px; /* 140 * 0.8 */
}
.trust-video-card.left .trust-video-container,
.trust-video-card.right .trust-video-container{
height: 112px; /* 140 * 0.8 */
}
.trust-video-card.left .trust-video,
.trust-video-card.right .trust-video{
height: 112px;
margin-top: 0;
}
/* click zones */
.carousel-left-zone{
width: 92px; /* 162 * 0.8 * cos45 ≈ 92 */
height: 214px; /* 267 * 0.8 ≈ 214 */
margin-left: -173px; /* -127 - (92/2) */
margin-top: -107px; /* -height/2 */
}
.carousel-right-zone{
width: 92px;
height: 214px;
margin-left: 81px; /* 127 - 46 */
margin-top: -107px;
}
/* navigation arrows relative to centers of side cards */
.carousel-arrow.prev{
left: 50%;
top: 0;
transform: translateX(calc(-127px - 17.5px));
}
.carousel-arrow.next{
left: 50%;
top: 0;
transform: translateX(calc(127px - 17.5px));
}
/* play button a bit smaller on very narrow screens */
.trust-video-play-btn{
width: 24px;
height: 24px;
font-size: .72rem;
}
/* "ВИДЕО" badge smaller */
.trust-video-card.center::before{
font-size: .58rem;
padding: 2px 5px;
}
/* Reduce blue quote text size at bottom of cards by 30% */
.trust-video-quote{
font-size: .63rem; /* 0.9rem * 0.7 */
}
/* Trust author link titles: −10% font size */
.trust-author-link-title{
font-size: 0.675rem; /* 0.75rem * 0.9 */
}
/* (removed viewport overrides for CTA promo card to rely on container scaling) */
}
/* Tablets: align click zones to side cards (±180px) */
@media (min-width: 600px) and (max-width: 768px){
.carousel-left-zone{
width: 158px; /* 280 * 0.8 * cos(45°) */
height: 280px; /* 350 * 0.8 */
margin-left: -279px; /* -200 - 79 */
margin-top: -165px; /* align top with visually scaled side card */
}
.carousel-right-zone{
width: 158px;
height: 280px;
margin-left: 121px; /* 200 - 79 */
margin-top: -165px; /* align top with visually scaled side card */
}
}
/* Tablets: center card 10% narrower than base 280px (252px) */
@media (min-width: 600px) and (max-width: 768px){
.trust-video-card.center{
width: 238px; /* как на ≥769px (280 −10%) */
height: 385px; /* как на ≥769px (350 +10%) */
margin-left: -119px; /* половина ширины */
margin-top: calc(-385px / 2); /* сохранить верхнюю кромку */
}
}
/* PAS Formula styles */
.pas-formula {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin: 2rem 0;
padding: 2rem;
background: rgba(56, 189, 248, 0.05);
border-radius: 12px;
border: 1px solid rgba(56, 189, 248, 0.2);
flex-wrap: wrap;
}
.pas-step {
text-align: center;
padding: 1rem;
background: rgba(11, 18, 32, 0.8);
border-radius: 8px;
border: 1px solid rgba(56, 189, 248, 0.3);
}
.pas-problem {
color: #ef4444;
font-weight: 600;
font-size: 1.1rem;
}
.pas-solution {
color: var(--accent-blue);
font-weight: 600;
font-size: 1.1rem;
}
.pas-action {
color: var(--accent-gold);
font-weight: 700;
font-size: 1.1rem;
}
.pas-arrow {
font-size: 1.5rem;
color: var(--accent-gold);
font-weight: 700;
}
/* Navigation styles removed: no