/* Additional styles */
.blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; margin-top: 50px; }
.blog-card { background: var(--dezxey-card-bg); border: 1px solid var(--dezxey-border); border-radius: 20px; overflow: hidden; transition: all 0.3s ease; }
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--card-shadow); border-color: rgba(232,84,26,0.3); }
.blog-card-image { height: 200px; overflow: hidden; }
.blog-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.blog-card:hover .blog-card-image img { transform: scale(1.05); }
.blog-card-content { padding: 28px; }
.blog-card-category { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dezxey-orange); margin-bottom: 10px; }
.blog-card-title { font-size: 1.1rem; font-weight: 800; color: var(--dezxey-white); margin-bottom: 12px; line-height: 1.3; }
.blog-card-title a { color: var(--dezxey-white); text-decoration: none; }
.blog-card-title a:hover { color: var(--dezxey-orange); }
.blog-card-excerpt { font-size: 0.88rem; color: var(--dezxey-gray); line-height: 1.6; margin-bottom: 20px; }
.blog-card-meta { display: flex; align-items: center; justify-content: space-between; font-size: 0.78rem; color: var(--dezxey-gray); padding-top: 16px; border-top: 1px solid var(--dezxey-border); }
.portfolio-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.portfolio-item { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; cursor: pointer; }
.portfolio-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.portfolio-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,17,40,0.95) 0%, rgba(13,17,40,0.3) 60%, transparent 100%); opacity: 0; transition: opacity 0.3s ease; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; }
.portfolio-item:hover img { transform: scale(1.08); }
.portfolio-item:hover .portfolio-overlay { opacity: 1; }
.portfolio-item-title { font-size: 1.1rem; font-weight: 800; color: white; margin-bottom: 6px; }
.portfolio-item-cat { font-size: 0.78rem; color: var(--dezxey-orange); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
.elementor-button-wrapper .elementor-button { border-radius: 50px !important; font-family: var(--font-heading) !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; }
.dezxey-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 60px; }
.dezxey-pagination a, .dezxey-pagination span { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 600; background: var(--dezxey-card-bg); border: 1px solid var(--dezxey-border); color: var(--dezxey-gray); text-decoration: none; transition: all 0.3s ease; }
.dezxey-pagination a:hover, .dezxey-pagination .current { background: var(--dezxey-orange); border-color: var(--dezxey-orange); color: white; }
@media (max-width: 768px) { .blog-grid { grid-template-columns: 1fr; } .portfolio-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .portfolio-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════
   DEZXEY — PREMIUM INTERACTIONS & EFFECTS
   ═══════════════════════════════════════════ */

/* ── Custom Cursor ── */
#dz-cursor-dot {
  position: fixed;
  width: 8px;
  height: 8px;
  background: #F25C1B;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transition: opacity .3s;
  will-change: transform;
}
#dz-cursor-ring {
  position: fixed;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(242,92,27,.6);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  will-change: transform;
  transition: width .3s, height .3s, border-color .3s, background .3s;
}
#dz-cursor-ring.hovered {
  width: 56px;
  height: 56px;
  background: rgba(242,92,27,.08);
  border-color: #F25C1B;
}
@media (hover:none) {
  #dz-cursor-dot, #dz-cursor-ring { display: none; }
}

/* ── Card Shine Layer ── */
.card-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
  z-index: 1;
}

/* ── Glow Border Effect ── */
.metric-card,
.testimonial-card,
.portfolio-card,
.contact-form-box,
.svc3d-front,
.svc-vis-inner,
.founder-card {
  --glow-x: 50%;
  --glow-y: 50%;
  transition: transform .35s cubic-bezier(.23,1,.32,1),
              box-shadow .35s ease,
              border-color .3s ease;
  will-change: transform;
}

.metric-card.glow-active,
.testimonial-card.glow-active,
.portfolio-card.glow-active,
.contact-form-box.glow-active {
  border-color: rgba(242,92,27,.45) !important;
}

