/* Digital Gurus. Tokens from the web style sheet approved 9 Nov 2026. */
@font-face{font-family:"Alexandria";src:url(/fonts/alexandria-arabic.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"Alexandria";src:url(/fonts/alexandria-latin.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF}
@font-face{font-family:"Montserrat";src:url(/fonts/montserrat-latin.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF}

:root{
  --red:#B00426;--on-red:#FFFFFF;
  --bg:#FFFFFF;--surface:#F5F5F7;--text:#231F20;--muted:#6E6E73;--faint:#C9C9CE;--line:#E3E3E6;--red-text:#B00426;--bubble:#ECECEF;
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(20px,5vw,64px);
  --h-xl:clamp(56px,15.5vw,132px);
  --h-l:clamp(40px,7.4vw,96px);
  --lead:clamp(19px,2.2vw,26px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#121011;--surface:#1D1B1C;--text:#F5F5F7;--muted:#A1A1A6;--faint:#4A4748;--line:#2E2B2C;--red-text:#FF4D63;--bubble:#2A2728;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#121011;--surface:#1D1B1C;--text:#F5F5F7;--muted:#A1A1A6;--faint:#4A4748;--line:#2E2B2C;--red-text:#FF4D63;--bubble:#2A2728;color-scheme:dark}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-gutter:stable}
body{background:var(--bg);color:var(--text);font-family:"Alexandria",-apple-system,"SF Arabic",system-ui,sans-serif;font-size:17px;line-height:1.85;transition:background-color .4s var(--ease),color .4s var(--ease)}
a{color:inherit}
h1,h2{font-weight:800;line-height:1.32;text-wrap:balance}
.lead{font-size:var(--lead);line-height:1.85;color:var(--muted);text-wrap:pretty;max-width:34ch}
.eyebrow{font-size:15px;font-weight:500;color:var(--red-text);margin-bottom:18px}
.red{color:var(--red-text)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;top:-60px;right:16px;background:var(--text);color:var(--bg);padding:10px 16px;border-radius:999px;z-index:20}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--red-text);outline-offset:3px;border-radius:8px}

/* Wordmark, set in Montserrat like the 2023 logo */
.mark{display:inline-flex;flex-direction:column;align-items:flex-start;text-decoration:none;font-family:"Montserrat",sans-serif;line-height:1.02;direction:ltr}
.mark .d{font-weight:400;letter-spacing:.42em;font-size:12px;margin-right:-.42em}
.mark .g{font-weight:900;letter-spacing:.36em;font-size:16px;margin-right:-.36em}

/* Arabic logo: the 2023 card's own letter shapes (vector from the PDF), coloured by CSS */
.ar-logo{display:block;aspect-ratio:51/27.5;background:currentColor;-webkit-mask:url(/logo-ar.svg) center/contain no-repeat;mask:url(/logo-ar.svg) center/contain no-repeat}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--text);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .top:not(.scrolled) .brand{opacity:0;transform:translateY(-6px);pointer-events:none}
.brand .ar-logo{height:34px}
.brand .sep{width:1px;height:28px;background:var(--line)}
.hero-logo{height:clamp(56px,9vw,84px);color:var(--red-text);margin-bottom:36px}

/* Header */
.top{position:fixed;inset:0 0 auto 0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:14px max(var(--pad),calc((100% - 1200px) / 2));padding-top:max(14px,env(safe-area-inset-top));background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);border-bottom:1px solid transparent;transition:border-color .3s}
.top.scrolled{border-bottom-color:var(--line)}
.theme{width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:var(--text);cursor:pointer;display:grid;place-items:center}
.theme span{width:18px;height:18px;border-radius:50%;border:1.5px solid currentColor;background:linear-gradient(90deg,currentColor 50%,transparent 50%);transition:transform .6s var(--ease)}
:root[data-theme="dark"] .theme span{transform:rotate(180deg)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 30px;border-radius:999px;font:600 18px/1 "Alexandria",system-ui,sans-serif;text-decoration:none;transition:transform .5s var(--ease),background-color .3s}
.btn:active{transform:scale(.96)}
.btn.primary{background:var(--red);color:var(--on-red)}
.btn.invert{background:#FFFFFF;color:#B00426}
.wa{width:22px;height:22px;flex:none}

/* Hero */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:110px var(--pad) 72px;max-width:calc(1200px + 2 * var(--pad));margin:0 auto}
.hero h1{font-size:var(--h-xl);line-height:1.25;margin-bottom:32px}
.hero h1 span{display:block}
.hero h1 .b{color:var(--faint)}
.strike{position:relative;display:inline-block}
.strike::after{content:"";position:absolute;right:-2%;left:-2%;top:56%;height:.07em;background:var(--red);border-radius:99px;transform-origin:right;transform:scaleX(1)}
.js .strike::after{transform:scaleX(0);animation:strike 1s .5s var(--ease) forwards}
@keyframes strike{to{transform:scaleX(1)}}
.hero .lead{margin-bottom:40px}

/* Scenes: a tall section with a sticky stage that plays while you scroll */
[data-scene]{position:relative}
.js [data-scene]{height:var(--len,260svh)}
.js [data-scene] .stage{position:-webkit-sticky;position:sticky;top:0;height:100svh}
.js .feature[data-scene]{padding:0}
.js [data-hold]{--len:150svh}
.stage{display:flex;flex-direction:column;justify-content:center;padding:96px var(--pad) 56px;max-width:calc(1200px + 2 * var(--pad));margin:0 auto;gap:40px}

/* The problem: chat bubbles pile up, one slips away */
.problem{background:var(--surface)}
.chat{display:flex;flex-direction:column;align-items:flex-end;gap:12px;max-width:420px;width:100%}
.bubble{color:var(--text);padding:12px 18px;border-radius:22px 22px 22px 6px;font-size:clamp(17px,2vw,21px);line-height:1.5}
.bubble{background:var(--bg);box-shadow:0 1px 0 var(--line);will-change:transform,opacity;backface-visibility:hidden}
.chat{contain:layout paint}
.js .problem .bubble{opacity:0;transform:translateY(24px) scale(.96)}
.problem h2{font-size:var(--h-l);max-width:15ch;margin-bottom:20px}
.js .problem .copy{opacity:.12;transition:opacity .8s var(--ease)}
.js .problem.play .copy{opacity:1;transition-delay:2.2s}
.js .problem.play .bubble{animation:pop .5s var(--ease) forwards}
.js .problem.play .q0{animation-delay:.2s}.js .problem.play .q1{animation-delay:.7s}.js .problem.play .q2{animation-delay:1.2s}
.js .problem.play .q3{animation:pop .5s 1.7s var(--ease) forwards,leave .6s 2.6s var(--ease) forwards}
@keyframes leave{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-10px) scale(.9)}}
@media (min-width:900px){.problem .stage{flex-direction:row-reverse;align-items:center;justify-content:space-between;gap:80px}.problem .copy{flex:1}.problem h2{font-size:clamp(40px,5.6vw,80px)}.chat{max-width:460px;gap:16px}.bubble{font-size:22px;padding:14px 22px}}

