/* ============================================================
   CodeStan — Design System (from tokens)
   Dark theme · Brand #a2faa3 · 8px spacing · RTL-ready
   ============================================================ */
:root{
  --bg:#131313;
  --bg-first:#090909;
  --bg-second:#101010;
  --surface:#1b1b1b;
  --surface-2:#272727;
  --brand:#a2faa3;
  --brand-dim:rgba(162,250,163,.14);
  --brand-line:rgba(162,250,163,.35);
  --text:#ffffff;
  --text-p1:#cccbcb;
  --text-p2:#989898;
  --text-ph:#555555;
  --stroke:#2c2c2c;
  --stroke-soft:#222222;
  --btn-stroke:#3a3a3a;
  --shadow-dark:10px 14px 30px rgba(0,0,0,.5);
  --shadow-sharp:7px 9px 20px rgba(0,0,0,.5);
  --grad-brand:linear-gradient(268deg,#ffffff 0%,#a2faa3 100%);
  --grad-deep:linear-gradient(180deg,#1d1d1d 13.12%,#a2faa3 98.89%);
  --grad-radial:radial-gradient(#232323 0%,#000000 100%);
  --r-sm:8px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px;
  --font-en:'Archivo',system-ui,sans-serif;
  --font-ar:'Cairo',system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --dur-1:150ms; --dur-2:250ms; --dur-3:400ms; --dur-4:600ms;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-en);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
[dir="rtl"] body, [dir="rtl"]{font-family:var(--font-ar)}
[dir="rtl"] .eyebrow,[dir="rtl"] .stat strong{letter-spacing:0}
.ltr-num{direction:ltr;unicode-bidi:isolate;display:inline-block}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
::selection{background:var(--brand);color:#121212}

.container{width:min(1320px,100% - 64px);margin-inline:auto}
@media(min-width:1600px){.container{width:min(1560px,100% - 64px)}}
@media(min-width:1920px){.container{width:min(1720px,100% - 80px)}}
@media(max-width:768px){.container{width:calc(100% - 40px)}}
.section{padding-block:120px;position:relative}
@media(max-width:1024px){.section{padding-block:80px}}

/* ---------- Typography ---------- */
.eyebrow{
  display:inline-block;font-size:13px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brand);margin-bottom:16px;
}
h1,h2,h3{font-weight:650;line-height:1.2;text-wrap:balance}
.section-head{max-width:720px;margin-inline:auto;text-align:center;margin-bottom:64px}
.section-head h2{font-size:clamp(32px,4vw,48px);margin-bottom:16px}
.section-head p{font-size:18px;color:var(--text-p2);line-height:1.55}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;font-size:16px;line-height:1.3;
  padding:14px 28px;border-radius:var(--r-pill);
  transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),background var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease);
  white-space:nowrap;
}
.btn-primary{background:var(--brand);color:#121212;box-shadow:0 0 0 0 rgba(162,250,163,0)}
.btn-primary:hover{box-shadow:0 8px 32px rgba(162,250,163,.28);transform:translateY(-2px)}
.btn-outline{border:1px solid var(--btn-stroke);color:#dddddd;background:rgba(255,255,255,.02)}
.btn-outline:hover{border-color:var(--brand-line);color:var(--brand);transform:translateY(-2px)}
.btn-ghost{color:var(--text-p1);padding:10px 16px}
.btn-ghost:hover{color:var(--brand)}
.btn-sm{padding:10px 20px;font-size:14px}
.btn-lg{padding:16px 32px;font-size:17px}

/* ---------- Progress & cursor glow ---------- */
.scroll-progress{position:fixed;top:0;inset-inline-start:0;height:2px;width:0%;background:var(--grad-brand);z-index:200}
.cursor-glow{
  position:fixed;width:480px;height:480px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(162,250,163,.06) 0%,transparent 65%);
  transform:translate(-50%,-50%);transition:opacity var(--dur-3);left:-999px;top:-999px;
}
@media(hover:none){.cursor-glow{display:none}}

/* ---------- Navigation ---------- */
.nav{position:fixed;top:0;inset-inline:0;z-index:100;transition:background var(--dur-3) var(--ease),box-shadow var(--dur-3),border-color var(--dur-3);border-bottom:1px solid transparent}
.nav.is-scrolled{background:rgba(19,19,19,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:var(--stroke-soft)}
.nav-inner{display:flex;align-items:center;gap:32px;height:80px}
.nav-logo img{display:block;height:40px;width:auto}
.nav-links{display:flex;gap:4px;margin-inline-start:auto}
.nav-links a{padding:8px 14px;font-size:15px;color:var(--text-p1);border-radius:var(--r-sm);transition:color var(--dur-2)}
.nav-links a:hover{color:var(--brand)}
.nav-actions{display:flex;align-items:center;gap:12px}
.nav-actions .btn-ghost{display:inline-flex}
.lang-switch{
  position:relative;display:flex;align-items:center;gap:8px;padding:6px 12px;
  border:1px solid var(--stroke);border-radius:var(--r-pill);font-size:13px;font-weight:600;
}
.lang-switch .lang-opt{color:#fff;transition:color var(--dur-2);position:relative;z-index:1}
.lang-switch .lang-opt.is-active{color:#121212}
.lang-divider{width:1px;height:14px;background:var(--stroke)}
.lang-pill{position:absolute;top:3px;bottom:3px;inset-inline-start:3px;width:calc(50% - 6px);background:var(--brand);border-radius:var(--r-pill);transition:transform var(--dur-3) var(--ease)}
[dir="rtl"] .lang-pill{transform:translateX(calc(-100% - 6px))}
[dir="ltr"] .lang-pill{transform:translateX(0)}
.nav-burger{display:none;flex-direction:column;gap:6px;padding:8px}
.nav-burger span{width:24px;height:2px;background:var(--text);transition:transform var(--dur-2)}
@media(max-width:1180px){
  .nav-actions .btn-ghost{display:none}
}
@media(max-width:1024px){
  .nav-links{
    position:fixed;inset:80px 0 auto 0;flex-direction:column;background:rgba(16,16,16,.98);
    padding:24px 32px 40px;gap:8px;border-bottom:1px solid var(--stroke);
    transform:translateY(-120%);transition:transform var(--dur-3) var(--ease);
  }
  .nav-links.is-open{transform:translateY(0)}
  .nav-links a{font-size:20px;padding:12px 0}
  .nav-burger{display:flex}
  .nav-actions .btn{display:none}
}

/* ---------- Hero ---------- */
.hero{min-height:100svh;display:flex;align-items:center;padding-top:160px;padding-bottom:96px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-1}
#heroNet{position:absolute;inset:0;width:100%;height:100%;opacity:.5}
.hero-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,black 30%,transparent 75%);
}
.hero-glow{position:absolute;border-radius:50%;filter:blur(120px);pointer-events:none}
.hero-glow-1{width:560px;height:560px;background:rgba(162,250,163,.07);top:-160px;inset-inline-end:-120px}
.hero-glow-2{width:480px;height:480px;background:rgba(162,250,163,.05);bottom:-200px;inset-inline-start:-160px}
.hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.hero-title{font-size:clamp(40px,4.6vw,68px);line-height:1.08;font-weight:700;margin-bottom:24px;letter-spacing:-.01em}
.hero-sub{font-size:19px;color:var(--text-p1);line-height:1.6;max-width:560px;margin-bottom:40px}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.hero-trust{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:14px;color:var(--text-p2)}
.hero-trust strong{font-size:18px;font-weight:700;color:var(--brand);margin-inline-end:6px}
.hero-trust em{font-style:normal;color:var(--text-p2)}
.hero-trust .ht-sep{color:var(--text-p3)}
@media(max-width:640px){
  .hero-trust{gap:6px 10px;font-size:13px}
  .hero-trust strong{font-size:16px}
  .hero-trust .ht-sep{display:none}
  .hero-trust span{width:48%}
}
@media(max-width:1100px){
  .hero-inner{grid-template-columns:1fr;gap:80px}
  .hero-sub{max-width:640px}
}
@media(max-width:640px){
  .hero{padding-top:128px}
}

/* ---------- Dashboard visual ---------- */
.hero-visual{position:relative}
.dash{
  position:relative;background:linear-gradient(160deg,#1d1d1d 0%,#161616 100%);
  border:1px solid var(--stroke);border-radius:var(--r-lg);
  box-shadow:var(--shadow-dark),inset 0 1px 0 rgba(255,255,255,.05);
  padding:24px;max-width:560px;margin-inline:auto;
  animation:heroFloat 7s ease-in-out infinite;
}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.dash-head{display:flex;align-items:center;gap:8px;padding-bottom:16px;border-bottom:1px solid var(--stroke-soft);margin-bottom:20px}
.dash-dot{width:10px;height:10px;border-radius:50%;background:var(--surface-2)}
.dash-dot:first-child{background:rgba(162,250,163,.6)}
.dash-title{font-size:13px;font-weight:600;color:var(--text-p1);margin-inline-start:8px}
.dash-live{margin-inline-start:auto;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--brand);display:flex;align-items:center;gap:6px}
.dash-live i{width:7px;height:7px;border-radius:50%;background:var(--brand);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(162,250,163,.5)}50%{opacity:.5;box-shadow:0 0 0 6px rgba(162,250,163,0)}}
.dash-kpis{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.dash-kpi{background:var(--bg-second);border:1px solid var(--stroke-soft);border-radius:var(--r-md);padding:16px}
.dash-kpi-label{font-size:12px;color:var(--text-p2);display:block;margin-bottom:6px}
.dash-kpi strong{font-size:26px;color:var(--brand);display:block;margin-bottom:8px;white-space:nowrap}
.spark{width:100%;height:24px;stroke:var(--brand);stroke-width:2;opacity:.7}
.mini-bars{display:flex;align-items:flex-end;gap:5px;height:26px}
.mini-bars i{width:100%;height:var(--h);background:linear-gradient(180deg,var(--brand) 0%,rgba(162,250,163,.15) 100%);border-radius:3px;animation:barGrow 1.2s var(--ease) both}
@keyframes barGrow{from{height:0}}
.dash-chart{background:var(--bg-second);border:1px solid var(--stroke-soft);border-radius:var(--r-md);padding:16px;margin-bottom:16px}
.dash-chart-head{display:flex;justify-content:space-between;font-size:13px;color:var(--text-p2);margin-bottom:8px}
.dash-chart-val{color:var(--brand);font-weight:700}
.chart-area svg{width:100%;height:90px;display:block}
.dash-feed{display:flex;flex-direction:column;gap:10px}
.dash-feed-item{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-p1);background:var(--bg-second);border:1px solid var(--stroke-soft);border-radius:var(--r-sm);padding:10px 14px}
.pulse-dot{width:6px;height:6px;border-radius:50%;background:var(--brand);flex-shrink:0;animation:pulse 2s infinite}
.float-card{
  position:absolute;display:flex;align-items:center;gap:12px;
  background:rgba(27,27,27,.85);backdrop-filter:blur(12px);
  border:1px solid var(--brand-line);border-radius:var(--r-md);
  padding:14px 18px;box-shadow:var(--shadow-sharp);z-index:2;
}
.float-card strong{display:block;font-size:22px;color:var(--brand)}
.float-card span:not(.float-ic){font-size:12px;color:var(--text-p2)}
.float-card-1{top:-56px;inset-inline-start:-32px;animation:floatA 6s ease-in-out infinite}
.float-card-2{bottom:6%;inset-inline-end:-40px;animation:floatB 7s ease-in-out infinite}
.float-ic{width:36px;height:36px;border-radius:10px;background:var(--brand-dim);display:grid;place-items:center;flex-shrink:0}
.float-ic svg{width:18px;height:18px;fill:none;stroke:var(--brand);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes floatB{0%,100%{transform:translateY(0)}50%{transform:translateY(12px)}}
.dash-lines{position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);z-index:-1;pointer-events:none}
.dash-lines .conn{fill:none;stroke:var(--brand-line);stroke-width:1.2;stroke-dasharray:6 8;animation:dashMove 14s linear infinite}
@keyframes dashMove{to{stroke-dashoffset:-280}}
@media(max-width:1100px){
  .float-card-1{inset-inline-start:8px;top:-48px}
  .float-card-2{inset-inline-end:8px}
}
@media(max-width:640px){.float-card{display:none}}

/* ---------- Social proof ---------- */
.proof{padding-block:64px;border-block:1px solid var(--stroke-soft);background:var(--bg-second)}
.stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:32px;text-align:center;margin-bottom:56px}
.stat strong{display:block;font-size:clamp(36px,3.4vw,52px);font-weight:700;color:var(--brand);line-height:1.1;margin-bottom:8px;font-variant-numeric:tabular-nums}
.stat span{font-size:15px;color:var(--text-p2)}
@media(max-width:900px){.stats-grid{grid-template-columns:repeat(3,1fr);gap:40px 16px}}
@media(max-width:560px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
.logo-marquee-label{text-align:center;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-ph);margin-bottom:24px}
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,black 12%,black 88%,transparent)}
.marquee-track{display:flex;gap:64px;width:max-content;animation:marquee 30s linear infinite}
.marquee-track span{font-size:15px;font-weight:600;letter-spacing:.14em;color:var(--text-ph);white-space:nowrap;transition:color var(--dur-2)}
.marquee-track span:hover{color:var(--text-p1)}
@keyframes marquee{to{transform:translateX(-50%)}}
[dir="rtl"] .marquee-track{animation-name:marqueeRtl}
@keyframes marqueeRtl{to{transform:translateX(50%)}}

