:root{
  --bg:#0B0B0D;--bg-2:#121319;--panel:#15161C;--panel-2:#1B1D25;
  --line:rgba(255,255,255,0.09);--line-strong:rgba(255,255,255,0.16);
  --ink:#F5F2EC;--muted:#9C968C;--muted-2:#6E6A63;
  --cyan:#FF5A1F;--cyan-deep:#E8410A;--green:#7CFCA0;--grid:rgba(255,90,31,0.10);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--ink);font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:18px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
h1,h2,h3{font-family:'Archivo',sans-serif;line-height:1.1;letter-spacing:-1px;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1180px;margin:0 auto;padding:0 30px;}
.article{max-width:760px;margin:0 auto;padding:0 30px;}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(11,11,13,.85);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;}
.logo{display:flex;align-items:center;gap:11px;font-family:'Archivo';font-weight:800;font-size:20px;letter-spacing:-.5px;white-space:nowrap;}
.logo .mark{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(145deg,var(--cyan),var(--cyan-deep));color:#ffffff;flex:none;}
.logo .mark svg{width:21px;height:21px;}
.logo span.hl{color:var(--cyan);}
.nav-right{display:flex;align-items:center;gap:22px;}
.nav-right a.back{font-size:14.5px;color:var(--muted);display:flex;align-items:center;gap:7px;}
.nav-right a.back:hover{color:var(--ink);}
.nav-right a.back svg{width:15px;height:15px;}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:'Archivo';font-weight:700;font-size:15px;padding:12px 22px;border-radius:7px;background:var(--cyan);color:#ffffff;transition:transform .15s,background .2s;}
.btn:hover{transform:translateY(-2px);background:#FF7A47;}
.btn svg{width:15px;height:15px;}

/* article hero */
.a-hero{border-bottom:1px solid var(--line);background:radial-gradient(900px 500px at 80% -20%,rgba(255,90,31,.1),transparent 60%);position:relative;overflow:hidden;}
.a-hero .grid{position:absolute;inset:0;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(700px 400px at 70% 0%,#000,transparent 70%);opacity:.7;pointer-events:none;}
.a-hero .article{padding:70px 30px 56px;position:relative;}
.cat{font-family:'IBM Plex Mono';font-size:12.5px;letter-spacing:2.5px;text-transform:uppercase;color:var(--cyan);display:inline-flex;align-items:center;gap:9px;}
.cat::before{content:"//";color:var(--cyan-deep);}
.a-hero h1{font-family:'Archivo';font-weight:900;font-size:clamp(33px,4.6vw,52px);letter-spacing:-1.5px;line-height:1.06;margin:18px 0 20px;}
.a-hero .dek{font-size:20px;color:var(--muted);line-height:1.55;max-width:660px;}
.a-meta{display:flex;gap:18px;margin-top:26px;font-family:'IBM Plex Mono';font-size:13px;color:var(--muted-2);flex-wrap:wrap;}
.a-meta span{display:flex;align-items:center;gap:7px;}
.a-meta .dot{width:5px;height:5px;border-radius:50%;background:var(--cyan);}

/* article body */
.a-body{padding:56px 0 70px;}
.a-body h2{font-family:'Archivo';font-weight:800;font-size:clamp(25px,3vw,34px);letter-spacing:-1px;margin:48px 0 18px;line-height:1.12;}
.a-body h3{font-family:'Archivo';font-weight:700;font-size:21px;letter-spacing:-.5px;margin:32px 0 12px;}
.a-body p{font-size:18px;color:var(--muted);margin-bottom:22px;line-height:1.72;}
.a-body p:first-child{margin-top:0;}
.a-body strong,.a-body b{color:var(--ink);font-weight:600;}
.a-body a{color:var(--cyan);border-bottom:1px solid rgba(255,90,31,.4);transition:border-color .15s;}
.a-body a:hover{border-color:var(--cyan);}
.a-body ul,.a-body ol{margin:0 0 24px;padding-left:4px;list-style:none;display:flex;flex-direction:column;gap:13px;}
.a-body ul li{display:flex;gap:12px;font-size:17.5px;color:var(--muted);align-items:flex-start;line-height:1.6;}
.a-body ul li::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--cyan);flex:none;margin-top:10px;transform:rotate(45deg);}
.a-body ol{counter-reset:n;}
.a-body ol li{counter-increment:n;display:flex;gap:14px;font-size:17.5px;color:var(--muted);align-items:flex-start;line-height:1.6;}
.a-body ol li::before{content:counter(n);font-family:'Archivo';font-weight:800;color:var(--cyan);background:rgba(255,90,31,.1);border:1px solid var(--line-strong);width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:14px;flex:none;}
.a-body li strong{color:var(--ink);}

.takeaway{background:linear-gradient(180deg,rgba(255,90,31,.06),var(--panel));border:1px solid var(--line-strong);border-radius:14px;padding:28px 30px;margin:34px 0;}
.takeaway .lab{font-family:'IBM Plex Mono';font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--cyan);margin-bottom:14px;}
.takeaway ul{margin:0;}
.takeaway ul li{color:var(--ink);font-size:16.5px;}

.tip{border-left:3px solid var(--cyan);background:var(--panel);border-radius:0 10px 10px 0;padding:20px 24px;margin:30px 0;font-size:16.5px;color:var(--muted);}
.tip b{color:var(--ink);}

/* related */
.related{border-top:1px solid var(--line);background:var(--bg-2);padding:60px 0;}
.related h2{font-family:'Archivo';font-weight:800;font-size:26px;letter-spacing:-1px;margin-bottom:26px;}
.rel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.rel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px 26px;transition:border-color .2s,transform .2s;}
.rel:hover{border-color:var(--line-strong);transform:translateY(-3px);}
.rel .gt{font-family:'IBM Plex Mono';font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--cyan);margin-bottom:10px;}
.rel h3{font-family:'Archivo';font-weight:700;font-size:18px;letter-spacing:-.5px;line-height:1.25;}
.rel:hover h3{color:var(--cyan);}

/* mini CTA */
.mini-cta{border-top:1px solid var(--line);background:radial-gradient(700px 400px at 25% 0%,rgba(255,90,31,.12),transparent 60%),var(--bg);}
.mini-cta .article{padding:64px 30px;text-align:center;}
.mini-cta h2{font-family:'Archivo';font-weight:900;font-size:clamp(28px,3.6vw,40px);letter-spacing:-1.5px;line-height:1.1;}
.mini-cta p{color:var(--muted);font-size:18px;margin:16px auto 28px;max-width:480px;}

/* footer */
footer{background:#08080A;border-top:1px solid var(--line);padding:40px 0;}
.foot-bot{display:flex;justify-content:space-between;align-items:center;color:var(--muted-2);font-family:'IBM Plex Mono';font-size:13px;flex-wrap:wrap;gap:14px;}
.foot-bot a{color:var(--muted);}
.foot-bot a:hover{color:var(--cyan);}

@media(max-width:680px){
  body{font-size:17px;}
  .nav-right a.back{display:none;}
  .rel-grid{grid-template-columns:1fr;}
  .a-hero .article{padding:52px 30px 44px;}
}