@charset "UTF-8";
@import url('dhruva-products.css');
@import url('dhruva-services.css');
/* ============================================================================
   DHRUVA TECHNOLOGIES — MODERN UI LAYER
   A premium, glass-refined design system built on the existing Dhruva brand.
   Brand tokens preserved: #0772b7 (blue) · #1bb24b (green) · #282f3b (ink)
   Type preserved: Spartan (display) · Inter (text) — both already self-hosted.
   Every class is `dt-` prefixed so this file co-exists with the legacy theme
   stylesheet on inner pages without collisions.

   CONTENTS
     1. Design tokens          10. Products
     2. Page base              11. Services
     3. Layout primitives      12. Applications
     4. Section headings       13. Stats
     5. Buttons                14. Engineering
     6. Glass surfaces         15. Clientele
     7. Circuit background     16. Contact
     8. Navbar                 17. Footer
     9. Hero                   18. Motion / responsive / a11y
   ==========================================================================*/

/* ---------------------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------------------ */
:root {
  /* Brand */
  --dt-blue: #0772b7;
  --dt-blue-300: #7cb9e0;
  --dt-blue-400: #3a94d0;
  --dt-blue-600: #0a5f9b;
  --dt-blue-700: #084b7c;
  --dt-blue-900: #06304f;
  --dt-green: #1bb24b;
  --dt-green-400: #4ecb77;
  --dt-green-600: #14913c;

  /* Neutrals */
  --dt-ink: #282f3b;
  --dt-ink-800: #1f2530;
  --dt-ink-900: #131922;
  --dt-body: #4a4e56;
  --dt-muted: #6f7784;
  --dt-faint: #99a1ad;
  --dt-line: #e4e7ee;
  --dt-line-soft: #eef1f7;
  --dt-surface: #ffffff;
  --dt-surface-2: #f7fafd;
  --dt-bg: #f0f3f9;

  /* Signature gradients */
  --dt-grad-brand: linear-gradient(135deg, #0982cd 0%, var(--dt-blue-600) 58%, #0b8f6b 145%);
  --dt-grad-deep: linear-gradient(158deg, #0b1a2b 0%, #0a2740 42%, #072f4e 74%, #073f5e 100%);
  --dt-grad-line: linear-gradient(90deg, transparent, var(--dt-blue) 22%, var(--dt-green) 78%, transparent);

  /* Radii */
  --dt-r-xs: 10px;
  --dt-r-sm: 14px;
  --dt-r-md: 18px;
  --dt-r-lg: 24px;
  --dt-r-xl: 32px;
  --dt-r-pill: 999px;

  /* Elevation */
  --dt-sh-xs: 0 1px 2px rgba(16, 32, 52, .06), 0 1px 1px rgba(16, 32, 52, .04);
  --dt-sh-sm: 0 4px 16px -6px rgba(16, 32, 52, .12);
  --dt-sh-md: 0 16px 38px -16px rgba(16, 32, 52, .20);
  --dt-sh-lg: 0 30px 64px -26px rgba(9, 30, 52, .30);
  --dt-sh-blue: 0 16px 34px -16px rgba(7, 114, 183, .58);
  --dt-sh-inset: inset 0 1px 0 rgba(255, 255, 255, .6);

  /* Glass */
  --dt-glass: rgba(255, 255, 255, .70);
  --dt-glass-strong: rgba(255, 255, 255, .88);
  --dt-glass-border: rgba(255, 255, 255, .80);
  --dt-glass-dark: rgba(11, 26, 43, .52);
  --dt-glass-dark-2: rgba(11, 26, 43, .74);
  --dt-glass-dark-border: rgba(255, 255, 255, .14);
  --dt-blur: 18px;
  --dt-blur-lg: 26px;

  /* Motion */
  --dt-ease: cubic-bezier(.22, .61, .36, 1);
  --dt-ease-out: cubic-bezier(.16, 1, .30, 1);
  --dt-t-fast: 200ms;
  --dt-t: 320ms;
  --dt-t-slow: 480ms;

  /* Type */
  --dt-font-display: "Spartan", "League Spartan", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --dt-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Rhythm */
  --dt-shell: 1280px;
  /* The wider rail the big image panels sit on: hero banner, Applications
     stage and the navbar all share it, so it has to be a token. */
  --dt-shell-wide: 1440px;
  --dt-gutter: clamp(18px, 4vw, 40px);
  --dt-section-y: clamp(64px, 7.2vw, 112px);
  --dt-nav-h: 76px;
}

/* ---------------------------------------------------------------------------
   2. PAGE BASE  (scoped to .dt-page so legacy pages stay untouched)
   ------------------------------------------------------------------------ */
.dt-page {
  margin: 0;
  font-family: var(--dt-font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--dt-body);
  background: var(--dt-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.dt-page *,
.dt-page *::before,
.dt-page *::after {
  box-sizing: border-box;
}

/* Base element styling is written through :where() so it carries (0,0,1)
   specificity. Every `dt-` component rule therefore wins without needing
   !important, however deeply nested it sits. */
:where(.dt-page) h1,
:where(.dt-page) h2,
:where(.dt-page) h3,
:where(.dt-page) h4,
:where(.dt-page) h5,
:where(.dt-page) h6 {
  font-family: var(--dt-font-display);
  color: var(--dt-ink);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.015em;
  margin: 0 0 .6em;
}

:where(.dt-page) p {
  margin: 0 0 1.1em;
}

:where(.dt-page) p:last-child {
  margin-bottom: 0;
}

:where(.dt-page) a {
  color: var(--dt-blue);
  text-decoration: none;
}

:where(.dt-page) img {
  max-width: 100%;
  height: auto;
  display: block;
}

:where(.dt-page) ul,
:where(.dt-page) ol {
  margin: 0;
  padding: 0;
}

:where(.dt-page) ul li,
:where(.dt-page) ol li {
  list-style: none;
  margin: 0;
}

:where(.dt-page) figure {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--dt-nav-h) + 28px);
}

.dt-page ::selection {
  background: rgba(7, 114, 183, .18);
  color: var(--dt-ink);
}

.dt-page :focus-visible,
.dt-nav :focus-visible,
.dt-drawer :focus-visible,
.dt-footer :focus-visible {
  outline: 2px solid var(--dt-blue);
  outline-offset: 3px;
  border-radius: 6px;
}

.dt-nav--scrolled :focus-visible {
  outline-color: var(--dt-blue);
}

.dt-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.dt-skip {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 3000;
  background: var(--dt-blue);
  color: #fff;
  padding: 12px 22px;
  border-radius: var(--dt-r-pill);
  font-weight: 600;
  font-size: 14px;
  transition: top var(--dt-t) var(--dt-ease);
}

.dt-skip:focus {
  top: 16px;
}

/* ---------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   ------------------------------------------------------------------------ */
.dt-shell {
  width: 100%;
  max-width: var(--dt-shell);
  margin-inline: auto;
  padding-inline: var(--dt-gutter);
  position: relative;
  z-index: 1;
}

.dt-shell--wide {
  max-width: var(--dt-shell-wide);
}

/* `clip` contains the circuit artwork exactly like `hidden` did, but without
   turning the section into a scroll container — which is what was stopping
   the sticky side rail on the detail pages from working. The `hidden`
   declaration stays as the fallback for browsers without `clip`. */
.dt-section {
  position: relative;
  padding-block: var(--dt-section-y);
  overflow: hidden;
  overflow: clip;
}

.dt-section--tight {
  padding-block: clamp(48px, 5.4vw, 80px);
}

.dt-section--soft {
  background: var(--dt-surface-2);
}

.dt-section--tint {
  background: linear-gradient(180deg, #fff 0%, var(--dt-bg) 30%, var(--dt-bg) 70%, #fff 100%);
}

.dt-section--dark {
  background: var(--dt-grad-deep);
  color: rgba(215, 231, 244, .76);
}

.dt-section--dark h2,
.dt-section--dark h3,
.dt-section--dark h4 {
  color: #fff;
}

/* Where two dark sections sit back to back, each one starts on the exact
   colour the previous one ended on, so the run reads as a single band. */
.dt-tone-deep {
  background: linear-gradient(180deg, #0b1a2b 0%, #0a2740 48%, #08334f 100%);
}

.dt-tone-mid {
  background: linear-gradient(180deg, #08334f 0%, #0a2841 36%, #071c2e 100%);
}

.dt-tone-close {
  background: linear-gradient(180deg, #071c2e 0%, #0a2740 44%, #0d1b2b 100%);
}

.dt-rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--dt-line) 18%, var(--dt-line) 82%, transparent);
}

.dt-rule--brand {
  background: var(--dt-grad-line);
  opacity: .5;
}

/* ---------------------------------------------------------------------------
   4. SECTION HEADINGS
   ------------------------------------------------------------------------ */
.dt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--dt-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dt-blue-600);
  background: rgba(7, 114, 183, .07);
  border: 1px solid rgba(7, 114, 183, .16);
  padding: 7px 16px;
  border-radius: var(--dt-r-pill);
  margin-bottom: 20px;
}

.dt-eyebrow--light {
  color: #d8ecfb;
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .18);
}

.dt-head {
  max-width: 740px;
}

.dt-head--center {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}

.dt-head h2 {
  font-size: clamp(1.8rem, 1.18rem + 2.2vw, 2.8rem);
  margin-bottom: 16px;
}

.dt-head p {
  font-size: clamp(1rem, .97rem + .18vw, 1.07rem);
  color: var(--dt-muted);
  margin-bottom: 0;
}

.dt-section--dark .dt-head p {
  color: rgba(210, 228, 243, .72);
}

.dt-headrow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: clamp(32px, 4vw, 52px);
}

.dt-headrow .dt-head {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   5. BUTTONS — one capsule system used everywhere
   ------------------------------------------------------------------------ */
.dt-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--dt-font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 17px 28px;
  min-height: 54px;
  border-radius: var(--dt-r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  isolation: isolate;
  transition: transform var(--dt-t) var(--dt-ease),
    box-shadow var(--dt-t) var(--dt-ease),
    background-color var(--dt-t) var(--dt-ease),
    border-color var(--dt-t) var(--dt-ease),
    color var(--dt-t) var(--dt-ease);
}

.dt-btn svg {
  width: 17px;
  height: 17px;
  flex: none;
  transition: transform var(--dt-t) var(--dt-ease-out);
}

.dt-btn:hover svg,
.dt-btn:focus-visible svg {
  transform: translateX(4px);
}

.dt-btn:active {
  transform: translateY(0) scale(.985);
}

.dt-btn--primary {
  background: var(--dt-blue);
  color: #fff;
  box-shadow: var(--dt-sh-blue), var(--dt-sh-inset);
}

.dt-btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  background: var(--dt-grad-brand);
  opacity: 0;
  transition: opacity var(--dt-t) var(--dt-ease);
}

.dt-btn--primary:hover,
.dt-btn--primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 22px 44px -18px rgba(7, 114, 183, .7), var(--dt-sh-inset);
}

.dt-btn--primary:hover::before,
.dt-btn--primary:focus-visible::before {
  opacity: 1;
}

.dt-btn--ghost {
  background: transparent;
  color: var(--dt-blue-600);
  border-color: rgba(7, 114, 183, .32);
}

.dt-btn--ghost:hover,
.dt-btn--ghost:focus-visible {
  background: var(--dt-blue);
  color: #fff;
  border-color: var(--dt-blue);
  transform: translateY(-2px);
  box-shadow: var(--dt-sh-blue);
}

.dt-btn--glass {
  background: rgba(255, 255, 255, .10);
  color: #fff;
  border-color: rgba(255, 255, 255, .30);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}

.dt-btn--glass:hover,
.dt-btn--glass:focus-visible {
  background: rgba(255, 255, 255, .95);
  color: var(--dt-blue-700);
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .55);
}

.dt-btn--sm {
  min-height: 46px;
  padding: 13px 22px;
  font-size: 14px;
}

.dt-btn--block {
  width: 100%;
}

.dt-btnset {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.dt-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--dt-font-body);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--dt-blue);
  transition: color var(--dt-t) var(--dt-ease);
}

.dt-link svg {
  width: 16px;
  height: 16px;
  transition: transform var(--dt-t) var(--dt-ease-out);
}

.dt-link:hover,
.dt-link:focus-visible {
  color: var(--dt-blue-700);
}

.dt-link:hover svg,
.dt-link:focus-visible svg {
  transform: translateX(4px);
}

/* ---------------------------------------------------------------------------
   6. GLASS SURFACES
   ------------------------------------------------------------------------ */
.dt-glass {
  background: var(--dt-glass);
  -webkit-backdrop-filter: blur(var(--dt-blur)) saturate(150%);
  backdrop-filter: blur(var(--dt-blur)) saturate(150%);
  border: 1px solid var(--dt-glass-border);
  border-radius: var(--dt-r-lg);
  box-shadow: var(--dt-sh-md), var(--dt-sh-inset);
}

.dt-glass--dark {
  background: var(--dt-glass-dark);
  border-color: var(--dt-glass-dark-border);
  box-shadow: var(--dt-sh-lg), inset 0 1px 0 rgba(255, 255, 255, .10);
  color: rgba(224, 237, 248, .82);
}

.dt-card {
  background: var(--dt-surface);
  border: 1px solid var(--dt-line);
  border-radius: var(--dt-r-lg);
  box-shadow: var(--dt-sh-sm);
}

/* ---------------------------------------------------------------------------
   7. SVG CIRCUIT BACKGROUND
   ------------------------------------------------------------------------ */
.dt-circuit {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(125% 95% at 50% 42%, #000 28%, rgba(0, 0, 0, .5) 62%, transparent 92%);
  mask-image: radial-gradient(125% 95% at 50% 42%, #000 28%, rgba(0, 0, 0, .5) 62%, transparent 92%);
}

.dt-circuit svg {
  width: 100%;
  height: 100%;
  display: block;
}

.dt-circuit--light {
  opacity: .55;
}

.dt-circuit--dark {
  opacity: .9;
}

.dt-circuit--edge {
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
}

.dt-trace {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dt-trace--a {
  stroke: var(--dt-blue);
  stroke-width: 1.1;
  opacity: .30;
}

.dt-trace--b {
  stroke: var(--dt-green);
  stroke-width: 1.1;
  opacity: .22;
}

.dt-trace--c {
  stroke: var(--dt-blue);
  stroke-width: .7;
  opacity: .15;
}

.dt-node {
  fill: var(--dt-blue);
  opacity: .38;
}

.dt-node--g {
  fill: var(--dt-green);
  opacity: .34;
}

.dt-pad {
  fill: none;
  stroke: var(--dt-blue);
  stroke-width: 1;
  opacity: .22;
}

.dt-circuit--dark .dt-trace--a {
  stroke: #4aa8e8;
  opacity: .32;
}

.dt-circuit--dark .dt-trace--b {
  stroke: #45cf7c;
  opacity: .24;
}

.dt-circuit--dark .dt-trace--c {
  stroke: #8fc9f0;
  opacity: .13;
}

.dt-circuit--dark .dt-node {
  fill: #6fc0f2;
  opacity: .5;
}

.dt-circuit--dark .dt-node--g {
  fill: #56d585;
  opacity: .45;
}

.dt-circuit--dark .dt-pad {
  stroke: #6fc0f2;
  opacity: .26;
}

.dt-node--pulse {
  animation: dt-node-pulse 3.8s var(--dt-ease) infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.dt-node--pulse:nth-of-type(2n) {
  animation-delay: .7s;
}

.dt-node--pulse:nth-of-type(3n) {
  animation-delay: 1.5s;
}

.dt-node--pulse:nth-of-type(5n) {
  animation-delay: 2.4s;
}

@keyframes dt-node-pulse {

  0%,
  100% {
    opacity: .26;
    transform: scale(1);
  }

  50% {
    opacity: .92;
    transform: scale(1.5);
  }
}

.dt-pulse {
  fill: none;
  stroke: var(--dt-green);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 30 1400;
  filter: drop-shadow(0 0 4px rgba(27, 178, 75, .8));
  animation: dt-pulse-run 8s linear infinite;
}

.dt-pulse--blue {
  stroke: #38a8f0;
  filter: drop-shadow(0 0 4px rgba(56, 168, 240, .8));
}

.dt-pulse--d1 {
  animation-delay: -1.6s;
}

.dt-pulse--d2 {
  animation-delay: -3.4s;
}

.dt-pulse--d3 {
  animation-delay: -5.6s;
}

@keyframes dt-pulse-run {
  from {
    stroke-dashoffset: 1430;
  }

  to {
    stroke-dashoffset: 0;
  }
}

.dt-gridwash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(7, 114, 183, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(7, 114, 183, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(100% 72% at 50% 40%, #000 18%, transparent 76%);
  mask-image: radial-gradient(100% 72% at 50% 40%, #000 18%, transparent 76%);
}

/* Ambient brand glow blobs */
.dt-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(80px);
}

.dt-glow--blue {
  background: rgba(7, 114, 183, .28);
}

.dt-glow--green {
  background: rgba(27, 178, 75, .18);
}

/* ---------------------------------------------------------------------------
   8. NAVBAR — floating, glass on scroll, full dropdown system
   ------------------------------------------------------------------------ */
.dt-nav {
  position: fixed;
  inset: 12px 0 auto;
  z-index: 1200;
  transition: inset var(--dt-t-slow) var(--dt-ease);
}

.dt-nav__inner {
  /* .dt-nav__shell already contributes the gutter, so subtracting it here
     lands the pill on exactly the same rail as the hero banner and the
     Applications stage, which are .dt-shell--wide minus that same gutter. */
  max-width: calc(var(--dt-shell-wide) - 2 * var(--dt-gutter));
  margin-inline: auto;
  padding: 10px clamp(14px, 2.2vw, 22px);
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  border-radius: var(--dt-r-pill);
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(var(--dt-blur-lg)) saturate(170%);
  backdrop-filter: blur(var(--dt-blur-lg)) saturate(170%);
  box-shadow: 0 10px 34px -18px rgba(11, 32, 54, .34), var(--dt-sh-inset);
  transition: background-color var(--dt-t-slow) var(--dt-ease),
    box-shadow var(--dt-t-slow) var(--dt-ease),
    border-radius var(--dt-t-slow) var(--dt-ease),
    padding var(--dt-t-slow) var(--dt-ease);
}

/* At the very top of the page the bar reads almost solid-white so the logo
   stays crisp; once scrolled it tightens and gains a stronger glass edge. */
.dt-nav--top .dt-nav__inner {
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 6px 20px -14px rgba(11, 32, 54, .28), var(--dt-sh-inset);
}

.dt-nav--scrolled {
  inset: 8px 0 auto;
}

.dt-nav--scrolled .dt-nav__inner {
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 16px 40px -20px rgba(11, 32, 54, .42), var(--dt-sh-inset);
  padding-block: 7px;
}

.dt-nav__shell {
  padding-inline: var(--dt-gutter);
}

.dt-nav__logo {
  display: flex;
  align-items: center;
  flex: none;
}

.dt-nav__logo img {
  height: 48px;
  width: auto;
  display: block;
  transition: height var(--dt-t-slow) var(--dt-ease), transform var(--dt-t) var(--dt-ease);
}

.dt-nav--scrolled .dt-nav__logo img {
  height: 42px;
}

.dt-nav__logo:hover img {
  transform: scale(1.03);
}

/* The nav takes the slack so it can be shared out; without this it is
   shrink-to-fit and every spare pixel piles up after the CTA instead. */
.dt-nav__nav {
  flex: 1 1 auto;
  display: flex;
}

/* Auto margins on both sides then centre the links in that slack, leaving
   matching gaps either side and equal padding at both ends of the pill. */
.dt-nav__menu {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-inline: auto;
}

.dt-nav__item {
  position: relative;
}

.dt-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--dt-font-body);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--dt-ink);
  padding: 11px 15px;
  border-radius: var(--dt-r-pill);
  white-space: nowrap;
  position: relative;
  transition: color var(--dt-t) var(--dt-ease), background-color var(--dt-t) var(--dt-ease);
}

.dt-nav__link .dt-caret {
  width: 11px;
  height: 11px;
  opacity: .5;
  transition: transform var(--dt-t) var(--dt-ease), opacity var(--dt-t) var(--dt-ease);
}

/* Active + hover indicator: a short brand underline that grows from centre */
.dt-nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--dt-grad-line);
  transform: translateX(-50%);
  transition: width var(--dt-t) var(--dt-ease-out);
}

.dt-nav__link:hover,
.dt-nav__link:focus-visible {
  color: var(--dt-blue);
  background: rgba(7, 114, 183, .06);
}

.dt-nav__link:hover::after,
.dt-nav__item:focus-within>.dt-nav__link::after {
  width: 22px;
}

.dt-nav__item--active>.dt-nav__link {
  color: var(--dt-blue);
}

.dt-nav__item--active>.dt-nav__link::after {
  width: 22px;
  background: var(--dt-blue);
}

.dt-nav__item:hover>.dt-nav__link .dt-caret,
.dt-nav__item:focus-within>.dt-nav__link .dt-caret {
  transform: rotate(180deg);
  opacity: .9;
}

/* Dropdowns ---------------------------------------------------------------*/
.dt-drop {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  min-width: 274px;
  padding: 10px;
  border-radius: var(--dt-r-md);
  background: rgba(255, 255, 255, .975);
  -webkit-backdrop-filter: blur(var(--dt-blur-lg)) saturate(170%);
  backdrop-filter: blur(var(--dt-blur-lg)) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: 0 26px 54px -24px rgba(11, 32, 54, .42), var(--dt-sh-inset);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.985);
  transform-origin: top left;
  transition: opacity var(--dt-t) var(--dt-ease),
    transform var(--dt-t) var(--dt-ease-out),
    visibility 0s linear var(--dt-t);
  z-index: 30;
}

