/* ============================================================
   Tarahestan Design System (trn-ds)
   Ported from trn-new-ui/css/style.css — warm light surfaces,
   dark ink, gold accents. Adapted for fa/RTL + IranSans.
   All rules are scoped under body.trn-ds so pages opt in one
   at a time without affecting the rest of the site.
   ============================================================ */

/* ============ Tokens / base ============ */
body.trn-ds {
  --bg: #fafaf9;
  --bg-soft: #f5f1e8;
  --panel: #ffffff;
  --ink: #ffffff;
  --cream: #1c1917;
  --muted: #57534e;
  --dim: #78716c;
  --gold: #854d0e;
  --gold-bright: #713f12;
  --gold-deep: #5a3210;
  --gold-surface: #f5e7be;
  --gold-surface-hover: #ead39a;
  --on-gold: #1c1917;
  --hair: rgba(28, 25, 23, 0.16);
  --hair-soft: rgba(28, 25, 23, 0.09);
  --sans: 'TrNFont1', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, 'Noto Sans', sans-serif;
  --mono: 'TrNFont1', ui-monospace, 'Consolas', monospace;
  --ease: cubic-bezier(0.22, 0.9, 0.3, 1);

  background: var(--bg);
  color: var(--cream);
  font-family: var(--sans);
  line-height: 1.75;
  color-scheme: light;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Light scrollbar aligned with the page surfaces */
html:has(body.trn-ds) {
  scrollbar-color: #a8a29e #fafaf9;
}
html:has(body.trn-ds)::-webkit-scrollbar-track,
body.trn-ds::-webkit-scrollbar-track,
body.trn-ds *::-webkit-scrollbar-track {
  background: #fafaf9;
}
html:has(body.trn-ds)::-webkit-scrollbar-thumb,
body.trn-ds::-webkit-scrollbar-thumb,
body.trn-ds *::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #a8a29e 0%, #d6d3d1 100%);
  border: 2px solid #fafaf9;
  border-radius: 999px;
}
html:has(body.trn-ds)::-webkit-scrollbar-thumb:hover,
body.trn-ds::-webkit-scrollbar-thumb:hover,
body.trn-ds *::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #78716c 0%, #a8a29e 100%);
}

body.trn-ds h1,
body.trn-ds h2,
body.trn-ds h3 {
  font-weight: 700;
  line-height: 1.45;
}

body.trn-ds section {
  position: relative;
}

body.trn-ds .eyebrow {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 22px;
}

body.trn-ds .lede {
  color: var(--muted);
  font-size: 15px;
  max-width: 52ch;
}

/* Buttons: small pills (overrides app-components .btn on trn-ds pages) */
body.trn-ds .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--cream);
  padding: 10px 20px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s, color 0.3s;
  white-space: nowrap;
}
body.trn-ds .btn:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
  filter: none;
}
body.trn-ds .btn-solid {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(28, 25, 23, 0.28);
  backdrop-filter: blur(6px);
}
body.trn-ds .btn-gold {
  background: rgba(161, 98, 7, 0.12);
  border-color: rgba(161, 98, 7, 0.5);
  color: var(--gold-bright);
}
body.trn-ds .btn-gold:hover {
  background: rgba(161, 98, 7, 0.22);
}

/* Scroll reveal */
body.trn-ds .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
body.trn-ds .reveal.in {
  opacity: 1;
  transform: none;
}

/* ============ HERO ============ */
body.trn-ds .hero {
  min-height: min(86vh, 960px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}

body.trn-ds .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -3;
  filter: sepia(0.28) saturate(0.9) contrast(0.92) brightness(1.08) hue-rotate(-8deg);
  transform: scale(1.03);
}

body.trn-ds .hero-tint {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 90% at 70% 40%, rgba(255, 248, 225, 0.48), transparent 60%),
    linear-gradient(160deg, rgba(250, 250, 249, 0.78), rgba(245, 241, 232, 0.58) 55%, rgba(255, 255, 255, 0.72));
  mix-blend-mode: normal;
}
body.trn-ds .hero-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.08) 30%, rgba(250, 250, 249, 0.18) 62%, rgba(250, 250, 249, 0.9));
}

body.trn-ds .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--gold-bright);
  padding: 8px 16px;
  border: 1px solid rgba(161, 98, 7, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(6px);
  margin: 26px clamp(24px, 4.5vw, 64px) 0;
  width: fit-content;
}
body.trn-ds .hero-badge .live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  animation: trnPulse 2s ease-in-out infinite;
}
@keyframes trnPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* --- Terminal widget --- */
body.trn-ds .terminal {
  width: min(440px, calc(100vw - 48px));
  margin: 26px clamp(24px, 4.5vw, 64px) 0;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(28, 25, 23, 0.12);
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(28, 25, 23, 0.14);
  backdrop-filter: blur(8px);
  overflow: hidden;
}

body.trn-ds .term-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--hair-soft);
  padding: 0 14px;
}

body.trn-ds .term-tabs {
  display: flex;
}
body.trn-ds .term-tab {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--dim);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 13px 14px 11px;
  border-bottom: 2px solid transparent;
  transition: color 0.3s, border-color 0.3s;
}
body.trn-ds .term-tab:hover {
  color: var(--cream);
}
body.trn-ds .term-tab.is-active {
  color: var(--cream);
  border-bottom-color: var(--gold);
}

