/* ===================== GLOBAL DESIGN SYSTEM ===================== */
:root{
  --bg:#000002;
  --green:#7BC202;
  --green-hi:#B7EA5A;
  --green-glow:rgba(123,194,2,.16);
  --ink:#F1F3EC;
  --ink-2:#C9CCC3;
  --muted:#8F958A;
  --line:rgba(241,243,236,.09);
  --surface:rgba(241,243,236,.035);
  --font:"IBM Plex Sans Arabic","Noto Sans Arabic","Segoe UI",Tahoma,sans-serif;
  /* type scale (≈ 1.25) */
  --t-xs:.8125rem; --t-sm:.9375rem; --t-md:1.125rem; --t-lg:1.4rem;
  --t-xl:clamp(1.75rem,2.6vw,2.4rem);
  --t-hero:clamp(2.35rem,4.7vw,4.6rem);
  --ease:cubic-bezier(.22,.7,.2,1);
  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
/* The brand is dark-only by design; tokens stay identical in every theme. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#000002;--ink:#F1F3EC}}
:root[data-theme="dark"]{--bg:#000002;--ink:#F1F3EC}
html{scroll-padding-top:env(safe-area-inset-top,0px);background:var(--bg)}
*,*::before,*::after{box-sizing:inherit;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--green);outline-offset:4px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===================== NAV ===================== */
.nav{position:fixed;top:0;inset-inline:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top,0px) + 22px) clamp(20px,4vw,56px) 22px;
  background:linear-gradient(to bottom,rgba(0,0,2,.85),rgba(0,0,2,0));}
.brand{display:flex;align-items:center;flex:none}
/* Official Venus AI logo — the supplied file, embedded unaltered, defined once and reused (header + footer). */
.logo{display:block;height:34px;aspect-ratio:156/34;background:url("/assets/venus-logo.svg?v=20260924") center/contain no-repeat}
/* language switch */
.lang-btn{font-family:inherit;font-size:.8rem;font-weight:600;letter-spacing:.08em;line-height:1;min-width:40px;height:38px;padding:0 10px;border-radius:10px;
  border:1px solid var(--line);background:none;color:var(--ink-2);cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:color .3s var(--ease),border-color .3s var(--ease),background-color .3s var(--ease),transform .3s var(--ease)}