/* Bridge the visual gap so the pointer can travel into the panel */
.dt-drop::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
}

.dt-nav__item:hover>.dt-drop,
.dt-nav__item:focus-within>.dt-drop,
.dt-nav__item.is-open>.dt-drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

.dt-drop__item {
  position: relative;
}

.dt-drop__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--dt-ink);
  border-radius: var(--dt-r-xs);
  transition: background-color var(--dt-t-fast) var(--dt-ease),
    color var(--dt-t-fast) var(--dt-ease),
    padding-left var(--dt-t-fast) var(--dt-ease);
}

.dt-drop__link:hover,
.dt-drop__link:focus-visible {
  background: rgba(7, 114, 183, .08);
  color: var(--dt-blue);
  padding-left: 18px;
}

.dt-drop__link .dt-caret {
  width: 11px;
  height: 11px;
  opacity: .45;
  transform: rotate(-90deg);
  flex: none;
}

/* Second and third level open to the side. This rule has to restore opacity
   and visibility as well as the transform — .dt-drop starts fully hidden, and
   without these two properties the nested panels can never appear. */
.dt-drop .dt-drop {
  top: -10px;
  left: calc(100% + 8px);
  transform: translateX(-8px) scale(.985);
  transform-origin: top left;
}

.dt-drop__item:hover>.dt-drop,
.dt-drop__item:focus-within>.dt-drop {
  opacity: 1;
  visibility: visible;
  transform: translateX(0) scale(1);
  transition-delay: 0s;
}

.dt-drop .dt-drop::before {
  left: -12px;
  right: auto;
  top: 0;
  bottom: 0;
  width: 12px;
  height: auto;
}

/* Panels that would run off the right edge open to the left instead. The
   class is applied by initDropdowns(), which measures the real position. */
.dt-drop--flip {
  left: auto;
  right: calc(100% + 8px);
  transform-origin: top right;
}

.dt-drop--flip.dt-drop {
  transform: translateX(8px) scale(.985);
}

.dt-drop__item:hover>.dt-drop--flip,
.dt-drop__item:focus-within>.dt-drop--flip {
  transform: translateX(0) scale(1);
}

.dt-drop--flip::before {
  left: auto;
  right: -12px;
}

.dt-nav__cta {
  flex: none;
  margin-left: 6px;
}

.dt-nav__cta .dt-btn {
  min-height: 46px;
  padding: 13px 22px;
  font-size: 14px;
}

/* Hamburger ---------------------------------------------------------------*/
.dt-burger {
  display: none;
  width: 46px;
  height: 46px;
  flex: none;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  border-radius: var(--dt-r-pill);
  border: 1px solid rgba(7, 114, 183, .2);
  background: rgba(7, 114, 183, .06);
  cursor: pointer;
  transition: background-color var(--dt-t) var(--dt-ease), border-color var(--dt-t) var(--dt-ease);
}

.dt-burger:hover {
  background: rgba(7, 114, 183, .12);
}

.dt-burger__box {
  position: relative;
  width: 19px;
  height: 13px;
}

.dt-burger__box span {
  position: absolute;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--dt-blue);
  width: 100%;
  transition: transform var(--dt-t) var(--dt-ease), opacity var(--dt-t-fast) var(--dt-ease), width var(--dt-t) var(--dt-ease);
}

.dt-burger__box span:nth-child(1) {
  top: 0;
}

.dt-burger__box span:nth-child(2) {
  top: 50%;
  margin-top: -1px;
  width: 74%;
}

.dt-burger__box span:nth-child(3) {
  bottom: 0;
}

.dt-burger[aria-expanded="true"] .dt-burger__box span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}

.dt-burger[aria-expanded="true"] .dt-burger__box span:nth-child(2) {
  opacity: 0;
  width: 0;
}

.dt-burger[aria-expanded="true"] .dt-burger__box span:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

/* Mobile drawer -----------------------------------------------------------*/
.dt-scrim {
  position: fixed;
  inset: 0;
  z-index: 1290;
  background: rgba(9, 22, 38, .5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dt-t) var(--dt-ease), visibility 0s linear var(--dt-t);
}

.dt-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1300;
  width: min(400px, 88vw);
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(var(--dt-blur-lg)) saturate(170%);
  backdrop-filter: blur(var(--dt-blur-lg)) saturate(170%);
  border-left: 1px solid rgba(255, 255, 255, .8);
  box-shadow: -30px 0 70px -30px rgba(9, 26, 45, .5);
  transform: translateX(102%);
  transition: transform var(--dt-t-slow) var(--dt-ease-out);
  overscroll-behavior: contain;
}

body.dt-drawer-open {
  overflow: hidden;
}

body.dt-drawer-open .dt-scrim {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

body.dt-drawer-open .dt-drawer {
  transform: translateX(0);
}

.dt-drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--dt-line-soft);
  flex: none;
}

.dt-drawer__top img {
  height: 36px;
  width: auto;
}

.dt-drawer__close {
  width: 42px;
  height: 42px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--dt-line);
  background: var(--dt-surface-2);
  color: var(--dt-ink);
  cursor: pointer;
  transition: background-color var(--dt-t) var(--dt-ease), transform var(--dt-t) var(--dt-ease), color var(--dt-t) var(--dt-ease);
}

.dt-drawer__close:hover {
  background: var(--dt-blue);
  color: #fff;
  transform: rotate(90deg);
}

.dt-drawer__close svg {
  width: 16px;
  height: 16px;
}

.dt-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 14px 22px;
  -webkit-overflow-scrolling: touch;
}

.dt-drawer__menu>li+li {
  border-top: 1px solid var(--dt-line-soft);
}

.dt-drawer__row {
  display: flex;
  align-items: stretch;
}

.dt-drawer__link {
  flex: 1 1 auto;
  display: block;
  padding: 14px 10px;
  font-family: var(--dt-font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--dt-ink);
  transition: color var(--dt-t-fast) var(--dt-ease), transform var(--dt-t-fast) var(--dt-ease);
}

.dt-drawer__link:hover {
  color: var(--dt-blue);
  transform: translateX(3px);
}

.dt-drawer__toggle {
  flex: none;
  width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--dt-muted);
  cursor: pointer;
  border-radius: var(--dt-r-xs);
  transition: background-color var(--dt-t-fast) var(--dt-ease), color var(--dt-t-fast) var(--dt-ease);
}

.dt-drawer__toggle svg {
  width: 13px;
  height: 13px;
  transition: transform var(--dt-t) var(--dt-ease);
}

.dt-drawer__toggle:hover {
  background: rgba(7, 114, 183, .08);
  color: var(--dt-blue);
}

.dt-drawer__toggle[aria-expanded="true"] {
  color: var(--dt-blue);
}

.dt-drawer__toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.dt-drawer__sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dt-t-slow) var(--dt-ease);
}

.dt-drawer__sub>div {
  overflow: hidden;
}

.dt-drawer__sub.is-open {
  grid-template-rows: 1fr;
}

.dt-drawer__sub ul {
  padding: 2px 0 12px 12px;
  border-left: 2px solid rgba(7, 114, 183, .14);
  margin-left: 8px;
}

.dt-drawer__sub .dt-drawer__link {
  font-family: var(--dt-font-body);
  font-size: 14px;
  font-weight: 500;
  padding: 10px;
  color: var(--dt-body);
}

.dt-drawer__sub .dt-drawer__sub ul {
  padding-bottom: 6px;
}

.dt-drawer__foot {
  padding: 16px 20px 22px;
  border-top: 1px solid var(--dt-line-soft);
  flex: none;
}

.dt-drawer__foot .dt-btn {
  width: 100%;
}

.dt-drawer__meta {
  margin-top: 14px;
  font-size: 13px;
  color: var(--dt-muted);
  text-align: center;
}

.dt-drawer__meta a {
  color: var(--dt-blue);
  font-weight: 600;
}

/* Spacer that keeps page content clear of the fixed bar */
.dt-nav-spacer {
  height: calc(var(--dt-nav-h) + 12px);
}

/* ---------------------------------------------------------------------------
   9. HERO — full-bleed banner carousel + proposition band

   The four banner artworks already carry a headline and a strapline in the
   pixels, so nothing is overlaid across their middle band. The page <h1> and
   lead sit in the band underneath, which keeps the copy as real, selectable,
   translatable text and avoids two headlines stacking on top of each other.
   ------------------------------------------------------------------------ */
.dt-hero {
  position: relative;
  /* Clears the fixed navbar so the banner starts below it rather than
     running underneath. Matches .dt-nav-spacer, used on the inner pages. */
  padding-top: calc(var(--dt-nav-h) + 24px);
  background: var(--dt-grad-deep);
  color: rgba(214, 231, 245, .8);
  overflow: hidden;
  isolation: isolate;
}

.dt-hero__glow-a {
  width: 640px;
  height: 640px;
  top: -220px;
  right: -140px;
}

.dt-hero__glow-b {
  width: 520px;
  height: 520px;
  bottom: -260px;
  left: -180px;
}

/* Carousel ---------------------------------------------------------------- */
.dt-banner {
  position: relative;
  z-index: 2;
}

.dt-banner__viewport {
  position: relative;
  width: 100%;
  /* The artwork ratio, so the baked-in headline is never cropped sideways.
     max-height only bites on short viewports, and then crops vertically. */
  aspect-ratio: 1900 / 966;
  max-height: 78vh;
  overflow: hidden;
  /* Same rounding and elevation as the Applications stage, so the two big
     image panels on the page read as one treatment. */
  border-radius: var(--dt-r-xl);
  box-shadow: var(--dt-sh-lg);
  background: #08192a;
  touch-action: pan-y;
  cursor: grab;
}

.dt-banner__viewport:active {
  cursor: grabbing;
}

.dt-banner__track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.dt-banner__track.is-dragging {
  transition: none !important;
}

.dt-banner__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 1;
  visibility: visible;
  overflow: hidden;
}

.dt-banner__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}

/* Control rail sits on the bottom edge. Every banner keeps its text in the
   vertical middle, so this never covers the message. */
.dt-banner__rail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  flex-wrap: wrap;
  padding: clamp(36px, 6vw, 64px) clamp(16px, 3vw, 32px) clamp(16px, 2vw, 24px);
  background: linear-gradient(180deg, rgba(6, 18, 32, 0) 0%, rgba(6, 18, 32, .5) 46%, rgba(6, 18, 32, .8) 100%);
  border-radius: 0 0 var(--dt-r-xl) var(--dt-r-xl);
  pointer-events: none;
}

.dt-banner__rail>* {
  pointer-events: auto;
}

.dt-banner__nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dt-banner__arrow {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background-color var(--dt-t) var(--dt-ease), color var(--dt-t) var(--dt-ease),
    transform var(--dt-t) var(--dt-ease), border-color var(--dt-t) var(--dt-ease);
}

.dt-banner__arrow svg {
  width: 16px;
  height: 16px;
}

.dt-banner__arrow:hover {
  background: #fff;
  color: var(--dt-blue-700);
  border-color: transparent;
  transform: translateY(-2px);
}

.dt-banner__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dt-banner__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  flex: none;
  border-radius: var(--dt-r-pill);
  cursor: pointer;
  background: rgba(255, 255, 255, .28);
  border: 1px solid rgba(255, 255, 255, .45);
  transition: width var(--dt-t) var(--dt-ease-out), background-color var(--dt-t) var(--dt-ease),
    border-color var(--dt-t) var(--dt-ease);
}

.dt-banner__dot:hover {
  background: rgba(255, 255, 255, .6);
}

.dt-banner__dot[aria-current="true"] {
  width: 26px;
  background: #fff;
  border-color: #fff;
}

.dt-banner__cta {
  gap: 10px;
}

/* Proposition band -------------------------------------------------------- */
.dt-hero__band {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(22px, 3.4vw, 56px);
  align-items: end;
  padding-block: clamp(34px, 4.6vw, 62px) clamp(40px, 5.6vw, 74px);
}

.dt-hero__title {
  font-size: clamp(1.85rem, 1.15rem + 2.6vw, 3.05rem);
  line-height: 1.1;
  letter-spacing: -.028em;
  color: #fff;
  margin: 0;
  text-wrap: balance;
}

.dt-hero__title em {
  font-style: normal;
  background: linear-gradient(100deg, #6fc0f2 0%, #4ecb77 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.dt-hero__lead {
  font-size: clamp(.98rem, .95rem + .2vw, 1.06rem);
  line-height: 1.72;
  color: rgba(206, 226, 243, .78);
  margin: 0 0 22px;
}

.dt-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dt-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(219, 235, 248, .9);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--dt-r-pill);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background-color var(--dt-t) var(--dt-ease), transform var(--dt-t) var(--dt-ease),
    border-color var(--dt-t) var(--dt-ease);
}

.dt-chip:hover {
  background: rgba(255, 255, 255, .11);
  border-color: rgba(255, 255, 255, .24);
  transform: translateY(-2px);
}

@keyframes dt-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-9px);
  }
}

/* ---------------------------------------------------------------------------
   10. ABOUT — split layout, glass quality panel
   ------------------------------------------------------------------------ */
.dt-about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4.5vw, 64px);
  align-items: center;
}

.dt-about__copy p {
  color: var(--dt-body);
  font-size: 1.02rem;
}

.dt-about__copy strong {
  color: var(--dt-ink);
  font-weight: 700;
}

.dt-about__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 28px 0 32px;
}

.dt-about__stat {
  padding: 18px 18px 16px;
  border-radius: var(--dt-r-md);
  background: var(--dt-surface);
  border: 1px solid var(--dt-line);
  box-shadow: var(--dt-sh-xs);
  transition: transform var(--dt-t) var(--dt-ease), box-shadow var(--dt-t) var(--dt-ease), border-color var(--dt-t) var(--dt-ease);
}

.dt-about__stat:hover {
  transform: translateY(-3px);
  box-shadow: var(--dt-sh-sm);
  border-color: rgba(7, 114, 183, .3);
}

.dt-about__stat b {
  display: block;
  font-family: var(--dt-font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.95rem);
  font-weight: 800;
  color: var(--dt-blue);
  line-height: 1.1;
  letter-spacing: -.02em;
}

.dt-about__stat span {
  display: block;
  font-size: 12.5px;
  color: var(--dt-muted);
  margin-top: 4px;
  line-height: 1.4;
}

/* Featured Video showcase card */
.dt-video-card {
  position: relative;
  border-radius: var(--dt-r-xl);
  overflow: hidden;
  box-shadow: var(--dt-sh-lg);
  background: var(--dt-surface);
  border: 1px solid var(--dt-line);
  display: flex;
  flex-direction: column;
}

.dt-video-card__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #08192a;
}

.dt-video-card__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.dt-video-card__caption {
  padding: 16px 20px;
  background: var(--dt-surface);
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--dt-line-soft);
}

.dt-video-card__badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dt-blue);
  background: rgba(7, 114, 183, .08);
  padding: 4px 10px;
  border-radius: var(--dt-r-pill);
  flex: none;
}

.dt-video-card__caption h3 {
  font-size: 14.5px;
  margin: 0;
  color: var(--dt-ink);
  font-weight: 600;
}

/* Quality panel sits on a rounded photo with a deep-blue veil */
.dt-quality {
  position: relative;
  border-radius: var(--dt-r-xl);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--dt-sh-lg);
  min-height: 520px;
  display: flex;
}

.dt-quality__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 900ms var(--dt-ease-out);
}

.dt-quality:hover .dt-quality__bg {
  transform: scale(1.05);
}

/* Weighted to the bottom, where the list sits, so the photograph still reads
   as a photograph across the upper half of the panel. */
.dt-quality::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(8, 26, 44, .42) 0%, rgba(7, 40, 66, .54) 38%, rgba(6, 44, 68, .72) 100%);
}

.dt-quality__panel {
  position: relative;
  z-index: 2;
  margin: auto;
  width: 100%;
  padding: clamp(28px, 3.4vw, 44px);
}

.dt-quality__panel h3 {
  color: #fff;
  font-size: clamp(1.35rem, 1.1rem + .8vw, 1.7rem);
  margin-bottom: 6px;
}

.dt-quality__panel>p {
  color: rgba(198, 222, 241, .72);
  font-size: 14.5px;
  margin-bottom: 24px;
}

.dt-quality__list {
  display: grid;
  gap: 2px;
}

.dt-quality__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--dt-r-xs);
  font-size: 14.4px;
  line-height: 1.55;
  color: rgba(226, 239, 250, .9);
  transition: background-color var(--dt-t) var(--dt-ease), transform var(--dt-t) var(--dt-ease);
}

.dt-quality__list li:hover {
  background: rgba(255, 255, 255, .07);
  transform: translateX(4px);
}

.dt-quality__list svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 2px;
  color: var(--dt-green-400);
}

/* ---------------------------------------------------------------------------
   11. PRODUCTS — full collection grid
   ------------------------------------------------------------------------ */
/* Six product families read best as an even 3 x 2 block; the auto-fit
   fallback keeps it sane on any width the explicit steps do not cover. */
.dt-prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: clamp(18px, 2vw, 26px);
}

@media (min-width: 1080px) {
  .dt-prod-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 700px) and (max-width: 1079px) {
  .dt-prod-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.dt-prod {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--dt-r-lg);
  overflow: hidden;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(var(--dt-blur)) saturate(150%);
  backdrop-filter: blur(var(--dt-blur)) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: var(--dt-sh-sm);
  transition: transform var(--dt-t-slow) var(--dt-ease-out),
    box-shadow var(--dt-t-slow) var(--dt-ease),
    border-color var(--dt-t-slow) var(--dt-ease),
    background-color var(--dt-t-slow) var(--dt-ease);
  isolation: isolate;
}

/* Accent hairline that reveals on hover */
.dt-prod::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  z-index: 4;
  background: var(--dt-grad-line);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dt-t-slow) var(--dt-ease-out);
}

.dt-prod:hover,
.dt-prod:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--dt-sh-md);
  border-color: rgba(7, 114, 183, .32);
  background: rgba(255, 255, 255, .9);
}

.dt-prod:hover::before,
.dt-prod:focus-within::before {
  transform: scaleX(1);
}

.dt-prod__media {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: linear-gradient(140deg, #e8eff7, #f7fafd);
  flex: none;
}

.dt-prod__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--dt-ease-out);
}

.dt-prod:hover .dt-prod__media img {
  transform: scale(1.06);
}

