@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/outfit-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/outfit-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
    --bg-color: #000000;
    --text-main: #ffffff;
    --text-dim: #8a90a0;
    --accent: #f4f7ff;
    --accent-2: #a9bdf0;
    --accent-3: #dbe5ff;
    --ok: #b4c6f2;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Outfit', sans-serif; }
html { background: #000; scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
::selection { background: rgba(120,155,240,0.4); }
[hidden] { display: none !important; }

body { color: var(--text-main); min-height: 100vh; overflow-x: hidden; line-height: 1.5; }
a { color: inherit; text-decoration: none; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-color); }
::-webkit-scrollbar-thumb { background: #1d1d24; border-radius: 10px; border: 2px solid var(--bg-color); }
::-webkit-scrollbar-thumb:hover { background: #2b2b35; }

.ambient-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; animation: floatOrb 22s infinite alternate ease-in-out; }
.orb-1 { width: 800px; height: 800px; background: radial-gradient(closest-side, rgba(120,155,240,0.17), transparent); top: -32%; left: -16%; }
.orb-2 { width: 720px; height: 720px; background: radial-gradient(closest-side, rgba(70,100,190,0.17), transparent); bottom: -26%; right: -16%; animation-delay: -6s; }
.ambient-bg::before { content: ""; position: absolute; top: -300px; left: 50%; width: 1300px; height: 700px; margin-left: -650px; background: radial-gradient(closest-side, rgba(255,255,255,0.055), transparent); }
@keyframes floatOrb { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(90px,50px) scale(1.15); } }

.grid-bg {
    position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.9;
    background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px); background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
}
#progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 250; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--accent), var(--accent-3)); box-shadow: 0 0 12px rgba(170,195,255,0.7); }

