:root{
  --h: 130;
  --c-brand: hsl(var(--h) 42% 32%);
  --c-brand-dark: hsl(var(--h) 40% 20%);
  --c-brand-light: hsl(var(--h) 38% 92%);
  --c-accent: hsl(calc(var(--h) - 20) 50% 40%);
  --c-text: hsl(var(--h) 10% 18%);
  --c-sub: hsl(var(--h) 8% 40%);
  --c-line: hsl(var(--h) 15% 84%);
  --c-bg: hsl(var(--h) 18% 98%);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Malgun Gothic",sans-serif;
  color:var(--c-text);
  background:var(--c-bg);
  line-height:1.7;
}
.wrap{max-width:837px;margin-inline:auto;padding-inline:20px;}
a{color:inherit;text-decoration:none;}

/* V5: thin top band */
.top-band{
  background:var(--c-brand-dark);
  color:#fff;
  font-size:.82rem;
  text-align:center;
  padding:7px 12px;
}

/* Header H2: center logo, nav split left/right */
.site-header{
  background:#fff;
  border-bottom:1px solid var(--c-line);
}
.head-inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding-block:16px;
}
.nav-left{justify-self:start;}
.nav-left a{font-size:.94rem;color:var(--c-sub);}
.nav-left a:hover{color:var(--c-brand);}
.logo{
  font-weight:700;
  font-size:1.2rem;
  color:var(--c-brand-dark);
  justify-self:center;
}
.nav-right{display:flex;gap:18px;justify-self:end;}
.nav-right a{font-size:.94rem;color:var(--c-sub);}
.nav-right a:hover{color:var(--c-brand);}

/* Hero: plain centered-left hero below band */
.hero{
  padding-block:52px;
  background:var(--c-brand-light);
}
.hero h1{
  font-size:2rem;
  margin:0 0 16px;
  color:var(--c-brand-dark);
}
.hero .lead{
  max-width:640px;
  font-size:1rem;
  color:var(--c-sub);
  margin:0;
}

main{padding-block:48px;}
.blk{margin-bottom:34px;}
.blk h2{
  font-size:1.22rem;
  color:var(--c-brand-dark);
  margin:0 0 12px;
}
.pcs p{margin:0 0 8px;color:var(--c-text);font-size:.98rem;}
.pcs p:last-child{margin-bottom:0;}
.pcs strong{color:var(--c-accent);}

.faq h2{color:var(--c-accent);}
.faq-item{
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:10px;
  padding:18px 20px;
  margin-bottom:12px;
}
.faq-item h3{
  font-size:1rem;
  margin:0 0 6px;
  color:var(--c-brand-dark);
}
.faq-item p{margin:0;color:var(--c-sub);font-size:.94rem;}

.ph{margin:0 0 48px;}
.ph-row{display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-start;gap:16px;max-width:900px;margin-inline:auto;}
.ph-row img{flex:1 1 0;min-width:0;width:100%;height:auto;display:block;border-radius:8px;}
@media (max-width:600px){.ph-row{gap:10px;}}

/* CTA C4: left text / right button band */
.cta{
  background:var(--c-brand);
  padding-block:36px;
}
.cta-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
.cta-text{
  margin:0;
  color:#fff;
  font-size:1.05rem;
}
.cta-btn{
  display:inline-block;
  background:#fff;
  color:var(--c-brand-dark);
  font-weight:700;
  padding:12px 28px;
  border-radius:8px;
  white-space:nowrap;
}
.cta-btn:hover{background:var(--c-brand-light);}

/* Footer F2: bordered box */
footer{padding:14px 20px;}
footer .wrap{
  border:1px solid var(--c-line);
  border-radius:12px;
  padding:22px 24px;
  background:#fff;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:6px 20px;
}
footer p{
  margin:0;
  font-size:.86rem;
  color:var(--c-sub);
}

@media (max-width:1024px){
  .wrap{padding-inline:18px;}
}
@media (max-width:768px){
  .hero h1{font-size:1.7rem;}
  .head-inner{grid-template-columns:auto 1fr auto;}
}
@media (max-width:480px){
  .head-inner{grid-template-columns:1fr;justify-items:center;gap:8px;}
  .nav-left{justify-self:center;}
  .nav-right{justify-self:center;}
  .cta-inner{flex-direction:column;align-items:flex-start;}
}