@import url('/fonts/fonts.css');

:root {
    --accent: #7C6CFF;
    --accent2: #38BDF8;
    --bg: #05060B;
    --text: #EDEFF7;
    --muted: #9BA3B5;
    --border: rgba(255, 255, 255, 0.08);
    --container-width: 1280px;
}

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

body {
    font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
    line-height: 1.65;
    color: var(--text);
    background-color: var(--bg);
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 32px;
}

a { color: #A5B4FC; }
a:hover { color: #C7D2FE; }
::selection { background: rgba(124, 108, 255, 0.4); }

/* Header & Navigation */
header {
    padding: 16px 0;
    position: sticky;
    top: 0;
    background: rgba(5, 6, 11, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

nav { display: flex; justify-content: space-between; align-items: center; }

.logo {
    font-family: 'Unbounded', sans-serif;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.02em;
    color: var(--text);
    text-decoration: none;
    text-transform: uppercase;
}

.logo span { color: var(--accent); }

nav ul { display: flex; list-style: none; align-items: center; }
nav ul li { margin-left: 26px; }

nav ul li a {
    text-decoration: none;
    color: var(--muted);
    font-weight: 500;
    font-size: 14px;
    transition: color 0.2s ease;
}

nav ul li a:hover { color: var(--text); }

.lang-switch a {
    color: var(--text);
    padding: 7px 15px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.lang-switch a:hover { border-color: var(--accent); }

.link {
    color: var(--muted);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: color 0.2s ease;
}

.link:hover { color: var(--text); }

.badge {
    display: inline-block;
    color: var(--text);
    padding: 8px 18px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.badge:hover { border-color: var(--accent); color: var(--text); }

/* Legal Pages */
.legal main, main.legal {
    padding: 80px 32px 100px;
    max-width: 800px;
    margin: 0 auto;
}

.legal h1 {
    font-family: 'Unbounded', sans-serif;
    font-size: clamp(26px, 3.4vw, 40px);
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.legal h2 {
    font-family: 'Unbounded', sans-serif;
    font-size: 19px;
    font-weight: 700;
    margin: 48px 0 16px;
    color: var(--text);
}

.legal h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 700;
    margin: 28px 0 10px;
    color: var(--text);
}

.legal p, .legal li {
    font-size: 15.5px;
    color: var(--muted);
    margin-bottom: 14px;
}

.legal strong { color: #C6CCDA; }

.legal ul, .legal ol { margin-bottom: 24px; padding-left: 24px; }
.legal li ul { margin: 10px 0 0; }

.legal section {
    border-left: 2px solid var(--border);
    padding-left: 24px;
    margin-bottom: 8px;
}

.legal section:hover { border-left-color: rgba(124, 108, 255, 0.45); }

.legal figure { margin: 0 0 24px; }
.legal figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    border: 1px solid var(--border);
}
.legal figure.shot-phone { max-width: 340px; }

/* Footer */
footer {
    padding: 40px 0;
    border-top: 1px solid var(--border);
    background: var(--bg);
}

footer .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
footer p { color: #5A6172; font-size: 13px; }

@media (max-width: 640px) {
    nav ul li { margin-left: 14px; }
    .legal main, main.legal { padding: 56px 24px 80px; }
    footer .container { flex-direction: column; text-align: center; }
}