*{box-sizing:border-box}
body{margin:0;background:#050505;color:#fff;font-family:Arial,'Noto Sans JP',sans-serif}
header{display:flex;justify-content:space-between;align-items:center;padding:20px 5%;border-bottom:1px solid #333}
.logo{font-weight:bold;letter-spacing:3px}.logo span{color:#e00000;font-size:12px}
nav{color:#ccc}
.cta,.button{display:inline-block;background:#e00000;color:white;padding:15px 28px;text-decoration:none;border-radius:4px;margin:8px}
.hero{min-height:700px;padding:100px 8%;background:linear-gradient(90deg,#050505,#160000)}
h1{font-size:clamp(38px,5vw,72px);line-height:1.2}
strong{color:#e00000}
section{padding:70px 8%}
h2{text-align:center;font-size:36px}
.cards{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
.cards div{border:1px solid #444;padding:30px;min-width:220px;background:#111}
.dark{background:#0d0d0d}
.outline{background:transparent;border:1px solid #fff}
@media(max-width:700px){nav{display:none}.hero{padding:60px 5%}.cards div{width:100%}}