/* Technical Hero: opt-in shared surface, static CSS decoration, no media dependency. */
.tr-technical-hero-page { --tr-technical-base:var(--tienrun-dark,#101640); }
.tr-technical-hero-page .site-header {
  background-color:var(--tr-technical-base);
  box-shadow:none;
  transition:background-color var(--tienrun-motion) var(--tienrun-easing),box-shadow var(--tienrun-motion) var(--tienrun-easing);
}
.tr-technical-hero-page .site-header.is-scrolled {
  background-color:#0c1233;
  box-shadow:0 1px 0 rgb(135 186 220 / .12),0 3px 10px rgb(0 0 0 / .08);
}
.tr-foundation .tr-technical-hero,
.tr-technical-surface {
  --tr-technical-glow:.19;
  --tr-technical-grid:.045;
  --tr-technical-rings:.16;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:#fff;
  background-color:var(--tr-technical-base,var(--tienrun-dark));
  background-image:radial-gradient(ellipse at 85% 100%,rgb(0 184 221 / var(--tr-technical-glow)),transparent 65%);
}
.tr-foundation .tr-technical-hero { display:flex; align-items:center; min-height:290px; padding-block:44px; }
.tr-foundation .tr-technical-hero::before,
.tr-foundation .tr-technical-hero::after,
.tr-technical-surface::before,
.tr-technical-surface::after { content:''; position:absolute; z-index:-1; pointer-events:none; }
.tr-foundation .tr-technical-hero::before,
.tr-technical-surface::before {
  inset:0;
  background-image:linear-gradient(rgb(154 209 232 / var(--tr-technical-grid)) 1px,transparent 1px),linear-gradient(90deg,rgb(154 209 232 / var(--tr-technical-grid)) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(110deg,transparent 25%,#000 100%);
}
.tr-foundation .tr-technical-hero::after,
.tr-technical-surface::after {
  width:410px;
  aspect-ratio:1;
  right:7%;
  top:calc(50% - 205px);
  border:1px solid rgb(98 202 226 / var(--tr-technical-rings));
  border-radius:50%;
  outline:1px solid rgb(98 202 226 / .065);
  outline-offset:22px;
  /* Concentric seal-section outlines and faint drawing centre lines. */
  background-image:radial-gradient(circle,transparent 54%,rgb(98 202 226 / .12) 54.2%,rgb(98 202 226 / .12) 54.45%,transparent 54.65%),radial-gradient(circle,transparent 60%,rgb(98 202 226 / .08) 60.2%,rgb(98 202 226 / .08) 60.4%,transparent 60.6%),linear-gradient(transparent calc(50% - .5px),rgb(98 202 226 / .055) 50%,transparent calc(50% + .5px)),linear-gradient(90deg,transparent calc(50% - .5px),rgb(98 202 226 / .055) 50%,transparent calc(50% + .5px));
}
.tr-foundation .tr-technical-hero__content { max-width:800px; display:grid; gap:var(--tr-heading-gap); min-width:0; }
.tr-foundation .tr-technical-hero h1 { margin:0; font-size:var(--tr-landing-h1); line-height:var(--tr-heading-line); color:inherit; overflow-wrap:break-word; }
.tr-foundation .tr-technical-hero__eyebrow { margin:0; font-size:var(--tr-eyebrow); font-weight:700; letter-spacing:.15em; line-height:1.4; text-transform:uppercase; color:#c1e5f0; }
.tr-foundation .tr-technical-hero__intro { max-width:760px; font-size:var(--tr-body); line-height:var(--tr-body-line); color:#e1e7ef; }
.tr-foundation .tr-technical-hero__intro p { margin:0; }
.tr-foundation .tr-technical-hero__intro p + p { margin-top:var(--tr-heading-gap); }
/* Landing-only density; global typography and existing detail pages are untouched. */
.tr-foundation .tr-technical-hero--landing { --tr-landing-h1:clamp(32px,calc(22px + 2vw),52px); --tr-heading-gap:10px; }
.tr-foundation .tr-technical-hero--landing .tr-technical-hero__eyebrow { letter-spacing:.12em; }
.tr-foundation .tr-technical-hero--landing .tr-technical-hero__intro { max-width:660px; font-size:15px; line-height:1.55; }
/* Detail variant is ready for future approved templates; no existing detail is migrated. */
.tr-foundation .tr-technical-hero--detail { min-height:240px; padding-block:40px; }
.tr-foundation .tr-technical-hero--detail h1 { font-size:clamp(30px,calc(22px + 1.8vw),48px); }
.tr-foundation .tr-technical-hero--detail::after { width:400px; top:calc(50% - 200px); }
@media(max-width:1024px) {
  .tr-foundation .tr-technical-hero--landing { min-height:250px; padding-block:38px; }
}
@media(max-width:767px) {
  .tr-foundation .tr-technical-hero--landing { min-height:210px; padding-block:30px; }
  .tr-foundation .tr-technical-hero--detail { min-height:190px; padding-block:32px; }
  .tr-foundation .tr-technical-hero::after, .tr-technical-surface::after { width:360px; right:-230px; top:calc(50% - 180px); opacity:.65; }
}
@media(prefers-reduced-motion:reduce) {
  .tr-technical-hero-page .site-header { transition:none; }
}
