:root{
  --bg:#000;
  --bg-2:#262626;
  --fg:#fff;
  --muted:#b4b4b4;
  --blue:#2759E5;
  --card:rgba(255,255,255,.04);
  --glass:rgba(255,255,255,.05);
  --ring: color-mix(in oklab, var(--blue) 75%, white 25%);
  --radius:20px;
  --shadow:0 20px 60px rgba(0,0,0,.65);
  --grad:linear-gradient(180deg,#262626 0%,#000 100%);
}

/* не даём странице расширяться по X */
html,
body{
  max-width:100%;
  overflow-x:hidden;
}

*{box-sizing:border-box}

body{
  margin:0;
  color:var(--fg);
  background:var(--grad);
  font-family:Inter,system-ui;
  -webkit-font-smoothing:antialiased;
}

.container{
  width:min(1160px,100% - 2rem);
  margin-inline:auto;
}

.muted{color:var(--muted)}
.center{text-align:center}

/* HEADER */

.site-header{
  position:sticky;
  top:0;
  z-index:40;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:.75rem .75rem;
  background:color-mix(in oklab,#000 78%,#fff 6%);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.brand{
  display:flex;
  gap:.6rem;
  align-items:center;
  text-decoration:none;
  color:var(--fg);
}

.brand__icon{border-radius:.6rem}

.nav{
  display:flex;
  align-items:center;
  gap:.5rem;
}

/* BURGER ICON (SVG) */

.nav__toggle{
  display:none;
  width:42px;
  height:42px;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(0,0,0,.55);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(12px) saturate(160%);
  transition:background .25s ease, border-color .25s ease;
}

.nav__toggle:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.25);
}

.icon{
  stroke:#fff;
  stroke-width:2.3;
  stroke-linecap:round;
  fill:none;
  transition:transform .35s ease;
}

.line{
  transition:transform .35s ease, opacity .25s ease;
  transform-origin:12px 12px; /* центр иконки */
}

/* открытое состояние — аккуратный крестик */

.nav__toggle.is-open .line.top{
  transform:rotate(45deg);
}

.nav__toggle.is-open .line.bottom{
  transform:rotate(-45deg);
}

.nav__toggle.is-open .icon{
  transform:rotate(90deg);
}

/* nav list */

.nav__list{
  display:flex;
  gap:.75rem;
  list-style:none;
  margin:0;
  padding:0;
  align-items:center;
}

.nav__list a{
  color:var(--fg);
  text-decoration:none;
  padding:.55rem .85rem;
  border-radius:12px;
}

.nav__list a:hover{background:var(--glass)}

/* BUTTONS */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.8rem 1.1rem;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  text-decoration:none;
  color:var(--fg);
  background:var(--glass);
}