body.trn-ds .term-progress {
  width: 64px;
  height: 4px;
  border-radius: 99px;
  background: rgba(28, 25, 23, 0.12);
  overflow: hidden;
}
body.trn-ds .term-progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: rgba(28, 25, 23, 0.45);
  border-radius: 99px;
}

body.trn-ds .term-body {
  position: relative;
  height: 230px;
}

body.trn-ds .term-pane {
  position: absolute;
  inset: 0;
  padding: 18px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  pointer-events: none;
}
body.trn-ds .term-pane.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

body.trn-ds .type-target {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 2;
  color: var(--muted);
  white-space: pre-wrap;
  margin: 0;
}
body.trn-ds .type-target .caret-inline {
  color: var(--cream);
}

body.trn-ds .caret,
body.trn-ds .caret-inline::after {
  display: inline-block;
  width: 7px;
  height: 14px;
  margin-inline-start: 2px;
  background: var(--cream);
  vertical-align: -2px;
  animation: trnBlink 1s steps(1) infinite;
  content: '';
}
body.trn-ds .caret-inline::after {
  content: '';
}
@keyframes trnBlink {
  50% { opacity: 0; }
}

/* console pane form */
body.trn-ds .console-form {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
body.trn-ds .console-form .field label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--dim);
  margin-bottom: 6px;
}
body.trn-ds .console-form .input {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--cream);
  background: rgba(28, 25, 23, 0.05);
  border: 1px solid rgba(28, 25, 23, 0.14);
  border-radius: 3px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 33px;
}
body.trn-ds .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
body.trn-ds .chev {
  width: 7px;
  height: 7px;
  border-left: 1.5px solid var(--dim);
  border-bottom: 1.5px solid var(--dim);
  transform: rotate(-45deg) translateY(-2px);
}

/* --- Hero copy --- */
body.trn-ds .hero-copy {
  margin-top: auto;
  padding: 60px clamp(24px, 4.5vw, 64px) 54px;
  max-width: 860px;
}
body.trn-ds .hero-copy h1 {
  font-size: clamp(28px, 4vw, 50px);
  font-weight: 800;
  line-height: 1.55;
  margin: 0 0 22px;
  text-shadow: 0 2px 24px rgba(255, 255, 255, 0.72);
}
body.trn-ds .hero-copy h1 .hl {
  color: var(--gold-bright);
}
body.trn-ds .hero-copy p {
  color: rgba(28, 25, 23, 0.82);
  font-size: 15px;
  max-width: 68ch;
  margin: 0;
  text-shadow: 0 1px 12px rgba(255, 255, 255, 0.72);
}
body.trn-ds .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

/* ============ TECHNOLOGY (sticky scroller) ============ */
body.trn-ds .tech {
  height: 420vh;
  background: var(--bg);
}

body.trn-ds .tech-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}

body.trn-ds .tech-grid {
  display: grid;
  grid-template-columns: minmax(210px, 0.9fr) minmax(280px, 1fr) minmax(320px, 1.35fr);
  width: 100%;
}

body.trn-ds .tech-rail {
  padding: clamp(40px, 8vh, 88px) clamp(24px, 3vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
body.trn-ds .tech-rail .tech-rail-kicker {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 6px;
}
body.trn-ds .rail-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dim);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.4s;
  text-align: start;
  padding: 0;
}
body.trn-ds .rail-item i {
  width: 7px;
  height: 7px;
  background: currentColor;
  flex: none;
  transition: background 0.4s;
}
body.trn-ds .rail-item.is-active {
  color: var(--gold-bright);
}
body.trn-ds .rail-item:hover {
  color: var(--cream);
}

body.trn-ds .tech-list {
  border-inline-start: 1px solid var(--hair-soft);
  padding-top: clamp(40px, 8vh, 88px);
  display: flex;
  flex-direction: column;
}
body.trn-ds .tech-item {
  border-bottom: 1px solid var(--hair-soft);
  padding: 22px clamp(20px, 2.4vw, 40px) 22px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
body.trn-ds .tech-item.is-shown {
  opacity: 1;
  transform: none;
}
body.trn-ds .tech-item h3 {
  font-size: 19px;
  font-weight: 700;
  margin: 0;
}
body.trn-ds .tech-item-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.7s var(--ease), opacity 0.55s var(--ease), margin-top 0.7s var(--ease);
  opacity: 0;
  margin-top: 0;
}
body.trn-ds .tech-item.is-open .tech-item-body {
  max-height: 240px;
  opacity: 1;
  margin-top: 14px;
}
body.trn-ds .tech-item-body p {
  color: var(--muted);
  font-size: 13.5px;
  max-width: 42ch;
  margin: 0 0 8px;
}
body.trn-ds .tech-item-body a {
  color: var(--gold);
  font-family: var(--mono);
  font-size: 12px;
  text-decoration: none;
}
body.trn-ds .tech-item-body a:hover {
  color: var(--gold-bright);
}

