/* Bitnuk AG — landing page styles */
:root { --accent: #5FD4E6; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: #0B0E13; color: #93A0AF; font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: border-box; }

::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); color: #E9EDF3; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: #E9EDF3; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input, textarea { font-family: 'Inter', sans-serif; }
input::placeholder, textarea::placeholder { color: #5A6675; }

/* ---- interactive hover states (ported from the design) ---- */
.contact-cta:hover, .hero-cta:hover, .form-submit:hover { background: color-mix(in srgb, var(--accent) 85%, white); color: #0B0E13; }
.hero-cta:hover { transform: translateY(-2px); }
.hero-secondary:hover { border-color: var(--accent); color: #E9EDF3; }
.solution-card, .consulting-card { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.solution-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 60%, #273040); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 16px 36px rgba(0,0,0,.45); }
.consulting-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 60%, #273040); }
.form-field:focus { border-color: var(--accent); }
.footer-link:hover, .nav-link:hover { color: #E9EDF3; }

/* ---- keyframes ---- */
@keyframes packetMove { 0% { left: 10%; opacity: 0; } 4% { opacity: 1; } 96% { opacity: 1; } 100% { left: 90%; opacity: 0; } }
@keyframes nodeGlow { 0%, 100% { border-color: #273040; box-shadow: none; background: #141922; } 3% { border-color: var(--accent); box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 25%, #141922); } 14% { border-color: #273040; box-shadow: none; background: #141922; } }
@keyframes drawLine { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } }
@keyframes zugPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes chainTravel { to { stroke-dashoffset: -1000; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}