/* ============================================================
   TradeNest — B2B Marketplace  |  Design System
   ============================================================ */
:root{
  --indigo-50:#eef2ff; --indigo-100:#e0e7ff; --indigo-500:#6366f1;
  --indigo-600:#4f46e5; --indigo-700:#4338ca;
  --emerald-400:#34d399; --emerald-500:#10b981; --emerald-600:#059669;
  --amber-400:#fbbf24; --amber-500:#f59e0b;
  --ink:#0f172a; --slate-700:#334155; --slate-500:#64748b; --slate-400:#94a3b8;
  --slate-200:#e2e8f0; --slate-100:#f1f5f9; --slate-50:#f8fafc;
  --bg:#ffffff; --surface:#ffffff; --line:#e6e8f0;
  --radius:16px; --radius-sm:11px; --radius-lg:24px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.04);
  --shadow-md:0 4px 18px -4px rgba(15,23,42,.12);
  --shadow-lg:0 24px 60px -20px rgba(79,70,229,.28);
  --container:1880px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:var(--font); background:var(--bg); color:var(--ink);
  line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; position:relative; width:100%;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul{list-style:none}
h1,h2,h3,h4{line-height:1.15;letter-spacing:-.02em;font-weight:800}
section{position:relative}

.container{max-width:var(--container);margin:0 auto;padding:0 clamp(16px,3vw,56px)}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:.74rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--indigo-600);
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--indigo-500);border-radius:2px}
.section-head{max-width:640px;margin-bottom:34px}
.section-head h2{font-size:clamp(1.7rem,3.6vw,2.5rem);margin:.5rem 0 .6rem}
.section-head p{color:var(--slate-500);font-size:1.02rem}
.muted{color:var(--slate-500)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:999px;font-weight:700;font-size:.95rem;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s;
  white-space:nowrap;
}
.btn svg{width:18px;height:18px}
.btn-primary{background:linear-gradient(120deg,var(--indigo-600),var(--indigo-500));color:#fff;box-shadow:var(--shadow-md)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.btn-ghost{background:var(--surface);border:1.5px solid var(--line);color:var(--ink)}
.btn-ghost:hover{transform:translateY(-3px);border-color:var(--indigo-500);color:var(--indigo-600)}
.btn-light{background:rgba(255,255,255,.16);color:#fff;border:1.5px solid rgba(255,255,255,.3);backdrop-filter:blur(6px)}
.btn-light:hover{background:rgba(255,255,255,.26);transform:translateY(-3px)}
.btn-sm{padding:9px 16px;font-size:.85rem}
.btn-block{width:100%}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:80;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s,background .3s;
}
.site-header.scrolled{box-shadow:var(--shadow-md)}
.header-top{display:flex;align-items:center;gap:22px;height:72px}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.28rem;letter-spacing:-.03em}
.logo-mark{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--indigo-600),var(--emerald-500));color:#fff;
  box-shadow:var(--shadow-md);
}
.logo-mark svg{width:20px;height:20px}
.logo span b{color:var(--indigo-600)}

.search-wrap{flex:1;position:relative;max-width:560px}
.search-wrap input{
  width:100%;padding:12px 18px 12px 44px;border-radius:999px;
  border:1.5px solid var(--line);background:var(--slate-50);color:var(--ink);
  font-size:.92rem;transition:border-color .25s,box-shadow .25s;
}
.search-wrap input:focus{outline:none;border-color:var(--indigo-500);box-shadow:0 0 0 4px var(--indigo-100)}
.search-wrap svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--slate-400)}

.header-nav{display:flex;align-items:center;gap:6px;margin-left:auto}
.header-nav a{padding:9px 13px;border-radius:10px;font-weight:600;font-size:.92rem;color:var(--slate-700);transition:background .2s,color .2s}
.header-nav a:hover,.header-nav a.active{background:var(--indigo-50);color:var(--indigo-600)}
.cart-link{position:relative}
.cart-count{
  position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;padding:0 4px;
  background:var(--emerald-500);color:#fff;font-size:.68rem;font-weight:800;
  border-radius:999px;display:grid;place-items:center;
}
.nav-toggle{display:none;width:42px;height:42px;border-radius:11px;border:1.5px solid var(--line)}
.nav-toggle svg{width:20px;height:20px;margin:auto}

