:root { --bg: #0b0b20; --surface: #16152f; --surface-2: #1d1b3c; --text: #f8f7ff; --muted: #c2bdd5; --line: #ffffff1c; --violet: #7258f6; --pink: #ef4ea7; --cyan: #47d9e9; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text); background: var(--bg); font: 400 16px/1.7 "DM Sans", "Segoe UI", sans-serif; }
body::before, body::after { content: ""; position: fixed; z-index: -1; width: 36rem; height: 36rem; border-radius: 50%; filter: blur(90px); opacity: .18; pointer-events: none; } body::before { top: -20rem; left: -15rem; background: var(--violet); } body::after { right: -18rem; bottom: -22rem; background: var(--pink); }
.nav { width: min(1020px, calc(100% - 40px)); min-height: 78px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; }.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none; font: 700 1.05rem "Space Grotesk", "Segoe UI", sans-serif; }.brand-mark { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; background: linear-gradient(135deg, var(--violet), var(--pink)); font-size: .72rem; }.nav-links { display: flex; gap: 18px; flex-wrap: wrap; }.nav-links a { color: var(--muted); font-size: .88rem; text-decoration: none; }.nav-links a:hover { color: var(--text); }
main { width: min(900px, calc(100% - 40px)); margin: 24px auto 70px; }.hero, .section { border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(145deg, #1b193cbf, #111128d9); box-shadow: 0 18px 48px #0004; }.hero { padding: clamp(28px, 6vw, 56px); }.pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid #cbbfff45; border-radius: 999px; color: #ddd7ff; background: #7a62f023; font-size: .73rem; font-weight: 700; letter-spacing: .07em; }.hero h1 { max-width: 700px; margin: 17px 0 12px; font: 700 clamp(2.35rem, 6vw, 4.35rem)/1.05 "Space Grotesk", "Segoe UI", sans-serif; letter-spacing: -.055em; }.hero h1 span { background: linear-gradient(100deg, #c7bbff, #ff90cf, #ffe094); -webkit-background-clip: text; background-clip: text; color: transparent; }.lede { max-width: 700px; margin: 0; color: var(--muted); font-size: 1.06rem; }.meta { margin: 24px 0 0; color: #a9a2c1; font-size: .86rem; }.toc { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 9px; margin-top: 30px; }.toc a { padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; color: #e7e2f7; background: #ffffff08; font-size: .88rem; text-decoration: none; }.toc a:hover { border-color: #cdbfff8c; background: #ffffff10; }
.section { margin-top: 16px; padding: clamp(24px, 4vw, 38px); }.section h2 { margin: 0 0 14px; font: 700 1.48rem/1.25 "Space Grotesk", "Segoe UI", sans-serif; }.section h3 { margin: 23px 0 8px; font: 700 1.02rem/1.3 "Space Grotesk", "Segoe UI", sans-serif; }.section p, .section li { color: var(--muted); }.section p { margin: 0 0 13px; }.section ul { margin: 8px 0 13px; padding-left: 21px; }.section a { color: #a99aff; }.note { margin-top: 18px; padding: 15px 17px; border-left: 3px solid var(--cyan); border-radius: 0 12px 12px 0; background: #47d9e912; color: #d7d4e6; }.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }.card { padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: #ffffff08; }.card strong { display: block; margin-bottom: 7px; }.card p { margin: 0; font-size: .94rem; }.contact { color: var(--text); font-weight: 700; }
footer { width: min(900px, calc(100% - 40px)); margin: 0 auto; padding: 25px 0 42px; color: #a9a2c1; font-size: .82rem; text-align: center; } footer a { color: #c3b9f7; text-decoration: none; }
@media (max-width: 620px) { .nav { width: min(100% - 28px, 1020px); padding: 14px 0; align-items: flex-start; }.nav-links { justify-content: flex-end; gap: 9px 14px; }.nav-links a { font-size: .8rem; } main { width: min(100% - 28px, 900px); margin-top: 8px; }.hero, .section { border-radius: 19px; }.toc { grid-template-columns: 1fr; } }