/* "Our Story" section: immersive gate scene + process timeline. Light and dark site themes (html[data-theme]). */
.story{--g:#85BB33;--p:#913791;--k:#E33069;--c:#4FB9C2;--a:#FFAD27;--so:0%;--ax:6px;--s-bg:#060820;--s-text:#fff;--s-muted:rgba(255,255,255,.84);--s-kick:#4FB9C2;--s-dot:rgba(255,255,255,.5);--s-dotop:.22;--s-ghbg:rgba(255,255,255,.06);--s-ghbd:rgba(255,255,255,.35);--s-ghbgh:rgba(255,255,255,.14);--s-ghbdh:#fff;--s-stm:rgba(255,255,255,.62);--s-stbd:rgba(255,255,255,.3);--s-stl:rgba(255,255,255,.16);--s-desc:rgba(255,255,255,.8);--s-focus:#fff;--s-pillbg:rgba(79,185,194,.14);--s-pillbd:rgba(79,185,194,.42);position:relative;isolation:isolate;overflow:hidden;background:var(--s-bg);color:var(--s-text);padding:clamp(64px,8vw,110px) 0 0}
html:not([data-theme="dark"]) .story{--g:#85BB33;--p:#913791;--k:#E33069;--c:#4FB9C2;--a:#FFAD27;--so:0%;--ax:6px;--s-bg:#f6f7ff;--s-text:#1f2550;--s-muted:#454b72;--s-kick:#17808b;--s-dot:rgba(31,37,80,.55);--s-dotop:.16;--s-ghbg:rgba(31,37,80,.04);--s-ghbd:rgba(31,37,80,.28);--s-ghbgh:rgba(31,37,80,.09);--s-ghbdh:#1f2550;--s-stm:#5b6188;--s-stbd:rgba(31,37,80,.28);--s-stl:rgba(31,37,80,.14);--s-desc:#454b72;--s-focus:#1f2550;--s-pillbg:rgba(23,128,139,.09);--s-pillbd:rgba(23,128,139,.32)}
.story::before{content:'';position:absolute;inset:0;z-index:-1;background-image:radial-gradient(var(--s-dot) 1px,transparent 1.5px);background-size:30px 30px;opacity:var(--s-dotop);-webkit-mask-image:radial-gradient(90% 80% at 70% 35%,#000 10%,transparent 78%);mask-image:radial-gradient(90% 80% at 70% 35%,#000 10%,transparent 78%)}
.story-wrap{position:relative;max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
.story-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.32fr);align-items:center;gap:clamp(20px,3vw,56px);min-height:clamp(520px,62vh,640px)}
.story-copy{position:relative;z-index:3}
.story-kicker{display:flex;width:fit-content;align-items:center;gap:9px;margin:0 0 20px;padding:8px 20px;border-radius:999px;font-weight:800;font-size:14.5px;line-height:1.4;letter-spacing:0;color:var(--s-kick);background:var(--s-pillbg);border:1px solid var(--s-pillbd);backdrop-filter:blur(6px)}
html[lang="en"] .story-kicker{letter-spacing:.2em;text-transform:uppercase;font-family:"Cairo",sans-serif;font-size:13px}
.story-kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#85BB33,#4FB9C2);box-shadow:0 0 12px rgba(79,185,194,.8)}
#our-story .story-title{position:static;display:inline-block;max-width:100%;margin:0 0 14px;font-weight:800;font-size:clamp(38px,5.2vw,68px);line-height:1.42}
#our-story .story-title{background-image:linear-gradient(90deg,#85BB33,#4FB9C2,#85BB33,#4FB9C2);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:story-grad-shift 4s linear infinite;display:inline-block;font-family:"Cairo",sans-serif;font-weight:800;line-height:1.42;padding:.12em .04em .2em;margin-top:-.06em}
html[lang="en"] #our-story .story-title{font-family:"Archivo","Cairo",sans-serif;font-weight:900;font-size:clamp(34px,4.3vw,56px)}
@keyframes story-grad-shift{0%{background-position:0% 50%}100%{background-position:150% 50%}}
@media (prefers-reduced-motion:reduce){.story-title{animation:none}}
.story-text{margin:0 0 30px;max-width:560px;font-size:clamp(16px,1.35vw,19px);line-height:1.95;color:var(--s-muted)}
.story-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}
.story-link{position:relative;display:inline-flex;align-items:center;gap:12px;color:var(--s-text);font-weight:800;font-size:16.5px;text-decoration:none;padding-bottom:8px}
.story-link::after{content:'';position:absolute;inset-inline:0;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--k),var(--a));transform-origin:var(--so,100%) 50%;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.story-link i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--k),var(--p));box-shadow:0 10px 26px -8px rgba(227,48,105,.8);transition:transform .35s}
.story-link:hover i{transform:translateX(var(--ax,-6px))}
.story-link svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
html[dir=rtl] .story-link svg{transform:scaleX(-1)}
.story-ghost{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:999px;border:1.5px solid var(--s-ghbd);background:var(--s-ghbg);backdrop-filter:blur(8px);color:var(--s-text);font-weight:700;font-size:15px;text-decoration:none;transition:background .3s,border-color .3s,transform .3s}
.story-ghost:hover{background:var(--s-ghbgh);border-color:var(--s-ghbdh);transform:translateY(-2px)}
.story-link:focus-visible,.story-ghost:focus-visible,.story-step:focus-visible{outline:3px solid var(--s-focus);outline-offset:4px;border-radius:12px}