/* Radial glow that follows cursor on cards */
.metric-card::before,
.testimonial-card::before,
.portfolio-card::before,
.contact-form-box::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    400px circle at var(--glow-x) var(--glow-y),
    rgba(242,92,27,.07),
    transparent 60%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
  z-index: 0;
}
.metric-card.glow-active::before,
.testimonial-card.glow-active::before,
.portfolio-card.glow-active::before,
.contact-form-box.glow-active::before {
  opacity: 1;
}

/* Ensure card content sits above glow */
.metric-card > *,
.testimonial-card > *,
.portfolio-card > *,
.contact-form-box > * {
  position: relative;
  z-index: 1;
}

/* ── Premium Card Hover States ── */
.metric-card {
  border-radius: 12px !important;
  transition: transform .35s cubic-bezier(.23,1,.32,1), box-shadow .35s ease, border-color .3s !important;
}
.metric-card:hover {
  transform: translateY(-10px) scale(1.01) !important;
  box-shadow: 0 32px 64px rgba(0,0,0,.45), 0 0 0 1px rgba(242,92,27,.2) !important;
  border-color: rgba(242,92,27,.4) !important;
}

.testimonial-card {
  border-radius: 12px !important;
  transition: transform .35s cubic-bezier(.23,1,.32,1), box-shadow .35s ease, border-color .3s !important;
}
.testimonial-card:hover {
  transform: translateY(-10px) scale(1.01) !important;
  box-shadow: 0 32px 64px rgba(0,0,0,.5), 0 0 0 1px rgba(242,92,27,.25) !important;
  border-color: rgba(242,92,27,.4) !important;
}

.portfolio-card {
  border-radius: 12px !important;
  transition: transform .35s cubic-bezier(.23,1,.32,1), box-shadow .35s ease, border-color .3s !important;
  overflow: visible !important;
}
.portfolio-card:hover {
  transform: translateY(-10px) scale(1.02) !important;
  box-shadow: 0 40px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(242,92,27,.3) !important;
}

