@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Clash+Display:wght@600;700&family=Space+Grotesk:wght@600;700;800&display=swap');

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--dark-bg-primary);
    color: var(--dark-text);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(147, 51, 234, 0.12) 0%, transparent 70%),
        radial-gradient(ellipse 60% 40% at 90% 90%, rgba(236, 72, 153, 0.07) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

#app {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', sans-serif;
    line-height: 1.15;
    font-weight: 700;
}

code, pre, .mono {
    font-family: 'JetBrains Mono', monospace;
}

input, button, textarea, select {
    font-family: 'Inter', sans-serif;
    outline: none;
    border: none;
}

button { cursor: pointer; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }
a { color: var(--dark-secondary); text-decoration: none; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--dark-primary-20); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--dark-primary-40); }
::selection { background: var(--dark-primary-30); color: var(--white); }

.container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 32px;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes pulse-ring {
    0%   { box-shadow: 0 0 0 0 var(--dark-primary-30); }
    70%  { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@keyframes slide-up {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.page-bg {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.crosshair-svg {
    width: min(820px, 95vw);
    height: min(820px, 95vw);
    opacity: 0.045;
}

.ch-outer-ring {
    animation: ch-spin-slow 18s linear infinite;
    transform-origin: 512px 512px;
}

.ch-mid-ring {
    animation: ch-spin-slow 12s linear infinite reverse;
    transform-origin: 512px 512px;
}

.ch-inner-ring {
    animation: ch-spin-slow 7s linear infinite;
    transform-origin: 512px 512px;
}

.ch-crosshair {
    animation: ch-pulse 3s ease-in-out infinite;
    transform-origin: 512px 512px;
}

.ch-dot {
    animation: ch-dot-pulse 2s ease-in-out infinite;
    transform-origin: 512px 512px;
}

.ch-lock-ring {
    animation: ch-lock 4s ease-in-out infinite;
    transform-origin: 512px 512px;
}

.ch-scan-line {
    animation: ch-scan 3s linear infinite;
    transform-origin: 512px 512px;
}

.ch-star {
    animation: ch-star-flash 2.4s ease-in-out infinite;
    transform-origin: 512px 512px;
}

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

@keyframes ch-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

@keyframes ch-dot-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.5); opacity: 0.7; }
}

@keyframes ch-lock {
    0%, 100% { stroke-dashoffset: 0; opacity: 1; }
    50%       { stroke-dashoffset: 40; opacity: 0.4; }
}

@keyframes ch-scan {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes ch-star-flash {
    0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
    40%       { opacity: 1; transform: scale(1.2) rotate(20deg); }
    55%       { opacity: 1; transform: scale(0.9) rotate(-10deg); }
    70%       { opacity: 0.6; transform: scale(1.1) rotate(5deg); }
    85%       { opacity: 0; transform: scale(0.5) rotate(0deg); }
}