/* Prophet AI landing page (scroll story). Deep Space + liquid glass. */
:root { --bg:#04060f; --text:#eef2ff; --sub:#a8b4cc; --muted:#64768c; --acc:#00ff88; --blue:#4a6bff; --edge:rgba(255,255,255,.10); }
* { box-sizing:border-box; margin:0; padding:0; }
html { background:var(--bg); }
body { font-family:Inter,system-ui,sans-serif; color:var(--text); background:radial-gradient(1200px 800px at 70% 40%, #0b1233 0%, #05070f 60%, #020308 100%) fixed; overflow-x:hidden; }
.glass { background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.025) 45%,rgba(255,255,255,.04)); border:1px solid var(--edge);
  backdrop-filter:blur(22px) saturate(1.6); -webkit-backdrop-filter:blur(22px) saturate(1.6); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 18px 50px rgba(0,0,0,.45); }

/* nav */
nav { position:fixed; top:14px; left:50%; transform:translateX(-50%); width:min(1120px,calc(100% - 24px)); z-index:20; display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:16px; }
.logo { white-space:nowrap; display:flex; align-items:center; gap:9px; font-weight:800; font-size:17px; color:var(--text); text-decoration:none; }
.logo svg { width:26px; height:26px; } .logo b { color:var(--acc); }
nav .sp { flex:1; }
.lang { display:flex; border:1px solid var(--edge); border-radius:10px; overflow:hidden; font-size:12px; font-weight:600; }
.lang button { padding:6px 9px; color:var(--muted); background:none; border:0; font:inherit; cursor:pointer; transition:color .2s, background .2s; } .lang button:hover { color:var(--text); } .lang .on { color:var(--acc); background:rgba(0,255,136,.08); }
.btn { position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:8px; border-radius:13px; padding:12px 20px; font-weight:600; font-size:15px; color:var(--text); text-decoration:none; transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.btn::before { content:""; position:absolute; top:0; left:-60%; width:45%; height:100%; transform:skewX(-20deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent); transition:left .7s cubic-bezier(.2,.8,.2,1); }
.btn:hover { transform:translateY(-2px); } .btn:hover::before { left:120%; }
.go { color:#03140b; background:linear-gradient(180deg,#3dffa6,#00e07a); box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 8px 30px rgba(0,255,136,.28); }
.go:hover { box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 12px 40px rgba(0,255,136,.45); }
nav .btn { padding:8px 14px; font-size:14px; white-space:nowrap; }

/* the story: a tall scroll area with one sticky stage */
#story { position:relative; height:1500vh; }
#stage { position:sticky; top:0; height:100vh; overflow:hidden; }
#map { position:absolute; inset:0; width:100%; height:100%; }

/* opening */
#hero { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 20px; z-index:5; will-change:opacity,transform; }
#hero svg.big { width:96px; height:101px; margin-bottom:24px; filter:drop-shadow(0 0 18px rgba(0,255,136,.45)); opacity:0; animation:pop 1s ease .2s forwards; }
/* the original Prophet logo animation: radar arm sweeps up and down, inner ring turns, outer ring breathes */
.lg-sw { transform-origin:96px 82px; transform-box:view-box; animation:lg-sw 3s cubic-bezier(.45,0,.55,1) infinite alternate; }
.lg-t1 { animation-delay:-.12s; opacity:.35; } .lg-t2 { animation-delay:-.26s; opacity:.15; }
@keyframes lg-sw { 0% { transform:rotate(-65deg); } 100% { transform:rotate(65deg); } }
.lg-ir { transform-origin:96px 82px; transform-box:view-box; animation:lg-ir 18s linear infinite; }
@keyframes lg-ir { to { transform:rotate(360deg); } }
.lg-bp { animation:lg-bp 3s ease-in-out infinite alternate; } @keyframes lg-bp { 0% { r:5; opacity:1; } 100% { r:7.5; opacity:.7; } }
.lg-ob { animation:lg-ob 4s ease-in-out infinite; } @keyframes lg-ob { 0%,100% { opacity:.75; } 50% { opacity:1; } }
/* small nav logo: its arm sweeps too */
.nav-arm { transform-origin:12px 16px; transform-box:view-box; animation:nav-sw 3s cubic-bezier(.45,0,.55,1) infinite alternate; }
@keyframes nav-sw { 0% { transform:rotate(-50deg); } 100% { transform:rotate(40deg); } }
.draw { stroke-dasharray:200; stroke-dashoffset:200; animation:draw 1.8s cubic-bezier(.6,0,.2,1) .2s forwards; }
.draw2 { animation-delay:.9s; } .pop { opacity:0; animation:pop .6s ease 1.6s forwards; }
@keyframes draw { to { stroke-dashoffset:0; } } @keyframes pop { to { opacity:1; } }
h1 { font-size:clamp(40px,6.6vw,86px); line-height:1.02; letter-spacing:-2.4px; font-weight:800; opacity:0; animation:rise 1s cubic-bezier(.2,.8,.2,1) 1.1s forwards; }
h1 .g { background:linear-gradient(90deg,#fff,#9fffd2 35%,#00ff88); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead { color:var(--sub); font-size:clamp(16px,1.6vw,20px); margin-top:18px; opacity:0; animation:rise 1s cubic-bezier(.2,.8,.2,1) 1.35s forwards; }
.cta { display:flex; gap:12px; margin-top:30px; opacity:0; animation:rise 1s cubic-bezier(.2,.8,.2,1) 1.6s forwards; flex-wrap:wrap; justify-content:center; }
.from { margin-top:16px; font-size:13px; color:var(--muted); opacity:0; animation:rise 1s ease 1.9s forwards; } .from b { color:var(--text); }
.hint { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); font-size:12px; letter-spacing:2px; color:var(--muted); text-transform:uppercase; opacity:0; animation:pop .8s ease 2.4s forwards; }
.hint i { display:block; width:1px; height:34px; margin:10px auto 0; background:linear-gradient(var(--acc),transparent); animation:drip 2s ease-in-out infinite; }
@keyframes rise { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
@keyframes drip { 0% { transform:scaleY(0); transform-origin:top; } 50% { transform:scaleY(1); transform-origin:top; } 51% { transform-origin:bottom; } 100% { transform:scaleY(0); transform-origin:bottom; } }

/* chapter captions: one title + one line */
.cap { position:absolute; left:max(6vw,24px); top:50%; transform:translateY(-40%); max-width:440px; z-index:6; opacity:0; transition:opacity .7s ease, transform .9s cubic-bezier(.2,.8,.2,1); pointer-events:none; }
.cap.on { opacity:1; transform:translateY(-50%); }
.cap .k { font-size:12px; font-weight:700; letter-spacing:2.4px; color:var(--acc); text-transform:uppercase; display:flex; align-items:center; gap:10px; }
.cap .k::before { content:""; width:26px; height:1px; background:var(--acc); }
.cap h2 { font-size:clamp(34px,4.4vw,60px); line-height:1.04; letter-spacing:-1.6px; margin:14px 0 14px; }
.cap p { color:var(--sub); font-size:clamp(15px,1.4vw,19px); line-height:1.5; }
.shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(3,5,12,.88) 0%,rgba(3,5,12,.55) 34%,transparent 60%); z-index:4; opacity:0; transition:opacity .8s; pointer-events:none; }
.shade.on { opacity:1; }

/* noise chips around the AI core (scene 2) */
.chip { position:absolute; z-index:6; font-size:13px; font-weight:600; padding:7px 12px; border-radius:99px; color:#c9d3e6; opacity:0; transform:scale(.9); transition:opacity .5s, transform .5s; white-space:nowrap; }
.chip::after { content:""; position:absolute; left:10px; right:10px; top:50%; height:1.5px; background:#ff5d7a; transform:scaleX(0); transform-origin:left; transition:transform .5s ease .15s; }
.chip.on { opacity:1; transform:scale(1); } .chip.cut::after { transform:scaleX(1); } .chip.on.cut { opacity:.35; }

/* progress rail */
#rail { position:fixed; right:22px; top:50%; transform:translateY(-50%); z-index:15; display:flex; flex-direction:column; gap:16px; opacity:0; transition:opacity .6s; }
#rail.on { opacity:1; }
#rail div { text-shadow:0 0 8px #000, 0 0 3px #000; display:flex; align-items:center; gap:10px; justify-content:flex-end; font-size:11px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color:var(--muted); transition:color .4s; }
#rail div i { width:8px; height:8px; border-radius:50%; border:1px solid var(--muted); transition:all .4s; }
#rail div.on { color:var(--text); } #rail div.on i { background:var(--acc); border-color:var(--acc); box-shadow:0 0 12px var(--acc); }
#rail div.soon { opacity:.45; }

/* after the story (placeholder for the next steps) */
.next { position:relative; z-index:2; max-width:760px; margin:0 auto 120px; padding:40px 28px; border-radius:24px; text-align:center; }
.next h3 { font-size:24px; margin-bottom:8px; } .next p { color:var(--sub); }


/* ═════ scene 3-6 objects (positioned in the stage; JS drives them with the scroll) ═════ */
.obj { position:absolute; left:64vw; top:53vh; z-index:7; opacity:0; pointer-events:none; will-change:transform,opacity; }
.tag-ex { position:absolute; top:-26px; right:4px; font-size:10px; letter-spacing:1.6px; text-transform:uppercase; color:var(--muted); }

/* property card (Check) */
#prop { width:340px; margin:-200px 0 0 -170px; border-radius:22px; padding:14px; }
#prop .ph { height:150px; border-radius:14px; overflow:hidden; position:relative; background:linear-gradient(160deg,#16224f,#0a1630 55%,#0b2a24); }
#prop .ph svg { position:absolute; inset:0; width:100%; height:100%; }
#prop h4 { font-size:17px; margin:14px 4px 4px; } #prop .meta { color:var(--sub); font-size:13px; margin:0 4px 10px; }
#prop ul { list-style:none; display:grid; gap:8px; margin:6px 4px 4px; }
#prop li { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--muted); transition:color .4s; }
#prop li i { width:20px; height:20px; border-radius:50%; border:1.5px solid #3a4a66; display:grid; place-items:center; font-style:normal; font-size:12px; color:transparent; transition:all .4s cubic-bezier(.2,.8,.2,1); }
#prop li.ok { color:var(--text); } #prop li.ok i { background:var(--acc); border-color:var(--acc); color:#03140b; box-shadow:0 0 12px rgba(0,255,136,.6); }
#stamp { position:absolute; right:-18px; top:110px; padding:9px 16px; border:2px solid var(--acc); border-radius:12px; color:var(--acc); font-weight:800; letter-spacing:2px;
  font-size:15px; background:rgba(0,30,18,.75); transform:rotate(-12deg) scale(2.2); opacity:0; transition:transform .45s cubic-bezier(.3,1.6,.5,1), opacity .25s; box-shadow:0 0 30px rgba(0,255,136,.35); }
#stamp.on { opacity:1; transform:rotate(-12deg) scale(1); }

/* laptop (Deliver + Dashboard) */
#laptop { width:660px; margin:-215px 0 0 -330px; }
#laptop .lid { border-radius:18px 18px 6px 6px; padding:12px; background:linear-gradient(180deg,#2a2f3e,#151924); border:1px solid rgba(255,255,255,.12); box-shadow:0 40px 90px rgba(0,0,0,.6), 0 0 80px rgba(0,255,136,.06); }
#laptop .base { height:16px; margin:0 -34px; border-radius:2px 2px 16px 16px; background:linear-gradient(180deg,#3a4152,#1a1e29); }
#laptop .base::after { content:""; display:block; width:110px; height:6px; margin:0 auto; border-radius:0 0 8px 8px; background:#10131b; }
#screen { position:relative; height:372px; border-radius:8px; overflow:hidden; background:linear-gradient(150deg,#0a0f2b,#05080f 60%); font-size:12px; }
.sbar { display:flex; align-items:center; gap:14px; padding:10px 14px; border-bottom:1px solid rgba(255,255,255,.06); background:rgba(5,8,22,.8); }
.sbar b { font-size:13px; } .sbar b em { color:var(--acc); font-style:normal; }
.sbar span { color:var(--muted); padding:4px 8px; border-radius:7px; transition:all .35s; } .sbar span.on { color:var(--acc); background:rgba(0,255,136,.09); }
.view { position:absolute; inset:41px 0 0 0; padding:16px; opacity:0; transform:translateY(10px); transition:opacity .45s, transform .55s cubic-bezier(.2,.8,.2,1); }
.view.on { opacity:1; transform:none; }
.gc { background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.08); border-radius:12px; }
.hi { font-size:17px; font-weight:700; margin-bottom:12px; } .hi small { display:block; font-size:10px; color:var(--muted); font-weight:500; letter-spacing:1px; margin-bottom:3px; }
.homegrid { display:grid; grid-template-columns:1.1fr 1fr; gap:12px; }
.ringbox { padding:14px; display:grid; place-items:center; height:250px; }
.mring { width:150px; height:150px; border-radius:50%; background:conic-gradient(var(--acc) 0 calc(var(--fill,40)*1%), rgba(255,255,255,.08) 0); -webkit-mask:radial-gradient(circle,transparent 57%,#000 58%); mask:radial-gradient(circle,transparent 57%,#000 58%); filter:drop-shadow(0 0 10px rgba(0,255,136,.35)); }
.ringlbl { margin-top:-98px; text-align:center; color:var(--sub); font-size:11px; height:98px; }
.side { display:grid; gap:10px; } .side .gc { padding:12px; } .side .t { font-size:10px; letter-spacing:1px; color:var(--muted); text-transform:uppercase; margin-bottom:8px; }
.ln { height:8px; border-radius:6px; background:rgba(255,255,255,.12); margin-top:7px; }
#toast { position:absolute; right:14px; top:52px; padding:10px 12px; border-radius:12px; display:flex; gap:10px; align-items:center; background:rgba(10,30,22,.92); border:1px solid rgba(0,255,136,.35);
  box-shadow:0 10px 30px rgba(0,0,0,.5), 0 0 24px rgba(0,255,136,.2); transform:translateX(130%); transition:transform .6s cubic-bezier(.2,.8,.2,1); z-index:3; }
#toast.on { transform:none; } #toast i { width:8px; height:8px; border-radius:50%; background:var(--acc); box-shadow:0 0 10px var(--acc); }
#toast b { display:block; font-size:12px; } #toast small { color:var(--sub); }
.rows { display:grid; gap:8px; }
.row { display:grid; grid-template-columns:28px 1fr 80px 70px; gap:10px; align-items:center; padding:9px 10px; opacity:0; transform:translateX(16px); transition:all .5s cubic-bezier(.2,.8,.2,1); }
.view.on .row { opacity:1; transform:none; } .view.on .row:nth-child(2) { transition-delay:.08s; } .view.on .row:nth-child(3) { transition-delay:.16s; } .view.on .row:nth-child(4) { transition-delay:.24s; } .view.on .row:nth-child(5) { transition-delay:.32s; }
.av { width:28px; height:28px; border-radius:9px; background:linear-gradient(135deg,#1c2b6b,#0c3d2a); }
.st { font-size:10px; font-weight:700; padding:4px 8px; border-radius:99px; text-align:center; }
.s1 { color:var(--acc); background:rgba(0,255,136,.1); } .s2 { color:#8fb2ff; background:rgba(80,120,255,.14); } .s3 { color:#ffcf6b; background:rgba(255,190,60,.12); } .s4 { color:#d6a0ff; background:rgba(170,90,255,.14); }
.fu { color:var(--muted); font-size:10px; }
.match { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:110px; padding:4px 6px; }
.match .col { display:grid; gap:12px; } .match .gc { padding:12px; height:62px; position:relative; z-index:1; }
.match .gc b { font-size:11px; color:var(--sub); font-weight:600; }
#lines { position:absolute; inset:0; width:100%; height:100%; z-index:0; overflow:visible; }
#lines path { fill:none; stroke:var(--acc); stroke-width:2; stroke-dasharray:300; stroke-dashoffset:300; filter:drop-shadow(0 0 6px rgba(0,255,136,.7)); transition:stroke-dashoffset 1.1s cubic-bezier(.6,0,.2,1); }
.view.on #lines path { stroke-dashoffset:0; } .view.on #lines path:nth-child(2) { transition-delay:.35s; } .view.on #lines path:nth-child(3) { transition-delay:.7s; }
.alerts .gc { display:flex; gap:12px; align-items:center; padding:12px; margin-bottom:9px; }
.alerts .dot { width:32px; height:32px; border-radius:10px; display:grid; place-items:center; font-size:15px; background:rgba(0,255,136,.08); border:1px solid rgba(0,255,136,.2); }
.alerts .gc.new { border-color:rgba(0,255,136,.35); box-shadow:0 0 22px rgba(0,255,136,.12); animation:glowp 1.8s ease-in-out infinite; }
@keyframes glowp { 50% { box-shadow:0 0 34px rgba(0,255,136,.25); } }
.alerts b { display:block; font-size:12px; } .alerts small { color:var(--muted); }
.tourlbl { position:absolute; left:50%; bottom:-58px; transform:translateX(-50%); font-size:13px; color:var(--sub); white-space:nowrap; }
.tourlbl b { color:var(--text); }

/* custom AI agents */
#agents { width:420px; height:420px; margin:-210px 0 0 -210px; }
#agents .hub { position:absolute; left:50%; top:50%; width:96px; height:96px; margin:-48px 0 0 -48px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle,rgba(0,255,136,.25),rgba(0,255,136,0) 70%); }
#agents .hub svg { width:58px; height:62px; }
#agents .orbit { position:absolute; inset:0; border-radius:50%; border:1px dashed rgba(0,255,136,.18); animation:spin 26s linear infinite; }
#agents .orbit.o2 { inset:70px; animation-duration:18s; animation-direction:reverse; }
#agents .ag { position:absolute; width:58px; height:58px; margin:-29px 0 0 -29px; border-radius:18px; display:grid; place-items:center; font-size:24px; }
#agents .orbit .ag { animation:spin 26s linear infinite reverse; } #agents .orbit.o2 .ag { animation:spin 18s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* after the story: plans, questions, final call */
.after { position:relative; z-index:2; max-width:1000px; margin:0 auto; padding:0 20px 60px; }
.plans { text-align:center; padding:48px 24px; border-radius:26px; margin-bottom:90px; }
.kick { color:var(--acc); font-size:12px; font-weight:700; letter-spacing:2.4px; text-transform:uppercase; }
.price { font-size:clamp(38px,5vw,60px); font-weight:800; letter-spacing:-1.5px; margin:10px 0; } .price small { font-size:18px; color:var(--sub); font-weight:500; letter-spacing:0; }
.chips2 { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:18px 0 28px; }
.chips2 span { padding:8px 14px; border-radius:99px; font-size:14px; color:var(--sub); border:1px solid var(--edge); background:rgba(255,255,255,.03); }
.after h2 { font-size:clamp(30px,4vw,46px); letter-spacing:-1.2px; margin:10px 0 22px; }
.faq { display:grid; gap:12px; max-width:760px; margin-bottom:90px; }
.faq details { padding:18px 22px; border-radius:18px; transition:border-color .3s, transform .35s cubic-bezier(.2,.8,.2,1); } .faq details:hover { border-color:rgba(0,255,136,.28); transform:translateX(4px); }
.faq summary { cursor:pointer; font-weight:600; list-style:none; display:flex; justify-content:space-between; } .faq summary::after { content:"+"; color:var(--acc); } .faq details[open] summary::after { content:"–"; }
.faq p { color:var(--sub); margin-top:10px; line-height:1.6; }
.final { text-align:center; padding:60px 24px; border-radius:26px; } .final p { color:var(--sub); margin-bottom:26px; }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); } .reveal.in { opacity:1; transform:none; }
.after .glass { transition:transform .45s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .45s; }
.after .plans:hover, .after .final:hover { transform:translateY(-4px); border-color:rgba(0,255,136,.25); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 26px 60px rgba(0,0,0,.55), 0 0 40px rgba(0,255,136,.08); }
footer { position:relative; z-index:2; max-width:1000px; margin:0 auto; padding:10px 20px 40px; display:flex; justify-content:space-between; color:var(--muted); font-size:13px; }

@media (max-width:820px) {
  .obj { left:50vw; top:40vh; } #laptop { transform-origin:center; } .tourlbl { bottom:-46px; }
  .cap { top:auto; bottom:9vh; transform:translateY(20px); left:20px; right:20px; max-width:none; }
  .cap.on { transform:none; }
  .shade { background:linear-gradient(0deg,rgba(3,5,12,.92) 0%,rgba(3,5,12,.6) 38%,transparent 62%); }
  #rail { display:none; } nav .hide-sm { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .lg-sw, .lg-ir, .lg-bp, .lg-ob, .nav-arm, #hero svg.big, .draw, h1, .lead, .cta, .from, .hint, .pop { animation:none !important; opacity:1 !important; stroke-dashoffset:0 !important; }
  .cap, .chip { transition:none; }
}

/* ── Arabic (right-to-left): text on the right, story on the left ── */
html[lang="ar"] body { font-family:"IBM Plex Sans Arabic",Inter,system-ui,sans-serif; }
html[lang="ar"] h1, html[lang="ar"] .cap h2 { letter-spacing:0; line-height:1.25; }
html[lang="ar"] .cap .k, html[lang="ar"] .kick, html[lang="ar"] #rail div { letter-spacing:0; }
[dir="rtl"] .cap { left:auto; right:max(6vw,24px); }
[dir="rtl"] .shade { background:linear-gradient(270deg,rgba(3,5,12,.88) 0%,rgba(3,5,12,.55) 34%,transparent 60%); }
[dir="rtl"] .obj { left:36vw; }
[dir="rtl"] #rail { right:auto; left:22px; }
[dir="rtl"] #rail div { flex-direction:row-reverse; justify-content:flex-end; }
[dir="rtl"] .tag-ex { right:auto; left:4px; }
[dir="rtl"] #stamp { right:auto; left:-18px; transform:rotate(12deg) scale(2.2); } [dir="rtl"] #stamp.on { transform:rotate(12deg) scale(1); }
[dir="rtl"] #toast { right:auto; left:14px; transform:translateX(-130%); } [dir="rtl"] #toast.on { transform:none; }
[dir="rtl"] .faq details:hover { transform:translateX(-4px); }
footer a { color:var(--muted); text-decoration:none; } footer a:hover { color:var(--text); }
@media (max-width:820px) { [dir="rtl"] .obj { left:50vw; } [dir="rtl"] .cap { right:20px; left:20px; } [dir="rtl"] .shade { background:linear-gradient(0deg,rgba(3,5,12,.92) 0%,rgba(3,5,12,.6) 38%,transparent 62%); } }