/* ── Contact Info Items ── */
.contact-info-item {
  border-radius: 10px;
  padding: 20px 16px !important;
  margin-bottom: 4px;
  transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.contact-info-item:hover {
  background: rgba(242,92,27,.06);
  transform: translateX(6px);
  box-shadow: inset 3px 0 0 rgba(242,92,27,.6);
}

/* ── Contact Form Box ── */
.contact-form-box {
  position: relative;
  transition: transform .35s cubic-bezier(.23,1,.32,1), box-shadow .35s ease !important;
}
.contact-form-box:hover {
  box-shadow: 0 40px 80px rgba(0,0,0,.5), 0 0 50px rgba(242,92,27,.08) !important;
}

/* ── Form Input Focus Glow ── */
.form-group input,
.form-group textarea,
.form-group select {
  transition: border-color .3s ease, box-shadow .3s ease, transform .2s ease !important;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: #F25C1B !important;
  box-shadow: 0 0 0 3px rgba(242,92,27,.15), 0 4px 20px rgba(242,92,27,.1) !important;
  transform: translateY(-1px);
}

/* ── Magnetic Buttons ── */
.btn-primary,
.btn-outline {
  transition: transform .25s cubic-bezier(.23,1,.32,1),
              box-shadow .25s ease,
              background .25s ease !important;
}
.btn-primary:hover {
  box-shadow: 0 12px 36px rgba(242,92,27,.45) !important;
}
.btn-outline:hover {
  box-shadow: 0 12px 30px rgba(59,130,246,.25) !important;
}

/* ── Service Detail Visual ── */
.svc-vis-inner {
  transition: transform .4s cubic-bezier(.23,1,.32,1), box-shadow .4s ease !important;
  border-radius: 16px;
}
.svc-vis-inner:hover {
  transform: perspective(800px) rotateY(-5deg) rotateX(3deg) translateY(-10px) !important;
  box-shadow: 24px 24px 60px rgba(0,0,0,.5), 0 0 60px rgba(242,92,27,.18) !important;
}

/* ── Service Checklist Items ── */
.service-checklist li {
  transition: transform .25s ease, color .25s ease;
  cursor: default;
}
.service-checklist li:hover {
  transform: translateX(8px);
  color: #F0F4FF;
}

/* ── Portfolio Tag Hover ── */
.portfolio-tag {
  transition: background .25s ease, color .25s ease;
}
.portfolio-card:hover .portfolio-tag {
  background: rgba(242,92,27,.25);
  color: #FF8C42;
}

/* ── Staggered Fade-Up ── */
.fade-up {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .7s cubic-bezier(.23,1,.32,1),
              transform .7s cubic-bezier(.23,1,.32,1);
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Section Tags Hover ── */
.section-tag {
  transition: letter-spacing .3s ease, color .3s ease;
  cursor: default;
}
.section-tag:hover {
  letter-spacing: .18em;
  color: #FF8C42;
}

/* ── Social Links Premium ── */
.social-link {
  transition: transform .3s cubic-bezier(.23,1,.32,1),
              box-shadow .3s ease,
              border-color .3s ease !important;
}
.social-link:hover {
  transform: translateY(-4px) scale(1.1) !important;
}

/* ── Founder Card Ring ── */
.founder-img-ring {
  animation: founderSpin 12s linear infinite;
}
.founder-photo {
  transition: transform .4s cubic-bezier(.23,1,.32,1), box-shadow .4s ease;
}
.founder-card:hover .founder-photo {
  transform: scale(1.05);
  box-shadow: 0 0 0 4px #F25C1B, 0 20px 40px rgba(242,92,27,.3);
}

/* ── Ticker Bar ── */
.svc-ticker-bar,.ticker-bar {
  transition: opacity .3s;
}

/* ── Scroll Reveal for non-fade-up elements ── */
@keyframes dzSlideIn {
  from { opacity:0; transform: translateY(24px); }
  to   { opacity:1; transform: translateY(0);    }
}
.is-visible {
  animation: dzSlideIn .6s cubic-bezier(.23,1,.32,1) forwards;
}

/* ── Page Hero Depth ── */
.page-hero h1 span {
  display: inline-block;
  transition: transform .3s ease;
}
.page-hero h1:hover span {
  transform: translateY(-4px);
}

/* ═══════════════════════════════════════════════════════
   DEZXEY — PREMIUM CURSOR + 3D TILT + HOVER SYSTEM
   ═══════════════════════════════════════════════════════ */

/* ── Shine Layer (injected by JS) ── */
.dz-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  z-index: 2;
}

/* ── Glow Border System ── */
.service-card,
.metric-card,
.testimonial-card,
.portfolio-card,
.portfolio-preview-card,
.contact-form-box,
.solution-box,
.step,
.faq-item,
.svc-pkg-card,
.svc3d-front,
.founder-card {
  --gx: 50%;
  --gy: 50%;
  position: relative;
}

/* pseudo radial glow follows cursor */
.service-card::after,
.metric-card::after,
.testimonial-card::after,
.portfolio-card::after,
.portfolio-preview-card::after,
.contact-form-box::after,
.solution-box::after,
.step::after,
.faq-item::after,
.svc-pkg-card::after,
.svc3d-front::after,
.founder-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    300px circle at var(--gx) var(--gy),
    rgba(242,92,27,.09),
    transparent 65%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
  z-index: 0;
}
.dz-glow::after { opacity: 1 !important; }
.dz-glow { border-color: rgba(242,92,27,.4) !important; }

/* All card children sit above glow layer */
.service-card > *,
.metric-card > *,
.testimonial-card > *,
.portfolio-card > *,
.portfolio-preview-card > *,
.contact-form-box > *,
.solution-box > *,
.step > *,
.faq-item > *,
.svc-pkg-card > *,
.founder-card > * {
  position: relative;
  z-index: 1;
}

