/* DevilX Agency v4.0 — Premium CSS
   Design philosophy: Bold typography, glass morphism, 
   atmospheric backgrounds, premium spacing
   Matches quality of Tanweer Khan reference design */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,300&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Backgrounds */
  --bg:   #050507;
  --bg2:  #080810;
  --bg3:  #0d0d18;
  --bg4:  #111122;
  --bg5:  #161630;

  /* Brand */
  --red:  #e01e1e;
  --red2: #c01515;
  --red3: #ff3333;
  --rdim: rgba(224,30,30,.10);
  --rglow:rgba(224,30,30,.28);
  --rline:rgba(224,30,30,.22);
  --rborder:rgba(224,30,30,.18);

  /* Gold accent */
  --gold: #c8963a;
  --gold2:#e8b84b;

  /* Cyan */
  --cyan: #00d4ff;
  --cdim: rgba(0,212,255,.07);

  /* Text */
  --w:   #f4f0ec;
  --w90: rgba(244,240,236,.90);
  --w70: rgba(244,240,236,.68);
  --w50: rgba(244,240,236,.46);
  --w30: rgba(244,240,236,.28);
  --w15: rgba(244,240,236,.12);

  /* Lines */
  --ln:  rgba(244,240,236,.08);
  --ln2: rgba(244,240,236,.14);

  /* Fonts */
  --FD: 'Syne', system-ui, sans-serif;        /* Display headings */
  --FB: 'DM Sans', system-ui, sans-serif;     /* Body text */
  --FM: 'JetBrains Mono', monospace;          /* Labels, tags, mono */

  /* Spacing */
  --pad: clamp(20px, 5vw, 72px);

  /* Easing */
  --ease:  cubic-bezier(.4,0,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --sharp: cubic-bezier(.16,1,.3,1);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg) !important;
  color: var(--w70) !important;
  font-family: var(--FB);
  font-size: 17px;
  line-height: 1.75;
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--red); text-decoration: none; transition: color .2s; }
a:hover { color: var(--w); }
img { max-width: 100%; height: auto; display: block; }
p { margin-bottom: 1.2rem; color: var(--w70); font-size: 17px; line-height: 1.78; font-weight: 300; }
p:last-child { margin-bottom: 0; }
p strong, p b { color: var(--w90); font-weight: 500; }
h1,h2,h3,h4,h5,h6 {
  font-family: var(--FD);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -.025em;
  color: var(--w);
}
ul, ol { padding-left: 1.4rem; }
li { margin-bottom: .5rem; }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-thumb { background: var(--red); }
::selection { background: var(--red); color: #fff; }

/* ── LAYOUT ── */
.dx-wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--pad); }
.dx-sec { padding: clamp(72px, 9vw, 120px) 0; position: relative; }
.dx-sec-sm { padding: clamp(48px, 6vw, 72px) 0; }
.dx-bg2 { background: var(--bg2); }
.dx-rule { height: 1px; background: linear-gradient(90deg, transparent, var(--ln2) 30%, var(--ln2) 70%, transparent); }
.dx-ctr { text-align: center; }

/* ── TYPOGRAPHY ── */
.dx-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--FM);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--red3);
  margin-bottom: 16px;
}
.dx-tag::before { content: ''; width: 18px; height: 1px; background: var(--red3); flex-shrink: 0; }
.dx-tag.ctr { justify-content: center; }
.dx-tag.ctr::before { display: none; }

.dx-h1 {
  font-family: var(--FD);
  font-size: clamp(44px, 7.5vw, 96px);
  line-height: .9;
  letter-spacing: -.03em;
  font-weight: 800;
  color: var(--w);
}
.dx-h2 {
  font-family: var(--FD);
  font-size: clamp(36px, 5.5vw, 72px);
  line-height: .92;
  letter-spacing: -.028em;
  font-weight: 700;
}
.dx-h3 {
  font-family: var(--FD);
  font-size: clamp(22px, 3vw, 34px);
  letter-spacing: -.018em;
  font-weight: 700;
}
.dx-h4 {
  font-family: var(--FD);
  font-size: clamp(18px, 2.2vw, 24px);
  letter-spacing: -.014em;
  font-weight: 600;
}
.dx-lead { font-size: clamp(18px, 2vw, 22px); color: var(--w70); line-height: 1.72; font-weight: 300; }
.ghost { -webkit-text-stroke: 2px rgba(244,240,236,.16); color: transparent; }
.fire { color: var(--red); }
.gold { color: var(--gold2); }

/* ── BUTTONS ── */
.dx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--FM);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 16px 36px;
  cursor: pointer;
  text-decoration: none !important;
  white-space: nowrap;
  transition: all .28s var(--ease);
  border: none;
  position: relative;
  overflow: hidden;
}
.dx-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background .2s;
}
.dx-btn:hover::after { background: rgba(255,255,255,.06); }
.dx-btn:active { transform: scale(.97) !important; }

.dx-btn-red {
  background: linear-gradient(135deg, var(--red), var(--red2));
  color: #fff !important;
  box-shadow: 0 4px 24px rgba(224,30,30,.32);
  border-radius: 4px;
}
.dx-btn-red:hover {
  box-shadow: 0 8px 36px rgba(224,30,30,.52);
  transform: translateY(-2px);
  color: #fff !important;
}

.dx-btn-wire {
  background: transparent;
  color: var(--w70) !important;
  border: 1px solid var(--ln2);
  border-radius: 4px;
}
.dx-btn-wire:hover {
  border-color: var(--rborder);
  color: var(--red3) !important;
  transform: translateY(-2px);
}

.dx-btn-lg { padding: 18px 44px; font-size: 12px; }
.dx-btn-sm { padding: 11px 24px; font-size: 10px; }

