/**
 * Dawnjoo design system foundation.
 * Scoped project primitives layered after BuddyBoss and the child stylesheet.
 */

@font-face {
    font-family: 'Estedad';
    src: url('../fonts/Estedad-Variable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --dj-color-cyan: #31cfff;
    --dj-color-pink-light: #ff71aa;
    --dj-color-pink: #ff3385;
    --dj-color-blue: #102770;
    --dj-color-purple: #1b0338;
    --dj-color-white: #fff;
    --dj-color-lavender-25: #fcfaff;
    --dj-color-lavender-50: #f7f1ff;
    --dj-color-lavender-100: #eee4fb;
    --dj-color-text: #1b0338;
    --dj-color-text-muted: #625477;
    --dj-color-border: rgba(27, 3, 56, .12);

    --dj-font-family: Estedad, Tahoma, Arial, sans-serif;
    --dj-font-weight-regular: 400;
    --dj-font-weight-medium: 500;
    --dj-font-weight-bold: 700;
    --dj-font-weight-black: 900;

    --dj-space-1: .25rem;
    --dj-space-2: .5rem;
    --dj-space-3: .75rem;
    --dj-space-4: 1rem;
    --dj-space-5: 1.25rem;
    --dj-space-6: 1.5rem;
    --dj-space-8: 2rem;
    --dj-space-10: 2.5rem;
    --dj-space-12: 3rem;
    --dj-space-16: 4rem;
    --dj-space-20: 5rem;

    --dj-radius-sm: 12px;
    --dj-radius-md: 18px;
    --dj-radius-lg: 28px;
    --dj-radius-xl: 38px;
    --dj-radius-pill: 999px;

    --dj-shadow-card: 0 18px 45px rgba(27, 3, 56, .12);
    --dj-shadow-float: 0 26px 70px rgba(27, 3, 56, .18);
    --dj-shadow-candy: 8px 9px 0 rgba(16, 39, 112, .16), inset 0 1px 0 rgba(255, 255, 255, .72);
    --dj-surface-glass: rgba(255, 255, 255, .72);
    --dj-surface-solid: #fff;
    --dj-blur-md: 18px;

    --dj-container: 1180px;
    --dj-container-wide: 1360px;
    --dj-focus-ring: 0 0 0 4px rgba(49, 207, 255, .38);
    --dj-z-header: 1000;
    --dj-z-modal: 10000;
    --dj-motion-fast: 160ms;
    --dj-motion-normal: 240ms;
    --dj-ease: cubic-bezier(.2, .8, .2, 1);

    /* Compatibility aliases for existing Dawnjoo components. */
    --dj-ink: var(--dj-color-text);
    --dj-muted: var(--dj-color-text-muted);
    --dj-primary: var(--dj-color-pink);
    --dj-primary-dark: var(--dj-color-blue);
    --dj-paper: var(--dj-color-lavender-50);
    --dj-card: var(--dj-surface-glass);
    --dj-line: var(--dj-color-border);
    --dj-shadow: var(--dj-shadow-card);
}

.dj-ui,
.dawnjoo-auth,
.dawnjoo-dashboard,
.dawnjoo-growth,
.dawnjoo-modal {
    color: var(--dj-color-text);
    font-family: var(--dj-font-family);
    direction: rtl;
    text-align: start;
}

.dj-container {
    width: min(calc(100% - 2rem), var(--dj-container));
    margin-inline: auto;
}

.dj-glass {
    border: 1px solid rgba(255, 255, 255, .78);
    background: var(--dj-surface-glass);
    box-shadow: var(--dj-shadow-card);
    backdrop-filter: blur(var(--dj-blur-md));
}

.dj-card {
    border: 1px solid var(--dj-color-border);
    border-radius: var(--dj-radius-lg);
    background: var(--dj-surface-solid);
    box-shadow: var(--dj-shadow-candy);
}

.dj-button {
    display: inline-flex;
    min-block-size: 48px;
    align-items: center;
    justify-content: center;
    gap: var(--dj-space-2);
    padding-inline: var(--dj-space-6);
    color: var(--dj-color-white);
    border: 2px solid transparent;
    border-radius: var(--dj-radius-pill);
    background: var(--dj-color-pink);
    box-shadow: 0 8px 0 #c81760, 0 14px 28px rgba(255, 51, 133, .25);
    font: inherit;
    font-weight: var(--dj-font-weight-bold);
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--dj-motion-fast) var(--dj-ease), box-shadow var(--dj-motion-fast) var(--dj-ease), background-color var(--dj-motion-fast) var(--dj-ease);
}

