:root{
  --bg:#080808;--surf:#0d0d0d;--card:#111;
  --b0:#181818;--b1:#222;
  --lime:#c8f135;--lime-d:#a3c427;
  --white:#efefef;--mid:#666;--muted:#3a3a3a;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--white);overflow-x:hidden;line-height:1.7;}

/* ── NAV ── */
nav{
  position:sticky;top:0;z-index:100;
  background:rgba(8,8,8,.96);border-bottom:1px solid var(--b0);
  backdrop-filter:blur(14px);padding:16px 52px;
  display:flex;justify-content:space-between;align-items:center;
}
.logo{  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.5px;
  color: var(--text);
  text-decoration: none;}
.logo em{font-style:normal;color:#e8ff47;}
.nav-right{display:flex;align-items:center;gap:24px;}
.nav-back{font-size:13px;color:var(--mid);text-decoration:none;display:flex;align-items:center;gap:6px;transition:color .2s;}
.nav-back:hover{color:var(--white);}
.nav-back svg{transition:transform .2s;}
.nav-back:hover svg{transform:translateX(-3px);}
.nav-btn{background:#e8ff47;color:var(--bg);padding:9px 22px;border-radius:6px;font-weight:700;font-size:13px;text-decoration:none;transition:all .25s;white-space:nowrap;}
.nav-btn:hover{background:var(--lime-d);}

/* ── ARTICLE HERO ── */
.post-hero{
  padding:64px 52px 52px;
  background:var(--surf);
  border-bottom:1px solid var(--b0);
  max-width:100%;
}
.ph-inner{max-width:760px;margin:0 auto;}
.ph-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:20px;}
.ph-cat{
  background:rgba(200,241,53,.1);border:1px solid rgba(200,241,53,.2);
  color:#e8ff47;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  padding:4px 12px;border-radius:100px;
}
.ph-sep{color:var(--muted);}
.ph-date{font-size:12px;color:var(--mid);}
.ph-read{font-size:12px;color:var(--mid);}

.post-title{
  font-family:'Syne',sans-serif;
  font-size:clamp(30px,4.5vw,50px);
  font-weight:800;letter-spacing:-1.5px;line-height:1.1;
  margin-bottom:20px;
}
.post-intro{
  font-size:17px;color:rgba(255,255,255,.5);
  line-height:1.75;font-weight:300;
  border-left:3px solid #e8ff47;
  padding-left:20px;
  margin-bottom:28px;
}

/* Author row */
.author-row{
  display:flex;align-items:center;gap:14px;
  padding:18px 0;
  border-top:1px solid var(--b0);
  border-bottom:1px solid var(--b0);
  margin-top:8px;
}
.author-av{
  width:38px;height:38px;border-radius:50%;
  background:#e8ff47;
  display:flex;align-items:center;justify-content:center;
  font-family:'Bebas Neue',sans-serif;font-size:16px;color:var(--bg);
  flex-shrink:0;
}
.author-info{}
.author-name{font-size:14px;font-weight:600;}
.author-role{font-size:11px;color:var(--mid);}
.post-share{margin-left:auto;display:flex;align-items:center;gap:8px;}
.share-label{font-size:11px;color:var(--mid);text-transform:uppercase;letter-spacing:1.5px;}
.share-icon{
  width:32px;height:32px;border:1px solid var(--b1);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--mid);text-decoration:none;
  transition:all .2s;
  font-size:12px;
}
.share-icon:hover{border-color:rgba(200,241,53,.4);color:#e8ff47;}

/* ── ARTICLE LAYOUT ── */
.post-layout{
  max-width:1100px;margin:0 auto;
  padding:56px 52px 80px;
  display:grid;
  grid-template-columns:1fr 260px;
  gap:64px;
  align-items:start;
}

/* ── ARTICLE BODY ── */
.post-body{}

/* ── TYPOGRAPHY — All the elements you'll use ── */
.post-body h2{
  font-family:'Syne',sans-serif;
  font-size:24px;font-weight:800;letter-spacing:-.5px;
  margin:44px 0 16px;line-height:1.2;
  color:var(--white);
}
.post-body h2:first-child{margin-top:0;}

.post-body h3{
  font-family:'Syne',sans-serif;
  font-size:18px;font-weight:700;
  margin:32px 0 12px;color:var(--white);
}

.post-body p{
  font-size:16px;color:#888;line-height:1.85;
  font-weight:300;margin-bottom:20px;
}
.post-body p strong{color:var(--white);font-weight:600;}
.post-body p em{color:rgba(255,255,255,.6);font-style:italic;}
.post-body p a{color:#e8ff47;text-decoration:underline;text-underline-offset:3px;transition:opacity .2s;}
.post-body p a:hover{opacity:.7;}

/* Highlight block */
.post-body .highlight{
  background:rgba(200,241,53,.05);
  border:1px solid rgba(200,241,53,.15);
  border-left:3px solid #e8ff47;
  border-radius:0 10px 10px 0;
  padding:18px 22px;margin:24px 0;
}
.post-body .highlight p{color:rgba(255,255,255,.65);margin:0;font-size:15px;}
.post-body .highlight p strong{color:var(--white);}

/* Bullet list */
.post-body ul{
  list-style:none;margin:16px 0 24px;
  display:flex;flex-direction:column;gap:10px;
}
.post-body ul li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:15px;color:#888;line-height:1.7;
}
.post-body ul li::before{content:'→';color:#e8ff47;font-size:12px;flex-shrink:0;margin-top:3px;}
.post-body ul li strong{color:var(--white);}

/* Numbered list */
.post-body ol{
  counter-reset:item;list-style:none;
  margin:16px 0 24px;
  display:flex;flex-direction:column;gap:14px;
}
.post-body ol li{
  display:flex;align-items:flex-start;gap:14px;
  font-size:15px;color:#888;line-height:1.7;
  counter-increment:item;
}
.post-body ol li::before{
  content:counter(item);
  font-family:'Bebas Neue',sans-serif;
  font-size:18px;color:#e8ff47;
  min-width:22px;margin-top:1px;
}
.post-body ol li strong{color:var(--white);}

/* Divider */
.post-body hr{border:none;border-top:1px solid var(--b0);margin:40px 0;}

/* Pull quote */
.post-body blockquote{
  border-left:3px solid #e8ff47;
  padding:18px 24px;margin:28px 0;
  background:rgba(255,255,255,.02);
  border-radius:0 8px 8px 0;
}
.post-body blockquote p{
  font-family:'Syne',sans-serif;
  font-size:18px;font-weight:700;
  color:var(--white);margin:0;line-height:1.45;
}

/* CTA Box */
.post-body .cta-box{
  background:#e8ff47;
  border-radius:12px;padding:32px 28px;
  margin:36px 0;text-align:center;
}
.post-body .cta-box h4{
  font-family:'Syne',sans-serif;
  font-size:20px;font-weight:800;color:var(--bg);margin-bottom:8px;
}
.post-body .cta-box p{color:rgba(0,0,0,.65);margin-bottom:20px;font-size:14px;}
.post-body .cta-box a{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--bg);color:#e8ff47;
  padding:12px 28px;border-radius:8px;
  font-weight:700;font-size:13px;text-decoration:none;
  transition:all .25s;
}
.post-body .cta-box a:hover{background:#111;transform:translateY(-1px);}

/* FAQ section */
.post-body .faq-item{
  border-bottom:1px solid var(--b0);padding:18px 0;
}
.post-body .faq-item:first-child{border-top:1px solid var(--b0);}
.post-body .faq-q{font-size:15px;font-weight:600;color:var(--white);margin-bottom:8px;}
.post-body .faq-a{font-size:14px;color:#888;line-height:1.75;margin:0;}

/* Tags */
.post-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:44px;padding-top:28px;border-top:1px solid var(--b0);}
.post-tag{
  padding:5px 14px;border:1px solid var(--b1);border-radius:100px;
  font-size:12px;color:var(--mid);text-decoration:none;transition:all .2s;
}
.post-tag:hover{border-color:rgba(200,241,53,.3);color:#aaa;}

/* ── SIDEBAR ── */
.post-sidebar{position:sticky;top:80px;}

/* TOC */
.sidebar-box{
  background:var(--card);border:1px solid var(--b0);
  border-radius:12px;padding:24px;margin-bottom:16px;
}
.sb-title{
  font-size:10px;text-transform:uppercase;letter-spacing:2.5px;
  color:var(--mid);font-weight:700;margin-bottom:14px;
}
.toc-list{list-style:none;display:flex;flex-direction:column;gap:4px;}
.toc-list a{
  font-size:13px;color:var(--mid);text-decoration:none;
  padding:6px 10px;border-radius:6px;
  border-left:2px solid transparent;
  display:block;line-height:1.4;
  transition:all .2s;
}
.toc-list a:hover,.toc-list a.active{color:var(--white);background:rgba(255,255,255,.03);border-left-color:#e8ff47;}

/* Related */
.related-item{
  display:flex;gap:12px;align-items:flex-start;
  padding:12px 0;border-bottom:1px solid var(--b0);
  text-decoration:none;
  transition:opacity .2s;
}
.related-item:last-child{border-bottom:none;padding-bottom:0;}
.related-item:hover{opacity:.75;}
.ri-num{
  font-family:'Bebas Neue',sans-serif;font-size:18px;
  color:rgba(200,241,53,.2);line-height:1;flex-shrink:0;min-width:20px;
}
.ri-title{font-size:12px;color:#888;line-height:1.5;}

/* CTA sidebar */
.sidebar-cta{
  background:rgba(200,241,53,.06);
  border:1px solid rgba(200,241,53,.15);
  border-radius:12px;padding:24px;text-align:center;
}
.sc-title{font-family:'Syne',sans-serif;font-size:17px;font-weight:800;margin-bottom:8px;}
.sc-sub{font-size:12px;color:var(--mid);line-height:1.6;margin-bottom:18px;}
.sc-btn{
  display:block;background:#e8ff47;color:var(--bg);
  padding:11px 20px;border-radius:8px;font-weight:700;
  font-size:13px;text-decoration:none;transition:all .25s;
}
.sc-btn:hover{background:var(--lime-d);}

/* ── PREV / NEXT ── */
.post-nav{
  max-width:1100px;margin:0 auto;
  padding:0 52px 80px;
  display:grid;grid-template-columns:1fr 1fr;gap:3px;
}
.pn-item{
  background:var(--card);border:1px solid var(--b0);
  padding:24px 28px;text-decoration:none;
  transition:background .25s,border-color .25s;
  position:relative;overflow:hidden;
}
.pn-item::before{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:#e8ff47;transform:scaleX(0);transform-origin:left;
  transition:transform .4s;
}
.pn-item:hover{background:#0f0f0f;border-color:var(--b1);}
.pn-item:hover::before{transform:scaleX(1);}
.pn-item:last-child{text-align:right;}
.pn-item:last-child::before{transform-origin:right;}
.pn-dir{font-size:10px;text-transform:uppercase;letter-spacing:2px;color:var(--mid);margin-bottom:6px;}
.pn-title{font-family:'Syne',sans-serif;font-size:15px;font-weight:700;color:var(--white);}

/* ── FOOTER ── */
footer{
  background:var(--surf);
  border-top:1px solid var(--b0);
  padding:52px 52px 36px;
}
.footer-main{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:48px;
  margin-bottom:48px;
}
.footer-brand{}
.f-logo{  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.5px;
  color: var(--text);
  text-decoration: none;}
/* .f-logo em{font-style:normal;color:var(--lime);} */
.f-tagline{font-size:13px;color:var(--mid);line-height:1.65;max-width:220px;font-weight:300;margin-bottom:20px;}

/* Social icons */
.social-row{display:flex;gap:8px;flex-wrap:wrap;}
.social-icon{
  width:34px;height:34px;
  border:1px solid var(--b1);
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;color:var(--mid);
  transition:all .2s;
  flex-shrink:0;
}
.social-icon:hover{border-color:#e8ff47;color:#e8ff47;background:rgba(200,241,53,.06);}
.social-icon svg{width:14px;height:14px;}

.footer-col-title{font-size:11px;text-transform:uppercase;letter-spacing:2px;color:var(--mid);font-weight:700;margin-bottom:16px;}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
.footer-col ul li a{font-size:13px;color:var(--mid);text-decoration:none;transition:color .2s;}
.footer-col ul li a:hover{color:#e8ff47;}

.footer-bottom{
  max-width:1200px;margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:12px;
  padding-top:28px;
  border-top:1px solid var(--b0);
}
.f-copy{font-size:12px;color:var(--white);}
.f-bottom-links{display:flex;gap:20px;}
.f-bottom-links a{font-size:12px;color:var(--white);text-decoration:none;transition:color .2s;}
.f-bottom-links a:hover{color:#e8ff47;}

@media(max-width:540px){
  /* FOOTER MOBILE */
  footer{padding:40px 20px 24px;}
  .footer-main{
    grid-template-columns:1fr;
    gap:32px;
  }
  .footer-brand{
    padding-bottom:32px;
    border-bottom:1px solid var(--b0);
  }
  .f-logo{font-size:22px;}
  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
}

@media(max-width:768px){
  /* FOOTER TABLET */
  footer{padding:44px 24px 28px;}
  .footer-main{
    grid-template-columns:1fr 1fr;
    gap:36px;
  }
}

/* ── RESPONSIVE ── */
@media(max-width:960px){
  nav,.post-hero{padding-left:24px;padding-right:24px;}
  .post-layout{grid-template-columns:1fr;padding:40px 24px 60px;}
  .post-sidebar{display:none;}
  .post-nav{grid-template-columns:1fr;padding:0 24px 60px;}
  .pn-item:last-child{text-align:left;}

}
@media(max-width:600px){
  nav{padding:14px 20px;}
  .post-hero{padding:44px 20px 36px;}
  .post-layout{padding:32px 20px 52px;}
  .post-nav{padding:0 20px 52px;}
  .post-body h2{font-size:21px;}
}