/* ---------- Industries ---------- */
.industries-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.industry-card{
  display:flex;align-items:center;gap:16px;background:var(--surface);
  border:1px solid var(--stroke-soft);border-radius:var(--r-md);padding:24px;
  transition:transform var(--dur-2) var(--ease),border-color var(--dur-2),background var(--dur-2);
}
.industry-card:hover{transform:translateY(-4px);border-color:var(--brand-line);background:var(--surface-2)}
.industry-ic{width:44px;height:44px;flex-shrink:0;border-radius:12px;background:var(--brand-dim);display:grid;place-items:center}
.industry-ic svg{width:22px;height:22px;fill:none;stroke:var(--brand);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.industry-card h3{font-size:17px;flex:1}
.industry-card span{font-size:13px;color:var(--text-p2);white-space:nowrap}
@media(max-width:1024px){.industries-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.industries-grid{grid-template-columns:1fr}}

/* ---------- Process ---------- */
.process-track{
  position:relative;display:flex;justify-content:space-between;gap:8px;
  padding-bottom:48px;margin-bottom:48px;overflow-x:auto;scrollbar-width:none;
}
.process-track::-webkit-scrollbar{display:none}
.process-step{
  position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;
  min-width:96px;color:var(--text-p2);transition:color var(--dur-2);
}
.process-step i{
  font-style:normal;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  font-size:14px;font-weight:700;background:var(--surface);border:1px solid var(--stroke);
  transition:all var(--dur-3) var(--ease);
}
.process-step span{font-size:14px;font-weight:600}
.process-step:hover{color:var(--text)}
.process-step.is-active{color:var(--brand)}
.process-step.is-active i{background:var(--brand);color:#121212;border-color:var(--brand);box-shadow:0 0 24px rgba(162,250,163,.35)}
.process-line{position:absolute;top:24px;inset-inline:48px;height:1px;background:var(--stroke)}
.process-line span{display:block;height:100%;width:0;background:var(--brand);transition:width var(--dur-4) var(--ease)}
.process-panel{
  max-width:760px;margin-inline:auto;text-align:center;background:var(--surface);
  border:1px solid var(--stroke-soft);border-radius:var(--r-lg);padding:40px;
  animation:panelIn var(--dur-3) var(--ease);
}
@keyframes panelIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.process-panel h3{font-size:28px;color:var(--brand);margin-bottom:12px}
.process-panel p{font-size:17px;color:var(--text-p1);line-height:1.6;margin-bottom:24px}
.process-tags{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.process-tags span{font-size:13px;color:var(--text-p2);border:1px solid var(--stroke);padding:6px 14px;border-radius:var(--r-pill)}

/* ---------- Technology ecosystem ---------- */
.tech{background:var(--bg-second)}
.tech-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.tech-network{position:relative;aspect-ratio:1/.72;max-height:560px}
#techSvg{position:absolute;inset:0;width:100%;height:100%}
#techSvg line{stroke:var(--stroke);stroke-width:1;transition:stroke var(--dur-2),stroke-width var(--dur-2)}
#techSvg line.is-hot{stroke:var(--brand-line);stroke-width:1.6}
#techNodes{position:absolute;inset:0}
.tech-node{
  position:absolute;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:8px;padding:10px 18px;
  background:var(--surface);border:1px solid var(--stroke);border-radius:var(--r-pill);
  font-size:14px;font-weight:600;color:var(--text-p1);cursor:pointer;white-space:nowrap;
  transition:all var(--dur-2) var(--ease);z-index:1;
}
.tech-node::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--text-ph);transition:background var(--dur-2)}
.tech-node:hover,.tech-node.is-hot{border-color:var(--brand);color:var(--brand);box-shadow:0 0 24px rgba(162,250,163,.18);transform:translate(-50%,-50%) scale(1.06)}
.tech-node:hover::before,.tech-node.is-hot::before{background:var(--brand)}
.tech-node.is-hub{background:var(--brand);color:#121212;border-color:var(--brand);font-weight:700}
.tech-node.is-hub::before{background:#121212}
.tech-info{background:var(--surface);border:1px solid var(--stroke-soft);border-radius:var(--r-lg);padding:40px;min-height:280px}
.tech-info h3{font-size:28px;color:var(--brand);margin-bottom:12px}
.tech-info p{font-size:16px;color:var(--text-p1);line-height:1.6;margin-bottom:24px}
.tech-projects{display:flex;flex-direction:column;gap:10px}
.tech-projects span{
  display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-p2);
  background:var(--bg-second);border:1px solid var(--stroke-soft);border-radius:var(--r-sm);padding:12px 16px;
}
.tech-projects span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);flex-shrink:0}
@media(max-width:900px){.tech-wrap{grid-template-columns:1fr}.tech-network{aspect-ratio:1/.9}}

