/* ==========================================================================
   ShaybaGol - Premium Dark Landing Page
   ========================================================================== */

/* Custom Scrollbar */
html::-webkit-scrollbar{width:12px}
html::-webkit-scrollbar-track{background:#0a0a0d}
html::-webkit-scrollbar-thumb{background:#1a1a20;border-radius:6px}
html::-webkit-scrollbar-thumb:hover{background:#2a2a35}
body::-webkit-scrollbar{width:12px}
body::-webkit-scrollbar-track{background:#0a0a0d}
body::-webkit-scrollbar-thumb{background:#1a1a20;border-radius:6px}
body::-webkit-scrollbar-thumb:hover{background:#2a2a35}
*:where(html,body)::-webkit-scrollbar{width:12px}
*:where(html,body)::-webkit-scrollbar-track{background:#0a0a0d}
*:where(html,body)::-webkit-scrollbar-thumb{background:#1a1a20;border-radius:6px}
*:where(html,body)::-webkit-scrollbar-thumb:hover{background:#2a2a35}
html{scrollbar-width:thin;scrollbar-color:#1a1a20 #0a0a0d}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-padding-top:65px;width:100%;overflow-x:hidden}
body{font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#000000;color:#c8c8d0;line-height:1.7;font-size:16px;overflow-x:hidden;max-width:100%}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.rubik-glitch-font{font-family:'Rubik Glitch',cursive}
.yanone-kaffeesatz-font{font-family:'Yanone Kaffeesatz','Inter',sans-serif;letter-spacing:.02em}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
.section-title{font-family:'Unbounded',sans-serif;font-size:clamp(1.75rem,4vw,4rem);font-weight:800;text-align:center;margin:0 auto 16px;letter-spacing:-.02em;color:#c0c0c0;position:relative;display:block}
.section-title .gradient-text{background:none;-webkit-background-clip:unset;-webkit-text-fill-color:unset;background-clip:unset;color:#98fb98}
.hero .gradient-text{background:none;-webkit-background-clip:unset;-webkit-text-fill-color:unset;background-clip:unset;color:#98fb98}
.section-subtitle{text-align:center;color:#8888a0;font-size:1.05rem;max-width:600px;margin:0 auto 48px}

/* HEADER */
.header{
    position:fixed;
    top:20px;
    left:50%;
    transform:translateX(-50%);
    z-index:1000;
    background:rgba(255, 255, 255, 0.06);
    backdrop-filter:blur(30px) saturate(1.8) brightness(1.08);
    -webkit-backdrop-filter:blur(30px) saturate(1.8) brightness(1.08);
    box-shadow:
        0 8px 32px rgba(0,0,0,0.4),
        0 2px 8px rgba(0,0,0,0.25),
        inset 0 1px 1px rgba(255,255,255,0.3),
        inset 0 -1px 1px rgba(0,0,0,0.12);
    border-radius:20px;
    width:92%;
    max-width:1200px;
    border:1px solid rgba(255,255,255,0.12);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
    padding:0 20px;
    cursor: default;
}

/* Состояние "раскрытия" (полное меню) */
.header.expanded{
    top:20px;
    width:92%;
    border-radius:20px;
    background:rgba(255, 255, 255, 0.06);
    backdrop-filter:blur(30px) saturate(1.8) brightness(1.08);
    -webkit-backdrop-filter:blur(30px) saturate(1.8) brightness(1.08);
    border:1px solid rgba(255,255,255,0.12);
    box-shadow:
        0 8px 32px rgba(0,0,0,0.4),
        0 2px 8px rgba(0,0,0,0.25),
        inset 0 1px 1px rgba(255,255,255,0.3),
        inset 0 -1px 1px rgba(0,0,0,0.12);
    padding:0 20px;
    cursor: default;
    transform:translateX(-50%) scale(1);
}

/* Состояние "капсулы" (когда скроллим вниз) — Apple Liquid Glass 3D */
.header.dynamic-pill{
    width: auto;
    min-width: 70px;
    max-width: auto;
    top:15px;
    border-radius:50px;
    background:rgba(255, 255, 255, 0.07) !important;
    backdrop-filter:blur(30px) saturate(1.8) brightness(1.08);
    -webkit-backdrop-filter:blur(30px) saturate(1.8) brightness(1.08);
    padding:6px 8px;
    transform:translateX(-50%) scale(0.7);
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-start;
    cursor: pointer;
    overflow: hidden;
    will-change: transform, border-radius;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
    border:1px solid rgba(255,255,255,0.15);
    box-shadow:
        0 10px 40px rgba(0,0,0,0.45),
        0 4px 12px rgba(0,0,0,0.3),
        inset 0 1px 1px rgba(255,255,255,0.4),
        inset 0 -1px 1px rgba(0,0,0,0.15),
        inset 0 0 24px rgba(255,255,255,0.04);
}

/* Liquid Glass: верхний блик — преломление света (3D-объём) */
.header.dynamic-pill::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:50px;
    background:linear-gradient(
        180deg,
        rgba(255,255,255,0.2) 0%,
        rgba(255,255,255,0.06) 35%,
        rgba(255,255,255,0) 55%
    );
    pointer-events:none;
    z-index:1;
    transition:opacity 0.4s ease, border-radius 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Liquid Glass: боковая подсветка + нижняя тень (3D-глубина) */
.header.dynamic-pill::after{
    content:'';
    position:absolute;
    inset:1px;
    border-radius:50px;
    background:radial-gradient(
        ellipse 80% 60% at 30% 0%,
        rgba(255,255,255,0.14) 0%,
        rgba(255,255,255,0) 50%
    );
    box-shadow:inset 0 -2px 8px rgba(0,0,0,0.12);
    pointer-events:none;
    z-index:1;
    transition:opacity 0.4s ease, border-radius 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* В капсуле header-content тоже должен быть слева */
.header.dynamic-pill .header-content{
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 0 !important;
    height: auto;
    gap: 40px !important;
}

.header.dynamic-pill .container{
    padding: 0 !important;
    width: 100%;
}

.header.dynamic-pill .logo{
    margin: 0 !important;
    padding: 0 !important;
}

.header.dynamic-pill .pill-section-label{
    margin: 0 !important;
    padding: 0 !important;
}

.header.dynamic-pill:hover{
    background:rgba(255, 255, 255, 0.13) !important;
    border-color:rgba(255,255,255,0.25);
    box-shadow:
        0 14px 50px rgba(0,0,0,0.5),
        0 6px 16px rgba(0,0,0,0.35),
        inset 0 1px 1px rgba(255,255,255,0.55),
        inset 0 -1px 1px rgba(0,0,0,0.18),
        inset 0 0 32px rgba(255,255,255,0.07);
}

/* Когда капсула раскрыта — показываем полный header (liquid glass) */
.header.dynamic-pill.header-expanded{
    width:92%;
    border-radius:20px;
    background:rgba(255, 255, 255, 0.06) !important;
    backdrop-filter:blur(30px) saturate(1.8) brightness(1.08);
    -webkit-backdrop-filter:blur(30px) saturate(1.8) brightness(1.08);
    padding:0 20px;
    transform:translateX(-50%) scale(1);
    cursor: default;
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.12);
    box-shadow:
        0 8px 32px rgba(0,0,0,0.4),
        0 2px 8px rgba(0,0,0,0.25),
        inset 0 1px 1px rgba(255,255,255,0.3),
        inset 0 -1px 1px rgba(0,0,0,0.12);
}

/* Псевдоэлементы в раскрытом состоянии — мягче */
.header.dynamic-pill.header-expanded::before{
    border-radius:20px;
    opacity:0.5;
}
.header.dynamic-pill.header-expanded::after{
    border-radius:20px;
    opacity:0.4;
}

.header.dynamic-pill.header-expanded .pill-section-label{
    display: none;
}

/* Текстовый индикатор текущей секции (для капсулы) */
.pill-section-label{
    font-size: 1.2rem;
    color: rgb(255, 255, 255);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: auto;
    opacity: 0;
    transition: opacity 0.4s ease;
    letter-spacing: 0.02em;
    pointer-events: none;
}

/* "Жидкий" морф капсулы при смене секции — как Apple Dynamic Island */
@keyframes pillLiquidMorph{
    0%   { transform: translateX(-50%) scale(0.7);                    border-radius: 50px; }
    14%  { transform: translateX(-50%) scaleX(0.38) scaleY(0.82);     border-radius: 26px; }
    32%  { transform: translateX(-50%) scaleX(0.95) scaleY(0.60);     border-radius: 56px; }
    50%  { transform: translateX(-50%) scaleX(0.78) scaleY(0.76);     border-radius: 42px; }
    66%  { transform: translateX(-50%) scaleX(0.86) scaleY(0.66);     border-radius: 52px; }
    82%  { transform: translateX(-50%) scaleX(0.72) scaleY(0.74);     border-radius: 47px; }
    100% { transform: translateX(-50%) scale(0.7);                    border-radius: 50px; }
}

.header.dynamic-pill.pill-bounce{
    animation: pillLiquidMorph 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Появление текста секции с blur-переходом — контент "проявляется" из капсулы */
@keyframes pillLabelReveal{
    0%   { opacity: 0; transform: translateY(6px) scaleX(0.6); filter: blur(6px); }
    35%  { opacity: 0; transform: translateY(6px) scaleX(0.6); filter: blur(6px); }
    65%  { opacity: 1; transform: translateY(0)   scaleX(1);   filter: blur(0);   }
    100% { opacity: 1; transform: translateY(0)   scaleX(1);   filter: blur(0);   }
}

.header.dynamic-pill.pill-bounce .pill-section-label{
    animation: pillLabelReveal 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.header.dynamic-pill .pill-section-label{
    opacity: 1;
}

/* Скрываем всё кроме логотипа и текстового индикатора в режиме капсулы */
.header.dynamic-pill .logo-wrapper{
    display: none !important;
}
.header.dynamic-pill .nav-menu{
    display: none !important;
}
.header.dynamic-pill .burger-menu{
    display: none !important;
}

/* Логотип в капсуле - прижат к левому краю */
.header.dynamic-pill .logo{
    display: flex !important;
    justify-content: flex-start;
    align-items: center;
    flex-shrink: 0;
    margin-left: 0;
    padding-left: 0;
}

.header.dynamic-pill .logo-icon{
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.header.dynamic-pill .logo-img{
    width:50px !important;
    height:50px !important;
    margin: 0;
    display: block !important;
    border-radius: 50% !important;
}

/* Состояние скролла (уменьшенный, но не капсула) */
.header.scrolled{
    top:10px;
    background:rgba(255, 255, 255, 0.05);
    backdrop-filter:blur(30px) saturate(1.8) brightness(1.08);
    -webkit-backdrop-filter:blur(30px) saturate(1.8) brightness(1.08);
    box-shadow:
        0 4px 30px rgba(0,0,0,0.5),
        inset 0 1px 1px rgba(255,255,255,0.25),
        inset 0 -1px 1px rgba(0,0,0,0.1);
    border-color:rgba(255,255,255,0.1);
}

.header.dynamic-pill .pill-section-label{
    opacity: 1;
}

/* Мобильные устройства — горизонтальная капсула (как Dynamic Island) */
@media(max-width:768px){
  .header.dynamic-pill{
    padding: 2px 4px !important;
    gap: 10px !important;
    transform: translateX(-50%) scale(1);
    border-radius: 24px !important;
    max-width: 90vw !important;
    min-height: 0 !important;
  }
  .header.dynamic-pill .header-content{
    gap: 10px !important;
    height: auto !important;
    padding: 0 !important;
  }
  .header.dynamic-pill .container{
    padding: 0 !important;
  }
  .header.dynamic-pill .logo-img{
    width: 40px !important;
    height: 40px !important;
  }
  .pill-section-label{
    font-size: 1rem !important;
    letter-spacing: 0.01em;
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: nowrap !important;
    max-width: 120px !important;
  }
  /* Мобильный "жидкий" морф */
  .header.dynamic-pill.pill-bounce{
    animation: pillLiquidMorphMobile 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .header.dynamic-pill.pill-bounce .pill-section-label{
    animation: pillLabelReveal 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  @keyframes pillLiquidMorphMobile{
      0%   { transform: translateX(-50%) scale(1);                border-radius: 24px; }
      14%  { transform: translateX(-50%) scaleX(0.6)  scaleY(1.18); border-radius: 14px; }
      32%  { transform: translateX(-50%) scaleX(1.22) scaleY(0.82); border-radius: 30px; }
      50%  { transform: translateX(-50%) scaleX(0.92) scaleY(1.08); border-radius: 20px; }
      66%  { transform: translateX(-50%) scaleX(1.06) scaleY(0.92); border-radius: 26px; }
      82%  { transform: translateX(-50%) scaleX(0.97) scaleY(1.03); border-radius: 23px; }
      100% { transform: translateX(-50%) scale(1);                border-radius: 24px; }
  }
}


.header-content{display:flex;align-items:center;justify-content:space-between;height:64px;position:relative;z-index:2;padding:0 20px;transition:height .4s ease}
.header.scrolled .header-content{height:50px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;transition:gap .4s ease}
.logo-wrapper{display:flex;flex-direction:column;line-height:1.2;transition:all .4s ease}
.logo-text{font-size:1.3rem;color:#fff;letter-spacing:.02em;transition:font-size .4s ease}
.logo-slogan{font-size:.7rem;color:#6c6c8a;margin-top:2px;font-weight:500;transition:font-size .4s ease, opacity .4s ease}
.logo-img{width:36px;height:36px;border-radius:10px;transition:width .4s ease, height .4s ease, border-radius .4s ease}
.header.scrolled .logo-img{width:30px;height:30px;border-radius:8px}
.header.scrolled .logo-text{font-size:1.1rem}
.header.scrolled .logo-slogan{font-size:.6rem;opacity:.7}
.header.scrolled .logo{gap:8px}
.nav-menu{display:flex;gap:4px;align-items:center}
.nav-menu a{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:10px;font-size:.875rem;color:#9999b0;transition:color .25s,background .25s}
.nav-menu a:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav-menu a i{font-size:.8rem;opacity:.6}
.burger-menu{display:none;flex-direction:column;gap:5px;padding:8px;width:36px;height:36px;justify-content:center;align-items:center;border-radius:10px;transition:all .25s;background:rgba(0, 0, 0, 0.4);border:1px solid rgba(192, 192, 192, 0.15)}
.burger-menu:hover{background:rgba(0, 0, 0, 0.4);border-color:rgba(192,192,192,.6)}
.burger-menu span{display:block;width:22px;height:2px;background:linear-gradient(90deg,#c8c8d0,#e0e0e8);border-radius:3px;transition:all .3s}
.burger-menu.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.burger-menu.active span:nth-child(2){opacity:0;transform:translateX(-8px)}
.burger-menu.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* HERO */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:120px 24px 80px;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(192,192,192,.12) 0%,transparent 60%),radial-gradient(ellipse 60% 50% at 80% 20%,rgba(169,169,169,.08) 0%,transparent 50%),radial-gradient(ellipse 60% 50% at 20% 80%,rgba(211,211,211,.06) 0%,transparent 50%);z-index:0}
.hero::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(228, 228, 228, 0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(228, 228, 228, 0.05) 1px,transparent 1px);background-size:64px 64px;z-index:0;mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,black 20%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,black 20%,transparent 70%)}
.hero .container{position:relative;z-index:2}

/* Плавающие иконки */
.floating-icons{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.float-icon{position:absolute;font-size:clamp(1.2rem,2.5vw,2.5rem);opacity:0.25;color:#c5c5c5;will-change:transform;--parallax-x:0;--parallax-y:0;animation:floatBase 6s ease-in-out infinite;filter:blur(0.5px)}

@keyframes floatBase{0%,100%{transform:translate(calc(var(--parallax-x)), calc(var(--parallax-y))) rotate(0deg)}50%{transform:translate(calc(var(--parallax-x)), calc(-20px + var(--parallax-y))) rotate(5deg)}}

/* Уменьшаем иконки на мобильных */
@media(max-width: 768px){
  .float-icon{opacity:0.08;font-size:clamp(1.2rem,2.5vw,2rem)}
}
.hero-logo{margin-bottom:32px}
.logo-image{width:120px;height:120px;margin:0 auto;border-radius:28px;box-shadow:0 0 60px rgba(192,192,192,.2),0 0 120px rgba(169,169,169,.1);animation:heroLogoGlow 4s ease-in-out infinite alternate}
@keyframes heroLogoGlow{0%{box-shadow:0 0 60px rgba(192,192,192,.2),0 0 120px rgba(169,169,169,.1)}100%{box-shadow:0 0 80px rgba(192,192,192,.3),0 0 160px rgba(169,169,169,.15)}}
.hero h1{font-size:clamp(1.6rem,5vw,6.5rem);font-weight:500;color:#fff;letter-spacing:-.03em;line-height:1.15;margin-bottom:16px;position:relative}
.hero-title-echo{position:absolute;top:12px;left:8px;font-size:clamp(1.6rem,5vw,6.5rem);color:rgba(255,255,255,0.15);pointer-events:none;opacity:0;animation:revealUp .8s .25s cubic-bezier(.4,0,.2,1) forwards;text-shadow:0 0 20px rgba(255,255,255,0.1)}
@media(max-width: 768px){
  .hero-title-echo{top:8px;left:6px}
}
@media(max-width: 480px){
  .hero-title-echo{top:6px;left:4px;font-size:clamp(1.4rem,4.5vw,4.5rem)}
}
.hero-subtitle{font-size:clamp(1.1rem,3vw,1.4rem);color:#a0a0b8;margin-bottom:32px;font-weight:400}
.hero-stats-preview{display:flex;align-items:center;justify-content:center;gap:32px;margin-bottom:40px;padding:20px 32px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:16px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);max-width:1200px;margin-left:auto;margin-right:auto}
.hero-stat-item{display:flex;flex-direction:column;align-items:center;gap:4px}
.hero-stat-item:nth-child(1) .hero-stat-value{background:linear-gradient(90deg,#FCFCFC 0%,#1F1F1F 100%);background-size:400% 100%;background-position:0% 0%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-stat-item:nth-child(2) .hero-stat-value{background:linear-gradient(90deg,#FCFCFC 0%,#1F1F1F 100%);background-size:400% 100%;background-position:33% 0%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-stat-item:nth-child(3) .hero-stat-value{background:linear-gradient(90deg,#FCFCFC 0%,#1F1F1F 100%);background-size:400% 100%;background-position:66% 0%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-stat-item:nth-child(4) .hero-stat-value{background:linear-gradient(90deg,#FCFCFC 0%,#1F1F1F 100%);background-size:400% 100%;background-position:100% 0%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-stat-value{font-size:1.8rem;font-weight:800;letter-spacing:-.03em;margin-bottom:4px}
.hero-stat-label{font-size:.85rem;color:#6c6c8a;text-transform:uppercase;letter-spacing:.05em}

/* Hero Badges */
.hero-badges{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:32px;flex-wrap:wrap}
.hero-badge{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:12px;font-size:.82rem;font-weight:600;background:linear-gradient(90deg,rgba(60,60,65,.3),rgba(10,10,12,.7));border:1px solid rgba(255,255,255,.06);box-shadow:0 4px 16px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.02),inset 0 -1px 0 rgba(0,0,0,.3);color:rgba(245,245,245,.9);backdrop-filter:blur(15px) saturate(150%);-webkit-backdrop-filter:blur(15px) saturate(150%);transition:all .3s}
.hero-badge i{color:#c0c0c0;font-size:.95rem;text-shadow:0 1px 1px rgba(255,255,255,.2)}
.hero-badge:hover{background:linear-gradient(90deg,rgba(70,70,75,.35),rgba(15,15,18,.75));border-color:rgba(255,255,255,.1);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04),inset 0 -1px 0 rgba(0,0,0,.35)}
.hero-badge:hover i{color:#e0e0e0;transform:scale(1.1);text-shadow:0 1px 2px rgba(255,255,255,.3)}

.hero-badge-highlight{background:linear-gradient(180deg,rgba(255,255,255,.85) 0%,rgba(235,235,240,.7) 50%,rgba(220,220,225,.6) 100%);border:1px solid rgba(0,0,0,.12);box-shadow:0 4px 16px rgba(0,0,0,.12),inset 0 2px 4px rgba(255,255,255,.95),inset 0 -2px 3px rgba(0,0,0,.08);color:#252528;backdrop-filter:blur(25px) saturate(200%);-webkit-backdrop-filter:blur(25px) saturate(200%)}
.hero-badge-highlight i{color:#0a0a0a}
.hero-badge-highlight:hover{background:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(240,240,245,.75) 50%,rgba(225,225,230,.65) 100%);box-shadow:0 6px 20px rgba(0,0,0,.15),inset 0 2px 4px rgba(255,255,255,1);transform:translateY(-2px)}
.hero-badge-highlight:hover i{color:#000000}

@media(max-width: 768px){
  .hero-badges{display:grid;grid-template-columns:max-content max-content;grid-auto-flow:column;grid-template-rows:repeat(3,max-content);gap:6px 12px;margin-bottom:20px;justify-content:center}
  .hero-badge{padding:5px 8px;font-size:.72rem;white-space:nowrap;align-items:center;gap:6px}
  .hero-badge i{font-size:.8rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
}

@media(max-width: 600px){
  .hero-badges{gap:8px;margin-bottom:18px}
  .hero-badge{padding:7px 12px;font-size:.8rem;align-items:center}
  .hero-badge i{font-size:.78rem;display:flex;align-items:center;justify-content:center}
}

@media(max-width: 480px){
  .hero-badges{gap:6px;margin-bottom:16px;flex-wrap:wrap}
  .hero-badge{padding:6px 11px;font-size:.75rem;white-space:normal;align-items:center}
  .hero-badge i{font-size:.72rem;display:flex;align-items:center;justify-content:center;margin-top:0}
  .hero-badge-highlight{padding:6px 11px}
}

@media(max-width: 375px){
  .hero-badges{gap:6px;margin-bottom:14px;justify-content:center}
  .hero-badge{padding:6px 10px;font-size:.7rem;white-space:normal;align-items:center}
  .hero-badge i{font-size:.68rem;display:flex;align-items:center;justify-content:center}
  .hero-badge span{font-size:.68rem;display:block;text-align:center}
}

.cta-button{display:inline-flex;align-items:center;gap:10px;padding:16px 36px;border-radius:36px;font-size:1.05rem;font-weight:600;background:rgba(255,255,255,0.07);color:rgba(245,245,245,.95);border:1px solid rgba(255,255,255,0.15);box-shadow:0 10px 40px rgba(0,0,0,0.45),0 4px 12px rgba(0,0,0,0.3),inset 0 1px 1px rgba(255,255,255,0.4),inset 0 -1px 1px rgba(0,0,0,0.15),inset 0 0 24px rgba(255,255,255,0.04);transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;backdrop-filter:blur(30px) saturate(1.8) brightness(1.08);-webkit-backdrop-filter:blur(30px) saturate(1.8) brightness(1.08)}
.hero .cta-button{margin-top:60px}
.cta-button:hover{background:rgba(255,255,255,0.13);box-shadow:0 14px 50px rgba(0,0,0,0.5),0 6px 16px rgba(0,0,0,0.35),inset 0 1px 1px rgba(255,255,255,0.55),inset 0 -1px 1px rgba(0,0,0,0.18),inset 0 0 32px rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.25);transform:translateY(-3px)}
.cta-button:active{transform:translateY(0);box-shadow:0 4px 16px rgba(0,0,0,0.6),inset 0 1px 1px rgba(255,255,255,0.25),inset 0 -1px 1px rgba(0,0,0,0.2),inset 0 0 16px rgba(255,255,255,0.03)}
.cta-button i{font-size:1.15rem;color:#229ED9}
.cta-button:hover i{color:#1a7bb9}

/* ABOUT */
.about{padding:60px 0}
.about-content{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.about-content p{font-size:1.05rem;color:#9999b0;text-align:center;line-height:1.8}

/* FEATURES */
.features{padding:60px 0}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;perspective:1000px}
.feature-card{position:relative;padding:32px 28px;border-radius:20px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);overflow:hidden;text-align:center;transform-style:preserve-3d;--mouse-x:50%;--mouse-y:50%;transition:transform .05s ease-out,box-shadow .3s ease,border-color .3s ease}
.feature-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(192,192,192,.5),transparent);opacity:0;transition:opacity .4s}
.feature-card::after{content:'';position:absolute;inset:0;border-radius:20px;background:radial-gradient(ellipse 80% 80% at var(--mouse-x) var(--mouse-y),rgba(192,192,192,.15),rgba(169,169,169,.1) 40%,transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none;z-index:0}
.feature-card:hover{border-color:rgba(192,192,192,.35);box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 80px rgba(192,192,192,.12),0 0 120px rgba(192,192,192,.06),inset 0 0 60px rgba(192,192,192,.05)}
.feature-card:hover::before{opacity:1}
.feature-card:hover::after{opacity:1}
.feature-card > *{position:relative;z-index:1}
.feature-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(192,192,192,.15),rgba(169,169,169,.15));margin:0 auto 20px;font-size:1.25rem;color:#C0C0C0;transition:transform .3s,box-shadow .3s;box-shadow:0 0 20px rgba(192,192,192,.1)}
.feature-card:hover .feature-icon{transform:translateZ(40px) scale(1.1);box-shadow:0 0 30px rgba(192,192,192,.25),0 0 60px rgba(192,192,192,.15)}
.feature-title{font-size:1.1rem;font-weight:600;margin-bottom:10px;color:#229ED9}
.feature-title .gradient-text{background:none;-webkit-background-clip:unset;-webkit-text-fill-color:unset;background-clip:unset;color:#229ED9}
.feature-desc{font-size:.9rem;color:#8888a0;line-height:1.7}
.feature-toggle{display:none;margin-top:12px;padding:6px 14px;border-radius:8px;font-size:.8rem;color:#C0C0C0;background:rgba(192,192,192,.08);border:1px solid rgba(192,192,192,.15)}
.feature-toggle:hover{color:#E0E0E0;background:rgba(192,192,192,.12);border-color:rgba(192,192,192,.25)}
.feature-collapsible .feature-desc{display:none}
.feature-collapsible.is-expanded .feature-desc{display:block}

/* Принудительно скрываем кнопки на экранах шире 480px */
@media(min-width:481px){.feature-toggle{display:none!important}}

/* LEAGUES */
.leagues{padding:60px 0}
.leagues-subtitle{font-size:1.3rem;font-weight:600;color:#d0d0e0;margin:48px 0 24px;text-align:center}
/* .leagues-subtitle.hockey span{background:linear-gradient(135deg,#87CEFA,#4682B4,#AFF3FF);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} */
/* .leagues-subtitle.football span{background:linear-gradient(135deg,#10B981,#22D3EE,#10B981);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} */
.leagues-subtitle:first-of-type{margin-top:24px}

/* Табы */
.leagues-tabs{display:flex;justify-content:center;gap:12px;margin:32px 0 24px}
.leagues-tab{display:flex;align-items:center;gap:8px;padding:12px 24px;border-radius:20px;font-size:.95rem;font-weight:600;transition:all .3s ease;background:rgba(255,255,255,0.06);backdrop-filter:blur(30px) saturate(1.8) brightness(1.08);-webkit-backdrop-filter:blur(30px) saturate(1.8) brightness(1.08);border:1px solid rgba(255,255,255,0.12);color:#a0a0b8;box-shadow:0 4px 16px rgba(0,0,0,0.25),inset 0 1px 1px rgba(255,255,255,0.25),inset 0 -1px 1px rgba(0,0,0,0.08)}
.leagues-tab:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.2);color:#c8c8d8;box-shadow:0 8px 24px rgba(0,0,0,0.3),inset 0 1px 1px rgba(255,255,255,0.4),inset 0 -1px 1px rgba(0,0,0,0.1)}
.leagues-tab.active[data-tab="hockey"]{background:rgba(135,206,250,0.12);backdrop-filter:blur(30px) saturate(1.8) brightness(1.08);-webkit-backdrop-filter:blur(30px) saturate(1.8) brightness(1.08);border-color:rgba(135,206,250,0.35);color:#fff;box-shadow:0 8px 32px rgba(0,0,0,0.35),0 0 20px rgba(135,206,250,0.2),inset 0 1px 1px rgba(255,255,255,0.45),inset 0 -1px 1px rgba(0,0,0,0.1),inset 0 0 20px rgba(135,206,250,0.06)}
.leagues-tab.active[data-tab="football"]{background:rgba(16,185,129,0.12);backdrop-filter:blur(30px) saturate(1.8) brightness(1.08);-webkit-backdrop-filter:blur(30px) saturate(1.8) brightness(1.08);border-color:rgba(16,185,129,0.35);color:#fff;box-shadow:0 8px 32px rgba(0,0,0,0.35),0 0 20px rgba(16,185,129,0.2),inset 0 1px 1px rgba(255,255,255,0.45),inset 0 -1px 1px rgba(0,0,0,0.1),inset 0 0 20px rgba(16,185,129,0.06)}
.leagues-tab i{font-size:.9rem}

/* Контент табов */
.leagues-content{position:relative}
.leagues-slide{display:none;opacity:0;transition:opacity .4s ease}
.leagues-slide.active{display:block;opacity:1}

/* Слайдер для мобильных */
.leagues-slider-container{position:relative;overflow:visible}
.leagues-slider{display:flex;transition:transform .4s cubic-bezier(.4,0,.2,1)}
.leagues-slide{min-width:100%;flex-shrink:0}

.leagues-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.leagues-grid.football{margin-top:20px}
.league-card{position:relative;padding:28px;border-radius:20px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);transition:all .4s cubic-bezier(.4,0,.2,1);overflow:hidden;text-align:center}
.league-card::after{content:'';position:absolute;inset:0;border-radius:20px;background:radial-gradient(ellipse at 50% 0%,rgba(79,124,255,.06),transparent 70%);opacity:0;transition:opacity .4s;pointer-events:none}
.league-card:hover{background:rgba(255,255,255,.04);border-color:rgba(79,124,255,.12);transform:translateY(-4px);box-shadow:0 8px 40px rgba(0,0,0,.3)}
.league-card:hover::after{opacity:1}
.glow-effect{display:none}
.league-card-header{display:flex;align-items:center;gap:14px;margin-bottom:14px;justify-content:center}
.league-logo{width:48px;height:48px;border-radius:12px;transition:transform .3s}
.league-card:hover .league-logo{transform:scale(1.08)}
.league-name{font-size:1.15rem;font-weight:700;color:#e8e8f0}
.league-desc{font-size:.88rem;color:#8888a0;line-height:1.65}

/* Футбольные карточки — анимации */
.leagues-grid.football .league-card{
  position:relative;
  overflow:hidden;
}

/* Пульсирующий градиент фона — только при hover */
.leagues-grid.football .league-card::before{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:20px;
  background:linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(34, 211, 238, 0.08), rgba(16, 185, 129, 0.08));
  background-size:200% 200%;
  opacity:0;
  transition:opacity .5s ease;
  z-index:0;
  pointer-events:none;
}

.leagues-grid.football .league-card:hover::before{
  opacity:0.9;
  animation:pulseGradient 4s ease-in-out infinite;
}

@keyframes pulseGradient{
  0%, 100%{
    background-position:0% 50%;
    opacity:0.4;
  }
  50%{
    background-position:100% 50%;
    opacity:0.6;
  }
}
  
/* Граница при hover с усиленным свечением */
.leagues-grid.football .league-card{
  position:relative;
  z-index:1;
}

.leagues-grid.football .league-card:hover{
  border-color:transparent;
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(16, 185, 129, 0.3),
    0 0 60px rgba(34, 211, 238, 0.2),
    inset 0 0 20px rgba(16, 185, 129, 0.1);
}

.leagues-grid.football .league-card:hover .glow-effect{
  opacity:1;
  animation:glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse{
  0%, 100%{
    box-shadow:
      0 0 20px rgba(16, 185, 129, 0.4),
      0 0 40px rgba(34, 211, 238, 0.3),
      0 0 60px rgba(16, 185, 129, 0.2);
  }
  50%{
    box-shadow:
      0 0 30px rgba(16, 185, 129, 0.6),
      0 0 50px rgba(34, 211, 238, 0.4),
      0 0 70px rgba(16, 185, 129, 0.3);
  }
}
  
/* Граница с градиентом при hover */
.leagues-grid.football .league-card:hover .league-card-header{
  position:relative;
}

.leagues-grid.football .league-card:hover .league-card-header::before{
  content:'';
  position:absolute;
  bottom:-2px;
  left:20%;
  right:20%;
  height:2px;
  background:linear-gradient(90deg, transparent, #10B981, #22D3EE, #10B981, transparent);
  background-size:200% 100%;
  animation:shimmerBorder 2s linear infinite;
}

@keyframes shimmerBorder{
  0%{
    background-position:-200% 0;
  }
  100%{
    background-position:200% 0;
  }
}

/* Пульсация иконок при наведении на карточку */
.leagues-grid.football .league-card:hover .league-logo{
  transform:scale(1.12);
  animation:logoPulse 1.5s ease-in-out infinite;
  filter:drop-shadow(0 0 12px rgba(16, 185, 129, 0.5));
}

@keyframes logoPulse{
  0%, 100%{
    transform:scale(1.12);
    filter:drop-shadow(0 0 12px rgba(16, 185, 129, 0.5));
  }
  50%{
    transform:scale(1.18);
    filter:drop-shadow(0 0 20px rgba(34, 211, 238, 0.7));
  }
}

/* Фоновый слой внутри карточки для правильного наложения */
.leagues-grid.football .league-card > *{
  position:relative;
  z-index:2;
}

/* Хоккейные карточки — анимации (льдяные цвета) */
.leagues-grid:not(.football) .league-card{
  position:relative;
  overflow:hidden;
}

/* Пульсирующий градиент льда — только при hover */
.leagues-grid:not(.football) .league-card::before{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:20px;
  background:linear-gradient(135deg, rgba(135, 206, 250, 0.12), rgba(70, 130, 180, 0.12), rgba(175, 227, 255, 0.12));
  background-size:200% 200%;
  opacity:0;
  transition:opacity .5s ease;
  z-index:0;
  pointer-events:none;
}

.leagues-grid:not(.football) .league-card:hover::before{
  opacity:1;
  animation:pulseGradient 4s ease-in-out infinite;
}

/* Граница при hover с усиленным льдяным свечением */
.leagues-grid:not(.football) .league-card{
  position:relative;
  z-index:1;
}

.leagues-grid:not(.football) .league-card:hover{
  border-color:transparent;
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(135, 206, 250, 0.3),
    0 0 60px rgba(175, 227, 255, 0.2),
    inset 0 0 20px rgba(135, 206, 250, 0.1);
}

.leagues-grid:not(.football) .league-card:hover .glow-effect{
  opacity:1;
  animation:glowPulseIce 2s ease-in-out infinite;
}

@keyframes glowPulseIce{
  0%, 100%{
    box-shadow:
      0 0 20px rgba(135, 206, 250, 0.4),
      0 0 40px rgba(175, 227, 255, 0.3),
      0 0 60px rgba(135, 206, 250, 0.2);
  }
  50%{
    box-shadow:
      0 0 30px rgba(135, 206, 250, 0.6),
      0 0 50px rgba(175, 227, 255, 0.4),
      0 0 70px rgba(135, 206, 250, 0.3);
  }
}

/* Граница с льдяным градиентом при hover */
.leagues-grid:not(.football) .league-card:hover .league-card-header{
  position:relative;
}

.leagues-grid:not(.football) .league-card:hover .league-card-header::before{
  content:'';
  position:absolute;
  bottom:-2px;
  left:20%;
  right:20%;
  height:2px;
  background:linear-gradient(90deg, transparent, #87CEFA, #4682B4, #AFF3FF, #87CEFA, transparent);
  background-size:200% 100%;
  animation:shimmerBorderIce 2s linear infinite;
}

@keyframes shimmerBorderIce{
  0%{
    background-position:-200% 0;
  }
  100%{
    background-position:200% 0;
  }
}

/* Пульсация иконок при наведении на карточку (льдяные цвета) */
.leagues-grid:not(.football) .league-card:hover .league-logo{
  transform:scale(1.12);
  animation:logoPulseIce 1.5s ease-in-out infinite;
  filter:drop-shadow(0 0 12px rgba(135, 206, 250, 0.5));
}

@keyframes logoPulseIce{
  0%, 100%{
    transform:scale(1.12);
    filter:drop-shadow(0 0 12px rgba(135, 206, 250, 0.5));
  }
  50%{
    transform:scale(1.18);
    filter:drop-shadow(0 0 20px rgba(175, 227, 255, 0.7));
  }
}

/* Фоновый слой внутри карточки для правильного наложения */
.leagues-grid:not(.football) .league-card > *{
  position:relative;
  z-index:2;
}

/* SUBSCRIPTIONS */
.subscriptions{padding:60px 0}
.subscriptions-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}
.subscription-card{position:relative;padding:32px 28px;border-radius:20px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column;transition:all .4s cubic-bezier(.4,0,.2,1)}
.subscription-card:hover{background:rgba(255,255,255,.04);transform:translateY(-4px);box-shadow:0 8px 40px rgba(0,0,0,.3)}
.subscription-card.popular{border-color:#98fb98;background:rgba(152,251,152,.04);box-shadow:0 0 40px rgba(152,251,152,.12)}
.subscription-card.popular:hover{box-shadow:0 0 60px rgba(152,251,152,.18),0 8px 40px rgba(0,0,0,.3)}
.popular-badge{position:relative;top:0;left:0;transform:none;margin:0 auto 10px auto;padding:4px 16px;border-radius:20px;font-size:.75rem;font-weight:600;background:#98fb98;color:#0a3a0a;white-space:nowrap;z-index:10;display:block;text-align:center}
.card-header{margin-bottom:20px}
.tier-icon{font-size:1.8rem;margin-bottom:12px}
.tier-name{font-size:1.2rem;font-weight:700;color:#e8e8f0;margin-bottom:8px}
.tier-price{font-size:1.6rem;font-weight:800;color:#fff;letter-spacing:-.02em}
.tier-price span{font-size:.85rem;font-weight:400;color:#6c6c8a}
.card-body{flex:1;display:flex;flex-direction:column}
.tier-description{font-size:.88rem;color:#8888a0;margin-bottom:20px;line-height:1.6}
.tier-features{flex:1;display:flex;flex-direction:column;gap:10px}
.tier-features li{display:flex;align-items:flex-start;gap:10px;font-size:.88rem;color:#a0a0b8;line-height:1.5}
.tier-features li i{margin-top:3px;font-size:.75rem;flex-shrink:0}
.tier-features li .fa-check{color:#0088CC}
.tier-features li.disabled{color:#4a4a5a}
.tier-features li.disabled .fa-times{color:#3a3a4a}
.tier-features li strong{color:#c8c8d0}
.tier-features li .feature-link{color:#0088CC;text-decoration:none;transition:all .2s;display:inline-flex;align-items:center;gap:4px;font-weight:500}
.tier-features li .feature-link:hover{color:#6b9aff;transform:translateX(2px)}
.tier-toggle{display:none;margin:12px 0;padding:8px 16px;border-radius:10px;font-size:.85rem;font-weight:500;color:#229ED9;background:rgba(34,158,217,.08);text-align:center;transition:background .2s}
.tier-toggle:hover{background:rgba(34,158,217,.14)}
.is-collapsible .tier-features{display:none}
.is-collapsible.is-open .tier-features{display:flex}
.subscriptions-note{max-width:640px;margin:48px auto 0;text-align:center;display:flex;flex-direction:column;gap:12px}
.subscriptions-note p{font-size:.9rem;color:#8888a0;line-height:1.7}
.subscriptions-note a{color:#4F7CFF;transition:color .2s}
.subscriptions-note a:hover{color:#6b9aff}
.contact-link.telegram{color:#229ED9!important;font-weight:500}
.contact-link.telegram:hover{color:#1a7bb9!important}
.contact-link.email{color:#14B8A6!important;font-weight:500}
.contact-link.email:hover{color:#0d9488!important}
.contact-links{display:flex;justify-content:center;gap:16px;margin:0;position:relative}
.contact-links::before{content:'';position:absolute;inset:-20px;background:radial-gradient(ellipse 80% 60% at 50% 50%, rgba(192,192,192,0.25), rgba(169,169,169,0.15) 50%, transparent 70%);border-radius:24px;filter:blur(20px);pointer-events:none;z-index:-1}
.contact-links .contact-link{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:rgba(0, 0, 0, 0.4);border:1px solid rgba(255,255,255,.1);transition:all .3s}
.contact-links .contact-link i{font-size:1.5rem}
.contact-links .contact-link:hover{background:radial-gradient(circle at 30% 30%, rgba(224,224,224,0.7), rgba(192,192,192,0.5));transform:translateY(-2px)}
.contact-links .contact-link.telegram:hover{box-shadow:0 4px 16px rgba(34,158,217,.3)}
.contact-links .contact-link.email:hover{box-shadow:0 4px 16px rgba(20,184,166,.3)}
.contact-links .contact-link::after{content:attr(aria-label);position:absolute;bottom:-40px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.9);color:#fff;padding:6px 12px;border-radius:6px;font-size:.8rem;white-space:nowrap;opacity:0;visibility:hidden;transition:all .2s;pointer-events:none;z-index:10}
.contact-links .contact-link:hover::after{opacity:1;visibility:visible;bottom:-44px}
.subscriptions-note .warning{color:#b8860b;font-size:.85rem}

/* REACT APP */
.react-app{padding:60px 0}
.react-app-features{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:48px}
.app-feature-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:28px;border-radius:20px;background:linear-gradient(135deg,rgba(245,245,248,0.9),rgba(235,235,240,0.85));border:1px solid rgba(180,180,190,0.25);transition:all .4s cubic-bezier(.4,0,.2,1);min-height:180px;flex:1;justify-content:center;overflow:hidden;--mouse-x:50%;--mouse-y:50%}
.app-feature-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(100,100,110,0.8),transparent);opacity:0;transition:opacity .4s}
.app-feature-card:hover{background:linear-gradient(135deg,rgba(250,250,252,0.95),rgba(240,240,245,0.9));border-color:rgba(100,100,110,0.5);transform:translateY(-2px);box-shadow:0 16px 50px rgba(0,0,0,0.3),0 0 80px rgba(70,70,80,0.2),0 0 120px rgba(60,60,70,0.1),inset 0 0 50px rgba(70,70,80,0.12)}
.app-feature-card:hover::before{opacity:1}
.app-feature-card > *{position:relative;z-index:1}
.app-feature-card:hover{background:linear-gradient(135deg,rgba(250,250,252,0.95),rgba(240,240,245,0.9));border-color:rgba(160,160,170,0.35);transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,0,0,0.15),0 0 30px rgba(200,200,210,0.25)}
.app-feature-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(160,160,170,0.15),rgba(140,140,150,0.12));font-size:1.15rem;color:#4a4a5a;margin-bottom:16px;flex-shrink:0;transition:transform .3s,box-shadow .3s}
.app-feature-card:hover .app-feature-icon{transform:translateZ(20px) scale(1.1);box-shadow:0 0 30px rgba(80,80,90,0.4)}
.app-feature-text{flex:1;display:flex;flex-direction:column;justify-content:center}
.app-feature-text h4{font-size:1rem;font-weight:600;color:#252530;margin-bottom:8px;margin-top:0}
.app-feature-text p{font-size:.88rem;color:#353545;line-height:1.65;margin:0;text-align:center}
.react-app-cta{text-align:center;max-width:640px;margin:0 auto}
.react-app-cta p{font-size:1rem;color:#9999b0;margin-bottom:12px;line-height:1.7}
.react-app-cta p strong{color:#e0e0f0}
.app-install-steps{display:flex;justify-content:center;align-items:center;gap:12px;margin:32px 0}
.install-step{display:flex;align-items:center;gap:12px}
.install-step-arrow{display:flex;align-items:center;justify-content:center;color:#0088CC;font-size:1.2rem;animation:arrowBounce 1.5s ease-in-out infinite}
@keyframes arrowBounce{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
.step-number{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(126, 126, 126, 0.12),rgba(126, 126, 126, 0.12));font-size:.9rem;font-weight:700;color:#0088CC;flex-shrink:0}
.step-text{font-size:.92rem;color:#a0a0b8}
.open-app-button{margin:24px 0;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.15);box-shadow:0 10px 40px rgba(0,0,0,0.45),0 4px 12px rgba(0,0,0,0.3),inset 0 1px 1px rgba(255,255,255,0.4),inset 0 -1px 1px rgba(0,0,0,0.15),inset 0 0 24px rgba(255,255,255,0.04);border-radius:36px;color:rgba(245,245,245,.95);font-weight:600;padding-left:75px;position:relative;overflow:hidden;padding-right:20px;backdrop-filter:blur(30px) saturate(1.8) brightness(1.08);-webkit-backdrop-filter:blur(30px) saturate(1.8) brightness(1.08);transition:all .4s cubic-bezier(.4,0,.2,1)}
.open-app-button::before{content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.04),transparent);border-radius:36px 36px 50% 50%;pointer-events:none}
.open-app-button::after{content:'';position:absolute;inset:-1px;border-radius:36px;background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.02),rgba(255,255,255,.06));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.open-app-button .open-app-logo{position:absolute;left:0px;top:50%;transform:translateY(-50%);width:60px;height:60px;border-radius:50%;object-fit:cover;z-index:2;box-shadow:0 4px 12px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.25);border:1px solid rgba(255,255,255,.15)}
.open-app-button:hover{background:rgba(255,255,255,0.13);box-shadow:0 14px 50px rgba(0,0,0,0.5),0 6px 16px rgba(0,0,0,0.35),inset 0 1px 1px rgba(255,255,255,0.55),inset 0 -1px 1px rgba(0,0,0,0.18),inset 0 0 32px rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.25);transform:translateY(-3px)}
.open-app-button:hover::before{opacity:.6}
.open-app-button:hover .open-app-logo{box-shadow:0 6px 16px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.3);border-color:rgba(255,255,255,.2)}
.open-app-button:active{transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,0.6),inset 0 1px 1px rgba(255,255,255,0.25),inset 0 -1px 1px rgba(0,0,0,0.2),inset 0 0 16px rgba(255,255,255,0.03)}
.open-app-button:active{transform:translateY(0)}
.app-note{font-size:.85rem!important;color:#b8860b!important}

/* CTA SECTION */
.cta-section{padding:80px 0;text-align:center;position:relative;overflow:hidden}
.cta-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(192,192,192,.2) 0%,transparent 60%),radial-gradient(ellipse 40% 40% at 30% 60%,rgba(169,169,169,.1) 0%,transparent 50%);pointer-events:none}
.cta-section .container{position:relative;z-index:1}
.cta-section p{max-width:600px;margin:0 auto 16px;font-size:1.05rem;color:#9999b0;line-height:1.75}
.cta-section .cta-button{margin-top:24px}

/* FOOTER */
footer{padding:60px 0 40px;border-top:1px solid rgba(255,255,255,.06);background:radial-gradient(ellipse 80% 100% at 50% 50%,rgba(230,230,235,1) 0%,rgba(200,200,210,.95) 60%,rgba(170,170,180,.9) 100%);border-radius:40px 40px 0 0;margin-top:40px}
.footer-links{display:flex;justify-content:center;gap:16px;margin-bottom:32px;flex-wrap:wrap;position:relative}
.footer-links::before{content:'';position:absolute;inset:-20px;background:radial-gradient(ellipse 80% 60% at 50% 50%, rgba(192,192,192,0.25), rgba(169,169,169,0.15) 50%, transparent 70%);border-radius:24px;filter:blur(20px);pointer-events:none;z-index:-1}
.footer-links-label{width:100%;text-align:center;color:#2a2a35;font-size:.95rem;font-weight:500;margin-bottom:8px}
.footer-link{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:rgba(0, 0, 0, 0.75);border:1px solid rgba(255,255,255,.1);transition:all .3s;position:relative}
.footer-link i{font-size:1.5rem}
.footer-link:hover{background:radial-gradient(circle at 30% 30%, rgba(224,224,224,0.7), rgba(192,192,192,0.5));transform:translateY(-2px)}
.footer-link.telegram:hover{box-shadow:0 4px 16px rgba(0, 0, 0, 0.4)}
.footer-link.email:hover{box-shadow:0 4px 16px rgba(0, 0, 0, 0.4)}
.footer-link::after{content:attr(aria-label);position:absolute;bottom:-40px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.9);color:#fff;padding:6px 12px;border-radius:6px;font-size:.8rem;white-space:nowrap;opacity:0;visibility:hidden;transition:all .2s;pointer-events:none;z-index:10}
.footer-link:hover::after{opacity:1;visibility:visible;bottom:-44px}
.footer-info{max-width:640px;margin:0 auto 24px;text-align:center}
.footer-info p{font-size:.85rem;color:#404050;line-height:1.7;margin-bottom:8px}
.footer-info p a{color:#2a2a35;text-decoration:none;transition:all .25s;font-weight:600;display:inline-flex;align-items:center;gap:8px;margin:6px 0}
.footer-info p a:hover{color:#151520;text-decoration:underline;transform:translateX(2px)}
.footer-info .disclaimer{color:#5a5040;font-size:.82rem}
.copyright{text-align:center;font-size:.8rem;color:#404050;margin-top:24px}

/* SCROLL TO TOP */
.scroll-to-top{position:fixed;bottom:24px;right:24px;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:#6c6c8a;font-size:.9rem;z-index:900;opacity:0;transform:translateY(12px);transition:all .3s;pointer-events:none;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.scroll-to-top.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.scroll-to-top:hover{color:#c0c0c0;background:rgba(200,200,200,0.1);border-color:rgba(220,220,220,0.3)}

/* REVEAL ANIMATIONS */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1)}
.reveal.active{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.05s}
.reveal-delay-2{transition-delay:.1s}
.reveal-delay-3{transition-delay:.15s}
.reveal-delay-4{transition-delay:.2s}
@keyframes revealUp{to{opacity:1;transform:translateY(0)}}
.hero-logo{opacity:0;transform:scale(.9);animation:heroIn .8s cubic-bezier(.4,0,.2,1) forwards}
@keyframes heroIn{to{opacity:1;transform:scale(1)}}
.hero h1{opacity:0;transform:translateY(16px);animation:revealUp .8s .1s cubic-bezier(.4,0,.2,1) forwards}
.hero-subtitle{opacity:0;transform:translateY(16px);animation:revealUp .8s .2s cubic-bezier(.4,0,.2,1) forwards}
.hero-stats-preview{opacity:0;transform:translateY(16px);animation:revealUp .8s .3s cubic-bezier(.4,0,.2,1) forwards}
.hero .cta-button{opacity:0;transform:translateY(16px);animation:revealUp .8s .4s cubic-bezier(.4,0,.2,1) forwards}

@media(max-width: 480px){
  .hero-stats-preview{opacity:0;transform:translateY(16px);animation:revealUp .8s .35s cubic-bezier(.4,0,.2,1) forwards}
  .hero .cta-button{opacity:0;transform:translateY(16px);animation:revealUp .8s .45s cubic-bezier(.4,0,.2,1) forwards}
}

/* SECTION ENTRANCE */
.about,.features,.leagues,.subscriptions,.react-app,.cta-section{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1)}
.about.visible,.features.visible,.leagues.visible,.subscriptions.visible,.react-app.visible,.cta-section.visible{opacity:1;transform:translateY(0)}

/* FEATURE CARDS ANIMATIONS */
.feature-card{opacity:0;transition:opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1)}
.feature-card.animate{opacity:1}

/* Fade Up - появление снизу */
.feature-card[data-animation="fade-up"]{transform:translateY(40px)}
.feature-card[data-animation="fade-up"].animate{transform:translateY(0)}

/* Fade Left - появление справа */
.feature-card[data-animation="fade-left"]{transform:translateX(40px)}
.feature-card[data-animation="fade-left"].animate{transform:translateX(0)}

/* Fade Right - появление слева */
.feature-card[data-animation="fade-right"]{transform:translateX(-40px)}
.feature-card[data-animation="fade-right"].animate{transform:translateX(0)}

/* Zoom In - увеличение */
.feature-card[data-animation="zoom-in"]{transform:scale(0.8);opacity:0}
.feature-card[data-animation="zoom-in"].animate{transform:scale(1);opacity:1}

/* Staggered delays for cascade effect */
.feature-card:nth-child(1){transition-delay:0ms}
.feature-card:nth-child(2){transition-delay:80ms}
.feature-card:nth-child(3){transition-delay:160ms}
.feature-card:nth-child(4){transition-delay:240ms}
.feature-card:nth-child(5){transition-delay:320ms}
.feature-card:nth-child(6){transition-delay:400ms}
.feature-card:nth-child(7){transition-delay:480ms}
.feature-card:nth-child(8){transition-delay:560ms}
.feature-card:nth-child(9){transition-delay:640ms}

/* Отключаем 3D tilt на мобильных */
@media(max-width:768px){
  .feature-card{
    transform:none!important;
    --mouse-x:50%;
    --mouse-y:50%;
  }
  .feature-icon{
    transform:none!important;
  }
}

/* RESPONSIVE */
@media(max-width:1024px){.features-grid{grid-template-columns:repeat(2,1fr)}.leagues-grid{grid-template-columns:repeat(3,1fr)}.subscriptions-grid{grid-template-columns:repeat(2,1fr)}.burger-menu{display:flex;margin-left:auto;margin-right:16px}.burger-menu span{background:linear-gradient(90deg,#c8c8d0,#e0e0e8)}.nav-menu{position:fixed;top:64px;left:0;right:0;bottom:0;background:#000000;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;opacity:0;pointer-events:none;transition:all .35s ease;visibility:hidden;padding:20px 0;z-index:1001;transform:translateX(100%);overflow-y:auto;-webkit-overflow-scrolling:touch;max-height:calc(100vh - 64px);height:calc(100vh - 64px)}.nav-menu.active{opacity:1;pointer-events:auto;visibility:visible;transform:translateX(0)}.nav-menu li{width:100%;border-bottom:1px solid rgba(192,192,192,.08);opacity:0;transform:translateX(20px);transition:all .4s ease}.nav-menu.active li{opacity:1;transform:translateX(0)}.nav-menu.active li:nth-child(1){transition-delay:.05s}.nav-menu.active li:nth-child(2){transition-delay:.08s}.nav-menu.active li:nth-child(3){transition-delay:.11s}.nav-menu.active li:nth-child(4){transition-delay:.14s}.nav-menu.active li:nth-child(5){transition-delay:.17s}.nav-menu.active li:nth-child(6){transition-delay:.2s}.nav-menu a{display:flex;align-items:center;gap:14px;font-size:1.2rem;padding:20px 24px;color:#ffffff;transition:all .25s;background:#000000;font-weight:600;border-bottom:1px solid rgba(192,192,192,.03);white-space:normal}.nav-menu a:hover{background:#000000;color:#fff}.nav-menu a:hover i{color:#c0c0c0;transform:scale(1.1)}.nav-menu a:active{background:#000000}.nav-menu a i{font-size:1.2rem;color:#c8c8d0;width:24px;text-align:center;transition:all .25s}}
@media(max-width:768px){
  .burger-menu{display:flex;margin-left:auto;margin-right:16px}.burger-menu span{background:linear-gradient(90deg,#c8c8d0,#e0e0e8)}.nav-menu{position:fixed;top:64px;left:0;right:0;bottom:0;background:#000000;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;opacity:0;pointer-events:none;transition:all .35s ease;visibility:hidden;padding:20px 0;z-index:1001;transform:translateX(100%);overflow-y:auto;-webkit-overflow-scrolling:touch;max-height:calc(100vh - 64px);height:calc(100vh - 64px)}.nav-menu.active{opacity:1;pointer-events:auto;visibility:visible;transform:translateX(0)}.nav-menu li{width:100%;border-bottom:1px solid rgba(192,192,192,.08);opacity:0;transform:translateX(20px);transition:all .4s ease}.nav-menu.active li{opacity:1;transform:translateX(0)}.nav-menu.active li:nth-child(1){transition-delay:.05s}.nav-menu.active li:nth-child(2){transition-delay:.08s}.nav-menu.active li:nth-child(3){transition-delay:.11s}.nav-menu.active li:nth-child(4){transition-delay:.14s}.nav-menu.active li:nth-child(5){transition-delay:.17s}.nav-menu.active li:nth-child(6){transition-delay:.2s}.nav-menu a{display:flex;align-items:center;gap:14px;font-size:1.2rem;padding:20px 24px;color:#ffffff;transition:all .25s;background:#000000;font-weight:600;border-bottom:1px solid rgba(192,192,192,.03);white-space:normal}.nav-menu a:hover{background:#000000;color:#fff}.nav-menu a:hover i{color:#c0c0c0;transform:scale(1.1)}.nav-menu a:active{background:#000000}.nav-menu a i{font-size:1.2rem;color:#c8c8d0;width:24px;text-align:center;transition:all .25s}.features-grid{grid-template-columns:repeat(2,1fr)}.subscriptions{padding-top:40px;margin-top:0}.subscriptions .container{overflow:visible}.subscriptions-grid{display:flex;overflow-x:auto;scroll-snap-type:none;gap:20px;padding-bottom:20px;margin-bottom:30px;-webkit-overflow-scrolling:touch;scrollbar-width:none;align-items:flex-start}.subscriptions-grid::-webkit-scrollbar{display:none}.subscription-card{flex:0 0 78%;scroll-snap-align:none;margin-bottom:30px;overflow:visible}.react-app-features{grid-template-columns:repeat(2,1fr)}.app-install-steps{flex-direction:column;align-items:center;gap:16px}.hero{padding:100px 20px 60px;min-height:auto}.logo-image{width:90px;height:90px;border-radius:22px}.hero h1{font-size:clamp(1.4rem,6vw,2rem)}.tier-toggle{display:block}.feature-toggle{display:inline-block}}
@media(max-width:480px){.container{padding:0 16px}.section-title{font-size:1.5rem;margin:0 auto}.section-title::before{inset:-10px;left:50%;transform:translateX(-50%);border-radius:20px;filter:blur(20px)}.app-install-steps{gap:8px;margin:24px 0;flex-direction:column;align-items:center}.tier-toggle{display:block}.features .container{overflow:visible}.features-grid{display:flex;overflow-x:auto;scroll-snap-type:none;gap:20px;padding-bottom:20px;margin-bottom:30px;-webkit-overflow-scrolling:touch;scrollbar-width:none;align-items:flex-start}.features-grid::-webkit-scrollbar{display:none}.features-grid::-webkit-scrollbar-thumb{background:transparent}.feature-card{min-width:260px;max-width:260px;flex-shrink:0;scroll-snap-align:none;padding:16px 14px;display:flex;flex-direction:column;min-height:240px}.feature-card .feature-desc{display:block!important}.feature-icon{width:40px;height:40px;font-size:1rem;margin-bottom:12px}.feature-title{font-size:.95rem;margin-bottom:6px}.feature-desc{font-size:.82rem;line-height:1.55;flex:1}.hero-stats-preview{gap:12px;padding:12px 16px;flex-wrap:wrap}.hero-stat-item{flex:1;text-align:center}.hero-stat-value{font-size:1.1rem}.hero-stat-label{font-size:.65rem}.hero-subtitle{font-size:1.1rem;margin-bottom:24px}}
@media(min-width:1400px){.container{max-width:1280px}}

/* Увеличенный отступ для react-app-cta на десктопе и планшетах */
@media(min-width:769px){.react-app-cta{margin-top:60px}}

/* React App Mobile Responsive */
@media(max-width:1023px){.react-app-features{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.react-app-features{grid-template-columns:repeat(2,1fr);gap:12px}.app-feature-card{padding:20px 16px}}

/* ABOUT CHAT - Messenger Style */
.about-chat{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:16px;padding:20px}

.chat-message{display:flex;align-items:flex-end;gap:12px;opacity:0;transform:translateY(20px)}
.chat-message.animate{animation:chatMessage 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards}

@keyframes chatMessage{
  to{opacity:1;transform:translateY(0)}
}

.chat-message.bot{flex-direction:row}
.chat-message.user{flex-direction:row-reverse}

.chat-avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,rgba(79,124,255,.15),rgba(139,92,246,.15));display:flex;align-items:center;justify-content:center;border:2px solid rgba(160, 160, 160, 0.699)}
.chat-avatar img{width:100%;height:100%;object-fit:cover}

.chat-bubble{max-width:70%;padding:14px 18px;border-radius:33px;position:relative;animation:bubbleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;backdrop-filter:blur(30px) saturate(1.8) brightness(1.08);-webkit-backdrop-filter:blur(30px) saturate(1.8) brightness(1.08);overflow:hidden}

.chat-message.bot .chat-bubble{background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);border-bottom-left-radius:4px;box-shadow:0 8px 32px rgba(0,0,0,0.35),0 2px 8px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.5),inset 0 -1px 1px rgba(0,0,0,0.08),inset 0 0 20px rgba(255,255,255,0.04)}
.chat-message.user .chat-bubble{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-bottom-right-radius:4px;box-shadow:0 8px 32px rgba(0,0,0,0.35),0 2px 8px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.3),inset 0 -1px 1px rgba(0,0,0,0.1),inset 0 0 20px rgba(255,255,255,0.03)}

@keyframes bubbleIn{
  0%{transform:scale(0.8);opacity:0}
  70%{transform:scale(1.05)}
  100%{transform:scale(1);opacity:1}
}

.chat-bubble p{margin:0;font-size:0.98rem;color:#e8e8f0;line-height:1.65}

.chat-message.bot .chat-bubble p{color:#f0f0f5}
.chat-message.user .chat-bubble p{color:#d8d8e8}

/* Hover effects — Liquid Glass */
.chat-bubble{transition:all 0.3s ease}
.chat-bubble:hover{transform:translateY(-2px)}

.chat-message.bot .chat-bubble:hover{background:rgba(255,255,255,0.18);border-color:rgba(255,255,255,0.3);box-shadow:0 12px 40px rgba(0,0,0,0.4),0 4px 12px rgba(0,0,0,0.25),inset 0 1px 1px rgba(255,255,255,0.6),inset 0 -1px 1px rgba(0,0,0,0.1),inset 0 0 28px rgba(255,255,255,0.07)}
.chat-message.user .chat-bubble:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.2);box-shadow:0 12px 40px rgba(0,0,0,0.4),0 4px 12px rgba(0,0,0,0.25),inset 0 1px 1px rgba(255,255,255,0.4),inset 0 -1px 1px rgba(0,0,0,0.12),inset 0 0 28px rgba(255,255,255,0.05)}

/* Typing indicator animation for bot messages */
.chat-message.bot::after{content:'';position:absolute;left:56px;top:50%;transform:translateY(-50%);opacity:0;transition:opacity 0.3s}
.chat-message.bot.typing::after{opacity:1}

/* Mobile responsive */
@media(max-width:600px){
  .about-chat{padding:12px;gap:12px}
  .chat-avatar{width:32px;height:32px}
  .chat-bubble{max-width:75%;padding:12px 14px}
  .chat-bubble p{font-size:0.72rem}
}

/* leagues tabs - мобильные стили */
@media(max-width:768px){
  .leagues-tabs{margin:24px 0 20px;gap:8px}
  .leagues-tab{padding:10px 18px;font-size:.9rem}
  .leagues-slider-container{overflow:visible}
  .leagues-slider{display:block!important;transform:none!important}
  .leagues-slide{display:none;opacity:1;min-width:auto;flex-shrink:auto}
  .leagues-slide.active{display:block}
  .leagues-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .league-card{padding:16px 12px}
  .league-logo{width:40px;height:40px}
  .league-name{font-size:1rem}
  .league-desc{font-size:.8rem}
  .leagues-subtitle{font-size:1.15rem;margin:32px 0 20px}
}

@media(max-width:480px){
  .leagues-tabs{gap:6px}
  .leagues-tab{padding:8px 14px;font-size:.8rem;gap:6px}
  .leagues-tab i{font-size:.75rem}
  .leagues-grid{grid-template-columns:1fr;gap:10px}
  .league-card{padding:14px 12px}
}

/* React App Slider - стили для слайдера */
.app-slider-container{
  position: relative;
  width: 100%;
}

.app-slider-track{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-slider-dots{
  display: none;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.app-slider-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.app-slider-dot:hover{
  background: rgba(255, 255, 255, 0.4);
}

.app-slider-dot.active{
  background: #0088CC;
  border-color: #0088CC;
  transform: scale(1.2);
}

/* Анимация появления карточек приложения */
.app-feature-card{
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.app-feature-card.animate{
  opacity: 1;
}

/* Fade Up - появление снизу */
.app-feature-card[data-animation="fade-up"]{
  transform: translateY(40px);
}

.app-feature-card[data-animation="fade-up"].animate{
  transform: translateY(0);
}

/* Fade Left - появление справа */
.app-feature-card[data-animation="fade-left"]{
  transform: translateX(40px);
}

.app-feature-card[data-animation="fade-left"].animate{
  transform: translateX(0);
}

/* Fade Right - появление слева */
.app-feature-card[data-animation="fade-right"]{
  transform: translateX(-40px);
}

.app-feature-card[data-animation="fade-right"].animate{
  transform: translateX(0);
}

/* Zoom In - увеличение */
.app-feature-card[data-animation="zoom-in"]{
  transform: scale(0.8);
  opacity: 0;
}

.app-feature-card[data-animation="zoom-in"].animate{
  transform: scale(1);
  opacity: 1;
}

/* Staggered delays для карточек приложения */
.app-feature-card:nth-child(1){transition-delay:0ms}
.app-feature-card:nth-child(2){transition-delay:80ms}
.app-feature-card:nth-child(3){transition-delay:160ms}
.app-feature-card:nth-child(4){transition-delay:240ms}

/* Мобильные стили для слайдера */
@media(max-width: 768px){
  .app-slider-track{
    display: flex;
    gap: 16px;
    cursor: grab;
  }
  
  .app-slider-track:active{
    cursor: grabbing;
  }
  
  .app-slider-container{
    overflow: hidden;
    padding: 10px 4px;
  }
  
  .app-feature-card{
    min-width: calc(50% - 8px);
    max-width: calc(50% - 8px);
    flex-shrink: 0;
    scroll-snap-align: start;
  }
  
  .app-slider-dots{
    display: flex;
  }
}

@media(max-width: 480px){
  .app-feature-card{
    min-width: 100%;
    max-width: 100%;
  }
  
  .app-feature-card{
    padding: 24px 20px;
  }
  
  .app-slider-dots{
    margin-top: 16px;
  }
}

/* Уменьшенные отступы секций для мобильных */
@media(max-width: 768px){
  .about,.features,.leagues,.subscriptions,.react-app{padding:40px 0}
  .cta-section{padding:60px 0}
  .hero{min-height:100vh;padding:80px 24px 60px}
  .section-subtitle{margin:0 auto 32px}
  .hero .cta-button{margin-top:32px}
  .hero-stats-preview{gap:20px;padding:16px 24px;margin-bottom:28px}
  .hero-stat-value{font-size:1.6rem}
  .hero-stat-label{font-size:.8rem}
  html{scroll-padding-top:100px}
}

@media(max-width: 600px){
  .hero-stats-preview{gap:16px;padding:14px 20px;margin-bottom:24px}
  .hero-stat-value{font-size:1.5rem}
  .hero-stat-label{font-size:.78rem}
}

@media(max-width: 480px){
  .about,.features,.leagues,.subscriptions,.react-app{padding:32px 0}
  .cta-section{padding:48px 0}
  .hero{min-height:100vh;padding:70px 16px 40px}
  .section-title{margin-bottom:12px}
  .hero .cta-button{margin-top:24px;padding:14px 28px;font-size:1rem}
  .hero-stats-preview{gap:12px;padding:14px 16px;margin-bottom:24px}
  .hero-stat-value{font-size:1.35rem}
  .hero-stat-label{font-size:.7rem}
  html{scroll-padding-top:90px}
}

@media(max-width: 375px){
  .hero .cta-button{padding:12px 24px;font-size:.95rem}
  .hero-stats-preview{gap:10px;padding:12px 14px;margin-bottom:20px}
  .hero-stat-value{font-size:1.25rem}
  .hero-stat-label{font-size:.65rem}
  .hero{padding:65px 12px 35px}
  html{scroll-padding-top:70px}
}

/* Анимация серебристой подсветки для кнопок */
.cta-button {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.cta-button::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(220,220,230,0.5) 50%,
    rgba(200,200,215,0.7) 55%,
    rgba(220,220,230,0.5) 60%,
    transparent 70%
  );
  animation: shimmer 5s linear infinite;
  z-index: -1;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

/* Анимация для кнопки Открыть приложение (справа налево) */
.open-app-button::before {
  animation: shimmerReverse 5s linear infinite;
}

@keyframes shimmerReverse {
  0% {
    transform: translateX(100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(-100%) translateY(100%) rotate(45deg);
  }
}

/* Header responsive */
@media(max-width: 1024px) {
  .header {
    top: 10px;
    width: 95%;
    max-width: none;
    border-radius: 16px;
  }
  .header-content {
    padding: 0 16px;
  }
}

/* Мобильные стили для подписок - карточки всегда раскрыты и выровнены по высоте */
@media(max-width: 768px) {
  .subscription-card.is-collapsible .tier-features {
    display: flex !important;
  }
  
  .subscription-card .tier-toggle {
    display: none !important;
  }
  
  /* Выравнивание высоты карточек */
  .subscriptions .subscriptions-grid {
    align-items: stretch !important;
  }
  
  .subscription-card {
    min-height: 400px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  .card-header {
    flex-shrink: 0 !important;
  }
  
  .card-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }
  
  .tier-description {
    flex-shrink: 0 !important;
  }
  
  .tier-features {
    flex: 1 1 auto !important;
  }
}

/* Еще более специфичный стиль для мобильных (ниже в каскаде) */
@media(max-width: 480px) {
  .subscription-card {
    min-height: 380px !important;
  }
}

/* Уменьшаем отступ под карточками подписок на мобильных и планшетах */
@media(max-width: 768px) {
  .subscriptions-note {
    margin-top: 24px !important;
    margin-bottom: 0 !important;
  }
}

@media(max-width: 480px) {
  .subscriptions-note {
    margin-top: 16px !important;
  }
}

/* Финальное переопределение для отступа подписок */
@media screen and (max-width: 768px) {
  .subscriptions .subscriptions-note,
  #subscriptions .subscriptions-note {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
  }
}

@media screen and (max-width: 480px) {
  #subscriptions .subscriptions-note {
    margin-top: -50px !important;
  }
}

/* ==========================================================================
   Mobile / Tablet Capsule Menu (Dynamic Island)
   На <=1024px скрываем бургер, всегда показываем капсулу.
   Клик по капсуле открывает выпадающее меню с пунктами.
   ========================================================================== */

/* Keyframe для "жидкого" морфа капсулы (доступен на всех брейкпоинтах) */
@keyframes pillLiquidMorphCapsule{
  0%   { transform: translateX(-50%) scale(1);                border-radius: 24px; }
  14%  { transform: translateX(-50%) scaleX(0.6)  scaleY(1.18); border-radius: 14px; }
  32%  { transform: translateX(-50%) scaleX(1.22) scaleY(0.82); border-radius: 30px; }
  50%  { transform: translateX(-50%) scaleX(0.92) scaleY(1.08); border-radius: 20px; }
  66%  { transform: translateX(-50%) scaleX(1.06) scaleY(0.92); border-radius: 26px; }
  82%  { transform: translateX(-50%) scaleX(0.97) scaleY(1.03); border-radius: 23px; }
  100% { transform: translateX(-50%) scale(1);                border-radius: 24px; }
}

@media(max-width:1024px){
  /* Скрываем бургер-меню */
  .burger-menu{display:none !important}

  /* Принудительно держим хедер в форме капсулы независимо от классов — Liquid Glass 3D */
  .header,
  .header.expanded,
  .header.scrolled,
  .header.dynamic-pill,
  .header.dynamic-pill.header-expanded{
    width:auto !important;
    min-width:70px !important;
    max-width:90vw !important;
    top:15px !important;
    border-radius:50px !important;
    background:rgba(255, 255, 255, 0.07) !important;
    backdrop-filter:blur(30px) saturate(1.8) brightness(1.08) !important;
    -webkit-backdrop-filter:blur(30px) saturate(1.8) brightness(1.08) !important;
    padding:2px 4px !important;
    transform:translateX(-50%) scale(1);
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    cursor:pointer !important;
    border:1px solid rgba(255,255,255,0.15) !important;
    overflow:visible !important;
    box-shadow:
        0 10px 40px rgba(0,0,0,0.45),
        0 4px 12px rgba(0,0,0,0.3),
        inset 0 1px 1px rgba(255,255,255,0.4),
        inset 0 -1px 1px rgba(0,0,0,0.15),
        inset 0 0 24px rgba(255,255,255,0.04) !important;
  }

  /* Liquid Glass псевдоэлементы на мобильных */
  .header::before,
  .header.dynamic-pill::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:50px;
    background:linear-gradient(
        180deg,
        rgba(255,255,255,0.2) 0%,
        rgba(255,255,255,0.06) 35%,
        rgba(255,255,255,0) 55%
    );
    pointer-events:none;
    z-index:1;
  }
  .header::after,
  .header.dynamic-pill::after{
    content:'';
    position:absolute;
    inset:1px;
    border-radius:50px;
    background:radial-gradient(
        ellipse 80% 60% at 30% 0%,
        rgba(255,255,255,0.14) 0%,
        rgba(255,255,255,0) 50%
    );
    box-shadow:inset 0 -2px 8px rgba(0,0,0,0.12);
    pointer-events:none;
    z-index:1;
  }

  .header .header-content{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:100% !important;
    padding:0 !important;
    height:auto !important;
    gap:12px !important;
    position:relative;
  }
  .header .container{padding:0 !important;width:100% !important}
  .header .logo,
  .header.dynamic-pill .logo{margin:0 !important;padding:0 !important;flex-shrink:0}
  .header .logo-wrapper,
  .header.dynamic-pill .logo-wrapper{display:none !important}
  .header .logo-img,
  .header.dynamic-pill .logo-img{width:35px !important;height:35px !important;border-radius:50% !important;margin:0 !important}
  .header .pill-section-label,
  .header.dynamic-pill .pill-section-label{
    opacity:1 !important;
    margin:0 !important;
    padding:0 !important;
    font-size:1rem !important;
    white-space:nowrap !important;
    max-width:160px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    pointer-events:none;
  }

  /* Выпадающее меню из капсулы — перебиваем display:none от dynamic-pill */
  .nav-menu,
  .header.dynamic-pill .nav-menu,
  .header .nav-menu{
    position:absolute !important;
    top:calc(100% + 10px) !important;
    left:50% !important;
    right:auto !important;
    bottom:auto !important;
    transform:translateX(-50%) translateY(-8px);
    background:rgba(0,0,0,0.92) !important;
    backdrop-filter:blur(24px) saturate(1.6);
    -webkit-backdrop-filter:blur(24px) saturate(1.6);
    border:1px solid rgba(255,255,255,0.12) !important;
    border-radius:16px !important;
    padding:8px !important;
    min-width:240px;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:2px !important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .25s ease, transform .25s ease, visibility .25s;
    z-index:1001;
    max-height:none !important;
    height:auto !important;
    overflow:visible !important;
    display:flex !important;
  }
  .nav-menu.active{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateX(-50%) translateY(0) !important;
  }
  .nav-menu li{
    width:100% !important;
    opacity:1 !important;
    transform:none !important;
    border-bottom:none !important;
  }
  .nav-menu a{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    font-size:1rem !important;
    padding:12px 16px !important;
    border-radius:10px !important;
    color:#c8c8d0 !important;
    background:transparent !important;
    font-weight:500 !important;
    border-bottom:none !important;
    white-space:nowrap !important;
    transition:all .2s !important;
  }
  .nav-menu a:hover{
    background:rgba(255,255,255,0.06) !important;
    color:#fff !important;
  }
  .nav-menu a i{font-size:1rem !important;color:#c8c8d0 !important;width:22px !important;text-align:center}

  /* "Жидкий" морф капсулы — перебиваем старое правило */
  .header.pill-bounce,
  .header.dynamic-pill.pill-bounce{
    animation:pillLiquidMorphMobile 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }
  .header.dynamic-pill.pill-bounce .pill-section-label{
    animation:pillLabelReveal 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  /* Расширение капсулы при открытом выпадающем меню — Liquid Glass */
  .header.menu-open{
    min-width:240px !important;
    padding:8px 12px !important;
    border-radius:50px !important;
    background:rgba(255, 255, 255, 0.1) !important;
    backdrop-filter:blur(30px) saturate(1.8) brightness(1.08) !important;
    -webkit-backdrop-filter:blur(30px) saturate(1.8) brightness(1.08) !important;
    border-color:rgba(255,255,255,0.22) !important;
    box-shadow:
        0 14px 50px rgba(0,0,0,0.5),
        0 6px 16px rgba(0,0,0,0.35),
        inset 0 1px 1px rgba(255,255,255,0.5),
        inset 0 -1px 1px rgba(0,0,0,0.18),
        inset 0 0 32px rgba(255,255,255,0.07) !important;
    transition:all .35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }
  .header.menu-open .logo-img{
    width:40px !important;
    height:40px !important;
  }
  .header.menu-open .pill-section-label{
    font-size:1.05rem !important;
    max-width:none !important;
  }
}

@media(max-width:480px){
  .header.menu-open{
    min-width:210px !important;
  }
}

@media(max-width:480px){
  .header .pill-section-label{font-size:.9rem !important;max-width:130px !important}
  .nav-menu{min-width:210px}
}