nav {
    position: fixed; top: 0; left: 0; width: 100%; z-index: 100;
    display: flex; align-items: center; justify-content: space-between; padding: 1rem clamp(1.25rem, 3.5vw, 3rem);
    background: transparent; transition: background 0.4s ease, backdrop-filter 0.4s ease;
}
nav.scrolled { background: rgba(8,8,11,0.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
nav.nav-open { background: #04050a; }
.logo { font-weight: 600; font-size: 1.02rem; letter-spacing: 0.18em; display: flex; align-items: center; gap: 0.75rem; }
.logo-mark { flex: none; width: 36px; height: 36px; border-radius: 50%; background: #000 url('/img/logo-mark.webp') center / cover; border: 1px solid rgba(200,215,255,0.45); box-shadow: 0 0 22px rgba(120,155,240,0.35); font-size: 0; color: transparent; }
.logo span { color: var(--text-dim); font-weight: 300; }
.nav-links { display: flex; gap: 2rem; }
.nav-links a { color: var(--text-dim); font-size: 0.95rem; font-weight: 500; transition: color 0.3s; position: relative; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transition: transform 0.35s cubic-bezier(0.16,1,0.3,1); }
.nav-links a:hover, .nav-links a.active { color: var(--text-main); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }

.nav-right { display: flex; align-items: center; gap: 0.9rem; }
.nav-user { display: flex; align-items: center; gap: 0.7rem; }
.nav-user-menu { position: relative; }
.user-chip { width: 36px; height: 36px; padding: 0; border-radius: 50%; overflow: hidden; cursor: pointer; background: #05070c; border: 1px solid rgba(200,215,255,0.45); box-shadow: 0 0 18px rgba(120,155,240,0.3); }
.user-chip img { display: block; width: 100%; height: 100%; object-fit: cover; }
.user-dropdown { position: absolute; right: 0; top: calc(100% + 10px); z-index: 130; width: 230px; padding: 0.4rem; border-radius: 16px; background: rgba(10,12,18,0.97); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.09); box-shadow: 0 20px 50px rgba(0,0,0,0.6); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.2s, transform 0.2s, visibility 0s 0.2s; }
.nav-user-menu.open .user-dropdown { opacity: 1; visibility: visible; transform: none; transition: opacity 0.2s, transform 0.2s; }
.user-dropdown a { display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.8rem; border-radius: 10px; color: #d0d4e0; font-size: 0.95rem; transition: background 0.2s, color 0.2s; }
.user-dropdown a svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.8; }
.user-dropdown a:hover, .user-dropdown a:focus-visible { background: rgba(255,255,255,0.06); color: #fff; outline: none; }
.ud-head { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.6rem 0.8rem 0.7rem; margin-bottom: 0.3rem; border-bottom: 1px solid rgba(255,255,255,0.07); min-width: 0; }
.ud-head b { font-weight: 600; font-size: 0.95rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ud-head span { font-size: 0.82rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ud-head span:empty { display: none; }
.ud-sep { display: block; height: 1px; margin: 0.3rem 0.4rem; background: rgba(255,255,255,0.07); }
.user-dropdown a.ud-logout { color: #e8a39a; }
.user-dropdown a.ud-logout:hover, .user-dropdown a.ud-logout:focus-visible { background: rgba(232,110,95,0.12); color: #ffc2b8; }
.changelog-bell { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--text-dim); border: 1px solid rgba(255,255,255,0.08); transition: color 0.2s, border-color 0.2s; }
.changelog-bell:hover { color: #fff; border-color: rgba(255,255,255,0.25); }
.changelog-bell svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.changelog-dot { display: none; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: #ff6b6b; box-shadow: 0 0 8px rgba(255,107,107,0.7); }
.changelog-dot.show { display: block; }
.burger { display: none; width: 40px; height: 40px; padding: 0; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); position: relative; }
.burger span { position: absolute; left: 11px; right: 11px; height: 2px; border-radius: 2px; background: #fff; transition: transform 0.3s, top 0.3s; }
.burger span:nth-child(1) { top: 15px; } .burger span:nth-child(2) { top: 23px; }
nav.nav-open .burger span:nth-child(1) { top: 19px; transform: rotate(45deg); }
nav.nav-open .burger span:nth-child(2) { top: 19px; transform: rotate(-45deg); }

.btn {
    position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 0.6rem; justify-content: center;
    padding: 0.8rem 1.6rem; border-radius: 100px; font-weight: 600; font-size: 0.95rem;
    border: 1px solid rgba(255,255,255,0.1); cursor: pointer; color: var(--text-main); background: rgba(255,255,255,0.04);
    transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s, background 0.3s, border-color 0.3s;
}
.btn:hover { transform: translateY(-2px); background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); }
.btn-primary { background: #f4f7ff; color: #05060a; border-color: rgba(255,255,255,0.7); box-shadow: 0 0 40px rgba(150,180,255,0.26), inset 0 1px 0 #fff; }
.btn-primary::after { content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(110,140,230,0.35), transparent); transform: skewX(-20deg); transition: left 0.7s ease; }
.btn-primary:hover { background: #fff; border-color: #fff; box-shadow: 0 0 64px rgba(170,195,255,0.5), inset 0 1px 0 #fff; }
.btn-primary:hover::after { left: 130%; }
.btn-sm { padding: 0.6rem 1.2rem; font-size: 0.88rem; }
.btn-lg { padding: 1rem 2.2rem; font-size: 1.05rem; }

main { position: relative; z-index: 10; animation: pageIn 0.6s cubic-bezier(0.16,1,0.3,1) backwards; }
@keyframes pageIn { from { transform: translateY(14px); } to { transform: none; } }

footer { position: relative; z-index: 10; max-width: 1200px; margin: 0 auto; padding: 3rem 2rem 3rem; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 3rem; }
.foot-brand p { color: var(--text-dim); margin-top: 1rem; max-width: 300px; line-height: 1.6; font-size: 0.95rem; }
.foot-title { font-size: 0.78rem; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 1.1rem; font-weight: 600; }
.foot-col a { display: block; color: #b9b9c4; margin-bottom: 0.7rem; font-size: 0.95rem; transition: color 0.3s; }
.foot-col a:hover { color: #fff; }
.foot-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.06); color: var(--text-dim); font-size: 0.88rem; }

@media (max-width: 1000px) {
    .burger { display: block; }
    .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; padding: 0.6rem clamp(1.25rem, 3.5vw, 3rem) 1.4rem; background: #04050a; }
    nav.nav-open .nav-links { display: flex; }
    .nav-links a { padding: 0.9rem 0; font-size: 1.05rem; border-bottom: 1px solid rgba(255,255,255,0.06); }
    .nav-links a::after { display: none; }
    .nav-right .btn-sm { padding: 0.55rem 1rem; }
    footer { grid-template-columns: 1fr 1fr; }
    .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
    footer { padding: 2.5rem 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition-duration: 0.01s !important; }
}