/* why.css — Why Choose Us. Load AFTER /css/styles.css.
   Header and footer are NOT styled here: they come from styles.css so they match every other page. */

/* tokens scoped to <main> so the shared header/footer are never affected */
main{--bg:#f6f7fb;--text:#4a5470;--ink:#0b1226;--line:#e4e7f0;--orange:#ff5a1f;--ease:cubic-bezier(.22,.8,.24,1)}
body{overflow-x:clip}

/* ===== Hero ===== */
.wx-hero{position:relative;min-height:calc(100vh - var(--header-h,80px));display:flex;align-items:center;background:#0b1226;color:#fff;overflow:hidden;padding:70px 0 90px}
.wx-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(520px circle at 70% 35%,rgba(255,90,31,.22),transparent 70%);pointer-events:none}
#net{position:absolute;inset:0;width:100%;height:100%;display:block}
.wx-hero-in{position:relative;z-index:2}
.wx-hero h1{font-size:clamp(46px,9vw,128px);line-height:.98;letter-spacing:-3px;margin:0 0 28px;color:#fff}
.wx-hero h1 span{display:block}
.wx-hero .l1{animation:rise .9s both}
.wx-hero .l2{color:transparent;-webkit-text-stroke:2px #ff7a30;background:linear-gradient(90deg,#ff5a1f,#ffa43d) no-repeat 0 0/var(--fill,0%) 100%;-webkit-background-clip:text;background-clip:text;animation:rise .9s .15s both;padding-bottom:.1em}
.wx-hero .lead{color:#b4bbd0;max-width:600px;font-size:18px;animation:rise .9s .3s both}
.wx-stats{display:flex;gap:56px;margin-top:38px;animation:rise .9s .45s both}
.wx-stats div{font-size:14px;color:#8e98b5}
.wx-stats b{display:block;font-size:clamp(44px,6vw,76px);line-height:1;color:#fff;letter-spacing:-2px;margin-bottom:6px}
.wx-creds{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px;max-width:760px;animation:rise .9s .6s both}
.wx-creds span{display:inline-flex;align-items:center;gap:10px;padding:9px 18px 9px 10px;border-radius:40px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);font-size:14px;font-weight:500;color:#e6e9f2;backdrop-filter:blur(6px);transition:.3s}
.wx-creds span:hover{background:rgba(255,90,31,.18);border-color:#ff7a30;transform:translateY(-3px)}
.wx-creds em{font-style:normal;font-size:11px;font-weight:700;color:#fff;background:linear-gradient(135deg,#ff7a2f,#e8420a);border-radius:20px;padding:4px 9px}
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}

/* ===== Ecosystem accordion ===== */
.wx-eco{background:var(--bg);padding:100px 0}
.wx-head{max-width:720px;margin-bottom:46px}
.wx-head .label{margin:0;color:var(--orange);font-weight:600;font-size:14px}
.wx-head h2{font-size:clamp(30px,4.4vw,56px);line-height:1.1;letter-spacing:-1.2px;margin:6px 0 16px;color:var(--ink)}
.wx-head p:last-child{color:var(--text);font-size:17px}
.wx-acc{display:flex;gap:16px;height:420px}
.wx-p{position:relative;flex:1;overflow:hidden;border-radius:28px;padding:32px;background:#fff;border:1px solid var(--line);cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;transition:flex .7s var(--ease),background .5s,color .5s,box-shadow .5s}
.wx-p svg{position:absolute;left:32px;top:32px;width:52px;height:52px;padding:13px;border-radius:16px;background:#fff1e8;color:var(--orange);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:.5s}
.wx-p h3{position:relative;font-size:22px;line-height:1.25;margin:0;color:var(--ink);transition:margin .5s}
.wx-p p{position:relative;max-height:0;opacity:0;overflow:hidden;max-width:400px;font-size:16px;color:#b4bbd0;margin:0;transition:max-height .6s var(--ease),opacity .5s}
.wx-p.on{flex:2.6;background:#0b1226;color:#fff;box-shadow:0 26px 50px rgba(11,18,38,.25)}
.wx-p.on h3{margin-bottom:12px;font-size:30px;color:#fff}
.wx-p.on svg{background:var(--orange);color:#fff;transform:rotate(-8deg)}
.wx-p.on p{max-height:140px;opacity:1}
.wx-p::before{content:"";position:absolute;right:-80px;top:-80px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(255,90,31,.5),transparent 70%);opacity:0;transition:opacity .6s}
.wx-p.on::before{opacity:1}

/* scroll reveal */
.js .js-rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .js-rv.in{opacity:1;transform:none}

/* ===== Responsive ===== */
@media(max-width:860px){
  .wx-stats{gap:34px}
  .wx-acc{flex-direction:column;height:auto}
  .wx-p{flex:none;padding:26px;padding-top:96px}
  .wx-p svg{left:26px;top:26px}
  .wx-p p{max-height:none;opacity:1;color:var(--text);margin-top:8px}
  .wx-p.on p{color:#b4bbd0}
  .wx-p.on h3{font-size:24px}
}
@media(max-width:560px){
  .wx-hero{padding:48px 0 64px}
  .wx-hero h1{font-size:clamp(38px,12vw,64px);letter-spacing:-1.5px}
  .wx-hero .l2{-webkit-text-stroke:1.5px #ff7a30}
  .wx-hero .lead{font-size:16px}
  .wx-stats{flex-wrap:wrap;gap:24px 32px}
  .wx-creds span{font-size:13px}
  .wx-eco{padding:64px 0}
  .wx-p h3{font-size:20px}
}
@media(prefers-reduced-motion:reduce){
  .js .js-rv{opacity:1;transform:none}
  *{animation:none!important}
}