.dj-button:hover {
    color: var(--dj-color-white);
    background: #e72273;
    transform: translateY(-2px);
}

.dj-button:active {
    box-shadow: 0 3px 0 #c81760, 0 8px 16px rgba(255, 51, 133, .2);
    transform: translateY(4px);
}

.dj-button:focus-visible,
.dj-card a:focus-visible,
.dj-ui :is(a, button, input, select, textarea, summary):focus-visible,
.dawnjoo-auth :is(a, button, input, select, textarea, summary):focus-visible,
.dawnjoo-dashboard :is(a, button, input, select, textarea, summary):focus-visible,
.dawnjoo-growth :is(a, button, summary):focus-visible {
    outline: 0;
    box-shadow: var(--dj-focus-ring);
}

.dj-button--secondary {
    color: var(--dj-color-purple);
    background: var(--dj-color-cyan);
    box-shadow: 0 8px 0 #139cc6, 0 14px 28px rgba(49, 207, 255, .24);
}

.dj-button--outline {
    color: var(--dj-color-blue);
    border-color: currentColor;
    background: var(--dj-color-white);
    box-shadow: none;
}

.dj-button--ghost {
    color: var(--dj-color-blue);
    background: transparent;
    box-shadow: none;
}

.dj-button[disabled],
.dj-button[aria-disabled="true"] {
    opacity: .5;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

@media (max-width: 767px) {
    .dj-container {
        width: min(calc(100% - 1.25rem), var(--dj-container));
    }

    .dj-button--mobile-full {
        inline-size: 100%;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .dj-container {
        width: min(calc(100% - 3rem), var(--dj-container));
    }
}

@media (min-width: 1440px) {
    .dj-container--wide {
        max-inline-size: var(--dj-container-wide);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dj-ui *,
    .dawnjoo-auth *,
    .dawnjoo-dashboard *,
    .dawnjoo-growth * {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@media (prefers-contrast: more) {
    .dj-card,
    .dj-glass {
        border-color: var(--dj-color-purple);
    }
}

/* Public landing page */
html:has(body.dj-landing-page),
body.dj-landing-page {
    margin-block-start: 0 !important;
    padding-block-start: 0 !important;
    background: #080424;
}

.dj-landing-page #masthead,
.dj-landing-page .site-header,
.dj-landing-page .bb-mobile-header,
.dj-landing-page #site-footer,
.dj-landing-page .footer-bottom,
.dj-landing-page .footer-widget-area,
.dj-landing-page footer.bb-footer {
    display: none !important;
}

.dj-landing-page #page,
.dj-landing-page #content,
.dj-landing-page .site,
.dj-landing-page .site-content {
    margin-block-start: 0 !important;
    padding-block-start: 0 !important;
}

.dj-front-page,
.dj-front-page.site-content,
body.home .site-content {
    max-inline-size: none;
    padding: 0;
}

.dj-front-page .dj-landing {
    margin: 0;
}

.dj-landing {
    position: relative;
    overflow: hidden;
    padding-block: var(--dj-space-4) var(--dj-space-20);
    color: var(--dj-color-white);
    background:
        radial-gradient(circle at 18% 18%, rgba(49, 207, 255, .13), transparent 22rem),
        radial-gradient(circle at 82% 30%, rgba(255, 51, 133, .16), transparent 25rem),
        linear-gradient(145deg, #090526, var(--dj-color-purple) 55%, #080424);
    isolation: isolate;
}

.dj-landing::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .72;
    background:
        radial-gradient(circle at 4% 11%, rgba(255,255,255,.75) 0 1px, transparent 1.8px),
        radial-gradient(circle at 12% 39%, rgba(49,207,255,.78) 0 1.5px, transparent 2.3px),
        radial-gradient(circle at 19% 72%, rgba(255,113,170,.72) 0 1px, transparent 2px),
        radial-gradient(circle at 27% 18%, rgba(255,255,255,.58) 0 .8px, transparent 1.7px),
        radial-gradient(circle at 34% 55%, rgba(159,82,216,.9) 0 1.6px, transparent 2.5px),
        radial-gradient(circle at 43% 8%, rgba(49,207,255,.7) 0 1px, transparent 2px),
        radial-gradient(circle at 51% 77%, rgba(255,255,255,.68) 0 1.2px, transparent 2.2px),
        radial-gradient(circle at 59% 31%, rgba(255,113,170,.66) 0 .9px, transparent 1.8px),
        radial-gradient(circle at 67% 64%, rgba(49,207,255,.7) 0 1.4px, transparent 2.3px),
        radial-gradient(circle at 74% 14%, rgba(255,255,255,.65) 0 1px, transparent 2px),
        radial-gradient(circle at 82% 47%, rgba(168,91,222,.72) 0 1.5px, transparent 2.4px),
        radial-gradient(circle at 91% 25%, rgba(49,207,255,.66) 0 .9px, transparent 1.8px),
        radial-gradient(circle at 96% 81%, rgba(255,113,170,.7) 0 1.2px, transparent 2.2px);
    content: '';
    filter: drop-shadow(0 0 4px rgba(49,207,255,.38));
}

.dj-landing::after {
    position: absolute;
    z-index: -2;
    inset: 0;
    background:
        radial-gradient(ellipse at 16% 26%, rgba(49,207,255,.08), transparent 26%),
        radial-gradient(ellipse at 78% 18%, rgba(255,51,133,.1), transparent 29%),
        radial-gradient(ellipse at 54% 74%, rgba(113,49,173,.12), transparent 34%);
    content: '';
}

.dj-site-header {
    position: relative;
    z-index: var(--dj-z-header);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(1rem, 3vw, 3rem);
    min-block-size: 82px;
    margin-block-end: var(--dj-space-4);
    padding-inline: clamp(1rem, 3vw, 2rem);
    border: 1px solid rgba(255,113,170,.55);
    border-radius: var(--dj-radius-lg);
    background: linear-gradient(135deg, rgba(16,39,112,.7), rgba(27,3,56,.82));
    box-shadow: 0 18px 42px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.14);
    backdrop-filter: blur(18px);
}

.dj-brand { display: inline-flex; align-items: center; gap: .65rem; color: #fff; font-size: 1.55rem; text-decoration: none; }
.dj-brand:hover { color: #fff; }
.dj-brand > img { inline-size: 48px; block-size: 42px; object-fit: contain; filter: drop-shadow(0 5px 9px rgba(49,207,255,.24)); }
.dj-site-nav { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 3vw, 2.5rem); }
.dj-site-nav a { position: relative; color: rgba(255,255,255,.75); font-weight: 600; text-decoration: none; transition: color var(--dj-motion-fast) var(--dj-ease); }
.dj-site-nav a:hover, .dj-site-nav a[aria-current="page"] { color: #fff; }
.dj-site-nav a[aria-current="page"]::after { position: absolute; inset-inline: 30%; inset-block-end: -13px; block-size: 4px; border-radius: 999px; background: var(--dj-color-pink); box-shadow: 0 0 10px var(--dj-color-pink); content: ''; }
.dj-account-button { display: inline-flex; min-block-size: 44px; align-items: center; gap: .55rem; padding-inline: 1rem; color: #fff; border: 1px solid rgba(49,207,255,.58); border-radius: var(--dj-radius-pill); background: rgba(16,39,112,.62); text-decoration: none; }
.dj-account-button span { color: var(--dj-color-pink); text-shadow: 0 0 10px var(--dj-color-pink); }

.dj-hero {
    display: grid;
    min-block-size: 620px;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    align-items: center;
    gap: clamp(1rem, 3vw, 3rem);
    padding: clamp(2rem, 5vw, 5rem);
    overflow: hidden;
    border: 1px solid rgba(255, 113, 170, .7);
    border-radius: var(--dj-radius-xl);
    background: linear-gradient(135deg, rgba(16,39,112,.42), rgba(27,3,56,.64));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 30px 90px rgba(0,0,0,.35), 0 0 36px rgba(255,51,133,.11);
}

.dj-hero__content { position: relative; z-index: 2; }
.dj-kicker { display: inline-flex; margin-block-end: var(--dj-space-3); color: var(--dj-color-cyan); font-weight: 800; }
.dj-hero h1 { margin: 0; color: #fff; font-size: clamp(2.65rem, 6.2vw, 5.5rem); font-weight: 800; line-height: 1.38; letter-spacing: -.025em; }
.dj-hero h1 em { display: block; color: var(--dj-color-pink); font-style: normal; text-shadow: 0 8px 28px rgba(255,51,133,.28); }
.dj-hero p { max-inline-size: 36rem; margin-block: var(--dj-space-5) var(--dj-space-8); color: rgba(255,255,255,.78); font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 2; }
.dj-hero__actions { display: flex; flex-wrap: wrap; gap: var(--dj-space-4); }
.dj-hero .dj-button--outline { color: #fff; border-color: rgba(49,207,255,.65); background: rgba(16,39,112,.34); }
.dj-hero__visual { position: relative; display: grid; min-inline-size: 0; place-items: center; }
.dj-hero__visual img { inline-size: min(100%, 850px); max-inline-size: none; filter: drop-shadow(0 35px 40px rgba(0,0,0,.34)); transform: scale(1.12); }

.dj-paths { padding-block: clamp(3rem, 7vw, 6.5rem) var(--dj-space-8); }
.dj-section-heading { margin-block-end: var(--dj-space-8); text-align: center; }
.dj-section-heading h2 { margin: 0; color: #fff; font-size: clamp(1.8rem, 4vw, 3.25rem); font-weight: 800; }
.dj-paths__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dj-space-5); }
.dj-path-card { display: grid; min-block-size: 180px; grid-template-columns: 112px 1fr auto; align-items: center; gap: var(--dj-space-5); padding: var(--dj-space-5); color: #fff; border: 1px solid rgba(255,113,170,.55); border-radius: var(--dj-radius-lg); background: linear-gradient(140deg, rgba(16,39,112,.72), rgba(27,3,56,.82)); box-shadow: var(--dj-shadow-float), inset 0 1px 0 rgba(255,255,255,.14); text-decoration: none; transition: transform var(--dj-motion-normal) var(--dj-ease), border-color var(--dj-motion-normal) var(--dj-ease); }
.dj-path-card:hover { color: #fff; border-color: var(--dj-color-cyan); transform: translateY(-6px); }
.dj-path-card strong, .dj-path-card small { display: block; }
.dj-path-card strong { margin-block-end: var(--dj-space-2); font-size: 1.28rem; }
.dj-path-card small { color: rgba(255,255,255,.64); line-height: 1.8; }
.dj-path-card > b { display: grid; inline-size: 46px; block-size: 46px; place-items: center; border-radius: 50%; background: var(--dj-color-pink); box-shadow: 0 5px 0 #b91658; font-size: 1.35rem; }
.dj-path-card__art { inline-size: 116px; block-size: 116px; object-fit: contain; filter: drop-shadow(0 16px 18px rgba(0,0,0,.34)); transition: transform var(--dj-motion-normal) var(--dj-ease); }
.dj-path-card:hover .dj-path-card__art { transform: translateY(-5px) rotate(-3deg) scale(1.04); }
.dj-path-card__planet { display: block; inline-size: 106px; aspect-ratio: 1; border-radius: 50%; box-shadow: inset -16px -18px 22px rgba(27,3,56,.28), 0 18px 24px rgba(0,0,0,.3); }
.dj-path-card__planet--earth { background: radial-gradient(circle at 30% 25%, #ff71aa 0 12%, transparent 13%), radial-gradient(circle at 66% 68%, #31cfff 0 20%, transparent 21%), linear-gradient(145deg, #31cfff, #ff3385); }
.dj-path-card__planet--moon { background: radial-gradient(circle at 30% 28%, #431567 0 8%, transparent 9%), radial-gradient(circle at 65% 62%, #431567 0 13%, transparent 14%), linear-gradient(145deg, #9f52d8, #4d157a); }
.dj-path-card__planet--ring { position: relative; background: linear-gradient(145deg, #31cfff, #126cdb); }
.dj-path-card__planet--ring::after { position: absolute; inset: 44% -16% auto; block-size: 20%; border-radius: 50%; background: var(--dj-color-pink); box-shadow: 0 5px 9px rgba(27,3,56,.3); content: ''; transform: rotate(-18deg); }

.dj-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block-start: var(--dj-space-8); padding: var(--dj-space-6); border: 1px solid rgba(255,113,170,.5); border-radius: var(--dj-radius-lg); background: rgba(16,39,112,.38); box-shadow: var(--dj-shadow-float); backdrop-filter: blur(16px); }
.dj-trust article { display: grid; grid-template-columns: 82px 1fr; grid-template-rows: auto auto; align-items: center; gap: 0 var(--dj-space-4); padding: var(--dj-space-4); border-inline-end: 1px solid rgba(255,113,170,.35); }
.dj-trust article:last-child { border-inline-end: 0; }
.dj-trust__icon { display: block; grid-row: 1 / 3; inline-size: 78px; block-size: 78px; object-fit: contain; filter: drop-shadow(0 10px 10px rgba(0,0,0,.34)); }
.dj-trust strong { color: #fff; font-size: 1.2rem; }
.dj-trust small { color: rgba(255,255,255,.58); }

.dj-site-footer { margin-block-start: clamp(4rem, 8vw, 8rem); padding-block: clamp(3rem, 6vw, 5rem) 1.25rem; border-block-start: 1px solid rgba(255,113,170,.45); background: linear-gradient(180deg, rgba(16,39,112,.34), rgba(8,4,36,.96)); }
.dj-site-footer__inner { display: grid; grid-template-columns: 1.5fr .8fr .8fr 1.15fr; gap: clamp(2rem, 5vw, 5rem); }
.dj-site-footer__inner > div { display: flex; align-items: flex-start; flex-direction: column; gap: .85rem; }
.dj-site-footer__inner > div > strong { color: #fff; font-size: 1.05rem; }
.dj-site-footer__inner a:not(.dj-button):not(.dj-brand) { color: rgba(255,255,255,.62); text-decoration: none; }
.dj-site-footer__inner a:not(.dj-button):not(.dj-brand):hover { color: var(--dj-color-cyan); }
.dj-site-footer__brand p { max-inline-size: 26rem; margin: .5rem 0 0; color: rgba(255,255,255,.58); line-height: 2; }
.dj-site-footer__cta { padding: 1.35rem; border: 1px solid rgba(49,207,255,.3); border-radius: var(--dj-radius-md); background: rgba(16,39,112,.34); }
.dj-site-footer__cta .dj-button { inline-size: 100%; margin-block-start: .35rem; }
.dj-site-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-start: 3rem; padding-block-start: 1.25rem; color: rgba(255,255,255,.45); border-block-start: 1px solid rgba(255,255,255,.1); font-size: .84rem; }
.dj-site-footer__bottom a { color: rgba(255,255,255,.55); text-decoration: none; }

@media (max-width: 1023px) {
    .dj-site-header { grid-template-columns: 1fr auto; }
    .dj-site-nav { display: none; }
    .dj-hero { min-block-size: auto; grid-template-columns: 1fr; }
    .dj-hero__content { text-align: center; }
    .dj-hero p { margin-inline: auto; }
    .dj-hero__actions { justify-content: center; }
    .dj-hero__visual { grid-row: 1; }
    .dj-hero__visual img { inline-size: min(90%, 660px); }
    .dj-paths__grid { grid-template-columns: 1fr; }
    .dj-trust { grid-template-columns: repeat(2, 1fr); }
    .dj-trust article:nth-child(2) { border-inline-end: 0; }
    .dj-site-footer__inner { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .dj-landing { padding-block-start: .625rem; }
    .dj-site-header { min-block-size: 68px; padding-inline: .85rem; border-radius: 22px; }
    .dj-brand { font-size: 1.2rem; }
    .dj-brand > img { inline-size: 40px; block-size: 35px; }
    .dj-account-button { padding-inline: .75rem; font-size: .78rem; }
    .dj-hero { padding: 1.6rem 1rem 2.25rem; border-radius: 26px; }
    .dj-hero h1 { font-size: clamp(2.35rem, 13vw, 3.6rem); }
    .dj-hero__actions .dj-button { inline-size: 100%; }
    .dj-hero__visual img { inline-size: 115%; transform: none; }
    .dj-path-card { min-block-size: 148px; grid-template-columns: 76px 1fr 42px; gap: .8rem; padding: 1rem; }
    .dj-path-card__planet { inline-size: 72px; }
    .dj-path-card__art { inline-size: 78px; block-size: 78px; }
    .dj-path-card > b { inline-size: 40px; block-size: 40px; }
    .dj-trust { grid-template-columns: 1fr; padding: .5rem 1rem; }
    .dj-trust article { grid-template-columns: 72px 1fr; }
    .dj-trust__icon { inline-size: 66px; block-size: 66px; }
    .dj-trust article, .dj-trust article:nth-child(2) { border-inline-end: 0; border-block-end: 1px solid rgba(255,113,170,.28); }
    .dj-trust article:last-child { border-block-end: 0; }
    .dj-site-footer__inner { grid-template-columns: 1fr; }
    .dj-site-footer__bottom { align-items: flex-start; flex-direction: column; }
}

/* Course catalogue */
body.dj-catalog-page {
    margin: 0 !important;
    padding: 0 !important;
    background: #080424;
}

.dj-catalog {
    position: relative;
    min-block-size: 100vh;
    overflow: hidden;
    padding-block-start: var(--dj-space-4);
    color: #fff;
    background:
        radial-gradient(circle at 12% 13%, rgba(49,207,255,.14), transparent 24rem),
        radial-gradient(circle at 88% 27%, rgba(255,51,133,.15), transparent 27rem),
        linear-gradient(145deg, #090526, #160738 54%, #080424);
    isolation: isolate;
}

.dj-catalog::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .6;
    background:
        radial-gradient(circle at 6% 8%, #fff 0 1px, transparent 1.8px),
        radial-gradient(circle at 18% 32%, #31cfff 0 1.4px, transparent 2.2px),
        radial-gradient(circle at 31% 17%, #ff71aa 0 1px, transparent 1.9px),
        radial-gradient(circle at 44% 49%, #fff 0 .8px, transparent 1.7px),
        radial-gradient(circle at 57% 11%, #9f52d8 0 1.5px, transparent 2.4px),
        radial-gradient(circle at 69% 69%, #31cfff 0 1px, transparent 2px),
        radial-gradient(circle at 82% 37%, #fff 0 1.2px, transparent 2.1px),
        radial-gradient(circle at 94% 78%, #ff71aa 0 1.3px, transparent 2.2px);
    content: '';
}

.dj-catalog-hero {
    display: grid;
    min-block-size: 360px;
    grid-template-columns: minmax(0, 1fr) 330px;
    align-items: center;
    gap: clamp(1rem, 5vw, 5rem);
    margin-block-start: var(--dj-space-5);
    padding: clamp(2rem, 5vw, 4.5rem);
    overflow: hidden;
    border: 1px solid rgba(255,113,170,.58);
    border-radius: var(--dj-radius-xl);
    background: linear-gradient(135deg, rgba(16,39,112,.55), rgba(27,3,56,.72));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 28px 75px rgba(0,0,0,.3);
}

.dj-catalog-hero h1 { max-inline-size: 760px; margin: 0; color: #fff; font-size: clamp(2.35rem, 5vw, 4.5rem); line-height: 1.35; }
.dj-catalog-hero p { max-inline-size: 720px; margin: var(--dj-space-4) 0 0; color: rgba(255,255,255,.72); font-size: 1.08rem; line-height: 2; }
.dj-catalog-hero > img { inline-size: 320px; block-size: 320px; object-fit: contain; filter: drop-shadow(0 25px 25px rgba(0,0,0,.35)); transform: rotate(-4deg); }

.dj-catalog-panel { padding-block: clamp(3.5rem, 7vw, 7rem) 2rem; }
.dj-catalog-panel__heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-block-end: var(--dj-space-6); }
.dj-catalog-panel__heading h2 { margin: 0; color: #fff; font-size: clamp(1.8rem, 3.6vw, 3rem); }
.dj-catalog-panel__heading > span { flex: 0 0 auto; padding: .55rem 1rem; color: var(--dj-color-cyan); border: 1px solid rgba(49,207,255,.4); border-radius: var(--dj-radius-pill); background: rgba(16,39,112,.52); font-weight: 800; }

.dj-catalog-filters {
    display: grid;
    grid-template-columns: minmax(230px, 1.6fr) repeat(4, minmax(130px, .75fr)) auto;
    align-items: center;
    gap: .75rem;
    margin-block-end: var(--dj-space-7);
    padding: 1rem;
    border: 1px solid rgba(49,207,255,.28);
    border-radius: var(--dj-radius-lg);
    background: rgba(16,39,112,.38);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 18px 45px rgba(0,0,0,.2);
    backdrop-filter: blur(16px);
}

.dj-catalog-filters label { margin: 0; }
.dj-catalog-filters input,
.dj-catalog-filters select { inline-size: 100%; min-block-size: 50px; margin: 0; padding: 0 1rem; color: #211047; border: 1px solid rgba(255,255,255,.65); border-radius: 16px; outline: 0; background: rgba(255,255,255,.94); font: inherit; }
.dj-catalog-filters input:focus,
.dj-catalog-filters select:focus { border-color: var(--dj-color-cyan); box-shadow: 0 0 0 3px rgba(49,207,255,.2); }
.dj-catalog-search { position: relative; }
.dj-catalog-search input { padding-inline-end: 2.8rem; }
.dj-catalog-search b { position: absolute; inset-inline-end: 1rem; inset-block-start: 50%; color: #102770; font-size: 1.45rem; transform: translateY(-50%); }
.dj-catalog-filters .dj-button { min-block-size: 50px; border: 0; cursor: pointer; white-space: nowrap; }
.dj-catalog-reset { grid-column: 1 / -1; justify-self: end; color: rgba(255,255,255,.68); font-size: .86rem; text-decoration: none; }
.dj-catalog-reset:hover { color: var(--dj-color-cyan); }

.dj-course-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.8rem); }
.dj-course-card { min-inline-size: 0; overflow: hidden; border: 1px solid rgba(255,113,170,.42); border-radius: var(--dj-radius-lg); background: linear-gradient(155deg, rgba(255,255,255,.98), rgba(242,238,250,.95)); box-shadow: 0 22px 48px rgba(0,0,0,.27), inset 0 1px 0 #fff; transition: transform var(--dj-motion-normal) var(--dj-ease), border-color var(--dj-motion-normal) var(--dj-ease); }
.dj-course-card:hover { border-color: rgba(49,207,255,.75); transform: translateY(-7px); }
.dj-course-card__media { position: relative; display: grid; block-size: 230px; place-items: center; overflow: hidden; background: radial-gradient(circle at 68% 24%, rgba(255,113,170,.24), transparent 32%), linear-gradient(145deg, #17105b, #23063f); }
.dj-course-card__media > img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .45s var(--dj-ease); }
.dj-course-card__media > img[src*="dawnjoo-clay"] { padding: 1rem; object-fit: contain; }
.dj-course-card:hover .dj-course-card__media > img { transform: scale(1.045); }
.dj-course-card__media > span { position: absolute; inset-inline-start: 1rem; inset-block-start: 1rem; padding: .42rem .75rem; color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: var(--dj-radius-pill); background: rgba(255,51,133,.88); box-shadow: 0 7px 14px rgba(0,0,0,.22); font-size: .78rem; font-weight: 800; backdrop-filter: blur(8px); }
.dj-course-card__body { display: flex; min-block-size: 310px; flex-direction: column; padding: 1.35rem; }
.dj-course-card__terms { display: flex; flex-wrap: wrap; gap: .4rem; min-block-size: 28px; }
.dj-course-card__terms span { padding: .3rem .6rem; color: #5b2b83; border-radius: var(--dj-radius-pill); background: rgba(159,82,216,.11); font-size: .72rem; font-weight: 750; }
.dj-course-card h3 { margin: 1rem 0 .6rem; font-size: 1.35rem; line-height: 1.55; }
.dj-course-card h3 a { color: #160738; text-decoration: none; }
.dj-course-card__body > p { margin: 0; color: #6c6280; line-height: 1.9; }
.dj-course-card__footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-block-start: auto; padding-block-start: 1.2rem; border-block-start: 1px solid rgba(22,7,56,.09); }
.dj-course-card__footer div { display: flex; min-inline-size: 0; flex-direction: column; }
.dj-course-card__footer small { color: #887f98; font-size: .72rem; }
.dj-course-card__footer strong { color: #160738; font-size: .96rem; }
.dj-course-card__footer > a { flex: 0 0 auto; padding: .7rem .9rem; color: #fff; border-radius: 13px; background: linear-gradient(180deg, #31cfff, #138bd2); box-shadow: 0 5px 0 #0d669e; font-size: .82rem; font-weight: 850; text-decoration: none; }

.dj-catalog-pagination { margin-block-start: 2.5rem; }
.dj-catalog-pagination ul { display: flex; justify-content: center; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.dj-catalog-pagination a,
.dj-catalog-pagination span { display: grid; min-inline-size: 42px; min-block-size: 42px; place-items: center; padding-inline: .7rem; color: #fff; border: 1px solid rgba(49,207,255,.35); border-radius: 13px; background: rgba(16,39,112,.54); text-decoration: none; }
.dj-catalog-pagination .current { color: #fff; border-color: var(--dj-color-pink); background: var(--dj-color-pink); }

.dj-catalog-empty { display: grid; justify-items: center; padding: clamp(2rem, 6vw, 5rem); border: 1px solid rgba(255,113,170,.38); border-radius: var(--dj-radius-xl); background: rgba(16,39,112,.34); text-align: center; }
.dj-catalog-empty img { inline-size: 180px; block-size: 180px; object-fit: contain; }
.dj-catalog-empty h3 { margin: 1rem 0 .35rem; color: #fff; }
.dj-catalog-empty p { margin: 0 0 1.5rem; color: rgba(255,255,255,.65); }

.dj-catalog-note { display: flex; align-items: center; gap: 1.25rem; margin-block: 3rem 0; padding: 1.5rem 1.8rem; border: 1px solid rgba(49,207,255,.4); border-radius: var(--dj-radius-lg); background: linear-gradient(120deg, rgba(16,39,112,.68), rgba(41,8,77,.74)); box-shadow: var(--dj-shadow-float); }
.dj-catalog-note > span { display: grid; flex: 0 0 58px; inline-size: 58px; block-size: 58px; place-items: center; color: #fff; border-radius: 19px; background: linear-gradient(155deg, #31cfff, #126cdb); box-shadow: 0 7px 0 #0c4c9a; font-size: 1.7rem; }
.dj-catalog-note strong { color: #fff; font-size: 1.05rem; }
.dj-catalog-note p { margin: .25rem 0 0; color: rgba(255,255,255,.65); line-height: 1.9; }

@media (max-width: 1180px) {
    .dj-catalog-filters { grid-template-columns: repeat(3, 1fr); }
    .dj-catalog-search { grid-column: span 2; }
    .dj-course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .dj-catalog { padding-block-start: .625rem; }
    .dj-catalog-hero { min-block-size: 0; grid-template-columns: 1fr; padding: 1.8rem 1.15rem; text-align: center; }
    .dj-catalog-hero > img { grid-row: 1; inline-size: 190px; block-size: 190px; justify-self: center; }
    .dj-catalog-hero p { font-size: .95rem; }
    .dj-catalog-panel__heading { align-items: flex-start; flex-direction: column; }
    .dj-catalog-filters { grid-template-columns: 1fr; }
    .dj-catalog-search { grid-column: auto; }
    .dj-catalog-reset { grid-column: auto; justify-self: center; }
    .dj-course-grid { grid-template-columns: 1fr; }
    .dj-course-card__media { block-size: 210px; }
    .dj-catalog-note { align-items: flex-start; }
}