* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
:root {
--black: #000;
--white: #fff;
--border: rgba(255, 255, 255, 0.12);
--muted: rgba(255, 255, 255, 0.7);
--card: rgba(255, 255, 255, 0.05);
--card-border: rgba(255, 255, 255, 0.1);
--accent: #4da3ff;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: var(--black);
color: var(--white);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* Prevent dragging of images and videos */
img, video {
pointer-events: none;
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
}
body::before {
content: '';
position: fixed;
inset: 0;
background: radial-gradient(circle at 50% 0%, rgba(0, 168, 255, 0.04) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
/* Header */
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 2rem;
border-bottom: 1px solid var(--border);
position: relative;
z-index: 1001;
backdrop-filter: blur(10px);
background: rgba(0, 0, 0, 0.8);
}
.header__logo {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 1.25rem;
font-weight: 300;
letter-spacing: 0.02em;
color: var(--white);
}
.header__logo img {
height: 32px;
width: auto;
}
.header__logo a {
color: var(--white);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.75rem;
}
.header__nav {
display: flex;
gap: 2rem;
flex-wrap: wrap;
list-style: none;
}
.header__nav a {
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
font-size: 0.875rem;
letter-spacing: 0.02em;
transition: color 0.2s ease;
}
.header__nav a:hover {
color: #fff;
}
/* Mobile menu button - Animated hamburger */
.menu-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 0;
width: 30px;
height: 24px;
position: relative;
z-index: 1001;
}
.menu-toggle span {
display: block;
width: 100%;
height: 2px;
background: white;
position: absolute;
left: 0;
transition: all 0.3s ease;
}
.menu-toggle span:nth-child(1) {
top: 0;
}
.menu-toggle span:nth-child(2) {
top: 11px;
}
.menu-toggle span:nth-child(3) {
top: 22px;
}
.menu-toggle.active span:nth-child(1) {
top: 11px;
transform: rotate(45deg);
}
.menu-toggle.active span:nth-child(2) {
opacity: 0;
transform: translateX(-20px);
}
.menu-toggle.active span:nth-child(3) {
top: 11px;
transform: rotate(-45deg);
}
/* Mobile menu overlay */
.mobile-menu {
position: fixed;
top: 0;
right: 0;
width: 100%;
bottom: 0;
background: rgba(0, 0, 0, 0.95);
z-index: 999;
padding: 8rem 2rem 3rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.5rem;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.mobile-menu.active {
opacity: 1;
visibility: visible;
}
.mobile-menu a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
font-size: 2.5rem;
font-weight: 300;
letter-spacing: -0.02em;
padding: 0;
opacity: 0;
transform: translateY(20px);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-menu.active a {
opacity: 1;
transform: translateY(0);
}
.mobile-menu.active a:nth-child(1) { transition-delay: 0.05s; }
.mobile-menu.active a:nth-child(2) { transition-delay: 0.1s; }
.mobile-menu.active a:nth-child(3) { transition-delay: 0.15s; }
.mobile-menu.active a:nth-child(4) { transition-delay: 0.2s; }
.mobile-menu a:hover {
color: #ffffff;
transform: translateY(-2px);
}
/* Layout */
.page {
position: relative;
z-index: 1;
flex: 1;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
min-height: 70vh;
}
.panel {
position: relative;
min-height: 480px;
border: 0;
background-size: cover;
background-position: center;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 3rem;
overflow: hidden;
}
.panel::before {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 1;
transition: background 0.3s ease;
}
.panel:hover::before {
background: rgba(0, 0, 0, 0.6);
}
.panel__content {
position: relative;
z-index: 2;
max-width: 640px;
}
.panel__number {
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
opacity: 0.5;
margin-bottom: 0.5rem;
}
.panel__title {
font-size: 2.4rem;
font-weight: 300;
letter-spacing: -0.02em;
margin-bottom: 1rem;
}
.panel__text {
font-size: 1rem;
line-height: 1.7;
opacity: 0.86;
margin-bottom: 1.25rem;
}
.panel__text + .panel__text {
margin-top: 0.5rem;
}
.toggle-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1.5rem;
padding: 1.25rem;
margin-bottom: 1rem;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
transition: all 0.2s ease;
}
.toggle-row:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.15);
}
.toggle-info h3 {
margin: 0 0 0.4rem;
font-weight: 600;
font-size: 1.05rem;
letter-spacing: -0.01em;
}
.toggle-info p {
margin: 0;
color: var(--muted);
font-size: 0.95rem;
}
.toggle {
position: relative;
width: 56px;
height: 30px;
background: #3a3a3a;
border-radius: 15px;
cursor: pointer;
transition: background 0.25s;
border: 1px solid rgba(255, 255, 255, 0.14);
flex-shrink: 0;
}
.toggle.active {
background: #5a5a5a;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.toggle.disabled {
opacity: 0.5;
cursor: not-allowed;
}
.toggle span {
position: absolute;
top: 3px;
left: 4px;
width: 24px;
height: 24px;
background: #fff;
border-radius: 50%;
transition: transform 0.25s;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.toggle.active span {
transform: translateX(24px);
}
.cta-row {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-top: 1.5rem;
}
.btn-primary {
display: inline-block;
padding: 0.9rem 1.6rem;
background: var(--white);
color: var(--black);
text-decoration: none;
border-radius: 12px;
font-weight: 700;
letter-spacing: -0.01em;
transition: all 0.2s ease;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
cursor: pointer;
border: none;
}
.btn-primary:hover {
transform: translateY(-2px);
opacity: 0.92;
}
.btn-ghost {
display: inline-block;
padding: 0.9rem 1.6rem;
border: 1px solid var(--border);
color: var(--white);
text-decoration: none;
border-radius: 12px;
font-weight: 600;
letter-spacing: -0.01em;
transition: all 0.2s ease;
cursor: pointer;
background: transparent;
}
.btn-ghost:hover {
border-color: rgba(255, 255, 255, 0.4);
transform: translateY(-2px);
}
.panel.cookies-settings {
grid-column: span 3;
background: linear-gradient(135deg, rgba(20, 20, 20, 0.9), rgba(10, 10, 10, 0.9));
}
.panel.cookies-settings::before {
background: rgba(0, 0, 0, 0.55);
}
.panel.cookies-info {
grid-column: span 2;
background: linear-gradient(135deg, rgba(30, 30, 30, 0.9), rgba(15, 15, 15, 0.9));
}
.panel.cookies-info::before {
background: rgba(0, 0, 0, 0.6);
}
.info-section {
margin-bottom: 1.75rem;
}
.info-section h3 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 0.5rem;
letter-spacing: -0.01em;
}
.info-section p {
font-size: 0.95rem;
line-height: 1.7;
opacity: 0.82;
}
@media (max-width: 1024px) {
.page {
grid-template-columns: 1fr;
}
.panel.cookies-settings,
.panel.cookies-info {
grid-column: span 1;
min-height: 420px;
}
}
@media (max-width: 600px) {
.page {
padding: 0;
}
.panel {
padding: 2rem 1.5rem;
}
.panel__title {
font-size: 2rem;
}
.toggle-row {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
}
@media (max-width: 768px) {
.header {
padding: 1rem 1.5rem;
justify-content: space-between;
z-index: 1001;
}
.header__logo span {
display: none;
}
.header__logo img {
height: 32px;
}
nav {
display: none;
}
.menu-toggle {
display: block;
}
}
/* Footer */
.footer {
border-top: 1px solid var(--border);
padding: 3rem 2rem;
text-align: center;
}
.footer__links {
display: flex;
justify-content: center;
gap: 2.5rem;
flex-wrap: wrap;
list-style: none;
margin-bottom: 2rem;
}
.footer__links a {
color: rgba(255, 255, 255, 0.4);
text-decoration: none;
font-size: 0.875rem;
transition: color 0.2s ease;
}
.footer__links a:hover {
color: rgba(255, 255, 255, 0.9);
}
.footer__copyright {
color: rgba(255, 255, 255, 0.3);
font-size: 0.8125rem;
letter-spacing: 0.02em;
margin-bottom: 1.5rem;
}
.footer__powered {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
color: rgba(255, 255, 255, 0.25);
font-size: 0.75rem;
letter-spacing: 0.02em;
}
.footer__powered a {
display: flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
color: inherit;
transition: all 0.2s ease;
}
.footer__powered a:hover {
color: rgba(255, 255, 255, 0.5);
}
.footer__powered a:hover img {
opacity: 0.5;
}
.footer__powered img {
height: 20px;
width: auto;
filter: invert(1);
opacity: 0.25;
transition: opacity 0.2s ease;
}
/* Loading overlay */
.loading-overlay {
position: fixed;
inset: 0;
background: radial-gradient(circle at 30% 30%, rgba(0,168,255,0.08), rgba(0,0,0,0.94) 55%);
display: flex;
align-items: center;
justify-content: center;
z-index: 1500;
transition: opacity 0.35s ease, visibility 0.35s ease;
}
.loading-overlay.hide {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.spinner {
width: 52px;
height: 52px;
border: 2px solid rgba(255,255,255,0.12);
border-top-color: rgba(255,255,255,0.9);
border-radius: 50%;
animation: spin 0.9s linear infinite;
backdrop-filter: blur(8px);
background: rgba(255,255,255,0.02);
box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 10px 30px rgba(0,0,0,0.35);
}
@keyframes spin {
to { transform: rotate(360deg); }
}
Cookie Settings
Manage Your Cookies
We use cookies to improve your experience and analyze site traffic. You can manage your preferences below.
Necessary Cookies
Required for the site to function. Always on.
Analytics Cookies
Help us understand site usage through Google Analytics.
Cookie Policy
What You Need to Know
What Are Cookies?
Cookies are small text files stored on your device to remember preferences and improve your experience.
How We Use Them
Necessary cookies enable core functionality such as security and session management. Analytics cookies help us measure traffic and improve the site.
Third-Party Cookies
We use Google Analytics; its cookies are governed by Google's privacy policy. You can opt out with the Google Analytics opt-out browser add-on.
Managing Cookies
You can update your preferences above or manage cookies via your browser settings.