tags were inserted to make orphan text AI-editable. They live inside badge/tag/card-stat divs that previously held bare text, so the default browser
margin (1em) would inflate their height. Zero it. */
p.ai-wrap {
margin: 0 !important;
}
@media (max-width: 900px) {
section h1 {
font-size: 36px !important;
}
section h2 {
font-size: 28px !important;
}
}
@media (max-width: 600px) {
section h1 {
font-size: 30px !important;
}
section h2 {
font-size: 24px !important;
}
section h3 {
font-size: 18px !important;
}
section p,
section li {
font-size: 15px !important;
}
}
/* Heading font */
section h1, section h2, section h3, section h4,
header h1, header h2, header h3, header h4,
footer h3 {
font-family: var(--font-heading) !important;
}
/* Standardized section spacing */
section {
padding-top: 80px !important;
padding-bottom: 80px !important;
}
header, nav { padding-top: 0 !important; padding-bottom: 0 !important; }
footer {
padding-top: 40px !important;
padding-bottom: 24px !important;
}
section.toc {
padding-top: 12px !important;
padding-bottom: 12px !important;
}
.site-disclaimer {
background: rgba(0,0,0,0.3);
border-top: 1px solid var(--border);
padding: 16px 0;
text-align: center;
}
.site-disclaimer p {
font-size: 14px !important;
font-style: italic;
line-height: 1.5 !important;
color: var(--textMuted);
max-width: 800px;
margin: 0 auto;
}
.toc .swiper-wrapper {
}
@media (max-width: 768px) {
body > section,
body > div > section,
body > section {
padding-top: 50px !important;
padding-bottom: 50px !important;
}
}
/* Secondary pages */
.sec-page { padding: 80px 0; min-height: 60vh; }
.page-content { max-width: var(--maxWidthContainer); }
.page-content h1 { font-size: 2rem; font-weight: 700; margin-bottom: 24px; }
.page-content h2 { font-size: 1.3rem; font-weight: 600; margin: 36px 0 12px; color: var(--textColor1); }
.page-content p { margin-bottom: 16px; color: var(--textSecondary); line-height: 1.8; font-size: 0.95rem; }
.page-content a { color: var(--secondStyleColor); text-decoration: underline; }
.page-content a:hover { opacity: 0.8; }
/* Overflow protection — word wrap only, no clipping */
section p,
section li,
section summary {
overflow-wrap: break-word;
}
/* ===== HEADER v7 — Split header + marquee topbar + sliding indicator ===== */
.hd7 {
position: sticky;
top: 0;
z-index: 100;
}
/* Top marquee bar */
.hd7__topbar {
background: color-mix(in srgb, var(--secondStyleColor) 10%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--secondStyleColor) 15%, transparent);
overflow: hidden;
height: 32px;
display: flex;
align-items: center;
transition: height 0.3s ease, opacity 0.3s ease;
}
.hd7.scrolled .hd7__topbar {
height: 0;
opacity: 0;
border-bottom: none;
}
.hd7__marquee {
width: 100%;
overflow: hidden;
position: relative;
}
.hd7__marquee-track {
display: inline-flex;
align-items: center;
gap: 24px;
white-space: nowrap;
animation: hd7-marquee 20s linear infinite;
}
.hd7__marquee-item {
font-size: 12px;
font-weight: 600;
color: color-mix(in srgb, var(--textColor1) 80%, transparent);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.hd7__marquee-sep {
color: var(--secondStyleColor);
font-size: 10px;
}
@keyframes hd7-marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* Main header bar */
.hd7__main {
position: relative;
background: color-mix(in srgb, var(--bodyBG) 88%, transparent);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.hd7__wrap {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
gap: 24px;
}
/* Animated gradient border */
.hd7__border {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(
90deg,
var(--secondStyleColor),
var(--accent2),
var(--secondStyleColor),
var(--accent2)
);
background-size: 300% 100%;
animation: hd7-border-shift 4s linear infinite;
}
@keyframes hd7-border-shift {
0% { background-position: 0% 0; }
100% { background-position: 300% 0; }
}
/* Logo */
.hd7__logo {
font-size: 22px;
font-weight: 800;
color: var(--textColor1);
text-decoration: none;
letter-spacing: -0.02em;
flex-shrink: 0;
z-index: 110;
}
/* Desktop nav with indicator */
.hd7__nav {
position: relative;
display: flex;
align-items: center;
}
.hd7__nav ul {
display: flex;
align-items: center;
gap: 4px;
list-style: none;
margin: 0;
padding: 0;
}
.hd7__nav .hd7__link {
display: block;
padding: 8px 18px;
font-size: 13px;
font-weight: 600;
color: color-mix(in srgb, var(--textColor1) 65%, transparent);
text-decoration: none;
position: relative;
transition: color 0.2s ease;
}
.hd7__nav .hd7__link:hover {
color: var(--textColor1);
}
/* Sliding indicator line */
.hd7__indicator {
position: absolute;
bottom: -2px;
left: 0;
height: 2px;
background: var(--secondStyleColor);
border-radius: 2px;
transition: left 0.3s cubic-bezier(0.23, 1, 0.32, 1),
width 0.3s cubic-bezier(0.23, 1, 0.32, 1);
width: 0;
pointer-events: none;
}
/* CTA button — outline + ripple */
.hd7__cta {
position: relative;
padding: 10px 22px;
border-radius: var(--borderRadius);
border: 1.5px solid var(--secondStyleColor);
background: transparent;
color: var(--secondStyleColor);
font-size: 13px;
font-weight: 700;
text-decoration: none;
flex-shrink: 0;
overflow: hidden;
transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.hd7__cta-text {
position: relative;
z-index: 2;
}
.hd7__cta-ripple {
position: absolute;
inset: 0;
background: var(--secondStyleColor);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
z-index: 1;
}
.hd7__cta:hover {
color: var(--bodyBG);
box-shadow: 0 4px 16px color-mix(in srgb, var(--secondStyleColor) 25%, transparent);
}
.hd7__cta:hover .hd7__cta-ripple {
transform: scaleX(1);
}
/* Burger — hidden on desktop */
.hd7__burger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 38px;
height: 38px;
padding: 9px;
background: none;
border: 1px solid color-mix(in srgb, var(--secondStyleColor) 25%, transparent);
border-radius: 10px;
cursor: pointer;
z-index: 110;
transition: border-color 0.25s ease;
}
.hd7__burger:hover {
border-color: color-mix(in srgb, var(--secondStyleColor) 50%, transparent);
}
.hd7__burger-line {
display: block;
width: 100%;
height: 2px;
border-radius: 2px;
background: var(--textColor1);
transition: transform 0.3s ease, opacity 0.3s ease;
transform-origin: center;
}
.hd7__burger.active .hd7__burger-line:first-child {
transform: translateY(7px) rotate(45deg);
}
.hd7__burger.active .hd7__burger-line:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.hd7__burger.active .hd7__burger-line:last-child {
transform: translateY(-7px) rotate(-45deg);
}
/* Mobile overlay — clip-path circle */
.hd7__mobile {
position: fixed;
inset: 0;
width: 100vw;
height: 100dvh;
background: var(--bodyBG);
z-index: 105;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 36px;
clip-path: circle(0% at calc(100% - 40px) 60px);
transition: clip-path 0.5s cubic-bezier(0.23, 1, 0.32, 1);
pointer-events: none;
}
.hd7__mobile.active {
clip-path: circle(150% at calc(100% - 40px) 60px);
pointer-events: auto;
}
.hd7__mobile ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.hd7__mobile .hd7__link {
font-size: 22px;
font-weight: 600;
color: var(--textColor1);
text-decoration: none;
transition: color 0.2s ease;
}
.hd7__mobile .hd7__link:hover {
color: var(--secondStyleColor);
}
.hd7__mobile-cta {
padding: 14px 32px;
border-radius: var(--borderRadius);
border: 1.5px solid var(--secondStyleColor);
background: var(--secondStyleColor);
color: var(--bodyBG);
font-size: 15px;
font-weight: 700;
text-decoration: none;
}
.stopScroll {
overflow: hidden;
}
/* Responsive */
@media (max-width: 800px) {
.hd7__nav {
display: none;
}
.hd7__cta {
display: none;
}
.hd7__burger {
display: flex;
}
.hd7__topbar {
height: 28px;
}
.hd7__marquee-item {
font-size: 11px;
}
}
@media (prefers-reduced-motion: reduce) {
.hd7__topbar,
.hd7__mobile,
.hd7__burger-line,
.hd7__burger,
.hd7__cta,
.hd7__cta-ripple,
.hd7__nav .hd7__link,
.hd7__indicator {
transition: none;
}
.hd7__marquee-track {
animation: none;
}
.hd7__border {
animation: none;
}
}
:root {
--c-red: #ef4540;
--c-yellow: #ffb300;
--c-green: #37b24d;
--c-blue: #2fa4db;
--c-indigo: #2f1cff;
--c-purple: #9b00ff;
}
.heroSection {
overflow: hidden;
position: relative;
min-height: 700px;
display: flex;
width: 100%;
align-items: center;
color: var(--textColor1);
}
.heroSectionBG {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 20%;
filter: blur(15px);
opacity: 0.2;
}
.hero-panel {
position: relative;
z-index: 1;
margin: 0 auto;
display: flex;
width: 100%;
justify-content: space-between;
}
.hero10-content {
max-width: 680px;
position: relative;
z-index: 1;
}
.heroSection h1 {
margin: 0 0 18px;
font-weight: 900;
letter-spacing: -0.03em;
line-height: 1.2;
font-size: clamp(38px, 4.8vw, 66px);
color: var(--textColor1);
text-transform: uppercase;
}
.hero10-sub {
margin: 0 0 28px;
font-size: 16px;
font-weight: 600;
color: var(--textColor1);
}
.hero10-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 44px;
padding: 0 46px;
border-radius: var(--borderRadius);
border: 0;
background: var(--secondStyleColor);
color: var(--textColor2);
font-weight: 800;
cursor: pointer;
text-decoration: none;
font-size: 14px;
}
/* Блоки справа снизу (ступеньки) */
.blocks {
position: relative;
right: 0;
width: 560px;
height: 360px;
pointer-events: none;
flex-shrink: 0;
}
.b {
position: absolute;
width: 130px;
height: 130px;
display: grid;
place-items: center;
}
.b.red {
background: var(--c-red);
left: 80px;
bottom: 0px;
}
.b.yellow {
background: var(--c-yellow);
left: 210px;
bottom: 130px;
}
.b.green {
background: var(--c-green);
left: 340px;
bottom: 0px;
}
.b.indigo {
background: var(--c-indigo);
left: 470px;
bottom: 130px;
}
.b.blue {
background: var(--c-blue);
left: 470px;
bottom: 0px;
}
.b.purple {
background: var(--c-purple);
left: 600px;
bottom: 260px;
}
.diamond {
width: 62px;
height: 62px;
background: #fff;
transform: rotate(45deg);
}
.circle {
width: 54px;
height: 54px;
background: #fff;
border-radius: 999px;
}
.square {
width: 44px;
height: 44px;
background: #fff;
}
.chevrons {
width: 70px;
height: 42px;
position: relative;
}
.chevrons::before,
.chevrons::after {
content: "";
position: absolute;
top: 50%;
width: 0;
height: 0;
border-top: 21px solid transparent;
border-bottom: 21px solid transparent;
border-left: 28px solid #fff;
transform: translateY(-50%);
}
.chevrons::before {
left: 6px;
}
.chevrons::after {
left: 30px;
}
.tri {
width: 0;
height: 0;
border-left: 34px solid transparent;
border-right: 34px solid transparent;
border-top: 56px solid #fff;
transform: rotate(-12deg);
}
.spark {
width: 70px;
height: 70px;
background: #fff;
clip-path: polygon(
50% 0%,
60% 32%,
100% 50%,
60% 68%,
50% 100%,
40% 68%,
0% 50%,
40% 32%
);
}
/* адаптив */
@media (max-width: 1100px) {
.hero-panel {
flex-direction: column;
justify-content: center;
align-items: center;
}
.blocks {
display: none;
}
.heroSection {
max-height: 650px;
}
}
:root {
--scrollbarBg: rgba(255, 255, 255, 0.1);
--itemBgColor: transparent;
}
.swiper {
padding-bottom: 10px !important;
}
.toc .swiper-slide {
width: fit-content;
}
.toc h2 {
margin: 0 !important;
text-align: center;
color: var(--textColor1);
}
.toc {
background-color: transparent;
}
.toc .swiper-wrapper {
padding-top: 36px;
padding-bottom: 24px;
position: relative;
}
.toc .swiper-wrapper::before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent,
color-mix(in srgb, var(--secondStyleColor) 30%, transparent) 10%,
color-mix(in srgb, var(--secondStyleColor) 30%, transparent) 90%,
transparent
);
transform: translateY(-50%);
pointer-events: none;
}
.toc a {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
text-decoration: none;
font-weight: 600;
font-size: 16px;
line-height: 1.4;
white-space: nowrap;
color: color-mix(in srgb, var(--textColor1) 65%, transparent);
padding: 28px 24px 10px;
border-radius: 0;
background-color: var(--itemBgColor);
border: none;
transition: color 0.3s ease;
-webkit-transition: color 0.3s ease;
-moz-transition: color 0.3s ease;
-ms-transition: color 0.3s ease;
-o-transition: color 0.3s ease;
}
.toc a::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%) scale(1);
width: 12px;
height: 12px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
background: color-mix(in srgb, var(--secondStyleColor) 60%, transparent);
border: 2px solid var(--secondStyleColor);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--secondStyleColor) 10%, transparent);
transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
-webkit-transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
-moz-transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
-ms-transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
-o-transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.toc a::after {
content: "";
position: absolute;
top: 18px;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 8px;
background: color-mix(in srgb, var(--secondStyleColor) 40%, transparent);
transition: background-color 0.3s ease;
-webkit-transition: background-color 0.3s ease;
-moz-transition: background-color 0.3s ease;
-ms-transition: background-color 0.3s ease;
-o-transition: background-color 0.3s ease;
}
.toc a:hover,
.toc a:focus {
color: var(--textColor1);
}
.toc a:hover::before,
.toc a:focus::before {
transform: translateX(-50%) scale(1.35);
background: var(--secondStyleColor);
box-shadow: 0 0 0 6px color-mix(in srgb, var(--secondStyleColor) 20%, transparent),
0 0 16px color-mix(in srgb, var(--secondStyleColor) 30%, transparent);
}
.toc a:hover::after,
.toc a:focus::after {
background: var(--secondStyleColor);
}
.toc-swiper .swiper-scrollbar {
background: var(--scrollbarBg);
height: 4px;
border-radius: 2px;
}
.toc-swiper .swiper-scrollbar-drag {
background: var(--secondStyleColor);
border-radius: 2px;
width: 20%;
}
.toc.wrapper {
margin: 0 auto;
padding-left: 0 !important;
padding-right: 0 !important;
}
.toc-swiper {
max-width: calc(var(--maxWidthContainer) - 40px);
margin: 0 auto;
}
.swiper-horizontal > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
left: 0 !important;
right: 0 !important;
width: 100% !important;
}
@media screen and (max-width: 750px) {
.toc.wrapper {
margin-left: auto;
}
.swiper-horizontal > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
width: 90% !important;
margin: 0 auto;
}
}
@media (prefers-reduced-motion: reduce) {
.toc a,
.toc a::before,
.toc a::after {
transition: none;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
}
.toc a:hover::before {
transform: translateX(-50%) scale(1);
}
}
/* ===== REVIEWS v15 — Featured spotlight + stacked side cards ===== */
.rv15 {
position: relative;
padding: clamp(70px, 8vw, 110px) 0;
color: var(--textColor1);
overflow: hidden;
}
.rv15__dots {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
color: color-mix(in srgb, var(--secondStyleColor) 6%, transparent);
pointer-events: none;
z-index: 0;
}
.rv15 .container {
position: relative;
z-index: 1;
}
/* Head */
.rv15__head {
text-align: center;
max-width: 540px;
margin: 0 auto 50px;
}
.rv15__kicker {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--secondStyleColor);
margin-bottom: 12px;
}
.rv15__head h2 {
margin: 0 0 12px;
font-size: clamp(26px, 3.5vw, 38px);
font-weight: 700;
letter-spacing: -0.02em;
}
.rv15__head p {
margin: 0;
font-size: 15px;
color: color-mix(in srgb, var(--textColor1) 65%, transparent);
}
/* Layout */
.rv15__layout {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: clamp(20px, 3vw, 36px);
align-items: start;
}
/* Featured */
.rv15__featured {
display: flex;
flex-direction: column;
gap: 20px;
padding: clamp(28px, 4vw, 44px);
border-radius: var(--borderRadius);
border: 1px solid
color-mix(in srgb, var(--secondStyleColor) 14%, transparent);
background: linear-gradient(
160deg,
rgba(255, 255, 255, 0.04),
rgba(255, 255, 255, 0.01)
);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: border-color 0.3s ease;
}
.rv15__featured:hover {
border-color: color-mix(in srgb, var(--secondStyleColor) 35%, transparent);
}
.rv15__quote-icon {
width: 48px;
height: 48px;
border-radius: 50%;
background: color-mix(in srgb, var(--secondStyleColor) 12%, transparent);
display: flex;
align-items: center;
justify-content: center;
}
.rv15__quote-icon i {
font-size: 18px;
color: var(--secondStyleColor);
}
.rv15__quote {
margin: 0;
font-size: clamp(17px, 2vw, 20px);
font-weight: 500;
line-height: 1.65;
color: color-mix(in srgb, var(--textColor1) 88%, transparent);
}
.rv15__stars {
display: flex;
gap: 3px;
}
.rv15__stars i {
font-size: 15px;
color: var(--secondStyleColor);
}
.rv15__stars--sm i {
font-size: 12px;
}
.rv15__author {
display: flex;
align-items: center;
gap: 12px;
}
.rv15__avatar {
width: 42px;
height: 42px;
border-radius: 50%;
overflow: hidden;
border: 2px solid
color-mix(in srgb, var(--secondStyleColor) 25%, transparent);
flex-shrink: 0;
}
.rv15__avatar--lg {
width: 54px;
height: 54px;
}
.rv15__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.rv15__author strong {
display: block;
font-size: 14px;
font-weight: 600;
}
.rv15__author span {
font-size: 12px;
color: color-mix(in srgb, var(--textColor1) 50%, transparent);
}
/* Side cards */
.rv15__stack {
display: flex;
flex-direction: column;
gap: clamp(12px, 2vw, 16px);
}
.rv15__card {
display: flex;
flex-direction: column;
gap: 12px;
padding: clamp(18px, 2.5vw, 24px);
border-radius: var(--borderRadius);
border: 1px solid
color-mix(in srgb, var(--secondStyleColor) 10%, transparent);
background: rgba(255, 255, 255, 0.02);
transition:
transform 0.25s ease,
border-color 0.25s ease;
}
.rv15__card:hover {
transform: translateY(-3px);
border-color: color-mix(in srgb, var(--secondStyleColor) 30%, transparent);
}
.rv15__card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.rv15__card p {
margin: 0;
font-size: 14px;
line-height: 1.65;
color: color-mix(in srgb, var(--textColor1) 70%, transparent);
}
/* Responsive */
@media (max-width: 900px) {
.rv15__layout {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
.rv15 {
padding: 50px 0;
}
.rv15__head {
margin-bottom: 36px;
}
.rv15__head h2 {
font-size: 24px;
}
.rv15__featured {
padding: 24px;
}
.rv15__quote {
font-size: 16px;
}
.rv15__card-top {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
}
@media (prefers-reduced-motion: reduce) {
.rv15__featured,
.rv15__card {
transition: none;
}
}
#top { padding: 80px 0; }
.tp4-head { text-align: center; margin-bottom: 50px; }
.tp4-head h2 { margin-bottom: 12px; }
.tp4-head p { color: var(--textSecondary); max-width: 600px; margin: 0 auto; }
.tp4-podium { display: flex; flex-direction: column; gap: 12px; }
.tp4-podium .top-card {
display: flex; align-items: center; gap: 20px;
background: var(--cardBG); border-radius: var(--borderRadius); padding: 18px 24px;
border: 1px solid var(--borderSubtle); transition: transform 0.3s;
}
.tp4-podium .top-card:hover { transform: translateX(6px); }
.tp4-podium .top-card--gold { border-left: 4px solid #FFD700; background: linear-gradient(90deg, rgba(255,215,0,0.06), var(--cardBG) 40%); }
.tp4-podium .top-card--silver { border-left: 4px solid #C0C0C0; background: linear-gradient(90deg, rgba(192,192,192,0.06), var(--cardBG) 40%); }
.tp4-podium .top-card--bronze { border-left: 4px solid #CD7F32; background: linear-gradient(90deg, rgba(205,127,50,0.06), var(--cardBG) 40%); }
.tp4-podium .top-card__rank {
flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
background: var(--borderSubtle); color: var(--textColor1);
display: flex; align-items: center; justify-content: center;
font-size: 18px; font-weight: 800;
}
.tp4-podium .top-card--gold .top-card__rank { background: #FFD700; color: #1a1a1a; }
.tp4-podium .top-card--silver .top-card__rank { background: #C0C0C0; color: #1a1a1a; }
.tp4-podium .top-card--bronze .top-card__rank { background: #CD7F32; color: #fff; }
.tp4-podium .top-card__logo {
flex-shrink: 0; width: 110px; height: 52px; border-radius: 8px;
display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.tp4-podium .top-card__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tp4-podium .top-card__logo svg { max-width: 100%; max-height: 100%; }
.tp4-podium .top-card__body { flex: 1; min-width: 0; }
.tp4-podium .top-card__body h3 { margin-bottom: 2px; font-size: 17px; }
.tp4-podium .top-card__body p { color: var(--textSecondary); font-size: 14px; }
.tp4-podium .top-card__right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.tp4-podium .top-card__rating {
padding: 6px 14px; border-radius: 8px;
background: rgba(var(--accent-rgb), 0.12); color: var(--accentColor);
font-weight: 700; font-size: 15px;
}
.tp4-podium .top-card__badge {
padding: 4px 10px; border-radius: 20px; font-size: 10px; font-weight: 700;
background: var(--accentColor); color: var(--textColor2); text-transform: uppercase;
}
.tp4-podium .top-card__badge:empty { display: none; }
@media (max-width: 768px) {
.tp4-podium .top-card { flex-wrap: wrap; gap: 12px; padding: 14px 16px; }
.tp4-podium .top-card__right { width: 100%; justify-content: flex-start; }
}
/* ===== HOW v10 — Zigzag serpentine layout ===== */
.hw10__sec {
padding: clamp(60px, 7vw, 100px) 0;
color: var(--textColor1);
overflow: hidden;
}
/* Head */
.hw10__head {
text-align: center;
max-width: 660px;
margin: 0 auto 60px;
}
.hw10__head h2 {
margin: 0 0 14px;
font-size: clamp(28px, 4vw, 42px);
font-weight: 700;
letter-spacing: -0.02em;
}
.hw10__head p {
margin: 0;
line-height: 1.65;
color: color-mix(in srgb, var(--textColor1) 70%, transparent);
}
/* Track — holds SVG + rows */
.hw10__track {
position: relative;
max-width: 900px;
margin: 0 auto;
}
/* Central SVG serpentine */
.hw10__svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
.hw10__path {
animation: hw10Dash 25s linear infinite;
}
@keyframes hw10Dash {
to {
stroke-dashoffset: -360;
}
}
/* Row — alternating sides */
.hw10__row {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 24px;
margin-bottom: 50px;
}
.hw10__row:last-child {
margin-bottom: 0;
}
.hw10__row--left {
justify-content: flex-start;
padding-right: 52%;
}
.hw10__row--right {
justify-content: flex-end;
padding-left: 52%;
}
/* Dot on the path */
.hw10__dot {
flex-shrink: 0;
width: 14px;
height: 14px;
border-radius: 999px;
background: var(--secondStyleColor);
box-shadow:
0 0 0 4px color-mix(in srgb, var(--secondStyleColor) 25%, transparent),
0 0 18px color-mix(in srgb, var(--secondStyleColor) 40%, transparent);
}
/* Card — glassmorphism */
.hw10__card {
position: relative;
flex: 1;
padding: 28px 24px 24px;
border-radius: var(--borderRadius);
border: 1px solid
color-mix(in srgb, var(--secondStyleColor) 25%, transparent);
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.07),
rgba(255, 255, 255, 0.02)
);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
overflow: hidden;
transition:
transform 0.25s ease,
border-color 0.25s ease,
box-shadow 0.25s ease;
}
.hw10__card:hover {
transform: translateY(-4px);
border-color: color-mix(in srgb, var(--secondStyleColor) 55%, transparent);
box-shadow: 0 22px 44px rgba(0, 0, 0, 0.35);
}
/* Watermark number */
.hw10__watermark {
position: absolute;
top: -18px;
right: -6px;
font-size: 120px;
font-weight: 800;
line-height: 1;
color: var(--secondStyleColor);
opacity: 0.06;
pointer-events: none;
user-select: none;
}
/* Badge */
.hw10__badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 12px;
background: var(--secondStyleColor);
color: var(--bodyBG);
font-size: 14px;
font-weight: 700;
margin-bottom: 14px;
box-shadow: 0 8px 20px
color-mix(in srgb, var(--secondStyleColor) 35%, transparent);
}
.hw10__h3 {
margin: 0 0 8px;
font-size: 18px;
font-weight: 600;
}
.hw10__p {
margin: 0;
font-size: 14px;
line-height: 1.65;
color: color-mix(in srgb, var(--textColor1) 75%, transparent);
}
/* ---- Responsive ---- */
/* Tablets — zigzag сужается */
@media (max-width: 950px) {
.hw10__track {
max-width: 700px;
}
.hw10__row--left {
padding-right: 46%;
}
.hw10__row--right {
padding-left: 46%;
}
.hw10__row {
margin-bottom: 40px;
gap: 18px;
}
.hw10__card {
padding: 24px 20px 20px;
}
.hw10__watermark {
font-size: 90px;
top: -12px;
}
.hw10__head {
margin-bottom: 45px;
}
}
/* Small tablets — zigzag ещё уже */
@media (max-width: 800px) {
.hw10__row--left {
padding-right: 40%;
}
.hw10__row--right {
padding-left: 40%;
}
.hw10__h3 {
font-size: 16px;
}
.hw10__p {
font-size: 13px;
}
.hw10__badge {
width: 34px;
height: 34px;
font-size: 13px;
margin-bottom: 10px;
}
}
/* Mobile — одна колонка, SVG и точки скрыты */
@media (max-width: 600px) {
.hw10__sec {
padding: 50px 0;
}
.hw10__svg {
display: none;
}
.hw10__dot {
display: none;
}
.hw10__row--left,
.hw10__row--right {
padding: 0;
justify-content: stretch;
}
.hw10__row {
margin-bottom: 20px;
gap: 0;
}
.hw10__card {
width: 100%;
padding: 22px 18px 18px;
}
.hw10__head {
margin-bottom: 32px;
}
.hw10__head h2 {
font-size: 24px;
}
.hw10__head p {
font-size: 14px;
}
.hw10__watermark {
font-size: 70px;
top: -10px;
right: -4px;
}
.hw10__h3 {
font-size: 16px;
}
.hw10__p {
font-size: 13px;
}
.hw10__badge {
width: 32px;
height: 32px;
font-size: 12px;
border-radius: 10px;
margin-bottom: 10px;
}
}
@media (prefers-reduced-motion: reduce) {
.hw10__path {
animation: none;
}
.hw10__card {
transition: none;
}
}
/* ===== FEATURES v18 — Isometric cards with SVG diamond-grid bg ===== */
.ft18 {
position: relative;
padding: clamp(70px, 8vw, 110px) 0;
color: var(--textColor1);
overflow: hidden;
}
.ft18__grid-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
color: color-mix(in srgb, var(--secondStyleColor) 6%, transparent);
z-index: 0;
pointer-events: none;
}
.ft18 .container {
position: relative;
z-index: 1;
}
.ft18__head {
text-align: center;
max-width: 640px;
margin: 0 auto 55px;
}
.ft18__head h2 {
margin: 0 0 14px;
font-size: clamp(28px, 4vw, 42px);
font-weight: 700;
letter-spacing: -0.02em;
}
.ft18__head p {
margin: 0;
line-height: 1.65;
color: color-mix(in srgb, var(--textColor1) 68%, transparent);
}
.ft18__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* Card with isometric tilt */
.ft18__card {
perspective: 800px;
}
.ft18__card-inner {
position: relative;
padding: 30px 24px;
border-radius: var(--borderRadius);
border: 1px solid color-mix(in srgb, var(--secondStyleColor) 12%, transparent);
background: linear-gradient(
145deg,
rgba(255, 255, 255, 0.05),
rgba(255, 255, 255, 0.01)
);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transform: rotateX(4deg) rotateY(-3deg);
transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
overflow: hidden;
}
.ft18__card:hover .ft18__card-inner {
transform: rotateX(0deg) rotateY(0deg) translateY(-6px);
border-color: color-mix(in srgb, var(--secondStyleColor) 40%, transparent);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}
.ft18__icon {
width: 48px;
height: 48px;
border-radius: 14px;
background: color-mix(in srgb, var(--secondStyleColor) 10%, transparent);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
transition: transform 0.3s ease;
}
.ft18__card:hover .ft18__icon {
transform: scale(1.1) rotate(-4deg);
}
.ft18__icon i {
font-size: 20px;
color: var(--secondStyleColor);
}
.ft18__card-inner h3 {
margin: 0 0 10px;
font-size: 18px;
font-weight: 600;
}
.ft18__card-inner p {
margin: 0;
font-size: 14px;
line-height: 1.7;
color: color-mix(in srgb, var(--textColor1) 68%, transparent);
}
.ft18__num {
position: absolute;
top: 18px;
right: 20px;
font-size: 32px;
font-weight: 800;
color: color-mix(in srgb, var(--secondStyleColor) 8%, transparent);
line-height: 1;
pointer-events: none;
transition: color 0.3s ease;
}
.ft18__card:hover .ft18__num {
color: color-mix(in srgb, var(--secondStyleColor) 18%, transparent);
}
/* Responsive */
@media (max-width: 950px) {
.ft18__grid {
grid-template-columns: 1fr 1fr;
}
.ft18__card-inner {
transform: rotateX(3deg) rotateY(-2deg);
}
}
@media (max-width: 800px) {
.ft18__card-inner {
padding: 24px 20px;
}
.ft18__card-inner h3 {
font-size: 16px;
}
.ft18__card-inner p {
font-size: 13px;
}
.ft18__icon {
width: 42px;
height: 42px;
}
.ft18__icon i {
font-size: 18px;
}
}
@media (max-width: 600px) {
.ft18 {
padding: 50px 0;
}
.ft18__head {
margin-bottom: 36px;
}
.ft18__head h2 {
font-size: 24px;
}
.ft18__grid {
grid-template-columns: 1fr;
}
.ft18__card-inner {
transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
.ft18__card-inner,
.ft18__icon,
.ft18__num {
transition: none;
}
}
.gl11 {
padding: 60px 0;
overflow: hidden;
}
.gl11__head {
text-align: center;
margin-bottom: 40px;
}
.gl11__head p {
margin: 12px auto 0;
color: var(--textColor1);
text-wrap: balance;
text-align: center;
}
.gl11__marquee-wrap {
display: flex;
flex-direction: column;
gap: 16px;
}
.gl11__row {
display: flex;
width: max-content;
}
.gl11__track {
display: flex;
gap: 16px;
padding-right: 16px;
}
.gl11__row--left {
animation: gl11-scroll-left 70s linear infinite;
}
.gl11__row--right {
animation: gl11-scroll-right 80s linear infinite;
}
.gl11__marquee-wrap:hover .gl11__row {
animation-play-state: paused;
}
@keyframes gl11-scroll-left {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
@keyframes gl11-scroll-right {
0% {
transform: translateX(-50%);
}
100% {
transform: translateX(0);
}
}
.gl11__item {
flex-shrink: 0;
width: 340px;
height: 240px;
border-radius: var(--borderRadius);
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--textColor1) 10%, transparent);
transition: border-color 0.3s ease;
}
.gl11__item:hover {
border-color: var(--secondStyleColor);
}
.gl11__item img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
transition: transform 0.4s ease;
}
.gl11__item:hover img {
transform: scale(1.06);
}
@media (max-width: 950px) {
.gl11__item {
width: 280px;
height: 200px;
}
}
@media (max-width: 600px) {
.gl11 {
padding: 40px 0;
}
.gl11__head {
margin-bottom: 28px;
}
.gl11__marquee-wrap {
gap: 12px;
}
.gl11__track {
gap: 12px;
padding-right: 12px;
}
.gl11__item {
width: 220px;
height: 160px;
}
}
@media (prefers-reduced-motion: reduce) {
.gl11__row--left,
.gl11__row--right {
animation: none;
}
.gl11__item img {
transition: none;
}
}
.about20{
position:relative;
padding:8rem 0;
overflow:hidden;
background:var(--bodyBG);
}
.about20__ambient{
position:absolute;z-index:0;pointer-events:none;
}
.about20__ambient--1{
width:500px;height:500px;
top:-10%;left:-5%;
background:radial-gradient(circle,rgba(var(--accent-rgb),.06),transparent 70%);
animation:about20float 15s ease-in-out infinite alternate;
}
.about20__ambient--2{
width:400px;height:400px;
bottom:-10%;right:-5%;
background:radial-gradient(circle,rgba(var(--accent2-rgb),.06),transparent 70%);
animation:about20float 18s ease-in-out infinite alternate-reverse;
}
@keyframes about20float{0%{transform:translate(0,0)}100%{transform:translate(30px,-40px)}}
.about20__container{position:relative;z-index:1}
.about20__header{
display:grid;
grid-template-columns:1fr 1fr;
gap:4rem;
margin-bottom:6rem;
align-items:end;
}
.about20__label{
font-size:.7rem;font-weight:600;
letter-spacing:.2em;text-transform:uppercase;
color:var(--secondStyleColor);
margin-bottom:1.5rem;
}
.about20 h2{color:var(--textColor1)}
.about20 h2 em{font-style:italic;color:var(--secondStyleColor)}
.about20__header > p{
color:var(--textSecondary);
align-self:end;
padding-bottom:.5rem;
}
.about20__blocks{display:flex;flex-direction:column;gap:2rem}
.about20__block{
display:grid;
grid-template-columns:1fr 1fr;
gap:0;
background:var(--bgCard);
border-radius:var(--borderRadius);
overflow:hidden;
opacity:0;transform:translateY(40px);
transition:all .7s cubic-bezier(.4,0,.2,1);
border:1px solid var(--borderSubtle);
}
.about20__block.visible{opacity:1;transform:translateY(0)}
.about20__block:nth-child(even){direction:rtl}
.about20__block:nth-child(even) > *{direction:ltr}
.about20__block-visual{
position:relative;
min-height:320px;
overflow:hidden;
}
.about20__block-visual--1{background:linear-gradient(135deg,rgba(var(--accent-rgb),.12),rgba(var(--accent-rgb),.02))}
.about20__block-visual--2{background:linear-gradient(135deg,rgba(var(--accent2-rgb),.12),rgba(var(--accent2-rgb),.02))}
.about20__block-visual--3{background:linear-gradient(135deg,rgba(var(--accent3-rgb),.12),rgba(var(--accent3-rgb),.02))}
.about20__block-icon{
position:absolute;
top:50%;left:50%;
transform:translate(-50%,-50%);
font-size:5rem;
opacity:.15;
}
.about20__block:nth-child(1) .about20__block-icon{color:var(--secondStyleColor)}
.about20__block:nth-child(2) .about20__block-icon{color:var(--accent2)}
.about20__block:nth-child(3) .about20__block-icon{color:var(--accent3)}
.about20__block-visual svg{
position:absolute;inset:0;
width:100%;height:100%;
opacity:.08;
}
.about20__dash{
stroke:currentColor;
stroke-width:1;
stroke-dasharray:8 12;
fill:none;
animation:about20dashMove 20s linear infinite;
}
@keyframes about20dashMove{to{stroke-dashoffset:-200}}
.about20__block-body{
padding:3rem;
display:flex;flex-direction:column;justify-content:center;
}
.about20__block-number{
font-size:3.5rem;font-weight:700;
color:var(--borderSubtle);
line-height:1;
margin-bottom:1rem;
}
.about20__block-body h3{color:var(--textColor1);margin-bottom:1rem}
.about20__block-body p{color:var(--textSecondary);margin-bottom:1.5rem}
.about20__block-tag{
display:inline-flex;align-items:center;gap:.4rem;
font-size:.7rem;font-weight:500;
letter-spacing:.08em;text-transform:uppercase;
}
.about20__block-tag i{font-size:.55rem}
.about20__block-tag--1{color:var(--secondStyleColor)}
.about20__block-tag--2{color:var(--accent2)}
.about20__block-tag--3{color:var(--accent3)}
@media(max-width:900px){
.about20__header{grid-template-columns:1fr;gap:1.5rem}
.about20__block{grid-template-columns:1fr}
.about20__block:nth-child(even){direction:ltr}
.about20__block-visual{min-height:200px}
}
@media(prefers-reduced-motion:reduce){
.about20__ambient,
.about20__dash,
.about20__block{animation:none!important;opacity:1;transform:none}
}
/* ===========================
FAQ 10 — Geometric Pulse
Rotating conic-gradient borders + SVG background
=========================== */
@property --faq10-angle {
syntax: "