:root{
  --bg:#0a0b1e; --surface:#111434; --ink:#e6e9f5; --muted:#aab1cc;
  --brand:#ff5e00; --brand2:#ff0099; --brand3:#00ccff;
  --line:#1d224d; --shadow:0 20px 70px rgba(5,8,30,.45);
  --gradient: radial-gradient(1000px 500px at 10% -10%, rgba(255,0,153,.28), transparent 60%),
              radial-gradient(800px 500px at 120% 10%, rgba(0,204,255,.25), transparent 50%),
              radial-gradient(700px 400px at 50% 110%, rgba(255,94,0,.18), transparent 60%);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font:16px/1.7 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);background-image:var(--gradient)}
img{max-width:100%;display:block}
a{color:#9ddfff;text-decoration:none;transition:opacity .2s ease, transform .2s ease}
a:hover{opacity:.9; transform:translateY(-1px)}
.container{width:min(1100px,92%);margin-inline:auto}
.nav{position:sticky; top:0; z-index:50; backdrop-filter: blur(12px); background:rgba(7,10,35,.6); border-bottom:1px solid var(--line)}
.nav .inner{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
.brand{display:flex;align-items:center;gap:.7rem;font-weight:800;letter-spacing:.3px}
.brand .logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand2),var(--brand3));box-shadow:var(--shadow)}
.menu{display:flex;gap:.25rem}
.menu a{padding:.6rem .9rem;border-radius:10px;color:#cdd4ef}
.menu a.active, .menu a:hover{background:rgba(0,204,255,.14); color:#fff}
.hero{padding: clamp(2rem, 6vw, 6rem) 0; display:grid; gap:2rem; grid-template-columns: 1.1fr .9fr; align-items:center}
.hero h1{font-size: clamp(2.2rem, 4.5vw, 3.2rem); margin:0 0 .6rem; line-height:1.1}
.hero p{color:var(--muted); margin:0 0 1.2rem; max-width:60ch}
.btn{display:inline-block; padding:1rem 1.1rem; border-radius:14px; font-weight:800; letter-spacing:.2px;
  background:linear-gradient(135deg,var(--brand),var(--brand2),var(--brand3)); color:#fff; box-shadow:var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;}
.btn:hover{transform: translateY(-2px); box-shadow:0 24px 60px rgba(0,204,255,.28)}
.btn-outline{background:linear-gradient(#111434,#111434) padding-box, linear-gradient(135deg,var(--brand),var(--brand2),var(--brand3)) border-box;
  color:#e2e8f0; border:1px solid transparent;}
.section{padding: clamp(2rem, 5vw, 4.5rem) 0}
.grid{display:grid;gap:1.25rem}
.grid-3{grid-template-columns: repeat(3, 1fr)}
.card{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.0)); border:1px solid var(--line);
  border-radius:18px;box-shadow:var(--shadow);padding:1.2rem}
.card h3{margin:.4rem 0}
.badge{display:inline-block;padding:.3rem .7rem;border-radius:999px;background:rgba(0,204,255,.22);color:#e6faff;font-size:.85rem;border:1px solid rgba(0,204,255,.35)}
.footer{padding:2rem 0;color:#aeb6d6;border-top:1px solid var(--line);background:rgba(7,10,35,.6)}
.hero-photo{border-radius:18px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); transform:translateZ(0)}
.hero-photo img{transition: transform .5s ease}
.hero-photo:hover img{transform: scale(1.04)}
.small{font-size:.95rem;color:var(--muted)}
input, textarea{width:100%; padding:.95rem 1rem; border-radius:12px; border:1px solid var(--line); background:#0e1232; color:#e2e8f0}
form .row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
form .row > div{display:flex;flex-direction:column;gap:.4rem}
form button{margin-top:1rem}
.project{position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); background:#101439}
.project img{width:100%; height:220px; object-fit:cover; display:block; filter:saturate(1.08) contrast(1.06)}
.project .meta{padding:1rem}
.project h3{margin:.2rem 0 .3rem}
.project p{margin:0; color:#b7c0e5}
.project .tag{display:inline-block;margin-top:.6rem;padding:.25rem .6rem;border-radius:999px;background:rgba(255,0,153,.15);color:#ffb3df;font-size:.8rem;border:1px solid rgba(255,0,153,.35)}
.project .overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,8,30,0) 25%, rgba(5,8,30,.88) 100%); opacity:0; transition:opacity .25s ease}
.project:hover .overlay{opacity:1}
.project .overlay .cta{position:absolute; bottom:12px; left:12px; background:linear-gradient(135deg,var(--brand),var(--brand2),var(--brand3)); color:#fff; padding:.5rem .8rem; border-radius:12px; font-weight:800}
@media (max-width: 980px){.hero{grid-template-columns: 1fr} .grid-3{grid-template-columns: 1fr 1fr}}
@media (max-width: 640px){.grid-3{grid-template-columns: 1fr}}