/* ── HEADER ── */
.dx-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  height: 68px;
  display: flex;
  align-items: stretch;
  transition: background .35s, border-color .35s, box-shadow .35s;
  border-bottom: 1px solid transparent;
}
.dx-header.scrolled {
  background: rgba(5,5,7,.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom-color: var(--ln);
  box-shadow: 0 4px 40px rgba(0,0,0,.5);
}
.dx-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 34px;
  border-right: 1px solid var(--ln);
  font-family: var(--FD);
  font-size: 1.1rem;
  letter-spacing: -.02em;
  font-weight: 800;
  color: var(--w);
  text-decoration: none !important;
  flex-shrink: 0;
  transition: color .2s;
  position: relative;
}
.dx-logo::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--red), transparent);
}
.dx-logo em { color: var(--red); font-style: normal; }
.dx-logo-icon {
  width: 30px;
  height: 30px;
  background: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
  flex-shrink: 0;
  color: #fff;
}
.dx-nav { display: flex; align-items: stretch; flex: 1; overflow: hidden; }
.dx-nav > ul {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}
.dx-nav > ul > li { display: flex; align-items: stretch; position: relative; }
.dx-nav > ul > li > a {
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-family: var(--FM);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--w50);
  border-right: 1px solid var(--ln);
  transition: color .2s, background .2s;
  white-space: nowrap;
  text-decoration: none !important;
  position: relative;
}
.dx-nav > ul > li > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--sharp);
}
.dx-nav > ul > li > a:hover,
.dx-nav > ul > li.current-menu-item > a {
  color: var(--w);
  background: var(--rdim);
}
.dx-nav > ul > li > a:hover::after,
.dx-nav > ul > li.current-menu-item > a::after { transform: scaleX(1); }
/* Dropdown */
.dx-nav > ul > li:hover > ul { display: block; animation: fadeIn .2s ease; }
.dx-nav > ul > li > ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  background: rgba(5,5,10,.98);
  border: 1px solid var(--ln);
  border-top: 2px solid var(--red);
  z-index: 9999;
  padding: 8px 0;
  box-shadow: 0 24px 64px rgba(0,0,0,.8);
  backdrop-filter: blur(20px);
}
.dx-nav > ul > li > ul > li > a {
  padding: 12px 22px;
  font-size: 13px;
  color: var(--w50);
  display: block;
  border-bottom: 1px solid var(--ln);
  transition: color .2s, padding .2s;
  text-decoration: none !important;
  font-family: var(--FB);
  font-weight: 300;
}
.dx-nav > ul > li > ul > li:last-child > a { border-bottom: none; }
.dx-nav > ul > li > ul > li > a:hover { color: var(--red); padding-left: 30px; background: var(--rdim); }
/* Header right */
.dx-header-right {
  display: flex;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
  border-left: 1px solid var(--ln);
}
.dx-header-phone {
  padding: 0 18px;
  font-family: var(--FM);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--w40, var(--w50));
  border-right: 1px solid var(--ln);
  white-space: nowrap;
  text-decoration: none !important;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color .2s;
}
.dx-header-phone:hover { color: var(--w); }
.dx-header-whatsapp {
  padding: 0 16px;
  border-right: 1px solid var(--ln);
  color: var(--w50);
  font-size: 18px;
  display: flex;
  align-items: center;
  transition: color .2s;
  text-decoration: none !important;
}
.dx-header-whatsapp:hover { color: #25D366; }
.dx-header-cta {
  height: 100%;
  padding: 0 30px;
  background: linear-gradient(135deg, var(--red), var(--red2));
  color: #fff;
  font-family: var(--FM);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 600;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: box-shadow .2s;
  text-decoration: none !important;
  white-space: nowrap;
}
.dx-header-cta:hover {
  box-shadow: inset 0 0 30px rgba(0,0,0,.2);
  color: #fff;
}
/* Ham */
.dx-ham {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0 20px;
  background: none;
  border: none;
  cursor: pointer;
  border-left: 1px solid var(--ln);
  height: 100%;
  align-items: center;
  justify-content: center;
  min-width: 60px;
}
.dx-ham span {
  width: 22px;
  height: 1.5px;
  background: var(--w);
  transition: transform .3s, opacity .3s;
  display: block;
}
.dx-ham.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.dx-ham.open span:nth-child(2) { opacity: 0; }
.dx-ham.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* Mobile nav */
.dx-mobile-nav {
  display: none;
  background: rgba(5,5,7,.99);
  border-top: 1px solid var(--ln);
  position: fixed;
  top: 68px;
  left: 0;
  right: 0;
  z-index: 9998;
  max-height: calc(100vh - 68px);
  overflow-y: auto;
}
.dx-mobile-nav.open { display: block; animation: fadeIn .2s ease; }
.dx-mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.dx-mobile-nav ul li a {
  display: block;
  padding: 15px 30px;
  font-family: var(--FM);
  font-size: 11px;
  letter-spacing: .11em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--w50);
  border-bottom: 1px solid var(--ln);
  text-decoration: none !important;
  transition: color .2s, padding .2s;
}
.dx-mobile-nav ul li a:hover { color: var(--red); padding-left: 38px; }
.dx-mobile-nav ul ul li a { padding-left: 46px; font-size: 10px; color: var(--w30); background: rgba(255,255,255,.02); }
.dx-mobile-cta { padding: 22px 30px; display: flex; gap: 10px; flex-wrap: wrap; }
.dx-mobile-cta .dx-btn { flex: 1; justify-content: center; }

/* ── HERO ── */
.dx-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 88px 0 60px;
}
/* Animated mesh background */
.dx-vr-floor {
  position: absolute;
  left: -30%;
  right: -30%;
  bottom: -10%;
  height: 70%;
  background-image:
    linear-gradient(rgba(224,30,30,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(224,30,30,.06) 1px, transparent 1px);
  background-size: 88px 88px;
  transform-origin: 50% 100%;
  transform: perspective(1200px) rotateX(74deg);
  animation: floorScroll 10s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.dx-vr-floor::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--bg) 0%, rgba(5,5,7,.5) 30%, transparent 58%, var(--bg) 100%);
}
.dx-vr-horizon {
  position: absolute;
  left: 0;
  right: 0;
  top: 47%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224,30,30,.2) 15%, rgba(224,30,30,.7) 50%, rgba(224,30,30,.2) 85%, transparent);
  pointer-events: none;
  z-index: 0;
}
.dx-vr-scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,.06) 25%, rgba(0,212,255,.32) 50%, rgba(0,212,255,.06) 75%, transparent);
  animation: scanLine 12s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.dx-vr-atmo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 70% 38%, rgba(224,30,30,.05), transparent 65%),
    radial-gradient(ellipse 40% 40% at 20% 70%, rgba(0,212,255,.025), transparent 55%);
}
.dx-hud-br {
  position: absolute;
  width: 44px;
  height: 44px;
  pointer-events: none;
  z-index: 1;
}
.dx-hud-br.tl { top: 78px; left: var(--pad); border-top: 1px solid rgba(224,30,30,.3); border-left: 1px solid rgba(224,30,30,.3); }
.dx-hud-br.tr { top: 78px; right: var(--pad); border-top: 1px solid rgba(224,30,30,.3); border-right: 1px solid rgba(224,30,30,.3); }
.dx-hud-br.bl { bottom: 54px; left: var(--pad); border-bottom: 1px solid var(--rborder); border-left: 1px solid var(--rborder); }
.dx-hud-br.br { bottom: 54px; right: var(--pad); border-bottom: 1px solid var(--rborder); border-right: 1px solid var(--rborder); }

