/* Podlets tool — мягкий тёмный дизайн, один акцент, скруглённые формы без жёстких углов */

/* Шрифты самохостятся (assets/fonts/) — без запросов к Google Fonts.
   Переменные woff2 (вес 400..800) по подмножествам cyrillic + latin. */
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 800;font-display:swap;src:url("../assets/fonts/manrope-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 800;font-display:swap;src:url("../assets/fonts/manrope-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 800;font-display:swap;src:url("../assets/fonts/jetbrains-mono-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 800;font-display:swap;src:url("../assets/fonts/jetbrains-mono-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#0A0C10;
  --surface:#11151C;
  --border:rgba(255,255,255,.08);
  --text:#E7ECF3;
  --muted:#8A94A6;
  --accent:#10B981;
  --accent-2:#059669;
  --accent-dim:rgba(16,185,129,.12);
  --accent-line:rgba(16,185,129,.28);
  /* градиент CTA: изумруд → изумруд-600 → бирюза; на нём держится тёмный текст */
  --grad:linear-gradient(135deg,#10B981 0%,#059669 52%,#0D9488 100%);
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --radius:28px;
  --radius-sm:18px;
  /* мягкий разделитель: гаснет по краям, поэтому нет жёстких концов */
  --hair:linear-gradient(90deg,transparent,rgba(255,255,255,.10) 22%,rgba(255,255,255,.10) 78%,transparent);
  color-scheme:dark;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;padding:10px 16px;background:var(--accent);color:#04231a;font-weight:700;border-radius:0 0 16px 0;text-decoration:none}
.skip-link:focus{left:8px;outline:2px solid var(--accent)}
[hidden]{display:none!important}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
body{
  font-family:"Manrope","Segoe UI",Roboto,system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(16,185,129,.3)}
a{color:inherit}
img,svg{display:block}
section[id]{scroll-margin-top:88px}

/* ---------- фон: база-градиент + шум, поверх — ауроры и сетка ---------- */
.bg{position:fixed;inset:0;z-index:-2;overflow:hidden;background:
  radial-gradient(900px 520px at 78% -8%,rgba(16,185,129,.10) 0%,transparent 60%),
  radial-gradient(700px 460px at 6% 104%,rgba(5,150,105,.08) 0%,transparent 62%),
  linear-gradient(180deg,#0A0C10 0%,#0E1218 55%,#0A0C10 100%)}
.bg::after{
  content:"";position:absolute;inset:0;opacity:.035;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ауроры: размытые цветные пятна, дрейфуют. screen-блендинг замкнут
   стекинг-контекстом .bg (z-index:-2), поэтому на карточки не влияет */
.aurora{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;
  mix-blend-mode:screen;will-change:transform;pointer-events:none}
.a1{width:520px;height:520px;background:radial-gradient(circle,rgba(16,185,129,.55),transparent 65%);
  top:-160px;left:-120px;animation:drift 22s ease-in-out infinite}
.a2{width:460px;height:460px;background:radial-gradient(circle,rgba(5,150,105,.5),transparent 65%);
  top:30%;right:-140px;animation:drift 26s ease-in-out infinite reverse}
.a3{width:380px;height:380px;background:radial-gradient(circle,rgba(45,212,191,.4),transparent 65%);
  bottom:-120px;left:32%;animation:drift 30s ease-in-out infinite}
/* только transform: анимация уходит на композитор, без репейнта blur */
@keyframes drift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(60px,40px,0) scale(1.12)}
  66%{transform:translate3d(-40px,-30px,0) scale(.94)}
}
/* сетка: маска гасит её книзу, поэтому верх «подсвечен», к футеру тишина */
.grid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(16,185,129,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(16,185,129,.05) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(900px 700px at 50% 0%,#000 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(900px 700px at 50% 0%,#000 30%,transparent 75%)}

/* ---------- логотип ---------- */
.logo{width:34px;height:34px;display:grid;place-items:center;flex:none}
.logo img{width:100%;height:100%;object-fit:contain;display:block}

/* ---------- шапка ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding-top:env(safe-area-inset-top);background:rgba(10,12,16,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .25s,background .25s}
nav.scrolled{background:rgba(10,12,16,.94);border-bottom-color:var(--border)}
.nav-inner{max-width:1120px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:18px;letter-spacing:-.2px;text-decoration:none}
/* две кнопки в шапке: основная (Telegram) и приглушённая (донат) */
.nav-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:999px;background:var(--accent);color:#04231a;font-weight:700;font-size:14px;text-decoration:none;transition:filter .2s;white-space:nowrap}
.nav-btn svg{width:17px;height:17px;flex:none}
.nav-btn-soft{background:rgba(255,255,255,.06);color:var(--muted);transition:color .2s,background .2s}
/* та же кнопка Telegram, но внутри callout. Специфичность 0,2,0 перебивает
   тировые правила .nav-btn (0,1,0), поэтому одного хватает на все ярусы */
.callout .nav-btn{padding:4px 10px;font-size:12px;gap:6px;vertical-align:middle}
.callout .nav-btn svg{width:13px;height:13px;flex:none}
/* градиент только у основной кнопки шапки. :not(.nav-btn-soft) обязателен:
   специфичность 0,3,0 иначе перебьёт .nav-btn-soft (0,1,0) и «На кофе»
   тоже станет градиентной. Пульс и блик сюда не тянем — они эксклюзив CTA */
.nav-actions .nav-btn:not(.nav-btn-soft){background:var(--grad);box-shadow:0 8px 22px -8px rgba(16,185,129,.6)}

/* ---------- герой ---------- */
.hero{padding:96px 22px 14px;position:relative}
.hero .wrap{max-width:1120px;margin:0 auto}
.hero-inner{text-align:center;max-width:1120px;margin:0 auto}
.hero h1{font-size:clamp(26px,2.9vw,36px);font-weight:800;letter-spacing:-.9px;line-height:1.14}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 30px;border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;cursor:pointer;border:none;transition:filter .2s,transform .2s}
.btn svg{width:20px;height:20px;transition:transform .2s}
.btn-primary{position:relative;color:#04231a;
  /* внутренний блик лежит слоем фона, а не в ::before: псевдоэлемент с
     z-index:auto рисуется поверх текста и залил бы надпись */
  background:
    radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.22) 0%,transparent 58%),
    var(--grad);
  box-shadow:0 14px 36px -10px rgba(16,185,129,.55)}
/* свечение наружу: анимируется только opacity, поэтому идёт через композитор
   без репейнта и не сдвигает вёрстку. Глушится prefers-reduced-motion ниже */
.btn-primary::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 10px 30px -6px rgba(16,185,129,.55);opacity:.45;pointer-events:none;animation:btnGlow 2.8s ease-in-out infinite}
/* блик: opacity=0 на обоих концах цикла, поэтому полоса не выходит за пилюлю.
   Благодаря этому overflow:hidden не нужен и свечение может выходить наружу */
.btn-primary::after{content:"";position:absolute;top:0;bottom:0;width:42%;left:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:translateX(-130%) skewX(-18deg);opacity:0;pointer-events:none;animation:btnSheen 4.2s ease-in-out infinite}
@keyframes btnGlow{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes btnSheen{0%{transform:translateX(-130%) skewX(-18deg);opacity:0}35%{opacity:1}65%{opacity:1}100%{transform:translateX(340%) skewX(-18deg);opacity:0}}
/* сдвиг фазы у Telegram-кнопки, чтобы эффекты не били в такт */
.card[data-prog="tg"] .btn-primary::before{animation-delay:-1.4s}
.card[data-prog="tg"] .btn-primary::after{animation-delay:-2.1s}

.copy-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.05);border:0;color:var(--muted);font-size:12.5px;font-weight:700;cursor:pointer;transition:color .2s,background .2s;font-family:inherit;text-decoration:none}
.copy-btn.copied{color:var(--accent);background:var(--accent-dim)}
.copy-btn.failed{color:#FCA5A5;background:rgba(248,113,113,.12)}

[data-apk][hidden]{display:none!important}

/* ---------- карточки: без рамок, мягкая тень + внутренний блик ---------- */
section.block{padding:20px 22px 16px;position:relative}
.wrap{max-width:1120px;margin:0 auto}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.card{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.045) 0%,rgba(255,255,255,.012) 55%,rgba(255,255,255,.02) 100%),var(--surface);
  border:0;border-radius:var(--radius);padding:20px 22px;overflow:hidden;
  box-shadow:0 28px 70px -30px rgba(0,0,0,.85),0 2px 10px -4px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07)}
