.hero { max-width:900px; margin:0 auto; padding:28px 16px 8px; display:flex; align-items:center; gap:18px; }
.hero h1 { font-size:34px; margin:0; } .hero p { margin:6px 0 0; font-size:17px; }
.hero .motto { font-family:'Comfortaa', sans-serif; font-weight:700; color:var(--red); }
.idx { max-width:900px; margin:0 auto; padding:0 16px 40px; }
.idx h2 { font-size:20px; margin:26px 0 10px; }
.tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; }
.tile { display:flex; gap:12px; align-items:center; background:#fff; border-radius:16px; padding:12px 14px; text-decoration:none; color:var(--ink);
  box-shadow:0 2px 8px rgba(0,0,0,.1); border:3px solid transparent; }
.tile:hover { border-color:var(--blue); }
.tile img { flex:none; width:64px; height:auto; }
.tile b { display:block; font-family:'Comfortaa', sans-serif; font-size:17px; color:var(--blue); }
.tile span { display:block; font-size:14px; color:#666; line-height:1.35; }
.tile .num { flex:none; width:48px; height:48px; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:'Comfortaa', sans-serif; font-weight:700; font-size:22px; }
.idx .how { background:#fff; border-radius:16px; padding:14px 18px; font-size:15px; box-shadow:0 2px 8px rgba(0,0,0,.08); }
@media (max-width: 600px) { .hero { padding-top:18px; } .hero h1 { font-size:26px; } .hero img { width:72px; height:auto; } }