.dt-prod__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(8, 32, 54, .42) 100%);
  opacity: .55;
  transition: opacity var(--dt-t-slow) var(--dt-ease);
}

.dt-prod:hover .dt-prod__media::after {
  opacity: .85;
}

/* Category label: dark glass so it holds contrast over any product photo,
   revealed on hover rather than sitting on the image permanently. */
.dt-tag {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(10, 26, 44, .55);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--dt-r-pill);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--dt-t) var(--dt-ease), transform var(--dt-t) var(--dt-ease-out);
}

.dt-prod:hover .dt-tag,
.dt-prod:focus-within .dt-tag {
  opacity: 1;
  transform: none;
}

/* Touch devices never hover, so the category would simply be lost there. */
@media (hover: none) {
  .dt-tag {
    opacity: 1;
    transform: none;
  }
}

.dt-prod__body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.dt-prod__body h3 {
  font-size: 1.06rem;
  line-height: 1.35;
  margin-bottom: 10px;
  transition: color var(--dt-t) var(--dt-ease), transform var(--dt-t) var(--dt-ease);
}

.dt-prod:hover .dt-prod__body h3 {
  color: var(--dt-blue);
  transform: translateX(3px);
}

.dt-prod__body h3 a {
  color: inherit;
  text-decoration: none;
}

.dt-prod__media {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: linear-gradient(140deg, #e8eff7, #f7fafd);
  flex: none;
  display: block;
}

.dt-prod__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--dt-ease-out);
}

.dt-prod:hover .dt-prod__media img {
  transform: scale(1.06);
}

.dt-prod__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(8, 32, 54, .42) 100%);
  opacity: .55;
  transition: opacity var(--dt-t-slow) var(--dt-ease);
}

.dt-prod:hover .dt-prod__media::after {
  opacity: .85;
}

.dt-prod__desc {
  font-size: 14.2px;
  line-height: 1.62;
  color: var(--dt-muted);
  margin-bottom: 16px;
}

.dt-prod__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}

.dt-prod__specs li {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--dt-blue-700);
  background: rgba(7, 114, 183, .07);
  border: 1px solid rgba(7, 114, 183, .13);
  padding: 5px 11px;
  border-radius: var(--dt-r-pill);
  transition: background-color var(--dt-t) var(--dt-ease), border-color var(--dt-t) var(--dt-ease);
}

.dt-prod:hover .dt-prod__specs li {
  background: rgba(7, 114, 183, .11);
  border-color: rgba(7, 114, 183, .22);
}

.dt-prod__foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--dt-line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.dt-prod__foot .dt-link {
  font-size: 13.5px;
  transition: color var(--dt-t) var(--dt-ease);
}

.dt-prod__foot:hover .dt-link,
.dt-prod:hover .dt-link {
  color: var(--dt-blue-700);
}

.dt-prod__arrow {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--dt-blue);
  background: rgba(7, 114, 183, .08);
  border: 1px solid rgba(7, 114, 183, .14);
  transition: background-color var(--dt-t) var(--dt-ease), color var(--dt-t) var(--dt-ease),
    transform var(--dt-t) var(--dt-ease-out), box-shadow var(--dt-t) var(--dt-ease);
}

.dt-prod__arrow svg {
  width: 15px;
  height: 15px;
}

.dt-prod:hover .dt-prod__arrow,
.dt-prod__foot:hover .dt-prod__arrow {
  background: var(--dt-blue);
  color: #fff;
  transform: translateX(3px) rotate(-45deg);
  box-shadow: var(--dt-sh-blue);
}

/* Complete range index — every named product exposed, not buried in a menu */
.dt-range {
  position: relative;
  margin-top: clamp(28px, 3.4vw, 44px);
  padding: clamp(26px, 3.5vw, 42px);
  border-radius: var(--dt-r-xl);
  background: linear-gradient(135deg, rgba(244, 248, 252, 0.94) 0%, rgba(235, 244, 252, 0.88) 100%);
  border: 1px solid rgba(7, 114, 183, 0.18);
  box-shadow: 0 16px 40px rgba(7, 114, 183, 0.08), 0 2px 8px rgba(0, 0, 0, 0.03);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  overflow: hidden;
  color: var(--dt-body);
}

.dt-range__title {
  font-size: 1.12rem;
  font-weight: 700;
  color: #0b1c2e;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(7, 114, 183, 0.12);
  display: flex;
  align-items: center;
  gap: 12px;
}

.dt-range__title::after {
  content: "";
  flex: 1 1 auto;
  height: 1.5px;
  background: linear-gradient(90deg, #0772b7 0%, #4ecb77 60%, transparent 100%);
  opacity: .85;
}

.dt-range__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(20px, 2.4vw, 34px);
}

.dt-range__group h4 {
  font-family: var(--dt-font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #0772b7;
  margin-bottom: 14px;
}

.dt-range__group ul {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.dt-range__group a {
  display: inline-block;
  padding: 7.5px 15px;
  font-size: 13px;
  font-weight: 500;
  color: #1a334e;
  background: #ffffff;
  border: 1px solid rgba(7, 114, 183, 0.18);
  border-radius: var(--dt-r-pill);
  box-shadow: 0 2px 6px rgba(7, 114, 183, 0.04);
  transition: color var(--dt-t) var(--dt-ease), border-color var(--dt-t) var(--dt-ease),
    background-color var(--dt-t) var(--dt-ease), transform var(--dt-t) var(--dt-ease),
    box-shadow var(--dt-t) var(--dt-ease);
}

.dt-range__group a:hover,
.dt-range__group a:focus-visible {
  color: #ffffff;
  border-color: #0772b7;
  background: #0772b7;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(7, 114, 183, 0.28);
}

/* ---------------------------------------------------------------------------
   FOLLOW US ON SOCIAL MEDIA SECTION
   ------------------------------------------------------------------------ */
.dt-social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(24px, 3.2vw, 40px);
}

.dt-social-card {
  position: relative;
  border-radius: var(--dt-r-xl);
  overflow: hidden;
  background: var(--dt-surface);
  border: 1px solid var(--dt-line);
  box-shadow: var(--dt-sh-md);
  display: flex;
  flex-direction: column;
  transition: transform var(--dt-t-slow) var(--dt-ease-out), box-shadow var(--dt-t-slow) var(--dt-ease);
}

.dt-social-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--dt-sh-lg);
}

.dt-social-card__media {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: #08192a;
}

.dt-social-card__media:not([style*="height"]) {
  aspect-ratio: 16 / 9;
}

.dt-social-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--dt-ease-out);
}

.dt-social-card:hover .dt-social-card__media img {
  transform: scale(1.06);
}

.dt-social-card__play-overlay {
  position: absolute;
  inset: 0;
  background: rgba(6, 19, 32, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 300ms var(--dt-ease);
}

.dt-social-card:hover .dt-social-card__play-overlay {
  background: rgba(6, 19, 32, 0.2);
}

.dt-play-btn {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #ff0000;
  color: #fff;
  border: 0;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 25px rgba(255, 0, 0, 0.5);
  transition: transform 300ms var(--dt-ease-out), box-shadow 300ms var(--dt-ease-out);
}

.dt-play-btn svg {
  margin-left: 3px;
}

.dt-social-card:hover .dt-play-btn {
  transform: scale(1.12);
  box-shadow: 0 12px 30px rgba(255, 0, 0, 0.7);
}

.dt-social-card__badge-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--dt-r-pill);
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.dt-social-card__badge-tag--yt {
  background: rgba(230, 33, 23, 0.88);
  box-shadow: 0 4px 12px rgba(230, 33, 23, 0.4);
}

.dt-social-card__badge-tag--li {
  background: rgba(0, 119, 181, 0.88);
  box-shadow: 0 4px 12px rgba(0, 119, 181, 0.4);
}

.dt-social-card__body {
  padding: 24px 26px clamp(24px, 2.5vw, 30px);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.dt-social-card__profile {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.dt-social-card__avatar {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: #fff;
  border: 2px solid var(--dt-line);
  padding: 6px;
  object-fit: contain;
  box-shadow: var(--dt-sh-sm);
  flex: none;
}

.dt-social-card__profile h3 {
  font-size: 1.12rem;
  margin-bottom: 2px;
  color: var(--dt-ink);
  font-weight: 700;
}

.dt-social-card__handle {
  font-size: 12.5px;
  color: var(--dt-muted);
  font-weight: 500;
  display: block;
}

.dt-social-card__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--dt-body);
  margin-bottom: 24px;
  flex: 1 1 auto;
}

.dt-social-card__action {
  margin-top: auto;
}

/* Custom Social Buttons */
.dt-btn--yt {
  background: #e62117;
  color: #fff;
  border: 1px solid #d01c13;
  box-shadow: 0 4px 14px rgba(230, 33, 23, .28);
}

.dt-btn--yt:hover,
.dt-btn--yt:focus-visible {
  background: #cc180e;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(230, 33, 23, .4);
}

.dt-btn--li {
  background: #0077b5;
  color: #fff;
  border: 1px solid #00669c;
  box-shadow: 0 4px 14px rgba(0, 119, 181, .28);
}

.dt-btn--li:hover,
.dt-btn--li:focus-visible {
  background: #006093;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 119, 181, .4);
}

.dt-btn--tw {
  background: #0f1419;
  color: #fff;
  border: 1px solid #000000;
  box-shadow: 0 4px 14px rgba(15, 20, 25, .28);
}

.dt-btn--tw:hover,
.dt-btn--tw:focus-visible {
  background: #000000;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(15, 20, 25, .4);
}

.dt-btn--ig {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #fff;
  border: 1px solid #c4205f;
  box-shadow: 0 4px 14px rgba(220, 39, 67, .28);
}

.dt-btn--ig:hover,
.dt-btn--ig:focus-visible {
  filter: brightness(.94);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(220, 39, 67, .4);
}

.dt-btn--fb {
  background: #1877f2;
  color: #fff;
  border: 1px solid #0f66d6;
  box-shadow: 0 4px 14px rgba(24, 119, 242, .28);
}

.dt-btn--fb:hover,
.dt-btn--fb:focus-visible {
  background: #0f66d6;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(24, 119, 242, .4);
}

/* Social channels: one row that slides. Native horizontal scroll with snap
   gives swipe/drag/trackpad for free; JS adds arrows, dots and auto-advance.
   Three cards per view on desktop, two on tablets, one (with a peek of the
   next) on phones. */
.dt-social-slider {
  --dt-social-gap: clamp(20px, 2.4vw, 32px);
  --dt-social-per-view: 3;
  position: relative;
}

.dt-social-track {
  display: flex;
  gap: var(--dt-social-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Room for the cards' shadow and hover lift, which overflow would clip. */
  padding: 14px 10px 64px;
  margin: -14px -10px -40px;
  scrollbar-width: none;
}

.dt-social-track::-webkit-scrollbar {
  display: none;
}

.dt-social-track:focus-visible {
  outline: 2px solid var(--dt-blue);
  outline-offset: 4px;
  border-radius: var(--dt-r-xl);
}

.dt-social-track > .dt-social-card {
  flex: 0 0 calc((100% - (var(--dt-social-per-view) - 1) * var(--dt-social-gap)) / var(--dt-social-per-view));
  scroll-snap-align: start;
}

.dt-social-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 6px;
}

.dt-social-nav__btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--dt-line);
  background: var(--dt-surface);
  color: var(--dt-ink);
  box-shadow: var(--dt-sh-sm);
  cursor: pointer;
  transition: background-color var(--dt-t) var(--dt-ease), color var(--dt-t) var(--dt-ease),
    border-color var(--dt-t) var(--dt-ease), transform var(--dt-t) var(--dt-ease-out);
}

.dt-social-nav__btn svg {
  width: 18px;
  height: 18px;
}

.dt-social-nav__btn:hover,
.dt-social-nav__btn:focus-visible {
  background: var(--dt-blue);
  border-color: var(--dt-blue);
  color: #fff;
  transform: translateY(-2px);
}

.dt-social-nav__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dt-social-nav__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--dt-r-pill);
  background: rgba(7, 114, 183, .22);
  cursor: pointer;
  transition: width var(--dt-t) var(--dt-ease-out), background-color var(--dt-t) var(--dt-ease);
}

.dt-social-nav__dot[aria-current="true"] {
  width: 26px;
  background: var(--dt-blue);
}

/* Slider cards: the post is the hero. The embed sits in a tall rounded
   window inset from the card edge; profile, a two-line summary and a slim
   button sit compactly underneath. */
.dt-social-track > .dt-social-card {
  --dt-social-media-h: clamp(360px, 30vw, 420px);
  padding: 10px;
  border-radius: var(--dt-r-xl);
  box-shadow: var(--dt-sh-sm);
}

/* Hover depth without tilt: the card lifts, its shadow stacks into layers
   (contact, mid and a long soft cast tinted with the platform colour), and a
   light sheen catches the top edge so it reads as a raised 3D surface. */
.dt-social-track > .dt-social-card {
  --dt-social-glow: 7, 114, 183;
  transition: transform 520ms var(--dt-ease-out), box-shadow 520ms var(--dt-ease-out),
    border-color 520ms var(--dt-ease);
}

.dt-social-track > .dt-social-card:has(.dt-btn--yt) { --dt-social-glow: 230, 33, 23; }
.dt-social-track > .dt-social-card:has(.dt-btn--li) { --dt-social-glow: 0, 119, 181; }
.dt-social-track > .dt-social-card:has(.dt-btn--tw) { --dt-social-glow: 15, 20, 25; }
.dt-social-track > .dt-social-card:has(.dt-btn--ig) { --dt-social-glow: 220, 39, 67; }
.dt-social-track > .dt-social-card:has(.dt-btn--fb) { --dt-social-glow: 24, 119, 242; }

.dt-social-track > .dt-social-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .7) 0, rgba(255, 255, 255, 0) 12px),
    linear-gradient(0deg, rgba(var(--dt-social-glow), .07) 0, rgba(var(--dt-social-glow), 0) 120px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(var(--dt-social-glow), .12);
  opacity: 0;
  transition: opacity 520ms var(--dt-ease);
}

.dt-social-track > .dt-social-card:hover,
.dt-social-track > .dt-social-card:focus-within {
  transform: translateY(-8px);
  border-color: rgba(var(--dt-social-glow), .22);
  box-shadow:
    0 1px 2px rgba(16, 32, 52, .06),
    0 6px 12px -4px rgba(16, 32, 52, .10),
    0 18px 32px -14px rgba(16, 32, 52, .22),
    0 34px 60px -26px rgba(var(--dt-social-glow), .45);
}

.dt-social-track > .dt-social-card:hover::after,
.dt-social-track > .dt-social-card:focus-within::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .dt-social-track > .dt-social-card:hover,
  .dt-social-track > .dt-social-card:focus-within {
    transform: none;
  }
}

.dt-social-track .dt-social-card__media {
  height: var(--dt-social-media-h);
  border-radius: calc(var(--dt-r-xl) - 10px);
  border: 1px solid var(--dt-line-soft);
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

.dt-social-track .dt-social-card__body {
  padding: 14px 8px 6px;
}

.dt-social-track .dt-social-card__profile {
  gap: 10px;
  margin-bottom: 8px;
}

.dt-social-track .dt-social-card__avatar {
  width: 36px;
  height: 36px;
  padding: 4px;
  border-width: 1px;
  border-radius: 10px;
  box-shadow: none;
}

.dt-social-track .dt-social-card__profile h3 {
  font-size: .98rem;
  margin-bottom: 0;
}

.dt-social-track .dt-social-card__handle {
  font-size: 12px;
}

.dt-social-track .dt-social-card__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  flex: none;
  margin-bottom: 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--dt-muted);
}

.dt-social-track .dt-social-card__action .dt-btn {
  min-height: 42px;
  padding: 10px 18px;
  font-size: 13.5px;
}
@media (max-width: 1079px) {
  .dt-social-slider {
    --dt-social-per-view: 2;
  }
}

@media (max-width: 680px) {
  .dt-social-slider {
    --dt-social-per-view: 1.12;
    --dt-social-gap: 16px;
  }

  .dt-social-track > .dt-social-card {
    --dt-social-media-h: 380px;
  }
}
/* Seven services on a twelve-column frame: four cards of 3, then three of 4.
   Two full rows, no orphan cell. */
.dt-serv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
}

@media (min-width: 1080px) {
  .dt-serv-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .dt-serv {
    grid-column: span 3;
  }

  .dt-serv:nth-child(n+5) {
    grid-column: span 4;
  }
}

@media (min-width: 620px) and (max-width: 1079px) {
  .dt-serv-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.dt-serv {
  position: relative;
  display: block;
  min-height: 340px;
  border-radius: var(--dt-r-lg);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--dt-sh-md);
  transition: transform var(--dt-t-slow) var(--dt-ease-out), box-shadow var(--dt-t-slow) var(--dt-ease);
}

.dt-serv:hover,
.dt-serv:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--dt-sh-lg);
}

.dt-serv__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
  transition: transform 800ms var(--dt-ease-out), opacity 500ms var(--dt-ease), filter 500ms var(--dt-ease);
}

.dt-serv:hover .dt-serv__img {
  transform: scale(1.08);
  opacity: 1;
  filter: brightness(1.08) contrast(1.02);
}

.dt-serv::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(8, 24, 40, .05) 0%, rgba(8, 26, 44, .45) 55%, rgba(6, 38, 62, .88) 100%);
  transition: background var(--dt-t-slow) var(--dt-ease), opacity var(--dt-t-slow) var(--dt-ease);
}

.dt-serv:hover::after {
  background: linear-gradient(180deg, transparent 0%, rgba(5, 18, 32, 0.15) 45%, rgba(5, 18, 32, 0.78) 100%);
}

.dt-serv__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 22px 22px 24px;
  transition: transform var(--dt-t-slow) var(--dt-ease-out);
}

.dt-serv:hover .dt-serv__panel {
  transform: translateY(-6px);
}

.dt-serv__num {
  display: inline-block;
  font-family: var(--dt-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  color: rgba(180, 214, 240, .75);
  margin-bottom: 8px;
}

.dt-serv__panel h3 {
  color: #fff;
  font-size: 1.1rem;
  line-height: 1.32;
  margin-bottom: 0;
  position: relative;
  padding-bottom: 0;
}

.dt-serv__panel h3::after {
  content: "";
  display: block;
  height: 2px;
  width: 0;
  margin-top: 12px;
  border-radius: 2px;
  background: var(--dt-grad-line);
  transition: width var(--dt-t-slow) var(--dt-ease-out);
}

.dt-serv:hover .dt-serv__panel h3::after {
  width: 54px;
}

.dt-serv__more {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: #a9d4f2;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--dt-t-slow) var(--dt-ease), opacity var(--dt-t-slow) var(--dt-ease), margin-top var(--dt-t-slow) var(--dt-ease);
}

.dt-serv__more svg {
  width: 15px;
  height: 15px;
}

.dt-serv:hover .dt-serv__more,
.dt-serv:focus-visible .dt-serv__more {
  max-height: 40px;
  opacity: 1;
  margin-top: 14px;
}

/* ---------------------------------------------------------------------------
   13. APPLICATIONS — interactive selector
   ------------------------------------------------------------------------ */
/* Tabs sit in a row above the stage so the artwork gets the full container
   width. These banners are 1140x450, so width — not height — is what makes
   them bigger; extra height would only crop them. */
.dt-apps {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}

.dt-apps__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dt-apps__btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 220px;
  text-align: left;
  padding: 16px 20px;
  border-radius: var(--dt-r-md);
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: rgba(212, 231, 246, .82);
  font-family: var(--dt-font-body);
  font-size: 14.6px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dt-t) var(--dt-ease), border-color var(--dt-t) var(--dt-ease),
    color var(--dt-t) var(--dt-ease), transform var(--dt-t) var(--dt-ease);
}