.lang-btn:hover{color:var(--ink);border-color:rgba(123,194,2,.45);background:rgba(123,194,2,.05)}
.lang-btn:active{transform:scale(.96);transition-duration:.12s}
@media (hover:none){.lang-btn:hover{color:var(--ink-2);border-color:var(--line);background:none}}
@media (max-width:420px){.lang-btn{min-width:36px;height:36px;padding:0 8px}.nav-actions{gap:6px}}
/* smooth in-place language change */
main,.site-footer,.nav{transition:opacity .22s var(--ease)}
html.lang-fade main,html.lang-fade .site-footer,html.lang-fade .nav{opacity:0}
/* LTR: purely decorative layers and the text-free product UI mirror with the layout */
html[dir="ltr"] .deco,html[dir="ltr"] .ambient,html[dir="ltr"] .ft-deco,html[dir="ltr"] .ui-prod{transform:scaleX(-1)}
html[dir="ltr"] .hero-copy h1{background-image:linear-gradient(90deg,#F4F6EF 0%,#E9F4D6 28%,#BFE56E 58%,#DDEFC0 80%,#F4F6EF 100%)}
html[dir="ltr"] .hero-copy h1{letter-spacing:-.015em}
html[lang="en"] br.d{display:none}   /* Arabic-specific line breaks don't apply to the English copy */
html[lang="en"] .hero-copy h1{font-size:clamp(1.8rem,2.6vw,2.6rem);line-height:1.22}
@media (max-width:759px){
  html[lang="en"] .hero-copy h1{font-size:1.5rem}
  html[lang="en"] .nav .logo{height:24px}
  html[lang="en"] .nav .nav-cta{padding:8px 11px;font-size:.8rem;white-space:nowrap}
}
/* Section tabs (anchor navigation inside the one-page story) */
.tabs{display:flex;align-items:center;gap:2px}
.tab{position:relative;font-size:.94rem;color:var(--ink-2);padding:9px 14px;border-radius:10px;white-space:nowrap;transition:color .3s var(--ease),background-color .3s var(--ease)}
.tab::after{content:"";position:absolute;inset-inline:14px;bottom:3px;height:1.5px;border-radius:2px;background:var(--green);transform:scaleX(0);opacity:.85;transition:transform .45s var(--ease)}
.tab:hover{color:var(--ink);background:rgba(241,243,236,.04)}
.tab.is-active{color:var(--ink)}
.tab.is-active::after{transform:scaleX(1)}
.tab-login,.menu-btn{display:none}
.nav{transition:background-color .4s var(--ease),backdrop-filter .4s var(--ease),opacity .22s var(--ease)}
.nav.solid{background:rgba(0,0,2,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.menu-btn{width:42px;height:42px;border-radius:10px;border:1px solid var(--line);background:none;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.menu-btn i{display:block;width:16px;height:1.5px;border-radius:2px;background:var(--ink);transition:transform .35s var(--ease)}
.nav.open .menu-btn i:first-child{transform:translateY(3.25px) rotate(45deg)}
.nav.open .menu-btn i:last-child{transform:translateY(-3.25px) rotate(-45deg)}
@media (max-width:899px){
  .logo{height:28px}
  .menu-btn{display:inline-flex}
  .tabs{position:fixed;top:calc(env(safe-area-inset-top,0px) + 78px);inset-inline:16px;flex-direction:column;align-items:stretch;gap:2px;padding:8px;
    border-radius:14px;border:1px solid var(--line);background:rgba(0,0,2,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s .3s}
  .nav.open .tabs{opacity:1;visibility:visible;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
  .tab{padding:13px 14px;font-size:1rem}
  .tab::after{inset-inline:14px auto;width:18px;bottom:8px}
  .tab-login{display:block;border-top:1px solid var(--line);border-radius:0 0 10px 10px;margin-top:4px;color:var(--muted)}
}
@media (min-width:900px) and (max-width:1060px){.tab{padding:9px 10px;font-size:.9rem}.tab::after{inset-inline:10px}}

/* ============ Decorative background layer (negative space only, behind everything) ============ */
.deco{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.deco .s{stroke:rgba(241,243,236,.075);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.deco .g{stroke:rgba(123,194,2,.2);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.deco .dash{stroke-dasharray:2 6}
.deco .n,.ft-deco .n{fill:rgba(123,194,2,.55);animation:tw 11s ease-in-out infinite alternate}
.deco .n:nth-of-type(2n),.ft-deco .n:nth-of-type(2n){animation-duration:14s;animation-delay:-5s}
.deco .n:nth-of-type(3n),.ft-deco .n:nth-of-type(3n){animation-duration:9s;animation-delay:-2s}
@keyframes tw{0%{opacity:.35}100%{opacity:1}}

/* very slow atmospheric light: two faint pools drifting at the page edges (transform-only, GPU cheap) */
.ambient{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.ambient i{position:absolute;width:70vmax;height:70vmax;border-radius:50%;opacity:.55;will-change:transform}
.ambient i:first-child{left:-38vmax;top:-30vmax;background:radial-gradient(closest-side,rgba(123,194,2,.045),rgba(123,194,2,0));animation:amb1 52s ease-in-out infinite alternate}
.ambient i:last-child{right:-40vmax;bottom:-36vmax;background:radial-gradient(closest-side,rgba(241,243,236,.03),rgba(241,243,236,0));animation:amb2 64s ease-in-out infinite alternate}
.ambient::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(241,243,236,.014),rgba(241,243,236,0) 38%,rgba(0,0,2,0) 70%,rgba(123,194,2,.012))}
.ambient b{position:absolute;left:0;top:0;width:56vmax;height:56vmax;margin:-28vmax 0 0 -28vmax;border-radius:50%;will-change:transform;
  background:radial-gradient(closest-side,rgba(123,194,2,.05),rgba(123,194,2,.018) 45%,rgba(123,194,2,0));animation:ambBreath 26s ease-in-out infinite alternate}
@keyframes ambBreath{from{opacity:.75}to{opacity:1}}
@media (max-width:759px){.ambient b{width:70vmax;height:70vmax;margin:-35vmax 0 0 -35vmax;opacity:.6;animation:none}.ambient i{opacity:.4}}
@keyframes amb1{to{transform:translate3d(6vmax,4vmax,0) scale(1.08)}}
@keyframes amb2{to{transform:translate3d(-5vmax,-6vmax,0) scale(1.06)}}
.deco .mote{fill:rgba(241,243,236,.28);transform-box:fill-box;animation:mote 46s ease-in-out infinite alternate}
.deco .mote:nth-of-type(2n){animation-duration:58s;animation-delay:-20s}
.deco .mote:nth-of-type(3n){animation-duration:38s;animation-delay:-9s}
@keyframes mote{0%{transform:translate(0,0);opacity:.25}50%{opacity:.8}100%{transform:translate(14px,-26px);opacity:.35}}
@media (prefers-reduced-motion:reduce){.ambient i,.ambient b,.deco .mote{animation:none}}
/* ============ Footer ============ */
.site-footer{position:relative;overflow:hidden;background:var(--bg);border-top:1px solid rgba(241,243,236,.05);
  padding:clamp(72px,11vh,120px) clamp(24px,6vw,110px) calc(40px + env(safe-area-inset-bottom,0px))}
.ft-deco{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ft-deco .s{stroke:rgba(241,243,236,.07);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.ft-deco .g{stroke:rgba(123,194,2,.22);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.ft-deco .draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 2.2s var(--ease)}
.ft-deco .fade{opacity:0;transition:opacity 1.8s var(--ease)}
.site-footer.in .ft-deco .draw{stroke-dashoffset:0}
.site-footer.in .ft-deco .fade{opacity:1}
.ft-inner{position:relative;max-width:1220px;margin:0 auto}
.ft-top{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.ft-logo .logo{height:38px}
.ft-nav{display:flex;flex-wrap:wrap;gap:4px 6px}
.ft-rule{height:1px;margin:44px 0 26px;background:linear-gradient(90deg,rgba(241,243,236,0),rgba(241,243,236,.1) 20%,rgba(241,243,236,.1) 80%,rgba(241,243,236,0));transform-origin:center;transform:scaleX(0);transition:transform 1.6s var(--ease) .35s}
.ft-meta{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:var(--t-xs);color:var(--muted)}
.ft-info{display:flex;justify-content:space-between;align-items:center;gap:26px 48px;flex-wrap:wrap;margin-top:40px}
.ft-biz{display:flex;gap:36px;margin:0}
.ft-biz dt{font-size:var(--t-xs);color:var(--muted)}
.ft-biz dd{margin:6px 0 0;font-size:.95rem;font-weight:500;color:var(--ink-2);letter-spacing:.04em;font-variant-numeric:tabular-nums;text-align:start}
.ft-social{list-style:none;display:flex;gap:10px;flex-wrap:wrap}
.ft-social a{display:flex;align-items:center;gap:11px;padding:10px 15px;border-radius:12px;border:1px solid rgba(241,243,236,.07);background:rgba(241,243,236,.02);
  transition:border-color .3s var(--ease),background-color .3s var(--ease),transform .3s var(--ease)}
.ft-social svg{width:19px;height:19px;flex:none;color:var(--green);transition:transform .3s var(--ease)}
.ft-social .sx{display:flex;flex-direction:column;line-height:1.35}
.ft-social .sn{font-size:.72rem;color:var(--muted)}
.ft-social .sh{font-size:.9rem;font-weight:500;color:var(--ink);text-align:start}
.ft-social a:hover{border-color:rgba(123,194,2,.42);background:rgba(123,194,2,.05);transform:translateY(-1px)}
.ft-social a:hover svg{transform:scale(1.08)}
.ft-social a:active{transform:scale(.98);transition-duration:.12s}
@media (hover:none){.ft-social a:hover{border-color:rgba(241,243,236,.07);background:rgba(241,243,236,.02);transform:none}.ft-social a:hover svg{transform:none}}
.ft-info{opacity:0;transform:translateY(14px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.site-footer.in .ft-info{opacity:1;transform:none;transition-delay:1.2s}
.ft-logo,.ft-nav,.ft-cta,.ft-meta{opacity:0;transform:translateY(14px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.site-footer.in .ft-logo{opacity:1;transform:none;transition-delay:.7s}
.site-footer.in .ft-nav{opacity:1;transform:none;transition-delay:.95s}
.site-footer.in .ft-cta{opacity:1;transform:none;transition-delay:1.1s}
.site-footer.in .ft-rule{transform:none}
.site-footer.in .ft-meta{opacity:1;transform:none;transition-delay:1.3s}
@media (max-width:899px){
  .ft-top{flex-direction:column;align-items:center;text-align:center;gap:26px}
  .ft-nav{display:grid;grid-template-columns:repeat(2,auto);justify-content:center}
  .ft-meta{justify-content:center;text-align:center}
  .ft-info{flex-direction:column;align-items:stretch;gap:22px;margin-top:34px}
  .ft-biz{justify-content:center;gap:28px;text-align:center}
  .ft-biz dd{text-align:center!important}
  .ft-social{flex-direction:column;align-items:stretch;max-width:360px;width:100%;margin:0 auto}
  .ft-social a{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .deco .n,.ft-deco .n{animation:none}
  .ft-info,.ft-logo,.ft-nav,.ft-cta,.ft-meta,.ft-rule,.ft-deco .draw,.ft-deco .fade{transition:none!important}
}
.nav-actions{display:flex;align-items:center;gap:8px}
.nav-link{font-size:var(--t-sm);color:var(--ink-2);padding:10px 14px;border-radius:10px;transition:color .2s}
.nav-link:hover{color:var(--ink)}
.nav-cta{font-size:var(--t-sm);font-weight:500;padding:9px 16px;border-radius:10px;border:1px solid rgba(123,194,2,.45);color:var(--ink);-webkit-tap-highlight-color:transparent;transition:background-color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.nav-cta:hover{background:rgba(123,194,2,.1);border-color:var(--green)}
.nav-cta:active{transform:scale(.97);background:rgba(123,194,2,.16);transition-duration:.12s}
@media (hover:none){.nav-cta:hover{background:none;border-color:rgba(123,194,2,.45)}}

/* ===================== HERO ===================== */
/* One pinned stage carries the whole story (Hero → Section 02) so the AI Core never resets. */
.story{position:relative;height:1180vh}
.layer{position:absolute;inset:0;pointer-events:none}
.layer a,.layer button{pointer-events:auto}
.stage{position:sticky;top:env(safe-area-inset-top,0px);height:100vh;height:100svh;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(120% 60% at 50% 118%,rgba(123,194,2,.10),rgba(123,194,2,0) 60%),
    radial-gradient(60% 50% at 30% 45%,rgba(123,194,2,.035),rgba(0,0,0,0) 70%),
    var(--bg);}
#scene{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}

/* copy */
.hero-copy{position:absolute;z-index:5;inset-inline-start:clamp(24px,6vw,110px);top:50%;transform:translateY(-50%);
  width:min(600px,44vw);will-change:opacity,transform}
.hero-copy .hero-lead{margin-top:18px;font-size:clamp(1rem,1.2vw,1.13rem);line-height:1.85;color:var(--ink-2);max-width:none}
.hero-support{margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.hs-card{padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:rgba(241,243,236,.02);transition:border-color .5s var(--ease),background-color .5s var(--ease)}
.hs-card.on{border-color:rgba(123,194,2,.4);background:rgba(123,194,2,.05)}
.hero-copy .hs-t{margin:0;font-size:1.06rem;font-weight:600;color:var(--ink);max-width:none}
.hero-copy .hs-d,.hero-copy .hs-sum{margin-top:6px;font-size:.95rem;line-height:1.75;color:var(--muted);max-width:none}
.hero-copy .hs-sum{margin-top:14px}
.hs-steps{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.hs-steps li{display:flex;align-items:center;gap:8px;font-size:.92rem;font-weight:500;color:var(--ink-2);padding:7px 14px;border-radius:99px;border:1px solid var(--line);transition:border-color .5s var(--ease),color .5s var(--ease)}
.hs-steps li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:rgba(241,243,236,.25);transition:all .5s var(--ease)}
.hs-steps li.done::before{background:rgba(123,194,2,.6)}
.hs-steps li.on{border-color:rgba(123,194,2,.5);color:var(--ink)}
.hs-steps li.on::before{background:var(--green);box-shadow:0 0 10px rgba(123,194,2,.7)}
.hero-copy h1{font-size:clamp(1.9rem,2.9vw,2.9rem);line-height:1.3;letter-spacing:-.005em;font-weight:600;
  background:linear-gradient(270deg,#F4F6EF 0%,#E9F4D6 28%,#BFE56E 58%,#DDEFC0 80%,#F4F6EF 100%);background-size:180% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:heroSheen 22s ease-in-out infinite alternate}
@keyframes heroSheen{to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.hero-copy h1{animation:none}}
.hero-copy h1 .q{display:block;font-weight:300;color:var(--ink-2)}
.hero-copy p{margin-top:24px;font-size:var(--t-md);line-height:1.85;color:var(--muted);max-width:44ch}
.ctas{margin-top:26px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* CTA system — one component, three weights (primary · secondary · closing). 300ms, same easing everywhere. */
.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:inherit;font-size:1rem;font-weight:600;line-height:1.2;white-space:nowrap;padding:14px 24px;border-radius:12px;border:1px solid transparent;cursor:pointer;
  -webkit-tap-highlight-color:transparent;will-change:transform;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.btn-primary{background:var(--green);color:#000002;border-color:rgba(183,234,90,.45);
  box-shadow:0 8px 26px -14px rgba(123,194,2,.55)}
.btn-primary:hover{background:#86CC10;transform:translateY(-1px) scale(1.015);box-shadow:0 14px 34px -14px rgba(123,194,2,.7)}
.btn-ghost{background:rgba(123,194,2,.04);color:var(--ink);border-color:rgba(123,194,2,.42)}
.btn-ghost:hover{background:rgba(123,194,2,.09);border-color:rgba(123,194,2,.8);transform:translateY(-1px);box-shadow:0 0 0 3px rgba(123,194,2,.07)}
.btn-ico{width:14px;height:14px;flex:none;color:var(--green-hi);transition:transform .3s var(--ease)}
.btn-ghost:hover .btn-ico{transform:translateY(2px)}
.btn:active{transform:translateY(0) scale(.98);transition-duration:.12s}
.btn-primary:active{background:#72B402;box-shadow:0 4px 14px -10px rgba(123,194,2,.5)}
.btn-ghost:active{background:rgba(123,194,2,.14)}
.btn:focus-visible{outline:2px solid var(--green-hi);outline-offset:3px}
.btn-final{padding:15px 30px;font-size:1.04rem;box-shadow:0 0 0 1px rgba(183,234,90,.25),0 14px 40px -16px rgba(123,194,2,.75),0 0 60px -24px rgba(123,194,2,.6)}
.btn-final:hover{box-shadow:0 0 0 1px rgba(183,234,90,.4),0 18px 46px -16px rgba(123,194,2,.85),0 0 70px -22px rgba(123,194,2,.7)}
@media (hover:none){   /* touch: press feedback only, no lingering hover glow */
  .btn-primary:hover{background:var(--green);transform:none;box-shadow:0 8px 26px -14px rgba(123,194,2,.55)}
  .btn-final:hover{box-shadow:0 0 0 1px rgba(183,234,90,.25),0 14px 40px -16px rgba(123,194,2,.75),0 0 60px -24px rgba(123,194,2,.6)}
  .btn-ghost:hover{background:rgba(123,194,2,.04);border-color:rgba(123,194,2,.42);transform:none;box-shadow:none}
  .btn-ghost:hover .btn-ico{transform:none}
}
.s4-col .s4-cta{margin-top:30px}
@media (min-width:760px) and (max-height:800px){   /* short desktop screens: tighten the hero rhythm so the CTAs fit */
  .hero-copy .hero-lead{margin-top:12px}
  .ctas{margin-top:18px}
  .hero-support{margin-top:20px;padding-top:16px}
  .hs-card{padding:12px 16px}
  .hs-steps{margin-top:10px}
  .hero-copy .hs-sum{margin-top:10px}
}
.link{font-family:inherit;font-size:1rem;color:var(--ink-2);background:none;border:0;cursor:pointer;padding:8px 2px;border-bottom:1px solid var(--line);transition:color .2s,border-color .2s}
.link:hover{color:var(--ink);border-color:var(--green)}

/* scroll hint */
.hint{position:absolute;z-index:5;bottom:calc(28px + env(safe-area-inset-bottom,0px));inset-inline:0;margin:auto;width:max-content;
  display:flex;flex-direction:column;align-items:center;gap:10px;font-size:var(--t-xs);color:var(--muted)}
.hint i{display:block;width:1px;height:38px;background:linear-gradient(var(--green),rgba(123,194,2,0));transform-origin:top;animation:drip 2.4s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0);opacity:1}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

/* section label + phase indicator (inside the copy block) */
.hero-copy .hero-label{font-size:1rem;font-weight:500;color:var(--green-hi);margin:0 0 14px}
.phases{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:34px;padding-top:18px;border-top:1px solid var(--line)}
.phases li{position:relative;font-size:var(--t-sm);color:var(--muted);padding-inline-start:16px;transition:color .5s var(--ease)}
.phases li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--bg);border:1px solid rgba(241,243,236,.25);transition:all .5s var(--ease)}
.phases li.on{color:var(--ink)}
.phases li.on::before{background:var(--green);border-color:var(--green);box-shadow:0 0 12px rgba(123,194,2,.8)}
.phases li.done::before{border-color:rgba(123,194,2,.6)}

/* ===================== SECTION 02 — كيف نشتغل؟ ===================== */
.s2-head{position:absolute;z-index:5;top:calc(env(safe-area-inset-top,0px) + 10vh);inset-inline:0;text-align:center;padding-inline:24px;opacity:0;will-change:opacity,transform}
.s2-head h2{font-size:clamp(2rem,3.3vw,3.1rem);font-weight:600;line-height:1.15;letter-spacing:-.005em}
.s2-intro{margin-top:14px;font-size:var(--t-md);line-height:1.7;color:var(--muted)}
.s2-steps{list-style:none}
.s2-step{position:absolute;z-index:5;left:0;top:0;width:max-content;opacity:0;will-change:transform,opacity}
.s2-n{display:block;font-size:var(--t-sm);font-weight:600;color:var(--muted);letter-spacing:.04em;margin-bottom:8px;transition:color .5s var(--ease)}
.s2-step h3{font-size:clamp(1.3rem,1.75vw,1.65rem);font-weight:600;line-height:1.3}
.s2-step p{margin-top:10px;font-size:clamp(.94rem,1.05vw,1.02rem);line-height:1.85;color:var(--muted)}
.s2-step.on .s2-n{color:var(--green)}
.s2-dots{display:none}
.outcomes{list-style:none}
.outcome{position:absolute;z-index:5;left:0;top:0;opacity:0;text-align:center;font-size:var(--t-md);font-weight:500;color:var(--ink-2);line-height:1.5;will-change:transform,opacity}
@media (max-width:899px),(orientation:portrait){
  .s2-head{top:calc(env(safe-area-inset-top,0px) + 84px)}
  .s2-head h2{font-size:clamp(1.9rem,6vw,2.6rem)}
  .s2-intro{margin-top:10px;font-size:1rem}
  .s2-steps{position:absolute;inset-inline:24px;top:30%;display:grid;justify-items:center}
  .s2-step{position:relative;grid-area:1/1;width:auto;max-width:520px;text-align:center}
  .s2-dots{display:flex;position:absolute;z-index:5;bottom:calc(28px + env(safe-area-inset-bottom,0px));inset-inline:0;justify-content:center;gap:10px}
  .s2-dots i{width:6px;height:6px;border-radius:50%;background:rgba(241,243,236,.2);transition:all .4s var(--ease)}
  .s2-dots i.on{width:22px;border-radius:99px;background:var(--green)}
  .outcome{font-size:.95rem}
}
/* node labels (Sections 02 + 03): small pill tethered to the illuminated node */
.node-tag{position:absolute;left:0;top:0;z-index:5;display:block;max-width:190px;padding:5px 11px;border-radius:99px;font-size:.8rem;font-weight:500;line-height:1.5;
  color:var(--ink);background:rgba(0,0,2,.82);border:1px solid rgba(123,194,2,.42);white-space:nowrap;opacity:0;pointer-events:none;will-change:transform,opacity}
.node-tag::after{content:"";position:absolute;background:rgba(123,194,2,.55)}
.node-tag.is-up::after{left:var(--lx,50%);top:100%;width:1px;height:14px;background:linear-gradient(rgba(123,194,2,.6),rgba(123,194,2,0))}
.node-tag.is-down::after{left:var(--lx,50%);bottom:100%;width:1px;height:14px;background:linear-gradient(rgba(123,194,2,0),rgba(123,194,2,.6))}
.node-tag.is-side,.node-tag.is-sideR{white-space:normal;border-radius:12px;text-align:start}
.node-tag.is-sideR::after{right:100%;top:50%;width:14px;height:1px;background:linear-gradient(90deg,rgba(123,194,2,0),rgba(123,194,2,.6))}
.node-tag.is-side::after{left:100%;top:50%;width:14px;height:1px;background:linear-gradient(90deg,rgba(123,194,2,.6),rgba(123,194,2,0))}
@media (max-width:759px){.node-tag{font-size:.74rem;padding:4px 10px}}
/* ===================== SECTION 03 — قبل لا تبدأ ===================== */
.s3-col{position:absolute;z-index:5;top:0;bottom:0;inset-inline-start:clamp(24px,6vw,110px);width:min(560px,40vw);display:grid;align-content:center}
.s3-intro,.s3-feats{grid-area:1/1;align-self:center;opacity:0;will-change:opacity,transform}
.s3-label{font-size:1rem;font-weight:500;color:var(--green-hi)}
.s3-intro .s3-heading{margin-top:14px;color:var(--ink);font-size:clamp(1.85rem,2.9vw,2.8rem);font-weight:600;line-height:1.32;letter-spacing:-.005em}
.s3-intro p{margin-top:18px;font-size:var(--t-md);line-height:1.85;color:var(--muted)}
.s3-intro .s3-heading+p{margin-top:24px}
.s3-feats{list-style:none;display:flex;flex-direction:column;gap:clamp(14px,3vh,30px)}
.s3-feat{transition:none}
.s3-n{display:block;font-size:var(--t-sm);font-weight:600;color:var(--muted);letter-spacing:.04em;margin-bottom:6px;transition:color .5s var(--ease)}
.s3-feat.on .s3-n{color:var(--green)}
.s3-feat h4{font-size:clamp(1.1rem,2.5vh,1.45rem);font-weight:600;line-height:1.3}
.s3-feat p{margin-top:6px;font-size:clamp(.9rem,1.95vh,1.02rem);line-height:1.75;color:var(--muted)}
@media (max-width:899px),(orientation:portrait){
  .s3-col{display:block;inset-inline:24px;width:auto}
  .s3-intro{position:absolute;inset-inline:0;top:calc(env(safe-area-inset-top,0px) + 76px)}
  .s3-intro .s3-heading{font-size:clamp(1.55rem,5.4vw,2.3rem)}
  .s3-intro p{margin-top:14px;font-size:1rem;line-height:1.8}
  .s3-feats{position:absolute;inset-inline:0;top:calc(env(safe-area-inset-top,0px) + 84px);display:grid;justify-items:center}
  .s3-feat{grid-area:1/1;max-width:520px;text-align:center}
  .s3-feat h4{font-size:1.3rem}.s3-feat p{font-size:.98rem}
}
/* ===================== SECTION 04 — وش نقدّم؟ ===================== */
.s4-atmo{position:absolute;left:0;right:0;top:20%;height:100%;opacity:0;pointer-events:none;will-change:transform,opacity;
  background:radial-gradient(50% 40% at 34% 62%,rgba(123,194,2,.09),rgba(123,194,2,0) 70%)}
.s4-col{position:absolute;z-index:5;inset-inline-start:clamp(24px,6vw,110px);top:50%;transform:translateY(-50%);width:min(540px,38vw);opacity:0;will-change:opacity,transform}
.s4-label{font-size:1rem;font-weight:500;color:var(--green-hi)}
.s4-col .s4-heading{margin-top:14px;font-size:clamp(2rem,3.4vw,3.3rem);font-weight:600;line-height:1.22;letter-spacing:-.01em;color:var(--ink)}
.s4-col p{margin-top:20px;font-size:var(--t-md);line-height:1.85;color:var(--muted)}
.s4-col .s4-heading+p{margin-top:26px}
/* product UI shown inside the Hero devices once they become the final product (no text by design) */
.ui-prod{position:absolute;inset:0;display:none}
.is-prod .ui-lap,.is-prod .ui-ph,.is-prod .bp{display:none}
.is-prod .ui-prod{display:block}
.ui-prod i,.ui-prod b,.ui-prod span{position:absolute;display:block}
.pw-bar{left:0;right:0;top:8%;height:1px;background:rgba(241,243,236,.08)}
.pw-dot{top:3.2%;width:1.2cqw;aspect-ratio:1;border-radius:50%;background:rgba(241,243,236,.18)}
.pw-addr{left:34%;width:32%;top:2.2%;height:3.6%;border-radius:99px;background:rgba(241,243,236,.06)}
.pw-logo{right:5%;top:12.7%;width:2.2cqw;aspect-ratio:1;border-radius:50%;background:var(--green);box-shadow:0 0 1.4cqw rgba(123,194,2,.6)}
.pw-nav{top:14%;width:5%;height:2px;background:rgba(241,243,236,.2)}
.pw-l{height:4.5%;border-radius:4px}
.pw-img{left:6%;top:22%;width:40%;height:38%;border-radius:10px;border:1px solid rgba(123,194,2,.25);background:linear-gradient(135deg,rgba(123,194,2,.22),rgba(123,194,2,.02))}
.pw-btn{left:80%;width:14%;top:47%;height:6%;border-radius:99px;background:var(--green)}
.pw-card{top:68%;width:25%;height:24%;border-radius:8px;border:1px solid rgba(123,194,2,.24);background:rgba(8,12,6,.92)}
.pw-card::before,.pm-row::before{content:"";position:absolute;right:12%;top:50%;width:1.1cqw;aspect-ratio:1;border-radius:50%;background:rgba(123,194,2,.7);transform:translateY(-50%)}
.pw-card::after,.pm-row::after{content:"";position:absolute;right:24%;width:44%;top:38%;height:2px;background:rgba(241,243,236,.32);box-shadow:0 1.6cqw 0 -0px rgba(241,243,236,.14)}
.pm-head{right:10%;width:50%;top:6%;height:2.2%;border-radius:3px;background:rgba(241,243,236,.6)}
.pm-card{left:8%;right:8%;top:12%;height:24%;border-radius:10px;background:linear-gradient(135deg,rgba(123,194,2,.3),rgba(123,194,2,.04))}
.pm-row{left:8%;right:8%;height:8.5%;border-radius:8px;border:1px solid rgba(123,194,2,.24);background:rgba(8,12,6,.92)}
.pm-row::before{width:4cqw}
.pm-row::after{box-shadow:0 5cqw 0 0 rgba(241,243,236,.14)}
.pm-tab{left:8%;right:8%;top:89%;height:1px;background:rgba(241,243,236,.06)}
.pm-dot{top:92.5%;width:5cqw;aspect-ratio:1;border-radius:50%;background:rgba(241,243,236,.2)}
@media (max-width:899px),(orientation:portrait){
  .s4-col{inset-inline:24px;width:auto;top:calc(env(safe-area-inset-top,0px) + 84px);transform:none}
  .s4-col .s4-heading{font-size:clamp(1.8rem,7vw,2.6rem)}
  .s4-col p{margin-top:12px;font-size:1rem;line-height:1.8}
  .s4-col .s4-heading+p{margin-top:16px}
  .s4-atmo{background:radial-gradient(70% 40% at 50% 70%,rgba(123,194,2,.1),rgba(123,194,2,0) 70%)}
}
/* The description line breaks are honoured where the column is wide enough; narrower columns wrap naturally (copy unchanged). */
@media (max-width:1359px){br.d{display:none}}
@media (max-width:759px){
  .hero-copy h1{font-size:1.65rem;line-height:1.35}
  .hero-copy .hero-lead{margin-top:12px;font-size:.98rem;line-height:1.8}
  .hero-support{position:absolute;top:0;inset-inline:0;margin:0;padding:0;border:0;opacity:0}
  .hs-card{padding:14px 16px}
  .hero-copy .hs-t{font-size:1.02rem}
  .hero-copy .hs-d,.hero-copy .hs-sum{font-size:.92rem;line-height:1.7}
  .hs-steps{gap:6px;margin-top:12px}
  .hs-steps li{font-size:.84rem;padding:6px 11px}
  .s2-n,.s3-n{margin-bottom:11px;line-height:1}
  .s2-step p,.s3-feat p{margin-top:12px}
  .s2-steps{top:calc(env(safe-area-inset-top,0px) + 250px)}
}

/* ===================== DEVICES ===================== */
.devices{position:absolute;inset:0;z-index:2;pointer-events:none}
.dev{position:absolute;left:0;top:0;transform-origin:50% 50%;will-change:transform,opacity}
/* Laptop */
.lid{position:relative;aspect-ratio:16/10;border-radius:2.4%/3.8%;padding:1.5% 1.5% 2.2%;
  background:linear-gradient(158deg,#34372f 0%,#15170f 22%,#0a0b08 60%,#050604 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.14),0 50px 90px -30px rgba(0,0,0,.95),0 0 90px -20px rgba(123,194,2,.14)}
.lid::after,.body::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,0) 20%,rgba(255,255,255,.075) 38%,rgba(255,255,255,.02) 50%,rgba(255,255,255,0) 62%) var(--gx,30%) 0/240% 100% no-repeat}
.laptop::before,.pfloor{transform:scaleX(calc(1 - var(--lift,0) * .05));opacity:calc(1 - var(--lift,0) * .12)}
.lid{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(123,194,2,.12),0 50px 90px -30px rgba(0,0,0,.95),0 0 90px -20px rgba(123,194,2,.12)}
.cam{position:absolute;top:.55%;left:50%;width:.6%;aspect-ratio:1;border-radius:50%;background:#1d211a;transform:translateX(-50%)}
.base{position:relative;width:116%;margin-inline:-8%;aspect-ratio:100/3.2;
  background:linear-gradient(#4a4d45 0%,#24261f 30%,#101109 70%,#070805 100%);
  clip-path:polygon(0 0,100% 0,98.4% 100%,1.6% 100%);border-radius:0 0 40% 40%/0 0 100% 100%}
.base::before{content:"";position:absolute;top:0;left:50%;width:15%;height:38%;transform:translateX(-50%);border-radius:0 0 8px 8px;background:#0c0d0a;box-shadow:inset 0 -1px 0 rgba(255,255,255,.05)}
.floor{position:absolute;left:4%;right:4%;bottom:-9%;height:14%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(123,194,2,.12),rgba(0,0,0,0));filter:blur(8px)}
.laptop::before{content:"";position:absolute;left:-2%;right:-2%;bottom:-3.5%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.85),rgba(0,0,0,0));filter:blur(6px)}
.pfloor{position:absolute;left:8%;right:8%;bottom:-3.5%;height:6%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.9),rgba(0,0,0,0));filter:blur(5px)}
.phone .body{box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.16),-18px 30px 60px -18px rgba(0,0,0,.95),0 0 40px -16px rgba(123,194,2,.14)}
/* Phone */
.body{position:relative;aspect-ratio:9/19.4;border-radius:16%/7.6%;padding:4.2%;
  background:linear-gradient(150deg,#383b33 0%,#16180f 28%,#090a07 64%,#040503 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.16),0 36px 70px -20px rgba(0,0,0,.95),0 0 60px -18px rgba(123,194,2,.16)}
.island{position:absolute;top:2.6%;left:50%;width:30%;height:3.2%;transform:translateX(-50%);border-radius:99px;background:#000;z-index:3}
/* Screens */
.screen{position:relative;width:100%;height:100%;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,#07100a 0%,#020302 60%);container-type:inline-size}
.lid .screen{border-radius:.9%/1.4%}
.body .screen{border-radius:12.5%/5.8%}
.bp{position:absolute;inset:0;opacity:.15;
  background-image:linear-gradient(rgba(123,194,2,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(123,194,2,.14) 1px,transparent 1px);
  background-size:4.2cqw 4.2cqw;mask-image:radial-gradient(80% 80% at 50% 50%,#000 30%,transparent 100%)}
[data-r]{opacity:0;will-change:opacity,transform}

/* Laptop UI — Venus report */
.ui{position:absolute;inset:0;color:var(--ink);font-family:var(--font)}
.ui-lap{padding:3.2cqw 3.6cqw;display:flex;flex-direction:column;gap:2.2cqw}
.mark{display:inline-block;width:1.7cqw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,#eaffc7,#7BC202 45%,#2c4700 100%);box-shadow:0 0 1.6cqw rgba(123,194,2,.7)}
.ui-top{display:flex;align-items:center;gap:1.2cqw;font-size:1.45cqw;color:var(--muted);padding-bottom:1.6cqw;border-bottom:1px solid var(--line)}
.ui-top b{color:var(--ink);font-weight:600;direction:ltr}
.ui-top .pill{margin-inline-start:auto;color:var(--green-hi);background:rgba(123,194,2,.12);border:1px solid rgba(123,194,2,.35);padding:.4cqw 1.2cqw;border-radius:99px}
.ui-title small{font-size:1.4cqw;color:var(--muted)}
.ui-title h3{font-size:3.1cqw;font-weight:600;margin-top:.5cqw}
.ui-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4cqw}
.ui-metrics>div{padding:1.6cqw 1.8cqw;border-radius:1.2cqw;background:var(--surface);border:1px solid var(--line)}
.ui-metrics small{display:block;font-size:1.3cqw;color:var(--muted)}
.ui-metrics strong{display:block;font-size:2.2cqw;font-weight:600;margin-top:.6cqw}
.ui-metrics>div:first-child{border-color:rgba(123,194,2,.35);background:linear-gradient(160deg,rgba(123,194,2,.12),rgba(123,194,2,.02))}
.ui-cols{display:grid;grid-template-columns:1.15fr 1fr;gap:1.4cqw;flex:1;min-height:0}
.ui-card{padding:1.8cqw;border-radius:1.2cqw;background:var(--surface);border:1px solid var(--line);overflow:hidden}
.ui-card small{font-size:1.3cqw;color:var(--muted)}
.ui-card ul{list-style:none;margin-top:1.2cqw;display:flex;flex-direction:column;gap:1.05cqw}
.ui-card li{font-size:1.5cqw;color:var(--ink-2);display:flex;align-items:center;gap:1cqw}
.ui-card li::before{content:"";width:1.1cqw;height:1.1cqw;border-radius:.3cqw;border:1px solid var(--green);background:rgba(123,194,2,.25);flex:none}
.tl{margin-top:1.4cqw;display:flex;flex-direction:column;gap:1.25cqw}
.tl div{display:grid;grid-template-columns:7cqw 1fr;align-items:center;font-size:1.35cqw;color:var(--muted)}
.tl span{position:relative;height:1.1cqw;border-radius:99px;background:rgba(241,243,236,.05)}
.tl span i{position:absolute;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,rgba(123,194,2,.55),var(--green))}
/* Phone UI — Venus conversation */
.ui-ph{padding:15cqw 6.5cqw 6cqw;display:flex;flex-direction:column;gap:4.2cqw;font-size:6.2cqw}
.ph-head{display:flex;align-items:center;gap:2.6cqw;font-weight:600}
.ph-head .mark{width:6cqw}
.ph-head em{margin-inline-start:auto;font-style:normal;font-weight:400;font-size:5cqw;color:var(--muted)}
.ph-prog{height:1.2cqw;border-radius:99px;background:rgba(241,243,236,.07);overflow:hidden}
.ph-prog i{display:block;height:100%;width:70%;background:var(--green);border-radius:99px}
.msg{padding:3.6cqw 4.4cqw;border-radius:5cqw;line-height:1.55;max-width:88%}
.msg.ai{background:rgba(241,243,236,.06);border:1px solid var(--line);border-start-start-radius:1.2cqw;align-self:flex-start}
.msg.me{background:rgba(123,194,2,.16);border:1px solid rgba(123,194,2,.35);border-start-end-radius:1.2cqw;align-self:flex-end;color:var(--ink)}
.typing{display:flex;gap:1.8cqw;align-self:flex-start;padding:2cqw 3cqw}
.typing i{width:2cqw;height:2cqw;border-radius:50%;background:var(--green);opacity:.4;animation:blink 1.4s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{50%{opacity:1}}
.ph-input{margin-top:auto;padding:3.4cqw 4.4cqw;border-radius:99px;border:1px solid var(--line);color:var(--muted);font-size:5.4cqw}

/* ===================== RESPONSIVE ===================== */
@media (max-width:1100px){.hero-copy{width:min(520px,46vw)}}
@media (max-width:760px){
  .story{height:1010vh}
  .hero-copy{inset-inline:22px;top:calc(env(safe-area-inset-top,0px) + 92px);transform:none;width:auto}
  .hero-copy p{margin-top:16px;font-size:1.02rem;line-height:1.8}
  .ctas{margin-top:18px;gap:10px;flex-wrap:nowrap}
  .ctas .btn{flex:1 1 0;padding:12px 12px;font-size:.95rem}
  .hero-copy .hero-label{margin-bottom:8px;font-size:.95rem}
  .phases{margin-top:18px;padding-top:12px;gap:0;flex-wrap:nowrap}
  .phases li{font-size:0;width:22px;height:12px;padding:0}
  .phases li::before{top:2px}
  .phases li.on{font-size:.9rem;width:auto;padding-inline:16px 12px}
  .nav-link{display:none}
  .hint{display:none}
}
@media (prefers-reduced-motion:reduce){.hint i,.typing i{animation:none}}
/* Arabic is a joined script: any non-zero letter-spacing (even ±.005em) makes WebKit/Safari
   stop joining the letters. Arabic text is never tracked; English/LTR islands keep theirs. */
html[lang="ar"] body *:not([lang="en"]):not([dir="ltr"]){letter-spacing:0!important}

/* ============ Hero copy vs. header on desktop (zoom in/out, short windows, longer EN copy) ============
   The copy used to be centred with top:50% + translateY(-50%); whenever it was taller than the
   window it spilled up under the fixed header. It is now a flex column confined between the header
   and the scroll hint: centred while it fits, and never above the header when it doesn't.
   home.js adds .stack when even that is too short, so the two parts take turns as on phones. */
@media (min-width:761px){
  .hero-copy{top:calc(env(safe-area-inset-top,0px) + 96px);bottom:92px;transform:none;display:flex;flex-direction:column}
  .hero-copy>.hero-main{margin-top:auto}
  .hero-copy>.hero-support{margin-bottom:auto}
  .hero-copy.stack>.hero-main{margin-bottom:auto}
  /* pointer-events:none until home.js fades it in, so the invisible layer never swallows clicks on the CTAs */
  .hero-copy.stack>.hero-support{position:absolute;top:0;bottom:0;inset-inline:0;margin:0;padding:0;border:0;opacity:0;pointer-events:none;
    display:flex;flex-direction:column;justify-content:center}
  /* the heading and lead scale with the window height too, so zoom-in keeps the main message whole */
  .hero-copy h1{font-size:clamp(1.55rem,min(2.9vw,6.2vh),2.9rem)}
  html[lang="en"] .hero-copy h1{font-size:clamp(1.45rem,min(2.6vw,5.6vh),2.6rem)}
}
@media (min-width:761px) and (max-height:600px){
  .hero-copy{top:calc(env(safe-area-inset-top,0px) + 84px);bottom:40px}
  .hero-copy .hero-label{margin-bottom:8px;font-size:.92rem}
  .hero-copy .hero-lead{margin-top:10px;font-size:.95rem;line-height:1.65}
  .ctas{margin-top:16px}
  .ctas .btn{padding:11px 20px;font-size:.95rem}
  .hint{display:none}
}