/* ============================================================
   DYVE HACKAX 3.0
   PREMIUM INTELLIGENCE SYSTEM
============================================================ */

:root {

  --dx-bg: #020403;
  --dx-bg-soft: #040806;
  --dx-panel: #07100d;
  --dx-panel-2: #09140f;
  --dx-panel-3: #0c1813;

  --dx-line: rgba(255,255,255,.085);
  --dx-line-soft: rgba(255,255,255,.045);
  --dx-line-green: rgba(0,255,170,.14);

  --dx-text: #f5f9f7;
  --dx-muted: rgba(255,255,255,.61);
  --dx-subtle: rgba(255,255,255,.39);
  --dx-faint: rgba(255,255,255,.24);

  --dx-green: #00f5a6;
  --dx-green-bright: #19ffb1;
  --dx-green-soft: rgba(0,245,166,.09);
  --dx-green-glow: rgba(0,245,166,.20);

  --dx-red: #ff4d57;
  --dx-amber: #f6b44c;
  --dx-purple: #b36cff;
  --dx-cyan: #32d9f5;

  --dx-radius: 18px;
  --dx-radius-sm: 12px;

  --dx-max: 1260px;

  --dx-shadow:
    0 25px 80px rgba(0,0,0,.30);

}

/* ============================================================
   BASE
============================================================ */

html {

  scroll-behavior: smooth;
  background: var(--dx-bg);

}

body {

  position: relative;

  margin: 0;

  min-height: 100vh;

  overflow-x: hidden;

  background:
    radial-gradient(
      circle at 50% -15%,
      rgba(0,245,166,.075),
      transparent 34%
    ),
    radial-gradient(
      circle at 100% 45%,
      rgba(0,245,166,.025),
      transparent 28%
    ),
    var(--dx-bg);

  color: var(--dx-text);

  font-family: "Inter", sans-serif;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

}

body::before {

  content: "";

  position: fixed;

  inset: 0;

  z-index: -1;

  pointer-events: none;

  opacity: .20;

  background-image:
    linear-gradient(
      rgba(255,255,255,.018) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.018) 1px,
      transparent 1px
    );

  background-size:
    44px 44px;

  mask-image:
    linear-gradient(
      to bottom,
      black,
      transparent 80%
    );

}

body.drawer-open {

  overflow: hidden;

}

body:not(.loaded) main {

  opacity: .96;

}

img {

  max-width: 100%;

}

a {

  -webkit-tap-highlight-color: transparent;

}

button,
a {

  touch-action: manipulation;

}

::selection {

  background: rgba(0,245,166,.23);

  color: #fff;

}

/* ============================================================
   GLOBAL MOTION
============================================================ */

@keyframes dxPulse {

  0%,
  100% {

    opacity: .55;

    transform: scale(.92);

  }

  50% {

    opacity: 1;

    transform: scale(1);

  }

}

@keyframes dxScan {

  from {

    transform: translateY(-100%);

  }

  to {

    transform: translateY(100%);

  }

}

@keyframes dxGlow {

  0%,
  100% {

    opacity: .35;

  }

  50% {

    opacity: .7;

  }

}

@keyframes dxSkeleton {

  0% {

    background-position:
      200% 0;

  }

  100% {

    background-position:
      -200% 0;

  }

}

.reveal {

  opacity: 0;

  transform:
    translateY(22px);

  transition:
    opacity .7s ease,
    transform .7s cubic-bezier(.2,.7,.2,1);

}

.reveal.revealed {

  opacity: 1;

  transform:
    translateY(0);

}

/* ============================================================
   TRUST LINE
============================================================ */

.trust-line {

  width: fit-content;

  max-width:
    calc(100% - 28px);

  margin:
    14px auto 10px;

  padding:
    8px 13px;

  border:
    1px solid rgba(0,245,166,.12);

  border-radius:
    999px;

  background:
    rgba(0,245,166,.025);

  color:
    rgba(255,255,255,.52);

  font-size:
    10px;

  line-height:
    1.4;

  letter-spacing:
    .45px;

  text-align:
    center;

  backdrop-filter:
    blur(10px);

}

/* ============================================================
   MAIN CONTAINER
============================================================ */

.container {

  width:
    min(100%, var(--dx-max));

  margin:
    0 auto;

  padding:
    0 14px;

  box-sizing:
    border-box;

}

/* ============================================================
   PAGE INTRO
============================================================ */

.page-intro {

  position:
    relative;

  padding:
    36px 4px 28px;

}

.page-intro::after {

  content: "";

  position:
    absolute;

  left:
    4px;

  bottom:
    0;

  width:
    72px;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      var(--dx-green),
      transparent
    );

  box-shadow:
    0 0 18px
    rgba(0,245,166,.5);

}

.page-kicker {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  margin-bottom:
    14px;

  color:
    var(--dx-green);

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    1.7px;

  text-transform:
    uppercase;

}

.page-kicker::before {

  content: "";

  width:
    6px;

  height:
    6px;

  flex-shrink:
    0;

  border-radius:
    50%;

  background:
    currentColor;

  box-shadow:
    0 0 14px
    currentColor;

  animation:
    dxPulse 2.5s ease-in-out infinite;

}

.page-intro h1 {

  max-width:
    920px;

  margin:
    0;

  color:
    #fff;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    clamp(36px, 9vw, 78px);

  font-weight:
    700;

  line-height:
    .94;

  letter-spacing:
    -.055em;

}

.page-intro h1 span {

  display:
    inline;

  color:
    var(--dx-green);

  text-shadow:
    0 0 35px
    rgba(0,245,166,.10);

}

