/* ============================================================
   BOUTIQUE FIGHTER — styles.css
   Combat-sport editorial: black / red / white + imagery
   ============================================================ */

:root{
  --black:#0a0a0a;
  --ink:#121212;
  --panel:#161616;
  --red:#e2231a;
  --red-dark:#b81810;
  --white:#ffffff;
  --cream:#f5f3ef;
  --muted:#9a9a9a;
  --line:rgba(255,255,255,.10);
  --maxw:1240px;
  --display:'Anton', Impact, 'Arial Narrow', sans-serif;
  --sans:'Archivo', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }
body{
  font-family:var(--sans);
  background:var(--black);
  color:var(--white);
  line-height:1.6;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

/* ---------- Reveal / animation system ---------- */
[data-reveal]{
  opacity:0; transform:translateY(34px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  will-change:opacity, transform;
}
[data-reveal].in{ opacity:1; transform:none; }
/* defensive net: split/headline text never disappears */
.hero-title .line{ opacity:0; transform:translateY(110%); }
.hero-title .line.in{ opacity:1; transform:none;
  transition:opacity .9s var(--ease), transform .9s var(--ease); }

@media (prefers-reduced-motion: reduce){
  [data-reveal], .hero-title .line{ opacity:1 !important; transform:none !important; transition:none !important; }
  .hero-img, .mx-img, .outlet-img{ transform:none !important; }
  html{ scroll-behavior:auto; }
}

/* scroll progress */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--red),#ff5c4d); z-index:200;
  transition:width .1s linear; box-shadow:0 0 12px rgba(226,35,26,.7);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:1rem 1.9rem; font-family:var(--sans); font-weight:800; font-size:.82rem;
  letter-spacing:.14em; text-transform:uppercase; border:2px solid transparent; border-radius:2px;
  cursor:pointer; transition:transform .18s var(--ease), background .25s ease, color .25s ease, box-shadow .25s ease;
  white-space:nowrap; position:relative; overflow:hidden;
}
.btn::after{ content:""; position:absolute; inset:0; background:rgba(255,255,255,.18);
  transform:translateX(-120%) skewX(-18deg); transition:transform .55s var(--ease); }
