/* Такси: чаты ВКонтакте — страница (2026-10-20). Свои токены для светлой и тёмной темы. */
.tx{
  --tx-ink:#0e1520; --tx-mute:#566274; --tx-card:#ffffff; --tx-card2:#f2f6fc; --tx-line:#d9e2ef; --tx-chip:#ffffff; --tx-chip-ink:#1a2536;
  --tx-sh:0 1px 2px rgba(14,21,32,.05),0 16px 34px -20px rgba(14,21,32,.3); --tx-sig:#0a8bff; --tx-glow:rgba(10,139,255,.3); --tx-r:20px;
  --tx-bg:#071022; --tx-bg2:#0d1a33; --tx-dl:rgba(120,170,255,.22); --tx-dink:#eaf2ff; --tx-dmute:#9db6df;
}
html[data-theme="dark"] .tx{--tx-ink:#edf1f7;--tx-mute:#98a6bb;--tx-card:#111b2e;--tx-card2:#0d1626;--tx-line:#243350;--tx-chip:#14203a;--tx-chip-ink:#dfe9fb;--tx-sh:0 1px 2px rgba(0,0,0,.4),0 18px 36px -22px rgba(0,0,0,.9);--tx-glow:rgba(10,139,255,.4)}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .tx{--tx-ink:#edf1f7;--tx-mute:#98a6bb;--tx-card:#111b2e;--tx-card2:#0d1626;--tx-line:#243350;--tx-chip:#14203a;--tx-chip-ink:#dfe9fb;--tx-sh:0 1px 2px rgba(0,0,0,.4),0 18px 36px -22px rgba(0,0,0,.9);--tx-glow:rgba(10,139,255,.4)}}
.tx *{box-sizing:border-box}
.tx svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ── Баннер ── */
.tx-hero{position:relative;overflow:hidden;margin:clamp(10px,1.8vw,18px) 0 clamp(16px,2.4vw,26px);padding:clamp(22px,3.6vw,44px);border-radius:calc(var(--tx-r) + 8px);color:var(--tx-dink);
  background:radial-gradient(90% 120% at 100% 0,rgba(255,176,32,.38),transparent 55%),radial-gradient(80% 110% at 0 100%,rgba(25,186,255,.45),transparent 55%),linear-gradient(160deg,#0b1a38,#060d1e);
  border:1px solid var(--tx-dl);box-shadow:0 30px 70px -40px rgba(10,80,200,.9)}
.tx-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(140,180,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(140,180,255,.08) 1px,transparent 1px);background-size:38px 38px;mask-image:radial-gradient(120% 90% at 70% 0,#000 20%,transparent 75%);pointer-events:none}
.tx-hero::after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;border:1px solid rgba(255,200,90,.3);box-shadow:0 0 0 38px rgba(255,200,90,.05),0 0 0 84px rgba(255,200,90,.04);pointer-events:none;animation:txRingBg 9s ease-in-out infinite}
@keyframes txRingBg{50%{transform:scale(1.08);opacity:.7}}
.tx-hero>*{position:relative;z-index:1}
.tx-eyebrow{display:inline-flex;align-items:center;gap:9px;font:700 12px/1 var(--font-mono,ui-monospace,monospace);letter-spacing:.1em;text-transform:uppercase;color:#ffd27d}
.tx-eyebrow svg{width:20px;height:20px;filter:drop-shadow(0 0 6px rgba(255,190,60,.9))}
.tx-hero h1{margin:12px 0 12px;max-width:900px;color:#fff;font:900 clamp(28px,4.4vw,52px)/1.07 var(--font-display,system-ui);letter-spacing:-.025em;text-shadow:0 0 40px rgba(60,140,255,.4)}
.tx-hero h1 em{font-style:normal;background:linear-gradient(90deg,#ffd27d,#ff9a5c);-webkit-background-clip:text;background-clip:text;color:transparent}
.tx-lead{max-width:800px;color:var(--tx-dmute);font-size:clamp(15px,1.5vw,17px);line-height:1.65;margin:0 0 18px}
.tx-badges{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.tx-badges span{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:99px;border:1px solid rgba(160,190,255,.3);background:rgba(8,16,36,.55);backdrop-filter:blur(8px);color:#fff;font:700 13px/1.2 var(--font-display,system-ui)}
.tx-badges i{width:8px;height:8px;border-radius:50%;background:#2fd18b;box-shadow:0 0 8px #2fd18b}
.tx-pick{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tx-pick__t{font:700 13px/1 var(--font-display,system-ui);color:var(--tx-dmute);margin-right:4px}
.tx-pick__b{display:inline-flex;align-items:center;padding:11px 18px;border-radius:99px;color:#fff;text-decoration:none;font:800 14px/1 var(--font-display,system-ui);background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 10px 24px -12px var(--c1);transition:transform .2s,filter .2s}
.tx-pick__b:hover{transform:translateY(-2px);filter:brightness(1.1)}

/* ── Кто вы ── */
.tx-role{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:99px;background:var(--tx-card2);border:1px solid var(--tx-line);margin:0 0 14px}
.tx-role button{appearance:none;display:inline-flex;align-items:center;gap:9px;border:0;background:transparent;color:var(--tx-chip-ink);padding:12px 18px;border-radius:99px;font:700 14px/1 var(--font-display,system-ui);cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.tx-role button svg{width:18px;height:18px}
.tx-role button:hover{background:rgba(10,139,255,.12)}
.tx-role button.is-on{background:linear-gradient(135deg,#0a8bff,#6a5cff);color:#fff;box-shadow:0 10px 22px -10px var(--tx-glow)}
.tx-steps{list-style:none;margin:0 0 clamp(18px,2.6vw,28px);padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px}
.tx-steps[data-panel]{display:none}
.tx-steps.is-on{display:grid;animation:txIn .35s both}
.tx:not(.is-js) .tx-steps[data-panel]{display:grid}
@keyframes txIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tx-steps li{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:var(--tx-r);background:var(--tx-card);border:1px solid var(--tx-line);box-shadow:var(--tx-sh)}
.tx-steps b{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#ffb020,#ff6a3a);color:#2a1300;font:900 18px/1 var(--font-display,system-ui);box-shadow:0 8px 16px -8px #ffb020}
.tx-steps span{color:var(--tx-mute);font-size:13.5px;line-height:1.5}
.tx-steps strong{display:block;margin-bottom:3px;color:var(--tx-ink);font:800 15px/1.3 var(--font-display,system-ui)}

/* ── Карточки чатов ── */
.tx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(14px,2vw,22px)}
.tx-card{position:relative;overflow:hidden;display:flex;flex-direction:column;border-radius:calc(var(--tx-r) + 4px);background:var(--tx-card);border:1px solid var(--tx-line);box-shadow:var(--tx-sh);color:var(--tx-ink);scroll-margin-top:96px;transition:transform .3s,box-shadow .3s,border-color .3s;opacity:0;transform:translateY(16px)}
.tx:not(.is-js) .tx-card,.tx-card.is-in{opacity:1;transform:none;transition:opacity .6s,transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s}
.tx-card:hover,.tx-card.is-hot{transform:translateY(-5px);border-color:var(--c1);box-shadow:0 28px 52px -26px var(--c1)}
.tx-card.is-hot{animation:txHot 1.4s ease-out 1}
@keyframes txHot{0%{box-shadow:0 0 0 0 var(--c1)}60%{box-shadow:0 0 0 14px transparent}}
.tx-card__img{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0b1730}
.tx-card__img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.tx-card:hover .tx-card__img img{transform:scale(1.06)}
.tx-card__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,8,24,.45) 0,transparent 35%,transparent 55%,rgba(3,8,24,.82) 100%)}
.tx-card__town{position:absolute;left:14px;top:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:99px;background:rgba(6,14,34,.7);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(8px);color:#fff;font:800 14px/1 var(--font-display,system-ui)}
.tx-card__town svg{width:18px;height:18px;color:var(--c1)}
.tx-card__free{position:absolute;right:14px;top:14px;z-index:2;padding:8px 12px;border-radius:99px;background:linear-gradient(135deg,#2fd18b,#19baff);color:#04283f;font:900 11px/1 var(--font-mono,ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;box-shadow:0 10px 20px -10px #2fd18b}
.tx-card__body{display:flex;flex-direction:column;gap:10px;padding:clamp(16px,2vw,22px)}
.tx-card h2{margin:0;color:var(--tx-ink);font:900 clamp(21px,2.2vw,26px)/1.2 var(--font-display,system-ui);letter-spacing:-.01em}
.tx-card__area{margin:0;color:var(--c1);font:800 12px/1.2 var(--font-mono,ui-monospace,monospace);letter-spacing:.06em;text-transform:uppercase}
.tx-card p{margin:0;color:var(--tx-mute);font-size:14.5px;line-height:1.6}
.tx-card p.tx-card__area{color:var(--c1);font-size:12px;line-height:1.2}
.tx-card__tags{list-style:none;margin:2px 0 4px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.tx-card__tags li{padding:6px 11px;border-radius:99px;background:var(--tx-card2);border:1px solid var(--tx-line);color:var(--tx-chip-ink);font:700 12px/1 var(--font-display,system-ui)}

/* ── Пульсирующая кнопка ── */
.tx-join{position:relative;display:flex;align-items:center;justify-content:center;gap:11px;margin-top:6px;padding:18px 22px;border-radius:16px;color:#fff;text-decoration:none;font:900 clamp(16px,1.7vw,18px)/1.1 var(--font-display,system-ui);letter-spacing:.01em;text-align:center;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.4) 50%,transparent 60%) -100% 0/50% 100% no-repeat,linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 14px 30px -12px var(--c1),inset 0 1px 0 rgba(255,255,255,.35);text-shadow:0 1px 8px rgba(0,0,0,.25);animation:txBeat 1.7s ease-in-out infinite,txShine 3.4s ease-in-out 1s infinite;isolation:isolate;transition:filter .2s}
.tx-join svg{flex:none;width:22px;height:22px;stroke-width:2}
.tx-join__ring{position:absolute;inset:-2px;border-radius:18px;border:2px solid var(--c1);z-index:-1;animation:txRing 1.7s ease-out infinite}
.tx-join__arr{animation:txNudge 1.2s ease-in-out infinite}
.tx-join:hover{filter:brightness(1.12);animation-play-state:paused}
.tx-join:active{transform:scale(.98)}
@keyframes txBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes txRing{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.14,1.5);opacity:0}}
@keyframes txShine{0%,55%{background-position:-100% 0,0 0}100%{background-position:200% 0,0 0}}
@keyframes txNudge{50%{transform:translateX(5px)}}
.tx-copy{appearance:none;cursor:pointer;display:block;width:100%;padding:12px;border-radius:12px;border:1px dashed var(--tx-line);background:transparent;color:var(--tx-mute);font:700 13px/1 var(--font-display,system-ui);transition:border-color .2s,color .2s,background .2s}
.tx-copy:hover{border-color:var(--c1);color:var(--tx-ink);background:var(--tx-card2)}
.tx-copy.is-ok{border-style:solid;border-color:#2fd18b;color:#0d8f5c;background:rgba(47,209,139,.12)}

/* ── Пояснения ── */
.tx-note{margin:clamp(22px,3vw,34px) 0;padding:clamp(18px,2.6vw,28px);border-radius:calc(var(--tx-r) + 2px);background:var(--tx-card);border:1px solid var(--tx-line);box-shadow:var(--tx-sh);color:var(--tx-ink)}
.tx-note h2{margin:0 0 12px;color:var(--tx-ink);font:900 22px/1.25 var(--font-display,system-ui)}
.tx-note p,.tx-note li{color:var(--tx-mute);font-size:14.5px;line-height:1.65}
.tx-note a{color:var(--tx-sig);font-weight:700}
.tx-note ul{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.tx-note li{position:relative;padding-left:26px}
.tx-note li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,#ffb020,#ff6a3a);box-shadow:0 0 10px rgba(255,176,32,.6)}
.tx-faq details{border-top:1px solid var(--tx-line);padding:14px 0}
.tx-faq details:first-of-type{border-top:0}
.tx-faq summary{cursor:pointer;color:var(--tx-ink);font:700 15.5px/1.4 var(--font-display,system-ui);list-style:none;display:flex;justify-content:space-between;gap:12px}
.tx-faq summary::-webkit-details-marker{display:none}
.tx-faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--tx-card2);border:1px solid var(--tx-line);color:var(--tx-sig);font-weight:800}
.tx-faq details[open] summary::after{content:"−"}
.tx-faq p{margin:10px 0 0}

@media(max-width:600px){
  .tx-role{display:grid;width:100%;border-radius:22px}.tx-role button{justify-content:center;width:100%}
  .tx-card__img{aspect-ratio:16/10}
  .tx-pick__b{flex:1 1 calc(50% - 8px);justify-content:center}
}
@media(prefers-reduced-motion:reduce){.tx *{animation:none!important;transition:none!important}.tx-card{opacity:1!important;transform:none!important}}