.page-intro-copy {

  max-width:
    740px;

  margin:
    20px 0 0;

  color:
    var(--dx-muted);

  font-size:
    13px;

  line-height:
    1.75;

}

.page-intro-actions {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    9px;

  margin-top:
    23px;

}

.intro-action {

  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    43px;

  padding:
    0 17px;

  border-radius:
    10px;

  text-decoration:
    none;

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    .2px;

  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease;

}

.intro-action.primary {

  background:
    var(--dx-green);

  color:
    #00130c;

  box-shadow:
    0 0 0
    rgba(0,245,166,0);

}

.intro-action.primary:hover {

  transform:
    translateY(-2px);

  box-shadow:
    0 10px 35px
    rgba(0,245,166,.16);

}

.intro-action.secondary {

  border:
    1px solid var(--dx-line);

  background:
    rgba(255,255,255,.025);

  color:
    rgba(255,255,255,.76);

}

.intro-action.secondary:hover {

  transform:
    translateY(-2px);

  border-color:
    rgba(0,245,166,.25);

  color:
    var(--dx-green);

}

/* ============================================================
   EDITORIAL STATUS
============================================================ */

.editorial-status {

  display:
    grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap:
    7px;

  margin:
    22px 0 30px;

}

.status-item {

  position:
    relative;

  overflow:
    hidden;

  min-width:
    0;

  padding:
    13px;

  border:
    1px solid var(--dx-line-soft);

  border-radius:
    12px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.025),
      rgba(255,255,255,.012)
    );

}

.status-item::before {

  content: "";

  position:
    absolute;

  top:
    0;

  left:
    0;

  width:
    26px;

  height:
    1px;

  background:
    var(--dx-green);

  opacity:
    .6;

}

.status-label {

  display:
    block;

  margin-bottom:
    5px;

  color:
    rgba(255,255,255,.32);

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    1.1px;

  text-transform:
    uppercase;

}

.status-value {

  display:
    block;

  overflow:
    hidden;

  color:
    rgba(255,255,255,.78);

  font-size:
    11px;

  font-weight:
    650;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}

.status-value.live {

  color:
    var(--dx-green);

}

/* ============================================================
   SECTION SYSTEM
============================================================ */

.featured-section,
.category-section,
.latest-section,
.topic-section,
.landscape-section {

  margin:
    62px 0;

}

.section-header {

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    16px;

  margin-bottom:
    19px;

  padding:
    0 2px;

}

.section-heading-wrap {

  min-width:
    0;

}

.section-eyebrow {

  display:
    block;

  margin-bottom:
    6px;

  color:
    rgba(255,255,255,.32);

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    1.5px;

  text-transform:
    uppercase;

}

.section-title {

  margin:
    0;

  color:
    #fff;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    21px;

  line-height:
    1.1;

  letter-spacing:
    -.025em;

}

.section-description {

  max-width:
    680px;

  margin:
    8px 0 0;

  color:
    rgba(255,255,255,.46);

  font-size:
    11px;

  line-height:
    1.65;

}

.section-link {

  position:
    relative;

  flex-shrink:
    0;

  color:
    var(--dx-green);

  font-size:
    10px;

  font-weight:
    800;

  text-decoration:
    none;

  white-space:
    nowrap;

}

.section-link::after {

  content: "";

  position:
    absolute;

  left:
    0;

  bottom:
    -4px;

  width:
    0;

  height:
    1px;

  background:
    currentColor;

  transition:
    width .25s ease;

}

.section-link:hover::after {

  width:
    100%;

}

/* ============================================================
   HERO
============================================================ */

.featured-section {

  margin-top:
    22px;

}

.dynamic-hero {

  display:
    block;

  position:
    relative;

  overflow:
    hidden;

  min-height:
    520px;

  border:
    1px solid rgba(0,245,166,.15);

  border-radius:
    var(--dx-radius);

  background:
    #050907;

  color:
    inherit;

  text-decoration:
    none;

  isolation:
    isolate;

  box-shadow:
    var(--dx-shadow);

}

.dynamic-hero::before {

  content: "";

  position:
    absolute;

  inset:
    0;

  z-index:
    2;

  pointer-events:
    none;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.03) 10%,
      rgba(0,0,0,.10) 35%,
      rgba(0,0,0,.48) 61%,
      rgba(0,0,0,.94) 88%,
      #030605 100%
    );

}

.dynamic-hero::after {

  content: "";

  position:
    absolute;

  top:
    0;

  left:
    0;

  right:
    0;

  height:
    1px;

  z-index:
    5;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(0,245,166,.55),
      transparent
    );

  opacity:
    .65;

}

.dynamic-hero-img {

  position:
    absolute;

  inset:
    0;

  z-index:
    0;

  overflow:
    hidden;

  background:
    linear-gradient(
      135deg,
      #07110d,
      #020403
    );

}

.dynamic-hero-img::after {

  content: "";

  position:
    absolute;

  inset:
    0;

  background:
    radial-gradient(
      circle at 65% 25%,
      rgba(0,245,166,.08),
      transparent 35%
    );

}

.dynamic-hero-img img {

  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;

  opacity:
    .82;

  filter:
    saturate(.86)
    contrast(1.06);

  transform:
    scale(1.01);

  transition:
    transform 1s cubic-bezier(.2,.7,.2,1),
    filter .6s ease;

}

.dynamic-hero:hover .dynamic-hero-img img {

  transform:
    scale(1.045);

  filter:
    saturate(1)
    contrast(1.08);

}

