/* =========================================================
   CodeChaps — Industries hub page
   Page-specific styles (orbit hero + industry cards).
   Shared styles live in codechaps-motion.css
   ========================================================= */
.hero-visual{min-height:540px;align-items:center}
.orbit{--k:1;position:relative;width:500px;height:500px}
.js .orbit{opacity:0;transform:scale(.9)}
.js.loaded .orbit{opacity:1;transform:none;transition:opacity 1s var(--ease) .3s,transform 1.3s var(--ease) .3s}
.orbit .float{z-index:4}

/* rings */
.ring-o{position:absolute;left:50%;top:50%;border-radius:50%;border:1px dashed rgba(148,163,184,.28)}
.ring-o.r1{width:220px;height:220px;margin:-110px}
.ring-o.r2{width:380px;height:380px;margin:-190px}
.ring-o.r3{width:500px;height:500px;margin:-250px;border-style:solid;border-color:rgba(148,163,184,.12)}
.spin{position:absolute;inset:0;animation:orbitSpin 60s linear infinite}
.spin.rev{animation-direction:reverse;animation-duration:80s}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
.node{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px;transform:rotate(var(--a)) translate(calc(var(--r) * var(--k))) rotate(calc(var(--a) * -1))}
.node>span{display:flex;width:100%;height:100%;border-radius:16px;align-items:center;justify-content:center;background:var(--bg);color:#fff;box-shadow:0 12px 28px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.25);animation:orbitSpin 60s linear infinite reverse}
.spin.rev .node>span{animation-direction:normal;animation-duration:80s}
.node .ico{width:22px;height:22px}
.node.sm{width:42px;height:42px;margin:-21px}
.node.sm>span{border-radius:13px}
.node.sm .ico{width:18px;height:18px}
.js .node>span{opacity:0;scale:.4}
.js.loaded .node>span{opacity:1;scale:1;transition:opacity .6s ease,scale .7s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(.8s + var(--i,0) * .08s)}

/* core */
.core{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#1E3A8A,#0B111C 70%);border:1px solid #2B3B5C;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;box-shadow:0 0 0 10px rgba(37,99,235,.08),0 30px 70px rgba(0,0,0,.55);z-index:2}
.core::before,.core::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(96,165,250,.45);animation:corePing 3s ease-out infinite}
.core::after{animation-delay:1.5s}
@keyframes corePing{from{transform:scale(.9);opacity:1}to{transform:scale(1.5);opacity:0}}
.core img{width:44px;height:auto;margin-bottom:4px}
.core b{font-family:var(--display);font-weight:900;font-size:30px;line-height:1}
.core small{font-size:10.5px;color:#93C5FD;letter-spacing:.12em;margin-top:2px}


.float--1{right:-50px;top:-6px}
.float--2{right:-50px;top:auto;bottom:-6px}
.float--3{left:-70px;top:auto;bottom:-6px}
@media (max-width:1240px) and (min-width:961px){.orbit{transform-origin:left center;scale:.88}.float--1{right:-10px}.float--2{right:-10px}.float--3{left:-30px}}
@media (max-width:960px){.hero-visual{min-height:0}.orbit{--k:.84;width:420px;height:420px;scale:1}.ring-o.r2{width:320px;height:320px;margin:-160px}.ring-o.r3{width:420px;height:420px;margin:-210px}}
@media (max-width:560px){.orbit{--k:.66;width:330px;height:330px}.ring-o.r1{width:160px;height:160px;margin:-80px}.ring-o.r2{width:250px;height:250px;margin:-125px}.ring-o.r3{width:330px;height:330px;margin:-165px}.core{width:112px;height:112px;margin:-56px}.core b{font-size:24px}.core img{width:34px}.node{width:40px;height:40px;margin:-20px}.node .ico{width:17px;height:17px}.node.sm{width:34px;height:34px;margin:-17px}.node.sm .ico{width:15px;height:15px}}
@media (prefers-reduced-motion:reduce){.spin,.node>span{animation:none}.js .node>span{opacity:1;scale:1}}

/* ---- industry cards ---- */
.ind-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));grid-auto-flow:row dense;gap:18px}
.ind-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:26px 24px 24px;border-radius:24px;background:#fff;border:1px solid var(--line);text-decoration:none;color:inherit;overflow:hidden;isolation:isolate;transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .4s}
.ind-card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(160deg,var(--c1),var(--c2));clip-path:circle(0% at 90% 10%);transition:clip-path .8s var(--ease)}
.ind-card:hover,.ind-card:focus-visible{transform:translateY(-8px);box-shadow:0 30px 60px rgba(15,23,42,.18);border-color:transparent}
.ind-card:hover::before,.ind-card:focus-visible::before{clip-path:circle(150% at 90% 10%)}
.ind-top{display:flex;justify-content:space-between;align-items:flex-start}
.ind-num{font-family:var(--display);font-weight:900;font-size:15px;color:#424751;transition:color .4s}
.ind-ico{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:var(--tint);color:var(--c1);transition:background-color .4s,color .4s,transform .6s var(--ease)}
.ind-ico .ico{width:24px;height:24px}
.ind-card h3{font-size:20px;color:var(--navy);transition:color .4s}
.ind-card p{font-size:14.5px;line-height:1.6;color:var(--text);transition:color .4s}
.ind-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:6px}
.ind-tags span{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:#F1F5F9;color:#475569;transition:background-color .4s,color .4s}
.ind-go{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--blue);margin-top:8px;transition:color .4s}
.ind-go .ico{width:16px;height:16px;transition:transform .45s var(--ease)}
.ind-card:hover .ind-num,.ind-card:hover h3,.ind-card:hover .ind-go,.ind-card:focus-visible h3,.ind-card:focus-visible .ind-go{color:#fff}
.ind-card:hover p,.ind-card:focus-visible p{color:rgba(255,255,255,.85)}
.ind-card:hover .ind-ico,.ind-card:focus-visible .ind-ico{background:rgba(255,255,255,.18);color:#fff;transform:rotate(-8deg) scale(1.06)}
.ind-card:hover .ind-tags span,.ind-card:focus-visible .ind-tags span{background:rgba(255,255,255,.16);color:#fff}
.ind-card:hover .ind-go .ico{transform:translateX(6px)}
.ind-card.feat{grid-column:span 2}
@media (max-width:640px){.ind-card.feat{grid-column:auto}}
@media (prefers-reduced-motion:reduce){.ind-card::before{transition:none}}

/* ---- also building for (pill cloud) ---- */
.more-pill{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:600;color:var(--navy);white-space:nowrap}
.more-pill .ico{width:18px;height:18px;color:var(--blue)}