:root{--bg:#0e0f13;--surface:#151821;--muted:#a5adcb;--text:#e6e9f2;--primary:#6c5ce7;--primary-600:#5846e1;--accent:#22d3ee;--success:#22c55e}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:400 16px/1.6 "Inter",system-ui,-apple-system,Segoe UI,Roboto}
img{max-width:100%;display:block}
.container{width:min(1100px,92vw);margin-inline:auto}

.site-header{position:sticky;top:0;z-index:10;background:rgba(14,15,19,.8);backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid #1e2230}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;gap:12px;align-items:center}
.logo{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--accent));font-weight:800}
.brand-text strong{display:block;font-weight:800}
.brand-text small{color:var(--muted)}
.nav a{color:var(--muted);text-decoration:none;margin-left:18px}
.nav a:hover{color:var(--text)}

.hero{padding:64px 0;background:radial-gradient(1200px 400px at 20% -10%,rgba(108,92,231,.25),transparent),radial-gradient(800px 300px at 80% 0,rgba(34,211,238,.18),transparent)}
.hero h1{font-size:42px;line-height:1.2;margin:0 0 8px}
.hero p{color:var(--muted);margin:0 0 20px}
.btn{appearance:none;border:1px solid #2a2f43;background:var(--surface);color:var(--text);padding:10px 16px;border-radius:10px;cursor:pointer}
.btn.primary{background:linear-gradient(135deg,var(--primary),var(--primary-600));border:0}

.projects{padding:36px 0 64px}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.chip{border:1px solid #2a2f43;background:#161a25;color:var(--muted);padding:8px 12px;border-radius:999px;cursor:pointer}
.chip.is-active,.chip:hover{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--primary),var(--accent))}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.card{grid-column:span 12;background:linear-gradient(180deg,#1a1f2f,rgba(26,31,47,.85));border:1px solid #252a3b;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.card-body{padding:14px 16px}
.card h3{margin:0 0 6px;font-size:18px}
.card p{margin:0 0 10px;color:var(--muted)}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tags span{background:#10131b;color:#9aa3c7;border:1px solid #252a3b;padding:4px 8px;border-radius:8px;font-size:12px}

@media (min-width:700px){.card{grid-column:span 6}}
@media (min-width:1000px){.card{grid-column:span 4}}

.services{padding:56px 0;border-top:1px solid #1f2433;background:#0f121a}
.services h2,.contact h2{margin:0 0 12px}
.services-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;color:var(--muted)}

.contact{padding:56px 0;border-top:1px solid #1f2433}
.contact-form{display:grid;gap:10px}
.contact-form input,.contact-form textarea{width:100%;background:#0f121a;border:1px solid #262b3b;color:var(--text);padding:12px 14px;border-radius:10px}
.form-status{min-height:20px;color:var(--muted)}

.site-footer{padding:24px 0;border-top:1px solid #1f2433;color:var(--muted)}