/* Copyright © 2026 MELDIX. TrioSoft. All rights reserved. */
/* TrioSoft «Графит» — home page. The hero states the brand, then opens a product window:
   a list of apps on the left (the carousel's tabs) and the chosen one on the right
   (home-feed.js). Under it: the numbers, the two catalogues, the popular apps, Premium,
   the battle pass and the shop (home-storefront.js), releases, news, why TrioSoft, the
   author, FAQ, support and the newsletter. */

.ts-home { display: flex; flex-direction: column; gap: clamp(72px, 8vw, 112px); padding-bottom: 8px; }
.ts-home > * { width: min(var(--p-content), calc(100% - var(--p-gutter) * 2)); margin-inline: auto; }
.ts-home > .ts-hero { width: 100%; }

/* ==================================================================== HERO */
.ts-hero { position: relative; isolation: isolate; padding: clamp(64px, 9vw, 112px) 0 0; overflow: hidden; }
.ts-hero::before { content: ''; position: absolute; left: 50%; top: -360px; z-index: -1; width: 1300px; height: 820px; margin-left: -650px; background: radial-gradient(closest-side, rgba(var(--p-violet-rgb), .26), transparent 72%); pointer-events: none; }
.ts-hero::after { content: ''; position: absolute; inset: 0 0 auto; z-index: -1; height: 900px; background-image: linear-gradient(var(--p-line) 1px, transparent 1px), linear-gradient(90deg, var(--p-line) 1px, transparent 1px); background-size: 64px 64px; background-position: center top; -webkit-mask-image: radial-gradient(ellipse 55% 50% at 50% 26%, #000, transparent 75%); mask-image: radial-gradient(ellipse 55% 50% at 50% 26%, #000, transparent 75%); pointer-events: none; }
.ts-hero.has-custom-background::before { background: var(--hero-background-image) center / cover; opacity: .18; }
.ts-hero-head { display: grid; justify-items: center; gap: 22px; width: min(920px, calc(100% - var(--p-gutter) * 2)); margin: 0 auto; text-align: center; }
.ts-hero-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ts-pill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 99px; color: var(--p-ink-2); background: rgba(15, 16, 18, .8); box-shadow: inset 0 0 0 1px var(--p-line-2); font-size: 13px; font-weight: 500; }
.ts-pill.is-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--p-violet); box-shadow: 0 0 10px var(--p-violet); }
.ts-pill:has(> #heroBadge:empty) { display: none; }
.ts-status-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--p-mint); box-shadow: 0 0 8px currentColor; }
.ts-hero h1 { margin: 0; font-size: clamp(42px, 6.6vw, 84px); line-height: 1.02; letter-spacing: -.04em; background: linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, .56)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ts-hero h1 .hero-title-line { display: block; }
.ts-hero h1 .hero-accent { background: linear-gradient(90deg, #ffa08c, #b9a6ff 50%, #7ee8c9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ts-hero-text { max-width: 600px; margin: 0; color: var(--p-ink-3); font-size: clamp(16px, 1.5vw, 18px); line-height: 1.6; }
.ts-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.ts-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; color: var(--p-ink-4); font: 400 12.5px var(--p-mono); }
.ts-trust:empty { display: none; }
.ts-trust span { display: inline-flex; align-items: center; gap: 8px; }
.ts-trust i { width: 5px; height: 5px; border-radius: 50%; background: var(--p-mint); }
.ts-trust span:nth-child(2) i { background: var(--p-violet); }
.ts-trust span:nth-child(3) i { background: var(--p-coral); }

/* the product window */
.ts-shot { width: min(1180px, calc(100% - var(--p-gutter) * 2)); margin: clamp(48px, 6vw, 80px) auto 0; padding: 7px; border-radius: 20px; background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .02) 70%); box-shadow: 0 50px 140px -50px rgba(var(--p-violet-rgb), .55); }
.ts-shot-frame { overflow: hidden; border-radius: 14px; background: var(--p-surface); box-shadow: inset 0 0 0 1px var(--p-line-2); }
.ts-shot-bar { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; box-shadow: inset 0 -1px 0 var(--p-line); }
.ts-shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--p-surface-3); }
.ts-shot-bar span { margin-left: 10px; padding: 3px 12px; border-radius: 6px; color: var(--p-ink-4); background: var(--p-bg-2); font: 400 12px var(--p-mono); }
.ts-shot-body { display: grid; grid-template-columns: 250px minmax(0, 1fr); height: clamp(380px, 38vw, 470px); }
.ts-shot-side { display: grid; align-content: start; gap: 2px; padding: 12px 10px; overflow-y: auto; box-shadow: inset -1px 0 0 var(--p-line); scrollbar-width: none; }
.ts-shot-side::-webkit-scrollbar { display: none; }
.ts-thumb { position: relative; display: flex; align-items: center; gap: 11px; min-width: 0; height: 50px; padding: 0 10px; overflow: hidden; border: 0; border-radius: 9px; color: var(--p-ink-3); background: none; text-align: left; cursor: pointer; transition: color .15s, background-color .15s; }
.ts-thumb img, .ts-thumb .ts-app-icon { width: 30px; height: 30px; flex: none; border-radius: 8px; object-fit: cover; }
.ts-thumb > span { min-width: 0; }
.ts-thumb b { display: block; overflow: hidden; font-size: 13.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.ts-thumb small { display: block; color: var(--p-ink-4); font: 400 11.5px var(--p-mono); }
.ts-thumb[aria-selected="true"] { color: var(--p-ink); background: var(--p-hover-2); }
.ts-thumb-bar { position: absolute; left: 10px; right: 10px; bottom: 0; height: 1px; }
.ts-thumb-bar::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--p-violet); box-shadow: 0 0 8px var(--p-violet); }
.ts-thumb[aria-selected="true"] .ts-thumb-bar::after { width: var(--p, 0%); }
@media (hover: hover) { .ts-thumb:hover { color: var(--p-ink); } }
.ts-slides { position: relative; overflow: hidden; }
.ts-slide { position: absolute; inset: 0; display: grid; align-items: center; opacity: 0; visibility: hidden; transition: opacity .6s var(--p-ease), visibility 0s .6s; }
.ts-slide.is-on { opacity: 1; visibility: visible; transition: opacity .6s var(--p-ease); }
.ts-slide-art { position: absolute; inset: 0; }
.ts-slide-art > img { width: 100%; height: 100%; object-fit: cover; }
.ts-slide-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15, 16, 18, .98) 34%, rgba(15, 16, 18, .7) 62%, rgba(15, 16, 18, .3)); }
.ts-slide-copy { position: relative; z-index: 1; display: grid; justify-items: start; gap: 14px; max-width: 440px; padding: 40px 44px; }
.ts-slide-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--p-ink-4); }
.ts-slide-meta .ts-mono { font-size: 12px; }
.ts-slide-title { margin: 0; font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -.03em; }
.ts-slide-copy > p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--p-ink-3); font-size: 15px; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.ts-slide-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .ts-slide .ts-slide-copy > * { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--p-out), transform .5s var(--p-out); }
  .ts-slide.is-on .ts-slide-copy > * { opacity: 1; transform: none; }
  .ts-slide.is-on .ts-slide-copy > :nth-child(2) { transition-delay: 60ms; }
  .ts-slide.is-on .ts-slide-copy > :nth-child(3) { transition-delay: 110ms; }
  .ts-slide.is-on .ts-slide-copy > :nth-child(4) { transition-delay: 160ms; }
}
/* the brand slide: the 3D gems with app icons orbiting, two status cards */
.ts-slide.is-brand { place-items: center; background: radial-gradient(50% 70% at 50% 50%, rgba(var(--p-violet-rgb), .14), transparent 70%), linear-gradient(var(--p-line) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, var(--p-line) 1px, transparent 1px) 0 0 / 40px 40px; }
.ts-hero-stage { --px: 0; --py: 0; position: relative; aspect-ratio: 1; height: 88%; max-width: 100%; }
.ts-orbit { position: absolute; border-radius: 50%; }
.ts-orbit-a { inset: 2%; z-index: 3; container-type: inline-size; border: 1px solid var(--p-line); transform: rotate(var(--orbit, 0deg)); }
.ts-orbit-b { inset: 20%; border: 1px dashed var(--p-line-2); }
@property --orbit { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@media (prefers-reduced-motion: no-preference) { .ts-orbit-a { animation: ts-orbit 80s linear infinite; } @keyframes ts-orbit { to { --orbit: 360deg; } } }
.ts-orbit-item { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px; transform: rotate(calc(360deg / var(--n) * var(--i))) translate(50cqi) rotate(calc(-360deg / var(--n) * var(--i) - var(--orbit, 0deg))); }
.ts-orbit-item .ts-app-icon { width: 40px; height: 40px; border-radius: 11px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 12px 26px -10px #000; }
.ts-gems { position: absolute; inset: 16%; z-index: 2; display: grid; place-items: center; transform: translate(calc(var(--px) * 12px), calc(var(--py) * 12px)); transition: transform .4s var(--p-out); }
.ts-gems > * { grid-area: 1 / 1; }
.ts-gems canvas { width: 100% !important; height: 100% !important; }
.ts-gems.is-live .os-logo-fallback { opacity: 0; }
.ts-gems .os-logo-fallback { width: 60%; height: 60%; filter: drop-shadow(0 30px 50px rgba(var(--p-violet-rgb), .45)); }
.ts-brand-cards { position: absolute; inset: 0; pointer-events: none; }
.ts-brand-cards > * { pointer-events: auto; }
.ts-float { position: absolute; z-index: 4; display: flex; align-items: center; gap: 12px; max-width: 270px; padding: 10px 14px 10px 10px; border-radius: 12px; color: var(--p-ink); background: rgba(20, 21, 24, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 0 0 1px var(--p-line-2), 0 20px 40px -20px #000; text-decoration: none; }
.ts-float small { display: block; color: var(--p-ink-4); font: 400 11px var(--p-mono); }
.ts-float strong { display: block; font-size: 13px; font-weight: 500; line-height: 1.35; }
.ts-float strong em { color: var(--p-violet-ink); font-style: normal; }
.ts-float .ts-app-icon { width: 34px; height: 34px; border-radius: 9px; }
.ts-float-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--p-surface-3); }
.ts-float-status { left: 20px; top: 20px; }
.ts-float-release { right: 20px; bottom: 20px; }
.ts-float-dot { flex: none; width: 8px; height: 8px; margin: 0 4px; border-radius: 50%; background: var(--p-mint); box-shadow: 0 0 10px var(--p-mint); }

@media (max-width: 900px) {
  .ts-shot { padding: 5px; border-radius: 16px; }
  .ts-shot-frame { border-radius: 12px; }
  .ts-shot-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; height: auto; }
  .ts-shot-side { display: flex; gap: 4px; padding: 8px; overflow-x: auto; box-shadow: inset 0 -1px 0 var(--p-line); }
  .ts-thumb { flex: none; height: 44px; padding: 0 10px 0 6px; }
  .ts-thumb small { display: none; }
  .ts-slides { min-height: 420px; }
  .ts-slide-art::after { background: linear-gradient(0deg, rgba(15, 16, 18, .98) 42%, rgba(15, 16, 18, .55)); }
  .ts-slide { align-items: end; }
  .ts-slide-copy { padding: 24px 20px; }
  .ts-hero-stage { height: 300px; }
  .ts-orbit-a { inset: 9%; }
  .ts-orbit-item, .ts-orbit-item .ts-app-icon { width: 32px; height: 32px; }
  .ts-orbit-item { margin: -16px; }
  .ts-float-status { left: 12px; top: 12px; }
  .ts-float-release { display: none; }
}
@media (max-width: 560px) {
  .ts-hero-actions { width: 100%; }
  .ts-hero-actions .button { flex: 1 1 100%; }
}

/* =================================================================== STATS */
.ts-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: hidden; border-radius: var(--p-r-l); background: var(--p-line); box-shadow: 0 0 0 1px var(--p-line); gap: 1px; }
.ts-stats article { display: grid; gap: 8px; padding: 28px 28px 24px; background: var(--p-bg); }
.ts-stats strong { color: var(--p-ink); font: 500 clamp(28px, 3vw, 40px)/1 var(--p-mono); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.ts-stats span { color: var(--p-ink-4); font-size: 13.5px; }
.ts-stats .is-status strong { display: flex; align-items: center; gap: 10px; color: var(--p-mint-ink); font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.02em; }
.ts-stats .is-status strong::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--p-mint); box-shadow: 0 0 12px var(--p-mint); }
.ts-stats .is-status b { font-weight: 500; }
@media (max-width: 900px) { .ts-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ts-stats .is-status { grid-column: 1 / -1; } .ts-stats article { padding: 22px 20px; } }

