/* ============================================================
   DIGITAL TRANSFORMATION PAGE
   Small Business — Clear Pricing — Plain English
   ============================================================ */

/* ---------- HERO ---------- */
.dt-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 40px 0 60px;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
}

.dt-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.dt-hero__gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(94, 234, 212, 0.06), transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(58, 158, 146, 0.04), transparent 50%),
    radial-gradient(ellipse at 50% 20%, rgba(94, 234, 212, 0.03), transparent 40%);
}

.dt-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.12;
  mask-image: radial-gradient(ellipse at 50% 50%, black, transparent 70%);
}

.dt-hero__particles {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.dt-hero__particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--signal);
  opacity: 0;
  animation: particleFloat 15s ease-in-out infinite;
}

@keyframes particleFloat {
  0% { opacity: 0; transform: translateY(100px) scale(0); }
  20% { opacity: 0.4; }
  80% { opacity: 0.4; }
  100% { opacity: 0; transform: translateY(-100px) scale(1); }
}

.dt-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  align-items: center;
}

.dt-hero__tag {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--signal);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.dt-hero__tag-line {
  width: 32px;
  height: 1px;
  background: var(--signal);
  flex-shrink: 0;
}

.dt-hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 4.8vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.dt-hero h1 .accent {
  color: var(--signal);
}

.dt-hero__content p {
  font-size: 1.08rem;
  color: var(--paper-dim);
  max-width: 480px;
  margin-bottom: 32px;
  line-height: 1.7;
}

.dt-hero__ctas {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.dt-hero__ctas .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.dt-hero__trust {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--paper-dim);
}

.dt-hero__trust span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dt-hero__trust svg {
  color: var(--signal);
  flex-shrink: 0;
}

.dt-hero__scroll-indicator {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.dt-hero__scroll-indicator span {
  display: block;
  width: 20px;
  height: 32px;
  border: 2px solid var(--line);
  border-radius: 12px;
  position: relative;
}

.dt-hero__scroll-indicator span::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 8px;
  background: var(--signal);
  border-radius: 2px;
  animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; }
  50% { transform: translateX(-50%) translateY(8px); opacity: 0.3; }
}

/* ---- Hero Visual: Devices ---- */
.dt-hero__visual {
  position: relative;
  opacity: 0;
  transform: scale(0.92);
}

.dt-hero__devices {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 420px;
}

.dt-hero__device--desktop {
  position: relative;
  width: 100%;
  max-width: 480px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7);
}

.dt-hero__screen {
  display: flex;
  flex-direction: column;
}

.dt-hero__screen-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line-soft);
}

.dt-hero__screen-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line);
}

.dt-hero__screen-bar span:nth-child(1) { background: #FF6159; }
.dt-hero__screen-bar span:nth-child(2) { background: #FEBC2E; }
.dt-hero__screen-bar span:nth-child(3) { background: #28C840; }

.dt-hero__screen-url {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--paper-dim);
  margin-left: 8px;
  opacity: 0.6;
}

.dt-hero__screen-body {
  padding: 24px 28px 28px;
  min-height: 260px;
}

.dt-hero__screen-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.dt-hero__screen-logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--signal);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
}

.dt-hero__screen-logo span:last-child {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--paper);
}

.dt-hero__screen-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dt-hero__screen-headline {
  width: 70%;
  height: 20px;
  border-radius: 4px;
  background: var(--line);
  animation: screenPulse 2s ease-in-out infinite;
}

.dt-hero__screen-text {
  width: 90%;
  height: 10px;
  border-radius: 4px;
  background: var(--line-soft);
  animation: screenPulse 2s ease-in-out infinite 0.2s;
}

.dt-hero__screen-text::after {
  content: '';
  display: block;
  margin-top: 6px;
  width: 70%;
  height: 10px;
  border-radius: 4px;
  background: var(--line-soft);
}

.dt-hero__screen-button {
  width: 100px;
  height: 32px;
  border-radius: 8px;
  background: var(--signal);
  opacity: 0.6;
  margin-top: 4px;
  animation: screenPulse 2s ease-in-out infinite 0.4s;
}

.dt-hero__screen-cards {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.dt-hero__screen-card {
  flex: 1;
  height: 60px;
  border-radius: 8px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  animation: screenPulse 2s ease-in-out infinite;
}

.dt-hero__screen-card:nth-child(2) { animation-delay: 0.2s; }
.dt-hero__screen-card:nth-child(3) { animation-delay: 0.4s; }

@keyframes screenPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.7; }
}

/* Phone mockup */
.dt-hero__device--phone {
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 140px;
  height: 280px;
  border-radius: 24px;
  background: linear-gradient(145deg, #26303b, #080b10 72%);
  border: 3px solid #3c4754;
  box-shadow: 0 28px 70px -20px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.dt-hero__phone-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 20px;
  background: var(--ink);
  border-radius: 0 0 12px 12px;
  z-index: 2;
}

.dt-hero__phone-screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 12px 14px 8px;
  background: #121820;
  border-radius: 20px;
}

.dt-hero__phone-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-top: 8px;
}

.dt-hero__phone-time {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  color: var(--paper);
  font-weight: 600;
}

.dt-hero__phone-icons {
  color: var(--paper-dim);
}

.dt-hero__phone-app {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.dt-hero__phone-app-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--signal);
  opacity: 0.7;
}

.dt-hero__phone-app-name {
  font-family: var(--font-sans);
  font-size: 0.55rem;
  font-weight: 500;
  color: var(--paper);
}

.dt-hero__phone-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dt-hero__phone-line {
  height: 6px;
  border-radius: 3px;
  background: var(--line);
}

.dt-hero__phone-line--short {
  width: 60%;
}

.dt-hero__phone-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 4px;
}

.dt-hero__phone-grid-item {
  height: 30px;
  border-radius: 6px;
  background: var(--line-soft);
  border: 1px solid var(--line);
}

.dt-hero__phone-bottom {
  display: flex;
  justify-content: center;
  padding: 6px 0 0;
}

.dt-hero__phone-home {
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: var(--line);
}

/* Compact browser simulation inside the phone mockup. */
.dt-hero__browser-status,
.dt-hero__browser-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  color: var(--paper-dim);
}

.dt-hero__browser-status {
  padding: 9px 10px 6px;
}

.dt-hero__browser-signal {
  color: var(--paper);
  letter-spacing: 0.08em;
}

.dt-hero__browser-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 7px 8px;
  padding: 7px 8px;
  min-height: 28px;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--paper-dim);
  font-family: var(--font-sans);
  font-size: 0.54rem;
}

.dt-hero__browser-url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--paper);
}

.dt-hero__browser-caret,
.dt-hero__search-caret {
  display: inline-block;
  width: 1px;
  height: 0.9em;
  background: var(--signal);
  animation: browserCaret 0.8s steps(1) infinite;
}

@keyframes browserCaret {
  50% { opacity: 0; }
}

.dt-hero__browser-page {
  flex: 1;
  min-height: 0;
  padding: 8px 9px;
  overflow: hidden;
  background: #f7f8fa;
  color: #202124;
}

.dt-hero__google-wordmark {
  margin: 3px 0 6px;
  font-family: Arial, sans-serif;
  font-size: 0.86rem;
  letter-spacing: -0.06em;
  text-align: center;
  color: #4285f4;
}