.dx-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 80px;
  align-items: center;
}
.dx-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--FM);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(255,190,190,.85);
  border: 1px solid var(--rborder);
  background: var(--rdim);
  padding: 8px 18px;
  margin-bottom: 26px;
  border-radius: 2px;
}
.dx-badge-dot {
  width: 6px;
  height: 6px;
  background: var(--red3);
  border-radius: 50%;
  animation: blink 1.5s step-end infinite;
  flex-shrink: 0;
}
.dx-hero-sub {
  font-size: clamp(17px, 1.8vw, 21px);
  color: var(--w70);
  line-height: 1.75;
  max-width: 480px;
  margin: 22px 0 38px;
  font-weight: 300;
}
.dx-hero-btns { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.dx-hero-trust {
  font-family: var(--FM);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--w30);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.dx-hero-trust i { color: var(--red); }
.dx-hero-stats {
  display: flex;
  margin-top: 56px;
  padding-top: 44px;
  border-top: 1px solid var(--ln);
}
.dx-stat { flex: 1; }
.dx-stat + .dx-stat { padding-left: 28px; border-left: 1px solid var(--ln); }
.dx-stat-v {
  font-family: var(--FD);
  font-size: clamp(2.2rem, 3.5vw, 3rem);
  line-height: 1;
  color: var(--red);
  font-weight: 800;
  margin-bottom: 6px;
  letter-spacing: -.02em;
}
.dx-stat-l {
  font-family: var(--FM);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--w30);
}

/* Holo panel */
.dx-holo {
  background: rgba(244,240,236,.02);
  border: 1px solid rgba(244,240,236,.06);
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.dx-holo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--red) 30%, var(--cyan) 70%, transparent);
}
.dx-holo::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.022), transparent);
  animation: sweep 6s ease-in-out infinite;
  pointer-events: none;
}
.dx-holo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ln); }
.dx-hc {
  background: var(--bg2);
  padding: 26px 22px;
  position: relative;
  overflow: hidden;
  transition: background .25s;
}
.dx-hc::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--red);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .35s var(--sharp);
}
.dx-hc:hover { background: var(--bg3); }
.dx-hc:hover::before { transform: scaleY(1); }
.dx-hc-v {
  font-family: var(--FD);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--red);
  font-weight: 800;
  margin-bottom: 5px;
  letter-spacing: -.02em;
}
.dx-hc-k {
  font-family: var(--FM);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--w30);
}
.dx-hc-span { grid-column: 1 / -1; }
.dx-hc-span .dx-hc-v {
  font-family: var(--FB);
  font-size: 16px;
  font-weight: 300;
  color: var(--w70);
  line-height: 1.75;
}
.dx-holo-foot {
  background: var(--bg2);
  border-top: 1px solid var(--ln);
  padding: 13px 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--FM);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--w30);
}
.dx-hf-dot {
  width: 6px;
  height: 6px;
  background: var(--cyan);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(0,212,255,.5);
  animation: blink 2s step-end infinite;
}

/* ── PAGE HERO (inner pages) ── */
.dx-page-hero {
  background: var(--bg);
  padding: clamp(100px, 12vw, 150px) 0 clamp(60px, 7vw, 90px);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--ln);
}
.dx-phero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 70% at 110% 50%, rgba(224,30,30,.10) 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at -5% 60%, rgba(200,150,58,.04) 0%, transparent 50%),
    radial-gradient(ellipse 40% 40% at 50% 110%, rgba(224,30,30,.06) 0%, transparent 55%);
  pointer-events: none;
}
.dx-phero-mesh {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(244,240,236,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,240,236,.025) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
  animation: meshDrift 18s ease-in-out infinite;
}
.dx-phero-corner { position: absolute; width: 100px; height: 100px; pointer-events: none; }
.dx-phero-corner.tl { top: 44px; left: var(--pad); border-top: 1px solid rgba(224,30,30,.22); border-left: 1px solid rgba(224,30,30,.22); }
.dx-phero-corner.br { bottom: 36px; right: var(--pad); border-bottom: 1px solid rgba(224,30,30,.22); border-right: 1px solid rgba(224,30,30,.22); }
.dx-phero-inner { position: relative; z-index: 2; }

/* Breadcrumb */
.dx-bc {
  font-family: var(--FM);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--w30);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.dx-bc a { color: var(--red); text-decoration: none !important; }
.dx-bc a:hover { color: var(--w); }
.dx-bc-sep { color: rgba(244,240,236,.2); }

/* ── SEC HEADER ── */
.dx-sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 56px;
  flex-wrap: wrap;
  gap: 16px;
}
.dx-cat-stripe {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--FM);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--w30);
  margin: 36px 0 14px;
}
.dx-cat-stripe em { color: var(--red); font-style: normal; margin-right: 2px; }
.dx-cat-stripe::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--ln), transparent);
}

/* ── SERVICE CARDS ── */
.dx-sg { display: grid; gap: 1px; background: var(--ln); }
.dx-sg-4 { grid-template-columns: repeat(4, 1fr); }
.dx-sg-3 { grid-template-columns: repeat(3, 1fr); }
.dx-sg-2 { grid-template-columns: repeat(2, 1fr); }

.dx-sc {
  background: var(--bg2);
  padding: 40px 32px;
  position: relative;
  overflow: hidden;
  transition: background .3s var(--ease);
  cursor: pointer;
}
.dx-sc::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--red), var(--cyan));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--sharp);
}
.dx-sc::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--rdim), rgba(0,212,255,.05) 60%, transparent 80%);
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
}
.dx-sc:hover { background: var(--bg3); }
.dx-sc:hover::before { transform: scaleX(1); }
.dx-sc:hover::after { opacity: 1; }
.dx-sc-num {
  position: absolute;
  top: 12px;
  right: 16px;
  font-family: var(--FD);
  font-size: 4.5rem;
  font-weight: 800;
  color: rgba(244,240,236,.025);
  pointer-events: none;
  line-height: 1;
  transition: color .3s;
}
.dx-sc:hover .dx-sc-num { color: rgba(224,30,30,.04); }
.dx-sc-ico {
  width: 48px;
  height: 48px;
  background: var(--rdim);
  border: 1px solid var(--rborder);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 22px;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
  transition: background .3s, box-shadow .3s;
  color: var(--red);
}
.dx-sc:hover .dx-sc-ico {
  background: rgba(224,30,30,.2);
  box-shadow: 0 0 22px rgba(224,30,30,.2);
}
.dx-sc-name {
  font-family: var(--FD);
  font-size: 16px;
  letter-spacing: -.01em;
  font-weight: 700;
  color: var(--w90);
  margin-bottom: 11px;
  line-height: 1.25;
  transition: color .2s;
}
.dx-sc:hover .dx-sc-name { color: var(--red3); }
.dx-sc-desc { font-size: 15px; color: var(--w50); line-height: 1.68; margin-bottom: 18px; font-weight: 300; }
.dx-sc-price {
  font-family: var(--FM);
  font-size: 10px;
  color: var(--red3);
  margin-bottom: 12px;
  letter-spacing: .08em;
}
.dx-sc-link {
  font-family: var(--FM);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--red3);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .3s, transform .3s var(--sharp);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dx-sc:hover .dx-sc-link { opacity: 1; transform: none; }