.dt-apps__btn span.dt-apps__idx {
  font-family: var(--dt-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: rgba(150, 196, 232, .7);
  flex: none;
  width: 26px;
  transition: color var(--dt-t) var(--dt-ease);
}

.dt-apps__btn>svg {
  width: 16px;
  height: 16px;
  margin-left: auto;
  opacity: 0;
  flex: none;
  transition: opacity var(--dt-t) var(--dt-ease), transform var(--dt-t) var(--dt-ease-out);
}

.dt-apps__btn:hover {
  background: rgba(255, 255, 255, .09);
  color: #fff;
  transform: translateY(-2px);
}

.dt-apps__btn[aria-selected="true"] {
  background: rgba(255, 255, 255, .13);
  border-color: rgba(126, 198, 240, .4);
  color: #fff;
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .7);
}

.dt-apps__btn[aria-selected="true"] span.dt-apps__idx {
  color: var(--dt-green-400);
}

.dt-apps__btn[aria-selected="true"]>svg {
  opacity: 1;
}

.dt-apps__btn::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--dt-grad-line);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dt-t) var(--dt-ease-out);
}

.dt-apps__btn[aria-selected="true"]::before {
  transform: scaleX(1);
}

/* Exactly the source ratio, so the artwork is shown whole with no crop. */
.dt-apps__stage {
  position: relative;
  border-radius: var(--dt-r-xl);
  overflow: hidden;
  aspect-ratio: 1140 / 450;
  max-height: 620px;
  box-shadow: var(--dt-sh-lg);
}

.dt-apps__panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dt-t-slow) var(--dt-ease), visibility 0s linear var(--dt-t-slow);
}

.dt-apps__panel.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.dt-apps__panel img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 1200ms var(--dt-ease-out);
}

.dt-apps__panel.is-active img {
  transform: scale(1);
}

.dt-apps__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(8, 24, 40, .1) 0%, rgba(7, 30, 50, .62) 55%, rgba(6, 32, 54, .92) 100%);
}

.dt-apps__caption {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(22px, 3vw, 36px);
}

.dt-apps__caption h3 {
  color: #fff;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.55rem);
  max-width: 22em;
  margin-bottom: 16px;
}

.dt-apps__caption .dt-btn {
  min-height: 46px;
  padding: 13px 22px;
  font-size: 14px;
}

/* Infographic panels (lightning-detection applications) carry their own
   title and logo, so they are shown clean: no caption wash, no heading over
   the art, and nothing dims the image. "View More" is a frosted-glass
   capsule at the bottom centre that rises in on hover/focus (always shown on
   touch screens, which have no hover). Only the area under the capsule is
   blurred. */
.dt-apps__stage {
  background: #0a1626;
}

.dt-apps__panel--info::after {
  display: none;
}

.dt-apps__panel--info .dt-apps__caption {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  justify-content: center;
  padding: 0 16px clamp(14px, 2vw, 26px);
  background: none;
  pointer-events: none;
}

.dt-apps__panel--info .dt-apps__caption h3 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.dt-apps__panel--info .dt-apps__caption .dt-btn {
  pointer-events: auto;
  min-height: 46px;
  padding: 11px 26px;
  border-radius: var(--dt-r-pill);
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .1));
  border: 1px solid rgba(255, 255, 255, .45);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(255, 255, 255, .12),
    0 12px 30px -10px rgba(0, 0, 0, .55);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dt-t) var(--dt-ease), transform var(--dt-t) var(--dt-ease-out),
    background var(--dt-t) var(--dt-ease);
}

.dt-apps__panel--info:hover .dt-apps__caption .dt-btn,
.dt-apps__panel--info:focus-within .dt-apps__caption .dt-btn {
  opacity: 1;
  transform: none;
}

.dt-apps__panel--info .dt-apps__caption .dt-btn:hover,
.dt-apps__panel--info .dt-apps__caption .dt-btn:focus-visible {
  background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .16));
  transform: translateY(-2px);
}

@media (hover: none) {
  .dt-apps__panel--info .dt-apps__caption .dt-btn {
    min-height: 40px;
    padding: 9px 20px;
    font-size: 13px;
    opacity: 1;
    transform: none;
  }
}
/* Gallery layout (home Applications): the artwork takes the full width at
   2:1 (the infographics' own shape); underneath, the counter and arrows,
   then a strip of nine labelled thumbnails (the tabs) that scrolls sideways
   when the nine don't fit. */
.dt-apps--gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.dt-apps--gallery .dt-apps__stage {
  grid-column: 1 / -1;
  grid-row: 1;
  aspect-ratio: 2 / 1;
  max-height: none;
  min-width: 0;
}

.dt-apps--gallery .dt-apps__list {
  grid-column: 1;
  grid-row: 3;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  min-width: 0;
  padding: 4px 2px 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .22) transparent;
}

.dt-apps--gallery .dt-apps__nav {
  grid-column: 1;
  grid-row: 2;
  justify-self: end;
}

.dt-apps--gallery .dt-apps__btn {
  flex: 1 1 0;
  min-width: 132px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 8px 8px;
  padding: 6px 6px 10px;
  border-radius: var(--dt-r-md);
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font-size: 12.5px;
  line-height: 1.3;
  text-align: left;
  scroll-snap-align: start;
}

.dt-apps__thumb {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-radius: calc(var(--dt-r-md) - 6px);
  opacity: .62;
  filter: saturate(.7);
  transition: opacity var(--dt-t) var(--dt-ease), filter var(--dt-t) var(--dt-ease),
    transform var(--dt-t-slow) var(--dt-ease-out);
}

/* Number sits on the thumbnail as a badge, leaving the label full width. */
.dt-apps--gallery .dt-apps__btn span.dt-apps__idx {
  position: absolute;
  top: 11px;
  left: 11px;
  width: auto;
  padding: 2px 7px;
  border-radius: var(--dt-r-pill);
  background: rgba(6, 18, 32, .72);
  font-size: 10.5px;
  line-height: 1.4;
}

.dt-apps--gallery .dt-apps__btn > svg,
.dt-apps--gallery .dt-apps__btn::before {
  display: none;
}

.dt-apps--gallery .dt-apps__btn:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, .08);
}

.dt-apps--gallery .dt-apps__btn:hover .dt-apps__thumb {
  opacity: .9;
  filter: none;
}

.dt-apps--gallery .dt-apps__btn[aria-selected="true"] {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(126, 198, 240, .55);
  box-shadow: 0 0 0 1px rgba(126, 198, 240, .25), 0 14px 30px -18px rgba(0, 0, 0, .7);
}

.dt-apps--gallery .dt-apps__btn[aria-selected="true"] .dt-apps__thumb {
  opacity: 1;
  filter: none;
}

/* Progress line runs along the bottom edge of the active thumbnail. */
.dt-apps--gallery .dt-apps__btn::after {
  left: 8px;
  right: 8px;
  bottom: 4px;
}

@media (max-width: 900px) {
  .dt-apps--gallery {
    grid-template-columns: minmax(0, 1fr);
  }

  .dt-apps--gallery .dt-apps__btn {
    flex: 0 0 128px;
    padding: 6px 6px 10px;
    font-size: 12px;
  }

  /* Photo slides need height for their caption; infographics stay 2:1. */
  .dt-apps--gallery .dt-apps__stage {
    aspect-ratio: auto;
    min-height: 340px;
  }

  .dt-apps--gallery .dt-apps__stage:has(.dt-apps__panel--info.is-active) {
    aspect-ratio: 2 / 1;
    min-height: 0;
  }
}
/* Narrow screens: tabs scroll above the image (rules further down). An
   infographic keeps its 2:1 shape instead of the taller photo crop. */
@media (max-width: 900px) {
  .dt-apps__stage:has(.dt-apps__panel--info.is-active) {
    aspect-ratio: 2 / 1;
    min-height: 0;
  }

  .dt-apps__panel--info img {
    object-position: center;
  }
}
/* Auto-advance progress on the active application tab (home page). Shown
   only while the set is actually advancing, so a held set doesn't suggest
   it is about to move. */
.dt-apps__btn::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--dt-blue-400), var(--dt-green-400));
  transform: scaleX(var(--dt-tab-progress, 0));
  transform-origin: left center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dt-t) var(--dt-ease);
}

.dt-apps.is-autoplaying .dt-apps__btn[aria-selected="true"]::after {
  opacity: .9;
}

/* Swiping the artwork: no text/image selection while dragging. */
.dt-apps__stage {
  -webkit-user-select: none;
  user-select: none;
}
/* Gallery mode (home Applications): panels slide horizontally instead of
   crossfading. JS parks the incoming panel off-stage on the side it enters
   from and moves the outgoing one off the other side; these rules supply
   the resting states and the motion. */
.dt-apps--gallery .dt-apps__panel {
  opacity: 1;
  transform: translateX(100%);
  transition: transform 700ms cubic-bezier(.65, 0, .25, 1), visibility 0s linear 700ms;
}

.dt-apps--gallery .dt-apps__panel.is-active {
  transform: none;
  visibility: visible;
  transition: transform 700ms cubic-bezier(.65, 0, .25, 1), visibility 0s;
}

.dt-apps--gallery .dt-apps__panel.is-leaving {
  visibility: visible;
}

/* A little depth: the incoming image settles from a slight zoom, the
   outgoing one dims as it leaves. */
.dt-apps--gallery .dt-apps__panel img {
  transition: transform 1100ms var(--dt-ease-out), filter 700ms var(--dt-ease);
}

.dt-apps--gallery .dt-apps__panel.is-leaving img {
  filter: brightness(.55);
}

@media (prefers-reduced-motion: reduce) {
  .dt-apps--gallery .dt-apps__panel,
  .dt-apps--gallery .dt-apps__panel.is-active {
    transition: none;
  }
}

/* Gallery controls under the image: counter + previous / next. */
.dt-apps__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.dt-apps__count {
  margin: 0 8px 0 0;
  font-family: var(--dt-font-display);
  font-size: 14px;
  letter-spacing: .08em;
  color: rgba(196, 219, 238, .6);
}

.dt-apps__count b {
  font-size: 18px;
  color: #fff;
}

.dt-apps__arrow {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--dt-t) var(--dt-ease), border-color var(--dt-t) var(--dt-ease),
    transform var(--dt-t) var(--dt-ease-out);
}

.dt-apps__arrow svg {
  width: 17px;
  height: 17px;
}

.dt-apps__arrow:hover,
.dt-apps__arrow:focus-visible {
  background: var(--dt-blue);
  border-color: var(--dt-blue);
  transform: translateY(-2px);
}

/* Compact application chips shown under the stage */
.dt-apps__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.dt-apps__tags li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(214, 232, 246, .82);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--dt-r-pill);
  transition: background-color var(--dt-t) var(--dt-ease), color var(--dt-t) var(--dt-ease), transform var(--dt-t) var(--dt-ease);
}

.dt-apps__tags li:hover {
  background: rgba(255, 255, 255, .1);
  color: #fff;
  transform: translateY(-2px);
}

/* ---------------------------------------------------------------------------
   14. STATS
   ------------------------------------------------------------------------ */
.dt-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}

.dt-stat {
  position: relative;
  padding: 22px 24px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px dashed rgba(16, 42, 70, 0.18);
  box-shadow: 0 4px 20px -6px rgba(11, 32, 54, 0.05);
  text-align: left;
  overflow: hidden;
  transition: transform var(--dt-t-slow) var(--dt-ease-out), box-shadow var(--dt-t-slow) var(--dt-ease), border-color var(--dt-t-slow) var(--dt-ease);
}

.dt-stat:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px -8px rgba(11, 32, 54, 0.12);
  border-color: rgba(16, 185, 129, 0.4);
}

.dt-stat__header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dt-stat__ico {
  width: 36px;
  height: 36px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: transparent;
  border: none;
  color: #102a46;
  flex-shrink: 0;
}

.dt-stat__ico svg {
  width: 34px;
  height: 34px;
  stroke: #1e293b;
}

.dt-stat__num {
  font-family: var(--dt-font-display);
  font-size: clamp(2.2rem, 1.8rem + 1.2vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #059669;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 2px;
  margin: 0;
}

.dt-stat__num small {
  align-self: flex-start;
  margin-top: 0.12em;
  font-size: 0.48em;
  color: #94a3b8;
  font-weight: 400;
}

.dt-stat h3 {
  font-size: 1.02rem;
  font-weight: 700;
  color: #1e293b;
  margin: 16px 0 0;
  letter-spacing: 0;
  font-family: var(--dt-font-body);
  text-align: left;
}

/* ---------------------------------------------------------------------------
   15. ENGINEERING — technical showcase
   ------------------------------------------------------------------------ */
.dt-eng__grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 4.4vw, 64px);
  align-items: center;
}

.dt-eng__visual {
  position: relative;
}

.dt-eng__frame {
  position: relative;
  padding: 14px;
  border-radius: var(--dt-r-xl);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(var(--dt-blur));
  backdrop-filter: blur(var(--dt-blur));
  box-shadow: 0 40px 90px -44px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .14);
}

.dt-eng__frame img {
  width: 100%;
  border-radius: calc(var(--dt-r-xl) - 12px);
  transition: transform 900ms var(--dt-ease-out);
}

.dt-eng__frame:hover img {
  transform: scale(1.02);
}

.dt-eng__corner {
  position: absolute;
  width: 22px;
  height: 22px;
  z-index: 3;
  border: 2px solid rgba(110, 192, 242, .55);
  border-radius: 4px;
}

.dt-eng__corner--tl {
  top: -6px;
  left: -6px;
  border-right: 0;
  border-bottom: 0;
}

.dt-eng__corner--br {
  bottom: -6px;
  right: -6px;
  border-left: 0;
  border-top: 0;
}

.dt-eng__float {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-radius: var(--dt-r-md);
  background: rgba(11, 26, 43, .82);
  border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 24px 48px -22px rgba(0, 0, 0, .8);
  animation: dt-float 8s var(--dt-ease) infinite;
}

.dt-eng__float--a {
  left: -18px;
  top: 12%;
}

.dt-eng__float--b {
  right: -18px;
  bottom: 14%;
  animation-direction: reverse;
  animation-duration: 9.5s;
}

.dt-eng__float b {
  display: block;
  font-family: var(--dt-font-display);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

.dt-eng__float span {
  display: block;
  font-size: 12px;
  color: rgba(178, 208, 232, .7);
}

.dt-eng__float i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--dt-green-400);
  box-shadow: 0 0 0 4px rgba(78, 203, 119, .18);
  animation: dt-blink 2.6s var(--dt-ease) infinite;
}

@keyframes dt-blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .35;
  }
}

.dt-eng__points {
  display: grid;
  gap: 14px;
  margin-top: 32px;
}

.dt-eng__point {
  display: flex;
  gap: 16px;
  padding: 20px 22px;
  border-radius: var(--dt-r-md);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .11);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background-color var(--dt-t) var(--dt-ease), border-color var(--dt-t) var(--dt-ease), transform var(--dt-t) var(--dt-ease-out);
}

.dt-eng__point:hover {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(126, 198, 240, .3);
  transform: translateX(4px);
}

.dt-eng__point-ico {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(110, 192, 242, .12);
  border: 1px solid rgba(110, 192, 242, .2);
  color: #7cc9f4;
  transition: background-color var(--dt-t) var(--dt-ease), color var(--dt-t) var(--dt-ease);
}

.dt-eng__point:hover .dt-eng__point-ico {
  background: rgba(110, 192, 242, .2);
  color: #fff;
}

.dt-eng__point-ico svg {
  width: 21px;
  height: 21px;
}

.dt-eng__point h3 {
  font-size: 1rem;
  color: #fff;
  margin-bottom: 5px;
}

.dt-eng__point p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(196, 219, 238, .72);
  margin: 0;
}

/* Certification strip */
.dt-certs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.dt-certs li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .03em;
  color: rgba(214, 232, 246, .86);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--dt-r-pill);
  transition: background-color var(--dt-t) var(--dt-ease), transform var(--dt-t) var(--dt-ease);
}

.dt-certs li:hover {
  background: rgba(255, 255, 255, .11);
  transform: translateY(-2px);
}

/* Engineering on a light band (home page), so it no longer runs on from the
   dark Applications section above it. */
.dt-eng--light .dt-eng__frame {
  background: var(--dt-surface);
  border-color: var(--dt-line);
  box-shadow: var(--dt-sh-md);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.dt-eng--light .dt-eng__corner {
  border-color: rgba(7, 114, 183, .45);
}

.dt-eng--light .dt-eng__float {
  background: rgba(255, 255, 255, .94);
  border-color: var(--dt-line);
  box-shadow: var(--dt-sh-md);
}

.dt-eng--light .dt-eng__float b {
  color: var(--dt-ink);
}

.dt-eng--light .dt-eng__float span {
  color: var(--dt-muted);
}

.dt-eng--light .dt-eng__copy > p {
  color: var(--dt-muted);
}

.dt-eng--light .dt-eng__point {
  background: var(--dt-surface);
  border-color: var(--dt-line);
  box-shadow: var(--dt-sh-xs);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.dt-eng--light .dt-eng__point:hover {
  background: var(--dt-surface);
  border-color: rgba(7, 114, 183, .26);
  box-shadow: var(--dt-sh-sm);
}

.dt-eng--light .dt-eng__point-ico {
  background: rgba(7, 114, 183, .08);
  border-color: rgba(7, 114, 183, .14);
  color: var(--dt-blue);
}

.dt-eng--light .dt-eng__point:hover .dt-eng__point-ico {
  background: var(--dt-blue);
  color: #fff;
}

.dt-eng--light .dt-eng__point h3 {
  color: var(--dt-ink);
}

.dt-eng--light .dt-eng__point p {
  color: var(--dt-muted);
}

.dt-eng--light .dt-certs li {
  color: var(--dt-blue-600);
  background: rgba(7, 114, 183, .06);
  border-color: rgba(7, 114, 183, .16);
}

.dt-eng--light .dt-certs li:hover {
  background: rgba(7, 114, 183, .11);
}
/* ---------------------------------------------------------------------------
   16. CLIENTELE
   ------------------------------------------------------------------------ */
.dt-logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
}

.dt-logo {
  display: grid;
  place-items: center;
  min-height: 116px;
  padding: 22px;
  border-radius: var(--dt-r-md);
  background: rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(var(--dt-blur));
  backdrop-filter: blur(var(--dt-blur));
  border: 1px solid rgba(16, 42, 70, .09);
  box-shadow: var(--dt-sh-xs);
  transition: transform var(--dt-t-slow) var(--dt-ease-out), box-shadow var(--dt-t-slow) var(--dt-ease), border-color var(--dt-t-slow) var(--dt-ease);
}

.dt-logo img {
  max-height: 62px;
  width: auto;
  object-fit: contain;
  transition: transform var(--dt-t-slow) var(--dt-ease-out);
}

.dt-logo:hover {
  transform: translateY(-4px);
  box-shadow: var(--dt-sh-sm);
  border-color: rgba(7, 114, 183, .26);
}

.dt-logo:hover img {
  transform: scale(1.04);
}

/* Named-client marquee — a single, slow, pausable row */
.dt-marquee {
  position: relative;
  margin-top: clamp(28px, 3vw, 42px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.dt-marquee__track {
  display: flex;
  width: max-content;
  gap: 10px;
  animation: dt-marquee 64s linear infinite;
}

.dt-marquee:hover .dt-marquee__track,
.dt-marquee:focus-within .dt-marquee__track {
  animation-play-state: paused;
}

.dt-marquee__track li {
  flex: none;
  padding: 10px 20px;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--dt-body);
  background: var(--dt-surface);
  border: 1px solid var(--dt-line);
  border-radius: var(--dt-r-pill);
  transition: color var(--dt-t) var(--dt-ease), border-color var(--dt-t) var(--dt-ease), background-color var(--dt-t) var(--dt-ease);
}

.dt-marquee__track li:hover {
  color: var(--dt-blue);
  border-color: rgba(7, 114, 183, .32);
  background: rgba(7, 114, 183, .05);
}

@keyframes dt-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.dt-sectors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: clamp(28px, 3vw, 40px);
}

.dt-sectors li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--dt-blue-700);
  background: rgba(7, 114, 183, .06);
  border: 1px solid rgba(7, 114, 183, .14);
  border-radius: var(--dt-r-pill);
  transition: background-color var(--dt-t) var(--dt-ease), transform var(--dt-t) var(--dt-ease);
}

