stylesheets/extra.css

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  background:
    linear-gradient(180deg, rgba(31, 79, 255, 0.08) 0, rgba(5, 8, 22, 0) 420px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    var(--dt-ink) !important;
  background-size: auto, 72px 72px, 72px 72px, auto;
  color: var(--dt-text) !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  line-height: 1.65;
}

img {
  max-width: 100%;
}

a {
  color: var(--dt-blue-light) !important;
  text-decoration: none !important;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

a:hover,
a:focus {
  color: var(--dt-white) !important;
}

p,
li,
dd,
td {
  color: var(--dt-muted);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--dt-white) !important;
  font-weight: 700;
  letter-spacing: 0;
}

h1 {
  margin-top: 3.2rem;
  font-size: 2.4rem;
  line-height: 1.12;
}

h2 {
  margin-top: 4.2rem;
  padding-top: 0.4rem;
  font-size: 1.72rem;
  line-height: 1.18;
}

h3 {
  font-size: 1.08rem;
}

code,
pre,
kbd {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

code {
  padding: 0.14rem 0.34rem;
  border: 1px solid rgba(142, 197, 255, 0.22);
  border-radius: 6px;
  background: rgba(31, 79, 255, 0.14);
  color: #5d83c7 !important;
  font-size: 0.9em;
}

pre, .highlight pre, pre.highlight {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--dt-radius) !important;
  background: #11131E !important; /* Sleek dark linear-like background */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

pre code, .highlight code {
  border: 0;
  background: transparent !important;
  color: #CBD5E1 !important;
}

.hljs,
.highlight,
.codehilite {
  background: transparent !important;
  color: #CBD5E1 !important;
}

.hljs-keyword,
.hljs-built_in,
.hljs-name {
  color: #4f7fe8 !important;
}

.hljs-string,
.hljs-number,
.hljs-literal {
  color: #5c91cf !important;
}

table {
  max-width: 100%;
  border-color: var(--dt-border) !important;
  background: rgba(255, 255, 255, 0.035);
}

th,
td {
  border-color: var(--dt-border) !important;
}

th {
  color: var(--dt-white);
  background: rgba(255, 255, 255, 0.06);
}

.navbar {
  min-height: 74px;
  margin-bottom: 0;
  border: 0;
  border-bottom: 1px solid var(--dt-border);
  background: rgba(5, 8, 22, 0.9) !important;
  backdrop-filter: blur(20px);
}

.navbar .container {
  width: 100%;
  max-width: none;
  min-height: 74px;
  padding-right: clamp(1.5rem, 4vw, 4rem);
  padding-left: clamp(1.5rem, 4vw, 4rem);
  display: flex;
  align-items: center;
  gap: 2rem;
}

.navbar.navbar-dark .navbar-brand,
.navbar.navbar-dark .navbar-nav .nav-link {
  color: var(--dt-muted-strong) !important;
  text-shadow: none;
}

.navbar.navbar-dark .navbar-brand {
  display: inline-flex;
  width: auto;
  min-width: 154px;
  height: 74px;
  align-items: center;
  gap: 0.65rem;
  padding-top: 0;
  padding-bottom: 0;
  color: var(--dt-white) !important;
  font-size: 1.08rem;
  font-weight: 800;
}

.navbar.navbar-dark .navbar-brand::before {
  content: "";
  width: 34px;
  height: 34px;
  display: inline-block;
  border-radius: 9px;
  background: url("../assets/brand/detime-mark.svg") center / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(142, 197, 255, 0.22), 0 12px 28px rgba(31, 79, 255, 0.24);
}

.navbar.navbar-dark .navbar-nav .nav-link {
  min-height: 74px;
  display: flex;
  align-items: center;
  padding: 0 15px;
  font-size: 1rem;
  font-weight: 680;
  letter-spacing: 0;
  white-space: nowrap;
}

.navbar.navbar-dark .navbar-nav .nav-link:hover,
.navbar.navbar-dark .navbar-nav .active,
.navbar.navbar-dark .navbar-nav .active:hover {
  color: var(--dt-white) !important;
  background: transparent !important;
}

#navbar-collapse {
  align-items: center;
}

#navbar-collapse > .navbar-nav:first-child {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-start;
  gap: 0.18rem;
  flex-wrap: nowrap;
}

#navbar-collapse > .navbar-nav:first-child > li {
  display: flex;
  align-items: center;
  min-height: 74px;
}

#navbar-collapse > .navbar-nav.ml-auto,
.navbar-nav.navbar-right {
  display: none !important;
}

.dropdown-menu {
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius);
  background: rgba(5, 8, 22, 0.98);
  box-shadow: var(--dt-shadow);
  padding: 0.5rem;
}

.show > .dropdown-menu:has(> li:nth-child(8)),
.dropdown-menu.show:has(> li:nth-child(8)) {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  min-width: 460px;
}

.dropdown-menu > li > a {
  border-radius: 6px;
  color: var(--dt-muted-strong) !important;
  padding: 0.7rem 0.8rem;
  font-weight: 600;
}

.dropdown-menu > li > a:hover {
  color: #f1f5f9 !important;
  background: rgba(31, 79, 255, 0.18);
}

.container {
  max-width: 1480px;
}

.col-md-9:has(.hero-panel) {
  width: 100%;
}

.bs-sidebar:has(+ .col-md-9 .hero-panel),
.col-md-3:has(+ .col-md-9 .hero-panel) {
  display: none;
}

.bs-docs-section:has(.hero-panel) > h1:first-child,
.bs-docs-section:has(.hero-panel) > h1:first-child + p {
  display: none;
}

.col-md-9,
.col-md-12,
main,
.bs-docs-section {
  color: var(--dt-text);
}

.col-md-9 {
  padding-top: 1.2rem;
  padding-bottom: 4rem;
}

.bs-sidebar {
  padding: 1.5rem;
  background: rgba(10, 15, 30, 0.5) !important; /* Dark blue/black background */
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px;
}

#toc-collapse.card,
.bs-sidebar .card {
  background: transparent !important;
  border: none !important;
}

.bs-sidebar .nav > li > a {
  border-radius: 6px;
  color: #94a3b8 !important; /* Soft gray for inactive */
  transition: all 150ms ease;
}

.bs-sidebar .nav > .active > a,
.bs-sidebar .nav > li > a:hover {
  color: #f1f5f9 !important; /* Softer white for active/hover */
  background: rgba(31, 79, 255, 0.15) !important;
}

.source-links {
  display: none;
}

a[href*="/edit/"],
li:has(> a[href*="/edit/"]) {
  display: none !important;
}

.hero-panel {
  position: relative;
  isolation: isolate;
  margin: 2rem 0 2.2rem;
  padding: clamp(1.5rem, 3.5vw, 3.8rem);
  overflow: hidden;
  border: 1px solid var(--dt-border);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.018)),
    url("../assets/brand/detime-orbit-pattern.svg") right -120px top -80px / 760px auto no-repeat,
    rgba(5, 8, 22, 0.74);
  box-shadow: var(--dt-shadow);
}

