:root{
  --bg:#0b0f16;
  --panel:#101826;
  --muted:#a7b0c0;
  --text:#e8f1ff;
  --acc1:#7b61ff;
  --acc2:#2ad3a3;
  --acc3:#ff74e8;
  --glass: rgba(16,24,38,.6);
  --border: rgba(255,255,255,.07);
  --shadow: 0 10px 30px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text); background:radial-gradient(1200px 600px at 0% 0%, rgba(42,211,163,.12), transparent 60%),
                     radial-gradient(900px 500px at 100% 0%, rgba(123,97,255,.12), transparent 60%),
                     var(--bg);
  background-attachment: fixed;
}
a{color:inherit; text-decoration:none}
.container{max-width:1200px; margin:0 auto; padding:0 20px}
.nav{
  position:sticky; top:0; backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border); z-index:10;
  background: linear-gradient(180deg, rgba(11,15,22,.75), rgba(11,15,22,.35));
}
.nav .row{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.badge{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); border:1px solid var(--border); padding:4px 10px; border-radius:999px}
.btn{display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:12px; background:linear-gradient(135deg,var(--acc1),var(--acc3)); box-shadow:var(--shadow); font-weight:600}
.btn.secondary{background:rgba(255,255,255,.08); border:1px solid var(--border)}
.hero{
  position:relative; overflow:hidden; border-bottom:1px solid var(--border);
}
.hero .bg{
  position:absolute; inset:0; background-image:url('assets/dfsgsdh.jpg');
  background-size:cover; background-position:center; opacity:.35; filter: saturate(110%) contrast(105%);
}
.hero .overlay{
  position:absolute; inset:0; background:radial-gradient(1200px 600px at 70% 10%, rgba(123,97,255,.25), transparent 60%);
}
.hero .content{position:relative; padding:110px 0 90px}
h1{font-size:56px; line-height:1.1; letter-spacing:.2px; margin:0 0 18px}
h1 .accent{background: linear-gradient(45deg,var(--acc2),var(--acc3)); -webkit-background-clip:text; color:transparent}
.sub{color:var(--muted); max-width:820px}
.grid{display:grid; gap:18px}
.services{grid-template-columns:repeat(3,1fr); margin:50px 0}
.card{
  background: var(--glass); border:1px solid var(--border); border-radius:18px; padding:22px;
  transition:.2s transform, .2s box-shadow, .2s border-color;
}
.card:hover{transform:translateY(-3px); border-color:rgba(122,97,255,.35); box-shadow:0 12px 40px rgba(123,97,255,.15)}
.card .kicker{display:inline-flex; align-items:center; gap:8px; color:#9fb3c8; font-size:12px; padding:4px 10px;
  border:1px dashed var(--border); border-radius:999px; margin-bottom:12px}
.card h3{margin:0 0 10px; font-size:20px}
.card p{margin:0; color:var(--muted)}
.section{padding:60px 0}
.pills{display:flex; gap:10px; flex-wrap:wrap}
.pill{border:1px solid var(--border); padding:8px 12px; border-radius:999px; color:#cfd7e6; font-size:14px}
.case{display:grid; grid-template-columns: 1.1fr .9fr; gap:22px; align-items:center}
.case .shot{border-radius:16px; overflow:hidden; border:1px solid var(--border)}
.footer{border-top:1px solid var(--border); color:#99a7bb; padding:28px 0 50px}
.breadcrumbs{font-size:14px; color:#9fb3c8; margin:14px 0 8px}
h2{font-size:34px; margin:0 0 16px}
.hero.small .content{padding:70px 0 40px}
ul{padding-left:18px}
details{background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:14px; padding:12px 14px}
details+details{margin-top:10px}
summary{cursor:pointer; font-weight:600}
@media (max-width:980px){
  h1{font-size:42px}
  .services{grid-template-columns:1fr}
  .case{grid-template-columns:1fr}
}

/* --- Pills / Tabs fix on mobile --- */
.pills{
  display:flex;
  flex-wrap: wrap;              /* разрешаем перенос */
  justify-content: center;      /* по центру */
  align-items: center;
  gap: 10px 12px;               /* ровный отступ между плашками */
  max-width: 100%;
  margin: clamp(6px, 2.5vw, 14px) auto 0; /* небольшой отступ сверху */
  padding: 0 12px;              /* чтобы не прилипали к краям экрана */
}

.pill{
  white-space: nowrap;          /* текст не ломается внутри */
  padding: 8px 14px;            /* компактнее на мобилке */
  border-radius: 9999px;
  font-size: 14px;
}

/* не даём CTA «Написать» перекрывать плашки */
.cta, .cta-floating{
  z-index: 10;
}

/* чутка ниже шапки, чтобы не прилипало на iOS */
@media (max-width: 480px){
  .pills{ margin-top: 10px; }
  .nav .row{ height: 56px; }    /* аккуратнее шапка на iOS */
  .brand img{ max-height: 28px; } /* логотип поменьше, чтобы не толкал пиллы */
}
/* ===== Desktop polish for pills / header / hero ===== */

/* стабильная высота шапки на ПК и небольшой blur */
.nav { 
  backdrop-filter: saturate(130%) blur(8px);
  background: linear-gradient(180deg, rgba(12,14,23,.75), rgba(12,14,23,.55));
}
.nav .row{
  height: 64px;
  align-items: center;
}

/* плашки: центр на мобиле, слева на десктопе */
.pills{
  display:flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  justify-content: center;         /* mobile default */
  align-items: center;
  margin: 12px auto 0;
}
@media (min-width: 980px){
  .pills{ 
    justify-content: flex-start;   /* desktop: слева */
    margin: 16px 0 0;              /* ровный отступ сверху */
  }
}

/* сами плашки чуть компактнее, чтобы не «распухали» на ПК */
.pill{
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: 9999px;
  font-size: 14px;
}

/* CTA не перекрывает плашки, остаётся справа */
.cta, .cta-floating{ z-index: 10; }

/* геро-тексту добавим мягкую подложку, чтобы не терялся на ярком фоне */
.hero .content{
  position: relative;
}
.hero .content::after{
  content:"";
  position:absolute; inset:-24px -24px -24px -24px;   /* тонкий ореол вокруг текста */
  background: radial-gradient(100% 100% at 50% 40%, rgba(10,12,20,.55), rgba(10,12,20,0) 70%);
  pointer-events:none;
  z-index:-1;
}

/* немного воздуха между заголовком и кнопками */
.hero h1{ margin-bottom: 16px; }
@media (min-width: 980px){
  .hero h1{ margin-bottom: 20px; max-width: 1100px; }
}

/* на очень широких экранах не тянем всё впритык */
.container{ max-width: 1200px; margin: 0 auto; padding: 0 20px; }