/* мягкая затухающая линия вместо жёсткого рельса 2px */
.card::before{content:"";position:absolute;top:0;left:14%;right:14%;height:1px;opacity:.55;
  background:linear-gradient(90deg,transparent,var(--accent) 50%,transparent)}
.card[data-prog="tg"]::before{background:linear-gradient(90deg,transparent,var(--accent-2) 50%,transparent)}

.card-head{display:flex;align-items:center;gap:13px;padding-bottom:15px;margin-bottom:2px;position:relative}
.card-head::after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--hair)}
.card-icon{width:42px;height:42px;border-radius:50%;background:var(--accent-dim);border:1px solid var(--accent-line);display:grid;place-items:center;flex:none;color:var(--accent)}
.card[data-prog="tg"] .card-icon{background:rgba(5,150,105,.14);color:var(--accent-2)}
.card-icon svg{width:21px;height:21px}
.card-title{min-width:0;flex:1}
.card-title b{display:block;font-size:17px;font-weight:800;letter-spacing:-.3px;line-height:1.25}
.card-title span{display:block;font-size:12.5px;color:var(--muted);line-height:1.4}
.card-title span b{font-size:12.5px;color:var(--accent);font-weight:800;display:inline}

/* ---------- шаги: круглый номер + градиентный разделитель ---------- */
.card .steps{display:grid;gap:0}
.card .step{display:grid;grid-template-columns:auto 1fr;gap:0 14px;position:relative;padding:16px 0}
.card .step:first-of-type{padding-top:16px}
.card .step:last-child{padding-bottom:0}
.card .step+.step::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--hair)}
.card .step-num{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--accent-dim);border:1px solid var(--accent-line);color:var(--accent);
  font-family:var(--mono);font-size:13px;font-weight:700;margin-top:1px}
