:root{
  --bg:#ffffff; --panel:#ffffff; --muted:#475569; --text:#0f172a;
  --accent:#0284c7; --accent-2:#16a34a; --warning:#ea580c;
  --ring: rgba(2,132,199,.25); --card:#f8fafc; --line:#e2e8f0; --shadow:0 12px 30px rgba(2,6,23,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{ margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1000px 500px at 90% -10%, rgba(2,132,199,.08), transparent), url('assets/images/pattern.svg') center/auto repeat;
  color:var(--text); line-height:1.6;
}
a{color:var(--accent); text-decoration:none}
img{max-width:100%; height:auto; display:block}
header.nav{ position:sticky; top:0; z-index:50; backdrop-filter:saturate(150%) blur(8px); background: rgba(255,255,255,.8); border-bottom:1px solid var(--line); }
.container{max-width:1100px; margin:0 auto; padding:0 20px}
.row{display:flex; align-items:center; gap:24px; flex-wrap:nowrap; justify-content:space-between}
.brand{display:flex; align-items:center; gap:10px; padding:14px 0}
.brand img{width:28px; height:28px}
.brand span{font-weight:700; letter-spacing:.5px}
/* Nav */
.nav-wrap{display:flex; align-items:center; gap:14px; position:relative}
.nav-toggle{
  display:none; border:1px solid var(--line); background:#fff; border-radius:10px; padding:8px 10px; cursor:pointer;
}
.nav-toggle span{display:block; width:22px; height:2px; background:#0f172a; margin:4px 0}
nav ul{display:flex; gap:18px; list-style:none; padding:0; margin:0}
nav a{display:inline-block; padding:12px 8px; border-radius:10px}
nav a:hover{background:rgba(2,132,199,.08)}
/* Mobile menu */
@media (max-width: 900px){
  .row{gap:12px}
  .nav-toggle{display:inline-block}
  nav{position:absolute; top:56px; right:0; left:auto; background:#ffffff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); width: 240px; display:none}
  nav.open{display:block}
  nav ul{flex-direction:column; gap:0}
  nav li + li{border-top:1px solid var(--line)}
  nav a{padding:12px 14px; display:block}
}
/* Desktop */
@media (min-width: 901px){
  nav{display:block !important; position:static; background:transparent; border:none; box-shadow:none; width:auto}
}
.hero{padding:64px 0 30px; position:relative; overflow:hidden}
.hero .grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:36px}
.badge{display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border-radius:999px; font-size:13px; background:rgba(2,132,199,.12); border:1px solid rgba(2,132,199,.3); color:#075985}
.title{font-size:40px; line-height:1.15; margin:14px 0 10px; letter-spacing:.3px}
.subtitle{color:var(--muted); font-size:18px; margin-bottom:22px}
.cta{display:flex; gap:12px; flex-wrap:wrap}
.btn{ display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; font-weight:600; cursor:pointer; background:var(--accent); color:white; border:1px solid rgba(2,132,199,.3); box-shadow:var(--shadow); }
.btn.alt{background:#e2e8f0; border-color:#e2e8f0; color:#0f172a}
.btn:hover{transform:translateY(-1px)}
.card{ background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px; box-shadow:var(--shadow); }
.services{padding:30px 0}
.services .grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px}
.tag{display:inline-block; padding:6px 10px; border:1px solid var(--line); border-radius:999px; font-size:13px; color:#0f172a; background:#fff}
.grid-skills{display:flex; flex-wrap:wrap; gap:10px}
.section{padding:40px 0}
.section h2{margin:0 0 16px; font-size:26px}
.projects .chips{display:flex; gap:10px; flex-wrap:wrap}
.chips .chip{background:#eef2ff; color:#3730a3; padding:8px 12px; border-radius:999px; border:1px solid #e0e7ff; font-size:14px}
.about-grid{display:grid; grid-template-columns: 1.3fr .7fr; gap:20px; align-items:start}
.about-grid .portrait{border-radius:16px; overflow:hidden; border:1px solid var(--line); background:#fff}
.contact .grid{display:grid; grid-template-columns: 1 fr 1fr; gap:20px}
label{font-size:14px; color:#0f172a}
input, textarea{ width:100%; background:#ffffff; color:#0f172a; border:1px solid var(--line); padding:12px 14px; border-radius:12px; outline:none; }
input:focus, textarea:focus{box-shadow:0 0 0 6px var(--ring); border-color: var(--accent)}
textarea{min-height:140px; resize:vertical}
.alert{padding:12px 14px; border-radius:12px; margin:10px 0; border:1px solid}
.alert.ok{background:#dcfce7; border-color:#86efac; color:#14532d}
.alert.err{background:#fee2e2; border-color:#fecaca; color:#7f1d1d}
.gallery{display:grid; grid-template-columns: repeat(4,1fr); gap:12px}
.gallery .item{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff}
footer{padding:40px 0; color:#475569; border-top:1px solid var(--line); margin-top:30px; background:#ffffff}
.mini{font-size:12px; color:#64748b}
@media (max-width: 900px){
  .hero .grid{grid-template-columns: 1fr}
  .services .grid{grid-template-columns: 1fr 1fr}
  .about-grid{grid-template-columns: 1 fr}
  .contact .grid{grid-template-columns: 1 fr}
  .gallery{grid-template-columns: repeat(2,1fr)}
  .title{font-size:34px}
}
@media (max-width: 600px){
  .services .grid{grid-template-columns: 1fr}
  .gallery{grid-template-columns: 1fr}
}