/* Home page: one dark stage. Default = scenes stacked as a normal page; .fx-on (set by home.js) pins the stage over the particle canvas. */
body.home{background:var(--navy-950);color:#fff}
.home main{position:relative;z-index:1}
#fx{position:fixed;left:0;top:0;width:100vw;height:100vh;height:100lvh;z-index:-1;display:none} /* inside <main>, so -1 keeps it behind every section */
.fx-on #fx{display:block}
.home .site-head{position:fixed;inset:0 0 auto 0;background:transparent;border-color:transparent;transition:background .35s,border-color .35s}
.scrolled .home .site-head,.nav-open .home .site-head{background:#081828d9;border-color:#12314A;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.home .eyebrow{color:var(--blue)}
.home .lead{color:#C3D2DE;font-size:1.1rem;max-width:34rem}
.home .actions{display:flex;gap:10px;flex-wrap:wrap}

.stage{padding-top:var(--head-h)}
.scene{padding-block:72px;border-bottom:1px solid #0F2A40}
.scene .txt{display:grid;gap:18px;max-width:35rem;justify-items:start}
.scene h1{font-size:clamp(2.5rem,6vw,4.5rem);line-height:1.04}
.scene h1 span{display:block;color:var(--blue)}
.scene h2{font-size:clamp(1.9rem,4.2vw,3.2rem)}
.scene .mark img{height:44px;width:auto}
.scene .mark.dark img{mix-blend-mode:screen;height:40px}
.home .chips li{background:#0F2D45;color:#CFE3F2;font-size:.8rem;padding:5px 12px}
.brand-list{list-style:none;margin:0;padding:0;display:grid;gap:2px;width:100%}
.brand-list a{display:grid;grid-template-columns:8.5rem 1fr;gap:14px;align-items:baseline;padding:11px 0;border-top:1px solid #16405E;color:#fff;text-decoration:none;transition:padding .25s var(--ease),color .2s}
.brand-list a:hover{padding-inline-start:8px;color:var(--blue)}
.brand-list b{font-family:var(--display);font-size:1.05rem}
.brand-list span{color:#9FB6C8;font-size:.9rem}
.scroll-hint{font:500 .72rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#7F9BB1;display:none}
.stage-ind,.rail,.labels{display:none}

/* ---- pinned story (only when the canvas is running) ---- */
.fx-on .story{height:calc(var(--n) * 100vh)}
.fx-on .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;padding:0}
.fx-on .scene{position:absolute;inset:0;display:grid;align-content:center;padding-block:var(--head-h) 40px;border:0;opacity:0;pointer-events:none;will-change:opacity,transform}
.fx-on .scene.on{pointer-events:auto}
.fx-on .scene .wrap{width:100%}
.fx-on .scroll-hint{display:block;margin-top:14px}
.fx-on .scroll-hint::after{content:"";display:inline-block;width:1px;height:34px;background:linear-gradient(#7F9BB1,transparent);margin-inline-start:14px;vertical-align:middle;animation:hint 1.8s var(--ease) infinite}
@keyframes hint{0%{transform:scaleY(0);transform-origin:top}60%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(1);opacity:0}}
.fx-on .labels{display:block;position:absolute;inset:0;z-index:0;pointer-events:none}
.lbl{position:absolute;left:0;top:0;font:500 .7rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#DCEBF5;white-space:nowrap;opacity:0;text-shadow:0 0 10px var(--navy-950),0 0 4px var(--navy-950);will-change:transform,opacity}
.lbl.big{font:700 .95rem/1 var(--display);letter-spacing:0;text-transform:none;color:#fff}
.fx-on .stage-ind{display:block;position:absolute;left:0;right:0;bottom:26px;margin:0;z-index:2;font:500 .72rem var(--mono);letter-spacing:.16em;color:#8FB0C8}
.fx-on .stage-ind span{display:block;max-width:1180px;margin-inline:auto;padding-inline:20px}
.fx-on .rail{display:block;position:absolute;inset-inline-end:22px;top:50%;width:2px;height:140px;margin-top:-70px;background:#16405E;z-index:2;border-radius:2px}
.fx-on .rail i{position:absolute;inset:0;background:var(--blue);transform-origin:top;transform:scaleY(var(--prog,0));border-radius:2px}
@media (min-width:901px){.fx-on .scene .dup{display:none}.fx-on .scene .txt{max-width:30rem}}
@media (max-width:900px){
  .fx-on .scene{align-content:end;padding-bottom:64px}
  .fx-on .scene .txt{gap:12px}
  .fx-on .scene h1{font-size:clamp(2rem,9vw,2.8rem)}
  .fx-on .scene h2{font-size:clamp(1.55rem,6.6vw,2.1rem)}
  .fx-on .home .lead,.fx-on .scene .lead{font-size:.98rem}
  .fx-on .scene .mark img{height:32px}
  .fx-on .scroll-hint{display:none}
  .fx-on .rail{inset-inline-end:10px;height:90px;margin-top:-45px;top:30%}
  .fx-on .stage-ind{bottom:22px}
  .lbl{font-size:.58rem}.lbl.big{font-size:.78rem}
  .brand-list a{grid-template-columns:6.5rem 1fr;padding:7px 0}.brand-list span{font-size:.8rem}
  .fx-on .brand-list{grid-template-columns:1fr 1fr;gap:0 16px}.fx-on .brand-list a{grid-template-columns:1fr}.fx-on .brand-list span{display:none}
}

/* ---- after the story ---- */
.h-stats{padding-block:16vh}
.h-stats .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 24px}
.h-stat b{display:block;font:600 clamp(2.6rem,6.5vw,5rem)/1 var(--mono);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.h-stat span{display:block;margin-top:10px;color:#9FB6C8;max-width:14ch}
.h-build{padding-block:12vh}
.h-build .wrap{display:grid;gap:18px}
.h-build h2{font-size:clamp(2rem,4.6vw,3.4rem);max-width:18ch}
.flow{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;counter-reset:f;position:relative}
.flow::before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:linear-gradient(90deg,var(--blue),#16405E);transform-origin:left;transform:scaleX(var(--draw,1))}
[dir=rtl] .flow::before{background:linear-gradient(270deg,var(--blue),#16405E);transform-origin:right}
.flow li{padding-block-start:30px;padding-inline-end:14px;font:600 1.02rem var(--display);position:relative}
.flow li::before{content:"";position:absolute;inset-inline-start:0;top:0;width:16px;height:16px;border-radius:50%;background:var(--navy-950);border:2px solid var(--blue)}
.flow li span{display:block;font:500 .7rem var(--mono);letter-spacing:.14em;color:#7F9BB1;margin-bottom:6px}
.h-final{min-height:92vh;display:grid;align-items:center;text-align:center;padding-block:14vh}
.h-final .wrap{display:grid;gap:26px;justify-items:center}
.final-logo{width:min(520px,78vw);height:auto}
.fx-on .final-logo{opacity:0}
.h-final h2{font-size:clamp(1.9rem,4.4vw,3.2rem);max-width:18ch}
.h-final .actions{justify-content:center}
.final-contact{color:#9FB6C8;font:500 1rem/1.9 var(--mono)}
.final-contact a{color:#fff;text-decoration:none}
@media (max-width:900px){
  .h-stats .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow{grid-template-columns:minmax(0,1fr)}
  .flow::before,[dir=rtl] .flow::before{inset-inline:7px auto;top:0;bottom:0;width:2px;height:auto;transform-origin:top;transform:scaleY(var(--draw,1));background:linear-gradient(var(--blue),#16405E)}
  .flow li{padding-block:0 26px;padding-inline:34px 0}
}

html[lang=ar] .scene h1{line-height:1.3}
html[lang=ar] .lbl{font-size:.82rem}
html[lang=ar] .fx-on .stage-ind{font-size:.85rem}
@media (max-width:900px){html[lang=ar] .lbl{font-size:.68rem}}