/* 9th Floor site. Layout: a dark building. The hero pins while hype streaks settle into the
   9 floors of the mark; every section below is a numbered floor on a side index.
   Arabic pages set dir="rtl" on <html>; the [dir=rtl] rules at the end flip what CSS can't. */
:root{
  --ink:#111418; --ink-2:#181C21; --ink-3:#22272E; --line:#2C323A;
  --concrete:#F2EFE9; --steel:#8A8F98; --sand:#D8CFC0; --orange:#FF5A1F;
  --display:'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --body:'Inter', 'Helvetica Neue', Arial, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--concrete);font-family:var(--body);font-size:17px;line-height:1.6;overflow-x:hidden}
img{max-width:100%}
a{color:inherit}
::selection{background:var(--orange);color:var(--ink)}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(24px, env(safe-area-inset-left,0px));padding-right:max(24px, env(safe-area-inset-right,0px))}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.h{font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:.98;text-wrap:balance;margin:0}
.o{color:var(--orange)}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
/* Visually hidden without pushing the page sideways (left:-9999px adds a scrollbar in RTL). */
.skip,.hp{position:absolute;top:0;inset-inline-start:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{width:auto;height:auto;clip-path:none;z-index:100;top:16px;inset-inline-start:16px;background:var(--orange);color:var(--ink);padding:12px 16px}

/* grain */
.grain{position:fixed;inset:-50%;pointer-events:none;z-index:50;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(0,0)}}

/* nav */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:41;background:var(--ink)}
.nav{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:40;background:rgba(17,20,24,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(44,50,58,.6)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand span{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.02em}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{text-decoration:none;color:var(--sand);font-size:14px}
.nav-links a:hover{color:var(--concrete)}
.nav-links a.lang{font-family:var(--mono);font-size:13px;color:var(--concrete);border:1px solid var(--line);padding:6px 10px;min-height:36px;display:inline-flex;align-items:center}
.nav-links a.lang:hover{border-color:var(--orange)}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;background:var(--orange);color:var(--ink)!important;font-family:var(--display);font-weight:700;font-size:16px;text-decoration:none;border:0;cursor:pointer;transition:transform .2s ease, background .2s}
.btn:hover{transform:translateY(-2px)}
.btn[disabled]{opacity:.6;cursor:progress;transform:none}
.btn.ghost{background:transparent;color:var(--concrete)!important;box-shadow:inset 0 0 0 1.5px var(--line)}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(4px)}
@media (max-width:820px){.nav-links a:not(.btn):not(.lang){display:none}.nav-links{gap:12px}}

/* floor index */
.floors{position:fixed;left:max(18px, env(safe-area-inset-left,0px));top:50%;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;gap:10px}
.floors a{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--steel);font-family:var(--mono);font-size:11px;letter-spacing:.1em}
.floors a i{display:block;width:14px;height:2px;background:var(--line);transition:width .3s, background .3s}
.floors a.on{color:var(--concrete)}
.floors a.on i{width:30px;background:var(--orange)}
.floors a span{opacity:0;transition:opacity .3s}
.floors a.on span,.floors:hover a span{opacity:1}
@media (max-width:1100px){.floors{display:none}}

/* hero */
.hero{position:relative;height:260vh}
.hero-pin{position:sticky;top:0;height:100svh;min-height:620px;overflow:hidden;display:flex;align-items:center}
#streaks{position:absolute;inset:0;width:100%;height:100%}
.hero-grid{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:48px;align-items:center}
.hero-copy{min-width:0}
.hero .eyebrow{color:var(--orange);margin:0 0 28px;display:flex;align-items:center;gap:12px}
.hero .eyebrow i{display:block;width:36px;height:1.5px;background:var(--orange)}
.swap{position:relative;font-size:clamp(52px,9vw,140px)}
.swap .l1,.swap .l2{display:block;transition:opacity .4s, transform .4s, filter .4s}
.swap .l2{color:var(--orange)}
.hero p.lede{margin:34px 0 0;max-width:520px;color:#B9BEC6;font-size:19px}
.hero .ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}
.mark-wrap{display:flex;justify-content:center}
#mark{width:min(100%,360px);height:auto;overflow:visible}
#mark path{fill:var(--concrete)}
#mark #tri{fill:var(--orange)}
.scroll-hint{position:absolute;bottom:28px;left:0;right:0;z-index:2;display:flex;justify-content:space-between;color:var(--steel)}
.meter{position:absolute;right:max(24px, env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);z-index:2;font-family:var(--mono);font-size:11px;color:var(--steel);writing-mode:vertical-rl;letter-spacing:.2em}
@media (max-width:820px){
  .hero{height:200vh}
  .hero-pin{padding-top:96px;align-items:flex-start}
  .hero-grid{grid-template-columns:1fr;gap:28px}
  .mark-wrap{order:-1;justify-content:flex-start}
  #mark{width:120px}
  .meter{display:none}
}

