:root{
    --bg1:#E04B7A;
    --bg2:#7B5CFF;
    --card: rgba(255,255,255,.10);
    --card2: rgba(255,255,255,.14);
    --stroke: rgba(255,255,255,.18);
    --text: rgba(255,255,255,.92);
    --muted: rgba(255,255,255,.75);
    --shadow: 0 24px 60px rgba(0,0,0,.22);
    --shadow2: 0 18px 45px rgba(0,0,0,.18);
    --radius: 22px;
    --radius2: 28px;
    --max: 1120px;
  }
  
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    color:var(--text);
    font-family: "Outfit", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: linear-gradient(110deg, var(--bg1), var(--bg2));
    min-height:100vh;
    overflow-x:hidden;
  }
  
  /* Subtle animated glow blobs */
  .blob{
    position:fixed;
    inset:auto;
    width:520px; height:520px;
    filter: blur(60px);
    opacity:.35;
    z-index:-2;
    pointer-events:none;
    transform: translate3d(0,0,0);
    animation: float 10s ease-in-out infinite;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 55%);
  }
  .blob.b1{ left:-160px; top:-160px; animation-delay:-2s; }
  .blob.b2{ right:-180px; bottom:-180px; animation-delay:-6s; }
  @keyframes float{
    0%,100%{ transform: translate(0,0) scale(1); }
    50%{ transform: translate(18px,-12px) scale(1.05); }
  }
  
  /* Header */
  header{
    position:sticky;
    top:0;
    z-index:50;
    backdrop-filter: blur(14px);
    background: linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,0));
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .nav{
    max-width: var(--max);
    margin:0 auto;
    padding: 14px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:var(--text);
  }
  .brand-badge{
    width:38px;height:38px;
    border-radius:14px;
    background: rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.22);
    box-shadow: var(--shadow2);
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
  }
  .brand-badge::after{
    content:"";
    position:absolute;
    inset:-60%;
    background: conic-gradient(from 180deg, rgba(255,255,255,.0), rgba(255,255,255,.35), rgba(255,255,255,.0));
    animation: spin 5.5s linear infinite;
  }
  @keyframes spin{ to{ transform: rotate(360deg); } }
  .brand-badge span{
    position:relative;
    font-weight:700;
    letter-spacing:.2px;
  }
  .brand-title{
    font-weight:700;
    letter-spacing:.2px;
    line-height:1;
  }
  .brand-sub{
    display:block;
    font-size:12px;
    font-weight:400;
    color:var(--muted);
    margin-top:2px;
  }
  .nav-links{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  .pill{
    text-decoration:none;
    color:var(--text);
    font-weight:500;
    font-size:14px;
    padding:10px 12px;
    border-radius:999px;
    background: rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.14);
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
  }
  .pill:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.22);
  }
  
  /* Layout */
  .wrap{
    max-width: var(--max);
    margin:0 auto;
    padding: 26px 18px 70px;
  }
  
  /* Hero */
  .hero{
    display:grid;
    grid-template-columns: 1fr;
    gap:24px;
    align-items:center;
    padding: 18px 0 10px;
  }
  
  .hero-card{
    border-radius: var(--radius2);
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: var(--shadow);
    overflow:hidden;
    position:relative;
  }
  
  .hero-card::before{
    content:"";
    position:absolute;
    inset:0;
    background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.22), rgba(255,255,255,0) 50%);
    pointer-events:none;
  }
  
  /* Старый блок (если когда-то вернешь картинку) */
  .hero-media{
    position:relative;
    overflow:hidden;
  }
  .hero-media img{
    width:100%;
    height:auto;
    display:block;
    transform: scale(1.02);
    transition: transform .6s ease;
  }
  .hero-card:hover .hero-media img{
    transform: scale(1.05);
  }
  
  /* ВАЖНО:
     hero-copy больше НЕ даёт паддинги, когда используется hero-grid.
     (иначе лишняя “высота/сдвиг” и странная композиция) */
  .hero-copy{
    padding: 22px 22px 18px;
  }
  
  /* Common text styles */
  .kicker{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    font-weight:600;
    color: rgba(255,255,255,.84);
    padding:8px 12px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.16);
    background: rgba(0,0,0,.10);
  }
  .dot{
    width:8px;height:8px;border-radius:50%;
    background: rgba(255,255,255,.85);
    box-shadow: 0 0 0 5px rgba(255,255,255,.12);
  }
  h1{
    margin:14px 0 10px;
    font-size: clamp(28px, 4vw, 44px);
    line-height:1.05;
    letter-spacing:.2px;
  }
  .lead{
    margin:0;
    color:var(--muted);
    font-size:16px;
    line-height:1.45;
    max-width: 56ch;
  }
  .hero-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:16px;
   
  }
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding: 12px 14px;
    border-radius: 999px;
    font-weight:600;
    font-size:14px;
    text-decoration:none;
    cursor:pointer;
    border: 1px solid rgba(255,255,255,.16);
    transition: transform .16s ease, filter .16s ease, background .16s ease, border-color .16s ease;
    user-select:none;
    will-change: transform;
  }
  .btn-primary{
    background: rgba(255,255,255,.92);
    color: rgba(35, 20, 60, .96);
    border-color: rgba(255,255,255,.40);
  }
  .btn-primary:hover{ transform: translateY(-1px); filter: brightness(.98); }
  .btn-ghost{
    background: rgba(255,255,255,.10);
    color: var(--text);
  }
  .btn-ghost:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.22);
  }
  
  /* (старое) Right side: small feature cards — можно удалить, но оставляю чтобы не ломать если где-то используется */
  .side{
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .mini{
    border-radius: var(--radius);
    background: rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.14);
    padding:16px 16px;
    box-shadow: var(--shadow2);
    position:relative;
    overflow:hidden;
    transform: translateZ(0);
  }
  .mini::after{
    content:"";
    position:absolute;
    right:-40px; top:-40px;
    width:140px; height:140px;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%);
    filter: blur(2px);
    opacity:.9;
  }
  .mini h3{
    margin:0 0 6px;
    font-size:16px;
    letter-spacing:.2px;
  }
  .mini p{
    margin:0;
    color:var(--muted);
    font-size:14px;
    line-height:1.45;
  }
  
  /* Section */
  section{
    margin-top: 30px;
  }
  .section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:14px;
    margin-bottom: 14px;
  }
  .section-head h2{
    margin:0;
    font-size: 22px;
    letter-spacing:.2px;
  }
  .section-head .hint{
    color:var(--muted);
    font-size:14px;
    max-width: 60ch;
  }
  
  /* Apps grid */
  .apps{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:16px;
  }
  .app{
    border-radius: var(--radius2);
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.07));
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: var(--shadow2);
    padding:22px;
    display:flex;
    gap:18px;
    align-items:flex-start;
    transition: transform .22s cubic-bezier(0.34, 1.56, 0.64, 1),
                background .22s ease,
                border-color .22s ease,
                box-shadow .22s ease;
    position:relative;
    overflow:hidden;
    min-height: 160px;
  }
  .app::before{
    content:"";
    position:absolute;
    inset:0;
    background: radial-gradient(circle at 15% 20%, rgba(255,255,255,.20), rgba(255,255,255,0) 50%);
    opacity:.75;
    pointer-events:none;
  }
  /* subtle shine on hover */
  .app::after{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 60%);
    opacity:0;
    transition: opacity .22s ease;
    pointer-events:none;
  }
  .app:hover{
    transform: translateY(-5px) scale(1.015);
    background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.10));
    border-color: rgba(255,255,255,.28);
    box-shadow: 0 28px 64px rgba(0,0,0,.28);
  }
  .app:hover::after{
    opacity:1;
  }
  .app:hover .app-icon{
    transform: scale(1.18) rotate(-3deg);
  }
  .app-icon{
    width:66px;height:66px;
    border-radius: 18px;
    background: rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.16);
    flex:0 0 auto;
    overflow:hidden;
    display:grid;
    place-items:center;
    position:relative;
    z-index:1;
    transition: transform .22s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .app-icon img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .app-body{
    position:relative;
    z-index:1;
    flex:1 1 auto;
    min-width: 0;
  }
  .app-title{
    margin:0 0 4px;
    font-size:16px;
    letter-spacing:.2px;
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
  }
  .badge{
    font-size:12px;
    font-weight:600;
    padding:4px 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.16);
    background: rgba(0,0,0,.10);
    color: rgba(255,255,255,.85);
  }
  .app-desc{
    margin:0 0 10px;
    color:var(--muted);
    font-size:14px;
    line-height:1.45;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  .store-row{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }
  
  /* "Google Play" button look */
  .gp{
    display:inline-flex;
    align-items:center;
    gap:2px;
    padding:10px 12px;
    border-radius: 14px;
    text-decoration:none;
    color: var(--text);
    background: rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.16);
    transition: transform .16s ease, background .16s ease, border-color .16s ease;
    font-weight:600;
    font-size:14px;
  }
  .gp:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.22);
  }
  .gp svg{ flex:0 0 auto; }

  .app-learn-more {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,.70);
    text-decoration: none;
    transition: color .18s ease;
  }
  .app-learn-more:hover {
    color: rgba(255,255,255,1);
  }
  
  /* Footer */
  footer{
    margin-top: 34px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.14);
    color: rgba(255,255,255,.75);
  }
  .foot{
    display:flex;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    align-items:center;
  }
  .foot a{
    color: rgba(255,255,255,.86);
    text-decoration:none;
    border-bottom: 1px solid rgba(255,255,255,.28);
    transition: border-color .16s ease, opacity .16s ease, transform .16s ease;
  }
  .foot a:hover{
    border-color: rgba(255,255,255,.70);
    transform: translateY(-1px);
  }
  .small{
    font-size:13px;
    color: rgba(255,255,255,.70);
  }
  
  /* Reveal animations */
  .reveal{
    opacity: 0;
    will-change: opacity, transform;
    transition:
      opacity  0.75s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* default: slide up */
  .reveal:not([data-reveal]),
  .reveal[data-reveal="up"] {
    transform: translateY(36px);
  }
  .reveal[data-reveal="left"]  { transform: translateX(-36px); }
  .reveal[data-reveal="right"] { transform: translateX(36px); }
  .reveal[data-reveal="scale"] { transform: scale(0.93) translateY(18px); }
  .reveal[data-reveal="fade"]  { transform: none; }

  .reveal.show{
    opacity: 1;
    transform: none;
  }
  
  /* -------------------------------------------------------
     HERO GRID (NEW)
     ------------------------------------------------------- */
  
  /* Когда hero-copy используется как hero-grid — убираем старые паддинги */
  .hero-copy.hero-grid{
    padding: 38px 34px 34px;
  }
  
  /* Основная сетка */
  .hero-grid{
    display:grid;
    grid-template-columns: 1fr 320px; /* компактнее справа */
    gap: 26px;
    align-items: center;
    min-height: 320px;
  }
  
  .hero-text{ min-width:0; }
  
  /* Правый кластер */
  .hero-visual{
    position: relative;
    min-height: 260px;
    display:flex;
    align-items: center;
    flex-direction: column;
   /*  align-items: flex-end; */ /* выравниваем по правой линии */
    justify-content: center;
    padding-right: 6px;    /* чтобы не липло к бордеру hero */
  }
  
  /* Большой рейтинг — делаем “дороже” и компактнее */
  .rating-orb{
    width: 290px;
    max-width: 100%;
    border-radius: 28px; /* вместо 999px */
    border: none;
    padding: 18px 18px 16px;
    background: transparent;
   /* background: rgba(255,255,255,.10);*/
   /* border: 1px solid rgba(255,255,255,.16);*/
   /* box-shadow: 0 18px 45px rgba(0,0,0,.16);*/
    position: relative;
    overflow: hidden;
  }
  
  .rating-orb::before{
    content:"";
    position:absolute;
    inset:-20%;
    background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.22), rgba(255,255,255,0) 58%);
   /* opacity:.85;*/
    opacity: .0;
  }
  
  .orb-top{
    position:relative;
    display:flex;
    align-items: baseline;
    gap: 10px;
  }
  .orb-star{ font-size: 20px; line-height:1; }
  .orb-score{
    font-size: 52px;
    font-weight: 750;
    line-height: 1;
    letter-spacing: .2px;
  }
  .orb-caption{
    position:relative;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 650;
    color: rgba(255,255,255,.88);
    text-transform: lowercase;
  }
  .orb-sub{
    position:relative;
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--muted);
  }
  
  /* Floating icons — делаем круглыми и “decorative”, а не как кнопки */
  .float-icon{
    position:absolute;
    display:grid;
    place-items:center;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 18px 40px rgba(0,0,0,.16);
    backdrop-filter: blur(10px);
    font-size: 22px;
    opacity: .9;
    animation: floaty 7s ease-in-out infinite;
  }
  
  .fi1{ right: 6px; top: 12px; animation-delay: -1.2s; }
  .fi2{ right: 44px; top: 98px; width: 58px; height: 58px; font-size: 24px; animation-delay: -3.1s; }
  
  @keyframes floaty{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-10px); }
  }
  
  /* Reviews — меньше ширина, меньше “веса”, больше иерархии */
  .micro-reviews{
    margin-top: 14px;
    display:grid;
    gap: 10px;
    width: 290px;
    max-width: 100%;
  }
  
  .review{
    padding: 12px 14px;
    border-radius: 20px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 18px 40px rgba(0,0,0,.14);
  }
  
  .stars{
    font-size: 12px;
    letter-spacing: 1px;
    color: rgba(255,255,255,.92);
    opacity: .85;
  }
  
  .review .text{
    margin-top: 6px;
    font-size: 13px;
    color: rgba(255,255,255,.82);
  }
  
  /* Второй отзыв менее заметный — чтобы не конкурировал с 4.8 */
  .micro-reviews .review:last-child{
    opacity: .88;
    transform: translateY(2px);
  }
  
  /* Responsive */
  @media (max-width: 980px){
    .apps{ grid-template-columns: 1fr; }
    .nav{ padding: 12px 14px; }
  }
  
  /* Mobile: stack visual under text */
  @media (max-width: 860px){
    .hero-grid{
      grid-template-columns: 1fr;
      padding: 30px 22px 22px;
      min-height: unset;
        align-items: start;
    }
  
    .hero-copy.hero-grid{
      padding: 30px 22px 22px;
    }
  
    .hero-visual{
      min-height: 220px;
      align-items: stretch;
      padding-right: 0;
    }
  
    .rating-orb, .micro-reviews{
      width: 100%;
    }
  
    .fi1{ right: 10px; top: -8px; }
    .fi2{ right: 44px; top: 80px; }
  }

  /* ===== Review avatar ===== */

