/* ===== page-chrome ===== */
/* ---------- brand intro (.ts-intro) ---------- */
.ts-intro { position: fixed; inset: 0; z-index: 3000; background: radial-gradient(900px 500px at 50% 40%, #16345f, #0a1a33 70%); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 22px; opacity: 1; transition: opacity .5s var(--ts-ease), visibility .5s; }
html:not(.ts-intro-on) .ts-intro { display: none; }
.ts-intro.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.ts-intro__mark { position: relative; width: 132px; height: 132px; }
.ts-intro__piece { position: absolute; width: 56px; height: 56px; border-radius: 18px 18px 18px 6px; opacity: 0; animation: ts-intro-in .7s var(--ts-ease) forwards; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.ts-intro__piece--1 { background: #f6a03b; left: 10px; top: 10px; --fx: -160px; --fy: -120px; animation-delay: .05s; }
.ts-intro__piece--2 { background: #6da33a; right: 10px; top: 10px; border-radius: 18px 18px 6px 18px; --fx: 160px; --fy: -120px; animation-delay: .15s; }
.ts-intro__piece--3 { background: #e8412a; left: 10px; bottom: 10px; border-radius: 18px 6px 18px 18px; --fx: -160px; --fy: 120px; animation-delay: .25s; }
.ts-intro__piece--4 { background: #1b76bd; right: 10px; bottom: 10px; border-radius: 6px 18px 18px 18px; --fx: 160px; --fy: 120px; animation-delay: .35s; }
.ts-intro__glow { position: absolute; inset: -30px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 208, 138, .55), rgba(255, 208, 138, 0) 65%); opacity: 0; animation: ts-intro-glow .8s var(--ts-ease) .55s forwards; }
.ts-intro__base { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); width: 40px; height: 18px; border-radius: 0 0 12px 12px; background: linear-gradient(#cfd6e3, #8c96a8); opacity: 0; animation: ts-intro-in .5s var(--ts-ease) .5s forwards; --fx: 0px; --fy: 40px; }
.ts-intro__word { font-family: var(--ts-font-head); font-weight: 800; letter-spacing: .28em; font-size: 1.05rem; color: #fff; opacity: 0; animation: ts-intro-word .6s var(--ts-ease) .65s forwards; margin-top: 26px; }
.ts-intro__word span { color: #ffd08a; }
@keyframes ts-intro-in { from { opacity: 0; transform: translate(var(--fx), var(--fy)) rotate(-20deg) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes ts-intro-glow { to { opacity: 1; } }
@keyframes ts-intro-word { from { opacity: 0; transform: translateY(10px); letter-spacing: .5em; } to { opacity: 1; transform: none; letter-spacing: .28em; } }
html.ts-intro-on body > *:not(.ts-intro) { animation: ts-fx-body-in .8s var(--ts-ease) both; animation-delay: .9s; }
@keyframes ts-fx-body-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- section dividers ---------- */
.ts-wave { position: absolute; left: 0; right: 0; width: 100%; height: 70px; pointer-events: none; z-index: 2; color: #fff; }
.ts-wave svg { display: block; width: 100%; height: 100%; }
.ts-wave--top { top: -1px; }
.ts-wave--bottom { bottom: -1px; transform: scaleY(-1); }
.ts-wave--flip { transform: scaleX(-1); }
.ts-wave--bottom.ts-wave--flip { transform: scale(-1, -1); }
.ts-has-wave { position: relative; }
@media (max-width: 720px) { .ts-wave { height: 38px; } }

/* ---------- inner page hero fx (.ts-page-hero--fx) ---------- */
.ts-page-hero--fx { isolation: isolate; }
.ts-page-hero__mesh { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.ts-page-hero__mesh i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; animation: ts-mesh 18s ease-in-out infinite; }
.ts-page-hero__mesh i:nth-child(1) { width: 520px; height: 520px; background: #2f9bff; right: -140px; top: -220px; }
.ts-page-hero__mesh i:nth-child(2) { width: 380px; height: 380px; background: #f7931e; left: 30%; bottom: -260px; opacity: .3; animation-delay: -6s; }
.ts-page-hero__mesh i:nth-child(3) { width: 300px; height: 300px; background: #6ba539; left: -120px; top: 20%; opacity: .22; animation-delay: -12s; }
@keyframes ts-mesh { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(30px, -26px) scale(1.08); } }
.ts-page-hero__badges { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ts-page-hero__badges span { position: absolute; width: 54px; height: 54px; border-radius: 16px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .85); font-size: 1.1rem; animation: ts-drift 9s ease-in-out infinite; box-shadow: 0 14px 30px rgba(0, 0, 0, .25); }
.ts-page-hero__badges span:nth-child(1) { right: 12%; top: 18%; animation-delay: -1s; }
.ts-page-hero__badges span:nth-child(2) { right: 24%; top: 58%; animation-delay: -3s; width: 44px; height: 44px; }
.ts-page-hero__badges span:nth-child(3) { right: 6%; top: 62%; animation-delay: -5s; }
.ts-page-hero__badges span:nth-child(4) { right: 32%; top: 22%; animation-delay: -7s; width: 40px; height: 40px; font-size: .9rem; }
.ts-page-hero__badges span:nth-child(5) { right: 18%; top: 82%; animation-delay: -2s; width: 46px; height: 46px; }
.ts-page-hero__badges span:nth-child(6) { right: 40%; top: 70%; animation-delay: -6s; width: 38px; height: 38px; font-size: .85rem; }
@keyframes ts-drift { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-16px) rotate(4deg); } }
.ts-page-hero--fx .ts-page-hero__inner { position: relative; z-index: 1; }
@media (max-width: 960px) { .ts-page-hero__badges { display: none; } }

/* ---------- sticky mobile CTA bar (.ts-stickybar) ---------- */
.ts-stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 940; display: none; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(10, 26, 51, .96); backdrop-filter: blur(10px); color: #fff; border-top: 1px solid rgba(255, 255, 255, .1); transform: translateY(110%); transition: transform .4s var(--ts-ease); padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.ts-stickybar.is-visible { transform: none; }
.ts-stickybar__text { flex: 1; font-family: var(--ts-font-head); font-weight: 700; font-size: .88rem; line-height: 1.2; }
.ts-stickybar__text small { display: block; font-weight: 500; font-size: .72rem; color: rgba(255, 255, 255, .65); }
.ts-stickybar a { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; }
.ts-stickybar__wa { background: #25d366; }
.ts-stickybar__call { background: var(--ts-blue); }
.ts-stickybar__demo { width: auto !important; padding: 0 14px; background: var(--ts-grad-accent); color: #2b1600 !important; font-family: var(--ts-font-head); font-weight: 700; font-size: .82rem; }
@media (max-width: 720px) { .ts-stickybar { display: flex; } body.ts-has-stickybar .ts-fab { bottom: 78px; } body.ts-has-stickybar .ts-nudge { bottom: 78px; } }

/* ---------- aurora background for light sections (.ts-aurora) ---------- */
.ts-aurora { position: relative; overflow: hidden; }
.ts-aurora::before, .ts-aurora::after { content: ""; position: absolute; border-radius: 50%; filter: blur(80px); opacity: .32; pointer-events: none; z-index: 0; animation: ts-mesh 22s ease-in-out infinite; }
.ts-aurora::before { width: 560px; height: 560px; background: #6ad0ff; left: -180px; top: -200px; }
.ts-aurora::after { width: 460px; height: 460px; background: #ffb454; right: -160px; bottom: -220px; animation-delay: -9s; }
.ts-aurora > * { position: relative; z-index: 1; }
.ts-aurora--green::after { background: #a4d67a; }

@media (prefers-reduced-motion: reduce) {
  .ts-page-hero__mesh i, .ts-page-hero__badges span, .ts-aurora::before, .ts-aurora::after { animation: none; }
  html.ts-intro-on body > *:not(.ts-intro) { animation: none; }
}

/* ===== text-scroll-fx ===== */
/* =====================================================================
   Thirvusoft text & scroll effects (ts-fx.css) - extends thirvu.css
   1 split-text reveal  2 scroll progress  3 parallax  4 magnetic buttons
   + shine sweep  5 extra data-reveal variants  6 desktop cursor.
   All classes prefixed ts-. Load AFTER thirvu.css. Pairs with ts-fx.js.
   ===================================================================== */
:root { --ts-fx-ring: 28px; --ts-fx-spring: cubic-bezier(.16, 1, .3, 1); }
@keyframes ts-fx-show { to { opacity: 1; } }

/* ---------- 1. split-text reveal  [data-split] ---------- */
/* hidden until ts-fx.js wraps the words; the 3s keyframe is a safety net if the script never runs */
html.ts-js [data-split]:not(.ts-split) { opacity: 0; animation: ts-fx-show 0s linear 3s forwards; }
.ts-split__w { display: inline-block; clip-path: inset(-.45em -.25em -.22em -.25em); }
html.ts-js .ts-split__i {
  display: inline-block; opacity: 0; transform: translate3d(0, 1.15em, 0); filter: blur(6px);
  transition: transform .9s var(--ts-fx-spring), opacity .5s var(--ts-ease), filter .7s var(--ts-ease);
  transition-delay: calc(var(--d, 0s) + var(--i, 0) * var(--ts-split-step, 40ms));
}
html.ts-js .ts-split.is-visible .ts-split__i { opacity: 1; transform: none; filter: none; }
/* gradient text (.ts-grad-text): the gradient moves onto each word so the word transforms cannot break background-clip */
.ts-split__i--grad { background-image: var(--ts-split-img); background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; }
html.ts-js .ts-split__grad { background-image: none; }

/* ---------- 2. scroll progress  .ts-progress ---------- */
.ts-progress { position: fixed; top: 0; left: 0; z-index: 1050; width: 100%; height: 3px; pointer-events: none; background: var(--ts-grad); box-shadow: 0 0 12px rgba(47, 155, 255, .55); transform: translate3d(-101%, 0, 0); will-change: transform; }
.ts-progress::after { content: ""; position: absolute; right: -5px; top: -5px; width: 14px; height: 13px; border-radius: 50%; background: var(--ts-sky); filter: blur(5px); }

/* ---------- 3. parallax  [data-parallax="0.2"]  (ts-fx.js drives transform; desktop only) ---------- */
@media (hover: hover) and (min-width: 901px) { [data-parallax] { will-change: transform; } }

/* ---------- 4. magnetic buttons  .ts-btn--magnet  +  shine sweep ---------- */
.ts-btn--magnet { transition: box-shadow .25s var(--ts-ease), background .25s, color .25s, border-color .25s; } /* transform is a JS spring */
@media (hover: hover) {
  .ts-btn--primary, .ts-btn--accent { position: relative; isolation: isolate; }
  .ts-btn--primary::before, .ts-btn--accent::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .28) 46%, rgba(255, 255, 255, .72) 50%, rgba(255, 255, 255, .28) 54%, transparent 62%) no-repeat 130% 0 / 260% 100%;
    transition: opacity .35s;
  }
  .ts-btn--primary:hover::before, .ts-btn--accent:hover::before { opacity: 1; background-position: -30% 0; transition: opacity .15s, background-position .85s var(--ts-ease); }
}

/* ---------- 5. reveal variants (extend html.ts-js [data-reveal] from thirvu.css) ---------- */
html.ts-js [data-reveal="blur"] { transform: translateY(12px) scale(.985); filter: blur(14px); transition: opacity .9s var(--ts-ease), transform .9s var(--ts-ease), filter .9s var(--ts-ease); transition-delay: var(--d, 0s); }
html.ts-js [data-reveal="blur"].is-visible { filter: none; }
html.ts-js [data-reveal="wipe"] { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.77, 0, .18, 1); transition-delay: var(--d, 0s); }
html.ts-js [data-reveal="wipe"].is-visible { clip-path: inset(-80px); } /* -80px keeps box-shadows unclipped afterwards */
html.ts-js [data-reveal="scale-up"] { transform: scale(.82) translateY(28px); transform-origin: 50% 100%; transition-duration: 1s; transition-timing-function: var(--ts-fx-spring); }
/* data-reveal-stagger on a parent: direct children rise one after another (80ms default; "120", "blur", "scale", "blur 120") */
html.ts-js [data-reveal-stagger] > :not(.is-settled) { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ts-ease), transform .8s var(--ts-fx-spring); animation: ts-fx-show .5s var(--ts-ease) 3s forwards; }
html.ts-js [data-reveal-stagger~="blur"] > :not(.is-settled) { filter: blur(10px); transition: opacity .8s var(--ts-ease), transform .8s var(--ts-fx-spring), filter .8s var(--ts-ease); }
html.ts-js [data-reveal-stagger~="scale"] > :not(.is-settled) { transform: scale(.88) translateY(12px); }
html.ts-js [data-reveal-stagger] > .is-visible:not(.is-settled) { opacity: 1; transform: none; filter: none; }

/* ---------- 6. cursor  .ts-cursor  (ts-fx.js adds html.ts-cursor-on for mouse pointers only) ---------- */
.ts-cursor { position: fixed; top: 0; left: 0; z-index: 2000; pointer-events: none; display: none; }
html.ts-cursor-on .ts-cursor { display: block; }
html.ts-cursor-on, html.ts-cursor-on * { cursor: none !important; }
html.ts-cursor-on iframe, html.ts-cursor-on select, html.ts-cursor-on video, html.ts-cursor-on [data-cursor="native"], html.ts-cursor-on [data-cursor="native"] * { cursor: auto !important; }
.ts-cursor__ring, .ts-cursor__dot { position: fixed; top: 0; left: 0; border-radius: 50%; will-change: transform; transform: translate3d(-100px, -100px, 0); }
.ts-cursor__ring {
  width: var(--ts-fx-ring); height: var(--ts-fx-ring); margin: calc(var(--ts-fx-ring) / -2) 0 0 calc(var(--ts-fx-ring) / -2);
  border: 1.5px solid rgba(27, 111, 214, .6); background: rgba(106, 208, 255, .12);
  box-shadow: 0 0 22px rgba(63, 141, 240, .35), inset 0 0 10px rgba(106, 208, 255, .25);
  transition: opacity .3s, background-color .3s, border-color .3s, box-shadow .3s, width .3s var(--ts-ease), height .3s var(--ts-ease), margin .3s var(--ts-ease), border-radius .3s;
}
.ts-cursor__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--ts-blue); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9); transition: opacity .2s, background-color .3s; }
.ts-cursor.is-hot .ts-cursor__ring { border-color: rgba(247, 147, 30, .75); background: rgba(247, 147, 30, .14); box-shadow: 0 0 30px rgba(247, 147, 30, .4), inset 0 0 12px rgba(255, 180, 84, .3); }
.ts-cursor.is-hot .ts-cursor__dot { background: var(--ts-orange); }
.ts-cursor.is-down .ts-cursor__ring { background: rgba(27, 111, 214, .22); }
.ts-cursor.is-text .ts-cursor__ring { width: 3px; height: 26px; margin: -13px 0 0 -1.5px; border-radius: 2px; border-color: transparent; background: var(--ts-blue); box-shadow: 0 0 10px rgba(27, 111, 214, .5); }
.ts-cursor.is-text .ts-cursor__dot, .ts-cursor.is-out .ts-cursor__ring, .ts-cursor.is-out .ts-cursor__dot, .ts-cursor.is-hidden .ts-cursor__ring, .ts-cursor.is-hidden .ts-cursor__dot { opacity: 0; }

/* ---------- mobile / touch ---------- */
@media (max-width: 900px), (hover: none), (pointer: coarse) {
  .ts-cursor { display: none !important; }
  [data-parallax] { transform: none !important; will-change: auto; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html.ts-js [data-split], html.ts-js .ts-split__i, html.ts-js [data-reveal-stagger] > * { opacity: 1; transform: none; filter: none; animation: none; }
  .ts-split__w { clip-path: none; }
  html.ts-js [data-reveal="blur"], html.ts-js [data-reveal="wipe"] { filter: none; clip-path: none; }
  .ts-cursor { display: none !important; }
  .ts-btn--primary::before, .ts-btn--accent::before { display: none; }
  .ts-progress::after { display: none; }
}

/* ===== hero-fx ===== */
/* =====================================================================
   Thirvusoft hero effects (hero-fx)
   1. canvas aurora + constellation   2. pointer tilt   3. rotating word
   4. orbit ring.  All classes prefixed ts-.  Uses the :root tokens from
   thirvu.css and must load after it.
   ===================================================================== */

/* ---------- 1. canvas aurora / constellation ---------- */
.ts-hero { isolation: isolate; }
.ts-hero__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none;
  opacity: 0; transition: opacity 1.4s ease .15s;
}
.ts-hero__canvas.is-ready { opacity: 1; }
html:not(.ts-js) .ts-hero__canvas { display: none; }
/* the canvas paints the aurora, so the blurred DOM blobs are switched off when it is present */
html.ts-js .ts-hero__canvas ~ .ts-blob { display: none; }

/* ---------- 2. pointer tilt (desktop, fine pointer only) ---------- */
@media (min-width: 961px) and (hover: hover) and (pointer: fine) {
  .ts-hero__visual.is-tilt .ts-mock,
  .ts-hero__visual.is-tilt:hover .ts-mock {
    animation: none; transition: none; will-change: transform;
    transform: perspective(1400px) rotateY(calc(-8deg + var(--ts-ry, 0deg))) rotateX(calc(4deg + var(--ts-rx, 0deg))) translate3d(var(--ts-tx, 0px), var(--ts-ty, 0px), 0);
  }
  /* screen glare that follows the pointer */
  .ts-hero__visual.is-tilt .ts-mock::after {
    content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit;
    background: radial-gradient(560px circle at var(--ts-gx, 50%) var(--ts-gy, 50%), rgba(170, 220, 255, .30), rgba(170, 220, 255, 0) 58%);
    opacity: var(--ts-glare, 0);
  }
  .ts-hero__visual.is-tilt .ts-float,
  .ts-hero__visual.is-tilt .ts-hero__badge { will-change: translate, transform; }
}

/* ---------- 3. rotating headline word ---------- */
.ts-rotate {
  display: inline-grid; grid-template-columns: auto; position: relative; vertical-align: baseline;
  white-space: nowrap; text-align: left; padding: 0 .03em;
  clip-path: inset(-.16em -.08em -.22em);
}
.ts-rotate__word {
  grid-area: 1 / 1; justify-self: start; opacity: 0; transform: translate3d(0, 112%, 0);
  background: linear-gradient(92deg, #ffd08a 0%, #ffb454 45%, #f7931e 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  will-change: transform, opacity;
}
.ts-rotate__word.is-in { opacity: 1; transform: none; transition: transform .72s var(--ts-ease), opacity .45s ease .08s; }
.ts-rotate__word.is-out { opacity: 0; transform: translate3d(0, -112%, 0); transition: transform .62s var(--ts-ease), opacity .38s ease; }
/* underline that re-draws to the width of the current word */
.ts-rotate::after {
  content: ""; position: absolute; left: .03em; bottom: -.07em; height: .085em; width: var(--ts-uw, 100%);
  border-radius: 999px; background: var(--ts-grad-accent); box-shadow: 0 0 16px rgba(247, 147, 30, .45);
  opacity: .9; transition: width .7s var(--ts-ease);
}

/* ---------- 4. orbit ring ---------- */
.ts-orbit {
  position: absolute; left: 50%; top: 50%; width: var(--ts-orbit-size, 112%); aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 0;
}
.ts-orbit__ring {
  position: absolute; inset: 0; border-radius: 50%; --ts-orbit-dur: 64s;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='49.6' fill='none' stroke='rgba(255,255,255,0.15)' stroke-width='0.28' stroke-dasharray='1.4 2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  animation: ts-fx-spin var(--ts-orbit-dur) linear infinite; will-change: transform;
}
/* comet highlight riding on each ring */
.ts-orbit__ring::before {
  content: ""; position: absolute; inset: -1px; border-radius: 50%; opacity: .9;
  background: conic-gradient(from 0deg, rgba(106, 208, 255, 0) 0 64%, rgba(106, 208, 255, .75) 89%, rgba(255, 255, 255, .95) 93%, rgba(106, 208, 255, 0) 96%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}
.ts-orbit__ring--inner { inset: 17%; --ts-orbit-dur: 46s; animation-direction: reverse; }
.ts-orbit__ring--inner::before {
  background: conic-gradient(from 180deg, rgba(247, 147, 30, 0) 0 64%, rgba(255, 180, 84, .7) 89%, rgba(255, 234, 200, .95) 93%, rgba(247, 147, 30, 0) 96%);
}
.ts-orbit__pin { position: absolute; inset: 0; transform: rotate(var(--a, 0deg)); }
.ts-orbit__badge {
  position: absolute; left: 50%; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: .95rem; color: #8fdcff;
  background: linear-gradient(160deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .05) 58%), rgba(18, 54, 112, .62);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 14px 30px rgba(0, 0, 0, .38), 0 0 0 6px rgba(255, 255, 255, .03);
  transform: rotate(calc(-1 * var(--a, 0deg)));
  animation: ts-fx-unspin var(--ts-orbit-dur) linear infinite;
}
.ts-orbit__ring--inner .ts-orbit__badge { width: 40px; height: 40px; margin: -20px 0 0 -20px; font-size: .85rem; animation-direction: reverse; }
.ts-orbit__pin:nth-child(even) .ts-orbit__badge { color: #ffc46a; }
@keyframes ts-fx-spin { to { transform: rotate(360deg); } }
@keyframes ts-fx-unspin {
  from { transform: rotate(calc(-1 * var(--a, 0deg))); }
  to   { transform: rotate(calc(-1 * var(--a, 0deg) - 360deg)); }
}

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .ts-orbit { display: none; }
}
@media (max-width: 520px) {
  .ts-rotate::after { height: .07em; }
}

/* ---------- reduced motion: everything static (canvas draws one frame from JS) ---------- */
@media (prefers-reduced-motion: reduce) {
  .ts-hero__canvas { transition: none; }
  .ts-orbit__ring, .ts-orbit__badge { animation: none; }
  .ts-orbit__ring::before { display: none; }
  .ts-rotate__word.is-in, .ts-rotate__word.is-out, .ts-rotate::after { transition: none; }
}

/* ===== tilt-cards ===== */
/* ---------- 3D tilt with glare (.ts-tilt) ---------- */
.ts-tilt { transform-style: preserve-3d; will-change: transform; }
html.ts-js .ts-tilt.is-tilting { transition: transform .08s linear, box-shadow .35s var(--ts-ease), border-color .35s !important; }
.ts-tilt__glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; z-index: 3; background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 55%); transition: opacity .3s; mix-blend-mode: soft-light; }
.ts-tilt.is-tilting .ts-tilt__glare { opacity: 1; }
.ts-tilt > * { transform: translateZ(0); }

/* ---------- animated conic border (.ts-card--glow) ---------- */
@property --ts-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.ts-card--glow { position: relative; }
.ts-card--glow::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 2px; z-index: 0; opacity: 0; pointer-events: none;
  background: conic-gradient(from var(--ts-angle, 0deg), #1b6fd6, #6ad0ff, #f7931e, #6ba539, #1b6fd6);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity .35s;
}
.ts-card--glow:hover::before { opacity: 1; animation: ts-spin-angle 3.2s linear infinite; }
.ts-card--glow::after { display: none; }
@keyframes ts-spin-angle { to { --ts-angle: 360deg; } }
.ts-card--glow > * { position: relative; z-index: 1; }

/* icon micro animation */
@keyframes ts-icon-pop { 0% { transform: scale(1) rotate(0); } 35% { transform: scale(1.18) rotate(-8deg); } 70% { transform: scale(.96) rotate(4deg); } 100% { transform: scale(1.08) rotate(-3deg); } }
.ts-card:hover .ts-icon, .ts-tile:hover .ts-icon, .ts-bento__item:hover .ts-bento__icon { animation: ts-icon-pop .55s var(--ts-ease) forwards; }

/* ---------- bento grid for ERPNext modules (.ts-bento) ---------- */
.ts-bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 138px; grid-auto-flow: dense; gap: 14px; }
.ts-bento__item {
  grid-column: span 3; grid-row: span 1; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  padding: 18px 18px 16px; border-radius: 20px; background: #fff; border: 1px solid var(--ts-line); color: var(--ts-ink);
  transition: transform .35s var(--ts-ease), box-shadow .35s var(--ts-ease), border-color .35s;
}
.ts-bento__item::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(27, 111, 214, .18) 1px, transparent 1px); background-size: 14px 14px; opacity: 0; transition: opacity .4s; mask-image: radial-gradient(220px 160px at 100% 0%, #000, transparent 70%); }
.ts-bento__item::after { content: ""; position: absolute; width: 180px; height: 180px; right: -60px; top: -60px; border-radius: 50%; background: var(--ts-grad); filter: blur(46px); opacity: 0; transition: opacity .4s; }
.ts-bento__item:hover { transform: translateY(-5px); box-shadow: var(--ts-shadow); border-color: rgba(27, 111, 214, .35); color: var(--ts-ink); }
.ts-bento__item:hover::before { opacity: 1; }
.ts-bento__item:hover::after { opacity: .28; }
.ts-bento__icon { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; background: var(--ts-blue-100); color: var(--ts-blue); margin-bottom: auto; transition: background .3s, color .3s; }
.ts-bento__item:hover .ts-bento__icon { background: var(--ts-grad); color: #fff; }
.ts-bento__name { position: relative; z-index: 1; font-family: var(--ts-font-head); font-weight: 700; font-size: 1rem; line-height: 1.2; }
.ts-bento__tag { position: relative; z-index: 1; color: var(--ts-muted); font-size: .8rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ts-bento__arrow { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--ts-line); display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; color: var(--ts-muted); opacity: 0; transform: translate(-6px, 6px); transition: all .35s var(--ts-ease); z-index: 1; }
.ts-bento__item:hover .ts-bento__arrow { opacity: 1; transform: none; color: var(--ts-blue); border-color: var(--ts-blue); }
.ts-bento__item--wide { grid-column: span 6; }
.ts-bento__item--tall { grid-row: span 2; }
.ts-bento__item--hero { grid-column: span 6; grid-row: span 2; padding: 26px; }
.ts-bento__item--hero .ts-bento__name { font-size: 1.5rem; }
.ts-bento__item--hero .ts-bento__tag { font-size: .95rem; -webkit-line-clamp: 3; }
.ts-bento__item--hero .ts-bento__icon { width: 56px; height: 56px; font-size: 1.35rem; border-radius: 16px; }
.ts-bento__item--navy { background: linear-gradient(160deg, var(--ts-navy) 0%, var(--ts-navy-700) 100%); color: #fff; border-color: transparent; }
.ts-bento__item--navy .ts-bento__tag { color: rgba(255, 255, 255, .7); }
.ts-bento__item--navy .ts-bento__icon { background: rgba(255, 255, 255, .12); color: #fff; }
.ts-bento__item--navy:hover { color: #fff; }
.ts-bento__item--navy::before { background-image: radial-gradient(rgba(255, 255, 255, .25) 1px, transparent 1px); }
.ts-bento__item--orange { background: linear-gradient(160deg, #fff4e5 0%, #ffe6c7 100%); border-color: #ffd9a8; }
.ts-bento__item--orange .ts-bento__icon { background: #fff; color: var(--ts-orange-600); }
.ts-bento__item--orange:hover .ts-bento__icon { background: var(--ts-grad-accent); color: #2b1600; }
.ts-bento__item--orange::after { background: var(--ts-grad-accent); }
.ts-bento__item--green { background: linear-gradient(160deg, #f1f8e8 0%, #e2f0d0 100%); border-color: #cfe4b5; }
.ts-bento__item--green .ts-bento__icon { background: #fff; color: var(--ts-green); }
.ts-bento__item--green::after { background: var(--ts-green); }
.ts-bento__item--sky { background: linear-gradient(160deg, #eaf5ff 0%, #d9ecff 100%); border-color: #c4dffc; }
.ts-bento__item--sky .ts-bento__icon { background: #fff; }
@media (max-width: 1024px) {
  .ts-bento { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 132px; }
  .ts-bento__item, .ts-bento__item--wide { grid-column: span 3; }
  .ts-bento__item--hero { grid-column: span 6; }
}
@media (max-width: 600px) {
  .ts-bento { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 10px; }
  .ts-bento__item, .ts-bento__item--wide, .ts-bento__item--hero { grid-column: span 1; grid-row: span 1; min-height: 132px; padding: 14px; }
  .ts-bento__item--hero { grid-column: span 2; }
  .ts-bento__item--tall { grid-row: span 1; }
  .ts-bento__icon { width: 38px; height: 38px; font-size: .95rem; }
  .ts-bento__name { font-size: .92rem; }
  .ts-bento__tag { font-size: .74rem; }
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .ts-tilt { transform: none !important; }
  .ts-tilt__glare { display: none; }
  .ts-card--glow:hover::before { animation: none; }
}

/* ===== timeline-stats ===== */
/* ---------- process timeline (.ts-timeline) with SVG path draw ---------- */
.ts-timeline { position: relative; --tl-progress: 0; }
.ts-timeline__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.ts-timeline__track { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 3; stroke-linecap: round; }
.ts-timeline__path { fill: none; stroke: url(#ts-tl-grad); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(106, 208, 255, .8)); }
.ts-timeline__dot { fill: #fff; filter: drop-shadow(0 0 8px rgba(255, 208, 138, .9)); }
.ts-timeline__steps { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; z-index: 1; }
.ts-tstep { text-align: center; padding: 0 6px; }
.ts-tstep__node {
  position: relative; width: 78px; height: 78px; border-radius: 26px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
  background: rgba(255, 255, 255, .06); border: 1.5px solid rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .7); backdrop-filter: blur(8px);
  transition: all .6s var(--ts-ease);
}
.ts-tstep__node::before { content: attr(data-step); position: absolute; top: -12px; right: -12px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-family: var(--ts-font-head); font-weight: 800; font-size: .72rem; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .2); transition: all .5s; }
.ts-tstep__node::after { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; bottom: -10px; left: 50%; transform: translate(-50%, 6px) scale(.5); width: 24px; height: 24px; border-radius: 50%; background: var(--ts-green); color: #fff; font-size: .62rem; display: flex; align-items: center; justify-content: center; opacity: 0; transition: all .4s var(--ts-ease); }
.ts-tstep.is-lit .ts-tstep__node { background: var(--ts-grad); color: #fff; border-color: transparent; box-shadow: 0 0 0 6px rgba(47, 155, 255, .18), 0 18px 40px rgba(27, 111, 214, .45); transform: translateY(-6px); }
.ts-tstep.is-lit .ts-tstep__node::before { background: var(--ts-orange); border-color: transparent; }
.ts-tstep.is-lit .ts-tstep__node::after { opacity: 1; transform: translate(-50%, 0) scale(1); }
.ts-tstep h4 { color: #fff; font-size: 1.05rem; margin-bottom: 6px; transition: color .4s; }
.ts-tstep p { color: rgba(255, 255, 255, .6); font-size: .9rem; margin: 0; }
.ts-tstep.is-lit h4 { color: #ffd08a; }
@media (max-width: 960px) {
  .ts-timeline__steps { grid-template-columns: 1fr; gap: 26px; padding-left: 8px; }
  .ts-tstep { display: grid; grid-template-columns: 78px 1fr; gap: 18px; text-align: left; align-items: start; }
  .ts-tstep__node { margin: 0; }
}

/* ---------- ring stats (.ts-rings / .ts-ring) ---------- */
.ts-rings { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.ts-ring { text-align: center; padding: 26px 16px 22px; background: #fff; border: 1px solid var(--ts-line); border-radius: 22px; transition: transform .35s var(--ts-ease), box-shadow .35s; }
.ts-ring:hover { transform: translateY(-5px); box-shadow: var(--ts-shadow); }
.ts-ring__svg { width: 128px; height: 128px; display: block; margin: 0 auto 12px; transform: rotate(-90deg); }
.ts-ring__bg { fill: none; stroke: var(--ts-blue-100); stroke-width: 9; }
.ts-ring__fg { fill: none; stroke: url(#ts-ring-grad); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 339.3; stroke-dashoffset: 339.3; transition: stroke-dashoffset 1.6s var(--ts-ease); }
.ts-ring.is-visible .ts-ring__fg { stroke-dashoffset: calc(339.3 - 339.3 * var(--v, 0) / 100); }
.ts-ring__wrap { position: relative; width: 128px; margin: 0 auto 12px; }
.ts-ring__wrap .ts-ring__svg { margin: 0; }
.ts-ring__value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--ts-font-head); font-weight: 800; font-size: 1.55rem; color: var(--ts-ink); }
.ts-ring__value small { font-size: .9rem; color: var(--ts-orange); margin-left: 1px; }
.ts-ring__label { font-family: var(--ts-font-head); font-weight: 700; font-size: .95rem; color: var(--ts-ink); }
.ts-ring__sub { font-size: .8rem; color: var(--ts-muted); margin-top: 2px; }
@media (max-width: 860px) { .ts-rings { grid-template-columns: 1fr 1fr; } }

/* ---------- number strip (.ts-numbers) ---------- */
.ts-numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ts-numbers__item { text-align: center; padding: 22px 12px; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.ts-numbers__value { font-family: var(--ts-font-head); font-weight: 800; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; background: linear-gradient(90deg, #7fd0ff, #fff 50%, #ffd08a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ts-numbers__label { color: rgba(255, 255, 255, .7); font-size: .88rem; margin-top: 8px; }
@media (max-width: 720px) { .ts-numbers { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .ts-ring__fg { transition: none; } .ts-timeline__dot { display: none; } }

/* ===== sliders-compare ===== */
/* ---------- slider (.ts-slider) ---------- */
.ts-slider { position: relative; }
.ts-slider__track { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 6px 4px 22px; scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab; }
.ts-slider__track::-webkit-scrollbar { display: none; }
.ts-slider.is-dragging .ts-slider__track { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.ts-slider__item { flex: 0 0 calc((100% - 44px) / 3); scroll-snap-align: start; min-width: 0; }
.ts-slider__item > * { height: 100%; }
.ts-slider__nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 4px; }
.ts-slider__btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ts-line); background: #fff; color: var(--ts-ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .25s var(--ts-ease); box-shadow: var(--ts-shadow-sm); }
.ts-slider__btn:hover { background: var(--ts-navy); color: #fff; border-color: var(--ts-navy); transform: translateY(-2px); }
.ts-slider__dots { display: flex; gap: 6px; }
.ts-slider__dot { width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0; background: var(--ts-line); cursor: pointer; transition: all .3s var(--ts-ease); }
.ts-slider__dot.is-active { width: 26px; background: var(--ts-grad); }
.ts-section--dark .ts-slider__btn { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #fff; }
.ts-section--dark .ts-slider__dot { background: rgba(255, 255, 255, .2); }
@media (max-width: 1100px) { .ts-slider__item { flex-basis: calc((100% - 22px) / 2); } }
@media (max-width: 720px) { .ts-slider__item { flex-basis: 88%; } }

/* ---------- comparison table (.ts-compare) ---------- */
.ts-compare { position: relative; overflow-x: auto; border-radius: 24px; border: 1px solid var(--ts-line); background: #fff; box-shadow: var(--ts-shadow); }
.ts-compare table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 760px; font-size: .93rem; }
.ts-compare th, .ts-compare td { padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--ts-line); vertical-align: middle; }
.ts-compare th:first-child, .ts-compare td:first-child { text-align: left; position: sticky; left: 0; background: #fff; z-index: 2; font-weight: 600; color: var(--ts-ink); min-width: 210px; box-shadow: 6px 0 12px -8px rgba(10, 26, 51, .18); }
.ts-compare thead th { background: var(--ts-surface); font-family: var(--ts-font-head); font-weight: 700; color: var(--ts-ink); border-bottom: 2px solid var(--ts-line); padding: 18px 16px; }
.ts-compare thead th:first-child { background: var(--ts-surface); }
.ts-compare thead th.is-hero { background: var(--ts-grad); color: #fff; position: relative; }
.ts-compare thead th.is-hero small { display: block; font-weight: 500; font-size: .72rem; opacity: .9; }
.ts-compare td.is-hero { background: var(--ts-blue-50); box-shadow: inset 4px 0 0 rgba(27, 111, 214, .35), inset -4px 0 0 rgba(27, 111, 214, .35); font-weight: 600; color: var(--ts-ink); }
.ts-compare tbody tr:last-child td { border-bottom: 0; }
.ts-compare tbody tr:hover td { background: #f8fbff; }
.ts-compare tbody tr:hover td.is-hero { background: var(--ts-blue-100); }
.ts-compare td small { display: block; color: var(--ts-muted); font-weight: 400; font-size: .78rem; margin-top: 2px; }
.ts-mark { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font-size: .7rem; vertical-align: middle; margin-right: 6px; transform: scale(0); transition: transform .5s var(--ts-ease); transition-delay: var(--d, 0s); }
.ts-compare.is-visible .ts-mark { transform: scale(1); }
.ts-mark--yes { background: var(--ts-green-100); color: var(--ts-green); }
.ts-mark--no { background: var(--ts-red-100); color: var(--ts-red); }
.ts-mark--part { background: var(--ts-orange-100); color: var(--ts-orange-600); }
.ts-compare__legend { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 14px; font-size: .84rem; color: var(--ts-muted); }
.ts-compare__legend .ts-mark { transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .ts-mark { transform: scale(1); transition: none; } }

/* ---------- text ticker (.ts-ticker) ---------- */
.ts-ticker { overflow: hidden; background: var(--ts-navy); color: #fff; font-family: var(--ts-font-head); font-weight: 600; font-size: .9rem; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .08); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.ts-ticker__track { display: flex; gap: 40px; width: max-content; animation: ts-marquee 45s linear infinite; white-space: nowrap; }
.ts-ticker:hover .ts-ticker__track { animation-play-state: paused; }
.ts-ticker__item { display: inline-flex; align-items: center; gap: 10px; }
.ts-ticker__item i { color: #ffd08a; }
.ts-ticker__item::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ts-sky); margin-left: 30px; opacity: .6; }
@media (prefers-reduced-motion: reduce) { .ts-ticker__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } }

/* ===== logo-wall-coverage ===== */
/* ---------- dual-direction logo marquee (.ts-marquee--dual) ---------- */
.ts-marquee--dual { display: grid; gap: 14px; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ts-marquee--dual .ts-marquee__track { animation-duration: 70s; }
.ts-marquee--dual .ts-marquee__track--rev { animation-direction: reverse; animation-duration: 58s; }
.ts-marquee--dual:hover .ts-marquee__track { animation-play-state: paused; }
.ts-marquee--dual .ts-marquee__item { width: 168px; height: 90px; border-radius: 16px; background: linear-gradient(160deg, #fff, #f6f9fe); border: 1px solid var(--ts-line); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), var(--ts-shadow-sm); }
.ts-marquee--dual .ts-marquee__item:hover { border-color: rgba(27, 111, 214, .4); }

/* ---------- coverage radar (.ts-coverage) ---------- */
.ts-coverage { position: relative; width: min(560px, 100%); aspect-ratio: 1; margin: 0 auto; display: flex; align-items: center; justify-content: center; container-type: inline-size; }
.ts-coverage__ring { position: absolute; border-radius: 50%; border: 1px dashed rgba(27, 111, 214, .35); animation: ts-cov-spin var(--dur, 80s) linear infinite; }
.ts-coverage__ring--1 { width: 46%; height: 46%; --dur: 60s; }
.ts-coverage__ring--2 { width: 74%; height: 74%; --dur: 95s; animation-direction: reverse; }
.ts-coverage__ring--3 { width: 100%; height: 100%; --dur: 130s; border-color: rgba(27, 111, 214, .22); }
@keyframes ts-cov-spin { to { transform: rotate(360deg); } }
.ts-coverage__pin { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateY(calc(var(--r) * -1)); }
.ts-coverage__ring--1 .ts-coverage__pin { --r: 23cqw; }
.ts-coverage__ring--2 .ts-coverage__pin { --r: 37cqw; }
.ts-coverage__ring--3 .ts-coverage__pin { --r: 50cqw; }
.ts-coverage__chip { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) rotate(calc(var(--a) * -1)); animation: ts-cov-counter var(--dur, 80s) linear infinite; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--ts-line); box-shadow: var(--ts-shadow-sm); font-family: var(--ts-font-head); font-weight: 700; font-size: .78rem; color: var(--ts-ink); }
.ts-coverage__chip i { color: var(--ts-orange); font-size: .7rem; }
.ts-coverage__ring--2 .ts-coverage__chip { animation-direction: reverse; }
@keyframes ts-cov-counter { to { transform: translate(-50%, -50%) rotate(calc(var(--a) * -1 - 360deg)); } }
.ts-coverage__ring--2 .ts-coverage__chip { animation-name: ts-cov-counter-rev; }
@keyframes ts-cov-counter-rev { to { transform: translate(-50%, -50%) rotate(calc(var(--a) * -1 + 360deg)); } }
.ts-coverage__hq { position: relative; z-index: 2; width: 132px; height: 132px; border-radius: 50%; background: var(--ts-grad); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: 0 18px 40px rgba(27, 111, 214, .45); font-family: var(--ts-font-head); font-weight: 800; text-align: center; line-height: 1.1; }
.ts-coverage__hq small { font-weight: 600; font-size: .68rem; opacity: .85; letter-spacing: .08em; text-transform: uppercase; }
.ts-coverage__hq i { font-size: 1.4rem; margin-bottom: 4px; }
.ts-coverage__pulse { position: absolute; width: 132px; height: 132px; border-radius: 50%; border: 2px solid var(--ts-blue); opacity: 0; animation: ts-cov-pulse 3.6s ease-out infinite; }
.ts-coverage__pulse:nth-child(2) { animation-delay: 1.2s; }
.ts-coverage__pulse:nth-child(3) { animation-delay: 2.4s; }
@keyframes ts-cov-pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3.6); opacity: 0; } }
.ts-coverage__grid { position: absolute; inset: 0; border-radius: 50%; background-image: radial-gradient(rgba(27, 111, 214, .18) 1px, transparent 1px); background-size: 16px 16px; mask-image: radial-gradient(circle, #000 30%, transparent 72%); }
@media (max-width: 520px) {
  .ts-coverage__ring, .ts-coverage__chip { animation: none !important; }
  .ts-coverage__chip { font-size: .68rem; padding: 5px 9px; }
  .ts-coverage__hq { width: 100px; height: 100px; font-size: .85rem; }
  .ts-coverage__pulse { width: 100px; height: 100px; }
}
@media (prefers-reduced-motion: reduce) { .ts-coverage__ring, .ts-coverage__chip, .ts-coverage__pulse { animation: none !important; } }

/* ---------- client wins (.ts-testi) ---------- */
.ts-testi { position: relative; background: #fff; border: 1px solid var(--ts-line); border-radius: 22px; padding: 30px 26px 24px; display: flex; flex-direction: column; gap: 14px; transition: transform .35s var(--ts-ease), box-shadow .35s; overflow: hidden; }
.ts-testi::before { content: "\201C"; position: absolute; top: -18px; right: 18px; font-family: Georgia, serif; font-size: 8rem; line-height: 1; color: var(--ts-blue-100); pointer-events: none; }
.ts-testi:hover { transform: translateY(-6px); box-shadow: var(--ts-shadow); }
.ts-testi__result { position: relative; font-family: var(--ts-font-head); font-weight: 600; font-size: 1.08rem; color: var(--ts-ink); line-height: 1.45; }
.ts-testi__meta { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--ts-line); }
.ts-testi__logo { width: 48px; height: 48px; border-radius: 12px; background: var(--ts-surface); display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--ts-line); }
.ts-testi__logo img { max-width: 80%; max-height: 80%; object-fit: contain; }
.ts-testi__name { font-family: var(--ts-font-head); font-weight: 700; color: var(--ts-ink); font-size: .95rem; }
.ts-testi__ind { color: var(--ts-muted); font-size: .8rem; }
.ts-testi__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ts-testi__tags span { font-size: .72rem; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: var(--ts-green-100); color: #3d6b16; }

/* ===== polish ===== */
/* ---------- service cards v3 with animated scenes + spotlight (.ts-svc) ---------- */
.ts-svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; position: relative; }
@media (max-width: 1024px) { .ts-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ts-svc-grid { grid-template-columns: 1fr; } }
.ts-svc {
  --mx: 50%; --my: 50%;
  position: relative; display: flex; flex-direction: column; border-radius: 24px; background: #fff; border: 1px solid var(--ts-line); overflow: hidden; color: var(--ts-ink);
  transition: transform .45s var(--ts-ease), box-shadow .45s var(--ts-ease), border-color .45s;
  isolation: isolate;
}
.ts-svc::before { /* spotlight border that follows the pointer */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 4; opacity: 0; transition: opacity .4s;
  background: radial-gradient(360px circle at var(--mx) var(--my), rgba(27, 111, 214, .9), rgba(247, 147, 30, .55) 35%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.ts-svc::after { /* soft inner spotlight */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .4s;
  background: radial-gradient(520px circle at var(--mx) var(--my), rgba(106, 208, 255, .16), transparent 55%);
}
.ts-svc-grid.is-spot .ts-svc::before, .ts-svc-grid.is-spot .ts-svc::after { opacity: 1; }
.ts-svc:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(10, 26, 51, .16), 0 6px 18px rgba(10, 26, 51, .06); border-color: rgba(27, 111, 214, .25); color: var(--ts-ink); }
.ts-svc__scene { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: radial-gradient(420px 220px at 20% 0%, #eaf3ff, transparent 60%), radial-gradient(360px 200px at 100% 100%, #fff1e0, transparent 60%), linear-gradient(160deg, #f7faff, #eef4fc); border-bottom: 1px solid var(--ts-line); }
.ts-svc__scene::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(27, 111, 214, .14) 1px, transparent 1px); background-size: 16px 16px; mask-image: radial-gradient(ellipse at 50% 50%, #000 40%, transparent 80%); opacity: .8; pointer-events: none; }
.ts-svc__scene > .ts-scene { transition: transform .8s var(--ts-ease); }
.ts-svc:hover .ts-svc__scene > .ts-scene { transform: scale(1.035); }
.ts-svc__scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ts-svc__body { position: relative; z-index: 2; padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ts-svc__icon { position: absolute; top: -28px; left: 24px; width: 56px; height: 56px; border-radius: 16px; background: #fff; border: 1px solid var(--ts-line); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: var(--ts-blue); box-shadow: 0 10px 24px rgba(10, 26, 51, .12); transition: transform .45s var(--ts-ease), background .3s, color .3s; z-index: 3; }
.ts-svc__icon--green { color: var(--ts-green); } .ts-svc__icon--orange { color: var(--ts-orange-600); } .ts-svc__icon--red { color: var(--ts-red); }
.ts-svc:hover .ts-svc__icon { transform: translateY(-6px) rotate(-6deg) scale(1.08); background: var(--ts-grad); color: #fff; border-color: transparent; }
.ts-svc__title { font-size: 1.18rem; margin: 22px 0 0; }
.ts-svc__text { color: var(--ts-muted); font-size: .95rem; margin: 0; }
.ts-svc__foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ts-svc__tags { flex: 1 1 60%; }
.ts-svc .ts-link-arrow { white-space: nowrap; }
.ts-svc__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.ts-svc__tags span { font-size: .7rem; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--ts-surface); color: var(--ts-muted); border: 1px solid var(--ts-line); }
.ts-svc .ts-link-arrow { position: relative; }
.ts-svc .ts-link-arrow::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: var(--ts-grad); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ts-ease); }
.ts-svc:hover .ts-link-arrow::after { transform: scaleX(1); }

/* ---------- premium global polish ---------- */
/* film grain on the hero for depth */
.ts-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07; mix-blend-mode: overlay; z-index: 1; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.9'/></svg>"); }
.ts-hero .ts-container { position: relative; z-index: 2; }
/* animated accent bar under section titles */
.ts-section-head h2 { position: relative; display: block; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; padding-bottom: 14px; }
.ts-section-head--left h2 { margin-left: 0; }
.ts-section-head h2::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 64px; height: 4px; border-radius: 4px; background: var(--ts-grad-accent); transform: translateX(-50%) scaleX(0); transition: transform .8s var(--ts-ease) .35s; }
.ts-section-head--left h2::after { left: 0; transform: scaleX(0); transform-origin: left; }
.ts-section-head.is-visible h2::after, .ts-section-head h2.is-visible::after { transform: translateX(-50%) scaleX(1); }
.ts-section-head--left.is-visible h2::after, .ts-section-head--left h2.is-visible::after { transform: scaleX(1); }
/* eyebrow shimmer */
.ts-eyebrow { position: relative; overflow: hidden; }
.ts-eyebrow::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .55), transparent); animation: ts-shimmer 4.5s ease-in-out infinite; }
@keyframes ts-shimmer { 0%, 60% { left: -60%; } 100% { left: 140%; } }
/* moving dot grid behind the modules section */
.ts-section--grad { position: relative; overflow: hidden; }
.ts-section--grad::before { content: ""; position: absolute; inset: -40px; pointer-events: none; z-index: 0; background-image: radial-gradient(rgba(27, 111, 214, .13) 1.2px, transparent 1.2px); background-size: 28px 28px; animation: ts-grid-drift 40s linear infinite; mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%); }
.ts-section--grad > * { position: relative; z-index: 1; }
@keyframes ts-grid-drift { to { background-position: 280px 140px; } }
/* footer gradient hairline */
.ts-footer::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #1b6fd6, #6ad0ff, #f7931e, #6ba539, #1b6fd6); background-size: 300% 100%; animation: ts-hue-slide 12s linear infinite; }
@keyframes ts-hue-slide { to { background-position: 300% 0; } }
/* image hover treatment for post cards and panels */
.ts-post__img::after, .ts-panel__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 26, 51, .55), transparent 60%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.ts-post:hover .ts-post__img::after { opacity: 1; }
.ts-panel__img { position: relative; }
/* primary button gradient shift + ripple */
.ts-btn--primary { background-size: 200% 100%; background-position: 0% 0; transition: transform .25s var(--ts-ease), box-shadow .25s var(--ts-ease), background-position .6s var(--ts-ease), color .25s; }
.ts-btn--primary:hover { background-position: 100% 0; }
.ts-ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255, 255, 255, .45); pointer-events: none; animation: ts-ripple .6s ease-out forwards; }
@keyframes ts-ripple { to { transform: scale(3); opacity: 0; } }
.ts-btn { position: relative; overflow: hidden; }
/* header hairline when scrolled */
.ts-header.is-scrolled::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, #1b6fd6, #6ad0ff, #f7931e, transparent); background-size: 200% 100%; animation: ts-hue-slide 6s linear infinite; }
/* tabs: active glow pulse */
.ts-tabs__btn.is-active { animation: ts-tab-glow 2.4s ease-in-out infinite; }
@keyframes ts-tab-glow { 0%, 100% { box-shadow: 0 12px 32px rgba(10, 26, 51, .18); } 50% { box-shadow: 0 12px 36px rgba(27, 111, 214, .45); } }
/* chips hover */
.ts-chip { transition: transform .25s var(--ts-ease), border-color .25s, color .25s, box-shadow .25s; }
.ts-chip:hover { transform: translateY(-2px); box-shadow: var(--ts-shadow-sm); }
/* FAQ icon spin */
.ts-faq__q::after { transition: transform .4s var(--ts-ease), background .3s; }
.ts-faq__item[open] .ts-faq__q::after { transform: rotate(135deg); }
/* scroll-driven image motion (Chrome/Edge) */
@supports (animation-timeline: view()) {
  .ts-media__img img, .ts-panel__img img, .ts-collage img:first-child { animation: ts-view-zoom linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
  @keyframes ts-view-zoom { from { transform: scale(1.12) translateY(12px); } to { transform: scale(1) translateY(0); } }
}
/* smooth cross-document page transitions (Chrome/Edge 126+) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: ts-vt-out .28s ease-in both; }
::view-transition-new(root) { animation: ts-vt-in .42s var(--ts-ease) both; }
@keyframes ts-vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes ts-vt-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  .ts-eyebrow::after, .ts-section--grad::before, .ts-footer::after, .ts-header.is-scrolled::after, .ts-tabs__btn.is-active { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* bento glow follows the pointer */
[data-spotlight].is-spot .ts-bento__item::after { left: var(--mx); top: var(--my); right: auto; transform: translate(-50%, -50%); opacity: .2; }
[data-spotlight].is-spot .ts-bento__item:hover::after { opacity: .32; }

/* ===== scene code.css ===== */
.ts-scene--code{position:absolute;inset:0;overflow:hidden;container-type:size;font-family:"Plus Jakarta Sans","Inter",system-ui,sans-serif;color:#101c33;background:radial-gradient(circle,rgba(22,52,95,.11) 1px,transparent 1.4px) 0 0/12px 12px}
.ts-scene--code__win,.ts-scene--code__form{font-size:7px;font-size:clamp(5px,1.85cqw,9.5px)}
.ts-scene--code__win{position:absolute;left:3.5%;top:8%;bottom:8%;width:64%;display:flex;flex-direction:column;overflow:hidden;background:#0a1a33;border-radius:1.7em;box-shadow:0 1.4em 3em rgba(10,26,51,.3)}
.ts-scene--code__bar{flex:none;display:flex;align-items:center;height:3.1em;padding:0 1.3em;background:#ffffff0a;border-bottom:1px solid #ffffff12}
.ts-scene--code__dot{width:.85em;height:.85em;margin-right:.55em;border-radius:50%;background:#e5432b}
.ts-scene--code__dot--y{background:#f7931e}.ts-scene--code__dot--g{background:#6ba539}
.ts-scene--code__tab{margin-left:.3em;padding:.5em .9em;border-radius:.6em;font-size:.9em;font-weight:600;color:#fff6}
.ts-scene--code__tab--on{margin-left:1.2em;background:#ffffff17;color:#fff;box-shadow:inset 0 .2em 0 #3f8df0}
.ts-scene--code__body{flex:1;padding:1.2em 1.3em;font:1em/2.05em ui-monospace,Menlo,monospace;color:#c9d6ea;animation:ts-code-fade 9s infinite}
.ts-scene--code__row{display:flex;white-space:pre}
.ts-scene--code__ln{width:1.2em;margin-right:1.2em;text-align:right;color:#ffffff38}
.ts-scene--code__line{position:relative;overflow:hidden}
.ts-scene--code__line b{font-weight:400}
.ts-scene--code__kw{color:#3f8df0}.ts-scene--code__nm{color:#6ad0ff}.ts-scene--code__st{color:#ffb454}.ts-scene--code__cm{color:#6ba539;font-style:italic}.ts-scene--code__sf{color:#3f8df0;font-style:italic}
.ts-scene--code__cover{position:absolute;top:0;bottom:0;left:-.3em;right:-2px;background:#0a1a33;animation:ts-code-l1 9s steps(28) infinite}
.ts-scene--code__cover::before,.ts-scene--code__caret{content:"";position:absolute;left:0;top:18%;width:max(1.5px,.18em);height:64%;background:#6ad0ff}
.ts-scene--code__cover--2{animation:ts-code-l2 9s steps(23) infinite}.ts-scene--code__cover--3{animation:ts-code-l3 9s steps(41) infinite}.ts-scene--code__cover--4{animation:ts-code-l4 9s steps(33) infinite}.ts-scene--code__cover--5{animation:ts-code-l5 9s steps(35) infinite}.ts-scene--code__cover--6{animation:ts-code-l6 9s steps(41) infinite}
.ts-scene--code__caret{position:relative;top:.37em;height:1.3em;animation:ts-code-blink .8s infinite,ts-code-idle 9s infinite}
@keyframes ts-code-l1{3%{transform:none}9.5%,100%{transform:translateX(100%)}}
@keyframes ts-code-l2{10.5%{transform:none}16%,100%{transform:translateX(100%)}}
@keyframes ts-code-l3{17%{transform:none}26.5%,100%{transform:translateX(100%)}}
@keyframes ts-code-l4{27.5%{transform:none}35%,100%{transform:translateX(100%)}}
@keyframes ts-code-l5{36%{transform:none}44%,100%{transform:translateX(100%)}}
@keyframes ts-code-l6{45%{transform:none}54.5%,100%{transform:translateX(100%)}}
@keyframes ts-code-idle{0%,54.5%{transform:scaleY(0)}55%,94%{transform:none}96%,100%{transform:scaleY(0)}}
@keyframes ts-code-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes ts-code-fade{0%{opacity:0}2.5%,94%{opacity:1}97%,100%{opacity:0}}
.ts-scene--code__status{flex:none;display:flex;align-items:center;gap:1.2em;height:2.4em;padding:0 1.3em;background:#ffffff0a;border-top:1px solid #ffffff12;font-size:.8em;font-weight:600;color:#fff6}
.ts-scene--code__status span:last-child{margin-left:auto}
.ts-scene--code__toast{position:absolute;right:1.3em;bottom:3.6em;display:flex;align-items:center;gap:.5em;padding:.5em .9em .5em .5em;background:#fff;color:#101c33;border-radius:.9em;box-shadow:0 .6em 1.8em rgba(10,26,51,.4);font-size:.95em;font-weight:700;white-space:nowrap;animation:ts-code-toast 9s cubic-bezier(.2,.9,.25,1) infinite}
.ts-scene--code__toast span{color:#7b8aa3}
.ts-scene--code__ok{display:grid;place-items:center;flex:none;width:1.35em;height:1.35em;border-radius:50%;background:#6ba539;color:#fff;font-size:.85em}
@keyframes ts-code-toast{0%,57%{transform:translateX(140%);opacity:0}62%,86%{transform:none;opacity:1}90%,100%{transform:translateX(140%);opacity:0}}
.ts-scene--code__form{position:absolute;right:3.5%;top:9%;width:33.5%;padding:1.1em 1.2em;background:#fff;border:1px solid #e4e9f2;border-radius:1.5em;box-shadow:0 1.2em 2.8em rgba(10,26,51,.18)}
.ts-scene--code__fh,.ts-scene--code__field--tg{display:flex;align-items:center;justify-content:space-between}
.ts-scene--code__fh{margin-bottom:.9em}
.ts-scene--code__fh b{font-size:1.1em}
.ts-scene--code__fh span{padding:.3em .65em;border-radius:1em;font-size:.72em;font-weight:700;color:#1b6fd6;background:rgba(27,111,214,.1)}
.ts-scene--code__field{margin-bottom:.75em}
.ts-scene--code__lbl{font-size:.78em;font-weight:600;color:#5b6b85}
.ts-scene--code__in{position:relative;display:flex;align-items:center;height:2.25em;margin-top:.4em;padding:0 .75em;border:1px solid #e4e9f2;border-radius:.7em;background:#f5f8fc;font-size:.95em;font-weight:600}
.ts-scene--code__in::after{content:"";position:absolute;inset:-1px;border:1px solid #1b6fd6;border-radius:inherit;box-shadow:0 0 0 .25em rgba(27,111,214,.15);opacity:0;animation:ts-code-ring 9s infinite}
.ts-scene--code__in--2::after{animation-delay:1.44s}.ts-scene--code__in--3::after{animation-delay:3.06s}
.ts-scene--code__in b{animation:ts-code-v1 9s ease infinite}
.ts-scene--code__in--2 b{animation-name:ts-code-v2}.ts-scene--code__in--3 b{animation-name:ts-code-v3}
@keyframes ts-code-ring{0%,9%{opacity:0}10.5%,16%{opacity:1}17.5%,100%{opacity:0}}
@keyframes ts-code-v1{0%,13%{opacity:0;transform:translateY(.4em)}16%,94%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes ts-code-v2{0%,29%{opacity:0;transform:translateY(.4em)}32%,94%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes ts-code-v3{0%,47%{opacity:0;transform:translateY(.4em)}50%,94%{opacity:1;transform:none}97%,100%{opacity:0}}
.ts-scene--code__field--tg{margin:0}
.ts-scene--code__tg{position:relative;flex:none;width:2.7em;height:1.5em;border-radius:1em;background:#dfe5ee;overflow:hidden}
.ts-scene--code__tg::before{content:"";position:absolute;inset:0;background:#6ba539;animation:ts-code-tgb 9s infinite}
.ts-scene--code__knob{position:absolute;top:.2em;left:.2em;width:1.1em;height:1.1em;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(10,26,51,.3);animation:ts-code-tgk 9s cubic-bezier(.34,1.3,.64,1) infinite}
@keyframes ts-code-tgb{0%,65%{opacity:0}68%,96%{opacity:1}97%,100%{opacity:0}}
@keyframes ts-code-tgk{0%,65%{transform:none}68%,96%{transform:translateX(1.2em)}97%,100%{transform:none}}
.ts-card:hover .ts-scene--code__caret{animation-duration:.4s,9s}
.ts-card:hover .ts-scene--code__toast{box-shadow:0 0 0 .2em rgba(247,147,30,.45),0 .6em 2em rgba(247,147,30,.6)}
@media (prefers-reduced-motion:reduce){.ts-scene--code *,.ts-scene--code ::before,.ts-scene--code ::after{animation-play-state:paused!important;animation-delay:-6.4s!important}}

/* ===== scene erp.css ===== */
.ts-scene--erp{position:absolute;inset:0;overflow:hidden;container-type:inline-size;background:radial-gradient(60% 70% at 16% 10%,#6ad0ff4d,transparent 70%),radial-gradient(45% 55% at 90% 95%,#f7931e24,transparent 70%)}
.ts-scene--erp__stage{position:absolute;inset:0;font-size:10px;font-size:clamp(7.4px,2.63cqw,13px);font-family:"Plus Jakarta Sans","Inter",system-ui,sans-serif;color:#101c33;line-height:1}
.ts-scene--erp__chip{position:absolute;z-index:1;display:inline-flex;align-items:center;gap:.4em;padding:.5em .85em .5em .65em;border-radius:2em;background:#fff;border:1px solid #e4e9f2;box-shadow:0 .4em 1.2em #0a1a331a;font-size:.78em;font-weight:600;color:#16345f;white-space:nowrap;animation:ts-erp-drift 9s ease-in-out infinite alternate}
.ts-scene--erp__chip::before{content:"";width:.6em;height:.6em;border-radius:50%;background:#1b6fd6}
.ts-scene--erp__chip--a{left:.5%;top:34%}
.ts-scene--erp__chip--b{right:.5%;top:60%;animation-duration:11s;animation-delay:-4s}
.ts-scene--erp__chip--b::before{background:#f7931e}
.ts-scene--erp__chip--c{left:5.5%;top:3%;font-size:.68em;opacity:.8;box-shadow:none;animation-duration:13s;animation-delay:-7s}
.ts-scene--erp__chip--c::before{background:#6ba539}
.ts-scene--erp__win{position:absolute;z-index:2;left:16.5%;right:12%;top:12%;bottom:3%;display:flex;flex-direction:column;background:#fff;border:1px solid #e4e9f2;border-radius:1.2em;box-shadow:0 1.2em 3em #0a1a331f}
.ts-scene--erp__top{display:flex;align-items:center;gap:.4em;height:2.1em;padding:0 .9em;border-bottom:1px solid #e4e9f2;flex:none}
.ts-scene--erp__dot{width:.62em;height:.62em;border-radius:50%;background:#e5432b}
.ts-scene--erp__dot:nth-child(2){background:#ffb454}
.ts-scene--erp__dot:nth-child(3){background:#6ba539}
.ts-scene--erp__url{margin:0 auto;width:34%;height:.85em;border-radius:1em;background:#f0f4fa}
.ts-scene--erp__body{display:flex;flex:1;min-height:0;border-radius:0 0 1.2em 1.2em;overflow:hidden}
.ts-scene--erp__side{width:2.5em;flex:none;display:flex;flex-direction:column;align-items:center;gap:.6em;padding-top:.8em;background:#f5f8fc;border-right:1px solid #e4e9f2}
.ts-scene--erp__ic{position:relative;width:1.15em;height:1.15em;border-radius:.32em;background:#dbe3ee}
.ts-scene--erp__ic::after{content:"";position:absolute;inset:.32em;background:#fffffff2}
.ts-scene--erp__ic:first-child{background:#1b6fd6}
.ts-scene--erp__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.7em;padding:.8em .9em .9em}
.ts-scene--erp__kpis{display:flex;gap:.6em;flex:none}
.ts-scene--erp__kpi{flex:1;min-width:0;padding:.55em .65em .5em;border-radius:.7em;background:#f5f8fc}
.ts-scene--erp__kpi--wide{flex:1.6}
.ts-scene--erp__lbl{display:block;font-size:.64em;font-weight:600;text-transform:uppercase;color:#7b8798;margin-bottom:.55em}
.ts-scene--erp__up{float:right;margin-left:.4em;font-style:normal;text-transform:none;color:#6ba539}
.ts-scene--erp__num{display:block;height:1.3em;overflow:hidden;font-size:1.15em;font-weight:800}
.ts-scene--erp__roll{display:block;animation:ts-erp-roll 8s cubic-bezier(.7,0,.2,1) infinite}
.ts-scene--erp__v{display:block;height:1.3em;line-height:1.3em}
.ts-scene--erp__roll--b{animation-delay:.4s}
.ts-scene--erp__roll--c{animation-delay:.8s}
.ts-scene--erp__charts{display:flex;gap:.6em;flex:1;min-height:0}
.ts-scene--erp__panel{flex:1;display:flex;flex-direction:column;min-width:0;padding:.6em .7em .55em;border-radius:.7em;border:1px solid #e4e9f2}
.ts-scene--erp__bars{flex:1.35}
.ts-scene--erp__ttl{display:block;flex:none;font-size:.62em;font-weight:600;color:#7b8798;margin-bottom:.7em}
.ts-scene--erp__plot{flex:1;min-height:0;display:flex;align-items:flex-end;gap:.38em;border-bottom:1px solid #e4e9f2;background:linear-gradient(#eef2f8,#eef2f8) 0 50%/100% 1px no-repeat}
.ts-scene--erp__bar{flex:1;transform-origin:bottom;animation:ts-erp-grow 8s infinite}
.ts-scene--erp__bar:nth-child(1){height:44%}
.ts-scene--erp__bar:nth-child(2){height:62%;animation-delay:.09s}
.ts-scene--erp__bar:nth-child(3){height:38%;animation-delay:.18s}
.ts-scene--erp__bar:nth-child(4){height:70%;animation-delay:.27s}
.ts-scene--erp__bar:nth-child(5){height:55%;animation-delay:.36s}
.ts-scene--erp__bar:nth-child(6){height:90%;animation-delay:.45s}
.ts-scene--erp__bar:nth-child(7){height:66%;animation-delay:.54s}
.ts-scene--erp__bar:nth-child(8){height:80%;animation-delay:.63s}
.ts-scene--erp__fill{display:block;height:100%;border-radius:.3em .3em .1em .1em;background:linear-gradient(180deg,#3f8df0,#1b6fd6);transform-origin:bottom;animation:ts-erp-pulse 3.6s ease-in-out infinite}
.ts-scene--erp__bar:nth-child(6) .ts-scene--erp__fill{background:linear-gradient(180deg,#ffb454,#f7931e)}
.ts-scene--erp__bar:nth-child(3n) .ts-scene--erp__fill{animation-delay:-1.2s}
.ts-scene--erp__bar:nth-child(3n+1) .ts-scene--erp__fill{animation-delay:-2.4s}
.ts-scene--erp__svg{display:block;flex:1;min-height:0;width:100%;overflow:visible}
.ts-scene--erp__area{fill:url(#ts-erp-g);animation:ts-erp-fade 8s ease infinite}
.ts-scene--erp__line,.ts-scene--erp__end{stroke:#1b6fd6;stroke-width:2;vector-effect:non-scaling-stroke}
.ts-scene--erp__line{fill:none;stroke-linecap:round;stroke-dasharray:100;animation:ts-erp-draw 8s ease-in-out infinite}
.ts-scene--erp__end{fill:#fff;transform-box:fill-box;transform-origin:center;animation:ts-erp-pop 8s cubic-bezier(.3,1.5,.5,1) infinite}
.ts-scene--erp__badge{position:absolute;z-index:3;top:-.8em;right:-.7em;padding:.45em .75em;border-radius:2em;background:#6ba539;color:#fff;font-size:.78em;font-weight:700;box-shadow:0 .4em 1em #6ba53959;transition:box-shadow .3s;animation:ts-erp-badge 8s infinite}
.ts-card:hover .ts-scene--erp__fill{animation-duration:1.6s}
.ts-card:hover .ts-scene--erp__badge{box-shadow:0 0 0 .35em #6ba53938,0 .5em 1.4em #6ba5398c}
@keyframes ts-erp-drift{0%{transform:none}50%{transform:translate(.5em,-.9em) rotate(-2deg)}100%{transform:translate(-.3em,.7em) rotate(1.5deg)}}
@keyframes ts-erp-roll{0%,27%{transform:translateY(0)}33%,60%{transform:translateY(-1.3em)}66%,93%{transform:translateY(-2.6em)}100%{transform:translateY(-3.9em)}}
@keyframes ts-erp-grow{0%{transform:scaleY(.04);animation-timing-function:cubic-bezier(.25,1.35,.45,1)}9%,92%{transform:scaleY(1);animation-timing-function:ease-in}100%{transform:scaleY(.04)}}
@keyframes ts-erp-pulse{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.88)}}
@keyframes ts-erp-draw{0%{stroke-dashoffset:100;opacity:1}48%,90%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes ts-erp-fade{0%,40%{opacity:0}58%,90%{opacity:1}96%,100%{opacity:0}}
@keyframes ts-erp-pop{0%,44%{transform:scale(0)}52%,90%{transform:scale(1)}96%,100%{transform:scale(0)}}
@keyframes ts-erp-badge{0%,58%{transform:scale(.5);opacity:0;animation-timing-function:cubic-bezier(.3,1.6,.5,1)}66%,92%{transform:scale(1);opacity:1;animation-timing-function:ease-in}100%{transform:scale(.7);opacity:0}}
@media (prefers-reduced-motion:reduce){.ts-scene--erp *{animation:none}}

/* ===== scene integrate.css ===== */
.ts-scene--integrate{position:absolute;inset:0;overflow:hidden;--t:6s;font-family:"Plus Jakarta Sans","Inter",system-ui,sans-serif}
.ts-scene--integrate__svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ts-scene--integrate__lines{fill:none;stroke:#16345f;stroke-opacity:.16;stroke-width:1.5;stroke-linecap:round;transition:stroke .5s,stroke-width .5s,stroke-opacity .5s}
.ts-scene--integrate__pk{fill:none;stroke:#1b6fd6;stroke-width:4;stroke-linecap:round;stroke-dasharray:1 99;stroke-dashoffset:100;animation:tsint-pk var(--t) linear infinite;animation-delay:calc(var(--t) * var(--o))}
@keyframes tsint-pk{to{stroke-dashoffset:0}}
.ts-scene--integrate__sat{animation:tsint-bob 5.2s ease-in-out infinite;animation-delay:calc(var(--i) * -1.15s)}
@keyframes tsint-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.ts-scene--integrate__lb{font-size:6.5px;font-weight:600;fill:#16345f;opacity:.72;text-anchor:middle;letter-spacing:.02em}
.ts-scene--integrate__halo{fill:#3f8df0;opacity:.12;transform-box:fill-box;transform-origin:center;animation:tsint-halo 5s ease-in-out infinite;transition:opacity .6s ease}
.ts-scene--integrate__halo2{fill:none;stroke:#3f8df0;stroke-width:1;opacity:.2;transform-box:fill-box;transform-origin:center;animation:tsint-halo 5s ease-in-out -2.5s infinite}
@keyframes tsint-halo{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.ts-scene--integrate__ring{fill:none;stroke:#6ad0ff;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;animation:tsint-ring var(--t) linear infinite}
@keyframes tsint-ring{0%{transform:scale(1);opacity:.62}9%{transform:scale(1.4);opacity:0}15.5%{transform:scale(1);opacity:0}17%{opacity:.62}26%{transform:scale(1.4);opacity:0}34.5%{transform:scale(1);opacity:0}36%{opacity:.62}45%{transform:scale(1.4);opacity:0}60.5%{transform:scale(1);opacity:0}62%{opacity:.62}71%{transform:scale(1.4);opacity:0}77.5%{transform:scale(1);opacity:0}79%{opacity:.62}88%{transform:scale(1.4);opacity:0}98.5%{transform:scale(1);opacity:0}100%{transform:scale(1);opacity:.62}}
.ts-scene--integrate__hex{fill:url(#tsi-b);stroke:url(#tsi-b);stroke-width:8;stroke-linejoin:round;filter:url(#tsi-s2)}
.ts-scene--integrate__flash{fill:#fff;stroke:#fff;stroke-width:8;stroke-linejoin:round;opacity:0;animation:tsint-flash var(--t) linear infinite}
@keyframes tsint-flash{0%{opacity:.32}6%{opacity:0}17%{opacity:0}18.5%{opacity:.32}24%{opacity:0}36%{opacity:0}37.5%{opacity:.32}43%{opacity:0}62%{opacity:0}63.5%{opacity:.32}69%{opacity:0}79%{opacity:0}80.5%{opacity:.32}86%{opacity:0}98.5%{opacity:0}100%{opacity:.32}}
.ts-scene--integrate__t{font-size:8px;font-weight:700;fill:#fff;text-anchor:middle;letter-spacing:.01em}
.ts-scene--integrate__chip{font-size:7px;font-weight:600;fill:#16345f}
.ts-scene--integrate__dotp{fill:#6ba539;opacity:.4;transform-box:fill-box;transform-origin:center;animation:tsint-dot 2.6s ease-out infinite}
@keyframes tsint-dot{0%{transform:scale(1);opacity:.45}70%,100%{transform:scale(2.6);opacity:0}}
.ts-scene--integrate__odg{text-anchor:middle;font-weight:700;fill:#0a1a33;font-variant-numeric:tabular-nums;animation:tsint-od var(--t) ease-in-out infinite}
@keyframes tsint-od{0%,17%{transform:translateY(0)}20%,36%{transform:translateY(-9px)}39%,62%{transform:translateY(-18px)}65%,79%{transform:translateY(-27px)}82%,97%{transform:translateY(-36px)}100%{transform:translateY(-45px)}}
.ts-card:hover .ts-scene--integrate{--t:3.4s}
.ts-card:hover .ts-scene--integrate__lines{stroke:#6ad0ff;stroke-opacity:.75;stroke-width:3.5}
.ts-card:hover .ts-scene--integrate__halo{opacity:.22}
@media (prefers-reduced-motion:reduce){
.ts-scene--integrate__pk,.ts-scene--integrate__sat,.ts-scene--integrate__halo,.ts-scene--integrate__halo2,.ts-scene--integrate__odg,.ts-scene--integrate__dotp{animation-play-state:paused}
.ts-scene--integrate__ring,.ts-scene--integrate__flash{animation:none}
.ts-scene--integrate__dotp{opacity:0}
}

/* ===== scene mobile.css ===== */
.ts-scene--mobile{position:absolute;inset:0;overflow:hidden;container-type:size;font-family:"Plus Jakarta Sans","Inter",system-ui,sans-serif;color:#101c33}
.ts-scene--mobile__stage{position:absolute;inset:0;font-size:10px;font-size:2.632cqw;line-height:1.2;background:radial-gradient(circle,rgba(22,52,95,.15) .1em,transparent .13em) 0 0/1.6em 1.6em}
.ts-scene--mobile__glow{position:absolute;left:40%;top:-20%;width:80%;height:140%;background:radial-gradient(closest-side,rgba(63,141,240,.28),rgba(63,141,240,0))}
.ts-scene--mobile__phone{position:absolute;z-index:1;left:20.6em;top:2.4em;width:14.4em;height:30em;border-radius:2.8em;background:#0a1a33;box-shadow:0 1.4em 2.6em rgba(10,26,51,.28);transform:rotate(-6deg);animation:tsm-float 7s ease-in-out infinite}
.ts-scene--mobile__screen{position:absolute;inset:.55em;border-radius:2.3em;background:#f5f8fc;overflow:hidden}
.ts-scene--mobile__notch{position:absolute;top:1.2em;left:50%;width:4.2em;height:1em;margin-left:-2.1em;border-radius:.6em;background:#0a1a33}
.ts-scene--mobile__head{position:relative;height:5.6em;background:linear-gradient(135deg,#1b6fd6,#3f8df0);color:#fff}
.ts-scene--mobile__title{position:absolute;left:1em;bottom:.85em;font-size:1.05em;font-weight:700}
.ts-scene--mobile__ava{position:absolute;right:1.4em;bottom:1.1em;width:2.5em;height:2.5em;border-radius:50%;background:rgba(255,255,255,.28);font-size:.62em;font-weight:700;line-height:2.5em;text-align:center}
.ts-scene--mobile__list{position:absolute;top:5.6em;left:0;right:0;bottom:0;padding:.6em .6em 0;overflow:hidden}
.ts-scene--mobile__track{display:flow-root;animation:tsm-scroll 8s cubic-bezier(.65,0,.35,1) infinite}
.ts-scene--mobile__row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;align-content:center;gap:.25em .5em;height:2.9em;margin-bottom:.45em;padding:0 .6em;border-radius:.85em;background:#fff;box-shadow:0 .15em .5em rgba(10,26,51,.06)}
.ts-scene--mobile__av{grid-row:1/3;width:2.3em;height:2.3em;border-radius:50%;font-size:.68em;font-weight:700;line-height:2.3em;text-align:center;color:#fff;background:#1b6fd6}
.ts-scene--mobile__av--o{background:#f7931e}.ts-scene--mobile__av--n{background:#16345f}.ts-scene--mobile__av--g{background:#6ba539}
.ts-scene--mobile__name{grid-row:1/3;min-width:0}
.ts-scene--mobile__bar{display:block;height:.55em;border-radius:.3em;background:#e4e9f2;margin-bottom:.35em}
.ts-scene--mobile__bar--a{width:78%}.ts-scene--mobile__bar--b{width:58%}.ts-scene--mobile__bar--c{width:90%}.ts-scene--mobile__bar--d{width:66%}
.ts-scene--mobile__id{font-size:.6em;font-weight:600;color:#8a94a8}
.ts-scene--mobile__amt{grid-column:3;justify-self:end;font-size:.82em;font-weight:700}
.ts-scene--mobile__pill{grid-column:3;justify-self:end;font-size:.54em;font-weight:700;padding:.3em .75em;border-radius:1em;text-transform:uppercase;letter-spacing:.05em;background:#e4e9f2;color:#5b6780}
.ts-scene--mobile__pill--ok{background:rgba(107,165,57,.16);color:#4f8a22}
.ts-scene--mobile__pill--wait{background:rgba(247,147,30,.18);color:#c9700c}
.ts-scene--mobile__pill--paid{background:rgba(27,111,214,.14);color:#1b6fd6}
.ts-scene--mobile__fab{position:absolute;right:1em;top:14.5em;width:3.1em;height:3.1em;transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.ts-scene--mobile__fab::before,.ts-scene--mobile__dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(247,147,30,.45);opacity:0;animation:tsm-ring 2.4s ease-out infinite}
.ts-scene--mobile__fabb{position:relative;display:block;width:100%;height:100%;border-radius:50%;background:linear-gradient(135deg,#ffb454,#f7931e);box-shadow:0 .4em 1em rgba(247,147,30,.45);animation:tsm-pulse 2.4s ease-in-out infinite}
.ts-scene--mobile__fabb::after{content:"+";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:2em;font-weight:300;line-height:1;padding-bottom:.08em}
.ts-scene--mobile__toast{position:absolute;inset:3em .4em auto;display:flex;align-items:center;gap:.5em;padding:.5em .6em;border-radius:1em;background:#fff;box-shadow:0 .8em 1.8em rgba(10,26,51,.2);font-size:.78em;opacity:0;transform:translateY(-190%);animation:tsm-toast 8s ease-in-out .6s infinite}
.ts-scene--mobile__card{position:absolute;z-index:2;display:flex;align-items:center;gap:.65em;padding:.7em .9em;border-radius:1.2em;background:rgba(255,255,255,.86);box-shadow:0 .9em 2em rgba(10,26,51,.13);animation:tsm-bob 5.2s ease-in-out -1.4s infinite}
.ts-scene--mobile__card--gps{left:1.6em;top:3.2em;width:13em}
.ts-scene--mobile__card--att{left:3.6em;top:11.8em;width:13.6em;animation-duration:6.4s;animation-delay:-3.6s}
.ts-scene--mobile__ctext{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15em;white-space:nowrap;overflow:hidden}
.ts-scene--mobile__t1{font-size:.88em;font-weight:700}
.ts-scene--mobile__t2{font-size:.62em;font-weight:600;color:#7b879c}
.ts-scene--mobile__dot{position:relative;flex:none;width:.8em;height:.8em;border-radius:50%;background:#6ba539;box-shadow:0 0 0 .25em rgba(107,165,57,.2)}
.ts-scene--mobile__dot::after{inset:-.2em;background:rgba(107,165,57,.5);animation-duration:2s}
.ts-scene--mobile__tick{position:relative;flex:none;width:1.7em;height:1.7em;border-radius:50%;background:rgba(107,165,57,.15)}
.ts-scene--mobile__tick::after{content:"";position:absolute;left:.6em;top:.35em;width:.35em;height:.7em;border:solid #6ba539;border-width:0 .2em .2em 0;transform:rotate(42deg)}
.ts-scene--mobile__clock{flex:none;width:1.9em;height:1.9em;padding:.35em;border-radius:50%;background:rgba(27,111,214,.12)}
.ts-scene--mobile__clock svg{display:block;width:100%;height:100%}
.ts-scene--mobile__hand{transform-box:view-box;transform-origin:12px 12px;animation:tsm-spin 12s linear infinite}
.ts-scene--mobile__time{font-size:.95em;font-weight:800;color:#1b6fd6}
.ts-card:hover .ts-scene--mobile__toast{animation:tsm-toast-in .6s cubic-bezier(.25,1.35,.45,1) forwards}
.ts-card:hover .ts-scene--mobile__fab{transform:scale(1.2)}
@keyframes tsm-scroll{0%,18%{transform:translateY(0)}25%,43%{transform:translateY(-12.5%)}50%,68%{transform:translateY(-25%)}75%,93%{transform:translateY(-37.5%)}100%{transform:translateY(-50%)}}
@keyframes tsm-toast{0%,4%{transform:translateY(-190%);opacity:0;animation-timing-function:cubic-bezier(.25,1.35,.45,1)}11%,42%{transform:translateY(0);opacity:1;animation-timing-function:ease-in}49%,100%{transform:translateY(-190%);opacity:0}}
@keyframes tsm-toast-in{from{transform:translateY(-190%);opacity:0}to{transform:none;opacity:1}}
@keyframes tsm-float{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(-6deg) translateY(-.4em)}}
@keyframes tsm-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.7em)}}
@keyframes tsm-ring{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.1);opacity:0}}
@keyframes tsm-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes tsm-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
.ts-scene--mobile *,.ts-scene--mobile *::before,.ts-scene--mobile *::after{animation:none!important}
.ts-scene--mobile__toast{opacity:1;transform:none}
}

/* ===== scene support.css ===== */
.ts-scene--support{position:absolute;inset:0;overflow:hidden;container-type:size;font-family:"Plus Jakarta Sans","Inter",system-ui,sans-serif;color:#101c33;line-height:1}
.ts-scene--support *{box-sizing:border-box}
.ts-scene--support__st{position:absolute;left:50%;top:50%;width:38em;height:21.4em;transform:translate(-50%,-50%);font-size:10px;font-size:min(2.6316cqw,4.6729cqh)}
.ts-scene--support__st>i{position:absolute;right:-7em;top:-7em;width:22em;height:22em;border-radius:50%;background:radial-gradient(circle,#6ad0ff5c,#6ad0ff00 68%);animation:tsup-drift 10s ease-in-out infinite}
.ts-scene--support__win,.ts-scene--support__on,.ts-scene--support__bk,.ts-scene--support__hs{position:absolute;background:#fff;border:1px solid #e4e9f2;border-radius:1em;box-shadow:0 .7em 1.8em #0a1a331f}
.ts-scene--support__on,.ts-scene--support__bk,.ts-scene--support__hs{display:flex;align-items:center}
.ts-scene--support__win{left:1.5em;top:1.8em;width:24em;height:13.2em}
.ts-scene--support__bar{display:flex;align-items:center;height:2em;padding:0 .8em;border-bottom:1px solid #e4e9f2}
.ts-scene--support__bar>i{width:.5em;height:.5em;margin-right:2.2em;border-radius:50%;background:#e5432b;box-shadow:.8em 0 #ffb454,1.6em 0 #6ba539}
.ts-scene--support__bar>b{font-size:.72em}
.ts-scene--support__cols{position:relative;display:flex;gap:.6em;padding:.6em}
.ts-scene--support__col{flex:1;min-width:0;height:10em;padding:.45em;background:#f5f8fc;border-radius:.7em}
.ts-scene--support__ch{display:flex;align-items:center;justify-content:space-between;height:1.67em;margin-bottom:.17em;font-size:.6em;font-weight:800;color:#16345f}
.ts-scene--support__ch>b{min-width:1.5em;padding:.3em;border-radius:1em;text-align:center;background:#e4e9f2}
.ts-scene--support__tk{position:relative;height:2.3em;margin-top:.4em;padding:.42em .45em 0 .7em;overflow:hidden;background:#fff;border:1px solid #e4e9f2;border-radius:.55em}
.ts-scene--support__tk::before{content:"";position:absolute;inset:0 auto 0 0;width:.26em;background:#f7931e}
.ts-scene--support__tk--ip::before{background:#1b6fd6}
.ts-scene--support__tk--ok{background:#f2f8ec;border-color:#dcecc9}
.ts-scene--support__tk--ok::before{background:#6ba539}
.ts-scene--support__tk>b{position:relative;font-size:.62em;color:#16345f}
.ts-scene--support__tk>u{position:absolute;left:.7em;bottom:.42em;width:58%;height:.32em;border-radius:.2em;background:#e4e9f2}
.ts-scene--support__tk>small{position:absolute;right:.4em;top:.36em;font-size:.5em;font-weight:800;padding:.35em .65em;border-radius:1em;background:#e4e9f2;color:#16345f}
.ts-scene--support__tk>small[data-h]{background:#ffefd9;color:#d9790f}
.ts-scene--support__tk>s{position:absolute;right:.55em;top:.5em;width:.6em;height:.32em;border:solid #6ba539;border-width:0 0 .18em .18em;transform:rotate(-45deg)}
.ts-scene--support__hero{position:absolute;left:1.05em;top:7.45em;width:6.3em;box-shadow:0 .5em 1.2em #0a1a332e;animation:tsup-hero 9s ease-in-out infinite}
.ts-scene--support__hero>span{position:absolute;inset:0 auto 0 0;width:.26em;background:#1b6fd6;animation:tsup-in1 9s ease infinite}
.ts-scene--support__hero>span+span{background:#6ba539;animation-name:tsup-in2}
.ts-scene--support__hero>span+span+span{inset:0;width:auto;background:#6ba53929}
.ts-scene--support__hero>mark{position:absolute;right:1.1em;bottom:.5em;width:2.1em;height:2.1em;border-radius:50%;font-size:.42em;font-weight:800;line-height:2.1em;text-align:center;color:#fff;background:#1b6fd6;animation:tsup-in1 9s ease infinite}
.ts-scene--support__hero>s{right:.3em;top:.28em;width:2.3em;height:1em;border:0;border-radius:1em;background:#6ba539;transform:none;animation:tsup-in2 9s ease infinite}
.ts-scene--support__hero>s::after{content:"";position:absolute;inset:.26em 0 0 .9em;width:.5em;height:.26em;border:solid #fff;border-width:0 0 .16em .16em;transform:rotate(-45deg)}
.ts-scene--support__on{right:2.3em;top:2.6em;gap:.75em;height:2.9em;padding:0 1.25em 0 1em;font-size:.64em;font-weight:700;color:#16345f;border-radius:2em}
.ts-scene--support__on>i{position:relative;width:1em;height:1em;border-radius:50%;background:#6ba539}
.ts-scene--support__on b{position:absolute;inset:0;border-radius:50%;background:#6ba539;animation:tsup-pulse 2.4s ease-out infinite}
.ts-scene--support__on b+b{animation-delay:-1.2s}
.ts-scene--support__st svg{width:2.3em;height:2.3em}
.ts-scene--support__gauge{position:absolute;right:2.6em;top:4.5em;width:8em;height:8em}
.ts-scene--support__gauge>svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.ts-scene--support__gauge>i{position:absolute;inset:-28%;border-radius:50%;background:radial-gradient(circle,#f7931e80,#f7931e00 62%)}
.ts-scene--support__gauge>i,.ts-scene--support__arc--o{opacity:0;transition:opacity .45s}
.ts-scene--support__arc{stroke-dasharray:100;stroke-dashoffset:100;animation:tsup-ring 1.9s ease-out .4s forwards}
.ts-scene--support__gauge>b{position:absolute;inset:2.15em 0 auto;text-align:center;font-size:1.3em}
.ts-scene--support__gauge small{display:block;margin-top:.45em;font-size:.42em;color:#1b6fd6}
.ts-scene--support__bk{left:2.4em;top:27.2em;gap:.7em;height:3.6em;padding:0 1.4em 0 .7em;font-size:.62em;color:#16345f;border-radius:2em;animation:tsup-bk 9s ease infinite}
.ts-scene--support__hs{right:2.6em;top:14.8em;width:8em;height:4.4em;justify-content:center;gap:1em}
.ts-scene--support__hs>svg{fill:none;stroke:#16345f;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ts-scene--support__hs>span{display:flex;gap:.36em}
.ts-scene--support__hs i{width:.44em;height:2.2em;border-radius:.3em;background:linear-gradient(#6ad0ff,#1b6fd6);animation:tsup-wave 1.6s ease-in-out infinite}
.ts-scene--support__hs i+i{animation-delay:-.4s}
.ts-scene--support__hs i+i+i{animation-delay:-.8s}
.ts-scene--support__hs i+i+i+i{animation-delay:-1.2s}
.ts-card:hover .ts-scene--support__on b,.ts-card:hover .ts-scene--support__hs i{animation-duration:1s}
.ts-card:hover .ts-scene--support__gauge>i,.ts-card:hover .ts-scene--support__arc--o{opacity:1}
@keyframes tsup-hero{0%{transform:translate(0,-1.8em);opacity:0}5%,27%{transform:none;opacity:1}35%,59%{transform:translate(7.8em,-2.7em)}67%,93%{transform:translate(15.6em,0);opacity:1}97%,100%{transform:translate(15.6em,0) scale(.8);opacity:0}}
@keyframes tsup-in1{0%,33%{opacity:0}37%,100%{opacity:1}}
@keyframes tsup-in2{0%,65%{opacity:0;transform:scale(.4)}70%{opacity:1;transform:scale(1.15)}73%,100%{opacity:1;transform:none}}
@keyframes tsup-bk{0%,5%{transform:translate(-2.5em,0);opacity:0}11%,80%{transform:none;opacity:1}86%,100%{transform:translate(0,1em);opacity:0}}
@keyframes tsup-pulse{from{opacity:.6}to{transform:scale(3.2);opacity:0}}
@keyframes tsup-ring{to{stroke-dashoffset:.8}}
@keyframes tsup-wave{0%,100%{transform:scaleY(.3)}50%{transform:none}}
@keyframes tsup-drift{0%,100%{transform:none}50%{transform:translate(-1.6em,1.2em)}}
@media (prefers-reduced-motion:reduce){.ts-scene--support *{animation-play-state:paused;animation-delay:-4s!important}}

/* ===== scene web.css ===== */
.ts-scene--web{position:absolute;inset:0;overflow:hidden;container-type:size;font-family:"Plus Jakarta Sans","Inter",system-ui,sans-serif;color:#101c33}
.ts-scene--web__stage{position:absolute;inset:0;font-size:10px;font-size:2.632cqw;line-height:1.2}
.ts-scene--web__win{position:absolute;left:9em;top:1.1em;width:20em;height:19.4em;background:#fff;border-radius:1.2em;box-shadow:0 1.4em 3.2em #0a1a3329;overflow:hidden;z-index:2}
.ts-scene--web__bar{display:flex;align-items:center;height:2.3em;padding:0 .8em;border-bottom:1px solid #e4e9f2}
.ts-scene--web__dot{width:.55em;height:.55em;margin-right:2.3em;border-radius:50%;background:#e5432b;box-shadow:.9em 0 #f7931e,1.8em 0 #6ba539}
.ts-scene--web__url{flex:1;display:flex;align-items:center;justify-content:center;gap:.4em;margin:0 .5em;font-size:.64em;height:2.05em;border-radius:1.1em;background:#eef2f8;color:#3d4a62;font-weight:600}
.ts-scene--web__cart{position:relative;flex:none;width:1.6em;height:1.6em}
.ts-scene--web__badge{position:absolute;right:-.5em;top:-.45em;font-size:.6em;width:1.8em;height:1.8em;line-height:1.8em;text-align:center;border-radius:50%;background:#f7931e;color:#fff;overflow:hidden;box-shadow:0 0 0 .22em #fff;animation:ts-web-pop 8s ease infinite}
.ts-scene--web__strip{position:absolute;left:0;top:0;width:100%;animation:ts-web-count 8s linear infinite}
.ts-scene--web__strip>b{display:block}
.ts-scene--web__hero{position:relative;margin:.7em .8em 0;height:3.5em;border-radius:.8em;padding:.7em .9em;color:#fff;overflow:hidden;background:linear-gradient(110deg,#0a1a33,#1b6fd6 60%,#6ad0ff);background-size:220% 100%;animation:ts-web-shine 9s ease-in-out infinite alternate}
.ts-scene--web__hero:after{content:"";position:absolute;right:-1.4em;top:-1.8em;width:5em;height:5em;border-radius:50%;background:#6ad0ff52}
.ts-scene--web__hero>b{display:block;font-size:.74em}
.ts-scene--web__hero>i{display:block;width:6em;height:.3em;margin-top:.45em;border-radius:1em;background:#fff8}
.ts-scene--web__hero>em{position:absolute;right:.9em;bottom:.65em;font-style:normal;font-size:.54em;font-weight:700;padding:.4em 1em;border-radius:1em;background:#f7931e;color:#fff}
.ts-scene--web__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6em;padding:.6em .8em}
.ts-scene--web__p{position:relative;border-radius:.7em;border:1px solid #e4e9f2;padding:.4em}
.ts-scene--web__p:after{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:0 .8em 1.6em #0a1a332e,0 0 0 1.5px #3f8df0;opacity:0}
.ts-scene--web__p>i{display:block;height:2.2em;border-radius:.5em;background:#e3f1ff;color:#1b6fd6;position:relative}
.ts-scene--web__p>i:after{content:"";position:absolute;left:50%;top:50%;width:1.3em;height:1.3em;border-radius:.4em;transform:translate(-50%,-50%) rotate(14deg);background:currentColor;opacity:.4}
.ts-scene--web__p>s{display:block;height:.3em;width:62%;margin:.4em 0 .3em;border-radius:1em;background:#e4e9f2}
.ts-scene--web__p>b{display:block;font-size:.6em}
.ts-scene--web__p:nth-child(2)>i{background:#fff0dc;color:#f7931e}
.ts-scene--web__p:nth-child(3n)>i{background:#e9f5dd;color:#6ba539}
.ts-scene--web__p:nth-child(4)>i{background:#ffe6e1;color:#e5432b}
.ts-scene--web__p:nth-child(5)>i{background:#e6f8ff;color:#3f8df0}
.ts-scene--web__p:nth-child(2n+1)>i:after{border-radius:50%}
.ts-scene--web__p:nth-child(4n+2){animation:ts-web-lift 8s ease infinite;z-index:1}
.ts-scene--web__p:nth-child(4n+2):after{animation:ts-web-shade 8s ease infinite}
.ts-scene--web__p:nth-child(6),.ts-scene--web__p:nth-child(6):after{animation-delay:-5.76s}
.ts-scene--web__toast{position:absolute;left:50%;bottom:1.3em;display:flex;align-items:center;gap:.45em;padding:.5em .9em .5em .7em;border-radius:2em;background:#6ba539;color:#fff;font-size:.66em;font-weight:700;box-shadow:0 .6em 1.6em #0a1a3338;opacity:0;animation:ts-web-toast 8s ease infinite}
.ts-scene--web__fly{position:absolute;left:18.5em;top:.25em;width:.8em;height:.8em;border-radius:50%;background:#f7931e;opacity:0;animation:ts-web-fly 8s ease-in-out infinite;z-index:3}
.ts-scene--web__cursor{position:absolute;left:0;top:0;width:1.5em;height:1.5em;transform-origin:0 0;z-index:4;animation:ts-web-cursor 8s ease-in-out infinite}
.ts-scene--web__sync,.ts-scene--web__seo{position:absolute;background:#fff;border-radius:1em;box-shadow:0 .8em 2em #0a1a331f;z-index:1}
.ts-scene--web__sync{left:.7em;top:14em;width:10.2em;padding:.55em .6em;display:flex;align-items:center;gap:.45em}
.ts-scene--web__spin{flex:none;width:1.2em;height:1.2em;padding:.3em;border-radius:50%;background:#e3f1ff}
.ts-scene--web__spin>svg{animation:ts-web-spin 3.2s linear infinite}
.ts-scene--web__synctext{font-size:.64em;line-height:1.3}
.ts-scene--web__synctext>b{display:block}
.ts-scene--web__synctext>em{display:block;font-style:normal;color:#6b7a90}
.ts-scene--web__seo{left:28.4em;top:13.2em;width:8em;height:7.4em}
.ts-scene--web__seo>svg{display:block;width:4.8em;margin:.5em auto 0}
.ts-scene--web__ring,.ts-scene--web__glow{stroke-dasharray:100.5;animation:ts-web-ring 8s ease infinite}
.ts-scene--web__glow{opacity:0;transition:opacity .4s}
.ts-card:hover .ts-scene--web__spin>svg{animation-duration:.8s}
.ts-card:hover .ts-scene--web__glow{opacity:.55}
@keyframes ts-web-cursor{0%,3%{transform:translate(21em,12em)}14%{transform:translate(10.3em,9.5em)}17%{transform:translate(10.3em,9.5em) scale(.8)}20%,31%{transform:translate(10.3em,9.5em)}42%{transform:translate(16.7em,14.9em)}45%{transform:translate(16.7em,14.9em) scale(.8)}48%,62%{transform:translate(16.7em,14.9em)}72%,100%{transform:translate(21em,12em)}}
@keyframes ts-web-lift{16%,35%{transform:none}19%,31%{transform:translateY(-.4em) scale(1.05)}}
@keyframes ts-web-shade{16%,35%{opacity:0}19%,31%{opacity:1}}
@keyframes ts-web-fly{16%{transform:translate(-8.9em,9em) scale(.4);opacity:0}18%{transform:translate(-8.9em,9em);opacity:1}23%{transform:none;opacity:1}25%,44%{transform:scale(.3);opacity:0}44.1%{transform:translate(-2.6em,14.4em) scale(.4)}45.5%{transform:translate(-2.6em,14.4em);opacity:1}51%{transform:none;opacity:1}53%{transform:scale(.3);opacity:0}}
@keyframes ts-web-count{22.9%{transform:none}23%,50.9%{transform:translateY(-1.8em)}51%,95.9%{transform:translateY(-3.6em)}96%{transform:none}}
@keyframes ts-web-pop{22%,28%,50%,56%{transform:scale(1)}24%,52%{transform:scale(1.4)}}
@keyframes ts-web-toast{0%,53%{opacity:0;transform:translate(-50%,1.6em)}57%,82%{opacity:1;transform:translate(-50%,0)}87%{opacity:0;transform:translate(-50%,1.6em)}}
@keyframes ts-web-shine{to{background-position:100% 0}}
@keyframes ts-web-spin{to{transform:rotate(360deg)}}
@keyframes ts-web-ring{0%{stroke-dashoffset:100.5}40%,88%{stroke-dashoffset:2}100%{stroke-dashoffset:100.5}}
@media (prefers-reduced-motion:reduce){.ts-scene--web__a,.ts-scene--web__a:after,.ts-scene--web__a>svg{animation-play-state:paused!important;animation-delay:-4.6s!important}.ts-scene--web__p:nth-child(6),.ts-scene--web__p:nth-child(6):after{animation-delay:-2.36s!important}}