:root{
  --bg:#0a0c10; --surface:#0d1117; --panel:rgba(21,25,35,.7);
  --card:rgba(17,22,31,.75); --border:#202736; --text:#e6edf3; --muted:#99a2ad;
  --brand:#7c8cff; --brand-2:#22d3ee; --ring:#3b82f6; --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font:16px/1.65 Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans','Helvetica Neue',Arial}
::selection{background:rgba(124,140,255,.25)}

a{color:var(--brand);text-decoration:none;transition:color .2s ease,opacity .2s}
a:hover{color:#a5b1ff}
.button{display:inline-flex;align-items:center;gap:.6ch;padding:12px 16px;border-radius:14px;
  background:linear-gradient(180deg,var(--brand) 0%,#5a6dff 100%);color:#fff;font-weight:700;letter-spacing:.2px;border:none;box-shadow:0 6px 16px rgba(92,108,255,.35)}
.button:hover{transform:translateY(-1px)}
.button:active{transform:translateY(0)}
.button.ghost{background:transparent;color:var(--text);border:1px solid var(--border);box-shadow:none}
.link{color:var(--brand-2)}
.link:hover{opacity:.9}

.btn-row{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.button svg{margin-right:6px;opacity:.9;flex:0 0 auto}
.button.ghost svg{opacity:.85}
.button:focus-visible{box-shadow:0 0 0 3px rgba(124,140,255,.35)}

.wrap{max-width:1120px;margin:0 auto;padding:28px 24px}
@media (min-width:1200px){.wrap{padding-left:32px;padding-right:32px}}

.site-header{position:sticky;top:0;z-index:20;background:rgba(10,12,16,.65);
  backdrop-filter:saturate(1.3) blur(12px);border-bottom:1px solid rgba(255,255,255,.06);
  --header-h:56px;}
.site-header .wrap{display:flex;align-items:center;gap:18px;min-height:var(--header-h)}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:20px;letter-spacing:.2px}
.brand img{width:30px;height:30px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.brand .dot{color:var(--brand-2)}
.nav{margin-left:auto;display:flex;gap:22px}
.nav a{padding:14px 0;color:#c9d3df}
.nav a:hover{color:#fff}

.nav-toggle{
  display:none;margin-left:auto;width:42px;height:38px;border:1px solid var(--border);
  border-radius:12px;background:rgba(255,255,255,.02);cursor:pointer;
  align-items:center;justify-content:center;gap:4px
}
.nav-toggle .bar{display:block;width:20px;height:2px;background:#cfd6e4;border-radius:2px;
  transition:transform .2s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] .bar:nth-child(1){transform:translateY(4px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .bar:nth-child(3){transform:translateY(-4px) rotate(-45deg)}

.nav-backdrop{position:fixed;inset:0;z-index:18;background:rgba(2,6,12,.55);
  backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .18s ease}
.nav-backdrop.show{opacity:1;pointer-events:auto}

.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border)}
.hero::before{content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(60% 60% at 20% 10%,rgba(34,211,238,.18),transparent 60%),
    radial-gradient(50% 50% at 80% 0%,rgba(124,140,255,.20),transparent 65%),
    radial-gradient(60% 60% at 50% 100%,rgba(124,58,237,.16),transparent 60%);
  filter:blur(30px);z-index:0}
.hero .wrap{position:relative;z-index:1;padding:68px 24px}
.hero h1{margin:0 0 10px;font-size:48px;line-height:1.05;letter-spacing:.2px}
.hero p{margin:0;max-width:68ch;color:#cbd5e1}
.cta{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}

.grid.two{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:860px){.grid.two{grid-template-columns:1fr 1fr}}
.card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:18px;
  padding:20px;box-shadow:var(--shadow);backdrop-filter:saturate(1.2) blur(6px)}
.card h2{margin:0 0 8px;font-size:22px}
.card .section-lead{color:#cbd5e1;margin-top:0}
.list .item{padding:12px 0;border-bottom:1px dashed rgba(255,255,255,.08)}
.list .item:last-child{border-bottom:none}
.list .item a{font-weight:700}
.list .item .muted{color:var(--muted)}
.more{margin-top:14px}

.toolbar{display:flex;gap:10px;margin:16px 0;flex-wrap:wrap}
.toolbar input,.toolbar select{background:rgba(17,22,31,.6);color:var(--text);border:1px solid var(--border);
  border-radius:12px;padding:10px 12px;outline:none;transition:border-color .15s ease,box-shadow .15s ease}
.toolbar input:focus,.toolbar select:focus{border-color:var(--ring);box-shadow:0 0 0 3px rgba(59,130,246,.25)}

.cards{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:880px){.cards{grid-template-columns:1fr 1fr}}
.card.project{display:flex;flex-direction:column;gap:10px}
.project h3{margin:0;font-size:20px}
.status{display:inline-block;font-size:12px;padding:4px 10px;border-radius:13px;border:1px;color:var(--muted)}
.taglist{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.tag{font-size:12px;background:rgba(34,211,238,.06);border:1px solid rgba(34,211,238,.18);
  padding:4px 10px;border-radius:999px;color:#9be7f3}

.articles .article-item{padding:14px 0;border-bottom:1px dashed rgba(255,255,255,.08)}
.articles .article-item:last-child{border-bottom:none}
.article-item h3{margin:6px 0}
.article-item .meta{color:#a8b3bf;font-size:14px}

article .title{margin:0 0 8px;font-size:34px}
article .meta{color:#9aa6b2;font-size:14px;margin-bottom:16px}
article .content{background:linear-gradient(180deg,rgba(18,24,33,.82),rgba(15,20,28,.82));
  border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:22px;box-shadow:var(--shadow)}
article .content h1,article .content h2,article .content h3{line-height:1.2}
article .content p{margin:10px 0}

.kv{list-style:none;padding:0;margin:0}
.kv li{display:flex;justify-content:space-between;gap:16px;border-bottom:1px dashed rgba(255,255,255,.08);padding:8px 0}
.kv li span:first-child{color:var(--muted)}

.site-footer{border-top:1px solid rgba(255,255,255,.06);margin-top:36px}
.site-footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;color:#9aa6b2}
.muted{color:#9aa6b2}

.badge{display:inline-flex;align-items:center;gap:.5ch;font-size:12px;padding:2px 8px;border-radius:999px;background:rgba(124,140,255,.12);border:1px solid rgba(124,140,255,.25);color:#cbd5ff}
.hr{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);margin:12px 0}

@keyframes fadeInUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.hero .wrap,.card{animation:fadeInUp .4s ease both}

@media (max-width:860px){
  .site-header{ z-index:30 }
  .nav-toggle{ display:inline-flex }
  .site-header .wrap{ gap:10px }

  .nav{
    position:fixed; left:12px; right:12px;
    top:calc(var(--header-h) + 40px);
    background:rgba(13,17,23,.96); backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.06); border-radius:14px;
    padding:10px; display:flex; flex-direction:column; gap:6px;
    max-height:calc(100vh - var(--header-h) - 24px); overflow:auto;
    box-shadow:0 20px 50px rgba(0,0,0,.45);
    transform:translateY(6px); opacity:0; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease; z-index:31;
  }
  .nav.open{ transform:none; opacity:1; pointer-events:auto }

  .nav a{ display:block; padding:14px 14px; font-size:16px; line-height:1.4;
    color:#e6edf3; border-radius:10px }
  .nav a:hover{ background:rgba(255,255,255,.06) }
}

a:focus,button:focus,.nav a:focus{ outline:2px solid var(--ring); outline-offset:2px; border-radius:10px }

body.nav-open{ overflow:hidden }

@media (max-width:600px){
  .hero .wrap{padding:44px 20px}
  .hero h1{font-size:36px}
  .hero p{max-width:50ch;font-size:15px}
  .button{padding:11px 15px}
}
.ad-billboard { padding: 0; margin: 0 0 0; }
.ad-billboard .wrap { display: grid; place-items: center; }
.ad-billboard-link {
  display: block;
  width: 100%;
  max-width: 500px;
  aspect-ratio: 500 / 120;
  background: var(--card, #0f0f10);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
.ad-billboard-link img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

@media (max-width: 800px) {
  .ad-billboard-link { aspect-ratio: 500 / 120; max-width: 500px; }
}

.ads { margin: 2rem 0 3rem; }
.ads h2 { margin-bottom: .75rem; }
.ads-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .ads-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .ads-grid { grid-template-columns: repeat(3, 1fr); }
}

.ad-tile {
  position: relative;
  display: block;
  background: var(--card, #0f0f10);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  aspect-ratio: 300 / 250;
}
.ad-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ad-badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
  font-size: 12px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: #fff;
  backdrop-filter: blur(4px);
  letter-spacing: .2px;
}