.review-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}

.avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  object-fit:cover;

  /* стеклянный стиль */
  border:1px solid rgba(255,255,255,.28);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  background: rgba(255,255,255,.2);
}

.review-meta{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}

.review-meta .stars{
  font-size:12px;
  letter-spacing:1px;
}

.review-meta .name{
  font-size:12px;
  color: rgba(255,255,255,.75);
}

.avatar-fallback{
  display:grid;
  place-items:center;
  font-weight:700;
  font-size:14px;
  color: rgba(255,255,255,.9);
  background: linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,.15));
}

/* ===== Reviews slider (no markup change) ===== */

.micro-reviews{
  position: relative;
}

/* все отзывы скрыты */
.micro-reviews .review{
  display: none;
  animation: fadeIn .45s ease;
}

/* показываем только активный */
.micro-reviews .review.is-active{
  display: block;
}

@keyframes fadeIn{
  from{
    opacity: 0;
    transform: translateY(6px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

.reviews-dots{
  align-self: center; /* игнорирует flex-end родителя */
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.reviews-dots .dot{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,.3);
  cursor: pointer;
  transition: all .2s ease;
}

.reviews-dots .dot.is-active{
  width: 18px;
  background: rgba(255,255,255,.75);
}


  /* =========================
   RATING COMPONENT (TESTABLE)
   ========================= */

.rating-block{
  display: flex;
  flex-direction: column;
  align-items: center;      /* ← ЦЕНТРИРОВАНИЕ */
  text-align: center;
  gap: 4px;
  position: relative;
}

.rating-block::before {
  content: "";
  position: absolute;
  inset: -48px;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.22),
    rgba(255, 255, 255, 0) 65%
  );
  filter: blur(20px);
  z-index: -1;
}


/* большая цифра */
.rating-score{
  font-size: 72px;          /* ← БОЛЬШАЯ */
  font-weight: 800;
  line-height: 1;
  letter-spacing: .5px;
}

/* ряд эмоджи-звёзд */
.rating-stars{
  display: flex;
  gap: 2px;
  font-size: 32px;
  line-height: 1;
}

/* подпись */
.rating-sub{
  margin-top: 4px;
  font-size: 14px;
  color: rgba(255,255,255,.75);
  max-width: 24ch;
}

.hero-grid--single{
  grid-template-columns: 1fr;
  padding: 30px 22px 22px;


}

/* ===== Reviews: stack + nicer transition ===== */

.micro-reviews{
  position: relative;
  border-radius: 22px; /* чтобы фантомы совпадали по форме */
}

/* два "фантома" сзади — создают ощущение стека */
.micro-reviews::before,
.micro-reviews::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 22px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
  pointer-events:none;
  z-index: 0;
}

