html[lang=ar] .eyebrow,html[lang=ar] .tag,html[lang=ar] .tour-hint,html[lang=ar] .nav-back,html[lang=ar] .end-h2{text-transform:none!important}html[lang=ar] .lead,html[lang=ar] .lede,html[lang=ar] .diff-list li{line-height:1.75}html[lang=ar] .diff-list li{padding-left:0;padding-right:1.6rem}html[lang=ar] .diff-list li:before{left:auto;right:0}html[lang=ar] .caps-marquee,html[lang=ar] .caps-track{direction:ltr}html[lang=ar] .cap{text-align:right;direction:rtl}.project{position:relative}.eyebrow{letter-spacing:.32em;text-transform:uppercase;color:var(--accent);font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:.72rem;font-weight:600}html[lang=ar] .eyebrow{font-family:var(--font-body)}.reveal{opacity:0;transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1);transform:translateY(28px)}.reveal.in{opacity:1;transform:none}@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transition:none;transform:none}}#stars{z-index:0;pointer-events:none;width:100%;height:100%;position:fixed;inset:0}#bg-dragon{z-index:0;opacity:.55;pointer-events:none;will-change:transform;filter:drop-shadow(0 14px 30px #0009);width:clamp(120px,13vw,210px);height:auto;position:fixed;top:32vh;left:0}.project header,.project section,.project footer,.project .end{z-index:1;position:relative}.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(1.5rem,5vw,4rem)}#intro{z-index:12000;pointer-events:none;background:#08080c;display:flex;position:fixed;inset:0}#intro .p{background:linear-gradient(180deg,var(--intro-top),#0b0b12 55%,#08080c);will-change:transform;flex:1 1 0;height:100%;transition:transform 1.05s cubic-bezier(.76,0,.24,1);position:relative;transform:translateY(0)}#intro .p:after{content:"";background:linear-gradient(90deg,transparent,var(--accent) 25%,var(--seam) 50%,var(--accent) 75%,transparent);height:3px;box-shadow:0 0 20px 3px rgba(var(--glow),.7);opacity:0;transition:opacity .25s;position:absolute;bottom:-2px;left:-1px;right:-1px}#intro.open .p{transform:translateY(-102%)}#intro.open .p:after{opacity:1}#intro .p:first-child,#intro .p:first-child:after{transition-delay:0s}#intro .p:nth-child(2),#intro .p:nth-child(2):after{transition-delay:90ms}#intro .p:nth-child(3),#intro .p:nth-child(3):after{transition-delay:.18s}#intro .p:nth-child(4),#intro .p:nth-child(4):after{transition-delay:.27s}#intro .p:nth-child(5),#intro .p:nth-child(5):after{transition-delay:.36s}#intro .p:nth-child(6),#intro .p:nth-child(6):after{transition-delay:.45s}.project>nav{z-index:50;justify-content:space-between;align-items:center;padding:1.3rem clamp(1.5rem,5vw,2.75rem);display:flex;position:fixed;top:0;left:0;right:0}.project footer .fnav{position:static}.nav-logo{flex-direction:column;flex:none;align-items:flex-start;gap:6px;text-decoration:none;display:flex}.nav-logo img{width:auto;height:54px;transition:opacity .25s;display:block}.nav-logo:hover img{opacity:.82}.nav-logo-bars{flex-direction:column;gap:5px;width:100%;padding-inline-start:2px;display:flex}.nav-logo-bars span{background:#fff;height:1px;display:block}.nav-logo-bars span:first-child{width:100%}.nav-logo-bars span:last-child{width:45%}.nav-back{letter-spacing:.14em;text-transform:uppercase;color:#c7ccd6;align-items:center;gap:.5rem;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:.74rem;text-decoration:none;transition:color .25s,gap .25s;display:inline-flex}html[lang=ar] .nav-back{font-family:var(--font-body)}.nav-back:hover{color:#fff;gap:.85rem}.nav-actions{align-items:center;gap:.7rem;display:flex}.nav-cta{background:var(--accent);color:var(--btn-text);box-shadow:0 10px 30px rgba(var(--glow),.32);border-radius:999px;align-items:center;gap:.5rem;padding:.7rem 1.5rem;font-size:.9rem;font-weight:700;text-decoration:none;transition:transform .3s,box-shadow .3s;display:inline-flex}.nav-cta:hover{box-shadow:0 16px 40px rgba(var(--glow),.5);transform:translateY(-2px)}.nav-live{color:#eef2f7;border:1px solid #ffffff3d;border-radius:999px;align-items:center;gap:.4rem;padding:.66rem 1.25rem;font-size:.88rem;font-weight:600;text-decoration:none;transition:border-color .3s,color .3s,transform .3s;display:inline-flex}.nav-live:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}.nav-live .arr{font-size:1.02em;line-height:1}.lang-toggle{cursor:pointer;color:#eef2f7;font-family:var(--font-body);background:#ffffff0f;border:1px solid #ffffff38;border-radius:999px;align-items:center;gap:.4rem;padding:.6rem .9rem;font-size:.82rem;font-weight:700;line-height:1;transition:border-color .3s,color .3s,transform .3s;display:inline-flex}.lang-toggle:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}.lang-toggle svg{stroke:currentColor;fill:none;stroke-width:1.6px;width:16px;height:16px}@media (max-width:640px){.project>nav{padding:.85rem 1rem}.nav-logo img{height:46px}.nav-actions{gap:.5rem}.nav-back,.nav-live{display:none}.nav-cta{padding:.6rem 1.15rem;font-size:.85rem}}.hero{padding:clamp(9rem,20vh,15rem) 0 clamp(4rem,8vh,7rem);position:relative;overflow:hidden}.hero .hglow{background:radial-gradient(circle, rgba(var(--glow),.2), transparent 62%);filter:blur(60px);z-index:0;pointer-events:none;width:80vw;height:70vh;position:absolute;top:-10%;left:50%;transform:translate(-50%)}.hero .hglow2{background:radial-gradient(circle, rgba(var(--glow2),.32), transparent 64%);filter:blur(70px);z-index:0;pointer-events:none;width:44vw;height:44vh;position:absolute;top:6%;left:24%}.hero .wrap{z-index:1;position:relative}.hero .tags{flex-wrap:wrap;gap:.6rem;margin:1.4rem 0 0;display:flex}.tag{letter-spacing:.06em;color:#c7ccd6;border:1px solid #ffffff24;border-radius:999px;padding:.38rem .9rem;font-size:.72rem}.hero h1{font-family:var(--font-display);letter-spacing:-.03em;background:linear-gradient(180deg,#fff 30%,var(--grad));color:#0000;-webkit-background-clip:text;background-clip:text;margin:1.1rem 0 .5rem;font-size:clamp(2.8rem,7vw,5.5rem);font-weight:900;line-height:.96}html[lang=ar] .hero h1{font-stretch:100%}.hero .lead{color:#dfe4ea;max-width:36ch;margin-top:.5rem;font-size:clamp(1.1rem,1.7vw,1.4rem);font-weight:500;line-height:1.32}.hero .shot{margin-top:clamp(2.5rem,6vh,5rem);position:relative}.hero .shot:before{content:"";background:radial-gradient(60% 100% at 50% 100%, rgba(var(--glow),.22), transparent 72%);filter:blur(48px);z-index:0;height:38%;position:absolute;bottom:-4%;left:6%;right:6%}.hero .shot .browser{z-index:1;position:relative}.browser{background:#0f0f16;border:1px solid #ffffff1a;border-radius:14px;position:relative;overflow:hidden;box-shadow:0 50px 90px #0000009e,0 16px 34px #00000080}.browser .bbar{background:#15151e;border-bottom:1px solid #ffffff0f;align-items:center;gap:7px;height:clamp(30px,3.2vw,40px);padding:0 14px;display:flex}.bdot{border-radius:50%;width:10px;height:10px}.bdot:first-child{background:#ff5f57}.bdot:nth-child(2){background:#febc2e}.bdot:nth-child(3){background:#28c840}.burl{color:#8a9099;white-space:nowrap;direction:ltr;background:#ffffff0f;border-radius:6px;flex:1;align-items:center;height:22px;margin-inline-start:10px;padding:0 12px;font-family:ui-monospace,SF Mono,monospace;font-size:.72rem;display:flex;overflow:hidden}.browser img{aspect-ratio:16/10;object-fit:cover;object-position:top center;background:#fff;width:100%;display:block}.blk{padding:clamp(5rem,11vh,9rem) 0;position:relative}.kicker{margin-bottom:1rem}h2.big{font-family:var(--font-display);letter-spacing:-.02em;max-width:20ch;font-size:clamp(1.6rem,2.9vw,2.35rem);font-weight:800;line-height:1.12}.lede{color:#c7ccd6;max-width:52ch;margin-top:1.2rem;font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.6}.problem .grid{grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:clamp(2.5rem,5vh,4rem);display:grid}.problem .p{background:linear-gradient(#0f0f17,#0b0b12);border:1px solid #ffffff14;border-radius:16px;padding:1.8rem}.problem .p .n{color:#5a5f6b;font-family:ui-monospace,monospace;font-size:.8rem}.problem .p h3{font-family:var(--font-display);margin:.6rem 0 .5rem;font-size:1.2rem;font-weight:700}.problem .p p{color:#9aa0ad;font-size:.98rem;line-height:1.55}.caps-marquee{margin-top:clamp(2.5rem,5vh,4rem);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000,#000 5% 95%,#0000);mask-image:linear-gradient(90deg,#0000,#000 5% 95%,#0000)}.caps-track{gap:1.3rem;width:max-content;padding:.4rem .6rem;animation:44s linear infinite caps-slide;display:flex}.caps-marquee:hover .caps-track{animation-play-state:paused}@keyframes caps-slide{0%{transform:translate(0)}to{transform:translate(-50%)}}.cap{background:linear-gradient(#0f0f17,#0b0b12);border:1px solid #ffffff14;border-radius:18px;flex:none;width:clamp(258px,25vw,320px);padding:1.7rem;transition:border-color .4s,transform .4s,box-shadow .4s;position:relative;overflow:hidden}.cap:hover{border-color:rgba(var(--glow),.5);box-shadow:0 26px 60px #00000080, 0 0 46px -14px var(--accent);transform:translateY(-6px)}.cap .ic{background:rgba(var(--glow),.14);border:1px solid rgba(var(--glow),.35);border-radius:12px;justify-content:center;align-items:center;width:46px;height:46px;margin-bottom:1.2rem;display:flex}.cap .ic svg{width:22px;height:22px;stroke:var(--accent);fill:none;stroke-width:1.7px}.cap h3{font-family:var(--font-display);margin-bottom:.5rem;font-size:1.2rem;font-weight:700}.cap p{color:#9aa0ad;font-size:.96rem;line-height:1.55}@media (prefers-reduced-motion:reduce){.caps-track{flex-wrap:wrap;justify-content:center;width:auto;animation:none}.caps-marquee{-webkit-mask-image:none;mask-image:none}}.how .steps{grid-template-columns:repeat(4,1fr);align-items:start;gap:clamp(1rem,1.6vw,1.5rem);margin-top:clamp(3rem,6vh,5rem);display:grid}.how .s{background:linear-gradient(#0f0f17,#0b0b12);border:1px solid #ffffff14;border-radius:18px;padding:1.6rem 1.5rem 1.8rem;transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .4s,box-shadow .4s;position:relative;overflow:hidden}.how .s:after{content:"";background:linear-gradient(90deg,var(--accent),transparent);width:46%;height:3px;position:absolute;top:0;left:0}.how .s:nth-child(2n){margin-top:clamp(1.6rem,4vw,3.2rem)}.how .s:hover{border-color:rgba(var(--glow),.5);box-shadow:0 28px 64px #0000008c, 0 0 50px -14px var(--accent);transform:translateY(-8px)}.how .s .num{font-family:var(--font-display);color:var(--accent);margin-bottom:1.1rem;font-size:1.15rem;font-weight:900}.how .s h3{font-family:var(--font-display);margin-bottom:.45rem;font-size:1.1rem;font-weight:700}.how .s p{color:#9aa0ad;font-size:.92rem;line-height:1.5}.cta-btn{background:var(--accent);color:var(--btn-text);font-family:var(--font-body);box-shadow:0 14px 40px rgba(var(--glow),.32);cursor:pointer;border:none;border-radius:999px;align-items:center;gap:.55rem;padding:1rem 2.2rem;font-size:1rem;font-weight:700;text-decoration:none;transition:transform .3s,box-shadow .3s,gap .3s;display:inline-flex}.cta-btn:hover{box-shadow:0 20px 52px rgba(var(--glow),.5);gap:.85rem;transform:translateY(-2px)}.cta-btn.ghost{color:#eef2f7;box-shadow:none;background:0 0;border:1px solid #ffffff3d}.cta-btn.ghost:hover{border-color:var(--accent);color:var(--grad)}.sec-cta{justify-content:center;margin-top:clamp(3rem,6vh,5rem);display:flex}.tour{overflow:hidden}.tour-stage{perspective:1700px;perspective-origin:50%;height:min(62vh,540px);margin-top:clamp(2.5rem,5vh,4rem);position:relative}.tcard{width:min(58vw,700px);transform-style:preserve-3d;will-change:transform,opacity;position:absolute;top:50%;left:50%}.tcard .browser{width:100%;box-shadow:0 44px 80px #000000b3,0 14px 26px #00000080}.tcaption{text-align:center;color:#9aa0ad;min-height:3.4em;margin-top:clamp(1.6rem,3.5vh,2.6rem);font-size:clamp(1rem,1.4vw,1.25rem);line-height:1.5;transition:opacity .3s}.tcaption b{color:#eef2f7;font-family:var(--font-display);font-weight:700}.tour-hint{text-align:center;letter-spacing:.22em;text-transform:uppercase;color:#6b7280;margin-top:1rem;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:.7rem}html[lang=ar] .tour-hint{font-family:var(--font-body)}.tour.tour-static .tour-stage{perspective:none;grid-template-columns:1fr 1fr;gap:1.4rem;max-width:1180px;height:auto;margin-left:auto;margin-right:auto;padding:0 clamp(1.5rem,5vw,4rem);display:grid}.tour.tour-static .tcard{width:100%;position:relative;top:auto;left:auto;opacity:1!important;transform:none!important}.tour.tour-static .tour-hint{display:none}@media (max-width:560px){.tour.tour-static .tour-stage{grid-template-columns:1fr}}.diff-char-sec{background:linear-gradient(#0b0912,#0a0a0f);border-top:1px solid #ffffff0f;border-bottom:1px solid #ffffff0f}.diff-row{grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(2rem,5vw,4rem);display:grid}.diff-char{justify-content:center;display:flex;position:relative}.diff-char:before{content:"";background:radial-gradient(48% 56% at 50% 50%, rgba(var(--glow),.32), transparent 68%);filter:blur(50px);z-index:0;position:absolute;inset:2% 8% -4%}.diff-char:after{content:"";z-index:0;background:radial-gradient(closest-side,#0000008c,#0000);width:56%;height:26px;position:absolute;bottom:2%;left:50%;transform:translate(-50%)}.diff-char video,.diff-char img{z-index:1;filter:drop-shadow(0 26px 46px #0000008c);width:min(480px,96%);height:auto;display:block;position:relative}.diff-char img{will-change:transform;animation:4s ease-in-out infinite mascot-float}@keyframes mascot-float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@media (prefers-reduced-motion:reduce){.diff-char img{animation:none}}.diff-list{margin-top:1.6rem;list-style:none}.diff-list li{color:#c7ccd6;margin-bottom:.9rem;padding-left:1.6rem;font-size:1.02rem;line-height:1.5;position:relative}.diff-list li:before{content:"";background:var(--accent);width:8px;height:8px;box-shadow:0 0 12px var(--accent);border-radius:50%;position:absolute;top:.55em;left:0}.diff-shot-sec{background:linear-gradient(#080f0b,#0a0a0f);border-top:1px solid #ffffff0f;border-bottom:1px solid #ffffff0f}.diff-shot-sec .diff-row{grid-template-columns:.95fr 1.05fr}.diff-shot{position:relative}.diff-shot:before{content:"";background:radial-gradient(58% 60% at 50% 46%, rgba(var(--glow2),.28), transparent 70%);filter:blur(50px);z-index:0;position:absolute;inset:-8% -4%}.diff-shot .browser{z-index:1;position:relative}.metrics .strip{grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:clamp(2.5rem,5vh,4rem);display:grid}.metrics .m{text-align:center;background:linear-gradient(#0f0f17,#0b0b12);border:1px solid #ffffff14;border-radius:16px;padding:1.8rem}.metrics .m .v{font-family:var(--font-display);background:linear-gradient(180deg,#fff,var(--grad));color:#0000;-webkit-background-clip:text;background-clip:text;font-size:clamp(2.2rem,4vw,3.2rem);font-weight:900}.metrics .m .l{color:#9aa0ad;margin-top:.5rem;font-size:.9rem}.end{text-align:center;padding:clamp(6rem,14vh,11rem) 0 0;position:relative;overflow:hidden}.end .eglow{background:radial-gradient(circle, rgba(var(--glow),.18), transparent 62%);filter:blur(50px);z-index:0;width:70vw;height:50vh;position:absolute;top:0;left:50%;transform:translate(-50%)}.end .wrap{z-index:1;position:relative}.end-h2{font-family:var(--font-display);text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(2rem,4.2vw,3.4rem);font-weight:900;line-height:1.02}.end .btn{background:var(--accent);color:var(--btn-text);box-shadow:0 16px 46px rgba(var(--glow),.4);border-radius:999px;align-items:center;gap:.6rem;margin-top:2rem;padding:1.1rem 2.6rem;font-size:1.05rem;font-weight:700;text-decoration:none;transition:transform .3s,box-shadow .3s;display:inline-flex}.end .btn:hover{box-shadow:0 22px 60px rgba(var(--glow),.6);transform:translateY(-3px)}.project footer{border-top:1px solid #ffffff14;margin-top:clamp(5rem,10vh,8rem);padding:2.4rem 0}.project footer .row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.5rem;display:flex}.project footer a{color:#a9b0bd;font-size:.9rem;text-decoration:none;transition:color .2s}.project footer a:hover{color:#fff}.project footer .copy{color:#6b7180;font-size:.82rem}.project footer .fnav{gap:1.6rem;display:flex}@media (max-width:900px){.problem .grid,.how .steps,.metrics .strip{grid-template-columns:1fr 1fr}.diff-row{grid-template-columns:1fr}.diff-shot-sec .diff-shot{order:-1}}@media (max-width:560px){.problem .grid,.how .steps,.metrics .strip{grid-template-columns:1fr}}.hero-photo{border-radius:16px;width:100%;display:block;box-shadow:0 50px 90px #0000009e,0 16px 34px #00000080}.diff-text-sec{text-align:center;background:linear-gradient(#120a06,#0a0a0f);border-top:1px solid #ffffff0f;border-bottom:1px solid #ffffff0f}.diff-text-h2{max-width:24ch;margin:.7rem auto 0}.diff-text-lede{max-width:60ch;margin:1.2rem auto 0}.diff-text-grid{text-align:start;grid-template-columns:1fr 1fr;gap:.6rem 2.6rem;max-width:780px;margin:2.6rem auto 0;display:grid}.diff-text-grid li{margin-bottom:0}@media (max-width:700px){.diff-text-grid{grid-template-columns:1fr}}