.dt-hero__google-wordmark span { color: #ea4335; }

.dt-hero__google-search {
  display: flex;
  align-items: center;
  min-height: 23px;
  padding: 4px 7px;
  border: 1px solid #dadce0;
  border-radius: 10px;
  background: #fff;
  font: 0.48rem Arial, sans-serif;
  color: #3c4043;
}

.dt-hero__suggestions,
.dt-hero__search-results {
  display: none;
  margin-top: 3px;
  padding: 3px 0;
  background: #fff;
  border: 1px solid #dadce0;
  border-top: 0;
  font: 0.5rem/1.45 Arial, sans-serif;
}

.dt-hero__suggestions div {
  padding: 3px 6px;
  white-space: nowrap;
  overflow: hidden;
}

.dt-hero__suggestions div span {
  margin-right: 4px;
  color: #5f6368;
}

.dt-hero__search-results {
  flex-direction: column;
  gap: 3px;
  padding: 6px;
  border-top: 1px solid #dadce0;
}

.dt-hero__search-tabs {
  display: none;
  gap: 7px;
  margin-top: 5px;
  padding: 0 2px 3px;
  border-bottom: 1px solid #dadce0;
  font: 0.4rem Arial, sans-serif;
  color: #5f6368;
}

.dt-hero__search-tabs span {
  padding-bottom: 3px;
}

.dt-hero__search-tabs .is-active {
  color: #1a73e8;
  border-bottom: 2px solid #1a73e8;
}

.dt-hero__ai-label {
  color: #1a73e8;
  font-weight: 600;
}

.dt-hero__result-url { color: #188038; }
.dt-hero__search-results strong { color: #1a0dab; font-size: 0.5rem; }
.dt-hero__search-results small { color: #5f6368; }

.dt-hero__browser-bottom {
  padding: 5px 10px 7px;
  color: var(--paper);
  background: var(--panel);
}

.dt-hero__browser-bottom span { opacity: 0.8; }

/* ---------- PROBLEM ---------- */
.dt-problem {
  padding: 60px 0;
  background: var(--ink-2);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.dt-problem__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.dt-problem__item {
  text-align: center;
  padding: 20px;
}

.dt-problem__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(94, 234, 212, 0.08);
  border: 1px solid rgba(94, 234, 212, 0.15);
  margin-bottom: 16px;
}

.dt-problem__icon svg {
  color: var(--signal);
}

.dt-problem__item h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--paper);
  margin-bottom: 8px;
}

.dt-problem__item p {
  font-size: 0.95rem;
  color: var(--paper-dim);
  line-height: 1.6;
  margin: 0;
}

/* ---------- SERVICES ---------- */
.dt-services {
  padding: 100px 0;
}

.dt-services__header {
  max-width: 640px;
  margin-bottom: 56px;
}

.dt-services__tag {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--signal);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.dt-services__tag-line {
  width: 32px;
  height: 1px;
  background: var(--signal);
  flex-shrink: 0;
}

.dt-services__header h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.18;
  margin-bottom: 16px;
}

.dt-services__header h2 .accent {
  color: var(--signal);
}

.dt-services__header p {
  color: var(--paper-dim);
  font-size: 1.02rem;
  line-height: 1.6;
}

.dt-services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.dt-services__item {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px 28px;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dt-services__item:hover {
  border-color: rgba(94, 234, 212, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px -16px rgba(94, 234, 212, 0.08);
}

.dt-services__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(94, 234, 212, 0.08);
  border: 1px solid rgba(94, 234, 212, 0.15);
  margin-bottom: 16px;
}

.dt-services__icon svg {
  color: var(--signal);
}

.dt-services__item h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--paper);
  margin-bottom: 8px;
}

.dt-services__item p {
  font-size: 0.9rem;
  color: var(--paper-dim);
  line-height: 1.6;
  margin: 0;
}

/* ---------- COMPARISON ---------- */
.dt-comparison {
  padding: 80px 0;
  background: var(--ink-2);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.dt-comparison__header {
  max-width: 640px;
  margin-bottom: 48px;
}

.dt-comparison__tag {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--signal);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.dt-comparison__tag-line {
  width: 32px;
  height: 1px;
  background: var(--signal);
  flex-shrink: 0;
}

.dt-comparison__header h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.18;
  margin-bottom: 16px;
}

.dt-comparison__header h2 .accent {
  color: var(--signal);
}

.dt-comparison__header p {
  color: var(--paper-dim);
  font-size: 1.02rem;
  line-height: 1.6;
}

.dt-comparison__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 32px;
  align-items: center;
}

.dt-comparison__side {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
}

.dt-comparison__side--before {
  border-color: rgba(255, 97, 89, 0.2);
}

.dt-comparison__side--after {
  border-color: rgba(94, 234, 212, 0.2);
}

.dt-comparison__label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 16px;
}

.dt-comparison__side--before .dt-comparison__label {
  color: #FF6159;
}

.dt-comparison__side--after .dt-comparison__label {
  color: var(--signal);
}

.dt-comparison__side ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dt-comparison__side ul li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--paper-dim);
}

.dt-comparison__side--after ul li {
  color: var(--paper);
}

.dt-comparison__side ul li svg {
  flex-shrink: 0;
}

.dt-comparison__side--before ul li svg {
  color: #FF6159;
}

.dt-comparison__side--after ul li svg {
  color: var(--signal);
}

.dt-comparison__arrow {
  color: var(--line);
}

.dt-comparison__arrow svg {
  display: block;
}

/* ---------- PRICING ---------- */
.dt-pricing {
  padding: 100px 0;
}

.dt-pricing__header {
  max-width: 640px;
  margin-bottom: 48px;
}

.dt-pricing__tag {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--signal);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.dt-pricing__tag-line {
  width: 32px;
  height: 1px;
  background: var(--signal);
  flex-shrink: 0;
}

.dt-pricing__header h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.18;
  margin-bottom: 16px;
}

.dt-pricing__header h2 .accent {
  color: var(--signal);
}

.dt-pricing__header p {
  color: var(--paper-dim);
  font-size: 1.02rem;
  line-height: 1.6;
}

/* Toggle */
.dt-pricing__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 48px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--paper-dim);
}

.dt-pricing__toggle span:last-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dt-pricing__badge {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 10px;
  border-radius: 100px;
  background: var(--signal);
  color: var(--ink);
  font-weight: 700;
}

.dt-pricing__switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  cursor: pointer;
}

.dt-pricing__switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.dt-pricing__slider {
  position: absolute;
  inset: 0;
  background: var(--line);
  border-radius: 13px;
  transition: background 0.3s ease;
}

.dt-pricing__slider::before {
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background: var(--paper);
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.dt-pricing__switch input:checked + .dt-pricing__slider {
  background: var(--signal);
}

.dt-pricing__switch input:checked + .dt-pricing__slider::before {
  transform: translateX(22px);
}

/* Package Grid */
.dt-pricing__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 56px;
}

.dt-pricing__card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}

.dt-pricing__card:hover {
  border-color: rgba(94, 234, 212, 0.3);
  transform: translateY(-6px);
  box-shadow: 0 16px 48px -16px rgba(94, 234, 212, 0.08);
}

.dt-pricing__card--featured {
  border-color: var(--signal);
  position: relative;
}

