/* ==========================================
   HEADER
========================================== */

.site-header{

position:fixed;

top:0;

left:50%;

transform:translateX(-50%);

width:auto;

z-index:1000;

background:
rgba(255,255,255,.18);

backdrop-filter:
blur(10px);

-webkit-backdrop-filter:
blur(10px);

border:
1px solid rgba(255,255,255,.45);

border-radius:
0 0 24px 24px;

box-shadow:
0 8px 30px rgba(31,42,68,.05);

transition:
all .35s ease;
}

.site-header.scrolled{

background:
rgba(255,255,255,.72);

backdrop-filter:
blur(18px);

-webkit-backdrop-filter:
blur(18px);

border-bottom:
1px solid rgba(31,42,68,.06);

box-shadow:
0 8px 24px rgba(31,42,68,.05);
}

.site-header .container{

width:auto;

padding-left:28px;
padding-right:28px;

height:64px;

display:flex;
align-items:center;
justify-content:center;

gap:40px;
}

.brand {

font-size:1.05rem;
font-weight:800;
letter-spacing:.02em;
}

.site-header nav{

display:flex;
align-items:center;

gap:24px;
}

.site-header nav a {

font-size:.95rem;
font-weight:500;

transition:
var(--transition-fast);
}

.site-header nav a:hover {

opacity:.65;
}

/* ==========================================
   HERO
========================================== */

.hero {

position:relative;

overflow:hidden;

padding-top:40px;
padding-bottom:40px;

background-image:
url("../images/hero/hero-bg.jpg");

background-size:cover;
background-position:center;
background-repeat:no-repeat;
}

.hero::after{

content:"";

position:absolute;

left:0;
right:0;
bottom:0;

height:80px;

background:
linear-gradient(
180deg,
rgba(248,251,253,0) 0%,
rgba(248,251,253,.15) 35%,
rgba(248,251,253,.65) 70%,
var(--color-bg) 100%
);

pointer-events:none;

z-index:20;
}

.hero-layout {

display:grid;
grid-template-columns:1fr 1fr;

align-items:start;

padding-top:40px;

gap:40px;
}

.hero-content {

max-width:620px;
}

.hero-badge{

display:inline-flex;
align-items:center;

padding:12px 22px;

margin-bottom:28px;

border-radius:999px;

background:
linear-gradient(
180deg,
rgba(255,255,255,.98),
rgba(255,255,255,.88)
);

border:
2px solid rgba(170,220,245,.85);

box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
0 8px 20px rgba(31,42,68,.05);

backdrop-filter:
blur(12px);

color:#3b4f73;

font-size:.95rem;
font-weight:500;
}

.hero h1{

font-size:
clamp(2.2rem,3.8vw,3.8rem);

line-height:1.08;

letter-spacing:-0.04em;

font-weight:400;

margin-bottom:34px;
}

.hero-text{

max-width:520px;

font-size:1rem;

line-height:1.7;

margin-bottom:48px;

}

.hero-bold{

font-weight:800;

color:#111;
}


.hero-regular{

font-weight:400;

color:#111;

}