.btn:hover::after{ transform:translateX(120%) skewX(-18deg); }
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-red{ background:var(--red); color:#fff; box-shadow:0 10px 28px -10px rgba(226,35,26,.75); }
.btn-red:hover{ background:var(--red-dark); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.07); transform:translateY(-2px); }
.btn-light{ background:#fff; color:var(--black); }
.btn-light:hover{ background:var(--cream); transform:translateY(-2px); }
.btn.full{ width:100%; }

/* ---------- Announcement ---------- */
.announce{ background:var(--red); color:#fff; overflow:hidden; font-size:.72rem; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; border-bottom:1px solid rgba(0,0,0,.2); }
.announce-track{ display:flex; gap:2.5rem; white-space:nowrap; padding:.55rem 0; width:max-content;
  animation:marquee 26s linear infinite; }
.announce-track span{ flex:none; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- Header ---------- */
.site-header{ position:sticky; top:0; z-index:100; background:rgba(10,10,10,.72);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line); transition:background .3s ease, box-shadow .3s ease, transform .4s var(--ease); }
.site-header.scrolled{ background:rgba(10,10,10,.96); box-shadow:0 10px 30px -18px rgba(0,0,0,.9); }
.site-header.hide{ transform:translateY(-100%); }
.nav-inner{ max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; padding:.7rem 1.5rem; }
.brand-logo{ height:62px; width:auto; transition:transform .3s var(--ease); }
.brand:hover .brand-logo{ transform:scale(1.04); }
.main-nav{ display:flex; gap:2rem; margin-left:auto; }
.main-nav a{ font-weight:700; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
  color:#e8e8e8; position:relative; padding:.3rem 0; }
.main-nav a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background:var(--red); transition:width .25s var(--ease); }
.main-nav a:hover{ color:#fff; } .main-nav a:hover::after{ width:100%; }
.nav-actions{ display:flex; align-items:center; gap:.35rem; }
.icon-btn{ position:relative; background:none; border:none; color:#fff; cursor:pointer; width:42px; height:42px;
  display:grid; place-items:center; border-radius:50%; transition:background .2s ease, transform .2s ease; }
.icon-btn:hover{ background:rgba(255,255,255,.08); transform:translateY(-1px); }
.cart-count{ position:absolute; top:5px; right:4px; background:var(--red); color:#fff; font-size:.6rem;
  font-weight:800; min-width:16px; height:16px; padding:0 4px; border-radius:9px; display:grid; place-items:center; }
.burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.burger span{ width:24px; height:2px; background:#fff; transition:transform .3s var(--ease), opacity .3s ease; }
.burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mobile-nav{ display:none; flex-direction:column; border-top:1px solid var(--line); background:rgba(10,10,10,.98); }
.mobile-nav.open{ display:flex; }
.mobile-nav a{ padding:1rem 1.5rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  border-bottom:1px solid var(--line); font-size:.95rem; }
.mobile-nav.open a{ animation:fadeInUp .4s var(--ease) backwards; }
.mobile-nav.open a:nth-child(2){ animation-delay:.05s; }
.mobile-nav.open a:nth-child(3){ animation-delay:.1s; }
.mobile-nav.open a:nth-child(4){ animation-delay:.15s; }
.mobile-nav.open a:nth-child(5){ animation-delay:.2s; }
@keyframes fadeInUp{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none; } }

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; min-height:calc(100vh - 110px);
  display:flex; align-items:center; padding:5rem 1.5rem 4rem; }
.hero-media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-img{ position:absolute; inset:-12% 0; background-size:cover; background-position:center 30%;
  transform:scale(1.12); animation:kenburns 22s ease-in-out infinite alternate; will-change:transform; }
@keyframes kenburns{ from{ transform:scale(1.12); } to{ transform:scale(1.22) translateY(-2%); } }
.hero-tint{ position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(10,10,10,.94) 0%, rgba(10,10,10,.72) 45%, rgba(10,10,10,.45) 100%),
    radial-gradient(900px 500px at 85% 0%, rgba(226,35,26,.32), transparent 60%),
    linear-gradient(0deg, rgba(10,10,10,.9), transparent 40%);
}
.hero-grid{ position:absolute; inset:0; opacity:.35;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:70px 70px;
  mask-image:radial-gradient(circle at 70% 40%, #000 20%, transparent 75%);
  -webkit-mask-image:radial-gradient(circle at 70% 40%, #000 20%, transparent 75%); }
.hero-inner{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; width:100%; }
.kicker{ display:inline-block; color:var(--red); font-weight:800; letter-spacing:.3em; text-transform:uppercase;
  font-size:.8rem; margin-bottom:1.1rem; border-left:3px solid var(--red); padding-left:.8rem; }
.hero-title{ font-family:var(--display); font-weight:400; font-size:clamp(3.4rem, 12vw, 10rem);
  line-height:.86; letter-spacing:.01em; text-transform:uppercase; }
.hero-title .line{ display:block; overflow:hidden; }
.hero-title .accent{ color:transparent; -webkit-text-stroke:2px var(--red); text-shadow:0 0 40px rgba(226,35,26,.4); }
.hero-sub{ max-width:36rem; margin:1.6rem 0 2.2rem; color:#dcdcdc; font-size:1.08rem; }
.hero-cta{ display:flex; gap:1rem; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:2.6rem; margin-top:3.2rem; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:1.6rem; }
.hero-stats div{ display:flex; flex-direction:column; }
.hero-stats strong{ font-family:var(--display); font-size:2.2rem; color:#fff; line-height:1; }
.hero-stats span{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:.3rem; }
.hero-scroll{ position:absolute; z-index:2; bottom:1.4rem; left:50%; transform:translateX(-50%);
  font-size:.66rem; letter-spacing:.3em; color:#cfcfcf; display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.hero-scroll span{ width:1px; height:34px; background:linear-gradient(var(--red), transparent); animation:scrollLine 1.8s ease-in-out infinite; }
@keyframes scrollLine{ 0%,100%{ transform:scaleY(.4); opacity:.4; transform-origin:top; } 50%{ transform:scaleY(1); opacity:1; } }

/* ---------- Brand strip ---------- */
.brand-strip{ background:var(--red); padding:1.1rem 0; overflow:hidden; border-top:3px solid #0a0a0a; border-bottom:3px solid #0a0a0a; }
.brand-track{ display:flex; gap:3.5rem; width:max-content; align-items:center; animation:marquee 30s linear infinite; }
.brand-strip:hover .brand-track{ animation-play-state:paused; }
.brand-track span{ font-family:var(--display); font-size:1.7rem; letter-spacing:.05em; color:#fff; opacity:.95; white-space:nowrap; }
.brand-track span::after{ content:"✦"; margin-left:3.5rem; opacity:.5; font-family:var(--sans); }

/* ---------- Section base ---------- */
.section{ max-width:var(--maxw); margin:0 auto; padding:6rem 1.5rem; }
.section-head{ text-align:center; max-width:46rem; margin:0 auto 3.4rem; }
.eyebrow{ color:var(--red); font-weight:800; letter-spacing:.26em; text-transform:uppercase; font-size:.76rem; margin-bottom:.9rem; }
.eyebrow.light{ color:rgba(255,255,255,.8); }
.section-title{ font-family:var(--display); font-weight:400; font-size:clamp(2.4rem,6vw,4.6rem); line-height:.95; text-transform:uppercase; letter-spacing:.01em; }
.section-title.light{ color:#fff; }
.section-lead{ color:#bdbdbd; font-size:1.05rem; margin-top:1rem; }
.section-lead.light{ color:rgba(255,255,255,.88); }

/* ---------- Categories (image cards) ---------- */
.cat-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:210px; gap:1.1rem; }
.cat-card{ position:relative; display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.cat-card.feature{ grid-column:span 2; grid-row:span 2; }
.cat-media{ position:absolute; inset:0; overflow:hidden; }
.cat-img{ position:absolute; inset:0; background-size:cover; background-position:center;
  transform:scale(1.04); filter:grayscale(.25) brightness(.62);
  transition:transform .7s var(--ease), filter .5s ease; will-change:transform; }
.cat-card::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,10,10,.1) 0%, rgba(10,10,10,.35) 45%, rgba(10,10,10,.92) 100%); }
.cat-content{ position:relative; z-index:2; display:flex; flex-direction:column; justify-content:space-between;
  padding:1.5rem; width:100%; height:100%; }
.cat-card.feature .cat-content{ padding:2.2rem; }
.cat-icon{ width:54px; height:54px; color:#fff; opacity:.9; transition:color .3s ease, transform .4s var(--ease); }
.cat-card.feature .cat-icon{ width:78px; height:78px; }
.cat-icon svg{ width:100%; height:100%; }
.cat-body h3{ font-family:var(--display); font-weight:400; font-size:1.45rem; text-transform:uppercase; letter-spacing:.02em; line-height:1; }
.cat-card.feature .cat-body h3{ font-size:2.9rem; }
.cat-body p{ color:#c9c9c9; font-size:.9rem; margin-top:.45rem; max-width:34ch;
  max-height:0; opacity:0; overflow:hidden; transition:max-height .4s var(--ease), opacity .4s ease, margin .4s ease; }
.cat-card.feature .cat-body p{ max-height:none; opacity:1; }
.cat-go{ display:inline-block; margin-top:.9rem; color:#fff; font-weight:800; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase;
  transform:translateY(6px); opacity:0; transition:transform .35s var(--ease), opacity .35s ease, color .25s ease; }
.cat-card.feature .cat-go{ transform:none; opacity:1; }
/* hover */
.cat-card:hover{ transform:translateY(-6px); border-color:rgba(226,35,26,.55); box-shadow:0 26px 55px -28px rgba(226,35,26,.6); }
.cat-card:hover .cat-img{ transform:scale(1.12); filter:grayscale(0) brightness(.7); }
.cat-card:hover .cat-icon{ color:var(--red); transform:translateY(-2px); }
.cat-card:hover .cat-body p{ max-height:6em; opacity:1; margin-top:.45rem; }
.cat-card:hover .cat-go{ transform:none; opacity:1; color:#fff; }

/* ---------- Hecho en México ---------- */
.made-mx{ max-width:none; background:linear-gradient(135deg,#1a0606,#0a0a0a 55%); padding:0; }
.mx-inner{ max-width:var(--maxw); margin:0 auto; padding:6rem 1.5rem; display:grid; grid-template-columns:1.05fr .95fr; gap:3.5rem; align-items:center; }
.mx-lead{ color:#d8d8d8; font-size:1.08rem; margin:1.2rem 0 1.4rem; max-width:32rem; }
.mx-list{ display:flex; flex-direction:column; gap:.7rem; margin-bottom:2rem; }
.mx-list li{ position:relative; padding-left:1.6rem; color:#cfcfcf; }
.mx-list li::before{ content:"✦"; position:absolute; left:0; color:var(--red); }
.mx-frame{ position:relative; aspect-ratio:4/5; border-radius:12px; overflow:hidden; border:1px solid var(--line);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.8); }
.mx-img{ position:absolute; inset:-12% 0; background-size:cover; background-position:center; transform:scale(1.06); will-change:transform; }
.mx-frame::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(10,10,10,.55)); }
.mx-flag-bar{ position:absolute; left:0; right:0; bottom:0; height:8px; z-index:2;
  background:linear-gradient(90deg,#006847 0 33.3%,#fff 33.3% 66.6%,#ce1126 66.6% 100%); }
.mx-badge{ position:absolute; top:1rem; left:1rem; z-index:2; background:var(--red); color:#fff;
  font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; padding:.5rem .9rem; border-radius:3px; }

/* ---------- Features ---------- */
.features{ border-top:1px solid var(--line); }
.feat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.feat{ padding:1.8rem; border:1px solid var(--line); border-radius:8px; background:#0e0e0e; transition:transform .3s var(--ease), border-color .3s ease; }
.feat:hover{ transform:translateY(-5px); border-color:rgba(226,35,26,.4); }
.feat-num{ font-family:var(--display); color:var(--red); font-size:1.5rem; margin-bottom:.8rem; }
.feat h3{ font-size:1.15rem; font-weight:800; margin-bottom:.5rem; }
.feat p{ color:var(--muted); font-size:.92rem; }

/* ---------- Brands ---------- */
.brand-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:.9rem; }
.brand-cell{ display:grid; place-items:center; text-align:center; min-height:96px; padding:1rem; border:1px solid var(--line);
  border-radius:8px; font-family:var(--display); font-size:1.25rem; letter-spacing:.04em; text-transform:uppercase;
  color:#e0e0e0; background:#0e0e0e; transition:transform .25s var(--ease), background .25s ease, color .25s ease, border-color .25s ease; }
.brand-cell:hover{ color:#fff; background:var(--red); border-color:var(--red); transform:translateY(-4px) scale(1.02); }
.brand-cell.all{ color:var(--red); font-family:var(--sans); font-weight:800; font-size:.9rem; letter-spacing:.12em; }
.brand-cell.all:hover{ color:#fff; }

/* ---------- Outlet banner ---------- */
.outlet-banner{ position:relative; overflow:hidden; }
.outlet-media{ position:absolute; inset:0; z-index:0; }
.outlet-img{ position:absolute; inset:-15% 0; background-size:cover; background-position:center 35%; transform:scale(1.1); filter:brightness(.5); will-change:transform; }
.outlet-tint{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(226,35,26,.85), rgba(184,24,16,.6)); mix-blend-mode:multiply; }
.outlet-inner{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:5rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.outlet-inner .section-title.light{ font-size:clamp(2rem,5vw,3.6rem); }

/* ---------- Contact ---------- */
.contact-inner{ display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:start; }
.contact-meta{ margin-top:1.8rem; display:flex; flex-direction:column; gap:.5rem; color:#cfcfcf; }
.contact-meta strong{ color:#fff; }
.contact-form{ background:#0e0e0e; border:1px solid var(--line); border-radius:12px; padding:2.2rem; }
.contact-form label{ display:block; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 .5rem; }
.contact-form input{ width:100%; padding:.95rem 1rem; margin-bottom:1.3rem; background:#161616; border:1px solid var(--line);
  border-radius:4px; color:#fff; font-family:var(--sans); font-size:1rem; transition:border-color .2s ease, box-shadow .2s ease; }
.contact-form input:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(226,35,26,.18); }
.form-msg{ margin-top:1rem; font-size:.9rem; min-height:1.2em; }
.form-msg.ok{ color:#5fd07a; } .form-msg.err{ color:#ff7a7a; }

/* ---------- Footer ---------- */
.site-footer{ background:#070707; border-top:1px solid var(--line); }
.footer-top{ max-width:var(--maxw); margin:0 auto; padding:4rem 1.5rem 3rem; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2.5rem; }
.footer-logo{ height:54px; width:auto; margin-bottom:1.1rem; }
.footer-brand p{ color:var(--muted); max-width:24rem; font-size:.92rem; }
.socials{ display:flex; gap:.7rem; margin-top:1.3rem; }
.socials a{ width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:#ddd; transition:transform .2s var(--ease), background .2s ease, border-color .2s ease, color .2s ease; }
.socials a:hover{ background:var(--red); border-color:var(--red); color:#fff; transform:translateY(-3px); }
.footer-col h4{ font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:#fff; margin-bottom:1.1rem; }
.footer-col a{ display:block; color:var(--muted); font-size:.92rem; padding:.32rem 0; transition:color .2s ease, transform .2s ease; }
.footer-col a:hover{ color:var(--red); transform:translateX(4px); }
.footer-bottom{ border-top:1px solid var(--line); max-width:var(--maxw); margin:0 auto; padding:1.4rem 1.5rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; color:var(--muted); font-size:.82rem; }

/* ============================================================
   MODAL DE CATEGORÍA
   ============================================================ */
.modal{ position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:1.5rem;
  visibility:hidden; opacity:0; pointer-events:none; transition:opacity .4s var(--ease), visibility .4s var(--ease); }
.modal.open{ visibility:visible; opacity:1; pointer-events:auto; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(5,5,5,.66);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); cursor:pointer; }
.modal-card{ position:relative; width:min(720px,100%); max-height:90vh; overflow:auto;
  background:linear-gradient(180deg,#141414,#0d0d0d); border:1px solid rgba(255,255,255,.12); border-radius:18px;
  box-shadow:0 50px 120px -35px rgba(0,0,0,.95), 0 0 0 1px rgba(226,35,26,.08);
  transform:translateY(40px) scale(.94); opacity:0;
  transition:transform .55s var(--ease), opacity .45s var(--ease);
  -webkit-overflow-scrolling:touch; }
.modal.open .modal-card{ transform:none; opacity:1; }
.modal-card::-webkit-scrollbar{ width:8px; }
.modal-card::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:8px; }

.modal-close{ position:absolute; top:1rem; right:1rem; z-index:5; width:42px; height:42px; border:none;
  border-radius:50%; background:rgba(10,10,10,.55); backdrop-filter:blur(6px); color:#fff; cursor:pointer;
  display:grid; place-items:center; transition:background .2s ease, transform .2s var(--ease); }
.modal-close:hover{ background:var(--red); transform:rotate(90deg); }

.modal-media{ position:relative; height:230px; overflow:hidden; border-radius:18px 18px 0 0; }
.modal-img{ position:absolute; inset:0; background-size:cover; background-position:center;
  transform:scale(1.18); filter:grayscale(.15) brightness(.7); transition:transform 1.1s var(--ease); }
.modal.open .modal-img{ transform:scale(1.02); }
.modal-media-tint{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,.15) 0%, rgba(10,10,10,.4) 50%, rgba(13,13,13,1) 100%),
    radial-gradient(600px 300px at 90% 0%, rgba(226,35,26,.35), transparent 60%); }
.modal-head{ position:absolute; left:0; bottom:0; padding:1.6rem 2rem; }
.modal-eyebrow{ display:inline-block; color:var(--red); font-weight:800; letter-spacing:.24em;
  text-transform:uppercase; font-size:.72rem; margin-bottom:.5rem;
  opacity:0; transform:translateY(12px); transition:opacity .5s ease .15s, transform .5s var(--ease) .15s; }
.modal-title{ font-family:var(--display); font-weight:400; font-size:clamp(2rem,5vw,3.1rem);
  line-height:.95; text-transform:uppercase; letter-spacing:.01em;
  opacity:0; transform:translateY(16px); transition:opacity .5s ease .22s, transform .5s var(--ease) .22s; }
.modal.open .modal-eyebrow, .modal.open .modal-title{ opacity:1; transform:none; }

.modal-body{ padding:1.8rem 2rem 2.1rem; }
.modal-desc{ color:#d4d4d4; font-size:1.04rem; line-height:1.6;
  opacity:0; transform:translateY(14px); transition:opacity .5s ease .3s, transform .5s var(--ease) .3s; }
.modal.open .modal-desc{ opacity:1; transform:none; }
.modal-cols{ display:grid; grid-template-columns:1.25fr 1fr; gap:2rem; margin:1.8rem 0; }
.modal-col h4{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:#fff;
  padding-bottom:.7rem; margin-bottom:1rem; border-bottom:1px solid var(--line); }
.modal-list{ display:flex; flex-direction:column; gap:.6rem; }
.modal-list li{ position:relative; padding-left:1.7rem; color:#cfcfcf; font-size:.94rem;
  opacity:0; transform:translateX(-10px);
  animation:none; }
.modal-list li::before{ content:""; position:absolute; left:0; top:.5em; width:9px; height:9px;
  background:var(--red); transform:rotate(45deg); box-shadow:0 0 10px rgba(226,35,26,.6); }
.modal.open .modal-list li{ animation:liIn .5s var(--ease) forwards; animation-delay:calc(.36s + var(--i) * .06s); }
@keyframes liIn{ to{ opacity:1; transform:none; } }
.modal-brands{ display:flex; flex-wrap:wrap; gap:.5rem; }
.modal-brands span{ font-family:var(--display); font-size:1rem; letter-spacing:.03em; text-transform:uppercase;
  color:#eee; padding:.4rem .8rem; border:1px solid var(--line); border-radius:4px; background:#161616;
  opacity:0; transform:translateY(10px); transition:opacity .4s ease, transform .4s var(--ease), background .2s ease, color .2s ease, border-color .2s ease; }
.modal.open .modal-brands span{ opacity:1; transform:none; transition-delay:.45s; }
.modal-brands span:hover{ background:var(--red); border-color:var(--red); color:#fff; }
.modal-note{ display:flex; gap:.6rem; align-items:flex-start; margin-top:1.3rem; padding:.9rem 1rem;
  background:rgba(226,35,26,.08); border:1px solid rgba(226,35,26,.25); border-radius:8px;
  color:#e7c9c7; font-size:.84rem; line-height:1.4; }
.modal-note svg{ color:var(--red); flex:none; margin-top:1px; }
.modal-actions{ display:flex; gap:.9rem; flex-wrap:wrap; padding-top:1.4rem; border-top:1px solid var(--line); }
.modal-actions .btn{ flex:1 1 auto; min-width:200px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .cat-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:minmax(210px,auto); }
  .cat-card.feature{ grid-column:span 2; grid-row:auto; }
  .feat-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .brand-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .cat-body p{ max-height:none; opacity:1; } .cat-go{ opacity:1; transform:none; }
}
@media (max-width:760px){
  .main-nav{ display:none; }
  .burger{ display:flex; }
  .section{ padding:4rem 1.2rem; }
  .mx-inner{ grid-template-columns:1fr; gap:2.5rem; padding:4rem 1.2rem; }
  .mx-frame{ max-width:380px; }
  .contact-inner{ grid-template-columns:1fr; gap:2rem; }
  .hero{ min-height:auto; padding:3.5rem 1.2rem; }
  .hero-stats{ gap:1.8rem; }
  .modal-cols{ grid-template-columns:1fr; gap:1.6rem; }
  .modal-body{ padding:1.5rem 1.3rem 1.7rem; }
  .modal-head{ padding:1.3rem 1.3rem; }
  .modal-actions .btn{ min-width:100%; }
}
@media (max-width:520px){
  .cat-grid{ grid-template-columns:1fr; grid-auto-rows:minmax(240px,auto); }
  .cat-card.feature{ grid-column:auto; grid-row:auto; }
  .feat-grid{ grid-template-columns:1fr; }
  .brand-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-top{ grid-template-columns:1fr; gap:2rem; }
  .outlet-inner{ flex-direction:column; align-items:flex-start; }
  .brand-logo{ height:50px; }
}