/* ============ MIBRO INTERNATIONAL v3 — premium sports-brand design ============ */
/* Mobile-first. Research-based: Tatami (dark hero, condensed type), Fuji
   (collections, big imagery), Vulkan (category grids), Shoyoroll (focus). */

:root {
  --ink: #0B0E14;
  --ink-2: #12161F;
  --ink-3: #1A1F2B;
  --bone: #F5F4F0;
  --paper: #FFFFFF;
  --red: #E01E2F;
  --red-hot: #FF3040;
  --gold: #C99A3C;
  --text: #E8E9EC;
  --soft: #A6AAB3;
  --mute: #6E7280;
  --line: rgba(255,255,255,.10);
  --line-2: #E7E5DE;
  --disp: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --r: 14px;
  --pad: clamp(20px, 4vw, 44px);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family: var(--body); background: var(--ink); color: var(--text);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection { background: var(--red); color:#fff; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
.wrap { max-width:1240px; margin:0 auto; padding:0 var(--pad); }

/* ---------- type ---------- */
.disp {
  font-family: var(--disp); font-weight:400; letter-spacing:.01em;
  line-height:.94; text-transform:uppercase;
}
h1.disp { font-size: clamp(52px, 11vw, 118px); }
h2.disp { font-size: clamp(38px, 7vw, 72px); }
h3 { font-family:var(--body); font-size:17px; font-weight:700; letter-spacing:-.01em; color:#fff; }
.eyebrow {
  font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color: var(--red-hot); display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before { content:''; width:26px; height:3px; background:var(--red); }
.lead { font-size:clamp(16px,2vw,19px); color:var(--soft); line-height:1.65; }

/* ---------- buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:16px 30px; font-family:var(--body); font-size:14px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; border:none; cursor:pointer;
  transition: transform .15s, background .2s, color .2s, border-color .2s;
}
.btn:active { transform:scale(.97); }
.btn-red { background:var(--red); color:#fff; }
.btn-red:hover { background:var(--red-hot); }
.btn-ghost { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.35); }
.btn-ghost:hover { border-color:#fff; background:rgba(255,255,255,.06); }
.btn-ink { background:var(--ink); color:#fff; }
.btn-ink:hover { background:#000; }
.btn-arrow::after { content:'→'; font-weight:400; }

/* ---------- header ---------- */
header.site {
  position:sticky; top:0; z-index:80;
  background:rgba(11,14,20,.85); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav { display:flex; align-items:center; justify-content:space-between; height:68px; }
.brand { display:flex; align-items:center; gap:11px; }
.brand .chip { width:32px; height:11px; background:var(--red); border-radius:2px; position:relative; flex:none; }
.brand .chip::after { content:''; position:absolute; left:50%; top:-3px; transform:translateX(-50%); width:6px; height:17px; background:var(--gold); border-radius:1.5px; }
.brand b { color:#fff; font-family:var(--disp); font-weight:400; font-size:21px; letter-spacing:.04em; }
.brand small { color:var(--mute); font-size:10px; letter-spacing:.24em; text-transform:uppercase; display:block; margin-top:-2px; }
.nav-links {
  position:fixed; inset:68px 0 auto 0; background:var(--ink-2);
  border-bottom:1px solid var(--line); display:none; flex-direction:column;
  padding:18px var(--pad) 26px; gap:4px;
}
.nav-links.open { display:flex; }
.nav-links a.lnk {
  color:var(--soft); font-size:15px; font-weight:600; padding:13px 4px;
  border-bottom:1px solid rgba(255,255,255,.05); display:flex; justify-content:space-between; align-items:center;
}
.nav-links a.lnk::after { content:'→'; color:var(--red); opacity:0; transition:opacity .15s; }
.nav-links a.lnk:hover, .nav-links a.lnk[aria-current="page"] { color:#fff; }
.nav-links a.lnk:hover::after { opacity:1; }
.nav-links .btn { margin-top:16px; }
.nav-right { display:flex; align-items:center; gap:10px; }
.nav-quote { display:none; }
.nav-toggle {
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer;
}
.nav-toggle svg { display:block; }

/* ---------- hero ---------- */
.hero { position:relative; min-height:calc(100svh - 68px); display:flex; align-items:flex-end; overflow:hidden; }
.hero .bg {
  position:absolute; inset:0; z-index:0;
  background:url('assets/img/hero-grappling.jpg') center 30%/cover no-repeat;
}
.hero .bg::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,14,20,.55) 0%, rgba(11,14,20,.25) 40%, rgba(11,14,20,.92) 82%, var(--ink) 100%),
             linear-gradient(90deg, rgba(11,14,20,.75) 0%, transparent 60%);
}
.hero .wrap { position:relative; z-index:1; padding-top:70px; padding-bottom:56px; width:100%; }
.hero .eyebrow { margin-bottom:18px; }
.hero h1 em { font-style:normal; color:var(--red-hot); display:block; }
.hero .lead { max-width:54ch; margin-top:20px; }
.hero-cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
.hero-facts {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:54px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  backdrop-filter:blur(6px); background:rgba(255,255,255,.03);
}
.hero-facts div { padding:16px 14px; background:rgba(11,14,20,.55); }
.hero-facts b { font-family:var(--disp); font-size:26px; color:#fff; letter-spacing:.02em; display:block; }
.hero-facts span { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--soft); }

/* ---------- marquee ---------- */
.marquee {
  border-block:1px solid var(--line); background:var(--ink-2);
  overflow:hidden; white-space:nowrap; padding:14px 0;
}
.marquee .track { display:inline-flex; gap:0; animation:scroll 26s linear infinite; }
.marquee span {
  font-family:var(--disp); font-size:17px; letter-spacing:.14em; color:var(--soft);
  padding:0 26px; position:relative;
}
.marquee span::after { content:''; position:absolute; right:-3px; top:50%; width:6px; height:6px; border-radius:50%; background:var(--red); transform:translateY(-50%); }
@keyframes scroll { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee .track { animation:none; } }

/* ---------- sections ---------- */
.section { padding:clamp(64px,9vw,120px) 0; }
.sec-head { margin-bottom:clamp(32px,5vw,52px); }
.sec-head h2.disp { margin-top:14px; }
.sec-head p { margin-top:16px; color:var(--soft); max-width:62ch; font-size:16.5px; }

/* light sections */
.light { background:var(--bone); color:var(--ink); }
.light h2.disp, .light h3 { color:var(--ink); }
.light .sec-head p { color:#565A64; }
.light .eyebrow { color:var(--red); }
.light .eyebrow::before { background:var(--red); }

/* ---------- product cards ---------- */
.p-grid { display:grid; grid-template-columns:1fr; gap:14px; }
.pcard {
  position:relative; border-radius:var(--r); overflow:hidden; background:var(--ink-3);
  aspect-ratio:4/4.6; display:flex; align-items:flex-end;
  transition:transform .25s;
}
.pcard img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.pcard::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 30%, rgba(11,14,20,.45) 60%, rgba(11,14,20,.95) 100%);
}
.pcard:hover img { transform:scale(1.05); }
.pcard .body { position:relative; z-index:1; padding:22px; width:100%; }
.pcard .rank {
  font-family:var(--disp); font-size:13px; letter-spacing:.18em; color:var(--gold);
}
.pcard h3 { font-family:var(--disp); font-weight:400; font-size:30px; letter-spacing:.03em; margin-top:2px; }
.pcard p { font-size:13.5px; color:var(--soft); margin-top:6px; }
.pcard .go {
  margin-top:14px; font-size:11.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:#fff; display:inline-flex; gap:7px; align-items:center;
}
.pcard .go::after { content:'→'; }
.pcard:hover .go { color:var(--red-hot); }
.pcard .bar { position:absolute; top:18px; left:18px; z-index:1; width:46px; height:7px; border-radius:2px; }

/* ---------- feature rows ---------- */
.feat { display:grid; grid-template-columns:1fr; gap:14px; }
.fcard {
  background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r);
  padding:26px 22px;
}
.fcard .num { font-family:var(--disp); font-size:15px; letter-spacing:.12em; color:var(--red); }
.fcard h3 { margin-top:10px; }
.fcard p { margin-top:8px; font-size:14.5px; color:#565A64; }

/* dark cards */
.dark .fcard, .section.dark .fcard { background:var(--ink-3); border-color:var(--line); }
.dark .fcard p, .section.dark .fcard p { color:var(--soft); }

/* ---------- stats ---------- */
.stats { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.stats div { background:var(--ink-2); padding:26px 18px; }
.stats b { font-family:var(--disp); font-size:clamp(40px,6vw,56px); color:#fff; letter-spacing:.02em; display:block; line-height:1; }
.stats b i { font-style:normal; color:var(--red-hot); }
.stats span { font-size:12px; letter-spacing:.15em; text-transform:uppercase; color:var(--mute); display:block; margin-top:8px; }

/* ---------- process ---------- */
.steps { display:grid; grid-template-columns:1fr; gap:12px; }
.stepcard { background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r); padding:24px 22px; position:relative; }
.stepcard .n { font-family:var(--disp); font-size:44px; color:rgba(224,30,47,.14); position:absolute; top:12px; right:18px; line-height:1; }
.stepcard h3 { font-size:16px; }
.stepcard p { margin-top:8px; font-size:14px; color:#565A64; }

/* ---------- media split ---------- */
.split { display:grid; grid-template-columns:1fr; gap:26px; align-items:center; }
.split .imgbox { border-radius:var(--r); overflow:hidden; aspect-ratio:4/3; position:relative; }
.split .imgbox img { width:100%; height:100%; object-fit:cover; }
.split .imgbox .cap {
  position:absolute; left:14px; bottom:14px; background:rgba(11,14,20,.78);
  backdrop-filter:blur(6px); border:1px solid var(--line); border-radius:9px;
  padding:8px 14px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#fff;
}
.ticks { list-style:none; margin-top:22px; display:grid; gap:12px; }
.ticks li { display:flex; gap:13px; font-size:15px; align-items:flex-start; }
.ticks li::before {
  content:''; flex:none; width:20px; height:20px; border-radius:50%; margin-top:3px;
  background:rgba(224,30,47,.1);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 3.6 3.6 6.2 9 1' stroke='%23E01E2F' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center;
}
.light .ticks li::before { background:rgba(224,30,47,.12); }

/* ---------- spec table ---------- */
.specwrap { background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden; }
table.spec { width:100%; border-collapse:collapse; font-size:14px; }
table.spec th, table.spec td { text-align:left; padding:15px 16px; border-bottom:1px solid var(--line-2); vertical-align:top; }
table.spec th { color:var(--ink); font-weight:700; width:36%; background:#EFEDE6; font-size:13px; }
table.spec td { color:#565A64; }
table.spec tr:last-child th, table.spec tr:last-child td { border-bottom:none; }

/* ---------- FAQ ---------- */
.faq { border-top:1px solid var(--line-2); }
.light .faq details { border-bottom:1px solid var(--line-2); }
.faq details { border-bottom:1px solid var(--line); }
.faq summary {
  padding:20px 0; display:flex; justify-content:space-between; gap:18px; align-items:center;
  cursor:pointer; font-size:16px; font-weight:700; color:var(--ink); list-style:none;
}
.light .faq summary { color:var(--ink); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after {
  content:'+'; font-family:var(--disp); font-size:26px; color:var(--red); transition:transform .2s; flex:none; line-height:1;
}
.faq details[open] summary::after { transform:rotate(45deg); }
.faq .a { padding:0 0 22px; color:#565A64; font-size:15px; max-width:68ch; }
.light .faq .a { color:#565A64; }
.faq .a, .faq .a *:last-child { color:inherit; }

/* ---------- page hero ---------- */
.phero { position:relative; padding:clamp(56px,9vw,110px) 0 clamp(40px,6vw,64px); background:var(--ink-2); overflow:hidden; }
.phero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 80% at 88% 0%, rgba(224,30,47,.13), transparent 60%),
             radial-gradient(ellipse 40% 60% at 0% 100%, rgba(201,154,60,.07), transparent 60%);
}
.phero .wrap { position:relative; }
.crumbs { font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); margin-bottom:20px; }
.crumbs a { color:var(--soft); } .crumbs a:hover { color:#fff; }
.phero h1.disp { margin-top:14px; }
.phero p { color:var(--soft); margin-top:18px; max-width:60ch; font-size:16.5px; }

/* ---------- category blocks (products page) ---------- */
.catblock { display:grid; grid-template-columns:1fr; gap:22px; padding:clamp(40px,6vw,64px) 0; border-top:1px solid var(--line); }
.catblock:first-of-type { border-top:none; }
.catblock .imgbox { border-radius:var(--r); overflow:hidden; aspect-ratio:4/3; position:relative; background:var(--ink-3); }
.catblock .imgbox img { width:100%; height:100%; object-fit:cover; }
.catblock .imgbox .bar { position:absolute; top:16px; left:16px; width:48px; height:7px; border-radius:2px; }
.catblock h2 { font-family:var(--disp); font-weight:400; font-size:clamp(34px,5vw,48px); letter-spacing:.02em; color:#fff; margin-top:10px; }
.catblock p { color:var(--soft); margin-top:12px; font-size:15.5px; }
.catblock ul.points { list-style:none; margin-top:18px; display:grid; grid-template-columns:1fr; gap:9px; }
.catblock ul.points li { font-size:14px; color:var(--text); display:flex; gap:11px; align-items:baseline; }
.catblock ul.points li::before { content:'—'; color:var(--red-hot); flex:none; }
.catblock .btn { margin-top:24px; }

/* ---------- contact ---------- */
.contact-grid { display:grid; grid-template-columns:1fr; gap:26px; align-items:start; }
.ccard { background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r); padding:30px 24px; }
.ccard h2 { font-family:var(--disp); font-weight:400; font-size:30px; color:#fff; }
.ccard .sub { color:var(--mute); font-size:13px; letter-spacing:.14em; text-transform:uppercase; margin-top:4px; }
.ccard ul { list-style:none; margin-top:22px; }
.ccard li { padding:15px 0; border-top:1px solid var(--line); font-size:15px; }
.ccard li .lab { display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); margin-bottom:5px; }
.ccard a { color:#fff; border-bottom:1px solid rgba(255,255,255,.3); }
.ccard a:hover { border-color:var(--red-hot); color:var(--red-hot); }
form.quote { background:var(--paper); color:var(--ink); border-radius:var(--r); padding:clamp(24px,4vw,40px); }
form.quote h2 { font-family:var(--disp); font-weight:400; font-size:clamp(30px,4vw,40px); color:var(--ink); }
form.quote .hint { color:#565A64; font-size:14px; margin-top:8px; margin-bottom:26px; }
.field { margin-bottom:16px; }
.field label { display:block; font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); margin-bottom:7px; }
.field label span { color:var(--red); }
.field input, .field select, .field textarea {
  width:100%; padding:14px 15px; border:1.5px solid var(--line-2); border-radius:10px;
  background:#FBFAF7; font-family:var(--body); font-size:16px; color:var(--ink);
  transition:border-color .15s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--ink); }
.field textarea { resize:vertical; min-height:120px; }
form .btn { width:100%; }
.form-note { margin-top:13px; font-size:13px; color:var(--mute); text-align:center; }

/* ---------- CTA band ---------- */
.cta-band { position:relative; overflow:hidden; background:var(--ink-2); text-align:center; }
.cta-band::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 55% 90% at 50% 110%, rgba(224,30,47,.18), transparent 60%);
}
.cta-band .wrap { position:relative; }
.cta-band h2.disp { margin-top:14px; }
.cta-band p { color:var(--soft); margin:18px auto 0; max-width:56ch; font-size:16.5px; }
.cta-band .btn { margin-top:30px; }

/* ---------- footer ---------- */
footer.site { background:var(--ink); border-top:1px solid var(--line); padding:56px 0 36px; }
.foot-grid { display:grid; grid-template-columns:1fr; gap:34px; }
.foot-grid h4 { font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); margin-bottom:16px; font-weight:700; }
.foot-grid a.f { display:block; color:var(--soft); font-size:14.5px; margin-bottom:12px; }
.foot-grid a.f:hover { color:#fff; }
.foot-grid .about-txt { color:var(--mute); font-size:14px; margin-top:16px; max-width:38ch; }
.foot-base { margin-top:44px; padding-top:22px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px; font-size:12.5px; color:var(--mute); }

/* belt strip divider */
.beltline { display:flex; height:6px; }
.beltline span { flex:1; }
.beltline .w{background:#F5F4F0;} .beltline .r{background:var(--red);}
.beltline .b{background:#3D5FA8;} .beltline .g{background:var(--gold);}
.beltline .k{background:#0B0E14;}

/* a11y + motion */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline:2.5px solid var(--red-hot); outline-offset:2px;
}
.reveal { opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
  html { scroll-behavior:auto; }
  .pcard:hover img { transform:none; }
}

/* ---------- tablet ---------- */
@media (min-width: 640px) {
  .p-grid { grid-template-columns:repeat(2,1fr); }
  .feat { grid-template-columns:repeat(2,1fr); }
  .steps { grid-template-columns:repeat(2,1fr); }
  .catblock ul.points { grid-template-columns:repeat(2,1fr); }
  .foot-grid { grid-template-columns:repeat(2,1fr); }
  .foot-base { flex-direction:row; justify-content:space-between; }
  .hero-facts b { font-size:32px; }
}

/* ---------- desktop ---------- */
@media (min-width: 960px) {
  .nav-toggle { display:none; }
  .nav-links {
    position:static; background:none; border:none; display:flex !important;
    flex-direction:row; align-items:center; gap:30px; padding:0;
  }
  .nav-links a.lnk { border:none; padding:0; font-size:14.5px; color:var(--soft); }
  .nav-links a.lnk:hover, .nav-links a.lnk[aria-current="page"] { color:#fff; }
  .nav-links .btn { margin:0 0 0 6px; padding:11px 20px; font-size:12.5px; }
  .hero { min-height:calc(100vh - 68px); }
  .hero .wrap { padding-bottom:72px; }
  .hero .lead { font-size:19px; }
  .hero-facts { grid-template-columns:repeat(3,1fr); }
  .p-grid { grid-template-columns:repeat(4,1fr); gap:16px; }
  .feat { grid-template-columns:repeat(4,1fr); }
  .steps { grid-template-columns:repeat(5,1fr); }
  .stats { grid-template-columns:repeat(4,1fr); }
  .split { grid-template-columns:1fr 1fr; gap:48px; }
  .catblock { grid-template-columns:0.85fr 1.15fr; gap:44px; align-items:center; }
  .catblock:nth-of-type(even) .imgbox { order:2; }
  .contact-grid { grid-template-columns:0.85fr 1.15fr; gap:44px; }
  .foot-grid { grid-template-columns:1.4fr 1fr 1fr 1.2fr; }
  .section { padding:clamp(80px,9vw,128px) 0; }
}