/* visual */
.story-visual{position:relative;z-index:1;min-width:0}
.story-canvas{display:block;width:100%;aspect-ratio:1140/800;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 52%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 52%,#000 58%,transparent 100%)}
.story-visual{margin-inline-end:calc(-1*clamp(0px,5vw,80px));transform:scale(1.06);transform-origin:50% 60%}
.story-visual::before{content:"";position:absolute;left:50%;top:58%;width:78%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(227,48,105,.30),rgba(145,55,145,.14) 45%,transparent 70%);filter:blur(30px);z-index:-1}

/* timeline */
.story-steps{position:relative;z-index:3;list-style:none;margin:clamp(34px,5vw,64px) 0 0;padding:0;display:flex;align-items:center;gap:0}
.story-step{display:flex;align-items:center;gap:14px;flex:none;background:none;border:0;padding:6px 4px;color:var(--s-stm);font:inherit;font-weight:800;font-size:clamp(16px,1.6vw,20px);cursor:pointer;transition:color .4s}
.story-step .n{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--s-stbd);font-size:13px;font-weight:800;letter-spacing:.04em;transition:all .45s}
.story-step[aria-current=true]{color:var(--s-text)}
.story-step[aria-current=true] .n{border-color:transparent;background:linear-gradient(135deg,var(--k),var(--a));color:#fff;box-shadow:0 0 0 6px rgba(227,48,105,.18),0 14px 30px -10px rgba(227,48,105,.85)}
.story-line{flex:1 1 40px;min-width:30px;height:2px;margin:0 clamp(10px,1.6vw,22px);border-radius:2px;background:var(--s-stl);position:relative;overflow:hidden}
.story-line i{position:absolute;inset:0;background:linear-gradient(90deg,var(--k),var(--a));transform:scaleX(0);transform-origin:var(--so,100%) 50%;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.story-line.on i{transform:scaleX(1)}
.story-desc{position:relative;z-index:3;margin:20px 0 0;min-height:3.8em;max-width:640px;font-size:clamp(15px,1.3vw,18px);line-height:1.9;color:var(--s-desc);transition:opacity .35s}
.story-desc.sw{opacity:0}
.story-foot{height:clamp(44px,6vw,80px)}
html[dir=rtl] .story{--so:100%;--ax:-6px}


@media (max-width:900px){
 .story-grid{grid-template-columns:1fr;gap:6px}
 .story-visual{order:-1;margin:0 -10px;transform:none}
 .story-canvas{aspect-ratio:1140/860;-webkit-mask-image:radial-gradient(ellipse 56% 52% at 50% 54%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 56% 52% at 50% 54%,#000 60%,transparent 100%)}
 .story-copy{text-align:start}
 .story-step .t{display:none}
 .story-step[aria-current=true] .t{display:inline}
 .story-line{min-width:18px}
}
@media (prefers-reduced-motion:reduce){.story-link i,.story-ghost{transition:none}}

#our-story .story-title::after{content:none!important;display:none!important}
#our-story .story-ask{display:block;margin:-6px 0 22px;font-weight:800;font-size:clamp(16px,1.5vw,19px);line-height:1.7;color:var(--s-text)}