/* =============================================================
   DTDesk — Premium Design System (site-premium.css)
   ============================================================= 
   A comprehensive redesign layer that overrides legacy styles
   with an editorial, tech-forward aesthetic.
   Author: DTDesk redesign — Jan 2026
============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  /* Editorial-tech palette (light) */
  --dt-bg: #F7F5F0;
  --dt-bg-alt: #FFFFFF;
  --dt-ink: #0A0E1A;
  --dt-ink-soft: #1F2937;
  --dt-muted: #52607A;
  --dt-line: rgba(10, 14, 26, 0.08);
  --dt-line-strong: rgba(10, 14, 26, 0.16);
  --dt-card: #FFFFFF;
  --dt-elevated: #FBFBF7;

  /* Signature accents */
  --dt-violet: #6D4AFF;
  --dt-violet-2: #4F30D9;
  --dt-cyan: #00C2D1;
  --dt-amber: #F5A524;
  --dt-emerald: #10B981;
  --dt-rose: #F43F5E;

  /* Gradients */
  --dt-grad-hero: linear-gradient(135deg, #6D4AFF 0%, #00C2D1 100%);
  --dt-grad-warm: linear-gradient(135deg, #F5A524 0%, #F43F5E 100%);
  --dt-grad-ink: linear-gradient(135deg, #0A0E1A 0%, #1F2937 100%);
  --dt-grad-glass: linear-gradient(160deg, rgba(255,255,255,0.9) 0%, rgba(247,245,240,0.6) 100%);

  /* Type */
  --dt-font-display: 'Instrument Serif', 'Cormorant Garamond', ui-serif, Georgia, serif;
  --dt-font-body: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --dt-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Rhythm */
  --dt-radius-sm: 10px;
  --dt-radius: 18px;
  --dt-radius-lg: 28px;
  --dt-shadow-sm: 0 1px 2px rgba(10,14,26,.05), 0 1px 6px rgba(10,14,26,.04);
  --dt-shadow: 0 8px 24px rgba(10,14,26,.06), 0 2px 6px rgba(10,14,26,.04);
  --dt-shadow-lg: 0 32px 64px rgba(10,14,26,.12), 0 8px 24px rgba(10,14,26,.08);
  --dt-shadow-glow: 0 20px 50px -12px rgba(109, 74, 255, 0.35);
}

html[data-theme="dark"] {
  --dt-bg: #060812;
  --dt-bg-alt: #0B0F1E;
  --dt-ink: #F1F5F9;
  --dt-ink-soft: #E2E8F0;
  --dt-muted: #8B98B0;
  --dt-line: rgba(241, 245, 249, 0.08);
  --dt-line-strong: rgba(241, 245, 249, 0.14);
  --dt-card: #0F1526;
  --dt-elevated: #141B30;

  --dt-grad-glass: linear-gradient(160deg, rgba(20,27,48,0.9) 0%, rgba(11,15,30,0.6) 100%);
  --dt-shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 1px 6px rgba(0,0,0,.3);
  --dt-shadow: 0 8px 24px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3);
  --dt-shadow-lg: 0 32px 64px rgba(0,0,0,.6), 0 8px 24px rgba(0,0,0,.4);
}

/* ---------- 2. GLOBAL RESET & BASE ---------- */
html { scroll-behavior: smooth; }

body,
body.admin-ui-off {
  font-family: var(--dt-font-body) !important;
  background: var(--dt-bg) !important;
  color: var(--dt-ink) !important;
  font-feature-settings: 'ss01', 'cv11';
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

/* Cosmic backdrop */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1000px 500px at 12% -8%, rgba(109, 74, 255, 0.09), transparent 60%),
    radial-gradient(900px 480px at 95% 8%, rgba(0, 194, 209, 0.07), transparent 55%),
    radial-gradient(700px 400px at 50% 100%, rgba(245, 165, 36, 0.05), transparent 55%);
  pointer-events: none;
}
html[data-theme="dark"] body::before {
  background:
    radial-gradient(1000px 500px at 12% -8%, rgba(109, 74, 255, 0.18), transparent 60%),
    radial-gradient(900px 480px at 95% 8%, rgba(0, 194, 209, 0.14), transparent 55%),
    radial-gradient(700px 400px at 50% 100%, rgba(245, 165, 36, 0.08), transparent 55%);
}

