/* ==========================================================================
   CYNRIN Technology Showcase layer (v1.0.0)
   Scope: /tech hub (.ts-hub) and /tech/{slug} pages (.ts-page) only.
   Sits above patch.css / design-tokens.css. Straight corners, indigo→violet
   VI, restrained elevation. Every decorative element is theme-specific so
   none of these classes leak into lp-/pv2/ pages.
   ========================================================================== */

/* ---------------------------------------------------------------- common */
.ts-wrap { width:100%; max-width:1200px; margin:0 auto; padding:0 24px; }

.ts-crumbs { padding:16px 0 0; }
.ts-crumbs ol { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; font-size:13px; color:var(--c-muted); }
.ts-crumbs li { display:inline-flex; align-items:center; gap:8px; }
.ts-crumbs li:not(:last-child)::after { content:"/"; color:var(--c-disabled); }
.ts-crumbs a { color:var(--c-brand); text-decoration:none; }
.ts-crumbs a:hover { text-decoration:underline; }

.ts-eyebrow { margin:0 0 14px; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#a5b4fc; display:inline-flex; align-items:center; gap:10px; }
.ts-eyebrow::before { content:""; width:22px; height:2px; background:var(--c-grad); display:inline-block; }

.ts-actions { display:flex; flex-wrap:wrap; gap:14px; }
.ts-btn { display:inline-flex; align-items:center; gap:8px; height:48px; padding:0 26px; font-size:14px; font-weight:700; border:1px solid transparent; cursor:pointer; transition:transform .2s var(--c-ease), box-shadow .2s var(--c-ease), background .2s var(--c-ease); }
.ts-btn-primary { background:var(--c-grad); color:#fff; box-shadow:var(--c-shadow-brand); }
.ts-btn-primary:hover { transform:translateY(-2px); color:#fff; }
.ts-btn-on-dark { background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.28); }
.ts-btn-on-dark:hover { background:rgba(255,255,255,.16); color:#fff; }
.ts-btn-outline { background:transparent; color:var(--c-brand); border-color:var(--c-border-strong); }
.ts-btn-outline:hover { border-color:var(--c-brand); color:var(--c-brand-strong); }

.ts-section { padding:72px 0; }
.ts-section.alt { background:var(--c-softer); }
.ts-section-head { max-width:760px; margin:0 0 44px; }
.ts-section-head.center { margin-inline:auto; text-align:center; }
.ts-section-head .ts-kicker { margin:0 0 10px; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--c-violet); }
.ts-section-head h2 { font-size:clamp(26px,3.2vw,36px); margin:0 0 12px; }
.ts-section-head p { margin:0; color:var(--c-muted); font-size:16px; line-height:1.7; }

.ts-anchornav { display:flex; flex-wrap:wrap; gap:10px; padding:22px 0 6px; }
.ts-anchornav a { font-size:13px; font-weight:600; color:var(--c-brand-strong); text-decoration:none; background:var(--c-brand-soft); border:1px solid #e0e7ff; padding:8px 18px; transition:.18s ease; }
.ts-anchornav a:hover { background:#e0e7ff; border-color:#c7d2fe; }

/* ---------------------------------------------------------------- hero */
.ts-hero { position:relative; overflow:hidden; color:#f5f7ff; padding:84px 0 76px; background:#0d1226; }
.ts-hero::before { content:""; position:absolute; inset:0; background:
   radial-gradient(620px 380px at 82% -8%, rgba(124,58,237,.42), transparent 62%),
   radial-gradient(520px 340px at 6% 108%, rgba(79,70,229,.34), transparent 60%),
   linear-gradient(160deg,#0d1226 0%,#171a35 52%,#221b4a 100%); }
.ts-hero::after { content:""; position:absolute; inset:0; opacity:.5;
   background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
   background-size:56px 56px; -webkit-mask-image:linear-gradient(180deg,#000,transparent 78%); mask-image:linear-gradient(180deg,#000,transparent 78%); }
.ts-hero-inner { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); gap:52px; align-items:center; }
.ts-hero-copy h1 { color:#fff; font-size:clamp(32px,4.4vw,52px); line-height:1.1; letter-spacing:-.02em; margin:0 0 18px; }
.ts-hero-copy .ts-lead { margin:0 0 28px; max-width:58ch; font-size:17px; line-height:1.78; color:#c7cee8; }
.ts-hero-media { position:relative; }
.ts-hero-media img { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; border:1px solid rgba(255,255,255,.14); box-shadow:0 30px 70px rgba(5,6,20,.55); }
.ts-hero-media figcaption { position:absolute; left:0; bottom:0; padding:8px 14px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#cdd4f4; background:rgba(10,12,30,.72); border-top:1px solid rgba(255,255,255,.14); border-right:1px solid rgba(255,255,255,.14); }
/* child-page hero uses a warmer tint while staying on-brand */
.ts-hero.ts-hero--warm::before { background:
   radial-gradient(620px 380px at 84% -10%, rgba(236,172,90,.26), transparent 60%),
   radial-gradient(520px 340px at 4% 110%, rgba(124,58,237,.34), transparent 60%),
   linear-gradient(160deg,#1a1420 0%,#231c33 55%,#2a2148 100%); }

/* ---------------------------------------------------------------- rich / split */
.ts-rich { max-width:820px; }
.ts-rich p { margin:0 0 16px; font-size:15.5px; line-height:1.82; color:var(--c-body); }
.ts-rich ul { margin:0 0 18px; padding:0; list-style:none; display:grid; gap:12px; }
.ts-rich li { position:relative; padding-left:26px; font-size:15px; line-height:1.75; color:var(--c-body); }
.ts-rich li::before { content:""; position:absolute; left:2px; top:.62em; width:10px; height:10px; background:var(--c-grad); }
.ts-rich li strong { color:var(--c-ink); }
.ts-rich a { color:var(--c-brand); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

.ts-split { display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:48px; align-items:center; }
.ts-split.reverse { direction:rtl; }
.ts-split.reverse > * { direction:ltr; }
.ts-figure img { width:100%; object-fit:cover; display:block; border:1px solid var(--c-border); box-shadow:var(--c-shadow-md); }
.ts-figure.ratio-16x9 img { aspect-ratio:16/9; }
.ts-figure.ratio-3x2 img { aspect-ratio:3/2; }
.ts-figure figcaption { margin-top:10px; font-size:12.5px; color:var(--c-faint); line-height:1.6; }
.ts-figure .ts-figure-tag { display:inline-block; margin-bottom:0; padding:5px 10px; font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:var(--c-grad); }

/* ---------------------------------------------------------------- flow (how it works) */
.ts-flow { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--c-border); background:var(--c-white); }
.ts-flow-step { position:relative; padding:30px 26px 28px; border-right:1px solid var(--c-border); }
.ts-flow-step:last-child { border-right:0; }
.ts-flow-step .ts-flow-no { display:inline-flex; align-items:center; gap:10px; margin-bottom:16px; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-violet); }
.ts-flow-step .ts-flow-no b { display:inline-grid; place-items:center; width:30px; height:30px; font-size:13px; color:#fff; background:var(--c-grad); }
.ts-flow-step h3 { margin:0 0 10px; font-size:18px; }
.ts-flow-step p { margin:0; font-size:14px; line-height:1.72; color:var(--c-muted); }
.ts-flow-step::after { content:""; position:absolute; top:44px; right:-7px; z-index:2; width:13px; height:13px; background:var(--c-white); border-top:1px solid var(--c-border); border-right:1px solid var(--c-border); transform:rotate(45deg); }
.ts-flow-step:last-child::after { display:none; }

/* ---------------------------------------------------------------- cards */
.ts-grid { display:grid; gap:20px; }
.ts-grid-3 { grid-template-columns:repeat(3,1fr); }
.ts-grid-2 { grid-template-columns:repeat(2,1fr); }
.ts-card { display:block; position:relative; background:var(--c-white); border:1px solid var(--c-border); padding:26px; transition:transform .25s var(--c-ease), box-shadow .25s var(--c-ease), border-color .25s var(--c-ease); }
a.ts-card:hover { transform:translateY(-3px); box-shadow:var(--c-shadow-lg); border-color:#d6d8fb; }
.ts-card h3 { margin:0 0 10px; font-size:18px; }
.ts-card p { margin:0 0 16px; font-size:14px; line-height:1.7; color:var(--c-muted); }
.ts-card .ts-card-link { font-size:13px; font-weight:700; color:var(--c-brand); display:inline-flex; gap:7px; align-items:center; }
a.ts-card:hover .ts-card-link { gap:11px; }
.ts-card .ts-card-icon { width:38px; height:38px; margin-bottom:16px; display:grid; place-items:center; background:var(--c-brand-soft); color:var(--c-brand); }
.ts-card .ts-card-icon svg { width:20px; height:20px; }

/* platform cards with thumbnail */
.ts-pcard { padding:0; overflow:hidden; }
.ts-pcard .ts-pcard-media { aspect-ratio:16/9; overflow:hidden; border-bottom:1px solid var(--c-border); background:#0d1226; }
.ts-pcard .ts-pcard-media img { width:100%; height:100%; object-fit:cover; transition:transform .4s var(--c-ease); }
a.ts-pcard:hover .ts-pcard-media img { transform:scale(1.045); }
.ts-pcard .ts-pcard-body { padding:22px 24px 24px; }
.ts-pcard h3 { font-size:17px; }

/* ---------------------------------------------------------------- specs / signal chips */
.ts-specrow { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--c-border); background:var(--c-white); }
.ts-specrow > div { padding:24px 26px; border-right:1px solid var(--c-border); }
.ts-specrow > div:last-child { border-right:0; }
.ts-specrow strong { display:block; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--c-violet); margin-bottom:8px; }
.ts-specrow span { font-size:14px; color:var(--c-muted); line-height:1.65; }

.ts-diagram { margin:0; background:#fff; border:1px solid var(--c-border); box-shadow:var(--c-shadow-md); padding:18px; }
.ts-diagram svg { display:block; width:100%; height:auto; }
.ts-diagram figcaption { margin-top:12px; font-size:12.5px; color:var(--c-faint); line-height:1.6; }
.ts-panel { background:var(--c-white); border:1px solid var(--c-border); padding:28px; box-shadow:var(--c-shadow-sm); }
.ts-panel h3 { margin:0 0 6px; font-size:17px; }
.ts-panel > p { margin:0 0 16px; font-size:13.5px; line-height:1.7; color:var(--c-muted); }

.ts-chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.ts-chip { font-size:12.5px; font-weight:600; color:var(--c-body); background:var(--c-white); border:1px solid var(--c-border-strong); padding:7px 14px; }
.ts-chip::before { content:""; display:inline-block; width:7px; height:7px; margin-right:9px; background:var(--c-grad); vertical-align:1px; }
a.ts-chip { color:var(--c-body); text-decoration:none; transition:border-color .18s ease, color .18s ease, background .18s ease; }
a.ts-chip:hover { border-color:var(--c-brand); color:var(--c-brand-strong); background:var(--c-brand-soft); }

/* ---------------------------------------------------------------- FAQ */
.ts-faq { border-top:1px solid var(--c-border); max-width:880px; }
.ts-faq details { border-bottom:1px solid var(--c-border); }
.ts-faq summary { list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative; font-size:16px; font-weight:700; color:var(--c-ink); line-height:1.5; }
.ts-faq summary::-webkit-details-marker { display:none; }
.ts-faq summary::after { content:"+"; position:absolute; right:8px; top:50%; transform:translateY(-50%); font-size:24px; font-weight:400; color:var(--c-brand); transition:transform .2s var(--c-ease); }
.ts-faq details[open] summary::after { transform:translateY(-50%) rotate(45deg); }
.ts-faq-a { padding:0 40px 24px 0; }
.ts-faq-a p { margin:0 0 10px; font-size:14.5px; line-height:1.8; color:var(--c-muted); }
.ts-faq-a a { color:var(--c-brand); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.ts-faq-a p:last-child { margin-bottom:0; }

/* ---------------------------------------------------------------- CTA band */
.ts-cta { position:relative; overflow:hidden; background:#0d1226; color:#f5f7ff; padding:64px 0; }
.ts-cta::before { content:""; position:absolute; inset:0; background:
   radial-gradient(560px 300px at 90% 0%, rgba(124,58,237,.38), transparent 60%),
   linear-gradient(135deg,#0d1226,#1d1a40); }
.ts-cta-inner { position:relative; z-index:1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px; }
.ts-cta h2 { color:#fff; font-size:clamp(24px,3vw,32px); margin:0 0 10px; }
.ts-cta p { margin:0; max-width:62ch; color:#c2c9e6; font-size:15px; line-height:1.7; }

/* ---------------------------------------------------------------- video */
.ts-video { position:relative; border:1px solid var(--c-border); box-shadow:var(--c-shadow-md); background:#000; }
.ts-video-poster { position:absolute; top:0; left:0; right:0; z-index:2; aspect-ratio:16/9; display:block; cursor:pointer; }
.ts-video-poster[hidden] { display:none; }
.ts-video-poster img { width:100%; height:100%; object-fit:cover; display:block; }
.ts-video-poster::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,10,26,.12),rgba(8,10,26,.42)); }
.ts-video-play { position:absolute; z-index:3; top:50%; left:50%; transform:translate(-50%,-50%); width:74px; height:74px; display:grid; place-items:center; background:rgba(79,70,229,.92); box-shadow:0 14px 40px rgba(10,12,40,.5); transition:transform .2s var(--c-ease), background .2s var(--c-ease); }
.ts-video-poster:hover .ts-video-play { transform:translate(-50%,-50%) scale(1.08); background:#7c3aed; }
.ts-video-play svg { width:26px; height:26px; margin-left:3px; }
.ts-video video { position:relative; z-index:1; width:100%; aspect-ratio:16/9; display:block; background:#000; }
.ts-video-cap { padding:12px 16px; background:var(--c-white); border:1px solid var(--c-border); border-top:0; font-size:13px; color:var(--c-muted); }

/* ---------------------------------------------------------------- HUB */
.ts-hub-hero { position:relative; overflow:hidden; color:#f5f7ff; padding:92px 0 84px; text-align:center; background:#0d1226; }
.ts-hub-hero::before { content:""; position:absolute; inset:0; background:
   radial-gradient(720px 420px at 50% -16%, rgba(124,58,237,.44), transparent 62%),
   radial-gradient(520px 360px at 8% 110%, rgba(79,70,229,.32), transparent 60%),
   radial-gradient(520px 360px at 92% 110%, rgba(59,130,246,.22), transparent 60%),
   linear-gradient(180deg,#0d1226,#171a35 60%,#1e1a42); }
.ts-hub-hero::after { content:""; position:absolute; inset:0; opacity:.45;
   background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
   background-size:56px 56px; -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 0%,#000,transparent); mask-image:radial-gradient(ellipse 70% 80% at 50% 0%,#000,transparent); }
.ts-hub-hero .ts-wrap { position:relative; z-index:1; }
.ts-hub-hero .ts-eyebrow { justify-content:center; }
.ts-hub-hero h1 { color:#fff; font-size:clamp(34px,5vw,58px); line-height:1.08; letter-spacing:-.025em; margin:0 auto 20px; max-width:22ch; }
.ts-hub-hero .ts-lead { max-width:74ch; margin:0 auto 32px; font-size:17px; line-height:1.8; color:#c7cee8; }
.ts-hub-hero .ts-actions { justify-content:center; }
.ts-hub-stats { position:relative; z-index:1; margin-top:56px; display:grid; grid-template-columns:repeat(4,1fr); border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05); backdrop-filter:blur(4px); }
.ts-hub-stats > div { padding:22px 18px; border-right:1px solid rgba(255,255,255,.14); }
.ts-hub-stats > div:last-child { border-right:0; }
.ts-hub-stats strong { display:block; font-size:28px; font-weight:800; color:#fff; letter-spacing:-.02em; }
.ts-hub-stats span { font-size:12.5px; color:#aeb6d8; letter-spacing:.04em; }

/* hub tech tiles */
.ts-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
a.ts-tile { display:flex; flex-direction:column; position:relative; overflow:hidden; background:var(--c-white); border:1px solid var(--c-border); transition:transform .25s var(--c-ease), box-shadow .25s var(--c-ease), border-color .25s var(--c-ease); }
a.ts-tile:hover { transform:translateY(-4px); box-shadow:var(--c-shadow-lg); border-color:#d6d8fb; }
.ts-tile-media { position:relative; aspect-ratio:16/9; overflow:hidden; background:#0d1226; }
.ts-tile-media img { width:100%; height:100%; object-fit:cover; transition:transform .45s var(--c-ease); }
a.ts-tile:hover .ts-tile-media img { transform:scale(1.05); }
.ts-tile-media .ts-tile-no { position:absolute; top:12px; left:12px; z-index:2; padding:5px 10px; font-size:11px; font-weight:700; letter-spacing:.1em; color:#fff; background:rgba(13,18,38,.78); border:1px solid rgba(255,255,255,.22); }
.ts-tile-body { padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.ts-tile-body h3 { margin:0 0 8px; font-size:18px; }
.ts-tile-body p { margin:0 0 16px; font-size:13.5px; line-height:1.7; color:var(--c-muted); flex:1; }
.ts-tile-body .ts-card-link { margin-top:auto; }

/* hub band split (video) */
.ts-band { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center; }

/* ---------------------------------------------------------------- responsive */
@media (max-width:960px){
  .ts-hero { padding:64px 0 58px; }
  .ts-hero-inner { grid-template-columns:1fr; gap:36px; }
  .ts-split, .ts-band { grid-template-columns:1fr; gap:32px; }
  .ts-split.reverse { direction:ltr; }
  .ts-flow { grid-template-columns:1fr; }
  .ts-flow-step { border-right:0; border-bottom:1px solid var(--c-border); }
  .ts-flow-step:last-child { border-bottom:0; }
  .ts-flow-step::after { display:none; }
  .ts-grid-3 { grid-template-columns:1fr 1fr; }
  .ts-tiles { grid-template-columns:1fr 1fr; }
  .ts-specrow, .ts-hub-stats { grid-template-columns:1fr 1fr; }
  .ts-specrow > div:nth-child(2) { border-right:0; }
  .ts-specrow > div:nth-child(-n+2) { border-bottom:1px solid var(--c-border); }
  .ts-hub-stats > div:nth-child(2) { border-right:0; }
  .ts-hub-stats > div:nth-child(-n+2) { border-bottom:1px solid rgba(255,255,255,.14); }
  .ts-section { padding:56px 0; }
}
@media (max-width:600px){
  .ts-wrap { padding:0 20px; }
  .ts-grid-3, .ts-grid-2, .ts-tiles { grid-template-columns:1fr; }
  .ts-specrow, .ts-hub-stats { grid-template-columns:1fr; }
  .ts-specrow > div { border-right:0 !important; border-bottom:1px solid var(--c-border); }
  .ts-specrow > div:last-child { border-bottom:0; }
  .ts-hub-stats > div { border-right:0 !important; border-bottom:1px solid rgba(255,255,255,.14); }
  .ts-hub-stats > div:last-child { border-bottom:0; }
  .ts-cta-inner { flex-direction:column; align-items:flex-start; }
  .ts-video-play { width:60px; height:60px; }
}