:root {
--primary-blue: #72a4f1;
--accent-blue: #5B86C6;
--text-white: #ffffff;
--text-gray: #a1a1a1;
--nav-bg: rgba(0, 0, 0, 0.4);
--font-main: 'Inter', sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: var(--font-main);
}
body {
background-color: #050505;
color: var(--text-white);
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
.app-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.bg-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}
.bg-image {
background-image: url('../assets/background_final.png');
opacity: 0.6;
}
.bg-pattern {
background-image: url('../assets/pattern.png');
background-repeat: repeat;
opacity: 0.05;
mix-blend-mode: overlay;
}
.bg-overlay {
background-image: url('../assets/overlay.png');
opacity: 0.4;
mix-blend-mode: soft-light;
}
.bg-vignette {
background: radial-gradient(circle at center, transparent 0%, #000000 90%);
opacity: 0.8;
}
.navbar {
display: flex;
justify-content: center;
align-items: center;
padding: 15px 40px;
width: 100%;
z-index: 100;
position: absolute;
top: 20px;
}
.nav-items {
display: flex;
gap: 30px;
background: #1a1b1e;
padding: 8px 12px;
border-radius: 4px;
border: 1px solid #2a2a2a;
}
.nav-item {
color: #9CA3AF;
text-decoration: none;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 4px 8px;
border-radius: 3px;
transition: all 0.2s ease;
}
.nav-item:hover,
.nav-item.active {
color: white;
}
.nav-item.active {
background: #25262b;
}
.auth-items {
position: absolute;
right: 40px;
display: flex;
gap: 20px;
}
.auth-items .nav-item {
text-transform: none;
font-weight: 500;
font-size: 13px;
}
.hero-container {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
z-index: 10;
}
.brand-title {
font-size: 5rem;
font-weight: 900;
color: var(--primary-blue);
text-transform: uppercase;
letter-spacing: -2px;
margin-bottom: 5px;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
.brand-subtitle {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 4px;
color: #cccccc;
margin-bottom: 40px;
position: relative;
display: inline-block;
}
.brand-subtitle .highlight {
color: var(--primary-blue);
}
.brand-subtitle::before,
.brand-subtitle::after {
content: '';
position: absolute;
top: 50%;
width: 60px;
height: 1px;
background: rgba(255, 255, 255, 0.2);
}
.brand-subtitle::before {
left: -80px;
}
.brand-subtitle::after {
right: -80px;
}
.cta-group {
display: flex;
justify-content: center;
gap: 20px;
}
.btn {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 30px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
border-radius: 4px;
letter-spacing: 1px;
transition: all 0.3s ease;
min-width: 160px;
justify-content: center;
}
.btn-primary {
background: var(--primary-blue);
color: #111;
box-shadow: 0 0 15px rgba(114, 164, 241, 0.3);
border: 1px solid var(--primary-blue);
}
.btn-primary:hover {
background: #8ab4f5;
box-shadow: 0 0 25px rgba(114, 164, 241, 0.5);
}
.btn-secondary {
background: transparent;
color: #ccc;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.btn-secondary:hover {
border-color: #fff;
color: #fff;
background: rgba(255, 255, 255, 0.05);
}
.hero-container::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60%;
height: 60%;
background:
linear-gradient(rgba(114, 164, 241, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(114, 164, 241, 0.1) 1px, transparent 1px);
background-size: 100px 100px;
z-index: -1;
mask-image: radial-gradient(circle, black 30%, transparent 70%);
}