.hero-gradient{

font-weight:500;

background:
linear-gradient(
90deg,
#6faee8,
#95c3f6
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

background-clip:text;

}

.cta-btn{

position:relative;

display:flex;

align-items:center;

justify-content:center;

width:420px;
height:128px;

border-radius:999px;

overflow:hidden;

cursor:pointer;

}

.cta-btn img{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

object-fit:fill;

z-index:1;

}

.cta-btn:hover{

transform:translateY(-3px);

}

.cta-btn::after{

content:"";

position:absolute;

top:-50%;
left:-80%;

width:40%;
height:100%;

background:
linear-gradient(
120deg,
transparent,
rgba(255,255,255,.7),
transparent
);

transform:rotate(20deg);

transition:.6s ease;

z-index:3;

}

.cta-btn:hover::after{

left:130%;

}

/* ==========================================
   ABOUT
========================================== */

.about{

    position:relative;

    padding:110px 0 90px;

    overflow:hidden;

    background:var(--color-bg);

}

/* ==========================================
   Layout
========================================== */

.about-layout{
    display:grid;
    grid-template-columns:520px minmax(600px,1fr);
    gap:40px;
    align-items:center;
}

/* ==========================================
   Левая колонка
========================================== */

.about-left{

    position:relative;

    z-index:5;

}

/* ==========================================
   Заголовок
========================================== */

.about-title{

    margin:0;

    max-width:500px;

    font-size:clamp(2rem,2.5vw,3rem);
    
    line-height:1.15;

    letter-spacing:-0.04em;

    font-weight:700;

    color:#20293b;

}

.about-title span{

    color:#69B9F7;

}

/* ==========================================
   Подзаголовок
========================================== */

.about-subtitle{

    margin:34px 0 65px;

    max-width:430px;

    font-size:1.1rem;

    line-height:1.8;

    color:#60718e;

}

/* ==========================================
   Список
========================================== */

.about-points{

    display:flex;

    flex-direction:column;

    gap:24px;

}

/* ==========================================
   Один пункт
========================================== */

.about-point{

    display:flex;

    align-items:flex-start;

    gap:18px;

}

.about-point-icon{

    width:54px;

    height:54px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#F4F9FF;

    border:1px solid rgba(101,186,242,.18);

}

.about-point-icon img{

    width:28px;

    height:28px;

    display:block;

}

.about-point-text h3{

    margin:3px 0 8px;

    font-size:1.18rem;

    line-height:1.3;

    color:#203250;

}

.about-point-text p{

    margin:0;

    font-size:1rem;

    line-height:1.7;

    color:#64748f;

}

/* ==========================================
   Правая колонка
========================================== */

.about-right{

    padding-top:80px;

    position:relative;

}

/* ==========================================
   Фото
========================================== */

.about-image{
    position:relative;
    height:620px;
    overflow:hidden;

    margin:0;
    right:auto;
    left:auto;
    transform:none;
}

.about-image img{
    width:100%;
    height:auto;
    max-width:720px;   /* можно 680–760 подобрать */
    object-fit:contain;
    display:block;
    margin-left:auto;
}

/* ==========================================
   Плавное растворение
========================================== */

.about-image-fade{

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        90deg,
        var(--color-bg) 0%,
        rgba(248,251,253,0) 18%
    ),

    linear-gradient(
        180deg,
        rgba(248,251,253,0) 76%,
        var(--color-bg) 100%
    );

    pointer-events:none;

}


/* ==========================================
   BENEFITS
========================================== */

.benefits{
padding-top:180px;
padding-bottom:140px;
}

.bento-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;
}

/* ==========================================
   BASE CARD
========================================== */

.card{

position:relative;

padding:25px;

border-radius:32px;

overflow:hidden;

border:
1px solid rgba(255,255,255,.92);

box-shadow:
0 28px 60px rgba(31,42,68,.08),
0 12px 24px rgba(31,42,68,.05);

transition:
all .3s ease;
}

.card:hover{

transform:
translateY(-6px);

box-shadow:
0 40px 80px rgba(31,42,68,.10),
0 16px 32px rgba(31,42,68,.06);
}

.card h3{

font-size:1.3rem;

font-weight:700;

line-height:1.25;

margin-bottom:14px;

color:#203250;
}

.card p{

font-size:1rem;

line-height:1.65;

color:#4f6283;
}

/* ==========================================
   LARGE
========================================== */

.large{

grid-column:span 2;

min-height:150px;
}

/* ==========================================
   LARGE BLUE
========================================== */

.card-blue{

background:
linear-gradient(
210deg,
#daeefc 0%,
#e8f5fc 55%,
#e9f5fd 100%
);
}

.card-blue::before{

content:"";

position:absolute;

top:-40px;
right:-40px;

width:120px;
height:120px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(255,255,255,.75) 0%,
rgba(255,255,255,.30) 50%,
rgba(255,255,255,0) 80%
);

pointer-events:none;
}

/* ==========================================
   SMALL CARDS
========================================== */

.card-small{

background:
linear-gradient(
210deg,
#f0f8fe 0%,
#f4f5fd 50%,
#f2f5fc 100%
);
}

