:root {
  --ink: #171717;
  --paper: #f4f2ed;
  --card: #ffffff;
  --line: #d7d4cc;
  --orange: #ff9f1a;
  --yellow: #ffd21c;
  --green: #168f50;
  --blue: #1f6fff;
  --muted: #686862;
  --danger: #a62f26;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Manrope, Arial, sans-serif; }
a { color: inherit; }
button, input, select { font: inherit; }

.site-header { height: 68px; background: var(--ink); color: #fff; position: sticky; top: 0; z-index: 20; border-bottom: 1px solid #303030; }
.header-inner { width: min(1180px, calc(100% - 32px)); height: 100%; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font: 800 17px "Plus Jakarta Sans", sans-serif; letter-spacing: -.03em; }
.brand-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; background: var(--yellow); color: #111; border-radius: 50%; font-size: 15px; }
.brand-dot { color: var(--yellow); }
.header-nav { display: flex; gap: 24px; align-items: center; }
.header-nav a { color: #bdbdbd; text-decoration: none; font-size: 12px; font-weight: 700; }
.header-nav a:hover { color: #fff; }
.header-whatsapp { color: #fff; text-decoration: none; font-size: 12px; font-weight: 800; border: 1px solid #444; border-radius: 999px; padding: 10px 15px; white-space: nowrap; }
.wa-icon { width:20px; height:20px; flex:0 0 auto; color:#25d366; }

.profile-shell, .catalog-shell { width: min(1120px, calc(100% - 32px)); margin: auto; }
.cover { width: min(1180px, 100%); height: 420px; margin: auto; position: relative; overflow: hidden; background: radial-gradient(circle at 72% 30%, rgb(255 225 68 / 70%), transparent 27%), linear-gradient(112deg, #ffd51e 0%, #ffb30f 48%, #ff7a00 100%); border-radius: 0 0 18px 18px; box-shadow: inset 0 -1px rgb(0 0 0 / 10%); }
.cover::before { content: ""; position: absolute; right: 18px; top: 4px; width: 500px; height: 400px; background: url("assets/brand/matospro-logo.png") center/contain no-repeat; filter: drop-shadow(0 20px 22px rgb(32 17 0 / 25%)); }
.cover-grid { position: absolute; inset: 0; background-image: linear-gradient(rgb(0 0 0 / 8%) 1px, transparent 1px), linear-gradient(90deg, rgb(0 0 0 / 8%) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to right, #000, transparent 75%); }
.cover-content { position: relative; z-index: 2; width: 58%; height: 100%; padding: 38px 0 28px 54px; display: flex; flex-direction: column; align-items: flex-start; }
.cover-brand { display: flex; align-items: center; gap: 13px; padding-bottom: 12px; border-bottom: 3px solid var(--blue); }
.cover-brand img { width: 52px; height: 52px; object-fit: contain; }
.cover-brand > span { display: grid; gap: 2px; }
.cover-brand strong { font: 800 28px/1 "Plus Jakarta Sans"; letter-spacing: -.05em; }
.cover-brand strong span { color: var(--blue); }
.cover-brand small { font-size: 8px; font-weight: 800; letter-spacing: .2em; }
.cover p { margin: auto 0 22px; font: 800 clamp(55px, 7vw, 88px)/.82 "Plus Jakarta Sans"; letter-spacing: -.075em; }
.cover-proofs { display: flex; align-items: center; gap: 24px; padding-top: 16px; border-top: 4px solid var(--blue); }
.cover-proofs span { display: grid; grid-template-columns: 34px auto; align-items: center; column-gap: 8px; color: #151515; font-size: 11px; font-weight: 800; line-height: 1.15; text-transform: uppercase; }
.cover-proofs b { grid-row: 1 / 3; display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid rgb(23 23 23 / 75%); border-radius: 9px; font-size: 17px; }
.cover-code { position: absolute; z-index: 3; right: 0; bottom: 24px; min-width: 355px; padding: 12px 30px; background: #082a61; clip-path: polygon(8% 0,100% 0,100% 100%,0 100%); color: #ffd21c; font-size: 12px; font-weight: 800; text-align: center; letter-spacing: .16em; }

.profile-card { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; padding: 0 30px 30px; border-bottom: 1px solid #c7c3ba; }
.avatar { width: 130px; height: 130px; margin-top: -52px; position: relative; display: grid; place-items: center; background: var(--ink); border: 7px solid var(--paper); border-radius: 50%; color: var(--yellow); font: 800 30px "Plus Jakarta Sans"; }
.avatar img { width: 92%; height: 92%; object-fit: contain; }
.profile-copy { padding-top: 24px; }
.eyebrow { margin: 0 0 8px; color: #77746d; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.profile-copy h1 { margin: 0; font: 800 clamp(27px, 4vw, 43px)/1.02 "Plus Jakarta Sans"; letter-spacing: -.055em; }
.profile-copy h1 span { color: #77746d; }
.profile-copy > p:not(.eyebrow) { max-width: 650px; margin: 12px 0; color: #575751; font-size: 14px; line-height: 1.6; }
.trust-line { display: flex; gap: 16px; flex-wrap: wrap; color: #62615c; font-size: 11px; font-weight: 700; }
.trust-line i { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: var(--green); }
.primary-action { align-self: end; display: flex; gap: 9px; align-items: center; background: var(--ink); color: #fff; text-decoration: none; padding: 15px 20px; border-radius: 9px; font-size: 13px; font-weight: 800; white-space: nowrap; }

.catalog-shell { padding: 64px 0 72px; }
.catalog-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.catalog-heading h2 { font: 800 clamp(28px, 4vw, 38px) "Plus Jakarta Sans"; letter-spacing: -.05em; margin: 0; }
.catalog-search { display: grid; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.catalog-search input { width: min(320px, 70vw); border: 1px solid #bbb7ae; background: #fff; padding: 11px 13px; border-radius: 8px; outline: none; }
.catalog-search input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgb(23 23 23 / 8%); }
.catalog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.category-filters { display: flex; gap: 8px; overflow: auto; padding: 2px 0; scrollbar-width: none; }
.category-filter { border: 1px solid #bdb9b0; background: transparent; color: #55534e; padding: 10px 16px; border-radius: 999px; font: 700 12px Manrope; white-space: nowrap; cursor: pointer; }
.category-filter:hover, .category-filter.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.currency-control { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.currency-control select { border: 1px solid #bdb9b0; border-radius: 999px; background: #fff; padding: 8px 10px; }
.products-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.product-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; transition: transform .2s, box-shadow .2s; cursor:pointer; }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgb(23 23 23 / 10%); }
.product-media { position: relative; aspect-ratio: 1.35; background: #e9e7e2; overflow: hidden; }
.product-media img { width: 100%; height: 100%; object-fit: contain; transition: transform .35s; }
.product-card:hover img { transform: scale(1.035); }
.product-badge { position: absolute; left: 12px; top: 12px; background: var(--yellow); color: #151515; border-radius: 4px; padding: 6px 8px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.product-body { min-height:100%; display:flex; flex-direction:column; padding:18px; }
.product-category { font-size: 9px; font-weight: 800; letter-spacing: .15em; color: #8b8982; text-transform: uppercase; }
.product-body h3 { min-height:45px; display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; font: 800 18px/1.25 "Plus Jakarta Sans"; letter-spacing: -.03em; margin: 7px 0; }
.product-tagline { color: #333; font-size: 12px; font-weight: 700; margin: 0 0 7px; }
.product-description { min-height: 42px; max-height: 42px; overflow: hidden; color: #66645e; font-size: 12px; line-height: 1.65; margin: 0; }
.product-bottom { margin-top:auto; padding-top:15px; border-top:1px solid #ece9e3; }
.product-price small { display: block; color: #96938d; font-size: 9px; font-weight: 700; }
.product-price strong { display: block; font: 800 17px "Plus Jakarta Sans"; }
.product-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:13px; }
.product-link, .quote-button, .wishlist-button { min-width:0; min-height:42px; display:flex; align-items:center; justify-content:center; border:1px solid #c8c4ba; background:#fff; color:var(--ink); text-decoration:none; text-align:center; white-space:nowrap; border-radius:8px; padding:9px 7px; font-size:10px; line-height:1.1; font-weight:800; cursor:pointer; }
.wishlist-button { background:#fff8d6; border-color:#e3c33d; }
.quote-button { border-color: var(--green); background: var(--green); color: #fff; }
.catalog-empty, .catalog-loading { grid-column: 1 / -1; text-align: center; padding: 55px 20px; border: 1px dashed #aaa69e; border-radius: 12px; color: #666; }
.catalog-empty { padding:0; overflow:hidden; border:1px solid #d8c76f; background:linear-gradient(135deg,#fffdf2,#fff8d6); text-align:left; }
.catalog-empty-intro { padding:28px 28px 18px; text-align:center; }
.catalog-empty-intro strong { display:block; margin-bottom:8px; color:var(--ink); font:800 clamp(22px,4vw,32px)/1.15 "Plus Jakarta Sans"; }
.catalog-empty-intro span { display:block; max-width:650px; margin:auto; line-height:1.6; }
.quick-request-form { display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:780px; margin:0 auto 28px; padding:22px; border:1px solid #e3d89c; border-radius:12px; background:#fff; box-shadow:0 12px 30px rgb(23 23 23 / 8%); }
.quick-request-form label { display:grid; gap:6px; color:#55534e; font-size:11px; font-weight:800; }
.quick-request-form .full { grid-column:1/-1; }
.quick-request-form input,.quick-request-form textarea { width:100%; min-height:46px; padding:11px 12px; border:1px solid #bbb7ae; border-radius:8px; background:#fff; color:var(--ink); }
.quick-request-form textarea { min-height:84px; resize:vertical; }
.quick-request-form button { grid-column:1/-1; min-height:50px; border:0; border-radius:9px; background:var(--green); color:#fff; font-weight:800; cursor:pointer; }
.quick-request-form button:disabled { opacity:.65; cursor:wait; }
.quick-request-feedback { grid-column:1/-1; margin:0; padding:10px 12px; border-radius:8px; background:#eef8f2; color:#0f6b45; font-size:12px; }
.quick-request-more { grid-column:1/-1; text-align:center; font-size:12px; font-weight:700; }

.service-strip { background: var(--ink); color: #fff; display: grid; grid-template-columns: repeat(3, 1fr); }
.service-strip > div { padding: 42px max(24px, calc((100vw - 1120px) / 6)); border-right: 1px solid #3a3a3a; }
.service-strip span { color: var(--yellow); font-size: 10px; }
.service-strip strong { display: block; margin: 8px 0; font: 800 18px "Plus Jakarta Sans"; }
.service-strip p { color: #999; margin: 0; font-size: 12px; line-height: 1.6; }
footer { background: #0d0d0d; color: #aaa; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 36px max(16px, calc((100vw - 1120px) / 2)); font-size: 12px; }
footer p { margin: 10px 0 0; }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-links a { color: #aaa; }

@media (max-width: 900px) {
  .header-nav { display: none; }
  .cover { height: 350px; }
  .cover::before { right: -65px; width: 430px; opacity: .58; }
  .cover-content { width: 70%; padding-left: 28px; }
  .cover-brand small { display: none; }
  .cover-proofs { gap: 10px; }
  .cover-proofs span { font-size: 9px; }
  .profile-card { grid-template-columns: auto 1fr; padding-inline: 8px; }
  .avatar { width: 105px; height: 105px; }
  .primary-action { grid-column: 1 / -1; justify-content: center; width: 100%; }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .header-whatsapp { font-size: 0; }
  .header-whatsapp span { font-size: 15px; }
  .cover { height: 338px; border-radius: 0 0 14px 14px; }
  .cover::before { right: -82px; top: 60px; width: 330px; height: 280px; opacity: .38; }
  .cover-content { width: 100%; padding: 25px 18px 22px; }
  .cover-brand img { width: 44px; height: 44px; }
  .cover-brand strong { font-size: 23px; }
  .cover p { margin: 34px 0 auto; font-size: 45px; }
  .cover-proofs { width: 100%; justify-content: space-between; gap: 3px; }
  .cover-proofs span { flex: 1 1 0; min-width: 0; grid-template-columns: 24px auto; column-gap: 5px; font-size: 7px; }
  .cover-proofs b { width: 24px; height: 24px; border-radius: 6px; font-size: 12px; }
  .cover-code { display: none; }
  .profile-card { grid-template-columns: 1fr; padding:0 12px 24px; text-align: center; }
  .avatar { width:92px;height:92px;margin: -38px auto 0;border-width:5px; }
  .profile-copy { padding-top: 0; }
  .trust-line { justify-content: center; }
  .catalog-shell{padding:38px 0 46px}.catalog-heading { align-items: start; flex-direction: column; gap:16px; }
  .catalog-search, .catalog-search input { width: 100%; }
  .catalog-toolbar { align-items: start; flex-direction: column; }
  .category-filters { width: 100%; }
  .products-grid { grid-template-columns: 1fr; gap:14px; }
  .catalog-empty-intro{padding:24px 16px 16px}.quick-request-form{grid-template-columns:1fr;margin:0 12px 18px;padding:16px}.quick-request-form .full{grid-column:auto}.quick-request-form button,.quick-request-feedback,.quick-request-more{grid-column:1}
  .product-card{border-radius:14px}.product-media{aspect-ratio:1.65}.product-body{padding:15px}.product-description{display:none}.product-bottom{align-items:stretch;flex-direction:column;margin-top:13px;padding-top:12px}.product-actions{display:grid;grid-template-columns:1fr 1fr}.product-link,.quote-button,.wishlist-button{min-height:46px;display:grid;place-items:center;text-align:center;font-size:12px}.wishlist-button{grid-column:1/-1;background:#fff8d6;border-color:#e3c33d}.product-price strong{font-size:20px}
  .category-filter{min-height:44px;padding:10px 17px}.currency-control select,.catalog-search input{min-height:46px}
  .service-strip { grid-template-columns: 1fr; }
  .service-strip > div { padding: 26px 24px; border-bottom: 1px solid #333; }
  footer { align-items: flex-start; flex-direction: column; }
}