.hero-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(31, 79, 255, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 50%);
}

.hero-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 520' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M40 214 C150 86 250 316 360 190 S580 112 700 210 S930 360 1160 150' stroke='%231F4FFF' stroke-width='3' stroke-opacity='.34'/%3E%3Cpath d='M40 284 C210 270 310 250 450 228 S720 162 1160 118' stroke='%2300A6A6' stroke-width='3' stroke-opacity='.24'/%3E%3Cpath d='M40 338 C110 292 180 392 250 336 S390 288 460 336 S620 390 710 330 S900 278 1160 330' stroke='%238EC5FF' stroke-width='2.6' stroke-opacity='.18'/%3E%3Cpath d='M40 390 C120 416 170 360 240 392 S370 430 450 382 S590 338 690 390 S820 426 940 384 S1080 350 1160 388' stroke='%239AA8C7' stroke-width='2.4' stroke-opacity='.18'/%3E%3C/g%3E%3C/svg%3E") center bottom / 100% auto no-repeat;
  opacity: 0.36;
  pointer-events: none;
}

.hero-panel > * {
  position: relative;
  z-index: 1;
}

.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(470px, 0.96fr);
  gap: clamp(2rem, 4.2vw, 4.4rem);
  align-items: center;
}

.hero-copy,
.hero-visual {
  min-width: 0;
}

.hero-logo-floating {
  display: block;
  width: 118px;
  height: auto;
  margin: 0 0 1.1rem;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: contain;
}

.hero-panel .hero-logo-floating,
.hero-panel .hero-label,
.hero-panel .hero-copy h2,
.hero-panel .hero-kicker,
.hero-panel .hero-copy > p:last-of-type,
.hero-panel .hero-actions,
.hero-panel .product-window,
.hero-panel .decomp-motion,
.hero-panel .hero-points li {
  animation: hero-rise 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-panel .hero-logo-floating {
  animation-delay: 80ms;
}

.hero-panel .hero-label {
  animation-delay: 160ms;
}

.hero-panel .hero-copy h2 {
  animation-delay: 240ms;
}

.hero-panel .hero-kicker {
  animation-delay: 340ms;
}

.hero-panel .hero-copy > p:last-of-type {
  animation-delay: 430ms;
}

.hero-panel .hero-actions {
  animation-delay: 520ms;
}

.hero-panel .product-window {
  animation-delay: 360ms;
}

.hero-panel .decomp-motion {
  animation-delay: 500ms;
}

.hero-panel .hero-points li:nth-child(1) {
  animation-delay: 620ms;
}

.hero-panel .hero-points li:nth-child(2) {
  animation-delay: 700ms;
}

.hero-panel .hero-points li:nth-child(3) {
  animation-delay: 780ms;
}

.hero-panel .hero-points li:nth-child(4) {
  animation-delay: 860ms;
}

.bs-docs-section h2::after {
  content: "";
  display: block;
  width: min(360px, 100%);
  height: 42px;
  margin-top: 0.7rem;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 520 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M0 18 C54 2 84 38 138 17 S230 8 282 24 S402 40 520 10' stroke='%231F4FFF' stroke-width='2.6' stroke-opacity='.32'/%3E%3Cpath d='M0 28 C120 26 200 22 306 16 S430 8 520 8' stroke='%2300A6A6' stroke-width='2.3' stroke-opacity='.22'/%3E%3Cpath d='M0 34 C28 26 54 40 82 34 S138 26 166 34 S222 40 250 34 S318 26 346 34 S442 40 520 32' stroke='%239AA8C7' stroke-width='2' stroke-opacity='.2'/%3E%3C/g%3E%3C/svg%3E") left center / contain no-repeat;
  pointer-events: none;
}

.hero-label,
.section-kicker,
.card-index {
  color: var(--dt-blue-light);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hero-copy h2 {
  margin: 0 0 1rem;
  max-width: 670px;
  font-size: clamp(3rem, 5.15vw, 5.45rem);
  line-height: 0.96;
  letter-spacing: -0.025em;
  background: repeating-linear-gradient(
    to bottom,
    #f8fafc 0px,
    #f8fafc 2px,
    transparent 2px,
    transparent 4px
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hero-kicker {
  max-width: 560px;
  color: var(--dt-white);
  font-size: 1.2rem;
  font-weight: 650;
}

.hero-copy > p:last-of-type {
  max-width: 590px;
  color: var(--dt-muted-strong);
  font-size: 1rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.6rem;
}

.hero-actions a {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  border: 1px solid rgba(31, 79, 255, 0.55);
  border-radius: var(--dt-radius);
  background: var(--dt-blue);
  color: var(--dt-white) !important;
  font-weight: 750;
  box-shadow: 0 12px 34px rgba(31, 79, 255, 0.26);
}

.hero-actions a.secondary {
  border-color: var(--dt-border-strong);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: none;
}

.hero-actions a:hover {
  transform: translateY(-1px);
  border-color: rgba(142, 197, 255, 0.8);
}

.hero-visual {
  display: grid;
  gap: 1rem;
}

.product-window,
.hero-points,
.pipeline-panel,
.info-card,
.showcase-card,
.visual-card,
.decision-card {
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.product-window {
  overflow: hidden;
  background: rgba(255, 255, 255, 0.9);
  color: var(--dt-ink);
}

.decomp-motion {
  position: relative;
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 1rem;
  min-height: 152px;
  padding: 1rem;
  overflow: hidden;
  border: 1px solid var(--dt-border);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(31, 79, 255, 0.16), rgba(142, 197, 255, 0.04)),
    rgba(5, 8, 22, 0.56);
}

.decomp-motion::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(90deg, transparent, black 18%, black 82%, transparent);
  opacity: 0.7;
}

.motion-orbit,
.motion-waves {
  position: relative;
  z-index: 1;
}

.motion-orbit {
  width: 118px;
  height: 118px;
  align-self: center;
  border: 1px solid rgba(142, 197, 255, 0.2);
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(142, 197, 255, 0.9) 0 4px, transparent 5px),
    radial-gradient(circle at center, rgba(31, 79, 255, 0.16), transparent 64%);
}

.motion-orbit::before,
.motion-orbit::after,
.motion-orbit span {
  content: "";
  position: absolute;
  inset: 12px;
  border: 3px solid transparent;
  border-top-color: var(--dt-blue);
  border-right-color: rgba(142, 197, 255, 0.76);
  border-radius: 50%;
  animation: orbit-spin 7s linear infinite;
}

.motion-orbit::after {
  inset: 28px;
  border-top-color: rgba(142, 197, 255, 0.88);
  border-right-color: transparent;
  animation-duration: 4.8s;
  animation-direction: reverse;
}

.motion-orbit span:first-child {
  inset: 2px;
  border-width: 4px;
  border-right-color: transparent;
  opacity: 0.78;
  animation-duration: 10s;
}

.motion-orbit span:last-child {
  width: 8px;
  height: 8px;
  inset: auto 20px 28px auto;
  border: 0;
  background: var(--dt-blue-light);
  box-shadow: 0 0 18px rgba(142, 197, 255, 0.8);
  animation: pulse-node 2.2s ease-in-out infinite;
}

.motion-waves {
  display: grid;
  gap: 0.6rem;
  align-content: center;
}

.motion-wave {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 0.8rem;
  align-items: center;
}

.motion-wave strong {
  color: var(--dt-muted-strong);
  font-size: 0.72rem;
  font-weight: 800;
}

.motion-wave i {
  display: block;
  height: 28px;
  border-radius: 999px;
  background-repeat: repeat-x;
  background-size: 420px 28px;
  animation: wave-pan 7s linear infinite;
}

.motion-wave.observed i {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 420 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='0,15 18,6 34,20 52,8 70,18 88,5 106,22 124,10 144,18 162,7 180,23 198,11 216,15 236,5 254,17 274,9 292,21 312,10 332,7 350,20 370,12 392,21 420,8' fill='none' stroke='%23E9EDF3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.motion-wave.trend i {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 420 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='0,22 40,21 80,19 120,18 160,16 200,14 240,12 280,10 320,8 360,7 420,5' fill='none' stroke='%231F4FFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  animation-duration: 9s;
}

.motion-wave.residual i {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 420 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='0,14 17,17 33,12 52,16 70,11 90,14 110,16 128,13 146,15 166,13 184,17 204,12 222,16 242,12 260,14 278,17 298,11 318,15 336,17 354,12 374,15 392,13 420,14' fill='none' stroke='%238EC5FF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  animation-duration: 4.5s;
}

.window-topbar {
  display: grid;
  grid-template-columns: 82px 1fr auto;
  align-items: center;
  gap: 1rem;
  min-height: 44px;
  padding: 0 1rem;
  border-bottom: 1px solid rgba(5, 8, 22, 0.1);
  background: #f6f8fc;
}

.traffic-lights {
  display: flex;
  gap: 0.38rem;
}

.traffic-lights span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff5f57;
}

.traffic-lights span:nth-child(2) {
  background: #ffbd2e;
}

.traffic-lights span:nth-child(3) {
  background: #28c840;
}

.window-title,
.window-actions {
  color: #27314a;
  font-size: 0.78rem;
  font-weight: 700;
}

.window-title {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
}

.window-title img {
  width: 86px;
  height: auto;
  border-radius: 0;
}

.app-shell {
  display: grid;
  grid-template-columns: 118px 1fr;
  min-height: 310px;
}

.app-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
  padding: 1rem 0.65rem;
  background: var(--dt-ink);
  color: #dbe6f6;
}