/* =============================================================== PLATFORMS */
.ts-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ts-tile { position: relative; display: grid; align-content: start; gap: 12px; min-height: 136px; padding: 22px; overflow: hidden; isolation: isolate; border-radius: var(--p-r-l); color: var(--p-ink); background: var(--p-surface); box-shadow: inset 0 0 0 1px var(--p-line); text-decoration: none; transition: background-color .2s, box-shadow .2s; }
@media (hover: hover) { .ts-tile:hover { background: var(--p-surface-2); box-shadow: inset 0 0 0 1px var(--p-line-2); } .ts-tile:hover .ts-tile-go { color: var(--p-ink); transform: translate(2px, -2px); } }
.ts-tile-pc, .ts-tile-android { grid-column: span 2; align-content: space-between; min-height: 300px; padding: 28px; }
.ts-tile-pc::before, .ts-tile-android::before { content: ''; position: absolute; right: -80px; top: -80px; z-index: -1; width: 340px; height: 340px; border-radius: 50%; background: var(--p-violet); filter: blur(100px); opacity: .18; }
.ts-tile-android::before { background: var(--p-mint); opacity: .13; }
.ts-tile-art { position: absolute; right: 28px; top: 50%; z-index: -1; display: grid; grid-template-columns: repeat(3, 56px); gap: 12px; transform: translateY(-50%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); }
.ts-tile-art .ts-app-icon { width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 14px 30px -14px #000; }
.ts-tile-art .ts-app-icon:nth-child(3n + 2) { transform: translateY(22px); }
.ts-tile-pc .ts-tile-copy, .ts-tile-android .ts-tile-copy { max-width: 52%; }
.ts-tile-top { display: flex; align-items: center; gap: 12px; }
.ts-tile-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; color: var(--c, var(--p-ink-2)); background: var(--p-surface-3); box-shadow: inset 0 0 0 1px var(--p-line-2); }
.ts-tile-icon .ui-icon { width: 19px; height: 19px; }
.ts-tile-count { color: var(--p-ink-4); font: 400 12.5px var(--p-mono); }
.ts-tile-count b { color: var(--p-ink); font-weight: 500; }
.ts-tile-copy { display: grid; gap: 6px; }
.ts-tile-copy strong { color: var(--p-ink); font: 600 16px/1.25 var(--p-display); letter-spacing: -.02em; }
.ts-tile-pc .ts-tile-copy strong, .ts-tile-android .ts-tile-copy strong { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -.03em; }
.ts-tile-copy > span { color: var(--p-ink-3); font-size: 14px; }
.ts-tile-go { position: absolute; right: 22px; bottom: 22px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--p-r-s); color: var(--p-ink-3); box-shadow: inset 0 0 0 1px var(--p-line-2); transition: color .15s, transform .25s var(--p-ease); }
.ts-tile-go .ui-icon { width: 16px; height: 16px; }
.ts-tile-pc { --c: var(--p-violet-ink); }
.ts-tile-android { --c: var(--p-mint-ink); }
.ts-tile-id { --c: var(--p-violet-ink); }
.ts-tile-help { --c: var(--p-mint-ink); }
.ts-tile-status { --c: var(--p-mint-ink); }
.ts-tile-roadmap { --c: var(--p-coral-ink); }
@media (max-width: 1000px) { .ts-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .ts-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ts-tile-pc, .ts-tile-android { grid-column: 1 / -1; min-height: 0; gap: 56px; padding: 22px; }
  .ts-tile-art { top: 20px; right: 20px; grid-template-columns: repeat(3, 34px); gap: 8px; transform: none; -webkit-mask-image: none; mask-image: none; }
  .ts-tile-art .ts-app-icon { width: 34px; height: 34px; border-radius: 9px; }
  .ts-tile-art .ts-app-icon:nth-child(n + 4) { display: none; }
  .ts-tile-art .ts-app-icon:nth-child(3n + 2) { transform: none; }
  .ts-tile-pc .ts-tile-copy, .ts-tile-android .ts-tile-copy { max-width: none; padding-right: 44px; }
  .ts-tile-mini { min-height: 0; padding: 16px; }
  .ts-tile-mini .ts-tile-copy > span { font-size: 13px; }
}