/* sections */
section.floor{position:relative;padding-block:140px;border-top:1px solid var(--line)}
@media (max-width:820px){section.floor{padding-block:96px}}
.tag{display:flex;align-items:center;gap:14px;color:var(--steel);margin:0 0 36px}
.tag b{color:var(--orange);font-weight:500}
.sec-title{font-size:clamp(38px,5.6vw,84px)}
.reveal{opacity:1;transform:none;transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
.js .reveal.pre{opacity:.12;transform:translateY(36px)}

/* problem */
.problem .big{font-size:clamp(38px,5.6vw,84px);max-width:16ch}
.problem .big .dim{color:var(--steel)}
.stack{margin-top:90px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--line);border:1px solid var(--line)}
.stack article{background:var(--ink);padding:40px 34px 44px;min-width:0;position:relative;overflow:hidden}
.stack article .n{font-family:var(--mono);font-size:12px;color:var(--steel);letter-spacing:.1em}
.stack article h3{font-family:var(--display);font-weight:700;font-size:28px;letter-spacing:-.02em;line-height:1.1;margin:70px 0 14px}
.stack article p{margin:0;color:#A9AEB6}
.stack article::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--orange);transition:width .6s ease}
.stack article:hover::after{width:100%}
@media (max-width:900px){.stack{grid-template-columns:1fr}}

