:root {
    --color-primary: #022542;
    --color-secondary-pink: #e45dbf;
    --color-secondary-cyan: #00c1d5;
    --color-text-default: #203546;
    --color-text-variant: #385d7b;
    --color-text-light: #9aa8b3;
    --color-border: #cadae7;
    --color-bg-white: #ffffff;
    --color-bg-light: #fdfdfe;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Montserrat', sans-serif;
    background: linear-gradient(155deg, rgba(0,193,213,0.05) 2%, rgba(228,93,191,0.05) 92%),
                linear-gradient(139deg, #f7f7f7 15%, #f0f7fd 57%), #f6fafd;
    color: var(--color-text-default);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
a:hover { opacity: 0.85; }

header {
    position: sticky; top: 0; z-index: 1000;
    background: var(--color-primary);
    padding: 16px clamp(20px, 8vw, 128px);
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    height: 88px;
}
.header-left { display: flex; align-items: center; gap: 28px; }
.logo { display: flex; align-items: center; gap: 4px; color: #fff; font-size: 24px; font-weight: 700; text-decoration: none; letter-spacing: -0.5px; }
.logo .dots { display: inline-flex; flex-direction: column; gap: 3px; margin: 0 1px; }
.logo .dots span { width: 7px; height: 7px; border-radius: 50%; }
.language-selector { display: flex; gap: 14px; }
.language-selector button { background: none; border: none; cursor: pointer; color: rgba(255,255,255,0.6); font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: 0.3px; padding: 2px 0; }
.language-selector button.active { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.btn {
    padding: 11px 22px; border-radius: 100px; font-size: 16px; font-weight: 600;
    text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
    transition: all 0.18s; cursor: pointer; border: none; font-family: inherit; white-space: nowrap;
}
.btn-secondary { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.5); }
.btn-secondary:hover { background: rgba(255,255,255,0.12); opacity: 1; }

main { padding: clamp(28px, 5vw, 56px) clamp(20px, 8vw, 128px) 80px; }
.legal-wrap { max-width: 840px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.doc-tabs { display: flex; flex-wrap: wrap; gap: 6px; background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: 100px; padding: 5px; align-self: flex-start; }
.doc-tabs a { font-size: 13.5px; font-weight: 600; color: var(--color-text-variant); text-decoration: none; padding: 9px 18px; border-radius: 100px; transition: background 0.15s, color 0.15s; }
.doc-tabs a:hover { background: var(--color-bg-light); color: var(--color-primary); opacity: 1; }
.doc-tabs a.active { background: var(--color-primary); color: #fff; }
.legal { background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: 16px; padding: clamp(24px, 5vw, 56px); box-shadow: 0 1px 3px rgba(2,37,66,0.06); }
.legal-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--color-secondary-cyan); }
.legal h1 { font-size: clamp(26px, 3.6vw, 36px); font-weight: 700; letter-spacing: -0.5px; color: var(--color-primary); margin: 10px 0 8px; text-wrap: pretty; }
.legal-updated { font-size: 13.5px; font-weight: 500; color: var(--color-text-light); }
.legal-body { margin-top: 28px; display: flex; flex-direction: column; gap: 18px; }
.legal-body h2 { font-size: 20px; font-weight: 700; color: var(--color-primary); letter-spacing: -0.2px; margin-top: 14px; text-wrap: pretty; }
.legal-body h3 { font-size: 15.5px; font-weight: 700; color: var(--color-text-default); margin-top: 6px; }
.legal-body p, .legal-body li { font-size: 15.5px; font-weight: 500; line-height: 1.65; color: var(--color-text-variant); text-wrap: pretty; }
.legal-body ul, .legal-body ol { display: flex; flex-direction: column; gap: 8px; padding-left: 22px; }
.legal-body a { color: var(--color-secondary-cyan); font-weight: 600; }
.legal-body button.inline-link { background: none; border: none; padding: 0; font: inherit; color: var(--color-secondary-cyan); font-weight: 600; text-decoration: underline; cursor: pointer; }
.legal-body .box { background: var(--color-bg-light); border: 1px solid var(--color-border); border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.legal-body table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.legal-body th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--color-text-light); padding: 0 12px 8px 0; border-bottom: 1px solid var(--color-border); }
.legal-body td { font-weight: 500; color: var(--color-text-variant); padding: 12px 12px 12px 0; border-bottom: 1px solid var(--color-border); vertical-align: top; line-height: 1.55; }
.legal-body .pending { background: var(--color-bg-light); border: 1px dashed var(--color-border); border-radius: 12px; padding: 22px; font-size: 14.5px; font-weight: 500; color: var(--color-text-light); line-height: 1.6; }

footer { background: var(--color-primary); padding: 48px clamp(20px, 8vw, 128px); }
.footer-content { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.footer-brand { display: flex; flex-direction: column; gap: 6px; }
.footer-brand p { font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.8); }
.footer-brand a { color: var(--color-secondary-pink); text-decoration: underline; }
.footer-nav { display: flex; gap: 40px; flex-wrap: wrap; }
.footer-nav a { color: #fff; text-decoration: none; font-size: 15px; font-weight: 500; }
.footer-nav button.footer-link { background: none; border: none; font-family: inherit; cursor: pointer; padding: 0; color: #fff; font-size: 15px; font-weight: 500; }
.footer-nav button.footer-link:hover { opacity: 0.8; }
.footer-contact { display: flex; align-items: center; gap: 16px; }
.footer-contact a.mail { color: var(--color-secondary-pink); text-decoration: underline; font-size: 15px; font-weight: 500; }

.cookie-scrim { position: fixed; inset: 0; background: rgba(2,37,66,0.28); opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 2000; }
.cookie-scrim.show { opacity: 1; pointer-events: auto; }
.cookie-banner {
    position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 130%);
    width: min(760px, calc(100vw - 32px)); background: var(--color-bg-white);
    border: 1px solid var(--color-border); border-radius: 16px;
    box-shadow: 0 24px 60px rgba(2,37,66,0.22); padding: 24px 26px;
    display: flex; flex-direction: column; gap: 16px; z-index: 2010;
    transition: transform 0.24s cubic-bezier(0.22,0.61,0.36,1);
}
.cookie-banner.show { transform: translate(-50%, 0); }
.cookie-banner h2 { font-size: 18px; font-weight: 700; color: var(--color-primary); letter-spacing: -0.2px; }
.cookie-banner p { font-size: 14.5px; font-weight: 500; line-height: 1.55; color: var(--color-text-variant); }
.cookie-banner p a { color: var(--color-secondary-cyan); font-weight: 600; }
.cookie-choices { display: flex; flex-direction: column; gap: 10px; }
.cookie-choice { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-bg-light); }
.cookie-choice .cc-text { display: flex; flex-direction: column; gap: 2px; }
.cookie-choice .cc-title { font-size: 13.5px; font-weight: 700; color: var(--color-text-default); }
.cookie-choice .cc-desc { font-size: 12.5px; font-weight: 500; color: var(--color-text-light); line-height: 1.45; }
.cookie-choice .cc-locked { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--color-text-light); margin-left: auto; white-space: nowrap; padding-top: 3px; }
.cookie-switch { position: relative; width: 44px; height: 24px; flex: none; margin-top: 1px; }
.cookie-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cookie-switch .track { position: absolute; inset: 0; border-radius: 999px; background: var(--color-border); transition: background 0.16s; pointer-events: none; }
.cookie-switch .knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(2,37,66,0.25); transition: transform 0.16s; pointer-events: none; }
.cookie-switch input:checked ~ .track { background: var(--color-secondary-cyan); }
.cookie-switch input:checked ~ .knob { transform: translateX(20px); }
.cookie-switch input:focus-visible ~ .track { box-shadow: 0 0 0 3px rgba(0,193,213,0.25); }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.cookie-actions .btn { font-size: 15px; padding: 10px 20px; }
.btn-cookie-accept { background: var(--color-secondary-cyan); color: #fff; }
.btn-cookie-accept:hover { background: #00aabc; opacity: 1; }
.btn-cookie-ghost { background: transparent; color: var(--color-text-variant); border: 1px solid var(--color-border); }
.btn-cookie-ghost:hover { background: var(--color-bg-light); color: var(--color-primary); opacity: 1; }

@media (max-width: 760px) {
    header { height: auto; flex-wrap: wrap; gap: 14px; }
    .doc-tabs { align-self: stretch; border-radius: 14px; }
    .doc-tabs a { flex: 1 1 auto; text-align: center; }
    .footer-content { flex-direction: column; text-align: center; }
    .footer-brand { align-items: center; }
    .footer-nav { flex-direction: column; gap: 14px; }
}
@media (max-width: 600px) {
    .cookie-banner { left: 8px; right: 8px; bottom: 8px; width: auto; transform: translateY(130%); padding: 20px; }
    .cookie-banner.show { transform: translateY(0); }
    .cookie-actions { justify-content: stretch; }
    .cookie-actions .btn { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .cookie-banner, .cookie-scrim, .cookie-switch .track, .cookie-switch .knob, .btn, .doc-tabs a { transition: none; } }