/* Gold panel with sliding slabs */
body.trn-ds .tech-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}
body.trn-ds .slab {
  position: relative;
  flex: 0 0 0px;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(130% 100% at 50% 0%, rgba(255, 249, 224, 0.24), transparent 55%),
    linear-gradient(178deg, #fff9e8 0%, #f4e6bd 34%, #e8d39a 68%, #d5b86f 100%);
  border-top: 1px solid rgba(20, 16, 8, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 250, 230, 0.25);
  transition: flex-basis 0.85s var(--ease), flex-grow 0.85s var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
}
body.trn-ds .slab.is-active {
  flex: 1 1 auto;
}
body.trn-ds .slab.is-passed {
  flex: 0 0 88px;
}

body.trn-ds .window-card {
  width: min(360px, 82%);
  background: #ffffff;
  border: 1px solid rgba(28, 25, 23, 0.12);
  border-radius: 8px;
  box-shadow: 0 30px 70px rgba(113, 63, 18, 0.16);
  padding: 16px 18px 18px;
  opacity: 0;
  transform: translateY(70px);
  transition: opacity 0.8s var(--ease) 0.12s, transform 0.8s var(--ease) 0.12s;
}
body.trn-ds .slab.is-active .window-card,
body.trn-ds .slab.is-passed .window-card {
  opacity: 1;
  transform: none;
}
body.trn-ds .slab.is-passed .window-card {
  transition-delay: 0s;
}

body.trn-ds .dots {
  display: flex;
  gap: 5px;
  margin-bottom: 13px;
}
body.trn-ds .dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(28, 25, 23, 0.4);
}

body.trn-ds .card-title {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cream);
  margin: 0 0 12px;
}
body.trn-ds .kv {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 18px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 2;
  color: var(--muted);
}
body.trn-ds .kv span:last-child,
body.trn-ds .kv a:last-child {
  color: rgba(28, 25, 23, 0.88);
  text-decoration: none;
}
body.trn-ds .kv a:last-child:hover {
  color: var(--gold-bright);
}

body.trn-ds .code {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.85;
  color: rgba(28, 25, 23, 0.88);
  white-space: pre;
  margin: 0;
}
body.trn-ds .code .ln {
  color: var(--dim);
  margin-inline-end: 10px;
}
body.trn-ds .code .str {
  color: var(--gold);
}
body.trn-ds .code.small {
  font-size: 11px;
  line-height: 1.7;
}

/* ============ PRICING (offers / plans) ============ */
body.trn-ds .pricing {
  background: linear-gradient(180deg, #f5f1e8 0%, #faf7f0 55%, #ffffff 100%);
  padding: clamp(70px, 11vh, 130px) clamp(24px, 4.5vw, 64px) 0;
}

body.trn-ds .pricing-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(360px, 1.15fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}

body.trn-ds .pricing-copy h2 {
  font-size: clamp(26px, 3vw, 40px);
  margin: 0 0 30px;
  max-width: 20ch;
}
body.trn-ds .pricing-note {
  margin-top: 24px;
  padding: 16px 18px;
  border: 1px solid var(--hair-soft);
  border-radius: 6px;
  background: rgba(28, 25, 23, 0.02);
  color: var(--muted);
  font-size: 13.5px;
  line-height: 2;
}
body.trn-ds .pricing-note strong {
  color: var(--gold-bright);
}

body.trn-ds .table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hair);
}
body.trn-ds .table-head h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
}

body.trn-ds .unit-toggle {
  display: flex;
  background: rgba(28, 25, 23, 0.07);
  border-radius: 999px;
  padding: 3px;
}
body.trn-ds .unit-toggle button {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--dim);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 5px 13px;
  border-radius: 999px;
  transition: background 0.3s, color 0.3s;
}
body.trn-ds .unit-toggle button.is-active {
  background: var(--gold-surface);
  color: var(--on-gold);
}

body.trn-ds .price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 17px 0;
  border-bottom: 1px solid var(--hair-soft);
  font-size: 13.5px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.3s;
}
body.trn-ds a.price-row:hover {
  color: var(--cream);
}
body.trn-ds a.price-row:hover .price {
  color: var(--gold-bright);
}
body.trn-ds .price-row .price {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--cream);
  white-space: nowrap;
}

/* plans (offer cards) */
body.trn-ds .plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3.4vw, 48px);
  padding: clamp(70px, 12vh, 140px) 0 clamp(80px, 13vh, 150px);
}
body.trn-ds .plan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
body.trn-ds .plan .plan-index {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--gold);
  border: 1px solid rgba(161, 98, 7, 0.35);
  border-radius: 4px;
  padding: 2px 8px;
  margin-bottom: 14px;
}
body.trn-ds .plan h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 12px;
}
body.trn-ds .plan p {
  color: var(--muted);
  font-size: 13.5px;
  max-width: 36ch;
  margin: 0 0 22px;
}
body.trn-ds .plan .btn {
  margin-top: auto;
}

