*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
 margin:0;
 font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 background:#06153d;
 color:#fff;
 min-height:100vh;
}

.page-bg{
 min-height:100vh;
 background:
 radial-gradient(circle at 15% 15%,rgba(25,115,255,.22),transparent 28%),
 radial-gradient(circle at 85% 80%,rgba(0,174,255,.16),transparent 28%),
 linear-gradient(160deg,#020b25 0%,#061b4c 52%,#04102f 100%);
}

.wrap{
 width:min(100% - 28px,1100px);
 margin:auto;
 padding:28px 0 42px;
}

.brand{text-align:center}

.logo{
 width:150px;
 height:150px;
 border-radius:50%;
 object-fit:contain;
 background:#fff;
 border:4px solid #2991ff;
 box-shadow:0 0 28px rgba(38,135,255,.42);
}

h1{
 font-size:clamp(2rem,5vw,3.5rem);
 margin:16px 0 5px;
}

.tagline{
 color:#bcd2f6;
 margin:0 0 22px;
}

.nav{
 display:flex;
 flex-wrap:wrap;
 justify-content:center;
 gap:9px;
 margin:20px 0 28px;
}

.nav a,.btn{
 color:#fff;
 text-decoration:none;
 border:1px solid rgba(62,151,255,.42);
 background:rgba(10,38,88,.72);
 padding:10px 15px;
 border-radius:999px;
 transition:.2s;
}

.nav a:hover,.btn:hover{
 transform:translateY(-2px);
 border-color:#39a0ff;
 background:#0d4caa;
}

.hero{
 text-align:center;
 padding:24px 0;
}

.hero h2{
 font-size:clamp(1.5rem,4vw,2.4rem);
 margin:0 0 10px;
}

.hero p{
 color:#bdd0ee;
 max-width:720px;
 margin:0 auto 18px;
 line-height:1.65;
}

.links{
 display:grid;
 gap:13px;
 max-width:760px;
 margin:28px auto;
}

.link-card{
 display:flex;
 align-items:center;
 gap:16px;
 text-decoration:none;
 color:#081a3e;
 background:#fff;
 border-radius:18px;
 padding:17px 20px;
 box-shadow:0 8px 24px rgba(0,0,0,.22);
 border:1px solid #d9e5f5;
 transition:.2s;
}

.link-card:hover{
 transform:translateY(-3px);
 box-shadow:0 12px 28px rgba(0,0,0,.28);
}

.icon{
 width:38px;
 height:38px;
 object-fit:contain;
 flex:0 0 38px;
}

.link-card strong{
 display:block;
 font-size:1.08rem;
}

.link-card small{
 display:block;
 color:#64748b;
 margin-top:3px;
}

.arrow{
 margin-left:auto;
 font-size:1.4rem;
 color:#1683ff;
}

.notice{
 max-width:760px;
 margin:22px auto;
 padding:14px 16px;
 border:1px solid #2e9aff;
 border-radius:14px;
 background:rgba(13,66,145,.42);
 color:#dceaff;
 text-align:center;
}

.section{
 background:rgba(255,255,255,.97);
 color:#0b1c3e;
 border-radius:22px;
 padding:25px;
 box-shadow:0 12px 35px rgba(0,0,0,.25);
 margin-top:22px;
}

.section h2{margin-top:0}

.section p,.section li{
 line-height:1.7;
 color:#42526d;
}

.grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
 gap:18px;
}

.product{
 background:#fff;
 border:1px solid #dbe5f1;
 border-radius:18px;
 overflow:visible;
 color:#0b1c3e;
 box-shadow:0 8px 20px rgba(0,0,0,.12);
 transition:transform .2s,box-shadow .2s;
 position:relative;
}

.product:hover{
 transform:translateY(-4px);
 box-shadow:0 14px 30px rgba(0,0,0,.18);
}

