.btn-main{background:#8f6bff;color:#0a0616;border-color:#8f6bff}
.btn-main:hover{background:#a488ff;transform:translateY(-1px)}
.btn-tg{background:#229ED9;color:#fff;border-color:#229ED9}
.btn-tg:hover{background:#2AABEE;transform:translateY(-1px)}
.btn-tg svg{fill:#fff}
.btn-ghost:hover{border-color:#8f6bff;transform:translateY(-1px)}
.nav ul li.m-only{display:none}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:44px;align-items:center}
.hero-art{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#e9e7e4;box-shadow:var(--sh)}
.hero-art img{width:100%;height:auto;display:block}
.hero-cta{display:grid;grid-template-columns:auto auto;gap:13px;justify-content:start}
.hero-install{grid-column:1/-1;width:100%}
/* blog */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.post{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);display:flex;flex-direction:column;transition:transform .16s,border-color .2s}
.post:hover{transform:translateY(-3px);border-color:var(--line-2)}
.post .post-art{width:100%;height:auto;aspect-ratio:16/9;display:block;border-bottom:1px solid var(--line)}
.post .in{padding:22px;display:flex;flex-direction:column;flex:1}
.post .date{font-size:14px;color:var(--txt-3);margin-bottom:9px}
.post h3{font-size:17px;line-height:1.35;margin-bottom:10px}
.post p{font-size:15px;color:var(--txt-3);margin-bottom:16px}
.post .more{margin-top:auto;font-size:15px;font-weight:700;color:var(--accent);display:inline-flex;align-items:center;gap:7px}
.post .more svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4}
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .bento{grid-template-columns:repeat(2,1fr)}
    .rate,.pc,.price-wrap,.g3,.g2,.posts{grid-template-columns:1fr}
}
@media(max-width:768px){
  .nav ul,.nav .btn{display:none}
  .nav ul.open{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;background:var(--bg-2);border-bottom:1px solid var(--line);padding:14px 22px;gap:2px}
  .nav ul.open a{padding:12px 0;font-size:16px}
  .nav ul.open li.m-only{display:block;margin-top:8px}
  .nav ul.open li.m-only:first-of-type{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
  .nav ul.open li.m-only a{display:inline-flex;width:100%;padding:14px 18px;font-size:15px;font-weight:700}
  .nav ul.open li.m-only a.btn-main{color:#0a0616}
  .nav ul.open li.m-only a.btn-tg{color:#fff}
  .burger{display:flex}
  .sec{padding:56px 0}
  .band{padding:34px 22px}
  .gstep{flex-direction:column;gap:14px}
}
@media(max-width:560px){
  .hero-cta{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr}
  }