/* The promise: the words light up as you scroll */
.promise h2{font-size:var(--h-xl);line-height:1.25;margin-bottom:8px}
.promise h2 span{display:block}
.glow{font-size:clamp(25px,4vw,48px);font-weight:500;line-height:1.75;max-width:24ch}
.js .glow .w{color:var(--faint);transition:color .35s linear}
.js .glow .w.lit{color:var(--text)}

/* Features */
.feature{padding:clamp(96px,16vh,180px) var(--pad)}
.feature.alt{background:var(--surface)}
.inner{max-width:1200px;margin:0 auto}
.feature h2{font-size:var(--h-l);max-width:14ch;margin-bottom:20px}
.js .reveal{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* Scenes inside the features: small product moments that say the line above them. Play once when seen. */
.viz{position:relative;margin:56px 0 44px;width:min(100%,400px);background:var(--bg);border:1px solid var(--line);border-radius:28px;padding:22px;box-shadow:0 24px 60px -30px rgba(35,31,32,.28)}
.feature.alt .viz{background:var(--bg)}
.vh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px}
.vh b{font-size:18px;font-weight:700}
.vh span{font-size:14px;color:var(--muted)}
.ck{width:18px;height:18px;flex:none;color:var(--red)}

/* Sales: six months of bars rise one after another, then orders arrive */
.plot{height:150px;display:flex;align-items:flex-end;gap:10px;border-bottom:1px solid var(--line);padding-bottom:2px}
.plot i{flex:1;border-radius:10px 10px 4px 4px;background:var(--faint);transform-origin:bottom}
.plot i:last-child{background:var(--red)}
.plot i:nth-child(1){height:22%}.plot i:nth-child(2){height:34%}.plot i:nth-child(3){height:41%}.plot i:nth-child(4){height:55%}.plot i:nth-child(5){height:70%}.plot i:nth-child(6){height:92%}
@keyframes grow{to{transform:none}}
.toast small{margin-inline-start:auto;font-size:12px;color:var(--muted);white-space:nowrap}
.toast b{font-weight:700}
.toast{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:400;background:var(--surface);border-radius:14px;padding:10px 14px}
@keyframes pop{to{opacity:1;transform:none}}

