.c108 {
  background-image: linear-gradient(-45deg,
      rgb(113, 129, 255) 0%,
      rgb(151, 65, 255) 100%);
}

.gt-clr2 {
  background-image: none;
  background-clip: border-box;
  background-image: linear-gradient(to right, #b760ff, #7b7cff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.label1 {
  background-color: #d7d4ff;
  display: inline-block;
  padding: 0 5px;
}

.label2 {
  background-color: #7d73ff;
  display: inline-block;
  padding: 0px 18px;
  color: #fff;
  border-radius: 15px;
}

/* =========================================================
   DIRECTOR AI - GEN 3 FEATURE CHIPS
   WHITE PREMIUM THEME
   Existing Prefix: dgen36-
========================================================= */

.dgen36-section {
  position: relative;
  overflow: hidden;
  padding: 72px 0;

  background: radial-gradient(circle at 8% 0%,
      rgba(151, 77, 255, 0.1),
      transparent 28%),
    radial-gradient(circle at 95% 100%,
      rgba(68, 121, 255, 0.1),
      transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f8f9ff 100%);

  color: #111936;
}

/* =========================================================
   BACKGROUND
========================================================= */
/* =========================================================
   FEATURE CARDS
   First Reference Layout + Existing Purple/Blue Theme
========================================================= */

.dgen36-shell {
  position: relative;
  z-index: 2;

  max-width: 1220px;
  margin: 0 auto;
  padding: 20px;
  /* 
   backdrop-filter: blur(15px);
   -webkit-backdrop-filter: blur(15px); */
}

/* =========================================================
   CARD
========================================================= */

.dgen36-card {
  position: relative;
  overflow: hidden;

  width: 100%;
  min-height: 92px;
  height: 100%;

  display: flex;
  align-items: center;
  gap: 18px;

  padding: 16px 22px;

  border: 1px solid #e3e6f1;
  border-radius: 15px;

  background: linear-gradient(145deg, #ffffff 0%, #ffffff 72%, #fafaff 100%);

  box-shadow: 0 9px 25px rgba(31, 39, 88, 0.055), inset 0 1px 0 #ffffff;

  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Soft glow inside card */

.dgen36-card::before {
  content: "";

  position: absolute;

  width: 130px;
  height: 130px;

  left: -55px;
  top: -65px;

  border-radius: 50%;

  background: radial-gradient(circle,
      rgba(134, 77, 255, 0.08),
      transparent 68%);

  pointer-events: none;
}

/* Purple → blue bottom accent */

.dgen36-card::after {
  content: "";

  position: absolute;

  left: 18px;
  right: 18px;
  bottom: 0;

  height: 2px;

  background: linear-gradient(90deg, #a14cff, #6a61ff, #4487ff, transparent);

  opacity: 0.58;

  transform: scaleX(0.34);
  transform-origin: left center;

  transition: transform 0.35s ease, opacity 0.35s ease;
}

/* =========================================================
   ICON
   Reference-style icon on left
========================================================= */

.dgen36-card__icon {
  position: relative;
  z-index: 2;

  flex: 0 0 48px;

  width: 48px;
  height: 48px;

  margin: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(118, 89, 238, 0.14);
  border-radius: 12px;

  background: linear-gradient(145deg, #faf5ff 0%, #f1f5ff 100%);

  color: #7757ee;

  box-shadow: 0 7px 18px rgba(88, 73, 189, 0.08);

  transition: transform 0.3s ease, color 0.3s ease, background 0.3s ease,
    box-shadow 0.3s ease;
}

/* Small purple-blue dot */

.dgen36-card__icon::after {
  content: "";

  position: absolute;

  top: -3px;
  right: -3px;

  width: 7px;
  height: 7px;

  border: 2px solid #ffffff;
  border-radius: 50%;

  background: linear-gradient(135deg, #b047ff, #4b83ff);
}

/* SVG */

.dgen36-card__icon svg {
  width: 21px;
  height: 21px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   TITLE
   Text now sits beside icon like reference
========================================================= */

.dgen36-card__title {
  position: relative;
  z-index: 2;

  flex: 1;

  max-width: none;
  margin: 0;

  color: #111936;

  font-size: 16px;
  line-height: 1.38;
  font-weight: 800;
  letter-spacing: -0.25px;

  text-align: left;
}

/* Remove large 01 / 02 / 03 background numbers */

.dgen36-card__title::after {
  display: none !important;
}

/* =========================================================
   INDIVIDUAL ICON COLORS
   Existing second-image theme retained
========================================================= */

.dgen36-shell .row>div:nth-child(1) .dgen36-card__icon {
  color: #984de8;

  background: linear-gradient(145deg, #faf3ff, #f7f2ff);
}

.dgen36-shell .row>div:nth-child(2) .dgen36-card__icon {
  color: #7955ed;

  background: linear-gradient(145deg, #f8f4ff, #f3f2ff);
}

.dgen36-shell .row>div:nth-child(3) .dgen36-card__icon {
  color: #5969ef;

  background: linear-gradient(145deg, #f5f4ff, #f1f4ff);
}

.dgen36-shell .row>div:nth-child(4) .dgen36-card__icon {
  color: #536fee;

  background: linear-gradient(145deg, #f3f5ff, #eef4ff);
}

.dgen36-shell .row>div:nth-child(5) .dgen36-card__icon {
  color: #7258e9;

  background: linear-gradient(145deg, #f7f3ff, #f2f3ff);
}

.dgen36-shell .row>div:nth-child(6) .dgen36-card__icon {
  color: #4380ee;

  background: linear-gradient(145deg, #f3f7ff, #edf5ff);
}

/* =========================================================
   HOVER
========================================================= */

@media (hover: hover) {
  .dgen36-card:hover {
    transform: translateY(-4px);

    border-color: rgba(114, 88, 231, 0.25);

    box-shadow: 0 17px 38px rgba(36, 42, 94, 0.1),
      0 0 0 1px rgba(112, 87, 231, 0.025);
  }

  .dgen36-card:hover::after {
    transform: scaleX(1);
    opacity: 1;
  }

  .dgen36-card:hover .dgen36-card__icon {
    transform: translateY(-2px) rotate(-3deg);

    color: #ffffff;

    border-color: transparent;

    background: linear-gradient(135deg, #a246f2 0%, #7358ef 48%, #4785f3 100%);

    box-shadow: 0 10px 24px rgba(102, 81, 222, 0.22);
  }
}

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

@media (max-width: 991px) {
  .dgen36-shell {
    padding: 16px;
  }

  .dgen36-card {
    min-height: 88px;

    gap: 15px;

    padding: 15px 18px;
  }

  .dgen36-card__icon {
    flex-basis: 44px;

    width: 44px;
    height: 44px;
  }

  .dgen36-card__icon svg {
    width: 19px;
    height: 19px;
  }

  .dgen36-card__title {
    font-size: 15px;
  }
}

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

@media (max-width: 767px) {
  .dgen36-shell {
    padding: 10px;
  }

  .dgen36-card {
    min-height: 82px;

    gap: 14px;

    padding: 14px 16px;

    border-radius: 14px;
  }

  .dgen36-card__icon {
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    border-radius: 11px;
  }

  .dgen36-card__icon svg {
    width: 18px;
    height: 18px;
  }

  .dgen36-card__title {
    font-size: 14.5px;
    line-height: 1.4;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {
  .dgen36-card {
    min-height: 78px;

    gap: 12px;

    padding: 13px 14px;
  }

  .dgen36-card__icon {
    flex-basis: 40px;

    width: 40px;
    height: 40px;
  }

  .dgen36-card__title {
    font-size: 14px;
  }
}

.type-live-section {
  background: url(../images/type-live-section.png) no-repeat center top / cover;
  padding: 80px 0 100px 0;
  background-size: cover;
  border-radius: 150px;
}

/* =========================================================
   DIRECTOR AI - EVERYTHING YOU UNLOCK
   Unique Prefix: daiunlock31-
========================================================= */

.daiunlock31-section {
  --dai31-dark: #101828;
  --dai31-text: #344054;
  --dai31-muted: #667085;
  --dai31-border: #e5eaf1;

  position: relative;
  overflow: hidden;
  padding: 100px 0;
  background: radial-gradient(circle at 10% 5%,
      rgba(14, 165, 233, 0.06),
      transparent 25%),
    radial-gradient(circle at 92% 20%,
      rgba(124, 58, 237, 0.05),
      transparent 26%),
    #ffffff;
  color: var(--dai31-dark);

  background: url(../images/daiunlock31-section.png) no-repeat center top / cover;
  padding: 80px 0 100px 0;
  background-size: cover;
}

/* =========================================================
   BACKGROUND
========================================================= */

.daiunlock31-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.daiunlock31-bg__grid {
  position: absolute;
  inset: 0;

  background-image: linear-gradient(rgba(16, 24, 40, 0.025) 1px,
      transparent 1px),
    linear-gradient(90deg, rgba(16, 24, 40, 0.025) 1px, transparent 1px);

  background-size: 42px 42px;

  -webkit-mask-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.8),
      transparent 75%);

  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent 75%);
}

.daiunlock31-bg__orb {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(1px);
}

.daiunlock31-bg__orb--one {
  width: 330px;
  height: 330px;
  top: -180px;
  left: -160px;
  border: 1px solid rgba(14, 165, 233, 0.13);
}

.daiunlock31-bg__orb--two {
  width: 480px;
  height: 480px;
  right: -300px;
  top: 310px;
  border: 1px solid rgba(124, 58, 237, 0.1);
}

/* =========================================================
   MAIN SHELL
========================================================= */

.daiunlock31-shell {
  position: relative;
  padding: 55px;

  background: rgba(255, 255, 255, 0.88);

  border: 1px solid #e9edf3;
  border-radius: 32px;

  box-shadow: 0 35px 90px rgba(16, 24, 40, 0.08),
    0 3px 10px rgba(16, 24, 40, 0.025);
}

/* =========================================================
   PRICE BADGE
========================================================= */

.daiunlock31-price {
  position: absolute;
  z-index: 10;

  top: -28px;
  right: 44px;

  min-width: 176px;
  padding: 13px 23px 15px;

  text-align: center;

  color: #ffffff;

  background: linear-gradient(145deg, #111827, #202b3d);

  border: 4px solid #ffffff;
  border-radius: 18px;

  box-shadow: 0 15px 35px rgba(16, 24, 40, 0.2);
}

.daiunlock31-price::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 11px;
  pointer-events: none;
}

.daiunlock31-price__label {
  position: relative;
  z-index: 2;

  display: block;
  margin-bottom: 1px;

  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 1.7px;
  color: #aeb9c9;
}

.daiunlock31-price strong {
  position: relative;
  z-index: 2;

  display: inline-block;

  font-size: 36px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1.8px;
}

.daiunlock31-price__once {
  position: relative;
  z-index: 2;

  display: inline-block;
  margin-left: 4px;

  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;

  color: #cbd5e1;
}

/* =========================================================
   HEADING
========================================================= */

.daiunlock31-heading {
  margin-bottom: 48px;
}

.daiunlock31-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  margin-bottom: 15px;

  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 2px;

  color: #475467;
}

.daiunlock31-eyebrow__dot {
  position: relative;

  width: 9px;
  height: 9px;

  border: 2px solid #0ea5e9;
  border-radius: 50%;
}

.daiunlock31-eyebrow__dot::after {
  content: "";
  position: absolute;
  inset: 2px;

  background: #0ea5e9;
  border-radius: 50%;
}

.daiunlock31-title {
  max-width: 750px;
  margin: 0;
  font-size: clamp(30px, 4.7vw, 50px);
  font-weight: 800;
  line-height: 0.99;
  letter-spacing: -3px;
  color: #101828;
}

.daiunlock31-title span {
  display: block;

  background: linear-gradient(90deg, #087fc3 0%, #6553c7 50%, #c03c82 100%);

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* =========================================================
   FEATURE GRID
========================================================= */

.daiunlock31-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}

/* Top three cards */

.daiunlock31-grid .daiunlock31-card:nth-child(1),
.daiunlock31-grid .daiunlock31-card:nth-child(2),
.daiunlock31-grid .daiunlock31-card:nth-child(3) {
  grid-column: span 2;
}

/* Bottom two cards */

.daiunlock31-grid .daiunlock31-card:nth-child(4),
.daiunlock31-grid .daiunlock31-card:nth-child(5) {
  grid-column: span 3;
}

/* =========================================================
   FEATURE CARD
========================================================= */

.daiunlock31-card {
  --dai31-accent: #0ea5e9;
  --dai31-accent-rgb: 14, 165, 233;

  position: relative;
  overflow: hidden;

  min-height: 100%;

  padding: 28px 27px 30px;

  background: linear-gradient(145deg,
      rgba(var(--dai31-accent-rgb), 0.045),
      #ffffff 38%);

  border: 1px solid #e6eaf0;
  border-radius: 20px;

  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.045);

  transition: transform 0.35s ease, box-shadow 0.35s ease,
    border-color 0.35s ease;
}

/* Accent top line */

.daiunlock31-card::before {
  content: "";

  position: absolute;
  top: 0;
  left: 28px;

  width: 68px;
  height: 3px;

  background: var(--dai31-accent);

  border-radius: 0 0 10px 10px;
}

/* Decorative glow */

.daiunlock31-card::after {
  content: "";

  position: absolute;
  z-index: 0;

  width: 120px;
  height: 120px;

  top: -60px;
  right: -55px;

  background: radial-gradient(circle,
      rgba(var(--dai31-accent-rgb), 0.12),
      transparent 70%);

  border-radius: 50%;
}

.daiunlock31-card:hover {
  transform: translateY(-7px);

  border-color: rgba(var(--dai31-accent-rgb), 0.25);

  box-shadow: 0 24px 50px rgba(16, 24, 40, 0.09);
}

/* =========================================================
   CARD ACCENTS
========================================================= */

.daiunlock31-card--blue {
  --dai31-accent: #0284c7;
  --dai31-accent-rgb: 2, 132, 199;
}

.daiunlock31-card--violet {
  --dai31-accent: #7c3aed;
  --dai31-accent-rgb: 124, 58, 237;
}

.daiunlock31-card--cyan {
  --dai31-accent: #0891b2;
  --dai31-accent-rgb: 8, 145, 178;
}

.daiunlock31-card--orange {
  --dai31-accent: #ea580c;
  --dai31-accent-rgb: 234, 88, 12;
}

.daiunlock31-card--pink {
  --dai31-accent: #db2777;
  --dai31-accent-rgb: 219, 39, 119;
}

/* =========================================================
   CARD TOP
========================================================= */

.daiunlock31-card__top {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 22px;
}

.daiunlock31-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 51px;
  height: 51px;

  font-size: 23px;

  background: rgba(var(--dai31-accent-rgb), 0.09);

  border: 1px solid rgba(var(--dai31-accent-rgb), 0.15);

  border-radius: 14px;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.daiunlock31-card__icon span {
  display: block;
  line-height: 1;
}

.daiunlock31-card__number {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;

  color: var(--dai31-accent);

  opacity: 0.7;
}

/* =========================================================
   CARD TYPOGRAPHY
========================================================= */

.daiunlock31-card__title {
  position: relative;
  z-index: 2;

  margin: 0 0 12px;

  font-size: 24px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.7px;

  color: #101828;
}

.daiunlock31-card__intro {
  position: relative;
  z-index: 2;

  min-height: 64px;
  margin: 0;

  font-size: 16px;
  font-weight: 500;
  line-height: 1.55;

  color: #667085;
}

.daiunlock31-card__line {
  position: relative;
  z-index: 2;

  width: 100%;
  height: 1px;

  margin: 19px 0 20px;

  background: linear-gradient(90deg,
      rgba(var(--dai31-accent-rgb), 0.28),
      #edf0f4 55%,
      transparent);
}

/* =========================================================
   CHECK LIST
========================================================= */

.daiunlock31-list {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  gap: 14px;

  padding: 0;
  margin: 0;

  list-style: none;
}

.daiunlock31-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: #344054;
  color: #344054;
}

.daiunlock31-list__check {
  flex: 0 0 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 20px;
  height: 20px;

  margin-top: 1px;

  font-size: 11px;
  font-weight: 900;

  color: var(--dai31-accent);

  background: rgba(var(--dai31-accent-rgb), 0.1);

  border-radius: 50%;
}

/* =========================================================
   COMMERCIAL RIGHTS BONUS
========================================================= */

.daiunlock31-bonus {
  position: relative;
  overflow: hidden;

  margin-top: 22px;
  padding: 34px 36px;

  background: linear-gradient(120deg, #f6fff8 0%, #fbfff4 45%, #fffaf0 100%);

  border: 1px solid #cce8cf;
  border-radius: 22px;

  box-shadow: 0 15px 35px rgba(35, 94, 55, 0.055);
}

/* Gold highlight line */

.daiunlock31-bonus::before {
  content: "";

  position: absolute;

  top: 0;
  left: 35px;
  right: 35px;

  height: 3px;

  background: linear-gradient(90deg, #16a34a, #65a30d, #d4a72c);

  border-radius: 0 0 10px 10px;
}

.daiunlock31-bonus__glow {
  position: absolute;

  width: 260px;
  height: 260px;

  right: -100px;
  top: -130px;

  background: radial-gradient(circle, rgba(234, 179, 8, 0.12), transparent 68%);

  border-radius: 50%;
}

/* Bonus heading */

.daiunlock31-bonus__heading {
  display: flex;
  align-items: flex-start;
  gap: 17px;
}

.daiunlock31-bonus__icon {
  flex: 0 0 58px;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 58px;
  height: 58px;

  font-size: 27px;

  background: #ffffff;

  border: 1px solid #d8e9d6;
  border-radius: 15px;

  box-shadow: 0 8px 20px rgba(33, 88, 44, 0.08);
}

.daiunlock31-bonus__label {
  margin: 2px 0 6px;

  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 1.5px;

  color: #4d7c0f;
}

.daiunlock31-bonus h3 {
  margin: 0 0 7px;

  font-size: 27px;
  font-weight: 850;
  line-height: 1.05;
  letter-spacing: -0.8px;

  color: #16341e;
}

.daiunlock31-bonus h3 span {
  color: #4d7c0f;
}

.daiunlock31-bonus p {
  margin: 0;

  font-size: 14px;
  line-height: 1.5;

  color: #607064;
}

/* Bonus features */

.daiunlock31-bonus__features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;

  padding-left: 25px;
}

.daiunlock31-bonus__item {
  display: flex;
  align-items: center;
  gap: 10px;

  min-height: 48px;
  padding: 10px 13px;

  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;

  color: #2c4832;

  background: rgba(255, 255, 255, 0.7);

  border: 1px solid rgba(76, 124, 84, 0.13);
  border-radius: 11px;
}

.daiunlock31-bonus__item span {
  flex: 0 0 23px;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 23px;
  height: 23px;

  font-size: 12px;
  font-weight: 900;

  color: #ffffff;
  background: #3d8b4f;

  border-radius: 50%;
}

/* =========================================================
   RESPONSIVE - LARGE TABLET
========================================================= */

@media (max-width: 1199.98px) {
  .daiunlock31-shell {
    padding: 48px 38px;
  }

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

  .daiunlock31-grid .daiunlock31-card:nth-child(1),
  .daiunlock31-grid .daiunlock31-card:nth-child(2),
  .daiunlock31-grid .daiunlock31-card:nth-child(3),
  .daiunlock31-grid .daiunlock31-card:nth-child(4) {
    grid-column: span 1;
  }

  .daiunlock31-grid .daiunlock31-card:nth-child(5) {
    grid-column: span 2;
  }

  .daiunlock31-card__intro {
    min-height: 0;
  }
}

/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 991.98px) {
  .daiunlock31-section {
    padding: 80px 0;
  }

  .daiunlock31-shell {
    padding: 48px 28px 28px;
  }

  .daiunlock31-price {
    right: 25px;
  }

  .daiunlock31-heading {
    padding-right: 170px;
  }

  .daiunlock31-title {
    letter-spacing: -2px;
  }

  .daiunlock31-bonus__features {
    padding-left: 0;
    margin-top: 28px;
  }
}

/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 767.98px) {
  .daiunlock31-section {
    padding: 65px 0;
  }

  .daiunlock31-shell {
    padding: 30px 16px 16px;
    border-radius: 22px;
  }

  .daiunlock31-price {
    position: relative;

    top: auto;
    right: auto;

    width: max-content;
    min-width: 165px;

    margin: -58px 0 35px auto;

    padding: 12px 18px 14px;
  }

  .daiunlock31-price strong {
    font-size: 32px;
  }

  .daiunlock31-heading {
    padding-right: 0;
    margin-bottom: 30px;
  }

  .daiunlock31-eyebrow {
    font-size: 9px;
    letter-spacing: 1.4px;
  }

  .daiunlock31-title {
    font-size: 39px;
    line-height: 1.02;
    letter-spacing: -1.8px;
  }

  .daiunlock31-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .daiunlock31-grid .daiunlock31-card:nth-child(1),
  .daiunlock31-grid .daiunlock31-card:nth-child(2),
  .daiunlock31-grid .daiunlock31-card:nth-child(3),
  .daiunlock31-grid .daiunlock31-card:nth-child(4),
  .daiunlock31-grid .daiunlock31-card:nth-child(5) {
    grid-column: span 1;
  }

  .daiunlock31-card {
    padding: 24px 21px 25px;
    border-radius: 17px;
  }

  .daiunlock31-card__title {
    font-size: 22px;
  }

  .daiunlock31-card__title br {
    display: none;
  }

  .daiunlock31-list li {
    font-size: 13.5px;
  }

  .daiunlock31-bonus {
    margin-top: 15px;
    padding: 27px 20px 20px;
    border-radius: 18px;
  }

  .daiunlock31-bonus__heading {
    gap: 13px;
  }

  .daiunlock31-bonus__icon {
    flex-basis: 50px;
    width: 50px;
    height: 50px;
    font-size: 23px;
  }

  .daiunlock31-bonus h3 {
    font-size: 23px;
  }

  .daiunlock31-bonus__features {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 23px;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {
  .daiunlock31-title {
    font-size: 34px;
  }

  .daiunlock31-price {
    margin-right: auto;
    margin-left: 0;
  }

  .daiunlock31-card__icon {
    width: 46px;
    height: 46px;
    font-size: 21px;
  }
}

/* =========================================================
   ALL THIS & MUCH MORE WITHOUT
   Reference-style 3x2 Card Grid
========================================================= */

.dxwithout31-section {
  position: relative;
  overflow: hidden;
  padding: 90px 0 100px;

  background: url(../images/dxwithout31-section.png) no-repeat center top/ cover;
  overflow: hidden;
  border-radius: 150px;
}

/* =========================================================
   HEADING
========================================================= */

.dxwithout31-heading {
  /* margin-bottom: 48px; */
}

.dxwithout31-title {
  margin: 0;
  color: #fff;
  font-size: clamp(30px, 5vw, 50px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -2px;
}

.dxwithout31-title span {
  position: relative;
  display: inline-block;

  color: #e31f2b;
}

/* Small underline like premium sales-page heading */

.dxwithout31-title span::after {
  content: "";

  position: absolute;
  left: 4%;
  bottom: -8px;

  width: 92%;
  height: 5px;

  background: #e31f2b;

  border-radius: 50%;

  transform: rotate(-1.5deg);
}

/* =========================================================
   GRID
========================================================= */

.dxwithout31-grid {
  position: relative;
}

/* =========================================================
   CARD
========================================================= */

.dxwithout31-card {
  position: relative;

  height: 100%;

  padding: 15px 15px 0;

  background: #ffffff;

  border: 1px solid rgba(210, 19, 31, 0.51);
  border-radius: 17px;

  box-shadow: 0 3px 0 rgba(5, 30, 50, 0.04), 0 14px 32px rgba(19, 72, 104, 0.1);

  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dxwithout31-card:hover {
  /* transform: translateY(-6px); */

  box-shadow: 0 3px 0 rgba(5, 30, 50, 0.03), 0 20px 45px rgba(19, 72, 104, 0.16);
}

/* =========================================================
   PHOTO
========================================================= */

.dxwithout31-card__image {
  position: relative;

  width: 100%;
  height: 190px;

  overflow: hidden;

  background: #d7e7ef;

  border-radius: 11px;
}

.dxwithout31-card__image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transition: transform 0.5s ease, filter 0.5s ease;
}

.dxwithout31-card:hover .dxwithout31-card__image img {
  /* transform: scale(1.04); */
}

/* =========================================================
   RED X
========================================================= */

.dxwithout31-x {
  position: absolute;
  z-index: 5;

  top: 177px;
  left: 50%;

  width: 58px;
  height: 58px;

  display: flex;
  align-items: center;
  justify-content: center;

  transform: translateX(-50%);

  border: 3px solid #ffffff;
  border-radius: 50%;

  background: radial-gradient(circle at 35% 25%,
      #ff5962 0%,
      #e61926 40%,
      #ac0008 100%);

  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.35),
    inset 0 -5px 9px rgba(103, 0, 0, 0.28), 0 4px 8px rgba(108, 0, 8, 0.28);
}

/* X white lines */

.dxwithout31-x__line {
  position: absolute;

  width: 28px;
  height: 4px;

  background: #ffffff;

  border-radius: 10px;

  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

.dxwithout31-x__line--one {
  transform: rotate(45deg);
}

.dxwithout31-x__line--two {
  transform: rotate(-45deg);
}

/* =========================================================
   TEXT AREA
========================================================= */

.dxwithout31-card__body {
  min-height: 125px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 35px 14px 22px;
}

.dxwithout31-card__title {
  max-width: 320px;

  margin: 0 auto;

  color: #07121b;

  font-size: 18px;
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: -0.2px;

  text-align: center;
}

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

@media (min-width: 1200px) {
  .dxwithout31-grid {
    row-gap: 32px !important;
  }

  .dxwithout31-card__image {
    height: 205px;
  }

  .dxwithout31-x {
    top: 192px;
  }
}

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

@media (max-width: 991.98px) {
  .dxwithout31-section {
    padding: 75px 0 85px;
  }

  .dxwithout31-heading {
    margin-bottom: 42px;
  }

  .dxwithout31-card__image {
    height: 210px;
  }

  .dxwithout31-x {
    top: 197px;
  }
}

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

@media (max-width: 767.98px) {
  .dxwithout31-section {
    padding: 60px 0 70px;
  }

  .dxwithout31-heading {
    margin-bottom: 38px;
  }

  .dxwithout31-title {
    font-size: 38px;
    line-height: 1.1;
    letter-spacing: -1.4px;
  }

  .dxwithout31-card {
    max-width: 430px;

    margin-left: auto;
    margin-right: auto;

    padding: 12px 12px 0;

    border-radius: 15px;
  }

  .dxwithout31-card__image {
    height: 220px;
  }

  .dxwithout31-x {
    top: 207px;

    width: 56px;
    height: 56px;
  }

  .dxwithout31-card__body {
    min-height: 115px;

    padding: 34px 12px 20px;
  }

  .dxwithout31-card__title {
    font-size: 18px;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {
  .dxwithout31-section {
    padding: 52px 0 60px;
  }

  .dxwithout31-title {
    font-size: 33px;
  }

  .dxwithout31-card__image {
    height: 190px;
  }

  .dxwithout31-x {
    top: 177px;

    width: 53px;
    height: 53px;
  }

  .dxwithout31-x__line {
    width: 25px;
  }

  .dxwithout31-card__title {
    font-size: 17px;
    line-height: 1.4;
  }
}

/* =========================================================
   DIRECTOR AI — YESTERDAY'S FEED SECTION
   Unique Prefix: dxyfeed31-
========================================================= */

.dxyfeed31-section {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 52%, #ffffff 100%);
  isolation: isolate;
}

/* =========================================================
   BACKGROUND
========================================================= */

.dxyfeed31-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.dxyfeed31-bg__grid {
  position: absolute;
  inset: 0;

  background-image: linear-gradient(rgba(17, 51, 74, 0.045) 1px,
      transparent 1px),
    linear-gradient(90deg, rgba(17, 51, 74, 0.045) 1px, transparent 1px);

  background-size: 44px 44px;

  mask-image: linear-gradient(to bottom,
      transparent 0%,
      #000 16%,
      #000 84%,
      transparent 100%);
}

.dxyfeed31-bg__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(25px);
}

.dxyfeed31-bg__orb--one {
  width: 440px;
  height: 440px;
  top: -220px;
  right: -100px;
  background: rgba(34, 132, 255, 0.1);
}

.dxyfeed31-bg__orb--two {
  width: 360px;
  height: 360px;
  left: -180px;
  bottom: -160px;
  background: rgba(0, 186, 167, 0.08);
}

/* =========================================================
   EYEBROW
========================================================= */

.dxyfeed31-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 22px;

  color: #136fa8;

  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}

.dxyfeed31-eyebrow__line {
  width: 46px;
  height: 2px;

  background: linear-gradient(90deg, #0a76b8, #43b7ff);
}

/* =========================================================
   TITLE
========================================================= */

.dxyfeed31-title {
  max-width: 820px;

  margin: 0;

  color: #071725;

  font-size: clamp(46px, 6vw, 76px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -3.5px;
}

.dxyfeed31-title span {
  display: block;

  margin-top: 8px;

  color: #0f6fa8;
}

/* =========================================================
   DIVIDER
========================================================= */

.dxyfeed31-divider {
  width: 120px;
  height: 5px;

  margin: 32px 0 28px;

  background: linear-gradient(90deg, #0e78b8, #67c9ff);

  border-radius: 20px;
}

/* =========================================================
   LEAD TEXT
========================================================= */

.dxyfeed31-lead {
  max-width: 790px;

  margin: 0;

  color: #405566;

  font-size: 19px;
  font-weight: 500;
  line-height: 1.78;
}

/* =========================================================
   VISUAL CARD
========================================================= */

.dxyfeed31-visual-card {
  position: relative;
  overflow: hidden;

  min-height: 390px;

  padding: 28px;

  background: linear-gradient(145deg,
      rgba(255, 255, 255, 0.98),
      rgba(239, 248, 255, 0.96));

  border: 1px solid rgba(15, 88, 129, 0.16);

  box-shadow: 0 25px 70px rgba(22, 84, 120, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.dxyfeed31-visual-card::before {
  content: "";

  position: absolute;
  top: 0;
  right: 0;

  width: 120px;
  height: 120px;

  background: linear-gradient(135deg,
      transparent 49%,
      rgba(11, 113, 170, 0.08) 50%);
}

.dxyfeed31-visual-card__top {
  display: flex;
  align-items: center;
  gap: 10px;

  margin-bottom: 46px;

  color: #244455;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px;
}

.dxyfeed31-visual-card__dot {
  width: 9px;
  height: 9px;

  border-radius: 50%;

  background: #19b884;

  box-shadow: 0 0 0 5px rgba(25, 184, 132, 0.12);
}

/* =========================================================
   SIGNAL BARS
========================================================= */

.dxyfeed31-signal {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.dxyfeed31-signal__row {
  display: grid;
  grid-template-columns: 82px 1fr;
  align-items: center;
  gap: 16px;
}

.dxyfeed31-signal__row>span {
  color: #61717c;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
}

.dxyfeed31-signal__bar {
  position: relative;
  overflow: hidden;

  height: 8px;

  background: #dbe9f1;
}

.dxyfeed31-signal__bar i {
  display: block;
  height: 100%;

  background: linear-gradient(90deg, #0c7ab7, #55c7ff);

  transform-origin: left;
}

/* =========================================================
   STAMP
========================================================= */

.dxyfeed31-visual-card__stamp {
  position: absolute;

  right: 26px;
  bottom: 28px;

  display: flex;
  align-items: center;
  gap: 11px;

  padding: 10px 14px;

  border: 1px solid rgba(12, 107, 163, 0.23);

  background: rgba(255, 255, 255, 0.72);

  backdrop-filter: blur(12px);
}

.dxyfeed31-visual-card__stamp span {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  background: #0d73ac;

  color: #ffffff;

  font-size: 14px;
  font-weight: 900;
}

.dxyfeed31-visual-card__stamp strong {
  color: #17384d;

  font-size: 12px;
  letter-spacing: 1.3px;
}

/* =========================================================
   STATEMENT BAND
========================================================= */

.dxyfeed31-statement {
  position: relative;

  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;

  margin: 75px 0 55px;
  padding: 26px 30px;

  background: #071a28;

  box-shadow: 0 18px 50px rgba(7, 26, 40, 0.16);
}

.dxyfeed31-statement::before {
  content: "";

  position: absolute;
  inset: 5px;

  border: 1px solid rgba(255, 255, 255, 0.1);

  pointer-events: none;
}

.dxyfeed31-statement__mark {
  color: #58c7ff;

  font-size: 20px;
}

.dxyfeed31-statement__text {
  color: #ffffff;

  font-size: clamp(17px, 2vw, 25px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 1.4px;
  text-align: center;
}

/* =========================================================
   BOTTOM BLOCK
========================================================= */

.dxyfeed31-bottom {
  position: relative;

  display: grid;
  grid-template-columns: 95px 1fr;
  gap: 30px;

  padding: 10px 0 5px 34px;

  border-left: 2px solid #0f7bb7;
}

.dxyfeed31-bottom__number {
  color: rgba(13, 114, 171, 0.18);

  font-size: 72px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -4px;
}

.dxyfeed31-bottom__text {
  margin: 0;

  color: #223f52;

  font-size: 20px;
  font-weight: 600;
  line-height: 1.75;
}

/* =========================================================
   HOVER DETAILS
========================================================= */

.dxyfeed31-visual-card {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.dxyfeed31-visual-card:hover {
  transform: translateY(-7px);

  box-shadow: 0 34px 90px rgba(22, 84, 120, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

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

@media (max-width: 991.98px) {
  .dxyfeed31-section {
    padding: 85px 0;
  }

  .dxyfeed31-title {
    font-size: 56px;
    letter-spacing: -2.7px;
  }

  .dxyfeed31-visual-card {
    min-height: 340px;
  }

  .dxyfeed31-statement {
    margin-top: 55px;
  }

  .dxyfeed31-bottom {
    grid-template-columns: 75px 1fr;
  }

  .dxyfeed31-bottom__number {
    font-size: 58px;
  }
}

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

@media (max-width: 767.98px) {
  .dxyfeed31-section {
    padding: 65px 0 70px;
  }

  .dxyfeed31-title {
    font-size: 42px;
    line-height: 1.03;
    letter-spacing: -2px;
  }

  .dxyfeed31-lead {
    font-size: 17px;
    line-height: 1.7;
  }

  .dxyfeed31-divider {
    margin: 25px 0 22px;
  }

  .dxyfeed31-visual-card {
    min-height: 320px;
    padding: 22px;
  }

  .dxyfeed31-statement {
    grid-template-columns: 1fr;

    gap: 10px;

    margin: 45px 0 40px;
    padding: 24px 20px;

    text-align: center;
  }

  .dxyfeed31-statement__mark {
    display: none;
  }

  .dxyfeed31-statement__text {
    font-size: 18px;
    line-height: 1.5;
  }

  .dxyfeed31-bottom {
    display: block;

    padding: 5px 0 5px 22px;
  }

  .dxyfeed31-bottom__number {
    display: block;

    margin-bottom: 12px;

    font-size: 48px;
  }

  .dxyfeed31-bottom__text {
    font-size: 17px;
    line-height: 1.7;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {
  .dxyfeed31-title {
    font-size: 36px;
  }

  .dxyfeed31-eyebrow {
    font-size: 10px;
    letter-spacing: 1.5px;
  }

  .dxyfeed31-eyebrow__line {
    width: 28px;
  }

  .dxyfeed31-signal__row {
    grid-template-columns: 68px 1fr;
    gap: 12px;
  }
}

/* =========================================================
   DIRECTOR AI - YESTERDAY'S FEED
   WHITE ULTRA PREMIUM EDITORIAL SECTION
   Unique Prefix: dfeed64-
========================================================= */

.dfeed64-section {
  position: relative;
  overflow: hidden;
  padding: 95px 0 90px;

  /* background:
      radial-gradient(circle at 50% 18%, rgba(157, 82, 255, 0.10), transparent 30%),
      radial-gradient(circle at 92% 78%, rgba(68, 126, 255, 0.08), transparent 28%),
      linear-gradient(180deg, #ffffff 0%, #faf8ff 48%, #ffffff 100%); */
  background: #fff url(../images/dfeed64-section.png) no-repeat center top / cover;
  color: #15172d;
}

/* =========================================================
   BACKGROUND
========================================================= */

.dfeed64-bg {
  position: absolute;
  inset: 0;

  overflow: hidden;

  pointer-events: none;
}

.dfeed64-bg__grid {
  position: absolute;
  inset: 0;

  opacity: 0.38;

  background-image: linear-gradient(rgba(60, 65, 116, 0.04) 1px,
      transparent 1px),
    linear-gradient(90deg, rgba(60, 65, 116, 0.04) 1px, transparent 1px);

  background-size: 38px 38px;

  -webkit-mask-image: radial-gradient(ellipse at 50% 35%,
      #000 0%,
      rgba(0, 0, 0, 0.65) 48%,
      transparent 84%);

  mask-image: radial-gradient(ellipse at 50% 35%,
      #000 0%,
      rgba(0, 0, 0, 0.65) 48%,
      transparent 84%);
}

.dfeed64-bg__orb {
  position: absolute;

  border-radius: 50%;

  filter: blur(110px);

  opacity: 0.15;
}

.dfeed64-bg__orb--one {
  width: 430px;
  height: 430px;

  top: -180px;
  left: -180px;

  background: #a347ff;
}

.dfeed64-bg__orb--two {
  width: 440px;
  height: 440px;

  right: -210px;
  bottom: 7%;

  background: #4080ff;
}

/* =========================================================
   HEADER
========================================================= */

.dfeed64-head {
  position: relative;
  z-index: 2;

  max-width: 1200px;

  margin: 0 auto;
}

.dfeed64-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  padding: 8px 14px;
  border: 1px solid rgba(119, 84, 207, 0.16);
  border-radius: 50px;
  background: rgba(249, 246, 255, 0.9);
  color: #7254ce;
  font-size: 16px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 1.6px;

}

.dfeed64-kicker span {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: linear-gradient(135deg, #a64bf1, #4a82ef);

  box-shadow: 0 0 0 4px rgba(127, 83, 221, 0.07);
}

.dfeed64-title {
  max-width: 1250px;
  margin: 0 auto;
  color: #13162f;
  font-size: clamp(30px, 5vw, 50px);
  line-height: 1.3;
  font-weight: 850;
  letter-spacing: -2.8px;
}

.dfeed64-title span {
  display: block;

  background: linear-gradient(90deg, #a344ee, #775ce3 52%, #4784ef);

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}

.dfeed64-intro {
  max-width: 950px;
  margin: 24px auto 0;
  color: #555c76;
  font-size: 18px;
  line-height: 1.85;
  font-weight: 400;
}

/* =========================================================
   MANIFESTO
========================================================= */

.dfeed64-manifesto {
  position: relative;
  z-index: 2;

  max-width: 900px;

  margin: 42px auto 40px;

  display: grid;

  grid-template-columns: 1fr auto 1fr;

  align-items: center;

  gap: 18px;
}

.dfeed64-manifesto__line {
  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(123, 89, 219, 0.32));
}

.dfeed64-manifesto__line--right {
  transform: scaleX(-1);
}

.dfeed64-manifesto__content {
  text-align: center;
}

.dfeed64-manifesto__content small {
  display: block;

  margin-bottom: 5px;

  color: #8c92aa;

  font-size: 7px;

  font-weight: 900;

  letter-spacing: 1.8px;
}

.dfeed64-manifesto__content h3 {
  max-width: 610px;

  margin: 0;

  color: #181b35;

  font-size: 17px;
  line-height: 1.5;

  font-weight: 900;

  letter-spacing: 0.35px;
}

/* =========================================================
   CENTRAL VISUAL
========================================================= */

.dfeed64-visual {
  position: relative;
  z-index: 2;

  min-height: 470px;

  max-width: 1050px;

  margin: 0 auto 48px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.dfeed64-visual__halo {
  position: absolute;

  width: 600px;
  height: 330px;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background: radial-gradient(ellipse,
      rgba(142, 77, 239, 0.13),
      rgba(76, 116, 238, 0.05) 45%,
      transparent 72%);

  filter: blur(12px);
}

/* =========================================================
   CENTER DIRECTOR
========================================================= */

.dfeed64-director {
  position: relative;
  z-index: 4;

  width: 290px;

  padding: 18px;

  border: 1px solid rgba(116, 87, 207, 0.2);
  border-radius: 26px;

  background: linear-gradient(150deg, #ffffff 0%, #f7f4ff 100%);

  box-shadow: 0 28px 70px rgba(46, 44, 100, 0.14),
    0 0 0 7px rgba(255, 255, 255, 0.75);
}

.dfeed64-director__badge {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  margin-bottom: 14px;

  color: #7956d7;

  font-size: 8px;

  font-weight: 900;

  letter-spacing: 1.2px;
}

.dfeed64-director__pulse {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #8655e8;

  box-shadow: 0 0 0 4px rgba(134, 85, 232, 0.08),
    0 0 11px rgba(134, 85, 232, 0.3);
}

.dfeed64-director__core {
  position: relative;

  min-height: 255px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  border: 1px solid #e4e1f0;
  border-radius: 19px;

  background: radial-gradient(circle at 50% 48%,
      rgba(153, 83, 238, 0.13),
      transparent 36%),
    linear-gradient(145deg, #faf8ff, #f4f6ff);
}

.dfeed64-director__ring {
  position: absolute;

  width: 180px;
  height: 180px;

  border: 1px solid rgba(120, 92, 213, 0.12);
  border-radius: 50%;

  box-shadow: 0 0 0 24px rgba(120, 92, 213, 0.025),
    0 0 0 48px rgba(72, 128, 239, 0.018);
}

.dfeed64-director__mark {
  position: relative;
  z-index: 2;

  width: 66px;
  height: 66px;

  margin-bottom: 16px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 20px;

  background: linear-gradient(135deg, #9c48ed, #745de3 52%, #4784ef);

  color: #ffffff;

  box-shadow: 0 14px 34px rgba(104, 76, 205, 0.22);
}

.dfeed64-director__mark svg {
  width: 29px;
  height: 29px;

  fill: currentColor;
}

.dfeed64-director__core small {
  position: relative;
  z-index: 2;

  margin-bottom: 5px;

  color: #9297aa;

  font-size: 7px;

  font-weight: 900;

  letter-spacing: 1.7px;
}

.dfeed64-director__core strong {
  position: relative;
  z-index: 2;

  color: #171b37;

  font-size: 18px;
  line-height: 1.35;

  font-weight: 900;

  text-align: center;
}

.dfeed64-director__status {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  margin-top: 14px;

  color: #777e99;

  font-size: 7px;

  font-weight: 900;

  letter-spacing: 1.2px;
}

.dfeed64-director__status span {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #5882ee;
}

/* =========================================================
   FLOATING CONTENT CARDS
========================================================= */

.dfeed64-float {
  position: absolute;
  z-index: 3;

  width: 190px;

  padding: 14px;

  border: 1px solid #e5e4ee;
  border-radius: 15px;

  background: rgba(255, 255, 255, 0.92);

  box-shadow: 0 18px 45px rgba(45, 47, 94, 0.09);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.dfeed64-float--one {
  top: 48px;
  left: 70px;

  transform: rotate(-4deg);
}

.dfeed64-float--two {
  bottom: 64px;
  left: 25px;

  transform: rotate(3deg);
}

.dfeed64-float--three {
  top: 55px;
  right: 50px;

  transform: rotate(4deg);
}

.dfeed64-float--four {
  right: 18px;
  bottom: 58px;

  transform: rotate(-3deg);
}

.dfeed64-float__top {
  display: flex;
  align-items: center;

  gap: 7px;

  margin-bottom: 12px;

  color: #9a9eb0;

  font-size: 7px;

  font-weight: 900;

  letter-spacing: 1.1px;
}

.dfeed64-float__top span {
  width: 25px;
  height: 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 6px;

  background: #f4efff;

  color: #7958d4;

  font-size: 7px;
}

.dfeed64-float>strong {
  display: block;

  margin-bottom: 12px;

  color: #202440;

  font-size: 13px;

  font-weight: 850;
}

.dfeed64-float__bars {
  display: grid;

  gap: 6px;
}

.dfeed64-float__bars i {
  display: block;

  height: 7px;

  border-radius: 20px;

  background: linear-gradient(90deg, #a657ec, #6b71e6);
}

.dfeed64-float__bars i:nth-child(2) {
  width: 76%;
}

.dfeed64-float__bars i:nth-child(3) {
  width: 57%;
}

.dfeed64-float__thumbs {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 7px;
}

.dfeed64-float__thumbs i {
  height: 50px;

  border-radius: 8px;

  background: linear-gradient(145deg, #eee6ff, #e8efff);
}

.dfeed64-float__formats {
  display: flex;

  gap: 5px;
}

.dfeed64-float__formats i {
  flex: 1;

  padding: 7px 4px;

  border: 1px solid #e7e4ef;
  border-radius: 6px;

  background: #f8f7fc;

  color: #666d88;

  font-size: 7px;

  font-style: normal;
  font-weight: 800;

  text-align: center;
}

.dfeed64-float__play {
  height: 62px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 9px;

  background: linear-gradient(145deg, #f0e8ff, #e9f0ff);
}

.dfeed64-float__play span {
  width: 31px;
  height: 31px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: linear-gradient(135deg, #a14cec, #4f82ef);

  color: #fff;

  font-size: 10px;
}

/* =========================================================
   FLOW
========================================================= */

.dfeed64-flow {
  position: absolute;

  left: 50%;
  bottom: 3px;

  transform: translateX(-50%);

  display: flex;
  align-items: center;

  gap: 12px;

  padding: 10px 15px;

  border: 1px solid #e4e5ed;
  border-radius: 14px;

  background: rgba(255, 255, 255, 0.92);

  box-shadow: 0 13px 30px rgba(45, 47, 92, 0.07);
}

.dfeed64-flow__item {
  display: flex;
  align-items: center;

  gap: 6px;

  color: #83899f;

  font-size: 8px;
}

.dfeed64-flow__item span {
  width: 22px;
  height: 22px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 6px;

  background: #f5f4fa;

  color: #777c91;

  font-size: 7px;

  font-weight: 900;
}

.dfeed64-flow__item strong {
  font-weight: 800;
}

.dfeed64-flow>i {
  width: 20px;
  height: 1px;

  background: #dddfea;
}

.dfeed64-flow__item--active {
  color: #7055d0;
}

.dfeed64-flow__item--active span {
  background: #f1ebff;

  color: #7456d5;
}

/* =========================================================
   STORY PANEL
========================================================= */

.dfeed64-story {
  position: relative;
  z-index: 2;

  max-width: 1120px;

  margin: 0 auto;

  overflow: hidden;

  padding: 45px;

  border: 1px solid rgba(118, 89, 209, 0.15);
  border-radius: 25px;

  background: linear-gradient(135deg, #7243c7 0%, #563cb1 50%, #334baf 100%);

  color: #ffffff;

  box-shadow: 0 30px 75px rgba(74, 56, 147, 0.2);
}

.dfeed64-story__glow {
  position: absolute;

  width: 300px;
  height: 300px;

  top: -170px;
  right: -100px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.14);

  filter: blur(70px);
}

.dfeed64-story__left,
.dfeed64-story__feature,
.dfeed64-story__detail {
  position: relative;
  z-index: 2;
}

.dfeed64-story__left {
  height: 100%;

  padding-right: 15px;
}

.dfeed64-story__eyebrow {
  display: block;

  margin-bottom: 12px;

  color: rgba(255, 255, 255, 0.64);

  font-size: 8px;

  font-weight: 900;

  letter-spacing: 1.7px;
}

.dfeed64-story__left p {
  margin: 0;

  color: rgba(255, 255, 255, 0.88);

  font-size: 15px;
  line-height: 1.85;
}

.dfeed64-story__feature {
  display: grid;

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

  gap: 17px;

  padding: 21px;

  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 16px;

  background: rgba(255, 255, 255, 0.08);
}

.dfeed64-story__icon {
  width: 44px;
  height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 11px;

  background: rgba(255, 255, 255, 0.1);

  color: #ffffff;
}

.dfeed64-story__icon svg {
  width: 20px;
  height: 20px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dfeed64-story__feature span {
  display: block;

  margin-bottom: 6px;

  color: rgba(255, 255, 255, 0.6);

  font-size: 7px;

  font-weight: 900;

  letter-spacing: 1.5px;
}

.dfeed64-story__feature h3 {
  margin: 0;

  color: #ffffff;

  font-size: 19px;
  line-height: 1.5;

  font-weight: 850;
}

.dfeed64-story__detail {
  margin-top: 19px;

  display: grid;

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

  gap: 15px;
}

.dfeed64-story__rail {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 8px;
}

.dfeed64-story__rail span {
  width: 35px;
  height: 35px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 9px;

  background: rgba(255, 255, 255, 0.08);

  color: #ffffff;

  font-size: 9px;

  font-weight: 900;
}

.dfeed64-story__rail i {
  width: 1px;

  flex: 1;

  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0.28),
      transparent);
}

.dfeed64-story__detail p {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400 !important;
}

/* =========================================================
   NEXT HEADING
========================================================= */

.dfeed64-next {
  position: relative;
  z-index: 2;

  max-width: 960px;

  margin: 62px auto 0;

  text-align: center;
}

.dfeed64-next__label {
  display: inline-flex;

  margin-bottom: 12px;

  padding: 7px 10px;

  border: 1px solid rgba(120, 88, 211, 0.15);
  border-radius: 6px;

  background: #f7f3ff;

  color: #7658d4;

  font-size: 8px;

  font-weight: 900;

  letter-spacing: 1.3px;
}

.dfeed64-next h2 {
  margin: 0;
  color: #14172e;
  font-size: clamp(26px, 4vw, 30px);
  line-height: 1.1;
  font-weight: 1250;
  letter-spacing: 0;
}

.dfeed64-next__line {
  margin-top: 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 9px;
}

.dfeed64-next__line span {
  width: 60px;
  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(119, 87, 215, 0.36));
}

.dfeed64-next__line span:last-child {
  transform: scaleX(-1);
}

.dfeed64-next__line i {
  width: 5px;
  height: 5px;

  transform: rotate(45deg);

  background: #7659d8;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {
  .dfeed64-section {
    padding: 75px 0;
  }

  .dfeed64-visual {
    min-height: 420px;
  }

  .dfeed64-float {
    width: 160px;
  }

  .dfeed64-float--one {
    left: 15px;
  }

  .dfeed64-float--two {
    left: 0;
  }

  .dfeed64-float--three {
    right: 10px;
  }

  .dfeed64-float--four {
    right: 0;
  }

  .dfeed64-story {
    padding: 32px;
  }
}

@media (max-width: 767px) {
  .dfeed64-section {
    padding: 55px 0 60px;
  }

  .dfeed64-title {
    font-size: 36px;

    letter-spacing: -1.5px;
  }

  .dfeed64-intro {
    font-size: 14px;
  }

  .dfeed64-manifesto {
    grid-template-columns: 1fr;

    margin: 30px auto;
  }

  .dfeed64-manifesto__line {
    display: none;
  }

  .dfeed64-manifesto__content h3 {
    font-size: 15px;
  }

  .dfeed64-visual {
    min-height: auto;

    padding: 20px 0 65px;
  }

  .dfeed64-float {
    display: none;
  }

  .dfeed64-director {
    width: min(100%, 310px);
  }

  .dfeed64-flow {
    bottom: 3px;

    width: 100%;

    justify-content: space-between;

    gap: 5px;

    padding: 9px;
  }

  .dfeed64-flow>i {
    width: 8px;
  }

  .dfeed64-flow__item {
    gap: 4px;

    font-size: 7px;
  }

  .dfeed64-flow__item span {
    width: 19px;
    height: 19px;
  }

  .dfeed64-story {
    padding: 24px 20px;

    border-radius: 19px;
  }

  .dfeed64-story__left {
    padding-right: 0;
  }

  .dfeed64-story__left p {
    font-size: 14px;
  }

  .dfeed64-story__feature {
    grid-template-columns: 1fr;

    margin-top: 3px;
  }

  .dfeed64-story__feature h3 {
    font-size: 17px;
  }

  .dfeed64-story__detail p {
    font-size: 13px;
  }

  .dfeed64-next {
    margin-top: 45px;
  }
}

@media (max-width: 420px) {
  .dfeed64-title {
    font-size: 32px;
  }

  .dfeed64-kicker {
    font-size: 8px;
  }

  .dfeed64-flow__item strong {
    display: none;
  }

  .dfeed64-flow {
    justify-content: center;

    gap: 10px;
  }
}

/* =========================================================
   DIRECTORAI — UNDIRECTED VS DIRECTED
   Prefix: daout26-
========================================================= */

.daout26-section {
  position: relative;
  overflow: hidden;
  padding: 105px 0 0 0;
  /* background:
      radial-gradient(circle at 50% -10%, rgba(75, 99, 255, .15), transparent 38%),
      linear-gradient(180deg, #070810 0%, #090a13 48%, #05060b 100%); */
  color: #fff;
  isolation: isolate;
  background: url(../images/daout26-section.webp) no-repeat center top / cover;
}

/* =========================================================
   BACKGROUND
========================================================= */

.daout26-bg,
.daout26-bg__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.daout26-bg {
  overflow: hidden;
  z-index: -1;
}

.daout26-bg__grid {
  opacity: 0.18;
  background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px,
      transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}

.daout26-bg__glow {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.15;
}

.daout26-bg__glow--blue {
  top: 16%;
  left: -250px;
  background: #406dff;
}

.daout26-bg__glow--pink {
  right: -260px;
  bottom: 3%;
  background: #e63ea9;
}

/* =========================================================
   HEADING
========================================================= */

.daout26-head {
  max-width: 980px;
  margin: 0 auto 55px;
}

.daout26-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 9px 16px;
  border: 1px solid rgba(132, 151, 255, 0.22);
  border-radius: 100px;
  background: rgba(99, 115, 255, 0.07);
  color: #aeb9ff;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 1.7px;
}

.daout26-eyebrow__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7b8cff;
  box-shadow: 0 0 13px #7b8cff;
}

.daout26-title {
  margin: 0;
  color: #f8f9ff;
  font-size: clamp(30px, 5vw, 50px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -2.8px;
}

.daout26-title span {
  display: block;
  margin-top: 6px;
  background: linear-gradient(90deg,
      #ffffff 0%,
      #a8b9ff 38%,
      #dc9dff 68%,
      #ff9ed4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.daout26-subtitle {
  max-width: 1090px;
  margin: 24px auto 0;
  color: #fff;
  font-size: 18px;
  line-height: 1.75;
}

/* =========================================================
   MAIN PANEL
========================================================= */

.daout26-panel {
  position: relative;
  padding: 32px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 28px;
  background: radial-gradient(circle at 20% 10%,
      rgba(66, 103, 255, 0.14),
      transparent 30%),
    radial-gradient(circle at 84% 14%,
      rgba(229, 74, 190, 0.13),
      transparent 32%),
    linear-gradient(135deg, rgba(20, 23, 40, 0.96), rgba(9, 10, 18, 0.98));
  box-shadow: 0 45px 100px rgba(0, 0, 0, 0.4),
    inset 0 1px rgba(255, 255, 255, 0.07);
}

.daout26-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg,
      transparent 15%,
      rgba(112, 137, 255, 0.05) 45%,
      rgba(244, 106, 194, 0.04) 70%,
      transparent 88%);
}

.daout26-panel__shine {
  position: absolute;
  top: -160px;
  left: 50%;
  width: 550px;
  height: 300px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(119, 110, 255, 0.15);
  filter: blur(90px);
  pointer-events: none;
}

/* =========================================================
   PANEL PILL
========================================================= */

.daout26-panel__top {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin: 3px 0 31px;
}

.daout26-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 100px;
  background: rgb(30, 2, 50);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25),
    inset 0 1px rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.daout26-pill__icon {
  color: #a995ff;
}

/* =========================================================
   COMPARISON CARDS
========================================================= */

.daout26-card {
  position: relative;
  height: 100%;
  padding: 18px;
  border-radius: 22px;
  transition: transform 0.35s ease, border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.daout26-card--before {
  border: 1px solid rgba(255, 255, 255, 0.075);
  background: rgba(255, 255, 255, 0.025);
}

.daout26-card--after {
  overflow: hidden;
  border: 1px solid rgba(131, 128, 255, 0.26);
  background: linear-gradient(145deg,
      rgba(105, 106, 255, 0.09),
      rgba(222, 75, 186, 0.045) 55%,
      rgba(255, 255, 255, 0.025));
  box-shadow: 0 25px 55px rgba(0, 0, 0, 0.22),
    inset 0 1px rgba(255, 255, 255, 0.08);
}

.daout26-card--after:hover {
  transform: translateY(-6px);
  border-color: rgba(157, 142, 255, 0.42);
  box-shadow: 0 35px 75px rgba(0, 0, 0, 0.32), 0 0 45px rgba(108, 94, 255, 0.08);
}

.daout26-card__glow {
  position: absolute;
  top: -120px;
  right: -100px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(229, 75, 190, 0.14);
  filter: blur(75px);
  pointer-events: none;
}

.daout26-card__top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 15px;
}

.daout26-card__num {
  color: rgba(255, 255, 255, 0.22);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
}

/* =========================================================
   STATUS TAGS
========================================================= */

.daout26-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.65px;
  text-transform: uppercase;
}

.daout26-status span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.daout26-status--muted {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.055);
  color: #8e919c;
}

.daout26-status--muted span {
  background: #777b85;
}

.daout26-status--accent {
  border: 1px solid rgba(165, 130, 255, 0.24);
  background: linear-gradient(90deg,
      rgba(105, 113, 255, 0.15),
      rgba(234, 77, 189, 0.12));
  color: #d5c8ff;
}

.daout26-status--accent span {
  background: #ba86ff;
  box-shadow: 0 0 12px #b878ff;
}

/* =========================================================
   SOCIAL POST
========================================================= */

.daout26-post {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 15px;
  background: #101118;
  box-shadow: 0 20px 35px rgba(0, 0, 0, 0.25);
}

.daout26-post--after {
  border-color: rgba(150, 139, 255, 0.19);
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.28),
    0 0 35px rgba(112, 100, 255, 0.05);
}

.daout26-post__profile {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
}

.daout26-avatar {
  display: flex;
  flex: 0 0 37px;
  align-items: center;
  justify-content: center;
  width: 37px;
  height: 37px;
  border-radius: 50%;
  background: #292b34;
  color: #a8abb4;
  font-size: 10px;
  font-weight: 800;
}

.daout26-avatar--accent {
  background: linear-gradient(135deg, #667cff, #cb66e8);
  color: #fff;
  box-shadow: 0 0 20px rgba(131, 103, 255, 0.22);
}

.daout26-post__profile strong {
  display: block;
  margin-bottom: 2px;
  color: #e8e9ed;
  font-size: 12px;
  line-height: 1.2;
}

.daout26-post__profile span {
  display: block;
  color: #6f727e;
  font-size: 9px;
}

.daout26-more {
  margin-left: auto;
  color: #747783 !important;
  font-size: 20px !important;
}

/* =========================================================
   MEDIA MOCKUP
========================================================= */

.daout26-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #181a21;
}

.daout26-media__scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 30%, #30333d, #181920 65%);
}

.daout26-media--before {
  filter: saturate(0.55) brightness(0.78);
}

.daout26-media--before .daout26-media__scene {
  background: linear-gradient(145deg, #292b31, #18191e);
}

.daout26-media--after .daout26-media__scene {
  background: radial-gradient(circle at 50% 35%, #454c71, transparent 32%),
    linear-gradient(135deg, #20263b, #171824 50%, #281c2d);
}

.daout26-media--after::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.08),
      transparent 40%,
      rgba(4, 5, 10, 0.74) 100%);
}

.daout26-media__placeholder {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.42);
  font-size: clamp(27px, 4vw, 45px);
  line-height: 0.88;
  font-weight: 900;
  text-align: center;
  letter-spacing: -2px;
}

/* =========================================================
   DIRECTED CREATIVE OVERLAYS
========================================================= */

.daout26-hook {
  position: absolute;
  z-index: 3;
  top: 20px;
  left: 20px;
  max-width: 75%;
}

.daout26-hook small {
  display: inline-block;
  margin-bottom: 5px;
  padding: 5px 8px;
  border-radius: 4px;
  background: #fff;
  color: #0a0a0d;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1px;
}

.daout26-hook strong {
  display: block;
  color: #fff;
  font-size: clamp(16px, 2.2vw, 25px);
  line-height: 1.03;
  font-weight: 900;
  letter-spacing: -0.7px;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.daout26-caption {
  position: absolute;
  z-index: 3;
  left: 20px;
  bottom: 23px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 9px;
  font-weight: 700;
}

.daout26-caption span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e67bd1;
  box-shadow: 0 0 10px #e67bd1;
}

.daout26-progress {
  position: absolute;
  z-index: 3;
  right: 20px;
  bottom: 25px;
  width: 65px;
  height: 3px;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
}

.daout26-progress span {
  display: block;
  width: 76%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7585ff, #ed73c7);
}

/* =========================================================
   POST BODY
========================================================= */

.daout26-post__body {
  padding: 14px;
}

.daout26-post__body p {
  min-height: 30px;
  margin: 0 0 13px;
  color: #fff;
  font-size: 16px;
  line-height: 1.55;
}

.daout26-engagement {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.daout26-engagement span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #6e717c;
  font-size: 10px;
  font-weight: 700;
}

.daout26-engagement b {
  color: #767985;
  font-size: 14px;
  font-weight: 400;
}

.daout26-engagement--hot span {
  color: #c4c7d2;
}

.daout26-engagement--hot b {
  color: #e589d0;
}

/* =========================================================
   PERFORMANCE LIFT
========================================================= */

.daout26-lift {
  display: none;
  align-items: center;
  gap: 11px;
  margin: 12px 0 0;
  padding: 11px 13px;
  border: 1px solid rgba(135, 152, 255, 0.12);
  border-radius: 11px;
  background: linear-gradient(90deg,
      rgba(93, 117, 255, 0.08),
      rgba(230, 85, 193, 0.06));
}

.daout26-lift__pulse {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8d9cff;
  box-shadow: 0 0 13px rgba(141, 156, 255, 0.8);
}

.daout26-lift small {
  display: block;
  margin-bottom: 2px;
  color: #73798f;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 1px;
}

.daout26-lift strong {
  display: block;
  color: #cdd3f8;
  font-size: 10px;
}

.daout26-lift__arrow {
  margin-left: auto;
  color: #df83d3;
  font-size: 18px;
}

/* =========================================================
   CARD COPY
========================================================= */

.daout26-card__copy {
  padding: 22px 4px 5px;
}

.daout26-copy__label {
  display: block;
  margin-bottom: 9px;
  color: #686c78;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.2px;
}

.daout26-copy__label--accent {
  color: #9e9fd6;
}

.daout26-card__copy p {
  margin: 0;
  color: #fff;
  font-size: 18px;
  line-height: 1.7;
}

.daout26-card__copy strong {
  background: linear-gradient(90deg, #a344ee, #775ce3 52%, #4784ef);
  background-clip: border-box;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.daout26-card--after .daout26-card__copy strong {
  background: linear-gradient(90deg, #a344ee, #775ce3 52%, #4784ef);
  background-clip: border-box;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =========================================================
   CONCLUSION
========================================================= */

.daout26-conclusion {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  max-width: 950px;
  margin: 37px auto 4px;
  text-align: center;
}

.daout26-conclusion__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12));
}

.daout26-conclusion__line:last-child {
  transform: rotate(180deg);
}

.daout26-conclusion__icon {
  display: flex;
  flex: 0 0 35px;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  border: 1px solid rgba(158, 142, 255, 0.18);
  border-radius: 50%;
  background: rgba(124, 109, 255, 0.08);
  color: #a99aff;
}

.daout26-conclusion p {
  margin: 0;
  color: #fff;
  font-size: 18px;
  line-height: 1.6;
}

.daout26-conclusion strong {
  color: #fff;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {
  .daout26-section {
    padding: 80px 0;
  }

  .daout26-panel {
    padding: 24px;
  }

  .daout26-title {
    letter-spacing: -2px;
  }
}

@media (max-width: 575.98px) {
  .daout26-section {
    padding: 65px 0;
  }

  .daout26-head {
    margin-bottom: 38px;
  }

  .daout26-title {
    font-size: 38px;
    letter-spacing: -1.6px;
  }

  .daout26-subtitle {
    font-size: 16px;
    line-height: 1.65;
  }

  .daout26-panel {
    padding: 15px;
    border-radius: 20px;
  }

  .daout26-pill {
    gap: 7px;
    padding: 10px 14px;
    font-size: 12px;
  }

  .daout26-card {
    padding: 12px;
    border-radius: 17px;
  }

  .daout26-status {
    font-size: 9px;
  }

  .daout26-conclusion {
    gap: 11px;
    margin-top: 27px;
  }

  .daout26-conclusion__line {
    display: none;
  }

  .daout26-conclusion {
    flex-wrap: wrap;
  }

  .daout26-conclusion__icon {
    margin: 0 auto;
  }

  .daout26-conclusion p {
    flex: 0 0 100%;
    font-size: 14px;
  }
}

/* =========================================================
   $59 BILLION SHIFT — WHITE THEME
   Prefix: d59shift-
========================================================= */

.d59shift-section {
  position: relative;
  overflow: hidden;
  padding: 100px 0 0 0;
  /* background:
      radial-gradient(circle at 8% 20%, rgba(245, 173, 59, .10), transparent 30%),
      radial-gradient(circle at 92% 80%, rgba(71, 104, 170, .08), transparent 35%),
      linear-gradient(180deg, #ffffff 0%, #f8fafc 52%, #ffffff 100%); */
  color: #111827;
  font-size: 18px;
  isolation: isolate;
  background: #fff url(../images/d59shift-section.png) no-repeat center bottom / cover;
}

/* =========================================================
   BACKGROUND
========================================================= */

.d59shift-bg,
.d59shift-bg__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.d59shift-bg {
  z-index: -1;
  overflow: hidden;
}

.d59shift-bg__grid {
  opacity: 0.35;
  background-image: linear-gradient(rgba(17, 24, 39, 0.035) 1px,
      transparent 1px),
    linear-gradient(90deg, rgba(17, 24, 39, 0.035) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom,
      transparent,
      black 20%,
      black 80%,
      transparent);
}

.d59shift-bg__glow {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  filter: blur(120px);
}

.d59shift-bg__glow--one {
  top: 12%;
  left: -300px;
  background: rgba(245, 173, 59, 0.16);
}

.d59shift-bg__glow--two {
  right: -300px;
  bottom: 0;
  background: rgba(81, 110, 180, 0.12);
}

/* =========================================================
   HEADER
========================================================= */

.d59shift-head {
  max-width: 1000px;
  margin: 0 auto 58px;
}

.d59shift-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  padding: 9px 15px;
  border: 1px solid rgba(209, 145, 38, 0.22);
  border-radius: 100px;
  background: rgba(245, 176, 70, 0.1);
  color: #b87518;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 1.6px;
}

.d59shift-kicker__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d9952e;
  box-shadow: 0 0 13px rgba(217, 149, 46, 0.35);
}

.d59shift-title {
  margin: 0;
  color: #111318;
  font-size: clamp(38px, 5vw, 50px);
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: -2.7px;
}

.d59shift-title span {
  display: inline-block;
  padding: 0 8px;
  background: linear-gradient(180deg,
      transparent 52%,
      rgba(237, 183, 90, 0.34) 52%);
  color: #111318;
}

.d59shift-title strong {
  display: inline;
  font-weight: 800;
  color: #111318;
  border-bottom: 2px solid rgba(218, 158, 59, 0.65);
}

/* =========================================================
   MAIN PANEL
========================================================= */

.d59shift-panel {
  position: relative;
  padding: 44px;
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 28px;
  background: linear-gradient(145deg,
      rgba(255, 255, 255, 0.98),
      rgba(248, 250, 252, 0.98));
  box-shadow: 0 35px 90px rgba(15, 23, 42, 0.09),
    inset 0 1px rgba(255, 255, 255, 0.9);
}

.d59shift-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 42%;
  height: 3px;
  background: linear-gradient(90deg, #d99a35, rgba(217, 154, 53, 0));
}

/* =========================================================
   LEFT VISUAL
========================================================= */

.d59shift-visual {
  position: relative;
  max-width: 470px;
  margin: 0 auto;
  padding: 20px 18px 22px;
}

.d59shift-visual__backdrop {
  position: absolute;
  top: 0;
  right: 0;
  width: 84%;
  height: 92%;
  border-radius: 24px;
  background: linear-gradient(145deg, #e6a33b, #f5ca78);
  transform: rotate(4deg);
  opacity: 0.98;
}

.d59shift-visual__card {
  position: relative;
  z-index: 2;
  min-height: 500px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 22px;
  background: radial-gradient(circle at 75% 10%,
      rgba(245, 179, 75, 0.12),
      transparent 28%),
    linear-gradient(160deg, #ffffff, #f3f6fa);
  box-shadow: 0 28px 60px rgba(15, 23, 42, 0.13),
    inset 0 1px rgba(255, 255, 255, 0.9);
}

.d59shift-visual__card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg,
      rgba(255, 255, 255, 0.8),
      transparent 25%);
}

/* =========================================================
   VISUAL CARD TOP
========================================================= */

.d59shift-visual__top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.d59shift-visual__badge {
  padding: 7px 10px;
  border: 1px solid rgba(201, 138, 36, 0.2);
  border-radius: 7px;
  background: rgba(238, 177, 78, 0.1);
  color: #b9791f;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.2px;
}

.d59shift-visual__dots {
  display: flex;
  align-items: center;
  gap: 5px;
}

.d59shift-visual__dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.2);
}

/* =========================================================
   VISUAL CONTENT
========================================================= */

.d59shift-visual__content {
  position: relative;
  z-index: 2;
  padding-top: 55px;
}

.d59shift-visual__label {
  display: block;
  margin-bottom: 7px;
  color: #7b8492;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.15px;
}

.d59shift-visual__number {
  color: #111827;
  font-size: clamp(52px, 6vw, 78px);
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: -4px;
}

.d59shift-visual__number small {
  display: block;
  margin-top: 11px;
  color: #bb7a1c;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 2.3px;
}

/* =========================================================
   GROWTH
========================================================= */

.d59shift-growth {
  margin-top: 40px;
}

.d59shift-growth__head {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 10px;
}

.d59shift-growth__head span {
  color: #7e8794;
  font-size: 10px;
  font-weight: 700;
}

.d59shift-growth__head strong {
  color: #b87518;
  font-size: 11px;
}

.d59shift-growth__bar {
  height: 5px;
  overflow: hidden;
  border-radius: 100px;
  background: rgba(17, 24, 39, 0.08);
}

.d59shift-growth__bar span {
  display: block;
  width: 84%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #b9781d, #daa03d, #f0c471);
  box-shadow: 0 0 18px rgba(210, 154, 60, 0.18);
}

.d59shift-growth__years {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  color: #9aa1ac;
  font-size: 9px;
}

/* =========================================================
   CHART
========================================================= */

.d59shift-chart {
  position: relative;
  height: 145px;
  margin-top: 30px;
  overflow: hidden;
  border-top: 1px solid rgba(17, 24, 39, 0.07);
}

.d59shift-chart__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(17, 24, 39, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 24, 39, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}

.d59shift-chart svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.d59shift-chart__area {
  fill: rgba(218, 160, 61, 0.1);
}

.d59shift-chart__line {
  fill: none;
  stroke: #d49a38;
  stroke-width: 4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(212, 154, 56, 0.18));
}

.d59shift-chart__point {
  position: absolute;
  top: 6px;
  right: 0;
  width: 9px;
  height: 9px;
  border: 2px solid #d99a35;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 10px rgba(217, 154, 53, 0.28);
}

/* =========================================================
   FLOATING NOTES
========================================================= */

.d59shift-note {
  position: absolute;
  z-index: 4;
  padding: 12px 14px;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 10px;
  background: rgba(245, 183, 82, 0.98);
  box-shadow: 0 15px 35px rgba(15, 23, 42, 0.14);
  color: #2a1c08;
}

.d59shift-note strong,
.d59shift-note span {
  display: block;
}

.d59shift-note strong {
  font-size: 15px;
  font-weight: 900;
}

.d59shift-note span {
  margin-top: 2px;
  font-size: 9px;
  font-weight: 700;
  opacity: 0.72;
}

.d59shift-note--one {
  top: 95px;
  right: -9px;
  transform: rotate(2deg);
}

.d59shift-note--two {
  bottom: 31px;
  left: -11px;
  background: #ffffff;
  border: 1px solid rgba(17, 24, 39, 0.08);
  transform: rotate(-2deg);
}

.d59shift-note--two span {
  color: #777f8a;
}

.d59shift-note--two strong {
  color: #16191e;
}

/* =========================================================
   RIGHT COPY
========================================================= */

.d59shift-copy {
  max-width: 700px;
  padding-left: 14px;
}

.d59shift-copy__eyebrow {
  position: relative;
  display: inline-block;
  margin-bottom: 26px;
  color: #356ebd;
  font-size: 20px;
  line-height: 1.4;
  font-weight: 800;
}

.d59shift-copy__eyebrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -9px;
  width: 52px;
  height: 2px;
  background: #d89b39;
}

.d59shift-copy p {
  margin: 0 0 21px;
  color: #4f5866;
  font-size: 18px;
  line-height: 1.72;
  font-weight: 400;
}

.d59shift-copy p strong {
  color: #171a20;
  font-weight: 700;
}

.d59shift-source {
  position: relative;
  margin-top: 30px;
  padding: 15px 17px;
  border-left: 2px solid #d59a3b;
  background: #f7f8fa;
  color: #737b87;
  font-size: 14px;
  line-height: 1.6;
  font-style: italic;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {
  .d59shift-section {
    padding: 80px 0;
  }

  .d59shift-head {
    margin-bottom: 45px;
  }

  .d59shift-panel {
    padding: 30px;
  }

  .d59shift-copy {
    max-width: 100%;
    padding-left: 0;
  }

  .d59shift-visual {
    margin-bottom: 15px;
  }
}

@media (max-width: 575.98px) {
  .d59shift-section {
    padding: 65px 0 0 0;
    font-size: 18px;
  }

  .d59shift-title {
    font-size: 38px;
    letter-spacing: -1.7px;
  }

  .d59shift-panel {
    padding: 18px;
    border-radius: 20px;
  }

  .d59shift-visual {
    padding: 12px 8px 18px;
  }

  .d59shift-visual__card {
    min-height: 460px;
    padding: 17px;
  }

  .d59shift-visual__content {
    padding-top: 45px;
  }

  .d59shift-visual__number {
    font-size: 52px;
    letter-spacing: -3px;
  }

  .d59shift-note--one {
    right: -2px;
  }

  .d59shift-note--two {
    left: -2px;
  }

  .d59shift-copy__eyebrow {
    font-size: 19px;
  }

  .d59shift-copy p {
    font-size: 18px;
    line-height: 1.7;
  }
}

/* =========================================================
   VIDEO MARKETING STAT PROOF
   WHITE THEME
   Prefix: vmproof26-
========================================================= */
/* =========================================================
   ULTRA PREMIUM VIDEO PROOF
   WHITE THEME
   Prefix: vpultra26-
========================================================= */

.vpultra26-section {
  position: relative;
  overflow: hidden;
  padding: 10px 0 130px 0;
  background: #fff url(../images/vmproof26-section.png) no-repeat center center/ cover;
  color: #10151d;
  font-size: 18px;
  isolation: isolate;
}

/* =========================================================
   BACKGROUND
========================================================= */

.vpultra26-bg,
.vpultra26-bg__mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.vpultra26-bg {
  z-index: -1;
}

.vpultra26-bg__mesh {
  opacity: 0.28;
  background-image: linear-gradient(rgba(18, 24, 32, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 24, 32, 0.03) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: linear-gradient(to bottom,
      transparent,
      black 18%,
      black 82%,
      transparent);
}

.vpultra26-bg__orb {
  position: absolute;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  filter: blur(125px);
}

.vpultra26-bg__orb--blue {
  top: -300px;
  left: -320px;
  background: rgba(49, 100, 180, 0.12);
}

.vpultra26-bg__orb--gold {
  right: -350px;
  bottom: -300px;
  background: rgba(218, 159, 68, 0.13);
}

/* =========================================================
   HEADER
========================================================= */

.vpultra26-head {
  max-width: 1120px;
  margin: 0 auto 86px;
}

.vpultra26-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin-bottom: 21px;
  color: #3268aa;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 2.3px;
}

.vpultra26-eyebrow span {
  width: 43px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(50, 104, 170, 0.45));
}

.vpultra26-eyebrow span:last-child {
  transform: rotate(180deg);
}

.vpultra26-title {
  margin: 0;
  color: #0e1116;
  font-size: clamp(42px, 5.3vw, 50px);

  font-weight: 900;
  letter-spacing: -1.8px;
}

.vpultra26-title strong {
  display: block;
  margin-top: 8px;
  color: #2e63a4;
  font-weight: 900;
}

/* =========================================================
   PROOF WRAPPER
========================================================= */

.vpultra26-proof {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 0;
}

.vpultra26-proof__rail {
  position: absolute;
  top: 55px;
  bottom: 55px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(to bottom,
      rgba(50, 99, 168, 0.3) 0 6px,
      transparent 6px 15px);
}

/* =========================================================
   STAT ROW
========================================================= */

.vpultra26-stat {
  position: relative;
  display: flex;
  width: 100%;
  margin-bottom: 48px;
  margin-bottom: -60px;
}

.vpultra26-stat:last-child {
  margin-bottom: 0;
}

.vpultra26-stat--left {
  justify-content: flex-start;
  padding-right: calc(50% + 48px);
}

.vpultra26-stat--right {
  justify-content: flex-end;
  padding-left: calc(50% + 48px);
}

.vpultra26-stat__node {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  border: 4px solid #fff;
  border-radius: 50%;
  background: #366fb5;
  box-shadow: 0 0 0 1px rgba(54, 111, 181, 0.17),
    0 7px 18px rgba(33, 67, 111, 0.15);
}

.vpultra26-stat--left::after,
.vpultra26-stat--right::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 48px;
  border-top: 1px solid rgba(53, 102, 168, 0.2);
}

.vpultra26-stat--left::after {
  left: calc(50% - 48px);
}

.vpultra26-stat--right::after {
  left: 50%;
}

/* =========================================================
   STAT CARD
========================================================= */

.vpultra26-card {
  position: relative;
  display: grid;
  grid-template-columns: 170px 1fr;
  align-items: center;
  gap: 30px;
  width: 100%;
  min-height: 250px;
  padding: 36px 38px;
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, 0.075);
  border-radius: 26px;
  background: linear-gradient(145deg,
      rgba(255, 255, 255, 0.98),
      rgba(248, 250, 253, 0.96));
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.08),
    0 5px 20px rgba(15, 23, 42, 0.03), inset 0 1px rgba(255, 255, 255, 0.95);
  transition: transform 0.35s ease, box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.vpultra26-card:hover {
  transform: translateY(-7px);
  border-color: rgba(48, 100, 170, 0.16);
  box-shadow: 0 42px 95px rgba(15, 23, 42, 0.13);
}

.vpultra26-card--featured {
  background: radial-gradient(circle at 90% 15%,
      rgba(55, 107, 179, 0.08),
      transparent 35%),
    linear-gradient(145deg, #ffffff, #f5f8fc);
}

.vpultra26-card__accent {
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(180deg, #2864ac, #77a4de);
}

.vpultra26-card__accent--gold {
  background: linear-gradient(180deg, #bd7f26, #e9b961);
}

/* =========================================================
   NUMBER
========================================================= */

.vpultra26-card__number {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
}

.vpultra26-card__number span {
  color: #10141b;
  font-size: clamp(88px, 8vw, 118px);
  line-height: 0.88;
  font-weight: 950;

  background-image: linear-gradient(to right, #b760ff, #7b7cff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #3269ad;
}

.vpultra26-card__number sup {
  margin: 5px 0 0 6px;
  color: #3269ad;
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
}

/* =========================================================
   BODY
========================================================= */

.vpultra26-card__main {
  position: relative;
  z-index: 2;
}

.vpultra26-card__meta {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
}

.vpultra26-icon {
  display: flex;
  flex: 0 0 52px;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(47, 103, 174, 0.1);
  border-radius: 15px;
  background: linear-gradient(145deg, #edf5ff, #ffffff);
  box-shadow: 0 12px 28px rgba(38, 79, 133, 0.08);
}

.vpultra26-icon svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: #376eb3;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vpultra26-icon--gold {
  background: linear-gradient(145deg, #fff7e9, #ffffff);
  border-color: rgba(190, 130, 40, 0.12);
}

.vpultra26-icon--gold svg {
  stroke: #c28b35;
}

.vpultra26-card__meta>span {
  padding: 7px 10px;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 100px;
  background: #f8fafc;
  color: #747e8b;
  font-size: 9px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 1.3px;
}

.vpultra26-card__main p {
  max-width: 430px;
  margin: 0;
  color: #4d5663;
  font-size: 18px;
  line-height: 1.72;
}

/* =========================================================
   INDEX
========================================================= */

.vpultra26-card__index {
  position: absolute;
  right: 21px;
  bottom: 17px;
  color: rgba(16, 20, 27, 0.09);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.6px;
}

/* =========================================================
   SOURCE
========================================================= */

.vpultra26-source {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 820px;
  margin: 48px auto 0;
}

.vpultra26-source span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(17, 24, 39, 0.11));
}

.vpultra26-source span:last-child {
  transform: rotate(180deg);
}

.vpultra26-source p {
  margin: 0;
  color: #7d8692;
  font-size: 14px;
  line-height: 1.5;
  font-style: italic;
}

/* =========================================================
   CLOSING
========================================================= */

.vpultra26-closing {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  margin-top: 48px;
  padding: 31px 33px;
  overflow: hidden;
  border: 1px solid rgba(23, 67, 125, 0.09);
  border-radius: 22px;
  background: linear-gradient(110deg,
      rgba(239, 246, 255, 0.94),
      #ffffff 52%,
      rgba(255, 247, 234, 0.92));
  box-shadow: 0 26px 65px rgba(15, 23, 42, 0.07);
}

.vpultra26-closing::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(180deg, #316bb0, #d59a3c);
}

.vpultra26-closing__left {
  position: relative;
  z-index: 2;
}

.vpultra26-closing__left small {
  display: block;
  margin-bottom: 8px;
  color: #a57632;
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 1.6px;
}

.vpultra26-closing__left p {
  max-width: 850px;
  margin: 0;
  color: #222933;
  font-size: 18px;
  line-height: 1.67;
  font-weight: 650;
}

.vpultra26-closing__arrow {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 0 0 55px;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 55px;
  border: 1px solid rgba(45, 95, 160, 0.11);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 12px 28px rgba(28, 64, 109, 0.09);
  color: #3269ac;
  font-size: 21px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {
  .vpultra26-section {
    padding: 85px 0;
  }

  .vpultra26-head {
    margin-bottom: 58px;
  }

  .vpultra26-proof__rail {
    left: 18px;
  }

  .vpultra26-stat,
  .vpultra26-stat--left,
  .vpultra26-stat--right {
    justify-content: flex-start;
    padding: 0 0 0 65px;
  }

  .vpultra26-stat__node {
    left: 18px;
  }

  .vpultra26-stat--left::after,
  .vpultra26-stat--right::after {
    left: 18px;
    width: 47px;
  }

  .vpultra26-card {
    grid-template-columns: 155px 1fr;
  }
}

@media (max-width: 767.98px) {
  .vpultra26-card {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 30px;
  }

  .vpultra26-card__main p {
    max-width: 100%;
  }
}

@media (max-width: 575.98px) {
  .vpultra26-section {
    padding: 65px 0;
    font-size: 18px;
  }

  .vpultra26-title {
    font-size: 39px;
    line-height: 1.04;
    letter-spacing: -2px;
  }

  .vpultra26-eyebrow {
    font-size: 10px;
    letter-spacing: 1.5px;
  }

  .vpultra26-eyebrow span {
    width: 25px;
  }

  .vpultra26-proof__rail {
    left: 9px;
  }

  .vpultra26-stat,
  .vpultra26-stat--left,
  .vpultra26-stat--right {
    padding-left: 37px;
    margin-bottom: 25px;
  }

  .vpultra26-stat__node {
    left: 9px;
    width: 17px;
    height: 17px;
  }

  .vpultra26-stat--left::after,
  .vpultra26-stat--right::after {
    left: 9px;
    width: 28px;
  }

  .vpultra26-card {
    min-height: 0;
    padding: 26px 22px;
    border-radius: 19px;
  }

  .vpultra26-card__number span {
    font-size: 60px;
    letter-spacing: 0;
  }

  .vpultra26-card__number sup {
    font-size: 24px;
  }

  .vpultra26-card__meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .vpultra26-card__main p {
    font-size: 18px;
  }

  .vpultra26-source span {
    display: none;
  }

  .vpultra26-source {
    text-align: center;
  }

  .vpultra26-closing {
    align-items: flex-start;
    padding: 25px 22px;
  }

  .vpultra26-closing__left p {
    font-size: 18px;
  }

  .vpultra26-closing__arrow {
    display: none;
  }
}

/* =========================================================
   DIRECTORAI — STOP SCROLL SECTION
   FULL UPDATED CSS
   Prefix: dastopx-
========================================================= */

.dastopx-section {
  position: relative;
  overflow: hidden;
  padding: 85px 0 0px 0;
  background: url(../images/dastopx-section.jpg) no-repeat center top / cover;
  color: #fff;
  font-size: 18px;
  isolation: isolate;
}

/* =========================================================
   BACKGROUND
========================================================= */

.dastopx-bg,
.dastopx-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.dastopx-bg {
  z-index: -1;
}

.dastopx-grid {
  opacity: 0.22;
  background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px,
      transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: linear-gradient(to bottom,
      transparent,
      #000 15%,
      #000 85%,
      transparent);
}

.dastopx-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(130px);
}

.dastopx-glow--red {
  top: -200px;
  left: -230px;
  width: 500px;
  height: 500px;
  background: rgba(232, 38, 69, 0.16);
}

.dastopx-glow--violet {
  right: -270px;
  bottom: -220px;
  width: 620px;
  height: 620px;
  background: rgba(104, 66, 222, 0.16);
}

/* =========================================================
   WHITE STOP PANEL
========================================================= */

.dastopx-panel {
  position: relative;
  padding: 45px 0 100px;
  border: 3px dashed rgb(139, 3, 2);
  border-radius: 28px;
  background: linear-gradient(145deg,
      rgba(255, 255, 255, 0.98),
      rgba(248, 250, 252, 0.98));
  box-shadow: 0 35px 90px rgba(15, 23, 42, 0.09),
    inset 0 1px rgba(255, 255, 255, 0.9);
}

/* =========================================================
   STOP IMAGE
========================================================= */

.dastopx-stop-wrap {
  position: relative;
  z-index: 5;
  max-width: 620px;
  margin: 0 auto -2px;
  text-align: center;
}

.dastopx-stop-wrap::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 78%;
  height: 45%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 36, 65, 0.26);
  filter: blur(48px);
}

.dastopx-stop-img {
  display: block;
  width: 100%;
  max-width: 490px;
  margin: auto;
  margin-top: -130px;
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.42)) drop-shadow(0 0 25px rgba(255, 38, 65, 0.14));
}

/* =========================================================
   HEADING
========================================================= */

.dastopx-header {
  max-width: 1050px;
  margin: 22px auto 0;
}

.dastopx-title {
  margin: 0;
  color: #111827;
  font-size: clamp(43px, 5vw, 50px);
  line-height: 1.03;
  font-weight: 900;
  letter-spacing: -1.2px;
}

.dastopx-title span {
  display: block;
  margin-top: 5px;
  color: #ff465f;
}

/* =========================================================
   PURPLE SPEECH BUBBLE
========================================================= */

.dastopx-callout {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  max-width: 920px;
  margin: 35px auto 52px;
  padding: 22px 35px;
  border: 1px solid rgba(178, 128, 255, 0.42);
  border-radius: 18px;
  background: radial-gradient(circle at 50% 0%,
      rgba(191, 135, 255, 0.16),
      transparent 60%),
    linear-gradient(105deg,
      rgba(70, 41, 147, 0.96),
      rgba(104, 54, 183, 0.97),
      rgba(66, 39, 141, 0.96));
  box-shadow: 0 22px 60px rgba(45, 23, 101, 0.35),
    inset 0 1px rgba(255, 255, 255, 0.12);
}

.dastopx-callout::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: 13px;
  pointer-events: none;
}

.dastopx-callout h3 {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #fff;
  font-size: clamp(21px, 2vw, 27px);
  line-height: 1.4;
  font-weight: 750;
  text-align: center;
  letter-spacing: -0.5px;
}

.dastopx-callout__icon {
  position: relative;
  z-index: 2;
  color: #d5b8ff;
  font-size: 18px;
}

.dastopx-callout__tail {
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 20px;
  height: 20px;
  transform: translateX(-50%) rotate(45deg);
  background: #6235aa;
}

/* =========================================================
   BODY COPY
========================================================= */

.dastopx-copy {
  position: relative;
  max-width: 970px;
  margin: 0 auto 50px;
  padding-left: 26px;
}

.dastopx-copy::before {
  content: "";
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: 0;
  width: 2px;
  background: linear-gradient(to bottom, #ff3c59, #865cf2, transparent);
}

.dastopx-copy p {
  margin: 0 0 22px;
  color: #aeb0bb;
  font-size: 18px;
  line-height: 1.8;
}

.dastopx-copy p:last-child {
  margin-bottom: 0;
  color: #d1d2da;
}

.dastopx-copy em {
  color: #fff;
}

/* =========================================================
   UPDATED DIRECTORAI DEMO VIDEO
========================================================= */

.dastopx-action {
  position: relative;
  max-width: 1050px;
  margin: 65px auto 0;
}

/* Demo Heading */

.dastopx-action__heading {
  position: relative;
  z-index: 5;
  margin-bottom: 32px;
  text-align: center;
}

.dastopx-action__small {
  margin-bottom: 6px;
  color: #ffffff;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 800;
}

.dastopx-action__title-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

/* Center Pill */

.dastopx-action__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(520px, 60vw);
  min-height: 50px;
  padding: 11px 32px;
  border: 1px solid #9b43ff;
  border-radius: 100px;
  background: linear-gradient(90deg,
      rgba(80, 24, 135, 0.25),
      rgba(18, 10, 42, 0.8),
      rgba(80, 24, 135, 0.25));
  box-shadow: 0 0 32px rgba(116, 45, 222, 0.08),
    inset 0 1px rgba(255, 255, 255, 0.05);
  color: #ffffff;
  font-size: 20px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.2px;
}

/* Curved Arrows */

.dastopx-action__arrow {
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
}

.dastopx-action__arrow svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dastopx-action__arrow--left,
.dastopx-action__arrow--right {
  transform: translateY(13px);
}

/* Video Outer Shell */

.dastopx-action__video-shell {
  position: relative;
  padding: 28px;
  overflow: hidden;
  border: 1px solid rgba(150, 70, 255, 0.3);
  border-radius: 18px;
  background: radial-gradient(circle at 15% 15%,
      rgba(114, 34, 192, 0.14),
      transparent 37%),
    radial-gradient(circle at 87% 75%, rgba(54, 49, 159, 0.1), transparent 35%),
    linear-gradient(135deg, rgba(30, 9, 52, 0.96), rgba(8, 8, 26, 0.98));
  box-shadow: 0 35px 85px rgba(0, 0, 0, 0.35),
    inset 0 1px rgba(255, 255, 255, 0.035);
}

.dastopx-action__video-shell::before {
  content: "";
  position: absolute;
  top: -110px;
  left: 50%;
  width: 70%;
  height: 220px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(125, 45, 230, 0.12);
  filter: blur(80px);
  pointer-events: none;
}

/* Video Inner */

.dastopx-action__video-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.035);
  border-radius: 4px;
  background: radial-gradient(circle at 50% 42%,
      rgba(75, 36, 124, 0.45),
      transparent 58%),
    #090713;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.25);
}

.dastopx-action__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   BENEFITS HEADER
========================================================= */

.dastopx-benefit-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  max-width: 1080px;
  margin: 65px auto 30px;
}

.dastopx-benefit-head__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(151, 103, 255, 0.28));
}

.dastopx-benefit-head__line:last-child {
  transform: rotate(180deg);
}

.dastopx-benefit-head>div {
  text-align: center;
}

.dastopx-benefit-head small {
  display: block;
  margin-bottom: 7px;
  color: #8d66ee;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.7px;
}

.dastopx-benefit-head strong {
  display: block;
  color: #f1f1f5;
  font-size: 30px;
  line-height: 1.3;
  font-weight: 750;
}

/* =========================================================
   BENEFITS
========================================================= */

.dastopx-benefits {
  max-width: 1120px;
  margin: 0 auto;
}

.dastopx-benefit {
  position: relative;
  display: grid;
  grid-template-columns: 43px 1fr;
  gap: 16px;
  align-items: flex-start;
  height: 100%;
  min-height: 145px;
  padding: 25px 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: radial-gradient(circle at 0% 0%,
      rgba(90, 208, 147, 0.045),
      transparent 38%),
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.035),
      rgba(255, 255, 255, 0.012));
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
  border-radius: 30px;
  transform: translateY(-4px);
  border-color: rgba(137, 90, 221, 0.17);
  background: radial-gradient(circle at 0% 0%,
      rgba(90, 208, 147, 0.09),
      transparent 45%),
    rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(16px);
}

.dastopx-benefit::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom,
      transparent,
      rgba(90, 221, 158, 0.75),
      transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.dastopx-benefit:hover {
  transform: translateY(-4px);
  border-color: rgba(137, 90, 221, 0.17);
  background: radial-gradient(circle at 0% 0%,
      rgba(90, 208, 147, 0.09),
      transparent 45%),
    rgba(255, 255, 255, 0.025);
}

.dastopx-benefit:hover::after {
  opacity: 1;
}

/* Check Icon */

.dastopx-benefit__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 43px;
  height: 43px;
  border: 1px solid rgba(92, 222, 160, 0.18);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(0, 133, 68), rgba(0, 126, 65, 0.67));
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  box-shadow: 0 0 25px rgba(76, 203, 141, 0.05);
}

.dastopx-benefit__content {
  position: relative;
}

.dastopx-benefit__number {
  position: absolute;
  top: -9px;
  right: 0;
  color: rgba(255, 255, 255, 0);
  font-size: 28px;
  line-height: 1;
  font-weight: 900;
}

.dastopx-benefit p {
  position: relative;
  z-index: 2;
  margin: 0;
  padding-right: 12px;
  color: #ffffffe5;
  font-size: 18px;
  line-height: 1.65;
}

.dastopx-benefit p strong {
  color: #fff;
  font-weight: 750;
}

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

@media (max-width: 991.98px) {
  .dastopx-section {
    padding: 75px 0 85px;
  }

  .dastopx-stop-wrap {
    max-width: 520px;
  }

  .dastopx-header {
    margin-top: 18px;
  }

  .dastopx-callout {
    max-width: 90%;
  }

  .dastopx-action {
    margin-top: 55px;
  }

  .dastopx-action__video-shell {
    padding: 20px;
  }
}

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

@media (max-width: 575.98px) {
  .dastopx-section {
    padding: 10px 0 0px 0;
  }

  .dastopx-panel {
    padding: 35px 14px 60px;
    border-width: 4px;
    border-radius: 20px;
  }

  .dastopx-stop-wrap {
    max-width: 340px;
  }

  .dastopx-stop-img {
    margin-top: -105px;
  }

  .dastopx-title {
    font-size: 38px;
    line-height: 1.05;
    letter-spacing: -1.8px;
  }

  .dastopx-callout {
    width: calc(100% - 20px);
    max-width: none;
    margin-top: 28px;
    margin-bottom: 42px;
    padding: 18px 17px;
  }

  .dastopx-callout__icon {
    display: none;
  }

  .dastopx-callout h3 {
    font-size: 19px;
  }

  .dastopx-copy {
    padding-left: 19px;
  }

  .dastopx-copy p {
    font-size: 18px;
    line-height: 1.7;
  }

  /* Demo */

  .dastopx-action {
    margin-top: 45px;
  }

  .dastopx-action__heading {
    margin-bottom: 24px;
  }

  .dastopx-action__small {
    font-size: 17px;
  }

  .dastopx-action__title-wrap {
    gap: 4px;
  }

  .dastopx-action__pill {
    width: calc(100% - 72px);
    min-height: 43px;
    padding: 9px 12px;
    font-size: 14px;
  }

  .dastopx-action__arrow {
    flex-basis: 32px;
    width: 32px;
    height: 42px;
  }

  .dastopx-action__video-shell {
    padding: 9px;
    border-radius: 13px;
  }

  /* Benefits */

  .dastopx-benefit-head {
    margin-top: 48px;
  }

  .dastopx-benefit-head__line {
    display: none;
  }

  .dastopx-benefit-head strong {
    font-size: 19px;
  }

  .dastopx-benefit {
    min-height: 0;
    padding: 21px 18px;
  }

  .dastopx-benefit p {
    padding-right: 0;
    font-size: 18px;
  }
}

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

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

  .dastopx-benefit,
  .dastopx-action__arrow {
    transition: none;
  }
}

/* =========================================================
   DIRECTOR AI — GET AHEAD SECTION
   Unique Prefix: dag99-
========================================================= */

.dag99-section {
  position: relative;
  overflow: hidden;
  padding: 90px 0 0 0;
  background: url(../images/dag99-section.png) no-repeat center top / cover;
  isolation: isolate;
}

/* =========================================================
   BACKGROUND
========================================================= */

.dag99-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

.dag99-bg__grid {
  position: absolute;
  inset: 0;

  background-image: linear-gradient(rgba(83, 49, 166, 0.025) 1px,
      transparent 1px),
    linear-gradient(90deg, rgba(83, 49, 166, 0.025) 1px, transparent 1px);

  background-size: 46px 46px;

  mask-image: linear-gradient(to bottom,
      transparent,
      #000 18%,
      #000 80%,
      transparent);
}

.dag99-bg__glow {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.1;
}

.dag99-bg__glow--one {
  background: #7c3cff;
  top: 50px;
  left: -300px;
}

.dag99-bg__glow--two {
  background: #2c8dff;
  right: -330px;
  bottom: 50px;
}

/* =========================================================
   SPEECH BUBBLE
========================================================= */

.dag99-bubble {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;

  padding: 48px 65px 50px;

  text-align: center;
  color: #fff;

  border-radius: 30px;

  background: radial-gradient(circle at 20% 10%,
      rgba(255, 255, 255, 0.19),
      transparent 28%),
    linear-gradient(115deg, #7029ec 0%, #8a32ef 42%, #5421bd 100%);

  box-shadow: 0 30px 70px rgba(86, 35, 190, 0.2),
    0 10px 25px rgba(85, 37, 180, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.25);

  border: 1px solid rgba(79, 25, 191, 0.22);
}

/* subtle internal border */

.dag99-bubble::before {
  content: "";
  position: absolute;
  inset: 6px;

  border: 1px solid rgba(255, 255, 255, 0.23);
  border-radius: 25px;

  pointer-events: none;
}

/* arrow */

.dag99-bubble__arrow {
  position: absolute;
  width: 34px;
  height: 34px;

  bottom: -16px;
  left: 50%;

  background: #6525d4;

  transform: translateX(-50%) rotate(45deg);

  border-radius: 4px;

  z-index: -1;
}

/* eyebrow */

.dag99-bubble__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  margin-bottom: 17px;

  padding: 8px 14px;

  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 100px;

  background: rgba(255, 255, 255, 0.1);

  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 1.7px;
  color: rgba(255, 255, 255, 0.86);
}

.dag99-bubble__dot {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #cbb4ff;

  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.09),
    0 0 15px rgba(255, 255, 255, 0.7);
}

/* =========================================================
   HEADLINE
========================================================= */

.dag99-title {
  max-width: 920px;
  margin: 0 auto;
  font-size: clamp(34px, 4.3vw, 45px);
  line-height: 1.04;
  letter-spacing: -2.1px;
  font-weight: 900;
  color: #fff;
}

.dag99-title span {
  display: inline;
  color: #fff;
}

/* divider */

.dag99-divider {
  width: 75px;
  height: 2px;

  margin: 25px auto 21px;

  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.85),
      transparent);
}

/* subtitle */

.dag99-subtitle {
  max-width: 800px;

  margin: 0 auto;

  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.55;

  color: rgba(255, 255, 255, 0.9);
}

.dag99-subtitle strong {
  font-weight: 650;
}

/* =========================================================
   SUPPORTING COPY
========================================================= */

.dag99-copy {
  max-width: 850px;

  margin: 55px auto 25px;

  text-align: center;

  font-size: clamp(18px, 1.65vw, 22px);
  line-height: 1.65;
  font-weight: 500;

  letter-spacing: -0.25px;

  color: #292537;
}

/* =========================================================
   DIRECTOR VISUAL
========================================================= */

.dag99-visual {
  position: relative;

  max-width: 920px;
  min-height: 380px;

  margin: 15px auto 15px;

  display: flex;
  align-items: flex-end;
  justify-content: center;

  border-bottom: 1px solid #e7e3ef;
}

/* image */

.dag99-visual__image {
  position: relative;

  display: block;

  max-width: 100%;
  max-height: 520px;

  margin: auto;

  object-fit: contain;

  z-index: 2;
}

/* fade image bottom smoothly into section */

.dag99-visual__fade {
  position: absolute;

  left: 0;
  right: 0;
  bottom: -1px;

  height: 45px;

  z-index: 3;

  pointer-events: none;

  background: linear-gradient(to bottom,
      transparent,
      rgba(255, 255, 255, 0.96));
}

/* AI Direction Label */

.dag99-visual__label {
  position: absolute;
  top: 30px;
  left: 0;

  display: flex;
  align-items: center;
  gap: 8px;

  padding: 9px 13px;

  border: 1px solid #e5dcfb;
  border-radius: 100px;

  background: rgba(255, 255, 255, 0.9);

  box-shadow: 0 10px 30px rgba(52, 34, 91, 0.09);

  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 1.2px;

  color: #6540bd;

  z-index: 5;
}

.dag99-visual__pulse {
  width: 7px;
  height: 7px;

  border-radius: 50%;
  background: #7c43ed;

  box-shadow: 0 0 0 5px rgba(124, 67, 237, 0.1);
}

/* =========================================================
   FLOATING CHIPS
========================================================= */

.dag99-chip {
  position: absolute;

  padding: 8px 13px;

  background: rgba(255, 255, 255, 0.93);

  border: 1px solid #e8e3f0;
  border-radius: 8px;

  box-shadow: 0 10px 30px rgba(40, 28, 71, 0.08);

  font-size: 10px;
  line-height: 1;
  letter-spacing: 1px;
  font-weight: 800;

  color: #40364f;

  z-index: 4;
}

.dag99-chip--one {
  left: 2%;
  top: 45%;
  transform: rotate(-4deg);
}

.dag99-chip--two {
  right: 2%;
  top: 31%;
  transform: rotate(4deg);
}

.dag99-chip--three {
  right: 7%;
  bottom: 22%;
  transform: rotate(-2deg);
}

/* =========================================================
   BENEFITS
========================================================= */

.dag99-benefits {
  position: relative;

  max-width: 1100px;

  margin: 10px auto 0;

  padding-top: 30px;
}

/* =========================================================
   BENEFIT PILLS
========================================================= */

.dag99-pill {
  position: relative;

  min-height: 104px;
  height: 100%;

  display: flex;
  align-items: center;

  gap: 17px;

  padding: 19px 21px;

  border: 1px solid var(--dag99-border);
  border-radius: 18px;

  background: linear-gradient(135deg, #fff 0%, var(--dag99-soft) 100%);

  box-shadow: 0 12px 35px rgba(32, 23, 52, 0.055), inset 0 1px 0 #fff;

  transition: transform 0.28s ease, box-shadow 0.28s ease,
    border-color 0.28s ease;
}

.dag99-pill::after {
  content: "";

  position: absolute;

  left: 20px;
  right: 20px;
  bottom: -1px;

  height: 2px;

  opacity: 0;

  background: linear-gradient(90deg,
      transparent,
      var(--dag99-accent),
      transparent);

  transition: opacity 0.28s ease;
}

.dag99-pill:hover {
  transform: translateY(-6px);

  border-color: var(--dag99-accent);

  box-shadow: 0 22px 45px rgba(32, 23, 52, 0.1), inset 0 1px 0 #fff;
}

.dag99-pill:hover::after {
  opacity: 0.65;
}

/* icon */

.dag99-pill__icon {
  width: 58px;
  height: 58px;

  flex: 0 0 58px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #fff;

  box-shadow: 0 8px 20px rgba(39, 27, 70, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.7);

  font-size: 27px;

  transition: transform 0.28s ease, box-shadow 0.28s ease;
  border: 1px solid #eceeff;
  box-shadow: 0 10px 21px rgba(39, 27, 70, 0.26);
}

.dag99-pill:hover .dag99-pill__icon {
  transform: translateY(-2px) scale(1.06);

  box-shadow: 0 10px 21px rgba(39, 27, 70, 0.26);
}

/* text */

.dag99-pill__text {
  font-size: 17px;
  line-height: 1.3;
  font-weight: 800;

  letter-spacing: -0.3px;

  color: #17141e;
}

/* =========================================================
   INDIVIDUAL COLORS
========================================================= */

.dag99-pill--purple {
  --dag99-soft: #faf5ff;
  --dag99-border: #e9d4ff;
  --dag99-accent: #9c47ee;
}

.dag99-pill--blue {
  --dag99-soft: #f3f7ff;
  --dag99-border: #d4e2ff;
  --dag99-accent: #477ff1;
}

.dag99-pill--green {
  --dag99-soft: #f4fff7;
  --dag99-border: #d3efdb;
  --dag99-accent: #3aaa64;
}

.dag99-pill--mint {
  --dag99-soft: #f3fff9;
  --dag99-border: #d0f0df;
  --dag99-accent: #39aa73;
}

.dag99-pill--orange {
  --dag99-soft: #fff9ee;
  --dag99-border: #f6dfb5;
  --dag99-accent: #e89c27;
}

.dag99-pill--sky {
  --dag99-soft: #f2faff;
  --dag99-border: #cfeaff;
  --dag99-accent: #3899df;
}

.dag99-pill--violet {
  --dag99-soft: #faf5ff;
  --dag99-border: #e7d6fa;
  --dag99-accent: #8752d7;
}

.dag99-pill--emerald {
  --dag99-soft: #f3fff8;
  --dag99-border: #cdebd8;
  --dag99-accent: #24a65a;
}

.dag99-pill--rose {
  --dag99-soft: #fff4f7;
  --dag99-border: #f5d2dc;
  --dag99-accent: #df5078;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {
  .dag99-section {
    padding: 70px 0 80px;
  }

  .dag99-bubble {
    padding: 42px 35px 45px;
  }

  .dag99-title {
    letter-spacing: -1.5px;
  }

  .dag99-visual {
    min-height: 300px;
  }

  .dag99-chip {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .dag99-section {
    padding: 55px 0 0 0px;
  }

  .dag99-bubble {
    padding: 34px 20px 37px;

    border-radius: 22px;
  }

  .dag99-bubble::before {
    inset: 4px;
    border-radius: 18px;
  }

  .dag99-title {
    font-size: 34px;
    line-height: 1.08;
    letter-spacing: -1.2px;
  }

  .dag99-subtitle {
    font-size: 17px;
  }

  .dag99-copy {
    margin-top: 45px;

    font-size: 18px;
    line-height: 1.6;
  }

  .dag99-visual {
    min-height: 240px;
    margin-top: 5px;
  }

  .dag99-visual__label {
    display: none;
  }

  .dag99-benefits {
    padding-top: 20px;
  }

  .dag99-pill {
    min-height: 88px;

    padding: 15px 17px;

    border-radius: 15px;
  }

  .dag99-pill__icon {
    width: 50px;
    height: 50px;

    flex-basis: 50px;

    font-size: 23px;
  }

  .dag99-pill__text {
    font-size: 16px;
  }
}

@media (max-width: 399px) {
  .dag99-title {
    font-size: 30px;
  }

  .dag99-bubble {
    padding: 30px 16px 34px;
  }

  .dag99-pill {
    gap: 13px;
  }
}

/* =========================================================
   DIRECTORAI — RESEARCHED. DIRECTED. DONE.
   Unique Prefix: drdone26-
========================================================= */

.drdone26-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  padding: 100px 0 0 0px;

  background: #000 url(../images/drdone26-section.webp) no-repeat center top / cover;

  color: #fff;
}

/* =========================================================
   BACKGROUND
========================================================= */

.drdone26-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

.drdone26-bg__grid {
  position: absolute;
  inset: 0;

  opacity: 0.32;

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

  background-size: 52px 52px;

  mask-image: linear-gradient(to bottom,
      #000 0%,
      rgba(0, 0, 0, 0.7) 45%,
      transparent 100%);
}

.drdone26-bg__glow {
  position: absolute;

  width: 500px;
  height: 500px;

  border-radius: 50%;

  filter: blur(130px);
  opacity: 0.13;
}

.drdone26-bg__glow--one {
  top: 200px;
  left: -350px;
  background: #7547ff;
}

.drdone26-bg__glow--two {
  right: -380px;
  bottom: 200px;
  background: #a43cff;
}

/* =========================================================
   HEADER
========================================================= */

.drdone26-head {
  margin-bottom: 65px;
  text-align: center;
}

.drdone26-kicker {
  display: flex;
  justify-content: center;
  align-items: center;

  gap: 13px;

  margin-bottom: 18px;

  font-size: 11px;
  line-height: 1;
  font-weight: 800;

  letter-spacing: 2.4px;

  background-image: linear-gradient(to right, #b760ff, #7b7cff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.drdone26-kicker__line {
  width: 35px;
  height: 1px;

  background: linear-gradient(90deg, transparent, #8557ff);
}

.drdone26-kicker__line:last-child {
  transform: rotate(180deg);
}

/* Heading */

.drdone26-title {
  margin: 0;
  font-size: clamp(42px, 5vw, 50px);
  line-height: 0.98;
  font-weight: 900;
  letter-spacing: 0;
  color: #ffffff;
}

.drdone26-title span {
  background-image: linear-gradient(to right, #b760ff, #7b7cff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* =========================================================
   STACK
========================================================= */

.drdone26-stack {
  position: relative;

  max-width: 1160px;
  margin: 0 auto;

  display: flex;
  flex-direction: column;

  gap: 22px;
}

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

.drdone26-panel {
  position: relative;
  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;

  background: linear-gradient(120deg, #121217 0%, #0e0e13 100%);

  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);

  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.drdone26-panel--alt {
  background: linear-gradient(120deg, #17171d 0%, #111116 100%);
}

.drdone26-panel:hover {
  /* transform: translateY(-3px); */

  border-color: rgba(145, 97, 255, 0.27);

  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.36),
    0 0 50px rgba(116, 72, 255, 0.035);
}

/* Accent line */

.drdone26-panel::before {
  content: "";

  position: absolute;
  top: 0;
  left: 7%;
  right: 7%;

  height: 1px;

  background: linear-gradient(90deg,
      transparent,
      rgba(152, 105, 255, 0.4),
      transparent);

  opacity: 0.45;
}

/* =========================================================
   COPY SIDE
========================================================= */

.drdone26-copy {
  position: relative;

  height: 100%;
  min-height: 345px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 55px 42px 55px 48px;
}

/* Number */

.drdone26-num {
  position: absolute;

  top: 25px;
  right: 25px;

  font-size: 52px;
  line-height: 1;
  font-weight: 900;

  letter-spacing: -3px;

  color: rgba(255, 255, 255, 0.025);

  user-select: none;
}

/* =========================================================
   RED PAIN LINE
========================================================= */

.drdone26-pain {
  display: flex;
  align-items: flex-start;

  gap: 17px;
}

/* X */

.drdone26-x {
  width: 47px;
  height: 47px;

  flex: 0 0 47px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-top: 2px;

  border: 1px solid rgba(255, 67, 87, 0.27);
  border-radius: 50%;

  background: rgba(255, 47, 70, 0.08);

  box-shadow: inset 0 0 20px rgba(255, 48, 70, 0.045);

  color: #ff4257;

  font-size: 20px;
  line-height: 1;
  font-weight: 800;
}

/* FORGET */

.drdone26-forget {
  display: block;

  margin-bottom: 7px;

  font-size: 12px;
  line-height: 1;

  font-weight: 900;
  letter-spacing: 2.2px;

  color: #ff4a5d;
}

/* Phrase */

.drdone26-phrase {
  position: relative;

  display: inline;

  font-size: clamp(22px, 2.15vw, 29px);
  line-height: 1.2;

  font-weight: 850;
  letter-spacing: -0.7px;

  color: #ff5969;

  background-image: linear-gradient(rgba(255, 75, 94, 0.8),
      rgba(255, 75, 94, 0.8));

  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
}

/* Description */

.drdone26-desc {
  max-width: 410px;

  margin: 23px 0 0 64px;

  font-size: 18px;
  line-height: 1.65;
  font-weight: 450;

  letter-spacing: -0.15px;

  color: #aaaab5;
}

/* =========================================================
   MEDIA SIDE
========================================================= */

.drdone26-media {
  position: relative;

  height: 100%;
  min-height: 345px;

  display: flex;
  align-items: center;

  padding: 30px 30px 30px 5px;
}

/* Glow behind screenshot */

.drdone26-media::before {
  content: "";

  position: absolute;

  width: 60%;
  height: 60%;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  background: rgba(114, 67, 255, 0.17);

  filter: blur(70px);

  border-radius: 50%;

  pointer-events: none;
}

/* =========================================================
   BROWSER / APP FRAME
========================================================= */

.drdone26-browser {
  position: relative;
  overflow: hidden;

  width: 100%;

  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 15px;

  background: #08080b;

  box-shadow: 0 28px 55px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);

  z-index: 2;

  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
    border-color 0.4s ease;
}

.drdone26-panel:hover .drdone26-browser {
  transform: translateY(-4px);
  border-color: rgba(146, 99, 255, 0.32);
}

/* Browser top */

.drdone26-browser__top {
  height: 41px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 14px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.07);

  background: linear-gradient(180deg, #19191f, #111116);
}

/* dots */

.drdone26-browser__dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.drdone26-browser__dots span {
  display: block;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #44444e;
}

.drdone26-browser__dots span:first-child {
  background: #ff5365;
}

.drdone26-browser__dots span:nth-child(2) {
  background: #d99d3e;
}

.drdone26-browser__dots span:nth-child(3) {
  background: #58ad76;
}

/* Browser label */

.drdone26-browser__label {
  overflow: hidden;

  max-width: 65%;

  font-size: 9px;
  line-height: 1;

  font-weight: 800;
  letter-spacing: 1.4px;

  white-space: nowrap;
  text-overflow: ellipsis;

  color: #777783;
}

/* Screenshot */

.drdone26-browser__screen {
  position: relative;

  width: 100%;
  aspect-ratio: 16 / 9;

  overflow: hidden;

  background: linear-gradient(135deg, #101016, #08080b);
}

.drdone26-browser__screen img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}

/* Screenshot subtle overlay */

.drdone26-browser__screen::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  box-shadow: inset 0 0 35px rgba(0, 0, 0, 0.2);
}

/* =========================================================
   DESKTOP ALTERNATING RHYTHM
========================================================= */

@media (min-width: 992px) {
  /*
      Alternate rows reverse visually:
      image left / copy right.
   */

  .drdone26-panel--alt .row {
    flex-direction: row-reverse;
  }

  .drdone26-panel--alt .drdone26-media {
    padding: 30px 5px 30px 30px;
  }
}

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

@media (max-width: 991.98px) {
  .drdone26-section {
    padding: 75px 0 85px;
  }

  .drdone26-head {
    margin-bottom: 48px;
  }

  .drdone26-title {
    letter-spacing: -2px;
  }

  .drdone26-stack {
    gap: 20px;
  }

  .drdone26-copy {
    min-height: auto;

    padding: 42px 35px 25px;
  }

  .drdone26-desc {
    max-width: 620px;
  }

  .drdone26-media {
    min-height: auto;

    padding: 15px 35px 38px;
  }
}

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

@media (max-width: 767.98px) {
  .drdone26-section {
    padding: 55px 0 0 0px;
  }

  .drdone26-head {
    margin-bottom: 38px;
  }

  .drdone26-kicker {
    font-size: 9px;
    letter-spacing: 1.7px;
  }

  .drdone26-title {
    font-size: 42px;
    line-height: 1.02;

    letter-spacing: -1.7px;
  }

  .drdone26-panel {
    border-radius: 18px;
  }

  .drdone26-copy {
    padding: 34px 21px 20px;
  }

  .drdone26-num {
    top: 17px;
    right: 18px;

    font-size: 40px;
  }

  .drdone26-pain {
    gap: 13px;
  }

  .drdone26-x {
    width: 40px;
    height: 40px;

    flex-basis: 40px;

    font-size: 17px;
  }

  .drdone26-forget {
    font-size: 10px;
  }

  .drdone26-phrase {
    font-size: 22px;
    letter-spacing: -0.4px;
  }

  .drdone26-desc {
    margin: 18px 0 0 53px;

    font-size: 16px;
    line-height: 1.55;
  }

  .drdone26-media {
    padding: 12px 20px 27px;
  }

  .drdone26-browser {
    border-radius: 11px;
  }

  .drdone26-browser__top {
    height: 34px;
  }

  .drdone26-browser__label {
    font-size: 7px;
    letter-spacing: 0.8px;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 390px) {
  .drdone26-title {
    font-size: 36px;
  }

  .drdone26-copy {
    padding-left: 17px;
    padding-right: 17px;
  }

  .drdone26-media {
    padding-left: 16px;
    padding-right: 16px;
  }

  .drdone26-desc {
    margin-left: 0;
    margin-top: 18px;
  }
}

/* =========================================================
   ALWAYS-ON CREATIVE DEPARTMENT
   Reference-style White Cards
   Prefix: aonref26-
========================================================= */

.aonref26-section {
  position: relative;
  padding: 95px 0;
  overflow: hidden;
  background: linear-gradient(rgba(142, 95, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(142, 95, 255, 0.07) 1px, transparent 1px),
    #f8f3ff;
  background-size: 32px 32px;
  font-size: 18px;
  color: #111827;
}

/* =========================================================
   HEADING
========================================================= */

.aonref26-head {
  max-width: 980px;
  margin: 0 auto 52px;
}

.aonref26-title {
  margin: 0;
  color: #111318;
  font-size: clamp(40px, 5vw, 52px);
  line-height: 1.4;
  font-weight: 900;
  letter-spacing: -2px;
}

/* =========================================================
   CARD
========================================================= */

.aonref26-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  min-height: 610px;
  padding: 38px 30px 26px;
  overflow: hidden;
  border: 1px solid #cdb7ff;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 45px rgba(57, 39, 91, 0.08);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.aonref26-card:hover {
  transform: translateY(-6px);
  border-color: #b793ff;
  box-shadow: 0 26px 60px rgba(57, 39, 91, 0.13);
}

/* =========================================================
   IMAGE AREA
========================================================= */

.aonref26-card__image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 230px;
  margin-bottom: 10px;
}

.aonref26-card__image::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 190px;
  height: 190px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(142, 95, 255, 0.13),
      rgba(142, 95, 255, 0.04) 58%,
      transparent 72%);
}

.aonref26-card__image img {
  position: relative;
  z-index: 2;
  display: block;
  width: auto;
  max-width: 220px;
  max-height: 220px;
  object-fit: contain;
}

/* =========================================================
   SMALL DIVIDER
========================================================= */

.aonref26-card__divider {
  width: 58px;
  height: 3px;
  margin: 4px auto 24px;
  border-radius: 100px;
  background: linear-gradient(90deg, #c8a8ff, #8a63ee);
}

/* =========================================================
   CARD HEADING
========================================================= */

.aonref26-card h3 {
  max-width: 320px;
  margin: 0 0 18px;
  color: #111318;
  font-size: 22px;
  line-height: 1.32;
  font-weight: 850;
  letter-spacing: -0.8px;
}

/* =========================================================
   CARD TEXT
========================================================= */

.aonref26-card p {
  max-width: 330px;
  margin: 0;
  color: #303746;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 300;
}

/* =========================================================
   DOTS
========================================================= */

.aonref26-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 28px;
}

.aonref26-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #bca2ff;
}

.aonref26-dots span:nth-child(2) {
  background: #8f68ef;
}

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

@media (max-width: 991.98px) {
  .aonref26-section {
    padding: 80px 0;
  }

  .aonref26-head {
    margin-bottom: 42px;
  }

  .aonref26-card {
    min-height: 580px;
  }
}

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

@media (max-width: 575.98px) {
  .aonref26-section {
    padding: 65px 0;
    font-size: 18px;
  }

  .aonref26-title {
    font-size: 24px;
    line-height: 1.06;
    letter-spacing: -1.8px;
  }

  .aonref26-card {
    min-height: auto;
    padding: 30px 22px 24px;
    border-radius: 16px;
  }

  .aonref26-card__image {
    min-height: 200px;
  }

  .aonref26-card__image img {
    max-width: 190px;
    max-height: 190px;
  }

  .aonref26-card h3 {
    font-size: 24px;
  }

  .aonref26-card p {
    font-size: 18px;
    line-height: 1.65;
  }
}

/* ============================================
   HOLDING YOU BACK - DARK THEME
   Unique Prefix: hback27-
============================================= */

.hback27-section {
  position: relative;
  overflow: hidden;

  /* background:
      radial-gradient(
         circle at 14% 62%,
         rgba(93, 70, 255, 0.12),
         transparent 30%
      ),
      radial-gradient(
         circle at 88% 18%,
         rgba(255, 196, 64, 0.07),
         transparent 25%
      ),
      #090a0e; */
  color: #ffffff;
  font-size: 18px;
}

/* ============================================
   TITLE
============================================= */

.hback27-title {
  margin: 0;
  color: #ffffff;
  font-size: clamp(40px, 5vw, 52px);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.045em;
}

/* ============================================
   YELLOW CALLOUT
============================================= */

.hback27-callout {
  position: relative;
  max-width: 900px;
  margin: 35px auto 0;
}

.hback27-callout__inner {
  position: relative;
  z-index: 2;
  padding: 24px 45px;
  background: linear-gradient(135deg, #ffdf72 0%, #ffc94b 100%);
  color: #090909;
  font-size: 23px;
  font-weight: 800;
  line-height: 1.35;
  clip-path: polygon(2% 10%, 100% 0, 97% 100%, 8% 96%);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.34), 0 0 45px rgba(255, 201, 75, 0.08);
}

.hback27-callout::after {
  content: "";
  position: absolute;
  left: 8%;
  bottom: -14px;
  width: 0;
  height: 0;
  border-top: 24px solid #ffcf51;
  border-right: 20px solid transparent;
  transform: rotate(8deg);
}

/* ============================================
   MAIN ROW
============================================= */

.hback27-mainrow {
  margin-top: 70px;
}

/* ============================================
   LEFT VISUAL
============================================= */

.hback27-visual {
  position: relative;
  min-height: 500px;
}

.hback27-dots {
  position: absolute;
  z-index: 0;
  left: 3%;
  bottom: 0;
  width: 390px;
  height: 390px;
  border-radius: 50%;
  opacity: 0.6;
  background-image: radial-gradient(rgba(143, 112, 255, 0.52) 1.4px,
      transparent 1.4px);
  background-size: 11px 11px;
  mask-image: radial-gradient(circle, #000 38%, transparent 74%);
  -webkit-mask-image: radial-gradient(circle, #000 38%, transparent 74%);
}

.hback27-imagewrap {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 500px;
}

/* Actual image */

.hback27-image {
  display: block;
  width: 100%;
  max-width: 470px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 35px 40px rgba(0, 0, 0, 0.4));
}

/* Temporary Placeholder */

.hback27-card {
  overflow: hidden;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  background: linear-gradient(145deg,
      rgba(255, 255, 255, 0.055),
      rgba(255, 255, 255, 0.015));
  color: rgba(255, 255, 255, 0.35);
  padding: 28px 30px;
  border-radius: 15px;
}

.hback27-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(130deg,
      transparent 30%,
      rgba(255, 255, 255, 0.035),
      transparent 70%);
}

/* ============================================
   RIGHT CONTENT
============================================= */

.hback27-content {
  max-width: 690px;
  margin-left: auto;
}

.hback27-content>p {
  margin: 0 0 28px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.72;
}

/* ============================================
   FINAL EMPHASIS
============================================= */

.hback27-final {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 34px;
  padding: 27px 28px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 4px solid #ffd45c;
  background: linear-gradient(120deg,
      rgba(255, 211, 91, 0.09),
      rgba(255, 255, 255, 0.025));
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.24);
}

.hback27-final::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -80px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 209, 80, 0.08);
  filter: blur(25px);
}

.hback27-final__icon {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #ffd45c;
  color: #090909;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 0 0 7px rgba(255, 212, 92, 0.08);
}

.hback27-final p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 18px;
  line-height: 1.68;
}

.hback27-final strong {
  color: #ffffff;
  font-weight: 800;
}

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

@media (max-width: 991.98px) {
  .hback27-section {
    padding: 75px 0 85px;
  }

  .hback27-callout__inner {
    font-size: 21px;
  }

  .hback27-mainrow {
    margin-top: 55px;
  }

  .hback27-visual {
    min-height: auto;
  }

  .hback27-imagewrap {
    min-height: 430px;
  }

  .hback27-content {
    max-width: none;
    margin-left: 0;
  }
}

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

@media (max-width: 575.98px) {
  .hback27-section {
    padding: 60px 0 70px;
    font-size: 18px;
  }

  .hback27-title {
    font-size: 24px;
    line-height: 1.4;
  }

  .hback27-callout {
    margin-top: 26px;
  }

  .hback27-callout__inner {
    padding: 20px 22px;
    font-size: 18px;
    line-height: 1.45;
    clip-path: polygon(1% 7%, 100% 0, 97% 100%, 5% 96%);
  }

  .hback27-callout::after {
    left: 12%;
  }

  .hback27-mainrow {
    margin-top: 48px;
  }

  .hback27-imagewrap {
    min-height: 360px;
  }

  .hback27-placeholder {
    min-height: 340px;
  }

  .hback27-dots {
    left: 50%;
    width: 300px;
    height: 300px;
    transform: translateX(-50%);
  }

  .hback27-content>p,
  .hback27-final p {
    font-size: 18px;
    line-height: 1.65;
  }

  .hback27-final {
    gap: 13px;
    padding: 22px 18px;
  }

  .hback27-final__icon {
    width: 34px;
    height: 34px;
  }
}

/* ============================================
   REAL PROBLEM SECTION
   Unique Prefix: rprob28-
============================================= */

.rprob28-section {
  position: relative;
  overflow: hidden;
  padding: 20px 0 0px 0;

  background: url(../images/rprob28-sectio.webp) no-repeat center top / cover;

  color: #fff;
  font-size: 18px;
}

/* ============================================
   TITLE
============================================= */

.rprob28-title {
  margin: 0;
  color: #fff;
  font-size: clamp(40px, 5vw, 54px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.045em;
}

/* ============================================
   MAIN ROW
============================================= */

.rprob28-row {
  margin-top: 55px;
}

/* ============================================
   CONTENT
============================================= */

.rprob28-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

.rprob28-intro {
  margin: 0 0 34px;
  max-width: 720px;
  color: #fff;
  font-size: 18px;
  line-height: 1.72;
}

/* ============================================
   POINT
============================================= */

.rprob28-point {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  padding: 20px 22px;
  border: 1px solid rgba(173, 108, 234, 0.25);
  border-top-color: rgba(173, 108, 234, 0.25);
  border-right-color: rgba(173, 108, 234, 0.25);
  border-bottom-color: rgba(173, 108, 234, 0.25);
  border-left-color: rgba(173, 108, 234, 0.25);
  background: rgba(25, 9, 79, 0.23);
  box-shadow: 0 14px 40px rgba(18, 20, 28, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 12px;
}

.rprob28-point:last-child {
  margin-bottom: 0;
}

/* ============================================
   QUESTION ICON
============================================= */

.rprob28-point__icon {
  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;

  border-radius: 50%;

  background: #ff7f7f;

  color: #ffffff;

  font-size: 19px;
  font-weight: 800;

  box-shadow: 0 7px 18px rgba(17, 18, 23, 0.15);
}

/* ============================================
   POINT TEXT
============================================= */

.rprob28-point p {
  margin: 0;

  color: #fff;

  font-size: 18px;
  line-height: 1.66;
}

.rprob28-point strong {
  color: #fff;
  font-weight: 800;
}

.rprob28-point em {
  color: #fff;
  font-weight: 600;
}

/* ============================================
   RIGHT VISUAL
============================================= */

.rprob28-visual {
  position: relative;

  display: flex;
  align-items: flex-end;
  justify-content: center;

  min-height: 430px;
}

/* Optional decorative circle */

.rprob28-visual::before {
  content: "";

  position: absolute;

  width: 350px;
  height: 350px;

  border-radius: 50%;

  background: radial-gradient(circle,
      rgba(250, 202, 68, 0.18),
      rgba(250, 202, 68, 0.04) 55%,
      transparent 70%);

  pointer-events: none;
}

/* ============================================
   CHARACTER IMAGE
============================================= */

.rprob28-character {
  position: relative;
  z-index: 2;

  display: block;

  width: 100%;
  max-width: 390px;
  height: auto;

  object-fit: contain;

  filter: drop-shadow(0 30px 30px rgba(20, 20, 28, 0.12));
}

/* ============================================
   TEMP PLACEHOLDER
============================================= */

.rprob28-placeholder {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  max-width: 390px;
  height: 400px;

  border: 1px dashed rgba(20, 20, 25, 0.18);

  background: rgba(255, 255, 255, 0.55);

  color: rgba(20, 20, 25, 0.38);

  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* ============================================
   HOVER
============================================= */

@media (hover: hover) {
  .rprob28-point {
    transition: transform 0.3s ease, box-shadow 0.3s ease,
      border-color 0.3s ease;
  }

  .rprob28-point:hover {
    transform: translateX(6px);

    border-color: rgba(10, 10, 15, 0.14);

    box-shadow: 0 18px 45px rgba(18, 20, 28, 0.09);
  }
}

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

@media (max-width: 991.98px) {
  .rprob28-section {
    padding: 75px 0 80px;
  }

  .rprob28-row {
    margin-top: 45px;
  }

  .rprob28-content {
    max-width: none;
  }

  .rprob28-visual {
    min-height: 380px;
  }
}

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

@media (max-width: 575.98px) {
  .rprob28-section {
    padding: 58px 0 0 0px;
    font-size: 18px;
  }

  .rprob28-title {
    font-size: 38px;
    line-height: 1.08;
  }

  .rprob28-row {
    margin-top: 34px;
  }

  .rprob28-intro {
    margin-bottom: 25px;
    font-size: 18px;
    line-height: 1.65;
  }

  .rprob28-point {
    gap: 13px;
    padding: 18px 16px;
  }

  .rprob28-point__icon {
    width: 36px;
    height: 36px;
    font-size: 17px;
  }

  .rprob28-point p {
    font-size: 18px;
    line-height: 1.62;
  }

  .rprob28-visual {
    min-height: 330px;
  }

  .rprob28-placeholder {
    height: 320px;
  }

  .rprob28-visual::before {
    width: 280px;
    height: 280px;
  }
}

/* ============================================
   NOT ANYMORE SECTION
   Unique Prefix: nmore29-
============================================= */

.nmore29-section {
  position: relative;
  overflow: hidden;

  background: radial-gradient(circle at 15% 15%,
      rgba(255, 255, 255, 0.55),
      transparent 28%),
    #dff5fb;
  color: #101214;
  font-size: 18px;
  position: relative;
  padding: 95px 0 0 0;
  overflow: hidden;
  background: linear-gradient(rgba(142, 95, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(142, 95, 255, 0.07) 1px, transparent 1px),
    #f8f3ff;
  background-size: auto, auto, auto;
  background-size: 32px 32px;
  font-size: 18px;
  color: #111827;
}

/* ============================================
   TEAL TORN-PAPER RIBBON
============================================= */

.nmore29-ribbon {
  position: relative;
  display: inline-block;
  margin-bottom: 28px;
  padding: 16px 34px 17px;
  background: #0e8f88;
  color: #ffffff;
  transform: rotate(-1.2deg);
  clip-path: polygon(2% 11%,
      8% 5%,
      16% 9%,
      25% 3%,
      35% 8%,
      44% 2%,
      55% 7%,
      66% 3%,
      77% 8%,
      88% 2%,
      98% 8%,
      96% 91%,
      86% 96%,
      75% 92%,
      65% 98%,
      54% 93%,
      42% 98%,
      30% 92%,
      18% 97%,
      5% 91%);
  box-shadow: 0 16px 34px rgba(8, 93, 88, 0.16);
}

.nmore29-ribbon::after {
  content: "";
  position: absolute;
  inset: 6px 10px;
  opacity: 0.16;
  background: repeating-linear-gradient(0deg,
      rgba(255, 255, 255, 0.18) 0,
      rgba(255, 255, 255, 0.18) 1px,
      transparent 1px,
      transparent 4px);
  pointer-events: none;
}

.nmore29-ribbon span {
  position: relative;
  z-index: 2;
  display: block;
  font-size: clamp(38px, 4.7vw, 50px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

/* ============================================
   KICKER
============================================= */

.nmore29-kicker {
  margin: 0 auto 14px;
  color: #41525a;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
}

/* ============================================
   TITLE
============================================= */

.nmore29-title {
  max-width: 920px;
  margin: 0 auto;
  color: #090b0c;
  font-size: clamp(30px, 4.7vw, 26px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

/* ============================================
   GRID
============================================= */

.nmore29-grid {
  margin-top: 48px;
}

/* ============================================
   WHITE PILL CARDS
============================================= */

.nmore29-pill {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 82px;
  padding: 13px 20px 13px 14px;
  border: 1px solid rgba(25, 44, 52, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 15px 35px rgba(42, 88, 102, 0.09);
  margin-top: 20px;
}

/* ============================================
   RED X
============================================= */

.nmore29-pill__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff4239, #de1717);
  color: #ffffff;
  font-size: 31px;
  font-weight: 500;
  line-height: 1;
  box-shadow: 0 7px 16px rgba(218, 31, 31, 0.23);
}

.nmore29-pill__text {
  color: #14181a;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.35;
}

/* ============================================
   HOVER
============================================= */

@media (hover: hover) {
  .nmore29-pill {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .nmore29-pill:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 44px rgba(42, 88, 102, 0.14);
  }
}

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

@media (max-width: 991.98px) {
  .nmore29-section {
    padding: 75px 0 0 0;
  }

  .nmore29-grid {
    margin-top: 40px;
  }
}

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

@media (max-width: 575.98px) {
  .nmore29-section {
    padding: 58px 0 0px;
    font-size: 18px;
  }

  .nmore29-ribbon {
    margin-bottom: 24px;
    padding: 14px 22px 15px;
  }

  .nmore29-ribbon span {
    font-size: 18px;
  }

  .nmore29-kicker {
    font-size: 18px;
    line-height: 1.55;
  }

  .nmore29-title {
    font-size: 36px;
    line-height: 1.1;
  }

  .nmore29-grid {
    margin-top: 32px;
  }

  .nmore29-pill {
    min-height: 74px;
    padding: 11px 17px 11px 12px;
  }

  .nmore29-pill__icon {
    width: 46px;
    height: 46px;
    font-size: 28px;
  }

  .nmore29-pill__text {
    font-size: 18px;
  }
}

/* =========================================================
   DIRECTOR AI ADVANTAGE SECTION
========================================================= */

.dadv26-section {
  --dadv26-dark: #080d22;
  --dadv26-text: #11152a;
  --dadv26-muted: #41465b;
  --dadv26-purple: #754cff;
  --dadv26-blue: #4f79ff;
  --dadv26-line: #e5e8ef;

  position: relative;
  /* overflow: hidden; */
}

/* =========================================================
   MAIN WHITE CARD
========================================================= */

.dadv26-card {
  position: relative;
  max-width: 1380px;
  margin: 0 auto;
  padding: 50px 85px 42px;
  border: 1px solid rgba(20, 26, 55, 0.06);
  border-radius: 36px;
  background: linear-gradient(145deg,
      rgba(255, 255, 255, 0.99),
      rgba(253, 253, 255, 0.98));
  box-shadow: 0 0 9px 6px #00000014;
  text-align: center;
}

.dadv26-card::before {
  content: "";
  position: absolute;
  inset: 12px;

  border: 1px solid rgba(20, 26, 55, 0.045);
  border-radius: 29px;

  pointer-events: none;
}

/* =========================================================
   EYEBROW
========================================================= */

.dadv26-eyebrow {
  position: relative;
  z-index: 2;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;

  margin-bottom: 26px;

  color: var(--dadv26-purple);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.27em;
  text-transform: uppercase;
}

.dadv26-spark {
  font-size: 16px;
  text-shadow: 0 0 14px rgba(117, 76, 255, 0.35);
}

/* =========================================================
   MAIN TITLE
========================================================= */

.dadv26-title-wrap {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 28px;
}

.dadv26-title {
  margin: 0;

  color: var(--dadv26-dark);

  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;

  font-size: clamp(70px, 9vw, 130px);
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: -0.065em;
}

.dadv26-title span {
  display: inline-block;

  background: linear-gradient(120deg, #8b48ff 0%, #675bff 50%, #4c87ff 100%);

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;

  text-shadow: 0 10px 25px rgba(103, 91, 255, 0.1);
}

/* Decorative stars */

.dadv26-star {
  position: absolute;

  color: var(--dadv26-purple);

  font-size: 28px;

  text-shadow: 0 0 18px rgba(117, 76, 255, 0.4);

  animation: dadv26Float 3.2s ease-in-out infinite;
}

.dadv26-star--left {
  left: -55px;
  bottom: 5px;
}

.dadv26-star--right {
  right: -55px;
  top: -8px;

  animation-delay: 0.7s;
}

@keyframes dadv26Float {

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

  50% {
    transform: translateY(-6px) scale(1.06);
  }
}

/* =========================================================
   DESCRIPTION
========================================================= */

.dadv26-copy {
  position: relative;
  z-index: 2;

  max-width: 900px;
  margin: 0 auto;
}

.dadv26-copy p {
  margin: 0;
  color: var(--dadv26-text);
  font-size: 18px;
  line-height: 1.4;
  font-weight: 300;
}

.dadv26-copy strong {
  color: var(--dadv26-dark);
  font-weight: 800;
}

/* Divider */

.dadv26-divider {
  width: 90px;
  height: 2px;

  margin: 28px auto;

  background: linear-gradient(90deg,
      transparent,
      #8b48ff,
      #59a6ff,
      transparent);

  border-radius: 999px;
}

/* =========================================================
   CALLOUT
========================================================= */

.dadv26-callout {
  position: relative;
  z-index: 2;
  max-width: 900px;
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 30px auto 0;
  padding: 15px 30px;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 18px;
  background: linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(90deg, #a867ff, #89b6ff) border-box;
  box-shadow: 0 16px 35px rgba(101, 83, 255, 0.08);
}

/* Callout glow */

.dadv26-callout::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -1;

  border-radius: inherit;

  background: linear-gradient(90deg,
      rgba(139, 72, 255, 0.05),
      rgba(79, 121, 255, 0.03));
}

/* Icon */

.dadv26-callout-icon {
  flex: 0 0 74px;

  width: 74px;
  height: 74px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: linear-gradient(145deg, #884dff, #405fff);

  box-shadow: 0 14px 28px rgba(84, 80, 255, 0.27);
}

.dadv26-callout-icon span {
  color: #ffffff;
  font-size: 34px;
  line-height: 1;
}

/* Text */

.dadv26-callout-content p {
  margin: 0 0 2px;

  color: var(--dadv26-text);

  font-size: 22px;
  line-height: 1.3;
  font-weight: 500;
}

.dadv26-callout-content strong {
  display: block;

  background: linear-gradient(90deg, #744cff, #507bff);

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;

  font-size: 26px;
  line-height: 1.2;
  font-weight: 800;
}

/* =========================================================
   RESULT BAR
========================================================= */

.dadv26-result {
  position: relative;
  z-index: 2;
  max-width: 1160px;
  display: grid;
  grid-template-columns: 0.75fr 1px 1.55fr;
  align-items: center;
  gap: 40px;
  margin: 19px auto 0;
  padding: 15px 42px;
  border: 1px solid var(--dadv26-line);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.82);
}

.dadv26-result-item {
  display: flex;
  align-items: center;
  gap: 20px;

  text-align: left;
}

.dadv26-result-item strong {
  color: var(--dadv26-dark);

  font-size: 22px;
  line-height: 1.3;
  font-weight: 800;
}

/* Result icon */

.dadv26-result-icon {
  flex: 0 0 48px;

  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  color: var(--dadv26-purple);

  font-size: 27px;

  border: 3px solid var(--dadv26-purple);
  border-radius: 50%;
}

.dadv26-result-item--large .dadv26-result-icon {
  font-size: 19px;
}

/* Separator */

.dadv26-result-separator {
  width: 1px;
  height: 55px;

  background: #d5d9e2;
}

/* =========================================================
   HOVER DETAILS
========================================================= */

.dadv26-callout,
.dadv26-result {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.dadv26-callout:hover {
  transform: translateY(-3px);

  box-shadow: 0 22px 45px rgba(101, 83, 255, 0.12);
}

.dadv26-result:hover {
  transform: translateY(-2px);

  box-shadow: 0 15px 34px rgba(20, 26, 55, 0.06);
}

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

@media (max-width: 991px) {
  .dadv26-section {
    padding: 65px 0;
  }

  .dadv26-card {
    padding: 45px 45px 38px;
  }

  .dadv26-copy p {
    font-size: 18px;
  }

  .dadv26-result {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 26px 30px;
  }

  .dadv26-result-separator {
    width: 100%;
    height: 1px;
  }
}

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

@media (max-width: 767px) {
  .dadv26-section {
    padding: 45px 0;
  }

  .dadv26-card {
    padding: 38px 22px 25px;

    border-radius: 26px;
  }

  .dadv26-card::before {
    inset: 8px;
    border-radius: 21px;
  }

  /* Eyebrow */

  .dadv26-eyebrow {
    gap: 8px;

    margin-bottom: 25px;

    font-size: 10px;
    letter-spacing: 0.18em;
  }

  /* Title */

  .dadv26-title {
    font-size: clamp(58px, 19vw, 85px);
  }

  .dadv26-star {
    font-size: 20px;
  }

  .dadv26-star--left {
    left: -25px;
  }

  .dadv26-star--right {
    right: -25px;
  }

  /* Copy */

  .dadv26-copy p {
    font-size: 16px;
    line-height: 1.65;
  }

  .dadv26-divider {
    margin: 23px auto;
  }

  /* Callout */

  .dadv26-callout {
    flex-direction: column;
    align-items: flex-start;

    gap: 14px;

    margin-top: 35px;
    padding: 23px;

    border-radius: 15px;
  }

  .dadv26-callout-icon {
    flex-basis: 56px;

    width: 56px;
    height: 56px;
  }

  .dadv26-callout-icon span {
    font-size: 27px;
  }

  .dadv26-callout-content p {
    font-size: 17px;
  }

  .dadv26-callout-content strong {
    font-size: 21px;
  }

  /* Result */

  .dadv26-result {
    margin-top: 18px;
    padding: 22px;

    border-radius: 15px;
  }

  .dadv26-result-item {
    gap: 15px;
  }

  .dadv26-result-icon {
    flex-basis: 42px;

    width: 42px;
    height: 42px;

    font-size: 22px;
  }

  .dadv26-result-item strong {
    font-size: 17px;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 390px) {
  .dadv26-card {
    padding-left: 18px;
    padding-right: 18px;
  }

  .dadv26-title {
    font-size: 56px;
  }

  .dadv26-star {
    display: none;
  }

  .dadv26-callout {
    padding: 20px;
  }

  .dadv26-result {
    padding: 19px;
  }
}

.drlch-section {
  position: relative;
  overflow: hidden;

  padding: 100px 0 70px;

  background:
    radial-gradient(circle at 82% 35%,
      rgba(117, 82, 255, 0.16),
      transparent 27%),
    radial-gradient(circle at 15% 10%,
      rgba(41, 114, 255, 0.08),
      transparent 25%),
    #050609;

  color: #ffffff;
}


/* =====================================
   SUBTLE BACKGROUND
===================================== */

.drlch-section::before {
  content: "";
  position: absolute;
  inset: 0;

  pointer-events: none;

  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: 65px 65px;

  mask-image:
    linear-gradient(to bottom,
      transparent,
      #000 15%,
      #000 80%,
      transparent);
}


.drlch-container {
  position: relative;
  z-index: 2;
}


/* =====================================
   LEFT CONTENT
===================================== */

.drlch-content {
  max-width: 650px;
}


/* small label */

.drlch-mini-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  margin-bottom: 18px;

  font-size: 11px;
  line-height: 1;

  font-weight: 700;
  letter-spacing: 1.8px;

  color: #8d91a0;
}


.drlch-mini-label span {
  display: block;

  width: 28px;
  height: 1px;

  background: #8b70ff;

  box-shadow: 0 0 12px rgba(139, 112, 255, .6);
}


/* title */

.drlch-title {
  margin: 0 0 30px;
  font-size: clamp(30px, 4.5vw, 50px);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -1.7px;
  color: #ffffff;
}


/* =====================================
   GENERATIONS
===================================== */

.drlch-generation-list {
  display: flex;
  flex-direction: column;

  gap: 18px;

  margin-bottom: 28px;
}


.drlch-generation-item {
  display: grid;

  grid-template-columns: 10px 1fr;

  align-items: flex-start;

  gap: 14px;
}


.drlch-generation-item p {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  color: #e8e8e8;
}


.drlch-generation-item strong {
  font-weight: 700;

  color: #ffffff;
}


.drlch-dot {
  width: 7px;
  height: 7px;

  margin-top: 11px;

  border-radius: 50%;

  background: #727785;
}


.drlch-generation-active .drlch-dot {
  background: #9377ff;

  box-shadow:
    0 0 0 5px rgba(147, 119, 255, .08),
    0 0 18px rgba(147, 119, 255, .75);
}


/* =====================================
   QUOTE BOX
===================================== */

.drlch-quote {
  position: relative;
  display: flex;
  margin-top: 30px;
  padding: 11px 11px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 0 14px 14px 0;
  background: linear-gradient(90deg, rgba(134, 93, 255, .11), rgba(255, 255, 255, .025));
  box-shadow: 0 20px 55px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .04);
}


.drlch-quote-line {
  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 2px;

  background:
    linear-gradient(to bottom,
      #9b7cff,
      #4f7cff);

  box-shadow:
    0 0 20px rgba(139, 108, 255, .5);
}


.drlch-quote p {
  margin: 0;

  font-size: 18px;
  line-height: 1.65;

  font-weight: 700;

  color: #ffffff;
}


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

.drlch-intelligence {
  /* display: grid;
    grid-template-columns: 38px 1fr;

    gap: 15px; */

  margin-top: 15px;
}





.drlch-intelligence p {
  margin: 0;
  font-size: 17px;
  line-height: 1.75;
  color: #fff;
}


.drlch-intelligence strong {
  color: #ffffff;
  font-weight: 700;
}


/* =====================================
   RIGHT VISUAL
===================================== */

.drlch-visual {
  position: relative;

  min-height: 650px;

  display: flex;
  align-items: center;
  justify-content: center;

  isolation: isolate;
}


/* glow */

.drlch-visual-glow {
  position: absolute;

  width: 420px;
  height: 420px;

  border-radius: 50%;

  background:
    radial-gradient(circle,
      rgba(116, 80, 255, .27),
      rgba(65, 91, 255, .08) 45%,
      transparent 72%);

  filter: blur(20px);

  z-index: -3;
}


/* circles */

.drlch-circle {
  position: absolute;

  border-radius: 50%;

  pointer-events: none;
}


.drlch-circle-one {
  width: 440px;
  height: 440px;

  border: 1px solid rgba(143, 111, 255, .13);

  z-index: -2;
}


.drlch-circle-two {
  width: 520px;
  height: 520px;

  border: 1px dashed rgba(143, 111, 255, .09);

  z-index: -2;
}


/* =====================================
   IMAGE
===================================== */

.drlch-main-image {
  position: relative;

  z-index: 3;

  width: 86%;

  display: flex;
  justify-content: center;
}


.drlch-main-image::after {
  content: "";

  position: absolute;

  left: 10%;
  right: 10%;
  bottom: 0;

  height: 35px;

  border-radius: 50%;

  background: rgba(94, 69, 194, .33);

  filter: blur(25px);

  z-index: -1;
}


.drlch-main-image img {
  display: block;

  width: 100%;
  max-height: 600px;

  object-fit: contain;

  filter:
    drop-shadow(0 30px 35px rgba(0, 0, 0, .35));
}


/* =====================================
   FLOATING CARDS
===================================== */

.drlch-floating-card {
  position: absolute;
  z-index: 5;

  display: flex;
  align-items: center;
  gap: 11px;

  padding: 13px 15px;

  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 13px;

  background:
    linear-gradient(145deg,
      rgba(22, 23, 32, .9),
      rgba(10, 11, 16, .88));

  box-shadow:
    0 22px 65px rgba(0, 0, 0, .42),
    inset 0 1px 0 rgba(255, 255, 255, .05);

  backdrop-filter: blur(18px);
}


.drlch-floating-card-one {
  top: 20%;
  left: 0;
}


.drlch-floating-card-two {
  right: 0;
  bottom: 18%;
}


.drlch-floating-card small {
  display: block;

  margin-bottom: 3px;

  font-size: 8px;
  line-height: 1;

  font-weight: 700;
  letter-spacing: 1.2px;

  color: #737887;
}


.drlch-floating-card strong {
  display: block;

  font-size: 11px;
  line-height: 1.3;

  color: #ffffff;
}


/* live */

.drlch-live-dot {
  width: 9px;
  height: 9px;

  flex: 0 0 9px;

  border-radius: 50%;

  background: #6affbd;

  box-shadow:
    0 0 0 5px rgba(106, 255, 189, .07),
    0 0 17px rgba(106, 255, 189, .8);
}


/* AI icon */

.drlch-ai-mark {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  flex: 0 0 36px;

  border-radius: 9px;

  background:
    linear-gradient(145deg,
      #9478ff,
      #6748dc);

  box-shadow:
    0 10px 25px rgba(97, 68, 220, .35);

  font-size: 11px;
  font-weight: 800;

  color: #ffffff;
}


/* =====================================
   SPARKS
===================================== */

.drlch-spark {
  position: absolute;

  color: #9a80ff;

  text-shadow:
    0 0 18px rgba(154, 128, 255, .8);
}


.drlch-spark-one {
  top: 15%;
  right: 15%;

  font-size: 17px;
}


.drlch-spark-two {
  left: 13%;
  bottom: 13%;

  font-size: 11px;
}


/* =====================================
   BOTTOM SECTION
===================================== */

.drlch-bottom {
  position: relative;
  padding-top: 20px;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, .07)
}


/* small label */

.drlch-bottom-label {
  display: inline-block;

  margin-bottom: 16px;
  padding: 7px 13px;

  border: 1px solid rgba(145, 112, 255, .18);
  border-radius: 6px;

  background:
    linear-gradient(90deg,
      rgba(123, 87, 255, .1),
      rgba(161, 103, 255, .08));

  font-size: 10px;
  line-height: 1;

  font-weight: 700;
  letter-spacing: 1.7px;

  color: #9b83ff;
}


/* tagline */

.drlch-bottom h3 {

  margin: 0 auto;
  font-size: clamp(20px, 3.6vw, 26px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0;
  color: #ffffff;
}


/* bottom glowing line */

.drlch-bottom-line {
  width: 180px;
  height: 1px;

  margin: 30px auto 0;

  overflow: hidden;

  background: rgba(255, 255, 255, .08);
}


.drlch-bottom-line span {
  display: block;

  width: 70%;
  height: 100%;

  margin: auto;

  background:
    linear-gradient(90deg,
      transparent,
      #886cff,
      transparent);

  box-shadow:
    0 0 15px rgba(136, 108, 255, .7);
}


/* =====================================
   RESPONSIVE
===================================== */

@media (max-width: 991px) {

  .drlch-section {
    padding: 80px 0 60px;
  }

  .drlch-title {
    letter-spacing: -2px;
  }

  .drlch-content {
    max-width: 100%;
  }

  .drlch-visual {
    min-height: 560px;
    margin-top: 20px;
  }

  .drlch-main-image {
    width: 75%;
  }

  .drlch-floating-card-one {
    left: 8%;
  }

  .drlch-floating-card-two {
    right: 8%;
  }

  .drlch-bottom {
    margin-top: 45px;
  }

}


@media (max-width: 575px) {

  .drlch-section {
    padding: 65px 0 50px;
  }

  .drlch-title {
    font-size: 36px;
    line-height: 1.08;

    letter-spacing: -1.5px;
  }

  .drlch-generation-item p,
  .drlch-quote p,
  .drlch-intelligence p {
    font-size: 18px;
  }

  .drlch-visual {
    min-height: 450px;
  }

  .drlch-main-image {
    width: 92%;
  }

  .drlch-circle-one {
    width: 310px;
    height: 310px;
  }

  .drlch-circle-two {
    width: 370px;
    height: 370px;
  }

  .drlch-visual-glow {
    width: 320px;
    height: 320px;
  }

  .drlch-floating-card {
    padding: 10px 12px;
  }

  .drlch-floating-card-one {
    left: 0;
    top: 15%;
  }

  .drlch-floating-card-two {
    right: 0;
    bottom: 12%;
  }

  .drlch-bottom {
    padding-top: 42px;
  }

  .drlch-bottom h3 {
    font-size: 28px;
  }

}

/* =========================================================
   DIRECTOR AI — THIRD GENERATION
========================================================= */

.dgen26,
.dgen26 * {
  box-sizing: border-box;
}

.dgen26 {
  position: relative;
  overflow: hidden;

  padding: 90px 0 0 0;

  color: #17141e;

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

  background:
    url("../images/dgen26.png") no-repeat center top / cover;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.dgen26__header {
  margin-bottom: 52px;
}

.dgen26__title {
  margin: 0;

  color: #ffffff;

  font-size: clamp(34px, 4.2vw, 46px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -2px;
}

.dgen26__title span {
  color: #7147f7;
}


/* =========================================================
   GENERATION CARDS
========================================================= */

.dgen26__card {
  position: relative;

  margin-bottom: 22px;
  padding: 42px 48px;

  overflow: hidden;

  border: 1px solid rgba(112, 71, 247, 0.35);
  border-radius: 18px;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.dgen26__card:hover {
  transform: translateY(-4px);
}


/* Light Cards */
.dgen26__card--light {
  background:
    linear-gradient(125deg,
      #ffffff 0%,
      #faf8ff 48%,
      #f3efff 100%);

  box-shadow:
    0 22px 55px rgba(62, 40, 119, 0.08);
}


/* Dark Card */
.dgen26__card--dark {
  background:
    radial-gradient(circle at 78% 50%,
      rgba(111, 53, 247, 0.25),
      transparent 40%),
    #12031e;

  border-color: rgba(151, 102, 255, 0.48);

  box-shadow:
    0 26px 60px rgba(29, 7, 46, 0.21);
}


/* =========================================================
   IMAGE AREA
========================================================= */

.dgen26__media {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 240px;
}

.dgen26__image {
  display: block;

  width: 100%;
  max-width: 500px;
  height: auto;

  object-fit: contain;

  transition:
    transform 0.4s ease;
}

.dgen26__card:hover .dgen26__image {
  transform: scale(1.025);
}


/* =========================================================
   CONTENT
========================================================= */

.dgen26__content {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 460px;
}

.dgen26__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 16px;
  padding: 7px 14px;

  border-radius: 100px;

  background: #7147f7;
  color: #ffffff;

  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 1.3px;

  box-shadow:
    0 8px 22px rgba(113, 71, 247, 0.24);
}

.dgen26__tag--white {
  background: #ffffff;
  color: #4f28ba;

  box-shadow: none;
}


/* =========================================================
   BODY COPY — 18PX
========================================================= */

.dgen26__copy {
  margin: 0;

  color: #403b48;

  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
}

.dgen26__copy strong {
  color: #17131d;

  font-weight: 800;
}

.dgen26__copy--white {
  color: rgba(255, 255, 255, 0.78);
}

.dgen26__copy--white strong {
  color: #ffffff;
}


/* =========================================================
   QUOTE
========================================================= */

.dgen26__quote {
  position: relative;

  margin-top: 24px;
  padding: 18px 20px 18px 24px;

  overflow: hidden;

  border: 1px solid rgba(113, 71, 247, 0.17);
  border-radius: 10px;

  background: rgba(255, 255, 255, 0.82);

  color: #211b2b;

  font-size: 18px;
  font-weight: 700;
  line-height: 1.55;

  box-shadow:
    0 12px 30px rgba(57, 34, 109, 0.06);
}

.dgen26__quote::before {
  position: absolute;
  top: 0;
  left: 0;

  width: 4px;
  height: 100%;

  content: "";

  background: #7147f7;
}


/* =========================================================
   LIVE TREND INTELLIGENCE
========================================================= */

.dgen26__intelligence {
  margin-top: 45px;
  padding: 38px 44px;

  border: 1px solid rgba(113, 71, 247, 0.2);
  border-radius: 18px;

  background:
    linear-gradient(125deg,
      #ffffff,
      #f7f4ff);

  box-shadow:
    0 20px 55px rgba(59, 37, 115, 0.07);
}

.dgen26__intelligence-mark {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 82px;
  height: 82px;

  border-radius: 20px;

  background:
    linear-gradient(145deg,
      #7147f7,
      #8c64ff);

  box-shadow:
    0 15px 32px rgba(113, 71, 247, 0.28);
}

.dgen26__intelligence-mark span {
  color: #ffffff;

  font-size: 34px;
}

.dgen26__intelligence-content p {
  margin: 0;

  color: #46404e;

  font-size: 18px;
  font-weight: 400;
  line-height: 1.75;
}

.dgen26__intelligence-content strong {
  color: #6036dc;

  font-weight: 800;
}


/* =========================================================
   FINAL STATEMENT
========================================================= */

.dgen26__footer {
  margin-top: 22px;
  padding: 28px 25px;

  border: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: 15px;

  background:
    linear-gradient(105deg,
      #10031b,
      #281241);

  text-align: center;

  box-shadow:
    0 22px 50px rgba(27, 7, 45, 0.18);
}

.dgen26__footer strong {
  color: #ffffff;

  font-size: clamp(19px, 2vw, 25px);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.6px;
}


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

@media (max-width: 991.98px) {

  .dgen26 {
    padding: 70px 0 0 0;
  }

  .dgen26__card {
    padding: 35px 30px;
  }

  .dgen26__media {
    min-height: 200px;
  }

  .dgen26__title {
    letter-spacing: -1.5px;
  }

}


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

@media (max-width: 767.98px) {

  .dgen26 {
    padding: 55px 0 0 0;

    background-position: center top;
  }

  .dgen26__header {
    margin-bottom: 34px;
  }

  .dgen26__title {
    font-size: 35px;
    line-height: 1.22;
    letter-spacing: -1.3px;
  }


  /* Cards */
  .dgen26__card {
    padding: 25px 20px;

    border-radius: 15px;
  }


  /* Image */
  .dgen26__media {
    min-height: auto;
  }

  .dgen26__image {
    max-width: 430px;
  }


  /* Content */
  .dgen26__content {
    max-width: none;
  }


  /* Keep body text at 18px */
  .dgen26__copy,
  .dgen26__quote,
  .dgen26__intelligence-content p {
    font-size: 18px;
  }


  /* Intelligence */
  .dgen26__intelligence {
    padding: 26px 22px;
  }

  .dgen26__intelligence-mark {
    width: 68px;
    height: 68px;

    border-radius: 17px;
  }

  .dgen26__intelligence-mark span {
    font-size: 27px;
  }


  /* Footer */
  .dgen26__footer {
    padding: 23px 17px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

  .dgen26__title {
    font-size: 31px;
  }

  .dgen26__card {
    padding: 22px 16px;
  }

}

/* =========================================================
   DIRECTOR AI — CHAIN OF COMMAND
========================================================= */

.dcmd26,
.dcmd26 * {
  box-sizing: border-box;
}

.dcmd26 {
  position: relative;
  overflow: hidden;

  padding: 105px 0;

  background: #fff url(../images/dcmd26.png) no-repeat center top / cover;

  color: #17141d;

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


/* =========================================================
   PREMIUM BACKGROUND DETAILS
========================================================= */

.dcmd26::before {
  position: absolute;
  inset: 0;

  content: "";

  pointer-events: none;

  background-image:
    linear-gradient(rgba(25, 20, 37, 0.025) 1px,
      transparent 1px),
    linear-gradient(90deg,
      rgba(25, 20, 37, 0.025) 1px,
      transparent 1px);

  background-size: 52px 52px;

  opacity: 0.65;
}

.dcmd26::after {
  position: absolute;
  top: -300px;
  left: 50%;

  width: 850px;
  height: 520px;

  content: "";

  transform: translateX(-50%);

  border-radius: 50%;

  background:
    rgba(111, 71, 247, 0.07);

  filter: blur(110px);

  pointer-events: none;
}


/* =========================================================
   HEADER
========================================================= */

.dcmd26__header {
  position: relative;
  z-index: 2;

  margin-bottom: 54px;
}

.dcmd26__kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  margin-bottom: 18px;
  padding: 8px 14px;

  border: 1px solid rgba(100, 66, 218, 0.15);
  border-radius: 100px;

  background:
    rgba(111, 71, 247, 0.06);

  color: #6740dc;

  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 1.5px;
}

.dcmd26__kicker span {
  position: relative;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #7147f7;
}

.dcmd26__kicker span::after {
  position: absolute;
  inset: -4px;

  content: "";

  border: 1px solid rgba(113, 71, 247, 0.25);
  border-radius: 50%;
}

.dcmd26__heading {
  margin: 0 auto;
  color: #18151d;
  font-size: clamp(36px, 4vw, 46px);
  font-weight: 850;
  line-height: 1.14;
  letter-spacing: -2.2px;
}

.dcmd26__heading em {
  display: block;

  margin-top: 4px;

  color: #7046ed;

  font-style: normal;
}


/* =========================================================
   TOP COMPARISON HEADER
========================================================= */

.dcmd26__compare-head {
  position: relative;
  z-index: 3;

  overflow: hidden;

  border: 1px solid rgba(39, 31, 58, 0.1);
  border-bottom: 0;

  border-radius: 24px 24px 0 0;

  background: #ffffff;

  box-shadow:
    0 20px 55px rgba(31, 22, 54, 0.07);
}

.dcmd26__compare-title {
  position: relative;

  display: flex;
  align-items: center;
  gap: 15px;

  min-height: 98px;
  padding: 22px 30px;
}

.dcmd26__compare-title--old {
  border-right: 1px solid rgba(38, 32, 51, 0.1);

  background:
    linear-gradient(135deg,
      #ffffff,
      #f5f5f7);
}

.dcmd26__compare-title--ai {
  background:
    radial-gradient(circle at 85% 10%,
      rgba(140, 87, 255, 0.26),
      transparent 35%),
    linear-gradient(120deg,
      #14091f,
      #1d0d2e);
}

.dcmd26__compare-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 50px;

  width: 50px;
  height: 50px;

  border: 1px solid #d9d9de;
  border-radius: 14px;

  background: #ededf0;
  color: #68666d;

  font-size: 10px;
  font-weight: 900;
}

.dcmd26__compare-icon--ai {
  border-color: rgba(255, 255, 255, 0.13);

  background:
    linear-gradient(135deg,
      #7147f7,
      #a269ff);

  color: #ffffff;

  font-size: 21px;

  box-shadow:
    0 10px 30px rgba(113, 71, 247, 0.38);
}

.dcmd26__compare-title span {
  display: block;

  margin-bottom: 5px;

  color: #96939c;

  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 1.3px;
}

.dcmd26__compare-title--ai span {
  color: #ae8cff;
}

.dcmd26__compare-title h3 {
  margin: 0;

  color: #25222a;

  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.65px;
}

.dcmd26__compare-title--ai h3 {
  color: #ffffff;
}


/* Live badge */
.dcmd26__live {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin-left: auto;
  padding: 7px 10px;

  border: 1px solid rgba(171, 133, 255, 0.18);
  border-radius: 100px;

  background: rgba(125, 77, 245, 0.11);
  color: #bca2ff;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.7px;
}

.dcmd26__live i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #9c72ff;

  box-shadow:
    0 0 0 4px rgba(156, 114, 255, 0.12),
    0 0 16px #8a5fff;
}


/* =========================================================
   BOARD
========================================================= */

.dcmd26__board {
  position: relative;
  z-index: 2;

  overflow: hidden;

  border: 1px solid rgba(39, 31, 58, 0.1);

  border-radius: 0 0 24px 24px;

  background: #ffffff;

  box-shadow:
    0 35px 90px rgba(31, 22, 54, 0.1);
}

.dcmd26__board-glow {
  position: absolute;
  top: -100px;
  right: -120px;

  width: 420px;
  height: 420px;

  border-radius: 50%;

  background: rgba(117, 72, 246, 0.14);

  filter: blur(110px);

  pointer-events: none;
}


/* =========================================================
   LANES
========================================================= */

.dcmd26__lane {
  position: relative;

  height: 100%;
  padding: 36px 34px 32px;
}

.dcmd26__lane--old {
  background:
    linear-gradient(145deg,
      #fafafa 0%,
      #f4f4f6 100%);

  border-right: 1px solid rgba(36, 31, 47, 0.1);
}

.dcmd26__lane--ai {
  background:
    radial-gradient(circle at 90% 12%,
      rgba(121, 73, 245, 0.24),
      transparent 32%),
    radial-gradient(circle at 15% 76%,
      rgba(64, 146, 255, 0.08),
      transparent 30%),
    linear-gradient(155deg,
      #12081b 0%,
      #190b27 52%,
      #0e0715 100%);
}


/* =========================================================
   WORKFLOW ITEM
========================================================= */

.dcmd26__item {
  position: relative;

  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 13px;
}


/* =========================================================
   VERTICAL RAIL
========================================================= */

.dcmd26__rail {
  position: relative;

  display: flex;
  justify-content: center;
}

.dcmd26__rail i {
  position: absolute;
  top: 38px;
  bottom: -13px;

  width: 1px;

  background:
    linear-gradient(to bottom,
      #d4d3d8,
      #e5e4e8);
}

.dcmd26__lane--ai .dcmd26__rail i {
  width: 2px;

  background:
    linear-gradient(to bottom,
      #8458f7,
      rgba(132, 88, 247, 0.18));

  box-shadow:
    0 0 13px rgba(126, 82, 246, 0.35);
}


/* =========================================================
   NODE
========================================================= */

.dcmd26__node {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  border: 1px solid #d8d7dc;
  border-radius: 10px;

  background: #eeeeef;
  color: #8d8b92;

  font-size: 9px;
  font-weight: 800;
}

.dcmd26__lane--ai .dcmd26__node {
  border-color: rgba(154, 112, 255, 0.28);

  background:
    linear-gradient(145deg,
      rgba(123, 74, 244, 0.25),
      rgba(123, 74, 244, 0.09));

  color: #b99cff;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 20px rgba(111, 67, 228, 0.08);
}


/* =========================================================
   STEP CARD
========================================================= */

.dcmd26__step {
  position: relative;

  display: flex;
  align-items: center;
  gap: 12px;

  min-height: 59px;

  margin-bottom: 13px;
  padding: 12px 14px;

  border: 1px solid #e0dfe3;
  border-radius: 12px;

  background:
    rgba(255, 255, 255, 0.82);

  box-shadow:
    0 6px 18px rgba(31, 28, 37, 0.025);

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.dcmd26__lane--old .dcmd26__step:hover {
  transform: translateX(3px);

  border-color: #cbc9cf;
}


/* AI step */
.dcmd26__lane--ai .dcmd26__step {
  border-color:
    rgba(147, 102, 255, 0.17);

  background:
    linear-gradient(110deg,
      rgba(126, 77, 246, 0.11),
      rgba(255, 255, 255, 0.027));

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.dcmd26__lane--ai .dcmd26__step:hover {
  transform: translateX(5px);

  border-color:
    rgba(161, 120, 255, 0.42);

  background:
    linear-gradient(110deg,
      rgba(126, 77, 246, 0.18),
      rgba(255, 255, 255, 0.04));

  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.12);
}


/* =========================================================
   OWNER BADGES
========================================================= */

.dcmd26__owner {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  min-width: 38px;
  height: 24px;
  padding: 0 7px;

  border-radius: 6px;

  background: #e4e4e6;
  color: #77767c;

  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.7px;
}

.dcmd26__owner--system {
  background: #dedde1;
  color: #77757d;
}

.dcmd26__owner--ai {
  border: 1px solid rgba(147, 105, 255, 0.17);

  background:
    rgba(125, 77, 245, 0.17);

  color: #bba2ff;
}

.dcmd26__owner--user {
  border: 1px solid rgba(255, 255, 255, 0.14);

  background:
    rgba(255, 255, 255, 0.09);

  color: #ffffff;
}


/* =========================================================
   STEP TEXT
========================================================= */

.dcmd26__step strong {
  color: #4e4b52;

  font-size: 18px;
  font-weight: 650;
  line-height: 1.4;
}

.dcmd26__lane--ai .dcmd26__step strong {
  color: #f5f1fa;
}


/* =========================================================
   USER INPUT / APPROVAL
========================================================= */

.dcmd26__step--user {
  border-color:
    rgba(171, 139, 255, 0.36) !important;

  background:
    linear-gradient(110deg,
      rgba(124, 77, 244, 0.28),
      rgba(124, 77, 244, 0.07)) !important;
}

.dcmd26__input-mark {
  margin-left: auto;

  color: #9276ae;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
}

.dcmd26__step--approve {
  border-color:
    rgba(165, 122, 255, 0.48) !important;

  background:
    linear-gradient(110deg,
      rgba(126, 76, 246, 0.3),
      rgba(83, 205, 255, 0.06)) !important;

  box-shadow:
    0 10px 28px rgba(77, 38, 159, 0.14) !important;
}


/* =========================================================
   CHECK ICON
========================================================= */

.dcmd26__check,
.dcmd26__approve-check {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 27px;
  height: 27px;
  margin-left: auto;

  border-radius: 50%;

  font-size: 11px;
  font-weight: 900;
}

.dcmd26__check {
  background: #e7e6e9;
  color: #737177;
}

.dcmd26__approve-check {
  background:
    linear-gradient(135deg,
      #8154fb,
      #a675ff);

  color: #ffffff;

  box-shadow:
    0 7px 20px rgba(118, 69, 241, 0.38);
}


/* =========================================================
   LAST ITEMS
========================================================= */

.dcmd26__item--last .dcmd26__step {
  margin-bottom: 0;
}


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

.dcmd26__lane-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;

  margin-top: 29px;
  padding: 22px 3px 0;

  border-top:
    1px solid rgba(38, 33, 46, 0.09);
}

.dcmd26__lane-foot span {
  color: #99969e;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.15px;
}

.dcmd26__lane-foot strong {
  color: #55525a;

  font-size: 18px;
  font-weight: 850;
}

.dcmd26__lane-foot--ai {
  border-color:
    rgba(255, 255, 255, 0.09);
}

.dcmd26__lane-foot--ai span {
  color: #826d97;
}

.dcmd26__lane-foot--ai strong {
  color: #b797ff;

  text-shadow:
    0 0 25px rgba(132, 80, 250, 0.22);
}


/* =========================================================
   FINAL STATEMENT
========================================================= */

.dcmd26__final {
  position: relative;
  z-index: 3;

  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 25px;

  margin-top: 36px;
  padding: 25px 29px;

  overflow: hidden;

  border: 1px solid rgba(112, 71, 247, 0.2);
  border-radius: 18px;

  background:
    linear-gradient(110deg,
      #ffffff,
      #f7f4ff,
      #ffffff);

  box-shadow:
    0 22px 60px rgba(47, 31, 91, 0.08);
}

.dcmd26__final::before {
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;

  height: 1px;

  content: "";

  background:
    linear-gradient(90deg,
      transparent,
      #8053f2,
      transparent);
}

.dcmd26__final-side {
  display: flex;
  align-items: baseline;
  gap: 6px;

  padding-right: 23px;

  border-right:
    1px solid rgba(38, 29, 54, 0.1);
}

.dcmd26__final-side span {
  color: #7147f7;

  font-size: 33px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -2px;
}

.dcmd26__final-side small {
  color: #95919b;

  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1px;
}

.dcmd26__final-copy p {
  margin: 0 0 2px;

  color: #77727d;

  font-size: 18px;
  line-height: 1.5;
}

.dcmd26__final-copy strong {
  color: #201a28;

  font-size: 20px;
  font-weight: 850;
  line-height: 1.4;
}

.dcmd26__final-symbol {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 46px;
  height: 46px;

  border-radius: 13px;

  background:
    linear-gradient(135deg,
      #7147f7,
      #9b69ff);

  color: #ffffff;

  font-size: 20px;

  box-shadow:
    0 12px 28px rgba(113, 71, 247, 0.28);
}


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

@media (max-width: 991.98px) {

  .dcmd26 {
    padding: 75px 0;
  }

  .dcmd26__header {
    margin-bottom: 40px;
  }

  .dcmd26__compare-head {
    border-radius: 20px 20px 0 0;
  }

  .dcmd26__compare-title--old {
    border-right: 0;
    border-bottom:
      1px solid rgba(38, 32, 51, 0.1);
  }

  .dcmd26__lane--old {
    border-right: 0;
    border-bottom:
      1px solid rgba(38, 31, 51, 0.12);
  }

  .dcmd26__lane {
    padding: 32px 28px;
  }

}


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

@media (max-width: 767.98px) {

  .dcmd26 {
    padding: 58px 0;
  }

  .dcmd26__heading {
    font-size: 34px;
    line-height: 1.18;
    letter-spacing: -1.4px;
  }

  .dcmd26__compare-title {
    min-height: auto;

    padding: 19px 18px;
  }

  .dcmd26__compare-icon {
    flex-basis: 44px;

    width: 44px;
    height: 44px;

    border-radius: 12px;
  }

  .dcmd26__compare-title h3 {
    font-size: 19px;
  }

  .dcmd26__live {
    display: none;
  }

  .dcmd26__lane {
    padding: 25px 17px;
  }

  .dcmd26__item {
    grid-template-columns: 35px 1fr;
    gap: 9px;
  }

  .dcmd26__node {
    width: 30px;
    height: 30px;

    border-radius: 8px;
  }

  .dcmd26__rail i {
    top: 34px;
  }

  .dcmd26__step {
    gap: 9px;

    min-height: 55px;

    padding: 11px 10px;
  }

  .dcmd26__step strong {
    font-size: 16px;
  }

  .dcmd26__owner {
    min-width: 34px;

    padding: 0 5px;
  }

  .dcmd26__lane-foot {
    align-items: flex-start;
    flex-direction: column;

    gap: 6px;
  }

  .dcmd26__lane-foot strong {
    font-size: 18px;
  }

  .dcmd26__final {
    grid-template-columns: auto 1fr;
    gap: 16px;

    padding: 20px 18px;
  }

  .dcmd26__final-symbol {
    display: none;
  }

  .dcmd26__final-copy p {
    font-size: 17px;
  }

  .dcmd26__final-copy strong {
    font-size: 18px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

  .dcmd26__heading {
    font-size: 30px;
  }

  .dcmd26__lane {
    padding: 22px 12px;
  }

  .dcmd26__item {
    grid-template-columns: 31px 1fr;
    gap: 7px;
  }

  .dcmd26__node {
    width: 27px;
    height: 27px;

    font-size: 8px;
  }

  .dcmd26__rail i {
    top: 31px;
  }

  .dcmd26__step {
    padding: 10px 8px;
  }

  .dcmd26__step strong {
    font-size: 15px;
  }

  .dcmd26__owner {
    min-width: 30px;
    height: 21px;

    font-size: 7px;
  }

}

/* =========================================================
   DIRECTOR AI — WITHOUT / WITH COMPARISON
========================================================= */

.dside26,
.dside26 * {
  box-sizing: border-box;
}

.dside26 {
  position: relative;
  overflow: hidden;

  padding: 20px 0 105px;

  background: #fff url(../images/dside26.png) no-repeat center top / cover;

  color: #17141c;

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


/* =========================================================
   SUBTLE BACKGROUND GRID
========================================================= */

.dside26::before {
  position: absolute;
  inset: 0;

  content: "";

  pointer-events: none;

  background-image:
    linear-gradient(rgba(40, 32, 60, 0.025) 1px,
      transparent 1px),
    linear-gradient(90deg,
      rgba(40, 32, 60, 0.025) 1px,
      transparent 1px);

  background-size: 50px 50px;

  mask-image:
    linear-gradient(to bottom,
      transparent 0%,
      #000 18%,
      #000 82%,
      transparent 100%);

  opacity: 0.8;
}


/* =========================================================
   HEADER
========================================================= */

.dside26__header {
  position: relative;
  z-index: 2;

  margin-bottom: 54px;
}

.dside26__title {
  max-width: 850px;
  margin: 0 auto;

  color: #151218;

  font-size: clamp(36px, 4vw, 50px);
  font-weight: 850;
  line-height: 1.16;
  letter-spacing: -2px;
}

.dside26__title span {
  display: block;

  margin-top: 5px;

  color: #6f46ed;
}


/* =========================================================
   COMPARISON
========================================================= */

.dside26__comparison {
  position: relative;
  z-index: 3;

  max-width: 1140px;
  margin: 0 auto;
}


/* =========================================================
   VS BADGE
========================================================= */

.dside26__vs {
  position: absolute;
  z-index: 20;

  top: 87px;
  left: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 54px;
  height: 54px;

  transform: translateX(-50%);

  border: 5px solid #ffffff;
  border-radius: 50%;

  background:
    linear-gradient(145deg,
      #17131e,
      #2b2435);

  box-shadow:
    0 12px 32px rgba(27, 20, 38, 0.18),
    0 0 0 1px rgba(24, 20, 30, 0.07);
}

.dside26__vs span {
  color: #ffffff;

  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.7px;
}


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

.dside26__card {
  position: relative;

  height: 100%;
  min-height: 650px;

  padding: 34px;

  overflow: hidden;

  border-radius: 24px;

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.dside26__card:hover {
  transform: translateY(-5px);
}


/* =========================================================
   WITHOUT
========================================================= */

.dside26__card--without {
  border: 1px solid rgba(228, 81, 98, 0.15);

  background:
    linear-gradient(145deg,
      #fffafa 0%,
      #fff1f2 100%);

  box-shadow:
    0 28px 70px rgba(124, 43, 54, 0.08);
}

.dside26__card--without:hover {
  box-shadow:
    0 35px 85px rgba(124, 43, 54, 0.12);
}


/* =========================================================
   WITH DIRECTOR AI
========================================================= */

.dside26__card--with {
  border: 1px solid rgba(27, 179, 121, 0.18);

  background:
    linear-gradient(145deg,
      #f8fffc 0%,
      #eafaf3 100%);

  box-shadow:
    0 28px 70px rgba(16, 111, 77, 0.1);
}

.dside26__card--with:hover {
  box-shadow:
    0 35px 90px rgba(16, 111, 77, 0.15);
}


/* =========================================================
   CARD GLOW
========================================================= */

.dside26__card-glow {
  position: absolute;
  top: -130px;
  right: -120px;

  width: 300px;
  height: 300px;

  border-radius: 50%;

  pointer-events: none;

  filter: blur(75px);
}

.dside26__card--without .dside26__card-glow {
  background: rgba(238, 86, 105, 0.10);
}

.dside26__card--with .dside26__card-glow {
  background: rgba(32, 192, 132, 0.13);
}


/* =========================================================
   CARD HEADER
========================================================= */

.dside26__card-head {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  gap: 15px;

  margin-bottom: 26px;
}

.dside26__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 52px;

  width: 52px;
  height: 52px;

  border-radius: 15px;

  font-weight: 900;
}

.dside26__card-icon--without {
  border: 1px solid rgba(230, 73, 91, 0.12);

  background: #ffe1e5;
  color: #eb475c;

  box-shadow:
    0 9px 23px rgba(225, 61, 82, 0.1);
}

.dside26__card-icon--without span {
  font-size: 24px;
  line-height: 1;
}

.dside26__card-icon--with {
  border: 1px solid rgba(32, 177, 119, 0.12);

  background:
    linear-gradient(145deg,
      #d6f8e9,
      #c8f2de);

  color: #0e9b62;

  box-shadow:
    0 9px 25px rgba(27, 152, 101, 0.12);
}

.dside26__card-icon--with span {
  font-size: 22px;
}

.dside26__card-title {
  margin: 0;

  color: #d9344c;

  font-size: 23px;
  font-weight: 850;
  line-height: 1.25;
  letter-spacing: -0.7px;
}

.dside26__card-title--with {
  color: #0b925b;
}


/* =========================================================
   STATUS METER
========================================================= */

.dside26__meter {
  position: relative;
  z-index: 2;

  margin-bottom: 27px;
}

.dside26__meter-track {
  position: relative;

  width: 100%;
  height: 7px;

  overflow: hidden;

  border-radius: 100px;

  background: rgba(222, 56, 77, 0.13);
}

.dside26__meter-track--with {
  background: rgba(20, 166, 105, 0.12);
}

.dside26__meter-fill {
  display: block;

  height: 100%;

  border-radius: inherit;
}

.dside26__meter-fill--without {
  width: 78%;

  background:
    linear-gradient(90deg,
      #f16072,
      #dc304a);

  box-shadow:
    0 0 16px rgba(223, 50, 75, 0.18);
}

.dside26__meter-fill--with {
  width: 100%;

  background:
    linear-gradient(90deg,
      #43cf91,
      #14a667);

  box-shadow:
    0 0 16px rgba(20, 166, 103, 0.18);
}


/* =========================================================
   LIST
========================================================= */

.dside26__list {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  gap: 12px;
}


/* =========================================================
   LIST ITEM
========================================================= */

.dside26__item {
  position: relative;

  display: flex;
  align-items: flex-start;
  gap: 13px;

  width: 100%;
  padding: 17px 18px;

  border: 1px solid rgba(226, 85, 101, 0.08);
  border-radius: 13px;

  background:
    rgba(255, 255, 255, 0.72);

  box-shadow:
    0 7px 20px rgba(119, 48, 56, 0.025);

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.dside26__item:hover {
  transform: translateX(4px);

  border-color: rgba(224, 67, 86, 0.18);

  box-shadow:
    0 10px 25px rgba(119, 48, 56, 0.05);
}


/* Positive items */
.dside26__item--good {
  border-color: rgba(31, 173, 115, 0.08);

  background:
    rgba(255, 255, 255, 0.74);

  box-shadow:
    0 7px 20px rgba(19, 111, 74, 0.025);
}

.dside26__item--good:hover {
  transform: translateX(4px);

  border-color: rgba(26, 167, 106, 0.2);

  background: rgba(255, 255, 255, 0.9);

  box-shadow:
    0 10px 27px rgba(19, 111, 74, 0.055);
}


/* =========================================================
   X / CHECK MARK
========================================================= */

.dside26__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 25px;

  width: 25px;
  height: 25px;

  margin-top: 1px;

  border-radius: 50%;

  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.dside26__mark--bad {
  border: 1px solid rgba(224, 68, 87, 0.1);

  background: #ffe3e7;
  color: #ef5367;
}

.dside26__mark--good {
  border: 1px solid rgba(20, 165, 103, 0.1);

  background: #d9f6e8;
  color: #0ba263;
}


/* =========================================================
   NORMAL TEXT — 18PX
========================================================= */

.dside26__item p {
  margin: 0;

  color: #3e3943;

  font-size: 18px;
  font-weight: 500;
  line-height: 1.55;
}

.dside26__card--with .dside26__item p {
  color: #243d33;
}


/* =========================================================
   PREMIUM TOP EDGE
========================================================= */

.dside26__card::after {
  position: absolute;
  top: 0;
  left: 14%;
  right: 14%;

  height: 1px;

  content: "";

  pointer-events: none;
}

.dside26__card--without::after {
  background:
    linear-gradient(90deg,
      transparent,
      rgba(236, 81, 100, 0.5),
      transparent);
}

.dside26__card--with::after {
  background:
    linear-gradient(90deg,
      transparent,
      rgba(22, 170, 106, 0.52),
      transparent);
}


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

@media (max-width: 991.98px) {

  .dside26 {
    padding: 75px 0;
  }

  .dside26__header {
    margin-bottom: 42px;
  }

  .dside26__vs {
    display: none;
  }

  .dside26__card {
    min-height: auto;

    padding: 30px;
  }

}


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

@media (max-width: 767.98px) {

  .dside26 {
    padding: 58px 0;
  }

  .dside26__header {
    margin-bottom: 34px;
  }

  .dside26__title {
    font-size: 34px;
    line-height: 1.2;
    letter-spacing: -1.3px;
  }

  .dside26__card {
    padding: 23px 18px;

    border-radius: 19px;
  }

  .dside26__card-head {
    gap: 12px;

    margin-bottom: 22px;
  }

  .dside26__card-icon {
    flex-basis: 46px;

    width: 46px;
    height: 46px;

    border-radius: 13px;
  }

  .dside26__card-title {
    font-size: 21px;
  }

  .dside26__meter {
    margin-bottom: 22px;
  }

  .dside26__item {
    gap: 11px;

    padding: 15px 14px;

    border-radius: 11px;
  }

  .dside26__item p {
    font-size: 18px;
    line-height: 1.5;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

  .dside26__title {
    font-size: 30px;
  }

  .dside26__card {
    padding: 20px 14px;
  }

  .dside26__item {
    padding: 14px 11px;
  }

  .dside26__mark {
    flex-basis: 23px;

    width: 23px;
    height: 23px;
  }

  .dside26__item p {
    font-size: 17px;
  }

}

/* =========================================================
   DIRECTOR AI — 4 STEPS
========================================================= */

.dai4steps,
.dai4steps * {
  box-sizing: border-box;
}

.dai4steps {
  position: relative;
  overflow: hidden;

  padding: 100px 0 120px;

  background:
    radial-gradient(circle at 3% 30%,
      rgba(119, 31, 181, 0.18),
      transparent 24%),
    radial-gradient(circle at 97% 72%,
      rgba(121, 22, 91, 0.14),
      transparent 23%),
    #020203;

  color: #ffffff;

  font-family:
    "Inter",
    Arial,
    sans-serif;
  background: #fff url(../images/stepsection.png) no-repeat center top / cover;
  border-radius: 150px;
}


/* =========================================================
   HEADER
========================================================= */

.dai4steps__header {
  margin-bottom: 80px;
}

.dai4steps__title {
  margin: 0;

  color: #ffffff;

  font-size: clamp(38px, 4vw, 54px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -2px;
}

.dai4steps__title span {
  display: block;

  color: #a23cff;
}

.dai4steps__subhead {
  max-width: 900px;

  margin: 25px auto 0;

  color: rgba(255, 255, 255, 0.78);

  font-size: 18px;
  font-weight: 500;
  line-height: 1.65;
}


/* =========================================================
   EACH STEP STAGE
========================================================= */

.dai4steps__stage {
  position: relative;

  width: 100%;
  min-height: 500px;


}


/* =========================================================
   TEXT PANEL
========================================================= */

.dai4steps__text-panel {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;

  width: 53%;
  min-height: 445px;

  padding: 65px 80px 65px 55px;

  overflow: hidden;

  border: 1px solid rgb(67, 28, 186);

  background:
    radial-gradient(circle at 0% 100%,
      rgba(112, 19, 160, 0.13),
      transparent 40%),
    rgba(0, 0, 0, 0.90);
}


/* =========================================================
   CONTENT
========================================================= */

.dai4steps__content {
  position: relative;
  z-index: 3;

  width: 100%;
  max-width: 460px;
}


/* =========================================================
   STEP LABEL
========================================================= */

.dai4steps__step-top {
  display: inline-block;
  align-items: center;
  gap: 12px;
  margin-bottom: 17px;
  background-color: #fff;
  padding: 6px 25px;
  border-radius: 5px;

}

.dai4steps__step-label {
  color: #a72dff;

  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}

.dai4steps__step-line {
  display: block;

  width: 50px;
  height: 1px;

  background:
    linear-gradient(90deg,
      #9d20f0,
      transparent);
}


/* =========================================================
   STEP TITLE
========================================================= */

.dai4steps__step-title {
  margin: 0 0 34px;

  color: #ffffff;

  font-size: clamp(28px, 2.7vw, 36px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -1px;
}


/* =========================================================
   NORMAL TEXT = 18PX
========================================================= */

.dai4steps__step-copy {
  max-width: 435px;
  margin: 0;

  color: rgba(255, 255, 255, 0.92);

  font-size: 18px;
  font-weight: 400;
  line-height: 1.52;
}


/* =========================================================
   LARGE STEP NUMBER
========================================================= */

.dai4steps__big-num {
  position: absolute;
  right: 10%;
  bottom: 20px;
  color: rgba(82, 33, 229, 0.75);
  font-size: 76px;
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -5px;
  pointer-events: none;
}


/* =========================================================
   IMAGE PANEL
   Separate + overlapping like your reference
========================================================= */

.dai4steps__media-panel {
  position: absolute;
  z-index: 5;
  top: 30px;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52%;
  min-height: 348px;

  padding: 30px;

  overflow: hidden;

  border: 1px solid rgb(67, 28, 186);

  background:
    radial-gradient(circle at 50% 50%,
      rgba(73, 32, 129, 0.10),
      transparent 46%),
    #030306;

  box-shadow:
    0 35px 85px rgba(0, 0, 0, 0.45),
    0 0 50px rgba(111, 25, 171, 0.055);

  transition:
    transform 0.4s ease,
    border-color 0.4s ease;
  border-radius: 20px;
}

.dai4steps__stage:hover .dai4steps__media-panel {
  transform: translateY(-5px);

  border-color: rgb(67, 28, 186);

  border-radius: 20px;
}


/* =========================================================
   IMAGE
========================================================= */

.dai4steps__image {
  display: block;

  width: 100%;
  max-width: 100%;
  height: auto;

  object-fit: contain;

  transition: transform 0.45s ease;
}

.dai4steps__stage:hover .dai4steps__image {
  transform: scale(1.015);
}


/* =========================================================
   REVERSE STEP
   Screenshot left, content right
========================================================= */

.dai4steps__stage--reverse .dai4steps__text-panel {
  margin-left: auto;

  padding:
    65px 55px 65px 80px;
}

.dai4steps__stage--reverse .dai4steps__media-panel {
  right: auto;
  left: 0;
}

.dai4steps__stage--reverse .dai4steps__big-num {
  right: auto;
  right: 10%;
}


/* =========================================================
   SMALL PREMIUM CORNER DETAILS
========================================================= */

.dai4steps__text-panel::before,
.dai4steps__media-panel::before {
  position: absolute;
  top: -1px;
  left: -1px;

  width: 48px;
  height: 1px;

  content: "";

  background: #bf4cff;
}

.dai4steps__text-panel::after,
.dai4steps__media-panel::after {
  position: absolute;
  top: -1px;
  left: -1px;

  width: 1px;
  height: 48px;

  content: "";

  background: #bf4cff;
}


/* =========================================================
   DESKTOP — MORE REFERENCE-LIKE OVERLAP
========================================================= */

@media (min-width: 1200px) {

  .dai4steps__stage:nth-of-type(odd) .dai4steps__media-panel {
    right: -20px;
  }

  .dai4steps__stage--reverse .dai4steps__media-panel {
    left: -20px;
    right: auto;
  }

}


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

@media (max-width: 991.98px) {

  .dai4steps {
    padding: 75px 0 85px;
  }

  .dai4steps__header {
    margin-bottom: 55px;
  }


  /* No absolute overlap on tablet */
  .dai4steps__stage {
    display: flex;
    flex-direction: column;

    min-height: 0;

    margin-bottom: 55px;
  }

  .dai4steps__text-panel,
  .dai4steps__stage--reverse .dai4steps__text-panel {
    order: 1;

    width: calc(100% - 45px);
    min-height: auto;

    margin: 0;

    padding: 45px 40px 70px;
  }

  .dai4steps__media-panel,
  .dai4steps__stage--reverse .dai4steps__media-panel {
    position: relative;

    order: 2;

    top: auto;
    right: auto;
    left: auto;

    width: calc(100% - 45px);
    min-height: 300px;

    margin-top: -28px;
    margin-left: auto;

    padding: 20px;
  }

  .dai4steps__stage--reverse .dai4steps__media-panel {
    margin-right: auto;
    margin-left: 0;
  }

}


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

@media (max-width: 767.98px) {

  .dai4steps {
    padding: 58px 0 65px;
    border-radius: 50px;
  }

  .dai4steps__header {
    margin-bottom: 42px;
  }

  .dai4steps__title {
    font-size: 35px;
    line-height: 1.14;
    letter-spacing: -1.3px;
  }

  .dai4steps__subhead {
    font-size: 18px;
    line-height: 1.55;
  }


  /* Panels */
  .dai4steps__text-panel,
  .dai4steps__stage--reverse .dai4steps__text-panel {
    width: calc(100% - 20px);

    padding: 34px 23px 65px;
  }

  .dai4steps__media-panel,
  .dai4steps__stage--reverse .dai4steps__media-panel {
    /* width: calc(100% - 20px); */
    width: calc(100%);
    min-height: 220px;

    margin-top: 30px;

    padding: 13px;
  }


  /* Typography */
  .dai4steps__step-label {
    font-size: 14px;
  }

  .dai4steps__step-title {
    margin-bottom: 20px;

    font-size: 27px;
  }

  .dai4steps__step-copy {
    font-size: 18px;
    line-height: 1.6;
  }


  /* Big number */
  .dai4steps__big-num,
  .dai4steps__stage--reverse .dai4steps__big-num {
    right: 17px;
    bottom: 15px;
    left: auto;

    font-size: 60px;
  }

}


/* =========================================================
   320PX MOBILE
========================================================= */

@media (max-width: 390px) {

  .dai4steps__title {
    font-size: 30px;
  }

  .dai4steps__text-panel,
  .dai4steps__stage--reverse .dai4steps__text-panel {
    padding:
      30px 18px 60px;
  }

  .dai4steps__step-title {
    font-size: 24px;
  }

  .dai4steps__step-copy,
  .dai4steps__subhead {
    font-size: 17px;
  }

}

/* =========================================================
   DIRECTOR AI — FACELESS REAL PROOF
========================================================= */

.dfreal26,
.dfreal26 * {
  box-sizing: border-box;
}

.dfreal26 {
  position: relative;
  overflow: hidden;

  padding: 100px 0 110px;

  background:
    radial-gradient(circle at 12% 18%,
      rgba(132, 49, 239, 0.12),
      transparent 25%),
    radial-gradient(circle at 88% 65%,
      rgba(98, 41, 210, 0.09),
      transparent 27%),
    #030304;


  color: #ffffff;

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


/* =========================================================
   BACKGROUND DETAIL
========================================================= */

.dfreal26::before {
  position: absolute;
  inset: 0;

  content: "";

  pointer-events: none;

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

  background-size: 52px 52px;

  opacity: .4;
}


/* =========================================================
   HEADER
========================================================= */

.dfreal26__header {
  position: relative;
  z-index: 2;

  margin-bottom: 62px;
}


.dfreal26__eyebrow {
  margin-bottom: 17px;

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

  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}


.dfreal26__title {
  max-width: 1200px;
  margin: 0 auto;
  color: #ffffff;
  font-size: clamp(36px, 4.7vw, 50px);
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: -2.5px;
}


.dfreal26__title span {
  display: block;

  background:
    linear-gradient(90deg,
      #a335ff 0%,
      #cf2fff 45%,
      #7a5cff 100%);

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;
}


/* Accent line */
.dfreal26__divider {
  width: 95px;
  height: 3px;

  margin: 25px auto;

  border-radius: 100px;

  background:
    linear-gradient(90deg,
      transparent,
      #b52cff,
      transparent);

  box-shadow:
    0 0 24px rgba(181, 44, 255, .35);
}


.dfreal26__subtitle {
  max-width: 780px;
  margin: 23px auto 0;

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

  font-size: 18px;
  line-height: 1.65;
}


.dfreal26__intro {
  max-width: 850px;
  margin: 0 auto;

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

  font-size: 18px;
  line-height: 1.7;
}


.dfreal26__intro strong {
  color: #ffffff;
  font-weight: 750;
}


/* =========================================================
   GRID
========================================================= */

.dfreal26__grid {
  position: relative;
  z-index: 2;

  max-width: 1180px;
  margin: 0 auto;
}


/* =========================================================
   PROOF CARD
========================================================= */

.dfreal26__proof {
  position: relative;

  height: 100%;
  padding: 18px;

  overflow: hidden;

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

  border-radius: 13px;

  background:
    linear-gradient(145deg,
      rgba(255, 255, 255, .045),
      rgba(255, 255, 255, .015));

  box-shadow:
    0 28px 65px rgba(0, 0, 0, .4),
    inset 0 1px 0 rgba(255, 255, 255, .035);

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


/* purple edge glow */
.dfreal26__proof::before {
  position: absolute;
  top: -80px;
  right: -80px;

  width: 180px;
  height: 180px;

  content: "";

  border-radius: 50%;

  background:
    rgba(156, 43, 244, .10);

  filter: blur(55px);

  pointer-events: none;
}


/* =========================================================
   CARD TOP
========================================================= */

.dfreal26__proof-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 13px;
}


.dfreal26__proof-label {
  display: inline-flex;
  align-items: center;

  padding: 6px 10px;

  border:
    1px solid rgba(169, 94, 255, .17);

  border-radius: 100px;

  background:
    rgba(132, 65, 224, .09);

  color: #b986ff;

  font-size: 9px;
  font-weight: 850;
  letter-spacing: 1px;
}


.dfreal26__proof-label::before {
  width: 6px;
  height: 6px;

  margin-right: 6px;

  content: "";

  border-radius: 50%;

  background: #a64cff;

  box-shadow:
    0 0 10px rgba(166, 76, 255, .65);
}


.dfreal26__proof-num {
  color: rgba(255, 255, 255, .25);

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
}


/* =========================================================
   IMAGE FRAME
========================================================= */

.dfreal26__image {
  position: relative;

  width: 100%;

  overflow: hidden;

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

  border-radius: 9px;

  background: #111014;

  box-shadow:
    0 14px 35px rgba(0, 0, 0, .28);
}


.dfreal26__image img {
  display: block;

  width: 100%;
  height: auto;

  object-fit: contain;

  transition:
    transform .45s ease;
}


/* =========================================================
   PREMIUM HOVER
========================================================= */

@media (hover: hover) and (pointer: fine) {

  .dfreal26__proof:hover {
    z-index: 5;

    transform:
      translateY(-7px);

    border-color:
      rgba(168, 84, 255, .55);

    box-shadow:
      0 36px 85px rgba(0, 0, 0, .53),
      0 0 45px rgba(136, 48, 235, .08),
      inset 0 1px 0 rgba(255, 255, 255, .05);
  }


  .dfreal26__proof:hover .dfreal26__image img {
    transform: scale(1.015);
  }

}


/* =========================================================
   ALTERNATING CARD ACCENTS
========================================================= */

.dfreal26__grid>div:nth-child(4n + 2) .dfreal26__proof,
.dfreal26__grid>div:nth-child(4n + 3) .dfreal26__proof {
  border-color:
    rgba(104, 89, 255, .2);
}


.dfreal26__grid>div:nth-child(4n + 2) .dfreal26__proof::before,
.dfreal26__grid>div:nth-child(4n + 3) .dfreal26__proof::before {
  background:
    rgba(76, 91, 255, .1);
}


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

@media (max-width: 991.98px) {

  .dfreal26 {
    padding: 75px 0 85px;
  }

  .dfreal26__header {
    margin-bottom: 46px;
  }

  .dfreal26__proof {
    padding: 15px;
  }

}


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

@media (max-width: 767.98px) {

  .dfreal26 {
    padding: 58px 0 68px;
  }


  .dfreal26__header {
    margin-bottom: 36px;
  }


  .dfreal26__eyebrow {
    margin-bottom: 13px;

    font-size: 16px;
  }


  .dfreal26__title {
    font-size: 34px;
    line-height: 1.14;
    letter-spacing: -1.4px;
  }


  .dfreal26__subtitle,
  .dfreal26__intro {
    font-size: 18px;
    line-height: 1.55;
  }


  .dfreal26__divider {
    margin:
      20px auto;
  }


  .dfreal26__proof {
    padding: 13px;

    border-radius: 11px;
  }


  .dfreal26__proof-top {
    margin-bottom: 10px;
  }


  .dfreal26__image {
    border-radius: 8px;
  }

}


/* =========================================================
   SMALL MOBILE — 320PX+
========================================================= */

@media (max-width: 390px) {

  .dfreal26__title {
    font-size: 30px;
  }


  .dfreal26__eyebrow {
    font-size: 15px;
  }


  .dfreal26__subtitle,
  .dfreal26__intro {
    font-size: 17px;
  }


  .dfreal26__proof {
    padding: 10px;
  }

}

/* =========================================================
   DIRECTOR AI - 24/7 CREATIVE TEAM
   UNIQUE PREFIX: dai365-
========================================================= */

.dai365-section {
  --dai365-navy: #11183f;
  --dai365-navy-2: #171f51;

  --dai365-purple: #873fe7;
  --dai365-purple-2: #6f4de7;

  --dai365-blue: #5578ef;
  --dai365-blue-2: #3e91f4;

  --dai365-coral: #ff6664;

  --dai365-text: #141526;
  --dai365-muted: #62677c;

  --dai365-border: #e4e6f0;
  --dai365-white: #ffffff;

  position: relative;
  overflow: hidden;

  background:
    radial-gradient(circle at 8% 15%,
      rgba(132, 65, 228, 0.065),
      transparent 23%),
    radial-gradient(circle at 92% 45%,
      rgba(70, 137, 241, 0.065),
      transparent 24%),
    #ffffff;

  color: var(--dai365-text);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 18px;
  line-height: 1.65;
}


.dai365-section *,
.dai365-section *::before,
.dai365-section *::after {
  box-sizing: border-box;
}


/* =========================================
   BACKGROUND GRID
========================================= */

.dai365-section::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background-image:
    linear-gradient(rgba(18, 24, 62, 0.024) 1px,
      transparent 1px),
    linear-gradient(90deg,
      rgba(18, 24, 62, 0.024) 1px,
      transparent 1px);

  background-size: 58px 58px;

  -webkit-mask-image:
    linear-gradient(to bottom,
      rgba(0, 0, 0, 0.3),
      transparent 34%,
      transparent 70%,
      rgba(0, 0, 0, 0.15));

  mask-image:
    linear-gradient(to bottom,
      rgba(0, 0, 0, 0.3),
      transparent 34%,
      transparent 70%,
      rgba(0, 0, 0, 0.15));
}


.dai365-wrap {
  position: relative;
  z-index: 2;

  max-width: 1220px;
  margin: 0 auto;
}


/* =========================================
   LOGO
========================================= */

.dai365-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 28px;
}


.dai365-logo img {
  display: block;

  width: 235px;
  max-width: 70vw;

  height: auto;
}


/* =========================================
   TYPOGRAPHY
========================================= */

.dai365-title {
  margin: 0 auto;
  color: var(--dai365-navy);
  font-size: clamp(30px, 5vw, 42px);
  line-height: 1.3;
  letter-spacing: -2.4px;
  font-weight: 900;
}


.dai365-subtitle {
  margin:
    24px auto 0;

  color: var(--dai365-muted);

  font-size: clamp(19px,
      2vw,
      24px);

  line-height: 1.5;
}


.dai365-gradient-text {
  background:
    linear-gradient(90deg,
      var(--dai365-purple),
      var(--dai365-blue),
      var(--dai365-coral));

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;

  color: transparent;
}


.dai365-part-title {
  margin-left: auto;
  margin-right: auto;
  color: var(--dai365-navy);
  font-size: clamp(35px, 4.4vw, 44px);
  line-height: 1.3;
  letter-spacing: -1.8px;
  font-weight: 900;
}


.dai365-copy {
  color: #444a61;

  font-size: 18px;

  line-height: 1.7;
}


/* =========================================
   PART 1
========================================= */

.dai365-part-one {
  position: relative;

  padding:
    100px 0px 0px;

  background: #fff url(../images/dai365-part-one.webp) no-repeat center top / cover;

}


/* MAIN PROBLEM CARD */

.dai365-problem-card {
  position: relative;

  margin-top: 52px;

  padding: 18px;

  overflow: hidden;

  background:
    rgba(255,
      255,
      255,
      0.96);

  border:
    1px solid rgba(27,
      33,
      79,
      0.11);

  border-radius: 30px;

  box-shadow:
    0 30px 70px rgba(18,
      24,
      63,
      0.10),
    0 4px 12px rgba(18,
      24,
      63,
      0.035);
}


.dai365-problem-card::before {
  content: "";

  position: absolute;

  width: 300px;
  height: 300px;

  left: -150px;
  top: -150px;

  border-radius: 50%;

  background:
    radial-gradient(circle,
      rgba(133,
        63,
        231,
        0.16),
      transparent 68%);

  pointer-events: none;
}


.dai365-problem-inner {
  position: relative;
  z-index: 2;

  overflow: hidden;

  min-height: 490px;

  background:
    linear-gradient(135deg,
      #ffffff 0%,
      #fbfbff 100%);

  border-radius: 22px;
}


/* LEFT CONTENT */

.dai365-problem-copy {
  padding:
    50px 40px 50px 48px;
}


.dai365-lead-line {
  margin-bottom: 18px;

  color: var(--dai365-navy);

  font-size: 24px;

  line-height: 1.3;

  font-weight: 850;
}


/* LISTS */

.dai365-problem-list,
.dai365-benefit-list {
  margin:
    26px 0;

  padding: 0;

  list-style: none;
}


.dai365-problem-list li,
.dai365-benefit-list li {
  display: flex;
  align-items: flex-start;

  gap: 13px;

  margin-bottom: 14px;

  font-size: 18px;

  line-height: 1.5;
}


.dai365-x {
  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 27px;
  height: 27px;

  margin-top: 1px;

  border-radius: 8px;

  background:
    rgba(255,
      86,
      92,
      0.10);

  color: #f04452;

  font-size: 16px;

  font-weight: 900;
}


.dai365-exhausted {
  margin:
    28px 0 0;

  color: var(--dai365-navy);

  font-size: 22px;

  font-weight: 900;
}


/* RIGHT IMAGE */

.dai365-problem-media {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  height: 100%;
  min-height: 490px;

  padding: 38px;

  border-left:
    1px solid #ebecf3;

  background:
    radial-gradient(circle at 50% 50%,
      rgba(108,
        76,
        229,
        0.08),
      transparent 55%);
}


.dai365-problem-media::before {
  content: "";

  position: absolute;

  width: 72%;

  aspect-ratio: 1 / 1;

  border-radius: 50%;

  border:
    1px dashed rgba(111,
      76,
      228,
      0.22);
}


.dai365-problem-media img {
  position: relative;
  z-index: 2;

  display: block;

  width: auto;
  max-width: 100%;

  height: auto;
  max-height: 420px;

  object-fit: contain;

  filter:
    drop-shadow(0 22px 25px rgba(20,
        26,
        66,
        0.10));
}


/* =========================================
   SECTION CONNECTOR
========================================= */

.dai365-connector {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  max-width: 1120px;

  margin: 0 auto;

  padding:
    16px 20px;
}


.dai365-connector::before,
.dai365-connector::after {
  content: "";

  flex: 1;

  height: 1px;

  background:
    repeating-linear-gradient(90deg,
      #d6d8e3 0,
      #d6d8e3 4px,
      transparent 4px,
      transparent 10px);
}


.dai365-arrow {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 56px;
  height: 56px;

  margin:
    0 20px;

  border-radius: 50%;

  background: #ffffff;

  border:
    1px solid #e5e7f1;

  color: var(--dai365-purple);

  font-size: 27px;

  font-weight: 900;

  box-shadow:
    0 10px 30px rgba(16,
      21,
      60,
      0.09);
}


/* =========================================
   PART 2
========================================= */

.dai365-part-two {
  padding:
    72px 20px 82px;
}


/* PILL */

.dai365-stop-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  max-width: 100%;

  margin-bottom: 28px;

  padding:
    11px 22px;

  border-radius: 999px;

  color: #5740b9;

  background:
    linear-gradient(90deg,
      rgba(132,
        63,
        231,
        0.09),
      rgba(84,
        116,
        238,
        0.08));

  border:
    1px solid rgba(111,
      76,
      228,
      0.32);

  font-size: 17px;

  font-weight: 800;
}


.dai365-stop-pill::before {
  content: "";

  flex: 0 0 11px;

  width: 11px;
  height: 11px;

  border-radius: 50%;

  background:
    linear-gradient(135deg,
      var(--dai365-purple),
      var(--dai365-blue));

  box-shadow:
    0 0 0 5px rgba(113,
      75,
      228,
      0.08);
}


.dai365-limit-copy {
  max-width: 900px;

  margin: 0 auto;

  color: #565c72;

  font-size: 19px;

  line-height: 1.65;
}


.dai365-shift {
  display: inline-block;

  margin:
    25px 0 14px;

  background:
    linear-gradient(90deg,
      var(--dai365-purple),
      var(--dai365-blue));

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;

  font-size: 19px;

  font-weight: 900;
}


/* SOLUTION BOX */

.dai365-solution-box {
  position: relative;

  margin-top: 54px;

  padding: 36px;

  overflow: hidden;

  border-radius: 32px;

  background:
    linear-gradient(135deg,
      rgba(248,
        248,
        255,
        0.98),
      #ffffff 46%,
      #fbfcff);

  border:
    1px solid #e6e7f0;

  box-shadow:
    0 35px 85px rgba(20,
      26,
      66,
      0.09);
}


.dai365-solution-box::before {
  content: "";

  position: absolute;

  width: 360px;
  height: 360px;

  top: -180px;
  right: -130px;

  border-radius: 50%;

  background:
    radial-gradient(circle,
      rgba(89,
        117,
        239,
        0.13),
      transparent 67%);

  pointer-events: none;
}


/* DASHBOARD */

.dai365-dashboard-wrap {
  position: relative;
  z-index: 2;

  padding: 12px;

  border-radius: 24px;

  background:
    linear-gradient(135deg,
      rgba(132,
        63,
        231,
        0.18),
      rgba(83,
        118,
        239,
        0.10),
      rgba(255,
        101,
        100,
        0.08));
}


.dai365-dashboard-inner {
  padding: 12px;

  border-radius: 18px;

  /* background: #ffffff;

    box-shadow:
        0 20px 40px
        rgba(
            19,
            25,
            64,
            0.10
        ); */
}


.dai365-dashboard-inner img {
  display: block;

  width: 100%;
  height: auto;

  max-height: 530px;

  object-fit: contain;

  border-radius: 13px;
}


/* SOLUTION COPY */

.dai365-solution-copy {
  position: relative;
  z-index: 2;

  padding:
    22px 18px 22px 26px;
}


.dai365-solution-copy h3 {
  margin: 0 0 24px;
  color: var(--dai365-navy);
  font-size: clamp(20px, 2.6vw, 22px);
  line-height: 1.4;
  font-weight: 900;
}


.dai365-check {
  flex: 0 0 27px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 27px;
  height: 27px;

  margin-top: 1px;

  border-radius: 50%;

  background:
    linear-gradient(135deg,
      var(--dai365-purple),
      var(--dai365-blue));

  color: #ffffff;

  font-size: 14px;

  font-weight: 900;

  box-shadow:
    0 7px 18px rgba(111,
      76,
      228,
      0.18);
}


.dai365-final-copy {
  margin-top: 29px;

  color: #4d5369;

  font-size: 18px;

  line-height: 1.7;
}


/* =========================================
   PART 3
========================================= */

.dai365-part-three {
  position: relative;

  padding:
    80px 0px 0px;
}


.dai365-part-three-inner {
  position: relative;

  padding:
    58px 42px 46px;

  overflow: hidden;

  border-radius: 38px;

  background:
    linear-gradient(180deg,
      rgba(249,
        249,
        255,
        0.96),
      #ffffff);

  border:
    1px solid #e7e8f1;

  box-shadow:
    0 38px 90px rgba(20,
      26,
      66,
      0.08);
}


.dai365-part-three-inner::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 5px;

  background:
    linear-gradient(90deg,
      var(--dai365-purple),
      var(--dai365-blue),
      var(--dai365-coral));
}


.dai365-team-title {
  margin: 0 auto;
  color: var(--dai365-navy);
  font-size: clamp(30px, 4.2vw, 41px);
  line-height: 1.4;
  letter-spacing: -1.6px;
  font-weight: 900;
}


.dai365-team-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  max-width: 900px;

  margin-top: 25px;

  padding:
    10px 22px;

  border:
    1px solid rgba(37,
      42,
      85,
      0.20);

  border-radius: 999px;

  background: #ffffff;

  color: #42475d;

  font-size: 17px;

  line-height: 1.45;

  box-shadow:
    0 8px 25px rgba(20,
      26,
      66,
      0.045);
}


.dai365-team-copy {
  max-width: 850px;

  margin:
    22px auto 0;

  color: #5d6277;

  font-size: 18px;

  line-height: 1.65;
}


/* =========================================
   BOTTOM CARDS
========================================= */

.dai365-goal-grid {
  margin-top: 44px;
}


.dai365-goal-card {
  position: relative;

  height: 100%;
  min-height: 255px;

  padding:
    30px 22px 27px;

  overflow: hidden;

  text-align: center;

  border-radius: 24px;

  background: #ffffff;

  border:
    1px solid #e3e5ef;

  box-shadow:
    0 18px 45px rgba(21,
      27,
      67,
      0.075);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}


.dai365-goal-card::before {
  content: "";

  position: absolute;

  left: 50%;
  top: -75px;

  width: 170px;
  height: 170px;

  transform:
    translateX(-50%);

  border-radius: 50%;

  background:
    radial-gradient(circle,
      rgba(123,
        68,
        229,
        0.13),
      transparent 68%);
}


.dai365-goal-card:hover {
  transform: translateY(-8px);

  border-color:
    rgba(112,
      75,
      229,
      0.28);

  box-shadow:
    0 27px 60px rgba(21,
      27,
      67,
      0.13);
}


/* ICON HOLDER */

.dai365-icon-box {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 96px;
  height: 96px;

  margin:
    0 auto 22px;

  border-radius: 28px;

  background:
    linear-gradient(145deg,
      #f4efff,
      #edf3ff);

  border:
    1px solid rgba(111,
      75,
      229,
      0.12);

  box-shadow:
    inset 0 1px 0 rgba(255,
      255,
      255,
      0.9),
    0 12px 26px rgba(36,
      42,
      92,
      0.07);
}


.dai365-icon-box img {
  display: block;



  object-fit: contain;
}


.dai365-goal-card h4 {
  position: relative;
  z-index: 2;

  max-width: 230px;

  margin: 0 auto;

  color: var(--dai365-navy);

  font-size: 18px;

  line-height: 1.38;


}


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

@media (max-width: 991.98px) {

  .dai365-part-one {
    padding-top: 75px;
  }


  .dai365-title {
    letter-spacing: -1.5px;
  }


  .dai365-problem-copy {
    padding:
      40px 32px;
  }


  .dai365-problem-media {
    min-height: 420px;

    border-left: 0;

    border-top:
      1px solid #ebecf3;
  }


  .dai365-solution-copy {
    padding:
      38px 5px 10px;
  }


  .dai365-part-three-inner {
    padding:
      50px 28px 38px;
  }

}


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

@media (max-width: 767.98px) {

  .dai365-section {
    font-size: 17px;
  }


  .dai365-part-one,
  .dai365-part-two,
  .dai365-part-three {
    padding-left: 14px;
    padding-right: 14px;
  }


  .dai365-part-one {
    padding-top: 58px;
  }


  .dai365-title {
    font-size: 39px;

    letter-spacing: -1.25px;
  }


  .dai365-subtitle {
    margin-top: 17px;

    font-size: 19px;
  }


  .dai365-problem-card {
    margin-top: 35px;

    padding: 8px;

    border-radius: 24px;
  }


  .dai365-problem-inner {
    border-radius: 18px;
  }


  .dai365-problem-copy {
    padding:
      32px 22px 26px;
  }


  .dai365-lead-line {
    font-size: 21px;
  }


  .dai365-problem-list li,
  .dai365-benefit-list li,
  .dai365-copy,
  .dai365-final-copy,
  .dai365-team-copy {
    font-size: 17px;
  }


  .dai365-problem-media {
    min-height: 340px;

    padding: 25px;
  }


  .dai365-stop-pill {
    padding:
      10px 15px;

    font-size: 15px;
  }


  .dai365-limit-copy {
    font-size: 17px;
  }


  .dai365-part-title {
    font-size: 37px;

    letter-spacing: -1.15px;
  }


  .dai365-solution-box {
    margin-top: 36px;

    padding: 14px;

    border-radius: 25px;
  }


  .dai365-solution-copy h3 {
    font-size: 28px;
  }


  .dai365-part-three-inner {
    padding:
      42px 15px 24px;

    border-radius: 27px;
  }


  .dai365-team-title {
    font-size: 35px;

    letter-spacing: -1px;
  }


  .dai365-team-pill {
    border-radius: 17px;

    font-size: 15px;
  }


  .dai365-goal-card {
    min-height: 220px;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 575.98px) {

  .dai365-title {
    font-size: 34px;
  }


  .dai365-part-title {
    font-size: 22px;
  }


  .dai365-team-title {
    font-size: 20px;
  }


  .dai365-logo img {
    width: 185px;
  }


  .dai365-icon-box {
    width: 82px;
    height: 82px;
  }


  .dai365-icon-box img {}

}

/* ==========================================================
   DIRECTOR AI FEATURES
   UNIQUE PREFIX: daift26-
========================================================== */

.daift26-section {
  --daift26-dark: #11173f;
  --daift26-text: #171829;
  --daift26-copy: #565b70;

  --daift26-purple: #8642e7;
  --daift26-violet: #714ce8;
  --daift26-blue: #5278ee;
  --daift26-coral: #ff6968;

  --daift26-cream: #f7f2e4;
  --daift26-card: #ffffff;
  --daift26-border: rgba(20, 26, 67, 0.08);

  position: relative;
  overflow: hidden;

  padding: 100px 0px 0px;

  /* background:
        radial-gradient(
            circle at 8% 8%,
            rgba(132, 65, 231, 0.055),
            transparent 25%
        ),
        radial-gradient(
            circle at 92% 38%,
            rgba(82, 120, 238, 0.05),
            transparent 22%
        ),
        #f7f2e4; */
  background: #fff url(../images/daift26-section.png) no-repeat center top / cover;

  color: var(--daift26-text);

  font-family: Arial, Helvetica, sans-serif;

  font-size: 18px;
  line-height: 1.65;
}


.daift26-section *,
.daift26-section *::before,
.daift26-section *::after {
  box-sizing: border-box;
}


.daift26-container {
  position: relative;
  z-index: 2;

  max-width: 1180px;
}


/* ==========================================================
   DECORATIVE BACKGROUND
========================================================== */

.daift26-section::before {
  content: "";

  position: absolute;

  width: 600px;
  height: 600px;

  top: 300px;
  left: -360px;

  border-radius: 50%;

  background:
    radial-gradient(circle,
      rgba(132, 65, 231, 0.08),
      transparent 68%);

  pointer-events: none;
}


.daift26-section::after {
  content: "";

  position: absolute;

  width: 620px;
  height: 620px;

  right: -390px;
  bottom: 320px;

  border-radius: 50%;

  background:
    radial-gradient(circle,
      rgba(78, 120, 239, 0.08),
      transparent 68%);

  pointer-events: none;
}


/* ==========================================================
   HEADING
========================================================== */

.daift26-heading {
  max-width: 1000px;

  margin: 0 auto 60px;
}


/* YOUR LABEL IMAGE */

.daift26-label {
  display: flex;
  justify-content: center;

  margin-bottom: 22px;
}


.daift26-label img {
  display: block;

  width: auto;
  max-width: 100%;
  max-height: 70px;

  object-fit: contain;
}


.daift26-heading h2 {
  margin: 0;
  color: var(--daift26-dark);
  font-size: clamp(36px, 4.8vw, 46px);
  line-height: 1.07;
  letter-spacing: -2.2px;
  font-weight: 900;
}


.daift26-heading h2 span {
  position: relative;

  display: inline-block;

  background:
    linear-gradient(90deg,
      var(--daift26-purple),
      var(--daift26-blue));

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;

  color: transparent;
}


.daift26-heading h2 span::after {
  content: "";

  position: absolute;

  left: 5%;
  right: 5%;
  bottom: 2px;

  height: 8px;

  border-radius: 30px;

  background:
    linear-gradient(90deg,
      rgba(135, 63, 231, 0.15),
      rgba(79, 122, 239, 0.14));

  z-index: -1;
}


/* ==========================================================
   FEATURE CARD
========================================================== */

.daift26-card {
  position: relative;

  margin-bottom: 30px;

  overflow: hidden;

  background:
    rgba(255,
      255,
      255,
      0.98);

  border:
    1px solid var(--daift26-border);

  border-radius: 27px;

  box-shadow:
    0 14px 35px rgba(28,
      32,
      65,
      0.055),
    0 2px 6px rgba(28,
      32,
      65,
      0.025);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}


.daift26-card:hover {
  transform: translateY(-5px);

  border-color:
    rgba(113,
      76,
      232,
      0.18);

  box-shadow:
    0 25px 60px rgba(28,
      32,
      65,
      0.10);
}


/* subtle top highlight */

.daift26-card::before {
  content: "";

  position: absolute;

  top: 0;
  left: 15%;
  right: 15%;

  height: 1px;

  background:
    linear-gradient(90deg,
      transparent,
      rgba(125, 73, 232, 0.3),
      rgba(79, 120, 239, 0.28),
      transparent);
}


/* ==========================================================
   IMAGE SIDE
========================================================== */

.daift26-media {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 380px;

  padding: 44px 42px;

  overflow: hidden;
}


/* soft glow behind image */

.daift26-media::before {
  content: "";

  position: absolute;

  width: 290px;
  height: 290px;

  left: 50%;
  top: 50%;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  background:
    radial-gradient(circle,
      rgba(128, 66, 231, 0.10),
      rgba(77, 122, 239, 0.055) 45%,
      transparent 70%);
}


.daift26-media::after {
  content: "";

  position: absolute;

  width: 210px;
  height: 210px;

  left: 50%;
  top: 50%;

  transform:
    translate(-50%, -50%);

  border:
    1px dashed rgba(106,
      83,
      221,
      0.15);

  border-radius: 50%;
}


.daift26-media img {
  position: relative;
  z-index: 2;

  display: block;

  width: auto;
  max-width: 100%;

  height: auto;
  max-height: 310px;

  object-fit: contain;

  filter:
    drop-shadow(0 22px 22px rgba(32,
        37,
        79,
        0.10));
}


/* ==========================================================
   CONTENT
========================================================== */

.daift26-content {
  position: relative;

  padding:
    55px 55px 55px 45px;
}


.daift26-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 46px;
  height: 31px;

  margin-bottom: 18px;

  padding: 0 12px;

  border-radius: 999px;

  background:
    linear-gradient(90deg,
      rgba(131, 65, 231, 0.10),
      rgba(76, 120, 239, 0.10));

  border:
    1px solid rgba(111,
      76,
      229,
      0.13);

  color: var(--daift26-purple);

  font-size: 13px;
  line-height: 1;

  font-weight: 900;

  letter-spacing: 1px;
}


.daift26-content h3 {
  position: relative;

  margin:
    0 0 18px;

  color: var(--daift26-dark);

  font-size: clamp(26px,
      2.6vw,
      36px);

  line-height: 1.16;

  letter-spacing: -0.8px;

  font-weight: 900;
}


/* highlight underline like reference */

.daift26-content h3::after {
  content: "";

  display: block;

  width: 66px;
  height: 5px;

  margin-top: 13px;

  border-radius: 20px;

  background:
    linear-gradient(90deg,
      var(--daift26-purple),
      var(--daift26-blue),
      var(--daift26-coral));
}


.daift26-content p {
  max-width: 530px;

  margin: 0;

  color: var(--daift26-copy);

  font-size: 18px;

  line-height: 1.72;

  font-weight: 400;
}


/* ==========================================================
   ALTERNATING CARD TREATMENT
========================================================== */

.daift26-card:nth-of-type(even) .daift26-media {
  background:
    linear-gradient(135deg,
      rgba(130, 67, 230, 0.018),
      rgba(83, 118, 239, 0.04));
}


.daift26-card:nth-of-type(odd) .daift26-media {
  background:
    linear-gradient(135deg,
      rgba(83, 118, 239, 0.022),
      rgba(255, 105, 104, 0.025));
}


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

@media (max-width: 991.98px) {

  .daift26-section {
    padding:
      80px 18px 90px;
  }


  .daift26-heading {
    margin-bottom: 45px;
  }


  .daift26-heading h2 {
    letter-spacing: -1.5px;
  }


  .daift26-media {
    min-height: 330px;

    padding:
      36px 30px;
  }


  .daift26-media img {
    max-height: 280px;
  }


  .daift26-content {
    padding:
      10px 35px 42px;
  }


  .daift26-card .row>div:first-child .daift26-content {
    padding-top: 42px;
  }

}


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

@media (max-width: 767.98px) {

  .daift26-section {
    padding: 65px 12px 0px 0;
    font-size: 17px;
  }


  .daift26-heading {
    margin-bottom: 35px;
  }


  .daift26-heading h2 {
    font-size: 38px;

    line-height: 1.1;

    letter-spacing: -1.2px;
  }


  .daift26-label {
    margin-bottom: 18px;
  }


  .daift26-label img {
    max-height: 55px;
  }


  .daift26-card {
    margin-bottom: 22px;

    border-radius: 22px;
  }


  .daift26-media {
    min-height: 275px;

    padding:
      30px 22px 20px;
  }


  .daift26-media::before {
    width: 230px;
    height: 230px;
  }


  .daift26-media::after {
    width: 165px;
    height: 165px;
  }


  .daift26-media img {
    max-height: 240px;
  }


  .daift26-content {
    padding:
      28px 24px 36px !important;
  }


  .daift26-number {
    margin-bottom: 15px;
  }


  .daift26-content h3 {
    font-size: 28px;

    letter-spacing: -0.5px;
  }


  .daift26-content p {
    font-size: 17px;

    line-height: 1.68;
  }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 480px) {

  .daift26-heading h2 {
    font-size: 24px;
  }


  .daift26-media {
    min-height: 240px;

    padding:
      25px 18px 15px;
  }


  .daift26-media img {
    max-height: 215px;
  }


  .daift26-content {
    padding:
      25px 20px 31px !important;
  }


  .daift26-content h3 {
    font-size: 25px;
  }

}

/* ==========================================================
   DIRECTOR AI USER RESULTS
   WHITE THEME
   PREFIX: daires26-
========================================================== */

.daires26-section {
  --daires-bg: #ffffff;
  --daires-bg-soft: #f8f8fc;

  --daires-card: #ffffff;

  --daires-purple: #8c43eb;
  --daires-violet: #714ce9;
  --daires-blue: #557bf0;
  --daires-coral: #ff6969;

  --daires-heading: #111633;
  --daires-text: #34384e;
  --daires-muted: #757b90;

  --daires-border: #e5e7f0;

  position: relative;
  overflow: hidden;

  padding: 105px 20px;

  /* background:
        radial-gradient(
            circle at 7% 10%,
            rgba(140, 67, 235, 0.075),
            transparent 26%
        ),
        radial-gradient(
            circle at 94% 37%,
            rgba(85, 123, 240, 0.07),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfbfe 50%,
            #ffffff 100%
        ); */
  background: #fff url(../images/daires26-section.png) no-repeat center top / cover;

  color: var(--daires-text);

  font-family: Arial, Helvetica, sans-serif;

  font-size: 18px;
  line-height: 1.65;
}


.daires26-section *,
.daires26-section *::before,
.daires26-section *::after {
  box-sizing: border-box;
}


/* ==========================================================
   LIGHT GRID BACKGROUND
========================================================== */

.daires26-section::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background-image:
    linear-gradient(rgba(19, 25, 64, 0.027) 1px,
      transparent 1px),
    linear-gradient(90deg,
      rgba(19, 25, 64, 0.027) 1px,
      transparent 1px);

  background-size: 60px 60px;

  -webkit-mask-image:
    linear-gradient(to bottom,
      rgba(0, 0, 0, .5),
      transparent 82%);

  mask-image:
    linear-gradient(to bottom,
      rgba(0, 0, 0, .5),
      transparent 82%);
}


.daires26-container {
  position: relative;
  z-index: 3;

  max-width: 1200px;
}


/* ==========================================================
   BACKGROUND ORBS
========================================================== */

.daires26-orb {
  position: absolute;

  border-radius: 50%;

  pointer-events: none;

  filter: blur(35px);
}


.daires26-orb-one {
  width: 420px;
  height: 420px;

  top: 280px;
  left: -290px;

  background: rgba(136, 65, 232, 0.07);
}


.daires26-orb-two {
  width: 500px;
  height: 500px;

  right: -350px;
  bottom: 170px;

  background: rgba(76, 119, 239, 0.065);
}


/* ==========================================================
   HEADING
========================================================== */

.daires26-heading {
  max-width: 1020px;

  margin: 0 auto 55px;
}


.daires26-eyebrow {
  display: inline-flex;
  align-items: center;

  gap: 9px;

  padding: 8px 17px;
  margin-bottom: 22px;

  border:
    1px solid rgba(132, 67, 232, 0.20);

  border-radius: 100px;

  background:
    linear-gradient(90deg,
      rgba(137, 67, 235, 0.07),
      rgba(85, 123, 240, 0.06));

  color: #7042d4;

  font-size: 13px;
  line-height: 1;

  font-weight: 800;
  letter-spacing: 1.3px;
}


.daires26-eyebrow span {
  display: block;

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background:
    linear-gradient(135deg,
      var(--daires-purple),
      var(--daires-blue));

  box-shadow:
    0 0 12px rgba(137, 65, 234, .35);
}


.daires26-heading h2 {
  margin: 0;

  color: var(--daires-card);

  font-size: clamp(30px,
      5vw,
      50px);

  line-height: 1.06;

  letter-spacing: -2px;

  font-weight: 900;
}


.daires26-heading h2 span {
  background:
    linear-gradient(90deg,
      #8b43eb,
      #557bf0,
      #ff6969);

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;

  color: transparent;
}


/* ==========================================================
   SAMPLE NOTICE
========================================================== */

.daires26-placeholder-alert {
  display: inline-flex;
  justify-content: center;

  margin-top: 27px;

  padding: 9px 16px;

  border:
    1px solid rgba(210, 150, 35, .22);

  border-radius: 100px;

  background:
    #fffaf0;

  color: #9b6b16;

  font-size: 12px;
  line-height: 1.35;

  font-weight: 800;
  letter-spacing: .6px;

  box-shadow:
    0 6px 20px rgba(40, 44, 80, 0.04);
}


/* ==========================================================
   RESULT GRID
========================================================== */

.daires26-grid {
  position: relative;
  z-index: 3;
}


/* ==========================================================
   RESULT CARD
========================================================== */

.daires26-card {
  position: relative;

  height: 100%;

  overflow: hidden;

  padding-bottom: 25px;

  border:
    1px solid #e5e7f0;

  border-radius: 25px;

  background:
    linear-gradient(145deg,
      #ffffff,
      #fcfcff);

  box-shadow:
    0 18px 50px rgba(27, 31, 73, 0.08);

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


.daires26-card::before {
  content: "";

  position: absolute;

  left: 14%;
  right: 14%;
  top: 0;

  height: 2px;

  background:
    linear-gradient(90deg,
      transparent,
      rgba(153, 76, 240, .65),
      rgba(80, 126, 244, .65),
      transparent);
}


.daires26-card:hover {
  /* transform: translateY(-7px); */

  border-color:
    rgba(116, 78, 230, .22);

  box-shadow:
    0 28px 65px rgba(27, 31, 73, 0.13);
}


/* ==========================================================
   SAMPLE BADGE
========================================================== */

.daires26-sample-badge {
  position: absolute;

  top: 18px;
  right: 18px;

  z-index: 6;

  padding: 6px 9px;

  border:
    1px solid rgba(41, 47, 91, .09);

  border-radius: 50px;

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

  color: #8a90a6;

  font-size: 9px;
  line-height: 1;

  font-weight: 900;
  letter-spacing: .9px;

  box-shadow:
    0 5px 15px rgba(24, 29, 68, .05);
}


/* ==========================================================
   USER HEADER
========================================================== */

.daires26-user-head {
  display: flex;
  align-items: center;

  gap: 14px;

  padding:
    22px 22px 19px;
}


.daires26-avatar {
  flex: 0 0 56px;

  width: 56px;
  height: 56px;

  padding: 3px;

  border-radius: 50%;

  background:
    linear-gradient(135deg,
      var(--daires-purple),
      var(--daires-blue),
      var(--daires-coral));
}


.daires26-avatar img {
  display: block;

  width: 100%;
  height: 100%;

  border-radius: 50%;

  object-fit: cover;

  background: #f0f1f7;

  border: 2px solid #ffffff;
}


.daires26-user-info {
  min-width: 0;

  padding-right: 90px;
}


.daires26-user-info h3 {
  margin: 0 0 3px;

  color: var(--daires-heading);

  font-size: 18px;
  line-height: 1.25;

  font-weight: 850;
}


.daires26-user-info p {
  margin: 0;

  color: #73798e;

  font-size: 13px;
  line-height: 1.35;

  font-weight: 600;
}


/* ==========================================================
   RESULT SCREENSHOT
========================================================== */

.daires26-proof {
  position: relative;

  min-height: 225px;

  margin: 0 16px;

  overflow: hidden;

  border-radius: 17px;

  border:
    1px solid #e6e8f1;

  background:
    radial-gradient(circle at 50% 10%,
      rgba(120, 63, 229, .07),
      transparent 65%),
    #f7f8fc;
}


.daires26-proof img {
  display: block;

  width: 100%;
  height: 100%;

  /* object-fit: cover; */
}


.daires26-proof::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(to top,
      rgba(15, 18, 42, .82) 0%,
      rgba(15, 18, 42, .06) 53%,
      transparent 76%);

  pointer-events: none;
}


.daires26-proof-overlay {
  position: absolute;
  z-index: 3;

  left: 15px;
  right: 15px;
  bottom: 14px;
}


.daires26-proof-overlay span {
  display: block;

  margin-bottom: 2px;

  color: #d4d7e4;

  font-size: 10px;
  line-height: 1;

  font-weight: 700;
  letter-spacing: .9px;

  text-transform: uppercase;
}


.daires26-proof-overlay strong {
  color: #ffffff;

  font-size: 14px;
  line-height: 1.3;
}


/* ==========================================================
   REVENUE
========================================================== */

.daires26-result {
  padding:
    23px 22px 0;
}


.daires26-result-label {
  display: block;

  margin-bottom: 7px;

  color: #858b9e;

  font-size: 10px;
  line-height: 1;

  font-weight: 900;
  letter-spacing: 1.3px;
}


.daires26-money {
  background:
    linear-gradient(90deg,
      #8840e9,
      #557bf0,
      #f76868);

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;

  color: transparent;

  font-size: clamp(36px,
      3.3vw,
      47px);

  line-height: 1;

  letter-spacing: -1.5px;

  font-weight: 900;
}


.daires26-money small {
  font-size: 17px;

  letter-spacing: 0;

  font-weight: 700;
}


/* ==========================================================
   DIVIDER
========================================================== */

.daires26-line {
  height: 1px;

  margin:
    21px 22px;

  background:
    linear-gradient(90deg,
      transparent,
      #dedfe9,
      rgba(120, 77, 231, .18),
      #dedfe9,
      transparent);
}


/* ==========================================================
   QUOTE
========================================================== */

.daires26-card blockquote {
  min-height: 78px;

  margin: 0 22px;

  color: #565c72;

  font-size: 15px;
  line-height: 1.58;

  font-style: italic;
}


/* ==========================================================
   SUGGESTED NICHE BOX
========================================================== */

.daires26-niche-box {
  display: flex;

  gap: 16px;

  align-items: flex-start;

  max-width: 1060px;

  margin:
    48px auto 0;

  padding:
    21px 23px;

  border:
    1px solid rgba(132, 72, 229, .14);

  border-radius: 18px;

  background:
    linear-gradient(135deg,
      rgba(133, 65, 230, .055),
      rgba(79, 120, 239, .035));

  box-shadow:
    0 12px 30px rgba(31, 35, 76, 0.04);
}


.daires26-niche-icon {
  flex: 0 0 38px;

  width: 38px;
  height: 38px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 11px;

  background:
    linear-gradient(135deg,
      rgba(136, 67, 233, .12),
      rgba(83, 120, 239, .10));

  color: #7745db;

  font-weight: 900;
}


.daires26-niche-box strong {
  display: block;

  margin-bottom: 5px;

  color: var(--daires-heading);

  font-size: 15px;
}


.daires26-niche-box p {
  margin: 0;

  color: #70768a;

  font-size: 15px;
  line-height: 1.6;

  font-style: italic;
}


/* ==========================================================
   DISCLAIMER
========================================================== */

.daires26-disclaimer {
  display: flex;

  align-items: flex-start;

  gap: 15px;

  max-width: 1060px;

  margin:
    20px auto 0;

  padding:
    21px 23px;

  border:
    1px solid rgba(207, 151, 52, .18);

  border-radius: 18px;

  background: #fffbf3;

  box-shadow:
    0 12px 30px rgba(35, 38, 76, 0.035);
}


.daires26-disclaimer-icon {
  flex: 0 0 36px;

  width: 36px;
  height: 36px;

  display: flex;

  align-items: center;
  justify-content: center;

  border:
    1px solid rgba(197, 139, 38, .22);

  border-radius: 50%;

  background:
    #fff4dc;

  color: #a76d0c;

  font-size: 17px;

  font-weight: 900;
}


.daires26-disclaimer strong {
  display: block;

  margin-bottom: 4px;

  color: #71501a;

  font-size: 12px;

  letter-spacing: .9px;
}


.daires26-disclaimer p {
  margin: 0;

  color: #777363;

  font-size: 14px;

  line-height: 1.6;
}


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

@media (max-width: 991.98px) {

  .daires26-section {
    padding:
      85px 18px;
  }


  .daires26-heading h2 {
    font-size: 48px;

    letter-spacing: -1.5px;
  }


  .daires26-proof,
  .daires26-proof img {
    height: 220px;
    min-height: 220px;
  }

}


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

@media (max-width: 767.98px) {

  .daires26-section {
    padding:
      65px 12px 75px;

    font-size: 17px;
  }


  .daires26-heading {
    margin-bottom: 38px;
  }


  .daires26-heading h2 {
    font-size: 38px;

    line-height: 1.1;

    letter-spacing: -1.1px;
  }


  .daires26-placeholder-alert {
    border-radius: 15px;

    font-size: 10px;
  }


  .daires26-proof,
  .daires26-proof img {
    height: 240px;
    min-height: 240px;
  }


  .daires26-money {
    font-size: 42px;
  }


  .daires26-niche-box,
  .daires26-disclaimer {
    padding:
      18px 17px;
  }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 480px) {

  .daires26-heading h2 {
    font-size: 24px;
  }


  .daires26-eyebrow {
    font-size: 10px;

    padding:
      7px 13px;
  }


  .daires26-user-head {
    padding:
      19px 17px 16px;
  }


  .daires26-user-info {
    padding-right: 70px;
  }


  .daires26-avatar {
    width: 50px;
    height: 50px;

    flex-basis: 50px;
  }


  .daires26-user-info h3 {
    font-size: 16px;
  }


  .daires26-proof {
    margin:
      0 12px;
  }


  .daires26-proof,
  .daires26-proof img {
    height: 215px;
    min-height: 215px;
  }


  .daires26-result {
    padding:
      21px 18px 0;
  }


  .daires26-line {
    margin:
      19px 18px;
  }


  .daires26-card blockquote {
    margin:
      0 18px;

    font-size: 14px;
  }

}

@media (max-width: 768px) {
  .type-live-section {
    background: url(../images/type-live-section.png) no-repeat center top / cover;
    background-size: cover;
    padding: 30px 0 30px 0;
    background-size: cover;
    border-radius: 50px;
  }

  .dxwithout31-section {
    position: relative;
    overflow: hidden;
    border-radius: 50px;
  }
}

@media (max-width:576px) {



  .trigger-m1 {
    transform: rotate(-0deg) !important;
  }

  .phone2 {
    position: relative;
    left: 20px;
  }

  .trigger-m2 {
    transform: rotate(0deg) !important;
  }

  .live-marketplace-examples .marketplace-nav {
    position: absolute;
    top: 40%;
    z-index: 10;
    width: 40px;
    height: 40px;
    padding: 0;

  }
}

/* ==========================================================
   DIRECTOR AI CASE STUDIES (DAICS) STYLES
========================================================== */
.daics-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: 22px;
  background: #ffffff;
  border: 1px solid #e2e5f1;
  border-radius: 24px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.daics-card:hover {
  border-color: rgba(124, 58, 237, 0.3);
  box-shadow: 0 25px 60px rgba(30, 27, 75, 0.12);
}

.daics-badge-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 10px;
  position: relative;
  z-index: 5;
}

.daics-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(59, 130, 246, 0.1));
  border: 1px solid rgba(139, 92, 246, 0.28);
  color: #6d28d9;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.daics-num-badge {
  font-size: 11px;
  font-weight: 900;
  color: #94a3b8;
  letter-spacing: 0.5px;
}

.daics-user-head {
  padding: 8px 20px 14px;
}

.daics-proof-media {
  position: relative;
  height: 220px;
  margin: 0 16px;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: #0f172a;
}

.daics-proof-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.4s ease;
}

.daics-card:hover .daics-proof-media img {
  transform: scale(1.04);
}

.daics-proof-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  letter-spacing: 0.4px;
}

.daics-proof-badge .daics-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
}

.daics-metrics-row {
  padding: 16px 20px 0;
}

.daics-stat-number {
  font-size: clamp(30px, 2.5vw, 36px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -1px;
  background: linear-gradient(90deg, #7c3aed 0%, #2563eb 55%, #f43f5e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.daics-stat-sub {
  font-size: 11.5px;
  font-weight: 800;
  color: #475569;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.daics-story-text {
  padding: 12px 20px 0;
  font-size: 13.5px;
  line-height: 1.58;
  color: #4b5563;
  margin: 0;
}

.daics-format-box {
  margin: 14px 16px 0;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

.daics-format-title {
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.8px;
  color: #64748b;
  text-transform: uppercase;
  margin-bottom: 3px;
}

.daics-format-val {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
}

.daics-director-box {
  margin: 12px 16px 0;
  padding: 13px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.05), rgba(37, 99, 235, 0.04));
  border: 1px solid rgba(124, 58, 237, 0.16);
  border-radius: 14px;
  flex-grow: 1;
}

.daics-director-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 900;
  color: #6d28d9;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-bottom: 8px;
}

.daics-director-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.daics-director-list li {
  font-size: 11.5px;
  font-weight: 600;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 7px;
  line-height: 1.35;
}

.daics-workflow-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}

.daics-workflow-flow span.flow-step {
  background: #ffffff;
  border: 1px solid rgba(124, 58, 237, 0.22);
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: #5b21b6;
}

.daics-workflow-flow span.flow-arrow {
  color: #8b5cf6;
  font-weight: 900;
  font-size: 11px;
}

.daics-card-footer {
  padding: 14px 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.daics-source-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: #4f46e5;
  text-decoration: none;
  transition: color 0.2s ease;
}

.daics-source-link:hover {
  color: #3730a3;
  text-decoration: underline;
}

/* ==========================================================
   DAICS PEEK PREVIEW & HORIZONTAL CARD STYLES
========================================================== */
.daics-section {
    position: relative !important;
    padding: 105px 0 95px !important;
    background: #ffffff url(../images/daires26-section.png) no-repeat center top / cover !important;
    overflow: hidden !important;
}

.daics-section::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) !important;
    background-size: 60px 60px !important;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent 82%) !important;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent 82%) !important;
}

.daics-section .daires26-heading h2 {
    color: #ffffff !important;
    font-size: clamp(30px, 5vw, 50px) !important;
    line-height: 1.06 !important;
    letter-spacing: -2px !important;
    font-weight: 900 !important;
}

.daics-section .daires26-heading h2 span {
    background: linear-gradient(90deg, #b388ff, #60a5fa, #ff7b90) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

.daics-section .daires26-heading p {
    color: #cbd5e1 !important;
}

.daics-section .daires26-eyebrow {
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(10px) !important;
    color: #ffffff !important;
}

.daics-section .daires26-eyebrow span {
    background: #10b981 !important;
    box-shadow: 0 0 12px #10b981 !important;
}

/* FULL-WIDTH PEEK PREVIEW CAROUSEL */
.daics-swiper-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 32px auto 0 !important;
    position: relative !important;
    padding: 10px 0 40px !important;
    overflow: hidden !important;
}

.daics-swiper {
    width: 100% !important;
    padding: 20px 0 35px !important;
    overflow: visible !important;
}

.daics-swiper .swiper-wrapper {
    display: flex !important;
    align-items: stretch !important;
}

/* SIDE SLIDES SCALE & OPACITY TRANSITION */
.daics-swiper .swiper-slide {
    height: auto !important;
    flex-shrink: 0 !important;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease !important;
    opacity: 0.42 !important;
    transform: scale(0.92) !important;
    cursor: pointer !important;
}

.daics-swiper .swiper-slide-active {
    opacity: 1 !important;
    transform: scale(1) !important;
    cursor: default !important;
    z-index: 5 !important;
}

.daics-swiper .swiper-slide-prev,
.daics-swiper .swiper-slide-next {
    opacity: 0.52 !important;
    transform: scale(0.92) !important;
}

.daics-swiper .swiper-slide-prev:hover,
.daics-swiper .swiper-slide-next:hover {
    opacity: 0.82 !important;
    transform: scale(0.94) !important;
}

/* HORIZONTAL CARD LAYOUT */
.daics-hcard {
    display: flex !important;
    flex-direction: row !important;
    background: #ffffff !important;
    border: 1px solid #e3e6f2 !important;
    border-radius: 26px !important;
    overflow: hidden !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18) !important;
    min-height: 520px !important;
    height: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.swiper-slide-active .daics-hcard {
    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(124, 58, 237, 0.25) !important;
}

.daics-hcard:hover {
    box-shadow: 0 30px 85px rgba(0, 0, 0, 0.32) !important;
    border-color: rgba(124, 58, 237, 0.36) !important;
}

/* LEFT COLUMN: VISUAL PROOF & MEDIA (42%) */
.daics-hcard__media {
    flex: 0 0 42% !important;
    max-width: 42% !important;
    width: 42% !important;
    position: relative !important;
    background: #0b0f22 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    overflow: hidden !important;
    min-height: 480px !important;
}

.daics-hcard__media-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    transition: transform 0.5s ease !important;
    display: block !important;
}

.daics-hcard:hover .daics-hcard__media-img {
    transform: scale(1.035) !important;
}

.daics-hcard__media::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to top, rgba(10, 14, 34, 0.94) 0%, rgba(10, 14, 34, 0.4) 45%, rgba(10, 14, 34, 0.08) 70%, rgba(10, 14, 34, 0.5) 100%) !important;
    pointer-events: none !important;
}

.daics-hcard__top-tags {
    position: absolute !important;
    top: 18px !important;
    left: 18px !important;
    right: 18px !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.daics-hcard__cat-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 12px !important;
    border-radius: 30px !important;
    background: rgba(15, 19, 42, 0.82) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
}

.daics-hcard__num-pill {
    background: rgba(255, 255, 255, 0.94) !important;
    color: #1e1b4b !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    padding: 5px 12px !important;
    border-radius: 30px !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.daics-hcard__media-overlay {
    position: relative !important;
    z-index: 3 !important;
    padding: 22px 24px !important;
}

.daics-hcard__verified-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(16, 185, 129, 0.22) !important;
    border: 1px solid rgba(16, 185, 129, 0.55) !important;
    backdrop-filter: blur(8px) !important;
    color: #a7f3d0 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    margin-bottom: 7px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
}

.daics-hcard__verified-tag .dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #34d399 !important;
    box-shadow: 0 0 8px #34d399 !important;
}

.daics-hcard__media-overlay h4 {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) !important;
}

/* RIGHT COLUMN: CONTENT & DETAILS (58%) */
.daics-hcard__body {
    flex: 0 0 58% !important;
    max-width: 58% !important;
    width: 58% !important;
    padding: 26px 30px 24px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
}

.daics-hcard__header {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #edf0f7 !important;
}

.daics-hcard__avatar {
    flex: 0 0 52px !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    padding: 2.5px !important;
    background: linear-gradient(135deg, #8840e9, #3b82f6, #f43f5e) !important;
}

.daics-hcard__avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 2px solid #ffffff !important;
    display: block !important;
}

.daics-hcard__brand-title {
    margin: 0 !important;
    font-size: 19px !important;
    font-weight: 850 !important;
    color: #151928 !important;
    line-height: 1.25 !important;
}

.daics-hcard__brand-sub {
    margin: 2px 0 0 !important;
    font-size: 12.5px !important;
    color: #64748b !important;
    font-weight: 600 !important;
}

.daics-hcard__stats-box {
    display: flex !important;
    align-items: baseline !important;
    gap: 14px !important;
    margin-top: 14px !important;
    flex-wrap: wrap !important;
}

.daics-hcard__stat-big {
    font-size: clamp(34px, 3.2vw, 42px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -1.5px !important;
    background: linear-gradient(90deg, #7c3aed 0%, #2563eb 50%, #f43f5e 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.daics-hcard__stat-unit {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    letter-spacing: 0 !important;
}

.daics-hcard__stat-meta {
    font-size: 11.5px !important;
    font-weight: 800 !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    background: #f1f5f9 !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
}

.daics-hcard__desc {
    margin: 12px 0 0 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #475569 !important;
}

.daics-hcard__format {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 12px !important;
    padding: 7px 12px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-size: 12px !important;
}

.daics-hcard__format-label {
    font-size: 9.5px !important;
    font-weight: 900 !important;
    color: #64748b !important;
    letter-spacing: 0.7px !important;
    text-transform: uppercase !important;
    flex-shrink: 0 !important;
}

.daics-hcard__format-val {
    font-weight: 700 !important;
    color: #1e293b !important;
}

.daics-hcard__director {
    margin-top: 13px !important;
    padding: 12px 15px !important;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.05), rgba(37, 99, 235, 0.04)) !important;
    border: 1px solid rgba(124, 58, 237, 0.18) !important;
    border-radius: 14px !important;
}

.daics-hcard__director-title {
    font-size: 10.5px !important;
    font-weight: 900 !important;
    color: #6d28d9 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    margin-bottom: 7px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.daics-hcard__flow {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 5px !important;
    margin-bottom: 6px !important;
}

.daics-hcard__flow-step {
    background: #ffffff !important;
    border: 1px solid rgba(124, 58, 237, 0.22) !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: #5b21b6 !important;
}

.daics-hcard__flow-arrow {
    color: #8b5cf6 !important;
    font-weight: 900 !important;
    font-size: 11px !important;
}

.daics-hcard__checklist {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 5px 12px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.daics-hcard__checklist li {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    line-height: 1.35 !important;
}

.daics-hcard__footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 14px !important;
    padding-top: 10px !important;
    border-top: 1px solid #edf0f7 !important;
}

.daics-hcard__link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #4f46e5 !important;
    text-decoration: none !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}

.daics-hcard__link:hover {
    color: #3730a3 !important;
    transform: translateX(2px) !important;
    text-decoration: underline !important;
}

.daics-hcard__verified-badge-small {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #10b981 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* NAVIGATION CONTROLS */
.daics-swiper-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    margin-top: 25px !important;
    position: relative !important;
    z-index: 10 !important;
}

.daics-swiper-nav-btn {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #4f46e5 !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    user-select: none !important;
}

.daics-swiper-nav-btn:hover {
    background: #6d28d9 !important;
    color: #ffffff !important;
    border-color: #6d28d9 !important;
    transform: scale(1.08) !important;
    box-shadow: 0 10px 22px rgba(109, 40, 217, 0.35) !important;
}

.daics-swiper-nav-btn.swiper-button-disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.daics-pagination {
    position: static !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
}

.daics-pagination .swiper-pagination-bullet {
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.45) !important;
    opacity: 0.7 !important;
    margin: 0 !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.daics-pagination .swiper-pagination-bullet-active {
    width: 26px !important;
    border-radius: 20px !important;
    background: linear-gradient(90deg, #b388ff, #60a5fa) !important;
    opacity: 1 !important;
}

@media (max-width: 991px) {
    .daics-hcard {
        flex-direction: column !important;
    }
    .daics-hcard__media {
        flex: 0 0 auto !important;
        max-width: 100% !important;
        width: 100% !important;
        min-height: 300px !important;
        height: 320px !important;
    }
    .daics-hcard__body {
        flex: 0 0 auto !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 22px 20px !important;
    }
    .daics-hcard__checklist {
        grid-template-columns: 1fr !important;
    }
}


/* ==========================================================
   2-COLUMN ROW-WISE GRID CASE STUDY CARDS
========================================================== */
.daics-grid-2col .col-lg-6 {
    display: flex;
}

.daics-grid-2col .daics-hcard {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    min-height: 480px !important;
    height: 100% !important;
    background: #ffffff !important;
    border: 1px solid #e3e6f2 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    box-shadow: 0 14px 40px rgba(27, 31, 73, 0.08) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.daics-grid-2col .daics-hcard:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 24px 60px rgba(27, 31, 73, 0.14) !important;
    border-color: rgba(124, 58, 237, 0.3) !important;
}

.daics-grid-2col .daics-hcard__media {
    flex: 0 0 42% !important;
    max-width: 42% !important;
    width: 42% !important;
    min-height: 100% !important;
}

.daics-grid-2col .daics-hcard__body {
    flex: 0 0 58% !important;
    max-width: 58% !important;
    width: 58% !important;
    padding: 22px 22px 20px 20px !important;
}

.daics-grid-2col .daics-hcard__stat-big {
    font-size: clamp(26px, 2.4vw, 34px) !important;
}

@media (max-width: 991px) {
    .daics-grid-2col .daics-hcard {
        flex-direction: column !important;
    }
    .daics-grid-2col .daics-hcard__media {
        flex: 0 0 auto !important;
        max-width: 100% !important;
        width: 100% !important;
        height: 280px !important;
        min-height: 280px !important;
    }
    .daics-grid-2col .daics-hcard__body {
        flex: 0 0 auto !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 20px 18px !important;
    }
}


/* ==========================================================
   DFREAL26 CASE STUDY 2-COLUMN GRID & VERTICAL CARD STYLING
========================================================== */
.dfreal26__cs-grid {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
}

.dfreal26__cs-grid .col-lg-6 {
    display: flex;
}

.daics-vcard {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    background: #ffffff !important;
    border: 1px solid #e3e6f2 !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease !important;
}

.dfreal26__cs-grid .daics-hcard__num-pill,
.dfreal26__cs-grid .daics-hcard__verified-badge-small {
    display: none !important;
}

.daics-vcard:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 28px 70px rgba(124, 58, 237, 0.3) !important;
    border-color: rgba(168, 85, 247, 0.5) !important;
}

.daics-vcard .daics-hcard__media {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 290px !important;
    min-height: 290px !important;
    position: relative !important;
    overflow: hidden !important;
}

.daics-vcard .daics-hcard__media-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
}

.daics-vcard .daics-hcard__body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px 22px 22px !important;
    background: #ffffff !important;
}

.daics-vcard .daics-hcard__checklist {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px 12px !important;
}

.daics-vcard .daics-hcard__flow {
    flex-wrap: wrap !important;
    gap: 4px 6px !important;
}

.daics-vcard .daics-hcard__footer {
    margin-top: auto !important;
    padding-top: 14px !important;
}

@media (max-width: 575px) {
    .daics-vcard .daics-hcard__media {
        height: 230px !important;
        min-height: 230px !important;
    }
    .daics-vcard .daics-hcard__checklist {
        grid-template-columns: 1fr !important;
    }
    .daics-vcard .daics-hcard__body {
        padding: 18px 16px !important;
    }
}