:root { color-scheme: dark; background: #0b1019; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 240px; }
.background { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.glow { position: absolute; inset: -20%; background: radial-gradient(ellipse at 78% 72%, #ff6f1f18, transparent 43%), radial-gradient(ellipse at 16% 25%, #20293850, transparent 55%); }
.flow { position: absolute; width: 120%; height: 120%; left: -10%; top: -10%; object-fit: cover; opacity: .85; animation: drift 24s ease-in-out infinite alternate; }
.grain { position: absolute; inset: 0; opacity: .12; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.22' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
main { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 32px; }
.logo { display: block; width: clamp(230px, 39vw, 580px); max-width: 100%; height: auto; filter: drop-shadow(0 8px 30px #0b101b80); }
@keyframes drift { from { transform: translate3d(-1%, 1%, 0) rotate(-3deg); } to { transform: translate3d(1%, -1%, 0) rotate(3deg); } }
@media (max-width: 600px) { .logo { width: 82vw; } .flow { width: 220%; left: -60%; opacity: .65; } }
@media (prefers-reduced-motion: reduce) { .flow { animation: none; } }