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;
}
}
/* ===== HERO v27 — Layered animated waves background ===== */
.hr28 {
position: relative;
min-height: 650px;
display: flex;
align-items: center;
padding: clamp(100px, 12vw, 160px) 0;
color: var(--textColor1);
overflow: hidden;
}
/* Background image */
.hr28__bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.hr28__bg img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.1;
}
/* Waves SVG */
.hr28__waves {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.hr28 .container {
position: relative;
z-index: 2;
}
/* Content */
.hr28__content {
max-width: 700px;
margin: 0 auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 22px;
}
.hr28__kicker {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 18px;
border-radius: 100px;
background: color-mix(in srgb, var(--secondStyleColor) 10%, transparent);
border: 1px solid
color-mix(in srgb, var(--secondStyleColor) 14%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
font-size: 12px;
font-weight: 700;
color: var(--secondStyleColor);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.hr28__kicker i {
font-size: 11px;
}
.hr28__content h1 {
margin: 0;
font-size: clamp(40px, 7vw, 76px);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.05;
text-shadow: 0 4px 40px rgba(0, 0, 0, 0.3);
}
.hr28__content > p {
margin: 0;
font-size: 17px;
line-height: 1.7;
color: color-mix(in srgb, var(--textColor1) 65%, transparent);
max-width: 540px;
}
/* Actions */
.hr28__actions {
display: flex;
gap: 12px;
margin-top: 4px;
}
.hr28__btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 15px 32px;
border-radius: var(--borderRadius);
font-size: 15px;
font-weight: 600;
text-decoration: none;
transition:
transform 0.25s ease,
box-shadow 0.25s ease;
}
.hr28__btn--fill {
background: var(--secondStyleColor);
color: var(--bodyBG);
}
.hr28__btn--fill i {
font-size: 12px;
transition: transform 0.25s ease;
}
.hr28__btn--fill:hover {
transform: translateY(-2px);
box-shadow: 0 12px 36px
color-mix(in srgb, var(--secondStyleColor) 35%, transparent);
}
.hr28__btn--fill:hover i {
transform: translateX(3px);
}
.hr28__btn--glass {
border: 1px solid
color-mix(in srgb, var(--secondStyleColor) 22%, transparent);
color: var(--textColor1);
background: color-mix(in srgb, var(--bodyBG) 30%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.hr28__btn--glass:hover {
background: color-mix(in srgb, var(--secondStyleColor) 10%, transparent);
border-color: color-mix(in srgb, var(--secondStyleColor) 45%, transparent);
transform: translateY(-2px);
}
/* Responsive */
@media (max-width: 800px) {
.hr28 {
min-height: 500px;
}
.hr28__content h1 {
font-size: 36px;
}
}
@media (max-width: 600px) {
.hr28 {
padding: 80px 0;
min-height: 420px;
}
.hr28__content h1 {
font-size: 28px;
}
.hr28__content > p {
font-size: 15px;
}
.hr28__actions {
flex-direction: column;
width: 100%;
}
.hr28__btn {
justify-content: center;
}
}
@media (prefers-reduced-motion: reduce) {
.hr28__waves * {
animation: none !important;
}
.hr28__btn,
.hr28__btn--fill i {
transition: none;
}
}
: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 a {
position: relative;
text-decoration: none;
font-weight: 600;
font-size: 18px;
line-height: 1.5;
white-space: nowrap;
color: var(--textColor1);
padding: 10px 24px;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
background-color: var(--itemBgColor);
border: 1.5px solid color-mix(in srgb, var(--textColor1) 12%, transparent);
overflow: hidden;
z-index: 0;
transition: color 0.35s ease, border-color 0.35s ease;
-webkit-transition: color 0.35s ease, border-color 0.35s ease;
-moz-transition: color 0.35s ease, border-color 0.35s ease;
-ms-transition: color 0.35s ease, border-color 0.35s ease;
-o-transition: color 0.35s ease, border-color 0.35s ease;
}
.toc a::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--secondStyleColor);
border-radius: inherit;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-moz-transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-ms-transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-o-transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.toc a:hover::before,
.toc a:focus::before {
transform: scaleX(1);
}
.toc a:hover,
.toc a:focus {
color: var(--textColor2);
border-color: var(--secondStyleColor);
}
.toc .swiper-wrapper {
padding-top: 20px;
padding-bottom: 24px;
}
.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 {
transition: none;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
}
}
.feat22{
position:relative;
padding:8rem 2rem;
overflow:hidden;
background:var(--bodyBG);
}
.feat22__circle{
position:absolute;
border-radius:50%;
border:1px solid var(--borderSubtle);
pointer-events:none;
opacity:.4;
}
.feat22__circle--1{
width:600px;height:600px;
top:-15%;right:-10%;
animation:feat22rotate 60s linear infinite;
}
.feat22__circle--2{
width:400px;height:400px;
bottom:-10%;left:-5%;
animation:feat22rotate 45s linear infinite reverse;
}
@keyframes feat22rotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.feat22__container{position:relative;z-index:1;max-width:1100px}
.feat22__header{
display:flex;
justify-content:space-between;
align-items:end;
gap:2rem;
margin-bottom:4rem;
flex-wrap:wrap;
}
.feat22__header-left{max-width:550px}
.feat22__label{
font-size:.65rem;font-weight:800;
letter-spacing:.25em;text-transform:uppercase;
color:var(--secondStyleColor);
margin-bottom:1rem;
}
.feat22 h2{color:var(--textColor1)}
.feat22__header-right{max-width:350px}
.feat22__header-right p{
color:var(--textSecondary);
font-style:italic;
}
.feat22__grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1.5rem;
perspective:1200px;
}
.feat22__card{
position:relative;
background:var(--bgCard);
border:1px solid var(--borderSubtle);
border-radius:var(--borderRadius);
padding:2.5rem 2rem;
transform-style:preserve-3d;
transition:transform .4s cubic-bezier(.4,0,.2,1),box-shadow .4s ease;
cursor:default;
opacity:0;transform:translateY(30px) rotateX(5deg);
}
.feat22__card.visible{opacity:1;transform:translateY(0) rotateX(0)}
.feat22__card:hover{
transform:translateY(-8px) rotateX(2deg) rotateY(-2deg);
box-shadow:0 20px 50px rgba(0,0,0,.1);
}
.feat22__card::before{
content:'';position:absolute;
top:0;left:1.5rem;right:1.5rem;
height:3px;border-radius:0 0 3px 3px;
transform:scaleX(0);
transition:transform .3s ease;
transform-origin:left;
}
.feat22__card:hover::before{transform:scaleX(1)}
.feat22__card:nth-child(1)::before,.feat22__card:nth-child(5)::before{background:var(--secondStyleColor)}
.feat22__card:nth-child(2)::before,.feat22__card:nth-child(4)::before{background:var(--accent2)}
.feat22__card:nth-child(3)::before,.feat22__card:nth-child(6)::before{background:var(--accent3)}
.feat22__card-number{
font-size:4rem;font-weight:800;
line-height:1;
color:var(--bgAlt);
margin-bottom:1.5rem;
transition:color .3s;
}
.feat22__card:nth-child(1):hover .feat22__card-number,
.feat22__card:nth-child(5):hover .feat22__card-number{color:var(--secondStyleColor);opacity:.15}
.feat22__card:nth-child(2):hover .feat22__card-number,
.feat22__card:nth-child(4):hover .feat22__card-number{color:var(--accent2);opacity:.15}
.feat22__card:nth-child(3):hover .feat22__card-number,
.feat22__card:nth-child(6):hover .feat22__card-number{color:var(--accent3);opacity:.15}
.feat22__card-icon{
display:flex;align-items:center;justify-content:center;
width:42px;height:42px;
border-radius:10px;
font-size:1rem;
margin-bottom:1.2rem;
transition:transform .3s;
}
.feat22__card:hover .feat22__card-icon{transform:scale(1.1) rotate(-5deg)}
.feat22__card-icon--1{background:rgba(var(--accent-rgb),.08);color:var(--secondStyleColor)}
.feat22__card-icon--2{background:rgba(var(--accent2-rgb),.08);color:var(--accent2)}
.feat22__card-icon--3{background:rgba(var(--accent3-rgb),.08);color:var(--accent3)}
.feat22__card h3{color:var(--textColor1);margin-bottom:.6rem}
.feat22__card > p{color:var(--textSecondary);font-size:.88rem;line-height:1.75}
@media(max-width:900px){.feat22__grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.feat22__grid{grid-template-columns:1fr}.feat22__header{flex-direction:column}}
@media(prefers-reduced-motion:reduce){
.feat22__circle,
.feat22__card{animation:none!important;opacity:1;transform:none;transition:none}
}
:root {
--images-amount: 6;
--highlight: var(--secondStyleColor);
--border-a: rgba(247, 176, 91, 0.16);
--border-b: rgba(247, 147, 76, 0.16);
--transition-duration: 620ms;
--ease: cubic-bezier(0.65, 0, 0.35, 1);
}
.gallery {
position: relative;
width: 80%;
display: grid;
grid-template-rows: repeat(4, 1fr);
grid-template-columns: repeat(6, 1fr);
gap: 0.5em;
padding: 10px;
overflow: hidden;
user-select: none;
}
#gallery .container {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.gallery-header {
text-align: center;
margin-bottom: 40px;
& p {
text-align: center;
margin: 0 auto;
text-wrap: balance;
}
}
.gallery__image-wrapper {
position: relative;
cursor: pointer;
padding-top: 75%;
width: 100%;
height: 0;
transform-origin: 0 0;
overflow: hidden;
grid-row: span 2;
grid-column: span 2;
box-sizing: content-box;
backface-visibility: hidden;
perspective: 1px;
transform: translate3d(0, 0, 1px);
border-radius: var(--borderRadius);
& img {
object-fit: cover;
width: 100%;
height: 100%;
object-position: 50% 20%;
}
}
.gallery__image-wrapper::before,
.gallery__image-wrapper::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.gallery__image-wrapper::after {
background: #000;
opacity: 0.33;
z-index: 1;
transform: translate(0, 0);
transition: all 500ms ease-out;
}
.gallery__image-wrapper::before {
opacity: 0;
z-index: 2;
background: var(--secondStyleColor);
transition: all 160ms ease-in;
mix-blend-mode: hard-light;
}
.gallery__image-wrapper:hover:not(.gallery__image-wrapper--selected)::before {
opacity: 0.32;
}
.gallery__image-wrapper:nth-child(1) {
order: 2;
}
.gallery__image-wrapper:nth-child(2) {
order: 4;
}
.gallery__image-wrapper:nth-child(3) {
order: 6;
}
.gallery__image-wrapper:nth-child(4) {
order: 8;
}
.gallery__image-wrapper:nth-child(5) {
order: 10;
}
.gallery__image-wrapper:nth-child(6) {
order: 12;
}
.gallery__image {
position: absolute;
top: 50%;
left: 50%;
height: 100%;
border-radius: var(--borderRadius);
width: auto;
transform: translate(-50%, -50%);
transition: all 320ms ease;
}
.gallery__image-wrapper.gallery__image-wrapper--selected {
grid-row: span 4;
grid-column: span 4;
z-index: 1;
}
.gallery__image-wrapper.gallery__image-wrapper--selected:nth-child(
odd
)::after {
transform: translate(0, 100%);
}
.gallery__image-wrapper.gallery__image-wrapper--selected:nth-child(
even
)::after {
transform: translate(100%, 0);
}
/* SCSS: &:nth-child(images-amount / 2) => 3 */
.gallery__image-wrapper.gallery__image-wrapper--selected:nth-child(3) {
order: 3;
}
/* SCSS: &:nth-child(images-amount) => 6 */
.gallery__image-wrapper.gallery__image-wrapper--selected:nth-child(6) {
order: 9;
}
/* ===== Mobile adaptive (paste at the end of your CSS) ===== */
@media (max-width: 640px) {
.gallery {
width: 100%;
max-width: 560px;
gap: 0.35em;
padding: 0.35em;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: none;
grid-auto-rows: 1fr;
}
.gallery-header {
margin-bottom: 20px;
}
.gallery__image-wrapper {
grid-column: span 1;
pointer-events: none;
grid-row: span 1;
padding-top: 78%;
}
/* выбранный элемент — на всю ширину */
.gallery__image-wrapper.gallery__image-wrapper--selected {
grid-column: 1 / -1;
grid-row: span 2;
}
/* На мобиле лучше не мудрить с order — стабильно и предсказуемо */
.gallery__image-wrapper {
order: initial !important;
}
.gallery__image-wrapper.gallery__image-wrapper--selected {
order: -1 !important; /* выбранная уедет вверх */
}
}
/* Extra-small phones: 1 колонка */
@media (max-width: 420px) {
.gallery {
grid-template-columns: 1fr;
}
.gallery__image-wrapper {
grid-column: span 1;
grid-row: span 1;
padding-top: 75%;
}
.gallery__image-wrapper.gallery__image-wrapper--selected {
grid-column: span 1;
grid-row: span 1; /* чтобы не занимала слишком много */
}
}
/* ===== HOW IT WORKS SECTION ===== */
.howSection {
padding: 80px 0;
background: var(--bodyBG);
color: var(--textColor1);
}
.howWrapper {
max-width: var(--maxWidthContainer);
margin: 0 auto;
}
/* Header */
.howHeader {
max-width: 760px;
margin: 0 auto 45px auto;
text-align: center;
}
.howEyebrow {
font-size: 13px;
letter-spacing: 1.3px;
text-transform: uppercase;
color: var(--secondStyleColor);
font-weight: 600;
margin-bottom: 10px;
}
.howTitle {
font-size: 38px;
font-weight: 700;
margin-bottom: 16px;
color: var(--textColor1);
}
.howSubtitle {
font-size: 16px;
line-height: 1.6;
color: var(--textSecondary);
}
/* Steps */
.howSteps {
list-style: none;
padding: 0;
margin: 35px 0 0 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.howStepItem {
position: relative;
border-radius: var(--borderRadius);
padding: 24px 20px 22px 20px;
border: 1px solid var(--secondStyleColor);
box-shadow: 0 18px 35px rgba(0, 0, 0, 0.55);
overflow: hidden;
transition: 0.2s ease;
}
.howStepItem::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
circle at top center,
color-mix(in srgb, var(--secondStyleColor) 18%, transparent),
transparent 55%
);
opacity: 0;
transition: 0.25s ease;
pointer-events: none;
}
.howStepItem:hover {
border-color: var(--secondStyleColor);
transform: translateY(-3px);
}
.howStepItem:hover::before {
opacity: 1;
}
/* Badge + text */
.howStepBadge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 999px;
background: transparent;
border: 1px solid var(--secondStyleColor);
font-size: 14px;
font-weight: 700;
color: var(--secondStyleColor);
margin-bottom: 14px;
}
.howStepTitle {
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
}
.howStepText {
font-size: 14px;
line-height: 1.6;
color: var(--textSecondary);
}
/* Responsive */
@media (max-width: 900px) {
.howSteps {
grid-template-columns: 1fr;
}
.howStepItem {
padding: 22px 18px;
}
}
#top { padding: 80px 0; }
.tp1-head { text-align: center; margin-bottom: 50px; }
.tp1-head h2 { margin-bottom: 12px; }
.tp1-head p { color: var(--textSecondary); max-width: 600px; margin: 0 auto; }
.tp1-list { display: flex; flex-direction: column; gap: 16px; }
.tp1-list .top-card {
display: flex; align-items: center; gap: 20px;
background: var(--cardBG); border-radius: var(--borderRadius); padding: 20px 24px;
border: 1px solid var(--borderSubtle); transition: transform 0.3s, box-shadow 0.3s;
}
.tp1-list .top-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.25); }
.tp1-list .top-card__rank {
flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px;
background: var(--accentColor); color: var(--textColor2);
display: flex; align-items: center; justify-content: center;
font-size: 20px; font-weight: 800;
}
.tp1-list .top-card__logo {
flex-shrink: 0; width: 120px; height: 56px; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.tp1-list .top-card__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tp1-list .top-card__logo svg { max-width: 100%; max-height: 100%; }
.tp1-list .top-card__body { flex: 1; min-width: 0; }
.tp1-list .top-card__body h3 { margin-bottom: 2px; }
.tp1-list .top-card__body p { color: var(--textSecondary); font-size: 14px; }
.tp1-list .top-card__rating {
flex-shrink: 0; padding: 6px 14px; border-radius: 8px;
background: rgba(var(--accent-rgb), 0.12); color: var(--accentColor);
font-weight: 700; font-size: 15px; white-space: nowrap;
}
.tp1-list .top-card__badge {
flex-shrink: 0; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 700;
background: var(--accentColor); color: var(--textColor2); text-transform: uppercase; letter-spacing: 0.5px;
}
.tp1-list .top-card__badge:empty { display: none; }
@media (max-width: 768px) {
.tp1-list .top-card { flex-wrap: wrap; gap: 12px; padding: 16px; }
.tp1-list .top-card__rating { order: 5; }
}
/* ===== ABOUT v14 — Sticky text + stacked cards + SVG deco + stats strip ===== */
.ab14 {
position: relative;
padding: clamp(70px, 8vw, 110px) 0;
color: var(--textColor1);
overflow: hidden;
}
/* SVG decorative circles */
.ab14__deco {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
.ab14__circle {
fill: none;
stroke: color-mix(in srgb, var(--secondStyleColor) 8%, transparent);
stroke-width: 1;
}
.ab14__circle--1 {
stroke-dasharray: 10 14;
animation: ab14Spin 40s linear infinite;
transform-origin: 85% 15%;
}
.ab14__circle--2 {
stroke-dasharray: 6 10;
animation: ab14Spin 30s linear infinite reverse;
transform-origin: 10% 80%;
}
@keyframes ab14Spin {
to {
transform: rotate(360deg);
}
}
.ab14 .container {
position: relative;
z-index: 1;
}
/* Layout */
.ab14__layout {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: clamp(30px, 5vw, 60px);
align-items: start;
margin-bottom: 60px;
}
/* Left sticky */
.ab14__left {
position: sticky;
top: 80px;
display: flex;
flex-direction: column;
gap: 16px;
}
.ab14__eyebrow {
display: inline-block;
width: fit-content;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--secondStyleColor);
padding: 5px 14px;
border-radius: 100px;
border: 1px solid
color-mix(in srgb, var(--secondStyleColor) 25%, transparent);
}
.ab14__left h2 {
margin: 0;
font-size: clamp(28px, 4vw, 42px);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.15;
}
.ab14__left p {
margin: 0;
font-size: 15px;
line-height: 1.7;
color: color-mix(in srgb, var(--textColor1) 70%, transparent);
max-width: 400px;
}
.ab14__btn {
display: inline-block;
margin-top: 6px;
padding: 12px 28px;
width: fit-content;
border-radius: var(--borderRadius);
background: var(--secondStyleColor);
color: var(--bodyBG);
font-size: 14px;
font-weight: 600;
transition:
transform 0.25s ease,
box-shadow 0.25s ease;
}
.ab14__btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px
color-mix(in srgb, var(--secondStyleColor) 30%, transparent);
}
/* Right cards */
.ab14__right {
display: flex;
flex-direction: column;
gap: 18px;
}
.ab14__card {
border-radius: var(--borderRadius);
border: 1px solid
color-mix(in srgb, var(--secondStyleColor) 12%, transparent);
background: rgba(255, 255, 255, 0.03);
padding: 26px 22px;
transition:
transform 0.3s ease,
border-color 0.3s ease;
}
.ab14__card:hover {
transform: translateX(6px);
border-color: color-mix(in srgb, var(--secondStyleColor) 38%, transparent);
}
/* Image card */
.ab14__card--img {
padding: 0;
overflow: hidden;
display: grid;
grid-template-columns: 0.45fr 0.55fr;
}
.ab14__thumb {
overflow: hidden;
min-height: 180px;
}
.ab14__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.ab14__card--img:hover .ab14__thumb img {
transform: scale(1.05);
}
.ab14__card-body {
padding: 24px 22px;
display: flex;
flex-direction: column;
justify-content: center;
}
.ab14__card-body h3 {
margin: 0 0 8px;
font-size: 18px;
font-weight: 600;
}
.ab14__card-body p {
margin: 0;
font-size: 14px;
line-height: 1.7;
color: color-mix(in srgb, var(--textColor1) 68%, transparent);
}
/* Icon card */
.ab14__card-ico {
width: 44px;
height: 44px;
border-radius: 12px;
background: color-mix(in srgb, var(--secondStyleColor) 10%, transparent);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
transition: transform 0.3s ease;
}
.ab14__card:hover .ab14__card-ico {
transform: scale(1.12) rotate(-5deg);
}
.ab14__card-ico i {
font-size: 18px;
color: var(--secondStyleColor);
}
.ab14__card h3 {
margin: 0 0 8px;
font-size: 17px;
font-weight: 600;
}
.ab14__card p {
margin: 0;
font-size: 14px;
line-height: 1.7;
color: color-mix(in srgb, var(--textColor1) 68%, transparent);
}
/* Stats strip */
.ab14__stats {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
padding: 32px 0 0;
border-top: 1px solid
color-mix(in srgb, var(--secondStyleColor) 10%, transparent);
}
.ab14__stat {
flex: 1;
text-align: center;
display: flex;
flex-direction: column;
gap: 4px;
}
.ab14__stat strong {
font-size: clamp(26px, 3.5vw, 38px);
font-weight: 800;
color: var(--secondStyleColor);
line-height: 1;
}
.ab14__stat span {
font-size: 13px;
color: color-mix(in srgb, var(--textColor1) 55%, transparent);
}
.ab14__divider {
width: 1px;
height: 48px;
background: linear-gradient(
180deg,
transparent,
color-mix(in srgb, var(--secondStyleColor) 25%, transparent),
transparent
);
animation: ab14Shimmer 2.5s ease-in-out infinite alternate;
}
@keyframes ab14Shimmer {
0% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}
/* Responsive */
@media (max-width: 950px) {
.ab14__left {
position: static;
}
.ab14__layout {
gap: 36px;
}
}
@media (max-width: 800px) {
.ab14__layout {
grid-template-columns: 1fr;
}
.ab14__left {
text-align: center;
align-items: center;
}
.ab14__left p {
max-width: 100%;
}
.ab14__card--img {
grid-template-columns: 1fr;
}
.ab14__thumb {
min-height: 160px;
aspect-ratio: 16 / 8;
}
.ab14__card-body h3,
.ab14__card h3 {
font-size: 16px;
}
.ab14__card-body p,
.ab14__card p {
font-size: 13px;
}
.ab14__layout {
margin-bottom: 44px;
}
}
@media (max-width: 600px) {
.ab14 {
padding: 50px 0;
}
.ab14__left h2 {
font-size: 24px;
}
.ab14__stats {
flex-wrap: wrap;
gap: 20px;
padding-top: 28px;
}
.ab14__divider {
display: none;
}
.ab14__stat {
flex: 0 0 40%;
}
.ab14__card {
padding: 22px 18px;
}
.ab14__card-body {
padding: 18px 16px;
}
}
@media (prefers-reduced-motion: reduce) {
.ab14__circle--1,
.ab14__circle--2 {
animation: none;
}
.ab14__divider {
animation: none;
}
.ab14__card,
.ab14__btn,
.ab14__card-ico,
.ab14__thumb img {
transition: none;
}
}
/* ===========================
Reviews 17 — Constellation Network
Animated SVG mesh background + rotating gradient card borders
=========================== */
@property --rv17-angle {
syntax: "