.app-sidebar span {
  display: flex;
  align-items: center;
  min-height: 30px;
  padding: 0 0.65rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 650;
}

.app-sidebar .sidebar-brand {
  gap: 0.4rem;
  margin-bottom: 0.5rem;
  color: var(--dt-white);
}

.app-sidebar img {
  width: 21px;
  height: 21px;
}

.app-sidebar .active {
  background: var(--dt-blue);
  color: var(--dt-white);
}

.app-main {
  padding: 1.2rem;
  background:
    linear-gradient(180deg, rgba(31, 79, 255, 0.04), transparent 46%),
    #fbfcff;
}

.app-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.app-head small {
  display: block;
  color: #516078;
  font-weight: 700;
}

.app-head strong {
  display: block;
  color: #050816;
  font-size: 1rem;
}

.app-head button {
  min-width: 58px;
  min-height: 32px;
  border: 0;
  border-radius: 7px;
  background: var(--dt-blue);
  color: var(--dt-white);
  font-weight: 800;
}

.signal-grid {
  display: grid;
  gap: 0.9rem;
}

.signal-row {
  display: grid;
  grid-template-columns: 82px 1fr;
  align-items: center;
  gap: 0.7rem;
  min-height: 40px;
}

.signal-row span {
  color: #27314a;
  font-size: 0.76rem;
  font-weight: 750;
}

.signal-row i {
  display: block;
  height: 34px;
  border-radius: 6px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.observed i {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 500 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='0,34 24,22 45,36 70,18 96,28 120,12 145,40 172,25 198,31 221,17 248,44 276,28 300,32 326,14 349,26 372,20 395,45 420,30 448,22 475,39 500,16' fill='none' stroke='%23050816' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.trend i {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 500 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='0,44 42,41 84,38 126,36 168,32 210,30 252,26 294,23 336,22 378,18 420,15 462,13 500,11' fill='none' stroke='%231F4FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.seasonal i {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 500 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='0,31 18,14 36,45 54,17 72,42 90,18 108,46 126,16 144,43 162,20 180,44 198,17 216,41 234,15 252,44 270,20 288,42 306,18 324,45 342,15 360,44 378,17 396,41 414,19 432,46 450,18 468,40 486,17 500,31' fill='none' stroke='%232D67FF' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.residual i {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 500 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='0,31 20,33 38,28 61,35 84,26 105,31 128,34 147,29 168,32 190,30 212,36 234,27 256,33 278,29 300,31 322,34 344,28 366,31 388,35 410,26 432,33 454,29 476,32 500,30' fill='none' stroke='%238EC5FF' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.status-line {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.1rem;
  color: #2d3a56;
  font-size: 0.78rem;
  font-weight: 700;
}

.status-line span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #18a957;
}

.hero-points {
  padding: 1rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.05);
}

.hero-points ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-points li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 0.75rem;
  align-items: start;
  margin: 0;
  min-height: 88px;
  padding: 0.85rem;
  border: 1px solid var(--dt-border);
  border-radius: 8px;
  background: rgba(5, 8, 22, 0.42);
  color: var(--dt-muted-strong);
  font-size: 0.9rem;
  font-weight: 550;
}

.hero-points li::before {
  content: none;
}

.hero-points strong,
.hero-points small {
  display: block;
}

.hero-points strong {
  color: var(--dt-white);
  font-size: 0.92rem;
  line-height: 1.25;
}

.hero-points small {
  margin-top: 0.36rem;
  color: var(--dt-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.hero-points small b {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin: 0 0.3rem 0.3rem 0;
  padding: 0 0.42rem;
  border: 1px solid rgba(142, 197, 255, 0.24);
  border-radius: 999px;
  background: rgba(31, 79, 255, 0.15);
  color: #dbeaff;
  font-size: 0.7rem;
}

.point-icon,
.step-icon,
.card-icon {
  position: relative;
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid rgba(142, 197, 255, 0.26);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(31, 79, 255, 0.95), rgba(142, 197, 255, 0.16)),
    rgba(255, 255, 255, 0.06);
}

.point-icon::before,
.step-icon::before,
.card-icon::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 2px solid var(--dt-white);
  border-radius: 50%;
  opacity: 0.95;
}

.point-icon::after,
.step-icon::after,
.card-icon::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dt-blue-light);
  box-shadow: 0 0 0 3px rgba(5, 8, 22, 0.55);
}

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.5rem 0 3rem;
}

