/* ============================================================
   AWC · AI-подбор запчастей — одноэкранный выбор мессенджера
   Характер: технологичный, уверенный, предельно простой
   ============================================================ */

:root{
  --bg:#0c0b0e;
  --surface:#17141b;
  --surface-2:#201c27;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);

  --text:#f3eff1;
  --muted:#9a949e;
  --faint:#6a646f;

  --accent:#fb2231;
  --accent-hot:#ff3a48;
  --accent-glow:rgba(251,34,49,.5);

  --max:138,79,255;   --max-line:120,110,255;
  --tg:34,158,217;    --tg-line:42,171,238;

  --f-display:"Unbounded","Segoe UI",system-ui,sans-serif;
  --f-body:"Onest","Segoe UI",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-x:hidden}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--f-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
h1,p{margin:0}
svg{display:block}
:focus-visible{outline:2px solid var(--accent-hot); outline-offset:3px; border-radius:8px}

/* ---------- фоновая атмосфера ---------- */
#net{position:fixed; inset:0; width:100%; height:100%; z-index:-2; opacity:.5; pointer-events:none}
.glow{
  position:fixed; z-index:-1; pointer-events:none;
  top:-32vh; left:50%; transform:translateX(-50%);
  width:min(1300px,100%); height:110vh;
  background:radial-gradient(64% 42% at 50% 42%,
     rgba(251,34,49,.24) 0%, rgba(251,34,49,.08) 38%, transparent 68%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, transparent 60%, rgba(0,0,0,.45) 100%);
}

/* ---------- каркас на один экран ---------- */
.screen{
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column;
  width:100%; max-width:1120px; margin-inline:auto;
  padding:clamp(18px,2.6vh,30px) clamp(20px,5vw,44px);
}

/* ---------- шапка ---------- */
.top{display:flex; align-items:center; justify-content:space-between; gap:16px; flex:none}
.brand{display:inline-flex; align-items:center}
.brand__logo{height:clamp(48px,6.5vw,62px); width:auto; display:block; filter:drop-shadow(0 4px 16px rgba(251,34,49,.28))}
.top__back{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.86rem; font-weight:500; color:var(--muted);
  padding:9px 16px; border:1px solid var(--line); border-radius:100px;
  transition:color .2s, border-color .2s, background .2s;
}
.top__back:hover{color:var(--text); border-color:var(--line-2); background:rgba(255,255,255,.04)}
.top__back-ico{transition:transform .2s}
.top__back:hover .top__back-ico{transform:translateX(-3px)}
.top__back-short{display:none}

/* ---------- центр ---------- */
.center{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:0; padding:24px 0;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-mono); font-size:.8rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:#ffd0d4;
  padding:7px 15px 7px 12px; border:1px solid rgba(251,34,49,.32);
  border-radius:100px; background:rgba(251,34,49,.07);
}
.pulse{width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 var(--accent-glow); animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(251,34,49,.55)}70%{box-shadow:0 0 0 11px rgba(251,34,49,0)}100%{box-shadow:0 0 0 0 rgba(251,34,49,0)}}

.title{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(2rem,4.6vw,3.35rem); line-height:1.06; letter-spacing:-.02em;
  margin-top:24px; text-wrap:balance; max-width:100%;
}
.title .accent{color:var(--accent); white-space:nowrap}
.lead{
  margin-top:18px; max-width:min(50ch,100%);
  font-size:clamp(1.02rem,1.5vw,1.2rem); color:var(--muted); line-height:1.55;
}

/* ---------- выбор мессенджера ---------- */
.pick__label{
  margin-top:clamp(30px,4.5vh,46px);
  font-family:var(--f-mono); font-size:clamp(.92rem,1.4vw,1.05rem); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.pick{
  margin-top:16px; width:100%; max-width:min(680px,100%);
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}

.btn{
  --c:255,255,255; --cl:255,255,255;
  position:relative; display:flex; align-items:center; gap:16px;
  padding:20px 22px; border-radius:20px; text-align:left; min-width:0;
  background:
    linear-gradient(180deg, rgba(var(--c),.12), rgba(var(--c),.03)),
    var(--surface);
  border:1.5px solid rgba(var(--cl),.42);
  box-shadow:0 12px 34px -14px rgba(var(--c),.55), 0 1px 0 rgba(255,255,255,.04) inset;
  transition:transform .22s cubic-bezier(.2,.7,.3,1), border-color .22s, box-shadow .22s, background .22s;
}
.btn--max{--c:var(--max); --cl:var(--max-line)}
.btn--tg{--c:var(--tg); --cl:var(--tg-line)}
.btn__icon{flex:none; border-radius:13px; box-shadow:0 8px 22px rgba(var(--c),.45)}
.btn__body{display:flex; flex-direction:column; gap:3px; min-width:0}
.btn__name{font-family:var(--f-display); font-weight:600; font-size:clamp(1.24rem,1.9vw,1.55rem); letter-spacing:0; line-height:1.1}
.btn__sub{font-family:var(--f-mono); font-size:.76rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.btn__go{margin-left:auto; flex:none; color:rgba(var(--cl),.9); transition:transform .22s, color .22s}
.btn:hover{
  transform:translateY(-4px);
  border-color:rgba(var(--cl),.95);
  box-shadow:0 22px 50px -14px rgba(var(--c),.75), 0 1px 0 rgba(255,255,255,.06) inset;
  background:linear-gradient(180deg, rgba(var(--c),.2), rgba(var(--c),.05)), var(--surface);
}
.btn:hover .btn__go{transform:translateX(4px); color:#fff}
.btn:active{transform:translateY(-1px)}

.note{margin-top:18px; font-size:.86rem; color:var(--faint)}

/* ============================================================ Адаптив */
@media (max-width:640px){
  .pick{grid-template-columns:1fr; max-width:min(440px,100%)}
  .top__back-full{display:none}
  .top__back-short{display:inline}
}
@media (max-height:680px){
  .title{margin-top:16px}
  .lead{margin-top:12px}
  .center{padding:14px 0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .pulse{animation:none}
}