/* ---------- Testimonials ---------- */
.testimonials{background:var(--bg-second)}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.testimonial-card{
  position:relative;background:var(--surface);border:1px solid var(--stroke-soft);
  border-radius:var(--r-lg);padding:40px 32px 32px;
  transition:transform var(--dur-3) var(--ease),border-color var(--dur-3),box-shadow var(--dur-3);
}
.testimonial-card:hover{transform:translateY(-8px);border-color:var(--brand-line);box-shadow:var(--shadow-dark)}
.testimonial-quote-mark{font-size:72px;line-height:1;color:var(--brand);opacity:.5;font-family:Georgia,serif;height:40px;display:block}
.testimonial-card blockquote{font-size:16.5px;color:var(--text-p1);line-height:1.65;margin-bottom:32px}
.testimonial-card figcaption{display:flex;align-items:center;gap:14px;border-top:1px solid var(--stroke-soft);padding-top:24px}
.testimonial-avatar{width:44px;height:44px;border-radius:50%;background:var(--brand-dim);border:1px solid var(--brand-line);display:grid;place-items:center;font-size:14px;font-weight:700;color:var(--brand);flex-shrink:0}
.testimonial-card figcaption strong{display:block;font-size:15px}
.testimonial-card figcaption div span{font-size:13px;color:var(--text-p2)}
.testimonial-result{margin-inline-start:auto;text-align:center;font-size:20px;font-weight:700;color:var(--brand);line-height:1.1}
.testimonial-result em{display:block;font-style:normal;font-size:11px;font-weight:600;color:var(--text-p2);letter-spacing:.06em;text-transform:uppercase;margin-top:4px}
@media(max-width:1024px){.testimonials-grid{grid-template-columns:1fr;max-width:640px;margin-inline:auto}}

