:root{
  --bg: #0b1220;
  --surface: rgba(255,255,255,0.06);
  --surface-2: rgba(255,255,255,0.09);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.72);
  --muted-2: rgba(255,255,255,0.60);
  --border: rgba(255,255,255,0.12);
  --shadow: 0 14px 50px rgba(0,0,0,0.35);
  --primary: #3b82f6;
  --primary-2: #2563eb;
  --focus: rgba(59,130,246,0.55);
  --radius: 14px;
  --max: 1200px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 20% -10%, rgba(59,130,246,0.26), transparent 60%),
    radial-gradient(800px 600px at 90% 10%, rgba(37,99,235,0.18), transparent 55%),
    linear-gradient(180deg, #070b14, var(--bg));
}

a{color:inherit; text-decoration:none}
a:focus,button:focus{outline:3px solid var(--focus); outline-offset:2px}
p{line-height:1.75; color:var(--muted)}
code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:0.95em;
  color:rgba(255,255,255,0.92);
  background:rgba(0,0,0,0.25);
  border:1px solid rgba(255,255,255,0.10);
  padding:0.15rem 0.4rem;
  border-radius:10px;
}

.container{
  width: min(var(--max), calc(100% - 2.2rem));
  margin:0 auto;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  border-radius:999px;
  padding:0.9rem 1.2rem;
  font-weight:700;
  border:1px solid transparent;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{
  background:linear-gradient(180deg, var(--primary), var(--primary-2));
  box-shadow:0 10px 30px rgba(37,99,235,0.25);
}
.btn-primary:hover{box-shadow:0 16px 42px rgba(37,99,235,0.34)}
.btn-outline{
  background:transparent;
  border-color:rgba(255,255,255,0.18);
}
.btn-large{padding:1.05rem 1.35rem}

.pill{
  display:inline-flex;
  align-items:center;
  padding:0.25rem 0.65rem;
  border-radius:999px;
  background:rgba(59,130,246,0.18);
  border:1px solid rgba(59,130,246,0.30);
  color:rgba(255,255,255,0.90);
  font-weight:700;
  font-size:0.82rem;
}

/* Navbar */
.navbar{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(10px);
  background:rgba(9,13,24,0.80);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.nav-container{
  width: min(var(--max), calc(100% - 2.2rem));
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0.95rem 0;
}
.nav-logo a{
  font-weight:800;
  letter-spacing:0.3px;
  font-size:1.15rem;
}
.nav-menu{
  display:flex;
  align-items:center;
  gap:0.35rem;
}
.nav-link{
  padding:0.55rem 0.8rem;
  border-radius:999px;
  color:rgba(255,255,255,0.82);
  font-weight:700;
  border:1px solid transparent;
}
.nav-link:hover{
  background:rgba(255,255,255,0.06);
  border-color:rgba(255,255,255,0.08);
}
.nav-link.active{
  background:rgba(59,130,246,0.16);
  border-color:rgba(59,130,246,0.30);
}
.nav-cta{
  margin-left:0.25rem;
  padding:0.65rem 0.95rem;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(59,130,246,0.95), rgba(37,99,235,0.95));
  font-weight:800;
}

.hamburger{
  display:none;
  background:transparent;
  border:1px solid rgba(255,255,255,0.16);
  border-radius:12px;
  padding:0.55rem 0.6rem;
  color:inherit;
}
.hamburger .bar{
  display:block;
  width:22px;
  height:2px;
  background:rgba(255,255,255,0.9);
  margin:4px 0;
  border-radius:3px;
}

@media (max-width: 900px){
  .hamburger{display:inline-flex}
  .nav-menu{
    position:absolute;
    top:64px;
    right:1.1rem;
    left:1.1rem;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0.25rem;
    padding:0.85rem;
    border-radius:18px;
    background:rgba(9,13,24,0.96);
    border:1px solid rgba(255,255,255,0.10);
    box-shadow:var(--shadow);
  }
  .nav-menu.is-open{display:flex}
  .nav-cta{margin-left:0}
  .nav-link,.nav-cta{text-align:center}
}

/* Articles index hero */
.articles-hero{
  padding:3.2rem 0 1.2rem;
}
.articles-hero-inner{
  display:grid;
  grid-template-columns: 1.5fr 1fr;
  gap:1.4rem;
  align-items:stretch;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:0.55rem;
  font-weight:800;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.70);
  font-size:0.82rem;
  margin:0 0 0.7rem;
}
.articles-title{
  margin:0;
  font-size:clamp(2.2rem, 4vw, 3.1rem);
  line-height:1.1;
}
.articles-subtitle{
  margin:0.85rem 0 0;
  max-width: 60ch;
  color:rgba(255,255,255,0.74);
}
.articles-hero-actions{
  margin-top:1.25rem;
}
.articles-hero-card{
  border-radius:var(--radius);
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.10);
  padding:1.15rem;
}
.articles-hero-metric{
  padding:0.95rem 0.85rem;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(0,0,0,0.15);
}
.articles-hero-metric + .articles-hero-metric{margin-top:0.75rem}
.metric-number{
  font-weight:900;
  letter-spacing:0.02em;
}
.metric-label{
  color:rgba(255,255,255,0.70);
  margin-top:0.3rem;
}

