/* font-display:optional + preload: the hero never reflows when a web font arrives late (measured CLS 0.13 with swap). */
@font-face{font-family:Tajawal;src:url('/fonts/tajawal-400-arabic.woff2') format('woff2');font-weight:400;font-display:optional;unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Tajawal;src:url('/fonts/tajawal-700-arabic.woff2') format('woff2');font-weight:700;font-display:optional;unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Tajawal;src:url('/fonts/tajawal-800-arabic.woff2') format('woff2');font-weight:800;font-display:optional;unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Geist;src:url('/fonts/geist-latin.woff2') format('woff2');font-weight:100 900;font-display:optional}
:root{--bg-base:#050810;--bg-1:#0b1628;--bg-2:#0f1d33;--text-0:#f3f7fc;--text-1:#d9e5f3;--text-2:#9fb5cf;--accent:#38bdf8;--on-accent:#05111f;--line:#263d58;--warm:#ebc594;--success:#68deb2;--font-ar:Tajawal,Arial,Tahoma,sans-serif;--font-en:Geist,Tajawal,Arial,Tahoma,sans-serif;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-block-start:24px}body{margin:0;background:var(--bg-base);color:var(--text-0);font-family:var(--font-ar);font-size:17px;line-height:1.8}html[lang=en] body{font-family:var(--font-en);font-size:15px;line-height:1.75}button,a{touch-action:manipulation;-webkit-tap-highlight-color:#38bdf833}button{font:inherit}a{color:inherit;text-decoration:none}a:hover{color:var(--accent)}button{cursor:pointer}button:disabled{cursor:wait}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:5px;border-radius:6px}h1,h2,h3,p,figure,dl,dd{margin:0}h1,h2,h3{text-wrap:balance;line-height:1.4}p{text-wrap:pretty}h1,h2{font-weight:800}img{max-inline-size:100%;block-size:auto;display:block}.wrap{max-inline-size:1160px;margin-inline:auto;padding-inline:32px}.icon{inline-size:20px;block-size:20px;flex-shrink:0}html[dir=rtl] .directional{transform:scaleX(-1)}.skip{position:fixed;inset-block-start:-100px;inset-inline-start:16px;z-index:50;background:var(--text-0);color:var(--bg-base);padding:12px 20px}.skip:focus{inset-block-start:10px}.site-header{display:flex;align-items:center;justify-content:space-between;min-block-size:96px;border-block-end:1px solid var(--line);gap:24px}.brand{inline-size:152px;flex-shrink:0}.brand img{border-radius:5px}.site-header nav{display:flex;align-items:center;gap:28px;font-size:15px;color:var(--text-1)}.language{border-inline-start:1px solid var(--line);padding-inline-start:24px;font-family:var(--font-en)}.hero{display:grid;grid-template-columns:1.13fr .87fr;column-gap:64px;row-gap:28px;padding-block:64px 56px;align-items:start}.hero-copy{padding-block-start:8px}.eyebrow{color:var(--accent);font-size:15px;font-weight:700;display:flex;align-items:center;gap:10px}.little-line{inline-size:24px;block-size:2px;background:var(--accent)}h1{font-size:clamp(38px,4.2vw,59px);margin-block:18px 20px;line-height:1.32}h1 span{color:var(--accent)}.intro{font-size:19px;color:var(--text-1);max-inline-size:560px;line-height:1.9}.quick-facts{list-style:none;padding:0;margin-block:24px 0;display:flex;flex-wrap:wrap;gap:10px 19px;font-size:14px;color:var(--text-1)}.quick-facts li{display:flex;align-items:center;gap:6px}.quick-facts .icon{color:var(--accent);inline-size:16px;block-size:16px}.offer{background:var(--bg-1);border:1px solid #346485;border-block-start:3px solid var(--accent);border-radius:20px;padding:26px 28px;grid-column:2;grid-row:1 / span 2;box-shadow:0 24px 64px #00000033;scroll-margin-block-start:24px}.offer-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.lifetime{border:1px solid var(--line);border-radius:100px;padding:2px 12px;font-size:12px;color:var(--text-1)}.offer h2{font-size:24px;margin-block:12px 14px}.price-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.money{display:inline-flex;align-items:baseline;gap:8px;font-family:var(--font-en);line-height:1.45;white-space:nowrap}.money bdi{font-size:48px;font-weight:700;font-variant-numeric:tabular-nums}.money span{font-size:16px;font-family:var(--font-ar)}html[lang=en] .money span{font-family:var(--font-en)}.price-row p{font-size:14px;color:var(--text-1);max-inline-size:112px}.price-status{font-size:14px;color:var(--warm)}.price-status:empty{display:none}.button{min-block-size:50px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:10px 20px;border-radius:10px;font-weight:800;font-size:17px;transition:background-color .16s,color .16s,border-color .16s;line-height:1.55;text-align:center}.button.primary{background:var(--accent);color:var(--on-accent);border:1px solid var(--accent)}.button.primary:hover{background:#79d7ff;border-color:#79d7ff;color:var(--on-accent)}.offer>.button{display:flex;inline-size:100%;margin-block-start:14px}.button.secondary{background:transparent;border:1px solid #4a647f;color:var(--text-0)}.button.secondary:hover{border-color:var(--accent);background:var(--bg-2)}.guarantee{display:flex;justify-content:center;align-items:center;gap:7px;font-size:14px;color:var(--text-1);margin-block-start:12px}.guarantee .icon{color:var(--success);inline-size:17px;block-size:17px}.secondary-actions{display:grid;gap:10px;margin-block-start:20px;padding-block-start:20px;border-block-start:1px solid var(--line)}.text-link{display:inline-flex;align-items:center;justify-content:center;min-block-size:44px;color:var(--text-1);text-decoration:underline;text-underline-offset:5px;font-size:15px}.small{font-size:13px;line-height:1.8;color:var(--text-2)}.free-note{margin-block-start:2px}.purchase-note{margin-block-start:12px}.artwork{display:flex;align-items:center;gap:22px;grid-column:1;max-inline-size:550px}.artwork-button{border:1px solid #9c7a56;border-radius:12px;background:#091325;padding:0;inline-size:184px;flex-shrink:0;position:relative;overflow:hidden}.artwork-button img{inline-size:100%;aspect-ratio:1;object-fit:contain}.zoom-hint{position:absolute;inset-block-end:6px;inset-inline-end:6px;background:#050810e8;border-radius:6px;display:flex;padding:5px;color:white}.zoom-hint .icon{inline-size:15px;block-size:15px}figcaption{font-size:14px;color:var(--text-2);line-height:1.8}figcaption strong{color:var(--warm);font-size:18px;font-weight:700}figcaption p{margin-block-start:7px}.artwork-caption{display:flex;align-items:center;gap:6px;margin-block-start:10px;font-size:12px;color:var(--text-1)}.artwork-caption .icon{inline-size:13px;block-size:13px}.how-section{background:var(--bg-1);border-block:1px solid var(--line);padding-block:48px}.section-heading{max-inline-size:700px}.section-heading h2,.faq h2{font-size:34px;margin-block:8px 12px}.section-heading>p:last-child{color:var(--text-2)}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;padding:0;list-style:none;margin-block:32px 0}.steps li{border-block-start:1px solid var(--line);padding-block-start:18px}.step-no{font-family:var(--font-en);font-size:13px;color:var(--accent)}.steps h3{font-size:22px;margin-block:8px}.steps p{font-size:15px;color:var(--text-1)}.examples{display:grid;grid-template-columns:150px 1fr;gap:24px;border-block-start:1px solid var(--line);margin-block-start:30px;padding-block-start:24px}.examples>.eyebrow{align-self:start}.example-list{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.example-list strong{font-size:16px;color:var(--warm);display:block}.example-list span{font-size:13px;line-height:1.8;color:var(--text-2);display:block;margin-block-start:3px}.included{padding-block:56px 40px}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-block-start:30px}.feature-group{min-inline-size:0}.feature-group h3{font-size:21px;margin-block-end:18px;padding-block-end:12px;border-block-end:1px solid var(--line)}.feature-group dl>div{margin-block-end:16px}.feature-group dt{font-size:17px;font-weight:700;display:flex;gap:8px;align-items:center}.feature-group dt .icon{inline-size:16px;block-size:16px;color:var(--accent)}.feature-group dd{font-size:14px;color:var(--text-2);padding-inline-start:24px}.catalogue{margin-block-start:14px;background:var(--bg-1);padding-inline:20px;border:1px solid var(--line);border-radius:12px}summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-block-size:58px;padding-block:12px;cursor:pointer;font-weight:700}summary::-webkit-details-marker{display:none}summary .icon{transition:transform .16s}details[open]>summary .icon{transform:rotate(45deg)}.catalogue ul{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 18px;list-style:none;padding:12px 0;margin:0;border-block-start:1px solid var(--line);font-size:14px;color:var(--text-1)}.catalogue li{padding-block:4px}.catalogue>p{padding-block:6px 18px}.common-note{margin-block-start:16px}.faq{padding-block:12px 40px;display:grid;grid-template-columns:1fr 2fr;gap:40px}.faq h2{font-size:28px}.faq details{border-block-end:1px solid var(--line)}.faq details p{color:var(--text-2);font-size:15px;padding-block:0 20px;max-inline-size:700px}.faq summary{font-size:17px}.final{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;padding-block:32px 44px;border-block-start:1px solid var(--line);align-items:center}.final h2{font-size:32px;margin-block:6px 12px}.final p:not(.eyebrow){color:var(--text-2)}.final-action{display:grid;gap:10px}.final-price{display:flex;align-items:center;justify-content:space-between;gap:16px}.final-price>.money bdi{font-size:32px}.final-price>span:last-child{font-size:13px;color:var(--text-2)}footer{display:flex;justify-content:space-between;align-items:center;gap:20px;border-block-start:1px solid var(--line);padding-block:24px 30px;font-size:13px;color:var(--text-2)}footer nav{display:flex;gap:20px;flex-wrap:wrap}footer a{min-block-size:44px;display:flex;align-items:center}.mobile-purchase{display:none}dialog{border:1px solid var(--line);border-radius:16px;background:var(--bg-1);color:var(--text-0);padding:14px;max-inline-size:min(94vw,900px);max-block-size:94dvh;overflow:auto;overscroll-behavior:contain}dialog::backdrop{background:#000d}dialog>img{max-block-size:78dvh;inline-size:auto;margin-inline:auto;object-fit:contain}dialog p{font-size:13px;color:var(--text-1);padding:12px 6px 0}dialog .dialog-close{position:sticky;inset-block-start:0;display:flex;align-items:center;justify-content:center;inline-size:44px;block-size:44px;background:var(--bg-2);border:1px solid #587393;color:var(--text-0);border-radius:50%;margin-block-end:10px;margin-inline-start:auto}.dialog-open{overflow:hidden}
@media(max-width:1000px){.hero{column-gap:32px}.wrap{padding-inline:24px}.hero-copy h1{font-size:45px}.offer{padding:22px}.examples{grid-template-columns:1fr}.features{gap:22px}.feature-group h3{font-size:19px}}
@media(max-width:700px){body{font-size:16px}.wrap{padding-inline:20px}.site-header{min-block-size:76px;gap:14px}.brand{inline-size:112px}.site-header nav{gap:15px;font-size:13px}.site-header nav>a:first-child{display:none}.language{padding-inline-start:14px}.hero{grid-template-columns:1fr;gap:24px;padding-block:28px 32px}.hero-copy{padding:0}.eyebrow{font-size:13px}.hero-copy h1{font-size:38px;margin-block:12px 12px}.intro{font-size:16px;line-height:1.85}.quick-facts{font-size:12px;gap:7px 12px;margin-block-start:14px}.quick-facts .icon{inline-size:13px;block-size:13px}.offer{grid-column:auto;grid-row:auto;padding:20px;border-radius:16px}.offer h2{font-size:22px;margin-block:10px}.price-row{justify-content:space-between;gap:10px}.money bdi{font-size:42px}.price-row p{max-inline-size:none;font-size:12px}.button{font-size:16px;min-block-size:48px}.guarantee{font-size:12px;gap:5px}.secondary-actions{margin-block-start:16px;padding-block-start:16px;gap:4px}.small{font-size:12px}.artwork{gap:16px;grid-column:auto}.artwork-button{inline-size:112px;border-radius:8px}.artwork figcaption{font-size:12px}.artwork figcaption strong{font-size:16px}.artwork-caption{margin-block-start:5px}.how-section{padding-block:32px}.section-heading h2{font-size:27px}.section-heading>p:last-child{font-size:15px}.steps{grid-template-columns:1fr;gap:18px;margin-block-start:24px}.steps li{display:grid;grid-template-columns:32px 1fr;column-gap:12px;padding-block-start:15px}.step-no{grid-row:1 / span 2;padding-block-start:3px}.steps h3{font-size:20px;margin:0}.steps p{font-size:14px;margin-block-start:4px}.examples{gap:14px;margin-block-start:24px;padding-block-start:20px}.example-list{grid-template-columns:1fr;gap:14px}.example-list p{display:grid;grid-template-columns:110px 1fr;gap:12px}.example-list strong{font-size:15px}.example-list span{font-size:12px;margin:0}.included{padding-block:32px 28px}.features{grid-template-columns:1fr;gap:20px;margin-block-start:24px}.feature-group h3{font-size:20px;margin-block-end:12px}.feature-group dl{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px}.feature-group dl>div{margin:0}.feature-group dt{font-size:15px;align-items:flex-start;line-height:1.7}.feature-group dt .icon{margin-block-start:4px;inline-size:13px;block-size:13px}.feature-group dd{font-size:12px;padding-inline-start:21px}.catalogue{margin-block-start:24px;padding-inline:16px}.catalogue summary{font-size:14px}.catalogue ul{grid-template-columns:repeat(2,1fr);gap:5px 16px;font-size:12px}.faq{grid-template-columns:1fr;gap:8px;padding-block:0 32px}.faq h2{font-size:25px;margin-block:4px 8px}.faq summary{font-size:15px;min-block-size:62px;line-height:1.7}.faq details p{font-size:14px}.final{grid-template-columns:1fr;gap:20px;padding-block:28px 24px}.final h2{font-size:27px}.final p:not(.eyebrow){font-size:15px}.final-action{gap:10px}.final-price>.money bdi{font-size:32px}footer{display:block;padding-block:20px 110px}footer nav{gap:0 18px;margin-block-start:6px;font-size:12px}.mobile-purchase:not([hidden]){position:fixed;inset-block-end:0;inset-inline:0;z-index:12;padding:10px 16px calc(10px + env(safe-area-inset-bottom));border-block-start:1px solid #42617e;background:#0b1628;display:flex;align-items:center;justify-content:space-between;gap:16px;box-shadow:0 -8px 30px #0005}.mobile-purchase>div{display:grid;font-size:11px;line-height:1.6}.mobile-purchase .money bdi{font-size:24px;letter-spacing:0}.mobile-purchase .money span{font-size:12px}.mobile-purchase .button{font-size:14px;min-block-size:46px;padding-inline:14px}.mobile-purchase .icon{inline-size:16px;block-size:16px}.mobile-purchase .money{gap:5px}.mobile-purchase .money bdi{line-height:1.45}html[lang=en] .hero-copy h1{font-size:35px}html[lang=en] .intro{font-size:15px}html[lang=en] .quick-facts{font-size:11px}html[lang=en] .feature-group dt{font-size:13px}html[lang=en] .feature-group dd{font-size:12px}html[lang=en] .button{font-size:14px}}
@media(max-width:370px){.wrap{padding-inline:16px}.hero-copy h1{font-size:35px}.site-header nav{gap:12px}.offer{padding:18px}.money bdi{font-size:38px}.quick-facts{column-gap:9px}.guarantee{font-size:11px}.feature-group dl{gap:12px}.artwork-button{inline-size:104px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:0s!important;animation:none!important}}
@media(prefers-color-scheme:light){html:not([data-theme=dark]){color-scheme:light}}

/* Final typography and phone composition: keep product image, price and CTA together. */
.mobile-artwork{display:none}
@media(min-width:701px){.hero{padding-block-start:48px}.artwork-button{inline-size:160px}}
@media(max-width:700px){.offer{position:relative}.offer-top{padding-inline-end:92px;min-block-size:28px}.offer-top .lifetime{display:none}.offer h2{padding-inline-end:96px;min-block-size:63px;font-size:19px;max-inline-size:none;margin-block:6px 14px}.mobile-artwork{display:block;position:absolute;inset-inline-end:20px;inset-block-start:20px;inline-size:80px;border:1px solid #9c7a56;border-radius:8px;overflow:hidden;padding:0;background:#0b1628}.mobile-artwork img{inline-size:100%;block-size:auto}.price-row{flex-wrap:nowrap}.price-row p{max-inline-size:118px;line-height:1.8}.artwork{display:none}.hero{row-gap:20px}.hero-copy h1{font-size:36px}.quick-facts{gap:5px 10px}.offer .purchase-note::after{content:""}}

.mobile-enlarge{display:flex;align-items:center;justify-content:center;gap:4px;min-block-size:20px;font-size:10px;color:#f3f7fc;background:#0b1628}.mobile-enlarge .icon{inline-size:11px;block-size:11px}a,button,summary{scroll-margin-block:24px 110px}html[data-price-state=unavailable] .money bdi{font-size:20px;letter-spacing:0}html[data-price-state=unavailable] .money>span{display:none}

.price-stack{display:inline-flex;flex-direction:column;align-items:flex-start}.regular-price{font-size:16px;line-height:1.6;color:var(--text-2);text-decoration-thickness:2px;text-decoration-color:var(--text-2)}.offer-window{font-size:14px;line-height:1.8;color:var(--warm);margin-block-start:10px}.offer-name{font-weight:800}.offer-start{font-size:13px;line-height:1.7;color:var(--text-1);margin:2px 0 0}.offer-deadline{font-size:13px;color:var(--text-1);font-variant-numeric:tabular-nums;text-align:start}.offer-deadline:empty{display:none}.mobile-purchase .regular-price{font-size:11px}.final-price .price-stack .money bdi{font-size:32px}@media(max-width:700px){.offer-window{font-size:12px;margin-block-start:6px}.regular-price{font-size:14px}.mobile-purchase .regular-price{font-size:10px;line-height:1.3}.mobile-purchase .price-stack .money bdi{font-size:22px}}

.portable{display:flex;align-items:center;gap:20px;padding-block:24px 28px;border-block-start:1px solid var(--line)}.portable h2{font-size:26px;line-height:1.4}.portable p{color:var(--text-1);font-size:16px;margin-block-start:5px;line-height:1.8}.portable-mark{display:flex;align-items:center;justify-content:center;flex-shrink:0;inline-size:44px;block-size:44px;border:1px solid #346485;border-radius:12px;background:var(--bg-1);color:var(--accent)}.portable-mark .icon{inline-size:23px;block-size:23px}@media(max-width:700px){.portable{gap:12px;padding-block:20px 24px}.portable h2{font-size:21px}.portable p{font-size:13px}.portable-mark{inline-size:34px;block-size:34px;border-radius:9px}.portable-mark .icon{inline-size:18px;block-size:18px}}

/* The shared consent banner (cookie-consent.js) writes both languages; show the page's own. */
html[lang=ar] .en-text,html[lang=en] .ar-text{display:none}
.demo{display:grid;grid-template-columns:1fr minmax(0,320px);gap:40px;align-items:center;padding-block:8px 48px}.demo h2{font-size:32px;margin-block:8px 12px}.demo-copy>p:not(.eyebrow){color:var(--text-1)}.demo-copy>p.demo-note{margin-block-start:12px;font-size:14px;color:var(--text-2)}.demo-links{margin-block-start:8px}
.demo-frame{position:relative;inline-size:100%;max-inline-size:320px;aspect-ratio:9/16;border-radius:16px;overflow:hidden;border:1px solid #346485;background:#050810;justify-self:center}.demo-frame iframe{position:absolute;inset:0;inline-size:100%;block-size:100%;border:0}
.demo-play{position:absolute;inset:0;inline-size:100%;block-size:100%;padding:0;border:0;background:#050810;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.demo-play img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;opacity:.72}.demo-play-icon{position:relative;display:flex;align-items:center;justify-content:center;inline-size:72px;block-size:72px;border-radius:50%;background:var(--accent);color:var(--on-accent);box-shadow:0 10px 30px #0008}.demo-play-label{position:relative;font-weight:800;background:#050810cc;padding:4px 14px;border-radius:100px}.demo-play:hover .demo-play-icon{background:#79d7ff}
@media(max-width:700px){.demo-copy>p.demo-note{font-size:13px}.demo{grid-template-columns:1fr;gap:18px;padding-block:4px 32px}.demo h2{font-size:26px}.demo-frame{max-inline-size:300px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.demo-frame video{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:contain;background:#050810}

/* v4 — depth, card objects and scroll reveal. Content is visible by default: only hgu-landing.js adds html.rv, and only below-the-fold items wait for the viewport. */
:root{--card-line:#22405e;--rose:#f9a8c8;--ease:cubic-bezier(.22,1,.36,1)}
html,body{overflow-x:clip}
body{background:radial-gradient(1100px 620px at 88% -8%,#0d2a48 0,transparent 62%),radial-gradient(800px 520px at 6% 34%,#1d1a12 0,transparent 58%),var(--bg-base);background-repeat:no-repeat}
::selection{background:#38bdf8;color:#05111f}
.hero{position:relative;isolation:isolate}.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,#38bdf81c,transparent) 78% 18%/560px 560px no-repeat,radial-gradient(closest-side,#ebc59414,transparent) 18% 80%/440px 440px no-repeat;animation:hgu-drift 16s ease-in-out infinite alternate}
@keyframes hgu-drift{to{transform:translate3d(0,22px,0) scale(1.05)}}
.offer{background:linear-gradient(180deg,#10223d,#0b1628 46%);box-shadow:0 0 0 1px #38bdf81f,0 30px 80px -24px #38bdf833,0 24px 64px #0005}
.button{transition:background-color .16s,color .16s,border-color .16s,transform .25s var(--ease),box-shadow .25s var(--ease)}.button.primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px -10px #38bdf8b3}.button.secondary:hover{transform:translateY(-2px)}.button:active{transform:translateY(0) scale(.98)}
.demo-frame{border:6px solid #15263e;border-radius:30px;box-shadow:0 0 0 1px #346485,0 34px 80px -24px #000d,0 0 90px -30px #38bdf866}
/* Games ribbon: decorative (aria-hidden); the accessible list is the catalogue below. */
.ribbon{overflow:hidden;padding-block:16px;border-block:1px solid var(--line);background:#07101ecc;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ribbon-track{display:flex;inline-size:max-content;list-style:none;margin:0;padding:0;animation:hgu-marquee 70s linear infinite}.ribbon:hover .ribbon-track{animation-play-state:paused}
.ribbon li{white-space:nowrap;margin-inline-end:12px;padding:6px 16px;border-radius:999px;border:1px solid var(--card-line);background:#0f1d33;color:var(--text-1);font-size:15px;font-weight:700}.ribbon li:nth-child(3n+1){color:var(--accent);border-color:#2b5a7d}.ribbon li:nth-child(3n+2){color:var(--warm);border-color:#5c4a33}
@keyframes hgu-marquee{to{transform:translateX(-50%)}}html[dir=rtl] .ribbon-track{animation-name:hgu-marquee-rtl}@keyframes hgu-marquee-rtl{to{transform:translateX(50%)}}
/* What is Hajjah: three pillars */
.portable{display:block;padding-block:56px 60px;border:0}.portable-head{max-inline-size:700px}.portable-head h2{font-size:34px;margin-block:8px 10px}
.pillars{list-style:none;padding:0;margin:30px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pillar{background:linear-gradient(180deg,#0f1d33,#0b1628);border:1px solid var(--card-line);border-radius:22px;padding:26px;transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}.pillar:hover{transform:translateY(-4px);border-color:#38bdf8;box-shadow:0 20px 44px -22px #38bdf88c}
.pillar-icon{display:inline-flex;align-items:center;justify-content:center;inline-size:52px;block-size:52px;border-radius:16px;background:#38bdf81a;color:var(--accent);margin-block-end:16px}.pillar-icon .icon{inline-size:26px;block-size:26px}
.pillar h3{font-size:21px}.portable .pillar p{color:var(--text-1);font-size:15px;margin-block-start:6px}
/* How: step cards and game cards */
.how-section{padding-block:60px;background:linear-gradient(180deg,#0b1628,#081221)}
.steps{gap:20px}.steps li{background:#0f1d33;border:1px solid var(--card-line);border-radius:22px;padding:24px}
.step-no{display:inline-flex;align-items:center;justify-content:center;inline-size:44px;block-size:44px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-weight:800;font-size:15px}
.steps h3{margin-block:14px 6px}
.examples{display:block;border:0;padding:0;margin-block-start:44px}.examples>.eyebrow{margin-block-end:16px}
.example-list{gap:20px}
.game-card{--tone:var(--accent);position:relative;overflow:hidden;background:#0f1d33;border:1px solid var(--card-line);border-radius:22px;padding:24px;transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}.game-card[data-tone=warm]{--tone:var(--warm)}.game-card[data-tone=rose]{--tone:var(--rose)}
.game-card::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;block-size:3px;background:var(--tone)}
.game-card:hover{transform:translateY(-6px);border-color:var(--tone);box-shadow:0 22px 44px -22px var(--tone)}
.example-list .game-icon{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;inline-size:46px;block-size:46px;border-radius:14px;color:var(--tone);background:color-mix(in srgb,var(--tone) 14%,transparent);margin:0}.game-icon .icon{inline-size:24px;block-size:24px;transition:transform .45s var(--ease)}.game-card:hover .game-icon .icon{transform:scale(1.15) rotate(-8deg)}
.example-list .game-tag{display:inline-block;vertical-align:middle;margin:0;margin-inline-start:12px;font-size:14px;font-weight:700;color:var(--tone)}
.game-card h3{font-size:23px;margin-block:16px 6px}.example-list .game-card p{display:block;font-size:15px;line-height:1.85;color:var(--text-1)}
/* Included, FAQ and final as objects */
.included{padding-block:64px 44px}.features{gap:20px}.feature-group{background:linear-gradient(180deg,#0f1d33,#0b1628);border:1px solid var(--card-line);border-radius:22px;padding:26px}.feature-group h3{border-color:var(--card-line)}
.faq{padding-block:24px 48px}.faq details{background:#0b1628;border:1px solid var(--card-line);border-radius:16px;padding-inline:20px;margin-block-end:10px;transition:border-color .2s}.faq details[open]{border-color:#346485}
.final{background:radial-gradient(620px 320px at 85% 0,#38bdf826,transparent 70%),#0b1628;border:1px solid #346485;border-radius:28px;padding:44px;margin-block:24px 56px;box-shadow:0 30px 80px -30px #38bdf840}
@media(max-width:1220px){.final{margin-inline:24px}}
/* Reveal: transform and opacity only (no layout, so CLS stays 0). JS removes data-reveal once shown, so hover transitions return to normal. */
html.rv [data-reveal]{opacity:0;transform:translate3d(0,24px,0);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0)*90ms)}html.rv [data-reveal].is-in{opacity:1;transform:none}
@media print{html.rv [data-reveal]{opacity:1;transform:none}}
@media(max-width:1000px){.pillars{gap:14px}.pillar{padding:20px}}
@media(max-width:700px){.portable{padding-block:36px 40px}.portable-head h2{font-size:25px}.pillars{grid-template-columns:1fr;gap:12px;margin-block-start:22px}.pillar{display:grid;grid-template-columns:44px 1fr;column-gap:14px;padding:18px;border-radius:18px}.pillar-icon{grid-row:1 / span 2;inline-size:44px;block-size:44px;border-radius:13px;margin:0}.pillar-icon .icon{inline-size:22px;block-size:22px}.pillar h3{font-size:17px}.portable .pillar p{font-size:14px;margin-block-start:2px}
.ribbon{padding-block:12px}.ribbon li{font-size:13px;padding:4px 12px;margin-inline-end:8px}
.how-section{padding-block:40px}.steps{gap:12px}.steps li{grid-template-columns:44px 1fr;padding:16px;border-radius:18px}.step-no{padding:0;inline-size:38px;block-size:38px;font-size:13px}.steps h3{margin:0}
.examples{margin-block-start:30px}.example-list{gap:12px}.game-card{padding:18px;border-radius:18px}.game-card h3{font-size:19px;margin-block:12px 4px}.example-list .game-card p{font-size:14px}.example-list .game-icon{inline-size:40px;block-size:40px;border-radius:12px}.example-list .game-tag{font-size:13px}
.included{padding-block:40px 32px}.feature-group{padding:18px;border-radius:18px}.faq details{padding-inline:16px}
.final{margin-inline:16px;padding:26px 20px;border-radius:22px;margin-block:16px 32px}.demo-frame{border-width:5px;border-radius:26px}}
/* v6 — punch lines between sections: one short line each, the key phrase in the accent colour. */
.punch{text-align:center;font-size:clamp(28px,3.6vw,44px);font-weight:800;line-height:1.5;color:var(--text-0);padding-block:64px;max-inline-size:960px;text-wrap:balance}.punch span{color:var(--accent)}
.punch::before{content:"";display:block;inline-size:56px;block-size:3px;border-radius:3px;background:var(--warm);margin:0 auto 22px}
@media(max-width:700px){.punch{font-size:24px;padding-block:40px;line-height:1.6}.punch::before{inline-size:40px;margin-block-end:16px}}
/* v8 — compact purchase box under the 2nd and 3rd punch lines, so the offer is one tap away mid-page. */
.punch-cta{padding-block:64px;display:grid;justify-items:center;gap:26px}.punch-cta .punch{padding-block:0}
.mini-offer{inline-size:100%;max-inline-size:720px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px 24px;background:var(--bg-1);border:1px solid #346485;border-block-start:3px solid var(--accent);border-radius:16px;padding:16px 22px}
.mini-offer .money bdi{font-size:34px}.mini-offer .regular-price{font-size:14px}.mini-copy{display:grid;gap:2px}.mini-terms{font-size:14px;line-height:1.7;color:var(--warm)}.mini-offer .guarantee{justify-content:flex-start;margin:0;font-size:13px}.mini-offer .button{min-inline-size:210px}
@media(max-width:700px){.punch-cta{padding-block:40px;gap:18px}.mini-offer{grid-template-columns:auto 1fr;padding:14px 16px;gap:10px 14px}.mini-offer .money bdi{font-size:30px}.mini-copy{grid-row:2;grid-column:1 / -1}.mini-offer .button{min-inline-size:0;font-size:14px;padding-inline:12px;gap:6px;white-space:nowrap;justify-self:end}.mini-terms{font-size:13px}.mini-offer .guarantee{font-size:12px}}