/* ---------- Insights ---------- */
.insights-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.insight-card{
  background:var(--surface);border:1px solid var(--stroke-soft);border-radius:var(--r-lg);padding:32px;
  display:flex;flex-direction:column;gap:16px;min-height:280px;
  transition:transform var(--dur-3) var(--ease),border-color var(--dur-3),box-shadow var(--dur-3);cursor:pointer;
}
a.insight-card{color:inherit;text-decoration:none}
.insight-card:hover{transform:translateY(-8px);border-color:var(--brand-line);box-shadow:var(--shadow-dark)}
.insight-tag{align-self:flex-start;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);background:var(--brand-dim);padding:6px 12px;border-radius:var(--r-pill)}
.insight-card h3{font-size:21px;line-height:1.35}
.insight-card p{font-size:15px;color:var(--text-p2);line-height:1.6}
.insight-meta{margin-top:auto;font-size:13px;color:var(--text-ph)}
@media(max-width:1024px){.insights-grid{grid-template-columns:1fr;max-width:640px;margin-inline:auto}}

/* ---------- Final CTA ---------- */
.final-cta-panel{
  position:relative;text-align:center;background:var(--grad-radial);
  border:1px solid var(--stroke);border-radius:var(--r-xl);padding:96px 48px;overflow:hidden;
}
.final-cta-panel h2{font-size:clamp(32px,4vw,56px);max-width:820px;margin:0 auto 20px}
.final-cta-panel p{font-size:18px;color:var(--text-p1);max-width:640px;margin:0 auto 40px;line-height:1.65}
.final-cta-actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:32px}
.final-cta-alt{display:flex;align-items:center;justify-content:center;gap:12px;font-size:15px;color:var(--text-p2)}
.wa-link{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--brand)}
.wa-link svg{width:20px;height:20px;fill:none;stroke:var(--brand);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wa-link:hover{text-decoration:underline}
@media(max-width:640px){.final-cta-panel{padding:64px 24px}}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--stroke-soft);background:var(--bg-first);padding:80px 0 32px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;margin-bottom:64px}
.footer-brand img{height:36px;width:auto;margin-bottom:24px}
.footer-brand p{font-size:15px;color:var(--text-p2);line-height:1.65;max-width:340px}
.footer-col h4{font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--text);margin-bottom:20px}
.footer-col a{display:block;font-size:15px;color:var(--text-p2);padding:6px 0;transition:color var(--dur-2)}
.footer-col a:hover{color:var(--brand)}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--stroke-soft);padding-top:32px;font-size:14px;color:var(--text-p2)}
.foot-loc{display:inline-flex;align-items:center;gap:8px;color:var(--text-p1);text-decoration:none;transition:color .25s}
.foot-loc svg{width:15px;height:15px;fill:none;stroke:var(--brand);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.foot-loc:hover{color:var(--brand)}
@media(min-width:1024px){.footer-bottom{padding-inline-end:230px}}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:40px}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}

/* ---------- Consultation widget ---------- */
.widget-tab{
  position:fixed;bottom:32px;inset-inline-end:32px;z-index:110;
  display:flex;align-items:center;gap:10px;
  background:var(--brand);color:#121212;font-weight:700;font-size:15px;
  padding:16px 24px;border-radius:var(--r-pill);box-shadow:0 8px 32px rgba(162,250,163,.3);
  transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2),opacity var(--dur-3);
}
.widget-tab:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(162,250,163,.4)}
.widget-tab svg{width:20px;height:20px;fill:none;stroke:#121212;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.widget-tab.is-hidden{opacity:0;pointer-events:none;transform:translateY(16px)}
.widget-panel{
  position:fixed;bottom:32px;inset-inline-end:32px;z-index:120;
  width:min(480px,calc(100vw - 32px));max-height:calc(100svh - 64px);overflow-y:auto;
  background:var(--surface);border:1px solid var(--stroke);border-radius:var(--r-lg);
  box-shadow:var(--shadow-dark);padding:32px;
  opacity:0;pointer-events:none;transform:translateY(24px);
  transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease);
  scrollbar-width:thin;
}
.widget-panel.is-open{opacity:1;pointer-events:auto;transform:translateY(0)}
.widget-head{display:flex;justify-content:space-between;gap:16px;margin-bottom:24px}
.widget-head h3{font-size:22px;margin-bottom:6px}
.widget-head p{font-size:14px;color:var(--text-p2);line-height:1.5}
.widget-close{flex-shrink:0;width:36px;height:36px;border-radius:50%;border:1px solid var(--stroke);display:grid;place-items:center;transition:border-color var(--dur-2)}
.widget-close:hover{border-color:var(--brand-line)}
.widget-close svg{width:16px;height:16px;stroke:var(--text-p1);stroke-width:2;stroke-linecap:round}
.widget-form{display:flex;flex-direction:column;gap:16px}
.wf-row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.widget-form label{display:flex;flex-direction:column;gap:8px;font-size:13.5px;font-weight:600;color:var(--text-p1)}
.widget-form input,.widget-form select,.widget-form textarea{
  font:inherit;font-weight:400;font-size:14.5px;color:var(--text);
  background:var(--bg-second);border:1px solid var(--stroke);border-radius:var(--r-sm);
  padding:12px 14px;transition:border-color var(--dur-2),box-shadow var(--dur-2);width:100%;
}
.widget-form input::placeholder,.widget-form textarea::placeholder{color:var(--text-ph)}
.widget-form input:focus,.widget-form select:focus,.widget-form textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(162,250,163,.15);
}
.widget-form select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23989898' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-inline-end:40px}
[dir="rtl"] .widget-form select{background-position:left 12px center}
.widget-form textarea{resize:vertical;min-height:72px}
.wf-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.wf-success{font-size:14px;color:var(--brand);background:var(--brand-dim);border:1px solid var(--brand-line);border-radius:var(--r-sm);padding:12px 16px;text-align:center}
@media(max-width:640px){
  .widget-tab{bottom:16px;inset-inline-end:16px;padding:14px 18px}
  .widget-tab span{display:none}
  .widget-panel{bottom:16px;inset-inline-end:16px;padding:24px}
  .wf-row-2{grid-template-columns:1fr}
}
.wa-float{
  position:fixed;bottom:32px;inset-inline-start:32px;z-index:110;
  width:56px;height:56px;border-radius:50%;background:var(--surface);
  border:1px solid var(--brand-line);display:grid;place-items:center;
  box-shadow:var(--shadow-sharp);transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2);
}
.wa-float:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(162,250,163,.25)}
.wa-float svg{width:26px;height:26px;fill:none;stroke:var(--brand);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:640px){.wa-float{bottom:16px;inset-inline-start:16px;width:48px;height:48px}}

