:root{
  --mouse-bg:#f4f8fb;
  --mouse-panel:#ffffff;
  --mouse-text:#172231;
  --mouse-muted:#65748a;
  --mouse-line:#dce6ee;
  --mouse-blue:#08a9d7;
  --mouse-blue-dark:#087ca3;
  --mouse-dark:#0b1018;
  --mouse-shadow:0 20px 44px rgba(20,36,56,.12);
  --mouse-font:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--mouse-bg);
  color:var(--mouse-text);
  font-family:var(--mouse-font);
}
body.is-lightbox-open{overflow:hidden}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

.mouse-shell{
  width:min(1120px, calc(100% - 32px));
  margin:0 auto;
}

.mouse-header{
  position:sticky;
  top:0;
  z-index:40;
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px max(18px, calc((100vw - 1120px) / 2));
  background:#079fcb;
  color:#fff;
  box-shadow:0 10px 22px rgba(6,74,99,.16);
}
.mouse-brand img{width:156px;filter:brightness(0) invert(1)}
.mouse-header-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:9px 16px;
  border-radius:8px;
  background:#fff;
  color:#087ca3;
  font-weight:900;
}

.mouse-hero{
  padding:58px 0 48px;
  background:
    radial-gradient(circle at 78% 12%, rgba(8,169,215,.16), transparent 30%),
    linear-gradient(180deg, #fff 0%, #edf7fb 100%);
}
.mouse-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(360px,1.1fr);
  gap:36px;
  align-items:center;
}
.mouse-badges,.mouse-meta,.mouse-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.mouse-badges span,.mouse-meta span{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:7px 10px;
  border-radius:8px;
  background:#e8f8fc;
  color:#087ca3;
  font-weight:900;
  font-size:13px;
}
.mouse-copy h1{
  margin:18px 0 14px;
  max-width:560px;
  font-size:clamp(40px, 6vw, 76px);
  line-height:.98;
  letter-spacing:0;
}
.mouse-lead{
  max-width:590px;
  margin:0 0 20px;
  color:var(--mouse-muted);
  font-size:18px;
  line-height:1.62;
}
.mouse-actions{margin-top:24px}
.mouse-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 20px;
  border:0;
  border-radius:8px;
  font:inherit;
  font-weight:900;
  cursor:pointer;
}
.mouse-btn.primary{
  background:var(--mouse-blue);
  color:#fff;
  box-shadow:0 12px 24px rgba(8,169,215,.24);
}
.mouse-btn.secondary{
  background:#15202e;
  color:#fff;
}
.mouse-btn:disabled{opacity:.6;cursor:not-allowed}

.mouse-hero-media{
  position:relative;
}
.mouse-hero-image{
  width:100%;
  border:0;
  padding:0;
  border-radius:8px;
  overflow:hidden;
  background:#10131a;
  box-shadow:var(--mouse-shadow);
  cursor:zoom-in;
}
.mouse-price{
  position:absolute;
  right:18px;
  bottom:18px;
  display:grid;
  place-items:center;
  min-width:118px;
  min-height:76px;
  border:3px solid #ffc928;
  border-radius:8px;
  background:#0b0f16;
  color:#fff;
  font-size:42px;
  line-height:1;
  box-shadow:0 14px 28px rgba(0,0,0,.28);
}

.mouse-section{
  padding:48px 0;
  border-top:1px solid var(--mouse-line);
  background:#fff;
}
.mouse-gallery-section{background:#f8fbfd}
.mouse-section-head{
  margin-bottom:18px;
}
.mouse-section h2{
  margin:0;
  color:#087ca3;
  font-size:24px;
  letter-spacing:0;
}
.mouse-feature-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.mouse-feature-grid article,
.mouse-card-grid span{
  border:1px solid var(--mouse-line);
  border-radius:8px;
  background:#fff;
  padding:16px;
  font-weight:900;
  box-shadow:0 8px 20px rgba(20,36,56,.04);
}
.mouse-feature-grid article:nth-child(1){background:linear-gradient(135deg,#fff,#effaff)}
.mouse-gallery{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.mouse-gallery button{
  aspect-ratio:1/1;
  border:1px solid var(--mouse-line);
  border-radius:8px;
  padding:0;
  overflow:hidden;
  background:#fff;
  cursor:zoom-in;
}
.mouse-gallery img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.mouse-info-grid{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:22px;
}
.mouse-card-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:18px;
}

.mouse-sticky-order{
  position:fixed;
  left:14px;
  right:14px;
  bottom:14px;
  z-index:50;
  display:none;
  align-items:center;
  justify-content:center;
  min-height:52px;
  border-radius:8px;
  background:var(--mouse-blue);
  color:#fff;
  font-weight:950;
  box-shadow:0 16px 32px rgba(8,169,215,.34);
}

.mouse-lightbox[hidden]{display:none}
.mouse-lightbox{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:22px 70px;
  background:rgba(4,8,14,.88);
}
.mouse-lightbox img{
  max-width:min(1040px, 100%);
  max-height:86vh;
  border-radius:8px;
  cursor:zoom-in;
  transition:transform .18s ease;
}
.mouse-lightbox img.is-zoomed{
  transform:scale(1.35);
  cursor:zoom-out;
}
.mouse-lightbox-close,
.mouse-lightbox-nav{
  position:absolute;
  border:0;
  border-radius:8px;
  background:#fff;
  color:#101824;
  font-size:34px;
  cursor:pointer;
}
.mouse-lightbox-close{
  top:18px;
  right:18px;
  width:48px;
  height:48px;
}
.mouse-lightbox-nav{
  top:50%;
  width:48px;
  height:64px;
  transform:translateY(-50%);
}
.mouse-lightbox-nav.prev{left:18px}
.mouse-lightbox-nav.next{right:18px}

@media (max-width:900px){
  .mouse-hero-grid,
  .mouse-info-grid{
    grid-template-columns:1fr;
  }
  .mouse-feature-grid,
  .mouse-gallery{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .mouse-sticky-order{display:flex}
}

@media (max-width:620px){
  .mouse-header{min-height:62px}
  .mouse-brand img{width:130px}
  .mouse-hero{padding:34px 0 38px}
  .mouse-copy h1{font-size:42px}
  .mouse-lead{font-size:16px}
  .mouse-price{
    min-width:86px;
    min-height:58px;
    font-size:30px;
  }
  .mouse-feature-grid,
  .mouse-gallery,
  .mouse-card-grid{
    grid-template-columns:1fr;
  }
  .mouse-lightbox{padding:18px}
  .mouse-lightbox-nav{display:none}
}