.card[data-prog="tg"] .step-num{background:rgba(5,150,105,.16);border-color:rgba(5,150,105,.34);color:var(--accent-2)}
.card .step-card{padding:0;background:none;border:none;border-radius:0}
.card .step-card h3{font-size:15px;font-weight:700;letter-spacing:-.1px;margin-bottom:4px}
.card .step-card>p{font-size:13px;color:var(--muted)}
.card .step-body{display:flex;flex-direction:column;margin-top:10px;gap:9px}
.card .apk-note{font-size:12.5px;line-height:1.45;color:var(--muted)}
.card .apk-note b{font-family:var(--mono);color:var(--text);font-weight:600}
.card .srow{display:flex;align-items:flex-start;font-size:13px;color:#C6D0DF;gap:10px}
.card .srow .tic{flex:none;width:19px;height:19px;border-radius:50%;background:var(--accent-dim);display:grid;place-items:center;margin-top:3px}
.card .srow .tic svg{width:11px;height:11px;color:var(--accent);stroke:var(--accent)}
.card .srow b{color:var(--text);font-weight:700}

.card .btn{padding:11px 18px;font-size:14px}
.card .callout{padding:11px 14px;gap:11px;border-radius:var(--radius-sm);border:0;background:rgba(255,255,255,.035)}
.card .callout .ci{width:18px;height:18px;color:var(--accent)}
.card .callout .ci svg{width:17px;height:17px}
.card .callout.good{background:rgba(16,185,129,.07)}
.card .callout.good .ci{color:var(--accent)}
.callout{display:flex;align-items:flex-start;gap:14px;border-radius:var(--radius-sm)}
.callout .ci{flex:none;display:grid;place-items:center;margin-top:2px}
.callout p{font-size:14px;color:var(--muted);line-height:1.5}
.callout b{color:var(--text);font-weight:700}

/* ключ подключения: выделяемый моно-текст, переносится по строкам */
.key-box{display:flex;flex-direction:column;gap:5px;padding:10px 12px;border-radius:var(--radius-sm);background:rgba(255,255,255,.035);border:1px solid var(--border)}
.key-label{font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);font-weight:700}
.key-text{font-family:var(--mono);font-size:11.5px;line-height:1.5;color:var(--text);word-break:break-all;user-select:all;-webkit-user-select:all}

.card .gen-actions{flex-direction:row;flex-wrap:wrap;gap:8px;display:flex;flex:none}
.card .copy-btn{flex:1;min-width:118px;justify-content:center}

