/* ============================================================
   Shopia — How It Works (timeline + showcase + arts)
   ============================================================ */
:root{--hw-indigo:#4f46e5;--hw-blue:#2563eb;--hw-sky:#0ea5e9;--hw-emerald:#10b981;
  --hw-ink:#0f172a;--hw-body:#475569;--hw-muted:#94a3b8;--hw-line:#e6e8f0;--hw-paper:#fff;--hw-soft:#f6f8fc}
[data-theme="dark"]{--hw-ink:#e8edf6;--hw-body:#aeb8c9;--hw-line:#25304a;--hw-paper:#0f1728;--hw-soft:#0b1220}

.hw-steps-sec{background:var(--hw-paper)}
.hw-timeline{max-width:760px;margin:0 auto;position:relative}
.hw-timeline::before{content:"";position:absolute;left:27px;top:20px;bottom:20px;width:2px;
  background:linear-gradient(180deg,var(--hw-indigo),var(--hw-sky),var(--hw-emerald))}
.hw-step{display:flex;gap:22px;margin-bottom:26px;position:relative;
  opacity:0;transform:translateY(22px);transition:.6s cubic-bezier(.16,.8,.3,1) var(--d)}
.hw-step.in{opacity:1;transform:none}
.hw-step-num{flex:0 0 56px;width:56px;height:56px;border-radius:50%;background:var(--hw-paper);
  border:2px solid var(--hw-indigo);display:grid;place-items:center;z-index:1;box-shadow:0 8px 20px -8px rgba(79,70,229,.4)}
.hw-step-num span{font-family:Poppins,sans-serif;font-weight:800;font-size:22px;
  background:linear-gradient(135deg,var(--hw-indigo),var(--hw-sky));-webkit-background-clip:text;background-clip:text;color:transparent}
.hw-step-card{flex:1;background:var(--hw-soft);border:1px solid var(--hw-line);border-radius:16px;padding:22px 24px;transition:.2s}
.hw-step-card:hover{transform:translateX(4px);box-shadow:0 20px 40px -24px rgba(37,99,235,.35)}
.hw-step-ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:19px;margin-bottom:12px}
.hw-step-card h3{font-family:Poppins,sans-serif;font-size:19px;font-weight:700;color:var(--hw-ink);margin:0 0 7px}
.hw-step-card p{font-size:15px;line-height:1.6;color:var(--hw-body);margin:0}

/* showcase */
.hw-show{background:var(--hw-soft)}
.hw-show-in{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.hw-show-media{position:relative}
.hw-show-media img{width:100%;border-radius:22px;box-shadow:0 30px 70px -30px rgba(15,23,42,.45);position:relative;z-index:1;aspect-ratio:4/3;object-fit:cover}
.hw-blob{position:absolute;width:130%;top:-15%;left:-15%;z-index:0;opacity:.14;animation:hwSpin 26s linear infinite}
@keyframes hwSpin{to{transform:rotate(360deg)}}
.hw-float{position:absolute;z-index:2;background:#fff;color:var(--hw-ink);border-radius:12px;padding:11px 15px;
  font-size:14px;font-weight:600;display:flex;align-items:center;gap:9px;box-shadow:0 16px 34px -14px rgba(0,0,0,.3);animation:hwBob 4s ease-in-out infinite}
.hw-float i{color:var(--hw-emerald)}
.hw-float-a{top:14%;left:-24px}
.hw-float-b{bottom:16%;right:-18px;animation-delay:-2s}
.hw-float-b i{color:var(--hw-blue)}
@keyframes hwBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.hw-show-txt h2{font-family:Poppins,sans-serif;font-size:clamp(24px,3vw,32px);font-weight:800;color:var(--hw-ink);margin:6px 0 18px;line-height:1.2}
.hw-checks{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.hw-checks li{display:flex;align-items:center;gap:12px;font-size:16px;color:var(--hw-ink);font-weight:500}
.hw-checks i{color:var(--hw-emerald);font-size:18px}

/* CTA */
.hw-cta{position:relative;overflow:hidden;padding:80px 0;text-align:center;background:linear-gradient(135deg,#4f46e5,#2563eb 55%,#0ea5e9);color:#fff;margin-top:10px}
.hw-cta-orbs span{position:absolute;border-radius:50%;filter:blur(70px);opacity:.4}
.hw-cta-orbs span:nth-child(1){width:300px;height:300px;background:#c084fc;top:-70px;left:-30px}
.hw-cta-orbs span:nth-child(2){width:260px;height:260px;background:#22d3ee;bottom:-60px;right:-20px}
.hw-cta-in{position:relative;max-width:600px;margin:0 auto}
.hw-cta-in h2{font-family:Poppins,sans-serif;font-size:clamp(26px,3.6vw,38px);font-weight:800;margin:0 0 12px}
.hw-cta-in p{font-size:17px;color:rgba(255,255,255,.92);margin:0 0 26px;line-height:1.6}
.btn-white{background:#fff;color:var(--hw-blue)}
.btn-white:hover{transform:translateY(-3px)}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s,transform .6s}
.reveal.in{opacity:1;transform:none}

@media(max-width:820px){
  .hw-show-in{grid-template-columns:1fr;gap:34px}
  .hw-timeline::before{left:22px}
  .hw-step-num{flex-basis:46px;width:46px;height:46px}
  .hw-step-num span{font-size:18px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important}.reveal{opacity:1!important;transform:none!important}}