/* Light theme + layout */
:root { --bg:#ffffff; --surface:#ffffff; --surface-2:#f8fafc; --border:#e2e8f0; --text:#0f172a; --muted:#475569; --accent:#0e7cff; }
html, body { max-width:100%; overflow-x:hidden; background:var(--bg); color:var(--text); }
* { box-sizing:border-box; } img, svg { max-width:100%; height:auto; }

.container { max-width:1200px; margin:0 auto; padding:22px 16px; }
.grid { display:grid; grid-template-columns:repeat(1,1fr); gap:16px; }
@media (min-width:640px){ .grid{ grid-template-columns:repeat(2,1fr);} }
@media (min-width:1024px){ .grid{ grid-template-columns:repeat(3,1fr);} }

.card{ background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 1px 2px rgba(15,23,42,.04); transition:transform .18s, box-shadow .18s;}
.card:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(15,23,42,.08); }
.card .thumb{ background:var(--surface-2); display:flex; align-items:center; justify-content:center; min-height:180px; border-bottom:1px solid var(--border); }
.card .thumb img{ max-height:180px; object-fit:contain; }
.card .body{ padding:16px; display:flex; flex-direction:column; gap:12px; }
.card .body h3{ margin:0; font-size:1.15rem; color:var(--text); }
.card .desc{ color:var(--muted); line-height:1.55; }

.btn{ appearance:none; border:1px solid var(--accent); color:var(--accent); background:#fff; cursor:pointer; padding:12px 16px; border-radius:12px; font-weight:700; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.btn-primary{ background:var(--accent); color:#fff; border:none; }

.hero{ padding: 28px 0 8px; background: radial-gradient(800px 240px at 50% -120px, rgba(14,124,255,.10), transparent 70%); text-align:center; }
.hero h1{ margin:0; font-size:clamp(1.6rem, 3vw, 2.4rem); }
.hero .lead{ color:var(--muted); max-width:880px; margin:10px auto 0; line-height:1.65; }
.badge{ display:inline-block; background:#0ea5e9; color:#fff; font-weight:800; padding:6px 10px; border-radius:999px; font-size:.8rem; }

.footer{ border-top:1px solid var(--border); padding:32px 16px; color:#475569; background:#fff; }

/* Topbar */
.topbar{width:100%; background:#1A3A5E; position:sticky; top:0; z-index:1100; border-bottom:1px solid rgba(0,0,0,.15);}
.topbar .wrap{max-width:1200px; margin:0 auto; padding:26px 16px 16px; text-align:center;}
.topbar .logo{height:64px; width:auto;}
.topbar .tag{margin:8px 0 0; font-size:.9rem; color:#E6EEF6;}

/* Header nav (below topbar) */
.header { background:#fff; border-bottom:1px solid var(--border); }
.header .wrap { display:flex; align-items:center; justify-content:center; gap:16px; max-width:1200px; margin:0 auto; padding:10px 16px; }

/* Product hero */
.product-hero{ display:grid; gap:22px; align-items:center; grid-template-columns:1fr; padding:20px 0 14px; }
@media (min-width:900px){ .product-hero{ grid-template-columns:1fr 1.2fr; } }
.product-hero .media{ background:var(--surface-2); border-radius:16px; padding:16px; border:1px solid var(--border); }
.product-hero img{ width:100%; height:auto; object-fit:contain; }

/* Modal */
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(15,23,42,.35); z-index:1200;}
.modal.open{display:flex;}
.modal .box{width:min(980px,92vw); max-height:88vh; overflow:auto; background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:0 20px 40px rgba(15,23,42,.22);}
.modal .box header{display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--border); color:#0f172a;}
.modal .box .content{padding:16px;}
.close{cursor:pointer; font-weight:800; opacity:.9;}

/* Mobile header/nav stack fix */
@media (max-width: 640px){
  .header .wrap{ flex-direction: column; align-items: center; justify-content: center !important; gap: 8px; flex-wrap: wrap; }
  .header nav{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
  .header nav .btn{ padding:10px 12px; border-radius:10px; }
  .product-hero .btn, .product-hero a.btn{ flex:1 1 auto; }
  .product-hero div[style*="display:flex"][style*="gap:10px"]{ flex-wrap: wrap !important; row-gap:8px; }
}