.dt-pricing__card--premium {
  border-color: var(--amber);
  position: relative;
}

.dt-pricing__card-badge {
  position: absolute;
  top: -10px;
  right: 16px;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 14px;
  border-radius: 100px;
  background: var(--signal);
  color: var(--ink);
  font-weight: 700;
}

.dt-pricing__card--premium .dt-pricing__card-badge {
  background: var(--amber);
}

.dt-pricing__card-header {
  margin-bottom: 16px;
}

.dt-pricing__card-tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--signal);
  display: block;
  margin-bottom: 4px;
}

.dt-pricing__card--premium .dt-pricing__card-tag {
  color: var(--amber);
}

.dt-pricing__card-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--paper);
}

.dt-pricing__card-price {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}

.dt-pricing__card-amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--paper);
}

.dt-pricing__card-period {
  font-size: 0.8rem;
  color: var(--paper-dim);
  margin-left: 4px;
}

.dt-pricing__card-price-maintenance {
  display: none;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}

.dt-pricing__card-price-maintenance .dt-pricing__card-amount {
  font-size: 1.4rem;
}

.dt-pricing__card-price-maintenance .dt-pricing__card-period {
  color: var(--signal);
}

.dt-pricing__card-features {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  flex-grow: 1;
}

.dt-pricing__card-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--paper-dim);
  padding: 4px 0;
  line-height: 1.4;
}

.dt-pricing__card-features li svg {
  flex-shrink: 0;
  color: var(--signal);
}

.dt-pricing__card-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dt-pricing__card-actions .btn {
  width: 100%;
  justify-content: center;
  padding: 10px;
  font-size: 0.85rem;
}

.dt-pricing__card-actions .btn-ghost {
  padding: 8px;
  font-size: 0.8rem;
}

/* Add-ons */
.dt-pricing__addons {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px 36px 36px;
  margin-bottom: 32px;
}

.dt-pricing__addons h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--paper);
  margin-bottom: 4px;
}

.dt-pricing__addons h3 svg {
  color: var(--signal);
}

.dt-pricing__addons > p {
  color: var(--paper-dim);
  font-size: 0.95rem;
  margin-bottom: 24px;
}

.dt-pricing__addons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.dt-pricing__addon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  transition: border-color 0.3s ease;
}

.dt-pricing__addon:hover {
  border-color: rgba(94, 234, 212, 0.2);
}

.dt-pricing__addon--highlight {
  border-color: rgba(94, 234, 212, 0.2);
  background: rgba(94, 234, 212, 0.04);
}

.dt-pricing__addon-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dt-pricing__addon-name {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--paper);
}

.dt-pricing__addon-desc {
  font-size: 0.7rem;
  color: var(--paper-dim);
}

.dt-pricing__addon-price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--signal);
  flex-shrink: 0;
  margin-left: 12px;
}

.dt-pricing__addon-price .dt-pricing__addon-period {
  font-size: 0.7rem;
  color: var(--paper-dim);
  font-weight: 400;
}

.dt-pricing__note {
  text-align: center;
  padding: 24px;
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.dt-pricing__note p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--paper-dim);
  margin: 0;
}

.dt-pricing__note svg {
  color: var(--signal);
  flex-shrink: 0;
}

/* ---------- PROCESS ---------- */
.dt-process {
  padding: 100px 0;
  background: var(--ink-2);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.dt-process__header {
  max-width: 640px;
  margin-bottom: 64px;
}

.dt-process__tag {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--signal);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.dt-process__tag-line {
  width: 32px;
  height: 1px;
  background: var(--signal);
  flex-shrink: 0;
}

.dt-process__header h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.18;
}

.dt-process__header h2 .accent {
  color: var(--signal);
}

.dt-process__track {
  position: relative;
  padding: 20px 0 40px;
}

.dt-process__line {
  position: absolute;
  left: 60px;
  top: 60px;
  bottom: 40px;
  width: 2px;
  background: var(--line-soft);
  border-radius: 2px;
}

.dt-process__line-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, var(--signal), var(--signal-dim));
  border-radius: 2px;
  box-shadow: 0 0 20px rgba(94, 234, 212, 0.2);
}

.dt-process__steps {
  display: flex;
  flex-direction: column;
}

.dt-process__step {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 40px;
  padding: 20px 0;
  opacity: 0.3;
  transition: opacity 0.5s ease;
}

.dt-process__step.is-active {
  opacity: 1;
}

.dt-process__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
}

.dt-process__number {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--paper-dim);
  letter-spacing: 0.06em;
}

.dt-process__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--panel);
  border: 2px solid var(--line);
  color: var(--paper-dim);
  transition: all 0.4s ease;
}

.dt-process__step.is-active .dt-process__icon {
  border-color: var(--signal);
  color: var(--signal);
  box-shadow: 0 0 30px rgba(94, 234, 212, 0.12);
}

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

.dt-process__content h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--paper);
  margin-bottom: 4px;
}

.dt-process__content p {
  color: var(--paper-dim);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 480px;
  margin: 0;
}

/* ---------- WHY CHOOSE US ---------- */
.dt-why {
  padding: 100px 0;
}

.dt-why__header {
  max-width: 640px;
  margin-bottom: 48px;
}

.dt-why__tag {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--signal);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.dt-why__tag-line {
  width: 32px;
  height: 1px;
  background: var(--signal);
  flex-shrink: 0;
}

.dt-why__header h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.18;
}

.dt-why__header h2 .accent {
  color: var(--signal);
}

.dt-why__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.dt-why__item {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: center;
  transition: all 0.4s ease;
}

.dt-why__item:hover {
  border-color: rgba(94, 234, 212, 0.3);
  transform: translateY(-4px);
}

.dt-why__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(94, 234, 212, 0.08);
  border: 1px solid rgba(94, 234, 212, 0.15);
  margin-bottom: 16px;
}

.dt-why__icon svg {
  color: var(--signal);
}

.dt-why__item h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--paper);
  margin-bottom: 8px;
}

.dt-why__item p {
  font-size: 0.9rem;
  color: var(--paper-dim);
  line-height: 1.6;
  margin: 0;
}

/* ---------- TESTIMONIALS ---------- */
.dt-testimonials {
  padding: 80px 0;
  background: var(--ink-2);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.dt-testimonials__header {
  max-width: 640px;
  margin-bottom: 48px;
}

.dt-testimonials__tag {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--signal);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.dt-testimonials__tag-line {
  width: 32px;
  height: 1px;
  background: var(--signal);
  flex-shrink: 0;
}

.dt-testimonials__header h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.18;
}

.dt-testimonials__header h2 .accent {
  color: var(--signal);
}

.dt-testimonials__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.dt-testimonials__card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
}

.dt-testimonials__quote-mark {
  display: block;
  margin-bottom: 12px;
}

.dt-testimonials__quote-mark svg {
  color: var(--signal);
  opacity: 0.25;
}

.dt-testimonials__card p {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--paper);
  margin-bottom: 16px;
}

.dt-testimonials__card footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dt-testimonials__card footer strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--paper);
}

.dt-testimonials__card footer span {
  font-size: 0.8rem;
  color: var(--paper-dim);
}

/* ---------- CTA ---------- */
.dt-cta {
  padding: 100px 0;
}

