@font-face { font-family: "DM Sans"; src: url("assets/dm-sans-700.ttf") format("truetype"); font-weight: 700; }
@font-face { font-family: "DM Sans"; src: url("assets/dm-sans-800.ttf") format("truetype"); font-weight: 800; }
:root { font-family: "DM Sans", sans-serif; color: #f7f8fb; background: #09131e; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
.page-header { padding: 42px clamp(20px,5vw,72px) 36px; border-bottom: 1px solid #26384b; }
.eyebrow { margin: 0 0 11px; color: #e12f12; font-size: 12px; letter-spacing: .14em; }
h1 { margin: 0; font-size: clamp(25px,3vw,40px); }
.page-header p:last-child { color: #bbc7d5; font-size: 15px; line-height: 1.5; max-width: 800px; margin: 10px 0 0; }
main { width: min(1480px,calc(100% - 40px)); margin: 36px auto 80px; display: grid; gap: 42px; }
article { padding-bottom: 36px; border-bottom: 1px solid #26384b; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
.section-head h2 { font-size: 22px; margin: 0; }
.section-head button { border: 0; border-radius: 30px; padding: 11px 18px; background: #e12f12; color: white; font: 700 13px "DM Sans", sans-serif; cursor: pointer; }
.section-head button:disabled { opacity: .65; }
.previews { display: grid; grid-template-columns: minmax(0,1fr) 325px; gap: 24px; align-items: start; }
.cover-shell { position: relative; width: 100%; aspect-ratio: 1672/941; overflow: hidden; border-radius: 10px; background: #08131d; }
.cover { position: absolute; top: 0; left: 0; width: 1672px; height: 941px; overflow: hidden; transform-origin: top left; }
.background,.shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.background { object-fit: cover; }
.shade {
  background: linear-gradient(90deg,#08131d 0%,#235683 100%);
  -webkit-mask-image: linear-gradient(90deg,#000 0%,#000 48%,rgba(0,0,0,.75) 60%,rgba(0,0,0,.35) 76%,transparent 96%);
  mask-image: linear-gradient(90deg,#000 0%,#000 48%,rgba(0,0,0,.75) 60%,rgba(0,0,0,.35) 76%,transparent 96%);
}
.logo { position: absolute; width: 274px; top: 53px; right: 50px; }
.program { position: absolute; top: 215px; left: 80px; color: white; font-size: 52px; font-weight: 700; letter-spacing: .025em; line-height: 1.16; }
.rule { position: absolute; top: 385px; left: 80px; width: 78px; height: 11px; background: #e12f12; }
.module { position: absolute; top: 425px; left: 80px; color: #e12f12; font-size: 67px; font-weight: 700; letter-spacing: .035em; line-height: 1; }
.title { position: absolute; top: 515px; left: 80px; color: white; font-weight: 800; letter-spacing: -.057em; line-height: .99; white-space: nowrap; }
.platform-card { overflow: hidden; border-radius: 12px; background: #f7fbff; color: #17202b; border: 1px solid #d7e0eb; }
.platform-card .cover-shell { border-radius: 0; }
.badge { position: absolute; z-index: 3; top: 10px; left: 10px; padding: 4px 9px; border-radius: 20px; background: rgba(0,0,0,.73); color: white; font-size: 10px; font-weight: 700; line-height: 1.2; }
.card-info { min-height: 87px; padding: 14px; display: grid; align-content: start; gap: 5px; font-size: 14px; }
.card-info span { color: #596979; font-size: 12px; }
#toast { position: fixed; bottom: 22px; right: 22px; opacity: 0; padding: 13px 18px; border-radius: 10px; background: #203550; transition: opacity .2s; }
#toast.show { opacity: 1; }
@media (max-width: 900px) { .previews { grid-template-columns: 1fr; } .platform-card { width: 325px; max-width: 100%; } }
@media (max-width: 520px) { .section-head { align-items: flex-start; flex-direction: column; } }