:root{
      /* Core palette — deep night + violet accents reminiscent of modern UI */
      --bg-1:#06110e;
      --bg-2:#0a1b17;
      --accent: #bd933283;
      --accent-2: #ffcc41;
      --text: #effcf7;
      --muted: #cfe6dc;
      --glass-bg:rgba(77, 72, 52, 0.06);
      --glass-stroke:rgba(255, 253, 230, 0.18);
      --glass-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 1px rgba(255,255,255,.2);
      --radius: 20px;
      --max: 1200px;
      --grid-dot: rgba(255,255,255,.06);
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; color:var(--text); font-family:'Cairo','Noto Sans Arabic','Noto Sans SC', system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
      background:
        radial-gradient(circle at 50% -10%, rgba(143,123,255,.25), transparent 60%),
        radial-gradient(1200px 600px at 50% 0%, rgba(103,232,249,.15), transparent 50%),
        linear-gradient(180deg, var(--bg-2), var(--bg-1));
      /* dotted grid backdrop */
      background-blend-mode: screen, screen, normal;
    }
    body::before{ /* dotted grid overlay */
      content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
      background:
        radial-gradient(var(--grid-dot) 1px, transparent 1px) 0 0/16px 16px;
      mask-image: radial-gradient(circle at 50% 50%, #000 60%, transparent 100%);
    }

    .container{width:min(100%, var(--max)); margin-inline:auto; padding-inline:20px}
    .row{display:grid; gap:20px}

    /* Glass kit */
    .glass{background:var(--glass-bg); border:1px solid var(--glass-stroke); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--glass-shadow); border-radius: var(--radius)}
    .btn{appearance:none; border:none; cursor:pointer; font-weight:700; padding:12px 20px; border-radius: 999px; transition: transform .15s ease, box-shadow .15s ease;}
    .btn.glass{color:var(--text)}
    .btn.primary{background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#0a0a0a}
    .btn.ghost{background:var(--glass-bg); border:1px solid var(--glass-stroke); color:var(--text)}
    .btn:is(:hover,:focus-visible){transform:translateY(-2px); box-shadow:0 8px 30px rgba(0,0,0,.35)}
    .btn.primary:is(:hover,:focus-visible){box-shadow:0 8px 30px rgba(125,211,167,.6);}
    .btn.glass:is(:hover,:focus-visible){box-shadow:0 8px 30px rgba(239,252,247,.2);}

    /* Navbar */
    .nav{position:sticky; top:16px; z-index: 50}
    .nav-wrap{display:flex; align-items:center; justify-content:space-between; padding:10px 14px}
    .brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.5px}
    .logo{inline-size:28px; block-size:28px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#0b0b14; font-weight:900}
    .menu-btn{inline-size:44px; block-size:44px; display:grid; place-items:center; border-radius:12px}
    .menu-btn svg{stroke:currentColor}
    .nav nav{display:flex; align-items:center; gap:12px}
    .lang-switch{display:flex; align-items:center; gap:6px; padding:4px 6px; border-radius:999px; flex-wrap:wrap}
    .lang-btn{background:transparent; border:1px solid transparent; color:var(--muted); font-weight:700; font-size:0.85rem; padding:6px 10px; border-radius:999px; cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease}
    .lang-btn:hover,
    .lang-btn:focus-visible{color:var(--text); border-color:var(--glass-stroke)}
    .lang-btn.active{background:var(--glass-bg); border-color:var(--glass-stroke); color:var(--text)}

    .nav-panel{position:fixed; inset:16px; display:none; z-index:60}
    .nav-panel.open{display:block}
    .panel{padding:24px}
    .panel .grid{display:grid; gap:18px; grid-template-columns:repeat(3, minmax(0,1fr))}
    .panel .card{padding:18px; min-height:160px}
    .panel h4{margin:.2rem 0 1rem 0; font-size:1.4rem}
    .panel a{color:var(--muted); text-decoration:none}
    .panel a:hover{color:var(--text); text-decoration: underline; text-underline-offset: 4px;}

    /* Hero with light rays */
    .hero{position:relative; padding:120px 0 80px}
    .hero .orb{position:absolute; inset:0; pointer-events:none; z-index:0;
      background: radial-gradient(350px 240px at 50% 0%, rgba(255,255,255,.18), transparent 80%);
      mask: radial-gradient(600px 380px at 50% 0%, #000 35%, transparent 70%);
    }
    .hero .wrap{position:relative; z-index:1; text-align:center}
    .kicker{display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; font-weight:700; letter-spacing:.3px}
    .title{font-size:clamp(30px, 5vw + 10px, 60px); margin:24px 0 10px 0; font-weight:900; line-height:1.15}
    .sub{color:var(--muted); font-size:1.05rem}

    .cta{margin-top:28px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

    /* Sections */
    section{padding:70px 0}
    section h2{font-size:clamp(24px, 2.2vw + 12px, 38px); margin:0 0 24px 0}
    section p.lead{color:var(--muted); margin-top:-10px}

    .cards{display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:16px}
    .card{padding:20px; border-radius:16px}
    .card h3{margin:0 0 10px 0}
    .card:is(:hover,:focus-visible){transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.45);}

    /* Success Stories Card Backgrounds */
    .story-card-1 {
      background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('imgs/IMG-20240413-WA0003.webp') center/cover no-repeat;
      padding: 30px;
      color: #fff;
      text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    }
    .story-card-2 {
      background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('imgs/global_marketing-1024x538.webp') center/cover no-repeat;
      padding: 30px;
      color: #fff;
      text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    }
    .story-card-3 {
      background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('imgs/IMG-20240413-WA0003.webp') center/cover no-repeat;
      padding: 30px;
      color: #fff;
      text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    }

    /* Animations */
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .animate-on-scroll {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }
    .animate-on-scroll.in-view {
      opacity: 1;
      transform: translateY(0);
    }

    .fade-in-up { animation: fadeInUp 0.8s ease-out forwards; }
    .fade-in { animation: fadeIn 0.8s ease-out forwards; }


    /* Arabic title emphasis (لـــبـــــــــــان) */
    .luban-word{font-size: clamp(42px, 7vw + 8px, 86px); letter-spacing: .2em; font-weight:900; text-shadow: 0 10px 30px rgba(0,0,0,.55)}

    /* Map */
    #map{height:440px; border-radius:16px; overflow:hidden}

    /* Footer */
    footer{padding:60px 0 40px; color:var(--muted)}


    .section-has-bg{ position:relative; isolation:isolate; }
    .section-has-bg > .container{ position:relative; z-index:1; } /* keep content above */

    .section-has-bg::before{
      content:""; position:absolute; inset:0; z-index:0; 
      background: var(--sec-bg, none) center/cover no-repeat;
      opacity: var(--sec-opa, .30);     /* <— image opacity */
      filter: saturate(1) contrast(1.05);
    }

    /* optional soft veil for readability */
    .section-has-bg::after{
      content:""; position:absolute; inset:0; z-index:0;
      background: radial-gradient(80% 60% at 50% 30%, rgba(0,0,0,.18), transparent 60%),
                  linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.22));
    }

    /* Light Mode */
    body.light-mode {
      --bg-1: #ffffff;
      --bg-2: #ffffff;
      --accent: #584c0a; /* Comfortable green */
      --accent-2: #a17f1a;
      --text: #1f2937;
      --muted: #6b7280;
      --glass-bg: rgba(124, 104, 11, 0.178);
      --glass-stroke: rgba(209, 213, 219, 0.6);
      --glass-shadow: 0 10px 30px rgba(0,0,0,.08), inset 0 0 1px rgba(0,0,0,.03);
      --grid-dot: rgba(0, 0, 0, 0.02);

      background:
        radial-gradient(circle at 50% -10%, rgba(16,185,129,.08), transparent 60%),
        radial-gradient(1200px 600px at 50% 0%, rgba(5,150,105,.05), transparent 50%),
        linear-gradient(180deg, var(--bg-2), var(--bg-1));
    }

    body.light-mode::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background: 
        radial-gradient(circle at 1px 1px, rgba(64, 43, 1, 0.4) 1px, transparent 0),
        radial-gradient(circle at 1px 1px, rgba(0,0,0,.01) 0.5px, transparent 0);
      background-size: 20px 20px, 10px 10px;
      background-position: 0 0, 10px 10px;
      opacity: 0.6;
    }

    body.light-mode .hero .orb{
      background: radial-gradient(350px 240px at 50% 0%, rgba(0,0,0,.08), transparent 80%);
      mask: radial-gradient(600px 380px at 50% 0%, #000 35%, transparent 70%);
    }

    body.light-mode .btn.primary{color: #ffffff;}
    body.light-mode .menu-btn svg{stroke:var(--text);}
    body.light-mode .logo{color: #ffffff;}
    body.light-mode .luban-word{text-shadow: 0 5px 15px rgba(0,0,0,.2);}

    /* Content Sections for Library Page */
    .content-section {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      align-items: center;
      margin: 40px 0;
      padding: 30px 0;
    }

    .content-section:nth-child(even) {
      direction: ltr;
    }

    .content-section:nth-child(even) .content-text {
      direction: rtl;
    }

    .content-text h3 {
      font-size: 1.5rem;
      margin-bottom: 20px;
      color: var(--accent);
    }

    .content-text ul {
      margin: 20px 0;
      padding-right: 20px;
    }

    .content-text li {
      margin: 10px 0;
      line-height: 1.6;
    }

    .content-text strong {
      color: var(--accent-2);
    }

    .content-image {
      position: relative;
      overflow: hidden;
      border-radius: 16px;
      box-shadow: 0 10px 30px rgba(0,0,0,.2);
    }

    .content-image img {
      transition: transform 0.3s ease;
    }

    .content-image:hover img {
      transform: scale(1.05);
    }

    /* Success Stories Timeline Styles */
    .stories-timeline {
      position: relative;
      padding: 80px 0;
    }

    .stories-timeline::before {
      content: '';
      position: absolute;
      right: 50%;
      top: 0;
      bottom: 0;
      width: 2px;
      background: linear-gradient(180deg, var(--accent), var(--accent-2));
      transform: translateX(50%);
    }

    .story-item {
      position: relative;
      margin: 60px 0;
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.6s ease;
    }

    .story-item.in-view {
      opacity: 1;
      transform: translateY(0);
    }

    .story-item::before {
      content: '';
      position: absolute;
      right: 50%;
      top: 50%;
      width: 20px;
      height: 20px;
      background: var(--accent);
      border-radius: 50%;
      transform: translate(50%, -50%);
      z-index: 2;
      box-shadow: 0 0 0 4px var(--bg-1), 0 0 0 8px var(--accent);
    }

    .story-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      align-items: center;
      background: var(--glass-bg);
      border: 1px solid var(--glass-stroke);
      border-radius: 20px;
      padding: 40px;
      backdrop-filter: blur(14px);
      box-shadow: var(--glass-shadow);
      position: relative;
      overflow: hidden;
    }

    .story-content::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
    }

    .story-left .story-content {
      margin-right: 50%;
      padding-right: 60px;
    }

    .story-right .story-content {
      margin-left: 50%;
      padding-left: 60px;
    }

    .story-image {
      position: relative;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0,0,0,.2);
    }

    .story-image img {
      width: 100%;
      height: 300px;
      object-fit: cover;
      transition: transform 0.3s ease;
    }

    .story-image:hover img {
      transform: scale(1.05);
    }

    .story-badge {
      position: absolute;
      top: 20px;
      right: 20px;
      background: #eac966;
      color: #000;
      padding: 8px 16px;
      border-radius: 20px;
      font-weight: 700;
      font-size: 0.9rem;
    }

    .story-text h3 {
      font-size: 1.8rem;
      margin-bottom: 8px;
      color: #0d8340;
    }

    .story-text h4 {
      font-size: 1.1rem;
      margin-bottom: 20px;
      color: var(--muted);
      font-weight: 600;
    }

    .story-description {
      font-size: 1.1rem;
      line-height: 1.7;
      margin-bottom: 30px;
      color: var(--text);
    }

    .story-achievements {
      display: flex;
      gap: 20px;
      margin-bottom: 30px;
      flex-wrap: wrap;
    }

    .achievement {
      text-align: center;
      padding: 15px;
      background: rgba(125, 211, 167, 0.1);
      border-radius: 12px;
      border: 1px solid rgba(125, 211, 167, 0.2);
      min-width: 80px;
    }

    .achievement-number {
      display: block;
      font-size: 1.5rem;
      font-weight: 800;
      color: var(--accent);
      margin-bottom: 5px;
    }

    .achievement-label {
      font-size: 0.85rem;
      color: var(--muted);
      font-weight: 600;
    }

    .story-quote {
      background: rgba(125, 211, 167, 0.05);
      border-right: 4px solid var(--accent);
      padding: 20px;
      margin: 0;
      font-style: italic;
      font-size: 1.1rem;
      line-height: 1.6;
      border-radius: 0 12px 12px 0;
      position: relative;
    }

    .story-quote::before {
      content: '"';
      position: absolute;
      top: -10px;
      right: 15px;
      font-size: 3rem;
      color: var(--accent);
      opacity: 0.3;
    }

    .cta-section {
      padding: 80px 0;
    }

    .cta-card {
      text-align: center;
      padding: 60px 40px;
      background: linear-gradient(135deg, var(--glass-bg), rgba(125, 211, 167, 0.1));
    }

    .cta-card h3 {
      font-size: 2rem;
      margin-bottom: 20px;
      color: var(--accent);
    }

    .cta-buttons {
      display: flex;
      gap: 20px;
      justify-content: center;
      margin-top: 30px;
      flex-wrap: wrap;
    }

    /* Responsive */
    @media (max-width: 900px){
      .panel .grid{grid-template-columns:1fr}
      .hero{padding:90px 0 60px}
      .content-section {
        grid-template-columns: 1fr;
        gap: 20px;
      }
      .content-section:nth-child(even) {
        direction: rtl;
      }
      
      .stories-timeline::before {
        right: 30px;
      }
      
      .story-item::before {
        right: 30px;
      }
      
      .story-left .story-content,
      .story-right .story-content {
        margin: 0;
        padding: 30px 20px;
      }
      
      .story-content {
        grid-template-columns: 1fr;
        gap: 30px;
      }
      
      .story-achievements {
        justify-content: center;
      }
      
      .cta-buttons {
        flex-direction: column;
        align-items: center;
      }
    }

    /* Mobile Responsive */
    @media (max-width: 768px) {
      .container {
        padding-inline: 15px;
      }
      
      .nav-wrap {
        padding: 8px 12px;
        flex-wrap: wrap;
        gap: 10px;
      }
      
      .brand {
        font-size: 0.9rem;
        gap: 8px;
      }
      
      .brand span:last-child {
        display: none;
      }
      
      .nav nav {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }
      
      .btn {
        padding: 8px 16px;
        font-size: 0.9rem;
      }
      
      .hero {
        padding: 60px 0 40px;
      }
      
      .luban-word {
        font-size: clamp(32px, 8vw, 60px);
        margin-bottom: 20px;
      }
      
      .title {
        font-size: clamp(20px, 5vw, 40px);
        margin: 16px 0 8px 0;
      }
      
      .sub {
        font-size: 1rem;
        line-height: 1.5;
      }
      
      .cta {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin-top: 24px;
      }
      
      .cta .btn {
        width: 100%;
        max-width: 280px;
      }
      
      section {
        padding: 50px 0;
      }
      
      section h2 {
        font-size: clamp(20px, 4vw, 32px);
        margin-bottom: 16px;
      }
      
      .lead {
        font-size: 1rem;
        line-height: 1.6;
      }
      
      .cards {
        grid-template-columns: 1fr;
        gap: 16px;
      }
      
      .card {
        padding: 20px;
      }
      
      .story-content {
        padding: 20px;
        gap: 20px;
      }
      
      .story-text h3 {
        font-size: 1.4rem;
      }
      
      .story-text h4 {
        font-size: 1rem;
      }
      
      .story-description {
        font-size: 1rem;
        line-height: 1.6;
      }
      
      .story-achievements {
        gap: 12px;
        justify-content: space-around;
      }
      
      .achievement {
        padding: 12px;
        min-width: 70px;
      }
      
      .achievement-number {
        font-size: 1.2rem;
      }
      
      .achievement-label {
        font-size: 0.8rem;
      }
      
      .story-quote {
        padding: 16px;
        font-size: 1rem;
      }
      
      .cta-card {
        padding: 40px 20px;
      }
      
      .cta-card h3 {
        font-size: 1.5rem;
      }
      
      .cta-buttons {
        gap: 12px;
      }
      
      .cta-buttons .btn {
        width: 100%;
        max-width: 250px;
      }
    }

    @media (max-width: 480px) {
      .container {
        padding-inline: 12px;
      }
      
      .nav-wrap {
        padding: 6px 10px;
      }
      
      .brand {
        font-size: 0.8rem;
      }
      
      .btn {
        padding: 6px 12px;
        font-size: 0.8rem;
      }
      
      .lang-switch {
        gap: 4px;
        padding: 3px 4px;
      }
      
      .lang-btn {
        font-size: 0.75rem;
        padding: 4px 8px;
      }
      
      .hero {
        padding: 40px 0 30px;
      }
      
      .luban-word {
        font-size: clamp(28px, 10vw, 50px);
        letter-spacing: 0.1em;
      }
      
      .title {
        font-size: clamp(18px, 6vw, 32px);
      }
      
      .sub {
        font-size: 0.9rem;
      }
      
      section {
        padding: 40px 0;
      }
      
      .card {
        padding: 16px;
      }
      
      .story-content {
        padding: 16px;
      }
      
      .story-text h3 {
        font-size: 1.2rem;
      }
      
      .story-description {
        font-size: 0.9rem;
      }
      
      .achievement {
        padding: 10px;
        min-width: 60px;
      }
      
      .achievement-number {
        font-size: 1.1rem;
      }
      
      .achievement-label {
        font-size: 0.75rem;
      }
      
      .story-quote {
        padding: 12px;
        font-size: 0.9rem;
      }
      
      .cta-card {
        padding: 30px 16px;
      }
      
      .cta-card h3 {
        font-size: 1.3rem;
      }
    }
    @media (min-width: 900px){
  .section-has-bg::before{ background-attachment: fixed; }
}