.dynamic-hero .tag {

  position:
    absolute;

  top:
    15px;

  left:
    15px;

  z-index:
    4;

  padding:
    6px 10px;

  border:
    1px solid rgba(0,245,166,.28);

  border-radius:
    999px;

  background:
    rgba(0,12,8,.72);

  color:
    var(--dx-green);

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    1px;

  text-transform:
    uppercase;

  backdrop-filter:
    blur(14px);

}

.hero-content {

  position:
    absolute;

  left:
    16px;

  right:
    16px;

  bottom:
    18px;

  z-index:
    4;

}

.hero-label {

  display:
    block;

  margin-bottom:
    9px;

  color:
    rgba(255,255,255,.54);

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    1.25px;

  text-transform:
    uppercase;

}

.dynamic-hero .title {

  max-width:
    900px;

  margin:
    0;

  color:
    #fff;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    clamp(25px, 6vw, 47px);

  font-weight:
    700;

  line-height:
    1.04;

  letter-spacing:
    -.045em;

  text-shadow:
    0 3px 30px rgba(0,0,0,.9);

}

.dynamic-hero .desc {

  max-width:
    720px;

  margin:
    11px 0 0;

  color:
    rgba(255,255,255,.65);

  font-size:
    11px;

  line-height:
    1.6;

}

.dynamic-hero .meta {

  margin-top:
    12px;

  color:
    rgba(255,255,255,.42);

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    .7px;

  text-transform:
    uppercase;

}

.hero-read {

  display:
    inline-flex;

  align-items:
    center;

  margin-top:
    16px;

  color:
    var(--dx-green);

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    .35px;

}

/* ============================================================
   LATEST INTELLIGENCE
============================================================ */

.latest-grid {

  display:
    grid;

  gap:
    9px;

}

.latest-card {

  display:
    grid;

  grid-template-columns:
    96px minmax(0,1fr);

  gap:
    13px;

  min-width:
    0;

  padding:
    9px;

  border:
    1px solid var(--dx-line-soft);

  border-radius:
    13px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.025),
      rgba(255,255,255,.012)
    );

  color:
    inherit;

  text-decoration:
    none;

  transition:
    transform .3s ease,
    border-color .3s ease,
    background .3s ease,
    box-shadow .3s ease;

}

.latest-card:hover {

  transform:
    translateY(-3px);

  border-color:
    rgba(0,245,166,.23);

  background:
    rgba(0,245,166,.025);

  box-shadow:
    0 15px 40px
    rgba(0,0,0,.18);

}

.latest-image {

  width:
    96px;

  height:
    78px;

  overflow:
    hidden;

  border-radius:
    9px;

  background:
    linear-gradient(
      135deg,
      #0b1712,
      #050806
    );

}

.latest-image img {

  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;

  transition:
    transform .5s ease;

}

.latest-card:hover
.latest-image img {

  transform:
    scale(1.05);

}

.latest-content {

  min-width:
    0;

  align-self:
    center;

}

.latest-category {

  margin-bottom:
    5px;

  color:
    var(--dx-green);

  font-size:
    7px;

  font-weight:
    800;

  letter-spacing:
    1px;

  text-transform:
    uppercase;

}

.latest-title {

  display:
    -webkit-box;

  overflow:
    hidden;

  color:
    #fff;

  font-size:
    13px;

  font-weight:
    650;

  line-height:
    1.35;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:
    2;

}

.latest-meta {

  margin-top:
    7px;

  color:
    rgba(255,255,255,.34);

  font-size:
    8px;

}

/* ============================================================
   THREAT LANDSCAPE
============================================================ */

.landscape-panel {

  overflow:
    hidden;

  border:
    1px solid rgba(0,245,166,.12);

  border-radius:
    var(--dx-radius);

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(0,245,166,.075),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      rgba(255,255,255,.027),
      rgba(255,255,255,.008)
    );

}

.landscape-intro {

  padding:
    20px 17px 15px;

}

.landscape-title {

  margin:
    0;

  color:
    #fff;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    23px;

  letter-spacing:
    -.025em;

}

.landscape-copy {

  max-width:
    720px;

  margin:
    7px 0 0;

  color:
    rgba(255,255,255,.46);

  font-size:
    11px;

  line-height:
    1.65;

}

.landscape-grid {

  display:
    grid;

  grid-template-columns:
    repeat(2, 1fr);

  border-top:
    1px solid var(--dx-line-soft);

}

.landscape-item {

  position:
    relative;

  padding:
    15px;

  border-right:
    1px solid var(--dx-line-soft);

  border-bottom:
    1px solid var(--dx-line-soft);

}

.landscape-item:nth-child(2n) {

  border-right:
    0;

}

.landscape-item:nth-last-child(-n+2) {

  border-bottom:
    0;

}

.landscape-name {

  display:
    block;

  color:
    rgba(255,255,255,.40);

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    .8px;

  text-transform:
    uppercase;

}

.landscape-value {

  display:
    block;

  margin-top:
    6px;

  color:
    var(--dx-green);

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    15px;

  font-weight:
    700;

}

/* ============================================================
   DARK WEB
============================================================ */

.darkweb-section .section-title {

  color:
    var(--dx-green);

}

.darkweb-grid {

  display:
    grid;

  gap:
    9px;

}

.darkweb-card {

  display:
    flex;

  gap:
    13px;

  min-width:
    0;

  padding:
    10px;

  border:
    1px solid rgba(0,245,166,.085);

  border-radius:
    13px;

  background:
    linear-gradient(
      135deg,
      rgba(0,245,166,.045),
      rgba(0,0,0,0)
    );

  color:
    inherit;

  text-decoration:
    none;

  transition:
    transform .3s ease,
    border-color .3s ease,
    background .3s ease;

}