.trust-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 0.75rem;
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius);
  background: rgba(255, 255, 255, 0.045);
  color: var(--dt-muted-strong);
  font-size: 0.84rem;
  font-weight: 600;
}

.why-module {
  border: 1px solid var(--dt-border);
  border-radius: 10px;
}

.feature-section {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(430px, 1.18fr);
  gap: 1rem;
  align-items: stretch;
  margin: 1.4rem 0 3.4rem;
}

.why-module {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(520px, 1.15fr);
  gap: 1rem;
  margin: 1.4rem 0 3.4rem;
  padding: 1rem;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(31, 79, 255, 0.045)),
    rgba(255, 255, 255, 0.035);
}

.why-copy {
  padding: 0.6rem 0.4rem 0.6rem 0.6rem;
}

.why-copy h3 {
  margin: 1rem 0 0.8rem;
  max-width: 480px;
  font-size: 2rem;
  line-height: 1.1;
}

.why-table {
  display: grid;
  gap: 0.6rem;
}

.why-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.9fr);
  gap: 0.8rem;
  align-items: center;
  min-height: 74px;
  padding: 0.85rem 1rem;
  border: 1px solid var(--dt-border);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(233, 237, 243, 0.06), rgba(31, 79, 255, 0.055)),
    rgba(5, 8, 22, 0.38);
}

.why-row span {
  color: var(--dt-muted-strong);
}

.why-row strong {
  color: var(--dt-white);
}

.feature-copy,
.pipeline-panel {
  border: 1px solid var(--dt-border);
  border-radius: 10px;
}

.feature-copy {
  padding: 1.4rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.04);
}

.feature-copy h3 {
  margin: 1.2rem 0 0.8rem;
  max-width: 360px;
  font-size: 2rem;
  line-height: 1.1;
}

.feature-bullets {
  display: grid;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.feature-bullets span {
  position: relative;
  display: block;
  padding-left: 1.25rem;
  color: var(--dt-muted-strong);
  font-weight: 600;
}

.feature-bullets span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dt-blue-light);
}

.pipeline-panel {
  padding: 1rem;
  background:
    linear-gradient(135deg, rgba(31, 79, 255, 0.14), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.04);
}

.pipeline-flow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.pipeline-step {
  min-height: 168px;
  padding: 1rem;
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius);
  background: rgba(5, 8, 22, 0.56);
}

.pipeline-step strong,
.pipeline-step span {
  display: block;
}

.pipeline-step strong {
  margin-top: 1.2rem;
  margin-bottom: 0.8rem;
  color: var(--dt-white);
}

.pipeline-step span {
  color: var(--dt-muted);
  font-size: 0.9rem;
}

.info-grid,
.showcase-grid,
.method-use-grid,
.decision-grid,
.visual-card-grid {
  display: grid;
  gap: 0.85rem;
  margin: 1.2rem 0 3.2rem;
}

.info-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.showcase-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.method-use-grid,
.decision-grid,
.visual-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.info-card,
.showcase-card,
.visual-card,
.decision-card {
  position: relative;
  display: block;
  min-height: 176px;
  padding: 1rem;
  overflow: hidden;
  color: inherit !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.035);
}

.info-card::after,
.method-use-card::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: 12px;
  width: 78%;
  height: 54px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 420 54' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M0 22 C42 2 66 44 108 20 S178 8 220 26 S310 48 420 12' stroke='%231F4FFF' stroke-width='3' stroke-opacity='.42'/%3E%3Cpath d='M0 36 C110 34 160 30 240 24 S344 14 420 12' stroke='%2300A6A6' stroke-width='2.5' stroke-opacity='.28'/%3E%3Cpath d='M0 42 C26 34 48 50 74 42 S126 34 154 42 S206 50 234 42 S286 34 314 42 S374 50 420 42' stroke='%239AA8C7' stroke-width='2' stroke-opacity='.26'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.1;
  transform: scaleX(0.84);
  transform-origin: right center;
  transition: opacity 180ms ease, transform 220ms ease;
  pointer-events: none;
}

.info-card:hover::after,
.method-use-card:hover::after {
  opacity: 0.28;
  transform: scaleX(1.04);
}

.info-card > *,
.method-use-card > * {
  position: relative;
  z-index: 1;
}

.method-use-card {
  position: relative;
  min-height: 210px;
  overflow: hidden;
  border: 1px solid var(--dt-border);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.035);
  padding: 1rem;
}

.method-use-card:hover {
  border-color: rgba(142, 197, 255, 0.42);
}

.method-signature-banner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 1.2rem 0 2rem;
  padding: 1rem;
  overflow: hidden;
  border: 1px solid var(--dt-border);
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    rgba(255, 255, 255, 0.04);
  background-size: 34px 34px;
}

.method-signature-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 900 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M0 44 C70 12 110 88 180 42 S300 18 370 54 S520 96 900 30' stroke='%231F4FFF' stroke-width='3' stroke-opacity='.34'/%3E%3Cpath d='M0 78 C200 72 360 58 520 44 S730 26 900 24' stroke='%2300A6A6' stroke-width='3' stroke-opacity='.24'/%3E%3Cpath d='M0 96 C42 72 84 118 126 96 S210 72 252 96 S336 118 378 96 S480 72 522 96 S660 118 900 88' stroke='%239AA8C7' stroke-width='2.5' stroke-opacity='.22'/%3E%3C/g%3E%3C/svg%3E") center / 100% auto no-repeat;
}

.method-signature-banner span {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--dt-border);
  border-radius: 8px;
  background: rgba(5, 8, 22, 0.58);
  color: var(--dt-muted-strong);
  font-weight: 800;
}

.info-card:hover,
.showcase-card:hover,
.visual-card:hover,
.decision-card:hover {
  transform: translateY(-2px);
  border-color: rgba(142, 197, 255, 0.42);
  background:
    linear-gradient(180deg, rgba(31, 79, 255, 0.12), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.05);
}

.info-card h3,
.showcase-card h3,
.visual-card h3,
.decision-card h3 {
  margin: 1.55rem 0 0.58rem;
  color: var(--dt-white) !important;
}

.info-card p,
.showcase-card p,
.visual-card p,
.decision-card p {
  margin: 0;
  color: var(--dt-muted);
}

.showcase-card {
  min-height: 0;
  overflow: hidden;
  padding: 0;
  background: linear-gradient(160deg, rgba(30, 35, 55, 0.6), rgba(10, 15, 25, 0.95)) !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 15px 35px rgba(0, 0, 0, 0.4);
}

.showcase-card img {
  display: block;
  width: 88%;
  height: 220px;
  margin: 1.5rem auto 0;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: #11131e;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.6);
  transition: transform 300ms ease;
}

.visual-card img {
  display: block;
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-bottom: 1px solid var(--dt-border);
  background: var(--dt-white);
}

.showcase-card:hover img {
  transform: translateY(-4px) scale(1.02);
}

.showcase-card-body {
  padding: 1.5rem;
  position: relative;
  z-index: 2;
}