/* Selection */
::selection { background: var(--dt-violet); color: #fff; }

/* Focus rings */
:focus-visible {
  outline: 2px solid var(--dt-violet);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- 3. TYPOGRAPHY ---------- */
h1, h2, h3, .h1, .h2, .h3,
.hero-title, .section-title,
.home-section h1, .home-section h2, .home-section h3 {
  font-family: var(--dt-font-display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  color: var(--dt-ink) !important;
  line-height: 1.05 !important;
}

h1, .h1, .hero-title, .home-section h1 {
  font-size: clamp(2.4rem, 5.5vw, 4.6rem) !important;
  margin: 0 0 0.6em !important;
}
h2, .h2, .section-title, .home-section h2 {
  font-size: clamp(1.9rem, 3.6vw, 3rem) !important;
  margin: 0 0 0.4em !important;
}
h3, .h3, .home-section h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem) !important; }

/* Gradient text utility */
.dt-gradient-text,
.hero-title em, .hero-title .accent,
.home-section h1 em, .home-section h2 em {
  background: var(--dt-grad-hero);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
}

/* Eyebrow / kicker */
.dt-kicker, .kicker, .eyebrow, .section-eyebrow {
  font-family: var(--dt-font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dt-violet);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.dt-kicker::before, .kicker::before {
  content: "";
  width: 24px; height: 1px;
  background: currentColor;
  opacity: 0.6;
}

p, li, .prose { color: var(--dt-ink-soft); font-size: 16px; }
.muted, .text-muted, .small { color: var(--dt-muted) !important; }
a { color: var(--dt-violet); transition: color .2s ease, opacity .2s ease; }
a:hover { color: var(--dt-violet-2); }
html[data-theme="dark"] a { color: #A78BFA; }
html[data-theme="dark"] a:hover { color: #C4B5FD; }

/* ---------- 4. HEADER (public site) ---------- */
.site-header {
  background: transparent !important;
  padding: 18px var(--site-pad, clamp(16px, 3vw, 40px)) 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.site-header .header-bar {
  background: var(--dt-grad-glass) !important;
  border: 1px solid var(--dt-line-strong) !important;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--dt-shadow) !important;
  border-radius: 999px !important;
  padding: 6px 8px 6px 22px !important;
}
html[data-theme="dark"] .site-header .header-bar {
  background: rgba(11, 15, 30, 0.72) !important;
  border-color: rgba(241, 245, 249, 0.1) !important;
}
.site-header .nav-row { min-height: 56px !important; }

.site-header .logo a {
  color: var(--dt-ink) !important;
  font-family: var(--dt-font-display) !important;
  font-weight: 400 !important;
  font-size: 1.5rem !important;
  letter-spacing: -0.02em !important;
  text-shadow: none !important;
  padding: 0 !important;
  position: relative;
}
.site-header .logo a::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--dt-grad-hero);
  border-radius: 50%;
  margin-left: 4px;
  vertical-align: super;
  box-shadow: 0 0 12px rgba(109, 74, 255, 0.6);
}

.site-header .nav-left a,
.site-header .nav-services-main {
  color: var(--dt-ink-soft) !important;
  font-family: var(--dt-font-body) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: .55rem .85rem !important;
  border-radius: 999px !important;
  transition: all .2s ease !important;
  position: relative;
}
.site-header .nav-left a:hover,
.site-header .nav-left a.active,
.site-header .nav-services-main:hover,
.site-header .nav-services-main.active {
  background: var(--dt-line) !important;
  color: var(--dt-ink) !important;
}

.site-header .nav-services-sub {
  background: var(--dt-card) !important;
  border: 1px solid var(--dt-line-strong) !important;
  border-radius: 18px !important;
  box-shadow: var(--dt-shadow-lg) !important;
  padding: 8px !important;
  margin-top: 8px !important;
}
.site-header .nav-services-sub a {
  color: var(--dt-ink) !important;
  padding: .65rem .85rem !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  transition: background .15s ease;
}
.site-header .nav-services-sub a:hover {
  background: linear-gradient(135deg, rgba(109,74,255,0.08), rgba(0,194,209,0.06)) !important;
  color: var(--dt-violet) !important;
}

.site-header .theme-toggle {
  background: var(--dt-line) !important;
  border: 1px solid var(--dt-line-strong) !important;
  color: var(--dt-ink) !important;
  border-radius: 999px !important;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 !important;
  transition: all .2s;
}
.site-header .theme-toggle:hover { background: var(--dt-violet); color: #fff !important; border-color: var(--dt-violet); }

.site-header .btn-quote {
  background: var(--dt-ink) !important;
  color: #fff !important;
  border: 1px solid var(--dt-ink) !important;
  border-radius: 999px !important;
  padding: .6rem 1.1rem !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em;
  box-shadow: 0 8px 20px rgba(10,14,26,.18);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  display: inline-flex; align-items: center; gap: 8px;
}
.site-header .btn-quote::after {
  content: "→";
  transition: transform .2s ease;
  font-family: var(--dt-font-body);
}
.site-header .btn-quote:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(109, 74, 255, 0.35);
  background: var(--dt-violet) !important;
  border-color: var(--dt-violet) !important;
}
.site-header .btn-quote:hover::after { transform: translateX(4px); }
html[data-theme="dark"] .site-header .btn-quote { background: #fff !important; color: var(--dt-ink) !important; border-color: #fff !important; }
html[data-theme="dark"] .site-header .btn-quote:hover { background: var(--dt-violet) !important; color: #fff !important; }

.site-header .nav-toggle span { background: var(--dt-ink) !important; }

/* ---------- 5. HERO ---------- */
.hero-softek, .hero-has-slider, section#home {
  padding-top: clamp(80px, 12vh, 140px) !important;
  padding-bottom: clamp(70px, 10vh, 120px) !important;
  position: relative;
  overflow: hidden;
}
.hero-softek-bg { display: none !important; }

.hero-softek::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 800px 400px at 20% 30%, rgba(109, 74, 255, 0.15), transparent),
    radial-gradient(ellipse 700px 380px at 80% 70%, rgba(0, 194, 209, 0.12), transparent);
  pointer-events: none;
  z-index: 0;
  animation: dt-drift 22s ease-in-out infinite alternate;
}
@keyframes dt-drift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-3%, 2%) scale(1.06); }
}
.hero-softek > *, section#home > * { position: relative; z-index: 1; }

