@import "tailwindcss";
:root {
color-scheme: light;
--background: #050505;
--foreground: #f5f5f5;
--muted: #a3a3a3;
--surface: #0f0f0f;
--surface-strong: #141414;
--border: #262626;
--accent: #f5f5f5;
--accent-2: #d4d4d4;
--accent-3: #bdbdbd;
--glow: rgba(255, 255, 255, 0.12);
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-sans);
--font-display: var(--font-display);
}
body {
background: var(--background);
color: var(--foreground);
font-family: var(--font-sans), "Segoe UI", system-ui, sans-serif;
}
.font-display {
font-family: var(--font-display), var(--font-sans), "Segoe UI", system-ui, sans-serif;
}
.text-muted {
color: var(--muted);
}
* {
box-sizing: border-box;
}
.noise {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
mix-blend-mode: soft-light;
opacity: 0.4;
}
.glow {
box-shadow: 0 0 120px var(--glow);
}
.grid-fade {
background-image: radial-gradient(circle at top, rgba(255, 255, 255, 0.08), transparent 55%),
linear-gradient(transparent 0%, rgba(0, 0, 0, 0.92) 60%);
}
.hero-ring {
background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.12), transparent 55%),
radial-gradient(circle at 70% 10%, rgba(255, 255, 255, 0.1), transparent 50%),
radial-gradient(circle at 55% 55%, rgba(255, 255, 255, 0.08), transparent 60%);
filter: blur(0.5px);
}
.btn-primary {
background: #f5f5f5;
border: 1px solid #f5f5f5;
color: #050505;
}
.btn-primary:hover {
background: #ffffff;
}
.btn-secondary {
border: 1px solid #2b2b2b;
color: var(--foreground);
background: rgba(12, 12, 12, 0.8);
}
.btn-secondary:hover {
border-color: #3a3a3a;
background: rgba(18, 18, 18, 0.9);
}
a:focus-visible,
button:focus-visible,
input:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 2px;
}
.card {
background: rgba(12, 12, 12, 0.8);
border: 1px solid rgba(38, 38, 38, 0.8);
backdrop-filter: blur(12px);
}
.badge {
border: 1px solid rgba(82, 82, 82, 0.8);
color: #e5e5e5;
background: rgba(38, 38, 38, 0.6);
}
.fade-up {
animation: fadeUp 0.9s ease forwards;
opacity: 0;
}
.fade-up-delay {
animation: fadeUp 0.9s ease 0.15s forwards;
opacity: 0;
}
.fade-up-delay-2 {
animation: fadeUp 0.9s ease 0.3s forwards;
opacity: 0;
}
.fade-up-delay-3 {
animation: fadeUp 0.9s ease 0.45s forwards;
opacity: 0;
}
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.logo-loop {
animation: scroll 22s linear infinite;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}