@import "tailwindcss";
:root {
--background: #020617;
--foreground: #f8fafc;
--primary: #6366f1;
--primary-hover: #4f46e5;
--accent: #8b5cf6;
--glass: rgba(15, 23, 42, 0.45);
--glass-border: rgba(255, 255, 255, 0.08);
--glass-highlight: rgba(255, 255, 255, 0.03);
}
@theme {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-primary: var(--primary);
--color-accent: var(--accent);
--font-sans: var(--font-geist-sans);
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
scroll-behavior: smooth;
}
html,
body {
max-width: 100vw;
overflow-x: hidden;
background-color: var(--background);
color: var(--foreground);
-webkit-font-smoothing: antialiased;
}
/* Premium Noise Texture */
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.025;
pointer-events: none;
z-index: 1000;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}
/* Premium Glassmorphism */
.glass {
background: var(--glass);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid var(--glass-border);
box-shadow: inset 0 1px 1px var(--glass-highlight);
}
.text-gradient {
background: linear-gradient(135deg, #fff 20%, #6366f1 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.bg-mesh {
background-image:
radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.12) 0px, transparent 50%),
radial-gradient(at 100% 0%, rgba(139, 92, 246, 0.08) 0px, transparent 50%);
background-attachment: fixed;
}
.glowing-card {
transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.glowing-card:hover {
border-color: rgba(99, 102, 241, 0.4);
box-shadow: 0 20px 60px -20px rgba(99, 102, 241, 0.2);
transform: translateY(-8px);
}