/* ============ BARS TRANSITION ============ */
body.trn-ds .bars {
  height: 62vh;
  background: #fafaf9;
  display: flex;
  align-items: flex-end;
  gap: clamp(10px, 1.4vw, 22px);
  padding: 0 clamp(16px, 2.5vw, 40px);
  overflow: hidden;
}
body.trn-ds .bars span {
  flex: 1;
  height: calc(var(--h) * 100%);
  background:
    radial-gradient(120% 60% at 50% 100%, rgba(255, 250, 228, 0.5), transparent 70%),
    linear-gradient(to top, #f2e5bd 0%, #ddc37f 55%, #b98222 100%);
  border-radius: 2px 2px 0 0;
  transform: scaleY(0);
  transform-origin: bottom;
  will-change: transform;
}

/* ============ SECURITY (trust) ============ */
body.trn-ds .security {
  background: linear-gradient(180deg, #faf7f0, #ffffff);
  padding: clamp(70px, 11vh, 130px) clamp(24px, 4.5vw, 64px) clamp(80px, 12vh, 140px);
}

body.trn-ds .security-head {
  display: grid;
  grid-template-columns: minmax(300px, 1.25fr) minmax(260px, 0.75fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: end;
  margin-bottom: clamp(50px, 8vh, 90px);
}
body.trn-ds .security-head h2 {
  font-size: clamp(26px, 3vw, 40px);
  max-width: 26ch;
  margin: 0;
}
body.trn-ds .security-lede {
  color: var(--muted);
  font-size: 13.5px;
  margin: 0;
}

body.trn-ds .security-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 36px);
}
body.trn-ds .sec-card {
  border: 1px solid var(--hair-soft);
  border-radius: 6px;
  background: rgba(28, 25, 23, 0.02);
  padding: 26px 26px 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body.trn-ds .sec-card h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 12px;
}
body.trn-ds .sec-card > p {
  color: var(--dim);
  font-size: 13px;
  margin: 0 0 24px;
}
body.trn-ds .sec-visual {
  margin-top: auto;
  padding-bottom: 22px;
}

body.trn-ds .mini-window {
  background: #f5f1e8;
  border: 1px solid rgba(28, 25, 23, 0.09);
  border-radius: 6px 6px 0 0;
  border-bottom: 0;
  padding: 12px 14px 0;
  margin-bottom: -1px;
}
body.trn-ds .mini-window .code {
  color: var(--gold);
  opacity: 0.85;
  padding-bottom: 6px;
}

body.trn-ds .check-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(161, 98, 7, 0.28);
  border-radius: 4px;
  background: rgba(161, 98, 7, 0.05);
  padding: 10px 14px;
  margin-bottom: 10px;
}
body.trn-ds .check-row div {
  display: flex;
  flex-direction: column;
}
body.trn-ds .check-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
}
body.trn-ds .check-sub {
  font-size: 12.5px;
  color: var(--cream);
}
body.trn-ds .check {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  position: relative;
}
body.trn-ds .check::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 4px;
  width: 4px;
  height: 8px;
  border-right: 1.6px solid var(--ink);
  border-bottom: 1.6px solid var(--ink);
  transform: rotate(42deg);
}

body.trn-ds .binary {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--gold);
  opacity: 0.6;
  white-space: pre;
  overflow: hidden;
  max-height: 132px;
  margin: 0;
  direction: ltr;
}

/* ============ PROMO SLABS (paired gold panels) ============ */
body.trn-ds .promo-duo {
  background: #fafaf9;
  padding: 0 clamp(24px, 4.5vw, 64px) clamp(80px, 12vh, 140px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.6vw, 36px);
}
body.trn-ds .promo-slab {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background:
    radial-gradient(130% 100% at 50% 0%, rgba(255, 249, 224, 0.24), transparent 55%),
    linear-gradient(178deg, #fff9e8 0%, #f4e6bd 34%, #e8d39a 68%, #d5b86f 100%);
  border-top: 1px solid rgba(20, 16, 8, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 250, 230, 0.25);
  padding: clamp(26px, 3.4vw, 48px);
  display: flex;
  align-items: stretch;
  justify-content: center;
}
body.trn-ds .promo-card {
  width: 100%;
  background: #ffffff;
  border: 1px solid rgba(28, 25, 23, 0.12);
  border-radius: 8px;
  box-shadow: 0 30px 70px rgba(113, 63, 18, 0.16);
  padding: 24px 26px 26px;
  display: flex;
  flex-direction: column;
}
body.trn-ds .promo-card .promo-kicker {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 10px;
}
body.trn-ds .promo-card h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 10px;
}
body.trn-ds .promo-card > p {
  color: var(--muted);
  font-size: 13.5px;
  margin: 0 0 16px;
}
body.trn-ds .promo-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.trn-ds .promo-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(28, 25, 23, 0.85);
  font-size: 13px;
}
body.trn-ds .promo-list li::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  background: var(--gold);
}
body.trn-ds .promo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
body.trn-ds .promo-chips span {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid var(--hair-soft);
  border-radius: 999px;
  padding: 4px 12px;
  background: rgba(28, 25, 23, 0.03);
  white-space: nowrap;
}
body.trn-ds .promo-card .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* ============ OPERATIONS (CTA + 3D burst) ============ */
body.trn-ds .operations {
  background: radial-gradient(90% 120% at 72% 45%, #f5f1e8 0%, #fafaf9 55%, #ffffff 100%);
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(300px, 0.95fr) minmax(320px, 1.05fr);
  align-items: center;
  gap: clamp(30px, 4vw, 80px);
  padding: clamp(70px, 10vh, 120px) clamp(24px, 4.5vw, 64px);
  overflow: hidden;
}

body.trn-ds .op-copy h2 {
  font-size: clamp(26px, 3vw, 40px);
  margin: 0 0 26px;
  max-width: 22ch;
}
body.trn-ds .op-copy .lede {
  font-size: 13.5px;
  margin: 0 0 34px;
}
body.trn-ds .op-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 26px;
}
body.trn-ds .op-assurances {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
body.trn-ds .op-assurances span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  border: 1px solid var(--hair-soft);
  border-radius: 999px;
  padding: 6px 14px;
  background: rgba(28, 25, 23, 0.03);
}
body.trn-ds .op-assurances span::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

body.trn-ds .op-stage {
  position: relative;
  height: min(560px, 80vh);
  perspective: 1100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.trn-ds .op-glow {
  position: absolute;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 205, 141, 0.16) 0%, rgba(226, 205, 141, 0.05) 40%, transparent 68%);
  filter: blur(6px);
}