.micro-reviews::before{
  transform: translate(10px, 10px);
  opacity: .35;
  filter: blur(.2px);
}

.micro-reviews::after{
  transform: translate(20px, 20px);
  opacity: .20;
  filter: blur(.4px);
}

/* карточки остаются в DOM, но красиво анимируются */
.micro-reviews .review{
  display: block;              /* важно: больше НЕ display:none */
  position: absolute;          /* чтобы все отзывы были "на одном месте" */
  inset: 0;
  z-index: 2;
  opacity: 0;
  transform: translateY(10px) scale(.99);
  transition: opacity .45s ease, transform .45s ease, filter .45s ease;
  pointer-events: none;
  filter: blur(2px);

  /* чтобы watermark-кавычка не вылезала */
  overflow: hidden;
}

/* активный отзыв */
.micro-reviews .review.is-active{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  filter: blur(0);
}

/* watermark-кавычка (добавляет "дорогой" визуал) */
.micro-reviews .review::before{
  content: "“";
  position: absolute;
  top: -10px;
  right: 14px;
  font-size: 84px;
  font-weight: 800;
  line-height: 1;
  opacity: .10;
  pointer-events: none;
}

/* контейнер должен иметь высоту (иначе absolute-элементы не дают высоту) */
.micro-reviews{
  min-height: 170px; /* подстрой под свой дизайн */
}