/* ==========================================
   LARGE ROSE
========================================== */

.card-rose{

background:
linear-gradient(
210deg,
#f8e0f2 0%,
#fdf1f4 55%,
#f2ebf6 100%
);
}

.card-rose::before{

content:"";

position:absolute;

top:-40px;
right:-40px;

width:120px;
height:120px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(255,255,255,.75) 0%,
rgba(255,255,255,.30) 50%,
rgba(255,255,255,0) 80%
);

pointer-events:none;
}

/* ==========================================
   YIN YANG
========================================== */

.yin-yang-section{

position:relative;

overflow:hidden;

padding-top:120px;
padding-bottom:120px;

background-image:
url("../images/branding/yinyang-bg.jpg");

background-size:cover;
background-position:center;
background-repeat:no-repeat;
}

/* мягкое затухание сверху */

.yin-yang-section::before{

content:"";

position:absolute;

top:0;
left:0;
right:0;

height:120px;

background:
linear-gradient(
180deg,
var(--color-bg),
rgba(248,251,253,0)
);

pointer-events:none;

z-index:1;
}

/* мягкое затухание снизу */

.yin-yang-section::after{

content:"";

position:absolute;

left:0;
right:0;
bottom:0;

height:120px;

background:
linear-gradient(
180deg,
rgba(248,251,253,0),
var(--color-bg)
);

pointer-events:none;

z-index:1;
}

.yin-yang-section .container{

position:relative;

z-index:2;
}

.yinyang-image{

width:620px;

max-width:100%;

margin:0 auto;

filter:
drop-shadow(
0 30px 70px rgba(31,42,68,.10)
);

transition:
transform .5s ease;
}

.yinyang-image:hover{

transform:
translateY(-4px);
}

/* ==========================================
   AUDIENCE
========================================== */

.audience{

padding-top:180px;
padding-bottom:140px;
}

.audience .section-title{

padding-top:90px;

margin-bottom:60px;

text-align:center;
}

.audience-layout{

display:flex;
flex-direction:column;

gap:24px;
}

/* ==========================================
   ROWS
========================================== */

.audience-row{

display:grid;

grid-template-columns:
0.85fr 1.15fr 1.15fr;

gap:24px;

align-items:stretch;
}

.audience-row.reverse{

grid-template-columns:
1.15fr 1.15fr 0.85fr;
}

/* ==========================================
   PHOTO
========================================== */

.audience-photo{

height:220px;

overflow:hidden;

border-radius:32px;

box-shadow:
0 28px 60px rgba(31,42,68,.10),
0 10px 24px rgba(31,42,68,.05);
}

.audience-photo img{

width:100%;
height:100%;

object-fit:cover;

display:block;
}

/* ==========================================
   CARD
========================================== */

.audience-card{

padding:28px 32px;

min-height:220px;

border-radius:32px;

box-shadow:
0 28px 60px rgba(31,42,68,.08),
0 10px 24px rgba(31,42,68,.04);

transition:all .3s ease;
}

.audience-card:hover{

transform:
translateY(-4px);

box-shadow:
0 38px 80px rgba(31,42,68,.10),
0 14px 30px rgba(31,42,68,.05);
}

.audience-card h3{

margin-bottom:12px;

font-size:1.2rem;

line-height:1.3;

color:#203250;
}

.audience-card p{

margin:0;

font-size:1rem;

line-height:1.65;

color:#4f6283;
}

/* ==========================================
   ICON
========================================== */

.audience-icon{

font-size:28px;

margin-bottom:18px;

line-height:1;
}

/* ==========================================
   COLORS
========================================== */

.audience-blue{

background:
linear-gradient(
210deg,
#daeefc 0%,
#e8f5fc 55%,
#e9f5fd 100%
);
}

.audience-blue .audience-icon{

color:#66c5f8;
}

.audience-light{

background:
linear-gradient(
210deg,
#dff2fd 0%,
#eef6fd 50%,
#f8eef8 100%
);
}

.audience-light .audience-icon{

color:#8fbde8;
}

.audience-pink{

background:
linear-gradient(
210deg,
#f8e0f2 0%,
#fdf1f4 55%,
#f2ebf6 100%
);
}

