/* ══════════════════════════════════════════════════════════════
   OmniView — shared site styles (extracted from _base.html)
   Design tokens: change a value here, it applies site-wide.
   Bump the ?v= query in _base.html when editing this file.
   ══════════════════════════════════════════════════════════════ */
:root {
    /* Brand accents */
    --accent:#00E5FF;
    --accent-2:#7B61FF;
    /* Semantic */
    --ok:#68D391;
    --err:#F56565;
    --warn:#ECC94B;
    /* Surface */
    --bg:#050507;
    /* Text scale (high → faint) */
    --text-hi:#F0F2F8;
    --text-bright:#E0E8F0;
    --text:#B8BCC8;
    --text-mid:#8890A0;
    --text-dim:#7E8698;   /* was #6A7080 (4.1:1) — now 5.6:1 on --bg */
    --text-low:#707A90;   /* was #4A5568 (2.7:1) — now 4.7:1 on --bg */
    --text-faint:#4E5870; /* was #3A4050 (2.0:1) — decorative tier, now 2.9:1 */
}

@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:400 700;
    font-display:swap; src:url('/static/fonts/SpaceGrotesk.woff2') format('woff2'); }
@font-face { font-family:'Space Mono'; font-style:normal; font-weight:400;
    font-display:swap; src:url('/static/fonts/SpaceMono-Regular.woff2') format('woff2'); }
@font-face { font-family:'Space Mono'; font-style:normal; font-weight:700;
    font-display:swap; src:url('/static/fonts/SpaceMono-Bold.woff2') format('woff2'); }
:root {
    --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, 'Helvetica Neue', sans-serif;
    --font-display: 'Space Grotesk', -apple-system, sans-serif;
    --font-mono: 'Space Mono', 'SF Mono', monospace;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); font-family:var(--font-sans); color:var(--text);
       overflow-x:hidden; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:none; }
h1, h2, h3 { font-family:var(--font-display); letter-spacing:-0.02em; }
.mono { font-family:var(--font-mono); }

/* ── Glass panels ── */
.glass {
    background:rgba(255,255,255,0.04);
    backdrop-filter:blur(16px) saturate(1.3);
    -webkit-backdrop-filter:blur(16px) saturate(1.3);
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 8px 32px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.06);
    border-radius:12px;
    transition:border-color 0.3s, box-shadow 0.3s;
}
.glass:hover {
    border-color:rgba(255,255,255,0.12);
    box-shadow:0 12px 40px rgba(0,0,0,0.3), inset 0 1px 2px rgba(255,255,255,0.08);
}
.glass-subtle {
    background:rgba(255,255,255,0.025);
    backdrop-filter:blur(12px) saturate(1.2);
    -webkit-backdrop-filter:blur(12px) saturate(1.2);
    border:1px solid rgba(255,255,255,0.06);
    box-shadow:0 4px 20px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.04);
    border-radius:10px;
}