body.trn-ds .op-card {
  position: relative;
  width: 172px;
  height: 208px;
  border-radius: 14px;
  background:
    radial-gradient(60% 55% at 48% 52%, rgba(233, 210, 130, 0.85) 0%, rgba(190, 168, 105, 0.35) 45%, transparent 75%),
    linear-gradient(145deg, #f7efd9 0%, #eadab5 30%, #d8be80 62%, #b98222 100%);
  box-shadow:
    0 40px 90px rgba(113, 63, 18, 0.2),
    inset 0 1px 0 rgba(255, 252, 240, 0.5),
    inset 0 -1px 0 rgba(113, 63, 18, 0.18);
  transform-style: preserve-3d;
  animation: trnCardFloat 9s ease-in-out infinite;
  will-change: transform;
}
body.trn-ds .op-card-sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 252, 238, 0.22) 48%, transparent 62%);
  mix-blend-mode: screen;
  animation: trnSheen 9s ease-in-out infinite;
}

@keyframes trnCardFloat {
  0%   { transform: rotateY(-22deg) rotateX(6deg) rotateZ(-2deg) translateY(0); }
  25%  { transform: rotateY(-10deg) rotateX(3deg) rotateZ(-1deg) translateY(-10px); }
  50%  { transform: rotateY(-26deg) rotateX(8deg) rotateZ(-3deg) translateY(4px); }
  75%  { transform: rotateY(-14deg) rotateX(4deg) rotateZ(-1deg) translateY(-6px); }
  100% { transform: rotateY(-22deg) rotateX(6deg) rotateZ(-2deg) translateY(0); }
}
@keyframes trnSheen {
  0%, 100% { opacity: 0.5; transform: translateX(-12%); }
  50% { opacity: 1; transform: translateX(12%); }
}

/* orbiting tiles (burst state) */
body.trn-ds .op-ring {
  position: absolute;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}
body.trn-ds .op-stage.is-burst .op-ring {
  animation: trnRingSpin 26s linear infinite;
}
@keyframes trnRingSpin {
  to { transform: rotateZ(360deg); }
}

body.trn-ds .op-tile {
  position: absolute;
  left: -19px;
  top: -24px;
  width: 38px;
  height: 48px;
  border-radius: 6px;
  background:
    radial-gradient(60% 55% at 50% 50%, rgba(233, 210, 130, 0.8) 0%, rgba(190, 168, 105, 0.3) 55%, transparent 80%),
    linear-gradient(145deg, #f2e7cb 0%, #d9c28d 50%, #b98222 100%);
  box-shadow: 0 14px 30px rgba(113, 63, 18, 0.18), inset 0 1px 0 rgba(255, 252, 240, 0.4);
  opacity: 0;
  transform: translate(0, 0) scale(0.25) rotateY(0deg);
  transition: transform 1s var(--ease), opacity 0.7s var(--ease);
  will-change: transform, opacity;
}

body.trn-ds .op-stage.is-burst .op-tile { opacity: 1; }
body.trn-ds .op-stage.is-burst .op-tile:nth-child(1)  { transform: translate(215px, -52px)  rotateY(32deg)  rotateZ(6deg); transition-delay: 0.02s; }
body.trn-ds .op-stage.is-burst .op-tile:nth-child(2)  { transform: translate(158px, -128px) rotateY(-18deg) rotateZ(-8deg); transition-delay: 0.06s; }
body.trn-ds .op-stage.is-burst .op-tile:nth-child(3)  { transform: translate(52px, -168px)  rotateY(24deg)  rotateZ(10deg); transition-delay: 0.1s; }
body.trn-ds .op-stage.is-burst .op-tile:nth-child(4)  { transform: translate(-78px, -152px) rotateY(-28deg) rotateZ(-5deg); transition-delay: 0.14s; }
body.trn-ds .op-stage.is-burst .op-tile:nth-child(5)  { transform: translate(-178px, -96px) rotateY(20deg)  rotateZ(8deg); transition-delay: 0.18s; }
body.trn-ds .op-stage.is-burst .op-tile:nth-child(6)  { transform: translate(-226px, -8px)  rotateY(-32deg) rotateZ(-10deg); transition-delay: 0.22s; }
body.trn-ds .op-stage.is-burst .op-tile:nth-child(7)  { transform: translate(-192px, 84px)  rotateY(16deg)  rotateZ(4deg); transition-delay: 0.26s; }
body.trn-ds .op-stage.is-burst .op-tile:nth-child(8)  { transform: translate(-96px, 148px)  rotateY(-22deg) rotateZ(-7deg); transition-delay: 0.3s; }
body.trn-ds .op-stage.is-burst .op-tile:nth-child(9)  { transform: translate(18px, 172px)   rotateY(30deg)  rotateZ(9deg); transition-delay: 0.34s; }
body.trn-ds .op-stage.is-burst .op-tile:nth-child(10) { transform: translate(126px, 138px)  rotateY(-16deg) rotateZ(-4deg); transition-delay: 0.38s; }
body.trn-ds .op-stage.is-burst .op-tile:nth-child(11) { transform: translate(198px, 66px)   rotateY(26deg)  rotateZ(7deg); transition-delay: 0.42s; }
body.trn-ds .op-stage.is-burst .op-tile:nth-child(12) { transform: translate(238px, -4px) scale(0.7) rotateY(-24deg) rotateZ(-9deg); transition-delay: 0.46s; }

/* ============ HUB (content / news) ============ */
body.trn-ds .hub {
  background: #ffffff;
  padding: clamp(70px, 11vh, 130px) clamp(24px, 4.5vw, 64px) clamp(80px, 12vh, 140px);
}
body.trn-ds .hub-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: clamp(30px, 5vh, 50px);
}
body.trn-ds .hub-head h2 {
  font-size: clamp(24px, 2.6vw, 36px);
  margin: 0;
}
body.trn-ds .hub-tabs {
  display: flex;
  background: rgba(28, 25, 23, 0.07);
  border-radius: 999px;
  padding: 3px;
}
body.trn-ds .hub-tab {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--dim);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px 16px;
  border-radius: 999px;
  transition: background 0.3s, color 0.3s;
}
body.trn-ds .hub-tab:hover {
  color: var(--cream);
}
body.trn-ds .hub-tab.is-active {
  background: var(--gold-surface);
  color: var(--on-gold);
}

