/* =====================================================================
   MYRIAD UI — homepage redesign layer (loads after style.css)
   Animated network hero, glass chips, marquee, bento categories,
   counters, scroll reveals. Respects prefers-reduced-motion.
===================================================================== */
:root{
  --glow:rgba(214,42,49,.45);
  --cyan:#ff6b6b;
  --ease:cubic-bezier(.2,.8,.2,1);
}

/* ---------- Brand / logo ---------- */
.brand{gap:11px;}
.brand-logo{width:30px;height:30px;flex-shrink:0;transition:transform .5s var(--ease),filter .3s;filter:drop-shadow(0 2px 12px rgba(214,42,49,.55));}
.brand:hover .brand-logo{transform:rotate(-8deg) scale(1.08);}
.brand-stack{display:flex;flex-direction:column;line-height:1;}
.brand-stack .brand-text{font-family:'Montserrat','Inter',sans-serif;font-weight:800;font-size:18px;letter-spacing:.2em;}
.brand-stack small{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.18em;color:var(--gray);margin-top:5px;text-transform:uppercase;}
.site-nav{transition:background .3s,box-shadow .3s,height .3s;}
.site-nav.scrolled{background:rgba(7,11,18,.94);box-shadow:0 10px 30px -14px rgba(0,0,0,.7);}
.nav-links a:not(.btn){position:relative;}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);}
.nav-links a:not(.btn):hover::after{transform:scaleX(1);}
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:300;background:linear-gradient(90deg,var(--blue),var(--cyan));box-shadow:0 0 12px var(--glow);}

/* ---------- Hero ---------- */
.mx-hero{position:relative;min-height:calc(100vh - 72px);min-height:calc(100svh - 72px);display:flex;align-items:center;padding:60px 0 90px;overflow:hidden;isolation:isolate;}
.mx-hero-bg{position:absolute;inset:0;z-index:-3;}
.mx-hero-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);animation:kenburns 26s ease-in-out infinite alternate;}
.mx-hero-scrim{position:absolute;inset:0;z-index:-2;background:
  radial-gradient(ellipse 700px 460px at 78% 30%,rgba(214,42,49,.28),transparent 65%),
  linear-gradient(90deg,rgba(7,11,18,.97) 8%,rgba(7,11,18,.78) 48%,rgba(7,11,18,.45) 100%),
  linear-gradient(0deg,var(--navy-deep) 2%,transparent 40%);}