@media (max-width: 900px){
  .articles-hero{padding:2.3rem 0 1rem}
  .articles-hero-inner{grid-template-columns:1fr}
}

/* Articles index cards */
.articles-index{padding:1.6rem 0 3.3rem}
.articles-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:1.1rem;
}
.article-card{
  border-radius:var(--radius);
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.10);
  padding:1.15rem;
  transition:transform .12s ease, border-color .12s ease, background .12s ease;
}
.article-card:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,0.075);
  border-color:rgba(59,130,246,0.26);
}
.article-card-title{
  margin:0.6rem 0 0.5rem;
  line-height:1.25;
  font-size:1.25rem;
}
.article-card-title a{
  text-decoration:none;
}
.article-card-excerpt{
  margin:0 0 0.9rem;
  color:rgba(255,255,255,0.72);
}
.article-card-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.6rem;
}
.meta-date{color:rgba(255,255,255,0.66); font-weight:700; font-size:0.9rem}
.article-card-footer{margin-top:0.25rem}
.text-link{
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  font-weight:800;
  color:rgba(255,255,255,0.86);
}
.text-link:hover{text-decoration:underline}

@media (max-width: 1000px){
  .articles-grid{grid-template-columns: repeat(2, minmax(0, 1fr))}
}
@media (max-width: 640px){
  .articles-grid{grid-template-columns: 1fr}
}

.notice{
  border-radius:var(--radius);
  background:rgba(255,255,255,0.06);
  border:1px dashed rgba(255,255,255,0.16);
  padding:1.2rem;
}
.notice h2{margin:0 0 0.35rem}
.notice p{margin:0}

/* Article page layout */
.article-shell{padding:2.2rem 0 3.4rem}
.breadcrumbs{
  color:rgba(255,255,255,0.68);
  font-weight:700;
  font-size:0.93rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0.35rem;
  margin-bottom:1.1rem;
}
.breadcrumbs a{color:rgba(255,255,255,0.80)}
.breadcrumbs a:hover{text-decoration:underline}
.crumb-sep{opacity:0.55}
.crumb-current{color:rgba(255,255,255,0.90)}

.article-layout{
  display:grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap:1.4rem;
  align-items:start;
}
.article-sidebar{
  position:sticky;
  top:92px;
}
.sidebar-card{
  border-radius:var(--radius);
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.10);
  padding:1rem;
}
.sidebar-title{
  font-weight:900;
  letter-spacing:0.2px;
  margin-bottom:0.65rem;
}
.sidebar-empty{margin:0; color:rgba(255,255,255,0.72)}
.sidebar-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:0.25rem;
}
.sidebar-item a{
  display:block;
  padding:0.55rem 0.65rem;
  border-radius:12px;
  border:1px solid transparent;
  color:rgba(255,255,255,0.80);
  font-weight:700;
  line-height:1.25;
}
.sidebar-item a:hover{
  background:rgba(255,255,255,0.06);
  border-color:rgba(255,255,255,0.08);
}
.sidebar-item.is-active a{
  background:rgba(59,130,246,0.16);
  border-color:rgba(59,130,246,0.30);
  color:rgba(255,255,255,0.92);
}