.audience-pink .audience-icon{

color:#eea1c8;
}

/* ==========================================
   GALLERY
========================================== */

.gallery{

padding-top:180px;
padding-bottom:140px;

overflow:hidden;
}

.gallery .section-title{

margin-bottom:60px;

text-align:center;
}

.gallery-track{

display:flex;

gap:24px;

width:max-content;

animation:
gallery-scroll 45s linear infinite;
}

.gallery:hover .gallery-track{

animation-play-state:paused;
}

.gallery-item{

flex:0 0 290px;

height:380px;

overflow:hidden;

border-radius:36px;

box-shadow:
0 30px 80px rgba(31,42,68,.08),
0 12px 30px rgba(31,42,68,.04);

transition:
transform .35s ease;
}

.gallery-item:hover{

transform:
translateY(-8px);
}

.gallery-item img{

width:100%;
height:100%;

object-fit:cover;

display:block;
}

@keyframes gallery-scroll{

from{
transform:translateX(0);
}

to{
transform:translateX(calc(-50% - 12px));
}
}

/* ==========================================
   CLUB
========================================== */
/* ==========================================
   PATH SECTION (7-й экран) — путь после встречи
========================================== */

.path-section {
   padding: 140px 0 120px;
   background: var(--color-bg);
   overflow: hidden;
}

/* ===== Фоновая подложка ===== */
.path-bg {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   mix-blend-mode: multiply;
   pointer-events: none;
   z-index: 0;
}

@media (max-width: 991px) {
   .path-bg {
      display: none;
   }
}

@media (max-width: 991px) {
   .path-deco { display: none; }
}

/* ===== Заголовок ===== */
.path-header {
   max-width: 820px;
   margin: 0 auto;
   text-align: center;
}

.path-header h2 {
   margin-top: 20px;
   font-size: clamp(2rem, 4vw, 3.2rem);
   font-weight: 800;
   letter-spacing: -0.03em;
   line-height: 1.1;
   color: var(--color-text);
}

.path-subtitle {
   max-width: 600px;
   margin: 24px auto 0;
   font-size: 1.05rem;
   line-height: 1.8;
   color: var(--color-text-soft);
}

.path-decor {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 14px;
   margin-top: 36px;
   color: #9cc4ec;
   font-size: 14px;
}

.path-decor span {
   width: 70px;
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(122, 184, 232, .5), transparent);
}

/* ===== Визуализация ===== */
.path-visual {
   position: relative;
   max-width: 1000px;
   margin: 60px auto 0;
   height: 1200px;
}

/* Линия: рисуется сверху вниз */
.path-line-svg {
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 300px;
   height: 100%;
   overflow: visible;
   clip-path: inset(0 0 100% 0);
   transition: clip-path 3.5s ease;
}

.path-section.visible .path-line-svg {
   clip-path: inset(0 0 0 0);
}

/* ===== Шаг ===== */
.path-step {
   position: absolute;
   top: var(--y);
   left: 50%;
   transform: translate(-50%, -50%);
   width: 100%;
   display: grid;
   grid-template-columns: 1fr 160px 1fr;
   align-items: center;
   opacity: 0;
   transition: opacity .9s ease;
   transition-delay: var(--d, 0s);
}

.path-section.visible .path-step {
   opacity: 1;
}

/* ===== Кружок ===== */
.path-circle {
   grid-column: 2;
   grid-row: 1;
   width: 132px;
   height: 132px;
   margin: 0 auto;
   border-radius: 50%;
   background: #ffffff;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 18px 40px rgba(31, 42, 68, .08);
   position: relative;
   transition: transform .3s ease, box-shadow .3s ease;
}

/* Акварельное пятно позади */
.path-circle::before {
   content: "";
   position: absolute;
   inset: -16px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(122, 184, 232, .28) 0%, rgba(122, 184, 232, 0) 70%);
   z-index: -1;
   filter: blur(4px);
}

.path-circle svg {
   width: 58px;
   height: 58px;
}

