@font-face{
    font-family:"Almarai";
    font-style:normal;
    font-weight:300;
    font-display:swap;
    src:url("/fonts/Almarai-300.ttf") format("truetype");
  }
  @font-face{
    font-family:"Almarai";
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url("/fonts/Almarai-400.ttf") format("truetype");
  }
  @font-face{
    font-family:"Almarai";
    font-style:normal;
    font-weight:700;
    font-display:swap;
    src:url("/fonts/Almarai-700.ttf") format("truetype");
  }
  @font-face{
    font-family:"Almarai";
    font-style:normal;
    font-weight:800;
    font-display:swap;
    src:url("/fonts/Almarai-800.ttf") format("truetype");
  }

:root{
    /* 🎨 أ.companiesFilters--compact .companiesFieldلوان مستوحاة من (الشعار + الصحراء) */
    --bg1:#2b1a16;        /* بني ليلي (مشتق من بني الشعار) */
    --bg2:#492e27;        /* بني الشعار الأساسي */
    --sand:#c49a66;       /* رملي/ذهبي */
    --camel:#977351;      /* جملي */
    --beige:#c2af9d;      /* بيج صحراوي */
    --cream:#f2ede9;      /* كريمي فاتح */
  
    --card: rgba(242,237,233,.08);
    --card2: rgba(242,237,233,.05);
    --border: rgba(196,154,102,.26);
    --text: var(--cream);
    --muted: rgba(214,199,187,.88);
    --accent: var(--sand);
    --accent2: var(--camel);
  
  --shadow: 0 18px 55px rgba(0,0,0,.45);
  --radius: 22px;
  --modal-width: 720px;
  }
  
  *{box-sizing:border-box}

  img{max-width:100%; height:auto;}

  body{
    margin:0;
    font-family:"Almarai", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color:var(--text);
    min-height:100vh;
    background-color: var(--bg1);
  
    /* ✅ خلفية صورة (صحراء + أسهم) + تدرجات */
    background-image:
      linear-gradient(180deg, rgba(43,26,22,.88), rgba(73,46,39,.92)),
      url("../image/background.jpg"),
      radial-gradient(980px 580px at 15% 10%, rgba(196,154,102,.22), transparent 60%),
      radial-gradient(880px 520px at 85% 20%, rgba(151,115,81,.20), transparent 60%),
      radial-gradient(700px 420px at 55% 85%, rgba(194,175,157,.12), transparent 60%),
      linear-gradient(180deg, var(--bg1), var(--bg2));
    background-size: cover, cover, auto, auto, auto, auto;
    background-position: center, center, center, center, center, center;
    background-repeat: no-repeat;
    background-attachment: fixed;
  
    display:flex;
    align-items:center;
    justify-content:center;
    padding:28px 14px;
  }

  @media (max-width: 820px){
    body{ background-attachment: scroll; }
  }
  
  .wrap{
    width: min(980px, 100%);
    display:grid;
    gap:18px;
    position: relative;
    z-index: 1; /* فوق النجوم */
    margin-top: 250px; /* لتجنب التداخل مع البانر */
  }
  
  .card{
    background: linear-gradient(180deg, var(--card), var(--card2));
    border:1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
    overflow:hidden;
  }
  
  .hero{
    padding:26px 22px;
    display:flex;
    gap:18px;
    align-items:center;
    flex-wrap:wrap;
    text-align: center;
  }
  
  .logo{
    width:86px; height:86px;
    border-radius:18px;
    border:1px solid rgba(196,154,102,.30);
    background: #fff;
    display:grid;
    place-items:center;
    overflow:hidden;
    flex:0 0 auto;
    box-shadow: 0 14px 35px rgba(0,0,0,.25);
  }
  .logo img{ width:100%; height:100%; object-fit:cover; display:block; }
  
  .heroText{ flex: 1 1 320px; }
  
  h1{ margin:0; font-size:28px; letter-spacing:.2px; font-weight:900; }
  
  .desc{
    margin:10px 0 0;
    color:var(--muted);
    line-height:1.8;
    font-size:15px;
    font-weight:500;
  }
  
  .grid{
    display:grid;
    grid-template-columns: 1fr;
    gap:14px;
    padding: 18px;
  }
  
  @media (min-width: 820px){
    .grid{ grid-template-columns: 1fr 1fr; }
  }
  
  .sectionTitle{
    margin:0 0 10px;
    font-size:14px;
    color: rgba(242,237,233,.92);
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:800;
  }
  .dot{
    width:10px; height:10px; border-radius:999px;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    box-shadow: 0 0 0 4px rgba(196,154,102,.14);
    flex:0 0 auto;
  }
  
  .btns{ display:grid; gap:10px; }
  
  .btn{
    appearance:none;
    border:1px solid rgba(196,154,102,.22);
    background: rgba(0,0,0,.18);
    color: var(--text);
    border-radius: 16px;
    padding: 13px 14px;
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
    outline:none;
    font-family: unset;
  }
  .btn:hover{
    transform: translateY(-2px);
    background: rgba(0,0,0,.24);
    border-color: rgba(196,154,102,.45);
    box-shadow: 0 10px 28px rgba(0,0,0,.22);
  }
  .btn:active{ transform: translateY(0px); }
  
  .btn .label{ font-weight:800; font-size:15px; }
  .btn .sub{ font-size:12px; color: rgba(214,199,187,.9); }
  
  .icon{
    width:34px; height:34px;
    border-radius: 12px;
    border:1px solid rgba(196,154,102,.22);
    background: linear-gradient(180deg, rgba(196,154,102,.18), rgba(0,0,0,.18));
    display:grid;
    place-items:center;
    flex:0 0 auto;
    color: rgba(242,237,233,.95);
    font-weight:900;
  }
  
  .row{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
  }
  
  .footer{
    padding:30px 18px 30px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    color: rgba(214,199,187,.75);
    font-size:12px;
    border-top:1px solid rgba(196,154,102,.18);
    border-radius: var(--radius);
    background: rgba(0,0,0,.10);
  }
  .footerLinks{display:inline-flex;align-items:center;gap:8px}
  .footerLinks a{color:var(--sand);text-decoration:none;font-weight:800}
  .footerLinks a:hover{text-decoration:underline;text-decoration-style:dotted}
  .footerSep{opacity:.6}
  @media (max-width: 640px){
    .footer{flex-direction:column;align-items:flex-start}
  }

  .surveyModal{position:fixed;inset:0;z-index:2100;display:none}
  .surveyModal.is-open{display:block}
  .surveyOverlay{position:absolute;inset:0;background:rgba(0,0,0,.6)}
  .surveyDialog{
    position:relative;
    width: min(var(--modal-width), calc(100% - 28px));
    margin:10vh auto;
    background: linear-gradient(180deg, rgba(242,237,233,.12), rgba(242,237,233,.06));
    border:1px solid rgba(196,154,102,.35);
    border-radius:18px;
    padding:18px;
    box-shadow:0 22px 60px rgba(0,0,0,.35);
    color: var(--text);
    backdrop-filter: blur(10px);
  }
  .surveyHeader{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
  .surveyTitle{font-weight:900}
  .surveyClose{
    border:none;background:rgba(0,0,0,.25);color:var(--text);
    border-radius:999px;width:36px;height:36px;font-size:20px;cursor:pointer
  }
  .surveyIntro{margin:0 0 10px;color:var(--muted)}
  .surveyField{margin:12px 0}
  .surveyField label{display:block;font-weight:800;margin-bottom:6px;color:var(--muted)}
  .surveyHint{font-size:12px;color:var(--muted);margin-bottom:6px}
  .surveyField textarea{
    width:100%;border-radius:12px;border:1px solid rgba(196,154,102,.35);
    background: rgba(0,0,0,.2);color:var(--text);padding:8px 10px;font-family:inherit
  }
  .surveyOptions{display:flex;flex-wrap:wrap;gap:8px}
  .surveyOptions button{
    border:1px solid rgba(196,154,102,.35);
    background: rgba(0,0,0,.18);
    color:var(--text);
    border-radius:10px;padding:6px 10px;
    cursor:pointer;
    font-family: unset;
  }
  .surveyOptions button.is-selected{
    border-color:rgba(196,154,102,.8);
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    color:#1b120f;
  }
  .surveyActions{display:flex;justify-content:space-between;gap:8px;margin-top:14px}
  .surveyActions .btn{padding:10px 14px}
  .surveyActions .surveySkip{
    background: rgba(0,0,0,.2);
    border-color: rgba(196,154,102,.3);
  }
  .surveyActions .surveySubmit{
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    border-color: rgba(196,154,102,.45);
    color:#ffffff;
  }

  .contactCard{padding:22px}
  .contactHeader{margin-bottom:16px}
  .contactTitle{margin:0;font-size:22px;font-weight:900}
  .contactSub{margin:8px 0 0;color:var(--muted)}
  .contactAlert{
    margin:12px 0;
    padding:10px 14px;
    border-radius:12px;
    background: rgba(87,168,90,.2);
    border:1px solid rgba(87,168,90,.4);
    font-size:13px;
  }
  .contactAlert--error{
    border-color:rgba(255,178,178,.6);
    background:rgba(255,178,178,.12);
    color:#ffb2b2;
  }
  .contactAlert--tight{ margin-top:8px; }
  .contactForm label{display:block;font-weight:800;margin-bottom:6px}
  .contactGrid{
    display:grid;
    grid-template-columns: 1fr;
    gap:14px;
  }
  .contactField input,
  .contactField textarea{
    width:100%;
    border-radius:12px;
    border:1px solid rgba(196,154,102,.35);
    background: rgba(0,0,0,.2);
    color: var(--text);
    padding:10px 12px;
    font-family: inherit;
  }
  .contactField textarea{resize:vertical}
  .contactFieldWide{grid-column:1/-1}
  .contactErr{margin-top:6px;color:#ffb2b2;font-size:12px}
  .contactActions{margin-top:10px}
  .contactHp{position:absolute;left:-9999px;opacity:0}
  .contactHuman{margin-top:12px;display:grid;gap:12px}
  .contactCheck{display:flex;align-items:center;gap:8px;font-weight:800}
  .contactCaptchaRow{display:flex;align-items:center;gap:10px}
  .contactCaptchaQ{padding:6px 10px;border-radius:10px;background:rgba(0,0,0,.2);border:1px solid rgba(196,154,102,.35)}
  .contactHint{margin-top:6px;color:var(--muted);font-size:12px}
  @media (min-width: 820px){
    .contactGrid{grid-template-columns: repeat(2, 1fr);}
  }
  
  /* Email pill */
  .pill{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:8px 12px;
    border-radius:999px;
    border:1px solid rgba(196,154,102,.22);
    background: rgba(0,0,0,.16);
    color: rgba(242,237,233,.90);
    font-size:13px;
    margin-top:12px;
    user-select:none;
    flex-wrap:wrap;
  }
  .emailLink{
    color: var(--sand);
    text-decoration:none;
    font-weight:900;
    direction:ltr;
  }
  .emailLink:hover{ text-decoration: underline; text-decoration-style:dotted; }
  
  .copyBtn{
    cursor:pointer;
    border:0;
    background: transparent;
    color: rgba(242,237,233,.92);
    font: inherit;
    
    font-weight:800;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    opacity:.9;
  }
  .copyBtn:hover{ opacity:1; }
  
  /* ===== Top Banner ===== */
  .topBanner{
    position: fixed;
    top: 0; left: 0; right: 0;
    background: rgba(0,0,0,.25);
    border-bottom: 1px solid rgba(196,154,102,.25);
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
    overflow: hidden;
    z-index: 3;

    
  }
  .topBanner img{
    width: 100%;
    height: 250px;   /* ارتفاع البانر */
    object-fit: cover;
    object-position: center;
    display: block;
  }
  .topBannerSpacer{
    height: 220px;
    z-index: -50;
  }
  
  /* About Card */
  .aboutCard{
    margin-top: 14px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(196,154,102,.22);
    background: rgba(0,0,0,.14);
  }
  .aboutHeader{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom: 12px;
  }
  .aboutTitle{
    margin:0;
    font-size:16px;
    font-weight:900;
    color: rgba(242,237,233,.95);
  }
  .aboutTagline{
    font-size:12px;
    font-weight:900;
    color: rgba(196,154,102,.95);
    padding:7px 10px;
    border-radius: 999px;
    border:1px solid rgba(196,154,102,.22);
    background: rgba(0,0,0,.12);
  }
  .aboutGrid{
    display:grid;
    grid-template-columns: 1fr;
    gap:10px;
  }
  @media (min-width: 820px){
    .aboutGrid{ grid-template-columns: 1fr 1fr; }
  }
  .infoBox{
    padding: 12px 12px;
    border-radius: 16px;
    border:1px solid rgba(196,154,102,.18);
    background: rgba(0,0,0,.16);
  }
  .infoLabel{
    font-size:12px;
    font-weight:900;
    color: rgba(242,237,233,.92);
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:6px;
  }
  .infoLabel::before{
    content:"";
    width:10px;
    height:10px;
    border-radius:999px;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    box-shadow: 0 0 0 4px rgba(196,154,102,.12);
    flex:0 0 auto;
  }
  .infoText{
    color: rgba(214,199,187,.92);
    line-height: 1.8;
    font-size: 13px;
    font-weight:500;
  }
  
  /* Stars canvas */
  #starsCanvas{
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: .65;
  }

  /* ✅ تغيير صورة الهيدر على الجوال */
@media (max-width: 640px){
    .topBanner img{
      content: url("../image/banner.png");
      height: 158px;

    }
    .wrap {
        width: min(980px, 100%);
        margin-top: 150px;

    }

    
  }
  .topBanner{ text-decoration: none; display: block; }

  .siteNavToggle{
    position:fixed;
    top:16px;
    inset-inline-start:16px;
    background:rgba(0,0,0,.55);
    border:1px solid rgba(255,255,255,.2);
    color:#fff;
    border-radius:999px;
    width:38px;
    height:38px;
    font-weight:900;
    font-size:16px;
    z-index:1000;
    cursor:pointer;
  }
  .siteNavToggle:hover{background:rgba(255,255,255,.12)}
  .siteNavBackdrop{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
    z-index:1500;
  }
  .siteNavBackdrop.is-open{opacity:1;pointer-events:auto}
  .siteNavPanel{
    position:fixed;
    top:68px;
    inset-inline-start:16px;
    width:min(340px, calc(100% - 32px));
    background:rgba(0,0,0,.75);
    border:1px solid rgba(196,154,102,.25);
    border-radius:16px;
    padding:12px;
    backdrop-filter: blur(8px);
    transform: translateY(-12px);
    opacity:0;
    pointer-events:none;
    transition: transform .2s ease, opacity .2s ease;
    z-index:1600;
  }
  .siteNavPanel.is-open{
    transform: translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  .siteNavLinks{
    display:grid;
    gap:8px;
  }
  .siteNavLinks a{
    color: var(--text);
    text-decoration:none;
    font-weight:800;
    font-size:13px;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid rgba(196,154,102,.22);
    background: rgba(0,0,0,.2);
  }
  .siteNavLinks a:hover{
    border-color: rgba(196,154,102,.45);
    background: rgba(0,0,0,.35);
  }

  /* ✅ أضف هذا في css/style.css (واحذف/تجاهل تنسيقات aboutCard القديمة إذا رغبت) */

.aboutPro{
    margin-top: 14px;
    padding: 14px;
    border-radius: 20px;
    border: 1px solid rgba(196,154,102,.22);
    background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.10));
    box-shadow: 0 18px 50px rgba(0,0,0,.20);
    min-height: clamp(260px, 40vw, 360px);
  }
  
  .aboutProHeader{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom: 12px;
  }
  
  .aboutProTitleWrap{ min-width: 240px; }
  
  .aboutProTitle{
    margin:0;
    font-size:16px;
    font-weight:900;
    color: rgba(242,237,233,.96);
  }
  
  .aboutProSub{
    margin:6px 0 0;
    font-size:12px;
    line-height:1.6;
    color: rgba(214,199,187,.88);
    font-weight:600;
  }
  
  .aboutProTagline{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:12px;
    font-weight:900;
    color: rgba(196,154,102,.95);
    padding:8px 12px;
    border-radius:999px;
    border:1px solid rgba(196,154,102,.22);
    background: rgba(0,0,0,.12);
  }
  
  .taglineIcon{
    width:28px;
    height:28px;
    border-radius: 10px;
    display:grid;
    place-items:center;
    border:1px solid rgba(196,154,102,.22);
    background: linear-gradient(180deg, rgba(196,154,102,.20), rgba(0,0,0,.18));
    color: rgba(242,237,233,.95);
  }
  
  .aboutProGrid{
    display:grid;
    grid-template-columns: 1fr;
    gap:10px;
  }
  
  @media (min-width: 820px){
    .aboutProGrid{ grid-template-columns: 1fr 1fr; }
    .featureWide{ grid-column: 1 / -1; }
  }
  
  .featureCard{
    padding: 14px 14px;
    border-radius: 18px;
    border:1px solid rgba(196,154,102,.18);
    background: rgba(0,0,0,.16);
    transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
  }
  
  .featureCard:hover{
    transform: translateY(-2px);
    border-color: rgba(196,154,102,.35);
    background: rgba(0,0,0,.20);
    box-shadow: 0 14px 35px rgba(0,0,0,.22);
  }
  
  .featureTop{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom: 8px;
  }
  
  .featureIcon{
    width:38px;
    height:38px;
    border-radius: 14px;
    display:grid;
    place-items:center;
    border:1px solid rgba(196,154,102,.22);
    background: linear-gradient(180deg, rgba(196,154,102,.20), rgba(0,0,0,.18));
    color: rgba(242,237,233,.96);
    font-weight:900;
  }
  
  .featureTitle{
    margin:0;
    font-size:18px;
    font-weight:900;
    color: rgba(242,237,233,.95);
  }
  
  .featureText{
    margin:0;
    color: rgba(214,199,187,.92);
    line-height: 1.85;
    font-size: 15px;
    font-weight:600;
    text-align: justify;
  }
  
  .timesGrid{
    display:grid;
    grid-template-columns: 1fr;
    gap:10px;
    margin-top: 2px;
  }
  
  @media (min-width: 640px){
    .timesGrid{ grid-template-columns: 1fr 1fr; }
  }
  
  .timeItem{
    padding: 12px;
    border-radius: 16px;
    border:1px solid rgba(196,154,102,.16);
    background: rgba(0,0,0,.14);
    text-align: center;
  }
  
  .timeLabel{
    font-size:13px;
    font-weight:900;
    color: rgba(242,237,233,.95);
    margin-bottom: 6px;
  }
  
  .timeValue{
    font-size:14px;
    font-weight:900;
    color: rgba(196,154,102,.95);
    margin-bottom: 4px;
  }
  
  .timeMeta{
    font-size:13px;
    font-weight:700;
    color: rgba(214,199,187,.88);
  }
  
  .platformChips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top: 2px;
  }
  
  .chip{
    display:inline-flex;
    align-items:center;
    padding:8px 10px;
    border-radius:999px;
    border:1px solid rgba(196,154,102,.22);
    background: rgba(0,0,0,.12);
    color: rgba(242,237,233,.92);
    font-size:12px;
    font-weight:900;
  }


  /* ✅ أضف هذا في css/style.css (شكل الروابط الجديد) */
