:root{
  --bg:#0b0c10;
  --card:#12141b;
  --text:#f4f6fb;
  --muted:#a8b0c2;
  --txtcolor:#5a606c;
  --line:rgba(255,255,255,.10);
  --accent:#6ee7ff;
  --accent2:#a78bfa;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color:var(--text);
  line-height:1.5;
  position: relative;
  overflow-x: hidden;
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  background:
    linear-gradient(135deg,
      rgba(64, 224, 208, 0.12) 0%,
      rgba(52, 211, 153, 0.09) 45%,
      rgba(59, 90, 246, 0.20) 100%
    ),
    linear-gradient(225deg,
      rgba(59, 90, 246, 0.15) 0%,
      transparent 55%
    );

  background-size: 220% 220%;
  background-position: 50% 50%;
}

a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 16px}

.topbar{
  position:sticky;top:0;z-index:20;
  background: rgba(11,12,16,.72);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}

.brand{display:flex;gap:10px;align-items:flex-start}
.brand__logo{
  width:108px;height:108px;border-radius:12px;
  background: linear-gradient(135deg, rgba(110,231,255,.9), rgba(167,139,250,.9));
  display:flex;align-items:center;justify-content:center;
  font-weight:800;color:#0b0c10;
}

.brand__logo--avatar{
  padding:2px;              /* чтобы было ощущение “рамки” */
  overflow:hidden;
}

.brand__avatar{
  width:104px;
  height:104px;
  border-radius:10px;
  object-fit:cover;
  display:block;
  background: var(--bg);
}

.brand__title{font-weight:800}
.brand__subtitle{font-size:12px;color:var(--muted);margin-top:-2px}

.hero{padding:56px 0 22px}
.hero__grid{display:grid;gap:18px;grid-template-columns: 1.2fr .8fr;align-items:start}

.badge{
  display:inline-block;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  font-size:13px;
}

h1{font-size:40px;line-height:1.1;margin:14px 0 10px}
.lead{font-size:18px;color:rgba(244,246,251,.88);margin:0 0 18px}

.hero__cta{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 14px}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
}

.mock{display:grid;gap:10px;margin-bottom:10px}
.mock__sheet{
  height:74px;border-radius:14px;border:1px solid var(--line);
  background: rgba(255,255,255,.03);
}

.bullets{margin:14px 0 0;padding-left:18px;color:var(--muted)}
.bullets li{margin:6px 0}

.strip{padding:18px 0 6px}
.strip__grid{display:grid;gap:10px;grid-template-columns:repeat(3,1fr)}
.strip__item{
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  background: rgba(255,255,255,.02);
  display:flex;gap:12px;align-items:center;
}
.strip__num{
  width:28px;height:28px;border-radius:10px;
  background: rgba(110,231,255,.20);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;
}
.strip__text{color:rgba(244,246,251,.92)}