.header-cats{border-top:1px solid var(--line);background:var(--surface)}
.header-cats ul{display:flex;gap:4px;overflow-x:auto;padding:9px 0;scrollbar-width:none}
.header-cats ul::-webkit-scrollbar{display:none}
.header-cats a{white-space:nowrap;padding:7px 13px;border-radius:999px;font-size:.85rem;font-weight:600;color:var(--slate-500);transition:.2s}
.header-cats a:hover{background:var(--indigo-50);color:var(--indigo-600)}

@media (max-width:960px){
  .search-wrap{order:3;flex-basis:100%;max-width:none;margin:0 0 12px}
  .header-top{flex-wrap:wrap;height:auto;padding:12px 0}
  .header-nav{position:fixed;inset:0 0 0 auto;width:min(80vw,320px);background:var(--bg);
    flex-direction:column;align-items:stretch;padding:88px 20px 20px;gap:4px;
    transform:translateX(100%);transition:transform .35s var(--ease);box-shadow:var(--shadow-lg);z-index:90}
  .header-nav.open{transform:translateX(0)}
  .header-nav a{padding:13px}
  .nav-toggle{display:grid;margin-left:auto}
}

/* ---------- Hero ---------- */
.hero{padding:74px 0 90px;overflow:hidden}
.hero-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(2.3rem,5.2vw,3.9rem);font-weight:900;letter-spacing:-.035em}
.hero h1 .grad{background:linear-gradient(120deg,var(--indigo-600),var(--emerald-500));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{font-size:1.14rem;color:var(--slate-500);margin:20px 0 30px;max-width:520px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-search{
  margin-top:26px;display:flex;gap:8px;background:var(--surface);padding:8px;
  border-radius:999px;box-shadow:var(--shadow-md);border:1px solid var(--line);max-width:520px;
}
.hero-search input{flex:1;border:none;background:none;padding:0 16px;font-size:.95rem;color:var(--ink)}
.hero-search input:focus{outline:none}
.hero-trust{display:flex;gap:26px;margin-top:34px;flex-wrap:wrap}
.hero-trust div{font-size:.86rem;color:var(--slate-500)}
.hero-trust b{display:block;font-size:1.5rem;color:var(--ink);font-weight:900;letter-spacing:-.02em}

.hero-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:320px}
.hero-stack{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:30px 0}
.hero-blob{position:absolute;top:50%;left:50%;width:420px;height:420px;transform:translate(-50%,-50%);z-index:0;background:
  radial-gradient(60% 60% at 20% 20%,var(--indigo-100),transparent 70%),
  radial-gradient(50% 50% at 85% 75%,rgba(16,185,129,.22),transparent 70%);
  filter:blur(6px);border-radius:40% 60% 62% 38%/48% 42% 58% 52%;animation:morph 14s var(--ease) infinite}
@keyframes morph{50%{border-radius:58% 42% 38% 62%/62% 55% 45% 38%}}
.float-card{
  position:relative;z-index:1;width:max-content;max-width:100%;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-lg);padding:14px 18px;display:flex;gap:12px;align-items:center;
  animation:floaty 6s ease-in-out infinite;
}
.float-card .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:1.15rem;flex-shrink:0}
.float-card .fc-txt{display:flex;align-items:baseline;gap:6px;white-space:nowrap;line-height:1}
.float-card b{font-size:.92rem;font-weight:800}
.float-card small{color:var(--slate-500);font-size:.79rem}
.fc-1{animation-delay:-1s}
.fc-2{align-self:flex-start;margin-left:46px;animation-delay:-3s}
.fc-3{margin-left:14px;animation-delay:-5s}
@keyframes floaty{50%{transform:translateY(-10px)}}
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:24px}
  .hero-visual{min-height:0;order:-1}
  .hero-stack{align-items:center;padding:10px 0}
  .fc-2,.fc-3{margin-left:0}
  .float-card{max-width:92vw}
}
@media (max-width:420px){
  .float-card .fc-txt{white-space:normal}
}

