:root {
    --bg: #0b1220;
    --card: #0f172a;
    --text: #e6edf3;
    --muted: #94a3b8;
    --accent: #22d3ee; /* циан */
    --accent-2: #60a5fa; /* голубой */
    --ring: rgba(96,165,250,.35);
}
html, body { height: 100%; }
body {
    margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
    background: radial-gradient(1200px 800px at 80% -20%, rgba(34,211,238,.15), transparent 60%),
    radial-gradient(1000px 700px at -10% 10%, rgba(96,165,250,.12), transparent 50%),
    var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.container { max-width: 980px; margin: 0 auto; padding: 32px 20px 48px; }
.nav { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:32px; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.logo {
    width: 40px; height: 40px; border-radius: 12px; background:
        linear-gradient(135deg, var(--accent), var(--accent-2));
    display:grid; place-items:center; box-shadow: 0 0 0 6px rgba(96,165,250,.08), 0 10px 30px rgba(34,211,238,.15);
}
.logo span { font-weight: 800; color:#00131a; }
.brand-title { font-weight:700; letter-spacing:.3px; }

.hero { padding: 32px 0 20px; }
.h1 { font-size: clamp(28px, 4vw, 42px); line-height:1.1; margin: 0 0 12px; }
.subtitle { color: var(--muted); font-size: clamp(15px, 2.2vw, 18px); max-width: 780px; }

.grid { display:grid; gap:18px; grid-template-columns: 1fr; margin-top: 28px; }
@media (min-width: 880px){ .grid { grid-template-columns: 1.1fr .9fr; } }

.card { background: linear-gradient(180deg, rgba(15,23,42,.9), rgba(15,23,42,.75));
    border: 1px solid rgba(148,163,184,.15); border-radius: 18px; padding: 18px 18px; backdrop-filter: blur(8px);
    box-shadow: 0 10px 30px rgba(2,6,23,.35), inset 0 1px 0 rgba(255,255,255,.02);
}
.card h2 { margin: 4px 0 10px; font-size: 18px; letter-spacing:.2px; }
.card p, .card li { color: var(--muted); font-size: 15px; line-height: 1.6; }

.list { list-style:none; padding:0; margin:10px 0 0; display:grid; gap:10px; }
.row { display:flex; gap:12px; align-items:flex-start; }
.ico { width: 20px; height: 20px; margin-top: 2px; opacity:.9; }

.projects li { display:flex; align-items:center; gap:10px; }
.badge { font-size:12px; color:#081018; background: linear-gradient(135deg, var(--accent), var(--accent-2));
    padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(0,0,0,.08); }

.footer { margin-top: 28px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; color: var(--muted); font-size: 13px; }
a { color: #9bd5ff; text-decoration: none; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }