.video-section { background: #eef3f9; }
.release-note { margin-bottom: 24px; padding: 16px 19px; display: flex; align-items: center; gap: 12px; border: 1px solid #bdd8f3; border-radius: 14px; color: #23476d; background: #f3f9ff; font-size: 11px; }.release-note i { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; color: #fff; background: var(--blue-600); font-style: normal; font-weight: 900; }
.video-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 25px; align-items: start; }
.video-frame { position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(6,20,36,.72), rgba(10,79,158,.43)), url("../../images/main-board.png") center/cover; box-shadow: var(--shadow-lg); }.video-frame::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, transparent, rgba(3,13,25,.35)); }.play-button { position: absolute; z-index: 2; left: 50%; top: 50%; width: 86px; height: 86px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; color: var(--navy-900); background: rgba(255,255,255,.94); box-shadow: 0 15px 40px rgba(0,0,0,.25); transform: translate(-50%,-50%); cursor: pointer; transition: transform .2s; }.play-button:hover { transform: translate(-50%,-50%) scale(1.06); }.play-button::after { content: ""; margin-left: 5px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 16px solid var(--blue-600); }.video-note { position: absolute; z-index: 2; left: 25px; bottom: 23px; color: #fff; }.video-note strong, .video-note small { display: block; }.video-note small { margin-top: 4px; color: #c3d3e4; font-size: 9px; }
.steps-panel { padding: 26px; border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm); }.instruction-step { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }.instruction-step:last-child { border-bottom: 0; }.instruction-step > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--blue-600); background: var(--sky-100); font-size: 10px; font-weight: 900; }.instruction-step h3 { margin: 1px 0 5px; font-size: 13px; }.instruction-step p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.video-modal { position: fixed; z-index: 500; inset: 0; padding: 20px; display: none; place-items: center; background: rgba(4,14,27,.9); backdrop-filter: blur(12px); }.video-modal.is-open { display: grid; }.video-modal-card { width: min(850px,100%); padding: 30px; position: relative; border-radius: var(--radius-md); color: #fff; background: var(--navy-900); }.video-modal-card button { position: absolute; right: 16px; top: 14px; border: 0; color: #fff; background: transparent; font-size: 25px; cursor: pointer; }.video-placeholder { aspect-ratio: 16/9; display: grid; place-items: center; margin-top: 26px; border: 1px dashed rgba(255,255,255,.2); border-radius: 16px; color: #8ca3ba; background: #07172a; text-align: center; }
@media (max-width: 850px) { .video-layout { grid-template-columns: 1fr; } }
@media (max-width: 500px) { .play-button { width: 68px; height: 68px; }.video-note { display: none; } }