@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Manrope:wght@400;500;600;700&display=swap');
:root {
  --navy-950: #030d24; --navy-900: #05173a; --navy-800: #082a63; --navy-700: #0a3d8f;
  --blue: #0057c2; --blue-600: #004aa8; --blue-400: #3b82f0; --sky: #00b1e1; --sky-300: #5fd3f3; --sky-100: #e3f6fd;
  --ice: #f3f7fd; --ink: #0a1630; --muted: #51607f;
  --font-display: 'Sora', system-ui, sans-serif; --font-ui: 'Manrope', system-ui, sans-serif;
  --grad: linear-gradient(120deg, #00b1e1 0%, #3b82f0 55%, #0057c2 100%);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ice); color: var(--ink); font-family: var(--font-ui); font-size: 16px; line-height: 1.6; text-wrap: pretty; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-600); }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
.dt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 700 15px var(--font-ui); padding: 14px 26px; border-radius: 999px; border: 0; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.dt-btn:hover { transform: translateY(-2px); }
.dt-btn-primary { background: var(--grad); color: #fff; box-shadow: 0 10px 30px -8px rgba(0, 120, 255, .65); }
.dt-btn-primary:hover { color: #fff; box-shadow: 0 16px 40px -8px rgba(0, 150, 255, .8); }
.dt-btn-glass { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(8px); }
.dt-btn-glass:hover { background: rgba(255,255,255,.16); color: #fff; }
.dt-btn-dark { background: var(--navy-900); color: #fff; }
.dt-btn-dark:hover { background: var(--navy-800); color: #fff; }
.dt-grad-text { background: linear-gradient(100deg, #5fd3f3, #3b82f0 60%, #7aa8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dt-eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 700 12px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
.dt-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--grad); border-radius: 2px; }
.dt-dark .dt-eyebrow { color: var(--sky-300); }
@keyframes dt-drift { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(60px,-40px) scale(1.12); } 100% { transform: translate(0,0) scale(1); } }
@keyframes dt-drift2 { 0% { transform: translate(0,0) scale(1.1); } 50% { transform: translate(-70px,50px) scale(1); } 100% { transform: translate(0,0) scale(1.1); } }
@keyframes dt-pulse { 0% { box-shadow: 0 0 0 0 rgba(0,177,225,.7); } 100% { box-shadow: 0 0 0 16px rgba(0,177,225,0); } }
@keyframes dt-dash { to { stroke-dashoffset: -200; } }
@keyframes dt-move { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes dt-bar { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
@keyframes dt-spin { to { transform: rotate(360deg); } }
@keyframes dt-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes dt-shine { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
@keyframes dt-blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.dt-grid-bg { background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 56px 56px; }
.dt-bob { animation: dt-bob 6s ease-in-out infinite; }
.dt-glow-card { position: relative; border-radius: 22px; background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.12); transition: transform .45s cubic-bezier(.2,.7,.15,1), border-color .3s ease, background .3s ease, box-shadow .4s ease; }
.dt-glow-card:hover { transform: translateY(-8px); border-color: rgba(95,211,243,.55); background: linear-gradient(160deg, rgba(0,177,225,.18), rgba(0,87,194,.1)); box-shadow: 0 30px 60px -20px rgba(0,140,255,.45); }
.dt-lift { transition: transform .45s cubic-bezier(.2,.7,.15,1), box-shadow .4s ease; }
.dt-lift:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -24px rgba(0,60,160,.35); }
.dt-nav-demo, .dt-nav-label { white-space: nowrap; }
@media (max-width: 1240px) { .dt-nav-label { display: none; } }
@media (max-width: 1000px) { .dt-nav-demo { display: none !important; } }
@media (max-width: 720px) { .dt-nav-link { display: none !important; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } html { scroll-behavior: auto; } }

@keyframes dt-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes dt-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
