/* Neyro Veles — bio визитка для Instagram (9:16)
   Палитра: актуальный сайт 7_web_consultant (v1.5+ — тёмный + кислотный лайм) */
:root{
  --bg:#0b0f19;            /* фон как niche.yaml */
  --panel:#101319;         /* панели */
  --panel2:#161A22;        /* панели глубже */
  --acid:#C6FF3A;          /* акцент — кислотный лайм */
  --yellow:#ffe600;        /* палитра niche.yaml */
  --text:#F3F4F6;
  --muted:#9AA1AE;
  --line:rgba(255,255,255,.08);
  --wa:#25D366;
  --tg:#2AABEE;
  --radius:18px;
  --font-head:'Space Grotesk',Manrope,system-ui,sans-serif;
  --font-body:'Manrope',system-ui,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:radial-gradient(120% 80% at 50% 0%,#1a1f2c 0%,var(--bg) 60%,#060810 100%) fixed;
  color:var(--text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

/* ── Экран 9:16 ── */
.screen{
  width:100vw;
  height:100vh;
  height:100dvh;
  display:flex;
  flex-direction:column;
  padding:max(env(safe-area-inset-top),22px) 22px max(env(safe-area-inset-bottom),18px);
  gap:16px;
  position:relative;
  isolation:isolate;
}
.screen::before{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(60% 35% at 50% 0%,rgba(198,255,58,.10),transparent 70%);
  pointer-events:none;
  z-index:-1;
}

/* ── Шапка: логотип + @handle ── */
.brand{
  display:flex;flex-direction:column;align-items:center;
  gap:6px;padding:6px 0 2px;
  animation:fadeDown .6s ease-out both;
}
.brand__img{
  width:84px;height:84px;object-fit:contain;
  border-radius:18px;
  background:var(--panel);
  border:1px solid var(--line);
  padding:6px;
  box-shadow:0 8px 30px rgba(198,255,58,.10),0 2px 0 rgba(255,255,255,.04) inset;
}
.brand__name{
  font-family:var(--font-head);font-weight:700;letter-spacing:.02em;
  font-size:20px;line-height:1;color:var(--text);
}
.brand__sub{
  font-size:12.5px;color:var(--muted);letter-spacing:.01em;margin-top:2px;
}

/* ── Стек кнопок ── */
.stack{
  flex:1 1 auto;
  display:flex;flex-direction:column;
  gap:12px;
  margin-top:6px;
  min-height:0;
}
.btn{
  flex:1 1 0;
  min-height:0;
  display:flex;align-items:center;gap:16px;
  padding:16px 18px;
  border-radius:var(--radius);
  text-decoration:none;color:inherit;
  border:1px solid var(--line);
  background:var(--panel);
  box-shadow:0 10px 28px rgba(0,0,0,.45);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  position:relative;overflow:hidden;
  animation:rise .55s ease-out both;
}
.btn::after{
  content:"";position:absolute;inset:auto 0 0 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
}
.btn:nth-of-type(1){animation-delay:.06s}
.btn:nth-of-type(2){animation-delay:.14s}
.btn:nth-of-type(3){animation-delay:.22s}
.btn:nth-of-type(4){animation-delay:.30s}
.btn:active{transform:scale(.985)}
.btn__icon{
  flex:0 0 auto;
  width:52px;height:52px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:var(--acid);
  box-shadow:0 4px 16px rgba(198,255,58,.25);
}
.btn__body{display:flex;flex-direction:column;gap:2px;min-width:0}
.btn__title{font-family:var(--font-head);font-weight:700;font-size:16.5px;line-height:1.2;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn__hint{font-size:12.5px;color:var(--muted);line-height:1.3}

/* Акценты кнопок — по содержимому, иконка остаётся лаймом */
.btn--wa{border-color:rgba(37,211,102,.45);background:linear-gradient(180deg,#15261d 0%,#0f1814 100%)}
.btn--wa::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--wa)}
.btn--site{border-color:rgba(198,255,58,.45);background:linear-gradient(180deg,#171c14 0%,#101319 100%)}
.btn--site::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acid)}
.btn--ai{border-color:rgba(138,124,255,.45);background:linear-gradient(180deg,#15172a 0%,#0f1019 100%)}
.btn--ai::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#8a7cff}
.btn--tg{border-color:rgba(42,171,238,.45);background:linear-gradient(180deg,#122231 0%,#0d1419 100%)}
.btn--tg::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--tg)}

/* ── Подвал ── */
.foot{
  display:flex;justify-content:center;align-items:center;gap:8px;
  font-size:11.5px;color:var(--muted);letter-spacing:.01em;
  padding-top:6px;
  animation:fadeUp .5s ease-out both;
  animation-delay:.45s;
}
.foot__sep{opacity:.5}

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── Маленькая плашка QR-визитки ── */
.qr-mini{
  display:flex;align-items:center;justify-content:center;gap:8px;
  align-self:center;
  padding:8px 14px;border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  text-decoration:none;color:var(--muted);
  font-size:12px;letter-spacing:.01em;
  transition:background .15s, color .15s, border-color .15s;
  animation:fadeUp .5s ease-out both;
  animation-delay:.40s;
}
.qr-mini:hover{color:var(--text);background:rgba(198,255,58,.07);border-color:rgba(198,255,58,.3)}
.qr-mini__icon{
  width:24px;height:24px;border-radius:6px;background:var(--acid);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.qr-mini__label{font-weight:600}

/* ── Короткие экраны: iPhone SE, складные — кнопки компактнее, без подзаголовка ── */
@media (max-height:680px){
  .btn{padding:12px 14px;gap:12px}
  .btn__icon{width:46px;height:46px;border-radius:12px}
  .btn__title{font-size:15.5px}
  .btn__hint{font-size:11.5px}
  .brand__img{width:68px;height:68px}
  .brand__name{font-size:18px}
  .stack{gap:9px}
  .screen{padding:max(env(safe-area-inset-top),14px) 18px 14px}
}
@media (max-height:580px){
  .btn__hint{display:none}
  .stack{gap:7px}
}

/* ── Ландшафтный / широкий экран: центрируем карточку ── */
@media (min-aspect-ratio: 1/1){
  body{overflow:auto}
  .screen{
    width:min(440px,92vw);
    height:min(880px,96vh);
    margin:max(2vh,12px) auto;
    border-radius:28px;
    border:1px solid var(--line);
    box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.03) inset;
    padding:24px 22px 20px;
  }
}

/* ── Тёмная/светлая схема: форсируем тёмную, как на основном сайте ── */
@media (prefers-color-scheme: light){:root{--bg:#0b0f19;--panel:#101319}}

/* ── Уважение к motion ── */
@media (prefers-reduced-motion: reduce){
  .brand,.btn,.foot{animation:none;opacity:1;transform:none}
}