/* Trust: the product and its price are there, one tap, ordered */
.shop{display:grid;grid-template-columns:96px 1fr;grid-template-rows:auto auto;gap:14px 16px;align-items:center}
.ex{position:absolute;top:14px;left:16px;font-size:12px;color:var(--muted)}
.pic{grid-row:span 2;width:96px;height:112px;border-radius:20px;background:linear-gradient(160deg,var(--surface),var(--line));display:grid;place-items:center;color:var(--red)}
.pic svg{width:58px;height:58px}
.pinfo{display:grid;gap:2px}
.pinfo b{font-size:18px}
.price{color:var(--red-text);font-weight:700;font-size:20px}
.buy{position:relative;overflow:hidden;height:48px;border-radius:999px;background:var(--text);color:var(--bg);font-weight:600;font-size:16px}
.buy span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .5s var(--ease),opacity .4s}
.b2{background:var(--red);color:#fff;opacity:0;transform:translateY(100%)}
.b2 .ck{color:#fff}.b2 .ck path{stroke:var(--red)}
.tap{position:absolute;top:50%;left:50%;width:40px;height:40px;margin:-20px;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);opacity:0}
@keyframes tap{0%{transform:scale(0);opacity:1}100%{transform:scale(4);opacity:0}}
@keyframes press{50%{transform:scale(.95)}}
@keyframes out{to{opacity:0;transform:translateY(-100%)}}
@keyframes in{to{opacity:1;transform:none}}
html:not(.js) .b1{display:none}html:not(.js) .b2{opacity:1;transform:none}

/* Grow: know your customers, and the one who almost bought comes back */
.cr{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.av{width:36px;height:36px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-weight:700;font-size:15px;flex:none}
.nm{flex:1;font-weight:500}
.st{position:relative;font-size:13px;padding:5px 12px;border-radius:999px;background:var(--surface);color:var(--muted);white-space:nowrap}
.flip{display:grid}
.flip span{grid-area:1/1;text-align:center;transition:opacity .4s,transform .5s var(--ease)}
.s2{opacity:0;transform:translateY(8px)}
.js .crm .cr{opacity:0;transform:translateY(14px)}
.js .in .crm .cr{animation:pop .6s var(--ease) forwards}
.js .in .crm .r0{animation-delay:.3s}.js .in .crm .r1{animation-delay:.5s}.js .in .crm .r2{animation-delay:.7s}
.js .in .crm .flip{animation:turnred .5s 2s forwards}
.js .in .crm .s1{animation:out .4s 2s forwards}
.js .in .crm .s2{animation:in .5s 2s var(--ease) forwards}
@keyframes turnred{to{background:var(--red);color:#fff}}
.js .in .crm .r1 .av{animation:turnred .5s 2s forwards}
html:not(.js) .s1{opacity:0}html:not(.js) .s2{opacity:1;transform:none}

/* The + details, Apple style */
.more{max-width:36ch;margin-top:8px}
summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:12px;min-height:44px;font-weight:500}
summary::-webkit-details-marker{display:none}
.plus{position:relative;width:36px;height:36px;border-radius:50%;background:var(--text);flex:none;transition:transform .5s var(--ease),background-color .3s}
.plus::before,.plus::after{content:"";position:absolute;inset:0;margin:auto;width:14px;height:2px;border-radius:2px;background:var(--bg)}
.plus::after{transform:rotate(90deg)}
details[open] .plus{transform:rotate(45deg)}
details p{color:var(--muted);font-size:clamp(17px,1.8vw,20px);line-height:1.75;padding-top:14px;animation:open .6s var(--ease)}
@keyframes open{from{opacity:0;transform:translateY(-8px)}}

/* Services */
.services{padding:clamp(96px,16vh,180px) var(--pad)}
.services h2{font-size:var(--h-l);margin-bottom:40px}
.list{border-top:1px solid var(--line)}
.row{border-bottom:1px solid var(--line)}
.row summary{display:flex;justify-content:space-between;width:100%;gap:24px;padding:28px 0;font-size:clamp(23px,3.4vw,40px);font-weight:800;line-height:1.45}
.row p{padding:0 0 28px;max-width:40ch}
.note{margin-top:24px;font-size:15px;color:var(--muted)}

/* Close: the one red band */
.close{background:var(--red);color:#FFFFFF;padding:clamp(110px,18vh,200px) var(--pad)}
.close h2{font-size:var(--h-l);max-width:16ch;margin-bottom:24px}
.close .lead{color:rgba(255,255,255,.88);margin-bottom:44px;max-width:36ch}
.close .small{margin-top:20px;font-size:15px;color:rgba(255,255,255,.85)}

/* Footer */
.foot{padding:56px var(--pad) calc(110px + env(safe-area-inset-bottom));max-width:calc(1200px + 2 * var(--pad));margin:0 auto;color:var(--muted);font-size:15px;display:grid;gap:14px}
.foot a{text-decoration:none}
.mark.small .d{font-size:10px}.mark.small .g{font-size:13px}
.foot .mark{color:var(--text);justify-self:start}
.facts{display:flex;flex-wrap:wrap;gap:4px 18px}.facts span{white-space:nowrap}

/* Dock: a small WhatsApp pill on phones once the hero has scrolled away */
.dock{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:9;display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 20px;border-radius:999px;background:var(--red);color:#FFFFFF;text-decoration:none;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.18);transform:translateY(140%);visibility:hidden;transition:transform .6s var(--ease),visibility 0s .6s}
.dock.show{transform:none;visibility:visible;transition:transform .6s var(--ease)}
@media (min-width:900px){.dock{display:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-scene]{height:auto}
  .js [data-scene] .stage{position:static;height:auto}
  .js .problem .bubble,.js .problem .copy,.js .reveal{opacity:1!important;transform:none!important}
  .js .glow .w{color:var(--text)}
  .js .strike::after,.js .chart .plot i{transform:none}
  .js .chart .toast,.js .crm .cr{opacity:1;transform:none}
  .b1,.s1{opacity:0}.b2,.s2{opacity:1;transform:none}.crm .flip{background:var(--red);color:#fff}
}

/* Wide screens: centred hero, each scene beside its text */
@media (min-width:1000px){
  .hero{align-items:center;text-align:center}
  .hero .lead{margin-inline:auto}
  .feature .inner{display:grid;grid-template-columns:minmax(0,1fr) 420px;column-gap:80px;align-items:center}
  .feature .inner>*:not(.viz){grid-column:1}
  .feature .viz{grid-column:2;grid-row:1 / span 5;margin:0}
}


/* v3, 9 Nov: live sales card, scroll-driven order, scroll hint, phone header without blur */
.kpi{display:flex;align-items:baseline;gap:10px;margin:-4px 0 14px}
.kpi .num{font-size:40px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--red-text)}
.kpi .lbl{font-size:14px;color:var(--muted)}
.months{display:flex;gap:10px;margin-top:6px}
.months span{flex:1;text-align:center;font-size:11px;color:var(--muted);white-space:nowrap}
.months span:last-child{color:var(--red-text);font-weight:700}
.js .chart .plot i{transform:scaleY(0);transition:transform .9s var(--ease)}
.js .chart.grown .plot i{transform:scaleY(1)}
.js .chart.grown .plot i:nth-child(2){transition-delay:.12s}.js .chart.grown .plot i:nth-child(3){transition-delay:.24s}.js .chart.grown .plot i:nth-child(4){transition-delay:.36s}.js .chart.grown .plot i:nth-child(5){transition-delay:.48s}.js .chart.grown .plot i:nth-child(6){transition-delay:.6s}
.js .chart.grown .plot i:last-child{transform:scaleY(var(--last,.8))}
.toasts{position:relative;margin-top:16px;display:grid;gap:8px}
.toasts .toast:nth-child(n+4){display:none}
.js .toasts{display:block;height:calc(3 * 44px + 2 * 8px)}
.js .toasts .toast{display:flex;position:absolute;inset-inline:0;top:0;height:44px;padding-block:0;opacity:0;transform:translateY(-16px) scale(.97);transition:transform .6s var(--ease),opacity .5s var(--ease)}
.js .toasts .toast.live{opacity:1}
.js .toasts .toast.out{opacity:0}

.shop.pressed .buy{transform:scale(.95)}
.buy{transition:transform .25s var(--ease)}
.shop.pressed .tap{animation:tap .7s ease-out forwards}
.js .shop.done .b1{opacity:0;transform:translateY(-100%)}
.js .shop.done .b2{opacity:1;transform:none}

.hint{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));z-index:8;width:44px;height:44px;margin-left:-22px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--bg) 85%,transparent);box-shadow:0 6px 20px -6px rgba(0,0,0,.25);opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none}
.hint span{width:12px;height:12px;border-right:2px solid var(--text);border-bottom:2px solid var(--text);transform:translateY(-3px) rotate(45deg)}
.hint.show{opacity:1;transform:none}
.hint.show span{animation:breathe 1.6s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:translateY(-4px) rotate(45deg);opacity:.55}50%{transform:translateY(2px) rotate(45deg);opacity:1}}
@media (max-width:899px){
  .hint{bottom:calc(92px + env(safe-area-inset-bottom))}
  .top{-webkit-backdrop-filter:none;backdrop-filter:none;background:color-mix(in srgb,var(--bg) 96%,transparent)}
}
@media (prefers-reduced-motion:reduce){
  .js .chart .plot i{transform:none}
  .js .toasts{height:auto;display:grid}.js .toasts .toast{position:static;opacity:1;transform:none}.js .toasts .toast:nth-child(n+4){display:none}
  .hint{display:none}
}

/* Hard-stop scenes on phones: everything that plays must fit the screen during the stop */
@media (max-width:899px){
  .js #sales .stage{justify-content:flex-start;padding-top:88px;padding-bottom:24px;gap:24px}
  .js [data-hold] .viz{margin:20px 0 16px;padding:18px}
  .js [data-hold] .feature h2,.js .feature[data-hold] h2{margin-bottom:10px}
  .js [data-hold] .plot{height:120px}
  .js [data-hold] .kpi{margin-bottom:8px}
  .js [data-hold] .kpi .num{font-size:34px}
}