.dt-sectors li:hover {
  background: rgba(7, 114, 183, .11);
  transform: translateY(-2px);
}

/* ---------------------------------------------------------------------------
   17. CONTACT
   ------------------------------------------------------------------------ */
.dt-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(32px, 4vw, 60px);
  align-items: start;
}

.dt-contact__cards {
  display: grid;
  gap: 12px;
  margin-top: 32px;
}

.dt-contact__card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px;
  border-radius: var(--dt-r-md);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .11);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background-color var(--dt-t) var(--dt-ease), border-color var(--dt-t) var(--dt-ease), transform var(--dt-t) var(--dt-ease-out);
}

.dt-contact__card:hover {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(126, 198, 240, .3);
  transform: translateX(4px);
}

.dt-contact__ico {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(110, 192, 242, .12);
  border: 1px solid rgba(110, 192, 242, .2);
  color: #7cc9f4;
}

.dt-contact__ico svg {
  width: 20px;
  height: 20px;
}

.dt-contact__card h3 {
  font-family: var(--dt-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(160, 200, 232, .72);
  margin-bottom: 5px;
}

.dt-contact__card p,
.dt-contact__card a {
  font-size: 15px;
  color: #fff;
  margin: 0;
  font-weight: 500;
  line-height: 1.55;
}

.dt-contact__card a {
  transition: color var(--dt-t) var(--dt-ease);
}

.dt-contact__card a:hover {
  color: var(--dt-green-400);
}

/* Form ------------------------------------------------------------------- */
.dt-form {
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--dt-r-xl);
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(var(--dt-blur-lg)) saturate(160%);
  backdrop-filter: blur(var(--dt-blur-lg)) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 40px 90px -42px rgba(0, 0, 0, .7), var(--dt-sh-inset);
}

.dt-form__head {
  margin-bottom: 26px;
}

.dt-form__head h3 {
  font-size: 1.35rem;
  margin-bottom: 6px;
  color: var(--dt-ink);
}

.dt-form__head p {
  font-size: 14px;
  color: var(--dt-muted);
  margin: 0;
}

.dt-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.dt-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.dt-field--full {
  grid-column: 1 / -1;
}

.dt-field label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--dt-ink);
  text-transform: uppercase;
}

.dt-field label .dt-req {
  color: var(--dt-blue);
}

.dt-field__wrap>svg {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: #64748b;
  pointer-events: none;
  z-index: 5;
  transition: color 220ms ease, transform 220ms ease;
}

.dt-field__wrap:focus-within>svg {
  color: #0772b7 !important;
  transform: translateY(-50%) scale(1.08);
}

.dt-form input[type="text"],
.dt-form input[type="email"],
.dt-form input[type="tel"],
.dt-form textarea {
  width: 100%;
  font-family: var(--dt-font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--dt-ink);
  padding: 15px 18px 15px 44px;
  border-radius: var(--dt-r-sm);
  border: 1px solid var(--dt-line);
  background: var(--dt-surface-2);
  transition: border-color var(--dt-t) var(--dt-ease), background-color var(--dt-t) var(--dt-ease), box-shadow var(--dt-t) var(--dt-ease);
  -webkit-appearance: none;
  appearance: none;
}

.dt-form textarea {
  min-height: 132px;
  resize: vertical;
  padding-top: 15px;
}

.dt-form input::placeholder,
.dt-form textarea::placeholder {
  color: var(--dt-faint);
}

.dt-form input:hover,
.dt-form textarea:hover {
  border-color: #cdd6e4;
}

.dt-form input:focus,
.dt-form textarea:focus {
  outline: none;
  border-color: var(--dt-blue);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(7, 114, 183, .12);
}

.dt-form input:user-invalid,
.dt-form textarea:user-invalid {
  border-color: #d9534f;
}

.dt-form input:user-invalid:focus {
  box-shadow: 0 0 0 4px rgba(217, 83, 79, .12);
}

.dt-captcha {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.dt-captcha .dt-field {
  flex: 1 1 200px;
  min-width: 0;
}

.dt-captcha input {
  text-transform: uppercase;
  letter-spacing: .16em;
  padding-left: 44px;
}

.dt-captcha__img {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 6px;
  border-radius: var(--dt-r-sm);
  border: 1px solid var(--dt-line);
  background: var(--dt-surface-2);
}

.dt-captcha__img img {
  height: 44px;
  width: auto;
  border-radius: 8px;
  display: block;
}

.dt-captcha__refresh {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--dt-line);
  background: #fff;
  color: var(--dt-blue);
  cursor: pointer;
  transition: background-color var(--dt-t) var(--dt-ease), color var(--dt-t) var(--dt-ease), transform var(--dt-t) var(--dt-ease);
}

.dt-captcha__refresh svg {
  width: 15px;
  height: 15px;
}

.dt-captcha__refresh:hover {
  background: var(--dt-blue);
  color: #fff;
  transform: rotate(180deg);
}

.dt-form__submit {
  grid-column: 1 / -1;
  margin-top: 4px;
}

.dt-form__note {
  grid-column: 1 / -1;
  font-size: 12.5px;
  color: var(--dt-muted);
  margin: 0;
}

/* ---------------------------------------------------------------------------
   18. FOOTER
   ------------------------------------------------------------------------ */
.dt-footer {
  position: relative;
  background: linear-gradient(180deg, #0d1b2b 0%, #0b1826 55%, #091420 100%);
  color: rgba(184, 205, 224, .7);
  font-family: var(--dt-font-body);
  overflow: hidden;
  isolation: isolate;
}

.dt-footer__top {
  position: relative;
  z-index: 1;
  padding-block: clamp(52px, 6vw, 82px) clamp(34px, 4vw, 52px);
}

.dt-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, .85fr) minmax(0, 1.05fr) minmax(0, 1.3fr) minmax(0, 1.2fr);
  gap: clamp(26px, 3vw, 46px);
}

/* content-box so `height` sizes the logo itself — under the inherited
   border-box the padding was eating into it and rendering the mark at 30px. */
.dt-footer__brand img {
  box-sizing: content-box;
  height: 58px;
  width: auto;
  margin-bottom: 22px;
  background: #fff;
  padding: 13px 18px;
  border-radius: var(--dt-r-sm);
}

.dt-footer__brand p {
  font-size: 14px;
  line-height: 1.72;
  color: rgba(178, 201, 222, .7);
  max-width: 34ch;
}

.dt-footer h4 {
  font-family: var(--dt-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 18px;
}

.dt-footer__links li+li {
  margin-top: 10px;
}

.dt-footer__links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: rgba(178, 201, 222, .72);
  transition: color var(--dt-t) var(--dt-ease), transform var(--dt-t) var(--dt-ease);
}

.dt-footer__links a::before {
  content: "";
  width: 0;
  height: 1px;
  background: var(--dt-green-400);
  transition: width var(--dt-t) var(--dt-ease-out);
}

.dt-footer__links a:hover {
  color: #fff;
  transform: translateX(3px);
}

.dt-footer__links a:hover::before {
  width: 10px;
}

.dt-footer__contact li {
  display: flex;
  gap: 12px;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(178, 201, 222, .72);
}

.dt-footer__contact li+li {
  margin-top: 14px;
}

.dt-footer__contact svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 3px;
  color: #6fc0f2;
}

.dt-footer__contact a {
  color: rgba(178, 201, 222, .72);
  transition: color var(--dt-t) var(--dt-ease);
}

.dt-footer__contact a:hover {
  color: #fff;
}

.dt-footer__cta {
  margin-top: 22px;
}

.dt-footer__bottom {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-block: 22px;
}

.dt-footer__bottom-in {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px 26px;
  flex-wrap: wrap;
  text-align: center;
  font-size: 13px;
  color: rgba(160, 184, 206, .62);
}

.dt-footer__bottom a {
  color: rgba(190, 212, 232, .82);
  transition: color var(--dt-t) var(--dt-ease);
}

.dt-footer__bottom a:hover {
  color: #fff;
}

/* Floating utilities ------------------------------------------------------ */
.dt-whatsapp {
  display: none !important;
  position: fixed;
  right: 22px;
  bottom: 26px;
  z-index: 1100;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 14px 30px -12px rgba(37, 211, 102, .7);
  transition: transform var(--dt-t) var(--dt-ease), box-shadow var(--dt-t) var(--dt-ease);
}

.dt-whatsapp img,
.dt-whatsapp svg {
  width: 28px;
  height: 28px;
}

.dt-whatsapp:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 20px 38px -12px rgba(37, 211, 102, .8);
}

.dt-totop {
  position: fixed;
  right: 22px;
  bottom: 86px;
  z-index: 1100;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  cursor: pointer;
  color: var(--dt-blue);
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: var(--dt-sh-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--dt-t) var(--dt-ease), transform var(--dt-t) var(--dt-ease), visibility 0s linear var(--dt-t), background-color var(--dt-t) var(--dt-ease), color var(--dt-t) var(--dt-ease);
}

.dt-totop svg {
  width: 17px;
  height: 17px;
}

.dt-totop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.dt-totop:hover {
  background: var(--dt-blue);
  color: #fff;
}

/* ---------------------------------------------------------------------------
   19. SCROLL REVEAL & MICRO-INTERACTIONS
   ------------------------------------------------------------------------ */
/* The hidden start state is gated on `.dt-js`, which the inline head script
   sets before first paint. If scripting is unavailable the content simply
   renders in place rather than staying invisible forever. */
.dt-js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms var(--dt-ease-out), transform 700ms var(--dt-ease-out);
  will-change: opacity, transform;
}

.dt-js [data-reveal="left"] {
  transform: translateX(-26px);
}

.dt-js [data-reveal="right"] {
  transform: translateX(26px);
}

.dt-js [data-reveal="fade"] {
  transform: none;
}

.dt-js [data-reveal="zoom"] {
  transform: scale(.96);
}

.dt-js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Staggered children */
.dt-js [data-reveal-group]>* {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 640ms var(--dt-ease-out), transform 640ms var(--dt-ease-out);
}

.dt-js [data-reveal-group].is-in>* {
  opacity: 1;
  transform: none;
}

.dt-js [data-reveal-group].is-in>*:nth-child(1) {
  transition-delay: 0ms;
}

.dt-js [data-reveal-group].is-in>*:nth-child(2) {
  transition-delay: 70ms;
}

.dt-js [data-reveal-group].is-in>*:nth-child(3) {
  transition-delay: 140ms;
}

.dt-js [data-reveal-group].is-in>*:nth-child(4) {
  transition-delay: 210ms;
}

.dt-js [data-reveal-group].is-in>*:nth-child(5) {
  transition-delay: 280ms;
}

.dt-js [data-reveal-group].is-in>*:nth-child(6) {
  transition-delay: 350ms;
}

.dt-js [data-reveal-group].is-in>*:nth-child(7) {
  transition-delay: 420ms;
}

.dt-js [data-reveal-group].is-in>*:nth-child(8) {
  transition-delay: 490ms;
}

.dt-js [data-reveal-group].is-in>*:nth-child(n+9) {
  transition-delay: 560ms;
}

/* ---------------------------------------------------------------------------
   20. RESPONSIVE
   ------------------------------------------------------------------------ */
@media (max-width: 1280px) {
  .dt-nav__link {
    padding: 11px 12px;
    font-size: 14px;
  }
}

@media (max-width: 1150px) {

  .dt-nav__menu,
  .dt-nav__cta {
    display: none;
  }

  .dt-burger {
    display: inline-flex;
  }

  .dt-nav__inner {
    padding: 9px 10px 9px 16px;
  }

  .dt-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dt-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1024px) {
  :root {
    --dt-nav-h: 70px;
  }

  .dt-eng__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .dt-eng__float--a {
    left: 8px;
  }

  .dt-eng__float--b {
    right: 8px;
  }

  /* Below this width the two-column splits get too narrow to hold a headline
     and a visual side by side, so every split stacks. */
  .dt-hero__band {
    grid-template-columns: 1fr;
    gap: 26px;
    align-items: start;
  }

  .dt-about__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .dt-quality {
    min-height: 460px;
  }

  .dt-contact__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

@media (max-width: 900px) {

  /* Too narrow to wrap four tabs tidily — scroll them instead. */
  .dt-apps__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
  }

  .dt-apps__btn {
    flex: 0 0 auto;
    padding: 13px 18px;
    font-size: 13.6px;
  }

  .dt-apps__btn>svg {
    display: none;
  }

  /* At this width the source ratio would leave a strip too short for the
     caption, so the panel gets taller and crops toward the subject. */
  .dt-apps__stage {
    aspect-ratio: auto;
    min-height: 340px;
  }

  .dt-apps__panel img {
    object-position: 74% center;
  }
}

@media (max-width: 768px) {
  :root {
    --dt-section-y: clamp(52px, 8vw, 76px);
  }

  .dt-headrow {
    align-items: flex-start;
  }

  .dt-about__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .dt-about__stat {
    padding: 15px 13px;
  }

  .dt-quality {
    min-height: 0;
  }

  .dt-quality__panel {
    padding: 26px 22px;
  }

  .dt-eng__float {
    position: static;
    margin-top: 12px;
    animation: none;
  }

  .dt-eng__float--b {
    margin-bottom: 0;
  }

  .dt-serv {
    min-height: 300px;
  }

  .dt-serv__more {
    max-height: 40px;
    opacity: 1;
    margin-top: 14px;
  }

  .dt-serv__panel h3::after {
    width: 40px;
  }
}

@media (max-width: 640px) {
  :root {
    --dt-gutter: 10px;
  }

  .dt-nav {
    inset: 8px 0 auto;
  }

  .dt-nav__shell {
    padding-inline: var(--dt-gutter);
  }

  .dt-nav__inner {
    border-radius: var(--dt-r-lg);
    padding: 8px 8px 8px 14px;
  }

  .dt-nav__logo img,
  .dt-nav--scrolled .dt-nav__logo img {
    height: 36px;
  }

  .dt-hero__title {
    font-size: clamp(1.7rem, 1.2rem + 3vw, 2.3rem);
  }

  .dt-btnset .dt-btn {
    flex: 1 1 100%;
  }

  /* Mobile banner & page hero responsiveness fixes -------------------------- */
  /* The banner artwork is ~2:1 with its headline and product shot composed
     into it. Forcing a taller box here made object-fit: cover slice the sides
     off (the "GREEN MODULAR SHELTER" slide lost its first two characters), so
     the artwork ratio is honoured instead and the whole banner is shown. */
  .dt-banner__viewport {
    aspect-ratio: 1900 / 966;
    min-height: 0;
  }

  /* A sideways reveal starts the element 26px off its column. On a narrow
     screen that pushes it past the viewport, and .dt-page clips the overflow,
     so the panel reads as cut off at the right edge until the reveal fires.
     Reveal vertically here instead. */
  .dt-js [data-reveal="left"],
  .dt-js [data-reveal="right"] {
    transform: translateY(20px);
  }

  .dt-banner__rail {
    position: static;
    background: none;
    border-radius: 0;
    padding: 14px 0 0;
    justify-content: center;
  }

  .dt-banner__cta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .dt-banner__cta .dt-btn {
    width: 100%;
    white-space: normal;
    word-break: break-word;
    justify-content: center;
    padding: 12px 16px;
    min-height: 44px;
    font-size: 13.5px;
  }

  .dt-phero {
    padding-top: calc(var(--dt-nav-h) + 12px);
    padding-bottom: 24px;
  }

  .dt-phero__frame {
    aspect-ratio: auto !important;
    min-height: auto !important;
    height: auto !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: var(--dt-r-lg);
  }

  .dt-phero__inner {
    max-width: 100% !important;
    padding: clamp(20px, 4.5vw, 28px) clamp(16px, 4vw, 22px) !important;
  }

  .dt-crumb {
    font-size: 12px;
    margin-bottom: 8px;
    gap: 6px;
  }

  .dt-phero h1 {
    font-size: clamp(1.35rem, 5.5vw, 1.85rem) !important;
    line-height: 1.2;
    margin-bottom: 8px;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .dt-phero__chips {
    gap: 8px 6px;
    margin-top: 14px;
  }

  .dt-chip {
    padding: 6px 12px;
    font-size: 11.5px;
    line-height: 1.35;
    white-space: normal;
    word-break: break-word;
    max-width: 100%;
  }

  .dt-phero__cta {
    margin-top: 16px !important;
  }

  .dt-phero__cta .dt-btn {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    text-align: center;
    justify-content: center;
    padding: 12px 18px;
    min-height: 44px;
    font-size: 13.5px;
  }

  .dt-phero__frame::after {
    background: linear-gradient(180deg, rgba(6, 22, 38, 0.75) 0%, rgba(6, 22, 38, 0.95) 100%);
  }

  .dt-form__grid {
    grid-template-columns: 1fr;
  }

  .dt-captcha {
    flex-direction: column;
    align-items: stretch;
  }

  .dt-captcha__img {
    justify-content: center;
  }

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

  .dt-footer__contact-col {
    grid-column: 1 / -1;
  }

  .dt-footer__bottom-in {
    flex-direction: column;
    text-align: center;
  }

  .dt-whatsapp {
    width: 46px;
    height: 46px;
    right: 16px;
    bottom: 18px;
  }

  .dt-whatsapp img,
  .dt-whatsapp svg {
    width: 25px;
    height: 25px;
  }

  .dt-totop {
    width: 42px;
    height: 42px;
    right: 16px;
    bottom: 72px;
  }
}

@media (max-width: 480px) {
  .dt-about__stats {
    grid-template-columns: 1fr;
  }

  .dt-about__stat {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 13px 16px;
  }

  .dt-about__stat span {
    margin-top: 0;
  }

  .dt-quality__list li {
    padding: 9px 10px;
    font-size: 13.8px;
  }

  .dt-prod__body {
    padding: 18px 18px 20px;
  }

  .dt-marquee__track li {
    font-size: 12.5px;
    padding: 8px 15px;
  }

  .dt-logo {
    min-height: 96px;
    padding: 16px;
  }

  .dt-logo img {
    max-height: 48px;
  }
}

@media (max-width: 380px) {
  .dt-eyebrow {
    font-size: 11px;
    letter-spacing: .1em;
  }

  .dt-btn {
    font-size: 14px;
    padding: 15px 22px;
    min-height: 50px;
  }
}

/* Devices without backdrop-filter get solid, legible fallbacks */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {

  .dt-nav__inner,
  .dt-drop,
  .dt-drawer {
    background: rgba(255, 255, 255, .985);
  }

  .dt-glass,
  .dt-prod,
  .dt-stat,
  .dt-logo {
    background: #fff;
  }

  .dt-glass--dark,
  .dt-apps__btn,
  .dt-eng__point,
  .dt-contact__card,
  .dt-chip {
    background: rgba(11, 26, 43, .86);
  }

  .dt-form {
    background: #fff;
  }
}

/* ---------------------------------------------------------------------------
   21. REDUCED MOTION
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .dt-page *,
  .dt-nav *,
  .dt-drawer *,
  .dt-footer * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal],
  [data-reveal-group]>* {
    opacity: 1 !important;
    transform: none !important;
  }

  .dt-marquee__track {
    animation: none;
    transform: none;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
  }

  .dt-node--pulse,
  .dt-pulse,
  .dt-eng__float {
    animation: none !important;
  }

  .dt-pulse {
    opacity: 0;
  }

  /* The carousel does not autoplay here (initBanner checks the same query),
     but the controls stay live, so slides swap instantly instead of fading. */
  .dt-banner__slide {
    transition: none !important;
  }
}

/* Print — flatten to something sane */
@media print {

  .dt-nav,
  .dt-drawer,
  .dt-scrim,
  .dt-whatsapp,
  .dt-totop,
  .dt-circuit,
  .dt-glow,
  .dt-gridwash {
    display: none !important;
  }

  .dt-page {
    color: #000;
    background: #fff;
  }

  .dt-section {
    padding-block: 18px;
    break-inside: avoid;
  }
}

/* ---------------------------------------------------------------------------
   22. LEGACY PAGE BRIDGE
   The inner pages still use the original theme stylesheet for their body
   content. These rules let the new navbar + footer sit on top of it cleanly.
   ------------------------------------------------------------------------ */