/* ── Enhanced Hover States ── */
.service-card {
  transition: transform .4s cubic-bezier(.23,1,.32,1), box-shadow .4s ease, border-color .3s !important;
}
.service-card:hover {
  border-color: rgba(242,92,27,.45) !important;
  box-shadow: 0 32px 80px rgba(0,0,0,.5), 0 0 50px rgba(242,92,27,.2) !important;
}

.metric-card {
  border-radius: 12px !important;
  transition: transform .4s cubic-bezier(.23,1,.32,1), box-shadow .4s ease, border-color .3s !important;
}
.metric-card:hover {
  border-color: rgba(242,92,27,.4) !important;
  box-shadow: 0 32px 70px rgba(0,0,0,.5), 0 0 40px rgba(242,92,27,.18) !important;
}

.testimonial-card {
  border-radius: 12px !important;
  transition: transform .4s cubic-bezier(.23,1,.32,1), box-shadow .4s ease, border-color .3s !important;
}
.testimonial-card:hover {
  border-color: rgba(242,92,27,.4) !important;
  box-shadow: 0 36px 80px rgba(0,0,0,.5), 0 0 50px rgba(242,92,27,.15) !important;
}

.portfolio-card,
.portfolio-preview-card {
  border-radius: 12px !important;
  transition: transform .4s cubic-bezier(.23,1,.32,1), box-shadow .4s ease, border-color .3s !important;
  overflow: visible !important;
}
.portfolio-card:hover,
.portfolio-preview-card:hover {
  border-color: rgba(242,92,27,.4) !important;
  box-shadow: 0 40px 80px rgba(0,0,0,.55), 0 0 50px rgba(242,92,27,.18) !important;
}

.solution-box {
  transition: transform .4s cubic-bezier(.23,1,.32,1), box-shadow .4s ease, border-color .3s !important;
}
.solution-box:hover {
  border-color: rgba(242,92,27,.5) !important;
  box-shadow: 0 40px 80px rgba(0,0,0,.5), 0 0 60px rgba(242,92,27,.2) !important;
}

.step {
  transition: transform .4s cubic-bezier(.23,1,.32,1), box-shadow .4s ease !important;
  border-radius: 12px;
  padding: 28px 20px;
}
.step:hover {
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 30px rgba(242,92,27,.15) !important;
}
.step:hover .step-number {
  color: #F25C1B;
  text-shadow: 0 0 20px rgba(242,92,27,.5);
}

.faq-item {
  transition: transform .4s cubic-bezier(.23,1,.32,1), box-shadow .3s ease, border-color .3s !important;
}
.faq-item:hover {
  border-color: rgba(242,92,27,.35) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.35), 0 0 20px rgba(242,92,27,.1) !important;
}

.hero-mockup {
  transition: transform .4s cubic-bezier(.23,1,.32,1), box-shadow .4s ease !important;
}
.hero-mockup:hover {
  box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 60px rgba(59,130,246,.25) !important;
}

.mstat {
  transition: transform .35s cubic-bezier(.23,1,.32,1), box-shadow .35s ease, border-color .3s, background .3s !important;
  cursor: default;
}
.mstat:hover {
  background: rgba(242,92,27,.14) !important;
  border-color: rgba(242,92,27,.45) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.4), 0 0 20px rgba(242,92,27,.2) !important;
}

.pain-list li {
  transition: transform .35s cubic-bezier(.23,1,.32,1), box-shadow .35s ease, border-color .3s, background .3s !important;
  cursor: default;
}
.pain-list li:hover {
  background: rgba(242,92,27,.1) !important;
  border-color: rgba(242,92,27,.4) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.3), inset 3px 0 0 #F25C1B !important;
}

.contact-info-item {
  border-radius: 10px;
  transition: transform .35s cubic-bezier(.23,1,.32,1), box-shadow .35s ease, background .3s !important;
  cursor: default;
}
.contact-info-item:hover {
  background: rgba(242,92,27,.07) !important;
  transform: translateX(8px) !important;
  box-shadow: inset 3px 0 0 #F25C1B, 0 8px 24px rgba(0,0,0,.2) !important;
}

