@font-face{font-family:Sora;font-weight:600;font-display:swap;src:url(fonts/sora-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:Sora;font-weight:700;font-display:swap;src:url(fonts/sora-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:Sora;font-weight:800;font-display:swap;src:url(fonts/sora-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-weight:500;font-display:swap;src:url(fonts/inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-weight:600;font-display:swap;src:url(fonts/inter-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-weight:700;font-display:swap;src:url(fonts/inter-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:Cairo;font-weight:500;font-display:swap;src:url(fonts/cairo-arabic-500-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Cairo;font-weight:600;font-display:swap;src:url(fonts/cairo-arabic-600-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Cairo;font-weight:700;font-display:swap;src:url(fonts/cairo-arabic-700-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Cairo;font-weight:800;font-display:swap;src:url(fonts/cairo-arabic-800-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Cairo;font-weight:600;font-display:swap;src:url(fonts/cairo-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF}
@font-face{font-family:Cairo;font-weight:800;font-display:swap;src:url(fonts/cairo-latin-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF}

:root{
  --deep:#04160a;--forest:#0a2a14;--g4:#0f5c1a;--g3:#17691b;--g2:#45b312;--g1:#8be626;--gold:#e8c352;--gold2:#f5c463;
  --paper:#f4faed;--ink:#0b3d17;--mut:#47634f;--line:#d3e6c8;
  --ease:cubic-bezier(.2,.8,.2,1);
  --sans:Inter,Cairo,system-ui,sans-serif;--head:Sora,Cairo,Inter,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--deep);overscroll-behavior:none}
body{font:400 16px/1.55 var(--sans);color:#eaf6e1;transition:background-color 1s,color .8s;-webkit-font-smoothing:antialiased}
body[data-theme=night]{background:radial-gradient(120% 90% at 50% 100%,#0c3a1b 0%,#06200f 45%,#031209 100%);color:#eaf6e1}
body[data-theme=day]{background:radial-gradient(90% 70% at 85% 8%,#e2f5cf 0%,rgba(226,245,207,0) 60%),radial-gradient(80% 80% at 8% 95%,#dff2e6 0%,rgba(223,242,230,0) 55%),#f6fbf0;color:var(--ink)}
html[dir=rtl] body{font-family:Cairo,Inter,system-ui,sans-serif}
html[dir=rtl] h1,html[dir=rtl] h2,html[dir=rtl] h3,html[dir=rtl] .gl b{font-family:Cairo,Sora,sans-serif;letter-spacing:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

#fx{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.grain{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.topbar{position:fixed;inset:0 0 auto 0;height:3px;z-index:30;background:rgba(255,255,255,.08)}
.topbar b{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--g3),var(--g1),var(--gold));transform-origin:left}
html[dir=rtl] .topbar b{margin-inline-start:auto}

/* ---------- chrome ---------- */
.chrome{position:fixed;inset:0 0 auto 0;z-index:25;display:flex;justify-content:space-between;align-items:center;padding:16px clamp(16px,3vw,40px);pointer-events:none;transition:opacity .6s,transform .6s}
.chrome>*{pointer-events:auto}
body.at-gate .chrome{opacity:0;transform:translateY(-14px);pointer-events:none}
body.at-gate .chrome>*{pointer-events:none}
.bdisc{display:grid;place-items:center;width:112px;height:54px;border-radius:30px;background:rgba(255,255,255,.92);box-shadow:0 6px 24px rgba(0,0,0,.18);padding:4px 10px}
.bdisc img{width:100%;height:100%;object-fit:contain}
.tools{display:flex;gap:8px;align-items:center}
.tool,.langs{height:40px;border-radius:30px;background:rgba(255,255,255,.1);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;gap:8px;padding:0 14px;font:600 12.5px var(--sans);transition:background .3s,color .3s,border-color .3s}
body[data-theme=day] .tool,body[data-theme=day] .langs{background:rgba(255,255,255,.7);border-color:rgba(15,92,26,.16);color:var(--ink)}
.tool:hover{background:rgba(139,230,38,.22)}
.tool svg{width:17px;height:17px;flex:none}
.tool[aria-pressed=true] .ico-play,.tool[aria-pressed=false] .ico-pause{display:none}
#btnSound[aria-pressed=true] .ico-off{display:none}#btnSound[aria-pressed=false] .ico-on{display:none}
#btnAuto .ico-play{fill:currentColor}
.langs{padding:3px;gap:2px}
.langs button{height:32px;padding:0 12px;border-radius:24px;font:700 12px var(--sans);opacity:.75;transition:.3s}
.langs button.ar{font-family:Cairo,sans-serif;font-size:13.5px}
.langs button.on{background:linear-gradient(135deg,var(--g2),var(--g1));color:#04260c;opacity:1}

.rail{position:fixed;inset-inline:0;bottom:clamp(14px,3vh,28px);z-index:25;display:flex;justify-content:center;gap:9px;pointer-events:none;transition:opacity .6s}
body.at-gate .rail,body.at-gate .arrow{opacity:0;pointer-events:none}
.rail button{pointer-events:auto;position:relative;width:9px;height:9px;border-radius:9px;background:rgba(255,255,255,.28);transition:width .5s var(--ease),background .4s}
body[data-theme=day] .rail button{background:rgba(15,92,26,.25)}
.rail button.on{width:34px;background:linear-gradient(90deg,var(--g2),var(--g1))}
.rail button.seen:not(.on){background:rgba(139,230,38,.7)}
.rail button span{position:absolute;bottom:20px;left:50%;transform:translate(-50%,6px);white-space:nowrap;padding:5px 10px;border-radius:8px;background:#04160a;color:#eaf6e1;font:600 11px var(--sans);opacity:0;pointer-events:none;transition:.25s}
.rail button:hover span{opacity:1;transform:translate(-50%,0)}
.arrow{position:fixed;top:50%;z-index:25;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);transform:translateY(-50%);transition:.3s;opacity:.85}
body[data-theme=day] .arrow{background:rgba(255,255,255,.7);border-color:rgba(15,92,26,.18);color:var(--ink)}
.arrow:hover{background:var(--g2);color:#04260c;transform:translateY(-50%) scale(1.08)}
.arrow svg{width:20px;height:20px}
.arrow.prev{inset-inline-start:clamp(10px,2vw,28px)}.arrow.next{inset-inline-end:clamp(10px,2vw,28px)}
html[dir=rtl] .arrow svg{transform:scaleX(-1)}
.arrow.hide{opacity:0;pointer-events:none}
.hint{position:fixed;bottom:62px;inset-inline:0;text-align:center;z-index:24;font:500 12px var(--sans);letter-spacing:.06em;opacity:0;transition:opacity 1s;pointer-events:none;color:inherit}
.hint.on{opacity:.55}

/* ---------- scenes ---------- */
#stage{position:fixed;inset:0;z-index:2}
.scene{position:absolute;inset:0;display:none;overflow:hidden;color:inherit}
.scene.show{display:block}
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease) var(--d,0s),transform 1s var(--ease) var(--d,0s)}
.scene.on .rv{opacity:1;transform:none}
.kick{font:700 12px/1 var(--head);letter-spacing:.2em;text-transform:uppercase;color:var(--g2);margin-bottom:16px}
html[dir=rtl] .kick{letter-spacing:.02em;font:800 15px/1 Cairo}
.night .kick{color:var(--g1)}
h2{font:800 clamp(30px,4.4vw,66px)/1.04 var(--head);letter-spacing:-.035em;margin-bottom:18px}
html[dir=rtl] h2{line-height:1.3;font-size:clamp(30px,4.2vw,60px)}
h2 em{font-style:normal;background:linear-gradient(100deg,var(--g3),var(--g2) 55%,#7ccf1c);-webkit-background-clip:text;background-clip:text;color:transparent}
.night h2 em{background-image:linear-gradient(100deg,var(--g1),#c4f06a 55%,var(--gold));}
.lead{font:400 clamp(15px,1.35vw,19px)/1.6 var(--sans);color:var(--mut);max-width:34em}
.night .lead{color:#b9d4be}
.copy{max-width:540px}

/* gate + finale */
.gate,.finale{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px}
.gate-logo{position:relative;width:min(380px,62vw);aspect-ratio:2/1;margin-bottom:clamp(18px,4vh,38px)}
.gate-logo .halo{position:absolute;inset:-26% -14%;border-radius:50%;background:radial-gradient(closest-side,#f9fff2 0%,#e9f8d6 46%,rgba(139,230,38,.0) 100%);filter:blur(2px);animation:breathe 5s ease-in-out infinite}
.gate-logo img{position:relative;width:100%;height:100%;object-fit:contain}
@keyframes breathe{50%{transform:scale(1.07);opacity:.9}}
.gate-langs{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.gl{min-width:190px;padding:18px 26px;border-radius:20px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:2px;transition:.45s var(--ease);position:relative;overflow:hidden}
.gl::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--g2),var(--g1));opacity:0;transition:.45s}
.gl b,.gl small{position:relative}
.gl b{font:800 22px var(--head)}.gl small{font:500 13px var(--sans);opacity:.6}
.gl.ar b{font-family:Cairo;font-size:24px}
.gl:hover{transform:translateY(-6px) scale(1.03);border-color:transparent;color:#04260c}.gl:hover::before{opacity:1}
.gl.sug{border-color:var(--g1);box-shadow:0 0 0 4px rgba(139,230,38,.14)}
.gate-hint{margin-top:26px;font:500 13px var(--sans);opacity:.55;letter-spacing:.08em}

/* dawn / story */
.dawn{position:absolute;inset:0;overflow:hidden}
.sun{position:absolute;left:50%;bottom:6%;width:min(70vw,720px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,60%);background:radial-gradient(circle,rgba(245,196,99,.95) 0%,rgba(232,195,82,.45) 28%,rgba(139,230,38,.18) 52%,rgba(139,230,38,0) 70%);transition:transform 9s var(--ease),opacity 3s;opacity:.0}
#s1.on .sun{transform:translate(-50%,8%);opacity:1}
.hills{position:absolute;inset:auto 0 0 0;width:100%;height:46%}
.hills path{stroke:none}.hills .h3{fill:#0a3a1a}.hills .h2{fill:#07290f}.hills .h1{fill:#041a09}
.story{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;padding:90px clamp(22px,8vw,140px) 110px;max-width:1100px}
.story-l{display:flex;flex-direction:column;gap:6px;font-size:clamp(28px,4.2vw,62px);min-height:2.3em;margin-bottom:10px}
.line{display:block;opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.line.on{opacity:1;transform:none}.line.gold{color:var(--gold2)}
.story-but{font:500 clamp(14px,1.4vw,19px) var(--sans);color:#b9d4be;opacity:0;transform:translateY(10px);transition:.9s var(--ease);margin-bottom:18px;max-width:30em}
.story-but.on{opacity:1;transform:none}
.qs{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:760px}
.qs li{padding:16px 20px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);font:700 clamp(15px,1.6vw,21px)/1.3 var(--head);opacity:0;transform:translateY(20px) scale(.96);transition:.8s var(--ease);display:flex;gap:12px;align-items:center}
html[dir=rtl] .qs li{font-family:Cairo}
.qs li::before{content:'?';flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold2));color:#3a2800;font:800 16px var(--head)}
html[dir=rtl] .qs li::before{content:'؟'}
.qs li.on{opacity:1;transform:none}

/* reveal / orbit */
.reveal{height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:2vw;padding:70px clamp(20px,6vw,100px) 80px}
.orbit-wrap{position:relative;width:min(100%,64vh,600px);aspect-ratio:1;margin-inline:auto}
.orbit{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.orbit .ring{fill:none;stroke:var(--g2);stroke-opacity:.35;stroke-width:1.2;stroke-dasharray:3 9;transform-origin:0 0;animation:spin 90s linear infinite}
.orbit .ring.r2{stroke-opacity:.22;animation-direction:reverse;animation-duration:140s}
@keyframes spin{to{transform:rotate(360deg)}}
.orbit .spoke{stroke:var(--g2);stroke-width:2;stroke-opacity:0;transition:stroke-opacity .4s}
.orbit .nd circle{fill:#fff;stroke:rgba(23,105,27,.3);stroke-width:1.5;transition:.5s var(--ease)}
.orbit .nd{transition:transform .5s var(--ease);transform-box:fill-box;transform-origin:center;cursor:pointer}
.orbit .nd svg{stroke:var(--g3)}
.orbit .nd.on circle{fill:url(#gGrad);stroke:transparent}
.orbit .nd.on{transform:scale(1.28)}
.orbit .nd.on path,.orbit .nd.on circle.ic{stroke:#fff}
.orbit .nd path,.orbit .nd .ic{fill:none;stroke:var(--g3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.core{position:absolute;inset:28%;display:grid;place-items:center}
.core .halo{position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,#fff 40%,#eaf8d8 75%,rgba(255,255,255,0) 100%);box-shadow:0 20px 80px rgba(69,179,18,.25)}
.core img{position:relative;width:86%}
.reveal-t h2{font-size:clamp(28px,3.9vw,58px)}
.rolecap{display:flex;flex-direction:column;gap:6px;margin-top:24px}
.rolecap span{display:inline-block;align-self:flex-start;padding:8px 18px;border-radius:30px;background:linear-gradient(135deg,var(--g3),var(--g2));color:#fff;font:700 15px var(--head);min-height:38px;transition:.3s}
html[dir=rtl] .rolecap span{font-family:Cairo}
.rolecap em{font:700 14px var(--head);font-style:normal;color:var(--mut);letter-spacing:.02em}

/* split layout */
.split{height:100%;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(20px,4vw,70px);padding:80px clamp(20px,6.5vw,110px) 88px}
.visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:0}
.steps{list-style:none;margin-top:26px;display:flex;flex-direction:column;gap:12px}
.steps li{display:flex;align-items:center;gap:14px;font:600 15px var(--sans);opacity:.35;transition:.5s var(--ease)}
.steps li i{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;transition:.4s;position:relative}
.steps li i svg{width:14px;height:14px;stroke:#fff;stroke-width:3;opacity:0;transform:scale(.4);transition:.4s var(--ease)}
.steps li.act{opacity:1}
.steps li.act i{border-color:var(--g2);border-top-color:transparent;animation:spin .8s linear infinite}
.steps li.done{opacity:1}
.steps li.done i{background:var(--g2);border-color:var(--g2);animation:none}
.steps li.done i svg{opacity:1;transform:none}
.photo{position:relative;width:min(100%,640px);aspect-ratio:1113/663;border-radius:22px;overflow:hidden;box-shadow:0 30px 80px rgba(11,61,23,.28),0 0 0 1px rgba(15,92,26,.12)}
.photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.16);transform-origin:0 100%}
.beam{position:absolute;left:0;right:0;top:-24%;height:24%;background:linear-gradient(180deg,rgba(139,230,38,0),rgba(139,230,38,.5) 82%,rgba(255,255,255,.95));box-shadow:0 8px 30px rgba(139,230,38,.7);opacity:0}
.photo.scan .beam{opacity:1;animation:beam 2.3s cubic-bezier(.5,0,.5,1) 2}
@keyframes beam{from{top:-24%}to{top:100%}}
.box{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);border:2px solid var(--g1);border-radius:10px;box-shadow:0 0 0 1px rgba(0,0,0,.25),0 0 22px rgba(139,230,38,.7),inset 0 0 18px rgba(139,230,38,.25);opacity:0;transform:scale(1.25);transition:.6s var(--ease)}
.photo.det .box{opacity:1;transform:none}.photo.det .box:nth-of-type(2){transition-delay:.15s}.photo.det .box:nth-of-type(3){transition-delay:.3s}
html[dir=rtl] .box{left:auto;right:var(--x)}
.result{position:absolute;inset-inline-end:0;bottom:-6%;width:min(350px,62%);padding:20px 22px;border-radius:22px;background:rgba(255,255,255,.96);box-shadow:0 30px 70px rgba(11,61,23,.3),0 0 0 1px rgba(15,92,26,.1);color:var(--ink);transform:translateY(40px) scale(.94);opacity:0;transition:.9s var(--ease)}
.result.on{transform:none;opacity:1}
.r-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.sev{padding:5px 12px;border-radius:20px;background:#ffe9e4;color:#c43520;font:800 11px var(--head);letter-spacing:.1em}
html[dir=rtl] .sev{font:800 13px Cairo;letter-spacing:0}
.conf{position:relative;width:46px;height:46px;display:grid;place-items:center}
.conf svg{position:absolute;inset:0;transform:rotate(-90deg);stroke-width:4}
.conf circle{stroke:#e3efd9}.conf .fg{stroke:var(--g2);stroke-dasharray:113.1;stroke-dashoffset:113.1;transition:stroke-dashoffset 1.6s var(--ease)}
.conf b{font:800 12px var(--head);position:relative}.conf b::after{content:'%';font-size:8px;margin-inline-start:1px}
.result h3{font:800 clamp(16px,1.5vw,20px)/1.2 var(--head);letter-spacing:-.02em;margin-bottom:10px}
.names{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.names span{padding:4px 10px;border-radius:8px;background:#eef7e6;font:600 12px var(--sans);color:var(--g3)}
.names .ar{font-family:Cairo;font-size:13.5px}.names .lat{font-style:italic;background:#fbf3d6;color:#7a5a08}
.treat{padding:12px 14px;border-radius:14px;background:linear-gradient(135deg,#f1fae8,#e5f5d3);display:grid;gap:1px}
.treat small{font:700 10.5px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
html[dir=rtl] .treat small{letter-spacing:0;font-size:12px}
.treat b{font:800 14.5px var(--head)}.treat em{font:600 12px var(--sans);font-style:normal;color:var(--g3)}
html[dir=rtl] .treat b{font-family:Cairo}

/* frames (browser mock) */
.frame{position:relative;width:min(100%,780px);background:#fff;border-radius:16px;overflow:visible;box-shadow:0 40px 90px rgba(11,61,23,.3),0 0 0 1px rgba(15,92,26,.12);}
.night .frame{box-shadow:0 40px 90px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.12)}
.frame .bar{display:flex;align-items:center;gap:6px;padding:11px 14px;background:#eef4e8;border-radius:16px 16px 0 0}
.frame .bar i{width:10px;height:10px;border-radius:50%;background:#c9d8bf}
.frame .bar i:nth-child(1){background:#f08d80}.frame .bar i:nth-child(2){background:#f1cc6a}.frame .bar i:nth-child(3){background:#86d27a}
.frame .bar u{text-decoration:none;margin-inline:12px auto;font:600 11.5px var(--sans);color:#6f8a74;background:#fff;padding:3px 14px;border-radius:20px}
.frame>img{width:100%;border-radius:0 0 16px 16px}
.stamp{position:absolute;inset-inline-end:7%;top:44%;display:flex;align-items:center;gap:8px;padding:10px 20px;border:4px solid var(--g2);color:var(--g3);border-radius:16px;font:800 clamp(16px,2vw,26px) var(--head);letter-spacing:.04em;text-transform:uppercase;background:rgba(255,255,255,.9);transform:rotate(-9deg) scale(2.4);opacity:0;transition:.55s cubic-bezier(.3,1.6,.4,1)}
html[dir=rtl] .stamp{font-family:Cairo;letter-spacing:0}
.stamp svg{width:28px;height:28px;stroke-width:3.4}
.stamp.on{opacity:1;transform:rotate(-9deg) scale(1)}
.chips{list-style:none;margin-top:24px;display:grid;gap:10px}
.chips li{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.7);border:1px solid var(--line);font:600 14.5px var(--sans);opacity:0;transform:translateX(-18px);transition:.7s var(--ease);width:fit-content;max-width:100%}
html[dir=rtl] .chips li{transform:translateX(18px)}
.chips li.on{opacity:1;transform:none}
.chips li i{flex:none;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--g3),var(--g1));display:grid;place-items:center}
.chips li i svg{width:13px;height:13px;stroke:#fff;stroke-width:3}

/* agent */
.pills{list-style:none;display:flex;gap:8px;margin-top:22px;flex-wrap:wrap}
.pills li{padding:7px 16px;border-radius:30px;background:#fff;border:1px solid var(--line);font:700 13px var(--head);color:var(--g3)}
html[dir=rtl] .pills li{font-family:Cairo}
.ghost{margin-top:20px;display:inline-flex;gap:8px;align-items:center;font:700 13px var(--sans);color:var(--g3);padding:8px 14px;border-radius:30px;border:1px solid var(--line);background:rgba(255,255,255,.6);transition:.3s}
.ghost:hover{background:#fff;transform:translateY(-2px)}.ghost svg{width:16px;height:16px}
.duo{gap:clamp(14px,3vw,40px)}
.phone{position:relative;width:min(300px,46vw);height:min(600px,72vh);border-radius:44px;background:#0b1b12;padding:10px;box-shadow:0 40px 90px rgba(11,61,23,.35),inset 0 0 0 2px #26402f;display:flex;flex-direction:column;overflow:hidden;flex:none}
.notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:90px;height:22px;border-radius:14px;background:#0b1b12;z-index:3}
.ph-head{display:flex;gap:10px;align-items:center;padding:38px 16px 12px;background:#fff;border-radius:34px 34px 0 0;border-bottom:1px solid #e6f0de}
.av{width:34px;height:34px;border-radius:50%;background:#f1fae8;display:grid;place-items:center;padding:3px;flex:none}
.ph-head b{display:block;font:800 13.5px var(--head);color:var(--ink);line-height:1.1}
.ph-head small{display:flex;align-items:center;gap:5px;font:600 10.5px var(--sans);color:var(--g2)}
.ph-head small u{width:6px;height:6px;border-radius:50%;background:var(--g2);display:block}
.chat{flex:1;background:linear-gradient(180deg,#f7fcf2,#eef7e6);padding:14px 12px;display:flex;flex-direction:column;gap:10px;overflow:hidden;justify-content:flex-end}
.msg{max-width:88%;padding:10px 13px;border-radius:18px;font:500 12.5px/1.45 var(--sans);box-shadow:0 2px 8px rgba(11,61,23,.08);animation:pop .5s var(--ease) both;color:var(--ink)}
.msg.u{align-self:flex-end;background:linear-gradient(135deg,var(--g2),#5cc317);color:#052a0a;border-end-end-radius:6px;font-weight:600}
.msg.a{align-self:flex-start;background:#fff;border-end-start-radius:6px}
.msg .t{display:block;direction:ltr;text-align:start}
html[dir=rtl] .msg .t{direction:rtl;font-family:Cairo;font-size:13.5px}
.msg .g{display:block;margin-top:5px;padding-top:5px;border-top:1px dashed rgba(11,61,23,.2);font-size:10.8px;opacity:.75;font-style:italic}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.94)}}
.voice{display:flex;align-items:center;gap:8px;padding:6px 4px}
.voice i{display:block;width:3px;border-radius:2px;background:#052a0a;animation:eq .9s ease-in-out infinite}
@keyframes eq{0%,100%{height:5px}50%{height:20px}}
.typing{display:flex;gap:4px;padding:6px 4px}.typing i{width:7px;height:7px;border-radius:50%;background:#9ab79f;animation:dot 1s infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{40%{transform:translateY(-5px);background:var(--g2)}}
.ph-input{display:flex;gap:8px;align-items:center;padding:10px 12px;background:#fff;border-radius:0 0 34px 34px}
.ph-input span{flex:1;height:34px;border-radius:20px;background:#eef4e8}
.mic{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--g2),var(--g1));display:grid;place-items:center;color:#04260c}.mic svg{width:17px;height:17px}
.listing{width:min(260px,40vw);padding:20px;border-radius:22px;background:#fff;box-shadow:0 30px 70px rgba(11,61,23,.28),0 0 0 1px rgba(15,92,26,.1);color:var(--ink);transform:translateX(30px) scale(.9);opacity:0;transition:.9s cubic-bezier(.3,1.4,.4,1)}
html[dir=rtl] .listing{transform:translateX(-30px) scale(.9)}
.listing.on{transform:none;opacity:1}
.l-ok{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.l-ok svg{width:30px;height:30px;padding:6px;border-radius:50%;background:var(--g2);stroke:#fff;stroke-width:3.2}
.l-ok b{font:800 15px var(--head)}html[dir=rtl] .l-ok b{font-family:Cairo}
.listing p{font:600 13px var(--sans);color:var(--mut)}
.l-price{font:800 26px var(--head);margin:6px 0 12px;letter-spacing:-.03em;color:var(--g3)}html[dir=rtl] .l-price{font-family:Cairo}
.l-b{display:flex;gap:8px;align-items:center;padding:10px 12px;border-radius:12px;background:#fbf3d6;color:#6b4d05;font:700 12px/1.3 var(--sans)}.l-b svg{width:20px;height:20px;flex:none}

/* services */
.tabs{display:grid;gap:8px;margin:22px 0 14px}
.tab{position:relative;display:flex;gap:14px;align-items:center;text-align:start;padding:13px 18px;border-radius:16px;background:rgba(255,255,255,.55);border:1px solid var(--line);font:700 15px var(--head);overflow:hidden;transition:.4s var(--ease)}
html[dir=rtl] .tab{font-family:Cairo;font-size:16px}
.tab b{font:800 12px var(--head);color:var(--g2);opacity:.9;width:22px}
.tab::after{content:'';position:absolute;inset-inline:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--g2),var(--g1));transform:scaleX(0);transform-origin:left}
html[dir=rtl] .tab::after{transform-origin:right}
.tab.on{background:#fff;box-shadow:0 14px 34px rgba(11,61,23,.14);transform:translateX(6px)}
html[dir=rtl] .tab.on{transform:translateX(-6px)}
.tab.on::after{animation:fill var(--dur,3.4s) linear forwards}
.tab.manual.on::after{animation:none;transform:scaleX(1)}
@keyframes fill{to{transform:scaleX(1)}}
.tabdesc{min-height:3.4em}
.stack{position:relative;aspect-ratio:2/1;border-radius:0 0 16px 16px;overflow:hidden;background:#f4faed}
.stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top;opacity:0;transform:scale(1.04) translateY(10px);transition:opacity .7s,transform 1s var(--ease)}
.stack img.on{opacity:1;transform:none}

/* field network */
.field .copy{max-width:520px}
.bigstat{display:flex;align-items:center;gap:18px;margin-top:28px;padding:18px 22px;border-radius:22px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);width:fit-content;max-width:100%}
.bigstat b{font:800 clamp(38px,5vw,66px)/1 var(--head);letter-spacing:-.04em;background:linear-gradient(135deg,var(--g1),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
html[dir=rtl] .bigstat b{font-family:Cairo}
.bigstat span{font:600 14px/1.35 var(--sans);color:#b9d4be;max-width:11em}
.net{width:min(100%,720px);height:auto;max-height:70vh;overflow:visible}
.net .edge{stroke:var(--g1);stroke-opacity:.45;stroke-width:1.6;stroke-dasharray:6 7;fill:none;animation:dash 1.6s linear infinite}
@keyframes dash{to{stroke-dashoffset:-26}}
.net .pulse{fill:var(--gold2)}
.net .nd circle.bg{fill:rgba(255,255,255,.08);stroke:rgba(139,230,38,.6);stroke-width:1.5}
.net .nd.center circle.bg{fill:url(#gGradN);stroke:none}
.net .nd{opacity:0;transition:opacity .8s;transform-box:fill-box;transform-origin:center}
.net .nd.on{opacity:1}
.net .nd path,.net .nd .ic{stroke:#dff7c0;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.net .nd.center path,.net .nd.center .ic{stroke:#fff}
.net text,.orbit text{stroke:none}.net text{fill:#dff0d2;font:700 15px Sora,Cairo,sans-serif;text-anchor:middle}
html[dir=rtl] .net text{font-family:Cairo;font-size:17px}
.net .halo-c{fill:none;stroke:var(--g1);stroke-opacity:.35;animation:ping 2.8s ease-out infinite;transform-origin:0 0}
@keyframes ping{from{transform:scale(.6);opacity:.9}to{transform:scale(1.9);opacity:0}}

/* institutions */
.stackf{position:relative;height:min(62vh,520px);width:100%}
.stackf .frame{position:absolute;width:82%}
.f-a{inset-inline-start:0;top:0}.f-b{inset-inline-end:0;bottom:0}
.stackf .frame>img{max-height:36vh;object-fit:cover;object-position:top left}

/* chain */
.chain{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(16px,3.5vh,40px);padding:80px clamp(18px,5vw,90px) 80px;text-align:center}
.copy.c{max-width:700px}.copy.c .lead{margin-inline:auto}
.flow{position:relative;display:flex;justify-content:space-between;width:min(1100px,100%);padding:0 10px}
.flow::before{content:'';position:absolute;top:34px;inset-inline:6%;height:3px;border-radius:3px;background:rgba(15,92,26,.14)}
.flow .prog{position:absolute;top:34px;inset-inline-start:6%;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--g3),var(--g1));width:0;transition:width .9s var(--ease);box-shadow:0 0 14px rgba(139,230,38,.8)}
.fn{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:12px;flex:1;min-width:0}
.fn i{width:68px;height:68px;border-radius:50%;background:#fff;border:2px solid var(--line);display:grid;place-items:center;transition:.6s var(--ease);box-shadow:0 8px 24px rgba(11,61,23,.08)}
.fn i svg{width:28px;height:28px;stroke:var(--g3)}
.fn span{font:700 13.5px/1.2 var(--head);color:var(--mut);transition:.4s;padding:0 4px}
html[dir=rtl] .fn span{font-family:Cairo;font-size:15px}
.fn.on i{background:linear-gradient(135deg,var(--g3),var(--g1));border-color:transparent;transform:scale(1.14);box-shadow:0 14px 36px rgba(69,179,18,.5)}
.fn.on i svg{stroke:#fff}.fn.on span{color:var(--ink)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;width:min(1000px,100%)}
.stat{padding:18px 14px;border-radius:20px;background:rgba(255,255,255,.7);border:1px solid var(--line);box-shadow:0 10px 30px rgba(11,61,23,.06)}
.stat b{display:block;font:800 clamp(28px,3.4vw,46px)/1.05 var(--head);letter-spacing:-.04em;background:linear-gradient(135deg,var(--g3),var(--g1));-webkit-background-clip:text;background-clip:text;color:transparent}
html[dir=rtl] .stat b{font-family:Cairo}
.stat small{display:block;margin-top:2px;font:600 11px var(--sans);color:var(--g3);opacity:.85}.stat span{display:block;margin-top:4px;font:600 12.5px/1.3 var(--sans);color:var(--mut)}

/* finale */
.finale .gate-logo{width:min(300px,52vw)}
.mega{font-size:clamp(46px,9vw,140px);line-height:.98;margin:6px 0 20px}
html[dir=rtl] .mega{line-height:1.2}
.finale .lead{margin:0 auto 28px;color:#c4dcc8}
.cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 26px;border-radius:30px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px);font:700 15px var(--head);transition:.35s var(--ease)}
html[dir=rtl] .btn{font-family:Cairo;font-size:16px}
.btn svg{width:20px;height:20px}
.btn:hover{transform:translateY(-4px);background:rgba(255,255,255,.2)}
.btn.primary{background:linear-gradient(135deg,var(--g2),var(--g1));color:#04260c;border-color:transparent;box-shadow:0 14px 44px rgba(139,230,38,.45)}
.btn.primary:hover{box-shadow:0 20px 60px rgba(139,230,38,.7)}
.contact{display:flex;gap:14px;align-items:center;margin-top:24px;font:600 14px var(--sans);color:#b9d4be;flex-wrap:wrap;justify-content:center}
.contact a:hover{color:var(--g1)}.contact i{width:4px;height:4px;border-radius:50%;background:var(--g2)}
.textbtn{margin-top:18px;font:600 13px var(--sans);opacity:.6;text-decoration:underline;text-underline-offset:4px}.textbtn:hover{opacity:1}
.motto{margin-top:22px;font:500 11.5px/1.7 var(--sans);letter-spacing:.14em;text-transform:uppercase;opacity:.55;max-width:90vw}
.motto span{display:block;letter-spacing:.04em;text-transform:none;margin-top:2px}
html[dir=rtl] .motto{letter-spacing:.06em}

/* modal */
.modal{position:fixed;inset:0;z-index:60;display:none;place-items:center;background:rgba(2,10,5,.88);backdrop-filter:blur(8px)}
.modal.on{display:grid}
.m-in{position:relative;width:min(1000px,92vw)}
.m-in video{width:100%;border-radius:18px;background:#000;box-shadow:0 40px 120px rgba(0,0,0,.6);max-height:78vh}
.m-x{position:absolute;top:-46px;inset-inline-end:0;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.15);font-size:26px;line-height:1;color:#fff}
.m-note{margin-top:10px;font:500 13px var(--sans);color:#b9d4be;text-align:center}

/* wipe */
.wipe{position:fixed;inset:0;z-index:50;pointer-events:none;overflow:hidden}
.wipe i{position:absolute;top:-10%;bottom:-10%;left:-60vw;width:160vw;background:linear-gradient(100deg,#062a10 0%,#0f5c1a 28%,#2f9e16 62%,#8be626 90%,#e8c352 100%);transform:translateX(-100%) skewX(-14deg);will-change:transform}
.wipe.go i{animation:wipe .95s cubic-bezier(.75,0,.25,1) forwards}
html[dir=rtl] .wipe.go i{animation-name:wipeR}
@keyframes wipe{from{transform:translateX(-100%) skewX(-14deg)}to{transform:translateX(100%) skewX(-14deg)}}
@keyframes wipeR{from{transform:translateX(100%) skewX(14deg)}to{transform:translateX(-100%) skewX(14deg)}}

/* ---------- responsive ---------- */
@media (max-width:900px),(orientation:portrait){
  .chrome{padding:10px 12px}.tool span{display:none}.tool{padding:0 11px}
  .bdisc{width:84px;height:42px}
  .arrow{display:none}.hint{display:none}
  .rail{bottom:14px;gap:7px}.rail button span{display:none}
  .split{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);align-content:start;gap:14px;padding:64px 20px 56px}
  .copy{max-width:none}
  h2{font-size:clamp(26px,7.6vw,40px);margin-bottom:10px}
  .lead{font-size:14px;line-height:1.5}
  .kick{margin-bottom:10px}
  .steps{margin-top:12px;gap:6px}.steps li{font-size:13px}.steps li i{width:22px;height:22px}
  .reveal{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;padding:64px 18px 50px;gap:0}
  .orbit-wrap{width:min(92vw,46vh)}
  .reveal-t{text-align:center}.rolecap span{align-self:center}.reveal-t h2{font-size:clamp(24px,6.6vw,36px)}.rolecap{align-items:center;margin-top:12px}
  #s3 .visual{flex-direction:column;gap:10px;justify-content:flex-start}.photo{width:100%;max-height:26vh;aspect-ratio:auto;flex:none;height:26vh}
  .result{position:static;width:100%;padding:12px 14px;transform:translateY(20px);flex:none}.result.on{transform:none}.result h3{margin-bottom:6px}.names{margin-bottom:8px}.treat{padding:8px 12px}
  .chips{margin-top:12px;gap:6px}.chips li{padding:8px 12px;font-size:13px}
  .duo{gap:8px;flex-direction:column}.phone{width:min(240px,62vw);height:min(330px,36vh);border-radius:34px;padding:8px}.ph-head{padding:30px 14px 8px}.listing{width:min(300px,86vw);padding:10px 14px;display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center}.l-ok{margin:0}.l-price{font-size:19px;margin:0;grid-row:1/3;grid-column:2}.listing p{font-size:11px}.l-b{grid-column:1/3;font-size:10.5px;padding:6px 9px}
  .tabs{grid-template-columns:1fr 1fr;margin:10px 0 8px;gap:6px}.tab{padding:9px 12px;font-size:12.5px}.tab b{display:none}.tab.on{transform:none}
  .tabdesc{min-height:3em}
  .net{max-height:44vh}.bigstat{margin-top:12px;padding:10px 14px}
  .stackf{height:44vh}.stackf .frame{width:84%}
  .chain{gap:12px;padding:64px 14px 52px}
  .flow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 4px;padding:0}.flow::before,.flow .prog{display:none}
  .fn i{width:50px;height:50px}.fn i svg{width:22px;height:22px}.fn span{font-size:11.5px}
  .stats{grid-template-columns:repeat(2,1fr);gap:8px}.stat{padding:10px 8px}.stat span{font-size:11px}
  .story{padding:70px 22px 80px}.qs{grid-template-columns:1fr;gap:8px}.qs li{padding:11px 14px}
  .gl{min-width:0;width:min(300px,80vw);padding:14px 20px}.gate-langs{flex-direction:column;align-items:center}
  .btn{height:46px;padding:0 20px;font-size:14px}
}
@media (max-height:620px) and (orientation:landscape){
  .split{padding-top:60px;padding-bottom:60px}.phone{height:70vh}h2{font-size:clamp(24px,3.4vw,40px)}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}