/* Баннер главной v3: объёмные карточки со свечением логотипов, бегущая рамка, шестиугольники, свет за курсором */
#ks-grid { display: none !important; }
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

.kx-hero.kx-hero2 { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: 24px 44px; max-width: 1140px; margin: 0 auto 28px; padding: 56px 48px 38px; text-align: left; border: 1px solid #2a2a2a; border-radius: 32px; background: #020202; overflow: hidden; position: relative; isolation: isolate; }
.kx-hero2 > * { position: relative; z-index: 1; }
.kx-hero2 .kx-hl h1 { margin: 0; max-width: 540px; font: 500 clamp(34px, 4.4vw, 56px)/1.05 Inter, system-ui, sans-serif; letter-spacing: -.035em; }
.kx-hero2 .kx-hl p { margin: 20px 0 0; max-width: 480px; font-size: 16px; line-height: 1.6; }
.kx-hero2 .kx-cta { justify-content: flex-start; margin-top: 30px; }
.kx-hero2 .kx-pills { grid-column: 1 / -1; justify-content: flex-start; margin-top: 2px; }

/* фон */
.kx-bg { position: absolute !important; inset: 0; z-index: 0 !important; pointer-events: none; overflow: hidden; }
.kx-bg::before { content: ""; position: absolute; inset: -60px; background: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px) 0 0/44px 44px, linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px) 0 0/44px 44px; -webkit-mask-image: radial-gradient(75% 95% at 78% 45%, #000, transparent 78%); mask-image: radial-gradient(75% 95% at 78% 45%, #000, transparent 78%); animation: kxGrid 40s linear infinite; }
.kx-bg i { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.22), rgba(255,255,255,0) 65%); filter: blur(6px); }
.kx-bg i:nth-of-type(1) { width: 560px; height: 560px; right: -140px; top: -160px; animation: kxDrift1 16s ease-in-out infinite alternate; }
.kx-bg i:nth-of-type(2) { width: 400px; height: 400px; right: 140px; bottom: -220px; opacity: .7; animation: kxDrift2 21s ease-in-out infinite alternate; }
.kx-bg i:nth-of-type(3) { width: 280px; height: 280px; left: -100px; top: 28%; opacity: .45; animation: kxDrift3 25s ease-in-out infinite alternate; }
.kx-spot { position: absolute; display: block; left: var(--mx, 72%); top: var(--my, 38%); width: 560px; height: 560px; margin: -280px 0 0 -280px; background: radial-gradient(circle, rgba(255,255,255,.11), rgba(255,255,255,0) 62%); transition: left .35s ease-out, top .35s ease-out; }
.kx-hex { position: absolute; width: 640px; height: 640px; right: -70px; top: 50%; margin-top: -320px; }
.kx-hex1 { animation: kxSpin 140s linear infinite; }
.kx-hex2 { width: 480px; height: 480px; right: 10px; margin-top: -240px; animation: kxSpin 90s linear infinite reverse; }
.kx-dots b { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #fff; opacity: var(--o); animation: kxDot var(--t) ease-in-out var(--d) infinite alternate; }
@keyframes kxGrid { to { transform: translate(44px, 44px); } }
@keyframes kxDrift1 { to { transform: translate(-100px, 80px) scale(1.15); } }
@keyframes kxDrift2 { to { transform: translate(120px, -50px) scale(.9); } }
@keyframes kxDrift3 { to { transform: translate(80px, 70px) scale(1.2); } }
@keyframes kxSpin { to { transform: rotate(360deg); } }
@keyframes kxDot { to { transform: translate(16px, -28px); opacity: .08; } }

/* карточки 3 × 3 */
.kx-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: start; padding-bottom: 12px; }
.kx-t { position: relative; z-index: 0; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 13px 13px 12px; border-radius: 22px; border: 1px solid #2c2c2c; background: linear-gradient(155deg, rgba(255,255,255,.085), rgba(255,255,255,0) 52%), #060606; box-shadow: 0 16px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.07); color: #fff; cursor: pointer; text-align: left; font-family: Inter, sans-serif; transition: transform .18s ease-out, border-color .25s, background .25s, scale .25s, opacity .3s; animation: kxFloat 6s ease-in-out infinite; will-change: transform; }
.kx-t > * { position: relative; z-index: 1; }
.kx-t::before { content: ""; position: absolute; z-index: 0; left: -4px; top: -4px; width: 90px; height: 90px; border-radius: 50%; background: var(--lg, none) center/cover no-repeat; filter: blur(26px) saturate(1.6); opacity: .5; transition: opacity .3s; pointer-events: none; }
.kx-t.wglow::before { background: #fff; opacity: .16; }
.kx-t::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--ang), rgba(255,255,255,0) 0 62%, rgba(255,255,255,.95) 82%, rgba(255,255,255,0) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .35s; animation: kxAng 2.2s linear infinite; pointer-events: none; }
.kx-t.hl::after, .kx-t:hover:not(:disabled)::after { opacity: 1; }
.kx-t:nth-child(3n+2) { margin-top: 18px; }
.kx-t:nth-child(3n) { margin-top: 7px; }
.kx-t:nth-child(2n) { animation-duration: 7.4s; animation-delay: -2s; }
.kx-t:nth-child(3n) { animation-duration: 6.6s; animation-delay: -4s; }
.kx-t:nth-child(5n) { animation-duration: 8.2s; animation-delay: -1s; }
@keyframes kxFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes kxAng { to { --ang: 360deg; } }
.kx-t:hover:not(:disabled) { background: linear-gradient(155deg, rgba(255,255,255,.14), rgba(255,255,255,0) 55%), #0b0b0b; scale: 1.035; animation-play-state: paused; }
.kx-t:hover:not(:disabled)::before { opacity: .8; }
.kx-t:disabled { cursor: default; opacity: .55; }
.kx-t .kx-tl2 { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 9px; border-radius: 17px; background: #000; border: 1px solid #2f2f2f; box-shadow: 0 8px 18px rgba(0,0,0,.6); overflow: hidden; }
.kx-t .kx-tl2 img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.kx-t .kx-tl2 svg { display: block; }
.kx-t b { font: 600 14px/1.2 Inter, sans-serif; letter-spacing: -.01em; }
.kx-t small { align-self: flex-start; margin-top: 4px; padding: 3px 9px; border-radius: 980px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.12); font: 600 11.5px/1.3 Inter, sans-serif; color: #e8e8e8; min-height: 21px; }
.kx-t small:empty { display: none; }
.kx-t.out { opacity: 0; scale: .88; filter: blur(5px); }
.kx-t.in { animation: kxIn .6s cubic-bezier(.22,1,.36,1), kxFloat 6s ease-in-out infinite; }
@keyframes kxIn { from { opacity: 0; scale: .86; filter: blur(5px); } to { opacity: 1; scale: 1; filter: blur(0); } }
.pl-sk-dot { width: 22px; height: 22px; border-radius: 50%; background: #1a1a1a; }
.pl-svgtile { color: #fff; }

@media (max-width: 900px) {
  .kx-hero.kx-hero2 { grid-template-columns: 1fr; padding: 34px 22px 26px; border-radius: 26px; margin: 0 12px 22px; }
  .kx-hero2 .kx-hl h1 { font-size: clamp(32px, 8vw, 46px); }
  .kx-t:nth-child(n) { margin-top: 0; }
  .kx-hex { right: -220px; opacity: .7; }
}
@media (max-width: 560px) {
  .kx-hero.kx-hero2 { padding: 26px 14px 20px; margin: 0 10px 18px; border-radius: 22px; }
  .kx-hero2 .kx-hl p { font-size: 14.5px; margin-top: 14px; }
  .kx-hero2 .kx-cta { margin-top: 20px; }
  .kx-hero2 .kx-btn { flex: 1 1 100%; }
  .kx-tiles { gap: 8px; }
  .kx-t { padding: 10px; border-radius: 17px; }
  .kx-t .kx-tl2 { width: 46px; height: 46px; border-radius: 13px; margin-bottom: 6px; }
  .kx-t b { font-size: 12px; }
  .kx-t small { font-size: 10.5px; padding: 2px 7px; min-height: 18px; }
  .kx-hero2 .kx-pills { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .kx-t, .kx-t::after, .kx-bg::before, .kx-bg i, .kx-hex, .kx-dots b { animation: none !important; } }
.kx-t small { white-space: nowrap; }
@media (max-width: 900px) { .kx-tiles { align-items: stretch; } }
@media (max-width: 560px) { .kx-t small { font-size: 10px; padding: 2px 6px; } .kx-t b { overflow-wrap: anywhere; } }