.metro-course-banner{direction:rtl;width:min(1800px,calc(100% - 28px));margin:18px auto 22px;padding:0 34px;min-height:210px;display:flex;align-items:center;justify-content:space-between;gap:32px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.95);border-radius:28px;background:radial-gradient(circle at 12% 50%,rgba(20,184,166,.22),transparent 25%),radial-gradient(circle at 90% 20%,rgba(37,99,235,.26),transparent 35%),linear-gradient(120deg,#f9fcff,#edf5ff);box-shadow:0 24px 70px rgba(30,64,175,.14)}
.metro-course-banner:before{content:"";position:absolute;inset:0;opacity:.22;background-image:linear-gradient(rgba(37,99,235,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.1) 1px,transparent 1px);background-size:42px 42px;pointer-events:none}
.metro-course-banner__copy{position:relative;z-index:1;display:flex;align-items:center;gap:20px}
.metro-course-banner__icon{display:grid;width:78px;height:78px;flex:0 0 78px;border:1px solid #fff;border-radius:23px;background:linear-gradient(145deg,#fff,#eaf3ff);box-shadow:0 16px 38px rgba(37,99,235,.16);place-items:center;font-size:34px}
.metro-course-banner__eyebrow{display:block;margin-bottom:6px;color:#1d4ed8;font-size:12px;font-weight:900}
.metro-course-banner h2{margin:0;color:#0f172a;font-size:clamp(27px,3vw,43px);font-weight:950;line-height:1.45;letter-spacing:-1px}
.metro-course-banner p{margin:6px 0 0;color:#5b6b82;font-size:14px;line-height:1.9}
.metro-course-banner__button{position:relative;z-index:1;display:inline-flex;min-width:180px;min-height:54px;align-items:center;justify-content:center;gap:9px;padding:0 23px;border:1px solid transparent;border-radius:15px;background:linear-gradient(135deg,#2563eb,#1d4ed8 58%,#0ea5e9);color:#fff!important;font-size:14px;font-weight:950;text-decoration:none!important;box-shadow:0 16px 35px rgba(37,99,235,.28);transition:transform .2s,box-shadow .2s}
.metro-course-banner__button:hover{transform:translateY(-3px);box-shadow:0 22px 45px rgba(37,99,235,.35)}
.metro-course-banner__button span{font-size:20px;line-height:1}
@media(max-width:700px){.metro-course-banner{width:calc(100% - 16px);min-height:auto;margin:12px auto 16px;padding:23px 18px;align-items:stretch;flex-direction:column;border-radius:21px}.metro-course-banner__copy{align-items:flex-start}.metro-course-banner__icon{width:58px;height:58px;flex-basis:58px;border-radius:17px;font-size:26px}.metro-course-banner h2{font-size:25px}.metro-course-banner p{font-size:12px}.metro-course-banner__button{width:100%;min-height:50px}}
@media(prefers-reduced-motion:reduce){.metro-course-banner__button{transition:none}}