.darkweb-card:hover {

  transform:
    translateX(4px);

  border-color:
    rgba(0,245,166,.28);

  background:
    linear-gradient(
      135deg,
      rgba(0,245,166,.075),
      rgba(0,0,0,0)
    );

}

.darkweb-img {

  width:
    84px;

  height:
    84px;

  flex-shrink:
    0;

  overflow:
    hidden;

  border-radius:
    8px;

  background:
    #080c0a;

}

.darkweb-img img {

  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;

  transition:
    transform .5s ease;

}

.darkweb-card:hover
.darkweb-img img {

  transform:
    scale(1.06);

}

.darkweb-content {

  min-width:
    0;

  align-self:
    center;

}

.darkweb-card-title {

  display:
    -webkit-box;

  overflow:
    hidden;

  color:
    #fff;

  font-size:
    13px;

  font-weight:
    650;

  line-height:
    1.4;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:
    3;

}

.darkweb-meta {

  margin-top:
    8px;

  color:
    rgba(0,245,166,.63);

  font-size:
    7px;

  font-weight:
    800;

  letter-spacing:
    .7px;

  text-transform:
    uppercase;

}

/* ============================================================
   BREACHES
============================================================ */

.breach-section .section-title {

  color:
    var(--dx-red);

}

.breach-grid {

  display:
    grid;

  gap:
    11px;

}

.breach-card {

  overflow:
    hidden;

  border:
    1px solid rgba(255,77,87,.12);

  border-radius:
    14px;

  background:
    linear-gradient(
      180deg,
      rgba(255,77,87,.055),
      rgba(0,0,0,0)
    );

  color:
    inherit;

  text-decoration:
    none;

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;

}

.breach-card:hover {

  transform:
    translateY(-4px);

  border-color:
    rgba(255,77,87,.34);

  box-shadow:
    0 18px 45px
    rgba(0,0,0,.22);

}

.breach-img {

  position:
    relative;

  height:
    154px;

  overflow:
    hidden;

  background:
    #090706;

}

.breach-img::after {

  content: "";

  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.82),
      transparent 68%
    );

}

.breach-img img {

  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;

  transition:
    transform .6s ease;

}

.breach-card:hover
.breach-img img {

  transform:
    scale(1.05);

}

.breach-badge {

  position:
    absolute;

  top:
    10px;

  right:
    10px;

  z-index:
    2;

  padding:
    5px 8px;

  border:
    1px solid rgba(255,255,255,.14);

  border-radius:
    6px;

  background:
    rgba(150,0,10,.76);

  color:
    #fff;

  font-size:
    7px;

  font-weight:
    800;

  letter-spacing:
    .8px;

  text-transform:
    uppercase;

  backdrop-filter:
    blur(8px);

}

.breach-content {

  padding:
    14px;

}

.breach-title {

  display:
    -webkit-box;

  overflow:
    hidden;

  margin-bottom:
    7px;

  color:
    #fff;

  font-size:
    14px;

  font-weight:
    700;

  line-height:
    1.32;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:
    3;

}

.breach-desc {

  display:
    -webkit-box;

  overflow:
    hidden;

  margin:
    0 0 9px;

  color:
    rgba(255,255,255,.52);

  font-size:
    10px;

  line-height:
    1.55;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:
    3;

}

.breach-meta {

  color:
    rgba(255,77,87,.75);

  font-size:
    7px;

  font-weight:
    800;

  letter-spacing:
    .7px;

  text-transform:
    uppercase;

}

/* ============================================================
   RANSOMWARE
============================================================ */

.ransomware-section .section-title {

  color:
    var(--dx-amber);

}

.ransomware-list {

  position:
    relative;

  padding-left:
    8px;

}

.ransomware-list::before {

  content: "";

  position:
    absolute;

  left:
    18px;

  top:
    12px;

  bottom:
    12px;

  width:
    1px;

  background:
    linear-gradient(
      to bottom,
      rgba(246,180,76,.48),
      rgba(246,180,76,.04)
    );

}

.ransomware-item {

  display:
    flex;

  gap:
    15px;

  position:
    relative;

  padding:
    15px 0;

  border-bottom:
    1px solid var(--dx-line-soft);

  color:
    inherit;

  text-decoration:
    none;

}

.ransomware-item:last-child {

  border-bottom:
    0;

}

.ransomware-dot {

  width:
    8px;

  height:
    8px;

  flex-shrink:
    0;

  margin:
    5px 0 0 6px;

  border-radius:
    50%;

  background:
    var(--dx-amber);

  box-shadow:
    0 0 0 4px
    rgba(246,180,76,.10);

}

.ransomware-content {

  min-width:
    0;

}

.ransomware-title {

  display:
    -webkit-box;

  overflow:
    hidden;

  color:
    #fff;

  font-size:
    13px;

  font-weight:
    650;

  line-height:
    1.4;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:
    3;

}

.ransomware-meta {

  margin-top:
    6px;

  color:
    rgba(246,180,76,.76);

  font-size:
    7px;

  font-weight:
    800;

  letter-spacing:
    .7px;

  text-transform:
    uppercase;

}

.ransomware-time {

  margin-top:
    4px;

  color:
    rgba(255,255,255,.32);

  font-size:
    8px;

}

/* ============================================================
   THREAT ACTORS
============================================================ */

.threat-section .section-title {

  color:
    var(--dx-purple);

}

.threat-grid {

  display:
    grid;

  gap:
    9px;

}

.threat-card {

  display:
    flex;

  gap:
    13px;

  padding:
    14px;

  border:
    1px solid rgba(179,108,255,.12);

  border-radius:
    13px;

  background:
    linear-gradient(
      135deg,
      rgba(179,108,255,.055),
      rgba(0,0,0,0)
    );

  color:
    inherit;

  text-decoration:
    none;

  transition:
    transform .3s ease,
    border-color .3s ease,
    background .3s ease;

}