.linksPro{ overflow: hidden; }

.linksWrap{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
  padding: 18px;
}

@media (min-width: 820px){
  .linksWrap{ grid-template-columns: 1fr 1fr; }

}

.linksCol{
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(196,154,102,.18);
  background: rgba(0,0,0,.14);
}

.linksHead{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom: 12px;
}

.linksDot{
  width:12px; height:12px; border-radius:999px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  box-shadow: 0 0 0 6px rgba(196,154,102,.12);
  flex:0 0 auto;
}

.linksTitle{
  margin:0;
  font-size:18px;
  font-weight:900;
  color: rgba(242,237,233,.95);
}

.linksSub{
  margin:4px 0 0;
  font-size:12px;
  font-weight:700;
  color: rgba(214,199,187,.86);
}

.linksList{ display:grid; gap:10px; }

.linkTile{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(196,154,102,.18);
  background: linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.10));
  text-decoration:none;
  color: var(--text);
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;

}

.linkTile:hover{
  transform: translateY(-2px);
  border-color: rgba(196,154,102,.38);
  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.12));
  box-shadow: 0 14px 35px rgba(0,0,0,.22);
}

.tileIcon{
  width:42px;
  height:42px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  border:1px solid rgba(196,154,102,.22);
  background: linear-gradient(180deg, rgba(196,154,102,.20), rgba(0,0,0,.16));
  color: rgba(242,237,233,.95);
  font-weight:900;
  flex:0 0 auto;
}