.dt-cta__card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  padding: 56px 48px;
}

.dt-cta__tag {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--signal);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.dt-cta__tag-line {
  width: 32px;
  height: 1px;
  background: var(--signal);
  flex-shrink: 0;
}

.dt-cta__content h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  line-height: 1.15;
  margin-bottom: 16px;
}

.dt-cta__content h2 .accent {
  color: var(--signal);
}

.dt-cta__content p {
  color: var(--paper-dim);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 32px;
  max-width: 480px;
}

.dt-cta__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.dt-cta__actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.dt-cta__note {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--paper-dim);
}

.dt-cta__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dt-cta__code {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 2.1;
  background: var(--ink);
  padding: 32px 36px;
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  width: 100%;
  position: relative;
}

.dt-cta__code-comment {
  color: var(--paper-dim);
  opacity: 0.5;
}

.dt-cta__code-line {
  display: block;
}

.dt-cta__code-line--indent {
  padding-left: 20px;
}

.dt-cta__code-keyword {
  color: var(--signal);
}

.dt-cta__code-variable {
  color: var(--paper);
}

.dt-cta__code-operator {
  color: var(--paper-dim);
}

.dt-cta__code-bracket {
  color: var(--paper);
}

.dt-cta__code-property {
  color: #7DD3FC;
}

.dt-cta__code-string {
  color: var(--amber);
}

.dt-cta__code-cursor {
  display: inline-block;
  width: 8px;
  height: 1.1em;
  background: var(--signal);
  animation: caret-blink 1s steps(1) infinite;
  vertical-align: -0.15em;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .dt-hero__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .dt-hero__visual {
    order: -1;
    max-width: 600px;
    margin: 0 auto;
  }
  
  .dt-hero__devices {
    min-height: 300px;
  }
  
  .dt-hero__device--desktop {
    max-width: 100%;
  }
  
  .dt-hero__device--phone {
    width: 100px;
    height: 200px;
    bottom: -10px;
    right: 10px;
  }
  
  .dt-pricing__grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .dt-services__grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .dt-why__grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .dt-testimonials__grid {
    grid-template-columns: 1fr;
  }
  
  .dt-cta__card {
    grid-template-columns: 1fr;
    padding: 40px 32px;
  }
  
  .dt-cta__visual {
    order: -1;
  }
  
  .dt-problem__grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .dt-problem__item:last-child {
    grid-column: span 2;
  }
  
  .dt-pricing__addons-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .dt-hero {
    min-height: auto;
    padding: 32px 0 56px;
  }

  .dt-hero__inner {
    gap: 28px;
  }

  .dt-hero__content {
    display: flex;
    flex-direction: column;
  }

  .dt-hero__tag {
    font-size: 0.68rem;
    margin-bottom: 16px;
  }

  .dt-hero h1 {
    line-height: 1.1;
    margin-bottom: 18px;
  }
  
  .dt-hero h1 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
  }
  
  .dt-hero__content p {
    font-size: 0.95rem;
  }
  
  .dt-hero__trust {
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 0.68rem;
    line-height: 1.4;
  }

  .dt-hero__ctas {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 24px;
  }

  .dt-hero__ctas .btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }

  .dt-hero__visual {
    width: 100%;
    max-width: 440px;
  }

  .dt-hero__devices {
    min-height: 286px;
    align-items: center;
  }
  
  .dt-hero__device--phone {
    display: block;
    z-index: 2;
    width: 116px;
    height: 232px;
    right: 2px;
    bottom: -10px;
    border-width: 2px;
    border-radius: 18px;
  }

  .dt-hero__phone-notch {
    width: 38px;
    height: 13px;
    border-radius: 0 0 8px 8px;
  }

  .dt-hero__phone-screen {
    padding: 0 2px 2px;
  }

  .dt-hero__phone-header,
  .dt-hero__phone-app {
    margin-bottom: 8px;
  }

  .dt-hero__phone-app-icon {
    width: 20px;
    height: 20px;
  }
  
  .dt-pricing__grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    gap: 14px;
  }

  .dt-pricing__card {
    padding: 24px 20px;
  }

  .dt-pricing__card-header {
    margin-bottom: 12px;
  }

  .dt-pricing__card-actions {
    display: grid;
    gap: 8px;
  }

  .dt-pricing__card-actions .btn {
    width: 100%;
    justify-content: center;
  }
  
  .dt-services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .dt-services {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .dt-services__item {
    min-width: 0;
    padding: 14px 12px;
    border-radius: 9px;
  }

  .dt-services__icon {
    width: 34px;
    height: 34px;
    margin-bottom: 10px;
  }

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

  .dt-services__item h3 {
    font-size: 0.9rem;
    line-height: 1.2;
    margin-bottom: 6px;
  }

  .dt-services__item p {
    font-size: 0.72rem;
    line-height: 1.45;
    margin-bottom: 10px;
  }

  .dt-services__item::after {
    display: block;
    content: 'View service →';
    color: var(--signal);
    font: 0.48rem var(--font-mono);
    letter-spacing: 0.04em;
  }
  
  .dt-why__grid {
    grid-template-columns: 1fr;
  }
  
  .dt-problem__grid {
    grid-template-columns: 1fr;
  }
  
  .dt-problem__item:last-child {
    grid-column: span 1;
  }
  
  .dt-comparison__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .dt-comparison__arrow {
    transform: rotate(90deg);
    text-align: center;
  }
  
  .dt-process__step {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 24px;
    padding: 16px 0;
  }
  
  .dt-process__node {
    flex-direction: row;
    gap: 10px;
    padding-top: 0;
  }
  
  .dt-process__line {
    left: 16px;
    top: 40px;
  }
  
  .dt-cta__card {
    padding: 32px 24px;
  }
  
  .dt-cta__code {
    font-size: 0.75rem;
    padding: 20px 24px;
  }
  
  .dt-cta__actions {
    flex-direction: column;
    width: 100%;
  }
  
  .dt-cta__actions .btn {
    width: 100%;
    justify-content: center;
  }

  .dt-problem,
  .dt-services,
  .dt-comparison,
  .dt-pricing,
  .dt-process,
  .dt-why,
  .dt-testimonials,
  .dt-cta {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .dt-problem__item,
  .dt-services__item,
  .dt-why__item,
  .dt-testimonials__card {
    padding: 22px 20px;
  }

  .dt-services__header,
  .dt-comparison__header,
  .dt-pricing__header,
  .dt-process__header,
  .dt-why__header,
  .dt-testimonials__header {
    margin-bottom: 30px;
  }
  
  .dt-pricing__addons {
    padding: 28px 20px 24px;
  }
}

@media (max-width: 480px) {
  .dt-hero__device--phone {
    width: 104px;
    height: 208px;
    right: 0;
    bottom: -8px;
    border-radius: 16px;
  }

  .dt-hero__phone-screen {
    padding: 0 1px 1px;
  }

  .dt-hero__device--desktop {
    border-radius: 8px;
  }
  
  .dt-hero__screen-body {
    padding: 16px 18px 20px;
    min-height: 180px;
  }
  
  .dt-hero__screen-logo {
    margin-bottom: 12px;
  }
  
  .dt-hero__screen-logo-mark {
    width: 24px;
    height: 24px;
    font-size: 0.75rem;
  }
  
  .dt-hero__screen-logo span:last-child {
    font-size: 0.8rem;
  }
  
  .dt-hero__screen-headline {
    height: 14px;
  }
  
  .dt-hero__screen-text {
    height: 8px;
  }
  
  .dt-hero__screen-text::after {
    height: 8px;
  }
  
  .dt-hero__screen-button {
    height: 24px;
    width: 70px;
  }
  
  .dt-hero__screen-card {
    height: 40px;
  }
  
  .dt-pricing__card {
    padding: 20px 16px;
  }
  
  .dt-pricing__card-amount {
    font-size: 1.4rem;
  }
  
  .dt-pricing__card-features li {
    font-size: 0.8rem;
  }
  
  .dt-cta__code {
    font-size: 0.65rem;
    padding: 16px 18px;
    line-height: 1.8;
  }
  
  .dt-cta__code-line--indent {
    padding-left: 12px;
  }
}

/* ============================================================
   ANIMATION HELPERS
   ============================================================ */
@keyframes caret-blink {
  50% { opacity: 0; }
}

/* Digital twin hero surfaces */
.dt-hero__visual {
  width: 100%;
  min-width: 0;
}

.dt-hero__devices {
  min-height: 500px;
  align-items: center;
}

.dt-hero__device--desktop {
  z-index: 1;
  max-width: 820px;
  width: 100%;
  background: rgba(15, 20, 28, 0.82);
  border-color: rgba(94, 234, 212, 0.28);
  box-shadow: 0 35px 90px -35px rgba(0, 0, 0, 0.9), 0 0 50px rgba(94, 234, 212, 0.07);
  backdrop-filter: blur(8px);
}

.dt-hero__screen-bar {
  padding: 9px 14px;
  min-height: 36px;
}

.dt-hero__screen-url {
  flex: 1;
  margin-left: 6px;
  font-size: 0.58rem;
}

.dt-dashboard__live,
.dt-dashboard__feed-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: #86EFAC;
  letter-spacing: 0.08em;
}

