:root{
    --red:#dc2626;
    --bg:#0b1220;
    --text:#e8eefc;
    --muted:rgba(232,238,252,.75);
    --card:rgba(255,255,255,.06);
    --border:rgba(255,255,255,.12);
  }
  
  *{box-sizing:border-box}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    line-height:1.8;
  }
  
  .wrap{
    max-width:980px;
    margin:0 auto;
    padding:20px;
  }
  
  /* accessibility */
  .skip-link{
    position:absolute;
    left:-999px;
    top:10px;
    background:#fff;
    color:#000;
    padding:10px 12px;
    border-radius:10px;
  }
  .skip-link:focus{left:10px; z-index:999}
  
  /* 🔴 header */
  .site-header{
    background:var(--red);
  }
  .header-flex{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:900;
    color:#fff;
    text-decoration:none;
  }
  .main-nav a{
    color:#fff;
    text-decoration:none;
    margin-left:14px;
    font-weight:800;
  }
  .main-nav a:hover{text-decoration:underline}
  
  /* cards */
  .card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:18px;
    padding:20px;
    margin:18px 0;
  }
  .hero{padding:22px}
  .hero .lede{color:rgba(232,238,252,.92); margin-top:8px}
  .hero .note{color:rgba(255,255,255,.95); font-weight:800}
  .meta-row{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin:14px 0 6px;
  }
  .chip{
    border:1px solid rgba(255,255,255,.18);
    padding:6px 10px;
    border-radius:999px;
    font-size:12px;
    color:rgba(232,238,252,.92);
  }
  
  /* toc */
  .toc{
    margin-top:16px;
    border-top:1px solid rgba(255,255,255,.12);
    padding-top:14px;
  }
  .toc ul{margin:8px 0 0; padding-left:18px}
  .toc a{color:rgba(232,238,252,.9)}
  .toc a:hover{color:#fff}
  
  /* buttons */
  .cta{
    display:flex;
    gap:12px;
    margin-top:14px;
    flex-wrap:wrap;
  }
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 18px;
    border-radius:14px;
    text-decoration:none;
    font-weight:900;
  }
  .btn-primary{
    background:var(--red);
    color:#071022;
  }
  .btn-ghost{
    border:1px solid rgba(255,255,255,.25);
    color:var(--text);
  }
  .btn-ghost:hover{background:rgba(220,38,38,.15)}
  
  /* grid */
  .grid{
    display:grid;
    gap:12px;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    margin-top:12px;
  }
  .mini-card{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    padding:16px;
  }
  .mini-card h3{margin:0 0 6px; font-size:16px}
  .small{font-size:13px; color:var(--muted)}
  .text-link{
    display:inline-block;
    margin-top:10px;
    color:rgba(232,238,252,.92);
    text-decoration:none;
    font-weight:800;
  }
  .text-link:hover{text-decoration:underline}
  
  .bullets{line-height:1.9; margin:12px 0 0; padding-left:18px}
  .legal{margin-top:14px}
  
  /* footer */
  .site-footer{
    text-align:center;
    padding:26px 0 34px;
  }

  .brand {
    text-decoration: none;
  }
  
  .brand-text {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.5px;
    color: #ffffff;
  }
  
  .brand-text span {
    color: #0b1220; /* contrast جميل مع الأحمر */
    background: #ffffff;
    padding: 2px 6px;
    border-radius: 6px;
    margin-left: 2px;
  }