.section{padding:44px 0}
.section--alt{background: rgba(255,255,255,.02);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
h2{font-size:28px;margin:0 0 16px}
h3{margin:0 0 8px}

.grid3{display:grid;gap:12px;grid-template-columns:repeat(3,1fr)}
.grid2{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
.muted{color:var(--muted)}
.info{color:var(--txtcolor)}
.fineprint{font-size:12px;color:var(--muted);margin:10px 0 0}

.faq{
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px 16px;
  background: rgba(255,255,255,.02);
  margin:10px 0;
}
.faq summary{cursor:pointer;font-weight:700}
.faq p{color:var(--muted);margin:10px 0 0}

.buy{padding:52px 0}
.buy__grid{display:grid;gap:16px;grid-template-columns: 1.2fr .8fr;align-items:start}
.price__label{color:var(--muted)}
.price__value{font-size:40px;font-weight:900;margin-top:4px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 14px;border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  font-weight:800;
  transition: transform .06s ease, background .15s ease;
}
.btn:active{transform: scale(.99)}
.btn--primary{
  border-color: rgba(110,231,255,.35);
  background: linear-gradient(135deg, rgba(110,231,255,.26), rgba(167,139,250,.20));
}
.btn--secondary{background: rgba(255,255,255,.04)}
.btn--ghost{background: transparent}
.btn--full{width:100%}

.footer{padding:26px 0 90px;border-top:1px solid var(--line)}
.footer__inner{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.footer__links{display:flex;gap:14px}
.link{color:var(--muted)}
.link:hover{color:var(--text)}

.sticky{
  position:fixed;left:0;right:0;bottom:0;
  padding:10px 12px;
  background: rgba(11,12,16,.75);
  backdrop-filter: blur(10px);
  border-top:1px solid var(--line);
  display:none;
}

@media (max-width: 920px){

  /* чуть больше воздуха по бокам */
  .container{ padding: 0 18px; }

  /* уменьшаем “шапку” (у тебя аватар огромный) */
  .topbar__inner{ padding: 10px 0; }
  .brand__logo{ width: 72px; height: 72px; }
  .brand__avatar{ width: 68px; height: 68px; }

  /* основной экран */
  .hero{ padding: 40px 0 22px; }

  /* 1 колонка + больше gap */
  .hero__grid,
  .buy__grid{ grid-template-columns: 1fr; gap: 22px; }

  /* ВАЖНО: делаем левую колонку “стеком” с gap — и всё перестаёт слипаться */
  .hero__grid > div:first-child{
  	display: flex;
  	flex-direction: column;
  	gap: 28px; /* было 16 — добавили воздуха между блоками */
}

  /* убираем маргины у элементов в герое — gap теперь отвечает за расстояния */
  .hero__grid > div:first-child > .badge,
  .hero__grid > div:first-child > h1,
  .hero__grid > div:first-child > .lead{
    margin: 0;
}

/* кнопки и список — отдельные отступы (чтобы не было “кучно”) */
  .hero__cta{ margin-top: 4px; }
  .bullets{ margin-top: 10px; }

  /* типографика */
  h1{ font-size: 30px; line-height: 1.08; }
  .lead{ font-size: 16px; line-height: 1.7; }

  /* кнопки и список */
  .hero__cta{ gap: 15px; flex-wrap: wrap; }
  .btn{ padding: 14px 16px; min-height: 48px; }

  .bullets{ padding-left: 18px; }
  .bullets li{ margin: 10px 0; line-height: 1.55; }

  /* остальная адаптация */
  .grid3{ grid-template-columns: 1fr; }
  .grid2{ grid-template-columns: 1fr; }
  .strip__grid{ grid-template-columns: 1fr; }
  .sticky{ display: block; }
}




/* ===== Floating product background ===== */
body{ position: relative; overflow-x: hidden; }

/* слой фона */
#bg-float-layer{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* гарантируем, что контент выше фонового слоя */
.topbar, main, .sticky{
  position: relative;
  z-index: 1;
}

/* сама “плавающая” картинка */
.bg-float-item{
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: auto;

  transform: translate(-50%, -50%) rotate(var(--rot)) scale(0.96);
  opacity: 0;

  filter:
    drop-shadow(0 10px 25px rgba(0,0,0,.35))
    blur(var(--blur))
    saturate(1.05);

  animation: bgFloatFade var(--dur) ease-in-out forwards;
}

@keyframes bgFloatFade{
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(var(--rot)) scale(0.96); }
  25%  { opacity: var(--op); transform: translate(-50%, -50%) rotate(var(--rot)) scale(1.00); }
  75%  { opacity: var(--op); transform: translate(-50%, -50%) rotate(var(--rot)) scale(1.00); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--rot)) scale(1.04); }
}

/* если у человека отключены анимации */
@media (prefers-reduced-motion: reduce){
  #bg-float-layer{ display: none; }
}

/* на мобилках делаем мягче и меньше */
@media (max-width: 920px){
  .bg-float-item{ filter: drop-shadow(0 8px 18px rgba(0,0,0,.30)) blur(var(--blur)); }
}

/* =========================
   Modal windows (Contacts/Policy)
   ========================= */
.footer__meta{display:flex;flex-direction:column;gap:4px}
body.modal-open{overflow:hidden}

.modal{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .35s ease, visibility .35s ease;
}
.modal.is-open{opacity:1;visibility:visible;pointer-events:auto}

.modal__backdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,55);
  backdrop-filter:blur(8px);
}

.modal__panel{
  position:relative;
  width:min(760px,100%);
  max-height:min(78vh,720px);
  overflow:auto;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,10), rgba(255,255,255,04));
  box-shadow:var(--shadow);
  transform:translateY(14px) scale(.98);
  transition:transform .35s ease;
}
.modal.is-open .modal__panel{transform:translateY(0) scale(1)}

.modal__head{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
  padding:16px 18px;
  border-bottom:1px solid var(--line);
}
.modal__title{margin:0;font-size:18px; color:var(--txtcolor)}
.modal__close{
  width:40px;height:40px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,06);
  color:var(--txtcolor);
  cursor:pointer;
  font-size:22px;line-height:1;
}
.modal__close:hover{background:rgba(255,255,255,10)}
.modal__body{padding:16px 18px 18px; color:var(--txtcolor)}