.dt-dashboard__live-dot {
  width: 5px;
  height: 5px;
  display: inline-block;
  border-radius: 50%;
  background: #86EFAC;
  box-shadow: 0 0 10px rgba(134, 239, 172, 0.7);
  animation: dtLivePulse 1.4s ease-in-out infinite;
}

@keyframes dtLivePulse {
  50% { opacity: 0.35; transform: scale(0.75); }
}

.dt-dashboard__body {
  padding: 16px 18px 18px;
  background: rgba(10, 14, 20, 0.48);
}

.dt-dashboard__brand-row,
.dt-dashboard__section-head,
.dt-phone__card-title,
.dt-phone__chat-head,
.dt-phone__system {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dt-dashboard__brand-row {
  margin-bottom: 13px;
}

.dt-dashboard__brand,
.dt-dashboard__period,
.dt-dashboard__section-head,
.dt-phone__card-title,
.dt-phone__chat-head {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  color: var(--paper-dim);
}

.dt-dashboard__brand {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--paper);
  font-weight: 600;
}

.dt-dashboard__brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  color: var(--ink);
  background: var(--signal);
  font-family: var(--font-display);
  font-weight: 700;
}

.dt-dashboard__period { font-size: 0.48rem; }

.dt-dashboard__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.dt-dashboard__metric {
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: rgba(21, 27, 37, 0.72);
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.dt-dashboard__metric:hover {
  transform: translateY(-3px);
  border-color: rgba(94, 234, 212, 0.5);
  background: rgba(27, 35, 48, 0.9);
}

.dt-dashboard__metric-label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: 0.5rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.dt-dashboard__metric-label svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--signal);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dt-dashboard__metric strong {
  display: block;
  margin: 7px 0 2px;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1;
}

.dt-dashboard__metric-change {
  color: #86EFAC;
  font-family: var(--font-mono);
  font-size: 0.52rem;
}

.dt-dashboard__feed,
.dt-dashboard__chart,
.dt-dashboard__progress {
  padding: 11px 12px;
  margin-top: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: rgba(15, 20, 28, 0.68);
}

.dt-dashboard__section-head { margin-bottom: 8px; }
.dt-dashboard__section-head small { color: var(--paper-dim); opacity: 0.6; }
.dt-dashboard__chart-value { color: #86EFAC; }

.dt-dashboard__feed-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 82px;
  max-height: 112px;
  overflow: hidden;
}

.dt-dashboard__feed-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-top: 1px solid rgba(42, 51, 66, 0.55);
  color: var(--paper-dim);
  font-size: 0.62rem;
  animation: dtFeedIn 0.4s ease both;
}

