:root{--bg:#061c27;--card:#0b2a3b;--line:#173c53;--text:#eaf2f8;--muted:#bcd3e3;--accent:#d6b85a}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
.container{max-width:1160px;margin:0 auto;padding:28px}
.header{position:sticky;top:0;background:rgba(6,28,39,.9);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);z-index:20}
.header .bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:14px 28px}
.header .title{justify-self:center}
.header .title a{font-size:1.45rem;font-weight:900;color:var(--text);text-decoration:none}
.header .title a:hover{color:var(--accent)}
.header .links{justify-self:end}.header .links a{margin-left:16px}
.hero{display:grid;grid-template-columns:0.9fr 1.1fr;gap:28px;align-items:center;padding:48px 28px 20px}
.hero .title{font-size:44px;line-height:1.1;margin:0 0 10px 0;font-weight:900}
.hero .subtitle{font-size:18px;opacity:.95;line-height:1.6}
.media{border:none;box-shadow:none;background:transparent}
.media img{width:100%;height:auto;display:block}
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;text-align:center}
.h2{font-size:24px;margin:0 0 8px 0}
.btn{display:inline-block;background:var(--accent);color:#0b0f14;padding:12px 18px;border-radius:999px;font-weight:800;box-shadow:0 6px 18px rgba(214,184,90,.25)}
.btn.alt{background:transparent;color:var(--text);border:1px solid var(--line)}
.price{font-weight:900;color:var(--accent);font-size:20px;margin:8px 0 12px}
.footer{margin-top:36px;padding:24px;background:#081a29;border-top:1px solid var(--line);color:#b7cad8;text-align:center}
.badge{display:inline-block;background:#0e3348;border:1px solid var(--line);padding:6px 10px;border-radius:999px;color:#bcd3e3;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase}

.prose h2{margin:10px 0 6px 0}.prose p{line-height:1.7}.prose ul{line-height:1.7}

/* --- Polished product image framing (no cropping) --- */
.product-img{
  background:#0e3348;
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio: 4 / 3;     /* consistent card layout */
  overflow:hidden;
}
.product-img img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;       /* no cropping */
  border-radius:10px;
  box-shadow:0 2px 10px rgba(0,0,0,.12);
}

/* v20 hero image polish */
.media{border:none;box-shadow:none;background:transparent}
.media img{width:100%;height:auto;display:block;object-fit:contain}

/* ===== Mobile polish (v20) ===== */
@media (max-width: 900px) {
  .container { padding: 18px; max-width: 100%; }
  .hero { grid-template-columns: 1fr; gap: 16px; padding: 22px 18px 8px; }
  .hero .title { font-size: clamp(26px, 6.5vw, 34px); line-height: 1.15; }
  .hero .subtitle { font-size: 16px; line-height: 1.55; }
  .grid { grid-template-columns: 1fr; gap: 16px; }
  .card { padding: 14px; border-radius: 14px; }
  .btn { width: 100%; text-align: center; padding: 14px 16px; }
}
@media (max-width: 600px) {
  .hero .title { font-size: clamp(24px, 7vw, 30px); }
  .subtitle, p, li { line-height: 1.55; }
}

/* === v21 Mobile navigation improvements === */
.mobile-menu-btn{
  display:none;
  background:transparent;
  border:1px solid var(--line);
  color:var(--text);
  padding:8px 12px;
  border-radius:999px;
  font-size:18px;
  line-height:1;
}
.header{position:sticky;top:0;background:rgba(6,28,39,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:100}
.header .bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;padding:12px 18px;gap:10px}
.header .title{justify-self:center}
.header .links a{margin-left:16px}

/* Overlay for mobile menu to prevent background taps */
@media (max-width: 900px) {
  .mobile-menu-btn{display:inline-flex;align-items:center;justify-content:center}
  .header .links{
    position:fixed;
    top:58px;
    right:14px;
    left:14px;
    display:block;
    background:#0b2a3b;
    border:1px solid var(--line);
    border-radius:14px;
    padding:8px;
    box-shadow:0 16px 40px rgba(0,0,0,.35);
  }
  .header .links a{display:block;margin:0;padding:12px 10px;border-radius:10px}
  .header .links a:hover{background:#0e3348;text-decoration:none}
  body:not(.nav-open) .header .links{display:none}

  /* Prevent content jumping under sticky header */
  .header + *{scroll-margin-top:72px}
}

/* Improve tap targets and spacing on very small screens */
@media (max-width: 600px) {
  .header .bar{padding:10px 14px}
  .header .title a{font-size:1.2rem}
}

/* Instagram footer link styling */
.footer .social {
  margin-top: 10px;
  text-align: center;
}
.footer .social a {
  color: #d6eaff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
.footer .social a:hover {
  opacity: 0.8;
}
.footer .social .icon {
  width: 20px;
  height: 20px;
  filter: invert(100%);
}