.threat-card:hover {

  transform:
    translateY(-2px);

  border-color:
    rgba(179,108,255,.32);

  background:
    rgba(179,108,255,.075);

}

.threat-icon {

  width:
    42px;

  height:
    42px;

  display:
    flex;

  flex-shrink:
    0;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid rgba(179,108,255,.10);

  border-radius:
    10px;

  background:
    rgba(179,108,255,.10);

  color:
    var(--dx-purple);

}

.threat-icon svg {

  width:
    20px;

  height:
    20px;

}

.threat-content {

  min-width:
    0;

}

.threat-title {

  display:
    -webkit-box;

  overflow:
    hidden;

  color:
    #fff;

  font-size:
    13px;

  font-weight:
    650;

  line-height:
    1.38;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:
    2;

}

.threat-type {

  margin-top:
    5px;

  color:
    rgba(179,108,255,.78);

  font-size:
    7px;

  font-weight:
    800;

  letter-spacing:
    .7px;

  text-transform:
    uppercase;

}

.threat-desc {

  display:
    -webkit-box;

  overflow:
    hidden;

  margin-top:
    6px;

  color:
    rgba(255,255,255,.48);

  font-size:
    10px;

  line-height:
    1.5;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:
    2;

}

/* ============================================================
   SIGNAL PANEL
============================================================ */

.live-intel {

  display:
    grid;

  gap:
    12px;

  margin:
    70px 0;

}

.intel-panel {

  position:
    relative;

  overflow:
    hidden;

  border:
    1px solid rgba(0,245,166,.13);

  border-radius:
    var(--dx-radius);

  background:
    radial-gradient(
      circle at 90% 0%,
      rgba(0,245,166,.07),
      transparent 32%
    ),
    #050806;

  box-shadow:
    var(--dx-shadow);

}

.intel-panel::after {

  content: "";

  position:
    absolute;

  left:
    0;

  right:
    0;

  top:
    -100%;

  height:
    30%;

  pointer-events:
    none;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(0,245,166,.025),
      transparent
    );

  animation:
    dxScan 8s linear infinite;

}

.intel-panel-header {

  position:
    relative;

  z-index:
    2;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    15px;

  padding:
    15px;

  border-bottom:
    1px solid var(--dx-line-soft);

}

.intel-panel-title {

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    14px;

  font-weight:
    700;

}

.intel-panel-status {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  color:
    var(--dx-green);

  font-size:
    7px;

  font-weight:
    800;

  letter-spacing:
    1px;

  text-transform:
    uppercase;

}

.intel-panel-status::before {

  content: "";

  width:
    5px;

  height:
    5px;

  border-radius:
    50%;

  background:
    currentColor;

  box-shadow:
    0 0 10px
    currentColor;

  animation:
    dxPulse 2s infinite;

}

.signal-list {

  display:
    grid;

  position:
    relative;

  z-index:
    2;

}

.signal-item {

  display:
    grid;

  grid-template-columns:
    8px minmax(0,1fr);

  gap:
    12px;

  padding:
    13px 15px;

  border-bottom:
    1px solid var(--dx-line-soft);

  transition:
    background .25s ease;

}

.signal-item:hover {

  background:
    rgba(0,245,166,.025);

}

.signal-item:last-child {

  border-bottom:
    0;

}

.signal-dot {

  width:
    7px;

  height:
    7px;

  margin-top:
    5px;

  border-radius:
    50%;

  background:
    var(--dx-green);

  box-shadow:
    0 0 10px
    rgba(0,245,166,.6);

}

.signal-category {

  color:
    var(--dx-green);

  font-size:
    7px;

  font-weight:
    800;

  letter-spacing:
    .8px;

  text-transform:
    uppercase;

}

.signal-title {

  margin-top:
    4px;

  color:
    rgba(255,255,255,.85);

  font-size:
    11px;

  font-weight:
    600;

  line-height:
    1.5;

}

.signal-meta {

  margin-top:
    5px;

  color:
    rgba(255,255,255,.32);

  font-size:
    8px;

}

.signal-meta a:hover {

  color:
    var(--dx-green) !important;

}

/* ============================================================
   INTELLIGENCE BRAND BLOCKS
============================================================ */

.intel-announcement,
.intel-light,
.cyber-section {

  margin:
    74px 0;

}

.intel-card,
.intel-light-card {

  overflow:
    hidden;

  border:
    1px solid rgba(0,245,166,.11);

  border-radius:
    var(--dx-radius);

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(0,245,166,.08),
      transparent 35%
    ),
    #050806;

}

.intel-visual,
.intel-light-img {

  position:
    relative;

  min-height:
    175px;

  background:
    linear-gradient(
      135deg,
      rgba(0,245,166,.11),
      transparent
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.025) 0,
      rgba(255,255,255,.025) 1px,
      transparent 1px,
      transparent 30px
    );

}

.intel-visual::before,
.intel-light-img::before {

  content: "";

  position:
    absolute;

  inset:
    0;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(0,245,166,.10),
      transparent 42%
    );

}

.intel-visual::after,
.intel-light-img::after {

  content: "";

  position:
    absolute;

  left:
    10%;

  right:
    10%;

  top:
    50%;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(0,245,166,.42),
      transparent
    );

  box-shadow:
    0 -35px 0 rgba(0,245,166,.07),
    0 35px 0 rgba(0,245,166,.07);

}

.intel-content,
.intel-light-content {

  padding:
    23px 18px;

}