/* ── Animated mesh background ── */
.bg-mesh {
    position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.bg-mesh .orb {
    position:absolute; border-radius:50%; filter:blur(120px); opacity:0.5;
    animation:orbFloat 20s ease-in-out infinite;
}
.bg-mesh .orb-1 { width:600px; height:600px; top:-15%; left:-10%;
    background:rgba(0,229,255,0.07); animation-delay:0s; }
.bg-mesh .orb-2 { width:500px; height:500px; bottom:-10%; right:-10%;
    background:rgba(123,97,255,0.06); animation-delay:-7s; }
.bg-mesh .orb-3 { width:400px; height:400px; top:40%; left:50%;
    background:rgba(0,229,255,0.04); animation-delay:-14s; }
@keyframes orbFloat {
    0%, 100% { transform:translate(0, 0) scale(1); }
    33% { transform:translate(30px, -40px) scale(1.05); }
    66% { transform:translate(-20px, 30px) scale(0.95); }
}

/* ── Dot grid overlay ── */
.bg-mesh::after {
    content:''; position:absolute; inset:0;
    background-image:radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size:32px 32px;
}

/* ── Nav ── */
nav { position:fixed; top:0; left:0; right:0; z-index:100;
      display:flex; align-items:center; gap:16px;
      padding:14px 40px; backdrop-filter:blur(24px) saturate(1.4);
      -webkit-backdrop-filter:blur(24px) saturate(1.4);
      background:rgba(5,5,7,0.6);
      border-bottom:1px solid rgba(255,255,255,0.06);
      box-shadow:0 4px 24px rgba(0,0,0,0.15);
      transition:all 0.3s; }
nav.scrolled { padding:10px 40px; background:rgba(5,5,7,0.8);
    border-bottom-color:rgba(255,255,255,0.08);
    box-shadow:0 4px 32px rgba(0,0,0,0.25); }
nav .logo { font-family:var(--font-display); font-size:0.85rem;
            letter-spacing:0.05em;
            background:linear-gradient(135deg,var(--accent),var(--accent-2));
            -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
nav .logo .bold { font-weight:700; }
nav .logo .light { font-weight:300; letter-spacing:0.08em; }
nav .links { margin-left:auto; display:flex; gap:28px; font-size:0.8rem; }
nav .links a { color:var(--text-dim); transition:color 0.3s; font-weight:400;
               position:relative; }
nav .links a::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:1.5px;
    background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width 0.3s; }
nav .links a:hover { color:var(--text-bright); }
nav .links a:hover::after { width:100%; }
nav .links a.nav-cta { color:var(--bg); background:linear-gradient(135deg,var(--accent),var(--accent-2));
    padding:6px 16px; border-radius:8px; font-weight:600; font-size:0.72rem; }
nav .links a.nav-cta::after { display:none; }
nav .links a.nav-cta:hover { opacity:0.9; color:var(--bg); }

/* ── Hamburger ── */
nav .burger { display:none; background:none; border:none; cursor:pointer; padding:4px;
    margin-left:auto; width:28px; height:28px; position:relative; }
nav .burger span { display:block; width:18px; height:1.5px; background:var(--text);
    border-radius:1px; position:absolute; left:5px; transition:all 0.3s; }
nav .burger span:nth-child(1) { top:8px; }
nav .burger span:nth-child(2) { top:13px; }
nav .burger span:nth-child(3) { top:18px; }
nav .burger.open span:nth-child(1) { top:13px; transform:rotate(45deg); }
nav .burger.open span:nth-child(2) { opacity:0; }
nav .burger.open span:nth-child(3) { top:13px; transform:rotate(-45deg); }

/* ── Mobile performance: disable heavy GPU effects ── */
@media (max-width:600px) {
    .bg-mesh .orb { animation:none; filter:blur(60px); opacity:0.3; }
    .glass, .glass-subtle, nav, nav.scrolled {
        backdrop-filter:none; -webkit-backdrop-filter:none; }
}

@media (max-width:768px) {
    nav { padding:12px 20px; }
    nav.scrolled { padding:10px 20px; }
    nav .burger { display:block; }
    nav .links { position:fixed; top:0; right:0; width:240px; height:100vh;
        flex-direction:column; gap:0; padding:72px 32px 32px;
        background:rgba(5,5,7,0.97); backdrop-filter:blur(24px);
        border-left:1px solid rgba(255,255,255,0.06);
        transform:translateX(100%); transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
        font-size:0.9rem; z-index:101; }
    nav .links.open { transform:translateX(0); }
    nav .links a { padding:14px 0; border-bottom:1px solid rgba(255,255,255,0.04); }
    nav .links a::after { display:none; }
    nav .links a.nav-cta { text-align:center; margin-top:8px; }
    .container { padding:0 20px; }
    footer { padding:24px 20px; flex-direction:column; gap:12px; text-align:center; }
}

.container { position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:0 40px; }

/* ── Footer ── */
footer { position:relative; z-index:1; border-top:1px solid rgba(255,255,255,0.04);
         padding:32px 40px; margin-top:100px; font-size:0.75rem; color:var(--text-faint);
         display:flex; justify-content:space-between; align-items:center; }
footer a { color:var(--text-low); transition:color 0.3s; }
footer a:hover { color:var(--text); }

/* ── Buttons ── */
.btn {
    display:inline-flex; align-items:center; justify-content:center;
    padding:13px 32px; border-radius:10px; font-size:0.8rem;
    font-family:var(--font-sans); font-weight:600; cursor:pointer;
    border:none; transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing:0.01em; position:relative;
}
.btn-primary {
    background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%);
    color:var(--bg); overflow:hidden;
}
.btn-primary::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(135deg,rgba(255,255,255,0.2) 0%,transparent 50%);
    opacity:0; transition:opacity 0.3s;
}
.btn-primary::after {
    content:''; position:absolute; inset:-1px; border-radius:11px; z-index:-1;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    filter:blur(16px); opacity:0; transition:opacity 0.4s;
}
.btn-primary:hover { transform:translateY(-2px) scale(1.02); }
.btn-primary:hover::before { opacity:1; }
.btn-primary:hover::after { opacity:0.4; }
.btn-outline {
    background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.1); color:var(--text-bright);
    backdrop-filter:blur(8px);
}
.btn-outline:hover { border-color:rgba(0,229,255,0.4); background:rgba(0,229,255,0.06);
    box-shadow:0 4px 20px rgba(0,229,255,0.12); transform:translateY(-2px); }