/* Grid overlay */
.hero-softek::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--dt-line-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--dt-line-strong) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 80%);
  opacity: 0.35;
  pointer-events: none;
}

/* ---------- 6. SECTIONS ---------- */
.home-section, section {
  padding: clamp(60px, 8vw, 110px) 0 !important;
}
.home-section + .home-section { border-top: 1px solid var(--dt-line); }

/* ---------- 7. CARDS ---------- */
.card, .service-card, .case-card, .offer-card,
.home-section .card, .home-section .offer,
.dt-card {
  background: var(--dt-card) !important;
  border: 1px solid var(--dt-line) !important;
  border-radius: var(--dt-radius) !important;
  box-shadow: var(--dt-shadow-sm) !important;
  padding: clamp(20px, 3vw, 32px) !important;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s ease, border-color .3s ease !important;
  position: relative;
  overflow: hidden;
}
.card::before, .service-card::before, .offer-card::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(109,74,255,0.04) 100%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.card:hover, .service-card:hover, .offer-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--dt-shadow-lg) !important;
  border-color: var(--dt-line-strong) !important;
}
.card:hover::before, .service-card:hover::before, .offer-card:hover::before { opacity: 1; }

/* Feature card icons — accented with soft blob */
.card .icon, .card .card-icon, .offer-icon, .service-icon,
.svc-ico, .step-num, .step-number {
  width: 56px !important; height: 56px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(109,74,255,.12), rgba(0,194,209,.08)) !important;
  color: var(--dt-violet) !important;
  display: inline-flex !important;
  align-items: center; justify-content: center;
  font-size: 22px !important;
  font-weight: 700 !important;
  margin-bottom: 16px !important;
  border: 1px solid rgba(109,74,255,0.15);
}