/* ---------- Category grid ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.cat-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 18px;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;
  position:relative;overflow:hidden;
}
.cat-card::after{content:"";position:absolute;inset:auto -40% -60% auto;width:150px;height:150px;
  background:radial-gradient(circle,var(--indigo-100),transparent 70%);opacity:0;transition:opacity .3s}
.cat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.cat-card:hover::after{opacity:1}
.cat-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:1.55rem;
  background:var(--indigo-50);margin-bottom:14px;transition:transform .3s var(--ease)}
.cat-card:hover .cat-ic{transform:scale(1.1) rotate(-6deg)}
.cat-card h3{font-size:1rem;margin-bottom:5px}
.cat-card p{font-size:.8rem;color:var(--slate-500)}
.cat-card .tags{margin-top:10px;display:flex;flex-wrap:wrap;gap:5px}
.cat-card .tags span{font-size:.72rem;color:var(--slate-500);background:var(--slate-100);padding:3px 8px;border-radius:999px}

/* ---------- Product cards ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.prod-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s;display:flex;flex-direction:column;
}
.prod-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.prod-media{aspect-ratio:4/3;position:relative;display:grid;place-items:center;font-size:3.4rem;overflow:hidden}
.prod-media .badge{position:absolute;top:10px;left:10px;background:var(--ink);color:#fff;font-size:.68rem;font-weight:700;padding:4px 9px;border-radius:999px;letter-spacing:.04em}
.prod-media .fav{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:999px;background:rgba(255,255,255,.9);display:grid;place-items:center;color:var(--slate-500);transition:.2s}
.prod-media .fav:hover{color:#ef4444;transform:scale(1.12)}
.prod-body{padding:15px 16px 17px;display:flex;flex-direction:column;gap:7px;flex:1}
.prod-body h3{font-size:.98rem;font-weight:700}
.prod-price{font-size:1.05rem;font-weight:900;color:var(--indigo-600)}
.prod-price small{font-weight:600;color:var(--slate-500);font-size:.76rem}
.prod-meta{font-size:.8rem;color:var(--slate-500);display:flex;align-items:center;gap:6px}
.prod-rating{display:inline-flex;align-items:center;gap:4px;font-size:.8rem;font-weight:700;color:var(--amber-500)}
.prod-supplier{font-size:.8rem;color:var(--slate-500);border-top:1px dashed var(--line);padding-top:9px;margin-top:auto}
.prod-supplier b{color:var(--ink)}
.prod-actions{display:flex;gap:8px;margin-top:10px}

.verified{display:inline-flex;align-items:center;gap:4px;color:var(--emerald-600);font-weight:700;font-size:.76rem}
.verified svg{width:13px;height:13px}

/* ---------- Strip / counters ---------- */
.stat-strip{background:linear-gradient(120deg,var(--indigo-700),var(--indigo-600) 55%,var(--emerald-600));color:#fff;padding:52px 0;border-radius:var(--radius-lg);overflow:hidden;position:relative}
.stat-strip::before{content:"";position:absolute;inset:0;background:radial-gradient(40% 120% at 100% 0,rgba(255,255,255,.16),transparent)}
.stat-strip .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;text-align:center}
.stat-strip .num{font-size:clamp(1.8rem,4vw,2.7rem);font-weight:900;letter-spacing:-.02em}
.stat-strip .lbl{font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;opacity:.8;margin-top:4px}
@media (max-width:700px){.stat-strip .grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;position:relative;transition:transform .3s var(--ease)}
.step:hover{transform:translateY(-6px)}
.step::before{counter-increment:s;content:counter(s);font-size:2.4rem;font-weight:900;color:var(--indigo-100);position:absolute;top:14px;right:20px}
.step .dot{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--indigo-600),var(--emerald-500));color:#fff;display:grid;place-items:center;font-size:1.2rem;margin-bottom:14px}
.step h3{font-size:1.08rem;margin-bottom:6px}
.step p{font-size:.9rem;color:var(--slate-500)}
@media (max-width:800px){.steps{grid-template-columns:1fr}}