.tileText{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}

.tileTitle{
  font-weight:900;
  font-size: 15px;
  color: rgba(242,237,233,.96);
  white-space: break-spaces;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tileMeta{
  font-size: 12px;
  font-weight:700;
  color: rgba(214,199,187,.86);
}

.tileArrow{
  margin-right:auto; /* RTL: يدفع السهم لليسار */
  width:36px;
  height:36px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  border:1px solid rgba(196,154,102,.16);
  background: rgba(0,0,0,.12);
  color: rgba(196,154,102,.95);
  font-weight:900;
  flex:0 0 auto;
}

html[dir="ltr"] .tileArrow{
  margin-right:0;
  margin-left:auto;
}

/* ✅ يجعل العبارة في منتصف القسم وبشكل بارز */
.aboutProHeader{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .aboutProTaglineCenter{
    justify-self: center;   /* توسيط داخل الهيدر */
    text-align: center;

    font-size: 18px;
  }

  /* زر/بطاقة البث المباشر */
.liveTile{
    border-color: rgba(255, 70, 70, .35);
    box-shadow: 0 14px 32px rgba(255, 70, 70, .10);
    width: max-content;
  }
  
  .liveTile .tileIcon{
    filter: drop-shadow(0 0 10px rgba(255,70,70,.35));
    animation: livePulse 1.6s ease-in-out infinite;
  }
  
  @keyframes livePulse{
    0%,100%{ transform: scale(1); opacity: .9; }
    50%{ transform: scale(1.08); opacity: 1; }
  }

  .livePromoRow{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:stretch;
    
  }

  .livePromoRow .linkTile{
    flex: 1 1 260px;
  }

  .livePromoRow .liveTile{
    width: auto;
  }

  .livePromoRow--single .liveTile{
    width: 50%;
    flex: 0 1 50%;
    max-width: 50%;
  }

  @media (max-width: 820px){
    .livePromoRow--single .liveTile{
      width: 100%;
      flex: 1 1 100%;
      max-width: 100%;
    }
  }

  .promoTile{
    border-color: rgba(196,154,102,.38);
    box-shadow: 0 14px 32px rgba(196,154,102,.14);
    position: relative;
    font: inherit;
    align-items: stretch;
  }

  .promoTile *{
    font-family: inherit;
  }

  .promoTile .tileIcon{
    width: 40px;
    height: 40px;
    border-radius: 14px;
  }

  .promoTile .tileText{
    gap: 4px;
    justify-content: center;
  }

  .promoTile .tileTitle{
    font-size: 14px;
    line-height: 1.4;
  }

  .promoTile .tileMeta{
    font-size: 12px;
    opacity: .85;
  }

  .promoBadge{
    width: fit-content;
  }

  .promoTile .tileIcon{
    background: linear-gradient(180deg, rgba(196,154,102,.28), rgba(0,0,0,.16));
    border-color: rgba(196,154,102,.35);
  }

  .promoBadge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 8px;
    border-radius:999px;
    border:1px solid rgba(196,154,102,.28);
    background: rgba(0,0,0,.18);
    color: rgba(242,237,233,.92);
    font-size:11px;
    font-weight:800;
    margin-bottom: 4px;
  }

/* منصات التداول */

/* =========================
   Trading Platforms Section
   ========================= */
   .tradePlatforms{ padding-bottom: 10px; }

   .tpHero{
     display:grid;
     grid-template-columns: 320px 1fr;
     gap:14px;
     margin-top: 12px;
     border:1px solid rgba(196,154,102,.18);
     border-radius: 18px;
     background: linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.12));
     overflow:hidden;
   }
   
   .tpHeroMedia{
     position: relative;
     min-height: 220px;
     background: rgba(0,0,0,.18);
   }
   .tpHeroMedia img{
     width:100%;
     height:100%;
     object-fit: cover;
     display:block;
   }
   
   .tpHeroBody{ padding: 14px 14px 16px; }
   
   .tpHeroBadge{
     display:inline-flex;
     align-items:center;
     gap:8px;
     padding:7px 10px;
     border-radius:999px;
     border:1px solid rgba(196,154,102,.26);
     background: rgba(0,0,0,.18);
     color: rgba(242,237,233,.92);
     font-weight:900;
     font-size:12px;
     margin-bottom: 10px;
   }
   
   .tpHeroTitle{
     margin:0 0 10px;
     font-size:18px;
     line-height:1.6;
     font-weight:900;
   }
   .tpHeroTitle span{ color: var(--accent); }
   
   .tpHeroText{
     margin:0 0 10px;
     color: rgba(214,199,187,.92);
     line-height: 1.85;
     font-size: 13.5px;
     font-weight:500;
     text-align: justify;
   }
   
   .tpHeroList{
     margin:0 0 12px;
     padding:0 18px 0 0;
     color: rgba(214,199,187,.92);
     line-height:1.9;
     font-size: 13px;
   }
   .tpHeroList li{ margin:4px 0; }
   
   .tpHeroActions{
     display:flex;
     flex-wrap:wrap;
     gap:10px;
     margin-top: 8px;
   }
   
   .tpBtn{
     display:inline-flex;
     align-items:center;
     justify-content:center;
     gap:10px;
     padding: 12px 14px;
     border-radius: 14px;
     text-decoration:none;
     font-weight:900;
     border:1px solid rgba(196,154,102,.22);
     background: rgba(0,0,0,.16);
     color: rgba(242,237,233,.95);
     transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
   }
   .tpBtn:hover{
     transform: translateY(-2px);
     background: rgba(0,0,0,.24);
     border-color: rgba(196,154,102,.45);
     box-shadow: 0 10px 28px rgba(0,0,0,.22);
   }
   .tpBtnArrow{ opacity:.9; }
   
   .tpBtnPrimary{
     background: linear-gradient(90deg, rgba(196,154,102,.22), rgba(151,115,81,.18));
     border-color: rgba(196,154,102,.38);
   }
   .tpBtnGhost{ opacity:.95; }
   
   .tpNote{
     margin-top: 12px;
     display:flex;
     gap:12px;
     align-items:flex-start;
     padding: 12px 12px;
     border-radius: 14px;
     border:1px solid rgba(196,154,102,.22);
     background: rgba(0,0,0,.16);
   }
   .tpNoteIcon{ font-size: 18px; line-height:1; }
   .tpNoteText{
     color: rgba(214,199,187,.92);
     line-height:1.8;
     font-size: 13px;
     text-align: justify;
   }
   .tpEmail{
     direction:ltr;
     display:inline-block;
     margin:0 6px;
     color: var(--accent);
     font-weight:900;
   }
   .tpCopy{
     cursor:pointer;
     border:0;
     background: transparent;
     color: rgba(242,237,233,.95);
     font: inherit;
     font-weight:900;
     text-decoration: underline;
     text-decoration-style: dotted;
     text-underline-offset: 3px;
     margin-right: 6px;
     opacity:.9;
   }
   .tpCopy:hover{ opacity:1; }
   .tpCopyState{ margin-right: 8px; opacity:.75; font-weight:900; }
   
   /* شبكة المنصتين السفليتين */
   .tpGrid2{
     display:grid;
     grid-template-columns: 1fr 1fr;
     gap: 12px;
     margin-top: 12px;
   }
   
   .tpTile{
     display:flex;
     gap:12px;
     border-radius: 16px;
     border:1px solid rgba(196,154,102,.18);
     background: rgba(0,0,0,.14);
     text-decoration:none;
     overflow:hidden;
     transition: transform .15s ease, border-color .15s ease, background .15s ease;
     color: inherit;
   }
   .tpTile:hover{
     transform: translateY(-2px);
     background: rgba(0,0,0,.18);
     border-color: rgba(196,154,102,.40);
   }
   
   .tpTileMedia{
     width: 120px;
     background: rgba(0,0,0,.18);
     display:grid;
     place-items:center;
   }
   .tpTileMedia img{
     width:100%;
     height:100%;
     object-fit: cover;
     display:block;
   }
   
   .tpTileBody{ padding: 12px 12px 12px 0; min-width:0; }
   .tpTileTitle{ font-weight:900; font-size:14px; margin-bottom:6px; }
   .tpTileText{
     font-size:12.5px;
     color: rgba(214,199,187,.92);
     line-height:1.7;
     margin-bottom: 8px;
   }
   .tpTileCta{
     display:inline-flex;
     align-items:center;
     gap:8px;
     font-weight:900;
     font-size:12.5px;
     color: rgba(242,237,233,.92);
   }
   .tpTileCta span{ color: var(--accent); }
   
   /* Responsive */
   @media (max-width: 820px){
     .tpHero{ grid-template-columns: 1fr; }
     .tpHeroMedia{ min-height: 180px; }
     .tpGrid2{ grid-template-columns: 1fr; }
     .tpTileMedia{ width: 110px; }
     .liveTile{
      width: 100%;
    }

   }


   /* ===== Banner: hide on scroll down / show on scroll up ===== */