.dt-dashboard__feed-item:first-child { border-top: 0; }
.dt-dashboard__feed-item svg { width: 13px; height: 13px; flex-shrink: 0; }
.dt-dashboard__feed-item strong { color: var(--paper); font-weight: 500; }
.dt-dashboard__feed-item time { margin-left: auto; color: var(--paper-dim); opacity: 0.55; font-family: var(--font-mono); font-size: 0.5rem; white-space: nowrap; }
.dt-dashboard__feed-item--order svg { color: #86EFAC; }
.dt-dashboard__feed-item--booking svg { color: #7DD3FC; }
.dt-dashboard__feed-item--shipment svg { color: var(--amber); }
.dt-dashboard__feed-item--inventory svg { color: #FF6159; }
.dt-dashboard__feed-item--message svg { color: var(--signal); }
.dt-dashboard__feed-item--deploy svg { color: #A78BFA; }

@keyframes dtFeedIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.dt-dashboard__chart svg { display: block; width: 100%; height: 72px; overflow: visible; }
.dt-dashboard__chart-line { fill: none; stroke: var(--signal); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 900; stroke-dashoffset: 900; animation: dtChartDraw 2.2s ease-out forwards; filter: drop-shadow(0 0 4px rgba(94, 234, 212, 0.7)); }
.dt-dashboard__chart-fill { fill: url(#dtGrowthFill); opacity: 0; animation: dtChartFade 1.4s 0.5s ease forwards; }
@keyframes dtChartDraw { to { stroke-dashoffset: 0; } }
@keyframes dtChartFade { to { opacity: 1; } }

.dt-dashboard__progress-track {
  height: 7px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--line-soft);
}

.dt-dashboard__progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--signal), #86EFAC);
  box-shadow: 0 0 14px rgba(94, 234, 212, 0.6);
  transition: width 1.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dt-dashboard__progress-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 7px;
  color: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: 0.46rem;
}

.dt-dashboard__progress-steps span { opacity: 0.55; }
.dt-dashboard__progress-steps .is-complete { color: #86EFAC; opacity: 1; }
.dt-dashboard__progress-steps .is-active { color: var(--signal); opacity: 1; }

.dt-hero__device--phone {
  right: -34px;
  bottom: -20px;
  width: 194px;
  height: 390px;
  z-index: 3;
  border-radius: 30px;
  background: linear-gradient(145deg, #303b48, #080b10 72%);
  border: 3px solid #465465;
  box-shadow: 0 35px 80px -25px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.dt-hero__phone-notch { width: 82px; height: 25px; border-radius: 0 0 16px 16px; }
.dt-hero__phone-screen { padding: 15px 13px 8px; background: #0f151d; border-radius: 25px; }
.dt-hero__phone-home { position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%); width: 62px; height: 4px; background: #718096; border-radius: 3px; }

.dt-phone__status,
.dt-phone__header,
.dt-phone__system,
.dt-phone__nav {
  display: flex;
  align-items: center;
}

.dt-phone__status { justify-content: space-between; padding: 4px 4px 14px; color: var(--paper); font: 600 0.54rem var(--font-mono); }
.dt-phone__header { justify-content: space-between; margin-bottom: 12px; color: var(--paper); }
.dt-phone__app-name { font: 600 0.82rem var(--font-display); }
.dt-phone__bell { position: relative; display: inline-flex; }
.dt-phone__bell svg { width: 17px; height: 17px; fill: none; stroke: var(--paper-dim); stroke-width: 1.7; }
.dt-phone__bell b { position: absolute; top: -5px; right: -7px; display: grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; background: var(--signal); color: var(--ink); font: 700 0.45rem var(--font-mono); }
.dt-phone__dashboard-card, .dt-phone__chat, .dt-phone__system { border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(145deg, rgba(94, 234, 212, 0.12), rgba(21, 27, 37, 0.7)); }
.dt-phone__dashboard-card { padding: 10px; }
.dt-phone__card-title, .dt-phone__chat-head { color: var(--paper-dim); font: 0.48rem var(--font-mono); letter-spacing: 0.07em; }
.dt-phone__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 10px; }
.dt-phone__stats span { display: flex; flex-direction: column; gap: 3px; }
.dt-phone__stats strong { color: var(--paper); font: 600 0.72rem var(--font-display); }
.dt-phone__stats small { color: var(--paper-dim); font: 0.45rem var(--font-mono); }
.dt-phone__status-dot { width: 6px; height: 6px; border-radius: 50%; background: #86EFAC; box-shadow: 0 0 8px rgba(134, 239, 172, 0.7); }
.dt-phone__notifications { min-height: 62px; margin: 9px 0; }
.dt-phone__notification { display: grid; grid-template-columns: 20px 1fr auto; gap: 6px; align-items: center; padding: 7px; border: 1px solid rgba(94, 234, 212, 0.18); border-radius: 8px; background: rgba(21, 27, 37, 0.9); animation: dtNotificationIn 0.45s ease both; }
.dt-phone__notification + .dt-phone__notification { margin-top: 5px; }
.dt-phone__notification svg { width: 13px; height: 13px; color: var(--signal); }
.dt-phone__notification strong, .dt-phone__notification small { display: block; }
.dt-phone__notification strong { color: var(--paper); font: 600 0.5rem var(--font-sans); }
.dt-phone__notification small { color: var(--paper-dim); font: 0.44rem var(--font-sans); }
.dt-phone__notification time { color: var(--paper-dim); font: 0.4rem var(--font-mono); }
@keyframes dtNotificationIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.dt-phone__chat { padding: 9px; }
.dt-phone__chat-messages { min-height: 72px; padding-top: 8px; }
.dt-phone__message { max-width: 92%; margin-bottom: 5px; padding: 5px 7px; border-radius: 7px; color: var(--paper); font: 0.48rem/1.35 var(--font-sans); background: rgba(42, 51, 66, 0.75); animation: dtMessageIn 0.4s ease both; }
.dt-phone__message--user { margin-left: auto; color: var(--ink); background: var(--signal); }
@keyframes dtMessageIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.dt-phone__chat-input { display: flex; justify-content: space-between; gap: 5px; margin-top: 5px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; color: var(--paper-dim); font: 0.46rem var(--font-mono); }
.dt-phone__chat-input span { color: var(--signal); }
.dt-phone__system { gap: 6px; margin-top: 8px; padding: 8px; color: var(--paper-dim); font: 0.46rem var(--font-mono); }
.dt-phone__system small { margin-left: auto; color: #86EFAC; }
.dt-phone__nav { justify-content: space-between; margin-top: 9px; padding: 8px 3px 18px; }
.dt-phone__nav span { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--paper-dim); font: 0.42rem var(--font-mono); }
.dt-phone__nav svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dt-phone__nav .is-active { color: var(--signal); }

.dt-hero__connection { position: absolute; right: 145px; top: 53%; width: 100px; height: 1px; z-index: 2; background: linear-gradient(90deg, transparent, var(--signal), transparent); opacity: 0.75; transform: rotate(-8deg); }
.dt-hero__connection span, .dt-hero__connection i, .dt-hero__connection b { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 10px var(--signal); }
.dt-hero__connection span { left: 14%; animation: dtDataFlow 2.2s linear infinite; }
.dt-hero__connection i { left: 52%; animation: dtDataFlow 2.2s 0.7s linear infinite; }
.dt-hero__connection b { left: 82%; animation: dtDataFlow 2.2s 1.4s linear infinite; }
@keyframes dtDataFlow { from { opacity: 0; transform: translateX(-16px); } 25%, 75% { opacity: 1; } to { opacity: 0; transform: translateX(16px); } }

/* .dt-hero__device (desktop dashboard + phone mockups) has a permanently-dark
   background — a later rule in this file overrides the earlier token-based
   one with a hardcoded dark literal. Re-pin tokens so their descendants
   (dashboard text, kali desktop chrome, phone UI) stay legible regardless
   of theme, same reasoning as .cy-console / .ct-mini. */
[data-theme="light"] .dt-hero__device,
[data-theme="light"] .dt-hero__connection {
  --ink: #0A0E14;
  --panel: #151B25;
  --panel-2: #1B2330;
  --line: #2A3342;
  --line-soft: #1E2530;
  --paper: #E9EDF2;
  --paper-dim: #9CA7B5;
  --signal: #5EEAD4;
  --signal-dim: #3A9E92;
  --amber: #F2A93B;
}

@media (max-width: 1024px) {
  .dt-hero__devices { min-height: 470px; }
  .dt-hero__device--desktop { max-width: 690px; }
  .dt-hero__device--phone { width: 164px; height: 330px; right: -12px; }
  .dt-hero__connection { right: 112px; width: 70px; }
}

@media (max-width: 768px) {
  .dt-hero__visual { max-width: 100%; }
  .dt-hero__devices { min-height: 420px; align-items: flex-start; }
  .dt-hero__device--desktop { width: 100%; max-width: none; }
  .dt-hero__device--phone { width: 142px; height: 286px; right: -5px; bottom: -14px; }
  .dt-dashboard__body { padding: 11px; }
  .dt-dashboard__metrics { grid-template-columns: repeat(2, 1fr); gap: 5px; }
  .dt-dashboard__metric { padding: 7px; }
  .dt-dashboard__metric strong { font-size: 1rem; }
  .dt-dashboard__feed-item { font-size: 0.5rem; }
  .dt-dashboard__chart svg { height: 50px; }
  .dt-dashboard__progress-steps { font-size: 0.38rem; gap: 4px; }
  .dt-hero__connection { right: 89px; top: 55%; width: 50px; }
}

@media (max-width: 480px) {
  .dt-hero__devices { min-height: 350px; }
  .dt-hero__device--desktop { border-radius: 8px; }
  .dt-hero__screen-bar { padding: 7px 9px; }
  .dt-hero__screen-url { font-size: 0.46rem; }
  .dt-dashboard__body { padding: 8px; }
  .dt-dashboard__period { display: none; }
  .dt-dashboard__metric-label { font-size: 0.42rem; }
  .dt-dashboard__metric strong { font-size: 0.88rem; }
  .dt-dashboard__feed, .dt-dashboard__chart, .dt-dashboard__progress { padding: 7px; margin-top: 5px; }
  .dt-dashboard__feed-items { min-height: 58px; max-height: 70px; }
  .dt-dashboard__progress-steps { display: none; }
  .dt-hero__device--phone { width: 116px; height: 234px; right: -2px; bottom: -9px; border-radius: 22px; }
  .dt-hero__phone-screen { padding: 10px 8px 5px; border-radius: 18px; }
  .dt-phone__app-name { font-size: 0.65rem; }
  .dt-phone__stats strong { font-size: 0.58rem; }
  .dt-phone__notifications { min-height: 45px; }
  .dt-phone__chat-messages { min-height: 48px; }
  .dt-phone__message { font-size: 0.4rem; }
  .dt-hero__connection { display: none; }

  .dt-services__grid {
    gap: 8px;
  }

  .dt-services__item {
    padding: 12px 10px;
  }

  .dt-services__item h3 {
    font-size: 0.78rem;
  }

  .dt-services__item p {
    font-size: 0.64rem;
    line-height: 1.4;
  }

  .dt-services__item::after {
    font-size: 0.42rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dt-dashboard__chart-line,
  .dt-dashboard__chart-fill,
  .dt-dashboard__live-dot,
  .dt-hero__connection span,
  .dt-hero__connection i,
  .dt-hero__connection b { animation: none; }
  .dt-dashboard__chart-line { stroke-dashoffset: 0; }
  .dt-dashboard__chart-fill { opacity: 1; }
}

/* Compact Kali-inspired laptop desktop shell. */
@media (min-width: 769px) {
  .dt-hero__device--desktop {
    position: relative;
    padding-top: 25px;
    overflow: hidden;
    background: #10161d;
  }

  .dt-kali-panel {
    position: absolute;
    inset: 0 0 auto;
    z-index: 12;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 25px;
    padding: 0 10px;
    background: rgba(8, 12, 17, 0.96);
    border-bottom: 1px solid rgba(94, 234, 212, 0.18);
    color: var(--paper-dim);
    font: 0.48rem var(--font-mono);
  }

  .dt-kali-panel__menu {
    padding: 0;
    border: 0;
    color: var(--paper);
    background: transparent;
    font: inherit;
    cursor: pointer;
  }
  .dt-kali-panel__menu b { color: var(--signal); font-weight: 400; }
  .dt-kali-panel__item { color: var(--paper); }
  .dt-kali-panel__launcher { color: var(--signal); letter-spacing: 0.12em; }
  .dt-kali-panel__title { flex: 1; color: var(--signal); letter-spacing: 0.08em; }
  .dt-kali-panel__status { display: inline-flex; align-items: center; gap: 4px; color: #86EFAC; }
  .dt-kali-panel__status i { width: 4px; height: 4px; border-radius: 50%; background: #86EFAC; }
  .dt-kali-panel__workspaces { display: inline-flex; gap: 3px; }
  .dt-kali-panel__workspaces b { display: grid; place-items: center; width: 14px; height: 13px; border: 1px solid var(--line); border-radius: 2px; color: var(--paper-dim); font-weight: 400; }
  .dt-kali-panel__workspaces .is-active { border-color: var(--signal); color: var(--signal); }
  .dt-kali-panel__tray { color: var(--paper-dim); letter-spacing: 0.12em; }
  .dt-kali-panel__clock { color: var(--paper); }

  .dt-kali-icons {
    position: absolute;
    top: 42px;
    left: 8px;
    z-index: 10;
    display: grid;
    gap: 10px;
    width: 52px;
  }

  .dt-kali-icon {
    display: grid;
    justify-items: center;
    gap: 3px;
    padding: 3px 1px;
    border: 0;
    color: var(--paper-dim);
    background: transparent;
    font: 0.42rem var(--font-mono);
    cursor: pointer;
  }

  .dt-kali-icon:hover,
  .dt-kali-icon:focus-visible { color: var(--signal); }
  .dt-kali-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

  .dt-hero__device--desktop > .dt-hero__screen {
    position: relative;
    z-index: 2;
    width: calc(100% - 70px);
    margin-left: 66px;
  }

  .dt-kali-window {
    position: absolute;
    z-index: 14;
    display: none;
    overflow: hidden;
    border: 1px solid rgba(94, 234, 212, 0.45);
    border-radius: 5px;
    background: rgba(10, 14, 20, 0.96);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.65), 0 0 22px rgba(94, 234, 212, 0.08);
    animation: dtWindowOpen 0.35s ease both;
  }

  .dt-kali-window.is-open { display: block; }
  .dt-kali-window--terminal { top: 70px; left: 105px; width: 45%; }
  .dt-kali-window--browser { top: 86px; right: 30px; width: 42%; }
  .dt-kali-window--files { top: 96px; left: 110px; width: 34%; }

  @keyframes dtWindowOpen {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .dt-kali-window__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 7px;
    background: #1a232d;
    color: var(--paper-dim);
    font: 0.46rem var(--font-mono);
  }

  .dt-kali-window__bar b { flex: 1; color: var(--paper); font-weight: 500; }
  .dt-kali-window__bar button { border: 0; color: var(--paper-dim); background: transparent; font-size: 0.8rem; cursor: pointer; }
  .dt-kali-window pre { margin: 0; padding: 10px; color: #b9c7d5; font: 0.48rem/1.7 var(--font-mono); white-space: pre-wrap; }
  .dt-kali-prompt { color: var(--signal); }

  .dt-kali-browser__tabs { display: flex; gap: 4px; padding: 5px; background: #10161d; font: 0.43rem var(--font-mono); color: var(--paper-dim); }
  .dt-kali-browser__tabs span { padding: 4px 6px; border-radius: 3px; }
  .dt-kali-browser__tabs .is-active { color: var(--paper); background: #26313d; }
  .dt-kali-browser__tabs i { margin-left: auto; padding: 3px; color: var(--signal); font-style: normal; }
  .dt-kali-browser__body { display: grid; gap: 6px; padding: 18px; background: linear-gradient(145deg, #17232b, #0d141b); }
  .dt-kali-browser__body strong { color: var(--paper); font: 600 0.8rem var(--font-display); }
  .dt-kali-browser__body small { color: var(--paper-dim); font: 0.5rem/1.5 var(--font-sans); }
  .dt-kali-browser__body div { display: flex; gap: 5px; margin-top: 8px; }
  .dt-kali-browser__body em { display: block; flex: 1; height: 28px; border: 1px solid var(--line); border-radius: 3px; background: rgba(94, 234, 212, 0.08); }
  .dt-kali-files { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 14px; color: var(--paper-dim); font: 0.5rem var(--font-mono); }
  .dt-kali-files span { padding: 10px 6px; border: 1px solid var(--line); border-radius: 4px; background: rgba(94, 234, 212, 0.06); }

  .dt-kali-dock {
    position: absolute;
    left: 50%;
    bottom: 5px;
    z-index: 16;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    border: 1px solid rgba(94, 234, 212, 0.22);
    border-radius: 7px;
    background: rgba(8, 12, 17, 0.86);
    transform: translateX(-50%);
  }

  .dt-kali-dock button { width: 24px; height: 22px; border: 0; border-radius: 4px; color: var(--paper); background: transparent; font-size: 0.85rem; cursor: pointer; }
  .dt-kali-dock button:hover { color: var(--signal); background: rgba(94, 234, 212, 0.1); }
  .dt-kali-dock span { width: 1px; height: 16px; margin: 0 2px; background: var(--line); }
  .dt-kali-dock b { padding: 0 8px; color: var(--signal); font: 0.46rem var(--font-mono); font-weight: 400; }

  .dt-kali-cursor {
    position: absolute;
    z-index: 20;
    top: 45%;
    left: 42%;
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-bottom: 3px solid transparent;
    border-left: 13px solid var(--paper);
    filter: drop-shadow(1px 1px 1px #000);
    pointer-events: none;
    animation: dtCursorTour 8s ease-in-out infinite;
  }

  @keyframes dtCursorTour {
    0%, 12% { transform: translate(0, 0); }
    22%, 32% { transform: translate(-125px, -105px); }
    38%, 50% { transform: translate(-125px, -105px) scale(0.85); }
    60%, 72% { transform: translate(105px, -70px); }
    78%, 100% { transform: translate(0, 0); }
  }
}

@media (max-width: 768px) {
  .dt-kali-panel {
    position: absolute;
    inset: 0 0 auto;
    z-index: 12;
    display: flex;
    height: 22px;
    gap: 7px;
    padding: 0 7px;
    background: linear-gradient(180deg, #1d2731, #0b1016);
    border-bottom-color: rgba(94, 234, 212, 0.26);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    font-size: 0.4rem;
  }

  .dt-kali-panel__item,
  .dt-kali-panel__launcher,
  .dt-kali-panel__title,
  .dt-kali-panel__status,
  .dt-kali-panel__tray {
    display: none;
  }

  .dt-kali-panel__menu {
    font-size: 0.42rem;
  }

  .dt-kali-panel__workspaces {
    margin-left: auto;
  }

  .dt-kali-panel__workspaces b {
    width: 12px;
    height: 11px;
    font-size: 0.38rem;
  }

  .dt-kali-panel__clock {
    font-size: 0.42rem;
  }

  .dt-kali-icons,
  .dt-kali-window,
  .dt-kali-cursor,
  .dt-hero__connection { display: none; }

  .dt-hero__device--desktop > .dt-hero__screen { width: 100%; margin-left: 0; }
  .dt-hero__device--desktop { padding-top: 22px; }

  .dt-kali-dock {
    position: absolute;
    left: 50%;
    z-index: 16;
    align-items: center;
    display: flex;
    bottom: 4px;
    gap: 2px;
    padding: 3px 4px;
    border-radius: 6px;
    background: rgba(8, 12, 17, 0.94);
    transform: translateX(-50%);
  }

  .dt-kali-dock button {
    width: 20px;
    height: 18px;
    font-size: 0.7rem;
  }

  .dt-kali-dock b {
    padding: 0 5px;
    font-size: 0.38rem;
  }

  .dt-hero__device--phone {
    width: 128px;
    height: 258px;
    right: 4px;
    bottom: -8px;
    border-width: 2px;
    border-radius: 22px;
  }

  .dt-hero__phone-notch {
    width: 54px;
    height: 16px;
    border-radius: 0 0 10px 10px;
  }

  .dt-hero__phone-screen {
    min-width: 0;
    width: 100%;
    padding: 8px 7px 4px;
    overflow: hidden;
    border-radius: 18px;
  }

  .dt-phone__status {
    padding: 2px 3px 7px;
    font-size: 0.4rem;
  }

  .dt-phone__header {
    margin-bottom: 7px;
  }

  .dt-phone__app-name {
    font-size: 0.62rem;
  }

  .dt-phone__bell svg {
    width: 13px;
    height: 13px;
  }

  .dt-phone__bell b {
    top: -4px;
    right: -5px;
    width: 10px;
    height: 10px;
    font-size: 0.35rem;
  }

  .dt-phone__dashboard-card,
  .dt-phone__chat,
  .dt-phone__system {
    border-radius: 7px;
  }

  .dt-phone__dashboard-card {
    padding: 7px;
  }

  .dt-phone__card-title,
  .dt-phone__chat-head {
    font-size: 0.38rem;
  }

  .dt-phone__stats {
    gap: 3px;
    margin-top: 6px;
  }

  .dt-phone__stats strong {
    font-size: 0.52rem;
    white-space: nowrap;
  }

  .dt-phone__stats small {
    font-size: 0.34rem;
  }

  .dt-phone__status-dot {
    width: 4px;
    height: 4px;
  }

  .dt-phone__notifications {
    min-height: 40px;
    margin: 5px 0;
  }

  .dt-phone__notification {
    grid-template-columns: 14px minmax(0, 1fr) 16px;
    gap: 4px;
    min-width: 0;
    padding: 5px;
    border-radius: 6px;
  }

  .dt-phone__notification svg {
    width: 10px;
    height: 10px;
  }

  .dt-phone__notification strong {
    overflow: hidden;
    font-size: 0.38rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dt-phone__notification small {
    overflow: hidden;
    font-size: 0.34rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dt-phone__notification time {
    font-size: 0.32rem;
  }

  .dt-phone__chat {
    padding: 6px;
  }

  .dt-phone__chat-messages {
    min-height: 42px;
    padding-top: 5px;
  }

  .dt-phone__message {
    max-width: 94%;
    margin-bottom: 3px;
    padding: 4px 5px;
    border-radius: 5px;
    font-size: 0.36rem;
  }

  .dt-phone__chat-input {
    gap: 3px;
    margin-top: 3px;
    padding: 4px 5px;
    overflow: hidden;
    font-size: 0.34rem;
    white-space: nowrap;
  }

  .dt-phone__system {
    gap: 4px;
    margin-top: 5px;
    padding: 5px;
    overflow: hidden;
    font-size: 0.34rem;
    white-space: nowrap;
  }

  .dt-phone__system span:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dt-phone__nav {
    margin-top: 4px;
    padding: 5px 2px 14px;
  }

  .dt-phone__nav span {
    gap: 2px;
    font-size: 0.32rem;
  }

  .dt-phone__nav svg {
    width: 11px;
    height: 11px;
  }

  .dt-hero__phone-home {
    bottom: 5px;
    width: 38px;
    height: 3px;
  }

  .dt-hero__device--phone {
    width: 112px;
    height: 226px;
    right: 3px;
    bottom: -7px;
  }

  .dt-hero__phone-screen {
    padding: 7px 6px 3px;
  }

  .dt-phone__notifications {
    min-height: 34px;
  }

  .dt-phone__notification:nth-child(2) {
    display: none;
  }

  .dt-phone__chat-messages {
    min-height: 34px;
  }

  .dt-phone__message:nth-child(1) {
    display: none;
  }
}

[data-reveal] {
  opacity: 0;
}

[data-reveal="fade"] {
  opacity: 0;
}

[data-reveal="up"] {
  opacity: 0;
  transform: translateY(36px);
}

[data-reveal="scale"] {
  opacity: 0;
  transform: scale(0.94);
}