.path-step:hover .path-circle {
   transform: scale(1.03);
   box-shadow:
      0 0 0 10px rgba(122, 184, 232, .08),
      0 22px 48px rgba(122, 184, 232, .18);
}

/* ===== Текст ===== */
.path-text {
   grid-row: 1;
   max-width: 320px;
}

.path-step.left .path-text {
   grid-column: 1;
   justify-self: end;
   text-align: right;
}

.path-step.right .path-text {
   grid-column: 3;
   justify-self: start;
   text-align: left;
}

.path-number {
   font-size: .95rem;
   font-weight: 700;
   color: #7ab8e8;
   letter-spacing: .08em;
}

.path-text h3 {
   margin: 10px 0;
   font-size: 1.3rem;
   line-height: 1.3;
   color: #203250;
}

.path-text p {
   margin: 0;
   font-size: .95rem;
   line-height: 1.7;
   color: #64748f;
}

/* ===== Финал ===== */
.path-final {
   margin-top: 70px;
   text-align: center;
   opacity: 0;
   transition: opacity 1s ease 3.8s;
}

.path-section.visible .path-final {
   opacity: 1;
}

.path-final p {
   font-size: 1.05rem;
   line-height: 1.8;
   color: var(--color-text-soft);
}

.path-final-decor {
   margin-top: 28px;
   font-size: 14px;
   letter-spacing: 18px;
   color: #9cc4ec;
   opacity: .7;
}

/* ===== Базовый адаптив (полная мобильная версия — отдельно) ===== */
@media (max-width: 991px) {
   .path-visual {
      height: auto;
      margin-top: 40px;
   }

   .path-line-svg {
      display: none;
   }

   .path-step {
      position: static;
      transform: none;
      grid-template-columns: 1fr;
      justify-items: center;
      text-align: center;
      gap: 18px;
      margin-bottom: 64px;
   }

   .path-step.left .path-text,
   .path-step.right .path-text {
      grid-column: 1;
      justify-self: center;
      text-align: center;
   }
}

/* ==========================================
   FORM
========================================== */

/* ==========================================
   FORM SECTION
========================================== */

.form-section {

    padding: 120px 0 110px;

    background: #f8fbfd;
}

.form-layout {

    display: grid;

    grid-template-columns: 1.1fr 440px;

    gap: 80px;

    align-items: start;
}

/* ==========================================
   LEFT COLUMN
========================================== */

.form-content {

    padding-top: 18px;
}

.form-content h2 {

    margin: 18px 0 24px;

    font-size: clamp(2.8rem,4vw,4rem);

    line-height: 1.05;

    font-weight: 800;

    color: var(--color-text);
}

.form-description {

    max-width: 560px;

    margin-bottom: 42px;

    font-size: 1.1rem;

    line-height: 1.8;

    color: var(--color-text-soft);
}

.form-divider {

    width: 90px;

    height: 2px;

    margin-bottom: 46px;

    background: linear-gradient(
        90deg,
        #58c6f6,
        transparent
    );
}

/* ==========================================
   FEATURES
========================================== */

.form-features {

    display: grid;

    grid-template-columns: repeat(2,1fr);

    gap: 18px;
}

.feature-card {

    display: flex;

    align-items: flex-start;

    gap: 18px;

    padding: 22px;

    background: #ffffff;

    border: 1px solid rgba(31,42,68,.06);

    border-radius: 24px;

    transition: .25s ease;
}

.feature-card:hover {

    transform: translateY(-3px);

    box-shadow: 0 18px 40px rgba(31,42,68,.06);
}

.feature-icon {

    width: 46px;

    height: 46px;

    flex-shrink: 0;

    border-radius: 14px;

    background: #eef8fd;

    display: flex;

    justify-content: center;

    align-items: center;
}

.feature-icon img {

    width: 24px;

    height: 24px;

    object-fit: contain;
}

.feature-content h3 {

    margin-bottom: 6px;

    font-size: 1rem;

    font-weight: 600;

    line-height: 1.3;
}

.feature-content p {

    font-size: .93rem;

    line-height: 1.55;

    color: var(--color-text-soft);
}

/* ==========================================
   FORM BOX
========================================== */