.topBanner{

    /* حركة سلسة */
    transform: translateY(0);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    will-change: transform;
  
    background: rgba(0,0,0,.20);
    border-bottom: 1px solid rgba(196,154,102,.25);
  }
  
 
  /* عند الإخفاء */
  .topBanner.is-hidden{
    transform: translateY(-105%);
  }
  
  /* عند الظهور مع ظل بسيط */
  .topBanner.is-pinned{
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
  }
  
  /* مساحة تحت البانر */
  .topBannerSpacer{ height:160px; }

 /* ===== Trading Platforms Pro (tp*) ===== */
.tradePlatforms { overflow: hidden; }





.tpHeroBadge{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(196,154,102,.18);
  border: 1px solid rgba(196,154,102,.28);
  margin-bottom: 10px;
}

.tpHeroTitle{
  font-size: 18px;
  font-weight: 800;
  line-height: 1.6;
  margin: 0 0 8px 0;
}

.tpHeroTitle span{
  color: rgba(196,154,102,1);
}

.tpHeroText{
  opacity: .9;
  line-height: 1.9;
  margin: 0 0 10px 0;
  font-size: 13px;
}

.tpHeroList{
  margin: 0 0 14px 0;
  padding: 0 18px 0 0;
  opacity: .95;
  line-height: 1.9;
  font-size: 13px;
}

