:root{
  --bg:#05060c; --bg2:#080a14; --surf:#0f1220; --surf2:#161a2c; --surf3:#1e2340;
  --line:rgba(140,160,255,.14); --line2:rgba(140,160,255,.28);
  --tx:#e9ecff; --tx2:#a6b0d8; --tx3:#7a85b3;
  --cyan:#00e5ff; --violet:#8b5cff; --pink:#ff3ea5; --lime:#a6ff2e; --amber:#ffc247;
  --r-s:6px; --r-m:14px; --r-l:22px; --r-xl:32px;
  --wrap:1320px; --read:74ch;
  --glow:0 0 0 1px rgba(0,229,255,.35), 0 8px 34px -10px rgba(0,229,255,.55);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--tx);
  font-family:"Noto Sans Bengali","Nirmala UI","Shonar Bangla","Vrinda",system-ui,sans-serif; font-size:clamp(15px,.55vw + 13px,17px); line-height:1.75;
  overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.55;
  background:
    radial-gradient(900px 500px at 12% -8%, rgba(0,229,255,.14), transparent 62%),
    radial-gradient(760px 420px at 88% 2%, rgba(255,62,165,.12), transparent 60%),
    radial-gradient(900px 600px at 50% 110%, rgba(139,92,255,.14), transparent 62%);
}
body>*{position:relative; z-index:1}
img{max-width:100%; height:auto; display:block}
a{color:var(--cyan)}
a:hover{color:#7ff3ff}
h1,h2,h3,h4{font-family:"Noto Serif Bengali","Shonar Bangla","Nirmala UI",Georgia,serif; line-height:1.25; margin:0 0 .5em; font-weight:700}
h1{font-size:clamp(28px,3.1vw + 14px,54px); letter-spacing:-.01em}
h2{font-size:clamp(23px,1.5vw + 15px,36px)}
h3{font-size:clamp(19px,.7vw + 15px,25px)}
p,ul,ol,table{margin:0 0 1.1em}
strong{color:#fff}
.wrap{width:min(var(--wrap),100% - 40px); margin-inline:auto}
/* Текстовый блок остаётся в габаритах полосы, а длину строки ограничивают
   уже сами абзацы и списки. Если сузить сам блок, он центрируется и
   уезжает от заголовка; если убрать центрирование — прилипает к краю окна. */
.read>*{max-width:var(--read)}
.skip{position:absolute; left:-9999px}
.skip:focus{left:14px; top:12px; z-index:60; background:var(--surf2); color:var(--tx);
  padding:10px 16px; border-radius:var(--r-s)}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px}

/* ---------- шапка ---------- */
.top{position:sticky; top:0; z-index:40; backdrop-filter:blur(14px);
  background:linear-gradient(180deg,rgba(5,6,12,.94),rgba(5,6,12,.78))}
.top__in{width:min(var(--wrap),100% - 40px); margin-inline:auto; display:flex;
  align-items:center; gap:22px; padding:13px 0}
.top__line{height:1px; background:linear-gradient(90deg,transparent,
  var(--cyan) 18%,var(--violet) 50%,var(--pink) 82%,transparent); opacity:.65}
.mark{display:flex; align-items:center; text-decoration:none; flex:0 0 auto}
.mark__svg{display:block; height:34px; width:auto}
.nav{flex:1 1 auto; min-width:0; overflow-x:auto; scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav__l{display:flex; gap:4px; list-style:none; margin:0; padding:0}
.nav__i{flex:0 0 auto}
.nav__a{display:block; padding:8px 13px; border-radius:999px; color:var(--tx2);
  text-decoration:none; font-size:14.5px; white-space:nowrap; transition:.18s}
.nav__a:hover{color:var(--tx); background:rgba(140,160,255,.09)}
.nav__a--on{color:#06121a; background:linear-gradient(135deg,var(--cyan),#63f2ff);
  font-weight:700}

/* ---------- кнопки ---------- */
.btn{display:inline-flex; align-items:center; gap:.5em; padding:13px 24px;
  border-radius:999px; font-weight:700; text-decoration:none; font-size:16px;
  color:#06121a; background:linear-gradient(135deg,var(--cyan),var(--violet) 62%,var(--pink));
  box-shadow:0 10px 26px -12px rgba(0,229,255,.9),0 0 0 1px rgba(255,255,255,.12) inset;
  transition:transform .18s, box-shadow .18s, filter .18s}
.btn:hover{transform:translateY(-2px); color:#06121a; filter:saturate(1.15);
  box-shadow:0 16px 36px -12px rgba(0,229,255,.95),0 0 0 1px rgba(255,255,255,.2) inset}
.btn--sm{padding:9px 17px; font-size:14.5px}
.btn--ghost{background:transparent; color:var(--tx);
  box-shadow:inset 0 0 0 1px var(--line2)}
.btn--ghost:hover{color:#fff; box-shadow:inset 0 0 0 1px var(--cyan)}
.btn--wide{width:100%; justify-content:center}
.btn__arw{transition:transform .18s}
.btn:hover .btn__arw{transform:translateX(3px)}

/* ---------- герой ---------- */
.hero{position:relative; padding:clamp(38px,5vw,76px) 0 clamp(30px,3.6vw,54px);
  overflow:hidden}
.hero__glow{position:absolute; inset:-40% -10% auto -10%; height:150%;
  background:
    repeating-linear-gradient(90deg,rgba(140,160,255,.07) 0 1px,transparent 1px 74px),
    repeating-linear-gradient(0deg,rgba(140,160,255,.055) 0 1px,transparent 1px 74px);
  mask-image:radial-gradient(70% 60% at 50% 32%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 32%,#000,transparent 72%)}
.hero__in{position:relative}
.hero__k{margin:0 0 .7em; font-family:"Cascadia Mono",Consolas,"DejaVu Sans Mono",monospace; font-size:12.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--cyan)}
.hero__lead{max-width:66ch; color:var(--tx2); font-size:clamp(16px,.5vw + 14px,19px)}
.hero__acts{margin:1.6em 0 0; display:flex; gap:12px; flex-wrap:wrap}
.hero__rule{height:1px; background:linear-gradient(90deg,transparent,var(--line2),transparent)}
/* Первая полоса идёт сразу за героем — двойной отступ там читался как дыра. */
.hero + .band{padding-top:clamp(22px,2.4vw,38px)}
.hero--home{padding-bottom:clamp(24px,2.4vw,40px)}
.hero--home .hero__in{display:grid; gap:clamp(24px,3vw,52px);
  grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr); align-items:center}
.hero__pic{position:relative; border-radius:var(--r-xl); overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line2),0 30px 70px -34px rgba(0,229,255,.5)}
.hero__pic img{width:100%; aspect-ratio:16/10; object-fit:cover}
.hero__tag{position:absolute; left:16px; bottom:14px; padding:7px 14px;
  border-radius:999px; font-size:13px; font-weight:700; color:#06121a;
  background:linear-gradient(135deg,var(--lime),#e6ff8a)}

/* ---------- полосы ---------- */
.band{padding:clamp(38px,4.4vw,72px) 0; position:relative}
.band--alt{background:linear-gradient(180deg,var(--bg2),transparent 42%,var(--bg2))}
.band--edge::before{content:""; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg,transparent,var(--line2) 30%,var(--line2) 70%,transparent)}
.band--also{padding-top:clamp(28px,3vw,48px)}
/* ---------- раздел двумя колонками ---------- */
/* Заголовок слева, текст справа. Так широкая полоса занята целиком, а строка
   всё равно остаётся читаемой длины — вместо узкой колонки у левого края. */
.sec{display:grid; gap:clamp(16px,2.4vw,52px); align-items:start;
  grid-template-columns:minmax(0,.52fr) minmax(0,1fr)}
.sec--noh{grid-template-columns:minmax(0,1fr)}
.sec+.sec{margin-top:clamp(20px,2.4vw,38px)}
.sec__h h2{margin:0; font-size:clamp(21px,1.05vw + 15px,31px)}
.sec__h::after{content:""; display:block; width:58px; height:3px; border-radius:2px;
  margin-top:16px; background:linear-gradient(90deg,var(--cyan),var(--pink))}
.sec__h--solo{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap}
.sec__h--solo h2{margin:0}
.sec__h--solo::after{flex:1 1 60px; min-width:40px; height:1px; margin:0; border-radius:0;
  align-self:center; background:linear-gradient(90deg,var(--line2),transparent)}
.sec__b>*:first-child{margin-top:0}
.sec__b>*:last-child{margin-bottom:0}
.sec__b p,.sec__b ul,.sec__b ol{max-width:70ch}
.sec__b h3{margin-top:1.2em}
.sec__b h3:first-child{margin-top:0}
@media (max-width:900px){
  .sec{grid-template-columns:minmax(0,1fr); gap:14px}
  .sec__h::after{margin-top:12px}
}

.h-sec{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:.8em}
.h-sec::after{content:""; flex:1 1 60px; height:1px; min-width:40px;
  background:linear-gradient(90deg,var(--line2),transparent)}
.sub{color:var(--tx2); max-width:var(--read); margin-top:-.4em}

/* ---------- таблица операторов ---------- */
.tbl-wrap,.tsc{overflow-x:auto; border-radius:var(--r-l);
  box-shadow:inset 0 0 0 1px var(--line)}
table{border-collapse:collapse; width:100%; min-width:720px; margin:0;
  font-size:15px; background:var(--surf)}
caption{text-align:start; padding:16px 18px; color:var(--tx2); font-size:14px}
th,td{padding:14px 16px; text-align:start; vertical-align:top;
  box-shadow:inset 0 -1px 0 var(--line)}
thead th{background:var(--surf2); color:var(--tx); font-size:13.5px;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap}
tbody tr:hover td{background:rgba(140,160,255,.05)}
.tbl__top td{background:linear-gradient(90deg,rgba(0,229,255,.13),transparent 60%)}
.tbl__nm{font-weight:700; color:#fff; white-space:nowrap}
.tbl__pos{display:inline-flex; width:26px; height:26px; margin-inline-end:9px;
  align-items:center; justify-content:center; border-radius:9px; font-family:"Cascadia Mono",Consolas,"DejaVu Sans Mono",monospace;
  font-size:13px; color:#06121a; background:linear-gradient(135deg,var(--cyan),var(--violet))}
.tbl__lic{font-family:"Cascadia Mono",Consolas,"DejaVu Sans Mono",monospace; font-size:13px; color:var(--tx2)}
.tbl__na{color:var(--tx3)}

/* ---------- карточки ---------- */
.cards{display:grid; gap:16px; grid-template-columns:repeat(3,minmax(0,1fr))}
.cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{padding:22px; border-radius:var(--r-m); background:var(--surf);
  box-shadow:inset 0 0 0 1px var(--line); transition:transform .2s, box-shadow .2s}
.card:nth-child(3n+1){border-radius:var(--r-l) var(--r-m) var(--r-m) var(--r-m)}
.card:nth-child(3n){border-radius:var(--r-m) var(--r-m) var(--r-l) var(--r-m)}
.card:hover{transform:translateY(-3px); box-shadow:inset 0 0 0 1px var(--line2),
  0 18px 40px -26px rgba(0,229,255,.7)}
.card h3{margin-bottom:.35em}
.card p{margin:0; color:var(--tx2); font-size:15px}
.card__nm{margin:0 0 .5em; font-family:"Cascadia Mono",Consolas,"DejaVu Sans Mono",monospace; font-size:13px; font-weight:700;
  letter-spacing:.06em; color:var(--tx3)}
/* Регистр здесь не трогаем: в первой карточке стоит бренд, а он всегда
   строчными. `text-transform:uppercase` показал бы LILBET. */
.card--hi .card__nm{color:var(--lime)}
.card__act{margin:16px 0 0}
.card--hi{background:linear-gradient(160deg,var(--surf2),var(--surf));
  box-shadow:inset 0 0 0 1px rgba(0,229,255,.34)}
.tile{display:grid; place-items:center; width:44px; height:44px; margin-bottom:14px;
  border-radius:13px; font-family:"Cascadia Mono",Consolas,"DejaVu Sans Mono",monospace; font-size:17px; font-weight:700; color:#06121a;
  background:linear-gradient(135deg,var(--cyan),var(--violet))}
.card:nth-child(2n) .tile{background:linear-gradient(135deg,var(--pink),var(--violet))}
.card:nth-child(3n) .tile{background:linear-gradient(135deg,var(--lime),var(--cyan));}
.card:nth-child(4n) .tile{background:linear-gradient(135deg,var(--amber),var(--pink))}

/* ---------- шкалы критериев ---------- */
.meters{display:grid; gap:14px; grid-template-columns:repeat(2,minmax(0,1fr))}
.meter{padding:16px 18px; border-radius:var(--r-m); background:var(--surf);
  box-shadow:inset 0 0 0 1px var(--line)}
.meter__h{display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  margin:0 0 10px}
.meter__n{font-weight:700}
.meter__v{font-family:"Cascadia Mono",Consolas,"DejaVu Sans Mono",monospace; color:var(--cyan)}
.meter__bar{display:block; height:8px; border-radius:999px; background:var(--surf3);
  overflow:hidden}
.meter__f{display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--cyan),var(--violet),var(--pink));
  box-shadow:0 0 18px -2px rgba(0,229,255,.8)}
.meter__d{margin:9px 0 0; font-size:14px; color:var(--tx2)}

/* ---------- шаги ---------- */
.steps{counter-reset:s; list-style:none; padding:0; display:grid; gap:14px}
.steps--2{grid-template-columns:repeat(2,minmax(0,1fr))}
/* При нечётном числе шагов последний занимает обе колонки — одинокой плитки
   в ряду не остаётся. */
.steps--2>li:last-child:nth-child(odd){grid-column:1 / -1}
.steps li{counter-increment:s; position:relative; padding:18px 20px 18px 66px;
  border-radius:var(--r-m); background:var(--surf);
  box-shadow:inset 0 0 0 1px var(--line)}
.steps li::before{content:counter(s); position:absolute; inset-inline-start:18px; top:16px;
  width:32px; height:32px; display:grid; place-items:center; border-radius:10px;
  font-family:"Cascadia Mono",Consolas,"DejaVu Sans Mono",monospace; font-weight:700; color:#06121a;
  background:linear-gradient(135deg,var(--lime),var(--cyan))}
.steps strong{display:block; margin-bottom:.2em}

/* ---------- витрина игр ---------- */
.grid-g{display:grid; gap:14px; grid-template-columns:repeat(4,minmax(0,1fr))}
.g{position:relative; border-radius:var(--r-m); overflow:hidden; background:var(--surf);
  box-shadow:inset 0 0 0 1px var(--line); transition:transform .2s, box-shadow .2s}
.g:hover{transform:translateY(-3px);
  box-shadow:inset 0 0 0 1px rgba(255,62,165,.45),0 18px 40px -24px rgba(255,62,165,.6)}
.g img{width:100%; aspect-ratio:325/234; object-fit:cover}
.g__b{padding:11px 13px 13px}
.g__n{margin:0; font-weight:700; font-size:14.5px}
.g__f{margin:.2em 0 0; font-size:13px; color:var(--tx2)}

/* ---------- оффер ---------- */
.offer{display:grid; gap:clamp(18px,2.6vw,44px); align-items:center;
  grid-template-columns:minmax(0,.9fr) minmax(0,1fr);
  padding:clamp(22px,2.4vw,34px); border-radius:var(--r-l);
  background:linear-gradient(155deg,var(--surf2),var(--surf));
  box-shadow:inset 0 0 0 1px rgba(0,229,255,.3),0 26px 60px -34px rgba(0,229,255,.6)}
.offer__k{margin:0 0 .3em; font-family:"Cascadia Mono",Consolas,"DejaVu Sans Mono",monospace; font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--lime)}
.offer__n{margin:0 0 .1em; font-family:"Noto Serif Bengali","Shonar Bangla","Nirmala UI",Georgia,serif; font-size:clamp(26px,2vw + 14px,38px);
  font-weight:700; color:#fff}
.offer ul{list-style:none; padding:0; margin:0 0 18px; display:grid; gap:10px}
.offer li{position:relative; padding-inline-start:24px; color:var(--tx2); font-size:15px}
.offer li::before{content:""; position:absolute; inset-inline-start:2px; top:.62em;
  width:9px; height:9px; border-radius:3px;
  background:linear-gradient(135deg,var(--cyan),var(--pink))}
.offer__l>*:last-child{margin-bottom:0}
.offer{margin-bottom:18px}
@media (max-width:820px){.offer{grid-template-columns:minmax(0,1fr)}}
.fine{margin:12px 0 0; font-size:13px; color:var(--tx3)}

/* ---------- мини-CTA ---------- */
.ctamini{display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:18px 22px; margin:26px 0; border-radius:var(--r-l);
  background:linear-gradient(120deg,rgba(0,229,255,.1),rgba(255,62,165,.09));
  box-shadow:inset 0 0 0 1px var(--line2)}
.ctamini__t{margin:0; flex:1 1 320px; font-weight:700}
.ctamini__s{display:block; margin:.2em 0 0; font-weight:400; color:var(--tx2);
  font-size:14.5px}

/* ---------- бегущая строка ---------- */
.tick{overflow:hidden; margin:0 0 clamp(18px,2vw,30px);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.tick__t{display:flex; gap:38px; width:max-content; padding:11px 0;
  animation:run 34s linear infinite; font-family:"Cascadia Mono",Consolas,"DejaVu Sans Mono",monospace; font-size:13px;
  letter-spacing:.05em; color:var(--tx2)}
.tick__t span{white-space:nowrap}
.tick__t b{color:var(--cyan); font-weight:700}
@keyframes run{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- вопросы ---------- */
/* Вопросы идут в две колонки во всю ширину полосы: узкой колонкой у левого
   края блок выглядел обрезанным. Раскрытие меняет высоту только своей ячейки. */
.faq{display:grid; gap:12px; align-items:start;
  grid-template-columns:repeat(2,minmax(0,1fr))}
.faq>details:last-child:nth-child(odd){grid-column:1 / -1}
@media (max-width:820px){.faq{grid-template-columns:minmax(0,1fr)}}
.faq details{border-radius:var(--r-m); background:var(--surf);
  box-shadow:inset 0 0 0 1px var(--line)}
.faq summary{cursor:pointer; padding:16px 20px; font-weight:700; list-style:none;
  display:flex; justify-content:space-between; gap:14px; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:"Cascadia Mono",Consolas,"DejaVu Sans Mono",monospace; color:var(--cyan); font-size:20px}
.faq details[open] summary::after{content:"−"}
.faq .faq__a{padding:0 20px 18px; margin:0; color:var(--tx2)}

/* ---------- ссылки в тексте видимые ---------- */
/* Требование задания: цвет плюс подчёркивание. Ссылка, не отличимая от текста,
   даёт плохой поведенческий сигнал. Кнопок это не касается. */
.sec__b a:not(.btn),.faq__a a:not(.btn),.card p a:not(.btn){
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.sec__b a:not(.btn):hover,.faq__a a:not(.btn):hover{text-decoration-thickness:2px}

/* ---------- «читайте дальше» ---------- */
.also{display:grid; gap:14px; grid-template-columns:repeat(3,minmax(0,1fr))}
.also__c{display:block; padding:20px; border-radius:var(--r-m); text-decoration:none;
  background:var(--surf); box-shadow:inset 0 0 0 1px var(--line); transition:.2s}
.also__c:hover{transform:translateY(-3px); box-shadow:inset 0 0 0 1px var(--line2)}
.also__k{display:block; font-family:"Cascadia Mono",Consolas,"DejaVu Sans Mono",monospace; font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--pink); margin-bottom:8px}
.also__c--2 .also__k{color:var(--cyan)}
.also__c--3 .also__k{color:var(--lime)}
.also__t{display:block; font-weight:700; color:#fff; margin-bottom:6px; font-size:18px}
.also__d{display:block; color:var(--tx2); font-size:14.5px}

/* ---------- крошки, подвал, 404 ---------- */
.crumbs{padding:14px 0 0; font-size:13.5px; color:var(--tx3)}
.crumbs a{color:var(--tx2); text-decoration:none}
.crumbs a:hover{color:var(--cyan); text-decoration:underline}
.crumbs i{margin:0 8px; font-style:normal; color:var(--tx3)}
.foot{margin-top:clamp(40px,5vw,80px); padding-bottom:34px; background:var(--bg2)}
.foot__line{height:1px; margin-bottom:32px; background:linear-gradient(90deg,
  transparent,var(--violet) 25%,var(--cyan) 50%,var(--pink) 75%,transparent); opacity:.5}
.foot__grid{display:grid; gap:22px; grid-template-columns:repeat(4,minmax(0,1fr))}
.foot__h{margin:0 0 10px; font-family:"Cascadia Mono",Consolas,"DejaVu Sans Mono",monospace; font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--tx3)}
.foot__c ul{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.foot__c a{color:var(--tx2); text-decoration:none; font-size:14.5px}
.foot__c a:hover{color:var(--cyan); text-decoration:underline}
.foot__rg{margin:26px 0 6px; padding-top:20px; color:var(--tx2); font-size:14.5px;
  box-shadow:inset 0 1px 0 var(--line)}
.foot__rg strong{display:inline-grid; place-items:center; width:34px; height:22px;
  margin-inline-end:10px; border-radius:6px; color:#06121a; font-size:12.5px;
  background:var(--amber)}
.foot__note{margin:0; color:var(--tx3); font-size:13px}
.nf{text-align:center; padding-block:20px}
.nf__code{margin:0; font-family:"Cascadia Mono",Consolas,"DejaVu Sans Mono",monospace; font-size:clamp(64px,10vw,140px); line-height:1;
  background:linear-gradient(135deg,var(--cyan),var(--violet),var(--pink));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.nf__t{color:var(--tx2); max-width:52ch; margin-inline:auto}
.nf__acts{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:1.4em}

/* ---------- узкие экраны ---------- */
@media (max-width:1000px){
  .hero--home .hero__in{grid-template-columns:minmax(0,1fr)}
  .cards,.cards--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-g{grid-template-columns:repeat(3,minmax(0,1fr))}
  .also{grid-template-columns:repeat(1,minmax(0,1fr))}
  .foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .steps--2{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .wrap,.top__in{width:min(var(--wrap),100% - 26px)}
  /* Кнопка в шапке на телефоне ломается на три строки и мешает логотипу.
     Убираем: тот же переход стоит первым экраном ниже. */
  .top__in>.btn{display:none}
  .top__in{gap:14px}
  .cards,.cards--4,.cards--2,.meters{grid-template-columns:minmax(0,1fr)}
  .grid-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__grid{grid-template-columns:minmax(0,1fr)}
  .steps li{padding:16px 16px 16px 58px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important}
  .tick__t{animation:none}
}