:root{
  --brand:#3b58ff;
  --brand-2:#6e88ff;
  --brand-dark:#1e2b7b;
  --navbar-active-color:var(--brand); !important;
  --bs-navbar-active-color:var(--brand); !important;
  --fn-ico-box: 46px;
  --fn-ico-size: 46px;
  --fn-gap-y: 28px;
  --screens-gap: 32px;       /* расстояние между телефонами */
  --screens-w:   360px;      /* ширина скрина (подгони при желании) */
  --screens-h:   720px;      /* высота, ограничение по max-height */
}

@media (min-width: 1200px){
  :root{
    --fn-ico-box: 40px;
    --fn-ico-size: 40px;
    --fn-gap-y: 28px;
  }
}

html{scroll-behavior:smooth}
.lead-muted{color:#5f6b85}
.btn-brand{background:var(--brand); color:#fff; border:none}
.btn-brand:hover{background:#2f46d6; color:#fff}
.btn-outline-brand{color:var(--brand); border-color:var(--brand)}
.btn-outline-brand:hover{background:var(--brand); color:#fff}

body {
  background-color: #a0ceff;
}
.topbar{
  z-index: 1000;
  position: relative;
  
}
.topbar a.link-secondary:hover{color:var(--brand)!important}
.navbar-nav .nav-link{
  text-transform:uppercase; font-weight:600; letter-spacing:.02em;
  padding:.75rem .85rem;
}
.navbar-nav .nav-link .active{
  color: var(--brand) !important;
}
 .nav-link {
    &.active,
    &.show {
      color: var(--#{$prefix}navbar-active-color) !important;
    }
  }

.link-top, .text-top, .social-top{
  color: #fff;
  font-size: large;
   z-index: 1000;
}
.navbar-brand {
  display: inline;
  min-width: 220px;
}

.link-top { display:inline-flex; align-items:center; justify-content:center; }

/* единый размер для иконок */
.icon, .link-top i {
  width: 1.25rem;
  height: 1.25rem;
  line-height: 1;
}

/* VK как маска из файла */
.icon-vk{
  background-color: currentColor; /* цвет иконки = цвет текста */
  -webkit-mask: url("/assets/img/vk.svg") no-repeat center;
  mask: url("/assets/img/vk.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  border-radius: 50%;
  
}

/* если в хедере иконки должны быть белыми */
.header-dark .link-top { color:#fff; }

/* VK как маска из файла */
.icon-vk{
  background-color: currentColor; /* цвет иконки = цвет текста */
  -webkit-mask: url("/assets/img/vk.svg") no-repeat center;
  mask: url("/assets/img/vk.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.icon-vk-mobile{
  background: var(--brand);
  -webkit-mask: url("/assets/img/vk.svg") no-repeat center;
  mask: url("/assets/img/vk.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
}

/* Hero */
.hero {                /* фон как у тебя */
  position: relative;
  background-image: url("../img/bg1.jpg");
  background-size: cover;
  background-position: center;
  padding: 130px 0;
}

.hero-card{
  position: relative;
  background: #fff;
  padding: 32px 28px;
  box-shadow: 0 16px 48px rgba(16,24,40,.12);
  max-width: 470px;
}

/* Синий контур под карточкой (смещённый) */
.hero-card::after {
  content: "";
  position: absolute;
  left: 50px;
  top: -70px;
  width: calc(100% + 52px);
  height: calc(100% + 152px);
  border: 16px solid var(--brand);
  z-index: -1;
}

/* Типографика как в макете */
.hero-eyebrow{
  text-transform: uppercase;
  color: var(--brand-dark);
  letter-spacing: .06em;
  font-weight: 700;
  margin-bottom: .25rem;
}

.hero-title{
  color: var(--brand);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: 1rem;
}

.hero-text{ color:#5f6b85; margin-bottom:1.5rem; line-height:1.55; }

/* Картинка телефона */
.hero .device-mockup{
  max-width: 420px;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,.15));
}

/* Адаптив: чуть меньше контур на мобиле */
@media (max-width: 991.98px){
  .hero-card{ margin: 0 auto; }
  .hero-card::after{
    left:-18px; top:-18px;
    width: calc(100% + 36px);
    height: calc(100% + 36px);
    border-width: 6px;
  }
}


/* Sections */
section{padding:72px 0}
.section-title{color:var(--brand-dark)}
.rounded-2xl{border-radius:20px}

/* Functions */
/* ===== Функции приложения ===== */
.fn-section{
  position: relative;
  background-image: url("../img/bg2.jpg");
  background-size: cover;
  background-position: center; 
  color:#fff;
  padding-top:72px; padding-bottom:72px;
  overflow:hidden;
}
/* лёгкие фигуры на фоне (декор)
.fn-section::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
   linear-gradient(140deg, rgba(255,255,255,.14), transparent 60%) 70% 80%/40% 45% no-repeat,
   linear-gradient(200deg, rgba(255,255,255,.10), transparent 60%) 90% 95%/25% 35% no-repeat;
} */

/* список и пункт */
.fn-list{ display:flex; flex-direction:column; gap:var(--fn-gap-y); }
.fn-item{
  display:grid;
  grid-template-columns: auto 1fr;   /* иконка | текст */
  column-gap: 24x;
  align-items:flex-start;
  margin-bottom: 50px;
}

/* обёртка иконки — фиксируем «клетку», выравниваем по базовой линии заголовка */
.fn-ico-wrap{
  width: var(--fn-ico-box);
  height: var(--fn-ico-box);
  display:grid;
  place-items:center;
  line-height:1;
  margin: -10px 48px 0 0;      /* лёгкое выравнивание с заголовком */
}

/* сама иконка — большой line-icon */
.fn-ico{
  font-size: var(--fn-ico-size);
  color:#fff;
  opacity:.98;
}

/* типографика текста рядом с иконкой */
.fn-item h6{ margin:0 0 4px; font-weight:700; color:#fff; }
.fn-item p { margin:0; color:rgba(255,255,255,.85); }

/* — центральные пункты сверху/снизу — */
.fn-center{ color:#fff; }
.fn-center .fn-ico-wrap{ margin:0 auto 40px; }
.fn-center h6{
  margin:6px 0 4px; font-weight:700; text-transform:uppercase; letter-spacing:.01em;
}
.fn-center p{ margin:0; color:rgba(255,255,255,.85); }

/* симметрия колонок относительно телефона */
.fn-left  { padding-right: 32px; }
.fn-right { padding-left:  32px; }

/* мобилка: всё по центру, иконка сверху, текст под ней */
@media (max-width: 991.98px){
  .fn-left,.fn-right{ padding:0 }
  .fn-item{ grid-template-columns:1fr; text-align:center }
  .fn-ico-wrap{ margin:0 auto 30px;}
  .fn-center{ margin:18px 0; }
}

/* Телефон по центру + тень */
.fn-phone{
  max-height:560px;
  filter: drop-shadow(0 20px 60px rgba(0,0,0,.35));
}

/* ----- Мобилка: центрирование и порядок ----- */
@media (max-width: 991.98px){
  /* 3 пункта сверху, потом телефон, потом 3 пункта — порядок уже 1-2-3 в HTML */
  .fn-section .col-lg-4{ text-align:center; }

  /* Центрируем карточки: иконка сверху, текст под ней */
  .fn-item{ flex-direction:column; align-items:center; text-align:center; }
  .fn-ico{ margin:0 auto 6px; }
  .fn-list{ gap:18px; }
}



/* Carousel */
/* ===== Screens slider (как на референсе) ===== */
#screens{ padding:72px 0; }

.screen-slider{ position:relative; }
.screen-slider .viewport{ overflow:hidden; }
.screen-slider .track{
  display:flex; align-items:center; gap: var(--screens-gap);
  padding: 6px 0; transition: transform .55s ease;
  will-change: transform;
}
.screen-slider .slide{ flex: 0 0 auto; width: var(--screens-w); display:flex; justify-content:center; }
.screen-slider img{
  width:100%; height:auto; max-height: var(--screens-h);
  border-radius: 26px; display:block;
  transition: transform .35s ease, opacity .35s ease, filter .35s ease, box-shadow .35s ease;
  opacity:.35; transform: scale(.92); filter: saturate(90%);
  box-shadow: 0 10px 28px rgba(16,24,40,.15);
}
/* для незаметного ребейза в середину */
.screen-slider .track.no-trans { transition: none !important; }
/* соседние к центру — полупрозрачные, но крупнее */
.screen-slider .slide.is-prev img,
.screen-slider .slide.is-next img{
  opacity:.7; transform: scale(.97);
  box-shadow: 0 16px 40px rgba(16,24,40,.20);
}
/* центральный — полноцветный и с сильной тенью */
.screen-slider .slide.is-center img{
  opacity:1; transform: scale(1);
  box-shadow: 0 26px 60px rgba(16,24,40,.25);
}

/* круглые синие стрелки */
.screen-slider .nav{
  position:absolute; top:50%; transform: translateY(-50%);
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background: var(--brand); color:#fff; border:0;
  box-shadow: 0 10px 24px rgba(59,88,255,.35);
  z-index:3;
}
.screen-slider .nav i{ font-size: 26px; line-height:1; }
.screen-slider .nav.prev{ left:-8px; }
.screen-slider .nav.next{ right:-8px; }
.screen-slider .nav:hover{ filter: brightness(.95); }

/* точки-индикаторы */
.screen-slider .dots{
  display:flex; justify-content:center; gap:10px; margin-top:16px;
}
.screen-slider .dots button{
  width:10px; height:10px; border-radius:50%; border:0;
  background:#cfe1ff; cursor:pointer;
}
.screen-slider .dots button.active{ background: var(--brand); }

/* адаптив */
@media (max-width: 1199.98px){ :root{ --screens-w: 320px; --screens-h: 640px; } }
@media (max-width: 991.98px) { :root{ --screens-w: 300px; --screens-h: 600px; --screens-gap: 24px; } 
  .screen-slider .nav.prev{ left: 4px; } .screen-slider .nav.next{ right: 4px; } }
@media (max-width: 575.98px){ :root{ --screens-w: 260px; --screens-h: 520px; --screens-gap: 18px; } }

/* ===== Возможности приложения (карточки) ===== */
.feature-list { display:flex; flex-direction:column; gap:18px; }

.feature-item{
  display:flex; gap:16px; align-items:flex-start;
  background:#fff;
  border:1px solid #e7ecf5;           /* базовая светлая рамка */
  border-radius:14px;
  padding:18px 20px;
  box-shadow:0 4px 14px rgba(16,24,40,.06);
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.feature-item h6{
  margin:0 0 6px;
  font-weight:700;
  text-transform:uppercase;            /* как в макете */
  letter-spacing:.01em;
  color:var(--brand-dark);
}
.feature-item p{
  margin:0; color:#667085;
}

/* синяя круглая «галка» слева */
.feature-item .bullet{
  flex:0 0 32px; height:32px;
  display:grid; place-items:center;
  border-radius:999px;
  background:var(--brand); color:#fff; font-size:18px;
  margin-top:2px;
}

/* наведение по макету — лёгкий акцент */
.feature-item:hover:not(.is-active){
  border-color:rgba(59,88,255,.45);
  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(16,24,40,.10);
}

/* активная (первая) карточка — синий контур
.feature-item.is-active{
  border:3px solid var(--brand);
  box-shadow:0 10px 28px rgba(59,88,255,.18);
} */

/* совместимость под картинкой слева */
.compat{
  color:#6b7280; font-size:.95rem;
}
.compat .bi{ font-size:22px; vertical-align:-3px; }

/* отступы секции под макет */
#features .section-title{ color:var(--brand-dark); }
#features{ padding-top:72px; padding-bottom:72px; }

@media (max-width: 991.98px){
  .feature-item{ padding:16px; }
}

/* Бейджи магазинов — черные «пилюли» */
/* контейнер с бейджами */
.store-badges{ align-items:center }

/* «текстовые» бейджи (Play/App Store в стиле сайта — можешь убрать, если хочешь только картинки) */
.store-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:#111; color:#fff; padding:10px 14px; border-radius:12px;
  text-decoration:none; font-weight:700; line-height:1;
  box-shadow:0 6px 18px rgba(16,24,40,.12);
}
.store-badge i{ font-size:18px }
.store-badge.as{ background:#000 }
.store-badge:hover{ filter:brightness(1.05) }

/* официальные бейджи картинкой */
.store-badge-img img{
  height:44px; width:auto; display:block;
  image-rendering:-webkit-optimize-contrast;
  box-shadow:0 6px 18px rgba(16,24,40,.10);
  border-radius:10px; /* мягкий край под фон карточки */
  transition:transform .15s ease, box-shadow .15s ease;
}
.store-badge-img:hover img{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(16,24,40,.16) }

@media (max-width: 575.98px){
  .store-badge{ padding:9px 12px }
  .store-badge-img img{ height:38px }
}


/* Фиолетовые карточки-метрики */
.metrics .metric-card{
  background: linear-gradient(180deg, #6b5cf6, #5a54e0); /* близко к референсу */
  border-radius:16px; text-align:center; color:#fff;
  padding:20px 12px; box-shadow:0 18px 36px rgba(90,84,224,.35);
}
.metric-ico{ font-size:28px; line-height:1; margin-bottom:8px }
.metric-num{ font-size:28px; font-weight:800; letter-spacing:.3px }
.metric-label{
  margin-top:6px; font-size:.8rem; text-transform:uppercase;
  letter-spacing:.08em; opacity:.95
}

/* На узких — карточки в стопку */
@media (max-width: 767.98px){
  .metric-card{ padding:16px 12px }
}


/* Footer */
.footer{background:#0b1027; color:#b7c0d4}
.footer a{color:#e6ebff}

/* Кнопка «наверх» */
.to-top{
  position: fixed;
  right: 20px;
  bottom: 24px;
  width: 48px; height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--brand);
  color:#fff;                 /* делает стрелку белой через currentColor */
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
  opacity:0; transform: translateY(8px);
  pointer-events:none;
  transition: opacity .2s ease, transform .2s ease, background-color .2s ease;
  z-index:1050;
}
.to-top:hover{ background: var(--brand-dark); }
.to-top:focus-visible{ outline: 3px solid rgba(59,88,255,.4); outline-offset: 2px; }
.to-top.show{ opacity:1; transform: translateY(0); pointer-events:auto; }
@media (prefers-reduced-motion: reduce){
  .to-top{ transition:none; }
}
@media print{
  .to-top{ display:none; }
}