.visual-card-body {
  padding: 1rem;
}

.showcase-card-body h3,
.visual-card-body h3 {
  margin-top: 1rem;
}

.card-label {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 0.55rem;
  border: 1px solid rgba(142, 197, 255, 0.24);
  border-radius: 999px;
  background: rgba(31, 79, 255, 0.16);
  color: var(--dt-blue-light);
  font-size: 0.72rem;
  font-weight: 800;
}

.quant-home-feature,
.quant-column-stage {
  position: relative;
  display: grid;
  gap: clamp(1rem, 2vw, 1.6rem);
  overflow: hidden;
  border: 1px solid var(--dt-border);
  border-radius: 10px;
  background:
    radial-gradient(circle at 78% 12%, rgba(31, 79, 255, 0.22), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.028)),
    rgba(5, 8, 22, 0.62);
  box-shadow: var(--dt-shadow);
}

.quant-home-feature::before,
.quant-column-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, black, black 66%, transparent);
  opacity: 0.55;
  pointer-events: none;
}

.quant-home-feature > *,
.quant-column-stage > * {
  position: relative;
  z-index: 1;
}

.quant-home-feature {
  grid-template-columns: minmax(360px, 0.82fr) minmax(560px, 1.18fr);
  align-items: center;
  margin: 1.25rem 0 3.4rem;
  padding: clamp(1rem, 2.5vw, 1.7rem);
}

.quant-home-copy {
  padding: 0.4rem;
}

.quant-home-copy h3,
.quant-column-copy h2 {
  max-width: 560px;
  margin: 1rem 0 0.9rem;
  padding: 0;
  font-size: clamp(1.8rem, 2.55vw, 2.7rem);
  line-height: 1.07;
}

.quant-column-copy h2::after {
  display: none;
}

.quant-home-copy p,
.quant-column-copy p {
  max-width: 590px;
  color: var(--dt-muted-strong);
}

.quant-home-bullets {
  margin-top: 1.2rem;
}

.quant-home-actions {
  margin-top: 1.4rem;
}

.quant-workbench,
.quant-research-ui {
  overflow: hidden;
  border: 1px solid rgba(233, 237, 243, 0.14);
  border-radius: 10px;
  background:
    linear-gradient(155deg, rgba(31, 79, 255, 0.14), rgba(5, 8, 22, 0) 36%),
    #070a15;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 26px 60px rgba(0, 0, 0, 0.42);
}

.quant-workbench-top,
.quant-ui-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: center;
  min-height: 46px;
  padding: 0 1rem;
  border-bottom: 1px solid var(--dt-border);
  background: rgba(255, 255, 255, 0.045);
  color: var(--dt-muted);
  font-size: 0.76rem;
  font-weight: 750;
}

.quant-workbench-top b,
.quant-ui-bar span {
  justify-self: start;
  min-height: 24px;
  padding: 0.18rem 0.55rem;
  border: 1px solid rgba(142, 197, 255, 0.18);
  border-radius: 999px;
  background: rgba(31, 79, 255, 0.13);
  color: var(--dt-blue-light);
}

.quant-workbench-top i,
.quant-ui-bar i {
  color: #78dbcf;
  font-style: normal;
}

.quant-workbench-grid {
  display: grid;
  grid-template-columns: minmax(112px, 0.35fr) minmax(270px, 1fr) minmax(188px, 0.64fr);
  gap: 0.8rem;
  min-height: 396px;
  padding: 0.9rem;
}

.quant-universe,
.quant-notebook-stack,
.quant-ui-rail,
.quant-ui-cards {
  border: 1px solid var(--dt-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.quant-universe,
.quant-notebook-stack {
  display: grid;
  gap: 0.62rem;
  align-content: start;
  padding: 0.85rem;
}

.quant-universe small,
.quant-notebook-stack small {
  color: var(--dt-muted);
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.quant-universe strong,
.quant-notebook-stack strong {
  color: var(--dt-white);
  font-size: 0.88rem;
  line-height: 1.35;
}

.quant-universe span,
.quant-universe em,
.quant-notebook-stack span,
.quant-timeline span,
.quant-ui-cards span {
  min-width: 0;
  border: 1px solid var(--dt-border);
  border-radius: 7px;
  background: rgba(5, 8, 22, 0.6);
  color: var(--dt-muted-strong);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 720;
}

.quant-universe span,
.quant-universe em {
  min-height: 32px;
  padding: 0.38rem 0.5rem;
}

.quant-universe em {
  margin-top: 0.35rem;
  border-color: rgba(120, 219, 207, 0.22);
  color: #78dbcf;
}

.quant-signal-board,
.quant-ui-canvas {
  position: relative;
  display: grid;
  gap: 0.68rem;
  align-content: center;
  overflow: hidden;
  border: 1px solid var(--dt-border);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.042) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.036) 1px, transparent 1px),
    rgba(255, 255, 255, 0.025);
  background-size: 40px 40px;
}

.quant-signal-board {
  padding: 1rem;
}

.quant-price-chart,
.quant-component {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 0.62rem;
  align-items: center;
  min-height: 52px;
  padding: 0 0.7rem;
  border: 1px solid rgba(233, 237, 243, 0.09);
  border-radius: 8px;
  background: rgba(5, 8, 22, 0.55);
}

.quant-price-chart {
  min-height: 100px;
  background:
    linear-gradient(90deg, rgba(31, 79, 255, 0.2), rgba(5, 8, 22, 0.64)),
    rgba(5, 8, 22, 0.62);
}

.quant-price-chart span,
.quant-component span {
  color: var(--dt-muted-strong);
  font-size: 0.71rem;
  font-weight: 850;
}

.quant-price-chart i,
.quant-component i {
  display: block;
  height: 64px;
  border-radius: 6px;
  background-position: center;
  background-repeat: repeat-x;
  background-size: 520px 100%;
  animation: quant-pan 16s linear infinite;
}

.quant-component i {
  height: 34px;
  animation-duration: 12s;
}

.quant-price-chart i {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 520 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 73 L26 68 L45 74 L70 55 L92 61 L118 42 L145 50 L174 22 L198 35 L224 30 L250 47 L278 26 L302 39 L330 34 L362 50 L392 45 L420 62 L452 52 L486 72 L520 60' fill='none' stroke='%23E9EDF3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M0 80 C118 74 190 50 278 44 S420 60 520 34' fill='none' stroke='%231F4FFF' stroke-width='2.2' stroke-opacity='.76'/%3E%3C/svg%3E");
}

.quant-component.trend i {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 520 34' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 28 C102 28 160 25 220 20 S332 9 520 6' fill='none' stroke='%2300A6A6' stroke-width='2.7' stroke-linecap='round'/%3E%3C/svg%3E");
}