/* ---------- 8. BUTTONS ---------- */
.button, .btn, .cta, .btn-primary, button:not(.nav-toggle):not(.theme-toggle):not(.quote-modal-close):not(.lg-exit-close):not(.wa-float):not(.lg-cta-popup-close):not(.admin-chat-close):not(.admin-chat-float):not(#navToggle):not(#themeToggle):not(#menuBtn):not(.admin-modal-close),
a.button, a.btn, a.cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px !important;
  border-radius: 999px !important;
  font-family: var(--dt-font-body) !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
  letter-spacing: -0.005em;
  text-decoration: none !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
  transition: transform .18s ease, box-shadow .2s ease, background .2s ease, color .2s ease !important;
  line-height: 1.2 !important;
}
.button, .btn-primary, .cta.primary, a.button, .btn.primary {
  background: var(--dt-ink) !important;
  color: #fff !important;
  border-color: var(--dt-ink) !important;
  box-shadow: 0 8px 18px rgba(10,14,26,.14);
}
.button:hover, .btn-primary:hover, .cta.primary:hover, a.button:hover {
  transform: translateY(-2px);
  background: var(--dt-violet) !important;
  border-color: var(--dt-violet) !important;
  box-shadow: 0 16px 32px rgba(109,74,255,0.32);
  color: #fff !important;
}
html[data-theme="dark"] .button, html[data-theme="dark"] .btn-primary {
  background: #fff !important; color: var(--dt-ink) !important; border-color: #fff !important;
}
html[data-theme="dark"] .button:hover { background: var(--dt-violet) !important; color: #fff !important; border-color: var(--dt-violet) !important; }

.button.light, .btn-secondary, .btn.secondary, .cta.secondary {
  background: transparent !important;
  color: var(--dt-ink) !important;
  border-color: var(--dt-line-strong) !important;
  box-shadow: none;
}
.button.light:hover, .btn-secondary:hover {
  background: var(--dt-line) !important;
  color: var(--dt-ink) !important;
  border-color: var(--dt-ink) !important;
}
html[data-theme="dark"] .button.light { color: var(--dt-ink) !important; }

/* Ghost / underline link */
.btn-ghost, .link-arrow {
  background: transparent !important;
  color: var(--dt-violet) !important;
  padding: 8px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.btn-ghost:hover, .link-arrow:hover { border-bottom-color: var(--dt-violet) !important; transform: none !important; }

/* ---------- 9. FORMS ---------- */
input:not([type="checkbox"]):not([type="radio"]),
textarea, select {
  font-family: var(--dt-font-body) !important;
  border: 1.5px solid var(--dt-line-strong) !important;
  background: var(--dt-card) !important;
  color: var(--dt-ink) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  font-size: 15px !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
  width: 100%;
  box-sizing: border-box;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--dt-violet) !important;
  box-shadow: 0 0 0 4px rgba(109, 74, 255, 0.15) !important;
  outline: none !important;
}
label { font-weight: 500; font-size: 14px; color: var(--dt-ink-soft); }

/* ---------- 10. TAGS / CHIPS / BADGES ---------- */
.chip, .badge, .tag, .pill, .proof-chip {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 6px 12px !important;
  background: var(--dt-line) !important;
  color: var(--dt-ink) !important;
  border: 1px solid var(--dt-line-strong) !important;
  border-radius: 999px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  font-family: var(--dt-font-body) !important;
}
.chip-accent, .badge-accent, .proof-chip {
  background: linear-gradient(135deg, rgba(109,74,255,0.1), rgba(0,194,209,0.08)) !important;
  color: var(--dt-violet) !important;
  border-color: rgba(109,74,255,0.2) !important;
}

/* ---------- 11. FOOTER (public) ---------- */
.site-footer {
  background: var(--dt-ink) !important;
  color: #E2E8F0 !important;
  padding: clamp(48px, 6vw, 80px) 24px 24px !important;
  margin-top: 60px !important;
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 600px 300px at 15% 20%, rgba(109,74,255,0.22), transparent),
    radial-gradient(ellipse 500px 260px at 90% 90%, rgba(0,194,209,0.15), transparent);
  pointer-events: none;
}
.site-footer .footer-wrap { position: relative; max-width: 1280px !important; }

.site-footer .brand-name {
  font-family: var(--dt-font-display) !important;
  font-weight: 400 !important;
  font-size: 26px !important;
  letter-spacing: -0.02em !important;
  color: #fff !important;
}
.site-footer .brand-tag { opacity: 0.75 !important; max-width: 320px; font-size: 14px !important; line-height: 1.6 !important; }
.site-footer .footer-col h4 {
  font-family: var(--dt-font-mono) !important;
  text-transform: uppercase;
  font-size: 11.5px !important;
  letter-spacing: 0.15em;
  color: #A78BFA !important;
  font-weight: 600 !important;
  margin-bottom: 16px !important;
}
.site-footer .footer-col a {
  color: #CBD5E1 !important;
  font-size: 14px !important;
  transition: color .2s, transform .2s;
  display: inline-block;
}
.site-footer .footer-col a:hover { color: #fff !important; transform: translateX(3px); }

.site-footer .social-icons a {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  width: 40px !important; height: 40px !important;
  font-weight: 700;
  transition: all .25s ease;
}
.site-footer .social-icons a:hover {
  background: var(--dt-violet) !important;
  border-color: var(--dt-violet) !important;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 24px rgba(109,74,255,0.4);
}
.site-footer .footer-copy { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 20px; margin-top: 40px !important; }
.site-footer .footer-legal { color: #94A3B8 !important; }

/* Newsletter */
.footer-newsletter-form {
  display: flex; gap: 8px; margin-top: 12px;
}
.footer-newsletter-form input {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  flex: 1;
}
.footer-newsletter-form input::placeholder { color: #94A3B8; }
.footer-newsletter-form button {
  background: var(--dt-grad-hero) !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.footer-newsletter-form button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(109,74,255,0.35); }

/* ---------- 12. WHATSAPP FLOAT ---------- */
.wa-float, .floating-wa {
  bottom: 24px !important;
  right: 24px !important;
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.4), 0 0 0 4px rgba(37, 211, 102, 0.1) !important;
  animation: wa-pulse 2.6s ease-in-out infinite;
}
@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 12px 30px rgba(37,211,102,.4), 0 0 0 0 rgba(37,211,102,.4); }
  50%      { box-shadow: 0 12px 30px rgba(37,211,102,.4), 0 0 0 14px rgba(37,211,102,0); }
}