/* Normalise the element defaults the legacy sheet applies globally, so the
   shared navbar / drawer / footer render identically on every page. */
:where(.dt-nav, .dt-drawer, .dt-footer) ul,
:where(.dt-nav, .dt-drawer, .dt-footer) ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(.dt-nav, .dt-drawer, .dt-footer) ul li,
:where(.dt-nav, .dt-drawer, .dt-footer) ol li {
  margin: 0;
  list-style: none;
}

:where(.dt-nav, .dt-drawer) p {
  margin: 0;
}

:where(.dt-nav, .dt-drawer, .dt-footer) img {
  display: block;
  max-width: 100%;
}

.dt-burger,
.dt-drawer__close,
.dt-drawer__toggle,
.dt-totop {
  font-family: var(--dt-font-body);
}

body.dt-legacy .dt-nav a,
body.dt-legacy .dt-drawer a,
body.dt-legacy .dt-footer a {
  transition-duration: var(--dt-t) !important;
}

body.dt-legacy .dt-drawer__meta,
body.dt-legacy .dt-drawer__meta a {
  font-size: 13px !important;
  line-height: 1.5 !important;
}

body.dt-legacy .dt-footer__brand p {
  font-size: 14px !important;
  line-height: 1.72 !important;
}

body.dt-legacy .dt-footer p,
body.dt-legacy .dt-footer li,
body.dt-legacy .dt-footer a {
  font-size: 14px !important;
  line-height: 1.72 !important;
}

body.dt-legacy .dt-footer__bottom-in,
body.dt-legacy .dt-footer__bottom-in a,
body.dt-legacy .dt-footer__bottom-in p {
  font-size: 13px !important;
}

body.dt-legacy .dt-footer h4 {
  font-size: 13px !important;
  color: #fff !important;
}

body.dt-legacy .dt-nav__link,
body.dt-legacy .dt-drop__link {
  font-size: 14.5px !important;
}

body.dt-legacy .dt-drop__link {
  font-size: 14px !important;
}

body.dt-legacy .dt-footer ul {
  padding-left: 0 !important;
}

body.dt-legacy .dt-footer li {
  list-style: none !important;
}

body.dt-legacy .dt-nav img,
body.dt-legacy .dt-drawer img,
body.dt-legacy .dt-footer img {
  display: block;
}

/* The legacy theme animates every anchor for half a second — opt our own
   components out so hovers stay in the 200–320ms band used site-wide. */
body.dt-legacy .dt-btn {
  transition-duration: var(--dt-t) !important;
}

/* ---------------------------------------------------------------------------
   23. INNER PAGE TEMPLATES

   Every inner page reduces to one of two archetypes, both opening with the
   same page hero:

     landing  →  .dt-phero  +  .dt-section > .dt-prose
     detail   →  .dt-phero  +  .dt-section > .dt-doc (.dt-side + .dt-prose)

   .dt-prose styles the body copy by element, so the existing editorial markup
   (h2 / p / ul / img / table) carries over untouched and only its presentation
   changes.
   ------------------------------------------------------------------------ */

/* 23.1 Page hero ---------------------------------------------------------- */
.dt-phero {
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--dt-nav-h) + 24px);
  padding-bottom: 36px;
  background: var(--dt-grad-deep);
  color: rgba(214, 231, 245, .8);
  overflow: hidden;
}

/* The banner is built from the brand gradient and the circuit artwork rather
   than stock photography, so every inner page opens on the same engineered
   surface as the rest of the site. */
.dt-phero__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1900 / 966;
  max-height: 78vh;
  min-height: 280px;
  border-radius: var(--dt-r-xl);
  overflow: hidden;
  box-shadow: var(--dt-sh-lg);
  display: flex;
  align-items: flex-end;
  background: #08192a;
}

/* Background image for page hero - 100% full visibility, crystal clear, matching home banner */
.dt-phero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  user-select: none;
  -webkit-user-drag: none;
}

/* Bottom-left text backdrop: keeps image 100% bright and clear while ensuring bottom-left text legibility */
.dt-phero__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(110% 110% at 0% 100%, rgba(5, 18, 32, 0.88) 0%, rgba(5, 18, 32, 0.5) 48%, transparent 80%),
    linear-gradient(90deg, rgba(5, 18, 32, 0.65) 0%, rgba(5, 18, 32, 0.25) 40%, transparent 70%);
  pointer-events: none;
}

/* Ambient brand accents, matching the home hero */
.dt-phero__glow-a {
  width: 420px;
  height: 420px;
  top: -180px;
  right: -80px;
  filter: blur(70px);
}

.dt-phero__glow-b {
  width: 340px;
  height: 340px;
  bottom: -180px;
  left: -60px;
  filter: blur(70px);
}

.dt-phero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: clamp(500px, 58%, 760px);
  padding: clamp(20px, 3.2vw, 42px);
}

.dt-phero h1 {
  color: #fff;
  font-size: clamp(1.7rem, 1.15rem + 2.2vw, 2.8rem);
  line-height: 1.12;
  letter-spacing: -.025em;
  margin: 0;
  max-width: 24ch;
  text-wrap: balance;
}

.dt-phero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, #6fc0f2 0%, #4ecb77 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.dt-phero__subtitle,
.dt-phero__inner .dt-eyebrow {
  display: none !important;
}

.dt-phero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

/* Breadcrumb */
.dt-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(200, 222, 241, .72);
  margin-bottom: 14px;
}

.dt-crumb a {
  color: rgba(200, 222, 241, .72);
  transition: color var(--dt-t) var(--dt-ease);
}

.dt-crumb a:hover {
  color: #fff;
}

.dt-crumb svg {
  width: 13px;
  height: 13px;
  opacity: .5;
  flex: none;
}

.dt-crumb [aria-current] {
  color: var(--dt-green-400);
}

/* 23.2 Document layout ---------------------------------------------------- */
.dt-doc {
  display: grid;
  grid-template-columns: minmax(0, 290px) minmax(0, 1fr);
  gap: clamp(24px, 3.2vw, 52px);
  align-items: start;
}

.dt-doc--plain {
  grid-template-columns: minmax(0, 1fr);
}

/* 23.3 Section side navigation -------------------------------------------- */
.dt-side {
  position: sticky;
  top: calc(var(--dt-nav-h) + 20px);
}

.dt-side__panel {
  padding: 22px;
  border-radius: var(--dt-r-lg);
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(var(--dt-blur)) saturate(150%);
  backdrop-filter: blur(var(--dt-blur)) saturate(150%);
  border: 1px solid rgba(16, 42, 70, .09);
  box-shadow: var(--dt-sh-sm);
}

.dt-side__title {
  font-family: var(--dt-font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dt-blue);
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--dt-line);
}

.dt-side__list {
  display: grid;
  gap: 2px;
}

.dt-side__list a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--dt-body);
  border-radius: var(--dt-r-xs);
  transition: background-color var(--dt-t) var(--dt-ease), color var(--dt-t) var(--dt-ease),
    padding-left var(--dt-t) var(--dt-ease);
}

.dt-side__list a::before {
  content: "";
  flex: none;
  width: 3px;
  align-self: stretch;
  border-radius: 3px;
  background: transparent;
  transition: background-color var(--dt-t) var(--dt-ease);
}

.dt-side__list a:hover {
  background: rgba(7, 114, 183, .06);
  color: var(--dt-blue);
  padding-left: 16px;
}

.dt-side__list a.is-active {
  background: rgba(7, 114, 183, .08);
  color: var(--dt-blue-700);
  font-weight: 600;
}

.dt-side__list a.is-active::before {
  background: var(--dt-blue);
}

/* A compact call-to-action under the section nav */
.dt-side__cta {
  margin-top: 14px;
  padding: 20px;
  border-radius: var(--dt-r-lg);
  background: var(--dt-grad-deep);
  color: rgba(210, 229, 245, .8);
  box-shadow: var(--dt-sh-md);
}

.dt-side__cta h3 {
  color: #fff;
  font-size: 1.02rem;
  margin-bottom: 6px;
}

.dt-side__cta p {
  font-size: 13.5px;
  line-height: 1.6;
  margin-bottom: 16px;
}

.dt-side__cta .dt-btn {
  width: 100%;
}

/* 23.4 Prose -------------------------------------------------------------- */
.dt-prose {
  max-width: 78ch;
  color: var(--dt-body);
  font-size: 1.02rem;
  line-height: 1.78;
}

.dt-doc .dt-prose {
  max-width: none;
}

/* When prose is applied straight to a shell it must keep the shell's width,
   otherwise the measure cap would shrink the whole page container. The cap
   then moves onto the text elements themselves, so paragraphs stay readable
   while figures, grids and panels still use the full container. */
.dt-prose.dt-shell {
  max-width: var(--dt-shell);
}

.dt-prose.dt-shell--wide {
  max-width: var(--dt-shell-wide);
}

.dt-prose.dt-shell>p,
.dt-prose.dt-shell>ul,
.dt-prose.dt-shell>ol,
.dt-prose.dt-shell>h2,
.dt-prose.dt-shell>h3,
.dt-prose.dt-shell>h4,
.dt-prose.dt-shell>h5,
.dt-prose.dt-shell>h6 {
  max-width: 78ch;
}

/* An eyebrow already provides the space above a heading */
.dt-prose .dt-eyebrow+h2,
.dt-prose .dt-eyebrow+h3 {
  margin-top: 0;
}

.dt-prose> :first-child {
  margin-top: 0;
}

.dt-prose> :last-child {
  margin-bottom: 0;
}

.dt-prose h2 {
  font-size: clamp(1.42rem, 1.15rem + .85vw, 1.95rem);
  margin: 2em 0 .7em;
  letter-spacing: -.02em;
}

.dt-prose h3 {
  font-size: clamp(1.12rem, 1.02rem + .4vw, 1.35rem);
  margin: 1.8em 0 .6em;
}

.dt-prose h4,
.dt-prose h5,
.dt-prose h6 {
  font-size: 1.02rem;
  margin: 1.6em 0 .5em;
}

/* The first heading of a block should not push the block open */
.dt-prose>h2:first-child,
.dt-prose>h3:first-child {
  margin-top: 0;
}

/* A hairline under section headings keeps long technical pages scannable */
.dt-prose h2::after {
  content: "";
  display: block;
  width: 54px;
  height: 2px;
  margin-top: 14px;
  border-radius: 2px;
  background: var(--dt-grad-line);
}

.dt-prose p {
  margin: 0 0 1.15em;
}

.dt-prose strong,
.dt-prose b {
  color: var(--dt-ink);
  font-weight: 700;
}

.dt-prose a:not(.dt-btn):not(.dt-figure) {
  color: var(--dt-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.dt-prose a:not(.dt-btn):not(.dt-figure):hover {
  color: var(--dt-blue-700);
}

.dt-prose ul,
.dt-prose ol {
  margin: 0 0 1.3em;
  padding: 0;
}

.dt-prose ul li,
.dt-prose ol li {
  position: relative;
  padding-left: 26px;
  margin-bottom: .55em;
  line-height: 1.7;
  list-style: none;
}

.dt-prose ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .68em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--dt-blue);
  opacity: .55;
}

.dt-prose ol,
.dt-card ol {
  counter-reset: dt-ol;
}

.dt-prose ol>li,
.dt-card ol>li {
  counter-increment: dt-ol;
  position: relative;
  padding-left: 28px;
  margin-bottom: .7em;
  line-height: 1.7;
  list-style: none;
}

.dt-prose ol>li::before,
.dt-card ol>li::before {
  content: counter(dt-ol);
  position: absolute;
  left: 0;
  top: .15em;
  font-family: var(--dt-font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--dt-blue);
  background: rgba(7, 114, 183, .12);
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 6px;
}

/* Sub-lists (nested ol e.g. type="a") */
.dt-prose ol ol,
.dt-card ol ol {
  counter-reset: none !important;
  margin: 6px 0 10px 8px;
  padding-left: 20px;
}

.dt-prose ol ol>li,
.dt-card ol ol>li {
  counter-increment: none !important;
  list-style-type: lower-alpha !important;
  position: static;
  padding-left: 4px;
  margin-bottom: .35em;
  line-height: 1.65;
  color: var(--dt-body);
  font-size: 0.96rem;
}

.dt-prose ol ol>li::before,
.dt-card ol ol>li::before {
  content: none !important;
  display: none !important;
}

.dt-prose li>ul,
.dt-prose li>ol {
  margin: .5em 0 .2em;
}

/* Executive Clientele Grid & Icon Points */
.dt-client-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 10px 16px;
  line-height: 1.5;
  font-size: 0.95rem;
  margin-top: 20px;
  padding: 0;
  list-style: none !important;
}

.dt-client-list li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px solid rgba(8, 25, 42, 0.07);
  border-radius: 10px;
  color: var(--dt-navy);
  font-weight: 500;
  line-height: 1.4;
  list-style: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.dt-client-list li:hover {
  background: #ffffff;
  border-color: rgba(7, 114, 183, 0.3);
  box-shadow: 0 6px 16px rgba(7, 114, 183, 0.08);
  transform: translateY(-2px);
}

.dt-client-list li::before {
  content: "" !important;
  flex: none;
  width: 18px;
  height: 10px;
  border-radius: 2px;
  background: linear-gradient(to right, #0772b7 0%, #0772b7 50%, #10b981 50%, #10b981 100%) !important;
  box-shadow: 0 1px 3px rgba(8, 25, 42, 0.15);
  mask-image: none !important;
  -webkit-mask-image: none !important;
  opacity: 1 !important;
  position: static !important;
}

.dt-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5em;
  font-size: .95rem;
}

.dt-prose th,
.dt-prose td {
  padding: 11px 14px;
  border: 1px solid var(--dt-line);
  text-align: left;
  vertical-align: top;
}

.dt-prose th {
  background: var(--dt-surface-2);
  color: var(--dt-ink);
  font-weight: 600;
}

.dt-prose__scroll {
  overflow-x: auto;
  margin-bottom: 1.5em;
}

.dt-prose hr {
  height: 1px;
  border: 0;
  margin: 2.2em 0;
  background: linear-gradient(90deg, var(--dt-line), transparent);
}

/* 23.5 Figures ------------------------------------------------------------ */
/* Clean, Frameless Modern Interactive Product Image Showcase */
.dt-clean-showcase {
  position: relative;
  width: 100%;
  margin-block: 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dt-clean-image {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  padding: 16px;
  background: #ffffff;
  border-radius: 16px;
  text-decoration: none !important;
  cursor: zoom-in;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.dt-clean-image img {
  max-height: 440px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 8px;
  filter: drop-shadow(0 8px 24px rgba(8, 25, 42, 0.08));
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
}

.dt-clean-image:hover {
  transform: translateY(-4px);
}

.dt-clean-image:hover img {
  transform: scale(1.025);
  filter: drop-shadow(0 16px 36px rgba(7, 114, 183, 0.16));
}

.dt-clean-image::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.65) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.4-4.4M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 18px no-repeat;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: scale(0.85);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dt-clean-image:hover::after,
.dt-clean-image:focus-visible::after {
  opacity: 1;
  transform: scale(1);
  background-color: rgba(15, 23, 42, 0.85);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.dt-clean-caption {
  margin-top: 10px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--dt-muted);
  text-align: center;
}

.dt-figure {
  display: block;
  margin: 0 0 1.6em;
  border-radius: var(--dt-r-md);
  overflow: hidden;
  background: var(--dt-surface-2);
  border: 1px solid var(--dt-line);
  box-shadow: var(--dt-sh-xs);
  transition: box-shadow var(--dt-t-slow) var(--dt-ease), border-color var(--dt-t-slow) var(--dt-ease);
}

.dt-figure img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 700ms var(--dt-ease-out);
}

.dt-figure figcaption {
  padding: 11px 16px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--dt-muted);
  border-top: 1px solid var(--dt-line);
  background: var(--dt-surface);
}

/* Clickable figures get a zoom affordance */
a.dt-figure {
  position: relative;
  cursor: zoom-in;
}

a.dt-figure:hover {
  border-color: rgba(7, 114, 183, .3);
  box-shadow: var(--dt-sh-md);
}

a.dt-figure:hover img {
  transform: scale(1.03);
}

a.dt-figure::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(10, 26, 44, .6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.4-4.4M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 17px no-repeat;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .28);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--dt-t) var(--dt-ease), transform var(--dt-t) var(--dt-ease);
}

a.dt-figure:hover::after,
a.dt-figure:focus-visible::after {
  opacity: 1;
  transform: none;
}

/* Captioned variant: <figure> wraps the zoom link so the caption can be a
   real <figcaption>, which is not allowed inside an <a>. */
.dt-figure__zoom {
  display: block;
  position: relative;
  cursor: zoom-in;
}

.dt-figure:has(.dt-figure__zoom):hover {
  border-color: rgba(7, 114, 183, .3);
  box-shadow: var(--dt-sh-md);
}

.dt-figure__zoom:hover img,
.dt-figure__zoom:focus-visible img {
  transform: scale(1.03);
}

.dt-figure__zoom::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(10, 26, 44, .6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.4-4.4M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 17px no-repeat;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .28);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--dt-t) var(--dt-ease), transform var(--dt-t) var(--dt-ease);
}

.dt-figure__zoom:hover::after,
.dt-figure__zoom:focus-visible::after {
  opacity: 1;
  transform: none;
}

/* Figures that sit beside copy */
.dt-figure--inline {
  max-width: 420px;
}

.dt-figure--center {
  margin-inline: auto;
  max-width: 640px;
}

/* 23.55 Split intro — copy on one half, supporting image on the other.
   Used to open a page section so a lone column of text never sits beside an
   empty half. Images keep their natural proportions rather than being cropped
   to a fixed ratio, because several of them are technical diagrams. */
.dt-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  margin: 0 0 2.2em;
}

.dt-split--wide-copy {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
}

.dt-split__copy> :first-child {
  margin-top: 0;
}

.dt-split__copy> :last-child {
  margin-bottom: 0;
}

.dt-split__copy>p:last-child {
  margin-bottom: 0;
}

.dt-split__media {
  min-width: 0;
}

.dt-split__media>.dt-figure,
.dt-split__media>figure {
  margin: 0;
}

.dt-split__media img {
  width: 100%;
}

/* Media first on alternating sections */
.dt-split--reverse .dt-split__media {
  order: -1;
}