/* ── Form elements ── */
.input {
    width:100%; padding:12px 16px; border-radius:10px; font-size:0.8rem;
    font-family:var(--font-sans); background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.07); color:var(--text-bright); outline:none;
    transition:all 0.3s;
}
.input:focus { border-color:rgba(0,229,255,0.4);
    box-shadow:0 0 0 3px rgba(0,229,255,0.06), 0 4px 16px rgba(0,229,255,0.06);
    background:rgba(255,255,255,0.04); }
.input::placeholder { color:var(--text-faint); }
select.input { appearance:none; cursor:pointer; }
textarea.input { resize:vertical; min-height:100px; }

.label { display:block; font-size:0.7rem; color:var(--text-mid); margin-bottom:6px; font-weight:500; }
.field { margin-bottom:20px; }

/* ── Scroll reveal ── */
.reveal {
    opacity:0; transform:translateY(32px);
    transition:opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
               transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:0.1s; }
.reveal-delay-2 { transition-delay:0.2s; }
.reveal-delay-3 { transition-delay:0.3s; }
.reveal-delay-4 { transition-delay:0.4s; }

/* ── Event sub-nav ── */
.event-subnav { display:flex; align-items:center; gap:6px; padding:10px 40px;
    background:rgba(255,255,255,0.02); border-bottom:1px solid rgba(255,255,255,0.04);
    font-size:0.72rem; flex-wrap:wrap; }
.event-subnav a { color:var(--text-dim); padding:5px 14px; border-radius:6px;
    transition:all 0.2s; font-family:var(--font-sans); font-weight:500; }
.event-subnav a:hover { color:var(--text-bright); background:rgba(255,255,255,0.04); }
.event-subnav a.active { color:var(--accent); background:rgba(0,229,255,0.08);
    border:1px solid rgba(0,229,255,0.15); }
