@font-face{font-family:Tajawal;src:url('assets/Tajawal-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Tajawal;src:url('assets/Tajawal-Medium.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:Tajawal;src:url('assets/Tajawal-Bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:Tajawal;src:url('assets/Tajawal-ExtraBold.ttf') format('truetype');font-style:normal;font-weight:800;font-display:swap}
:root{--orange:#fc8422;--ink:#363436;--charcoal:#4c484a;--muted:#746f6b;--line:#e9e4df;--paper:#fbf8f4;--soft:#fff0e2;--radius:18px}
*{box-sizing:border-box}html{scroll-padding-top:28px}body{margin:0;color:var(--ink);background:white;font-family:Tajawal,Arial,sans-serif;font-weight:400;font-size:17px;line-height:1.65}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button,a{touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid #ad4a00;outline-offset:5px}button{color:inherit}img{max-width:100%;display:block}svg{display:block}.icon-defs{position:absolute;width:0;height:0;overflow:hidden}.icon{height:21px;width:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.wrap{max-width:1180px;margin-inline:auto;width:calc(100% - 96px)}
.preview-bar{background:#f1f0ee;border-bottom:1px solid #e6e4e1;color:#635e59;font-size:13px;line-height:1.2}.preview-inner{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1320px;width:calc(100% - 64px);margin:auto}.preview-label{display:flex;align-items:center;gap:8px}.preview-dot{width:6px;height:6px;border-radius:100%;background:#989087}.design-switch{display:flex;gap:5px;align-items:center;padding:4px 0}.design-switch a{padding:8px 15px;border-radius:7px;white-space:nowrap;font-weight:500}.design-switch a[aria-current]{background:white;box-shadow:0 1px 4px #32291d12;color:#413b36;font-weight:700}.design-switch a:hover{background:#ffffffaa}
.site-header{background:#fff}.header-inner{display:flex;align-items:center;min-height:100px;gap:44px}.brand{display:block;width:143px;flex-shrink:0}.brand img{width:143px;height:auto}.main-nav{display:flex;gap:32px;align-items:center;margin-inline-start:34px;font-size:16px;font-weight:500}.main-nav a{position:relative;padding:14px 0;color:#77716d}.main-nav .active{color:var(--ink);font-weight:700}.main-nav .active:after{position:absolute;bottom:5px;inset-inline-start:0;content:'';width:18px;height:3px;background:var(--orange);border-radius:3px}.owner-login{display:flex;align-items:center;gap:9px;margin-inline-start:auto;border:1px solid #d9d3cd;background:#fff;border-radius:9px;padding:9px 16px;font-size:14px;font-weight:700}.owner-login:hover{border-color:var(--charcoal);background:#faf8f5}
.hero-section{background:var(--paper);border-block:1px solid #f4eee8}.hero{display:grid;grid-template-columns:1.12fr .88fr;gap:76px;align-items:center;padding-block:36px}.eyebrow{display:flex;align-items:center;gap:9px;color:#a55214;font-size:15px;font-weight:700;margin:0 0 15px;line-height:1.4}.hero-copy .eyebrow span{height:2px;width:30px;background:var(--orange)}h1{font-weight:800;font-size:54px;letter-spacing:-1.1px;line-height:1.32;margin:0 0 18px;color:var(--ink)}h1 span{color:#d4600c}.hero-description{font-size:18px;color:#736b64;line-height:1.9;margin:0 0 24px}.primary-button{display:inline-flex;align-items:center;justify-content:center;gap:26px;border:1px solid var(--orange);border-radius:9px;background:var(--orange);color:#302718;padding:12px 22px 10px;font-weight:700;font-size:16px;min-height:49px;transition:background .15s,transform .15s}.primary-button:hover{background:#ed7616;border-color:#ed7616;transform:translateY(-1px)}.hero-visual{justify-self:end;position:relative;width:100%;max-width:384px}.bank-art{width:100%;height:auto;border-radius:19px;box-shadow:0 15px 35px #33271312}.learning-art{display:none}
.courses-section{padding-block:35px 42px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}.section-heading .eyebrow{font-size:13px;margin:0 0 6px}h2{font-size:29px;font-weight:800;line-height:1.5;margin:0;letter-spacing:-.3px}.course-note{font-size:14px;color:#82786f;margin:0 0 5px}.course-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.course-card{border:1px solid var(--line);border-radius:14px;background:#fff;padding:23px 21px 20px;display:flex;flex-direction:column;position:relative;transition:box-shadow .18s,border-color .18s,transform .18s;min-width:0}.course-card:hover{border-color:#fac292;box-shadow:0 8px 24px #50320a09;transform:translateY(-3px)}.course-symbol{background:var(--soft);color:#ae5411;border-radius:11px;height:47px;width:47px;display:flex;align-items:center;justify-content:center;margin-bottom:18px}.course-symbol svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.35}.course-content{flex:1}.course-category{font-size:12px;color:#8a7d72;margin:0 0 2px;line-height:1.7}.course-card h3{font-size:24px;font-weight:800;line-height:1.55;letter-spacing:-.4px;margin:0 0 8px}.course-description{font-size:14px;line-height:1.85;color:#7a726b;margin:0 0 22px}.course-button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px 7px;border:1px solid #e8d4c3;border-radius:7px;background:#fff;color:#a14b09;font-size:14px;font-weight:700;min-height:41px}.course-button:hover{background:var(--soft);border-color:var(--orange)}.course-button .icon{width:18px;height:18px}.site-footer{border-top:1px solid var(--line);font-size:13px;color:#8d847d}.footer-inner{min-height:65px;display:flex;align-items:center;justify-content:space-between;gap:15px}.footer-dot{padding-inline:10px;color:var(--orange)}
body[data-design=light] .hero-section{background:#fffaf4;border-top:1px solid #f7eee3;border-bottom:0}body[data-design=light] .hero{grid-template-columns:1fr 1fr;padding-block:32px 34px;gap:70px}body[data-design=light] .hero-visual{max-width:460px}body[data-design=light] .bank-art{display:none}body[data-design=light] .learning-art{display:block;width:100%;height:auto}body[data-design=light] h1{font-size:50px}body[data-design=light] .hero-description{font-size:17px}body[data-design=light] .courses-section{padding-block:30px 40px}body[data-design=light] .course-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}body[data-design=light] .course-card{display:grid;grid-template-columns:48px 1fr 104px;align-items:center;gap:20px;padding:24px}body[data-design=light] .course-symbol{margin:0;align-self:start}body[data-design=light] .course-card h3{font-size:23px;margin-bottom:5px}body[data-design=light] .course-description{margin:0;font-size:14px;line-height:1.75}body[data-design=light] .course-button{font-size:13px;padding:9px 10px 7px;white-space:nowrap}body[data-design=light] .course-button .icon{width:15px}body[data-design=light] .course-category{font-size:11px}
dialog{border:1px solid var(--line);border-radius:20px;padding:38px;width:min(500px,calc(100% - 32px));box-shadow:0 20px 100px #23180a30;color:var(--ink);font:inherit;text-align:right;max-height:calc(100dvh - 36px);overflow-y:auto}dialog::backdrop{background:#30261a85;backdrop-filter:blur(4px)}.dialog-close{position:absolute;top:15px;inset-inline-end:15px;padding:7px;border:0;background:#f3f0ec;border-radius:50%}.dialog-close .icon{width:19px;height:19px}.dialog-logo{width:118px;height:auto;margin:0 0 27px}.dialog-logo+.eyebrow{font-size:13px}dialog h2{font-size:28px}dialog p{font-size:16px;color:var(--muted)}.demo-note{font-size:13px;line-height:1.85;color:#8a7d72}.domain-preview{padding:12px 16px;margin:20px 0;background:#f8f4ef;border:1px solid var(--line);border-radius:9px;font-family:Arial,sans-serif;font-size:16px;text-align:left;color:#ab5010}.dialog-back{width:100%;margin-top:12px}.dispatch-grid:not([hidden]){display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.dispatch-grid button{display:flex;align-items:center;justify-content:space-between;gap:6px;border:1px solid var(--line);background:var(--paper);border-radius:9px;padding:13px;font-weight:700;font-size:14px}.dispatch-grid button:hover{border-color:var(--orange);background:var(--soft)}.dispatch-grid span{color:#bb5a0f}.dispatch-result{color:#a55214;font-size:14px;margin-bottom:0}
@media(min-width:1500px){.hero{padding-block:45px}.hero-visual{max-width:400px}.courses-section{padding-block:42px 48px}}
@media(max-width:1100px){.wrap{width:calc(100% - 64px)}.hero{gap:44px}.hero-visual{max-width:350px}h1{font-size:47px}.hero-description{font-size:16px}.course-grid{gap:12px}.course-card{padding:19px 16px}.course-card h3{font-size:21px}.course-description{font-size:13px}.header-inner{gap:30px}.main-nav{margin-inline-start:15px}body[data-design=light] .hero{gap:35px}body[data-design=light] .course-card{gap:14px;grid-template-columns:42px 1fr;padding:20px}body[data-design=light] .course-button{grid-column:2;width:112px;margin-top:0}body[data-design=light] .course-symbol{width:42px;height:42px}body[data-design=light] .course-card h3{font-size:22px}}
@media(max-width:760px){.wrap{width:calc(100% - 40px)}.preview-inner{width:calc(100% - 28px);min-height:48px;gap:10px}.preview-label{font-size:11px}.preview-dot{display:none}.design-switch{gap:2px}.design-switch a{padding:7px 9px;font-size:11px}.header-inner{min-height:84px;gap:20px}.brand,.brand img{width:119px}.main-nav{margin-inline-start:5px;gap:22px;font-size:14px}.owner-login{font-size:12px;padding:8px 10px;gap:6px}.owner-login .icon{width:17px;height:17px}.hero,body[data-design=light] .hero{gap:22px;padding-block:28px;grid-template-columns:1fr 1fr}.hero-visual{max-width:290px}h1,body[data-design=light] h1{font-size:35px;line-height:1.4;letter-spacing:-.5px}.eyebrow{font-size:12px;margin-bottom:11px}.hero-copy .eyebrow span{width:20px}.hero-description,body[data-design=light] .hero-description{font-size:14px;line-height:1.85;margin-bottom:17px}.desktop-break{display:none}.primary-button{font-size:14px;padding:9px 16px 7px;min-height:43px;gap:18px}.hero-visual .bank-art{border-radius:14px}.courses-section,body[data-design=light] .courses-section{padding-block:28px 32px}.section-heading{margin-bottom:19px;gap:15px}h2{font-size:24px}.course-note{font-size:12px}.course-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.course-card{padding:20px}.course-card h3{font-size:24px}.course-category{font-size:12px}.course-description{font-size:14px}.course-symbol{margin-bottom:12px}.course-button{font-size:14px}body[data-design=light] .course-card{grid-template-columns:40px 1fr;gap:12px;padding:18px}body[data-design=light] .course-card h3{font-size:21px}body[data-design=light] .course-description{font-size:13px}body[data-design=light] .course-symbol{width:40px;height:40px}body[data-design=light] .course-button{grid-column:1/-1;width:100%;margin-top:5px}}
@media(max-width:520px){.wrap{width:calc(100% - 36px)}.preview-inner{min-height:67px;flex-direction:column;justify-content:center;gap:4px;padding:6px 0}.preview-label{font-size:11px;line-height:1.2}.design-switch{padding:0}.design-switch a{font-size:12px;padding:6px 13px}.header-inner{min-height:83px;gap:12px}.brand,.brand img{width:112px}.main-nav{display:none}.owner-login{font-size:12px;padding:7px 10px}.hero,body[data-design=light] .hero{grid-template-columns:1fr;gap:25px;padding-block:31px 26px;text-align:center}.hero-copy .eyebrow{justify-content:center;font-size:12px}.hero-copy .eyebrow span{width:21px}h1,body[data-design=light] h1{font-size:40px;line-height:1.3;margin-bottom:14px;letter-spacing:-.7px}.hero-description,body[data-design=light] .hero-description{font-size:15px;line-height:1.85;max-width:330px;margin:0 auto 18px}.primary-button{font-size:14px;min-height:43px}.hero-visual{justify-self:center;max-width:275px;width:80%}.hero-visual .bank-art{border-radius:14px;box-shadow:0 9px 25px #33271312}body[data-design=light] .hero-visual{width:90%;max-width:325px}body[data-design=light] .hero{gap:19px;padding-bottom:22px}body[data-design=light] .learning-art{max-height:220px;object-fit:contain}.courses-section,body[data-design=light] .courses-section{padding-block:26px 30px}.section-heading{display:block;margin-bottom:19px}.section-heading .eyebrow{font-size:12px;margin-bottom:5px}h2{font-size:25px}.course-note{font-size:12px;margin:5px 0 0}.course-grid,body[data-design=light] .course-grid{grid-template-columns:1fr;gap:13px}.course-card{display:grid;grid-template-columns:44px 1fr;gap:12px 15px;padding:19px}.course-symbol{width:44px;height:44px;margin:2px 0 0}.course-symbol svg{width:26px;height:26px}.course-card h3{font-size:23px;margin-bottom:6px}.course-category{font-size:11px}.course-description{font-size:14px;margin:0;line-height:1.8}.course-button{grid-column:2;width:100%;margin-top:0;font-size:13px;min-height:38px;padding:7px 11px 5px}.course-content{min-width:0}body[data-design=light] .course-card{padding:19px;grid-template-columns:44px 1fr;gap:12px 15px}body[data-design=light] .course-symbol{width:44px;height:44px}body[data-design=light] .course-card h3{font-size:23px}body[data-design=light] .course-description{font-size:14px}body[data-design=light] .course-button{grid-column:2;margin:0}.footer-inner{min-height:64px;font-size:11px}.footer-dot{padding-inline:5px}dialog{padding:30px 23px}.dispatch-grid:not([hidden]){grid-template-columns:1fr}dialog .primary-button{font-size:13px}}
.hero{grid-template-columns:1fr 1fr;gap:60px;padding-block:30px}.hero-visual{max-width:340px;justify-self:center}.hero-description{color:#625c57}.course-description{color:#655e58}.course-note{color:#71665d}.course-category{display:none}.course-button{min-height:44px}.course-symbol{color:#a34a0a}.hero-description,.course-description{font-weight:500}
@media(min-width:1500px){.hero{padding-block:32px}.hero-visual{max-width:340px}.courses-section{padding-block:34px 40px}}
@media(max-width:760px){.hero{gap:22px;padding-block:28px}.hero-visual{max-width:290px}.course-button{min-height:44px}.owner-login{min-height:40px}}
@media(max-width:520px){.hero,body[data-design=light] .hero{grid-template-columns:1fr;padding-block:26px 22px;gap:19px}h1,body[data-design=light] h1{font-size:36px}.hero-visual{max-width:220px}body[data-design=light] .learning-art{max-height:175px}.hero-description,body[data-design=light] .hero-description{font-size:15px}.course-button{min-height:44px}}
[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}