body.trn-ds .hub-pane {
  display: none;
}
body.trn-ds .hub-pane.is-active {
  display: block;
}

body.trn-ds .hub-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 28px);
}

body.trn-ds .hub-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hair-soft);
  border-radius: 6px;
  background: rgba(28, 25, 23, 0.02);
  overflow: hidden;
  transition: border-color 0.3s, background 0.3s;
}
body.trn-ds .hub-card:hover {
  border-color: rgba(161, 98, 7, 0.4);
  background: rgba(28, 25, 23, 0.04);
}
body.trn-ds .hub-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #f5f1e8;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--hair-soft);
}
body.trn-ds .hub-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.02);
}
body.trn-ds .hub-card-media svg {
  width: 36px;
  height: 36px;
  color: var(--dim);
  opacity: 0.6;
}
body.trn-ds .hub-badge {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--on-gold);
  background: var(--gold-surface);
  border-radius: 3px;
  padding: 3px 9px;
}
body.trn-ds .hub-badge.is-alt {
  background: rgba(255, 255, 255, 0.9);
  color: var(--gold-bright);
  border: 1px solid rgba(161, 98, 7, 0.4);
}
body.trn-ds .hub-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 18px 18px;
}
body.trn-ds .hub-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim);
  margin-bottom: 8px;
}
body.trn-ds .hub-title {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.8;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.trn-ds .hub-title a {
  color: var(--cream);
  text-decoration: none;
  transition: color 0.3s;
}
body.trn-ds .hub-title a:hover {
  color: var(--gold-bright);
}
body.trn-ds .hub-excerpt {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.9;
  margin: 0 0 14px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.trn-ds .hub-link {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--gold);
  text-decoration: none;
  transition: color 0.3s;
}
body.trn-ds .hub-link:hover {
  color: var(--gold-bright);
}
body.trn-ds .hub-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 24px;
  color: var(--dim);
  border: 1px dashed var(--hair-soft);
  border-radius: 6px;
}
body.trn-ds .hub-view-all {
  display: flex;
  justify-content: center;
  margin-top: clamp(26px, 4vh, 40px);
}

/* ============================================================
   SITE CHROME OVERRIDES (header / footer / mobile / overlays)
   Existing markup keeps working; only surfaces are re-skinned.
   ============================================================ */

/* Top announcement banner */
body.trn-ds .top-bar-gif-container {
  background: linear-gradient(-45deg, #fafaf9, #ffffff, #f0e7d4, #f5f1e8);
  background-size: 400% 400%;
  border-bottom: 1px solid var(--hair-soft);
  color: var(--cream);
}
body.trn-ds .scene-title-shimmer {
  background: linear-gradient(90deg, var(--cream) 0%, var(--gold-deep) 35%, var(--cream) 50%, var(--gold-deep) 65%, var(--cream) 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
}
body.trn-ds .scene-divider-dot {
  background: rgba(28, 25, 23, 0.38);
}
body.trn-ds .scene-2 .text-white,
body.trn-ds .scene2-text,
body.trn-ds .scene-4 .text-white {
  color: var(--cream) !important;
}
body.trn-ds .scene-badge-pro {
  background: var(--gold-surface);
  color: var(--on-gold);
  border-color: var(--gold-deep);
}
body.trn-ds .scene2-icon,
body.trn-ds .service-check-icon,
body.trn-ds .service-cta-btn {
  color: var(--gold);
}
body.trn-ds .feature-tags-label {
  color: var(--muted);
}
body.trn-ds .feature-tag {
  color: var(--cream);
  background: rgba(255, 255, 255, 0.82);
  border-color: var(--hair);
}
body.trn-ds .service-cta-btn {
  color: var(--gold-deep);
  border-color: var(--gold);
}
body.trn-ds .service-cta-btn:hover {
  background: var(--gold-surface-hover);
  color: var(--on-gold);
}

/* Sticky / boxed header */
body.trn-ds .sticky-header.is-sticky {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hair-soft);
}
body.trn-ds .boxed-header {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  border: 1px solid var(--hair-soft);
  box-shadow: 0 24px 60px rgba(28, 25, 23, 0.14);
}
body.trn-ds .header-logo-text {
  color: var(--cream);
}
body.trn-ds .header-nav a,
body.trn-ds .nav-dropdown-trigger {
  color: var(--muted);
}
body.trn-ds .header-nav a:hover,
body.trn-ds .header-nav a.active,
body.trn-ds .header-nav-item:hover .nav-dropdown-trigger {
  color: var(--gold-bright);
}
body.trn-ds .header-nav a::after {
  background: linear-gradient(90deg, var(--gold), var(--gold-deep));
}

/* Dropdowns / mega menu */
body.trn-ds .header-nav-dropdown,
body.trn-ds .mega-dropdown {
  background: var(--panel);
  border-color: var(--hair-soft);
  box-shadow: 0 30px 70px rgba(28, 25, 23, 0.16);
}
body.trn-ds .dropdown-link {
  color: var(--muted) !important;
}
body.trn-ds .dropdown-link:hover {
  background: rgba(28, 25, 23, 0.05);
  color: var(--gold-bright) !important;
}
body.trn-ds .dropdown-icon {
  color: var(--dim);
}
body.trn-ds .dropdown-link:hover .dropdown-icon {
  color: var(--gold);
}
body.trn-ds .mega-dropdown a {
  color: var(--muted) !important;
}
body.trn-ds .mega-dropdown a:hover {
  color: var(--gold-bright) !important;
}
body.trn-ds .mega-col-title,
body.trn-ds .mega-web-services-title {
  color: var(--cream) !important;
}
body.trn-ds .mega-sub-title,
body.trn-ds .mega-svc-sub,
body.trn-ds .mega-web-services-desc {
  color: var(--dim) !important;
}
body.trn-ds .mega-col-header.tools {
  border-color: var(--gold);
}
body.trn-ds .mega-col-header.services {
  border-color: var(--gold-deep);
}
body.trn-ds .mega-col-icon.tools,
body.trn-ds .mega-col-icon.services {
  background: var(--gold-surface);
}
body.trn-ds .mega-col-icon svg {
  color: var(--on-gold);
}
body.trn-ds .mega-divider {
  background: linear-gradient(to bottom, transparent, var(--hair-soft) 10%, var(--hair-soft) 90%, transparent);
}

/* Header actions */
body.trn-ds .header-search-btn,
body.trn-ds .mobile-menu-btn {
  color: var(--muted);
}
body.trn-ds .header-search-btn:hover {
  background: rgba(28, 25, 23, 0.06);
  color: var(--gold-bright);
}
body.trn-ds .header-auth-btn.primary {
  background: rgba(161, 98, 7, 0.14);
  border: 1px solid rgba(161, 98, 7, 0.5);
  color: var(--gold-bright);
  box-shadow: none;
}
body.trn-ds .header-auth-btn.primary:hover {
  background: rgba(161, 98, 7, 0.24);
  box-shadow: none;
}
body.trn-ds .header-auth-btn.secondary {
  color: var(--muted);
  border-color: var(--hair);
}
body.trn-ds .header-auth-btn.secondary:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
}