/* ── SINGLE SERVICE PAGE ── */
.dx-svc-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 72px;
  align-items: start;
  padding-top: 72px;
}
/* Content area */
.dx-svc-content h2 {
  font-family: var(--FD);
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: -.02em;
  font-weight: 700;
  color: var(--w);
  margin: 44px 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ln);
}
.dx-svc-content h2:first-child { margin-top: 0; }
.dx-svc-content h3 {
  font-family: var(--FD);
  font-size: clamp(19px, 2.2vw, 26px);
  letter-spacing: -.015em;
  font-weight: 700;
  color: var(--w90);
  margin: 32px 0 14px;
}
.dx-svc-content p {
  font-size: 17px;
  color: var(--w70);
  line-height: 1.82;
  margin-bottom: 20px;
  font-weight: 300;
}
.dx-svc-content ul,
.dx-svc-content ol {
  list-style: none;
  padding: 0;
  margin: 16px 0 26px;
}
.dx-svc-content ul li,
.dx-svc-content ol li {
  font-size: 16px;
  color: var(--w70);
  line-height: 1.78;
  padding: 12px 0 12px 28px;
  position: relative;
  border-bottom: 1px solid var(--ln);
  font-weight: 300;
}
.dx-svc-content ul li:last-child,
.dx-svc-content ol li:last-child { border-bottom: none; }
.dx-svc-content ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--red3);
  font-family: var(--FM);
  font-size: .75rem;
  top: 14px;
}

/* ── SERVICE SIDEBAR PANEL ── */
.dx-svc-panel {
  background: rgba(12,12,18,.95);
  border: 1px solid var(--ln2);
  position: sticky;
  top: 88px;
  overflow: hidden;
  border-radius: 6px;
  backdrop-filter: blur(12px);
}
.dx-svc-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--red), var(--red3), var(--gold2));
}
.dx-svc-panel::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 35%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.018), transparent);
  animation: sweep 7s ease-in-out infinite;
  pointer-events: none;
}
.dx-svc-panel-head {
  padding: 28px 26px 24px;
  border-bottom: 1px solid var(--ln);
}
.dx-svc-panel-ico {
  width: 52px;
  height: 52px;
  background: var(--rdim);
  border: 1px solid var(--rborder);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--red3);
  margin-bottom: 18px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.dx-svc-panel-cat {
  font-family: var(--FM);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--w30);
  margin-bottom: 6px;
}
.dx-svc-panel-name {
  font-family: var(--FD);
  font-size: 1.15rem;
  letter-spacing: -.015em;
  font-weight: 700;
  color: var(--w);
  margin-bottom: 8px;
  line-height: 1.25;
}
.dx-svc-panel-price {
  font-family: var(--FM);
  font-size: 11px;
  color: var(--red3);
  letter-spacing: .08em;
  font-weight: 600;
}
/* Features list */
.dx-svc-features { list-style: none; padding: 0; margin: 0; }
.dx-svc-features li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 24px;
  border-bottom: 1px solid var(--ln);
  font-size: 14px;
  color: var(--w70);
  transition: background .2s, color .2s;
  font-weight: 300;
}
.dx-svc-features li:last-child { border-bottom: none; }
.dx-svc-features li:hover { background: var(--rdim); color: var(--w90); }
.dx-svc-features li i { color: var(--red3); width: 14px; flex-shrink: 0; font-size: .75rem; }
.dx-svc-cta-box { padding: 24px 26px; border-top: 1px solid var(--ln); }

/* ── PROOF ── */
.dx-proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ln); }
.dx-pc {
  background: var(--bg2);
  padding: 48px 40px;
  position: relative;
  overflow: hidden;
  transition: background .3s;
}
.dx-pc:hover { background: var(--bg3); }
.dx-pc::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--red), var(--cyan), transparent);
  opacity: 0;
  transition: opacity .4s;
}
.dx-pc:hover::before { opacity: 1; }
.dx-pc-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--FM);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--w30);
  margin-bottom: 18px;
}
.dx-pc-dot { width: 5px; height: 5px; background: var(--red3); border-radius: 50%; flex-shrink: 0; }
.dx-pc-text { font-size: 15px; color: var(--w50); line-height: 1.75; margin-bottom: 28px; font-weight: 300; }
.dx-pc-num {
  font-family: var(--FD);
  font-size: clamp(3.2rem, 5vw, 4.5rem);
  line-height: 1;
  color: var(--red3);
  font-weight: 800;
  letter-spacing: -.025em;
}
.dx-pc-label {
  font-family: var(--FM);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--w30);
  margin-top: 6px;
}
.dx-pc-co {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--ln);
  font-family: var(--FM);
  font-size: 10px;
  color: rgba(244,240,236,.22);
  letter-spacing: .07em;
}

/* ── PROCESS ── */
.dx-proc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--ln);
  margin-top: 56px;
}
.dx-proc-card {
  background: var(--bg3);
  padding: 44px 30px;
  position: relative;
  overflow: hidden;
  transition: background .3s;
}
.dx-proc-card:hover { background: var(--bg4); }
.dx-proc-bg-n {
  position: absolute;
  bottom: 10px;
  right: 12px;
  font-family: var(--FD);
  font-size: 7rem;
  font-weight: 800;
  color: rgba(244,240,236,.02);
  pointer-events: none;
  line-height: 1;
}
.dx-proc-card:hover .dx-proc-bg-n { color: rgba(224,30,30,.035); }
.dx-proc-ring {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--rborder);
  background: var(--rdim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--FD);
  font-size: 1.15rem;
  color: var(--red3);
  font-weight: 800;
  margin-bottom: 26px;
  transition: background .3s, box-shadow .3s;
}
.dx-proc-card:hover .dx-proc-ring {
  background: rgba(224,30,30,.2);
  box-shadow: 0 0 26px rgba(224,30,30,.22);
}
.dx-proc-title {
  font-family: var(--FD);
  font-size: 16px;
  letter-spacing: -.01em;
  font-weight: 700;
  color: var(--w90);
  margin-bottom: 13px;
  transition: color .2s;
}
.dx-proc-card:hover .dx-proc-title { color: var(--red3); }
.dx-proc-desc { font-size: 14px; color: var(--w50); line-height: 1.7; font-weight: 300; }