/* ---------- Reveal animations ---------- */
.reveal{opacity:0;transform:translateY(32px);transition:opacity var(--dur-4) var(--ease),transform var(--dur-4) var(--ease)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   REFINEMENT LAYER — immersive interactions & storytelling
   ============================================================ */

/* ---------- Story dot navigation ---------- */
.dot-nav{
  position:fixed;top:50%;inset-inline-end:24px;transform:translateY(-50%);z-index:90;
  display:flex;flex-direction:column;gap:16px;
}
.dot-nav a{position:relative;display:flex;align-items:center;justify-content:center;width:24px;height:24px}
.dot-nav i{
  width:6px;height:6px;border-radius:50%;background:var(--text-ph);
  transition:all var(--dur-3) var(--ease);
}
.dot-nav a:hover i{background:var(--text-p1);transform:scale(1.4)}
.dot-nav a.is-active i{background:var(--brand);transform:scale(1.6);box-shadow:0 0 12px rgba(162,250,163,.5)}
.dot-nav span{
  position:absolute;inset-inline-end:32px;top:50%;transform:translateY(-50%) translateX(8px);
  font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--text-p1);
  background:var(--surface);border:1px solid var(--stroke);border-radius:var(--r-sm);
  padding:6px 12px;white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity var(--dur-2),transform var(--dur-2) var(--ease);
}
.dot-nav a:hover span{opacity:1;transform:translateY(-50%) translateX(0)}
@media(max-width:1180px){.dot-nav{display:none}}

/* ---------- Spotlight hover (mouse-follow highlight) ---------- */
[data-spot]{position:relative}
[data-spot]::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(162,250,163,.09),transparent 60%);
  opacity:0;transition:opacity var(--dur-3) var(--ease);
}
[data-spot]:hover::before{opacity:1}
[data-spot]>*{position:relative;z-index:1}
.challenge-card,.solution-card,.industry-card,.why-item,.partner-benefit,.testimonial-card,.insight-card{will-change:transform}

/* ---------- Hero word-by-word reveal ---------- */
.hero-title .w{display:inline-block;opacity:0;transform:translateY(26px) rotate(2deg);transition:opacity var(--dur-4) var(--ease),transform var(--dur-4) var(--ease)}
.hero-title.is-visible .w{opacity:1;transform:translateY(0) rotate(0)}
.hero-title .w.accent{color:var(--brand)}

/* ---------- Hero parallax scene ---------- */
.hero-copy{transition:transform .1s linear}
.hero-visual{transition:transform .1s linear}
.dash{transform-style:preserve-3d;will-change:transform;animation:none}
.hero-visual{perspective:1200px}

/* ---------- Case visual tilt + metric pop ---------- */
.case-visual{transform-style:preserve-3d;will-change:transform;transition:transform var(--dur-3) var(--ease)}
.case-metric strong{display:inline-block}
.case-metric strong.pop{animation:metricPop .7s var(--ease)}
@keyframes metricPop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}

/* ---------- Industry select interaction ---------- */
.industry-card{cursor:pointer;user-select:none}
.industry-card.is-selected{border-color:var(--brand);background:linear-gradient(160deg,rgba(162,250,163,.1),var(--surface) 60%)}
.industry-card.is-selected .industry-ic{background:var(--brand)}
.industry-card.is-selected .industry-ic svg{stroke:#121212}

/* ---------- Tech node drift ---------- */
.tech-node{animation:nodeDrift 6s ease-in-out infinite}
.tech-node:nth-child(2n){animation-duration:7.5s;animation-delay:-2s}
.tech-node:nth-child(3n){animation-duration:8.5s;animation-delay:-4s}
.tech-node.is-hub{animation:none}
@keyframes nodeDrift{0%,100%{margin-top:0}50%{margin-top:-10px}}
#techSvg line{stroke-dasharray:4 6;animation:lineFlow 20s linear infinite}
@keyframes lineFlow{to{stroke-dashoffset:-200}}

/* ---------- Process autoplay hint ---------- */
.process-step.is-active i{animation:stepPulse 2.4s ease-in-out infinite}
@keyframes stepPulse{0%,100%{box-shadow:0 0 0 0 rgba(162,250,163,.35)}50%{box-shadow:0 0 0 10px rgba(162,250,163,0)}}

/* ---------- Marquee pause on hover ---------- */
.marquee:hover .marquee-track{animation-play-state:paused}

/* ---------- Section eyebrow line reveal ---------- */
.section-head .eyebrow{position:relative}
.section-head .eyebrow::after{
  content:"";position:absolute;bottom:-8px;inset-inline-start:50%;transform:translateX(-50%);
  width:0;height:2px;background:var(--brand);transition:width var(--dur-4) var(--ease) .2s;
}
[dir="rtl"] .section-head .eyebrow::after{transform:translateX(50%)}
.reveal.is-visible .eyebrow::after,.section-head.is-visible .eyebrow::after{width:48px}

/* ---------- Smooth content fade for process panel ---------- */
.process-panel{transition:box-shadow var(--dur-3)}
.process-panel:hover{border-color:var(--brand-line);box-shadow:var(--shadow-sharp)}

/* ---------- Final CTA breathing glow ---------- */
.final-cta-panel{animation:ctaBreath 8s ease-in-out infinite}
@keyframes ctaBreath{0%,100%{box-shadow:0 0 0 rgba(162,250,163,0)}50%{box-shadow:0 0 80px rgba(162,250,163,.08)}}

/* ============================================================
   MOTION-FIRST SCROLLYTELLING LAYER
   ============================================================ */

/* ---------- Shared sticky/scrolly utilities ---------- */
.journey-sticky,.cases-sticky,.process-sticky,.why-sticky{
  position:sticky;top:0;min-height:100svh;display:flex;align-items:center;overflow:hidden;
}
.journey-space,.cases-space,.process-space,.why-space{width:100%;pointer-events:none}
.journey-space{height:420svh}
.cases-space{height:280svh}
.process-space{height:300svh}
.why-space{height:360svh}
.journey,.cases,.process,.why{padding-block:0}
.journey .section-head,.cases .section-head,.process .section-head,.why .section-head{padding-top:120px}
@media(prefers-reduced-motion:reduce){
  .journey-space,.cases-space,.process-space,.why-space{height:0!important}
  .journey-sticky,.cases-sticky,.process-sticky,.why-sticky{position:static;min-height:0;padding-block:64px}
}

/* ---------- Hero: floating notification + feed status ---------- */
.float-notif{
  position:absolute;top:-24px;inset-inline-end:32px;z-index:3;
  display:flex;align-items:center;gap:12px;
  background:rgba(27,27,27,.9);backdrop-filter:blur(12px);
  border:1px solid var(--brand-line);border-radius:var(--r-md);
  padding:12px 18px;box-shadow:var(--shadow-sharp);
  opacity:0;transform:translateY(-8px) scale(.94);
  transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease);
}
.float-notif.is-show{opacity:1;transform:translateY(0) scale(1)}
.notif-ic{width:28px;height:28px;border-radius:50%;background:var(--brand);display:grid;place-items:center;flex-shrink:0}
.notif-ic svg{width:14px;height:14px;fill:none;stroke:#121212;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.float-notif strong{display:block;font-size:13px}
.float-notif div span{font-size:11px;color:var(--text-p2)}
@media(max-width:640px){.float-notif{display:none}}
.dash-feed-item{justify-content:space-between;transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease)}
.dash-feed-item.is-out{opacity:0;transform:translateY(-10px)}
.dash-feed-item.is-in{opacity:1;transform:translateY(0)}
.feed-status{
  font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--brand);
  border:1px solid var(--brand-line);border-radius:var(--r-pill);padding:3px 10px;
  animation:pulse 2s infinite;flex-shrink:0;margin-inline-start:12px;
}

