.home-marketing { padding: 32px 0 88px; }
.marketing-panel { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 40px 56px; padding: 56px; border: 1px solid #b795ce50; border-radius: 32px; color: #fff; background: radial-gradient(ellipse at 95% 0%, #8348a34d, transparent 55%), linear-gradient(135deg, #30133f, #21102e); box-shadow: 0 24px 60px -24px #35144366, inset 0 1px 0 #ffffff12; }
.marketing-panel::before { content: ""; position: absolute; z-index: -1; width: 420px; height: 420px; border: 1px solid #e2b45724; border-radius: 50%; inset-inline-end: -280px; bottom: -290px; pointer-events: none; box-shadow: 0 0 0 42px #e2b45706, 0 0 0 84px #e2b45704; }
.marketing-panel::after { content: ""; position: absolute; top: 0; inset-inline: 12%; height: 2px; background: linear-gradient(90deg, transparent, #e2b457, transparent); }
.marketing-intro, .marketing-benefits { position: relative; min-width: 0; }
.marketing-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px; padding: 8px 16px; color: #f1d396; background: #e2b4570e; border: 1px solid #e2b45730; border-radius: 999px; font-size: 13px; font-weight: 800; }
.marketing-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #e2b457; box-shadow: 0 0 0 4px #e2b45714; }
.marketing-intro h2 { margin: 0 0 22px; color: #fff; font-size: clamp(30px, 3.3vw, 44px); line-height: 1.55; font-weight: 900; text-wrap: balance; }
.marketing-intro h2 span { color: #edcc8d; }
.marketing-intro > p { max-width: 490px; margin: 0; color: #d4c6de; font-size: 16px; line-height: 2; }
.marketing-benefits { display: flex; flex-direction: column; gap: 12px; }
.marketing-benefit { display: flex; align-items: center; gap: 18px; padding: 22px; border: 1px solid #ffffff13; border-radius: 18px; background: linear-gradient(120deg, #ffffff09, #ffffff03); box-shadow: inset 0 1px 0 #ffffff06; transition: border-color .2s ease, background .2s ease; }
.marketing-benefit:hover { border-color: #e2b45750; background: #ffffff0b; }
.marketing-icon { display: grid; place-items: center; flex: 0 0 56px; height: 56px; border-radius: 16px; background: #f8f2e8; box-shadow: 0 6px 18px #00000018; }
.marketing-icon img { width: 34px; height: 34px; object-fit: contain; }
.marketing-benefit h3 { margin: 0 0 5px; color: #fff; font-size: 17px; font-weight: 800; }
.marketing-benefit p { margin: 0; color: #cdbfd7; font-size: 13px; line-height: 1.9; }
.marketing-teachers { align-self: flex-end; color: #edcc8d; padding: 6px 4px; font-size: 13px; font-weight: 700; }
.marketing-bottom { position: relative; grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 28px 24px; border: 1px solid #ffffff12; border-radius: 20px; background: #14092030; }
.marketing-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; width: 100%; }
.marketing-actions .btn { min-width: 210px; min-height: 54px; padding: 14px 28px; justify-content: center; border-radius: 12px; font-size: 15px; font-weight: 800; transition: background .2s ease, box-shadow .2s ease; }
.marketing-primary { gap: 24px; color: #30133f; background: linear-gradient(135deg, #f0d28e, #d8a743); border: 1px solid #edcc8d; box-shadow: 0 8px 24px #d8a74318; }
.marketing-primary:hover { background: #f4dca5; box-shadow: 0 8px 28px #d8a74330; }
.marketing-secondary { color: #fff; border: 1px solid #ffffff35; background: #ffffff06; }
.marketing-secondary:hover { background: #ffffff12; }
.marketing-help { color: #cdbfd7; font-size: 13px; text-align: center; text-decoration: underline; text-underline-offset: 5px; }
.home-marketing a:focus-visible { outline: 3px solid #f1d396; outline-offset: 5px; }
@media (max-width: 1000px) { .marketing-panel { gap: 32px; padding: 36px; } }
@media (max-width: 760px) { .home-marketing { padding: 20px 0 56px; } .marketing-panel { grid-template-columns: 1fr; gap: 28px; padding: 32px 24px 24px; border-radius: 24px; } .marketing-intro { text-align: center; } .marketing-intro > p { margin-inline: auto; font-size: 15px; } .marketing-intro h2 { font-size: 32px; } .marketing-benefit { padding: 18px; gap: 14px; } .marketing-bottom { padding: 24px 18px; } .marketing-actions .btn { min-width: 0; flex: 1; } }
@media (max-width: 420px) { .marketing-panel { padding: 28px 18px 18px; } .marketing-intro h2 { font-size: 27px; } .marketing-actions { flex-direction: column; gap: 12px; } .marketing-actions .btn { width: 100%; } .marketing-icon { flex-basis: 46px; height: 46px; border-radius: 13px; } .marketing-icon img { width: 30px; height: 30px; } .marketing-benefit { padding: 16px 12px; } }
@media (prefers-reduced-motion: reduce) { .marketing-benefit, .marketing-actions .btn { transition: none; } }