:root{
      --max-width:900px;
      --accent:#0b74de;
      --muted:#666;
      --card-bg:#fff;
    }
    html,body{height:100%;margin:0;font-family:"Segoe UI", Roboto, "Helvetica Neue", Arial; background:#f6f7fb;color:#222}
    .container{max-width:var(--max-width);margin:36px auto;padding:28px;background:var(--card-bg);border-radius:12px;box-shadow:0 6px 20px rgba(20,30,50,0.06)}
    header{display:flex;align-items:center;gap:16px}
    .kicker{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
    h1{margin:0;font-size:22px}
    .meta{color:var(--muted);font-size:13px;margin-top:6px}

    .hero{display:flex;gap:20px;margin-top:20px}
    .hero img{width:320px;height:200px;object-fit:cover;border-radius:8px;flex-shrink:0}
    .hero .lead{flex:1}
    .lead p{margin:0 0 10px 0;line-height:1.7}

    .grid{display:grid;grid-template-columns:1fr 320px;gap:22px;margin-top:22px}
    .article{line-height:1.8;color:#222}
    .aside{background:#fbfdff;padding:14px;border-radius:8px;border:1px solid rgba(12,36,80,0.04)}

    h2{margin-top:18px;margin-bottom:8px;font-size:18px}
    ul{margin:8px 0 16px 18px}
    code{background:#f2f6fb;padding:2px 6px;border-radius:4px;font-size:13px}

    .cta{display:inline-block;margin-top:14px;padding:10px 14px;background:var(--accent);color:#fff;border-radius:8px;text-decoration:none}

    .faq{margin-top:16px}
    .faq-item{border-top:1px solid rgba(0,0,0,0.06);padding:12px 0}
    .faq-item button{background:none;border:0;padding:0;font-weight:600;color:#0a2540;cursor:pointer}
    .faq-item p{margin:8px 0 0;color:var(--muted)}

    footer{margin-top:28px;color:var(--muted);font-size:13px}

    @media (max-width:900px){
      .grid{grid-template-columns:1fr;}
      .hero{flex-direction:column}
      .hero img{width:100%;height:220px}
    }