/* ===== Dots progress (timeline) ===== */

.reviews-dots .dot{
  position: relative;
  overflow: hidden;
}

/* бегущая "заливка" внутри активной точки */
.reviews-dots .dot.is-active::after{
  content:"";
  position:absolute;
  inset: 0;
  background: rgba(255,255,255,.75);
  transform: scaleX(0);
  transform-origin: left;
  animation: dotFill var(--dotDur, 3500ms) linear forwards;
}

/* чтобы сохранялась твоя вытянутая активная точка */
.reviews-dots .dot.is-active{
  overflow: hidden;
}

@keyframes dotFill{
  to{ transform: scaleX(1); }
}


/* =============================================
   REVIEWS CAROUSEL
   ============================================= */

.reviews-section {
  margin-top: 50px;
}

/* Outer container — позиционирует кнопки поверх карусели */
.carousel-outer {
  position: relative;
  padding: 0 52px;
}

/* Обёртка трека — без маски, тени не обрезаются */
.carousel-wrapper {
  padding: 48px 0 90px;
}

/* Трек — контейнер для карточек */
.carousel-track {
  position: relative;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Карточка отзыва ── */
.r-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 340px;
  max-width: calc(100vw - 130px);
  display: flex;
  flex-direction: column;

  background: linear-gradient(160deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.08) 100%);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 26px;
  padding: 26px 24px 22px;
  box-shadow: 0 20px 50px rgba(0,0,0,.20);
  overflow: hidden;

  transition:
    transform 0.60s cubic-bezier(0.34, 1.10, 0.64, 1),
    opacity   0.55s ease,
    box-shadow 0.55s ease,
    filter    0.55s ease;

  will-change: transform, opacity, filter;
  cursor: default;
  user-select: none;
}

