:root{
    --bg:#F5F6F0;
    --bg-alt:#FFFFFF;
    --bg-soft:#EFEFE4;
    --text:#1B1420;
    --text-muted:#5A4E60;
    --nav-bg:#3A4470;
    --nav-bg-2:#2C3357;
    --nav-text:#FFFFFF;
    --accent:#8F2D60;
    --accent-ink:#FFFFFF;
    --accent-2:#25AE84;
    --accent-3:#5B9AA3;
    --accent-4:#A1AE89;
    --accent-deep:#4A174C;
    --danger:#93062B;
    --border: rgba(27,20,32,0.14);
    --card-shadow: 0 6px 24px rgba(27,20,32,0.08);
    --radius: 16px;
    --font-scale: 1;
    --focus-ring: 3px solid #25AE84;
  }
  html.dark{
    --bg:#1B1420;
    --bg-alt:#241A29;
    --bg-soft:#2C2032;
    --text:#F5F1E6;
    --text-muted:#CBBFD2;
    --nav-bg:#120E17;
    --nav-bg-2:#1B1420;
    --nav-text:#F5F1E6;
    --accent:#E871A8;
    --accent-ink:#1B1420;
    --accent-2:#3FE0B0;
    --accent-3:#8FD4DB;
    --accent-4:#C7D3A9;
    --accent-deep:#D89FE0;
    --border: rgba(245,241,230,0.16);
    --card-shadow: 0 6px 24px rgba(0,0,0,0.35);
  }

  *{box-sizing:border-box;}
  html{font-size:calc(17px * var(--font-scale)); scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:"IBM Plex Sans Arabic", Tahoma, sans-serif;
    line-height:1.85;
    transition:background .25s ease, color .25s ease;
  }
  h1,h2,h3,h4{
    font-family:"Noto Kufi Arabic", Tahoma, sans-serif;
    font-weight:900;
    line-height:1.35;
    margin:0 0 .6em;
  }
  p{margin:0 0 1em; color:var(--text-muted);}
  a{color:inherit; text-decoration:none;}
  ul{margin:0; padding:0; list-style:none;}
  img{max-width:100%; display:block;}
  button{font-family:inherit; cursor:pointer;}

  :focus-visible{outline:var(--focus-ring); outline-offset:3px; border-radius:6px;}

  .skip-link{
    position:absolute; right:1rem; top:-60px;
    background:var(--accent); color:var(--accent-ink);
    padding:.9rem 1.4rem; border-radius:0 0 10px 10px;
    font-weight:700; z-index:999; transition:top .2s ease;
  }
  .skip-link:focus{top:0;}

  .container{max-width:1180px; margin:0 auto; padding:0 1.5rem;}

  /* ===== Utility bar ===== */
  .utility-bar{
    background:var(--nav-bg-2); color:var(--nav-text);
    font-size:.92rem; border-bottom:1px solid rgba(255,255,255,.08);
  }
  .utility-bar .container{
    display:flex; align-items:center; justify-content:space-between;
    padding-top:.55rem; padding-bottom:.55rem; gap:1rem; flex-wrap:wrap;
  }
  .utility-group{display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;}
  .a11y-control{display:flex; align-items:center; gap:.5rem;}
  .a11y-label{opacity:.85; font-weight:600; white-space:nowrap;}
  .a11y-btns{display:flex; gap:.35rem;}
  .a11y-btns button{
    width:2.2rem; height:2.2rem; border-radius:8px; border:1px solid rgba(255,255,255,.35);
    background:transparent; color:var(--nav-text); font-weight:700; font-size:.95rem;
  }
  .a11y-btns button:hover{background:rgba(255,255,255,.15);}
  .theme-toggle{
    display:flex; align-items:center; gap:.5rem; border:1px solid rgba(255,255,255,.35);
    border-radius:999px; padding:.3rem .7rem; background:transparent; color:var(--nav-text);
    font-weight:600;
  }
  .theme-toggle:hover{background:rgba(255,255,255,.15);}
  .theme-toggle svg{width:1.1rem; height:1.1rem;}

  /* ===== Header / nav ===== */
  header.site-header{
    background:var(--bg-alt); border-bottom:1px solid var(--border);
    position:sticky; top:0; z-index:100;
  }
  .header-row{
    display:flex; align-items:center; justify-content:space-between;
    padding-top:.9rem; padding-bottom:.9rem; gap:1.5rem; flex-wrap:wrap;
  }
  .brand{display:flex; align-items:center; gap:.85rem;}
  .brand-icon{height:100px; width:auto;}
  .brand-wordmark{height:30px; width:auto;}

  .nav-drawer-brand{display:none;}
  nav.main-nav ul{display:flex; gap:1.9rem; flex-wrap:wrap; align-items:center;}
  nav.main-nav a{font-weight:700; font-size:1rem; padding:.4rem 0; border-bottom:3px solid transparent;}
  nav.main-nav a:hover{border-color:var(--accent-2);}

  @media (min-width:961px){
    nav.main-nav{display:flex; align-items:center; gap:1.9rem;}
    .nav-half{display:flex;}
  }
  .has-dropdown{position:relative;}
  .dropdown{
    display:none; position:absolute; top:100%; right:0; min-width:230px;
    background:var(--bg-alt); border:1px solid var(--border); border-radius:12px;
    box-shadow:var(--card-shadow); padding:.6rem; margin-top:.6rem;
  }
  .has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{display:block;}
  .dropdown a{display:block; padding:.65rem .8rem; border-radius:8px; font-weight:600;}
  .dropdown a:hover{background:var(--bg-soft);}

  .nav-toggle{
    display:none; align-items:center; justify-content:center;
    width:2.6rem; height:2.6rem; border-radius:10px; border:1px solid var(--border);
    background:var(--bg-alt); color:var(--text); flex-shrink:0;
  }
  .nav-toggle svg{width:1.4rem; height:1.4rem;}
  .nav-toggle:hover{border-color:var(--accent);}

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    padding:.85rem 1.6rem; border-radius:999px; font-weight:700; font-size:1rem;
    border:2px solid transparent; white-space:nowrap;
  }
  .btn-primary{background:var(--accent); color:var(--accent-ink);}
  .btn-primary:hover{filter:brightness(1.08);}
  .btn-outline{background:transparent; border-color:var(--accent); color:var(--text);}
  .btn-outline:hover{background:var(--accent); color:var(--accent-ink);}
  .btn-lg{padding:1.05rem 2.1rem; font-size:1.08rem;}
  .btn-header{flex-direction:column; gap:.15rem; line-height:1.3; padding:.65rem 1.6rem;}
  .btn-line-main{font-weight:700; font-size:1rem;}
  .btn-line-sub{font-weight:500; font-size:.72rem; opacity:.85;}

  /* ===== Hero ===== */
  .hero{padding:3.5rem 0 4.5rem; position:relative; overflow:hidden;}
  .hero .container{display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.6rem;}
  .hero-intro{max-width:46ch; width:100%;}
  .hero-intro:has(.award-banner){max-width:920px;}
  .eyebrow{
    display:inline-flex; align-items:center; gap:.5rem; font-weight:700; font-size:.95rem;
    color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent);
    padding:.5rem 1rem; border-radius:999px; margin-bottom:1.2rem;
  }
  .award-banner{
    display:flex; align-items:center; justify-content:center; gap:.6rem; font-weight:800; font-size:1.05rem;
    color:var(--accent-deep); background:var(--bg-alt); border:2px solid var(--accent);
    padding:.85rem 1.4rem; border-radius:999px; margin-bottom:1.2rem;
    width:100%; box-sizing:border-box;
    box-shadow:var(--card-shadow);
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .award-banner:hover{transform:translateY(-2px); box-shadow:0 10px 24px color-mix(in srgb, var(--accent) 30%, transparent);}
  .award-banner-icon{width:5.4rem; height:5.4rem; object-fit:contain; flex-shrink:0;}
  .award-logo{width:6.5rem; height:6.5rem; object-fit:contain; margin:0 auto 1rem; display:block;}
  .hero h1{font-size:2.3rem; max-width:20ch;}
  .hero .lead{font-size:1.1rem; max-width:52ch; margin:0 auto;}
  .hero-actions{display:flex; gap:1rem; margin-top:.4rem; flex-wrap:wrap; justify-content:center;}

  /* ===== Hero intro slider (تبويبات "عن الجمعية") ===== */
  .options-slider{
    display:flex; flex-direction:row; align-items:stretch; overflow:hidden;
    width:100%; max-width:920px; height:360px; margin:.6rem 0;
  }
  .option{
    position:relative; overflow:hidden; min-width:64px; margin:8px;
    background:var(--optionBg, var(--accent)); background-size:cover; background-position:center;
    border-radius:28px; cursor:pointer;
    transition:.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
    flex-grow:1;
  }
  .option:focus-visible{outline:3px solid #fff; outline-offset:-4px;}
  .option.active{
    flex-grow:10000; max-width:640px; margin:0; border-radius:34px;
  }
  .option .shadow{
    position:absolute; inset-inline:0; bottom:0; height:150px;
    box-shadow:inset 0 -120px 0 -120px rgba(0,0,0,.65), inset 0 -120px 0 -105px rgba(0,0,0,.5);
    transition:.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
  }
  .option.active .shadow{
    box-shadow:inset 0 -170px 170px -140px rgba(0,0,0,.75), inset 0 -170px 170px -120px rgba(0,0,0,.55);
  }
  .option .label{
    display:flex; align-items:center; gap:.9rem;
    position:absolute; right:10px; bottom:10px; left:10px;
    transition:.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
  }
  .option.active .label{right:24px; bottom:24px; left:24px; align-items:flex-start;}
  .option .icon{
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    width:2.5rem; height:2.5rem; border-radius:50%; background:#fff; color:var(--optionBg);
  }
  .option .icon svg{width:1.25rem; height:1.25rem;}
  .option .info{color:#fff; overflow:hidden;}
  .option .info .main{
    font-family:"Noto Kufi Arabic",sans-serif; font-weight:800; font-size:1rem; white-space:nowrap;
    opacity:0; transition:.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
  }
  .option.active .info .main{white-space:normal; font-size:1.35rem; margin-bottom:.4rem; opacity:1;}
  .option .info .sub{
    font-size:.9rem; opacity:0; max-height:0; overflow:hidden; margin-top:.2rem;
    transition:.4s ease .05s;
  }
  .option.active .info .sub{opacity:.95; max-height:12rem; max-width:46ch;}
  .option .speak-mini{
    position:absolute; top:14px; left:14px; background:rgba(255,255,255,.2); border-color:transparent;
    color:#fff; display:none;
  }
  .option.active .speak-mini{display:inline-flex;}
  .option .speak-mini:hover{background:#fff; color:var(--optionBg);}

  /* ===== Collapsed rotated tab title ===== */
  .option .tab-label{
    position:absolute; inset:16px 0 62px 0;
    display:flex; align-items:center; justify-content:center;
    transition:opacity .3s ease;
  }
  .option .tab-label span{
    display:inline-block; white-space:nowrap; transform:rotate(-90deg);
    color:#fff; font-family:"Noto Kufi Arabic",sans-serif; font-weight:800; font-size:.98rem; letter-spacing:.02em;
  }
  .option.active .tab-label{opacity:0; visibility:hidden;}

  @media (max-width:760px){
    .options-slider{
      height:300px; overflow-x:auto; overflow-y:hidden;
      scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
      scrollbar-width:none; -ms-overflow-style:none;
    }
    .options-slider::-webkit-scrollbar{display:none;}
    .option{flex:0 0 64px; scroll-snap-align:start;}
    .option.active{flex:0 0 300px; max-width:300px;}
    .option.active .info .sub{max-height:8rem; font-size:.86rem; line-height:1.5;}
  }
  @media (max-width:600px){
    .options-slider{height:260px;}
    .option.active{flex:0 0 270px; max-width:270px;}
    .option .icon{width:2rem; height:2rem;}
    .option .icon svg{width:1.05rem; height:1.05rem;}
    .option.active .info .main{font-size:1.1rem;}
    .option.active .info .sub{max-height:6.5rem; font-size:.82rem; line-height:1.45;}
  }
  @media (max-width:440px){
    .options-slider{height:248px;}
    .option.active{flex:0 0 250px; max-width:250px;}
    .option.active .info .main{font-size:1rem; line-height:1.3; margin-bottom:.25rem;}
    .option.active .info .sub{max-height:4rem; font-size:.74rem; line-height:1.35;}
  }


  /* ===== Quick access ===== */
  .quick-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-top:-2.6rem; position:relative; z-index:5;}
  .quick-card{
    background:var(--bg-alt); border-radius:var(--radius); padding:1.6rem 1.3rem;
    box-shadow:var(--card-shadow); border:1px solid var(--border); text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:.7rem;
  }
  .quick-card:hover{transform:translateY(-3px); transition:transform .2s ease;}
  .quick-icon{
    width:3.4rem; height:3.4rem; border-radius:14px; display:flex; align-items:center; justify-content:center;
  }
  .quick-icon svg{width:1.7rem; height:1.7rem;}
  .quick-card strong{font-size:1.05rem;}
  .quick-card span{color:var(--text-muted); font-size:.9rem;}

  section{padding:5rem 0;}
  .section-head{max-width:640px; margin:0 auto 2.8rem; text-align:center;}
  .section-head h2{font-size:2rem;}
  .section-head .eyebrow{margin-bottom:1rem;}

  /* ===== About intro ===== */
  .about-wrap{max-width:680px; margin:0 auto; text-align:center;}
  .about-wrap .about-links{justify-content:center;}
  .about-links{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.4rem;}
  .pill-link{
    border:1px solid var(--border); border-radius:999px; padding:.6rem 1.1rem; font-weight:700; font-size:.92rem;
    background:var(--bg-alt);
  }
  .pill-link:hover{border-color:var(--accent);}

  /* ===== News / events ===== */
  .bg-soft{background:var(--bg-soft);}
  .card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem;}
  .news-card{
    background:var(--bg-alt); border-radius:var(--radius); overflow:hidden; border:1px solid var(--border);
    box-shadow:var(--card-shadow); display:flex; flex-direction:column;
  }
  .news-thumb{
    height:150px; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
  }
  .news-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
  .news-body{padding:1.4rem; display:flex; flex-direction:column; gap:.6rem; flex:1;}
  .date-tag{font-size:.85rem; font-weight:700; color:var(--accent);}
  .news-body h3{font-size:1.08rem; margin:0;}
  .news-body p{font-size:.92rem; margin:0; flex:1;}
  .read-more{display:inline-block; font-weight:700; color:var(--accent-2); font-size:.92rem; margin-top:.4rem;}
  .read-more:hover{text-decoration:underline;}
  .section-more{text-align:center; margin-top:2.4rem;}

  .events-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem;}
  .event-card{
    display:flex; gap:1.2rem; background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius);
    padding:1.3rem; align-items:flex-start; box-shadow:var(--card-shadow); flex-wrap:wrap;
  }
  .event-thumb{
    width:92px; height:92px; border-radius:14px; object-fit:cover; flex-shrink:0;
  }
  .event-date{
    background:var(--accent-deep); color:#fff; border-radius:12px; padding:.8rem 1rem; text-align:center;
    min-width:4.6rem; flex-shrink:0;
  }
  .event-date .day{font-family:"Noto Kufi Arabic",sans-serif; font-weight:900; font-size:1.5rem; display:block;}
  .event-date .month{font-size:.8rem; display:block;}
  .event-date .year{font-size:.7rem; opacity:.8; display:block; margin-top:.1rem;}
  .event-info{flex:1 1 180px; min-width:0;}
  .event-info h3{font-size:1.05rem; margin-bottom:.3rem;}
  .event-info p{font-size:.9rem; margin-bottom:.4rem;}
  .event-meta{display:flex; gap:1rem; font-size:.85rem; color:var(--text-muted); flex-wrap:wrap;}

  /* ===== Services ===== */
  .services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;}
  .service-card{
    padding:1.8rem; border-radius:var(--radius); border:1px solid var(--border); background:var(--bg-alt);
    display:flex; flex-direction:column; gap:.9rem;
  }
  .service-icon{
    width:3.2rem; height:3.2rem; border-radius:12px; display:flex; align-items:center; justify-content:center;
  }
  .service-icon svg{width:1.6rem; height:1.6rem; color:#fff;}
  .service-card h3{font-size:1.05rem; margin:0;}
  .service-card p{font-size:.92rem; margin:0;}
  .service-card .read-more{margin-top:auto; padding-top:.2rem;}
  .about-card-image{width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:10px;}

  /* ===== About page ===== */
  .about-story{
    max-width:760px; margin:0 auto; background:var(--bg-alt); border:1px solid var(--border);
    border-radius:var(--radius); box-shadow:var(--card-shadow); padding:2.2rem; text-align:center;
  }
  .about-story p{color:var(--text); margin-bottom:1.1rem;}
  .about-story .btn-listen{margin-top:.6rem;}
  .about-story.has-image{
    max-width:960px; text-align:right; display:flex; gap:2rem; align-items:center; padding:1.6rem;
  }
  .about-story-image{
    width:38%; flex-shrink:0; aspect-ratio:4/3; object-fit:cover; border-radius:12px;
  }
  .about-story-text{flex:1;}
  @media (max-width:760px){
    .about-story.has-image{flex-direction:column;}
    .about-story-image{width:100%;}
  }
  .about-cards-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem;}
  @media (max-width:960px){
    .about-cards-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:600px){
    .about-cards-grid{grid-template-columns:1fr;}
  }

  .avatar-circle{
    display:flex; align-items:center; justify-content:center; border-radius:50%; flex-shrink:0;
    color:#fff; font-family:"Noto Kufi Arabic",sans-serif; font-weight:800;
  }

  /* ===== Chairman message ===== */
  .chairman-card{
    max-width:760px; margin:0 auto; background:var(--bg-alt); border:1px solid var(--border);
    border-radius:var(--radius); box-shadow:var(--card-shadow); padding:2.2rem;
  }
  .chairman-head{
    display:flex; align-items:center; gap:1.2rem; margin-bottom:1.6rem; padding-bottom:1.4rem;
    border-bottom:1px solid var(--border); flex-wrap:wrap;
  }
  .chairman-head .avatar-circle{width:4.6rem; height:4.6rem; font-size:1.4rem; background:var(--accent-deep);}
  .chairman-photo{width:4.6rem; height:4.6rem; border-radius:50%; object-fit:cover; flex-shrink:0;}
  .chairman-head-info{flex:1;}
  .chairman-head-info h1{margin:0 0 .2rem; font-size:1.3rem;}
  .chairman-head-info span{color:var(--text-muted); font-size:.92rem;}
  .chairman-body p{color:var(--text); margin-bottom:1.1rem;}
  .chairman-signature{margin-top:1.6rem; font-weight:800; font-family:"Noto Kufi Arabic",sans-serif; color:var(--text);}
  .chairman-signature span{display:block; font-weight:500; font-family:inherit; color:var(--text-muted); font-size:.85rem; margin-top:.2rem;}

  /* ===== Members ===== */
  .members-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem;}
  .member-card{
    background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:var(--card-shadow); padding:1.8rem; text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:.6rem;
  }
  .member-card .avatar-circle{width:4.4rem; height:4.4rem; font-size:1.2rem;}
  .member-card .member-photo{width:4.4rem; height:4.4rem; border-radius:50%; object-fit:cover; flex-shrink:0;}
  .member-card h3{margin:0; font-size:1.05rem;}
  .member-card .member-role{color:var(--accent-2); font-weight:700; font-size:.88rem;}
  @media (max-width:960px){
    .members-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:600px){
    .members-grid{grid-template-columns:1fr;}
  }

  /* ===== Services slider (homepage) ===== */
  .services-slider-wrap{display:flex; align-items:center; gap:1rem;}
  .services-slider{
    display:flex; gap:1.4rem; overflow-x:auto; scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch; padding:.3rem;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .services-slider::-webkit-scrollbar{display:none;}
  .services-slider .service-card{
    flex:0 0 300px; scroll-snap-align:start;
  }
  .slider-arrow{
    flex-shrink:0; width:2.8rem; height:2.8rem; border-radius:50%; border:1px solid var(--border);
    background:var(--bg-alt); color:var(--text); font-size:1.3rem; display:flex; align-items:center; justify-content:center;
  }
  .slider-arrow:hover{border-color:var(--accent); color:var(--accent);}
  @media (max-width:700px){
    .slider-arrow{display:none;}
  }

  /* ===== CTA band ===== */
  .cta-band{
    background:linear-gradient(120deg, var(--accent-deep), var(--accent));
    color:#fff; border-radius:28px; padding:3.4rem 3rem; text-align:center; position:relative; overflow:hidden;
  }
  .cta-band h2{color:#fff; font-size:1.9rem;}
  .cta-band p{color:rgba(255,255,255,.88); max-width:46ch; margin:0 auto 1.6rem;}
  .cta-band .btn-primary{background:#fff; color:var(--accent-deep);}

  /* ===== Contact ===== */
  .contact-wrap{display:grid; grid-template-columns:1fr 1fr; gap:2.5rem;}
  .contact-list{display:flex; flex-direction:column; gap:1.3rem;}
  .contact-item{display:flex; gap:1rem; align-items:flex-start;}
  .contact-item .ic{
    width:2.6rem; height:2.6rem; border-radius:10px; background:var(--bg-soft); display:flex;
    align-items:center; justify-content:center; flex-shrink:0;
  }
  .contact-item .ic svg{width:1.3rem; height:1.3rem; color:var(--accent);}
  .contact-item h4{margin:0 0 .2rem; font-size:1rem;}
  .contact-item p{margin:0; font-size:.94rem;}
  .map-box{
    border-radius:var(--radius); background:var(--bg-soft); border:1px solid var(--border);
    min-height:280px; overflow:hidden;
  }
  .map-box iframe{width:100%; height:100%; min-height:280px; border:0; display:block;}

  /* ===== Footer ===== */
  footer{background:var(--nav-bg-2); color:rgba(255,255,255,.85); padding:4rem 0 1.5rem;}
  .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; padding-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,.12);}
  .footer-brand img{height:92px; margin-bottom:1rem; filter:brightness(0) invert(1);}
  .footer-brand p{color:rgba(255,255,255,.65); font-size:.92rem;}
  footer h4{color:#fff; font-size:1rem; margin-bottom:1.1rem;}
  footer ul li{margin-bottom:.7rem;}
  footer a{color:rgba(255,255,255,.75); font-size:.92rem;}
  footer a:hover{color:#fff;}
  .social-row{display:flex; gap:.7rem; margin-top:1rem;}
  .social-row a{
    width:2.4rem; height:2.4rem; border-radius:50%; border:1px solid rgba(255,255,255,.3);
    display:flex; align-items:center; justify-content:center;
  }
  .social-row svg{width:1.05rem; height:1.05rem;}
  .footer-bottom{
    padding-top:1.5rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
    font-size:.85rem; color:rgba(255,255,255,.6);
  }
  .footer-credit{text-align:center; margin-top:1rem; font-size:.82rem;}
  .footer-credit a{color:rgba(255,255,255,.55);}
  .footer-credit a:hover{color:#fff;}

  .divider-ring{display:flex; justify-content:center; gap:.6rem; padding:.5rem 0 2.4rem;}
  .divider-ring span{width:9px; height:9px; border-radius:50%;}

  @media (max-width:960px){
    .hero .container{grid-template-columns:1fr;}
    .quick-grid{grid-template-columns:1fr 1fr;}
    .about-wrap{grid-template-columns:1fr;}
    .card-grid{grid-template-columns:1fr;}
    .events-grid{grid-template-columns:1fr;}
    .services-grid{grid-template-columns:1fr 1fr;}
    .contact-wrap{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr 1fr;}

    .nav-toggle{display:flex;}
    .brand-icon{height:42px;}
    .brand-wordmark{display:none;}
    .btn-header{padding:.5rem 1.1rem;}
    .btn-header .btn-line-main{font-size:.88rem;}
    .btn-header .btn-line-sub{font-size:.62rem;}

    nav.main-nav{
      position:fixed; inset-block:0; right:0; z-index:150;
      width:280px; max-width:82vw; height:100%;
      background:var(--bg-alt); box-shadow:-10px 0 30px rgba(0,0,0,.2);
      padding:1.6rem 1.6rem 2rem; overflow-y:auto;
      transform:translateX(100%); transition:transform .3s ease;
    }
    nav.main-nav.open{transform:translateX(0);}
    .nav-drawer-brand{display:block; padding-bottom:1.4rem; margin-bottom:1rem; border-bottom:1px solid var(--border);}
    .nav-drawer-brand img{height:auto; width:100%; max-width:220px;}
    nav.main-nav ul{display:flex; flex-direction:column; align-items:stretch; gap:.2rem;}
    nav.main-nav a{display:block; padding:.85rem .3rem; border-bottom:1px solid var(--border);}
    nav.main-nav .has-dropdown .dropdown{
      display:block; position:static; box-shadow:none; border:none; background:transparent;
      margin:0 0 .3rem; padding:0 0 0 1rem;
    }
    nav.main-nav .dropdown a{padding:.65rem .3rem; font-size:.94rem; color:var(--text-muted); border-bottom:none;}

    .nav-backdrop{
      position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:90;
    }
    .nav-backdrop[hidden]{display:none;}
  }
  @media (max-width:600px){
    .hero h1{font-size:2rem;}
    .quick-grid{grid-template-columns:1fr;}
    .services-grid{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr;}
  }

  /* ===== Read-aloud controls ===== */
  .speak-mini{
    display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
    width:2.2rem; height:2.2rem; border-radius:50%; border:1px solid var(--border);
    background:var(--bg-alt); color:var(--accent);
  }
  .speak-mini svg{width:1.05rem; height:1.05rem;}
  .speak-mini:hover{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .speak-mini.speaking{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .card-title-row{display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem;}
  .card-title-row h3{margin:0; min-width:0;}
  .card-title-row h4{margin:0; min-width:0;}

  .site-reader{
    position:fixed; left:1.4rem; bottom:1.4rem; z-index:200;
    display:flex; align-items:center; gap:.7rem;
    background:var(--accent-deep); color:#fff; border:none; border-radius:999px;
    padding:.85rem 1.4rem; font-weight:700; font-size:.98rem; box-shadow:var(--card-shadow);
  }
  .site-reader svg{width:1.3rem; height:1.3rem;}
  .site-reader:hover{filter:brightness(1.1);}
  .site-reader.speaking{background:var(--accent);}
  .reader-pulse{
    width:.55rem; height:.55rem; border-radius:50%; background:#fff; display:none;
  }
  .site-reader.speaking .reader-pulse{display:inline-block; animation:pulse 1s infinite ease-in-out;}
  @keyframes pulse{0%,100%{opacity:.4; transform:scale(.8);} 50%{opacity:1; transform:scale(1.2);}}

  @media (max-width:600px){
    .site-reader{left:1rem; bottom:1rem; padding:.75rem 1.1rem; font-size:.9rem;}
  }

  .voice-notice{
    position:fixed; left:1.4rem; bottom:5.4rem; z-index:200; max-width:320px;
    display:flex; align-items:flex-start; gap:.7rem;
    background:var(--bg-alt); color:var(--text); border:1px solid var(--border); border-radius:14px;
    padding:1rem 1.1rem; box-shadow:var(--card-shadow);
  }
  .voice-notice[hidden]{display:none;}
  .voice-notice p{margin:0; font-size:.86rem; color:var(--text); flex:1;}
  .voice-notice button{
    flex-shrink:0; width:1.6rem; height:1.6rem; border-radius:50%; border:1px solid var(--border);
    background:transparent; color:var(--text-muted); font-size:.85rem; line-height:1;
  }
  .voice-notice button:hover{background:var(--bg-soft);}
  @media (max-width:600px){
    .voice-notice{left:1rem; bottom:4.6rem; max-width:calc(100% - 2rem);}
  }

  /* ===== PWA install sheet ===== */
  .pwa-backdrop{
    position:fixed; inset:0; background:rgba(27,20,32,.5); z-index:300;
  }
  .pwa-backdrop[hidden]{display:none;}
  .pwa-sheet{
    position:fixed; left:0; right:0; bottom:0; z-index:301; max-width:420px; margin:0 auto;
    background:var(--bg-alt); border-radius:22px 22px 0 0; padding:1.8rem 1.6rem 1.6rem;
    box-shadow:0 -10px 30px rgba(27,20,32,.25); text-align:center;
    animation:pwaSheetUp .25s ease;
  }
  .pwa-sheet[hidden]{display:none;}
  @keyframes pwaSheetUp{ from{transform:translateY(100%);} to{transform:translateY(0);} }
  .pwa-sheet-logo{width:4.2rem; height:4.2rem; object-fit:contain; margin:0 auto 1rem; display:block;}
  .pwa-sheet h2{font-size:1.25rem; margin:0 0 .4rem;}
  .pwa-sheet-sub{color:var(--text-muted); font-size:.9rem; margin:0 0 1.1rem;}
  .pwa-badges{display:flex; justify-content:center; gap:.6rem; margin-bottom:1.3rem;}
  .pwa-badge{
    font-size:.8rem; font-weight:700; color:var(--accent-deep);
    background:color-mix(in srgb, var(--accent) 12%, transparent);
    padding:.4rem .9rem; border-radius:999px;
  }
  .pwa-tabs{display:flex; border:1px solid var(--border); border-radius:999px; padding:.25rem; margin-bottom:1.2rem;}
  .pwa-tab{
    flex:1; border:none; background:transparent; padding:.55rem 0; border-radius:999px;
    font-weight:700; font-size:.9rem; color:var(--text-muted); font-family:inherit;
  }
  .pwa-tab.active{background:var(--accent-deep); color:#fff;}
  .pwa-steps{
    text-align:right; margin:0 0 1.3rem; padding:1rem 1.2rem; background:var(--bg-soft);
    border-radius:14px; font-size:.86rem; color:var(--text); line-height:1.9;
  }
  .pwa-steps[hidden]{display:none;}
  .pwa-steps li{margin-bottom:.3rem;}
  .pwa-steps li:last-child{margin-bottom:0;}
  .pwa-install-btn{width:100%; justify-content:center; margin-bottom:.8rem;}
  .pwa-dismiss{
    display:block; width:100%; background:none; border:none; color:var(--accent);
    font-weight:700; font-size:.9rem; font-family:inherit; padding:.4rem;
  }
  @media (min-width:641px){
    .pwa-sheet{display:none;}
    .pwa-backdrop{display:none;}
  }

  @media (prefers-reduced-motion: reduce){
    *{transition:none !important; animation:none !important; scroll-behavior:auto !important;}
  }

  /* ===== News listing / detail ===== */
  .news-detail-section{padding-top:3rem;}
  .back-link{
    display:inline-flex; align-items:center; gap:.4rem; font-weight:700; color:var(--accent-2);
    margin-bottom:1.6rem;
  }
  .back-link:hover{text-decoration:underline;}

  .news-detail{
    max-width:840px; margin:0 auto; background:var(--bg-alt); border:1px solid var(--border);
    border-radius:var(--radius); box-shadow:var(--card-shadow); padding:2.2rem;
  }
  .news-detail h1{font-size:1.7rem; margin:.6rem 0 1.2rem;}
  .news-detail-meta{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
    margin-bottom:1.6rem; padding-bottom:1.4rem; border-bottom:1px solid var(--border);
  }
  .btn-listen{
    display:inline-flex; align-items:center; gap:.55rem; padding:.65rem 1.3rem; border-radius:999px;
    border:1px solid var(--accent); background:transparent; color:var(--accent); font-weight:700; font-size:.92rem;
  }
  .btn-listen svg{width:1.1rem; height:1.1rem;}
  .btn-listen:hover, .btn-listen.speaking{background:var(--accent); color:var(--accent-ink);}

  .news-detail-image{border-radius:14px; overflow:hidden; margin-bottom:1.8rem; cursor:zoom-in; position:relative;}
  .news-detail-image img{width:100%; max-height:420px; object-fit:cover; display:block;}

  .news-detail-body p{color:var(--text); font-size:1.02rem; margin-bottom:1.1rem;}

  .news-detail-gallery{
    display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:1.8rem;
  }
  .news-detail-gallery[hidden]{display:none;}
  .news-gallery-item{margin:0; border-radius:12px; overflow:hidden; cursor:zoom-in; position:relative;}
  .news-gallery-item img{width:100%; height:220px; object-fit:cover; display:block;}
  .news-gallery-item .play-badge{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,.25);
  }
  .news-gallery-item .play-badge svg{
    width:3.2rem; height:3.2rem; color:#fff; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));
  }

  /* ===== Lightbox ===== */
  .lightbox{
    position:fixed; inset:0; z-index:300; background:rgba(10,7,12,.92);
    display:flex; align-items:center; justify-content:center; padding:3rem 1.5rem;
  }
  .lightbox[hidden]{display:none;}
  .lightbox-content{max-width:92vw; max-height:88vh;}
  .lightbox-content img, .lightbox-content video{
    max-width:92vw; max-height:88vh; border-radius:10px; display:block; margin:0 auto;
  }
  .lightbox-close{
    position:absolute; top:1.4rem; left:1.4rem; width:2.6rem; height:2.6rem; border-radius:50%;
    border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.12); color:#fff; font-size:1.1rem;
  }
  .lightbox-close:hover{background:rgba(255,255,255,.25);}
  @media (max-width:600px){
    .lightbox{padding:1.2rem;}
    .lightbox-close{top:.8rem; left:.8rem;}
  }

  .news-not-found{max-width:600px; margin:0 auto; text-align:center; padding:3rem 0;}

  .event-detail-meta{flex-wrap:wrap;}
  .event-detail-date-row{display:flex; align-items:center; gap:1rem;}
  .event-detail-info{display:flex; flex-direction:column; gap:.35rem; font-size:.92rem; color:var(--text-muted);}

  .service-detail-title-row{
    display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap;
    margin-bottom:1.6rem; padding-bottom:1.4rem; border-bottom:1px solid var(--border);
  }
  .service-detail-title-row h1{margin:0;}
  .date-added{
    margin:1.6rem 0 0; padding-top:1.2rem; border-top:1px solid var(--border);
    font-size:.88rem; color:var(--text-muted);
  }

  @media (max-width:700px){
    .news-detail{padding:1.4rem;}
    .news-detail-gallery{grid-template-columns:1fr;}
  }

  /* ===== Registration form (register.html) ===== */
  .form-hero{padding:3rem 0 1rem;}
  .register-form{
    max-width:840px; margin:0 auto; background:var(--bg-alt); border:1px solid var(--border);
    border-radius:var(--radius); box-shadow:var(--card-shadow); padding:2.2rem;
  }
  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem 1.6rem;}
  .form-field{display:flex; flex-direction:column; gap:.5rem;}
  .form-field-wide{grid-column:1 / -1;}
  .form-field label{font-weight:700; font-size:.95rem;}
  .form-field .req{color:var(--danger);}
  .form-field input:not([type="radio"]):not([type="checkbox"]),
  .form-field select,
  .form-field textarea{
    font-family:inherit; font-size:1rem; padding:.75rem .9rem; border-radius:10px;
    border:1px solid var(--border); background:var(--bg); color:var(--text);
  }
  .form-field input:focus,
  .form-field select:focus,
  .form-field textarea:focus{outline:var(--focus-ring); outline-offset:1px; border-color:var(--accent);}
  .form-field textarea{resize:vertical; min-height:6rem;}
  .form-field input[type="file"]{padding:.6rem .9rem; cursor:pointer;}
  .form-check{
    flex-direction:row; align-items:flex-start; gap:.7rem; padding-top:.3rem;
  }
  .form-check input{width:1.15rem; height:1.15rem; margin-top:.2rem; flex-shrink:0;}
  .form-check label{font-weight:500; font-size:.92rem; color:var(--text-muted);}
  .form-actions{margin-top:2rem; text-align:center; display:flex; justify-content:center; gap:1rem;}
  .form-success{
    display:block; background:color-mix(in srgb, var(--accent-2) 14%, transparent);
    border:1px solid var(--accent-2); border-radius:12px; padding:1.1rem 1.3rem; margin-bottom:1.6rem;
  }
  .form-success[hidden]{display:none;}
  .form-success strong{display:block; color:var(--accent-2); margin-bottom:.3rem; font-size:1.05rem;}
  .form-success p{margin:0; color:var(--text);}

  .radio-row{display:flex; gap:1.6rem;}
  .radio-option{
    display:flex; flex-direction:row; align-items:center; gap:.5rem;
    font-weight:500; font-size:.95rem; color:var(--text); cursor:pointer;
  }
  .radio-option input{width:1.1rem; height:1.1rem; flex-shrink:0;}

  /* ===== Step indicator (stepper / timeline) ===== */
  .form-steps-indicator{
    display:flex; align-items:flex-start; justify-content:center; gap:0; margin-bottom:2.4rem;
  }
  .form-steps-indicator[hidden]{display:none;}
  .step-item{display:flex; flex-direction:column; align-items:center; gap:.6rem; width:10rem;}
  .step-dot{
    display:flex; align-items:center; justify-content:center; width:2.4rem; height:2.4rem; border-radius:50%;
    background:var(--bg-alt); color:var(--text-muted); font-weight:800; font-family:"Noto Kufi Arabic",sans-serif;
    border:2px solid var(--border); flex-shrink:0; transition:.3s ease;
  }
  .step-item.active .step-dot{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .step-item.done .step-dot{background:var(--accent-2); color:#fff; border-color:var(--accent-2);}
  .step-label{font-size:.85rem; font-weight:700; color:var(--text-muted); text-align:center;}
  .step-item.active .step-label{color:var(--text);}
  .step-line{width:4.5rem; height:2px; background:var(--border); flex-shrink:0; margin-top:1.3rem; transition:.3s ease;}
  .step-line.done{background:var(--accent-2);}

  .form-step[hidden]{display:none;}

  /* ===== Terms & agreement (step 2) ===== */
  .terms-box{
    background:var(--bg-soft); border:1px solid var(--border); border-radius:14px; padding:1.6rem 1.8rem;
  }
  .terms-box h3{margin:0 0 1rem;}
  .terms-list{margin:0; padding-inline-start:1.4rem; display:flex; flex-direction:column; gap:.8rem;}
  .terms-list li{color:var(--text); font-size:.95rem;}
  .terms-pledge{margin:1.4rem 0 0; padding-top:1.2rem; border-top:1px solid var(--border); font-weight:700;}

  .terms-agree{text-align:center; margin-top:2rem;}
  .terms-agree-question{font-weight:700; font-size:1.05rem; margin-bottom:1rem;}
  .terms-agree-actions{display:flex; justify-content:center; gap:1rem;}
  .terms-agree-warning{color:var(--danger); font-weight:700; margin:1rem 0 0;}
  .terms-agree-warning[hidden]{display:none;}

  @media (max-width:700px){
    .register-form{padding:1.5rem;}
    .form-grid{grid-template-columns:1fr;}
    .terms-box{padding:1.2rem 1.3rem;}
  }

  .date-select-group{display:grid; grid-template-columns:1fr 1.4fr 1fr; gap:.6rem;}