.quant-component.seasonal i {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 520 34' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 17 C20 2 40 32 60 17 S100 2 120 17 S160 32 180 17 S220 2 240 17 S280 32 300 17 S340 2 360 17 S400 32 420 17 S480 2 520 17' fill='none' stroke='%238EC5FF' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.quant-component.residual i {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 520 34' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 17 L25 21 L50 12 L75 19 L100 14 L125 18 L150 16 L175 22 L200 11 L225 17 L250 14 L275 20 L300 15 L325 18 L350 11 L375 22 L400 16 L425 19 L450 13 L475 18 L520 16' fill='none' stroke='%239AA8C7' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.quant-notebook-stack span {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 0.52rem;
  align-items: center;
  min-height: 62px;
  padding: 0.58rem;
  line-height: 1.3;
}

.quant-notebook-stack b {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 6px;
  background: rgba(31, 79, 255, 0.2);
  color: var(--dt-blue-light);
}

.quant-column-stage {
  grid-template-columns: minmax(310px, 0.68fr) minmax(540px, 1.32fr);
  align-items: center;
  margin: 1.5rem 0 2rem;
  padding: clamp(1rem, 2.6vw, 2rem);
}

.quant-stage-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.3rem;
}

.quant-stage-metrics span {
  display: inline-flex;
  gap: 0.36rem;
  align-items: baseline;
  min-height: 40px;
  padding: 0.42rem 0.7rem;
  border: 1px solid var(--dt-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--dt-muted-strong);
  font-size: 0.82rem;
  font-weight: 760;
}

.quant-stage-metrics b {
  color: var(--dt-white);
  font-size: 1.15rem;
}

.quant-ui-bar strong {
  color: var(--dt-white);
}

.quant-ui-body {
  display: grid;
  grid-template-columns: 88px minmax(320px, 1fr) 184px;
  gap: 0.75rem;
  min-height: 416px;
  padding: 0.8rem;
}

.quant-ui-rail,
.quant-ui-cards {
  display: grid;
  gap: 0.58rem;
  align-content: start;
  padding: 0.72rem;
}

.quant-ui-rail b {
  margin-bottom: 0.3rem;
  color: var(--dt-white);
  font-size: 0.78rem;
}

.quant-ui-rail span {
  display: grid;
  min-height: 40px;
  place-items: center;
  border: 1px solid var(--dt-border);
  border-radius: 7px;
  background: rgba(5, 8, 22, 0.58);
  color: var(--dt-muted);
  font-size: 0.72rem;
  font-weight: 820;
}

.quant-ui-canvas {
  align-content: start;
  padding: 0.72rem;
}

.quant-timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.quant-timeline span {
  display: grid;
  min-height: 30px;
  place-items: center;
  border-color: rgba(142, 197, 255, 0.16);
  background: rgba(31, 79, 255, 0.11);
  color: var(--dt-blue-light);
}

.quant-ui-cards span {
  display: block;
  min-height: 90px;
  padding: 0.72rem;
  line-height: 1.45;
}

.quant-ui-cards b {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--dt-white);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.quant-notebook-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 2.7rem;
}

.quant-notebook-grid a {
  position: relative;
  display: grid;
  gap: 0.52rem;
  min-height: 172px;
  overflow: hidden;
  padding: 0.9rem;
  border: 1px solid var(--dt-border);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.03);
  color: inherit !important;
}

.quant-notebook-grid a::before {
  content: "";
  height: 36px;
  margin: -0.9rem -0.9rem 0;
  border-bottom: 1px solid var(--dt-border);
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 420 42' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M0 18 C50 0 78 38 126 18 S220 3 280 24 S356 36 420 10' stroke='%231F4FFF' stroke-width='2.6' stroke-opacity='.68'/%3E%3Cpath d='M0 30 C108 30 198 20 420 8' stroke='%2300A6A6' stroke-width='2.2' stroke-opacity='.48'/%3E%3Cpath d='M0 34 C28 26 56 40 84 34 S140 26 168 34 S224 40 252 34 S310 26 338 34 S390 40 420 34' stroke='%239AA8C7' stroke-width='1.9' stroke-opacity='.4'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat,
    rgba(5, 8, 22, 0.42);
  opacity: 0.75;
  transition: opacity 180ms ease, transform 220ms ease;
}

.quant-notebook-grid a:hover {
  transform: translateY(-2px);
  border-color: rgba(142, 197, 255, 0.38);
  background:
    linear-gradient(180deg, rgba(31, 79, 255, 0.13), rgba(255, 255, 255, 0.03)),
    rgba(255, 255, 255, 0.045);
}

.quant-notebook-grid a:hover::before {
  opacity: 1;
  transform: scaleX(1.06);
}

.quant-notebook-grid span {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(142, 197, 255, 0.24);
  border-radius: 8px;
  background: rgba(31, 79, 255, 0.15);
  color: var(--dt-blue-light);
  font-size: 0.76rem;
  font-weight: 900;
}

.quant-notebook-grid strong {
  color: var(--dt-white);
  line-height: 1.25;
}

.quant-notebook-grid small {
  color: var(--dt-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.quant-notebook-browser {
  position: relative;
  display: grid;
  grid-template-columns: minmax(320px, 0.72fr) minmax(450px, 1.28fr);
  gap: 1rem;
  align-items: center;
  margin: 1.4rem 0 1rem;
  padding: clamp(1rem, 2.4vw, 1.6rem);
  overflow: hidden;
  border: 1px solid var(--dt-border);
  border-radius: 10px;
  background:
    radial-gradient(circle at 90% 18%, rgba(31, 79, 255, 0.2), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    rgba(5, 8, 22, 0.6);
}

.quant-notebook-browser::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.042) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: 0.5;
  pointer-events: none;
}

.quant-notebook-browser > * {
  position: relative;
  z-index: 1;
}

.quant-browser-copy h2 {
  margin: 0.9rem 0 0.8rem;
  padding: 0;
  font-size: clamp(1.8rem, 2.45vw, 2.6rem);
  line-height: 1.08;
}

.quant-browser-copy h2::after,
.quant-notebook-story h2::after {
  display: none;
}

.quant-browser-copy p {
  max-width: 560px;
  color: var(--dt-muted-strong);
}

.quant-notebook-map {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  min-height: 272px;
  align-items: stretch;
  padding: 0.8rem;
  overflow: hidden;
  border: 1px solid var(--dt-border);
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.048) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    rgba(5, 8, 22, 0.62);
  background-size: 36px 36px;
}

.quant-notebook-map span {
  position: relative;
  display: flex;
  min-height: 138px;
  align-items: flex-end;
  align-self: center;
  padding: 0.72rem;
  border: 1px solid var(--dt-border);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(31, 79, 255, 0.18), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.025);
  color: var(--dt-white);
  font-size: 0.78rem;
  font-weight: 820;
  line-height: 1.32;
}

.quant-notebook-map span::before {
  content: "";
  position: absolute;
  inset: 0.72rem 0.72rem auto;
  height: 50px;
  border-radius: 6px;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M0 24 C24 6 44 46 70 22 S120 10 180 18' stroke='%231F4FFF' stroke-width='2.4' stroke-opacity='.9'/%3E%3Cpath d='M0 36 C54 36 108 25 180 10' stroke='%2300A6A6' stroke-width='2' stroke-opacity='.72'/%3E%3Cpath d='M0 40 C18 32 34 46 52 40 S84 32 102 40 S142 46 180 36' stroke='%239AA8C7' stroke-width='1.8' stroke-opacity='.62'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat,
    rgba(5, 8, 22, 0.42);
}