/* Внутренний блик */
.r-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 22% 12%, rgba(255,255,255,.22) 0%, transparent 58%);
  pointer-events: none;
  border-radius: inherit;
}

/* Декоративная кавычка */
.r-card::after {
  content: "\201C";
  position: absolute;
  top: -4px;
  right: 14px;
  font-size: 110px;
  font-weight: 800;
  line-height: 1;
  color: rgba(255,255,255,.07);
  pointer-events: none;
}

/* ── Позиции карточек (data-offset устанавливается JS) ── */

/* Центральная — активная */
.r-card[data-offset="0"] {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  z-index: 5;
  box-shadow:
    0 32px 80px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.28),
    0 0 50px rgba(255,255,255,.07);
  filter: blur(0);
}

/* ±1 */
.r-card[data-offset="1"] {
  transform: translate(calc(-50% + 310px), -50%) scale(0.83);
  opacity: 0.52;
  z-index: 3;
  filter: blur(0.6px);
}
.r-card[data-offset="-1"] {
  transform: translate(calc(-50% - 310px), -50%) scale(0.83);
  opacity: 0.52;
  z-index: 3;
  filter: blur(0.6px);
}

/* ±2 — скрыты, чтобы не выходить за пределы контейнера */
.r-card[data-offset="2"],
.r-card[data-offset="-2"] {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.65);
}

/* Скрытые (вне диапазона -2..+2) */
.r-card:not([data-offset="0"]):not([data-offset="1"]):not([data-offset="-1"]):not([data-offset="2"]):not([data-offset="-2"]) {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.55);
}

/* ── Содержимое карточки ── */

.r-stars {
  font-size: 18px;
  letter-spacing: 3px;
  color: #FFD055;
  margin-bottom: 12px;
  text-shadow: 0 0 12px rgba(255, 208, 85, .45);
}

.r-text {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.58;
  color: rgba(255,255,255,.87);
  flex: 1;
}

.r-author {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.10);
  margin-top: auto;
}

.r-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  flex: 0 0 auto;
  border: 1.5px solid rgba(255,255,255,.28);
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}

.r-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.r-name {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,.92);
}

.r-app {
  font-size: 12px;
  color: rgba(255,255,255,.55);
}