#mxNet{position:absolute;inset:0;width:100%;height:100%;z-index:-1;}
.mx-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;}
.mx-badge{display:inline-flex;align-items:center;gap:10px;padding:7px 14px;border:1px solid rgba(255,110,110,.3);background:rgba(214,42,49,.1);border-radius:99px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);}
.mx-badge i{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 0 rgba(255,110,110,.7);animation:ping 2s infinite;}
.mx-hero h1{font-size:clamp(38px,4.3vw,62px);margin:22px 0 22px;line-height:1.05;}
.mx-hero h1 .line{display:block;overflow:hidden;}
.mx-hero h1 .line span{display:inline-block;transform:translateY(105%);animation:rise .9s var(--ease) forwards;}
.mx-hero h1 .line:nth-child(2) span{animation-delay:.14s;}
.grad-text{background:linear-gradient(100deg,#ff5a5f,#ff6b6b 45%,#ff5a5f);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 6s linear infinite;}
.mx-sub{font-size:17.5px;color:var(--gray-light);max-width:540px;margin-bottom:30px;opacity:0;animation:fadeUp .8s .35s var(--ease) forwards;}
.mx-hero .search-form-lg{opacity:0;animation:fadeUp .8s .5s var(--ease) forwards;position:relative;}
.mx-hero .search-form-lg input{background:rgba(17,26,38,.8);backdrop-filter:blur(10px);padding:16px 20px;}
.mx-hero .search-form-lg input:focus{box-shadow:0 0 0 4px rgba(214,42,49,.18);}
.mx-hero .hero-ctas{opacity:0;animation:fadeUp .8s .62s var(--ease) forwards;margin-bottom:38px;}
.mx-hero .hero-meta{opacity:0;animation:fadeUp .8s .75s var(--ease) forwards;gap:38px;}
.mx-hero .hero-meta b{font-family:'Montserrat','Inter',sans-serif;font-size:30px;background:linear-gradient(180deg,#fff,#ffb3b3);-webkit-background-clip:text;background-clip:text;color:transparent;}
.mx-tags{display:flex;flex-wrap:wrap;gap:8px;margin:-6px 0 26px;opacity:0;animation:fadeUp .8s .56s var(--ease) forwards;}
.mx-tags a{font-size:12px;padding:5px 12px;border:1px solid var(--line);border-radius:99px;color:var(--gray-light);transition:.2s;}
.mx-tags a:hover{border-color:var(--blue);color:#fff;background:rgba(214,42,49,.15);}

/* orbit stage (right) */
.mx-stage{position:relative;aspect-ratio:1;max-width:460px;width:100%;margin-left:auto;}
.orbit{position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(255,110,110,.22);}
.orbit.o2{inset:13%;animation:spin 40s linear infinite reverse;border-color:rgba(255,110,110,.16);}
.orbit.o1{animation:spin 60s linear infinite;}
.orbit i{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px var(--cyan);top:-5px;left:50%;}
.orbit.o2 i{background:var(--blue);box-shadow:0 0 14px var(--blue);top:auto;bottom:-5px;}
.core{position:absolute;inset:30%;display:grid;place-items:center;border-radius:28%;background:radial-gradient(circle at 30% 20%,#2a2f37,#12151a);box-shadow:0 0 0 1px rgba(255,255,255,.15) inset,0 30px 80px -10px var(--glow),0 0 120px rgba(214,42,49,.35);animation:float 6s ease-in-out infinite;}
.core img{width:50%;filter:drop-shadow(0 8px 18px rgba(0,0,0,.4));}
.chip{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:rgba(17,26,38,.72);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(14px);box-shadow:0 16px 40px -14px rgba(0,0,0,.7);font-size:12px;white-space:nowrap;animation:float 7s ease-in-out infinite;}
.chip b{display:block;font-size:12.5px;font-weight:600;}
.chip small{color:var(--gray);font-size:11px;}
.chip .ico{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:rgba(214,42,49,.2);color:var(--cyan);}
.chip .ico svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.chip.c1{top:6%;left:-6%;animation-delay:-1s;}
.chip.c2{top:38%;right:-10%;animation-delay:-3s;}
.chip.c3{bottom:8%;left:2%;animation-delay:-5s;}
.chip.c2 .ico{background:rgba(60,190,120,.18);color:#7fe0ab;}
.chip.c3 .ico{background:rgba(255,180,60,.16);color:#ffcf7f;}
.scroll-cue{position:absolute;left:50%;bottom:24px;width:22px;height:36px;border:1.5px solid rgba(255,255,255,.3);border-radius:14px;transform:translateX(-50%);}
.scroll-cue::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;background:#fff;border-radius:2px;animation:wheel 1.8s infinite;}

/* ---------- Marquee ---------- */
.mx-marquee{border-block:1px solid var(--line);background:var(--navy);padding:0 !important;overflow:hidden;position:relative;}
.mx-marquee::before,.mx-marquee::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none;}
.mx-marquee::before{left:0;background:linear-gradient(90deg,var(--navy),transparent);}
.mx-marquee::after{right:0;background:linear-gradient(270deg,var(--navy),transparent);}
.mx-track{display:flex;gap:56px;width:max-content;padding:20px 0;animation:marquee 45s linear infinite;}
.mx-marquee:hover .mx-track{animation-play-state:paused;}
.mx-track span{display:flex;align-items:center;gap:14px;font-family:'Montserrat','Inter',sans-serif;font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-light);}
.mx-track span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 10px var(--blue);}

/* ---------- Section heads ---------- */
.section-head .eyebrow{display:inline-flex;align-items:center;gap:10px;}
.section-head .eyebrow::before{content:"";width:28px;height:2px;background:var(--blue);}
.section-head h2{font-family:'Montserrat','Fraunces',sans-serif;font-weight:800;letter-spacing:-.02em;}

/* ---------- Category bento ---------- */
.mx-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:16px;}
.mx-bento .my-cat-card{aspect-ratio:auto;height:100%;border-radius:14px;}
.mx-bento .my-cat-card:nth-child(1){grid-column:span 2;grid-row:span 2;}
.mx-bento .my-cat-card:nth-child(6){grid-column:span 2;}
.mx-bento .my-cat-card:nth-child(11){grid-column:span 2;}
.mx-bento .my-cat-card img{transition:transform .8s var(--ease),filter .4s;filter:saturate(.9);}
.mx-bento .my-cat-card:hover img{transform:scale(1.1);filter:saturate(1.15);}
.mx-bento .my-cat-card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:box-shadow .3s;pointer-events:none;}
.mx-bento .my-cat-card:hover::after{box-shadow:inset 0 0 0 2px var(--blue),0 0 40px -6px var(--glow);}
.mx-bento .my-cat-card-label{padding:20px;transform:translateY(8px);transition:transform .4s var(--ease);}
.mx-bento .my-cat-card:hover .my-cat-card-label{transform:none;}
.mx-bento .my-cat-card-label h4{font-family:'Montserrat','Inter',sans-serif;font-weight:700;font-size:16px;}
.mx-bento .my-cat-card:nth-child(1) h4{font-size:26px;}
.cat-arrow{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(7,11,18,.55);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);opacity:0;transform:translate(-6px,6px) rotate(-20deg);transition:.35s var(--ease);}
.cat-arrow svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.my-cat-card:hover .cat-arrow{opacity:1;transform:none;}
.cat-num{position:absolute;top:16px;left:18px;font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(255,255,255,.65);letter-spacing:.1em;}

/* product card polish */
.product-grid{grid-template-columns:repeat(4,1fr);}
.card .thumb img{transition:transform .6s var(--ease);}
.card:hover .thumb img{transform:scale(1.07);}

/* ---------- Steps ---------- */
.mx-steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.mx-steps::before{content:"";position:absolute;top:46px;left:12%;right:12%;height:2px;background:linear-gradient(90deg,var(--blue) 0 var(--p,0%),var(--line) var(--p,0%) 100%);transition:none;}
.mx-step{position:relative;padding:28px 24px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.01));transition:transform .4s var(--ease),border-color .3s;}
.mx-step:hover{transform:translateY(-6px);border-color:rgba(214,42,49,.5);}
.mx-step .n{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--navy-deep);border:2px solid var(--blue);font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--cyan);margin-bottom:18px;position:relative;z-index:1;box-shadow:0 0 0 6px var(--navy-panel);}
.mx-step h4{font-family:'Montserrat','Inter',sans-serif;font-size:16px;margin-bottom:8px;}
.mx-step p{font-size:13.5px;color:var(--gray-light);}

