/* Homepage only: one mentor-led visual and a clear row of learning benefits. */
.hero-learning-scene { position: relative; isolation: isolate; width: 100%; max-width: 590px; aspect-ratio: 1.08; margin: 0 auto; }
.hero-mentor-halo { position: absolute; z-index: -1; inset: 9% 9% 13%; border-radius: 50%; background: radial-gradient(circle at 40% 35%,#edfcf5,#d7f7e8 65%,#c9efdf); box-shadow: 0 0 65px 15px rgba(209,250,229,.4); }
.hero-mentor-halo::before { content: ''; position: absolute; inset: -18px; border: 1px solid rgba(5,150,105,.12); border-radius: inherit; }
.hero-mentor-halo::after { content: ''; position: absolute; inset: -38px; border: 1px dashed rgba(5,150,105,.13); border-radius: inherit; }
.hero-section .container .hero-learning-scene .hero-mentor-cutout { position: absolute; inset: 2% 0 auto; width: 100%; height: 88%; max-height: none; max-width: none; margin: 0; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(6,78,59,.10)); animation: heroMentorFloat 8s ease-in-out infinite; }
.hero-live-pill { position: absolute; left: 8%; top: 13%; z-index: 3; display: flex; align-items: center; gap: 9px; background: rgba(255,255,255,.95); border: 1px solid #d7eee2; border-radius: 30px; padding: 11px 14px; box-shadow: 0 10px 24px -16px #065f46; font: 600 11px/1.5 'Inter',sans-serif; color: #225640; transform: rotate(-5deg); }
.hero-session-dot { width: 7px; height: 7px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 4px #d1fae5; flex-shrink: 0; }
.hero-mentor-signature { position: absolute; z-index: 3; right: 6%; bottom: 22%; display: flex; flex-direction: column; gap: 4px; padding: 13px 16px; border: 1px solid #dcefe5; border-radius: 14px; background: rgba(255,255,255,.92); box-shadow: 0 12px 24px -16px rgba(6,78,59,.3); }
.hero-mentor-signature strong { font: 700 12px/1.4 'Inter',sans-serif; color: #164632; }
.hero-mentor-signature span { font: 400 10px/1.4 'Inter',sans-serif; color: #638071; }
.hero-build-strip { position: absolute; z-index: 4; bottom: 2%; left: 12%; right: 7%; padding: 15px 20px; background: rgba(255,255,255,.94); border: 1px solid rgba(5,150,105,.15); border-radius: 18px; box-shadow: 0 20px 36px -24px rgba(6,78,59,.32); }
.hero-build-label { display: block; font: 700 9px/1.5 'Inter',sans-serif; letter-spacing: 1.8px; color: #658273; text-align: center; }
.hero-build-label > span { padding: 0 8px; color: #10b981; }
.hero-build-links { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 10px; }
.hero-build-links a { display: flex; align-items: center; justify-content: center; gap: 9px; color: #244c3a; font: 600 12px/1.5 'Inter',sans-serif; text-decoration: none; padding: 5px 0; }
.hero-build-links a + a { border-left: 1px solid #dfede5; }
.hero-build-links i { color: #059669; font-size: 15px; }
.hero-build-links a:hover, .hero-build-links a:focus-visible { color: #059669; }
.hero-tech-orbit { position: absolute; inset: 0; pointer-events: none; }
.hero-tech-bubble { position: absolute; z-index: 2; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(16,185,129,.17); background: rgba(255,255,255,.94); box-shadow: 0 12px 22px -14px rgba(6,78,59,.35); animation: heroMentorFloat 6s ease-in-out infinite; }
.hero-section .container .hero-learning-scene .hero-tech-bubble img { width: 28px; height: 28px; max-width: 28px; max-height: 28px; object-fit: contain; margin: 0; }
.hero-tech-bubble--html5 { left: 1%; top: 35%; }
.hero-tech-bubble--css3 { left: 20%; top: 1%; animation-delay: -1s; }
.hero-tech-bubble--react { right: 3%; top: 15%; animation-delay: -2s; }
.hero-tech-bubble--nodejs { left: 3%; bottom: 20%; animation-delay: -3s; }
.hero-tech-bubble--mysql { right: 1%; top: 43%; animation-delay: -4s; }
.hero-tech-bubble--javascript { right: 6%; top: 1%; animation-delay: -5s; }
.hero-benefit-strip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); list-style: none; padding: 17px 12px; margin: 30px 0 0; border: 1px solid #d3ebdf; border-radius: 16px; background: linear-gradient(120deg,rgba(255,255,255,.95),rgba(236,253,245,.85)); box-shadow: 0 10px 30px -23px rgba(6,78,59,.28); }
.hero-benefit-strip li { display: flex; align-items: center; gap: 9px; padding: 0 10px; }
.hero-benefit-strip li + li { border-left: 1px solid #d5eade; }
.hero-benefit-icon { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border-radius: 10px; color: #fff; background: #059669; font-size: 14px; box-shadow: 0 5px 12px -7px #047857; }
.hero-benefit-strip strong { display: block; color: #195139; font: 700 11px/1.4 'Inter',sans-serif; }
.hero-benefit-strip small { display: block; color: #638071; font: 400 9px/1.5 'Inter',sans-serif; margin-top: 3px; }
@keyframes heroMentorFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@media (min-width: 992px) and (max-width: 1199px) { .hero-benefit-strip { padding: 14px 5px; } .hero-benefit-strip li { flex-direction: column; align-items: flex-start; gap: 8px; padding: 0 8px; } }
@media (max-width: 991px) { .hero-learning-scene { max-width: 540px; margin: 20px auto; } }
@media (max-width: 575px) { .hero-learning-scene { margin: 20px auto 0; } .hero-tech-bubble { width: 39px; height: 39px; } .hero-section .container .hero-learning-scene .hero-tech-bubble img { width: 22px; height: 22px; } .hero-live-pill { font-size: 8px; padding: 8px 10px; left: 5%; top: 17%; } .hero-mentor-signature { right: 3%; bottom: 24%; padding: 9px 10px; } .hero-mentor-signature strong { font-size: 9px; } .hero-mentor-signature span { font-size: 8px; } .hero-build-strip { left: 8%; right: 4%; padding: 12px; } .hero-build-label { font-size: 7px; letter-spacing: 1px; } .hero-build-links a { font-size: 10px; gap: 6px; } .hero-benefit-strip { padding: 14px 4px; margin-top: 24px; } .hero-benefit-strip li { flex-direction: column; text-align: center; gap: 8px; padding: 0 5px; } .hero-benefit-strip strong { font-size: 10px; } .hero-benefit-strip small { font-size: 8px; } }
@media (prefers-reduced-motion: reduce) { .hero-learning-scene * { animation: none !important; } }

.hero-section .hero-section--img { display: flex; min-width: 0; }
.hero-benefit-icon { width: 32px; }
@media (max-width: 991px) { .hero-section .hero-section--img { width: 100%; } }

@media (min-width: 1200px) { .hero-benefit-strip strong { font-size: 12px; } .hero-benefit-strip small { font-size: 10px; } }
@media (max-width: 575px) { .hero-live-pill { left: 0; } }

/* Course directory: crawlable link hub for every course, free resource and the Jobs portal. */
.course-directory { position: relative; padding: 80px 0 72px; background: radial-gradient(900px 380px at 50% 0%,#e9fbf2 0%,rgba(233,251,242,0) 70%),#fbfefc; border-top: 1px solid #e6f3ec; }
.cd-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; max-width: 1180px; margin: 0 auto; }
.cd-card { display: flex; flex-direction: column; min-width: 0; padding: 28px; background: #fff; border: 1px solid #dcefe5; border-radius: 22px; box-shadow: 0 1px 2px rgba(6,78,59,.04),0 18px 40px -30px rgba(6,78,59,.35); transition: box-shadow .25s,border-color .25s; }
.cd-card:hover { border-color: #c3e8d5; box-shadow: 0 1px 2px rgba(6,78,59,.05),0 24px 48px -28px rgba(6,78,59,.4); }
.cd-card--wide { grid-column: 1 / -1; }
.cd-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px dashed #d7eee2; }
.cd-card__icon { flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg,#d1fae5,#ecfdf5); color: #059669; font-size: 1.9rem; box-shadow: inset 0 0 0 1px rgba(5,150,105,.12); }
.cd-title { margin: 0; font: 700 2rem/1.25 "Bricolage Grotesque",sans-serif; color: #0f172a; letter-spacing: -.015em; }
.cd-card__sub { margin: 4px 0 0; font-size: 1.35rem; line-height: 1.45; color: #64748b; }

/* Live classes: each course is a tile; the link's ::after stretches over the
   whole tile so it is fully clickable while the anchor text stays the title. */
.cd-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.cd-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 70px 16px 18px; background: #fbfefc; border: 1px solid #e3f1ea; border-radius: 14px; transition: transform .2s,border-color .2s,background-color .2s,box-shadow .2s; }
.cd-tile::after { content: "\2192"; position: absolute; bottom: 14px; right: 16px; font-size: 1.6rem; line-height: 1; color: #10b981; opacity: 0; transform: translateX(-6px); transition: opacity .2s,transform .2s; }
.cd-tile--logos-2 { padding-right: 98px; }
.cd-tile--logos-3 { padding-right: 126px; }
.cd-logos { position: absolute; top: 14px; right: 14px; display: flex; }
.cd-logo { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: #fff; border: 1px solid #e2efe8; box-shadow: 0 6px 14px -10px rgba(15,23,42,.35); transition: transform .2s; }
.cd-logo + .cd-logo { margin-left: -10px; }
.cd-logo img { width: 24px; height: 24px; object-fit: contain; filter: grayscale(1); opacity: .6; transition: filter .25s,opacity .25s; }
.cd-tile:hover .cd-logo img, .cd-tile:focus-within .cd-logo img { filter: none; opacity: 1; }
.cd-tile:hover .cd-logo, .cd-tile:focus-within .cd-logo { transform: translateY(-2px) rotate(-4deg); }
.cd-tile:hover .cd-logo + .cd-logo, .cd-tile:focus-within .cd-logo + .cd-logo { transform: translateY(-2px) rotate(4deg); }
.cd-tile > a { font-weight: 700; font-size: 1.5rem; line-height: 1.35; color: #064e3b; text-decoration: none; }
.cd-tile > a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cd-tile > span:not(.cd-logos) { margin-bottom: 8px; color: #64748b; font-size: 1.3rem; line-height: 1.45; }
.cd-tile:hover, .cd-tile:focus-within { transform: translateY(-2px); background: #fff; border-color: #6ee7b7; box-shadow: 0 14px 28px -20px rgba(5,150,105,.55); }
.cd-tile:hover::after, .cd-tile:focus-within::after { opacity: 1; transform: none; }
.cd-tile > a:focus-visible { outline: none; }
.cd-tile:focus-within { outline: 2px solid #10b981; outline-offset: 2px; }
.cd-tile--featured { background: linear-gradient(145deg,#ecfdf5 0%,#f8fffb 100%); border-color: #c7ecd9; }
.cd-tag { display: inline-flex; align-items: center; gap: 5px; margin-top: auto; padding: 3px 10px; border-radius: 999px; background: #fff; border: 1px solid #d1f0e0; color: #047857; font-size: 1.2rem; font-weight: 600; line-height: 1.5; font-style: normal; }
.cd-tag i { font-size: 1.1rem; }
.cd-tag--price { background: #fef3c7; border-color: #fde68a; color: #92400e; font-weight: 700; }

/* Link rows in the smaller cards: whole row clickable, chevron on hover. */
.cd-list { list-style: none; margin: 0 -12px; padding: 0; }
.cd-list li { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 11px 36px 11px 12px; border-radius: 12px; font-size: 1.45rem; line-height: 1.45; transition: background-color .2s; }
.cd-list li + li { margin-top: 2px; }
.cd-list li::after { content: "\203A"; position: absolute; top: 50%; right: 14px; font-size: 2.2rem; line-height: 1; color: #94a3b8; transform: translateY(-55%); transition: transform .2s,color .2s; }
.cd-list li > a { font-weight: 700; color: #064e3b; text-decoration: none; }
.cd-list li > a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cd-list li > a:focus-visible { outline: none; }
.cd-list li:focus-within { outline: 2px solid #10b981; outline-offset: -2px; }
.cd-list li > span { color: #64748b; font-size: 1.3rem; }
.cd-list li:hover, .cd-list li:focus-within { background: #f0fdf6; }
.cd-list li:hover::after, .cd-list li:focus-within::after { color: #059669; transform: translate(3px,-55%); }

.cd-notes { margin-bottom: 8px; padding: 16px; border-radius: 14px; background: #f3fcf7; border: 1px solid #dcf3e6; }
.cd-notes__link { display: inline-block; margin-bottom: 10px; font-size: 1.45rem; font-weight: 700; color: #064e3b; text-decoration: none; }
.cd-notes__link:hover, .cd-notes__link:focus-visible { color: #059669; text-decoration: underline; }
.cd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cd-chips a { display: inline-flex; align-items: center; gap: 7px; padding: 5px 14px 5px 8px; border-radius: 999px; background: #fff; border: 1px solid #c7ecd9; color: #065f46; font-size: 1.3rem; font-weight: 600; text-decoration: none; transition: background-color .2s,color .2s,border-color .2s; }
.cd-chips a img { width: 16px; height: 16px; object-fit: contain; filter: grayscale(1); opacity: .6; transition: filter .2s,opacity .2s; }
.cd-chips a:hover img, .cd-chips a:focus-visible img { opacity: 1; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff); }
.cd-chips a:hover, .cd-chips a:focus-visible { background: #059669; border-color: #059669; color: #fff; }

.cd-callout { position: relative; display: flex; align-items: flex-start; gap: 14px; margin-top: auto; padding: 16px 18px; border-radius: 14px; background: linear-gradient(135deg,#0f172a 0%,#1e293b 100%); color: #cbd5e1; transition: transform .2s,box-shadow .2s; }
.cd-list:has(+ .cd-callout) { margin-bottom: 16px; }
.cd-callout__icon { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: rgba(16,185,129,.18); color: #34d399; font-size: 1.7rem; }
.cd-callout__title { margin: 0 0 3px; font: 700 1.55rem/1.3 "Bricolage Grotesque",sans-serif; }
.cd-callout__title a { color: #fff; text-decoration: none; }
.cd-callout__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cd-callout p { margin: 0; font-size: 1.3rem; line-height: 1.45; color: #94a3b8; }
.cd-callout:hover, .cd-callout:focus-within { transform: translateY(-2px); box-shadow: 0 16px 30px -20px rgba(15,23,42,.6); }
.cd-callout:focus-within { outline: 2px solid #10b981; outline-offset: 2px; }
.cd-callout__title a:focus-visible { outline: none; }

.cd-card--jobs { position: relative; overflow: hidden; background: linear-gradient(160deg,#064e3b 0%,#065f46 55%,#047857 100%); border-color: #065f46; }
.cd-card--jobs::before { content: ""; position: absolute; top: -90px; right: -90px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle,rgba(110,231,183,.22),rgba(110,231,183,0) 70%); pointer-events: none; }
.cd-card--jobs .cd-card__head { border-bottom-color: rgba(255,255,255,.16); }
.cd-card--jobs .cd-card__icon { background: rgba(255,255,255,.12); color: #6ee7b7; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.cd-card--jobs .cd-title { color: #fff; }
.cd-card--jobs .cd-card__sub, .cd-card--jobs .cd-list li > span { color: #a7f3d0; }
.cd-card--jobs .cd-list li > a { color: #fff; }
.cd-card--jobs .cd-list li::after { color: rgba(167,243,208,.7); }
.cd-card--jobs .cd-list li:hover, .cd-card--jobs .cd-list li:focus-within { background: rgba(255,255,255,.08); }
.cd-card--jobs .cd-list li:hover::after, .cd-card--jobs .cd-list li:focus-within::after { color: #6ee7b7; }
.cd-card--jobs .cd-list { margin-bottom: 20px; }
.cd-cta { align-self: stretch; justify-content: center; margin-top: auto; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 12px; background: #fff; color: #065f46; font-size: 1.45rem; font-weight: 700; text-decoration: none; transition: transform .2s,box-shadow .2s; }
.cd-cta i { transition: transform .2s; }
.cd-cta:hover, .cd-cta:focus-visible { color: #064e3b; transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(0,0,0,.45); }
.cd-cta:hover i, .cd-cta:focus-visible i { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .cd-tile, .cd-tile::after, .cd-logo, .cd-logo img, .cd-chips a img, .cd-list li::after, .cd-callout, .cd-cta, .cd-cta i { transition: none; } }
@media (max-width: 991.98px) { .cd-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .cd-tiles { grid-template-columns: repeat(2,minmax(0,1fr)); } .cd-card--jobs { grid-column: 1 / -1; } }
@media (max-width: 767.98px) { .cd-grid { grid-template-columns: 1fr; gap: 16px; } .cd-tiles { grid-template-columns: 1fr; gap: 8px; } .cd-tile { padding-top: 12px; padding-bottom: 12px; padding-left: 14px; } .cd-tile > span:not(.cd-logos) { margin-bottom: 6px; } .cd-card { padding: 22px 18px; border-radius: 18px; } .course-directory { padding: 54px 0 44px; } }

/* Homepage live batch layout. */
.hero-section .hero-content-row { margin: 48px 0 0; align-items: center; }
.hero-section .row .hero-section--data { margin: 0 !important; padding-top: 0; align-items: stretch; }
.hero-section .hero-intro { max-width: 60ch; margin: 0 0 28px; font: 400 17px/1.65 'Inter',sans-serif; color: #374151; letter-spacing: 0; }
.hero-enrolment-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 13px; margin-bottom: 24px; border: 1px solid #fecaca; border-radius: 30px; background: #fff7f7; color: #991b1b; font: 600 13px/1.4 'Inter',sans-serif; }
.hero-session-dot { background: #ef4444; box-shadow: 0 0 0 4px #fee2e2; animation: heroLivePulse 2s ease-out infinite; }
@keyframes heroLivePulse { 0%,100% { box-shadow: 0 0 0 3px rgba(239,68,68,.16); } 60% { box-shadow: 0 0 0 7px rgba(239,68,68,0); } }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-section .hero-cta { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 13px 17px; border: 1px solid #059669; border-radius: 10px; font: 700 14px/1.4 'Inter',sans-serif; text-decoration: none; }
.hero-section .hero-cta--primary { color: #fff; background: #059669; box-shadow: 0 8px 20px -12px #047857; }
.hero-section .hero-cta--secondary { color: #047857; background: #fff; }
.hero-section .hero-cta:hover { background: #ecfdf5; color: #065f46; }
.hero-section .hero-cta:focus-visible { outline: 3px solid #0f766e; outline-offset: 4px; }
.hero-section .hero-social-proof { margin: 16px 0 0; color: #4b5563; font: 400 13px/1.6 'Inter',sans-serif; letter-spacing: 0; }
.hero-social-proof i { color: #dc2626; margin-right: 5px; }
.hero-section .hero-benefit-strip strong { font-size: 13px; letter-spacing: 0; }
.hero-section .hero-benefit-strip small { font-size: 13px; color: #4b5563; letter-spacing: 0; }
.hero-benefit-strip li { flex-direction: column; align-items: flex-start; }
.services-build-strip { max-width: 760px; margin: 24px auto 36px; padding: 20px; background: #fff; border: 1px solid #d3ebdf; border-radius: 18px; box-shadow: 0 14px 30px -24px #065f46; }
.services-build-strip .hero-build-label { font-size: 12px; letter-spacing: .8px; color: #4b5563; }
.services-build-strip .hero-build-links a { font-size: 15px; }
@media (max-width: 991px) {
 .hero-section .hero-content-row { margin-top: 36px; }
 .hero-section .hero-section--data { order: 0; }
 .hero-section .hero-section--img { order: 1; }
 .hero-learning-scene { margin-top: 22px; }
}
@media (max-width: 767px) {
 .hero-section { margin-top: 20px; padding-bottom: 64px; }
 .hero-section .hero-content-row { margin-top: 26px; }
 .hero-section .hero-intro { font-size: 15px; line-height: 1.55; }
 .hero-tech-orbit { display: none; }
 .hero-section .hero-cta { font-size: 13px; padding: 12px; }
 .hero-actions { gap: 8px; }
 .hero-section .hero-social-proof { font-size: 12px; }
 .hero-section .hero-benefit-strip { margin-top: 40px; }
 .hero-benefit-strip li { align-items: center; }
 .hero-section .hero-benefit-strip strong, .hero-section .hero-benefit-strip small { font-size: 13px; }
 .services-build-strip .hero-build-links a { font-size: 13px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { .hero-session-dot { animation: none; } }

/* One body family and a consistent 24 / 28 / 16 / 40px rhythm. */
.hero-section { padding-bottom: 64px; }
.hero-section .hero-benefit-strip { margin-top: 40px; }
.hero-section .hero-intro,
.hero-section .hero-enrolment-pill,
.hero-section .hero-enrolment-pill time,
.hero-section .hero-cta,
.hero-section .hero-social-proof,
.hero-section .hero-benefit-strip strong,
.hero-section .hero-benefit-strip small,
.hero-section .hero-live-pill,
.hero-section .hero-mentor-signature strong,
.hero-section .hero-mentor-signature span { font-family: 'Urbanist',sans-serif; letter-spacing: 0; }
.hero-section .hero-enrolment-pill { gap: 8px; flex-wrap: wrap; }
.hero-section .hero-enrolment-pill time { color: inherit; font-weight: inherit; }
.hero-section a.hero-enrolment-pill { text-decoration: none; }
.hero-section a.hero-enrolment-pill:hover { color: #7f1d1d; background: #fee2e2; }
.hero-section a.hero-enrolment-pill:focus-visible { outline: 3px solid #dc2626; outline-offset: 4px; }