.tpHeroList li{ margin: 6px 0; }

.tpHeroActions{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.tpBtn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.tpBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(196,154,102,.35);
}

.tpBtnPrimary{
  background: rgba(196,154,102,.18);
  border-color: rgba(196,154,102,.32);
}

.tpBtnGhost{
  background: rgba(255,255,255,.04);
}

.tpBtnArrow{ opacity: .9; }

.tpNote{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(0,0,0,.22);
  border: 1px dashed rgba(255,255,255,.14);
}

.tpNoteIcon{ font-size: 18px; line-height: 1; }

.tpNoteText{
  font-size: 13px;
  line-height: 1.9;
  opacity: .95;
}

.tpEmail{
  font-weight: 800;
  margin: 0 6px;
  color: rgba(196,154,102,1);
}

.tpCopy{
  margin-inline-start: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: inherit;
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
  font-weight: 800;
  font-size: 12px;
  transition: transform .15s ease, border-color .15s ease;
}

.tpCopy:hover{
  transform: translateY(-1px);
  border-color: rgba(196,154,102,.35);
}

.tpCopyState{
  margin-inline-start: 8px;
  opacity: .8;
  font-size: 12px;
}

.tpExtraText{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  opacity: .92;
  line-height: 1.9;
  font-size: 13px;
}

/* Grid 2 tiles */
.tpGrid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.tpTile{
  display:flex;
  gap: 12px;
  text-decoration:none;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  transition: transform .15s ease, border-color .15s ease;
}

.tpTile:hover{
  transform: translateY(-1px);
  border-color: rgba(196,154,102,.35);
}



.tpTileTitle{ font-weight: 900; font-size: 14px; }
.tpTileText{ opacity: .85; font-size: 12px; margin-top: 3px; line-height: 1.7; }
.tpTileCta{ margin-top: 8px; font-weight: 900; font-size: 12px; opacity: .95; }
.tpTileCta span{ color: rgba(196,154,102,1); }

/* Mobile */
@media (max-width: 700px){
  .tpHero{ grid-template-columns: 1fr; }
  .tpGrid2{ grid-template-columns: 1fr; }

}

   /* إضافات خفيفة بنفس روح التصميم */
   .mzHeaderRow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between}
   .mzFilters{display:flex;gap:10px;flex-wrap:wrap}
   .mzSelect{padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.15);background:rgba(0,0,0,.25);color:#fff;min-width:160px;font-family: unset;}
   .mzGrid{display:grid;gap:12px}
   @media(min-width:900px){.mzGrid{grid-template-columns:repeat(3,1fr)}}
   .mzCard{background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:14px}
   .mzAvatar{width:100px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800}
   .mzSeat{border-radius:18px;padding:12px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.22);display:flex;gap:10px;align-items:center}
   .mzSeat .mzMeta{opacity:.85;font-size:12px}
   .mzSeatTitle{font-weight:800}
   .mzSeatEmpty{opacity:.65}
   .mzMonthsGrid{display:grid;gap:10px}
   @media(min-width:900px){.mzMonthsGrid{grid-template-columns:repeat(4,1fr)}}
   .weekTabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
   .weekBtn{border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.25);color:#fff;border-radius:999px;padding:8px 12px;cursor:pointer;font-family:inherit}
   .weekBtn.isActive{background:rgba(255,255,255,.15)}
   .rankTable{width:100%;min-width:640px;border-collapse:separate;border-spacing:0 8px}
   .rankTable th{font-size:12px;opacity:.8;text-align:center;padding:0 10px}
   .rankRow td{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.08);padding:10px;border-left:none;border-right:none}
   .rankRow td:first-child{border-right:1px solid rgba(255,255,255,.08);border-radius:14px 0 0 14px}
   .rankRow td:last-child{border-left:1px solid rgba(255,255,255,.08);border-radius:0 14px 14px 0}
   .mzSearch{padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.25);color:#fff;width:100%;max-width:360px;font-family: unset;}
   .mzHint{opacity:.75;font-size:12px;margin-top:6px;text-align: center;}
   .langSwitch{position:fixed;top:16px;inset-inline-end:16px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:999px;padding:6px 10px;font-weight:700;font-size:12px;z-index:1000;text-decoration:none}
   .langSwitch:hover{background:rgba(255,255,255,.12)}

  /* tsi pages */

  .hdr{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
  .title{font-weight:900;font-size:20px}
  .sub{opacity:.75;font-size:12px;margin-top:4px;line-height:1.7}
  .muted{opacity:.75;font-size:12px;line-height:1.7}
  .is-hidden{display:none}

  .card{background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.10);border-radius:18px}
  .cardPad{padding:16px}
  .cardPadSm{padding:14px}
  .grid{display:grid;gap:12px}
  @media(min-width:900px){.grid{grid-template-columns:repeat(3,1fr)}}
  .box{background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:14px}
  .box .k{opacity:.75;font-size:12px;line-height:1.7}
  .box .v{font-weight:900;font-size:22px;margin-top:6px;line-height:1.4}
  .box .s{opacity:.75;font-size:12px;margin-top:6px;line-height:1.7}
  .pos{color:#9ff0c9}
  .neg{color:#ffb2b2}

  .filters{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
  .fieldLabel{margin-bottom:6px}
  .sel{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.10);border-radius:12px;padding:10px;color:#fff;min-width:170px;font-family: inherit;}
  .btn{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:10px 14px;color:#fff;font-weight:800;cursor:pointer}
  .btn:hover{background:rgba(255,255,255,.14)}
  .btn:disabled{opacity:.6;cursor:not-allowed}

  .tbl{width:100%;min-width:640px;border-collapse:separate;border-spacing:0 8px}
  .tbl th{font-size:12px;opacity:.85;text-align:center;padding:8px}
  .tbl td{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.10);padding:10px;border-radius:12px;text-align:center;white-space:nowrap}
  .tbl .wrapCell{white-space:normal;text-align:start}
  .tbl .companiesRow{
    display: table-row;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: inherit;
  }
  .tableWrap{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling: touch;
  }
  .sectionTitle{font-weight:900;font-size:16px;margin-bottom:8px}
  .sectionGapTop{margin-top:14px}
  .textCenter{text-align:center}

  .paginationWrap{
    margin-top:16px;
    display:flex;
    justify-content:center;
  }
  .paginationWrap nav{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:center;
  }
  .paginationWrap nav > div:first-child{
    display:flex;
    gap:8px;
    justify-content:center;
    flex-wrap:wrap;
  }
  .paginationWrap nav > div:last-child{
    display:none;
    width:100%;
    align-items:center;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
  }
  .paginationWrap nav svg{
    width:14px;
    height:14px;
  }
  .paginationWrap nav a[aria-label],
  .paginationWrap nav a[rel],
  .paginationWrap nav span[aria-current] > span,
  .paginationWrap nav span[aria-disabled] > span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:36px;
    height:34px;
    padding:0 10px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.2);
    color:#fff;
    text-decoration:none;
    font-weight:700;
    font-size:12px;
  }
  .paginationWrap nav span[aria-current] > span{
    background: rgba(196,154,102,.25);
    border-color: rgba(196,154,102,.5);
  }
  .paginationWrap nav span[aria-disabled] > span{
    opacity:.55;
  }
  .paginationWrap nav p{
    margin:0;
    font-size:12px;
    opacity:.7;
    text-align:center;
  }
  @media (min-width: 700px){
    .paginationWrap nav > div:first-child{ display:none; }
    .paginationWrap nav > div:last-child{ display:flex; }
  }
  .paginationWrap .pagination{
    list-style:none;
    display:flex;
    gap:6px;
    padding:0;
    margin:0;
    flex-wrap:wrap;
  }
  .paginationWrap .page-item a,
  .paginationWrap .page-item span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:36px;
    height:34px;
    padding:0 10px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.2);
    color:#fff;
    text-decoration:none;
    font-weight:700;
    font-size:12px;
  }
  .paginationWrap .page-item.active span{
    background: rgba(196,154,102,.25);
    border-color: rgba(196,154,102,.5);
  }
  .paginationWrap .page-item.disabled span{
    opacity:.55;
  }

  .footerHint{text-align:center;margin-top:10px}
  .pill{display:inline-block;padding:4px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);font-size:12px}

  