.article-content-wrap{
  border-radius:var(--radius);
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.10);
  padding:1.4rem;
}
.article-header{padding-bottom:1rem; border-bottom:1px solid rgba(255,255,255,0.10); margin-bottom:1.25rem}
.article-meta{display:flex; align-items:center; gap:0.7rem; margin-bottom:0.7rem}
.article-h1{margin:0; line-height:1.12; font-size:clamp(1.85rem, 3.3vw, 2.55rem)}
.article-intro{margin:0.85rem 0 0; color:rgba(255,255,255,0.74); font-size:1.08rem}

.toc{
  margin-top:1.05rem;
  border-radius:14px;
  background:rgba(0,0,0,0.18);
  border:1px solid rgba(255,255,255,0.10);
  overflow:hidden;
}
.toc summary{
  cursor:pointer;
  padding:0.85rem 0.95rem;
  font-weight:900;
  color:rgba(255,255,255,0.90);
  list-style:none;
}
.toc summary::-webkit-details-marker{display:none}
.toc summary:after{
  content:"▾";
  float:right;
  opacity:0.8;
  transition:transform .12s ease;
}
.toc[open] summary:after{transform:rotate(180deg)}
.toc-body{padding:0 0.95rem 0.95rem}
.toc-loading{color:rgba(255,255,255,0.64); font-weight:700}
.toc-list{
  margin:0.25rem 0 0;
  padding-left:1.1rem;
}
.toc-list a{
  color:rgba(255,255,255,0.80);
  font-weight:700;
  text-decoration:none;
}
.toc-list a:hover{text-decoration:underline}
.toc-list .toc-h3{margin-left:0.9rem}

.article-content{
  font-size:1.02rem;
}
.article-content h2{
  margin:2rem 0 0.6rem;
  font-size:1.5rem;
  line-height:1.25;
}
.article-content h3{
  margin:1.5rem 0 0.55rem;
  font-size:1.2rem;
  line-height:1.3;
  color:rgba(255,255,255,0.90);
}
.article-content p{margin:0.75rem 0}
.article-content ul{margin:0.9rem 0; padding-left:1.25rem}
.article-content li{margin:0.4rem 0; color:rgba(255,255,255,0.74); line-height:1.6}

.article-cta{margin-top:2.2rem}
.cta-box{
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(59,130,246,0.16), rgba(0,0,0,0.10));
  border:1px solid rgba(59,130,246,0.26);
  padding:1.25rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.cta-box h2{margin:0; line-height:1.2}
.cta-box p{margin:0.45rem 0 0; color:rgba(255,255,255,0.74)}

@media (max-width: 980px){
  .article-layout{grid-template-columns:1fr}
  .article-sidebar{position:relative; top:auto}
  .cta-box{flex-direction:column; align-items:flex-start}
}

/* Footer */
.footer{
  margin-top:2.6rem;
  border-top:1px solid rgba(255,255,255,0.10);
  background:rgba(0,0,0,0.20);
  padding:2.4rem 0 1.2rem;
}
.footer-content{
  display:grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr 0.9fr;
  gap:1.25rem;
}
.footer-section h3,.footer-section h4{margin:0 0 0.6rem}
.footer-section p{margin:0 0 1rem; color:rgba(255,255,255,0.70)}
.footer-section ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0.35rem}
.footer-section a:hover{text-decoration:underline}
.footer-bottom{
  margin-top:1.6rem;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.62);
  font-weight:700;
  font-size:0.92rem;
}
.footer-quote-cta{margin-top:0.4rem}
.contact-info p{margin:0.5rem 0}
.email-reveal{
  display:inline-flex;
  align-items:center;
  gap:0.55rem;
  border-radius:999px;
  padding:0.65rem 0.9rem;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.86);
  font-weight:800;
  cursor:pointer;
}
.email-reveal:hover{background:rgba(255,255,255,0.08)}

@media (max-width: 1100px){
  .footer-content{grid-template-columns: 1.4fr 1fr 1fr}
}
@media (max-width: 720px){
  .footer-content{grid-template-columns: 1fr}
}