/* ===================================================
   WorkNest - Reusable CTA band, light + orange (includes/sections/cta-course.php)
   =================================================== */
.cta-course { --c-plum: var(--color-plum-dark, #161a39); --c-rose: var(--color-rose-accent, #ea580c); --c-muted: var(--text-muted, #596379); --c-ease: cubic-bezier(.16, 1, .3, 1);
  position: relative; overflow: hidden; padding: 90px 0; background: linear-gradient(135deg, #ffffff 0%, #fffaf5 55%, #fff1e6 100%); }
.cta-course::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .6; background-image: radial-gradient(rgba(234, 88, 12, .22) 1.5px, transparent 1.5px); background-size: 26px 26px; animation: ctaDots 7s linear infinite; -webkit-mask-image: radial-gradient(circle at 80% 40%, #000, transparent 65%); mask-image: radial-gradient(circle at 80% 40%, #000, transparent 65%); }
.cta-course .container { width: 100%; }
.cta-ring { position: absolute; border: 2px solid rgba(234, 88, 12, .22); border-radius: 50%; animation: ctaSpin 18s linear infinite; pointer-events: none; }
.cta-ring.r1 { width: 340px; height: 340px; top: -130px; left: -90px; border-style: dashed; }
.cta-ring.r2 { width: 240px; height: 240px; bottom: 50px; right: 3%; animation-direction: reverse; }
.cta-spark { position: absolute; color: var(--c-rose); font-size: 1.6rem; pointer-events: none; animation: ctaTwinkle 3s ease-in-out infinite; }
.cta-spark.c1 { top: 14%; right: 46%; } .cta-spark.c2 { bottom: 26%; left: 5%; animation-delay: -1.5s; } .cta-spark.c3 { top: 10%; right: 6%; animation-delay: -2.2s; font-size: 1.1rem; }

.cta-tag { display: inline-flex; align-items: center; gap: 10px; padding: 7px 18px; border-radius: 50px; background: #fff; border: 1.5px solid rgba(234, 88, 12, .3); color: var(--c-rose); font-size: .78rem; font-weight: 700; letter-spacing: 1.5px; margin-bottom: 20px; box-shadow: 0 6px 16px rgba(234, 88, 12, .12); transition: all .35s var(--c-ease); cursor: pointer; }
.cta-tag:hover { background: var(--c-rose); color: #fff; border-color: var(--c-rose); transform: translateY(-2px) rotate(-1deg); }
.cta-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--c-rose); box-shadow: 0 0 10px var(--c-rose); }
.cta-dot::after { content: ""; position: absolute; inset: -4px; border: 1.5px solid var(--c-rose); border-radius: 50%; animation: ctaPing 1.8s ease-out infinite; }
.cta-title { font-family: var(--font-heading, 'Manrope', sans-serif); font-size: 2.8rem; font-weight: 700; line-height: 1.2; color: var(--c-plum); margin-bottom: 16px; letter-spacing: -.01em; }
.cta-cursive { font-family: var(--font-cursive, 'Kalam', cursive); color: var(--c-rose); font-size: 1.3em; display: inline-block; transform: rotate(-3deg); padding: 0 4px; transition: transform .35s var(--c-ease); cursor: pointer; }
.cta-cursive:hover { transform: rotate(0) scale(1.1); color: var(--c-plum); }
.cta-text { color: var(--c-muted); font-size: 1.1rem; max-width: 560px; margin-bottom: 30px; line-height: 1.8; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
.cta-btn { position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 14px 28px; border-radius: 50px; font-weight: 600; color: var(--c-plum) !important; background: #fff; border: 1.5px solid rgba(234, 88, 12, .25); box-shadow: 0 8px 18px rgba(22, 26, 57, .06); transition: all .35s var(--c-ease); }
.cta-btn i { color: var(--c-rose); transition: transform .3s ease; }
.cta-btn:hover { background: var(--c-plum); border-color: var(--c-plum); color: #fff !important; transform: translateY(-4px); box-shadow: 0 14px 28px rgba(22, 26, 57, .22); }
.cta-btn:hover i { color: #fff; transform: scale(1.25) rotate(-8deg); }
.cta-main { background: var(--c-rose); border-color: var(--c-rose); color: #fff !important; box-shadow: 0 12px 30px rgba(234, 88, 12, .4); }
.cta-main i { color: #fff; }
.cta-main::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--c-rose); animation: ctaPing 2s ease-out infinite; pointer-events: none; }
.cta-main:hover { background: #f06a22; border-color: #f06a22; box-shadow: 0 16px 34px rgba(234, 88, 12, .5); }

.cta-info { display: flex; flex-wrap: wrap; gap: 14px; }
.cta-info-item { display: flex; align-items: center; gap: 14px; padding: 12px 22px 12px 14px; background: #fff; border: 1.5px solid rgba(234, 88, 12, .2); border-radius: 18px; color: var(--c-plum) !important; font-weight: 700; box-shadow: 0 8px 18px rgba(22, 26, 57, .05); transition: all .35s var(--c-ease); }
.cta-info-item i { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 13px; background: var(--c-rose); color: #fff; transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.cta-info-item small { display: block; font-weight: 500; font-size: .74rem; color: var(--c-muted); }
.cta-info-item:hover { transform: translateY(-5px); border-color: var(--c-rose); box-shadow: 0 16px 30px rgba(234, 88, 12, .2); }
.cta-info-item:hover i { transform: rotate(-10deg) scale(1.12); }

/* Photo */
.cta-visual { position: relative; padding: 28px 20px; animation: ctaFloat 6s ease-in-out infinite; }
.cta-visual::before { content: ""; position: absolute; inset: 2% 4% 2% 4%; background: linear-gradient(135deg, rgba(234, 88, 12, .3), rgba(245, 158, 91, .25)); animation: ctaMorph 11s ease-in-out infinite; z-index: 0; }
.cta-photo-frame { position: relative; z-index: 1; padding: 6px; border-radius: 34px; background: linear-gradient(120deg, var(--c-rose), #f8b27a, #fff, var(--c-rose)); background-size: 300% 300%; animation: ctaGrad 6s ease-in-out infinite; box-shadow: 0 30px 60px rgba(234, 88, 12, .28); transition: transform .5s var(--c-ease); }
.cta-visual:hover .cta-photo-frame { transform: rotate(-2deg) scale(1.03); }
.cta-photo { height: 300px; border-radius: 28px; overflow: hidden; background: linear-gradient(135deg, #e8ebf3, #fff4ec); }
.cta-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--c-ease); }
.cta-visual:hover .cta-photo img { transform: scale(1.1); }
.cta-chip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--c-plum); font-weight: 700; font-size: .85rem; padding: 9px 18px; border-radius: 50px; border: 1.5px solid rgba(234, 88, 12, .22); box-shadow: 0 12px 28px rgba(22, 26, 57, .14); animation: ctaFloat 5s ease-in-out infinite; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.cta-chip i { color: var(--c-rose); }
.cta-chip:hover { transform: scale(1.08) rotate(-2deg); }
.cta-chip-1 { top: 4px; left: -4px; } .cta-chip-2 { bottom: 6px; right: -4px; animation-delay: -2.5s; }

@keyframes ctaSpin { to { transform: rotate(360deg); } }
@keyframes ctaPing { 0% { transform: scale(.9); opacity: .7; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes ctaTwinkle { 0%,100% { opacity: .3; transform: scale(.7) rotate(0); } 50% { opacity: 1; transform: scale(1.2) rotate(25deg); } }
@keyframes ctaFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes ctaGrad { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes ctaDots { to { background-position: 26px 26px; } }
@keyframes ctaMorph { 0%,100% { border-radius: 58% 42% 55% 45% / 48% 56% 44% 52%; } 33% { border-radius: 42% 58% 46% 54% / 56% 44% 56% 44%; } 66% { border-radius: 52% 48% 60% 40% / 44% 58% 42% 56%; } }
@media (max-width: 991.98px) { .cta-title { font-size: 2.2rem; } .cta-photo { height: 260px; } }
@media (max-width: 575.98px) { .cta-course { padding: 64px 0; } .cta-title { font-size: 1.8rem; } .cta-visual { padding: 22px 8px; } .cta-btn { padding: 12px 22px; } }
@media (prefers-reduced-motion: reduce) { .cta-course::before, .cta-ring, .cta-spark, .cta-main::before, .cta-visual, .cta-visual::before, .cta-chip, .cta-photo-frame, .cta-dot::after { animation: none; } }