.svc-pkg-card {
  transition: transform .4s cubic-bezier(.23,1,.32,1), box-shadow .4s ease, border-color .3s !important;
}
.svc-pkg-card:hover {
  box-shadow: 0 36px 80px rgba(0,0,0,.5), 0 0 50px rgba(242,92,27,.2) !important;
  border-color: rgba(242,92,27,.4) !important;
}

/* ── Form Input Glow ── */
.form-group input,
.form-group textarea,
.form-group select {
  transition: border-color .3s ease, box-shadow .3s ease, transform .2s ease !important;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none !important;
  border-color: #F25C1B !important;
  box-shadow: 0 0 0 3px rgba(242,92,27,.18), 0 4px 20px rgba(242,92,27,.12) !important;
  transform: translateY(-2px);
}

/* ── Magnetic Buttons ── */
.btn-primary,
.btn-outline {
  transition: transform .25s cubic-bezier(.23,1,.32,1), box-shadow .25s ease, background .25s ease !important;
}
.btn-primary:hover {
  box-shadow: 0 16px 40px rgba(242,92,27,.5) !important;
}
.btn-outline:hover {
  box-shadow: 0 16px 32px rgba(59,130,246,.3) !important;
}

/* ── Founder Card ── */
.founder-card {
  transition: transform .4s cubic-bezier(.23,1,.32,1), box-shadow .4s ease !important;
}
.founder-card:hover {
  box-shadow: 0 40px 80px rgba(0,0,0,.5), 0 0 50px rgba(242,92,27,.15) !important;
}
.founder-photo {
  transition: transform .4s cubic-bezier(.23,1,.32,1), box-shadow .4s ease;
}
.founder-card:hover .founder-photo {
  transform: scale(1.06);
  box-shadow: 0 0 0 4px #F25C1B, 0 20px 40px rgba(242,92,27,.35);
}

/* ── Section Tag Hover ── */
.section-tag {
  transition: letter-spacing .35s ease, color .3s ease;
  cursor: default;
}
.section-tag:hover {
  letter-spacing: .2em;
  color: #FF8C42;
}

/* ── Service Checklist ── */
.service-checklist li {
  transition: transform .25s ease, color .25s ease;
  cursor: default;
}
.service-checklist li:hover {
  transform: translateX(10px);
  color: #F0F4FF;
}

/* ── Social Links ── */
.social-link {
  transition: transform .35s cubic-bezier(.23,1,.32,1), box-shadow .35s ease, border-color .3s !important;
}
.social-link:hover {
  transform: translateY(-5px) scale(1.12) !important;
}
.social-link--ig:hover {
  background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 24px rgba(220,39,67,.4) !important;
}
.social-link--fb:hover {
  background: #1877F2 !important;
  border-color: transparent !important;
  box-shadow: 0 8px 24px rgba(24,119,242,.4) !important;
}

/* ── Fade-Up ── */
.fade-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s cubic-bezier(.23,1,.32,1), transform .7s cubic-bezier(.23,1,.32,1);
}
.fade-up.visible { opacity:1; transform:translateY(0); }

/* ══════════════════════════════════════════
   PREMIUM CUSTOM CURSOR — v2
   ══════════════════════════════════════════ */

/* Core dot — snaps instantly to pointer */
/* NOTE: JS positions via left/top. We use margin-left/top for centering
   to avoid conflicting with CSS animations that also use transform. */
#dz-dot {
  position: fixed;
  width: 8px;
  height: 8px;
  background: #F25C1B;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999999;
  margin-left: -4px;
  margin-top: -4px;
  will-change: left, top;
  transition: width .18s cubic-bezier(.23,1,.32,1),
              height .18s cubic-bezier(.23,1,.32,1),
              margin .18s cubic-bezier(.23,1,.32,1),
              background .18s ease,
              opacity .18s ease,
              box-shadow .18s ease;
  box-shadow: 0 0 8px 2px rgba(242,92,27,.5);
}