/* ── TESTIMONIALS ── */
.dx-testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ln); }
.dx-testi {
  background: var(--bg2);
  padding: 40px 34px;
  position: relative;
  overflow: hidden;
  transition: background .3s;
}
.dx-testi:hover { background: var(--bg3); }
.dx-testi::before {
  content: '\201C';
  position: absolute;
  top: 22px;
  right: 26px;
  font-family: Georgia, serif;
  font-size: 7rem;
  color: rgba(224,30,30,.07);
  line-height: 1;
  pointer-events: none;
}
.dx-testi-stars { color: var(--gold2); font-size: 14px; margin-bottom: 16px; letter-spacing: 2px; }
.dx-testi-text {
  font-size: 15px;
  color: var(--w70);
  line-height: 1.82;
  margin-bottom: 26px;
  font-style: italic;
  font-weight: 300;
}
.dx-testi-author { display: flex; align-items: center; gap: 14px; }
.dx-testi-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--rdim);
  border: 2px solid var(--rborder);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--FD);
  font-size: .85rem;
  color: var(--red3);
  font-weight: 800;
  flex-shrink: 0;
}
.dx-testi-name { font-family: var(--FD); font-size: 14px; letter-spacing: -.01em; font-weight: 700; color: var(--w90); }
.dx-testi-role { font-family: var(--FM); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--w30); margin-top: 3px; }

/* ── CTA SECTION ── */
.dx-cta-sec { position: relative; overflow: hidden; text-align: center; }
.dx-cta-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 55% at 50% 50%, rgba(224,30,30,.05), transparent 65%);
}
.dx-cta-ring1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 580px;
  height: 580px;
  border-radius: 50%;
  border: 1px solid rgba(224,30,30,.05);
  animation: rotate 32s linear infinite;
  pointer-events: none;
}
.dx-cta-ring1::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 20%;
  width: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224,30,30,.4), transparent);
}
.dx-cta-ring2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 370px;
  height: 370px;
  border-radius: 50%;
  border: 1px solid rgba(0,212,255,.04);
  animation: rotate 22s linear infinite reverse;
  pointer-events: none;
}
.dx-cta-ey {
  font-family: var(--FM);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--red3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 24px;
}
.dx-cta-ey span { color: var(--rborder); }
.dx-cta-h {
  font-family: var(--FD);
  font-size: clamp(3.2rem, 7vw, 7rem);
  line-height: .88;
  letter-spacing: -.035em;
  font-weight: 800;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}
.dx-cta-p {
  font-size: 18px;
  color: var(--w70);
  max-width: 480px;
  margin: 0 auto 48px;
  line-height: 1.75;
  font-weight: 300;
  position: relative;
  z-index: 1;
}
.dx-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; }

/* ── INDUSTRIES ── */
.dx-ind-layout { display: grid; grid-template-columns: 320px 1fr; gap: 88px; align-items: start; }
.dx-ind-left { position: sticky; top: 88px; }
.dx-ind-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ln); }
.dx-ic {
  background: var(--bg3);
  padding: 40px 34px;
  position: relative;
  overflow: hidden;
  transition: background .3s;
}
.dx-ic::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--red) 40%, var(--cyan) 80%, transparent);
  transition: left .55s var(--sharp);
}
.dx-ic:hover { background: var(--bg4); }
.dx-ic:hover::after { left: 0; }
.dx-ic-ico {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 18px;
  transition: transform .35s var(--spring);
}
.dx-ic:hover .dx-ic-ico { transform: translateY(-5px) scale(1.1); }
.dx-ic-name {
  font-family: var(--FD);
  font-size: 16px;
  letter-spacing: -.01em;
  font-weight: 700;
  color: var(--w90);
  margin-bottom: 9px;
  transition: color .2s;
}
.dx-ic:hover .dx-ic-name { color: var(--red3); }
.dx-ic-desc { font-size: 14px; color: var(--w50); line-height: 1.7; font-weight: 300; }
.dx-ind-notice {
  grid-column: 1 / -1;
  background: var(--rdim);
  border: 1px solid var(--rborder);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--FM);
  font-size: 10px;
  letter-spacing: .09em;
  color: var(--w70);
}

/* ── MARQUEE ── */
.dx-marquee { padding: 56px 0; overflow: hidden; position: relative; background: var(--bg2); }
.dx-marquee::before,
.dx-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 160px;
  z-index: 2;
  pointer-events: none;
}
.dx-marquee::before { left: 0; background: linear-gradient(90deg, var(--bg2), transparent); }
.dx-marquee::after { right: 0; background: linear-gradient(-90deg, var(--bg2), transparent); }
.dx-mq-track { display: flex; animation: marquee 26s linear infinite; width: max-content; }
.dx-mq-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 32px;
  border-right: 1px solid var(--ln);
  font-family: var(--FM);
  font-size: 11px;
  letter-spacing: .1em;
  font-weight: 500;
  color: var(--w30);
  white-space: nowrap;
  transition: color .2s;
}
.dx-mq-item:hover { color: var(--w90); }
.dx-mq-item i { color: var(--red); opacity: .7; }

/* ── CONTACT SECTION ── */
.dx-contact-layout { display: grid; grid-template-columns: 1fr 1.25fr; gap: 96px; align-items: start; }
.dx-ci-list { display: flex; flex-direction: column; gap: 1px; background: var(--ln); border-radius: 4px; overflow: hidden; }
.dx-ci-item {
  background: var(--bg3);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: background .25s;
}
.dx-ci-item:hover { background: var(--bg4); }
.dx-ci-ico {
  width: 40px;
  height: 40px;
  background: rgba(200,150,58,.07);
  border: 1px solid rgba(200,150,58,.18);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  color: var(--gold2);
  transition: all .28s var(--spring);
}
.dx-ci-item:hover .dx-ci-ico {
  transform: scale(1.1) rotate(-4deg);
  background: rgba(200,150,58,.15);
}
.dx-ci-lbl {
  font-family: var(--FM);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--w30);
  margin-bottom: 3px;
}
.dx-ci-val { font-size: 15px; color: var(--w90); font-weight: 400; }
.dx-ci-val a { color: var(--w90); text-decoration: none !important; transition: color .2s; }
.dx-ci-val a:hover { color: var(--red3); }

/* Response bar */
.dx-resp-bar {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 18px;
  background: rgba(0,212,255,.03);
  border: 1px solid rgba(0,212,255,.12);
  border-radius: 4px;
  font-family: var(--FM);
  font-size: 10px;
  letter-spacing: .09em;
  color: var(--w70);
}
.dx-resp-dot {
  width: 7px;
  height: 7px;
  background: var(--cyan);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(0,212,255,.5);
  animation: blink 2s step-end infinite;
}