@media (max-width: 860px) {

  .dt-split,
  .dt-split--wide-copy {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  /* Stacked pages always read copy-first, whatever the desktop order */
  .dt-split--reverse .dt-split__media {
    order: 0;
  }
}

/* 23.6 Generic column set (replaces the Bootstrap row/col in page bodies) -- */
.dt-cols {
  display: grid;
  gap: clamp(18px, 2.4vw, 32px);
  align-items: start;
  margin-bottom: 1.6em;
}

.dt-cols--2 {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.dt-cols--3 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.dt-cols--4 {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* Asymmetric splits used by the product pages: copy beside a product shot */
.dt-cols--media {
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
}

.dt-cols--media-left {
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
}

/* Standalone images in page content get the same rounded treatment as figures */
.dt-prose img:not(.dt-figure img):not(.dt-logo img) {
  border-radius: var(--dt-r-md);
  border: 1px solid var(--dt-line);
  box-shadow: var(--dt-sh-xs);
}

/* Alternating media/copy order, desktop only — stacked pages always read
   text-first so the running order stays sensible on a phone. */
@media (min-width: 768px) {
  .dt-order-1 {
    order: 1;
  }

  .dt-order-2 {
    order: 2;
  }
}

/* Embedded map */
.dt-map {
  position: relative;
  border-radius: var(--dt-r-lg);
  overflow: hidden;
  border: 1px solid var(--dt-line);
  box-shadow: var(--dt-sh-sm);
  aspect-ratio: 16 / 10;
  background: var(--dt-surface-2);
}

.dt-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Contact detail rows on a light ground */
.dt-contact__cards--light .dt-contact__card {
  background: var(--dt-surface);
  border-color: var(--dt-line);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.dt-contact__cards--light .dt-contact__card:hover {
  background: var(--dt-surface-2);
  border-color: rgba(7, 114, 183, .26);
}

.dt-contact__cards--light .dt-contact__ico {
  background: rgba(7, 114, 183, .08);
  border-color: rgba(7, 114, 183, .14);
  color: var(--dt-blue);
}

.dt-contact__cards--light .dt-contact__card h3 {
  color: var(--dt-muted);
}

.dt-contact__cards--light .dt-contact__card p,
.dt-contact__cards--light .dt-contact__card a {
  color: var(--dt-ink);
}

.dt-contact__cards--light .dt-contact__card a:hover {
  color: var(--dt-blue);
}

/* Home contact section on white: the form trades its deep drop shadow
   (made for the dark band) for a quiet border and a soft lift. */
.dt-contact--light .dt-contact__grid > .dt-form {
  background: var(--dt-surface-2);
  border: 1px solid var(--dt-line);
  box-shadow: var(--dt-sh-md);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.dt-contact--light .dt-contact__grid > .dt-form form.dt-form {
  background: var(--dt-surface);
  border: 1px solid var(--dt-line);
  box-shadow: var(--dt-sh-xs);
}
/* 23.7 Panels ------------------------------------------------------------- */
.dt-panel {
  padding: clamp(22px, 2.6vw, 32px);
  border-radius: var(--dt-r-lg);
  background: var(--dt-surface);
  border: 1px solid var(--dt-line);
  box-shadow: var(--dt-sh-xs);
  margin-bottom: 1.6em;
}

.dt-panel--tint {
  background: var(--dt-surface-2);
}

.dt-panel--brand {
  background: var(--dt-grad-deep);
  border-color: transparent;
  color: rgba(210, 229, 245, .8);
  box-shadow: var(--dt-sh-md);
}

.dt-panel--brand h2,
.dt-panel--brand h3 {
  color: #fff;
}

.dt-panel--brand h2::after {
  background: var(--dt-grad-line);
}

/* Feature/spec chip row reused from the home page vocabulary */
.dt-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 1.5em;
  padding: 0;
}

.dt-keys li {
  padding: 7px 15px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dt-blue-700);
  background: rgba(7, 114, 183, .07);
  border: 1px solid rgba(7, 114, 183, .14);
  border-radius: var(--dt-r-pill);
  list-style: none;
}

.dt-keys li::before {
  display: none;
}

/* 23.8 Certification / logo strip ----------------------------------------- */
.dt-logos--certs {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

.dt-logos--certs .dt-logo {
  min-height: 124px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 4px 16px rgba(8, 25, 42, 0.06);
}

.dt-logos--certs .dt-logo img {
  max-height: 76px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* 23.9 Lightbox ----------------------------------------------------------- */
.dt-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(6, 16, 28, .86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dt-t) var(--dt-ease), visibility 0s linear var(--dt-t);
}

.dt-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.dt-lightbox img {
  max-width: 100%;
  max-height: 84vh;
  border-radius: var(--dt-r-md);
  box-shadow: var(--dt-sh-lg);
  transform: scale(.97);
  transition: transform var(--dt-t-slow) var(--dt-ease-out);
}

.dt-lightbox.is-open img {
  transform: scale(1);
}

.dt-lightbox__cap {
  margin-top: 14px;
  text-align: center;
  font-size: 13.5px;
  color: rgba(214, 232, 246, .82);
}

.dt-lightbox__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  transition: background-color var(--dt-t) var(--dt-ease), color var(--dt-t) var(--dt-ease), transform var(--dt-t) var(--dt-ease);
}

.dt-lightbox__close svg {
  width: 18px;
  height: 18px;
}

.dt-lightbox__close:hover {
  background: #fff;
  color: var(--dt-ink);
  transform: rotate(90deg);
}

body.dt-lightbox-open {
  overflow: hidden;
}

/* 23.10 Responsive -------------------------------------------------------- */
@media (max-width: 980px) {
  .dt-doc {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The section nav stops being a rail and becomes a scrollable strip above
     the article, which removes the old off-canvas toggle entirely. */
  .dt-side {
    position: static;
  }

  .dt-side__panel {
    padding: 16px;
  }

  .dt-side__list {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }

  .dt-side__list a {
    white-space: nowrap;
    padding: 10px 14px;
  }

  .dt-side__list a:hover {
    padding-left: 14px;
  }

  .dt-side__cta {
    display: none;
  }

  .dt-cols--media,
  .dt-cols--media-left {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .dt-phero__frame {
    aspect-ratio: auto !important;
    min-height: auto !important;
    height: auto !important;
    border-radius: var(--dt-r-lg);
  }

  .dt-phero__inner {
    padding: 18px 14px 16px !important;
  }

  .dt-phero h1 {
    font-size: clamp(1.25rem, 5.2vw, 1.65rem) !important;
  }

  .dt-prose {
    font-size: .98rem;
  }

  .dt-figure--inline,
  .dt-figure--center {
    max-width: none;
  }

  .dt-range {
    padding: 22px 18px !important;
  }

  .dt-range__grid {
    gap: 22px !important;
  }
}

@media (max-width: 480px) {
  .dt-phero__inner {
    padding: 16px 12px 14px !important;
  }

  .dt-phero h1 {
    font-size: clamp(1.18rem, 5.2vw, 1.48rem) !important;
  }

  .dt-chip {
    padding: 5px 10px;
    font-size: 11px;
  }

  .dt-phero__cta .dt-btn,
  .dt-banner__cta .dt-btn {
    padding: 10px 14px;
    font-size: 13px;
    min-height: 42px;
  }

  .dt-range {
    padding: 18px 14px !important;
    border-radius: var(--dt-r-lg);
  }

  .dt-range__group a {
    padding: 6px 12px;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .dt-figure img,
  .dt-lightbox img {
    transition: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   AI / ML, R&D & SOFTWARE SECTION STYLING
   ========================================================================== */
/* ---------------------------------------------------------------------------
   AI / R&D CAPABILITIES

   Restrained treatment on white: the cards borrow the same surface, radius,
   border and hover behaviour as the product cards, so this section reads as
   part of the same system rather than a separate showcase.
   ------------------------------------------------------------------------ */
.dt-ai-section {
  position: relative;
  overflow: hidden;
  overflow: clip;
  background: var(--dt-surface);
  padding-block: var(--dt-section-y);
  color: var(--dt-body);
}

/* The section is meant to read as white, so the circuit is a faint texture
   rather than a feature — well below the strength it carries on dark bands. */
.dt-ai-section .dt-circuit {
  opacity: .22;
}

.dt-ai-section .dt-pulse {
  display: none;
}

/* Home page: the AI / R&D band in brand colour, white cards on top. */
.dt-ai-section--color {
  background: linear-gradient(155deg, #072f4e 0%, #0a4a78 55%, #0a5f9b 100%);
  color: rgba(215, 231, 244, .8);
}

.dt-ai-section--color .dt-circuit {
  opacity: .6;
}

.dt-ai-section--color .dt-ai-header h2 {
  color: #fff;
}

.dt-ai-section--color .dt-ai-header p {
  color: rgba(214, 232, 246, .8);
}

.dt-ai-section--color .dt-ai-card {
  border-color: rgba(255, 255, 255, .6);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .55);
}
.dt-ai-header {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 780px;
  margin: 0 auto clamp(36px, 4.4vw, 56px);
}

.dt-ai-header h2 {
  font-size: clamp(1.8rem, 1.18rem + 2.2vw, 2.8rem);
  color: var(--dt-ink);
  letter-spacing: -.02em;
  margin: 0 0 16px;
}

.dt-ai-header p {
  font-size: clamp(1rem, .97rem + .18vw, 1.07rem);
  color: var(--dt-muted);
  line-height: 1.7;
  margin: 0;
}

.dt-ai-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.2vw, 28px);
  align-items: stretch;
}

@media (max-width: 1024px) {
  .dt-ai-grid {
    grid-template-columns: 1fr;
  }
}

.dt-ai-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.6vw, 34px);
  background: var(--dt-surface);
  border: 1px solid var(--dt-line);
  border-radius: var(--dt-r-lg);
  box-shadow: var(--dt-sh-xs);
  transition: transform var(--dt-t-slow) var(--dt-ease-out),
    box-shadow var(--dt-t-slow) var(--dt-ease),
    border-color var(--dt-t-slow) var(--dt-ease);
}

/* Accent hairline, matching the product cards */
.dt-ai-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  border-radius: var(--dt-r-lg) var(--dt-r-lg) 0 0;
  background: var(--dt-grad-line);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dt-t-slow) var(--dt-ease-out);
}

.dt-ai-card:hover,
.dt-ai-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--dt-sh-md);
  border-color: rgba(7, 114, 183, .28);
}

.dt-ai-card:hover::before,
.dt-ai-card:focus-within::before {
  transform: scaleX(1);
}

.dt-ai-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.dt-ai-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--dt-r-pill);
  color: var(--dt-blue-700);
  background: rgba(7, 114, 183, .07);
  border: 1px solid rgba(7, 114, 183, .14);
}

.dt-ai-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--dt-blue);
  background: rgba(7, 114, 183, .08);
  border: 1px solid rgba(7, 114, 183, .14);
  transition: background-color var(--dt-t) var(--dt-ease),
    color var(--dt-t) var(--dt-ease);
}

.dt-ai-icon svg {
  width: 22px;
  height: 22px;
}

.dt-ai-card:hover .dt-ai-icon {
  background: var(--dt-blue);
  color: #fff;
}

.dt-ai-card h3 {
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--dt-ink);
  margin: 0 0 12px;
  letter-spacing: -.01em;
}

.dt-ai-card p {
  font-size: .95rem;
  line-height: 1.68;
  color: var(--dt-muted);
  margin: 0 0 20px;
  flex-grow: 1;
}

.dt-ai-capabilities {
  padding-top: 20px;
  border-top: 1px solid var(--dt-line-soft);
  margin-top: auto;
}

.dt-ai-cap-group+.dt-ai-cap-group {
  margin-top: 16px;
}

.dt-ai-cap-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--dt-ink);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dt-ai-cap-title::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dt-blue);
}

.dt-ai-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.dt-ai-tag {
  font-size: 11.5px;
  font-weight: 600;
  color: #1e3a5f;
  background: rgba(7, 114, 183, .05);
  border: 1px solid rgba(7, 114, 183, .12);
  padding: 5px 11px;
  border-radius: 7px;
  transition: all var(--dt-t) var(--dt-ease);
}

.dt-ai-card:hover .dt-ai-tag {
  background: rgba(7, 114, 183, .09);
  border-color: rgba(7, 114, 183, .2);
  color: var(--dt-blue-700);
}

.dt-ai-tags-more[hidden] {
  display: none !important;
}

.dt-ai-tags-more {
  display: block;
  animation: dtFadeIn 0.25s ease-out;
}

.dt-ai-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(7, 114, 183, 0.06);
  border: 1px solid rgba(7, 114, 183, 0.15);
  border-radius: var(--dt-r-pill);
  padding: 6px 14px;
  margin-top: 14px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--dt-blue);
  cursor: pointer;
  transition: all var(--dt-t) var(--dt-ease);
}

.dt-ai-expand-btn:hover {
  background: var(--dt-blue);
  color: #fff;
  border-color: var(--dt-blue);
}

.dt-ai-expand-btn svg {
  width: 14px;
  height: 14px;
  transition: transform var(--dt-t) var(--dt-ease);
}

.dt-ai-expand-btn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

@keyframes dtFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   HEADER DUAL-LOGO & FOOTER SUBSIDIARY CO-BRANDING
   ========================================================================== */
.dt-nav__brand-group {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 18px);
}

.dt-nav__logo-sep {
  width: 1px;
  height: 28px;
  background: rgba(0, 0, 0, 0.16);
  opacity: 0.7;
}

.dt-nav__logo-sep,
.dt-nav__subsidiary-logo {
  display: none !important;
}

.dt-nav__subsidiary-logo img {
  height: 44px;
  width: auto;
  object-fit: contain;
  transform: scale(2.24);
  transform-origin: center left;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.dt-nav__subsidiary-logo:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

@media (max-width: 991px) {
  .dt-nav__subsidiary-logo img {
    height: 36px;
    transform: scale(1.18);
  }

  .dt-nav__logo-sep {
    height: 22px;
  }
}

@media (max-width: 480px) {
  .dt-nav__subsidiary-logo {
    display: none;
  }

  .dt-nav__logo-sep {
    display: none;
  }
}

/* Footer Subsidiary Integration */
.dt-footer__subsidiary {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: flex-start;
}

.dt-footer__subsidiary-label {
  display: none !important;
}

.dt-footer__subsidiary-card {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  text-decoration: none;
  transition: all 0.25s ease;
  width: auto;
  max-width: 100%;
  overflow: hidden;
}

.dt-footer__subsidiary-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(111, 192, 242, 0.4);
  transform: translateY(-2px);
}

.dt-footer__subsidiary-badge {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  height: auto;
  background: transparent;
  flex-shrink: 0;
  border-radius: 0;
  box-shadow: none;
}

.dt-footer__subsidiary-badge img,
.dt-footer__subsidiary-card img,
.dt-footer__subsidiary-card>img {
  width: 100%;
  max-width: 240px;
  height: auto;
  object-fit: contain;
  object-position: left center;
  margin-block: -50px;
  margin-inline: 0 auto;
  mix-blend-mode: multiply;
  filter: contrast(1.15) brightness(1.2);
  background: transparent !important;
  display: block;
}

/* The embeds ship with fixed width/height attributes (560x315, 504x474), so
   without this they sit at their intrinsic size and leave a strip of the
   container showing below. Stretch them to fill the 16:9 media box instead. */
.dt-social-card__media iframe:not(.twitter-tweet-rendered) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.dt-social-card__media iframe.twitter-tweet-rendered {
  position: relative !important;
  margin: 0 auto !important;
  max-width: 100% !important;
  display: block !important;
}

/* ---------------------------------------------------------------------------
   PRODUCT INQUIRY MODAL & FORMSPREE UI
   ------------------------------------------------------------------------ */
body.dt-modal-open {
  overflow: hidden !important;
}

.dt-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1), visibility 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dt-modal.is-open {
  visibility: visible;
  opacity: 1;
}

.dt-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(6, 19, 32, 0.76);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
}

.dt-modal__content {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 94vh;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid rgba(16, 42, 70, 0.12);
  padding: clamp(18px, 2.8vw, 28px);
  box-shadow: 0 32px 85px -15px rgba(6, 19, 32, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.9) inset;
  transform: translateY(24px) scale(0.94);
  transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1), opacity 380ms ease;
  z-index: 2;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

.dt-modal__content::-webkit-scrollbar {
  width: 6px;
}

.dt-modal__content::-webkit-scrollbar-track {
  background: transparent;
  margin: 12px 0;
}

.dt-modal__content::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}

.dt-modal__content::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.dt-modal.is-open .dt-modal__content {
  transform: translateY(0) scale(1);
}

.dt-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(226, 232, 240, 0.8);
  background: #f1f5f9;
  color: #475569;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 5;
  transition: transform 260ms var(--dt-ease-out), background-color 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.dt-modal__close:hover {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
  transform: scale(1.08) rotate(90deg);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
}

.dt-modal__brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  padding-right: 40px;
}

.dt-modal__logo {
  height: 32px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  object-position: left center;
}

.dt-modal__pill-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 50px;
  background: rgba(7, 114, 183, 0.08);
  border: 1px solid rgba(7, 114, 183, 0.16);
  color: #0772b7;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}

.dt-modal__head {
  margin-bottom: 14px;
  padding-right: 40px;
}

.dt-modal__head h3 {
  font-size: clamp(1.15rem, 1.1rem + 0.5vw, 1.4rem);
  font-weight: 800;
  color: #0f172a;
  margin: 2px 0 4px;
  line-height: 1.25;
}

.dt-modal__head p {
  font-size: 0.88rem;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}

.dt-modal__inner-card {
  border-radius: 18px;
  background: #f8fafc;
  padding: clamp(14px, 2vw, 20px) clamp(14px, 2vw, 20px);
  border: 1px solid rgba(16, 42, 70, 0.14);
  box-shadow: 0 6px 20px -6px rgba(11, 32, 54, 0.05);
}

.dt-modal__inner-card .dt-field label {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: #334155;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.dt-field__wrap {
  position: relative;
  display: flex;
  width: 100%;
}