.intel-title,
.intel-light-title {

  margin:
    0;

  color:
    #fff;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    25px;

  line-height:
    1.08;

  letter-spacing:
    -.03em;

}

.intel-desc,
.intel-light-desc {

  margin:
    12px 0 0;

  color:
    rgba(255,255,255,.54);

  font-size:
    11px;

  line-height:
    1.72;

}

.intel-btn,
.btn-primary,
.btn-secondary,
.cyber-btn,
.dyve-btn {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    42px;

  padding:
    0 15px;

  border-radius:
    9px;

  text-decoration:
    none;

  font-size:
    9px;

  font-weight:
    800;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;

}

.intel-btn,
.btn-primary,
.cyber-btn,
.dyve-btn.primary {

  margin-top:
    17px;

  background:
    var(--dx-green);

  color:
    #00150e;

}

.intel-btn:hover,
.btn-primary:hover,
.cyber-btn:hover,
.dyve-btn.primary:hover {

  transform:
    translateY(-2px);

  box-shadow:
    0 10px 30px
    rgba(0,245,166,.14);

}

.btn-secondary,
.dyve-btn.secondary {

  border:
    1px solid var(--dx-line);

  color:
    rgba(255,255,255,.72);

  background:
    rgba(255,255,255,.025);

}

.btn-secondary:hover,
.dyve-btn.secondary:hover {

  transform:
    translateY(-2px);

  border-color:
    rgba(0,245,166,.22);

}

.intel-eyebrow {

  margin-bottom:
    9px;

  color:
    var(--dx-green);

  font-size:
    7px;

  font-weight:
    800;

  letter-spacing:
    1px;

  text-transform:
    uppercase;

}

.intel-divider {

  width:
    50px;

  height:
    1px;

  margin:
    14px 0;

  background:
    var(--dx-green);

  box-shadow:
    0 0 10px
    rgba(0,245,166,.35);

}

.intel-actions {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;

  margin-top:
    15px;

}

.intel-actions .btn-primary,
.intel-actions .btn-secondary {

  margin-top:
    0;

}

/* ============================================================
   CYBER BRAND BLOCK
============================================================ */

.cyber-section {

  position:
    relative;

}

.cyber-visual {

  position:
    relative;

  overflow:
    hidden;

  min-height:
    270px;

  border-radius:
    var(--dx-radius);

  background:
    #060907;

}

.cyber-visual::after {

  content: "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  background:
    linear-gradient(
      180deg,
      transparent 35%,
      rgba(0,0,0,.85)
    );

}

.cyber-visual img {

  width:
    100%;

  height:
    100%;

  min-height:
    270px;

  display:
    block;

  object-fit:
    cover;

  filter:
    saturate(.82)
    contrast(1.08);

  transition:
    transform 1s cubic-bezier(.2,.7,.2,1);

}

.cyber-section:hover
.cyber-visual img {

  transform:
    scale(1.025);

}

.cyber-card {

  position:
    relative;

  margin:
    -38px 12px 0;

  z-index:
    2;

  padding:
    23px 18px;

  border:
    1px solid rgba(255,255,255,.09);

  border-radius:
    var(--dx-radius);

  background:
    rgba(5,8,6,.95);

  backdrop-filter:
    blur(18px);

  box-shadow:
    0 25px 70px
    rgba(0,0,0,.32);

}

.cyber-title {

  margin:
    0;

  color:
    #fff;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    29px;

  line-height:
    .98;

  letter-spacing:
    -.045em;

}

.cyber-title span {

  color:
    var(--dx-green);

}

.cyber-desc {

  margin:
    12px 0 0;

  color:
    rgba(255,255,255,.52);

  font-size:
    11px;

  line-height:
    1.65;

}

/* ============================================================
   TOPIC EXPLORER
============================================================ */

.topic-panel {

  position:
    relative;

  overflow:
    hidden;

  padding:
    21px 16px;

  border:
    1px solid var(--dx-line);

  border-radius:
    var(--dx-radius);

  background:
    rgba(255,255,255,.018);

}

.topic-panel::before {

  content: "";

  position:
    absolute;

  top:
    0;

  right:
    0;

  width:
    120px;

  height:
    120px;

  background:
    radial-gradient(
      circle,
      rgba(0,245,166,.07),
      transparent 68%
    );

}

.topic-grid {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    7px;

  margin-top:
    16px;

}

.topic-link {

  display:
    inline-flex;

  align-items:
    center;

  min-height:
    34px;

  padding:
    0 11px;

  border:
    1px solid var(--dx-line);

  border-radius:
    999px;

  background:
    rgba(255,255,255,.018);

  color:
    rgba(255,255,255,.65);

  font-size:
    9px;

  font-weight:
    600;

  text-decoration:
    none;

  transition:
    transform .2s ease,
    border-color .2s ease,
    color .2s ease,
    background .2s ease;

}

.topic-link:hover {

  transform:
    translateY(-1px);

  border-color:
    rgba(0,245,166,.28);

  color:
    var(--dx-green);

  background:
    rgba(0,245,166,.04);

}

/* ============================================================
   SEO LINKS
============================================================ */

.seo-links {

  margin:
    70px 0 45px;

  padding:
    24px 15px;

  border-top:
    1px solid var(--dx-line);

  border-bottom:
    1px solid var(--dx-line);

}

.seo-links h2 {

  margin:
    0;

  color:
    #fff;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    19px;

}

.seo-links-copy {

  max-width:
    680px;

  margin:
    8px 0 18px;

  color:
    rgba(255,255,255,.44);

  font-size:
    10px;

  line-height:
    1.65;

}

.seo-grid {

  display:
    grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap:
    7px;

}