/* ── CONTACT FORM (Premium Glass Card) ── */
.dx-form-glass {
  background: rgba(8,8,16,.95);
  border: 1px solid var(--ln2);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  backdrop-filter: blur(16px);
}
.dx-form-glass::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--red), var(--red3), var(--gold2));
}
.dx-form-glass::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 35%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.016), transparent);
  animation: sweep 9s ease-in-out infinite;
  pointer-events: none;
}
.dx-fcard-head {
  padding: 24px 30px 20px;
  border-bottom: 1px solid var(--ln);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.dx-fcard-title {
  font-family: var(--FD);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--w);
}
.dx-fcard-title em { color: var(--red3); font-style: normal; }
.dx-fcard-badge {
  font-family: var(--FM);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: var(--red);
  color: #fff;
  padding: 5px 14px;
  border-radius: 3px;
}
.dx-fcard-body { padding: 26px 30px 32px; }
.dx-form-sub {
  font-family: var(--FM);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--w30);
  margin-bottom: 28px;
}

/* Form elements */
.dx-fl {
  display: block;
  font-family: var(--FM);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--w30);
  margin-bottom: 7px;
}
.dx-fi, .dx-fsel, .dx-fta {
  width: 100%;
  background: rgba(244,240,236,.03);
  border: 1px solid var(--ln);
  padding: 14px 17px;
  font-family: var(--FB);
  font-size: 16px;
  font-weight: 300;
  color: var(--w90);
  outline: none;
  transition: border-color .22s, background .22s, box-shadow .22s;
  -webkit-appearance: none;
  border-radius: 6px;
  min-height: 52px;
  line-height: 1.5;
}
.dx-fi:focus, .dx-fsel:focus, .dx-fta:focus {
  border-color: var(--red);
  background: var(--rdim);
  box-shadow: 0 0 0 3px rgba(224,30,30,.1);
}
.dx-fi::placeholder, .dx-fta::placeholder { color: var(--w30); }
.dx-fi.err, .dx-fsel.err { border-color: rgba(220,38,38,.5); }
.dx-fsel {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 4.5L11 1' stroke='rgba(244,240,236,.3)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.dx-fsel option, .dx-fsel optgroup { background: var(--bg4); color: var(--w90); }
.dx-fta { resize: vertical; min-height: 120px; }
.dx-fr { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.dx-ff { display: flex; flex-direction: column; margin-bottom: 12px; }
.dx-f-notice {
  font-family: var(--FM);
  font-size: 9px;
  letter-spacing: .1em;
  color: rgba(244,240,236,.22);
  line-height: 1.65;
  padding: 12px 14px;
  border: 1px solid var(--ln);
  background: rgba(244,240,236,.02);
  margin: 14px 0 18px;
  border-radius: 4px;
}
.dx-fsub {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--red), var(--red2));
  color: #fff;
  border: none;
  padding: 17px 24px;
  font-family: var(--FM);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  border-radius: 6px;
  transition: box-shadow .3s, transform .2s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 22px rgba(224,30,30,.3);
}
.dx-fsub::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.13), transparent);
  transform: translateX(-100%);
  transition: transform .5s var(--sharp);
}
.dx-fsub:hover { box-shadow: 0 8px 36px rgba(224,30,30,.5); transform: translateY(-1px); }
.dx-fsub:hover::before { transform: translateX(100%); }
.dx-fsub:disabled { opacity: .55; pointer-events: none; }
.dx-fnote {
  font-family: var(--FM);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--w30);
  text-align: center;
  margin-top: 12px;
}
.dx-form-ok { display: none; text-align: center; padding: 60px 24px; }
.dx-form-ok-ico { font-size: 4rem; display: block; margin-bottom: 18px; }
.dx-form-ok-title {
  font-family: var(--FD);
  font-size: 2rem;
  color: var(--red3);
  letter-spacing: -.02em;
  font-weight: 800;
  margin-bottom: 14px;
}
.dx-form-ok-msg {
  font-size: 16px;
  color: var(--w70);
  line-height: 1.78;
  font-weight: 300;
  max-width: 380px;
  margin: 0 auto;
}

/* ── BLOG ── */
.dx-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ln); }
.dx-blog-card {
  background: var(--bg2);
  overflow: hidden;
  transition: transform .3s var(--sharp);
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.dx-blog-card:hover { transform: translateY(-5px); box-shadow: 0 24px 64px rgba(0,0,0,.5); }
.dx-blog-img { overflow: hidden; aspect-ratio: 16/9; background: var(--bg3); }
.dx-blog-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--sharp); }
.dx-blog-card:hover .dx-blog-img img { transform: scale(1.06); }
.dx-blog-body { padding: 26px 28px 30px; flex: 1; display: flex; flex-direction: column; }
.dx-blog-cats {
  font-family: var(--FM);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--red3);
  margin-bottom: 11px;
  display: block;
}
.dx-blog-cats a { color: var(--red3); text-decoration: none !important; }
.dx-blog-title {
  font-family: var(--FD);
  font-size: 1.05rem;
  letter-spacing: -.012em;
  font-weight: 700;
  color: var(--w90);
  margin-bottom: 13px;
  line-height: 1.35;
  display: block;
  transition: color .2s;
  text-decoration: none !important;
}
.dx-blog-title:hover { color: var(--red3); }
.dx-blog-exc { font-size: 14px; color: var(--w50); line-height: 1.68; margin-bottom: 18px; flex: 1; font-weight: 300; }
.dx-blog-meta {
  font-family: var(--FM);
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--w30);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* ── FOOTER ── */
.dx-footer { background: var(--bg2); border-top: 1px solid var(--ln); }
.dx-footer-top { padding: clamp(60px, 8vw, 96px) 0 clamp(48px, 6vw, 72px); }
.dx-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 60px; }
.dx-footer-logo {
  font-family: var(--FD);
  font-size: 1.6rem;
  letter-spacing: -.02em;
  font-weight: 800;
  color: var(--w90);
  display: block;
  margin-bottom: 18px;
  text-decoration: none !important;
}
.dx-footer-logo em { color: var(--red); font-style: normal; }
.dx-footer-logo:hover { color: var(--w); }
.dx-footer-brand p {
  font-size: 14px;
  color: var(--w30);
  line-height: 1.78;
  margin-bottom: 26px;
  font-weight: 300;
}
.dx-footer-social { display: flex; gap: 8px; flex-wrap: wrap; }
.dx-social-link {
  width: 38px;
  height: 38px;
  background: var(--bg3);
  border: 1px solid var(--ln);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  transition: background .25s, border-color .25s, color .25s;
  text-decoration: none !important;
  color: var(--w30);
}
.dx-social-link:hover { background: var(--rdim); border-color: var(--rborder); color: var(--red3); }
.dx-footer-heading {
  font-family: var(--FD);
  font-size: 14px;
  letter-spacing: -.01em;
  font-weight: 700;
  color: var(--w90);
  margin-bottom: 20px;
}
.dx-footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.dx-footer-links li a {
  font-size: 14px;
  color: var(--w30);
  transition: color .2s, padding .2s;
  text-decoration: none !important;
  display: block;
  font-weight: 300;
}
.dx-footer-links li a:hover { color: var(--red3); padding-left: 7px; }
.dx-footer-contact p { font-size: 14px; color: var(--w30); line-height: 1.78; font-weight: 300; }
.dx-footer-contact a { color: var(--w50); text-decoration: none !important; transition: color .2s; }
.dx-footer-contact a:hover { color: var(--red3); }
.dx-footer-bot { border-top: 1px solid var(--ln); padding: 22px 0; }
.dx-footer-bot-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.dx-footer-bot p { font-size: 13px; color: var(--w30); margin-bottom: 0; font-weight: 300; }
.dx-footer-legal { display: flex; gap: 24px; }
.dx-footer-legal a {
  font-family: var(--FM);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--w30);
  text-decoration: none !important;
  transition: color .2s;
}
.dx-footer-legal a:hover { color: var(--red3); }