/* Error pages */
.errorWrap{
  width: min(880px, 100%);
  margin-top: 220px;
}

.errorCard{
  padding: 34px 26px 30px;
  text-align:center;
  position: relative;
  overflow: hidden;
}

.errorCard::before{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(196,154,102,.25), transparent 65%);
  top:-120px;
  inset-inline-end:-80px;
  opacity:.9;
}

.errorCard::after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  border-radius:16px;
  border:1px solid rgba(196,154,102,.18);
  transform: rotate(12deg);
  bottom:-70px;
  inset-inline-start:-60px;
  background: rgba(0,0,0,.15);
}

.errorHeader{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}

.errorCode{
  font-size: clamp(42px, 8vw, 72px);
  font-weight:800;
  letter-spacing:2px;
  color: var(--accent);
  text-shadow: 0 12px 30px rgba(0,0,0,.35);
}

.errorKicker{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 4px;
  opacity: .75;
}

.errorTitle{
  margin: 8px 0 4px;
  font-size: clamp(22px, 4vw, 34px);
  font-weight: 800;
}

.errorMessage{
  margin: 0 auto;
  max-width: 560px;
  line-height: 1.9;
  opacity:.9;
}

.errorHint{
  margin: 12px auto 0;
  max-width: 520px;
  font-size: 13px;
  opacity:.8;
}

.errorActions{
  margin-top: 18px;
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}

.errorBtn{
  border-radius:999px;
  padding:10px 18px;
  font-weight:800;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.35);
  color: inherit;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.errorBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(196,154,102,.5);
  background: rgba(255,255,255,.08);
}

.errorBtn.primary{
  background: linear-gradient(180deg, rgba(196,154,102,.35), rgba(151,115,81,.35));
  border-color: rgba(196,154,102,.6);
}

.errorSupport{
  margin-top: 14px;
  font-size: 13px;
  opacity:.8;
}

.errorSupport a{
  color: var(--accent);
  text-decoration:none;
  font-weight:700;
}

.errorSupport a:hover{
  text-decoration: underline;
}

