.home { padding-top: clamp(20px, 4vh, 44px); }
.bento {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(150px, auto);
}
.tile {
  position: relative; overflow: hidden; text-decoration: none;
  background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow);
  padding: clamp(20px, 2.4vw, 32px);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s;
}
a.tile:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(14, 27, 62, .05), 0 22px 44px -20px rgba(14, 27, 62, .35); }
.tile .en { margin: 0 0 4px; font-size: 14px; color: var(--sky); }
.tile h2 { margin: 0; font-size: var(--t-h3); line-height: 1.5; letter-spacing: .05em; }
.tile .small { margin: 8px 0 0; font-size: var(--t-small); color: var(--muted); line-height: 1.8; }

/* 理念 */
.hero {
  grid-column: span 8; grid-row: span 2; min-height: clamp(320px, 46vh, 460px);
  background: radial-gradient(120% 90% at 100% 0%, #1f4f9c 0%, var(--navy-2) 45%, var(--navy) 100%);
  color: #fff; display: flex; align-items: flex-end;
}
.hero .flow { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.flow path { stroke-width: 1.6; stroke-dasharray: 6 14; animation: flow 14s linear infinite; }
.flow .f1 { stroke: rgba(42, 178, 232, .55); }
.flow .f2 { stroke: rgba(42, 178, 232, .28); animation-duration: 19s; }
.flow .f3 { stroke: rgba(255, 255, 255, .18); animation-duration: 24s; }
@keyframes flow { to { stroke-dashoffset: -400; } }
.hero-sym {
  position: absolute; right: clamp(-60px, -3vw, -20px); top: clamp(-60px, -4vw, -24px);
  width: clamp(220px, 30vw, 380px); opacity: .1; animation: spin 90s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.hero-body { position: relative; }
.hero .en { color: var(--sky); }
.hero-copy { margin: 4px 0 26px; font-size: clamp(26px, 2.6vw + 12px, 46px); line-height: 1.5; font-weight: 700; letter-spacing: .06em; }
.btn.light { color: #fff; }
.btn.light:hover { background: rgba(255, 255, 255, .1); }

/* 確認リスト */
.check { grid-column: span 4; background: linear-gradient(160deg, #fff 40%, var(--sky-soft)); }
.meter { height: 10px; border-radius: 99px; background: var(--line); margin: 22px 0 10px; overflow: hidden; }
.meter span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--sky), var(--blue)); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.meter-num { margin: 0; color: var(--muted); font-size: 14px; }
.meter-num b { font: 700 34px/1 var(--en); color: var(--ink); letter-spacing: .02em; }

/* 検索 */
.search { grid-column: span 4; }
.sbox { display: flex; margin-top: 16px; background: var(--bg); border-radius: 999px; padding: 4px; border: 1px solid transparent; transition: border-color .2s, background .2s; }
.sbox:focus-within { background: #fff; border-color: var(--blue); }
.sbox input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 16px; padding: 8px 14px; }
.sbox button { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--blue); color: #fff; display: grid; place-items: center; cursor: pointer; }
.sbox button svg { width: 19px; }

/* AI */
.ai { grid-column: span 5; display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); background: linear-gradient(135deg, #eaf4fc, #fff 70%); }
.ai img { width: clamp(96px, 10vw, 140px); flex: none; animation: bob 5s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px); } }

/* 道具 */
.tool { grid-column: span 3; }
.tool-vis { height: 70px; position: relative; margin-bottom: 14px; }
.tool-vis .pipe { position: absolute; left: 0; right: 0; top: 26px; height: 18px; border-radius: 9px; background: linear-gradient(180deg, #e9a77a, #b8673c 60%, #8f4b28); }
.tool-vis .ring { position: absolute; left: 50%; top: 6px; width: 58px; height: 58px; margin-left: -29px; border-radius: 50%; border: 7px solid var(--blue); border-right-color: transparent; animation: spin 3.2s linear infinite; }

/* 3つのき */
.three { grid-column: span 4; grid-row: span 2; }
.three ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.three li { font-size: 14px; line-height: 1.75; color: var(--muted); padding-left: 64px; position: relative; min-height: 44px; }
.k { position: absolute; left: 0; top: 0; width: 50px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 15px; color: #fff; letter-spacing: .04em; }
.k1 { background: #d9544a; } .k2 { background: #3d9a5f; } .k3 { background: var(--sky); }

.company { grid-column: span 4; }
.soon { grid-column: span 4; background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.soon .en { color: var(--muted); }
.soon .chip { margin-top: 12px; }

@media (max-width: 1080px) {
  .hero { grid-column: span 12; grid-row: auto; }
  .check, .search { grid-column: span 6; }
  .ai { grid-column: span 7; } .tool { grid-column: span 5; }
  .three { grid-column: span 12; grid-row: auto; }
  .company, .soon { grid-column: span 6; }
}
@media (max-width: 640px) {
  .bento > * { grid-column: span 12 !important; }
  .hero { min-height: 340px; }
  .ai img { width: 88px; }
}