/* ---------- Trust band ---------- */
.mx-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.mx-trust div{padding:26px;border-radius:14px;border:1px solid var(--line);background:var(--navy-panel);}
.mx-trust svg{width:28px;height:28px;stroke:var(--cyan);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px;}
.mx-trust h4{font-family:'Montserrat','Inter',sans-serif;font-size:15px;margin-bottom:6px;}
.mx-trust p{font-size:13px;color:var(--gray-light);}

/* ---------- CTA ---------- */
.mx-cta{position:relative;overflow:hidden;padding:36px;border-radius:18px;border:1px solid var(--line);background:var(--navy-panel);isolation:isolate;}
.mx-cta::before{content:"";position:absolute;width:320px;height:320px;right:-100px;top:-120px;border-radius:50%;background:radial-gradient(circle,var(--glow),transparent 70%);z-index:-1;transition:transform .8s var(--ease);}
.mx-cta:hover::before{transform:scale(1.4) translate(-20px,20px);}
.mx-cta h3{font-family:'Montserrat','Inter',sans-serif;font-weight:800;font-size:24px;margin-bottom:10px;}
.mx-cta p{color:var(--gray-light);font-size:14.5px;margin-bottom:22px;max-width:380px;}
.btn-primary{background:linear-gradient(135deg,#e0353b,#9c1218);}
.btn-primary.pulse{animation:btnpulse 2.6s infinite;}

/* ---------- Reveal on scroll ---------- */
.rv{opacity:0;translate:0 34px;transition:opacity .8s var(--ease),translate .8s var(--ease);transition-delay:var(--d,0s);}
.rv.in{opacity:1;translate:0 0;}

/* ---------- Keyframes ---------- */
@keyframes rise{to{transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes sheen{to{background-position:200% center}}
@keyframes kenburns{from{transform:scale(1.08)}to{transform:scale(1.2) translate(-1.5%,1%)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ping{70%{box-shadow:0 0 0 9px rgba(255,110,110,0)}100%{box-shadow:0 0 0 0 rgba(255,110,110,0)}}
@keyframes wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes btnpulse{0%{box-shadow:0 0 0 0 rgba(214,42,49,.5)}70%{box-shadow:0 0 0 14px rgba(214,42,49,0)}100%{box-shadow:0 0 0 0 rgba(214,42,49,0)}}

/* ---------- Registration forms (seller + buyer) ---------- */
.sr-steps{display:flex;gap:8px;margin-bottom:22px;font-size:12px;font-family:'JetBrains Mono',monospace;letter-spacing:.04em;}
.sr-steps span{flex:1;padding:9px 12px;border:1px solid var(--line);border-radius:8px;color:var(--gray);text-align:center;}
.sr-steps .on{border-color:var(--blue);color:#fff;background:rgba(214,42,49,.12);} .sr-steps .done{color:#7fe0ab;border-color:rgba(60,190,120,.35);}
.route-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.rp{cursor:pointer;display:block;} .rp input{position:absolute;opacity:0;pointer-events:none;}
.rp span{display:block;height:100%;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--navy-panel);transition:.2s;}
.rp b{display:block;font-size:13.5px;margin-bottom:4px;} .rp small{color:var(--gray);font-size:11.5px;line-height:1.4;display:block;}
.rp input:checked + span{border-color:var(--blue);box-shadow:0 0 0 3px rgba(214,42,49,.18);background:rgba(214,42,49,.08);}
.rp:hover span{border-color:var(--gray-light);}
.route-box{border:1px solid var(--line);border-radius:12px;padding:18px 18px 4px;margin:0;display:none;gap:16px;flex-direction:column;min-width:0;}
.route-box.active{display:flex;} .route-box legend{padding:0 8px;font-size:12px;color:var(--gray-light);font-family:'JetBrains Mono',monospace;letter-spacing:.05em;text-transform:uppercase;}
.route-or{font-size:12.5px;color:var(--gray-light);margin:2px 0 0;padding-top:10px;border-top:1px dashed var(--line);}
.field small.req{color:#ff8a8a;font-weight:500;margin-left:4px;} .field small.opt{color:var(--gray);margin-left:4px;}
.doc-note{font-size:12.5px;color:var(--gray);line-height:1.6;}
.field input[type=file]{padding:10px;}
@media(max-width:640px){.route-pick{grid-template-columns:1fr;}}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  .mx-hero-grid{grid-template-columns:1fr;}
  .mx-stage{display:none;}
  .mx-bento{grid-template-columns:repeat(3,1fr);}
  .mx-bento .my-cat-card:nth-child(6),.mx-bento .my-cat-card:nth-child(11){grid-column:auto;}
  .product-grid{grid-template-columns:repeat(2,1fr);}
  .mx-trust{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:900px){
  .mx-steps{grid-template-columns:repeat(2,1fr);}
  .mx-steps::before{display:none;}
}
@media(max-width:640px){
  .brand-stack small{display:none;}
  .mx-hero{padding:40px 0 80px;}
  .mx-bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px;}
  .mx-bento .my-cat-card:nth-child(1){grid-column:span 2;}
  .mx-bento .my-cat-card:nth-child(1) h4{font-size:20px;}
  .mx-steps,.mx-trust,.product-grid{grid-template-columns:1fr;}
  .mx-hero .hero-meta{gap:22px;}
  .scroll-cue{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .mx-hero h1 .line span,.mx-sub,.mx-hero .search-form-lg,.mx-hero .hero-ctas,.mx-hero .hero-meta,.mx-tags{animation:none !important;opacity:1;transform:none;}
  .mx-hero-bg img,.orbit,.core,.chip,.mx-track,.grad-text,.btn-primary.pulse{animation:none !important;}
  .rv{opacity:1;translate:0 0;transition:none;}
}