.quant-notebook-map span:nth-child(2),
.quant-notebook-map span:nth-child(4) {
  min-height: 196px;
}

.quant-notebook-map span:nth-child(3) {
  min-height: 236px;
  border-color: rgba(142, 197, 255, 0.27);
}

.quant-web-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: center;
  margin: 0 0 1.25rem;
  padding: 0.82rem 1rem;
  border: 1px solid rgba(120, 219, 207, 0.18);
  border-radius: 8px;
  background: rgba(120, 219, 207, 0.06);
}

.quant-web-note strong {
  color: #9cebe0;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.quant-web-note span {
  color: var(--dt-muted-strong);
  font-size: 0.88rem;
}

.quant-notebook-stories {
  display: grid;
  gap: 0.85rem;
  margin: 1.2rem 0 3rem;
}

.quant-notebook-story {
  position: relative;
  scroll-margin-top: 92px;
  overflow: hidden;
  border: 1px solid var(--dt-border);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.065), rgba(31, 79, 255, 0.035)),
    rgba(255, 255, 255, 0.028);
}

.quant-notebook-story::after {
  content: "";
  position: absolute;
  right: -4%;
  top: -8px;
  width: min(46%, 410px);
  height: 92px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 420 92' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M0 38 C50 12 82 70 134 38 S240 18 300 48 S366 68 420 20' stroke='%231F4FFF' stroke-width='2.8' stroke-opacity='.52'/%3E%3Cpath d='M0 62 C132 58 240 38 420 18' stroke='%2300A6A6' stroke-width='2.3' stroke-opacity='.34'/%3E%3Cpath d='M0 74 C28 62 54 84 82 74 S140 62 168 74 S224 84 252 74 S312 62 340 74 S394 84 420 72' stroke='%239AA8C7' stroke-width='2' stroke-opacity='.32'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}

.quant-notebook-story header {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 0.9rem;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid var(--dt-border);
}

.quant-notebook-story header > span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(142, 197, 255, 0.28);
  border-radius: 9px;
  background: rgba(31, 79, 255, 0.17);
  color: var(--dt-blue-light);
  font-size: 0.86rem;
  font-weight: 900;
}

.quant-notebook-story h2 {
  margin: 0 0 0.24rem;
  padding: 0;
  font-size: clamp(1.24rem, 1.75vw, 1.7rem);
}

.quant-notebook-story header p {
  margin: 0;
  color: var(--dt-muted);
}

.quant-story-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.72rem;
  padding: 0.9rem;
}

.quant-story-grid > div {
  min-height: 168px;
  padding: 0.82rem;
  border: 1px solid var(--dt-border);
  border-radius: 8px;
  background: rgba(5, 8, 22, 0.5);
}

.quant-story-grid small,
.quant-code-card small {
  display: block;
  margin-bottom: 0.48rem;
  color: var(--dt-blue-light);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.quant-story-grid strong {
  display: block;
  margin-bottom: 0.52rem;
  color: var(--dt-white);
  line-height: 1.28;
}

.quant-story-grid p {
  margin: 0;
  color: var(--dt-muted);
  font-size: 0.87rem;
  line-height: 1.54;
}

.quant-code-card {
  display: grid;
  align-content: space-between;
  background:
    linear-gradient(135deg, rgba(31, 79, 255, 0.16), rgba(255, 255, 255, 0.03)),
    rgba(5, 8, 22, 0.58) !important;
}

.quant-code-card code {
  display: block;
  padding: 0.8rem;
  border-color: rgba(142, 197, 255, 0.16);
  background: rgba(5, 8, 22, 0.78);
  color: #bcdcff !important;
  line-height: 1.54;
  white-space: normal;
}

.quant-continue-grid .info-card {
  min-height: 146px;
}

footer,
.footer {
  border-top: 1px solid var(--dt-border);
  background: rgba(5, 8, 22, 0.92);
  color: var(--dt-muted);
}

@media (max-width: 1180px) {
  .hero-split,
  .why-module,
  .feature-section,
  .info-grid,
  .quant-home-feature,
  .quant-column-stage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-points ul {
    grid-template-columns: 1fr;
  }

  .quant-workbench-grid,
  .quant-ui-body,
  .quant-notebook-browser {
    grid-template-columns: minmax(108px, 0.3fr) minmax(280px, 1fr);
  }

  .quant-notebook-stack,
  .quant-ui-cards {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .navbar.navbar-dark .navbar-brand {
    height: 56px;
  }

  .navbar .container {
    min-height: 56px;
  }

  .hero-panel {
    padding: 1.3rem;
  }

  .hero-split,
  .why-module,
  .feature-section,
  .pipeline-flow,
  .info-grid,
  .showcase-grid,
  .quant-home-feature,
  .quant-column-stage,
  .quant-workbench-grid,
  .quant-ui-body,
  .quant-notebook-browser,
  .quant-story-grid {
    grid-template-columns: 1fr;
  }

  .why-row {
    grid-template-columns: 1fr;
  }

  .hero-copy h2 {
    font-size: 3rem;
  }

  .brand-logo {
    width: 180px;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .decomp-motion {
    grid-template-columns: 1fr;
  }

  .motion-orbit {
    justify-self: center;
  }

  .app-sidebar {
    display: none;
  }

  .window-topbar {
    grid-template-columns: 72px 1fr;
  }

  .window-actions {
    display: none;
  }

  .showcase-card {
    min-height: 0;
  }

  .showcase-card img {
    width: 88%;
  }

  .quant-notebook-stack,
  .quant-ui-cards {
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  .quant-notebook-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 0;
  }

  .quant-notebook-map span,
  .quant-notebook-map span:nth-child(2),
  .quant-notebook-map span:nth-child(3),
  .quant-notebook-map span:nth-child(4) {
    min-height: 128px;
  }

  .bs-docs-section table,
  .col-md-9 table,
  .col-md-12 table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 540px) {
  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.45rem;
  }

  .hero-copy h2 {
    font-size: 2.5rem;
  }

  .hero-actions a {
    width: 100%;
  }

  .signal-row {
    grid-template-columns: 70px 1fr;
  }

  .hero-logo-floating {
    width: 92px;
  }

  .method-signature-banner {
    grid-template-columns: 1fr 1fr;
  }

  .quant-price-chart,
  .quant-component {
    grid-template-columns: 1fr;
    min-height: 74px;
    padding: 0.65rem;
  }

  .quant-timeline {
    grid-template-columns: 1fr;
  }

  .quant-web-note {
    grid-template-columns: 1fr;
  }

  .quant-notebook-map {
    grid-template-columns: 1fr;
  }
}

@keyframes orbit-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse-node {
  0%,
  100% {
    transform: scale(0.82);
    opacity: 0.55;
  }
  50% {
    transform: scale(1.18);
    opacity: 1;
  }
}

@keyframes wave-pan {
  to {
    background-position-x: -420px;
  }
}

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes quant-pan {
  to {
    background-position-x: -520px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-orbit::before,
  .motion-orbit::after,
  .motion-orbit span,
  .motion-wave i,
  .hero-panel .hero-logo-floating,
  .hero-panel .hero-label,
  .hero-panel .hero-copy h2,
  .hero-panel .hero-kicker,
  .hero-panel .hero-copy > p:last-of-type,
  .hero-panel .hero-actions,
  .hero-panel .product-window,
  .hero-panel .decomp-motion,
  .hero-panel .hero-points li,
  .quant-price-chart i,
  .quant-component i {
    animation: none;
  }
}

/* ═════════════════════════════════════════════════════
   METHOD GALLERY — CARD GRID (DARK MODE SOFT)
   ═════════════════════════════════════════════════════ */

.gallery-intro {
  max-width: 680px;
  margin-bottom: 2.4rem;
}

.gallery-intro p {
  color: var(--dt-muted-strong);
  font-size: 1.05rem;
  line-height: 1.7;
}

.method-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
  margin: 0 0 3.2rem;
}

.method-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 220px;
  overflow: hidden;
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius-lg);
  background: var(--dt-panel);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  color: inherit !important;
  text-decoration: none !important;
  transition: transform 220ms cubic-bezier(.16,1,.3,1),
              border-color 180ms ease,
              box-shadow 220ms ease,
              background 180ms ease;
  cursor: pointer;
}