/* Search overlay */
body.trn-ds .search-box {
  background: var(--panel);
  color: var(--cream);
  border: 1px solid var(--hair-soft);
}
body.trn-ds .search-input-wrapper {
  background: rgba(28, 25, 23, 0.05);
}
body.trn-ds .search-input-wrapper:focus-within {
  background: rgba(28, 25, 23, 0.07);
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(161, 98, 7, 0.12);
}
body.trn-ds .search-input-wrapper input {
  color: var(--cream);
}
body.trn-ds .search-input-wrapper input::placeholder {
  color: var(--dim);
}
body.trn-ds .search-input-wrapper svg {
  color: var(--dim);
}
body.trn-ds .search-close-btn {
  background: rgba(28, 25, 23, 0.06);
  color: var(--muted);
}
body.trn-ds .search-hints {
  border-top-color: var(--hair-soft);
}
body.trn-ds .search-hints-title {
  color: var(--dim);
}
body.trn-ds .search-hint-tag {
  background: rgba(28, 25, 23, 0.05);
  color: var(--muted);
}
body.trn-ds .search-hint-tag:hover {
  background: rgba(161, 98, 7, 0.14);
  color: var(--gold-bright);
}
body.trn-ds .search-results a {
  color: var(--cream);
}
body.trn-ds .search-results a:hover {
  background: rgba(28, 25, 23, 0.05);
}
body.trn-ds .sr-footer {
  border-top-color: var(--hair-soft);
}
body.trn-ds .sr-footer kbd {
  background: rgba(28, 25, 23, 0.06);
  border-color: var(--hair);
  color: var(--muted);
}

/* Mobile menu panel */
body.trn-ds .mobile-menu-panel {
  background: var(--bg-soft);
}
body.trn-ds .mobile-menu-close {
  background: rgba(28, 25, 23, 0.06);
  color: var(--muted);
}
body.trn-ds .mobile-menu-nav a {
  color: var(--muted);
}
body.trn-ds .mobile-menu-nav a:hover,
body.trn-ds .mobile-menu-nav a.active {
  background: rgba(161, 98, 7, 0.1);
  color: var(--gold-bright);
}
body.trn-ds .mobile-menu-auth {
  border-top-color: var(--hair-soft);
}

/* Mobile command bar + back to top (from layout) */
body.trn-ds .mobile-command-panel {
  background: rgba(255, 255, 255, 0.96);
  border-color: var(--hair-soft);
}
body.trn-ds .mobile-command-link {
  color: var(--muted);
}
body.trn-ds .mobile-command-link:hover {
  background: rgba(161, 98, 7, 0.1);
  color: var(--gold-bright);
}
body.trn-ds .mobile-command-home {
  background: linear-gradient(135deg, var(--gold-surface) 0%, var(--gold-surface-hover) 100%);
  color: var(--on-gold);
  box-shadow: 0 8px 20px rgba(161, 98, 7, 0.25);
}
body.trn-ds .mobile-command-home:hover {
  color: var(--on-gold);
  background: linear-gradient(135deg, #faefd0 0%, var(--gold-surface) 100%);
}
body.trn-ds .mobile-command-dot {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.98);
}
body.trn-ds .back-to-top-btn {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--hair-soft);
}
body.trn-ds .back-to-top-icon {
  color: var(--gold);
}
body.trn-ds .progress-ring__circle {
  stroke: var(--gold) !important;
}