/* skeleton cards */
.ts-appcard.is-skeleton { min-height: 186px; background: linear-gradient(100deg, var(--p-surface) 30%, var(--p-surface-2) 50%, var(--p-surface) 70%) 0 0 / 300% 100%; }
@media (prefers-reduced-motion: no-preference) { .ts-appcard.is-skeleton { animation: ts-shimmer 1.4s linear infinite; } }
.ts-rail .ts-appcard { min-height: 186px; }

/* ================================================================= PREMIUM */
.ts-prem { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: center; padding: clamp(28px, 4.4vw, 56px); overflow: hidden; isolation: isolate; border-radius: var(--p-r-xl); background: var(--p-surface); box-shadow: inset 0 0 0 1px var(--p-line); }
.ts-prem::before { content: ''; position: absolute; right: -10%; top: -40%; z-index: -1; width: 60%; height: 140%; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--p-gold-rgb), .2), transparent 70%); }
.ts-prem::after { content: ''; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--p-line) 1px, transparent 1px), linear-gradient(90deg, var(--p-line) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(60% 80% at 80% 50%, #000, transparent 75%); mask-image: radial-gradient(60% 80% at 80% 50%, #000, transparent 75%); opacity: .6; }
.ts-prem-kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--p-gold-ink); font: 500 12px var(--p-mono); letter-spacing: .04em; text-transform: uppercase; }
.ts-prem-kicker .ui-icon { width: 15px; height: 15px; }
.ts-prem h2 { margin: 16px 0 12px; font-size: clamp(30px, 3.6vw, 46px); }
.ts-prem h2 em { font-style: normal; background: linear-gradient(90deg, #ffe6a8, var(--p-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ts-prem p { max-width: 480px; color: var(--p-ink-3); }
.ts-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 520px; margin: 26px 0 26px; }
.ts-plans:empty { display: none; }
.ts-plan { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--p-r-m); background: var(--p-bg-2); box-shadow: inset 0 0 0 1px var(--p-line-2); }
.ts-plan.is-best { background: rgba(var(--p-gold-rgb), .06); box-shadow: inset 0 0 0 1px rgba(var(--p-gold-rgb), .5); }
.ts-plan small { color: var(--p-ink-4); font: 400 11.5px var(--p-mono); text-transform: uppercase; letter-spacing: .04em; }
.ts-plan b { color: var(--p-ink); font: 600 22px/1.1 var(--p-display); letter-spacing: -.03em; }
.ts-plan b span { color: var(--p-ink-4); font: 400 12px var(--p-font); letter-spacing: 0; }
.ts-holo-wrap { justify-self: center; width: min(400px, 100%); perspective: 1000px; }
.ts-holo { --rx: 0deg; --ry: 0deg; position: relative; display: grid; align-content: space-between; aspect-ratio: 1.586; padding: 24px; overflow: hidden; border-radius: 18px; color: var(--p-ink); background: linear-gradient(145deg, #1b1c20, #0d0e10); box-shadow: inset 0 0 0 1px rgba(var(--p-gold-rgb), .35), inset 0 1px 0 rgba(255, 255, 255, .08), 0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 80px -30px rgba(var(--p-gold-rgb), .5); transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .4s var(--p-out); }
.ts-holo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(var(--p-gold-rgb), .12) 45%, rgba(255, 255, 255, .06) 50%, transparent 62%); }
.ts-holo::after { content: ''; position: absolute; inset: 0; background: radial-gradient(360px circle at var(--gx, 30%) var(--gy, 20%), rgba(255, 255, 255, .07), transparent 45%); }
.ts-holo-top { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; }
.ts-holo-top b { color: var(--p-ink); font: 600 18px var(--p-display); letter-spacing: -.02em; }
.ts-holo-top img { width: 28px; height: 28px; }
.ts-holo-chip { position: relative; z-index: 1; width: 46px; height: 34px; border-radius: 7px; background: linear-gradient(135deg, #ffe6a8, #b88a2e); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.ts-holo-bot { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: end; color: var(--p-gold-ink); font: 500 11.5px var(--p-mono); letter-spacing: .1em; }
.ts-holo-bot span:last-child { color: var(--p-ink); font: 500 22px var(--p-mono); letter-spacing: 0; }
@media (max-width: 860px) { .ts-prem { grid-template-columns: minmax(0, 1fr); } .ts-plans { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================ BATTLE PASS */
.neo-store-row { display: grid; gap: clamp(64px, 8vw, 104px); }
.neo-store-row:empty { display: none; }
.ts-bp { --a: #ff6a4d; --b: #8b6cff; --r: #8b6cff; position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); overflow: hidden; isolation: isolate; border-radius: var(--p-r-xl); color: var(--p-ink); background: var(--p-surface); box-shadow: inset 0 0 0 1px var(--p-line); }
.ts-bp-scene { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.ts-bp-scene::before { content: ''; position: absolute; right: -10%; top: -30%; width: 55%; height: 130%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--b) 26%, transparent), transparent 70%); }
.ts-bp-scene::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--p-line) 1px, transparent 1px), linear-gradient(90deg, var(--p-line) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(50% 70% at 82% 45%, #000, transparent 75%); mask-image: radial-gradient(50% 70% at 82% 45%, #000, transparent 75%); }
.ts-bp-cover { position: absolute; right: 0; top: 0; width: 55%; height: 100%; object-fit: cover; opacity: .35; -webkit-mask-image: linear-gradient(90deg, transparent, #000 50%); mask-image: linear-gradient(90deg, transparent, #000 50%); }
.ts-bp-rays, .ts-bp-num, .ts-bp-hexcol { display: none; }
.ts-bp-copy { position: relative; z-index: 1; display: grid; align-content: start; gap: 20px; padding: clamp(28px, 4vw, 48px); }
.ts-bp-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ts-bp-tag { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; border-radius: 6px; color: var(--p-coral-ink); background: rgba(var(--p-coral-rgb), .1); font: 500 12px var(--p-mono); letter-spacing: .02em; text-transform: uppercase; }
.ts-bp-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.ts-bp-theme { color: var(--p-ink-4); font: 400 12px var(--p-mono); text-transform: uppercase; letter-spacing: .04em; }
.ts-bp h2 { margin: 0; font-size: clamp(30px, 3.6vw, 46px); }
.ts-bp h2 span { color: var(--p-ink-3); }
.ts-bp-copy > p { max-width: 460px; margin: 0; color: var(--p-ink-3); }
.ts-bp-clock-label { display: block; margin-bottom: 8px; color: var(--p-ink-4); font: 400 11.5px var(--p-mono); text-transform: uppercase; letter-spacing: .04em; }
.ts-bp-clock { display: flex; align-items: center; gap: 6px; }
.ts-bp-clock > i { color: var(--p-ink-4); font: 400 18px var(--p-mono); font-style: normal; }
.ts-bp-cell { display: grid; justify-items: center; gap: 2px; min-width: 64px; padding: 10px 6px 8px; border-radius: var(--p-r-s); background: var(--p-bg-2); box-shadow: inset 0 0 0 1px var(--p-line-2); }
.ts-bp-cell b { color: var(--p-ink); font: 500 24px/1 var(--p-mono); font-variant-numeric: tabular-nums; }
.ts-bp-cell small { color: var(--p-ink-4); font-size: 10.5px; }
.ts-bp-road { display: grid; gap: 10px; max-width: 520px; }
.ts-bp-road-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: var(--p-ink-4); font: 400 12px var(--p-mono); }
.ts-bp-road-head b { margin-right: 4px; color: var(--p-ink); font: 500 22px var(--p-mono); }
.ts-bp-segs { display: flex; gap: 2px; }
.ts-bp-segs i { flex: 1; height: 8px; border-radius: 2px; background: var(--p-surface-3); }
.ts-bp-segs i.is-on { background: var(--p-violet); box-shadow: 0 0 8px -1px rgba(var(--p-violet-rgb), .8); }
.ts-bp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ts-bp-cta .button:not(.ts-bp-ghost) { color: var(--p-on-solid) !important; background: var(--p-solid) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 8px 24px -10px rgba(255, 255, 255, .3) !important; }
.ts-bp-nums { display: flex; flex-wrap: wrap; gap: 6px 0; }
.ts-bp-nums span { display: grid; gap: 2px; padding: 0 18px; border-left: 1px solid var(--p-line-2); color: var(--p-ink-4); font-size: 12px; }
.ts-bp-nums span:first-child { padding-left: 0; border-left: 0; }
.ts-bp-nums b { color: var(--p-ink); font: 500 20px/1 var(--p-mono); }
/* the season finale */
.ts-bp-hero { position: relative; z-index: 1; display: grid; place-items: center; align-content: center; gap: 6px; margin: 28px 28px 0 0; padding: 28px 20px; border-radius: var(--p-r-l); color: var(--p-ink); background: rgba(8, 9, 10, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--p-line-2); text-align: center; text-decoration: none; transition: box-shadow .2s; }
@media (hover: hover) { .ts-bp-hero:hover { box-shadow: inset 0 0 0 1px var(--p-line-3); } }
.ts-bp-hero-art { position: relative; display: grid; place-items: center; width: 190px; height: 190px; }
.ts-bp-hero-art::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--r) 30%, transparent), transparent 70%); }
.ts-bp-hero-art > * { position: relative; }
.ts-bp-hero-art > .ui-icon { width: 90px; height: 90px; color: var(--r); }
.ts-bp-pedestal { display: none; }
.ts-bp-hero small { margin-top: 8px; color: var(--p-ink-4); font: 400 11.5px var(--p-mono); text-transform: uppercase; letter-spacing: .04em; }
.ts-bp-hero strong { font: 600 22px/1.15 var(--p-display); letter-spacing: -.03em; }
.ts-bp-hero em { margin-top: 4px; padding: 3px 8px; border-radius: 6px; color: var(--r); background: color-mix(in srgb, var(--r) 12%, transparent); font: 500 11.5px var(--p-mono); font-style: normal; }
/* the reward rail */
.ts-bp-track { position: relative; z-index: 1; grid-column: 1 / -1; padding: 0 clamp(20px, 3vw, 32px) clamp(20px, 3vw, 32px); }
.ts-bp-rewards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(136px, 1fr); gap: 8px; overflow-x: auto; scrollbar-width: none; padding-top: 2px; }
.ts-bp-rewards::-webkit-scrollbar { display: none; }
.ts-bp-rw { --r: #8a8f98; position: relative; display: grid; grid-template-rows: auto 72px auto auto; gap: 6px; padding: 12px; overflow: hidden; border-radius: var(--p-r-m); color: var(--p-ink); background: var(--p-bg-2); box-shadow: inset 0 0 0 1px var(--p-line-2); text-decoration: none; transition: background-color .2s, box-shadow .2s; }
.ts-bp-rw::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--r); box-shadow: 0 0 10px var(--r); }
.ts-bp-rw.rarity-rare { --r: #4aa8ff; } .ts-bp-rw.rarity-epic { --r: #a993ff; } .ts-bp-rw.rarity-legendary { --r: #f5b544; } .ts-bp-rw.rarity-mythic { --r: #ff6b8a; }
.ts-bp-rw.is-got { opacity: .55; }
@media (hover: hover) { .ts-bp-rw:hover { background: var(--p-surface-2); box-shadow: inset 0 0 0 1px var(--p-line-3); } }
.ts-bp-rw-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.ts-bp-rw em { flex: none; color: var(--p-ink-4); font: 400 11px var(--p-mono); font-style: normal; white-space: nowrap; }
.ts-bp-rw em b { color: var(--p-ink-2); font-weight: 500; }
.ts-bp-rw-track { overflow: hidden; min-width: 0; color: var(--p-gold-ink); font: 500 10.5px var(--p-mono); text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; }
.ts-bp-rw-art { display: grid; place-items: center; }
.ts-bp-rw-art .deco-avatar { --deco-size: 58px; }
.ts-bp-rw-art > .ui-icon { width: 30px; height: 30px; color: var(--r); }
.ts-bp-rw small { color: var(--r); font: 400 11px var(--p-mono); }
.ts-bp-rw strong { display: block; overflow: hidden; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) {
  .ts-bp { grid-template-columns: minmax(0, 1fr); }
  .ts-bp-hero { order: -1; margin: 16px 16px 0; }
  .ts-bp-hero-art { width: 150px; height: 150px; }
  .ts-bp-rewards { grid-auto-columns: 124px; }
}
@media (max-width: 520px) {
  .ts-bp-cell { min-width: 0; flex: 1; }
  .ts-bp-cta .button { flex: 1 1 100%; }
  .ts-bp-nums span { padding: 0 12px; }
}

/* ===================================================================== SHOP */
.ts-drops { display: grid; gap: 24px; }
.ts-drops .ts-rail { grid-auto-columns: calc((100% - 5 * 12px) / 6); }
@media (max-width: 1100px) { .ts-drops .ts-rail { grid-auto-columns: calc((100% - 3 * 12px) / 4.4); } }
@media (max-width: 640px) { .ts-drops .ts-rail { grid-auto-columns: 46%; } }
.ts-drop { --r: #8a8f98; position: relative; display: grid; justify-items: center; gap: 8px; padding: 22px 12px 18px; overflow: hidden; border-radius: var(--p-r-l); color: var(--p-ink); background: var(--p-surface); box-shadow: inset 0 0 0 1px var(--p-line); text-align: center; text-decoration: none; transition: background-color .2s; }
.ts-drop::before { content: ''; position: absolute; left: 50%; top: 10px; width: 120px; height: 90px; margin-left: -60px; border-radius: 50%; background: var(--r); filter: blur(40px); opacity: .18; }
@media (hover: hover) { .ts-drop:hover { background: var(--p-surface-2); } }
.ts-drop.rarity-rare { --r: #4aa8ff; } .ts-drop.rarity-epic { --r: #a993ff; } .ts-drop.rarity-legendary { --r: #f5b544; } .ts-drop.rarity-mythic { --r: #ff6b8a; }
.ts-drop-art { position: relative; display: grid; place-items: center; height: 92px; }
.ts-drop-art .deco-avatar { --deco-size: 78px; }
.ts-drop small { color: var(--r); font: 400 11px var(--p-mono); }
.ts-drop strong { font-size: 14px; font-weight: 500; line-height: 1.3; }
.ts-drop-price { display: inline-flex; align-items: center; gap: 5px; color: var(--p-ink-3); font: 400 12.5px var(--p-mono); }
.ts-drop-price img { width: 14px; height: 14px; }
.ts-drops-empty { display: flex; align-items: center; gap: 12px; padding: 22px; border-radius: var(--p-r-l); color: var(--p-ink-3); background: var(--p-surface); box-shadow: inset 0 0 0 1px var(--p-line); }

/* ================================================================ RELEASES */
.ts-releases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border-radius: var(--p-r-l); background: var(--p-line); box-shadow: 0 0 0 1px var(--p-line); }
.ts-releases .release-item { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 14px; padding: 22px; background: var(--p-bg-2); transition: background-color .2s; }
@media (hover: hover) { .ts-releases .release-item:hover { background: var(--p-surface); } }
.ts-releases .skeleton-card { min-height: 150px; border-radius: 0; }
.ts-releases .release-icon { display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border-radius: 11px; background: var(--p-surface-3); box-shadow: inset 0 0 0 1px var(--p-line-2); }
.ts-releases .release-icon img { width: 100%; height: 100%; object-fit: cover; }
.ts-releases .release-main { min-width: 0; }
.ts-releases .release-app-link { display: block; overflow: hidden; color: var(--p-ink); font: 600 15px/1.3 var(--p-display); letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.ts-releases .release-main p { display: -webkit-box; margin-top: 3px; overflow: hidden; color: var(--p-ink-3); font-size: 13.5px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ts-releases .release-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ts-releases .release-meta strong { padding: 2px 7px; border-radius: 6px; color: var(--p-violet-ink); background: rgba(var(--p-violet-rgb), .1); font: 500 12px var(--p-mono); }
.ts-releases .release-meta small { color: var(--p-ink-4); font: 400 11.5px var(--p-mono); white-space: nowrap; }
.ts-releases .release-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.ts-releases .release-download { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: var(--p-r-s); color: var(--p-on-solid); background: var(--p-solid); font-size: 13px; font-weight: 500; text-decoration: none; }
.ts-releases .release-download .ui-icon { width: 15px; height: 15px; }
.ts-releases .badge { display: inline-flex; align-items: center; height: 32px; padding: 0 10px; border-radius: var(--p-r-s); color: var(--p-ink-3); box-shadow: inset 0 0 0 1px var(--p-line-2); font-size: 13px; }
@media (max-width: 1000px) { .ts-releases { grid-template-columns: minmax(0, 1fr); } }

/* ==================================================================== NEWS */
.news-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; }
.news-showcase-card { position: relative; display: grid; gap: 12px; overflow: hidden; isolation: isolate; border-radius: var(--p-r-l); background: var(--p-surface); box-shadow: inset 0 0 0 1px var(--p-line); cursor: pointer; transition: background-color .2s, box-shadow .2s; }
@media (hover: hover) { .news-showcase-card:hover { background: var(--p-surface-2); box-shadow: inset 0 0 0 1px var(--p-line-2); } }
.news-featured-card { align-content: end; min-height: 360px; padding: 32px; }
.news-featured-card::before { content: ''; position: absolute; right: -60px; top: -60px; z-index: -1; width: 360px; height: 360px; border-radius: 50%; background: var(--p-violet); filter: blur(110px); opacity: .22; }
.news-featured-visual { position: absolute; right: 24px; top: 24px; z-index: -1; width: 44%; opacity: .55; -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent); }
.news-featured-visual img { width: 100%; border-radius: var(--p-r-m); }
.news-featured-content { display: grid; gap: 12px; }
.news-featured-card h3 { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.03em; }
.news-featured-card p { max-width: 520px; color: var(--p-ink-3); display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.news-featured-meta, .news-compact-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--p-ink-4); font: 400 12px var(--p-mono); }
.news-type-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; color: var(--p-violet-ink); background: rgba(var(--p-violet-rgb), .1); font: 500 11.5px var(--p-mono); }
.news-type-badge .ui-icon { width: 12px; height: 12px; }
.news-type-badge.release { color: var(--p-mint-ink); background: rgba(var(--p-mint-rgb), .1); }
.news-type-badge.warning { color: var(--p-coral-ink); background: rgba(var(--p-coral-rgb), .1); }
.news-linked-app { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 4px 9px; border-radius: 6px; color: var(--p-ink-2); box-shadow: inset 0 0 0 1px var(--p-line-2); font-size: 12.5px; }
.news-linked-app .ui-icon { width: 13px; height: 13px; }
.news-side-list { display: grid; align-content: start; gap: 12px; }
.news-compact-card { grid-template-columns: minmax(0, 1fr) auto; align-content: start; padding: 22px; }
.news-compact-card > * { grid-column: 1; }
.news-compact-card h3 { font-size: 17px; }
.news-compact-card p { color: var(--p-ink-3); font-size: 14px; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.news-compact-visual { display: none; }
.news-compact-link { grid-column: 2; grid-row: 1 / span 3; align-self: center; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--p-r-s); color: var(--p-ink-3); box-shadow: inset 0 0 0 1px var(--p-line-2); }
.news-compact-link .ui-icon { width: 15px; height: 15px; }
.news-follow-card, .news-empty-state { display: grid; align-content: center; justify-items: start; gap: 12px; padding: 24px; border-radius: var(--p-r-l); background: var(--p-surface); box-shadow: inset 0 0 0 1px var(--p-line); }
.news-follow-icon, .news-empty-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--p-violet-ink); background: var(--p-surface-3); box-shadow: inset 0 0 0 1px var(--p-line-2); }
.news-follow-copy strong { display: block; color: var(--p-ink); font-weight: 600; }
.news-follow-copy p, .news-empty-state p { color: var(--p-ink-3); }
.news-follow-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.news-follow-tags span { padding: 3px 9px; border-radius: 6px; color: var(--p-ink-3); box-shadow: inset 0 0 0 1px var(--p-line-2); font-size: 12.5px; }
.news-empty-state { grid-column: 1 / -1; }
.triosoft-news-loading span { width: 26px; height: 26px; border: 2px solid var(--p-surface-3); border-top-color: var(--p-violet); border-radius: 50%; animation: ts-spin .8s linear infinite; }
.triosoft-news-error > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--p-coral-ink); background: rgba(var(--p-coral-rgb), .12); font-weight: 700; }
@media (max-width: 900px) { .news-grid { grid-template-columns: minmax(0, 1fr); } .news-featured-card { min-height: 280px; padding: 24px; } }