/* ── CHATBOT ── */
#dx-chatbot { position: fixed; bottom: 30px; right: 30px; z-index: 99999; }
#dx-fab {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--red), var(--red2));
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  animation: pulseBtn 3s ease-in-out infinite;
  cursor: pointer;
  transition: transform .2s var(--spring);
  margin-left: auto;
  color: #fff;
  box-shadow: 0 4px 24px rgba(224,30,30,.35);
}
#dx-fab:hover { transform: scale(1.1); animation: none; box-shadow: 0 8px 32px rgba(224,30,30,.5); }
.dx-chat-panel {
  position: absolute;
  bottom: 72px;
  right: 0;
  width: 336px;
  background: rgba(8,8,16,.97);
  border: 1px solid var(--rborder);
  border-radius: 10px;
  box-shadow: 0 24px 80px rgba(0,0,0,.8);
  transform: translateY(14px) scale(.95);
  opacity: 0;
  pointer-events: none;
  transition: all .32s var(--sharp);
  backdrop-filter: blur(20px);
  overflow: hidden;
}
.dx-chat-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--red), var(--red3), var(--gold2));
}
.dx-chat-panel.open { transform: none; opacity: 1; pointer-events: all; }
.dx-chat-head {
  background: var(--bg3);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--ln);
}
.dx-chat-av {
  width: 32px;
  height: 32px;
  background: var(--rdim);
  border: 1px solid var(--rborder);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  flex-shrink: 0;
  color: var(--red3);
}
.dx-chat-name { font-family: var(--FD); font-size: .82rem; letter-spacing: -.01em; font-weight: 700; color: var(--w90); }
.dx-chat-status { font-family: var(--FM); font-size: 9px; color: var(--cyan); display: flex; align-items: center; gap: 5px; letter-spacing: .1em; }
.dx-chat-online-dot { width: 5px; height: 5px; background: var(--cyan); border-radius: 50%; animation: blink 2s step-end infinite; box-shadow: 0 0 5px rgba(0,212,255,.5); }
.dx-chat-x { margin-left: auto; background: none; border: none; color: var(--w30); font-size: 1.1rem; cursor: pointer; transition: color .2s; padding: 0 2px; }
.dx-chat-x:hover { color: var(--w90); }
.dx-chat-msgs { padding: 16px; max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; scrollbar-color: var(--rborder) transparent; }
.dx-chat-msg { font-size: 14px; line-height: 1.65; padding: 11px 14px; font-family: var(--FB); font-weight: 300; border-radius: 6px; }
.dx-chat-ai {
  background: rgba(244,240,236,.04);
  border: 1px solid var(--ln);
  border-left: 2px solid var(--red);
  color: var(--w70);
  align-self: flex-start;
  max-width: 92%;
}
.dx-chat-me {
  background: var(--rdim);
  border: 1px solid var(--rborder);
  color: var(--w90);
  align-self: flex-end;
  max-width: 86%;
}
.dx-typing {
  display: flex;
  gap: 5px;
  padding: 11px 14px;
  background: rgba(244,240,236,.04);
  border: 1px solid var(--ln);
  border-left: 2px solid var(--red);
  align-self: flex-start;
  border-radius: 6px;
}
.dx-typing span {
  width: 5px;
  height: 5px;
  background: var(--red3);
  border-radius: 50%;
  animation: typDot 1s ease-in-out infinite;
}
.dx-typing span:nth-child(2) { animation-delay: .15s; }
.dx-typing span:nth-child(3) { animation-delay: .3s; }
.dx-chat-quick { padding: 0 14px 10px; display: flex; gap: 5px; flex-wrap: wrap; }
.dx-qbtn {
  font-family: var(--FM);
  font-size: 10px;
  letter-spacing: .07em;
  color: var(--red3);
  border: 1px solid var(--rborder);
  background: var(--rdim);
  padding: 6px 11px;
  white-space: nowrap;
  transition: background .2s;
  cursor: pointer;
  border-radius: 3px;
}
.dx-qbtn:hover { background: rgba(224,30,30,.22); color: var(--w90); }
.dx-chat-in-row { display: flex; border-top: 1px solid var(--ln); }
.dx-chat-in {
  flex: 1;
  background: none;
  border: none;
  padding: 13px 16px;
  font-family: var(--FB);
  font-size: 14px;
  color: var(--w90);
  outline: none;
  font-weight: 300;
}
.dx-chat-in::placeholder { color: var(--w30); }
.dx-chat-send {
  background: var(--red);
  border: none;
  padding: 0 16px;
  color: #fff;
  display: flex;
  align-items: center;
  font-size: .95rem;
  transition: background .2s;
  cursor: pointer;
}
.dx-chat-send:hover { background: var(--red2); }