.seo-grid a {

  display:
    flex;

  align-items:
    center;

  min-height:
    42px;

  padding:
    0 11px;

  border:
    1px solid var(--dx-line-soft);

  border-radius:
    9px;

  background:
    rgba(255,255,255,.018);

  color:
    rgba(255,255,255,.59);

  font-size:
    9px;

  text-decoration:
    none;

  transition:
    transform .2s ease,
    border-color .2s ease,
    color .2s ease;

}

.seo-grid a:hover {

  transform:
    translateY(-1px);

  border-color:
    rgba(0,245,166,.25);

  color:
    var(--dx-green);

}

/* ============================================================
   ABOUT
============================================================ */

.about-section {

  margin:
    68px 0;

}

.about-panel {

  position:
    relative;

  overflow:
    hidden;

  padding:
    23px 17px;

  border:
    1px solid var(--dx-line);

  border-radius:
    var(--dx-radius);

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(0,245,166,.06),
      transparent 35%
    ),
    rgba(255,255,255,.015);

}

.about-panel::before {

  content: "HACKAX";

  position:
    absolute;

  right:
    -10px;

  top:
    12px;

  color:
    rgba(255,255,255,.018);

  font-family:
    "Audiowide",
    sans-serif;

  font-size:
    55px;

  pointer-events:
    none;

}

.about-panel h2 {

  position:
    relative;

  margin:
    0;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    24px;

  letter-spacing:
    -.03em;

}

.about-panel p {

  position:
    relative;

  max-width:
    780px;

  margin:
    12px 0 0;

  color:
    rgba(255,255,255,.53);

  font-size:
    11px;

  line-height:
    1.75;

}

.about-links {

  position:
    relative;

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px 15px;

  margin-top:
    18px;

}

.about-links a {

  color:
    var(--dx-green);

  font-size:
    9px;

  font-weight:
    700;

  text-decoration:
    none;

}

/* ============================================================
   LOADING / EMPTY / ERROR
============================================================ */

.loading-text {

  position:
    relative;

  overflow:
    hidden;

  padding:
    25px 15px;

  border:
    1px dashed var(--dx-line);

  border-radius:
    12px;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.018),
      rgba(255,255,255,.04),
      rgba(255,255,255,.018)
    );

  background-size:
    200% 100%;

  color:
    rgba(255,255,255,.36);

  font-size:
    10px;

  text-align:
    center;

  animation:
    dxSkeleton 2.2s linear infinite;

}

.empty-state {

  grid-column:
    1 / -1;

  padding:
    26px 15px;

  border:
    1px dashed var(--dx-line);

  border-radius:
    12px;

  color:
    rgba(255,255,255,.36);

  font-size:
    10px;

  text-align:
    center;

}

.error-state {

  padding:
    18px;

  border:
    1px solid rgba(255,77,87,.16);

  border-radius:
    12px;

  background:
    rgba(255,77,87,.035);

  color:
    rgba(255,255,255,.52);

  font-size:
    10px;

  text-align:
    center;

}

/* ============================================================
   FOOTER
============================================================ */

.dyve-footer {

  position:
    relative;

  margin-top:
    85px;

  padding:
    70px 16px 35px;

  border-top:
    1px solid var(--dx-line);

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(0,245,166,.055),
      transparent 38%
    ),
    #020403;

}

.dyve-footer::before {

  content: "";

  position:
    absolute;

  top:
    0;

  left:
    50%;

  width:
    120px;

  height:
    1px;

  transform:
    translateX(-50%);

  background:
    var(--dx-green);

  box-shadow:
    0 0 20px
    rgba(0,245,166,.5);

}

.dyve-core {

  max-width:
    1100px;

  margin:
    0 auto;

  text-align:
    center;

}

.dyve-globe {

  width:
    82px;

  margin:
    0 auto 20px;

  opacity:
    .8;

}

.dyve-globe svg {

  width:
    100%;

  height:
    auto;

}

.dyve-title {

  color:
    #fff;

  font-family:
    "Audiowide",
    sans-serif;

  font-size:
    17px;

  letter-spacing:
    .07em;

}

.dyve-desc {

  max-width:
    500px;

  margin:
    12px auto 0;

  color:
    rgba(255,255,255,.40);

  font-size:
    10px;

  line-height:
    1.75;

}

.dyve-actions {

  display:
    flex;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    8px;

  margin-top:
    19px;

}

.dyve-btn {

  margin-top:
    0 !important;

}

.footer-nav {

  display:
    grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap:
    27px;

  max-width:
    700px;

  margin:
    46px auto 0;

  text-align:
    left;

}

.footer-column h3 {

  margin:
    0 0 10px;

  color:
    rgba(255,255,255,.30);

  font-size:
    7px;

  font-weight:
    800;

  letter-spacing:
    1.2px;

  text-transform:
    uppercase;

}

.footer-column a {

  display:
    block;

  margin:
    8px 0;

  color:
    rgba(255,255,255,.52);

  font-size:
    9px;

  text-decoration:
    none;

  transition:
    color .2s ease;

}

.footer-column a:hover {

  color:
    var(--dx-green);

}

.footer-bottom {

  max-width:
    1100px;

  margin:
    45px auto 0;

  padding-top:
    18px;

  border-top:
    1px solid var(--dx-line-soft);

  color:
    rgba(255,255,255,.24);

  font-size:
    8px;

  text-align:
    center;

}

/* ============================================================
   BACK TO TOP
============================================================ */

