:root{
  --bg: #0b0f14;
  --panel: rgba(255,255,255,.06);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);
  --line: rgba(255,255,255,.12);
  --accent: #7dd3fc;
  --max: 1120px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}
.nav{
  position:sticky;top:0;z-index:10;
  backdrop-filter: blur(10px);
  background: rgba(11,15,20,.75);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:650;letter-spacing:.2px}
.pill{display:inline-flex;gap:10px;align-items:center;border:1px solid var(--line);padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.03)}
.nav-links{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.hero{
  padding:72px 0 40px;
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(125,211,252,.18), transparent 60%),
    radial-gradient(700px 420px at 80% 10%, rgba(34,197,94,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 40%);
  border-bottom:1px solid var(--line);
}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
h1{font-size:clamp(28px,3.3vw,44px);line-height:1.1;margin:0 0 14px}
.lead{color:var(--muted);font-size:1.05rem;margin:0 0 18px}
.tags{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 0}
.tag{border:1px solid var(--line);background:rgba(255,255,255,.03);padding:8px 12px;border-radius:999px;color:var(--muted)}
.hero-card{
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border-radius:18px;
  overflow:hidden;
}
.hero-card img{width:100%;height:260px;object-fit:cover;display:block;filter:saturate(1.02)}
.hero-card .card-body{padding:14px 16px}
.card-title{font-weight:650;margin:0 0 6px}
.card-sub{color:var(--muted);margin:0}
.section{padding:54px 0;border-bottom:1px solid var(--line)}
.section h2{margin:0 0 12px;font-size:clamp(20px,2.2vw,28px)}
.section p{margin:0;color:var(--muted)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.panel{
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:16px;
  overflow:hidden;
}
.panel img{width:100%;height:160px;object-fit:cover;display:block}
.panel .body{padding:14px 14px 16px}
.panel h3{margin:0 0 6px;font-size:1.05rem}
.panel p{margin:0;color:var(--muted)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;margin-top:16px}
.contact{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:16px}
.avatar{width:76px;height:76px;border-radius:18px;overflow:hidden;border:1px solid var(--line)}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.footer{padding:28px 0;color:var(--muted)}
.footer .links{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
.small{font-size:.92rem}
@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .hero-card img{height:220px}
}