*{box-sizing:border-box;margin:0;padding:0}
html{background:#070908}
body{font-family:Arial,Helvetica,sans-serif;background:radial-gradient(circle at top,#151a17 0,#090b0a 38%,#050606 100%);color:#f4f6f5;min-height:100vh;line-height:1.5}
.page-wrap{width:1020px;max-width:calc(100% - 28px);margin:0 auto;background:#0d100e;min-height:100vh;padding:20px 18px 34px;box-shadow:0 0 50px rgba(0,0,0,.45)}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:16px;border-bottom:1px solid #222824;margin-bottom:18px}
.brand{font-size:25px;font-weight:900;color:#18cf70;line-height:1.2;overflow-wrap:anywhere}
.template-name{font-size:12px;font-weight:800;color:#d8e0db;background:#1b211d;border:1px solid #2b342e;border-radius:999px;padding:7px 11px;white-space:nowrap}
.hero-card{margin-bottom:32px}
.hero-media{display:block;position:relative;border-radius:16px;overflow:hidden;background:#151a17;border:1px solid #283029}
.hero-thumb,.thumb-wrap{position:relative;background:#151a17;overflow:hidden}
.hero-thumb{aspect-ratio:16/9}
.hero-media img,.product-card img{width:100%;height:100%;display:block;object-fit:cover}
.featured-badge{position:absolute;left:14px;bottom:14px;background:rgba(8,11,9,.88);color:#fff;border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:8px 12px;font-size:12px;font-weight:900;backdrop-filter:blur(8px)}
.main-title{font-size:27px;line-height:1.2;margin:18px 0 8px;font-weight:900;color:#fff}
.intro{font-size:15px;color:#b9c2bc;max-width:720px}
.recommended h2{font-size:21px;margin-bottom:15px;color:#fff}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.product-card{background:#141815;border-radius:14px;overflow:hidden;color:#f3f5f4;border:1px solid #29312b;box-shadow:0 8px 22px rgba(0,0,0,.16)}
.thumb-wrap{aspect-ratio:16/9}
.card-body{padding:12px 12px 14px}
.card-body h3{font-size:15px;line-height:1.3;margin-bottom:6px;font-weight:900;color:#fff}
.card-body p{font-size:12px;line-height:1.5;color:#aeb8b1}
footer{text-align:center;margin-top:34px;padding-top:22px;border-top:1px solid #222824;font-size:12px;color:#829087;line-height:1.9}
footer a{color:#aebbb3;text-decoration:none}
footer span{padding:0 6px;color:#445047}
@media(max-width:699px){
  .page-wrap{width:100%;max-width:100%;padding:14px 12px 26px}
  .brand{font-size:21px}
  .template-name{font-size:10px;padding:6px 9px}
  .main-title{font-size:22px}
  .intro{font-size:14px}
  .grid{grid-template-columns:1fr 1fr;gap:9px}
  .card-body{padding:9px 9px 11px}
  .card-body h3{font-size:13px}
  .card-body p{font-size:11px}
}
@media(max-width:390px){.grid{grid-template-columns:1fr}}
@media(min-width:700px){body{padding:26px 0}.page-wrap{border-radius:20px;min-height:calc(100vh - 52px)}}