/* ================================================================ FEATURES */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px; overflow: hidden; border-radius: var(--p-r-l); background: var(--p-line); box-shadow: 0 0 0 1px var(--p-line); }
.feature-grid .skeleton-card { min-height: 180px; border-radius: 0; }
.feature-card { position: relative; display: grid; align-content: start; gap: 10px; padding: 28px; background: var(--p-bg-2); }
.feature-card:nth-child(4n + 1) { --tone: var(--p-violet-ink); }
.feature-card:nth-child(4n + 2) { --tone: var(--p-coral-ink); }
.feature-card:nth-child(4n + 3) { --tone: var(--p-mint-ink); }
.feature-card:nth-child(4n + 4) { --tone: var(--p-gold-ink); }
.feature-symbol { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 10px; border-radius: 10px; color: var(--tone); background: var(--p-surface-3); box-shadow: inset 0 0 0 1px var(--p-line-2); }
.feature-symbol .ui-icon, .feature-symbol svg { width: 19px; height: 19px; }
.feature-card h3 { font-size: 17px; }
.feature-card p { color: var(--p-ink-3); font-size: 14px; }

/* ================================================================== AUTHOR */
.ts-author { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 32px; padding: clamp(28px, 4vw, 48px); border-radius: var(--p-r-xl); background: var(--p-surface); box-shadow: inset 0 0 0 1px var(--p-line); }
.ts-author-copy { display: grid; gap: 10px; }
.ts-author-copy h2 { font-size: clamp(26px, 2.8vw, 36px); }
.ts-author-copy p { color: var(--p-ink-3); }
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.team-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 18px; padding: 20px; border-radius: var(--p-r-l); background: var(--p-bg-2); box-shadow: inset 0 0 0 1px var(--p-line-2); }
.team-avatar { grid-row: span 4; display: grid; place-items: center; width: 72px; height: 72px; overflow: hidden; border-radius: 18px; color: #fff; background: linear-gradient(135deg, var(--p-coral), var(--p-violet)); font: 700 24px var(--p-display); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.team-avatar img { width: 100%; height: 100%; object-fit: cover; }
.team-card h3 { font-size: 17px; }
.team-role { color: var(--p-violet-ink); font: 400 12px var(--p-mono); }
.team-card p { color: var(--p-ink-3); font-size: 14px; }
.team-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.social-link { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 7px; color: var(--p-ink-2); box-shadow: inset 0 0 0 1px var(--p-line-2); font-size: 12.5px; text-decoration: none; transition: background-color .15s; }
@media (hover: hover) { .social-link:hover { background: var(--p-hover-2); } }
.social-link .brand-icon { width: 14px; height: 14px; }
@media (max-width: 860px) { .ts-author { grid-template-columns: minmax(0, 1fr); } }

/* ===================================================================== FAQ */
.ts-faq { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: 48px; }
.ts-faq .ts-section-head { position: sticky; top: calc(var(--p-header) + 32px); }
.faq-list { display: grid; overflow: hidden; border-radius: var(--p-r-l); background: var(--p-surface); box-shadow: inset 0 0 0 1px var(--p-line); }
.faq-item { box-shadow: inset 0 -1px 0 var(--p-line); }
.faq-item:last-child { box-shadow: none; }
.faq-question { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 64px; padding: 16px 22px; border: 0; color: var(--p-ink); background: none; font: 500 15.5px var(--p-font); text-align: left; cursor: pointer; transition: background-color .15s; }
@media (hover: hover) { .faq-question:hover { background: var(--p-hover); } }
.faq-question > span:last-child { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 7px; color: var(--p-ink-3); box-shadow: inset 0 0 0 1px var(--p-line-2); transition: color .15s; }
.faq-question > span:last-child > * { transition: transform .25s var(--p-out); }
.faq-question .ui-icon { width: 14px; height: 14px; }
.faq-item.open .faq-question > span:last-child { color: var(--p-ink); }
.faq-item.open .faq-question > span:last-child > * { transform: rotate(45deg); }
.faq-answer { display: none; padding: 0 22px 20px; color: var(--p-ink-3); }
.faq-item.open .faq-answer { display: block; }
@media (max-width: 860px) { .ts-faq { grid-template-columns: minmax(0, 1fr); gap: 24px; } .ts-faq .ts-section-head { position: static; } }

/* ================================================================= SUPPORT */
.ts-support { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.support-copy { display: grid; gap: 12px; }
.support-copy h2 { font-size: clamp(28px, 3vw, 40px); }
.support-copy p { color: var(--p-ink-3); }
.ts-support-points { display: grid; gap: 12px; margin: 12px 0 0; padding: 0; list-style: none; }
.ts-support-points li { display: flex; align-items: center; gap: 12px; color: var(--p-ink-2); font-size: 14.5px; }
.ts-support-points .ui-icon { width: 32px; height: 32px; padding: 7px; flex: none; border-radius: 8px; color: var(--p-violet-ink); background: var(--p-surface-3); box-shadow: inset 0 0 0 1px var(--p-line-2); }
.ts-form { display: grid; gap: 16px; padding: clamp(22px, 3vw, 32px); border-radius: var(--p-r-xl); background: var(--p-surface); box-shadow: inset 0 0 0 1px var(--p-line); }
.ts-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ts-field { display: grid; gap: 8px; }
.ts-field > span { color: var(--p-ink-2); font-size: 13px; font-weight: 500; }
.ts-field input, .ts-field textarea, .ts-field select { width: 100%; }
.ts-field textarea { resize: vertical; }
.ts-form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.form-result { color: var(--p-ink-3); font-size: 14px; }
.form-result.success { color: var(--p-mint-ink); }
.form-result.error { color: var(--p-coral-ink); }
@media (max-width: 860px) { .ts-support { grid-template-columns: minmax(0, 1fr); gap: 24px; } .ts-form-row { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================== NEWSLETTER */
.ts-newsletter { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 32px; padding: clamp(28px, 5vw, 56px); overflow: hidden; border-radius: var(--p-r-xl); background: var(--p-surface); box-shadow: inset 0 0 0 1px var(--p-line); }
.ts-newsletter-light { position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 120% at 100% 0%, rgba(var(--p-violet-rgb), .2), transparent 70%); }
.ts-newsletter-copy { display: grid; gap: 10px; }
.ts-newsletter h2 { font-size: clamp(26px, 3vw, 38px); }
.ts-newsletter p { color: var(--p-ink-3); }
.ts-subscribe { display: flex; gap: 8px; }
.ts-subscribe input { flex: 1; min-width: 0; min-height: 44px !important; }
.ts-subscribe .button { min-height: 44px; }
@media (max-width: 860px) { .ts-newsletter { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 460px) { .ts-subscribe { flex-direction: column; } .ts-subscribe .button { width: 100%; } }

/* reveal on scroll (home-feed.js marks sections) */
@media (prefers-reduced-motion: no-preference) {
  .ts-home [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--p-out), transform .7s var(--p-out); }
  .ts-home [data-reveal].is-in { opacity: 1; transform: none; }
}

/* «read more» line that news-reader.js adds to news cards */
.triosoft-news-card-arrow { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin-top: 4px; color: var(--p-ink-2); font-size: 13.5px; font-weight: 500; }
.news-action-icon { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--p-line-2); }
.news-action-icon svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.news-compact-card .triosoft-news-card-arrow { display: none; }