/* Outer ring — lags behind */
#dz-ring {
  position: fixed;
  width: 40px;
  height: 40px;
  border: 1.5px solid rgba(242,92,27,.7);
  border-radius: 50%;
  pointer-events: none;
  z-index: 999998;
  margin-left: -20px;
  margin-top: -20px;
  will-change: left, top;
  transition: width .28s cubic-bezier(.23,1,.32,1),
              height .28s cubic-bezier(.23,1,.32,1),
              margin .28s cubic-bezier(.23,1,.32,1),
              border-color .28s ease,
              background .28s ease,
              opacity .28s ease;
  /* inner glow arc — rotated via pseudo or inner div */
  background: conic-gradient(
    from 0deg,
    rgba(242,92,27,.0) 0%,
    rgba(242,92,27,.4) 20%,
    rgba(242,92,27,.0) 40%,
    rgba(242,92,27,.0) 100%
  );
}

/* Spinning wrapper sits inside ring via JS — avoids left/top conflict */
#dz-ring::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(242,92,27,.0) 0%,
    rgba(242,92,27,.5) 25%,
    rgba(242,92,27,.0) 50%
  );
  animation: dz-arc-spin 2.5s linear infinite;
}

/* Slowest glow blob */
#dz-trail {
  position: fixed;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999996;
  margin-left: -36px;
  margin-top: -36px;
  will-change: left, top;
  background: radial-gradient(circle, rgba(242,92,27,.12) 0%, transparent 70%);
  transition: width .5s ease, height .5s ease, margin .5s ease, opacity .5s ease;
  filter: blur(6px);
}

/* Spark particles */
.dz-spark {
  position: fixed;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999995;
  background: #F25C1B;
  margin-left: -2px;
  margin-top: -2px;
  animation: dz-spark-fade .55s ease-out forwards;
}

@keyframes dz-arc-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes dz-spark-fade {
  0%   { opacity: 1; transform: scale(1) translate(0,0); }
  100% { opacity: 0; transform: scale(0) translate(var(--sx), var(--sy)); }
}

/* ── Hover state ── */
#dz-dot.hovering {
  width: 12px;
  height: 12px;
  margin-left: -6px;
  margin-top: -6px;
  background: #FF8C42;
  box-shadow: 0 0 16px 5px rgba(242,92,27,.65);
}
#dz-ring.hovering {
  width: 62px;
  height: 62px;
  margin-left: -31px;
  margin-top: -31px;
  border-color: #F25C1B;
  background: radial-gradient(circle, rgba(242,92,27,.08) 0%, transparent 70%);
}
#dz-ring.hovering::before {
  animation: dz-arc-spin 1s linear infinite;
}
#dz-trail.hovering {
  width: 90px;
  height: 90px;
  margin-left: -45px;
  margin-top: -45px;
}

/* ── Click burst ── */
#dz-dot.clicking {
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  margin-top: -2.5px;
  background: #fff;
  box-shadow: 0 0 20px 8px rgba(255,255,255,.5);
}
#dz-ring.clicking {
  width: 24px;
  height: 24px;
  margin-left: -12px;
  margin-top: -12px;
  border-color: rgba(255,255,255,.8);
  background: rgba(255,255,255,.06);
}

/* ── Text mode ── */
#dz-dot.on-text {
  width: 2px;
  height: 20px;
  border-radius: 2px;
  margin-left: -1px;
  margin-top: -10px;
}
#dz-ring.on-text {
  opacity: 0;
}

/* ── Hide on touch ── */
@media (hover:none),(max-width:768px) {
  #dz-dot,#dz-ring,#dz-trail,.dz-spark { display:none !important; }
}

/* ── Hide native cursor on desktop — covers ALL elements ── */
@media (hover:hover) and (min-width:769px) {
  *, *::before, *::after { cursor: none !important; }
}