:root{ --void:#F7F4EF;--warm:#FAF8F4;--parch:#E8E4DC; --ember-h:15; --ember:hsl(var(--ember-h),92%,47%); --ember-dim:hsl(var(--ember-h),92%,37%); --ember-sec:hsl(var(--ember-h),65%,53%); --ember-pale:hsl(var(--ember-h),90%,91%); --ember-ghost:hsla(var(--ember-h),92%,47%,0.06); --base-radius:4px; --site-gap:24px; --silver:#787878;--silver-l:#B33508;--silver-d:#3A3A3A; --ink:#141414;--ink2:#1A1A1A;--ink3:#3A3A3A;--ink-soft:#787878; --border:rgba(20,20,20,0.12);--border2:rgba(20,20,20,0.22); --surf:rgba(20,20,20,0.04);--glass:rgba(255,255,255,0.7); --dk0:#0A0A0A;--dk1:#0E0E0E;--dk2:#161616;--dk3:#1E1E1E; --dkt:#F7F4EF;--dkm:rgba(247,244,239,0.55);--dks:#787878}:root{--ember:#E8450A;--ember-dim:#B33508;--ember-sec:#D4563A;--ember-pale:#FDDDD4; --void:#F7F4EF;--warm:#FAF8F4;--parch:#E8E4DC;--ink:#141414;--ink-soft:#787878; --border:rgba(20,20,20,0.12);--border2:rgba(20,20,20,0.22);--surf:rgba(20,20,20,0.04); --dk0:#0A0A0A;--dk1:#0E0E0E;--dk2:#161616;--dkt:#F7F4EF;--dkm:rgba(247,244,239,0.55);--dks:#787878}:root{ --ember:#E8450A;--ember-dim:#B33508;--ember-sec:#D4563A;--ember-pale:#FDDDD4; --void:#F7F4EF;--warm:#FAF8F4;--parch:#E8E4DC; --ink:#141414;--ink-soft:#787878; --border:rgba(20,20,20,0.12);--border2:rgba(20,20,20,0.22); --surf:rgba(20,20,20,0.04); --dk0:#0A0A0A;--dk1:#0E0E0E;--dk2:#161616; --dkt:#F7F4EF;--dkm:rgba(247,244,239,0.55);--dks:#787878}:root{ --ember:#E8450A;--ember-dim:#B33508;--ember-sec:#D4563A;--ember-pale:#FDDDD4; --void:#F7F4EF;--warm:#FAF8F4;--parch:#E8E4DC;--ink:#141414;--ink-soft:#787878; --border:rgba(20,20,20,0.12);--border2:rgba(20,20,20,0.22);--surf:rgba(20,20,20,0.04); --dk0:#0A0A0A;--dk1:#0E0E0E;--dk2:#161616;--dkt:#F7F4EF;--dkm:rgba(247,244,239,0.55);--dks:#787878; --hex-w:220px;--hex-h:220px}:root{ --ember:#E8450A;--ember-dim:#B33508;--ember-sec:#D4563A;--ember-pale:#FDDDD4; --void:#F7F4EF;--warm:#FAF8F4;--parch:#E8E4DC;--ink:#141414;--ink-soft:#787878; --border:rgba(20,20,20,.12);--border2:rgba(20,20,20,.22);--surf:rgba(20,20,20,.04); --dk0:#0A0A0A;--dk1:#0E0E0E;--dk2:#161616;--dkt:#F7F4EF;--dkm:rgba(247,244,239,.55);--dks:#787878}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;overflow-x:hidden} body{font-family:'IBM Plex Sans Arabic','IBM Plex Mono',sans-serif;background:var(--void);color:var(--ink);overflow-x:hidden;cursor:none;max-width:100vw;-webkit-text-size-adjust:100%} img,svg,video,canvas{max-width:100%;height:auto} ::selection{background:var(--ember);color:var(--void)} #cd,#cr{position:fixed;border-radius:50%;pointer-events:none;z-index:9999;top:0;left:0} #cd{width:5px;height:5px;background:var(--ember);transform:translate(-50%,-50%);transition:width .15s,height .15s} #cr{width:32px;height:32px;border:1px solid var(--ember-sec);transform:translate(-50%,-50%);transition:width .3s,height .3s,border-color .3s;opacity:.7} body:has(a:hover) #cr,body:has(button:hover) #cr{width:50px;height:50px;border-color:var(--ember);opacity:1} #prog{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--ember-dim),var(--ember),var(--ember-pale));z-index:9998;transition:width .08s} .tex{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.018;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px} nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:26px 60px;display:flex;align-items:center;justify-content:space-between;direction:rtl;transition:padding .4s,background .4s,border-color .4s;border-bottom:1px solid transparent} nav.sc{padding:14px 60px;background:rgba(247,244,239,.94);backdrop-filter:blur(16px);border-color:var(--border)} .nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;background:none;border:none;z-index:200} .nav-hamburger span{display:block;width:22px;height:2px;background:var(--ember);transition:all .3s ease;transform-origin:center} .nav-hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)} .nav-hamburger.active span:nth-child(2){opacity:0;transform:scaleX(0)} .nav-hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)} .nb{display:flex;align-items:center;gap:12px} .nar{font-family:'Noto Kufi Arabic',sans-serif;font-size:18px;font-weight:700;color:var(--ember)} .nsep{width:1px;height:18px;background:var(--ember-sec);opacity:.3} .nen{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;color:var(--ember-dim);direction:ltr} .nl{display:flex;gap:32px;list-style:none} .nl a{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;color:var(--ink-soft);text-decoration:none;text-transform:uppercase;transition:color .25s} .nl a:hover{color:var(--ember)} .ncta{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;padding:9px 22px;border:1px solid var(--ember);color:var(--ember);background:transparent;cursor:none;text-transform:uppercase;transition:background .3s,color .3s} .ncta:hover{background:var(--ember);color:var(--void)} .sec{padding:100px 80px;position:relative;z-index:1} .sl{background:var(--void)} .sw2{background:var(--warm)} .sp{background:var(--parch)} .sd{background:var(--dk1);color:var(--dkt)} .sd2{background:var(--dk2);color:var(--dkt)} .sd0{background:var(--dk0);color:var(--dkt)} .sh{display:flex;align-items:center;gap:20px;margin-bottom:72px;direction:ltr} .shn{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;color:var(--ember);opacity:.6} .shr{flex:1;height:1px;background:var(--border)} .sht{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;color:var(--ink-soft);text-transform:uppercase} .sd .shr,.sd2 .shr,.sd0 .shr{background:rgba(247,244,239,.1)} .sd .sht,.sd2 .sht,.sd0 .sht{color:var(--dkm)} .sd .shn,.sd2 .shn,.sd0 .shn{color:var(--dks)} .rv{opacity:0;transform:translateX(30px);transition:opacity .7s,transform .7s} .ru{opacity:0;transform:translateY(28px);transition:opacity .7s,transform .7s} .rv.on,.ru.on{opacity:1;transform:none} .hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:120px 60px 100px;background:var(--void)} .hero-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1} .hero > *:not(.hero-canvas):not(.hg){position:relative;z-index:2} .hg{position:absolute;inset:0;background:radial-gradient(ellipse 70% 55% at 50% 85%,rgba(232,69,10,.07) 0%,transparent 70%),linear-gradient(180deg,var(--void) 0%,var(--warm) 100%);pointer-events:none;z-index:0} .heyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;color:var(--ember);text-transform:uppercase;direction:ltr;margin-bottom:52px;opacity:0;animation:ru .9s .2s ease forwards} .hsym{margin-bottom:40px;opacity:0;animation:ru 1.1s .4s ease forwards} .hwm{text-align:center;opacity:0;animation:ru 1.1s .6s ease forwards} .hwar{font-family:'Noto Kufi Arabic',sans-serif;font-size:clamp(72px,11vw,140px);font-weight:700;color:var(--ink);letter-spacing:-4px;line-height:.9;direction:rtl} .hwar span{color:var(--ember)} .hwen{font-family:'IBM Plex Mono',monospace;font-size:clamp(13px,1.6vw,21px);font-weight:300;letter-spacing:14px;color:var(--ember-dim);direction:ltr;margin-top:14px} .hrule{width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--ember-dim),transparent);margin:44px auto;opacity:0;animation:fi .9s .9s ease forwards} .htag{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:clamp(14px,1.7vw,18px);color:var(--ink-soft);text-align:center;line-height:2.1;max-width:500px;direction:rtl;opacity:0;animation:ru .9s 1.1s ease forwards} .hsub{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;color:rgba(20,20,20,.28);direction:ltr;text-transform:uppercase;margin-top:10px;opacity:0;animation:ru .9s 1.3s ease forwards} .hscroll{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;animation:fi 1s 1.7s ease forwards} .hst{width:1px;height:44px;overflow:hidden} .hsd{width:1px;height:100%;background:var(--ember-dim);animation:sdrop 2.2s ease-in-out infinite;transform-origin:top} .hsl{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;color:rgba(20,20,20,.28);text-transform:uppercase;direction:ltr} .wv-pulse{animation:wvPulse 3.5s ease-in-out infinite} .pattern-demo{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;overflow:hidden} .fr-label,.es-title,.es-desc,.fg-label,.submit-btn,.fg-input,.fg-select,.fg-textarea{word-break:keep-all;overflow-wrap:break-word} .es-cta{white-space:nowrap} .icon-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:2px} .icon-cell{padding:28px 20px;display:flex;flex-direction:column;align-items:center;gap:12px;border:1px solid var(--border);background:var(--void);cursor:default;transition:border-color .3s,background .3s} .icon-cell:hover{border-color:var(--ember);background:var(--warm)} .ic-name{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:1px;color:var(--ink-soft);text-transform:uppercase;direction:ltr;text-align:center} .chart-demo{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .chart-card{background:var(--void);border:1px solid var(--border);padding:28px} .chart-title{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;color:var(--ember);margin-bottom:20px;direction:ltr;text-transform:uppercase} .bar-chart{display:flex;align-items:flex-end;gap:8px;height:120px} .bar{flex:1;border-radius:2px 2px 0 0;transition:opacity .3s;cursor:default} .bar:hover{opacity:.8} .bar-label{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);text-align:center;margin-top:6px;direction:ltr} .bar-chart>div{height:100%;justify-content:flex-end;display:flex;flex-direction:column;align-items:center;flex:1} .bar-chart>div>.bar{flex:none;width:70%} .photo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px} .photo-cell{height:180px;position:relative;overflow:hidden} .photo-overlay{position:absolute;inset:0;background:rgba(232,69,10,.2)} .photo-rule{display:flex;align-items:flex-start;gap:16px;padding:16px 20px;border:1px solid var(--border);background:var(--void);direction:rtl} .pr-num{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ember);direction:ltr;margin-top:2px;flex-shrink:0} .pr-title{font-family:'Noto Kufi Arabic',sans-serif;font-size:13px;color:var(--ink);margin-bottom:4px;font-weight:700} .pr-desc{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:12px;color:var(--ink-soft);line-height:1.8} .dash-wrap{border:1px solid var(--border);border-radius:4px;overflow:hidden;background:var(--void)} .dash-chrome{background:var(--warm);padding:11px 18px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border)} .dc-dots{display:flex;gap:6px} .dc-dot{width:10px;height:10px;border-radius:50%} .dc-url{flex:1;background:var(--parch);border:1px solid var(--border);border-radius:20px;padding:5px 14px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);direction:ltr;text-align:center} .dash-body{display:grid;grid-template-columns:200px 1fr;min-height:480px} .dash-sidebar{background:var(--ink);padding:24px 0;display:flex;flex-direction:column;gap:0} .ds-logo{padding:0 20px 24px;border-bottom:1px solid rgba(247,244,239,.1);margin-bottom:16px} .ds-item{padding:12px 20px;display:flex;align-items:center;gap:10px;cursor:default;transition:background .2s;direction:rtl} .ds-item:hover{background:rgba(247,244,239,.06)} .ds-item.act{background:rgba(247,244,239,.12);border-right:2px solid var(--ember-pale)} .ds-icon{width:16px;height:16px;flex-shrink:0} .ds-label{font-family:'Noto Kufi Arabic',sans-serif;font-size:12px;color:var(--ember-pale)} .dash-main{padding:32px;display:flex;flex-direction:column;gap:20px} .dst{background:var(--warm);border:1px solid var(--border);padding:16px;direction:rtl} .dst-num{font-family:'DM Serif Display',serif;font-size:24px;color:var(--ember);font-weight:400} .dst-label{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:12px;color:var(--ink-soft);margin-top:4px} .dst-change{font-family:'IBM Plex Mono',monospace;font-size:12px;margin-top:6px;direction:ltr} .dmc-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;color:var(--ember);margin-bottom:12px;direction:ltr;text-transform:uppercase} .dmt-head{display:grid;grid-template-columns:1fr 80px 80px;padding:10px 16px;border-bottom:1px solid var(--border);direction:rtl} .dmt-hcell{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:1px;color:var(--ink-soft);text-transform:uppercase} .dmt-row{display:grid;grid-template-columns:1fr 80px 80px;padding:10px 16px;border-bottom:1px solid var(--border);direction:rtl;cursor:default;transition:background .2s} .dmt-row:hover{background:var(--parch)} .dmt-row:last-child{border-bottom:none} .dmt-name{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:12px;color:var(--ink)} .dmt-val{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);text-align:center} .dmt-status{font-family:'IBM Plex Mono',monospace;font-size:12px;text-align:center;padding:3px 8px;border-radius:1px;direction:ltr;display:inline-block} .s-done{background:rgba(28,122,85,.08);color:#1C7A55} .s-prog{background:rgba(232,69,10,.1);color:var(--ember-dim)} .s-pen{background:var(--surf);color:var(--ink-soft)} .form-demo{display:grid;grid-template-columns:1fr 1fr;gap:40px} .form-group{display:flex;flex-direction:column;gap:20px} .fg-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;color:var(--ember);text-transform:uppercase;direction:ltr;margin-bottom:4px} .fg-input{border:none;border-bottom:1px solid var(--border2);background:transparent;padding:10px 0;font-family:'IBM Plex Sans Arabic',sans-serif;font-size:15px;color:var(--ink);direction:rtl;outline:none;width:100%;transition:border-color .25s} .fg-input:focus{border-color:var(--ember)} .fg-input::placeholder{color:rgba(20,20,20,.3);font-size:14px} .fg-select{border:1px solid var(--border);padding:10px 14px;font-family:'IBM Plex Sans Arabic',sans-serif;font-size:14px;color:var(--ink);direction:rtl;background:var(--void);outline:none;width:100%;appearance:none;cursor:none} .fg-textarea{border:1px solid var(--border);padding:12px;font-family:'IBM Plex Sans Arabic',sans-serif;font-size:14px;color:var(--ink);direction:rtl;background:var(--void);outline:none;width:100%;resize:vertical;min-height:100px;line-height:1.8;transition:border-color .25s} .fg-textarea:focus,.fg-select:focus{border-color:var(--ember)} .fg-radio{display:flex;gap:20px;flex-wrap:wrap} .fr-item{display:flex;align-items:center;gap:8px;cursor:none;direction:rtl} .fr-dot{width:16px;height:16px;border:1.5px solid var(--border2);border-radius:50%;position:relative;flex-shrink:0} .fr-dot.sel{border-color:var(--ember)} .fr-dot.sel::after{content:'';position:absolute;inset:3px;background:var(--ember);border-radius:50%} .fr-label{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:13px;color:var(--ink)} .fg-check{display:flex;align-items:center;gap:8px;cursor:none;direction:rtl} .fc-box{width:16px;height:16px;border:1.5px solid var(--border2);position:relative;flex-shrink:0;transition:border-color .2s} .fc-box.chk{border-color:var(--ember);background:var(--ember)} .fc-box.chk::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:white} .submit-btn{background:var(--ember);color:var(--void);border:none;padding:14px 32px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;cursor:none;text-transform:uppercase;transition:background .3s;direction:ltr} .submit-btn:hover{background:var(--ember-dim)} .empty-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px} .empty-cell{padding:48px 28px;display:flex;flex-direction:column;align-items:center;gap:16px;border:1px solid var(--border);background:var(--void);text-align:center;direction:rtl} .es-illo{width:64px;height:64px;display:flex;align-items:center;justify-content:center} .es-title{font-family:'Noto Kufi Arabic',sans-serif;font-size:14px;color:var(--ink)} .es-desc{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:12px;color:var(--ink-soft);line-height:1.8} .es-cta{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;color:var(--ember);border:1px solid var(--ember);padding:8px 16px;text-transform:uppercase;cursor:none;background:none;transition:background .25s,color .25s} .es-cta:hover{background:var(--ember);color:var(--void);border-color:var(--ember)} .toast{display:flex;align-items:flex-start;gap:12px;padding:14px 18px;border-left:3px solid;direction:rtl} .ob-wrap{background:var(--dk1);border-radius:4px;overflow:hidden;padding:0} .ob-header{padding:24px 32px;border-bottom:1px solid rgba(247,244,239,.08);display:flex;align-items:center;justify-content:space-between;direction:rtl} .ob-steps{display:flex;gap:8px;direction:ltr} .ob-step{width:28px;height:3px;border-radius:2px;background:rgba(247,244,239,.15);transition:background .3s} .ob-step.act{background:var(--ember-pale)} .ob-step.done{background:var(--ember-sec)} .ob-skip{font-family:'IBM Plex Mono',monospace;font-size:12px;color:rgba(247,244,239,.3);letter-spacing:1px;background:none;border:none;cursor:none;text-transform:uppercase;direction:ltr} .ob-panels{display:grid;grid-template-columns:repeat(4,1fr);gap:0} .ob-panel{padding:48px 32px;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;position:relative} .ob-panel::after{content:'';position:absolute;top:50%;right:0;width:1px;height:40%;transform:translateY(-50%);background:rgba(247,244,239,.08)} .ob-panel:last-child::after{display:none} .ob-num{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ember-pale);opacity:.5;direction:ltr;letter-spacing:2px} .ob-illo{width:56px;height:56px;display:flex;align-items:center;justify-content:center} .ob-title{font-family:'Noto Kufi Arabic',sans-serif;font-size:14px;font-weight:700;color:var(--dkt)} .ob-desc{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:12px;color:var(--dkm);line-height:1.8;direction:rtl} .err-page{background:var(--dk0);padding:0;text-align:center;border:1px solid rgba(247,244,239,.06);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:560px;position:relative;overflow:hidden;gap:0} .err-page::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 80%,rgba(232,69,10,.06) 0%,transparent 70%);pointer-events:none} .err-code{font-family:'DM Serif Display',serif;font-size:180px;font-weight:400;color:rgba(232,69,10,.04);line-height:1;direction:ltr;position:absolute;top:20px;right:40px;pointer-events:none;z-index:0} .err-ember-wrap{position:relative;z-index:1;margin-bottom:32px} .err-ember-particles{position:absolute;inset:-40px;pointer-events:none} .err-ember-dot{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--ember);opacity:0;animation:emberFloat 4s ease-in-out infinite} .err-ember-dot:nth-child(1){left:20%;top:10%;animation-delay:0s} .err-ember-dot:nth-child(2){left:70%;top:5%;animation-delay:.8s;width:3px;height:3px} .err-ember-dot:nth-child(3){left:40%;top:80%;animation-delay:1.6s;width:2px;height:2px} .err-ember-dot:nth-child(4){left:85%;top:60%;animation-delay:2.4s;width:3px;height:3px} .err-ember-dot:nth-child(5){left:10%;top:50%;animation-delay:3.2s;width:2px;height:2px} .err-ember-dot:nth-child(6){left:55%;top:15%;animation-delay:1.2s} .err-ember-dot:nth-child(7){left:30%;top:40%;animation-delay:2s;width:2px;height:2px} .err-ember-dot:nth-child(8){left:65%;top:85%;animation-delay:3.6s;width:3px;height:3px} .err-glow{position:absolute;width:200px;height:200px;background:radial-gradient(circle,rgba(232,69,10,.15) 0%,transparent 70%);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);animation:errGlow 3s ease-in-out infinite alternate;pointer-events:none} .err-title{font-family:'Noto Kufi Arabic',sans-serif;font-size:30px;font-weight:700;color:var(--dkt);direction:rtl;margin-top:0;position:relative;z-index:1;letter-spacing:-1px} .err-subtitle{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;color:var(--dks);direction:ltr;text-transform:uppercase;margin-top:12px;position:relative;z-index:1;opacity:.5} .err-desc{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:15px;color:var(--dkm);direction:rtl;max-width:420px;line-height:2;margin-top:8px;position:relative;z-index:1} .err-divider{width:48px;height:1px;background:linear-gradient(90deg,transparent,var(--ember-sec),transparent);margin:28px 0;position:relative;z-index:1;opacity:.4} .err-cta{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;padding:14px 32px;background:var(--ember);color:var(--void);border:none;cursor:pointer;text-transform:uppercase;transition:all .3s;direction:ltr;position:relative;z-index:1;letter-spacing:3px} .err-cta:hover{background:var(--ember-dim);transform:translateY(-2px);box-shadow:0 8px 30px rgba(232,69,10,.25)} .err-hint{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;color:rgba(247,244,239,.15);direction:ltr;margin-top:24px;position:relative;z-index:1;text-transform:uppercase} .toggle-demo{display:grid;grid-template-columns:1fr 1fr;gap:2px} .tg-cell{padding:40px;display:flex;flex-direction:column;gap:20px} .tg-switch{display:flex;align-items:center;gap:14px;direction:ltr} .tg-track{width:44px;height:24px;border-radius:12px;background:var(--border);position:relative;cursor:none;transition:background .3s} .tg-track.on{background:var(--ember)} .tg-knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:white;transition:transform .3s;box-shadow:0 1px 3px rgba(0,0,0,.15)} .tg-track.on .tg-knob{transform:translateX(20px)} .tg-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;text-transform:uppercase} .story-wrap{position:relative;padding:0} .story-timeline{position:absolute;top:0;bottom:0;left:80px;width:1px;background:var(--border);direction:ltr} .story-dot{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--ember);left:-4px;border:2px solid var(--void)} .story-item{display:grid;grid-template-columns:120px 1fr;gap:40px;padding:48px 0;border-bottom:1px solid var(--border);align-items:center;direction:rtl;word-break:break-word;overflow-wrap:break-word} .si-desc,.si-title{word-break:keep-all;overflow-wrap:break-word} .story-item:last-child{border-bottom:none} .si-year{font-family:'DM Serif Display',serif;font-size:32px;color:rgba(232,69,10,.12);direction:ltr;text-align:center} .si-tag{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;color:var(--ember);margin-bottom:8px;direction:ltr;text-transform:uppercase} .si-title{font-family:'Noto Kufi Arabic',sans-serif;font-size:18px;font-weight:700;color:var(--ink);margin-bottom:8px} .si-desc{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:13px;color:var(--ink-soft);line-height:1.9} .comp-map-wrap{position:relative;height:400px;border:1px solid var(--border);overflow:hidden;background:var(--void)} .cm-axis-x,.cm-axis-y{position:absolute;background:var(--border)} .cm-axis-x{left:0;right:0;top:50%;height:1px} .cm-axis-y{top:0;bottom:0;left:50%;width:1px} .cm-label{position:absolute;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:1px;color:var(--ink-soft);text-transform:uppercase} .cm-dot{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:5px;cursor:default} .cm-circle{border-radius:50%;border:2px solid} .cm-name{font-family:'IBM Plex Mono',monospace;font-size:12px;white-space:nowrap} .wahaj-dot .cm-circle{background:var(--ember);border-color:var(--ember);box-shadow:0 0 0 6px rgba(232,69,10,.12)} .wahaj-dot .cm-name{color:var(--ember);font-weight:500} .gov-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px} .gov-card{padding:36px 28px;border:1px solid var(--border);background:var(--void);direction:rtl;position:relative;overflow:hidden;cursor:default;transition:border-color .3s} .gov-card:hover{border-color:var(--ember)} .gov-card::after{content:'';position:absolute;bottom:0;right:0;width:0;height:2px;background:var(--ember);transition:width .4s} .gov-card:hover::after{width:100%} .gc-num{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ember);direction:ltr;margin-bottom:16px} .gc-title{font-family:'Noto Kufi Arabic',sans-serif;font-size:14px;letter-spacing:.5px;color:var(--ink);margin-bottom:10px;font-weight:700} .gc-body{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:13px;color:var(--ink-soft);line-height:1.9} .prop-wrap{border:1px solid var(--border);overflow:hidden;background:var(--void);max-width:860px} .prop-cover{background:var(--ember);padding:48px 56px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;min-height:260px} .prop-cover::after{content:'';position:absolute;bottom:-60px;left:-30px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.04);pointer-events:none} .prop-cover::before{content:'';position:absolute;top:-80px;right:-40px;width:250px;height:250px;border-radius:50%;background:rgba(255,255,255,.03);pointer-events:none} .prop-cover-top{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:1} .prop-cover-logo{display:flex;align-items:center;gap:14px;direction:rtl} .prop-cover-logo svg{flex-shrink:0} .prop-cover-brand{font-family:'Noto Kufi Arabic',sans-serif;font-size:20px;font-weight:700;color:var(--void)} .prop-cover-sub{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;color:rgba(247,244,239,.5);direction:ltr;margin-top:2px} .prop-cover-meta{text-align:left;direction:ltr;position:relative;z-index:1} .prop-cover-badge{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;color:rgba(247,244,239,.45);border:1px solid rgba(247,244,239,.15);padding:5px 12px;text-transform:uppercase;display:inline-block;margin-bottom:12px} .prop-cover-client{font-family:'IBM Plex Mono',monospace;font-size:12px;color:rgba(247,244,239,.35);line-height:1.9} .prop-cover-main{position:relative;z-index:1;text-align:center;margin:32px 0 0} .prop-cover-title{font-family:'Noto Kufi Arabic',sans-serif;font-size:36px;font-weight:700;color:var(--void);letter-spacing:-1px;line-height:1.3} .prop-cover-en{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;color:var(--ember-pale);direction:ltr;margin-top:8px;opacity:.5} .prop-cover-line{width:48px;height:1px;background:rgba(247,244,239,.25);margin:16px auto 0} .prop-body{padding:40px 56px 48px} .prop-sec{margin-bottom:32px} .prop-sec:last-child{margin-bottom:0} .prop-sec-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;color:var(--ember);direction:ltr;margin-bottom:10px;text-transform:uppercase} .prop-sec-title{font-family:'Noto Kufi Arabic',sans-serif;font-size:16px;font-weight:700;color:var(--ink);direction:rtl;margin-bottom:12px} .prop-sec-text{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:13px;color:var(--ink-soft);direction:rtl;line-height:2.1} .prop-tbl{width:100%;border-collapse:collapse;margin-top:12px} .prop-tbl thead th{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;color:var(--ink-soft);text-transform:uppercase;padding:10px 16px;text-align:right;border-bottom:2px solid var(--border);direction:ltr} .prop-tbl thead th:last-child{text-align:center} .prop-tbl tbody td{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:13px;color:var(--ink);padding:14px 16px;border-bottom:1px solid var(--border);direction:rtl;vertical-align:top} .prop-tbl tbody td:last-child{text-align:center;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);direction:ltr} .prop-tbl tbody tr{transition:background .2s} .prop-tbl tbody tr:hover{background:var(--warm)} .prop-tbl .total-row td{background:var(--ember);color:var(--void);font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:500;padding:14px 16px;letter-spacing:1px} .prop-tbl .total-row td:last-child{font-weight:700;font-size:14px} .prop-footer{display:flex;justify-content:space-between;align-items:center;padding:20px 56px;background:var(--warm);border-top:1px solid var(--border)} .prop-footer-left{direction:rtl;display:flex;align-items:center;gap:10px} .prop-footer-logo{font-family:'Noto Kufi Arabic',sans-serif;font-size:14px;font-weight:700;color:var(--ember)} .prop-footer-sep{width:1px;height:16px;background:var(--border)} .prop-footer-text{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);letter-spacing:1px;direction:ltr} .prop-footer-right{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);letter-spacing:1px;direction:ltr} .prop-phase-row td:first-child{display:flex;align-items:center;gap:10px;direction:rtl} .prop-phase-num{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ember);background:var(--ember-ghost);padding:3px 8px;border-radius:2px;letter-spacing:1px;direction:ltr;flex-shrink:0} .milestone-wrap{padding:48px;background:var(--void);border:1px solid var(--border)} .ms-header{direction:rtl;margin-bottom:40px} .ms-client{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;color:var(--ember);direction:ltr;margin-bottom:8px} .ms-title{font-family:'Noto Kufi Arabic',sans-serif;font-size:22px;font-weight:700;color:var(--ink)} .ms-timeline{position:relative} .ms-line{position:absolute;top:20px;left:0;right:0;height:2px;background:var(--border)} .ms-fill{position:absolute;top:0;left:0;height:2px;background:var(--ember);transition:width 1s ease} .ms-nodes{display:flex;justify-content:space-between;position:relative} .ms-node{display:flex;flex-direction:column;align-items:center;gap:10px;cursor:default} .ms-dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--border);background:var(--void);position:relative;z-index:1;transition:border-color .3s,background .3s} .ms-dot.done{border-color:var(--ember);background:var(--ember)} .ms-dot.act{border-color:var(--ember-dim);background:var(--void);box-shadow:0 0 0 4px rgba(232,69,10,.12)} .ms-week{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);direction:ltr} .ms-name{font-family:'Noto Kufi Arabic',sans-serif;font-size:12px;color:var(--ink-soft);margin-top:4px;text-align:center;max-width:100px;white-space:nowrap} .ty-card{background:var(--ember);padding:64px;text-align:center;position:relative;overflow:hidden} .ty-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(212,86,58,.15) 0%,transparent 60%)} .ty-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;color:rgba(247,244,239,.4);direction:ltr;margin-bottom:28px;text-transform:uppercase} .ty-title{font-family:'Noto Kufi Arabic',sans-serif;font-size:44px;font-weight:700;color:var(--void);direction:rtl;line-height:1.2;margin-bottom:16px;letter-spacing:-2px} .ty-en{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:3px;color:var(--ember-pale);direction:ltr;opacity:.6;margin-bottom:32px} .ty-divider{width:60px;height:1px;background:rgba(247,244,239,.2);margin:0 auto 32px} .ty-body{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:15px;color:rgba(247,244,239,.7);direction:rtl;max-width:500px;margin:0 auto;line-height:2} .ty-cert{background:rgba(247,244,239,.06);border:1px solid rgba(247,244,239,.12);padding:28px 40px;max-width:480px;margin:32px auto 0;direction:rtl} .ty-cert-label{font-family:'IBM Plex Mono',monospace;font-size:12px;color:rgba(247,244,239,.3);letter-spacing:2px;direction:ltr;margin-bottom:12px} .ty-cert-text{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:13px;color:rgba(247,244,239,.6);line-height:1.9} .ty-sign{font-family:'IBM Plex Mono',monospace;font-size:16px;color:var(--ember-pale);direction:ltr;margin-top:16px} .nl-wrap{max-width:600px;border:1px solid var(--border);overflow:hidden} .nl-header{background:var(--ember);padding:32px 40px;display:flex;align-items:center;gap:14px} .nl-hl{width:1px;height:24px;background:rgba(247,244,239,.2)} .nl-brand{font-family:'IBM Plex Mono',monospace;font-size:14px;letter-spacing:3px;color:var(--ember-pale);direction:ltr} .nl-issue{font-family:'IBM Plex Mono',monospace;font-size:12px;color:rgba(247,244,239,.35);direction:ltr;margin-right:auto} .nl-body{background:var(--void);padding:40px} .nl-hero-img{height:120px;background:var(--warm);border:1px solid var(--border);margin-bottom:24px;display:flex;align-items:center;justify-content:center} .nl-section-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;color:var(--ember);direction:ltr;text-transform:uppercase;margin-bottom:10px} .nl-h1{font-family:'Noto Kufi Arabic',sans-serif;font-size:22px;font-weight:700;color:var(--ink);direction:rtl;margin-bottom:12px} .nl-p{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:13px;color:var(--ink-soft);direction:rtl;line-height:2;margin-bottom:20px} .nl-cta{display:inline-block;background:var(--ember);color:var(--void);font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;padding:12px 24px;direction:ltr;text-transform:uppercase} .nl-footer{background:var(--parch);padding:20px 40px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border);direction:ltr} .nl-foot-brand{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;color:var(--ember-dim)} .nl-foot-unsub{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft)} .appstore-wrap{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:start} .app-icon-lg{width:100px;height:100px;background:var(--ember);border-radius:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .app-name{font-family:'Noto Kufi Arabic',sans-serif;font-size:20px;font-weight:700;color:var(--ink);direction:rtl;margin-bottom:4px} .app-dev{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ember);direction:ltr;margin-bottom:12px} .app-rating{display:flex;align-items:center;gap:8px;direction:ltr} .app-stars{color:var(--ember);letter-spacing:2px} .app-rcount{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft)} .app-screenshots{display:flex;gap:10px;margin-top:24px;overflow-x:auto} .app-ss{width:120px;height:200px;border-radius:12px;overflow:hidden;flex-shrink:0;border:1px solid var(--border);position:relative} .seo-card{background:var(--warm);border:1px solid var(--border);border-radius:8px;overflow:hidden;max-width:500px} .seo-img{height:160px;background:var(--ember);display:flex;align-items:center;justify-content:center;position:relative} .seo-domain{font-family:'IBM Plex Mono',monospace;font-size:12px;color:rgba(120,120,120,.5);padding:12px 16px 0;direction:ltr} .seo-title{font-size:17px;font-weight:600;color:#1a0dab;padding:4px 16px;line-height:1.3;font-family:Arial,sans-serif;direction:rtl} .seo-desc{font-size:13px;color:#4d5156;padding:4px 16px 12px;line-height:1.5;font-family:Arial,sans-serif;direction:rtl} .cobrand-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px} .cb-cell{padding:36px;border:1px solid var(--border);display:flex;flex-direction:column;align-items:center;gap:16px;background:var(--void)} .cb-logos{display:flex;align-items:center;gap:16px} .cb-sep{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft)} .cb-rule{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:12px;color:var(--ink-soft);direction:rtl;text-align:center;line-height:1.7} .cb-do{border-top:2px solid var(--ember)} .cb-dont{border-top:2px solid #A32D2D;opacity:.6} footer{background:var(--ember);padding:90px 80px;display:flex;justify-content:space-between;align-items:flex-end;direction:rtl;position:relative;overflow:hidden;max-width:100vw} .fg-ghost{position:absolute;left:-20px;bottom:-70px;font-family:'IBM Plex Mono',monospace;font-size:200px;font-weight:500;color:rgba(255,255,255,.025);line-height:1;pointer-events:none;direction:ltr;white-space:nowrap;letter-spacing:-6px;max-width:100vw;overflow:hidden} .fl-big{font-family:'Noto Kufi Arabic',sans-serif;font-size:56px;font-weight:700;color:var(--void);line-height:1;letter-spacing:-2px} .fl-en{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:3px;color:var(--ember-pale);direction:ltr;margin-top:8px;opacity:.5} .fr{direction:ltr;text-align:left} .fr-tag{font-family:'IBM Plex Mono',monospace;font-size:17px;letter-spacing:2px;color:var(--ember-pale);margin-bottom:14px;opacity:.8} .fr-note{font-family:'IBM Plex Mono',monospace;font-size:12px;color:rgba(247,244,239,.28);letter-spacing:1px;text-transform:uppercase} .positioning-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start} .pos-statement{padding:56px 48px;background:var(--ember);position:relative;overflow:hidden} .pos-statement::before{content:'';position:absolute;top:0;right:0;width:3px;height:100%;background:var(--ember-pale);opacity:.3} .ps-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;color:var(--ember-pale);text-transform:uppercase;direction:ltr;margin-bottom:24px;opacity:.6} .ps-text{font-family:'Noto Kufi Arabic',sans-serif;font-size:22px;font-weight:700;color:var(--void);direction:rtl;line-height:1.7} .pos-values{display:flex;flex-direction:column;gap:2px} .vc-icon{flex-shrink:0;margin-top:2px} .vc-title{font-family:'Noto Kufi Arabic',sans-serif;font-size:13px;letter-spacing:2px;color:var(--ember);margin-bottom:6px;font-weight:700} .vc-desc{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:13px;color:var(--ink-soft);line-height:1.8} .tagline-block{margin-top:56px;padding:48px;background:var(--warm);border:1px solid var(--border);text-align:center;direction:rtl} .tb-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;color:var(--ember);margin-bottom:20px;direction:ltr} .tb-tagline{font-family:'DM Serif Display',serif;font-size:clamp(20px,3vw,36px);letter-spacing:3px;color:var(--ember);direction:ltr} .tb-ar{font-family:'Noto Kufi Arabic',sans-serif;font-size:16px;font-weight:700;color:var(--ink-soft);margin-top:12px} .color-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:2px;margin-bottom:2px} .color-card{position:relative;overflow:hidden;cursor:default;transition:flex-grow .4s} .color-card:hover{flex-grow:1.15;z-index:2} .color-grid-2{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-bottom:40px} .color-combo{padding:22px 18px;display:flex;flex-direction:column;align-items:center;gap:8px} .combo-swatch{font-family:'Noto Kufi Arabic',sans-serif;font-size:18px;font-weight:700} .combo-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;text-transform:uppercase;opacity:.45;direction:ltr} .dark-preview{padding:48px;background:var(--dk1);display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center} .dp-left{direction:rtl} .dp-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;color:var(--dks);margin-bottom:16px;direction:ltr;opacity:.6} .dp-ar{font-family:'Noto Kufi Arabic',sans-serif;font-size:40px;font-weight:700;color:var(--dkt);letter-spacing:-2px} .dp-en{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;color:var(--dks);margin-top:8px;direction:ltr} .dp-colors{display:flex;gap:12px;flex-wrap:wrap} .dp-swatch{display:flex;flex-direction:column;align-items:center;gap:6px} .dp-sw-block{width:48px;height:48px;border:1px solid rgba(247,244,239,.1)} .dp-sw-hex{font-family:'IBM Plex Mono',monospace;font-size:12px;color:rgba(247,244,239,.4);direction:ltr} .type-system{display:grid;gap:0} .type-row{display:grid;grid-template-columns:220px 1fr;padding:52px 0;border-bottom:1px solid var(--border);align-items:center;gap:0} .type-row:first-child{padding-top:0} .tr-meta{padding-right:44px;border-right:1px solid var(--border);direction:ltr} .tr-role{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;color:var(--ember);text-transform:uppercase;margin-bottom:10px} .tr-spec{font-family:'IBM Plex Mono',monospace;font-size:12px;color:rgba(20,20,20,.35);line-height:1.9} .tr-sample{padding-right:48px} .scale-table{width:100%;border-collapse:collapse;margin-top:60px;direction:ltr} .scale-table th{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;text-transform:uppercase;padding:14px 20px;text-align:left;border-bottom:1px solid var(--border);color:var(--ink-soft)} .scale-table td{padding:16px 20px;border-bottom:1px solid var(--border);font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft)} .scale-table td:nth-child(3){font-family:'DM Serif Display',serif;color:var(--ink)} .scale-table tr:last-child td{border-bottom:none} .logo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px} .logo-cell{min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 36px;position:relative;transition:transform .35s;cursor:default} .logo-cell:hover{transform:scale(1.02);z-index:2} .lc-tag{position:absolute;bottom:14px;left:14px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;text-transform:uppercase;opacity:.28;direction:ltr} .logo-lockup{display:flex;align-items:center;gap:14px} .logo-lockup.vert{flex-direction:column;gap:6px} .ll-ar{font-family:'Noto Kufi Arabic',sans-serif;font-weight:700;direction:rtl} .ll-en{font-family:'IBM Plex Mono',monospace;font-weight:300;letter-spacing:3px;direction:ltr} .ll-div{width:1px} .dont-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:40px} .dont-cell{padding:32px;border:1px solid var(--border);position:relative;overflow:hidden;background:var(--warm)} .dont-cell::after{content:'✗ لا تستخدم';font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;color:#C0392B;position:absolute;top:12px;right:12px;direction:rtl} .dont-inner{opacity:.5;display:flex;align-items:center;justify-content:center;height:80px} .dont-label{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);letter-spacing:1px;margin-top:14px;direction:rtl} .clearspace-demo{padding:64px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;position:relative;background:var(--warm)} .cs-zone{border:1px dashed rgba(192,57,43,.3);padding:32px;position:relative} .cs-zone::before,.cs-zone::after,.cs-zone span::before,.cs-zone span::after{font-family:'IBM Plex Mono',monospace;font-size:12px;color:rgba(192,57,43,.5);letter-spacing:1px;position:absolute} .cs-zone::before{content:'← 1x unit →';bottom:-18px;left:50%;transform:translateX(-50%);white-space:nowrap} .cs-zone::after{content:'↑';left:-16px;top:50%;transform:translateY(-50%) rotate(90deg)} .an-num{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;color:var(--dks);margin-bottom:8px;direction:ltr} .an-title{font-family:'Noto Kufi Arabic',sans-serif;font-size:16px;letter-spacing:1px;color:var(--dkt);margin-bottom:8px;font-weight:700} .an-body{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:13px;color:var(--dkm);line-height:1.9} .app-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:56px;direction:ltr;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;-ms-overflow-style:none} .app-tabs::-webkit-scrollbar{display:none} .app-tab{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;text-transform:uppercase;padding:14px 28px;color:var(--ink-soft);background:none;border:none;border-bottom:2px solid transparent;cursor:none;position:relative;bottom:-1px;transition:color .25s;flex-shrink:0;white-space:nowrap} .app-tab.active{color:var(--ember);border-bottom-color:var(--ember)} .app-panel{display:none} .app-panel.active{display:block} .bc-dots{display:flex;gap:6px} .bc-dot{width:10px;height:10px;border-radius:50%} .bc-url{flex:1;background:var(--parch);border:1px solid var(--border);border-radius:20px;padding:5px 14px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);direction:ltr;text-align:center} .site-wrap{padding:56px 72px} .site-nav{display:flex;align-items:center;justify-content:space-between;direction:rtl;margin-bottom:88px} .sn-links{display:flex;gap:32px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:1px;color:var(--ink-soft)} .sn-cta{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;padding:8px 20px;border:1px solid var(--ember);color:var(--ember)} .site-hero{direction:rtl;margin-bottom:72px} .sh-tag{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;color:var(--ember);text-transform:uppercase;direction:ltr;margin-bottom:20px} .sh-h1{font-family:'Noto Kufi Arabic',sans-serif;font-size:48px;font-weight:700;color:var(--ink);letter-spacing:-2px;line-height:1.1;margin-bottom:20px} .sh-p{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:15px;color:var(--ink-soft);line-height:2;max-width:480px} .site-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2px} .sc{border:1px solid var(--border);padding:28px 24px;direction:rtl;background:var(--warm);transition:border-color .25s;cursor:default} .sc:hover{border-color:var(--ember)} .sc-num{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ember);direction:ltr;margin-bottom:16px} .sc-title{font-family:'Noto Kufi Arabic',sans-serif;font-size:16px;color:var(--ink);margin-bottom:10px;font-weight:700} .sc-body{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:12px;color:var(--ink-soft);line-height:1.9} .phone-wrap{width:256px;background:var(--void);border:1px solid var(--border);border-radius:36px;overflow:hidden;padding:10px;box-shadow:0 0 0 1px rgba(232,69,10,.08)} .phone-notch{width:76px;height:20px;background:var(--warm);border-radius:10px;margin:0 auto 14px} .phone-screen{background:var(--warm);border-radius:26px;padding:22px 18px;min-height:460px} .m-demo{width:56px;height:56px;display:flex;align-items:center;justify-content:center} .m-name{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;color:var(--dks);text-transform:uppercase;direction:ltr} .m-spec{font-family:'IBM Plex Mono',monospace;font-size:12px;color:rgba(247,244,239,.3);direction:ltr;margin-top:2px} .m-desc{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:12px;color:var(--dkm);line-height:1.8} .anim-slide{animation:slideRightLoop 2.4s ease-in-out infinite} .anim-parallax{animation:parallaxDemo 3s ease-in-out infinite} .anim-magnet{animation:magnetDemo 2.4s ease-in-out infinite} .wave-anim{animation:splashForm 3s ease-in-out infinite;stroke-dasharray:200} .sp-particle{position:absolute;border-radius:50%;opacity:0;animation:spDrift 6s ease-in-out infinite} .sp-particle:nth-child(1){width:3px;height:3px;background:#E8450A;left:15%;top:30%;animation-delay:0s} .sp-particle:nth-child(2){width:2px;height:2px;background:#FDDDD4;left:75%;top:20%;animation-delay:1s} .sp-particle:nth-child(3){width:4px;height:4px;background:#D4563A;left:20%;top:70%;animation-delay:2s} .sp-particle:nth-child(4){width:2px;height:2px;background:#E8450A;left:80%;top:60%;animation-delay:3s} .sp-particle:nth-child(5){width:3px;height:3px;background:#FDDDD4;left:50%;top:15%;animation-delay:4s} .sp-particle:nth-child(6){width:2px;height:2px;background:#B33508;left:35%;top:85%;animation-delay:1.5s} .rc-num{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ember);direction:ltr;margin-bottom:18px} .rc-title{font-family:'Noto Kufi Arabic',sans-serif;font-size:15px;letter-spacing:1px;color:var(--ink);margin-bottom:12px;font-weight:700} .rc-body{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:13px;color:var(--ink-soft);line-height:1.9} .cp-bg-text{position:absolute;bottom:-80px;left:-20px;font-family:'IBM Plex Mono',monospace;font-size:260px;font-weight:500;color:rgba(255,255,255,.03);line-height:1;pointer-events:none;direction:ltr;white-space:nowrap;letter-spacing:-8px;max-width:100vw;overflow:hidden} .cp-top{display:flex;justify-content:space-between;align-items:flex-start;direction:rtl;flex-wrap:wrap;gap:12px} .cp-badge{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;color:rgba(247,244,239,.5);text-transform:uppercase;direction:ltr;border:1px solid rgba(247,244,239,.15);padding:8px 16px} .cp-presented{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;color:rgba(247,244,239,.4);direction:ltr;text-align:right;line-height:2} .cp-main{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 0;gap:24px} .cp-ar{font-family:'Noto Kufi Arabic',sans-serif;font-size:clamp(80px,12vw,160px);font-weight:700;color:var(--void);letter-spacing:-5px;direction:rtl;line-height:.9} .cp-en{font-family:'IBM Plex Mono',monospace;font-size:clamp(16px,2vw,26px);letter-spacing:16px;color:var(--ember-pale);direction:ltr} .cp-tagline{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:17px;color:rgba(247,244,239,.6);direction:rtl;margin-top:8px} .cp-bottom{display:flex;justify-content:space-between;align-items:flex-end;direction:rtl;padding-top:48px;border-top:1px solid rgba(247,244,239,.1)} .cp-meta{font-family:'IBM Plex Mono',monospace;font-size:12px;color:rgba(247,244,239,.3);letter-spacing:1px;direction:ltr;line-height:2} .cp-year{font-family:'DM Serif Display',serif;font-size:52px;font-weight:400;color:rgba(247,244,239,.1);direction:ltr} .section{padding:110px 80px;position:relative} .section--light{background:var(--void)} .section--milk{background:var(--warm)} .section--parch{background:var(--parch)} .section--dark2{background:var(--dk1);color:var(--dkt)} .sec-header{display:flex;align-items:center;gap:24px;margin-bottom:80px;direction:ltr} .sec-num{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;color:var(--ember);opacity:.6} .sec-rule{flex:1;height:1px;background:var(--border)} .sec-title{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;color:var(--ink-soft);text-transform:uppercase} .section--dark2 .sec-rule{background:rgba(247,244,239,.1)} .section--dark2 .sec-title{color:var(--dkm)} .section--dark2 .sec-num{color:var(--dks)} .reveal{opacity:0;transform:translateX(36px);transition:opacity .75s ease,transform .75s ease} .reveal.visible{opacity:1;transform:translateX(0)} .reveal-up{opacity:0;transform:translateY(32px);transition:opacity .75s ease,transform .75s ease} .reveal-up.visible{opacity:1;transform:translateY(0)} .card-3d-wrap{perspective:800px;width:320px;height:185px} .card-3d{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .6s} .card-3d-wrap:hover .card-3d{transform:rotateY(180deg)} .card-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:6px;padding:28px;display:flex;flex-direction:column;justify-content:space-between} .cf-front{background:var(--void);border:1px solid var(--border)} .cf-back{background:var(--ember);transform:rotateY(180deg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px} .cf-top{display:flex;justify-content:space-between;align-items:flex-start} .cf-name{font-family:'Noto Kufi Arabic',sans-serif;font-size:18px;font-weight:700;color:var(--ink)} .cf-role-title{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ember);margin-top:4px;direction:ltr} .cf-contact{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);line-height:2;direction:ltr} .cf-back-ar{font-family:'Noto Kufi Arabic',sans-serif;font-size:36px;font-weight:700;color:var(--void)} .cf-back-en{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;color:var(--ember-pale)} .letterhead{max-width:700px;border:1px solid var(--border);background:var(--void);position:relative;overflow:hidden} .lh-accent-bar{height:4px;background:var(--ember)} .lh-top{display:flex;justify-content:space-between;align-items:flex-start;padding:32px 40px 0;direction:rtl} .lh-brand-ar{font-family:'Noto Kufi Arabic',sans-serif;font-size:22px;font-weight:700;color:var(--ink)} .lh-brand-en{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;color:var(--ember);margin-top:4px;direction:ltr} .lh-contact{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);direction:ltr;text-align:right;line-height:2} .lh-body{padding:32px 40px;font-family:'IBM Plex Sans Arabic',sans-serif;font-size:14px;color:var(--ink-soft);line-height:2.2;direction:rtl} .lh-footer{display:flex;align-items:center;justify-content:space-between;padding:16px 40px;border-top:1px solid var(--border);direction:ltr} .lh-foot-txt{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);letter-spacing:1px} .lh-water{position:absolute;bottom:60px;left:50%;transform:translateX(-50%);opacity:.03;pointer-events:none} .social-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .social-card{background:var(--void);border:1px solid var(--border);overflow:hidden} .social-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;color:var(--ember);padding:10px 14px;direction:ltr;text-transform:uppercase;background:var(--warm);border-bottom:1px solid var(--border)} .li-post{overflow:hidden} .li-header{display:flex;align-items:center;gap:10px;padding:12px 14px;direction:rtl} .li-avatar{width:36px;height:36px;background:var(--ember);border-radius:50%;display:flex;align-items:center;justify-content:center} .li-name{font-family:'Noto Kufi Arabic',sans-serif;font-size:12px;font-weight:700;color:var(--ink)} .li-handle{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);direction:ltr} .li-img{background:var(--dk1);padding:40px 20px;text-align:center} .ig-story{background:var(--dk1);padding:60px 20px;display:flex;flex-direction:column;align-items:center;gap:12px;aspect-ratio:9/16} .tw-header{background:var(--dk1);padding:48px 24px;display:flex;align-items:center;justify-content:center} .email-banner{background:var(--ember);padding:28px 40px;display:flex;flex-direction:column;align-items:center;gap:8px} .email-sig{display:flex;align-items:flex-start;gap:16px;padding:20px 0;direction:ltr} .es-divider{width:1px;height:48px;background:var(--border);flex-shrink:0} .es-name{font-family:'Noto Kufi Arabic',sans-serif;font-size:14px;font-weight:700;color:var(--ink);direction:rtl} .es-title{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ember);letter-spacing:1px;margin-top:2px} .es-contact{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);margin-top:6px;line-height:1.8} .invoice{max-width:680px;background:var(--dk1);border:1px solid rgba(247,244,239,.1);overflow:hidden} .inv-header{display:flex;justify-content:space-between;align-items:flex-start;padding:36px 40px;border-bottom:1px solid rgba(247,244,239,.08)} .inv-brand-ar{font-family:'Noto Kufi Arabic',sans-serif;font-size:28px;font-weight:700;color:var(--dkt)} .inv-num{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--ember-pale);letter-spacing:2px} .inv-body{padding:0 40px 40px} .inv-row{display:grid;grid-template-columns:1fr 80px 120px;padding:16px 0;border-bottom:1px solid rgba(247,244,239,.06);direction:rtl;font-family:'IBM Plex Sans Arabic',sans-serif;font-size:13px;color:var(--dkm)} .inv-row.header{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--dks)} .inv-item{color:var(--dkt)} .inv-qty{color:var(--dks);text-align:center} .inv-price{color:var(--dkt);text-align:right;font-family:'IBM Plex Mono',monospace} .inv-total{display:flex;justify-content:flex-end;padding-top:24px;direction:ltr} .inv-total-box{background:var(--ember);padding:20px 32px;text-align:center} .inv-total-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;color:var(--ember-pale);margin-bottom:8px} .inv-total-num{font-family:'IBM Plex Mono',monospace;font-size:22px;color:var(--void);font-weight:500} .footer-ghost{position:absolute;left:-20px;bottom:-70px;font-family:'IBM Plex Mono',monospace;font-size:200px;font-weight:500;color:rgba(255,255,255,.025);line-height:1;pointer-events:none;direction:ltr;white-space:nowrap;letter-spacing:-6px;max-width:100vw;overflow:hidden} .f-big{font-family:'Noto Kufi Arabic',sans-serif;font-size:56px;font-weight:700;color:var(--void);line-height:1;letter-spacing:-2px} .f-en{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:3px;color:var(--ember-pale);direction:ltr;margin-top:8px;opacity:.5} .footer-right{direction:ltr;text-align:left} .f-tagline{font-family:'IBM Plex Mono',monospace;font-size:17px;letter-spacing:2px;color:var(--ember-pale);margin-bottom:14px;opacity:.8} .f-note{font-family:'IBM Plex Mono',monospace;font-size:12px;color:rgba(247,244,239,.28);letter-spacing:1px;text-transform:uppercase} .gold-rule{width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--ember-pale),transparent);opacity:.4} .combo-label-dark{color:rgba(247,244,239,.35)} .spacing-row{display:flex;align-items:center;gap:0;margin-bottom:0;border-bottom:1px solid var(--border);direction:ltr} .spacing-row:last-child{border-bottom:none} .sp-label{width:80px;flex-shrink:0;padding:18px 20px;border-left:1px solid var(--border);font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ember);font-weight:500} .sp-bar-wrap{flex:1;padding:16px 20px;display:flex;align-items:center;gap:16px;min-height:60px} .sp-bar{height:8px;background:linear-gradient(90deg,var(--ember),var(--ember-sec));border-radius:2px;transition:opacity .3s;opacity:.75} .sp-bar:hover{opacity:1} .sp-name{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);letter-spacing:1px;min-width:100px} .grid-demo-wrap{margin-top:40px;padding:32px;border:1px solid var(--border);background:var(--warm)} .grid-demo-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;color:var(--ember);direction:ltr;text-transform:uppercase;margin-bottom:20px} .grid-demo{display:grid;grid-template-columns:repeat(8,1fr);gap:2px} .grid-cell{height:48px;border:1px dashed var(--border);display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);opacity:.5;direction:ltr} .grid-example{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-top:24px} .gex-sidebar{grid-column:span 3;background:var(--parch);border:1px solid var(--border);padding:20px;min-height:120px} .gex-main{grid-column:span 9;display:grid;grid-template-rows:auto 1fr;gap:16px} .gex-header{background:var(--ember-ghost);border:1px solid var(--border);padding:14px 20px;display:flex;align-items:center;gap:12px} .gex-header-dot{width:8px;height:8px;border-radius:50%;background:var(--ember);opacity:.4} .gex-header-text{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);letter-spacing:2px;direction:ltr;text-transform:uppercase} .gex-content{background:var(--surf);border:1px solid var(--border);padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:16px} .gex-block{height:40px;border:1px dashed var(--border);border-radius:2px;display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);opacity:.5} .shadow-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:32px;direction:ltr} .shadow-card{display:flex;flex-direction:column;align-items:center;gap:20px} .shadow-surface{width:100%;height:120px;background:var(--warm);border:1px solid var(--border);position:relative} .shadow-float{position:absolute;top:-12px;left:50%;transform:translateX(-50%);width:80%;height:64px;background:var(--void);border:1px solid var(--border);border-radius:4px;display:flex;align-items:center;justify-content:center;transition:transform .3s} .shadow-float:hover{transform:translateX(-50%) translateY(-4px)} .sf-label{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink);letter-spacing:1px} .sf-code{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);text-align:center;line-height:1.7;word-break:break-all;max-width:100%;padding:0 4px} .shadow-name{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;color:var(--ember);text-transform:uppercase} .radius-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:24px;direction:ltr} .radius-card{display:flex;flex-direction:column;align-items:center;gap:16px} .radius-shape{width:80px;height:80px;background:var(--ember-pale);border:2px solid var(--ember);display:flex;align-items:center;justify-content:center;transition:all .3s} .radius-shape:hover{background:var(--ember);border-color:var(--ember-dim)} .radius-shape:hover .radius-px{color:var(--void)} .radius-px{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ember);transition:color .3s} .radius-name{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;color:var(--ink-soft);text-transform:uppercase} .radius-css{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);opacity:.6;text-align:center} .gradient-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;direction:ltr} .gradient-swatch{border:1px solid var(--border);overflow:hidden;cursor:default;transition:border-color .3s} .gradient-swatch:hover{border-color:var(--ember)} .gs-preview{height:140px;position:relative;overflow:hidden} .gs-label{position:absolute;bottom:12px;left:16px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;color:white;text-transform:uppercase;text-shadow:0 1px 4px rgba(0,0,0,.3)} .gs-info{padding:18px 20px;background:var(--void);border-top:1px solid var(--border)} .gs-name{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink);margin-bottom:8px;font-weight:500} .gs-code{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);line-height:1.8;word-break:break-all} .texture-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .texture-card{border:1px solid var(--border);overflow:hidden;cursor:default;transition:border-color .3s} .texture-card:hover{border-color:var(--ember)} .tx-preview{height:200px;position:relative;background:var(--void)} .tx-overlay{position:absolute;inset:0;pointer-events:none} .tx-film{opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:150px} .tx-paper{opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.04' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");background-size:200px} .tx-dots{opacity:.08;background-image:radial-gradient(circle,var(--ember) 1px,transparent 1px);background-size:12px 12px} .tx-lines{opacity:.06;background-image:repeating-linear-gradient(0deg,var(--ember) 0,var(--ember) 1px,transparent 1px,transparent 8px)} .tx-info{padding:20px;border-top:1px solid var(--border);background:var(--void)} .tx-name{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink);margin-bottom:6px;font-weight:500;direction:ltr} .tx-detail{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);line-height:1.8;direction:ltr} .tx-note{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:12px;color:var(--ink-soft);line-height:1.8;margin-top:8px;direction:rtl;opacity:.7} .pattern-tile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .pattern-tile{display: flex; flex-direction: column; border:1px solid var(--border);overflow:hidden;cursor:default;transition:border-color .3s} .pattern-tile:hover{border-color:var(--ember)} .pt-preview{height:200px;position:relative;background:var(--void);overflow:hidden} .pt-info{padding:20px;border-top:1px solid var(--border);background:var(--void);flex-grow: 1; display: flex; flex-direction: column; padding-bottom: 20px} .pt-name{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink);margin-bottom:8px;font-weight:500;direction:ltr} .pt-ref{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);line-height:1.8;direction:ltr;word-break:break-all} .a11y-wrap{direction:ltr} .a11y-intro{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:13px;color:var(--ink-soft);line-height:1.9;direction:rtl;margin-bottom:32px;max-width:600px} .a11y-matrix{overflow-x:auto} .a11y-table{width:100%;border-collapse:collapse;min-width:600px} .a11y-table th{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:1px;color:var(--ink-soft);padding:10px 8px;border:1px solid var(--border);text-align:center;font-weight:500;vertical-align:middle} .a11y-table th.bg-th{background:var(--warm)} .a11y-table th.fg-th{background:var(--void);text-align:right;padding-right:14px} .a11y-cell{padding:12px 8px;border:1px solid var(--border);text-align:center;vertical-align:middle} .a11y-ratio{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:500;margin-bottom:4px} .a11y-badge{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:1px;padding:2px 6px;border-radius:1px;text-transform:uppercase;font-weight:500} .a11y-pass{background:rgba(28,122,85,.08);color:#1C7A55} .a11y-fail{background:rgba(163,45,45,.08);color:#A32D2D} .a11y-pass-lg{background:rgba(28,122,85,.08);color:#1C7A55} .typo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .typo-card{border:1px solid var(--border);background:var(--void);padding:32px 28px;direction:rtl;cursor:default;transition:border-color .3s} .typo-card:hover{border-color:var(--ember)} .tc-num{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ember);direction:ltr;margin-bottom:16px;letter-spacing:2px} .tc-title{font-family:'Noto Kufi Arabic',sans-serif;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:12px} .tc-divider{width:32px;height:1px;background:var(--ember);opacity:.3;margin-bottom:16px} .tc-rule{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ember);direction:ltr;margin-bottom:8px;letter-spacing:1px} .tc-desc{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:12px;color:var(--ink-soft);line-height:1.9;margin-bottom:16px} .tc-demo{padding:16px;background:var(--warm);border:1px solid var(--border);direction:rtl} .tc-do{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px} .tc-dont{display:flex;align-items:flex-start;gap:8px} .tc-icon{flex-shrink:0;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:700;margin-top:1px} .tc-icon-do{color:#1C7A55} .tc-icon-dont{color:#A32D2D} .tc-sample{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:13px;color:var(--ink);line-height:1.8} .tc-sample-bad{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:13px;color:var(--ink-soft);line-height:1.4;text-decoration:line-through;opacity:.5} .tone-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .tone-card{border:1px solid var(--border);background:var(--void);overflow:hidden;cursor:default;transition:border-color .3s} .tone-card:hover{border-color:var(--ember)} .tone-header{padding:20px 24px;border-bottom:1px solid var(--border);background:var(--warm);display:flex;align-items:center;justify-content:space-between} .tone-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;color:var(--ember);text-transform:uppercase;direction:ltr} .tone-tag{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);padding:3px 8px;border:1px solid var(--border);direction:ltr} .tone-body{padding:24px;direction:rtl} .tone-ar-label{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);letter-spacing:1px;direction:ltr;margin-bottom:8px;text-transform:uppercase} .tone-ar{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:14px;color:var(--ink);line-height:2;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border)} .tone-en-label{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);letter-spacing:1px;direction:ltr;margin-bottom:8px;text-transform:uppercase} .tone-en{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);line-height:1.8;direction:ltr} .micro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .micro-card{border:1px solid rgba(247,244,239,.08);background:var(--dk2);padding:28px 24px;cursor:default;transition:border-color .3s} .micro-card:hover{border-color:rgba(232,69,10,.3)} .mc-category{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;color:var(--ember-sec);direction:ltr;margin-bottom:20px;text-transform:uppercase} .mc-items{display:flex;flex-direction:column;gap:12px} .mc-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 24px;font-family:'IBM Plex Sans Arabic',sans-serif;font-size:13px;font-weight:500;direction:rtl;cursor:none;transition:all .3s;border:none} .mc-btn-primary{background:var(--ember);color:var(--void)} .mc-btn-primary:hover{background:var(--ember-dim);transform:translateY(-1px)} .mc-btn-secondary{background:transparent;color:var(--ember-pale);border:1px solid rgba(247,244,239,.15)} .mc-btn-secondary:hover{border-color:var(--ember);color:var(--ember-pale)} .mc-btn-ghost{background:transparent;color:var(--dkm);padding:10px 16px} .mc-btn-ghost:hover{color:var(--dkt)} .mc-message{padding:14px 18px;border-radius:2px;direction:rtl;font-family:'IBM Plex Sans Arabic',sans-serif;font-size:12px;line-height:1.8} .mc-msg-success{background:rgba(28,122,85,.1);color:#6BC499;border-right:2px solid #1C7A55} .mc-msg-error{background:rgba(163,45,45,.1);color:#E08A8A;border-right:2px solid #A32D2D} .mc-msg-info{background:rgba(232,69,10,.08);color:var(--ember-pale);border-right:2px solid var(--ember-sec)} .mc-msg-empty{background:rgba(247,244,239,.04);color:var(--dkm);text-align:center;padding:24px 18px} .mc-msg-empty-icon{font-family:'IBM Plex Mono',monospace;font-size:20px;color:var(--dks);direction:ltr;margin-bottom:8px} .mc-msg-empty-text{color:var(--dkm);line-height:1.8} .mc-tip{padding:14px 18px;background:rgba(247,244,239,.06);direction:rtl;border:1px solid rgba(247,244,239,.06)} .mc-tip-label{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--dks);direction:ltr;margin-bottom:6px;text-transform:uppercase;letter-spacing:1px} .mc-tip-text{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:12px;color:var(--dkm);line-height:1.8} @import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600&family=DM+Serif+Display:ital@0;1&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} body{font-family:'IBM Plex Sans Arabic',sans-serif;color:var(--ink);background:var(--void);direction:ltr} .sec{width:100%;padding:90px 60px;position:relative} .sl{background:var(--void)} .sw2{background:var(--warm)} .sp{background:var(--parch)} .sd{background:var(--dk1)} .sd0{background:var(--dk0)} .sh{display:flex;align-items:center;gap:16px;margin-bottom:56px;flex-wrap:wrap} .shn{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--ember)} .sd .shn,.sd0 .shn{color:var(--ember)} .shr{flex:1;min-width:60px;height:1px;background:var(--border)} .sd .shr,.sd0 .shr{background:rgba(247,244,239,0.15)} .sht{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:400;letter-spacing:2px;text-transform:uppercase;color:var(--ink-soft)} .sd .sht,.sd0 .sht{color:var(--dks)} .rv{opacity:0;transform:translateY(18px);animation:rvUp .7s cubic-bezier(.22,1,.36,1) forwards} .rv:nth-child(2){animation-delay:.1s} .rv:nth-child(3){animation-delay:.2s} .rv:nth-child(4){animation-delay:.3s} .rv:nth-child(5){animation-delay:.35s} .rv:nth-child(6){animation-delay:.4s} .rv:nth-child(7){animation-delay:.45s} .ar{direction:rtl;font-family:'IBM Plex Sans Arabic',sans-serif} .ar-h{direction:rtl;font-family:'Noto Kufi Arabic',sans-serif} .en{direction:ltr;font-family:'IBM Plex Mono',monospace} .mono{font-family:'IBM Plex Mono',monospace} .serif{font-family:'DM Serif Display',serif} .label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--ink-soft);direction:ltr} .sd .label,.sd0 .label{color:var(--dks)} .slide-wrap{display:flex;justify-content:center;align-items:center} .slide-deck{display:flex;flex-direction:column;align-items:center;gap:24px} .slide{width:800px;max-width:100%;aspect-ratio:16/9;background:var(--dk0);border-radius:8px;position:relative;padding:56px 64px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.12)} .slide::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--ember),var(--ember-sec))} .slide-logo{position:absolute;top:28px;right:36px;width:28px;height:28px} .slide-num{position:absolute;bottom:24px;left:36px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;color:var(--dks)} .slide-title-ar{direction:rtl;font-family:'Noto Kufi Arabic',sans-serif;font-size:32px;font-weight:700;color:var(--dkt);line-height:1.35;margin-bottom:8px} .slide-subtitle{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:1.5px;color:var(--dks);margin-bottom:32px;direction:ltr;text-transform:uppercase} .slide-bullets{list-style:none;display:flex;flex-direction:column;gap:14px} .slide-bullets li{display:flex;align-items:center;gap:14px;direction:rtl;font-family:'IBM Plex Sans Arabic',sans-serif;font-size:15px;font-weight:400;color:var(--dkm);line-height:1.6} .slide-bullets .dot{width:7px;height:7px;border-radius:50%;background:var(--ember);flex-shrink:0} .slide-nav{display:flex;align-items:center;gap:16px} .slide-nav span{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;color:var(--ink-soft)} .badge-showcase{display:flex;justify-content:center;align-items:flex-start;gap:64px;flex-wrap:wrap} .badge-card{width:260px;background:var(--warm);border-radius:12px;position:relative;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.08)} .badge-lanyard{width:260px;display:flex;justify-content:center;margin-bottom:-8px;z-index:2;position:relative} .badge-lanyard .clip{width:40px;height:24px;border:2px solid var(--border2);border-radius:0 0 10px 10px;background:#fff;position:relative} .badge-lanyard .clip::before{content:'';position:absolute;top:-18px;left:50%;transform:translateX(-50%);width:16px;height:18px;border:2px solid var(--border2);border-bottom:none;border-radius:8px 8px 0 0;background:transparent} .badge-bar{height:6px;background:linear-gradient(90deg,var(--ember),var(--ember-sec))} .badge-body{padding:28px 24px 24px;text-align:center} .badge-body .logo-sm{width:40px;height:40px;margin:0 auto 14px} .badge-body .event-name{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--ink-soft);margin-bottom:20px;direction:ltr} .badge-body .attendee-name{direction:rtl;font-family:'Noto Kufi Arabic',sans-serif;font-size:22px;font-weight:700;color:var(--ink);margin-bottom:6px} .badge-body .attendee-role{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--ember);margin-bottom:4px;direction:ltr} .badge-body .attendee-company{direction:rtl;font-family:'IBM Plex Sans Arabic',sans-serif;font-size:13px;color:var(--ink-soft);margin-bottom:18px} .badge-body .qr-area{width:56px;height:56px;margin:0 auto 14px;background:var(--void);border-radius:4px;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:1px;padding:6px} .badge-body .qr-area .qc{border-radius:1px} .badge-body .qr-area .qc.on{background:var(--ink)} .badge-body .qr-area .qc.off{background:transparent} .badge-back{width:260px;background:var(--void);border-radius:12px;border:1px solid var(--border);padding:28px 24px;text-align:center} .badge-back .label{margin-bottom:16px} .badge-schedule{list-style:none;text-align:right;direction:rtl} .badge-schedule li{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:12px;color:var(--ink-soft);padding:8px 0;border-bottom:1px solid var(--border);display:flex;justify-content:space-between} .badge-schedule li span{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink);direction:ltr} .qr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;max-width:780px;margin:0 auto} .qr-card{background:var(--warm);border-radius:12px;border:1px solid var(--border);padding:32px 24px 24px;text-align:center;transition:all .3s ease} .qr-card:hover{box-shadow:0 12px 32px rgba(0,0,0,.06)} .qr-frame-wrap{width:140px;height:140px;margin:0 auto 20px;position:relative;display:flex;align-items:center;justify-content:center} .qr-mock{width:100px;height:100px;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);gap:1.5px;padding:6px;background:var(--void)} .qr-mock .qc{border-radius:1px;aspect-ratio:1} .qr-mock .qc.on{background:var(--ink)} .qr-mock .qc.off{background:var(--surf)} .qr-corner{width:140px;height:140px;position:absolute} .qr-corner .corner{position:absolute;width:24px;height:24px;border-color:var(--ember);border-style:solid} .qr-corner .corner.tl{top:0;left:0;border-width:3px 0 0 3px;border-radius:4px 0 0 0} .qr-corner .corner.tr{top:0;right:0;border-width:3px 3px 0 0;border-radius:0 4px 0 0} .qr-corner .corner.bl{bottom:0;left:0;border-width:0 0 3px 3px;border-radius:0 0 0 4px} .qr-corner .corner.br{bottom:0;right:0;border-width:0 3px 3px 0;border-radius:0 0 4px 0} .qr-full{width:140px;height:140px;border:3px solid var(--ember);border-radius:8px;display:flex;align-items:center;justify-content:center;position:relative} .qr-full .qr-logo-badge{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);width:28px;height:28px;background:var(--ember);border-radius:6px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;z-index:2} .qr-full .qr-logo-badge svg{width:16px;height:16px} .qr-minimal{width:140px;height:140px;position:relative;display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px} .qr-minimal .line{position:absolute;bottom:0;left:10%;right:10%;height:3px;background:var(--ember);border-radius:2px} .qr-style-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px} .qr-style-name{font-family:'Noto Kufi Arabic',sans-serif;font-size:14px;font-weight:600;color:var(--ink);direction:rtl} .wm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:860px;margin:0 auto} .wm-card{background:var(--warm);border-radius:12px;border:1px solid var(--border);overflow:hidden;transition:all .3s ease} .wm-card:hover{box-shadow:0 12px 32px rgba(0,0,0,.06)} .wm-card-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center} .wm-card-header .wm-level{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-soft)} .wm-card-header .wm-opacity{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:1px;color:var(--ember)} .wm-doc{padding:24px 20px;min-height:200px;position:relative;overflow:hidden} .wm-doc .doc-line{height:8px;border-radius:4px;background:var(--surf);margin-bottom:10px} .wm-doc .doc-line.short{width:70%} .wm-doc .doc-line.mid{width:85%} .wm-doc .doc-line.long{width:95%} .wm-doc .doc-line.accent{background:var(--ember-pale);width:60%} .wm-doc .doc-block{height:40px;border-radius:6px;background:var(--surf);margin:16px 0 10px} .wm-watermark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-30deg);pointer-events:none} .wm-light .wm-watermark{opacity:.05} .wm-med .wm-watermark{opacity:.10} .wm-heavy .wm-watermark{opacity:.20} .wm-watermark svg{width:80px;height:80px} .kb-showcase{display:flex;justify-content:center} .kb-sheet{max-width:640px;width:100%;background:var(--warm);border-radius:16px;border:1px solid var(--border);overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.06)} .kb-sheet-header{padding:24px 32px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center} .kb-sheet-header h3{font-family:'Noto Kufi Arabic',sans-serif;font-size:16px;font-weight:600;direction:rtl;color:var(--ink)} .kb-modifiers{display:flex;gap:8px;align-items:center} .kb-key{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 10px;border-radius:6px;background:var(--void);border:1px solid var(--border2);font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;color:var(--ink);box-shadow:0 2px 0 var(--border2);transition:all .15s ease} .kb-key.mod{background:var(--ember-pale);border-color:var(--ember-sec);color:var(--ember-dim)} .kb-shortcuts{padding:8px 0} .kb-row{display:flex;align-items:center;justify-content:space-between;padding:14px 32px;transition:background .2s ease} .kb-row:hover{background:var(--surf)} .kb-row .kb-action{display:flex;align-items:center;gap:14px} .kb-row .kb-action .kb-icon{width:32px;height:32px;border-radius:8px;background:var(--surf);display:flex;align-items:center;justify-content:center} .kb-row .kb-action .kb-icon svg{width:16px;height:16px} .kb-row .kb-action-name{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:14px;direction:rtl;color:var(--ink)} .kb-row .kb-combo{display:flex;gap:6px;align-items:center} .kb-row .kb-combo .plus{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft)} .modal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:860px;margin:0 auto} .modal-card{position:relative;border-radius:12px;overflow:hidden;min-height:380px} .modal-backdrop{position:absolute;inset:0;background:rgba(10,10,10,.45);border-radius:12px} .modal-dialog{position:relative;z-index:2;background:var(--warm);border-radius:14px;margin:24px;box-shadow:0 20px 60px rgba(0,0,0,.2);overflow:hidden;max-width:300px;margin-left:auto;margin-right:auto;margin-top:40px} .modal-head{padding:20px 24px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between} .modal-head h4{font-family:'Noto Kufi Arabic',sans-serif;font-size:16px;font-weight:600;direction:rtl;color:var(--ink)} .modal-head .close-btn{width:28px;height:28px;border-radius:6px;background:var(--surf);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease} .modal-head .close-btn:hover{background:var(--ember-pale)} .modal-head .close-btn svg{width:14px;height:14px} .modal-body{padding:20px 24px} .modal-body p{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:14px;line-height:1.7;color:var(--ink-soft);direction:rtl} .modal-body .alert-icon{width:48px;height:48px;border-radius:12px;background:var(--ember-pale);display:flex;align-items:center;justify-content:center;margin:0 auto 16px} .modal-body .alert-icon svg{width:24px;height:24px} .modal-body .form-group{margin-bottom:14px} .modal-body .form-label{display:block;font-family:'IBM Plex Sans Arabic',sans-serif;font-size:12px;font-weight:500;direction:rtl;color:var(--ink);margin-bottom:6px} .modal-body .form-input{width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:8px;font-family:'IBM Plex Sans Arabic',sans-serif;font-size:13px;direction:rtl;background:var(--void);color:var(--ink);outline:none;transition:border-color .2s} .modal-body .form-input:focus{border-color:var(--ember)} .modal-foot{padding:14px 24px 20px;display:flex;gap:10px;justify-content:flex-end} .btn{padding:10px 20px;border-radius:8px;font-family:'IBM Plex Sans Arabic',sans-serif;font-size:13px;font-weight:500;cursor:pointer;border:none;transition:all .2s ease;direction:rtl} .btn-ghost{background:transparent;color:var(--ink-soft);border:1px solid var(--border)} .btn-ghost:hover{background:var(--surf)} .btn-primary{background:var(--ember);color:#fff} .btn-primary:hover{background:var(--ember-dim)} .modal-type-label{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:3;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.7);background:rgba(0,0,0,.4);padding:4px 12px;border-radius:4px} .acc-showcase{max-width:640px;margin:0 auto} .accordion{display:flex;flex-direction:column;gap:0;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--warm)} .acc-item{border-bottom:1px solid var(--border)} .acc-item:last-child{border-bottom:none} .acc-trigger{width:100%;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;background:none;border:none;cursor:pointer;transition:background .2s ease} .acc-trigger:hover{background:var(--surf)} .acc-trigger .acc-q{font-family:'Noto Kufi Arabic',sans-serif;font-size:15px;font-weight:600;direction:rtl;color:var(--ink);text-align:right} .acc-trigger .acc-icon{width:28px;height:28px;border-radius:6px;background:var(--surf);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .3s ease} .acc-trigger .acc-icon svg{width:14px;height:14px;stroke:var(--ember);transition:transform .3s ease} .acc-item.open .acc-trigger .acc-icon{background:var(--ember-pale)} .acc-item.open .acc-trigger .acc-icon svg{transform:rotate(45deg)} .acc-content{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.22,1,.36,1)} .acc-item.open .acc-content{max-height:200px} .acc-answer{padding:0 24px 20px;font-family:'IBM Plex Sans Arabic',sans-serif;font-size:14px;line-height:1.8;color:var(--ink-soft);direction:rtl;text-align:right} .tabs-showcase{max-width:640px;margin:0 auto} .tabs-card{background:var(--warm);border-radius:12px;border:1px solid var(--border);overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.04)} .tabs-nav{display:flex;border-bottom:1px solid var(--border);padding:0 8px;position:relative} .tab-btn{padding:16px 24px;background:none;border:none;cursor:pointer;font-family:'Noto Kufi Arabic',sans-serif;font-size:14px;font-weight:500;color:var(--ink-soft);direction:rtl;position:relative;transition:color .2s ease;flex:1;text-align:center} .tab-btn:hover{color:var(--ink)} .tab-btn.active{color:var(--ember)} .tab-btn.active::after{content:'';position:absolute;bottom:-1px;left:20%;right:20%;height:2.5px;background:var(--ember);border-radius:2px 2px 0 0} .tab-btn.disabled{color:var(--border2);cursor:not-allowed;opacity:.5} .tab-panel{padding:32px 28px} .tab-panel-content{display:none} .tab-panel-content.visible{display:block} .tab-panel .panel-title{font-family:'Noto Kufi Arabic',sans-serif;font-size:18px;font-weight:600;direction:rtl;color:var(--ink);margin-bottom:12px} .tab-panel .panel-desc{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:14px;line-height:1.8;direction:rtl;color:var(--ink-soft);margin-bottom:24px} .tab-panel .panel-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .stat-box{background:var(--void);border-radius:10px;padding:18px 16px;text-align:center} .stat-box .stat-num{font-family:'IBM Plex Mono',monospace;font-size:24px;font-weight:600;color:var(--ember);direction:ltr;display:block;margin-bottom:4px} .stat-box .stat-label{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:12px;direction:rtl;color:var(--ink-soft)} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} .sec{padding:100px 80px;position:relative;z-index:1;font-family:'IBM Plex Sans Arabic','IBM Plex Mono',sans-serif;color:var(--ink)} .sl{background:var(--void)} .sw2{background:var(--warm)} .sp{background:var(--parch)} .sd{background:var(--dk1);color:var(--dkt)} .sd0{background:var(--dk0);color:var(--dkt)} .sh{display:flex;align-items:center;gap:20px;margin-bottom:72px;direction:ltr} .shn{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;color:var(--ember);opacity:.6} .shr{flex:1;height:1px;background:var(--border)} .sht{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;color:var(--ink-soft);text-transform:uppercase} .sd .shr,.sd0 .shr{background:rgba(247,244,239,.1)} .sd .sht,.sd0 .sht{color:var(--dkm)} .sd .shn,.sd0 .shn{color:var(--dks)} .pag-group{display:flex;flex-direction:column;gap:48px} .pag-row{display:flex;flex-direction:column;gap:16px} .pag-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;color:var(--ember);text-transform:uppercase;direction:ltr} .pag-bar{display:flex;align-items:center;gap:6px;direction:ltr} .pg-btn{min-width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);background:var(--void);color:var(--ink);font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:1px;cursor:default;transition:all .2s} .pg-btn:hover{border-color:var(--ember);color:var(--ember)} .pg-btn.act{background:var(--ember);border-color:var(--ember);color:var(--void)} .pg-btn.disabled{opacity:.3;cursor:default} .pg-btn.disabled:hover{border-color:var(--border);color:var(--ink)} .pg-dots{min-width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-soft);font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px} .pg-compact{display:flex;align-items:center;gap:16px;direction:ltr} .pg-compact-info{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:13px;color:var(--ink-soft);direction:ltr} .bc-group{display:flex;flex-direction:column;gap:48px} .bc-row{display:flex;flex-direction:column;gap:16px} .bc-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;color:var(--ember);text-transform:uppercase;direction:ltr} .bc-bar{display:flex;align-items:center;gap:10px;direction:rtl;padding:14px 20px;background:var(--warm);border:1px solid var(--border)} .bc-item{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:13px;color:var(--ink-soft);cursor:default;transition:color .2s} .bc-item:hover{color:var(--ember)} .bc-item.current{color:var(--ember);font-weight:500} .bc-sep{color:var(--ember);opacity:.4;font-size:14px;flex-shrink:0} .bc-icon{width:14px;height:14px;flex-shrink:0} .tt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px} .tt-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:260px;position:relative;border:1px solid var(--border);background:var(--void)} .tt-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;color:var(--ink-soft);text-transform:uppercase;direction:ltr;position:absolute;bottom:16px;left:50%;transform:translateX(-50%)} .tt-trigger{padding:10px 24px;border:1px solid var(--border);background:var(--void);font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;color:var(--ink);cursor:default;position:relative} .tt-bubble{width:max-content;max-width:none;position:absolute;background:var(--ember);color:var(--void);padding:10px 16px;font-family:'IBM Plex Sans Arabic',sans-serif;font-size:12px;white-space:nowrap;pointer-events:none} .tt-bubble.top{bottom:calc(100% + 14px);left:50%;transform:translateX(-50%)} .tt-bubble.top::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--ember)} .tt-bubble.bottom{top:calc(100% + 14px);left:50%;transform:translateX(-50%)} .tt-bubble.bottom::after{content:'';position:absolute;bottom:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-bottom-color:var(--ember)} .tt-bubble.left{right:calc(100% + 14px);top:50%;transform:translateY(-50%)} .tt-bubble.left::after{content:'';position:absolute;left:100%;top:50%;transform:translateY(-50%);border:6px solid transparent;border-left-color:var(--ember)} .tt-bubble.right{left:calc(100% + 14px);top:50%;transform:translateY(-50%)} .tt-bubble.right::after{content:'';position:absolute;right:100%;top:50%;transform:translateY(-50%);border:6px solid transparent;border-right-color:var(--ember)} .dd-demo{display:flex;gap:60px;align-items:flex-start;justify-content:center} .dd-group{display:flex;flex-direction:column;gap:16px} .dd-group-1{position: relative !important; z-index: 100 !important}.dd-group-1 .dd-wrap{position: relative !important; z-index: 100 !important}.dd-group-1 .dd-panel{z-index: 100 !important}.dd-group-2{position: relative !important; z-index: 10 !important}.dd-group-2 .dd-wrap{position: relative !important; z-index: 10 !important}.dd-group-2 .dd-panel{z-index: 10 !important}.dd-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;color:var(--ember);text-transform:uppercase;direction:ltr} .dd-wrap{position:relative;display:inline-block} .dd-trigger{padding:12px 24px;border:1px solid var(--border);background:var(--void);font-family:'Noto Kufi Arabic',sans-serif;font-size:14px;color:var(--ink);cursor:default;display:flex;align-items:center;gap:10px;direction:rtl;transition:border-color .2s} .dd-trigger:hover{border-color:var(--ember)} .dd-trigger .dd-chev{width:12px;height:12px;transition:transform .2s} .dd-panel{position:absolute;top:calc(100% + 2px);right:0;min-width:220px;background:var(--void);border:1px solid var(--border);box-shadow:0 8px 32px rgba(20,20,20,.08);z-index:10;direction:rtl;padding:6px 0} .dd-item{padding:11px 20px;font-family:'IBM Plex Sans Arabic',sans-serif;font-size:13px;color:var(--ink);cursor:default;transition:background .15s,color .15s;display:flex;align-items:center;gap:10px} .dd-item:hover{background:var(--ember-pale);color:var(--ember)} .dd-item.active{color:var(--ember);font-weight:500} .dd-item .dd-icon{width:16px;height:16px;opacity:.4} .dd-item:hover .dd-icon{opacity:.7} .dd-item.active::before{content:'';position:absolute;right:0;top:0;bottom:0;width:2px;background:var(--ember)} .dd-divider{height:1px;background:var(--border);margin:6px 0} .dt-wrap{border:1px solid var(--border);overflow:hidden;background:var(--void);direction:rtl} .dt-topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border);background:var(--warm)} .dt-title{font-family:'Noto Kufi Arabic',sans-serif;font-size:14px;font-weight:700;color:var(--ink)} .dt-search{padding:7px 14px;border:1px solid var(--border);font-family:'IBM Plex Sans Arabic',sans-serif;font-size:12px;color:var(--ink);background:var(--void);direction:rtl;outline:none;min-width:180px;transition:border-color .2s} .dt-search:focus{border-color:var(--ember)} .dt-search::placeholder{color:rgba(20,20,20,.3)} .dt-table{width:100%;border-collapse:collapse} .dt-table th{padding:12px 20px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:1px;color:var(--ink-soft);text-transform:uppercase;border-bottom:1px solid var(--border);text-align:right;background:var(--warm);white-space:nowrap} .dt-table th .sort-icon{display:inline-block;margin-right:6px;opacity:.3;font-size:12px} .dt-table td{padding:13px 20px;font-family:'IBM Plex Sans Arabic',sans-serif;font-size:13px;color:var(--ink);border-bottom:1px solid var(--border)} .dt-table tbody tr{transition:background .15s;cursor:default} .dt-table tbody tr:hover{background:var(--ember-pale)} .dt-table tbody tr:last-child td{border-bottom:none} .dt-badge{display:inline-block;padding:3px 10px;font-family:'IBM Plex Sans Arabic',sans-serif;font-size:12px;border-radius:2px} .dt-badge.done{background:rgba(28,122,85,.08);color:#1C7A55} .dt-badge.prog{background:rgba(232,69,10,.1);color:var(--ember-dim)} .dt-badge.pend{background:var(--surf);color:var(--ink-soft)} .dt-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-top:1px solid var(--border);background:var(--warm)} .dt-info{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:12px;color:var(--ink-soft)} .dt-pag{display:flex;gap:4px;direction:ltr} .kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px} .kpi-card{padding:32px 28px;border:1px solid var(--border);background:var(--void);direction:rtl;display:flex;flex-direction:column;gap:16px;cursor:default;transition:border-color .3s,transform .2s;position:relative;overflow:hidden} .kpi-card:hover{border-color:var(--ember);transform:translateY(-2px)} .kpi-card::before{content:'';position:absolute;top:0;right:0;width:0;height:2px;background:var(--ember);transition:width .4s} .kpi-card:hover::before{width:100%} .kpi-top{display:flex;align-items:center;justify-content:space-between} .kpi-icon{width:36px;height:36px;border-radius:8px;background:var(--ember-pale);display:flex;align-items:center;justify-content:center;color:var(--ember)} .kpi-trend{display:flex;align-items:center;gap:4px;font-family:'IBM Plex Mono',monospace;font-size:12px;direction:ltr} .kpi-trend.up{color:#1C7A55} .kpi-trend.down{color:#A32D2D} .kpi-trend.flat{color:var(--ink-soft)} .kpi-value{font-family:'DM Serif Display',serif;font-size:36px;color:var(--ink);line-height:1;direction:ltr} .kpi-label{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:12px;color:var(--ink-soft)} .kpi-sparkline{display:flex;align-items:flex-end;gap:2px;height:32px;margin-top:4px} .kpi-sparkline .sp-bar{width:6px;border-radius:1px 1px 0 0;background:var(--ember);opacity:.2;transition:opacity .2s} .kpi-card:hover .kpi-sparkline .sp-bar{opacity:.45} .bidi-group{display:flex;flex-direction:column;gap:2px} .bidi-block{border:1px solid var(--border);padding:0;overflow:hidden} .bidi-header{padding:10px 20px;direction:ltr;display:flex;align-items:center;gap:8px} .bidi-header .bidi-tag{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;color:var(--ember);text-transform:uppercase} .bidi-header .bidi-dot{width:6px;height:6px;border-radius:50%;background:var(--ember)} .bidi-mini-page{padding:24px} .bidi-mini-nav{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);margin-bottom:16px} .bidi-mini-logo{font-family:'Noto Kufi Arabic',sans-serif;font-size:16px;font-weight:700;color:var(--ember)} .bidi-mini-links{display:flex;gap:16px} .bidi-mini-links span{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:1px;color:var(--ink-soft)} .bidi-mini-hero{margin-bottom:16px} .bidi-mini-hero h3{font-family:'Noto Kufi Arabic',sans-serif;font-size:18px;font-weight:700;color:var(--ink);margin-bottom:6px;line-height:1.4} .bidi-mini-hero p{font-size:12px;color:var(--ink-soft);line-height:1.7} .bidi-mini-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px} .bidi-mini-card{padding:14px;border:1px solid var(--border);background:var(--warm)} .bidi-mini-card h4{font-size:12px;font-weight:700;color:var(--ink);margin-bottom:4px} .bidi-mini-card p{font-size:12px;color:var(--ink-soft);line-height:1.6} .bidi-mini-footer{padding-top:10px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between} .bidi-mini-footer span{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);letter-spacing:1px;direction:ltr} .bp-group{display:flex;gap:24px;align-items:flex-start;justify-content:center;flex-wrap:wrap} .bp-frame{display:flex;flex-direction:column;align-items:center;gap:14px} .bp-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;color:var(--ember);text-transform:uppercase;direction:ltr} .bp-screen{border:1px solid var(--border);overflow:hidden;background:var(--void);position:relative} .bp-chrome{background:var(--ink);padding:8px 10px;display:flex;align-items:center;gap:5px} .bp-dot{width:6px;height:6px;border-radius:50%} .bp-bar{flex:1;background:rgba(247,244,239,.08);border-radius:10px;height:6px} .bp-body{padding:8px;min-height:200px;background:var(--warm);display:flex;flex-direction:column;gap:4px} .bp-nav{display:flex;align-items:center;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--border)} .bp-logo{font-family:'Noto Kufi Arabic',sans-serif;font-size:12px;font-weight:700;color:var(--ember)} .bp-menu{width:12px;height:1px;background:var(--ink);position:relative} .bp-menu::after{content:'';position:absolute;top:3px;left:0;right:0;height:1px;background:var(--ink)} .bp-menu::before{content:'';position:absolute;top:6px;left:0;right:0;height:1px;background:var(--ink)} .bp-hero-block{height:32px;background:var(--ember);opacity:.08;margin:4px 0;border-radius:1px} .bp-card-row{display:flex;gap:4px} .bp-card-block{flex:1;height:40px;border:1px solid var(--border);background:var(--void)} .bp-footer-block{height:12px;background:var(--parch);margin-top:auto;border-radius:1px} .info-wrap{display:flex;align-items:flex-start;justify-content:center;gap:0} .info-panel{max-width:320px;direction:rtl;display:flex;flex-direction:column;align-items:center} .info-main-stat{text-align:center;margin-bottom:32px;position:relative} .info-main-num{font-family:'DM Serif Display',serif;font-size:96px;color:var(--ember);line-height:1;direction:ltr} .info-main-label{font-family:'Noto Kufi Arabic',sans-serif;font-size:18px;font-weight:700;color:var(--ink);margin-top:8px;letter-spacing:1px} .info-main-sub{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:12px;color:var(--ink-soft);margin-top:4px} .info-divider{width:48px;height:1px;background:linear-gradient(90deg,transparent,var(--ember),transparent);margin:0 auto 32px} .info-mini-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2px;width:100%} .info-mini-stat{text-align:center;padding:20px 12px;border:1px solid var(--border);background:var(--void);display:flex;flex-direction:column;align-items:center;gap:8px;cursor:default;transition:border-color .3s} .info-mini-stat:hover{border-color:var(--ember)} .info-mini-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--ember)} .info-mini-num{font-family:'DM Serif Display',serif;font-size:22px;color:var(--ember);direction:ltr;line-height:1} .info-mini-label{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:12px;color:var(--ink-soft)} .info-timeline{display:flex;flex-direction:column;gap:0;margin-top:32px;width:100%;position:relative;padding-right:20px} .info-timeline::before{content:'';position:absolute;right:6px;top:0;bottom:0;width:1px;background:var(--border)} .info-tl-item{display:flex;align-items:flex-start;gap:16px;padding:16px 0;position:relative;cursor:default} .info-tl-dot{width:12px;height:12px;border-radius:50%;background:var(--ember);border:3px solid var(--void);position:absolute;right:-20px;top:20px;z-index:1;flex-shrink:0} .info-tl-content{padding-right:4px} .info-tl-year{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;color:var(--ember);direction:ltr} .info-tl-text{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:12px;color:var(--ink);line-height:1.7;margin-top:4px} @import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;600;700;800&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600&family=DM+Serif+Display&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); .sec{position:relative;max-width:1200px;margin:0 auto;padding:80px 32px 64px} .sec.sl{background:var(--void)} .sec.sw2{background:var(--warm)} .sec.sp{background:var(--parch)} .sec.sd{background:var(--dk0);color:var(--dkt)} .sec.sd0{background:var(--dk1);color:var(--dkt)} .sh{display:flex;align-items:center;gap:16px;margin-bottom:48px} .sh.rv{flex-direction:row;direction:ltr} .sh span.shn{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--ember);text-transform:uppercase} .sec.sd .sh span.shn,.sec.sd0 .sh span.shn{color:var(--ember)} .sh .shr{flex:1;height:1px;background:var(--border)} .sec.sd .sh .shr,.sec.sd0 .sh .shr{background:rgba(247,244,239,0.12)} .sh span.sht{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:400;color:var(--ink-soft);letter-spacing:.04em} .sec.sd .sh span.sht,.sec.sd0 .sh span.sht{color:var(--dks)} .ar{font-family:'Noto Kufi Arabic',sans-serif;direction:rtl} .en{font-family:'IBM Plex Mono',monospace;direction:ltr} .serif{font-family:'DM Serif Display',serif} .mono{font-family:'IBM Plex Mono',monospace} @import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;600;700;800&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600&family=DM+Serif+Display&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} .sec{padding:100px 40px;position:relative;overflow:hidden} .sec.sl{background:var(--void)} .sec.sw2{background:var(--warm)} .sec.sp{background:var(--parch)} .sec.sd{background:var(--dk0);color:var(--dkt)} .sec.sd0{background:var(--dk1);color:var(--dkt)} .sh{display:flex;align-items:center;gap:16px;margin-bottom:56px;flex-wrap:wrap} .sh.rv{direction:rtl} .shn{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:500;color:var(--ember);letter-spacing:.08em} .shr{width:48px;height:1px;background:var(--ember);opacity:.5} .sht{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:400;color:var(--ink-soft);letter-spacing:.04em} .sec.sd .shn,.sec.sd0 .shn{color:var(--ember)} .sec.sd .shr,.sec.sd0 .shr{background:var(--ember)} .sec.sd .sht,.sec.sd0 .sht{color:var(--dks)} .ctn{max-width:960px;margin:0 auto} .q-card{ background:var(--warm);border:1px solid var(--border);border-radius:16px;padding:48px; box-shadow:0 2px 24px rgba(0,0,0,.04);direction:rtl;font-family:'IBM Plex Sans Arabic',sans-serif}.q-card-title{font-family:'Noto Kufi Arabic',sans-serif;font-size:28px;font-weight:700;color:var(--ink);margin-bottom:8px} .q-card-sub{font-size:14px;color:var(--ink-soft);margin-bottom:40px;padding-bottom:24px;border-bottom:1px solid var(--border)} .q-group{margin-bottom:36px} .q-group-title{ font-family:'Noto Kufi Arabic',sans-serif;font-size:16px;font-weight:700;color:var(--ember); margin-bottom:20px;display:flex;align-items:center;gap:10px}.q-group-title::before{content:'';width:4px;height:20px;background:var(--ember);border-radius:2px} .q-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:16px} .q-row.full{grid-template-columns:1fr} .q-label{font-size:13px;font-weight:500;color:var(--ink);margin-bottom:8px;display:block} .q-input{ width:100%;padding:10px 0;border:none;border-bottom:2px solid var(--border); font-family:'IBM Plex Sans Arabic',sans-serif;font-size:15px;color:var(--ink); background:transparent;outline:none;transition:border-color .3s}.q-input:focus{border-bottom-color:var(--ember)} .q-input::placeholder{color:#bbb} .q-select{ width:100%;padding:10px 0;border:none;border-bottom:2px solid var(--border); font-family:'IBM Plex Sans Arabic',sans-serif;font-size:15px;color:var(--ink); background:transparent;outline:none;appearance:none;cursor:pointer;transition:border-color .3s; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23787878' fill='none' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:left 0 center}.q-select:focus{border-bottom-color:var(--ember)} .q-checks{display:flex;flex-wrap:wrap;gap:12px} .q-check{ display:flex;align-items:center;gap:8px;padding:8px 16px;border:1px solid var(--border); border-radius:8px;cursor:pointer;font-size:14px;color:var(--ink);transition:all .25s;user-select:none}.q-check:hover{border-color:var(--ember);background:var(--ember-pale)} .q-check input{display:none} .q-check .ck{ width:18px;height:18px;border:2px solid var(--border2);border-radius:4px; display:flex;align-items:center;justify-content:center;transition:all .25s;flex-shrink:0}.q-check input:checked+.ck{background:var(--ember);border-color:var(--ember)} .q-check input:checked+.ck::after{content:'✓';color:#fff;font-size:12px;font-weight:700} .q-textarea{ width:100%;min-height:100px;padding:12px 0;border:none;border-bottom:2px solid var(--border); font-family:'IBM Plex Sans Arabic',sans-serif;font-size:15px;color:var(--ink); background:transparent;outline:none;resize:vertical;transition:border-color .3s}.q-textarea:focus{border-bottom-color:var(--ember)} .q-submit{ display:inline-flex;align-items:center;gap:8px;padding:14px 40px; background:var(--ember);color:#fff;border:none;border-radius:10px; font-family:'Noto Kufi Arabic',sans-serif;font-size:15px;font-weight:600; cursor:pointer;transition:all .3s;margin-top:8px}.q-submit:hover{background:var(--ember-dim);transform:translateY(-1px);box-shadow:0 6px 20px rgba(232,69,10,.25)} .rpt-card{ background:var(--warm);border:1px solid var(--border);border-radius:16px;overflow:hidden; box-shadow:0 2px 24px rgba(0,0,0,.04);direction:rtl;font-family:'IBM Plex Sans Arabic',sans-serif}.rpt-head{padding:32px 40px;background:linear-gradient(135deg,var(--ember),var(--ember-dim));color:#fff} .rpt-head h3{font-family:'Noto Kufi Arabic',sans-serif;font-size:22px;font-weight:700;margin-bottom:12px} .rpt-meta{display:flex;flex-wrap:wrap;gap:24px;font-size:13px;opacity:.9} .rpt-meta span{display:flex;align-items:center;gap:6px} .rpt-body{padding:36px 40px} .rpt-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:32px} .rpt-stat{ padding:20px;background:var(--surf);border-radius:12px;text-align:center; border:1px solid var(--border)}.rpt-stat-label{font-size:12px;color:var(--ink-soft);margin-bottom:8px;font-family:'IBM Plex Mono',monospace;letter-spacing:.04em} .rpt-stat-val{font-family:'DM Serif Display',serif;font-size:32px;color:var(--ink)} .rpt-stat-val.ember{color:var(--ember)} .rpt-progress{margin-bottom:32px} .rpt-progress-label{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-soft);margin-bottom:10px} .rpt-progress-bar{height:10px;background:var(--surf);border-radius:10px;overflow:hidden} .rpt-progress-fill{height:100%;width:72%;background:linear-gradient(90deg,var(--ember),var(--ember-sec));border-radius:10px;transition:width 1s} .rpt-section-title{ font-family:'Noto Kufi Arabic',sans-serif;font-size:15px;font-weight:700;color:var(--ink); margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid var(--border)}.rpt-milestones{margin-bottom:32px} .rpt-milestone{ display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:10px; margin-bottom:10px;border:1px solid var(--border);transition:all .25s}.rpt-milestone:hover{border-color:var(--ember);background:var(--ember-pale)} .rpt-milestone-icon{ width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center; font-size:14px;flex-shrink:0}.rpt-milestone-icon.done{background:#d4edda;color:#155724} .rpt-milestone-icon.prog{background:var(--ember-pale);color:var(--ember)} .rpt-milestone-icon.pend{background:var(--surf);color:var(--ink-soft)} .rpt-milestone-text{font-size:14px;color:var(--ink);flex:1} .rpt-milestone-tag{ font-size:12px;padding:4px 10px;border-radius:20px;font-weight:500;flex-shrink:0}.rpt-milestone-tag.done{background:#d4edda;color:#155724} .rpt-milestone-tag.prog{background:var(--ember-pale);color:var(--ember)} .rpt-milestone-tag.pend{background:var(--surf);color:var(--ink-soft)} .rpt-next{margin-bottom:32px} .rpt-next li{ list-style:none;padding:8px 0;font-size:14px;color:var(--ink);display:flex;align-items:flex-start;gap:10px}.rpt-next li::before{content:'→';color:var(--ember);font-weight:700;flex-shrink:0} .rpt-foot{ padding:20px 40px;border-top:1px solid var(--border);display:flex;justify-content:space-between; align-items:center;font-size:12px;color:var(--ink-soft)}.rpt-foot-logo{font-family:'Noto Kufi Arabic',sans-serif;font-weight:700;color:var(--ember);font-size:15px} .mn-card{ background:var(--warm);border:1px solid var(--border);border-radius:16px;overflow:hidden; box-shadow:0 2px 24px rgba(0,0,0,.04);direction:rtl;font-family:'IBM Plex Sans Arabic',sans-serif}.mn-head{padding:28px 40px;border-bottom:1px solid var(--border);background:var(--surf)} .mn-head h3{font-family:'Noto Kufi Arabic',sans-serif;font-size:20px;font-weight:700;color:var(--ink);margin-bottom:12px} .mn-meta{display:flex;flex-wrap:wrap;gap:20px;font-size:13px;color:var(--ink-soft)} .mn-meta span{display:flex;align-items:center;gap:6px} .mn-body{padding:32px 40px;display:grid;grid-template-columns:1fr 1fr;gap:28px} .mn-col-title{ font-family:'Noto Kufi Arabic',sans-serif;font-size:14px;font-weight:700;color:var(--ember); margin-bottom:14px;display:flex;align-items:center;gap:8px}.mn-attendees{list-style:none} .mn-attendee{ display:flex;align-items:center;gap:12px;padding:8px 0;font-size:14px;color:var(--ink); border-bottom:1px solid var(--surf)}.mn-att-avatar{ width:30px;height:30px;border-radius:50%;background:var(--ember-pale);color:var(--ember); display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex-shrink:0}.mn-att-role{font-size:12px;color:var(--ink-soft);margin-right:auto} .mn-agenda{list-style:none} .mn-agenda li{ padding:6px 0;font-size:14px;color:var(--ink);display:flex;align-items:center;gap:10px}.mn-agenda li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ember);flex-shrink:0} .mn-full{grid-column:1/-1} .mn-notes{ padding:16px 20px;background:var(--surf);border-radius:10px;font-size:14px; line-height:1.8;color:var(--ink-soft);border-right:3px solid var(--ember-pale)}.mn-actions{width:100%;border-collapse:collapse;font-size:13px} .mn-actions th{ text-align:right;padding:10px 12px;border-bottom:2px solid var(--border); font-weight:600;color:var(--ink);font-size:12px}.mn-actions td{padding:10px 12px;border-bottom:1px solid var(--surf);color:var(--ink-soft)} .mn-actions tr:last-child td{border-bottom:none} .tm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;direction:rtl} .tm-card{ background:var(--warm);border:1px solid var(--border);border-radius:14px;padding:32px 24px; text-align:center;transition:all .35s;position:relative;overflow:hidden}.tm-card::before{ content:'';position:absolute;top:0;left:0;right:0;height:4px; background:linear-gradient(90deg,var(--ember),var(--ember-sec));opacity:0;transition:opacity .35s}.tm-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.08)} .tm-card:hover::before{opacity:1} .tm-avatar{ width:72px;height:72px;border-radius:50%;margin:0 auto 16px; display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700; color:#fff;font-family:'Noto Kufi Arabic',sans-serif}.tm-avatar.c1{background:var(--ember)} .tm-avatar.c2{background:var(--ember-sec)} .tm-avatar.c3{background:var(--ember-dim)} .tm-avatar.c4{background:#C75B39} .tm-avatar.c5{background:#A04A2B} .tm-avatar.c6{background:var(--ember-pale);color:var(--ember)} .tm-name{font-family:'Noto Kufi Arabic',sans-serif;font-size:16px;font-weight:700;color:var(--ink);margin-bottom:4px} .tm-role{font-size:13px;color:var(--ink-soft);margin-bottom:12px} .tm-email{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);margin-bottom:14px;direction:ltr;text-align:center} .tm-dept{ display:inline-block;padding:4px 14px;border-radius:20px;font-size:12px;font-weight:500; background:var(--ember-pale);color:var(--ember)}.tt-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;direction:rtl} .tt-card-lg{ grid-column:1/-1;background:var(--warm);border:1px solid var(--border);border-radius:16px; padding:44px;display:flex;gap:32px;align-items:flex-start;transition:all .35s}.tt-card-lg:hover{box-shadow:0 8px 32px rgba(0,0,0,.06)} .tt-quote-icon{font-size:48px;color:var(--ember);opacity:.2;font-family:'DM Serif Display',serif;line-height:1;flex-shrink:0} .tt-lg-content{flex:1} .tt-stars{display:flex;gap:4px;margin-bottom:12px;direction:ltr;justify-content:flex-start} .tt-star{color:var(--ember);font-size:16px} .tt-text{font-size:17px;line-height:1.9;color:var(--ink);margin-bottom:20px} .tt-author{display:flex;align-items:center;gap:14px} .tt-author-img{ width:48px;height:48px;border-radius:50%;background:var(--ember);color:#fff; display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600; font-family:'Noto Kufi Arabic',sans-serif}.tt-author-info .name{font-family:'Noto Kufi Arabic',sans-serif;font-weight:700;font-size:15px;color:var(--ink)} .tt-author-info .comp{font-size:12px;color:var(--ink-soft)} .tt-card-sm{ background:var(--warm);border:1px solid var(--border);border-radius:14px;padding:28px; transition:all .35s}.tt-card-sm:hover{box-shadow:0 6px 20px rgba(0,0,0,.05);border-color:var(--ember)} .tt-sm-text{font-size:14px;line-height:1.8;color:var(--ink);margin-bottom:16px;position:relative;padding-right:16px;border-right:2px solid var(--ember)} .tt-sm-author{display:flex;justify-content:space-between;align-items:center} .tt-sm-name{font-family:'Noto Kufi Arabic',sans-serif;font-weight:600;font-size:14px;color:var(--ink)} .tt-sm-role{font-size:12px;color:var(--ink-soft)} .tt-card-video{ background:var(--dk0);border-radius:14px;overflow:hidden;position:relative; aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;cursor:pointer; transition:all .35s}.tt-card-video:hover{transform:scale(1.02)} .tt-play{ width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.15); backdrop-filter:blur(8px);border:2px solid rgba(255,255,255,.3); display:flex;align-items:center;justify-content:center;transition:all .3s}.tt-card-video:hover .tt-play{background:var(--ember);border-color:var(--ember)} .tt-play-tri{width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:16px solid #fff;margin-right:-4px} .tt-video-label{ position:absolute;bottom:16px;right:16px;color:rgba(255,255,255,.7);font-size:12px; font-family:'IBM Plex Mono',monospace}.tk-card{ background:var(--dk0);border-radius:16px;overflow:hidden; box-shadow:0 4px 40px rgba(0,0,0,.3);font-family:'IBM Plex Mono',monospace}.tk-head{ padding:16px 28px;border-bottom:1px solid rgba(255,255,255,.08); display:flex;align-items:center;gap:10px}.tk-dot{width:10px;height:10px;border-radius:50%} .tk-dot.r{background:#ff5f56} .tk-dot.y{background:#ffbd2e} .tk-dot.g{background:#27c93f} .tk-title{font-size:13px;color:var(--dks);margin-right:auto} .tk-body{padding:28px;font-size:13px;line-height:1.9;overflow-x:auto} .tk-comment{color:#555;font-style:italic} .tk-key{color:var(--dkt)} .tk-str{color:var(--ember)} .tk-num{color:#d19a66} .tk-punct{color:var(--dks)} .tk-brace{color:#8b8b8b} .tk-section-label{ display:inline-block;padding:2px 10px;background:rgba(232,69,10,.15);color:var(--ember); border-radius:4px;font-size:12px;font-weight:500;margin-bottom:12px}.mx-table{width:100%;border-collapse:separate;border-spacing:0;font-family:'IBM Plex Sans Arabic',sans-serif;direction:rtl;background:var(--warm);border-radius:14px;overflow:hidden;border:1px solid var(--border)} .mx-table th{ padding:16px 20px;background:var(--surf);font-size:13px;font-weight:600;color:var(--ink); text-align:right;border-bottom:2px solid var(--border);white-space: nowrap}.mx-table td{padding:14px 20px;font-size:14px;color:var(--ink);border-bottom:1px solid var(--surf);text-align:right;white-space: nowrap} .mx-table tr:last-child td{border-bottom:none} .mx-table tr:hover td{background:var(--ember-pale)} .mx-comp{font-weight:600;display:flex;align-items:center;gap:8px;direction:ltr}.mx-badge{ display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:20px; font-size:12px;font-weight:500;white-space: nowrap}.mx-badge.done{background:#d4edda;color:#155724} .mx-badge.prog{background:var(--ember-pale);color:var(--ember)} .mx-badge.plan{background:var(--surf);color:var(--ink-soft);border:1px solid var(--border)} .mx-check{color:#28a745;font-size:15px} .mx-spinner{display:inline-block;animation:mxspin 1s linear infinite;font-size:14px} .cl-timeline{position:relative;padding-right:32px;direction:rtl} .cl-entry{position:relative;margin-bottom:40px} .cl-entry:last-child{margin-bottom:0} .cl-dot{ position:absolute;right:-29px;top:6px;width:16px;height:16px;border-radius:50%; border:3px solid var(--ember);background:#fff;z-index:1}.cl-entry:last-child .cl-dot{background:var(--ember)} .cl-ver{ display:flex;align-items:center;gap:12px;margin-bottom:12px}.cl-ver-num{ font-family:'DM Serif Display',serif;font-size:24px;color:var(--ember)}.cl-ver-date{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft)} .cl-ver-title{font-family:'Noto Kufi Arabic',sans-serif;font-size:16px;font-weight:700;color:var(--ink)} .cl-items{list-style:none} .cl-item{ display:flex;align-items:center;gap:10px;padding:6px 0;font-size:14px;color:var(--ink)}.cl-tag{ padding:2px 8px;border-radius:4px;font-size:12px;font-weight:600;font-family:'IBM Plex Mono',monospace; flex-shrink:0}.cl-tag.add{background:#d4edda;color:#155724} .cl-tag.chg{background:#cce5ff;color:#004085} .cl-tag.fix{background:#fff3cd;color:#856404} .cl-tag.dep{background:#f8d7da;color:#721c24} .nc-card{ background:var(--dk0);border-radius:16px;overflow:hidden; box-shadow:0 4px 32px rgba(0,0,0,.25);font-family:'IBM Plex Mono',monospace}.nc-head{ padding:16px 28px;border-bottom:1px solid rgba(255,255,255,.08); display:flex;align-items:center;gap:10px}.nc-title{font-size:13px;color:var(--dks);margin-right:auto} .nc-body{padding:32px} .nc-pattern{ display:flex;align-items:center;gap:8px;padding:16px 20px;background:rgba(255,255,255,.05); border-radius:10px;margin-bottom:28px;font-size:15px;flex-wrap:wrap;direction:ltr}.nc-part{padding:4px 12px;border-radius:6px;font-size:13px;font-weight:500} .nc-part.cat{background:rgba(232,69,10,.2);color:var(--ember)} .nc-part.name{background:rgba(247,244,239,.15);color:var(--dkt)} .nc-part.var{background:rgba(212,86,58,.2);color:var(--ember-sec)} .nc-part.size{background:rgba(247,244,239,.1);color:var(--dks)} .nc-ext{color:var(--dks)} .nc-sep{color:var(--dks);opacity:.4} .nc-section-label{font-size:12px;color:var(--ember);font-weight:600;margin-bottom:14px;letter-spacing:.05em} .nc-examples{margin-bottom:28px} .nc-ex{padding:8px 16px;background:rgba(255,255,255,.03);border-radius:6px;margin-bottom:6px;font-size:13px;direction:ltr;transition:all .25s;border:1px solid transparent} .nc-ex:hover{background:rgba(232,69,10,.08);border-color:rgba(232,69,10,.2)} .nc-ex .nc-filename{color:var(--dkt)} .nc-ex .nc-ext-hl{color:var(--ember)} .nc-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .nc-cat{ padding:14px 16px;background:rgba(255,255,255,.03);border-radius:8px;border:1px solid rgba(255,255,255,.06); transition:all .25s}.nc-cat:hover{border-color:rgba(232,69,10,.3)} .nc-cat-code{font-size:14px;font-weight:600;color:var(--ember);margin-bottom:4px} .nc-cat-name{font-size:12px;color:var(--dks);opacity:.7;font-family:'IBM Plex Sans Arabic',sans-serif;direction:rtl} .ck-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;direction:rtl} .ck-cat{background:var(--warm);border:1px solid var(--border);border-radius:14px;padding:28px;transition:all .35s} .ck-cat:hover{box-shadow:0 6px 24px rgba(0,0,0,.05)} .ck-cat-title{ font-family:'Noto Kufi Arabic',sans-serif;font-size:15px;font-weight:700;color:var(--ink); margin-bottom:18px;display:flex;align-items:center;gap:10px}.ck-cat-icon{color:var(--ember);font-size:18px} .ck-items{list-style:none} .ck-item{ display:flex;align-items:center;gap:12px;padding:8px 0;font-size:14px;color:var(--ink); border-bottom:1px solid var(--surf)}.ck-item:last-child{border-bottom:none} .ck-box{ width:20px;height:20px;border:2px solid var(--border2);border-radius:5px; display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .25s;cursor:pointer}.ck-box.checked{background:var(--ember);border-color:var(--ember)} .ck-box.checked::after{content:'✓';color:#fff;font-size:12px;font-weight:700} .ck-box.pending{border-color:var(--border)} .ck-progress{ margin-top:14px;padding-top:12px;border-top:1px solid var(--border); display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink-soft)}.ck-bar{flex:1;height:4px;background:var(--surf);border-radius:4px;overflow:hidden} .ck-bar-fill{height:100%;background:var(--ember);border-radius:4px;transition:width .5s} .ck-pct{font-family:'IBM Plex Mono',monospace;font-weight:600;color:var(--ember);min-width:32px} body{transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1)}body.theme-dark{--void: #0A0A0A; --warm: #0E0E0E; --parch: #161616; --ink: #F7F4EF; --ink2: rgba(247, 244, 239, 0.9); --ink3: rgba(247, 244, 239, 0.8); --ink-soft: rgba(247, 244, 239, 0.55); --border: rgba(247, 244, 239, 0.12); --border2: rgba(247, 244, 239, 0.22); --surf: rgba(247, 244, 239, 0.04); --glass: rgba(10, 10, 10, 0.7); --dk0: #060606; --dk1: #0A0A0A; --dk2: #0E0E0E; --dk3: #121212; --dkt: #F7F4EF; --dkm: rgba(247,244,239,0.7); --dks: rgba(247,244,239,0.4)}body.theme-dark nav.sc{background: rgba(10, 10, 10, 0.94)}.nav-controls{display: flex; align-items: center; gap: 16px; margin-left: 20px}.theme-toggle-btn:hover svg{transform: rotate(20deg) scale(1.1)}#sidebarDrawer{position: fixed; top: 0; right: -360px; width: 360px; height: 100vh; background: var(--glass); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-left: 1px solid var(--border); z-index: 9990; transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; box-shadow: -10px 0 30px rgba(0,0,0,0.05)}body.theme-dark #sidebarDrawer{box-shadow: -10px 0 30px rgba(0,0,0,0.5)}#sidebarDrawer.open{right: 0}.highlight-flash{animation: sectionGlow 1.8s ease-in-out 1; border: 1px solid transparent}.skeleton-overlay{position: absolute; inset: 0; background: var(--warm); z-index: 10; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; opacity: 0; pointer-events: none; transition: opacity 0.3s ease}.skeleton-overlay.active{opacity: 1; pointer-events: auto}.skeleton-block{background: linear-gradient(90deg, var(--surf) 25%, var(--border) 37%, var(--surf) 63%); background-size: 400% 100%; animation: skeletonPulse 1.4s ease infinite}.sk-badge{width: 60px; height: 16px; margin-bottom: 16px}.sk-title{width: 120px; height: 20px; margin-bottom: 12px}.sk-desc-1{width: 100%; height: 14px; margin-bottom: 6px}.sk-desc-2{width: 70%; height: 14px}.sk-btn{width: 100%; height: 38px}#toastContainer{position: fixed; bottom: 30px; left: 30px; z-index: 10000; display: flex; flex-direction: column; gap: 10px; direction: rtl}.mobile-only-link{display: none}.sec{padding: 100px var(--site-gap) !important}.tokens-customizer{position: fixed; bottom: 84px; right: 24px; width: 320px; background: var(--glass); border: 1px solid var(--border); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15); border-radius: var(--base-radius); z-index: 998; display: flex; flex-direction: column; opacity: 0; transform: translateY(20px) scale(0.95); pointer-events: none; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); direction: rtl}.tokens-customizer.open{opacity: 1; transform: translateY(0) scale(1); pointer-events: auto}.tokens-customizer-trigger{position: fixed; bottom: 24px; right: 24px; width: 48px; height: 48px; border-radius: 50%; background: var(--glass); border: 1px solid var(--ember); color: var(--ember); box-shadow: 0 4px 20px rgba(232, 69, 10, 0.25); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 998; transition: all 0.3s ease}.tokens-customizer-trigger:hover{background: var(--ember); color: var(--void); box-shadow: 0 6px 24px rgba(232, 69, 10, 0.4); transform: rotate(45deg) scale(1.05)}.tc-header{padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center}.tc-header h4{font-family: 'Noto Kufi Arabic', sans-serif; font-size: 13px; color: var(--ink); font-weight: 700}.tc-close{background: none; border: none; font-size: 20px; color: var(--ink-soft); cursor: pointer; transition: color 0.2s}.tc-close:hover{color: var(--ember)}.tc-body{padding: 20px; display: flex; flex-direction: column; gap: 20px}.tc-control{display: flex; flex-direction: column; gap: 8px}.tc-label{display: flex; justify-content: space-between; font-size:12px; font-family: 'IBM Plex Sans Arabic', sans-serif; color: var(--ink2)}.tc-value{font-family: 'IBM Plex Mono', monospace; color: var(--ember); font-weight: 600}.tc-range{-webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: var(--border2); outline: none; transition: background 0.3s}.tc-range::-webkit-slider-thumb{-webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--ember); border: 2px solid var(--void); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); cursor: pointer; transition: transform 0.1s ease}.tc-range::-webkit-slider-thumb:hover{transform: scale(1.2)}.tc-divider{height: 1px; background: var(--border); margin: 4px 0}.tc-actions{display: flex; flex-direction: column; gap: 10px}.icon-cell{position: relative; cursor: pointer; transition: all 0.3s ease}.icon-cell::after{content: ''; position: absolute; top: 8px; right: 8px; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--border2); background: var(--void); transition: all 0.2s ease; opacity: 0.7}.icon-cell.selected{border-color: var(--ember) !important; background: var(--ember-ghost) !important; box-shadow: 0 0 12px rgba(232, 69, 10, 0.15)}.icon-cell.selected::after{background: var(--ember); border-color: var(--ember); opacity: 1}.icon-cell.selected::before{content: ''; position: absolute; top: 11px; right: 13px; width: 4px; height: 7px; border: solid var(--void); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); z-index: 2}.icon-packager-bar{position: fixed; bottom: -100px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 600px; background: var(--glass); border: 1px solid var(--ember); backdrop-filter: blur(16px); border-radius: var(--base-radius); box-shadow: 0 12px 40px rgba(232, 69, 10, 0.18); padding: 16px 28px; display: flex; justify-content: space-between; align-items: center; z-index: 999; transition: bottom 0.4s cubic-bezier(0.16, 1, 0.3, 1); direction: rtl}.icon-packager-bar.show{bottom: 24px}.logo-cell{position: relative}.logo-cell .safe-zone-overlay{position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; z-index: 10}:focus-visible{outline: 2px solid var(--ember) !important; outline-offset: 3px !important; box-shadow: 0 0 10px rgba(232, 69, 10, 0.4) !important}.wizard-container{background: var(--surf); border: 1px solid var(--border); padding: 32px; max-width: 800px; margin: 30px auto; direction: rtl}.color-tools-grid{display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 30px; margin-top: 32px}.palette-gen-output{display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; min-height: 120px}.gen-color-card{padding: 24px 16px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 130px; border: 1px solid rgba(0,0,0,0.05); box-shadow: 0 4px 12px rgba(0,0,0,0.02); transition: transform 0.2s ease, box-shadow 0.2s ease}.gen-color-card:hover{transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,0.08)}.gen-color-name{font-family: 'IBM Plex Sans Arabic', sans-serif; font-size:12px; font-weight: 600; opacity: 0.8; margin-bottom: 4px}.gen-color-hex{font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 700; letter-spacing: 0.5px}@media print{@page{size: A4 portrait; margin: 14mm 10mm 14mm 10mm}*, *::before, *::after{-webkit-print-color-adjust: exact !important; color-adjust: exact !important; print-color-adjust: exact !important; box-shadow: none !important; text-shadow: none !important}html, body{background: #FAF8F4 !important; color: #141414 !important; font-size: 11pt !important; line-height: 1.5 !important; overflow: visible !important; width: 100% !important; height: auto !important}#mainNav, #cd, #cr, #prog, .grain-overlay, .splash-screen, #shortcutModal, #searchModal, #tocDrawer, #tocToggleBtn, #sectionProgress, #backToTop, .theme-toggle-btn, .presentation-toggle-btn, .sidebar-toggle-btn, #sidebarDrawer, .sidebar-overlay, .tokens-customizer-trigger, .nav-hamburger, .nav-controls, .mobile-bottom-nav, .cookie-consent-banner, .typo-playground-controls, .typo-presets-bar, .typo-css-output-bar, .icon-geo-controls, .sonic-triggers-grid, .color-gen-controls, .contrast-checker-container, .upload-dropzone input, .upload-progress-wrap, .toast, .ncta, .submit-btn, .es-cta, button{display: none !important}.sec, .section{page-break-inside: avoid !important; break-inside: avoid !important; padding: 24px 0 !important; border-bottom: 1px solid rgba(20, 20, 20, 0.15) !important; max-width: 100% !important}.cover-page, #hero, #positioning, #colors, #type, #logo, #apps, #voice, #D-113{page-break-after: always !important; break-after: always !important}svg{max-width: 100% !important; height: auto !important; page-break-inside: avoid !important; shape-rendering: geometricPrecision !important; text-rendering: geometricPrecision !important}h1, h2, h3, h4, .sh, .sec-header{page-break-after: avoid !important; break-after: avoid !important}.color-grid, .color-grid-2, .icon-grid, .brand-arch-grid, .motion-curves-grid, .photo-grid{display: grid !important; page-break-inside: avoid !important}} .sec, .section{content-visibility: auto; contain-intrinsic-size: 1px 800px}#cd, #cr, #prog, .ambient-glow, .grain-overlay, .d63-box-wrapper, .card-3d{will-change: transform; transform: translateZ(0)}.tt-grid .tt-bubble{max-width:none} .d1{transition-delay:.1s} .d2{transition-delay:.2s} .d3{transition-delay:.3s} .d4{transition-delay:.4s} .pat-cell{height:200px;position:relative;overflow:hidden;cursor:default;min-width:0} .pat-cell svg{max-width:100%;height:auto;display:block} .pat-cell:hover .pat-overlay{opacity:1} .pat-overlay{position:absolute;inset:0;background:rgba(232,69,10,.08);opacity:0;transition:opacity .3s;display:flex;align-items:center;justify-content:center} .pat-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;color:var(--ember);text-transform:uppercase;direction:ltr} .dm-header{display:flex;align-items:center;justify-content:space-between;direction:rtl} .dm-title{font-family:'Noto Kufi Arabic',sans-serif;font-size:20px;font-weight:700;color:var(--ink)} .dm-date{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);direction:ltr} .dm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .dm-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px} .dm-card{background:var(--warm);border:1px solid var(--border);padding:18px} .dm-table{background:var(--warm);border:1px solid var(--border)} .toast-demo{display:flex;flex-direction:column;gap:12px;max-width:420px} .toast-success{background:#F0F7F4;border-color:#1C7A55} .toast-warn{background:#FBF5E8;border-color:#B88A0A} .toast-error{background:#FAF0F0;border-color:#A32D2D} .toast-info{background:#FDF0ED;border-color:var(--ember)} .toast-icon{width:18px;height:18px;flex-shrink:0;margin-top:2px} .toast-title{font-family:'Noto Kufi Arabic',sans-serif;font-size:13px;font-weight:700;margin-bottom:3px} .toast-msg{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:12px;line-height:1.7;color:var(--ink-soft)} .toast-close{margin-right:auto;font-family:'IBM Plex Mono',monospace;font-size:12px;background:none;border:none;cursor:none;color:var(--ink-soft);opacity:.5} .audit-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px} .audit-item{padding:18px 24px;display:flex;align-items:flex-start;gap:14px;border:1px solid var(--border);background:var(--void);direction:rtl;cursor:none;transition:background .2s} .audit-item:hover{background:var(--warm)} .audit-cb{width:18px;height:18px;border:1.5px solid var(--border2);flex-shrink:0;margin-top:2px;position:relative;cursor:none;transition:border-color .2s} .audit-cb.chk{border-color:var(--ember);background:var(--ember)} .audit-cb.chk::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:white;font-family:'IBM Plex Mono',monospace} .audit-text{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:13px;color:var(--ink);line-height:1.6} .audit-category{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ember);letter-spacing:2px;margin-bottom:12px;direction:ltr;text-transform:uppercase} .value-card{display:flex;align-items:flex-start;gap:20px;padding:24px 28px;background:var(--surf);border:1px solid var(--border);cursor:default;transition:border-color .3s,background .3s;direction:rtl} .value-card:hover{border-color:var(--ember);background:var(--ember-ghost)} .cc-inner{height:240px;display:flex;flex-direction:column;justify-content:space-between;padding:26px 22px} .cc-circle{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.12)} .cc-name{font-family:'Noto Kufi Arabic',sans-serif;font-size:14px;font-weight:700;margin-bottom:3px} .cc-hex{font-family:'IBM Plex Mono',monospace;font-size:12px;opacity:.55;direction:ltr} .cc-role{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:1px;text-transform:uppercase;opacity:.35;direction:ltr;margin-top:3px} .anatomy-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center} .anatomy-notes{display:flex;flex-direction:column;gap:32px;direction:rtl} .splash-phone{width:280px;background:var(--dk0);border:1px solid rgba(247,244,239,.08);border-radius:32px;padding:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;position:relative} .splash-notch{width:90px;height:22px;background:var(--dk2);border-radius:0 0 14px 14px;margin:0 auto} .splash-canvas{width:100%;flex:1;min-height:460px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden} .splash-bg-particles{position:absolute;inset:0;pointer-events:none} .splash-logo-area{position:relative;width:160px;height:160px;display:flex;align-items:center;justify-content:center} .splash-orbit{position:absolute;inset:0;border:1px solid rgba(247,244,239,.04);border-radius:50%;animation:orbitSpin 8s linear infinite} .splash-orbit::before{content:'';position:absolute;top:-3px;left:50%;transform:translateX(-50%);width:6px;height:6px;background:var(--ember);border-radius:50%;box-shadow:0 0 8px rgba(232,69,10,.6)} .splash-orbit-2{position:absolute;inset:12px;border:1px dashed rgba(247,244,239,.03);border-radius:50%;animation:orbitSpin 12s linear infinite reverse} .splash-orbit-2::before{content:'';position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);width:4px;height:4px;background:var(--ember-pale);border-radius:50%;box-shadow:0 0 6px rgba(232,69,10,.4)} .splash-hex-main{position:relative;z-index:2;animation:hexAssemble 3s ease-in-out infinite} .splash-progress-ring{position:absolute;inset:-8px;z-index:1} .splash-progress-ring circle{fill:none;stroke-linecap:round;transform-origin:center;transform:rotate(-90deg)} .splash-ring-bg{stroke:rgba(247,244,239,.04);stroke-width:2} .splash-ring-fill{stroke:var(--ember);stroke-width:2;stroke-dasharray:565;stroke-dashoffset:565;animation:ringFill 3s ease-in-out infinite} .splash-ember-trail{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);width:2px;height:30px;background:linear-gradient(to bottom,var(--ember),transparent);opacity:0;animation:emberTrail 3s ease-in-out infinite;border-radius:1px} .splash-brand-text{margin-top:36px;text-align:center;position:relative;z-index:2} .splash-ar-name{font-family:'Noto Kufi Arabic',sans-serif;font-size:36px;font-weight:700;color:var(--dkt);letter-spacing:-1px;opacity:0;animation:textReveal 3s ease-in-out infinite} .splash-en-name{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;color:rgba(247,244,239,.3);direction:ltr;margin-top:6px;opacity:0;animation:textReveal 3s ease-in-out infinite .3s} .splash-status{margin-top:32px;display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;z-index:2} .splash-status-bar{width:120px;height:2px;background:rgba(247,244,239,.06);border-radius:1px;overflow:hidden} .splash-status-fill{height:100%;width:0;background:linear-gradient(90deg,var(--ember-dim),var(--ember),var(--ember-pale));border-radius:1px;animation:statusFill 3s ease-in-out infinite} .splash-status-text{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;color:rgba(247,244,239,.2);direction:ltr;text-transform:uppercase} .splash-home-indicator{width:100px;height:4px;background:rgba(247,244,239,.08);border-radius:2px;margin-top:auto;margin-bottom:12px} .rule-card{background:var(--surf);border:1px solid var(--border);padding:36px 28px;direction:rtl;cursor:default;position:relative;overflow:hidden;transition:border-color .3s} .rule-card:hover{border-color:var(--ember)} .rule-card::after{content:'';position:absolute;bottom:0;right:0;width:0;height:2px;background:var(--ember);transition:width .4s ease} .rule-card:hover::after{width:100%} .pitch-card{padding:64px 72px;background:var(--ember);position:relative;overflow:hidden;text-align:center} .pitch-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(212,86,58,.2) 0%,transparent 60%)} .pitch-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;color:var(--ember-pale);text-transform:uppercase;direction:ltr;margin-bottom:28px;opacity:.8} .pitch-text-ar{font-family:'Noto Kufi Arabic',sans-serif;font-size:clamp(20px,2.5vw,30px);font-weight:700;color:var(--void);direction:rtl;line-height:1.7;max-width:680px;margin:0 auto 24px} .pitch-text-en{font-family:'DM Serif Display',serif;font-size:clamp(13px,1.5vw,17px);color:var(--ember-pale);direction:ltr;letter-spacing:2px;opacity:.9} .splash-screen{width:280px;background:var(--dk1);border:1px solid rgba(247,244,239,.1);border-radius:28px;padding:48px 32px;display:flex;flex-direction:column;align-items:center;gap:20px} .anatomy-grid.section--dark{padding:60px;margin:0;background:var(--dk1)} .d63-section{position:relative;padding:80px 40px 100px;min-height:100vh;display:flex;flex-direction:column;align-items:center;overflow:hidden;background:radial-gradient(ellipse 60% 50% at 20% 30%,rgba(232,69,10,.04) 0%,transparent 70%),radial-gradient(ellipse 50% 60% at 80% 70%,rgba(232,69,10,.03) 0%,transparent 70%),radial-gradient(ellipse 80% 40% at 50% 10%,rgba(247,244,239,.8) 0%,transparent 60%),linear-gradient(170deg,var(--warm) 0%,var(--void) 40%,var(--parch) 100%)} .d63-section::before{content:'';position:absolute;inset:0;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");background-size:200px 200px;pointer-events:none;z-index:0} .d63-section::after{content:'';position:absolute;inset:0;opacity:.018;background-image:url("data:image/svg+xml,%3Csvg width='60' height='52' viewBox='0 0 60 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 15V37L30 52L0 37V15Z' fill='none' stroke='%23E8450A' stroke-width='0.5'/%3E%3C/svg%3E");background-size:60px 52px;pointer-events:none;z-index:0} .d63-ambient-glow{position:absolute;width:500px;height:500px;top:50%;left:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(232,69,10,.08) 0%,rgba(232,69,10,.02) 40%,transparent 70%);border-radius:50%;filter:blur(40px);pointer-events:none;z-index:0;animation:ambientPulse 6s ease-in-out infinite} .d63-section-header{display:flex;align-items:center;gap:16px;margin-bottom:60px;z-index:1;opacity:0;transform:translateY(20px);transition:all .8s cubic-bezier(.16,1,.3,1)} .d63-section-header.visible{opacity:1;transform:translateY(0)} .d63-section-number{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;letter-spacing:2px;color:var(--ember);background:var(--ember-ghost);border:1px solid rgba(232,69,10,.15);padding:6px 14px;border-radius:6px} .d63-header-rule{flex:1;height:1px;min-width:40px;background:linear-gradient(to left,var(--ember),transparent);opacity:.3} .d63-header-title{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--silver)} .d63-showcase{display:flex;justify-content:center;align-items:flex-start;gap:60px;flex-wrap:wrap;z-index:1;max-width:1200px;width:100%} .d63-box-column{display:flex;flex-direction:column;align-items:center;gap:0} .d63-box-scene{perspective:900px;width:320px;height:340px;display:flex;align-items:center;justify-content:center;position:relative;opacity:0;transform:scale(.8) rotateY(0);transition:all 1.2s cubic-bezier(.16,1,.3,1)} .d63-box-scene.visible{opacity:1;transform:scale(1) rotateY(0)} .d63-box-wrapper{width:200px;height:240px;position:relative;transform-style:preserve-3d;transform:rotateX(-12deg) rotateY(-22deg);transition:transform 1.2s cubic-bezier(.16,1,.3,1);animation:boxFloat 6s ease-in-out infinite} .d63-box-scene:hover .d63-box-wrapper{animation-play-state:paused} .d63-box-face{position:absolute;top:50%;left:50%;backface-visibility:hidden;border-radius:2px} .d63-box-front{width:200px;height:240px;transform:translate(-50%,-50%) translateZ(40px);background:linear-gradient(145deg,var(--ember),var(--ember-sec));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border:1px solid rgba(255,255,255,.05)} .d63-box-front::after{content:'';position:absolute;inset:0;border-radius:2px;background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,transparent 50%,rgba(0,0,0,.1) 100%);pointer-events:none} .d63-box-front::before{content:'';position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);width:160px;height:30px;background:radial-gradient(ellipse,rgba(255,255,255,.25) 0%,transparent 70%);filter:blur(8px);pointer-events:none;animation:innerGlow 4s ease-in-out infinite} .d63-box-front .d63-logo-svg{width:64px;height:64px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.2));position:relative;z-index:1} .d63-box-front .d63-kit-text{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.85);position:relative;z-index:1} .d63-box-front .d63-kit-text-ar{font-family:'Noto Kufi Arabic',sans-serif;font-size:13px;font-weight:600;color:rgba(255,255,255,.9);position:relative;z-index:1} .d63-box-back{width:200px;height:240px;transform:translate(-50%,-50%) rotateY(180deg) translateZ(40px);background:linear-gradient(145deg,var(--ember-dim),var(--ember));border:1px solid rgba(0,0,0,0.1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px} .d63-box-back::after{content:'';position:absolute;inset:0;border-radius:2px;background:linear-gradient(225deg,rgba(255,255,255,.08) 0%,transparent 40%,rgba(0,0,0,.15) 100%);pointer-events:none} .d63-box-left{width:80px;height:240px;transform:translate(-50%,-50%) rotateY(-90deg) translateZ(100px);background:linear-gradient(90deg, var(--ember-dim) 0%, var(--ember-dim) 46%, rgba(0,0,0,0.35) 50%, var(--ember-dim) 54%, var(--ember-dim) 100%)} .d63-box-left::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(255,255,255,.06) 0%,transparent 30%,rgba(0,0,0,.2) 100%);pointer-events:none} .d63-box-right{width:80px;height:240px;transform:translate(-50%,-50%) rotateY(90deg) translateZ(100px);background:linear-gradient(90deg, #9E3008 0%, #9E3008 46%, rgba(0,0,0,0.35) 50%, var(--ember-sec) 54%, var(--ember-sec) 100%)} .d63-box-right::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(255,255,255,.04) 0%,transparent 30%,rgba(0,0,0,.18) 100%);pointer-events:none} .d63-box-top-face{width:200px;height:80px;transform:translate(-50%,-50%) rotateX(90deg) translateZ(120px);background:#0C0C0C;border:1px solid rgba(232, 69, 10, 0.15);opacity:.96} .d63-box-top-face::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.1) 0%,transparent 100%);pointer-events:none} .d63-box-bottom{width:200px;height:80px;transform:translate(-50%,-50%) rotateX(-90deg) translateZ(120px);background:linear-gradient(135deg,#7A2505,var(--ember-dim))} .d63-bag-handle{position: absolute; top: -36px; left: 50%; transform: translateX(-50%) translateZ(2px); width: 90px; height: 60px; border: 5px solid var(--parch); border-bottom: none; border-radius: 45px 45px 0 0; box-shadow: 0 -4px 10px rgba(0,0,0,0.15); pointer-events: none; z-index: 10}.d63-bag-handle::before, .d63-bag-handle::after{content: ''; position: absolute; bottom: -4px; width: 10px; height: 10px; background: #2A1A12; border: 2px solid var(--parch); border-radius: 50%}.d63-bag-handle::before{left: -2px}.d63-bag-handle::after{right: -2px}.d63-box-bottom::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.15);pointer-events:none} .d63-shadow-container{width:300px;height:60px;position:relative;margin-top:-20px;z-index:0} .d63-box-shadow{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:220px;height:30px;background:radial-gradient(ellipse,rgba(0,0,0,.18) 0%,rgba(0,0,0,.06) 50%,transparent 75%);filter:blur(10px);animation:shadowPulse 6s ease-in-out infinite} .d63-reflective-floor{position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:280px;height:40px;background:linear-gradient(to bottom,rgba(232,69,10,.04) 0%,rgba(232,69,10,.015) 50%,transparent 100%);border-radius:50%;filter:blur(4px)} .d63-ember-particles{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:visible} .d63-ember-particle{position:absolute;border-radius:50%;background:var(--ember);opacity:0;animation:emberRise linear infinite} .d63-ember-particle::after{content:'';position:absolute;inset:-3px;border-radius:50%;background:radial-gradient(circle,rgba(232,69,10,.4),transparent 70%);filter:blur(3px)} .d63-ember-particle:nth-child(1){width:3px;height:3px;left:15%;bottom:20%;animation-duration:4.2s;animation-delay:0s;--drift:15px} .d63-ember-particle:nth-child(2){width:5px;height:5px;left:35%;bottom:10%;animation-duration:5.1s;animation-delay:.8s;--drift:-20px} .d63-ember-particle:nth-child(3){width:2px;height:2px;left:55%;bottom:15%;animation-duration:3.8s;animation-delay:1.6s;--drift:25px} .d63-ember-particle:nth-child(4){width:4px;height:4px;left:75%;bottom:25%;animation-duration:4.8s;animation-delay:.3s;--drift:-12px} .d63-ember-particle:nth-child(5){width:3px;height:3px;left:25%;bottom:5%;animation-duration:5.5s;animation-delay:2.1s;--drift:18px} .d63-ember-particle:nth-child(6){width:6px;height:6px;left:65%;bottom:30%;animation-duration:4s;animation-delay:1.2s;--drift:-30px} .d63-ember-particle:nth-child(7){width:2px;height:2px;left:45%;bottom:8%;animation-duration:6s;animation-delay:.6s;--drift:10px} .d63-ember-particle:nth-child(8){width:4px;height:4px;left:85%;bottom:18%;animation-duration:4.5s;animation-delay:2.8s;--drift:-22px} .d63-ember-particle:nth-child(9){width:3px;height:3px;left:8%;bottom:35%;animation-duration:5.3s;animation-delay:1.9s;--drift:14px} .d63-ember-particle:nth-child(10){width:5px;height:5px;left:50%;bottom:12%;animation-duration:3.5s;animation-delay:3.2s;--drift:-8px} .d63-ember-particle:nth-child(11){width:2px;height:2px;left:92%;bottom:22%;animation-duration:5.8s;animation-delay:.4s;--drift:20px} .d63-ember-particle:nth-child(12){width:3px;height:3px;left:40%;bottom:28%;animation-duration:4.3s;animation-delay:2.5s;--drift:-16px} .d63-info-column{display:flex;flex-direction:column;gap:40px;max-width:380px;flex:1;min-width:320px} .d63-specs-panel{background:rgba(255,255,255,.45);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.6);border-radius:20px;padding:32px;box-shadow:0 8px 32px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.02),inset 0 1px 0 rgba(255,255,255,.8);opacity:0;transform:translateX(30px);transition:all .8s cubic-bezier(.16,1,.3,1) .2s} .d63-specs-panel.visible{opacity:1;transform:translateX(0)} .d63-specs-label{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--ember);margin-bottom:24px;display:flex;align-items:center;gap:10px} .d63-specs-label::before{content:'';width:8px;height:8px;background:var(--ember);border-radius:2px;animation:specDotPulse 3s ease-in-out infinite} .d63-spec-row{display:flex;flex-direction:column;gap:6px;padding:14px 0;border-bottom:1px solid rgba(20,20,20,.05);transition:all .3s ease;border-radius:8px;padding-right:12px;padding-left:12px;cursor:default;opacity:0;transform:translateY(10px)} .d63-spec-row.visible{opacity:1;transform:translateY(0)} .d63-spec-row:last-child{border-bottom:none} .d63-spec-row:hover{background:rgba(232,69,10,.03);padding-right:16px} .d63-spec-row-top{display:flex;align-items:center;justify-content:space-between;gap:12px} .d63-spec-indicator{width:4px;height:4px;border-radius:50%;background:var(--ember);opacity:.6;flex-shrink:0;transition:all .3s ease} .d63-spec-row:hover .d63-spec-indicator{opacity:1;height:12px;border-radius:2px;box-shadow:0 0 8px rgba(232,69,10,.3)} .d63-spec-label-text{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--silver);flex:1} .d63-spec-value{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;color:var(--ink);direction:ltr;text-align:left} .d63-spec-bar-track{width:100%;height:3px;background:rgba(20,20,20,.04);border-radius:3px;overflow:hidden;margin-top:2px} .d63-spec-bar-fill{height:100%;border-radius:3px;background:linear-gradient(to left,var(--ember),var(--ember-sec));width:0%;transition:width 1.2s cubic-bezier(.16,1,.3,1)} .d63-spec-bar-fill.visible{width:var(--bar-width)} .d63-spec-color-swatches{display:flex;gap:8px;margin-top:4px;align-items:center} .d63-color-swatch{width:20px;height:20px;border-radius:6px;border:2px solid rgba(255,255,255,.8);box-shadow:0 1px 4px rgba(0,0,0,.1);transition:transform .2s ease;cursor:default} .d63-color-swatch:hover{transform:scale(1.15)} .d63-color-swatch-label{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--silver);align-self:center;direction:ltr} .d63-contents-panel{opacity:0;transform:translateX(30px);transition:all .8s cubic-bezier(.16,1,.3,1) .5s} .d63-contents-panel.visible{opacity:1;transform:translateX(0)} .d63-contents-title{font-family:'Noto Kufi Arabic',sans-serif;font-size:20px;font-weight:700;color:var(--ink);margin-bottom:20px;display:flex;align-items:center;gap:12px} .d63-contents-title::after{content:'';flex:1;height:1px;background:linear-gradient(to left,var(--parch),transparent)} .d63-contents-list{list-style:none;display:flex;flex-direction:column;gap:0;position:relative} .d63-contents-list::before{content:'';position:absolute;right:27px;top:24px;bottom:24px;width:2px;background:linear-gradient(to bottom,var(--ember-pale),var(--parch));border-radius:2px;z-index:0} .d63-contents-item{display:flex;align-items:center;gap:16px;direction:rtl;padding:10px 0;position:relative;z-index:1;opacity:0;transform:translateX(40px);transition:all .6s cubic-bezier(.16,1,.3,1)} .d63-contents-item.visible{opacity:1;transform:translateX(0)} .d63-contents-item:hover .d63-item-icon-container{transform:translateY(-3px);box-shadow:0 6px 20px rgba(232,69,10,.2),0 0 0 3px rgba(232,69,10,.08)} .d63-item-icon-container{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,var(--ember-pale),rgba(253,221,212,.5));display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;transition:all .35s cubic-bezier(.16,1,.3,1);box-shadow:0 2px 8px rgba(232,69,10,.06)} .d63-item-icon-container::after{content:'';position:absolute;inset:-4px;border-radius:20px;border:1px solid rgba(232,69,10,.1);animation:iconPulse 4s ease-in-out infinite;animation-delay:var(--pulse-delay,0s)} .d63-item-icon-container svg{width:24px;height:24px} .d63-contents-item::before{content:'';position:absolute;right:23px;width:10px;height:10px;border-radius:50%;background:var(--ember);border:2px solid var(--warm);z-index:2;opacity:.5;transition:all .3s ease} .d63-contents-item:hover::before{opacity:1;box-shadow:0 0 8px rgba(232,69,10,.3)} .d63-item-text{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:15px;font-weight:500;color:var(--ink2)} .swag-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;max-width:900px;margin:0 auto} .swag-item{background:var(--warm);border-radius:12px;border:1px solid var(--border);padding:24px 16px 18px;text-align:center;transition:all .3s ease} .swag-item:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.08)} .swag-visual{width:80px;height:80px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;border-radius:8px;position:relative} .swag-item .swag-name{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-soft);direction:ltr} .swag-item .swag-name-ar{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:12px;color:var(--ink-soft);direction:rtl;margin-top:4px} .swag-sticker-laptop{background:var(--void);border:1px dashed var(--border2);border-radius:10px} .swag-sticker-phone{background:var(--void);border:1px dashed var(--border2);border-radius:14px} .swag-sticker-phone .inner{width:48px;height:72px;border-radius:10px;background:var(--ember);display:flex;align-items:center;justify-content:center} .swag-pin{width:48px!important;height:48px!important;border-radius:50%;background:linear-gradient(135deg,var(--ember),var(--ember-sec));box-shadow:0 2px 8px rgba(232,69,10,.3)} .swag-tshirt{background:var(--void);border-radius:10px} .swag-tshirt .tee{width:52px;height:56px;position:relative} .swag-tshirt .tee-body{width:52px;height:40px;background:var(--ink);border-radius:4px 4px 8px 8px;position:absolute;bottom:0} .swag-tshirt .tee-ls{width:16px;height:20px;background:var(--ink);border-radius:4px 0 0 4px;position:absolute;top:8px;left:-12px;transform:skewY(10deg)} .swag-tshirt .tee-rs{width:16px;height:20px;background:var(--ink);border-radius:0 4px 4px 0;position:absolute;top:8px;right:-12px;transform:skewY(-10deg)} .swag-tshirt .tee-logo{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:20px;height:20px;z-index:2} .swag-mug{background:var(--void);border-radius:10px} .swag-mug .mug{width:40px;height:36px;background:var(--ember);border-radius:2px 2px 6px 6px;position:relative} .swag-mug .mug::after{content:'';width:12px;height:18px;border:3px solid var(--ember);border-left:none;border-radius:0 8px 8px 0;position:absolute;right:-14px;top:6px} .swag-notebook{background:var(--void);border-radius:10px} .swag-notebook .book{width:44px;height:56px;background:var(--ink);border-radius:2px 6px 6px 2px;position:relative;box-shadow:-3px 0 0 var(--parch)} .swag-notebook .book::after{content:'';position:absolute;top:8px;left:8px;right:8px;bottom:8px;border:1px solid rgba(255,255,255,.2);border-radius:1px} .dm-compare{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--border);overflow:hidden} .dm-side{padding:48px 36px;display:flex;flex-direction:column;gap:24px;direction:rtl;position:relative} .dm-side-light{background:var(--void);color:var(--ink)} .dm-side-dark{background:var(--dk1);color:var(--dkt)} .dm-side-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;text-transform:uppercase;direction:ltr;margin-bottom:8px} .dm-side-light .dm-side-label{color:var(--ember)} .dm-side-dark .dm-side-label{color:var(--ember-pale)} .dm-mini-btn{padding:10px 20px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;cursor:default;transition:all .2s;direction:ltr;text-transform:uppercase} .dm-side-light .dm-mini-btn{background:var(--ember);color:var(--void);border:1px solid var(--ember)} .dm-side-dark .dm-mini-btn{background:var(--ember);color:var(--dk1);border:1px solid var(--ember)} .dm-mini-card{padding:20px;border:1px solid;direction:rtl} .dm-side-light .dm-mini-card{border-color:var(--border);background:var(--warm)} .dm-side-dark .dm-mini-card{border-color:rgba(247,244,239,.08);background:var(--dk2)} .dm-mini-title{font-family:'Noto Kufi Arabic',sans-serif;font-size:13px;font-weight:700;margin-bottom:6px} .dm-mini-text{font-size:12px;line-height:1.7} .dm-side-light .dm-mini-text{color:var(--ink-soft)} .dm-side-dark .dm-mini-text{color:var(--dkm)} .dm-mini-input{padding:9px 14px;font-family:'IBM Plex Sans Arabic',sans-serif;font-size:13px;outline:none;width:100%;direction:rtl} .dm-side-light .dm-mini-input{border:1px solid var(--border);background:var(--void);color:var(--ink)} .dm-side-dark .dm-mini-input{border:1px solid rgba(247,244,239,.1);background:var(--dk2);color:var(--dkt)} .dm-mini-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:2px;margin-bottom:6px;direction:ltr;text-transform:uppercase} .dm-side-light .dm-mini-label{color:var(--ember)} .dm-side-dark .dm-mini-label{color:var(--ember-pale)} .dm-divider-v{width:1px;background:var(--border);position:absolute;right:50%;top:0;bottom:0} .d81-map{ position:relative; width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background: linear-gradient(135deg,#e8e4dc 0%,#f0ece4 20%,#e4e0d8 40%,#ece8e0 60%,#e0dcd4 80%,#e8e4dc 100%); border:1px solid var(--border)}.d81-map::before{ content:'';position:absolute;inset:0; background: linear-gradient(var(--border) 1px,transparent 1px), linear-gradient(90deg,var(--border) 1px,transparent 1px); background-size:80px 80px; opacity:.5}.d81-map::after{ content:'';position:absolute;inset:0; background: linear-gradient(0deg,transparent 38%,rgba(20,20,20,0.06) 38.5%,rgba(20,20,20,0.06) 39.5%,transparent 40%), linear-gradient(90deg,transparent 55%,rgba(20,20,20,0.06) 55.3%,rgba(20,20,20,0.06) 55.8%,transparent 56.2%), linear-gradient(0deg,transparent 62%,rgba(20,20,20,0.06) 62.3%,rgba(20,20,20,0.06) 62.8%,transparent 63.2%), linear-gradient(90deg,transparent 30%,rgba(20,20,20,0.06) 30.3%,rgba(20,20,20,0.06) 30.8%,transparent 31.2%), linear-gradient(45deg,transparent 44%,rgba(20,20,20,0.05) 44.3%,rgba(20,20,20,0.05) 44.8%,transparent 45.2%)}.d81-pin{ position:absolute;z-index:2; display:flex;flex-direction:column;align-items:center;gap:6px; cursor:pointer; transform:translate(-50%,-100%)}.d81-pin:nth-child(1){top:32%;left:28%} .d81-pin:nth-child(2){top:55%;left:62%} .d81-pin:nth-child(3){top:40%;left:78%} .d81-pin-dot{ width:18px;height:18px;border-radius:50%; background:var(--ember); border:3px solid #fff; box-shadow:0 2px 8px rgba(232,69,10,0.4); position:relative;z-index:3}.d81-pin-dot::after{ content:'';position:absolute;bottom:-10px;left:50%;transform:translateX(-50%); width:0;height:0; border-left:7px solid transparent;border-right:7px solid transparent; border-top:10px solid var(--ember)}.d81-pin-pulse{ position:absolute;top:50%;left:50%; transform:translate(-50%,-50%); width:36px;height:36px;border-radius:50%; background:rgba(232,69,10,0.15); animation:d81-pulse 2s ease-out infinite}.d81-pin-card{ background:var(--warm); border-radius:8px; padding:10px 14px; box-shadow:0 4px 16px rgba(0,0,0,0.1); border:1px solid var(--border); min-width:160px; white-space:nowrap}.d81-pin-card h4{font-family:'Noto Kufi Arabic',sans-serif;font-size:13px;font-weight:700;color:var(--ink);margin:0 0 3px;direction:rtl;text-align:right} .d81-pin-card p{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:12px;color:var(--ink-soft);margin:0;direction:rtl;text-align:right} .d81-pin-card.d81-popup{ min-width:220px; border-left:3px solid var(--ember)}.d81-pin-card.d81-popup .d81-popup-detail{ margin-top:8px;padding-top:8px;border-top:1px solid var(--border); font-family:'IBM Plex Sans Arabic',sans-serif;font-size:12px;color:var(--ink-soft);direction:rtl;text-align:right; line-height:1.6}.d82-grid{ display:grid; grid-template-columns:1fr 320px; gap:32px; align-items:start}.d82-cal{ background:var(--warm); border-radius:12px; border:1px solid var(--border); overflow:hidden}.d82-cal-header{ display:flex;align-items:center;justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--border)}.d82-cal-header h3{ font-family:'Noto Kufi Arabic',sans-serif; font-size:18px;font-weight:700;color:var(--ink); margin:0;direction:rtl}.d82-cal-arrows{display:flex;gap:8px} .d82-cal-arrows button{ width:32px;height:32px;border-radius:8px; border:1px solid var(--border);background:var(--void); cursor:pointer;display:flex;align-items:center;justify-content:center; transition:all .2s;color:var(--ink)}.d82-cal-arrows button:hover{background:var(--ember-pale);border-color:var(--ember);color:var(--ember)} .d82-cal-weekdays{ display:grid;grid-template-columns:repeat(7,1fr); padding:12px 16px 4px;gap:4px}.d82-cal-weekdays span{ font-family:'Noto Kufi Arabic',sans-serif; font-size:12px;font-weight:600;color:var(--ink-soft); text-align:center;direction:rtl}.d82-cal-days{ display:grid;grid-template-columns:repeat(7,1fr); padding:4px 16px 16px;gap:4px}.d82-cal-day{ aspect-ratio:1;display:flex;flex-direction:column; align-items:center;justify-content:center; border-radius:10px;font-family:'IBM Plex Sans Arabic',sans-serif; font-size:14px;color:var(--ink);cursor:pointer; position:relative;transition:all .2s;gap:3px}.d82-cal-day:hover{background:var(--surf)} .d82-cal-day.empty{pointer-events:none;color:transparent} .d82-cal-day .d82-dot{ width:4px;height:4px;border-radius:50%;background:var(--ember); opacity:.7}.d82-cal-day.selected{ background:var(--ember);color:#fff}.d82-cal-day.selected .d82-dot{background:#fff;opacity:.8} .d82-cal-day.today{font-weight:700} .d82-events{ background:var(--warm);border-radius:12px; border:1px solid var(--border); overflow:hidden}.d82-events-header{ padding:20px 24px;border-bottom:1px solid var(--border)}.d82-events-header h4{ font-family:'Noto Kufi Arabic',sans-serif; font-size:15px;font-weight:700;color:var(--ink); margin:0 0 4px;direction:rtl;text-align:right}.d82-events-header p{ font-family:'IBM Plex Mono',monospace; font-size:12px;color:var(--ink-soft);margin:0; direction:ltr;text-align:left}.d82-event-item{ display:flex;gap:14px;padding:16px 24px; border-bottom:1px solid var(--border); transition:background .2s;cursor:pointer}.d82-event-item:last-child{border-bottom:none} .d82-event-item:hover{background:var(--surf)} .d82-event-bar{width:3px;border-radius:2px;background:var(--ember);flex-shrink:0;align-self:stretch} .d82-event-info{flex:1} .d82-event-info h5{ font-family:'Noto Kufi Arabic',sans-serif; font-size:14px;font-weight:600;color:var(--ink); margin:0 0 4px;direction:rtl;text-align:right}.d82-event-info p{ font-family:'IBM Plex Mono',monospace; font-size:12px;color:var(--ink-soft);margin:0; direction:ltr}.d82-event-time{ font-family:'IBM Plex Mono',monospace; font-size:12px;color:var(--ember);font-weight:600; white-space:nowrap}.d83-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px}.d83-card{ background:var(--warm);border-radius:12px;border:1px solid var(--border); overflow:hidden;transition:box-shadow .3s}.d83-card:hover{box-shadow:0 8px 24px rgba(0,0,0,0.06)} .d83-card-demo{ height:140px;display:flex;align-items:center;justify-content:center; background:var(--void);position:relative}.d83-card-label{ padding:14px 18px; border-top:1px solid var(--border)}.d83-card-label span{ font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600; color:var(--ink-soft);letter-spacing:.04em}.d83-card-label small{ display:block;margin-top:4px; font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);opacity:.6}.d83-btn{ padding:10px 28px;border:none;border-radius:8px; background:var(--ember);color:#fff; font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:500; cursor:pointer;transition:transform .1s ease; user-select:none}.d83-btn:active{transform:scale(0.92)} .d83-toggle{ width:52px;height:28px;border-radius:14px; background:var(--parch);cursor:pointer; position:relative;transition:background .3s}.d83-toggle.on{background:var(--ember)} .d83-toggle-knob{ width:22px;height:22px;border-radius:50%; background:#fff;position:absolute;top:3px;left:3px; transition:transform .3s cubic-bezier(.4,.0,.2,1); box-shadow:0 1px 4px rgba(0,0,0,0.15)}.d83-toggle.on .d83-toggle-knob{transform:translateX(24px)} .d83-checkbox{ width:28px;height:28px;border-radius:6px; border:2px solid var(--parch);cursor:pointer; display:flex;align-items:center;justify-content:center; transition:all .2s;position:relative}.d83-checkbox.checked{background:var(--ember);border-color:var(--ember)} .d83-checkbox svg{ width:16px;height:16px;stroke:#fff;stroke-width:3;fill:none; stroke-dasharray:20;stroke-dashoffset:20; transition:stroke-dashoffset .25s ease}.d83-checkbox.checked svg{stroke-dashoffset:0} .d83-heart{ width:40px;height:40px;cursor:pointer; position:relative}.d83-heart svg{ width:40px;height:40px; fill:transparent;stroke:var(--ink-soft);stroke-width:2; transition:fill .3s ease}.d83-heart.liked svg{fill:var(--ember);stroke:var(--ember)} .d83-heart .d83-heart-burst{ position:absolute;inset:-8px; border-radius:50%;background:rgba(232,69,10,0.15); transform:scale(0);opacity:0; transition:all .4s ease}.d83-heart.liked .d83-heart-burst{transform:scale(1.2);opacity:0} .d83-badge-wrap{ position:relative;width:36px;height:36px;cursor:pointer}.d83-bell{ width:36px;height:36px; fill:var(--ink-soft); transition:fill .2s}.d83-badge-wrap:hover .d83-bell{fill:var(--ink)} .d83-badge{ position:absolute;top:-4px;right:-4px; min-width:18px;height:18px;border-radius:9px; background:var(--ember);color:#fff; font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:700; display:flex;align-items:center;justify-content:center; padding:0 5px; animation:d83-badge-pop .5s cubic-bezier(.175,.885,.32,1.275)}.d83-ripple-btn{ padding:10px 28px;border:none;border-radius:8px; background:var(--ember);color:#fff; font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:500; cursor:pointer;position:relative;overflow:hidden; user-select:none}.d83-ripple-btn .d83-ripple-circle{ position:absolute;border-radius:50%; background:rgba(255,255,255,0.4); transform:scale(0);animation:d83-ripple-anim .6s ease-out; pointer-events:none}.d84-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px}.d84-card{ background:var(--warm);border-radius:12px;border:1px solid var(--border); overflow:hidden;transition:box-shadow .3s}.d84-card:hover{box-shadow:0 8px 24px rgba(0,0,0,0.06)} .d84-preview{ height:180px;position:relative;overflow:hidden; background:var(--void)}.d84-preview-box{ width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:24px; padding:24px}.d84-before,.d84-after{ width:90px;height:60px;border-radius:6px; display:flex;align-items:center;justify-content:center; font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:500}.d84-before{background:var(--ember-pale);color:var(--ember)} .d84-after{background:var(--ember);color:#fff} .d84-card[data-t="fade"] .d84-after{animation:d84-fade 2s ease infinite alternate} .d84-card[data-t="slide"] .d84-after{animation:d84-slide 2s ease infinite alternate} .d84-card[data-t="scale"] .d84-after{animation:d84-scale 2s ease infinite alternate} .d84-card[data-t="dissolve"] .d84-after{animation:d84-dissolve 2s ease infinite alternate} .d84-info{ padding:18px 20px;border-top:1px solid var(--border); display:flex;align-items:center;justify-content:space-between}.d84-info-name{ font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;color:var(--ink)}.d84-info-meta{ text-align:right}.d84-info-meta span{ display:block; font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft); line-height:1.6}.d85-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px}.d85-card{ background:var(--warm);border-radius:12px;border:1px solid var(--border); padding:24px}.d85-label{ font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600; color:var(--ink-soft);letter-spacing:.04em;margin-bottom:18px; text-transform:uppercase}.d85-skel{ background:var(--parch); border-radius:6px; position:relative;overflow:hidden}.d85-skel::after{ content:'';position:absolute;inset:0; background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.5) 50%,transparent 100%); animation:d85-shimmer 1.5s ease infinite}.d85-skel-line{height:12px;border-radius:4px;margin-bottom:10px} .d85-skel-line.w60{width:60%} .d85-skel-line.w80{width:80%} .d85-skel-line.w40{width:40%} .d85-skel-line:last-child{margin-bottom:0} .d85-skel-circle{border-radius:50%} .d85-skel-img{height:120px;width:100%;border-radius:8px} .d85-card-skel .d85-skel-img{margin-bottom:14px} .d85-card-skel .d85-skel-line:first-of-type{height:16px;width:70%;margin-bottom:10px} .d85-profile-skel{display:flex;gap:16px;align-items:flex-start} .d85-profile-skel .d85-skel-circle{width:56px;height:56px;flex-shrink:0} .d85-profile-skel .d85-profile-lines{flex:1} .d85-table-skel{display:flex;flex-direction:column;gap:0} .d85-table-row{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)} .d85-table-row:last-child{border-bottom:none} .d85-table-row .d85-skel-line{flex:1;margin-bottom:0} .d85-dash-skel{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .d85-dash-item{display:flex;flex-direction:column;gap:8px} .d85-dash-item .d85-skel{height:60px;border-radius:8px} .d85-dash-bar{margin-top:14px;display:flex;flex-direction:column;gap:8px} .d86-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px}.d86-card{ background:var(--warm);border-radius:12px;border:1px solid var(--border); padding:28px 20px 18px;text-align:center; cursor:pointer;position:relative;overflow:hidden; transition:all .35s cubic-bezier(.4,0,.2,1); display:flex;flex-direction:column;align-items:center;gap:14px}.d86-card-label{ font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600; color:var(--ink-soft);letter-spacing:.04em; text-transform:uppercase}.d86-card-icon{ width:44px;height:44px;border-radius:10px; background:var(--surf);display:flex;align-items:center;justify-content:center; transition:all .35s}.d86-card-icon svg{width:22px;height:22px;stroke:var(--ink);stroke-width:1.5;fill:none;transition:all .35s} .d86-card[data-fx="glow"]:hover{ box-shadow:0 0 20px rgba(232,69,10,0.25),0 0 40px rgba(232,69,10,0.1)}.d86-card[data-fx="lift"]:hover{ transform:translateY(-6px); box-shadow:0 12px 32px rgba(0,0,0,0.1)}.d86-card[data-fx="reveal"]::after{ content:'';position:absolute;inset:0; background:linear-gradient(135deg,rgba(232,69,10,0.92),rgba(212,86,58,0.92)); display:flex;align-items:center;justify-content:center; opacity:0;transition:opacity .35s}.d86-card[data-fx="reveal"]:hover::after{opacity:1} .d86-card[data-fx="reveal"]:hover .d86-card-label, .d86-card[data-fx="reveal"]:hover .d86-card-icon{position:relative;z-index:1;color:#fff} .d86-card[data-fx="reveal"]:hover .d86-card-icon{background:rgba(255,255,255,0.15)} .d86-card[data-fx="reveal"]:hover .d86-card-icon svg{stroke:#fff} .d86-card[data-fx="color"]:hover{background:var(--ember)} .d86-card[data-fx="color"]:hover .d86-card-label{color:#fff} .d86-card[data-fx="color"]:hover .d86-card-icon{background:rgba(255,255,255,0.15)} .d86-card[data-fx="color"]:hover .d86-card-icon svg{stroke:#fff} .d86-card[data-fx="scale"]:hover{transform:scale(1.05)} .d86-card[data-fx="border"]{ border:2px solid transparent; background-clip:padding-box; position:relative}.d86-card[data-fx="border"]::before{ content:'';position:absolute;inset:-2px;border-radius:14px; background:conic-gradient(from 0deg,var(--ember),var(--ember-sec),var(--ember),transparent,var(--ember)); opacity:0;transition:opacity .4s;z-index:-1}.d86-card[data-fx="border"]:hover::before{opacity:1} .d86-card[data-fx="underline"] .d86-card-label::after{ content:'';display:block;height:2px;background:var(--ember); border-radius:1px;margin-top:6px; width:0;transition:width .35s ease}.d86-card[data-fx="underline"]:hover .d86-card-label::after{width:100%} .d86-card[data-fx="rotate"]:hover .d86-card-icon{transform:rotate(180deg);background:var(--ember-pale)} .d86-card[data-fx="rotate"]:hover .d86-card-icon svg{stroke:var(--ember)} .d87-wrap{ max-width:800px;margin:0 auto}.d87-banner{ aspect-ratio:1584/396; background:var(--dk0); border-radius:12px; overflow:hidden; position:relative; display:flex;align-items:center}.d87-pattern{ position:absolute;inset:0;opacity:.06; background: linear-gradient(60deg,transparent 40%,var(--dkt) 40%,var(--dkt) 40.5%,transparent 40.5%), linear-gradient(-60deg,transparent 40%,var(--dkt) 40%,var(--dkt) 40.5%,transparent 40.5%); background-size:80px 80px}.d87-glow{ position:absolute;width:300px;height:300px;border-radius:50%; background:radial-gradient(circle,rgba(232,69,10,0.12),transparent 70%); right:10%;top:50%;transform:translateY(-50%)}.d87-content{ position:relative;z-index:2; padding:0 60px; display:flex;align-items:center;gap:32px; width:100%}.d87-logo-area{flex-shrink:0} .d87-logo-area svg{width:70px;height:70px} .d87-text h2{ font-family:'DM Serif Display',serif; font-size:clamp(22px,4vw,36px);color:var(--dkt); letter-spacing:.02em;margin:0 0 6px;line-height:1.1}.d87-text p{ font-family:'IBM Plex Mono',monospace; font-size:clamp(10px,1.5vw,13px);color:var(--dkm); letter-spacing:.15em;text-transform:uppercase;margin:0}.d87-photo{ position:absolute;bottom:-28px;right:60px; width:56px;height:56px;border-radius:50%; border:3px solid var(--dk0); background:var(--dk2); display:flex;align-items:center;justify-content:center; z-index:3}.d87-photo svg{width:24px;height:24px;stroke:var(--dks);fill:none;stroke-width:1.5} .d88-wrap{ max-width:720px;margin:0 auto}.d88-frame{ background:var(--dk0);border-radius:16px;padding:16px 16px 56px; position:relative}.d88-title-bar{ display:flex;align-items:center;gap:12px; margin-bottom:12px;padding:0 4px}.d88-avatar{ width:36px;height:36px;border-radius:50%;background:var(--ember);flex-shrink:0; display:flex;align-items:center;justify-content:center}.d88-avatar svg{width:18px;height:18px;fill:#fff} .d88-title-bar-text{flex:1;min-width:0} .d88-title-bar-text h4{ font-family:'IBM Plex Sans Arabic',sans-serif;font-size:14px;font-weight:600; color:var(--dkt);margin:0;direction:rtl;text-align:right; white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.d88-title-bar-text span{ font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--dks);margin:0}.d88-thumb{ aspect-ratio:16/9;border-radius:12px;overflow:hidden; position:relative;cursor:pointer; background:linear-gradient(135deg,var(--ember) 0%,var(--ember-dim) 50%,var(--dk0) 100%); display:flex;align-items:center;justify-content:center}.d88-thumb-text{ font-family:'Noto Kufi Arabic',sans-serif; font-size:clamp(18px,3.5vw,32px);font-weight:800;color:#fff; text-align:center;direction:rtl; padding:20px;text-shadow:0 2px 12px rgba(0,0,0,0.3); line-height:1.5}.d88-play{ position:absolute;inset:0; display:flex;align-items:center;justify-content:center; background:rgba(0,0,0,0.25); opacity:0;transition:opacity .3s}.d88-thumb:hover .d88-play{opacity:1} .d88-play-circle{ width:64px;height:64px;border-radius:50%; background:rgba(232,69,10,0.9); display:flex;align-items:center;justify-content:center; box-shadow:0 4px 20px rgba(232,69,10,0.4)}.d88-play-circle svg{width:24px;height:24px;fill:#fff;margin-left:3px} .d88-duration{ position:absolute;bottom:12px;right:12px; background:rgba(0,0,0,0.8);color:#fff; font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600; padding:3px 8px;border-radius:4px}.d88-watermark{ position:absolute;top:12px;left:12px; width:32px;height:32px;opacity:.7}.d88-watermark svg{width:100%;height:100%} .d89-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px}.d89-card{display:flex;flex-direction:column;gap:14px} .d89-preview{ aspect-ratio:16/9;border-radius:12px;overflow:hidden; position:relative;border:1px solid var(--border)}.d89-label{ font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600; color:var(--ink)}.d89-desc{ font-family:'IBM Plex Sans Arabic',sans-serif;font-size:12px; color:var(--ink-soft);direction:rtl;text-align:right}.d89-minimal{ background:var(--dk0); display:flex;align-items:center;justify-content:center}.d89-minimal svg{width:48px;height:48px;opacity:.3} .d89-office{ background:linear-gradient(180deg,#e8e4dc 0%,#f0ece4 100%); display:flex;align-items:flex-end;justify-content:center; padding-bottom:0;position:relative}.d89-office::before{ content:'';position:absolute;bottom:0;left:0;right:0;height:60%; background:linear-gradient(180deg,transparent,rgba(20,20,20,0.04))}.d89-desk{ position:absolute;bottom:0;left:0;right:0;height:40%; background:linear-gradient(180deg,var(--parch),#d9d5cd); border-top:2px solid var(--border)}.d89-shelf{ position:absolute;top:20%;left:10%;width:80%;height:3px; background:var(--border)}.d89-shelf::before,.d89-shelf::after{ content:'';position:absolute;top:-24px; width:30px;height:24px;border-radius:2px; background:var(--ember-pale);opacity:.6}.d89-shelf::before{left:5%} .d89-shelf::after{right:15%} .d89-office-logo{ position:absolute;top:12px;right:12px; width:40px;height:40px;opacity:.5;z-index:2}.d89-office-logo svg{width:100%;height:100%} .d89-abstract{ background:var(--dk0);overflow:hidden; display:flex;align-items:center;justify-content:center}.d89-abs-shape1{ position:absolute;width:200px;height:200px;border-radius:50%; background:radial-gradient(circle,rgba(232,69,10,0.2),transparent 70%); top:-40px;right:-40px}.d89-abs-shape2{ position:absolute;width:150px;height:150px; border:2px solid rgba(232,69,10,0.15);border-radius:50%; bottom:-20px;left:-20px}.d89-abs-shape3{ position:absolute;width:80px;height:80px; background:rgba(232,69,10,0.1); transform:rotate(45deg);bottom:30%;right:20%}.d89-abs-hex{ width:60px;height:60px;opacity:.2;z-index:2}.d89-abs-hex svg{width:100%;height:100%} .d90-wrap{ display:flex;align-items:flex-start;gap:48px; flex-wrap:wrap;justify-content:center}.d90-cover{ width:300px;height:300px;border-radius:16px;overflow:hidden; background:var(--dk0);position:relative; display:flex;flex-direction:column;align-items:center; padding-top:45px; gap:16px;flex-shrink:0; box-shadow:0 16px 48px rgba(0,0,0,0.2)}.d90-cover-logo{ width:80px;height:80px; filter:drop-shadow(0 0 20px rgba(232,69,10,0.65))}.d90-cover-logo svg{width:100%;height:100%} .d90-cover-title{ font-family:'Noto Kufi Arabic',sans-serif; font-size:28px;font-weight:800;color:var(--dkt); direction:rtl}.d90-waveform{ position:absolute;bottom:40px;left:20px;right:20px; height:40px; display:flex;align-items:center;justify-content:center;gap:3px}.d90-waveform-text{ font-family:'IBM Plex Mono',monospace; font-size:12px;font-weight:600;color:var(--dkt); letter-spacing:.15em;text-transform:uppercase; margin:0 8px; white-space:nowrap}.d90-waveform-bar{ width:3px;border-radius:2px; background:var(--ember)}.d90-waveform-bar:nth-of-type(1){height:12px} .d90-waveform-bar:nth-of-type(2){height:24px} .d90-waveform-bar:nth-of-type(3){height:16px} .d90-waveform-bar:nth-of-type(4){height:32px} .d90-waveform-bar:nth-of-type(5){height:20px} .d90-waveform-bar:nth-of-type(6){height:36px} .d90-waveform-bar:nth-of-type(7){height:14px} .d90-waveform-bar:nth-of-type(8){height:28px} .d90-waveform-bar:nth-of-type(9){height:10px} .d90-waveform-bar:nth-of-type(10){height:22px} .d90-waveform-bar:nth-of-type(11){height:30px} .d90-waveform-bar:nth-of-type(12){height:18px} .d90-waveform-bar:nth-of-type(13){height:26px} .d90-waveform-bar:nth-of-type(14){height:8px} .d90-waveform-bar:nth-of-type(15){height:34px} .d90-waveform-bar:nth-of-type(16){height:16px} .d90-waveform-bar:nth-of-type(17){height:24px} .d90-waveform-bar:nth-of-type(18){height:12px} .d90-waveform-bar:nth-of-type(19){height:20px} .d90-waveform-bar:nth-of-type(20){height:28px} .d90-specs{ width:100%; max-width:320px; flex:1 1 320px}.d90-specs h3{ font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600; color:var(--ink);margin:0 0 20px}.d90-spec-row{ display:flex;justify-content:space-between;align-items:center; padding:10px 0;border-bottom:1px solid var(--border); gap:16px}.d90-spec-row:last-child{border-bottom:none} .d90-spec-row span:first-child{ font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft)}.d90-spec-row span:last-child{ font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink);font-weight:500}.sec, nav, .card-3d-wrap, .value-card, .color-card, .dp-sw-block, .ck-cat, .toast, .ob-wrap, .ob-panel, .si-year, .si-title, .si-desc, .story-item, .dmt-row, .dmt-name, .dmt-val, .dst, .chart-card, .icon-cell, .pat-cell, .rule-card, .gov-card, .prop-wrap, .prop-tbl tbody tr, .milestone-wrap, .ty-card, .nl-wrap, .appstore-wrap, .seo-card, .cb-cell{transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s ease, box-shadow 0.3s ease}.theme-toggle-btn, .sidebar-toggle-btn{background: transparent; border: 1px solid var(--border); width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; color: var(--ink-soft); position: relative; overflow: hidden; padding: 0}.theme-toggle-btn:hover, .sidebar-toggle-btn:hover{border-color: var(--ember); color: var(--ember); background: var(--ember-ghost)}.theme-toggle-btn svg, .sidebar-toggle-btn svg{width: 18px; height: 18px; fill: currentColor; transition: transform 0.4s ease; display: block}.sidebar-header{padding: 24px 28px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; direction: rtl}.sidebar-title{font-family: 'Noto Kufi Arabic', sans-serif; font-size: 16px; font-weight: 700; color: var(--ink)}.sidebar-close-btn{background: transparent; border: none; font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: var(--ink-soft); cursor: pointer; padding: 4px 8px; transition: color 0.2s}.sidebar-close-btn:hover{color: var(--ember)}.sidebar-search-wrap{padding: 16px 28px; border-bottom: 1px solid var(--border); direction: rtl}.sidebar-search-input{width: 100%; padding: 10px 16px; border: 1px solid var(--border2); background: var(--warm); font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 13px; color: var(--ink); outline: none; transition: all 0.3s}.sidebar-search-input:focus{border-color: var(--ember); box-shadow: 0 0 8px rgba(232, 69, 10, 0.15)}.sidebar-filters{padding: 12px 28px; border-bottom: 1px solid var(--border); display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; direction: rtl}.sidebar-filters::-webkit-scrollbar{display: none}.sidebar-filter-tab{padding: 6px 12px; background: var(--surf); border: 1px solid transparent; font-family: 'IBM Plex Sans Arabic', sans-serif; font-size:12px; color: var(--ink-soft); cursor: pointer; white-space: nowrap; transition: all 0.25s}.sidebar-filter-tab:hover{color: var(--ink); background: var(--border)}.sidebar-filter-tab.active{background: var(--ember); color: var(--void); border-color: var(--ember)}.sidebar-content{flex: 1; overflow-y: auto; padding: 16px 28px; direction: rtl}.sidebar-content::-webkit-scrollbar{width: 4px}.sidebar-content::-webkit-scrollbar-track{background: transparent}.sidebar-content::-webkit-scrollbar-thumb{background: var(--border2)}.sidebar-group-title{font-family: 'IBM Plex Mono', monospace; font-size:12px; letter-spacing: 2px; color: var(--ember); margin: 16px 0 8px; text-transform: uppercase}.sidebar-list{list-style: none; display: flex; flex-direction: column; gap: 4px}.sidebar-item{padding: 10px 12px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: all 0.2s; background: transparent; border: 1px solid transparent}.sidebar-item:hover{background: var(--warm); border-color: var(--border); transform: translateX(-4px)}.sidebar-item-code{font-family: 'IBM Plex Mono', monospace; font-size:12px; font-weight: 500; color: var(--ember); background: var(--ember-ghost); padding: 2px 6px; border-radius: 2px}.sidebar-item-title{font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 13px; color: var(--ink)}.sidebar-overlay{position: fixed; inset: 0; background: rgba(0,0,0,0.15); z-index: 9989; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; backdrop-filter: blur(2px)}.sidebar-overlay.show{opacity: 1; pointer-events: auto}.type-tester-card{background: var(--warm); border: 1px solid var(--border); padding: 32px; margin-top: 40px; direction: rtl}.type-tester-header{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; border-bottom: 1px solid var(--border); padding-bottom: 16px}.type-tester-title{font-family: 'Noto Kufi Arabic', sans-serif; font-size: 14px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 10px}.type-tester-title::before{content: ''; display: inline-block; width: 8px; height: 8px; background: var(--ember)}.type-tester-controls{display: flex; align-items: center; gap: 20px; flex-wrap: wrap}.type-tester-control-group{display: flex; align-items: center; gap: 10px}.type-tester-label{font-family: 'IBM Plex Mono', monospace; font-size:12px; letter-spacing: 1px; color: var(--ink-soft); text-transform: uppercase}.type-tester-select{border: 1px solid var(--border); padding: 6px 12px; font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 12px; background: var(--void); color: var(--ink); outline: none; cursor: pointer}.type-tester-slider{-webkit-appearance: none; appearance: none; width: 100px; height: 3px; background: var(--border); outline: none; cursor: pointer}.type-tester-slider::-webkit-slider-thumb{-webkit-appearance: none; appearance: none; width: 12px; height: 12px; background: var(--ember); border-radius: 50%; cursor: pointer}.type-tester-body{display: flex; flex-direction: column; gap: 16px}.type-tester-textarea{width: 100%; min-height: 80px; padding: 12px 16px; background: var(--void); border: 1px solid var(--border); font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 14px; color: var(--ink); resize: vertical; outline: none; transition: border-color 0.25s}.type-tester-textarea:focus{border-color: var(--ember)}.type-tester-preview{padding: 24px; background: var(--void); border: 1px solid var(--border); min-height: 120px; overflow-wrap: break-word; word-wrap: break-word; transition: font-size 0.2s ease, font-family 0.2s ease}.download-center-card{margin-top: 40px; background: var(--warm); border: 1px solid var(--border); padding: 32px; direction: rtl}.download-grid{display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 20px}.download-item-card{background: var(--void); border: 1px solid var(--border); padding: 24px; display: flex; flex-direction: column; justify-content: space-between; min-height: 200px; position: relative; overflow: hidden}.download-item-badge{font-family: 'IBM Plex Mono', monospace; font-size:12px; letter-spacing: 2px; color: var(--ember); background: var(--ember-ghost); padding: 3px 8px; text-transform: uppercase; display: inline-block; margin-bottom: 12px}.download-item-title{font-family: 'Noto Kufi Arabic', sans-serif; font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 8px}.download-item-desc{font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 12px; color: var(--ink-soft); line-height: 1.6}.download-btn{width: 100%; margin-top: 20px; background: transparent; border: 1px solid var(--ember); color: var(--ember); padding: 10px; font-family: 'IBM Plex Mono', monospace; font-size:12px; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; gap: 8px}.download-btn:hover{background: var(--ember); color: var(--void)}.download-btn svg{width: 12px; height: 12px; fill: currentColor}.copy-toast{background: var(--warm); border: 1px solid var(--border); border-right: 3px solid var(--ember); padding: 12px 20px; display: flex; align-items: center; gap: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.06); transform: translateY(20px); opacity: 0; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)}body.theme-dark .copy-toast{box-shadow: 0 10px 30px rgba(0,0,0,0.4)}.copy-toast.show{transform: translateY(0); opacity: 1}.copy-toast-icon{width: 16px; height: 16px; color: var(--ember); display: flex; align-items: center; justify-content: center; font-weight: bold}.copy-toast-msg{font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 13px; color: var(--ink)}.ncta, .download-btn, .sidebar-filter-tab, .logo-cell, .anatomy-grid, .rule-card, .value-card, .audit-card, .metric-card, .pitch-card, .swag-card, .guide-card, .download-item-card, .toast, .shortcut-modal-content, .tokens-customizer, .ob-wrap, .dash-wrap, .tab-btn, .pg-btn{border-radius: var(--base-radius) !important}.logo-grid, .anatomy-grid, .download-grid, .sidebar-filter-tabs{gap: var(--site-gap) !important}.shortcut-modal{position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease}.shortcut-modal.show{opacity: 1; pointer-events: auto}.shortcut-modal-overlay{position: absolute; inset: 0; background: rgba(10, 10, 10, 0.65); backdrop-filter: blur(8px)}.shortcut-modal-content{position: relative; width: 90%; max-width: 500px; background: var(--glass); border: 1px solid var(--border); box-shadow: 0 24px 80px rgba(0,0,0,0.2); border-radius: var(--base-radius); padding: 32px; z-index: 1; transform: translateY(20px); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); direction: rtl}.shortcut-modal.show .shortcut-modal-content{transform: translateY(0)}.shortcut-modal-header{display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; border-bottom: 1px solid var(--border); padding-bottom: 16px}.shortcut-modal-header h3{font-family: 'Noto Kufi Arabic', sans-serif; font-size: 15px; color: var(--ink); font-weight: 700}.shortcut-modal-close{background: none; border: none; font-size: 24px; color: var(--ink-soft); cursor: pointer; transition: color 0.2s}.shortcut-modal-close:hover{color: var(--ember)}.shortcut-modal-body{display: flex; flex-direction: column; gap: 16px}.shortcut-row{display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--border)}.shortcut-row:last-child{border-bottom: none}.shortcut-keys{display: flex; gap: 6px; direction: ltr}.shortcut-keys kbd{font-family: 'IBM Plex Mono', monospace; font-size:12px; font-weight: 600; background: var(--surf); border: 1px solid var(--border2); color: var(--ember); padding: 4px 10px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.05)}.shortcut-desc{font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 12px; color: var(--ink-soft)}.ip-info{display: flex; align-items: center; gap: 10px}.ip-count{font-family: 'IBM Plex Mono', monospace; font-size: 16px; font-weight: 700; color: var(--void); background: var(--ember); padding: 2px 10px; border-radius: 20px}.ip-text{font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 12px; color: var(--ink)}.ip-actions{display: flex; align-items: center; gap: 16px}.ip-clear{background: none; border: none; font-family: 'IBM Plex Sans Arabic', sans-serif; font-size:12px; color: var(--ink-soft); cursor: pointer; text-decoration: underline; transition: color 0.2s}.ip-clear:hover{color: var(--ember)}.logo-cell .sz-box{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px dashed var(--ember); background: rgba(232, 69, 10, 0.05); transition: all 0.4s ease}#logo.show-safe-zone .logo-cell .sz-box{box-shadow: 0 0 0 15px rgba(232, 69, 10, 0.12); border: 1px solid var(--ember)}.logo-cell .sz-axis-h{position: absolute; top: 50%; left: 0; right: 0; height: 1px; border-top: 1px dashed rgba(232, 69, 10, 0.25)}.logo-cell .sz-axis-v{position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; border-left: 1px dashed rgba(232, 69, 10, 0.25)}.logo-cell .sz-label{position: absolute; font-family: 'IBM Plex Mono', monospace; font-size:12px; color: var(--ember); background: var(--void); padding: 1px 4px; border: 1px solid var(--ember); border-radius: 2px; z-index: 12}.logo-cell .sz-label-top{top: 12px; left: 50%; transform: translateX(-50%)}.splash-screen{position: fixed; inset: 0; background: #0A0A0A; z-index: 100000; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 1; visibility: visible; transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.8s cubic-bezier(0.16, 1, 0.3, 1)}.splash-screen.fade-out{opacity: 0; pointer-events: none; visibility: hidden}.splash-container{display: flex; flex-direction: column; align-items: center; gap: 24px}.splash-logo-wrap{position: relative; width: 140px; height: 140px; animation: splashPulse 2s ease-in-out infinite}.splash-progress-container{width: 200px; display: flex; flex-direction: column; align-items: center; gap: 8px}.splash-progress-bar{width: 100%; height: 2px; background: rgba(232, 69, 10, 0.15); border-radius: 1px; overflow: hidden; position: relative}.splash-progress-fill{height: 100%; width: 0; background: var(--ember); box-shadow: 0 0 8px var(--ember); transition: width 0.08s linear}.splash-pct-text{font-family: 'IBM Plex Mono', monospace; font-size:12px; color: var(--ember); letter-spacing: 2px; font-weight: 500}.mobile-bottom-nav{position: fixed; bottom: 0; left: 0; right: 0; height: 64px; background: rgba(10, 10, 10, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid rgba(232, 69, 10, 0.25); display: none; justify-content: space-around; align-items: center; z-index: 9999; padding: 0 12px; box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3)}body.theme-dark .mobile-bottom-nav{background: rgba(10, 10, 10, 0.85)}body:not(.theme-dark) .mobile-bottom-nav{background: rgba(247, 244, 239, 0.85); border-top-color: rgba(232, 69, 10, 0.15); box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08)}.mb-nav-item{display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ink-soft); text-decoration: none; font-family: 'IBM Plex Sans Arabic', sans-serif; font-size:12px; font-weight: 500; flex: 1; height: 100%; transition: all 0.3s ease; position: relative}.mb-nav-item svg{width: 20px; height: 20px; stroke: currentColor; fill: none; transition: transform 0.3s ease, stroke 0.3s ease}.mb-nav-item.active{color: var(--ember)}.mb-nav-item.active svg{transform: translateY(-2px) scale(1.05); stroke: var(--ember)}.mb-nav-item::after{content: ''; position: absolute; bottom: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 6px var(--ember); opacity: 0; transition: opacity 0.3s ease}.mb-nav-item.active::after{opacity: 1}.back-to-top-btn{position: fixed; bottom: 30px; left: 30px; width: 48px; height: 48px; background: var(--glass); border: 1px solid var(--border); color: var(--ink); cursor: pointer; z-index: 9998; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: scale(0.8) translateY(10px); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)}.back-to-top-btn.show{opacity: 1; visibility: visible; transform: scale(1) translateY(0)}.back-to-top-btn:hover{border-color: var(--ember); color: var(--ember); box-shadow: 0 0 15px rgba(232, 69, 10, 0.3); transform: translateY(-4px)}.back-to-top-btn svg{width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; transition: transform 0.3s ease}.back-to-top-btn:hover svg{transform: translateY(-3px)}.ember-spark{position: absolute; background: var(--ember); border-radius: 50%; pointer-events: none; z-index: 100001; box-shadow: 0 0 6px var(--ember)}body.presentation-active{overflow: hidden !important; background: #0A0A0A !important}body.presentation-active #mainNav, body.presentation-active .mobile-bottom-nav, body.presentation-active .tokens-customizer-trigger, body.presentation-active #backToTop, body.presentation-active #sidebarDrawer, body.presentation-active .cover-page{display: none !important}body.presentation-active section, body.presentation-active .section{display: none !important; height: 100vh !important; width: 100vw !important; position: fixed !important; inset: 0 !important; overflow-y: auto !important; background: #0A0A0A !important; z-index: 99990 !important; padding: 60px var(--site-gap) !important; border: none !important}body.presentation-active section.active-slide, body.presentation-active .section.active-slide{display: block !important; animation: slideInPresentation 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards}.presentation-toggle-btn{background: transparent; border: 1px solid var(--border); color: var(--ink-soft); cursor: pointer; padding: 8px 14px; font-family: 'IBM Plex Sans Arabic', sans-serif; font-size:12px; font-weight: 500; display: flex; align-items: center; gap: 8px; transition: all 0.3s ease}.presentation-toggle-btn:hover, .presentation-toggle-btn.active{border-color: var(--ember); color: var(--ember); background: var(--ember-ghost)}.ncta, .download-btn, .sidebar-filter-tab, .sidebar-item, .tokens-customizer-trigger, .back-to-top-btn, .theme-toggle-btn, .sidebar-toggle-btn, .wz-btn, .app-tab, .tab-btn{min-height: 44px; touch-action: manipulation}button:active, .download-btn:active, .tab-btn:active, .app-tab:active{transform: scale(0.97)}.guide-card-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--site-gap); margin-top: 24px}.guide-card{background: var(--surf); border: 1px solid var(--border); padding: 24px; display: flex; flex-direction: column; gap: 12px; transition: transform 0.3s ease, border-color 0.3s ease}.guide-card:hover{transform: translateY(-4px); border-color: var(--ember)}.guide-card-icon{font-size: 24px; color: var(--ember)}.guide-card-title{font-family: 'Noto Kufi Arabic', sans-serif; font-size: 14px; font-weight: 700; color: var(--ink)}.guide-card-desc{font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 12px; color: var(--ink-soft); line-height: 1.6}.wz-header{position: relative; margin-bottom: 40px}.wz-progress-track{position: absolute; top: 24px; left: 0; right: 0; height: 3px; background: var(--border2); z-index: 1}.wz-progress-fill{position: absolute; top: 0; right: 0; height: 100%; width: 0; background: var(--ember); box-shadow: 0 0 6px var(--ember); transition: width 0.4s ease}.wz-steps{position: relative; display: flex; justify-content: space-between; z-index: 2}.wz-step{display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer}.wz-step-hex{width: 48px; height: 48px; background: var(--void); border: 2px solid var(--border2); color: var(--ink-soft); display: flex; align-items: center; justify-content: center; font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 14px; clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%); transition: all 0.3s ease}.wz-step.active .wz-step-hex{border-color: var(--ember); background: var(--ember); color: var(--void); box-shadow: 0 0 12px rgba(232, 69, 10, 0.3)}.wz-step.completed .wz-step-hex{border-color: var(--ember); background: var(--ember-ghost); color: var(--ember)}.wz-step-title{font-family: 'IBM Plex Sans Arabic', sans-serif; font-size:12px; font-weight: 600; color: var(--ink-soft)}.wz-step.active .wz-step-title{color: var(--ember)}.wz-panels{margin-bottom: 30px; min-height: 200px}.wz-panel{display: none; animation: fadeIn 0.4s ease forwards}.wz-panel.active{display: block}.wz-panel-title{font-family: 'Noto Kufi Arabic', sans-serif; font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 16px; border-bottom: 1px solid var(--border); padding-bottom: 8px}.wz-panel-desc{font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 13px; color: var(--ink-soft); line-height: 1.8}.wz-field-group{margin-top: 20px; display: flex; flex-direction: column; gap: 8px}.wz-input, .wz-select, .wz-textarea{width: 100%; padding: 10px 14px; border: 1px solid var(--border); background: var(--void); color: var(--ink); font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 13px; outline: none}.wz-input:focus, .wz-select:focus, .wz-textarea:focus{border-color: var(--ember)}.wz-nav-btns{display: flex; justify-content: space-between; border-top: 1px solid var(--border); padding-top: 20px}.wz-btn{padding: 10px 24px; border-radius: var(--base-radius); font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all 0.3s ease}.wz-btn-prev{background: transparent; border: 1px solid var(--border); color: var(--ink)}.wz-btn-prev:hover{background: var(--border)}.wz-btn-next{background: var(--ember); border: 1px solid var(--ember); color: var(--void)}.wz-btn-next:hover{box-shadow: 0 4px 15px rgba(232, 69, 10, 0.3); transform: translateY(-2px)}.wz-btn-next.finish{background: #2ea44f; border-color: #2ea44f}.wz-btn-next.finish:hover{box-shadow: 0 4px 15px rgba(46, 164, 79, 0.3)}.color-gen-container, .contrast-checker-container{background: var(--surf); border: 1px solid var(--border); padding: 28px; direction: rtl}.color-gen-controls, .cc-controls{display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px}.color-gen-input-group, .cc-input-group{display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 140px}.color-gen-input-label, .cc-input-label{font-family: 'IBM Plex Sans Arabic', sans-serif; font-size:12px; color: var(--ink-soft); font-weight: 600}.color-gen-input-wrap{display: flex; gap: 8px}.color-gen-color-picker, .cc-color-picker{-webkit-appearance: none; appearance: none; border: none; width: 44px; height: 44px; cursor: pointer; background: none; padding: 0}.color-gen-color-picker::-webkit-color-swatch, .cc-color-picker::-webkit-color-swatch{border: 1px solid var(--border); border-radius: 4px}.color-gen-text-input, .cc-text-input{flex: 1; padding: 10px; border: 1px solid var(--border); background: var(--void); color: var(--ink); font-family: 'IBM Plex Mono', monospace; font-size: 13px; outline: none; text-transform: uppercase}.color-gen-text-input:focus, .cc-text-input:focus{border-color: var(--ember)}.color-gen-select{padding: 10px 14px; border: 1px solid var(--border); background: var(--void); color: var(--ink); font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 13px; outline: none; flex: 1.5; min-width: 160px; cursor: pointer}.color-gen-select:focus{border-color: var(--ember)}.cc-ratings{display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 20px}.cc-rating-item{background: var(--void); border: 1px solid var(--border); padding: 12px; display: flex; flex-direction: column; gap: 6px}.cc-rating-title{font-family: 'IBM Plex Sans Arabic', sans-serif; font-size:12px; color: var(--ink-soft); font-weight: 600}.cc-rating-badge{font-family: 'IBM Plex Mono', monospace; font-size:12px; font-weight: 700; padding: 4px 8px; text-align: center}.cc-rating-badge.pass{background: rgba(46, 164, 79, 0.15); color: #1a6b32; border: 1px solid rgba(46, 164, 79, 0.2)}.cc-rating-badge.fail{background: rgba(226, 75, 74, 0.15); color: #b3201f; border: 1px solid rgba(226, 75, 74, 0.2)}.cc-ratio-display{display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--void); border: 1px solid var(--border); padding: 20px; margin-bottom: 20px}.cc-ratio-label{font-family: 'IBM Plex Sans Arabic', sans-serif; font-size:12px; color: var(--ink-soft); font-weight: 600; margin-bottom: 4px}.cc-ratio-val{font-family: 'IBM Plex Mono', monospace; font-size: 28px; font-weight: 700; color: var(--ember)}.cc-preview-box{border: 1px solid var(--border); padding: 20px; min-height: 90px; display: flex; align-items: center; justify-content: center; font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 13px; font-weight: 600; text-align: center; transition: all 0.2s ease}.a11y-dropdown{position: relative; display: inline-block}.a11y-menu{position: absolute; top: 100%; left: 0; background: var(--glass); backdrop-filter: blur(12px); border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,0.15); width: 260px; padding: 16px; z-index: 1000; display: none; flex-direction: column; gap: 12px; text-align: right; direction: rtl}body.theme-dark .a11y-menu{background: rgba(14, 14, 14, 0.95); box-shadow: 0 10px 30px rgba(0,0,0,0.4)}.a11y-menu.show{display: flex}.a11y-title{font-family: 'Noto Kufi Arabic', sans-serif; font-size: 13px; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 4px}.a11y-item{display: flex; justify-content: space-between; align-items: center; gap: 8px; font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 12px; color: var(--ink)}.font-controls{display: flex; gap: 4px}.btn-sm{padding: 4px 8px; font-size:12px !important; font-family: 'IBM Plex Mono', monospace; min-height: auto !important}.section-progress{position: fixed; left: 20px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px; z-index: 990}.progress-dot{width: 10px; height: 10px; border-radius: 50%; background: var(--ink-soft); opacity: 0.4; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid transparent}.progress-dot:hover{opacity: 0.8; transform: scale(1.3)}.progress-dot.active{background: var(--ember); opacity: 1; transform: scale(1.4); box-shadow: 0 0 8px var(--ember)}.toc-toggle-btn{position: fixed; left: 20px; bottom: 80px; z-index: 995; background: var(--glass); border: 1px solid var(--border); color: var(--ink); padding: 8px 14px; font-family: 'IBM Plex Sans Arabic', sans-serif; font-size:12px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.08); display: flex; align-items: center; gap: 6px; transition: all 0.3s}.toc-toggle-btn:hover{border-color: var(--ember); color: var(--ember); background: var(--ember-ghost)}.toc-drawer{position: fixed; left: -320px; bottom: 0; top: 0; width: 300px; background: var(--glass); backdrop-filter: blur(16px); border-right: 1px solid var(--border); box-shadow: 10px 0 40px rgba(0,0,0,0.1); z-index: 9990; display: flex; flex-direction: column; transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1); text-align: right; direction: rtl}body.theme-dark .toc-drawer{background: rgba(10, 10, 10, 0.85); box-shadow: 10px 0 40px rgba(0,0,0,0.4)}.toc-drawer.open{left: 0}.toc-header{padding: 24px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between}.toc-header h4{font-family: 'Noto Kufi Arabic', sans-serif; font-size: 14px; font-weight: 700; color: var(--ink); margin: 0}.toc-close-btn{background: none; border: none; font-size: 20px; cursor: pointer; color: var(--ink-soft); transition: color 0.2s}.toc-close-btn:hover{color: var(--ember)}.toc-body{flex: 1; overflow-y: auto; padding: 16px 20px}.toc-list{list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px}.toc-item{display: flex; align-items: center; gap: 12px; padding: 8px 12px; font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 13px; color: var(--ink); text-decoration: none; transition: all 0.25s; border: 1px solid transparent}.toc-item:hover{background: var(--warm); border-color: var(--border); color: var(--ember); transform: translateX(-4px)}.toc-item.active{background: var(--ember-ghost); border-color: var(--ember); color: var(--ember); font-weight: 600; box-shadow: inset 3px 0 0 var(--ember)}.toc-num{font-family: 'IBM Plex Mono', monospace; font-size:12px; font-weight: 500; color: var(--ink-soft)}.toc-item.active .toc-num{color: var(--ember)}body.font-lg{font-size: 1.15rem}body.font-xl{font-size: 1.3rem}body.reduce-motion *{animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important}body.reading-mode .hero, body.reading-mode .cp-bg-text, body.reading-mode .footer-ghost, body.reading-mode .err-ember-wrap, body.reading-mode .sh svg, body.reading-mode .hscroll, body.reading-mode .photo-overlay{display: none !important}body.reading-mode .sec{background: var(--void) !important; padding: 40px 20px !important; border: none !important; box-shadow: none !important; margin: 0 auto !important; max-width: 800px !important}.sh-share-btn{background: transparent; border: 1px solid var(--border); color: var(--ink-soft); width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; margin-right: 12px; font-size:12px; transition: all 0.2s; border-radius: 4px; vertical-align: middle}.sh-share-btn:hover{border-color: var(--ember); color: var(--ember); background: var(--ember-ghost)}.dm-compare-slider{position: relative; width: 100%; height: 400px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,0.06)}.dm-side-pane{position: absolute; top: 0; bottom: 0; height: 100%; overflow: hidden}.dm-pane-light{left: 0; right: 0; background: var(--void); color: var(--ink); z-index: 10}.dm-pane-dark{right: 0; left: auto; width: 50%; background: var(--dk1); color: var(--dkt); z-index: 20; border-left: 1px solid var(--ember)}.dm-pane-content{position: absolute; top: 0; right: 0; height: 100%; padding: 32px; display: flex; flex-direction: column; gap: 16px; justify-content: center}.dm-pane-light .dm-pane-content{width: 100%}.dm-slider-bar{position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--ember); z-index: 30; cursor: ew-resize; transform: translateX(-50%)}.dm-slider-button{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; border-radius: 50%; background: var(--ember); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; box-shadow: 0 4px 10px rgba(232, 69, 10, 0.4); cursor: ew-resize; user-select: none}.bg-choice-btn{border: 1px solid var(--border) !important; cursor: pointer; transition: transform 0.2s, border-color 0.2s}.bg-choice-btn:hover, .bg-choice-btn.active{border-color: var(--ember) !important; transform: translateY(-2px)}.search-modal{position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center}.search-modal-overlay{position: absolute; inset: 0; background: rgba(10, 10, 10, 0.75); backdrop-filter: blur(10px)}.search-modal-content{position: relative; width: 90%; max-width: 700px; background: var(--glass); backdrop-filter: blur(12px); border: 1px solid var(--border); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3); padding: 24px; display: flex; flex-direction: column; gap: 16px; z-index: 1; text-align: right; direction: rtl}body.theme-dark .search-modal-content{background: rgba(14, 14, 14, 0.95); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6)}.search-modal-header{display: flex; gap: 12px; align-items: center}.global-search-input{flex: 1; background: var(--void); border: 1px solid var(--border2); color: var(--ink); padding: 12px 18px; font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 15px; outline: none; transition: border-color 0.3s}.global-search-input:focus{border-color: var(--ember)}.search-modal-close{background: none; border: none; font-size: 28px; cursor: pointer; color: var(--ink-soft); transition: color 0.2s}.search-modal-close:hover{color: var(--ember)}.search-results-wrap{max-height: 400px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-left: 4px}.search-results-wrap::-webkit-scrollbar{width: 4px}.search-results-wrap::-webkit-scrollbar-thumb{background: var(--border2)}.search-result-item{background: var(--void); border: 1px solid var(--border); padding: 14px 18px; cursor: pointer; transition: all 0.25s; display: flex; flex-direction: column; gap: 6px}.search-result-item:hover{border-color: var(--ember); background: var(--ember-ghost); transform: translateX(-4px)}.search-result-title{font-family: 'Noto Kufi Arabic', sans-serif; font-size: 13px; font-weight: 700; color: var(--ink); display: flex; justify-content: space-between; align-items: center}.search-result-tag{font-family: 'IBM Plex Mono', monospace; font-size:12px; color: var(--ember); background: var(--ember-ghost); padding: 2px 6px; border-radius: 2px}.search-result-snippet{font-family: 'IBM Plex Sans Arabic', sans-serif; font-size:12px; color: var(--ink-soft); line-height: 1.6}.search-result-snippet mark{background: rgba(232, 69, 10, 0.2); color: var(--ember); font-weight: 600; padding: 0 2px; border-radius: 1px}.search-empty-state{font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 12px; color: var(--ink-soft); text-align: center; padding: 40px 0}.search-highlight-active{animation: searchFlash 2s ease-in-out}@keyframes searchFlash{0%, 100%{border-color: var(--border); box-shadow: none}20%, 80%{border-color: var(--ember); box-shadow: 0 0 15px rgba(232, 69, 10, 0.4)}} .gantt-showcase{padding: 24px; background: var(--surf); border: 1px solid var(--border); border-radius: var(--radius, 4px); margin-top: 16px}.gantt-card{width: 100%; display: flex; flex-direction: column; background: var(--void); border: 1px solid var(--border); border-radius: var(--radius, 4px); overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03)}.gantt-header-row{display: grid; grid-template-columns: 200px 1fr; background: var(--ink); color: var(--void); font-family: 'Noto Kufi Arabic', sans-serif; font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--border)}.gantt-task-col{padding: 14px 18px; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid var(--border)}[dir="rtl"] .gantt-task-col{border-left: none; border-right: 1px solid var(--border)}.gantt-timeline-cols{display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; align-items: center}.gantt-timeline-cols > div{padding: 14px 0; font-size:12px; opacity: 0.9; border-right: 1px solid rgba(255, 255, 255, 0.1)}[dir="rtl"] .gantt-timeline-cols > div{border-right: none; border-left: 1px solid rgba(255, 255, 255, 0.1)}.gantt-timeline-cols > div:last-child{border-right: none; border-left: none}.gantt-rows{display: flex; flex-direction: column}.gantt-row{display: grid; grid-template-columns: 200px 1fr; border-bottom: 1px solid var(--border); transition: background 0.2s ease}.gantt-row:hover{background: var(--surf)}.gantt-row:last-child{border-bottom: none}.gantt-task-title{font-family: 'Noto Kufi Arabic', sans-serif; font-size: 12px; font-weight: 700; color: var(--ink)}.gantt-task-meta{font-family: 'IBM Plex Sans Arabic', sans-serif; font-size:12px; color: var(--ink-soft); margin-top: 2px}.gantt-row .gantt-timeline-cols{padding: 0 10px; background: repeating-linear-gradient( 90deg, transparent, transparent calc(25% - 1px), var(--border) calc(25% - 1px), var(--border) 25% )}.gantt-bar-wrap{width: 100%; height: 28px; display: flex; align-items: center; padding: 2px 0}.gantt-bar{height: 100%; border-radius: 4px; color: #fff; font-family: 'IBM Plex Mono', monospace; font-size:12px; font-weight: 600; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(232, 69, 10, 0.15); animation: ganttGrow 1s cubic-bezier(0.4, 0, 0.2, 1) forwards; transform-origin: right}[dir="ltr"] .gantt-bar{transform-origin: left}@keyframes ganttGrow{from{transform: scaleX(0)}to{transform: scaleX(1)}} .carousel-showcase{padding: 24px; background: var(--surf); border: 1px solid var(--border); border-radius: var(--radius, 4px); margin-top: 16px}.carousel-container{position: relative; width: 100%; height: 380px; border-radius: var(--radius, 4px); overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); background: #141414}.carousel-slides{width: 100%; height: 100%; position: relative}.carousel-slide{position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.6s; display: flex; align-items: flex-end; padding: 48px; box-sizing: border-box}.carousel-slide.active{opacity: 1; visibility: visible; z-index: 2}.carousel-slide-content{max-width: 600px; color: #F7F4EF; transform: translateY(20px); transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); text-shadow: 0 2px 10px rgba(0,0,0,0.4)}.carousel-slide.active .carousel-slide-content{transform: translateY(0)}.carousel-slide-content h3{font-family: 'Noto Kufi Arabic', sans-serif; font-size: 24px; font-weight: 700; margin-bottom: 12px; color: var(--ember-pale)}.carousel-slide-content p{font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 14px; line-height: 1.8; opacity: 0.9}.carousel-control{position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(20, 20, 20, 0.5); border: 1px solid rgba(255, 255, 255, 0.15); color: #fff; font-family: 'IBM Plex Mono', monospace; font-size: 18px; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; transition: background 0.2s, border-color 0.2s, transform 0.2s}.carousel-control:hover{background: var(--ember); border-color: var(--ember)}.carousel-control.prev{right: 20px}.carousel-control.next{left: 20px}.carousel-dots{position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 10}.carousel-dot{width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); cursor: pointer; transition: background 0.2s, transform 0.2s}.carousel-dot.active{background: var(--ember); transform: scale(1.2)}.timeline-showcase{padding: 32px 24px; background: var(--surf); border: 1px solid var(--border); border-radius: var(--radius, 4px); margin-top: 16px}.timeline-horiz-container{position: relative; width: 100%; margin-bottom: 32px; padding: 20px 0}.timeline-horiz-line{position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: var(--border); transform: translateY(-50%); z-index: 1}.timeline-horiz-steps{position: relative; display: flex; justify-content: space-between; z-index: 2; max-width: 800px; margin: 0 auto}.timeline-horiz-step{display: flex; flex-direction: column; align-items: center; cursor: pointer; flex: 1; text-align: center}.timeline-horiz-dot{width: 16px; height: 16px; border-radius: 50%; background: var(--void); border: 3px solid var(--border); transition: background 0.3s, border-color 0.3s, transform 0.3s}.timeline-horiz-step:hover .timeline-horiz-dot{border-color: var(--ember); transform: scale(1.2)}.timeline-horiz-step.active .timeline-horiz-dot{background: var(--ember); border-color: var(--ember); box-shadow: 0 0 10px rgba(232, 69, 10, 0.4)}.timeline-horiz-year{font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 700; color: var(--ink-soft); margin-top: 12px; transition: color 0.3s}.timeline-horiz-step.active .timeline-horiz-year{color: var(--ember)}.timeline-horiz-title{font-family: 'Noto Kufi Arabic', sans-serif; font-size:12px; color: var(--ink-soft); margin-top: 4px; max-width: 120px}.timeline-horiz-step.active .timeline-horiz-title{color: var(--ink); font-weight: 600}.timeline-horiz-details{background: var(--void); border: 1px solid var(--border); border-radius: var(--radius, 4px); padding: 24px; max-width: 800px; margin: 0 auto; min-height: 120px; box-shadow: 0 4px 15px rgba(0,0,0,0.02)}.timeline-detail-panel{animation: fadeIn 0.4s ease}.timeline-detail-panel h4{font-family: 'Noto Kufi Arabic', sans-serif; font-size: 16px; font-weight: 700; color: var(--ember); margin-bottom: 8px}.timeline-detail-panel p{font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 13px; color: var(--ink-soft); line-height: 1.8}.pricing-showcase{padding: 32px 24px; background: var(--surf); border: 1px solid var(--border); border-radius: var(--radius, 4px); margin-top: 16px}.pricing-toggle-wrap{display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 36px}.pricing-toggle-label{font-family: 'Noto Kufi Arabic', sans-serif; font-size: 13px; font-weight: 600; color: var(--ink-soft); transition: color 0.3s}.pricing-toggle-label.active{color: var(--ember)}.pricing-discount{font-size:12px; background: var(--ember-ghost); color: var(--ember); padding: 2px 6px; border-radius: 10px; margin-right: 4px}.pricing-toggle-switch{width: 50px; height: 26px; border-radius: 13px; background: var(--border); border: none; position: relative; cursor: pointer; transition: background 0.3s}.pricing-toggle-switch::after{content: ''; position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--void); transition: transform 0.3s; box-shadow: 0 1px 4px rgba(0,0,0,0.2)}.pricing-toggle-switch.yearly{background: var(--ember)}.pricing-toggle-switch.yearly::after{transform: translateX(-24px)}.pricing-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1000px; margin: 0 auto; align-items: stretch}.pricing-card{background: var(--void); border: 1px solid var(--border); border-radius: var(--radius, 4px); padding: 32px 24px; display: flex; flex-direction: column; position: relative; transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; box-shadow: 0 4px 15px rgba(0,0,0,0.02)}.pricing-card:hover{transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0,0,0,0.08)}.pricing-card.featured{border: 2px solid var(--ember); box-shadow: 0 8px 25px rgba(232, 69, 10, 0.08)}.pricing-badge{position: absolute; top: -12px; right: 24px; background: var(--ember); color: #fff; font-family: 'Noto Kufi Arabic', sans-serif; font-size:12px; font-weight: 700; padding: 4px 12px; border-radius: 20px; letter-spacing: 0.5px}.pricing-card-header{margin-bottom: 24px; border-bottom: 1px solid var(--border); padding-bottom: 20px; flex-grow: 0}.pricing-plan-name{font-family: 'Noto Kufi Arabic', sans-serif; font-size: 16px; font-weight: 700; color: var(--ink); display: block; margin-bottom: 12px}.pricing-price-wrap{display: flex; align-items: baseline; margin-bottom: 12px}.pricing-currency{font-family: 'IBM Plex Mono', monospace; font-size: 20px; font-weight: 600; color: var(--ink); margin-left: 2px}.pricing-price{font-family: 'IBM Plex Mono', monospace; font-size: 40px; font-weight: 700; color: var(--ink); line-height: 1}.pricing-period{font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 12px; color: var(--ink-soft); margin-right: 4px}.pricing-price-custom{font-family: 'Noto Kufi Arabic', sans-serif; font-size: 28px; font-weight: 700; color: var(--ink); line-height: 1}.pricing-plan-desc{font-family: 'IBM Plex Sans Arabic', sans-serif; font-size:12px; color: var(--ink-soft); line-height: 1.6}.pricing-features{list-style: none; padding: 0; margin: 0 0 32px 0; display: flex; flex-direction: column; gap: 12px; flex-grow: 1}.pricing-features li{font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 12px; color: var(--ink-soft)}.testimonials-showcase{padding: 32px 24px; background: var(--surf); border: 1px solid var(--border); border-radius: var(--radius, 4px); margin-top: 16px}.testimonials-container{position: relative; width: 100%; max-width: 800px; margin: 0 auto 24px auto; min-height: 180px; display: flex; align-items: center}.testimonial-slide{position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s; background: var(--void); border: 1px solid var(--border); border-radius: var(--radius, 4px); padding: 32px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 4px 15px rgba(0,0,0,0.02)}.testimonial-slide.active{position: relative; opacity: 1; visibility: visible; z-index: 2}.testimonial-stars{color: #ffb100; font-size: 16px; letter-spacing: 2px; margin-bottom: 12px}.testimonial-quote{font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 15px; font-style: italic; line-height: 1.8; color: var(--ink-soft); margin-bottom: 20px}.testimonial-client{display: flex; align-items: center; gap: 12px}.testimonial-avatar{width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Noto Kufi Arabic', sans-serif; font-size: 14px; font-weight: bold}.testimonial-info{display: flex; flex-direction: column}.client-name{font-family: 'Noto Kufi Arabic', sans-serif; font-size: 13px; font-weight: 700; color: var(--ink)}.client-role{font-family: 'IBM Plex Sans Arabic', sans-serif; font-size:12px; color: var(--ink-soft)}.testimonials-nav{display: flex; justify-content: center; gap: 12px}.testimonials-nav-btn{padding: 8px 16px; border: 1px solid var(--border); background: var(--void); color: var(--ink); font-family: 'Noto Kufi Arabic', sans-serif; font-size:12px; cursor: pointer; border-radius: var(--radius, 4px); transition: all 0.2s}.testimonials-nav-btn:hover{background: var(--ember); color: #fff; border-color: var(--ember)}.cookie-demo-container{background: var(--surf); border: 1px solid var(--border); border-radius: var(--radius, 4px); margin-top: 16px}.cookie-consent-banner{position: fixed; bottom: 24px; left: 24px; width: calc(100% - 48px); max-width: 460px; background: rgba(20, 20, 20, 0.95); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; padding: 24px; box-sizing: border-box; z-index: 9999; box-shadow: 0 10px 40px rgba(0,0,0,0.3); animation: slideUpCookie 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards}@keyframes slideUpCookie{from{transform: translateY(100px); opacity: 0}to{transform: translateY(0); opacity: 1}} .cookie-banner-content{display: flex; flex-direction: column; gap: 16px; direction: rtl}.cookie-banner-text h4{font-family: 'Noto Kufi Arabic', sans-serif; font-size: 14px; font-weight: 700; color: #F7F4EF; margin-bottom: 6px}.cookie-banner-text p{font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 12px; line-height: 1.6; color: #d8d0c4}.cookie-banner-actions{display: flex; gap: 8px; justify-content: flex-end}.matrix-showcase{padding: 24px; background: var(--surf); border: 1px solid var(--border); border-radius: var(--radius, 4px); margin-top: 16px}.matrix-table-wrap{width: 100%; overflow-x: auto; border-radius: var(--radius, 4px); border: 1px solid var(--border); box-shadow: 0 4px 15px rgba(0,0,0,0.02)}.matrix-table{width: 100%; border-collapse: collapse; text-align: right; background: var(--void)}.matrix-table th, .matrix-table td{padding: 14px 18px; border-bottom: 1px solid var(--border)}.matrix-table th{background: var(--ink); color: var(--void); font-family: 'Noto Kufi Arabic', sans-serif; font-size: 12px; font-weight: 700}.matrix-table th:first-child{width: 250px}.matrix-table td{font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 12px}.feature-col{font-weight: 700; color: var(--ink); font-family: 'Noto Kufi Arabic', sans-serif}.yes-col{color: #1c533c; background: rgba(28, 83, 60, 0.03); font-weight: 600}.no-col{color: #a32a2a; opacity: 0.8}.team-showcase{padding: 24px; background: var(--surf); border: 1px solid var(--border); border-radius: var(--radius, 4px); margin-top: 16px}.team-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 900px; margin: 0 auto}.team-card-wrap{perspective: 1000px; aspect-ratio: 4/5; min-height: 280px}.team-card{width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1)}.team-card-wrap:hover .team-card{transform: rotateY(-180deg)}.team-card-face{position: absolute; top: 0; left: 0; width: 100%; height: 100%; backface-visibility: hidden; border-radius: var(--radius, 4px); border: 1px solid var(--border); padding: 24px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--void); box-shadow: 0 4px 15px rgba(0,0,0,0.02)}.team-card-front{z-index: 2}.team-card-back{transform: rotateY(-180deg); background: var(--ink); color: var(--void); border-color: var(--ink)}.team-avatar-hex{width: 70px; height: 70px; clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); background: var(--ember-ghost); display: flex; align-items: center; justify-content: center; margin-bottom: 16px}.team-initial{font-family: 'Noto Kufi Arabic', sans-serif; font-size: 22px; font-weight: 700; color: var(--ember)}.team-card-front h4{font-family: 'Noto Kufi Arabic', sans-serif; font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 6px}.team-role{font-family: 'IBM Plex Sans Arabic', sans-serif; font-size:12px; color: var(--ink-soft); margin-bottom: 16px}.flip-hint{font-family: 'IBM Plex Sans Arabic', sans-serif; font-size:12px; color: var(--ink-soft); opacity: 0.6}.team-card-back h4{font-family: 'Noto Kufi Arabic', sans-serif; font-size: 14px; font-weight: 700; color: var(--ember-pale); margin-bottom: 12px}.team-bio{font-family: 'IBM Plex Sans Arabic', sans-serif; font-size:12px; line-height: 1.6; color: #d8d0c4; margin-bottom: 20px}.team-social{display: flex; gap: 12px}.team-social a{color: var(--ember-pale); font-family: 'IBM Plex Mono', monospace; font-size:12px; text-decoration: underline}.team-social a:hover{color: #fff}.upload-showcase{padding: 24px; background: var(--surf); border: 1px solid var(--border); border-radius: var(--radius, 4px); margin-top: 16px}.upload-dropzone{width: 100%; max-width: 600px; margin: 0 auto; border: 2px dashed var(--border); border-radius: 8px; background: var(--void); padding: 40px 20px; text-align: center; cursor: pointer; transition: border-color 0.2s, background-color 0.2s; display: flex; flex-direction: column; align-items: center}.upload-dropzone.dragover{border-color: var(--ember); background: var(--ember-ghost)}.upload-icon{font-size: 40px; color: var(--ink-soft); margin-bottom: 16px; transition: transform 0.2s}.upload-dropzone:hover .upload-icon{transform: translateY(-4px); color: var(--ember)}.upload-text{font-family: 'Noto Kufi Arabic', sans-serif; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 6px}.upload-subtext{font-family: 'IBM Plex Sans Arabic', sans-serif; font-size:12px; color: var(--ink-soft)}.upload-progress-wrap{display: flex; align-items: center; gap: 12px; width: 100%; max-width: 400px}.upload-progress-bar{flex: 1; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden}.upload-progress-fill{height: 100%; background: var(--ember); transition: width 0.1s linear}.upload-pct{font-family: 'IBM Plex Mono', monospace; font-size:12px; color: var(--ink-soft); width: 30px}.grain-overlay{position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 999999; opacity: 0.045; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")}.ambient-glow{position: absolute; width: 500px; height: 500px; background: radial-gradient(circle, rgba(232, 69, 10, 0.07) 0%, rgba(212, 86, 58, 0.02) 50%, transparent 100%); pointer-events: none; z-index: 0; filter: blur(80px); animation: ambientFloat 25s infinite alternate ease-in-out; border-radius: 50%}.ambient-glow-1{top: 10%; left: -150px; animation-duration: 20s}.ambient-glow-2{top: 45%; right: -150px; background: radial-gradient(circle, rgba(212, 86, 58, 0.06) 0%, rgba(232, 69, 10, 0.01) 60%, transparent 100%); animation-duration: 30s}.ambient-glow-3{bottom: 15%; left: -200px; animation-duration: 25s}@keyframes ambientFloat{0%{transform: translate(0, 0) scale(1)}50%{transform: translate(80px, -40px) scale(1.05)}100%{transform: translate(-40px, 60px) scale(0.95)}} .sht{letter-spacing: 0.06em; text-transform: uppercase}.sec-title{text-shadow: 0 2px 10px rgba(0, 0, 0, 0.02)}.wz-btn{position: relative; overflow: hidden; z-index: 1}.wz-btn::after{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); transform: translateX(-100%); transition: transform 0.6s ease; z-index: -1}.wz-btn:hover::after{transform: translateX(100%)}.brand-arch-grid{display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 24px}.arch-card{background: var(--void); border: 1px solid var(--border); border-radius: 8px; padding: 24px; position: relative; overflow: hidden; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; justify-content: space-between}.arch-card::before{content: ''; position: absolute; top: 0; right: 0; left: 0; height: 4px; background: var(--arch-color, var(--ember)); opacity: 0.8; transition: height 0.3s ease}.arch-card:hover{transform: translateY(-4px); border-color: var(--arch-color, var(--ember)); box-shadow: 0 12px 32px rgba(232, 69, 10, 0.08)}.arch-card:hover::before{height: 6px}.arch-header{display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px}.arch-badge{font-family: 'IBM Plex Mono', monospace; font-size:12px; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; background: var(--arch-bg, var(--ember-ghost)); color: var(--arch-color, var(--ember)); font-weight: 600}.arch-icon-box{width: 44px; height: 44px; border-radius: 8px; background: var(--arch-bg, var(--ember-ghost)); display: flex; align-items: center; justify-content: center; color: var(--arch-color, var(--ember))}.arch-title-ar{font-family: 'Noto Kufi Arabic', sans-serif; font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 4px; direction: rtl}.arch-title-en{font-family: 'IBM Plex Mono', monospace; font-size:12px; letter-spacing: 2px; color: var(--ink-soft); text-transform: uppercase; margin-bottom: 12px; direction: ltr}.arch-desc{font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 13px; line-height: 1.8; color: var(--ink-soft); direction: rtl; margin-bottom: 20px}.arch-tags{display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto}.arch-tag{font-family: 'IBM Plex Mono', monospace; font-size:12px; padding: 3px 8px; background: var(--surf); border: 1px solid var(--border); border-radius: 3px; color: var(--ink-soft)}.sonic-container{display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; margin-top: 24px}.sonic-main-card{background: var(--dk1); color: var(--dkt); border-radius: 12px; padding: 32px; border: 1px solid rgba(247, 244, 239, 0.1); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between}.sonic-waveform-box{background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(232, 69, 10, 0.2); border-radius: 8px; padding: 24px; margin: 20px 0; display: flex; align-items: center; justify-content: center; position: relative}.sonic-bars-wrap{display: flex; align-items: center; gap: 6px; height: 64px}.sonic-bar{width: 5px; background: linear-gradient(180deg, var(--ember-pale), var(--ember)); border-radius: 4px; animation: sonicPulse 1.8s infinite ease-in-out alternate}.sonic-bar:nth-child(2){animation-delay: 0.15s; height: 35%}.sonic-bar:nth-child(3){animation-delay: 0.3s; height: 75%}.sonic-bar:nth-child(4){animation-delay: 0.45s; height: 95%}.sonic-bar:nth-child(5){animation-delay: 0.6s; height: 50%}.sonic-bar:nth-child(6){animation-delay: 0.75s; height: 85%}.sonic-bar:nth-child(7){animation-delay: 0.9s; height: 40%}.sonic-bar:nth-child(8){animation-delay: 1.05s; height: 65%}@keyframes sonicPulse{0%{transform: scaleY(0.3); opacity: 0.5}100%{transform: scaleY(1.1); opacity: 1; filter: drop-shadow(0 0 6px var(--ember))}} .sonic-triggers-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 12px}.sonic-btn{background: var(--void); border: 1px solid var(--border); border-radius: 6px; padding: 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: all 0.25s ease; direction: rtl; text-align: right}.sonic-btn:hover{border-color: var(--ember); background: var(--warm); transform: translateY(-2px)}.sonic-btn-icon{width: 36px; height: 36px; border-radius: 50%; background: var(--ember-ghost); color: var(--ember); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; transition: all 0.25s ease}.sonic-btn:hover .sonic-btn-icon{background: var(--ember); color: #fff; transform: scale(1.1)}.sonic-btn-title{font-family: 'Noto Kufi Arabic', sans-serif; font-size: 13px; font-weight: 700; color: var(--ink)}.sonic-btn-sub{font-family: 'IBM Plex Mono', monospace; font-size:12px; color: var(--ink-soft); direction: ltr}.motion-curves-grid{display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 24px}.curve-card{background: var(--void); border: 1px solid var(--border); border-radius: 8px; padding: 20px; transition: border-color 0.3s}.curve-card:hover{border-color: var(--ember)}.curve-header{display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px}.curve-name{font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600; color: var(--ember)}.curve-timing{font-family: 'IBM Plex Mono', monospace; font-size:12px; color: var(--ink-soft)}.curve-graph-wrap{height: 100px; background: var(--warm); border: 1px solid var(--border); border-radius: 4px; position: relative; overflow: hidden; margin-bottom: 16px; display: flex; align-items: center; justify-content: center}.curve-track{width: 80%; height: 2px; background: var(--border); position: relative}.curve-runner{width: 14px; height: 14px; border-radius: 50%; background: var(--ember); position: absolute; top: -6px; left: 0; box-shadow: 0 0 8px rgba(232, 69, 10, 0.4)}.curve-card:hover .curve-runner{animation-iteration-count: infinite}.runner-spring{animation: runTrack 1.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite alternate}.runner-flame{animation: runTrack 1.4s cubic-bezier(0.16, 1, 0.3, 1) infinite alternate}.runner-smooth{animation: runTrack 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.runner-snap{animation: runTrack 1.2s cubic-bezier(0.87, 0, 0.13, 1) infinite alternate}@keyframes runTrack{0%{left: 0%}100%{left: calc(100% - 14px)}} .curve-code{font-family: 'IBM Plex Mono', monospace; font-size:12px; background: var(--surf); padding: 6px 10px; border-radius: 4px; color: var(--ink-soft); direction: ltr; text-align: center}.icon-geo-wrap{display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; margin-top: 24px; align-items: center}.icon-geo-canvas-card{background: var(--dk0); border-radius: 12px; padding: 36px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; border: 1px solid rgba(247, 244, 239, 0.1)}.icon-geo-controls{margin-top: 16px; display: flex; gap: 12px}.icon-geo-toggle-btn{font-family: 'IBM Plex Mono', monospace; font-size:12px; padding: 6px 14px; border: 1px solid var(--ember); background: transparent; color: var(--ember-pale); border-radius: 4px; cursor: pointer; transition: all 0.2s ease}.icon-geo-toggle-btn.active, .icon-geo-toggle-btn:hover{background: var(--ember); color: #fff}.icon-geo-specs{display: flex; flex-direction: column; gap: 14px; direction: rtl}.icon-geo-spec-item{padding: 16px; background: var(--void); border: 1px solid var(--border); border-radius: 6px}.icon-geo-spec-title{font-family: 'Noto Kufi Arabic', sans-serif; font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 4px}.icon-geo-spec-desc{font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 12px; color: var(--ink-soft); line-height: 1.8}.typo-playground-wrap{background: var(--void); border: 1px solid var(--border); border-radius: 12px; padding: 32px; margin-top: 32px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03)}.typo-playground-controls{display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--border); margin-bottom: 24px; direction: rtl}.typo-ctrl-group{display: flex; flex-direction: column; gap: 8px}.typo-ctrl-label{font-family: 'IBM Plex Mono', monospace; font-size:12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ember); font-weight: 600}.typo-select, .typo-range-input{width: 100%; accent-color: var(--ember)}.typo-select{padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--warm); font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 13px; color: var(--ink); outline: none}.typo-presets-bar{display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; direction: rtl}.typo-preset-btn{font-family: 'IBM Plex Mono', monospace; font-size:12px; padding: 6px 14px; border: 1px solid var(--border); background: var(--surf); border-radius: 4px; cursor: pointer; transition: all 0.2s ease; color: var(--ink)}.typo-preset-btn.active, .typo-preset-btn:hover{border-color: var(--ember); background: var(--ember-ghost); color: var(--ember)}.typo-live-preview-box{min-height: 180px; padding: 28px; background: var(--warm); border: 1px dashed var(--border2); border-radius: 8px; outline: none; color: var(--ink); transition: font 0.15s ease; direction: rtl}.typo-live-preview-box:focus{border-color: var(--ember); background: var(--void)}.typo-css-output-bar{margin-top: 16px; padding: 12px 16px; background: var(--dk1); border-radius: 6px; display: flex; align-items: center; justify-content: space-between; color: var(--ember-pale); font-family: 'IBM Plex Mono', monospace; font-size:12px; direction: ltr}.typo-copy-css-btn{background: var(--ember); color: #fff; border: none; padding: 6px 12px; border-radius: 4px; font-size:12px; cursor: pointer; letter-spacing: 1px; text-transform: uppercase}.banner-studio-wrap{display: grid; grid-template-columns: 340px 1fr; gap: 28px; background: var(--void); border: 1px solid var(--border); border-radius: 12px; padding: 28px; margin-top: 24px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03)}.banner-controls-panel{display: flex; flex-direction: column; gap: 16px; direction: rtl}.banner-ctrl-group{display: flex; flex-direction: column; gap: 6px}.banner-ctrl-label{font-family: 'IBM Plex Mono', monospace; font-size:12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ember); font-weight: 600}.banner-input, .banner-select, .banner-textarea{border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; background: var(--warm); font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 13px; color: var(--ink); outline: none; transition: border-color 0.2s}.banner-input:focus, .banner-select:focus, .banner-textarea:focus{border-color: var(--ember); background: var(--void)}.banner-textarea{resize: vertical; min-height: 64px; line-height: 1.6}.banner-preview-panel{display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--warm); border: 1px solid var(--border); border-radius: 8px; padding: 24px; position: relative; overflow: hidden}.banner-canvas-container{width: 100%; max-width: 100%; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.05); border-radius: 6px; padding: 12px; overflow: hidden}#bannerCanvas{max-width: 100%; height: auto; border-radius: 6px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15)}.banner-actions-bar{margin-top: 16px; display: flex; gap: 12px; width: 100%; justify-content: center}.banner-download-btn{background: var(--ember); color: #fff; border: none; border-radius: 6px; padding: 12px 24px; font-family: 'IBM Plex Mono', monospace; font-size:12px; font-weight: 600; letter-spacing: 1.5px; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.25s ease; text-transform: uppercase}.banner-download-btn:hover{background: var(--ember-dim); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(232, 69, 10, 0.3)}.multi-tokens-wrap{background: var(--dk1); color: var(--dkt); border: 1px solid rgba(247, 244, 239, 0.1); border-radius: 12px; padding: 28px; margin-top: 24px; overflow: hidden}.tokens-platform-nav{display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; border-bottom: 1px solid rgba(247, 244, 239, 0.1); margin-bottom: 20px}.tokens-platform-btn{background: rgba(247, 244, 239, 0.05); border: 1px solid rgba(247, 244, 239, 0.12); color: var(--dkm); font-family: 'IBM Plex Mono', monospace; font-size:12px; padding: 8px 16px; border-radius: 6px; cursor: pointer; white-space: nowrap; transition: all 0.2s ease; display: flex; align-items: center; gap: 6px}.tokens-platform-btn.active, .tokens-platform-btn:hover{background: var(--ember); color: #fff; border-color: var(--ember)}.tokens-code-box{background: var(--dk0); border: 1px solid rgba(247, 244, 239, 0.08); border-radius: 8px; padding: 20px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; line-height: 1.7; color: var(--ember-pale); max-height: 380px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; direction: ltr; text-align: left}.tokens-actions-bar{display: flex; justify-content: space-between; align-items: center; margin-top: 16px; flex-wrap: wrap; gap: 12px}.tokens-copy-btn, .tokens-download-file-btn{font-family: 'IBM Plex Mono', monospace; font-size:12px; letter-spacing: 1px; padding: 8px 18px; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; text-transform: uppercase}.tokens-copy-btn{background: var(--ember); color: #fff; border: none}.tokens-copy-btn:hover{background: var(--ember-dim)}.tokens-download-file-btn{background: transparent; color: var(--ember-pale); border: 1px solid rgba(247, 244, 239, 0.2)}.tokens-download-file-btn:hover{border-color: var(--ember); background: var(--ember-ghost)}.lang-toggle-btn{display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border: 1px solid var(--border); background: var(--void); color: var(--ink); font-family: 'IBM Plex Mono', monospace; font-size:12px; font-weight: 600; border-radius: 4px; cursor: pointer; transition: all 0.2s ease}.lang-toggle-btn:hover{border-color: var(--ember); color: var(--ember)}body.lang-en-focus .nen, body.lang-en-focus .hwen, body.lang-en-focus .sht{color: var(--ember) !important; font-weight: 600 !important}@media(max-width: 900px){.banner-studio-wrap{grid-template-columns: 1fr}} .search-modal-footer{display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--border); font-family: 'IBM Plex Mono', monospace; font-size:12px; color: var(--ink-soft); direction: ltr}.search-shortcuts-hint{display: flex; gap: 8px}.search-kbd{background: var(--surf); border: 1px solid var(--border); border-radius: 3px; padding: 2px 6px; font-size:12px; color: var(--ink)}.search-result-item.selected{border-color: var(--ember); background: var(--ember-ghost); transform: translateX(-4px); box-shadow: 0 4px 12px rgba(232, 69, 10, 0.1)}.search-match-highlight{background: rgba(232, 69, 10, 0.2); color: var(--ember); padding: 0 2px; border-radius: 2px; font-weight: 700}.search-category-header{font-family: 'IBM Plex Mono', monospace; font-size:12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ember); margin-top: 8px; margin-bottom: 4px; padding-right: 4px; font-weight: 600}.hero-ember-canvas{position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; opacity: 0.85}.vcard-studio-wrap{display: grid; grid-template-columns: 340px 1fr; gap: 32px; background: var(--void); border: 1px solid var(--border); border-radius: 12px; padding: 28px; margin-top: 24px}.vcard-preview-stage{display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--warm); border: 1px solid var(--border); border-radius: 8px; padding: 32px 20px; perspective: 1000px; position: relative}.vcard-3d-box{width: 340px; height: 200px; position: relative; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer}.vcard-3d-box.flipped{transform: rotateY(180deg)}.vcard-face{position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 10px; padding: 20px 24px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18); border: 1px solid rgba(255, 255, 255, 0.1); overflow: hidden}.vcard-front{background: linear-gradient(135deg, #181818 0%, #0A0A0A 100%); color: #fff}.vcard-back{background: linear-gradient(135deg, #141414 0%, #1c1c1c 100%); color: #fff; transform: rotateY(180deg); display: flex; flex-direction: row; align-items: center; justify-content: space-between}.vcard-qr-box{background: #fff; padding: 8px; border-radius: 6px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2)}.vcard-actions-bar{margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center}.vcard-btn{background: var(--ember); color: #fff; border: none; border-radius: 6px; padding: 10px 20px; font-family: 'IBM Plex Mono', monospace; font-size:12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.2s; text-transform: uppercase}.vcard-btn:hover{background: var(--ember-dim); transform: translateY(-2px)}.vcard-btn-sec{background: var(--surf); color: var(--ink); border: 1px solid var(--border)}.vcard-btn-sec:hover{border-color: var(--ember); background: var(--ember-ghost)}.role-filter-bar{display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; background: var(--void); border-bottom: 1px solid var(--border); position: sticky; top: 55px; z-index: 99; backdrop-filter: blur(10px); direction: rtl; flex-wrap: wrap}.role-filter-label{font-family: 'Noto Kufi Arabic', sans-serif; font-size:12px; font-weight: 700; color: var(--ink-soft); margin-left: 8px}.role-filter-btn{font-family: 'IBM Plex Sans Arabic', sans-serif; font-size:12px; font-weight: 600; padding: 6px 14px; border: 1px solid var(--border); background: var(--surf); color: var(--ink); border-radius: 20px; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 6px}.role-filter-btn.active, .role-filter-btn:hover{background: var(--ember); color: #fff; border-color: var(--ember); box-shadow: 0 4px 12px rgba(232, 69, 10, 0.25)}body.view-mode-designer .role-tag-designer{box-shadow: 0 0 0 2px var(--ember) !important}body.view-mode-developer .role-tag-developer{box-shadow: 0 0 0 2px var(--ember) !important}body.view-mode-executive .role-tag-executive{box-shadow: 0 0 0 2px var(--ember) !important}.pitch-studio-wrap{display: grid; grid-template-columns: 340px 1fr; gap: 32px; background: var(--void); border: 1px solid var(--border); border-radius: 12px; padding: 28px; margin-top: 24px}.pitch-preview-panel{display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--warm); border: 1px solid var(--border); border-radius: 8px; padding: 24px; position: relative; overflow: hidden}#pitchCanvas{max-width: 100%; height: auto; border-radius: 6px; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2)}.pitch-actions-bar{margin-top: 16px; display: flex; gap: 12px; justify-content: center}@media(max-width: 900px){.vcard-studio-wrap, .pitch-studio-wrap{grid-template-columns: 1fr}.vcard-3d-box{width: 300px; height: 180px}} .role-filter-badge{display: inline-flex; align-items: center; gap: 6px; font-family: 'IBM Plex Mono', monospace; font-size:12px; letter-spacing: 1px; color: var(--ember); background: var(--ember-ghost); border: 1px solid rgba(232, 69, 10, 0.3); padding: 3px 8px; border-radius: 3px; margin-bottom: 8px; text-transform: uppercase}.role-count-badge{font-family: 'IBM Plex Mono', monospace; font-size:12px; background: var(--ember-ghost); color: var(--ember); padding: 2px 8px; border-radius: 12px; margin-right: 8px; font-weight: 600}body.view-mode-active .role-item-dimmed{opacity: 0.15 !important; filter: grayscale(100%) !important; pointer-events: none !important; transform: scale(0.99); transition: all 0.4s ease !important}body.view-mode-active .role-item-highlighted{opacity: 1 !important; filter: none !important; pointer-events: auto !important; border-color: var(--ember) !important; box-shadow: 0 10px 30px rgba(232, 69, 10, 0.08) !important; transition: all 0.4s ease !important}.role-filter-bar{position: sticky; top: 50px; left: 0; width: 100%; z-index: 990; background: rgba(247, 244, 239, 0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); padding: 8px 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); transition: all 0.3s ease; direction: rtl}body.theme-dark .role-filter-bar{background: rgba(14, 14, 14, 0.92); border-bottom-color: rgba(247, 244, 239, 0.1); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4)}.role-filter-inner{max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap}.role-filter-label{font-family: 'Noto Kufi Arabic', sans-serif; font-size:12px; font-weight: 700; color: var(--ink); white-space: nowrap}.role-filter-btns-wrap{display: flex; align-items: center; gap: 8px; flex-wrap: wrap}.role-filter-btn{font-family: 'IBM Plex Sans Arabic', sans-serif; font-size:12px; font-weight: 600; padding: 6px 14px; border: 1px solid var(--border); background: var(--surf); color: var(--ink); border-radius: 20px; cursor: pointer; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); display: inline-flex; align-items: center; gap: 6px; outline: none; user-select: none}.role-filter-btn:hover{border-color: var(--ember); background: var(--ember-ghost); color: var(--ember); transform: translateY(-1px)}.role-filter-btn.active{background: var(--ember) !important; color: #FFFFFF !important; border-color: var(--ember) !important; box-shadow: 0 4px 14px rgba(232, 69, 10, 0.35) !important; transform: translateY(-1px)}.role-count-badge{font-family: 'IBM Plex Mono', monospace; font-size:12px; background: var(--ember-ghost); color: var(--ember); border: 1px solid rgba(232, 69, 10, 0.25); padding: 4px 10px; border-radius: 12px; font-weight: 600; white-space: nowrap}body.view-mode-active .role-item-dimmed{opacity: 0.12 !important; filter: grayscale(100%) !important; transform: scale(0.99); pointer-events: none !important; transition: all 0.4s ease !important}body.view-mode-active .role-item-highlighted{opacity: 1 !important; filter: none !important; pointer-events: auto !important; border-color: var(--ember) !important; box-shadow: 0 8px 32px rgba(232, 69, 10, 0.12) !important; position: relative; transition: all 0.4s ease !important}.role-filter-badge{display: inline-flex; align-items: center; gap: 6px; font-family: 'IBM Plex Mono', monospace; font-size:12px; letter-spacing: 1px; color: var(--ember); background: var(--ember-ghost); border: 1px solid rgba(232, 69, 10, 0.35); padding: 4px 10px; border-radius: 4px; margin-bottom: 12px; text-transform: uppercase; font-weight: 700; animation: badgeGlow 2s infinite alternate ease-in-out}@keyframes badgeGlow{0%{box-shadow: 0 0 0 rgba(232, 69, 10, 0)}100%{box-shadow: 0 0 12px rgba(232, 69, 10, 0.25)}} @media(max-width: 768px){.role-filter-bar{top: 48px; padding: 6px 12px}.role-filter-btn{font-size:12px; padding: 4px 10px}.role-filter-inner{justify-content: center}} .role-dropdown-wrap{position: relative; display: inline-block}.role-dropdown-btn{display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); background: var(--void); color: var(--ink); font-family: 'IBM Plex Sans Arabic', sans-serif; font-size:12px; font-weight: 600; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; user-select: none}.role-dropdown-btn:hover, .role-dropdown-wrap:hover .role-dropdown-btn{border-color: var(--ember); color: var(--ember); background: var(--ember-ghost)}.role-dropdown-menu{position: absolute; top: calc(100% + 8px); right: 0; width: 270px; background: rgba(247, 244, 239, 0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15); border-radius: 8px; padding: 8px; z-index: 10001; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; direction: rtl; text-align: right; pointer-events: none}body.theme-dark .role-dropdown-menu{background: rgba(18, 18, 18, 0.96); border-color: rgba(247, 244, 239, 0.12); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55)}.role-dropdown-wrap:hover .role-dropdown-menu, .role-dropdown-wrap.open .role-dropdown-menu{opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto}.role-dropdown-title{font-family: 'IBM Plex Mono', monospace; font-size:12px; letter-spacing: 1px; color: var(--ink-soft); text-transform: uppercase; padding: 6px 8px 8px; border-bottom: 1px solid var(--border); margin-bottom: 6px}.role-menu-item{display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; border-right: 3px solid transparent}.role-menu-item:hover{background: var(--ember-ghost); border-right-color: var(--ember)}.role-menu-item.active{background: rgba(232, 69, 10, 0.08); border-right-color: var(--ember)}.role-menu-icon{font-size: 16px; flex-shrink: 0; margin-top: 2px}.role-menu-text{display: flex; flex-direction: column; gap: 2px}.role-menu-name{font-family: 'Noto Kufi Arabic', sans-serif; font-size: 12px; font-weight: 700; color: var(--ink)}.role-menu-desc{font-family: 'IBM Plex Sans Arabic', sans-serif; font-size:12px; color: var(--ink-soft); line-height: 1.4}.role-menu-item:hover .role-menu-name, .role-menu-item.active .role-menu-name{color: var(--ember)}.master-hub-wrap{margin-top: 24px; display: flex; flex-direction: column; gap: 24px; direction: rtl}.master-hero-download-card{background: linear-gradient(135deg, var(--dk1) 0%, #1a0802 100%); border: 1px solid rgba(232, 69, 10, 0.3); border-radius: 12px; padding: 36px 32px; position: relative; overflow: hidden; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; gap: 20px}.master-hero-download-card::before{content: ''; position: absolute; top: -50px; left: -50px; width: 250px; height: 250px; background: radial-gradient(circle, rgba(232, 69, 10, 0.25) 0%, transparent 70%); border-radius: 50%; pointer-events: none}.master-hero-top{display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; position: relative; z-index: 1}.master-hero-title-wrap h4{font-family: 'Noto Kufi Arabic', sans-serif; font-size: 22px; font-weight: 700; color: #FFFFFF; margin-bottom: 6px}.master-hero-title-wrap p{font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 13px; color: var(--dkm); line-height: 1.8; max-width: 750px}.master-tags-row{display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px}.master-tag-pill{font-family: 'IBM Plex Mono', monospace; font-size:12px; background: rgba(247, 244, 239, 0.08); border: 1px solid rgba(247, 244, 239, 0.15); color: var(--ember-pale); padding: 4px 10px; border-radius: 4px}.master-main-btn{background: var(--ember); color: #FFFFFF; border: none; border-radius: 6px; padding: 16px 32px; font-family: 'Noto Kufi Arabic', sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 12px; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 8px 24px rgba(232, 69, 10, 0.4); position: relative; overflow: hidden; width: fit-content}.master-main-btn:hover{background: var(--ember-dim); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(232, 69, 10, 0.55)}.master-packages-grid{display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px}.pkg-card{background: var(--void); border: 1px solid var(--border); border-radius: 8px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; transition: all 0.25s ease; position: relative; overflow: hidden}.pkg-card::after{content: ''; position: absolute; top: 0; right: 0; width: 4px; height: 100%; background: var(--ember); opacity: 0; transition: opacity 0.25s}.pkg-card:hover{border-color: var(--ember); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05)}.pkg-card:hover::after{opacity: 1}.pkg-header{display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px}.pkg-icon{font-size: 24px}.pkg-count-tag{font-family: 'IBM Plex Mono', monospace; font-size:12px; background: var(--surf); border: 1px solid var(--border); color: var(--ember); padding: 2px 8px; border-radius: 3px; font-weight: 600}.pkg-title{font-family: 'Noto Kufi Arabic', sans-serif; font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 4px}.pkg-desc{font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 12px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 18px}.pkg-btn{background: var(--surf); color: var(--ink); border: 1px solid var(--border); border-radius: 4px; padding: 8px 16px; font-family: 'IBM Plex Mono', monospace; font-size:12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: all 0.2s ease; direction: ltr}.pkg-btn:hover{background: var(--ember); color: #FFFFFF; border-color: var(--ember)}.master-download-progress{display: none; background: rgba(0, 0, 0, 0.3); border-radius: 6px; padding: 12px 16px; margin-top: 12px; align-items: center; gap: 12px}.master-prog-bar-track{flex: 1; height: 6px; background: rgba(255, 255, 255, 0.1); border-radius: 3px; overflow: hidden}.master-prog-bar-fill{height: 100%; width: 0%; background: var(--ember); border-radius: 3px; transition: width 0.15s ease}.master-prog-text{font-family: 'IBM Plex Mono', monospace; font-size:12px; color: var(--ember-pale); min-width: 45px; text-align: left}.master-tree-section{background: var(--void); border: 1px solid var(--border); border-radius: 8px; padding: 20px 24px; margin-top: 16px}.tree-header{display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; border-bottom: 1px solid var(--border); padding-bottom: 10px}.tree-title{font-family: 'Noto Kufi Arabic', sans-serif; font-size: 13px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px}.tree-view-box{background: var(--dk0); border: 1px solid rgba(247, 244, 239, 0.08); border-radius: 6px; padding: 16px 20px; font-family: 'IBM Plex Mono', monospace; font-size:12px; line-height: 1.8; color: var(--dkm); max-height: 320px; overflow-y: auto; direction: ltr; text-align: left}.tree-folder-name{color: var(--ember); font-weight: 600}.tree-file-name{color: var(--dkt)}.master-10grid{display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 20px}.pkg-10card{background: var(--void); border: 1px solid var(--border); border-radius: 8px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; transition: all 0.25s ease; position: relative}.pkg-10card:hover{border-color: var(--ember); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(232, 69, 10, 0.06)}.pkg-file-list{display: flex; flex-direction: column; gap: 4px; margin: 10px 0 16px; padding-right: 0; list-style: none}.pkg-file-item{font-family: 'IBM Plex Mono', monospace; font-size:12px; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; direction: ltr; text-align: left}.pkg-checkbox-row{display: flex; align-items: center; gap: 8px; margin-bottom: 8px}.pkg-checkbox{accent-color: var(--ember); width: 16px; height: 16px; cursor: pointer}.custom-builder-bar{background: var(--warm); border: 1px dashed var(--border2); border-radius: 8px; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 20px}.browser{border:1px solid var(--border);border-radius:4px;overflow:hidden;background:var(--void)} .browser-chrome{background:var(--warm);padding:11px 18px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border)} .motion-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px} .motion-cell{background:var(--dk2);border:1px solid rgba(247,244,239,.1);padding:44px 28px;text-align:center;direction:rtl;display:flex;flex-direction:column;align-items:center;gap:20px} .rules-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px} .voice-table{width:100%;border-collapse:collapse;direction:rtl} .voice-table th{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;text-transform:uppercase;padding:18px 24px;text-align:right;border-bottom:1px solid var(--border);color:var(--ink-soft)} .voice-table td{padding:22px 24px;border-bottom:1px solid var(--border);vertical-align:top} .voice-table td:first-child{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);width:20%} .voice-table td:nth-child(2){font-family:'IBM Plex Sans Arabic',sans-serif;font-size:14px;color:var(--ink);line-height:1.7} .voice-table td:last-child{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:14px;color:rgba(20,20,20,.35);line-height:1.7;text-decoration:line-through;text-decoration-color:rgba(232,69,10,.25)} .voice-table tr:hover td{background:var(--surf)} .cover-page{min-height:100vh;background:var(--ink);display:grid;grid-template-rows:1fr auto;padding:80px;position:relative;overflow:hidden} #logo.show-safe-zone .logo-cell .safe-zone-overlay{opacity: 1}@keyframes ru{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}} @keyframes fi{from{opacity:0}to{opacity:1}} @keyframes sdrop{0%{transform:scaleY(0) translateY(0);opacity:1}50%{transform:scaleY(1) translateY(0);opacity:1}100%{transform:scaleY(1) translateY(100%);opacity:0}} @keyframes wvPulse{0%,100%{transform:translateY(0) scaleX(1)}50%{transform:translateY(-6px) scaleX(1.02)}} @keyframes emberFloat{0%{opacity:0;transform:translateY(20px) scale(0)}20%{opacity:.8;transform:translateY(0) scale(1)}80%{opacity:.6;transform:translateY(-30px) scale(.8)}100%{opacity:0;transform:translateY(-50px) scale(0)}} @keyframes hexDissolve{0%,100%{stroke-dashoffset:0;opacity:.12}50%{stroke-dashoffset:40;opacity:.06}} @keyframes flameFlicker{0%,100%{opacity:.5;stroke-dashoffset:0}30%{opacity:.2}60%{opacity:.6}80%{opacity:.15}} @keyframes coreDim{0%,100%{opacity:.3;r:4}50%{opacity:.15;r:3}} @keyframes sparkRise{0%{opacity:0;transform:translateY(0) scale(0)}15%{opacity:.9;transform:translateY(-5px) scale(1)}100%{opacity:0;transform:translateY(-40px) scale(.3)}} @keyframes errGlow{0%{opacity:.3;transform:translate(-50%,-50%) scale(.8)}100%{opacity:.6;transform:translate(-50%,-50%) scale(1.2)}} @keyframes slideRightLoop{0%,100%{opacity:0;transform:translateX(-16px)}50%{opacity:1;transform:translateX(0)}} @keyframes parallaxDemo{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} @keyframes magnetDemo{0%,100%{transform:translate(0,0)}25%{transform:translate(4px,-3px)}75%{transform:translate(-4px,3px)}} @keyframes splashForm{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}} @keyframes spDrift{0%{opacity:0;transform:translateY(10px) scale(0)}10%{opacity:.5;transform:translateY(0) scale(1)}70%{opacity:.3;transform:translateY(-20px) scale(.6)}100%{opacity:0;transform:translateY(-35px) scale(0)}} @keyframes orbitSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}} @keyframes hexAssemble{0%{transform:scale(.85) rotate(-5deg);opacity:.6}30%{transform:scale(1.02) rotate(1deg);opacity:1}60%{transform:scale(.98) rotate(-0.5deg);opacity:.9}100%{transform:scale(1) rotate(0);opacity:1}} @keyframes ringFill{0%{stroke-dashoffset:565}70%{stroke-dashoffset:140}100%{stroke-dashoffset:0}} @keyframes emberTrail{0%,20%{opacity:0;height:0}40%{opacity:.6;height:20px}70%{opacity:.3;height:30px}90%,100%{opacity:0;height:10px}} @keyframes textReveal{0%,15%{opacity:0;transform:translateY(8px)}30%{opacity:1;transform:translateY(0)}80%{opacity:1}100%{opacity:0;transform:translateY(-4px)}} @keyframes statusFill{0%{width:0}70%{width:85%}90%{width:95%}100%{width:100%}} @keyframes splashFlameDraw{0%{stroke-dashoffset:300;opacity:0}30%{stroke-dashoffset:0;opacity:1}70%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.4}} @keyframes splashCoreGlow{0%{opacity:0;r:0}30%{opacity:0;r:0}50%{opacity:.8}70%{opacity:1;r:8}90%{opacity:.6}100%{opacity:0;r:12}} @keyframes waveDrawLeft{from{stroke-dashoffset:400}to{stroke-dashoffset:0}} @keyframes dotPulse{0%,100%{r:3}50%{r:5}} @keyframes arrowRise{0%,100%{transform:translateY(4px);opacity:.6}50%{transform:translateY(-4px);opacity:1}} @keyframes textFade{0%,100%{opacity:.5}50%{opacity:1}} @keyframes fadeIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}} @keyframes expandLine{from{width:0}to{width:40px}} @keyframes rvUp{to{opacity:1;transform:translateY(0)}} @keyframes ambientPulse{0%,100%{opacity:.6;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}} @keyframes boxFloat{0%,100%{transform:rotateX(-12deg) rotateY(-22deg) translateY(0)}50%{transform:rotateX(-10deg) rotateY(-20deg) translateY(-12px)}} @keyframes innerGlow{0%,100%{opacity:.5;height:30px}50%{opacity:1;height:40px}} @keyframes shadowPulse{0%,100%{width:220px;opacity:.8}50%{width:240px;opacity:1}} @keyframes emberRise{0%{opacity:0;transform:translateY(0) translateX(0) scale(1)}15%{opacity:.9}85%{opacity:.3}100%{opacity:0;transform:translateY(-200px) translateX(var(--drift)) scale(.3)}} @keyframes specDotPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}} @keyframes iconPulse{0%,100%{opacity:0;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}} @keyframes d81-pulse{ 0%{transform:translate(-50%,-50%) scale(.5);opacity:1} 100%{transform:translate(-50%,-50%) scale(2);opacity:0}}@keyframes d83-badge-pop{ 0%{transform:scale(0)} 60%{transform:scale(1.3)} 100%{transform:scale(1)}}@keyframes d83-ripple-anim{ to{transform:scale(4);opacity:0}}@keyframes d84-fade{ 0%{opacity:0} 40%,100%{opacity:1}}@keyframes d84-slide{ 0%{opacity:0;transform:translateX(40px)} 40%,100%{opacity:1;transform:translateX(0)}}@keyframes d84-scale{ 0%{opacity:0;transform:scale(0.5)} 40%,100%{opacity:1;transform:scale(1)}}@keyframes d84-dissolve{ 0%{opacity:0;filter:blur(8px)} 40%,100%{opacity:1;filter:blur(0px)}}@keyframes d85-shimmer{ 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)}}@keyframes mxspin{to{transform:rotate(360deg)}} @keyframes sectionGlow{0%, 100%{box-shadow: 0 0 0 0 transparent; border-color: transparent}50%{box-shadow: 0 0 30px rgba(232, 69, 10, 0.25); border-color: var(--ember)}} @keyframes skeletonPulse{0%{background-position: 100% 50%}100%{background-position: 0% 50%}} @keyframes splashPulse{0%, 100%{transform: scale(1); filter: drop-shadow(0 0 10px rgba(232, 69, 10, 0.2))}50%{transform: scale(1.05); filter: drop-shadow(0 0 25px rgba(232, 69, 10, 0.55))}} @keyframes slideInPresentation{from{opacity: 0; transform: translateY(30px)}to{opacity: 1; transform: translateY(0)}} @keyframes fadeIn{from{opacity: 0; transform: translateY(8px)}to{opacity: 1; transform: translateY(0)}} @media(max-width:1024px){ .sec{padding:60px 40px!important;max-width:100vw;overflow:hidden} .hero{padding:80px 40px 80px!important} .hero h2,.hwar{font-size:clamp(56px,8vw,100px)!important} .cover-page{padding:60px 40px!important} footer{padding:60px 40px!important;flex-direction:column;align-items:center;gap:40px;text-align:center} .fl-big{font-size:40px!important} .fr{direction:rtl!important;text-align:center!important} .sec *,.sec *::before,.sec *::after,.cover-page *,.cover-page *::before,.cover-page *::after, footer *,footer *::before,footer *::after,.hero *,.hero *::before,.hero *::after{ max-width:100%;overflow-wrap:break-word;word-break:break-word}.pattern-demo{grid-template-columns:repeat(2,1fr)} .icon-grid{grid-template-columns:repeat(3,1fr)} .chart-demo{grid-template-columns:repeat(2,1fr)} .photo-grid{grid-template-columns:repeat(2,1fr)} .empty-grid{grid-template-columns:repeat(2,1fr)} .toggle-demo{grid-template-columns:1fr} .audit-grid{grid-template-columns:1fr} .gov-grid{grid-template-columns:repeat(2,1fr)} .cobrand-grid{grid-template-columns:repeat(2,1fr)} .color-grid{grid-template-columns:1fr 1fr!important} .color-grid-2{grid-template-columns:repeat(2,1fr)} .logo-grid{grid-template-columns:repeat(2,1fr)} .dont-grid{grid-template-columns:repeat(2,1fr)} .anatomy-grid{grid-template-columns:1fr} .site-cards{grid-template-columns:repeat(2,1fr)} .motion-grid{grid-template-columns:repeat(2,1fr)} .rules-grid{grid-template-columns:repeat(2,1fr)} .social-grid{grid-template-columns:repeat(2,1fr)} .form-demo{grid-template-columns:1fr} .ob-panels{grid-template-columns:repeat(2,1fr)} .typo-grid{grid-template-columns:repeat(2,1fr)} .tone-grid{grid-template-columns:repeat(2,1fr)} .micro-grid{grid-template-columns:repeat(2,1fr)} .texture-grid{grid-template-columns:repeat(2,1fr)} .pattern-tile-grid{grid-template-columns:repeat(2,1fr)} .gradient-grid{grid-template-columns:repeat(2,1fr)} .shadow-grid{grid-template-columns:repeat(3,1fr)} .radius-grid{grid-template-columns:repeat(4,1fr)} .grid-demo{grid-template-columns:repeat(4,1fr)} .grid-example{grid-template-columns:repeat(6,1fr)} .dash-body{grid-template-columns:1fr!important} .dash-sidebar{display:none} .dm-stats{grid-template-columns:repeat(2,1fr)} .dm-grid{grid-template-columns:1fr} .dmt-head,.dmt-row{grid-template-columns:1fr!important} .dmt-head .dmt-hcell:nth-child(2),.dmt-head .dmt-hcell:nth-child(3), .dmt-row .dmt-val,.dmt-row .dmt-status{display:none} .story-item{grid-template-columns:80px 1fr;gap:20px} .type-row{grid-template-columns:1fr!important} .toast-demo{max-width:100%} .comp-map-wrap{height:280px} .appstore-wrap{grid-template-columns:1fr} .app-icon-lg{width:80px;height:80px} .positioning-grid{grid-template-columns:1fr} .dark-preview{grid-template-columns:1fr} .kpi-grid{grid-template-columns:repeat(2,1fr)} .dm-compare{grid-template-columns:1fr} .bidi-mini-cards{grid-template-columns:1fr} .info-mini-grid{grid-template-columns:1fr 1fr} .sp-bar{max-width:100%!important} .a11y-table{min-width:unset!important;overflow-x:auto} .dd-demo{flex-direction:row;gap:20px} .sn-links{flex-wrap:wrap;gap:16px} .phone-wrap,.splash-phone{max-width:100%} .card-3d-wrap{max-width:100%} .badge-card,.badge-lanyard,.badge-back{max-width:100%} .bp-screen{max-width:100%!important;overflow-x:auto} .gex-content{grid-template-columns:1fr} nav{padding:16px 24px!important} nav.sc{padding:12px 24px!important} .nl{display:flex!important;position:fixed;top:0;right:-300px;width:280px;height:100vh;background:var(--void);flex-direction:column;padding:100px 32px 32px;gap:0;box-shadow:-4px 0 20px rgba(0,0,0,.1);transition:right .4s cubic-bezier(.16,1,.3,1);z-index:150;border-left:1px solid var(--border);overflow-y:auto} .nl.open{right:0} .nl li{border-bottom:1px solid var(--border)} .nl a{display:block;padding:16px 0;font-size:13px!important;letter-spacing:1px!important} .nav-hamburger{display:flex} .ncta{display:none} .nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:140} .nav-overlay.show{display:block}}@media(max-width:768px){ .sec{padding:48px 24px!important;max-width:100vw;overflow:hidden} .hero{padding:60px 24px 60px!important} .hero h2,.hwar{font-size:clamp(40px,7vw,72px)!important} .cover-page{padding:40px 24px!important} footer{padding:48px 24px!important} .fl-big{font-size:32px!important} .sec,.cover-page,footer,.sd,.sd0,.sd2,.sw2,.sp,.sl,.section,.d63-section{ max-width:100vw;overflow-x:hidden;overflow-y:visible}.sec *,.sec *::before,.sec *::after{overflow-wrap:break-word} .fr-label,.es-title,.es-desc,.fg-label,.fg-input,.fg-select,.fg-textarea,.submit-btn,.si-title,.si-desc,.dt-table td,.mx-table td,.cl-item,.kb-action-name,.dd-item,.dd-trigger,.panel-title,.panel-desc,.tab-btn,.stat-label,.kpi-label,.dm-mini-title,.dm-mini-text,.inv-item,.prop-sec-text,.prop-sec-title,.ms-title,.slide-bullets li,.slide-title-ar{word-break:keep-all!important} .a11y-table,.dt-table,.prop-tbl,.bg-table,.inv-table,.inv-row, table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;font-size:12px!important} .a11y-table thead,.a11y-table tbody,.dt-table thead,.dt-table tbody{display:table;width:100%} .inv-row{display:table!important;width:100%} .mx-table{display:table!important;table-layout:auto!important} [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important} [style*="grid-template-columns:auto 1fr"]{grid-template-columns:1fr!important;gap:16px!important} [style*="grid-template-columns:120px 1fr"]{grid-template-columns:1fr!important;gap:8px!important} code,pre,.spec-val,.sht,.shn,.dmt-hcell,.dmt-val,.dmt-status, .pr-desc,.ic-name,.swag-name,.nl a,.ncta,.cm-name,.badge-schedule li, .pr-body,.app-dev,.app-rcount,.app-stars,.color-swatch-label,.d63-spec-value, .d63-spec-label-text,.d63-color-swatch-label,.d63-item-text-sub{ white-space:normal!important;word-break:break-word;overflow-wrap:break-word}.phone-wrap,.splash-phone,.splash-screen,.card-3d-wrap,.badge-card,.badge-lanyard,.badge-back, .app-icon-lg,.comp-map-wrap{max-width:100%!important} .pitch-card{padding:40px 24px!important} .pitch-text-ar{font-size:clamp(16px,5vw,24px)!important} .pattern-demo{grid-template-columns:1fr} .icon-grid{grid-template-columns:repeat(2,1fr)} .chart-demo{grid-template-columns:1fr} .photo-grid{grid-template-columns:repeat(2,1fr)} .empty-grid{grid-template-columns:1fr} .gov-grid{grid-template-columns:1fr} .cobrand-grid{grid-template-columns:1fr} .color-grid{grid-template-columns:1fr!important} .color-grid-2{grid-template-columns:1fr} .logo-grid{grid-template-columns:1fr} .dont-grid{grid-template-columns:1fr} .mx-table th{padding:10px 12px;font-size:12px} .mx-table td{padding:8px 12px;font-size:12px} .mx-badge{padding:3px 8px;font-size:12px} .mx-comp{font-size:12px;gap:4px} .app-tab{padding:10px 16px;font-size:12px;letter-spacing:1px} .site-cards{grid-template-columns:1fr} .site-wrap{padding:28px 20px!important} .site-nav{margin-bottom:40px!important;flex-wrap:wrap;gap:12px} .sn-links{gap:12px;font-size:12px} .sn-cta{padding:6px 12px;font-size:12px} .site-hero{margin-bottom:36px!important} .sh-h1{font-size:28px!important;margin-bottom:12px!important} .sh-tag{font-size:12px;margin-bottom:12px!important} .sh-p{font-size:12px;max-width:100%} .sc{padding:16px 14px} .sc-title{font-size:13px} .sc-body{font-size:12px} .sc-num{font-size:12px;margin-bottom:10px} .browser-chrome{padding:8px 12px;gap:6px} .bc-url{font-size:12px;padding:4px 8px} .phone-wrap{width:220px!important} .phone-screen{min-height:380px;padding:16px 14px} .card-3d-wrap{max-width:260px;margin:0 auto} .invoice{max-width:100%;padding:20px 16px} .inv-header{flex-wrap:wrap;gap:12px} .inv-body{padding:16px} .inv-row{padding:10px 12px;font-size:12px} .motion-grid{grid-template-columns:1fr} .rules-grid{grid-template-columns:1fr} .social-grid{grid-template-columns:repeat(2,1fr)} .ob-panels{grid-template-columns:1fr} .ob-panel::after{display:none} .typo-grid{grid-template-columns:1fr} .tone-grid{grid-template-columns:repeat(2,1fr)} .micro-grid{grid-template-columns:1fr} .texture-grid{grid-template-columns:1fr} .pattern-tile-grid{grid-template-columns:1fr} .gradient-grid{grid-template-columns:1fr} .shadow-grid{grid-template-columns:repeat(2,1fr)} .radius-grid{grid-template-columns:repeat(3,1fr)} .grid-demo{grid-template-columns:repeat(2,1fr)} .grid-example{grid-template-columns:repeat(4,1fr)} .dm-stats{grid-template-columns:1fr} .story-item{grid-template-columns:60px 1fr;gap:16px} .si-year{font-size:24px!important} .prop-wrap{max-width:100%} .prop-cover{padding:32px 24px} .prop-body{padding:24px} .prop-footer{padding:16px 24px;flex-direction:column;gap:12px} .prop-cover-title{font-size:26px!important} .kpi-grid{grid-template-columns:1fr} .info-mini-grid{grid-template-columns:1fr} .week-headers,.cal-grid{grid-template-columns:repeat(3,1fr)!important} .d85-dash-skel{grid-template-columns:1fr!important} .tab-panel .panel-stats{grid-template-columns:1fr!important} .nl{width:260px;right:-260px} #cd,#cr{display:none!important} .story-timeline{display:none} .story-inner{padding-right:0!important} .ms-nodes{flex-wrap:wrap;gap:16px;justify-content:center} .ms-node{min-width:70px} .ms-name{font-size:12px;max-width:80px} .milestone-wrap{padding:24px} .ms-header{margin-bottom:24px} .ms-title{font-size:16px} .slide{padding:28px 24px;overflow:hidden} .slide-title-ar{font-size:20px!important} .slide-bullets li{font-size:12px!important} .slide-logo{width:20px;height:20px;top:16px;right:20px} .slide-num{bottom:12px;left:16px;font-size:12px} .kb-sheet-header{flex-direction:column;gap:12px;align-items:flex-start;padding:16px 20px} .kb-modifiers{flex-wrap:wrap;gap:4px} .kb-key{min-width:28px;height:28px;font-size:12px;padding:0 6px} .kb-row{padding:10px 20px} .kb-action-name{font-size:12px} .tabs-showcase{max-width:100%} .tab-btn{padding:12px 8px;font-size:12px} .tab-panel{padding:20px 16px} .dd-demo{flex-direction:row;gap:32px} .dd-panel{min-width:200px} .dt-topbar{flex-direction:column;gap:8px;align-items:stretch;padding:12px 16px} .dt-search{min-width:0;width:100%} .dt-table th,.dt-table td{padding:10px 12px;font-size:12px;white-space:nowrap} .dt-badge{font-size:12px;padding:2px 6px} .dt-footer{flex-direction:column;gap:8px;padding:10px 16px;align-items:center} .kpi-card{padding:20px 16px;gap:12px} .kpi-value{font-size:28px} .kpi-top{flex-wrap:wrap;gap:8px} .dm-compare{grid-template-columns:1fr} .dm-side{padding:24px 20px} .dm-divider-v{display:none} .dm-mini-card{padding:16px} .mx-table{table-layout:fixed} .cl-timeline{padding-right:24px} .cl-entry{margin-bottom:28px} .cl-ver-num{font-size:20px} .cl-ver-title{font-size:14px} .cl-item{font-size:12px;flex-wrap:wrap;gap:6px} .cl-tag{font-size:12px;padding:1px 6px}}@media(max-width : 390px ){ .sec{padding:36px 16px!important;max-width:100vw;overflow:hidden} .hero{padding:48px 16px 48px!important;min-height:auto} .hero h2,.hwar{font-size:clamp(32px,6vw,56px)!important} .htag{font-size:13px!important;max-width:100%} .cover-page{padding:32px 16px!important} .cp-bg-text{font-size:80px!important;bottom:-40px!important;left:-10px!important} .cp-badge{font-size:12px!important;padding:6px 10px!important;white-space:normal!important} .cp-presented{font-size:12px!important;white-space:normal!important;max-width:100%} .cp-year{font-size:32px!important} .cp-bottom{flex-direction:column;gap:16px;align-items:center} .cp-meta{font-size:12px!important;text-align:center!important;white-space:normal!important} footer{padding:36px 16px!important} .fl-big{font-size:28px!important} .fl-en{font-size:12px!important;letter-spacing:3px!important} .fg-ghost{font-size:60px!important;left:-10px!important;bottom:-30px!important} .footer-ghost{font-size:60px!important;left:-10px!important;bottom:-30px!important} .photo-grid{grid-template-columns:1fr} .icon-grid{grid-template-columns:repeat(2,1fr);gap:8px} .icon-cell{padding:16px 12px} .social-grid{grid-template-columns:1fr} .tone-grid{grid-template-columns:1fr} .shadow-grid{grid-template-columns:repeat(2,1fr)} .radius-grid{grid-template-columns:repeat(3,1fr)} .grid-demo{grid-template-columns:repeat(2,1fr)} .grid-example{grid-template-columns:repeat(2,1fr)} .prop-cover-title{font-size:22px!important} .prop-cover{padding:24px 20px;min-height:200px} .prop-body{padding:20px} .prop-tbl thead th,.prop-tbl tbody td{padding:10px 12px!important;font-size:12px!important} .err-code{font-size:80px!important;right:16px!important} .err-title{font-size:22px!important} .toast{padding:12px 14px} .toast-title{font-size:12px!important} .toast-msg{font-size:12px!important} .d63-box-scene{width:240px;height:260px} .d63-box-wrapper{transform:rotateX(-8deg) rotateY(-16deg) translateY(0)} .week-headers,.cal-grid{grid-template-columns:repeat(2,1fr)!important} .nl{width:240px;right:-240px;padding:80px 24px 24px} .dm-title{font-size:16px!important} .sh{flex-wrap:wrap;gap:12px;margin-bottom:32px!important} .section{padding:48px 16px!important} .pitch-card{padding:32px 16px!important} .mx-table th{padding:8px 10px;font-size:12px} .mx-table td{padding:6px 10px;font-size:12px} .mx-badge{padding:2px 6px;font-size:12px} .mx-comp{font-size:12px} .app-tab{padding:8px 12px;font-size:12px;letter-spacing:.5px} .app-tabs{margin-bottom:32px} .site-wrap{padding:20px 14px!important} .site-nav{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:24px!important} .sn-links{display:none} .sh-h1{font-size:22px!important} .sh-p{font-size:12px} .phone-wrap{width:200px!important} .phone-screen{min-height:320px;padding:14px 10px} .invoice{padding:16px 12px} .inv-body{padding:12px} .inv-row{padding:8px 10px;font-size:12px} .social-card{padding:16px 12px} .err-page{min-height:400px!important} .ty-card{padding:40px 24px!important} .ty-title{font-size:32px!important} .nl-wrap{padding:16px 20px!important} .nl-body{padding:24px 20px!important} .nl-h1{font-size:18px!important} .appstore-wrap{flex-direction:column!important;align-items:center!important;text-align:center!important} .app-name{font-size:18px!important} .seo-card{max-width:100%!important} .swag-grid{grid-template-columns:repeat(2,1fr)!important;gap:12px!important} .qr-grid{grid-template-columns:1fr!important} .wm-grid{grid-template-columns:1fr!important} .modal-grid{grid-template-columns:1fr!important} .audit-grid{grid-template-columns:1fr!important} .toggle-demo{grid-template-columns:1fr!important} .comp-map-wrap{height:240px!important;overflow-x:auto!important} [style*="grid-template-columns"]{grid-template-columns:1fr!important;gap:12px!important} [style*="width:560px"],[style*="width:420px"],[style*="width:340px"],[style*="width:260px"], [style*="width:200px"],[style*="width:140px"],[style*="width:96px"],[style*="width:56px"], [style*="width:32px"],[style*="width:16px"],[style*="width:4px"]{max-width:100%!important} .story-item{grid-template-columns:1fr!important;gap:8px;padding:24px 0} .si-year{font-size:20px!important;text-align:right!important} .ms-nodes{gap:12px} .ms-node{min-width:60px} .ms-name{font-size:12px;max-width:64px} .milestone-wrap{padding:16px} .ms-title{font-size:14px} .slide{padding:20px 16px} .slide-title-ar{font-size:16px!important} .slide-subtitle{font-size:12px!important;margin-bottom:16px!important} .slide-bullets{gap:8px} .slide-bullets li{font-size:12px!important;gap:8px} .kb-sheet-header{padding:12px 16px} .kb-key{min-width:24px;height:24px;font-size:12px;padding:0 4px} .kb-key.mod{display:none} .kb-row{padding:8px 16px;gap:8px} .kb-action-name{font-size:12px} .kb-row .kb-action .kb-icon{width:24px;height:24px} .tab-btn{padding:10px 6px;font-size:12px} .tab-panel{padding:16px 12px} .stat-box{padding:12px 8px} .stat-box .stat-num{font-size:18px} .stat-box .stat-label{font-size:12px} .dd-demo{gap:24px} .dd-trigger{padding:10px 16px;font-size:12px} .dd-panel{min-width:180px} .dd-item{padding:8px 14px;font-size:12px} .dt-table th,.dt-table td{padding:8px 10px;font-size:12px} .dt-badge{font-size:12px;padding:2px 4px} .dt-info{font-size:12px} .kpi-card{padding:16px 12px;gap:8px} .kpi-value{font-size:24px} .kpi-label{font-size:12px} .kpi-icon{width:28px;height:28px} .dm-side{padding:16px 14px;gap:16px} .dm-mini-card{padding:12px} .dm-mini-title{font-size:12px} .dm-mini-text{font-size:12px} .mx-comp{font-size:12px;flex-wrap:wrap} .cl-timeline{padding-right:20px} .cl-ver-num{font-size:18px} .cl-ver-title{font-size:13px} .cl-item{font-size:12px}}@media(max-width:900px){.d63-section{padding:60px 24px 80px}.d63-showcase{flex-direction:column;align-items:center;gap:48px}.d63-info-column{max-width:100%;min-width:unset}.d63-box-scene{width:280px;height:300px}} @media(max-width:500px){.d63-section{padding:40px 16px 60px}.d63-specs-panel{padding:20px;border-radius:16px}.d63-item-icon-container{width:44px;height:44px;border-radius:12px}.d63-item-icon-container svg{width:20px;height:20px}.d63-contents-item::before{right:17px;width:8px;height:8px}.d63-contents-list::before{right:19px}} @media(max-width:800px){.swag-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:700px){.qr-grid{grid-template-columns:1fr;max-width:280px}} @media(max-width:700px){.wm-grid{grid-template-columns:1fr;max-width:300px}} @media(max-width:700px){.modal-grid{grid-template-columns:1fr;max-width:340px}} @media (max-width: 400px){.kpi-grid{gap: 2px}.kpi-card{padding: 12px 6px; gap: 8px}.kpi-icon{width: 20px; height: 20px; border-radius: 4px}.kpi-icon svg{width: 12px; height: 12px}.kpi-trend{font-size:12px}.kpi-value{font-size: 16px}.kpi-label{font-size:12px}.kpi-sparkline{height: 20px; margin-top: 2px}.kpi-sparkline .sp-bar{width: 3px}} @media(max-width:768px){ .d82-grid{grid-template-columns:1fr}}@media(max-width:768px){.d83-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width : 390px ){.d83-grid{grid-template-columns:1fr}} @media(max-width:768px){.d84-grid{grid-template-columns:1fr}} @media(max-width:768px){.d85-grid{grid-template-columns:1fr}} @media(max-width:900px){.d86-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:500px){.d86-grid{grid-template-columns:1fr}} @media(max-width:768px){.d89-grid{grid-template-columns:1fr}} @media(max-width:768px){ .q-row{grid-template-columns:1fr} .rpt-stats{grid-template-columns:1fr} .mn-body{grid-template-columns:1fr} .tm-grid{grid-template-columns:1fr 1fr} .tt-grid{grid-template-columns:1fr} .ck-grid{grid-template-columns:1fr} .nc-cats{grid-template-columns:1fr 1fr}}@media(max-width:768px){ .download-grid{grid-template-columns: 1fr}} @media(max-width:768px){ #sidebarDrawer{width: 100vw; right: -100vw}.nav-controls{margin-left: 10px; gap: 8px}.theme-toggle-btn, .sidebar-toggle-btn{width: 32px; height: 32px}.theme-toggle-btn svg, .sidebar-toggle-btn svg{width: 14px; height: 14px}.ncta#brandGuideBtn{font-size:12px!important; padding: 6px 12px!important; letter-spacing: 0.5px!important}.mobile-only-link{display: block}} @media(max-width:480px){ .ncta#brandGuideBtn{display: none!important}} @media (max-width: 768px){.mobile-bottom-nav{display: flex}body{padding-bottom: 64px}} @media (max-width: 768px){.back-to-top-btn{bottom: 85px; left: 20px; width: 40px; height: 40px}} @media (pointer: coarse){#cd, #cr{display: none !important}} @media (max-width: 900px){.guide-card-grid{grid-template-columns: repeat(2, 1fr)}} @media (max-width: 600px){.guide-card-grid{grid-template-columns: 1fr}} @media (max-width: 600px){.wizard-container{padding: 16px}} @media (max-width: 900px){.color-tools-grid{grid-template-columns: 1fr}} @media (max-width: 600px){.palette-gen-output{grid-template-columns: 1fr}} @media (max-width: 600px){.dt-table, .prop-tbl, .inv-table{display: block !important; width: 100% !important}.dt-table thead, .prop-tbl thead, .inv-table thead{display: none !important}.dt-table tbody, .prop-tbl tbody, .inv-table tbody{display: block !important; width: 100% !important}.dt-table tr, .prop-tbl tr, .inv-table tr{display: block !important; border: 1px solid var(--border) !important; margin-bottom: 16px !important; padding: 16px !important; background: var(--surf) !important; border-radius: var(--base-radius) !important; width: 100% !important}.dt-table td, .prop-tbl td, .inv-table td{display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 10px 0 !important; border-bottom: 1px dashed var(--border) !important; text-align: right !important; font-size:12px !important; width: 100% !important; background: transparent !important}.dt-table td:last-child, .prop-tbl td:last-child, .inv-table td:last-child{border-bottom: none !important}.dt-table td::before, .prop-tbl td::before, .inv-table td::before{content: attr(data-label) !important; font-weight: 700 !important; color: var(--ink-soft) !important; font-family: 'IBM Plex Sans Arabic', sans-serif !important; margin-left: 10px !important; text-align: left !important}} @media(max-width: 900px){.sonic-container{grid-template-columns: 1fr}.icon-geo-wrap{grid-template-columns: 1fr}} @media(max-width: 600px){.sonic-triggers-grid{grid-template-columns: 1fr}.typo-playground-wrap{padding: 18px}.typo-css-output-bar{flex-direction: column; gap: 10px; align-items: flex-start; overflow-x: auto}} @media(min-width:1025px) and (max-width:1700px){ .nen,.nsep{display:none} nav,nav.sc{padding-left:24px;padding-right:24px} .nl{gap:18px;margin:0 20px}}.hwen{margin-top:28px} @media(max-width:768px){ .nen,.nsep,#presentationToggle,#sidebarToggle,#brandGuideBtn{display:none!important} nav,nav.sc{padding-left:12px!important;padding-right:12px!important} .nav-controls{margin-left:0;gap:6px} .lang-toggle-btn,.role-dropdown-btn{width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center} .lang-toggle-btn span,#roleCurrentLabel,.role-dropdown-btn svg:last-child{display:none} .lang-toggle-btn::before{content:'🌐';font-size:14px}}.role-dropdown-wrap.open .role-dropdown-menu{opacity:1;visibility:visible;transform:none;pointer-events:auto} @media(max-width:768px){ .role-dropdown-menu{position:fixed;top:64px;left:12px;right:12px;width:auto}}.page[hidden]{display:none} html.booting .page > section{content-visibility:auto;contain-intrinsic-size:auto 900px} .page-tabs{position:fixed;top:var(--nav-bottom,72px);left:0;right:0;z-index:95;display:flex;gap:4px;padding:6px 24px;overflow-x:auto;scrollbar-width:none;background:var(--void);border-bottom:1px solid var(--border);transition:top .3s} .page-tabs::-webkit-scrollbar{display:none} body.theme-dark .page-tabs{background:#0E0E0E} .page-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;font-family:'IBM Plex Sans Arabic',sans-serif;font-size:12px;font-weight:600;color:var(--ink);text-decoration:none;border-radius:4px;transition:background .2s,color .2s} .page-tab:hover{background:var(--ember-ghost);color:var(--ember-dim)} .page-tab[aria-current="page"]{background:var(--ember-dim);color:#fff} .page-tab-count{min-width:18px;padding:0 5px;border-radius:9px;background:var(--ember-pale);color:#7A2404;font-size:12px;line-height:16px;text-align:center} .page-tab-count[hidden]{display:none} .page-tab-empty{opacity:.45} .page-pager{display:flex;justify-content:space-between;gap:16px;padding:48px 60px;background:var(--void);border-top:1px solid var(--border)} .page-pager a{display:flex;flex-direction:column;gap:4px;padding:14px 22px;min-width:180px;border:1px solid var(--border2);color:var(--ink);text-decoration:none;font-family:'IBM Plex Sans Arabic',sans-serif;font-size:15px;font-weight:600} .page-pager a:hover{border-color:var(--ember);color:var(--ember-dim)} .page-pager small{font-size:12px;font-weight:400;color:var(--ink-soft)} body.presentation-active .page-tabs,body.presentation-active .page-pager{display:none} #page-home .cover-page{padding-top:150px} @media(max-width:768px){ .page-tabs{padding:6px 12px} .page-pager{padding:28px 16px} .page-pager a{min-width:0;flex:1} #page-home .cover-page{padding-top:130px!important}}html[lang="en"] body *{direction:ltr!important} html[lang="en"] [style*="text-align:right"],html[lang="en"] [style*="text-align: right"]{text-align:left!important} html[lang="en"] body{font-family:'IBM Plex Sans Arabic',sans-serif} .skip-link{position:fixed;top:-60px;left:16px;z-index:100000;padding:10px 16px;background:var(--ink);color:#fff;font-family:'IBM Plex Sans Arabic',sans-serif;font-size:13px;text-decoration:none} .skip-link:focus{top:8px} :focus-visible{outline:2px solid var(--ember-dim);outline-offset:2px} .hsub,.hsl{color:rgba(20,20,20,.62)} body.theme-dark .hsub,body.theme-dark .hsl{color:rgba(247,244,239,.65)} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.print-guide .page-tabs,.print-guide #splashScreen,.print-guide nav#mainNav,.print-guide .grain-overlay,.print-guide .tex,.print-guide #cd,.print-guide #cr,.print-guide #prog,.print-guide .mobile-bottom-nav{display:none!important} .print-guide *,.print-guide *::before,.print-guide *::after{animation:none!important;transition:none!important} .guide-toc{padding:48px;background:#fff;color:#141414;break-after:page} .guide-toc h2{font-family:'Noto Kufi Arabic',sans-serif;font-size:30px;margin-bottom:20px;color:#B33508} .guide-toc ol{list-style:none;padding:0} .guide-toc li{padding:9px 0;border-bottom:1px solid #ddd;break-inside:avoid} .guide-toc a{font-family:'Noto Kufi Arabic',sans-serif;font-size:15px;font-weight:700;color:#141414;text-decoration:none} .guide-toc b{color:#B33508;margin-inline-end:8px} .guide-toc p{margin-top:3px;font-family:'IBM Plex Sans Arabic',sans-serif;font-size:12px;line-height:1.55;color:#555} .guide-chapter{padding:32px 48px;font-family:'Noto Kufi Arabic',sans-serif;font-size:28px;color:#fff;background:#141414;border-bottom:4px solid #E8450A} @media print{ @page{size:A4;margin:12mm 8mm 16mm} .page[hidden]{display:block!important} .page{break-before:page} #page-home{break-before:auto} .page-tabs,.page-pager,.skip-link{display:none!important} .rv,.ru,.reveal,.reveal-up,[class*="reveal"]{opacity:1!important;transform:none!important} .cover-page{min-height:262mm;break-after:page}}body:not([data-page="home"]):not(.print-guide) nav#mainNav{background:var(--void)} body.theme-dark:not([data-page="home"]) nav#mainNav{background:#0A0A0A} body:not(.print-guide) .page:not(#page-home){padding-top:calc(var(--nav-bottom,72px) + 46px)} [data-roles]{scroll-margin-top:calc(var(--nav-bottom,72px) + 54px)} .print-guide .sec,.print-guide .section,.print-guide .sd,.print-guide .sd0,.print-guide .sl,.print-guide .sp,.print-guide .sw2,.print-guide .d63-section{padding-left:32px!important;padding-right:32px!important} html.cg-measuring *,html.cg-measuring *::before,html.cg-measuring *::after{transition:none!important} body.theme-dark{color-scheme:dark} body:not(.print-guide) nav#mainNav{background:var(--void)} body.theme-dark:not(.print-guide) nav#mainNav{background:#0A0A0A} body.theme-dark .cover-page{background:#141414} .fg-input,.fg-select,.fg-textarea,input,select,textarea{caret-color:currentColor} ::placeholder{color:currentColor;opacity:.65} .f-credit{margin-top:8px;font-family:'IBM Plex Sans Arabic',sans-serif;font-size:12px;font-weight:600;color:#fff} body.theme-dark .dash-sidebar,body.theme-dark .bp-chrome,body.theme-dark .swag-tshirt .tee-body,body.theme-dark .swag-tshirt .tee-ls,body.theme-dark .swag-tshirt .tee-rs,body.theme-dark .swag-notebook .book,body.theme-dark [style*="background:var(--ink)"]{background:#1E1E1E!important} body:not(.theme-dark) .sec.sd,body:not(.theme-dark) .sec.sd0,body:not(.theme-dark) .sec.sd2,body:not(.theme-dark) .section--dark,body:not(.theme-dark) .section--dark2, body:not(.theme-dark) .ob-wrap,body:not(.theme-dark) .err-page,body:not(.theme-dark) .tk-card,body:not(.theme-dark) .nc-card,body:not(.theme-dark) .multi-tokens-wrap, body:not(.theme-dark) .master-hero-download-card,body:not(.theme-dark) .sonic-main-card,body:not(.theme-dark) .icon-geo-canvas-card{background:var(--warm)!important;background-image:none!important;color:var(--ink);border-color:var(--border)} body:not(.theme-dark) .sd .shr,body:not(.theme-dark) .sd0 .shr,body:not(.theme-dark) .sd2 .shr,body:not(.theme-dark) .section--dark2 .sec-rule{background:var(--border2)} body.theme-dark .d81-map{background:#161616!important} body.theme-dark .wm-watermark svg circle{fill:#F7F4EF} body.theme-dark .wm-watermark svg path,body.theme-dark .wm-watermark svg polygon{stroke:#F7F4EF} .cb-cell.cb-do:nth-child(2){background:#141414} .cb-cell.cb-do:nth-child(2) .cb-rule,.cb-cell.cb-do:nth-child(2) .cb-sep{color:#F7F4EF} body.theme-dark .cb-logos rect[stroke="#141414"]{stroke:#F7F4EF} body:not(.theme-dark) .sec.sd .shr,body:not(.theme-dark) .sec.sd0 .shr{background:var(--border2)!important} body.theme-dark .pt-preview svg{filter:invert(1) hue-rotate(180deg)} body.theme-dark .pat-cell svg{filter:brightness(2.5)} body:not(.theme-dark) .cover-page{background:var(--void)!important} body:not(.theme-dark) .cp-ar{color:#141414!important} body:not(.theme-dark) .cp-ar span{color:#E8450A!important} body:not(.theme-dark) .cp-en{color:#E8450A!important} body:not(.theme-dark) .cp-tagline,body:not(.theme-dark) .cp-meta,body:not(.theme-dark) .cp-presented,body:not(.theme-dark) .cp-badge{color:rgba(20,20,20,.72)!important;border-color:rgba(20,20,20,.2)} body:not(.theme-dark) .cp-year{color:rgba(20,20,20,.22)!important} body:not(.theme-dark) .cp-bg-text{color:rgba(20,20,20,.04)!important} body:not(.theme-dark) .cp-bottom{border-color:rgba(20,20,20,.14)!important} body:not(.theme-dark) .cp-main svg polygon,body:not(.theme-dark) .cp-main svg path{stroke:#E8450A} body:not(.theme-dark) .cp-main svg circle{fill:#E8450A} body.theme-dark .cp-ar,body.theme-dark .cp-ar span,body.theme-dark .hwar,body.theme-dark .hwar span{color:#E8450A!important} body.theme-dark .cp-main svg polygon,body.theme-dark .cp-main svg path{stroke:#E8450A} body.theme-dark .cp-main svg circle{fill:#E8450A} body.theme-dark .cp-en,body.theme-dark .hwen{color:#F7F4EF!important} .cp-en{margin-top:28px} body,body *{cursor:auto!important} a,button,select,label,summary,[role=button],[onclick]{cursor:pointer!important} input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]),textarea{cursor:text!important} #cd{display:none} #cr{left:0;top:0;transform:translate3d(-100px,-100px,0);will-change:transform} @media(hover:none){#cr{display:none}} .wahaj-preloader{--wp-bg: #F7F4EF; --wp-ink: #141414; --wp-accent: #E8450A; position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; background: var(--wp-bg); transition: opacity .5s ease, visibility .5s ease}html.pre-dark .wahaj-preloader, body.theme-dark .wahaj-preloader{--wp-bg: #0A0A0A; --wp-ink: #F7F4EF}.wahaj-preloader.is-done{opacity: 0; visibility: hidden; pointer-events: none}.wp-inner{display: flex; flex-direction: column; align-items: center; gap: 28px; width: min(280px, 70vw)}.wp-logo{color: var(--wp-accent); animation: wpPulse 1.8s ease-in-out infinite}.wp-track{width: 100%; height: 3px; overflow: hidden; border-radius: 3px; background: color-mix(in srgb, var(--wp-ink) 14%, transparent)}.wp-fill{width: 0; height: 100%; background: var(--wp-accent)}.wp-pct{font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 3px; color: var(--wp-ink); direction: ltr}@keyframes wpPulse{0%, 100%{transform: scale(1)}50%{transform: scale(1.06)}} @media (prefers-reduced-motion: reduce){.wp-logo{animation: none}} .print-guide .wahaj-preloader{display:none!important} .wp-doc-intro,.wp-doc-note{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:14px;line-height:1.9;color:var(--ink-soft);margin-bottom:24px} .wp-doc-note{margin:20px 0 0;font-size:13px} .wp-doc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:24px;align-items:stretch} .wp-demo{position:relative;min-height:380px;overflow:hidden;border:1px solid var(--border)} .wp-demo .wahaj-preloader{position:absolute;z-index:1} .wp-demo .wp-fill{width:100%} .wp-replay{position:absolute;z-index:2;bottom:12px;inset-inline-start:12px} .wp-code-box{min-width:0;display:flex;flex-direction:column;border:1px solid var(--border);background:var(--warm)} .wp-code-tabs{display:flex;align-items:center;gap:4px;padding:8px;border-bottom:1px solid var(--border);direction:ltr} .wp-code-tab{padding:6px 14px;border:none;background:none;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink)} .wp-code-tab.active{background:var(--ember-dim);color:#fff} .wp-copy{margin-inline-start:auto} .wp-code{flex:1;max-height:340px;margin:0;padding:16px;overflow:auto;direction:ltr;text-align:left;font-family:'IBM Plex Mono',monospace;font-size:12px;line-height:1.7;color:var(--ink)} .wp-code[hidden]{display:none} @media(max-width:900px){.wp-doc{grid-template-columns:minmax(0,1fr)}} :root{--ink-soft:#5A5A5A;--silver:#5A5A5A} body.theme-dark{--ink-soft:#B4B0A8;--silver:#B4B0A8;--dkm:rgba(247,244,239,.78);--dks:#A8A49C} body{font-size:16px;line-height:1.6} button,[role=button],select,input[type=range],input[type=checkbox],input[type=radio]{min-height:24px;min-width:24px} .sh-share-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px} .sh-share-btn svg{width:14px;height:14px} :focus-visible{outline:2px solid var(--ember-dim)!important;outline-offset:3px!important;border-radius:2px} body.theme-dark :focus-visible{outline-color:#FF7A45!important} .lang-toggle-btn svg,.role-dropdown-btn .ri{width:14px;height:14px;vertical-align:-2px;margin-inline-end:4px} .toggle-demo .tg-cell:first-child,#themeSplitSlider .pin-light{--void:#F7F4EF;--warm:#FAF8F4;--parch:#E8E4DC;--ink:#141414;--ink-soft:#5A5A5A;--border:rgba(20,20,20,.12);--border2:rgba(20,20,20,.22);--surf:rgba(20,20,20,.04);background:#F7F4EF!important;color:#141414;color-scheme:light;border:1px solid rgba(20,20,20,.12)!important} .toggle-demo .tg-cell:last-child,#themeSplitSlider .pin-dark{--dk0:#0A0A0A;--dk1:#0E0E0E;--dk2:#161616;--dkt:#F7F4EF;--dkm:rgba(247,244,239,.72);--dks:#A8A49C;--void:#0A0A0A;--warm:#161616;--ink:#F7F4EF;--ink-soft:#B4B0A8;--border:rgba(247,244,239,.12);--border2:rgba(247,244,239,.22);background:#0E0E0E!important;color:#F7F4EF;color-scheme:dark} .toggle-demo .tg-cell:first-child .tg-track{background:rgba(20,20,20,.18)} #themeSplitSlider .pin-light .wz-btn{background:#F7F4EF;color:#141414;border:1px solid rgba(20,20,20,.22)} #themeSplitSlider .pin-dark .wz-btn{background:#161616;color:#F7F4EF;border:1px solid rgba(247,244,239,.22)} .d89-preview .d89-art{position:absolute;inset:0;width:100%;height:100%;display:block} .d89-minimal,.d89-office{background:none} .d89-office::before{display:none} .sb-image-row,.sb-grad-row{display:flex;gap:8px;align-items:center} .sb-grad-row .banner-select{flex:1;min-width:0} .sb-upload-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 16px;border:1px dashed var(--ember);color:var(--ember-dim);font-family:'IBM Plex Sans Arabic',sans-serif;font-size:13px;font-weight:600;cursor:pointer} body.theme-dark .sb-upload-btn{color:#FF7A45} .sb-upload-btn input{position:absolute;inset:0;opacity:0;cursor:pointer} .sb-upload-btn:focus-within{outline:2px solid var(--ember-dim);outline-offset:3px} .sb-hint{margin-top:6px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);direction:ltr;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sb-range{display:flex;flex-direction:column;gap:4px;margin-top:10px;font-family:'IBM Plex Sans Arabic',sans-serif;font-size:12px;color:var(--ink-soft)} .sb-range span{display:flex;justify-content:space-between} .sb-range b{font-family:'IBM Plex Mono',monospace;color:var(--ink)} .sb-range input{width:100%;accent-color:var(--ember)} .vc-swatches{display:flex;flex-wrap:wrap;gap:10px} .vc-swatch{width:36px;height:36px;padding:3px;border-radius:50%;border:2px solid transparent;background:none;cursor:pointer} .vc-swatch span{display:block;width:100%;height:100%;border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(20,20,20,.18)} .vc-swatch.active{border-color:var(--ember)} #vcard3dBox .vcard-face{background:var(--vc-bg)!important;border-color:var(--vc-line)!important;color:var(--vc-text)!important;transition:background .3s ease} #vcard3dBox .vcard-front svg path,#vcard3dBox .vcard-front svg polygon{stroke:var(--vc-logo)!important} #vcard3dBox .vcard-front svg circle{fill:var(--vc-logo)!important} #vcard3dBox #vcNameDisplay{color:var(--vc-text)!important} #vcard3dBox #vcTitleDisplay{color:var(--vc-sub)!important} #vcard3dBox #vcEntityBadge{color:var(--vc-badge-fg)!important;background:var(--vc-badge-bg)!important} #vcard3dBox .vcard-back > div:first-child,#vcard3dBox .vcard-back > div:first-child *{color:var(--vc-text)!important} #themeSplitSlider .dm-pane-light .dm-pane-content{align-items:flex-start;text-align:left} #themeSplitSlider #splitDarkPaneContent{align-items:flex-end;text-align:right} #themeSplitSlider #splitDarkPaneContent > div{width:100%} #themeSplitSlider #splitDarkPaneContent input{text-align:right} .sidebar-filters{flex-wrap:wrap} .sidebar-filter-tab{flex:0 0 auto;min-width:max-content;padding:6px 14px} body.theme-dark .li-img,body.theme-dark .ig-story,body.theme-dark .tw-header,body.theme-dark .li-post{background:#1A1A1A!important;box-shadow:inset 0 0 0 1px rgba(247,244,239,.12)} body.theme-dark .li-post{background:#141414!important} body.theme-dark .ig-story{background:linear-gradient(180deg,#1E1E1E,#121212)!important} .ds-item{cursor:pointer} .ds-item:focus-visible{outline-offset:-2px} .dash-view[hidden]{display:none!important} .dv-btn{padding:8px 14px;background:#B33508;color:#fff;border:none;font-family:'IBM Plex Sans Arabic',sans-serif;font-size:12px;font-weight:600} .dv-tabs{display:flex;gap:6px;margin:4px 0 16px;direction:rtl} .dv-tabs span{padding:6px 12px;font-family:'IBM Plex Sans Arabic',sans-serif;font-size:12px;color:var(--ink-soft);border:1px solid var(--border)} .dv-tabs span.on{background:var(--ink);color:var(--void);border-color:var(--ink)} .dv-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;direction:rtl} .dv-card{padding:16px;border:1px solid var(--border);background:var(--warm)} .dv-card-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:'IBM Plex Sans Arabic',sans-serif;font-size:14px;color:var(--ink)} .dv-meta{margin:6px 0 12px;font-family:'IBM Plex Sans Arabic',sans-serif;font-size:12px;color:var(--ink-soft)} .dv-bar{height:4px;background:var(--border)} .dv-bar i{display:block;height:100%;background:var(--ember)} .dv-foot{display:flex;justify-content:space-between;margin-top:8px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft)} .dv-list{border:1px solid var(--border);direction:rtl} .dv-list-head,.dv-row{display:grid;grid-template-columns:2fr 1.4fr .8fr 1fr;align-items:center;padding:12px 16px;gap:8px} .dv-list-head{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:1px;color:var(--ink-soft);border-bottom:1px solid var(--border)} .dv-row{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:13px;color:var(--ink);border-bottom:1px solid var(--border)} .dv-row:last-child{border-bottom:none} .dv-row > div:first-child{display:flex;align-items:center;gap:10px} .dv-av{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--ember-pale);color:#7A2404;font-weight:700;font-size:12px} .dv-chart{display:flex;align-items:flex-end;gap:24px;height:160px;padding:12px 8px 0;direction:rtl} .dv-col{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px} .dv-col i{display:block;width:100%;max-width:64px;background:linear-gradient(180deg,#E8450A,#B33508)} .dv-col span{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:12px;color:var(--ink-soft)} .dv-settings{display:flex;flex-direction:column;border:1px solid var(--border);direction:rtl} .dv-set{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 16px;border-bottom:1px solid var(--border)} .dv-set:last-child{border-bottom:none} .dv-set b{display:block;font-family:'IBM Plex Sans Arabic',sans-serif;font-size:14px;color:var(--ink)} .dv-set small{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:12px;color:var(--ink-soft)} .dv-switch{position:relative;flex:0 0 auto;width:40px;height:22px;border-radius:11px;background:var(--border2)} .dv-switch::after{content:'';position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:right .2s} .dv-switch.on{background:var(--ember)} .dv-switch.on::after{right:21px} .dv-pill{padding:4px 12px;border:1px solid var(--border2);font-family:'IBM Plex Sans Arabic',sans-serif;font-size:12px;color:var(--ink)} @media(max-width:768px){.dv-cards{grid-template-columns:minmax(0,1fr)}.dv-list-head,.dv-row{grid-template-columns:2fr 1fr}.dv-list-head>div:nth-child(n+3),.dv-row>div:nth-child(n+3){display:none}} .k3-gallery{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;width:100%;max-width:1100px;margin-top:64px} .k3-item{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;outline:none} .k3-scene{width:170px;height:190px;perspective:800px;display:flex;align-items:center;justify-content:center;border-radius:16px;background:radial-gradient(circle at 50% 70%,rgba(232,69,10,.1),transparent 65%)} .k3-obj{position:relative;transform-style:preserve-3d;transform:rotateX(-14deg) rotateY(-28deg);transition:transform .9s cubic-bezier(.16,1,.3,1);animation:k3Float 6s ease-in-out infinite} .k3-item:hover .k3-obj,.k3-item:focus-visible .k3-obj{transform:rotateX(-8deg) rotateY(28deg);animation-play-state:paused} @keyframes k3Float{0%,100%{translate:0 0}50%{translate:0 -8px}} .k3-item figcaption{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center} .k3-ar{font-family:'Noto Kufi Arabic',sans-serif;font-size:14px;font-weight:700;color:var(--ink)} .k3-en{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:1px;color:var(--ink-soft)} .k3-f{position:absolute;backface-visibility:visible} .k3-notebook{width:96px;height:128px} .k3-notebook .k3-front,.k3-notebook .k3-back{width:96px;height:128px;background:linear-gradient(145deg,#1E1E1E,#0E0E0E);border-radius:3px 6px 6px 3px} .k3-notebook .k3-front{transform:translateZ(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px} .k3-notebook .k3-back{transform:rotateY(180deg) translateZ(8px)} .k3-notebook .k3-front svg{width:38px;height:38px} .k3-emboss{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:3px;color:rgba(247,244,239,.55)} .k3-band{position:absolute;top:0;bottom:0;right:14px;width:5px;background:#E8450A} .k3-notebook .k3-left,.k3-notebook .k3-right{width:16px;height:128px;left:40px} .k3-notebook .k3-left{background:#1A1A1A;transform:rotateY(-90deg) translateZ(48px)} .k3-notebook .k3-right{background:repeating-linear-gradient(0deg,#F7F4EF 0 2px,#E4DED3 2px 3px);transform:rotateY(90deg) translateZ(48px)} .k3-notebook .k3-top,.k3-notebook .k3-bottom{width:96px;height:16px;top:56px;background:repeating-linear-gradient(90deg,#F7F4EF 0 2px,#E4DED3 2px 3px)} .k3-notebook .k3-top{transform:rotateX(90deg) translateZ(64px)} .k3-notebook .k3-bottom{transform:rotateX(-90deg) translateZ(64px)} .k3-pen{width:150px;height:20px;transform:rotateX(-14deg) rotateY(-28deg) rotateZ(-32deg)} .k3-item:hover .k3-pen,.k3-item:focus-visible .k3-pen{transform:rotateX(-8deg) rotateY(28deg) rotateZ(-32deg)} .k3-pen-body{position:relative;width:150px;height:16px;border-radius:8px 3px 3px 8px;background:linear-gradient(180deg,#5A5A5A 0%,#D9D9D9 22%,#8A8A8A 45%,#2A2A2A 80%,#4A4A4A 100%);box-shadow:0 12px 18px rgba(0,0,0,.25)} .k3-pen-cap{position:absolute;left:0;top:0;width:58px;height:16px;border-radius:8px 2px 2px 8px;background:linear-gradient(180deg,#B33508,#FF7A45 25%,#E8450A 50%,#8F2A06 100%)} .k3-pen-clip{position:absolute;left:10px;top:-5px;width:40px;height:4px;border-radius:2px;background:linear-gradient(180deg,#EEE,#999)} .k3-pen-ring{position:absolute;left:58px;top:0;width:4px;height:16px;background:linear-gradient(180deg,#888,#F2F2F2,#777)} .k3-pen-text{position:absolute;left:74px;top:3px;font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px;color:#141414} .k3-pen-tip{position:absolute;right:-12px;top:3px;border-left:13px solid #3A3A3A;border-top:5px solid transparent;border-bottom:5px solid transparent} .k3-mug{width:84px;height:120px} .k3-mug-body{position:relative;width:84px;height:120px;border-radius:8px 8px 14px 14px;background:linear-gradient(90deg,#B8B2A8 0%,#F7F4EF 30%,#FFFFFF 42%,#E4DED3 70%,#9E988E 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;overflow:hidden} .k3-mug-lid{position:absolute;top:0;left:0;right:0;height:14px;background:linear-gradient(90deg,#1A1A1A,#3A3A3A 40%,#141414);border-radius:8px 8px 0 0} .k3-mug-band{position:absolute;bottom:14px;left:0;right:0;height:8px;background:linear-gradient(90deg,#8F2A06,#E8450A 40%,#B33508)} .k3-mug-body svg{width:30px;height:30px;margin-top:6px} .k3-mug-word{font-family:'Noto Kufi Arabic',sans-serif;font-size:13px;font-weight:700;color:#141414} .k3-mug-handle{position:absolute;right:-22px;top:34px;width:26px;height:46px;border:6px solid #CFC9BF;border-left:none;border-radius:0 16px 16px 0;transform:translateZ(-1px)} .k3-mug-steam{position:absolute;left:24px;top:-34px;display:flex;gap:8px} .k3-mug-steam i{display:block;width:4px;height:24px;border-radius:4px;background:linear-gradient(180deg,transparent,rgba(232,69,10,.35));animation:k3Steam 2.4s ease-in-out infinite} .k3-mug-steam i:nth-child(2){animation-delay:.6s}.k3-mug-steam i:nth-child(3){animation-delay:1.2s} @keyframes k3Steam{0%{opacity:0;transform:translateY(8px)}50%{opacity:1}100%{opacity:0;transform:translateY(-10px)}} .k3-stickers{width:130px;height:130px} .k3-st{position:absolute;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 12px rgba(0,0,0,.22);border:3px solid #fff} .k3-st svg{width:60%;height:60%} .k3-st1{width:70px;height:70px;left:0;top:6px;border-radius:50%;background:#E8450A;transform:translateZ(0) rotate(-10deg)} .k3-st2{width:76px;height:44px;right:0;top:20px;border-radius:10px;background:#141414;transform:translateZ(14px) rotate(8deg)} .k3-st2 b{font-family:'Noto Kufi Arabic',sans-serif;font-size:18px;color:#F7F4EF} .k3-st3{width:84px;height:30px;left:18px;bottom:22px;border-radius:15px;background:#FDDDD4;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;letter-spacing:3px;color:#B33508;transform:translateZ(28px) rotate(-6deg)} .k3-st4{width:52px;height:52px;right:6px;bottom:0;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);border:none;background:#F7F4EF;transform:translateZ(40px) rotate(12deg)} .k3-letter{width:140px;height:100px} .k3-env{position:relative;width:140px;height:100px;transform-style:preserve-3d} .k3-env-back{position:absolute;inset:0;background:#B33508;border-radius:4px} .k3-card{position:absolute;left:12px;right:12px;top:-34px;height:96px;padding:12px;background:#F7F4EF;border-radius:3px;display:flex;flex-direction:column;align-items:flex-end;gap:5px;transform:translateZ(2px);transition:top .8s cubic-bezier(.16,1,.3,1)} .k3-item:hover .k3-card,.k3-item:focus-visible .k3-card{top:-58px} .k3-card-hi{font-family:'Noto Kufi Arabic',sans-serif;font-size:14px;font-weight:700;color:#141414} .k3-card-sub{font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:2px;color:#B33508} .k3-card-line{width:100%;height:2px;background:#E4DED3}.k3-card-line.s{width:60%} .k3-env-front{position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(160deg,#E8450A,#C93C08);clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%);border-radius:0 0 4px 4px;transform:translateZ(4px)} .k3-env-flap{position:absolute;left:0;right:0;top:0;height:56px;background:#D9480F;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transform:translateZ(5px) rotateX(165deg)} .k3-seal{position:absolute;left:56px;top:42px;width:28px;height:28px;border-radius:50%;background:#141414;display:flex;align-items:center;justify-content:center;transform:translateZ(6px)} .k3-seal svg{width:18px;height:18px} @media(max-width:1000px){.k3-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:600px){.k3-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.k3-scene{width:140px;height:170px;transform:scale(.85)}} @media(prefers-reduced-motion:reduce){.k3-obj,.k3-mug-steam i{animation:none}} #sectionProgress .pg-dot{background:var(--border2)} #sectionProgress .pg-dot.active{background:#E1251B!important;box-shadow:0 0 0 4px rgba(225,37,27,.18),0 0 10px rgba(225,37,27,.5);transform:scale(1.35)} @media(max-width:768px){ #tokensCustomizerTrigger{bottom:calc(84px + env(safe-area-inset-bottom))!important} #tocToggleBtn{bottom:calc(84px + env(safe-area-inset-bottom))!important} #backToTop{bottom:calc(140px + env(safe-area-inset-bottom))!important} footer.footer{padding-bottom:240px!important}}.k3-item:hover .k3-notebook,.k3-item:focus-visible .k3-notebook{transform:rotateX(-10deg) rotateY(160deg)} .k3-notebook .k3-back{display:flex;align-items:center;justify-content:center} .nb-back{display:flex;flex-direction:column;align-items:center;gap:6px} .nb-back svg{width:22px;height:22px} .nb-back b{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:1px;color:rgba(247,244,239,.75);font-weight:500} .nb-back small{font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:1px;color:rgba(247,244,239,.4)} .k3-mug3{width:80px;height:112px;transform:rotateX(-16deg) rotateY(-30deg)} .k3-item:hover .k3-mug3,.k3-item:focus-visible .k3-mug3{transform:rotateX(-16deg) rotateY(150deg)} .mg-f{position:absolute;left:50%;top:0;width:9.61px;height:112px;margin-left:-4.805px;backface-visibility:hidden} .mg-top,.mg-bottom{position:absolute;left:0;width:80px;height:80px;border-radius:50%} .mg-top{top:16px;transform:rotateX(90deg) translateZ(56px);background:radial-gradient(circle,#0E0E0E 0 52%,#2E2E2E 53% 70%,#1A1A1A 71%)} .mg-bottom{top:16px;transform:rotateX(-90deg) translateZ(56px);background:#BDB6AA} .mg-h{position:absolute;left:50%;top:30px;width:30px;height:50px;margin-left:-15px;border:7px solid #E9E4DA;border-left-color:transparent;border-radius:0 26px 26px 0;box-sizing:border-box} .mg-print{position:absolute;left:50%;top:30px;width:40px;margin-left:-20px;display:flex;flex-direction:column;align-items:center;gap:2px;transform:translateZ(40.6px);backface-visibility:hidden} .mg-print svg{width:26px;height:26px} .mg-print b{font-family:'Noto Kufi Arabic',sans-serif;font-size:12px;color:#141414} .k3-mug3 .k3-mug-steam{left:26px;top:-36px;transform:translateZ(0)} .k3-pen3{width:168px;height:0;transform:rotateZ(-24deg) rotateX(-18deg) rotateY(-26deg)} .k3-item:hover .k3-pen3,.k3-item:focus-visible .k3-pen3{transform:rotateZ(-24deg) rotateX(160deg) rotateY(-26deg)} .k3-pen3 .pn-seg{position:absolute;left:var(--x);top:0;width:var(--len);height:0;transform-style:preserve-3d} .k3-pen3 .pn-seg i{position:absolute;left:0;top:0;backface-visibility:hidden} .k3-pen3 .pn-seg .pn-cap-end{border-radius:50%;backface-visibility:visible} .pn-clip{position:absolute;left:8px;top:-3px;width:48px;height:6px;border-radius:3px;background:linear-gradient(180deg,#F5F5F5,#9A9A9A);transform:translateY(-1px) rotateX(-90deg) translateZ(11px)} .pn-word{position:absolute;left:78px;top:-5px;font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px;color:#FFFFFF;transform:translateZ(9px);backface-visibility:hidden} .pn-nib{position:absolute;left:152px;top:0;width:30px;height:0;transform-style:preserve-3d} .pn-nib-top,.pn-nib-under{position:absolute;left:0;top:-7px;width:30px;height:14px} .pn-nib-top{background:linear-gradient(180deg,#F6E3A1,#D9A93A 45%,#9C7317);clip-path:polygon(0 0,40% 6%,100% 50%,40% 94%,0 100%);transform:rotateX(-90deg) translateZ(1px)} .pn-nib-top::after{content:'';position:absolute;left:8px;top:6px;width:22px;height:1.5px;background:#5A3F08} .pn-nib-top::before{content:'';position:absolute;left:8px;top:5px;width:4px;height:4px;border-radius:50%;background:#5A3F08} .pn-nib-under{background:#2A2A2A;clip-path:polygon(0 15%,60% 30%,85% 50%,60% 70%,0 85%);transform:rotateX(-90deg) translateZ(-2px)} .k3-env3{width:140px;height:96px;transform:rotateX(-12deg) rotateY(-22deg);transition:transform .8s cubic-bezier(.16,1,.3,1) 0s} .k3-item:hover .k3-env3,.k3-item:focus-visible .k3-env3{transform:rotateX(-12deg) rotateY(158deg);transition-delay:.9s} .k3-env3 > *{position:absolute;backface-visibility:hidden} .ev-wall{inset:0;background:#9E2E07;border-radius:4px} .ev-card{left:12px;right:12px;top:-50px;height:92px;padding:12px;background:#F7F4EF;border-radius:3px;display:flex;flex-direction:column;align-items:flex-end;gap:5px;transform:translateZ(1px);transition:top .5s ease 1.1s;box-shadow:0 2px 6px rgba(0,0,0,.2)} .ev-pocket{left:0;right:0;bottom:0;height:96px;border-radius:0 0 4px 4px;background:linear-gradient(165deg,#F0561A,#C93C08);clip-path:polygon(0 30%,50% 72%,100% 30%,100% 100%,0 100%);transform:translateZ(3px)} .ev-flap{left:0;right:0;top:0;height:58px;background:linear-gradient(180deg,#D9480F,#B33508);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;transform:translateZ(-1px) rotateX(-178deg);backface-visibility:visible!important;transition:transform .5s ease .7s} .ev-seal{left:56px;top:42px;width:28px;height:28px;border-radius:50%;background:#141414;display:flex;align-items:center;justify-content:center;transform:translateZ(5px) scale(0);transition:transform .3s ease .6s} .ev-seal svg{width:18px;height:18px} .ev-front{inset:0;border-radius:4px;background:linear-gradient(160deg,#F0561A,#C93C08);transform:rotateY(180deg) translateZ(1px);padding:12px;display:flex;flex-direction:column;justify-content:flex-end;gap:3px} .ev-stamp{position:absolute;top:10px;left:10px;width:26px;height:30px;background:#F7F4EF;outline:2px dashed #F7F4EF;outline-offset:1px;display:flex;align-items:center;justify-content:center} .ev-stamp svg{width:18px;height:18px} .ev-to{font-family:'Noto Kufi Arabic',sans-serif;font-size:11px;font-weight:700;color:#FFFFFF;text-align:right} .ev-addr{font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:2px;color:#FDDDD4;text-align:right} .ev-mark{position:absolute;top:14px;right:12px;width:30px;height:20px;border:1.5px solid rgba(253,221,212,.6);border-radius:50%} .k3-item:hover .ev-card,.k3-item:focus-visible .ev-card{top:4px;transition-delay:0s} .k3-item:hover .ev-flap,.k3-item:focus-visible .ev-flap{transform:translateZ(5px) rotateX(0deg);transition-delay:.45s} .k3-item:hover .ev-seal,.k3-item:focus-visible .ev-seal{transform:translateZ(6px) scale(1);transition-delay:.8s} .nb-back{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px} .nb-back svg{width:30px;height:30px;margin-bottom:4px} .nb-back b{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:3px;color:#F7F4EF;font-weight:600} .nb-back em{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:1px;color:rgba(247,244,239,.55)} .nb-back small{display:none} .nb-ribbon{position:absolute;top:0;left:18px;width:4px;height:100%;background:#E8450A} .nb-code{position:absolute;bottom:12px;left:50%;width:34px;height:10px;margin-left:-17px;background:repeating-linear-gradient(90deg,rgba(247,244,239,.6) 0 1px,transparent 1px 3px,rgba(247,244,239,.6) 3px 5px,transparent 5px 6px)} .mg-f{width:3.82px!important;margin-left:-1.91px!important} .pn-nib{left:150px;width:34px} .pn-nib .pn-nib-top{position:absolute;left:0;top:-8px;width:34px;height:16px;transform:rotateX(-90deg) translateZ(.5px);clip-path:none;background:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))} .pn-nib .pn-nib-top::before,.pn-nib .pn-nib-top::after{display:none} .pn-feed{position:absolute;left:0;top:-4px;width:22px;height:8px;background:linear-gradient(180deg,#3A3A3A,#141414);border-radius:0 6px 6px 0;transform:rotateX(-90deg) translateZ(-2.5px)} .ev-pocket{clip-path:polygon(0 0,50% 62%,100% 0,100% 100%,0 100%)!important} .ev-flap{height:62px!important} .mg-top{background:radial-gradient(circle,#D9D2C6 0 70%,#F7F4EF 72% 100%)!important} @media(max-width:768px){#sectionProgress{display:none!important}} .anatomy-grid svg{overflow:visible} @media(max-width:900px){ .banner-studio-wrap,.vcard-studio-wrap,.pitch-studio-wrap,.card-generator-container{grid-template-columns:minmax(0,1fr)!important} .banner-studio-wrap>*,.vcard-studio-wrap>*,.pitch-studio-wrap>*,.card-generator-container>*{min-width:0} .banner-select,.banner-input,.banner-textarea{max-width:100%;min-width:0;box-sizing:border-box}}@media(max-width:768px){ .pricing-grid{grid-template-columns:minmax(0,1fr);max-width:420px} .matrix-table{min-width:520px} .matrix-table th:first-child{width:auto} .pag-bar{flex-wrap:wrap;justify-content:center} .gantt-header-row,.gantt-row{grid-template-columns:118px minmax(0,1fr)} .gantt-task-col{padding:10px 10px} .gantt-timeline-cols>div{font-size:11px;letter-spacing:0}}@media(max-width:600px){ .team-grid{grid-template-columns:minmax(0,1fr);max-width:280px} .team-showcase,.gantt-showcase{padding:14px} .banner-studio-wrap,.vcard-studio-wrap,.pitch-studio-wrap{padding:16px;gap:20px} .sb-grad-row{flex-wrap:wrap} .sb-grad-row .banner-select{flex:1 1 100%} .vcard-preview-stage{padding:24px 12px} .vcard-3d-box{width:min(300px,100%)} .vcard-actions-bar{gap:8px} .vcard-actions-bar .vcard-btn{flex:1 1 100%} .anatomy-grid.section--dark{padding:28px 20px;gap:32px} .sp-bar-wrap{flex-wrap:wrap;padding:12px 14px;gap:8px} .sp-name{min-width:0} .sp-bar{max-width:100%} .d81-pin-card{white-space:normal;min-width:0!important;max-width:min(220px,calc(100vw - 56px))} .dd-demo{flex-direction:column;align-items:stretch;gap:28px} .dd-group{align-items:stretch} .dd-wrap{display:block} .dd-wrap>button{width:100%;justify-content:space-between} .dd-panel{left:0;right:0;min-width:0}}@media(max-width:600px){.d63-contents-title{flex-wrap:wrap;font-size:17px;gap:8px}.d63-contents-title::after{display:none}.d63-contents-panel{max-width:100%;box-sizing:border-box}} .tokens-platform-btn{flex:0 0 auto} .tokens-platform-nav{-webkit-overflow-scrolling:touch} @media(max-width:480px){ .logo-lockup{max-width:100%;gap:10px} .logo-lockup .ll-en{letter-spacing:1.5px} .bg-choice-btn{white-space:normal;line-height:1.4} .ms-name{font-size:11px;letter-spacing:0;max-width:60px}}@media(max-width:600px){.lp-stage{padding:12px!important}.lp-bgs{grid-template-columns:repeat(2,minmax(0,1fr))!important}#logoPreviewDisplayArea .logo-lockup{transform:scale(.85)}} @media(max-width:480px){.tt-bubble.left,.tt-bubble.right{white-space:normal;max-width:calc(50vw - 82px);text-align:center;padding:8px 10px;line-height:1.4}} @media(max-width:600px){.cl-item{flex-wrap:nowrap;align-items:flex-start}.cl-tag{flex:0 0 auto}} @media(max-width:1024px){.color-grid>.color-card:last-child:nth-child(odd){grid-column:1/-1}} .logo-cell .logo-lockup>svg polygon{stroke-width:4;opacity:.6} .logo-cell .logo-lockup>svg path{stroke-width:9} .logo-cell .logo-lockup>svg circle{r:9} .nx-sec{direction:rtl} html[dir="ltr"] .nx-sec{direction:ltr} .nx-sec svg{direction:ltr} .nx-lead{max-width:760px;margin:-24px 0 40px;font:400 15px/1.9 'IBM Plex Sans Arabic',sans-serif;color:var(--ink-soft)} .nx-lead.flat{margin:0 0 20px} .nx-k{font:500 12px/1.4 'IBM Plex Mono',monospace;letter-spacing:2px;text-transform:uppercase;color:var(--ember)} .nx-t{font:700 17px/1.5 'Noto Kufi Arabic',sans-serif;color:var(--ink);margin:0} .nx-p{font:400 13.5px/1.9 'IBM Plex Sans Arabic',sans-serif;color:var(--ink-soft);margin:0} .nx-note{font:400 12.5px/1.8 'IBM Plex Sans Arabic',sans-serif;color:var(--ink-soft);margin:14px 0 0;padding-inline-start:12px;border-inline-start:2px solid var(--ember)} .nx-quote{font:700 21px/1.7 'Noto Kufi Arabic',sans-serif;color:var(--ink);margin:0} .nx-quote.sm{font-weight:500;font-size:14.5px;padding-inline-start:12px;border-inline-start:2px solid var(--ember)} .nx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px} .nx-grid.c1{grid-template-columns:minmax(0,1fr)} .nx-grid.c3{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))} .nx-grid.c4{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))} .nx-card{background:var(--void);border:1px solid var(--border);border-radius:var(--base-radius,4px);padding:24px 22px;display:flex;flex-direction:column;gap:10px;min-width:0} .nx-card.on-dark{background:rgba(247,244,239,.04);border-color:rgba(247,244,239,.14)} .nx-card.on-dark .nx-t{color:var(--dkt)} .nx-card.on-dark .nx-p{color:var(--dkm)} .nx-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:4px} .nx-chip{unicode-bidi:plaintext;font:400 12px/1.4 'IBM Plex Mono','IBM Plex Sans Arabic',monospace;padding:5px 10px;border:1px solid var(--border2);border-radius:999px;color:var(--ink)} .nx-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .nx-list li{position:relative;padding-inline-start:20px;font:400 13.5px/1.8 'IBM Plex Sans Arabic',sans-serif;color:var(--ink)} .nx-list li::before{content:'';position:absolute;inset-inline-start:0;top:.85em;width:10px;height:2px;background:var(--ember)} .nx-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:center} .nx-stage{background:var(--parch);border:1px solid var(--border);border-radius:8px;padding:28px 22px;display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;min-width:0} .sp .nx-stage{background:var(--warm)} .nx-svg{display:block;width:100%;height:auto} .nx-svg.wide{max-width:560px} .nx-obj .nx-svg{max-height:170px;background:var(--surf);border-radius:6px;padding:8px;box-sizing:border-box;margin-bottom:6px} .nx-btn{font:700 13px/1.2 'Noto Kufi Arabic',sans-serif;background:var(--ember-dim,#B33508);color:#fff;border:1px solid var(--ember-dim,#B33508);border-radius:var(--base-radius,4px);padding:9px 16px;min-height:40px;cursor:pointer} .nx-btn.ghost{background:transparent;color:var(--ink);border-color:var(--border2)} .nx-btn:focus-visible,.nx-link:focus-visible{outline:2px solid var(--ember);outline-offset:2px} .nx-bar{height:6px;background:var(--border2);border-radius:3px;overflow:hidden} .nx-bar i{display:block;height:100%;background:var(--ember);border-radius:3px;transition:width .3s} .nx-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:var(--base-radius,4px)} .nx-table{width:100%;min-width:620px;border-collapse:collapse;background:var(--void)} .nx-table th{background:var(--ink);color:var(--void);font:700 12.5px/1.5 'Noto Kufi Arabic',sans-serif;padding:13px 16px;text-align:start;white-space:nowrap} .nx-table td{padding:13px 16px;border-top:1px solid var(--border);font:400 13px/1.7 'IBM Plex Sans Arabic',sans-serif;color:var(--ink-soft);vertical-align:top;text-align:start} .nx-table td:first-child{color:var(--ink);font-weight:600} .nx-vmv{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px;margin-bottom:40px} .nx-vmv-card{border:1px solid var(--border);border-top:3px solid var(--ember);background:var(--void);padding:30px 26px;display:flex;flex-direction:column;gap:12px;min-width:0} .nx-vmv-vision{background:var(--ink);border-color:var(--ink);border-top-color:var(--ember)} .nx-vmv-vision .nx-t,.nx-vmv-vision .nx-quote{color:var(--void)} .nx-vmv-vision .nx-p{color:var(--void);opacity:.72} .nx-vmv-card .nx-p{margin-top:auto} .nx-values{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:20px} .nx-value{border-top:1px solid var(--border2);padding-top:16px;display:flex;flex-direction:column;gap:8px} .nx-value-n{font:500 12px/1 'IBM Plex Mono',monospace;color:var(--ember);letter-spacing:2px} .nx-value-how{font:400 12.5px/1.7 'IBM Plex Sans Arabic',sans-serif;color:var(--ink);background:var(--surf);border-radius:4px;padding:8px 10px;margin-top:auto} .nx-persona-head{display:flex;align-items:center;gap:12px} .nx-persona-head .nx-k{letter-spacing:0;text-transform:none;font-family:'IBM Plex Sans Arabic',sans-serif} .nx-avatar{flex:none;width:48px;height:48px;border-radius:50%;background:var(--av,#141414);color:#F7F4EF;border:1px solid rgba(247,244,239,.4);display:grid;place-items:center;font:700 20px/1 'Noto Kufi Arabic',sans-serif} .nx-avatar::before{content:attr(data-ar)} html[dir="ltr"] .nx-avatar::before{content:attr(data-en)} .nx-pair{display:grid;grid-template-columns:78px minmax(0,1fr);gap:10px;font:400 13px/1.7 'IBM Plex Sans Arabic',sans-serif} .nx-pair b{color:var(--ink);font-weight:600} .nx-pair span{color:var(--ink-soft)} .nx-journey{overflow-x:auto;padding-bottom:6px} .nx-journey-curve{display:block;width:100%;min-width:960px;height:70px} .nx-journey-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;min-width:960px} .nx-step{background:var(--void);border:1px solid var(--border);padding:20px 16px;display:flex;flex-direction:column;gap:10px;min-width:0} .nx-step-n{width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--void);display:grid;place-items:center;font:600 13px/1 'IBM Plex Mono',monospace} .nx-step .nx-pair{grid-template-columns:minmax(0,1fr);gap:2px} .nx-step .nx-pair b{font-size:12px;color:var(--ember)} .nx-tagline{text-align:center;padding:8px 0 52px;display:flex;flex-direction:column;align-items:center;gap:14px} .nx-tagline-main{margin:0;font:700 clamp(28px,5.2vw,58px)/1.5 'Noto Kufi Arabic',sans-serif;color:var(--dkt)} .nx-tagline-en{margin:0;font:italic 400 clamp(16px,2.2vw,22px)/1.5 'DM Serif Display',serif;color:#FDDDD4} .nx-vocab{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .nx-vocab-col{background:var(--void);border:1px solid var(--border);border-top:3px solid #2E9E63} .nx-vocab-col.no{border-top-color:#D0432B} .nx-vocab-col>.nx-t{padding:16px 20px;display:flex;align-items:center;gap:10px} .nx-vocab-col>.nx-t::before{content:'✓';color:#2E9E63;font-family:'IBM Plex Mono',monospace} .nx-vocab-col.no>.nx-t::before{content:'✕';color:#D0432B} .nx-vocab-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:13px 20px;border-top:1px solid var(--border);font:400 13px/1.8 'IBM Plex Sans Arabic',sans-serif} .nx-vocab-row b{color:var(--ink);font-weight:600} .nx-vocab-row span{color:var(--ink-soft)} .nx-vocab.strike .nx-vocab-col.no .nx-vocab-row b{text-decoration:line-through;text-decoration-color:#D0432B;text-decoration-thickness:1.5px} .nx-prod{width:100%;max-width:320px;justify-self:center;background:var(--void);border:1px solid var(--border);border-radius:var(--base-radius,4px);overflow:hidden;display:flex;flex-direction:column;min-width:0} .nx-prod-img{position:relative;aspect-ratio:4/5;max-height:340px;background:#FDDDD4;color:#E8450A;display:grid;place-items:center} .nx-prod-img svg{width:44%;height:auto} .nx-prod-img.alt{background:#E8450A;color:#F7F4EF} .nx-prod-img.dark{background:#1E1E1E;color:#787878} .nx-badge{position:absolute;top:12px;inset-inline-start:12px;background:#141414;color:#F7F4EF;font:700 12px/1.4 'Noto Kufi Arabic',sans-serif;padding:4px 11px;border-radius:999px} .nx-badge.mute{background:#F7F4EF;color:#141414} .nx-prod-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1} .nx-prod-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:10px} .nx-price{font:600 16px/1.3 'IBM Plex Mono','IBM Plex Sans Arabic',monospace;color:var(--ink);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .nx-price s{color:var(--ink-soft);font-size:13px;font-weight:400} .nx-price b{color:var(--ember)} .nx-receipt{width:230px;max-width:100%;box-sizing:border-box;background:#fff;color:#141414;font:400 11.5px/1.7 'IBM Plex Mono',monospace;padding:18px 16px 28px;text-align:center;-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/14px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/14px 100%} .nx-receipt-mark{width:34px;height:34px;display:block;margin:0 auto 6px;color:#141414} .nx-receipt b{display:block;letter-spacing:2px;font-weight:600} .nx-receipt small{display:block;font-size:10.5px;color:#555} .nx-receipt hr{border:0;border-top:1px dashed #999;margin:9px 0} .nx-receipt div:not(.nx-qr){display:flex;justify-content:space-between;gap:8px;text-align:start} .nx-receipt .tot{font-weight:700;font-size:14px} .nx-qr{position:relative;width:56px;height:56px;margin:8px auto 4px;background:conic-gradient(#141414 25%,#0000 0 50%,#141414 0 75%,#0000 0) 0 0/8px 8px} .nx-qr::before,.nx-qr::after{content:'';position:absolute;width:16px;height:16px;background:#fff;border:4px solid #141414;box-sizing:border-box;top:0} .nx-qr::before{left:0} .nx-qr::after{right:0} .nx-voucher{display:flex;width:290px;max-width:100%;font-family:'IBM Plex Mono',monospace;border-radius:8px;overflow:hidden;border:1px solid rgba(247,244,239,.3)} .nx-voucher-main{flex:1;background:#B33508;color:#F7F4EF;padding:16px;display:grid;gap:6px} .nx-voucher-main svg{width:28px;height:28px} .nx-voucher-main span{font-size:11px;letter-spacing:3px} .nx-voucher-main b{font-size:22px;font-weight:600;white-space:nowrap} .nx-voucher-stub{background:#F7F4EF;color:#141414;padding:16px 14px;display:grid;align-content:center;gap:2px;text-align:center;border-left:2px dashed #B33508} .nx-voucher-stub small{font-size:10px;letter-spacing:1px;color:#555} .nx-voucher-stub b{font-size:20px} .nx-menu{max-width:880px;margin:0 auto;background:var(--void);border:1px solid var(--border2);border-top:4px solid var(--ember);padding:34px 38px} .nx-menu-head{display:flex;align-items:center;gap:14px} .nx-menu-head svg{width:36px;height:36px;color:var(--ember);flex:none} .nx-menu-head h3{flex:1;margin:0;font:700 22px/1.4 'Noto Kufi Arabic',sans-serif;color:var(--ink)} .nx-menu-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px} .nx-menu-cat{font:700 13px/1.4 'Noto Kufi Arabic',sans-serif;color:var(--ember);border-bottom:1px solid var(--border);padding-bottom:8px;margin:26px 0 8px} .nx-menu-item{display:flex;align-items:baseline;gap:10px;padding:8px 0} .nx-menu-item span{display:flex;flex-direction:column;min-width:0} .nx-menu-item b{font:600 14px/1.6 'IBM Plex Sans Arabic',sans-serif;color:var(--ink)} .nx-menu-item small{font:400 12px/1.6 'IBM Plex Sans Arabic',sans-serif;color:var(--ink-soft)} .nx-menu-item i{flex:1;min-width:14px;border-bottom:1px dotted var(--border2);transform:translateY(-4px)} .nx-menu-item em{font:600 13px/1.6 'IBM Plex Mono','IBM Plex Sans Arabic',monospace;font-style:normal;color:var(--ink);white-space:nowrap} .nx-menu-foot{margin-top:26px;padding-top:14px;border-top:1px solid var(--border);font:400 12px/1.6 'IBM Plex Sans Arabic',sans-serif;color:var(--ink-soft);text-align:center} .nx-way{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px} .nx-way-sign{direction:rtl;background:#141414;color:#F7F4EF;border:1px solid rgba(247,244,239,.28);border-radius:6px;padding:18px 20px;display:flex;align-items:center;gap:16px;min-height:86px;box-sizing:border-box} .nx-way-sign b{display:block;font:700 17px/1.5 'Noto Kufi Arabic',sans-serif} .nx-way-sign small{display:block;font:400 12px/1.5 'IBM Plex Mono',monospace;letter-spacing:1px;color:rgba(247,244,239,.72)} .nx-way-sign b[data-ar]::before{content:attr(data-ar)} .nx-way-arrow.to-left{margin-right:auto} .nx-way-arrow{font:400 30px/1 'IBM Plex Mono',monospace;color:#F0561A} .nx-way-num{font:600 26px/1 'IBM Plex Mono',monospace;color:#F0561A} .nx-way-num.big{font-size:46px;color:#F7F4EF} .nx-way-sign.room{background:#F7F4EF;color:#141414;border-color:rgba(20,20,20,.28)} .nx-way-sign.room small{color:#555} .nx-way-sign.room .nx-way-num{color:#B33508} .nx-way-sign.floor{background:#B33508} .nx-way-sign.floor small{color:rgba(247,244,239,.9)} .nx-way-picts{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px} .nx-pict{width:64px;height:64px;border-radius:8px;background:#141414;border:1px solid rgba(247,244,239,.28);display:grid;place-items:center} .nx-pict svg{width:36px;height:36px;fill:none;stroke:#F7F4EF;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round} .nx-pict svg .f{fill:#F7F4EF;stroke:none} .nx-pict.warn{background:#F7F4EF;border-color:rgba(20,20,20,.28)} .nx-pict.warn svg{stroke:#C0392B} .nx-ads{display:flex;flex-wrap:wrap;gap:26px;align-items:flex-end} .nx-adf{margin:0;display:flex;flex-direction:column;gap:8px;min-width:0} .nx-adf.wide{flex-basis:100%} .nx-adf figcaption b{display:block;font:600 13px/1.5 'Noto Kufi Arabic',sans-serif;color:var(--ink)} .nx-adf figcaption span{unicode-bidi:plaintext;font:400 12px/1.4 'IBM Plex Mono',monospace;color:var(--ink-soft)} .nx-ad{box-sizing:border-box;background:#141414;color:#F7F4EF;border:1px solid rgba(247,244,239,.25);padding:10px;display:flex;flex-direction:column;justify-content:space-between;gap:6px;overflow:hidden} .nx-ad svg{width:22px;height:22px;flex:none;color:#F0561A} .nx-ad b{font:700 14px/1.45 'Noto Kufi Arabic',sans-serif} .nx-ad i{align-self:flex-start;font:700 12px/1.3 'Noto Kufi Arabic',sans-serif;font-style:normal;background:#B33508;color:#fff;padding:3px 9px;border-radius:999px;white-space:nowrap} .nx-ad.sq{width:150px;height:150px} .nx-ad.st{width:118px;height:210px;background:#B33508} .nx-ad.st svg{color:#F7F4EF} .nx-ad.st i{background:#141414} .nx-ad.ls{width:230px;height:120px} .nx-ad.mpu{width:150px;height:125px;background:#F7F4EF;color:#141414;border-color:rgba(20,20,20,.25)} .nx-ad.mpu svg{color:#E8450A} .nx-ad.sky{width:76px;height:285px;padding:8px} .nx-ad.sky b{font-size:12px} .nx-ad.sky i{padding:3px 5px;font-size:10px;white-space:normal;text-align:center} .nx-ad.lb{width:546px;max-width:100%;height:68px;flex-direction:row;align-items:center} .nx-ad.lb b{flex:1} .nx-ad.lb i{align-self:center} .nx-phone{margin:0;text-align:center} .nx-phone-screen{position:relative;width:150px;aspect-ratio:9/16;border-radius:18px;border:3px solid var(--ink);background:#141414;overflow:hidden;display:flex;flex-direction:column;box-sizing:border-box} .nx-zone{display:grid;place-items:center;color:#fff;font:600 12px/1.3 'Noto Kufi Arabic',sans-serif;text-align:center;padding:2px} .nx-zone.top{flex:0 0 14%} .nx-zone.bot{flex:0 0 20%} .nx-zone.top,.nx-zone.bot{background:repeating-linear-gradient(45deg,#8E2A06 0 6px,#B33508 6px 12px)} .nx-zone.mid{flex:1;align-content:center;gap:8px;color:#F7F4EF;border-block:1px dashed rgba(247,244,239,.5)} .nx-zone.mid svg{width:34px;height:34px;color:#F0561A} .nx-phone-screen.cover{background:linear-gradient(160deg,#B33508,#141414)} .nx-crop{position:absolute;inset-inline:0;top:50%;transform:translateY(-50%);aspect-ratio:4/5;border-block:2px dashed #F7F4EF;display:grid;place-items:center;padding:10px;box-sizing:border-box;color:#F7F4EF;font:700 13px/1.6 'Noto Kufi Arabic',sans-serif} .nx-phone figcaption{max-width:150px;margin:10px auto 0;font:400 12px/1.6 'IBM Plex Sans Arabic',sans-serif;color:var(--ink-soft)} .nx-sig{display:flex;align-items:center;gap:16px;max-width:100%;box-sizing:border-box;background:#fff;color:#141414;border:1px solid rgba(20,20,20,.15);border-radius:6px;padding:20px 22px} .nx-sig-mark{width:48px;height:48px;flex:none;color:#E8450A} .nx-sig-body{display:flex;flex-direction:column;gap:3px;min-width:0} .nx-sig-body b{font:700 15px/1.5 'Noto Kufi Arabic',sans-serif} .nx-sig-body span{font:400 12.5px/1.6 'IBM Plex Sans Arabic',sans-serif} .nx-sig-body i{display:block;width:32px;height:2px;background:#E8450A;margin:6px 0} .nx-sig-body small{font:400 12px/1.6 'IBM Plex Mono',monospace;color:#555;overflow-wrap:anywhere} .nx-chat{width:340px;max-width:100%;border-radius:14px;overflow:hidden;border:1px solid rgba(20,20,20,.2);color:#141414} .nx-chat-head{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#141414;color:#F7F4EF} .nx-chat-head b{display:block;font:700 14px/1.5 'Noto Kufi Arabic',sans-serif} .nx-chat-head small{display:block;font:400 12px/1.4 'IBM Plex Sans Arabic',sans-serif;color:rgba(247,244,239,.75)} .nx-chat-av{flex:none;width:36px;height:36px;border-radius:50%;background:#E8450A;color:#F7F4EF;display:grid;place-items:center} .nx-chat-av svg{width:22px;height:22px} .nx-chat-body{background:#E8E4DC;padding:14px;display:flex;flex-direction:column;gap:8px} .nx-bub{margin:0;max-width:86%;padding:9px 12px;border-radius:12px;font:400 13px/1.75 'IBM Plex Sans Arabic',sans-serif} .nx-bub.out{align-self:flex-end;background:#FDDDD4} .nx-bub.in{align-self:flex-start;background:#fff} .nx-bub small{display:block;font:600 12px/1.4 'IBM Plex Sans Arabic',sans-serif;color:#8E2A06;margin-bottom:2px} .nx-pillars{display:flex;border:1px solid var(--border2);border-radius:6px;overflow:hidden;margin-bottom:20px} .nx-pillars span{padding:11px 12px;font:600 12.5px/1.4 'Noto Kufi Arabic',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .nx-pillars .p1,.nx-cal-chip.p1{background:#B33508;color:#fff} .nx-pillars .p2,.nx-cal-chip.p2{background:#141414;color:#F7F4EF} .nx-pillars .p3,.nx-cal-chip.p3{background:#F7F4EF;color:#141414} .nx-pillars .p4,.nx-cal-chip.p4{background:#FDDDD4;color:#141414} .nx-cal td{min-width:118px} .nx-cal-chip{display:inline-block;padding:4px 9px;border-radius:4px;border:1px solid rgba(128,128,128,.35);font:600 12px/1.5 'Noto Kufi Arabic',sans-serif;white-space:nowrap} .nx-ink-table td{direction:ltr;text-align:right;font-family:'IBM Plex Mono','IBM Plex Sans Arabic',monospace;font-size:12.5px;white-space:nowrap} html[dir="ltr"] .nx-ink-table td{text-align:left} .nx-ink-table td i{display:inline-block;width:14px;height:14px;border-radius:50%;border:1px solid var(--border2);margin-inline-end:8px;vertical-align:-2px} .nx-print{height:170px;background:var(--surf);border-radius:6px;margin-bottom:6px;display:flex;align-items:center;justify-content:center} .nx-print.trifold>span{width:62px;height:122px;box-sizing:border-box;background:#F7F4EF;border:1px solid rgba(20,20,20,.28);padding:10px;display:flex;flex-direction:column;gap:7px} .nx-print.trifold>span:first-child{background:#B33508;color:#F7F4EF;align-items:center;justify-content:center;transform:perspective(380px) rotateY(20deg);transform-origin:right center} .nx-print.trifold>span:last-child{transform:perspective(380px) rotateY(-20deg);transform-origin:left center} .nx-print.trifold svg{width:30px;height:30px} .nx-print i{display:block;height:5px;border-radius:3px;background:rgba(20,20,20,.22)} .nx-print.trifold b{display:block;width:22px;height:22px;margin-top:auto;background:#141414} .nx-flyer{width:100px;height:140px;box-sizing:border-box;background:#F7F4EF;border:1px solid rgba(20,20,20,.28);padding:12px;display:flex;flex-direction:column;gap:7px} .nx-flyer svg{width:26px;height:26px;color:#E8450A} .nx-flyer b{display:block;height:12px;width:80%;background:#141414} .nx-flyer em{display:block;height:14px;width:50%;border-radius:999px;background:#B33508;margin-top:auto} .nx-rollup{position:relative;width:62px;height:146px;box-sizing:border-box;background:#141414;border:1px solid rgba(247,244,239,.3);padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:6px} .nx-rollup::after{content:"";position:absolute;bottom:-6px;left:-12px;right:-12px;height:5px;border-radius:2px;background:#787878} .nx-rollup svg{width:30px;height:30px;color:#F0561A} .nx-rollup b{display:block;height:8px;width:100%;background:#F7F4EF} .nx-rollup i{width:70%;height:4px;background:rgba(247,244,239,.55)} .nx-legal-line{display:flex;align-items:center;gap:16px;padding:20px 24px;margin-bottom:20px;background:var(--surf);border:1px solid var(--border2);border-radius:var(--base-radius,4px)} .nx-legal-line svg{width:36px;height:36px;flex:none;color:var(--ember)} .nx-legal-line p{margin:0;font:400 13px/1.8 'IBM Plex Mono',monospace;color:var(--ink);text-align:left} .nx-ui{background:var(--surf);border:1px dashed var(--border2);border-radius:6px;padding:14px;display:flex;flex-direction:column;gap:12px} .nx-ui p{margin:0;font:400 13px/1.8 'IBM Plex Sans Arabic',sans-serif;color:var(--ink)} .nx-ui-row{display:flex;flex-wrap:wrap;gap:8px} .nx-ui-row .nx-btn{flex:1 1 120px} .nx-check{display:flex;align-items:flex-start;gap:10px;font:400 13px/1.8 'IBM Plex Sans Arabic',sans-serif;color:var(--ink);cursor:pointer} .nx-check input{flex:none;width:18px;height:18px;margin:4px 0 0;accent-color:var(--ember)} .nx-link{font:600 13px/1.8 'IBM Plex Sans Arabic',sans-serif;color:var(--ink);text-decoration:underline;text-decoration-color:var(--ember);text-underline-offset:4px} .nx-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))} .nx-flow li{position:relative;background:var(--void);border:1px solid var(--border);margin-inline-start:-1px;padding:24px 20px;display:flex;flex-direction:column;gap:10px} .nx-flow li:first-child{margin-inline-start:0} .nx-flow-n{width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--void);display:grid;place-items:center;font:600 13px/1 'IBM Plex Mono',monospace} .nx-flow li:not(:last-child)::after{content:'';position:absolute;z-index:1;top:32px;inset-inline-end:-7px;width:12px;height:12px;background:var(--void);border-top:1px solid var(--border2);border-inline-end:1px solid var(--border2);transform:rotate(45deg)} [dir="rtl"] .nx-flow li:not(:last-child)::after{transform:rotate(-45deg)} .nx-kpi-v{direction:ltr;text-align:right;font:600 40px/1.1 'IBM Plex Mono',monospace;color:var(--ink)} html[dir="ltr"] .nx-kpi-v{text-align:left} .nx-kpi small{font:400 12px/1.6 'IBM Plex Sans Arabic',sans-serif;color:var(--ink-soft)} .nx-score{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px;align-items:start} .nx-score-rows{background:var(--void);border:1px solid var(--border)} .nx-score-row{display:grid;grid-template-columns:minmax(0,1fr) 140px 28px;gap:14px;align-items:center;padding:14px 18px;border-top:1px solid var(--border);cursor:pointer} .nx-score-row:first-child{border-top:0} .nx-score-row span{font:400 13.5px/1.7 'IBM Plex Sans Arabic',sans-serif;color:var(--ink)} .nx-score-row input{width:100%;accent-color:var(--ember);min-height:28px} .nx-score-row output{font:600 15px/1 'IBM Plex Mono',monospace;color:var(--ember);text-align:center} .nx-score-result{background:var(--ink);color:var(--void);padding:28px;border-radius:var(--base-radius,4px);display:flex;flex-direction:column;gap:12px} .nx-score-pct{font:600 56px/1 'IBM Plex Mono',monospace} .nx-score-result .nx-bar{background:rgba(128,128,128,.4)} .nx-score-verdict{display:none;margin:4px 0 0;font:400 14px/1.8 'IBM Plex Sans Arabic',sans-serif;color:var(--void)} .nx-score-verdict.on{display:block} @media(max-width:1000px){ .nx-vmv{grid-template-columns:minmax(0,1fr)} .nx-flow{grid-template-columns:minmax(0,1fr)} .nx-flow li{margin-inline-start:0;margin-top:-1px} .nx-flow li::after{display:none}}@media(max-width:900px){ .nx-split{grid-template-columns:minmax(0,1fr);gap:24px} .nx-score{grid-template-columns:minmax(0,1fr)}}@media(max-width:700px){ .nx-vocab,.nx-menu-cols{grid-template-columns:minmax(0,1fr)} .nx-menu{padding:24px 18px} .nx-lead{margin-top:-12px;font-size:14px}}@media(max-width:600px){ .nx-journey-curve{display:none} .nx-journey-steps{grid-template-columns:minmax(0,1fr);min-width:0} .nx-vocab-row{grid-template-columns:minmax(0,1fr);gap:2px} .nx-score-row{grid-template-columns:minmax(0,1fr) 28px} .nx-score-row span{grid-column:1/-1} .nx-pillars{flex-direction:column} .nx-pillars span{flex:none!important} .nx-stage{padding:20px 12px;gap:18px} .nx-legal-line{flex-direction:column;align-items:flex-start;padding:16px} .nx-ads{gap:18px} .nx-quote{font-size:18px} .nx-kpi-v{font-size:34px}}body.theme-dark .cc-rating-badge.pass{color:#5fd081} body.theme-dark .cc-rating-badge.fail{color:#ff8a89} .nx-table td,.nx-table th{overflow-wrap:normal;word-break:normal}