/* About page — a sticky headline column and the story column, in the site's dark cards and green accent. */

.sab-wrap { width: 100%; max-width: 1264px; margin: 0 auto; padding: 24px 32px 56px }

.sab-crumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 28px; color: #6b6b75; font-size: 12px; font-weight: 600 }
.sab-crumbs a { display: inline-flex; align-items: center; color: #8f8f93; text-decoration: none; transition: color .2s }
.sab-crumbs a:hover { color: #22d17e }
.sab-crumbs svg { width: 14px; height: 14px }
.sab-crumbs span[aria-current] { color: #d0d0d4 }

.sab-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start }

.sab-aside { position: sticky; top: calc(var(--header-height, 72px) + 48px); display: flex; flex-direction: column; gap: 28px; animation: sab-rise .5s cubic-bezier(.22, 1, .36, 1) both }
.sab-eyebrow { display: inline-flex; width: fit-content; align-items: center; gap: 7px; padding: 4px 10px; border: 1px solid rgba(34, 209, 126, .25); border-radius: 999px; background: rgba(34, 209, 126, .06); color: #22d17e; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase }
.sab-eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: #22d17e; box-shadow: 0 0 8px #22d17e }
.sab-title { margin: 12px 0 0; color: #fff; font-family: var(--font-display, inherit); font-size: 40px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em }
.sab-title em { color: #22d17e; font-style: normal }

.sab-facts-label { margin: 0 0 12px; color: #8f8f93; font-size: 12px; font-weight: 600 }
.sab-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
.sab-fact {
  display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid #26262c; border-radius: 12px;
  background: linear-gradient(180deg, #151518, #0f0f12); transition: border-color .25s, transform .25s, box-shadow .25s;
}
.sab-fact:hover { border-color: rgba(34, 209, 126, .3); box-shadow: 0 10px 24px -16px rgba(34, 209, 126, .5); transform: translateY(-2px) }
.sab-fact-icon { display: grid; flex: none; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(34, 209, 126, .25); border-radius: 10px; background: rgba(34, 209, 126, .08); color: #22d17e }
.sab-fact-icon svg { width: 18px; height: 18px }
.sab-fact strong { display: block; color: #f2f2f4; font-size: 13px; font-weight: 700; line-height: 1.3 }
.sab-fact small { display: block; margin-top: 2px; color: #8f8f93; font-size: 11.5px; font-weight: 500; line-height: 1.35 }

/* The cutout is the default artwork; the scene remains available for comparison. */
.sab-art { position: relative; width: 100%; height: 480px; margin: -10px 0 0; isolation: isolate }
.sab-art img { display: block; width: 100%; height: 100%; object-fit: contain }
.sab-art--cutout::before {
  position: absolute; z-index: -1; left: 5%; bottom: 0; width: 72%; height: 55%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 68%, rgba(35, 255, 132, .58) 0%, rgba(24, 222, 111, .34) 30%, rgba(19, 176, 89, .13) 53%, transparent 74%);
  content: ''; filter: blur(22px); pointer-events: none;
  animation: sab-case-glow 4.2s ease-in-out infinite alternate;
}
.sab-art--cutout::after {
  position: absolute; z-index: 1; left: 11%; bottom: 9%; width: 52%; height: 31%; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(51, 255, 148, .45), rgba(30, 238, 128, .18) 42%, transparent 72%);
  content: ''; filter: blur(26px); mix-blend-mode: screen; pointer-events: none;
  animation: sab-case-glow 4.2s ease-in-out infinite alternate;
}
.sab-art--cutout img { position: relative; object-position: center bottom; filter: drop-shadow(0 12px 32px rgba(13, 209, 113, .2)) }
.sab-art--scene { overflow: hidden; border: 1px solid rgba(34, 209, 126, .32); border-radius: 14px; background: #0c1411; box-shadow: 0 16px 40px -28px rgba(17, 201, 108, .3) }
.sab-art--scene::before { position: absolute; inset: -18px; z-index: -1; background: url('/exact/assets/images/about/character-scene.webp') center / cover; content: ''; filter: blur(18px) brightness(.36) }
.sab-art--scene img { position: relative; object-position: center; }

.sab-story { display: flex; flex-direction: column; gap: 14px }
.sab-section {
  padding: 22px 24px; border: 1px solid #1f1f24; border-radius: 14px; background: linear-gradient(180deg, #121215, #0d0d10);
  animation: sab-rise .5s cubic-bezier(.22, 1, .36, 1) both; transition: border-color .25s;
}
.sab-section:hover { border-color: #2c2c33 }
.sab-section:nth-child(2) { animation-delay: .05s }
.sab-section:nth-child(3) { animation-delay: .1s }
.sab-section:nth-child(4) { animation-delay: .15s }
.sab-section h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; color: #fff; font-size: 18px; font-weight: 800; line-height: 1.3 }
.sab-section h2 b { color: #22d17e; font: 800 12px/1 "JetBrains Mono", monospace; letter-spacing: .04em }
.sab-section p { margin: 0; color: #9a9aa4; font-size: 14px; font-weight: 500; line-height: 1.7 }

.sab-cta {
  display: inline-flex; width: fit-content; height: 46px; align-items: center; gap: 9px; margin-top: 10px; padding: 0 24px; border-radius: 11px;
  background: linear-gradient(180deg, #2ee88f, #1db872); color: #06140c; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-decoration: none; text-transform: uppercase;
  transition: filter .2s, box-shadow .25s, transform .15s;
}
.sab-cta:hover { filter: brightness(1.08); box-shadow: 0 10px 28px -10px rgba(34, 209, 126, .6) }
.sab-cta:active { transform: scale(.97) }
.sab-cta svg { width: 15px; height: 15px }

@keyframes sab-rise { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@keyframes sab-case-glow {
  from { opacity: .58; transform: scale(.92) }
  to { opacity: 1; transform: scale(1.08) }
}

@media (max-width: 960px) {
  .sab-grid { grid-template-columns: 1fr; gap: 32px }
  .sab-aside { position: static }
  .sab-art { max-width: 570px; margin: -10px auto 0 }
}
@media (max-width: 640px) {
  .sab-wrap { padding: 16px 16px 40px }
  .sab-title { font-size: 30px }
  .sab-facts { grid-template-columns: 1fr }
  .sab-section { padding: 18px }
  .sab-cta { width: 100%; justify-content: center }
  .sab-art { height: auto; aspect-ratio: 1 / 1; margin-top: -12px }
  .sab-art--cutout { aspect-ratio: 1 / 1.15 }
}
@media (prefers-reduced-motion: reduce) {
  .sab-aside, .sab-section { animation: none }
  .sab-fact:hover { transform: none }
  .sab-art--cutout::before, .sab-art--cutout::after { animation: none; opacity: .75 }
}

/* Баннер в конце рассказа — такой же, как на страницах оружия: карточка с зелёной
   рамкой, заголовком и кнопкой продажи вместо прежней одиночной кнопки. */
.sab-banner {
  display: grid; align-items: center; gap: 24px; margin-top: 10px; grid-template-columns: 1fr auto;
  overflow: hidden; border: 1px solid rgba(34, 197, 94, .2); border-radius: 16px; padding: 32px;
  background: linear-gradient(135deg, #0d1411, #0a0d0c 55%, #0a1f15);
  animation: sab-rise .5s cubic-bezier(.22, 1, .36, 1) both;
}
.sab-banner h3 { margin: 0; color: #fff; font-size: 26px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2 }
.sab-banner p { margin: 8px 0 0; max-width: 560px; color: rgba(255, 255, 255, .6); font-size: 14px; font-weight: 500; line-height: 1.6 }
.sab-banner-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; padding: 16px 28px;
  background: linear-gradient(180deg, #2ee36a, #16a34a); box-shadow: 0 8px 30px -8px rgba(34, 197, 94, .7);
  color: #000; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; white-space: nowrap;
  transition: box-shadow .25s, filter .2s, transform .15s;
}
.sab-banner-cta:hover { box-shadow: 0 12px 40px -8px rgba(34, 197, 94, .95); filter: brightness(1.04) }
.sab-banner-cta:active { transform: scale(.98) }
.sab-banner-cta svg { width: 16px; height: 16px; flex: none }
.sab-banner-arrow { transition: transform .25s }
.sab-banner-cta:hover .sab-banner-arrow { transform: translateX(2px) }

/* Колонка рассказа узкая и на большом экране (около 570px), поэтому раскладка баннера
   считается по его собственной ширине, а не по ширине окна: тесно — заголовок, подпись
   и кнопка во всю ширину друг под другом, просторно — кнопка справа, как в оригинале. */
.sab-story { container-type: inline-size }
@container (max-width: 660px) {
  .sab-banner { grid-template-columns: 1fr; gap: 20px; padding: 26px }
  .sab-banner h3 { font-size: 23px }
  .sab-banner-cta { width: 100% }
}
@media (max-width: 760px) {
  .sab-banner { grid-template-columns: 1fr; gap: 20px; padding: 24px }
  .sab-banner h3 { font-size: 22px }
  .sab-banner-cta { width: 100% }
}
@media (prefers-reduced-motion: reduce) {
  .sab-banner { animation: none }
}

/* ---- баннер с кнопкой: четыре варианта, виден один -------------------------------
 * Блок стоит отдельным рядом под колонкой рассказа, поэтому ширина у каждого варианта
 * своя — правится одной строкой ниже (--sab-banner-width; 100% — во всю ширину страницы).
 * Какой вариант показан, говорит атрибут data-about-banner на <html>: его ставит сервер
 * по адресу (?banner=b1..b4), а в режиме просмотра (?banners) переключатель внизу справа
 * меняет его на лету, без перезагрузки.
 */
.sab-banners { margin-top: 38px }
.sab-banner-slot {
  display: none; width: 100%; max-width: var(--sab-banner-width, 100%); margin-inline: auto;
  container-type: inline-size;
}
.sab-banner-slot[data-banner="b1"] { --sab-banner-width: 100% }
.sab-banner-slot[data-banner="b2"] { --sab-banner-width: 100% }
.sab-banner-slot[data-banner="b3"] { --sab-banner-width: 100% }
.sab-banner-slot[data-banner="b4"] { --sab-banner-width: 100% }

/* Переход на страницу внутри сайта делает свой переход между страницами, и разметка
   приходит без ответа сервера — атрибута на <html> тогда нет. Поэтому вариант по
   умолчанию показывается и без атрибута; держите его тем же, что в route.ts. */
html:not([data-about-banner]) .sab-banner-slot[data-banner="b2"],
html[data-about-banner="b1"] .sab-banner-slot[data-banner="b1"],
html[data-about-banner="b2"] .sab-banner-slot[data-banner="b2"],
html[data-about-banner="b3"] .sab-banner-slot[data-banner="b3"],
html[data-about-banner="b4"] .sab-banner-slot[data-banner="b4"] { display: block }

/* Переключатель вариантов — только в режиме просмотра, посетителям его не видно. */
.sab-switch {
  /* Слева внизу: справа у сайта свои плавающие кнопки — поддержка и выбор языка. */
  position: fixed; left: 18px; bottom: 18px; z-index: 200; display: none; flex-direction: column; gap: 9px;
  border: 1px solid #23232a; border-radius: 12px; padding: 12px 14px; background: rgba(12, 12, 15, .94);
  box-shadow: 0 18px 40px -20px #000;
}
html[data-about-preview] .sab-switch { display: flex }
.sab-switch-title { color: rgba(255, 255, 255, .38); font: 800 9px/1 "JetBrains Mono", monospace; letter-spacing: .16em; text-transform: uppercase }
.sab-switch-row { display: flex; flex-wrap: wrap; gap: 6px; max-width: 330px }
.sab-switch-btn {
  border: 1px solid #26262d; border-radius: 8px; padding: 7px 10px; background: #141418;
  color: rgba(255, 255, 255, .62); font: 700 11px/1 inherit; cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.sab-switch-btn:hover { border-color: #3a3a44; color: #fff }
.sab-switch-btn.active { border-color: rgba(34, 209, 126, .5); background: rgba(34, 209, 126, .1); color: #22d17e }

/* ---- вариант 1: как на страницах оружия ------------------------------------------ */
.sab-banner {
  display: grid; align-items: center; gap: 24px; grid-template-columns: 1fr auto;
  overflow: hidden; border: 1px solid rgba(34, 197, 94, .2); border-radius: 16px; padding: 32px;
  background: linear-gradient(135deg, #0d1411, #0a0d0c 55%, #0a1f15);
  animation: sab-rise .5s cubic-bezier(.22, 1, .36, 1) both;
}
.sab-banner h3 { margin: 0; color: #fff; font-size: 26px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2 }
.sab-banner p { margin: 8px 0 0; max-width: 560px; color: rgba(255, 255, 255, .6); font-size: 14px; font-weight: 500; line-height: 1.6 }
.sab-banner-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; padding: 16px 28px;
  background: linear-gradient(180deg, #2ee36a, #16a34a); box-shadow: 0 8px 30px -8px rgba(34, 197, 94, .7);
  color: #000; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; white-space: nowrap;
  transition: box-shadow .25s, filter .2s, transform .15s;
}
.sab-banner-cta:hover { box-shadow: 0 12px 40px -8px rgba(34, 197, 94, .95); filter: brightness(1.04) }
.sab-banner-cta:active { transform: scale(.98) }
.sab-banner-cta svg { width: 16px; height: 16px; flex: none }
.sab-banner-arrow { transition: transform .25s }
.sab-banner-cta:hover .sab-banner-arrow { transform: translateX(2px) }

/* ---- вариант 2: как на страницах скина (в оригинале стили лежат в самой странице) -- */
@keyframes skfc-spin { to { transform: rotate(360deg) } }
@keyframes skfc-drift { 0%, 100% { transform: translate(0, 0) } 50% { transform: translate(26px, -18px) } }
@keyframes skfc-float { 0%, 100% { opacity: 0; transform: translateY(0) scale(.6) } 35% { opacity: .9 } 50% { transform: translateY(-18px) scale(1.1) } 100% { opacity: 0 } }
@keyframes skfc-sweep { 0% { transform: translateX(-160%) } 55%, 100% { transform: translateX(320%) } }
@keyframes skfc-btnglow { 0%, 100% { box-shadow: 0 8px 30px -8px rgba(34, 197, 94, .65) } 50% { box-shadow: 0 14px 46px -8px rgba(34, 197, 94, 1) } }
@keyframes skfc-textglow { 0%, 100% { text-shadow: 0 0 26px rgba(34, 197, 94, .18) } 50% { text-shadow: 0 0 42px rgba(34, 197, 94, .5) } }
@keyframes skfc-pulse { 0%, 100% { opacity: .5 } 50% { opacity: 1 } }
@keyframes skfc-rise { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }
@keyframes skfc-skinfloat { 0%, 100% { transform: translateY(-50%) rotate(-8deg) } 50% { transform: translateY(calc(-50% - 12px)) rotate(-8deg) } }

.skfc-card { position: relative; overflow: hidden; border-radius: 24px; padding: 2px; animation: skfc-rise .6s cubic-bezier(.2, .7, .2, 1) both }
.skfc-ring { position: absolute; inset: -60%; background: conic-gradient(from 0deg, transparent 0%, rgba(34, 197, 94, 0) 55%, rgba(34, 197, 94, .9) 72%, rgba(140, 255, 180, 1) 80%, rgba(34, 197, 94, .9) 88%, transparent 100%); animation: skfc-spin 7s linear infinite; will-change: transform }
.skfc-fill { position: absolute; inset: 2px; border-radius: 22px; background: linear-gradient(135deg, #0d1411, #0a0d0c 45%, #0a1f15) }
.skfc-glow { position: absolute; border-radius: 9999px; filter: blur(110px); pointer-events: none; will-change: transform }
.skfc-net {
  position: absolute; inset: 0; opacity: .04; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px);
  background-size: 44px 44px;
}
.skfc-particle { position: absolute; width: 5px; height: 5px; border-radius: 9999px; background: #22c55e; box-shadow: 0 0 10px #22c55e; pointer-events: none; will-change: transform, opacity }
.skfc-skin { position: absolute; right: 26px; top: 50%; width: 260px; height: auto; opacity: .18; pointer-events: none; user-select: none; animation: skfc-skinfloat 5s ease-in-out infinite; will-change: transform }
.skfc-body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 11px; padding: 32px 26px; text-align: center }
.skfc-chip {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(34, 197, 94, .4); border-radius: 9999px; padding: 5px 14px;
  background: rgba(34, 197, 94, .1); color: #22c55e; font-size: 10px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
}
.skfc-dot { position: relative; display: inline-flex; width: 6px; height: 6px }
.skfc-dot::before { position: absolute; inset: 0; border-radius: 9999px; background: #22c55e; content: ""; animation: skfc-pulse 1.6s ease-in-out infinite }
.skfc-title { margin: 0; color: #fff; font-size: 27px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; animation: skfc-textglow 3.2s ease-in-out infinite }
.skfc-lead { margin: 0; max-width: 520px; color: rgba(255, 255, 255, .6); font-size: 14px; font-weight: 500; line-height: 1.6 }
.skfc-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; overflow: hidden; border-radius: 14px; padding: 14px 30px;
  background: linear-gradient(180deg, #2ee36a, #16a34a); color: #04140a; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-decoration: none;
  text-transform: uppercase; white-space: nowrap; animation: skfc-btnglow 2.8s ease-in-out infinite; transition: transform .12s;
}
.skfc-btn:hover { transform: translateY(-2px) }
.skfc-btn:active { transform: translateY(0) scale(.98) }
.skfc-btn svg { width: 16px; height: 16px; flex: none }
.skfc-btn .shine { position: absolute; top: 0; bottom: 0; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent); animation: skfc-sweep 3s ease-in-out infinite; will-change: transform }
.skfc-btn .arr { transition: transform .2s }
.skfc-btn:hover .arr { transform: translateX(5px) }

/* ---- варианты 3 и 4: отступы доноров здесь не нужны, блок уже отбит сверху -------- */
.sab-banners .skct-card { margin-top: 0 }
.sab-banners .skc-cta { margin-top: 0 }

@container (max-width: 660px) {
  .skfc-skin { display: none }
  .skfc-title { font-size: 24px }
  .skfc-body { padding: 26px 20px }
  .sab-banner { grid-template-columns: 1fr; gap: 20px; padding: 26px }
  .sab-banner h3 { font-size: 23px }
  .sab-banner-cta { width: 100% }
}
@media (max-width: 640px) {
  .skfc-title { font-size: 22px }
  .sab-banners { margin-top: 26px }
  .sab-switch { left: 10px; bottom: 10px; padding: 10px 11px }
  .sab-switch-row { max-width: 240px }
}
@media (prefers-reduced-motion: reduce) {
  .sab-banner, .skfc-card, .skfc-ring, .skfc-glow, .skfc-particle, .skfc-title, .skfc-btn, .skfc-btn .shine, .skfc-skin { animation: none !important }
}

/* ---- вариант 3: стили со страницы конвертера рангов, перенесены как есть ---------- */
@keyframes skct-spin{to{transform:rotate(360deg)}}
@keyframes skct-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes skct-float{0%,100%{opacity:0;transform:translateY(0) scale(.6)}35%{opacity:.9}50%{transform:translateY(-16px) scale(1.1)}100%{opacity:0}}
@keyframes skct-drift{0%,100%{transform:translate(0)}50%{transform:translate(24px,-18px)}}
@keyframes skct-sweep{0%{transform:translateX(-140%)}55%,100%{transform:translateX(260%)}}
@keyframes skct-btnglow{0%,100%{box-shadow:0 8px 30px -8px rgba(34,197,94,.65)}50%{box-shadow:0 14px 44px -8px #22c55e}}
@keyframes skct-textglow{0%,100%{text-shadow:0 0 26px rgba(34,197,94,.18)}50%{text-shadow:0 0 40px rgba(34,197,94,.45)}}
@keyframes skct-pulse{0%,100%{opacity:.5}50%{opacity:1}}
.skct-card{position:relative;margin-top:80px;padding:2px;border-radius:18px;overflow:hidden;animation:skct-rise .6s cubic-bezier(.2,.7,.2,1) both}
.skct-ring{position:absolute;inset:-60%;background:conic-gradient(transparent 0%,transparent 55%,rgba(34,197,94,.9) 72%,#8cffb4 80%,rgba(34,197,94,.9) 88%,transparent 100%);animation:skct-spin 7s linear infinite}
.skct-fill{position:absolute;inset:2px;border-radius:16px;background:linear-gradient(135deg,#0d1411,#0a0d0c 45%,#0a1f15)}
.skct-body{position:relative;z-index:10;padding:42px 44px}
.skct-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px}
.skct-glow{position:absolute;border-radius:50%;filter:blur(120px);pointer-events:none}
.skct-glow.one{right:-120px;top:-120px;width:400px;height:400px;background:rgba(17,197,107,.55);opacity:.3;animation:skct-drift 9s ease-in-out infinite}
.skct-glow.two{left:-90px;bottom:-120px;width:320px;height:320px;background:rgba(20,235,128,.35);opacity:.25;animation:skct-drift 11s ease-in-out infinite reverse}
.skct-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);background-size:46px 46px;opacity:.04}
.skct-particle{position:absolute;width:5px;height:5px;border-radius:50%;background:#22c55e;box-shadow:0 0 10px #22c55e;pointer-events:none}
.skct-particle.p1{top:18%;left:8%;animation:skct-float 3.4s ease-in-out infinite}
.skct-particle.p2{top:29%;left:27%;animation:skct-float 4.3s ease-in-out .55s infinite}
.skct-particle.p3{top:40%;left:46%;animation:skct-float 5.2s ease-in-out 1.1s infinite}
.skct-particle.p4{top:51%;left:65%;animation:skct-float 3.4s ease-in-out 1.65s infinite}
.skct-particle.p5{top:62%;left:84%;animation:skct-float 4.3s ease-in-out 2.2s infinite}
.skct-particle.p6{top:73%;left:11%;animation:skct-float 5.2s ease-in-out 2.75s infinite}
.skct-particle.p7{top:20%;left:30%;animation:skct-float 3.4s ease-in-out 3.3s infinite}
.skct-chip{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;padding:5px 14px;border:1px solid rgba(34,197,94,.4);border-radius:9999px;background:rgba(34,197,94,.1);color:#22c55e;font-size:10px;font-weight:700;line-height:15px;letter-spacing:.22em;text-transform:uppercase}
.skct-dot{position:relative;display:inline-flex;width:6px;height:6px}
.skct-dot:before,.skct-dot:after{content:"";position:absolute;inset:0;border-radius:50%;background:#22c55e}
.skct-dot:before{animation:skct-pulse 1.6s ease-in-out infinite}
.skct-dot:after{opacity:.6}
.skct-title{margin:0;color:#fff;font-size:30px;font-weight:800;line-height:1.1;letter-spacing:-.02em;animation:skct-textglow 3.2s ease-in-out infinite}
.skct-body p{max-width:576px;margin:10px 0 0;color:rgba(255,255,255,.6);font-size:14px;line-height:1.625}
.skct-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;overflow:hidden;padding:16px 30px;border-radius:14px;background:linear-gradient(#2ee36a,#16a34a);color:#04140a;white-space:nowrap;text-decoration:none;font-size:13px;font-weight:800;line-height:19.5px;letter-spacing:.08em;text-transform:uppercase;animation:skct-btnglow 2.8s ease-in-out infinite;transition:transform .12s}
.skct-btn:hover{transform:translateY(-2px)}
.skct-btn:active{transform:translateY(0) scale(.98)}
.skct-btn .shine{position:absolute;top:0;bottom:0;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);animation:skct-sweep 3s ease-in-out infinite}
.skct-btn .arr{display:flex;transition:transform .2s}
.skct-btn .arr svg{width:16px;height:16px}
.skct-btn:hover .arr{transform:translateX(5px)}
@media(max-width:900px){.skct-body{padding:34px 32px}.skct-row{grid-template-columns:1fr}.skct-btn{width:max-content}}
@media(max-width:560px){.skct-title{font-size:26px}}
@media(prefers-reduced-motion:reduce){.rc-pop,.rc-reveal,.skct-ring,.skct-particle,.skct-title,.skct-btn,.skct-glow{animation:none!important}}