/* ═══════════════════════════════════════════════════════
   Tríade TSO® — Interactive Triangle
   Epic page · Dark hero · Glow effects · 18 services
   ═══════════════════════════════════════════════════════ */

/* ── Hero ── */
.ts-hero { padding: var(--page-top) 0 clamp(4rem,8vw,6rem); background: var(--ink); color: var(--white); }
.ts-hero-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.ts-hero h1 { color: var(--white); margin-bottom: 1.2rem; }
.ts-hero h1 em { color: var(--gold-soft); }
.ts-hero-sub { font-size: clamp(.95rem,1.4vw,1.08rem); color: rgba(255,255,255,.55); line-height: 1.72; margin-bottom: 2rem; }
.ts-hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.ts-hero .btn-ghost { border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.7); }

/* ── Interactive Triangle ── */
.ts-triangle-wrap { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1; margin: 0 auto; }
.ts-svg { width: 100%; height: 100%; }
.ts-glow {
  position: absolute; width: 300px; height: 300px; border-radius: 50%;
  opacity: 0; transition: opacity .6s ease; pointer-events: none; filter: blur(60px);
}
.ts-glow.is-active { opacity: 1; }
.ts-glow--l { top: -10%; left: 50%; transform: translateX(-50%); background: rgba(200,169,110,.2); }
.ts-glow--c { bottom: -5%; left: -5%; background: rgba(167,139,250,.2); }
.ts-glow--e { bottom: -5%; right: -5%; background: rgba(96,165,250,.2); }

.ts-node {
  position: absolute; display: flex; align-items: center; gap: .6rem;
  padding: .6rem 1rem; border-radius: var(--r-lg);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06);
  cursor: pointer; transition: all .3s; user-select: none;
}
.ts-node:hover, .ts-node.is-active {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12);
  transform: translateY(-2px);
}
.ts-node--l { top: 2%; left: 50%; transform: translateX(-50%); }
.ts-node--l:hover, .ts-node--l.is-active { transform: translateX(-50%) translateY(-2px); }
.ts-node--c { bottom: 6%; left: 2%; }
.ts-node--e { bottom: 6%; right: 2%; }
.ts-node-letter {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  font: 800 .9rem var(--sans);
}
.ts-node strong { font: 700 .88rem var(--sans); color: var(--white); }
.ts-node-entity { font: 500 .65rem var(--sans); color: rgba(255,255,255,.35); display: none; }
.ts-node.is-active .ts-node-entity { display: block; }

/* ── Pillar sections ── */
.ts-pillar { padding: clamp(4rem,8vw,6rem) 0; scroll-margin-top: 80px; }
.ts-pillar:nth-child(odd) { background: var(--white); }
.ts-pillar:nth-child(even) { background: var(--cream); }
.ts-pillar-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.ts-pillar-letter {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center;
  font: 800 1.2rem var(--sans); flex-shrink: 0;
}
.ts-pillar-head h2 { margin-bottom: 0; font-size: clamp(1.6rem,3vw,2.2rem); }
.ts-pillar-entity { font: 600 .72rem var(--sans); color: var(--quiet); text-transform: uppercase; letter-spacing: .06em; }
.ts-pillar-tagline { font-size: 1rem; line-height: 1.75; color: var(--muted); max-width: 700px; margin-bottom: 2rem; }
.ts-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.ts-service {
  display: flex; align-items: center; gap: .6rem;
  padding: .8rem 1rem; background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--r); font: 600 .85rem var(--sans); color: var(--ink);
}
.ts-pillar:nth-child(even) .ts-service { background: var(--white); }
.ts-service-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── Failure combos ── */
.ts-failures { padding: clamp(4rem,8vw,6rem) 0; background: var(--ink); color: var(--white); }
.ts-failures h2 { color: var(--white); margin-bottom: 2rem; }
.ts-failures h2 em { color: var(--gold-soft); }
.ts-failures-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ts-failure {
  padding: 1.5rem; border-radius: var(--r-lg);
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
  border-left: 3px solid;
}
.ts-failure strong { display: block; font: 700 .9rem var(--sans); color: var(--white); margin-bottom: .5rem; }
.ts-failure p { font-size: .85rem; color: rgba(255,255,255,.55); line-height: 1.6; margin-bottom: .6rem; }
.ts-failure-missing { font: 700 .68rem var(--sans); color: rgba(255,255,255,.3); text-transform: uppercase; letter-spacing: .06em; }