/* ── Кнопки навигации ── */

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.90);
  cursor: pointer;
  display: grid;
  place-items: center;
  backdrop-filter: blur(12px);
  z-index: 10;
  transition:
    transform .20s cubic-bezier(0.34, 1.4, 0.64, 1),
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.carousel-btn:hover {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.40);
  transform: translateY(-50%) scale(1.10);
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
}

.carousel-btn:active {
  transform: translateY(-50%) scale(0.96);
}

.carousel-prev { left: 0; }
.carousel-next { right: 0; }

/* ── Индикаторные точки ── */

.carousel-dots-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: -58px; /* подтягиваем в область тени карточки */
  position: relative;
  z-index: 6; /* выше карточек, ниже кнопок */
}

.cdot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,.28);
  cursor: pointer;
  padding: 0;
  position: relative;
  overflow: hidden;
  transition: width .30s cubic-bezier(0.34, 1.2, 0.64, 1), background .25s ease;
}

.cdot.cdot-active {
  width: 26px;
  background: rgba(255,255,255,.50);
}

/* Прогресс-заливка активной точки */
.cdot.cdot-active::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.90);
  transform: scaleX(0);
  transform-origin: left;
  animation: cdotFill 3000ms linear forwards;
}

@keyframes cdotFill {
  to { transform: scaleX(1); }
}

/* ── Адаптив ── */

@media (max-width: 860px) {
  .carousel-outer { padding: 0 46px; }

  .r-card[data-offset="1"] {
    transform: translate(calc(-50% + 260px), -50%) scale(0.82);
    opacity: 0.45;
  }
  .r-card[data-offset="-1"] {
    transform: translate(calc(-50% - 260px), -50%) scale(0.82);
    opacity: 0.45;
  }
  .r-card[data-offset="2"],
  .r-card[data-offset="-2"] {
    opacity: 0;
    pointer-events: none;
  }
}

@media (max-width: 560px) {
  .carousel-outer { padding: 0 40px; }
  .carousel-wrapper { padding: 36px 0 28px; }
  .carousel-track { height: 270px; }

  .r-card {
    width: calc(100vw - 100px);
    max-width: 320px;
    padding: 22px 18px 18px;
  }

  .r-card[data-offset="1"] {
    transform: translate(calc(-50% + 200px), -50%) scale(0.80);
    opacity: 0.35;
  }
  .r-card[data-offset="-1"] {
    transform: translate(calc(-50% - 200px), -50%) scale(0.80);
    opacity: 0.35;
  }

  .carousel-btn { width: 38px; height: 38px; }
}

/* =============================================
   HERO FLOATING CLUSTER
   ============================================= */

.float-cluster {
  position: relative;
  width: 270px;
  height: 250px;
  flex: 0 0 auto;
}

/* Sparkle частицы */
.sp {
  position: absolute;
  line-height: 1;
  pointer-events: none;
  animation: spDrift 5s ease-in-out infinite, spFade 5s ease-in-out infinite;
}

@keyframes spDrift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-10px) rotate(15deg); }
}

@keyframes spFade {
  0%, 100% { opacity: .25; }
  50%       { opacity: .85; }
}

