html,body{margin:0;background:#fff}

.hroI{
  --acc:#635bff; --ink:#0a2540; --body:#374151; --sub:#4b5563; --line:#e6e9ee;
  font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  background:#0d1220;padding:clamp(56px,7vw,104px) 24px;color:#fff;
}
.hroI__in{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(30px,4.5vw,64px);align-items:center}
.hroI__eyebrow{margin:0 0 16px;font-size:11.5px;font-weight:800;letter-spacing:.14em;color:#8fb8ff}
.hroI__title{margin:0;font-size:clamp(26px,3.8vw,44px);line-height:1.32;font-weight:800;letter-spacing:-.02em}
.hroI__lead{margin:20px 0 0;font-size:14.5px;line-height:2;color:rgba(255,255,255,.74)}
.hroI__btns{margin:30px 0 0;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.hroI__btn{
  display:inline-flex;align-items:center;height:50px;padding:0 26px;border-radius:99px;background:var(--acc);
  color:#fff;font-size:14.5px;font-weight:800;text-decoration:none;box-shadow:0 6px 20px -6px rgba(99,91,255,.7);
}
.hroI__note{font-size:12px;color:rgba(255,255,255,.55)}
.hroI__movie{margin:0}
.hroI__screen{
  position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(140deg,#1d2740,#121a2c 60%,#0f1524);
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 26px 60px -22px rgba(0,0,0,.9);
}
.hroI__screen::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 60% at 50% 40%, rgba(99,91,255,.28), transparent 70%);
}
.hroI__play{
  position:relative;width:66px;height:66px;border:0;border-radius:50%;background:#fff;cursor:pointer;
  box-shadow:0 8px 26px rgba(0,0,0,.45);transition:transform .16s;
}
.hroI__play::after{
  content:"";position:absolute;left:52%;top:50%;translate:-50% -50%;
  border-left:17px solid #0d1220;border-top:11px solid transparent;border-bottom:11px solid transparent;
}
.hroI__play:hover{transform:scale(1.07)}
.hroI__movie figcaption{margin-top:14px;font-size:12px;color:rgba(255,255,255,.55)}
@media (max-width:820px){ .hroI__in{grid-template-columns:1fr} .hroI__movie{order:-1} }