.method-card:hover {
  transform: translateY(-3px);
  border-color: rgba(142, 197, 255, 0.3);
  background: var(--dt-panel-strong);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}

.method-card:hover .method-card-art {
  opacity: 0.52;
}

.method-card:hover .method-card-arrow {
  opacity: 1;
  transform: translateX(3px);
  color: var(--dt-blue-light);
}

/* Card line-art header area */
.method-card-art {
  position: relative;
  height: 72px;
  overflow: hidden;
  border-bottom: 1px solid var(--dt-border);
  background:
    linear-gradient(135deg, rgba(31, 79, 255, 0.06), transparent 60%),
    rgba(255, 255, 255, 0.02);
  opacity: 0.38;
  transition: opacity 260ms ease;
}

.method-card-art svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Card body */
.method-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1rem 1.1rem 1.1rem;
}

.method-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.method-card-body h3 {
  margin: 0 !important;
  font-size: 1.04rem;
  font-weight: 750;
  color: var(--dt-text-heading) !important;
}

.method-card-body p {
  margin: 0;
  flex: 1;
  color: var(--dt-muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.method-card-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--dt-border);
}

.method-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 0.55rem;
  border: 1px solid rgba(142, 197, 255, 0.22);
  border-radius: 999px;
  background: rgba(31, 79, 255, 0.12);
  color: var(--dt-blue-light);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.method-badge.badge-multi {
  border-color: rgba(0, 166, 166, 0.22);
  background: rgba(0, 166, 166, 0.10);
  color: #00c2a8;
}

.method-badge.badge-channel {
  border-color: rgba(249, 115, 22, 0.22);
  background: rgba(249, 115, 22, 0.08);
  color: #f59e0b;
}

.method-badge.badge-skip {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(148, 163, 184, 0.06);
  color: var(--dt-muted);
}

.method-card-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  background: var(--dt-panel-strong);
  color: var(--dt-muted);
  font-size: 0.8rem;
  opacity: 0.5;
  transition: opacity 180ms ease, transform 180ms ease, color 180ms ease;
}

/* ═════════════════════════════════════════════════════
   METHOD DETAIL PAGES
   ═════════════════════════════════════════════════════ */

.method-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.2rem;
  color: var(--dt-muted) !important;
  font-size: 0.88rem;
  font-weight: 650;
  transition: color 160ms ease;
}

.method-detail-back:hover {
  color: var(--dt-blue-light) !important;
}

.method-detail-header {
  position: relative;
  margin-bottom: 2rem;
  padding: 1.6rem 1.8rem;
  overflow: hidden;
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius-lg);
  background:
    linear-gradient(135deg, rgba(31, 79, 255, 0.08), transparent 50%),
    var(--dt-panel);
}

.method-detail-header h1 {
  margin: 0 0 0.4rem !important;
  font-size: 2rem;
}

.method-detail-header p {
  margin: 0;
  color: var(--dt-muted-strong);
  font-size: 1rem;
}

.method-detail-header svg {
  position: absolute;
  right: 0;
  top: 0;
  width: 45%;
  height: 100%;
  opacity: 0.18;
}

.gallery-summary-section {
  margin-top: 3rem;
}

/* ═════════════════════════════════════════════════════
   GALLERY OUTPUT BOXES
   ═════════════════════════════════════════════════════ */

.gallery-note {
  padding: 1rem 1.2rem;
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius);
  background: var(--dt-panel);
  margin-bottom: 1.5rem;
}

.gallery-out {
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius);
  background: rgba(0, 0, 0, 0.4);
  padding: 0.8rem 1rem;
  margin: 0.8rem 0 1.2rem;
}

.gallery-out pre {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.notebook-transcript-note {
  margin-top: 0.8rem;
}

.notebook-cell {
  margin: 1.25rem 0 1.8rem;
  padding: 1rem;
  border: 1px solid rgba(142, 197, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.notebook-input-label,
.notebook-output-label {
  margin-bottom: 0.55rem;
  color: var(--dt-muted-strong);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.notebook-output {
  overflow-x: auto;
}

.notebook-output .notebook-output-label + pre,
.notebook-html-output,
.notebook-svg-output {
  margin-top: 0.4rem;
}

.notebook-html-output {
  overflow-x: auto;
}

.notebook-html-output table,
.notebook-output table {
  min-width: 560px;
  margin: 0.4rem 0 0.2rem;
  font-size: 0.88rem;
}

.notebook-output img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0.6rem 0 0;
  border-radius: 8px;
  background: #ffffff;
}

.notebook-error-label {
  color: #fca5a5;
}

.download-grid {
  display: grid;
  gap: 0.6rem;
  margin: 1rem 0 1.6rem;
}

.download-card {
  display: block;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius);
  background: var(--dt-panel);
  font-weight: 600;
  transition: border-color 180ms ease, background 180ms ease;
  color: var(--dt-text-heading) !important;
}

.download-card:hover {
  border-color: rgba(142, 197, 255, 0.3);
  background: var(--dt-panel-strong);
}

/* ═════════════════════════════════════════════════════
   RESPONSIVE — Gallery grid
   ═════════════════════════════════════════════════════ */

@media (max-width: 860px) {
  .method-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {
  .method-card-grid {
    grid-template-columns: 1fr;
  }

  .method-card {
    min-height: 180px;
  }

  .method-detail-header {
    padding: 1.2rem;
  }

  .method-detail-header h1 {
    font-size: 1.6rem;
  }
}