html { scroll-behavior: smooth; overflow-x: hidden;}
    body { font-family: 'Tajawal', sans-serif; background: #fdf6f0; color: #1a1a1c; overflow-x: hidden; transition: font-family .3s; }
    html[dir="ltr"] body { font-family: 'IBM Plex Sans Arabic', sans-serif; }
    html[dir="ltr"] .font-en { font-family: 'IBM Plex Sans Arabic', sans-serif; }
    .font-en { font-family: 'IBM Plex Sans Arabic', sans-serif; letter-spacing: 0.02em; }

    .grid-bg {
      background-image:
        linear-gradient(rgba(152,65,33,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(152,65,33,0.06) 1px, transparent 1px);
      background-size: 60px 60px;
    }
    .gradient-primary { background: linear-gradient(135deg, #984121 0%, #7a3319 60%, #3d1a0d 100%); }
    .text-gradient { background: linear-gradient(135deg, #984121, #d17d3c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .divider-line { width: 60px; height: 3px; background: linear-gradient(90deg, #984121, #d17d3c); border-radius: 2px; }

    #navbar { transition: all .4s ease; }
    #navbar.scrolled { background: rgba(253, 246, 240, 0.92); backdrop-filter: blur(16px); box-shadow: 0 4px 30px -10px rgba(152,65,33,.15); padding-top: .5rem; padding-bottom: .5rem; }

    .lang-toggle { position: relative; display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .55rem .35rem .35rem; background: rgba(255,255,255,.9); border: 1px solid rgba(152,65,33,.18); border-radius: 999px; cursor: pointer; transition: all .3s; backdrop-filter: blur(6px); }
    .lang-toggle:hover { border-color: rgba(152,65,33,.5); transform: translateY(-1px); }
    .lang-toggle .globe { width: 28px; height: 28px; border-radius: 999px; background: linear-gradient(135deg,#984121,#b85f24); color:#fff; display:flex; align-items:center; justify-content:center; font-size: .75rem; }
    .lang-toggle .lang-label { font-size: .75rem; font-weight: 800; color: #7a3319; padding-inline: .35rem; font-family: 'IBM Plex Sans Arabic', sans-serif; }

    .sector-card { transition: all .5s cubic-bezier(.2,.9,.3,1); }
    .sector-card:hover { transform: translateY(-8px); }
    .sector-card:hover .sector-img { transform: scale(1.08); }
    .sector-card:hover .sector-overlay { opacity: 1; }

    .partner-item { filter: grayscale(100%); opacity: .65; transition: all .4s; }
    .partner-item:hover { filter: grayscale(0%); opacity: 1; }

    .big-num { font-size: clamp(80px, 14vw, 220px); font-weight: 900; color: rgba(152,65,33,0.06); line-height: 1; position: absolute; pointer-events: none; user-select: none; }

    .btn-primary { background: linear-gradient(135deg, #984121, #b85f24); color: #fff; transition: all .3s; box-shadow: 0 10px 30px -10px rgba(152,65,33,.6); }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 15px 40px -10px rgba(152,65,33,.8); }
    .btn-ghost { border: 1.5px solid #984121; color: #984121; transition: all .3s; }
    .btn-ghost:hover { background: #984121; color: #fff; }

    @keyframes marquee { 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }
    .marquee-track { display: flex; animation: marquee 45s linear infinite; width: max-content; }
    html[dir="ltr"] .marquee-track { animation-direction: reverse; }
    .marquee-track:hover { animation-play-state: paused; }

    .nav-link { position: relative; }
    .nav-link::after { content: ''; position: absolute; bottom: -6px; right: 0; width: 0; height: 2px; background: #984121; transition: width .3s; }
    html[dir="ltr"] .nav-link::after { right: auto; left: 0; }
    .nav-link:hover::after { width: 100%; }

    ::-webkit-scrollbar { width: 10px; }
    ::-webkit-scrollbar-track { background: #fdf6f0; }
    ::-webkit-scrollbar-thumb { background: #984121; border-radius: 5px; }

    .faq-item { background: #fff; border: 1px solid rgba(152,65,33,.12); border-radius: 1.25rem; overflow: hidden; transition: all .35s ease; }
    .faq-item:hover { border-color: rgba(152,65,33,.3); }
    .faq-item.open { border-color: rgba(152,65,33,.45); box-shadow: 0 18px 40px -22px rgba(152,65,33,.4); }
    .faq-q { cursor: pointer; user-select: none; }
    .faq-a { max-height: 0; overflow: hidden; transition: max-height .45s ease, padding .35s ease; }
    .faq-item.open .faq-a { max-height: 500px; padding-bottom: 1.5rem; }
    .faq-item.open .faq-icon { transform: rotate(45deg); background: #984121; color: #fff; }
    .faq-icon { transition: all .35s ease; }

    #chatbot-toggle { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 64px; height: 64px; border-radius: 999px; background: linear-gradient(135deg,#984121,#b85f24); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 15px 40px -10px rgba(152,65,33,.7), 0 0 0 0 rgba(152,65,33,.4); cursor: pointer; z-index: 60; transition: all .35s cubic-bezier(.2,.9,.3,1); animation: pulseRing 2.5s infinite; }
    @keyframes pulseRing { 0% { box-shadow: 0 15px 40px -10px rgba(152,65,33,.7), 0 0 0 0 rgba(152,65,33,.5); } 70% { box-shadow: 0 15px 40px -10px rgba(152,65,33,.7), 0 0 0 18px rgba(152,65,33,0); } 100% { box-shadow: 0 15px 40px -10px rgba(152,65,33,.7), 0 0 0 0 rgba(152,65,33,0); } }
    #chatbot-toggle:hover { transform: translateY(-3px) scale(1.05); animation-play-state: paused; }
    #chatbot-toggle.active { animation: none; }
    #chatbot-toggle .badge { position: absolute; top: -3px; right: -3px; width: 20px; height: 20px; border-radius: 999px; background: #22c55e; border: 3px solid #fff; }
    #chatbot-toggle .badge::after { content: ''; position: absolute; inset: 0; border-radius: 999px; background: #22c55e; animation: badgePulse 1.8s infinite; }
    @keyframes badgePulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(2.2); opacity: 0; } }

    #chatbot-panel { position: fixed; bottom: 6.75rem; right: 1.5rem; width: min(400px, calc(100vw - 2rem)); height: min(620px, calc(100vh - 8.5rem)); background: #fff; border-radius: 1.75rem; box-shadow: 0 40px 90px -20px rgba(0,0,0,.4), 0 0 0 1px rgba(152,65,33,.08); display: flex; flex-direction: column; overflow: hidden; z-index: 60; opacity: 0; transform: translateY(24px) scale(.94); pointer-events: none; transition: all .4s cubic-bezier(.2,.9,.3,1); }
    #chatbot-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

    .chat-header { background: linear-gradient(135deg,#984121 0%,#7a3319 100%); color: #fff; padding: 1rem 1.15rem; display: flex; align-items: center; gap: .75rem; position: relative; overflow: hidden; }
    .chat-header::before { content: ''; position: absolute; top: -50%; right: -20%; width: 200px; height: 200px; border-radius: 999px; background: radial-gradient(circle, rgba(255,255,255,.12), transparent 70%); }
    .chat-header .avatar { width: 44px; height: 44px; border-radius: 999px; background: rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; font-size: 1.2rem; border: 1.5px solid rgba(255,255,255,.3); position: relative; z-index: 1; }
    .chat-header .avatar::after { content: ''; position: absolute; bottom: -2px; right: -2px; width: 12px; height: 12px; border-radius: 999px; background: #22c55e; border: 2.5px solid #7a3319; }
    .chat-body { flex: 1; overflow-y: auto; padding: 1.15rem; background: radial-gradient(circle at 20% 10%, rgba(152,65,33,.03), transparent 50%), radial-gradient(circle at 80% 90%, rgba(209,125,60,.04), transparent 50%), #fdf6f0; display: flex; flex-direction: column; gap: .85rem; }
    .chat-body::-webkit-scrollbar { width: 6px; }
    .chat-body::-webkit-scrollbar-thumb { background: #d17d3c; border-radius: 3px; }

    .chat-msg { max-width: 88%; padding: .8rem 1rem; border-radius: 1.1rem; font-size: .875rem; line-height: 1.65; animation: msgIn .35s cubic-bezier(.2,.9,.3,1); word-wrap: break-word; }
    @keyframes msgIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    .chat-msg.bot { background: #fff; color: #1a1a1c; align-self: flex-start; border: 1px solid rgba(152,65,33,.12); border-bottom-right-radius: .3rem; box-shadow: 0 2px 8px -4px rgba(152,65,33,.15); }
    html[dir="ltr"] .chat-msg.bot { border-bottom-right-radius: 1.1rem; border-bottom-left-radius: .3rem; }
    .chat-msg.user { background: linear-gradient(135deg,#984121,#b85f24); color: #fff; align-self: flex-end; border-bottom-left-radius: .3rem; box-shadow: 0 4px 12px -4px rgba(152,65,33,.5); }
    html[dir="ltr"] .chat-msg.user { border-bottom-left-radius: 1.1rem; border-bottom-right-radius: .3rem; }

    .chat-time { font-size: .65rem; opacity: .55; margin-top: .3rem; display: block; }

    .chat-quick { display: flex; flex-wrap: wrap; gap: .4rem; padding: .6rem 1.1rem .35rem; background: #fdf6f0; border-top: 1px solid rgba(152,65,33,.06); }
    .chat-quick button { font-size: .72rem; padding: .4rem .75rem; border-radius: 999px; background: #fff; color: #7a3319; border: 1px solid rgba(152,65,33,.22); transition: all .25s; font-weight: 700; display: inline-flex; align-items: center; gap: .3rem; }
    .chat-quick button:hover { background: #984121; color: #fff; border-color: #984121; transform: translateY(-1px); }

    .chat-input-row { display: flex; align-items: center; gap: .5rem; padding: .85rem; border-top: 1px solid rgba(152,65,33,.1); background: #fff; }
    .chat-input-row input { flex: 1; padding: .7rem 1rem; border: 1.5px solid rgba(152,65,33,.15); border-radius: 999px; outline: none; font-size: .875rem; transition: all .25s; background: #fdf6f0; }
    .chat-input-row input:focus { border-color: #984121; background: #fff; box-shadow: 0 0 0 4px rgba(152,65,33,.08); }
    .chat-input-row button { width: 42px; height: 42px; border-radius: 999px; background: linear-gradient(135deg,#984121,#b85f24); color: #fff; display: flex; align-items: center; justify-content: center; transition: all .25s; flex-shrink: 0; box-shadow: 0 6px 16px -6px rgba(152,65,33,.6); }
    .chat-input-row button:hover { transform: scale(1.05) rotate(-15deg); }
    .chat-input-row button:disabled { opacity: .4; cursor: not-allowed; }

    .typing-dots { display: inline-flex; align-items: center; gap: 2px; padding: .2rem 0; }
    .typing-dots span { display: inline-block; width: 7px; height: 7px; background: #984121; border-radius: 999px; animation: typing 1.2s infinite; }
    .typing-dots span:nth-child(2) { animation-delay: .2s; }
    .typing-dots span:nth-child(3) { animation-delay: .4s; }
    @keyframes typing { 0%,60%,100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-5px); opacity: 1; } }

    .eco-step { position: relative; background: #fff; border: 1px solid rgba(152,65,33,.1); border-radius: 1.75rem; padding: 2rem 1.75rem; transition: all .45s cubic-bezier(.2,.9,.3,1); overflow: hidden; }
    .eco-step::before { content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 4px; background: linear-gradient(90deg, #984121, #d17d3c); transform: scaleX(0); transform-origin: right; transition: transform .5s cubic-bezier(.2,.9,.3,1); }
    .eco-step:hover::before { transform: scaleX(1); }
    .eco-step:hover { transform: translateY(-8px); border-color: rgba(152,65,33,.28); box-shadow: 0 25px 60px -30px rgba(61,26,13,.5); }
    .eco-step .num-badge { position: absolute; top: 1.5rem; left: 1.5rem; font-size: 4.5rem; font-weight: 900; line-height: 1; color: rgba(152,65,33,.06); font-family: 'IBM Plex Sans Arabic', sans-serif; pointer-events: none; transition: color .4s; }
    html[dir="ltr"] .eco-step .num-badge { left: auto; right: 1.5rem; }
    .eco-step:hover .num-badge { color: rgba(152,65,33,.12); }

    [data-lang] { transition: opacity .25s ease; }

    /* ===== Modal ===== */
    .modal-overlay {
      position: fixed; inset: 0; background: rgba(15,15,16,.75); backdrop-filter: blur(10px);
      z-index: 100; opacity: 0; pointer-events: none; transition: opacity .35s ease;
    }
    .modal-overlay.open { opacity: 1; pointer-events: auto; }
    .modal-box {
      position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.94);
      width: min(820px, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); overflow-y: auto;
      background: #fff; border-radius: 2rem; z-index: 101;
      box-shadow: 0 50px 120px -25px rgba(0,0,0,.65);
      opacity: 0; pointer-events: none; transition: all .4s cubic-bezier(.2,.9,.3,1);
    }
    .modal-box.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
    .modal-box::-webkit-scrollbar { width: 8px; }
    .modal-box::-webkit-scrollbar-track { background: #fdf6f0; border-radius: 4px; }
    .modal-box::-webkit-scrollbar-thumb { background: #984121; border-radius: 4px; }

    .stat-card { position: relative; overflow: hidden; }
    .stat-card::after {
      content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%;
      background: radial-gradient(circle, rgba(152,65,33,.04), transparent 60%);
      pointer-events: none;
    }

    .why-card { position: relative; overflow: hidden; transition: all .45s cubic-bezier(.2,.9,.3,1); }
    .why-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(61,26,13,.45); }
    .why-card .why-icon { transition: all .45s cubic-bezier(.2,.9,.3,1); }
    .why-card:hover .why-icon { transform: scale(1.1) rotate(-6deg); }

    .legal-content h4 { font-weight: 900; color: #1a1a1c; margin-top: 1.5rem; margin-bottom: .75rem; font-size: 1.05rem; }
    .legal-content h4:first-child { margin-top: 0; }
    .legal-content p { color: rgba(26,26,28,.75); line-height: 1.9; margin-bottom: .75rem; font-size: .9rem; }
    .legal-content ul { list-style: disc; padding-inline-start: 1.5rem; margin-bottom: 1rem; }
    .legal-content li { color: rgba(26,26,28,.75); line-height: 1.9; margin-bottom: .35rem; font-size: .9rem; }
    .legal-content strong { color: #7a3319; font-weight: 800; }

    select {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23984121' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 1rem center;
      background-size: 18px 18px;
      padding-right: 3rem !important;
      cursor: pointer;
      transition: all .25s ease;
    }

    html[dir="ltr"] select {
      background-position: right 1rem center;
      padding-right: 3rem !important;
      padding-left: 1rem !important;
    }

    html[dir="rtl"] select {
      background-position: left 1rem center;
      padding-left: 3rem !important;
      padding-right: 1rem !important;
    }

    select:hover {
      border-color: #984121 !important;
      box-shadow: 0 0 0 4px rgba(152, 65, 33, 0.06);
    }

    select:focus {
      border-color: #984121 !important;
      box-shadow: 0 0 0 4px rgba(152, 65, 33, 0.1);
      background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a3319' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    }

    select option {
      padding: 12px 16px;
      background: #fff;
      color: #1a1a1c;
      font-family: inherit;
    }