/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DZINER — GLOBAL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  --cream:  #f2f0eb;
  --cream2: #e8e5de;
  --cream3: #d8d4cc;
  --ink:    #0e0e0f;
  --ink2:   #141416;
  --ink3:   #1c1c1f;
  --ink4:   #242428;
  --ink5:   #2e2e33;
  --mid:    #6b6b70;
  --mid2:   #9a9a9f;
  --text:   #e8e8f0;
  --text2:  #8888a0;
  --text3:  #4a4a60;
  --accent:    #6c4fff;
  --accent2:   #8b6fff;
  --accentbg:  rgba(108,79,255,.1);
  --accentglow:rgba(108,79,255,.25);
  --green: #22d97a;
  --red:   #ff4060;
  --mono:   'DM Mono', monospace;
  --serif:  'Instrument Serif', serif;
  --sans:   'Syne', sans-serif;

  --glow1: rgba(108,79,255,.13);
  --glow2: rgba(108,79,255,.07);
  --glow3: rgba(180,140,255,.08);
}

[data-theme="dark"] {
  --cream:     #0e0e0f;
  --cream2:    #141416;
  --cream3:    rgba(255,255,255,.07);
  --ink:       #e8e8f0;
  --ink2:      #0e0e0f;
  --ink3:      #1c1c1f;
  --mid:       #7a7a82;
  --mid2:      #4a4a58;
  --glow1: rgba(108,79,255,.28);
  --glow2: rgba(108,79,255,.15);
  --glow3: rgba(180,140,255,.12);
}
[data-theme="dark"] body { background: #0e0e0f; color: #e8e8f0; }
[data-theme="dark"] .l-nav-logo { color: #e8e8f0; }
[data-theme="dark"] .l-nav-link { color: #7a7a82; }
[data-theme="dark"] .l-nav-link:hover { color: #e8e8f0; }
[data-theme="dark"] .l-nav-open { color: #e8e8f0; border-color: #e8e8f0; }
[data-theme="dark"] .l-hero { background: #0e0e0f; }
[data-theme="dark"] .l-hero-title { color: #e8e8f0; }
[data-theme="dark"] .l-hero-em { color: #4a4a58; }
[data-theme="dark"] .l-hero-overline { color: #4a4a58; }
[data-theme="dark"] .l-hero-overline::before { background: #4a4a58; }
[data-theme="dark"] .l-hero-desc { color: #7a7a82; }
[data-theme="dark"] .l-hero-desc strong { color: #e8e8f0; }
[data-theme="dark"] .l-cta-main { background: #e8e8f0; color: #0e0e0f; }
[data-theme="dark"] .l-cta-ghost { color: #4a4a58; border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .l-cta-ghost:hover { color: #e8e8f0; border-color: #e8e8f0; }
[data-theme="dark"] .l-hero-footnote { border-color: rgba(255,255,255,.07); }
[data-theme="dark"] .l-hero-fn-left,
[data-theme="dark"] .l-hero-fn-right { color: #3a3a42; }
[data-theme="dark"] .l-process { background: #0e0e0f; }
[data-theme="dark"] .l-process-title { color: #e8e8f0; }
[data-theme="dark"] .l-process-title em { color: #4a4a58; }
[data-theme="dark"] .l-process-note { color: #4a4a58; }
[data-theme="dark"] .l-pstep { border-color: rgba(255,255,255,.06); }
[data-theme="dark"] .l-pstep:last-child { border-color: rgba(255,255,255,.06); }
[data-theme="dark"] .l-pstep-n { color: #3a3a42; }
[data-theme="dark"] .l-pstep-title { color: #e8e8f0; }
[data-theme="dark"] .l-pstep-desc { color: #5a5a62; }
[data-theme="dark"] .l-cap { background: #0e0e0f; }
[data-theme="dark"] .l-cap-title { color: #e8e8f0; }
[data-theme="dark"] .l-cap-title em { color: #4a4a58; }
[data-theme="dark"] .l-cap-item { border-color: rgba(255,255,255,.06); }
[data-theme="dark"] .l-cap-item:first-child { border-color: rgba(255,255,255,.06); }
[data-theme="dark"] .l-cap-item-title { color: #e8e8f0; }
[data-theme="dark"] .l-cap-item-tag { color: #3a3a42; }
[data-theme="dark"] .l-cap-eyebrow { color: #3a3a42; }
[data-theme="dark"] .l-cap-arrow { color: #e8e8f0; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body { font-family: var(--sans); overflow-x: hidden; cursor: none; transition: background .35s, color .35s; }

body::after {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 160px;
  pointer-events: none; z-index: 999; opacity: .6;
}

.cursor-dot {
  position: fixed; width: 8px; height: 8px;
  border-radius: 50%; pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%);
  transition: width .2s, height .2s, background .2s;
}
.cursor-ring {
  position: fixed; border-radius: 50%;
  pointer-events: none; z-index: 9998;
  transform: translate(-50%,-50%);
}

.mobile-guard {
  display: none;
  position: fixed; inset: 0; z-index: 99999;
  background: var(--ink2);
  flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 32px; text-align: center;
}
@media (max-width: 900px) { .mobile-guard { display: flex; } }
.mg-logo { font-family: var(--sans); font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -.5px; margin-bottom: 40px; }
.mg-logo em { color: var(--accent); font-style: normal; }
.mg-icon { width: 64px; height: 64px; border-radius: 16px; background: var(--ink3); border: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; margin: 0 auto 28px; }
.mg-icon svg { width: 28px; height: 28px; color: var(--accent); }
.mg-title { font-size: 26px; font-weight: 800; letter-spacing: -1px; line-height: 1.1; color: var(--text); margin-bottom: 12px; }
.mg-title em { font-family: var(--serif); font-style: italic; font-weight: 400; color: rgba(232,232,240,.35); }
.mg-desc { font-size: 14px; color: var(--text2); line-height: 1.68; max-width: 300px; margin: 0 auto 36px; }
.mg-badge { font-family: var(--mono); font-size: 10px; color: var(--text3); letter-spacing: 1.5px; text-transform: uppercase; border: 1px solid rgba(255,255,255,.06); padding: 7px 16px; border-radius: 99px; }

.sr { opacity: 0; transform: translateY(24px); transition: opacity .7s, transform .7s; }
.sr.v { opacity: 1; transform: none; }
.sr.d1 { transition-delay: .1s; }
.sr.d2 { transition-delay: .2s; }
.sr.d3 { transition-delay: .3s; }
.sr.d4 { transition-delay: .4s; }

@keyframes up   { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }
@keyframes fade { from { opacity:0; } to { opacity:1; } }
@keyframes breathe { 0%,100%{transform:translate(-50%,-50%) scale(1)} 50%{transform:translate(-50%,-50%) scale(1.15)} }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* hero gradient blob animations */
@keyframes blob1 {
  0%,100% { transform: translate(0px, 0px) scale(1); }
  25%     { transform: translate(60px, -40px) scale(1.1); }
  50%     { transform: translate(-30px, 30px) scale(.92); }
  75%     { transform: translate(20px, 50px) scale(1.05); }
}
@keyframes blob2 {
  0%,100% { transform: translate(0px, 0px) scale(1); }
  30%     { transform: translate(-70px, 30px) scale(1.12); }
  60%     { transform: translate(40px, -50px) scale(.9); }
  80%     { transform: translate(-20px, 20px) scale(1.04); }
}
@keyframes blob3 {
  0%,100% { transform: translate(0px, 0px) scale(1); }
  35%     { transform: translate(50px, 60px) scale(1.08); }
  65%     { transform: translate(-60px, -30px) scale(.94); }
  85%     { transform: translate(30px, -10px) scale(1.02); }
}

/* theme toggle button */
.theme-toggle {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(14,14,15,.14);
  background: transparent;
  cursor: none;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, background .2s, transform .15s;
  flex-shrink: 0;
}
.theme-toggle:hover { border-color: rgba(14,14,15,.3); background: rgba(14,14,15,.05); transform: scale(1.06); }
.theme-toggle:active { transform: scale(.94); }
.theme-toggle svg { width: 15px; height: 15px; transition: opacity .25s, transform .3s; color: var(--mid); }
.theme-toggle .icon-sun  { position: absolute; }
.theme-toggle .icon-moon { position: absolute; }

.theme-toggle .icon-sun  { opacity: 1; transform: scale(1) rotate(0deg); }
.theme-toggle .icon-moon { opacity: 0; transform: scale(.5) rotate(45deg); }

[data-theme="dark"] .theme-toggle { border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .theme-toggle:hover { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.05); }
[data-theme="dark"] .theme-toggle .icon-sun  { opacity: 0; transform: scale(.5) rotate(-45deg); }
[data-theme="dark"] .theme-toggle .icon-moon { opacity: 1; transform: scale(1) rotate(0deg); }
[data-theme="dark"] .theme-toggle svg { color: #7a7a82; }

/* theme hint tooltip */
.theme-hint {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: var(--ink2);
  color: #e8e8f0;
  font-family: var(--mono);
  font-size: 10.5px;
  white-space: nowrap;
  padding: 7px 13px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.08);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .18s, transform .18s;
  z-index: 200;
}
[data-theme="dark"] .theme-hint { background: var(--cream2); color: var(--ink2); border-color: rgba(14,14,15,.1); }
[data-theme="dark"] .theme-hint::before { border-bottom-color: var(--cream2); }
.theme-hint::before {
  content: '';
  position: absolute;
  bottom: 100%; right: 11px;
  border: 5px solid transparent;
  border-bottom-color: var(--ink2);
}
.theme-hint.visible {
  opacity: 1;
  transform: translateY(0);
}