.form-box {

    padding: 42px;

    background: #ffffff;

    border-radius: 32px;

    border: 1px solid rgba(31,42,68,.06);

    box-shadow: 0 28px 70px rgba(31,42,68,.06);
}

.form-box-label {

    display: inline-block;

    margin-bottom: 18px;

    padding: 8px 18px;

    border-radius: 999px;

    background: #eef8fd;

    color: var(--color-primary-dark);

    font-size: .82rem;

    font-weight: 600;
}

.form-box h3 {

    margin-bottom: 12px;

    font-size: 2rem;

    line-height: 1.15;
}

.form-box-text {

    margin-bottom: 34px;

    color: var(--color-text-soft);
}

/* ==========================================
   FORM
========================================== */

#leadForm {

    display: flex;

    flex-direction: column;

    gap: 16px;
}

#leadForm input,
#leadForm select {

    width: 100%;

    height: 58px;

    padding: 0 20px;

    border-radius: 16px;

    border: 1px solid rgba(31,42,68,.08);

    background: #ffffff;

    font-size: 1rem;

    transition: .2s ease;
}

#leadForm input:focus,
#leadForm select:focus {

    outline: none;

    border-color: var(--color-primary);

    box-shadow: 0 0 0 4px rgba(87,197,245,.12);
}

#leadForm button {

    height: 58px;

    margin-top: 8px;

    border: none;

    border-radius: 999px;

    cursor: pointer;

    background: linear-gradient(
        90deg,
        #59c6f6,
        #85d9ff
    );

    color: white;

    font-size: 1rem;

    font-weight: 600;

    transition: .25s ease;
}

#leadForm button:hover {

    transform: translateY(-2px);

    box-shadow: 0 16px 34px rgba(87,197,245,.28);
}

/* ==========================================
   SUCCESS
========================================== */

.form-success {

    display: none;

    margin-top: 22px;

    text-align: center;

    color: var(--color-primary-dark);

    font-weight: 600;
}

.form-success.visible {

    display: block;
}

/* ==========================================
   POLICY
========================================== */

.form-policy {

    margin-top: 24px;

    font-size: .82rem;

    line-height: 1.6;

    color: #8b95a8;
}

.form-policy a {

    color: var(--color-primary-dark);

    text-decoration: underline;
}

/* ==========================================
   CLOSING
========================================== */

.form-closing {

    margin-top: 70px;

    text-align: center;

    font-family: "Caveat", cursive;

    font-size: 2rem;

    color: #5c6d8d;
}

/* ==========================================
   FOOTER
========================================== */

.site-footer {
   padding: 80px 0 40px;
   background: linear-gradient(180deg, #f0f6fa 0%, #f8fbfd 100%);
   border-top: none;
   position: relative;
   overflow: hidden;
}

/* ===== Декоративный разделитель ===== */
.footer-divider {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   margin-bottom: 60px;
}

.divider-leaf {
   font-size: 1.2rem;
   opacity: 0.5;
}

.divider-line {
   width: 80px;
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(87, 197, 245, 0.2), transparent);
}

.divider-circle {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: rgba(87, 197, 245, 0.15);
   border: 1px solid rgba(87, 197, 245, 0.2);
}

/* ===== Верхняя подпись ===== */
.footer-greeting {
   text-align: center;
   margin-bottom: 50px;
}

.footer-greeting p {
   font-size: 1.1rem;
   font-weight: 400;
   color: var(--color-text-soft);
   line-height: 1.7;
   max-width: 600px;
   margin: 0 auto;
}

/* ===== Сетка ===== */
.footer-grid {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 40px;
   max-width: 800px;
   margin: 0 auto 50px;
}

.footer-col h4 {
   font-size: 1rem;
   font-weight: 700;
   color: var(--color-text);
   margin-bottom: 16px;
   letter-spacing: -0.01em;
}

.footer-col ul {
   list-style: none;
   padding: 0;
   margin: 0;
}

.footer-col ul li {
   font-size: 0.95rem;
   line-height: 2;
   color: var(--color-text-soft);
}

.footer-col ul li a {
   color: var(--color-text-soft);
   transition: color 0.2s ease;
}