/* Footer */
body.trn-ds .premium-footer {
  background: linear-gradient(180deg, #faf7f0 0%, #ffffff 100%);
  color: var(--muted);
  margin-top: 0;
}
body.trn-ds .premium-footer::before {
  background: linear-gradient(90deg, transparent, var(--gold-deep), var(--gold), var(--gold-deep), transparent);
}
body.trn-ds .footer-pattern {
  background-image:
    radial-gradient(circle at 20% 80%, rgba(161, 98, 7, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(161, 98, 7, 0.04) 0%, transparent 50%);
}
body.trn-ds .footer-logo-text {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
}
body.trn-ds .footer-desc {
  color: var(--muted);
}
body.trn-ds .footer-col h4 {
  color: var(--cream);
}
body.trn-ds .footer-col h4::after {
  background: linear-gradient(90deg, var(--gold), var(--gold-deep));
}
body.trn-ds .footer-links a {
  color: var(--muted);
}
body.trn-ds .footer-links a:hover {
  color: var(--gold-bright);
}
body.trn-ds .footer-links a::before {
  background: var(--gold);
}
body.trn-ds .footer-contact-icon {
  background: rgba(161, 98, 7, 0.1);
}
body.trn-ds .footer-contact-icon svg {
  color: var(--gold);
}
body.trn-ds .footer-contact-text {
  color: var(--muted);
}
body.trn-ds .footer-contact-text strong {
  color: var(--cream);
}
body.trn-ds .btn-live-chat-trigger {
  background: rgba(28, 25, 23, 0.04);
  border-color: var(--hair);
  color: var(--muted);
}
body.trn-ds .btn-live-chat-trigger:hover {
  background: rgba(161, 98, 7, 0.12);
  border-color: var(--gold);
  color: var(--gold-bright);
}
body.trn-ds .footer-extension-hub {
  background: rgba(28, 25, 23, 0.02);
  border-color: var(--hair-soft);
  box-shadow: none;
}
body.trn-ds .footer-extension-kicker {
  color: var(--muted);
}
body.trn-ds .footer-extension-section-tag {
  color: var(--dim);
}
body.trn-ds .footer-extension-link {
  color: var(--muted);
  background: rgba(28, 25, 23, 0.04);
  border-color: var(--hair-soft);
}
body.trn-ds .footer-extension-link:hover {
  color: var(--gold-bright);
  background: rgba(161, 98, 7, 0.1);
  border-color: rgba(161, 98, 7, 0.35);
}
body.trn-ds .footer-catalog-cta {
  background: rgba(161, 98, 7, 0.14);
  border: 1px solid rgba(161, 98, 7, 0.5);
  color: var(--gold-bright);
  box-shadow: none;
}
body.trn-ds .footer-catalog-cta:hover {
  background: rgba(161, 98, 7, 0.24);
  box-shadow: none;
}
body.trn-ds .footer-social-enamad {
  background: rgba(28, 25, 23, 0.04);
  border-color: var(--hair-soft);
}
body.trn-ds .footer-divider {
  background: linear-gradient(90deg, transparent, var(--hair-soft), transparent);
}
body.trn-ds .footer-copyright {
  color: var(--dim);
}
body.trn-ds .footer-copyright span {
  animation: none;
  color: var(--gold);
}

/* ============ Responsive ============ */
@media (max-width: 960px) {
  body.trn-ds .tech {
    height: auto;
  }
  body.trn-ds .tech-sticky {
    position: static;
    height: auto;
    overflow: visible;
  }
  body.trn-ds .tech-grid {
    grid-template-columns: 1fr;
  }
  body.trn-ds .tech-rail {
    flex-direction: row;
    flex-wrap: wrap;
    padding-bottom: 0;
  }
  body.trn-ds .tech-item,
  body.trn-ds .tech-item.is-shown {
    opacity: 1;
    transform: none;
  }
  body.trn-ds .tech-item .tech-item-body {
    max-height: none;
    opacity: 1;
    margin-top: 14px;
  }
  body.trn-ds .tech-panel {
    min-height: auto;
  }
  body.trn-ds .slab,
  body.trn-ds .slab.is-passed {
    flex: none;
    height: 300px;
  }
  body.trn-ds .pricing-grid,
  body.trn-ds .security-head,
  body.trn-ds .operations,
  body.trn-ds .promo-duo {
    grid-template-columns: 1fr;
  }
  body.trn-ds .plans,
  body.trn-ds .security-cards {
    grid-template-columns: 1fr;
  }
  body.trn-ds .op-stage {
    height: 480px;
  }
  body.trn-ds .hub-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  body.trn-ds .hub-grid {
    grid-template-columns: 1fr;
  }
  body.trn-ds .hero {
    min-height: 78vh;
  }
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  body.trn-ds .reveal,
  body.trn-ds .tech-item,
  body.trn-ds .window-card,
  body.trn-ds .term-pane {
    transition: none;
    opacity: 1;
    transform: none;
  }
  body.trn-ds .op-card,
  body.trn-ds .op-card-sheen,
  body.trn-ds .op-stage.is-burst .op-ring,
  body.trn-ds .hero-badge .live-dot {
    animation: none;
  }
  body.trn-ds .bars span {
    transform: none;
  }
}