/* Размеры, позиции, задержки */
.sp-1 { font-size: 26px; top: 8px;  left: 10px;  color: #FFD055; animation-delay: 0s;     animation-duration: 5.5s; }
.sp-2 { font-size: 14px; top: 20px; right: 18px; color: #fff;    animation-delay: -1.2s;  animation-duration: 4.8s; }
.sp-3 { font-size: 10px; top: 50%;  left: 4px;   color: #FFD055; animation-delay: -2.8s;  animation-duration: 6.2s; }
.sp-4 { font-size: 20px; bottom: 18px; left: 14px; color: #fff;  animation-delay: -0.6s;  animation-duration: 5.0s; }
.sp-5 { font-size: 13px; bottom: 10px; right: 12px; color: #FFD055; animation-delay: -3.5s; animation-duration: 4.5s; }
.sp-6 { font-size: 8px;  top: 30px; left: 42%;   color: #fff;    animation-delay: -4.2s;  animation-duration: 6.8s; }
.sp-7 { font-size: 18px; top: 12px; right: 46px; color: #FFD055; animation-delay: -1.8s;  animation-duration: 5.2s; }
.sp-8 { font-size: 9px;  bottom: 35px; right: 6px; color: #fff;  animation-delay: -5s;    animation-duration: 4.2s; }

@keyframes fcFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-11px); }
}

@keyframes fcFloatCenter {
  0%, 100% { transform: translate(-50%, -50%) translateY(0px); }
  50%       { transform: translate(-50%, -50%) translateY(-11px); }
}

/* Рейтинг-бейдж в центре поверх иконок */
.fc-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  background: linear-gradient(
    160deg,
    rgba(255,255,255,.34) 0%,
    rgba(255,228,130,.10) 52%,
    rgba(255,255,255,.16) 100%
  );
  border: 1px solid rgba(255,255,255,.44);
  border-radius: 26px;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  padding: 18px 28px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  box-shadow:
    0 24px 64px rgba(0,0,0,.38),
    0 0 0 1px rgba(255,255,255,.18) inset,
    0 2px 0 rgba(255,255,255,.44) inset;
  white-space: nowrap;
  z-index: 6;
  animation: fcFloatCenter 6s ease-in-out infinite;
  animation-delay: -2.5s;
  overflow: hidden;
}

/* Shimmer-пробег поверх карточки */
.fc-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    108deg,
    transparent 25%,
    rgba(255,255,255,.20) 50%,
    transparent 75%
  );
  clip-path: inset(0 round 26px);
  transform: translateX(-120%);
  animation: shimmerSweep 4.5s ease-in-out infinite;
  animation-delay: -0.5s;
  pointer-events: none;
}

@keyframes shimmerSweep {
  0%   { transform: translateX(-120%); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(220%); opacity: 0; }
}

/* Ореол — отдельный элемент, чтобы не конфликтовать с overflow:hidden на бейдже */
.fc-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 210px;
  height: 160px;
  background: radial-gradient(circle,
    rgba(255,255,255,.24) 0%,
    rgba(255,208,85,.14) 45%,
    transparent 70%
  );
  filter: blur(18px);
  z-index: 5;
  pointer-events: none;
  border-radius: 50%;
  animation: haloBreath 4s ease-in-out infinite;
  animation-delay: -2.5s;
}

@keyframes haloBreath {
  0%, 100% { opacity: .85; transform: translate(-50%, -50%) scale(1); }
  50%       { opacity: 1;   transform: translate(-50%, -50%) scale(1.12); }
}

.fc-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(255,255,255,.50);
  margin-bottom: 2px;
}

.fc-divider {
  width: 44px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,208,85,.55), transparent);
  margin: 3px 0 1px;
}

.fc-score {
  font-size: 56px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -2px;
  text-shadow: 0 2px 24px rgba(255,255,255,.28);
}

.fc-stars {
  font-size: 17px;
  letter-spacing: 4px;
  color: #FFD055;
  text-shadow:
    0 0 8px  rgba(255,208,85,.80),
    0 0 24px rgba(255,208,85,.50);
  animation: starsGlow 3.5s ease-in-out infinite;
}

@keyframes starsGlow {
  0%, 100% {
    text-shadow: 0 0 8px rgba(255,208,85,.80), 0 0 24px rgba(255,208,85,.50);
  }
  50% {
    text-shadow: 0 0 14px rgba(255,208,85,1), 0 0 40px rgba(255,208,85,.70);
  }
}

.fc-sub {
  font-size: 11px;
  color: rgba(255,255,255,.60);
  font-weight: 500;
  letter-spacing: .4px;
  margin-top: 1px;
}

/* Адаптив — центрируем кластер на мобилке */
@media (max-width: 860px) {
  .hero-visual {
    align-items: center;
  }

  .float-cluster {
    width: 240px;
    height: 220px;
  }

  .fc-1 { width: 82px; height: 82px; }
  .fc-2 { width: 70px; height: 70px; }
  .fc-3 { width: 74px; height: 74px; }
  .fc-4 { width: 66px; height: 66px; }
}

/* =============================================
   NAV ACCENT PILL
   ============================================= */

.pill-accent {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.28);
  font-weight: 600;
}
.pill-accent:hover {
  background: rgba(255,255,255,.26);
  border-color: rgba(255,255,255,.40);
}

/* =============================================
   STATS BAR
   ============================================= */

.stats-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius2);
  box-shadow: var(--shadow2);
  padding: 22px 28px;
  margin-top: 14px;
  gap: 0;
}

.stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
}

.stat-num {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.5px;
  color: var(--text);
}

.stat-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: .2px;
}

.stat-sep {
  width: 1px;
  height: 38px;
  background: rgba(255,255,255,.14);
  flex: 0 0 auto;
}

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

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}

.about-lead {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 14px;
}

.about-body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
}

.about-values {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.value-card {
  background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow2);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
  position: relative;
  overflow: hidden;
}

/* top shimmer line */
.value-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
}

.value-card:hover {
  transform: translateX(4px);
  background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
  border-color: rgba(255,255,255,.24);
}