@media (max-width: 700px){
  .errorCard{ padding: 28px 18px; }
  .errorWrap{ margin-top: 180px; }
}


  /* ✅ Merkaz Modal */
  .mkzModal{
    position: fixed;
    inset: 0;
    display: none;
    z-index: 9999;
    font-family: "Almarai", system-ui, -apple-system, Segoe UI, Roboto, Arial;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .mkzModal.is-open{ display: block; }
  
  .mkzOverlay{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
  }
  
  .mkzDialog{
    position: relative;
    width: min(var(--modal-width), calc(100% - 28px));
    margin: 7vh auto;
    max-height: calc(100vh - 14vh);
    overflow-y: auto;
    overflow-x: hidden;
    background: rgba(20, 20, 20, 0.88);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
    color: #f4f4f4;
    padding: 16px 16px 14px;
  }
  
  .mkzHeader{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
  }
  .mkzTitle{
    font-size: 18px;
    margin: 0;
  }
  .mkzClose{
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
  }
  
  .mkzHint{
    margin: 6px 0 14px;
    font-size: 13px;
    opacity: .9;
    line-height: 1.7;
  }
  
  .mkzForm{ margin-top: 6px; }
  .mkzGrid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  @media (max-width: 640px){
    .mkzGrid{ grid-template-columns: 1fr; }
  }
  .mkzField label{
    display: block;
    font-size: 13px;
    margin-bottom: 6px;
    opacity: .95;
  }
  .mkzField input{
    width: 100%;
    padding: 11px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color: #fff;
    outline: none;
    font-family: inherit;
    font-size: 13px;
  }
  .mkzField input::placeholder{ color: rgba(255,255,255,.55); }
  .mkzField input:focus{
    border-color: rgba(196,154,102,.6);
    box-shadow: 0 0 0 3px rgba(196,154,102,.18);
  }
  .mkzFieldWide{ grid-column: 1 / -1; }

  /* ✅ Promo Modal */
  .promoModal{
    position: fixed;
    inset: 0;
    display: none;
    z-index: 9998;
    font-family: inherit;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .promoModal *{
    font-family: inherit;
  }
  .promoModal.is-open{ display: block; }

  .promoOverlay{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
  }

  .promoDialog{
    position: relative;
    width: min(var(--modal-width), calc(100% - 28px));
    margin: 7vh auto;
    max-height: calc(100vh - 14vh);
    overflow-y: auto;
    overflow-x: hidden;
    background: rgba(20, 20, 20, 0.9);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
    color: #f4f4f4;
    padding: 14px 14px 16px;
  }

  .promoHeader{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom: 8px;
  }

  .promoTitle{
    margin:0;
    font-size: 18px;
    font-weight:900;
  }

  .promoClose{
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
  }

  .promoMedia{
    margin: 10px 0 12px;
    border-radius: 16px;
    overflow:hidden;
    border: 1px solid rgba(196,154,102,.18);
    background: rgba(0,0,0,.18);
  }

  .promoMedia img{
    width: 100%;
    height: auto;
    display:block;
  }

  .promoText{
    margin: 8px 0 12px;
    font-size: 13.5px;
    line-height: 1.85;
    color: rgba(214,199,187,.92);
    white-space: pre-line;
  }

  .promoTiming{
    display:flex;
    gap:8px;
    align-items:center;
    font-size: 12px;
    opacity: .9;
  }

  .promoActions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top: 8px;
  }

  .promoBtn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding: 10px 14px;
    border-radius: 12px;
    text-decoration:none;
    border:1px solid rgba(196,154,102,.55);
    background: linear-gradient(180deg, rgba(196,154,102,.35), rgba(151,115,81,.35));
    color: rgba(255,255,255,.95);
    font-weight:800;
    font-size: 13px;
  }

  .promoBtn.secondary{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.18);
  }

  /* Reports */
  .reportsCard{
    padding: 24px 22px;
  }

  .reportsHeader{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom: 16px;
  }

  .reportsTitle{
    margin:0;
    font-size: 22px;
    font-weight:900;
  }

  .reportsSub{
    margin:0;
    font-size: 13px;
    opacity:.85;
  }

  .reportsForm{
    display:grid;
    gap:12px;
  }

  .reportsLabel{
    font-size: 13px;
    opacity:.9;
  }

  .reportsInput{
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color:#fff;
    font-size: 13px;
  }

  .reportsBtn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: 12px 16px;
    border-radius: 12px;
    border:1px solid rgba(196,154,102,.55);
    background: linear-gradient(180deg, rgba(196,154,102,.35), rgba(151,115,81,.35));
    color:#fff;
    font-weight:800;
    cursor:pointer;
  }

  .reportsError{
    color: #ffb3b3;
    font-size: 12px;
  }

  .reportsNotice{
    font-size: 13px;
    line-height: 1.7;
    opacity: .9;
  }

  .reportsList{
    display:grid;
    gap:12px;
    margin-bottom: 18px;
  }

  .reportItem{
    display:grid;
    grid-template-columns: 1fr auto auto;
    gap:10px;
    align-items:center;
    padding: 12px 14px;
    border-radius: 14px;
    border:1px solid rgba(196,154,102,.22);
    background: rgba(0,0,0,.18);
    color: inherit;
    text-align: inherit;
    cursor: pointer;
    font: inherit;
  }

  .reportItemTitle{
    font-weight:800;
  }

  .reportItemMeta{
    font-size: 12px;
    opacity:.8;
  }

  .reportItemAction{
    font-size: 12px;
    font-weight:900;
    color: var(--accent);
  }
  .tbl .reportItem{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding: 6px 12px;
    border-radius: 12px;
    border:1px solid rgba(196,154,102,.55);
    background: linear-gradient(180deg, rgba(196,154,102,.35), rgba(151,115,81,.35));
    color:#fff;
    font-weight:800;
    font-size: 13px;
  }

  .reportsArchive{
    border-top:1px solid rgba(255,255,255,.08);
    padding-top: 14px;
  }

  .reportsArchiveHead{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom: 10px;
  }

  .reportsArchiveHead h3{
    margin:0;
    font-size: 16px;
  }

  .reportsArchiveMore{
    font-size: 12px;
    color: var(--accent);
    text-decoration:none;
  }

  .reportsArchiveList{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap:10px;
  }

  .reportsArchiveList--full{
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  .reportsArchiveItem{
    padding: 10px 12px;
    border-radius: 12px;
    border:1px solid rgba(196,154,102,.22);
    background: rgba(0,0,0,.16);
    text-decoration:none;
    color: inherit;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    font-size: 12px;
  }

  .reportsArchiveItem em{
    font-style: normal;
    color: #ffb3b3;
    font-size: 11px;
  }

  .reportsArchiveItem.is-expired{
    opacity:.6;
  }

  .reportsPagination{
    margin-top: 16px;
  }

  /* Report Modal */
  .reportModal{
    position: fixed;
    inset: 0;
    display: none;
    z-index: 9997;
    overflow: hidden;
    font-family: inherit;
  }
  .reportModal.is-open{ display:block; }

  body.report-modal-open{
    overflow: hidden;
  }

  .reportOverlay{
    position:absolute;
    inset:0;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(4px);
  }

  .reportDialog{
    position: relative;
    width: min(var(--modal-width), calc(100% - 28px));
    height: min(86vh, 920px);
    margin: 6vh auto;
    background: rgba(15,15,15,.92);
    border-radius: 18px;
    border:1px solid rgba(255,255,255,.12);
    display:flex;
    flex-direction:column;
    overflow: hidden;
  }

  .reportHeader{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding: 12px 14px;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .reportTools{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .reportToolBtn{
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
  }

  .reportTitle{
    margin:0;
    font-size: 15px;
    font-weight:900;
  }

  .reportClose{
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
  }

  .reportViewer{
    position: relative;
    flex:1;
    background: #111;
    overflow: hidden;
  }

  .reportLoading{
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 13px;
    opacity: .8;
    z-index: 1;
  }

  .reportError{
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 13px;
    color: #ffb3b3;
    z-index: 1;
    text-align: center;
    padding: 20px;
  }

  .reportCanvasWrap{
    position: absolute;
    inset: 0;
    overflow: auto;
    padding: 14px;
    z-index: 1;
    --report-zoom: 1;
  }

  .reportCanvasInner{
    display: grid;
    gap: 14px;
    justify-items: center;
  }

  .reportCanvasWrap canvas{
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto 14px;
    background: #111;
    border-radius: 6px;
  }

  .reportCanvasWrap img.reportImage{
    width: calc(100% * var(--report-zoom));
    height: auto;
    border-radius: 6px;
    background: #111;
    max-width: none;
  }

  .reportWatermark{
    position:absolute;
    inset:0;
    pointer-events:none;
    user-select:none;
    opacity: .28;
    display:block;
    background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.1) 0 1px, transparent 1px 200px);
    z-index: 2;
    mix-blend-mode: screen;
  }

  .reportWatermark::after{
    content: attr(data-text);
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    font-size: 30px;
    font-weight:800;
    color: rgba(255,255,255,.5);
    transform: rotate(-20deg);
    text-align:center;
    white-space: pre-wrap;
  }

  /* Company Library */
  .companiesCard{ padding: 24px 22px; }
  .companiesHeader{ display:flex; flex-direction:column; gap:6px; margin-bottom: 16px; }
  .companiesHeaderRow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .companiesTitle{ margin:0; font-size: 22px; font-weight:900; }
  .companiesSub{ margin:0; font-size: 13px; opacity:.85; }

  .companiesFilters{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin: 10px 0 16px;
  }
  .companiesFilters--inline{
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(196,154,102,.2);
    background: rgba(0,0,0,.22);
  }
  .companiesFilters--compact{
    gap:8px;
    align-items:flex-end;
  }
  .companiesBackBtn{
    white-space: nowrap;
  }
  .companiesField{
    display:flex;
    flex-direction:column;
    gap:6px;
    flex: 1 1 180px;
    min-width: 160px;
  }
  .companiesFilters--compact .companiesField{

    min-width: 180px;
    max-width: 280px;
  }
  .companiesField--search{
    flex: 1 1 280px;
    min-width: 220px;
    max-width: 360px;
  }
  .companiesField--date{
    flex: 0 0 150px;
    min-width: 140px;
    max-width: 170px;
  }
  .companiesField--actions{
    flex: 0 0 auto;
    justify-content:flex-end;
    align-items:flex-end;
  }
  .companiesLabel{
    font-size: 11px;
    opacity:.75;
  }
  .companiesInput{
    
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.25);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    height: auto;
  }
  .companiesFilters .mzSearch,
  .companiesFilters .mzSelect{
    font-family: inherit;
  }
  .companiesInput::placeholder{
    color: rgba(255,255,255,.45);
  }
  .companiesSearch{
    flex: 1 1 260px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color: #fff;
  }
  .companiesSelect{
    min-width: 200px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(0,0,0,.6);
    color: #fff;
  }
  .companiesBtn{
    padding: 6px 12px;
    border-radius: 12px;
    border:1px solid rgba(196,154,102,.55);
    background: linear-gradient(180deg, rgba(196,154,102,.35), rgba(151,115,81,.35));
    color:#fff;
    font-weight:800;
    cursor:pointer;
    font-family: inherit;
    font-size: 13px;
    height: 34px;
  }
  .companiesBtnGhost{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.18);
    color: #fff;
  }
  .companiesDate{
    min-width: 160px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(0,0,0,.6);
    color: #fff;
  }

  .companiesTable{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .companiesRow{
    display:grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap:12px;
    align-items:center;
    padding: 10px 12px;
    border-radius: 12px;
    border:1px solid rgba(196,154,102,.22);
    background: rgba(0,0,0,.18);
    font-size: 13px;
  }
  .companiesHead{
    font-weight:800;
    font-size: 12px;
    text-transform: uppercase;
    opacity:.75;
  }
  .companiesRow a{ color: inherit; text-decoration:none; }
  .companiesRow a:hover{ text-decoration: underline; }
  .companiesSymbol{ font-size: 13px; opacity:.8; }
  .sectorBadge{
    display:inline-flex;
    align-items:center;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(196,154,102,.35);
    background: rgba(0,0,0,.2);
    color: rgba(242,237,233,.92);
    font-size: 12px;
    font-weight: 700;
  }
  .companiesEmpty{ opacity:.7; padding: 12px 0; }
  .companiesPagination{ margin-top: 16px; }
  .companiesLoadMore{
    display:flex;
    justify-content:center;
    margin-top: 16px;
  }

  .videoBtn{
    padding: 8px 10px;
    border-radius: 10px;
    border:1px solid rgba(196,154,102,.55);
    background: rgba(196,154,102,.18);
    color:#fff;
    font-weight:700;
    cursor:pointer;
    font-family: inherit;
    font-size: 13px;
    text-decoration: none;
  }

  .companyLatest{ margin: 10px 0 18px; }
  .companyLatest h3{ margin:0 0 10px; font-size: 16px; }

  /* Auth pages */
  .authWrap{ display:flex; justify-content:center; }
  .authCard{ width:min(520px, 100%); padding: 22px 20px; }
  .authHeader{ display:flex; align-items:center; gap:12px; margin-bottom: 16px; }
  .authLogo{
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.35);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }
  .authLogo img{ width: 70%; height: 70%; object-fit: contain; }
  .authTitle{ margin:0; font-size: 20px; font-weight: 900; }
  .authSub{ margin:2px 0 0; font-size: 12px; opacity:.8; }
  .authNotice{
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    border:1px solid rgba(196,154,102,.3);
    background: rgba(196,154,102,.12);
    font-size: 13px;
  }
  .authNotice.ok{ color:#9fe6b8; }
  .authNotice.err{ color:#ffb4b4; }
  .authForm{ display:flex; flex-direction:column; gap:12px; }
  .authField{ display:flex; flex-direction:column; gap:6px; }
  .authLabel{ font-size: 12px; opacity:.85; }
  .authInput{
    width:100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.28);
    color:#fff;
    font-family: inherit;
    font-size: 14px;
  }
  .authInput::placeholder{ color: rgba(255,255,255,.45); }
  .authActions{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
  .authLink{ color: rgba(242,237,233,.9); text-decoration:none; font-size: 12px; opacity:.85; }
  .authLink:hover{ text-decoration:underline; }
  .authBtn{
    padding: 10px 14px;
    border-radius: 12px;
    border:1px solid rgba(196,154,102,.55);
    background: linear-gradient(180deg, rgba(196,154,102,.35), rgba(151,115,81,.35));
    color:#fff;
    font-weight:800;
    cursor:pointer;
    font-family: inherit;
    font-size: 13px;
  }
  .authBtnGhost{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.18);
  }
  .authCheck{ display:flex; align-items:center; gap:8px; font-size: 12px; opacity:.85; }
  .authCheck input{ width:16px; height:16px; accent-color: rgba(196,154,102,.7); }
  .authFooter{ margin-top: 6px; font-size: 12px; opacity:.85; }

  .videoModal{
    position: fixed;
    inset: 0;
    display: none;
    z-index: 9996;
    font-family: inherit;
  }
  .videoModal.is-open{ display:block; }
  .videoOverlay{
    position:absolute;
    inset:0;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(4px);
  }
  .videoDialog{
    position: relative;
    width: min(var(--modal-width), calc(100% - 28px));
    margin: 7vh auto;
    background: rgba(15,15,15,.92);
    border-radius: 18px;
    border:1px solid rgba(255,255,255,.12);
    overflow:hidden;
  }
  .videoHeader{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 12px 14px;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .videoTitle{ margin:0; font-size: 15px; font-weight:900; }
  .videoClose{
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
  }
  .videoFrameWrap{ position: relative; padding-top: 56.25%; background:#111; }
  .videoFrameWrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
  .videoActions{ padding: 10px 14px; border-top:1px solid rgba(255,255,255,.08); text-align:end; }
  .videoLink{ color: var(--accent); text-decoration:none; font-weight:800; }

  body.video-modal-open{ overflow: hidden; }

  @media (max-width: 900px){
    .companiesFilters--compact .companiesField{
      flex: 1 1 100%;
      max-width: none;
    }
    .companiesHeaderRow{
      flex-direction:column;
      align-items:flex-start;
    }
    .companiesRow{
      grid-template-columns: 1.4fr 1fr 1fr;
      row-gap: 6px;
    }
    .companiesRow span:nth-child(4),
    .companiesRow span:nth-child(5){
      grid-column: 1 / -1;
    }
    .tbl .companiesRow{
      display: table-row;
    }
  }
  @media (max-width: 700px){
    .companiesHead{ display:none; }
    .companiesRow{
      grid-template-columns: 1fr;
      gap:8px;
      padding: 10px;
    }
    .companiesRow span{
      font-size: 12px;
    }
    .companiesRow span{
      grid-column: 1 / -1;
    }
    .companiesRow .companyName a{
      display:block;
      font-weight:800;
    }
    .companiesRow .videoBtn{
      width: 100%;
      text-align: center;
      padding: 8px 12px;
    }
    .tbl .companiesRow{
      display: table-row;
    }
    .companiesFilters--compact{
      padding: 10px;
    }
    .companiesFilters--compact .companiesField{
      min-width: 100%;
    }
  }
  
  .mkzActions{
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 14px;
  }
  .mkzBtn{
    padding: 11px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.16);
    cursor: pointer;
    font-weight: 700;
    font-family: inherit;
  }
  .mkzBtnPrimary{
    background: rgba(196,154,102,.22);
    border-color: rgba(196,154,102,.55);
    color: #fff;
  }
  .mkzBtnPrimary:disabled{
    opacity: .55;
    cursor: not-allowed;
  }
  .mkzBtnGhost{
    background: rgba(255,255,255,.06);
    color: #fff;
  }
  
  .mkzMsg{
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.7;
    min-height: 18px;
  }
  .mkzMsg.ok{ color: #9fe6b8; }
  .mkzMsg.err{ color: #ffb4b4; }
  
  .mkzFooterNote{
    margin-top: 10px;
    font-size: 12px;
    opacity: .8;
  }
  
  /* ✅ Honeypot hidden */
  .mkzHp{
    position:absolute;
    left:-9999px;
    width:1px;
    height:1px;
    overflow:hidden;
    opacity:0;
  }
  
  /* ✅ Human verification UI */
  .mkzHuman{
    margin-top: 12px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.04);
  }
  .mkzHumanRow{ margin-top: 10px; }
  .mkzHumanRow:first-child{ margin-top: 0; }
  
  .mkzCheck{
    display:flex;
    align-items:center;
    gap:10px;
    font-size: 13px;
  }
  .mkzCheck input{ width: 16px; height: 16px; }
  
  .mkzCaptchaWrap{
    display:flex;
    gap:10px;
    align-items:center;
    margin-top: 6px;
  }
  .mkzCaptchaQ{
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    font-weight: 800;
    min-width: 92px;
    text-align: center;
  }
  .mkzHumanHint{
    margin-top: 8px;
    font-size: 12px;
    opacity: .75;
  }