:root{--color-primary:#0f4c75;--color-primary-hover:#1b6ca8;--color-primary-light:#0f4c7514;--color-primary-border:#0f4c7533;--bg-page:#f0f4f8;--bg-surface:#fff;--bg-sidebar:linear-gradient(180deg, #0f4c75 0%, #0a3a5c 100%);--bg-input:#fff;--text-main:#0f172a;--text-muted:var(--gray-400);--text-light:var(--white);--border-subtle:#e2e8f0;--border-focus:#1b6ca8;--status-success:#10b981;--status-success-bg:#d1fae5;--status-warning:#f59e0b;--status-warning-bg:#fef3c7;--status-error:#ef4444;--status-error-bg:#fee2e2;--status-info:#0284c7;--status-info-bg:#e0f2fe;--shadow-sm:0 1px 2px #0f4c750a;--shadow-card:0 1px 3px #0f4c750d, 0 10px 24px #0f4c750a;--shadow-dropdown:0 10px 25px -3px #0f4c7526, 0 4px 6px -4px #0000000d;--blue-950:#0a3a5c;--blue-900:#0f4c75;--blue-850:#145887;--blue-800:#1b6ca8;--blue-700:#257e90;--blue-600:#3295a9;--blue-500:#38bdf8;--blue-400:#7dd3fc;--blue-200:#bae6fd;--blue-100:#e0f2fe;--blue-50:#f0f4f8;--gray-950:#0f172a;--gray-900:#1e293b;--gray-800:#334155;--gray-700:#475569;--gray-600:#64748b;--gray-500:#94a3b8;--gray-400:#cbd5e1;--gray-300:#e2e8f0;--gray-200:#eef2f6;--gray-100:#f1f5f9;--gray-50:#f8fafc;--white:#fff;--pine-950:var(--blue-950);--pine-900:var(--blue-900);--pine-800:var(--blue-850);--pine-700:var(--blue-700);--pine-600:var(--blue-900);--pine-500:var(--blue-800);--pine-100:var(--blue-100);--pine-50:var(--blue-50);--sand-500:var(--blue-900);--sand-400:var(--blue-800);--sand-600:var(--blue-950);--sand-100:var(--blue-100);--teal-900:var(--blue-950);--teal-800:var(--blue-900);--teal-700:var(--blue-850);--teal-600:var(--blue-900);--teal-500:var(--blue-700);--teal-100:var(--blue-100);--teal-50:var(--blue-50);--green-950:var(--blue-950);--green-800:var(--blue-900);--green-600:var(--blue-900);--green-100:var(--blue-100);--ivory:var(--gray-50);--mist:var(--gray-50);--navy-900:var(--blue-900);--navy-800:var(--blue-850);--navy-600:var(--gray-600);--navy-300:var(--gray-300);--navy-100:var(--gray-100);--text-primary:var(--blue-900);--text-secondary:var(--gray-600);--shadow-card-hover:0 4px 12px #0f4c7514, 0 16px 36px #0f4c7517;--font-arabic:"Tajawal", system-ui, -apple-system, sans-serif;--font-english:"Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--text-h1:clamp(2.75rem, 5vw + 1rem, 4.5rem);--text-h2:clamp(2rem, 3.2vw + .5rem, 2.875rem);--text-h3:clamp(1.25rem, 2vw, 1.5rem);--text-body:clamp(1.0625rem, 1vw + .8rem, 1.125rem);--text-small:.875rem;--container-max:1240px;--container-gutter:1.5rem;--section-gap:clamp(4.5rem, 6vw, 7rem);--card-radius:18px;--card-radius-inner:12px;--transition-card:transform .2s ease-out, box-shadow .2s ease-out;--focus-outline:2px solid var(--blue-900);--focus-offset:3px}*,:before,:after{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:#0f4c75 #f8fafc;margin:0;padding:0}::-webkit-scrollbar-track{background:#f8fafc}::-webkit-scrollbar-thumb{background:#0f4c75;border:1.5px solid #f8fafc;border-radius:999px}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}html[lang=ar-SA],html[lang=ar]{direction:rtl}html[lang=en]{direction:ltr}body{font-size:var(--text-body);color:var(--gray-900);background-color:var(--white);line-height:1.8;font-family:var(--font-arabic);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html[lang=en] body{font-family:var(--font-english)}.skip-link{z-index:10000;background:var(--blue-900);color:var(--white);border-radius:8px;padding:.75rem 1.25rem;font-weight:600;text-decoration:none;transition:inset-block-start .2s;position:fixed;inset-block-start:-100%;inset-inline-start:1rem}.skip-link:focus{inset-block-start:1rem}h1,h2,h3,h4,h5,h6{font-family:var(--font-arabic);color:var(--blue-900);font-weight:700;line-height:1.35}html[lang=en] h1,html[lang=en] h2,html[lang=en] h3,html[lang=en] h4,html[lang=en] h5,html[lang=en] h6{font-family:var(--font-english)}h1{font-size:var(--text-h1)}h2{font-size:var(--text-h2)}h3{font-size:var(--text-h3)}p{font-size:var(--text-body);color:var(--gray-900);line-height:1.8}a{color:var(--green-600);text-decoration:none;transition:color .15s}a:hover{color:var(--green-800)}img,picture,video,canvas,svg{max-width:100%;display:block}ul,ol{list-style:none}button,input,select,textarea{font:inherit}:focus-visible{outline:var(--focus-outline);outline-offset:var(--focus-offset);border-radius:4px}.container{width:100%;max-width:var(--container-max);padding-inline:var(--container-gutter);margin-inline:auto}section:not(.tab-pane):not(.admin-pane){padding-block:var(--section-gap);scroll-margin-top:96px}.app-container section,.tab-pane,.admin-pane{padding-block:0!important;margin:0!important;padding:0!important;scroll-margin-top:0!important}.bg-white{background-color:var(--white)}.bg-gray{background-color:var(--gray-100)}.bg-dark{background-color:var(--green-950)}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.demo-label{font-size:var(--text-small);color:var(--gray-600);margin-block-start:.5rem;font-style:italic;display:inline-block}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}html{scroll-behavior:auto}}*{scrollbar-width:thin;scrollbar-color:#0f4c75 #f8fafc}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#f8fafc;border-radius:999px}::-webkit-scrollbar-thumb{background:#0f4c75 padding-box padding-box;border:1.5px solid #f8fafc;border-radius:999px;transition:background-color .2s}::-webkit-scrollbar-thumb:hover{background:#0a3a5c}::-webkit-scrollbar-corner{background:0 0}::-webkit-scrollbar-button{width:0!important;height:0!important;display:none!important}.card{background:var(--white);border:1px solid var(--gray-300);border-radius:var(--card-radius);box-shadow:var(--shadow-card);transition:var(--transition-card);overflow:hidden}.card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-4px)}.card-inner{border-radius:var(--card-radius-inner)}.btn{font-size:var(--text-body);cursor:pointer;white-space:nowrap;border:none;border-radius:12px;justify-content:center;align-items:center;gap:.5rem;min-width:44px;min-height:44px;padding:.875rem 1.75rem;font-weight:600;text-decoration:none;transition:background-color .2s,transform .15s,box-shadow .2s;display:inline-flex}.btn-primary{color:var(--white);background:linear-gradient(135deg,#0f4c75 0%,#1b6ca8 100%);box-shadow:0 4px 14px #0f4c7540}.btn-primary:hover{color:var(--white);background:linear-gradient(135deg,#145887 0%,#2080c4 100%);transform:translateY(-1px);box-shadow:0 6px 20px #0f4c7559}.btn-secondary{color:var(--blue-900);border:1.5px solid var(--blue-900);background-color:#0000}.btn-secondary:hover{background-color:var(--blue-50);color:var(--blue-900)}.btn-sand{color:var(--white);background:linear-gradient(135deg,#0f4c75 0%,#1b6ca8 100%);font-weight:700;box-shadow:0 4px 14px #0f4c7540}.btn-sand:hover{background:linear-gradient(135deg,#145887 0%,#2080c4 100%);transform:translateY(-1px);box-shadow:0 6px 20px #0f4c7559}.btn-ghost-white{color:var(--white);background-color:#0000;border:1.5px solid #ffffff73}.btn-ghost-white:hover{background-color:#ffffff26}.tag{font-size:var(--text-small);background:var(--blue-50);color:var(--blue-900);border:1px solid var(--blue-100);border-radius:100px;align-items:center;gap:.375rem;padding:.25rem .75rem;font-weight:600;display:inline-flex}.tag-sand{font-size:var(--text-small);background:var(--gray-100);color:var(--gray-800);border:1px solid var(--gray-300);border-radius:100px;align-items:center;gap:.375rem;padding:.25rem .75rem;font-weight:600;display:inline-flex}.tag-gray{background:var(--gray-100);color:var(--navy-600)}.status-chip{border-radius:100px;align-items:center;padding:.2rem .65rem;font-size:.75rem;font-weight:600;display:inline-flex}.status-approved{background:var(--teal-100);color:var(--teal-700)}.status-opened{color:var(--teal-600);background:#00a99d1f}.status-sent{background:var(--gray-100);color:var(--navy-600)}.section-label{font-size:var(--text-small);text-transform:uppercase;letter-spacing:.08em;color:var(--teal-600);margin-block-end:.75rem;font-weight:600;display:inline-block}html[lang=ar-SA] .section-label,html[lang=ar] .section-label{letter-spacing:0}.section-title{max-width:640px;margin-block-end:.5rem}.section-intro{max-width:560px;color:var(--gray-600);font-size:var(--text-body)}.reveal{opacity:0;will-change:opacity, transform;transform:translateY(24px)}.reveal.revealed{opacity:1;transform:translateY(0)}.scroll-strip{scroll-snap-type:x mandatory;cursor:grab;-webkit-overflow-scrolling:touch;gap:1.25rem;padding-block-end:1rem;scroll-padding-inline-start:var(--container-gutter);display:flex;overflow-x:auto}.scroll-strip:active{cursor:grabbing}.scroll-strip::-webkit-scrollbar{height:4px}.scroll-strip::-webkit-scrollbar-track{background:var(--gray-100);border-radius:10px}.scroll-strip::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:10px}.scroll-strip-item{scroll-snap-align:start;flex-shrink:0}.kpi-card{border-radius:var(--card-radius-inner);background:var(--white);border:1px solid #cdd4cf80;padding:1.25rem 1.5rem}.kpi-card.highlight{background:var(--teal-800);color:var(--white)}.kpi-card.highlight .kpi-label{color:#ffffffbf}.kpi-card.highlight .kpi-value{color:var(--white)}.kpi-label{font-size:var(--text-small);color:var(--gray-600);margin-block-end:.25rem}.kpi-value{color:var(--gray-900);font-family:Saudi-MoD,IBM Plex Sans Arabic,system-ui,sans-serif;font-size:1.625rem;font-weight:700}html[lang=en] .kpi-value{font-family:Inter,system-ui,sans-serif}details.faq-item{border-bottom:1px solid var(--gray-300)}details.faq-item summary{cursor:pointer;font-weight:600;font-size:var(--text-body);color:var(--gray-900);justify-content:space-between;align-items:center;gap:1rem;padding-block:1.25rem;list-style:none;display:flex}details.faq-item summary::-webkit-details-marker{display:none}details.faq-item summary:after{content:"";background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231F7A52' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:contain;flex-shrink:0;width:20px;height:20px;transition:transform .25s;display:block}details.faq-item[open] summary:after{transform:rotate(180deg)}.faq-body{color:var(--gray-600);padding-block-end:1.25rem;line-height:1.75}.progress-bar{background:var(--gray-100);border-radius:100px;height:4px;overflow:hidden}.progress-bar-fill{background:var(--teal-600);border-radius:100px;height:100%}.avatar{background:var(--green-100);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;display:flex;overflow:hidden}.steps-connector{background:var(--gray-300);flex:1;height:1px;margin-block-start:1.5rem}.steps-connector-fill{background:var(--green-600);width:0%;height:100%;transition:width .8s}