#dxBackTop {

  position:
    fixed;

  right:
    16px;

  bottom:
    18px;

  z-index:
    900;

  width:
    42px;

  height:
    42px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid rgba(0,245,166,.18);

  border-radius:
    50%;

  background:
    rgba(3,8,6,.86);

  color:
    var(--dx-green);

  opacity:
    0;

  visibility:
    hidden;

  transform:
    translateY(10px);

  cursor:
    pointer;

  backdrop-filter:
    blur(14px);

  transition:
    opacity .25s ease,
    visibility .25s ease,
    transform .25s ease,
    border-color .25s ease;

}

#dxBackTop.visible {

  opacity:
    1;

  visibility:
    visible;

  transform:
    translateY(0);

}

#dxBackTop:hover {

  border-color:
    rgba(0,245,166,.42);

}

/* ============================================================
   DRAWER
============================================================ */

.drawer-backdrop {

  position:
    fixed;

  inset:
    0;

  z-index:
    998;

  background:
    rgba(0,0,0,.72);

  opacity:
    0;

  visibility:
    hidden;

  transition:
    opacity .25s ease,
    visibility .25s ease;

  backdrop-filter:
    blur(5px);

}

.drawer-backdrop.active {

  opacity:
    1;

  visibility:
    visible;

}

.drawer {

  z-index:
    999;

}

.drawer-close,
.menu-icon {

  cursor:
    pointer;

}

/* ============================================================
   HEADER LOGO SAFETY
   ui.js may construct the global header dynamically.
   Force the brand asset to /logo.png.
============================================================ */

.header img[src*="logo"],
.header .logo img,
.header .brand img,
#global-header img[src*="logo"] {

  object-fit:
    contain;

}

/* ============================================================
   FOCUS
============================================================ */

a:focus-visible,
button:focus-visible {

  outline:
    2px solid var(--dx-green);

  outline-offset:
    3px;

}

/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

  html {

    scroll-behavior:
      auto;

  }

  *,
  *::before,
  *::after {

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;

  }

}

/* ============================================================
   TABLET
============================================================ */

@media (min-width: 640px) {

  .container {

    padding:
      0 22px;

  }

  .page-intro {

    padding-top:
      48px;

  }

  .editorial-status {

    grid-template-columns:
      repeat(4, 1fr);

  }

  .latest-grid {

    grid-template-columns:
      repeat(2, 1fr);

  }

  .darkweb-grid {

    grid-template-columns:
      repeat(2, 1fr);

  }

  .breach-grid {

    grid-template-columns:
      repeat(2, 1fr);

  }

  .threat-grid {

    grid-template-columns:
      repeat(2, 1fr);

  }

  .seo-grid {

    grid-template-columns:
      repeat(3, 1fr);

  }

  .footer-nav {

    grid-template-columns:
      repeat(4, 1fr);

  }

  .intel-card,
  .intel-light-card {

    display:
      grid;

    grid-template-columns:
      .8fr 1.2fr;

  }

  .intel-visual,
  .intel-light-img {

    min-height:
      100%;

  }

}

/* ============================================================
   DESKTOP
============================================================ */

@media (min-width: 1024px) {

  .container {

    padding:
      0 28px;

  }

  .page-intro {

    padding:
      70px 4px 34px;

  }

  .page-intro-copy {

    font-size:
      14px;

  }

  .featured-section {

    margin-top:
      14px;

  }

  .dynamic-hero {

    min-height:
      610px;

  }

  .hero-content {

    left:
      30px;

    right:
      30px;

    bottom:
      30px;

  }

  .dynamic-hero .title {

    max-width:
      930px;

  }

  .latest-grid {

    grid-template-columns:
      repeat(3, 1fr);

  }

  .darkweb-grid {

    grid-template-columns:
      repeat(2, 1fr);

  }

  .breach-grid {

    grid-template-columns:
      repeat(3, 1fr);

  }

  .threat-grid {

    grid-template-columns:
      repeat(3, 1fr);

  }

  .landscape-grid {

    grid-template-columns:
      repeat(6, 1fr);

  }

  .landscape-item {

    border-bottom:
      0;

  }

  .landscape-item:nth-child(2n) {

    border-right:
      1px solid var(--dx-line-soft);

  }

  .landscape-item:last-child {

    border-right:
      0;

  }

  .cyber-visual,
  .cyber-visual img {

    min-height:
      450px;

  }

  .cyber-card {

    max-width:
      650px;

    margin:
      -95px 0 0 55px;

    padding:
      34px;

  }

  .cyber-title {

    font-size:
      50px;

  }

  .seo-grid {

    grid-template-columns:
      repeat(6, 1fr);

  }

}

/* ============================================================
   LARGE DESKTOP
============================================================ */

@media (min-width: 1280px) {

  .page-intro {

    padding-top:
      82px;

  }

  .dynamic-hero {

    min-height:
      650px;

  }

  .section-title {

    font-size:
      23px;

  }

  .section-description {

    font-size:
      12px;

  }

}

/* ============================================================
   MOBILE POLISH
============================================================ */

@media (max-width: 639px) {

  .section-header {

    align-items:
      flex-start;

  }

  .section-link {

    padding-top:
      4px;

  }

  .page-intro h1 {

    max-width:
      530px;

  }

  .dynamic-hero {

    min-height:
      500px;

  }

}

/* ============================================================
   VERY SMALL DEVICES
============================================================ */

@media (max-width: 360px) {

  .container {

    padding:
      0 11px;

  }

  .page-intro {

    padding-left:
      2px;

    padding-right:
      2px;

  }

  .latest-card {

    grid-template-columns:
      82px minmax(0,1fr);

  }

  .latest-image {

    width:
      82px;

    height:
      72px;

  }

  .dynamic-hero {

    min-height:
      470px;

  }

}