.dt-modal__inner-card .dt-field__wrap input,
.dt-modal__inner-card .dt-field__wrap select,
.dt-modal__inner-card .dt-field__wrap textarea {
  border-radius: 12px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  font-size: 13.5px;
  color: #0f172a;
  width: 100%;
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.dt-modal__inner-card .dt-field__wrap textarea {
  padding: 10px 14px 10px 40px !important;
  height: 58px;
  min-height: 58px;
  max-height: 150px;
  resize: vertical;
  overflow-y: auto;
  box-sizing: border-box;
}

.dt-field__wrap textarea~svg,
.dt-field__wrap:has(textarea)>svg {
  top: 14px !important;
  transform: none !important;
}

.dt-modal__inner-card .dt-field__wrap select {
  height: 40px;
  padding-left: 40px !important;
  padding-right: 40px !important;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  font-weight: 500;
  border-radius: 12px;
  background: #ffffff;
  position: relative;
  z-index: 2;
}

.dt-select-chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: #64748b;
  pointer-events: none;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 220ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dt-select-chevron svg {
  width: 16px;
  height: 16px;
  stroke: #64748b;
  transition: stroke 220ms ease;
}

.dt-field__wrap:focus-within .dt-select-chevron,
.dt-field__wrap:hover .dt-select-chevron {
  color: #0772b7;
}

.dt-field__wrap:focus-within .dt-select-chevron svg,
.dt-field__wrap:hover .dt-select-chevron svg {
  stroke: #0772b7;
}

.dt-field__wrap:focus-within .dt-select-chevron {
  transform: translateY(-50%) rotate(180deg);
}

.dt-modal__inner-card .dt-field__wrap select option {
  padding: 10px 14px;
  font-size: 13.5px;
  color: #0f172a;
  background: #ffffff;
  border-radius: 8px;
}

.dt-modal__inner-card .dt-field__wrap input {
  height: 40px;
  padding-left: 40px !important;
}

.dt-modal__inner-card .dt-field__wrap input:focus,
.dt-modal__inner-card .dt-field__wrap select:focus,
.dt-modal__inner-card .dt-field__wrap textarea:focus {
  border-color: #0772b7;
  box-shadow: 0 0 0 3px rgba(7, 114, 183, 0.14);
  transform: translateY(-1px);
  outline: none;
}

.dt-btn--submit-pill {
  border-radius: 50px !important;
  height: 44px;
  font-size: 14px;
  font-weight: 700;
  background: linear-gradient(135deg, #0772b7 0%, #055993 100%) !important;
  box-shadow: 0 8px 20px -4px rgba(7, 114, 183, 0.35);
  transition: transform 260ms var(--dt-ease-out), box-shadow 260ms var(--dt-ease-out), filter 200ms ease !important;
}

.dt-btn--submit-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -4px rgba(7, 114, 183, 0.5);
  filter: brightness(1.05);
}

.dt-btn--submit-pill:active {
  transform: translateY(0);
}

/* Alerts & Spinner */
.dt-alert {
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}

.dt-alert--success {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.dt-alert--error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.dt-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #ffffff;
  animation: dt-spin 0.8s linear infinite;
}

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

/* SplitForms bot protection fields and reCAPTCHA v2 widget. */
.dt-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.dt-form__captcha {
  margin-top: 18px;
  min-height: 78px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.dt-form__captcha > div {
  margin: 0 auto;
}

/* Responsive Form & Contact Section Fixes for Mobile */
@media (max-width: 640px) {
  .dt-form {
    padding: 20px 14px !important;
    border-radius: 20px !important;
  }
  .dt-form__head {
    margin-bottom: 18px !important;
  }
  .dt-form__head h3 {
    font-size: clamp(1.15rem, 5vw, 1.35rem) !important;
  }
  .dt-form input[type="text"],
  .dt-form input[type="email"],
  .dt-form input[type="tel"],
  .dt-form textarea,
  .dt-field__wrap {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 480px) {
  .dt-form {
    padding: 16px 12px !important;
    border-radius: 16px !important;
  }
  .dt-modal__content {
    padding: 14px 10px;
  }
  .dt-modal__inner-card {
    padding: 12px 8px;
  }
  .dt-form__captcha > div {
    transform: scale(0.84);
    transform-origin: center center;
  }
  .dt-totop {
    right: 12px !important;
    bottom: 16px !important;
    width: 42px !important;
    height: 42px !important;
  }
}

@media (max-width: 360px) {
  .dt-form {
    padding: 14px 10px !important;
  }
  .dt-form__captcha > div {
    transform: scale(0.74);
    transform-origin: center center;
  }
}

/* Compact inquiry modal: one card instead of a card inside a card, tighter
   rhythm, so the whole form fits a laptop viewport without scrolling. */
.dt-modal__content {
  max-width: 600px;
  padding: 22px 26px 24px;
}

.dt-modal__brand {
  margin-bottom: 4px;
}

.dt-modal__logo {
  height: 26px;
}

.dt-modal__head {
  margin-bottom: 14px;
}

.dt-modal__head h3 {
  font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem);
}

.dt-modal__inner-card {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.dt-modal .dt-form {
  padding: 16px 0 0 !important;
  background: none;
  border: 0;
  border-top: 1px solid var(--dt-line);
  border-radius: 0 !important;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.dt-modal .dt-form__grid {
  gap: 12px 14px;
}

.dt-modal .dt-field {
  gap: 4px;
}

.dt-modal__inner-card .dt-field__wrap textarea {
  height: 88px;
  min-height: 88px;
}

.dt-modal .dt-form__captcha {
  margin-top: 12px;
}

.dt-modal .dt-btn--submit-pill {
  height: 42px;
  min-height: 42px;
}

@media (max-height: 720px) and (min-width: 481px) {
  .dt-modal .dt-form__captcha {
    min-height: 0;
  }

  .dt-modal .dt-form__captcha > div {
    transform: scale(.88);
    margin-block: -5px;
  }
}

@media (max-width: 480px) {
  .dt-modal__content {
    padding: 16px 14px 18px;
  }
}

/* ---------------------------------------------------------------------------
   TELESCOPIC MAST — product spotlight (home / products) and detail page
   ------------------------------------------------------------------------ */
.dt-spot {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: stretch;
  margin-top: clamp(28px, 3.4vw, 44px);
  border-radius: var(--dt-r-xl);
  overflow: hidden;
  background: var(--dt-grad-deep);
  color: rgba(215, 231, 244, .78);
  box-shadow: var(--dt-sh-lg);
  isolation: isolate;
}

.dt-spot::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  z-index: 3;
  background: var(--dt-grad-line);
}

/* The product film is portrait (9:16), so it sits in its own frame on a
   quiet panel instead of being cropped to fill a landscape cell. */
.dt-spot__media {
  position: relative;
  min-height: 440px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 55%, rgba(7, 114, 183, .28), transparent 70%),
    rgba(3, 10, 18, .45);
  border-right: 1px solid rgba(255, 255, 255, .08);
}

.dt-spot__frame {
  position: absolute;
  top: 32px;
  left: 50%;
  height: calc(100% - 64px);
  aspect-ratio: 9 / 16;
  transform: translateX(-50%);
  border-radius: 18px;
  overflow: hidden;
  background: #050d16;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8);
}

.dt-spot__frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dt-spot__body {
  position: relative;
  padding: clamp(28px, 3.6vw, 52px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dt-spot__body .dt-eyebrow {
  align-self: flex-start;
}

.dt-spot__body h3 {
  color: #fff;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem);
  margin: 16px 0 14px;
}

.dt-spot__body h3 a {
  color: inherit;
}

.dt-spot__body p {
  color: rgba(210, 228, 243, .78);
  margin-bottom: 22px;
}

.dt-spot__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.dt-spot__stats li {
  padding: 14px 12px;
  border-radius: var(--dt-r-sm);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(210, 228, 243, .7);
}

.dt-spot__stats strong {
  display: block;
  font-family: var(--dt-font-display);
  font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem);
  color: #fff;
  margin-bottom: 4px;
}

.dt-spot__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---- detail page ---- */
.dt-mast-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.dt-mast-intro h2 {
  font-size: clamp(1.8rem, 1.18rem + 2.2vw, 2.8rem);
  margin: 16px 0 18px;
}

.dt-mast-intro p {
  font-size: clamp(1rem, .97rem + .18vw, 1.08rem);
  line-height: 1.75;
}

.dt-mast-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

.dt-mast-gallery a {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--dt-r-lg);
  background: #e8eff7;
  box-shadow: var(--dt-sh-sm);
}

.dt-mast-gallery a:first-child {
  grid-column: 1 / -1;
}

.dt-mast-gallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 850 / 424;
  object-fit: cover;
  transition: transform var(--dt-t-slow) var(--dt-ease-out);
}

.dt-mast-gallery a:hover img {
  transform: scale(1.04);
}

.dt-mast-gallery span {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: rgba(11, 26, 43, .66);
  border-radius: var(--dt-r-pill);
}

.dt-mast-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 28px 0 30px;
  padding: 0;
  list-style: none;
}

.dt-mast-stats li {
  padding: 16px 14px;
  border-radius: var(--dt-r-md);
  background: var(--dt-surface);
  border: 1px solid var(--dt-line);
  box-shadow: var(--dt-sh-xs);
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--dt-muted);
}

.dt-mast-stats strong {
  display: block;
  font-family: var(--dt-font-display);
  font-size: clamp(1.25rem, 1rem + .7vw, 1.6rem);
  color: var(--dt-blue-600);
  margin-bottom: 4px;
}

.dt-video {
  position: relative;
  max-width: 1080px;
  margin: clamp(30px, 3.6vw, 48px) auto 0;
  border-radius: var(--dt-r-xl);
  overflow: hidden;
  background: #050d16;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .8);
  aspect-ratio: 16 / 9;
}

.dt-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #050d16;
}

.dt-video__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  border: 0;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(5, 13, 22, .15), rgba(5, 13, 22, .55));
  transition: opacity var(--dt-t) var(--dt-ease);
}

.dt-video__play span {
  display: grid;
  place-items: center;
  width: clamp(68px, 9vw, 96px);
  height: clamp(68px, 9vw, 96px);
  border-radius: 50%;
  background: var(--dt-blue);
  color: #fff;
  box-shadow: 0 0 0 12px rgba(7, 114, 183, .22), var(--dt-sh-blue);
  transition: transform var(--dt-t) var(--dt-ease-out);
}

.dt-video__play svg {
  width: 38%;
  height: 38%;
  margin-left: 6%;
}

.dt-video__play:hover span,
.dt-video__play:focus-visible span {
  transform: scale(1.08);
}

.dt-video.is-playing .dt-video__play {
  opacity: 0;
  pointer-events: none;
}

/* Portrait (9:16) product film beside its explanation, sized to the
   viewport so it never towers over the section. */
.dt-mast-film {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(36px, 5vw, 80px);
  max-width: 1240px;
  margin-inline: auto;
}

.dt-mast-film__copy h2 {
  font-size: clamp(1.8rem, 1.18rem + 2.2vw, 2.6rem);
  margin: 16px 0 14px;
}

.dt-mast-film__copy > p {
  color: rgba(210, 228, 243, .74);
  margin-bottom: 28px;
  max-width: 520px;
}

.dt-mast-steps {
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.dt-mast-steps li {
  display: flex;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-size: .95rem;
  line-height: 1.6;
  color: rgba(210, 228, 243, .7);
}

.dt-mast-steps li > span {
  flex: none;
  font-family: var(--dt-font-display);
  font-size: .9rem;
  font-weight: 700;
  color: var(--dt-blue-300);
  padding-top: 2px;
}

.dt-mast-steps strong {
  display: block;
  color: #fff;
  font-weight: 600;
  margin-bottom: 2px;
}

/* Sized to nearly the full viewport height (under the fixed navbar) so the
   film reads as the hero of the section, with a soft brand-blue halo. */
.dt-video--portrait {
  width: auto;
  height: clamp(560px, calc(100vh - 120px), 860px);
  max-width: 100%;
  margin: 0;
  aspect-ratio: 9 / 16;
  border-radius: var(--dt-r-xl);
  border-color: rgba(255, 255, 255, .16);
  box-shadow:
    0 0 0 8px rgba(255, 255, 255, .04),
    0 50px 120px -40px rgba(7, 114, 183, .6),
    0 30px 70px -30px rgba(0, 0, 0, .8);
}

.dt-video--portrait video {
  object-fit: cover;
}

.dt-video--portrait.is-playing video {
  object-fit: contain;
}
.dt-video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.dt-mast-stats--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dt-mount--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(28px, 3vw, 40px);
}

/* Second spotlight mirrors the first so the two mast types read as a pair. */
.dt-spot + .dt-spot {
  margin-top: clamp(18px, 2vw, 26px);
}

.dt-spot--reverse {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
}

.dt-spot--reverse .dt-spot__media {
  order: 2;
  border-right: 0;
  border-left: 1px solid rgba(255, 255, 255, .08);
}

/* Home page: the two mast types as white product cards on one row, sharing
   .dt-prod's surface and hover. The portrait (9:16) film keeps its true
   shape on the left, copy and key facts sit beside it, and the standard
   card footer runs the full width underneath. */
.dt-mast-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 26px);
  margin-top: clamp(18px, 2vw, 26px);
}

.dt-prod--mast {
  display: grid;
  grid-template-columns: clamp(220px, 44%, 320px) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "film body"
    "film foot";
}

.dt-prod__film {
  grid-area: film;
  position: relative;
  aspect-ratio: 9 / 16;
  margin: 14px 0 14px 14px;
  border-radius: calc(var(--dt-r-lg) - 8px);
  overflow: hidden;
  background: #0b1a2b;
}

.dt-prod__film video,
.dt-prod__film iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.dt-prod--mast .dt-prod__body {
  grid-area: body;
  justify-content: center;
  padding: 24px 24px 12px 26px;
}

.dt-prod__kicker {
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dt-blue-600);
}

.dt-prod--mast .dt-prod__body h3 {
  font-size: clamp(1.15rem, 1rem + .4vw, 1.35rem);
}

.dt-prod__facts {
  margin: 4px 0 0;
  border-top: 1px solid var(--dt-line-soft);
}

.dt-prod__facts div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--dt-line-soft);
  font-size: 13.5px;
}

.dt-prod__facts dt {
  margin: 0;
  color: var(--dt-muted);
}

.dt-prod__facts dd {
  margin: 0;
  font-weight: 600;
  color: var(--dt-ink);
  text-align: right;
}

.dt-prod--mast .dt-prod__foot {
  grid-area: foot;
  flex-wrap: wrap;
  margin: 0 22px 0 26px;
  padding: 14px 0 18px;
}

.dt-prod--mast .dt-btn--inquire {
  padding-inline: 18px;
}

@media (max-width: 1179px) {
  .dt-mast-pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .dt-prod--mast {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "film"
      "body"
      "foot";
  }

  .dt-prod__film {
    aspect-ratio: 3 / 4;
    margin: 12px 12px 0;
  }

  .dt-prod--mast .dt-prod__body {
    padding: 20px 20px 4px;
  }

  .dt-prod--mast .dt-prod__foot {
    margin: 14px 18px 0;
  }

  .dt-prod--mast .dt-btn--inquire {
    padding-inline: 22px;
  }
}
.dt-spot__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.dt-feat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 26px);
  margin-top: clamp(30px, 3.4vw, 44px);
}

.dt-feat {
  padding: clamp(24px, 2.6vw, 34px);
  border-radius: var(--dt-r-lg);
  background: var(--dt-surface);
  border: 1px solid var(--dt-line);
  box-shadow: var(--dt-sh-sm);
  transition: transform var(--dt-t-slow) var(--dt-ease-out), box-shadow var(--dt-t-slow) var(--dt-ease);
}

.dt-feat:hover {
  transform: translateY(-6px);
  box-shadow: var(--dt-sh-md);
}

.dt-feat__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 18px;
  border-radius: 16px;
  color: #fff;
  background: var(--dt-grad-brand);
  box-shadow: var(--dt-sh-blue);
}

.dt-feat__icon svg {
  width: 26px;
  height: 26px;
}

.dt-feat h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.dt-feat p {
  margin: 0;
  color: var(--dt-muted);
  line-height: 1.7;
}

.dt-mast-specs {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 48px);
  align-items: start;
  margin-top: clamp(30px, 3.4vw, 44px);
}

.dt-spec-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--dt-surface);
  border: 1px solid var(--dt-line);
  border-radius: var(--dt-r-lg);
  overflow: hidden;
  box-shadow: var(--dt-sh-sm);
  font-size: .97rem;
}

.dt-spec-table th,
.dt-spec-table td {
  padding: 15px 20px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--dt-line-soft);
}

.dt-spec-table tr:last-child th,
.dt-spec-table tr:last-child td {
  border-bottom: 0;
}

.dt-spec-table th {
  width: 42%;
  font-weight: 600;
  color: var(--dt-ink);
  background: var(--dt-surface-2);
}

.dt-spec-table td {
  color: var(--dt-body);
}

.dt-mount {
  display: grid;
  gap: 16px;
}

.dt-mount__item {
  display: flex;
  gap: 16px;
  padding: 22px;
  border-radius: var(--dt-r-lg);
  background: var(--dt-surface);
  border: 1px solid var(--dt-line);
  box-shadow: var(--dt-sh-xs);
}

.dt-mount__item h3 {
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.dt-mount__item p {
  margin: 0;
  font-size: .95rem;
  color: var(--dt-muted);
  line-height: 1.65;
}

.dt-mount__item .dt-feat__icon {
  flex: none;
  width: 46px;
  height: 46px;
  margin: 0;
  border-radius: 14px;
}

.dt-mount__item .dt-feat__icon svg {
  width: 22px;
  height: 22px;
}

.dt-mast-apps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: clamp(28px, 3vw, 40px) 0 0;
  padding: 0;
  list-style: none;
}

.dt-mast-apps li {
  padding: 22px 20px;
  border-radius: var(--dt-r-md);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .13);
  color: rgba(215, 231, 244, .78);
  font-size: .95rem;
  line-height: 1.55;
}

.dt-mast-apps strong {
  display: block;
  color: #fff;
  font-family: var(--dt-font-display);
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.dt-mast-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  padding: clamp(28px, 3.6vw, 48px);
  border-radius: var(--dt-r-xl);
  background: var(--dt-grad-brand);
  color: rgba(255, 255, 255, .86);
  box-shadow: var(--dt-sh-lg);
}

.dt-mast-cta h2 {
  color: #fff;
  font-size: clamp(1.4rem, 1.05rem + 1.3vw, 2.1rem);
  margin-bottom: 8px;
}

.dt-mast-cta p {
  margin: 0;
  max-width: 620px;
}

.dt-mast-cta .dt-btn--primary {
  background: #fff;
  color: var(--dt-blue-600);
}

@media (max-width: 1079px) {
  .dt-spot,
  .dt-mast-intro,
  .dt-mast-specs,
  .dt-mast-film {
    grid-template-columns: minmax(0, 1fr);
  }

  .dt-video--portrait {
    justify-self: center;
    height: min(560px, 70vh);
  }
  .dt-spot--reverse {
    grid-template-columns: minmax(0, 1fr);
  }

  .dt-spot--reverse .dt-spot__media {
    order: 0;
    border-left: 0;
  }

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

  .dt-spot__media {
    min-height: 460px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }

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

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

@media (max-width: 640px) {
  .dt-mast-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dt-mast-stats--3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .dt-spot__stats {
    gap: 8px;
  }

  .dt-spot__stats li {
    padding: 12px 8px;
    font-size: 11.5px;
  }

  .dt-feat-grid,
  .dt-mast-apps {
    grid-template-columns: minmax(0, 1fr);
  }

  .dt-spec-table th,
  .dt-spec-table td {
    padding: 12px 14px;
    font-size: .9rem;
  }

  .dt-spot__actions .dt-btn,
  .dt-mast-cta .dt-btn {
    width: 100%;
  }

  .dt-video {
    border-radius: var(--dt-r-md);
  }
}

/* ---------------------------------------------------------------------------
   HOVER DEPTH — shared across card types site-wide (social cards have their
   own, tuned version). On hover a card lifts and its shadow stacks into
   layers: a tight contact shadow, a mid shadow and a long soft cast tinted
   with the card's accent, plus a light catch on the top edge. No tilt.
   Lift tiers: full cards rise 8px, compact row items 4px, and long-form
   content cards (.dt-card, .dt-panel) take the shading only.
   ------------------------------------------------------------------------ */
:is(.dt-prod, .dt-serv, .dt-ai-card, .dt-stat, .dt-feat,
    .dt-logo, .dt-about__stat, .dt-mount__item, .dt-contact__card, .dt-eng__point,
    .dt-card, .dt-panel) {
  --dt-depth-glow: 7, 114, 183;
  --dt-depth-lift: -8px;
  transition: transform 520ms var(--dt-ease-out), box-shadow 520ms var(--dt-ease-out),
    border-color 520ms var(--dt-ease), background-color 520ms var(--dt-ease);
}

:is(.dt-logo, .dt-about__stat, .dt-mount__item, .dt-contact__card, .dt-eng__point) {
  --dt-depth-lift: -4px;
}

:is(.dt-card, .dt-panel) {
  --dt-depth-lift: 0px;
}

.dt-stat {
  --dt-depth-glow: 20, 145, 60;
}

:is(.dt-prod, .dt-serv, .dt-ai-card, .dt-stat, .dt-feat,
    .dt-logo, .dt-about__stat, .dt-mount__item, .dt-contact__card, .dt-eng__point,
    .dt-contact__cards--light .dt-contact__card, .dt-eng--light .dt-eng__point,
    .dt-card, .dt-panel):is(:hover, :focus-within) {
  transform: translateY(var(--dt-depth-lift));
  border-color: rgba(var(--dt-depth-glow), .24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    0 1px 2px rgba(16, 32, 52, .06),
    0 6px 12px -4px rgba(16, 32, 52, .10),
    0 18px 32px -14px rgba(16, 32, 52, .22),
    0 34px 60px -26px rgba(var(--dt-depth-glow), .42);
}

/* Cards on dark bands: the edge catch is subtler and the cast deeper. */
:is(.dt-section--dark, .dt-ai-section--color) :is(.dt-contact__card, .dt-eng__point, .dt-card, .dt-ai-card):is(:hover, :focus-within) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 6px 12px -4px rgba(0, 0, 0, .25),
    0 22px 40px -16px rgba(0, 0, 0, .45),
    0 34px 60px -26px rgba(var(--dt-depth-glow), .5);
}

@media (prefers-reduced-motion: reduce) {
  :is(.dt-prod, .dt-serv, .dt-ai-card, .dt-stat, .dt-feat,
      .dt-logo, .dt-about__stat, .dt-mount__item, .dt-contact__card, .dt-eng__point,
      .dt-card, .dt-panel):is(:hover, :focus-within) {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   LIGHTNING-DETECTION APPLICATION PAGES (airports, construction, golf,
   industry, manufacturing): full-width infographic and a closing CTA.
   ------------------------------------------------------------------------ */
.dt-apl-figure {
  margin-block: 26px 8px;
}

.dt-apl-figure .dt-clean-image {
  display: block;
  width: 100%;
}

.dt-apl-figure .dt-clean-image img {
  display: block;
  width: 100%;
  max-height: none;
  height: auto;
  border-radius: var(--dt-r-md);
  box-shadow: var(--dt-sh-md);
}

.dt-apl-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-top: 32px;
  padding: 20px 24px;
  border-radius: var(--dt-r-md);
  background: linear-gradient(135deg, rgba(7, 114, 183, .07), rgba(27, 178, 75, .05));
  border: 1px solid rgba(7, 114, 183, .16);
}

.dt-apl-cta p {
  margin: 0;
  font-weight: 600;
  color: var(--dt-ink);
}

.dt-apl-cta .dt-btnset {
  margin: 0;
}