/* ---------- футер ---------- */
footer{padding:18px 22px 15px}
.foot-note{margin-top:18px;font-size:11.5px;color:#5A6478;text-align:center}
.foot-note b{color:var(--muted);font-family:var(--mono);font-weight:600}

/* ---------- появление при скролле ---------- */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:1100px){
  .cards{grid-template-columns:1fr;max-width:760px;margin:0 auto}
}
/* обе кнопки шапки видны на всех размерах, поэтому ниже 620px шапка
   переносится в две строки: логотип с названием, под ним кнопки */
@media(max-width:620px){
  section.block{padding:22px 14px 18px}
  .card{padding:18px 16px}
  .card .gen-actions{justify-content:center}
  .hero{padding:128px 16px 6px}
  .nav-inner{flex-wrap:wrap;padding:14px 16px;gap:10px}
  .brand{font-size:16px;gap:9px}
  .logo{width:30px;height:30px}
  .nav-actions{width:100%;justify-content:center;gap:9px;flex-wrap:wrap}
  .nav-btn{padding:9px 15px;font-size:13px}
  .nav-btn svg{width:16px;height:16px}
}

/* ноутбуки: ярус 1 — вьюпорт до 920px, базовая раскладка выше не влезает */
@media(min-width:1101px) and (max-height:920px){
  .hero{padding:76px 22px 2px}
  .hero h1{font-size:27px}
  section.block{padding:12px 22px 10px}
  .card{padding:14px 18px}
  .cards{gap:18px}
  .card-head{padding-bottom:11px;gap:11px}
  .card-icon{width:36px;height:36px}
  .card-icon svg{width:18px;height:18px}
  .card-title b{font-size:15.5px}
  .card-title span{font-size:11.5px}
  .card .step{padding:11px 0}
  .card .step:first-of-type{padding-top:11px}
  .card .step-num{width:23px;height:23px;font-size:12px}
  .card .step-card h3{font-size:14px;margin-bottom:3px}
  .card .step-card>p{font-size:12.5px}
  .card .step-body{margin-top:8px;gap:7px}
  .card .apk-note{font-size:11.5px}
  .card .srow{font-size:12.5px}
  .card .btn{padding:10px 17px;font-size:13.5px}
  .card .callout{padding:9px 12px}
  .card .callout p{font-size:12px}
  footer{padding:12px 22px 10px}
  .foot-note{margin-top:8px}
}

/* низкие ноутбуки: ярус 2 — CSS-вьюпорт до 740px (1366x768, 1280x720, 1440x800).
   Граница 740, а не 660: ярус 1 занимает 660px, поэтому на 661–680px запас был бы 1–20px
   и высокие шрифты могли бы вытолкнуть страницу в скролл. */
@media(min-width:1101px) and (max-height:740px){
  .hero{padding:70px 22px 0}
  .hero h1{font-size:24px}
  section.block{padding:8px 22px 6px}
  .card{padding:11px 16px}
  .cards{gap:14px}
  .card-head{padding-bottom:7px;gap:10px}
  .card-icon{width:31px;height:31px}
  .card-icon svg{width:16px;height:16px}
  .card-title b{font-size:14px}
  .card-title span{font-size:11px}
  .card .step{padding:7px 0}
  .card .step:first-of-type{padding-top:7px}
  .card .step-num{width:20px;height:20px;font-size:11px}
  .card .step-card h3{font-size:13px;margin-bottom:2px}
  .card .step-card>p{font-size:12px}
  .card .step-body{margin-top:6px;gap:6px}
  .card .apk-note{font-size:11px}
  .card .srow{font-size:12px}
  .card .btn{padding:9px 15px;font-size:13px}
  .card .callout{padding:8px 11px}
  .card .callout p{font-size:11.5px}
  .card .copy-btn{min-width:110px}
  footer{padding:8px 22px 7px}
  .foot-note{display:none}
}

/* все :hover только здесь: без гейта тачскрин оставляет подсветку после тапа.
   Фильтры и сдвиг — на .btn-primary, остальное меняет только цвет и фон */
@media (hover: hover) and (pointer: fine){
  .nav-btn:hover{filter:brightness(1.08)}
  .nav-btn-soft:hover{color:var(--text);background:rgba(255,255,255,.11);filter:none}
  .copy-btn:hover{color:var(--text);background:rgba(255,255,255,.09)}
  .btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
  .btn-primary:hover::before{animation-duration:1.4s}
  .btn-primary:hover::after{animation-duration:1.9s}
  .btn:hover svg{transform:translateY(1.5px)}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
}