/* bento */
.bento{margin-top:70px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.cell{background:var(--ink-2);border:1px solid var(--line);padding:34px;min-width:0;position:relative;overflow:hidden;transition:border-color .3s, transform .3s}
.cell:hover{border-color:#3C434D;transform:translateY(-3px)}
.cell h3{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.02em;line-height:1.1;margin:0 0 12px}
.cell p{margin:0;color:#A9AEB6;max-width:44ch}
.c1{grid-column:span 4;min-height:340px}
.c2{grid-column:span 2}
.c3{grid-column:span 2}
.c4{grid-column:span 4}
.funnel{display:flex;flex-direction:column;gap:8px;margin-top:40px}
.funnel div{height:30px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-family:var(--mono);font-size:12px;color:var(--ink);background:var(--concrete);transform-origin:left;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.funnel div:last-child{background:var(--orange)}
.js .funnel.pre div{transform:scaleX(.05)}
.sla{margin-top:30px;font-family:var(--mono);font-size:44px;color:var(--orange);letter-spacing:-.02em}
.sla small{display:block;font-size:12px;color:var(--steel);letter-spacing:.1em}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.chips span{font-family:var(--mono);font-size:12px;padding:7px 12px;border:1px solid var(--line);color:var(--sand)}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:30px}
.kpis div{border-top:2px solid var(--line);padding-top:12px;min-width:0}
.kpis b{display:block;font-family:var(--display);font-size:30px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kpis div:last-child{border-color:var(--orange)}
.kpis span{font-family:var(--mono);font-size:11px;color:var(--steel);letter-spacing:.08em}
@media (max-width:900px){.bento{grid-template-columns:1fr}.c1,.c2,.c3,.c4{grid-column:auto;min-height:0}}

/* timeline */
.timeline{margin-top:80px;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.rail{position:absolute;top:7px;left:0;right:0;height:2px;background:var(--line)}
.rail i{display:block;height:100%;width:0;background:var(--orange)}
.step{position:relative;padding-top:44px;min-width:0}
.step::before{content:"";position:absolute;top:0;inset-inline-start:0;width:16px;height:16px;background:var(--ink);border:2px solid var(--steel);transform:rotate(45deg) scale(.8);transition:background .3s,border-color .3s}
.step.on::before{background:var(--orange);border-color:var(--orange)}
.step .mono{color:var(--steel);margin:0}
.step h3{font-family:var(--display);font-weight:700;font-size:34px;letter-spacing:-.03em;margin:10px 0 12px}
.step p{margin:0;color:#A9AEB6}
@media (max-width:900px){.timeline{grid-template-columns:1fr;gap:36px}.rail{display:none}}

/* fit */
.fit-lede{max-width:620px;margin:28px 0 0;color:#A9AEB6;font-size:19px}
.fit{margin-top:70px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.fit > div{padding:44px;min-width:0}
.fit .yes{background:var(--concrete);color:var(--ink)}
.fit .no{border:1px solid var(--line)}
.fit h3{font-family:var(--display);font-weight:700;font-size:30px;letter-spacing:-.02em;margin:0 0 26px}
.fit ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.fit li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px}
.fit li::before{content:"";width:12px;height:12px;margin-top:7px;transform:skewX(-25deg)}
.fit .yes li::before{background:var(--orange)}
.fit .no li::before{border:1.5px solid var(--steel)}
.fit .no li{color:#A9AEB6}
@media (max-width:900px){.fit{grid-template-columns:1fr}.fit > div{padding:30px}}

/* founding */
.founding{background:var(--orange);color:var(--ink);border-top:0!important;overflow:hidden}
.founding .tag{color:var(--ink)}
.founding .tag b{color:var(--ink)}
.founding .h{font-size:clamp(56px,11vw,180px);line-height:.9}
.founding-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:48px;align-items:end;margin-top:50px}
.founding-row p{margin:0 0 18px;font-size:19px}
.founding .btn{background:var(--ink);color:var(--concrete)!important}
.marquee{margin-top:90px;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);white-space:nowrap;overflow:hidden}
.marquee div{display:inline-block;padding-block:16px;font-family:var(--display);font-weight:700;font-size:28px;letter-spacing:-.02em;animation:mq 30s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}
@media (max-width:900px){.founding-row{grid-template-columns:1fr}}

/* apply */
.apply-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
.apply-grid .h{font-size:clamp(40px,5vw,72px)}
.apply-lede{margin:28px 0 0;color:#A9AEB6;font-size:19px;max-width:440px}
form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 18px;background:var(--ink-2);border:1px solid var(--line);padding:40px}
.f{display:flex;flex-direction:column;gap:8px;min-width:0}
.f.full{grid-column:1/-1}
label,legend{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sand)}
input[type=text],input[type=email],input[type=url],input[type=tel],select,textarea{background:transparent;border:0;border-bottom:1.5px solid var(--line);color:var(--concrete);font:inherit;font-size:17px;padding:10px 0;min-height:48px;border-radius:0;transition:border-color .2s;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--orange)}
[aria-invalid=true]{border-color:#FF8A5F!important}
select option{background:var(--ink)}
fieldset{border:0;margin:0;padding:0;grid-column:1/-1;min-width:0}
.opts{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.opts label{font-family:var(--body);font-size:15px;letter-spacing:0;text-transform:none;color:var(--concrete);display:flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border:1px solid var(--line);cursor:pointer;transition:border-color .2s, background .2s}
.opts input{accent-color:var(--orange);width:16px;height:16px;margin:0}
.opts label:has(input:checked){border-color:var(--orange);background:rgba(255,90,31,.1)}
form .btn{grid-column:1/-1;justify-content:center;min-height:58px;font-size:18px}
.form-msg{grid-column:1/-1;margin:0;font-family:var(--mono);font-size:13px;color:var(--orange)}
.form-msg.err{color:#FF8A5F}
.done{grid-column:1/-1;padding:20px 0}
.done h3{font-family:var(--display);font-weight:700;font-size:34px;letter-spacing:-.03em;margin:0 0 12px}
.done p{margin:0;color:#A9AEB6}
@media (max-width:900px){.apply-grid{grid-template-columns:1fr;gap:40px}form{grid-template-columns:1fr;padding:26px}}

footer{border-top:1px solid var(--line);padding-block:60px 40px}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:30px}
.foot .h{font-size:clamp(34px,5vw,64px)}
.foot nav{display:flex;flex-wrap:wrap;gap:22px;font-size:14px;color:var(--sand)}
.foot small{display:block;margin-top:40px;color:var(--steel);font-family:var(--mono);font-size:11px;letter-spacing:.1em}

/* WhatsApp (temporary) */
.wa{position:fixed;bottom:max(20px, env(safe-area-inset-bottom,0px));inset-inline-end:max(20px, env(safe-area-inset-right,0px));z-index:45;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 18px 0 14px;background:#25D366;color:#0B1F12;font-family:var(--display);font-weight:700;font-size:15px;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.35);transition:transform .2s}
.wa:hover{transform:translateY(-2px)}
.wa svg{width:22px;height:22px;flex:none}
@media (max-width:820px){.wa span{display:none}.wa{padding:0;width:56px;justify-content:center;border-radius:50%}}

/* cursor */
.cur{position:fixed;left:0;top:0;width:10px;height:10px;background:var(--orange);pointer-events:none;z-index:60;transform:translate(-50%,-50%) rotate(45deg);transition:width .2s,height .2s;display:none}
@media (pointer:fine){.cur{display:block}}
.cur.big{width:34px;height:34px;background:transparent;border:1.5px solid var(--orange)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .hero{height:auto}.hero-pin{position:relative;height:auto;min-height:0;padding-block:160px 100px}
  .js .reveal.pre{opacity:1;transform:none}
}

/* ---------- Arabic (RTL) ---------- */
/* Arabic letters must stay joined: no letter-spacing, no uppercase, roomier line-height. */
[dir=rtl]{--display:'IBM Plex Sans Arabic','Space Grotesk',Arial,sans-serif;--body:'IBM Plex Sans Arabic','Inter',Arial,sans-serif}
[dir=rtl] body{font-size:18px;line-height:1.75}
[dir=rtl] .h{letter-spacing:0;line-height:1.2}
[dir=rtl] .swap{font-size:clamp(46px,8vw,124px)}
[dir=rtl] .founding .h{line-height:1.1}
[dir=rtl] .mono:not(.ltr),[dir=rtl] label,[dir=rtl] legend{font-family:var(--body);letter-spacing:0;text-transform:none;font-size:13px}
[dir=rtl] .stack article h3,[dir=rtl] .cell h3,[dir=rtl] .step h3,[dir=rtl] .fit h3,[dir=rtl] .done h3,[dir=rtl] .marquee div{letter-spacing:0;line-height:1.3}
[dir=rtl] .sla small,[dir=rtl] .stack article .n,[dir=rtl] .kpis span,[dir=rtl] .funnel div{font-family:var(--body);letter-spacing:0}
[dir=rtl] .floors{left:auto;right:max(18px, env(safe-area-inset-right,0px))}
[dir=rtl] .floors a{font-family:var(--body);letter-spacing:0;font-size:12px}
[dir=rtl] .meter{right:auto;left:max(24px, env(safe-area-inset-left,0px))}
[dir=rtl] .btn .arr{display:inline-block;transform:scaleX(-1)}
[dir=rtl] .btn:hover .arr{transform:scaleX(-1) translateX(4px)}
[dir=rtl] .funnel div{transform-origin:right}
[dir=rtl] .stack article::after{left:auto;right:0}
[dir=rtl] .fit li::before{transform:skewX(25deg)}
[dir=rtl] .marquee div{animation-name:mq-rtl}
@keyframes mq-rtl{to{transform:translateX(50%)}}
[dir=rtl] input[type=email],[dir=rtl] input[type=url],[dir=rtl] input[type=tel]{direction:ltr;text-align:right}
.ltr{direction:ltr;unicode-bidi:isolate}