/* ---------- Suppliers ---------- */
.sup-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.sup-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;transition:transform .3s var(--ease),box-shadow .3s}
.sup-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.sup-top{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.sup-logo{width:52px;height:52px;border-radius:13px;display:grid;place-items:center;font-weight:900;color:#fff;font-size:1.1rem;flex-shrink:0}
.sup-card h3{font-size:1.02rem}
.sup-card .loc{font-size:.82rem;color:var(--slate-500)}
.sup-tags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.sup-tags span{font-size:.74rem;background:var(--slate-100);color:var(--slate-600);padding:4px 10px;border-radius:999px}
.sup-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:13px;margin-top:4px;font-size:.82rem;color:var(--slate-500)}

/* ---------- Filters (products page) ---------- */
.shop-layout{display:grid;grid-template-columns:260px 1fr;gap:30px;align-items:start}
.filters{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;position:sticky;top:96px}
.filters h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;color:var(--slate-500);margin:16px 0 10px}
.filters h4:first-child{margin-top:0}
.filter-opt{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:.9rem;color:var(--slate-700);cursor:pointer}
.filter-opt input{accent-color:var(--indigo-600);width:15px;height:15px}
.shop-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:14px;flex-wrap:wrap}
.shop-toolbar select{padding:9px 14px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font-weight:600;font-size:.88rem}
@media (max-width:860px){.shop-layout{grid-template-columns:1fr}.filters{position:static}}

