:root {
    --bg-main: #03050c; --bg-panel: rgba(7, 10, 22, 0.74); --bg-panel-strong: 
    rgba(10, 14, 30, 0.86); --text-main: #f4f7ff; --text-muted: #9aa6c4; 
    --accent-cyan: #6ee7ff; --accent-blue: #3f6cff; --accent-purple: #b84dff; 
    --accent-lava: #ff4f7b; --border-glass: rgba(255, 255, 255, 0.095); 
    --shadow-glow: 0 0 38px rgba(110, 231, 255, 0.10); --shadow-panel: 0 30px 
    90px rgba(0, 0, 0, 0.62); --radius-xl: 30px; --radius-lg: 22px; --radius-md: 
    14px; --font-main: "Inter", "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box;
}
html { min-height: 100%; scroll-behavior: smooth;
}
body { min-height: 100vh; margin: 0; font-family: var(--font-main); color: 
    var(--text-main); background: var(--bg-main); overflow-x: hidden;
}
body::before { content: ""; position: fixed; inset: -45%; z-index: -3; 
    pointer-events: none; background:
        linear-gradient(120deg, rgba(3, 5, 12, 1) 0%, rgba(6, 8, 20, 1) 18%, 
            rgba(18, 10, 35, 0.95) 32%, rgba(9, 22, 44, 0.95) 48%, rgba(28, 10, 
            42, 0.95) 64%, rgba(8, 12, 26, 1) 82%, rgba(3, 5, 12, 1) 100%
        ); background-size: 240% 240%; animation: base-flow 34s ease-in-out 
    infinite alternate;
}
body::after { content: ""; position: fixed; inset: -35%; z-index: -2; 
    pointer-events: none; background:
        linear-gradient(105deg, transparent 0%, transparent 13%, rgba(110, 231, 
            255, 0.00) 18%, rgba(110, 231, 255, 0.18) 26%, rgba(80, 110, 255, 
            0.08) 34%, transparent 43%, transparent 49%, rgba(184, 77, 255, 
            0.19) 57%, rgba(255, 79, 123, 0.13) 64%, transparent 74%, 
            transparent 80%, rgba(110, 231, 255, 0.11) 88%, transparent 100%
        ), linear-gradient(245deg, transparent 0%, rgba(255, 79, 123, 0.12) 18%, 
            transparent 32%, rgba(63, 108, 255, 0.12) 48%, transparent 62%, 
            rgba(184, 77, 255, 0.14) 78%, transparent 100%
        ); background-size: 280% 280%, 320% 320%; mix-blend-mode: screen; 
    opacity: 0.54; filter: blur(42px) saturate(145%); animation: lava-flow 26s 
    ease-in-out infinite alternate;
}
@keyframes base-flow { 0% { background-position: 0% 40%; transform: scale(1.03) 
        rotate(0deg);
    }
    50% { background-position: 85% 65%; transform: scale(1.07) rotate(1deg);
    }
    100% { background-position: 18% 90%; transform: scale(1.04) rotate(-1deg);
    }
}
@keyframes lava-flow { 0% { background-position: 0% 45%, 90% 20%; transform: 
        translate3d(-3%, -2%, 0) scale(1.08) rotate(-2deg);
    }
    45% { background-position: 68% 58%, 35% 76%; transform: translate3d(2%, 3%, 
        0) scale(1.14) rotate(1deg);
    }
    100% { background-position: 100% 38%, 0% 55%; transform: translate3d(3%, 
        -1%, 0) scale(1.1) rotate(2deg);
    }
}
a { color: var(--accent-cyan); text-decoration: none;
}
a:hover { color: var(--accent-purple);
}
.page { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 32px 0;
}
.navbar { position: sticky; top: 18px; z-index: 20; display: flex; align-items: 
    center; justify-content: space-between; gap: 20px; padding: 14px 18px; 
    margin-bottom: 80px; border: 1px solid var(--border-glass); border-radius: 
    999px; background:
        linear-gradient(135deg, rgba(255,255,255,0.055), 
        rgba(255,255,255,0.018)), rgba(5, 8, 18, 0.72);
    backdrop-filter: blur(26px) saturate(150%); -webkit-backdrop-filter: 
    blur(26px) saturate(150%); box-shadow: var(--shadow-panel);
}
.brand { display: flex; align-items: center; gap: 12px; font-weight: 800; 
    letter-spacing: 0.08em; text-transform: uppercase;
}
.brand-mark { width: 34px; height: 34px; border-radius: 50%; background: 
        radial-gradient(circle at 35% 30%, #ffffff 0%, var(--accent-cyan) 16%, 
        transparent 38%), linear-gradient(135deg, var(--accent-cyan), 
        var(--accent-purple));
    box-shadow: 0 0 18px rgba(110, 231, 255, 0.28), 0 0 34px rgba(184, 77, 255, 
        0.16);
}
.nav-links { display: flex; align-items: center; gap: 8px;
}
.nav-links a { padding: 9px 14px; border-radius: 999px; color: 
    var(--text-muted); font-size: 14px;
}
.nav-links a:hover { color: var(--text-main); background: rgba(255, 255, 255, 
    0.055);
}
.hero { min-height: 62vh; display: grid; place-items: center; text-align: 
    center;
}
.glass-panel { position: relative; overflow: hidden; padding: clamp(28px, 6vw, 
    72px); border: 1px solid var(--border-glass); border-radius: 
    var(--radius-xl); background:
        linear-gradient(135deg, rgba(255,255,255,0.075), 
        rgba(255,255,255,0.018)), var(--bg-panel);
    backdrop-filter: blur(32px) saturate(155%); -webkit-backdrop-filter: 
    blur(32px) saturate(155%); box-shadow: var(--shadow-panel), 
    var(--shadow-glow);
}
.glass-panel::before { content: ""; position: absolute; inset: 0; 
    pointer-events: none; background:
        linear-gradient(120deg, rgba(255,255,255,0.13) 0%, 
            rgba(255,255,255,0.035) 22%, transparent 42%, rgba(110, 231, 255, 
            0.045) 62%, transparent 82%, rgba(184, 77, 255, 0.055) 100%
        ); opacity: 0.72;
}
.glass-panel::after { content: ""; position: absolute; inset: -45%; 
    pointer-events: none; background:
        linear-gradient(112deg, transparent 14%, rgba(110, 231, 255, 0.13) 28%, 
            transparent 42%, rgba(184, 77, 255, 0.12) 58%, rgba(255, 79, 123, 
            0.08) 66%, transparent 82%
        ); opacity: 0.32; filter: blur(18px); animation: glass-current 12s 
    ease-in-out infinite alternate;
}
@keyframes glass-current { 0% { transform: translateX(-8%) translateY(2%) 
        rotate(8deg);
    }
    100% { transform: translateX(8%) translateY(-2%) rotate(8deg);
    }
}
.glass-panel > * { position: relative; z-index: 1;
}
.eyebrow { margin: 0 0 18px; color: var(--accent-cyan); font-size: 13px; 
    font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; 
    opacity: 0.92;
}
h1 { margin: 0; font-size: clamp(42px, 8vw, 92px); line-height: 0.95; 
    letter-spacing: -0.06em;
}
.subtitle { max-width: 760px; margin: 28px auto 0; color: var(--text-muted); 
    font-size: clamp(18px, 2.2vw, 26px); line-height: 1.55;
}
.motto { margin-top: 34px; font-size: clamp(22px, 3vw, 38px); font-weight: 800; 
    background: linear-gradient(90deg, var(--accent-cyan), 
    var(--accent-purple)); -webkit-background-clip: text; background-clip: text; 
    color: transparent;
}
.section { margin-top: 90px;
}
.section-title { margin: 0 0 18px; font-size: clamp(30px, 4vw, 52px); 
    letter-spacing: -0.04em;
}
.section-text { max-width: 780px; color: var(--text-muted); font-size: 18px; 
    line-height: 1.75;
}
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; 
    margin-top: 30px;
}
.card { position: relative; overflow: hidden; padding: 24px; border: 1px solid 
    var(--border-glass); border-radius: var(--radius-lg); background:
        linear-gradient(135deg, rgba(255,255,255,0.052), 
        rgba(255,255,255,0.015)), rgba(7, 10, 22, 0.68);
    backdrop-filter: blur(22px) saturate(145%); -webkit-backdrop-filter: 
    blur(22px) saturate(145%); box-shadow: 0 20px 62px rgba(0, 0, 0, 0.44);
}
.card::before { content: ""; position: absolute; inset: 0; background: 
        linear-gradient(120deg,
            rgba(110, 231, 255, 0.055), transparent 46%, rgba(184, 77, 255, 
            0.045)
        ); opacity: 0.62; pointer-events: none;
}
.card > * { position: relative; z-index: 1;
}
.card h3 { margin: 0 0 10px; font-size: 22px;
}
.card p { margin: 0; color: var(--text-muted); line-height: 1.65;
}
.button-row { display: flex; justify-content: center; gap: 14px; flex-wrap: 
    wrap; margin-top: 34px;
}
.btn { display: inline-flex; align-items: center; justify-content: center; 
    min-height: 46px; padding: 0 22px; border-radius: 999px; border: 1px solid 
    rgba(110, 231, 255, 0.25); color: var(--text-main); background:
        linear-gradient(135deg, rgba(110, 231, 255, 0.13), rgba(184, 77, 255, 
        0.10)), rgba(255, 255, 255, 0.025);
    box-shadow: 0 0 24px rgba(110, 231, 255, 0.10); font-weight: 700; 
    transition:
        transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, 
        background 180ms ease;
}
.btn:hover { color: #ffffff; transform: translateY(-1px); border-color: 
    rgba(184, 77, 255, 0.36); background:
        linear-gradient(135deg, rgba(110, 231, 255, 0.18), rgba(184, 77, 255, 
        0.14)), rgba(255, 255, 255, 0.035);
    box-shadow: 0 0 30px rgba(184, 77, 255, 0.16), 0 0 20px rgba(110, 231, 255, 
        0.12);
}
.btn.secondary { background: rgba(255, 255, 255, 0.035); border-color: 
    var(--border-glass); color: var(--text-muted);
}
footer { margin-top: 100px; padding: 36px 0 20px; color: var(--text-muted); 
    text-align: center; font-size: 14px;
}
@media (max-width: 820px) { .navbar { border-radius: 24px; align-items: 
        flex-start; flex-direction: column;
    }
    .nav-links { flex-wrap: wrap;
    }
    .grid { grid-template-columns: 1fr;
    }
    .hero { min-height: auto;
    }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto;
    }
    body::before, body::after, .glass-panel::after { animation: none;
    }
    .btn { transition: none;
    }
}