/* Icon orb */
.value-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  font-size: 17px;
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}

/* Per-card accent colors */
.value-card:nth-child(1) .value-icon {
  background: linear-gradient(135deg, rgba(122, 85, 255, .55), rgba(180, 130, 255, .35));
}
.value-card:nth-child(2) .value-icon {
  background: linear-gradient(135deg, rgba(224, 75, 122, .55), rgba(255, 140, 180, .35));
}
.value-card:nth-child(3) .value-icon {
  background: linear-gradient(135deg, rgba(60, 170, 255, .55), rgba(120, 210, 255, .35));
}

.value-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 3px;
  letter-spacing: .1px;
}

.value-body {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

/* =============================================
   WORK WITH US (COLLAB)
   ============================================= */

.collab-card {
  background: linear-gradient(135deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.07) 100%);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  padding: 36px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  position: relative;
  overflow: hidden;
}

.collab-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 50%, rgba(255,255,255,.12), transparent 55%);
  pointer-events: none;
}

.collab-left { flex: 1; min-width: 0; position: relative; }

.collab-title {
  margin: 12px 0 10px;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.1;
}

.collab-body {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
  max-width: 52ch;
}

.collab-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ctag {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.10);
  color: rgba(255,255,255,.80);
}

.collab-cta {
  flex: 0 0 auto;
  position: relative;
}

/* =============================================
   CONTACT
   ============================================= */

.contact-card {
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius2);
  box-shadow: var(--shadow2);
  padding: 48px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.contact-title {
  margin: 0;
  font-size: clamp(24px, 3vw, 34px);
}

.contact-body {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
  max-width: 50ch;
}

.contact-email {
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  padding: 14px 30px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.24);
  transition: background .18s ease, transform .18s ease, border-color .18s ease;
  letter-spacing: .2px;
}

.contact-email:hover {
  background: rgba(255,255,255,.20);
  border-color: rgba(255,255,255,.36);
  transform: translateY(-2px);
}

/* Contact form */
.contact-form {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}

.cf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.cf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cf-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: rgba(255,255,255,.60);
}

.cf-input {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  outline: none;
  transition: background .18s ease, border-color .18s ease;
  width: 100%;
  box-sizing: border-box;
}

.cf-input::placeholder {
  color: rgba(255,255,255,.35);
}

.cf-input:focus {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.40);
}

.cf-textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.5;
}

.cf-submit {
  align-self: flex-end;
  margin-top: 4px;
}

.cf-input--error {
  border-color: rgba(255, 100, 100, .6);
  background: rgba(255, 80, 80, .08);
}

.cf-error {
  font-size: 12px;
  color: rgba(255, 160, 160, .95);
  margin-top: 2px;
}

/* Success state — hidden by default, shown via .is-visible */
.cf-success {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px;
}
.cf-success.is-visible {
  display: flex;
  animation: cfFadeIn .4s ease;
}

.cf-success-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(122,85,255,.5), rgba(60,170,255,.4));
  border: 1px solid rgba(255,255,255,.22);
  display: grid;
  place-items: center;
  font-size: 22px;
}

.cf-success p {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}

@keyframes cfFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 560px) {
  .cf-row { grid-template-columns: 1fr; }
  .cf-submit { align-self: stretch; text-align: center; }
}

/* =============================================
   RESPONSIVE — new sections
   ============================================= */

@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; }

  .collab-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px;
    gap: 24px;
  }

  .collab-cta { align-self: flex-start; }
}

@media (max-width: 560px) {
  .stats-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 20px;
  }
  .stat-sep { display: none; }

  .contact-card { padding: 32px 20px; }
}

.policy {
  max-width: 900px;      /* комфортная ширина для чтения */
  margin: 0 auto;          /* центрирование */
  padding: 0 20px;         /* глобальные отступы слева/справа */
  box-sizing: border-box;
  margin-top: 50px;
  margin-bottom: 70px;
}

.policy h1 {
  text-align: center;
}
/* только ссылки с кастомным стилем */
.policy a.external-link {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.7;
  transition: color 0.2s ease, text-decoration-color 0.2s ease, opacity 0.2s ease;
}

.policy a.external-link:hover {
  color: #8d2a8e;
  text-decoration-color: transparent;
  opacity: 1;
}

.policy a.external-link::after {
  content: "↗";
  font-size: 0.75em;
}

.policy p {
  line-height: 1.6;
  margin-bottom: 1.2em;
}

.policy ul {
  margin-top: 0.8em;
  margin-bottom: 1.2em;
}

.policy li {
  margin-bottom: 6px;
}