.event-subnav .back-link { margin-right:auto; color:var(--text-low); font-size:0.65rem; }
.event-subnav .back-link:hover { color:var(--text); }
.event-subnav .sep { color:#2A2E38; font-size:0.6rem; }
@media (max-width:768px) { .event-subnav { padding:8px 16px; gap:4px; }
    .event-subnav a { padding:4px 10px; font-size:0.65rem; } }

/* ── Cookie banner ── */
.cookie-banner { position:fixed; bottom:0; left:0; right:0; z-index:200;
    padding:14px 24px; display:flex; align-items:center; justify-content:center;
    gap:16px; font-size:0.7rem; color:var(--text-mid);
    background:rgba(5,5,7,0.92); backdrop-filter:blur(12px);
    border-top:1px solid rgba(255,255,255,0.06);
    transform:translateY(0); transition:transform 0.4s ease; }
.cookie-banner.hidden { transform:translateY(100%); pointer-events:none; }
.cookie-banner a { color:var(--accent); }
.cookie-btn { padding:6px 18px; border-radius:6px; border:none; cursor:pointer;
    font-size:0.65rem; font-weight:600; font-family:var(--font-sans);
    background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:var(--bg);
    transition:opacity 0.2s; }
.cookie-btn:hover { opacity:0.85; }

/* ── Loading spinner for buttons ── */
@keyframes btnSpin { to { transform:rotate(360deg); } }
.btn-loading { pointer-events:none; opacity:0.7; }
.btn-loading .btn-spinner { display:inline-block; width:14px; height:14px;
    border:2px solid rgba(255,255,255,0.3); border-top-color:#fff;
    border-radius:50%; animation:btnSpin 0.6s linear infinite;
    margin-right:8px; vertical-align:middle; }
.btn-primary.btn-loading .btn-spinner { border-color:rgba(5,5,7,0.2);
    border-top-color:var(--bg); }

/* ── Toast notifications ── */
.toast-container { position:fixed; top:70px; right:20px; z-index:300;
    display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast { pointer-events:auto; display:flex; align-items:center; gap:10px;
    padding:12px 18px; border-radius:10px; font-size:0.7rem; font-family:var(--font-sans);
    color:var(--text-bright); min-width:240px; max-width:380px;
    background:rgba(10,12,18,0.92); backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 8px 32px rgba(0,0,0,0.4);
    transform:translateX(120%); opacity:0;
    transition:transform 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.4s; }
.toast.visible { transform:translateX(0); opacity:1; }
.toast.exit { transform:translateX(120%); opacity:0; }
.toast-icon { width:18px; height:18px; flex-shrink:0; }
.toast-body { flex:1; line-height:1.4; }
.toast-close { background:none; border:none; color:var(--text-low); cursor:pointer;
    font-size:1rem; padding:0 0 0 8px; line-height:1; transition:color 0.2s; }
.toast-close:hover { color:var(--text); }
.toast.toast-success { border-color:rgba(104,211,145,0.2); }
.toast.toast-success .toast-icon { color:var(--ok); }
.toast.toast-error { border-color:rgba(245,101,101,0.2); }
.toast.toast-error .toast-icon { color:var(--err); }
.toast.toast-info { border-color:rgba(0,229,255,0.2); }
.toast.toast-info .toast-icon { color:var(--accent); }
.toast.toast-warning { border-color:rgba(236,201,75,0.2); }
.toast.toast-warning .toast-icon { color:var(--warn); }
@media (max-width:768px) {
    .toast-container { top:auto; bottom:20px; right:12px; left:12px; }
    .toast { min-width:0; max-width:none; }
}


/* ── Keyboard focus (fase 2) ── */
:where(a, button, [tabindex]):focus-visible {
    outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;
}

/* ── Skip link (fase 2) ── */
.skip-link { position:absolute; left:-9999px; top:16px; z-index:300;
    padding:10px 16px; background:var(--bg); color:var(--accent);
    border:1px solid rgba(0,229,255,0.4); border-radius:8px; font-size:0.8rem; }
.skip-link:focus { left:16px; }

/* ── Reduced motion (fase 2): kill animations, keep content visible ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration:0.01ms !important; animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
    }
    html { scroll-behavior:auto; }
    .reveal { opacity:1 !important; transform:none !important; }
}