.product-media{
 height:220px;
 background:#eef4fb;
 border-radius:18px 18px 0 0;
 display:flex;
 align-items:center;
 justify-content:center;
 overflow:hidden;
}

.product-media img{
 width:100%;
 height:100%;
 object-fit:contain;
 transition:transform .25s;
}

.product:hover .product-media img{
 transform:scale(1.03);
}

.product-body{
 padding:15px;
}

.product-body h3{
 font-size:1rem;
 line-height:1.45;
 margin:0 0 13px;
 min-height:46px;
}

.product-actions{
 display:flex;
 align-items:center;
 gap:8px;
 flex-wrap:wrap;
}

.product-body a{
 display:inline-block;
 background:#0c62d6;
 color:#fff;
 text-decoration:none;
 padding:9px 13px;
 border-radius:10px;
 font-size:.9rem;
 transition:.2s;
}

.product-body a:hover{
 background:#084fae;
 transform:translateY(-1px);
}

.share-product{
 border:1px solid #cbd5e1;
 background:#f1f5f9;
 color:#0b1c3e;
 padding:9px 13px;
 border-radius:10px;
 font-size:.9rem;
 cursor:pointer;
 transition:.2s;
}

.share-product:hover{
 background:#e2e8f0;
 border-color:#94a3b8;
 transform:translateY(-1px);
}

.share-menu{
 z-index:9999;
 width:220px;
 max-width:calc(100vw - 20px);
 padding:8px;
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:6px;
 background:#fff;
 border:1px solid #dbe5f1;
 border-radius:14px;
 box-shadow:0 16px 40px rgba(0,0,0,.28);
}

.share-menu button{
 border:1px solid #e2e8f0;
 background:#f8fafc;
 color:#0b1c3e;
 padding:9px 7px;
 border-radius:9px;
 font-size:.82rem;
 cursor:pointer;
 transition:.15s;
}

.share-menu button:hover{
 background:#e8f1ff;
 border-color:#7db5ff;
 transform:translateY(-1px);
}

.category-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
 gap:12px;
}

.category{
 display:block;
 text-decoration:none;
 color:#0b1c3e;
 background:#fff;
 border-radius:16px;
 padding:18px;
 border:1px solid #dbe5f1;
 font-weight:700;
 transition:.2s;
}

.category:hover{
 transform:translateY(-2px);
 box-shadow:0 8px 20px rgba(0,0,0,.12);
}

.category span{
 display:block;
 font-weight:400;
 color:#66758c;
 margin-top:5px;
 font-size:.85rem;
}

footer{
 text-align:center;
 color:#8ea6cb;
 font-size:.8rem;
 padding:28px 0 5px;
}

@media(max-width:560px){

 .wrap{
  padding-top:18px;
 }

 .logo{
  width:126px;
  height:126px;
 }

 .section{
  padding:18px;
 }

 .link-card{
  padding:14px;
 }

 .grid{
  grid-template-columns:1fr;
  gap:15px;
 }

 .product-media{
  height:240px;
 }

 .product-body h3{
  min-height:auto;
 }

 .product-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
 }

 .product-body a,
 .share-product{
  width:100%;
  text-align:center;
 }

 .share-menu{
  width:210px;
 }
}
.product-detail{max-width:1000px}.product-detail-grid{display:grid;grid-template-columns:minmax(280px,1fr) minmax(280px,1fr);gap:28px;align-items:center}.product-detail-media{background:#eef4fb;border-radius:20px;min-height:420px;display:flex;align-items:center;justify-content:center;overflow:hidden}.product-detail-media img{width:100%;height:420px;object-fit:contain}.eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;font-weight:800;color:#0c62d6}.product-detail h1{font-size:clamp(1.8rem,4vw,3rem);color:#0b1c3e}.product-detail a:not(.btn){color:#0c62d6}@media(max-width:760px){.product-detail-grid{grid-template-columns:1fr}.product-detail-media,.product-detail-media img{min-height:280px;height:280px}}