.btn--primary{
  background:linear-gradient(180deg, color-mix(in oklab,var(--blue) 80%, #000 20%), #111c55);
  border-color:color-mix(in oklab,var(--blue) 70%, #000 30%);
  box-shadow:0 12px 30px color-mix(in oklab,var(--blue) 25%, #000 75%);
}

.btn--ghost{background:transparent}
.btn--small{padding:.55rem .85rem}
.btn--xl{padding:1rem 1.25rem;font-weight:700}

/* HERO */

.hero{
  padding:56px 0 24px;
  position:relative;
  overflow:clip;
}

.hero__wrap{
  display:grid;
  justify-items:center;
  text-align:center;
  gap:12px;
  position:relative;
  z-index:1;
}

.hero__title{
  margin:0;
  font-size:clamp(28px,4.6vw,48px);
  line-height:1.1;
  font-weight:800;
  color:var(--fg);
  position:relative;
  z-index:2;
}

.hero__subtitle{
  color:var(--muted);
  max-width:760px;
  margin:0;
  position:relative;
  z-index:2;
}

.hero__actions{
  display:flex;
  gap:.75rem;
  margin-top:.2rem;
  flex-wrap:wrap;
  position:relative;
  z-index:2;
}

.hero__stage{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
  margin-top:12px;
}

/* KPIs & DEVICE */

.kpi{
  display:grid;
  gap:14px;
}

.kpi__card{
  background:var(--card);
  border:1px солid rgba(255,255,255,.08);
  border-radius:16px;
  padding:.9rem 1rem;
  box-shadow:var(--shadow);
}

.kpi__label{
  color:var(--muted);
  font-size:.9rem;
}

.kpi__value{
  font-size:1.8rem;
  font-weight:800;
}

.kpi__delta{
  color:var(--fg);
  background:rgba(39,89,229,.18);
  border:1px solid rgba(39,89,229,.35);
  padding:.1rem .45rem;
  border-radius:999px;
  font-size:.8rem;
}

.kpi__list{
  display:flex;
  gap:.4rem;
  flex-wrap:wrap;
  padding:0;
  margin:.25rem 0 0;
  list-style:none;
}

.device{
  width:min(380px,78vw);
  aspect-ratio:9/19.5;
  border-radius:36px;
  background:#0b0b0b;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}

.device__screen{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.2;
  filter:contrast(120%) saturate(120%);
}

.device__glow{
  position:absolute;
  inset:0;
  background:radial-gradient(50% 70% at 50% 20%, rgba(39,89,229,.22), transparent 60%);
}

/* HERO RAILS BACKGROUND */

.hero--rails{
  position:relative;
}

.hero--rails .hero__bg{
  --railClr: rgba(39,89,229,.35);
  --railGlow: rgba(39,89,229,.12);
  position:absolute;
  inset:-12% 0 -20% 0;
  overflow:hidden;
  background:
    radial-gradient(60% 30% at 50% 0%, var(--railGlow), transparent 60%),
    var(--grad);
  z-index:0;
}

.hero--rails .hero__bg::before{
  content:"";
  position:absolute;
  inset:-25% 0 -25% 0;
  background:
    repeating-linear-gradient(
      100deg,
      transparent 0 46px,
      var(--railClr) 46px 48px,
      transparent 48px 64px,
      var(--railClr) 64px 66px,
      transparent 66px 112px
    );
  filter:blur(8px) saturate(120%);
  opacity:.42;
  animation:railsMove 18s linear infinite;
}

.hero--rails .hero__bg::after{
  content:"";
  position:absolute;
  inset:-30% 0 auto 0;
  height:70%;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(22% 60% at 65% 40%, rgba(39,89,229,.25), transparent 70%);
  mix-blend-mode:screen;
  opacity:.35;
  animation:sweep 9s ease-in-out infinite;
}

@keyframes railsMove{
  to{ transform:translateX(-30%) translateY(10%); }
}

@keyframes sweep{
  0%,100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(6%) scale(1.06); }
}

@media (prefers-reduced-motion: reduce){
  .hero--rails .hero__bg::before,
  .hero--rails .hero__bg::after{
    animation:none;
  }
}

/* LOGOS */

.logos{
  display:grid;
  grid-auto-flow:column;
  gap:28px;
  align-items:center;
  justify-content:center;
  opacity:.65;
  margin-top:20px;
}

.logos img{
  height:28px;
  filter:grayscale(1) contrast(110%);
  opacity:.9;
}

/* SECTIONS */

.section{
  padding:64px 0;
}

.section--alt{
  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}

.section__head{
  margin-bottom:18px;
}

/* eyebrow label для why-секции и др. */

.section__eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.2rem .75rem;
  margin-bottom:.5rem;
  border-radius:999px;
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:var(--muted);
}

/* FEATURE ICON */

.feature-icon{
  flex:0 0 40px;
  width:40px;
  height:40px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 30% 20%, #fff 0, rgba(255,255,255,.2) 18%, transparent 40%),
    radial-gradient(circle at 70% 80%, rgba(39,89,229,.8), rgba(39,89,229,.1));
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 10px 30px rgba(0,0,0,.7);
}

.feature-icon--soft{
  background:
    radial-gradient(circle at 30% 20%, #fff 0, rgba(255,255,255,.18) 18%, transparent 40%),
    radial-gradient(circle at 70% 80%, rgba(39,89,229,.6), rgba(39,89,229,.08));
}

.feature-icon svg{
  width:20px;
  height:20px;
  stroke:#fff;
  fill:none;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ICON GRID */

.icon-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}

.icon-card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:1rem;
  box-shadow:0 8px 30px rgba(0,0,0,.45);
  display:flex;
  gap:.9rem;
  align-items:flex-start;
}

.icon-card__body{
  flex:1;
}

.icon-card h3{
  margin:.1rem 0 .35rem;
}

/* TOOLS GRID */

.tools-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.tool-card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:1rem;
  min-height:180px;
  display:flex;
  gap:.9rem;
  align-items:flex-start;
}

.tool-card__body{
  flex:1;
}

.tool-card--kpi .gauge{
  display:grid;
  place-items:center;
  width:100%;
  aspect-ratio:1;
  border-radius:16px;
  background:radial-gradient(circle at 50% 50%, rgba(39,89,229,.2), rgba(39,89,229,.05) 60%, transparent 62%);
  font-weight:800;
  font-size:2.2rem;
}

/* WHY STATS (нижняя плашка в why-секции) */

.why-stats{
  margin-top:26px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}

.why-stat{
  background:rgba(255,255,255,.04);
  border-radius:999px;
  padding:.45rem .9rem;
  border:1px solid rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  gap:.4rem;
}

.why-stat__value{
  font-weight:700;
  font-size:.95rem;
}

.why-stat__unit{
  font-size:.7rem;
  margin-left:.15rem;
  color:var(--muted);
}

.why-stat__label{
  font-size:.8rem;
  color:var(--muted);
}

/* TESTIMONIALS */

.testimonials{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.quote{
  background:var(--card);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:1rem;
  margin:0;
  box-shadow:0 8px 30px rgba(0,0,0,.45);
  display:flex;
  flex-direction:column;
  gap:.7rem;
}

.quote__header{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin:0;
}

.quote__avatar{
  width:40px;
  height:40px;
  border-radius:999px;
  object-fit:cover;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.16),
    0 10px 24px rgba(0,0,0,.75);
}

.quote__meta{
  display:flex;
  flex-direction:column;
  gap:.1rem;
}

.quote__name{
  font-weight:600;
  font-size:.95rem;
}

.quote__role{
  margin:0;
  font-size:.8rem;
  color:var(--muted);
}

.quote blockquote{
  margin:0;
  font-size:.95rem;
  line-height:1.5;
  color:var(--fg);
}

/* адаптив для сетки отзывов */
@media (max-width:900px){
  .testimonials{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

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

/* SUBSCRIPTION */

.subscription-card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:1.1rem 1.2rem;
  box-shadow:0 8px 30px rgba(0,0,0,.5);
  max-width:720px;
  margin-inline:auto;
  display:grid;
  gap:.75rem;
}

.subscription-card__header{
  display:flex;
  gap:.9rem;
  align-items:flex-start;
}

.subscription-list{
  margin:.35rem 0 0;
  padding-left:1.25rem;
  color:var(--muted);
}

/* новый низ карточки + app store badge */

.subscription-card__footer{
  margin-top:.4rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  flex-wrap:wrap;
}

.subscription-card__note{
  font-size:.8rem;
}

.store-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.25);
  background:#000;
  box-shadow:0 10px 30px rgba(0,0,0,.75);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.store-badge img{
  display:block;
  height:40px;
  width:auto;
}

.store-badge:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 36px rgba(0,0,0,.9);
  border-color:rgba(255,255,255,.4);
}

.store-badge:active{
  transform:translateY(0);
  box-shadow:0 8px 26px rgba(0,0,0,.8);
}

/* чуть ужимаем на мобиле */

@media (max-width:640px){
  .subscription-card__footer{
    align-items:flex-start;
  }

  .subscription-card__note{
    max-width:100%;
  }

  .store-badge img{
    height:36px;
  }
}


/* CTA */

.cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:1rem;
}