/* ---------- Product detail ---------- */
.pd-wrap{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.pd-media{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);aspect-ratio:1;display:grid;place-items:center;font-size:8rem;position:sticky;top:100px}
.pd-info h1{font-size:clamp(1.6rem,3.4vw,2.3rem);margin-bottom:12px}
.pd-price{font-size:2rem;font-weight:900;color:var(--indigo-600);margin:14px 0}
.pd-price small{font-size:1rem;color:var(--slate-500);font-weight:600}
.pd-specs{width:100%;border-collapse:collapse;margin:20px 0}
.pd-specs td{padding:11px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.pd-specs td:first-child{color:var(--slate-500);width:42%}
.pd-specs td:last-child{font-weight:600}
.pd-supplier{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-top:24px;display:flex;gap:16px;align-items:center}
@media (max-width:820px){.pd-wrap{grid-template-columns:1fr;gap:24px}.pd-media{position:static;font-size:5rem}}

/* ---------- Modal ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(4px);z-index:120;display:grid;place-items:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .3s}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal{background:var(--bg);border-radius:var(--radius-lg);max-width:460px;width:100%;padding:30px;box-shadow:var(--shadow-lg);transform:translateY(24px) scale(.96);transition:transform .35s var(--ease)}
.modal-overlay.open .modal{transform:none}
.modal h3{font-size:1.35rem;margin-bottom:6px}
.modal p{color:var(--slate-500);font-size:.9rem;margin-bottom:18px}
.field{margin-bottom:14px}
.field label{display:block;font-size:.8rem;font-weight:700;margin-bottom:6px;color:var(--slate-700)}
.field input,.field textarea{width:100%;padding:11px 14px;border-radius:11px;border:1.5px solid var(--line);background:var(--slate-50);color:var(--ink);font-family:inherit;font-size:.92rem}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--indigo-500);box-shadow:0 0 0 4px var(--indigo-100)}
.modal-close{position:absolute;top:16px;right:16px}

/* ---------- Footer ---------- */
.site-footer{background:#0f172a;color:#cbd5e1;padding:60px 0 30px;margin-top:90px}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:36px;margin-bottom:40px}
.site-footer h4{color:#fff;font-size:.92rem;margin-bottom:14px;letter-spacing:0}
.site-footer a{display:block;padding:5px 0;font-size:.88rem;color:#94a3b8;transition:color .2s}
.site-footer a:hover{color:#fff}
.site-footer .logo{color:#fff;margin-bottom:12px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.82rem;color:#64748b}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr 1fr}}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{padding:54px 0 40px;background:
  radial-gradient(60% 100% at 0 0,var(--indigo-50),transparent 60%);}
.page-hero h1{font-size:clamp(2rem,4.4vw,3rem)}
.page-hero p{color:var(--slate-500);margin-top:10px;max-width:560px;font-size:1.05rem}
.crumbs{display:flex;gap:8px;font-size:.82rem;color:var(--slate-500);margin-bottom:14px}
.crumbs a:hover{color:var(--indigo-600)}

/* ---------- Reveal animation ---------- */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
body.page-leaving{pointer-events:none}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-delay="1"]{transition-delay:.08s}
[data-reveal][data-delay="2"]{transition-delay:.16s}
[data-reveal][data-delay="3"]{transition-delay:.24s}
[data-reveal][data-delay="4"]{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-reveal]{opacity:1;transform:none}
}

/* page transitions — opacity-only, no layout shift */
main{transition:opacity .18s linear;will-change:opacity}
.page-fade{animation:pageIn .34s var(--ease)}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
body.page-leaving main{opacity:0}
@media (prefers-reduced-motion:reduce){
  main{transition:none}
  body.page-leaving main{opacity:1}
  .page-fade{animation:none}
}

.section-pad{padding:70px 0}
.marquee{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee ul{display:flex;gap:14px;width:max-content;animation:scrollx 32s linear infinite}
.marquee:hover ul{animation-play-state:paused}
@keyframes scrollx{to{transform:translateX(-50%)}}
.chip{padding:9px 16px;border:1.5px solid var(--line);border-radius:999px;font-size:.86rem;font-weight:600;color:var(--slate-700);background:var(--surface)}

.toast{position:fixed;bottom:24px;left:50%;transform:transltranslateX(-50%) translateY(120px);
  background:var(--ink);color:#fff;padding:13px 22px;border-radius:999px;font-size:.88rem;font-weight:600;
  z-index:200;transition:transform .4s var(--ease);box-shadow:var(--shadow-lg);transform:translate(-50%,120px)}
.toast.show{transform:translate(-50%,0)}

.empty{text-align:center;padding:70px 20px;color:var(--slate-500)}
.empty .ic{font-size:3rem;margin-bottom:12px}

/* ---------- Card shine / hover sweep ---------- */
.prod-card,.cat-card,.sup-card,.step,.float-card{position:relative;overflow:hidden}
.prod-card::after,.sup-card::after,.step::after,.float-card::after,.cat-card::before{
  content:"";position:absolute;top:-20%;bottom:-20%;left:-80%;width:55%;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.65) 50%,transparent 100%);
  transform:skewX(-18deg);pointer-events:none;z-index:4;
  transition:left .75s var(--ease);
}
.prod-card:hover::after,.sup-card:hover::after,.step:hover::after,.cat-card:hover::before{left:135%}
.float-card:hover::after{left:135%}

/* glossy ring + glow on hover */
.prod-card:hover,.sup-card:hover,.cat-card:hover,.step:hover{
  box-shadow:var(--shadow-lg),0 0 0 1.5px color-mix(in srgb,var(--indigo-500) 45%,transparent) inset;
}

/* pointer-follow spotlight (set --mx/--my via JS) */
.prod-card,.cat-card,.sup-card{--mx:50%;--my:50%}
.prod-card::before,.sup-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;
  transition:opacity .3s;
  background:radial-gradient(160px circle at var(--mx) var(--my),rgba(99,102,241,.16),transparent 70%);
}
.prod-card:hover::before,.sup-card:hover::before{opacity:1}
@media (prefers-reduced-motion:reduce){
  .prod-card::after,.sup-card::after,.step::after,.cat-card::before,.float-card::after{display:none}
}