:root{
    --bg:#191919;
    --panel:#222222;
  
    /* Red theme بدل الأزرق */
    --brand:#e50914;
    --brand-dark:#b70710;
  
    --text:#ffffff;
    --muted:#cccccc;
  
    --accent:#2b0d10;
  }
  
  *{box-sizing:border-box}
  
  body{
    font-family:"Poppins",system-ui,-apple-system,Segoe UI,Arial,sans-serif;
    margin:0;
    color:var(--text);
    background:
      linear-gradient(to top, rgba(229,9,20,.35) 0%, rgba(0,0,0,.45) 55%),
      var(--bg);
    min-height:100dvh;
  }
  
  header{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
    background:var(--panel);
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  
  header img{height:24px;width:auto}
  
  article{
    max-width:860px;
    margin:32px auto;
    padding:0 16px;
  }
  
  h1{
    text-align:center;
    margin:16px 0 8px;
    text-transform:uppercase;
    text-shadow:1px 2px #000;
    letter-spacing:.5px;
  }
  
  h2,h3{margin-top:28px}
  p{color:var(--muted);line-height:1.7}
  ul{color:var(--muted);line-height:1.7}
  
  img{max-width:100%;height:auto;border-radius:10px}
  
  .center{text-align:center}
  
  /* CTA button */
  .cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:220px;
    height:56px;
    margin:24px auto;
    border:0;
    cursor:pointer;
    font-weight:700;
    border-radius:50px;
    text-decoration:none;
  
    background-image:linear-gradient(to right, var(--brand), #ff3b3b);
    color:#fff;
  
    box-shadow:0 8px 22px rgba(229,9,20,.35);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  
  .cta:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(229,9,20,.45);
  }
  
  .table-wrapper{overflow-x:auto;margin:20px 0}
  table{width:100%;border-collapse:collapse}
  th,td{padding:12px;border:1px solid #2a2a2a}
  th{background:var(--accent)}
  tbody tr:nth-child(odd){background:#2a2a2a}
  tbody tr:hover{background:#333}
  
  blockquote{
    background:#333;
    color:#fff;
    padding:20px;
    margin:20px 0;
    border-left:5px solid var(--brand);
    border-radius:10px;
    box-shadow:0 4px 10px rgba(0,0,0,.25);
  }
  
  footer{
    text-align:center;
    color:#bbb;
    font-size:.9rem;
    padding:18px;
    border-top:2px solid var(--accent);
    background:linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 100%);
    margin-top:24px
  }
  
  @media (max-width:600px){
    h1{font-size:1.3rem}
    .cta{width:100%;max-width:320px}
  
    /* responsive table like example */
    table, thead, tbody, th, td, tr{display:block}
    thead tr{position:absolute;top:-9999px;left:-9999px}
    tr{margin-bottom:14px;border:1px solid #2a2a2a}
    td{border:none;position:relative;padding-left:50%}
    td:before{
      content:attr(data-label);
      position:absolute;
      left:8px;
      top:8px;
      font-weight:700;
      font-size:.65rem;
      text-transform:uppercase;
      color:#fff;
    }
  }
  
  a{color:#ffd24d}

  /* ===== Text Logo Header (strong + aligned) ===== */
.site-header{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:18px 16px;
    background:var(--panel);
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  
  .text-logo{
    display:inline-flex;
    align-items:baseline;
    gap:2px;
    font-weight:800;
    letter-spacing:.5px;
    line-height:1;
    user-select:none;
  }
  
  .text-logo .mark{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border-radius:12px;
  
    background:linear-gradient(to right, var(--brand), #ff3b3b);
    box-shadow:0 10px 26px rgba(229,9,20,.35);
  
    font-size:22px;
    color:#fff;
  }
  
  .text-logo .name{
    font-size:28px;
    color:#fff;
    text-shadow:1px 2px #000;
  }
  
  .subtitle{
    margin-top:8px;
    font-size:12.5px;
    color:rgba(255,255,255,.75);
    text-align:center;
  }
  
  /* Mobile tweaks */
  @media (max-width:600px){
    .text-logo .mark{width:38px;height:38px;font-size:20px;border-radius:11px}
    .text-logo .name{font-size:24px}
    .subtitle{font-size:12px}
  }