/* FOOTER */

.site-footer{
  padding:56px 0 72px;
  border-top:1px solid rgba(255,255,255,.06);
  display:grid;
  gap:10px;
  place-items:center;
}

.footer__nav{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}

.footer__nav a{
  color:var(--muted);
  text-decoration:none;
}

.footer__nav a:hover{color:var(--fg)}

/* RESPONSIVE */

@media (max-width:1100px){
  .tools-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:900px){
  .hero{
    padding:32px 0 16px;
  }

  .hero__stage{
    margin-top:10px;
    grid-template-columns:1fr;
    gap:16px;
  }

  .tools-grid{
    grid-template-columns:1fr 1fr;
  }

  .icon-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:768px){
  .site-header{
    padding:.5rem .75rem;
  }

  .nav__toggle{
    display:flex;
  }

  .nav__list{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    margin-top:0;
    background:color-mix(in oklab,#000 88%,#fff 8%);
    backdrop-filter:blur(16px) saturate(160%);
    border-bottom:1px solid rgba(255,255,255,.06);
    flex-direction:column;
    gap:.25rem;
    padding:.6rem .75rem 1rem;
    transform:translateY(-120%);
    opacity:0;
    pointer-events:none;
    transition:transform .18s ease, opacity .18s ease;
    z-index:39;
  }

  .nav__list.is-open{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }

  .nav__list a{
    width:100%;
    justify-content:flex-start;
  }

  .nav__list li{
    display:flex;
  }

  .nav__list li:last-child a,
  .nav__list li:nth-last-child(2) a{
    width:100%;
    justify-content:center;
  }
}

@media (max-width:640px){
  .icon-grid,
  .tools-grid{
    grid-template-columns:1fr;
  }

  .cta{
    flex-direction:column;
    align-items:flex-start;
  }

  .hero{
    padding:24px 0 12px;
  }

  .hero__wrap{
    gap:8px;
  }

  .hero__title{
    font-size:clamp(24px, 6vw, 34px);
  }

  .hero__stage{
    margin-top:8px;
  }

  .kpi__card{
    padding:.7rem .85rem;
    border-radius:14px;
  }

  .kpi__value{
    font-size:1.6rem;
  }

  .subscription-card{
    padding:1rem;
  }

  /* why stats на мобиле в колонку */
  .why-stats{
    align-items:stretch;
    flex-direction:column;
  }

  .why-stat{
    justify-content:flex-start;
  }
}

/* SCROLL ANIMATIONS */

@supports (animation-timeline:view()){
  .icon-card,
  .tool-card,
  .subscription-card,
  .quote{
    animation:rise .8s ease both;
    animation-timeline:view();
    animation-range:entry 20% cover 35%;
  }

  @keyframes rise{
    from{opacity:.0;transform:translateY(14px)}
    to{opacity:1;transform:translateY(0)}
  }
}

.subscription-card__footer--centered{
  margin-top:1rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.1rem;
  text-align:center;
}

.store-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  overflow:hidden;
  background:#000;
  border:1px solid rgba(255,255,255,.18);
  padding:0;
  box-shadow:0 12px 32px rgba(0,0,0,.7);
  transition:transform .15s ease, box-shadow .15s ease;
}

.store-badge img{
  display:block;
  height:80px; /* <-- стало больше */
  width:auto;
}

.store-badge:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(0,0,0,.85);
}

@media (max-width:600px){
  .store-badge img{
    height:70px; /* чуть меньше на мобиле */
  }
}