/* ---------- 13. MODAL POLISH ---------- */
.modal-backdrop, .quote-modal-backdrop {
  background: rgba(6, 8, 18, 0.72) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.quote-modal-card, .modal-card {
  background: var(--dt-card) !important;
  border: 1px solid var(--dt-line-strong) !important;
  border-radius: var(--dt-radius-lg) !important;
  box-shadow: var(--dt-shadow-lg) !important;
}
.quote-modal-head h3 { font-family: var(--dt-font-display) !important; font-weight: 400 !important; color: var(--dt-ink) !important; }

/* ---------- 14. UTILITIES / MICRO-INTERACTIONS ---------- */
.dt-reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease; }
.dt-reveal.is-in { opacity: 1; transform: none; }

.dt-marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.dt-marquee-track { display: flex; gap: 48px; animation: dt-scroll 30s linear infinite; }
@keyframes dt-scroll { to { transform: translateX(-50%); } }

/* Divider line */
.dt-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--dt-line-strong), transparent);
  border: 0;
  margin: 40px 0;
}

/* Number stat highlight */
.stat-number, .counter {
  font-family: var(--dt-font-display) !important;
  font-weight: 400 !important;
  font-size: clamp(2.4rem, 5vw, 3.6rem) !important;
  background: var(--dt-grad-hero);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}

/* Table polish */
table { border-collapse: separate; border-spacing: 0; width: 100%; }
th { font-family: var(--dt-font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--dt-muted); }
th, td { border-bottom: 1px solid var(--dt-line); padding: 14px 16px; text-align: left; }

/* Accordion (FAQ) */
details, .faq-item {
  border: 1px solid var(--dt-line) !important;
  border-radius: var(--dt-radius) !important;
  padding: 6px 8px !important;
  background: var(--dt-card);
  margin-bottom: 10px;
  transition: box-shadow .2s;
}
details[open], .faq-item[open] { box-shadow: var(--dt-shadow-sm); border-color: var(--dt-line-strong); }
details summary, .faq-item summary {
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 600;
  font-size: 15.5px;
  list-style: none;
  position: relative;
  padding-right: 40px;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: "+";
  position: absolute; right: 16px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--dt-font-mono);
  font-size: 22px;
  color: var(--dt-violet);
  transition: transform .25s;
}
details[open] summary::after { content: "−"; transform: translateY(-50%) rotate(180deg); }
details > *:not(summary) { padding: 4px 16px 16px; color: var(--dt-ink-soft); }

/* Client logos */
.client-logo, .logo-grid img, .brand-logos img {
  filter: grayscale(1) opacity(.55);
  transition: filter .3s ease;
}
.client-logo:hover, .logo-grid img:hover { filter: grayscale(0) opacity(1); }

/* Reduce old bright card overrides */
body[class] .card, body[class] .service-card {
  background: var(--dt-card) !important;
}

/* Ensure paragraphs don't get overridden */
p { font-family: var(--dt-font-body) !important; }

/* ---------- 15. RESPONSIVE ---------- */
@media (max-width: 900px) {
  .site-header { padding: 12px !important; }
  .site-header .header-bar { border-radius: 22px !important; padding: 8px 12px !important; }
  h1, .hero-title { font-size: clamp(2rem, 8vw, 2.8rem) !important; }
  .home-section, section { padding: clamp(50px, 10vw, 80px) 0 !important; }
}

/* ---------- 16. LEGACY OVERRIDES (kill AI-slop remnants) ---------- */
/* Remove old hero blob look-and-feel */
.hero-blob { display: none !important; }
.hero-softek .hero-slide-inner { background: transparent !important; }

/* Fix header padding-top so hero doesn't collide */
body { padding-top: 92px !important; }

/* Fix any leftover blue gradient headers */
[class*="gradient-blue"], [class*="blue-gradient"] {
  background: var(--dt-grad-hero) !important;
}