/* ── Ecosystem ── */
.ts-eco { padding: clamp(4rem,8vw,6rem) 0; background: var(--cream); }
.ts-eco h2 { margin-bottom: 2rem; }
.ts-eco h2 em { color: var(--gold); }
.ts-eco-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ts-eco-card {
  padding: 1.8rem; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); border-top: 3px solid;
}
.ts-eco-card strong { display: block; font: 700 1.05rem var(--sans); margin-bottom: .4rem; }
.ts-eco-card p { font-size: .84rem; color: var(--muted); line-height: 1.6; margin-bottom: .6rem; }
.ts-eco-card a { font: 600 .78rem var(--sans); color: var(--gold); text-decoration: none; }

/* ── Programs mapping ── */
.ts-programs { padding: clamp(4rem,8vw,6rem) 0; background: var(--white); }
.ts-programs h2 { margin-bottom: 2rem; }
.ts-programs h2 em { color: var(--gold); }
.ts-programs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.ts-prog {
  display: block; padding: 1.6rem; background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--r-lg); text-decoration: none; transition: all .3s; text-align: center;
}
.ts-prog:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--gold-soft); }
.ts-prog-dims { display: flex; gap: 4px; justify-content: center; margin-bottom: .8rem; }
.ts-prog-dims span { width: 12px; height: 12px; border-radius: 50%; }
.ts-prog strong { display: block; font: 700 1.1rem var(--sans); color: var(--ink); margin-bottom: .2rem; }
.ts-prog > span { font-size: .78rem; color: var(--muted); }

/* ── FAQ ── */
.ts-faq { padding: clamp(4rem,8vw,5rem) 0; background: var(--cream); }
.ts-faq h2 { margin-bottom: 1.5rem; }
.ts-faq-list { display: flex; flex-direction: column; gap: .3rem; max-width: 800px; }
.ts-faq-item { background: var(--white); border-radius: var(--r); border: 1px solid var(--line); overflow: hidden; }
.ts-faq-item[open] { border-color: var(--gold-soft); }
.ts-faq-item summary { cursor: pointer; padding: 1rem 1.4rem; font: 600 .88rem var(--sans); color: var(--ink); list-style: none; display: flex; align-items: center; justify-content: space-between; }
.ts-faq-item summary::-webkit-details-marker { display: none; }
.ts-faq-answer { padding: 0 1.4rem 1rem; }
.ts-faq-answer p { font-size: .85rem; color: var(--muted); line-height: 1.7; }

/* ── CTA ── */
.ts-cta { padding: clamp(5rem,10vw,8rem) 0; background: var(--ink); color: var(--white); text-align: center; }
.ts-cta h2 { color: var(--white); max-width: 700px; margin: 0 auto .8rem; }
.ts-cta h2 em { color: var(--gold-soft); }
.ts-cta-sub { font: italic 400 1rem/1.6 var(--serif); color: rgba(255,255,255,.45); margin-bottom: 2rem; }
.ts-cta-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.ts-cta .btn-ghost { border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.7); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .ts-hero-layout { grid-template-columns: 1fr; }
  .ts-triangle-wrap { max-width: 340px; }
  .ts-services { grid-template-columns: 1fr 1fr; }
  .ts-failures-grid { grid-template-columns: 1fr; }
  .ts-eco-grid { grid-template-columns: 1fr; }
  .ts-programs-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .ts-services { grid-template-columns: 1fr; }
  .ts-programs-grid { grid-template-columns: 1fr; }
  .ts-hero-actions { flex-direction: column; }
  .ts-cta-actions { flex-direction: column; align-items: center; }
  .ts-node-entity { display: none !important; }
}