:root{
      --bg:#0f1724; /* charcoal */
      --card:#0b1220;
      --muted:#94a3b8;
      --accent:#00e5ff; /* cyan */
      --accent2:#00ff7f; /* lime */
      --glass: rgba(255,255,255,0.03);
      --radius:14px;
      --max:1100px;
      --text:#e6eef6;
      --mono: 'SFMono-Regular', ui-monospace, SFMono, Menlo, Monaco, 'Roboto Mono', monospace;
      font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    }
    *{box-sizing:border-box}
    html,body{height:100%;margin:0;background:linear-gradient(180deg,var(--bg),#071024);color:var(--text);-webkit-font-smoothing:antialiased}
    a{color:var(--accent);text-decoration:none}
    img{max-width:100%;height:auto;display:block}

    /* ---------- Layout ---------- */
    .container{max-width:var(--max);margin:24px auto;padding:20px}
    header{display:flex;gap:16px;align-items:center;justify-content:space-between}
    .brand{display:flex;gap:12px;align-items:center}
    .logo{width:56px;height:56px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:grid;place-items:center;font-weight:700;color:#021121}
    .brand h1{font-size:18px;margin:0}
    .brand p{margin:0;color:var(--muted);font-size:13px}

    /* ---------- Hero ---------- */
    .hero{margin-top:18px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);border-radius:var(--radius);padding:20px;display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:center}
    .hero-left h2{margin:0;font-size:26px}
    .hero-left p{color:var(--muted);margin-top:8px}
    .cta{display:flex;gap:8px;margin-top:14px}
    .btn{background:var(--accent);color:#001019;padding:10px 14px;border-radius:10px;font-weight:600;border:none;cursor:pointer}
    .btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--text)}

    .hero-right{background:linear-gradient(180deg, rgba(0,0,0,0.2), transparent);padding:14px;border-radius:12px;box-shadow:0 8px 30px rgba(2,6,23,0.6)}
    .specs{display:flex;flex-direction:column;gap:10px}
    .specs .row{display:flex;justify-content:space-between;font-size:14px}
    .specs .title{font-weight:700}

    /* ---------- Article ---------- */
    article{margin-top:20px;display:grid;grid-template-columns:1fr 320px;gap:24px}
    .post{background:var(--card);padding:18px;border-radius:12px;line-height:1.65}
    .post h3{margin-top:14px}
    .post p{color:#d7e6f4}
    .meta{color:var(--muted);font-size:13px}

    aside{position:sticky;top:24px;height:fit-content}
    .card{background:var(--glass);padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
    .card h4{margin:0 0 8px 0}
    .badge{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,0.25);font-weight:600}

    /* ---------- Modal ---------- */
    .modal-backdrop{position:fixed;inset:0;background:rgba(2,6,23,0.7);display:none;align-items:center;justify-content:center;padding:20px}
    .modal{background:linear-gradient(180deg,#05101a, #082033);border-radius:12px;padding:18px;max-width:720px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,0.6)}
    .modal h3{margin-top:0}
    .modal .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
    .close{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:8px 10px;border-radius:10px;color:var(--muted);cursor:pointer}

    /* ---------- Footer ---------- */
    footer{margin-top:30px;color:var(--muted);font-size:13px;text-align:center}

    /* ---------- Responsive ---------- */
    @media (max-width:900px){
      .hero{grid-template-columns:1fr;}
      article{grid-template-columns:1fr}
      .hero-right{order:2}
      aside{position:static}
    }
    @media (max-width:420px){
      .brand h1{font-size:16px}
      .logo{width:48px;height:48px}
      .hero-left h2{font-size:20px}
    }

    /* small helpers */
    .muted{color:var(--muted)}
    .kicker{font-size:13px;color:var(--accent2);font-weight:700}
    blockquote{margin:12px 0;padding:12px 14px;border-left:3px solid rgba(0,229,255,0.12);color:var(--muted);background:rgba(255,255,255,0.01);border-radius:8px}
    pre{background:#041021;padding:12px;border-radius:8px;overflow:auto;color:#9be7ff}


    /* redirect button  */
     .redirect-button {
  display: inline-block;
  padding: 12px 24px;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #4c6ef5, #15aabf);
  border: none;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(21, 170, 191, 0.4);
  position: relative;
  
  overflow: hidden;
}

.redirect-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: rgba(255, 255, 255, 0.15);
  transform: skewX(-20deg);
  transition: left 0.5s ease-in-out;
}

.redirect-button:hover::before {
  left: 130%;
}

.redirect-button:hover {
  box-shadow: 0 6px 16px rgba(21, 170, 191, 0.6);
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
  .redirect-button {
    font-size: 1rem;
    padding: 10px 20px;
  }
}


    /* image */
    .hero-img {
  width: 100%;
  max-width: 340px;
  border-radius: 12px;
  display: block;
  margin: 10px auto;
  box-shadow: 0 0 15px rgba(0,0,0,0.4);
}

.post-img {
  width: 100%;
  border-radius: 10px;
  margin: 18px 0;
  box-shadow: 0 0 12px rgba(0,0,0,0.3);
}

@media (max-width:768px) {
  .hero {
    flex-direction: column;
  }
  .hero-img {
    max-width: 100%;
  }
}