/* ---------- Journey: question → solution ---------- */
.journey{background:var(--bg-second)}
.journey-inner{position:relative;display:flex;flex-direction:column;gap:32px;width:100%}
.journey-progress{display:flex;align-items:center;gap:20px}
.jp-label{font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--text-p2);font-variant-numeric:tabular-nums}
.jp-bar{flex:1;height:2px;background:var(--stroke);border-radius:2px;overflow:hidden}
.jp-bar span{display:block;height:100%;width:0;background:var(--grad-brand);transition:width .2s linear}
.j-stage{
  position:relative;display:grid;grid-template-columns:1fr 72px 1.35fr;gap:24px;align-items:stretch;
  min-height:420px;padding-inline:24px;
}
.j-question{
  background:var(--surface);border:1px solid var(--stroke-soft);border-radius:var(--r-lg);
  padding:40px;display:flex;flex-direction:column;justify-content:center;
  transition:opacity .45s var(--ease),transform .45s var(--ease),border-color .45s;
}
.j-kicker{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-p2);margin-bottom:16px}
.j-kicker-a{color:var(--brand)}
.j-question h3{font-size:clamp(24px,2.6vw,36px);line-height:1.25;margin-bottom:12px}
.j-question p{font-size:16px;color:var(--text-p2);line-height:1.6}
.j-question.is-answered{border-color:var(--brand-line)}
.j-question.is-answered::after{
  content:"";width:32px;height:32px;margin-top:24px;border-radius:50%;
  background:var(--brand) center/16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23121212' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
.j-arrow{display:grid;place-items:center;color:var(--text-ph);transition:color .4s}
.j-arrow svg{width:64px;height:24px}
.j-arrow-path{stroke-dasharray:70 70;stroke-dashoffset:70;transition:stroke-dashoffset .8s var(--ease)}
[dir="rtl"] .j-arrow svg{transform:scaleX(-1)}
.j-arrow.is-lit{color:var(--brand)}
.j-arrow.is-lit .j-arrow-path{stroke-dashoffset:0}
.j-solution{
  position:relative;background:linear-gradient(160deg,#1e241e 0%,#161616 70%);
  border:1px solid var(--brand-line);border-radius:var(--r-lg);padding:40px;
  display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;
  opacity:0;transform:translateY(28px) scale(.97);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.j-solution.is-on{opacity:1;transform:translateY(0) scale(1)}
.j-sol-copy h4{font-size:clamp(22px,2.2vw,30px);margin-bottom:10px}
.j-sol-copy>p{font-size:15px;color:var(--text-p1);margin-bottom:20px;line-height:1.6}
.j-sol-copy ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:28px}
.j-sol-copy li{position:relative;padding-inline-start:24px;font-size:14px;color:var(--text-p1)}
.j-sol-copy li::before{
  content:"";position:absolute;inset-inline-start:0;top:4px;width:14px;height:14px;border-radius:50%;
  background:var(--brand-dim) center/9px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23a2faa3' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  border:1px solid var(--brand-line);
}
.j-visual{position:relative;min-height:240px;display:grid;place-items:center}
.j-visual .jv{width:100%;max-width:280px}
.j-visual svg{width:100%;height:auto;overflow:visible}
.jv-bar{animation:jvBar 2.4s var(--ease) infinite alternate}
@keyframes jvBar{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
.jv-spin{transform-origin:center;animation:jvSpin 9s linear infinite}
@keyframes jvSpin{to{transform:rotate(360deg)}}
.jv-flow{stroke-dasharray:6 8;animation:lineFlow 12s linear infinite}
.jv-blink{animation:pulse 1.6s infinite}
@media(max-width:960px){
  .j-stage{grid-template-columns:1fr;min-height:0;gap:16px}
  .j-arrow{transform:rotate(90deg);height:56px}
  [dir="rtl"] .j-arrow svg{transform:scaleX(-1)}
  .j-solution{grid-template-columns:1fr}
  .j-visual{min-height:160px}
}

/* ---------- Cases: sticky stacked deck ---------- */
.cases{background:var(--bg-first)}
.case-slide{
  position:absolute;inset:0;display:flex;align-items:center;
  will-change:transform,opacity,clip-path;
}
.case-slide-inner{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;width:100%}
.case-device{position:relative;min-height:380px}
.device{
  position:absolute;background:var(--surface);border:1px solid var(--stroke);
  border-radius:var(--r-md);box-shadow:var(--shadow-dark);overflow:hidden;
}
.device-desktop{width:78%;aspect-ratio:16/10;top:6%;inset-inline-start:0}
.device-phone{width:26%;aspect-ratio:9/18.5;bottom:0;inset-inline-end:6%;border-radius:20px}
.device-screen{padding:14px;height:100%;display:flex;flex-direction:column;gap:10px;background:var(--bg-second)}
.mock-bar{display:flex;gap:6px;margin-bottom:4px}
.mock-bar i{width:8px;height:8px;border-radius:50%;background:var(--surface-2)}
.mock-bar i:first-child{background:rgba(162,250,163,.6)}
.mock-row{height:10px;border-radius:5px;background:var(--surface-2)}
.mock-w60{width:60%}.mock-w40{width:40%}
.mock-chart{flex:1;display:flex;align-items:flex-end;gap:8px;padding-top:8px}
.mock-chart span{flex:1;height:var(--h);background:linear-gradient(180deg,var(--brand) 0%,rgba(162,250,163,.12) 100%);border-radius:4px;animation:barGrow 1.4s var(--ease) both}
.mock-chart span:nth-child(2n){animation-delay:.15s}
.mock-chart span:nth-child(3n){animation-delay:.3s}
.mock-circle{width:44px;height:44px;border-radius:50%;background:var(--brand-dim);border:1px solid var(--brand-line);margin-bottom:4px}
.mock-btn{height:26px;border-radius:13px;background:var(--brand);margin-top:auto}
.case-story .case-industry{display:inline-block;margin-bottom:20px}
.case-story h3{font-size:clamp(24px,2.6vw,38px);line-height:1.25;margin-bottom:16px;text-wrap:balance}
.case-impact-line{font-size:16.5px;color:var(--text-p1);line-height:1.6;margin-bottom:24px;max-width:520px}
.case-big{margin-bottom:24px}
.case-big strong{display:block;font-size:clamp(56px,6vw,88px);font-weight:700;color:var(--brand);line-height:1;font-variant-numeric:tabular-nums}
.case-big span{font-size:15px;color:var(--text-p2)}
.cases-progress{
  position:absolute;bottom:40px;left:50%;transform:translateX(-50%);
  display:flex;gap:10px;z-index:5;
}
.cases-progress span{width:8px;height:8px;border-radius:50%;background:var(--surface-2);transition:all var(--dur-3) var(--ease)}
.cases-progress span.is-on{background:var(--brand);transform:scale(1.4);box-shadow:0 0 10px rgba(162,250,163,.5)}
@media(max-width:900px){
  .case-slide-inner{grid-template-columns:1fr;gap:32px}
  .case-device{min-height:260px;max-width:480px}
}

/* ---------- Process: scroll-driven roadmap ---------- */
.process-track-static{padding-bottom:56px;margin-bottom:32px}
.process-step{pointer-events:none}
.process-step.is-done{color:var(--text-p1)}
.process-step.is-done i{background:var(--surface-2);border-color:var(--brand-line);color:var(--brand)}
.process-step.is-active i{animation:stepPulse 2.4s ease-in-out infinite}
.process-panel{transition:opacity .3s var(--ease),transform .3s var(--ease)}
.process-panel.is-switching{opacity:0;transform:translateY(10px)}

/* ---------- Why: sequential storytelling ---------- */
.why{background:var(--bg-second)}
.why-slide{
  position:absolute;inset:0;display:flex;align-items:center;
  opacity:0;visibility:hidden;will-change:transform,opacity,clip-path;
}
.why-slide-inner{display:flex;flex-direction:column;align-items:flex-start;gap:24px;max-width:900px}
.why-num{
  font-size:clamp(72px,9vw,140px);font-weight:800;line-height:1;color:transparent;
  -webkit-text-stroke:1.5px var(--brand-line);font-variant-numeric:tabular-nums;
}
.why-slide h3{font-size:clamp(40px,5.5vw,80px);line-height:1.08;font-weight:700;letter-spacing:-.01em;text-wrap:balance}
.why-slide p{font-size:clamp(17px,1.6vw,22px);color:var(--text-p2);line-height:1.6;max-width:640px}
.why-cta{margin-top:8px}
.why-bg-word{
  position:absolute;bottom:-4%;inset-inline-end:-2%;font-size:34vw;font-weight:800;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(162,250,163,.06);pointer-events:none;user-select:none;
}
@media(max-width:640px){.why-slide h3{font-size:36px}}

/* ---------- Partners: expanding ecosystem ---------- */
.partners{background:var(--bg-first)}
.eco{position:relative;min-height:640px;display:grid;place-items:center}
#ecoCanvas{position:absolute;inset:0;width:100%;height:100%}
.eco-core{
  position:relative;z-index:2;background:var(--surface);border:1px solid var(--brand-line);
  border-radius:var(--r-lg);padding:20px 32px;box-shadow:0 0 60px rgba(162,250,163,.14);
  animation:corePulse 3s ease-in-out infinite;
}
@keyframes corePulse{0%,100%{box-shadow:0 0 40px rgba(162,250,163,.12)}50%{box-shadow:0 0 80px rgba(162,250,163,.24)}}
.eco-node{
  position:absolute;left:var(--ex);top:var(--ey);transform:translate(-50%,-50%) scale(0);z-index:2;
  background:var(--surface);border:1px solid var(--stroke);border-radius:var(--r-pill);
  padding:12px 22px;font-size:14.5px;font-weight:600;color:var(--text-p1);white-space:nowrap;
  transition:transform .6s var(--ease),border-color .4s,box-shadow .4s;
}
.eco-node.is-on{transform:translate(-50%,-50%) scale(1);border-color:var(--brand-line);box-shadow:0 8px 30px rgba(0,0,0,.45)}
.eco-node::before{
  content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--brand);
  margin-inline-end:10px;vertical-align:middle;animation:pulse 2.4s infinite;
}
.eco-cta{position:absolute;bottom:0;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:16px}
.eco-cta-sub{font-size:14px;color:var(--text-p2);display:flex;gap:8px;align-items:center}
.eco-cta-sub strong{color:var(--brand);font-size:20px}
@media(max-width:768px){
  .eco{min-height:560px}
  .eco-node{font-size:12.5px;padding:10px 16px}
}

/* ---------- Process: scroll-driven roadmap states ---------- */
.process-step{pointer-events:none}
.process-step.is-done{color:var(--text-p1)}
.process-step.is-done i{background:var(--brand-dim);border-color:var(--brand-line);color:var(--brand)}

/* ---------- Partners: CTA reveal ---------- */
.eco-cta{opacity:0;transform:translateX(-50%) translateY(20px);pointer-events:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.eco-cta.is-on{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}

/* ---------- Cases & journey link/meta fixes ---------- */
.case-meta{display:flex;gap:20px;flex-wrap:wrap;font-size:13.5px;color:var(--text-p2);margin-bottom:28px}
.case-meta span+span{border-inline-start:1px solid var(--stroke);padding-inline-start:20px}
.solution-cta{
  display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--brand);
  position:relative;transition:gap var(--dur-2) var(--ease);
}
.solution-cta::after{
  content:"";width:18px;height:12px;flex-shrink:0;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M13 1l5 5-5 5M18 6H1' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M13 1l5 5-5 5M18 6H1' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.solution-cta:hover{gap:14px}
.solution-cta::before{
  content:"";position:absolute;bottom:-4px;inset-inline-start:0;width:100%;height:1px;
  background:var(--brand);transform:scaleX(0);transform-origin:inline-start;transition:transform var(--dur-3) var(--ease);
}
.solution-cta:hover::before{transform:scaleX(1)}
[dir="rtl"] .solution-cta::after{transform:scaleX(-1)}
.case-industry{
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);
  border:1px solid var(--brand-line);border-radius:var(--r-pill);padding:6px 14px;
}

/* ============================================================
   HOME MARKETPLACE SHOWCASE (hmk-) — scroll-driven product stage
   ============================================================ */
.hmk{background:var(--bg-first);padding-block:0;overflow:visible !important}
.hmk::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(55% 38% at 50% 32%,rgba(162,250,163,.055),transparent 70%);
}
.hmk .section-head{padding-top:120px}
.hmk-sticky{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.hmk-space{height:460svh;width:100%;pointer-events:none}
.hmk-inner{width:100%;display:flex;flex-direction:column;gap:28px}
.hmk-progress{display:flex;align-items:center;gap:20px}
.hmk-stage{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:22px}

/* unified-composition connection lines + core label */
.hmk-links{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;opacity:0;transition:opacity .8s var(--ease)}
.hmk-stage.is-unity .hmk-links{opacity:1}
.hmk-links path{
  fill:none;stroke:var(--brand-line);stroke-width:1.4;
  stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.1s var(--ease);
}
.hmk-stage.is-unity .hmk-links path{stroke-dashoffset:0}
.hmk-stage.is-unity .hmk-links path:nth-child(2){transition-delay:.12s}
.hmk-stage.is-unity .hmk-links path:nth-child(3){transition-delay:.24s}
.hmk-stage.is-unity .hmk-links path:nth-child(4){transition-delay:.36s}
.hmk-core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.8);z-index:4;
  background:rgba(16,16,16,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--brand-line);border-radius:var(--r-lg);padding:18px 30px;text-align:center;
  opacity:0;pointer-events:none;box-shadow:0 0 60px rgba(162,250,163,.14);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.hmk-core strong{display:block;font-size:clamp(16px,1.6vw,22px);letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
.hmk-core span{font-size:13px;color:var(--text-p2)}
.hmk-stage.is-unity .hmk-core{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* product cards */
.hmk-card{
  position:relative;z-index:2;display:flex;flex-direction:column;gap:12px;
  background:linear-gradient(170deg,#191919,#121212);
  border:1px solid var(--stroke-soft);border-radius:var(--r-lg);padding:20px;
  opacity:.32;transform:scale(.92);will-change:transform,opacity;
  transition:opacity .55s var(--ease),transform .55s var(--ease),border-color .55s,box-shadow .55s;
}
.hmk-card.is-past{opacity:.55;transform:scale(.95)}
.hmk-card.is-active{opacity:1;transform:scale(1);border-color:var(--brand-line);box-shadow:0 14px 44px rgba(162,250,163,.12)}
.hmk-card:focus-visible{opacity:1;transform:scale(1);border-color:var(--brand-line)}
.hmk-stage.is-unity .hmk-card{opacity:.94;transform:scale(.88)}
.hmk-card-top{display:flex;align-items:baseline;gap:14px}
.hmk-num{font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--brand);font-variant-numeric:tabular-nums}
.hmk-name{font-size:clamp(16px,1.45vw,20px);line-height:1.25}
.hmk-desc{font-size:14px;color:var(--text-p2);line-height:1.55}
.hmk-cta{margin-top:auto;font-size:14px}
.hmk-vis{height:180px}
.hmk-vis svg{width:100%;height:100%;display:block}

/* svg micro-animations — run only while the card is live */
.hmk-anim{animation-play-state:paused}
.hmk-card.is-live .hmk-anim{animation-play-state:running}
.hmk-pop{opacity:0;transform-box:fill-box;transform-origin:center;animation:hmkPop .7s var(--ease) both}
@keyframes hmkPop{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
.hmk-rise{opacity:0;transform-box:fill-box;transform:translateY(10px);animation:hmkRise .7s var(--ease) both}
@keyframes hmkRise{to{opacity:1;transform:translateY(0)}}
.hmk-ecg{stroke-dasharray:26 160;animation:hmkEcg 2.8s linear infinite}
@keyframes hmkEcg{to{stroke-dashoffset:-186}}
.hmk-route{animation:hmkRouteFlow 3s linear infinite}
@keyframes hmkRouteFlow{to{stroke-dashoffset:-120}}
.hmk-chip{opacity:.4;animation:hmkChip 6s linear infinite}
@keyframes hmkChip{0%,30%{opacity:1}45%,100%{opacity:.4}}
.hmk-blink{animation:pulse 1.6s infinite}
.hmk-bar{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);animation:hmkBar .8s var(--ease) both}
@keyframes hmkBar{to{transform:scaleY(1)}}
.hmk-ring{stroke-dasharray:202;stroke-dashoffset:202;animation:hmkRing 1.5s var(--ease) .3s both}
@keyframes hmkRing{to{stroke-dashoffset:44}}
.hmk-draw{stroke-dasharray:340;stroke-dashoffset:340;animation:hmkDraw 1.4s var(--ease) .9s both}
@keyframes hmkDraw{to{stroke-dashoffset:0}}
.hmk-kpi-num{fill:var(--brand);font:700 15px var(--font-en);font-variant-numeric:tabular-nums}
.hmk-kpi-lbl{fill:var(--text-p2);font:600 8px var(--font-en);letter-spacing:.08em;text-transform:uppercase}
.hmk-chip-txt{fill:var(--text-p1);font:600 9.5px var(--font-en)}
.hmk-col-lbl{fill:var(--text-p2);font:700 9px var(--font-en);letter-spacing:.1em;text-transform:uppercase;text-anchor:middle}
[dir="rtl"] .hmk-kpi-num,[dir="rtl"] .hmk-kpi-lbl,
[dir="rtl"] .hmk-chip-txt,[dir="rtl"] .hmk-col-lbl{font-family:var(--font-ar)}

/* hover — fine pointers only */
@media(hover:hover) and (pointer:fine){
  .hmk-card:hover{opacity:1;transform:scale(1.02);border-color:var(--brand-line);box-shadow:0 16px 50px rgba(162,250,163,.18);z-index:4}
  .hmk-stage:not(.is-unity):hover .hmk-card:not(:hover):not(.is-active){opacity:.26}
}

/* supporting CTA row */
.hmk-final{
  position:relative;text-align:center;overflow:hidden;
  background:linear-gradient(170deg,#1c1c1c,#131313);
  border:1px solid var(--stroke);border-radius:var(--r-xl);
  padding:64px 32px;margin-block:96px 120px;
}
.hmk-final::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(50% 60% at 50% 0%,rgba(162,250,163,.08),transparent 70%);
}
.hmk-final h3{font-size:clamp(24px,3vw,36px);margin-bottom:14px;position:relative}
.hmk-final p{font-size:16.5px;color:var(--text-p2);max-width:640px;margin:0 auto 32px;line-height:1.6;position:relative}
.hmk-final-ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;position:relative}

/* mobile: vertical storytelling, no sticky */
@media(max-width:960px){
  .hmk-space{display:none}
  .hmk-sticky{position:static;min-height:0;padding-block:8px}
  .hmk-progress,.hmk-links,.hmk-core{display:none}
  .hmk-stage{grid-template-columns:1fr;gap:20px}
  .hmk-card,.hmk-card.is-past,.hmk-card.is-active{opacity:1;transform:none}
  .hmk-vis{height:170px}
  .hmk .section-head{padding-top:80px}
  .hmk-final{margin-block:64px 80px;padding:44px 20px}
}

/* reduced motion: flat, everything visible */
@media(prefers-reduced-motion:reduce){
  .hmk-space{display:none}
  .hmk-sticky{position:static;min-height:0;padding-block:24px}
  .hmk-card,.hmk-card.is-past,.hmk-card.is-active{opacity:1;transform:none}
}