/* ── WHATSAPP STICKY ── */
.dx-wa-sticky {
  position: fixed;
  bottom: 98px;
  right: 30px;
  z-index: 9998;
  width: 48px;
  height: 48px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: #fff;
  text-decoration: none !important;
  box-shadow: 0 4px 18px rgba(37,211,102,.38);
  animation: pulseBtn 3s ease-in-out infinite;
  transition: transform .2s, box-shadow .2s;
}
.dx-wa-sticky:hover { transform: scale(1.1); color: #fff; box-shadow: 0 6px 28px rgba(37,211,102,.55); }
.dx-wa-sticky::before {
  content: 'Chat on WhatsApp';
  position: absolute;
  right: 58px;
  top: 50%;
  transform: translateY(-50%);
  background: #25D366;
  color: #fff;
  font-family: var(--FM);
  font-size: 9px;
  letter-spacing: .12em;
  white-space: nowrap;
  padding: 6px 11px;
  border-radius: 3px;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
.dx-wa-sticky:hover::before { opacity: 1; }

/* ── SIDEBAR ── */
.dx-sidebar .dx-widget { margin-bottom: 32px; }
.dx-widget-title {
  font-family: var(--FD);
  font-size: 14px;
  letter-spacing: -.01em;
  font-weight: 700;
  color: var(--w90);
  padding: 13px 18px;
  background: var(--bg2);
  border-left: 2px solid var(--red);
  margin-bottom: 16px;
}

/* ── PAGINATION ── */
.dx-pagination { display: flex; gap: 6px; justify-content: center; margin-top: 52px; flex-wrap: wrap; }
.dx-pagination .page-numbers,
.dx-pagination a {
  font-family: var(--FM);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--w30);
  padding: 9px 16px;
  border: 1px solid var(--ln);
  display: inline-block;
  transition: all .2s;
  text-decoration: none !important;
  border-radius: 4px;
}
.dx-pagination .page-numbers:hover,
.dx-pagination a:hover,
.dx-pagination .current { background: var(--red); color: #fff; border-color: var(--red); }

/* ── FILTER TABS ── */
.dx-filter-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 44px;
  flex-wrap: wrap;
  border: 1px solid var(--ln);
  border-radius: 6px;
  overflow: hidden;
  width: fit-content;
}
.dx-ftab {
  font-family: var(--FM);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--w30);
  padding: 13px 24px;
  background: transparent;
  border: none;
  border-right: 1px solid var(--ln);
  cursor: pointer;
  transition: color .2s, background .2s;
  white-space: nowrap;
}
.dx-ftab:last-child { border-right: none; }
.dx-ftab:hover,
.dx-ftab.active { color: var(--w); background: var(--rdim); }
.dx-ftab.active { color: var(--red3); }

/* ── SPOTS BANNER ── */
.dx-spots {
  background: rgba(224,30,30,.06);
  border: 1px solid rgba(224,30,30,.2);
  border-left: 3px solid var(--red);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 13px;
  border-radius: 4px;
  margin-bottom: 30px;
}
.dx-spots-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red3);
  flex-shrink: 0;
  animation: blink 2.2s ease-in-out infinite;
}
.dx-spots p { font-size: 15px; color: var(--w70); margin: 0; }
.dx-spots strong { color: var(--w90); font-weight: 600; }

/* ── REVEAL ── */
.dx-rev { opacity: 0; transform: translateY(26px); transition: opacity .72s var(--ease), transform .72s var(--ease); }
.dx-rev.on { opacity: 1; transform: none; }
.dx-rl { opacity: 0; transform: translateX(-26px); transition: opacity .72s var(--ease), transform .72s var(--ease); }
.dx-rl.on { opacity: 1; transform: none; }
.d1 { transition-delay: .08s; }
.d2 { transition-delay: .16s; }
.d3 { transition-delay: .24s; }
.d4 { transition-delay: .32s; }
.d5 { transition-delay: .40s; }

/* ── WP ── */
.aligncenter { display: block; margin: 0 auto; }
.alignleft { float: left; margin-right: 20px; }
.alignright { float: right; margin-left: 20px; }
body.elementor-page .dx-header { display: none; }
body.elementor-page #dx-main { padding-top: 0 !important; }

/* ── KEYFRAMES ── */
@keyframes floorScroll { from { background-position: 0 0; } to { background-position: 0 88px; } }
@keyframes scanLine { 0% { top: -1px; opacity: 0; } 3% { opacity: 1; } 90% { opacity: .28; } 100% { top: 100vh; opacity: 0; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .08; } }
@keyframes sweep { 0%, 100% { left: -60%; } 50% { left: 120%; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes rotate { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes pulseBtn { 0%, 100% { box-shadow: 0 0 0 0 rgba(224,30,30,.5); } 50% { box-shadow: 0 0 0 14px rgba(224,30,30,0); } }
@keyframes typDot { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-5px); opacity: 1; } }
@keyframes meshDrift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(5px, 8px); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ── RESPONSIVE ── */
@media (max-width: 1200px) { .dx-wrap { padding: 0 32px; } .dx-footer-grid { grid-template-columns: 1fr 1fr; gap: 44px; } }
@media (max-width: 1024px) {
  .dx-header-phone { display: none; }
  .dx-ham { display: flex; }
  .dx-nav { display: none; }
  .dx-sec { padding: 80px 0; }
  .dx-sg-4 { grid-template-columns: repeat(2, 1fr); }
  .dx-sg-3 { grid-template-columns: repeat(2, 1fr); }
  .dx-proof-grid { grid-template-columns: 1fr 1fr; }
  .dx-proc-grid { grid-template-columns: 1fr 1fr; }
  .dx-ind-layout { grid-template-columns: 1fr; gap: 52px; }
  .dx-ind-left { position: static; }
  .dx-contact-layout { grid-template-columns: 1fr; gap: 56px; }
  .dx-hero-inner { grid-template-columns: 1fr; }
  .dx-holo { display: none; }
  .dx-svc-layout { grid-template-columns: 1fr; }
  .dx-svc-panel { position: static; }
  .dx-testi-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .dx-wrap { padding: 0 22px; }
  .dx-sec { padding: 64px 0; }
  .dx-page-hero { padding-top: 108px; padding-bottom: 52px; }
  .dx-hero { min-height: auto; padding: 86px 0 60px; }
  .dx-h1 { font-size: 44px; }
  .dx-h2 { font-size: 36px; }
  .dx-sg-4, .dx-sg-3, .dx-sg-2 { grid-template-columns: 1fr; }
  .dx-proof-grid, .dx-blog-grid, .dx-testi-grid { grid-template-columns: 1fr; }
  .dx-proc-grid, .dx-ind-grid, .dx-footer-grid { grid-template-columns: 1fr; }
  .dx-hero-stats { flex-direction: column; }
  .dx-stat + .dx-stat { padding-left: 0; border-left: none; padding-top: 20px; border-top: 1px solid var(--ln); margin-top: 20px; }
  .dx-fr { grid-template-columns: 1fr; }
  .dx-form-glass { border-radius: 6px; }
  .dx-fcard-body { padding: 22px 20px 26px; }
  .dx-hero-btns, .dx-cta-btns { flex-direction: column; align-items: flex-start; }
  .dx-cta-btns { align-items: center; }
  .dx-hud-br { display: none; }
  .dx-contact-layout { gap: 40px; }
}
@media (max-width: 480px) {
  .dx-cta-h { font-size: 2.8rem; }
  .dx-h1 { font-size: 36px; }
}