.footer-col ul li a:hover {
   color: var(--color-text);
}

.footer-note {
   font-size: 0.85rem !important;
   color: #8b95a8 !important;
   margin-top: 4px;
}

.footer-community {
   font-size: 0.95rem;
   line-height: 1.6;
   color: var(--color-text-soft);
   margin-bottom: 12px;
}

.footer-community-link {
   font-size: 0.95rem;
   font-weight: 600;
   color: var(--color-primary-dark);
   text-decoration: none;
   transition: all 0.2s ease;
}

.footer-community-link:hover {
   color: var(--color-text);
}

/* ===== Тонкая линия ===== */
.footer-separator {
   max-width: 200px;
   margin: 0 auto 40px;
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(87, 197, 245, 0.1), transparent);
}

/* ===== Философия ===== */
.footer-philosophy {
   text-align: center;
   margin-bottom: 30px;
}

.footer-philosophy p {
   font-size: 0.95rem;
   font-weight: 400;
   color: var(--color-text-soft);
   letter-spacing: 0.02em;
}

/* ===== Юридическое ===== */
.footer-legal {
   text-align: center;
   margin-bottom: 30px;
}

.footer-legal a {
   font-size: 0.8rem;
   color: #8b95a8;
   text-decoration: none;
   transition: color 0.2s ease;
}

.footer-legal a:hover {
   color: var(--color-text);
}

.legal-dot {
   margin: 0 12px;
   color: #b0b8c8;
}

/* ===== Финальная фраза ===== */
.footer-final {
   text-align: center;
   margin-bottom: 20px;
}

.footer-final p {
   font-size: 1.3rem;
   font-weight: 500;
   color: var(--color-text);
   line-height: 1.4;
   letter-spacing: -0.01em;
}

/* ===== Микро-подпись ===== */
.footer-micro {
   text-align: center;
   margin-bottom: 20px;
}

.footer-micro p {
   font-size: 0.85rem;
   color: #8b95a8;
}

/* ===== Команда ===== */
.footer-team {
   text-align: center;
}

.footer-team p {
   font-size: 0.95rem;
   font-weight: 400;
   color: var(--color-text-soft);
   line-height: 1.6;
}

/* ==========================================
   ДЕКОРАТИВНЫЕ ЭЛЕМЕНТЫ (лента + веточка)
========================================== */

/* Лента из Hero (в левом углу) */
.site-footer::before {
   content: '';
   position: absolute;
   left: -60px;
   bottom: -40px;
   width: 300px;
   height: 120px;
   background: linear-gradient(135deg, 
      rgba(87, 197, 245, 0.03) 0%,
      rgba(87, 197, 245, 0.06) 40%,
      rgba(87, 197, 245, 0.02) 100%
   );
   border-radius: 50% 50% 0 0;
   transform: rotate(-15deg);
   pointer-events: none;
   z-index: 0;
}

/* Веточка сакуры (в правом углу) */
.site-footer::after {
   content: '🌸';
   position: absolute;
   right: 30px;
   bottom: 30px;
   font-size: 40px;
   opacity: 0.15;
   transform: rotate(10deg);
   pointer-events: none;
   z-index: 0;
}

/* ==========================================
   АДАПТИВ
========================================== */

@media (max-width: 991px) {
   .footer-grid {
      grid-template-columns: 1fr 1fr;
      gap: 30px;
   }
}

@media (max-width: 767px) {
   .site-footer {
      padding: 50px 0 30px;
   }

   .footer-divider {
      margin-bottom: 40px;
   }

   .footer-greeting p {
      font-size: 1rem;
   }

   .footer-grid {
      grid-template-columns: 1fr;
      gap: 30px;
      text-align: center;
   }

   .footer-col h4 {
      margin-bottom: 10px;
   }

   .footer-col ul li {
      line-height: 1.8;
   }

   .footer-final p {
      font-size: 1.1rem;
   }

   .site-footer::before {
      width: 200px;
      height: 80px;
      left: -40px;
      bottom: -30px;
   }

   .site-footer::after {
      font-size: 30px;
      right: 15px;
      bottom: 15px;
   }
}